/* ═══════════════════════════════════════════════════════════════
   zquady.com, Startseite „Edel" (17.09.2026)
   Nur die Abschnitte der Startseite - alles Gemeinsame steht in basis.css.
   ═══════════════════════════════════════════════════════════════ */

/* Kopf-Foto je Thema: nur das gebrauchte laedt, und die Wahl im Kopf greift
   genauso wie das Geraet (drei Zustaende wie die Farb-Token). */
:root { --held-bild: url("/assets/held-hell.webp?v=61"); --held-bild-hoch: url("/assets/held-hoch-hell.webp?v=61"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --held-bild: url("/assets/held-dunkel.webp?v=61"); --held-bild-hoch: url("/assets/held-hoch-dunkel.webp?v=61"); }
}
:root[data-theme="dark"] { --held-bild: url("/assets/held-dunkel.webp?v=61"); --held-bild-hoch: url("/assets/held-hoch-dunkel.webp?v=61"); }
/* Karten-Foto genauso (drei Zustaende). */
:root { --karte-bild: url("/assets/karte-hell.webp?v=62"); --karte-bild-hoch: url("/assets/karte-hoch-hell.webp?v=62"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --karte-bild: url("/assets/karte-dunkel.webp?v=62"); --karte-bild-hoch: url("/assets/karte-hoch-dunkel.webp?v=62"); }
}
:root[data-theme="dark"] { --karte-bild: url("/assets/karte-dunkel.webp?v=62"); --karte-bild-hoch: url("/assets/karte-hoch-dunkel.webp?v=62"); }

section { padding-block: 160px; position: relative; }
section.nach-hell { padding-top: 40px; }

/* ── Held: Foto vollflaechig, Schleier links ─────────────────────────── */
.held-v { --held-h: clamp(760px, 58vw, 980px); position: relative; min-height: var(--held-h); display: grid; }
/* Container: das Foto misst sich an der ECHTEN Kopfhoehe (der Text macht den
   Kopf oft hoeher als --held-h), nicht an einer geschaetzten. */
.held-v .bild { position: absolute; inset: 0; overflow: hidden; container-type: size; }
/* Foto 1672 x 1151 (Wand oben und Tisch unten angesetzt, das Telefon steht bei
   13,8-89,3 % der Hoehe): es fuellt die ganze Kopfhoehe, die Telefonmitte
   (63,7 % der Bildbreite) steht bei 74 % der Breite (unter 1200 px gleitend
   weiter rechts, bei 900 px 80 %, sonst beruehrt der Text die Finger) - reicht
   es rechts nicht bis an den Rand, rueckt es nach. Oben, unten und links laeuft es in den
   Seitengrund aus, ohne das Telefon anzutasten. Erste Zeile = Rueckfall ohne
   Container-Einheiten. */
