/* ============================================================
   BootKamp Katja · Seitenstile nach Figma
   Wird nach bootkamp.css geladen. bootkamp.css bleibt unverändert und liefert
   Schriften, Farben, Abstände und Bewegung als Variablen. Die Werte für Größen
   und Abstände der Seiten stammen 1:1 aus dem freigegebenen Figma Stand
   (Seite 01 Freigegeben, Startseite Rechner 1920 und Handy 390).

   Umbruch: ab 1024 Rechnerfassung, darunter Handyfassung.
   ============================================================ */

/* ---------- Grundlagen ---------- */
body.bk{margin:0;background:var(--bk-hell)}
/* Rücksetzung. bootkamp.css setzt Außenabstände an p, ul und ol mit der Spezifität (0,1,1).
   Deshalb greift die Rücksetzung dort genauso stark, nimmt aber nur weg, was bootkamp.css setzt.
   Alles andere fasst :where an, damit die Klassen dieser Datei immer gewinnen. */
.bk p{margin:0}
.bk ul,.bk ol{margin:0;padding-left:0;list-style:none}
:where(.bk) :where(h1,h2,h3,li,figure,blockquote,address){margin:0;padding:0}
:where(.bk) :where(h1,h2,h3){font-weight:700}
:where(.bk) address{font-style:normal}
:where(.bk) a{color:inherit;text-decoration:none}

.bk a:focus-visible,.bk button:focus-visible{outline:var(--fokus-ring) solid var(--bk-anthrazit);outline-offset:var(--fokus-versatz)}
.fg-dunkel a:focus-visible,.fg-dunkel button:focus-visible,
.fg-kopf a:focus-visible,.fg-kopf button:focus-visible,
.fg-fuss a:focus-visible{outline-color:var(--bk-hell)}

/* Inhaltsbahn: 1200 Inhalt, 40 Außenrand */
.fg-bahn{width:100%;max-width:calc(var(--breite-max) + 2 * var(--rand));margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}
@media (max-width:767px){.fg-bahn{padding-left:20px;padding-right:20px}}

