/* ======================================================================
   buecherzettel.digital – Website
   Grundlage: vorgaben/v2 (Landingpage) + vorgaben/designsystem/tokens.css
   Regeln: eckig, keine Schatten/Verläufe, Lila-Schrift nur auf Weiß,
   Grün-Schrift nur auf Schwarz, eine Primäraktion je Ansicht, Überschriften in Versalien.
   ====================================================================== */

/* ---------- Schriften (Ubuntu Font Licence, lokal) ---------- */
@font-face{font-family:"Ubuntu";src:url("../Fonts/ubuntu-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Ubuntu";src:url("../Fonts/ubuntu-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Ubuntu";src:url("../Fonts/ubuntu-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Ubuntu Sans";src:url("../Fonts/ubuntu-sans-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* ---------- Tokens (aus designsystem/tokens.css) ---------- */
:root,[data-theme="hell"]{
  --gruen:#b6e700;--lila:#844fab;--schwarz:#1d1d1b;--weiss:#ffffff;--grau-hell:#f3f5f7;
  --flaeche:var(--weiss);--text:var(--schwarz);--akzent:var(--lila);
  --auf-gruen:var(--schwarz);--auf-lila:var(--weiss);
  --aktion:var(--lila);--auf-aktion:var(--weiss);
  --flaeche-feld:var(--grau-hell);--text-leise:#5c5c59;
  --signal-erfolg:#2b7a0b;--signal-fehler:#c4161c;
}
[data-theme="dunkel"]{
  --flaeche:var(--schwarz);--text:var(--weiss);--akzent:var(--gruen);
  --aktion:var(--gruen);--auf-aktion:var(--schwarz);
  --flaeche-feld:#2c2c2a;--text-leise:#b3b3ad;
  --signal-erfolg:var(--gruen);--signal-fehler:#ff7a73;
}
:root{
  --abstand-1:8px;--abstand-2:16px;--abstand-3:32px;--abstand-4:64px;
  --radius-0:0;--strich-neigung:20deg;
  --font-sans:"Ubuntu",system-ui,sans-serif;
  --font-display:"Ubuntu Sans","Ubuntu",system-ui,sans-serif;
  /* Seitenebene (vorgaben/DESIGN.md) */
  --rand:clamp(20px,4.5vw,72px);
  --breite:1360px;
  --sektion:clamp(80px,10vw,152px);
  --kopf:80px;
  --linie-hell:#d7dade;
  --linie-dunkel:#4a4a46;
  --text-dunkel-leise:#d9d9d3;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--weiss);color:var(--schwarz);font:400 18px/1.55 var(--font-sans);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;text-transform:uppercase;margin:0;text-wrap:balance;letter-spacing:-.005em;overflow-wrap:break-word}
p,ul,ol,dl,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:2px}
button,input,textarea,select{font:inherit;color:inherit}
address{font-style:normal}
::selection{background:var(--lila);color:var(--weiss)}
[data-theme="dunkel"] ::selection{background:var(--gruen);color:var(--schwarz)}
:focus-visible{outline:3px solid var(--lila);outline-offset:3px}
.band--gruen :focus-visible{outline-color:var(--schwarz)}
.band--lila :focus-visible{outline-color:var(--weiss)}
[data-theme="dunkel"] :focus-visible{outline-color:var(--gruen)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.defs{position:absolute;width:0;height:0;overflow:hidden}

.rahmen{width:100%;max-width:calc(var(--breite) + 2*var(--rand));margin:0 auto;padding:0 var(--rand)}
.gruen{color:var(--gruen)}
.sprung{position:absolute;left:12px;top:-60px;z-index:99;background:var(--schwarz);color:var(--weiss);padding:12px 16px;font:800 13px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase}
.sprung:focus{top:12px}

/* ---------- Bänder ---------- */
.band{padding:var(--sektion) 0}
.band--weiss{background:var(--weiss);color:var(--schwarz)}
.band--grau{background:var(--grau-hell);color:var(--schwarz)}
.band--gruen{background:var(--gruen);color:var(--schwarz)}
.band--schwarz{background:var(--schwarz);color:var(--weiss)}
.band--lila{background:var(--lila);color:var(--weiss)}
/* Lila-Schrift nur auf Weiß, Grün-Schrift nur auf Schwarz */
.titel-band{font-size:clamp(34px,4.2vw,60px);line-height:1}
.titel-band .akzent{color:var(--lila)}
.band--schwarz .titel-band .akzent{color:var(--gruen)}
.band--gruen .titel-band .akzent,.band--grau .titel-band .akzent,.band--lila .titel-band .akzent{color:inherit}
.band--gruen .titel-band .akzent{background:var(--schwarz);color:var(--gruen);padding:0 .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.dachzeile{display:block;font:800 13px/1.2 var(--font-display);letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.text{max-width:40em}
.text p+p,.text p+ul,.text ul+p{margin-top:1em}
.text ul{display:grid;gap:8px;margin-top:1em}
.text ul li{display:flex;gap:12px;align-items:baseline}
.text ul li::before{content:"";flex:none;width:5px;height:15px;background:var(--lila);transform:skewX(calc(-1*var(--strich-neigung)));translate:0 2px}
.band--schwarz .text ul li::before{background:var(--gruen)}
.band--gruen .text ul li::before,.band--lila .text ul li::before{background:currentColor}
.text a{font-weight:500}
.band--weiss .text a{color:var(--lila)}
.band--schwarz .text a{color:var(--gruen)}
.einleitung{font:500 clamp(19px,1.6vw,23px)/1.5 var(--font-sans);max-width:34em}
.einleitung p+p{margin-top:.8em}

/* ---------- Striche ---------- */
.strich{display:inline-block;width:6px;height:18px;background:var(--lila);transform:skewX(calc(-1*var(--strich-neigung)));flex:none}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border:2px solid transparent;font:800 14px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;text-align:center;cursor:pointer;transition:background-color .18s,color .18s,border-color .18s}
.knopf--primaer{background:var(--aktion);border-color:var(--aktion);color:var(--auf-aktion)}
.knopf--primaer:hover{background:var(--schwarz);border-color:var(--schwarz);color:var(--weiss)}
[data-theme="dunkel"] .knopf--primaer:hover{background:var(--weiss);border-color:var(--weiss);color:var(--schwarz)}
.knopf--linie{border-color:currentColor;color:inherit;background:transparent}
.knopf--linie:hover{background:var(--schwarz);border-color:var(--schwarz);color:var(--gruen)}
[data-theme="dunkel"] .knopf--linie:hover{background:var(--weiss);border-color:var(--weiss);color:var(--schwarz)}
.band--lila .knopf--linie:hover{background:var(--weiss);border-color:var(--weiss);color:var(--lila)}
.band--lila .knopf--primaer{background:var(--weiss);border-color:var(--weiss);color:var(--lila)}
.band--lila .knopf--primaer:hover{background:var(--schwarz);border-color:var(--schwarz);color:var(--weiss)}
.knopf--klein{min-height:44px;padding:0 20px;font-size:13px}
.knopf--breit{width:100%}
.knopf:disabled{background:var(--flaeche-feld);border-color:var(--flaeche-feld);color:var(--text-leise);cursor:not-allowed}
.aktionen{display:flex;flex-wrap:wrap;gap:14px 20px;margin-top:32px}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:20;background:var(--weiss);border-bottom:2px solid var(--schwarz)}
.kopf-in{display:flex;align-items:center;gap:32px;height:var(--kopf);max-width:calc(var(--breite) + 2*var(--rand));margin:0 auto;padding:0 var(--rand)}
.marke{flex:none}
.marke img{height:48px;width:auto}
.menue{margin-left:auto}
.menue ul{display:flex;gap:26px}
.menue ul{align-items:center}
.menue a{display:block;font:800 13px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:8px 0;border-bottom:2px solid transparent;white-space:nowrap}
.menue a:hover,.menue a[aria-current],.menue a.ist-aktiv{border-bottom-color:var(--lila)}
.kopf-aktionen{display:flex;align-items:center;gap:20px}
.burger{all:unset;display:none;cursor:pointer;width:44px;height:44px;align-items:center;justify-content:center}
.burger:focus-visible{outline:3px solid var(--lila);outline-offset:3px}
.burger-striche{display:inline-flex;gap:5px}
.burger-striche i{width:5px;height:22px;background:var(--schwarz);transform:skewX(calc(-1*var(--strich-neigung)));transition:background-color .15s}
.burger-striche i:last-child{background:var(--lila)}
.burger[aria-expanded="true"] .burger-striche i{background:var(--lila)}

/* ---------- 1 · Rechnung (Einstieg Startseite) ---------- */
.rechnung{padding:clamp(56px,7vw,112px) 0 clamp(40px,5vw,72px)}
.rechnung-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px clamp(40px,6vw,104px);align-items:end}
.rechnung h1{font-size:clamp(40px,5.6vw,84px);line-height:.96;max-width:11em}
.rechnung h1 .dachzeile{font-size:clamp(13px,1.1vw,15px);margin-bottom:24px}
.satz{font:500 clamp(20px,1.9vw,27px)/1.5 var(--font-sans);max-width:24em}
.satz b{font-weight:500;background:var(--schwarz);color:var(--gruen);padding:0 .25em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.satz-feld{display:inline-block;vertical-align:-.12em;margin:0 .1em}
.satz-feld input{width:4.2ch;min-width:3ch;border:3px solid var(--schwarz);border-radius:0;background:var(--weiss);padding:0 .25em;font:800 1.5em/1.2 var(--font-display);font-variant-numeric:tabular-nums;text-align:center;outline:0;caret-color:var(--lila)}
.satz-feld input:focus-visible{outline:3px solid var(--schwarz);outline-offset:3px}
.zaehler-hinweis{margin-top:12px;font-size:15px}
.zaehler-hinweis.ist-fehler{font-weight:500}
.zaehler-hinweis.ist-fehler::before{content:"";display:inline-block;width:6px;height:16px;margin-right:10px;background:var(--schwarz);transform:skewX(-20deg);vertical-align:-2px}
.strichfeld{margin-top:clamp(48px,6vw,88px);height:clamp(120px,13vw,190px);position:relative}
.strichfeld canvas{position:absolute;inset:0;width:100%;height:100%}
.rechnung-ehrlich{display:flex;gap:12px;align-items:center;margin-top:20px;font-size:15px}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.intro{padding:clamp(56px,7vw,112px) 0 clamp(56px,6vw,96px)}
.intro-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(40px,6vw,104px);align-items:end}
.intro .titel-band{font-size:clamp(38px,5vw,76px);line-height:.98;max-width:12em}
.intro .aktionen{margin-top:28px}
.band--gruen.intro .einleitung a{font-weight:500}

/* ---------- 2 · Weg ---------- */
.weg-raster{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px clamp(40px,7vw,120px);align-items:start}
.weg-kopf{position:sticky;top:calc(var(--kopf) + 48px)}
.weg-zahl{margin-top:20px;font-size:20px;color:var(--text-dunkel-leise)}
.folgen-liste{margin-top:clamp(36px,4vw,56px);display:grid;gap:14px}
.folgen-liste li{display:flex;gap:14px;align-items:center;font:800 clamp(18px,1.6vw,22px)/1.2 var(--font-display);text-transform:uppercase;color:var(--gruen)}
.folgen-liste li::before{content:"";width:6px;height:18px;background:var(--gruen);transform:skewX(-20deg);flex:none}
.stationen{counter-reset:s;border-left:2px solid var(--linie-dunkel);margin-left:20px}
.stationen li{counter-increment:s;position:relative;padding:0 0 clamp(36px,4vw,52px) 48px;font:500 clamp(19px,1.7vw,24px)/1.3 var(--font-sans);color:var(--weiss)}
.stationen li:last-child{padding-bottom:0}
.stationen li::before{content:counter(s);position:absolute;left:-21px;top:-6px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--schwarz);border:2px solid var(--linie-dunkel);font:800 16px/1 var(--font-display);color:var(--weiss)}
.station-bruch{text-decoration:line-through;text-decoration-color:var(--gruen);text-decoration-thickness:3px}
.stationen .station-bruch::before{border-color:var(--gruen);color:var(--gruen)}

/* ---------- 3 · Ablauf ---------- */
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px clamp(24px,3vw,48px);margin-top:clamp(36px,4vw,56px);counter-reset:schritt}
.schritt{counter-increment:schritt;border-top:3px solid currentColor;padding-top:18px;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-content:start}
.schritt::before{content:counter(schritt);grid-row:1 / span 2;font:800 44px/.9 var(--font-display);color:var(--lila)}
.band--grau .schritt::before,.band--gruen .schritt::before,.band--lila .schritt::before{color:inherit}
.band--schwarz .schritt::before{color:var(--gruen)}
.schritt h3{font-size:clamp(17px,1.5vw,20px);line-height:1.2}
.schritt p{margin-top:6px;font-size:16px}
.schritt.ist-aktiv{border-top-color:var(--lila)}

.ansichten{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:clamp(32px,4vw,64px);align-items:center;margin-top:clamp(56px,7vw,96px)}
.ansichten--einzeln{grid-template-columns:minmax(0,1fr)}
.ansicht figcaption{margin-top:14px;font-size:15px}
.ansicht figcaption b{font-weight:500}
.browser{border:3px solid var(--schwarz);background:var(--weiss)}
.browser-leiste{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;background:var(--schwarz);color:var(--text-dunkel-leise)}
.browser-leiste i{width:10px;height:10px;background:var(--linie-dunkel)}
.browser-leiste span{margin-left:14px;font-size:13px;letter-spacing:.02em}
.bildflaeche{position:relative;overflow:hidden}
.bildflaeche--16x10{aspect-ratio:16/10}
.bildflaeche--16x9{aspect-ratio:16/9}
.bildflaeche>img{width:100%;height:100%;object-fit:cover;object-position:top left}
.platz--bild{position:absolute;inset:0;border:0;display:flex;flex-direction:column;justify-content:flex-end;padding:24px}

.handy{border:12px solid var(--schwarz);border-top-width:28px;border-bottom-width:28px;background:var(--weiss);color:var(--schwarz);max-width:360px}
.zettel-kopf{padding:18px 18px 14px;background:var(--weiss);border-bottom:3px solid var(--schwarz)}
.zettel-kopf h3{font-size:20px}
.zettel-kopf p{margin-top:4px;font-size:14px;color:#5c5c59}
.posten-zeile{display:grid;grid-template-columns:1fr auto;gap:10px 12px;padding:14px 18px;border-bottom:2px solid var(--grau-hell)}
.posten-info{display:flex;flex-direction:column;gap:3px}
.fach{font:800 12px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--lila)}
.titel{font-size:15px;line-height:1.3}
.preis{font-weight:500;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.wahl{grid-column:1 / -1;display:flex}
.wahl button{flex:1;min-height:44px;border:2px solid var(--schwarz);border-radius:0;background:var(--weiss);font:800 12px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background-color .15s,color .15s}
.wahl button+button{border-left:0}
.wahl button:hover{background:var(--grau-hell)}
.wahl button[aria-pressed="true"]{background:var(--lila);border-color:var(--lila);color:var(--weiss)}
.zettel-fuss{padding:16px 18px 18px;display:grid;gap:14px}
.stand{display:flex;align-items:center;gap:12px;font-weight:500;font-size:15px}
.strichreihe{display:inline-flex;gap:6px}
.strichreihe i{width:7px;height:22px;background:var(--grau-hell);transform:skewX(-20deg);transition:background-color .2s}
.strichreihe i.an{background:var(--lila)}
.strichreihe i.neu{animation:strich-rein .32s cubic-bezier(.16,1,.3,1)}
@keyframes strich-rein{from{transform:skewX(-20deg) scaleY(.2)}to{transform:skewX(-20deg) scaleY(1)}}
.summe{font-variant-numeric:tabular-nums;font-size:15px}
.weg-wahl{border:0;padding:0;margin:0;display:grid;gap:8px;font-size:15px}
.weg-wahl legend{font:800 12px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;padding:0}
.weg-wahl:disabled{opacity:.45}
.weg-wahl label{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:32px;line-height:1.3}
.weg-wahl input{position:absolute;opacity:0;width:1px;height:1px}
.radio{width:24px;height:24px;border:2px solid currentColor;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none}
.radio i{width:4px;height:12px;background:var(--lila);transform:skewX(-20deg);visibility:hidden}
input:checked+.radio i{visibility:visible}
input:focus-visible+.radio{outline:3px solid var(--lila);outline-offset:3px}
.zettel-meldung{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;background:var(--grau-hell);font-size:15px}
.zettel-meldung::before{content:"";flex:none;width:30px;height:30px;background:url("../Images/bz-u_schwarz-lila.svg") no-repeat center/contain}
.zettel-meldung b{font-weight:500}

/* ---------- Platzhalter (nur mit Backend-Anmeldung, siehe setup.typoscript) ---------- */
.platz{border:2px dashed #8a8a84;padding:18px 20px 16px;background:repeating-linear-gradient(-70deg,transparent 0 14px,rgba(29,29,27,.05) 14px 16px)}
.platz-marke{display:inline-block;background:var(--schwarz);color:var(--gruen);font:800 11px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;vertical-align:middle}
.platz-titel{margin-top:10px;font-weight:500;font-size:17px;line-height:1.3}
.platz-text{margin-top:6px;font-size:15px}
[data-theme="dunkel"] .platz,.band--lila .platz{border-color:#77776f;background:repeating-linear-gradient(-70deg,transparent 0 14px,rgba(255,255,255,.06) 14px 16px)}
[data-theme="dunkel"] .platz-marke{background:var(--gruen);color:var(--schwarz)}

/* ---------- Ü-Form-Fotos ---------- */
.ufoto{display:block;width:100%;height:auto;aspect-ratio:40/50}
.ufoto-rahmen figcaption{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;font-size:15px}
.ufoto--klein,.ufoto--klein .ufoto{max-width:120px}

/* ---------- 4 · Für wen (Reiter) / Vorteile ---------- */
.reiter{display:flex;gap:clamp(20px,3vw,44px);margin-top:clamp(32px,4vw,48px);border-bottom:2px solid #b9bcc0;overflow-x:auto;scrollbar-width:none}
.reiter-knopf{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:0 0 16px;margin-bottom:-2px;border-bottom:3px solid transparent;font:800 15px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:#4d4d4a;white-space:nowrap}
.reiter-knopf .strich{visibility:hidden;height:16px;width:5px}
.reiter-knopf[aria-selected="true"]{color:var(--schwarz);border-bottom-color:var(--schwarz)}
.reiter-knopf[aria-selected="true"] .strich{visibility:visible}
.reiter-knopf:hover{color:var(--schwarz)}
.reiter-knopf:focus-visible{outline:3px solid var(--lila);outline-offset:4px}
.reiter-feld{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:40px clamp(40px,7vw,120px);align-items:start;padding-top:clamp(32px,4vw,48px)}
.reiter-feld:focus-visible{outline-offset:8px}
.reiter-inhalt>*+*{margin-top:28px}
.reiter-inhalt .aktionen{margin-top:28px}
.vorteile-raster>div>*+*{margin-top:28px}
.haken-liste li{display:flex;gap:18px;align-items:center;padding:16px 0;border-bottom:2px solid var(--linie-hell);font:800 clamp(18px,1.7vw,23px)/1.15 var(--font-display);text-transform:uppercase}
.band--grau .haken-liste li{border-bottom-color:#d0d3d7}
.inhalt .haken-liste{display:block}
.inhalt .haken-liste li{gap:18px;align-items:center}
.inhalt .haken-liste li::before{content:none}
.vorteile--im-raster .reiter-feld{padding-top:0}
.rahmen>.frame+.vorteile--im-raster,.rahmen>.vorteile--im-raster+.frame,.rahmen>.vorteile--im-raster+.vorteile--im-raster{margin-top:clamp(32px,4vw,56px)}
.haken{display:inline-flex;align-items:center;justify-content:center;gap:4px;width:36px;height:36px;border:3px solid var(--schwarz);flex:none;background:var(--weiss)}
.haken i{width:5px;height:18px;background:var(--lila);transform:skewX(-20deg)}
.offene-fragen li{padding:16px 0;border-bottom:2px solid var(--linie-hell);font:800 clamp(18px,1.7vw,23px)/1.2 var(--font-display);text-transform:uppercase}

/* ---------- 5 · Start (Lila) ---------- */
.start{padding:clamp(72px,8vw,120px) 0}
.start-raster{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px clamp(40px,6vw,104px);align-items:center}
.start-liste{margin-top:32px;display:grid;gap:12px}
.start-liste li{display:flex;gap:14px;align-items:center;font-size:19px}
.start-liste li::before{content:"";width:6px;height:18px;background:var(--weiss);transform:skewX(-20deg);flex:none}
.video-flaeche{background:var(--schwarz);color:var(--weiss);display:flex;align-items:center;justify-content:center}
.video-flaeche video{width:100%;height:100%;object-fit:cover}
.play{width:88px;height:88px;background:var(--gruen);color:var(--schwarz);display:flex;align-items:center;justify-content:center}
.play svg{width:40px;height:40px}
.video-info{position:absolute;left:20px;right:20px;bottom:18px;color:var(--text-dunkel-leise);font-size:15px}
.video-info .platz-marke{background:var(--gruen);color:var(--schwarz)}
.video-info p{margin-top:8px;max-width:36em}
.video figcaption{margin-top:14px;font:800 13px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase}

/* ---------- 6 · Stimmen ---------- */
.logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:clamp(32px,4vw,48px)}
.logos li{aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;padding:12px}
.logos img{max-height:100%;width:auto;filter:grayscale(1)}
.zitat{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 40px;align-items:center;margin-top:clamp(56px,6vw,88px);max-width:980px}
.zitat .ufoto-rahmen{grid-row:1 / span 2}
.zitat blockquote p{font:500 clamp(22px,2.1vw,30px)/1.35 var(--font-sans);max-width:30em}
.zitat figcaption{font-size:15px}

/* ---------- 7 · Fragen ---------- */
.fragen-raster{display:grid;grid-template-columns:minmax(min-content,4fr) minmax(0,7fr);gap:40px clamp(40px,6vw,104px);align-items:start}
.fragen-kopf>*+*{margin-top:24px}
.fragen-liste{border-top:3px solid currentColor}
.frage{border-bottom:2px solid #c9ccd0}
.band--schwarz .frage{border-bottom-color:var(--linie-dunkel)}
.frage summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font:800 clamp(17px,1.6vw,21px)/1.25 var(--font-display);text-transform:uppercase}
.frage summary::-webkit-details-marker{display:none}
.frage summary:focus-visible{outline-offset:6px}
.plus{position:relative;width:22px;height:22px;flex:none}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:3px;background:currentColor;translate:-50% -50%;transition:rotate .25s cubic-bezier(.16,1,.3,1)}
.plus::after{rotate:90deg}
.frage[open] .plus::after{rotate:0deg}
.antwort{margin:0 0 24px;max-width:42em}
.antwort p+p,.antwort p+ul,.antwort ul+p{margin-top:.8em}
.antwort ul{display:grid;gap:6px;margin-top:.6em}
.antwort ul li{display:flex;gap:12px;align-items:baseline}
.antwort ul li::before{content:"";flex:none;width:5px;height:14px;background:var(--lila);transform:skewX(-20deg);translate:0 1px}
.antwort a{font-weight:500}
.band--weiss .antwort a{color:var(--lila)}

/* ---------- Registrierung ---------- */
.registrieren-kopf{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:24px clamp(40px,6vw,104px);align-items:end}
.einstiege{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px clamp(32px,5vw,80px);margin-top:clamp(40px,5vw,64px)}
.einstieg{border-top:3px solid currentColor;padding-top:24px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.einstieg h3{font-size:clamp(20px,2vw,28px);line-height:1.1}
.einstieg p{max-width:30em;flex:1}
.einstieg .knopf{margin-top:8px}

/* ---------- Aufruf ---------- */
.aufruf{padding:clamp(72px,8vw,120px) 0}
.aufruf-raster{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:32px clamp(40px,6vw,104px);align-items:end}
.aufruf .titel-band{font-size:clamp(34px,4.6vw,68px)}
.aufruf .aktionen{margin-top:24px}

/* ---------- Kontakt (schwarz, Formular) ---------- */
.kontakt-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px clamp(40px,7vw,120px);align-items:start}
.kontakt .titel-band{font-size:clamp(38px,5vw,76px);line-height:.98}
.kontakt-text>*+*{margin-top:28px}
.kontakt-text .einleitung{color:var(--text-dunkel-leise)}
.kontakt-text .frame{margin-top:32px}
.kontakt-text a{color:var(--gruen);font-weight:500}
.kontakt-text .frame h2,.kontakt-text .frame h3{font-size:13px;letter-spacing:.08em;margin-bottom:12px}
.formular form>h2,.formular form>h3{display:none}
.kontakt-text p{color:var(--text-dunkel-leise)}
.kontakt-text .mail{font:800 clamp(18px,1.8vw,24px)/1.6 var(--font-display);text-decoration-color:var(--gruen)}

/* Formular (EXT:form) */
.formular{border-top:3px solid var(--gruen);padding-top:32px}
.formular form{display:grid;gap:22px}
.formular .form-group,.formular .form-element,.formular fieldset{display:grid;gap:8px;border:0;margin:0;padding:0;min-width:0}
.formular label,.formular legend{font:800 13px/1.3 var(--font-display);letter-spacing:.08em;text-transform:uppercase;padding:0}
.formular .pflicht,.formular .required{color:var(--gruen);margin-left:4px}
.formular input[type="text"],.formular input[type="email"],.formular input[type="tel"],.formular textarea{width:100%;min-height:52px;padding:12px 16px;background:#2c2c2a;border:2px solid #2c2c2a;border-radius:0;color:var(--weiss);font:400 17px/1.4 var(--font-sans);outline:0;transition:border-color .15s,background-color .15s}
.formular textarea{resize:vertical;min-height:140px}
.formular input:focus,.formular textarea:focus{border-color:var(--gruen);background:var(--schwarz)}
.formular .is-invalid input,.formular input.is-invalid,.formular textarea.is-invalid{border-color:#ff7a73}
.formular .invalid-feedback,.formular [role="alert"]{display:flex;gap:10px;align-items:baseline;color:#ff9a94;font-size:15px}
.formular .invalid-feedback::before{content:"Fehler:";flex:none;padding-left:24px;min-height:18px;display:inline-flex;align-items:center;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9a94' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M12 3 2 21h20z'/%3E%3Cpath d='M12 10v5M12 18v.5'/%3E%3C/svg%3E") no-repeat left center/18px;font:800 11px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase}
.formular .form-text{font-size:14px;color:#b3b3ad}
/* Radios: Kreis mit einem Strich, wenn gewählt */
.formular [role="radiogroup"]{display:flex;flex-wrap:wrap;gap:8px 28px}
.formular [role="radiogroup"] label{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:32px;font:400 16px/1.3 var(--font-sans);letter-spacing:0;text-transform:none}
.formular input[type="radio"]{appearance:none;-webkit-appearance:none;margin:0;width:24px;height:24px;border:2px solid var(--weiss);border-radius:50%;flex:none;display:grid;place-items:center;cursor:pointer}
.formular input[type="radio"]:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.2 4h3.6l-2 12H7.2z' fill='%23b6e700'/%3E%3C/svg%3E") no-repeat center/18px}
.formular input[type="radio"]:focus-visible{outline:3px solid var(--gruen);outline-offset:3px}
/* Einwilligung: Kasten mit zwei Ü-Strichen */
.formular .einwilligung{display:flex;gap:14px;align-items:flex-start;cursor:pointer;font:400 16px/1.45 var(--font-sans)!important;letter-spacing:0!important;text-transform:none!important}
.formular .einwilligung input{position:absolute;opacity:0;width:1px;height:1px}
.formular .einwilligung a{color:var(--gruen)}
.kasten{width:28px;height:28px;border:2px solid var(--weiss);display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:none}
.kasten i{width:4px;height:14px;background:var(--gruen);transform:skewX(-20deg);visibility:hidden}
input:checked+.kasten i{visibility:visible}
input:focus-visible+.kasten{outline:3px solid var(--gruen);outline-offset:3px}
.formular .actions,.formular .form-navigation{margin:0}
.formular button[type="submit"],.formular .btn-primary{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:0 28px;border:2px solid var(--gruen);border-radius:0;background:var(--gruen);color:var(--schwarz);font:800 14px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background-color .18s,border-color .18s}
.formular button[type="submit"]:hover{background:var(--weiss);border-color:var(--weiss)}
.formular>.frame>p,.formular .frame-type-form_formframework>p{padding:16px 18px;border:2px solid var(--gruen)}

/* ---------- Core-Inhalte (Text, Tabelle, Bild) in Spalte 0 ---------- */
.inhalt{padding:clamp(48px,6vw,88px) 0}
.inhalt+.inhalt{padding-top:0}
.inhalt .frame{max-width:46em}
.inhalt .frame,.text{overflow-wrap:break-word}
.inhalt--narrow .frame,.inhalt .frame-narrow{max-width:46em}
.inhalt h2{font-size:clamp(26px,2.6vw,38px);line-height:1.05;margin:0 0 20px}
.inhalt h3{font-size:clamp(18px,1.6vw,22px);line-height:1.2;margin:32px 0 10px}
.inhalt .frame p+p,.inhalt .frame p+ul,.inhalt .frame ul+p,.inhalt .frame ol+p,.inhalt .frame p+ol{margin-top:1em}
/* Überschriften im Fließtext: Abstand nach oben, wenn Text davor steht */
:is(.inhalt .frame,.text,.antwort,.einleitung) :is(p,ul,ol,table,blockquote,figure)+h2{margin-top:clamp(40px,4vw,56px)}
:is(.inhalt .frame,.text,.antwort,.einleitung) :is(p,ul,ol,table,blockquote,figure)+:is(h3,h4){margin-top:32px}
:is(.text,.antwort,.einleitung) :is(h2,h3,h4){margin-bottom:10px}
:is(.text,.antwort,.einleitung) h2{font-size:clamp(22px,2vw,28px);line-height:1.1}
:is(.text,.antwort,.einleitung) :is(h3,h4){font-size:clamp(17px,1.5vw,20px);line-height:1.2}
.inhalt ul,.inhalt ol{display:grid;gap:8px}
.inhalt ul li{display:flex;gap:12px;align-items:baseline}
.inhalt ul li::before{content:"";flex:none;width:5px;height:15px;background:var(--lila);transform:skewX(-20deg);translate:0 2px}
.inhalt ol{list-style:decimal;padding-left:1.4em}
.inhalt a{color:var(--lila);font-weight:500}
.inhalt .einleitung{margin-bottom:8px}
.inhalt .klein{font-size:15px;color:var(--text-leise)}
.inhalt table,.contenttable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin:8px 0}
.inhalt th,.inhalt td{text-align:left;padding:14px 16px 14px 0;border-bottom:2px solid var(--linie-hell);vertical-align:top}
.inhalt thead th{font:800 13px/1.2 var(--font-display);letter-spacing:.08em;text-transform:uppercase;border-bottom:3px solid var(--schwarz)}
.inhalt caption{caption-side:bottom;text-align:left;padding-top:12px;font-size:15px;color:var(--text-leise)}
.inhalt .ce-table-wrap,.inhalt .frame-type-table{overflow-x:auto}

/* ---------- Fuß ---------- */
.fuss{background:var(--schwarz);color:var(--text-dunkel-leise);padding:64px 0 40px;border-top:2px solid #3a3a37;font-size:15px}
.fuss-raster{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px 48px;align-items:start}
.fuss img{height:48px;width:auto}
.fuss-marke p{margin-top:20px;max-width:24em}
.fuss-titel{font:800 13px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--weiss);margin-bottom:16px}
.fuss-spalte ul{display:grid;gap:10px}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--gruen);text-decoration:underline}
.fuss address a{color:var(--gruen)}
.fuss-unten{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;padding-top:28px;border-top:2px solid #3a3a37}
.fuss-links{display:flex;flex-wrap:wrap;gap:12px 24px}
.fuss-links a{color:var(--gruen)}


/* ---------- Responsiv ---------- */
.termine .text{margin-top:20px;max-width:46em}
.termin-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(40px,6vw,104px);padding-top:clamp(32px,4vw,48px)}
.termin{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:2px solid var(--linie-hell)}
.termin[hidden]{display:none}
.termin.ist-gewaehlt{border-bottom-color:var(--lila)}
.termin-datum{display:block;font:800 clamp(17px,1.4vw,20px)/1.2 var(--font-display);text-transform:uppercase}
.termin-zeit{display:block;margin-top:4px;font-size:15px}
.termin .knopf{flex:none}
.termin-leer{margin-top:32px}
#anmeldung{scroll-margin-top:var(--kopf)}
@media (max-width:1180px){
  .kopf-in{gap:20px}
  .menue{position:fixed;inset:var(--kopf) 0 auto 0;max-height:calc(100dvh - var(--kopf));overflow:auto;background:var(--weiss);border-bottom:2px solid var(--schwarz);padding:8px var(--rand) 28px;display:none}
  .menue.ist-offen{display:block}
  .menue ul{flex-direction:column;gap:0}
  .menue a{display:block;padding:18px 0;font-size:15px;border-bottom:2px solid var(--linie-hell)}
  .menue a[aria-current]{border-bottom-color:var(--lila)}
  .kopf-aktionen{margin-left:auto}
  .burger{display:inline-flex}
}
@media (max-width:1100px){
  h1,h2,h3,h4{hyphens:auto}
  .rechnung-raster,.weg-raster,.kontakt-raster,.fragen-raster,.start-raster,.intro-raster,.registrieren-kopf,.aufruf-raster{grid-template-columns:minmax(0,1fr)}
  .weg-kopf{position:static}
  .ansichten{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
  .fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .termin-liste{grid-template-columns:minmax(0,1fr)}
  body{font-size:17px}
  :root{--kopf:68px}
  .marke img{height:40px}
  .kopf-aktionen .knopf{min-height:40px;padding:0 14px;font-size:12px}
  .rechnung{padding-top:40px}
  .rechnung h1{font-size:clamp(32px,9vw,44px)}
  .intro .titel-band{font-size:clamp(32px,9vw,44px)}
  .satz{font-size:19px}
  .aktionen .knopf{flex:1 1 100%}
  .strichfeld{height:200px;margin-top:40px}
  .ansichten{grid-template-columns:minmax(0,1fr)}
  .handy{margin:0 auto}
  .ansicht--handy figcaption{text-align:center}
  .reiter{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:0}
  .reiter-knopf{padding:14px 0;border-bottom:2px solid #b9bcc0;margin:0}
  .reiter-knopf[aria-selected="true"]{border-bottom:3px solid var(--schwarz)}
  .reiter-feld{grid-template-columns:minmax(0,1fr)}
  .ufoto-rahmen{max-width:220px}
  .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .zitat{grid-template-columns:72px minmax(0,1fr);gap:8px 20px}
  .zitat .ufoto-rahmen{grid-row:auto}
  .zitat figcaption{grid-column:1 / -1}
  .fuss-raster{grid-template-columns:minmax(0,1fr)}
  .inhalt th,.inhalt td{padding-right:10px}
  .video-info p{display:none}
}

/* ---------- Bewegung und Barrierefreiheit ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media (prefers-contrast:more){
  .weg-zahl,.kontakt-text .einleitung,.kontakt-text p,.fuss,.formular .form-text{color:inherit}
  .platz{border-color:currentColor}
}
@media (prefers-reduced-transparency:reduce){
  .platz{background:none!important}
}
@media print{
  .kopf,.fuss,.strichfeld,.burger{display:none!important}
  .band{padding:24px 0;background:none!important;color:#000!important}
}