.held-v .bild::before {
  content: ""; position: absolute; top: 0;
  height: var(--held-h); width: calc(var(--held-h) * 1.4527); left: calc(74vw - var(--held-h) * .9258);
  height: 100cqh; width: calc(100cqh * 1.4527); left: max(calc(max(74cqw, 56cqw + 216px) - 100cqh * .9258), calc(100cqw - 100cqh * 1.4527));
  background: var(--held-bild) center / 100% 100% no-repeat; filter: var(--foto-filter);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, #000 32%), linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,.45) 5.5%, #000 12.5%, #000 89.5%, rgba(0,0,0,.5) 95%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, #000 32%), linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,.45) 5.5%, #000 12.5%, #000 89.5%, rgba(0,0,0,.5) 95%, rgba(0,0,0,0) 100%);
  mask-composite: intersect;
}
.held-v .schleier { position: absolute; inset: 0; background: linear-gradient(100deg, var(--grund) 8%, var(--grund-85) 30%, var(--grund-40) 48%, var(--grund-0) 64%); }
.held-v .inhalt { position: relative; align-self: center; width: 100%; padding-top: 120px; padding-bottom: 96px; }
.held-v h1 { max-width: 13ch; }
.held-v .unter { max-width: 38ch; }
.hinweis { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 30px; font-size: 15px; color: var(--tinte-2); }
.hinweis i { width: 7px; height: 7px; border-radius: 999px; background: var(--oliv); }
.zeile { display: block; }
.aktionen { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 44px; }
.held-sozial { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 36px; font-size: 15px; color: var(--tinte-2); }
.held-sozial b { color: var(--tinte); font-weight: 600; }
.held-sozial .sozial { margin-top: 0; gap: 6px; }
.held-sozial .sozial a { width: 40px; height: 40px; background: var(--karte); box-shadow: var(--knopf-schatten); }
.held-sozial .sozial svg { width: 18px; height: 18px; }
.kleingedrucktes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 28px; font-size: 14px; color: var(--tinte-3); }
.kleingedrucktes .zeichen { display: flex; gap: 12px; padding-right: 14px; border-right: 1px solid var(--linie); color: var(--tinte-2); }
.kleingedrucktes svg { width: 17px; height: 17px; }
/* Wortwechsel: nur das aktive Wort steht im Fluss; site.js gleitet die Hoehe. */
.rotwrap {
  position: relative; display: block; overflow: hidden; color: var(--oliv-tief);
  padding-block: .1em .16em; margin-block: -.1em -.16em; transition: height .42s cubic-bezier(.22,.8,.3,1);
}
.rotw { position: absolute; top: .1em; left: 0; right: 0; opacity: 0; transform: translateY(46%); transition: opacity .42s ease, transform .42s cubic-bezier(.22,.8,.3,1); }
.rotw.an { position: relative; top: 0; opacity: 1; transform: none; }
.rotw.war { opacity: 0; transform: translateY(-38%); transition-duration: .34s; }
@media (max-width: 860px) {
  /* Am Handy steht der Text UNTER dem Foto; das Handybild hat Luft ueber dem Telefon. */
  .held-v { min-height: 0; display: block; }
  /* Unter 860 px eine gerundete Karte UNTER der Leiste: so verdeckt die Leiste
     nichts. Tablet: das breite Foto bis zur echten Fotokante (ohne den
     angesetzten Tisch), Handy: der quadratische Ausschnitt. */
  .held-v .bild { position: relative; inset: auto; margin: 80px 16px 0; aspect-ratio: 1672 / 1081; border-radius: 28px; container-type: normal; }
  .held-v .bild::before {
    inset: 0; width: auto; height: auto;
    background: var(--held-bild) 50% 0 / 100% auto no-repeat;
    -webkit-mask-image: none; mask-image: none;
  }
  .held-v .schleier { display: none; }
  .held-v .inhalt { padding-top: 28px; padding-bottom: 72px; }
}
@media (max-width: 560px) {
  .held-v .bild { aspect-ratio: 1 / 1; }
  .held-v .bild::before { background: var(--held-bild-hoch) center / cover no-repeat; }
}

/* ── Warum: der Satz leuchtet Wort fuer Wort auf ─────────────────────── */
.manifest { padding-block: 150px 160px; }
.statement { font-weight: 600; font-size: clamp(34px, 5vw, 64px); line-height: 1.06; letter-spacing: -.045em; margin: 0; text-wrap: balance; }
.statement .w { color: var(--tinte-3); transition: color .35s ease; }
.statement .w.an { color: var(--tinte); }
.manifest-fuss { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; align-items: start; margin-top: 72px; }
.zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; }
.zahlen > div { border-top: 1px solid var(--linie); padding-top: 20px; }
/* 30 px max: „0 Nummern“ ist bei 34 px 181 px breit, die Spalte bei 1440 px nur 182 px - Edge brach um. */
.zahlen dt { font-size: clamp(26px, 2.2vw, 30px); font-weight: 600; line-height: 1.05; letter-spacing: -.04em; color: var(--tinte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zahlen dd { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--tinte-2); }
@media (max-width: 980px) { .manifest-fuss { grid-template-columns: 1fr; gap: 48px; } }
@media (max-width: 560px) {
  .zahlen { grid-template-columns: 1fr; gap: 0; }
  .zahlen > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 14px 0; }
  .zahlen dt { font-size: 26px; white-space: nowrap; }
  .zahlen dd { margin: 0; }
}
.manifest-fuss .unter { margin: 0; font-size: 18px; }
.manifest-fuss .textlink { margin-top: 26px; }

