/* ==========================================================================
   wp.css — die WordPress-Seiten im neuen Design
   DriveLab GmbH, 09.09.2026.

   WARUM DIESE HAELFTE ANDERS BEHANDELT WIRD ALS DAS VERGLEICHSPORTAL:

   Beim Portal liess sich Bootstrap abziehen, weil Bootstrap ein FREMDES
   Rahmenwerk ist — die Vorlagen benutzen es, gehoeren ihm aber nicht. Das
   WordPress-Theme hat kein Rahmenwerk. Seine 83 Klassen heissen
   about_us_container, slider_card, testimonials_card, card_dropdown_item:
   das ist der Aufbau dieser Seiten selbst, in 38 KB eigenem Stylesheet.
   Zoege man es ab, blieben 39 Seiten ohne Gestalt.

   Darum bleibt styles/style.css liegen, und diese Datei legt sich darueber.
   Sie aendert, was die Seiten aus der Ferne erkennbar macht — Schrift,
   Farben, Knoepfe, Radien, Raender — und laesst die Anordnung, wie sie ist.
   Ein voller Neubau der 15 Vorlagen ist eine eigene Arbeit; diese Datei ist
   der Schritt, der die beiden Haelften der Website heute zusammenbringt.

   Die Werte kommen aus identity.css, das direkt davor geladen wird. Die
   Dateien sind dieselben wie auf dem Vergleichsportal: eine Aenderung an
   identity.css wirkt auf beiden Haelften.
   ========================================================================== */

/* ---------- Schrift. Das Theme setzt Roboto mit !important; darum hier
     ebenfalls, sonst gewinnt es. ------------------------------------------- */
body, button, input, select, textarea,
.main_body, .index_main, .article_container, .about_us_main, .main_guide {
  font-family: var(--sans) !important;
}
/* color: inherit ist hier keine Kosmetik. styles/style.css setzt
   h1..h6 { color: #3b3b3b } — eine feste Farbe, die staerker ist als jede
   Vererbung. Auf der dunklen Startseite stand damit jede Ueberschrift in
   Fast-Schwarz auf Fast-Schwarz: "Alle Preise nebeneinander" war #3b3b3b auf
   #14141b, gemessen am 12.09.2026. Die Klassen des Designs (.h1-type,
   .display-type) setzen absichtlich KEINE Farbe, damit dieselbe Ueberschrift
   auf Papier dunkel und auf Nacht hell sein kann — dafuer muss sie erben
   duerfen. */
h1, h2, h3, h4, h5, h6 { font-family: var(--sans); letter-spacing: .015em; color: inherit; }

/* ---------- Kopf- und Fusszeile aus dem Weg raeumen ----------------------
   styles/style.css gestaltet die ELEMENTE, nicht Klassen:

       nav    { position: fixed; top: 0; width: 100%; background: #000;
                z-index: 8; max-width: 100vw !important; }
       header { height: 50px; background: linear-gradient(...); }

   Damit wurde JEDES <nav> des neuen Designs zu einem schwarzen, fixierten
   Balken — auch die Linkleiste INNERHALB der Kopfzeile. Gemessen am
   12.09.2026: die Wortmarke stand mitten im Bild, die Menuepunkte klebten
   oben links uebereinander, und die Kopfzeile war 1100 Pixel hoch.

   Hier wird beides in den normalen Fluss zurueckgesetzt. Die Klassen des
   Designs (.nav-float, .site-head, .foot) sind staerker als ein
   Elementselektor und setzen danach, was sie brauchen. */
header, footer {
  height: auto; min-height: 0; background: none;
}
/* Dieselbe Falle ein drittes Mal: styles/style.css hat
       main { max-width: 800px; width: 80%; margin: 0 auto; }
   und  .main_body main { width: 90% }
   — geschrieben fuer Seiten, die aus einer Textspalte bestanden. Im neuen
   Design ist <main> der ganze Inhalt, und der Held soll die volle Breite
   haben. Am 12.09.2026 stand er in einem 1120 Pixel breiten Kasten mit
   dunklen Raendern links und rechts. Die Breite bestimmt .wrap, wie im
   Entwurf. */
main, .main_body main {
  width: auto; max-width: none; margin: 0;
}
/* DIESELBE FALLE EIN VIERTES MAL, und diesmal die teuerste: styles/style.css
   hat
       body > * { max-width: 100vw !important; }
   — geschrieben, damit auf dem Telefon nichts ueberlaeuft. <main> ist ein
   direktes Kind von <body>, also erbt jede Seite, deren <main> die Klasse
   .wrap traegt, ein max-width von 100vw. Und !important auf (0,0,1) schlaegt
   .wrap auf (0,1,0): die Breite von 1200 Pixeln kam nie an.

   Gemessen am 18.09.2026 bei 1920 Pixeln, auf der Livesite: <main class="wrap">
   war 1920 statt 1200 breit. Die Kopfzeile darueber hat ihren eigenen .wrap
   und stand mittig — der Inhalt darunter klebte am linken Rand, mit 760
   Pixeln Leere rechts. Dima am 18.09.2026: "it looks disproportionate because
   there is a lot of empty space on the right side".

   Betroffen sind alle Seiten, deren <main> ein .wrap ist: /bussenrechner/,
   /fuehrerschein-kosten-rechner/, /fahrzeugausweis/, /fuehrerausweis-verloren/
   und /blaue-zone-parkieren/. Die Artikelseiten haben .article_container und
   waren nie betroffen; darum ist es so lange niemandem aufgefallen.

   body > main.wrap ist (0,1,2) gegen (0,0,1) — bei gleichem !important
   gewinnt die hoehere Spezifitaet. */
body > main.wrap      { max-width: var(--page) !important; margin-inline: auto !important; }
body > main.wrap-wide { max-width: var(--page-wide) !important; margin-inline: auto !important; }
/* Und die staerkere Fassung derselben Falle: styles/style.css hat
       .main_body header { height: calc(var(--vh,1vh)*100); display: flex;
                           align-items: center; justify-content: center; }
   — geschrieben fuer den alten Helden, der ein <header> WAR. Im neuen Design
   ist <header> die Kopfzeile, und sie wurde damit bildschirmhoch und ihr
   Inhalt senkrecht zentriert: die Wortmarke stand auf halber Hoehe im Bild.
   Gleiche Spezifitaet, spaetere Stelle — also gewinnt diese hier. */
.main_body header {
  height: auto; display: block;
  align-items: initial; justify-content: initial;
}
nav {
  /* !important ist hier nicht Bequemlichkeit: styles/style.css setzt in einem
     Medienblock
         @media only screen and (min-width: 1050px) {
           nav { background-color: #000 !important; position: fixed; } }
     Ohne !important bliebe die Linkleiste der Kopfzeile ein schwarzer Kasten
     mitten im Bild — genau so sah es am 12.09.2026 aus. */
  position: static !important; top: auto; left: auto; right: auto;
  width: auto; height: auto; z-index: auto;
  background-color: transparent !important;
  max-width: none !important;
}

/* ---------- Breiten, die das alte Stylesheet festnagelt -----------------
   styles/style.css begrenzt ganze Seiten auf eine feste Breite:

       .main_guide         { max-width: 600px !important; }
       .impressum_container{ max-width: 800px; }
       .article_container  { … }

   Das waren Seiten mit einer Textspalte. Im neuen Design tragen dieselben
   Seiten ein Raster (dreizehn Karten, Kostenkasten), und 600 Pixel pressen es
   in eine Spalte, in der die Ueberschriften abgeschnitten werden. Die Breite
   bestimmt jetzt .wrap, wie im Entwurf. */
.main_guide, .impressum_container, .about_us_main, .article_container {
  max-width: none !important;
}

/* Dieselbe Falle noch einmal, und diesmal nicht ueber die Breite, sondern
   ueber die Anordnung: styles/style.css macht aus <main> eine Flexspalte

       .about_us_main { display: flex; flex-direction: column;
                        justify-content: center; top: 50px; width: 90%; }

   Gemessen am 12.09.2026 auf der Kontaktseite: der Kopf (.wrap.kopf) war
   darin 525 statt 1200 Pixel breit und stand eingerueckt in der Seite,
   waehrend die Karten darunter richtig sassen. Der Entwurf hat an dieser
   Stelle ein ganz gewoehnliches <main> — also bekommt es das auch. */
/* ACHTUNG fuer alles, was hier folgt: ".main_body" ist KEIN Schluessel fuer
   "neues Design". Die Klasse steht nur auf der Startseite, weil index.php sie
   an body_class() mitgibt; jede andere Seite hat sie nicht. Am 12.09.2026
   deswegen zweimal daneben gegriffen — die Regeln galten live auf genau einer
   Seite, waehrend die Vorschau sie ueberall zeigte (deren body_class-Ersatz
   setzte main_body auf jede Seite). Schluessel sind die Klassen auf <main>:
   article_container, about_us_main, main_guide, impressum_container,
   index_main. Die stehen nur in den umgebauten Vorlagen. */

/* ---------- Die rote Verweisfarbe des alten Stylesheets ------------------
   styles/style.css faerbt jeden Verweis im Artikel rot, und zwar so:

       .article_container p > a,
       .article_container strong > a,
       .article_container ul > li > a { text-decoration: underline;
                                        color: #f02849 !important; }

   Das !important schlaegt jede Regel des neuen Designs. Gemessen am
   12.09.2026 auf /fuehrerschein-schweiz-kosten/: JEDER Verweis auf jeder der
   dreiunddreissig Ratgeberseiten stand in #f02849 statt in Kobaltblau — auch
   die Fragen im Inhaltsverzeichnis, die im Entwurf graphitgrau sind.

   Eine Regel ohne !important kann dagegen nichts ausrichten, egal wie genau
   sie ist. Darum hier dieselben drei Formen noch einmal, mit den Farben, die
   der Entwurf dafuer vorsieht (04-ratgeber.html: .art-body a:not(.btn) ist
   kobaltblau mit Linie, .toc a ist graphit ohne Linie). Alles uebrige erbt
   die Farbe seines Bausteins — Knoepfe, Karten und Kacheln bringen sie
   selbst mit. */
main.article_container :is(p, strong, li) > a:not([class*="btn"]):not(.skip) {
  /* --link-farbe setzt thema.css auf demselben Element: kobaltblau auf
     Papier, Eis auf Nacht. Hier steht darum keine zweite Farbe, nur
     dieselbe noch einmal — laut genug, um das rote !important zu schlagen. */
  color: var(--link-farbe, inherit) !important;
}
/* Der Eintrag, bei dem man gerade steht, bleibt der einzige hervorgehobene
   im Inhaltsverzeichnis — auch das muss laut sein, sonst gewinnt die Zeile
   darueber. */
main.article_container .toc li > a.is-current {
  /* --link-farbe, nicht --cobalt: Kobalt auf Papier sind 4,44:1 und damit
     knapp unter der Grenze (gemessen 21.09.2026). Die Linkfarbe liegt ueber
     7:1 und sieht gleich aus. Dieselbe Korrektur wie in thema.css. */
  color: var(--link-farbe, var(--cobalt)) !important;
}

main.about_us_main,
main.article_container,
main.main_guide,
main.impressum_container,
main.index_main {
  display: block; position: static; top: auto; left: auto;
  justify-content: normal; align-items: normal;
}

/* .wege heisst in zwei Entwuerfen zwei verschiedene Dinge: auf 10-ueber-uns
   ist es eine LISTE von Wegen (drei Zeilen mit Pfeil), auf 11-kontakt ein
   RASTER aus drei Karten (Telefon, E-Mail, WhatsApp). Der Aufbau darunter
   entscheidet, welche gemeint ist — beim Kontakt steckt sie in .wege-grid.
   Ohne diese Zeile standen Telefonnummer und E-Mail einen Buchstaben pro
   Zeile untereinander; gemessen am 12.09.2026. */
.wege-grid .wege {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5);
  list-style: none; margin: 0; padding: 0;
}
@media (max-width: 900px) {
  .wege-grid .wege { grid-template-columns: minmax(0, 1fr); }
}
/* Und eine Ebene tiefer dieselbe Verwechslung: ".wege a" ist auf der
   Ueber-uns-Seite eine Zeile aus Sinnbild, Text und Pfeil (drei Spalten). Auf
   der Kontaktseite ist es schlicht die Telefonnummer. Ohne diese Zeile landet
   sie in einer 24 Pixel breiten Spalte und bricht nach jedem Zeichen um. */
.wege-grid .wege a {
  display: block; grid-template-columns: none; gap: 0; padding: 0;
}

/* Die Schiene der Uebersichtsseite ist seit dem 14.09.2026 aus Knoepfen
   gebaut statt aus Ankern: ein Punkt zeigt jetzt den Namen des Schritts an,
   statt die Seite nach unten zu schieben (Dima am 14.09.2026 — die Leiste ist
   eine Uebersicht, kein Sprungbrett). Der Entwurf 08-weg.html beschreibt .sp
   aber als Anker und setzt darum nichts gegen die Voreinstellungen eines
   <button>: Rand, Innenabstand, Flaeche und Zeiger. Die Startseite fuehrt
   dieselben vier Angaben laengst, weil ihre Schiene schon immer aus Knoepfen
   bestand; hier stehen sie fuer die helle Fassung. */
.schiene .sp { padding: 0; background: none; border: 0; cursor: pointer; }

/* DER MENUEKNOPF AUF DUNKLEM GRUND — 15.09.2026.
   Dima: "on the desktop version of the landing page the burger-menu button is
   dark against a dark background".
   Gemessen auf der Startseite bei 1040px Fensterbreite: die drei Striche
   standen in --charcoal (23,20,23) auf der Nachtleiste (23,23,33) — 1.03:1,
   also nicht vorhanden. Der Rand war hell, darum sah man nur ein leeres Oval.

   Woher: die Regel im @media (max-width: 1080px) kommt aus einem PAPIER-
   Entwurf, wo Kohle auf Weiss richtig ist, und wurde unbeschraenkt erzeugt.
   Dass es "Desktop" betrifft, liegt am Schwellenwert: 1080px ist ein ganz
   gewoehnliches Laptopfenster, keine Telefonbreite.

   Zwei Klassen statt einer, damit die erzeugte Regel nicht gewinnt — und an
   den Wertnamen statt an festen Farben, damit der Hell-Dunkel-Schalter
   mitdreht. */
.on-buchen .nav-toggle, .on-night .nav-toggle, .on-data .nav-toggle {
  color: var(--ivory);
  border-color: var(--night-line-2);
  /* Und kein Innenpolster. Dieselbe Papierregel macht aus dem Knopf eine
     Pille mit Wort daneben ("padding: var(--s3) var(--s4)", dazu ein gap).
     Auf der Startseite steht in dem Knopf aber kein Wort, und weil er fest
     44px breit ist, blieben von 44 nach Abzug von zweimal 16px Polster und
     zwei Raendern genau 10px fuer die Striche uebrig: der mittlere war 10px
     lang, die beiden aeusseren 16 — am 15.09.2026 in Dimas Bild zu sehen und
     danach nachgemessen. Ohne Polster stehen alle drei bei 16. */
  padding: 0;
  gap: 0;
}

/* .sec-head bedeutet im Entwurf nicht ueberall dasselbe: auf der Startseite
   ist es eine Zeile mit Knopf am rechten Rand, auf der Wissensseite ein
   gestapelter Block ueber der Kartenreihe (08-weg.html). Beide Fassungen
   stehen im Entwurf; hier bekommt die zweite ihren Geltungsbereich. */
.weg .sec-head, .main_guide .sec-head {
  display: block; margin-bottom: var(--s8); max-width: 60ch;
}

/* ---------- Grund und Text ---------------------------------------------- */
body { background: var(--night-0); color: var(--ivory); }

/* .main_body stand hier bis zum 12.09.2026 mit. Es ist aber die Klasse des
   body SELBST — "color: inherit" liess ihn also von <html> erben, und das ist
   das Schwarz des Browsers. Die Zeile darueber wurde damit von der Zeile
   darunter aufgehoben. Auf weissem Grund fiel es nicht auf; auf der dunklen
   Startseite ist es der Unterschied zwischen lesbar und unsichtbar. */
.index_main, .main_guide, .about_us_main, .article_container { color: inherit; }

/* Das Theme schreibt viele feste Farben. Die haeufigsten werden hier auf die
   Werte des Systems gezogen; alles Uebrige erbt. */
.entry_text, .answer_text, .under_about_us_text_container, .user_info { color: var(--ash); }
.card_header_text, .slider_card_header_text, .user_name, .advantages_heading,
.faq_title_container, .question { color: var(--ivory); }
.user_location, .card_hours, .rights { color: var(--ash-dim); }

/* ---------- Knoepfe. #8089f7 (Flieder) und #3175c6 (Blau) waren zwei
     Handlungsfarben nebeneinander; im System gibt es eine. --------------- */
/* .btn steht hier seit dem 14.09.2026 NICHT mehr mit drin, und das ist der
   eigentliche Punkt der Regel: gemeint waren immer nur die alten Klassen des
   Themes. ".btn:not(.btn-outline):not(.btn-ghost)" hat aber jeden Knopf des
   neuen Designs mitgenommen und ihm mit !important eine runde Ecke
   aufgezwungen — der Suchen-Knopf der Startseite verlor dadurch seine
   eckige linke Seite und sass nicht mehr am Suchfeld, sondern daneben
   (Dimas Bild vom 14.09.2026). Seine Farbe braucht er von hier ohnehin
   nicht: .btn-primary in identity.css setzt dieselbe.
   Geprueft: jedes class="btn ..." im Theme traegt eine Variante
   (-primary, -ghost, -outline), keines haengt an dieser Regel. */
.button_costum, .slider_button, .view_more_button, .todrive_vergleich_cta a {
  font-family: var(--sans); font-weight: var(--w-mid);
  border-radius: var(--r-pill) !important;
  background: var(--cobalt) !important;
  color: #fff !important;
  border: 0 !important;
  padding: var(--s4) var(--s8);
  transition: background-color var(--mo-kurz) var(--mo-kurve);
}
.button_costum:hover, .slider_button:hover, .view_more_button:hover {
  background: color-mix(in srgb, var(--cobalt) 86%, #000) !important;
}

/* ---------- Kaesten. Weisse Karten auf weissem Grund hatten keinen Rand;
     im System traegt eine Karte eine Flaeche, keine Linie. --------------- */
.card, .slider_card, .testimonials_card, .card_conatiner, .card_content {
  background: var(--night-2) !important;
  border-radius: var(--r-night) !important;
  box-shadow: var(--ring) !important;
  border: 0 !important;
}
.card_image_container img, .slider_card_image_container img, .about_us_image_container img {
  border-radius: var(--r-paper);
}
.card_price { font-family: var(--mono); color: var(--ivory); }

/* ---------- Kopf- und Fusszeile des Themes ------------------------------- */
/*
 * --ink statt --night-1. Der Grund, am 12.09.2026 an der Livesite gemessen:
 *
 * WordPress setzt immer html.thema-hell (todrive_html_klasse), und thema.css
 * definiert dort --night-1 auf #ffffff um. Der Kopf wurde also WEISS. Die
 * Held-Ueberschrift des Themes traegt aber ein inline color:#fff direkt im
 * HTML - weiss auf weiss, die Startseite sah leer aus.
 *
 * --ink (#0c1754) bleibt in beiden Zustaenden dunkel. Damit stimmen auch die
 * Navigationslinks (--ash) und die Hamburger-Striche (--ivory) wieder, die
 * alle fuer einen dunklen Kopf gedacht sind.
 *
 * .main_header steht hier ABSICHTLICH NICHT - diese Klasse nie einfaerben.
 * Am 12.09.2026 an der Livesite gemessen, nachdem die Startseite eine leere
 * blaue Flaeche war: auf der Startseite IST .main_header der Held (1200 px
 * hoch), und er traegt zwei Dinge des Themes, die eine Hintergrundangabe
 * beide zerstoert:
 *   1. Das Video - auf dem Handy poster.WebP - liegt als position:absolute
 *      mit z-index:-1 darin. .main_header bildet keinen Stapelkontext, der
 *      eigene Hintergrund malt also DARUEBER: das Video verschwindet.
 *   2. Das Theme setzt selbst background-image: linear-gradient(#000 0%,
 *      transparent 70%). Genau dieser Verlauf macht die weisse
 *      Held-Ueberschrift ueber dem Video lesbar; die Kurzform "background:"
 *      setzt ihn stillschweigend mit zurueck.
 * Auf den Unterseiten ist .main_header nur ein 24-50 px hoher Platzhalter,
 * die echte Leiste dort ist .main_nav_backgorund.
 */
.main_nav_backgorund { background: var(--ink); border-bottom: 1px solid var(--night-line); }
.main_nav a, .link_menu a, .headerlinks a { color: var(--ash); }
.main_nav a:hover, .link_menu a:hover { color: var(--ivory); }
.side_navigation, .side_navigation_background, .drop_up_container { background: var(--night-2); }
.hamburger_menu_line1, .hamburger_menu_line2, .hamburger_menu_line3 { background: var(--ivory); }

/* ---------- Aufklapper (Fragen und Antworten) ---------------------------- */
.accordion, .inner_accordion, .inner_faq_container {
  background: var(--night-2); border-radius: var(--r-paper); border: 0;
}
.question { font-weight: var(--w-mid); }

/* ---------- Bilder und Trennlinien --------------------------------------- */
.wp-block-image img, .is-style-rounded img { border-radius: var(--r-paper); }
hr, .first_row, .second_row { border-color: var(--night-line); }

/* ---------- Sterne: Gold wie ueberall im System -------------------------- */
.stars_container, .stars_container i, .stars_container svg { color: var(--gold); }

/* ==========================================================================
   DIE STARTSEITE — der Kopf
   DriveLab GmbH, 12.09.2026.

   Dima, 12.09.2026: "i see the old version". Er hatte recht, und zwar genau
   hier: das Vergleichsportal unter /ch/ ist umgebaut, die WordPress-Haelfte
   war nur umgefaerbt. Wer todrive.ch aufruft, landet auf der WordPress-
   Startseite — also sieht die ganze Website alt aus, obwohl die Haelfte es
   nicht ist.

   Umgebaut wird der Kopf: Ueberschrift, Untertext, die beiden Knoepfe und
   NEU die Postleitzahl-Suche. Der Rest der Seite behaelt seinen Aufbau.

   Das Video bleibt unveraendert. Es ist 23,2 MB gross und wird seit dem
   01.09.2026 nur auf breiten Fenstern ohne Datensparmodus nachgeladen; das
   Standbild traegt alle anderen. Daran wird kein Zeichen geaendert.
   ========================================================================== */

.header_content { width: min(1180px, 88%); gap: 0; }

.hero-h1 {
  font-family: var(--sans); font-size: clamp(34px, 5.2vw, 62px);
  font-weight: var(--w-mid); line-height: 1.08; letter-spacing: .01em;
  color: #fff; margin: 0 0 var(--s5); text-align: left; text-wrap: balance;
}
.hero-h1 em { font-style: italic; font-weight: 400; }
.hero-lede {
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: rgba(255,255,255,.82);
  max-width: 54ch; margin: 0 0 var(--s8); text-align: left;
}

/* Die beiden Knoepfe: Umriss auf dem Bild, wie im Entwurf. */
/* Das Theme setzt ab 1050px width:50% auf .button_area und noch einmal auf
   jedes a darin — zwei Knoepfe waeren dann ein Viertel des Kopfes breit und
   stuenden untereinander. Hier zaehlt die Beschriftung, nicht ein Raster. */
.header_content .button_area,
.header_content .button_area a {
  width: auto !important; margin: 0 !important;
}
.header_content .button_area {
  display: flex; flex-direction: row; gap: var(--s4);
  align-items: center; justify-content: flex-start; flex-wrap: wrap;
  margin-bottom: var(--s6) !important;
}
.header_content .button_area a { display: inline-flex !important; }
.hero-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: var(--t-body); font-weight: var(--w-mid);
  padding: var(--s4) var(--s8); border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.55); color: #fff; background: transparent;
  text-decoration: none; transition: background-color .16s ease, border-color .16s ease;
  white-space: nowrap;
}
.hero-btn:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* --- Die Postleitzahl-Suche. Sie ist der eigentliche Zweck des Kopfes:
   bisher fuehrten von hier zwei Links weg, jetzt beginnt die Suche hier. --- */
