/* ---------- Schriften, lokal ----------
   Barlow und Barlow Condensed, SIL Open Font License.
   Die Dateien liegen in schrift/ und decken genau die Schnitte ab, die
   bootkamp.css benutzt: 400, 500, 600, 700 und Condensed 700.
   Kein Nachladen von Google, sonst greift die Zustimmungspflicht.
   Dieser Block gehoert vor alles andere, also an den Anfang des Stylesheets. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url(../schrift/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;
  src:url(../schrift/barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;
  src:url(../schrift/barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;
  src:url(../schrift/barlow-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url(../schrift/barlow-condensed-700.woff2) format('woff2')}

/* ============================================================
   BootKamp Katja · Komponentenbibliothek
   Stand 08.09.2026 · Grundlage: Designguide, Grundlage dessen: Richtung D
   Eine Datei. Wer hier etwas ändert, ändert es überall.
   Schrift: Barlow und Barlow Condensed, Google Fonts, SIL Open Font License

   Fassung 2, nach Katjas Rückmeldung vom 06.09.2026. Drei Änderungen:
   Schriftstufen von elf auf sechs, Kapitel 1 und 3. Eckdatenband ohne
   grüne Fläche, Kapitel 10 und 26. Preisübersicht als neuer Baustein,
   Kapitel 12b, sie ersetzt den einzelnen großen Betrag in der Kurskachel.
   ============================================================ */

/* ---------- 1 · Tokens ---------- */
:root{
  /* Markenfarben */
  --bk-orange:#F08432;
  --bk-anthrazit:#363435;
  --bk-gruen:#117D4E;
  --bk-hell:#FCFAF7;
  --bk-textorange:#B9570E;

  /* Rollen */
  --bg:#FFFFFF;
  --flaeche-ruhig:var(--bk-hell);
  --flaeche-dunkel:var(--bk-anthrazit);
  /* Der Fussbereich steht eine Spur dunkler als die uebrigen dunklen
     Flaechen. So schliesst die Seite ab, ohne dass eine Linie noetig ist.
     Der Wert kommt aus Figma und gilt seit 29.09.2026. */
  --flaeche-fuss:#252324;
  --flaeche-signal:var(--bk-orange);
  --text-stark:var(--bk-anthrazit);
  --text-mittel:#4A4749;
  --text-schwach:#6E6A66;
  --text-auf-dunkel:var(--bk-hell);
  --akzent-text:var(--bk-textorange);
  --rahmen:#E4E0DA;
  --rahmen-stark:rgba(54,52,53,.18);
  --rahmen-bedien:rgba(54,52,53,.55);
  --erfolg:#117D4E;
  --warnung:#B9570E;
  --fehler:#A32020;
  --aus:#5F5B57;
  --aus-flaeche:#E4E0DA;
  --fokus:var(--bk-anthrazit);

  /* Schrift
     Sechs Stufen, Stand 23.09.2026. Vorher elf, dann sechs mit 11 als
     kleinster Stufe. Elf Pixel war zu klein, besonders am Handy. Die
     kleinste Stufe ist jetzt 14. Darüber liegt eine modulare Leiter mit
     rund 1,23 bis zur Überschrift, dann ein bewusster Sprung auf das
     Signal. Die sechs unten sind das ganze Textstilsystem. Wer eine
     Größe ändern will, ändert eine davon.

     Die sechs gestrichenen Namen bleiben als Verweis stehen, sie zeigen
     jetzt auf eine der sechs Stufen. So muss kein Baustein umgeschrieben
     werden und keine Klasse verschwindet aus dem HTML. Neue Bausteine
     benutzen die sechs Stufen direkt, nicht die Verweise. */
  --font:'Barlow',Arial,sans-serif;
  --font-cond:'Barlow Condensed',Arial,sans-serif;

  /* Die sechs Stufen */
  --fs-signal:50px;          /* H1 */
  --fs-ueberschrift:32px;    /* H2 */
  --fs-gross:26px;           /* Zitat, am Handy die Überschrift */
  --fs-zwischen:21px;        /* H3 und der eine fette Satz je Abschnitt */
  --fs-text:17px;            /* Fließtext */
  --fs-klein:14px;           /* Kicker, Bildunterschrift, Hilfetext, Fakten */

  /* Verweise, keine eigenen Stufen mehr */
  --fs-text-klein:var(--fs-klein);       /* war 13,5 */
  --fs-label:var(--fs-klein);            /* war 11, zu klein */
  --fs-haltung:var(--fs-zwischen);       /* war 19, ging in Zwischentitel auf */
  --fs-fakten:var(--fs-klein);           /* war 14,5, ging in Klein auf */
  --fs-label-klein:var(--fs-klein);      /* war 10,5, entfällt */
  --fs-akkordeon:var(--fs-zwischen);     /* war 17 */
  --fs-bildunter:var(--fs-klein);        /* war 12,5 */
  --fs-menue:var(--fs-text);             /* war 14 */
  --fs-zitat:var(--fs-gross);            /* liegt auf der Leiter */
  --fs-knopf:var(--fs-text);             /* war 15, jetzt Textstufe */

  /* Sonderfälle einzelner Bausteine. Zählen nicht als Textstufe, weil sie
     nie im Fließtext stehen, sondern immer nur in ihrem eigenen Baustein. */
  --fs-zahl:var(--fs-ueberschrift);   /* Schrittzahl, Angebotsziffer, war 30 */
  --fs-preis:var(--fs-signal);        /* Preis in der Kachel */
  --fs-menue-mobil:var(--fs-zwischen);  /* Handymenü, Barlow Condensed */
  --feld-hoehe:48px;
  --lh-eng:1.0;
  --lh-text:1.7;
  /* Laufweite der Versalienlabels. Bei 11 Pixel brauchte es 16 bis 20
     Prozent, damit die Buchstaben auseinandergehen. Bei 14 Pixel ist das
     zu viel, die Wörter zerfallen. Deshalb enger. */
  --ls-label:.1em;
  --ls-label-klein:.12em;
  --ls-knopf:.08em;

  /* Abstände */
  --space-1:4px;  --space-2:8px;  --space-3:12px;
  --space-4:16px; --space-5:24px; --space-6:32px;
  --space-7:40px; --space-8:56px; --space-9:72px;

  /* Raster */
  --breite-max:1200px;
  --rinne:var(--space-5);
  --rand:var(--space-7);
  --rand-mobil:var(--space-4);

  /* Rahmen und Radien */
  --radius:0;
  --schatten:none;
  --linie:1px solid var(--rahmen);
  --knopf-rahmen:2px;
  --kante-angebot:6px;
  --kante-kachel:8px;
  --kante-welle:18px;
  --kante-abschnitt:26px;   /* die gemalte Kante zwischen zwei Abschnitten */
  --kante-band:13px;
  --fuge:3px;
  --fokus-ring:3px;
  --fokus-versatz:2px;

  /* Bewegung */
  --dauer-schnell:120ms;
  --dauer-normal:200ms;
  --kurve:cubic-bezier(.2,.6,.2,1);
}
@media (prefers-reduced-motion:reduce){
  :root{--dauer-schnell:0ms;--dauer-normal:0ms}
}

/* ---------- 2 · Grundgerüst ---------- */
.bk{font-family:var(--font);color:var(--text-stark);background:var(--bg);line-height:var(--lh-text);font-size:var(--fs-text)}
.bk *,.bk *::before,.bk *::after{box-sizing:border-box}
.bk p{margin:0 0 var(--space-4)}
.bk p:last-child{margin-bottom:0}
.bk ul,.bk ol{margin:0 0 var(--space-4);padding-left:1.2em}
:where(.bk) :where(img){max-width:100%;height:auto;display:block}

/* Inhaltsbreite und Außenrand */
.bk-bahn{max-width:var(--breite-max);margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}

/* Bausteine, die über die volle Seitenbreite laufen, brauchen dieselbe
   Begrenzung wie die Bahn, sonst steht ihr Text auf einem breiten Bildschirm
   ganz links, während der Rest der Seite mittig sitzt. Der Rand wächst mit
   statt fest zu bleiben: bis 1280 sind es die üblichen 40, darüber genau so
   viel, dass der Inhalt bei 1200 zentriert steht. Die Fläche und die Kanten
   laufen dabei weiter über die volle Breite, nur der Inhalt wird gefasst. */
.bk-randfassen{padding-left:max(var(--rand),(100% - var(--breite-max)) / 2);
               padding-right:max(var(--rand),(100% - var(--breite-max)) / 2)}
.bk-kopfzeile,
.bk-sprungleiste ul,
.bk-kopf__bildunter,
.bk-kopf__inhalt,
.bk-seitenkopf,
.bk-band__inner,
.bk-stimme{padding-left:max(var(--rand),(100% - var(--breite-max)) / 2);
           padding-right:max(var(--rand),(100% - var(--breite-max)) / 2)}
@media (max-width:767px){
  .bk-kopf__bildunter,.bk-kopf__inhalt,.bk-seitenkopf,.bk-band__inner,.bk-stimme{
    padding-left:var(--rand-mobil);padding-right:var(--rand-mobil)}
}
.bk-abschnitt{padding-top:var(--space-7);padding-bottom:var(--space-7)}
.bk-abschnitt--gross{padding-top:var(--space-9);padding-bottom:var(--space-9)}
.bk-abschnitt--ruhig{background:var(--flaeche-ruhig)}
.bk-abschnitt--dunkel{background:var(--flaeche-dunkel);color:var(--text-auf-dunkel)}

