/* onfyr.de — klassische Seite (unter der Bühne). Editoriale Typografie, dunkle Grundfläche mit
   einer hellen Sektion (Förderung). Keine Karten-Raster als Reflex: Herausforderungen als nummerierte
   Zeilen, Methode als Schrittfolge, Angebote als drei Tafeln. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Seitengrund nach CD v2.1: Tiefgrün mit Gold-Glut oben links (--grund, nur im oberen Bereich), darüber feines Rauschen ≈ 3 % gegen Stufen (Manual S. 08) */
body{margin:0;background:var(--c-tief);background-image:var(--grund);background-repeat:no-repeat;background-size:100% 1200px,100% 100%;color:var(--c-text);font:var(--fw-text) var(--fs-text)/1.6 var(--font);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23r)'/%3E%3C/svg%3E");background-size:220px 220px}
img,video{max-width:100%;height:auto}
a{color:var(--c-gold);text-decoration:none}
a:hover{color:var(--c-gold-hell)}
:focus-visible{outline:2px solid var(--c-gold);outline-offset:3px;border-radius:6px}
/* CD v2.1: H1/H2 Minion Regular (nie kursiv, nie fett), H3 und alles andere Outfit (Manual S. 06) */
h1,h2{font-family:var(--font-display);font-weight:400;font-style:normal;line-height:1.15;margin:0;text-wrap:balance}
h1{font-size:var(--fs-hero);line-height:1.05} h2{font-size:var(--fs-h2)}
h3{font-family:var(--font);font-weight:500;font-size:var(--fs-h3);line-height:1.25;margin:0;text-wrap:balance}
p{margin:0}
.springlink{position:absolute;left:-999px;top:0;padding:.6rem 1rem;background:var(--c-gold);color:var(--c-dunkel-text);z-index:200}
.springlink:focus{left:1rem;top:1rem}
.glut-hintergrund{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.kopfbereich,main,.fuss{position:relative;z-index:1}

/* ---- Kopf ---- */
.kopf{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:1rem;padding:.7rem max(clamp(1rem,4vw,3rem),calc((100vw - var(--breite-max)) / 2));   /* 29.10.: Wortmarke und Menü auf der Inhaltskante (gleiche Linie wie Hero-Text und Sektionen; Michael 22.10./29.10.) */
  background:rgba(13,31,34,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--c-linie)}
.kopf__logo img{display:block;width:clamp(96px,12vw,132px);height:auto}
.kopf__nav{margin-left:auto}
.kopf__nav ul{display:flex;gap:clamp(.6rem,1.6vw,1.6rem);list-style:none;margin:0;padding:0}
.kopf__nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .3rem;color:var(--c-text);font-size:.92rem;font-weight:400;border-bottom:1px solid transparent}
.kopf__nav a:hover,.kopf__nav li.aktiv a{border-bottom-color:var(--c-gold)}
.kopf__aktion{display:flex;align-items:center;gap:.6rem}
.kopf__aktion .knopf{min-height:44px;padding:.45rem 1.1rem;font-size:.92rem}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.6rem 1.4rem;border-radius:10px;
  background:var(--c-gold);color:var(--c-dunkel-text);font-weight:500;font-size:.95rem;letter-spacing:.04em;border:1px solid var(--c-gold);cursor:pointer;font-family:var(--font);
  transition:transform .25s var(--kurve),box-shadow .25s var(--kurve),background .25s var(--kurve)}
