/* 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}}
body{margin:0;background:var(--c-carbon);color:var(--c-text);font:var(--fw-text) var(--fs-text)/1.6 var(--font);overflow-x:hidden}
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}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--fw-headline);line-height:1.08;margin:0;text-wrap:balance}
h1{font-size:var(--fs-hero)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
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 clamp(1rem,4vw,3rem);
  background:rgba(17,26,28,.72);-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:600;font-size:1rem;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-hell);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(12,20,22,.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-display);font-size:1.9rem;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}
@media (max-width:899px){.kopf__nav{display:none}.kopf__burger{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-klein);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-gold);margin-bottom:.9rem}
.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 */
.held{min-height:calc(100svh - 70px);display:grid;align-items:center;padding-top:clamp(2rem,6vh,4rem)}
.held__innen{max-width:var(--breite-max);margin:0 auto;width:100%;display:grid;gap:2.5rem}
@media (min-width:1024px){.held__innen{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}}
.held h1{font-size:var(--fs-riesig);line-height:.98;letter-spacing:-.01em}
.held h1 em{font-style:italic;font-weight:500;color:var(--c-stein)}
.held h1 strong{font-weight:600;color:var(--c-gold);text-shadow:0 0 50px rgba(202,158,103,.3)}
.held__wege{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.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}
.held__bild{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.held__bild img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.held__bild figcaption{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.2rem;background:linear-gradient(180deg,transparent,rgba(12,20,22,.9));font-size:.86rem;color:var(--c-text-2)}
.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-linie);background:rgba(245,241,235,.04);font-size:var(--fs-klein);font-weight:600}

/* 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-display);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-display);font-style:italic;font-size:1.25rem;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-display);font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.25;font-style:italic;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;gap:2rem;align-items:start}
.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:rgba(27,58,63,.45);border:1px solid var(--c-linie);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-display);font-weight:600;font-size:1.25rem;line-height:1.2}
.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:rgba(27,58,63,.45);border:1px solid var(--c-linie)}
.schritte li::before{counter-increment:s;content:"0" counter(s);display:block;font-family:var(--font-display);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 */
.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:rgba(27,58,63,.5);border:1px solid var(--c-linie)}
.tafel--haupt{border-color:rgba(202,158,103,.55)}
.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:.72rem;font-weight:600;letter-spacing:.06em;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-display);font-style:italic;font-size:1.15rem;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.3rem;font-family:var(--font-display);font-weight:600}
.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}
.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:rgba(27,58,63,.45);border:1px solid var(--c-linie)}
.expedition__formate b{font-family:var(--font-display);font-size:1.35rem;font-weight:600;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:rgba(27,58,63,.45);border:1px solid var(--c-linie)}
.termine b{font-family:var(--font-display);font-size:1.4rem;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 „Februar · 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}

/* Förderung: helle Sektion */
.sektion--hell{background:var(--c-teal-hell);color:var(--c-dunkel-text)}
.sektion--hell .kicker{color:var(--c-gold-dunkel)}
.sektion--hell .lead,.sektion--hell p{color:var(--c-dunkel-text-2)}
.sektion--hell h2,.sektion--hell h3{color:var(--c-dunkel-text)}
.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:rgba(255,255,255,.55);border:1px solid rgba(27,58,63,.12)}
.zahlen b{display:block;font-family:var(--font-display);font-size:clamp(2.6rem,5vw,4rem);line-height:1;color:var(--c-teal);font-weight:600}
.zahlen span{display:block;margin-top:.4rem;color:var(--c-dunkel-text-2);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-display);font-size:1.3rem;font-weight:600;padding:0 0 .6rem;color:var(--c-dunkel-text)}
.rechnung td,.rechnung th{padding:.75rem 1rem;text-align:left;border-top:1px solid rgba(27,58,63,.12);font-weight:400;color:var(--c-dunkel-text-2)}
.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-dunkel-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:rgba(255,255,255,.55);border:1px solid rgba(27,58,63,.12);color:var(--c-dunkel-text)}
.voraus li::before{content:"";flex:none;width:.6rem;height:.6rem;margin-top:.5rem;border-radius:50%;background:var(--c-gold-dunkel)}
.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:rgba(27,58,63,.45);border:1px solid var(--c-linie)}
.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-display);font-size:1.35rem;font-weight:600}
.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;gap:2rem}
@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:rgba(27,58,63,.5);border:1px solid var(--c-linie)}
.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-nacht);border-top:1px solid var(--c-linie);font-size:.9rem;color:var(--c-text-2)}
.fuss__innen{max-width:var(--breite-max);margin:0 auto;display:grid;gap:1.5rem}
@media (min-width:900px){.fuss__innen{grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr))}}
.fuss img{width:110px;height:auto;display:block;margin-bottom:.8rem;opacity:.9}
.fuss h4{margin:0 0 .6rem;font:600 .8rem/1.4 var(--font);letter-spacing:.1em;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-linie);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}
.beitraege{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:1rem}
@media (min-width:800px){.beitraege{grid-template-columns:repeat(2,minmax(0,1fr))}}
.beitraege li{padding:1.3rem;border-radius:var(--radius);background:rgba(27,58,63,.45);border:1px solid var(--c-linie)}
.beitraege time{font-size:.82rem;color:var(--c-gold);letter-spacing:.06em}
.beitraege h3{margin:.4rem 0 .5rem;font-size:1.45rem}
.beitraege p{color:var(--c-text-2);font-size:.95rem}
.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}}