/* ==========================================================================
todrive.ch — Identitaet
EIN System, ZWEI Oberflaechen. Stand 04.09.2026.
---- Die Regel, die alles ordnet (Dima, 04.09.2026) -------------------
Die Website hat zwei Teile, und die Oberflaeche folgt dem Teil, nicht dem
Geschmack:
DUNKEL = BUCHEN Startseite, Ortsseiten, Suche, Fahrschulprofile,
Portal. Alles, wo jemand eine Fahrschule sucht,
vergleicht und anfragt. -> .on-buchen
HELL = WISSEN Ratgeber, Guides, der Weg zum Fuehrerschein, alles
zum Lesen. -> .on-wissen
Das ist keine Erfindung: es faellt genau mit der technischen Trennung
zusammen. /ch/ ist die Phalcon-Plattform (buchen), / ist WordPress
(wissen). Die Startseite liegt zwar in WordPress, gehoert aber zum
Buchen — sie ist der Eingang in den Vergleich.
Frueher standen hier drei Oberflaechen (Nacht/Daten/Papier). Die
Datenflaeche war nie eine eigene Oberflaeche, sondern nur eine dichtere
Gangart von Dunkel: -> .dicht auf .on-buchen, statt einer dritten Welt.
---- Was die Identitaet traegt ---------------------------------------
Eine Blau-Rampe, eine Schriftfamilie, ein 4-Pixel-Raster, eine
Radius-Regel — und ein gemeinsames Bewegungsvokabular (siehe unten,
Abschnitt "Bewegung"): Zahlen zaehlen hoch, Linien zeichnen sich,
Flaechen wachsen. Immer gleich lang, immer gleich gekurvt, auf beiden
Oberflaechen dieselbe. Das ist das, was die Seiten als eine Marke
erkennbar macht.
---- Kein Ranking ----------------------------------------------------
todrive.ch stellt keine Fahrschule ueber eine andere. Kein Gruen fuer
guenstig, kein Rot fuer teuer, keine Rangnummern, keine Punktzahlen.
Nur positive Merkmale; Abwesenheit bleibt neutral. Die ganze Regel steht
in GRUNDSATZ-KEIN-RANKING.md und schlaegt jede Gestaltungsidee.
BEWUSSTE ABWEICHUNG VON MERCURY (Held der Startseite), 04.09.2026:
Mercury zentriert den Heldenstapel in 100vh auf ~640px Breite. todrive.ch setzt
ihn stattdessen links unten und laesst ihn ueber die volle Spaltenbreite laufen.
Grund: unter der Ueberschrift steht das Postleitzahl-Feld, das die eigentliche
Handlung der Seite ist — es braucht Breite und muss ueber der Falz liegen, und
ein zentrierter 640px-Stapel draengt es unter die Kante. Preis der Abweichung:
der Held traegt genau EINEN Akzent (den Suchen-Knopf) und keinen zweiten.
Alles Uebrige des Referenz-Helden gilt: 65px, Gewicht 500, Untertext 18px,
Vollbild-Foto mit dunklem Schleier, Kopfzeile darueber.
========================================================================== */
/* EINE Familie, EIN Fremdhost, drei Schnitte (~56 KB statt ~206–290 KB).
Fraunces und JetBrains Mono sind gestrichen: zwei weitere CDNs, zwei DNS+TLS-
Handschlaege und ~113 KB fuer ein kursives Wort und ein paar Ziffern — das ist
das Gewicht nicht wert, und Google Fonts per Hotlink ist im DACH-Raum ausserdem
eine Datenschutzfrage. .em faellt auf Georgia-Kursiv zurueck, .num auf die
System-Mono; beides liegt auf jedem Geraet und kostet 0 Byte.
Fuer die Produktion: Switzer als woff2 auf Latein beschnitten selbst ausliefern
und per laden — dann faellt auch dieser @import weg. */
/* Switzer liegt seit 07.09.2026 im Repo (schrift/switzer-*.woff2, zusammen
56 KB). Vorher kam sie bei jedem Seitenaufruf von api.fontshare.com — ein
Fremdhost, der die IP jeder Besucherin sieht, und ein Netzabruf mehr vor
dem ersten Text. font-display: swap bleibt: lieber sofort die Ersatzschrift
als eine leere Seite. */
@font-face {
font-family: 'Switzer'; font-style: normal; font-weight: 400; font-display: swap;
src: url('schrift/switzer-400.woff2') format('woff2');
}
@font-face {
font-family: 'Switzer'; font-style: normal; font-weight: 500; font-display: swap;
src: url('schrift/switzer-500.woff2') format('woff2');
}
@font-face {
font-family: 'Switzer'; font-style: normal; font-weight: 600; font-display: swap;
src: url('schrift/switzer-600.woff2') format('woff2');
}
/* FRAUNCES LIEGT SEIT DEM 17.09.2026 DOCH IM REPO — zwei Schnitte, Latein,
77 KB, kein Fremdhost (Google Fonts, SIL Open Font License, aus dem
Google-Fonts-Katalog geholt und hier abgelegt wie Switzer).
Warum die Zeilen oben ueberholt sind: sie rechneten mit "einem kursiven
Wort". Auf den Ratgeberseiten steht die Anzeige aber ganz in der Serife —
H1, jede Zwischenueberschrift, die Kurzfassung, der Trichter: vierzehn
Ueberschriften je Seite, alle in Georgia (am 17.09.2026 auf der Livesite
gemessen: der Fraunces-Stapel war pixelgleich mit Georgia). Eine
Anzeigeschrift, die auf jeder Leseseite vierzehnmal steht, ist die
Schrift der Seite und keine Verzierung. Die Dateien tragen die opsz-Achse
(9–144): der Browser waehlt die optische Groesse selbst — bei 42 Pixel
eine Textzeichnung, bei 60 eine Anzeigezeichnung —, ohne eine Zeile CSS.
Nur Gewicht 400, aufrecht und kursiv: die Regeln unten verlangen nichts
anderes, und ein 500er-Schnitt waere 40 KB fuer nichts. */
@font-face {
font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap;
src: url('schrift/fraunces-400.woff2') format('woff2');
}
@font-face {
font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap;
src: url('schrift/fraunces-400-italic.woff2') format('woff2');
}
:root {
/* ---- Blau. Die drei Referenzen haben denselben Farbton. Das ist das Geschenk. --- */
--ink : #0c1754; /* Officevibe ink navy — NUR auf Papier: Ueberschrift, Akzentkarte.
Nie als Flaeche auf Nacht: Mercury kennt nur Leinwand und Karte. */
--ink-soft : #182252;
--cobalt : #5266eb; /* DIE Handlungsfarbe, Mercury-Wert. Genau eine pro Bildschirm.
04.09.: von #3a55f0 auf den Referenzwert angeglichen. */
--cobalt-press : #4154d8;
--ice : #8ec5ff; /* OpenSea ice — auf Nacht NUR Linktext und Fokusring, keine Flaeche */
--ice-bright : #b5daff; /* nur Link-Hover auf Nacht */
--lavender : #e8ebfb; /* Officevibe lavender mist — getoente Plakette, NUR auf Papier */
--white : #ffffff; /* nur auf Kobalt und auf Papier. Nie Fliesstext auf Nacht. */
/* ---- Nacht. Mercury-Werte, um OpenSeas Schichtung erweitert. ---- */
--night-0 : #101018; /* aeusserste Huelle, hinter allem */
--night-1 : #171721; /* Mercury onyx — die Leinwand */
--night-2 : #1e1e2a; /* Mercury graphite — Karte */
--night-2-hover : color-mix(in srgb, var(--night-2) 88%, var(--ivory));
--night-3 : #272735; /* Mercury obsidian — Bedienelement, Hover */
--night-4 : #35354a; /* fuenfte Stufe — nur Hover auf kleinen Elementen */
--night-line : rgba(255,255,255,.09); /* OpenSea: Kante als Ring, nicht als Schatten */
--night-line-2 : rgba(255,255,255,.16);
/* ---- Papier. Officevibe. Warm, nie kaltgrau. ---- */
--paper-0 : #f9f8f6; /* Leinwand */
--paper-1 : #ffffff; /* Karte */
--paper-line : #f0e9e1; /* Creme-Haarlinie. Kein #e5e5e5. Nie. */
--paper-line-2 : #ded6cc; /* eine Stufe dunkler: Feld- und Pillenkante auf Papier */
/* ---- Text ---- */
--ivory : #ededf3; /* Mercury: primaer auf Nacht. Nicht #fff — zu hart. */
--ash : #c3c3cc; /* gedaempft auf Nacht */
--ash-dim : #8b8b98;
--charcoal : #171417; /* Officevibe: primaer auf Papier */
--stone : #6b6b70; /* gedaempft auf Papier */
/* ---- Datensignale. Nur auf der Vergleichsflaeche. ---- */
--pos : #4ba97a;
--warn : #d98b3f;
--neg : #e2564d; /* OpenSea vermilion */
--gold : #f0b429; /* Bewertungssterne — NUR auf Nacht/Daten (8.84:1) */
--gold-ink : #a06a00; /* dieselben Sterne auf Papier. #f0b429 auf Weiss ist 1.86:1
und damit unlesbar; dieser Wert liegt bei 4.61:1. */
/* ---- Schrift ---------------------------------------------------------
Switzer : Schweizer Grotesk. Traegt Mercurys weit gestellte Anzeige
UND OpenSeas dichte Bedienschrift. Der Arbeitsschriftschnitt.
Fraunces : echte Kursive mit Charakter. Traegt Officevibes Signatur —
das eine kursive Wort in der Ueberschrift. Sonst nichts.
JetBrains: nur Zahlen, die in einer Spalte stehen muessen. Preise.
------------------------------------------------------------------- */
--sans : 'Switzer', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--serif : 'Fraunces', 'Iowan Old Style', Georgia, serif;
--mono : 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Stufenleiter. Mercurys Zwischen-Gewichte (kein 700) sind die Zurueckhaltung. */
--w-light : 300;
--w-book : 400;
--w-mid : 500; /* Mercurys 480 — betont, nie fett */
--w-semi : 600; /* nur Datenflaeche, nur klein */
--t-micro : 11px;
--t-caption : 12px;
--t-small : 13px;
--t-body-s : 14px;
--t-body : 16px;
--t-body-l : 18px;
--t-sub : 21px;
--t-h3 : 24px;
--t-h2 : 32px;
--t-h1 : 42px;
--t-display : 60px;
--t-hero : 65px; /* Referenzwert. War 76px. */
/* ---- Raster. 4px-Basis fuer Abstaende. Polster in Bedienelementen ist
optisch gesetzt, nicht rein rasterhaft (Knopf 15/28, Pille 9/15). ---- */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
--s8:32px; --s10:40px; --s12:48px; --s14:56px; --s18:72px; --s24:96px; --s32:128px;
--page : 1200px;
--page-wide: 1400px; /* nur Datenflaeche — OpenSea laeuft breiter */
--nav-h : 76px; /* Hoehe der Kopfzeile. Seiten polstern damit vor, keine Magic Number. */
/* ---- Radius. Keine Einheitszahl: der Radius folgt der Dichte. ----
Papier 16 / Pille 100 (Officevibe: weich, einladend)
Nacht 12 / Pille 32 (Mercury: ruhig, gebaut)
Daten 10 / Pille 999 (OpenSea: dicht — aber die Pille haelt die Familie) */
--r-paper : 16px;
--r-night : 12px;
--r-data : 10px;
--r-pill : 999px;
--r-field : 12px;
/* ---- Erhebung. Alle drei Referenzen meiden schwere Schatten. ----
--ring ist OpenSeas Signatur und gehoert AUSSCHLIESSLICH auf die Datenflaeche
(.card-data). Mercury-Karten haben keinen Rand: auf Nacht trennt allein der
Helligkeitsschritt night-1 -> night-2 -> night-3. */
--ring : inset 0 0 0 1px var(--night-line); /* nur .card-data */
--ring-2 : inset 0 0 0 1px var(--night-line-2); /* nur .card-data:hover */
--lift : 0 4px 24px color-mix(in srgb, var(--ink) 8%, transparent); /* nur auf Papier */
--lift-2 : 0 8px 32px color-mix(in srgb, var(--ink) 12%, transparent);
}
/* ==========================================================================
Grundlage
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* Ein gesetztes display schlaegt die Browserregel [hidden] { display: none }.
Ein Element mit display:flex bleibt also sichtbar, obwohl das Attribut
gesetzt ist — genau daran sind die Filter der Ortsseite gescheitert: das
Attribut stand, die Karte stand weiter da. In den Seiten ist das siebenmal
einzeln geflickt worden; hier einmal fuer alle. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--sans);
font-size: var(--t-body);
font-weight: var(--w-book);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
/* ==========================================================================
Die zwei Oberflaechen. Jede Seite waehlt die, die zu ihrer Aufgabe passt.
========================================================================== */
/* DUNKEL — buchen. Startseite, Ortsseiten, Profile, Suche, Portal. */
.on-buchen { background: var(--night-1); color: var(--ivory); }
/* HELL — wissen. Ratgeber, Guides, alles zum Lesen. */
.on-wissen { background: var(--paper-0); color: var(--charcoal); }
/* Alte Namen, damit bestehende Entwuerfe weiterlaufen. Nicht mehr benutzen:
.on-night und .on-data sind dasselbe geworden. */
.on-night, .on-data { background: var(--night-1); color: var(--ivory); }
.on-paper { background: var(--paper-0); color: var(--charcoal); }
/* Linkfarbe — aber NICHT fuer Knoepfe. Ein ist optisch
ein Knopf und traegt seine eigene Farbe; die Linkregel hier hat aber eine
Klasse UND ein Element (0,1,1) und schlug damit .btn-ghost (0,1,0). Die
Geisterknoepfe der Kopfzeile standen dadurch auf allen dunklen Seiten in
Eisblau statt Elfenbein — sichtbar auf jedem Bildschirmfoto seit Tagen,
bemerkt erst am 09.09.2026 beim Nachmessen des Einstiegsovals.
:not([class*="btn"]) ist dieselbe Ausnahme, die thema.css fuer die
Inhaltslinks schon fuehrt.
ZWEITE Ausnahme, 14.09.2026: Kopfzeile, Menueklappe und Fusszeile. Deren
Verweise sind keine Fliesstext-Links; der Entwurf faerbt sie einzeln —
die Wortmarke Elfenbein ("nie Eisblau", steht weiter unten so dran), die
Hauptnavigation Elfenbein, die Sprachwahl Aschgrau, die Fusszeile Asche.
Genau das kam nie an: die Regel hier hat eine Klasse UND ein Element
(0,2,1), jene Einzelregeln haben zwei Klassen (0,2,0) — also gewann
diese. Die Kopfzeile stand darum seit jeher in Eisblau statt Elfenbein,
und seit dem Goldtausch vom 14.09.2026 in Gold (Dimas Bild: Wortmarke
und alle vier Navigationswoerter orange, Fusszeile ebenso).
thema.css fuehrt dieselbe Ausnahme fuer die Papierseiten laengst, dort
mit "main" davor und der Begruendung "sonst faerben sie auch die
Navigation und die Fusszeile". Hier steht sie jetzt an der Wurzel.
:where() zaehlt bei der Spezifitaet NICHT mit: die Regel bleibt (0,2,1)
und verhaelt sich fuer alles andere unveraendert, sie trifft die vier
Bereiche bloss nicht mehr. */
:is(.on-buchen, .on-night, .on-data) a:not([class*="btn"]):not(:where(.nav-float, .site-head, .nav-panel, .foot) *) { color: var(--ice); text-decoration: none; }
:is(.on-wissen, .on-paper) a:not([class*="btn"]):not(:where(.nav-float, .site-head, .nav-panel, .foot) *) { color: var(--ink); text-decoration: none; }
:is(.on-buchen, .on-night, .on-data) a:not([class*="btn"]):not(:where(.nav-float, .site-head, .nav-panel, .foot) *):hover { color: var(--ice-bright); }
/* Ein Fliesstextlink braucht mehr Rueckmeldung als eine Spur heller Blau.
Die Papierflaechen unterstreichen beim Zeigen seit je (Zeile darunter);
auf den dunklen Flaechen fehlte es. a:not([class]) trifft genau die
gewoehnlichen Textlinks - Karten, Plaketten, Knoepfe und .weiter tragen
alle eine Klasse und bleiben unberuehrt, sonst unterstriche eine ganze
Kachel beim Zeigen. Dima am 21.09.2026 ueber die Verweise in die
Nachbarschaft: "i meant how the links look to other things". */
:is(.on-buchen, .on-night, .on-data) a:not([class]):hover { text-decoration: underline; text-underline-offset: 3px; }
:is(.on-wissen, .on-paper) a:not([class*="btn"]):not(:where(.nav-float, .site-head, .nav-panel, .foot) *):hover { text-decoration: underline; text-underline-offset: 3px; }
a[class*="btn"] { text-decoration: none; }
/* Dichte statt dritter Oberflaeche. Auf einer Vergleichsliste sitzen die
Dinge enger und die Karten sind knapper — das ist eine Gangart von Dunkel,
keine eigene Welt. */
.dicht { --card-pad: var(--s3); --row-gap: var(--s2); }
.dicht .card-night,
.dicht .card-data { padding: var(--s3); border-radius: var(--r-data); }
.dicht .section-night { padding: var(--s12) 0; }
/* ==========================================================================
Typografie
========================================================================== */
/* Die Signatur: EIN kursives Wort in der Ueberschrift. Officevibes Stimme.
Nicht Dekoration — es ist der Unterschied zwischen "SaaS" und "jemand
hat das geschrieben". Genau eines pro Ueberschrift. */
.em {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
/* Kein font-variation-settings fuer SOFT/WONK: die Google-Fonts-URL fordert
nur ital, opsz und wght an, also liefert die Datei die anderen Achsen gar
nicht. Die Zeile hat nie gewirkt. */
letter-spacing: -.01em;
}
/* Laufweite POSITIV. Mercury stellt grosse Schrift weit, nicht eng — das ist der
Unterschied zwischen "architektonisch" und "generische Landingpage".
Negative Laufweite bleibt nur bei .em (Fraunces-Ersatz) und .num (Ziffernspalte). */
.hero-type {
font-family: var(--sans);
font-size: var(--t-hero);
font-weight: var(--w-mid);
line-height: 1.10;
letter-spacing: .01em;
margin: 0;
}
.display-type {
font-family: var(--sans);
font-size: var(--t-display);
font-weight: var(--w-mid);
line-height: 1.10;
letter-spacing: .01em;
margin: 0;
}
.h1-type {
font-size: var(--t-h1);
font-weight: var(--w-mid);
line-height: 1.15;
letter-spacing: .015em;
margin: 0;
}
.h2-type {
font-size: var(--t-h2);
font-weight: var(--w-mid);
line-height: 1.15;
letter-spacing: .02em;
margin: 0;
}
/* Die Anzeige auf PAPIER steht in der Serif — das ist die redaktionelle Stimme.
Officevibe verbietet die Grotesk in der Anzeige woertlich. Ohne Fraunces traegt
das der humanistische System-Serifenschnitt (Iowan Old Style / Georgia), der auf
jedem Geraet liegt und 0 Byte kostet. Der Kontrast zum kursiven Wort entsteht
dann aus aufrecht gegen kursiv, nicht aus grotesk gegen serif.
Nur Papier: Nacht und Daten bleiben in der Grotesk. */
.on-paper .hero-type,
.on-paper .h2-type {
font-family: var(--serif);
font-weight: 400;
letter-spacing: normal;
}
.on-paper .hero-type { font-size: clamp(40px, 6.2vw, 64px); line-height: 1.0; }
.on-paper .h2-type { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.08; }
.h3-type {
font-size: var(--t-h3);
font-weight: var(--w-mid);
line-height: 1.25;
letter-spacing: 0;
margin: 0;
}
/* Officevibes Augenbraue — steht ueber der Ueberschrift, nennt den Abschnitt */
.eyebrow {
font-size: var(--t-caption);
font-weight: var(--w-mid); /* 600 waere fett fuer eine Referenz mit 480 als Obergrenze */
letter-spacing: .14em;
text-transform: uppercase;
margin: 0 0 var(--s4);
}
/* gedaempft, nicht eisblau: --ice traegt auf Nacht nur Linktext und Fokusring */
/* Orange traegt auf Nacht die Redaktion — nicht die Handlung. Kobalt bleibt
die Farbe der Knoepfe, Gold bekommt alles, was ordnet und fuehrt:
Augenbrauen, Kapitelnummern, Stiftstriche, Anfuehrungszeichen.
Ausdruecklich NICHT auf Fahrschulkarten: dort heisst Gold "Superfahrschule",
und eine Auszeichnung, die ueberall herumliegt, zeichnet nichts mehr aus
(GRUNDSATZ-KEIN-RANKING.md). */
.on-buchen .eyebrow, .on-night .eyebrow, .on-data .eyebrow { color: var(--gold); }
.on-buchen .kapitel i, .on-night .kapitel i, .on-data .kapitel i { color: var(--gold); opacity: .8; }
.on-buchen .kapitel span, .on-night .kapitel span, .on-data .kapitel span { color: var(--ash-dim); }
/* Der Stift ist auf Nacht immer golden — auf Papier bleibt er der warme Ton. */
.on-buchen .mark, .on-night .mark, .on-data .mark { --pen: var(--gold); }
/* Karten und Plaketten bleiben ausgenommen. */
.school-card .eyebrow, .fskachel .eyebrow, .ortkachel .eyebrow { color: var(--ash-dim); }
.on-wissen .eyebrow, .on-paper .eyebrow { color: var(--stone); }
.lede {
font-size: var(--t-body-l);
line-height: 1.6;
font-weight: var(--w-book);
margin: var(--s5) 0 0;
max-width: 60ch;
}
.on-buchen .lede, .on-night .lede, .on-data .lede { color: var(--ash); }
.on-wissen .lede, .on-paper .lede { color: var(--stone); }
.muted { font-size: var(--t-body-s); }
.on-buchen .muted, .on-night .muted, .on-data .muted { color: var(--ash-dim); }
.on-wissen .muted, .on-paper .muted { color: var(--stone); }
/* Zahlen, die in einer Spalte stehen. OpenSeas Signatur. */
.num {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
letter-spacing: -.02em;
}
/* ==========================================================================
Bedienelemente
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s2);
font-family: var(--sans);
font-size: var(--t-body);
font-weight: var(--w-book); /* Referenz: Knopfschrift 400, nicht betont */
line-height: 1;
padding: var(--s4) var(--s8);
border-radius: var(--r-pill);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: background-color .16s ease, border-color .16s ease, color .16s ease,
box-shadow .16s ease;
}
/* ZEIGEN, DASS ES EIN KNOPF IST — 14.09.2026, Dima: "i want buttons when we
bring pointer on it to get somehow better highlighted".
Vorher aenderte sich beim Ueberfahren fast nichts: der volle Knopf wurde
eine Spur dunkler, der Geisterknopf bekam 10 bzw. 5 Prozent Schleier, und
der Umriss-Knopf tauschte nur seine Randfarbe gegen eine fast gleich
dunkle. Auf hellem Grund war das nicht zu sehen.
Jetzt antwortet jeder Knopf mit zwei Aenderungen statt einer: der volle mit
dunklerer Flaeche UND einem weichen Ring in seiner eigenen Farbe, der
Umriss-Knopf mit vollem Rand UND einer getoenten Flaeche, der Geisterknopf
mit einem Schleier, der jetzt kraeftig genug ist, um ihn zu sehen (16 statt
10 Prozent auf Nacht, 9 statt 5 auf Papier).
Kein Schlagschatten und keine Bewegung: beides liest sich billig, und ein
Knopf, der beim Ueberfahren wandert, verschiebt die Zeile um sich herum. */
/* Die einzige gefuellte Farbe im ganzen System. Eine pro Bildschirm. */
.btn-primary { background: var(--cobalt); color: var(--white); border-color: var(--cobalt); }
.btn-primary:hover {
background: var(--cobalt-press); border-color: var(--cobalt-press);
box-shadow: 0 0 0 4px rgba(82, 102, 235, .28);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--cobalt) 28%, transparent);
}
/* Mercurys Geisterknopf: Elfenbein fuer Rand UND Text. Nie farbig. */
.btn-ghost { background: transparent; color: var(--ivory); border-color: var(--ivory); }
.btn-ghost:hover { background: rgba(237,237,243,.16); background: color-mix(in srgb, var(--ivory) 16%, transparent); }
/* Referenz: "Transparent background, Graphite text, no border." Ein bordierter
heller Knopf konkurriert optisch mit der einen gefuellten Hauptaktion. */
.on-paper .btn-ghost { color: var(--charcoal); border-color: transparent; }
.on-paper .btn-ghost:hover { background: rgba(23,20,23,.09); background: color-mix(in srgb, var(--charcoal) 9%, transparent); }
/* OpenSeas Umriss-Aktion: eisblauer Rand auf dunkel, Text bleibt weiss. */
.btn-outline {
background: transparent;
color: var(--ivory);
border-color: var(--ice);
font-size: var(--t-body-s);
padding: var(--s3) var(--s5);
border-radius: var(--r-pill);
}
.btn-outline:hover {
border-color: var(--ivory);
background: rgba(237,237,243,.12);
background: color-mix(in srgb, var(--ivory) 12%, transparent);
}
/* Dieselbe Antwort fuer die Tastatur. Bis heute stand hier gar nichts: die
alte Themendatei setzte auf .btn:focus ein "outline: none", und damit war
ein Knopf, den man mit der Tabulatortaste ansteuert, UNSICHTBAR. Diese
Regel gilt jetzt nur noch der alten Fassung; hier steht der Ersatz.
:focus-visible und nicht :focus — sonst traegt jeder angeklickte Knopf
den Ring noch minutenlang mit sich herum. */
.btn:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.on-paper .btn:focus-visible, .on-wissen .btn:focus-visible { outline-color: var(--cobalt); }
.btn-sm { font-size: var(--t-body-s); padding: var(--s3) var(--s5); }
.btn-lg { font-size: var(--t-body-l); padding: var(--s5) var(--s8); }
/* Filterpille — OpenSeas Leiste, aber rund statt 4px, damit die Familie haelt */
.pill {
display: inline-flex;
align-items: center;
gap: var(--s2);
font-size: var(--t-body-s);
font-weight: var(--w-mid);
line-height: 1;
padding: var(--s3) var(--s4);
border-radius: var(--r-pill);
border: 1px solid var(--night-line-2);
background: transparent;
color: var(--ivory);
cursor: pointer;
white-space: nowrap;
transition: border-color .16s ease, background-color .16s ease;
}
.pill:hover { border-color: var(--ivory); }
/* Derselbe Ring wie beim Knopf. Die Pille ist auf drei Rechnerseiten das
Bedienteil ueberhaupt (Kosten, Bussen, Vignette) und hatte als einziges
Bauteil des Systems gar keine Fokusregel — bis zum 17.09.2026 fiel das
nicht auf, weil style.css ohnehin jeden Ring abschaltete. */
.pill:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.on-paper .pill:focus-visible, .on-wissen .pill:focus-visible { outline-color: var(--cobalt); }
.pill[aria-pressed="true"], .pill.is-on {
border-color: var(--ice);
background: rgba(142,197,255,.12);
background: color-mix(in srgb, var(--ice) 12%, transparent);
color: var(--ivory);
}
.on-paper .pill { border-color: var(--paper-line-2); color: var(--charcoal); }
.on-paper .pill.is-on { border-color: var(--cobalt); background: var(--lavender); color: var(--ink); }
/* ==========================================================================
Flaechen
========================================================================== */
/* Mercury: die Karte hebt sich durch EINEN Helligkeitsschritt, nicht durch Schatten */
.card-night {
background: var(--night-2);
border-radius: var(--r-night);
padding: var(--s8);
}
/* OpenSea: die Kante ist ein 1px-Innenring aus Weiss-Alpha, kein Schlagschatten */
.card-data {
background: var(--night-2);
border-radius: var(--r-data);
padding: var(--s3);
box-shadow: var(--ring);
transition: box-shadow .16s ease, background-color .16s ease;
}
.card-data:hover { box-shadow: var(--ring-2); background: var(--night-2-hover); }
/* Officevibe: weisse Karte, Creme-Haarlinie, grosszuegiges Polster */
.card-paper {
background: var(--paper-1);
border: 1px solid var(--paper-line);
border-radius: var(--r-paper);
padding: var(--s8);
}
.card-paper-accent { border: 1.5px solid var(--cobalt); }
.card-ink { background: var(--ink); color: var(--white); border: 0; } /* nur auf Papier */
/* ==========================================================================
Plaketten und Marken
========================================================================== */
.badge {
display: inline-flex;
align-items: center;
gap: var(--s1);
font-size: var(--t-micro);
font-weight: var(--w-mid); /* 600 ist fett fuer eine Referenz mit 480 als Obergrenze */
letter-spacing: .04em;
text-transform: uppercase;
padding: var(--s1) var(--s3);
border-radius: var(--r-pill);
white-space: nowrap;
}
/* Auf der Nachtoberflaeche ist .badge-quiet der Normalfall. .badge-ice und
.badge-gold gehoeren auf die Datenflaeche, wo sie einen Zustand bedeuten. */
.badge-ice { background: rgba(142,197,255,.14); background: color-mix(in srgb, var(--ice) 14%, transparent); color: var(--ice); }
.badge-quiet { background: rgba(255,255,255,.07); color: var(--ash); }
.badge-lavender { background: var(--lavender); color: var(--ink); } /* nur auf Papier */
.badge-gold { background: rgba(240,180,41,.14); background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold); }
/* Auf Papier folgt die Plakette der Referenz: 12px, Gewicht 500, Satzschreibung,
16px Radius. Die Pillenform bleibt Knoepfen und Filtern vorbehalten — eine
Plakette ist nicht klickbar, also darf sie auch nicht so aussehen. */
.on-paper .badge {
font-size: var(--t-caption);
font-weight: var(--w-mid);
letter-spacing: normal;
text-transform: none;
border-radius: var(--r-paper);
padding: var(--s1) var(--s2);
}
/* geprueft / Superfahrschule — OpenSeas Haken in Eisblau */
.verified { color: var(--ice); flex: none; }
.stars { color: var(--gold); letter-spacing: .04em; font-size: var(--t-body-s); }
/* #f0b429 auf Weiss sind 1.86:1 — unlesbar. Auf Papier daher der dunkle Goldton. */
.on-paper .stars { color: var(--gold-ink); }
/* ==========================================================================
Felder
========================================================================== */
.field {
width: 100%;
font-family: var(--sans);
font-size: var(--t-body);
padding: var(--s4) var(--s5);
border-radius: var(--r-field);
border: 1px solid var(--night-line-2);
background: rgba(255,255,255,.04);
color: var(--ivory);
outline: none;
transition: border-color .16s ease;
}
.field::placeholder { color: var(--ash); } /* --ash-dim war 4.38:1 */
.on-paper .field::placeholder { color: var(--stone); } /* 5.31:1 statt 3.36:1 */
.field:focus { border-color: var(--ice); }
.on-paper .field {
background: var(--paper-1);
border-color: var(--paper-line-2);
color: var(--charcoal);
border-radius: var(--r-paper);
}
.on-paper .field:focus { border-color: var(--cobalt); }
.label {
display: block;
font-size: var(--t-body-s);
font-weight: var(--w-mid);
margin-bottom: var(--s2);
}
.on-buchen .label, .on-night .label, .on-data .label { color: var(--ash); }
.on-wissen .label, .on-paper .label { color: var(--stone); }
/* ==========================================================================
Raster
========================================================================== */
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--s6); }
.wrap-wide { max-width: var(--page-wide); margin: 0 auto; padding: 0 var(--s6); }
.section-night { padding: var(--s18) 0; } /* Mercury: 72px Section-Gap */
.section-paper { padding: var(--s18) 0; } /* Officevibe: 80 */
.section-data { padding: var(--s12) 0; } /* OpenSea: 48, dicht */
.grid { display: grid; gap: var(--s6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.rule { height: 1px; background: var(--night-line); border: 0; margin: 0; }
.on-paper .rule { background: var(--paper-line); }
/* ==========================================================================
Kopfzeile — auf allen drei Oberflaechen dieselbe Form
========================================================================== */
.nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s6);
height: var(--nav-h);
}
.nav-links { display: flex; align-items: center; gap: var(--s2); }
.nav-link {
font-size: var(--t-body); /* Referenz: 16px */
font-weight: var(--w-mid); /* Referenz: 500. 400 las sich wie Fliesstext. */
padding: 10px var(--s3); /* enger als 16px, damit vier Links einzeilig bleiben */
border-radius: var(--r-pill);
text-decoration: none;
white-space: nowrap; /* ein Link ist immer eine Zeile */
transition: background-color .16s ease;
}
.on-buchen .nav-link, .on-night .nav-link, .on-data .nav-link { color: var(--ivory); }
.on-wissen .nav-link, .on-paper .nav-link { color: var(--charcoal); }
.on-buchen .nav-link:hover, .on-night .nav-link:hover, .on-data .nav-link:hover { background: rgba(255,255,255,.07); color: var(--ivory); }
.on-wissen .nav-link:hover, .on-paper .nav-link:hover { background: rgba(23,20,23,.05); background: color-mix(in srgb, var(--charcoal) 5%, transparent); text-decoration: none; }
/* Mercurys Milchglas: durchsichtig ueber dem Bild, fest beim Scrollen.
fixed, nicht absolute — sonst scrollt die Leiste weg und der Milchglas-Zustand
ist nie sichtbar (und der Menueknopf auf dem Telefon nie erreichbar). */
.nav-float {
position: fixed; top: 0; left: 0; right: 0; z-index: 20;
background: transparent;
}
/* DER GEISTERKNOPF UEBER DEM FOTO — 17.09.2026.
Dima mit einem Bildausschnitt: "highlight this button so it stays in style
of website but is clearly visible". Gemeint ist "Fahrschulprofil anmelden"
in der schwebenden Leiste der Startseite: Elfenbein auf Elfenbein-Rand,
ohne Flaeche, und dahinter ein Foto mit hellem Wald. Der Schleier
(.hero-veil) reicht dafuer nicht — an einer hellen Stelle des Bildes steht
heller Text auf hellem Grund.
KEIN Kobalt. Die Handlungsfarbe gehoert auf der Startseite dem Vergleich
("Suchen", "Fahrschulvergleich starten"); ein zweiter kobaltblauer Knopf
in der Kopfzeile waere eine zweite Hauptaktion und genau das, was die
Identitaet an drei Stellen verbietet. Stattdessen Mercurys eigenes Mittel
an dieser Stelle: Milchglas. Der Knopf bekommt eine dunkle, weich
gezeichnete Unterlage und einen fast vollen Elfenbeinrand — dieselbe
Sprache wie die Leiste beim Scrollen, nur schon oben.
Der Weichzeichner sitzt auf dem KNOPF, nicht auf der Leiste. Auf der
Leiste war er am 14.09.2026 die Ursache dafuer, dass die aufgeklappte
Navigation auseinanderfiel (siehe direkt darunter); ein Knopf klappt
nichts auf und darf darum eine eigene Zeichenwurzel sein.
Nur dort, wo wirklich ein Bild hinter der Leiste liegt: dieselbe
Bedingung, die thema.css fuer die Nachtinsel der Leiste benutzt. Die
hellen Leseseiten tragen .site-head mit fester Flaeche und bleiben
unberuehrt. */
body:has(.hero-media, .nacht-oben) .nav-float:not(.nav-solid) .btn-ghost {
background: rgba(16, 16, 24, .46);
-webkit-backdrop-filter: blur(10px) saturate(1.15);
backdrop-filter: blur(10px) saturate(1.15);
border-color: rgba(237, 237, 243, .92);
}
body:has(.hero-media, .nacht-oben) .nav-float:not(.nav-solid) .btn-ghost:hover {
background: rgba(16, 16, 24, .64);
border-color: var(--ivory);
}
/* Ohne backdrop-filter (aeltere Browser) traegt die Flaeche allein — dann
etwas dichter, sonst bleibt das Foto durch. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
body:has(.hero-media, .nacht-oben) .nav-float:not(.nav-solid) .btn-ghost {
background: rgba(16, 16, 24, .68);
}
}
/* DER WEICHZEICHNER LIEGT UNTER DER LEISTE, NICHT AUF IHR — 14.09.2026.
Dima: "when i press on Fahrschüler / Fahrschulen this bug appears (the line
steals spot)". Im Bild lag die Suchzeile quer ueber der offenen Klappe, die
beiden oberen Eintraege waren verdeckt und nicht anklickbar.
Es war kein z-index-Streit: mit z-index 9999 auf der Klappe aenderte sich
NICHTS (im Browser ausprobiert). Die Ursache ist backdrop-filter selbst.
Ein Element mit backdrop-filter wird zur eigenen Zeichenwurzel; alles, was
darin liegt, wird mit dem weichgezeichneten Abbild zusammengerechnet — und
was ueber den Rand des Elements hinausragt, wie ein aufgeklapptes
Untermenue, faellt dabei auseinander. Nachgewiesen, indem ich genau diese
eine Angabe abgeschaltet habe: sofort stand das Menue sauber da.
Der Weichzeichner sitzt darum jetzt auf einer Unterlage (::before, inset 0,
z-index -1) statt auf der Leiste selbst. Gleiche Farbe, gleiche Unschaerfe,
gleiche Kante — nur ist die Leiste keine Zeichenwurzel mehr, und was sie
aufklappt, bleibt heil. Betrifft auch die Menueklappe des Telefons, die im
selben Element steckt. */
.nav-solid {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: 1px solid var(--night-line);
}
/* Die Unterlage haengt sich an das naechste POSITIONIERTE Element. Auf der
WordPress-Seite ist das die Leiste selbst (.nav-float ist "fixed"). Ueberall
sonst — im Vergleichsportal steckt .nav-solid als Kind in der Kopfzeile —
traegt sie gar keine Position, und die Unterlage wuerde sich an irgendeinen
Vorfahren haengen. Darum hier, aber ausdruecklich NICHT fuer .nav-float:
die muss "fixed" bleiben, sonst scrollt die Leiste weg.
"relative" ohne z-index erzeugt keinen neuen Stapelraum — genau der war ja
das Problem. */
.nav-solid:not(.nav-float) { position: relative; }
.nav-solid::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: rgba(23,23,33,.82);
background: color-mix(in srgb, var(--night-1) 82%, transparent);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
/* Die Wortmarke ist kein Link-Text: Elfenbein beziehungsweise Kohle, nie Eisblau. */
.logo { display: flex; align-items: center; gap: var(--s2); font-weight: var(--w-semi); font-size: var(--t-body-l); letter-spacing: -.02em; text-decoration: none; }
.on-buchen .logo, .on-night .logo, .on-data .logo { color: var(--ivory); }
.on-wissen .logo, .on-paper .logo { color: var(--charcoal); }
/* Die Marke ist kein Bedienelement — Kobalt bleibt der einen Handlung vorbehalten. */
.logo-mark {
width: 26px; height: 26px; border-radius: var(--r-data); flex: none;
background: var(--night-3);
display: grid; place-items: center;
color: var(--ivory); font-size: var(--t-small); font-weight: var(--w-semi);
}
/* ==========================================================================
Fusszeile
========================================================================== */
/* Keine gesaettigte Farbflaeche: die groesste Flaeche der Seite bleibt Leinwand,
abgesetzt durch eine Haarlinie. --ink gehoert auf Papier, nicht auf Nacht. */
.foot { background: var(--night-1); color: var(--ivory); border-top: 1px solid var(--night-line); padding: var(--s18) 0 var(--s10); }
.foot a { color: var(--ash); text-decoration: none; font-size: var(--t-body-s); }
.foot a:hover { color: var(--ivory); }
.foot .logo { color: var(--ivory); font-size: var(--t-body-l); }
/* h4 UND .foot-h: die Spaltenbeschriftungen der Fusszeile sind seit dem
21.09.2026 hinter dem letzten des
Textes eine Gliederungsstufe uebersprang (Lighthouse "heading-order").
Das h4 bleibt in der Regel stehen, damit aeltere Vorlagen, die noch eines
ausgeben, unveraendert aussehen. */
.foot h4, .foot .foot-h { font-size: var(--t-caption); text-transform: uppercase; letter-spacing: .12em; color: var(--ash-dim); margin: 0 0 var(--s4); font-weight: var(--w-mid); }
/* ==========================================================================
Klein
========================================================================== */
@media (max-width: 1080px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
:root { --t-hero: 40px; --t-display: 34px; --t-h1: 28px; --t-h2: 24px; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.section-night { padding: var(--s14) 0; }
/* Tippflaeche: mindestens 44px hoch. Gilt fuer jedes Bedienelement. */
.btn, .btn-sm, .btn-outline, .pill { min-height: 44px; }
}
/* ==========================================================================
Bewegung — das gemeinsame Vokabular
--------------------------------------------------------------------------
Dima, 04.09.2026: die kleinen Animationen und die laufenden Zahlen sind
das, was den Seiten Leben gibt. Damit sie ueberall GLEICH wirken, stehen
Dauer, Kurve und Verzoegerung hier — nicht in jeder Seite neu erfunden.
Regeln:
- Alles laeuft EINMAL, wenn es ins Bild kommt. Nichts wiederholt sich
endlos: eine Dauerschleife frisst Akku und zieht das Auge vom Text weg.
- Nichts ist Bedingung fuer Lesbarkeit. Faellt die Bewegung aus, steht
der fertige Zustand da — nie eine leere Flaeche.
- "Bewegung reduzieren" im Betriebssystem schaltet alles ab. Das ist
nicht Kuer, sondern Pflicht: bewegte Flaechen loesen bei manchen
Menschen Schwindel aus.
========================================================================== */
:root {
--mo-kurz : 320ms;
--mo-mittel: 600ms;
--mo-lang : 900ms;
--mo-kurve : cubic-bezier(.4, 0, .2, 1);
--mo-staffel: 90ms; /* Abstand zwischen Geschwistern */
}
/* --- Zahl zaehlt hoch -----------------------------------------------------
Das Element traegt data-zaehl="86.50" und zeigt bis dahin den Endwert.
Das Skript unten setzt ihn auf 0 und zaehlt hoch — faellt das Skript aus,
steht sofort der richtige Wert da. Tabellenziffern, damit die Breite beim
Zaehlen nicht springt. */
[data-zaehl] { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
/* --- WICHTIG: die zusammengefalteten Zustaende gelten NUR, wenn das Skript
laeuft. Es setzt dafuer .js-bewegung auf das . Ohne diese Klammer war
ein Balken, den der Beobachter verpasst, nicht bloss unanimiert, sondern
UNSICHTBAR — genau so verschwanden die vier Balken des Kantonsdiagramms und
uebrig blieben vier leere Schienen. Der fertige Zustand ist jetzt der
Grundzustand; die Animation ist nur die Zugabe. --- */
/* --- Linie zeichnet sich -------------------------------------------------- */
.js-bewegung .zeichnet { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); }
.js-bewegung .zeichnet.ist-da { stroke-dashoffset: 0; transition: stroke-dashoffset var(--mo-mittel) var(--mo-kurve); }
/* --- Flaeche waechst von unten -------------------------------------------- */
.js-bewegung .waechst { transform: scaleY(0); transform-origin: bottom; }
.js-bewegung .waechst.ist-da { transform: scaleY(1); transition: transform var(--mo-mittel) var(--mo-kurve); }
/* --- Balken waechst nach rechts -------------------------------------------
.laeuft und .waechst gehoeren auf ein Kaestchen. Auf einem inline-Element
wirkt kein transform und keine Breite — der Balken bliebe leer, ohne dass
irgendetwas fehlschlaegt. Darum hier einmal fuer alle festgehalten. */
.laeuft, .waechst { display: block; }
.js-bewegung .laeuft { transform: scaleX(0); transform-origin: left; }
.js-bewegung .laeuft.ist-da { transform: scaleX(1); transition: transform var(--mo-mittel) var(--mo-kurve); }
/* --- Ruhiges Auftauchen, fuer Karten und Reihen --------------------------- */
.js-bewegung .taucht-auf { opacity: 0; transform: translateY(10px); }
.js-bewegung .taucht-auf.ist-da {
opacity: 1; transform: none;
transition: opacity var(--mo-mittel) var(--mo-kurve),
transform var(--mo-mittel) var(--mo-kurve);
}
/* Geschwister nacheinander, nicht alle auf einmal */
.staffel > *:nth-child(1) { transition-delay: calc(var(--mo-staffel) * 0); }
.staffel > *:nth-child(2) { transition-delay: calc(var(--mo-staffel) * 1); }
.staffel > *:nth-child(3) { transition-delay: calc(var(--mo-staffel) * 2); }
.staffel > *:nth-child(4) { transition-delay: calc(var(--mo-staffel) * 3); }
.staffel > *:nth-child(5) { transition-delay: calc(var(--mo-staffel) * 4); }
.staffel > *:nth-child(6) { transition-delay: calc(var(--mo-staffel) * 5); }
.staffel > *:nth-child(n+7){ transition-delay: calc(var(--mo-staffel) * 6); }
/* --- Pflicht: alles steht still, wenn jemand das so eingestellt hat ------- */
@media (prefers-reduced-motion: reduce) {
.zeichnet, .zeichnet.ist-da { stroke-dashoffset: 0 !important; transition: none !important; }
.waechst, .waechst.ist-da,
.laeuft, .laeuft.ist-da { transform: none !important; transition: none !important; }
.taucht-auf, .taucht-auf.ist-da { opacity: 1 !important; transform: none !important; transition: none !important; }
.staffel > * { transition-delay: 0ms !important; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
Das Bildzeichen der Marke — DriveLab GmbH, 14.09.2026
Eigener Block mit eigenem Anfang und eigenem Ende. Nichts oberhalb
anfassen; andere Lanes arbeiten in derselben Datei (CLAUDE.md Abschnitt 7).
Warum eine NEUE Klasse und nicht .logo-mark weiter: an .logo-mark haengt in
drei Dateien je ein eigenes background (identity.css 693, wp.css 1081/1083,
thema.css 120). Das SVG bringt seine Kachel selbst mit; ein background
dahinter waere ein zweites Quadrat. Die alten Regeln stehen noch da, greifen
aber ins Leere — kein Element traegt die Klasse mehr. Sie aufzuraeumen heisst
drei Dateien anzufassen, zwei davon gehoeren anderen Lanes; das ist eine
eigene kleine Aufgabe und keinen Konflikt wert.
========================================================================== */
.logo-zeichen {
flex: none;
display: block;
width: 32px; height: 32px;
}
/* --- Die Farbe der Wortmarke, und warum das hier stehen muss ---------------
Zeile 688 sagt ausdruecklich: "Die Wortmarke ist kein Link-Text: Elfenbein
beziehungsweise Kohle, nie Eisblau." Die Linkregel in Zeile 246 nimmt davon
.nav-float, .site-head, .nav-panel und .foot aus — aber NICHT .nav-solid,
und genau das traegt die Kopfzeile von /ch/ (views-neu/partials/top.phtml).
Sie gewinnt dort mit (0,2,1) gegen die (0,2,0) von Zeile 690, und die
Wortmarke stand eisblau statt elfenbein. Gemessen am 14.09.2026 mit
getComputedStyle, nicht geschaetzt.
Das ist ein Fehler von vorher, nicht von diesem Zeichen — aber das Zeichen
erbt die Farbe (currentColor) und wuerde ihn sichtbar machen. Darum hier
gleichgezogen, statt Zeile 246 einer anderen Lane umzuschreiben: gleiche
Spezifitaet, spaeter in der Datei, gewinnt.
------------------------------------------------------------------------- */
:is(.on-buchen, .on-night, .on-data) a.logo { color: var(--ivory); }
:is(.on-wissen, .on-paper) a.logo { color: var(--charcoal); }
/* --- Die Farbe des Zeichens: Kobalt --------------------------------------
Dima am 14.09.2026: "so it matches the design of the website". Also der
Wert des Systems selbst, --cobalt #5266eb, auf beiden Flaechen — keine
eigene Marken-Farbe daneben.
EINE SACHE, DIE MAN WISSEN MUSS: wp.css 1081 haelt fest "Genau EIN
gefuelltes Kobalt pro Bildschirm — die Logomarke traegt es nicht." Mit
dieser Entscheidung stehen in der Kopfzeile zwei Kobaltflaechen: das
Zeichen und der Knopf "Fahrschule finden". Bewusst so entschieden; die
Regel steht weiter da und gilt fuer alles andere.
Gemessener Kontrast: 3.8:1 auf Nacht, 4.4:1 auf Papier. Schwaecher als die
Alternativen, fuer ein Bildzeichen aber ausreichend — es traegt keinen Text.
------------------------------------------------------------------------- */
:is(.on-buchen, .on-night, .on-data) a.logo .logo-zeichen,
:is(.on-wissen, .on-paper) a.logo .logo-zeichen { color: var(--cobalt); }
/* Die Fusszeile ist immer dunkel, auch auf Papierseiten — also zuletzt und
damit staerker als die Regeln darueber. Das Wort bleibt Elfenbein. */
.foot a.logo { color: var(--ivory); }
.foot a.logo .logo-zeichen { color: var(--cobalt); }
/* --- Bewegung -------------------------------------------------------------
Eine Umdrehung beim Laden, danach Ruhe. Dauerndes Drehen zieht das Auge vom
einen kobaltblauen Knopf weg, und genau der soll ziehen. */
@keyframes todrive-rad-dreht { to { transform: rotate(360deg); } }
.logo-zeichen .td-rad {
transform-origin: 66px 56px;
animation: todrive-rad-dreht 1.9s cubic-bezier(.15, .75, .2, 1) both;
}
/* Wer im Betriebssystem "Bewegung reduzieren" gesetzt hat — oft wegen
Schwindel oder Migraene —, sieht das Rad stehen. Barrierefreiheit, nicht
Feinschliff. */
@media (prefers-reduced-motion: reduce) {
.logo-zeichen .td-rad { animation: none; }
}
/* Auf dem Telefon ist die Kopfzeile enger. */
@media (max-width: 560px) {
.logo-zeichen { width: 28px; height: 28px; }
}
/* Ende Bildzeichen
========================================================================== */