.knopf:hover{background:var(--c-gold-300);color:var(--c-dunkel-text);box-shadow:0 0 34px rgba(202,158,103,.35)}
.knopf:active{transform:scale(.98)}
.knopf--geist{background:transparent;color:var(--c-text);border-color:rgba(245,241,235,.28)}
.knopf--geist:hover{background:rgba(245,241,235,.06);color:var(--c-text);border-color:var(--c-gold);box-shadow:none}
.knopf--breit{width:100%}
.kopf__burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.kopf__burger span{display:block;width:22px;height:2px;background:var(--c-text)}
.vorhang{position:fixed;inset:0;z-index:106;background:rgba(13,31,34,.97);padding:5rem clamp(1.2rem,6vw,3rem) 2rem;display:flex;flex-direction:column;gap:1.5rem;overflow-y:auto}
.vorhang[hidden]{display:none}
.vorhang ul{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.vorhang a{display:flex;align-items:center;min-height:52px;font-family:var(--font);font-weight:400;font-size:1.5rem;color:var(--c-text);border-bottom:1px solid var(--c-linie)}
.vorhang__zu{position:absolute;right:1rem;top:1rem;width:48px;height:48px;background:none;border:1px solid var(--c-linie);border-radius:50%;color:var(--c-text);font-size:1.6rem;cursor:pointer}
/* E-Mail-Symbol neben dem Burger (Ansage Michael 24.09., STANDARD-DIALOG-EINSTIEG §6.3): nur mobil, Ziel #kontakt */
.kopf__mail{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:50%;color:var(--c-text);border:1px solid rgba(255,255,255,.16)}
.kopf__mail:hover{color:var(--c-gold);border-color:var(--c-gold)}
@media (max-width:899px){.kopf__nav{display:none}.kopf__burger{display:flex}.kopf__mail{display:flex}.kopf__aktion .knopf{display:none}}
body.vorhang-offen{overflow:hidden}

/* ---- Sektionen ---- */
.sektion{padding:var(--raum-sektion) clamp(1rem,4vw,3rem)}
.sektion__innen{max-width:var(--breite-max);margin:0 auto}
.kicker{display:block;font-size:var(--fs-overline);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--c-gold);margin-bottom:.9rem}   /* Overline: Outfit Medium 11–12 px */
.lead{font-size:var(--fs-lead);color:var(--c-text-2);max-width:60ch;margin-top:1.1rem}
.zwei{display:grid;gap:clamp(1.5rem,4vw,4rem)}
@media (min-width:900px){.zwei{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.zwei--breit{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.linie{height:1px;background:var(--fading-line);margin:0 auto;max-width:var(--breite-max)}

/* Hero */
/* Hero als Bild-Bühne, Runde 2 (21.10.2026, Titelbild 014, Zettel UPDATE_2026-10-21_ONFYR-Bilder-Hero.md).
   Das Foto füllt die ganze Hero-Fläche; der Text steht unten links auf einem Dunkel-Verlauf, die Siegelreihe rechts unten.
   Die Glut-Flamme steht ÜBER dem Foto zwischen Michael und Vito (js/glut.js, data-glut-bildraum am <img>): dafür liegt das Foto
   auf der Startseite unter dem Glut-Canvas (z-index 0) — main bildet dort keinen Stapelkontext, das Foto hat z-index −1.
   Hochkant und flache Fenster (< 900 px breit oder < 600 px hoch): Foto oben (unter 600 px eigener Hochformat-Ausschnitt), Text darunter. */
body.startseite main{z-index:auto}
.held{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:start}   /* gestapelt: kein min-height (Prüfer B3: Leerband bei 768×1024); minmax(0,…): die H1 (max-content) darf die Spur nicht aufweiten */
.held__bild{position:relative;z-index:-1;margin:0;overflow:hidden}
.held__bild img{display:block;width:100%;height:auto;aspect-ratio:4/5;max-height:66svh;object-fit:cover;object-position:50% 0}
.held__bild::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,rgba(13,31,34,0),rgba(13,31,34,.8) 58%,var(--c-tief) 92%);pointer-events:none}
.held__innen{position:relative;max-width:calc(var(--breite-max) + 2 * clamp(1rem,4vw,3rem));width:100%;margin:-3.5rem auto 0;padding:0 clamp(1rem,4vw,3rem) var(--raum-sektion)}   /* 29.10.: Innenabstand außerhalb der Inhaltsbreite — Hero-Text auf der Sektionskante (= Kopfzeile) */
.held h1{font-size:clamp(2.25rem,8vw,3.5rem);line-height:1.05;letter-spacing:-.005em;width:max-content;max-width:100%}
.held .kicker{width:max-content;max-width:100%}   /* Rechteck = Text (Prüfung Gesichter/Flamme/Kontrast misst am Rechteck) */
.held .siegel--held{display:none}
@media (min-width:600px){.held__bild img{aspect-ratio:16/10;max-height:62svh;object-position:30% 0}}
/* flache Fenster (iPhone quer): kürzeres Foto, Text direkt darunter, kleinere Zeile — H1 bleibt in der ersten Ansicht (nach der 600-px-Regel, damit sie gewinnt) */
@media (min-width:600px) and (max-height:599px){.held__bild img{max-height:54svh;object-position:30% 6%}.held__bild::after{height:22%;background:linear-gradient(180deg,rgba(13,31,34,0),rgba(13,31,34,.55) 70%,var(--c-tief))}.held__innen{margin-top:0;padding-top:.3rem}.held .kicker{margin-bottom:.3rem}.held h1{font-size:clamp(2rem,6.5vh,2.5rem)}.held .lead{font-size:1rem;margin-top:.5rem}.held__wege{margin-top:.9rem}}
@media (min-width:900px) and (min-height:600px){
  /* Hero-Umbau 22.10.2026 (Ansage Michael): Foto nach links erweitert (…-titel-breit-*, Seitenverhältnis 2,66), Text oben links in der Inhaltsspalte
     (Leserichtung, goldener Schnitt), Siegel unten links — die rechte untere Ecke bleibt dem Ida-Knopf und seiner Blase. Höhe gedeckelt (1000 px), damit
     das 2400er Foto auf 4K nie > 1,2× gestreckt wird (Bild ≤ 300 KB). */
  .held{display:block;min-height:min(calc(100svh - 70px),1000px)}
  .held__bild{position:absolute;inset:0}
  .held__bild img{width:100%;height:100%;max-height:none;aspect-ratio:auto;object-position:50% 50%}
  .held__bild::after{height:46%;background:linear-gradient(180deg,rgba(13,31,34,0),rgba(13,31,34,.55) 50%,rgba(13,31,34,.9) 82%,var(--c-tief))}
  .held__bild::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,31,34,.9),rgba(13,31,34,.74) 24%,rgba(13,31,34,.3) 42%,rgba(13,31,34,0) 54%),linear-gradient(180deg,rgba(13,31,34,.5),rgba(13,31,34,0) 28%);pointer-events:none}
  .held__innen{position:absolute;inset:0;max-width:calc(var(--breite-max) + 2 * clamp(1rem,4vw,3rem));width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1.5rem;padding:clamp(5rem,29vh,15rem) clamp(1rem,4vw,3rem) clamp(1.6rem,4vh,2.6rem)}   /* Oberkante Text ≈ 30 % der Hero-Höhe (goldener Schnitt, Kriterium 1) */   /* Textkante = Inhaltskante (wie die Sektionen darunter) */
  .held__text{flex:0 0 auto;max-width:min(32vw,32rem)}   /* bleibt links von Michaels Arm, auch bei 2560 px */
  .held h1{font-size:clamp(2.5rem,3.9vw,3.5rem)}
  .held .lead{font-size:clamp(1rem,1.2vw,1.125rem);max-width:min(46ch,30vw);margin-top:.9rem;color:var(--c-warm)}   /* Fließtext auf Dunkel in Warm White (≥ 7:1 über dem abgedunkelten Foto) */
  .held__wege{margin-top:1.3rem}
  .held .chips{margin-top:1.1rem}
  .held .siegel--held{display:flex;flex:0 0 auto;margin:auto 0 0;align-items:flex-end;gap:clamp(.9rem,1.6vw,1.6rem);--siegel-h:clamp(96px,14vh,140px)}   /* unten links, nie in der Ecke des Ida-Knopfs */
  .held .siegel--held img{height:var(--siegel-h);filter:drop-shadow(0 14px 34px rgba(0,0,0,.6))}
}
@media (min-width:900px) and (min-height:600px) and (max-height:760px){.held .siegel--held{--siegel-h:clamp(84px,12vh,110px)}.held .chips{display:none}.held__innen{padding-top:clamp(4rem,22vh,9rem)}}
@media (min-width:900px) and (max-width:1279px){.held .kicker{font-size:.78rem;letter-spacing:.1em}}
@media (min-width:900px) and (max-width:1099px){.held .chips{display:none}.held__text{max-width:min(36vw,30rem)}}   /* iPad quer: ohne Chips bleiben Text und Siegel in der ersten Ansicht */   /* schmaler Desktop: Kicker bleibt links vom Flammenraum */
/* Siegel-Band unter dem Hero (Muster michael-selck.de): nur, wenn der Hero gestapelt ist (< 900 px breit oder < 600 px hoch) */
.siegel-band{display:none}
@media (max-width:899px),(max-height:599px){
  .siegel-band{display:flex;justify-content:center;align-items:flex-end;gap:clamp(1rem,3vw,1.6rem);padding:1.6rem clamp(1rem,4vw,3rem) 1.8rem;   /* Siegel linksbündig an der Inhaltskante, damit der Ida-Knopf (fixed rechts unten) sie nie verdeckt (Prüfer 22.10., 768×1024) */
    background:var(--c-kachel);border-top:1px solid var(--c-kante);border-bottom:1px solid var(--c-kante)}
  .siegel-band .siegel{margin:0 auto;gap:inherit;width:100%;max-width:var(--breite-max);justify-content:flex-start;align-items:flex-end}
  .siegel-band .siegel img{height:clamp(150px,30vw,160px);filter:drop-shadow(0 10px 26px rgba(0,0,0,.5))}
  .held .chips{display:none}
}
.held h1 em{font-style:normal;font-weight:400;color:var(--c-warm)}   /* „Wir entfachen“ Warm White, nie kursiv (Manual S. 04) */
.held h1 strong{font-weight:400;color:var(--c-gold);text-shadow:0 0 50px rgba(202,158,103,.3)}   /* Akzentwort Gold 500 */
.held__wege{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
/* Vertrauenssiegel wie auf michael-selck.de (Ansage Michael 25.09.): BAFA-Berater · KI-Manager · German Web Award 2022 */
.siegel{display:flex;flex-wrap:wrap;gap:1rem;list-style:none;margin:1.6rem 0 0;padding:0;align-items:flex-start}
.siegel img{display:block;width:auto;height:var(--siegel-h,104px);filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}   /* alle drei gleich hoch (Ansage Michael 21.10.) */
.siegel--gross{margin-top:1.4rem}
.siegel--gross{--siegel-h:clamp(120px,11vw,164px)}
@media (max-width:520px){.siegel--gross{--siegel-h:clamp(110px,30vw,140px)}}
.held__siegel{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.6rem;padding:.5rem .9rem .5rem .5rem;border-radius:999px;border:1px solid var(--c-linie);background:rgba(27,58,63,.4);font-size:.86rem;color:var(--c-text-2)}
.held__siegel img{width:42px;height:42px}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:1.4rem 0 0;padding:0}
.chips li{padding:.34rem .85rem;border-radius:999px;border:1px solid var(--c-kante);background:rgba(27,58,63,.6);font-size:var(--fs-overline);font-weight:500;letter-spacing:.05em}

