/* ==================================================================
   fuehrerscheinausbildung.de - gemeinsames Stylesheet
   ------------------------------------------------------------------
   Abgeleitet aus Designrichtung D (D-006). Die Seite hat kein
   Vorlagensystem (D-004), deshalb ist diese Datei die einzige Stelle,
   an der Farben, Abstaende und Komponenten zentral liegen. Kopf- und
   Fussmarkup steht in jeder Seite erneut - was hier steht, muss dort
   nicht wiederholt werden.
   ================================================================== */

/* ==================================================================
   RICHTUNG D — Farben aus B, Struktur aus C, gehoben
   ------------------------------------------------------------------
   Art Direction: Die gefuehrte Etappenlogik aus C, aber in der
   zweifarbigen Markenwelt aus B - und mit dem, was den ersten
   Prototypen gefehlt hat: ein Radius-System, echte Bildflaechen,
   ein Hero mit zwei Haelften statt einer Ueberschrift, und Tiefe
   durch Schichtung statt durch Farbe.

   Bewusst NICHT verwendet: abgedunkeltes Vollbildfoto mit Text
   darauf (generisch, schlechter Kontrast, austauschbar). Stattdessen
   traegt eine Anthrazitflaeche den Text und das Bild steht daneben -
   lesbar, markentreu, und auf dem Telefon sauber stapelbar.
   ================================================================== */

/* --- Tokens ---------------------------------------------------- */
:root{
  /* Farbe - ausschliesslich Markenfarben, keine Branchencodierung.

     TESTFASSUNG BLAU vom 2026-09-21. Kundenwunsch Frank Schupke
     (WhatsApp 20.09.2026): dunkles Grau -> #035DAB, helles Grau ->
     #666D73, Gelb -> #FFC108. Die alten Werte stehen je Zeile als
     Kommentar; ein Rueckbau ist damit eine Suche-und-Ersetze-Runde.

     Drei Token wurden zusaetzlich mitgezogen, weil sie Abstufungen der
     dunklen Flaeche sind: blieben sie grau, saesse ein grauer Hover auf
     einer blauen Flaeche. Zwei weitere mussten heller werden, weil das
     Blau deutlich heller ist als das alte Anthrazit und sonst
     WCAG AA reissen wuerde - Begruendung je Zeile. */
  --tief:#012E55;              /* vorher #141517 - Kopf und Fuss, dunkelste Flaeche */
  --anthrazit:#035DAB;         /* vorher #232426 - KUNDENWUNSCH */
  --anthrazit-2:#0469C2;       /* vorher #2c2e31 - Hover auf der dunklen Flaeche */
  --linie:#3B82C9;             /* vorher #393b3f - Trennlinie auf der dunklen Flaeche */
  --gelb:#FFC108;              /* vorher #F2CA04 - KUNDENWUNSCH */
  --gelb-hell:#ffd934;         /* unveraendert */
  /* Gelbe SCHRIFT auf der blauen Flaeche: #FFC108 erreicht dort nur
     4,08:1 und verfehlt die 4,5:1 fuer Fliesstext. Auf dem alten
     Anthrazit waren es 9,78:1. Fuer Schrift auf Blau gilt deshalb der
     hellere Ton mit 4,82:1; als Flaeche, Rand und Aufzaehlungszeichen
     bleibt es beim Kundengelb. */
  --gelb-text:#ffd934;         /* neu in der Testfassung */
  --papier:#f6f6f5;
  --papier-2:#ffffff;
  --text:#232426;              /* unveraendert - Fliesstext bleibt dunkelgrau, nicht blau */
  --text-leise:#666D73;        /* vorher #5c5f64 - KUNDENWUNSCH */
  --text-invers:#ffffff;
  /* Leiser Text auf der dunklen Flaeche: #b6b8bc kam auf dem Blau nur
     auf 3,35:1 statt 7,82:1 auf Anthrazit. Deshalb heller. */
  --text-invers-leise:#d4d6d9; /* vorher #b6b8bc */

  /* Radius - die Skala, die vorher gefehlt hat */
  --r-s:10px;
  --r-m:16px;
  --r-l:24px;
  --r-xl:34px;

  /* Tiefe - sparsam, nur wo etwas wirklich oben liegt */
  --schatten-s:0 1px 2px rgba(20,21,23,.06), 0 2px 8px rgba(20,21,23,.05);
  --schatten-m:0 2px 4px rgba(20,21,23,.06), 0 12px 28px rgba(20,21,23,.10);
  --schatten-l:0 4px 8px rgba(20,21,23,.08), 0 24px 56px rgba(20,21,23,.16);

  /* Rhythmus */
  --raum:clamp(2.5rem,1.6rem + 3.4vw,4.5rem);

  /* Schrift: schmale Grotesk fuer Ueberschriften (Markenbezug zu
     Oswald), normal laufende Grotesk fuer Fliesstext. Die bestehende
     Seite setzt auch den Fliesstext condensed - fuer eine Zielgruppe,
     die teils Deutsch als Zweitsprache spricht, ist das zu eng. */
  --schrift-titel:"Oswald","Bahnschrift Condensed","Bahnschrift",
                  "Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  --schrift-text:"Roboto","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--text);
  font-family:var(--schrift-text);
  font-size:clamp(1rem,.96rem + .2vw,1.09rem);line-height:1.65;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--schrift-titel);font-weight:700;line-height:1.08;
  letter-spacing:-.005em;margin:0;text-wrap:balance}
p{margin:0 0 1rem}
a{color:inherit}
img{max-width:100%;display:block}
/* Doppelring: Gelb allein erreicht auf hellem Grund nur 1,59:1 und waere
   fuer Tastaturnutzer auf der Papierflaeche praktisch unsichtbar. Der
   dunkle Kern traegt den Kontrast auf Hell, der gelbe Ring auf Dunkel -
   so ist der Fokus auf jedem Untergrund dieser Seite deutlich. */