/* ── Karte: Spiegel des Kopfes - Telefon links im Foto, Text rechts ──── */
.karte-v { position: relative; display: grid; align-items: center; min-height: clamp(760px, 58vw, 940px); padding-block: 96px; }
.karte-v .bild { position: absolute; inset: 0; overflow: hidden; container-type: size; }
/* Foto 1672 x 1151 (Wand oben, Tisch unten angesetzt, karte_bilder.py; das
   Telefon steht bei 13,9-88,9 % der Hoehe, seine Mitte bei 29,1 % der Breite).
   So hoch wie der Abschnitt; die Telefonmitte steht ueber dem linken Viertel
   der Bahn (1200 px), in schmaleren Fenstern bei mindestens 27 % der Breite.
   Rechts laeuft die leere Wand unter dem Text aus, links, oben und unten weich
   in den Grund. Kein --foto-filter: die dunkle Aufnahme ist schon eine Nachtszene. */
.karte-v .bild::before {
  content: ""; position: absolute; inset: 0;
  background: var(--karte-bild) 29% 50% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.35) 7%, #000 16.5%, #000 50%, rgba(0,0,0,0) 96%), linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,.45) 5.5%, #000 12.5%, #000 89%, rgba(0,0,0,.5) 95%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.35) 7%, #000 16.5%, #000 50%, rgba(0,0,0,0) 96%), linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,.45) 5.5%, #000 12.5%, #000 89%, rgba(0,0,0,.5) 95%, rgba(0,0,0,0) 100%);
  mask-composite: intersect;
}
@supports (width: 1cqh) {
  .karte-v .bild::before {
    inset: 0 auto auto; height: 100cqh; width: calc(100cqh * 1.4527);
    left: calc(max(27cqw, 50cqw - 300px) - 100cqh * .4232);
    background-size: 100% 100%;
  }
}
.karte-v .bahn { position: relative; }
.karte-text { width: 50%; margin-left: 50%; padding-left: 16px; }
.karte-text h2 { font-size: clamp(34px, 3.6vw, 50px); }
.karte-text .unter { font-size: 18px; }
.karte-text .punkte { grid-template-columns: 1fr; gap: 22px; margin-top: 44px; }

/* ── Nacht-Abschnitte ────────────────────────────────────────────────── */
.nacht { background: var(--nacht); color: var(--nacht-tinte); border-block: 1px solid var(--nacht-linie); }
.nacht .unter, .nacht .abschnitt-name { color: var(--nacht-tinte-2); }
.nacht .abschnitt-name b { color: var(--oliv); }
.mitte { text-align: center; }
.mitte .abschnitt-name { justify-content: center; }
.mitte .unter { margin-inline: auto; }
.mitte h2 { margin-inline: auto; max-width: 18ch; }

