/* ========================================================================== rechner.css — der Kostenrechner, /fuehrerschein-kosten-rechner/ DriveLab GmbH, 14.09.2026. Laedt NUR auf dieser einen Seite (functions.php). Alles Gemeinsame steht in identity.css, bausteine.css und raster.css und wird hier benutzt, nicht nachgebaut: Farben, Abstaende, Schrift, .pill, .btn, .card-data — und die Bewegungen .taucht-auf / .laeuft / .zeichnet / .staffel samt ihrer Ruecksicht auf prefers-reduced-motion. Die Seite ist eine WISSENSSEITE: Papier, nicht Nacht (body.on-wissen). ========================================================================== */ /* ---------- Kopf ---------------------------------------------------------- */ .rk-kopf { padding-block: var(--s10) var(--s8); } .rk-titel { max-width: 30ch; font-size: var(--t-display); line-height: 1.06; margin: 0; } .rk-lede { max-width: 64ch; margin: var(--s6) 0 0; font-size: var(--t-body-l); line-height: 1.6; color: var(--graphite); } /* Hervorhebung, nicht Verlinkung: --ink ist Marineblau und wurde am 14.09.2026 im Fliesstext fuer einen Link gehalten. Betonung traegt darum die Papier-Primaerfarbe. */ .rk-lede strong { color: var(--charcoal); font-weight: var(--w-mid); } /* ---------- Der Rechner --------------------------------------------------- */ .rk-box { border: 1px solid var(--paper-line); border-radius: var(--r-paper); background: var(--paper-1); padding: var(--s8); /* Die Karte steht auf der Seite, nicht in ihr: eine Haarlinie und ein Hauch Schatten, wie ueberall sonst auf Papier. */ box-shadow: 0 1px 2px rgba(12, 23, 84, .04); } .rk-box-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s6); } .rk-box-kopf h2 { margin: 0; font-size: var(--t-h3); } .rk-stand { font-size: var(--t-small); color: var(--stone); font-family: var(--mono); } .rk-feld { margin: 0 0 var(--s6); } .rk-feld:last-of-type { margin-bottom: 0; } .rk-marke { display: block; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); margin-bottom: var(--s3); } .rk-orte { display: flex; flex-wrap: wrap; gap: var(--s2); } /* Der Schieber. accent-color faerbt Bahn und Griff in einer Zeile — der nachgebaute Griff waere drei Herstellerpraefixe und derselbe Anblick. */ .rk-schieber { display: flex; align-items: center; gap: var(--s5); } .rk-schieber input[type="range"] { flex: 1 1 auto; min-width: 160px; height: 44px; accent-color: var(--cobalt); cursor: pointer; } .rk-lekt { font-family: var(--mono); font-size: var(--t-h2); letter-spacing: -.02em; color: var(--ink); min-width: 2.5ch; text-align: right; } .rk-hinweis { margin: var(--s2) 0 0; font-size: var(--t-small); color: var(--stone); } /* Die Autorenzeile steht ueber dem Methodentext und soll als Angabe lesbar sein, nicht als erster Satz des Absatzes. */ /* Das Inhaltsverzeichnis erbt .toc-title und .toc aus wp.css — dasselbe Bauteil wie in der Randspalte der Ratgeberseiten, das Dima ausgesucht hat, und seit dem 15.09.2026 auch an derselben Stelle: NEBEN dem Text, nicht darin ("no, on the side, not within the main part of the page"). Das Raster .art-grid und die klebende Spalte .art-aside stehen schon in wp.css; unter 900 Pixeln loesen sie sich dort selbst wieder in eine Spalte auf. Zwei Dinge fehlen dort und stehen darum hier: 1. min-width: 0 auf der Textspalte. Ohne das hat eine Rasterspalte als Mindestbreite die ihres breitesten Kindes — die Kurve ist 1120 Einheiten breit und wuerde die Spalte aufschieben, bis die Seite seitwaerts laeuft. 2. Die Verweise sind hier von Hand kobaltblau. Auf den Ratgeberseiten faerbt sie eine laute Regel fuer main.article_container ein; diese Seiten sind main.wrap und haetten graue Verweise — also nicht wie das Vorbild. */ /* DIE TEXTSPALTE AUF HAUSMASS — 17.09.2026, beim Lesen der Seite gegen DESIGN.md gemessen. main traegt hier max-width 1440 statt 1200, das Raster war darum 268 / 1028 statt 268 / 788 wie auf allen anderen Leseseiten. Die Absaetze hoeren aber bei 590 Pixeln auf (64 Zeichen, so soll es sein) — neben JEDEM Absatz standen also 438 Pixel Nichts, die ganze Seite hinunter. 788 ist das gemessene Hausmass der Kostenseite; der Rest bleibt als Rand rechts stehen, und der Kopf darueber laeuft weiter ueber die volle Breite. */ .rk-grid { margin-top: var(--s10); grid-template-columns: 268px minmax(0, 788px); } /* Der Schluss. Die dunkle Karte ist der Trichter selbst (.funnel aus wp.css) — hier nur sein Platz auf dieser Seite, damit er nicht ueber die Textbreite hinausschiesst. Keine eigenen Farben: die stehen in wp.css und sind fuer die dunkle Flaeche gemacht. */ .rk-abschnitt + .funnel, .art-grid + .funnel { margin: var(--s18) 0 0; max-width: 1152px; } .rk-weiterlesen { margin: var(--s18) 0 var(--s10); max-width: 1152px; } /* DIE UMBRUCHREGELN MUESSEN HIER STEHEN. Hier stand bis zum 17.09.2026 das Gegenteil: "keine eigene Umbruchregel noetig, wp.css schaltet .art-grid bei 1080 und 900 um". Das stimmt nicht. ".rk-grid" und ".art-grid" sind beide (0,1,0), und rechner.css laedt NACH wp.css — bei Gleichstand gewinnt die spaetere Datei. Die Bruchstellen in wp.css haben diese fuenf Seiten also nie erreicht. Was mitschrumpfte, war nur die Textspalte: minmax(0, 788px) ging brav auf 27 Pixel herunter, waehrend die 268 Pixel Schiene daneben stehen blieben. Auf dem Telefon las die Seite darum ein Wort pro Zeile, und das Dokument rollte waagrecht (589 statt 375). Gemessen am 17.09.2026 auf der Livesite, /fahrzeugausweis/ bei 375 Pixeln: grid-template-columns "268px 27px". Betroffen waren alle fuenf Seiten mit .rk-grid — fahrzeugausweis, auto-abmelden, fahrstunden, fuehrerausweis-verloren, kostenrechner. Dieselben zwei Bruchstellen wie in wp.css, damit beide Raster gleich brechen. */ @media (max-width: 1080px) { .rk-grid { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s12); } } @media (max-width: 900px) { .rk-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s8); } } .rk-spalte { min-width: 0; } .art-aside .toc a { color: var(--link-farbe, var(--cobalt)); } .art-aside .toc a:hover { color: var(--ink); } /* Etwas Luft ueber der angesprungenen Ueberschrift, sonst klebt sie am oberen Rand. Derselbe Wert wie bei .rubrik im Ratgeber. --s16 gibt es in identity.css NICHT; die Regel fiel damit stillschweigend weg. */ .rk-abschnitt h2[id], .rk-box h2[id] { scroll-margin-top: var(--s6); } .rk-autor { margin: 0 0 var(--s4); padding: 0 0 var(--s4); border-bottom: 1px solid var(--paper-line); font-size: var(--t-small); color: var(--stone); } .rk-autor strong { color: var(--ink); font-weight: 600; } .rk-haken { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); } .rk-haken label { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-size: var(--t-body-s); color: var(--graphite); cursor: pointer; } .rk-haken input { accent-color: var(--cobalt); width: 18px; height: 18px; } /* ---------- Die Summe ----------------------------------------------------- */ .rk-summe { margin: var(--s8) 0 var(--s6); padding-top: var(--s6); border-top: 1px solid var(--paper-line); } .rk-summe-zahl { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; } .rk-summe-zahl b { font-family: var(--mono); font-weight: var(--w-mid); font-size: var(--t-display); line-height: 1; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; } .rk-summe-zahl .cur { font-size: var(--t-body); color: var(--graphite); } .rk-satz { margin: var(--s4) 0 0; font-size: var(--t-body); line-height: 1.6; color: var(--graphite); max-width: 58ch; } .rk-satz b { color: var(--charcoal); font-weight: var(--w-mid); } /* ---------- Die Aufstellung ----------------------------------------------- */ .rk-liste { width: 100%; border-collapse: collapse; font-size: var(--t-body-s); } .rk-liste caption { text-align: left; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); padding-bottom: var(--s3); } .rk-liste th { text-align: left; font-weight: 400; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--stone); padding-bottom: var(--s2); } .rk-liste td { padding: var(--s3) 0; border-top: 1px solid var(--paper-line); vertical-align: baseline; } .rk-liste .betrag { text-align: right; font-family: var(--mono); white-space: nowrap; color: var(--charcoal); font-variant-numeric: tabular-nums; } .rk-liste .woher { color: var(--stone); font-size: var(--t-small); } .rk-liste tr.rk-aus td:not(.woher) { color: var(--stone); text-decoration: line-through; } .rk-liste tr.rk-fahrstunden td { background: var(--lavender); } .rk-liste tr.rk-fahrstunden td:first-child { border-radius: var(--r-field) 0 0 var(--r-field); } .rk-liste tr.rk-fahrstunden td:last-child { border-radius: 0 var(--r-field) var(--r-field) 0; } .rk-fuss { margin: var(--s6) 0 0; font-size: var(--t-small); line-height: 1.6; color: var(--graphite); } /* ---------- Die Kurve: Gesamtkosten nach Fahrstunden ---------------------- */ /* Der Verlauf steht in einer eigenen, ruhigen Flaeche — sonst schwebt er zwischen zwei Absaetzen und die Achse haengt am Fliesstext. */ /* display MUSS hier stehen. Das alte Theme hat eine nackte Regel "figure { display: flex }" in style.css; ohne Gegenwehr legt sie Bild, Ableseeile und Fussnote NEBENEINANDER statt untereinander — die Schrift wurde auf 80 Pixel gequetscht, lief rechts aus dem Bild und die ganze Seite liess sich seitwaerts schieben. Die Regel traegt !important, also muss die Gegenwehr es auch tragen — sie bleibt aber auf unsere eigenen Bildtafeln begrenzt, denn im WordPress-Inhalt zentriert dieselbe Regel Bilder und soll das weiter tun. Am 15.09.2026 von der einen Klasse auf alle erweitert: die Paketbalken der Fahrstunden-Seite sind in dieselbe Falle gelaufen. Einmal hier, statt bei jeder neuen Tafel wieder. */ .rk-abschnitt figure, .fs-feld { display: block !important; } .rk-kurve-feld { display: block !important; position: relative; margin: var(--s8) 0 0; padding: var(--s6) var(--s6) var(--s5); background: var(--paper-1); border: 1px solid var(--paper-line); border-radius: var(--r-paper); } .rk-kurve { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; /* Ohne das faerbt jeder Zug ueber das Bild die Beschriftungen blau ein — der Browser haelt es fuer Text, den man markieren will. */ -webkit-user-select: none; user-select: none; cursor: crosshair; } /* Anklicken setzt den Fokus, loest aber KEIN :focus-visible aus — dann zeichnet der Browser seinen eigenen Ring, und der folgt auf macOS der Systemfarbe. Bei Dima war das Orange quer durch die Grafik. Also: beim Klick kein Ring, bei Tastaturbedienung der eigene. Weglassen waere keine Loesung, die Kurve ist mit den Pfeiltasten bedienbar. */ .rk-kurve:focus { outline: none; } .rk-kurve:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: var(--r-field); } .rk-kurve .bahn { fill: none; stroke: var(--paper-line-2); stroke-width: 1; } .rk-kurve .linie { fill: none; stroke: var(--cobalt); stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; } .rk-kurve .flaeche { fill: url(#rkVerlauf); } /* 8px in Bildkoordinaten: das SVG wird auf rund die doppelte Breite gezogen, also steht die Beschriftung am Ende bei etwa 14px. */ .rk-kurve .achse-text, .rk-kurve .band-text, .rk-kurve .x-text, .rk-kurve .grenz-text { font-family: var(--mono); font-size: 8px; letter-spacing: .06em; fill: var(--stone); } .rk-kurve .fest-band { fill: var(--paper-line); opacity: .55; } .rk-kurve .band-kante { stroke: var(--paper-line-2); stroke-width: 1; } /* Etwas deutlicher, seit die Punkte weg sind: die Senkrechte allein muss die Paketgrenze tragen. */ .rk-kurve .grenz-linie { stroke: var(--paper-line-2); stroke-width: 1; stroke-dasharray: 2 4; } .rk-kurve .grenz-text { fill: var(--graphite); } /* Die Beschriftungen sollen sich nicht wie Fliesstext anfuehlen. */ .rk-kurve .x-text { fill: var(--graphite); } .rk-kurve .band-text { fill: var(--stone); letter-spacing: .1em; text-transform: uppercase; } /* Der Hinweis steht nicht mehr IM Bild, sondern unter der Ableseeile. */ .rk-kurve-fuss { margin: var(--s2) 0 0; font-size: var(--t-small); color: var(--stone); line-height: 1.5; } /* Auf dem Telefon ist das Bild ein Drittel so breit; die Beschriftungen stehen in Bildkoordinaten und schrumpfen mit. Darum dort groesser. */ .rk-kurve.ist-schmal .x-text { font-size: 17px; } .rk-kurve.ist-schmal .band-text { font-size: 15px; } .rk-kurve .marke { stroke: var(--cobalt); stroke-width: 1; stroke-dasharray: 3 4; opacity: .38; } .rk-kurve .punkt { fill: var(--cobalt); } .rk-kurve .punkt-ring { fill: var(--paper-1); } .rk-kurve-lese { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--paper-line); font-size: var(--t-body-s); color: var(--graphite); } .rk-kurve-lese b { font-family: var(--mono); font-size: var(--t-h3); color: var(--ink); font-variant-numeric: tabular-nums; } .rk-kurve-lese b.gespart { font-size: var(--t-body-s); color: var(--cobalt); } /* ---------- Die Ortsbalken: wo eine Fahrstunde am guenstigsten ist -------- */ /* Eine Kopfzeile ueber den Balken, im selben Raster. Ohne sie stand in jeder Zeile nur "51 Min. · 34 %", und Dima fragte am 14.09.2026 zu Recht, was das heissen soll. Eine Beschriftung UNTER der Liste kommt zu spaet: gelesen wird von oben nach unten. */ .rk-spalten { display: grid; grid-template-columns: 20ch 1fr auto; gap: var(--s4); margin: var(--s8) 0 var(--s3); max-width: none; padding-bottom: var(--s3); border-bottom: 1px solid var(--paper-line-2); font-family: var(--mono); font-size: var(--t-body-s); letter-spacing: .08em; text-transform: uppercase; color: var(--charcoal); } .rk-spalten span:last-child { text-align: right; } .rk-spalten + .rk-balken { margin-top: 0; } .rk-balken { list-style: none; margin: var(--s8) 0 var(--s4); padding: 0; display: grid; gap: var(--s3); } /* Der Balken zeigt den AUFSCHLAG gegenueber dem guenstigsten Ort, nicht den Preis. Bei 85 bis 101 Franken sind Balken ab Null fast gleich lang: die Grafik behauptet dann "kein Unterschied", obwohl es bei 30 Fahrstunden um mehrere hundert Franken geht. Eine abgeschnittene Achse waere die andere, unehrliche Loesung — hier ist die Null echt und heisst "guenstigster Ort". */ .rk-balken li { display: grid; grid-template-columns: 20ch 1fr auto; align-items: center; gap: var(--s4); font-size: var(--t-body-s); } .rk-balken .ort { color: var(--ink); } .rk-balken .spur { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--paper-line); overflow: hidden; } .rk-balken .fuell { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pill); background: var(--cobalt); } .rk-balken li.ist-guenstigst .fuell { background: var(--ink); } .rk-balken .wert { font-family: var(--mono); color: var(--charcoal); white-space: nowrap; font-variant-numeric: tabular-nums; } .rk-balken .wert small { color: var(--stone); } .rk-balken .mehr { font-family: var(--mono); color: var(--stone); white-space: nowrap; } .rk-balken li.ist-guenstigst .mehr { color: var(--ink); } /* Der guenstigste Ort hat per Definition keinen Aufschlag. Ohne Markierung sieht seine leere Spur nach einem Fehler aus — der Strich sagt: hier ist die Null, und sie ist echt. */ .rk-balken li.ist-guenstigst .spur::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: var(--r-pill); background: var(--ink); } /* Zwei Befunde nebeneinander: die Zahl gross, der Satz daneben. Kein Kasten, keine Linie — die Zahl traegt den Block. */ .rk-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8) var(--s10); margin: var(--s8) 0; } .rk-zwei > div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: var(--s5); } .rk-zwei b { font-family: var(--mono); font-weight: var(--w-mid); font-size: var(--t-display); line-height: 1; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; } .rk-zwei span { font-size: var(--t-body-s); line-height: 1.6; color: var(--graphite); } .rk-zwei strong { color: var(--charcoal); font-weight: var(--w-mid); } /* Die Einheit haengt an der Zahl, traegt sie aber nicht: in 60px wird aus einem Prozentzeichen sonst ein zweites Zahlzeichen. */ .rk-zwei .einheit-zahl { font-style: normal; font-size: var(--t-sub); letter-spacing: 0; margin-left: .1em; color: var(--stone); } @media (max-width: 860px) { .rk-zwei { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } } /* max-width: none, sonst deckelt .rk-abschnitt > p die Beschriftung auf 64ch und die rechte Haelfte steht mitten im Bild statt unter den Werten. */ .rk-skala { max-width: none; display: flex; justify-content: space-between; margin: var(--s5) 0 0; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--stone); } /* ---------- Fest gegen beweglich ------------------------------------------ */ .rk-anteil { display: flex; height: 18px; border-radius: var(--r-pill); overflow: hidden; margin: var(--s6) 0 var(--s4); background: var(--paper-line); } .rk-anteil span { display: block; height: 100%; } .rk-anteil .fest { background: var(--stone); } .rk-anteil .beweglich { background: var(--cobalt); } .rk-legende { display: flex; flex-wrap: wrap; gap: var(--s5); font-size: var(--t-body-s); color: var(--graphite); margin: 0; /* .rk-abschnitt > p deckelt auf 64ch — die Legende ist kein Fliesstext und brach dadurch auf zwei Zeilen um. */ max-width: none; } .rk-legende span { display: inline-flex; align-items: center; gap: var(--s2); } .rk-legende i { width: 10px; height: 10px; border-radius: 3px; flex: none; } /* ---------- Abschnitte und Fragen ----------------------------------------- */ .rk-abschnitt { padding-block: var(--s12); border-top: 1px solid var(--paper-line); } .rk-abschnitt > h2 { margin: 0 0 var(--s4); font-size: var(--t-h2); line-height: 1.15; } .rk-abschnitt > p { margin: 0 0 var(--s4); max-width: 64ch; line-height: 1.65; color: var(--graphite); } .rk-abschnitt > p:last-child { margin-bottom: 0; } .rk-fragen { display: grid; gap: var(--s6); margin-top: var(--s6); } .rk-fragen h3 { margin: 0 0 var(--s2); font-size: var(--t-body-l); font-weight: var(--w-mid); line-height: 1.35; } .rk-fragen p { margin: 0; max-width: 64ch; line-height: 1.65; color: var(--graphite); } /* Beschriftungen sind kein Fliesstext. ".rk-abschnitt > p" ist spezifischer als eine blosse Klasse und deckelte sie darum weiter auf 64ch — die rechte Haelfte der Skala stand mitten im Bild statt unter den Werten. Mit dem Element davor gewinnt die Ausnahme. */ .rk-abschnitt > p.rk-skala, .rk-abschnitt > p.rk-spalten, .rk-abschnitt > p.rk-legende, /* Ebenso die Autorenzeile: ihre Linie soll so weit laufen wie die Trennlinien der Abschnitte. Auf 64ch bei kleiner Schrift endete sie mitten im Satz darunter und sah nach Versehen aus. */ .rk-abschnitt > p.rk-autor { max-width: none; } .rk-weiter { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); } /* Der Zitierblock. Absichtlich auffaellig genug, dass eine Redaktorin ihn findet, und ruhig genug, dass er niemanden stoert. */ .rk-zitat-titel { margin: var(--s10) 0 var(--s3); font-size: var(--t-body-l); font-weight: var(--w-mid); } .rk-zitat { margin: var(--s4) 0 var(--s3); padding: var(--s5) var(--s6); border-left: 2px solid var(--cobalt); background: var(--paper-1); border-radius: 0 var(--r-field) var(--r-field) 0; font-size: var(--t-body-s); line-height: 1.7; color: var(--charcoal); } /* Die Methode als Liste, nicht als Absatz: sie wird nachgeschlagen, nicht gelesen. */ .rk-methode { display: grid; grid-template-columns: 14ch 1fr; gap: var(--s3) var(--s6); margin: var(--s6) 0 0; font-size: var(--t-body-s); line-height: 1.6; } .rk-methode dt { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--stone); padding-top: 3px; } .rk-methode dd { margin: 0; color: var(--graphite); } @media (max-width: 640px) { .rk-methode { grid-template-columns: minmax(0, 1fr); gap: var(--s1) 0; } .rk-methode dd { margin-bottom: var(--s4); } } /* Die sieben Posten als Verweis, nicht als Text: jeder hat seine eigene Seite. */ .rk-posten { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s10); } .rk-posten li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; font-size: var(--t-body); border-bottom: 1px solid var(--paper-line); } .rk-posten .betrag { font-family: var(--mono); font-size: var(--t-body-s); color: var(--charcoal); white-space: nowrap; font-variant-numeric: tabular-nums; } @media (max-width: 860px) { .rk-spalten { grid-template-columns: 12ch 1fr auto; } .rk-posten { grid-template-columns: minmax(0, 1fr); gap: 0; } .rk-box { padding: var(--s6); } .rk-liste .woher { display: none; } .rk-balken li { grid-template-columns: 8ch 1fr auto; gap: var(--s3); } } /* Auf breiten Bildschirmen sagt die Kopfzeile, was die Zahl bedeutet; in der Zeile waere die Einheit dann fuenfmal dasselbe Wort. */ .rk-balken .wert .einheit { display: none; } @media (max-width: 520px) { /* Auf dem Telefon faellt die Kopfzeile weg — dann muss jede Zeile allein sprechen, also traegt sie ihre Einheit selbst. Diese Regel MUSS nach der Ausblendung stehen, sonst gewinnt die spaetere und sie bleibt unsichtbar. */ .rk-spalten { display: none; } .rk-balken li { grid-template-columns: 1fr auto; } .rk-balken .spur { grid-column: 1 / -1; } .rk-balken .wert .einheit { display: inline; } } /* ---------- Nur auf /wie-viele-fahrstunden-brauche-ich/ ----------------- */ /* Die drei gesetzlichen Zahlen. Gross und einfarbig, damit sie als Zahlen gelesen werden und nicht als Aufzaehlungspunkte. */ .fs-liste { list-style: none; margin: var(--s6) 0; padding: 0; display: grid; gap: var(--s4); max-width: 64ch; } /* Die Zahlenspalte waechst mit: "3'000" ist fuenf Zeichen breit und lief bei festen 4ch in den Text hinein. minmax haelt die einstelligen trotzdem in einer Flucht. */ .fs-liste li { display: grid; grid-template-columns: minmax(4ch, max-content) 1fr; gap: var(--s4); align-items: baseline; padding-bottom: var(--s4); border-bottom: 1px solid var(--paper-line); } .fs-liste li:last-child { border-bottom: 0; padding-bottom: 0; } .fs-zahl { font-family: var(--mono); font-size: var(--t-h3); color: var(--cobalt); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } /* Eine einzelne Zahl, die die Seite traegt. Kein Kasten wie die Messtafeln: eine senkrechte Linie links, die Zahl gross daneben — so liest es sich als Aussage und nicht als weitere Kachel. */ /* display MIT !important, und diesmal gegen die eigene Regel weiter oben: ".rk-abschnitt figure { display: block !important }" haelt die Bildtafeln gegen das alte Theme — und trifft diese Tafel gleich mit. Der Waehler muss darum genauer sein als jener: ".rk-abschnitt figure" ist (0,1,1), ein blosses ".fs-kennzahl" nur (0,1,0) und verliert auch mit !important. Ohne das stand die Zahl ueber dem Text statt daneben. */ .rk-abschnitt figure.fs-kennzahl, .fs-kennzahl { display: grid !important; grid-template-columns: minmax(0, max-content) 1fr; gap: var(--s6); align-items: center; margin: var(--s8) 0; padding: var(--s2) 0 var(--s2) var(--s8); border-left: 2px solid var(--cobalt); } .fs-kennzahl-zahl { margin: 0; font-family: var(--mono); font-size: var(--t-display); line-height: 1; color: var(--cobalt); font-variant-numeric: tabular-nums; white-space: nowrap; } .fs-kennzahl-zahl small { font-size: var(--t-body-l); color: var(--stone); } .fs-kennzahl figcaption p { margin: 0; } @media (max-width: 640px) { .rk-abschnitt figure.fs-kennzahl, .fs-kennzahl { grid-template-columns: 1fr; gap: var(--s3); padding-left: var(--s5); } .fs-kennzahl-zahl { font-size: var(--t-h2-display); } } /* Dieselbe Tafel wie beim Kurvenbild, damit die Messung auf beiden Seiten gleich aussieht. */ .fs-feld { margin: var(--s8) 0 var(--s6); padding: var(--s6); background: var(--paper-1); border: 1px solid var(--paper-line); border-radius: var(--r-paper); } .fs-feld .rk-balken { margin-top: 0; } .fs-feld .rk-kurve-fuss { margin-top: var(--s4); } /* Der Abschnitt "Was die Zahl bei dir verschiebt" hat vier Unterpunkte — bisher gab es auf diesen Seiten kein h3. */ .rk-abschnitt h3 { margin: var(--s6) 0 var(--s2); font-size: var(--t-body-l); font-weight: var(--w-mid); color: var(--ink); } .rk-abschnitt h3.rk-zitat-titel { margin-top: var(--s10); } /* ---------- Bild im Seitenkopf ------------------------------------------ */ /* DER KOPF: links Marke, Ueberschrift und Vorspann, rechts das Foto. 16.09.2026, dritte und letzte Fassung. Die beiden davor scheiterten am selben Rechenfehler, nur andersherum: (1) Textspalte 64 Zeichen, Bild nimmt den Rest (762 Pixel). Die Zeile war buendig, aber das Foto 337 Pixel hoch neben 202 Pixeln Vorspann — unter dem Text ein Loch von 135 Pixeln. (2) Also das Foto flacher geschnitten, 3.4:1, damit es genau 202 hoch wird. Die Hoehen stimmten, vom Auto blieb ein Streifen. Dima: "the picture is too cropped you dont see anything". Der Fehler war beide Male, die Hoehe ueber das BILD regeln zu wollen. Der Vorspann ist kurz, ein lesbares Foto ist hoch — das geht nicht auf. Jetzt traegt die linke Spalte mehr Text: Marke und Ueberschrift stehen nicht mehr ueber der ganzen Breite, sondern mit im Kasten. Gemessen bei 1440 Pixeln: links 590 breit und 401 hoch, rechts 762 breit und 369 hoch — 31 Pixel Unterschied auf 400. Beide Spalten beginnen oben, keine wird gestreckt, keine gestaucht — und das Foto behaelt seinen Ausschnitt. */ /* DIE SPALTEN HERUM, 16.09.2026. Vorher stand der Text in einer festen Spalte von 64 Zeichen und das Bild bekam den Rest — jeder Pixel Bildschirm mehr ging also ans Foto. Gemessen bei 1920 Pixeln: Foto 1242 breit und 828 hoch neben 590 Pixeln Text, mehr als doppelt so breit und 378 Pixel hoeher. Die Ueberschrift, die Antwort der Seite, sass derweil dreizeilig im schmalen Drittel. Dima: "spot the problem". Jetzt umgekehrt: der Text nimmt den Rest, das Bild ist bei 620 Pixeln gedeckelt. Der Vorspann bleibt lesbar, weil .rk-lede seine eigenen 64 Zeichen behaelt; die Ueberschrift darf wieder ueber zwei Zeilen laufen. Ab 1200 Pixeln aufwaerts aendert sich damit nichts mehr am Foto — die Zeile bleibt auf jedem Bildschirm gleich. */ .rk-kopf-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: var(--s10); align-items: start; } .rk-kopf-zwei > div { min-width: 0; } /* figure traegt display:flex !important aus dem alten Theme — und unsere eigene Gegenwehr ".rk-abschnitt figure" greift hier nicht, der Kopf ist kein Abschnitt. Darum an dieser Stelle noch einmal. grid-template-columns gehoert dazu, und zwar aus einem Grund, der eine Stunde gekostet hat: ein Bild mit srcset und sizes hat als "natuerliche" Breite NICHT die der Datei, sondern die aus sizes gerechnete. Eine automatische Rasterspalte richtet sich danach — sizes="690px" hat dem Foto also seine Layoutbreite gesetzt, mitten in einer 762 Pixel breiten Spalte, und rechts wie links blieben 36 Pixel weiss. minmax(0, 1fr) beendet das: die Spalte ist so breit wie der Kasten, egal was in sizes steht. */ .rk-kopf figure.rk-kopf-bild, .rk-kopf-bild { display: grid !important; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; margin: 0; } /* Keine Streckung mehr, und bewusst KEIN festes aspect-ratio hier: die Hoehe kommt aus width und height am Bild selbst. Zwei Seiten benutzen den Kopf inzwischen mit verschiedenen Ausschnitten — /fuehrerschein-umschreiben-schweiz/ mit 1056:468, der Kostenrechner mit 3:2. Ein fester Wert an dieser Stelle wuerde dem zweiten seinen Ausschnitt nehmen. */ .rk-kopf-bild img { display: block; width: 100%; height: auto; object-fit: cover; object-position: 50% 45%; border-radius: var(--r-paper); background: var(--paper-1); } .rk-kopf-bild figcaption { margin: var(--s3) 0 0; font-size: var(--t-small); color: var(--stone); line-height: 1.5; } /* NEBENEINANDER ERST AB 1200 PIXELN. Der Text behaelt seine 64 Zeichen, das Foto bekommt den Rest — bei 1024 waeren das noch 346 Pixel, ein Briefmarken- bild neben 400 Pixeln Text. Darunter also untereinander: erst die Antwort, dann das Foto ueber die volle Breite. */ @media (max-width: 1200px) { .rk-kopf-zwei { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } /* Auf dem Telefon zuerst der Text, dann das Bild: die Antwort zuerst. */ /* Untereinander braucht es den Abstand nicht doppelt. */ /* Untereinander gibt es nichts anzugleichen: das Bild bekommt seine natuerliche Hoehe zurueck. */ .rk-kopf-bild { order: 2; margin-top: var(--s4); } } /* --- Bildtafeln im Fliesstext ------------------------------------------ Ein Foto direkt unter der Ueberschrift, ueber die volle Textspalte. SEO.md fuehrt "Image Quality" mit +1.02 und Stock-Bilder mit MINUS 0.66 — beide Aufnahmen sind eigene, keine gekauften. aspect-ratio statt der natuerlichen Hoehe: die Dateien sind 16:9, in der rund 800 Pixel breiten Spalte waeren das ueber 450 Pixel Hoehe und der Text der Ueberschrift rutschte unter die Bildschirmkante. 2:1 nimmt oben und unten je sechs Prozent weg; das Motiv sitzt in beiden Bildern mittig. Auf dem Telefon ist die Spalte schmal genug fuer das ganze Bild. height: auto MUSS dabei stehen. Die Attribute width/height im HTML sind dem Browser eine Stilangabe mit niedrigstem Rang — aber eine Angabe. Ohne eigenes height bleibt die Hoehe bei 900 Pixeln stehen und aspect-ratio greift nie, weil es nur die freie Seite berechnet. display braucht es hier NICHT: ".rk-abschnitt figure" weiter oben faengt das "figure { display: flex !important }" des alten Themes schon ab, und beide Tafeln stehen in einem Abschnitt. */ .rk-bild { margin: var(--s2) 0 var(--s6); } .rk-bild img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 50%; border-radius: var(--r-paper); background: var(--paper-1); } .rk-bild figcaption { margin: var(--s3) 0 0; font-size: var(--t-small); color: var(--stone); line-height: 1.5; max-width: 64ch; } @media (max-width: 640px) { .rk-bild img { aspect-ratio: 16 / 9; } } /* ========================================================================== /fahrzeugausweis/ — die Kantonstabelle Vier Regeln, kein neues Vokabular: die Tabelle IST .rk-liste, die Zahlen sind .betrag, die Amtsspalte ist .woher — alles schon da. Was hier dazukommt, ist nur das, was der Rechner nicht braucht: 26 Zeilen, die auf ein Telefon muessen, eine Auswahl darueber und eine ruhige Schreibweise fuer "wir wissen es nicht". ToDrive, 16.09.2026. ========================================================================== */ /* Der Kanton steht als Zeilenkopf (th scope=row) — das ist die richtige Auszeichnung fuer einen Screenreader. Ohne diese Regel erbt er aber die Spaltenkopf-Schrift von .rk-liste th: Mono, Versalien, gesperrt. 26 Namen in Versalien sind unlesbar. */ .fz-tabelle th[scope="row"] { font-family: inherit; font-size: var(--t-body-s); text-transform: none; letter-spacing: 0; color: var(--charcoal); font-weight: var(--w-mid); padding: var(--s3) var(--s4) var(--s3) 0; border-top: 1px solid var(--paper-line); white-space: nowrap; vertical-align: baseline; } .fz-tabelle td { padding-right: var(--s4); } /* .rk-liste .betrag steht beim Rechner rechtsbuendig und auf einer Zeile — dort sind es reine Betraege. Hier stehen in derselben Spalte auch Saetze ("CHF 25 online, CHF 35 am Schalter"), und nowrap machte die zwei Geldspalten je 294 Pixel breit: die Tabelle wurde 1042 statt 868 breit und rollte am Schreibtisch, wo sie eigentlich hinpasst. Am 16.09.2026 nachgemessen, nicht geschaetzt. */ .fz-tabelle .betrag { text-align: left; white-space: normal; } .fz-tabelle th:nth-child(2), .fz-tabelle th:nth-child(3) { width: 20%; } /* Rechtsbuendig NUR in der Kantonstabelle: dort stehen zwei reine Geldspalten, und der Kopf stand links ueber rechtsbuendigen Zahlen. Die Preistabelle daneben hat fuenf Spalten mit anderer Aufteilung. 20 % lassen dem Kantonsnamen samt Nebenzeile (Amt, Onlineschalter, Dauer) die uebrigen 60 %; darunter bricht die Nebenzeile um. */ .fz-kantone thead th:nth-child(2), .fz-kantone thead th:nth-child(3) { text-align: right; } /* 26 Zeilen mal fuenf Spalten passen auf 375 Pixel nicht. Sie duerfen aber auch nicht die SEITE breit machen — darum rollt der Kasten, nicht das Dokument. min-width haelt die Tabelle beim Rollen lesbar, statt sie in fuenf Spalten a 60 Pixel zu quetschen. */ .fz-rollt { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 var(--s5); } .fz-rollt .fz-tabelle { min-width: 46rem; margin-bottom: 0; } /* Die Auswahl darueber. Ohne JavaScript steht sie da und tut nichts — das ist verkraftbar; die Tabelle ist dann vollstaendig sichtbar. */ .fz-filter { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin: 0 0 var(--s4); } .fz-filter label { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--stone); } .fz-filter select { font: inherit; font-size: var(--t-body-s); padding: var(--s2) var(--s3); border-radius: var(--r-field); border: 1px solid var(--paper-line); background: var(--paper-1); color: var(--charcoal); } /* "nicht veroeffentlicht" ist eine Aussage, kein Fehler — sie steht ruhig da, nicht rot und nicht durchgestrichen. */ .fz-offen { color: var(--stone); font-style: normal; } /* ========================================================================== /fuehrerausweis-verloren/ — der Papier-Waehler ========================================================================== .pill ist im Entwurf fuer DUNKLE Flaechen gebaut. Auf hellem Papier fehlt ihr die gewaehlte Fassung: ruhend und gewaehlt saehen gleich aus, und der Waehler haette keinen sichtbaren Zustand. NUR Kante und Flaeche, KEINE Schriftfarbe: die Pillen sind , und wp.css faerbt jeden Verweis in main auf hellem Grund mit #3a49c4. Diese Regel ist spezifischer als alles, was hier stuende — eine color-Zeile waere tote Anweisung. Sie ist auch nicht noetig: am 16.09.2026 nachgerechnet ergibt #3a49c4 6.04:1 auf Lavendel und 6.75:1 auf Papier, die Kobaltkante 3.97:1. Beides ueber der Grenze. WARUM .is-on UND NICHT [aria-current]: eine Klasse hat hier dieselbe Wirkung und ist die, fuer die identity.css schon eine Regel kennt. Das Skript setzt beides — die Klasse faerbt, das Attribut sagt es dem Vorleser. AUF .fz-filter a.pill BESCHRAENKT, nicht auf .on-wissen .pill: rechner.css laedt auch /fuehrerschein-kosten-rechner/, und jene Seite traegt ebenfalls .on-wissen und vierzehn .pill-Elemente (am 16.09.2026 auf der Livesite nachgezaehlt). Eine Regel auf .on-wissen .pill haette also das Aussehen einer fremden, funktionierenden Seite mitgeaendert. a.pill in .fz-filter gibt es nur im Papier-Waehler dieser Seite. */ .fz-filter a.pill { border-color: var(--paper-line-2); } .fz-filter a.pill.is-on { border-color: var(--cobalt); background: var(--lavender); } /* Der Ergebnissatz des Waehlers. Er steht in einer Karte, damit er sich vom Fliesstext abhebt, und hat sonst keine eigene Gestalt — .card-paper macht die Flaeche, hier kommt nur der Abstand dazu. */ .fa-ergebnis { padding: var(--s4) var(--s5); margin: 0 0 var(--s4); } /* Die zwei Sortierknoepfe neben der Kantonsauswahl. Sie stehen im HTML hidden und werden erst vom Skript sichtbar gemacht — ohne JavaScript koennten sie nichts, und ein Knopf, der nichts tut, ist schlimmer als keiner. ToDrive, 17.09.2026. */ .fz-sort { display: inline-flex; gap: var(--s2); margin-left: auto; } .fz-sort button { font: inherit; font-size: var(--t-body-s); padding: var(--s2) var(--s3); border-radius: var(--r-field); border: 1px solid var(--paper-line); background: var(--paper-1); color: var(--graphite); cursor: pointer; } .fz-sort button[aria-pressed="true"] { background: var(--lavender); color: var(--ink); border-color: transparent; } .fz-sort button:hover { color: var(--ink); } /* Der Abbinder auf den Seiten, die main.wrap sind (nicht main.article_container). DIESELBE FALLE wie bei den Verweisen im Inhaltsverzeichnis weiter oben: auf den Ratgeberseiten faerbt eine laute Regel fuer main.article_container den .btn-ghost dunkel; hier greift sie nicht, und der Knopf faellt auf das Nacht-Elfenbein zurueck — #ededf3 auf warmem Papier. Am 17.09.2026 gemessen: Kontrast 1.10. DESIGN.md Abschnitt 12 nennt genau diesen Wert als Beispiel fuer "immer das Token, nie den Hexwert". NUR im .more-Block: der .btn-ghost in der dunklen Schlusskarte ist weiss auf Marineblau (16.58) und muss weiss bleiben. ToDrive, 17.09.2026. */ .more .btn-ghost { color: var(--charcoal); border-color: var(--paper-line); } .more .btn-ghost:hover { color: var(--ink); border-color: var(--charcoal); } /* ========================================================================== DER LAENDER-PRUEFER — 17.09.2026, /fuehrerschein-umschreiben-schweiz/. Nichts Neues erfunden: Karte wie .card-paper (Papierflaeche, Creme-Kante, 16 Radius), Feld wie jedes andere .field, die Antwort als eingerueckter Kasten mit einer kobaltblauen Kante — dieselbe Geste, die .hinweis auf den Ratgeberseiten benutzt. Die Antwort ist das einzige Kobalt hier. ========================================================================== */ .lp { margin: var(--s8) 0 0; padding: var(--s8); background: var(--paper-1); border: 1px solid var(--paper-line); border-radius: var(--r-paper); } .lp-label { display: block; margin: 0 0 var(--s2); font-size: var(--t-body-s); color: var(--stone); } .lp-select { width: 100%; max-width: 38ch; font-size: var(--t-body-l); padding: 14px 16px; } .lp-antwort { margin: var(--s6) 0 0; padding: var(--s6); background: var(--paper-0); border-radius: var(--r-field); border-left: 3px solid var(--cobalt); } .lp-antwort .eyebrow { margin: 0 0 var(--s2); } .lp-satz { margin: 0; font-size: var(--t-sub); line-height: 1.35; font-weight: var(--w-mid); color: var(--charcoal); } .lp-punkte { margin: var(--s4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s2); } .lp-punkte li { display: grid; grid-template-columns: 16ch minmax(0, 1fr); gap: var(--s3); font-size: var(--t-body); line-height: 1.5; color: var(--ash-dim); } .lp-punkte b { font-weight: var(--w-mid); color: var(--charcoal); } .lp-fuss { margin: var(--s4) 0 0; font-size: var(--t-caption); color: var(--stone); } /* Eine kurze Einblendung, dieselbe Kurve wie .taucht-auf. Wer Bewegung reduziert hat, bekommt sie nicht. */ @keyframes lp-auf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .lp-frisch { animation: lp-auf .28s cubic-bezier(.2, .7, .3, 1) both; } @media (prefers-reduced-motion: reduce) { .lp-frisch { animation: none; } } @media (max-width: 640px) { .lp { padding: var(--s6); } .lp-punkte li { grid-template-columns: minmax(0, 1fr); gap: 0; } } /* NACHGEZOGEN BEIM ZUSAMMENFUEHREN, 17.09.2026. Die Regel darueber (".more .btn-ghost") kam aus der Lane fuer den Fahrzeugausweis und behebt genau die Falle, in die mein neuer Abbinder auf /fuehrerschein-umschreiben-schweiz/ sonst getappt waere: dort steht ein .btn-ghost in einem .more-head, das NICHT in einem .more liegt — die fremde Regel haette ihn nicht erwischt, und er stuende in Nacht-Elfenbein auf warmem Papier, Kontrast 1.10. Zwei fuer sich richtige Aenderungen, die zusammen einen unsichtbaren Knopf ergeben haetten. Darum hier dieselbe Korrektur fuer denselben Fall. */ .rk-weiterlesen .btn-ghost { color: var(--charcoal); border-color: var(--paper-line); } .rk-weiterlesen .btn-ghost:hover { color: var(--ink); border-color: var(--charcoal); } /* ========================================================================== /bussenrechner/ — der Bruder des Kostenrechners ToDrive, 17.09.2026. Dieselben Bausteine (rk-box, rk-feld, pill, rk-schieber, rk-haken, rk-summe, rk-balken, rk-liste, rk-fragen, rk-methode). Neu ist nur, was der Kostenrechner nicht hat: unter der Zahl zwei Zustandszeilen — die Massnahme gegen den Ausweis und die Folge in der Probezeit. Sie tragen ihr Signal als Kante links (--warn, --neg), NICHT als Schriftfarbe: auf Papier misst --warn 2.6:1 und --neg 3.6:1, beides unter den 4.5, die Fliesstext braucht. Die Schrift bleibt Kohle; die Kante sagt den Zustand. Kein Rot und kein Gruen als Urteil ueber Menschen — ein Entzug ist ein Zustand, kein Ranking. ========================================================================== */ /* Die lange Ueberschrift: 106 Zeichen bei 60 Pixeln waeren fuenf Zeilen. Eine Stufe kleiner, und sie darf ueber die volle Spalte laufen. */ .bu-titel { font-size: var(--t-h1); max-width: 34ch; line-height: 1.12; } .bu-kopf .rk-lede { margin-top: var(--s5); } /* ZWEI SPALTEN AB 1100 PIXELN: Eingaben links, Ergebnis rechts — damit die Zahl ueber der Falz steht (gemessen 17.09.2026: untereinander lag sie bei 1186 Pixeln, bei 900 Pixeln Bildhoehe also unsichtbar). Darunter stapelt sich der Kasten wie der Kostenrechner. Die Trennlinie ueber der Summe gehoert zum Stapel; nebeneinander traegt die Spalte stattdessen eine Haarlinie links. ZWEI PAARE, UND DAS MIT ABSICHT (zusammengefuehrt 18.09.2026). Am 17.09.2026 bekamen die drei Klassen den neutralen Namen, weil der Vignettenrechner dieselbe Anordnung brauchte. Am selben Tag hat der Bussenrechner auf main seine Ergebnisspalte zur dunklen Karte gemacht (.bu-ausgabe.card-ink) — die braucht weder Polster noch Trennlinie, der Vignettenrechner auf Papier braucht beides. Gleiche Anordnung, zwei Ausfuehrungen: darum bleibt .bu-zwei beim Bussenrechner und .rk-zwei-spalten traegt die Papierfassung. Zusammenlegen hiesse, die frische Gestaltung der Nachbarbahn im Zusammenfuehren umzubauen. */ .rk-zwei-spalten > div { min-width: 0; } .bu-zwei > div { min-width: 0; } @media (min-width: 1100px) { .rk-zwei-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8) var(--s10); align-items: start; } .rk-ausgabe { padding-left: var(--s10); border-left: 1px solid var(--paper-line); } .rk-ausgabe .rk-summe { margin-top: 0; padding-top: 0; border-top: 0; } .rk-eingaben .rk-feld:last-of-type { margin-bottom: 0; } .bu-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8) var(--s10); align-items: start; } .bu-ausgabe { align-self: start; } .bu-eingaben .rk-feld:last-of-type { margin-bottom: 0; } } /* Das Ergebnisfeld hat eine feste Mindesthoehe: wechselt die Stufe, springt die Seite nicht (CLS). "Anzeige" statt einer Zahl steht eine Stufe kleiner — ein Wort in 60 Pixel Mono liest sich als Fehler. */ .bu-summe { min-height: 14rem; } /* Ein Wort statt einer Zahl ("Anzeige"): eine Stufe kleiner und in der Textschrift — ein Wort in 60 Pixel Mono liest sich als Fehler. Am 17.09.2026 hiess die Klasse kurz .rk-wort, weil der Vignettenrechner dasselbe braucht; seit dem 18.09.2026 steht das Ergebnis des Bussenrechners in einer dunklen Karte und geht eigene Wege, also traegt jede Seite wieder ihren Namen (.bu-text hier, .rk-wort im Vignettenblock). */ .rk-summe-zahl b.bu-text { font-size: var(--t-h2); letter-spacing: 0; font-family: var(--sans); } .bu-folge, .bu-probe { margin: var(--s4) 0 0; padding: var(--s1) 0 var(--s1) var(--s4); border-left: 3px solid var(--warn); font-size: var(--t-body); line-height: 1.6; color: var(--charcoal); max-width: 58ch; } .bu-probe { border-left-color: var(--neg); } .bu-folge.ist-ruhig, .bu-probe.ist-ruhig { border-left-color: var(--paper-line-2); color: var(--graphite); } .bu-probe[hidden] { display: none; } /* Die Stufen der Zone: die aktive traegt Tinte, wie der guenstigste Ort im Kostenrechner — hier heisst es "hier stehst du", nicht "am besten". */ /* Die Tabellen: der Zeilenkopf ist Text, kein Spaltenkopf — dieselbe Regel wie bei der Kantonstabelle des Fahrzeugausweises. */ .bu-tabelle { margin: var(--s4) 0 var(--s4); } .bu-tabelle th[scope="row"] { font-family: inherit; font-size: var(--t-body-s); text-transform: none; letter-spacing: 0; color: var(--charcoal); font-weight: var(--w-mid); padding: var(--s3) var(--s4) var(--s3) 0; border-top: 1px solid var(--paper-line); vertical-align: baseline; } .bu-tabelle th[scope="row"].num { font-family: var(--mono); font-weight: var(--w-book); white-space: nowrap; } .bu-tabelle th[scope="row"] small { display: block; color: var(--stone); font-weight: var(--w-book); } .bu-tabelle td { padding-right: var(--s4); } .bu-tabelle td:last-child { padding-right: 0; } .bu-tabelle .betrag { white-space: nowrap; } /* "Anzeige" ist eine Aussage, kein Betrag — ruhig, nicht rot. */ .bu-anzeige { color: var(--graphite); font-family: var(--sans); font-size: var(--t-small); } /* Die zwei breiten Tabellen (Massnahmen, Alkohol) stehen in .fz-rollt — dem Kasten, der schon die Kantonstabelle rollen laesst — und behalten eine Mindestbreite, damit auf dem Telefon der Kasten rollt und nicht die Zeilenkoepfe auf fuenf Zeilen umbrechen. Die anderen drei passen. */ .fz-rollt .bu-tabelle.bu-breit { min-width: 38rem; margin-bottom: 0; } /* Der Absatz nach einem Fragenblock braucht Luft nach oben. */ .rk-abschnitt .rk-fragen + p { margin-top: var(--s6); } /* Der Schluss steht in der Textspalte, nicht in einem zweiten .wrap. */ .bu-schluss { padding: var(--s12) 0 0; } .bu-weiter { margin: var(--s8) 0 var(--s12); } /* ========================================================================== /fahrzeugausweis/ — der Umbau vom 17.09.2026 DESIGN.md Abschnitt 2. Vier Handgriffe, gemessen statt geschaetzt: 1. KOBALT ZURUECKHOLEN. Im Artikeltext standen 25 kobaltblaue Stellen, und keine einzige davon war eine Handlung: 21 grosse Zierziffern, ein Zitatstrich, eine Messtafel. Der einzige echte kobaltblaue Knopf der Seite steht ganz unten und musste sich gegen alle 25 behaupten. Mercury sagt "reserved exclusively for the primary action", Officevibe "the only chromatic punctuation on the page", DESIGN.md Abschnitt 4 "eine pro Bildschirm". Die Ziffern bekommen --ink: Officevibes eigene Rolle dafuer ist "wherever the page needs to feel considered rather than decorative". 2. DIE TABELLE ALS DATENBAUSTEIN. Sie hatte fuenf Spalten und ueber 26 Zeilen fuenf verschiedene Zeilenhoehen (66/67/68/85/89 px), weil die Zellen umbrachen. Die Spalte "Dauer" war meist "—", die Spalte "Amt" zwei Zeilen blauer Linktext je Zeile. Drei Spalten, zwei Zeilen je Zeile, Nebenangaben klein unter dem Kantonsnamen. 3. DIE PAPIERLAGE. Neun Abschnitte lagen alle auf derselben Leinwand, getrennt nur durch eine Haarlinie. Die drei Abschnitte, in denen man etwas TUT (Umzug, Verlust, Felder), stehen jetzt auf --paper-1. Mercurys Trennung um eine Wertstufe, ohne Schatten. 4. DIE SPANNE ALS TAFEL. Sie stand als mitten im Vorspann. Handgriff B: die staerkste Zahl bekommt einen Platz zum Stehen. ToDrive, 17.09.2026. ========================================================================== */ /* --- 1. Kobalt ist wieder eine Handlung, keine Zierde -------------------- */ /* Nur auf dieser Seite: .fs-zahl und .fs-kennzahl gehoeren auch /wie-viele-fahrstunden-brauche-ich/, und deren Gestaltung ist nicht diese Aufgabe. Derselbe Befund gilt dort — das gehoert gesagt, nicht nebenbei miterledigt. */ .fz-seite .fs-zahl, .fz-seite .fs-kennzahl-zahl { color: var(--ink); } /* (0,3,1). Der Strich der Messtafel kommt aus ".rk-abschnitt figure.fs-kennzahl" — das sind ZWEI Klassen und ein Element, (0,2,1), nicht (0,1,1). Ein ".fz-seite .fs-kennzahl" ist nur (0,2,0) und verliert; am 17.09.2026 erst so gebaut und nachgemessen. */ .fz-seite .rk-abschnitt figure.fs-kennzahl, .fz-seite .rk-zitat { border-left-color: var(--paper-line-2); } /* --- 2. Kopf: Text links, die Spanne rechts ------------------------------ */ /* 340 statt der 620 aus .rk-kopf-zwei: dort steht ein Foto, hier eine Zahlentafel. Breiter gemacht wuerde sie den Vorspann unter 55 Zeichen druecken, und der Vorspann traegt die Antwort. */ .rk-kopf.fz-kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--s10); align-items: start; } /* figure traegt display:flex !important aus dem alten Theme (2022), und ".rk-abschnitt figure" greift im Kopf nicht — der Kopf ist kein Abschnitt. Derselbe Griff wie beim Kopfbild zwei Bloecke weiter oben. */ .rk-kopf figure.fz-spanne { display: block !important; margin: 0; background: var(--paper-1); border: 1px solid var(--paper-line); border-radius: var(--r-paper); padding: var(--s6); } .fz-spanne table { width: 100%; border-collapse: collapse; } .fz-spanne caption { text-align: left; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--stone); padding-bottom: var(--s3); } .fz-spanne th { text-align: left; font-weight: var(--w-book); font-size: var(--t-body-s); color: var(--graphite); padding: var(--s3) 0; border-top: 1px solid var(--paper-line); vertical-align: baseline; } .fz-spanne td { text-align: right; padding: var(--s3) 0; border-top: 1px solid var(--paper-line); vertical-align: baseline; } .fz-spanne tbody tr:first-child :is(th, td) { border-top: 0; padding-top: 0; } .fz-spanne .fz-zahl { display: block; font-family: var(--mono); font-size: var(--t-sub); line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; } .fz-spanne .fz-wo { display: block; font-size: var(--t-caption); color: var(--stone); line-height: 1.4; } /* Der Schnitt ist die Zahl, die haengen bleiben soll — eine Stufe groesser als die beiden Raender. Eine pro Seite, DESIGN.md Handgriff B. */ .fz-spanne .fz-mitte .fz-zahl { font-size: var(--t-h3); } .fz-spanne figcaption { margin-top: var(--s4); font-size: var(--t-caption); line-height: 1.5; color: var(--stone); } /* --- 3. Die Kantonstabelle: drei Spalten, eine Zeilenhoehe --------------- */ .fz-kantone th[scope="row"] { white-space: normal; vertical-align: top; padding: var(--s4) var(--s4) var(--s4) 0; } .fz-kantone .fz-kt { display: block; } .fz-kantone .fz-neben { display: block; margin-top: 3px; font-family: var(--sans); font-size: var(--t-caption); font-weight: var(--w-book); line-height: 1.45; letter-spacing: 0; color: var(--stone); } /* Die Quellen bleiben vollstaendig da, aber sie sind nicht mehr die lauteste Farbe der Zeile. 26 mal zwei blaue Zeilen standen vor den Betraegen, um die es hier geht. */ /* DIE SPEZIFITAET AUSGEZAEHLT, nicht geraten — DESIGN.md Abschnitt 9. Die Linkfarbe der Wissensseiten kommt aus body:is(.on-wissen, .on-paper) main :is(a, .go, .karte-fuss, .mehr):not([class*="btn"]):not(.skip) und das ist (0,4,2): zwei Elemente (body, main), vier Klassen — die Koerperklasse, das :is() (dessen Gewicht sein staerkstes Glied setzt, hier .go), und die zwei :not(). Ein ".on-wissen .fz-tabelle .fz-neben a" ist nur (0,3,1) und verliert. Erster Versuch am 17.09.2026 blieb genau darum blau. Der Waehler unten ist (0,4,3). */ body.on-wissen main .fz-kantone .fz-neben a:not([class*="btn"]), .fz-kantone .fz-neben a { color: var(--stone); text-decoration: none; border-bottom: 1px solid var(--paper-line-2); } body.on-wissen main .fz-kantone .fz-neben a:not([class*="btn"]):hover, .fz-kantone .fz-neben a:hover { color: var(--charcoal); border-bottom-color: var(--charcoal); } /* padding-right absichtlich NICHT auf 0: .fz-tabelle td traegt padding-right, und ein blosses "padding: x 0" nimmt es weg. Genau so klebte am 18.09.2026 in der PREISTABELLE die Spanne am Ortslink. */ .fz-kantone .betrag { text-align: right; white-space: nowrap; vertical-align: top; padding-block: var(--s4); } .fz-kantone .fz-wert { display: block; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--charcoal); } .fz-kantone .fz-wert strong { font-weight: var(--w-mid); } .fz-kantone .fz-zu { display: block; margin-top: 3px; font-family: var(--sans); font-size: var(--t-caption); line-height: 1.45; color: var(--stone); white-space: normal; } .fz-kantone .fz-offen { color: var(--stone); } /* Der Boden unter der Zeilenhoehe. Die Nebenzeile ist bei langen Amtsnamen zweizeilig — dann stehen ALLE Zeilen auf derselben Hoehe statt die Haelfte flacher. In einer Tabelle wirkt height als Mindesthoehe. */ .fz-kantone tbody tr { height: 74px; } .fz-rollt .fz-kantone { min-width: 34rem; } /* --- 4. Die Papierlage: hier tut man etwas ------------------------------- */ /* (0,2,0) — .rk-abschnitt und .card-paper sind beide (0,1,0), und identity.css laedt vor dieser Datei, also gewaenne sonst padding-block aus .rk-abschnitt gegen das Polster der Karte. */ .fz-seite .fz-tun { border-top: 0; padding: var(--s8); margin-block: var(--s6); } .fz-seite .fz-tun > h2 { margin-top: 0; } /* NEBENEINANDER ERST AB 1200, wie beim Kopfbild. Und zwar mit EIGENER Regel: ".rk-kopf.fz-kopf" ist (0,2,0) und schlaegt das ".rk-kopf-zwei" (0,1,0) in der bestehenden Bruchstelle weiter oben — auch innerhalb von deren @media. Ohne die naechsten drei Zeilen stand die Tafel bei 375 Pixeln UEBER der Ueberschrift, die Textspalte war 0 Pixel breit und die Seite rollte waagrecht (589 statt 375). Am 17.09.2026 gemessen, nachdem genau das passiert war. */ @media (max-width: 1200px) { .rk-kopf.fz-kopf { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } .rk-kopf figure.fz-spanne { order: 2; } } @media (max-width: 900px) { .fz-seite .fz-tun { padding: var(--s6); margin-inline: 0; } } /* Der zweite Knopf der Schlusskarte traegt einen ganzen Satz ("Was der Fuehrerschein insgesamt kostet"), und .btn steht auf white-space: nowrap. Bei 375 Pixeln war er 352 breit in einer 279 breiten Karte und schob das Dokument auf 400 — die Seite rollte waagrecht. Auf schmalen Schirmen darf die Beschriftung umbrechen; auf breiten bleibt sie einzeilig. Am 17.09.2026 gemessen. */ @media (max-width: 560px) { .fz-seite .schluss .row .btn { white-space: normal; max-width: 100%; text-align: center; } } /* Die rechte Spalte von /fuehrerausweis-verloren/: das Werkzeug der Seite. Wo bei Rechner und Fahrstunden ein Foto steht, steht hier die Auskunft — die Seite hat keine Bilder (Stand 17.09.2026) und ihr Werkzeug ist das, was jemand tatsaechlich braucht. Die Klasse macht nur, was .card-paper nicht kann: den Innenabstand fuer einen Kasten mit Bedienelementen. */ /* ========================================================================== /fuehrerausweis-verloren/ — die Saeulen ========================================================================== Dima hat am 18.09.2026 aus drei Entwuerfen diesen gewaehlt. Vorher stand hier nacheinander ein Streudiagramm, eine Leiter und eine Kachelliste; die Saeulen sind das erste Bild, das er ohne Nachfrage gut fand — und der Grund ist wahrscheinlich, dass die GESTALT die Aussage traegt: flach links, ein langes Plateau, einmal steil rechts. Man muss keine Achse lesen, um zu sehen, dass die meisten Kantone ungefaehr dasselbe nehmen und einer aus der Reihe faellt. Der Kopf traegt keine Karte mehr — die Zahl, die Zeile darunter und das Bild stehen in voller Breite, und die Wahl steht darunter. ========================================================================== */ .sa { margin: 0 0 var(--s12); } .sa-kopf { max-width: 62ch; margin: 0 0 var(--s8); } .sa .fa-antwort { margin: var(--s2) 0 var(--s2); font-family: var(--sans); font-weight: var(--w-mid); font-size: clamp(2.4rem, 5.6vw, 3.6rem); line-height: 1.02; letter-spacing: -.035em; color: var(--charcoal); font-variant-numeric: tabular-nums; transition: color .2s ease; } .sa .fa-antwort.ist-gewaehlt { color: var(--cobalt); } .sa .fa-unterzeile { margin: 0; font-size: var(--t-body-l); line-height: 1.45; color: var(--stone); max-width: 58ch; } .sa-feld { position: relative; height: 19rem; padding: 0 0 var(--s6); margin: 0 0 var(--s5); } /* Das Raster liegt HINTER den Saeulen: vier Linien, mehr braucht es nicht. */ .sa-raster { position: absolute; inset: 0 0 var(--s6); } .sa-raster span { position: absolute; left: 0; right: 0; bottom: var(--p); border-top: 1px solid var(--paper-line); } .sa-raster i { position: absolute; right: 0; bottom: 2px; font-style: normal; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em; color: var(--stone); } /* Der Schnitt ist der Massstab: gestrichelt, dunkler, mit eigener Marke. */ .sa-schnitt { position: absolute; left: 0; right: 0; bottom: calc(var(--p) + var(--s6)); border-top: 1px dashed var(--charcoal); opacity: .45; } .sa-schnitt i { position: absolute; left: 0; bottom: 3px; font-style: normal; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--charcoal); } .sa-saeulen { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: .5%; } .sa-saeule { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 0; border: 0; background: none; cursor: pointer; } .sa-balken { display: block; width: 100%; border-radius: 4px 4px 0 0; height: calc(var(--h) * (100% - 1.4rem)); background: var(--ink); opacity: .34; transform-origin: bottom; transition: opacity .16s ease, background-color .16s ease; } .sa-saeule.ist-stumm .sa-balken { height: 5px; background: repeating-linear-gradient( 45deg, var(--paper-line-2) 0 2px, transparent 2px 5px); opacity: 1; box-shadow: inset 0 0 0 1px var(--paper-line-2); } .sa-kt { display: block; height: 1.4rem; line-height: 1.4rem; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .04em; color: var(--stone); transition: color .16s ease; } .sa-saeule:hover .sa-balken, .sa-saeule:focus-visible .sa-balken { opacity: .62; } .sa-saeule:focus { outline: none; } .sa-saeule:focus-visible .sa-kt { color: var(--charcoal); } .sa-saeule[aria-pressed="true"] .sa-balken { background: var(--cobalt); opacity: 1; } .sa-saeule[aria-pressed="true"] .sa-kt { color: var(--cobalt); } /* Die Marke am Zeiger. */ .sa-tip { position: absolute; z-index: 3; left: 0; top: 0; pointer-events: none; transform: translate(-50%, -118%); display: grid; gap: 2px; padding: var(--s3) var(--s4); background: var(--ink); color: #fff; border-radius: 10px; box-shadow: 0 8px 28px rgba(12, 23, 84, .22); white-space: nowrap; opacity: 0; transition: opacity .12s ease; } .sa-tip.ist-da { opacity: 1; } .sa-tip-ort { font-size: var(--t-body-s); font-weight: var(--w-mid); } .sa-tip-zahl { font-family: var(--mono); font-size: var(--t-body); } .sa-tip-dauer { font-size: var(--t-caption); color: rgba(255,255,255,.7); } .sa-note { margin: 0 0 var(--s8); max-width: 66ch; font-size: var(--t-body-s); line-height: 1.6; color: var(--stone); } .sa-note strong { color: var(--charcoal); font-weight: var(--w-mid); } .sa-fuss { padding: var(--s6) 0 0; border-top: 1px solid var(--paper-line); } .sa-frage { margin: 0 0 var(--s3); font-family: var(--serif); font-weight: 400; font-size: var(--t-sub); color: var(--charcoal); } .sa .fa-ergebnis { margin: var(--s5) 0 0; font-size: var(--t-body); color: var(--charcoal); } /* WACHSEN VON LINKS NACH RECHTS. Der fertige Zustand ist der Grundzustand. */ @media (prefers-reduced-motion: no-preference) { .sa-balken { animation: sa-wachs .6s var(--mo-kurve) backwards; animation-delay: var(--verzug, 0ms); } } @keyframes sa-wachs { from { transform: scaleY(0); } to { transform: none; } } /* Auf dem Telefon stehen sechsundzwanzig Kuerzel nebeneinander auf 330 Pixeln — waagrecht ergibt das "ZGAGLUSZGL...". Sie stellen sich darum hochkant; die Saeulen geben die Hoehe dafuer ab. */ @media (max-width: 700px) { .sa-feld { height: 17rem; } .sa-kt { writing-mode: vertical-rl; height: 2.6rem; line-height: 1; font-size: 10px; letter-spacing: 0; } .sa-balken { height: calc(var(--h) * (100% - 2.6rem)); } } /* Der Kopf traegt jetzt keine Karte mehr — die Saeulen stehen in voller Breite darunter. Die Ueberschrift gehoert zur Anzeigeschrift, wie jede Zwischenueberschrift derselben Seite; bis zum 18.09.2026 stand sie als einzige in der Textschrift, und das eine kursive Wort ("jetzt") war damit keine Kursive, sondern eine schraege Grotesk. */ .fa-kopf h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; max-width: 24ch; } .fa-kopf .rk-lede { max-width: 62ch; } /* Die Spalten der Kantonstabelle stiessen aneinander: ".rk-liste td" hat "padding: var(--s3) 0" und ".fz-tabelle td" nur ein padding-right von 16 Pixeln — zwischen "gratis" und "7-10 Arbeitstage" blieben damit zwei. Hier auf DIESE Tabelle begrenzt; dieselben zwei Zeilen fehlen auch /fahrzeugausweis/, /auto-abmelden/, /berufsausweise/ und /toefflipruefung/, aber das sind fremde Spuren und eine eigene Entscheidung. */ #fa-liste th, #fa-liste td { padding-right: var(--s6); } #fa-liste tr > *:nth-child(n+3) { padding-left: var(--s3); } /* --- 5. Die dunkle Insel mit dem Verteilungsbild ------------------------- */ /* Mercury, wortwoertlich gelesen: "components are flat and borderless, relying on the 12px-radius graphite card lift ... rather than shadows" und "a single vivid cobalt acting as the only chromatic punctuation". Also: --night-1 als Flaeche, --r-night als Radius, kein Schatten, keine Kante — und im ganzen Bild genau eine farbige Linie, die Mittellinie. Die Nacht-Werte kommen von .nacht-insel aus thema.css; hier steht kein einziger Hexwert. */ /* --ink, nicht --night-1. Dima hat am 18.09.2026 aus drei Flaechen gewaehlt (Onyx, Tinte, tiefes Kobalt). Tinte ist dieselbe Farbe wie .card-ink, also wie die dunkle Schlusskarte weiter unten auf derselben Seite: die Seite hat damit EIN Dunkel und nicht zwei, die sich um zwei Grad unterscheiden. Officevibes Rolle fuer --ink ist genau diese — "dark feature cards, footer background ... wherever the page needs to feel considered". Gemessen auf dieser Flaeche: Ueberschrift 14.22, Prosa 9.48, kleinste Schrift 4.93, Goldlinie 8.90. Alles ueber 4.5, ohne Nachbesserung. */ .fz-nacht { margin: var(--s12) 0 var(--s10); padding: var(--s12) var(--s10); background: var(--ink); border-radius: var(--r-night); color: var(--ivory); } .fz-nacht-kopf { max-width: 68ch; } .fz-nacht .eyebrow { color: var(--ash-dim); } .fz-nacht h2 { margin: var(--s3) 0 var(--s4); font-size: var(--t-h2); line-height: 1.15; color: var(--ivory); max-width: 22ch; } .fz-nacht h2 em { font-family: var(--serif); font-style: italic; } .fz-nacht p { margin: 0; color: var(--ash); line-height: 1.65; font-size: var(--t-body); } .fz-diagramm { margin: var(--s10) 0 0; } /* figure traegt display:flex !important aus dem Theme von 2022 — dieselbe Gegenwehr wie beim Kopfbild und bei der Spannentafel. */ .fz-nacht figure.fz-diagramm { display: block !important; } .fz-bild { display: block; width: 100%; height: auto; overflow: visible; } /* Das Gitter traegt die Ablesbarkeit, nicht die Aufmerksamkeit. */ .fz-gitter { stroke: var(--night-line); stroke-width: 1; } .fz-grund { stroke: var(--night-line-2); stroke-width: 1; } .fz-achse { fill: var(--ash-dim); font-family: var(--mono); font-size: 11px; } .fz-code { fill: var(--ash-dim); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; } .fz-wertchen { fill: var(--ash); font-family: var(--mono); font-size: 11px; } /* Die Saeulen: eine Farbe, drei Zustaende. Kein Gruen fuer billig und kein Rot fuer teuer — GRUNDSATZ-KEIN-RANKING gilt fuer Fahrschulen, und die Gewohnheit, Zahlen zu bewerten, hoert hier auch bei Kantonen auf. Ein Kanton ist nicht "schlecht", weil sein Amt mehr verlangt. */ .fz-saeule { fill: var(--ash-dim); } .fz-saeule-spanne { fill: var(--night-4); stroke: var(--ash-dim); stroke-width: 1; } .fz-saeule-frei { fill: var(--ivory); } /* Deutlich leiser als die Saeulen. Ueber die volle Hoehe gestrichelt sagt das Feld "irgendwo hier drin, wir wissen es nicht" — mit der Kraft einer normalen Saeule saehe es dagegen aus wie der teuerste Kanton des Landes. */ .fz-saeule-offen { fill: none; stroke: var(--night-line-2); stroke-width: 1; stroke-dasharray: 2 5; opacity: .5; } /* Die eine Farbe im Bild — und zwar --gold. Erst stand hier --cobalt: das ist die Handlungsfarbe auf PAPIER und auf Nacht unlesbar, #5266eb auf #171721 sind 3.78:1 (Fliesstext braucht 4.5). Dann --ice, was zwar 96-mal im Haus vorkommt, aber in DESIGN.md Abschnitt 4 gar nicht aufgezaehlt ist. Aufgezaehlt sind dort --pos, --warn, --neg und --gold, "nie um eine Fahrschule zu bewerten, nur fuer neutrale Tatsachen". Ein Mittelwert ist genau das. --gold auf Nacht: 9.54:1. Linie und Beschriftung tragen dieselbe Farbe. Eine Linie ist kein Text und kaeme mit 3.0 aus, aber zwei Toene fuer eine Aussage waeren eine Farbe zu viel — die Insel haelt sich an Mercurys eine Setzung. */ .fz-schnitt { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 5 4; } .fz-schnitt-text { fill: var(--gold); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; } /* BEWEGUNG. .waechst aus identity.css setzt scaleY(0) mit transform-origin: bottom — bei SVG bezieht sich transform-origin ohne transform-box aber auf die viewBox und nicht auf das Rechteck, die Saeulen waeren also vom BILDBODEN aus gewachsen statt vom eigenen Fuss. fill-box stellt das um. Die Staffelung steht als transition-delay am Element, vom PHP gerechnet: .staffel aus identity.css reicht nur bis sechs Geschwister, hier sind es 26. */ .fz-bild .waechst { transform-box: fill-box; transform-origin: bottom; } .fz-diagramm figcaption { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin-top: var(--s6); font-size: var(--t-caption); color: var(--ash-dim); } .fz-legende { display: inline-flex; align-items: center; gap: var(--s2); } .fz-legende i { width: 12px; height: 12px; border-radius: 2px; flex: none; } .fz-p-fest { background: var(--ash-dim); } .fz-p-spanne { background: var(--night-4); box-shadow: inset 0 0 0 1px var(--ash-dim); } .fz-p-offen { box-shadow: inset 0 0 0 1px var(--night-line-2); } .fz-p-schnitt { height: 0 !important; border-top: 2px dashed var(--gold); border-radius: 0; } /* Auf dem Telefon sind 26 Saeulen a 36 Pixel nicht lesbar. Das Bild rollt dann im eigenen Kasten — dieselbe Loesung wie bei der Tabelle, und die Seite selbst rollt weiterhin nicht. */ @media (max-width: 720px) { .fz-nacht { padding: var(--s8) var(--s5); margin-inline: 0; } .fz-diagramm { overflow-x: auto; -webkit-overflow-scrolling: touch; } .fz-bild { min-width: 620px; } .fz-nacht h2 { font-size: var(--t-h3); max-width: none; } } /* ========================================================================== /bussenrechner/, zweite Fassung — aus Prosa wird Register ToDrive, 17.09.2026. Dima: "parts like this look really visually boring". Nach DESIGN.md Abschnitt 2, drei Handgriffe: E (die vier Stufen der Probezeit als Stufenpfad), A (Fakten als Datenzeilen .cost-rows), J (die Quellen als Chips im Kopf) — und Eigenschaft 7 aus Abschnitt 3: jede Ziffer in Mono. Gemessen vorher auf der Livesite: 4 Absaetze mit je einer Ueberschrift und keiner Zahl in Mono; die Ziffern 15/20/25, 21/26/31 und "+1 Jahr" standen im Fliesstext und waren von weitem nicht zu sehen. ========================================================================== */ /* DER STUFENPFAD. Wortgleich mit dem Baustein der dreizehn Schritte auf /fuehrerschein-guide/ — er steht dort im Kopf von guide.php eingebettet. Das hier ist die zweite Seite, die ihn braucht, darum kommt er ins Blatt der Rechnerfamilie. Bekommt der Guide einmal ein eigenes Blatt, gehoeren beide Kopien zusammen nach wp.css; bis dahin bleiben die Regeln Zeichen fuer Zeichen gleich, damit man sie vergleichen kann. */ .wegleiste { list-style: none; margin: var(--s8, 32px) 0 0; padding: 0; position: relative; max-width: 60ch; } .wegleiste::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: var(--hairline, rgba(0, 0, 0, .12)); } .wegschritt { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: var(--s4, 16px); align-items: start; padding: 0 0 var(--s5, 20px); min-height: 100px; } .wegleiste > .wegschritt:last-child { padding-bottom: 0; } .wegnr { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--paper, #f9f8f6); border: 2px solid var(--hairline, rgba(0, 0, 0, .12)); font-family: var(--mono, ui-monospace, monospace); font-size: 13px; color: var(--stone, #6b6b76); position: relative; z-index: 1; } /* Die 20 Pixel sind eine Zahl, kein Name: die Stufenleiter kennt 18 und 21. Bis zum 21.09.2026 stand hier var(--t-h4, 20px) — einen --t-h4 gibt es nicht, gezeichnet wurde immer der Ruecklaeufer. */ .wegtext h3 { margin: 6px 0 0; font-size: 20px; line-height: 1.25; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3, 12px); } .wegfakten { list-style: none; margin: var(--s3, 12px) 0 0; padding: 0; display: grid; gap: 4px; } .wegfakten li { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--s3, 12px); font-size: var(--t-body-s, 15px); line-height: 1.5; } .wegfakten i { font-style: normal; color: var(--stone, #6b6b76); } .wegfakten span { color: var(--charcoal, #3a3a44); } @media (max-width: 640px) { .wegfakten li { grid-template-columns: 7rem 1fr; } } /* Nur hier: die Station, auf der die Rechnung oben gerade steht. Kobalt an der Nummer und die Plakette im Titel — ein Zustand, kein Urteil. Die Ziffern in den Zeilen fett und in Mono, damit man 21 / 26 / 31 von weitem liest. */ .bu-leiter .wegschritt.ist-aktiv .wegnr { border-color: var(--cobalt); color: var(--ink); background: var(--lavender); } .bu-leiter .wegfakten b { font-weight: var(--w-mid); color: var(--ink); } .bu-leiter .wegtext h3 .badge { font-weight: var(--w-mid); } /* Datenzeilen im Fliesstext (.cost-rows aus wp.css): dieselbe Lesebreite wie die Absaetze, sonst laeuft die Haarlinie 788 Pixel weit und die Zahl steht allein am rechten Rand. Die zweite Zeile einer Bezeichnung — der Rechenweg eines Falls — steht klein und grau darunter. */ .rk-abschnitt .cost-rows, .rk-abschnitt .cost-total, .rk-fragen .cost-rows { max-width: 64ch; } .rk-abschnitt .cost-rows li > span:first-child small { display: block; color: var(--stone); font-size: var(--t-caption); line-height: 1.5; } .rk-abschnitt .cost-rows + p, .rk-abschnitt .cost-total + p { margin-top: var(--s6); } .rk-fragen .cost-rows { margin-top: var(--s3); } /* Die Chips im Kopf (.chips/.chip aus wp.css) — Tarif, Gesetz, Abrufdatum. */ .bu-kopf .chips { margin-top: var(--s5); } /* ========================================================================== /bussenrechner/, dritte Fassung — die Antwort in Nacht, das Band als Bild ToDrive, 18.09.2026. Dima: "show me not say". ========================================================================== */ /* DAS ERGEBNIS IN TINTE. Dieselbe Karte wie der Schluss jeder Leseseite (.card-ink aus bausteine.css: Marineblau --ink, 16 Pixel Radius). Erst stand hier Onyx — Dima, 18.09.2026: "all but black, use dark blue". Die Schrift darin wie in der Schlusskarte: Zahl Weiss, Satz Lavendel; die Zustandskanten (--warn, --neg) stehen auf Marine so, wie das System sie meint. Kein Schatten, keine Kante: die Farbstufe trennt. */ .bu-ausgabe.card-ink { padding: var(--s6) var(--s6) var(--s8); margin-top: var(--s2); } .bu-ausgabe .bu-summe { margin: 0; padding-top: 0; border-top: 0; min-height: 0; } .bu-ausgabe .rk-summe-zahl b { color: var(--white); } .bu-ausgabe .rk-summe-zahl .cur { color: var(--lavender); } .bu-ausgabe .rk-satz { color: var(--lavender); } .bu-ausgabe .rk-satz b { color: var(--white); } .bu-ausgabe .bu-folge, .bu-ausgabe .bu-probe { color: var(--white); } .bu-ausgabe .bu-folge.ist-ruhig, .bu-ausgabe .bu-probe.ist-ruhig { color: var(--lavender); border-left-color: color-mix(in srgb, var(--white) 28%, transparent); } @media (max-width: 1099px) { .bu-ausgabe.card-ink { margin-top: var(--s6); } } /* DIE SKALA. Ein Band von 1 bis 60 km/h zu viel, die Abschnitte absolut positioniert in Prozent (dieselben Zahlen, die PHP und das Skript aus todrive_bussen_skala() bekommen). Die Bussenstufen mischen sich von Lavendel nach Kobalt (Inline-Stil), die Massnahmen gehen von Creme ueber Stein nach Tinte — eine Rampe, keine zweite Farbe und kein Schwarz (Dima, 18.09.2026). Der Zeiger steht ueber dem Band, seine Zahl in einer Pille darueber. */ .bu-skala { display: block !important; margin: var(--s8) 0 0; padding-top: var(--s6); border-top: 1px solid var(--paper-line); } .bu-skala .rk-kurve-lese { margin: 0; } .bu-skala-bahn { position: relative; height: 40px; margin: var(--s10) 0 0; cursor: crosshair; touch-action: pan-y; -webkit-user-select: none; user-select: none; } .bu-skala-bahn:focus { outline: none; } .bu-skala-bahn:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; border-radius: var(--r-data); } .bu-skala-segmente { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; border-radius: var(--r-data); overflow: hidden; background: var(--paper-line); } .bu-skala-segmente li { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: inset -1px 0 0 var(--paper-1); } .bu-skala-segmente li i { font-style: normal; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .04em; white-space: nowrap; color: var(--charcoal); padding: 0 2px; } .bu-skala-segmente li.ist-dunkel i { color: var(--white); } .bu-skala-segmente li.seg-verwarnung { background: var(--paper-line-2); } .bu-skala-segmente li.seg-verwarnung.ist-dunkel i { color: var(--charcoal); } .bu-skala-segmente li.seg-entzug1 { background: var(--stone); } .bu-skala-segmente li.seg-entzug3 { background: color-mix(in srgb, var(--ink) 60%, var(--stone)); } .bu-skala-segmente li.seg-raser { background: var(--ink); } .bu-skala-segmente li.seg-schmal i { display: none; } .bu-skala-zeiger { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 2px solid var(--ink); margin-left: -1px; pointer-events: none; transition: left .12s ease-out; } @media (prefers-reduced-motion: reduce) { .bu-skala-zeiger { transition: none; } } .bu-skala-zeiger b { position: absolute; left: 0; bottom: 100%; transform: translate(-50%, -6px); font-family: var(--mono); font-size: var(--t-small); font-weight: var(--w-mid); line-height: 1; color: var(--ink); background: var(--paper-1); border: 1px solid var(--paper-line-2); border-radius: var(--r-pill); padding: 5px 9px; white-space: nowrap; } .bu-skala-achse { list-style: none; margin: var(--s2) 0 0; padding: 0; position: relative; height: 18px; } .bu-skala-achse li { position: absolute; top: 0; text-align: center; font-family: var(--mono); font-size: var(--t-micro); color: var(--stone); white-space: nowrap; overflow: hidden; } .bu-skala-achse li.seg-schmal { display: none; } .bu-skala-einheit { margin: var(--s2) 0 0; font-size: var(--t-caption); line-height: 1.5; color: var(--stone); max-width: none; } .bu-skala-legende { list-style: none; margin: var(--s4) 0 0; padding: 0; display: none; gap: 2px; font-size: var(--t-caption); line-height: 1.5; color: var(--graphite); } .bu-skala-legende i { font-style: normal; color: var(--charcoal); display: inline-block; min-width: 5ch; } .bu-skala .rk-kurve-fuss { margin-top: var(--s4); } /* Auf dem Telefon sind die Abschnitte 25 Pixel breit: keine Beschriftung im Band, keine Achse — dafuer die Legende darunter. */ @media (max-width: 640px) { .bu-skala-segmente li i { display: none; } .bu-skala-achse { display: none; } .bu-skala-legende { display: grid; } } /* ========================================================================== /vignette-schweiz/ — der Ja/Nein-Rechner ToDrive, 17.09.2026, docs/58. Dieselben Bausteine wie Kosten- und Bussenrechner (rk-box, rk-feld, pill, rk-zwei-spalten, rk-summe, rk-liste in fz-rollt, rk-fragen, rk-methode, card-paper, card-ink). Neu ist nur, was kein Rechner vorher hatte: die Antwort ist ein Satz, kein Betrag, und darunter steht der Grund. Kein --warn, kein --neg — "Nein" ist eine Antwort, kein Fehler. ========================================================================== */ /* Die lange Ueberschrift, wie beim Bussenrechner eine Stufe kleiner. */ .vg-titel { font-size: var(--t-h1); max-width: 30ch; line-height: 1.12; } /* Eine Zahl im Fliesstext ist — und heisst im Browser 700. Das System kennt kein 700 (DESIGN.md Abschnitt 3, "zwei Gewichte"); am 17.09.2026 mit dem Messskript gefunden: neun Elemente auf 700, alle b.num. Mittelschnitt, wie .rk-summe-zahl b und .rk-lede strong. Gilt fuer alle Seiten mit rechner.css — auch die Liste der Faelle im Bussenrechner. */ b.num { font-weight: var(--w-mid); } /* Ein Wort statt einer Zahl im Ergebnisfeld ("Ja — E-Vignette empfohlen"): eine Stufe kleiner und in der Textschrift — ein Wort in 60 Pixel Mono liest sich als Fehler. Der Bussenrechner macht dasselbe mit .bu-text; seine Fassung steht seit dem 18.09.2026 in seiner dunklen Karte und bleibt dort, darum hier ein eigener Name statt eines geteilten. */ .rk-summe-zahl b.rk-wort { font-size: var(--t-h2); letter-spacing: 0; font-family: var(--sans); } /* Das Ergebnisfeld: feste Mindesthoehe, sonst springt die Seite beim Umschalten (CLS). Das Wort in .rk-wort darf zwei Zeilen lang sein. */ .vg-summe { min-height: 20rem; } .vg-summe .rk-summe-zahl b.rk-wort { line-height: 1.2; } /* Der Grund: eine kobaltblaue Kante links, dieselbe Geste wie .lp-antwort auf der Umschreiben-Seite. Bei "Nein" und "nur bedingt" wird die Kante still — kein Signal, nur die Aussage. */ .vg-warum { margin: var(--s4) 0 0; padding: var(--s1) 0 var(--s1) var(--s4); border-left: 3px solid var(--cobalt); font-size: var(--t-body); line-height: 1.6; color: var(--charcoal); max-width: 58ch; } .vg-summe[data-antwort="psva"] .vg-warum, .vg-summe[data-antwort="nurAutobahn"] .vg-warum { border-left-color: var(--paper-line-2); color: var(--graphite); } .vg-summe .rk-hinweis[hidden] { display: none; } /* Der eine Kauf-Knopf, unter der Antwort. */ .vg-knopf { margin: var(--s6) 0 var(--s3); } /* Die Vergleichstabelle: Merkmal links als Zeilenkopf (fz-tabelle), die beiden Formen je gleich breit — fz-tabelle gibt ihren zwei Geldspalten 20 %, hier sind es Saetze. Der 74-Pixel-Boden der Kantonstabelle (Block darueber, /fahrzeugausweis/) gilt hier nicht: die Zeilen sind Saetze und tragen ihre Hoehe selbst. Beim Zusammenfuehren am 17.09.2026 gesehen. */ .vg-tabelle th:nth-child(2), .vg-tabelle th:nth-child(3) { width: 38%; } .vg-tabelle tbody tr { height: auto; } .vg-tabelle .betrag, .vg-tabelle td { text-align: left; white-space: normal; vertical-align: top; } .fz-rollt .vg-tabelle { min-width: 40rem; } /* Die Knoepfe der Schlusskarte duerfen auf dem Telefon umbrechen. .btn steht auf white-space: nowrap; "Alles zum Fuehrerausweis auf Probe" war bei 375 Pixeln 448 breit und schob das Dokument auf 496 (gemessen 17.09.2026 in der Vorschau). Dieselbe Regel wie fuer .fz-seite weiter oben, hier fuer die Schlusskarte beider Rechner (.bu-schluss). */ @media (max-width: 560px) { .bu-schluss .row .btn, /* "Zum offiziellen Shop (e-vignette.ch)" ist bei 375 Pixeln 318 breit, die Ergebnisspalte im Kasten 277 — der Knopf ragte aus der Karte. */ .vg-knopf .btn { white-space: normal; max-width: 100%; text-align: center; } } /* "Dein erstes Auto": eine Papierkarte im Textfluss, kein zweiter Abschnitt. */ .rk-abschnitt .vg-erstes { padding: var(--s8); } .vg-erstes .eyebrow { margin: 0 0 var(--s2); } .vg-erstes h2 { margin: 0 0 var(--s4); font-size: var(--t-h3); line-height: 1.2; } .vg-erstes p { margin: 0; max-width: 64ch; line-height: 1.65; color: var(--graphite); } @media (max-width: 640px) { .rk-abschnitt .vg-erstes { padding: var(--s6); } } /* --- 6. Die zwei Dokumente ------------------------------------------------ Der eigene Einfall dieser Seite (18.09.2026). Kein Bauteil aus dem Katalog: eine Zeichnung, die es nur geben kann, weil diese Seite von einem bedruckten Papier mit nummerierten Feldern handelt. Die haeufigste Verwechslung hier ist nicht eine falsche Bedeutung, sondern ein falsches DOKUMENT — Code 78 steht im Fuehrerausweis, nicht hier. Zwei Karten nebeneinander sagen das, bevor jemand zu lesen anfaengt. SVG zeichnet, CSS legt. Zuerst standen beide Karten in EINEM SVG mit festen Koordinaten; auf dem Telefon war dann immer nur eine im Bild und der Vergleich ging im seitlichen Rollen verloren. Jetzt sind es zwei Zeichnungen in einem Raster: nebeneinander, wo Platz ist, untereinander auf dem Telefon. Die Haltung kommt von Mercury — flach, keine Schatten, Trennung ueber eine Wertstufe — und die Dichte von OpenSea: Haarlinien, Mono fuer alles, was eine Nummer ist, kleine Radien. Was hier NICHT passiert, ist Officevibes Handschrift-Geste (der orange Kringel um "47% less"): Stiftstriche sind auf dieser Website schon einmal als billig zurueckgewiesen worden. Die Zeichnung traegt keine Farbe, die nicht ohnehin auf Papier steht. ========================================================================== */ .fz-dokument { margin: var(--s8) 0 var(--s6); } .rk-abschnitt figure.fz-dokument { display: block !important; } .dok-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 13rem); gap: var(--s6); align-items: center; } .dok-teil { min-width: 0; } .dok-neben { min-width: 0; display: grid; gap: var(--s3); } @media (max-width: 760px) { .dok-paar { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } .dok-neben { gap: var(--s3); } /* Die grosse Karte ist ein breites Dokument: in eine 277 Pixel schmale Spalte gequetscht faellt ihre Beschriftung auf 7.2 Pixel (nachgemessen 18.09.2026). Sie behaelt darum eine Mindestbreite und rollt im eigenen Kasten — die kleine Karte darunter bleibt ganz sichtbar, der Vergleich ueberlebt also auch auf dem Telefon. */ .dok-paar > .dok-teil:first-child { overflow-x: auto; -webkit-overflow-scrolling: touch; } .dok-eins { min-width: 420px; } /* Und die kleine Karte blaeht sich nicht auf: ohne Deckel waere ihre Schrift auf dem Telefon groesser als die der Hauptkarte. */ .dok-zwei { max-width: 260px; } } .fz-dok { display: block; width: 100%; height: auto; overflow: visible; } /* Das Blatt: eine Stufe heller als die Karte, auf der es liegt. */ .dok-blatt { fill: var(--paper-0); stroke: var(--paper-line-2); stroke-width: 1; } .dok-titel { fill: var(--ink); font-family: var(--sans); font-size: 15px; font-weight: var(--w-semi); } .dok-fuss { fill: var(--stone); font-family: var(--sans); font-size: 11px; } .dok-linie { stroke: var(--paper-line-2); stroke-width: 1; } /* Feldnummern sind Nummern — also Mono, wie jede Zahl im Haus. */ .dok-nr { fill: var(--stone); font-family: var(--mono); font-size: 12px; } .dok-bez { fill: var(--charcoal); font-family: var(--sans); font-size: 12px; } .dok-wert { stroke: var(--paper-line); stroke-width: 6; stroke-linecap: round; } /* Die zwei verwechselten Gewichte und der Code auf dem anderen Dokument: eine Stufe kraeftiger, mehr nicht. Keine Signalfarbe — ein Feld ist nicht "gut" oder "schlecht". */ .dok-feld.ist-stark .dok-nr, .dok-feld.ist-stark .dok-bez { fill: var(--ink); font-weight: var(--w-mid); } .dok-bem { fill: none; stroke: var(--paper-line-2); stroke-width: 1; stroke-dasharray: 4 4; } .dok-bem-titel { fill: var(--stone); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } .dok-178 { fill: var(--ink); font-family: var(--mono); font-size: 12px; font-weight: var(--w-mid); } .dok-bem-text { fill: var(--graphite); font-family: var(--sans); font-size: 12px; } .dok-klammer path { fill: none; stroke: var(--paper-line-2); stroke-width: 1.5; } .dok-klammer-text { fill: var(--graphite); font-family: var(--sans); font-size: 12px; font-style: italic; } /* Das zweite Dokument steht zurueck: es ist zum Vergleich da, nicht als zweite Hauptsache. */ .dok-fremd .dok-blatt { fill: transparent; stroke-dasharray: 5 4; } .dok-fremd .dok-titel { fill: var(--graphite); } /* Der Satz dazwischen. Auf dem Schreibtisch steht er senkrecht in der Spalte zwischen den Karten, auf dem Telefon waagrecht zwischen ihnen. */ .dok-brueche { margin: 0; font-size: var(--t-caption); line-height: 1.45; color: var(--graphite); } .dok-pfeil { display: block; width: var(--s10); height: 1px; margin: 0 0 var(--s2); background: var(--paper-line-2); } .fz-dokument figcaption { margin-top: var(--s5); font-size: var(--t-caption); line-height: 1.55; color: var(--stone); max-width: 62ch; } /* ========================================================================== /fuehrerausweis-verloren/ — die 26 Kantone als Karteikarten ========================================================================== Aus vier Entwuerfen fuer diese Tabelle (Rangliste, Karteikarten, Register, Preisbaender) hat Dima am 18.09.2026 die Karten gewaehlt. Was sie loesen: die fuenfspaltige Tabelle war 26 Zeilen a 67 Pixel — 1800 Pixel Blaettern fuer fuenf Angaben, jede Zeile gleich schwer, nichts fuehrte, und auf dem Telefon musste man sie seitlich schieben. Eine Karte ist EIN Amt: Name oben, Gebuehr gross, Kleingedrucktes darunter. Auf dem Telefon aendert sich nur die Spaltenzahl. SCHRIFT. Der erste Anlauf setzte Gebuehr UND jede Beschriftung in JetBrains Mono. Dima: "the fonts are so ugly" — zu Recht. identity.css sagt woertlich, wofuer die Ziffernschrift da ist: Zahlen, DIE IN EINER SPALTE STEHEN MUESSEN. Auf einer Karte steht nichts in einer Spalte. Also Switzer mit Tabellenziffern fuer die Gebuehr, normale Textschrift fuer die Beschriftungen statt gesperrter Versalien, und Mono nur noch fuer das zweistellige Kuerzel — dort ist es ein Code. DER STRICH ist die Antwort auf die Schwaeche der Karten: nebeneinander vergleicht man 26 Zahlen schlecht. Jede Karte traegt ihren Anteil an der Spanne der Erhebung als Strich unter der Zahl, und die Striche WACHSEN beim Einblenden. Damit sieht man die Verteilung ueber das Raster hinweg, ohne eine Zahl zu lesen. Kantone ohne Betrag bekommen einen schraffierten Strich, keinen falsch kurzen. ========================================================================== */ /* Drei Regeln des Hausblatts gelten fuer eine fuenfspaltige Tabelle und gegen Karten. Alle drei hier ausdruecklich zurueckgenommen: */ /* 1. ".fz-rollt .fz-tabelle { min-width: 46rem }" — auf dem Telefon ragte der Inhalt damit 360 Pixel ueber den Rand. */ .fa-karten .fz-tabelle { min-width: 0; } /* 2. ".rk-liste .woher { display: none }" unter 860 Pixeln — richtig, wenn eine Spalte geopfert werden muss; falsch hier, denn das Amt mit seinem Formular ist der Link, wegen dem jemand die Liste ueberhaupt liest. */ .fa-karten .woher { display: block; } /* 3. "#fa-liste th, #fa-liste td { padding-right: 24px }" — eine ID, und die schlaegt jede Klassenregel. In einer Karte schob sie den Inhalt ueber den rechten Rand (gemessen: 393 statt 375). */ .fa-karten #fa-liste th, .fa-karten #fa-liste td { padding-right: 0; padding-left: 0; } .fa-karten { overflow: visible; } .fa-karten .fz-tabelle { display: block; width: 100%; border: 0; } /* Die Spaltenkoepfe stehen als data-label in den Zellen; unsichtbar-aber-im- Fluss schoben ihre Breiten das Dokument auf dem Telefon um 210 Pixel auf. */ .fa-karten thead { display: none; } .fa-karten tbody { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); } .fa-karten tbody tr { display: grid; gap: 0; padding: var(--s5); background: var(--paper-1); border: 1px solid var(--paper-line); border-radius: 14px; transition: border-color .16s ease, box-shadow .16s ease, transform .16s var(--mo-kurve); } .fa-karten tbody tr:hover { border-color: var(--paper-line-2); box-shadow: 0 6px 22px rgba(12, 23, 84, .08); transform: translateY(-2px); } /* Kopf der Karte: Name links, Kuerzel als kleiner Code rechts. */ .fa-karten tbody th { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 0 0 var(--s4); text-align: left; border: 0; font-size: var(--t-body); font-weight: var(--w-mid); line-height: 1.25; color: var(--charcoal); } .fa-karten .fa-kt { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--stone); border: 1px solid var(--paper-line-2); border-radius: 4px; padding: .15em .4em; } /* Die Gebuehr. td.betrag im Selektor, nicht nur td: ".rk-liste .betrag" waere sonst spezifischer und setzte die Schrift auf Mono zurueck. */ .fa-karten tbody td.betrag:first-of-type { display: block; padding: 0; border: 0; font-family: var(--sans); font-weight: var(--w-mid); font-size: 1.75rem; line-height: 1.05; letter-spacing: -.03em; color: var(--charcoal); font-variant-numeric: tabular-nums; } .fa-karten tr.ist-offen td.betrag:first-of-type { font-size: var(--t-body); font-weight: 400; color: var(--stone); line-height: 1.35; } .fa-karten .fa-bar { display: block; height: 3px; margin: var(--s3) 0 0; border-radius: 2px; background: var(--ink); opacity: .22; transform-origin: left; transform: scaleX(calc(.05 + .95 * var(--anteil, 0))); } .fa-karten tr:hover .fa-bar { opacity: .4; } .fa-karten tr.ist-offen .fa-bar { opacity: 1; transform: none; background: repeating-linear-gradient(45deg, var(--paper-line-2) 0 2px, transparent 2px 5px); } /* Das Kleingedruckte: normale Textschrift, keine gesperrten Versalien. */ .fa-karten tbody td, .fa-karten tbody td.betrag { display: block; padding: 0; border: 0; font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: var(--t-body-s); line-height: 1.5; color: var(--stone); } .fa-karten td:not(:first-of-type) { margin-top: var(--s3); } .fa-karten td:not(:first-of-type)::before { content: attr(data-label) ": "; color: var(--stone); opacity: .7; } .fa-karten td.woher { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--paper-line); } .fa-karten td.woher::before { display: block; margin-bottom: 1px; font-size: var(--t-caption); } /* EINBLENDEN: die Karten steigen auf, die Striche wachsen — in Rasterfolge. Der fertige Zustand ist der Grundzustand; ohne Bewegungswunsch laeuft nichts und es fehlt nichts. */ @media (prefers-reduced-motion: no-preference) { .fa-karten tbody tr { animation: kt-auf .5s var(--mo-kurve) backwards; animation-delay: calc(var(--i, 0) * 28ms); } .fa-karten .fa-bar { animation: kt-bar .7s var(--mo-kurve) backwards; animation-delay: calc(var(--i, 0) * 28ms + 160ms); } } @keyframes kt-auf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes kt-bar { from { transform: scaleX(0); } } /* In einer Tabelle mit display:block erbt die Breite der ersten Spalte und bricht in sieben Zeilen um. */ .fa-karten caption { display: block; width: 100%; margin: 0 0 var(--s5); font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--stone); line-height: 1.6; } /* ========================================================================== /fuehrerausweis-verloren/ — die Schale ========================================================================== Dima am 18.09.2026, mit einem Bild vom unteren Seitendrittel: "there is lots of free place on right and design looks horrible". Nachgemessen auf 1440 Pixeln, und er hatte auf den Pixel recht: .art-grid 1392 breit grid-template-columns 268px 788px = 1056 belegt, 336 leer ein Absatz 590 breit, beginnt bei x=388 also: 978 bis 1416 = 438 Pixel Nichts — fast ein Drittel der Seite, und das ueber 14'425 Pixel Hoehe. Zwei Fehler steckten darin. Erstens war die Seite nicht zentriert, sondern linksbuendig in voller Fensterbreite: das Inhaltsverzeichnis klebte am linken Rand, der Text daneben, rechts nichts. Zweitens hatte die rechte Haelfte keine Aufgabe. Beides ist jetzt behoben, und zwar nicht mit Fuellmaterial: 1. DIE SEITE IST ZENTRIERT UND SO BREIT WIE IHR INHALT. 44rem Lesespalte plus 20rem Randspalte plus Fuge — zusammen 67rem. Was uebrig bleibt, ist Rand und nicht Leere. Mercury macht genau das: eine Spalte auf Lesebreite, viel Luft aussen, nichts am Rand geparkt. 2. DIE RANDSPALTE TRAEGT DEN ZUSTAND. Wer oben seinen Kanton waehlt und dann dreitausend Pixel weiterliest, hat den Betrag laengst vergessen. Die Merkkarte klebt mit und sagt ihn weiter — plus Dauer, Amt und den Knopf zum Formular. Das ist OpenSeas dritte Spalte, auf eine Frage angewendet, die diese Seite wirklich hat. ========================================================================== */ .fa-schale { display: grid; gap: var(--s12); grid-template-columns: minmax(0, 44rem) minmax(0, 20rem); justify-content: center; margin: var(--s12) auto 0; } /* Kopf und Saeulen laufen ueber die volle Schalenbreite und bleiben mit ihr zentriert — sonst stuende die Ueberschrift woanders als der Text. */ /* Alles, was zur Seite gehoert, auf dieselbe Breite und dieselbe Mitte — auch Brotkrumen und Hausabschluss. Ohne sie standen die beiden 40 Pixel weiter aussen als der Text darueber, und eine Seite, deren Kanten nicht fluchten, sieht schief aus, ohne dass man sagen kann warum. */ .fa-seite .fa-kopf, .fa-seite .sa, .fa-seite .fa-schale, .fa-seite #weiterlesen { max-width: 67rem; margin-inline: auto; } /* Die Brotkrumen sind ein