:focus-visible{outline:3px solid var(--tief);outline-offset:2px;
  box-shadow:0 0 0 6px rgba(255,193,8,.95);border-radius:var(--r-s)}
.huelle{width:min(1180px,100% - 2.5rem);margin-inline:auto}

/* --- Sprung zum Inhalt ------------------------------------------
   Ohne ihn muss sich ein Tastaturnutzer auf jeder Seite erneut durch
   Logo, Menue, Telefonnummer und Brotkrumen tabben, bevor der Text
   beginnt - hier waeren das sechzehn Stationen. Sichtbar wird der Link
   erst, wenn er den Fokus bekommt. */
.zum-inhalt{position:absolute;left:1rem;top:-100%;z-index:40;
  background:var(--gelb);color:var(--tief);text-decoration:none;
  font-family:var(--schrift-titel);font-weight:700;
  padding:.75rem 1.25rem;border-radius:0 0 var(--r-m) var(--r-m);
  box-shadow:var(--schatten-m);transition:top .15s ease}
.zum-inhalt:focus-visible{top:0}

.leise{color:var(--text-leise)}

/* --- Bilder ----------------------------------------------------- */
/* Die Flaeche steht ueber aspect-ratio bzw. min-height fest, bevor das
   Bild geladen ist - so springt beim Laden nichts. Der dunkle Grund
   traegt die Flaeche, falls ein Bild ausfaellt. */
.hero__bild{width:100%;height:100%;min-height:clamp(220px,44vw,240px);
  object-fit:cover;border-radius:var(--r-xl);box-shadow:var(--schatten-m);
  background:var(--anthrazit-2);align-self:stretch}
/* height:auto ist hier nicht kosmetisch, sondern noetig: das
   height-Attribut am <img> wirkt als Praesentationshinweis. Bleibt es
   stehen, sind Breite und Hoehe beide definit, aspect-ratio wird
   ignoriert und das Bild zieht sich auf 800px Hoehe hochkant. */
.kachel__bild{display:block;width:100%;height:auto;aspect-ratio:3/2;
  object-fit:cover;background:var(--anthrazit-2);
  transition:transform .3s ease}
.kachel{isolation:isolate}
.kachel .kachel__bild{will-change:transform}
.kachel:hover .kachel__bild,
.kachel:focus-visible .kachel__bild{transform:scale(1.035)}

/* --- Kopf ------------------------------------------------------ */
.kopf{background:var(--tief);color:var(--text-invers);
  position:sticky;top:0;z-index:20;
  border-bottom:1px solid var(--linie)}
.kopf__reihe{display:flex;align-items:center;gap:1rem;
  padding-block:.85rem;flex-wrap:wrap}
/* Kein Flex: sonst werden die Textknoten neben <b> zu eigenen
   Flex-Items und der gap reisst das Wort auseinander. */
.marke{font-family:var(--schrift-titel);font-weight:700;font-size:1.1rem;
  letter-spacing:.01em;text-transform:uppercase;text-decoration:none;
  margin-right:auto;display:inline-block;line-height:1.5}
.marke b{color:var(--gelb);font-weight:700}
.nav{display:none}
@media(min-width:64rem){
  .nav{display:flex;gap:.35rem;list-style:none;margin:0;padding:0}
  .nav a{display:block;text-decoration:none;font-size:.95rem;
    color:var(--text-invers-leise);padding:.45rem .8rem;
    border-radius:999px;transition:background .15s,color .15s}
  .nav a:hover,.nav a:focus-visible{background:var(--anthrazit-2);
    color:var(--text-invers)}
}
.kopf__ruf{display:none;align-items:center;gap:.5rem;
  background:var(--gelb);color:var(--tief);text-decoration:none;
  font-weight:700;padding:.6rem 1.15rem;border-radius:999px;
  white-space:nowrap;transition:background .15s,transform .12s;
  box-shadow:0 6px 18px rgba(255,193,8,.18)}