/* ── Zwei Spalten mit Flaeche ────────────────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 88px; align-items: center; }
.split h2 { font-size: clamp(36px, 4.2vw, 56px); }
.stufe { position: relative; border-radius: 40px; background: var(--flaeche); padding: 64px 48px; min-height: 600px; display: grid; place-items: center; overflow: hidden; }
.stufe::before { content: ""; position: absolute; width: 90%; aspect-ratio: 1; left: -30%; top: -40%; background: radial-gradient(closest-side, var(--oliv-glanz), var(--oliv-0)); pointer-events: none; }
.app-karte { position: relative; width: 100%; max-width: 390px; background: var(--karte); border-radius: 28px; padding: 22px; box-shadow: var(--karte-schatten); }
.punkte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; margin-top: 52px; }
.punkte p { margin: 0; border-top: 1px solid var(--linie); padding-top: 20px; font-size: 15.5px; line-height: 1.6; color: var(--tinte-2); }
.punkte p b { display: block; margin-bottom: 8px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--tinte); }

/* Anlegen-Screen (App-Nachbau aus create.tsx) */
.cs-bl { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-3); margin: 24px 0 10px; }
.cs-bl.erst { margin-top: 2px; }
.cs-w { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-p { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 12px; border-radius: 999px; border: 1.5px solid rgba(0,0,0,0); background: var(--flaeche); color: var(--tinte); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.cs-p svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cs-x { font-size: 10.5px; color: var(--tinte-3); }
.cs-p.fest { background: var(--tinte); color: var(--grund); }
.cs-p.leer { background: rgba(0,0,0,0); border: 1.5px dashed var(--linie); color: var(--tinte-3); }
.cs-info { display: flex; gap: 10px; margin-top: 20px; padding: 13px 14px; border-radius: 16px; background: var(--oliv-glanz); }
.cs-info svg { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: none; stroke: var(--oliv-tief); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-info span { font-size: 13.5px; line-height: 1.5; color: var(--oliv-tief); font-weight: 600; }

/* ── Features: eine Zahl, fuenf Reiter, eine ruhige Liste ─────────────── */
.feat-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; }
.zahl { text-align: right; }
.zahl b { display: block; font-weight: 600; font-size: clamp(96px, 13vw, 184px); line-height: .8; letter-spacing: -.06em; color: var(--oliv-tief); font-variant-numeric: tabular-nums; }
.zahl span { display: block; margin-top: 18px; font-size: 15px; color: var(--tinte-2); }
.reiter-huelle { margin-top: 64px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.reiter-huelle::-webkit-scrollbar { display: none; }
.reiter { position: relative; display: inline-flex; gap: 2px; padding: 5px; border-radius: 999px; background: var(--flaeche); }
.reiter button { position: relative; z-index: 1; height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: rgba(0,0,0,0); cursor: pointer; font-size: 15px; font-weight: 600; color: var(--tinte-2); white-space: nowrap; transition: color .25s; }
.reiter button small { font-size: 12.5px; font-weight: 600; color: var(--tinte-3); margin-left: 6px; font-variant-numeric: tabular-nums; }
.reiter button[aria-selected="true"] { color: var(--tinte); }
.laeufer { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--karte); box-shadow: var(--knopf-schatten); transition: transform .4s cubic-bezier(.3,.7,.2,1), width .4s cubic-bezier(.3,.7,.2,1); }
.liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 72px; margin-top: 44px; transition: opacity .18s ease, transform .18s ease; }
.liste.weg { opacity: 0; transform: translateY(6px); }
.liste > div { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 24px; padding: 22px 0 24px; border-top: 1px solid var(--linie); }
.liste h3 { font-size: 16.5px; }
.liste p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--tinte-2); }