.hero-suche { width: 100%; max-width: 640px; margin: var(--s10) 0 0; }
.hero-suche-form { display: flex; gap: var(--s3); flex-wrap: wrap; }
.hero-suche-feld {
  flex: 1 1 260px; min-width: 0;
  font-family: var(--sans); font-size: var(--t-body);
  padding: var(--s4) var(--s6); border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.35);
  color: #fff; outline: none; font-variant-numeric: tabular-nums;
}
.hero-suche-feld::placeholder { color: rgba(255,255,255,.6); }
.hero-suche-feld:focus { border-color: #fff; background: rgba(0,0,0,.5); }
.hero-suche-knopf {
  flex: none; font-family: var(--sans); font-size: var(--t-body); font-weight: var(--w-mid);
  padding: var(--s4) var(--s8); border: 0; border-radius: var(--r-pill);
  background: var(--cobalt); color: #fff; cursor: pointer;
  transition: background-color .16s ease;
}
.hero-suche-knopf:hover { background: color-mix(in srgb, var(--cobalt) 86%, #000); }

/* Auto oder Motorrad: sichtbar ein Segment, darunter ein echter Radioknopf —
   damit die Wahl ohne eigenes JavaScript mitgeschickt wird. */
.hero-kat { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); flex-wrap: wrap; }
.hero-kat-wort { font-size: var(--t-caption); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.hero-kat label {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 7px 15px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.35); color: rgba(255,255,255,.85);
  font-size: var(--t-body-s); cursor: pointer;
}
.hero-kat label:has(input:checked) { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; }
.hero-kat label:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.hero-kat input { position: absolute; opacity: 0; width: 0; height: 0; }

.hero-orte {
  margin: var(--s8) 0 0; font-size: var(--t-body-s); color: rgba(255,255,255,.55);
  letter-spacing: .02em;
}

@media (max-width: 1049px) {
  .hero-h1, .hero-lede { text-align: center; }
  .hero-lede { margin-left: auto; margin-right: auto; }
  .header_content .button_area { justify-content: center; }
  .hero-kat, .hero-orte { justify-content: center; text-align: center; }
  .hero-suche { margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   DIE STARTSEITE — die vier Bloecke unter dem Kopf
   DriveLab GmbH, 12.09.2026.

   Eins zu eins aus docs/design/01-startseite.html uebernommen, nicht neu
   erfunden: Abschnittskopf, die 13 Schritte, "Spare Zeit, Geld und Nerven",
   die Kennzahlen. Die Bausteine darunter (.card-night, .grid, .badge,
   .eyebrow, .gl) kommen aus identity.css und bausteine.css, die WordPress
   ohnehin schon laedt.
   ========================================================================== */

.trust { border-bottom: 1px solid var(--night-line); background: var(--night-1); }
.trust-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-left: 1px solid var(--night-line);
}
.trust-tile { padding: var(--s10) var(--s6); border-right: 1px solid var(--night-line); }
.trust-num { font-size: var(--t-h1); font-weight: var(--w-mid); line-height: 1; color: var(--ivory); display: block; overflow-wrap: anywhere; }
.trust-num.is-var { font-size: var(--t-h3); color: var(--ash-dim); }
.trust-label { display: block; margin-top: var(--s4); font-size: var(--t-body-s); font-weight: var(--w-mid); color: var(--ivory); }
.trust-sub { display: block; margin-top: var(--s1); font-size: var(--t-caption); line-height: 1.45; color: var(--ash-dim); }
.trust-note { padding: var(--s5) var(--s6) var(--s10); margin: 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s10); margin-bottom: var(--s12); }
.sec-head .lede { margin-top: var(--s4); }
.sec-head-text { max-width: 62ch; }
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.step-card { display: flex; flex-direction: column; padding: var(--s8); }
.step-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s6); }
.step-no {
  width: var(--s12); height: var(--s12); flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--night-3);
  font-size: var(--t-body-s); font-weight: var(--w-mid); color: var(--ivory);
}
.step-count { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ash-dim); margin: var(--s2) 0 0; }
.step-card h3 { margin: 0; min-height: calc(2 * 1.3em); }
.step-card > .badge { align-self: flex-start; margin-top: var(--s3); }
.step-card .step-links { margin-top: auto; padding-top: var(--s6); }
.step-dl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin: var(--s6) 0 0; padding: var(--s5) 0 0; border-top: 1px solid var(--night-line); }
.step-dl dt { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ash-dim); margin: 0 0 var(--s2); }
.step-dl dd { margin: 0; font-size: var(--t-body-l); font-weight: var(--w-mid); color: var(--ivory); }
.step-links { display: flex; flex-wrap: wrap; gap: var(--s5); margin-top: auto; padding-top: var(--s6); }
.step-links a {
  font-size: var(--t-micro); font-weight: var(--w-mid);
  letter-spacing: .1em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s2) 0;
}
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.why-card { display: flex; flex-direction: column; }
.why-fact {
  font-family: var(--sans); font-weight: var(--w-mid);
  font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.03em;
  color: var(--ivory); display: block; margin-bottom: var(--s3);
}
.why-fact .num, .why-fact [data-zaehl] {
  font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.why-fact small { display: block; font-family: var(--sans); font-size: var(--t-body-s); letter-spacing: 0; color: var(--ash-dim); margin-top: var(--s2); }
.why-card h3 { margin: 0 0 var(--s4); }
.why-card p { margin: 0; color: var(--ash); line-height: 1.6; }
.why-more { margin-top: auto; padding-top: var(--s6); font-size: var(--t-body-s); font-weight: var(--w-mid); display: inline-flex; align-items: center; gap: var(--s2); }

@media (max-width: 1080px) {
  .step-grid, .why-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-tile:nth-child(-n+2) { border-bottom: 1px solid var(--night-line); }
}

@media (max-width: 720px) {
  .step-grid, .why-grid, .about, .about-facts { grid-template-columns: 1fr; }
  .step-dl { grid-template-columns: 1fr 1fr; }
  .trust-tile { padding: var(--s6) var(--s5); }
  .sec-head { flex-direction: column; align-items: flex-start; gap: var(--s6); }
  .foot-list a, .foot-bottom a, .step-links a, .why-more, .nav-lang a, .logo {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}

@media (max-width: 420px) {
  .trust-grid { grid-template-columns: minmax(0, 1fr); }
  .trust-tile { border-bottom: 1px solid var(--night-line); }
}
.step-glyph, .why-glyph {
  width: var(--s12); height: var(--s12); flex: none;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--night-3); color: var(--ivory);
}
.why-card .why-glyph { margin-bottom: var(--s6); }

/* --- Ueber todrive.ch: Bild links, Text rechts ---------------------------
   Vorher lag der Text auf einem Farbverlauf ueber dem Bild — lesbar nur,
   solange das Bild dunkel genug ist, und das entscheidet niemand nach. */
.ueber-uns {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s12); align-items: center;
  max-width: var(--page-wide); margin: 0 auto; padding: var(--s18) var(--s6);
}
.ueber-bild img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; border-radius: var(--r-night); display: block; }
.ueber-text h2 { margin: 0 0 var(--s6); }
.ueber-text p { color: var(--ash); line-height: 1.7; margin: 0 0 var(--s5); }

/* --- Die drei Stimmen ---------------------------------------------------- */
.stimmen { max-width: var(--page-wide); margin: 0 auto; padding: 0 var(--s6) var(--s18); }
.stimme .stars { color: var(--gold); font-size: var(--t-body-l); letter-spacing: .1em; margin: 0 0 var(--s3); }
.stimme h3 { margin: 0 0 var(--s4); }
.stimme-text { color: var(--ash); line-height: 1.65; margin: 0 0 var(--s6); flex: 1; }
.stimme-wer { display: flex; align-items: center; gap: var(--s3); margin: 0; }
.stimme-wer img { width: 44px; height: 44px; border-radius: var(--r-pill); object-fit: cover; flex: none; }
.stimme-wer b { display: block; color: var(--ivory); font-weight: var(--w-mid); font-size: var(--t-body-s); }
.stimme-wer small { display: block; color: var(--ash-dim); font-size: var(--t-caption); }
.stimme { display: flex; flex-direction: column; }

/* Die Abschnitte der Startseite brauchen die Seitenbreite des Systems. */
.index_main > .sec-head, .index_main > .step-grid,
.index_main > .advantages_container {
  max-width: var(--page-wide); margin-left: auto; margin-right: auto;
  padding-left: var(--s6); padding-right: var(--s6);
}
.index_main > .sec-head { padding-top: var(--s18); }
.index_main > .step-grid { padding-bottom: var(--s18); }

@media (max-width: 900px) {
  .ueber-uns { grid-template-columns: 1fr; gap: var(--s8); padding: var(--s12) var(--s6); }
}

/* ==========================================================================
   DIE TEXTSEITEN — Ratgeber, Ueber uns, Impressum, Rechtstexte
   DriveLab GmbH, 12.09.2026. Entwuerfe: 04-ratgeber, 10-ueber-uns,
   19-impressum, 21-datenschutz.

   Diese Seiten bestehen aus Text aus dem Redaktionssystem. Umgebaut wird
   darum nicht der Text, sondern was ihn umgibt: eine Ueberschrift, und vor
   allem eine Lesebreite. Vorher lief der Fliesstext ueber die ganze
   Fensterbreite — bei 1400px sind das 180 Zeichen pro Zeile, und das Auge
   findet den Zeilenanfang nicht mehr. 68 Zeichen ist das Mass des Systems.
   ========================================================================== */

.article_container, .about_us_main, .main_guide { width: 100%; max-width: none; }
.article_container .wrap, .about_us_main .wrap, .main_guide .wrap {
  max-width: var(--page); margin: 0 auto; padding: 0 var(--s6);
}
/* Ohne Inhaltsverzeichnis steht der Beitrag allein im zweispaltigen Raster —
   und landete damit in dessen ERSTER Spalte, den 268 Pixeln, die fuer das
   Verzeichnis gedacht sind. Das Verzeichnis erscheint erst ab drei
   Zwischentiteln (article.php); Helenas Bericht hat einen, also fehlte es,
   und der ganze Beitrag stand in einer Spalte, die halb so breit ist wie die
   Lesespalte: Zeilen von 268 statt 535 Pixeln, das Foto ebenso.
   Ist der Beitrag das einzige Kind, nimmt er beide Spalten. Breiter wird er
   dadurch nicht als vorgesehen — ".art-body" ist ohnehin auf 68 Zeichen
   begrenzt, dieselbe Lesebreite wie auf jeder anderen Ratgeberseite. */
.art-grid > .art-body:only-child { grid-column: 1 / -1; }

/* Die Zeile darueber hat ZWEI Klassen und schlug damit jede Regel, die nur
   ".art-head" heisst — auch deren Abstand nach oben. Der Seitenkopf sass
   dadurch buendig unter der Kopfzeile: auf Ueber uns lag die Karte "Drei
   Wege" direkt an den Knoepfen, und ihr Verlaufskeil (18px ueber der Karte)
   schob sich darueber (Dimas Bild vom 14.09.2026).
   Der Entwurf sagt ".art-head { padding: var(--s10) 0 var(--s12) }". Genau
   dieser senkrechte Teil steht hier noch einmal, gleich spezifisch und
   spaeter — der seitliche Abstand bleibt, wo er ist, denn den braucht die
   Seite auf 390px am Bildschirmrand. */
.article_container .art-head, .about_us_main .art-head, .main_guide .art-head,
.article_container .wrap.kopf, .about_us_main .wrap.kopf, .main_guide .wrap.kopf {
  padding-block: var(--s10) var(--s12);
}
/* ".wrap.kopf" steht mit dabei, weil Kontakt und Ratgeber ihren Seitenkopf so
   nennen und 11-kontakt.html dort dasselbe Mass setzt: derselbe Fehler,
   dieselbe Zeile. Beide Klassen zusammen, damit die anderen Bedeutungen von
   .kopf nichts abbekommen — die Textspalte auf "Vorteile" und das dunkle
   Band der Fehlerseite tragen kein .wrap. */
.art-kopf { padding: var(--s14) var(--s6) var(--s8); }
.art-kopf h1 { margin: 0; }
.art-kopf .eyebrow { color: var(--gold); }

/* Der Redaktionstext selbst. .prosa steht in seite.css; hier nur, was
   WordPress zusaetzlich einstreut. */
.article_container .prosa, .about_us_main .prosa { max-width: 68ch; padding-bottom: var(--s14); }
.prosa img, .prosa figure { border-radius: var(--r-paper); height: auto; }
.prosa figure { margin: var(--s8) 0; }
.prosa figcaption { font-size: var(--t-body-s); color: var(--ash-dim); margin-top: var(--s2); }
.prosa table { margin: var(--s8) 0; }
.prosa .wp-block-image { margin: var(--s8) 0; }

/* Der Weg in den Vergleich, am Fuss jeder Ratgeberseite. Vorher ein grauer
   Kasten (#F5F5F5) mit fester Farbe — jetzt die Karte des Systems. */
.trichter { padding: var(--s12); margin: var(--s8) 0 var(--s18); }
.trichter .eyebrow { color: var(--gold); }
.trichter h2 { margin: 0 0 var(--s5); }
.trichter-lede { color: var(--ash); font-size: var(--t-body-l); line-height: 1.6; max-width: 54ch; margin: 0 0 var(--s8); }
.trichter-tat { margin: 0 0 var(--s10); }
.trichter-orte-kopf {
  font-size: var(--t-caption); text-transform: uppercase; letter-spacing: .12em;
  color: var(--ash-dim); margin: 0 0 var(--s3);
}
.trichter-orte { margin: 0; line-height: 2.1; font-size: var(--t-body-s); }
.trichter-orte a { color: var(--ice); text-decoration: none; }
.trichter-orte a:hover { text-decoration: underline; }

/* Die aufklappbare Schrittliste am Seitenrand. Sie bleibt, was sie ist —
   dropup.js schaltet sie —, bekommt aber die Flaeche des Systems. */
.drop_up_side_navigation {
  background: var(--night-2); border-radius: var(--r-night) var(--r-night) 0 0;
  box-shadow: var(--ring); padding: var(--s5) var(--s6);
}
.drop_up_side_navigation p { color: var(--ivory); font-weight: var(--w-mid); margin: 0 0 var(--s3); }
.drop_up_side_navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.drop_up_side_navigation li { font-size: var(--t-body-s); color: var(--ash-dim); margin: 0; }
.drop_up_side_navigation a { color: var(--ash); text-decoration: none; }
.drop_up_side_navigation a:hover { color: var(--ice); }


/* Die Kategorie im Suchfeld des Helden. Der Entwurf benutzt Schaltflaechen
   (<button class="pill" data-cat>) und faengt den Klick mit JavaScript ab.
   Hier sind es echte Auswahlknoepfe in einem echten Formular — sonst wuerde
   "Motorrad" beim Absenden nicht mitgeschickt. Der Knopf selbst wird
   versteckt, sichtbar bleibt die Pille des Entwurfs; bedienbar bleibt beides,
   auch mit der Tastatur.

   ACHTUNG: diese Regel muss VOR der Baumarke stehen. Alles darunter schreibt
   tools/wp-css-bauen.py bei jedem Lauf neu — eine Handarbeit dort ist beim
   naechsten Bauen weg. Genau das ist am 12.09.2026 passiert, und die
   Auswahlknoepfe standen wieder als graue Punkte neben den Pillen. */
.capture-cats .pill { cursor: pointer; }
.capture-cats .pill input[type="radio"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0;
}
.capture-cats .pill:has(input:focus-visible) {
  outline: 2px solid var(--ice); outline-offset: 2px;
}

/* ==========================================================================
   DIE STARTSEITE — der Kopf
   DriveLab GmbH, 12.09.2026.

   Dima, 12.09.2026: "i see the old version". Er hatte recht, und zwar genau
   hier: das Vergleichsportal unter /ch/ ist umgebaut, die WordPress-Haelfte
   war nur umgefaerbt. Wer todrive.ch aufruft, landet auf der WordPress-
   Startseite — also sieht die ganze Website alt aus, obwohl die Haelfte es
   nicht ist.

   Umgebaut wird der Kopf: Ueberschrift, Untertext, die beiden Knoepfe und
   NEU die Postleitzahl-Suche. Der Rest der Seite behaelt seinen Aufbau.

   Das Video bleibt unveraendert. Es ist 23,2 MB gross und wird seit dem
   01.09.2026 nur auf breiten Fenstern ohne Datensparmodus nachgeladen; das
   Standbild traegt alle anderen. Daran wird kein Zeichen geaendert.
   ========================================================================== */

.header_content { width: min(1180px, 88%); gap: 0; }

.hero-h1 {
  font-family: var(--sans); font-size: clamp(34px, 5.2vw, 62px);
  font-weight: var(--w-mid); line-height: 1.08; letter-spacing: .01em;
  color: #fff; margin: 0 0 var(--s5); text-align: left; text-wrap: balance;
}
.hero-h1 em { font-style: italic; font-weight: 400; }
.hero-lede {
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: rgba(255,255,255,.82);
  max-width: 54ch; margin: 0 0 var(--s8); text-align: left;
}

/* Die beiden Knoepfe: Umriss auf dem Bild, wie im Entwurf. */
/* Das Theme setzt ab 1050px width:50% auf .button_area und noch einmal auf
   jedes a darin — zwei Knoepfe waeren dann ein Viertel des Kopfes breit und
   stuenden untereinander. Hier zaehlt die Beschriftung, nicht ein Raster. */
.header_content .button_area,
.header_content .button_area a {
  width: auto !important; margin: 0 !important;
}
.header_content .button_area {
  display: flex; flex-direction: row; gap: var(--s4);
  align-items: center; justify-content: flex-start; flex-wrap: wrap;
  margin-bottom: var(--s6) !important;
}
.header_content .button_area a { display: inline-flex !important; }
.hero-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: var(--t-body); font-weight: var(--w-mid);
  padding: var(--s4) var(--s8); border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.55); color: #fff; background: transparent;
  text-decoration: none; transition: background-color .16s ease, border-color .16s ease;
  white-space: nowrap;
}
.hero-btn:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* --- Die Postleitzahl-Suche. Sie ist der eigentliche Zweck des Kopfes:
   bisher fuehrten von hier zwei Links weg, jetzt beginnt die Suche hier. --- */
.hero-suche { width: 100%; max-width: 640px; margin: var(--s10) 0 0; }
.hero-suche-form { display: flex; gap: var(--s3); flex-wrap: wrap; }
.hero-suche-feld {
  flex: 1 1 260px; min-width: 0;
  font-family: var(--sans); font-size: var(--t-body);
  padding: var(--s4) var(--s6); border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.35);
  color: #fff; outline: none; font-variant-numeric: tabular-nums;
}
.hero-suche-feld::placeholder { color: rgba(255,255,255,.6); }
.hero-suche-feld:focus { border-color: #fff; background: rgba(0,0,0,.5); }
.hero-suche-knopf {
  flex: none; font-family: var(--sans); font-size: var(--t-body); font-weight: var(--w-mid);
  padding: var(--s4) var(--s8); border: 0; border-radius: var(--r-pill);
  background: var(--cobalt); color: #fff; cursor: pointer;
  transition: background-color .16s ease;
}
.hero-suche-knopf:hover { background: color-mix(in srgb, var(--cobalt) 86%, #000); }

/* Auto oder Motorrad: sichtbar ein Segment, darunter ein echter Radioknopf —
   damit die Wahl ohne eigenes JavaScript mitgeschickt wird. */
.hero-kat { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); flex-wrap: wrap; }
.hero-kat-wort { font-size: var(--t-caption); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.hero-kat label {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 7px 15px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.35); color: rgba(255,255,255,.85);
  font-size: var(--t-body-s); cursor: pointer;
}
.hero-kat label:has(input:checked) { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; }
.hero-kat label:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.hero-kat input { position: absolute; opacity: 0; width: 0; height: 0; }

.hero-orte {
  margin: var(--s8) 0 0; font-size: var(--t-body-s); color: rgba(255,255,255,.55);
  letter-spacing: .02em;
}

@media (max-width: 1049px) {
  .hero-h1, .hero-lede { text-align: center; }
  .hero-lede { margin-left: auto; margin-right: auto; }
  .header_content .button_area { justify-content: center; }
  .hero-kat, .hero-orte { justify-content: center; text-align: center; }
  .hero-suche { margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   DIE STARTSEITE — die vier Bloecke unter dem Kopf
   DriveLab GmbH, 12.09.2026.

   Eins zu eins aus docs/design/01-startseite.html uebernommen, nicht neu
   erfunden: Abschnittskopf, die 13 Schritte, "Spare Zeit, Geld und Nerven",
   die Kennzahlen. Die Bausteine darunter (.card-night, .grid, .badge,
   .eyebrow, .gl) kommen aus identity.css und bausteine.css, die WordPress
   ohnehin schon laedt.
   ========================================================================== */

.trust { border-bottom: 1px solid var(--night-line); background: var(--night-1); }
.trust-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-left: 1px solid var(--night-line);
}
.trust-tile { padding: var(--s10) var(--s6); border-right: 1px solid var(--night-line); }
.trust-num { font-size: var(--t-h1); font-weight: var(--w-mid); line-height: 1; color: var(--ivory); display: block; overflow-wrap: anywhere; }
.trust-num.is-var { font-size: var(--t-h3); color: var(--ash-dim); }
.trust-label { display: block; margin-top: var(--s4); font-size: var(--t-body-s); font-weight: var(--w-mid); color: var(--ivory); }
.trust-sub { display: block; margin-top: var(--s1); font-size: var(--t-caption); line-height: 1.45; color: var(--ash-dim); }
.trust-note { padding: var(--s5) var(--s6) var(--s10); margin: 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s10); margin-bottom: var(--s12); }
.sec-head .lede { margin-top: var(--s4); }
.sec-head-text { max-width: 62ch; }
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.step-card { display: flex; flex-direction: column; padding: var(--s8); }
.step-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s6); }
.step-no {
  width: var(--s12); height: var(--s12); flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--night-3);
  font-size: var(--t-body-s); font-weight: var(--w-mid); color: var(--ivory);
}
.step-count { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ash-dim); margin: var(--s2) 0 0; }
.step-card h3 { margin: 0; min-height: calc(2 * 1.3em); }
.step-card > .badge { align-self: flex-start; margin-top: var(--s3); }
.step-card .step-links { margin-top: auto; padding-top: var(--s6); }
.step-dl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin: var(--s6) 0 0; padding: var(--s5) 0 0; border-top: 1px solid var(--night-line); }
.step-dl dt { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ash-dim); margin: 0 0 var(--s2); }
.step-dl dd { margin: 0; font-size: var(--t-body-l); font-weight: var(--w-mid); color: var(--ivory); }
.step-links { display: flex; flex-wrap: wrap; gap: var(--s5); margin-top: auto; padding-top: var(--s6); }
.step-links a {
  font-size: var(--t-micro); font-weight: var(--w-mid);
  letter-spacing: .1em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s2) 0;
}
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.why-card { display: flex; flex-direction: column; }
.why-fact {
  font-family: var(--sans); font-weight: var(--w-mid);
  font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.03em;
  color: var(--ivory); display: block; margin-bottom: var(--s3);
}
.why-fact .num, .why-fact [data-zaehl] {
  font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.why-fact small { display: block; font-family: var(--sans); font-size: var(--t-body-s); letter-spacing: 0; color: var(--ash-dim); margin-top: var(--s2); }
.why-card h3 { margin: 0 0 var(--s4); }
.why-card p { margin: 0; color: var(--ash); line-height: 1.6; }
.why-more { margin-top: auto; padding-top: var(--s6); font-size: var(--t-body-s); font-weight: var(--w-mid); display: inline-flex; align-items: center; gap: var(--s2); }

@media (max-width: 1080px) {
  .step-grid, .why-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-tile:nth-child(-n+2) { border-bottom: 1px solid var(--night-line); }
}

@media (max-width: 720px) {
  .step-grid, .why-grid, .about, .about-facts { grid-template-columns: 1fr; }
  .step-dl { grid-template-columns: 1fr 1fr; }
  .trust-tile { padding: var(--s6) var(--s5); }
  .sec-head { flex-direction: column; align-items: flex-start; gap: var(--s6); }
  .foot-list a, .foot-bottom a, .step-links a, .why-more, .nav-lang a, .logo {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}

@media (max-width: 420px) {
  .trust-grid { grid-template-columns: minmax(0, 1fr); }
  .trust-tile { border-bottom: 1px solid var(--night-line); }
}
.step-glyph, .why-glyph {
  width: var(--s12); height: var(--s12); flex: none;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--night-3); color: var(--ivory);
}
.why-card .why-glyph { margin-bottom: var(--s6); }

/* --- Ueber todrive.ch: Bild links, Text rechts ---------------------------
   Vorher lag der Text auf einem Farbverlauf ueber dem Bild — lesbar nur,
   solange das Bild dunkel genug ist, und das entscheidet niemand nach. */
.ueber-uns {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s12); align-items: center;
  max-width: var(--page-wide); margin: 0 auto; padding: var(--s18) var(--s6);
}
.ueber-bild img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; border-radius: var(--r-night); display: block; }
.ueber-text h2 { margin: 0 0 var(--s6); }
.ueber-text p { color: var(--ash); line-height: 1.7; margin: 0 0 var(--s5); }

/* --- Die drei Stimmen ---------------------------------------------------- */
.stimmen { max-width: var(--page-wide); margin: 0 auto; padding: 0 var(--s6) var(--s18); }
.stimme .stars { color: var(--gold); font-size: var(--t-body-l); letter-spacing: .1em; margin: 0 0 var(--s3); }
.stimme h3 { margin: 0 0 var(--s4); }
.stimme-text { color: var(--ash); line-height: 1.65; margin: 0 0 var(--s6); flex: 1; }
.stimme-wer { display: flex; align-items: center; gap: var(--s3); margin: 0; }
.stimme-wer img { width: 44px; height: 44px; border-radius: var(--r-pill); object-fit: cover; flex: none; }
.stimme-wer b { display: block; color: var(--ivory); font-weight: var(--w-mid); font-size: var(--t-body-s); }
.stimme-wer small { display: block; color: var(--ash-dim); font-size: var(--t-caption); }
.stimme { display: flex; flex-direction: column; }

/* Die Abschnitte der Startseite brauchen die Seitenbreite des Systems. */
.index_main > .sec-head, .index_main > .step-grid,
.index_main > .advantages_container {
  max-width: var(--page-wide); margin-left: auto; margin-right: auto;
  padding-left: var(--s6); padding-right: var(--s6);
}
.index_main > .sec-head { padding-top: var(--s18); }
.index_main > .step-grid { padding-bottom: var(--s18); }