/* Spaltenraster. 4 am Handy, 6 ab Tablet, 12 ab Rechner. */
.bk-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--rinne)}
@media (min-width:768px){.bk-raster{grid-template-columns:repeat(6,1fr)}}
@media (min-width:1024px){.bk-raster{grid-template-columns:repeat(12,1fr)}}
.bk-raster > *{min-width:0;grid-column:span 4}
@media (min-width:768px){
  .bk-sp-2{grid-column:span 3} .bk-sp-3{grid-column:span 3}
  .bk-sp-4{grid-column:span 3} .bk-sp-6{grid-column:span 6}
  .bk-sp-8{grid-column:span 6} .bk-sp-9{grid-column:span 6}
  .bk-sp-10{grid-column:span 6} .bk-sp-12{grid-column:span 6}
}
@media (min-width:1024px){
  .bk-sp-2{grid-column:span 2} .bk-sp-3{grid-column:span 3}
  .bk-sp-4{grid-column:span 4} .bk-sp-6{grid-column:span 6}
  .bk-sp-8{grid-column:span 8} .bk-sp-9{grid-column:span 9}
  .bk-sp-10{grid-column:span 10} .bk-sp-12{grid-column:span 12}
}

/* Randspalte, die Ruhe aus Richtung D */
.bk-randspalte{display:grid;grid-template-columns:1fr;gap:var(--space-4)}
@media (min-width:1024px){
  .bk-randspalte{grid-template-columns:2fr 10fr;gap:var(--rinne)}
}

/* ---------- 3 · Schriftstufen ---------- */
/* Sechs Stufen: Signal, Überschrift, Zwischentitel, Fließtext, Klein, Label.
   Alles darunter sind Sonderfälle einzelner Bausteine, keine Textstufen.
   .bk-haltung, .bk-fakten und .bk-label-klein stehen noch da, weil sie in
   rund vierzig Bausteinen verbaut sind. Sie tragen keine eigene Größe mehr,
   nur noch Gewicht und Farbe. */
.bk-signal{font-size:var(--fs-signal);line-height:1.02;font-weight:500;letter-spacing:-.015em;max-width:17ch;margin:0 0 var(--space-4);color:var(--text-stark)}
.bk-ueberschrift{font-family:var(--font-cond);font-size:var(--fs-ueberschrift);line-height:var(--lh-eng);font-weight:700;text-transform:uppercase;letter-spacing:.005em;margin:0 0 var(--space-5);color:var(--text-stark)}
.bk-zwischen{font-family:var(--font-cond);font-size:var(--fs-zwischen);line-height:1.05;font-weight:700;text-transform:uppercase;margin:0 0 var(--space-1);color:var(--text-stark)}
.bk-haltung{font-size:var(--fs-haltung);line-height:1.58;font-weight:600;margin:0 0 var(--space-3)}
.bk-text{font-size:var(--fs-text);line-height:var(--lh-text);color:var(--text-mittel);max-width:62ch}
.bk-text-klein{font-size:var(--fs-text-klein);line-height:1.6;color:var(--text-schwach)}
.bk-fakten{font-size:var(--fs-fakten);line-height:1.6;font-variant-numeric:tabular-nums}
.bk-label{font-size:var(--fs-label);line-height:1.6;font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--text-schwach)}
.bk-label-klein{font-size:var(--fs-label-klein);line-height:1.6;font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-label-klein);color:var(--akzent-text)}
.bk-zahl{font-family:var(--font-cond);font-size:var(--fs-zahl);line-height:1;font-weight:700}
.bk-preis{font-family:var(--font-cond);font-size:var(--fs-preis);line-height:.95;font-weight:700;font-variant-numeric:tabular-nums}
.bk-zitat{font-size:var(--fs-zitat);line-height:1.35;font-weight:500;letter-spacing:-.01em;max-width:34ch}
.bk-strich{display:block;width:34px;height:5px;background:var(--bk-orange)}

/* Auf dunkler Fläche */
.bk-abschnitt--dunkel .bk-signal,
.bk-abschnitt--dunkel .bk-ueberschrift,
.bk-abschnitt--dunkel .bk-zwischen{color:var(--text-auf-dunkel)}
.bk-abschnitt--dunkel .bk-text{color:var(--text-dunkel)}
.bk-abschnitt--dunkel .bk-label{color:var(--label-dunkel)}

/* Schriftgrößen am Handy. Dieselbe Leiter, nur eine Stufe tiefer angesetzt.
   Die kleinen Stufen bleiben unverändert, 14 und 17 gelten überall.
   Die Werte stehen im Designguide, Kapitel 05. */
@media (max-width:767px){
  .bk-signal{font-size:var(--fs-ueberschrift)}
  .bk-ueberschrift,.bk-kachel__titel,.bk-trainer__name,.bk-kursplan__titel{font-size:var(--fs-gross)}
  .bk-zwischen,.bk-haltung,.bk-akkordeon__knopf,
  .bk-angebot__titel,.bk-hinweis__titel,.bk-preiskarte__titel,.bk-ablauf__titel,.bk-fehlerliste__titel,
  .bk-zustimmung__titel,.bk-dienstgruppe__titel{font-size:var(--fs-zwischen)}
  .bk-zahl,.bk-angebot__n,.bk-kachel-klein__preis{font-size:var(--fs-zwischen)}
  .bk-preis,.bk-preiskarte__preis{font-size:var(--fs-ueberschrift)}
  .bk-zitat,.bk-stimme q{font-size:var(--fs-zwischen)}
}

/* ---------- 4 · Knöpfe ---------- */
.bk-knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-cond);font-size:var(--fs-knopf);font-weight:700;line-height:1;
  text-transform:uppercase;letter-spacing:var(--ls-knopf);text-decoration:none;
  padding:14px 22px;min-height:44px;
  border:var(--knopf-rahmen) solid transparent;border-radius:var(--radius);
  cursor:pointer;
  transition:background-color var(--dauer-schnell) var(--kurve),
             border-color var(--dauer-schnell) var(--kurve),
             color var(--dauer-schnell) var(--kurve);
}
.bk-knopf:focus-visible{outline:var(--fokus-ring) solid var(--fokus);outline-offset:var(--fokus-versatz)}