/* ── Vor, waehrend, danach ───────────────────────────────────────────── */
.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 72px; }
.phase { display: flex; flex-direction: column; border-radius: 32px; background: var(--nacht-flaeche); border: 1px solid var(--nacht-linie); padding: 12px 12px 30px; }
.phase-buehne { height: 290px; border-radius: 24px; display: grid; place-items: center; padding: 20px; background: radial-gradient(120% 90% at 50% 0%, rgba(167,183,122,.14), rgba(167,183,122,0) 62%), var(--nacht-tiefe); overflow: hidden; }
.phase-text { padding: 26px 16px 0; }
.stufen-name { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--oliv); }
.phase h3 { margin-top: 10px; font-size: 23px; letter-spacing: -.03em; color: var(--nacht-tinte); }
.phase ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.phase li { display: grid; gap: 2px; font-size: 14.5px; line-height: 1.5; color: var(--nacht-tinte-2); }
.phase li b { color: var(--nacht-tinte); font-weight: 600; font-size: 15px; }
.mini { width: 100%; max-width: 250px; border-radius: 20px; background: #1C1D1A; border: 1px solid rgba(255,255,255,.07); color: #F2F2EE; padding: 14px; font-size: 12.5px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.mini-kopf { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9C9E97; margin-bottom: 10px; }
.option { position: relative; display: flex; justify-content: space-between; align-items: center; height: 38px; padding: 0 12px; border-radius: 12px; background: #242521; overflow: hidden; margin-top: 7px; font-weight: 600; }
.option i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: rgba(167,183,122,.22); }
.option > span, .option b { position: relative; }
.option b { font-variant-numeric: tabular-nums; color: #BCC896; }
.sys { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 auto 8px; width: fit-content; max-width: 100%; padding: 5px 10px 5px 5px; border-radius: 999px; background: #242521; color: #BDBFB8; font-size: 11.5px; }
.sys b { color: #F2F2EE; font-weight: 600; }
.gesicht { width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; flex: none; font-size: 8px; font-weight: 700; color: #1F2415; }
.blase { margin: 12px 0 0; padding: 9px 12px; border-radius: 16px 16px 16px 5px; background: #2A2B27; width: fit-content; max-width: 90%; }
.mini .knopf { width: 100%; margin-top: 12px; background: #F2F2EE; color: #0B0C0A; }
.ticket { width: 100%; max-width: 250px; background: #F7F7F3; color: #0D0E0C; border-radius: 20px; overflow: hidden; transform: rotate(-3deg); box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.tk-kopf { background: #E9EAE3; padding: 13px 15px; }
.tk-k { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; color: #55672C; }
.tk-kopf b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; }
.tk-kopf small { font-size: 11px; color: #5F625A; }
.tk-perf { position: relative; height: 0; border-top: 1.5px dashed #CDCFC6; margin: 0 14px; }
.tk-perf::before, .tk-perf::after { content: ""; position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 999px; background: var(--nacht-tiefe); }
.tk-perf::before { left: -23px; }
.tk-perf::after { right: -23px; }
.tk-stempel { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 14px 4px; }
.tk-st { font-size: 9px; font-weight: 800; letter-spacing: .06em; border: 2px solid #55672C; color: #55672C; border-radius: 7px; padding: 3px 6px; transform: rotate(-6deg); }
.tk-st.off { border-color: #CDCFC6; color: #A3A69E; }
.tk-body { padding: 8px 14px 14px; font-size: 11.5px; line-height: 1.45; color: #5F625A; }

/* ── Kategorien: die Anlegen-Karte ───────────────────────────────────── */
.ckopf { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--linie); }
.beleg-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--oliv); flex: none; }
.cm-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.cm-schritt { margin-left: auto; font-size: 13px; color: var(--tinte-3); }
.cfrage { margin: 0 0 12px; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.cw-kats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
.cw-kat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 15px 6px 13px; border: 0; border-radius: 18px; background: var(--flaeche); color: var(--tinte-2); cursor: pointer; font-size: 13px; transition: background-color .25s, color .25s; }
.cw-kat svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cw-kat b { font-weight: 600; }
.cw-kat:hover { color: var(--tinte); }
.cw-kat.on { background: var(--tinte); color: var(--grund); }
.cw-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ktag { display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border-radius: 999px; background: var(--oliv-glanz); color: var(--oliv-tief); font-size: 13.5px; font-weight: 600; }
.ktag.tippt { background: rgba(0,0,0,0); color: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--linie); }
.ccursor { display: inline-block; width: 2px; height: 15px; margin-left: 2px; background: var(--tinte); animation: blinken 1s steps(1) infinite; }
@keyframes blinken { 50% { opacity: 0; } }
.chint { margin: 0; font-size: 13.5px; color: var(--tinte-3); }

/* ── Fragen ───────────────────────────────────────────────────────────── */
.fragen { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 96px; align-items: start; }
.fragen-kopf { position: sticky; top: 120px; }
.fragen-kopf h2 { font-size: clamp(36px, 4.2vw, 56px); }
.fragen-liste details { border-top: 1px solid var(--linie); }
.fragen-liste details:last-child { border-bottom: 1px solid var(--linie); }
.fragen-liste summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 24px; align-items: center; padding: 26px 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.35; }
.fragen-liste summary::-webkit-details-marker { display: none; }
.plus { position: relative; width: 38px; height: 38px; border-radius: 999px; background: var(--flaeche); transition: background-color .2s, transform .35s cubic-bezier(.3,.7,.2,1); }
.plus::before, .plus::after { content: ""; position: absolute; left: 13px; right: 13px; top: 18px; height: 1.8px; border-radius: 2px; background: var(--tinte); }
.plus::after { transform: rotate(90deg); transition: transform .35s cubic-bezier(.3,.7,.2,1); }
details[open] .plus { transform: rotate(180deg); }
details[open] .plus::after { transform: rotate(0deg); }
summary:hover .plus { background: var(--flaeche-2); }
.fragen-liste p { margin: -6px 0 30px; max-width: 62ch; color: var(--tinte-2); }
.fragen-liste p a { color: var(--tinte); font-weight: 600; }

/* ── Community: vier Kacheln ─────────────────────────────────────────── */
.soz-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.soz-handle { margin: 0; font-weight: 600; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.035em; color: var(--oliv-tief); }
.soz-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.soz-kachel { position: relative; display: flex; flex-direction: column; min-height: 270px; padding: 26px; border-radius: 32px; background: var(--flaeche); color: var(--tinte); transition: background-color .25s, transform .25s; }
.soz-kachel:hover { background: var(--flaeche-2); transform: translateY(-3px); }
.zeichen-gross { width: 60px; height: 60px; border-radius: 999px; display: grid; place-items: center; background: var(--karte); box-shadow: var(--knopf-schatten); }
.soz-kachel .zeichen-gross svg { width: 28px; height: 28px; }
.pfeil { position: absolute; right: 24px; top: 26px; width: 40px; height: 40px; display: grid; place-items: center; color: var(--tinte-2); transition: transform .25s, color .25s; }
.pfeil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.soz-kachel:hover .pfeil { transform: translate(3px, -3px); color: var(--tinte); }
.soz-kachel .name { margin-top: auto; padding-top: 32px; font-size: 22px; font-weight: 600; letter-spacing: -.025em; }
.soz-kachel .handle { font-size: 15px; color: var(--tinte-2); margin-top: 2px; }
.soz-kachel .satz { font-size: 15px; line-height: 1.5; color: var(--tinte-2); margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--linie); min-height: 59px; }

/* ── Download: dunkle Karte im hellen Grund ─────────────────────────── */
.schluss-karte { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 64px; align-items: center; border-radius: 40px; background: var(--nacht); color: var(--nacht-tinte); padding: 96px 88px; border: 1px solid var(--nacht-linie); }
.schluss-karte::before { content: ""; position: absolute; right: -10%; bottom: -60%; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(167,183,122,.24), rgba(167,183,122,0)); pointer-events: none; }
.schluss-karte > * { position: relative; }
.schluss-karte h2 { font-size: clamp(40px, 5.4vw, 76px); }
.schluss-karte h2 em { font-style: normal; color: var(--oliv); }
.schluss-karte .unter { color: var(--nacht-tinte-2); }
.store-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; }
.store-knopf { display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 24px 0 20px; border-radius: 999px; background: #F4F4F0; color: #0B0C0A; font-weight: 600; font-size: 17px; line-height: 1.1; transition: opacity .2s; }
.store-knopf:hover { opacity: .88; }
.store-knopf svg { width: 22px; height: 22px; }
.store-knopf small { display: block; font-size: 11px; font-weight: 400; color: #5F625A; }
.fakten { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 40px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--nacht-tinte-2); }
.fakten li { display: flex; align-items: center; gap: 8px; }
.fakten li::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--oliv); }
.folgen { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--nacht-linie); font-size: 15px; color: var(--nacht-tinte-2); }
.folgen .sozial { margin-top: 0; }
.folgen .sozial a { background: rgba(255,255,255,.08); color: var(--nacht-tinte); }
.folgen .sozial a:hover { background: rgba(255,255,255,.15); }
.qr-block { text-align: center; }
.fin-qr-bild { position: relative; display: block; padding: 18px; border-radius: 30px; background: #FFFFFF; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.fin-qr-bild > svg { display: block; width: 176px; height: 176px; }
.fin-qr-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 11px; background: #FFFFFF; display: grid; place-items: center; box-shadow: 0 0 0 4px #FFFFFF; }
.fin-qr-logo svg { width: 30px; height: 30px; }
.qr-text { margin: 16px 0 0; font-size: 14px; color: var(--nacht-tinte-2); }

/* ── Schmaler ──────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  section { padding-block: 120px; }
  .split, .fragen { grid-template-columns: 1fr; gap: 56px; }
  .split .stufe { order: 2; }
  .feat-kopf, .soz-kopf { grid-template-columns: 1fr; gap: 24px; }
  .zahl { text-align: left; }
  .liste, .drei { grid-template-columns: 1fr; }
  .soz-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fragen-kopf { position: static; }
  .schluss-karte { grid-template-columns: 1fr; padding: 64px 40px; }
}
@media (max-width: 980px) {
  /* Karte: das Foto wird eine runde Karte, der Text steht darunter
     (Tablet das breite Foto bis zur echten Fotokante, Handy das Quadrat). */
  .karte-v { display: block; min-height: 0; padding-block: 0 110px; }
  .karte-v .bild { position: relative; inset: auto; margin: 0 24px; aspect-ratio: 1672 / 1081; border-radius: 32px; container-type: normal; }
  .karte-v .bild::before { inset: 0; width: auto; height: auto; background: var(--karte-bild) 50% 0 / 100% auto no-repeat; -webkit-mask-image: none; mask-image: none; }
  .karte-text { width: auto; margin: 52px 0 0; padding: 0; }
}
@media (max-width: 720px) {
  .karte-v { padding-bottom: 88px; }
  .karte-v .bild { margin-inline: 16px; border-radius: 28px; }
  .karte-text { margin-top: 40px; }
}
@media (max-width: 560px) {
  .karte-v .bild { aspect-ratio: 1 / 1; }
  .karte-v .bild::before { background: var(--karte-bild-hoch) center / cover no-repeat; }
}
@media (max-width: 720px) {
  section, .manifest { padding-block: 96px; }
  section.nach-hell { padding-top: 24px; }
  .stufe { border-radius: 28px; }
  .stufe { padding: 32px 14px; min-height: 0; }
  .punkte { grid-template-columns: 1fr; gap: 24px; }
  .liste > div { grid-template-columns: 1fr; gap: 6px; }
  .manifest-fuss { margin-top: 44px; }
  .fragen-liste summary { font-size: 17px; padding: 22px 0; }
  .soz-kacheln { grid-template-columns: 1fr; }
  .soz-kachel { min-height: 0; }
  .soz-kachel .satz { min-height: 0; }
  .schluss-karte { padding: 48px 24px; border-radius: 28px; }
  .qr-block { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rotw, .rotw.war { transform: none; transition: opacity .5s linear; }
  .rotwrap, .laeufer, .liste, .statement .w, .soz-kachel { transition: none; }
  .soz-kachel:hover { transform: none; }
}