@media (max-width: 900px) {
  .ueber-uns { grid-template-columns: 1fr; gap: var(--s8); padding: var(--s12) var(--s6); }
}

/* ==========================================================================
   DIE TEXTSEITEN — Ratgeber, Ueber uns, Impressum, Rechtstexte
   DriveLab GmbH, 12.09.2026. Entwuerfe: 04-ratgeber, 10-ueber-uns,
   19-impressum, 21-datenschutz.

   Diese Seiten bestehen aus Text aus dem Redaktionssystem. Umgebaut wird
   darum nicht der Text, sondern was ihn umgibt: eine Ueberschrift, und vor
   allem eine Lesebreite. Vorher lief der Fliesstext ueber die ganze
   Fensterbreite — bei 1400px sind das 180 Zeichen pro Zeile, und das Auge
   findet den Zeilenanfang nicht mehr. 68 Zeichen ist das Mass des Systems.
   ========================================================================== */

.article_container, .about_us_main, .main_guide { width: 100%; max-width: none; }
.article_container .wrap, .about_us_main .wrap, .main_guide .wrap {
  max-width: var(--page); margin: 0 auto; padding: 0 var(--s6);
}
/* Ohne Inhaltsverzeichnis steht der Beitrag allein im zweispaltigen Raster —
   und landete damit in dessen ERSTER Spalte, den 268 Pixeln, die fuer das
   Verzeichnis gedacht sind. Das Verzeichnis erscheint erst ab drei
   Zwischentiteln (article.php); Helenas Bericht hat einen, also fehlte es,
   und der ganze Beitrag stand in einer Spalte, die halb so breit ist wie die
   Lesespalte: Zeilen von 268 statt 535 Pixeln, das Foto ebenso.
   Ist der Beitrag das einzige Kind, nimmt er beide Spalten. Breiter wird er
   dadurch nicht als vorgesehen — ".art-body" ist ohnehin auf 68 Zeichen
   begrenzt, dieselbe Lesebreite wie auf jeder anderen Ratgeberseite. */
.art-grid > .art-body:only-child { grid-column: 1 / -1; }

/* Die Zeile darueber hat ZWEI Klassen und schlug damit jede Regel, die nur
   ".art-head" heisst — auch deren Abstand nach oben. Der Seitenkopf sass
   dadurch buendig unter der Kopfzeile: auf Ueber uns lag die Karte "Drei
   Wege" direkt an den Knoepfen, und ihr Verlaufskeil (18px ueber der Karte)
   schob sich darueber (Dimas Bild vom 14.09.2026).
   Der Entwurf sagt ".art-head { padding: var(--s10) 0 var(--s12) }". Genau
   dieser senkrechte Teil steht hier noch einmal, gleich spezifisch und
   spaeter — der seitliche Abstand bleibt, wo er ist, denn den braucht die
   Seite auf 390px am Bildschirmrand. */
.article_container .art-head, .about_us_main .art-head, .main_guide .art-head,
.article_container .wrap.kopf, .about_us_main .wrap.kopf, .main_guide .wrap.kopf {
  padding-block: var(--s10) var(--s12);
}
/* ".wrap.kopf" steht mit dabei, weil Kontakt und Ratgeber ihren Seitenkopf so
   nennen und 11-kontakt.html dort dasselbe Mass setzt: derselbe Fehler,
   dieselbe Zeile. Beide Klassen zusammen, damit die anderen Bedeutungen von
   .kopf nichts abbekommen — die Textspalte auf "Vorteile" und das dunkle
   Band der Fehlerseite tragen kein .wrap. */
.art-kopf { padding: var(--s14) var(--s6) var(--s8); }
.art-kopf h1 { margin: 0; }
.art-kopf .eyebrow { color: var(--gold); }

/* Der Redaktionstext selbst. .prosa steht in seite.css; hier nur, was
   WordPress zusaetzlich einstreut. */
.article_container .prosa, .about_us_main .prosa { max-width: 68ch; padding-bottom: var(--s14); }
.prosa img, .prosa figure { border-radius: var(--r-paper); height: auto; }
.prosa figure { margin: var(--s8) 0; }
.prosa figcaption { font-size: var(--t-body-s); color: var(--ash-dim); margin-top: var(--s2); }
.prosa table { margin: var(--s8) 0; }
.prosa .wp-block-image { margin: var(--s8) 0; }

/* Der Weg in den Vergleich, am Fuss jeder Ratgeberseite. Vorher ein grauer
   Kasten (#F5F5F5) mit fester Farbe — jetzt die Karte des Systems. */
.trichter { padding: var(--s12); margin: var(--s8) 0 var(--s18); }
.trichter .eyebrow { color: var(--gold); }
.trichter h2 { margin: 0 0 var(--s5); }
.trichter-lede { color: var(--ash); font-size: var(--t-body-l); line-height: 1.6; max-width: 54ch; margin: 0 0 var(--s8); }
.trichter-tat { margin: 0 0 var(--s10); }
.trichter-orte-kopf {
  font-size: var(--t-caption); text-transform: uppercase; letter-spacing: .12em;
  color: var(--ash-dim); margin: 0 0 var(--s3);
}
.trichter-orte { margin: 0; line-height: 2.1; font-size: var(--t-body-s); }
.trichter-orte a { color: var(--ice); text-decoration: none; }
.trichter-orte a:hover { text-decoration: underline; }

/* Die aufklappbare Schrittliste am Seitenrand. Sie bleibt, was sie ist —
   dropup.js schaltet sie —, bekommt aber die Flaeche des Systems. */
.drop_up_side_navigation {
  background: var(--night-2); border-radius: var(--r-night) var(--r-night) 0 0;
  box-shadow: var(--ring); padding: var(--s5) var(--s6);
}
.drop_up_side_navigation p { color: var(--ivory); font-weight: var(--w-mid); margin: 0 0 var(--s3); }
.drop_up_side_navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.drop_up_side_navigation li { font-size: var(--t-body-s); color: var(--ash-dim); margin: 0; }
.drop_up_side_navigation a { color: var(--ash); text-decoration: none; }
.drop_up_side_navigation a:hover { color: var(--ice); }


/* Die Kategorie im Suchfeld des Helden. Der Entwurf benutzt Schaltflaechen
   (<button class="pill" data-cat>) und faengt den Klick mit JavaScript ab.
   Hier sind es echte Auswahlknoepfe in einem echten Formular — sonst wuerde
   "Motorrad" beim Absenden nicht mitgeschickt. Der Knopf selbst wird
   versteckt, sichtbar bleibt die Pille des Entwurfs; bedienbar bleibt beides,
   auch mit der Tastatur.

   ACHTUNG: diese Regel muss VOR der Baumarke stehen. Alles darunter schreibt
   tools/wp-css-bauen.py bei jedem Lauf neu — eine Handarbeit dort ist beim
   naechsten Bauen weg. Genau das ist am 12.09.2026 passiert, und die
   Auswahlknoepfe standen wieder als graue Punkte neben den Pillen. */
.capture-cats .pill { cursor: pointer; }
.capture-cats .pill input[type="radio"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0;
}
.capture-cats .pill:has(input:focus-visible) {
  outline: 2px solid var(--ice); outline-offset: 2px;
}

/* ==========================================================================
   DIE CHECKLISTE — /checkliste-fuehrerschein/
   DriveLab GmbH, 15.09.2026.

   GEMESSEN an den eigenen Seiten, bevor eine Zeile entstand:
     /fuehrerschein-guide/  Lesespalte 581px, Fliesstext 18px/1.6, H2 40px
                            Gewicht 400, H3 24px Gewicht 500, GENAU EINE
                            dunkle Karte — ganz am Ende, ueber die volle
                            Breite (1152px). Die dreizehn Schritte stehen an
                            einer Haarlinie mit nummerierten Punkten, die
                            Phase als kleine graue Versalzeile darauf.
                            KEINE Karten in der Lesespalte.
     /fuehrerschein-schweiz-kosten/  Lesespalte 535px neben einem klebenden
                            Inhaltsverzeichnis, Fliesstext 21px/1.6,
                            Kapitelnummer ueber 40px-Titel, keine Karte im
                            Text, Bilder auf Spaltenbreite.
     Ortsseite              die dichte Gangart mit Kartenraster gehoert der
                            BUCHEN-Haelfte, nicht dem Wissen.

   Daraus die zwei Fassungen: A folgt dem Weg (Leiste, zwei Spalten),
   B folgt der Kostenseite (eine schmale Lesespalte). Beide halten sich an
   die drei Regeln, die auf allen drei Seiten gelten: eine Lesespalte, keine
   Karten darin, die dunkle Karte genau einmal und am Schluss.

   Diese Regeln muessen VOR der Baumarke stehen (siehe .capture-cats oben).
   ========================================================================== */

/* ---------- A: der Weg ---------- */
/* Die Fassung bricht aus der schmalen Artikelspalte aus: ein Weg mit
   fuenfzehn Stationen braucht dieselbe Breite wie der Weg auf der
   Guide-Seite, und das Inhaltsverzeichnis der Vorlage waere doppelt — die
   Leiste IST das Verzeichnis. */
.art-grid:has(.ck-zwei) { grid-template-columns: minmax(0, 1fr); }
.art-grid:has(.ck-zwei) > .art-aside { display: none; }
/* ".art-body" ist auf 68 Zeichen Lesebreite begrenzt (585px gemessen). Fuer
   den Weg mit seiner zweiten Spalte muss die Begrenzung weg, sonst teilen
   sich Leiste und Spalte diese 585 — die Leiste blieb 229px breit und jedes
   Wort stand auf einer eigenen Zeile. Die Lesebreite haelt danach die
   Leiste selbst (max-width: 62ch). */
.art-body:has(.ck-zwei) { max-width: none; }
/* Und die eigentliche Fessel: ".art-body > *" begrenzt JEDES direkte Kind auf
   68 Zeichen (685px gemessen). Das ist fuer Fliesstext richtig und fuer ein
   zweispaltiges Raster falsch. */
.art-body > .ck-zwei { max-width: none; }
/* Die Schlusskarte gehoert in Fassung A ueber die ganze Breite — wie der
   Kostenkasten auf /fuehrerschein-guide/ (1152px gemessen). */
.art-body:has(.ck-zwei) > .ck-schluss { max-width: none; }
.ck-zwei { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s14); align-items: start; }

.ck-leiste { list-style: none; margin: 0; padding: 0; position: relative; max-width: 62ch; }
.ck-leiste::before {
  content: ""; position: absolute; left: 17px; top: 14px; bottom: 14px;
  width: 2px; background: var(--paper-line);
}
/* Die Phase als Versalzeile AUF der Linie — wie auf der Guide-Seite. */
.ck-phase-marke {
  position: relative; display: flex; align-items: center; gap: var(--s3);
  margin: var(--s10) 0 var(--s6); padding-left: 52px;
  font-size: var(--t-caption); letter-spacing: .1em; text-transform: uppercase;
  color: var(--stone);
}
.ck-phase-marke::before {
  content: ""; position: absolute; left: 9px; top: 50%;
  width: 18px; height: 2px; margin-top: -1px; background: var(--stone); opacity: .45;
}
.ck-leiste > .ck-phase-marke:first-child { margin-top: 0; }
/* NUR in der Leiste: das zweispaltige Raster aus Punkt und Inhalt. Ohne die
   Einschraenkung erwischte es auch Fassung B, wo der Schritt kein Raster ist —
   dort stand die Ueberschrift in einer 36px-Spalte und der Text lief darueber. */
.ck-leiste > .ck-schritt {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--s5); align-items: start; padding: 0 0 var(--s8);
}
.ck-leiste > .ck-schritt:last-child { padding-bottom: 0; }
.ck-nr {
  width: 36px; height: 36px; border-radius: 50%; position: relative; z-index: 1;
  display: grid; place-items: center;
  background: var(--paper-0); border: 2px solid var(--paper-line);
  font-family: var(--mono); font-size: var(--t-small); color: var(--stone);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.ck-leiste > .ck-schritt.ist-fertig .ck-nr { background: var(--cobalt); border-color: var(--cobalt); color: var(--white); }
/* Ein Wartepunkt ist kein Schritt, den man tut: hohler Punkt, keine Zaehlung. */
.ck-leiste > .ck-schritt.ist-warten .ck-nr { border-style: dashed; }

/* ---------- Die mitlaufende Spalte ---------- */
.ck-spalte { position: sticky; top: var(--s18); }
/* ---------- Die Karte im Kopf: die Form der Liste ----------
   Dieselbe Rolle wie "Die Form des Weges" auf /fuehrerschein-guide/: sie
   fuellt die rechte Haelfte des Kopfes und beantwortet vorweg, wie lang der
   Weg ist. Dima, 15.09.2026: "half a page is empty" — ohne Karte laesst der
   Kopf bei 1440 Pixeln rund 600 Pixel leer. */
.ck-form { padding: var(--s8); }
.ck-form .eyebrow { margin: 0 0 var(--s2); }
.art-body .ck-form h2, .ck-form h2 {
  margin: 0 0 var(--s6); font-size: var(--t-sub); line-height: 1.25;
  color: var(--ink); font-weight: var(--w-mid);
}
.ck-form-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ck-form-liste a {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) var(--s5);
  align-items: center; gap: var(--s4);
  padding: var(--s3); margin: 0 calc(var(--s3) * -1);
  border-radius: var(--r-field); color: var(--charcoal);
}
.ck-form-liste a:hover { background: var(--paper-0); text-decoration: none; }
.ck-form-nr { font-size: var(--t-caption); color: var(--stone); letter-spacing: .02em; white-space: nowrap; }
.ck-form-liste b { display: block; font-size: var(--t-body-s); font-weight: var(--w-mid); line-height: 1.35; }
.ck-form-liste .sub { display: block; font-size: var(--t-caption); color: var(--stone); margin-top: 1px; }
.ck-form-liste .go { color: var(--paper-line-2); justify-self: end; }
.ck-form-liste a:hover .go { color: var(--cobalt); }
.ck-form-fuss {
  margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--paper-line);
  font-size: var(--t-caption); line-height: 1.5; color: var(--stone);
}

.ck-stand {
  background: var(--paper-1); border: 1px solid var(--paper-line);
  border-radius: var(--r-paper); padding: var(--s6); text-align: center;
}
.ck-ring { width: 120px; height: 120px; transform: rotate(-90deg); margin: 0 auto var(--s4); display: block; }
.ck-ring-spur { fill: none; stroke: var(--paper-line); stroke-width: 8; }
.ck-ring-fuell {
  fill: none; stroke: var(--cobalt); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 326.7; stroke-dashoffset: 326.7;
  transition: stroke-dashoffset .55s cubic-bezier(.22,.61,.36,1);
}
.ck-ring-zahl {
  transform: rotate(90deg); transform-origin: 60px 60px;
  fill: var(--ink); font-family: var(--sans); font-size: 22px; font-weight: 500;
}
.art-body .ck-spalte .eyebrow { margin: 0 0 var(--s1, 4px); }
.art-body .ck-zaehler { margin: 0; font-size: var(--t-h3); line-height: 1.2; color: var(--ink); font-weight: var(--w-mid); }
.art-body .ck-satz { margin: var(--s2) 0 0; font-size: var(--t-body-s); line-height: 1.5; color: var(--stone); }
.ck-reset {
  margin: var(--s3) 0 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--t-body-s); color: var(--stone);
  text-decoration: underline; text-underline-offset: 3px;
}
.ck-reset:hover { color: var(--cobalt); }
.ck-reset:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
/* Alle drei mit ".art-body" davor: ".art-body p", ".art-body ol" und
   ".art-body a:not(.btn)" sind staerker als eine einzelne Klasse. Ohne das
   stand die Liste mit Aufzaehlungspunkten und blau unterstrichenen Verweisen
   da, die Ueberschrift in 18px (Dima, 15.09.2026: "this looks weak"). */
.art-body .ck-naechst-titel {
  margin: var(--s8) 0 var(--s4); font-size: var(--t-caption); letter-spacing: .1em;
  text-transform: uppercase; color: var(--stone); font-weight: var(--w-mid);
}
.art-body .ck-naechst {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 2px;
}
/* !important wie bei der Verweisfarbe: das alte Blatt setzt die Punkte in
   Listen des Artikels selbst mit !important. */
.art-body .ck-spalte .ck-naechst li {
  margin: 0; font-size: inherit; list-style: none !important;
}
.art-body .ck-spalte .ck-naechst li::marker { content: none; }
/* Drei Klassen: ".art-body a:not(.btn)" ist gleich stark wie zwei und steht
   weiter unten im Blatt — es gewann und faerbte die Zeilen kobaltblau mit
   Unterstrich. */
.art-body .ck-spalte .ck-naechst a.ck-zeile {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline;
  gap: var(--s2); padding: var(--s2) var(--s3); margin: 0 calc(var(--s3) * -1);
  border-radius: var(--r-field);
  font-size: var(--t-body-s); line-height: 1.45;
  /* !important, weil die erzeugte Regel
     "main.article_container :is(p, strong, li) > a" die Verweisfarbe selbst
     mit !important setzt. Gleiches Mittel, engerer Selektor. */
  color: var(--charcoal) !important;
  text-decoration: none;
}
.art-body .ck-spalte .ck-naechst a.ck-zeile:hover { background: var(--paper-0); color: var(--ink); text-decoration: none; }
.art-body .ck-naechst i {
  font-style: normal; font-family: var(--mono); font-size: var(--t-caption); color: var(--stone);
}

/* ---------- Schritt, Punkte, Fussnote ---------- */
.art-body .ck-schritt h3 {
  margin: 0 0 var(--s3); color: var(--ink); font-size: var(--t-h3); line-height: 1.3;
  font-weight: var(--w-mid); letter-spacing: -.01em;
}
/* In der Leiste ist der Schritttitel eine Stufe kleiner: dort traegt die
   Phase die Gliederung, und ein 24px-Titel unter einer 12px-Versalzeile
   dreht die Rangfolge um. */
.art-body .ck-leiste .ck-schritt h3 { font-size: var(--t-sub); }
/* Ein Wartepunkt ist kein Schritt, den man tut. */
.ck-schritt.ist-warten h3 { color: var(--graphite); font-weight: 400; }
.art-body .ck-leiste .ck-schritt.ist-warten h3 { font-size: var(--t-body-l); }
.ck-schritt.ist-warten .ck-text { font-size: var(--t-body); color: var(--graphite); }
.ck-mini, .ck-zettel {
  display: inline-block; margin-left: var(--s3); vertical-align: 2px;
  font-size: var(--t-caption); padding: 3px 10px; border-radius: var(--r-pill);
  transition: background-color .25s ease, color .25s ease;
}
.ck-mini { font-family: var(--mono); letter-spacing: .04em; color: var(--stone); }
.ck-schritt.ist-fertig .ck-mini { background: var(--lavender); color: var(--ink); }
.ck-zettel { background: var(--paper-0); color: var(--stone); border: 1px solid var(--paper-line); }
.art-body .ck-schritt > p, .art-body .ck-inhalt > p { margin: 0 0 var(--s3); font-size: var(--t-body-s); color: var(--stone); }

.ck-punkte { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s4); }
.ck-punkt { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px var(--s4); align-items: start; }
.ck-box {
  grid-column: 1; grid-row: 1; margin: 3px 0 0;
  width: 20px; height: 20px; flex: none; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--paper-line-2); border-radius: 6px;
  background: var(--paper-1); display: grid; place-items: center;
}
.ck-box::after {
  content: ""; width: 10px; height: 6px; margin-top: -2px;
  border-left: 2px solid var(--white); border-bottom: 2px solid var(--white);
  transform: rotate(-45deg) scale(.6); opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
}
.ck-box:checked { background: var(--cobalt); border-color: var(--cobalt); }
.ck-box:checked::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.ck-box:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.ck-text { grid-column: 2; grid-row: 1; cursor: pointer; font-size: var(--t-body-l); line-height: 1.6; color: var(--charcoal); }
.ck-punkt.ist-ab .ck-text { color: var(--stone); text-decoration: line-through; text-decoration-color: var(--paper-line-2); }
/* Die Fussnote ist ein Verweis, kein Schritt. KEIN Flex-Kasten — darin
   bekaeme jeder Verweis eine eigene Spalte und die Zeile liefe bei 375px
   aus dem Bild. */
.art-body .ck-quelle { grid-column: 2; margin: var(--s2) 0 0; font-size: var(--t-body-s); line-height: 1.55; color: var(--stone); }
.ck-medien { margin: var(--s5) 0 0; }
.ck-medien figure { margin: 0; }
.ck-medien img { display: block; width: 100%; height: auto; border-radius: var(--r-paper); }

/* ---------- Die eine dunkle Karte, am Schluss ---------- */
.ck-schluss {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s10);
  align-items: center; margin: var(--s18) 0 0; padding: var(--s10);
}
.art-body .ck-schluss .eyebrow { margin: 0 0 var(--s2); color: var(--ice); }
.art-body .ck-schluss h2 { margin: 0 0 var(--s4); color: var(--white); font-family: var(--serif);
                           font-weight: 400; font-size: var(--t-h2); line-height: 1.15; letter-spacing: -.02em; }
.art-body .ck-schluss > div > p { margin: 0 0 var(--s6); color: var(--lavender); font-size: var(--t-body); line-height: 1.65; max-width: 46ch; }
.art-body .ck-schluss-zahl { margin: 0; text-align: right; color: var(--white);
                             font-size: 64px; line-height: 1; font-weight: var(--w-mid); }
.ck-schluss-zahl small { display: block; margin-top: var(--s2); font-size: var(--t-body-s);
                         font-weight: 400; color: var(--lavender); }

/* Erledigte Schritte im Inhaltsverzeichnis (nur Fassung B). */
.toc a { position: relative; }
.toc .ck-hak { position: absolute; right: 0; top: var(--s3); color: var(--cobalt); font-weight: 600; line-height: 1.45; }

