:root{
  --weiss:#fff; --sand:#ffe9b3; --gold:#f7ac06; --linie:#dce6e8;
  --petrol:#078298; --petrol-hell:#0aa3bd; --petrol-mid:#296c7a; --petrol-dunkel:#00575b;
  --tinte:#040922; --weich:#4a5560; --flaeche:#f2f7f8;
  --titel:"Saira Condensed","Arial Narrow",sans-serif;
  --text:"Saira","Helvetica Neue",Arial,sans-serif;
  --breite:1180px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--tinte);font-family:var(--text);
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:var(--titel);font-weight:400;margin:0;line-height:1.2;text-wrap:balance}
h1{font-size:clamp(38px,5.2vw,56px)}
h2{font-size:clamp(29px,3.9vw,42px)}
h3{font-size:clamp(24px,3vw,37px)}
h4{font-size:24px}
p{margin:0 0 1em;max-width:62ch}
a{color:var(--petrol)}
section{padding:clamp(58px,7vw,96px) 0;position:relative}
.dunkel{background:var(--petrol-dunkel);color:#fff}
.dunkel h1,.dunkel h2,.dunkel h3,.dunkel h4{color:#fff}
.dunkel p{color:#cfe3e6}
.getoent{background:var(--flaeche)}
.eyebrow{font-family:var(--titel);font-size:14px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--petrol);margin:0 0 16px;display:block}
.dunkel .eyebrow{color:var(--sand)}
.lead{font-size:clamp(19px,2.2vw,24px);line-height:1.45;max-width:38ch}
.klein{font-size:15px;color:var(--weich);max-width:70ch}
.dunkel .klein{color:#a9c6ca}
.btn{display:inline-block;background:var(--petrol);color:#fff;text-decoration:none;
  font-family:var(--titel);font-weight:400;font-size:20px;letter-spacing:.3px;padding:18px 40px;
  border-radius:40px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(7,130,152,.95)}
.btn--hell{background:var(--sand);color:var(--tinte)}
.btn--rand{background:transparent;color:var(--petrol);box-shadow:inset 0 0 0 2px var(--petrol)}
.btn--rand:hover{background:var(--petrol);color:#fff}
.btn--klein{font-size:17px;padding:12px 28px}

/* Kopf */
.kopf{position:fixed;top:0;left:0;right:0;z-index:60;transition:all .35s var(--ease);border-bottom:1px solid transparent}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:20px;padding-bottom:20px;transition:padding .35s var(--ease)}
.kopf img{height:44px;display:block;transition:all .35s var(--ease)}
.kopf nav{display:flex;gap:26px;align-items:center}
.kopf nav a{color:#fff;text-decoration:none;font-family:var(--titel);font-size:18px;opacity:.9}
.kopf nav a:hover{opacity:1;text-decoration:underline}
.kopf.fest{background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom-color:var(--linie)}
.kopf.fest .wrap{padding-top:11px;padding-bottom:11px}
.kopf.fest img{height:36px;filter:none}
.kopf.fest nav a{color:var(--tinte)}
@media(max-width:820px){.kopf nav{display:none}}

/* Held */
.held{min-height:min(88vh,780px);display:flex;align-items:center;padding-top:150px;padding-bottom:130px;overflow:hidden}
.held__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.held__bg img{width:100%;height:100%;object-fit:cover}
.held__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(152deg,rgba(4,8,32,.4) 0%,rgba(4,8,32,.4) 70%)}
.held__form{position:absolute;inset:0;z-index:1;background:url("held-form.svg") center/cover no-repeat;transform:rotate(180deg);pointer-events:none}
.held .wrap{position:relative;z-index:2}
.kurve{position:absolute;left:0;right:0;bottom:-1px;z-index:3;line-height:0}
.kurve svg{width:100%;height:clamp(46px,6vw,96px);display:block}

/* Raster */
.raster{display:grid;gap:24px}
.r2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:52px;align-items:center}
.r3{grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.r4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* Karte */
.karte{background:#fff;border:1px solid var(--linie);border-radius:6px;padding:30px 28px 32px;
  position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.karte::before{content:"";position:absolute;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--petrol),var(--petrol-hell));transition:width .45s var(--ease)}
.karte:hover{transform:translateY(-6px);box-shadow:0 22px 44px -30px rgba(4,9,34,.5)}
.karte:hover::before{width:100%}
.nummer{font-family:var(--titel);font-size:40px;line-height:1;color:var(--petrol);display:block;margin-bottom:6px}
.bild{position:relative;border-radius:6px;overflow:hidden}
.bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.bild:hover img{transform:scale(1.04)}
.haken{list-style:none;margin:0;padding:0;display:grid;gap:13px;max-width:62ch}
.haken li{position:relative;padding-left:34px}
.haken li::before{content:"";position:absolute;left:2px;top:.45em;width:16px;height:8px;border-left:2.5px solid var(--petrol);border-bottom:2.5px solid var(--petrol);transform:rotate(-45deg)}
.dunkel .haken li::before{border-color:var(--sand)}

/* Einblenden */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.sicht{opacity:1;transform:none}
.reveal[data-v="1"]{transition-delay:.08s}.reveal[data-v="2"]{transition-delay:.16s}
.reveal[data-v="3"]{transition-delay:.24s}.reveal[data-v="4"]{transition-delay:.32s}

footer{background:var(--tinte);color:#9aa3ad;padding:44px 0;font-size:15px}
footer a{color:#cfd6dd;text-decoration:none;margin-right:20px}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}

/* Entwurfs-Fahne */
.fahne{position:fixed;left:0;bottom:0;z-index:200;background:var(--gold);color:#1a1200;
  font-family:var(--titel);font-size:15px;letter-spacing:.06em;padding:9px 18px;border-radius:0 6px 0 0;text-decoration:none}
.fahne:hover{background:#ffc23d}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}html{scroll-behavior:auto}}

/* ---------- Ergaenzungen Neubau 2026-08-27 ---------- */

/* Logo wechselt mit dem Kopf, statt per Farbfilter */
.kopf .logo-farbig{display:none}
.kopf.fest .logo-weiss{display:none}
.kopf.fest .logo-farbig{display:block}

/* Heller Button auf dunkler Flaeche, bleibt in der Petrolfamilie */
.btn--weiss{background:#fff;color:var(--petrol)}
.btn--weiss:hover{box-shadow:0 14px 30px -16px rgba(0,0,0,.6)}

/* Mobiles Menue, ohne Javascript */
.menue-schalter{display:none}
.menue-knopf{display:none;cursor:pointer;padding:8px;margin:-8px}
.menue-knopf span,.menue-knopf span::before,.menue-knopf span::after{
  content:"";display:block;width:26px;height:2px;background:#fff;transition:all .3s var(--ease)}
.menue-knopf span::before{transform:translateY(-8px)}
.menue-knopf span::after{transform:translateY(6px)}
.kopf.fest .menue-knopf span,.kopf.fest .menue-knopf span::before,.kopf.fest .menue-knopf span::after{background:var(--tinte)}
@media(max-width:820px){
  .menue-knopf{display:block}
  .kopf nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:0;background:#fff;border-top:1px solid var(--linie);
    box-shadow:0 24px 40px -30px rgba(4,9,34,.6);padding:8px 24px 20px}
  .menue-schalter:checked ~ nav{display:flex}
  .kopf nav a{color:var(--tinte);width:100%;padding:14px 0;border-bottom:1px solid var(--linie);font-size:20px}
  .kopf nav a.btn{border-bottom:0;width:auto;margin-top:16px;color:#fff;padding:12px 28px}
}

/* Die drei Tueren unter dem Held */
.tueren{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;
  margin-top:-90px;position:relative;z-index:5}
.tuer{background:#fff;border-radius:8px;padding:38px 32px 34px;border:1px solid var(--linie);
  box-shadow:0 30px 60px -40px rgba(4,9,34,.45);display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.tuer:hover{transform:translateY(-8px);box-shadow:0 40px 70px -40px rgba(4,9,34,.55)}
.tuer h3{margin-bottom:10px;font-size:clamp(24px,2.6vw,30px)}
.tuer .haken{margin:18px 0 26px;flex:1;font-size:16px}
.tuer .marke{font-family:var(--titel);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--petrol);display:block;margin-bottom:6px}
@media(max-width:700px){.tueren{margin-top:-60px}}

/* Zahlenband */
.zahlen3{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px;text-align:center}
.zahlen3 b{font-family:var(--titel);font-size:52px;line-height:1;color:var(--petrol);display:block}
.zahlen3 span{font-size:15px;color:var(--weich);display:block;max-width:24ch;margin:6px auto 0}

/* Belegtafel fuer Zulassung und Registriernummern */
.belege{border:1px solid var(--linie);border-radius:6px;background:#fff;margin-top:32px}
.beleg{display:flex;flex-wrap:wrap;gap:6px 28px;justify-content:space-between;
  padding:18px 26px;border-bottom:1px solid var(--linie)}
.beleg:last-child{border-bottom:0}
.beleg dt{margin:0;font-family:var(--titel);font-size:19px}
.beleg dd{margin:0;font-size:16px;color:var(--weich);font-variant-numeric:tabular-nums}

/* Der Text steht links im Held, dort braucht das Bild etwas mehr Tiefe */
.held__bg::after{background:
  linear-gradient(152deg,rgba(4,8,32,.4) 0%,rgba(4,8,32,.4) 70%),
  linear-gradient(90deg,rgba(4,8,32,.62) 0%,rgba(4,8,32,.46) 34%,rgba(4,8,32,.18) 64%,rgba(4,8,32,0) 88%)}

/* ---------- Überarbeitung nach Durchsicht, 27.08.2026 ---------- */

/* Überschriften waren zu dünn. Saira Condensed liegt in 100 bis 900 vor,
   die Stärke hängt an einer Stellschraube und lässt sich in einer Zeile ändern. */
:root{--titel-staerke:600}
h1,h2,h3,h4,.nummer,.zahlen3 b{font-weight:var(--titel-staerke)}
h1{letter-spacing:-.005em;line-height:1.12}
h2{line-height:1.15}
.btn{font-weight:500}
.eyebrow{font-weight:600}
.tuer .marke{font-weight:600}

/* Held: der Text steht ganz links, weg vom Bildmotiv, auf der Petrolform */
.held .wrap{width:100%;max-width:var(--breite);margin:0 auto;padding:0 24px}
.held .lead{max-width:34ch}

/* Kein Sandgelb mehr in der Schrift, das war schwer zu lesen */
.dunkel .eyebrow{color:rgba(255,255,255,.82)}
.dunkel p{color:#e2eff1}
.dunkel .klein{color:#bcd6d9}
.dunkel .haken li::before{border-color:#fff}

/* Kontaktknopf im Kopf: weiß mit Petrolrand, beim Überfahren dunkles Petrol */
.btn--kontakt{background:#fff;color:var(--petrol);box-shadow:inset 0 0 0 2px var(--petrol)}
.btn--kontakt:hover{background:var(--petrol-dunkel);color:#fff;box-shadow:inset 0 0 0 2px var(--petrol-dunkel)}

/* Etwas mehr Größe, wo bisher zu klein gesetzt war */
.tuer .haken{font-size:17px}
.klein{font-size:16px}
.beleg dd{font-size:17px}

/* Der Kontaktknopf steht in der Navigation und braucht mehr Gewicht als deren Regel */
.kopf nav a.btn--kontakt{color:var(--petrol)}
.kopf nav a.btn--kontakt:hover{color:#fff;text-decoration:none}

/* Links in der Kleinschrift auf dunklem Grund */
.dunkel .klein a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- Dritte Durchsicht, 27.08.2026 ---------- */

/* Das Palettendunkel #00575b wirkt auf der Fläche zu hell. Eine Stufe tiefer,
   gleicher Farbton, nur geringere Helligkeit. */
:root{--petrol-tief:#003f44}
.dunkel{background:var(--petrol-tief)}

/* Das Logo behält seine Höhe, auch wenn der Kopf beim Scrollen schmaler wird */
.kopf img{height:44px;width:auto}
.kopf.fest img{height:44px}

/* ---------- Knöpfe, vierte Durchsicht 27.08.2026 ---------- */

/* Kleiner und weniger wuchtig als bisher, die Pillenform bleibt */
.btn{position:relative;z-index:0;overflow:hidden;font-size:18px;padding:13px 30px}
.btn--klein{font-size:16px;padding:9px 22px}

/* Glanzstreifen, der beim Überfahren durchläuft. Vorbild ist tkohns.de,
   dort gemessen: Breite 50 Prozent, um 20 Grad geneigt, Laufzeit 1,4 Sekunden. */
.btn::before{content:"";position:absolute;z-index:-1;top:0;left:-75%;width:50%;height:100%;
  pointer-events:none;transform:skew(-20deg);
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.25) 45%,rgba(255,255,255,.45),rgba(255,255,255,.25) 55%,transparent);
  transition:left 1.4s var(--ease)}
.btn:hover::before{left:125%}

/* Der weiße Knopf bleibt beim Überfahren weiß, dort schimmert es dunkel statt hell */
.btn--weiss::before{background:linear-gradient(120deg,transparent,rgba(4,9,34,.05) 45%,rgba(4,9,34,.11),rgba(4,9,34,.05) 55%,transparent)}

/* Die dunklen Flächen tragen jetzt dasselbe Petrol wie die Form im Held,
   gemessen aus held-form.svg: rgba(41,108,122) entspricht #296c7a, Petrol mittel.
   Weiße Schrift darauf erreicht ein Kontrastverhältnis von rund 6 zu 1. */
.dunkel{background:var(--petrol-mid)}
.dunkel .klein{color:#dcecee}

/* Die Knöpfe erbten die Zeilenhöhe des Fließtextes und wurden dadurch hoch */
.btn{line-height:1.25}

/* ---------- Fünfte Durchsicht, 27.08.2026 ---------- */

/* Die Hauptzeile trägt mehr Gewicht und etwas mehr Größe */
h1{font-weight:700;font-size:clamp(40px,5.8vw,64px)}

/* Alle drei Karten beginnen ihre Hakenliste auf derselben Höhe.
   Der Einleitungssatz bekommt dafür die Höhe von zwei Zeilen, auch wenn er kürzer ist. */
.tuer p{min-height:3.4em}

/* Schmales Band als Aufforderung, eine Zeile, ohne Fläche */
.band{padding:0}
.band__inhalt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px 32px;padding-top:22px;padding-bottom:22px;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.band__inhalt p{margin:0;max-width:64ch;font-size:18px}

/* ---------- Unterseiten ---------- */

/* Held ohne Foto: Petrolfläche mit der Form, ruhiger als der Bildheld der Startseite */
.held--farbe{min-height:auto;padding-top:clamp(140px,16vw,180px);padding-bottom:clamp(72px,8vw,104px);
  background:var(--petrol-mid)}
.held--farbe .held__form{opacity:.55}

/* Nummerierte Schritte */
.schritt{display:flex;gap:20px;align-items:flex-start}
.schritt .nummer{font-size:32px;margin:0;flex:none;width:44px}
.schritt h4{margin-bottom:6px}
.schritt p{margin:0;font-size:16px;color:var(--weich)}

/* ---------- Kurskarte auf der Übersicht der Online-Kurse ---------- */
.kurs{border:1px solid var(--linie);border-radius:8px;overflow:hidden;background:#fff;
  display:grid;grid-template-columns:minmax(260px,.85fr) minmax(320px,1.15fr)}
.kurs__bild{position:relative;min-height:280px;background:var(--flaeche)}
.kurs__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kurs__text{padding:clamp(28px,3.4vw,42px)}
.kurs__preise{display:flex;flex-wrap:wrap;gap:10px 28px;margin:24px 0 0;padding:20px 0 0;
  border-top:1px solid var(--linie);list-style:none}
.kurs__preise li{font-size:16px;color:var(--weich)}
.kurs__preise b{font-family:var(--titel);font-weight:600;font-size:23px;color:var(--tinte);display:block;line-height:1.2}
.hinweis{display:inline-block;background:var(--sand);color:#5a4300;font-family:var(--titel);
  font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 14px;border-radius:40px;margin-bottom:16px}
@media(max-width:760px){.kurs{grid-template-columns:1fr}.kurs__bild{min-height:220px}}

/* Plakette in Grau, für Kurse ohne festen Starttermin */
.hinweis--grau{background:var(--flaeche);color:var(--weich);box-shadow:inset 0 0 0 1px var(--linie)}

/* Schlanke Kachel für angekündigte Kurse ohne Inhalt */
.bald{border:1px dashed #c3d2d6;border-radius:8px;background:transparent;padding:32px 30px;
  display:flex;flex-direction:column;justify-content:space-between;min-height:190px}
.bald h4{color:var(--weich);font-size:26px;margin-top:14px}

/* Motiv nach rechts rücken: Das Bild wird breiter als der Held gezogen und links
   angeschlagen, dadurch entsteht überhaupt erst ein Überschuss zum Verschieben.
   object-position allein wirkt nicht, wenn das Bild schmaler ist als die Fläche. */
.held__bg--rechts img{transform:scaleX(-1)}

/* ---------- Formular ---------- */
.formular{display:grid;gap:18px}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.feld{display:flex;flex-direction:column;gap:7px}
.feld label{font-family:var(--titel);font-weight:600;font-size:17px;letter-spacing:.01em}
.feld .pflicht{color:var(--petrol)}
.feld input,.feld textarea,.feld select{
  font-family:var(--text);font-size:17px;color:var(--tinte);background:#fff;
  border:1px solid var(--linie);border-radius:6px;padding:13px 15px;width:100%;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.feld textarea{min-height:150px;resize:vertical;line-height:1.6}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  outline:none;border-color:var(--petrol);box-shadow:0 0 0 3px rgba(7,130,152,.15)}
.wahl{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:2px}
.wahl label{display:flex;align-items:center;gap:9px;font-family:var(--text);font-weight:400;font-size:17px;cursor:pointer}
.wahl input{width:auto;accent-color:var(--petrol)}
.zustimmung{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.55}
.zustimmung input{width:auto;margin-top:5px;accent-color:var(--petrol);flex:none}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:620px){.feldpaar{grid-template-columns:1fr}}

/* Kontaktwege neben dem Formular */
.wege{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.wege dt{font-family:var(--titel);font-weight:600;font-size:17px;letter-spacing:.01em;margin-bottom:3px}
.wege dd{margin:0;font-size:18px}
.wege a{text-decoration:none;border-bottom:1px solid rgba(7,130,152,.35)}

/* Hinweis über dem Formular, wenn etwas nicht geklappt hat */
.meldung{margin:22px 0 0;padding:16px 20px;border-radius:6px;background:#fff4e0;
  border:1px solid #f0cd8a;color:#5a4300;font-size:16px;line-height:1.55;max-width:none}

/* ---------- Sechste Durchsicht, 27.08.2026 ---------- */

/* Ein button erbt die Browserdarstellung: Rahmen 2px outset schwarz, Zeiger default.
   Damit sah der Sendeknopf anders aus als jeder Verweis mit derselben Klasse. */
button.btn{border:0;appearance:none;-webkit-appearance:none;cursor:pointer;
  font-family:var(--titel);line-height:1.25;text-align:center}

/* Die Navigation setzt opacity .9 auf jeden Verweis. Beim Kontaktknopf schien
   dadurch der dunkle Held durch die weiße Fläche und ließ die dünne Schrift
   grünlicher wirken als den kompakten Rahmen, obwohl beide denselben Wert tragen. */
.kopf nav a.btn--kontakt{opacity:1}

/* Das Formular steht als eigene Kachel auf der Fläche */
.formularkachel{background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;
  padding:clamp(26px,3vw,38px);box-shadow:0 26px 50px -40px rgba(4,9,34,.4)}
.formularkachel .feld input,.formularkachel .feld textarea{background:#fff}
.formularkachel .meldung{margin-top:0}

/* Kontaktknopf im Kopf: mittleres Petrol, dünner Rahmen */
.btn--kontakt{color:var(--petrol-mid);box-shadow:inset 0 0 0 1px var(--petrol-mid)}
.btn--kontakt:hover{background:var(--petrol-mid);color:#fff;box-shadow:inset 0 0 0 1px var(--petrol-mid)}
.kopf nav a.btn--kontakt{color:var(--petrol-mid)}
.kopf nav a.btn--kontakt:hover{color:#fff}

/* Kurze Wegweiser weiter unten auf der Seite, damit niemand nach oben zurück muss */
.wegweiser{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px 36px;
  padding-top:34px;padding-bottom:34px;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.wegweiser > div{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.wegweiser h4{font-size:24px;margin:0;max-width:16ch}

/* Wegweiser mittig, mit der kleinen Vorzeile über der Überschrift */
.wegweiser > div{align-items:center;text-align:center;gap:12px}
.wegweiser h4{max-width:18ch;margin:0 auto}
.wegweiser .marke{margin:0}

/* Kacheln im Zweispalter auf gleiche Höhe. Das Raster r2 zentriert seine Spalten
   vertikal, was bei Textspalten richtig ist, bei Kacheln aber ungleiche Höhen ergibt. */
.raster--gleich{align-items:stretch}
.raster--gleich .tuer{height:100%}

/* ---------- Personen ---------- */
.person{display:grid;gap:18px}
.person .bild{aspect-ratio:3/2;border-radius:8px}
.person h4{font-size:26px;margin:0}
.person .rolle{font-family:var(--titel);font-weight:600;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--petrol);display:block;margin-bottom:4px}

/* ---------- Fragen und Antworten, ohne Javascript ---------- */
.frage{border-bottom:1px solid var(--linie)}
.frage summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--titel);font-weight:600;font-size:22px;line-height:1.3;color:var(--tinte)}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"";position:absolute;right:8px;top:31px;width:11px;height:11px;
  border-right:2px solid var(--petrol);border-bottom:2px solid var(--petrol);
  transform:rotate(45deg);transition:transform .25s var(--ease)}
.frage[open] summary::after{transform:rotate(-135deg);top:35px}
.frage summary:hover{color:var(--petrol)}
.frage .antwort{padding:0 44px 24px 0}
.frage .antwort p{margin:0 0 .8em}
.frage .antwort :last-child{margin-bottom:0}
.fragen{margin-top:26px;border-top:1px solid var(--linie)}

/* ---------- Verkaufsseite: Video, Preise, mitlaufender Aufruf ---------- */

/* Platzhalter für das Walkthrough-Video, bis es aufgenommen ist */
.videofeld{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  background:linear-gradient(150deg,var(--petrol-dunkel),var(--petrol-mid));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  color:#fff;text-align:center;padding:24px;box-shadow:0 34px 60px -40px rgba(4,9,34,.7)}
.videofeld__knopf{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.16);
  border:2px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center}
.videofeld__knopf::after{content:"";border-left:20px solid #fff;border-top:12px solid transparent;
  border-bottom:12px solid transparent;margin-left:6px}
.videofeld p{margin:0;max-width:32ch;color:#dbecee;font-size:16px}
.videofeld b{font-family:var(--titel);font-weight:600;font-size:22px;display:block}

/* Preiskarten */
.preis{display:flex;flex-direction:column}
.preis .zahl{font-family:var(--titel);font-weight:600;font-size:44px;line-height:1;color:var(--tinte);display:block;margin:6px 0 2px}
.preis .netto{font-size:15px;color:var(--weich);display:block;margin-bottom:20px}
.preis .haken{flex:1;font-size:16px;margin-bottom:24px}
.preis--top{box-shadow:0 0 0 2px var(--petrol);position:relative}
.preis--top::after{content:"Meistgewählt";position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--petrol);color:#fff;font-family:var(--titel);font-weight:600;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:40px;white-space:nowrap}

/* Knopf, der noch nicht führt */
.btn--wartet{background:var(--linie);color:var(--weich);cursor:default;pointer-events:none}
.btn--wartet::before{display:none}

/* Mitlaufender Aufruf am unteren Rand */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);border-top:1px solid var(--linie);
  box-shadow:0 -14px 34px -26px rgba(4,9,34,.5);transform:translateY(110%);
  transition:transform .35s var(--ease)}
.leiste.sicht{transform:none}
.leiste .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 26px;padding-top:13px;padding-bottom:13px}
.leiste__text{font-family:var(--titel);font-weight:600;font-size:19px;margin:0}
.leiste__text span{font-family:var(--text);font-weight:400;font-size:16px;color:var(--weich);display:block}
@media(max-width:560px){.leiste__text span{display:none}.leiste .wrap{justify-content:center}}

/* ---------- Kaufkarte auf der Landingpage ---------- */
.kaufkarte{background:#fff;border:1px solid var(--linie);border-radius:12px;
  padding:clamp(26px,3vw,38px);box-shadow:0 40px 70px -46px rgba(4,9,34,.55);color:var(--tinte)}
.kaufkarte h3{font-size:clamp(24px,2.6vw,30px);margin:12px 0 6px;color:var(--tinte)}
.kaufkarte .unterzeile{font-size:16px;color:var(--weich);margin:0 0 22px}
.kaufkarte .zahl{font-family:var(--titel);font-weight:600;font-size:clamp(38px,4.4vw,50px);
  line-height:1;display:block;margin-bottom:6px}
.kaufkarte .netto{font-size:15px;color:var(--weich);display:block;margin-bottom:18px}
.kaufkarte .erklaerung{font-size:16px;line-height:1.55;margin:0 0 22px;color:var(--tinte)}
.kaufkarte .btn{width:100%;text-align:center}
.kaufkarte .fussnote{font-size:14px;line-height:1.5;color:var(--weich);margin:16px 0 0}
.kaufkarte .fussnote a{color:var(--weich)}
.kaufkarte > input[type=radio]{position:absolute;opacity:0;pointer-events:none}

/* Umschalter zwischen den Paketen, ohne Javascript */
.paketwahl{display:flex;gap:4px;background:var(--flaeche);border-radius:40px;padding:4px;margin-bottom:24px}
.paketwahl label{flex:1;text-align:center;padding:11px 6px;border-radius:40px;cursor:pointer;
  font-family:var(--titel);font-weight:600;font-size:15px;color:var(--weich);
  transition:background .25s var(--ease),color .25s var(--ease)}
.paketwahl label:hover{color:var(--tinte)}
.paket{display:none}
#paket1:checked ~ .paketwahl label[for=paket1],
#paket2:checked ~ .paketwahl label[for=paket2],
#paket3:checked ~ .paketwahl label[for=paket3]{background:#fff;color:var(--petrol);box-shadow:0 2px 8px -3px rgba(4,9,34,.4)}
#paket1:checked ~ .paket--1,
#paket2:checked ~ .paket--2,
#paket3:checked ~ .paket--3{display:block}

/* Rückverweis zum Katalog */
.zurueck{display:inline-flex;align-items:center;gap:9px;font-family:var(--titel);font-weight:600;
  font-size:15px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  color:rgba(255,255,255,.82);margin-bottom:20px}
.zurueck::before{content:"";width:9px;height:9px;border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg)}
.zurueck:hover{color:#fff}

/* Landingpage: der Held beginnt höher, damit der Rückverweis dicht unter der
   Menüleiste sitzt, und trägt ein Foto im Hintergrund wie die Startseite. */
.held--landing{padding-top:clamp(96px,11vw,118px);padding-bottom:clamp(70px,8vw,104px);min-height:auto}
.held--landing .zurueck{margin-bottom:26px}
.held--landing .videofeld{margin-top:30px}

/* Die Karte schneidet Überstehendes ab, dadurch wurde die Plakette oben gekappt */
.preis--top{overflow:visible}

/* Held der Landingpage: linke Spalte und Kaufkarte enden auf gleicher Höhe */
.held--landing .raster{align-items:stretch}
.held--landing .kaufkarte{display:flex;flex-direction:column}
.held--landing .kaufkarte .fussnote{margin-top:auto;padding-top:16px}
.held--landing > .wrap > div:first-child{display:flex;flex-direction:column}
.held--landing .videofeld{margin-bottom:22px}
.held--landing .zurueck{margin:0;align-self:flex-start}

/* Merkmalsliste ohne Nummern */
.merkmale{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px 36px;list-style:none;margin:0;padding:0}
.merkmale li{position:relative;padding-left:32px}
.merkmale li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:8px;
  border-left:2.5px solid var(--petrol);border-bottom:2.5px solid var(--petrol);transform:rotate(-45deg)}
.merkmale h4{font-size:21px;margin:0 0 6px}
.merkmale p{margin:0;font-size:16px;color:var(--weich);max-width:30ch}

/* In der Flex-Karte darf sich die Plakette nicht über die volle Breite ziehen */
.kaufkarte .hinweis,.kaufkarte .btn{align-self:stretch}
.kaufkarte .hinweis{align-self:flex-start}

/* Nebenüberschrift auf die Größe einer Hauptzeile heben, ohne die Gliederung zu ändern */
.wie-h2{font-size:clamp(29px,3.9vw,42px);line-height:1.15}

/* ---------- Rechtstexte ---------- */
.rechtstext{max-width:74ch}
.rechtstext h2{font-size:clamp(25px,3vw,32px);margin:56px 0 14px;padding-top:26px;border-top:1px solid var(--linie)}
.rechtstext h2:first-child{margin-top:0;padding-top:0;border-top:0}
.rechtstext h3{font-size:22px;margin:34px 0 10px}
.rechtstext h4{font-size:19px;margin:26px 0 8px}
.rechtstext p{max-width:none;margin:0 0 1em}
.rechtstext ul,.rechtstext ol{margin:0 0 1.2em;padding-left:22px;display:grid;gap:8px}
.rechtstext li{padding-left:4px}
.rechtstext a{overflow-wrap:anywhere}
.rechtstext strong{font-weight:400;font-family:var(--titel);font-size:1.06em}

/* Stelle im Rechtstext, die noch bestätigt werden muss */
.pruefen{background:var(--sand);color:#5a4300;padding:1px 8px;border-radius:4px;font-size:.92em;white-space:nowrap}

/* ---------- Fußzeile ---------- */
footer{padding:clamp(52px,6vw,72px) 0 34px}
footer .wrap{display:block}
.fuss{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.fuss b{display:block;font-family:var(--titel);font-weight:600;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;margin-bottom:16px}
.fuss a{display:block;color:#b9c2cc;text-decoration:none;margin:0 0 11px;font-size:16px}
.fuss a:hover{color:#fff}
.fuss__marke .fuss__logo{height:56px;width:auto;display:block;margin-bottom:26px}
.fuss__claim{color:#b9c2cc;font-size:17px;max-width:24ch;margin:0 0 22px}
.fuss__siegel img{height:74px;width:auto;display:block}
.fuss__siegel small{display:block;margin-top:12px;font-size:13px;line-height:1.5;color:#8d97a2;max-width:30ch}
.fuss__zeile{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;align-items:center;
  margin-top:46px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:15px;color:#8d97a2}
.fuss__zeile a{color:#8d97a2;text-decoration:none;margin:0}
.fuss__zeile a:hover{color:#fff}
.fuss__zeile div{display:flex;flex-wrap:wrap;gap:10px 22px}
@media(max-width:860px){.fuss{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:520px){.fuss{grid-template-columns:1fr}}

/* ---------- Einwilligung ----------
   Eine schmale Kachel am unteren Rand, kein Vorhang. Der Seiteninhalt bleibt
   lesbar; nur wer entscheidet, räumt sie weg.

   Zur Gestalt der Knöpfe: Verlangt ist Gleichwertigkeit, nicht Gleichheit.
   Ablehnen und Annehmen haben dieselbe Größe, dieselbe Form, dieselbe Schrift
   und dieselbe Farbe, nur die Polarität ist getauscht.
   Was beanstandet wird, ist der blasse Textlink neben dem gefüllten Knopf, nicht
   ein Farbton Unterschied bei gleicher Gestalt. */
.ew{position:fixed;left:0;right:0;bottom:0;z-index:200;padding:12px;
  display:flex;justify-content:center;pointer-events:none;
  animation:ew-auf .28s var(--ease)}
@keyframes ew-auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ew{animation:none}}

/* Ein flaches Band über die volle Breite: der Satz links in einer Zeile, die
   beiden Entscheidungen rechts, die Nebenwege dicht unter dem Satz.
   Ein Gitter statt einer Zeile, damit die Knopfspalte senkrecht zwischen Ober-
   und Unterkante des Bandes steht und nicht nur mittig zum Satz — die Fußzeile
   darunter zöge die wahre Mitte sonst nach unten.
   Am 29.08.2026 auf Wunsch von Thomas von der Kachel in der Ecke hierher. */
.ew__kasten{pointer-events:auto;background:#fff;border-radius:14px;
  padding:12px 22px;width:100%;max-width:1120px;
  max-height:84vh;overflow-y:auto;
  box-shadow:0 16px 44px -18px rgba(4,9,34,.45),0 0 0 1.5px var(--petrol);
  display:grid;grid-template-columns:1fr auto;column-gap:22px;text-align:left;
  grid-template-areas:"satz knoepfe" "wahl knoepfe" "fuss knoepfe"}

/* Aufgeklappt laufen Ebene zwei und Fußzeile über die volle Breite, und die
   Knöpfe stehen wieder auf Höhe des Satzes. Über die ganze offene Höhe
   zentriert stünden sie weit weg von den Kästchen, über die sie entscheiden. */
.ew--offen .ew__kasten{grid-template-areas:"satz knoepfe" "wahl wahl" "fuss fuss"}

.ew__zeile{display:contents}
.ew__satz{grid-area:satz;margin:0;font-size:15px;line-height:1.45;color:var(--weich);max-width:none}

/* Feste Spaltenbreite, darin teilen sich die beiden Entscheidungsknöpfe den
   Platz zu genau gleichen Teilen. Das ist keine Kosmetik: gleiche Breite ist
   der sichtbarste Beleg dafür, dass Ablehnen und Annehmen gleichrangig sind
   (§ 25 TDDDG). Fest, damit sie beim Wechsel auf „Auswahl speichern" nicht
   springt. */
.ew__knoepfe{grid-area:knoepfe;align-self:center;display:flex;gap:8px;width:308px}
.ew__knoepfe .ew__btn{flex:1 1 0}
.ew__btn{font-family:var(--titel);font-weight:500;font-size:15px;letter-spacing:.3px;
  padding:7px 18px;line-height:1.2;border:0;border-radius:40px;cursor:pointer;white-space:nowrap;
  background:#fff;color:var(--petrol);box-shadow:inset 0 0 0 2px var(--petrol);
  transition:transform .2s var(--ease)}
.ew__btn:hover{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.ew__btn:hover{transform:none}}

/* Annehmen gefüllt, Ablehnen weiß mit kräftigem Rahmen. Das ist eine Rangfolge,
   und sie ist die riskanteste Stelle des Banners — auf Wunsch von Thomas am
   29.08.2026 so gesetzt. Was sie halten lässt: gleiche Breite, gleiche Höhe,
   gleiche Form, gleiche Schrift und derselbe Kontrastwert von 4,51 auf beiden
   Knöpfen, weil nur die Polarität getauscht ist. Kein blasser Textlink, kein
   Grau, kein kleinerer Knopf. Gehört ins Anwaltsgespräch. */
.ew__btn--satt{background:var(--petrol);color:#fff;box-shadow:none}

/* Ebene zwei, erst auf Klick */
.ew__wahl{grid-area:wahl;display:none;margin-top:13px;padding-top:13px;border-top:1px solid var(--linie);gap:8px}
.ew--offen .ew__wahl{display:grid;grid-template-columns:1fr 1fr}
.ew__klein{grid-column:1/-1}
.ew__wahl label{display:flex;gap:11px;align-items:flex-start;cursor:pointer;text-align:left;
  background:var(--flaeche);border-radius:10px;padding:10px 13px}
.ew__wahl input{margin:2px 0 0;width:17px;height:17px;flex:none;accent-color:var(--petrol);cursor:pointer}
.ew__wahl span{font-size:13px;line-height:1.5;color:var(--weich)}
.ew__wahl b{display:block;color:var(--tinte);font-family:var(--titel);font-weight:600;font-size:15px}
.ew__klein{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--weich);text-align:left}
.ew__klein a{color:var(--petrol)}

/* Die Nebenwege dicht unter dem Satz: Anpassen, Datenschutz, Impressum.
   „Anpassen" gehört hierher und nicht zu den Entscheidungen — es entscheidet
   nichts, es klappt nur auf. Kleiner gesetzt und eine Zeile tiefer kann es die
   Gleichrangigkeit der beiden echten Knöpfe auch nicht mehr stören. */
.ew__fuss{grid-area:fuss;margin-top:2px;display:flex;flex-wrap:wrap;
  gap:2px 14px;align-items:center;justify-content:flex-start;font-size:12.5px}
.ew__fuss a{color:var(--weich);text-decoration:underline}
.ew__fuss a:hover{color:var(--petrol)}
/* „Anpassen" ist ein Knopf, muss aber aussehen wie die Verweise daneben:
   font:inherit holt Schrift, Größe und Schnitt aus der Fußzeile, statt die
   Titelschrift des Knopfes mitzuschleppen. */
.ew__btn--ruhig{font:inherit;background:transparent;border:0;padding:0;cursor:pointer;
  color:var(--weich);text-decoration:underline}
.ew__btn--ruhig:hover{color:var(--petrol)}

@media(max-width:760px){
  /* Am Handy stapelt dasselbe Gitter einspaltig und alles steht mittig: Satz,
     Knöpfe, Ebene zwei, Nebenwege. Die Knöpfe bekommen schmalere Polsterung und
     dürfen umbrechen, sonst passen „Nur Notwendige" und „Auswahl speichern" bei
     320 Punkt nicht nebeneinander. Ausgenommen von der Zentrierung bleibt Ebene
     zwei: Kästchen mit mehrzeiligem Text daneben liest man am linken Rand
     entlang, mittig gesetzt bricht die Lesekante weg. */
  .ew{padding:0}
  .ew__kasten,.ew--offen .ew__kasten{max-width:none;padding:14px 16px;
    border-radius:14px 14px 0 0;text-align:center;
    grid-template-columns:1fr;grid-template-areas:"satz" "knoepfe" "wahl" "fuss"}
  .ew__knoepfe{width:auto;margin-top:12px}
  .ew__knoepfe .ew__btn{padding-left:8px;padding-right:8px;white-space:normal}
  .ew__fuss{justify-content:center;margin-top:8px}
  .ew--offen .ew__wahl{grid-template-columns:1fr}
}