/* Leona – Website (Neufassung 22.09.2026). Quelle: frontend/marketing-quelle, gebaut mit bauen.mjs.
   Leitgedanke: Die Seite zeigt das Produkt, nicht Illustrationen davon. Fragen stehen wie in der
   echten Antwortkarte in Georgia, Antworten in der Systemschrift. Keine Fremdschriften. */
:root{
  --wald:#1E493F; --wald-tief:#163A32; --wald-hell:#2A5C50; --moos:#B7CDC3; --moos-hell:#DCE8E2;
  --papier:#FAF9F6; --weiss:#FFFFFF; --salbei:#EDF0E8; --linie:#E1E4DC; --linie-stark:#C4CCBE;
  --tinte:#232923; --grau:#5E685F; --grau-hell:#8A948B;
  --koralle:#ED582C; --korallrot:#C33B14; --korallrot-tief:#A53010; --pfirsich:#F5DED1;
  --ja:#2F5A38; --ja-weich:#E0EBDF; --warn:#6B5310; --warn-weich:#F2E9CC;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --breite:1240px; --rand:max(20px,calc((100% - var(--breite))/2));
  color-scheme:light;
}
*{box-sizing:border-box}
/* [hidden] muss gewinnen: .formular{display:grid} u. a. würden es sonst überschreiben — ohne
   JavaScript stünde dann ein Formular da, das per GET mit Name und Telefon in der Adresse sendet. */
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--korallrot)}
a:hover{color:var(--korallrot-tief)}
:focus-visible{outline:3px solid var(--koralle);outline-offset:3px;border-radius:4px}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
.rand{padding-inline:var(--rand)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:50;background:#fff;color:var(--tinte);padding:8px 12px;border-radius:8px}

/* ── Kopf ─────────────────────────────────────────────────────────── */
.kopf{position:sticky;top:0;z-index:30;background:var(--wald);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.kopf-innen{display:flex;align-items:center;gap:28px;height:68px}
.marke{display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-weight:760;font-size:25px;letter-spacing:-.04em}
.marke:hover{color:#fff}
.marke .punkt{color:var(--koralle)}
.marke svg{width:30px;height:30px;flex:none}
.hauptnav{display:flex;gap:4px;margin-left:auto}
.hauptnav a{color:var(--moos-hell);text-decoration:none;font-size:15px;font-weight:550;padding:8px 12px;border-radius:8px}
.hauptnav a:hover,.hauptnav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.08)}
.kopf-aktionen{display:flex;gap:10px;align-items:center}
.kopf-aktionen .leise{color:#fff;text-decoration:none;font-size:15px;font-weight:550;padding:8px 10px}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:650;font-size:15.5px;text-decoration:none;border-radius:10px;padding:12px 20px;border:0;cursor:pointer;line-height:1.2}
.knopf-koralle{background:var(--koralle);color:#fff}
.knopf-koralle:hover{background:var(--korallrot);color:#fff}
.knopf-rot{background:var(--korallrot);color:#fff}
.knopf-rot:hover{background:var(--korallrot-tief);color:#fff}
.knopf-rahmen{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.knopf-rahmen:hover{color:inherit;background:rgba(127,127,127,.08)}
.menue-knopf{display:none;margin-left:auto;background:none;border:0;color:#fff;padding:8px;cursor:pointer}
/* Aufklapper „Lösungen“ und „Funktionen“ (23.09.2026). Link zur Übersicht + Pfeilknopf; die Tafel
   öffnet beim Überfahren, bei Tastaturfokus in der Gruppe und per Klick auf den Pfeil (.offen). */
.nav-gruppe{position:relative;display:flex;align-items:center}
.nav-gruppe > a{padding-right:4px !important}
.nav-auf{background:none;border:0;color:var(--moos-hell);padding:8px 8px 8px 2px;cursor:pointer;border-radius:8px;display:inline-flex}
.nav-auf:hover{color:#fff}
.nav-auf svg{transition:transform .15s}
.nav-gruppe.offen .nav-auf svg{transform:rotate(180deg)}
.nav-tafel{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:40;background:#fff;color:var(--tinte);border-radius:14px;box-shadow:0 24px 60px -20px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06);padding:14px}
.nav-tafel::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav-gruppe.offen .nav-tafel{display:block}
@media (hover:hover) and (min-width:1181px){.nav-gruppe:hover .nav-tafel{display:block}}
.nav-tafel-loesungen{width:380px}
.nav-tafel-funktionen{width:min(860px,calc(100vw - 48px));left:-180px}
.hauptnav .nav-tafel a{color:var(--tinte);background:none;padding:0;border-radius:6px}
.hauptnav .nav-tafel a:hover{color:var(--korallrot);background:none}
.nav-liste{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.nav-liste a{display:block;padding:9px 10px !important;border-radius:9px !important}
.nav-liste a:hover{background:var(--salbei) !important}
.nav-liste b{display:block;font-size:15px;color:var(--tinte)}
.nav-liste span{display:block;font-size:13px;color:var(--grau);font-weight:450}
.nav-bereiche{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 22px;padding:6px 8px}
.nav-bereich{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grau);margin-bottom:6px}
.nav-bereiche ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.nav-bereiche a{font-size:14.5px;font-weight:550}
.nav-alle{border-top:1px solid var(--linie);margin:12px -14px -14px;padding:11px 22px;background:#F7F7F3;border-radius:0 0 14px 14px;font-size:14px}
.hauptnav .nav-alle a{color:var(--korallrot);font-weight:650}
.hauptnav .nur-menue{display:none}
@media (max-width:1180px){
  .hauptnav,.kopf-aktionen .leise{display:none}
  .menue-knopf{display:inline-flex}
  .kopf-aktionen{margin-left:auto}
  .menue-knopf{margin-left:4px}
  .hauptnav.offen{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--wald);padding:8px var(--rand) 18px;border-bottom:1px solid rgba(255,255,255,.1);max-height:calc(100vh - 68px);overflow-y:auto}
  .hauptnav .nur-menue{display:block}
  .nav-gruppe{flex-wrap:wrap}
  .nav-gruppe > a{flex:1}
  .nav-tafel,.nav-tafel-funktionen,.nav-tafel-loesungen{position:static;width:100%;box-shadow:none;margin:4px 0 8px}
  .nav-bereiche{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){.nav-bereiche{grid-template-columns:1fr}}
@media (max-width:520px){.kopf-aktionen .knopf{padding:9px 12px;font-size:14px}.marke{font-size:22px}.kopf-innen{gap:12px}}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero{background:var(--wald);color:#fff;padding-block:56px 72px;overflow:hidden}
.hero-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
@media (max-width:1060px){.hero-raster{grid-template-columns:minmax(0,1fr);gap:40px}}
.hero h1{font-size:clamp(42px,5.4vw,74px);line-height:1.02;letter-spacing:-.035em;font-weight:760;max-width:12ch}
.hero .einleitung{margin-top:22px;font-size:19px;line-height:1.55;color:var(--moos-hell);max-width:46ch}
.hero-aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-aktionen .knopf-rahmen{color:#fff}
.hero-fuss{margin-top:22px;font-size:14px;color:var(--moos)}

/* Die Konsole: nachgebaute Kopfleiste und Antwortkarte des echten Produkts */
.konsole{border-radius:18px;background:var(--papier);color:var(--tinte);box-shadow:0 30px 80px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06);overflow:hidden}
.konsole-leiste{background:var(--wald-tief);display:flex;align-items:center;gap:12px;padding:12px 14px}
.konsole-ort{font-size:12.5px;color:#fff;background:rgba(255,255,255,.08);border-radius:8px;padding:7px 10px;white-space:nowrap;display:flex;gap:8px;align-items:center}
.konsole-ort small{font-size:10.5px;letter-spacing:.06em;color:var(--moos);border:1px solid rgba(255,255,255,.18);border-radius:5px;padding:1px 5px}
.konsole-feld{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border-radius:10px;padding:8px 8px 8px 12px;color:#fff;font-size:14.5px}
[data-feld]{flex:1;min-width:0;display:flex;align-items:center}
.konsole-feld .text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.konsole-feld .platzhalter{color:var(--moos)}
.konsole-feld .cursor{display:inline-block;width:1.5px;height:17px;background:#fff;vertical-align:-3px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.konsole-feld .fragen{background:var(--korallrot);color:#fff;font-weight:650;font-size:13px;border-radius:7px;padding:6px 11px}
@media (max-width:640px){.konsole-ort{display:none}}
.karte{padding:22px 24px 0;min-height:420px;display:flex;flex-direction:column}
@media (max-width:640px){.karte{padding:18px 16px 0;min-height:470px}}
.karte-kopf{display:flex;align-items:center;gap:10px}
.karte-kopf .signet{width:30px;height:30px;border-radius:8px;background:var(--koralle);display:grid;place-items:center;flex:none}
.karte-kopf b{display:block;font-size:14px;line-height:1.1}
.karte-kopf span{font-size:12.5px;color:var(--grau)}
.karte-frage{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.1vw,25px);line-height:1.3;margin:16px 0 14px;color:var(--tinte);min-height:1.3em}
.karte-frage .q{color:var(--koralle)}
.karte-antwort{flex:1;font-size:14.5px;line-height:1.55;color:var(--tinte)}
.karte-antwort .satz{font-size:16px;font-weight:600;margin-bottom:10px}
.karte-antwort .bezug{font-size:12.5px;color:var(--grau);margin:8px 0 6px}
.karte-antwort ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.karte-antwort li{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start}
.karte-antwort li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--grau-hell);margin-top:9px}
.karte-antwort li small{display:block;color:var(--grau);font-size:12.5px}
.karte-antwort .ki{font-size:15.5px;line-height:1.6}
.einblenden{animation:rein .35s ease both}
@keyframes rein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.karte-fuss{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;border-top:1px solid var(--linie);margin:18px -24px 0;padding:12px 24px;background:#F5F4EF;font-size:12.5px;color:var(--grau)}
@media (max-width:640px){.karte-fuss{margin-inline:-16px;padding-inline:16px}}
.karte-fuss .haken{color:var(--ja);font-weight:650}
.beleg{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--linie);border-radius:999px;padding:2px 9px;font-size:12px;color:var(--tinte)}
.beleg::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--koralle)}
.karte-fuss .zeit{margin-left:auto;font-family:var(--mono);font-size:11.5px}
.aktion-plakette{display:inline-block;background:var(--pfirsich);color:var(--korallrot);font-weight:650;font-size:12.5px;border-radius:7px;padding:3px 9px;margin-right:8px}
.aktion-titel{font-weight:650;font-size:15.5px}
.felder{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin-top:14px;font-size:14px}
.felder dt{color:var(--grau)}
.felder dd{margin:0;font-weight:550}
.felder dd.eingabe{border:1px solid var(--linie-stark);border-radius:8px;padding:5px 9px;background:#fff;font-weight:450}
.warnung{margin-top:12px;background:var(--warn-weich);color:var(--warn);border-radius:9px;padding:8px 11px;font-size:13px}
.aktion-knoepfe{display:flex;gap:8px;margin-top:14px}
.aktion-knoepfe span{font-size:13.5px;font-weight:650;border-radius:9px;padding:8px 16px}
.aktion-knoepfe .ja{background:var(--korallrot);color:#fff}
.aktion-knoepfe .nein{border:1px solid var(--linie-stark);color:var(--grau)}
.konsole-wahl{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.konsole-wahl button{font:inherit;font-size:13.5px;color:var(--moos-hell);background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 12px;cursor:pointer;text-align:left}
.konsole-wahl button:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.konsole-wahl button[aria-pressed="true"]{background:#fff;color:var(--wald);border-color:#fff}
.konsole-hinweis{margin-top:12px;font-size:13px;color:var(--moos)}

/* ── Abschnitte ──────────────────────────────────────────────────── */
.abschnitt{padding-block:96px}
.abschnitt.salbei{background:var(--salbei)}
.abschnitt.wald{background:var(--wald);color:#fff}
@media (max-width:720px){.abschnitt{padding-block:64px}}
.titel{font-size:clamp(32px,3.6vw,48px);line-height:1.08;letter-spacing:-.03em;font-weight:740;max-width:22ch}
.unter{margin-top:16px;font-size:19px;color:var(--grau);max-width:60ch}
.wald .unter{color:var(--moos-hell)}
.zitatfrage{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,34px);line-height:1.3;letter-spacing:-.005em}

/* Irrglaube */
.irrglaube{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start;margin-top:48px}
@media (max-width:980px){.irrglaube{grid-template-columns:minmax(0,1fr);gap:32px}}
.weg{list-style:none;margin:0;padding:0;counter-reset:station;display:grid;gap:0}
.weg li{counter-increment:station;display:grid;grid-template-columns:40px 1fr auto;gap:14px;align-items:start;padding:14px 0;border-bottom:1px dashed var(--linie-stark)}
.weg li::before{content:counter(station);width:32px;height:32px;border-radius:50%;border:1.5px solid var(--linie-stark);display:grid;place-items:center;font-size:14px;font-weight:650;color:var(--grau)}
.weg li b{display:block;font-size:16px}
.weg li span{font-size:14.5px;color:var(--grau)}
.weg li .min{font-family:var(--mono);font-size:13px;color:var(--grau);white-space:nowrap;padding-top:4px}
.weg-summe{display:flex;justify-content:space-between;gap:16px;padding-top:14px;font-weight:650}
.weg-gegen{margin-top:26px;border-radius:14px;background:var(--wald);color:#fff;padding:20px 22px}
.weg-gegen .zitatfrage{font-size:21px}
.weg-gegen p{margin-top:10px;color:var(--moos-hell);font-size:15px}
.weg-gegen .min{font-family:var(--mono);font-size:13px;color:#fff}

/* Zeitersparnis-Rechner */
.rechner{margin-top:40px;background:var(--weiss);border:1px solid var(--linie);border-radius:16px;overflow:hidden}
.rechner-tabelle{width:100%;border-collapse:collapse;font-size:15px}
.rechner-tabelle th,.rechner-tabelle td{padding:12px 16px;border-bottom:1px solid var(--linie);text-align:left;vertical-align:middle}
.rechner-tabelle thead th{font-size:13px;color:var(--grau);font-weight:600;background:#FBFBF8}
.rechner-tabelle td.zahl,.rechner-tabelle th.zahl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rechner-tabelle input{width:72px;font:inherit;font-variant-numeric:tabular-nums;text-align:right;border:1px solid var(--linie-stark);border-radius:7px;padding:5px 7px;background:var(--papier);color:var(--tinte)}
.rechner-tabelle td small{display:block;color:var(--grau);font-size:13px}
.rechner-scroll{overflow-x:auto}
.rechner-tabelle td{position:relative}
@media (max-width:700px){
  .rechner-tabelle thead{display:none}
  .rechner-tabelle,.rechner-tabelle tbody,.rechner-tabelle tr{display:block}
  .rechner-tabelle tr{padding:14px 16px;border-bottom:1px solid var(--linie)}
  .rechner-tabelle td{display:inline-block;border:0;padding:6px 14px 0 0;vertical-align:top}
  .rechner-tabelle td:first-child{display:block;padding:0}
  .rechner-tabelle td.zahl{text-align:left}
  .rechner-tabelle td.zahl::before{content:attr(data-label);display:block;font-size:12px;color:var(--grau);margin-bottom:3px}
  .rechner-tabelle td.zahl small{display:none}
  .rechner-tabelle td[data-erg]{font-weight:700;color:var(--ja)}
}
.rechner-summe{display:flex;flex-wrap:wrap;gap:12px 40px;align-items:baseline;padding:20px 18px;background:var(--wald);color:#fff}
.rechner-summe .gross{font-size:clamp(34px,4vw,52px);font-weight:760;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rechner-summe span{color:var(--moos-hell);font-size:15px}
.rechner-summe label{display:inline-flex;gap:8px;align-items:center;color:var(--moos-hell);font-size:14px}
.rechner-summe input{width:70px;font:inherit;text-align:right;border:0;border-radius:7px;padding:5px 7px}
.annahmen{margin-top:14px;font-size:14px;color:var(--grau);max-width:80ch}

/* Funktionsübersicht: nach Tageszeit bzw. Arbeitsort gegliedert */
.bereiche{display:grid;gap:48px;margin-top:48px}
.bereich{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;border-top:1px solid var(--linie-stark);padding-top:24px}
@media (max-width:860px){.bereich{grid-template-columns:minmax(0,1fr);gap:16px}}
.bereich h3{font-size:22px;letter-spacing:-.015em}
.bereich > div > p{margin-top:8px;color:var(--grau);font-size:15.5px}
.funktionsliste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px 28px}
.funktionsliste a{display:block;text-decoration:none;color:var(--tinte);padding:12px 0;border-bottom:1px solid var(--linie)}
.funktionsliste a b{display:block;font-size:16.5px}
.funktionsliste a span{display:block;font-size:14.5px;color:var(--grau);margin-top:2px}
.funktionsliste a:hover b{color:var(--korallrot)}
.neu{display:inline-block;margin-left:6px;font-size:11.5px;font-weight:650;color:var(--korallrot);background:var(--pfirsich);border-radius:5px;padding:1px 6px;vertical-align:2px}
.funktionsliste a .neu{display:inline-block;margin-top:0;font-size:11.5px;color:var(--korallrot)}

/* Warum Leona */
.gruende{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:36px 48px;margin-top:48px}
.gruende h3{font-size:19px;letter-spacing:-.01em}
.gruende p{margin-top:8px;color:var(--moos-hell);font-size:15.5px}

/* Preise */
.preise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:44px;border:1px solid var(--linie-stark);border-radius:16px;overflow:hidden;background:var(--weiss)}
@media (max-width:900px){.preise{grid-template-columns:1fr}}
.tarif{padding:28px 26px;display:flex;flex-direction:column;gap:14px;border-right:1px solid var(--linie)}
.tarif:last-child{border-right:0}
@media (max-width:900px){.tarif{border-right:0;border-bottom:1px solid var(--linie)}}
.tarif.hervor{background:var(--wald);color:#fff}
.tarif h3{font-size:20px}
.tarif .preis{font-size:44px;font-weight:760;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.tarif .preis small{display:block;font-size:14px;font-weight:450;letter-spacing:0;color:var(--grau);margin-top:6px}
.tarif.hervor .preis small,.tarif.hervor .beispiel,.tarif.hervor li{color:var(--moos-hell)}
.tarif .beispiel{font-size:14.5px;color:var(--grau);border-left:3px solid var(--koralle);padding-left:10px}
.tarif .beispiel b{color:inherit}
.tarif.hervor .beispiel b{color:#fff}
.tarif ul{margin:0;padding-left:18px;font-size:15px;display:grid;gap:4px}
.tarif .knopf{margin-top:auto}
.tarif .support{font-size:14px;color:var(--grau);border-top:1px solid var(--linie);padding-top:12px;margin-top:auto}
.tarif .support + .knopf{margin-top:0}
.tarif.hervor .support{color:var(--moos-hell);border-color:rgba(255,255,255,.16)}
.tarif.hervor .support b{color:#fff}
.tarif .preis-wort{font-size:34px;padding-top:6px}
.tarif.hervor .knopf-rahmen{color:#fff}
.preis-fuss{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 32px;font-size:14.5px;color:var(--grau)}
.preis-fuss b{color:var(--tinte)}

/* FAQ */
.fragen-liste{margin-top:36px;border-top:1px solid var(--linie-stark);max-width:900px}
.fragen-liste details{border-bottom:1px solid var(--linie-stark)}
.fragen-liste summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;font-family:var(--serif);font-size:21px;position:relative}
.fragen-liste summary::-webkit-details-marker{display:none}
.fragen-liste summary::after{content:"+";position:absolute;right:4px;top:14px;font-family:var(--sans);font-size:26px;color:var(--korallrot)}
.fragen-liste details[open] summary::after{content:"–"}
.fragen-liste details p{padding:0 0 20px;color:var(--grau);max-width:72ch}

/* Abschluss */
.abschluss{background:var(--wald);color:#fff;padding-block:84px}
.abschluss-raster{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:end;justify-content:space-between}
.abschluss .titel{max-width:20ch}
.abschluss p{margin-top:12px;color:var(--moos-hell);max-width:52ch}
.abschluss .knopf-rahmen{color:#fff}
.kontaktzeile{margin-top:14px;font-size:14.5px;color:var(--moos)}
.kontaktzeile a{color:#fff}

/* Fuß */
.fuss{background:var(--wald-tief);color:var(--moos);padding-block:48px 36px;font-size:14.5px}
.fuss-raster{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:32px}
@media (max-width:860px){.fuss-raster{grid-template-columns:1fr 1fr}}
.fuss h4{margin:0 0 10px;color:#fff;font-size:14.5px}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fuss a{color:var(--moos);text-decoration:none}
.fuss a:hover{color:#fff}
.fuss .klein{margin-top:36px;font-size:13px;color:var(--moos)}

/* ── Funktionsseiten ─────────────────────────────────────────────── */
.seitenkopf{background:var(--wald);color:#fff;padding-block:40px 64px}
.pfad{font-size:14px;color:var(--moos)}
.pfad a{color:var(--moos-hell)}
.seitenkopf-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;margin-top:28px}
@media (max-width:1060px){.seitenkopf-raster{grid-template-columns:minmax(0,1fr);gap:36px}}
.seitenkopf h1{font-size:clamp(36px,4.4vw,58px);line-height:1.05;letter-spacing:-.03em;font-weight:760}
.seitenkopf .einleitung{margin-top:18px;font-size:18.5px;color:var(--moos-hell);max-width:48ch}
.seitenkopf .hero-aktionen .knopf-rahmen{color:#fff}
.ablauf{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px 36px;counter-reset:schritt}
.ablauf li{counter-increment:schritt;border-top:2px solid var(--tinte);padding-top:14px}
.ablauf li::before{content:counter(schritt);display:block;font-weight:760;font-size:15px;color:var(--korallrot);margin-bottom:6px}
.ablauf b{display:block;font-size:17px}
.ablauf span{display:block;margin-top:6px;color:var(--grau);font-size:15.5px}
.wegfall{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center}
@media (max-width:860px){.wegfall{grid-template-columns:minmax(0,1fr)}}
.wegfall-zahl{background:var(--weiss);border:1px solid var(--linie);border-radius:16px;padding:24px}
.wegfall-zahl .paar{display:flex;gap:24px;align-items:baseline;flex-wrap:wrap}
.wegfall-zahl .alt{font-size:15px;color:var(--grau)}
.wegfall-zahl .alt b{font-size:28px;color:var(--grau);text-decoration:line-through;text-decoration-thickness:2px;font-variant-numeric:tabular-nums}
.wegfall-zahl .neu-zahl b{font-size:40px;font-weight:760;color:var(--ja);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.wegfall-zahl p{margin-top:10px;font-size:14px;color:var(--grau)}
.details{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px 40px;margin-top:36px}
.details h3{font-size:18px}
.details p{margin-top:6px;color:var(--grau);font-size:15.5px}
.verwandt{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.verwandt a{text-decoration:none;color:var(--tinte);border:1px solid var(--linie-stark);border-radius:999px;padding:8px 14px;font-size:15px;background:var(--weiss)}
.verwandt a:hover{border-color:var(--korallrot);color:var(--korallrot)}

/* Produktausschnitte (statisch) */
.ausschnitt{border-radius:16px;background:var(--papier);color:var(--tinte);box-shadow:0 26px 70px -30px rgba(0,0,0,.55);overflow:hidden}
.ausschnitt-kopf{background:var(--wald-tief);color:var(--moos-hell);font-size:12.5px;padding:10px 16px;display:flex;justify-content:space-between;gap:12px}
.ausschnitt-kopf b{color:#fff;font-weight:600}
.ausschnitt-inhalt{padding:18px 20px;overflow-x:auto}
.ausschnitt-fuss{font-size:12px;color:var(--grau);padding:9px 20px;border-top:1px solid var(--linie);background:#F5F4EF}
.raster{width:100%;border-collapse:collapse;font-size:13.5px}
.raster th{font-size:12px;color:var(--grau);font-weight:600;text-align:left;padding:6px 8px;border-bottom:1px solid var(--linie-stark)}
.raster td{padding:8px;border-bottom:1px solid var(--linie);vertical-align:top}
.raster td.leer{color:var(--grau-hell)}
.chip{display:inline-block;border-radius:999px;padding:1px 8px;font-size:12px;font-weight:600;white-space:nowrap}
.chip.gruen{background:var(--ja-weich);color:var(--ja)}
.chip.gelb{background:var(--warn-weich);color:var(--warn)}
.chip.rot{background:#F5DCD7;color:#8A3F32}
.chip.grau{background:var(--salbei);color:var(--grau)}
.zeilen{display:grid;gap:0}
.zeilen > div{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--linie)}
.zeilen > div:last-child{border-bottom:0}
.zeilen b{display:block;font-size:14.5px}
.zeilen small{display:block;font-size:12.5px;color:var(--grau)}
.lesen-schritte{display:grid;gap:8px;margin-bottom:14px}
.lesen-schritte div{display:flex;gap:10px;align-items:center;font-size:14px}
.lesen-schritte i{width:18px;height:18px;border-radius:50%;background:var(--ja);display:inline-block;flex:none;position:relative}
.lesen-schritte i::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.balken-soll{height:10px;border-radius:5px;background:var(--salbei);overflow:hidden;margin-top:6px}
.balken-soll i{display:block;height:100%;background:var(--wald-hell);border-radius:5px}
.ausschnitt .karte{min-height:0;padding:18px 20px 0}
.ausschnitt .karte-fuss{margin-inline:-20px;padding-inline:20px}

/* ── Produktbilder: Laptop und iPhone ─────────────────────────────── */
.laptop{margin:0}
.laptop .deckel{background:#1b1f1d;border-radius:14px 14px 0 0;padding:1.4% 1.4% 2%;margin-inline:6%;position:relative;box-shadow:0 34px 70px -34px rgba(0,0,0,.55)}
.laptop .deckel::before{content:"";position:absolute;top:.55%;left:50%;width:5px;height:5px;border-radius:50%;background:#3d4440;transform:translateX(-50%)}
.laptop img{display:block;width:100%;height:auto;aspect-ratio:16/10;border-radius:3px;background:#fff}
.laptop .basis{height:clamp(9px,1.3vw,15px);background:linear-gradient(#e4e6e1,#b5b9b1);border-radius:0 0 14px 14px;position:relative}
.laptop .basis::before{content:"";position:absolute;left:50%;top:0;width:13%;height:45%;transform:translateX(-50%);background:#a4a89f;border-radius:0 0 8px 8px}
.laptop figcaption{margin-top:14px;font-size:14px;color:var(--grau);text-align:center;padding-inline:6%}
.wald .laptop figcaption,.seitenkopf .laptop figcaption{color:var(--moos)}
.iphone{margin:0;width:min(250px,64vw);flex:none}
.iphone .rahmen{aspect-ratio:9/19.5;border-radius:44px;background:#1b1f1d;padding:9px;position:relative;box-shadow:0 30px 60px -28px rgba(0,0,0,.6)}
.iphone .rahmen::before{content:"";position:absolute;top:17px;left:50%;transform:translateX(-50%);width:32%;height:21px;border-radius:12px;background:#000;z-index:2}
.iphone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:36px;background:#fff}
.handyreihe{display:flex;flex-wrap:wrap;gap:36px 40px;justify-content:center;margin-top:40px;align-items:flex-start}
.iphone figcaption{margin-top:12px;font-size:13.5px;color:var(--grau);text-align:center}

/* Vitrine auf der Startseite */
.vitrine-reiter{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 28px}
.vitrine-reiter button{font:inherit;font-size:15px;font-weight:600;border:1px solid var(--linie-stark);background:var(--weiss);color:var(--tinte);border-radius:999px;padding:8px 16px;cursor:pointer}
.vitrine-reiter button:hover{border-color:var(--korallrot)}
.vitrine-reiter button[aria-pressed="true"]{background:var(--wald);border-color:var(--wald);color:#fff}
.vitrine-buehne{display:flex;gap:28px;align-items:flex-end;justify-content:center}
.vitrine-buehne .laptop{flex:1;min-width:0;max-width:1100px}

/* KI: mit und ohne */
.ki-marke{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:650;border-radius:999px;padding:4px 11px;margin-top:14px}
.ki-marke.ohne{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.ki-marke.mit{background:var(--pfirsich);color:var(--korallrot)}
.ki-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:44px;border:1px solid var(--linie-stark);border-radius:16px;overflow:hidden;background:var(--weiss)}
@media (max-width:860px){.ki-zwei{grid-template-columns:minmax(0,1fr)}}
.ki-zwei > div{padding:28px 28px 30px}
.ki-zwei > div:first-child{background:var(--wald);color:#fff}
.ki-zwei h3{font-size:22px;letter-spacing:-.015em}
.ki-zwei > div > p{margin-top:8px;font-size:15.5px;color:var(--grau)}
.ki-zwei > div:first-child > p{color:var(--moos-hell)}
.ki-zwei ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;font-size:15.5px}
.ki-zwei li{display:grid;grid-template-columns:18px 1fr;gap:8px}
.ki-zwei li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--koralle);margin-top:8px}
.ki-zwei a{color:inherit}
.ki-klein{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;color:var(--wald);background:var(--moos-hell);border-radius:5px;padding:1px 6px;vertical-align:2px}
.funktionsliste a .ki-klein{display:inline-block;margin-top:0;font-size:11px;color:var(--wald)}
.bildreihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:40px 32px;margin-top:40px;align-items:start}

/* Knopf, der wie ein Link aussieht */
.link-knopf{font:inherit;font-weight:650;color:var(--korallrot);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ── Neu 23.09.2026 ───────────────────────────────────────────────── */
.fuss-mail{margin-top:14px;line-height:1.7}
.fuss .fuss-mail a{color:#fff}

/* Zusagen im Hero: eigene Kennzeichen, KEINE Prüfsiegel Dritter (siehe seiten.mjs ZUSAGEN) */
.zusagen{margin-top:48px;border-top:1px solid rgba(255,255,255,.14);padding-top:22px}
.zusagen-titel{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--moos);margin-bottom:12px}
.zusagen ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:1060px){.zusagen ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.zusagen ul{grid-template-columns:1fr 1fr}}
.zusagen li{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:10px 12px;color:var(--moos-hell)}
.zusagen li svg{flex:none;color:var(--moos-hell)}
.zusagen b{display:block;color:#fff;font-size:14px;line-height:1.25}
.zusagen small{display:block;font-size:12.5px;line-height:1.3;color:var(--moos)}

/* Häkchen-Liste */
.hakenliste{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.hakenliste li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:15.5px;color:var(--grau)}
.hakenliste b{color:var(--tinte)}
.haken-zeichen{color:var(--ja);margin-top:3px}
.hakenliste-eng{gap:12px}

/* Vitrine: Text und Häkchen neben- bzw. übereinander, darunter das Karussell */
.vitrine-kopf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start;margin-bottom:36px}
.vitrine-kopf .unter + .unter{margin-top:12px}
@media (max-width:980px){.vitrine-kopf{grid-template-columns:minmax(0,1fr);gap:28px}}
.abheben{background:var(--weiss);border:1px solid var(--linie);border-radius:16px;padding:22px 24px}
.abheben h3{font-size:18px}

/* Karussell: ohne JS ein wischbarer Streifen; mit JS (.bereit) groß in der Mitte, Nachbarn klein */
.karussell{--folie:min(1020px,80%);--klein:.8;position:relative}
.karussell-iphone{--folie:min(270px,62%);--klein:.78}
.karussell-reiter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.karussell-reiter button{font:inherit;font-size:14.5px;font-weight:600;border:1px solid var(--linie-stark);background:var(--weiss);color:var(--tinte);border-radius:999px;padding:7px 14px;cursor:pointer}
.karussell-reiter button:hover{border-color:var(--korallrot)}
.karussell-reiter button[aria-pressed="true"]{background:var(--wald);border-color:var(--wald);color:#fff}
.karussell-spur{position:relative;display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px calc((100% - var(--folie))/2) 16px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.karussell-spur::-webkit-scrollbar{display:none}
.karussell-spur:focus-visible{outline:3px solid var(--koralle);outline-offset:4px;border-radius:12px}
.karussell-folie{flex:0 0 var(--folie);scroll-snap-align:center;scroll-snap-stop:always}
.karussell.bereit .karussell-folie{transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s;transform:scale(var(--klein));opacity:.45;cursor:pointer}
.karussell.bereit .karussell-folie.aktiv{transform:none;opacity:1;cursor:auto}
.karussell.bereit .karussell-folie.links{transform-origin:right center}
.karussell.bereit .karussell-folie.rechts{transform-origin:left center}
.karussell.bereit .karussell-folie:not(.aktiv) figcaption{visibility:hidden}
.karussell-iphone .karussell-folie{display:flex;justify-content:center}
.karussell-iphone .iphone{width:100%}
.karussell-steuer{display:none;align-items:center;justify-content:center;gap:16px;margin-top:6px}
.karussell.bereit .karussell-steuer{display:flex}
.karussell-pfeil{width:44px;height:44px;border-radius:50%;border:1px solid var(--linie-stark);background:var(--weiss);color:var(--tinte);display:grid;place-items:center;cursor:pointer}
.karussell-pfeil:hover{border-color:var(--korallrot);color:var(--korallrot)}
.karussell-pfeil:disabled{opacity:.35;cursor:default;border-color:var(--linie-stark);color:var(--tinte)}
.karussell-stand{min-width:16ch;text-align:center;font-size:14px;color:var(--grau);font-variant-numeric:tabular-nums}
@media (max-width:720px){.karussell{--folie:88%;--klein:.9}.karussell-iphone{--folie:72%;--klein:.84}.karussell-reiter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--rand));padding-inline:var(--rand)}.karussell-reiter button{flex:none}}
@media (prefers-reduced-motion:reduce){.karussell.bereit .karussell-folie{transition:none}}

/* KI */
.dachzeile{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--korallrot);margin-bottom:10px}
.ki-beispiele{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:36px}
@media (max-width:980px){.ki-beispiele{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ki-beispiele{grid-template-columns:1fr}}
.ki-beispiel{display:flex;flex-direction:column;gap:6px;background:var(--weiss);border:1px solid var(--linie);border-radius:14px;padding:18px;text-decoration:none;color:var(--tinte)}
.ki-beispiel:hover{border-color:var(--korallrot);color:var(--tinte)}
.ki-verb{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--korallrot)}
.ki-beispiel b{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.3}
.ki-beispiel span:last-child{font-size:14.5px;color:var(--grau)}
.ki-zwei .hakenliste li{font-size:15.5px}

/* Rechner: Kopfzeile und drei Ergebnisse */
.rechner-kopf{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--linie);font-size:14px;color:var(--grau)}
.rechner-kopf .link-knopf{margin-left:auto;font-size:14px}
.schaetz-marke{background:var(--warn-weich);color:var(--warn);font-weight:700;font-size:12.5px;border-radius:6px;padding:3px 9px}
.rechner-tabelle thead th small{display:block;font-weight:450;font-size:12px;color:var(--grau-hell)}
.rechner-summe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 32px;align-items:start;padding:22px 20px}
.rechner-summe > div > span{display:block;margin-top:4px}
@media (max-width:760px){.rechner-summe{grid-template-columns:1fr}}

/* Preise: Beratung als eigener Streifen */
.beratung-streifen{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;margin-top:18px;border:1px solid var(--linie-stark);border-radius:16px;padding:22px 26px;background:var(--pfirsich)}
.beratung-streifen h3{font-size:20px}
.beratung-streifen p{margin-top:6px;color:var(--tinte);max-width:70ch;font-size:15.5px}

/* Lösungen */
.loesung-sprung{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.loesung-sprung a{display:inline-block;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:7px 14px;font-size:14.5px;font-weight:600}
.loesung-sprung a:hover{background:rgba(255,255,255,.1);color:#fff}
.loesung{scroll-margin-top:70px}
.loesung-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
@media (max-width:980px){.loesung-raster{grid-template-columns:minmax(0,1fr)}}
.loesung-passt{font-size:16px;margin-top:26px}
.loesung .verwandt{margin-top:12px}

/* Formulare: Testzugang anfragen, Termin buchen */
.schritte-hell{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:s}
.schritte-hell li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:4px 12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:14px 16px}
.schritte-hell li::before{content:counter(s);grid-row:span 2;width:28px;height:28px;border-radius:50%;background:var(--koralle);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.schritte-hell b{color:#fff}
.schritte-hell span{color:var(--moos-hell);font-size:15px}
.formular-bereich{padding-top:56px}
.formular-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px;align-items:start}
@media (max-width:980px){.formular-raster{grid-template-columns:minmax(0,1fr);gap:40px}}
.formular{margin-top:24px;display:grid;gap:18px;max-width:760px}
.feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.feld-reihe{grid-template-columns:1fr}}
.feld label{font-size:15px;font-weight:650}
.feld .optional{font-weight:450;color:var(--grau)}
.feld input:not([type=checkbox]),.feld select,.feld textarea{font:inherit;font-size:16px;padding:11px 13px;border:1px solid var(--linie-stark);border-radius:10px;background:var(--weiss);color:var(--tinte);width:100%}
.feld textarea{resize:vertical;min-height:110px}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:3px solid rgba(237,88,44,.35);outline-offset:0;border-color:var(--koralle)}
.feld [aria-invalid="true"]{border-color:var(--korallrot);background:#FFF7F4}
.feld-hinweis{font-size:13.5px;color:var(--grau)}
.feld-fehler{font-size:13.5px;color:var(--korallrot);font-weight:600}
.feld-fehler:empty{display:none}
.feld-haken{display:grid;grid-template-columns:22px 1fr;gap:4px 12px;align-items:start}
.feld-haken input{width:20px;height:20px;margin:3px 0 0;accent-color:var(--wald)}
.feld-haken label{font-weight:450;font-size:15px;color:var(--tinte)}
.feld-haken .feld-fehler{grid-column:2}
.honig{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.formular-fuss{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.formular-fuss .knopf{min-width:200px}
.knopf[disabled]{opacity:.6;cursor:progress}
.formular-meldung{flex-basis:100%;background:#FBE9E3;color:#7A2A12;border-radius:10px;padding:12px 14px;font-size:15px}
.formular-meldung.hinweis{background:var(--warn-weich);color:var(--warn)}
.formular-erfolg{margin-top:24px;background:var(--ja-weich);border:1px solid #BFD4BF;border-radius:16px;padding:26px 28px;max-width:760px}
.formular-erfolg:focus{outline:none}
.formular-erfolg h2{font-size:26px;letter-spacing:-.02em;color:var(--ja)}
.formular-erfolg p{margin-top:10px}
.formular-ohne-js{margin-top:24px;background:var(--warn-weich);color:var(--warn);border-radius:12px;padding:16px 18px;max-width:760px}
.formular-seite{display:grid;gap:22px}
.formular-seite > div{background:var(--salbei);border-radius:16px;padding:20px 22px}
.formular-seite h3{font-size:17px}
.formular-seite p{margin-top:6px;font-size:15px;color:var(--grau)}
.mail-liste{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px;font-size:15px}
.mail-liste span{display:block;font-size:13px;color:var(--grau)}
.mail-liste a{word-break:break-all}

/* Terminbuchung: Wochenansicht */
.termin-kopf{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-bottom:18px}
.termin-schritt{font-size:22px;letter-spacing:-.015em}
.termin-schritt:focus{outline:none}
.woche-steuer{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.woche-text{min-width:21ch;text-align:center;font-weight:650;font-variant-numeric:tabular-nums}
.knopf.klein{padding:8px 14px;font-size:14px}
.knopf-rahmen:disabled{opacity:.35;cursor:default}
.woche{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.woche > .termin-hinweis{grid-column:1/-1}
.tag{background:var(--weiss);border:1px solid var(--linie);border-radius:14px;padding:14px 12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.tag h4{margin:0 0 2px;font-size:15px}
.tag h4 small{display:block;font-weight:450;color:var(--grau);font-size:13px}
.tag .leer{font-size:13.5px;color:var(--grau-hell)}
.slot{font:inherit;font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;border:1.5px solid var(--wald);color:var(--wald);background:#fff;border-radius:9px;padding:8px 6px;cursor:pointer}
.slot:hover{background:var(--moos-hell)}
.slot[aria-pressed="true"]{background:var(--wald);color:#fff}
@media (max-width:860px){.woche{grid-template-columns:1fr}.tag{flex-direction:row;flex-wrap:wrap;align-items:center}.tag h4{flex-basis:100%}.slot{flex:1 0 76px}}
.termin-hinweis{color:var(--grau);padding:18px 0}
.termin-hinweis .knopf{margin-top:12px}
.termin-zeitzone{margin-top:14px;font-size:14px;color:var(--grau)}
.termin-formular{margin-top:36px;border-top:1px solid var(--linie-stark);padding-top:28px}
.termin-gewaehlt{font-size:17px}
.termin-gewaehlt span{font-weight:700}
.termin-bestaetigt{font-size:19px;font-weight:650;color:var(--tinte)}
.termin-mail{margin-top:36px;font-size:15px;color:var(--grau)}
/* Häkchen-Liste im KI-Kasten: die Punkte der Linkliste (.ki-zwei li::before) gelten hier nicht */
.ki-zwei .hakenliste li{grid-template-columns:20px 1fr;gap:10px}
.ki-zwei .hakenliste li::before{display:none}
.karussell-iphone .karussell-spur{gap:12px}
@media (max-width:520px){
  .kopf-aktionen .knopf{white-space:nowrap;font-size:13.5px;padding:9px 11px}
  .zusagen ul{grid-template-columns:1fr;gap:8px}
  .zusagen li{padding:9px 12px}
}
@media (max-width:640px){
  .woche-steuer{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:8px}
  .woche-steuer .breit{display:none}
  .woche-text{min-width:0;font-size:14.5px}
}
@media (max-width:860px){.fuss-raster > div:first-child{grid-column:1/-1}}
/* Suchmaschinen (23.09.2026): Dachzeile im <h1> (Hauptbegriff der Seite), Text „Worum es geht“ der
   Funktionsseiten und die Checkliste auf /jugendhilfe-software. Hero und Seitenkopf sind dunkel —
   die Dachzeile steht deshalb in Pfirsich (Kontrast > 4,5 : 1 auf Wald), nicht in Korallrot. */
.h1-dach{display:block;font-family:var(--sans);font-size:13px;line-height:1.4;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pfirsich);margin-bottom:14px;max-width:none}
.worum{margin-top:18px;max-width:68ch}
.worum p{font-size:18px;line-height:1.6;color:var(--grau)}
.worum p + p{margin-top:14px}
.ablauf-titel{margin-top:48px;font-size:17px}
.checkliste{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:36px 44px;counter-reset:frage}
.checkliste li{counter-increment:frage;border-top:2px solid var(--tinte);padding-top:14px}
.checkliste li::before{content:counter(frage);display:block;font-weight:760;font-size:15px;color:var(--korallrot);margin-bottom:6px}
.checkliste h3{font-size:19px;line-height:1.3}
.checkliste p{margin-top:8px;color:var(--grau)}
.checkliste .checkliste-leona{margin-top:12px;padding:12px 14px;background:var(--salbei);border-radius:10px;color:var(--tinte);font-size:15.5px}

/* ── Einwilligung: Cookie-Banner (23.09.2026) ─────────────────────────
   Fest am unteren Rand, kein Vollbild, kein Abdunkeln: die Seite bleibt lesbar und bedienbar
   (leona.js gibt dem Seitenende so viel Platz, wie das Banner hoch ist). Beide Wahlknöpfe tragen
   DIESELBE Klasse .einwilligung-wahl — gleich groß, gleich gefärbt, keiner hervorgehoben (DSK:
   keine Dark Patterns). Die Website ist nur hell (color-scheme:light); das Banner folgt ihr. */
.einwilligung{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--weiss);color:var(--tinte);border-top:1px solid var(--linie-stark);box-shadow:0 -20px 50px -28px rgba(22,58,50,.45);padding:18px var(--rand) calc(18px + env(safe-area-inset-bottom));max-height:min(88vh,720px);overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 40px;align-items:center}
.einwilligung-titel{font-weight:700;font-size:16.5px;line-height:1.35;color:var(--tinte);margin-bottom:4px}
.einwilligung-text p:not(.einwilligung-titel){font-size:14.5px;line-height:1.55;color:var(--grau);max-width:80ch}
.einwilligung a{color:var(--korallrot)}
.einwilligung-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.einwilligung-wahl{background:var(--wald);color:#fff;min-width:188px;min-height:46px}
.einwilligung-wahl:hover{background:var(--wald-hell);color:#fff}
.einwilligung-mehr{grid-column:1/-1;justify-self:center;font-size:14.5px;padding:4px 6px;color:var(--wald)}
/* Einstellungen offen: eine Spalte, Schalter über den Knöpfen. Der Einleitungstext tritt zurück —
   die Einstellungen haben eine eigene Überschrift und sagen dasselbe genauer (auf dem Handy passte
   sonst nicht beides auf den Bildschirm). */
.einwilligung.mit-details{grid-template-columns:minmax(0,1fr)}
.einwilligung.mit-details .einwilligung-text{display:none}
.einwilligung.mit-details .einwilligung-knoepfe{justify-self:end;width:min(100%,420px)}
.einwilligung-details{border:1px solid var(--linie);border-radius:14px;background:var(--papier);padding:16px 18px;display:grid;gap:12px;max-width:820px}
.einwilligung-details:focus{outline:none}
.einwilligung-details:focus-visible{outline:3px solid var(--koralle);outline-offset:3px}
.einwilligung-art{border-top:1px solid var(--linie);padding-top:12px}
.einwilligung-art p{font-size:14px;line-height:1.5;color:var(--grau)}
.einwilligung-art .einwilligung-art-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--tinte);font-size:15px;margin-bottom:4px}
.einwilligung-art-kopf label{cursor:pointer}
.einwilligung-immer{font-size:13px;font-weight:650;color:var(--ja);background:var(--ja-weich);border-radius:999px;padding:2px 10px}
.einwilligung-klein{font-size:13.5px;line-height:1.5;color:var(--grau)}
/* Schalter: ein Kontrollkästchen mit role="switch" — Tastatur (Leertaste) und Vorlesen gratis */
.einwilligung-schalter{appearance:none;-webkit-appearance:none;flex:none;margin:0;width:46px;height:26px;border-radius:999px;background:var(--linie-stark);position:relative;cursor:pointer;transition:background .15s}
.einwilligung-schalter::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.einwilligung-schalter:checked{background:var(--wald)}
.einwilligung-schalter:checked::after{transform:translateX(20px)}
.einwilligung-schalter:focus-visible{outline:3px solid var(--koralle);outline-offset:3px}
.einwilligung-speichern{padding:9px 16px;font-size:14.5px;color:var(--wald)}
@media (prefers-reduced-motion:no-preference){.einwilligung:not([hidden]){animation:einwilligung-rein .22s ease-out both}}
@keyframes einwilligung-rein{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.einwilligung-schalter,.einwilligung-schalter::after{transition:none}}
@media (max-width:980px){
  .einwilligung{grid-template-columns:minmax(0,1fr);gap:12px;padding-top:14px}
  .einwilligung.mit-details .einwilligung-knoepfe{width:100%}
  .einwilligung-wahl{min-width:0;padding-inline:10px}
}
@media (max-width:520px){
  .einwilligung-titel{font-size:15.5px}
  .einwilligung-wahl{font-size:15px;padding-inline:6px}
  .einwilligung-text p:not(.einwilligung-titel){font-size:13.5px;line-height:1.5}
  .einwilligung-details{padding:12px 14px}
}
/* „Cookie-Einstellungen“ im Fuß ist ein Link und sieht aus wie die anderen */