@media (max-width: 1080px) {
  .ck-zwei { grid-template-columns: minmax(0, 1fr); gap: var(--s10); }
  .ck-spalte { position: static; }
  .ck-stand { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s5);
              text-align: left; align-items: center; }
  .ck-ring { margin: 0; }
}
@media (max-width: 720px) {
  .ck-schluss { grid-template-columns: minmax(0, 1fr); gap: var(--s6); padding: var(--s6); }
  .art-body .ck-schluss-zahl { text-align: left; font-size: 48px; }
  .ck-stand { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .ck-ring { margin: 0 auto; }
  .ck-schritt { grid-template-columns: 28px minmax(0, 1fr); gap: var(--s3); }
  .ck-nr { width: 28px; height: 28px; font-size: var(--t-caption); }
  .ck-leiste::before { left: 13px; }
  .ck-text { font-size: var(--t-body); }
}
@media (prefers-reduced-motion: reduce) {
  .ck-ring-fuell, .ck-box::after, .ck-nr, .ck-mini { transition: none; }
}

/* ==========================================================================
   ZWEI LECKS DES 2022-BLATTES, DIE JEDE RATGEBERSEITE TREFFEN
   DriveLab, 17.09.2026, Lane driving-licence-design.

   1. styles/style.css: ".article_container h2 { line-height: 29px !important }"
      drueckt jede Zwischenueberschrift der Ratgeberseiten auf 29 Pixel
      Zeilenhoehe — bei 40 Pixel Schriftgrad beruehren sich zwei Zeilen
      (17.09.2026 auf /en/nothelferkurs/ und /en/driving-licence-switzerland/
      gemessen: "40px lh29px"; der Trichter in article.php flickt es inline
      mit einem eigenen !important). Gleiche Spezifitaet, spaeter im Blatt,
      wieder !important — die einzige Sprache, die diese Regel versteht.
      Kartenueberschriften behalten ihre engere Hoehe.
   2. styles/style.css: "p, li { font-weight: lighter }" — relativ zum
      Elternteil 400 ergibt das 100, einen Schnitt, den Switzer nicht hat
      (Messung 17.09.2026: 140 Elemente in Gewicht 100). Der Browser nimmt
      dann 400; die Ersatzschrift ohne Switzer aber wirklich das Duenne.
   ========================================================================== */
main.article_container h2 { line-height: 1.15 !important; }
main.article_container .card-paper h2, main.article_container .card-ink h2 { line-height: 1.3 !important; }
body.on-wissen p, body.on-wissen li { font-weight: var(--w-book); }
/* Fett im Lesetext ist 500, nicht 700: das System hat kein 700 (DESIGN.md
   Abschnitt 3; Mercury: "400 for body and 480 for emphasis"). <b> und
   <strong> im Beitrag kamen bisher als Browser-Fett — am 17.09.2026 neun
   Elemente in 700 gemessen, auf jeder Ratgeberseite dieselben. */
body.on-wissen .art-body b, body.on-wissen .art-body strong { font-weight: var(--w-mid); }

/* ==========================================================================
   DER SPRACHINDEX — /en/driving-licence-switzerland/ und die deutsche
   Zwillingsseite (fuehrerschein-englisch.php). DriveLab, 17.09.2026, docs/39;
   Umbau nach DESIGN.md am selben Abend.

   Zwei Klassen je Regel: das gebaute Blatt darunter setzt .art-body p und
   .art-body > * (68ch) und wuerde eine einfache Klasse schlagen. Bausteine
   sind die vorhandenen — .pill, .badge, .bar-row, .preis, .acc-row,
   .cost-rows, .card-data, .table-wrap, .num; hier steht nur, was der Index
   in voller Breite, die Pillen auf Papier und die Gruppen brauchen.
   ========================================================================== */

/* --- Der Index als eigener Abschnitt, volle Seitenbreite --- */
.sp-index.wrap { padding-top: var(--s10); padding-bottom: var(--s6); }
.sp-index .sp-kopf { max-width: 64ch; }
.sp-index .sp-kopf .eyebrow { margin: 0 0 var(--s3); }
.sp-index .sp-kopf h2 {
  font-family: var(--serif); font-weight: 400; font-style: normal;
  font-size: var(--t-h2-display); letter-spacing: -.02em; color: var(--charcoal);
  margin: 0 0 var(--s4);
}
.sp-index .sp-kopf .sp-intro, .art-body .sp-weg .sp-intro {
  font-size: var(--t-body-l); line-height: 1.7; color: var(--charcoal); margin: 0 0 var(--s8); max-width: 64ch;
}
/* Die Pillen: Sprachen links, Kantone rechts, zwischen zwei Haarlinien —
   keine Karte, keine Flaeche: Mercury trennt durch eine Wertstufe, hier
   durch die Linie. */
.sp-index .sp-filter {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8);
  padding: var(--s6) 0; border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line);
}
.sp-index .sp-marke {
  margin: 0 0 var(--s3); font-family: var(--mono); font-size: var(--t-micro); line-height: 1.4;
  letter-spacing: .12em; text-transform: uppercase; color: var(--stone);
}
.sp-index .sp-pillen { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sp-index .sp-pillen .pill {
  cursor: pointer; font-family: var(--sans); font-size: var(--t-body-s); padding: 10px var(--s4);
  border: 1px solid var(--paper-line-2); background: var(--paper-1); color: var(--charcoal);
}
.sp-index .sp-pillen .pill:hover { border-color: var(--cobalt); }
.sp-index .sp-pillen .pill.is-on, .sp-index .sp-pillen .pill[aria-pressed="true"] {
  border-color: var(--cobalt); background: var(--lavender); color: var(--ink);
}
.sp-index .sp-pillen .pill:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.sp-index .sp-pillen .num { color: var(--stone); font-size: var(--t-caption); }
.sp-index .sp-pillen .is-on .num { color: var(--ink); }
.sp-index .sp-stand { margin: var(--s6) 0 var(--s4); font-size: var(--t-body-s); color: var(--stone); }
.sp-index .sp-stand > .num { font-size: var(--t-sub); font-weight: var(--w-mid); color: var(--ink); margin-right: var(--s1); }
.sp-index .sp-stand .sp-mess { margin-left: var(--s3); }
/* Die Tafel: das Datenregister — weisse Flaeche, 10 px, Haarlinien-Ring,
   keine Bewegung beim Ueberfahren (die Karte ist eine Liste, kein Knopf). */
.sp-index .card-data { padding: 0; overflow: hidden; }
.sp-index .card-data:hover { background: var(--paper-1); box-shadow: var(--ring); }
.sp-index .table-wrap { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.sp-index .table-note { max-width: 64ch; margin-top: var(--s4); }

/* --- Die Liste (auch die Kantonstabelle im Text) --- */
.sp-liste { width: 100%; border-collapse: collapse; font-size: var(--t-body-s); }
.sp-liste caption {
  caption-side: top; text-align: left; padding: var(--s4) var(--s5) var(--s2);
  font-size: var(--t-caption); color: var(--stone);
}
.sp-liste th, .sp-liste td {
  padding: 10px var(--s5); border-bottom: 1px solid var(--paper-line);
  vertical-align: middle; text-align: left; font-size: var(--t-body-s); line-height: 1.4;
}
.sp-liste thead th { font-size: var(--t-caption); font-weight: var(--w-mid); color: var(--stone); letter-spacing: .02em; white-space: nowrap; }
.sp-liste tbody th { font-weight: var(--w-mid); color: var(--ink); }
/* Namen sind Eigennamen: keine Versalien, keine Sperrung — das 2022-Blatt
   setzt Verweise in Tabellen sonst in Grossbuchstaben. */
.sp-liste tbody th a { color: var(--ink); text-decoration: none; text-transform: none; letter-spacing: 0; }
.sp-liste tbody th a:hover { color: var(--cobalt); text-decoration: underline; }
.sp-liste .sp-r { text-align: right; white-space: nowrap; }
/* Die Kantonszeile: eine Augenbraue in der Liste, Zahl daneben. */
.sp-liste tr.sp-gruppe th {
  padding: var(--s5) var(--s5) var(--s2); background: var(--paper-0);
  font-family: var(--mono); font-size: var(--t-micro); font-weight: var(--w-mid);
  letter-spacing: .12em; text-transform: uppercase; color: var(--stone);
  border-bottom: 1px solid var(--paper-line-2);
}
.sp-liste tr.sp-gruppe th .num { color: var(--ink); margin-left: var(--s2); letter-spacing: 0; }
/* Der Knopf in der Kantonszeile: dieselbe Bauart wie .acc-btn der Kurzfassung
   (voll breit, Pfeil rechts, dreht sich beim Oeffnen), in der Schrift der Zeile. */
.sp-liste .sp-auf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  width: 100%; min-height: 44px; margin: -6px 0; padding: 6px 0; background: transparent; border: 0; cursor: pointer;
  text-align: left; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.sp-liste .sp-auf:hover { color: var(--ink); }
.sp-liste .sp-auf:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: var(--r-field); }
.sp-liste .sp-auf .chev { flex: none; color: var(--stone); transition: transform .22s var(--mo-kurve); }
.sp-liste .sp-auf[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--cobalt); }
.sp-liste .sp-auf[aria-expanded="true"] { color: var(--ink); }
.sp-liste tbody:last-child tr:last-child th, .sp-liste tbody:last-child tr:last-child td { border-bottom: 0; }
.sp-liste .preis { justify-content: flex-end; gap: var(--s1); }
.sp-liste .preis b { font-size: var(--t-body); font-weight: var(--w-mid); letter-spacing: -.01em; }
.sp-liste .preis .dauer { margin-left: var(--s2); font-size: var(--t-caption); }
.sp-liste .sp-auch { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s1); }
.sp-liste .badge { white-space: nowrap; }
.sp-liste .sp-ort { width: 22%; }
.sp-liste .sp-leer { color: var(--stone); font-size: var(--t-caption); }
/* Dieselbe Liste im Lesetext (die Kantone der Kosten, die Theoriepruefung):
   die Vorlage legt sie in .table-wrap; hier nur die Hoehe. */
.art-body .sp-liste th, .art-body .sp-liste td { padding: var(--s3) var(--s3) var(--s3) 0; }
.art-body .sp-liste caption { padding-left: 0; }
.art-body .sp-theorie td b { display: block; font-weight: var(--w-mid); color: var(--ink); }
.art-body .sp-theorie .sp-quelle { display: block; margin-top: 2px; font-size: var(--t-caption); line-height: 1.45; color: var(--stone); }

/* --- Die Kopfkarte: die eine grosse Zahl, die Balken je Kanton --- */
.sp-karte .sp-zahl { display: flex; align-items: baseline; gap: var(--s4); margin: var(--s3) 0 var(--s6); }
.sp-karte .sp-zahl > .num { font-size: var(--t-display); font-weight: var(--w-mid); line-height: 1; color: var(--ink); letter-spacing: -.03em; }
.sp-karte .sp-von { font-size: var(--t-body-s); line-height: 1.4; color: var(--charcoal); max-width: 22ch; }
.sp-karte .sp-von .num { color: var(--ink); font-weight: var(--w-mid); }
.sp-karte .bars { display: grid; gap: var(--s2); }
.sp-karte .bar-row { grid-template-columns: 112px minmax(0, 1fr) 28px; gap: var(--s3); }
.sp-karte .bar-label b { font-size: var(--t-body-s); font-weight: var(--w-book); color: var(--charcoal); }
.sp-karte .bar-track { height: var(--s4); }
.sp-karte .bar-value { font-size: var(--t-body-s); }

/* --- Die dreizehn Schritte in fuenf Phasen --- */
.art-body .sp-weg { max-width: none; }
.sp-weg .sp-phase { margin-top: var(--s8); }
.art-body .sp-weg .sp-phase-kopf {
  display: flex; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s2); max-width: none;
  font-size: var(--t-micro); line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--stone);
}
.sp-weg .sp-phase-kopf .num { color: var(--ink); letter-spacing: 0; }
.sp-weg .acc-btn { max-width: none; }
.sp-weg .acc-btn .sp-nr { display: inline-block; min-width: 2.2em; font-size: var(--t-caption); color: var(--stone); }
.sp-weg .acc-btn i { font-style: italic; font-weight: var(--w-book); color: var(--stone); }
.art-body .sp-weg .sp-fakten {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s6);
  margin: 0 0 var(--s3); max-width: none; font-size: var(--t-body-s); color: var(--stone);
}
.sp-weg .sp-fakten b { font-weight: var(--w-mid); color: var(--ink); margin-left: var(--s1); }
.art-body .sp-weg .cost-link { margin-top: var(--s3); }

/* --- Die dreizehn Schritte, drei Fassungen zur Wahl (18.09.2026) --- */
.sp-weg .sp-amt { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--stone); margin-left: var(--s1); }

/* B — Fuenf Karten: die Phase ist die Einheit (Dimas Wahl, 18.09.2026).
   Der Kopf jeder Karte liegt auf dem Lavendelband — derselbe Ton, den
   Plaketten und gewaehlte Pillen auf dieser Seite schon tragen; Dima:
   "make colour of the box better", die weisse Karte auf dem warmen Grund
   war ihm zu blass. Kein Schatten, keine zweite Farbe. */
.art-body .sp-weg-b .wb-karten { display: grid; gap: var(--s6); margin-top: var(--s6); max-width: none; }
.sp-weg-b .wb-karte { padding: 0; overflow: hidden; box-shadow: none; }
.sp-weg-b .wb-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s8); align-items: start; padding: var(--s6) var(--s8); background: var(--lavender); }
.art-body .sp-weg-b .wb-kopf .eyebrow { margin: 0 0 var(--s2); color: var(--ink); }
.art-body .sp-weg-b .wb-titel { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.01em; color: var(--charcoal); }
.art-body .sp-weg-b .wb-satz { margin: var(--s3) 0 0; font-size: var(--t-body-s); line-height: 1.55; color: var(--charcoal); max-width: 44ch; }
.art-body .sp-weg-b .wb-uhr { display: flex; flex-direction: column; align-items: flex-end; text-align: right; margin: var(--s4) 0 0; max-width: 16ch; }
.sp-weg-b .wb-uhr b { font-size: var(--t-h2); font-weight: var(--w-mid); line-height: 1; color: var(--ink); white-space: nowrap; letter-spacing: -.02em; }
.sp-weg-b .wb-uhr span { font-size: var(--t-micro); color: var(--charcoal); margin-top: var(--s1); line-height: 1.3; }
.sp-weg-b .wb-schritte { margin: 0; padding: var(--s2) var(--s8) var(--s4); }
.sp-weg-b .wb-zeile { border-bottom: 1px solid var(--paper-line); }
.sp-weg-b .wb-zeile:last-child { border-bottom: 0; }
/* Die erste Zeile traegt sonst die Oberlinie des Akkordeons — direkt unter
   dem Band eine zweite Linie. */
.sp-weg-b .wb-schritte .acc-row:first-of-type { border-top: 0; }
.sp-weg-b .wb-btn { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto 14px; align-items: center; gap: var(--s3); width: 100%; max-width: none; padding: var(--s4) 0; }
.sp-weg-b .wb-nr { font-size: var(--t-caption); color: var(--stone); }
.sp-weg-b .wb-t { font-size: var(--t-body); font-weight: var(--w-mid); line-height: 1.35; }
.sp-weg-b .wb-kosten { font-size: var(--t-body-s); color: var(--ink); white-space: nowrap; }
.sp-weg-b .acc-panel { padding: 0 0 var(--s5) 2.4em; }
.sp-weg-b .wb-uhr { margin-top: 0; }

@media (max-width: 720px) {
  .sp-weg-b .wb-kopf { grid-template-columns: minmax(0, 1fr); padding: var(--s5) var(--s5); }
  .sp-weg-b .wb-schritte { padding: var(--s2) var(--s5) var(--s3); }
  .art-body .sp-weg-b .wb-uhr { align-items: flex-start; text-align: left; max-width: none; margin-top: var(--s3); }
  .sp-weg-b .wb-btn { grid-template-columns: 2.4em minmax(0, 1fr) 14px; }
  .sp-weg-b .wb-kosten { grid-column: 2; }
}

/* --- Was es kostet: Datenbloecke im Lesetext --- */
.art-body .sp-kosten { max-width: none; }
.art-body .sp-kosten p, .art-body .sp-kosten h3 { max-width: 64ch; }
.art-body .sp-kosten .cost-rows { max-width: 48ch; margin: var(--s4) 0 var(--s8); }
.art-body .sp-kosten .cost-rows li { font-size: var(--t-body-s); }
.art-body .sp-kosten .bars { display: grid; gap: var(--s2); max-width: 56ch; margin: var(--s4) 0 var(--s8); }
.art-body .sp-kosten .bar-row { grid-template-columns: 168px minmax(0, 1fr) 56px; gap: var(--s3); }
.art-body .sp-kosten .bar-track { height: var(--s4); }
.art-body .sp-kosten .bar-value { font-size: var(--t-body-s); }
.art-body .sp-kosten .sp-kantone { margin-bottom: var(--s8); }

/* --- Der Knopf am Ende --- */
.art-body .sp-next { margin: var(--s6) 0; max-width: none; }
.art-body .sp-next .btn { white-space: normal; text-align: center; max-width: 100%; }

