/* ========================================================================= THEME – KUNDENEBENE: "Fahrlehrerin Sarah" ------------------------------------------------------------------------- Marke: Regenbogen-Akzente auf warmem Creme. Freundlich, verspielt, ermutigend – passend zum TikTok-Kanal als Zubringer. >>> FARBEN ÄNDERN = NUR DIESE DATEI. <<< Die Struktur (Layout, Komponenten, Abstände) liegt komplett in nd-base.css und rührt keine einzige feste Farbe an. Wer hier die Werte im :root-Block austauscht, färbt die gesamte Website um – Frontend wie Admin. Lädt NACH nd-base.css -> darf die Signatur gezielt überschreiben (siehe Abschnitt "Verspielte Veredelung" unten). ========================================================================= */ :root { /* ===================================================================== 1. REGENBOGEN-PALETTE · die sieben Marken-Farben Diese sieben Werte sind das Herz des Designs. Alles andere leitet sich daraus ab. ===================================================================== */ --c-red: #E4572E; --c-orange: #F08A24; --c-yellow: #E8B517; --c-green: #3EA55B; --c-teal: #189A9C; --c-blue: #3B7DD8; --c-violet: #7C3AED; --gradient-rainbow: linear-gradient(90deg, var(--c-red), var(--c-orange), var(--c-yellow), var(--c-green), var(--c-teal), var(--c-blue), var(--c-violet)); /* Senkrechte Variante für schmale, hohe Elemente (Akzentbalken) */ --gradient-rainbow-v: linear-gradient(180deg, var(--c-red), var(--c-orange), var(--c-yellow), var(--c-green), var(--c-teal), var(--c-blue), var(--c-violet)); /* ===================================================================== 2. FLÄCHEN · warmes Creme statt kaltem Weiß ===================================================================== */ --bg: #FDF8F0; /* Seitenhintergrund */ --bg-secondary: #F6EDDF; /* abgesetzte Sektionen */ --bg-card: #FFFFFF; /* Karten, Formulare */ --bg-footer: #2B2434; /* dunkler Fuß + Admin-Sidebar */ /* Abgesetzte Sektionen liegen leicht durchscheinend über der bewegten Hintergrundebene – sonst wären die Farbwolken auf jeder zweiten Sektion abgeschnitten. Wer die Aurora abschaltet, setzt hier den vollen Wert #F6EDDF ein und alles sieht aus wie vorher. */ --section-alt-bg: rgba(246, 237, 223, 0.80); /* Die vier Farbwolken der bewegten Hintergrundebene (.page-aurora). Vier von sieben Regenbogenfarben, sehr blass: Über diesen Flächen steht Fließtext, der Kontrast darf nicht ins Rutschen kommen. Mehr Deckkraft als hier wird schnell unruhig – lieber die Wolken größer machen (Breite in nd-base.css) als kräftiger. */ --aurora-1: rgba(62, 165, 91, 0.15); /* Grün – die Leitfarbe */ /* War Türkis. Türkis liegt im Farbkreis direkt neben Grün; nebeneinander auf derselben Fläche verschwimmen die beiden Wolken zu einem Fleck. Violett hat den Platz übernommen – es ist die Farbe, die vorne frei geworden ist, und liegt weit genug weg. */ --aurora-2: rgba(124, 58, 237, 0.14); /* Violett */ --aurora-3: rgba(240, 138, 36, 0.12); /* Orange */ --aurora-4: rgba(59, 125, 216, 0.12); /* Blau */ /* ===================================================================== 3. TEXT ===================================================================== */ --text: #2B2434; /* Fließtext, Überschriften */ --text-soft: #544B60; /* ruhigere Absätze */ /* Meta-Angaben, Labels, Navigation. War #7A7086 und kam damit auf dem Seitengrund auf 4,42:1 – knapp UNTER den 4,5:1, die für Text unter 24 px gefordert sind (WCAG 1.4.3). Betroffen war unter anderem die ganze Hauptnavigation. Jetzt 4,76:1, bei gleichem Farbton und gleicher Sättigung: nur ein Prozent Helligkeit dunkler, mit dem Auge nicht zu unterscheiden. Wer hier heller geht, prüft den Wert nach. */ --muted: #756B80; /* ===================================================================== 4. AKZENT · das Grün der Fahrschule Sander führt ------------------------------------------------------------------------- DIE LEITFARBE IST SEIT DEM 22.08.2026 SANDERS GRÜN (SAR-81). Sarah ist dort angestellt, und die Seite soll sich sichtbar an ihren Arbeitgeber anlehnen. Sanders Marke ist genau eine Farbe: #43a22a, auf fahrschule-sander.de das `bg-secondary` – der Rest ihrer Palette ist Grau. Der Farbton ist also die Marke, und übernommen wird der Farbton (107°), nicht der Hexwert. Warum, steht gleich unten. WARUM HIER EIN FESTER WERT STEHT UND NICHT `var(--c-green)`. Bis zum 18.08.2026 führte Violett, und zwar als `var(--c-violet)` – die Leitfarbe WAR eine der sieben Regenbogenfarben, unverändert. Das war die Eleganz des Aufbaus, und mit Grün geht sie nicht mehr auf. Grund ist die Physik der Farbe, nicht der Geschmack: Grün ist bei gleicher Sättigung viel heller als Violett. `--c-green` (#3EA55B) kommt auf dem Creme-Grund auf 2,95:1. Gefordert sind 4,5:1 für Text unter 24 px (WCAG 1.4.3), und der Akzent ist an 28 Stellen eine TEXTFARBE – unter anderem `a { color: var(--accent) }`, also jeder Link der Seite. Violett schaffte dort 5,39:1. WARUM AUCH NICHT SANDERS #43a22a IM ORIGINAL. Dieselbe Rechnung, und sie fällt sogar härter aus: #43a22a liegt bei 40 % Helligkeit und kommt auf 3,08:1 als Text auf Creme und 3,26:1 mit weißer Schrift darauf. Beides durchgefallen – es liegt mitten in der „toten Zone", die im nächsten Block ausgemessen ist. Sanders Wert 1:1 zu übernehmen hieße, jeden Link der Seite unlesbar zu machen; ausgerechnet auf einer Seite, die sich an Menschen mit Einschränkungen richtet. Die Werte unten sind deshalb ein abgedunkeltes Grün im Farbton von Sander (107°, Sättigung 59 %), gerechnet auf exakt dieselben Kontraste, die vorher galten – erst für Violett, dann für Sarahs eigenes Grün: jetzt (107°) vorher (137°) Violett --accent 5,38:1 5,41:1 5,39:1 · Weiß darauf 5,69:1 --accent-hover 6,68:1 6,71:1 6,72:1 --accent-text 8,45:1 8,49:1 8,50:1 Alle drei Fassungen sind also gleich gut lesbar. Was sich ändert, ist allein der Farbton: Sanders Grün ist gelbstichiger als das vorherige. NEBENBEI GELÖST: Der Konflikt aus Abschnitt 6. Solange die Leitfarbe ein Grün bei 137° war, lag sie im selben Farbton wie das Status-Grün („hat geklappt") und musste allein über die Helligkeit auseinandergehalten werden. Jetzt trennt beide zusätzlich der Farbton – 107° gegen 137°. Die Regel dort gilt weiter, sie hat nur mehr Luft. Der Regenbogen bleibt davon unberührt: `--c-green` oben ist weiter das helle Grün des Logos und steht weiter im Bogen, in der Kachel-Rotation und in den Statusfarben. Sarahs Marke behält ihre sieben Farben; Sanders Grün ist die Bedienfarbe darüber. WER HIER SCHRAUBT, MISST NACH. Ein Grün, das auf dem Monitor „noch gut lesbar" aussieht, liegt fast immer unter 4,5:1 – hell wirkende Farben täuschen genau in diesem Bereich. ===================================================================== */ --accent: #30751E; --accent-hover: #2A651A; --on-accent: #FFFFFF; /* Text auf Akzentflächen */ --accent-text: #235416; /* Akzentfarbe als Textfarbe (kontraststark) */ --accent-soft: rgba(48, 117, 30, 0.10); /* zarte Akzentfläche */ /* --- SANDERS LOGO-GRÜN FÜR FLÄCHEN (SAR-81, zweiter Durchgang) ------- DIE LEITFARBE ZERFÄLLT HIER IN ZWEI TOKEN, und das ist die Auflösung der toten Zone von oben. Der Grund, warum `--accent` dunkel sein muss, ist die weiße Schrift auf den Knöpfen. Lässt man die weiße Schrift fallen, fällt auch der Zwang – und dann darf die FLÄCHE das Grün des Logos tragen, unverändert. Gemessen (Sanders Logo, nicht ihr CSS – die Marke ist die Datei): Logo-Grün #44A22C H 107,8° S 57,3% L 40,4% ihr CSS-Wert #43A22A H 107,5° S 58,8% L 40,0% Das ist dieselbe Farbe; die drei Zehntel Grad sind WebP-Kompression. Genommen ist der CSS-Wert, weil er der geschriebene ist. Die Rechnung auf #43A22A: Schrift --text (#2B2434) darauf 4,58:1 ✓ (weiß wäre 3,26 ✗) Fläche gegen den Creme-Grund 3,08:1 ✓ (WCAG 1.4.11: 3:1) ZWEI DINGE, DIE MAN DABEI FALSCH MACHEN KANN: 1. DER HOVER MUSS HELLER WERDEN, NICHT DUNKLER. Bei weißer Schrift dunkelt man beim Überfahren ab; hier trägt die Fläche dunkle Schrift, und Abdunkeln würde genau den Kontrast auffressen, für den es diese Fassung gibt. `--accent-surface-hover` liegt deshalb ÜBER dem Grundwert (L 42 % statt 40 %) und kommt auf 5,02:1. Nebenwirkung, ehrlich benannt: Die Fläche selbst fällt beim Überfahren auf 2,82:1 gegen den Grund, also unter die 3:1. Das ist vertretbar, weil der Knopf im Ruhezustand identifizierbar ist und `theme.css` beim Hover zusätzlich einen Schatten setzt – aber wer den Wert weiter aufhellt, verschiebt das ins Unhaltbare. 2. `--accent-hover` IST NICHT DASSELBE. Es hängt an `a:hover`, also an Text, und muss dunkel bleiben. Genau deshalb gibt es hier ein zweites Hover-Token und nicht einen umdefinierten Wert. WO ES GILT: gefüllte Bedienflächen auf hellem Grund (`.btn-primary`, `.skip-link`, die Schalter im Barrierefreiheits-Panel) und die Zierbalken aus dem ersten Durchgang. NICHT im Admin – `.chip` und die Seitenleiste liegen auf dunklem Grund, dort gelten andere Zahlen. DARAUS FOLGT DIE REGEL FÜR ALLES WEITERE: FLÄCHE trägt Sanders Logo-Grün, SCHRIFT trägt die abgedunkelte Fassung. Wer eine neue Komponente einfärbt, entscheidet zuerst, welche der beiden sie ist. */ --accent-surface: #43A22A; --accent-surface-hover: #46AA2C; --on-accent-surface: #2B2434; /* --- DIE FARBEN DER PLATTFORMEN (SAR-87) ------------------------------ Sarahs Wunsch: „Die Button vielleicht noch in der Originalfarbe? Also pink und schwarz?" Gemeint sind die beiden Kanalknöpfe auf der Startseite. Sie tragen deshalb als EINZIGE Stellen der Seite eine fremde Marke – überall sonst führt Sanders Grün. DAS PINK IST #D62976 UND NICHT #E1306C. Der gängige Wert, den die meisten „Instagram-Pink" nennen, trägt weiße Schrift nur mit 4,34:1 und verfehlt die geforderten 4,5 (WCAG 1.4.3) um 0,16. #D62976 ist kein erfundener Nachbarton, sondern ebenfalls ein Wert aus Instagrams eigenem Verlauf – und kommt auf 4,73:1. Der Unterschied ist mit dem Auge nicht zu sehen, der zwischen bestanden und durchgefallen schon. Gemessen: TikTok #010101 weiße Schrift 20,87:1 · Fläche auf Creme 19,74:1 Instagram #D62976 weiße Schrift 4,73:1 · Fläche auf Creme 4,48:1 WARUM ES EIN EIGENES KANTEN-TOKEN GIBT, und das ist der Teil, den man sonst erst im Dunkelmodus bemerkt: Ein schwarzer Knopf kommt auf dem dunklen Grund (#1B1722) auf 1,19:1 – er verschwindet schlicht. Die Fläche kann dort nicht heller werden, sonst ist es nicht mehr TikToks Schwarz. Also trägt die KANTE den Umriss: hell im Dunkelmodus, gleich der Füllung im hellen. `.btn` bringt die 2 px dafür schon mit (`border: 2px solid transparent`), es fehlt nur die Farbe. Der Hover läuft bei beiden nach dunkler – anders als beim grünen Hauptknopf, denn hier ist die Schrift weiß und nicht dunkel. */ --brand-tiktok: #010101; --brand-tiktok-hover: #2B2434; --brand-tiktok-edge: #010101; --on-brand-tiktok: #FFFFFF; --brand-instagram: #D62976; --brand-instagram-hover: #B92264; --brand-instagram-edge: #D62976; --on-brand-instagram: #FFFFFF; /* --- DER RAHMEN UM DAS VIDEO (SAR-88) -------------------------------- Sarah: „Können wir das lila noch ändern? Gerne ein helles grün?" Gemeint war `--bg-footer` (#2B2434) – das dunkle Aubergine des Fußes, das `.video-frame` bis dahin mitbenutzt hat. Sichtbar ist es vor allem als Streifen unter dem Video, wo die Bildunterschrift steht. WARUM ES JETZT EIN EIGENES TOKEN IST und nicht weiter `--bg-footer`: Der Fuß ist eine dunkle Fläche und soll es bleiben. Solange beide dasselbe Token lasen, war jede Änderung am einen auch eine am anderen – ein hellgrüner Fuß wäre die Folge gewesen. Zwei Dinge, die zufällig gleich aussahen, sind jetzt zwei Dinge. Das Grün ist ein heller Ton in Sanders Farbton (107°), also aus derselben Familie wie die Leitfarbe und nicht irgendein Grün. Die Unterschrift trägt `--text-soft`: 5,97:1, also klar über den 4,5, die für 15-px-Text gefordert sind (WCAG 1.4.3) – und trotzdem leiser als der Fließtext daneben, so wie vorher auch. NICHT MITGEÄNDERT: der farbige Fleck hinter dem Video (`.photo-wrap::before`). Der steht in `home.php` auf `--c-red` und gehört zur Regenbogen-Rotation, nicht zum Rahmen. Sarah hat nach dem Lila gefragt, nicht nach dem Fleck. */ /* --- DER SCHLEIER ÜBER DEM HERO-VIDEO (SAR-103) ----------------------- Er ist die Bedingung dafür, dass im Hero überhaupt ein Video liegen darf. Die Schrift dort ist DUNKEL (`--text`, #2B2434) – sie braucht also einen HELLEN Grund, und über bewegtem Bild ist der sonst nicht zusagbar. DIE 0,68 SIND NACHGERECHNET, nicht geschätzt. Maßgeblich ist der schlimmste Fall: ein schwarzes Einzelbild im Video. Gemessen gegen #2B2434 ergibt das Schleier 0,50 über schwarzem Bild 3,6:1 ✗ Schleier 0,60 über schwarzem Bild 5,0:1 ✓ Schleier 0,68 über schwarzem Bild 6,4:1 ✓ Schleier 0,68 über hellem Bild 14,4:1 ✓ gefordert sind 4,5 (WCAG 1.4.3). 0,68 hält also auch dann, wenn das Video im dunkelsten Moment steht, und lässt bei normalen Bildern noch Reserve. Wer den Wert senkt, senkt genau diese Zahl – unter 0,60 ist die Überschrift auf einem dunklen Einzelbild nicht mehr lesbar. Im Dunkelmodus dreht sich die Rolle um, dort ist die Schrift hell – siehe a11y.css. */ --hero-video-scrim: rgba(253, 248, 240, 0.68); --video-frame-bg: #C6E4BE; --video-frame-text: #544B60; /* WARUM DAS GRÜN NICHT HELLER WIRD. Am 19.08.2026 sollte es auf Sarahs Wunsch greller werden. Ausprobiert, angesehen, wieder verworfen: Hell gefiel es nicht. Die Rechnung dahinter steht hier, damit sie beim nächsten Mal nicht neu gemacht werden muss. `--accent` macht zwei Jobs gleichzeitig. Es ist an 29 Stellen eine TEXTFARBE (unter anderem `a { color: … }`, also jeder Link) und an 25 Stellen eine FLÄCHE mit weißer Schrift darauf. Beide verlangen dasselbe, nämlich dunkel: 4,5:1 als Text auf dem Creme-Grund (WCAG 1.4.3), 4,5:1 für die weiße Schrift auf der Fläche. Auf dem Weg nach hell liegt deshalb eine tote Zone, in der BEIDES durchfällt. Neu nachgemessen für Sanders Farbton (107°, SAR-81): #30751E weiß 5,69 dunkel 5,38 ← hier stehen wir #337C20 weiß 5,19 dunkel 4,91 #368222 weiß 4,80 dunkel 4,54 letzter Wert, der beides trägt #388823 weiß 4,45 dunkel 4,21 tote Zone #3B8E25 weiß 4,13 dunkel 3,91 tote Zone #409A28 weiß 3,58 dunkel 3,38 tote Zone #43A22A weiß 3,26 dunkel 3,08 tote Zone – SANDERS ORIGINALWERT #47AC2D weiß 2,91 dunkel 2,76 tote Zone Zwei Dinge sind hier anders als in der Fassung von vorher (137°, in der Versionsgeschichte vom 19.08.2026): Erstens gibt es bei diesem Farbton ein schmales Fenster, in dem beide Jobs zugleich bestehen (#368222). Die Grenze liegt also etwas höher als gedacht – aber nur zwei Zehntel Helligkeit, mit dem Auge kaum zu sehen. Zweitens, und das ist der Punkt: SANDERS EIGENER WERT LIEGT MITTEN IN DER TOTEN ZONE. #43a22a fällt bei beiden Jobs durch. Wer die Farbe „wie bei Sander" haben will, kann sie deshalb nicht als Bedienfarbe nehmen – nur ihren Farbton. Wirklich heller geht nur jenseits der toten Zone, und dann muss die Schrift auf den Knöpfen dunkel werden und `--accent` in zwei Token zerfallen: eins für Text, eins für Flächen. Genau so war es kurzzeitig gebaut. Wer es wieder will, findet den Aufbau in der Versionsgeschichte vom 19.08.2026. */ /* Tiefe unter dem Hauptbutton – neutral und dezent. Ein farbiger Schein in der Leitfarbe sah neben dem Regenbogen nach Effekt aus, nicht nach Handwerk. Deshalb steht hier ein Grauton und keine Ableitung des Akzents; der Farbwechsel auf Grün lässt ihn unberührt – der auf Sanders Grün ebenso. */ --shadow-accent: rgba(43, 36, 52, 0.16); --focus-ring: #30751E; /* Tastatur-Fokus */ /* ===================================================================== 5. LINIEN & FLÄCHENDETAILS ===================================================================== */ --border: rgba(43, 36, 52, 0.10); --border-strong: rgba(43, 36, 52, 0.20); --header-bg: rgba(253, 248, 240, 0.88); --input-bg: #FFFFFF; --placeholder: #9A93A5; --row-hover: rgba(43, 36, 52, 0.035); --backdrop: rgba(43, 36, 52, 0.55); --day-head-bg: var(--bg-secondary); --glass-card: rgba(255, 255, 255, 0.72); /* ===================================================================== 6. STATUS · semantisch, greift auf die Regenbogenfarben zurück ------------------------------------------------------------------------- ACHTUNG SEIT DEM FARBWECHSEL (18.08.2026): Grün ist zweierlei – die Leitfarbe der Marke UND „hat geklappt". Solange die Leitfarbe Violett war, waren die beiden Bedeutungen sauber getrennt. Auseinander hält sie ihre Helligkeit: Status-Grün ist das helle `--c-green` (#3EA55B) und steht auf Flächen (Plaketten, Kanten, Zeilenkanten). Der Akzent ist das dunkle #30751E und steht als Text und als Knopffläche. Wer eine Statusfarbe auf den Akzent umstellt oder umgekehrt, nimmt der Seite diese Trennung. SEIT SAR-81 (22.08.2026) trennt beide zusätzlich der Farbton: Sanders Grün liegt bei 107°, das Status-Grün bei 137°. Das entschärft den Konflikt, hebt ihn aber nicht auf – die Regel oben gilt unverändert weiter, sie hat nur mehr Luft. Eine echte Statusmeldung braucht deshalb weiter ein Wort dazu und nicht nur die Farbe – das galt vorher schon für Farbenblinde und gilt jetzt für alle. */ --green: var(--c-green); --green-soft: rgba(62, 165, 91, 0.12); --green-line: rgba(62, 165, 91, 0.45); --green-text: #216B39; --yellow: var(--c-yellow); --yellow-soft: rgba(232, 181, 23, 0.16); --yellow-text: #8A6A00; --red: var(--c-red); --red-soft: rgba(228, 87, 46, 0.12); --red-line: rgba(228, 87, 46, 0.45); --red-text: #A62F0F; --on-danger: #FFFFFF; /* ===================================================================== 7. FUSSBEREICH & ADMIN-SIDEBAR (dunkle Fläche) ===================================================================== */ --footer-text: #FDF8F0; --footer-muted: #B6ADC4; --footer-border: rgba(255, 255, 255, 0.14); /* Die Leitfarbe für den dunklen Fuß: dasselbe Grün, aber aufgehellt statt abgedunkelt – auf #2B2434 käme #30751E auf 1,4:1. 7,29:1, das ist auf die Zehntelstelle der Wert, den das helle Violett vorher hatte und den auch Sarahs eigenes Grün (#51CC74) hier hatte. Sanders Farbton, gleiche Lesbarkeit – dieselbe Rechnung wie bei `--accent`. */ --footer-accent: #5BCD3D; --footer-hover: rgba(255, 255, 255, 0.07); /* ===================================================================== 8. HERO · großflächiger Regenbogen über Creme ===================================================================== */ --hero-bg: radial-gradient(760px 420px at 88% 8%, rgba(62, 165, 91, 0.30), transparent 62%), radial-gradient(680px 400px at 66% 88%, rgba(59, 125, 216, 0.26), transparent 62%), radial-gradient(620px 380px at 96% 74%, rgba(24, 154, 156, 0.26), transparent 62%), radial-gradient(560px 340px at 42% 4%, rgba(232, 181, 23, 0.24), transparent 62%), radial-gradient(560px 340px at 14% 96%, rgba(240, 138, 36, 0.22), transparent 62%), radial-gradient(520px 320px at 2% 18%, rgba(228, 87, 46, 0.20), transparent 62%), var(--bg); --hero-focus: center center; /* Weiches Auslaufen nach unten, damit die Schrift überall sicher liest */ --hero-overlay: linear-gradient(180deg, rgba(253, 248, 240, 0.30) 0%, rgba(253, 248, 240, 0.55) 55%, var(--bg) 100%); /* Hero auf schmalen Screens, wo das Lockup hinter den Text rutscht (siehe nd-base.css, Block ab 820 px). Zwei Stellschrauben: die Deckkraft des Bildes und der Schleier darüber. Der Schleier ist in der Mitte am dichtesten – dort steht die Schrift – und läuft zum Rand hin aus, damit der Bogen dort seine Farbe behält. 0.38 ist nicht geraten, sondern ausgerechnet: Sarahs Poloshirt ist nahezu schwarz (rgb(5,4,7)), und darüber steht Fließtext. Bei dieser Deckkraft plus Schleier kommt die ungünstigste Stelle auf 4,8:1 – über den 4,5, die für Fließtext gefordert sind. Bei 0.42 sind es 4,53, also keine Reserve mehr; bei 0.5 fällt es auf 4,03 durch. Wer hier hochdreht, muss also nachmessen und nicht nur hinsehen: Auf einem hellen Monitor sieht auch 3:1 noch „geht schon" aus. */ --hero-media-opacity: 0.38; --hero-media-scrim: radial-gradient(125% 95% at 50% 46%, rgba(253, 248, 240, 0.62) 0%, rgba(253, 248, 240, 0.34) 58%, rgba(253, 248, 240, 0.00) 100%); --page-head-bg: radial-gradient(700px 300px at 88% -40%, rgba(62, 165, 91, 0.20), transparent 65%), radial-gradient(600px 280px at 10% -20%, rgba(24, 154, 156, 0.16), transparent 65%), var(--bg-secondary); --cta-bg: radial-gradient(620px 260px at 92% -50%, rgba(62, 165, 91, 0.18), transparent 68%), linear-gradient(135deg, #FFFFFF, var(--bg-secondary)); /* ===================================================================== 9. FORM & TYPOGRAFIE ===================================================================== */ /* --- DIE SCHRIFTGRÖSSEN-SKALA (SAR-34) ------------------------------- ZEHN GRÖSSEN FÜR DIE GANZE SEITE. Vorher waren es 46 Werte im CSS und 28 verschiedene Größen im gerenderten Frontend – gemessen, nicht geschätzt. Darunter Gruppen wie 14,1 / 14,4 / 14,7 / 14,9 / 15,2 px: fünf Größen innerhalb eines Pixels. Solche Unterschiede sieht niemand, aber jeder erbt sie: Wer eine neue Komponente baut, greift sich irgendeinen dieser Werte und der Wildwuchs wächst weiter. WICHTIGER ALS DIE ANZAHL WAR DIE UNTERGRENZE. Neun der 28 Größen lagen unter 14 px, die kleinste bei 11,8. Das ist der Punkt, an dem aus „unsauber" ein Zugänglichkeitsproblem wird – und diese Seite wendet sich an Menschen, die auf Lesbarkeit angewiesen sind. --fs-xs IST DESHALB EINE HARTE GRENZE: 14 px, nichts darunter. Wer einen kleineren Wert braucht, hat ein Layoutproblem und kein Typografieproblem. Alles in rem und kein px: Stellt jemand im Browser eine größere Grundschrift ein, wächst die ganze Seite mit. Mit px täte sie das nicht. Rollen – wer eine Größe sucht, sucht sie hier und nicht im Fließtext von nd-base.css: --fs-xs 14 px Meta, Labels, Versalzeilen, Bildunterschriften, Tabellenköpfe. Die Untergrenze. --fs-sm 15 px Sekundärtext: Kartentexte, Fußzeilen-Links, Formularhilfen, kleine Listen. --fs-md 16 px Fließtext, Knöpfe, Navigation. Der Normalfall. --fs-lg 18 px Anlesetexte (Hero, Seitenkopf, Sektionen), Kartenüberschriften. --fs-xl 20 px h3, hervorgehobene Sätze, Akkordeon-Titel. --fs-2xl 24 px kompakte h2 (Admin-Karten, Zitate, Prosa). --fs-3xl h2 im Fluss – wächst mit der Fensterbreite. --fs-4xl h1 auf Unterseiten. --fs-hero h1 im Hero, eine Stufe größer. --fs-hero-sm derselbe h1 unter 500 px. Eigener Wert, weil die Kurve dort sonst zu spät greift und die Zeile auf kleinen Geräten aus dem Rahmen läuft. Zwei Ausnahmen, bewusst außerhalb der Skala, weil sie Ziffern und keine Schrift sind – jeweils genau eine Verwendung: --fs-stat Kennzahl im Admin-Dashboard. --fs-display Fehlercode auf den 404/500-Seiten. */ --fs-xs: 0.875rem; --fs-sm: 0.9375rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: clamp(1.6rem, 3vw, 2.1rem); --fs-4xl: clamp(2rem, 4.5vw, 3rem); --fs-hero: clamp(2.1rem, 5.2vw, 3.5rem); --fs-hero-sm: clamp(1.8rem, 8.5vw, 2.4rem); --fs-stat: 2.25rem; --fs-display: 4.5rem; /* --- Header und Marke ------------------------------------------------ Der Header schrumpft beim Scrollen (Mechanik in nd-base.css). Diese fünf Werte hängen zusammen, wer einen anfasst, prüft die anderen mit: --header-h Höhe oben. Bestimmt zugleich das padding-top am Body, das den fixierten Header ausgleicht. --header-h-compact Höhe nach dem Scrollen. --brand-full-h Sarahs volles Logo. 132 px sind gemessen und nicht gegriffen: Nachgestellt bei 54/72/88/104/120/140 px liest sich „Klasse B · Klasse BE" erst ab rund 104 px sauber. Darunter wird der Schriftzug Matsch – genau deshalb trägt der kompakte Zustand gar keine Schrift im Bild. Wer hier kleiner geht, macht das Logo wieder unleserlich und kann es dann auch weglassen. --brand-full-top Abstand von der Oberkante des Headers. 108 + 4 - 94 = 18 px stehen unten heraus. Dass das geht, hängt an EINER Zeile in nd-base.css: `.brand { z-index: 1 }`. Der Regenbogenstreifen ist ein ::after am Header, steht im Baum nach dem Inhalt und wurde deshalb ÜBER das herausragende Logo gezeichnet – quer durch „Klasse B · Klasse BE". Genau das ließ die erste Fassung abgeschnitten wirken. Mit dem z-index läuft der Streifen dahinter durch, das Logo bleibt vollständig sichtbar, und die Linie trifft es, statt es zu zerteilen. Ohne diesen z-index gilt wieder die alte Grenze: Dann darf der Überstand höchstens 8 px betragen, weil die Textzeilen im Logo fast bis zur Unterkante reichen. --brand-compact-h Dasselbe Logo, nur kleiner. Es wird NICHT gegen eine andere Grafik getauscht – ein Logo, das sich beim Scrollen verwandelt, prägt sich nicht ein. ACHTUNG, hier hat sich die Begründung geändert: Bei 72 px ist der Schriftzug IM Logo nicht mehr zu lesen. Bis SAR-37 fing das die Wortmarke daneben auf; die ist entfallen. Der kompakte Header trägt jetzt also eine Bildmarke, deren Schrift zu klein ist, und sonst keinen Namen. Wer den Namen im gescrollten Zustand wieder lesbar haben will, hat zwei Wege: diesen Wert anheben (dann wird der Header höher, --header-h-compact zieht mit) oder die Wortmarke zurückholen. Beides ist eine Entscheidung, keine Reparatur. --brand-compact-top Damit das kleinere Logo im flacheren Header mittig sitzt (78 - 72 = 6, also 3 oben). --------------------------------------------------------------------- */ --header-h: 94px; --header-h-compact: 78px; --brand-full-h: 108px; --brand-full-top: 4px; --brand-compact-h: 72px; --brand-compact-top: 3px; --radius: 18px; --radius-sm: 12px; /* --- Die Leiste am linken Rand --------------------------------------- Am linken Bildschirmrand kleben zwei Dinge übereinander: der Barrierefreiheits-Knopf (a11y.css, SAR-34) und darunter Sarahs Kanäle (SAR-36). Sie stehen im Markup an ganz verschiedenen Stellen – der eine weit oben, damit er der zweite Tab-Stopp ist, die anderen ganz unten, weil sie das nicht sein sollen. Zu sehen sind sie trotzdem als eine Spalte, und das hängt an diesen zwei Zahlen. Wer eine davon ändert, verschiebt beide Bausteine gleichzeitig. Stünde die Höhe zweimal da, würde die Spalte beim nächsten Anfassen auseinanderrutschen – und zwar so wenig, dass es niemandem auffällt und trotzdem unordentlich aussieht. */ --rand-tab-h: 52px; /* Höhe eines Knopfs in der Leiste */ --rand-tab-luecke: 8px; /* Abstand zwischen den Knöpfen */ --shadow: 0 6px 22px rgba(43, 36, 52, 0.07); --shadow-lg: 0 18px 45px rgba(43, 36, 52, 0.13); --container: 1160px; /* SAR-104, 28.08.2026: Carlito trägt beides. Sarahs Entscheidung nach einem Probelauf – vorher stand hier Fredoka über Roboto Mono. Carlito steht VOR Calibri, obwohl Calibri gewünscht war: Nur die erste ist eine Datei, die wir selbst ausliefern und die deshalb überall gleich aussieht. Calibri liegt nur auf Windows, und was auf dem Rechner der Besucher:innen liegt, entscheidet sonst über das Schriftbild der Seite. Die beiden sind Zwillinge – gleiche Metrik, gleiche Breiten –, also fällt der Unterschied ohnehin niemandem auf. Calibri bleibt trotzdem in der Kette: Sie greift, wenn unsere Datei einmal nicht ankommt. BEIDE TOKEN TRAGEN JETZT DENSELBEN WERT, und sie bleiben trotzdem zwei. In nd-base.css hängen über sechzig Regeln an der Unterscheidung zwischen Überschrift und Fließtext. Ein Token daraus zu machen hieße, diese Trennung wegzuwerfen – zurück käme sie nur, indem man alle sechzig Stellen wieder von Hand auseinandersortiert. */ --font-body: 'Carlito', Calibri, "Segoe UI", system-ui, sans-serif; --font-head: 'Carlito', Calibri, "Segoe UI", system-ui, sans-serif; } /* ========================================================================= 🌈 VERSPIELTE VEREDELUNG – kundenspezifisch Nur Optik; die Struktur aus nd-base.css bleibt unangetastet. ========================================================================= */ /* --- WO DER REGENBOGEN NICHT MEHR LÄUFT (SAR-81, 22.08.2026) ------------- Sarahs Marke hat zwei Rollen für Farbe, und sie waren bisher dieselbe: den Regenbogen als Schmuck und den Akzent als Bedienfarbe. Seit die Leitfarbe Sanders Grün ist, wird das getrennt – die GLIEDERUNG der Seite trägt Grün, die ZIERDE bleibt bunt. GRÜN ist ab jetzt jeder senkrechte Balken, der vor einer Überschrift steht, dazu die beiden waagerechten Striche des Seitengerüsts: .section-head h2::before 5 px links neben jeder h2 .cta-inner::before 6 px am Abschlussband – dort steht auch eine h2 .admin-hero::before derselbe Balken im Dashboard .footer-wordmark-name ENTFÄLLT seit dem 22.08.2026 (Nils) – der Strich neben der Wortmarke im Fuß ist ganz weg, siehe die Regel weiter unten .site-header::after 4 px unter der Kopfleiste, sobald gescrollt ist – NICHT hier, sondern in seinem eigenen Block weiter unten. Er hat dort schon eine Regel für seinen Auftritt, und eine zweite hier wäre eine Falle: Bei gleicher Spezifität gewinnt die spätere, also hätte die untere den Regenbogen einfach wieder zurückgeholt. BUNT BLEIBT alles, was Sarahs Handschrift ist und nicht die Gliederung: .quote der Balken neben ihrem Zitat – ausdrücklich ausgenommen (Sarah/Kevin im Ticket) .card-grid & Co. die Farbrotation der Wegbegleiter, Karten, Prozessschritte und Akkordeon-Kapitel .error-code die 404-Ziffer .nd-credit::before das Band von Nils-Digital – eigene Signatur, und es liegt ohnehin nur als Vorlage herum WARUM DIE ÜBERSCHREIBUNG HIER STEHT UND NICHT IN nd-base.css: Dort ist der Regenbogen die ND-Signatur und gehört anderen Kundenprojekten. Welche Balken bei SARAH grün werden, ist eine Frage dieser Seite. Derselbe Ort und derselbe Grund wie bei `.hero-eyebrow::before` (SAR-74) weiter unten. DIE FALLE, FALLS JEMAND EINEN BALKEN ERGÄNZT: In nd-base.css steht überall `var(--gradient-rainbow-v, var(--accent))`. Der zweite Wert ist ein Rückfall für den Fall, dass es das Token nicht gibt – KEIN Schalter. Wer einen neuen Balken grün haben will, trägt seinen Selektor hier ein. BARRIEREFREIHEIT LÄUFT VON SELBST MIT: Die Regel nennt `var(--accent)` und keinen Hexwert. Im Kontrastmodus „hoch" ist der Akzent Gelb, im Dunkelmodus das aufgehellte Grün – die Balken folgen also beiden Modi, ohne dass a11y.css etwas über sie wissen muss. Genau deshalb ein Token und keine Farbe. */ .section-head h2::before, .cta-inner::before, .admin-hero::before { background: var(--accent-surface); } /* KEIN STRICH NEBEN DER WORTMARKE IM FUSS (Nils, 22.08.2026). Hier stand `background: var(--footer-accent)` – der Balken war seit SAR-81 grün, weil `--accent` auf dem dunklen Fuß (#2B2434) nur 1,4:1 erreicht und praktisch unsichtbar gewesen wäre. Jetzt ist er ersatzlos weg. Abgeschaltet und nicht aus nd-base.css entfernt, und das ist Absicht: Der Balken gehört dort zur ND-Signatur `.footer-wordmark-name` und damit den anderen Kundenprojekten. Ob er bei SARAH steht, ist eine Frage dieser Seite – also dieser Datei, genau wie die Farbe der übrigen Balken darüber. `display: none` und nicht `content: none`: Das Pseudoelement ist ein Flex-Item in einem `inline-flex` mit `gap: .6rem`. Ohne Item zählt der Gap nicht mit, der Name rückt also sauber an den Anfang der Zeile. */ .footer-wordmark-name::before { display: none; } /* --- Regenbogen-Rotation für Karten ------------------------------------- Jede Karte in einem Raster bekommt automatisch die nächste Regenbogenfarbe. Die Templates setzen KEINE Farbe – hier entsteht sie. `.partner-grid` steht mit in der Reihe, damit die Logo-Kacheln unten auf der Startseite dieselbe Kopfkante tragen wie die Kacheln weiter oben. Gezählt wird dort das
  • , nicht die Kachel darin – das ist egal, die Eigenschaft vererbt sich nach innen und `.partner-card::before` liest sie dort. */ .card-grid > *:nth-child(7n+1), .process > *:nth-child(7n+1), .stat-grid > *:nth-child(7n+1), .partner-grid > *:nth-child(7n+1) { --card-accent: var(--c-red); --card-accent-soft: rgba(228, 87, 46, 0.12); } .card-grid > *:nth-child(7n+2), .process > *:nth-child(7n+2), .stat-grid > *:nth-child(7n+2), .partner-grid > *:nth-child(7n+2) { --card-accent: var(--c-orange); --card-accent-soft: rgba(240, 138, 36, 0.14); } .card-grid > *:nth-child(7n+3), .process > *:nth-child(7n+3), .stat-grid > *:nth-child(7n+3), .partner-grid > *:nth-child(7n+3) { --card-accent: var(--c-yellow); --card-accent-soft: rgba(232, 181, 23, 0.16); } .card-grid > *:nth-child(7n+4), .process > *:nth-child(7n+4), .stat-grid > *:nth-child(7n+4), .partner-grid > *:nth-child(7n+4) { --card-accent: var(--c-green); --card-accent-soft: rgba(62, 165, 91, 0.13); } .card-grid > *:nth-child(7n+5), .process > *:nth-child(7n+5), .stat-grid > *:nth-child(7n+5), .partner-grid > *:nth-child(7n+5) { --card-accent: var(--c-teal); --card-accent-soft: rgba(24, 154, 156, 0.13); } .card-grid > *:nth-child(7n+6), .process > *:nth-child(7n+6), .stat-grid > *:nth-child(7n+6), .partner-grid > *:nth-child(7n+6) { --card-accent: var(--c-blue); --card-accent-soft: rgba(59, 125, 216, 0.13); } .card-grid > *:nth-child(7n+7), .process > *:nth-child(7n+7), .stat-grid > *:nth-child(7n+7), .partner-grid > *:nth-child(7n+7) { --card-accent: var(--c-violet); --card-accent-soft: rgba(124, 58, 237, 0.12); } /* Dieselbe Rotation für die Zeitleiste in „Wie du bei mir Fahrschüler:in wirst". Sie läuft senkrecht, deshalb steht sie nicht in der Zeile darüber: Dort geht es um Karten nebeneinander. Fünf Schritte ergeben rot, orange, gelb, grün, türkis – der Anfang des Bogens aus Sarahs Logo, von oben nach unten gelesen. */ .enroll-steps > *:nth-child(7n+1) { --card-accent: var(--c-red); --card-accent-soft: rgba(228, 87, 46, 0.12); } .enroll-steps > *:nth-child(7n+2) { --card-accent: var(--c-orange); --card-accent-soft: rgba(240, 138, 36, 0.14); } .enroll-steps > *:nth-child(7n+3) { --card-accent: var(--c-yellow); --card-accent-soft: rgba(232, 181, 23, 0.16); } .enroll-steps > *:nth-child(7n+4) { --card-accent: var(--c-green); --card-accent-soft: rgba(62, 165, 91, 0.13); } .enroll-steps > *:nth-child(7n+5) { --card-accent: var(--c-teal); --card-accent-soft: rgba(24, 154, 156, 0.13); } .enroll-steps > *:nth-child(7n+6) { --card-accent: var(--c-blue); --card-accent-soft: rgba(59, 125, 216, 0.13); } .enroll-steps > *:nth-child(7n+7) { --card-accent: var(--c-violet); --card-accent-soft: rgba(124, 58, 237, 0.12); } /* Der Spektrum-Kreis auf /neurodivergenz (SAR-114). Struktur in nd-base.css, hier stehen nur die Farben – wie bei jeder Komponente. SECHS PLÄTZE, SIEBEN FARBEN: Orange fällt aus. Die übrigen sechs sind so verteilt, wie die Vorlage sie hatte (rot oben, dann gelb, grün, hellblau, blau, violett im Uhrzeigersinn), und nebenbei schließt sich der Bogen damit zum Ring – Rot und Violett, die beiden Enden, liegen oben nebeneinander. Nimmt man Orange dazu und lässt eine andere Farbe weg, stimmt beides nicht mehr. FLÄCHE ALS TRANSPARENTES TÖNEN, NICHT ALS FESTE FARBE, und das ist der Grund, warum der Dunkelmodus hier nichts nachziehen muss: Ein rgba-Wert über `--bg` ergibt hell einen Pastellton und dunkel eine gedämpfte Fläche, die Schrift ist in beiden Fällen `--text`. Dieselbe Mechanik wie bei `--card-accent-soft` an den Kacheln, nur kräftiger – dort ist die Farbe Beiwerk, hier ist sie der Gegenstand. Die Kante trägt die volle Farbe. Sie ist es, die im Hochkontrastmodus übrig bleibt: Dort sind alle sieben Tokens Gelb und der Grund Schwarz, die Tönung wird abgeschaltet (a11y.css). Sechs gelb umrandete Kreise auf Schwarz – die Farbe unterscheidet sie dann nicht mehr, die Beschriftung schon, und genau darauf kommt es in dem Modus an. */ /* DER KERN IST EIN NEUTRALER GRAUTON, kein Seitenhintergrund. Erste Fassung nahm `--bg-secondary` – auf dem Hero-Grund derselben Familie war die Scheibe damit praktisch unsichtbar, und „Neurodivergenz" schwebte frei zwischen den farbigen Kreisen. In der Vorlage ist der Kern eine deutlich graue Fläche, und das ist auch inhaltlich richtig: Er ist der Oberbegriff, die Farben sind die Ausprägungen. Der Ton ist `--muted` als rgba, und das ist der Trick für alle drei Modi: Ein mittleres Grau bei 22 % dunkelt einen hellen Grund ab und hellt einen dunklen auf – die Scheibe hebt sich also in beiden Richtungen ab, ohne dass der Dunkelmodus eine eigene Zeile braucht. */ .spektrum-kern { background: rgba(117, 107, 128, .22); border: 2px solid rgba(117, 107, 128, .42); color: var(--text); } .spektrum-feld { color: var(--text); background: var(--spektrum-tint); border-color: var(--card-accent); } .spektrum-feld:nth-child(1) { --card-accent: var(--c-red); --spektrum-tint: rgba(228, 87, 46, .30); } .spektrum-feld:nth-child(2) { --card-accent: var(--c-yellow); --spektrum-tint: rgba(232, 181, 23, .34); } .spektrum-feld:nth-child(3) { --card-accent: var(--c-green); --spektrum-tint: rgba( 62, 165, 91, .30); } .spektrum-feld:nth-child(4) { --card-accent: var(--c-teal); --spektrum-tint: rgba( 24, 154, 156, .30); } .spektrum-feld:nth-child(5) { --card-accent: var(--c-blue); --spektrum-tint: rgba( 59, 125, 216, .28); } .spektrum-feld:nth-child(6) { --card-accent: var(--c-violet); --spektrum-tint: rgba(124, 58, 237, .24); } /* Dieselbe Rotation für die Aufklapper. Sie stehen untereinander statt nebeneinander, aber es gilt derselbe Gedanke: Jeder Abschnitt ist ein eigenes Thema, und die Farbe an der Kante macht die Gliederung auf einen Blick sichtbar – gerade dann, wenn der Text darunter zugeklappt ist. */ .accordion > *:nth-child(7n+1) { --card-accent: var(--c-red); } .accordion > *:nth-child(7n+2) { --card-accent: var(--c-orange); } .accordion > *:nth-child(7n+3) { --card-accent: var(--c-yellow); } .accordion > *:nth-child(7n+4) { --card-accent: var(--c-green); } .accordion > *:nth-child(7n+5) { --card-accent: var(--c-teal); } .accordion > *:nth-child(7n+6) { --card-accent: var(--c-blue); } .accordion > *:nth-child(7n+7) { --card-accent: var(--c-violet); } /* Ausnahme: Raster, in denen jede Karte dasselbe bedeutet. Auf einer Terminübersicht liest sich die Rotation als Ampel – Rot „belegt", Gelb „knapp", Grün „frei" –, obwohl alle Karten denselben Zustand zeigen: eine freie Stunde. Farbe würde hier etwas behaupten, was sie nicht meint. Deshalb eine ruhige Farbe für alle. Der Regenbogen bleibt den Abschnitten vorbehalten, in denen die Karten wirklich verschiedene Dinge sind. */ .card-grid.card-grid--plain > * { --card-accent: var(--accent); --card-accent-soft: var(--accent-soft); } /* --- Der Fleck hinter Bildern und Videos: Sander-Grün (SAR-96) ----------- Bis zum 28.08.2026 trug jedes Bild und jedes Video eine andere Farbe aus dem Regenbogen, und zwar als `style="--card-accent: …"` INLINE IM TEMPLATE – sechs Stellen, sechs Farben, ohne ein Muster dahinter. Genau das war der Anlass: von außen sah es aus, als wäre die Farbe gewürfelt. Jetzt tragen alle dasselbe Grün, und es steht an einer Stelle. ES IST `--accent-surface` UND NICHT `--accent`, und das ist der Kern. Beide sind „das Sander-Grün", aber sie haben verschiedene Jobs (SAR-81): `--accent-surface` (#43A22A) ist Sanders Logo-Grün, die FLÄCHE. `--accent` (#30751E) ist dasselbe Grün abgedunkelt, damit es als SCHRIFT die Kontrastwerte schafft. Der Fleck liegt mit 13 % Deckkraft auf hellem Grund – aus der abgedunkelten Schriftfassung wird darin ein Grauschleier, aus dem Logo-Grün ein sichtbar grüner Ton. Dieselbe Rechnung stand schon in SAR-92, damals für ein einzelnes Foto; hier gilt sie für alle. DAS VERSCHIEBT EINE GRENZE, DIE IN SAR-81 GEZOGEN WURDE, und das gehört festgehalten, damit es niemand später als Fehler „zurückrepariert": Dort galt Grün für Bedienung und Gliederung, der Regenbogen für Sarahs Handschrift – Karten, Wegbegleiter, Akkordeon, Zitatbalken. Der Fleck hinter einem Foto zählte zur zweiten Gruppe. Mit diesem Ticket wechselt er auf die grüne Seite. Die Karten, die Aufklapper und die Zeitleiste darüber sind NICHT betroffen; der Regenbogen bleibt dort, wo er Gliederung leistet. Gesetzt wird `--card-accent` und nicht direkt die Farbe im ::before: Das Pseudoelement steht in nd-base.css und darf keine feste Farbe kennen. Über die Variable bleibt die ND-Signatur farblos und diese Datei entscheidet. */ .photo-wrap { --card-accent: var(--accent-surface); } /* Pflichtfahrten: jede Fahrtart ihre eigene Farbe – so erkennt Sarah die Zeile am Balken, ohne die Beschriftung zu lesen. Feste Zuordnung, keine Rotation: die Farbe gehört zur Sache, nicht zur Reihenfolge. */ .progress-ueberland { --progress-accent: var(--c-green); } .progress-autobahn { --progress-accent: var(--c-blue); } .progress-nacht { --progress-accent: var(--c-violet); } /* Posteingang: Die Farbe steht hier für das Ereignis, nicht für die Position in der Liste – deshalb keine Rotation, sondern eine feste Zuordnung. Grün heißt „kommt dazu", Blau „hat sich geändert", Rot „fällt weg". */ .feed-gebucht { --feed-accent: var(--c-green); } .feed-verschoben { --feed-accent: var(--c-blue); } .feed-storniert { --feed-accent: var(--c-red); } /* Wochenkalender: jeder Wochentag trägt seine eigene Farbe im Kopf */ .week-grid > *:nth-child(7n+1) { --day-head-bg: rgba(228, 87, 46, 0.12); } .week-grid > *:nth-child(7n+2) { --day-head-bg: rgba(240, 138, 36, 0.14); } .week-grid > *:nth-child(7n+3) { --day-head-bg: rgba(232, 181, 23, 0.16); } .week-grid > *:nth-child(7n+4) { --day-head-bg: rgba(62, 165, 91, 0.13); } .week-grid > *:nth-child(7n+5) { --day-head-bg: rgba(24, 154, 156, 0.13); } .week-grid > *:nth-child(7n+6) { --day-head-bg: rgba(59, 125, 216, 0.13); } .week-grid > *:nth-child(7n+7) { --day-head-bg: rgba(124, 58, 237, 0.12); } /* --- Buttons: einfarbig ------------------------------------------------- Hier lag früher ein Verlauf Violett → Blau → Türkis. Raus: Auf einer Seite, die den Regenbogen ohnehin als Motiv führt, verträgt die Bedienfläche genau eine ruhige Farbe – sonst konkurriert der Button mit dem Design. Die Basis in nd-base.css ist bereits einfarbig (`background: var(--accent)`), deshalb bleibt hier nur die etwas festere Kante beim Hover. */ .btn-primary:hover { box-shadow: 0 8px 20px var(--shadow-accent); } /* --- Die zwei Kanalknöpfe in den Farben ihrer Plattform (SAR-87) --------- Sie stehen NUR im Kanal-Abschnitt der Startseite. Die Werte und die Begründung stehen oben im :root; hier hängt nur die Mechanik. DASS SIE IN theme.css STEHEN UND NICHT IN nd-base.css, ist keine Formsache: `.btn-tiktok` ist die Marke eines fremden Unternehmens. In der ND-Signatur hätte sie nichts zu suchen – die gilt projektübergreifend und darf keine fremde Marke mitschleppen. Wer diese Knöpfe in einem anderen Kundenprojekt braucht, kopiert diesen Block dorthin. Die Kante ist immer gesetzt, auch wenn sie hell wie die Füllung ist. Nur deshalb kann `a11y.css` sie im Dunkelmodus sichtbar machen, ohne hier noch einmal etwas anzufassen – dieselbe Bauweise wie beim Rest der Seite: Die Regel nennt Token, die Modi setzen Werte. */ .btn-tiktok { background: var(--brand-tiktok); color: var(--on-brand-tiktok); border-color: var(--brand-tiktok-edge); } .btn-tiktok:hover { background: var(--brand-tiktok-hover); border-color: var(--brand-tiktok-edge); color: var(--on-brand-tiktok); } .btn-instagram { background: var(--brand-instagram); color: var(--on-brand-instagram); border-color: var(--brand-instagram-edge); } .btn-instagram:hover { background: var(--brand-instagram-hover); border-color: var(--brand-instagram-edge); color: var(--on-brand-instagram); } /* --- Wortmarke: Regenbogen-Punkt --------------------------------------- */ .brand-mark::after { background: var(--gradient-rainbow); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* --- Regenbogen-Streifen unter dem Header ------------------------------ Absolut an der Unterkante und nicht als Block im Fluss: Der Header hat seit dem Schrumpfen eine feste Höhe, ein mitfließender Streifen würde diese Höhe um seine 4 px überschreiten und den Ausgleich am Body verfälschen. So bleibt die Kante genau da, wo die Höhe endet. OBEN IST ER NICHT DA, und das ist der Kern der Sache: Solange das große Logo unter der Leiste hervorsteht, läuft der Streifen quer durch seine untere Hälfte. Der z-index am Markenblock schiebt ihn zwar dahinter, das Logo bleibt also vollständig – aber optisch legt sich trotzdem ein Farbbalken über den Bogen und die Marke wirkt zerschnitten. Statt den Überstand kleinzurechnen, bis beides zusammenpasst, tritt der Streifen einfach erst auf, wenn das Logo geschrumpft ist und ihn nicht mehr berührt. Er läuft dabei von rechts ein: `scale: 0 1` mit dem Ursprung am rechten Rand. Also `scale` und nicht `transform` – auf demselben Element könnte später eine weitere Transformation liegen, und über `transform` würden sich beide gegenseitig auslöschen (siehe Bewegungs-Ebenen in CLAUDE.md). Bei `prefers-reduced-motion` greift das Netz in nd-base.css und setzt die Dauer auf null: Der Streifen ist dann sofort da, statt zu laufen. SEIT DEM 22.08.2026 IST ER EINFARBIG (SAR-81): Sanders Grün statt des Regenbogens. Er ist damit kein Regenbogen-Streifen mehr, aber der Name der Überschrift bleibt – gemeint ist die Kante, nicht ihre Farbe. Er gehört zur Gliederung der Seite und folgt derselben Trennung wie die Balken vor den Überschriften; die Begründung steht dort oben im Block „WO DER REGENBOGEN NICHT MEHR LÄUFT". Hier steht die Farbe und nicht dort, weil diese Regel die spätere ist und eine Zuweisung weiter oben bei gleicher Spezifität wirkungslos wäre. */ .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent-surface); scale: 0 1; transform-origin: right center; transition: scale .55s cubic-bezier(.22, .61, .36, 1); } .site-header.is-compact::after { scale: 1 1; } /* Header in der zusammengeklappten Fassung: Dieselbe Mechanik, kleinere Zahlen. Die Grenze steht bei 1120 px und nicht bei 740 wie der Rest des Handy-Layouts – sie ist an der Breite der Navigation gemessen, die Rechnung dazu steht in nd-base.css beim gleichlautenden Block. Beide Grenzen MÜSSEN dieselbe Zahl tragen: Diese Tokens setzen die Höhen, zu denen die mittige Marke dort passt. Laufen sie auseinander, steht das Logo eine Weile mittig in einem Header, der noch die Desktop-Höhe hat. Das Logo bleibt deutlich über der gemessenen Lesbarkeitsgrenze von rund 104 px – kleiner wäre der Schriftzug auch hier wieder Matsch. 112 statt 100 px, seit die Marke oben mittig steht (Mechanik in nd-base.css): In der Mitte hat sie Platz nach beiden Seiten, und der Regenbogenstreifen liegt oben nicht mehr an, kann das Logo also auch nicht mehr anschneiden. Der Überstand von 24 px ist damit gewollt sichtbar und nicht mehr das Maß, das gerade noch geht. Weiter darf er trotzdem nicht wachsen – darunter beginnt der Hero. */ @media (max-width: 1120px) { :root { --header-h: 88px; --header-h-compact: 70px; --brand-full-h: 112px; --brand-full-top: 4px; --brand-compact-h: 64px; --brand-compact-top: 3px; } } /* --- Sanft schwebende Hero-Farbwolken ---------------------------------- */ @media (prefers-reduced-motion: no-preference) { .hero::before { animation: heroDrift 26s ease-in-out infinite alternate; } } @keyframes heroDrift { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(-1.5%, 1%, 0); } } /* --- Hero: Sarah selbst (Startseite) ------------------------------------ Seit dem 17.08.2026 steht hier ihr Foto (SAR-21). Vorher lag hier ihr Logo, davor ein Lockup aus drei Ebenen – Bogen, Sarah freigestellt an der Stelle des Lenkrads, Schriftzug darunter. Warum das Logo an dieser Stelle nicht mehr trägt, steht im Template: Es schreibt „Klasse B · Klasse BE · Handicapausbildung" aus, und genau das sagt seit SAR-20 auch die Überschrift daneben. Den Rahmen, den Schatten und die leichte Drehung bringt `.photo` mit – dieselbe ND-Signatur wie bei jedem anderen Foto der Seite. Bewusst OHNE `.photo--portrait`: Das begrenzt Hochformate auf 360 px, weil sie sonst die Höhe einer Fließtext-Spalte bestimmen. Hier hat das Bild seine eigene Spalte und darf sie ausfüllen. Drehung und Hero-Auftritt liegen auf zwei verschiedenen Elementen: die Animation (heroDrop) an der Spalte, die Drehung am Rahmen darin. Auf einem Element würde eines das andere auslöschen. */ .hero-photo { max-width: 400px; margin-inline: auto; } /* DER BRENNPUNKT DES HERO-FOTOS, falls es beschnitten wird (SAR-113). Beschnitten wird erst unter 820 px: Dort begrenzt `max-height: 44vh` das Bild und `object-fit: cover` schneidet an. Der Standardwert 46 % / 24 % gehört Sarahs Porträt – dort sitzt ihr Gesicht, mittig stünde die Tischlampe im Bild (nachgemessen in SAR-80). Für die Autofotos auf den beiden Schwerpunktseiten stimmt er nicht: Sie sind quer bis fast quadratisch, ihr Motiv liegt in der Mitte, und 24 % von oben zeigte vor allem die Hecke. `hero--photo-auto` setzt ihn deshalb auf die Mitte. Nachgemessen greift die Begrenzung nur beim Fensterbild (annähernd quadratisch); das Zeichenbild ist quer genug, um bei jeder Handybreite ungeschnitten hineinzupassen – der Wert steht trotzdem an beiden, damit ein späterer Zuschnitt nicht auf Sarahs Brennpunkt zurückfällt. */ .hero--photo-auto { --hero-photo-pos: 50% 45%; } /* KEIN REGENBOGENSTRICH VOR DER AUGENBRAUE, seit dem 21.08.2026 (SAR-74). `nd-base.css` setzt ihn als `::before` an `.hero-eyebrow` – 28 × 3 px im Verlauf der Marke, links neben der Versalzeile. Auf dem Desktop sitzt er sauber davor, auf dem Handy nicht: Der Hero steht dort mittig, und die Zeile „Fahrlehrerin Sarah · Fahrschule Sander" braucht zwei Zeilen. Der Strich ist aber Teil derselben Flex-Zeile und bleibt beim Umbruch am Anfang stehen – also ganz links außen, während der Text mittig darunter steht. Nachgemessen bei 400 px Fensterbreite: Er hing frei am linken Rand und sah aus wie ein Rest, den jemand vergessen hat. ER IST GANZ WEG UND NICHT NUR AUF DEM HANDY (Kevin, 21.08.2026): Eine Zierlinie, die auf zwei von drei Bildschirmgrößen fehlt, ist keine Signatur mehr, sondern ein Zufall. ABGESCHALTET STATT GELÖSCHT, und das ist der Grund für den Ort: Die Regel steht in der ND-Signatur und gehört anderen Kundenprojekten. Was hier entschieden wird, ist eine Frage dieser Seite – deshalb steht sie auf der Kundenebene. Wer den Strich zurückholen will, löscht diese drei Zeilen. */ .hero-eyebrow::before { display: none; } /* --- Sarah freigestellt (Abschnitt „Über mich" auf /ueber-mich) ----------- HIER STAND BIS ZUM 17.08.2026 `.hero-arc`: Sarah im Regenbogenbogen, im Hero dieser Seite. Mit SAR-38 läuft im Hero das Video, und Sarah steht eine Sektion tiefer – ausdrücklich OHNE Bogen. Damit sind drei Sachen entfallen: der Bogen als Hintergrundbild, die absolute Positionierung der Figur darin (`left: 38%; top: 14%; width: 44%` – sie saß in der gemalten Öffnung) und zwei Sonderregeln, die nur im Hero Sinn hatten. Sie stehen in der Versionsgeschichte, falls der Bogen zurückkommt. `logo-bogen.webp` wird dadurch von keinem Stylesheet mehr geladen. Die Datei BLEIBT trotzdem: scripts/logo-ableitungen.py baut daraus das Favicon. Geblieben ist der weiche Auslauf nach unten, und der ist keine Zierde: Die Freistellung endet an der Hüfte. Ohne ihn steht dort ein waagerechter Strich im Bild – im Bogen war er es genauso, nur fiel er dort weniger auf. Die Breite ist begrenzt, weil die Spalte halb so breit ist wie die Seite. 340 px liegen in der Größenordnung des Fotos, das vorher hier stand (max. 560 px hoch); der Freisteller ist hochformatiger und käme sonst auf über 600 px. ⚠️ SEIT SAR-103 (31.08.2026) NUTZT DIESE REGEL NIEMAND MEHR. Auf /ueber-mich steht an der Stelle jetzt `sarah-hero.jpg` im Rahmen, der Freisteller ist damit aus allen Templates verschwunden. Regel und Datei (`sarah-lockup.webp`) bleiben liegen: Es ist die einzige Fassung, die Sarah frei in der Fläche zeigt, und der weiche Auslauf ist die halbe Arbeit daran. Wer sie wieder einsetzt, braucht beides zusammen – ohne diese Regel steht die Schnittkante als Strich im Bild. */ .sarah-cutout { display: block; width: 100%; max-width: 340px; height: auto; margin-inline: auto; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 99%); mask-image: linear-gradient(180deg, #000 82%, transparent 99%); } /* --- Hero auf schmalen Screens --------------------------------------------- nd-base.css legt die Medienspalte ab 820 px absolut hinter den Text und macht sie durchscheinend: Gestapelt bräuchten Text und Abbildung sonst den doppelten Platz. Das ist für eine FLÄCHE gedacht – auf /ueber-mich der Bogen, in dem Sarah sitzt. FÜR EIN FOTO GILT ES NICHT, und das ist der Kern der Sache. Ein Gesicht auf halber Deckkraft hinter Fließtext sieht nicht nach Bühne aus, sondern nach Fehler, und der Kontrast der Schrift darüber lässt sich nicht mehr zusagen: Dasselbe Bild ist an einer Stelle dunkel (Wand, Polo) und an der anderen hell (Tischplatte). Deshalb schaltet `hero--photo` die Mechanik ab und Sarahs Foto stellt sich unter den Text. Bezahlbar macht das die begrenzte HÖHE: Ohne sie baut ein Hochformat den Hero auf dem Handy doppelt so hoch. `cover` schneidet dabei zum Gesicht hin an, nicht mittig – dort sitzt sie im Bild. DAS FOTO STEHT SEIT DEM 21.08.2026 OBEN, vor dem Text (Kevin, SAR-80). Vorher stand es darunter, in der Reihenfolge des Markups, mit dem Argument: die Knöpfe bleiben erreichbar, ohne an ihm vorbeizuscrollen. Nachgemessen trug dieses Argument nicht mehr – über den Knöpfen lagen Augenbraue, dreizeilige Überschrift, zweizeiliger Vorspann und die Ortszeile, und Sarah kam erst danach. Wer auf dem Handy landet, sieht jetzt zuerst sie und liest dann, wer sie ist. Am Rechner ändert sich dadurch nichts: Dort stehen beide Spalten nebeneinander, und die Reihenfolge im Markup entscheidet nur, was links liegt. Der Umschaltpunkt steht zweimal da: hier und als Breakpoint in nd-base.css für die Mechanik, die hier abgeschaltet wird. Wer ihn verschiebt, fasst beide an, sonst liegt das Foto entweder halbtransparent hinter der Schrift oder es stapelt sich schon in der zweispaltigen Ansicht. */ @media (max-width: 820px) { /* `hero--video` seit SAR-38 gleichberechtigt neben `hero--photo`: Auf /ueber-mich liegt in der Medienspalte ein Video. Für das gilt dasselbe wie für ein Foto und noch etwas mehr – hinter dem Text wäre es nicht nur halbtransparent, sondern wegen `pointer-events: none` auch nicht mehr bedienbar. Der Abspielknopf ist dann nicht zu treffen. */ .hero--photo .duo-media, .hero--video .duo-media { position: static; display: block; pointer-events: auto; } /* Das Foto vor den Text. `order` und nicht eine andere Reihenfolge im Markup: Dort steht der Text zuerst, und das soll er auch – er ist der Inhalt, den Vorlesesoftware zuerst hören soll, und die Überschrift ist die

    der Seite. Verschoben wird also nur, was man sieht. Nur `hero--photo`: Auf /ueber-mich liegt in der Spalte das Video, und ein Video, das man erst wegscrollen muss, um zu erfahren worum es geht, ist etwas anderes als ein Porträt. */ .hero--photo .duo-media { order: -1; } /* Der Schleier gehört zur Fläche hinter dem Text – hier liegt nichts hinter dem Text, also nichts zu verschleiern. */ .hero--photo .duo-media::after, .hero--video .duo-media::after { content: none; } .hero--photo .hero-photo img { max-height: 44vh; object-fit: cover; /* Ihr Gesicht sitzt im Foto bei etwa 46 % von links und 24 % von oben (nachgemessen am neuen Hero-Bild, SAR-80). Mittig angeschnitten stünde stattdessen die Tischlampe im Bild. Wirksam ist hier meist nur der ZWEITE Wert: Das Foto ist mit 9:16 hochkantiger als sein Kasten, es wird also auf die Breite gelegt und oben/unten beschnitten. Der erste Wert greift erst, wenn der Kasten schmaler proportioniert ist als das Bild – er steht trotzdem richtig da, damit niemand ihn bei der nächsten Bildänderung falsch übernimmt. */ object-position: var(--hero-photo-pos, 46% 24%); } /* Hier stand die Regel für `.hero-arc`: breiter als die Spalte und auf `--hero-media-opacity` aufgehellt, weil der Bogen ab hier hinter dem Text lag. Mit SAR-38 gibt es im Hero keinen Bogen mehr. Das Token `--hero-media-opacity` bleibt in :root – es steuert weiter den Schleier, den nd-base.css über eine Hero-Fläche legt. */ } /* --- Bogen auf Bogen: der Hero weicht aus, sobald die Marke mittig steht --- Ab hier steht die Marke im Header mittig (Mechanik in nd-base.css) – und genau darunter lag der Bogen des Heros, ebenfalls mittig und über die volle Breite. Zwei Regenbögen auf einer Achse: Das Logo verlor seine Kontur, weil hinter ihm dieselbe Form gleich noch einmal anfing. Verschieben allein half nicht. Über die ganze Breite gezogen läuft die Kurve irgendwo immer unter dem Logo durch, egal wohin man sie rückt. Mehr Luft nach oben auch nicht: Das macht den Hero auf dem Handy nur höher und schiebt die Knöpfe nach unten – die Formen lägen weiter übereinander, bloß mit Abstand. DIE STARTSEITE HAT DIESEN KONFLIKT NICHT MEHR: Dort steht seit dem 17.08.2026 ein Foto im Rahmen, kein Bogen (SAR-21). Die Regel, die das Logo hier klein nach unten rechts rückte und auf 0,5 aufhellte, ist mit ihm entfallen. Bleibt es je bei einem Bogen auf der Startseite, steht sie in der Versionsgeschichte. AUCH /ueber-mich HAT DEN KONFLIKT NICHT MEHR: Dort läuft seit SAR-38 im Hero das Video, und Videos stehen im Fluss statt hinter dem Text (`hero--video`, siehe oben). Damit ist keine Seite mehr betroffen und die Regeln, die den Bogen hier abschalteten und die Figur darin neu setzten, sind entfallen. Der Absatz bleibt als Warnung stehen: Wer einen Bogen in einen Hero zurückholt, holt sich diesen Konflikt mit zurück und findet die Lösung in der Versionsgeschichte. */ @media (max-width: 740px) { /* Nur für eine Abbildung, die hinter dem Text liegt. Beide Heros der Seite stehen inzwischen im Fluss (`hero--photo` auf der Startseite, `hero--video` auf /ueber-mich) – dort ist die Spalte kein Flex-Container mehr und die Zeile wirkungslos. Sie bleibt für jeden künftigen Hero, der wieder eine Fläche trägt. */ .hero:not(.hero--photo):not(.hero--video) .duo-media { justify-content: flex-end; align-items: flex-end; } } /* --- Kleine Freundlichkeiten ------------------------------------------- */ .feature-card:hover { border-color: var(--card-accent, var(--accent)); } .hero-badge strong { color: var(--accent-text); } .section--alt .feature-card { background: var(--bg-card); } /* TikTok-Sektion: dunkle Bühne mit Regenbogenkante */ .tiktok-band { position: relative; overflow: hidden; background: var(--bg-footer); color: var(--footer-text); border-radius: calc(var(--radius) + 6px); padding: clamp(2rem, 5vw, 3.2rem); display: flex; align-items: center; justify-content: space-between; gap: 1.6rem 2.4rem; flex-wrap: wrap; box-shadow: var(--shadow-lg); } .tiktok-band::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--gradient-rainbow); } .tiktok-band h2 { color: var(--footer-text); margin: 0 0 .5rem; } .tiktok-band p { color: var(--footer-muted); margin: 0; max-width: 520px; } .tiktok-text { position: relative; z-index: 1; } .tiktok-band .btn-light { background: var(--footer-text); border-color: var(--footer-text); color: var(--bg-footer); } .tiktok-band .btn-light:hover { color: var(--accent-text); } .tiktok-handle { display: inline-block; margin-top: .8rem; font-size: var(--fs-sm); color: var(--footer-accent); font-family: var(--font-body); } /* ========================================================================= „Wie du bei mir Fahrschüler:in wirst" (SAR-45) ------------------------------------------------------------------------- Die Sektion beantwortet die einzige Frage, mit der jemand hier ankommt: Wie fange ich an? Sie muss deshalb sofort lesbar machen, WER was tut – Sarah fährt, die Fahrschule verwaltet. ========================================================================= */ /* Der Einordnungssatz unter der Überschrift. Der Einzug ist derselbe wie beim h2 daneben: 16 px, die Breite des Regenbogenbalkens, den `.section-head h2` davorsetzt. Ohne ihn stünde der Satz am Balken vorbei und der Kopf hätte zwei linke Kanten. */ .section-lead { padding-left: 16px; max-width: 64ch; margin: .75rem 0 0; color: var(--text-soft); } /* Zwei Kacheln nebeneinander – dieselben `.feature-card` wie in „Wobei ich dich begleite", damit auf der Seite eine Kachel aussieht wie die andere. Bewusst DIESELBE Klasse und keine nachgebaute: Wer die Kachel einmal ändert, ändert sie überall. Das Raster hier gibt nur die Breiten vor – der Ablauf ist der Inhalt, die Fahrschule die Fußnote dazu. `align-items: start` ist der Kern der Sache. Ein Raster streckt seine Zellen sonst auf die Höhe der höchsten – und der Ablauf ist mit fünf Schritten fast doppelt so hoch wie die vier Zeilen der Fahrschule. Gestreckt stand unter deren Liste ein halber Bildschirm Weiß, und eine Kachel, die zu 60 % leer ist, sieht nach Fehler aus, egal wie sauber ihr Rahmen sitzt. Jede Kachel hört also da auf, wo ihr Inhalt aufhört. Dass die beiden dann unten nicht bündig abschließen, ist der Preis dafür und der günstigere von beiden: Ungleiche Höhen liest man als zwei verschieden lange Texte, große Leerflächen als vergessenen Inhalt. */ .enroll { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; } /* NUR NOCH DIE FAHRSCHULE, seit SAR-72 (21.08.2026): Der Ablauf „So läuft es ab" ist von der Startseite verschwunden und steht jetzt allein auf /fahren-mit-handicap. Übrig blieb eine einzelne Kachel, und die läuft ohne diese Regel über die breite Spalte des Rasters – eine Liste mit vier Haken auf 700 px Breite sieht aus, als fehle daneben etwas. 520 px sind etwas mehr als ihre alte Spalte (rund 430) und schmal genug, dass sie als Kasten liest. Links angeschlagen und nicht mittig: Die Überschrift der Sektion darüber steht auch links, und mittig stünde die Kachel unter einem linksbündigen Kopf wie versehentlich verrutscht. DAS LOGO DER FAHRSCHULE STEHT SEIT SAR-91 (23.08.2026) NICHT IN DIESEM RASTER, sondern eine Ebene darüber in `.enroll-band` (Begründung dort). Die Kachel bleibt deshalb allein in ihrer einen Spalte. Der Name des Modifiers stimmt weiter: In dieser Sektion steht die Fahrschule und sonst nichts. Er sitzt am selben Element wie `.enroll`, damit klar ist, dass es dasselbe Raster ist – wer den Ablauf zurückholt, nimmt ihn wieder weg. */ /* DIE KACHEL FUELLT IHRE SPALTE, seit SAR-100/106 (31.08.2026). Hier stand `minmax(0, 520px)`. Der Deckel stammt aus SAR-72: Damals stand die Kachel allein in einer Sektion voller leerer Flaeche, und ueber die ganze Breite gezogen waere sie ein Balken gewesen. Beides hat sich geaendert. Rechts steht jetzt der Spot (440 px), die linke Spalte ist damit rund 670 px breit – der Deckel liess also 149 px leer. Und in der Kachel steht seit SAR-100 zusaetzlich der Einordnungssatz. Schmal und hoch neben einem breiten Video sah sie gequetscht aus (Nils, 31.08.2026). Kommt der Spot je weg, gehoert der Deckel zurueck – sonst zieht sich die Kachel wieder ueber die ganze Sektion. */ .enroll--nur-fahrschule { grid-template-columns: minmax(0, 1fr); } /* ... UND DER ABSATZ DARIN BEHAELT SEIN ZEILENMASS. Ohne diese Zeile handelt man sich mit der breiteren Kachel das naechste Problem ein: 669 px ergeben rund 85 Zeichen je Zeile, und ab etwa 75 verliert das Auge beim Ruecksprung die naechste Zeile. Vorher war der Satz durch `.section-lead` auf 64ch begrenzt; die Begrenzung ist mit dem Umzug in die Kachel (SAR-100) verlorengegangen und steht hier wieder. Nur der Absatz, nicht die Kachel: Die Punkte der Liste sind kurz, und die Kachel selbst SOLL ihre Spalte fuellen – sonst steht die Luecke wieder da, wegen der die Sektion gequetscht aussah. */ .enroll-formal-lead { max-width: 58ch; } /* Gürtel und Hosenträger zur Regel oben: Auch wenn jemand die Spalte wieder auf `auto` stellt, soll das Video wenigstens nicht über seinen Rahmen hinauswachsen. */ .enroll-video video { max-width: 100%; height: auto; } /* Der Spot der Fahrschule in der rechten Spalte des Bandes (SAR-100). DIE BREITE KOMMT NICHT VON HIER, sondern von der Spalte (`.enroll-band`, Begründung dort) – hier steht nur, dass das Video sie ausfüllt. Bis zum 31.08.2026 stand an dieser Stelle eine feste Breite und darüber der Satz, die Spalte sei `auto`; beides stimmte schon vorher nicht mehr. `max-width: none` HEBT EINE REGEL AUS nd-base.css AUF, und das ist der eigentliche Grund, warum diese Zeilen nötig sind: `.video-frame` ist dort auf 300 px begrenzt. Der Wert ist für die hochkanten Kanal-Videos gemacht (576 × 1024, angezeigt auf 300 px). Der Spot ist querformatig – auf 300 px Breite wäre er 169 px hoch und damit nicht mehr anzusehen. */ .enroll-video { width: 100%; max-width: none; margin: 0; } /* --- Das Band um den ganzen Abschnitt · .enroll-band (SAR-91) --- Links alles, was gelesen wird (Überschrift, Einordnungssatz, Kachel), rechts das Logo der Fahrschule. WARUM DAS LOGO EINE EBENE HÖHER STEHT UND NICHT IM RASTER DER KACHEL: Zuerst stand es dort und war damit an der Kachel ausgerichtet. Neben ihr sah das mittig aus, gegen die beige Fläche saß es aber zu tief – über der Kachel liegen noch Überschrift und Einordnungssatz, und die gehören zur selben Fläche. Hier ist die Mitte die Mitte von allem, was darauf steht (Kevin, 23.08.2026). `auto` für die rechte Spalte, `1fr` für die linke: Das Logo bekommt genau seine Breite, der Rest gehört dem Text. Der Einordnungssatz merkt davon nichts, er ist ohnehin auf 64ch begrenzt (`.section-lead` weiter oben). Der Abstand von 3,2rem ist der Sicherheitsgurt zum Text: Zusammen mit dem rechtsbündigen Logo (`justify-self: end` unten) stehen die beiden so weit auseinander, wie die Sektion es hergibt. Mittig in seiner Spalte rückte das Logo dem Einordnungssatz auf den Pelz, sobald der über zwei Zeilen geht. */ .enroll-band { display: grid; /* ⚠️ `minmax(0, 440px)` UND NICHT `auto` – daran hing ein echter Fehler (SAR-100, gemeldet von Nils am 31.08.2026). `auto` war richtig, solange rechts das LOGO stand: Eine Grafik bringt ihre Breite mit, die Spalte nahm sie, fertig. Seit dort der Spot steht, ist es falsch. Das