/* Hauptknopf */
.bk-knopf--haupt{background:var(--bk-orange);border-color:var(--bk-orange);color:var(--bk-anthrazit)}
.bk-knopf--haupt:hover{background:var(--bk-anthrazit);border-color:var(--bk-anthrazit);color:#fff}
.bk-knopf--haupt:active{background:var(--bk-anthrazit);border-color:var(--bk-orange);color:#fff}

/* Zweiter Knopf */
.bk-knopf--zweit{background:transparent;border-color:var(--rahmen-bedien);color:var(--bk-anthrazit)}
.bk-knopf--zweit:hover{border-color:var(--bk-anthrazit);background:rgba(54,52,53,.06)}
.bk-knopf--zweit:active{background:rgba(54,52,53,.12)}

/* Auf dunkler Fläche */
.bk-knopf--dunkel{background:transparent;border-color:rgba(252,250,247,.45);color:var(--bk-hell)}
.bk-knopf--dunkel:hover{background:var(--bk-hell);border-color:var(--bk-hell);color:var(--bk-anthrazit)}
.bk-knopf--dunkel:focus-visible{outline-color:var(--bk-hell)}

/* Zustände, die nicht über Pseudoklassen kommen */
.bk-knopf[disabled],.bk-knopf[aria-disabled="true"]{
  background:var(--aus-flaeche);border-color:var(--aus-flaeche);color:var(--aus);
  cursor:not-allowed;pointer-events:none;
}
.bk-knopf[data-laden="true"]{cursor:progress;pointer-events:none;opacity:.85}
.bk-knopf[data-laden="true"]::after{
  content:"";width:14px;height:14px;flex:none;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:bk-dreh 700ms linear infinite;
}
@keyframes bk-dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .bk-knopf[data-laden="true"]::after{animation:none}
}
.bk-knopf--breit{width:100%}
.bk-knopfgruppe{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}

/* ---------- 5 · Links ---------- */
.bk-link{color:var(--akzent-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(185,87,14,.5)}
.bk-link:hover{text-decoration-color:currentColor}
.bk-link:active{color:#94450B}
.bk-link:focus-visible{outline:var(--fokus-ring) solid var(--fokus);outline-offset:var(--fokus-versatz);text-decoration:none}
.bk-link[aria-disabled="true"]{color:var(--aus);text-decoration:none;pointer-events:none}
.bk-abschnitt--dunkel .bk-link{color:var(--bk-orange);text-decoration-color:rgba(240,132,50,.5)}
.bk-abschnitt--dunkel .bk-link:focus-visible{outline-color:var(--bk-hell)}

/* Sprung zum Inhalt */
.bk-sprung{position:absolute;left:-9999px;top:0;z-index:100}
.bk-sprung:focus{left:var(--space-4);top:var(--space-4);position:fixed;background:var(--bk-anthrazit);color:#fff;padding:12px 18px;font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-knopf);text-decoration:none}

/* ---------- 6 · Etiketten und Marken ---------- */
.bk-etikett{display:inline-block;font-size:var(--fs-label);font-weight:700;line-height:1.4;text-transform:uppercase;letter-spacing:.1em;padding:7px 11px}
.bk-etikett--gruen{background:var(--bk-gruen);color:#fff}
.bk-etikett--dunkel{background:var(--bk-anthrazit);color:var(--bk-hell)}
.bk-etikett--offen{background:transparent;color:var(--akzent-text);border:1px solid rgba(185,87,14,.4);padding:6px 10px}

.bk-kicker{display:block;font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--text-schwach);line-height:1.6}
.bk-kicker .bk-strich{margin-bottom:var(--space-3)}

/* ---------- 7 · Kopfzeile ---------- */
.bk-kopfzeile{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--rand);border-bottom:var(--linie);background:var(--bg)}
.bk-kopfzeile__logo{height:32px;width:auto;display:block}
.bk-menue{display:none;list-style:none;margin:0;padding:0;gap:26px}
.bk-menue a{font-size:var(--fs-menue);font-weight:500;color:var(--text-mittel);text-decoration:none;padding:10px 0;display:inline-block}
.bk-menue a:hover{color:var(--text-stark);box-shadow:inset 0 -2px 0 var(--bk-orange)}
.bk-menue a[aria-current="page"]{color:var(--text-stark);box-shadow:inset 0 -2px 0 var(--bk-orange)}
.bk-menue a:focus-visible{outline:var(--fokus-ring) solid var(--fokus);outline-offset:var(--fokus-versatz)}
.bk-kopfzeile__cta{display:none}
@media (min-width:1024px){
  .bk-menue{display:flex}
  .bk-kopfzeile__cta{display:inline-flex}
  .bk-burger{display:none}
}
/* Das Menü steht seit dem 08.09.2026 im Fließtext, vorher zwei Punkt kleiner.
   Zwischen 1024 und 1200 wird es damit knapp, dort rücken die Punkte enger
   zusammen. Danach ist wieder Platz. */
@media (min-width:1024px) and (max-width:1199px){.bk-menue{gap:18px}}
/* Aufklappmenü, Stand 29.09.2026 im Hauptmenü nicht mehr benutzt. Das Menü hat
   sechs Punkte, die vier Leistungen stehen einzeln darin: OutFit, HyroXOut,
   Teamtraining, Parcours, Preise, Über mich. Der Baustein bleibt erhalten, falls
   später Angebote dazukommen. Ohne sichtbares Zeichen weiß niemand, dass da etwas
   liegt, deshalb der kleine Winkel. Er dreht sich beim Öffnen.
   Am Handy gibt es das nicht, dort stehen die Punkte eingerückt untereinander. */
.bk-menue__auf{position:relative}
.bk-menue__auf > a{display:inline-flex;align-items:center;gap:7px}
.bk-menue__winkel{flex:none;width:7px;height:7px;border:2px solid currentColor;
  border-left-width:0;border-top-width:0;transform:translateY(-2px) rotate(45deg);
  transition:transform var(--dauer-normal) var(--kurve)}
.bk-menue__auf > a[aria-expanded="true"] .bk-menue__winkel{transform:translateY(1px) rotate(225deg)}
.bk-menue__liste{position:absolute;top:calc(100% + 1px);left:calc(var(--space-4) * -1);z-index:20;
  min-width:250px;background:var(--bg);border:1px solid var(--rahmen);
  border-top:var(--knopf-rahmen) solid var(--bk-orange);
  list-style:none;margin:0;padding:var(--space-2) 0}
.bk-menue__liste[hidden]{display:none}
.bk-menue__liste a{display:block;padding:10px var(--space-4);min-height:44px;
  font-size:var(--fs-fakten);font-weight:500;color:var(--text-mittel);text-decoration:none}
.bk-menue__liste a:hover{background:var(--flaeche-ruhig);color:var(--text-stark)}
.bk-menue__liste a[aria-current="page"]{color:var(--text-stark);box-shadow:inset 3px 0 0 var(--bk-orange)}
.bk-kopfzeile--dunkel .bk-menue__liste{background:var(--flaeche-dunkel);border-color:var(--rahmen-dunkel)}
.bk-kopfzeile--dunkel .bk-menue__liste a{color:var(--text-dunkel)}
.bk-kopfzeile--dunkel .bk-menue__liste a:hover{background:rgba(252,250,247,.08);color:var(--text-auf-dunkel)}

.bk-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;background:transparent;border:0;cursor:pointer}
.bk-burger span{display:block;height:2px;background:var(--bk-anthrazit)}
.bk-burger:focus-visible{outline:var(--fokus-ring) solid var(--fokus);outline-offset:var(--fokus-versatz)}

/* Handymenü, offen */
.bk-menue-mobil{border-bottom:var(--linie);background:var(--bg);padding:var(--space-3) var(--rand-mobil) var(--space-5)}
.bk-menue-mobil ul{list-style:none;margin:0 0 var(--space-4);padding:0}
.bk-menue-mobil li{border-bottom:var(--linie)}
.bk-menue-mobil a{display:block;padding:14px 0;min-height:44px;font-family:var(--font-cond);font-size:var(--fs-menue-mobil);font-weight:700;text-transform:uppercase;color:var(--text-stark);text-decoration:none}
.bk-menue-mobil a[aria-current="page"]{color:var(--akzent-text)}
.bk-menue-mobil[hidden]{display:none}

/* ---------- 8 · Sprungleiste und Brotkrumen ---------- */
.bk-sprungleiste{border-bottom:var(--linie);background:var(--flaeche-ruhig);overflow-x:auto}
.bk-sprungleiste ul{display:flex;gap:var(--space-5);list-style:none;margin:0;padding:var(--space-3) var(--rand);white-space:nowrap}
.bk-sprungleiste a{font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-schwach);text-decoration:none;padding:8px 0;display:inline-block}
.bk-sprungleiste a:hover,.bk-sprungleiste a[aria-current="true"]{color:var(--text-stark);box-shadow:inset 0 -2px 0 var(--bk-orange)}

.bk-krumen{font-size:var(--fs-text-klein);color:var(--text-schwach);padding:var(--space-3) 0}
.bk-krumen ol{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0}
.bk-krumen li::after{content:"›";margin-left:var(--space-2);color:var(--rahmen-stark)}
.bk-krumen li:last-child::after{content:""}
.bk-krumen a{color:var(--text-schwach)}
.bk-krumen [aria-current="page"]{color:var(--text-stark)}

/* ---------- 9 · Seitenkopf ---------- */
/* Startseite: Bild führt, Text danach eingerückt. So aus Richtung D. */
.bk-kopf__bild{width:100%;height:280px;object-fit:cover;display:block;background:var(--rahmen)}
.bk-kopf__bildunter{padding:var(--space-3) var(--rand) 0}
.bk-kopf__inhalt{padding:var(--space-7) var(--rand) var(--space-6)}
@media (max-width:767px){
  .bk-kopf__bild{height:170px}
  .bk-kopf__bildunter{padding:var(--space-3) var(--rand-mobil) 0}
  .bk-kopf__inhalt{padding:var(--space-5) var(--rand-mobil)}
}

/* Unterseite: ohne Bild, ruhig */
.bk-seitenkopf{padding:var(--space-7) var(--rand) var(--space-6);border-bottom:var(--linie)}
/* Folgt direkt darunter das Eckdatenband, übernimmt dessen gemalte Kante den
   Übergang. Zwei Trennungen übereinander wären eine zu viel. */
.bk-seitenkopf:has(+ .bk-band){border-bottom:0}
.bk-seitenkopf--anband{border-bottom:0}
@media (max-width:767px){.bk-seitenkopf{padding:var(--space-5) var(--rand-mobil)}}

/* Abschnittskopf */
.bk-abschnittskopf{margin-bottom:var(--space-5)}
.bk-abschnittskopf .bk-label-klein{display:block;margin-bottom:var(--space-3)}

/* ---------- 10 · Eckdatenband ---------- */
/* Stand 08.09.2026, neu gefasst.
   Vorher trug Grün die ganze Fläche über die volle Breite. Das las sich wie
   eine Fußzeile, die versehentlich mitten auf der Seite steht. Jetzt trägt
   Grün nur noch die gerissene Kante, dreizehn Pixel hoch. Die Fakten stehen
   auf dem ruhigen hellen Grund und laufen im Seitenfluss mit. Der Farbakzent
   bleibt, das Gewicht ist weg.

   Die Kante ist dieselbe Form wie an der Kurskachel, nur gespiegelt. Sie ist
   aus dem Pinselstrich im Logo abgeleitet und stand so schon in Richtung D.

   .bk-band trägt nur noch die Farbe der Kante, die Kante holt sie sich über
   currentColor. Ein Farbwechsel der Kante bleibt damit eine Zeile, siehe die
   dunkle Fassung in Kapitel 26.

   Einmal je Seite. Zweimal wäre wieder ein Muster statt eines Akzents. */
.bk-band{color:var(--bk-gruen)}
.bk-band__kante{display:block;width:100%;height:var(--kante-band);line-height:0;transform:scaleY(-1)}
.bk-band__kante path{fill:currentColor}
.bk-band__inner{background:var(--flaeche-ruhig);border-bottom:var(--linie);
  padding:var(--space-4) var(--rand);
  display:grid;grid-template-columns:1fr;gap:var(--space-2);align-items:baseline}
.bk-band__inner > *{color:var(--text-stark)}
.bk-band__inner .bk-band__lab{font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--bk-gruen)}
.bk-band__items{display:flex;flex-direction:column;gap:5px;font-size:var(--fs-text-klein);font-weight:500;font-variant-numeric:tabular-nums;list-style:none;margin:0;padding:0}
@media (min-width:768px){
  .bk-band__inner{grid-template-columns:150px 1fr;gap:var(--rinne)}
  .bk-band__items{flex-direction:row;gap:30px;flex-wrap:wrap}
}
@media (max-width:767px){.bk-band__inner{padding:var(--space-4) var(--rand-mobil)}}