@media (max-width: 900px) {
  .sp-index .sp-filter { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
}
@media (max-width: 720px) {
  .sp-index.wrap { padding-top: var(--s8); }
  /* Drei Spalten passen auf 327 Pixel, wenn Name und Ort umbrechen duerfen:
     der Preis bleibt sichtbar, ohne dass jemand seitwaerts wischen muss.
     Die Tabelle im Lesetext (Kantone, Theorie) rollt weiter in .table-wrap. */
  .sp-index .sp-liste { min-width: 0; }
  .sp-index .sp-liste caption { display: none; }
  .sp-liste th, .sp-liste td { padding: var(--s3) var(--s2); }
  .sp-index .sp-liste tr.sp-gruppe th { padding-left: var(--s2); }
  .sp-liste .sp-ort { width: auto; }
  /* Preis und Spaltenkopf duerfen umbrechen: "50 min" in die zweite Zeile,
     sonst zwingt die Preisspalte die Tafel auf 510 Pixel (gemessen). */
  .sp-index .sp-liste thead th, .sp-index .sp-liste .sp-r { white-space: normal; }
  .sp-index .sp-liste .preis { flex-wrap: wrap; row-gap: 0; }
  .sp-index .sp-liste .preis .dauer { flex-basis: 100%; margin-left: 0; text-align: right; }
  .art-body .sp-kosten .bar-row { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .art-body .sp-kosten .bar-value { text-align: left; }
}

/* ==========================================================================
   DER PFAD — .wegleiste / .wegschritt / .wegnr / .wegtext / .wegfakten
   Herausgehoben aus guide.php am 18.09.2026, als /toefflipruefung/ als
   zweite Seite den Pfad brauchte (DESIGN.md Abschnitt 6: beim zweiten Mal
   ins Blatt). Die Regeln stehen woertlich wie dort, nur mit zwei Klassen
   je Waehler: dieses Blatt liegt VOR den erzeugten Regeln (Baumarke unten),
   und ".art-body h3" mit einer Klasse und einem Element haette den
   Schritttitel sonst ueberstimmt. guide.php behaelt nur, was allein die
   Anleitung braucht (die zwei Spalten, die Uhren, den Marker) — und die
   Quellenzeile .wegquelle: die verliert dort seit je gegen ".art-body p"
   und steht in 14 statt 12 Pixeln; mit zwei Klassen hier gewaenne sie
   ploetzlich, und die Anleitung saehe anders aus. Vorher/nachher am
   18.09.2026 im Browser verglichen: jede Eigenschaft gleich.
   ========================================================================== */
.wegleiste { list-style: none; margin: var(--s8, 32px) 0 0; padding: 0; position: relative; max-width: 60ch; }
/* Die Linie. Sie laeuft von der ersten bis zur letzten Nummer, nicht
   darueber hinaus — darum zwei Abstaende statt 100 %. */
.wegleiste::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px;
                     background: var(--hairline, rgba(0, 0, 0, .12)); }
.wegleiste .wegphase { position: relative; display: flex; align-items: center; gap: var(--s3, 12px);
                       margin: var(--s4, 16px) 0 var(--s4, 16px); padding-left: 52px;
                       font-size: var(--t-caption, 13px); letter-spacing: .08em; text-transform: uppercase;
                       color: var(--stone, #6b6b76); }
.wegleiste .wegphase::before { content: ""; position: absolute; left: 9px; top: 50%; width: 18px; height: 2px;
                               margin-top: -1px; background: var(--stone, #6b6b76); opacity: .45; }
.wegleiste > .wegphase:first-child { margin-top: 0; }
.wegleiste .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; }
/* Die Nummer sitzt AUF der Linie und deckt sie darum ab. */
.wegleiste .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. */
.wegleiste .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); }
.wegleiste .wegfakten { list-style: none; margin: var(--s3, 12px) 0 0; padding: 0; display: grid; gap: 4px; }
.wegleiste .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; }
.wegleiste .wegfakten i { font-style: normal; color: var(--stone, #6b6b76); }
.wegleiste .wegfakten span { color: var(--charcoal, #3a3a44); }
@media (max-width: 640px) {
  .wegleiste .wegfakten li { grid-template-columns: 7rem 1fr; }
}

/* WIEDERHERGESTELLT am 22.09.2026: dieser Block stand seit dem 17.09.2026
   (ec8cdb0) hier und wurde von 89baba5 — einem Commit ueber die Seite
   driving-licence — mit entfernt, offenbar aus Versehen: vier Seiten
   (angst, autofahren-im-alter, berufsausweise, toefflipruefung) haben
   Seitenregeln, die auf ihm aufbauen, und ihre Bildbloecke standen seither
   untereinander statt nebeneinander. Woertlich zurueckgeholt aus 89baba5^.
   Seither benutzt ihn auch /parkverbot-halteverbot/. */
/* ==========================================================================
   TEXT NEBEN FOTO — .mit-bild
   Herausgehoben aus angst.php am 17.09.2026, als /toefflipruefung/ als
   zweite Seite dieselben Bildbloecke brauchte (DESIGN.md Abschnitt 6: ein
   Baustein wandert in ein Blatt, sobald eine zweite Seite ihn braucht).
   Die Regeln stehen woertlich wie dort; die Begruendung, am 15.09.2026 am
   Bild abgelesen: die Rubrik (.sec-head) steht IN der Textspalte, sonst
   bleibt unter kurzem Text ein Loch; das Hochformat bekommt links eine
   eigene 300px-Spalte; der Absatz daneben braucht ein Mass. Das !important
   auf figure ist gegen styles/style.css Zeile 567 noetig
   (figure { display: flex !important }), sonst steht jede Legende NEBEN dem
   Bild. Untereinander (bis 860px) steht der Text zuerst, das Foto mit 40px
   Abstand darunter.
   ========================================================================== */
.mit-bild { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: var(--s10, 40px); align-items: start; }
.mit-bild.hochkant { grid-template-columns: 300px minmax(0, 1fr); }
.mit-bild.hochkant figure { order: 1; }
.mit-bild.hochkant .prosa { order: 2; max-width: 60ch; }
.mit-bild figure { margin: 0; display: block !important; }
.mit-bild .prosa { max-width: none; }
.mit-bild img { display: block; width: 100%; height: auto; border-radius: var(--r-paper, 18px); }
.mit-bild figcaption { display: block; width: 100%; margin-top: var(--s3, 12px);
                       font-size: var(--t-caption, 13px); line-height: 1.5;
                       color: var(--stone, #6b6b76); }
@media (max-width: 860px) {
  .mit-bild, .mit-bild.hochkant { grid-template-columns: minmax(0, 1fr); gap: var(--s10, 40px); }
  .mit-bild.hochkant figure { order: 2; }
  .mit-bild.hochkant .prosa { order: 1; max-width: none; }
  .mit-bild .sec-head { margin-bottom: var(--s5, 20px); }
  .mit-bild figure { max-width: 420px; }
}

/* BILDER MIT LEGENDE: DIE LEGENDE GEHOERT UNTER DAS BILD (22.09.2026).
   styles/style.css (2022) setzt JEDES <figure> mit
   "display: flex !important" in eine Zeile. Die Legende stand darum als
   schmale Spalte NEBEN dem Bild — live gemessen am 22.09.2026 auf
   /theoriepruefung-angst/ (beide Fotos) und in der Vorschau von
   /parkverbot-halteverbot/. Zwei Selektorteile schlagen den einen der alten
   Regel, auch gegen deren !important. Muss VOR der Baumarke stehen. */
.prosa figure, .mit-bild figure { display: block !important; }

/* ==========================================================================
   DIE ABSCHNITTE DER STARTSEITE UND DER INHALTSSEITEN
   DriveLab GmbH, 12.09.2026.

   Woertlich aus den <style>-Bloecken der Entwuerfe. Nichts nachgebaut,
   nichts umgeschrieben: die Entwuerfe SIND die Vorlage. Aufgenommen ist
   genau das, wofuer eine WordPress-Vorlage auch eine Klasse traegt; steht
   eine Regel schon in identity, bausteine, raster oder thema, wird sie nicht
   wiederholt — ausser in einem @media-Block, wo sie nur unterhalb einer
   Breite gilt und darum kein Doppel ist.

   Diese Datei wird gebaut, nicht von Hand gepflegt: tools/wp-css-bauen.py.
   Wer eine Vorlage um eine Klasse des Entwurfs erweitert, laesst das Skript
   noch einmal laufen.
   ========================================================================== */

:root {
  --graphite: var(--stone);
  --smoke: var(--paper-line-2);
  --t-h2-display: 40px;
  --tint-white: rgba(237,237,243,.09);
  --veil-bottom: var(--night-1);
  --veil-left: rgba(16,16,24,.45);
  --veil-mid: rgba(16,16,24,.58);
  --veil-top: rgba(16,16,24,.55);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--cobalt); color: var(--white);
  padding: var(--s3) var(--s5); border-radius: 0 0 var(--r-night) 0;
}
.skip:focus { left: 0; }
/* ---------- Kopfzeile ---------- */ .nav-float { transition: background-color .24s ease, border-color .24s ease; border-bottom: 1px solid transparent; }
/* Die Haarlinie muss hier wiederholt werden: .nav-float steht in dieser Datei
   und wuerde die Kante aus identity.css sonst ueberschreiben. */ .nav-solid { background: var(--glass); border-bottom-color: var(--night-line); }
.nav-right { display: flex; align-items: center; gap: var(--s3); }
.nav-toggle {
  display: none;
  width: 44px; height: 44px; flex: none;   /* Tippflaeche */
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--night-line-2);
  border-radius: var(--r-pill); color: var(--ivory); cursor: pointer;
}
.nav-toggle span { display: block; width: 16px; height: 1.5px; background: currentColor; position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: currentColor; }
.nav-toggle span::before { top: calc(var(--s1) * -1.5); }
.nav-toggle span::after { top: calc(var(--s1) *  1.5); }
.nav-panel {
  display: none;
  background: var(--glass);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--night-line);
  padding: var(--s4) var(--s6) var(--s8);
}
.nav-panel.is-open { display: block; }
.nav-panel a.nav-link { display: block; padding: var(--s3) 0; border-bottom: 1px solid var(--night-line); border-radius: 0; font-size: var(--t-body); }
.nav-panel .btn { width: 100%; margin-top: var(--s4); }
/* ---------- Held ---------- *//* Komposition links unten statt zentriert — die Abweichung und ihr Grund stehen
   im Kopf von identity.css. Kein zweiter Akzent: der Kicker ist entfallen,
   Kobalt traegt in dieser Bildschirmhoehe allein der Suchen-Knopf. */ .hero {
  position: relative;
  /* Der Held fuellt den ganzen ersten Bildschirm — so macht es auch die
     Referenz (100vw x 100vh). svh statt vh: auf dem Telefon rechnet vh mit
     eingeklappter Adressleiste und schneidet sonst unten ab. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: calc(var(--nav-h) + var(--s24)) 0 var(--s18);
  overflow: hidden;
  background: linear-gradient(160deg, var(--night-0), var(--ink-soft) 55%, var(--night-1));
}
/* Das echte Heldmedium der Live-Seite: poster.WebP aus dem Theme, 149 KB, lokal.
   Kein Fremdbild aus einem CDN. Das Video Autofahren_Video-todrive_compressed.mp4
   (24 MB) legt die Live-Seite ab Tablet darueber;im Entwurf bewusst nicht, damit das Seitengewicht messbar bleibt. */ .hero-media {
  position: absolute; inset: 0;
  background-image: url("../../wp-content/themes/toDriveHome/design/images/poster.WebP");
  background-size: cover; background-position: center 42%;
  /* Dasselbe hellere Bild wie beim Video — sonst waere der Held auf dem
     Telefon, wo nur das Standbild laeuft, deutlich dunkler als am Rechner. */
  filter: saturate(.92) contrast(1.04) brightness(1.28);
}
/* Das Video liegt UEBER dem Standbild und deckt es zu, sobald es laeuft.
   Faellt es aus — Telefon, Sparmodus, langsame Verbindung, reduzierte
   Bewegung —, bleibt einfach das Standbild stehen. Kein leeres Loch. */ .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  /* Heller und farbiger als vorher. saturate(.55) hat den Wald grau gewaschen;
     das Bild darf leben. Die Lesbarkeit haelt jetzt der gezielte Schleier
     unten links, nicht mehr das Abdunkeln des ganzen Bildes. */
  filter: saturate(.92) contrast(1.04) brightness(1.28);
  opacity: 0; transition: opacity .9s ease;
  z-index: 1;
}
.hero-video.is-playing { opacity: 1; }
/* EIN Schleier fuer Standbild und Video. Vorher gab es zwei, und beim Anlaufen
   des Videos sprang die Helligkeit sichtbar um. Er deckt nicht die Flaeche ab,
   sondern nur die Ecke unten links, in der Text steht — rechts und oben bleibt
   das Bild hell. */ .hero-veil {
  position: absolute; inset: 0;
  z-index: 1;   /* ueber dem Video, unter dem Text */
  background:
    /* 1 — Saum nach unten, damit der Held ohne Kante in den naechsten Abschnitt uebergeht */
    linear-gradient(to bottom,
      transparent 55%,
      color-mix(in srgb, var(--night-1) 55%, transparent) 82%,
      var(--veil-bottom) 100%),
    /* 2 — der eigentliche Textschleier: unten links stark, nach rechts oben weg */
    radial-gradient(120% 105% at 4% 96%,
      color-mix(in srgb, var(--night-0) 88%, transparent) 0%,
      color-mix(in srgb, var(--night-0) 72%, transparent) 32%,
      color-mix(in srgb, var(--night-0) 34%, transparent) 60%,
      transparent 82%),
    /* 3 — leichter Hauch oben, nur damit die Navigation lesbar bleibt.
           Nachgemessen am gerenderten Bild ohne Text: Median 10.2:1,
           1.2 % des Streifens unter 4.5:1 und das nur in den Luecken
           zwischen den Elementen, nicht unter Buchstaben. */
    linear-gradient(to bottom,
      color-mix(in srgb, var(--night-0) 50%, transparent) 0%,
      transparent 26%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero-type { max-width: 15ch; }
.hero .lede { max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); }
/* Mercurys Email-Capture, hier als Postleitzahl-Einstieg */ .capture { margin-top: var(--s12); max-width: 620px; }
.capture-form { display: flex; align-items: stretch; }
.capture-field {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--sans); font-size: var(--t-body); font-weight: var(--w-book);
  padding: var(--s4) var(--s6);
  color: var(--ivory);
  background: rgba(16,16,24,.42);
  background: color-mix(in srgb, var(--night-0) 42%, transparent);
  border: 1px solid var(--ivory); border-right: 0;
  border-radius: var(--r-pill) 0 0 var(--r-pill);
  outline: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.capture-field::placeholder { color: var(--ash); }
.capture-field:focus { border-color: var(--ice); }
.capture-btn {
  flex: none;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  padding: var(--s4) var(--s8);
}
.capture-cats { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); flex-wrap: wrap; }
.capture-cats .label { margin: 0 var(--s2) 0 0; }
.hero-foot {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s14);
  font-size: var(--t-caption); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ash-dim);
}
.hero-foot .line { flex: 1 1 auto; height: 1px; background: var(--night-line); }
/* Zwei Zeilen Platz fuer JEDE Ueberschrift, auch wenn sie nur eine braucht.
   "Lernfahrgesuch beantragen" bricht um, die Nachbarn nicht — dadurch standen
   Kosten, Dauer und Links der drei Karten auf verschiedenen Hoehen. *//* Zwei Knoepfe untereinander sahen ausgefranst aus: verschiedene Breiten,
   verschiedene Hoehen (btn-sm neben btn). Gleiche Breite, gleiche Hoehe. */ .knopfpaar { display: grid; gap: var(--s3); margin-top: var(--s10);
             grid-template-columns: max-content; }
.knopfpaar .btn { width: 100%; min-width: 19rem; }
.orte { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s6); }
.feld-ort { margin: 0 0 var(--s5); font-size: var(--t-body-s); color: var(--ash-dim); }
/* die uebrigen zehn — angedeutet, nicht erfunden */ .more-wrap { margin-top: var(--s10); padding-top: var(--s8); border-top: 1px solid var(--night-line); }
.more-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; }
.step-rest { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3); margin-top: var(--s8); }
.step-rest[hidden] { display: none; }
.step-rest a {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 44px; padding: var(--s3) var(--s5);
  border-radius: var(--r-night); background: var(--night-2);
  font-size: var(--t-body-s); color: var(--ash);
  transition: background-color .16s ease, color .16s ease;
}
.step-rest a:hover { background: var(--night-3); color: var(--ivory); }
.step-rest .n { font-weight: var(--w-mid); color: var(--ivory); }
/* ---------- Vergleichs-Vorschau ---------- */ .school-list { display: grid; gap: var(--s3); }
.school-card {
  display: grid;
  /* Feste Breiten fuer Preis und Knopf statt auto: eine auto-Spalte ist so
     breit wie ihr Inhalt, also bei "86.50 CHF" anders als bei "90 CHF" —
     und was danach bleibt, verteilt sich auf die fr-Spalten. Dadurch begann
     die Bewertungsspalte bei jeder Karte woanders. */
  grid-template-columns: 56px minmax(0, 1.5fr) minmax(0, 1fr) 132px 152px;
  align-items: center; gap: var(--s5);
  padding: var(--s5) var(--s6);
}
/* Alle Plaketten gleich: eine Fahrschule ist kein Farbcode. Drei verschiedene
   Toene nebeneinander waeren drei chromatische Noten — Kobalt ist die einzige. */ .school-logo {
  width: var(--s14); height: var(--s14); border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--night-3); color: var(--ivory);
  font-size: var(--t-body-s); font-weight: var(--w-mid); letter-spacing: -.01em;
}
.school-name { font-size: var(--t-body-l); font-weight: var(--w-mid); margin: 0; }
.school-place { margin: var(--s1) 0 0; font-size: var(--t-body-s); color: var(--ash-dim); }
.school-rating { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.school-merkmale { flex: 1 0 100%; }
.school-rating .val { font-size: var(--t-body-l); font-weight: var(--w-mid); }
/* Preis und Dauer stehen in einer Flexzeile;in einer 116px-Spalte passen "90 CHF" und "50 Min." nicht nebeneinander und liefen ueber den Knopf daneben. Jetzt bricht die Dauer in die zweite Zeile, rechtsbuendig. */ .school-card .school-price { flex-wrap: wrap; justify-content: flex-end; }
.school-card .school-price .dauer { flex: 1 0 100%; margin-left: 0; text-align: right; }
.school-price { text-align: right; }
.school-price .val { font-size: var(--t-h3); font-weight: var(--w-mid); color: var(--ivory); }
.school-price .unit { display: block; font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--ash-dim); margin-top: var(--s1); }
.school-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s6); }
/* ---------- Über todrive.ch ---------- */ .about { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s18); align-items: center; }
.about p { color: var(--ash); line-height: 1.7; margin: 0 0 var(--s5); }
/* Kein Kobalt-Verlauf, kein mix-blend-mode: Kobalt ist keine Dekoration.
   Nur entsaettigen und leicht zuruecknehmen. */ .about-media {
  border-radius: var(--r-night); overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--night-2);
}
.about-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); opacity: .82; }
.about-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); margin-top: var(--s8); padding-top: var(--s8); border-top: 1px solid var(--night-line); }
.about-facts dt { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ash-dim); margin-bottom: var(--s1); }
.about-facts dd { margin: 0; font-size: var(--t-body-s); color: var(--ash); line-height: 1.55; }
/* ---------- Abschluss ---------- *//* Das Band trennt sich ueber den Helligkeitsschritt allein — kein Verlauf,
   kein Ring. Der einzige Akzent dieser Bildschirmhoehe ist der Knopf darin. */ .cta-band {
  border-radius: var(--r-night);
  padding: var(--s18) var(--s12);
  text-align: center;
  background: var(--night-2);
}
.cta-band .lede { margin-left: auto; margin-right: auto; }
.cta-band .row { justify-content: center; margin-top: var(--s10); }
/* ---------- Fusszeile ---------- */ .foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: var(--s10); }
.foot-brand p { color: var(--ash); font-size: var(--t-body-s); line-height: 1.6; margin: var(--s4) 0 0; max-width: 30ch; }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.foot-list a { display: inline-block; padding: var(--s2) 0; }
/* Tippflaeche statt nackter Zeilenhoehe */ .foot-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap;
  margin-top: var(--s14); padding-top: var(--s6);
  border-top: 1px solid var(--night-line);
  font-size: var(--t-caption); color: var(--ash-dim);
}
.foot-bottom nav { display: flex; gap: var(--s5); flex-wrap: wrap; }
.foot-bottom a { padding: var(--s2) 0; display: inline-block; }
@media (max-width: 1080px) {
.nav-links, .nav-right .btn { display: none; }
.nav-toggle { display: inline-flex; }
.step-grid, .why-grid { grid-template-columns: 1fr 1fr; }
.step-rest { grid-template-columns: repeat(3, 1fr); }
.foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trust-grid { grid-template-columns: 1fr 1fr; }
.trust-tile:nth-child(-n+2) { border-bottom: 1px solid var(--night-line); }
/* Weiter ein Raster, nur schmaler. Als Flexbox begann die Bewertungsspalte
     bei jeder Karte woanders — je nachdem, wie lang der Name daneben ist.
     Sechs Karten, sechs verschiedene Kanten. In einem Raster steht die Spalte
     ueber alle Karten hinweg an derselben Stelle. */ .school-card { grid-template-columns: 48px minmax(0, 1.2fr) minmax(0, 1fr) 132px;
                 row-gap: var(--s4); }
.school-card .school-logo { width: 48px; height: 48px; }
.school-card > .btn { grid-column: 2 / -1; justify-self: start; }
.school-price { text-align: right; }
}
@media (max-width: 720px) {
.hero { min-height: 88vh; padding: calc(var(--nav-h) + var(--s14)) 0 var(--s12); }
.hero-type { max-width: none; }
.hero-actions .btn { flex: 1 1 100%; }
.capture-form { flex-direction: column; gap: var(--s3); }
.capture-field { border-right: 1px solid var(--ivory); border-radius: var(--r-pill); }
.capture-btn { border-radius: var(--r-pill); width: 100%; }
.step-grid, .why-grid, .about, .about-facts { grid-template-columns: 1fr; }
.about { gap: var(--s10); }
.step-rest { grid-template-columns: 1fr 1fr; }
.step-dl { grid-template-columns: 1fr 1fr; }
/* minmax(0,1fr) statt 1fr: sonst blaeht der laengste Link die Spur auf und
     die rechte Spalte laeuft ueber die Inhaltskante hinaus. */ .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.trust-tile { padding: var(--s6) var(--s5); }
.cta-band { padding: var(--s12) var(--s5); }
.sec-head { flex-direction: column; align-items: flex-start; gap: var(--s6); }
.school-price { text-align: left; }
/* Tippflaeche: auch reine Textlinks bekommen auf dem Telefon 44px Hoehe. */ .foot-list a, .foot-bottom a, .step-links a, .why-more, .nav-lang a, .logo {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}
@media (max-width: 420px) {
.foot-grid { grid-template-columns: minmax(0, 1fr); }
.trust-grid { grid-template-columns: minmax(0, 1fr); }
.trust-tile { border-bottom: 1px solid var(--night-line); }
}
/* ==========================================================================
   Anordnung fuer die Bausteine (04.09.2026)
   Nur Anordnung. Jede Farbe, jede Groesse, jeder Abstand kommt aus einer
   Variablen von identity.css — die Bausteine selbst stehen in bausteine.css
   und werden hier NICHT umdefiniert, nur platziert.
   ========================================================================== *//* ---------- Produktmodell direkt unter dem Helden ---------- */ .modellband {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: var(--s18); align-items: center;
}
.modellband .lede { max-width: 44ch; }
/* Buehne: die Schwebekarte (.dahinter) und die Schnipsel brauchen Luft nach
   aussen, sonst schneidet der Abschnitt sie an der Kante ab. */ .modell-buehne { position: relative; }
/* Die Schnipsel liegen AUF dem Modell, nicht daneben. Vorher hingen sie 96 px
   links ausserhalb und ragten aus dem Abschnitt heraus — sie sahen aus wie
   verrutscht statt aufgeklebt. Jetzt ueberlappen sie die Kante nur leicht. */
/* Das eigene Bild der Fahrschule steht links vom Namen — bei jeder Zeile
   gleich gross und gleich rund. Im Modell klein (--s8), damit die Zeilen
   schmal bleiben;es sagt nichts ueber Qualitaet aus. */ .modell-reihe > span:first-child { display: flex; align-items: center; gap: var(--s3); }
.modell-reihe .fs-bild-rund { width: var(--s8); height: var(--s8); }
.modell-name { font-size: var(--t-body); font-weight: var(--w-mid); margin: 0; color: var(--ivory); }
.modell-ort { margin: var(--s1) 0 0; font-size: var(--t-caption); color: var(--ash-dim); }
.modell-meta { display: flex; align-items: center; gap: var(--s4); }
.modell-bew { display: inline-flex; align-items: center; gap: var(--s1);
               font-size: var(--t-body-s); color: var(--gold); }
/* Der Stern ist als Flaeche gezeichnet, nicht als Strich. */ .modell-bew .gl { fill: currentColor; stroke: none; }
.modell-bew small { color: var(--ash-dim); }
/* Dichte Zeile: der Preis nimmt die naechstkleinere Stufe, damit vier Zeilen
   nebeneinander ruhig bleiben. Kein neuer Wert — eine andere Stufe. */ .modell .preis b { font-size: var(--t-sub); }
.modell-kopf, .modell-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding: var(--s3) var(--s4);
  font-size: var(--t-micro); color: var(--ash-dim);
}
.modell-kopf { border-bottom: 1px solid var(--night-line); }
.modell-fuss { border-top: 1px solid var(--night-line); }
.modell-legende { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin-top: var(--s8); }
/* ---------- Preisfeld: was eine Fahrstunde im ORT kostet ---------- */ .preisband { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
             gap: var(--s18); align-items: center; }
/* --- Verteilung statt Punktreihe ------------------------------------------
   Die flache Reihe sagte nur "zwischen 66.50 und 100". Die Kurve sagt, wo
   sich die Preise haeufen — dieselbe Grafik wie auf der Ortsseite, damit die
   Seiten dieselbe Sprache sprechen. */ .verteilung { position: relative; margin: var(--s10) 0 var(--s4); }
.verteilung .kurve { display: block; width: 100%; height: 150px; overflow: visible; }
.punkte { position: relative; height: 26px; margin-top: calc(var(--s2) * -1); }
.punkte .linie { position: absolute; left: 0; right: 0; top: 11px; height: 2px;
                 background: var(--night-4); border-radius: 2px; transform-origin: left; }
/* .laeuft steht vor der Bewegung auf scaleX(0). Ohne width bleibt davon ein
   Klotz am linken Rand stehen — mit width:100% ist die Linie null breit. */ .punkte .linie { width: 100%; }
/* Marken, keine Knoepfe: sie sagen "hier liegt ein Preis" und sonst nichts. */ .punkte span:not(.linie):not(.schnitt) {
  position: absolute; top: 6px; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: var(--ash-dim); opacity: .55;
}
/* Anfassbar wie auf der Ortsseite: der Zeiger faehrt ueber die Kurve, die
   Punkte fuellen sich, und darunter steht, wie viele Fahrschulen bis dorthin
   kosten. Nie welche. */ .verteilung .kurve { cursor: crosshair; touch-action: none; }
.verteilung .kurve:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
.verteilung .kurve .zeiger { stroke: var(--ivory); stroke-width: 1; opacity: 0; }
.verteilung .kurve .zeigerpunkt { fill: var(--ivory); opacity: 0; }
.verteilung .kurve.wird-angefasst .zeiger { opacity: .45; }
.verteilung .kurve.wird-angefasst .zeigerpunkt { opacity: 1; }
.punkte span:not(.linie) { transition: background-color .12s var(--mo-kurve),
                                       transform .12s var(--mo-kurve), opacity .12s var(--mo-kurve); }
.punkte span.ist-drin { background: var(--gold); opacity: 1; transform: scale(1.3); }
.kurve-lese { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
              margin: var(--s5) 0 0; min-height: 22px; font-size: var(--t-body-s); }
.kurve-lese b { font-family: var(--mono); color: var(--ivory); font-size: var(--t-body-l);
                letter-spacing: -.02em; }
.kurve-lese span { color: var(--ash); }
.kurve-lese .ruhe { color: var(--ash-dim); }
.punkte .schnitt { background: var(--gold); opacity: 1; width: 16px; height: 16px;
                   top: 4px; margin-left: -8px; box-shadow: 0 0 0 5px rgba(240,180,41,.18); }
.feld-karte { background: var(--night-2); border-radius: var(--r-night); padding: var(--s10); }
.feld-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
              gap: var(--s6); margin-bottom: var(--s12); }
.feld-stat { border-left: 2px solid var(--night-line); padding-left: var(--s5); }
/* Gold markiert den SCHNITT DES ORTES — keine Fahrschule. Kobalt bleibt die
   Handlungsfarbe der Knoepfe;Grafik und Bedienung duerfen nicht dieselbe Farbe tragen, sonst sieht eine Messung aus wie etwas zum Anklicken. */ .feld-stat.ist-schnitt { border-left-color: var(--gold); }
.feld-k { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .12em;
          text-transform: uppercase; color: var(--ash-dim); margin: 0 0 var(--s3); }
.feld-v { display: flex; align-items: baseline; gap: var(--s2); margin: 0; }
.feld-v .num { font-size: var(--t-h2); font-weight: var(--w-mid); letter-spacing: -.03em; color: var(--ivory); }
.feld-v .cur { font-size: var(--t-body-s); color: var(--ash-dim); letter-spacing: .06em; }
.feld-hinweis { margin: var(--s10) 0 0; padding-top: var(--s6);
                border-top: 1px solid var(--night-line);
                font-size: var(--t-body-s); color: var(--ash); line-height: 1.65; }
/* ---------- Schiene: alle 13 Schritte auf einen Blick ---------- *//* Umbruch statt Querlauf: auf 390 px stehen drei Schritte nebeneinander,
   die Spur bleibt in jeder Zeile erkennbar. */ .section-night .schiene { display: flex; gap: 0; margin: var(--s8) 0 var(--s4); padding: 0; list-style: none; }
.section-night .schiene li { flex: 1 1 0; min-width: 0; }
/* EINE Reihe. Frueher brachen 13 Namen auf drei Zeilen um und die Leiste
   sah kaputt aus. Jetzt tragen Punkte die Reihenfolge, und der Name des
   gewaehlten Schritts steht darunter — eine Zeile, immer an derselben Stelle. */ .section-night .sp { position: relative; display: block; width: 100%; height: 44px; padding: 0;
      background: none; border: 0; cursor: pointer; }
.section-night .sp::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px;
              background: var(--night-line-2); transform: translateY(-50%); }
.section-night .schiene li:first-child .sp::before { left: 50%; }
.section-night .schiene li:last-child .sp::before { right: 50%; }
.section-night .sp-punkt { position: absolute; top: 50%; left: 50%; width: 11px; height: 11px;
            margin: -5.5px 0 0 -5.5px; border-radius: var(--r-pill);
            background: var(--night-1); border: 1.5px solid var(--night-line-2);
            transition: background-color .18s var(--mo-kurve),
                        border-color .18s var(--mo-kurve), transform .18s var(--mo-kurve); }
.section-night .sp:hover .sp-punkt { border-color: var(--ivory); transform: scale(1.25); }
.section-night .sp[aria-pressed="true"] .sp-punkt { background: var(--cobalt); border-color: var(--cobalt);
                                     transform: scale(1.5); }
.schiene-anzeige { display: flex; align-items: baseline; gap: var(--s3); margin: 0;
                   min-height: var(--s6); flex-wrap: wrap; }
.section-night .schiene-nr { font-size: var(--t-body-s); color: var(--ash-dim); }
.section-night .schiene-titel { font-size: var(--t-body-l); font-weight: var(--w-mid); color: var(--ivory); }
.display-type .mark-ellipse { top: -30%; height: 165%; }
.section-night .schiene-hilfe { font-size: var(--t-body-s); color: var(--ash-dim); }
/* Die dreizehn Punkte laufen der Reihe nach ein — den Weg entlang, den sie
   beschreiben. .staffel reicht dafuer nicht: die gemeinsame Regel gibt ab
   dem siebten Kind allen dieselbe Verzoegerung. */ .schiene-laeuft > li:nth-child(1) { transition-delay: 0ms; }
.schiene-laeuft > li:nth-child(2) { transition-delay: 45ms; }
.schiene-laeuft > li:nth-child(3) { transition-delay: 90ms; }
.schiene-laeuft > li:nth-child(4) { transition-delay: 135ms; }
.schiene-laeuft > li:nth-child(5) { transition-delay: 180ms; }
.schiene-laeuft > li:nth-child(6) { transition-delay: 225ms; }
.schiene-laeuft > li:nth-child(7) { transition-delay: 270ms; }
.schiene-laeuft > li:nth-child(8) { transition-delay: 315ms; }
.schiene-laeuft > li:nth-child(9) { transition-delay: 360ms; }
.schiene-laeuft > li:nth-child(10) { transition-delay: 405ms; }
.schiene-laeuft > li:nth-child(11) { transition-delay: 450ms; }
.schiene-laeuft > li:nth-child(12) { transition-delay: 495ms; }
.schiene-laeuft > li:nth-child(13) { transition-delay: 540ms; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; }
/* ---------- Weitere Kosten auf dem Weg ---------- */ .kosten-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s8); }
.kosten-kachel { background: var(--night-2); border-radius: var(--r-night); padding: var(--s6);
                 display: flex; flex-direction: column; gap: var(--s3); }
.kosten-kachel .gl { color: var(--ash-dim); }
.kosten-name { margin: 0; font-size: var(--t-body-s); color: var(--ash); }
.kosten-wert { margin: 0; font-family: var(--mono); font-size: var(--t-h3);
               font-weight: var(--w-mid); letter-spacing: -.02em; color: var(--ivory); }
.school-merkmale { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s2); }
@media (max-width: 1080px) {
.modellband, .preisband { grid-template-columns: minmax(0, 1fr); gap: var(--s12); }
.kosten-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
/* Der Preis steht mit seiner Dauer zusammen — beides zusammen passt neben
     Namen und Bewertung nicht mehr, also bekommt es eine eigene Zeile. */ .school-card .school-price { flex: 1 0 100%; margin-left: 0; }
/* Drei Spalten passen nicht auf ein Telefon: der Preis bleibt oben rechts,
     Bewertung und Merkmale rutschen in eine zweite Zeile. */ .modell-reihe { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s2); }
.modell-reihe > :first-child { grid-column: 1; grid-row: 1; }
.modell-reihe > .preis { grid-column: 2; grid-row: 1; }
.modell-reihe > .modell-meta { grid-column: 1 / -1; grid-row: 2; }
.feld-karte { padding: var(--s6); }
.feld-stats { grid-template-columns: minmax(0, 1fr); gap: var(--s5); margin-bottom: var(--s8); }
}
@media (max-width: 420px) {
.kosten-strip { grid-template-columns: minmax(0, 1fr); }
}
/* Genau EIN gefuelltes Kobalt pro Bildschirm — die Logomarke traegt es nicht. */ .logo-mark { background: var(--ink); }
.foot .logo { color: var(--ivory); }
.foot .logo-mark { background: var(--night-3); }
.display-type, .h1-type { letter-spacing: -.05em; }
.h2-type, .h3-type { letter-spacing: -.02em; }
/* Die Anzeigeschrift dieser Seite IST die Serife — aufrecht. Kursiv ist der Akzent. */ .art-title, .sec-title { font-family: var(--serif); font-weight: 400; font-style: normal; letter-spacing: -.02em; }
.on-paper .eyebrow { color: var(--charcoal); letter-spacing: .12em; }
.on-paper .lede { color: var(--graphite); }
/* Plakette wie im Ratgeber: 16px Radius, 12px, Gewicht 500. */ .badge { font-size: var(--t-caption); font-weight: var(--w-mid); letter-spacing: 0;
         text-transform: none; padding: var(--s1) 10px; border-radius: var(--r-paper); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 60;
        background: var(--cobalt); color: var(--white);
        padding: var(--s3) var(--s5); border-radius: 0 0 var(--r-paper) 0; }
/* ---------- Kopfzeile: warme Leinwand, keine Trennlinie (wie im Ratgeber) ---------- */ .site-head { background: var(--paper-0); }
.nav { height: var(--nav-h); }
.nav-links { flex: 1 1 auto; gap: 0; }
.nav-link { font-weight: var(--w-mid); padding: 10px var(--s3); white-space: nowrap; }
.nav-links .btn + .btn { margin-left: var(--s2); }
.nav-actions { display: none; align-items: center; gap: var(--s3); }
.lang-switch { display: inline-flex; align-items: center; gap: var(--s1); margin-left: auto;
               font-size: var(--t-caption); font-weight: var(--w-mid);
               color: var(--graphite); letter-spacing: .04em; }
