/* ==================================================================
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. */
/* TEST NACHTBLAU (N1, 2026-09-25): Das helle Mittelblau #035DAB wirkte
zusammen mit dem Signalgelb "billig" - es ist die Farbkombination der
Discounter. Grundton deshalb tiefer. Rueckbau: die Werte hinter
"Blau:" wieder eintragen, die hellen Toenungen weiter unten ebenso
(je Stelle kommentiert). */
--tief:#0B2440; /* Blau: #012E55 - Anthrazit: #141517 */
--anthrazit:#123A5E; /* Blau: #035DAB - Anthrazit: #232426 */
--anthrazit-2:#1B4B77; /* Blau: #0469C2 - Anthrazit: #2c2e31 */
/* Heller als der Grundton-Abstand es nahelegt: als Rand des Menueknopfs
im dunklen Kopf braucht die Linie 3:1 auf --tief (#5A80AB: 3,81:1). */
--linie:#5A80AB; /* Blau: #3B82C9 - Anthrazit: #393b3f */
--gelb:#FFC108; /* vorher #F2CA04 - KUNDENWUNSCH */
--gelb-hell:#ffd934; /* unveraendert */
/* Gelbe Schrift auf der dunklen Flaeche. Auf dem hellen Mittelblau
brauchte es einen helleren Hilfston (#ffd934), weil #FFC108 dort nur
4,08:1 erreichte. Auf Nachtblau sind es 7,19:1 - der Hilfston ist
nicht mehr noetig. Das Token bleibt, damit der Rueckbau einfach ist. */
--gelb-text:#FFC108; /* Blau: #ffd934 */
--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 zu eigenen
Flex-Items und der gap reisst das Wort auseinander. */
/* Wortmarke mit Unterzeile (K2, 2026-09-25): Der weisse Kopf wirkte mit
dem kleinen Schriftzug nackt. Vorher font-size 1.1rem, einzeilig.
inline-flex betrifft nur die aeussere Huelle; der Schriftzug selbst
steht in einem eigenen span, damit "ausbildung" nicht zum eigenen
Flex-Element wird. */
.marke{font-family:var(--schrift-titel);font-weight:700;font-size:1.45rem;
letter-spacing:.01em;text-transform:uppercase;text-decoration:none;
margin-right:auto;display:inline-flex;align-items:center;line-height:1.05}
.marke__text{display:flex;flex-direction:column}
.marke__zeile{font-family:var(--schrift-text);text-transform:none;
font-weight:500;font-size:.78rem;letter-spacing:.02em;color:#4d5660;
margin-top:.25rem;transition:color .25s ease}
.kopf--dunkel .marke__zeile{color:var(--text-invers-leise)}
/* Handy: Die lange Unterzeile bestimmt allein die Breite (258px) und
schob den Menueknopf in eine zweite Zeile. Gemessen 2026-09-25. */
.marke__kurz{display:none}
@media(max-width:40rem){.marke{font-size:1.2rem}
.marke__lang{display:none}.marke__kurz{display:inline}}
@media(max-width:23.999rem){.marke{font-size:1.1rem}}
/* Gelb auf Weiss waere nur 1,6:1 - im hellen Kopf ist die zweite
Worthaelfte deshalb blau, im dunklen wieder gelb. */
/* Nachtblau: --anthrazit liegt so nah an --tief, dass "Fuehrerschein"
und "ausbildung" gleich dunkel wuerden. Die zweite Haelfte bekommt
deshalb ein eigenes, helleres Blau (5,08:1 auf Weiss). */
.marke b{color:#3272AB;font-weight:700;transition:color .25s ease}
.kopf--dunkel .marke b{color:var(--gelb)}
.nav{display:none}
/* Unter 64rem ist die Liste unsichtbar, ihr -Container stand aber
weiter als leeres Flex-Element in der Kopfzeile und kostete einen
zweiten gap von 16px. Das Mobilmenue hat seine eigene Navigation. */
@media(max-width:63.999rem){.kopf__reihe > 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:1rem;
color:#3d4650;padding:.45rem .8rem;
border-radius:999px;transition:background .15s,color .15s}
.nav a:hover,.nav a:focus-visible{background:#EFF3F7;color:var(--tief)}
/* Aktiver Punkt: SITEMAP.md verlangt ihn "sichtbar, nicht nur
farblich". aria-current war gesetzt, aber nie gestaltet. */
.nav a[aria-current]{color:var(--tief);font-weight:600;
text-decoration:underline;text-decoration-thickness:2px;
text-underline-offset:.4em;text-decoration-color:var(--anthrazit)}
.kopf--dunkel .nav a{color:var(--text-invers-leise)}
.kopf--dunkel .nav a:hover,.kopf--dunkel .nav a:focus-visible{
background:var(--anthrazit-2);color:var(--text-invers)}
.kopf--dunkel .nav a[aria-current]{color:var(--text-invers);
text-decoration-color:var(--gelb)}
}
.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 #8a8d91;
color:var(--tief);font:inherit;font-weight:600;
padding:.5rem .9rem;border-radius:999px;cursor:pointer}
.menue:hover{background:#EFF3F7}
/* Sehr schmale Bildschirme (320px, oder vergroesserte Schrift): Das Wort
"Menue" passt nicht mehr neben den Schriftzug. Es wird nur optisch
ausgeblendet - als Name des Knopfs fuer Screenreader bleibt es. */
@media(max-width:23.999rem){.menue__wort{position:absolute;width:1px;height:1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.kopf--dunkel .menue{border-color:var(--linie);color:var(--text-invers)}
.kopf--dunkel .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 --------------------------------------- */
/* Oben mehr Luft (A3): vorher clamp(2rem,1.2rem + 3vw,4rem). */
.hero{padding-block:clamp(3.25rem,2rem + 4.5vw,6rem) 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 */
/* minmax(0,1fr) statt 1fr - dieselbe Falle wie beim Hero-Gitter: eine
fr-Spalte wird nie schmaler als ihr Inhalt. Bei 320 px liefen die
beiden Karten dadurch 33 px ueber (gefunden 2026-09-25). */
.wege{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:56rem){.wege{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.weg{border-radius:var(--r-l);padding:clamp(1.3rem,1rem + 1.1vw,2rem);
border:1px solid #e4e4e3;background:var(--papier-2)}
/* Variante A (2026-09-25): hellblau statt vollblau, damit je Seite nur
der oberste Kasten voll blau ist. Die Farben im Inneren laufen ueber
die Variablen - dieselben Regeln wie vorher, nur anders belegt.
Vorher: background:var(--anthrazit), Schrift weiss. */
/* Toenungen Nachtblau, kraeftiger (2026-09-25): #DCE6F2 / Rand #c9d7e6 /
Hover #CFDCEB. Vorher #EFF3F7 / #dbe3eb / #E2E9F0 - lag mit 1,03:1 so
nah am Papierton, dass die Kaesten verschwanden. Mittelblau war:
#EEF4FA / #dfe6ee / #E1ECF7. */
.weg--beruf{background:#DCE6F2;color:var(--text);
border-color:#c9d7e6;
box-shadow:var(--schatten-s);position:relative;
--text-invers:var(--tief);--text-invers-leise:#4d5660;
--gelb-text:var(--anthrazit)}
.weg--beruf .punkte svg{stroke:var(--anthrazit)}
.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}
/* Kein Flex: Mit display:flex wurden "Fuehrerschein", plus und
"Grundqualifikation" zu drei Flex-Elementen, die nicht gemeinsam
umbrechen - bei 320px lief die Startseite dadurch ueber. Das Haekchen
steht deshalb absolut, der Text bleibt durchgehender Fliesstext. */
.punkte li{position:relative;padding-left:1.7rem;font-size:.96rem}
.punkte svg{position:absolute;left:0;top:.3rem;width:1.1rem;height:1.1rem;
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}
/* Variante A (2026-09-25): hellblau statt vollblau.
Vorher: background:var(--anthrazit), Schrift weiss, schatten-l.
Ohne farbige Oberkante und ohne gelben Lichtpunkt - beides wirkte nach
Baukasten (Rueckmeldung 2026-09-25). */
.tafel{background:#DCE6F2;color:var(--tief);
border:1px solid #c9d7e6;
border-radius:var(--r-xl);padding:clamp(1.5rem,1.1rem + 1.4vw,2.2rem);
box-shadow:var(--schatten-s);position:relative;overflow:hidden;
--text-invers:var(--tief);--text-invers-leise:#4d5660;
--gelb-text:var(--anthrazit);--anthrazit-2:#CFDCEB}
.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.
Variante A: Kasten jetzt hellblau, Rand vorher #a9c0d8 (auf Hellblau
zu blass); #767a80 erreicht dort 3,9:1. */
border:1px solid #767a80;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:1.5rem .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 ------------------------------------------------- */
/* Oben mehr Luft (A3): vorher clamp(1.5rem,.9rem + 2.4vw,3.25rem). */
.seitenkopf{padding-block:clamp(2.25rem,1.4rem + 3.4vw,4.5rem) 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}}
/* Die ganze Karte ist ein Link. Ohne text-decoration:none unterstreicht
der Browser jeden Text darin - .kachel und .nachbar hatten die Regel,
hier fehlte sie bis 2026-09-25. */
.klasse{display:flex;flex-direction:column;background:var(--papier-2);
text-decoration:none;
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}
/* --- Abstand zum Fuss --------------------------------------------- */
/* Der letzte Abschnitt jeder Seite bekommt unten mehr Luft, bevor der
dunkle Fuss beginnt. Zentral hier statt je Seitentyp: .etappe, .inhalt
und .fehler hatten jeweils nur var(--raum) (rund 70px bei 1280px).
Die Spezifitaet (main > section:last-child) ueberstimmt diese Regeln. */
main > section:last-child{
padding-bottom:calc(var(--raum) + clamp(1.5rem,.8rem + 2.6vw,3.5rem))}