/* ---------- 11 · Angebotsblock ---------- */
.bk-angebote{display:grid;grid-template-columns:1fr 1fr;gap:var(--fuge);background:var(--bk-anthrazit);padding:var(--fuge)}
@media (min-width:768px){.bk-angebote{grid-template-columns:repeat(4,1fr)}}
.bk-angebot{background:var(--flaeche-ruhig);border-top:var(--kante-angebot) solid var(--bk-orange);padding:var(--space-4);display:flex;flex-direction:column;min-width:0}
.bk-angebot__n{font-family:var(--font-cond);font-size:var(--fs-zahl);line-height:1;font-weight:700;margin-bottom:var(--space-2)}
.bk-angebot__titel{font-family:var(--font-cond);font-size:var(--fs-zwischen);line-height:1.05;font-weight:700;text-transform:uppercase;margin:0 0 5px}
.bk-angebot__text{font-size:var(--fs-text-klein);line-height:1.5;color:var(--text-mittel);margin:0}
.bk-angebot__zeit{margin-top:auto;padding-top:var(--space-3);font-size:var(--fs-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.bk-angebot a{text-decoration:none;color:inherit}
.bk-angebot a::after{content:"";position:absolute;inset:0}
.bk-angebot{position:relative}
.bk-angebot:hover{background:#fff}
.bk-angebot:focus-within{outline:var(--fokus-ring) solid var(--fokus);outline-offset:calc(var(--fuge) * -1)}
@media (max-width:767px){.bk-angebot__n{font-size:var(--fs-zwischen)}.bk-angebot__titel{font-size:var(--fs-zwischen)}}

/* ---------- 12 · Kurskachel, als Ticket ---------- */
/* Fakten links, Preis rechts im dunklen Feld. Unten läuft die gerissene
   Kante, so als wäre das Ticket dort abgerissen worden. Keine Perforation,
   keine gestrichelte Linie, keine Kerben. Keine runden Ecken, keine
   Schatten, damit die Markenregel gilt. Stand 27.08.2026. */
.bk-kachel{--naht:42.55%;background:var(--bg);border:1px solid var(--rahmen-stark);position:relative;overflow:hidden;
  container-type:inline-size;container-name:kachel}
.bk-kachel__streifen{height:var(--kante-kachel);background:var(--bk-orange)}
.bk-kachel__inner{display:grid;grid-template-columns:1fr}
@container kachel (min-width:768px){.bk-kachel__inner{grid-template-columns:1.35fr 1fr}}

.bk-kachel__rechts{position:relative}

.bk-kachel__links{padding:var(--space-5);min-width:0}
.bk-kachel__rechts{padding:var(--space-5);background:var(--flaeche-dunkel);color:var(--text-auf-dunkel);display:flex;flex-direction:column;justify-content:center;min-width:0}
.bk-kachel__titel{font-family:var(--font-cond);font-size:var(--fs-ueberschrift);line-height:1;font-weight:700;text-transform:uppercase;margin:0 0 var(--space-1)}
.bk-kachel__sub{font-size:var(--fs-fakten);color:#5B5759;margin:0 0 var(--space-4)}
.bk-kachel__daten{width:100%;border-collapse:collapse}
.bk-kachel__daten td{padding:9px 0;border-bottom:1px solid rgba(54,52,53,.12);font-size:var(--fs-fakten);font-variant-numeric:tabular-nums}
.bk-kachel__daten td:first-child{width:100px;font-size:var(--fs-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-schwach)}
/* Im Preisfeld rechts steht seit dem 08.09.2026 die Preisübersicht, nicht
   mehr ein einzelner großer Betrag. Siehe Kapitel 12b. */
.bk-kachel__preislab{font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-label-klein);color:var(--bk-orange);margin-bottom:var(--space-3)}
.bk-kachel__fuss{font-size:var(--fs-text-klein);color:rgba(252,250,247,.8);line-height:1.55;margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid rgba(252,250,247,.25)}
.bk-kachel__rechts .bk-etikett--gruen{align-self:flex-start;margin-bottom:var(--space-3)}
@container kachel (max-width:767.98px){
  .bk-kachel__links,.bk-kachel__rechts{padding:var(--space-4)}
  .bk-kachel__titel{font-size:var(--fs-gross)}
}

/* Kachel kompakt, für Listen */

/* Kurskachel, gerissene Unterkante. Jede Haelfte behaelt ihre eigene Farbe,
   links der helle Grund mit Rand, rechts das dunkle Preisfeld. Kein Orange. */
.bk-kachel{border-bottom:0}
.bk-kachel__welle{display:grid;grid-template-columns:1fr;height:var(--kante-welle);line-height:0}
@container kachel (min-width:768px){.bk-kachel__welle{grid-template-columns:1.35fr 1fr}}
.bk-kachel__welle svg{display:block;width:100%;height:100%}
.bk-kachel__welle-hell .f{fill:var(--bg)}
.bk-kachel__welle-hell .s{fill:none;stroke:var(--rahmen-stark);stroke-width:1;vector-effect:non-scaling-stroke}
.bk-kachel__welle-dunkel .f{fill:var(--flaeche-dunkel)}
/* Am Handy stapeln die Haelften, das dunkle Preisfeld steht unten.
   Die gerissene Kante ist dann durchgehend anthrazitfarben. */
@container kachel (max-width:767.98px){.bk-kachel__welle svg.bk-kachel__welle-hell{display:none}}

.bk-kachel-klein{display:grid;grid-template-columns:1fr auto;gap:var(--space-4);align-items:center;padding:var(--space-4) 0;border-bottom:var(--linie)}
.bk-kachel-klein__preis{font-family:var(--font-cond);font-size:var(--fs-zahl);font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* ---------- 12b · Preisübersicht ---------- */
/* Stand 08.09.2026, neu.
   Vorher stand in der Kurskachel ein einzelner fetter Betrag und daneben ein
   erklärender Satz zur Punktelogik. Ein Betrag allein sagt zu wenig und wirkt
   in dieser Größe wie ein Preisschild auf dem Jahrmarkt. Katjas Wort.

   Jetzt stehen alle Angebote untereinander. Zwei Spalten reichen: was es ist,
   was es kostet. Die Punktelogik läuft klein darunter als Nebensatz, nicht
   als Überschrift und nicht als eigener Kasten.

   Der Preis steht in Zwischentitelgröße, nicht in Preisgröße. Groß genug,
   um die Spalte zu führen, klein genug, um nicht zu schreien. Die große
   Preisstufe bleibt der Preiskarte auf der Preisseite vorbehalten.

   Überall dort einsetzen, wo Preise bisher im Fließtext standen. */
.bk-preisliste{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.bk-preisliste caption{text-align:left;font-size:var(--fs-label);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--text-schwach);
  padding-bottom:var(--space-3)}
.bk-preisliste th{text-align:left;font-size:var(--fs-label);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--text-schwach);
  padding:0 0 var(--space-2);border-bottom:1px solid var(--rahmen-stark);white-space:nowrap}
.bk-preisliste th:last-child{text-align:right}
.bk-preisliste td{padding:10px 0;border-bottom:1px solid rgba(54,52,53,.12);
  font-size:var(--fs-text);line-height:1.4;vertical-align:baseline}
.bk-preisliste td:last-child{text-align:right;white-space:nowrap;padding-left:var(--space-4);
  font-family:var(--font-cond);font-size:var(--fs-zwischen);font-weight:700}
.bk-preisliste tbody tr:last-child td{border-bottom:0}
/* Zweite Zeile in der linken Spalte, für den Zusatz, der sonst in Klammern
   hinter dem Angebot stünde. Etwa die Anzahl der Einheiten. */
.bk-preisliste__dazu{display:block;font-size:var(--fs-text-klein);line-height:1.45;color:var(--text-schwach)}
.bk-preisliste__note{font-size:var(--fs-text-klein);line-height:1.6;color:var(--text-schwach);
  margin:var(--space-3) 0 0;max-width:62ch}

/* ---------- 13 · Tabellen ---------- */
.bk-tabelle-huelle{overflow-x:auto}
.bk-tabelle{width:100%;border-collapse:collapse;font-size:var(--fs-fakten);font-variant-numeric:tabular-nums}
.bk-tabelle caption{text-align:left;font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--text-schwach);padding-bottom:var(--space-3)}
.bk-tabelle th{text-align:left;font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-schwach);padding:var(--space-3) var(--space-4) var(--space-3) 0;border-bottom:2px solid var(--bk-anthrazit);white-space:nowrap}
.bk-tabelle td{padding:var(--space-3) var(--space-4) var(--space-3) 0;border-bottom:var(--linie)}
.bk-tabelle td:last-child,.bk-tabelle th:last-child{padding-right:0}
.bk-tabelle .zahl{text-align:right;font-weight:600}
.bk-tabelle tbody tr:hover{background:var(--flaeche-ruhig)}

/* Preiskarte */
.bk-preiskarten{display:grid;grid-template-columns:1fr;gap:var(--fuge);background:var(--bk-anthrazit);padding:var(--fuge)}
@media (min-width:768px){.bk-preiskarten{grid-template-columns:repeat(3,1fr)}}
.bk-preiskarte{background:var(--flaeche-ruhig);padding:var(--space-5);display:flex;flex-direction:column;min-width:0}
.bk-preiskarte--betont{background:var(--bg);border-top:var(--kante-angebot) solid var(--bk-orange)}
.bk-preiskarte__titel{font-family:var(--font-cond);font-size:var(--fs-zwischen);font-weight:700;text-transform:uppercase;margin:0 0 var(--space-3)}
.bk-preiskarte__preis{font-family:var(--font-cond);font-size:var(--fs-preis);line-height:.95;font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:var(--space-1)}
.bk-preiskarte__je{font-size:var(--fs-text-klein);color:var(--text-schwach);margin-bottom:var(--space-4)}
.bk-preiskarte__liste{list-style:none;margin:0 0 var(--space-5);padding:0;font-size:var(--fs-fakten)}
.bk-preiskarte__liste li{padding:var(--space-2) 0;border-bottom:var(--linie)}
.bk-preiskarte .bk-knopf{margin-top:auto}

/* ---------- 14 · Teilnehmerstimme ---------- */
.bk-stimme{display:grid;grid-template-columns:1fr;gap:var(--space-3);padding:var(--space-6) var(--rand) var(--space-7);border-top:var(--linie)}
@media (min-width:1024px){.bk-stimme{grid-template-columns:150px 1fr;gap:var(--rinne)}}
.bk-stimme q{quotes:none;display:block;font-size:var(--fs-zitat);line-height:1.35;font-weight:500;letter-spacing:-.01em;max-width:34ch;margin-bottom:var(--space-3)}
.bk-stimme cite{font-style:normal;font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label-klein);text-transform:uppercase;color:var(--text-schwach)}
.bk-stimme .bk-strich{margin-top:var(--space-4)}
@media (max-width:767px){.bk-stimme{padding:var(--space-5) var(--rand-mobil)}.bk-stimme q{font-size:var(--fs-zwischen)}}