.lang-switch a { padding: var(--s1) var(--s2); border-radius: var(--r-pill); }
.lang-switch a[aria-current="true"] { color: var(--ink); background: var(--lavender); }
.lang-switch + .btn { margin-left: var(--s3); }
.nav-sep { display: none; }
.nav-toggle { display: none; }
@media (max-width: 1080px) {
.nav-links { display: none; }
.nav-links.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; left: var(--s6); right: var(--s6); top: var(--nav-h); z-index: 30;
    background: var(--paper-1); border: 1px solid var(--paper-line);
    border-radius: var(--r-paper); padding: var(--s3); box-shadow: var(--lift);
  }
.nav-links.is-open .nav-link { padding: var(--s3) var(--s4); }
.nav-links.is-open .lang-switch { margin: var(--s2) var(--s4); }
.nav-links.is-open .nav-sep { display: block; height: 1px; background: var(--paper-line); margin: var(--s2) 0; }
.nav-links.is-open .btn { margin-top: var(--s2); }
.nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    min-height: 44px; background: transparent; border: 1px solid var(--paper-line);
    border-radius: var(--r-pill); padding: var(--s3) var(--s4);
    font: var(--w-mid) var(--t-body-s)/1 var(--sans); color: var(--charcoal); cursor: pointer;
  }
.nav-actions { display: flex; }
.site-head .wrap { position: relative; }
}
/* ---------- Kopf der Seite ---------- *//* padding-block, nicht die Kurzform: diese Elemente tragen auch .wrap, und
   ein padding-Kurzbefehl loescht dessen seitliches Polster — der Text klebte
   auf 390px am Bildschirmrand. */ .art-head { padding-block: var(--s10) var(--s12); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
          font-size: var(--t-small); color: var(--graphite); margin-bottom: var(--s8); }
.crumbs a { color: var(--graphite); }
.crumbs a:hover { color: var(--charcoal); }
.crumbs span[aria-current] { color: var(--charcoal); }
.crumbs .sep { color: var(--stone); }
.art-title { max-width: 20ch; font-size: var(--t-display); line-height: 1.06; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
            margin-top: var(--s8); font-size: var(--t-body-s); color: var(--graphite); }
/* ---------- Schrittleiste: alle 13 auf einen Blick, wie auf der Startseite ----
   EINE Reihe Punkte. Der Name des gewaehlten Schritts steht darunter — immer an
   derselben Stelle, damit die Leiste nicht auf drei Zeilen zerfaellt. Die Punkte
   sind Anker: ein Klick springt zur Karte. Keine Rangfolge, nur Reihenfolge. */ .schiene { display: flex; gap: 0; margin: var(--s12) 0 var(--s3); padding: 0; list-style: none; }
.schiene li { flex: 1 1 0; min-width: 0; }
.sp { position: relative; display: block; width: 100%; height: 44px; text-decoration: none; }
.sp::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px;
              background: var(--paper-line-2); transform: translateY(-50%); }
.schiene li:first-child .sp::before { left: 50%; }
.schiene li:last-child .sp::before { right: 50%; }
.sp-punkt { position: absolute; top: 50%; left: 50%; width: 11px; height: 11px;
            margin: -5.5px 0 0 -5.5px; border-radius: var(--r-pill);
            background: var(--paper-1); border: 1.5px solid var(--paper-line-2);
            transition: background-color .18s var(--mo-kurve),
                        border-color .18s var(--mo-kurve), transform .18s var(--mo-kurve); }
.sp:hover .sp-punkt { border-color: var(--charcoal); transform: scale(1.25); }
.sp[aria-current="true"] .sp-punkt { background: var(--cobalt); border-color: var(--cobalt); transform: scale(1.5); }
.schiene-nr { font-size: var(--t-body-s); color: var(--stone); }
.schiene-titel { font-size: var(--t-body-l); font-weight: var(--w-mid); color: var(--charcoal); }
.schiene-hilfe { font-size: var(--t-body-s); color: var(--stone); }
/* ---------- Die dreizehn Karten ---------- */ .wrap.weg { padding-bottom: var(--s24); }
.sec-title { margin: 0; font-size: var(--t-h2-display); line-height: 1.15; }
.sec-head p { margin: var(--s4) 0 0; font-size: var(--t-body); line-height: 1.65; color: var(--graphite); }
.weg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.wkarte { display: flex; flex-direction: column; gap: var(--s4);
          padding: var(--s8); scroll-margin-top: var(--s10); }
.wkopf { display: flex; align-items: center; gap: var(--s4); }
.wglyph { width: var(--s12); height: var(--s12); border-radius: var(--r-pill); flex: none;
          background: var(--lavender); color: var(--ink); display: grid; place-items: center; }
.wnr { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .06em;
       color: var(--stone); display: block; margin-bottom: var(--s1); }
.wkarte h3 { margin: 0; font-size: var(--t-body-l); font-weight: var(--w-mid);
             line-height: 1.3; letter-spacing: -.02em; }
.wkarte p { margin: 0; }
.wfakten { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.wfakten li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
              font-size: var(--t-body-s); color: var(--graphite);
              border-bottom: 1px solid var(--paper-line); padding-bottom: var(--s2); }
.wfakten li:last-child { border-bottom: 0; padding-bottom: 0; }
.wfakten .num { color: var(--ink); white-space: nowrap; }
.wlinks { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
          padding-top: var(--s2); font-size: var(--t-body-s); font-weight: var(--w-mid); }
.wlinks a { color: var(--cobalt); display: inline-flex; align-items: center; gap: 6px; }
/* ---------- Was der Weg kostet ---------- */ .summe { padding: var(--s10); border-radius: var(--r-paper);
         display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--s18); align-items: center; }
.summe .eyebrow { color: var(--ice); }
.summe h2 { margin: 0 0 var(--s4); color: var(--white); max-width: 16ch;
            font-size: var(--t-h2-display); line-height: 1.15;
            font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.summe p { margin: 0 0 var(--s8); color: var(--lavender); font-size: var(--t-body); line-height: 1.65; max-width: 46ch; }
.summe-liste { list-style: none; margin: 0; padding: 0; }
.summe-liste li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
                  padding: var(--s3) 0; border-bottom: 1px solid rgba(255,255,255,.16);
                  border-bottom: 1px solid color-mix(in srgb, var(--white) 16%, transparent);
                  font-size: var(--t-body-s); color: var(--lavender); }
.summe-liste .num { color: var(--white); white-space: nowrap; }
.summe-offen { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
               margin: var(--s4) 0 0; padding-top: var(--s4);
               border-top: 1px solid rgba(255,255,255,.36);
               border-top: 1px solid color-mix(in srgb, var(--white) 36%, transparent); color: var(--white); }
.summe-offen b { font-weight: var(--w-mid); font-size: var(--t-body-s); }
.summe-offen .num { font-size: var(--t-h3); }
.summe-fuss { margin: var(--s3) 0 0; font-size: var(--t-caption); line-height: 1.5;
              color: rgba(255,255,255,.6); color: color-mix(in srgb, var(--white) 60%, transparent); }
@media (max-width: 1080px) {
.weg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.summe { grid-template-columns: minmax(0, 1fr); gap: var(--s10); }
.foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8); }
}
@media (max-width: 720px) {
.art-head { padding-block: var(--s6) var(--s10); }
/* minmax(0,1fr): eine blosse 1fr-Spalte nimmt die Inhaltsbreite als Minimum
     und wird von einem breiten Kind aufgeschoben — das ist der waagrechte
     Ueberlauf auf 390px. */ .weg-grid { grid-template-columns: minmax(0, 1fr); }
.wkarte { padding: var(--s6); }
.summe { padding: var(--s6); }
.schiene { margin-top: var(--s10); }
}
@media (pointer: coarse) {
.wlinks a, .foot-list a, .foot-bottom a, .lang-switch a, .crumbs a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}
/* Die Anzeigeschrift dieser Seite IST die Serife. Kursiv bleibt der Akzent. */ .art-title, .art-body h2, .schluss h2, .team h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -.02em;
}
.on-paper .field { border-color: var(--smoke); }
.on-paper .pill { border-color: var(--smoke); }
.on-paper .card-ink .btn-ghost { color: var(--ivory); border-color: var(--ivory); }
.on-paper .card-ink .btn-ghost:hover { background: rgba(237,237,243,.1); }
.btn-sm { min-height: 44px; }
/* --- Seitenkopf: links der Text, rechts eine ruhige Karte --- */ .art-head { padding: var(--s10) 0 var(--s12); overflow-x: clip; }
.head-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px;
  gap: var(--s24); align-items: center;
}
.art-title { max-width: 16ch; font-size: var(--t-display); line-height: 1.06; }
.art-title .em { font-size: 1.02em; }
/* Die Karte im Kopf: was auf todrive.ch liegt, als drei Wege — keine Zahl,
   keine Behauptung, drei Links. Dahinter der gemeinsame Verlaufskeil. */ .head-visual { position: relative; }
.wege-card { position: relative; padding: var(--s8); box-shadow: var(--lift); }
.wege-card h2 {
  margin: 0; font-size: var(--t-body-l); font-weight: var(--w-mid);
  line-height: 1.35; letter-spacing: -.02em; font-family: var(--sans);
}
.wege-card .eyebrow { margin-bottom: var(--s2); }
.wege { list-style: none; margin: var(--s6) 0 0; padding: 0; }
.wege li { border-bottom: 1px solid var(--paper-line); }
.wege li:last-child { border-bottom: 0; }
.wege a {
  display: grid; grid-template-columns: var(--s6) 1fr auto; gap: var(--s3);
  align-items: center; padding: var(--s4) 0; color: var(--charcoal);
}
.wege a:hover { text-decoration: none; color: var(--ink); }
.wege .gl { color: var(--stone); }
.wege b { display: block; font-weight: var(--w-mid); font-size: var(--t-body-s); }
.wege span.sub { display: block; font-size: var(--t-caption); color: var(--stone); line-height: 1.5; }
.wege .go { color: var(--cobalt); font-size: var(--t-body-s); }
.wege-foot { margin: var(--s5) 0 0; font-size: var(--t-caption); line-height: 1.5; color: var(--stone); }
/* --- Lesespalte --- */ .art-wrap { padding-bottom: var(--s18); }
.art-body { max-width: 68ch; }
.art-body p {
  font-size: var(--t-body-l); line-height: 1.7; margin: 0 0 var(--s5);
  color: var(--charcoal);
}
.art-body h2 {
  font-size: var(--t-h2-display); line-height: 1.15;
  margin: 0 0 var(--s5); scroll-margin-top: var(--s6);
}
.art-body h2 + p { margin-top: 0; }
.art-body strong { font-weight: var(--w-mid); color: var(--ink); }
.art-body a:not(.btn) {
  color: var(--cobalt); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.art-body .kapitel { margin: var(--s18) 0 var(--s3); color: var(--stone); }
.art-body .kapitel + h2 { margin-top: 0; }
.art-body section:first-of-type .kapitel { margin-top: 0; }
/* Merksatz in der Serife — dieselbe Form wie im Ratgeber. */ .pull { margin: var(--s12) 0; padding: 0 0 0 var(--s8); border-left: 2px solid var(--cobalt); }
.pull p {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: var(--t-h2); line-height: 1.3; letter-spacing: -.015em;
  color: var(--ink); margin: 0; max-width: 26ch;
}
.pull footer { margin-top: var(--s4); font-size: var(--t-body-s); color: var(--stone); }
/* --- Abschluss: der Weg in den Vergleich. --- */ .schluss { padding: 0 0 var(--s24); }
.schluss .card-ink { padding: var(--s12) var(--s10); }
.schluss .eyebrow { color: var(--ice); }
.schluss h2 { margin: 0 0 var(--s4); color: var(--white); max-width: 18ch; font-size: var(--t-h2-display); line-height: 1.15; }
.schluss p { margin: 0 0 var(--s8); color: var(--lavender); max-width: 52ch; font-size: var(--t-body); line-height: 1.7; }
.schluss .row { gap: var(--s3); }
.foot-brand p { color: var(--ash); font-size: var(--t-body-s); line-height: 1.6; margin: var(--s4) 0 0; max-width: 34ch; }
.foot-bottom {
  margin-top: var(--s14); padding-top: var(--s6);
  border-top: 1px solid var(--night-line);
  display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap;
  font-size: var(--t-caption); color: var(--ash-dim);
}
.foot-bottom a { display: inline-block; padding: var(--s2) 0; }
.foot-bottom .row { gap: var(--s5); }
@media (max-width: 1080px) {
.head-grid { grid-template-columns: minmax(0,1fr) 360px; gap: var(--s12); }
.foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s8); }
}
@media (max-width: 900px) {
/* minmax(0,1fr) statt 1fr: eine blosse 1fr-Spalte hat als Minimum die
     Inhaltsbreite und wird von einem breiten Kind aufgeschoben. */ .head-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
.head-visual { margin-top: var(--s10); }
.art-body { max-width: none; }
}
@media (max-width: 720px) {
.art-head { padding: var(--s6) 0 var(--s10); }
.art-body p { font-size: var(--t-body); }
.art-body .kapitel { margin-top: var(--s12); }
.pull { padding-left: var(--s5); margin: var(--s10) 0; }
.pull p { font-size: var(--t-h3); }
.wege-card, .schluss .card-ink { padding: var(--s6); }
.foot-grid { grid-template-columns: 1fr; gap: var(--s8); }
}
@media (pointer: coarse) {
.foot-list a, .foot-bottom a, .lang-switch a, .crumbs a, .wege a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
.wege a { display: grid; min-height: 44px; }
}
/* Die Anzeigeschrift dieser Seite IST die Serife — aufrecht. Kursiv ist der Akzent. */ .art-title, .art-body h2, .answers-title, .funnel h2, .more h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -.02em;
}
/* --- Kopf des Artikels: zweispaltig. Links der Text, rechts das Produktbild. --- */ .art-head { padding: var(--s10) 0 var(--s12); }
.art-title {
  max-width: 18ch;
  font-size: var(--t-display); line-height: 1.06;
}
/* Produktbild statt Stockfoto: die Kostenkarte, dahinter die eine gedrehte Ink-Karte
   — die einzige dekorative Geste der Seite. *//* Die gedrehte Ink-Karte hinter der Kostenkarte ragt bewusst ueber die
   Inhaltskante hinaus — rund 26px, davon 24px in das Polster der Spalte.
   Unter etwa 1240px Fensterbreite ragte sie damit auch ueber den
   Bildschirmrand, und die ganze Seite liess sich seitwaerts schieben.
   Der Schnitt sitzt an der Spalte, nicht am <body>: clip auf dem Koerper
   wandert in den Ansichtsbereich und nimmt dort das senkrechte Scrollen mit.
   clip statt hidden, damit kein Scroll-Container entsteht. */ .art-head { overflow-x: clip; }
.cost-card { position: relative; box-shadow: var(--lift); }
.cost-card h2 {
  margin: 0; font-size: var(--t-body-l); font-weight: var(--w-mid);
  line-height: 1.35; letter-spacing: -.02em;
}
.cost-card .eyebrow { margin-bottom: var(--s2); }
.cost-rows { list-style: none; margin: var(--s6) 0 0; padding: 0; }
.cost-rows li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) 0; border-bottom: 1px solid var(--paper-line);
  font-size: var(--t-body-s); color: var(--graphite);
}
.cost-rows li:last-child { border-bottom: 0; }
.cost-rows .num { color: var(--ink); white-space: nowrap; }
.cost-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  margin: var(--s4) 0 0; padding-top: var(--s4); border-top: 1px solid var(--paper-line);
}
.cost-total b { font-weight: var(--w-mid); font-size: var(--t-body-s); }
.cost-total .num { font-size: var(--t-h3); color: var(--ink); }
.cost-foot { margin: var(--s3) 0 0; font-size: var(--t-caption); line-height: 1.5; color: var(--stone); }
/* Der Verweis auf den Rechner, direkt unter der Karte, deren beweglicher
   Posten ein Fragezeichen traegt. Kein Knopf: er steht in einer Karte, die
   schon genug Gewicht hat, und soll wie eine Fortsetzung des Satzes darueber
   lesen, nicht wie eine Werbeflaeche. */
.cost-link { margin: var(--s4) 0 0; font-size: var(--t-body-s); }
.cost-link a { display: inline-flex; align-items: center; gap: var(--s2);
               color: var(--cobalt); font-weight: var(--w-mid); }
.cost-link a:hover { color: var(--ink); }
.cost-link .gl { transition: transform .2s ease; }
.cost-link a:hover .gl { transform: translateX(3px); }
/* --- Zweispaltiges Editorial-Raster --- */ .art-grid {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: var(--s24);
  align-items: start;
  padding-bottom: var(--s24);
}
.art-aside {
  position: sticky; top: var(--s6);
  max-height: calc(100vh - var(--s12)); overflow-y: auto;
  display: grid; gap: var(--s6);
}
/* Inhaltsverzeichnis */ .toc-title {
  font-size: var(--t-caption); font-weight: var(--w-semi);
  letter-spacing: .12em; text-transform: uppercase; color: var(--charcoal);
  margin: 0 0 var(--s4);
}
.toc { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; border-bottom: 1px solid var(--paper-line); }
.toc li:last-child { border-bottom: 0; }
.toc a {
  display: grid; grid-template-columns: var(--s6) 1fr; gap: var(--s2);
  padding: var(--s3) 0; font-size: var(--t-body-s); line-height: 1.45;
  color: var(--graphite);
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  letter-spacing: -.02em;
  font-size: var(--t-micro); color: var(--stone);
}
.toc a:hover { color: var(--charcoal); text-decoration: none; }
.toc a.is-current { color: var(--cobalt); font-weight: var(--w-mid); }
.toc a.is-current::before { color: var(--cobalt); opacity: 1; }
/* Trichter, kleine Fassung in der Randspalte */ .funnel-mini { padding: var(--s6); }
.funnel-mini h3 { font-size: var(--t-body-l); font-weight: var(--w-mid); line-height: 1.3; margin: 0 0 var(--s3); color: var(--white); }
.funnel-mini .checks { margin: 0 0 var(--s6); }
.funnel-mini .btn { width: 100%; }
.checks { display: grid; gap: var(--s2); font-size: var(--t-body-s); color: var(--lavender); }
.checks span { display: flex; align-items: center; gap: var(--s2); }
.checks svg { flex: none; color: var(--ice); }
/* --- Lesespalte --- */
/* Die Lesebreite haelt 68ch;die vollen Bausteine (Tabelle, Balken, Trichter, Schrittreihe) duerfen die ganze Spalte nutzen. */ .art-body { max-width: 100%; }
.art-body > * { max-width: 68ch; }
.art-body p.intro-lede { font-size: var(--t-sub); line-height: 1.6; color: var(--graphite); }
.art-body h2 {
  font-size: var(--t-h2-display); line-height: 1.15;
  margin: var(--s18) 0 var(--s5); scroll-margin-top: var(--s6);
}
.art-body h3 {
  font-size: var(--t-sub); font-weight: var(--w-mid); line-height: 1.35;
  margin: var(--s10) 0 var(--s4);
}
.art-body h2 + p, .art-body h3 + p { margin-top: 0; }
.section-anchor { scroll-margin-top: var(--s6); }
.art-list { margin: 0 0 var(--s5); padding: 0 0 0 var(--s5); }
.art-list li { font-size: var(--t-body-l); line-height: 1.7; margin-bottom: var(--s3); }
.art-list li::marker { color: var(--stone); }
/* --- Die wichtigsten Antworten: eigener zweispaltiger Abschnitt.
       Links klebend die Serifenueberschrift, rechts die Akkordeonzeilen. --- */ .answers-section { padding: var(--s8) 0 var(--s24); }
.answers-grid {
  display: grid; grid-template-columns: 380px minmax(0, 1fr);
  gap: var(--s24); align-items: start;
}
.answers-aside { position: sticky; top: var(--s10); }
.answers-title {
  margin: 0; font-size: var(--t-h2-display); line-height: 1.15;
}
.answers-note {
  margin: var(--s6) 0 0; max-width: 34ch;
  font-size: var(--t-caption); line-height: 1.6; color: var(--stone);
}
.acc-row { border-bottom: 1px solid var(--paper-line); }
.acc-row:first-of-type { border-top: 1px solid var(--paper-line); }
.acc-btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  width: 100%; text-align: left; background: transparent; border: 0;
  padding: var(--s6) 0; cursor: pointer;
  font: var(--w-mid) var(--t-body)/1.4 var(--sans);
  color: var(--charcoal); letter-spacing: -.01em;
}
.acc-btn:hover { color: var(--ink); }
.acc-btn .chev { flex: none; color: var(--graphite); transition: transform .22s ease, color .16s ease; }
.acc-btn[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--cobalt); }
.acc-panel { display: none; padding: 0 var(--s12) var(--s6) 0; }
.acc-panel.is-open { display: block; }
.acc-panel p { font-size: var(--t-body); line-height: 1.7; color: var(--charcoal); margin: 0; max-width: 62ch; }
.acc-panel p + p { margin-top: var(--s3); }
/* --- Trichter im Lesefluss --- */ .funnel {
  max-width: none; margin: var(--s14) 0;
  padding: var(--s10); border-radius: var(--r-paper);
}
.funnel .eyebrow { color: var(--ice); }
.funnel h2 { margin: 0 0 var(--s4); color: var(--white); max-width: 16ch; font-size: var(--t-h2-display); line-height: 1.15; }
.funnel .checks { font-size: var(--t-body); grid-auto-flow: column; grid-template-columns: repeat(3, max-content); gap: var(--s6); margin-bottom: var(--s8); }
.funnel-form { display: flex; gap: var(--s3); max-width: 520px; }
/* Rand bei .36 statt .22 — sonst ist die sichtbare Begrenzung unter 3:1 (WCAG 1.4.11). */ .funnel-form .field { flex: 1 1 auto; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.36); color: var(--white); border-radius: var(--r-paper); }
.funnel-form .field::placeholder { color: rgba(255,255,255,.55); }
.funnel-form .field:focus { border-color: var(--ice); }
.funnel-links { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s6); }
.funnel-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--t-body-s); font-weight: var(--w-mid);
  padding: var(--s3) var(--s4); border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.36); color: var(--white);
}
.funnel-links a:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.4); text-decoration: none; }
.funnel-note { margin: var(--s5) 0 0; font-size: var(--t-caption); color: rgba(255,255,255,.6); }
/* --- Kostentabelle --- */ .table-wrap {
  max-width: none; margin: var(--s6) 0 var(--s5);
  border: 1px solid var(--paper-line); border-radius: var(--r-paper);
  background: var(--paper-1); overflow-x: auto;
  /* min-width:0 ist noetig, damit overflow-x ueberhaupt greift: ein Kind im
     Raster hat sonst die Inhaltsbreite als Minimum und schiebt die Seite auf,
     statt in sich zu scrollen. Die Tabelle scrollt, die Seite nicht. */
  min-width: 0;
}
table.costs { width: 100%; border-collapse: collapse; min-width: 560px; }
table.costs caption {
  text-align: left; padding: var(--s6) var(--s6) var(--s4);
  font-size: var(--t-body-s); font-weight: var(--w-mid); color: var(--ink);
}
table.costs th, table.costs td {
  padding: 14px var(--s6); text-align: left;
  border-bottom: 1px solid var(--paper-line); font-size: var(--t-body-s);
}
table.costs thead th {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .12em;
  color: var(--stone); font-weight: var(--w-semi); padding-top: 0;
}
table.costs td.num, table.costs th.num, table.costs td.right { text-align: right; white-space: nowrap; }
table.costs td.num { font-size: var(--t-body); color: var(--ink); font-weight: var(--w-mid); }
table.costs td.right { color: var(--graphite); }
table.costs tbody tr:last-child td { border-bottom: 0; }
table.costs tbody tr:hover { background: var(--paper-0); }
table.costs .duty { color: var(--stone); font-size: var(--t-caption); }
table.costs .row-lead { font-weight: var(--w-mid); color: var(--charcoal); }
.table-note { max-width: none; margin: 0 0 var(--s5); font-size: var(--t-caption); color: var(--stone); line-height: 1.6; }
/* --- Kantonsvergleich, Balken in reinem CSS --- */ .bars { max-width: none; margin: var(--s6) 0 var(--s5); display: grid; gap: var(--s5); }
.bar-row { display: grid; grid-template-columns: 192px minmax(0,1fr) 96px; gap: var(--s4); align-items: center; }
.bar-label { font-size: var(--t-body-s); line-height: 1.35; }
.bar-label b { display: block; font-weight: var(--w-mid); color: var(--charcoal); }
.bar-label span { color: var(--stone); font-size: var(--t-caption); }
.bar-track { height: var(--s8); border-radius: var(--r-pill); background: var(--lavender); overflow: hidden; }
/* Die Bewegung selbst kommt aus dem gemeinsamen Vokabular: .laeuft in
   identity.css. Keine eigenen Keyframes, keine eigene Dauer, keine eigene
   Kurve — und damit auch dieselbe Abschaltung bei "Bewegung reduzieren". */ .bar-fill { display: block;   /* ein <span> ist sonst inline — und auf inline
                                 wirken weder width noch height noch transform.
                                 Genau darum standen vier leere Schienen da. */
             height: 100%; border-radius: var(--r-pill); background: var(--ink); }
