/* Unterseiten von luma-alp.com (Ratgeber, Branchen). Gleiche Farben und Schriften wie die Startseite. */
:root {
  --bg: #f7f6f2; --surface: #fff; --tint: #eff4f0; --text: #15201b; --muted: #5a6862; --line: rgba(21,32,27,.1);
  --accent: #1d7350; --accent-2: #165f41; --sun: #f2a33a;
  --shadow: 0 1px 2px rgba(21,32,27,.04), 0 8px 24px rgba(21,32,27,.06);
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "Figtree", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font: 400 17px/1.65 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.wrap { max-width: 1100px; margin: 0 auto; padding-inline: 20px; }
.text { max-width: 720px; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 10; background: rgba(247,246,242,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.marke b { font: 800 1.35rem var(--display); letter-spacing: -.035em; }
.marke b span { color: var(--accent); font-weight: 500; margin-left: .14em; }
.knopf { display: inline-flex; align-items: center; gap: 8px; background: var(--text); color: #fff; text-decoration: none; padding: 12px 20px; border-radius: 999px; font: 600 .95rem var(--body); }
.knopf:hover { background: var(--accent-2); }
.knopf.hell { background: var(--accent); }

/* Brotkrumen */
.krumen { font-size: .9rem; color: var(--muted); padding-top: 28px; }
.krumen a { color: var(--muted); }

/* Kopfbereich */
.start { padding-block: 26px 46px; display: grid; gap: 18px; }
.start h1 { font-size: clamp(2.3rem, 5.4vw, 3.8rem); }
.start .lead { font-size: 1.2rem; color: #33413a; max-width: 40em; }
.kurz { background: var(--surface); border-radius: 18px; padding: 22px 24px; box-shadow: var(--shadow); display: grid; gap: 6px; max-width: 720px; }
.kurz b { font: 700 .82rem var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* Inhalt */
main section { padding-block: 34px; }
main h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-bottom: 16px; }
main h3 { font-size: 1.2rem; margin-bottom: 6px; }
main p + p { margin-top: 14px; }
main ul.liste { margin: 14px 0 0 1.2em; display: grid; gap: 8px; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; }
.karte { background: var(--surface); border-radius: 18px; padding: 22px; box-shadow: var(--shadow); display: grid; gap: 8px; align-content: start; }
.karte .preis { font: 800 1.8rem var(--display); letter-spacing: -.03em; }
.karte .preis small { font: 500 .9rem var(--body); color: var(--muted); letter-spacing: 0; }
.karte p { color: #3a4842; font-size: .98rem; }

table { width: 100%; border-collapse: collapse; margin-top: 16px; background: var(--surface); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 700 .82rem var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--tint); }
td:last-child { white-space: nowrap; font-weight: 600; }
.tabelle { overflow-x: auto; }

.hinweis { background: var(--tint); border-radius: 14px; padding: 16px 18px; margin-top: 18px; }

/* Fragen */
.fragen details { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); }
.fragen details + details { margin-top: 10px; }
.fragen summary { cursor: pointer; list-style: none; padding: 18px 48px 18px 20px; position: relative; font: 600 1.05rem/1.35 var(--body); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; position: absolute; right: 20px; top: 13px; font: 400 1.6rem var(--body); color: var(--accent); }
.fragen details[open] summary::after { content: "–"; }
.fragen details p { padding: 0 20px 18px; color: #33413a; }

/* Abschluss */
.aufruf { background: var(--text); color: #fff; border-radius: 24px; padding: clamp(26px, 5vw, 48px); margin-block: 30px 60px; display: grid; gap: 14px; }
.aufruf h2 { color: #fff; margin: 0; }
.aufruf p { color: rgba(255,255,255,.8); max-width: 40em; }
.aufruf .knopf { justify-self: start; background: var(--sun); color: #1c1205; }

footer { border-top: 1px solid var(--line); padding-block: 28px 40px; font-size: .9rem; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }
footer a { color: var(--muted); }
footer .branchen-links { flex-basis: 100%; }
@media (max-width: 560px) { .kopf .knopf { padding: 9px 13px; font-size: .84rem; white-space: nowrap; } .marke b { font-size: 1.15rem; } .marke img { width: 30px; height: 30px; } }