/* ---------- 15 · Trainerkarte ---------- */
.bk-trainer{display:grid;grid-template-columns:1fr;gap:var(--space-5);align-items:start}
@media (min-width:768px){.bk-trainer{grid-template-columns:280px 1fr;gap:var(--space-7)}}
.bk-trainer__bild{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--rahmen)}
.bk-trainer__name{font-family:var(--font-cond);font-size:var(--fs-ueberschrift);line-height:1;font-weight:700;text-transform:uppercase;margin:0 0 var(--space-1)}
.bk-trainer__rolle{font-size:var(--fs-fakten);color:var(--text-schwach);margin:0 0 var(--space-4)}
.bk-trainer__belege{list-style:none;margin:var(--space-4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* ---------- 16 · Ablauf in Schritten ---------- */
.bk-ablauf{list-style:none;margin:0;padding:0;counter-reset:bkschritt;display:grid;gap:var(--fuge);background:var(--rahmen);border:1px solid var(--rahmen)}
.bk-ablauf li{background:var(--bg);padding:var(--space-4) var(--space-5);display:grid;grid-template-columns:44px 1fr;gap:var(--space-4);align-items:start;counter-increment:bkschritt}
.bk-ablauf li::before{content:counter(bkschritt,decimal-leading-zero);font-family:var(--font-cond);font-size:var(--fs-zahl);line-height:1;font-weight:700;color:var(--bk-orange)}
.bk-ablauf__titel{font-family:var(--font-cond);font-size:var(--fs-zwischen);font-weight:700;text-transform:uppercase;margin:0 0 var(--space-1);line-height:1.05}
.bk-ablauf__text{font-size:var(--fs-text-klein);color:var(--text-mittel);margin:0;line-height:1.55}

/* ---------- 17 · Akkordeon ---------- */
.bk-akkordeon{border-top:var(--linie)}
.bk-akkordeon__punkt{border-bottom:var(--linie)}
.bk-akkordeon__knopf{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  background:transparent;border:0;cursor:pointer;text-align:left;
  padding:var(--space-4) 0;min-height:44px;
  font-family:var(--font);font-size:var(--fs-akkordeon);font-weight:600;color:var(--text-stark);
}
.bk-akkordeon__knopf:hover{color:var(--akzent-text)}
.bk-akkordeon__knopf:focus-visible{outline:var(--fokus-ring) solid var(--fokus);outline-offset:var(--fokus-versatz)}
.bk-akkordeon__zeichen{flex:none;width:16px;height:16px;position:relative}
.bk-akkordeon__zeichen::before,.bk-akkordeon__zeichen::after{
  content:"";position:absolute;background:var(--bk-orange);
  transition:transform var(--dauer-normal) var(--kurve);
}
.bk-akkordeon__zeichen::before{left:0;top:7px;width:16px;height:2px}
.bk-akkordeon__zeichen::after{left:7px;top:0;width:2px;height:16px}
.bk-akkordeon__knopf[aria-expanded="true"] .bk-akkordeon__zeichen::after{transform:scaleY(0)}
.bk-akkordeon__inhalt{padding:0 0 var(--space-5);max-width:62ch;font-size:var(--fs-text);line-height:var(--lh-text);color:var(--text-mittel)}
.bk-akkordeon__inhalt[hidden]{display:none}

/* ---------- 18 · Hinweisboxen ---------- */
.bk-hinweis{display:grid;grid-template-columns:4px 1fr;gap:var(--space-4);background:var(--flaeche-ruhig);padding:var(--space-4) var(--space-5) var(--space-4) 0;margin:var(--space-4) 0}
.bk-hinweis::before{content:"";display:block;background:var(--bk-anthrazit)}
.bk-hinweis__titel{font-family:var(--font-cond);font-size:var(--fs-zwischen);font-weight:700;text-transform:uppercase;margin:0 0 var(--space-1);line-height:1.05}
.bk-hinweis__text{font-size:var(--fs-text-klein);line-height:1.6;color:var(--text-mittel);margin:0}
.bk-hinweis--info::before{background:var(--bk-anthrazit)}
.bk-hinweis--erfolg::before{background:var(--erfolg)}
.bk-hinweis--erfolg .bk-hinweis__titel{color:var(--erfolg)}
.bk-hinweis--warnung::before{background:var(--warnung)}
.bk-hinweis--warnung .bk-hinweis__titel{color:var(--warnung)}
.bk-hinweis--fehler::before{background:var(--fehler)}
.bk-hinweis--fehler .bk-hinweis__titel{color:var(--fehler)}

/* ---------- 19 · Bild, Bildunterschrift, Galerie ---------- */
.bk-bild figcaption,.bk-bildunter{font-size:var(--fs-text-klein);line-height:1.6;color:var(--text-schwach);max-width:62ch;margin:var(--space-3) 0 0}
.bk-bild{margin:0}
.bk-bild img{width:100%;display:block}
.bk-platzhalter{background:var(--rahmen);display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--space-5);min-height:170px;color:var(--aus);font-size:var(--fs-text-klein);line-height:1.5}
.bk-galerie{display:grid;grid-template-columns:1fr 1fr;gap:var(--fuge)}
@media (min-width:768px){.bk-galerie{grid-template-columns:repeat(4,1fr)}}
.bk-galerie figure{margin:0}
.bk-galerie img,.bk-galerie .bk-platzhalter{aspect-ratio:4/3;object-fit:cover;width:100%;min-height:0}
.bk-galerie figcaption{font-size:var(--fs-text-klein);color:var(--text-schwach);padding:var(--space-2) 0 0;line-height:1.45}

/* ---------- 19a · Video ---------- */
/* Selbst gehostet, kein YouTube und kein Vimeo. Ein fremder Player brächte
   einen weiteren Dienst ins Zustimmungsfenster, fremde Gestaltung und einen
   Datenabfluss vor der Einwilligung. Das Video lädt erst auf Klick, vorher
   steht das Standbild. Kein Autoplay, kein Ton von allein, weil beides
   ungefragt Daten und Aufmerksamkeit verbraucht. */
.bk-video{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;line-height:0}
.bk-video img,.bk-video video{width:100%;display:block}
.bk-video__knopf{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;background:var(--flaeche-dunkel);border:var(--knopf-rahmen) solid var(--bk-orange);
  display:grid;place-items:center;pointer-events:none;
  transition:background-color var(--dauer-schnell) var(--kurve)}
.bk-video__dreieck{width:0;height:0;margin-left:5px;
  border-left:17px solid var(--bk-orange);
  border-top:11px solid transparent;border-bottom:11px solid transparent}
.bk-video:hover .bk-video__knopf{background:var(--bk-orange)}
.bk-video:hover .bk-video__dreieck{border-left-color:var(--bk-anthrazit)}
.bk-video:focus-visible{outline:var(--fokus-ring) solid var(--fokus);outline-offset:var(--fokus-versatz)}
.bk-video__dauer{position:absolute;right:var(--space-3);bottom:var(--space-3);
  background:var(--flaeche-dunkel);color:var(--bk-hell);
  font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);
  text-transform:uppercase;padding:4px 9px;line-height:1.4}
.bk-video--dunkel .bk-video__knopf{background:var(--bk-hell);border-color:var(--bk-hell)}
.bk-video--dunkel .bk-video__dreieck{border-left-color:var(--bk-anthrazit)}

/* ---------- 19b · Partnerlogo ---------- */
.bk-partner{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;padding:var(--space-5);background:var(--flaeche-ruhig);border-left:var(--kante-angebot) solid var(--bk-gruen)}
.bk-partner__logo{height:44px;width:auto;flex:none}
.bk-partner__text{font-size:var(--fs-text-klein);line-height:1.6;color:var(--text-mittel);margin:0;max-width:52ch;min-width:0}
.bk-partner__text b{color:var(--text-stark)}