.bar-row.is-avg .bar-fill { background: var(--ink-soft); opacity: .38; }
.bar-value { font-size: var(--t-body); color: var(--ink); text-align: right; }
/* Die Staffelung sitzt laut System auf den ELTERN;der bewegte Teil liegt hier eine Ebene tiefer im Balkengleis. Diese vier Zeilen reichen die Verzoegerung nur weiter — der Wert bleibt --mo-staffel aus identity.css. */ .bars.staffel > *:nth-child(1) .laeuft { transition-delay: calc(var(--mo-staffel) * 0); }
.bars.staffel > *:nth-child(2) .laeuft { transition-delay: calc(var(--mo-staffel) * 1); }
.bars.staffel > *:nth-child(3) .laeuft { transition-delay: calc(var(--mo-staffel) * 2); }
.bars.staffel > *:nth-child(4) .laeuft { transition-delay: calc(var(--mo-staffel) * 3); }
.bars-legend { max-width: none; display: flex; flex-wrap: wrap; gap: var(--s6); font-size: var(--t-caption); color: var(--graphite); margin-bottom: var(--s5); }
.bars-legend span { display: inline-flex; align-items: center; gap: var(--s2); }
.bars-legend i { display: block; width: var(--s6); height: var(--s2); border-radius: var(--r-pill); }
.key-canton { background: var(--ink); }
.key-avg { background: var(--ink-soft); opacity: .38; }
/* --- Merksatz --- */ .pull {
  max-width: none; margin: var(--s14) 0;
  padding: 0 0 0 var(--s8);
  border-left: 2px solid var(--cobalt);
}
.pull p {
  /* Kein font-variation-settings: ohne Fraunces liefert die Ersatzserife
     diese Achsen gar nicht — die Zeile hat nie gewirkt (siehe identity.css). */
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: var(--t-h2); line-height: 1.3; letter-spacing: -.015em;
  color: var(--ink); margin: 0; max-width: 24ch;
}
.step.card-ink h3 { color: var(--white); }
.step.card-ink p { color: var(--lavender); }
/* --- Weiterlesen. Keine harte Trennlinie, nur Weissraum. --- */ .more { padding: var(--s24) 0; }
.more h2 { font-size: var(--t-h2-display); line-height: 1.15; }
.more-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; margin-bottom: var(--s8); }
.read-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .18s ease, transform .18s ease; }
.read-card:hover { box-shadow: var(--lift); transform: translateY(calc(var(--s1) * -1)); }
.read-card .body { padding: var(--s8); display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
.read-card .badge { align-self: flex-start; }
.read-card h3 { margin: 0; font-size: var(--t-body-l); font-weight: var(--w-mid); line-height: 1.35; letter-spacing: -.02em; }
.read-card p { margin: 0; font-size: var(--t-body-s); line-height: 1.6; color: var(--graphite); }
.read-card .go { margin-top: auto; font-size: var(--t-body-s); font-weight: var(--w-mid); color: var(--cobalt); display: flex; align-items: center; gap: var(--s2); }
.read-card { position: relative; }
/* Die ganze Karte klickbar machen, OHNE den Link aus dem Textfluss zu nehmen.
   Vorher war der Anker selbst absolut gesetzt — dadurch fiel die Ueberschrift
   auf Hoehe null zusammen und ihr Text lag ueber der Plakette. Die Flaeche
   gehoert auf ein ::after, der Text bleibt stehen, wo er hingehoert. */ .read-card a.stretch { color: inherit; text-decoration: none; }
.read-card a.stretch::after { content: ""; position: absolute; inset: 0; }
.read-card:focus-within { outline: 2px solid var(--cobalt); outline-offset: 3px; }
/* --- Fusszeile. Unten Platz, damit das Chatfenster nichts verdeckt. --- *//* Dieselbe Fusszeile wie auf der Startseite: gleiche Spurverteilung, gleiche
   Zeilenabstaende, gleiche Toene aus identity.css statt eigener Weiss-Alpha. */ .foot { padding-bottom: var(--s32); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: var(--s10); }
/* Der Stift markiert Zahlen und Aussagen im Text — nie eine Fahrschule.
   Auf dem grossen Titel darf die Ellipse etwas weiter aussen liegen. */ .art-title .pen-target .mark-ellipse { left: -4%; width: 108%; }
/* Die geklammerte Kantonsspanne: eine Zahl des Landes, kein Urteil. */ .art-body p.kantons-spanne { color: var(--ink); font-weight: var(--w-mid); margin: var(--s6) 0 var(--s10); }
/* Preisfeld eines ORTES. Alle Punkte gleich gross, gleich hell: die Karte
   beschreibt Basel, nicht eine einzelne Fahrschule. */ .ort-card { max-width: none; margin: var(--s8) 0 var(--s5); padding: var(--s8); }
.ort-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; }
.ort-head h3 { margin: 0; font-size: var(--t-body-l); font-weight: var(--w-mid); letter-spacing: -.02em; }
.ort-head .preis { flex: none; }
.ort-card .preisfeld { color: var(--ink); margin-top: var(--s8); }
.ort-skala {
  display: flex; justify-content: space-between; gap: var(--s4);
  font-family: var(--mono); font-size: var(--t-caption); color: var(--stone);
}
.ort-card .muted { margin: var(--s5) 0 0; color: var(--stone); line-height: 1.6; }
/* Schnipsel am Trichter: ein echter Moment statt einer Behauptung. Sie ragen
   nur nach oben und unten aus der Karte — seitwaerts wuerde die Seite bei
   schmalen Fenstern schiebbar. Unter 720px legt bausteine.css sie in den Fluss. */ .funnel { position: relative; }
.schnipsel-oben { top: calc(var(--s10) * -1); right: var(--s6); }
.schnipsel .preis { margin: var(--s1) 0 0; }
/* .schnipsel b ist die kleine Grossbuchstabenzeile;im Preis gilt der Preis. */ .schnipsel .preis b { display: inline; margin: 0; text-transform: none; letter-spacing: -.03em; font-size: var(--t-sub); color: var(--ink); }
.schnipsel .merkmale { margin: var(--s2) 0 0; gap: var(--s2) var(--s4); }
.schnipsel p { margin: var(--s2) 0 0; font-size: var(--t-micro); line-height: 1.5; color: var(--stone); }
@media (max-width: 1080px) {
.art-grid { grid-template-columns: 220px minmax(0,1fr); gap: var(--s12); }
.answers-grid { grid-template-columns: 300px minmax(0,1fr); gap: var(--s12); }
.funnel .checks { grid-auto-flow: row; grid-template-columns: 1fr; gap: var(--s2); }
}
@media (max-width: 900px) {
/* minmax(0,1fr) statt 1fr: eine blosse 1fr-Spalte hat als Minimum die
     Inhaltsbreite und wird darum von einem breiten Kind aufgeschoben — das
     war der waagrechte Ueberlauf auf dem Telefon (586px statt 390px). */ .art-grid, .head-grid, .answers-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
.art-aside, .art-body, .answers-aside { min-width: 0; }
.art-aside { position: static; max-height: none; overflow: visible; }
.answers-aside { position: static; }
.bar-row { grid-template-columns: 1fr; gap: var(--s2); }
.bar-value { text-align: left; }
.bar-track { height: var(--s6); }
}
@media (max-width: 720px) {
.answers-section { padding: var(--s6) 0 var(--s14); }
.funnel { padding: var(--s6); margin: var(--s10) 0; }
.funnel-form { flex-direction: column; }
.funnel-form .btn { width: 100%; }
.art-body p, .art-list li { font-size: var(--t-body); }
.pull { padding-left: var(--s5); }
.acc-btn { padding: var(--s5) 0; }
.acc-panel { padding-right: 0; }
.ort-card { padding: var(--s6); }
/* Tippflaeche wie auf der Startseite: auch reine Textlinks 44px hoch. */ .foot-list a, .foot-bottom a, .lang-switch a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}
/* Die Anzeigeschrift auf Papier IST die Serife — aufrecht. */ .seite-titel, .block-titel { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
@media (max-width: 1080px) {
.nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    background: transparent; border: 1px solid var(--paper-line);
    border-radius: var(--r-pill); padding: var(--s3) var(--s4);
    font: var(--w-mid) var(--t-body-s)/1 var(--sans);
    color: var(--charcoal); cursor: pointer;
  }
}
/* --- Seitenkopf --- */ .kopf { padding: var(--s10) 0 var(--s12); }
.seite-titel { font-size: var(--t-display); line-height: 1.06; margin: 0; }
/* Der Stift gehoert der Lernenden: er liegt unter dem Titel der Seite,
   nie ueber einer Fahrschule. */ .seite-titel .mark-underline { bottom: -30%; }
.kopf .lede { margin-top: var(--s6); max-width: 46ch; }
.kopf .lede b { font-weight: var(--w-mid); color: var(--charcoal); }
/* --- Die drei Wege, gleichwertig nebeneinander, Zeiten daneben --- *//* stretch statt start: die vier Karten sind eine Reihe und stehen darum auf
   gleicher Hoehe. Mit "start" war die Erreichbarkeitskarte so hoch wie ihr
   Text — laenger als die drei daneben, und die Reihe wirkte verrutscht. */ .wege-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s12); align-items: stretch; padding-bottom: var(--s18);
}
/* Alle drei Karten identisch: gleicher Rahmen, gleiche Groesse, gleiches
   Gewicht. Kein Weg ist der empfohlene. */ .card-paper.weg { position: relative; display: flex; flex-direction: column; gap: var(--s2); }
.weg-mark {
  width: var(--s12); height: var(--s12); border-radius: 50%;
  background: var(--lavender); color: var(--ink);
  display: grid; place-items: center; margin-bottom: var(--s4);
}
.weg h2 { margin: 0; font-size: var(--t-body-l); font-weight: var(--w-mid); letter-spacing: -.02em; }
.weg .wert { font-size: var(--t-body); line-height: 1.45; color: var(--ink); word-break: break-word; }
.weg .wert.num { letter-spacing: -.01em; }
.weg p { margin: 0; font-size: var(--t-body-s); line-height: 1.6; color: var(--graphite); }
/* Ganze Karte klickbar, ohne den Link aus dem Textfluss zu nehmen. */ .weg a.stretch { color: inherit; text-decoration: none; }
.weg a.stretch::after { content: ""; position: absolute; inset: 0; }
.weg:focus-within { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.weg:hover { border-color: var(--smoke); }
.zeiten { display: grid; gap: var(--s3); align-content: start; }
.zeiten .weg-mark { margin-bottom: var(--s2); }
.zeiten h2 { margin: 0; font-size: var(--t-body-l); font-weight: var(--w-mid); letter-spacing: -.02em; }
.zeiten .tage { margin: 0; font-size: var(--t-body); color: var(--charcoal); }
.zeiten .zeit { margin: 0; font-size: var(--t-h3); color: var(--ink); }
.zeiten .muted { margin: 0; line-height: 1.6; }
/* --- Formular. Links die Ansage und der Hinweis, rechts die Felder. --- */ .form-abschnitt { padding-bottom: var(--s24); }
.form-grid {
  display: grid; grid-template-columns: 380px minmax(0, 1fr);
  gap: var(--s12); align-items: start;
}
.block-titel { margin: 0; font-size: var(--t-h2-display); line-height: 1.15; }
.form-aside > p { margin: var(--s5) 0 0; font-size: var(--t-body); line-height: 1.7; color: var(--graphite); max-width: 38ch; }
/* Hinweis: eine Anfrage an eine bestimmte Fahrschule gehoert auf deren Profil. */ .hinweis { margin-top: var(--s8); padding: var(--s6); border-radius: var(--r-paper); }
.hinweis h3 { margin: 0 0 var(--s3); font-size: var(--t-body-l); font-weight: var(--w-mid); line-height: 1.3; color: var(--white); }
.hinweis p { margin: 0 0 var(--s5); font-size: var(--t-body-s); line-height: 1.6; color: var(--lavender); }
.hinweis .row { gap: var(--s2); }
.kontakt-form { display: grid; gap: var(--s5); }
.feld-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.kontakt-form textarea.field { min-height: 168px; resize: vertical; line-height: 1.6; }
.form-fuss { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.form-note { margin: 0; font-size: var(--t-body-s); line-height: 1.5; color: var(--graphite); }
@media (max-width: 1080px) {
.wege-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
.form-grid { grid-template-columns: 320px minmax(0, 1fr); gap: var(--s10); }
}
@media (max-width: 900px) {
.form-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
.form-aside > p { max-width: none; }
}
@media (max-width: 720px) {
.kopf { padding: var(--s6) 0 var(--s10); }
.wege-grid .wege { grid-template-columns: minmax(0, 1fr); }
.feld-paar { grid-template-columns: minmax(0, 1fr); }
.form-fuss .btn { width: 100%; }
}
@media (pointer: coarse) {
.btn, .foot-list a, .foot-bottom a, .lang-switch a, .crumbs a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}
/* Die Anzeigeschrift dieser Seite IST die Serife, aufrecht. */ .seite-titel, .art-body h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -.02em;
}
.kopf .lede { max-width: 56ch; }
.kopf .art-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin-top: var(--s8);
}
/* --- Der Koerper: schmale Lesespalte, daneben die Karte mit den Angaben. --- */ .seiten-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--s18); align-items: start;
  padding-bottom: var(--s24);
}
/* Die Karte bleibt beim Lesen stehen: die Anschrift ist das, was man auf einer
   Impressumsseite sucht. */ .angaben-card { position: sticky; top: var(--s6); padding: var(--s8); box-shadow: var(--lift); }
.angaben-card h2 {
  margin: 0; font-family: var(--sans);
  font-size: var(--t-body-l); font-weight: var(--w-mid);
  line-height: 1.35; letter-spacing: -.02em;
}
.angaben-card .eyebrow { margin-bottom: var(--s2); }
.firma { margin: var(--s6) 0 0; font-size: var(--t-body-l); line-height: 1.6; color: var(--ink); font-style: normal; }
.firma b { display: block; font-weight: var(--w-mid); }
.daten { margin: var(--s6) 0 0; padding: var(--s6) 0 0; border-top: 1px solid var(--paper-line); display: grid; gap: var(--s5); }
.daten > div { display: grid; grid-template-columns: var(--s6) 1fr; gap: var(--s3); align-items: start; }
.daten .gl { color: var(--stone); margin-top: 2px; }
.daten dt { font-size: var(--t-caption); color: var(--stone); letter-spacing: .04em; }
.daten dd { margin: 2px 0 0; font-size: var(--t-body); line-height: 1.45; color: var(--charcoal); word-break: break-word; }
.daten dd a { color: var(--cobalt); }
.daten dd.num { letter-spacing: -.01em; }
/* --- Lesespalte --- */ .art-body { max-width: 62ch; }
.art-body h2 {
  font-size: var(--t-h2-display); line-height: 1.2;
  margin: 0 0 var(--s5); scroll-margin-top: var(--s6);
}
.art-body h2 + p, .art-body h2 + .platzhalter { margin-top: 0; }
.art-body .kapitel { margin: var(--s14) 0 var(--s3); color: var(--stone); }
.platzhalter .gl { color: var(--stone); margin-top: 2px; }
/* --- Nachbarseiten: nur Verweise, keine Werbung. --- */ .nachbarn { margin-top: var(--s14); padding-top: var(--s6); border-top: 1px solid var(--paper-line); }
.nachbarn h2 { font-family: var(--sans); font-size: var(--t-body-l); font-weight: var(--w-mid); margin: 0 0 var(--s4); letter-spacing: -.02em; }
.nachbarn ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.nachbarn a { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) 0; color: var(--cobalt); font-size: var(--t-body); }
@media (max-width: 1080px) {
.seiten-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s12); }
}
@media (max-width: 900px) {
/* minmax(0,1fr) statt 1fr: eine blosse 1fr-Spalte hat als Minimum die
     Inhaltsbreite und wird von einem breiten Kind aufgeschoben. */ .seiten-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s10); }
/* Die Karte steht dann zuerst — die Anschrift ist der Grund des Besuchs. */ .angaben-spalte { order: -1; }
.angaben-card { position: static; }
}
@media (max-width: 720px) {
.angaben-card { padding: var(--s6); }
}
@media (pointer: coarse) {
.foot-list a, .foot-bottom a, .lang-switch a, .crumbs a, .nachbarn a, .daten dd a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}
.nav-solid {
    background: rgba(23,23,33,.84);
    background: color-mix(in srgb, var(--night-1) 84%, transparent);
    border-bottom-color: var(--night-line);
  }
.nav-panel {
    display: none;
    background: color-mix(in srgb, var(--night-1) 84%, transparent);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--night-line);
    padding: var(--s4) var(--s6) var(--s8);
  }
/* Die Kopfzeile liegt fix ueber der Seite: der Inhalt polstert mit --nav-h
     vor, statt eine Magic Number zu setzen. */ .seite { padding: calc(var(--nav-h) + var(--s12)) 0 0; overflow-x: clip; }
.kopf:not(.wrap):not(.nacht-insel) { max-width: 74ch; }
.kopf .lede { margin-top: var(--s4); }
.kopf-actions { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s8); }
/* ---------- Zweispaltig: Produktmodell links, die Punkte rechts ---------- */ .split {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--s18);
    /* stretch, damit beide Spalten auf derselben Linie enden. Links steht
       das Produktmodell (feste Hoehe), rechts drei Texte — rechts blieben
       138px leer (gemessen 903 gegen 765). Dima, 09.09.2026: "das sollte so
       organisiert sein, dass beide gleich viel Platz einnehmen".
       Wichtig: die Luecke wird NICHT unten angehaengt, sondern zwischen die
       drei Punkte verteilt (siehe .liste weiter unten). Ein Kasten mit
       leerem Boden ist genau der Fehler, den wir auf der Portalseite schon
       hatten; verteilte Luft dagegen sieht gewollt aus, weil die
       Trennlinien dann gleichmaessig sitzen. */
    align-items: stretch;
    margin-top: var(--s18);
  }
.col, .col-links { min-width: 0; display: flex; flex-direction: column; }
/* Buehne: traegt .dahinter, die leicht gedrehte Karte hinter dem Modell.
     Das Aussenpolster gibt ihr den Platz, den sie uebersteht. */ .buehne { position: relative; margin: 0 0 var(--s6); }
/* Das Bild sitzt buendig unter der Adresszeile — die Karte rundet selbst. */ .modell .fs-bild-quer { border-radius: 0; }
.modell-kopf { padding: var(--s5) var(--s4); border-bottom: 1px solid var(--night-line); }
.modell-kopf h3 { margin: 0; font-size: var(--t-body-l); font-weight: var(--w-mid); color: var(--ivory); line-height: 1.3; }
/* Kein "·" zwischen den Angaben: beim Umbruch bliebe ein einzelner Punkt am
     Zeilenende stehen. Der breitere waagrechte Abstand trennt genauso gut. */ .modell-zeile {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5);
    margin: var(--s3) 0 0; font-size: var(--t-caption); color: var(--ash-dim);
  }
.modell-zeile .stars { font-size: var(--t-caption); }
.modell-kopf .preis { margin-top: var(--s5); color: var(--ivory); }
.modell-reihe .k { color: var(--ash-dim); font-size: var(--t-body-s); }
.modell-reihe .v { color: var(--ash); font-size: var(--t-body-s); text-align: right; }
.modell-reihe .gl { color: var(--ash-dim); }
.modell-fuss { padding: var(--s4); border-top: 1px solid var(--night-line); }
.modell-fuss .muted { margin: var(--s3) 0 0; font-size: var(--t-micro); }
.buehne-sub { margin: var(--s6) 0 0; font-size: var(--t-body); color: var(--ash); line-height: 1.6; }
/* ---------- Zeile mit Zeichen: einmal fuer die Profilpunkte ----------
     Ein Zeichen ohne Wort raet — darum nie ohne die Zeile daneben. *//* Die Liste nimmt die uebrige Hoehe der Spalte und verteilt sie zwischen
     ihren Punkten — nicht darunter. */ .liste { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; gap: var(--s1);
           flex: 1; align-content: space-between; }
.liste li {
    display: grid; grid-template-columns: var(--s12) 1fr; gap: var(--s4);
    padding: var(--s5) 0;
    border-top: 1px solid var(--night-line);
    align-items: start;
  }
.liste li > .gl {
    width: var(--s12); height: var(--s12); padding: var(--s3);
    border-radius: var(--r-pill); background: var(--night-3); color: var(--ivory);
    box-sizing: border-box;
  }
.liste li b { display: block; color: var(--ivory); font-weight: var(--w-mid); font-size: var(--t-body-l); margin-bottom: var(--s2); }
.liste li p { margin: 0; font-size: var(--t-body); color: var(--ash); line-height: 1.6; }
.liste-fuss { margin: var(--s5) 0 0; font-size: var(--t-body-s); color: var(--ash-dim); line-height: 1.55; }
/* ---------- Die drei Schritte einer Anfrage ---------- */ .schritt .gl { color: var(--ash-dim); }
.schritt .kapitel { margin: var(--s4) 0 var(--s3); color: var(--ash-dim); }
.schritt h3 { margin: 0; }
.schritt p { margin: var(--s3) 0 0; font-size: var(--t-body); color: var(--ash); line-height: 1.6; }
/* ---------- Abschlusskarte ---------- */ .pane { background: var(--night-2); border-radius: var(--r-night); padding: var(--s12); }
.pane h2 { margin: 0; }
.pane-lede { color: var(--ash); font-size: var(--t-body); margin: var(--s4) 0 0; max-width: 56ch; }
.actions { display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap; margin-top: var(--s8); }
.linkish {
    display: inline-flex; align-items: center;
    font-size: var(--t-body-s); font-weight: var(--w-mid);
    color: var(--ice); text-decoration: underline; text-underline-offset: var(--s1);
  }
.linkish:hover { color: var(--ice-bright); }
/* ---------- Hilfestreifen ---------- */ .helpbar {
    margin-top: var(--s18); padding-top: var(--s8);
    border-top: 1px solid var(--night-line);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s10);
  }
.helpbar .gl { color: var(--ash-dim); margin-bottom: var(--s3); }
.helpbar h4 { font-size: var(--t-caption); text-transform: uppercase; letter-spacing: .12em;
                color: var(--ash-dim); margin: 0 0 var(--s3); font-weight: var(--w-semi); }
