/* ========================================================================== todrive.ch — Bausteine Die Grafikteile, die aus den drei Gestaltungsrichtungen uebrig geblieben sind, hier EINMAL fuer alle Seiten. Stand 04.09.2026. Warum das eine eigene Datei ist: die sechs Seiten liefen auseinander, weil jede ihre Teile selbst gebaut hat. Ein Baustein, eine Stelle. Wer hier etwas aendert, aendert es auf allen Seiten — genau das ist der Zweck. Braucht: identity.css (Farben, Raster, Bewegung), bausteine.svg (Symbole), bewegung.js (laesst die Sachen beim Sichtwerden anlaufen). Symbole einbinden: ========================================================================== */ /* --------------------------------------------------------------- Glyphen -- 30 Zeichen auf 24er-Raster, 1.5 px Strich, eine Strichstaerke. Sie tragen die Merkmale einer Fahrschule: Automatik, Sprache, Abholung, Versicherung. Immer mit Beschriftung daneben, nie allein — ein Zeichen ohne Wort raet. EIN ZEICHEN, EINE BEDEUTUNG (15.09.2026). Bis dahin stand dasselbe Zeichen fuer verschiedene Dinge: die Banknote (gl-note) fuer Geld UND fuer die Theoriepruefung UND fuer die Probelektion UND fuer "Sortieren nach", das Blatt (gl-leaf) fuer das Elektroauto UND fuer den VKU, der Stapel (gl-package) fuer das Sparpaket UND fuer den Lernfahrausweis. Dafuer gibt es jetzt gl-test, gl-ticket, gl-sort, gl-class, gl-id, gl-book und die Zielfahne gl-flag; der Stern ist wieder allein die Bewertung. Wer eins fuer eine neue Bedeutung braucht, zeichnet eins — er borgt keins. */ .gl { width: var(--s6); height: var(--s6); flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .gl-sm { width: var(--s4); height: var(--s4); } .gl-lg { width: var(--s8); height: var(--s8); } /* Merkmal: Zeichen plus Wort. */ .merkmal { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-body-s); } .on-buchen .merkmal, .on-night .merkmal, .on-data .merkmal { color: var(--ash); } .on-wissen .merkmal, .on-paper .merkmal { color: var(--stone); } /* ------------------------------------------------------- Handschriftliches -- Der Stift. Er gehoert der LERNENDEN, nicht der Plattform: eine Markierung sagt "darauf achte ich", nie "die ist besser". Darum nie ueber einen Vergleich zweier Fahrschulen setzen — nur ueber eigene Kriterien, eine Ortszahl oder einen Schritt des Weges. Siehe GRUNDSATZ-KEIN-RANKING.md. */ .mark { position: absolute; left: -6%; top: -22%; width: 112%; height: 150%; pointer-events: none; overflow: visible; } .mark use, .mark path { fill: none; stroke: var(--pen, var(--warn)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .mark-underline { top: auto; bottom: -34%; height: 46%; } .mark-arrow { position: static; width: var(--s24); height: var(--s12); } /* Traeger: das Wort, um das gezeichnet wird. */ .pen-target { position: relative; display: inline-block; } /* Leichte Drehung, damit nichts gestempelt wirkt. */ .mark-ellipse { transform: rotate(-1.2deg); } .mark-check { transform: rotate(2deg); } /* ------------------------------------------------------------ Verlaufskeil -- Officevibes Kniff: eine Farbflaeche ragt hinter der Karte hervor. Nur auf Papier — auf Nacht kennt Mercury keine gesaettigten Flaechen. */ .keil { position: relative; } .keil::before, .keil::after { content: ""; position: absolute; z-index: 0; border-radius: var(--r-paper); } .keil::before { /* warm, oben rechts */ inset: -18px -22px auto auto; width: 42%; height: 46%; background: linear-gradient(135deg, var(--gold), var(--warn) 55%, var(--ink)); transform: rotate(2.5deg); } .keil::after { /* tief, unten links */ inset: auto auto -20px -18px; width: 34%; height: 38%; background: var(--ink); transform: rotate(-2deg); } .keil > * { position: relative; z-index: 1; } /* ---------------------------------------------------------------- Schnipsel -- Kleine schwebende Karten, versetzt auf eine groessere gelegt. Sie zeigen einen echten Moment (eine Anfrage, eine Bewertung), statt ihn zu behaupten. */ .schnipsel { position: absolute; z-index: 3; background: var(--paper-1); color: var(--charcoal); border-radius: var(--r-night); padding: var(--s3) var(--s4); box-shadow: 0 10px 30px color-mix(in srgb, var(--night-0) 26%, transparent); font-size: var(--t-body-s); max-width: 260px; } .schnipsel b { display: block; font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--stone); margin-bottom: 4px; font-weight: var(--w-semi); } /* ------------------------------------------------------------ Ring-Messwert -- Fuer eine Bewertung oder einen Ortsschnitt. Auf JEDER Karte gleich — nie nur auf einer, sonst wird aus dem Ring eine Auszeichnung. */ .ring { position: relative; width: 84px; height: 84px; flex: none; } .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .ring-bg { fill: none; stroke: color-mix(in srgb, currentColor 16%, transparent); stroke-width: 7; } .ring-arc { fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: round; } /* Auf Papier ist #f0b429 mit 1.86:1 unlesbar — dort dieselbe Farbe dunkler, genau wie bei den Sternen (identity.css, .on-paper .stars). */ .on-paper .ring-arc { stroke: var(--gold-ink); } .ring-wert { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--t-sub); font-weight: var(--w-mid); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------- Produktmodell -- Mercurys Kniff: die eigene Oberflaeche gross zeigen, statt sie zu beschreiben. Ein Fensterrahmen mit echten Zeilen. */ .modell { background: var(--night-2); border-radius: var(--r-night); box-shadow: var(--ring); overflow: hidden; } .modell-leiste { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--night-line); background: color-mix(in srgb, var(--night-3) 60%, transparent); } .modell-punkte { display: flex; gap: 6px; } .modell-punkte i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--ivory) 22%, transparent); } .modell-adresse { /* min-width: 0, weil flex:1 sonst nicht unter die Breite des Inhalts schrumpft. Die Adresse ist auf der echten Website laenger als im Entwurf, und ohne diese Zeile schob sie den ganzen Kasten auf einem Telefon ueber den Rand hinaus. */ flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: var(--mono); font-size: var(--t-micro); color: var(--ash-dim); background: color-mix(in srgb, var(--night-0) 55%, transparent); border-radius: var(--r-pill); padding: 5px var(--s3); text-align: center; } .modell-reihe { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--night-line); } .modell-reihe:last-child { border-bottom: 0; } /* Schwebekarte dahinter — Tiefe ohne Schlagschatten. */ .dahinter { position: relative; } .dahinter::before { content: ""; position: absolute; inset: 14px -18px -16px 22px; z-index: 0; background: var(--night-2); border-radius: var(--r-night); box-shadow: var(--ring); transform: rotate(1.4deg); } .dahinter > * { position: relative; z-index: 1; } /* ------------------------------------------------------------- Passungsband -- Welche Kriterien eine Fahrschule erfuellt. ERFUELLT = gefuellt mit Haken. NICHT ERFUELLT = ruhig leer. Nie ein rotes Kreuz, nie durchgestrichen: Abwesenheit heisst "gerade nicht dein Kriterium", nie "schlechter". */ .passung { display: flex; flex-wrap: wrap; gap: 6px; } .passung span { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-micro); padding: 4px 9px; border-radius: var(--r-pill); border: 1px solid var(--night-line-2); color: var(--ash-dim); } .passung .ja { border-color: color-mix(in srgb, var(--ice) 55%, transparent); background: color-mix(in srgb, var(--ice) 12%, transparent); color: var(--ivory); } .on-wissen .passung span, .on-paper .passung span { border-color: var(--paper-line-2); color: var(--stone); } .on-wissen .passung .ja, .on-paper .passung .ja { border-color: var(--cobalt); background: var(--lavender); color: var(--ink); } /* ------------------------------------------------------------- Preisfeld ---- Wo die Preise eines ORTES liegen. Alle Punkte gleich gross und gleich hell — keiner ist der Gewinner. Beschreibt den Ort, nie eine einzelne Schule. */ .preisfeld { position: relative; height: var(--s10); } .preisfeld-linie { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: color-mix(in srgb, currentColor 18%, transparent); } .preisfeld i { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: color-mix(in srgb, currentColor 45%, transparent); } .preisfeld .schnitt { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); } .on-paper .preisfeld .schnitt { background: var(--gold-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-ink) 22%, transparent); } /* ------------------------------------------------------- Preis mit Dauer ---- Immer zusammen. Der Preis allein liest sich falsch: 60 statt 45 Minuten, Automatik, Abholung oder Vollkasko stecken oft genau in der Differenz. */ .preis { display: flex; align-items: baseline; gap: var(--s2); } .preis b { font-family: var(--mono); font-size: var(--t-h2); font-weight: var(--w-mid); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .preis .waehrung { font-size: var(--t-body-s); color: var(--ash-dim); } .preis .dauer { margin-left: auto; font-size: var(--t-body-s); color: var(--ash-dim); font-family: var(--mono); } .on-wissen .preis .waehrung, .on-wissen .preis .dauer, .on-paper .preis .waehrung, .on-paper .preis .dauer { color: var(--stone); } /* ------------------------------------------------------------ Augenbraue ---- Nummerierter Abschnittskopf, damit lange Seiten eine Ordnung haben. */ .kapitel { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); } .kapitel i { font-family: var(--mono); font-style: normal; font-size: var(--t-micro); width: var(--s6); height: var(--s6); border-radius: 50%; display: grid; place-items: center; /* opacity .55 auf Stein ergab #abaaac — 2,18:1 bei 11 px, gemessen am 21.09.2026 mit axe. Die Ziffer im Kreis ist Inhalt, keine Zierde: sie sagt, im wievielten Abschnitt man steht. Jetzt volle Steinfarbe (4,99:1); der Ring bleibt blass, weil die Durchsichtigkeit nur noch auf ihm liegt und eine Umrandung keine 4,5:1 braucht. */ border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 55%, transparent); } .kapitel span { font-size: var(--t-caption); letter-spacing: .14em; text-transform: uppercase; } @media (max-width: 720px) { .keil::before, .keil::after { display: none; } /* auf dem Telefon nur Unruhe */ .schnipsel { position: static; max-width: none; margin-top: var(--s3); box-shadow: none; } .dahinter::before { display: none; } } /* ========================================================================== Geisterknopf auf dunkler Karte -------------------------------------------------------------------------- Auf einer hellen Seite ist .btn-ghost dunkel — Text und Rand in Charcoal. Steht er dann in einer dunklen Karte (der Trichter-Kasten im Ratgeber ist Ink-Navy), ist er unsichtbar: dunkel auf dunkel. Die Karte sagt es dem Knopf jetzt selbst. ========================================================================== */ .card-ink .btn-ghost, .on-wissen .card-ink .btn-ghost, .on-paper .card-ink .btn-ghost { color: var(--white); border-color: color-mix(in srgb, var(--white) 55%, transparent); } .card-ink .btn-ghost:hover, .on-wissen .card-ink .btn-ghost:hover, .on-paper .card-ink .btn-ghost:hover { border-color: var(--white); background: color-mix(in srgb, var(--white) 12%, transparent); } /* ========================================================================== Fahrschulbild -------------------------------------------------------------------------- Die echten Bilder der Fahrschulen, wie sie auch auf der Livesite stehen — die Schule hat sie selbst hochgeladen, es ist ihr Auto, ihr Team, ihr Logo. Sie ersetzen den Initialenkreis, wo Platz ist. Regel dazu: das Bild macht keine Aussage ueber Qualitaet. Es ist gleich gross auf JEDER Karte, wird nie hervorgehoben und nie weggelassen, weil eine Schule "weniger wichtig" waere. Wer keins hat, bekommt den Initialenkreis — nicht ein leeres Loch und nicht ein Platzhalterbild, das nach Mangel aussieht. Siehe GRUNDSATZ-KEIN-RANKING.md. ========================================================================== */ .fs-bild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-data); display: block; background: color-mix(in srgb, var(--ivory) 8%, transparent); } .on-wissen .fs-bild, .on-paper .fs-bild { background: var(--paper-line); } /* Klein und rund, wo das Bild neben dem Namen steht statt darueber. */ .fs-bild-rund { width: var(--s12); height: var(--s12); flex: none; border-radius: 50%; object-fit: cover; background: color-mix(in srgb, var(--ivory) 8%, transparent); } /* height: auto ist noetig, nicht kosmetisch. Das HTML-Attribut height="868" ist ein Praesentationshinweis und setzt eine feste Hoehe; zusammen mit width:100% ist die Box damit bestimmt und aspect-ratio wird ignoriert — das Bild stand 362x868 statt 362x158. */ .fs-bild-quer { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--r-night); display: block; } /* Der Initialenkreis bleibt als Rueckfall — gleiche Groesse, gleiche Form. */ .fs-initialen { width: var(--s12); height: var(--s12); flex: none; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-body-s); font-weight: var(--w-mid); letter-spacing: .04em; background: color-mix(in srgb, var(--ivory) 10%, transparent); } .on-wissen .fs-initialen, .on-paper .fs-initialen { background: var(--lavender); color: var(--ink); } /* -------------------------------------------------------------------------- Abschlussband: Ueberschrift und Text stehen mittig, die Knoepfe standen links. Die Regel dafuer zielte auf .row, das Markup benutzt aber .knopfpaar — also griff sie nie. Hier zentral, statt in acht Seiten einzeln. -------------------------------------------------------------------------- */ .cta-band .knopfpaar, .cta-band .row, .cta-band .hero-actions { justify-content: center; } /* ========================================================================== Sprachumschaltung — DE/EN ========================================================================== Zehn Seiten trugen diese Umschaltung schon im Markup, aber ohne Regel an gemeinsamer Stelle und ohne Funktion. Hier steht sie einmal fuer alle; die zehn Seiten ueberschreiben sie weiterhin mit ihrer eigenen, weil das