/* ---------- 19c · Anfahrt und Treffpunkt ---------- */
/* Keine eingebettete Karte. Adresse und Link, aus demselben Grund wie beim Kursplan. */
.bk-anfahrt{display:grid;grid-template-columns:1fr;gap:var(--space-4);padding:var(--space-5);background:var(--flaeche-ruhig);border-left:var(--kante-angebot) solid var(--bk-anthrazit)}
@media (min-width:768px){.bk-anfahrt{grid-template-columns:1fr auto;gap:var(--space-7);align-items:center}}
.bk-anfahrt > *{min-width:0}
.bk-anfahrt__adresse{font-size:var(--fs-fakten);line-height:1.6;font-style:normal;margin:0 0 var(--space-2)}
.bk-anfahrt__adresse b{font-family:var(--font-cond);font-size:var(--fs-zwischen);font-weight:700;text-transform:uppercase;display:block;margin-bottom:var(--space-1)}
.bk-anfahrt__hinweis{font-size:var(--fs-text-klein);color:var(--text-schwach);line-height:1.55;margin:0}

/* ---------- 20 · Faktenliste ---------- */
.bk-fakten-liste{margin:0;display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:768px){.bk-fakten-liste{grid-template-columns:150px 1fr}}
.bk-fakten-liste dt{font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-schwach);padding:var(--space-3) 0 var(--space-1);border-top:var(--linie)}
.bk-fakten-liste dd{margin:0;font-size:var(--fs-fakten);font-variant-numeric:tabular-nums;padding:var(--space-1) 0 var(--space-3)}
@media (min-width:768px){
  .bk-fakten-liste dt{padding:var(--space-3) 0}
  .bk-fakten-liste dd{padding:var(--space-3) 0;border-top:var(--linie)}
}

/* ---------- 21 · Zwei Spalten, Text und Bild ---------- */
.bk-duo{display:grid;grid-template-columns:1fr;gap:var(--space-5);align-items:center}
@media (min-width:768px){
  .bk-duo{grid-template-columns:1fr 1fr;gap:var(--space-7)}
  .bk-duo--bild-links > :first-child{order:2}
}
.bk-duo > *{min-width:0}

/* ---------- 22 · Formular ---------- */
.bk-form{max-width:640px}
.bk-feld{margin-bottom:var(--space-5)}
.bk-feld__label{display:block;font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-stark);margin-bottom:var(--space-2)}
.bk-feld__pflicht{color:var(--fehler);margin-left:4px}
.bk-feld__hilfe{display:block;font-size:var(--fs-text-klein);color:var(--text-schwach);line-height:1.5;margin-top:var(--space-2)}
.bk-feld__fehler{display:block;font-size:var(--fs-text-klein);font-weight:600;color:var(--fehler);line-height:1.5;margin-top:var(--space-2)}

.bk-eingabe{
  width:100%;font-family:var(--font);font-size:var(--fs-text);line-height:1.5;color:var(--text-stark);
  background:var(--bg);border:1px solid var(--rahmen-bedien);border-radius:var(--radius);
  padding:12px 14px;min-height:var(--feld-hoehe);
  transition:border-color var(--dauer-schnell) var(--kurve);
}
.bk-eingabe::placeholder{color:var(--text-schwach)}
.bk-eingabe:hover{border-color:var(--text-schwach)}
.bk-eingabe:focus{outline:var(--fokus-ring) solid var(--fokus);outline-offset:var(--fokus-versatz);border-color:var(--bk-anthrazit)}
.bk-eingabe[aria-invalid="true"]{border:2px solid var(--fehler)}
.bk-eingabe[disabled]{background:var(--aus-flaeche);color:var(--aus);border-color:var(--aus-flaeche);cursor:not-allowed}
textarea.bk-eingabe{min-height:140px;resize:vertical}
select.bk-eingabe{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--bk-anthrazit) 50%),linear-gradient(135deg,var(--bk-anthrazit) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px;
}

/* Auswahlkästchen und Optionsfeld */
.bk-wahl{display:grid;grid-template-columns:22px 1fr;gap:var(--space-3);align-items:start;padding:var(--space-2) 0;min-height:44px;cursor:pointer}
.bk-wahl input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--bk-anthrazit);cursor:pointer}
.bk-wahl input:focus-visible{outline:var(--fokus-ring) solid var(--fokus);outline-offset:var(--fokus-versatz)}
.bk-wahl__text{font-size:var(--fs-text-klein);line-height:1.55;color:var(--text-mittel)}
.bk-wahl input[disabled] ~ .bk-wahl__text{color:var(--aus)}
.bk-gruppe{border:0;margin:0 0 var(--space-5);padding:0}
.bk-gruppe legend{font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-stark);margin-bottom:var(--space-2);padding:0}

/* Fehlerzusammenfassung */
.bk-fehlerliste{border:2px solid var(--fehler);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-5)}
.bk-fehlerliste__titel{font-family:var(--font-cond);font-size:var(--fs-zwischen);font-weight:700;text-transform:uppercase;color:var(--fehler);margin:0 0 var(--space-2)}
.bk-fehlerliste ul{margin:0;padding-left:1.2em;font-size:var(--fs-text-klein);line-height:1.7}
.bk-fehlerliste a{color:var(--fehler)}

/* ---------- 23 · Fußbereich ---------- */
.bk-fuss{background:var(--flaeche-fuss);color:var(--text-auf-dunkel);padding:var(--space-8) var(--rand) var(--space-5)}
.bk-fuss__raster{display:grid;grid-template-columns:1fr;gap:var(--space-6);max-width:var(--breite-max);margin:0 auto}
@media (min-width:768px){.bk-fuss__raster{grid-template-columns:1.2fr 1fr 1fr}}
.bk-fuss__lab{font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-label);color:rgba(252,250,247,.6);margin-bottom:var(--space-3)}
.bk-fuss ul{list-style:none;margin:0;padding:0}
.bk-fuss li{margin-bottom:var(--space-2)}
.bk-fuss a{color:rgba(252,250,247,.88);text-decoration:none;font-size:var(--fs-fakten);display:inline-block;padding:4px 0}
.bk-fuss a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.bk-fuss a:focus-visible{outline:var(--fokus-ring) solid var(--bk-hell);outline-offset:var(--fokus-versatz)}
.bk-fuss__logo{height:36px;width:auto;margin-bottom:var(--space-4)}
.bk-fuss__unten{max-width:var(--breite-max);margin:var(--space-7) auto 0;padding-top:var(--space-4);border-top:1px solid rgba(252,250,247,.18);display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;font-size:var(--fs-bildunter);color:rgba(252,250,247,.6)}
@media (max-width:767px){.bk-fuss{padding:var(--space-7) var(--rand-mobil) var(--space-5)}}

/* ---------- 23b · Zustimmungsfenster ---------- */
/* Nötig, weil Google Analytics und der Tag Manager mitlaufen. Kein Overlay
   über der halben Seite, sondern ein Balken unten, der den Inhalt nicht verdeckt. */
.bk-zustimmung{position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--flaeche-dunkel);color:var(--text-auf-dunkel);border-top:var(--kante-angebot) solid var(--bk-orange);padding:var(--space-5) var(--rand)}
.bk-zustimmung__inner{max-width:var(--breite-max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:var(--space-4);align-items:center}
@media (min-width:768px){.bk-zustimmung__inner{grid-template-columns:1fr auto;gap:var(--space-7)}}
.bk-zustimmung__inner > *{min-width:0}
.bk-zustimmung__titel{font-family:var(--font-cond);font-size:var(--fs-zwischen);font-weight:700;text-transform:uppercase;margin:0 0 var(--space-2)}
.bk-zustimmung__text{font-size:var(--fs-text-klein);line-height:1.6;color:rgba(252,250,247,.85);margin:0;max-width:62ch}
.bk-zustimmung__text a{color:var(--bk-orange)}
.bk-zustimmung__knoepfe{display:flex;gap:var(--space-3);flex-wrap:wrap}
.bk-zustimmung__knoepfe .bk-knopf{flex:1 1 auto;white-space:nowrap}
/* Gleichwertigkeit. Annehmen und Ablehnen sind derselbe Baustein in derselben
   Größe und derselben Farbe. Ein hervorgehobener Zustimmen-Knopf wäre nicht
   zulässig. Einstellungen steht als dritter Weg daneben, als Link. */
.bk-zustimmung__knoepfe .bk-knopf--haupt{display:none}
.bk-zustimmung__links{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-3);
  font-size:var(--fs-text-klein);line-height:1.6}
.bk-zustimmung__links a{color:var(--bk-orange);text-decoration:underline;text-underline-offset:3px}
@media (max-width:767px){.bk-zustimmung{padding:var(--space-4) var(--rand-mobil)}}

/* ---------- 23d · Zustimmung, zweite Ebene ---------- */
/* Ohne diese Ebene wäre der Banner nicht zulässig: § 25 TDDDG verlangt eine
   Einwilligung je Dienst, nicht nur alles oder nichts. Jeder Dienst nennt
   Anbieter mit Anschrift, Zweck, Rechtsgrundlage, Cookies mit Laufzeit und
   den Datenschutzlink des Anbieters. */
.bk-zustimmung-modal{position:fixed;inset:0;z-index:110;display:grid;place-items:center;
  background:rgba(54,52,53,.72);padding:var(--space-5)}
.bk-zustimmung-modal[hidden]{display:none}
.bk-zustimmung-modal__karte{background:var(--bg);width:min(720px,100%);max-height:86vh;overflow-y:auto;
  border-top:var(--kante-angebot) solid var(--bk-orange)}
.bk-zustimmung-modal__kopf{padding:var(--space-5) var(--rand) var(--space-4);border-bottom:var(--linie)}
.bk-zustimmung-modal__fuss{padding:var(--space-4) var(--rand);border-top:var(--linie);
  display:flex;gap:var(--space-3);flex-wrap:wrap;position:sticky;bottom:0;background:var(--bg)}