.helpbar p { margin: 0; font-size: var(--t-body-s); color: var(--ash); line-height: 1.6; }
@media (pointer: coarse) {
.foot-list a, .foot-bottom a, .nav-lang a, .logo, .linkish {
      min-height: 44px; display: inline-flex; align-items: center;
    }
}
@media (max-width: 1080px) {
.split { grid-template-columns: 1fr; gap: var(--s12); margin-top: var(--s12); }
/* Untereinander gibt es keine gemeinsame Linie mehr, die man halten
       muesste — dann bloss keine gedehnte Liste. */ .liste { flex: none; align-content: start; }
.helpbar { grid-template-columns: 1fr; gap: var(--s6); }
}
@media (max-width: 720px) {
.seite { padding-top: calc(var(--nav-h) + var(--s6)); }
.pane { padding: var(--s6); }
/* Lange Beschriftungen duerfen umbrechen — .btn erbt sonst nowrap und
       schiebt die Seite bei 390px waagrecht auf. */ .kopf-actions .btn, .actions .btn { white-space: normal; line-height: 1.25; }
.buehne { margin-bottom: 0; }
.modell-reihe { gap: var(--s3); padding: var(--s3); }
.modell-reihe .v { font-size: var(--t-caption); }
}
/* Die Anzeigeschrift auf Papier IST die Serife — aufrecht. */ .seite-titel, .rubrik-titel { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.seite-titel { font-size: var(--t-display); line-height: 1.06; margin: 0; max-width: 20ch; }
/* Der Stift gehoert der Lernenden: er liegt unter dem Wort, das die Aufgabe
   der Seite traegt — nie ueber einer Fahrschule. */ .seite-titel .mark-underline { bottom: -26%; }
.kopf .lede { margin-top: var(--s6); max-width: 54ch; }
.suche-feld .gl {
  position: absolute; left: var(--s5); top: 50%; margin-top: calc(var(--s6) / -2);
  color: var(--stone); pointer-events: none;
}
.suche-feld .field { padding-left: var(--s12); }
/* --- Sprungmarken zu den fuenf Rubriken --- */ .sprung { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s10); }
.sprung a {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-body-s); font-weight: var(--w-mid);
  padding: var(--s2) var(--s4); border-radius: var(--r-pill);
  border: 1px solid var(--smoke); color: var(--charcoal);
}
.sprung a:hover { border-color: var(--cobalt); background: var(--lavender); color: var(--ink); text-decoration: none; }
.sprung a i {
  font-family: var(--mono); font-style: normal; font-size: var(--t-micro); color: var(--stone);
}
/* --- Eine Rubrik --- */ .rubrik { padding: 0 0 var(--s18); scroll-margin-top: var(--s6); }
.rubrik-kopf { margin-bottom: var(--s8); }
.rubrik .kapitel { color: var(--stone); margin-bottom: var(--s3); }
.rubrik-titel { margin: 0; font-size: var(--t-h2-display); line-height: 1.15; max-width: 24ch; }
/* --- Die Karten. Alle gleich gross, gleich hell, in der Reihenfolge der
       Rubrik — keine Hervorhebung, kein „meistgelesen“. --- */ .karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.karte {
  display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--s6); color: var(--charcoal);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.karte:hover {
  box-shadow: var(--lift); transform: translateY(calc(var(--s1) * -1));
  border-color: var(--smoke); text-decoration: none;
}
.karte-glyph {
  width: var(--s10); height: var(--s10); flex: none;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--lavender); color: var(--ink);
}
.karte-titel {
  font-size: var(--t-body-l); font-weight: var(--w-mid); line-height: 1.35;
  letter-spacing: -.02em; color: var(--ink);
}
.karte:hover .karte-titel { text-decoration: underline; text-underline-offset: 3px; }
.karte-fuss {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); font-size: var(--t-body-s); font-weight: var(--w-mid); color: var(--cobalt);
}
.karte-fuss .gl { color: var(--cobalt); }
.karte .badge { align-self: flex-start; }
/* --- Abschluss: der Weg zurueck in den Vergleich --- */ .abschluss { margin: 0 0 var(--s24); padding: var(--s10); }
.abschluss h2 { margin: 0 0 var(--s4); color: var(--white); font-size: var(--t-h2-display);
                line-height: 1.15; max-width: 18ch;
                font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.abschluss .eyebrow { color: var(--lavender); }
.abschluss p { margin: 0; color: var(--lavender); font-size: var(--t-body); line-height: 1.65; max-width: 56ch; }
.abschluss .row { margin-top: var(--s8); }
/* --- Fusszeile --- */ .foot { padding-bottom: var(--s24); }
@media (max-width: 1080px) {
.karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.seite-titel { max-width: none; }
.suche-form .btn { width: 100%; }
.karten { grid-template-columns: minmax(0, 1fr); }
.rubrik { padding-bottom: var(--s12); }
.abschluss { padding: var(--s6); }
.abschluss .row .btn { flex: 1 1 100%; }
}
@media (pointer: coarse) {
.foot-list a, .foot-bottom a, .lang-switch a, .sprung a, .logo {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}
/* ---------- Kopf ----------
   Kein Vollbild-Held: hier steht kein Angebot, sondern eine Auskunft. Der
   Kopf nimmt nur die Hoehe, die der Satz braucht, damit die drei Wege
   darunter auf einem Telefon noch angeschnitten sichtbar sind. */ .kopf.nacht-insel {
  padding: calc(var(--nav-h) + var(--s24)) 0 var(--s18);
  background: linear-gradient(160deg, var(--night-0), var(--ink-soft) 55%, var(--night-1));
  border-bottom: 1px solid var(--night-line);
}
.kopf-type { max-width: 16ch; }
.kopf-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); }
.kopf-foot {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s14);
  font-size: var(--t-caption); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ash-dim);
}
.kopf-foot .line { flex: 1 1 auto; height: 1px; background: var(--night-line); }
/* Die Fehlernummer steht als ruhige Marke ueber der Ueberschrift, nicht als
   riesige Zahl in der Bildmitte: eine 404 in Anzeigegroesse ist Dekoration
   und sagt der Besucherin nichts, was sie weiterbringt. */ .fehlernr {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: var(--t-caption);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ash-dim);
  border: 1px solid var(--night-line-2);
  border-radius: var(--r-pill);
  padding: var(--s1) var(--s3);
  margin: 0 0 var(--s5);
}
/* ---------- Die drei Wege ----------
   Der erste Weg ist der breiteste, weil er der beste ist: eine Postleitzahl
   fuehrt direkt in den Vergleich. Die beiden anderen stehen gleichwertig
   nebeneinander. */ .nacht-insel .wege { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.nacht-insel .weg {
  background: var(--night-2); border-radius: var(--r-night);
  padding: var(--s10);
  display: flex; flex-direction: column;
}
.nacht-insel .weg-breit { grid-column: 1 / -1; }
.weg-glyph {
  width: var(--s12); height: var(--s12); flex: none;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--night-3); color: var(--ivory);
  margin-bottom: var(--s6);
}
.weg h3 { margin: 0 0 var(--s3); }
.weg p { margin: 0; color: var(--ash); line-height: 1.65; max-width: 56ch; }
/* Der Abschluss der Karte sitzt immer unten, egal wie lang der Text ist. */ .weg-fuss { margin-top: auto; padding-top: var(--s8); }
/* Postleitzahlfeld — dieselbe Form wie das Feld der Startseite. */ .plz-form { display: flex; align-items: stretch; max-width: 620px; }
.plz-feld {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--sans); font-size: var(--t-body); font-weight: var(--w-book);
  padding: var(--s4) var(--s6);
  color: var(--ivory);
  background: rgba(237,237,243,.04);
  background: color-mix(in srgb, var(--ivory) 4%, transparent);
  border: 1px solid var(--ivory); border-right: 0;
  border-radius: var(--r-pill) 0 0 var(--r-pill);
  outline: none;
}
.plz-feld::placeholder { color: var(--ash); }
.plz-feld:focus { border-color: var(--ice); }
.plz-btn { flex: none; border-radius: 0 var(--r-pill) var(--r-pill) 0; padding: var(--s4) var(--s8); }
.plz-note { margin: var(--s4) 0 0; }
.plz-note[hidden] { display: none; }
/* Ortsliste. Alle Orte gleich gross, gleich hell, gleiche Schrift — die
   Reihenfolge ist eine Liste, keine Rangfolge. */ .orte-liste { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0 0 var(--s2); padding: 0; list-style: none; }
.orte-liste a {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: var(--s2) var(--s5);
  border-radius: var(--r-pill); background: var(--night-3);
  font-size: var(--t-body-s); color: var(--ash);
  transition: background-color .16s ease, color .16s ease;
}
.orte-liste a:hover { background: var(--night-4); color: var(--ivory); }
.orte-liste .gl { color: var(--ash-dim); }
/* ---------- Wenn gar nichts passt ---------- */ .hilfe {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s6); flex-wrap: wrap;
  margin-top: var(--s12); padding-top: var(--s10);
  border-top: 1px solid var(--night-line);
}
.hilfe p { margin: 0; color: var(--ash); max-width: 60ch; }
@media (max-width: 720px) {
.kopf.nacht-insel { padding: calc(var(--nav-h) + var(--s14)) 0 var(--s12); }
.kopf-type { max-width: none; }
.kopf-actions .btn { flex: 1 1 100%; }
.nacht-insel .wege { grid-template-columns: minmax(0, 1fr); }
.nacht-insel .weg { padding: var(--s6); }
.plz-form { flex-direction: column; gap: var(--s3); }
.plz-feld { border-right: 1px solid var(--ivory); border-radius: var(--r-pill); }
.plz-btn { border-radius: var(--r-pill); width: 100%; }
.hilfe .btn { flex: 1 1 100%; }
}
@media (pointer: coarse) {
.foot-list a, .foot-bottom a, .nav-lang a, .logo { min-height: 44px; display: inline-flex; align-items: center; }
}
.skip { position: absolute; left: -9999px; top: 0; z-index: 60;
        background: var(--paper-1); color: var(--charcoal);
        padding: var(--s3) var(--s5); border-radius: var(--r-paper); }
.art-head .lede { max-width: 56ch; margin-top: var(--s6); }
.acc-btn .chev { flex: none; color: var(--graphite); transition: transform .22s var(--mo-kurve), color .16s var(--mo-kurve); }
.fakt .gl { color: var(--stone); }
.funnel-links a { display: inline-flex; align-items: center; min-height: 44px;
                  font-size: var(--t-body-s); font-weight: var(--w-mid);
                  padding: var(--s3) var(--s4); border-radius: var(--r-pill);
                  border: 1px solid color-mix(in srgb, var(--white) 36%, transparent); color: var(--white); }
.funnel-links a:hover { background: color-mix(in srgb, var(--white) 9%, transparent); text-decoration: none; }
.funnel-note { margin: var(--s5) 0 0; font-size: var(--t-caption); color: color-mix(in srgb, var(--white) 60%, transparent); }
.read-card { position: relative; padding: 0; overflow: hidden;
             display: flex; flex-direction: column;
             transition: box-shadow .18s var(--mo-kurve), transform .18s var(--mo-kurve); }
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: var(--s5); }
@media (max-width: 1080px) {
.art-grid { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s12); }
.answers-grid { grid-template-columns: 300px minmax(0, 1fr); gap: var(--s12); }
}
@media (max-width: 900px) {
/* minmax(0,1fr) statt 1fr: eine blosse 1fr-Spalte hat als Minimum die
     Inhaltsbreite und wird von einem breiten Kind aufgeschoben. */ .art-grid, .answers-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
}
@media (pointer: coarse) {
.foot-list a, .foot-bottom a, .lang-switch a, .toc a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
.toc a { display: grid; align-content: center; }
}
/* Die Anzeigeschrift dieser Seite IST die Serife. Kursiv bleibt der Akzent. */ .art-title, .art-body h2, .schluss h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -.02em;
}
/* --- Seitenkopf: EINE schmale Spalte. Kein Produktbild, keine Karte —
       ein Erfahrungsbericht faengt mit einer Stimme an, nicht mit Daten. --- */ .art-head { padding: var(--s10) 0 var(--s10); }
.head-narrow { max-width: 34ch; }
.art-title { font-size: var(--t-h1); line-height: 1.1; max-width: 20ch; }
/* Autorenzeile: Anfangsbuchstabe, Name, Rolle. Kein Foto, kein Datum —
   beides liegt uns nicht vor, und Erfundenes waere hier am schlimmsten. */ .autor {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s8);
}
.autor-zeichen {
  width: var(--s10); height: var(--s10); flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lavender); color: var(--ink);
  font-size: var(--t-body-l); font-weight: var(--w-mid);
}
.autor b { display: block; font-weight: var(--w-mid); font-size: var(--t-body); color: var(--charcoal); }
.autor span { display: block; font-size: var(--t-body-s); color: var(--stone); }
.art-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin-top: var(--s5);
  font-size: var(--t-body-s); color: var(--graphite);
}
/* --- Lesespalte plus Marginalienband -------------------------------------
   Schmaler als der Ratgeber: 58ch statt 68ch, und statt des klebenden
   Inhaltsverzeichnisses steht rechts nur ein schmales Band. */ .bericht-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 232px;
  gap: var(--s24); align-items: start;
  padding-bottom: var(--s18);
}
.art-body { max-width: 58ch; }
.art-body p {
  font-size: var(--t-body-l); line-height: 1.75; margin: 0 0 var(--s5);
  color: var(--charcoal);
}
.art-body h2 {
  font-size: var(--t-h2-display); line-height: 1.15;
  margin: var(--s14) 0 var(--s5); scroll-margin-top: var(--s6);
}
/* --- Das grosse Zitat: der eine Satz, den wir wirklich von Helena haben.
       Er traegt die Seite, darum steht er gross und in der Serifenkursive. --- */ .zitat {
  margin: var(--s10) 0 var(--s12);
  padding: 0 0 0 var(--s8);
  border-left: 2px solid var(--cobalt);
}
.zitat p {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: var(--t-h1); line-height: 1.25; letter-spacing: -.015em;
  color: var(--ink); margin: 0; max-width: 22ch;
}
.zitat footer {
  margin-top: var(--s5);
  font-size: var(--t-body-s); color: var(--stone);
}
.zitat footer b { font-weight: var(--w-mid); color: var(--charcoal); }
/* --- Marginalienband: verwandte Seiten, schmal, mitlaufend. --- */ .rand {
  position: sticky; top: var(--s10);
  border-top: 2px solid var(--charcoal);
  padding-top: var(--s4);
}
.rand h2 {
  margin: 0 0 var(--s3);
  font-family: var(--sans);
  font-size: var(--t-caption); font-weight: var(--w-semi);
  letter-spacing: .12em; text-transform: uppercase; color: var(--charcoal);
}
.rand-list { list-style: none; margin: 0; padding: 0; }
.rand-list li { border-bottom: 1px solid var(--paper-line); }
.rand-list li:last-child { border-bottom: 0; }
.rand-list a {
  display: grid; grid-template-columns: var(--s4) 1fr; gap: var(--s3);
  align-items: start; padding: var(--s4) 0; color: var(--charcoal);
}
.rand-list a:hover { text-decoration: none; color: var(--ink); }
.rand-list .gl { color: var(--stone); margin-top: var(--s1); }
.rand-list b { display: block; font-weight: var(--w-mid); font-size: var(--t-body-s); line-height: 1.4; }
.rand-list span { display: block; margin-top: var(--s1); font-size: var(--t-caption); line-height: 1.5; color: var(--stone); }
.rand-note { margin: var(--s5) 0 0; font-size: var(--t-caption); line-height: 1.6; color: var(--stone); }
@media (max-width: 1080px) {
.bericht-grid { grid-template-columns: minmax(0, 1fr) 200px; gap: var(--s12); }
}
@media (max-width: 900px) {
/* minmax(0,1fr) statt 1fr: eine blosse 1fr-Spalte hat als Minimum die
     Inhaltsbreite und wird von einem breiten Kind aufgeschoben. */ .bericht-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s12); }
.rand { position: static; }
}
@media (max-width: 720px) {
.art-head { padding: var(--s6) 0 var(--s8); }
.zitat { padding-left: var(--s5); margin: var(--s8) 0 var(--s10); }
.zitat p { max-width: none; }
.schluss .card-ink { padding: var(--s8) var(--s6); }
}
@media (pointer: coarse) {
.foot-list a, .foot-bottom a, .lang-switch a, .crumbs a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
.rand-list a { min-height: 44px; }
.btn, .btn-sm { min-height: 44px; }
}
/* Kaskadenfehler des Systems: `.on-buchen a` faerbt auch Knoepfe eisblau.
     Der Umriss-Knopf traegt weissen Text auf eisblauem Rand. */ .on-buchen a.btn-outline, .on-buchen a.btn-ghost { color: var(--ivory); }
/* Hover-Wash ausschliesslich auf der fuenften Stufe, ruhende Flaechen bleiben 2/3 */ .on-buchen .card-data:hover { background: var(--night-3); }
.on-buchen .nav-link:hover { background: var(--night-4); }
.on-buchen .pill:hover { background: var(--night-4); }
.nav-sep { width: 1px; height: 18px; background: var(--night-line-2); flex: none; }
.search-field .field {
    padding-left: 40px; padding-right: 40px; font-size: var(--t-body-s);
    padding-top: 9px; padding-bottom: 9px; border-radius: var(--r-pill);
    font-variant-numeric: tabular-nums;
  }
.searchbar .btn { padding: 0 var(--s6); font-size: var(--t-body-s); }
/* --- Brotkrumen --- */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: var(--t-caption); color: var(--ash-dim); padding: var(--s4) 0 0; }
.crumbs a { color: var(--ash-dim); }
.crumbs a:hover { color: var(--ice); }
.crumbs span[aria-current] { color: var(--ash); }
/* --- Der Preiskopf --- */ .pricehead {
    position: relative; overflow: hidden;
    background: var(--night-2); border-radius: var(--r-data);
    box-shadow: var(--ring); padding: var(--s8);
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: var(--s10);
    align-items: center;
  }
/* Entschieden statt abgeschwaecht: kein redaktionelles Foto (Referenz verbietet es,
     und als CSS-Hintergrund waere es nicht verzoegerbar). Ein Verlauf, null Bytes. */ .pricehead::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--night-2) 32%, color-mix(in srgb, var(--night-3) 72%, transparent) 100%);
  }
.pricehead > * { position: relative; z-index: 1; }
.range { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s2); }
.range .pair { display: inline-flex; align-items: baseline; gap: var(--s2); white-space: nowrap; }
.range .big { font-size: var(--t-display); font-weight: var(--w-mid); line-height: 1; color: var(--ivory); }
.range .unit { font-size: var(--t-sub); color: var(--ash); font-weight: var(--w-book); }
.range .bis { font-size: var(--t-body-s); color: var(--ash-dim); text-transform: uppercase; letter-spacing: .14em; }
.pricehead .note { font-size: var(--t-body-s); color: var(--ash); margin: var(--s4) 0 0; max-width: 46ch; line-height: 1.55; }
.pricehead .stamp { color: var(--ash-dim); }
/* Die drei Mono-Preis-Chips der Referenz (Highlighted Drop Banner) */ .chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.chip {
    display: inline-flex; align-items: baseline; gap: 6px;
    font-family: var(--mono); font-size: var(--t-caption);
    background: var(--night-3); border-radius: var(--r-data);
    padding: 6px var(--s3); color: var(--ivory); box-shadow: var(--ring);
  }
.chip i { font-style: normal; font-family: var(--sans); color: var(--ash-dim); text-transform: uppercase; letter-spacing: .1em; font-size: var(--t-micro); }
/* --- Preisverteilung. Seit 04.09.2026 der gemeinsame Baustein .preisfeld
     aus bausteine.css statt einer selbstgebauten Schiene, darueber die
     Flaechenkurve aus R1 „Werkstatt“. Beides beschreibt den ORT: alle Punkte
     gleich gross, gleich hell, ohne Namen — keine Fahrschule ueber einer
     anderen. Die Kurve waechst einmal von der Grundlinie herauf, die Linie
     zeichnet sich;beides aus dem gemeinsamen Vokabular. --- */ .dist { padding: var(--s2) 0 0; }
.dist-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); font-size: var(--t-caption); color: var(--ash-dim); margin-bottom: var(--s4); }
.kurve { width: 100%; height: auto; display: block; }
.kurve .flaeche { fill: url(#preisverlauf); }
.kurve .linie { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kurve .grund { stroke: var(--night-line-2); stroke-width: 1; }
.kurve .schnittlinie { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 4 4; }
.kurve .schnittpunkt { fill: var(--gold); }
.kurve text { fill: var(--ash-dim); font-family: var(--mono); font-size: var(--t-micro); }
.kurve .schnittwort { fill: var(--ivory); }
/* Anfassbar: der Zeiger folgt der Maus, dem Finger und den Pfeiltasten.
     Ohne Zeiger steht wieder der Schnitt da — nichts bleibt hervorgehoben. */ .kurve { cursor: crosshair; touch-action: none; }
.kurve:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
.kurve .zeiger { stroke: var(--ivory); stroke-width: 1; opacity: 0; }
.kurve .zeigerpunkt { fill: var(--ivory); opacity: 0; }
.kurve.wird-angefasst .zeiger { opacity: .45; }
.kurve.wird-angefasst .zeigerpunkt { opacity: 1; }
/* Solange jemand die Kurve abfaehrt, tritt die Schnittmarke zurueck. */ .kurve.wird-angefasst .schnittlinie, .kurve.wird-angefasst .schnittpunkt, .kurve.wird-angefasst .schnittwort { opacity: .35; }
.kurve-lese { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
                margin: var(--s4) 0 0; min-height: 22px; font-size: var(--t-body-s); }
/* Die Punkte fuellen sich, waehrend der Zeiger nach rechts faehrt. */ .preisfeld i { transition: background-color .12s var(--mo-kurve), transform .12s var(--mo-kurve); }
.preisfeld i.ist-drin { background: var(--gold); transform: scale(1.25); }
/* Der Baustein bringt Linie und Punkte mit;hier nur die Lage im Kopf. */ .preisfeld { margin-top: calc(var(--s2) * -1); color: var(--ivory); }
.dist-scale { position: relative; height: 16px; font-size: var(--t-micro); color: var(--ash-dim); margin-top: var(--s5); }
/* Nur die direkten Kinder liegen absolut — die zaehlende Zahl steckt in
     einem eigenen span darin und muss im Fluss bleiben. */ .dist-scale > span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.dist-scale > span:first-child { transform: none; left: 0; }
.dist-scale > span:last-child { transform: none; left: auto; right: 0; }
.pill { padding: 7px 13px; font-size: var(--t-caption); }
.pill[aria-pressed="true"], .pill.is-on { background: var(--ice-veil); color: var(--ivory); }
.fcount .num { color: var(--ice); }
.school-name { font-size: var(--t-body-s); font-weight: var(--w-mid); color: var(--ivory); margin: 0; line-height: 1.3; }
.school-place { font-size: var(--t-caption); color: var(--ash-dim); margin: 3px 0 0; }
.rating .num { color: var(--ivory); font-size: var(--t-body-s); font-weight: var(--w-mid); }
.stars { font-size: var(--t-caption); }
.stars .off { color: var(--ash-dim); }
/* Preis und Lektionsdauer stehen im Baustein .preis IMMER zusammen — der
     Preis allein liest sich falsch. Hier nur die Lage auf der Karte. */ .school .preis { border-top: 1px solid var(--night-line); padding-top: var(--s3); margin-top: auto; }
.school .preis b { font-size: var(--t-h3); color: var(--ivory); }
/* --- Passungsband: was diese Fahrschule fuer sich hinterlegt hat.
     Erfuellt = gefuellt (.ja), nicht hinterlegt = ruhig leer. NIE ein rotes
     Kreuz, nie durchgestrichen: Abwesenheit heisst „gerade nicht dein
     Kriterium“, nie „schlechter“ (GRUNDSATZ-KEIN-RANKING.md). --- */ .passung .gl { width: var(--s4); height: var(--s4); }
/* Ein gewaehltes Kriterium bekommt einen Ring — die Karte bleibt gleich
     hell und gleich gross, nur das Feld tritt hervor. */ .passung .sel { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ivory) 18%, transparent); }
.merkmale .merkmal { align-items: flex-start; font-size: var(--t-caption); line-height: 1.4; color: var(--ash-dim); }
.merkmale .merkmal .gl { margin-top: 1px; color: var(--ash-dim); }
.merkmale .merkmal span { color: var(--ash); }
.crit .gl { width: var(--s4); height: var(--s4); }
.crit[aria-pressed="true"] .gl { color: var(--ice); }
.school-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.school .btn-outline { padding: 11px var(--s4); font-size: var(--t-caption); }
.rank .val { text-align: right; flex: none; }
.rank .val b { display: block; font-size: var(--t-body-s); font-weight: var(--w-mid); color: var(--ivory); }
.sec-head h2 { font-size: var(--t-h3); font-weight: var(--w-mid); color: var(--ivory); margin: 0; letter-spacing: -.012em; }
.sec-head a { font-size: var(--t-body-s); font-weight: var(--w-mid); }
.acc-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
    background: none; border: 0; cursor: pointer; text-align: left;
    font-family: var(--sans); font-size: var(--t-body); font-weight: var(--w-mid); color: var(--ivory);
    padding: var(--s5) 0; letter-spacing: -.01em;
  }
.acc-btn:hover { color: var(--ice); }
.acc-btn .sign { flex: none; width: var(--s6); height: var(--s6); display: grid; place-items: center; border-radius: var(--r-pill); box-shadow: var(--ring-2); color: var(--ice); font-size: var(--t-body-s); line-height: 1; }
.acc-btn[aria-expanded="true"] .sign { background: var(--ice-veil); }
.step .n { font-size: var(--t-caption); color: var(--ice); flex: none; padding-top: 2px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.foot ul a { display: inline-block; padding: var(--s2) 0; }
.foot .about { font-size: var(--t-body-s); color: var(--ash); max-width: 30ch; line-height: 1.6; margin: var(--s4) 0 0; }
.foot-bottom { display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; align-items: center; margin-top: var(--s14); padding-top: var(--s6); border-top: 1px solid var(--night-line); font-size: var(--t-caption); color: var(--ash-dim); }
@media (max-width: 1240px) {
.pricehead { grid-template-columns: 1fr; gap: var(--s10); }
}
@media (max-width: 1060px) {
.foot-grid { grid-template-columns: 1fr 1fr; }
/* Die Kopfzeile bricht um, statt Punkte zu verstecken. Waagrecht
       scrollbare Reihe statt display:none — nichts verschwindet. */ .nav { height: auto; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) 0; }
.logo { order: 1; }
.nav-right { order: 2; margin-left: auto; }
.nav-links { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nav-links::-webkit-scrollbar { display: none; }
}
@media (max-width: 760px) {
.searchbar .btn { flex: 1; min-height: 44px; }
.range .big { font-size: var(--t-h1); }
.dist-title { flex-wrap: wrap; }
.crit-bar .pill { padding: 11px var(--s3); }
.foot-grid { grid-template-columns: 1fr; gap: var(--s6); }
/* Klickflaechen: mindestens 44px auf dem Geraet, mit dem die meisten kommen. */ .pill { padding: 14px var(--s4); font-size: var(--t-body-s); }
.school .btn-outline { padding: 14px var(--s4); font-size: var(--t-body-s); }
.rank .val { padding: var(--s3) 0; }
.crumbs a, .crumbs span { padding: 13px 0; }
.logo { padding: 9px 0; }
.sec-head a { display: inline-block; padding: 12px 0; }
.foot ul a { display: block; padding: 13px 0; }
.foot-bottom a { display: inline-block; padding: 13px var(--s2) 13px 0; }
}
/* Warmer Schein hinter dem Preiskopf. Er liegt auf z-index 0, alles andere
   darueber — er kann nichts verdecken. */ .pricehead.schein { position: relative; }
.pricehead.schein::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -12% -6% auto auto; width: 420px; height: 300px;
  background: radial-gradient(closest-side, rgba(240,180,41,.20), rgba(240,180,41,0) 72%);
}
.pricehead.schein::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: auto auto -14% -4%; width: 320px; height: 240px;
  background: radial-gradient(closest-side, rgba(82,102,235,.22), rgba(82,102,235,0) 72%);
}
.pricehead.schein > * { position: relative; z-index: 1; }