/* Herausforderungen: nummerierte Zeilen */
.zeilen{list-style:none;margin:2.5rem 0 0;padding:0;border-top:1px solid var(--c-linie)}
.zeilen li{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:1rem;padding:1.6rem 0;border-bottom:1px solid var(--c-linie)}
@media (min-width:900px){.zeilen li{grid-template-columns:4rem minmax(0,.7fr) minmax(0,1fr);gap:2rem;align-items:start}}
.zeilen__nr{font-family:var(--font);font-weight:300;font-size:2rem;color:var(--c-gold);line-height:1}
.zeilen h3{font-size:1.5rem}
.zeilen__frage{display:block;margin-top:.4rem;font-family:var(--font);font-weight:500;font-size:1.1rem;color:var(--c-stein)}
.zeilen p{color:var(--c-text-2);font-size:.98rem}
@media (max-width:899px){.zeilen p{grid-column:2}}

/* Perspektivwechsel */
.zitatblock{border-left:2px solid var(--c-gold);padding:.4rem 0 .4rem 1.4rem;font-family:var(--font);font-weight:300;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.3;color:var(--c-text)}
.zitatblock cite{display:block;margin-top:.8rem;font:400 .86rem/1.5 var(--font);font-style:normal;color:var(--c-text-2)}
.perspektive{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:start}
.perspektive>div{min-width:0}   /* 25.09.: WebKit 320 px — Raster-Spalte „auto“ nahm die Min-Content-Breite (327 > 320) */
.perspektive__raum{min-height:11rem}
.perspektive__ziel{height:11rem}
/* Desktop: der Raum läuft neben den Fragen mit (sticky), damit die Partikel das 10× immer im Sichtfeld formen */
@media (min-width:1024px){.perspektive{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch}.perspektive__raum{min-height:24rem}.perspektive__ziel{position:sticky;top:calc(50vh - 12rem);height:24rem}}
.fragenliste{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.9rem;counter-reset:frage}
.fragenliste li{position:relative;padding:1rem 1.1rem 1rem 3.4rem;border-radius:var(--radius);background:var(--c-kachel);border:1px solid var(--c-kante);display:flex;flex-direction:column;gap:.3rem}
.fragenliste li::before{counter-increment:frage;content:counter(frage);position:absolute;left:1rem;top:1rem;width:1.7rem;height:1.7rem;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(202,158,103,.6);font-family:var(--font-display);font-weight:600;color:var(--c-gold)}
.fragenliste b{font-family:var(--font);font-weight:500;font-size:1.15rem;line-height:1.25}
.fragenliste span{color:var(--c-text-2);font-size:.96rem}