.kopf__ruf:hover{background:var(--gelb-hell);transform:translateY(-1px)}
.kopf__ruf svg{width:1.05em;height:1.05em;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Auf dem Telefon steht die Nummer nicht im Kopf, sondern als
   schwebender Knopf unten rechts - dort ist sie mit dem Daumen
   erreichbar und der Kopf bleibt ruhig. */
@media(min-width:64rem){.kopf__ruf{display:inline-flex}}

.menue{display:inline-flex;align-items:center;gap:.5rem;
  background:transparent;border:1px solid var(--linie);
  color:var(--text-invers);font:inherit;font-weight:600;
  padding:.5rem .9rem;border-radius:999px;cursor:pointer}
.menue:hover{background:var(--anthrazit-2)}
.menue svg{width:1.05em;height:1.05em;stroke:currentColor;fill:none;
  stroke-width:2.2;stroke-linecap:round}
.menue .balken{display:block}
.menue .kreuz{display:none}
.menue[aria-expanded="true"] .balken{display:none}
.menue[aria-expanded="true"] .kreuz{display:block}
/* Offen zeigt der Knopf nur das Kreuz. Mit dem Wort "Schliessen" wird er
   breiter als mit "Menue" und bricht in der Kopfzeile um. Das Wort wird
   nur optisch entfernt, nicht aus dem Accessibility-Baum - sonst haette
   der Knopf fuer einen Screenreader keinen Namen mehr. */
.menue[aria-expanded="true"]{width:2.75rem;height:2.75rem;padding:0;
  justify-content:center;gap:0}
.menue[aria-expanded="true"] .menue__wort{position:absolute;width:1px;
  height:1px;margin:-1px;padding:0;overflow:hidden;white-space:nowrap;
  clip-path:inset(50%);border:0}
.menue[aria-expanded="true"] svg{width:1.15em;height:1.15em}
@media(min-width:64rem){.menue{display:none}}

/* --- Schwebender Anruf-Knopf ------------------------------------ */
.ruf-schwebend{position:fixed;z-index:30;
  right:max(1rem,env(safe-area-inset-right));
  bottom:max(1rem,env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--gelb);color:var(--tief);text-decoration:none;
  font-family:var(--schrift-titel);font-weight:700;font-size:1.05rem;
  letter-spacing:.02em;padding:.95rem 1.5rem;border-radius:999px;
  box-shadow:0 8px 20px rgba(20,21,23,.3),0 2px 6px rgba(20,21,23,.22);
  transition:transform .14s ease,background .15s}
.ruf-schwebend:hover{background:var(--gelb-hell);transform:translateY(-2px)}
.ruf-schwebend:active{transform:translateY(0)}
.ruf-schwebend svg{width:1.25em;height:1.25em;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:64rem){.ruf-schwebend{display:none}}
/* Bei offenem Menue tritt der Knopf zurueck. Sonst liegt er ueber der
   abgedunkelten Flaeche, und ein Tipp "daneben" wuerde anrufen statt
   das Menue zu schliessen. */
.menue-schatten.offen ~ .kontakt{opacity:0;visibility:hidden;
  transition:opacity .15s ease,visibility .15s}

/* --- Aufklappbarer Kontaktknopf (nur Telefon) --------------------- */
.kontakt{position:fixed;z-index:30;
  right:max(1rem,env(safe-area-inset-right));
  bottom:max(1rem,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
@media(min-width:64rem){.kontakt{display:none}}

.kontakt__knopf{width:3.5rem;height:3.5rem;border:0;border-radius:50%;
  background:var(--gelb);color:var(--tief);cursor:pointer;
  display:grid;place-items:center;
  box-shadow:0 8px 20px rgba(20,21,23,.32),0 2px 6px rgba(20,21,23,.24);
  transition:transform .16s ease,background .15s}
.kontakt__knopf:hover{background:var(--gelb-hell)}
.kontakt__knopf svg{width:1.6rem;height:1.6rem;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kontakt__knopf .schliessen{display:none}
.kontakt__knopf[aria-expanded="true"]{background:var(--anthrazit);
  color:var(--gelb);transform:rotate(90deg)}
.kontakt__knopf[aria-expanded="true"] .oeffnen{display:none}
.kontakt__knopf[aria-expanded="true"] .schliessen{display:block}

.kontakt__liste{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;
  align-items:flex-end;justify-items:end;
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.96);
  transform-origin:bottom right;
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
.kontakt__liste.offen{opacity:1;visibility:visible;transform:none}
.kontakt__liste a{display:inline-flex;align-items:center;gap:.6rem;
  background:var(--anthrazit);color:var(--text-invers);text-decoration:none;
  font-family:var(--schrift-titel);font-weight:700;font-size:.98rem;
  padding:.7rem 1.1rem;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 16px rgba(20,21,23,.28)}
.kontakt__liste a:hover{background:var(--anthrazit-2)}
.kontakt__liste svg{width:1.15rem;height:1.15rem;stroke:var(--gelb);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Platz, damit der Knopf den Seitenfuss nicht verdeckt */
@media(max-width:63.999rem){body{padding-bottom:5.5rem}}

/* --- Mobilmenue ------------------------------------------------- */
.menue-panel{position:absolute;top:100%;left:0;right:0;
  background:var(--anthrazit);border-bottom:1px solid var(--linie);
  box-shadow:var(--schatten-l);padding:.5rem 0 1rem;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
.menue-panel.offen{opacity:1;visibility:visible;transform:none}
.menue-panel ul{list-style:none;margin:0;padding:0}
.menue-panel a{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;text-decoration:none;color:var(--text-invers);
  font-family:var(--schrift-titel);font-weight:700;font-size:1.15rem;
  text-transform:uppercase;letter-spacing:.01em;
  padding:.95rem 1.25rem;border-bottom:1px solid var(--linie)}
.menue-panel li:last-child a{border-bottom:0}
.menue-panel a:hover,.menue-panel a:focus-visible{background:var(--anthrazit-2)}
.menue-panel a span{color:var(--text-invers-leise);font-family:var(--schrift-text);
  font-weight:400;font-size:.85rem;text-transform:none;letter-spacing:0}
.menue-schatten{position:fixed;inset:0;z-index:19;
  background:rgba(20,21,23,.6);opacity:0;visibility:hidden;
  transition:opacity .18s ease,visibility .18s}
.menue-schatten.offen{opacity:1;visibility:visible}
@media(min-width:64rem){.menue-panel,.menue-schatten{display:none}}

/* --- Hero: zwei Haelften --------------------------------------- */
.hero{padding-block:clamp(2rem,1.2rem + 3vw,4rem) var(--raum)}
.hero__gitter{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:62rem){
  /* minmax(0,…) statt blossem fr: eine fr-Spalte hat als Mindestbreite
     auto, und ein Bild mit width-Attribut bringt seine Eigenbreite mit.
     Ohne die 0 quetscht das Foto die Textspalte zusammen. */
  .hero__gitter{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap:1.5rem;align-items:stretch}
}
.hero__text{background:var(--anthrazit);color:var(--text-invers);
  border-radius:var(--r-xl);padding:clamp(1.6rem,1.1rem + 2vw,3rem);
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:var(--schatten-l);position:relative;overflow:hidden}
.augen{display:inline-flex;align-items:center;gap:.5rem;
  align-self:flex-start;font-family:var(--schrift-titel);font-weight:700;
  font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;
  /* Fuellung bewusst schwach: schon 10 Prozent Gelb hellen das Blau so
     weit auf, dass die gelbe Schrift darauf unter 4,5:1 faellt. Die
     Form traegt ohnehin der Rand. */
  color:var(--gelb-text);background:rgba(255,193,8,.06);
  border:1px solid rgba(255,193,8,.3);border-radius:999px;
  padding:.3rem .85rem;margin-bottom:1.1rem}
.hero h1{font-size:clamp(2rem,1.35rem + 3.1vw,3.4rem);text-transform:uppercase;
  margin-bottom:.7rem}
.hero h1 em{font-style:normal;color:var(--gelb-text);display:block}
.hero__unter{color:var(--text-invers-leise);font-size:clamp(1rem,.97rem + .3vw,1.16rem);
  max-width:46ch;margin-bottom:1.6rem}
.hero__aktionen{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.6rem}
.knopf{display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--schrift-titel);font-weight:700;font-size:1.02rem;
  letter-spacing:.01em;text-decoration:none;padding:.85rem 1.5rem;
  border-radius:999px;transition:transform .12s,background .15s,border-color .15s}
.knopf svg{width:1.1em;height:1.1em;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.knopf--voll{background:var(--gelb);color:var(--tief);
  box-shadow:0 8px 24px rgba(255,193,8,.22)}
.knopf--voll:hover{background:var(--gelb-hell);transform:translateY(-2px)}
.knopf--rand{border:1px solid var(--linie);color:var(--text-invers)}
.knopf--rand:hover{border-color:var(--gelb);background:var(--anthrazit-2)}
.vertrauen{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;
  padding-top:1.3rem;border-top:1px solid var(--linie);
  font-size:.88rem;color:var(--text-invers-leise)}
.vertrauen span{display:inline-flex;align-items:center;gap:.45rem}
.vertrauen svg{width:1rem;height:1rem;stroke:var(--gelb);fill:none;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* --- Etappen --------------------------------------------------- */
.etappe{padding-block:var(--raum)}
.etappe--hell{background:var(--papier-2);
  border-block:1px solid #e7e7e6}
.etappe__kopf{max-width:60ch;margin-bottom:clamp(1.4rem,1rem + 1.2vw,2.2rem)}
.etappe__nr{display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--schrift-titel);font-weight:700;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-leise);
  margin-bottom:.65rem}
.etappe__nr b{display:grid;place-items:center;width:1.8rem;height:1.8rem;
  background:var(--gelb);color:var(--tief);border-radius:50%;font-size:.95rem}
.etappe h2{font-size:clamp(1.65rem,1.25rem + 1.9vw,2.5rem);
  text-transform:uppercase;margin-bottom:.55rem}
.etappe__unter{color:var(--text-leise);font-size:1.03rem;margin:0}

/* Schritt 1 — Bildkacheln */
.kacheln{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:36rem){.kacheln{grid-template-columns:1fr 1fr}}
@media(min-width:68rem){.kacheln{grid-template-columns:repeat(4,1fr)}}
.kachel{display:flex;flex-direction:column;background:var(--papier-2);
  border:1px solid #e4e4e3;border-radius:var(--r-l);overflow:hidden;
  text-decoration:none;box-shadow:var(--schatten-s);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s}
/* Rand bei Hover anthrazit statt gelb: Gelb auf Weiss ist mit 1,59:1
   auch optisch kaum wahrnehmbar. Das Markensignal traegt stattdessen
   der gelbe Pfeil, der mitwandert. */
.kachel:hover,.kachel:focus-visible{transform:translateY(-4px);
  box-shadow:var(--schatten-m);border-color:var(--anthrazit)}
/* Der Pfeil wandert bei Hover, wechselt aber nicht die Farbe: jedes
   Gelb, das auf Weiss noch als Gelb gilt, bleibt unter 4,5:1. */
.kachel__mehr{color:var(--text)}
.kachel__leiste{padding:1rem 1.15rem 1.15rem;display:flex;
  flex-direction:column;gap:.15rem;flex:1}
.kachel__name{font-family:var(--schrift-titel);font-weight:700;
  font-size:1.35rem;text-transform:uppercase;line-height:1.1}
.kachel__klassen{font-size:.86rem;letter-spacing:.06em;color:var(--text-leise);
  font-weight:600}
.kachel__hinweis{font-size:.87rem;color:var(--text-leise);margin-top:.35rem}
.kachel__mehr{margin-top:auto;padding-top:.85rem;display:inline-flex;
  align-items:center;gap:.4rem;font-family:var(--schrift-titel);
  font-weight:700;font-size:.9rem;text-transform:uppercase;
  letter-spacing:.05em}
.kachel__mehr span{transition:transform .16s}
.kachel:hover .kachel__mehr span{transform:translateX(4px)}

/* Schritt 2 — zwei Wege */
.wege{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:56rem){.wege{grid-template-columns:1fr 1fr}}
.weg{border-radius:var(--r-l);padding:clamp(1.3rem,1rem + 1.1vw,2rem);
  border:1px solid #e4e4e3;background:var(--papier-2)}
.weg--beruf{background:var(--anthrazit);color:var(--text-invers);
  border-color:var(--anthrazit);box-shadow:var(--schatten-m);
  position:relative}
.weg--beruf::before{content:"Der Weg zum Beruf";position:absolute;
  top:-.75rem;left:clamp(1.3rem,1rem + 1.1vw,2rem);
  background:var(--gelb);color:var(--tief);font-family:var(--schrift-titel);
  font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.28rem .8rem;border-radius:999px}
.weg h3{font-family:var(--schrift-titel);font-size:1.3rem;
  text-transform:uppercase;margin-bottom:.6rem}
.weg--beruf h3{color:var(--gelb-text)}
.weg p{font-size:.98rem}
.weg--beruf p{color:var(--text-invers-leise)}
.punkte{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.punkte li{display:flex;gap:.6rem;align-items:flex-start;font-size:.96rem}
.punkte svg{flex:none;width:1.1rem;height:1.1rem;margin-top:.3rem;
  stroke:var(--gelb);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.weg--beruf .punkte li{color:var(--text-invers-leise)}

/* Schritt 3 — Abschluss */
.abschluss{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:56rem){.abschluss{grid-template-columns:1.05fr .95fr;
  align-items:start}}
.zahlen{display:grid;gap:.75rem}
.zahl{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;background:var(--papier-2);border:1px solid #e4e4e3;
  border-radius:var(--r-m);padding:.95rem 1.15rem}
.zahl dt{color:var(--text-leise);font-size:.95rem;margin:0}
.zahl dd{margin:0;text-align:right;font-family:var(--schrift-titel);
  font-weight:700;font-size:1.25rem;line-height:1.2}
.zahl dd small{display:block;font-family:var(--schrift-text);font-weight:400;
  font-size:.78rem;color:var(--text-leise);line-height:1.4;margin-top:.15rem}
.platzhalter{background:#fff2bf;border-bottom:2px dotted #8a6d00;
  border-radius:4px;padding:0 .3rem}
.tafel{background:var(--anthrazit);color:var(--text-invers);
  border-radius:var(--r-xl);padding:clamp(1.5rem,1.1rem + 1.4vw,2.2rem);
  box-shadow:var(--schatten-l);position:relative;overflow:hidden}
.tafel::before{content:"";position:absolute;right:-60px;top:-60px;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,193,8,.16),transparent 68%)}
.tafel h3{font-size:1.5rem;text-transform:uppercase;margin-bottom:.5rem;
  position:relative}
.tafel p{color:var(--text-invers-leise);font-size:.98rem;position:relative}
.tafel__nr{display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--schrift-titel);font-weight:700;
  font-size:clamp(1.5rem,1.2rem + 1.5vw,2.05rem);color:var(--gelb-text);
  text-decoration:none;position:relative;line-height:1.2}
.tafel__nr:hover{text-decoration:underline}
.tafel__nr svg{width:1em;height:1em;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tafel__zeit{display:block;font-size:.85rem;color:var(--text-invers-leise);
  margin-top:.35rem;position:relative}
.tafel__wa{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;
  /* var(--linie) auf var(--anthrazit) ergibt nur 1,38:1 - fuer den
     Rand eines Bedienelements zu wenig (Soll 3:1). Gleiche Loesung wie
     bei .knopf--hell auf dunklem Grund.
     Testfassung Blau: vorher #7a7d82, das auf dem helleren Blau nur
     1,61:1 erreicht. Der neue Ton kommt auf 3,55:1. */
  border:1px solid #a9c0d8;border-radius:999px;padding:.6rem 1.15rem;
  text-decoration:none;font-size:.95rem;position:relative;
  transition:border-color .15s,background .15s}
.tafel__wa:hover{border-color:var(--gelb);background:var(--anthrazit-2)}
/* Ohne diese Regel hat ein svg ohne width/height-Attribut keine Groesse
   im Sinne des Browsers - es rendert mit der Standardgroesse von
   300x150px. Betraf den neu eingefuegten Fahrschul-Link, der als erster
   in .tafel__wa ein Icon bekam. */
.tafel__wa svg{width:1.1em;height:1.1em;flex:none;stroke:currentColor;
  fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* --- Fuss ------------------------------------------------------ */
.fuss{background:var(--tief);color:var(--text-invers-leise);
  padding-block:2.5rem;font-size:.92rem}
.fuss__gitter{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:48rem){.fuss__gitter{grid-template-columns:1.3fr 1fr 1fr}}
.fuss h2{font-family:var(--schrift-titel);color:var(--text-invers);
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 .65rem}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--gelb);text-decoration:underline}
.fuss address{font-style:normal;line-height:1.75}
.fuss__unten{margin-top:2rem;padding-top:1.25rem;
  border-top:1px solid var(--linie);font-size:.85rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;justify-content:space-between}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .kachel:hover{transform:none}
  .kachel:hover .kachel__bild{transform:none}
  .menue-panel{transform:none}
  .ruf-schwebend:hover{transform:none}
}

/* ==================================================================
   KLASSENSEITE
   Komponenten, die es auf der Startseite noch nicht gab. Sie folgen
   demselben Tokensatz - kein zweites Farb- oder Radiussystem.
   ================================================================== */

/* --- Brotkrumen ------------------------------------------------- */
.krumen{padding-block:1rem .25rem;font-size:.88rem;color:var(--text-leise)}
.krumen ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:.35rem .5rem;align-items:center}
.krumen li{display:flex;align-items:center;gap:.5rem}
.krumen li+li::before{content:"›";color:#a6a8ac}
.krumen a{text-decoration:none;border-bottom:1px solid #cfd0d2}
.krumen a:hover{border-bottom-color:var(--text)}
.krumen [aria-current]{font-weight:600;color:var(--text)}

/* --- Seitenkopf ------------------------------------------------- */
.seitenkopf{padding-block:clamp(1.5rem,.9rem + 2.4vw,3.25rem) var(--raum)}
.seitenkopf__gitter{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:60rem){
  .seitenkopf__gitter{grid-template-columns:minmax(0,1.45fr) minmax(0,25rem);
    gap:2.5rem;align-items:start}
}
.seitenkopf h1{font-size:clamp(1.9rem,1.35rem + 2.6vw,3rem);
  text-transform:uppercase;margin-bottom:.6rem}
.seitenkopf h1 small{display:block;font-size:.38em;letter-spacing:.09em;
  color:var(--text-leise);font-weight:700;margin-bottom:.45rem}
.merksatz{font-size:clamp(1.05rem,1rem + .5vw,1.35rem);max-width:60ch;
  margin-bottom:1.6rem}
.kopfaktionen{display:flex;flex-wrap:wrap;gap:.7rem}
.knopf--dunkel{background:var(--anthrazit);color:var(--text-invers)}
.knopf--dunkel:hover{background:var(--anthrazit-2);transform:translateY(-2px)}
/* Randfarbe traegt hier die Erkennbarkeit des Bedienelements und muss
   deshalb 3:1 erreichen - #d5d5d4 kam auf 1,47:1. */
.knopf--hell{border:1px solid #8a8d91;color:var(--text);background:var(--papier-2)}
.knopf--hell:hover{border-color:var(--anthrazit)}

/* --- Faktenkasten ----------------------------------------------- */
.fakten{background:var(--anthrazit);color:var(--text-invers);
  border-radius:var(--r-l);padding:1.4rem;box-shadow:var(--schatten-m)}
.fakten h2{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gelb-text);margin-bottom:1rem}
.fakten dl{margin:0;display:grid;gap:.85rem}
.fakten div{display:grid;gap:.1rem;padding-bottom:.85rem;
  border-bottom:1px solid var(--linie)}
.fakten div:last-child{border-bottom:0;padding-bottom:0}
.fakten dt{font-size:.85rem;color:var(--text-invers-leise);margin:0}
.fakten dd{margin:0;font-family:var(--schrift-titel);font-weight:700;
  font-size:1.12rem;line-height:1.25}
.fakten dd small{display:block;font-family:var(--schrift-text);font-weight:400;
  font-size:.8rem;color:var(--text-invers-leise);line-height:1.45;
  margin-top:.2rem}

/* --- Textabschnitte --------------------------------------------- */
.inhalt{padding-block:0 var(--raum)}
.inhalt__gitter{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:60rem){
  /* Kein align-items:start hier: Damit waere die Randspalte genau so hoch
     wie ihr Inhalt, und position:sticky haette keinen Weg zum Kleben.
     Die Spalte muss ueber die volle Zeilenhoehe reichen. */
  .inhalt__gitter{grid-template-columns:minmax(0,1fr) minmax(0,22rem);
    gap:4rem;align-items:stretch}
  .inhalt__gitter > aside{align-self:stretch;height:100%}
}
 /* Jeder Abschnitt ist ein eigener Block mit Luft davor und einer
    gelben Marke ueber der Ueberschrift. Vorher standen die Abschnitte
    dicht aufeinander und die Seite las sich als eine lange Bahn. */
.text > section{padding-top:clamp(2.25rem,1.5rem + 2.4vw,3.75rem)}
.text > section:first-of-type{padding-top:.5rem}
.text > section + section{border-top:1px solid #e6e6e5}

/* Abschnittsziffer, leise. Sie zaehlt die section-Elemente per
   CSS-Zaehler - beim Einfuegen oder Loeschen eines Abschnitts zaehlt
   sich alles neu, es ist nie eine Zahl von Hand zu pflegen.
   Bewusst als graue Ziffer und nicht als dunkles Kaestchen: ein
   Kaestchen liest sich als Schritt, den man abarbeiten muss, eine
   Ziffer als blosse Ordnungszahl. Die Abschnitte dieser Seite sind
   Nachschlagethemen, keine Schrittfolge. */
.text{counter-reset:abschnitt}
.text > section{counter-increment:abschnitt}
.text h2{font-size:clamp(1.45rem,1.2rem + 1.2vw,2.05rem);text-transform:uppercase;
  margin:0 0 1rem;scroll-margin-top:6rem;position:relative;padding-top:1.6rem}
.text h2::before{content:counter(abschnitt,decimal-leading-zero);
  position:absolute;top:0;left:0;font-family:var(--schrift-titel);
  font-size:.82rem;font-weight:700;letter-spacing:.14em;
  color:var(--text-leise)}
.text h2::after{content:"";position:absolute;top:.45rem;left:2rem;
  width:1.5rem;height:2px;background:var(--gelb);border-radius:1px}
.text h3{font-size:1.15rem;margin:1.75rem 0 .6rem}
.text p{max-width:84ch}
.text ul,.text ol{max-width:84ch;padding-left:1.3rem}
.text li{margin-bottom:.45rem}
.text li::marker{color:var(--gelb)}

/* Datenliste fuer Zahlenwerte - als abgesetzte Karte, damit Zahlen
   sich vom Fliesstext abheben statt in ihm zu verschwinden. */
.werte{margin:1.25rem 0 1.75rem;max-width:84ch;background:var(--papier-2);
  border:1px solid #e6e6e5;border-radius:var(--r-m);padding:.35rem 1.25rem;
  box-shadow:var(--schatten-s)}
.werte div{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:.35rem 1.5rem;padding:.85rem 0;border-bottom:1px solid #eeeeed}
.werte div:last-child{border-bottom:0}
.werte dt{color:var(--text-leise);margin:0}
.werte dd{margin:0;font-weight:700;text-align:right;
  font-family:var(--schrift-titel);font-size:1.05rem}

/* Haken-Liste fuer Unterlagen */
.haken{list-style:none;margin:1.25rem 0 1.75rem;max-width:84ch;
  display:grid;gap:.7rem;background:var(--papier-2);border:1px solid #e6e6e5;
  border-radius:var(--r-m);padding:1.15rem 1.35rem;box-shadow:var(--schatten-s)}
.haken li{display:flex;gap:.65rem;align-items:flex-start;margin:0}
.haken svg{flex:none;width:1.15rem;height:1.15rem;margin-top:.32rem;
  stroke:var(--gelb);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}

/* Hinweiskasten.
   Die Kante war zuerst gelb - auf weissem Grund sind das 1,59:1. Weil der
   Kasten selbst weiss auf fast weissem Papier steht, war er damit praktisch
   nicht als Kasten erkennbar. Kante jetzt anthrazit (15,5:1), dazu ein
   Rahmen; Gelb traegt hier nichts, was man sehen koennte. */
.hinweis{border:1px solid #e0e0df;border-left:4px solid var(--anthrazit);
  background:var(--papier-2);
  border-radius:0 var(--r-m) var(--r-m) 0;padding:1.25rem 1.4rem;
  margin:1.75rem 0;max-width:84ch;box-shadow:var(--schatten-s)}
.hinweis p:last-child{margin-bottom:0}
.hinweis strong{font-family:var(--schrift-titel);text-transform:uppercase;
  letter-spacing:.03em;font-size:.95rem}

/* --- Sprungmarken (Randspalte) ---------------------------------- */
/* Klebt beim Scrollen mit und zeigt ueber aria-current, wo man gerade
   ist. Den Zustand setzt assets/inhalt.js per IntersectionObserver;
   ohne Javascript bleibt es eine gewoehnliche Sprungliste. */
.sprungliste{position:sticky;top:5.5rem;background:var(--papier-2);
  border:1px solid #e4e4e3;border-radius:var(--r-l);padding:1.25rem 1.1rem;
  max-height:calc(100vh - 7rem);overflow-y:auto;box-shadow:var(--schatten-s)}
.sprungliste h2{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-leise);margin:0 0 .8rem;padding-left:.75rem}
/* Dieselbe Zaehlung wie im Text. Hier ist sie am Platz: das Verzeichnis
   ist ohnehin eine geordnete Liste, und die Ziffern beantworten, wie
   weit man ist. Die Reihenfolge muss mit den Abschnitten uebereinstimmen -
   werkzeuge/seiten-pruefen.py vergleicht beide. */
.sprungliste ol{list-style:none;margin:0;padding:0;display:grid;gap:.1rem;
  border-left:2px solid #e9e9e8;counter-reset:sprung}
.sprungliste li{counter-increment:sprung}
.sprungliste a{display:flex;gap:.65rem;text-decoration:none;font-size:.94rem;
  padding:.45rem .75rem;color:var(--text-leise);
  border-left:2px solid transparent;margin-left:-2px;
  transition:color .15s,border-color .15s,background .15s}
.sprungliste a::before{content:counter(sprung,decimal-leading-zero);
  font-family:var(--schrift-titel);font-weight:700;font-size:.78rem;
  letter-spacing:.06em;flex:none;opacity:.8}
.sprungliste a:hover,.sprungliste a:focus-visible{color:var(--text);
  border-left-color:#c9cacb}
.sprungliste a[aria-current="true"]{color:var(--text);font-weight:700;
  border-left-color:var(--gelb);background:linear-gradient(
    90deg,rgba(255,193,8,.14),rgba(255,193,8,0))}
@media(max-width:59.999rem){.sprungliste{display:none}}

/* --- FAQ --------------------------------------------------------- */
.faq{display:grid;gap:.6rem;max-width:84ch;margin:1.25rem 0 0}
.faq details{background:var(--papier-2);border:1px solid #e4e4e3;
  border-radius:var(--r-m);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:.95rem 1.15rem;
  font-family:var(--schrift-titel);font-weight:700;font-size:1.02rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;flex:none;
  color:var(--text-leise)}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{background:var(--papier)}
.faq .antwort{padding:0 1.15rem 1.1rem}
.faq .antwort p:last-child{margin-bottom:0}

/* --- Nachbarklassen ---------------------------------------------- */
.nachbarn{display:grid;gap:.8rem;grid-template-columns:1fr;margin-top:1rem}
@media(min-width:38rem){.nachbarn{grid-template-columns:1fr 1fr}}
.nachbar{display:block;text-decoration:none;background:var(--papier-2);
  border:1px solid #e4e4e3;border-radius:var(--r-m);padding:1rem 1.15rem;
  transition:border-color .15s,transform .15s}
.nachbar:hover{border-color:var(--anthrazit);transform:translateY(-2px)}
.nachbar b{display:block;font-family:var(--schrift-titel);font-size:1.1rem;
  text-transform:uppercase}
.nachbar span{font-size:.9rem;color:var(--text-leise)}

/* --- Quellen- und Standangabe ------------------------------------ */
.stand{margin-top:var(--raum);padding-top:1.25rem;border-top:1px solid #e2e2e1;
  font-size:.85rem;color:var(--text-leise);max-width:72ch}
.stand dt{font-weight:600;color:var(--text);margin-top:.6rem}
.stand dd{margin:0 0 .2rem}
.stand__warnung{background:#fff2bf;border-radius:var(--r-s);
  padding:.75rem .95rem;color:#5b4a00;margin-bottom:1rem}

@media(prefers-reduced-motion:reduce){
  .nachbar:hover,.knopf--dunkel:hover{transform:none}
  .kontakt__knopf[aria-expanded="true"]{transform:none}
  .kontakt__liste{transform:none}
}

/* ==================================================================
   GRUPPENSEITE (Lkw, Motorrad, Auto, Bus)
   Beantwortet die Auswahlfrage: welche Klasse brauche ich?
   ================================================================== */

/* --- Klassenkarten ----------------------------------------------- */
.klassen{display:grid;gap:1.1rem;grid-template-columns:1fr;
  margin:1.5rem 0 0}
@media(min-width:46rem){.klassen{grid-template-columns:1fr 1fr}}
.klasse{display:flex;flex-direction:column;background:var(--papier-2);
  border:1px solid #e4e4e3;border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--schatten-s);transition:border-color .15s,transform .15s,
  box-shadow .15s}
.klasse:hover{border-color:var(--anthrazit);transform:translateY(-3px);
  box-shadow:var(--schatten-m)}
.klasse__kopf{display:flex;align-items:center;gap:.85rem;
  padding:1.1rem 1.35rem;border-bottom:1px solid #eeeeed}
.klasse__kuerzel{flex:none;font-family:var(--schrift-titel);font-weight:700;
  font-size:1.35rem;line-height:1;background:var(--anthrazit);color:var(--gelb-text);
  padding:.55rem .8rem;border-radius:var(--r-s);letter-spacing:.02em}
.klasse__was{font-family:var(--schrift-titel);font-weight:700;
  font-size:1.05rem;text-transform:uppercase;line-height:1.2}
.klasse__koerper{padding:1.1rem 1.35rem 1.35rem;display:flex;
  flex-direction:column;flex:1;gap:.9rem}
.klasse__koerper > p{margin:0;font-size:.98rem}
.klasse__werte{margin:0;display:grid;gap:.5rem}
.klasse__werte div{display:flex;justify-content:space-between;gap:1rem;
  font-size:.92rem;padding-bottom:.5rem;border-bottom:1px solid #f0f0ef}
.klasse__werte div:last-child{border-bottom:0;padding-bottom:0}
.klasse__werte dt{color:var(--text-leise);margin:0}
.klasse__werte dd{margin:0;font-weight:700;text-align:right}
.klasse__mehr{margin-top:auto;padding-top:.4rem;display:inline-flex;
  align-items:center;gap:.45rem;font-family:var(--schrift-titel);
  font-weight:700;font-size:.92rem;text-transform:uppercase;
  letter-spacing:.05em;text-decoration:none}
.klasse__mehr span{transition:transform .16s}
.klasse:hover .klasse__mehr span{transform:translateX(4px)}

/* --- Entscheidungshilfe ------------------------------------------ */
.wenn{list-style:none;margin:1.25rem 0 1.75rem;padding:0;max-width:84ch;
  display:grid;gap:.65rem}
.wenn li{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;
  align-items:baseline;background:var(--papier-2);border:1px solid #e6e6e5;
  border-left:4px solid var(--gelb);border-radius:0 var(--r-m) var(--r-m) 0;
  padding:.9rem 1.2rem;margin:0}
@media(max-width:34rem){.wenn li{grid-template-columns:1fr}}
.wenn b{font-family:var(--schrift-titel);font-size:1.15rem;
  color:var(--anthrazit);white-space:nowrap}
.wenn span{color:var(--text-leise);font-size:.96rem}

/* --- Seitenkopf mit Bild ----------------------------------------- */
.seitenkopf__bild{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--r-l);background:var(--anthrazit-2);
  box-shadow:var(--schatten-m)}

/* ==================================================================
   PFLICHTSEITEN (Impressum, Datenschutz) und Fehlerseite
   Einspaltig, ohne Randspalte - hier gibt es nichts zu navigieren.
   ================================================================== */
.inhalt--einspaltig{padding-block:0 var(--raum)}
.inhalt--einspaltig .text{max-width:80ch;margin-inline:auto}
.rechtsblock{margin:1.25rem 0 1.75rem;max-width:84ch;background:var(--papier-2);
  border:1px solid #e6e6e5;border-radius:var(--r-m);padding:1.25rem 1.4rem;
  box-shadow:var(--schatten-s)}
.rechtsblock dt{font-family:var(--schrift-titel);font-weight:700;
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-leise);margin-top:1.1rem}
.rechtsblock dt:first-child{margin-top:0}
.rechtsblock dd{margin:.25rem 0 0;line-height:1.6}
.rechtsblock a{color:inherit}

/* --- Fehlerseite -------------------------------------------------- */
.fehler{display:grid;place-items:center;text-align:center;
  padding-block:clamp(3rem,2rem + 6vw,7rem)}
.fehler__nr{font-family:var(--schrift-titel);font-weight:700;
  font-size:clamp(4rem,3rem + 8vw,8rem);line-height:1;color:var(--gelb);
  letter-spacing:.02em}
.fehler h1{font-size:clamp(1.5rem,1.2rem + 1.6vw,2.4rem);
  text-transform:uppercase;margin:.5rem 0 .8rem}
.fehler p{max-width:52ch;color:var(--text-leise);margin-inline:auto}
.fehler .kopfaktionen{justify-content:center;margin-top:1.5rem}

/* ==================================================================
   EINSTIEGSKOPF (Startseite und Gruppenseiten) — Variante A
   ------------------------------------------------------------------
   Text im dunklen Kasten, Bild daneben in voller Kastenhoehe. Damit
   entsteht eine Abstufung zwischen Seitentypen: Einstiege treten
   dunkel auf, Klassenseiten bleiben hell. Wer sich durchklickt, merkt
   am Farbgewicht, wo er ist.
   Der Kasten ist hier flacher als auf der Startseite - sonst sehen
   Start und Gruppenseite hintereinander zu gleich aus.
   ================================================================== */
.seitenkopf--einstieg .seitenkopf__gitter{grid-template-columns:1fr}
@media(min-width:62rem){
  .seitenkopf--einstieg .seitenkopf__gitter{
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap:1.5rem;align-items:stretch}
}
.einstiegskasten{background:var(--anthrazit);color:var(--text-invers);
  border-radius:var(--r-xl);padding:clamp(1.5rem,1.1rem + 1.7vw,2.4rem);
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:var(--schatten-l)}
.seitenkopf--einstieg h1{color:var(--text-invers)}
.seitenkopf--einstieg h1 small{color:var(--gelb-text)}
.seitenkopf--einstieg .merksatz{color:var(--text-invers-leise);
  margin-bottom:1.4rem}
/* Auf dunklem Grund braucht der helle Knopf einen eigenen Rand:
   die normale Linienfarbe erreicht dort nur 1,38:1.
   Testfassung Blau: vorher #7a7d82 (auf Blau nur 1,61:1). */
.seitenkopf--einstieg .knopf--hell{background:transparent;
  border-color:#a9c0d8;color:var(--text-invers)}
.seitenkopf--einstieg .knopf--hell:hover{border-color:var(--gelb);
  background:var(--anthrazit-2)}
.seitenkopf--einstieg .seitenkopf__bild{height:100%;
  min-height:clamp(220px,40vw,100%);border-radius:var(--r-xl);
  align-self:stretch}

/* ==================================================================
   SCHLICHTER TEXT (Impressum, Datenschutz)
   Keine Abschnittsziffern - dort gibt es keine Reihenfolge, die
   jemanden interessiert, und der Text soll buendig unter der
   Ueberschrift beginnen statt in der Seitenmitte zu schweben.
   ================================================================== */
.inhalt--einspaltig .text{max-width:84ch;margin-inline:0}
.text--schlicht > section{counter-increment:none}
.text--schlicht h2{padding-top:1.1rem}
.text--schlicht h2::before{content:"";position:absolute;top:0;left:0;
  width:2.5rem;height:.3rem;background:var(--gelb);border-radius:2px;
  font-size:0;letter-spacing:0}
.text--schlicht h2::after{display:none}