.bk-zustimmung-modal__fuss .bk-knopf{flex:1 1 auto}

.bk-dienstgruppe{border-bottom:var(--linie)}
.bk-dienstgruppe__kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-4) var(--rand);min-height:44px}
.bk-dienstgruppe__titel{font-family:var(--font-cond);font-size:var(--fs-zwischen);font-weight:700;
  text-transform:uppercase;margin:0}
.bk-dienstgruppe__text{font-size:var(--fs-text-klein);line-height:1.6;color:var(--text-mittel);
  margin:0;padding:0 var(--rand) var(--space-4)}
.bk-dienst{padding:var(--space-4) var(--rand);border-top:var(--linie);background:var(--flaeche-ruhig)}
.bk-dienst__kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.bk-dienst__name{font-size:var(--fs-fakten);font-weight:600}
.bk-dienst__zeile{display:grid;grid-template-columns:110px 1fr;gap:var(--space-2);
  font-size:var(--fs-text-klein);line-height:1.55;padding-top:var(--space-2)}
.bk-dienst__zeile dt{font-weight:700;color:var(--text-schwach);text-transform:uppercase;
  font-size:var(--fs-label);letter-spacing:.1em}
.bk-dienst__zeile dd{margin:0;color:var(--text-mittel)}

/* Schalter. Aus ist grau, an ist anthrazit, nicht grün, damit die Farbe
   keine Empfehlung ausspricht. */
.bk-schalter{flex:none;width:48px;height:28px;border:2px solid var(--rahmen-bedien);
  background:var(--bg);cursor:pointer;position:relative;padding:0}
.bk-schalter::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;
  background:var(--aus);transition:transform var(--dauer-normal) var(--kurve)}
.bk-schalter[aria-checked="true"]{border-color:var(--bk-anthrazit);background:var(--bk-anthrazit)}
.bk-schalter[aria-checked="true"]::after{background:var(--bk-hell);transform:translateX(20px)}
.bk-schalter[disabled]{background:var(--aus-flaeche);border-color:var(--aus-flaeche);cursor:not-allowed}
.bk-schalter:focus-visible{outline:var(--fokus-ring) solid var(--fokus);outline-offset:var(--fokus-versatz)}

/* Der Weg zurück zur Entscheidung. Muss nach der Wahl dauerhaft erreichbar sein. */
.bk-zustimmung-knopf{position:fixed;left:var(--space-4);bottom:var(--space-4);z-index:90;
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--flaeche-dunkel);color:var(--bk-hell);border:2px solid var(--bk-orange);cursor:pointer}
.bk-zustimmung-knopf:focus-visible{outline:var(--fokus-ring) solid var(--bk-hell);outline-offset:var(--fokus-versatz)}

/* ---------- 23c · Einblenden beim Scrollen ---------- */
/* Die dezente Stufe. Gilt auf der ganzen Seite. Wer reduzierte Bewegung
   eingestellt hat, sieht alles sofort und ohne Versatz. */
.bk-einblenden{opacity:0;transform:translateY(16px);
  transition:opacity 500ms var(--kurve), transform 500ms var(--kurve)}
.bk-einblenden.ist-da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .bk-einblenden{opacity:1;transform:none;transition:none}
}
.bk-einblenden--2{transition-delay:80ms}
.bk-einblenden--3{transition-delay:160ms}
.bk-einblenden--4{transition-delay:240ms}

/* ---------- 24 · Helfer ---------- */
.bk-nur-screenreader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bk-abstand-4{margin-bottom:var(--space-4)}
.bk-abstand-5{margin-bottom:var(--space-5)}
.bk-abstand-6{margin-bottom:var(--space-6)}
.bk-abstand-7{margin-bottom:var(--space-7)}

/* ---------- 25 · Wege nach außen ---------- */
/* Der Kursplan liegt bei Kursifant. Wir binden ihn nicht ein, wir führen hin. */
.bk-extern::after{
  content:"";display:inline-block;width:.58em;height:.58em;margin-left:.5em;flex:none;
  border:2px solid currentColor;border-left-width:0;border-bottom-width:0;
  background:linear-gradient(to bottom right,
    transparent calc(50% - 1px), currentColor calc(50% - 1px),
    currentColor calc(50% + 1px), transparent calc(50% + 1px));
  transform:translateY(.04em);
}
.bk-kursplan{border:1px solid var(--rahmen-stark);border-top:var(--kante-kachel) solid var(--bk-orange);padding:var(--space-5);display:grid;grid-template-columns:1fr;gap:var(--space-4)}
@media (min-width:768px){.bk-kursplan{grid-template-columns:1.4fr 1fr;gap:var(--space-7);align-items:center}}
.bk-kursplan > *{min-width:0}
.bk-kursplan__titel{font-family:var(--font-cond);font-size:var(--fs-ueberschrift);line-height:1;font-weight:700;text-transform:uppercase;margin:0 0 var(--space-3)}
.bk-kursplan__wohin{font-size:var(--fs-text-klein);color:var(--text-schwach);line-height:1.55;margin:var(--space-3) 0 0}

/* ---------- 26 · Dunkle Seite ---------- */
/* Für die HyroXOut Seite, die einzige, auf der Anthrazit die Fläche trägt.
   Der Brandguide lässt vom Mischungsverhältnis zwei Ausnahmen zu, eine
   vollflächig anthrazitfarbene und eine vollflächig orangefarbene, nie
   nebeneinander. Dies ist die anthrazitfarbene.

   Anthrazit trägt, helle Inseln setzen sich darauf ab. Insel bleiben die
   Kurskachel und der Kursplanblock, beide leben davon, dass sie sich abheben.
   Mehr als drei Inseln, und die Seite ist nicht invertiert, sondern gescheckt.

   Alle Werte gegen #363435 gerechnet, der Kontrast steht dahinter. */

:root{
  --text-dunkel:rgba(252,250,247,.82);          /* 8,53 zu 1, war bisher ein Literal */
  --label-dunkel:rgba(252,250,247,.72);         /* 7,03 zu 1, war bisher ein Literal */
  --text-schwach-dunkel:rgba(252,250,247,.60);  /* 5,40 zu 1 */
  --rahmen-dunkel:rgba(252,250,247,.45);        /* 3,74 zu 1, aus dem Knopf */
  --zierlinie-dunkel:rgba(252,250,247,.18);     /* 1,75 zu 1, trägt keine Information */
}

/* Kopfzeile. Das Logo wird getauscht, nicht umgefärbt: auf dunklem Grund
   die gelieferte Fassung mit dem weißen Reifen. */
.bk-kopfzeile--dunkel{background:var(--flaeche-dunkel);border-bottom-color:var(--zierlinie-dunkel)}
.bk-kopfzeile--dunkel .bk-menue a{color:var(--text-dunkel)}             /* 8,53 zu 1 */
.bk-kopfzeile--dunkel .bk-menue a:hover,
.bk-kopfzeile--dunkel .bk-menue a[aria-current="page"]{color:var(--text-auf-dunkel);box-shadow:inset 0 -2px 0 var(--bk-orange)}
.bk-kopfzeile--dunkel .bk-menue a:focus-visible{outline-color:var(--bk-hell)}
.bk-kopfzeile--dunkel .bk-burger span{background:var(--bk-hell)}
.bk-kopfzeile--dunkel .bk-burger:focus-visible{outline-color:var(--bk-hell)}

/* Brotkrumen */
.bk-krumen--dunkel{color:var(--text-schwach-dunkel)}                     /* 5,40 zu 1 */
.bk-krumen--dunkel a{color:var(--text-schwach-dunkel)}
.bk-krumen--dunkel li::after{color:var(--rahmen-dunkel)}                 /* 3,74, nur Trennzeichen */
.bk-krumen--dunkel [aria-current="page"]{color:var(--text-auf-dunkel)}   /* 11,86 zu 1 */

/* Unterseitenkopf. Der Strich im Kicker bleibt orange, 4,74 als Fläche. */
.bk-seitenkopf--dunkel{background:var(--flaeche-dunkel);color:var(--text-auf-dunkel);border-bottom-color:var(--zierlinie-dunkel)}
.bk-seitenkopf--dunkel .bk-signal,
.bk-seitenkopf--dunkel .bk-haltung{color:var(--text-auf-dunkel)}         /* 11,86 zu 1 */
.bk-seitenkopf--dunkel .bk-text{color:var(--text-dunkel)}                /* 8,53 zu 1 */
.bk-seitenkopf--dunkel .bk-kicker{color:var(--text-schwach-dunkel)}      /* 5,40 zu 1 */

/* Faktenliste */
.bk-fakten-liste--dunkel dt{color:var(--label-dunkel);border-top-color:var(--zierlinie-dunkel)}
.bk-fakten-liste--dunkel dd{color:var(--text-auf-dunkel)}
@media (min-width:768px){
  .bk-fakten-liste--dunkel dd{border-top-color:var(--zierlinie-dunkel)}
}

/* Bild mit Unterschrift */
.bk-bild--dunkel figcaption,
.bk-bildunter--dunkel{color:var(--text-schwach-dunkel)}                  /* 5,40 zu 1 */