/* ---------- Bausteine ---------- */
.fg-kicker{font:700 14px/17px var(--font);letter-spacing:1.4px;color:var(--bk-textorange)}
.fg-kicker--orange{color:var(--bk-orange)}
.fg-kicker--grau{color:#6e6b6a}
.fg-kicker--hell{color:var(--bk-hell)}

.fg-h2{font:700 var(--fs-ueberschrift)/1.18 var(--font-cond);color:var(--bk-anthrazit)}
.fg-h2--eng{line-height:44px}
.fg-h2--hell{color:var(--bk-hell)}
.fg-lead{font:400 17px/29px var(--font);color:var(--bk-anthrazit)}
.fg-lead--640{max-width:640px}
.fg-lead--660{max-width:660px}

.fg-abschnittskopf{display:flex;flex-direction:column;gap:10px}

/* Knöpfe. Die Zeilenhöhe steht fest auf 20, dann stimmen die Höhen mit Figma. */
.fg-knopf{display:inline-flex;align-items:flex-start;box-sizing:border-box;
  padding:14px 24px;border:0;background:transparent;cursor:pointer;white-space:nowrap;
  font:700 17px/20px var(--font-cond);letter-spacing:1.36px;text-transform:none;
  transition:background-color var(--dauer-schnell) var(--kurve),
             color var(--dauer-schnell) var(--kurve),
             border-color var(--dauer-schnell) var(--kurve)}
.fg-knopf--haupt{background:var(--bk-orange);color:var(--bk-anthrazit)}
.fg-knopf--haupt:hover{background:var(--bk-anthrazit);color:#fff}
.fg-dunkel .fg-knopf--haupt:hover,.fg-kopf .fg-knopf--haupt:hover{background:var(--bk-hell);color:var(--bk-anthrazit)}
/* Helle Kaesten in dunklen Abschnitten: dort wieder dunkler Hover, sonst weiss auf weiss */
.fg-dunkel .fg-ort .fg-knopf--haupt:hover,.fg-dunkel .fg-buchung .fg-knopf--haupt:hover{background:var(--bk-anthrazit);color:#fff}
.fg-knopf--hell-rand{padding:15px 28px;border:2px solid var(--bk-hell);color:var(--bk-hell)}
.fg-knopf--hell-rand:hover{background:var(--bk-hell);color:var(--bk-anthrazit)}
.fg-knopf--dunkel{background:var(--bk-anthrazit);color:var(--bk-hell)}
.fg-knopf--dunkel:hover{background:var(--bk-orange);color:var(--bk-anthrazit)}
.fg-knopf--rand{border:2px solid var(--bk-anthrazit);color:var(--bk-anthrazit)}
.fg-knopf--rand:hover{background:var(--bk-anthrazit);color:var(--bk-hell)}
.fg-knopf--rand-innen{padding:12px 22px}
.fg-knopf--rand-innen{border:2px solid var(--bk-anthrazit);color:var(--bk-anthrazit)}
.fg-knopf--rand-innen:hover{background:var(--bk-anthrazit);color:var(--bk-hell)}

/* Klickfläche mindestens 44 hoch, ohne das Layout zu verschieben */
.fg-treffer{position:relative}
.fg-treffer::after{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}

/* ---------- 01 Kopf ---------- */
/* Der Kopf bleibt beim Scrollen oben stehen.
   sticky statt fixed: der Platz bleibt erhalten, nichts rutscht darunter.
   scroll-padding-top sorgt dafuer, dass Sprungmarken nicht unter dem
   Kopf landen. */
.fg-kopf{position:sticky;top:0;z-index:50;background:var(--bk-anthrazit);height:84px;
  transition:box-shadow .2s ease}
.fg-kopf.ist-gescrollt{box-shadow:0 2px 18px rgba(0,0,0,.35)}
html{scroll-padding-top:84px}
.fg-kopf__innen{height:100%;display:flex;align-items:center;justify-content:space-between}
.fg-kopf__logo{display:block;flex:none;width:96px;height:42px}
.fg-kopf__logo img{display:block;width:96px;height:42px}
.fg-menue ul{display:flex;gap:28px}
.fg-menue a{position:relative;display:block;font:500 17px/20px var(--font);color:var(--bk-hell);white-space:nowrap;
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:8px;
  transition:text-decoration-color var(--dauer-schnell) var(--kurve)}
.fg-menue a::after{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}
.fg-menue a:hover,.fg-menue a[aria-current="page"]{text-decoration-color:var(--bk-orange)}
.fg-knopf--kopf{background:var(--bk-orange);color:var(--bk-anthrazit);flex:none}
.fg-knopf--kopf:hover{background:var(--bk-hell)}
.fg-knopf__zusatz{white-space:pre}
.fg-burger{display:none}

/* ---------- 02 Anreisser ---------- */
.fg-hero{position:relative;min-height:760px;background:var(--flaeche-fuss);overflow:hidden}
.fg-hero__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fg-hero__schleier{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(37,35,36,.94) 0%,rgba(37,35,36,.8) 70%,rgba(37,35,36,.45) 100%)}
.fg-hero__inhalt{position:relative;padding-top:190px;padding-bottom:60px}
.fg-hero__spalte{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:820px}
.fg-hero__h1{font:700 var(--fs-signal)/1.02 var(--font-cond);color:var(--bk-hell)}
.fg-hero__vorspann{font:400 21px/34px var(--font);color:rgba(252,250,247,.86)}
.fg-hero__knoepfe{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.fg-hero__knoepfe .fg-knopf{height:54px;padding:17px 30px}
.fg-hero__knoepfe .fg-knopf--hell-rand{padding:15px 28px}
.fg-hero__fakten{display:flex;flex-wrap:wrap;gap:12px 40px;padding-top:22px}
.fg-hero__fakten li{display:flex;align-items:center;gap:10px;font:500 14px/17px var(--font);color:rgba(252,250,247,.8)}
.fg-hero__fakten svg{flex:none;display:block;width:7px;height:7px}

/* ---------- 03 Merkmalband ---------- */
.fg-merkmale{background:var(--bk-orange);min-height:152px;display:flex;align-items:center}
.fg-merkmale .fg-bahn{padding-top:42px;padding-bottom:42px}
.fg-merkmale__liste{display:flex}
.fg-merkmal{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:14px;padding-right:28px}
.fg-merkmal svg{flex:none;display:block;width:26px;height:26px}
.fg-merkmal__text{display:flex;flex-direction:column;gap:3px;min-width:0;color:var(--bk-anthrazit)}
.fg-merkmal__titel{font:700 21px/25px var(--font-cond)}
.fg-merkmal__zeile{font:400 14px/20px var(--font)}

/* ---------- Abschnittsflächen ---------- */
.fg-abschnitt{position:relative;padding-top:88px;padding-bottom:88px}
.fg-abschnitt--hell{background:var(--bk-hell)}
.fg-abschnitt--dunkel{background:var(--bk-anthrazit);color:var(--bk-hell)}
.fg-abschnitt--gruen{background:var(--bk-gruen);color:var(--bk-hell)}

/* Gemalte Kante: oben im unteren Abschnitt, Farbe der Fläche darüber. */
.fg-kante{--f:var(--bk-hell);position:absolute;top:-1px;left:0;width:100%;height:27px;pointer-events:none;
  background-repeat:no-repeat;background-size:100% 26px,100% 3px;background-position:left bottom,left top}
/* Der eine Pixel nach oben und der Streifen darunter füllen die Haarlinie, die bei Bruchteilen
   von Pixeln (Zoom, Skalierung) zwischen zwei Abschnitten sonst hell oder dunkel durchscheint. */
.fg-kante--erstes-training{background-image:url(../kante/startseite-erstes-training.svg),linear-gradient(var(--f),var(--f))}
.fg-kante--warum-draussen{background-image:url(../kante/startseite-warum-draussen.svg),linear-gradient(var(--f),var(--f))}
.fg-kante--stimme{background-image:url(../kante/startseite-stimme.svg),linear-gradient(var(--f),var(--f))}
.fg-kante--abschluss{background-image:url(../kante/startseite-abschluss.svg),linear-gradient(var(--f),var(--f))}

/* ---------- 04 Unsere Kurse ---------- */
.fg-kurse-kopf{margin-bottom:40px}
.fg-kurse{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.fg-kurs{display:flex;flex-direction:column;min-height:659px;background:#fff;min-width:0}
.fg-kurs--dunkel{background:var(--bk-anthrazit)}
.fg-kurs__foto{flex:none;height:300px;overflow:hidden}
.fg-kurs__foto img{display:block;width:100%;height:100%;object-fit:cover}
/* Feste Abstaende, nur der Fuss rutscht nach unten. Mit space-between sahen zwei Kacheln je nach Textmenge verschieden aus */
.fg-kurs__inhalt{flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:14px;padding:32px 36px 36px}
.fg-kurs__inhalt .fg-kicker{margin-bottom:-6px}
.fg-kurs__titel{font:700 32px/38px var(--font-cond);color:var(--bk-anthrazit)}
.fg-kurs__text{font:400 17px/29px var(--font);color:var(--bk-anthrazit)}
.fg-kurs__punkte{display:flex;flex-direction:column;gap:8px;padding-top:6px}
.fg-kurs__punkte li{display:flex;align-items:center;gap:10px;font:600 14px/17px var(--font);color:var(--bk-anthrazit)}
.fg-kurs__punkte li::before{content:"";flex:none;width:14px;height:2px;background:var(--bk-textorange)}
.fg-kurs__fuss{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;margin-top:auto}
.fg-kurs__preis{font:700 21px/25px var(--font-cond);color:var(--bk-anthrazit);white-space:nowrap}
.fg-kurs__preiszusatz{display:block;font:400 14px/18px var(--font);opacity:.72;white-space:normal}
.fg-kurs--dunkel .fg-kicker{color:var(--bk-orange)}
.fg-kurs--dunkel .fg-kurs__titel{color:var(--bk-hell)}
.fg-kurs--dunkel .fg-kurs__text{color:rgba(252,250,247,.86)}
.fg-kurs--dunkel .fg-kurs__punkte li{color:var(--bk-hell)}
.fg-kurs--dunkel .fg-kurs__punkte li::before{background:var(--bk-orange)}
.fg-kurs--dunkel .fg-kurs__preis{color:var(--bk-hell)}

/* ---------- 05 Erstes Training ---------- */
.fg-erst{padding-top:96px;padding-bottom:96px;background:var(--bk-gruen);color:var(--bk-hell)}
.fg-erst__text{display:flex;flex-direction:column;gap:14px;width:600px;max-width:calc(100% - 542px)}
.fg-erst__text .fg-kicker{color:var(--bk-hell)}
.fg-erst__text .fg-h2{color:var(--bk-hell);line-height:44px}
.fg-erst__text p:last-child{font:400 17px/30px var(--font);color:var(--bk-hell)}
/* Der Kasten hängt 32 über die Oberkante und sitzt bündig am rechten Rand der Bahn. */
.fg-ablauf{position:absolute;z-index:2;top:-32px;right:max(var(--rand),calc((100% - var(--breite-max)) / 2));width:470px;box-sizing:border-box;
  background:var(--bk-hell);border:1px solid #1d763d;border-radius:4px;
  display:flex;flex-direction:column;gap:18px;padding:51px 35px 33px;color:var(--bk-anthrazit)}
.fg-ablauf__liste{display:flex;flex-direction:column;gap:18px}
.fg-ablauf li{display:flex;align-items:center;gap:14px}
.fg-ablauf__zahl{flex:none;font:700 32px/38px var(--font-cond);color:var(--bk-textorange)}
.fg-ablauf__zeile{flex:1;min-width:0;font:400 17px/26px var(--font)}
.fg-ablauf .fg-knopf{display:flex;justify-content:center;width:100%;padding:16px 28px}

/* ---------- 05b Mannschaften und Gruppen ---------- */
.fg-anfrage-kopf{margin-bottom:36px}
.fg-anfragen{display:flex;gap:24px;align-items:stretch}
.fg-anfrage{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px;box-sizing:border-box;
  background:var(--bk-hell);border:1px solid var(--akzent);border-top-width:6px;padding:34px 36px;
  --akzent:var(--bk-gruen)}
.fg-anfrage--orange{--akzent:var(--bk-orange)}
.fg-anfrage__titel{font:700 32px/38px var(--font-cond);color:var(--bk-anthrazit)}
.fg-anfrage__text{font:400 17px/29px var(--font);color:var(--bk-anthrazit)}
.fg-anfrage__fuss{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;margin-top:auto}
.fg-anfrage__preis{display:flex;flex-direction:column;gap:3px;white-space:nowrap}
.fg-anfrage__preis strong{font:700 21px/25px var(--font-cond);color:var(--bk-anthrazit)}
.fg-anfrage__preis span{font:400 14px/17px var(--font);color:#6e6b6a}

/* ---------- 06 Warum draußen ---------- */
.fg-warum .fg-abschnittskopf{margin-bottom:48px}
.fg-gruende{display:flex;gap:32px;align-items:flex-start}
.fg-grund{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:12px;border-top:3px solid var(--bk-orange);padding-top:19px}
.fg-grund__nr{font:700 14px/17px var(--font);letter-spacing:1.4px;color:var(--bk-orange)}
.fg-grund__titel{font:700 26px/31px var(--font-cond);color:var(--bk-hell)}
.fg-grund__text{font:400 17px/29px var(--font);color:rgba(252,250,247,.78)}

/* ---------- 07 Preise ---------- */
.fg-preise-kopf{margin-bottom:40px}
/* Bis zu vier Bloecke, bei Platzmangel brechen sie um */
.fg-preisbloecke{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}
.fg-preisblock{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:16px;box-sizing:border-box;
  background:#fff;border:1px solid var(--rahmen);padding:29px 31px}
.fg-preisblock--dunkel{background:var(--bk-anthrazit);border-color:var(--bk-anthrazit)}
.fg-preisblock__titel{font:700 26px/31px var(--font-cond);color:var(--bk-anthrazit)}
.fg-preisblock__zeilen{padding-top:18px}
.fg-preisblock__zeile{box-sizing:border-box;height:49px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--rahmen);white-space:nowrap}
.fg-preisblock__zeile span{font:400 17px/20px var(--font);color:rgba(54,52,53,.86)}
.fg-preisblock__zeile strong{font:700 21px/25px var(--font-cond);color:var(--bk-anthrazit)}
.fg-preisblock__fuss{font:600 14px/17px var(--font);color:var(--bk-textorange)}
.fg-preisblock--dunkel .fg-preisblock__titel{color:var(--bk-hell)}
.fg-preisblock--dunkel .fg-preisblock__zeile{border-bottom-color:rgba(255,255,255,.16)}
.fg-preisblock--dunkel .fg-preisblock__zeile span{color:rgba(252,250,247,.86)}
.fg-preisblock--dunkel .fg-preisblock__zeile strong{color:var(--bk-orange)}
.fg-preisblock--dunkel .fg-preisblock__fuss{color:var(--bk-orange)}

/* ---------- 08 Stimme ---------- */
.fg-stimme{position:relative;background:var(--bk-orange);color:var(--bk-anthrazit);padding-top:84px;padding-bottom:84px}
.fg-stimme__zitat{margin-left:376px;max-width:824px;display:flex;flex-direction:column;gap:20px}
.fg-stimme__zitat p{font:500 26px/38px var(--font);color:var(--bk-anthrazit)}
.fg-stimme__zitat figcaption{font:700 14px/17px var(--font);letter-spacing:1.4px}
/* Das Foto hängt 160 in den Abschnitt darunter. */
.fg-stimme__foto{position:absolute;z-index:2;top:121px;left:max(var(--rand),calc((100% - var(--breite-max)) / 2));
  width:320px;height:320px;overflow:hidden;background:#fff}
.fg-stimme__foto img{display:block;width:100%;height:100%;object-fit:cover}
/* Der weiße Rand liegt wie in Figma innen über dem Bild, das Bild füllt die ganzen 320. */
.fg-stimme__foto::after{content:"";position:absolute;inset:0;border:10px solid #fff;pointer-events:none}

/* ---------- 09 Einblicke ---------- */
.fg-einblicke{padding-top:224px}
.fg-einblicke__kopf{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:32px}
.fg-einblicke__titel{display:flex;flex-direction:column;gap:8px}
.fg-galerie{display:flex;gap:16px;align-items:flex-start}
.fg-galerie li{flex:1 1 0;min-width:0}
.fg-galerie img{display:block;width:100%;object-fit:cover}
.fg-galerie li:nth-child(1) img{height:420px}
.fg-galerie li:nth-child(2){padding-top:70px}
.fg-galerie li:nth-child(2) img{height:320px}
.fg-galerie li:nth-child(3) img{height:460px}
.fg-galerie li:nth-child(4){padding-top:40px}
.fg-galerie li:nth-child(4) img{height:340px}

/* ---------- 10 Häufige Fragen ---------- */
.fg-faq .fg-bahn{display:flex;gap:72px;align-items:flex-start}
.fg-faq__titel{flex:none;width:380px;display:flex;flex-direction:column;gap:14px}
.fg-faq__liste{flex:1 1 0;min-width:0}
.fg-faq__punkt{border-bottom:1px solid var(--rahmen)}
.fg-faq__frage{font-size:inherit}
.fg-faq__knopf{width:100%;min-height:74px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 0 21px;background:transparent;border:0;cursor:pointer;text-align:left;
  font:600 21px/25px var(--font);color:var(--bk-anthrazit)}
.fg-faq__knopf:hover .fg-faq__text{color:var(--bk-textorange)}
.fg-faq__plus{flex:none;font:400 26px/31px var(--font);color:var(--bk-textorange)}
.fg-faq__antwort{padding:0 0 24px;max-width:62ch;font:400 17px/29px var(--font);color:var(--bk-anthrazit)}
.fg-faq__antwort[hidden]{display:none}

/* ---------- 11 Abschluss ---------- */
.fg-abschluss{padding-top:92px;padding-bottom:92px;text-align:center}
.fg-abschluss .fg-bahn{display:flex;flex-direction:column;align-items:center;gap:22px}
.fg-abschluss__h2{font:700 var(--fs-signal)/1.14 var(--font-cond);color:var(--bk-hell)}
.fg-abschluss__zeile{font:400 21px/36px var(--font);color:rgba(252,250,247,.86)}
.fg-abschluss .fg-knopf{padding:18px 34px}

/* ---------- 11b Partnerband ---------- */
/* Urhebervermerk am Ende des Impressums */
.fg-urheber{border-top:1px solid var(--rahmen);padding-top:40px;margin-top:16px;gap:16px}
.fg-urheber__logo{display:block;width:240px}
.fg-urheber__logo img{display:block;width:100%;height:auto}

.fg-preise-zusatz{margin-top:28px;max-width:660px;font:400 17px/29px var(--font);color:#4a4749}
.fg-seite-dunkel .fg-preise-zusatz{color:#D8D5D2}

/* Haarlinie ueber dem Partnerband. Trennt es von dem, was darueber steht,
   und gehoert damit optisch zum Fussbereich. Gilt auf jeder Seite. */
.fg-partner{background:var(--bk-hell);border-top:1px solid var(--rahmen);
  padding-top:56px;padding-bottom:56px}
/* Steht darueber eine dunkle Flaeche, waere die helle Linie ein Fremdkoerper. */
.fg-abschnitt--dunkel + .fg-partner,
.fg-sektion--dunkel + .fg-partner,
.fg-abschluss + .fg-partner{border-top:0}
.fg-partner .fg-kicker{margin-bottom:24px}
.fg-partner__liste{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
/* Partnerkacheln. Ruhig im Normalzustand, beim Ueberfahren hebt sich die
   Kachel leicht an und der Rahmen wird orange. Nur Rahmen, Schatten und
   Verschiebung animieren, das kostet kein Neuzeichnen der Seite. */
.fg-partner__eintrag{width:260px;height:100px;box-sizing:border-box;background:#fff;
  border:1px solid var(--rahmen);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.fg-partner__eintrag a{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
/* Logos immer farbig, Katjas Wunsch vom 08.10.2026. Vorher grau bis zum Darueberfahren */
.fg-partner__eintrag img{display:block;width:150px;height:60px;object-fit:contain}
.fg-partner__eintrag:hover,
.fg-partner__eintrag:focus-within{border-color:var(--bk-orange);
  box-shadow:0 6px 18px rgba(54,52,53,.12);transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){
  .fg-partner__eintrag{transition:border-color .2s ease}
  .fg-partner__eintrag:hover,.fg-partner__eintrag:focus-within{transform:none;box-shadow:none}
}
.fg-partner__unter{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 12 Fußbereich ---------- */
.fg-fuss{background:var(--flaeche-fuss);padding-top:72px;padding-bottom:40px}
.fg-fuss__oben{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:56px}
.fg-fuss__marke{flex:none;width:320px;display:flex;flex-direction:column;gap:18px}
.fg-fuss__marke > a{display:block;width:120px;height:52px}
.fg-fuss__marke img{display:block;width:120px;height:52px}
.fg-fuss__adresse{font:400 14px/24px var(--font);color:rgba(252,250,247,.7)}
.fg-fuss__kontakt{display:flex;flex-direction:column;gap:4px;font:600 17px/20px var(--font);color:var(--bk-hell)}
.fg-fuss__kontakt a{position:relative;display:block}
.fg-fuss__adresse{font:400 17px/20px var(--font);color:rgba(252,250,247,.82);font-style:normal}
.fg-fuss__sozial{display:flex;gap:18px;margin-top:4px;font:400 17px/20px var(--font)}
.fg-fuss__sozial a{position:relative;color:rgba(252,250,247,.82)}
.fg-fuss__sozial a::after{content:"";position:absolute;left:-4px;right:-4px;top:-8px;bottom:-8px}
.fg-fuss__sozial a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.fg-fuss__spalte{display:flex;flex-direction:column;gap:12px}
.fg-fuss__spalte ul{display:flex;flex-direction:column;gap:12px}
.fg-fuss__titel{font:700 14px/17px var(--font);letter-spacing:1.4px;color:var(--bk-orange)}
.fg-fuss__spalte a{position:relative;display:block;font:400 17px/20px var(--font);color:rgba(252,250,247,.82);white-space:nowrap}
.fg-fuss__spalte a::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}
.fg-fuss__spalte a:hover,.fg-fuss__kontakt a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.fg-fuss__unten{font:400 14px/17px var(--font);color:rgba(252,250,247,.5)}

/* ============================================================
   Handyfassung, bis 1023. Werte aus Figma, Rahmen Startseite · Handy 390.
   ============================================================ */
@media (max-width:1023px){
  /* Kopf */
  .fg-kopf{height:72px}
  .fg-kopf__logo,.fg-kopf__logo img{width:78px;height:34px}
  .fg-knopf--kopf{padding:14px 16px}
  .fg-knopf--kopf .fg-knopf__zusatz{display:none}
  .fg-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;flex:none;
    width:44px;height:44px;margin:0 -10px;padding:0 10px;background:transparent;border:0;cursor:pointer}
  .fg-burger span{display:block;width:24px;height:2px;background:var(--bk-hell)}
  .fg-menue{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bk-anthrazit);
    border-top:1px solid rgba(252,250,247,.18);padding:8px var(--rand) 24px}
  .fg-kopf.ist-offen .fg-menue{display:block}
  .fg-menue ul{flex-direction:column;gap:0}
  .fg-menue li{border-bottom:1px solid rgba(252,250,247,.18)}
  .fg-menue a{padding:12px 0;font-size:17px;text-underline-offset:6px}
  .fg-menue a::after{top:0;bottom:0}

  /* Anreisser */
  .fg-hero{min-height:725px}
  .fg-hero__schleier{background:linear-gradient(to right,rgba(37,35,36,.94) 0%,rgba(37,35,36,.82) 50%,rgba(37,35,36,.72) 100%)}
  html{scroll-padding-top:72px}
  .fg-hero__inhalt{padding-top:96px;padding-bottom:40px}
  .fg-hero__h1{font-size:var(--fs-ueberschrift);line-height:1.06}
  .fg-hero__fakten{flex-direction:column;align-self:stretch;gap:12px}

  /* Merkmalband */
  .fg-merkmale{min-height:0}
  .fg-merkmale .fg-bahn{padding-top:32px;padding-bottom:32px}
  .fg-merkmale__liste{flex-direction:column;gap:18px}
  .fg-merkmal{align-items:flex-start;padding-right:0}
  .fg-merkmal__zeile{max-width:none}

  /* Flächen */
  .fg-abschnitt{padding-top:56px;padding-bottom:56px}
  .fg-h2{font-size:26px;line-height:31px}
  .fg-h2--eng{font-size:26px;line-height:27px}
  .fg-lead--640,.fg-lead--660{max-width:none}
  .fg-kante{height:17px;background-size:100% 16px,100% 3px}
  .fg-kante--erstes-training{background-image:url(../kante/startseite-erstes-training-mobil.svg),linear-gradient(var(--f),var(--f))}
  .fg-kante--warum-draussen{background-image:url(../kante/startseite-warum-draussen-mobil.svg),linear-gradient(var(--f),var(--f))}
  .fg-kante--stimme{background-image:url(../kante/startseite-stimme-mobil.svg),linear-gradient(var(--f),var(--f))}
  .fg-kante--abschluss{background-image:url(../kante/startseite-abschluss-mobil.svg),linear-gradient(var(--f),var(--f))}

  /* Kurse */
  .fg-kurse-kopf{margin-bottom:40px}
  .fg-kurse{grid-template-columns:1fr;gap:16px}
  .fg-kurs{min-height:0}
  .fg-kurs__inhalt{flex:none}
  .fg-kurs__inhalt .fg-kicker{margin-bottom:-9px}
  .fg-kurs__titel{font-size:26px;line-height:31px}
  .fg-kurs__fuss{flex-direction:column;align-items:flex-start;gap:16px}
  .fg-kurs__preis{white-space:normal}

  /* Erstes Training */
  .fg-erst{padding-top:56px;padding-bottom:56px}
  .fg-erst__text{width:100%;max-width:none}
  .fg-ablauf{position:static;width:auto;margin:24px var(--rand) 0;padding-top:27px}
  .fg-ablauf__zahl{font-size:26px;line-height:31px}
  .fg-erst__text .fg-h2{line-height:27px}

  /* Mannschaften */
  .fg-anfrage-kopf{margin-bottom:36px}
  .fg-anfragen{flex-direction:column;gap:16px}
  .fg-anfrage__titel{font-size:26px;line-height:31px}
  .fg-anfrage__fuss{flex-direction:column;align-items:flex-start;gap:0;margin-top:0}
  .fg-anfrage__preis{white-space:normal}

  /* Warum draußen */
  .fg-warum .fg-abschnittskopf{margin-bottom:48px}
  .fg-gruende{flex-direction:column;gap:12px;align-items:stretch}
  .fg-grund__titel{font-size:21px;line-height:25px}

  /* Preise */
  .fg-preisbloecke{flex-direction:column;gap:16px}
  .fg-preisblock__titel{font-size:21px;line-height:25px}
  .fg-preisblock__zeile span{flex:1;min-width:0;white-space:normal}

  /* Stimme */
  .fg-stimme{padding-top:48px;padding-bottom:48px}
  .fg-stimme .fg-bahn{display:flex;flex-direction:column;gap:20px}
  .fg-stimme__foto{position:static;width:100%;height:220px}
  .fg-stimme__foto::after{display:none}
  .fg-stimme__zitat{margin-left:0}
  .fg-stimme__zitat p{font-size:21px;line-height:30px}

  /* Einblicke */
  .fg-einblicke{padding-top:56px}
  .fg-galerie{flex-direction:column;gap:16px;align-items:stretch}
  .fg-galerie li:nth-child(n){padding-top:0}
  .fg-galerie li:nth-child(n) img{height:260px}

  /* Fragen */
  .fg-faq .fg-bahn{flex-direction:column;gap:24px;align-items:stretch}
  .fg-faq__titel{width:auto}
  .fg-faq__knopf{min-height:0;padding:22px 0 21px;gap:0}
  .fg-faq__plus{font-size:21px;line-height:25px}

  /* Abschluss */
  .fg-abschluss{padding-top:56px;padding-bottom:56px}
  .fg-abschluss__h2{font-size:32px;line-height:38px}
  .fg-abschluss__zeile{font-size:17px;line-height:29px}

  /* Partnerband */
  .fg-partner{padding-top:56px;padding-bottom:56px}
  .fg-partner__liste{flex-direction:column;align-items:stretch;gap:12px}
  .fg-partner__eintrag{width:auto;height:auto;padding:19px 23px}
  .fg-partner__eintrag a{gap:12px;height:auto}
  .fg-partner__unter{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;
    font:400 14px/17px var(--font);color:rgba(54,52,53,.75);text-align:center}

  /* Fuß */
  .fg-fuss{padding-top:56px}
  .fg-fuss__oben{flex-direction:column;align-items:stretch;justify-content:flex-start}
  .fg-fuss__marke{width:auto;gap:10px}
  .fg-fuss__spalte{gap:10px}
  .fg-fuss__spalte ul{gap:10px}
  .fg-fuss__spalte a::after{top:-5px;bottom:-5px}
}
@media (max-width:767px){.fg-ablauf{margin-left:20px;margin-right:20px}}

/* Knöpfe laufen nur auf echten Handybreiten (bis 440) über die ganze Breite, wie in Figma bei 390.
   Darüber behalten sie ihre Größe. */
@media (max-width:440px){
  .fg-hero__knoepfe{flex-direction:column;align-self:stretch;gap:12px}
  .fg-hero__knoepfe .fg-knopf,.fg-kurs__fuss,.fg-kurs__fuss .fg-knopf,
  .fg-anfrage__fuss .fg-knopf{width:100%}
  .fg-kurs__fuss,.fg-anfrage__fuss{align-items:stretch}
  .fg-ablauf .fg-knopf{justify-content:flex-start}
}
@media (min-width:441px) and (max-width:1023px){
  .fg-ablauf .fg-knopf{display:inline-flex;width:auto;align-self:flex-start}
}

/* ============================================================
   Leistungsseiten (OutFit ist die Vorlage). Alle vier Seiten kommen aus derselben
   Vorlage bau/leistung.html, getauscht werden nur Texte und Bilder.
   ============================================================ */

/* Sichtbarer Platzhalter, bis Katja den Text liefert. */
.fg-offen{display:inline-block;padding:1px 8px;border:1px solid var(--bk-textorange);color:var(--bk-textorange);
  font:600 14px/22px var(--font);letter-spacing:0;text-transform:none}
.fg-offen b{margin-right:6px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.fg-dunkel .fg-offen,.fg-seite-dunkel .fg-offen{color:var(--bk-orange);border-color:var(--bk-orange)}
.fg-stimme .fg-offen{color:var(--bk-anthrazit);border-color:var(--bk-anthrazit)}
.fg-erst .fg-offen{color:var(--bk-hell);border-color:var(--bk-hell)}
.fg-bildplatz{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--rahmen);
  color:var(--aus);font:600 14px/17px var(--font);letter-spacing:.08em;text-transform:uppercase}

/* Anreisser mit Buchungskarte */
.fg-hero--leistung{min-height:820px}
.fg-hero--leistung .fg-hero__inhalt{padding-top:190px;padding-bottom:60px}
/* Die Buchungskarte (420) samt 56 Abstand gehört nicht zur Textspalte. Bei 1920 bleibt es bei 720. */
.fg-hero--leistung .fg-hero__spalte{max-width:min(720px,calc(100% - 476px))}
/* Karte und Textspalte beginnen auf gleicher Hoehe. Das gilt auf allen vier
   Leistungsseiten, egal wie lang die Karte oder die Ueberschrift ist. */
.fg-buchung{position:absolute;z-index:2;top:190px;right:var(--rand);width:420px;box-sizing:border-box;
  background:#fff;border:1px solid var(--bk-anthrazit);border-top-width:6px;color:var(--bk-anthrazit)}
.fg-buchung__kopf{display:flex;flex-direction:column;gap:6px;padding:28px 30px 18px}
.fg-buchung__titel{font:700 32px/38px var(--font-cond);color:var(--bk-anthrazit)}
.fg-buchung__daten{margin:0;padding:0 30px}
.fg-buchung__daten > div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--rahmen)}
.fg-buchung__daten dt{font:400 14px/17px var(--font);color:#6e6b6a;white-space:nowrap;flex:0 0 auto}
.fg-buchung__daten dd{margin:0;font:600 14px/19px var(--font);color:var(--bk-anthrazit);
  text-align:right;min-width:0;overflow-wrap:break-word}
.fg-buchung__knoepfe{display:flex;flex-direction:column;gap:10px;padding:22px 30px 24px}
.fg-buchung__hinweis{font:400 14px/22px var(--font);color:#6e6b6a}
.fg-knopf--karte{display:flex;justify-content:center;width:100%;padding:16px 0}

/* Brotkrumen */
.fg-krumen{background:var(--bk-hell)}
.fg-krumen ol{display:flex;gap:10px;padding:18px 0;font:400 14px/17px var(--font);color:rgba(54,52,53,.7)}
.fg-krumen li{display:flex;gap:10px}
.fg-krumen li:not(:last-child)::after{content:"/"}
.fg-krumen a{position:relative;color:inherit}
.fg-krumen a::after{content:"";position:absolute;left:-4px;right:-4px;top:-14px;bottom:-14px}
.fg-krumen a:hover{text-decoration:underline;text-underline-offset:3px}
.fg-krumen [aria-current="page"]{font-weight:600;color:var(--bk-anthrazit)}

/* Angebot */
.fg-angebot{background:var(--bk-hell)}
.fg-angebot__inhalt,.fg-angebot__oben{display:flex;flex-direction:column;gap:56px}
.fg-h2--32{font-size:32px;line-height:38px}
.fg-h2--eng.fg-h2--32{line-height:34px}
.fg-erwartet{background:#fff;padding:32px 40px 36px;display:flex;flex-direction:column;gap:28px}
.fg-erwartet__absatz{font:400 17px/29px var(--font);color:var(--bk-anthrazit);max-width:640px}
.fg-erwartet__absatz:nth-of-type(2){color:#4a4749;max-width:760px}
.fg-erwartet__inhalt{display:flex;gap:56px;align-items:stretch}
.fg-erwartet__listen{flex:1 1 0;min-width:0;display:flex;flex-wrap:wrap;gap:22px 32px;align-items:flex-start}
.fg-erwartet__listen > .fg-liste{flex:1 1 150px;min-width:0}
.fg-liste{display:flex;flex-direction:column;gap:10px}
.fg-liste ul{display:flex;flex-direction:column;gap:10px}
.fg-liste li{display:flex;align-items:flex-start;gap:12px;font:400 17px/27px var(--font);color:var(--bk-anthrazit)}
.fg-liste li::before{content:"";flex:none;width:14px;height:2px;margin-top:13px;background:var(--bk-textorange)}
.fg-erwartet__foto{flex:1 1 0;min-width:0;position:relative;min-height:240px}
.fg-erwartet__foto img,.fg-erwartet__foto .fg-bildplatz{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:flex}

.fg-fuerwen{background:var(--bk-anthrazit);color:var(--bk-hell);padding:40px;display:flex;flex-direction:column;gap:28px}
.fg-fuerwen__gruende{display:flex;flex-wrap:wrap;gap:32px 28px;align-items:flex-start}
.fg-grund--breit{flex:0 0 calc((100% - 28px) / 2)}
.fg-fuerwen .fg-grund__text{color:rgba(252,250,247,.82)}

/* Glossar. Vier Begriffe mit Erklaerung, bewusst anders gebaut als das
   Vierergitter darunter: dunkle Flaeche, grosses Wort links, Text rechts,
   keine Nummern, keine Querstriche. */
.fg-glossar{display:flex;flex-direction:column;gap:28px;
  background:var(--flaeche-fuss);padding:48px 44px 50px}
.fg-glossar__h2{font:700 var(--fs-ueberschrift)/1.18 var(--font-cond);color:var(--bk-hell);margin-top:6px}
.fg-glossar__liste{display:flex;flex-direction:column;gap:0}
.fg-glossar__punkt{display:flex;gap:40px;align-items:baseline;
  padding:26px 0;border-top:1px solid rgba(252,250,247,.16)}
.fg-glossar__punkt:first-child{border-top:0;padding-top:6px}
.fg-glossar__wort{flex:0 0 268px;font:700 var(--fs-ueberschrift)/1.05 var(--font-cond);
  color:var(--bk-orange);letter-spacing:.01em}
.fg-glossar__text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px}
.fg-glossar__titel{font:700 var(--fs-zwischen)/1.2 var(--font-cond);color:var(--bk-hell)}
.fg-glossar__text p{font:400 var(--fs-text)/29px var(--font);color:rgba(252,250,247,.82)}

/* Nutzenblock auf heller Flaeche, Aufbau wie Fuer wen, nur dunkle Schrift */
.fg-nutzen{display:flex;flex-direction:column;gap:28px}
.fg-nutzen__liste{display:flex;flex-wrap:wrap;gap:32px 28px;align-items:flex-start}
.fg-nutzen__liste .fg-grund{flex:0 0 calc((100% - 28px) / 2)}
.fg-nutzen__liste .fg-grund__titel{color:var(--bk-anthrazit)}
.fg-nutzen__liste .fg-grund__text{color:rgba(54,52,53,.82)}

.fg-buchen{padding-top:56px;display:flex;flex-direction:column;gap:28px}
.fg-buchen__kaesten{display:flex;gap:24px;align-items:stretch}
.fg-kasten{flex:1 1 0;min-width:0;box-sizing:border-box;background:#fff;border:1px solid var(--bk-gruen);border-top-width:6px;
  padding:32px 36px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.fg-kasten--orange{border-color:var(--bk-orange)}
.fg-kasten__titel{font:700 26px/31px var(--font-cond);color:var(--bk-anthrazit)}
.fg-kasten__text{font:400 17px/29px var(--font);color:var(--bk-anthrazit)}
.fg-kasten__hilfe{font:400 14px/24px var(--font);color:rgba(54,52,53,.75)}
.fg-knopf--kasten{padding:16px 28px}

.fg-faqbox{background:#fff;border:1px solid var(--rahmen);padding:56px 40px 36px;display:flex;flex-direction:column;gap:28px}
.fg-faqbox__titel{display:flex;flex-direction:column;gap:14px}
.fg-faqbox .fg-lead{line-height:29px}

/* Erstes Training, Fassung der Leistungsseiten */
.fg-erst--leistung .fg-erst__text{width:620px}
.fg-erst--leistung .fg-ablauf{top:-40px}

/* Preise, zwei Blöcke */
/* "hervorheben" im Werkzeug: der Preis wird orange */
.fg-preisblock__zeile strong.fg-akzent{color:var(--bk-textorange)}
.fg-preisblock--breit .fg-preisblock__zeile strong.fg-akzent{color:var(--bk-textorange)}
.fg-preisblock--dunkel .fg-preisblock__zeile strong.fg-akzent{color:var(--bk-orange)}

/* Wellpass oder Referenz */
.fg-referenz{position:relative;background:var(--bk-anthrazit);color:var(--bk-hell);padding-top:72px;padding-bottom:72px}
.fg-referenz__innen{display:flex;align-items:center;gap:56px}
.fg-referenz__kachel{flex:none;box-sizing:border-box;background:#fff;padding:22px 28px;display:flex;align-items:center;justify-content:center;min-width:226px;min-height:110px}
.fg-referenz__kachel img{display:block;width:170px;height:66px;object-fit:contain}
/* Foto statt Logo in der Kachel: keine weisse Flaeche, echtes Foto im Ausschnitt */
.fg-referenz__kachel:has(.fg-referenz__foto){padding:0;background:transparent;min-width:0;min-height:0}
.fg-referenz__kachel img.fg-referenz__foto{width:260px;height:180px;object-fit:cover}
.fg-referenz__leer{font:600 14px/17px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--aus)}
.fg-referenz__text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px}
.fg-referenz__h2{font:700 32px/38px var(--font-cond);color:var(--bk-hell)}
.fg-referenz__text p:not(.fg-kicker){font:400 17px/30px var(--font);color:rgba(252,250,247,.88)}
.fg-referenz__text p:not(.fg-kicker):last-child{font-weight:600;color:var(--bk-hell)}

/* Einblicke auf weißer Fläche */
.fg-einblicke--weiss{background:#fff}
.fg-galerie .fg-bildplatz{display:flex}
.fg-galerie li:nth-child(1) .fg-bildplatz{height:420px}
.fg-galerie li:nth-child(2) .fg-bildplatz{height:320px}
.fg-galerie li:nth-child(3) .fg-bildplatz{height:460px}
.fg-galerie li:nth-child(4) .fg-bildplatz{height:340px}
.fg-stimme__foto .fg-bildplatz{position:absolute;inset:0}

/* ============================================================
   Die dunkle Seite, HyroXOut invertiert. Kontrastwerte aus texte/05:
   Fließtext #D8D5D2 (8,45), Überschriften #FCFAF7 (11,86), Kicker Orange (4,74).
   Textorange #B9570E taugt auf Anthrazit nicht. Höchstens drei helle Inseln:
   Buchungskarte, Kursplan Kasten, Ablauf Kasten.
   ============================================================ */
body.bk.fg-seite-dunkel{background:var(--bk-anthrazit)}
.fg-seite-dunkel .fg-kicker{color:var(--bk-orange)}
.fg-seite-dunkel .fg-buchung .fg-kicker,
.fg-seite-dunkel .fg-kasten .fg-kicker{color:var(--bk-textorange)}
.fg-seite-dunkel .fg-erst__text .fg-kicker{color:var(--bk-hell)}
.fg-seite-dunkel .fg-h2{color:var(--bk-hell)}
/* Neue helle Bausteine auf der dunklen Seite behalten ihre hellen Farben (07.10.2026). Nur die eingefuegten
   Bausteine (fg-sektion--hell, fg-faq--gruppe), nicht die festen Abschnitte der Seite, die liegen trotz
   Klasse "hell" auf dunklem Grund */
.fg-seite-dunkel .fg-sektion--hell .fg-kicker,.fg-seite-dunkel .fg-faq--gruppe.fg-abschnitt--hell .fg-kicker{color:var(--bk-textorange)}
.fg-seite-dunkel .fg-sektion--hell .fg-h2,.fg-seite-dunkel .fg-faq--gruppe.fg-abschnitt--hell .fg-h2{color:var(--bk-anthrazit)}
.fg-seite-dunkel .fg-sektion--hell .fg-lead{color:var(--bk-anthrazit)}
.fg-seite-dunkel .fg-faq--gruppe.fg-abschnitt--hell .fg-faq__knopf{color:var(--bk-anthrazit)}
.fg-seite-dunkel .fg-faq--gruppe.fg-abschnitt--hell .fg-faq__antwort{color:var(--bk-anthrazit)}
.fg-seite-dunkel .fg-faq--gruppe.fg-abschnitt--hell .fg-faq__punkt{border-bottom-color:var(--rahmen)}
.fg-seite-dunkel .fg-lead{color:#D8D5D2}

.fg-seite-dunkel .fg-krumen{background:var(--bk-anthrazit)}
.fg-seite-dunkel .fg-krumen ol{color:rgba(252,250,247,.6)}
.fg-seite-dunkel .fg-krumen [aria-current="page"]{color:var(--bk-hell)}

.fg-seite-dunkel .fg-angebot,
.fg-seite-dunkel .fg-preise,
.fg-seite-dunkel .fg-teams,
.fg-seite-dunkel .fg-einblicke--weiss{background:var(--bk-anthrazit)}
.fg-seite-dunkel .fg-erwartet{background:transparent;padding-left:0;padding-right:0}
.fg-seite-dunkel .fg-erwartet__absatz,
.fg-seite-dunkel .fg-erwartet__absatz:nth-of-type(2){color:#D8D5D2}
.fg-seite-dunkel .fg-liste li{color:#D8D5D2}
.fg-seite-dunkel .fg-liste li::before{background:var(--bk-orange)}
.fg-seite-dunkel .fg-fuerwen{background:var(--flaeche-fuss)}
/* Nutzenblock auf der dunklen Seite: Schrift hell, sonst steht dunkel auf dunkel */
.fg-seite-dunkel .fg-nutzen__liste .fg-grund__titel{color:var(--bk-hell)}
.fg-seite-dunkel .fg-nutzen__liste .fg-grund__text{color:rgba(252,250,247,.82)}

/* zweiter Kasten unter "Wie du dabei bist" ist keine Insel */
.fg-seite-dunkel .fg-kasten--orange{background:transparent;border-color:var(--bk-orange);border-left-color:var(--zierlinie-dunkel);
  border-right-color:var(--zierlinie-dunkel);border-bottom-color:var(--zierlinie-dunkel)}
.fg-seite-dunkel .fg-kasten--orange .fg-kasten__titel{color:var(--bk-hell)}
.fg-seite-dunkel .fg-kasten--orange .fg-kasten__text{color:#D8D5D2}
.fg-seite-dunkel .fg-kasten--orange .fg-knopf--rand{border-color:var(--bk-hell);color:var(--bk-hell)}
.fg-seite-dunkel .fg-kasten--orange .fg-knopf--rand:hover{background:var(--bk-hell);color:var(--bk-anthrazit)}

.fg-seite-dunkel .fg-faqbox{background:transparent;border-color:var(--zierlinie-dunkel)}
.fg-seite-dunkel .fg-faq__punkt{border-bottom-color:var(--zierlinie-dunkel)}
.fg-seite-dunkel .fg-faq__knopf{color:var(--bk-hell)}
.fg-seite-dunkel .fg-faq__knopf:hover .fg-faq__text{color:var(--bk-orange)}
.fg-seite-dunkel .fg-faq__plus{color:var(--bk-orange)}
.fg-seite-dunkel .fg-faq__antwort{color:#D8D5D2}

.fg-seite-dunkel .fg-preisblock,
.fg-seite-dunkel .fg-preisblock--dunkel{background:var(--flaeche-fuss);border-color:var(--zierlinie-dunkel)}
.fg-seite-dunkel .fg-preisblock__titel{color:var(--bk-hell)}
.fg-seite-dunkel .fg-preisblock__zeile{border-bottom-color:var(--zierlinie-dunkel)}
.fg-seite-dunkel .fg-preisblock__zeile span{color:#D8D5D2}
.fg-seite-dunkel .fg-preisblock__zeile strong{color:var(--bk-hell)}
.fg-seite-dunkel .fg-preisblock__zeile strong.fg-akzent{color:var(--bk-orange)}
.fg-seite-dunkel .fg-preisblock__fuss{color:var(--bk-orange)}

.fg-seite-dunkel .fg-referenz{background:var(--flaeche-fuss)}
.fg-seite-dunkel .fg-stimme__foto,
.fg-seite-dunkel .fg-stimme__foto::after{border-color:var(--bk-anthrazit)}
.fg-seite-dunkel .fg-stimme__foto{background:var(--bk-anthrazit)}
.fg-seite-dunkel .fg-stimme__foto::after{border-color:var(--bk-anthrazit)}
.fg-seite-dunkel .fg-knopf--rand-innen{border-color:var(--bk-hell);color:var(--bk-hell)}
.fg-seite-dunkel .fg-knopf--rand-innen:hover{background:var(--bk-hell);color:var(--bk-anthrazit)}
.fg-seite-dunkel .fg-abschluss{background:var(--flaeche-fuss)}
.fg-seite-dunkel .fg-einblicke__titel .fg-kicker{color:var(--bk-orange)}
.fg-seite-dunkel .fg-bildplatz{background:var(--flaeche-fuss);color:rgba(252,250,247,.6)}

/* ============================================================
   Leistungsseiten, Handyfassung. Für OutFit gibt es in Figma nur den Rechnerrahmen.
   Die Handyfassung folgt den Regeln der Startseite (Figma Handy 390).
   ============================================================ */
@media (max-width:1023px){
  .fg-hero--leistung{min-height:0}
  .fg-hero--leistung .fg-hero__spalte{max-width:none}
  .fg-hero--leistung .fg-hero__inhalt{padding-top:96px;padding-bottom:56px;display:flex;flex-direction:column;gap:40px}
  .fg-buchung{position:static;width:auto;max-width:560px}
  .fg-buchung__titel{font-size:26px;line-height:31px}
  .fg-buchung__daten > div{white-space:normal;align-items:flex-start}
  .fg-buchung__daten dd{text-align:right}

  .fg-angebot__inhalt,.fg-angebot__oben{gap:32px}
  .fg-h2--32{font-size:26px;line-height:31px}
  .fg-h2--eng.fg-h2--32{line-height:27px}
  .fg-erwartet{padding:28px 20px 32px}
  .fg-erwartet__inhalt{flex-direction:column;gap:28px}
  .fg-erwartet__listen > .fg-liste{flex:1 1 140px}
  .fg-erwartet__foto{flex:none;min-height:0;height:260px}
  .fg-fuerwen{padding:32px 20px}
  .fg-grund--breit{flex-basis:100%}
  .fg-nutzen__liste .fg-grund{flex-basis:100%}
  .fg-glossar{padding:32px 24px 34px;gap:22px}
  .fg-glossar__punkt{flex-direction:column;gap:10px;padding:22px 0}
  .fg-glossar__wort{flex:none}
  .fg-qualibox{height:auto;min-height:0}
  .fg-nutzen__liste{gap:24px}
  .fg-fuerwen__gruende{gap:24px}
  .fg-buchen{padding-top:16px}
  .fg-buchen__kaesten{flex-direction:column;gap:16px}
  .fg-kasten{padding:28px 24px}
  .fg-faqbox{padding:36px 20px 24px}
  .fg-seite-dunkel .fg-erwartet{padding-left:0;padding-right:0}

  .fg-erst--leistung .fg-erst__text{width:100%}
  .fg-referenz{padding-top:56px;padding-bottom:56px}
  .fg-referenz__innen{flex-direction:column;align-items:flex-start;gap:28px}
  .fg-referenz__h2{font-size:26px;line-height:31px}
}

/* ============================================================
   Über mich und Kontakt (Figma: Über mich · Rechner 1920, Kontakt · Rechner 1920).
   Auf diesen Seiten haben Kicker und Fließtext feste Zeilenhöhen von 22 und 29.
   ============================================================ */
.fg-info .fg-kicker{line-height:22px}
.fg-kicker--weiss{color:#fff}
.fg-info-h2{font:700 32px/32px var(--font-cond);letter-spacing:.16px;color:var(--bk-anthrazit)}
.fg-info-h2--weiss{color:#fff}
.fg-info-h2--hell{color:var(--bk-hell)}
.fg-info-p{font:400 17px/29px var(--font);color:#4a4749;max-width:760px}
.fg-info-p--weiss{color:#fff}
.fg-info-p--dunkel{color:#D8D5D2}
.fg-info-p--820{max-width:820px}
.fg-h1-info{font:500 50px/51px var(--font);letter-spacing:-.75px;color:var(--bk-hell)}
.fg-info-vorspann{font:400 17px/29px var(--font);color:#D8D5D2;max-width:720px}
.fg-info-vorspann--820{max-width:820px}
.fg-knopf--abschluss{padding:18px 34px}

.fg-sektion{position:relative;padding-top:104px;padding-bottom:104px}
.fg-sektion--hell{background:var(--bk-hell)}
.fg-sektion--gruen,.fg-sektion--dunkel{padding-top:120px;padding-bottom:120px}
.fg-sektion--gruen{background:var(--bk-gruen);color:#fff}
.fg-sektion--dunkel{background:var(--bk-anthrazit);color:var(--bk-hell)}
.fg-sektion__spalte{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.fg-sektion__spalte--mitte{align-items:center;text-align:center}

/* Über mich */
.fg-ukopf{position:relative;background:var(--flaeche-fuss);overflow:hidden}
.fg-ukopf__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fg-ukopf__schleier{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(54,52,53,.94) 0%,rgba(54,52,53,.8) 70%,rgba(54,52,53,.5) 100%)}
.fg-ukopf__inhalt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-top:220px;padding-bottom:180px}

.fg-quali{background:var(--bk-orange)}
.fg-quali .fg-bahn{padding-top:34px;padding-bottom:34px}
.fg-quali__liste{display:flex;align-items:center;gap:48px}
.fg-quali__liste li{flex:1 1 0;min-width:0;font:600 21px/28px var(--font);color:var(--bk-anthrazit)}

.fg-zitat{padding-top:132px;padding-bottom:132px}
.fg-zitat__figur{display:flex;flex-direction:column;gap:24px}
.fg-zitat__text{font:500 32px/42px var(--font);letter-spacing:-.32px;color:var(--bk-hell);max-width:min(780px,calc(100% - 420px))}
.fg-zitat__quelle{font:700 14px/22px var(--font);letter-spacing:1.4px;color:var(--bk-orange)}
/* Der helle Rahmen liegt wie in Figma außen um das Bild (420 x 520), das Bild sitzt bei 840 ab Bahnrand. */
.fg-zitat__portraet{position:absolute;z-index:2;top:-180px;right:max(12px,calc(max(var(--rand),(100% - var(--breite-max)) / 2) - 60px));
  width:420px;height:520px;outline:12px solid var(--bk-hell);background:var(--bk-hell)}
.fg-zitat__portraet img{display:block;width:100%;height:100%;object-fit:cover}

.fg-haltungen{display:flex;gap:36px;padding-top:20px;width:100%}
.fg-haltungen__punkt{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:12px;border-top:3px solid var(--bk-orange);padding-top:20px}
.fg-haltungen__titel{font:700 21px/24px var(--font-cond);color:var(--bk-anthrazit)}
.fg-haltungen__punkt p{font:400 17px/29px var(--font);color:#4a4749}


.fg-ubilder{background:var(--bk-hell);padding-bottom:104px}
.fg-ubilder__reihe{display:flex;gap:24px;align-items:stretch}
.fg-ubilder__reihe li{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.fg-ubilder__reihe img{display:block;width:100%;object-fit:cover;flex:1 1 0;min-height:0}
/* Qualifikationen als farbige Kachel mitten in der Bilderreihe.
   Sie waechst nach unten, wenn Katja weitere Ausbildungen schickt. */
.fg-qualibox{display:flex;flex-direction:column;gap:10px;min-height:480px;flex:1 1 auto;
  background:var(--bk-gruen);color:#fff;padding:32px 30px 34px}
.fg-qualibox__kicker{font:700 14px/17px var(--font);letter-spacing:1.4px;color:#fff}
.fg-qualibox__titel{font:700 26px/31px var(--font-cond);color:#fff;margin-bottom:4px}
.fg-qualibox__liste{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.fg-qualibox__liste li{position:relative;padding:10px 0 0;border-top:2px solid rgba(255,255,255,.34);
  font:600 17px/24px var(--font);color:#fff}
.fg-qualibox__liste li span{display:block;font:400 14px/20px var(--font);color:#fff}
.fg-qualibox__liste li span:empty{display:none}
/* Die Bilder nehmen die Hoehe der Kachel an. Die Kachel waechst mit ihren Eintraegen, mindestens 480 */


/* Kontakt */
.fg-skopf{background:var(--bk-anthrazit);padding-top:120px;padding-bottom:120px}
.fg-krumen--kontakt{position:relative}
.fg-krumen--kontakt ol{padding:40px 0 18px;font:400 14px/22px var(--font);color:#6e6a66}
.fg-krumen--kontakt [aria-current="page"]{font-weight:400}

.fg-schnell{background:var(--bk-hell);padding-top:96px;padding-bottom:104px}
.fg-schnell__innen{display:flex;gap:64px;align-items:flex-start}
.fg-schnell__formular{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:20px}
.fg-schnell__formular > .fg-kicker,.fg-schnell__formular > h2,.fg-schnell__formular > p{align-self:flex-start}

.fg-form{display:flex;flex-direction:column;align-items:stretch;gap:20px}
.fg-form__zeile{display:flex;gap:24px;align-items:flex-start}
.fg-form__zeile > .fg-feld{flex:1 1 0;min-width:0}
.fg-feld{display:flex;flex-direction:column;gap:8px;min-width:0}
.fg-feld__label{font:600 14px/20px var(--font);color:var(--bk-anthrazit)}
.fg-feld__hilfe{font:400 14px/22px var(--font);color:#6e6a66}
.fg-feld__fehler{font:600 14px/22px var(--font);color:var(--fehler)}
.fg-eingabe{box-sizing:border-box;display:block;width:100%;background:#fff;border:1px solid #96928e;border-radius:0;
  padding:15px 16px;font:400 17px/26px var(--font);color:var(--bk-anthrazit);-webkit-appearance:none;appearance:none}
.fg-eingabe::placeholder{color:#6e6a66;opacity:1}
.fg-eingabe:hover{border-color:var(--bk-anthrazit)}
.fg-eingabe:focus-visible{outline:var(--fokus-ring) solid var(--bk-anthrazit);outline-offset:var(--fokus-versatz)}
.fg-eingabe[aria-invalid="true"]{border:2px solid var(--fehler);padding:14px 15px}
textarea.fg-eingabe{resize:vertical;height:96px}
textarea.fg-eingabe--gross{height:140px}
textarea.fg-eingabe--mittel{height:96px}
textarea.fg-eingabe--gross2{height:120px}
.fg-auswahl{position:relative}
.fg-auswahl::after{content:"▾";position:absolute;right:17px;top:15px;font:400 17px/26px var(--font);color:var(--bk-anthrazit);pointer-events:none}
select.fg-eingabe{cursor:pointer;padding-right:44px;text-overflow:ellipsis}
select.fg-eingabe:has(option[value=""]:checked){color:#6e6a66}
.fg-form__fehler{border:2px solid var(--fehler);background:#fff;padding:16px 24px}
.fg-form__fehler p{font:700 21px/25px var(--font-cond);color:var(--fehler);margin-bottom:8px;text-transform:uppercase}
.fg-form__fehler ul{padding-left:1.2em;list-style:disc;font:400 14px/24px var(--font)}
.fg-form__fehler a{color:var(--fehler);text-decoration:underline}
.fg-form .fg-knopf{align-self:flex-start;border:0}

.fg-direkt{flex:none;width:420px;box-sizing:border-box;background:var(--bk-anthrazit);padding:40px 36px;
  display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.fg-direkt__name{font:700 26px/28px var(--font-cond);color:var(--bk-hell)}
.fg-direkt__gruppe{display:flex;flex-direction:column;gap:2px;width:100%}
.fg-direkt__label{font:700 14px/20px var(--font);letter-spacing:1.4px;color:#D8D5D2}
.fg-direkt__wert{font:400 17px/26px var(--font);color:var(--bk-hell)}
.fg-direkt__wert a{color:inherit}
.fg-direkt__wert a:hover{text-decoration:underline;text-underline-offset:3px}
.fg-direkt__zusage{font:600 17px/26px var(--font);color:var(--bk-orange)}

.fg-treff{padding-top:112px;padding-bottom:112px}
.fg-orte{display:flex;gap:32px;padding-top:12px;width:100%;align-items:stretch}
.fg-ort{flex:1 1 0;min-width:0;box-sizing:border-box;background:var(--bk-hell);padding:32px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.fg-ort__tag{font:700 14px/20px var(--font);letter-spacing:1.4px;color:var(--bk-textorange)}
.fg-ort__titel{font:700 26px/28px var(--font-cond);color:var(--bk-anthrazit)}
.fg-ort__text{font:400 17px/29px var(--font);color:#4a4749}

.fg-verein{padding-top:112px;padding-bottom:112px}
.fg-form--karte{width:100%;box-sizing:border-box;background:#fff;border:1px solid var(--rahmen);padding:48px;gap:22px}
.fg-form__zeile--drei > .fg-feld{flex:1 1 0}
.fg-form__gruppe{line-height:22px}
/* Zwischenzeile vor den Haken, rueckt an sie heran. Katjas Wunsch vom 10.10.2026 */
.fg-form__zwischen{margin-bottom:-10px}
.fg-form__hinweis{font:600 17px/26px var(--font);color:var(--bk-anthrazit)}
.fg-check{position:relative;display:flex;align-items:center;gap:12px;font:400 17px/26px var(--font);color:#4a4749;cursor:pointer}
.fg-check::after{content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px}
.fg-check input{flex:none;margin:0;width:20px;height:20px;box-sizing:border-box;border:1px solid #96928e;border-radius:0;background:#fff;
  -webkit-appearance:none;appearance:none;cursor:pointer;position:relative;z-index:1}
.fg-check input:checked{background:var(--bk-anthrazit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%23FCFAF7' stroke-width='2'/%3E%3C/svg%3E") center/20px 20px no-repeat;border-color:var(--bk-anthrazit)}
.fg-check input:focus-visible{outline:var(--fokus-ring) solid var(--bk-anthrazit);outline-offset:var(--fokus-versatz)}

/* ---- Handyfassung Über mich und Kontakt. Figma liefert hier nur den Rechnerrahmen,
   die Handyfassung folgt den Regeln der Startseite (Figma Handy 390). ---- */
@media (max-width:1023px){
  .fg-h1-info{font-size:32px;line-height:33px;letter-spacing:-.48px}
  .fg-info-h2{font-size:26px;line-height:26px;letter-spacing:.13px}
  .fg-sektion,.fg-sektion--gruen,.fg-sektion--dunkel,.fg-treff,.fg-verein{padding-top:56px;padding-bottom:56px}
  .fg-ukopf__inhalt{padding-top:96px;padding-bottom:64px}
  .fg-skopf{padding-top:56px;padding-bottom:56px}
  .fg-quali .fg-bahn{padding-top:32px;padding-bottom:32px}
  .fg-quali__liste{flex-direction:column;align-items:flex-start;gap:14px}
  .fg-zitat__text{font-size:21px;line-height:28px;letter-spacing:-.21px;max-width:none}
  .fg-zitat__portraet{position:static;order:-1;width:calc(min(100%,320px) - 24px);height:auto;aspect-ratio:420 / 520;margin:-84px 12px 12px}
  .fg-haltungen{flex-direction:column;gap:28px;padding-top:8px}
  .fg-ubilder{padding-bottom:56px}
  .fg-ubilder__reihe{flex-direction:column;gap:16px;align-items:stretch}
  .fg-ubilder__reihe li:nth-child(n) img{height:260px}
  .fg-krumen--kontakt ol{padding:32px 0 16px}
  .fg-schnell{padding-top:48px;padding-bottom:56px}
  .fg-schnell__innen{flex-direction:column;gap:40px;align-items:stretch}
  .fg-form__zeile{flex-direction:column;gap:20px;align-items:stretch}
  .fg-direkt{width:auto;padding:32px 24px}
  .fg-orte{flex-direction:column;gap:16px}
  .fg-ort{padding:28px 24px}
  .fg-ort__titel{font-size:21px;line-height:25px}
  .fg-form--karte{padding:28px 20px}
}

/* Preisseite. Keine eigenen Bausteine, nur Abstände zwischen den vorhandenen. */
.fg-preisseite{padding-top:56px}
.fg-weitere{margin-top:56px;display:flex;flex-direction:column;gap:20px}
@media (max-width:1023px){
  .fg-preisseite{padding-top:40px}
  .fg-weitere{margin-top:40px}
}

/* ============================================================
   Bilder im Tablet und Fenster-Bereich (bis 1023).
   Figma zeigt am Handy (390) feste Höhen. Wird die gestapelte Ansicht breiter, schneiden
   feste Höhen die Motive weg. Deshalb gilt: bis 599 exakt wie Figma Handy, darüber
   behalten die Bilder ihr Seitenverhältnis und stehen nebeneinander.
   ============================================================ */

/* Über mich, Bilderreihe: ab 1024 nebeneinander, darunter untereinander.
   Grund: unter 1024 wird die grüne Qualifikationskachel zu schmal,
   lange Woerter wie QUALIFIKATIONEN liefen aus der Flaeche. */
@media (max-width:1023px){
  .fg-ubilder__reihe{flex-direction:column;gap:16px;align-items:stretch}
  .fg-ubilder__reihe li{display:block}
  .fg-ubilder__reihe li:nth-child(n) img{height:auto}
  .fg-ubilder__reihe img{aspect-ratio:384 / 480}
}
@media (max-width:599px){
  .fg-ubilder__reihe{flex-direction:column;gap:16px;align-items:stretch}
}

/* Einblicke: bis 799 zwei Spalten, dann wie am Rechner in vier versetzten Spalten */
@media (max-width:1023px){
  .fg-galerie{flex-direction:row;flex-wrap:wrap;gap:16px;align-items:flex-start}
  .fg-galerie li{flex:1 1 calc(50% - 8px)}
  .fg-galerie li:nth-child(n){padding-top:0}
  .fg-galerie li:nth-child(n) img,
  .fg-galerie li:nth-child(n) .fg-bildplatz{height:auto;aspect-ratio:4 / 5}
}
@media (min-width:800px) and (max-width:1023px){
  .fg-galerie{flex-wrap:nowrap}
  .fg-galerie li{flex:1 1 0}
  .fg-galerie li:nth-child(2){padding-top:52px}
  .fg-galerie li:nth-child(4){padding-top:30px}
  .fg-galerie li:nth-child(1) img,.fg-galerie li:nth-child(1) .fg-bildplatz{aspect-ratio:288 / 420}
  .fg-galerie li:nth-child(2) img,.fg-galerie li:nth-child(2) .fg-bildplatz{aspect-ratio:288 / 320}
  .fg-galerie li:nth-child(3) img,.fg-galerie li:nth-child(3) .fg-bildplatz{aspect-ratio:288 / 460}
  .fg-galerie li:nth-child(4) img,.fg-galerie li:nth-child(4) .fg-bildplatz{aspect-ratio:288 / 340}
}
@media (max-width:599px){
  .fg-galerie{flex-direction:column;flex-wrap:nowrap;gap:16px;align-items:stretch}
  .fg-galerie li{flex:none}
  .fg-galerie li:nth-child(n) img,
  .fg-galerie li:nth-child(n) .fg-bildplatz{height:260px;aspect-ratio:auto}
}

/* Kurskarten der Startseite: ab 760 zwei Spalten, damit die Fotos nicht zu flachen Streifen werden */
@media (min-width:760px) and (max-width:1023px){
  .fg-kurse{grid-template-columns:1fr 1fr}
}

/* Foto im Angebot der Leistungsseiten und Foto in der Stimme */
@media (max-width:1023px){
  .fg-erwartet__foto{height:auto;aspect-ratio:16 / 9}
  .fg-stimme__foto{width:min(100%,480px);height:auto;aspect-ratio:16 / 9}
}
@media (max-width:599px){
  .fg-stimme__foto{width:100%;aspect-ratio:auto;height:220px}
}

/* Häufige Fragen: eine Gruppe je Kurs, Aufbau wie der Fragenbereich der Startseite */
.fg-faq--gruppe{padding-top:72px;padding-bottom:72px}
.fg-faq--gruppe + .fg-faq--gruppe{border-top:1px solid var(--rahmen)}

/* Einblicke: alle Bilder, die auf der Seite schon einen Platz haben, in ihrem Seitenverhältnis */
.fg-mauerwerk{padding-top:72px;padding-bottom:104px}
.fg-mauer{column-count:3;column-gap:16px}
.fg-mauer li{break-inside:avoid;margin-bottom:16px}
.fg-mauer img{display:block;width:100%;height:auto}
@media (max-width:1023px){
  .fg-faq--gruppe{padding-top:48px;padding-bottom:48px}
  .fg-mauerwerk{padding-top:40px;padding-bottom:56px}
  .fg-mauer{column-count:2}
}
@media (max-width:599px){
  .fg-mauer{column-count:1}
}

/* ============================================================
   Zustimmungsfenster und Cookie-Richtlinie. Fenster, Schalter und Gruppen kommen aus
   bootkamp.css (Kapitel 23b und 23d). Hier stehen nur die Ergänzungen.
   ============================================================ */
.fg-linkknopf{position:relative;display:inline-block;padding:0;background:none;border:0;cursor:pointer;
  font:inherit;color:var(--bk-textorange);text-decoration:underline;text-underline-offset:3px}
.fg-linkknopf::after{content:"";position:absolute;left:-4px;right:-4px;top:-12px;bottom:-12px}
.fg-linkknopf:focus-visible{outline:var(--fokus-ring) solid var(--bk-anthrazit);outline-offset:var(--fokus-versatz)}
.fg-dunkel .fg-linkknopf,.fg-seite-dunkel .fg-linkknopf{color:var(--bk-orange)}
.fg-dunkel .fg-linkknopf:focus-visible,.fg-seite-dunkel .fg-linkknopf:focus-visible{outline-color:var(--bk-hell)}
.bk-zustimmung__links{align-items:center}
.bk-zustimmung__links a{position:relative}
.bk-zustimmung__links a::after{content:"";position:absolute;left:-4px;right:-4px;top:-12px;bottom:-12px}

/* Der Link im Fußbereich sieht aus wie die Links daneben */
.fg-linkknopf--fuss{font:400 17px/20px var(--font);color:rgba(252,250,247,.82);text-decoration:none;white-space:nowrap;text-align:left}
.fg-linkknopf--fuss::after{top:-6px;bottom:-6px}
.fg-linkknopf--fuss:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* Fenster */
.fg-immer{font:700 14px/17px var(--font);letter-spacing:1.4px;text-transform:uppercase;color:var(--text-schwach)}
.fg-modal__hinweis{margin-top:var(--space-2)}
.fg-modal__hinweis a{color:var(--akzent-text);text-decoration:underline;text-underline-offset:3px}
.bk-zustimmung-modal__kopf{padding-top:var(--space-6)}
.bk-schalter[aria-checked="true"]{border-color:var(--bk-anthrazit);background:var(--bk-anthrazit)}
.fg-dienst__details{margin-top:var(--space-2)}
.fg-dienst__details summary{cursor:pointer;font:600 14px/24px var(--font);color:var(--text-mittel);padding:8px 0;min-height:44px;box-sizing:border-box;display:flex;align-items:center}
.fg-dienst__details summary:focus-visible{outline:var(--fokus-ring) solid var(--fokus);outline-offset:var(--fokus-versatz)}
.fg-dienst__details dl{margin:0}
.fg-dienst__details dd a{color:var(--akzent-text);text-decoration:underline;text-underline-offset:3px}
.bk-zustimmung-modal__karte .bk-knopf{flex:1 1 auto}
.bk-zustimmung-modal__kopf,.bk-dienstgruppe__kopf,.bk-dienstgruppe__text,.bk-dienst{padding-left:var(--rand-mobil);padding-right:var(--rand-mobil)}
@media (min-width:768px){
  .bk-zustimmung-modal__kopf,.bk-dienstgruppe__kopf,.bk-dienstgruppe__text,.bk-dienst,.bk-zustimmung-modal__fuss{padding-left:var(--rand);padding-right:var(--rand)}
}
.bk-zustimmung-modal__fuss{padding-left:var(--rand-mobil);padding-right:var(--rand-mobil)}
.bk-zustimmung__knoepfe .bk-knopf--dunkel{flex:1 1 auto}

/* Cookie-Richtlinie */
.fg-richtlinie{gap:56px}
.fg-richtlinie__block{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:820px;width:100%}
.fg-richtlinie__liste{display:flex;flex-direction:column;gap:8px;font:400 17px/29px var(--font);color:#4a4749}
.fg-richtlinie__dienst{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%;padding-top:16px;border-top:1px solid var(--rahmen)}
.fg-richtlinie__titel{font:700 26px/28px var(--font-cond);color:var(--bk-anthrazit)}
.fg-tabellenhuelle{width:100%;overflow-x:auto}
.fg-tabelle{width:100%;border-collapse:collapse;font:400 14px/22px var(--font);color:#4a4749}
.fg-tabelle th{text-align:left;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#6e6a66;padding:0 16px 8px 0;border-bottom:2px solid var(--bk-anthrazit);white-space:nowrap}
.fg-tabelle td{padding:8px 16px 8px 0;border-bottom:1px solid var(--rahmen);vertical-align:top}

/* Zustimmungsfenster, Feinschliff */
.fg-dienst__details .bk-dienst__zeile{grid-template-columns:150px 1fr}
@media (max-width:599px){
  .fg-dienst__details .bk-dienst__zeile{grid-template-columns:1fr;gap:0}
  .fg-dienst__details .bk-dienst__zeile dt{padding-top:var(--space-2)}
}
.fg-dienst__details summary{list-style:none}
.fg-dienst__details summary::-webkit-details-marker{display:none}
.fg-dienst__details summary::before{content:"";flex:none;width:7px;height:7px;margin-right:12px;margin-top:-3px;
  border:2px solid currentColor;border-left:0;border-top:0;transform:rotate(-45deg)}
.fg-dienst__details[open] summary::before{transform:rotate(45deg);margin-top:-6px}

/* Fußbereich: Abstand unter den orangenen Titeln, Spalten am Handy mit Luft, Cookie-Knopf auf Linie */
.fg-fuss__spalte{gap:18px}
.fg-fuss__spalte li{display:flex;align-items:center}
.fg-linkknopf--fuss{display:block;height:20px;line-height:20px}
@media (max-width:1023px){
  .fg-fuss__oben{gap:40px;margin-bottom:40px}
  .fg-fuss__marke{gap:16px}
  .fg-fuss__kontakt{gap:8px;margin-top:4px}
  .fg-fuss__spalte{gap:16px}
  .fg-fuss__spalte ul{gap:14px}
}

/* Buchen und Hinkommen: die Knöpfe beider Kästen sitzen auf einer Linie unten */
.fg-kasten > .fg-knopf{margin-top:auto}
.fg-kasten > .fg-kasten__text:last-of-type,.fg-kasten > .fg-kasten__hilfe{margin-bottom:0}
.fg-knopf--kasten.fg-knopf--rand{padding:14px 26px}

/* Über mich, Bilderreihe: Ausschnitt so setzen, dass Gesicht und Person sichtbar bleiben */
.fg-ubilder__reihe li:nth-child(2) img{object-position:50% 0}
.fg-ubilder__reihe li:nth-child(3) img{object-position:50% 100%}

/* Menü mit Home: bei schmalem Rechner enger setzen, damit Logo und Knopf Luft behalten */
@media (min-width:1024px) and (max-width:1199px){
  .fg-menue ul{gap:12px}
  .fg-menue a{font-size:var(--fs-text)}
}

/* Abstand über den Knöpfen: mindestens 20 px zum Text oder Preis darüber */
.bk .fg-kasten > :has(+ .fg-knopf),.bk .fg-ort > :has(+ .fg-knopf){margin-bottom:8px}
.bk .fg-kurs__fuss > :has(+ .fg-knopf){margin-bottom:4px}
.bk .fg-ablauf__liste{margin-bottom:6px}
@media (max-width:1023px){
  .fg-anfrage__fuss{gap:20px}
}

/* Preiskarten: der Hinweis unten sitzt in allen Karten auf einer Linie */
.bk .fg-preisblock__fuss{margin-top:auto}
@media (min-width:1024px) and (max-width:1199px){
  .bk .fg-preisblock__fuss{min-height:51px}
}

/* Preis und Knopf der Anfrage-Karten: nie über den Kartenrand hinaus, bei schmaler Karte untereinander */
.bk .fg-anfrage__fuss{flex-wrap:wrap}
.bk .fg-anfrage__fuss .fg-knopf{flex:none;max-width:100%}
@media (min-width:1024px) and (max-width:1279px){
  .bk .fg-anfrage__fuss{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:20px}
}

/* Vorschau: Hinweis am Formular, solange der Versand fehlt */
.fg-form__hinweis[data-status]{border:2px solid var(--bk-anthrazit);background:#fff;padding:16px 24px}

/* ---------------------------------------------------------------
   Schwebende Soziale Leiste, rechts am Rand, auf jeder Seite
   Die Symbole stehen direkt im Quelltext, damit sie nicht fehlen
   koennen. Sie erben die Farbe des Knopfes ueber currentColor.
   Dieselben Symbole liegen einzeln in /bilder/sozial/.

   Wichtig: Beim Ueberfahren aendert sich nur Farbe und Position,
   niemals die Breite. Eine wachsende Kachel macht den Behaelter
   breiter und schiebt die anderen beiden mit, das flackert.
   --------------------------------------------------------------- */
.fg-sozial{position:fixed;z-index:60;right:0;top:50%;
  width:52px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  transform:translateY(-50%)}
/* Unter 1280 ist rechts zu wenig Rand, die Leiste laege auf dem Inhalt.
   Dort rueckt sie an den unteren Rand, wie am Handy. */
@media (min-width:768px) and (max-width:1279px){
  .fg-sozial{top:auto;bottom:20px;right:20px;width:auto;transform:none;gap:2px}
  .fg-sozial__link{border-radius:4px}
  .fg-sozial__link:hover,.fg-sozial__link:focus-visible{transform:translateX(-2px)}
}
.fg-sozial__link{position:relative;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;flex:0 0 auto;
  background:var(--bk-anthrazit);color:var(--bk-hell);
  border-radius:4px 0 0 4px;will-change:transform;
  transition:background .22s ease,color .22s ease,transform .22s cubic-bezier(.2,.7,.3,1)}
.fg-sozial__link + .fg-sozial__link{border-radius:0}
.fg-sozial__link:first-child{border-top-left-radius:4px}
.fg-sozial__link:last-child{border-bottom-left-radius:4px}
.fg-sozial__symbol{display:block;width:23px;height:23px}
/* Der Mauszeiger verlaesst die Kachel nicht, wenn sie sich bewegt:
   das unsichtbare Feld rechts haelt die Flaeche bis zum Bildschirmrand */
.fg-sozial__link::after{content:"";position:absolute;top:0;bottom:0;left:0;right:-10px}
.fg-sozial__link:hover,.fg-sozial__link:focus-visible{
  background:var(--bk-orange);color:var(--bk-anthrazit);transform:translateX(-6px)}
.fg-sozial__link--whatsapp:hover,.fg-sozial__link--whatsapp:focus-visible{
  background:var(--bk-gruen);color:#fff}
.fg-sozial__link:focus-visible{outline:var(--fokus-ring) solid var(--bk-anthrazit);outline-offset:3px;z-index:1}
@media (prefers-reduced-motion:reduce){
  .fg-sozial__link{transition:background .22s ease,color .22s ease}
  .fg-sozial__link:hover,.fg-sozial__link:focus-visible{transform:none}
}
/* Am Handy nur WhatsApp, unten rechts, damit nichts verdeckt wird */
@media (max-width:767px){
  .fg-sozial{top:auto;bottom:16px;right:16px;width:auto;transform:none;gap:0}
  .fg-sozial__link{display:none}
  .fg-sozial__link--whatsapp{display:flex;width:54px;height:54px;border-radius:50%;
    background:var(--bk-gruen);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.28)}
  .fg-sozial__link--whatsapp::after{right:0}
  .fg-sozial__link--whatsapp:hover,.fg-sozial__link--whatsapp:focus-visible{transform:none}
}
@media print{.fg-sozial{display:none}}

/* ---------- Lightbox ----------------------------------------------
   Bilder in Galerien und in der Bilderreihe auf Ueber mich lassen sich
   gross ansehen. Kein Fremdbaustein, kein Nachladen.
   Ausgeloest wird sie in js/bk.js, dort steht auch die Bedienung.
   ------------------------------------------------------------------ */
.bk-lupe{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,56px);background:rgba(20,18,19,.94)}
.bk-lupe[open],.bk-lupe.ist-auf{display:flex}
.bk-lupe__bild{max-width:100%;max-height:100%;object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.bk-lupe__zeile{position:absolute;left:0;right:0;bottom:0;padding:18px 24px 22px;text-align:center;
  font:400 var(--fs-klein)/1.57 var(--font);color:rgba(252,250,247,.86);
  background:linear-gradient(transparent,rgba(0,0,0,.75))}
.bk-lupe__knopf{position:absolute;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border:1px solid rgba(255,255,255,.4);border-radius:50%;
  background:rgba(0,0,0,.35);color:#fff;font:400 26px/1 var(--font);cursor:pointer;
  transition:background .18s ease,border-color .18s ease}
.bk-lupe__knopf:hover{background:var(--bk-orange);border-color:var(--bk-orange);color:var(--bk-anthrazit)}
.bk-lupe__knopf:focus-visible{outline:var(--fokus-ring) solid var(--bk-orange);outline-offset:3px}
.bk-lupe__zu{top:18px;right:18px;font-size:var(--fs-zwischen)}
.bk-lupe__vor,.bk-lupe__zurueck{top:50%;margin-top:-26px}
.bk-lupe__zurueck{left:18px}
.bk-lupe__vor{right:18px}
.bk-lupe__zaehler{position:absolute;top:26px;left:24px;
  font:700 14px/17px var(--font);letter-spacing:1.4px;color:rgba(252,250,247,.7)}
body.bk-lupe-offen{overflow:hidden}
/* Bilder, die sich vergroessern lassen, zeigen das beim Ueberfahren */
.fg-galerie img,.fg-ubilder__reihe img,.fg-mauer img{cursor:zoom-in;transition:opacity .2s ease}
.fg-galerie li:hover img,.fg-ubilder__reihe li:hover img,.fg-mauer li:hover img{opacity:.88}
@media (max-width:767px){
  .bk-lupe__knopf{width:46px;height:46px}
  .bk-lupe__vor,.bk-lupe__zurueck{margin-top:-23px}
}
@media (prefers-reduced-motion:reduce){
  .bk-lupe__knopf,.fg-galerie img,.fg-ubilder__reihe img,.fg-mauer img{transition:none}
}