/* Methode: Schritte */
.schritte{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:1rem;counter-reset:s}
@media (min-width:700px){.schritte{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.schritte{grid-template-columns:repeat(4,minmax(0,1fr))}}
.schritte li{position:relative;padding:1.4rem 1.3rem 1.3rem;border-radius:var(--radius);background:var(--c-kachel);border:1px solid var(--c-kante)}
.schritte li::before{counter-increment:s;content:"0" counter(s);display:block;font-family:var(--font);font-weight:500;font-size:1.1rem;color:var(--c-gold);letter-spacing:.1em;margin-bottom:.8rem}
.schritte h3{font-size:1.45rem;margin-bottom:.5rem}
.schritte p{color:var(--c-text-2);font-size:.96rem}

/* Angebote: drei Tafeln */
/* Herausforderung (22.10.2026): rechts bleibt ein Band für das Fragezeichen aus der Glut (data-glut-form="text:?") */
@media (min-width:1100px){#herausforderung .sektion__innen{padding-right:26%}}
.tafeln{display:grid;gap:1rem;margin-top:2.5rem}
@media (min-width:900px){.tafeln{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tafel{display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:var(--c-kachel);border:1px solid var(--c-kante)}
.tafel--haupt{border-color:rgba(202,158,103,.55)}
/* Empfehlung (Ansage Michael 22.10.2026): Mallorca ist das Format, das wir verkaufen — Malediven bleibt der Preisanker davor. Gold-Band + stärkerer Rahmen, nie „beste Entscheidung“ */
.tafel--empfehlung{border-color:rgba(202,158,103,.8);box-shadow:0 0 0 1px rgba(202,158,103,.25),0 22px 60px rgba(0,0,0,.35)}
.tafel__band{margin:0;padding:.55rem 1rem;background:var(--c-gold);color:var(--c-dunkel-text);font:500 .75rem/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase;text-align:center}
/* Beratungspreis: Eigenanteil zuerst, Vollpreis daneben — die Differenz muss ins Auge springen (Ansage Michael 22.10.2026) */
.tafel__preis--foerder b{font-size:1.6rem;color:var(--c-gold)}
.tafel__preis--foerder .tafel__preis-rolle{font-size:.92rem;color:var(--c-text)}
.tafel__preis--foerder .tafel__preis-voll{font-size:.94rem;color:var(--c-text-2)}
.tafel__preis--foerder .tafel__termin a{color:var(--c-gold);text-decoration:underline;text-underline-offset:.2em}
.tafel img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.tafel__innen{display:flex;flex-direction:column;gap:.7rem;padding:1.3rem 1.3rem 1.4rem;flex:1}
.etikett{align-self:flex-start;padding:.22rem .65rem;border-radius:999px;font-size:.75rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--c-dunkel-text);background:var(--c-gold)}
.etikett--leise{background:transparent;color:var(--c-gold);border:1px solid rgba(202,158,103,.5)}
.tafel h3{font-size:1.7rem}
.tafel__kurz{font-family:var(--font);font-weight:400;font-size:1.05rem;color:var(--c-stein)}
.tafel ul{margin:0;padding-left:1.1rem;color:var(--c-text-2);font-size:.94rem;display:grid;gap:.3rem}
.tafel__preis{margin-top:auto;padding-top:.8rem;border-top:1px solid var(--c-linie);display:flex;flex-direction:column;gap:.15rem}
.tafel__preis b{font-size:1.25rem;font-family:var(--font);font-weight:500}
.tafel__preis span,.tafel__termin{font-size:.86rem;color:var(--c-text-2)}
.tafel .knopf{margin-top:.6rem;align-self:flex-start}

/* Expedition (Teaser + Seite) */
.expedition__bild{border-radius:var(--radius);overflow:hidden}
/* Galerie „Momente einer Expedition“ (21.10.2026): zwei große, drei kleinere Bilder — redaktioneller Rhythmus statt Raster */
.momente{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:clamp(.8rem,1.6vw,1.4rem)}
.momente figure{margin:0}
.momente img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
.momente figcaption{margin-top:.6rem;font-size:.9rem;color:var(--c-text-2);max-width:42ch}
@media (min-width:640px){.momente{grid-template-columns:repeat(2,minmax(0,1fr))}.momente li:last-child{grid-column:1/-1}.momente li:last-child img{aspect-ratio:21/9}}
@media (min-width:1024px){.momente{grid-template-columns:repeat(6,minmax(0,1fr))}.momente li{grid-column:span 2}.momente li:nth-child(-n+2){grid-column:span 3}
  .momente li:last-child{grid-column:span 2}.momente li:last-child img{aspect-ratio:3/2}}
/* Kontakt: Bild zum Erstgespräch über dem direkten Draht (21.10.2026) */
.kontakt__bild{margin:1.8rem 0 0;border-radius:var(--radius);overflow:hidden}
.kontakt__bild img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:40% 30%}
.expedition__bild img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
/* Ansage Michael 24.09.: das Bild steht (sticky), der Text scrollt vorbei und nimmt es erst am Ende mit */
@media (min-width:900px){.expedition .expedition__bild{position:sticky;top:calc(70px + 2rem);align-self:start}}
.expedition__formate{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.7rem}
.expedition__formate li{display:grid;gap:.3rem;padding:1rem 1.1rem;border-radius:var(--radius);background:var(--c-kachel);border:1px solid var(--c-kante)}
.expedition__formate b{font-family:var(--font);font-size:1.15rem;font-weight:500;color:var(--c-gold)}
.expedition__formate span{color:var(--c-text-2);font-size:.96rem;line-height:1.55}
.termine{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.6rem}
.termine li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:baseline;padding:.9rem 1rem;border-radius:10px;background:var(--c-kachel);border:1px solid var(--c-kante)}
.termine b{font-family:var(--font);font-weight:500;font-size:1.2rem;color:var(--c-gold);white-space:nowrap}
.termine span{color:var(--c-text-2);font-size:.94rem}
/* Schmale Geräte: Termin und Text untereinander, der Monat darf umbrechen — sonst sprengt „September · November 2027“ die Liste (WebKit-Überlauf 421 px, Befund 23.09.) */
@media (max-width:520px){.termine li{grid-template-columns:minmax(0,1fr);gap:.15rem}.termine b{white-space:normal;line-height:1.2}}
.hinweis{margin-top:1.2rem;padding:.9rem 1.1rem;border-radius:10px;border:1px dashed rgba(202,158,103,.5);color:var(--c-text-2);font-size:.92rem}
.hinweis--aktuell{display:block;margin:1rem 0 1.4rem;border:1px solid rgba(202,158,103,.45);border-left:3px solid var(--c-gold);background:rgba(27,58,63,.55);color:var(--c-text);font-size:.95rem;line-height:1.55}.hinweis--aktuell strong{color:var(--c-gold-300);font-weight:500}.hinweis--aktuell a{color:var(--c-gold-300);text-decoration:underline;text-underline-offset:3px}.hinweis-inline{color:var(--c-gold-300);font-size:.92em;white-space:normal}   /* 29.10.: Aktualisierungshinweis BAFA-Laufzeit bis 31.12.2028 (Ansage Michael) */

/* Förderung: helle Sektion */
.sektion--hell{background:var(--c-hell);color:var(--c-hell-text)}   /* Hell-Modus: Warm White, Dark Teal für Headlines, Text #1a1714, Gold 800 als Schrift */
.sektion--hell .kicker{color:var(--c-gold-800)}
.sektion--hell .lead,.sektion--hell p{color:var(--c-hell-text)}   /* Fließtext #1a1714 (≥ 7:1); #5a5450 nur für Nebentext */
.sektion--hell h2,.sektion--hell h3{color:var(--c-teal)}
.zahlen{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:1rem}
@media (min-width:700px){.zahlen{grid-template-columns:repeat(3,minmax(0,1fr))}}
.zahlen li{padding:1.4rem 1.3rem;border-radius:var(--radius);background:#FFFFFF;border:1px solid var(--c-stein)}
.zahlen--teaser{margin-top:1.8rem}
.zahlen--teaser li:first-child b{color:var(--c-gold-800)}
.zahlen b{display:block;font-family:var(--font);font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1;color:var(--c-teal);font-weight:500}
.zahlen span{display:block;margin-top:.4rem;color:var(--c-hell-text);font-size:.94rem}
.zahlen small{display:block;margin-top:.5rem;font-size:.82rem;color:var(--c-gold-dunkel)}
.rechnung{margin-top:2.5rem;display:grid;gap:1rem}
@media (min-width:900px){.rechnung{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rechnung table{width:100%;border-collapse:collapse;background:rgba(255,255,255,.55);border-radius:var(--radius);overflow:hidden;border:1px solid rgba(27,58,63,.12)}
.rechnung caption{text-align:left;font-family:var(--font);font-size:1.15rem;font-weight:500;padding:0 0 .6rem;color:var(--c-teal)}
.rechnung td,.rechnung th{padding:.75rem 1rem;text-align:left;border-top:1px solid rgba(200,194,184,.6);font-weight:400;color:var(--c-hell-text)}
.rechnung td:last-child,.rechnung th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.rechnung tr.gesamt td{font-weight:600;color:var(--c-hell-text);background:rgba(202,158,103,.18)}
.voraus{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.6rem}
@media (min-width:700px){.voraus{grid-template-columns:repeat(2,minmax(0,1fr))}}
.voraus li{display:flex;gap:.8rem;align-items:flex-start;padding:.9rem 1rem;border-radius:10px;background:#FFFFFF;border:1px solid var(--c-stein);color:var(--c-hell-text)}
.voraus li::before{content:"";flex:none;width:.6rem;height:.6rem;margin-top:.5rem;border-radius:50%;background:var(--c-gold-dunkel)}
.voraus--dunkel li{background:var(--c-kachel);border-color:var(--c-kante);color:var(--c-text)}
.voraus--dunkel li::before{background:var(--c-gold)}
/* Förderseite: Ablauf als nummerierte Schritte; Über uns: Grundsätze (22.10.2026) */
.ablauf{list-style:none;counter-reset:schritt;margin:2.2rem 0 0;padding:0;display:grid;gap:.8rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.ablauf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.ablauf{grid-template-columns:repeat(5,minmax(0,1fr))}.ablauf li{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}.ablauf li::before{grid-row:1}}
.ablauf li{counter-increment:schritt;display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:.2rem 1rem;align-items:start;padding:1.1rem 1.2rem;border-radius:var(--radius);background:var(--c-kachel);border:1px solid var(--c-kante)}
.ablauf li::before{content:counter(schritt,decimal-leading-zero);grid-row:1/span 2;font:500 1.3rem/1 var(--font);color:var(--c-gold);padding-top:.15rem}
.ablauf b{font-family:var(--font);font-weight:500;font-size:1.1rem;color:var(--c-text)}
.ablauf span{color:var(--c-text-2);font-size:.96rem;line-height:1.55}
.grundsaetze{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:.8rem}
@media (min-width:900px){.grundsaetze{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grundsaetze li{display:grid;gap:.35rem;padding:1.2rem 1.3rem;border-radius:var(--radius);background:var(--c-kachel);border:1px solid var(--c-kante)}
.grundsaetze b{font-family:var(--font);font-weight:500;font-size:1.1rem;color:var(--c-gold)}
.grundsaetze span{color:var(--c-text-2);font-size:.96rem;line-height:1.55}
.menschen--gross .mensch{grid-template-columns:160px minmax(0,1fr)}
.menschen--gross .mensch img{width:160px;height:160px}
.menschen--gross .mensch p+p{margin-top:.6rem}
@media (max-width:599px){.menschen--gross .mensch{grid-template-columns:120px minmax(0,1fr)}.menschen--gross .mensch img{width:120px;height:120px}}
.sektion--hell .knopf{background:var(--c-teal);border-color:var(--c-teal);color:var(--c-warm)}
.sektion--hell .knopf:hover{background:var(--c-teal-2);box-shadow:none;color:var(--c-warm)}

/* Team */
.menschen{display:grid;gap:1.2rem;margin-top:2.5rem}
@media (min-width:700px){.menschen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mensch{display:grid;grid-template-columns:120px minmax(0,1fr);gap:1.2rem;align-items:start;padding:1.2rem;border-radius:var(--radius);background:var(--c-kachel);border:1px solid var(--c-kante)}
.mensch img{width:120px;height:120px;border-radius:50%;object-fit:cover;border:2px solid rgba(202,158,103,.6)}
.mensch h3{font-size:1.5rem}
.mensch__rolle{display:block;font-size:.86rem;color:var(--c-gold);margin:.15rem 0 .6rem;letter-spacing:.04em}
.mensch p{color:var(--c-text-2);font-size:.96rem}
@media (max-width:480px){.mensch{grid-template-columns:1fr}.mensch img{width:96px;height:96px}}

/* Fragen */
.fragen{margin-top:2rem;border-top:1px solid var(--c-linie)}
.fragen details{border-bottom:1px solid var(--c-linie)}
.fragen summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:56px;padding:1rem 0;font-family:var(--font);font-size:1.15rem;font-weight:500}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";flex:none;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--c-linie);color:var(--c-gold);font-family:var(--font)}
.fragen details[open] summary::after{content:"–"}
.fragen p{padding:0 0 1.2rem;color:var(--c-text-2);max-width:70ch}

/* Kontakt */
.kontakt{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem}
.kontakt>div,.kontakt>form{min-width:0}
@media (min-width:1000px){.kontakt{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}
.kontakt__direkt{margin-top:1.6rem;display:grid;gap:.3rem;font-size:1.05rem}
.kontakt__direkt a{display:inline-flex;align-items:center;min-height:44px;color:var(--c-text);border-bottom:1px solid var(--c-gold)}
.formular{display:grid;gap:.9rem;padding:1.4rem;border-radius:var(--radius);background:var(--c-kachel);border:1px solid var(--c-kante)}
.formular label{display:flex;flex-direction:column;gap:.3rem;font-size:.86rem;font-weight:600;color:var(--c-text-2)}
.formular input,.formular textarea,.formular select{min-height:48px;padding:.6rem .9rem;border-radius:10px;background:rgba(245,241,235,.07);border:1px solid rgba(245,241,235,.2);color:var(--c-text);font:400 1rem var(--font)}
.formular textarea{min-height:96px;resize:vertical}
.formular input:focus,.formular textarea:focus,.formular select:focus{outline:none;border-color:var(--c-gold);box-shadow:0 0 0 3px rgba(202,158,103,.25)}
.feld-reihe{display:grid;gap:.9rem}
@media (min-width:600px){.feld-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chips-titel{font-size:.86rem;font-weight:600;color:var(--c-text-2);margin-bottom:-.3rem}
.wahl{display:flex;flex-wrap:wrap;gap:.5rem}
.wahl label{flex-direction:row;align-items:center;gap:.5rem;min-height:44px;padding:.4rem .9rem;border-radius:999px;border:1px solid var(--c-linie);cursor:pointer;font-weight:400;color:var(--c-text)}
.wahl input{min-height:0;width:18px;height:18px;accent-color:var(--c-gold);margin:0;padding:0}
.wahl label:has(input:checked){border-color:var(--c-gold);background:rgba(202,158,103,.12)}
.haken{flex-direction:row !important;align-items:flex-start;gap:.7rem;font-weight:400 !important;line-height:1.45;min-height:44px}
.haken input{min-height:0;width:22px;height:22px;margin-top:.15rem;accent-color:var(--c-gold);flex:none}
.honig{position:absolute;left:-9999px;width:0;height:0;opacity:0}
.formular-hinweis{padding:1rem 1.2rem;border-radius:10px;background:rgba(202,158,103,.12);border:1px solid rgba(202,158,103,.5)}

/* Fuß */
.fuss{padding:3rem clamp(1rem,4vw,3rem) 2rem;background:var(--c-teal);border-top:1px solid var(--c-kante);font-size:.9rem;color:var(--c-text-2)}
/* Claim-Lockup L4 (Manual S. 04): Wortmarke (freigestellt, Breite W; Versalhöhe H = 0,206 W) + Claim in Outfit Medium, Versalien, +0,26 em,
   Größe 0,15 H (= 0,0441 W Schriftgröße), Abstand 0,42 H (= 8,65 % W), zentriert, Gold 500. Unter 13 px entfällt der Claim (nie verkleinern). */
.fuss__innen{max-width:var(--breite-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:1.8rem}
/* Fuß (Ansage Michael 22.10.2026): Wortmarke links in der Spalte, darunter Firma und Anschrift — kein großes Lockup mehr (Claim-Lockup nach Manual nur ≥ 421 px) */
.fuss__marke p{margin:0}
.fuss__logo{display:block;width:min(100%,220px);margin:0 0 1.1rem}
.fuss__logo img{display:block;width:100%;height:auto;opacity:1}
@media (min-width:900px){.fuss__innen{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:2rem}.fuss__logo{width:min(100%,260px)}}
.fuss h4{margin:0 0 .6rem;font:500 .75rem/1.4 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--c-gold)}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.fuss a{color:var(--c-text-2);display:inline-flex;align-items:center;min-height:32px}
.fuss a:hover{color:var(--c-text)}
.fuss__zeile{max-width:var(--breite-max);margin:2rem auto 0;padding-top:1.2rem;border-top:1px solid var(--c-kante);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}

/* Ratgeber, Rechtstexte */
.text{max-width:72ch}
.text h2{font-size:var(--fs-h3);margin:2.2rem 0 .7rem}
.text h3{font-size:1.25rem;margin:1.6rem 0 .5rem;font-family:var(--font)}
.text p,.text li{color:var(--c-text-2)}
.text p+p{margin-top:.9rem}
.text ul{padding-left:1.2rem}
/* Ratgeber-Karten (21.10.2026, Ansage Michael): Bildvorschau, dreispaltig ab 1024 px, ganze Karte klickbar — Vorlage _bausteine/neueste-karte.html */
.beitraege{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1rem,2vw,1.6rem)}
.beitraege li{min-width:0}
@media (min-width:640px){.beitraege{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.beitraege{grid-template-columns:repeat(3,minmax(0,1fr))}}
.karte{display:flex;flex-direction:column;height:100%;border-radius:var(--radius);overflow:hidden;background:var(--c-kachel);border:1px solid var(--c-kante);color:var(--c-text);
  transition:transform .3s var(--kurve),border-color .3s var(--kurve),box-shadow .3s var(--kurve)}
.karte:hover{color:var(--c-text);transform:translateY(-4px);border-color:rgba(202,158,103,.5);box-shadow:0 22px 50px rgba(0,0,0,.4)}
.karte:focus-visible{outline:2px solid var(--c-gold);outline-offset:3px}
.karte__bild{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--c-teal)}
.karte__bild img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--kurve)}
.karte:hover .karte__bild img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.karte,.karte__bild img{transition:none}.karte:hover{transform:none}.karte:hover .karte__bild img{transform:none}}
.karte__text{display:flex;flex-direction:column;gap:.5rem;padding:1.1rem 1.2rem 1.3rem}
.karte__meta{font-size:.8rem;letter-spacing:.06em;color:var(--c-gold)}
.karte__meta .kategorie{text-transform:uppercase;font-weight:600}
.karte h3{font-size:1.3rem;line-height:1.2;margin:0}
.karte p{color:var(--c-text-2);font-size:.95rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.leer{margin-top:2.5rem;padding:1.6rem;border-radius:var(--radius);border:1px dashed rgba(202,158,103,.5);color:var(--c-text-2)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important}}

/* Ratgeber-Teaser (25.09.) */
[data-neueste-leer][hidden]{display:none}
.ratgeber__alle{margin-top:1.6rem}
.ratgeber__alle a,.beitrag__zurueck a{color:var(--c-gold);text-decoration:underline;text-underline-offset:.2em}
.beitrag__zurueck{margin-top:2.5rem}
.kicker .kategorie{color:var(--c-text-2)}

/* 25.09.: WebKit-Befund — ein einzelnes Wort wie „Datenschutzerklärung“ (362 px) sprengte die H1 bei ≤ 375 px; schmale Bildschirme dürfen lange Wörter trennen */
@media (max-width:480px){h1,h2,h3{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}}

/* 27.09.: WebKit-Befund 280 px (Falt-Gerät zu, Matrix fold1-zu-hoch) — einspaltige Raster ohne Spaltenangabe nahmen die
   Min-Content-Breite der Eingabefelder (264 px) und schoben die Seite waagerecht hinaus */
.formular{grid-template-columns:minmax(0,1fr)}
@media (max-width:599px){.feld-reihe{grid-template-columns:minmax(0,1fr)}}
.formular>*,.feld-reihe>*{min-width:0}
.formular input,.formular textarea,.formular select{min-width:0;max-width:100%}
.wahl label{min-width:0;max-width:100%}
/* Grenze 319 px: nur Geräte unter dem kleinsten iPhone (Falt-Gerät zu); ab 320 px bleibt der Umbruch wie bisher */
@media (max-width:319px){
  body{overflow-wrap:anywhere}
  p,li,label,span,a,td,th,dd,dt{hyphens:auto;-webkit-hyphens:auto}
  .formular{padding:1rem}
}

/* Zwei Abschlüsse je Kontaktformular (01.10.2026): Anfrage senden · Direkt Termin buchen */
.formular__wege{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.formular__wege>*{min-width:0}
@media (max-width:480px){.formular__wege .knopf{width:100%}}