/* Akkordeon. Das Plus Minus Zeichen ist bereits orange, 4,74 als Fläche. */
.bk-akkordeon--dunkel{border-top-color:var(--zierlinie-dunkel)}
.bk-akkordeon--dunkel .bk-akkordeon__punkt{border-bottom-color:var(--zierlinie-dunkel)}
.bk-akkordeon--dunkel .bk-akkordeon__knopf{color:var(--text-auf-dunkel)} /* 11,86 zu 1 */
.bk-akkordeon--dunkel .bk-akkordeon__knopf:hover{color:var(--bk-orange)} /* 4,74 zu 1 */
.bk-akkordeon--dunkel .bk-akkordeon__knopf:focus-visible{outline-color:var(--bk-hell)}
.bk-akkordeon--dunkel .bk-akkordeon__inhalt{color:var(--text-dunkel)}    /* 8,53 zu 1 */

/* Anfahrt und Treffpunkt. Keine helle Fläche, sonst wäre es eine vierte Insel.
   Der Balken links wird orange, weil Anthrazit auf Anthrazit nicht sichtbar ist. */
.bk-anfahrt--dunkel{background:transparent;border-left-color:var(--bk-orange)}
.bk-anfahrt--dunkel .bk-anfahrt__adresse{color:var(--text-auf-dunkel)}   /* 11,86 zu 1 */
.bk-anfahrt--dunkel .bk-anfahrt__hinweis{color:var(--text-schwach-dunkel)} /* 5,40 zu 1 */

/* Eckdatenband auf der dunklen Seite. Stand 08.09.2026.
   Seit das Band keine Fläche mehr trägt, entfällt die alte Frage nach Weg A
   und Weg B. Es bleibt eine gerissene Kante und eine Zeile Text.

   Die Kante wird orange, nicht grün. Grün gegen Anthrazit sind 2,39 zu 1,
   die Kante wäre schlicht nicht zu sehen. Orange steht bei 4,74 zu 1.
   Derselbe Grund wie beim Balken an .bk-anfahrt--dunkel weiter oben.

   Keine helle Fläche, sonst wäre das Band eine vierte Insel auf einer Seite,
   die nur drei verträgt. Der Grund bleibt Anthrazit, unten eine Zierlinie. */
.bk-band--dunkel{color:var(--bk-orange)}
.bk-band--dunkel .bk-band__inner{background:transparent;
  border-bottom:1px solid var(--zierlinie-dunkel)}
.bk-band--dunkel .bk-band__inner > *{color:var(--text-auf-dunkel)}     /* 11,86 zu 1 */
.bk-band--dunkel .bk-band__inner .bk-band__lab{color:var(--bk-orange)} /* 4,74 zu 1 */

/* Preisübersicht auf dunklem Grund. Zwei Einsätze: das Preisfeld rechts in
   der Kurskachel, dort steht sie immer dunkel, und die HyroXOut Seite. */
.bk-preisliste--dunkel caption{color:var(--label-dunkel)}                     /* 7,03 zu 1 */
.bk-preisliste--dunkel th{color:var(--label-dunkel);border-bottom-color:var(--rahmen-dunkel)}
.bk-preisliste--dunkel td{color:var(--text-auf-dunkel);                       /* 11,86 zu 1 */
  border-bottom-color:var(--zierlinie-dunkel)}
.bk-preisliste--dunkel .bk-preisliste__dazu,
.bk-preisliste--dunkel .bk-preisliste__note{color:var(--text-schwach-dunkel)} /* 5,40 zu 1 */

/* ---------- 27 · Abschnitte, die aus den Seitenentwürfen kamen ----------
   Diese sechs Bausteine sind in den Figma Seiten gebaut worden und haben bis
   zum 29.09.2026 in der Bibliothek gefehlt. Sie stehen jetzt hier, damit sie
   nicht beim Bauen neu erfunden werden. */

/* 27a · Farbflächen, die es zusätzlich zu ruhig und dunkel braucht.
   Orange trägt keinen Fließtext, nur kurze Zeilen und Zitate. Auf Orange ist
   Anthrazit die Textfarbe, nicht Weiß. */
.bk-abschnitt--orange{background:var(--bk-orange);color:var(--bk-anthrazit)}
.bk-abschnitt--orange .bk-signal,
.bk-abschnitt--orange .bk-ueberschrift,
.bk-abschnitt--orange .bk-zwischen,
.bk-abschnitt--orange .bk-text,
.bk-abschnitt--orange .bk-label{color:var(--bk-anthrazit)}

.bk-abschnitt--gruen{background:var(--bk-gruen);color:#fff}
.bk-abschnitt--gruen .bk-signal,
.bk-abschnitt--gruen .bk-ueberschrift,
.bk-abschnitt--gruen .bk-zwischen,
.bk-abschnitt--gruen .bk-text,
.bk-abschnitt--gruen .bk-label{color:#fff}

/* Ein Abschnitt, aus dem etwas überhängen soll, darf nichts abschneiden.
   Ohne diese Zeile ist jede Überlappung unsichtbar. */
.bk-abschnitt--ueberhang{overflow:visible}

/* 27b · Die gemalte Kante zwischen zwei Abschnitten.
   Sie sitzt oben im UNTEREN Abschnitt und trägt die Farbe der Fläche DARÜBER.
   Umgekehrt malt der untere Abschnitt darüber und sie ist unsichtbar.
   Der Pfad kommt als SVG aus dem Generator, siehe UMSETZUNG.md Kapitel 12.
   Jede Kante bekommt einen eigenen Pfad, keine zwei sind gleich. */
.bk-kante{position:absolute;top:0;left:0;width:100%;height:var(--kante-abschnitt);
  display:block;pointer-events:none;z-index:1}
.bk-kante svg{display:block;width:100%;height:100%}
.bk-kante--hell svg .f{fill:var(--bk-hell)}
.bk-kante--weiss svg .f{fill:#fff}
.bk-kante--dunkel svg .f{fill:var(--bk-anthrazit)}
.bk-kante--orange svg .f{fill:var(--bk-orange)}
.bk-kante--gruen svg .f{fill:var(--bk-gruen)}
/* Der Abschnitt, der eine Kante trägt, braucht Bezug und genug Polster oben,
   damit der Inhalt nicht in die Welle läuft. */
.bk-abschnitt--kante{position:relative;padding-top:calc(var(--space-9) + var(--kante-abschnitt))}

/* 27c · Anreisser, das Kopfbild mit Verlauf und Text darin.
   Nicht zu verwechseln mit .bk-kopf, das ist der Seitenkopf ohne Bild. */
.bk-anreisser{position:relative;background-size:cover;background-position:center;
  padding-top:var(--space-9);padding-bottom:var(--space-9);overflow:hidden}
.bk-anreisser__schleier{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(54,52,53,.94) 0%, rgba(54,52,53,.80) 70%, rgba(54,52,53,.45) 100%)}
.bk-anreisser__inhalt{position:relative;max-width:46ch}
.bk-anreisser .bk-signal,
.bk-anreisser .bk-ueberschrift{color:var(--bk-hell)}
.bk-anreisser .bk-text{color:var(--text-dunkel)}
.bk-anreisser .bk-label{color:var(--bk-orange)}
/* Am Handy reicht der Text bis unten, deshalb dort ein kräftigerer Schleier. */
@media (max-width:767px){
  .bk-anreisser__schleier{background:linear-gradient(to bottom,
    rgba(54,52,53,.94) 0%, rgba(54,52,53,.82) 50%, rgba(54,52,53,.72) 100%)}
  .bk-anreisser__inhalt{max-width:none}
}

/* 27d · Merkmalband, vier kurze Aussagen nebeneinander auf einer Farbfläche.
   Am Handy untereinander, nicht als Karussell. */
.bk-merkmalband{padding-top:var(--space-6);padding-bottom:var(--space-6)}
.bk-merkmalband__raster{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
@media (min-width:768px){.bk-merkmalband__raster{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.bk-merkmalband__raster{grid-template-columns:repeat(4,1fr);gap:var(--rinne)}}
.bk-merkmal__titel{font-family:var(--font-cond);font-size:var(--fs-zwischen);line-height:1.1;
  font-weight:700;text-transform:uppercase;margin:0 0 var(--space-1)}
.bk-merkmal__text{font-size:var(--fs-klein);line-height:1.5;margin:0}

/* 27e · Partnerband, mehrere Logos nebeneinander mit Bildunterschrift.
   Nicht zu verwechseln mit .bk-partner, das ist der einzelne Hinweiskasten.
   Das Band bricht um, es verträgt beliebig viele Partner. */
.bk-partnerband{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.bk-partnerband__liste{display:flex;flex-wrap:wrap;gap:var(--rinne);margin:var(--space-5) 0 0;padding:0;list-style:none}
.bk-partnerband__eintrag{flex:1 1 220px;min-width:0;background:#fff;border:var(--linie);
  padding:var(--space-5);display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center}
.bk-partnerband__logo{height:60px;width:auto;max-width:100%;object-fit:contain}
.bk-partnerband__text{font-size:var(--fs-klein);line-height:1.5;color:var(--text-mittel);margin:0}

/* 27f · Ein Bild, das über die Abschnittskante hängt.
   Es gehört in den UNTEREN Abschnitt und wird mit negativem Versatz nach oben
   gezogen. Andersherum malt der untere Abschnitt darüber. Alle Vorfahren
   müssen overflow:visible haben. */
.bk-ueberhang{position:relative;z-index:2;margin-top:calc(var(--space-9) * -1);
  border:var(--space-3) solid var(--bk-hell);display:block;max-width:100%}
.bk-ueberhang--dunkel{border-color:var(--bk-anthrazit)}
.bk-ueberhang--weiss{border-color:#fff}
@media (max-width:767px){.bk-ueberhang{margin-top:calc(var(--space-7) * -1);border-width:var(--space-2)}}