/* ==========================================================================
   seite.css — die Schicht zwischen dem System und den Seiten
   DriveLab GmbH, 09.09.2026, Umbau auf das neue Design.

   identity.css und bausteine.css sind das gemeinsame System und bleiben
   unveraendert wie im Entwurf (docs/design/). Was eine einzelne Seite
   braucht — Kopfzeile, Suchleiste, Fahrschulkarte, Fusszeile — stand im
   Entwurf in einem <style>-Block in der Seite selbst. Auf der echten
   Website kann das nicht so bleiben: dieselbe Kopfzeile erscheint auf
   allen Seiten und darf nur einmal beschrieben sein.

   Diese Datei ist darum eins zu eins der Block aus
   docs/design/02-ortsseite.html, Zeile 25-467. Kommt eine weitere Seite
   dazu, waechst die Datei um deren Abschnitt — und was zwei Seiten teilen,
   steht nur einmal hier.
   ========================================================================== */

  /* ------------------------------------------------------------------
     Nur was dieser Seite eigen ist. Alles andere kommt aus identity.css.

     Oberflaeche: DUNKEL = buchen, in der dichten Gangart — .on-buchen.dicht.
     Bis 04.09.2026 war das eine eigene Welt (.on-data) mit eigenen Radien,
     eigenen Schriftgroessen und eckigen Knoepfen. Die ist gestrichen: eine
     Vergleichsliste sitzt enger als die Startseite, sie sieht aber nicht
     anders aus. Radien, Knopfformen und die Stufenleiter kommen darum
     unveraendert aus identity.css; nur .dicht macht die Karten knapper.
     Eisblau bleibt Umriss, Link und Haken.
     ------------------------------------------------------------------ */

  .on-buchen {
    --ice-veil  : color-mix(in srgb, var(--ice) 12%, transparent);
  }
  /* 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); }

  /* Ikonografie: 24px, 1.5px Strich, Umriss, einfarbig — Referenzvorgabe. */
  .ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor;
         stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

  /* --- Kopfzeile: dieselbe Leiste wie auf der Startseite, plus ein zweites
     Band fuer die Suche. Beide Baender tragen .nav-solid aus identity.css —
     Milchglas und Haarlinie, nicht zwei selbstgebaute Hintergruende. Die
     linke Icon-Schiene der alten Datenflaeche ist entfallen: die Startseite
     kennt keine, und die Menuepunkte gehoeren ins Band. --- */
  .top { position: sticky; top: 0; z-index: 40; }
  .nav-right { display: flex; align-items: center; gap: var(--s3); }
  /* Das Symbol traegt den Knopf erst, wenn die Beschriftung weicht (Telefon). */
  .btn-login .ico { display: none; }
  .nav-sep { width: 1px; height: 18px; background: var(--night-line-2); flex: none; }
  .lang { display: inline-flex; border-radius: var(--r-pill); box-shadow: var(--ring-2); overflow: hidden; }
  .lang button {
    font-family: var(--sans); font-size: var(--t-micro); font-weight: var(--w-semi);
    letter-spacing: .06em; padding: 6px 11px; border: 0; background: transparent;
    color: var(--ash-dim); cursor: pointer;
  }
  .lang button[aria-pressed="true"] { background: rgba(255,255,255,.09); color: var(--ivory); }

  /* --- Suchleiste. Dieselbe Form wie der Postleitzahl-Einstieg der
     Startseite: Pillenfeld, Pillen-Segmente, gefuellter Pillenknopf. --- */
  .searchbar { display: flex; align-items: stretch; gap: var(--s2); padding: var(--s3) 0; }
  .search-field { position: relative; flex: 1 1 320px; min-width: 0; }
  .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;
  }
  .search-icon { position: absolute; left: var(--s2); top: 50%; transform: translateY(-50%); color: var(--ash-dim); pointer-events: none; }
  .search-kbd {
    position: absolute; right: var(--s2); top: 50%; transform: translateY(-50%);
    font-family: var(--mono); font-size: var(--t-micro); color: var(--ash-dim);
    border: 1px solid var(--night-line-2); border-radius: var(--r-pill);
    padding: 1px 6px; pointer-events: none;
  }
  .seg { display: inline-flex; gap: 0; border-radius: var(--r-pill); box-shadow: var(--ring-2); overflow: hidden; flex: none; }
  .seg button {
    font-family: var(--sans); font-size: var(--t-body-s); font-weight: var(--w-mid);
    padding: 0 var(--s4); border: 0; background: transparent; color: var(--ash); cursor: pointer;
    display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap;
  }
  .seg .ico { width: 20px; height: 20px; }
  .seg button + button { border-left: 1px solid var(--night-line); }
  .seg button[aria-pressed="true"] { background: var(--ice-veil); color: var(--ivory); }
  .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); }

  /* --- Titelblock. Der Untertext ist ueberall derselbe: 18px, 60ch, --ash.
     Er stand hier auf 14px und 78ch — das las sich wie Kleingedrucktes. --- */
  .head-block { padding: var(--s8) 0 var(--s8); }

  /* --- 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); }
  /* Der Verweis auf den Preisindex: kein Fliesstextlink, sondern eine eigene
     Zeile mit Pfeil — er beantwortet die Frage, die der Preis darueber stellt,
     und soll als Angebot lesbar sein, nicht als Fussnote. */
  /* Seit 21.09.2026 ohne .pricehead davor: derselbe Baustein taugt ueberall,
     wo ein Verweis eine eigene Zeile verdient - er stand nur zufaellig zuerst
     im Preiskopf. Der Pfeil rueckt beim Zeigen nach, so weit wie die
     Unterstreichung tief liegt. */
  .weiter { display: inline-flex; align-items: center; gap: var(--s2);
            margin: var(--s4) 0 0; font-size: var(--t-body-s);
            font-weight: var(--w-mid); color: var(--cobalt);
            text-decoration: none; line-height: 1.4; }
  .weiter:hover { text-decoration: underline; text-underline-offset: 3px; }
  .weiter svg { width: 14px; height: 14px; flex: none;
                transition: transform var(--mo-kurz) var(--mo-kurve); }
  .weiter:hover svg { transform: translateX(3px); }
  @media (prefers-reduced-motion: reduce) { .weiter:hover svg { transform: none; } }

  /* 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); }
  .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); }
  /* 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; }

  .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--night-line); border-radius: var(--r-data); overflow: hidden; margin-top: var(--s6); }
  .kpi { background: var(--night-2); padding: var(--s3) var(--s4); }
  .kpi dt { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--ash-dim); margin: 0 0 5px; }
  .kpi dd { margin: 0; font-size: var(--t-body-l); color: var(--ivory); font-weight: var(--w-mid); }
  .kpi dd small { font-size: var(--t-caption); color: var(--ash-dim); font-weight: var(--w-book); margin-left: 3px; font-family: var(--sans); }

  /* --- Filterleiste --- */
  .filters { margin-top: var(--s6); border-radius: var(--r-data); box-shadow: var(--ring); background: var(--night-2); }
  .frow { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); flex-wrap: wrap; }
  .frow + .frow { border-top: 1px solid var(--night-line); }
  .flabel { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--ash-dim); flex: none; min-width: 104px; }
  .fgroup { display: flex; gap: 6px; flex-wrap: wrap; }
  .pill { padding: 7px 13px; font-size: var(--t-caption); }
  .pill[aria-pressed="true"], .pill.is-on { background: var(--ice-veil); color: var(--ivory); }
  .fcount { margin-left: auto; font-size: var(--t-body-s); color: var(--ivory); font-weight: var(--w-mid); white-space: nowrap; }
  .fcount .num { color: var(--ice); }
  .fselect {
    font-family: var(--sans); font-size: var(--t-caption); font-weight: var(--w-mid);
    padding: 7px 30px 7px 13px; border-radius: var(--r-pill);
    border: 1px solid var(--night-line-2); background: transparent; color: var(--ivory);
    cursor: pointer; appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ash) 50%), linear-gradient(135deg, var(--ash) 50%, transparent 50%);
    background-position: calc(100% - 15px) 13px, calc(100% - 11px) 13px;
    background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
  }
  .fselect:focus { border-color: var(--ice); }
  .fselect:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
  .freset { background: none; border: 0; color: var(--ice); font-family: var(--sans); font-size: var(--t-caption); cursor: pointer; padding: 7px 0; }

  /* --- Hauptraster: Inhalt + klebende Seitenleiste --- */
  .cmp-main { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: var(--s6); align-items: start; padding-bottom: var(--s12); }
  .cmp-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s3); margin-top: var(--s5); }

  /* --- Fahrschulkarte: Deckbild + ueberlappender Avatar, wie die Referenz --- */
  .school { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3); }

  /* 4:3-Deckbild ueber die volle Kartenbreite. Es zeigt das echte Bild der
     Fahrschule, selbst gehostet, kein Fremdhost. Ohne Bild bleibt der Verlauf
     mit dem Auto-Zeichen — nie ein leeres Loch, nie ein Platzhalterfoto. */
  .cover {
    position: relative;
    margin: calc(var(--s3) * -1) calc(var(--s3) * -1) var(--s5);
    aspect-ratio: 4 / 3;
    border-radius: var(--r-data) var(--r-data) 0 0;
    background: linear-gradient(var(--cov, 140deg), var(--night-3), var(--night-1) 58%, var(--night-2));
    display: grid; place-items: center;
  }
  .cover::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--night-line);
  }
  .cover .ico { color: var(--night-line-2); width: var(--s8); height: var(--s8); }
  /* Das Foto fuellt das Deckbild — auf JEDER Karte gleich gross, gleicher
     Radius, kein Rahmen und keine Hervorhebung. Es sagt nichts ueber Qualitaet. */
  .cover .fs-bild { position: absolute; inset: 0; height: 100%; border-radius: inherit; }
  .cover:has(.fs-bild) .ico { display: none; }
  .cover::before { z-index: 1; }   /* Innenring bleibt ueber dem Foto */
  /* Preis-Chip unten rechts auf dem Bild */
  .cover-price {
    position: absolute; right: var(--s2); bottom: var(--s2);
    display: inline-flex; align-items: baseline; gap: 4px;
    font-family: var(--mono); font-size: var(--t-caption); color: var(--ivory);
    background: var(--night-1); border-radius: var(--r-data);
    padding: 5px var(--s2); box-shadow: var(--ring-2);
  }
  .cover-price i { font-style: normal; font-family: var(--sans); font-size: var(--t-micro); color: var(--ash-dim); }

  .school-id { display: flex; gap: var(--s3); align-items: flex-start; }
  /* Das ganze Deckbild ist der Weg ins Profil.
     Bis zum 13.09.2026 lag der Verweis zwar um das Bild, war aber NULL mal
     NULL gross: das Bild selbst ist absolut gesetzt, also blieb dem <a>
     nichts zum Anfassen. Wer auf das Foto klickte, loeste nichts aus —
     gemessen an der Suchseite. Jetzt deckt der Verweis das Deckbild ganz ab;
     Preisschild und Signet liegen mit hoeherer Ebene darueber, damit sie
     sichtbar bleiben. */
  .cover > a {
    position: absolute; inset: 0; z-index: 2;
    display: block; border-radius: inherit;
  }
  .cover > a:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
  .cover .cover-price, .cover .avatar { z-index: 3; }

  /* Der Avatar ueberlappt die untere linke Ecke des Deckbildes — Referenzbewegung.
     Nur DORT: ".avatar" blank traf am 12.09.2026 auch das Signet im Kopf der
     Profilseite (Foto aus der Zeile heraus auf den Ring) und die Signets der
     Bewertungen (20 Pixel nach unten weggerutscht, schon vorher live kaputt).
     Der Entwurf 02-ortsseite setzt sie im Deckbild, und nur da gilt sie. */
  .cover .avatar {
    position: absolute; left: var(--s2); bottom: calc(var(--s5) * -1);
    width: var(--s10); height: var(--s10); border-radius: 50%; flex: none;
    display: grid; place-items: center;
    font-size: var(--t-caption); font-weight: var(--w-semi); letter-spacing: .02em;
    color: var(--ivory); background: rgba(255,255,255,.07);
    box-shadow: 0 0 0 3px var(--night-2), var(--ring-2);
  }
  .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 { display: flex; align-items: center; gap: 6px; font-size: var(--t-caption); color: var(--ash); }
  .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); }

  /* --- Merkmalzeilen: Sprachen, Treffpunkt, Schaltungsart. Zeichen und Wort,
     nie ein Zeichen allein. Was eine Fahrschule nicht hinterlegt hat, fehlt
     hier ruhig — es steht kein Platzhalter und kein Kreuz. --- */
  .merkmale { display: grid; gap: 5px; }
  .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); }

  /* --- Kriterienleiste (aus R3 „Passform“). Hervorheben, nicht aussortieren:
     wer ein Kriterium nicht erfuellt, wird NICHT blasser und rutscht nicht
     nach hinten — im Band leuchten nur mehr Treffer auf. --- */
  .critbox { margin: var(--s5) 0 var(--s3); padding: var(--s4); background: var(--night-2); border-radius: var(--r-data); box-shadow: var(--ring); }
  .crit-head { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--ash-dim); margin-bottom: var(--s3); }
  .crit-bar { display: flex; gap: 6px; flex-wrap: wrap; }
  .crit .gl { width: var(--s4); height: var(--s4); }
  .crit[aria-pressed="true"] .gl { color: var(--ice); }
  .crit-msg { font-size: var(--t-caption); color: var(--ash-dim); margin: var(--s3) 0 0; max-width: 84ch; line-height: 1.55; }
  .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); }
  .footnote { font-size: var(--t-micro); color: var(--ash-dim); margin: var(--s4) 0 0; }
  .gridnote { font-size: var(--t-micro); color: var(--ash-dim); margin: 0 0 var(--s3); }

  /* --- Seitenleiste --- */
  /* 152px = Kopfzeile (--nav-h plus Haarlinie) und Suchband darunter. */
  .rail { position: sticky; top: 152px; display: flex; flex-direction: column; gap: var(--s3); }
  .panel { background: var(--night-2); border-radius: var(--r-data); box-shadow: var(--ring); }
  .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--night-line); }
  .panel-head h2 { font-size: var(--t-body-s); font-weight: var(--w-mid); color: var(--ivory); margin: 0; }
  .panel-head .cap { font-size: var(--t-micro); color: var(--ash-dim); text-transform: uppercase; letter-spacing: .1em; }
  .rank { list-style: none; margin: 0; padding: var(--s1) 0; }
  .rank li { display: flex; align-items: center; gap: var(--s3); padding: 9px var(--s4); }
  .rank li + li { border-top: 1px solid var(--night-line); }
  .rank li:hover { background: var(--night-4); }
  /* Keine Rangnummer und keine Abweichung in Rot oder Weiss: das waere ein
     Urteil ueber eine namentlich genannte Fahrschule. Die Liste ist eine
     Sortierung, die die Besucherin selbst waehlt — mehr nicht.
     GRUNDSATZ-KEIN-RANKING.md. */
  .rank .ava {
    width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden;
    display: grid; place-items: center; background: rgba(255,255,255,.07);
    font-size: var(--t-micro); font-weight: var(--w-semi); color: var(--ivory);
  }
  /* Das eigene Bild der Fahrschule, rund und klein. Zwei Buchstaben sagen
     nichts; das Bild ist dasselbe, das auf ihrem Profil steht. Wer keines
     hochgeladen hat, behaelt die Initialen — das ist keine Abwertung. */
  .rank .ava img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Die Liste ist nicht EINE Liste. Die Besucherin waehlt, wonach sie
     geordnet ist — Preis, Bewertungen, Naehe, Name. Eine feste Reihenfolge
     mit Namen darin liest sich wie eine bezahlte Platzierung, und genau das
     soll sie nicht (GRUNDSATZ-KEIN-RANKING.md). */
  .rank-wahl { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--s3) var(--s4) 0; }
  .rank-wahl button {
    font: inherit; font-size: var(--t-caption); cursor: pointer; color: var(--ash-dim);
    background: transparent; border: 0; padding: 5px 10px; border-radius: var(--r-pill);
    box-shadow: inset 0 0 0 1px var(--night-line);
  }
  .rank-wahl button:hover { color: var(--ivory); }
  .rank-wahl button[aria-pressed="true"] { background: var(--ice-veil); color: var(--ivory);
                                           box-shadow: inset 0 0 0 1px var(--night-line-2); }
  .rank .who { min-width: 0; flex: 1; }
  .rank .who a { display: block; font-size: var(--t-body-s); font-weight: var(--w-mid); color: var(--ivory); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rank .who a:hover { color: var(--ice); }
  .rank .who span { display: block; font-size: var(--t-micro); color: var(--ash-dim); }
  .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); }
  .near { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--s3) var(--s4) var(--s4); }
  .near a { font-size: var(--t-caption); padding: 6px 11px; border-radius: var(--r-pill); box-shadow: var(--ring-2); color: var(--ivory); }
  .near a:hover { color: var(--ice); }
  .panel p.hint { font-size: var(--t-micro); color: var(--ash-dim); margin: 0; padding: 0 var(--s4) var(--s4); line-height: 1.5; }

  /* --- Abschnittskopf --- */
  .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
  .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); }

  /* --- Akkordeon --- */
  .acc { border-top: 1px solid var(--night-line); }
  .acc-item { border-bottom: 1px solid var(--night-line); }
  .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); }
  .acc-body { padding: 0 0 var(--s5); max-width: 82ch; color: var(--ash); font-size: var(--t-body-s); line-height: 1.65; }
  .acc-body[hidden] { display: none; }

  /* --- Drei Schritte --- */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--night-line); border-radius: var(--r-data); overflow: hidden; box-shadow: var(--ring); }
  .step { background: var(--night-2); padding: var(--s4); display: flex; gap: var(--s3); align-items: flex-start; }
  .step .n { font-size: var(--t-caption); color: var(--ice); flex: none; padding-top: 2px; }
  .step h3 { font-size: var(--t-body-s); font-weight: var(--w-mid); color: var(--ivory); margin: 0 0 3px; }
  .step p { font-size: var(--t-caption); color: var(--ash-dim); margin: 0; line-height: 1.5; }

  /* --- Fusszeile. Wortgleich in Form und Mass mit der Startseite: Flaeche,
     Polster und Haarlinie kommen aus identity.css, hier stehen nur Raster
     und Abstaende. Die Fusszeile ist auf jeder Seite dasselbe Objekt und
     wird darum auch in der dichten Gangart nicht enger. --- */
  .foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: var(--s10); }
  .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); }
  .foot-bottom .row { gap: var(--s5); }
  .foot-bottom a { padding: var(--s2) 0; display: inline-block; }

  /* --- Klein --- */
  @media (max-width: 1240px) {
    .cmp-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .pricehead { grid-template-columns: 1fr; gap: var(--s10); }
  }
  @media (max-width: 1060px) {
    .cmp-main { grid-template-columns: 1fr; }
    .rail { position: static; }
    .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) {
    .cmp-grid { grid-template-columns: 1fr; }
    .kpis, .steps { grid-template-columns: 1fr 1fr; }

    .top .btn-login { padding: 0 var(--s3); min-height: 44px; }
    .top .btn-login .lbl { display: none; }
    .top .btn-login .ico { display: block; }

    .searchbar { flex-wrap: wrap; }
    .searchbar .btn { flex: 1; min-height: 44px; }
    .seg button { min-height: 44px; }
    .flabel { min-width: 100%; }
    .fcount { margin-left: 0; }
    .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); }
    .top { position: static; }

    /* Klickflaechen: mindestens 44px auf dem Geraet, mit dem die meisten kommen. */
    .pill { padding: 14px var(--s4); font-size: var(--t-body-s); }
    .fselect { padding: 14px var(--s8) 14px var(--s4); }
    .freset { padding: 14px 0; }
    .lang button { padding: 15px var(--s3); }
    .school .btn-outline { padding: 14px var(--s4); font-size: var(--t-body-s); }
    .rank li { padding: 0 var(--s4); }
    .rank .who a { padding: 16px 0 7px; }
    .rank .who span { padding-bottom: 13px; }
    .rank .val { padding: var(--s3) 0; }
    .near a { padding: 13px var(--s3); }
    .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; }
  }
  @media (max-width: 560px) {
    .steps { grid-template-columns: 1fr; }
  }

/* 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; }

/* ==========================================================================
   ANPASSUNG — wo das neue Design auf das trifft, was die Anwendung erzeugt
   DriveLab GmbH, 09.09.2026.

   Der Entwurf konnte sich sein Markup aussuchen. Die echte Website nicht:
   Menue, Sprachwahl und Fusszeilenlinks kommen aus dem Backend und tragen
   Bootstrap-Klassen (.nav-item, .nav-link, .dropdown-menu, .language). Die
   werden hier NICHT umbenannt — sie bekommen die neue Form. So bleibt das
   Backend die Quelle der Links, und niemand muss zwei Menues pflegen.

   Gluecksfall: die erzeugten Links tragen bereits class="nav-link", und
   .nav-link ist im Entwurf ein Baustein. Der Grossteil sitzt darum von
   allein.
   ========================================================================== */

/* --- Wortmarke: das ".ch" gedaempft, wie im Entwurf inline gesetzt --- */
.logo-tld { color: var(--ash-dim); font-weight: var(--w-book); }

/* --- Das gepflegte Hauptmenue --------------------------------------------
   getTopMenu() liefert <li class="nav-item">, teils mit <ul class="dropdown-menu">.
   Das Untermenue oeffnet auf Hover UND auf Tastaturfokus (:focus-within) —
   ohne JavaScript. Bringt scripts.min.js zusaetzlich Bootstraps .show mit,
   wirkt das genauso. */
.nav-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--s1); }
.nav-menu > li { position: relative; }
.nav-menu .dropdown-toggle::after {
  content: ""; display: inline-block; margin-left: var(--s2);
  width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .6;
}
.nav-menu .dropdown-menu {
  list-style: none; margin: 0; padding: var(--s2);
  position: absolute; top: calc(100% + var(--s2)); left: 0; z-index: 50;
  min-width: 240px;
  background: var(--night-2); border-radius: var(--r-night);
  box-shadow: var(--ring), 0 24px 48px -24px rgba(0,0,0,.5);
  display: none;
}
.nav-menu > li:hover > .dropdown-menu,
.nav-menu > li:focus-within > .dropdown-menu,
.nav-menu .dropdown-menu.show { display: block; }
.nav-menu .dropdown-menu .nav-link { display: block; white-space: nowrap; }

/* --- Sprachwahl: zwei Links aus $this->languages, Form wie .lang im Entwurf --- */
.lang-switch { display: inline-flex; border-radius: var(--r-pill); box-shadow: var(--ring-2); overflow: hidden; }
.lang-switch .language {
  font-size: var(--t-micro); font-weight: var(--w-semi); letter-spacing: .06em;
  padding: 6px 11px; color: var(--ash-dim); text-decoration: none; display: inline-block;
}
.lang-switch .language.active { background: rgba(255,255,255,.09); color: var(--ivory); }
.lang-switch .language:hover { color: var(--ivory); }

/* --- Auto/Motorrad: sichtbar ein Segment, darunter ein echter Radioknopf.
   Kein eigenes JavaScript: :has() faerbt das gewaehlte Segment, und wo :has()
   fehlt, tut es die Klasse .ist-an, die die Vorlage schon serverseitig setzt. */
.seg-opt {
  font-family: var(--sans); font-size: var(--t-body-s); font-weight: var(--w-mid);
  padding: 0 var(--s4); color: var(--ash); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--night-line); }
.seg-opt .ico { width: 20px; height: 20px; }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-opt.ist-an,
.seg:has(input:checked) .seg-opt:has(input:checked) { background: var(--ice-veil); color: var(--ivory); }
.seg:has(input:checked) .seg-opt:not(:has(input:checked)) { background: transparent; color: var(--ash); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--ice); outline-offset: -2px; }

/* --- Umkreis: dasselbe Feld wie die Suche, nur schmal --- */
.field-umkreis {
  flex: none; width: auto; border-radius: var(--r-pill);
  padding: 9px var(--s4); font-size: var(--t-body-s);
}

/* --- Fusszeile: die flache Linkreihe des Backends in Spalten -------------
   getBottomMenu() liefert acht <a class="nav-link"> ohne Gruppen. Statt
   Ueberschriften zu erfinden, laufen sie in Spalten um. */
.foot-brand .about { font-size: var(--t-body-s); color: var(--ash); max-width: 34ch; line-height: 1.6; margin: var(--s4) 0 0; }
.foot-menu { column-count: 3; column-gap: var(--s10); }
.foot-menu .nav-link {
  display: block; padding: var(--s2) 0; break-inside: avoid;
  font-size: var(--t-body-s); color: var(--ash); border-radius: 0;
}
.foot-menu .nav-link:hover { color: var(--ivory); background: transparent; }
.foot .foot-grid { grid-template-columns: 1.1fr 1.6fr; }

/* --- Keks-Hinweis. Klassen unveraendert, scripts.min.js haengt daran. --- */
.cookies-accept {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--night-2); border-top: 1px solid var(--night-line);
  padding: var(--s5) 0;
}
.cookies-accept .cookies-text { display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap; }
.cookies-accept p { margin: 0; flex: 1 1 320px; font-size: var(--t-body-s); color: var(--ash); }
.cookies-actions { display: flex; gap: var(--s3); flex-wrap: wrap; }

@media (max-width: 900px) {
  .foot .foot-grid { grid-template-columns: 1fr; }
  .foot-menu { column-count: 2; }
  /*
   * Hier stand ".nav-links { display: none; }" — entfernt am 10.09.2026.
   *
   * Das war der Widerspruch zum Block bei 1060px, der zwanzig Zeilen weiter
   * oben aus derselben Leiste eine seitlich schiebbare Reihe macht und im
   * Kommentar ausdruecklich sagt: "scrollbare Reihe statt display:none —
   * nichts verschwindet". Diese Zeile stand danach und gewann also.
   *
   * Im Browser nachgemessen: bei 1000px und 950px war das Menue da
   * (overflow-x: auto), bei 900px, 768px und 375px display:none — auf jedem
   * Handy und jedem hochkant gehaltenen Tablet fehlte die Hauptnavigation
   * ersatzlos. Einen Burger gibt es in dieser Kopfzeile nicht; das alte
   * Bootstrap-Menue hatte einen, das neue setzt bewusst auf die schiebbare
   * Reihe. Dann muss sie aber auch unter 900px gelten.
   */
}
@media (max-width: 560px) {
  .foot-menu { column-count: 1; }
  .btn-login .lbl { display: none; }
  .btn-login .ico { display: block; }
}

/* ==========================================================================
   ORTSSEITE — was die echte Vorlage zusaetzlich braucht
   DriveLab GmbH, 09.09.2026.

   Der Entwurf zeigte gebaute Beispiele; die echte Seite hat ein paar Faelle
   mehr (leerer Ort, CMS-Fliesstext, mehrere Preise je Karte) und eine
   Filterleiste, deren Bedienelemente aus der Anwendung kommen und nicht
   umbenannt werden duerfen.
   ========================================================================== */

/* --- Filterleiste ---------------------------------------------------------
   Die Form kommt aus dem Entwurf (.filters, .frow, .flabel, .fgroup, .pill,
   .fcount, .fselect, .freset stehen weiter unten, aus 02-ortsseite.html).
   Hier steht nur, was der Entwurf nicht kennen kann: die echten
   Bedienelemente der Anwendung.

   .filt-roh haelt select#sort, #range, #duration, #transmission, #sex,
   #language und die fuenf Haken. Sie tragen die Suchlogik; scripts.min.js
   haengt an ihren Kennungen. Sie verschwinden erst, wenn seite.js die Pillen
   wirklich verdrahtet hat und .hat-js setzt — ohne JavaScript stehen sie da
   und funktionieren, wie sie es immer getan haben. --- */
.filt-roh {
  display: flex; align-items: center; gap: var(--s3);
  flex-wrap: wrap; margin: var(--s6) 0;
}
.filters.hat-js .filt-roh { display: none; }
.filt-feld { margin: 0; }
.filt-feld .field {
  font-size: var(--t-caption); font-weight: var(--w-mid);
  padding: 7px 30px 7px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--night-line-2); background: transparent; color: var(--ivory);
  cursor: pointer; appearance: none; width: auto;
  background-image: linear-gradient(45deg, transparent 50%, var(--ash) 50%), linear-gradient(135deg, var(--ash) 50%, transparent 50%);
  background-position: calc(100% - 15px) 13px, calc(100% - 11px) 13px;
  background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
}
.filt-feld .field:focus { border-color: var(--ice); }
.filt-haken {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 7px 13px; border-radius: var(--r-pill);
  box-shadow: var(--ring-2); font-size: var(--t-caption); color: var(--ash);
}
.filt-haken input { width: 16px; height: 16px; accent-color: var(--cobalt); flex: none; }
.filt-haken label { margin: 0; cursor: pointer; }

/* --- Mehrere Preise je Karte. Der Entwurf zeigte einen; eine Fahrschule mit
   Automat UND Schaltung hat zwei, und beide gehoeren gleichwertig hin. --- */
.preise { display: grid; gap: var(--s2); }
.preise .preis { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.preise .preis .art {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-size: var(--t-caption); color: var(--ash-dim); margin-left: auto;
}
/* Ohne Note faellt die linke Spalte des Bewertungskastens weg (die grosse
   Zahl, die Sterne, die Anzahl) — eine 0 waere dort kein Hinweis, sondern ein
   Urteil. Uebrig bleibt der Satz, der sagt, dass noch keine Note vorliegt, und
   der soll die ganze Breite haben statt in einer 200px-Spalte zu stehen. */
.score-panel.ohne-note { grid-template-columns: minmax(0, 1fr); }

/* Die echte Karte im Treffpunkt (seit 14.09.2026). Sie sitzt im selben
   Kasten wie die schematische davor und behaelt deren Mass und Kante; das
   Raster und der Verlauf darunter sind verdeckt und bleiben nur stehen,
   solange das Bild noch laedt. "display: block" gegen den Zeilenabstand,
   den ein iframe als Inline-Element sonst unten anhaengt. */
.map.map-echt { min-height: 240px; }
.map-rahmen { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
/* Der Weg hinaus zu Google Maps. Er sitzt IM Bild, unten links — die
   Namensnennung von OpenStreetMap steht unten rechts, die beiden kommen sich
   nicht ins Gehege. Feste Farben statt Wertnamen: eine Karte ist ein Bild und
   wird nicht hell, nur weil die Seite hell wird (dieselbe Ueberlegung wie bei
   den Nachtinseln in thema.css). */
.map-mehr {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-pill);
  background: rgba(23, 23, 33, .88); color: #ffffff;
  font-size: var(--t-caption); line-height: 1; text-decoration: none;
  white-space: nowrap; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background-color .16s ease;
}
.map-mehr:hover { background: rgba(23, 23, 33, 1); color: #ffffff; }
.map-mehr:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* Die Zahlenspalte der Verteilung ist im Entwurf var(--s18) = 72px breit, und
   dort reicht das: "mind. 87" und "höchst. 4". Mit echten Zahlen wird es
   laenger — "höchst. 16" sind zehn Zeichen und in der Festbreitenschrift
   genau 72px, also brach die Angabe auf zwei Zeilen um (Dimas Bild vom
   14.09.2026). Eine Stufe breiter, und sie bleibt eine Zeile, auch bei
   vierstelligen Zahlen. Beide Zeilen teilen dasselbe Mass, damit die Balken
   buendig anfangen und aufhoeren.
   ".verteilung" davor, weil die erzeugte Fassung von ".vt" weiter unten in
   dieser Datei steht und bei gleicher Staerke gewinnen wuerde. */
.verteilung .vt { grid-template-columns: var(--s18) minmax(0, 1fr) var(--s24); }
.verteilung .vt-zahl { white-space: nowrap; }

/* Seit dem 14.09.2026 kann eine Zeile zwei Getriebearten nennen, wenn beide
   denselben Preis haben. Das "margin-left: auto" darueber schiebt die Angabe
   nach rechts; stuende es auf beiden, verteilte der Umbruch den freien Platz
   ZWISCHEN ihnen und die zwei Woerter stuenden weit auseinander. Die zweite
   bekommt darum einen normalen Abstand und haengt sich an die erste. */
.preise .preis .art ~ .art { margin-left: var(--s3); }
.school-foot .per { font-size: var(--t-micro); color: var(--ash-dim); }

/* ==========================================================================
   DIE SCHNELLANFRAGE — 18.09.2026.

   Dima: "Bei 'Fahrstunde buchen' muesste super schnell eine Anfrage gemacht
   werden koennen ..." — dann "make it like the window pops up in our style" —
   und schliesslich "still looks bad look at our design, our html templates,
   everything ... and also for reference the school pages".

   Der letzte Hinweis war der entscheidende, und er deckt einen Fehler auf, den
   DESIGN.md beim Namen nennt: ich hatte ein zweites Formular erfunden. Auf der
   Profilseite steht dieses Ding laengst — der Kasten .ask, "Fahrstunde
   anfragen" (details.phtml ab 1720): leicht kobaltgetoentes Weiss,
   kobaltfarbener Innenring, Felder mit Platzhalter statt Beschriftung, Knopf
   ueber die volle Breite, darunter die gruene Zusicherung und der Baum.

   Das Fenster ist jetzt genau dieser Kasten. Deshalb steht hier fast nichts
   mehr: nur, wie ein <dialog> aussieht, und dass das Formular darin dasselbe
   Polster bekommt wie .ask-top. Alles andere kommt von .ask, .field,
   .reassure, .ask-note — und aendert sich mit, wenn die Profilseite sich
   aendert.
   ========================================================================== */
.school-foot { flex-wrap: wrap; }
/* Der Sternchenhinweis schiebt sich nach links, damit die zwei Knoepfe
   zusammenbleiben statt sich die Breite zu teilen. */
.school-foot .per { margin-right: auto; }

.sa-fenster {
  padding: 0;
  border: 0;
  background: transparent;
  width: min(92vw, 440px);
  max-height: 92vh;
  color: var(--ivory);
  overflow: visible;
}
/* Die Flaeche hinter dem Fenster ist --glass mit Unschaerfe — dasselbe
   Material, mit dem sich die Mobilnavigation ueber die Seite legt
   (wp.css, .nav-panel). Vorher stand hier ein selbstgemischtes Grauschwarz;
   Dima am 18.09.2026: "what's with that gray color? It's awful. We never use
   it." Stimmt: --glass ist auf Papier ein warmer heller Schleier, kein Grau. */
.sa-fenster::backdrop {
  background: rgba(249, 248, 246, .82);   /* Rueckfall, falls --glass fehlt */
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
/* Der Schleier ist hell — damit der Kasten darauf steht und nicht darin
   verschwimmt, bekommt er den Schatten des Hauses dazu. Der kobaltfarbene
   Innenring von .ask bleibt, er muss nur mitgeschrieben werden: eine zweite
   box-shadow-Regel wuerde die erste ersetzen. */
.sa-fenster .ask {
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--lift-2), inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 18%, transparent);
}

/* Das Schliesskreuz sitzt in der Kopfzeile des Kastens, rechts oben. */
.sa-fenster .ask-top { position: relative; padding-right: var(--s12); }
.sa-zu {
  position: absolute;
  top: var(--s5);
  right: var(--s5);
  padding: 0 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  color: var(--ash);
}
.sa-zu:hover { color: var(--ivory); }

/* Dasselbe Polster wie .ask-top, damit Kopf und Formular eine Kante haben. */
.sa-fenster form.sa {
  display: grid;
  gap: var(--s3);
  padding: var(--s5) var(--s6) var(--s4);
}
.sa-fenster form.sa textarea.field { min-height: var(--s14); }

.sa-zustimmung {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-top: var(--s2);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ash);
}
.sa-zustimmung input { margin-top: 3px; flex: none; }

.sa-antwort { margin: 0; font-size: var(--t-small); color: var(--ash); }
.sa-antwort:empty { display: none; }
.sa-antwort.schlimm { color: var(--neg); }

/* Nach dem Absenden steht an der Stelle des Sendeknopfs der Dank —
   sonst schickt jemand dieselbe Anfrage ein zweites Mal. */
.sa-dank { margin: 0; font-size: var(--t-body-s); color: var(--ivory); }

@media (max-width: 480px) {
  .sa-fenster { width: 94vw; }
}
.school-name a { color: inherit; text-decoration: none; }
.school-name a:hover { color: var(--ice); }
.school-place a { color: var(--ash-dim); text-decoration: none; }
.school-place a:hover { color: var(--ice); }

/* --- "Alle anzeigen" unter der Liste --- */
.liste-mehr { display: flex; justify-content: center; margin-top: var(--s8); }

/* --- Ein Ort ohne eingetragene Fahrschule. Kein Fehler, sondern eine
   Auskunft: darum eine ruhige Karte, kein rotes Band. --- */
.leerer-ort { margin: var(--s6) 0; }
.leerer-ort p { margin: 0 0 var(--s4); color: var(--ash); }
.leerer-ort p:last-child { margin-bottom: 0; }
.leerer-ort-wege { display: flex; gap: var(--s5); flex-wrap: wrap; }

/* --- Der Preiskopf traegt hier nur Zahl und Quelle, kein zweites Feld. --- */
.pricehead { grid-template-columns: 1fr; gap: var(--s3); }
.pricehead .preis-gross { margin: 0; }
.pricehead .preis-quelle { margin: 0; font-size: var(--t-body-s); color: var(--ash-dim); }

/* --- Fliesstext aus dem Backend. Er bringt eigenes Markup mit (Absaetze,
   Listen, Zwischentitel) und bekommt hier nur Mass und Farbe. --- */
.prosa { max-width: 68ch; color: var(--ash); line-height: 1.7; }
.prosa h2, .prosa h3 { color: var(--ivory); margin: var(--s10) 0 var(--s4); }
.prosa h2:first-child, .prosa h3:first-child { margin-top: 0; }
.prosa p { margin: 0 0 var(--s5); }
.prosa a { color: var(--ice); }
.prosa ul, .prosa ol { margin: 0 0 var(--s5) var(--s6); padding: 0; }
.prosa li { margin-bottom: var(--s2); }

/* --- Die drei Ortsantworten --- */
.todrive-ort-antworten { max-width: 68ch; margin: var(--s10) 0; }
.todrive-ort-antworten h2 { margin: var(--s8) 0 var(--s3); }
.todrive-ort-antworten h2:first-child { margin-top: 0; }
.todrive-ort-antworten p { margin: 0; color: var(--ash); line-height: 1.7; }

/* ==========================================================================
   PROFILSEITE
   DriveLab GmbH, 09.09.2026.

   Im Entwurf (docs/design/03-profil.html) sind Bild und Identitaet EIN
   Block: links das Bild der Fahrschule, rechts Name, Ort, Bewertung,
   Angebot — und die eine Handlung. Bisher standen sie als zwei Abschnitte
   untereinander, und "Fahrstunde anfragen" kam erst nach der halben Seite.
   ========================================================================== */

.profil-kopf {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--s10); align-items: center;
  padding: var(--s10) var(--s6) var(--s12);
}
/* Seit dem 12.09.2026 steht der Kopf (Name, Bewertung, Zahlen) in der
   eigenen Karte .hero-card darueber — genau wie im Entwurf, der ueberhaupt
   keine Galerie kennt. In diesem Kasten blieb damit nur die Galerie, und die
   zweite Spalte stand leer. Hat er nur ein Kind, ist er einspaltig und mittig:
   die Bilder sind 579x434 gross, ueber die volle Seitenbreite gezogen waeren
   sie unscharf. */
.profil-kopf:not(:has(> * + *)) {
  /* Auf der Spalte des Textes darunter, nicht in der Mitte schwebend.
     Die Seite hat unter der Kopfkarte ein Raster aus 940 Pixeln Inhalt und
     372 Pixeln klebender Spalte (.split). Die Galerie stand bis zum
     13.09.2026 mittig in 760 Pixeln, also weder auf der einen noch auf der
     anderen Kante — mit 300 Pixeln Leere links und rechts. Jetzt beginnt
     sie an derselben Linie wie Karte und Text und ist so breit wie die
     Textspalte. */
  grid-template-columns: minmax(0, 940px);
  justify-content: start;
  padding-top: var(--s8);
  padding-bottom: var(--s8);
}
.profil-bild { border-radius: var(--r-night); overflow: hidden; box-shadow: var(--ring); background: var(--night-2); }
.profil-bild img { width: 100%; height: auto; display: block; }
/* Solange slick nicht geladen hat, stuenden alle Bilder untereinander. Die
   Klasse hide-slick-slides setzt die Anwendung selbst; hier bekommt sie
   Wirkung, weil das alte Stylesheet fehlt. */
.profil-bild .hide-slick-slides { display: none; }
.profil-bild .slick-initialized .hide-slick-slides { display: block; }

.profil-id .header { display: grid; gap: var(--s4); }
.profil-id h1 { margin: 0; font-size: var(--t-h1); font-weight: var(--w-mid); line-height: 1.15; color: var(--ivory); }
.profil-cta { justify-self: start; margin-top: var(--s4); }

/* Bewertung und Ort in einer Zeile, wie auf der Karte. */
.rating-location { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--t-body-s); color: var(--ash); }
.rating-location .rating { display: inline-flex; align-items: center; gap: var(--s2); }
.rating-location .rev-avg { color: var(--gold); letter-spacing: .04em; }
.rating-location .numbers { color: var(--ash); }
.rating-location .location a { color: var(--ash); }
.rating-location .location a:hover { color: var(--ice); }
.text-new { color: var(--ash-dim); }

/* Fahrzeugarten und Zahl der Fahrlehrer:innen */
.profil-id .category { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-body-s); color: var(--ash); }
.profil-id .instructors { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-body-s); color: var(--ash); }

.profil-inhalt { padding: var(--s6) 0 var(--s18); }
.profil-inhalt .section { margin-bottom: var(--s14); }
.profil-inhalt .section > h2 { margin-bottom: var(--s6); }

/* Die Merkmalliste im Ueberblick: Zeichen, Titel, ein Satz. */
.overview { padding: var(--s6); }
.overview-element { display: block; padding: var(--s4) 0; border-top: 1px solid var(--night-line); }
.overview-element:first-child { border-top: 0; padding-top: 0; }
.overview-element .title {
  display: flex; align-items: center; gap: var(--s2);
  font-weight: var(--w-mid); color: var(--ivory); margin-bottom: var(--s2);
}
.overview-element p { margin: 0; font-size: var(--t-body-s); color: var(--ash); line-height: 1.6; }
.overview-element a { color: var(--ice); }
/* .ov-icon stand im alten Stylesheet mit margin-left:-2rem in einer Liste
   mit Einzug; hier steht es in einer Zeile und braucht keinen. */
.list-style-icons .ov-icon { margin-left: 0; }

/* Brotkrumen aus dem Backend: eine <ol> mit <li>, ohne Punkte und in einer
   Zeile. */
.crumbs-cms ol, .crumbs-cms ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; padding: 0; }
.crumbs-cms li { margin: 0; }
.crumbs-cms li + li::before { content: "\203A"; margin-right: 7px; color: var(--ash-dim); }

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

/* --- Bewertungsseite nach einer Anfrage. Sie ist ein Formular, sonst
   nichts — darum eine schmale Spalte statt der vollen Breite. --- */
.bewertung-seite { padding: var(--s12) var(--s6) var(--s18); max-width: 720px; }
.bewertung-seite h1 { margin-bottom: var(--s4); }
.bewertung-seite fieldset { border: 0; padding: 0; margin: 0 0 var(--s8); }
.bewertung-seite legend { padding: 0; margin-bottom: var(--s2); color: var(--ivory); }
.bewertung-seite label { display: block; margin-bottom: var(--s2); font-size: var(--t-body-s); color: var(--ash); }

/* --- Ratgeberkarten in der Uebersicht --- */
.card-night .article-image img, .card-night img { border-radius: var(--r-paper); }

/* ==========================================================================
   ORTSKACHELN, RATGEBER, ARTIKELKARTEN
   DriveLab GmbH, 09.09.2026.
   ========================================================================== */

.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ortkacheln { padding: var(--s14) var(--s6); }
.ortkachel {
  display: block; border-radius: var(--r-night); overflow: hidden;
  background: var(--night-2); box-shadow: var(--ring);
  text-decoration: none; color: inherit;
  transition: transform var(--mo-kurz) var(--mo-kurve), background-color var(--mo-kurz) var(--mo-kurve);
}
.ortkachel:hover { background: var(--night-3); transform: translateY(-2px); }
.ortkachel-bild { display: block; aspect-ratio: 243 / 174; overflow: hidden; }
.ortkachel-bild img { width: 100%; height: 100%; object-fit: cover; }
.ortkachel-zeile { display: block; padding: var(--s4) var(--s5); }
.ortkachel-zeile b { display: block; color: var(--ivory); font-weight: var(--w-mid); }
.ortkachel-zahl { display: block; margin-top: var(--s1); font-size: var(--t-body-s); color: var(--ash-dim); }
.ortkacheln-mehr { margin: var(--s8) 0 0; }

.ratgeber-links { padding: var(--s14) var(--s6); }
.ratgeber-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.ratgeber-eintrag {
  display: block; padding: var(--s5); border-radius: var(--r-paper);
  background: var(--night-2); text-decoration: none;
  transition: background-color var(--mo-kurz) var(--mo-kurve);
}
.ratgeber-eintrag:hover { background: var(--night-3); }
.ratgeber-eintrag b { display: block; color: var(--ice); font-weight: var(--w-mid); margin-bottom: var(--s1); }
.ratgeber-eintrag span { display: block; font-size: var(--t-body-s); color: var(--ash); line-height: 1.55; }

.artikel-bild { display: block; border-radius: var(--r-paper); overflow: hidden; margin-bottom: var(--s5); }
.artikel-bild img { width: 100%; height: auto; display: block; }
.artikel-text { display: grid; gap: var(--s3); }
.artikel-titel { text-decoration: none; color: inherit; }
.artikel-titel:hover h2, .artikel-titel:hover h3 { color: var(--ice); }
.artikel-info { font-size: var(--t-caption); color: var(--ash-dim); }
.artikel-info p { margin: 0; }
.artikel-lead { margin: 0; font-size: var(--t-body-s); color: var(--ash); line-height: 1.6; }

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ratgeber-raster { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
}

/* --- Ortsverzeichnis und Nachbarorte ------------------------------------- */
.ortverzeichnis, .nachbarorte { padding: var(--s14) var(--s6); }
.ortverzeichnis-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s8); }
.ortverzeichnis .kanton-name {
  font-size: var(--t-caption); text-transform: uppercase; letter-spacing: .12em;
  color: var(--ash-dim); font-weight: var(--w-semi); margin: 0 0 var(--s3);
}
.ortverzeichnis ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.ortverzeichnis li { margin: 0; }
.ortverzeichnis a { color: var(--ash); font-size: var(--t-body-s); text-decoration: none; }
.ortverzeichnis a:hover { color: var(--ice); }

.nachbarorte-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.nachbarort {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-paper);
  background: var(--night-2); text-decoration: none;
  /* Die Kante, weil --night-2 auf Papier #faf8f5 ist - auf --paper-0 waere die
     Kachel sonst unsichtbar. Dasselbe tut .why-card in thema.css:91. In der
     dunklen Fassung ist --ring ein heller Hauch, also stimmt beides. */
  box-shadow: var(--ring);
  transition: background-color var(--mo-kurz) var(--mo-kurve);
}
.nachbarort:hover { background: var(--night-3); }
.nachbarort b { color: var(--ash); font-weight: var(--w-book); font-size: var(--t-body-s); }
.nachbarort .num { color: var(--ash-dim); font-size: var(--t-caption); white-space: nowrap; }
.nachbarorte-fuss { margin: var(--s5) 0 0; font-size: var(--t-caption); color: var(--ash-dim); }

@media (max-width: 900px) {
  .ortverzeichnis-raster, .nachbarorte-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ortverzeichnis-raster, .nachbarorte-raster { grid-template-columns: 1fr; }
}

/* --- Ratgeberartikel ----------------------------------------------------- */
.artikel { display: block; padding-bottom: var(--s14); }
.artikel-kopfbild { padding-top: var(--s8); }
.artikel-kopfbild img { width: 100%; height: auto; border-radius: var(--r-night); }
.artikel-koerper { max-width: 78ch; padding-top: var(--s8); }
.artikel-koerper h1 { margin-bottom: var(--s6); }
.artikel-koerper .artikel-info {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  margin-top: var(--s10); padding-top: var(--s5);
  border-top: 1px solid var(--night-line);
  font-size: var(--t-caption); color: var(--ash-dim);
}
.artikel-koerper .artikel-info a { color: var(--ice); }

/* ==========================================================================
   DIE PROFILSEITE — was beim Umbau ohne Aussehen blieb
   DriveLab GmbH, 10.09.2026, nachgezogen beim Durchlesen des Deploys.

   school/details.phtml ist umgebaut, aber vier ihrer Bausteine sind es nicht
   (partials/drivingschool/vehicle-card, pricing-card, pricing-card-summary,
   instructor-card), und die Vorlage selbst benutzt weiter die Klassennamen der
   alten style.min.css. Die wird im neuen Design nicht mehr geladen. Beim
   Abgleich "welche Klasse benutzt die Vorlage, welche definiert eine geladene
   Datei" blieben 28 Namen uebrig — Bewertungen, Galerie, Preise, Fahrzeuge.

   Die Profilseite ist nach den Ortsseiten die wichtigste Seite der Website.
   ========================================================================== */

/* --- 1. Die Galerie: slick braucht sein eigenes Aussehen -----------------
   Der schwerste Posten. Die Bildergalerie laeuft mit slick (in
   scripts.min.js, wird weiter geladen), und slick ist eine Bibliothek, die
   ihr eigenes Geruest in die Seite baut: slick-list, slick-track,
   slick-slide. Ohne die passenden Regeln steht das Geruest da, aber die
   Bilder liegen untereinander in Originalgroesse statt nebeneinander im
   Fenster — aus der Galerie wird eine Bildersaeule.

   Im alten style.min.css war slicks Stylesheet enthalten. Uebernommen wurde
   nur .slick-initialized. Hier das Notwendige, nicht die ganze Bibliothek:
   Fenster, Schiene, Folie. */
.slick-slider {
  position: relative; display: block; box-sizing: border-box;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  touch-action: pan-y; user-select: none;
}
.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; }
.slick-slider .slick-list,
.slick-slider .slick-track { transform: translate3d(0, 0, 0); }
.slick-track {
  position: relative; top: 0; left: 0; display: block;
  margin-left: auto; margin-right: auto;
}
.slick-track:before, .slick-track:after { display: table; content: ''; }
.slick-track:after { clear: both; }
.slick-loading .slick-track,
.slick-loading .slick-slide { visibility: hidden; }
.slick-slide { position: relative; display: none; float: left; height: 100%; min-height: 1px; }
[dir='rtl'] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-initialized .slick-slide { display: block; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
.slick-arrow.slick-hidden { display: none; }
/* Vor der Initialisierung wuerden alle Bilder gleichzeitig stehen. */
.hide-slick-slides { display: none; }
.slick-initialized .hide-slick-slides { display: block; }

.slick-container { position: relative; overflow: hidden; border-radius: var(--r-night); }
.carousel-school-gallery,
.carousel-students-gallery { position: relative; }
.gallery-image { padding: 0 var(--s1); }
.gallery-image img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-data);
}
/* slicks Pfeile: das neue Design hat runde Knoepfe, also runde Pfeile. */
.slick-container .slick-arrow {
  position: absolute; top: 50%; z-index: 5; transform: translateY(-50%);
  width: 40px; height: 40px; padding: 0;
  background: var(--night-1); border: 1px solid var(--night-line);
  border-radius: var(--r-pill); color: var(--ivory); cursor: pointer;
}
.slick-container .slick-arrow:hover { background: var(--night-3); }
.slick-container .slick-prev { left: var(--s3); }
.slick-container .slick-next { right: var(--s3); }

/* --- 2. Der Beschreibungstext und sein "Mehr anzeigen" -------------------
   details.min.js schaltet .collapsed auf .about-content und tauscht d-none
   zwischen .state-collapsed und .state-open. Beides braucht kein CSS ausser
   der Klammer selbst — ohne sie stand der ganze Text immer offen und der
   Knopf tat sichtbar nichts.

   ACHTUNG, Namenskollision: seite.css definiert .cover global als Titelbild
   einer Karte (aspect-ratio 4/3, Verlauf). Auf der Profilseite ist .cover
   etwas voellig anderes — der weiche Auslauf ueber dem abgeschnittenen Text.
   Darum hier auf .about-content .cover eingeschraenkt; das schlaegt die
   allgemeine Regel, sonst stuende mitten in der Beschreibung ein grosser
   Verlaufsklotz. */
.about-content { position: relative; overflow: hidden; height: initial; transition: max-height .2s; }
.about-content.collapsed { max-height: 200px; }
.about-content .cover {
  pointer-events: none; opacity: 0;
  position: absolute; bottom: 0; left: 0; width: 100%; height: 64px;
  margin: 0; aspect-ratio: auto; border-radius: 0;
  background: linear-gradient(180deg, transparent 0, var(--night-0) 100%);
}
.about-content.collapsed .cover { opacity: 1; }

/* --- 3. Die Bewertungen --------------------------------------------------
   Google-Bewertungen, zwei sichtbar, der Rest hinter "Alle anzeigen"
   (details.min.js nimmt dafuer d-none ab). .hidden ist Bootstrap 3 und stand
   in der Vorlage neben d-none — nachgebildet, damit beide dasselbe tun. */
.hidden { display: none !important; }

.rating-reviews { padding: var(--s6); }
.rating-reviews-headline {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s6);
  padding-bottom: var(--s5); margin-bottom: var(--s5);
  border-bottom: 1px solid var(--night-line);
}
/* Die Vorlage stellt drei Geschwister nebeneinander: den Wert, das "/5" und
   die Quelle. Wert und "/5" gehoeren auf eine Grundlinie ("4.7/5"), die
   Quelle darunter — darum umbrechender Flex und flex-basis:100% fuer alles,
   was eine eigene Zeile braucht. */
.rating-reviews-overal {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0 var(--s1); row-gap: var(--s1);
}
.rating-reviews-overal .rating-source,
.rating-reviews-overal .rating-info,
.rating-reviews-overal .rating { flex: 0 0 100%; }
.numbers-value { font-size: var(--t-h2); font-weight: var(--w-mid); line-height: 1; color: var(--ivory); }
.numbers-of { font-size: var(--t-body-s); color: var(--ash-dim); }
.rating-source { font-size: var(--t-caption); color: var(--ash-dim); }
.rating-info { cursor: help; color: var(--ash-dim); }

/* Die Bewertungen trugen hier bis zum 12.09.2026 ihr eigenes Polster und
   ihre eigene Trennlinie. Seit dem Umbau auf den Entwurf (03-profil.html)
   ist eine Bewertung eine .card-data.review und bringt beides selbst mit;
   diese Regeln haetten nur dagegen gearbeitet. Die Klasse .review-item
   BLEIBT im Markup — details.min.js sucht sie, um "alle anzeigen" zu
   schalten —, sie gestaltet aber nichts mehr. Die alte Fassung der Seite
   laedt seite.css gar nicht (sie haengt an frontend/css/style.min.css),
   ihr fehlt also nichts. */

/* --- 4. Der senkrechte Rhythmus der Abschnitte ---------------------------
   Preise, Fahrzeuge, Bewertungen, Kontakt und "andere Fahrschulen" sind
   <section>-Klammern mit einem .container darin. Der Container steht schon in
   raster.css; was fehlte, war der Abstand zwischen den Abschnitten. Ohne ihn
   laeuft die Profilseite als ein einziger Block durch.
   .bg-light-grey bringt seine eigene Polsterung mit, darum nur die anderen. */
section.prices,
section.vehicles,
section.contact-form { padding: var(--s12) 0; }
section.reviews,
section.important,
section.other-ds { margin: var(--s12) 0; }
.city-description { padding: var(--s10) 0; }

/* Der Merkzettel in den "wichtigen Hinweisen" — eine Notiz, keine Warnung. */
.info-sticker {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4); margin-bottom: var(--s3);
  background: var(--night-2); border: 1px solid var(--night-line);
  border-radius: var(--r-paper);
  font-size: var(--t-body-s); color: var(--ash);
}

/* Teilen-Leiste unter einem Ratgeberbeitrag. */
.sharing { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s6); }
.sharing a { color: var(--ash-dim); }
.sharing a:hover { color: var(--ice); }

/* ==========================================================================
   DAS ANFRAGEFORMULAR
   DriveLab GmbH, 10.09.2026, nachgezogen beim Durchlesen des Deploys.

   Warum das beim ersten Abgleich durchfiel: dieses Formular steht in KEINER
   Vorlage. Es wird von der Klasse DrivingSchoolContactForm erzeugt, in
   fuenfzehn CustomHtml-Bausteinen, und views-neu/school/details.phtml gibt es
   nur mit $form->toHtml() aus. Ein Abgleich, der Vorlagen liest, sieht dieses
   Markup nie - und genau darin steckt das Formular, das die CHF 90 verdient.

   Gezaehlt: neun Klassen der Formularklasse sind in style.min.css gestylt und
   in den neuen Dateien nirgends. Ohne sie erscheint das Formular als flache
   Reihe nackter Radioknoepfe, ohne Karten, ohne Trennung der vier Fragen.

   Nicht nachgebildet, mit Absicht:
     custom-control-input  raster.css zeigt bei diesem Design den ECHTEN
                           Kaestchen/Radioknopf (.custom-control als Flexzeile,
                           .custom-control-label als Text). Die alte Regel
                           versteckte ihn (opacity:0) und malte ihn per
                           ::before nach. Hier ihn zu verstecken hiesse: gar
                           kein Kaestchen mehr.
     die Klassen von SchoolSearchForm   views-neu/partials/subheader-search.phtml
                           rendert das Suchformular bewusst nicht mehr - die
                           Suchleiste sitzt in der Kopfzeile. Das Markup
                           entsteht also nie.
   ========================================================================== */

/* ==========================================================================
   DAS ANFRAGEFORMULAR WAR ZU LANG — 18.09.2026.

   Dima: "it is too long and you need to scroll all the way down to be able to
   send it - fix both".

   Gemessen auf der Profilseite von VKU Leu, Fenster 900 Pixel hoch: der Kasten
   war 1579 Pixel hoch. Man musste also rund 680 Pixel scrollen, nur um den
   Knopf ueberhaupt zu sehen — und das bei einem Formular, das am Ende drei
   Angaben braucht.

   Zwei Eingriffe, beide nur hier im Kasten (.ask), damit das Formular an
   anderer Stelle unveraendert bleibt:

   1. KUERZER. Die Halbsaetze unter jeder Frage wiederholen die Frage
      ("Kategorie waehlen" / "Wie moechtest Du fahren lernen?") — sie fallen
      weg. Dazu engere Polster, kleinere Fragezeile, flachere Felder und ein
      Textfeld von 88 statt 140 Pixeln. Gemessen danach: 1305 Pixel, also 274
      weniger. Nebenwirkung, die zaehlt: die vier Kategorien passen jetzt zu
      zweit nebeneinander statt untereinander.

   2. DER KNOPF BLEIBT STEHEN. position:sticky am Absendeknopf — er faehrt beim
      Scrollen unten mit, statt am Ende zu warten. Dafuer muss .ask von
      overflow:hidden auf overflow:clip: hidden macht den Kasten zum eigenen
      Scrollbereich und sticky klebt dann an dessen Unterkante, also unsichtbar
      weit unten. clip schneidet die Ecken genauso ab, ohne Scrollbereich.

      Nur ab 981 Pixeln Fensterbreite. Darunter gibt es .dock, die feste
      Leiste unten mit Preis und Knopf — zwei Handlungen uebereinander waeren
      eine zu viel.
   ========================================================================== */
.ask .form-card .small,
.ask .form-card-no-border .small { display: none; }
.ask .form-card { padding: var(--s4); margin-bottom: var(--s4); }
.ask .form-card-no-border { margin-bottom: var(--s4); padding: var(--s2) 0; }
.ask .form-card-header,
.ask .form-card-header-nb { margin-bottom: var(--s2); padding-bottom: var(--s2); font-size: var(--t-body); }
.ask .form-card-body { gap: var(--s2) var(--s4); }
.ask .form-group { margin-bottom: var(--s2); }
/* Die Felder in diesem Formular heissen .form-control, nicht .field — das
   Formular ist aelter als identity.css. Im ersten Anlauf stand hier .field,
   und genau darum blieb das Formular fast so lang wie vorher. */
.ask .form-control { padding: var(--s3) var(--s4); }
.ask textarea.form-control { min-height: 0; height: 64px; }

/* "wie dringend we dont need that part at all" (Dima, 18.09.2026). Der Block
   verschwindet, das Feld bleibt: der voreingestellte Knopf "Nicht dringend"
   wird weiter mitgeschickt, die Spalte urgency bleibt gefuellt. Eine Zeile
   loeschen und er ist wieder da. */
.ask .form-card-dringlichkeit { display: none; }

/* ZUERST DIE KONTAKTANGABEN. Dima: "i dont want people to scroll to be able
   to book". Name, Telefon und E-Mail sind das, was eine Anfrage ausmacht;
   Kategorie, Kontaktweg und Nachricht sind Zugabe. Die Reihenfolge im
   Quelltext bleibt, damit Skript und Beanstandungen unveraendert arbeiten -
   nur die Anzeige dreht. Gemessen: die drei Felder stehen dann bei 213 bis
   492 Pixel, der Knopf bei 888 - beides gleichzeitig im Bild, ohne zu
   scrollen. */
.ask-form { display: flex; flex-direction: column; }
.ask .form-card-kontakt { order: -2; }
/* UND DER KNOPF DIREKT DARUNTER. Am 18.09.2026 stand er zuerst weiter unten
   und war "sticky" - das half nichts, und der Grund ist eine Eigenheit von
   position:sticky: ein Element klebt nur, solange UNTER ihm noch etwas von
   seinem Elternkasten uebrig ist. Als letztes Kind von .ask-form hatte der
   Knopf nichts mehr unter sich, also war seine Klebeposition identisch mit
   seiner normalen - er bewegte sich nie. Dima zweimal: "still doesnt work",
   "you still have to scrool till end to send".

   Jetzt steht er direkt hinter den Kontaktangaben, und die drei freiwilligen
   Bloecke (Kategorie, Kontaktweg, Nachricht) liegen darunter. Damit ist er
   erstens sofort sichtbar, ohne zu scrollen, und zweitens hat sticky endlich
   Platz nach unten: beim Scrollen durch die Zugaben faehrt er mit. */
.ask-form [type="submit"] { order: -1; }

/* --- Die Zugaben hinter einer Zeile — 18.09.2026 ------------------------
   Dima: "some data is still invisible unless scrolled down thatts a big
   mistake". Kategorie, Kontaktweg und Nachricht standen unter dem Knopf und
   bei 800 Pixeln Fensterhoehe komplett ausserhalb des Bildes. Enger machen
   allein reichte nicht (gemessen 986 Pixel). Jetzt stehen sie in einem
   <details>: eine sichtbare Zeile statt drei unsichtbarer Kaesten. */
.ask-mehr { order: 0; margin: var(--s2) 0 var(--s3); }
.ask-mehr > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) 0;
  font-size: var(--t-body-s);
  color: var(--ash);
}
.ask-mehr > summary::-webkit-details-marker { display: none; }
.ask-mehr > summary::before {
  content: '+';
  font-size: var(--t-body-l);
  line-height: 1;
  color: var(--cobalt);
}
.ask-mehr[open] > summary::before { content: '\2212'; }   /* Minus */
.ask-mehr > summary:hover { color: var(--ivory); }
.ask-mehr .form-card:last-of-type,
.ask-mehr .form-card-no-border:last-of-type { margin-bottom: 0; }

/* Etwas enger, damit Preis, Kontaktangaben und Knopf zusammen ins Bild passen. */
.ask .form-card { padding: var(--s3) var(--s4); margin-bottom: var(--s3); }
.ask .form-card-header,
.ask .form-card-header-nb { margin-bottom: var(--s2); padding-bottom: 6px; font-size: var(--t-body-s); }
.ask .form-card-body { gap: 6px var(--s3); }
.ask .form-check label { font-size: var(--t-body-s); }
.ask .form-control { padding: 10px var(--s4); font-size: var(--t-body-s); }
.ask textarea.form-control { min-height: 0; height: 54px; }
.ask .ask-top { padding: var(--s4) var(--s6) var(--s3); }
.ask .reassure { font-size: var(--t-caption); }
.ask .ask-note { padding: var(--s2) var(--s6) var(--s4); font-size: var(--t-caption); }

.ask .form-card-no-border { margin-bottom: var(--s3); }
.ask .form-group { margin-bottom: 6px; }
.ask .reassure { font-size: var(--t-caption); }
.ask .ask-note { padding: var(--s3) var(--s6) var(--s5); font-size: var(--t-caption); }
.ask .ask-top { padding: var(--s5) var(--s6) var(--s4); }

/* Der Absendeknopf faehrt beim Scrollen mit, auf jeder Breite. Zuerst stand
   das hinter @media (min-width: 981px) - Dima sah es darum nicht ("still
   doesnt work"), sein Fenster war schmaler oder vergroessert. Die feste
   Leiste unten (.dock) schaltet sich selbst ab, sobald das Formular im Bild
   ist (details.min.js, .is-off), also stehen nie zwei Knoepfe uebereinander.

   overflow:clip statt hidden ist noetig: hidden macht .ask zu einem eigenen
   Scrollbereich, und sticky klebt dann an DESSEN Unterkante - unsichtbar weit
   unten. clip schneidet die Ecken genauso ab, ohne Scrollbereich. */
.ask { overflow: clip; }
.ask-form [type="submit"] {
  position: sticky;
  bottom: var(--s3);
  z-index: 2;
  box-shadow: 0 6px 24px rgba(12, 23, 84, .18);
}

/* Eine Karte je Frage: Kategorie, Getriebe, Dringlichkeit, Kontaktweg. */
.form-card {
  margin: 0 0 var(--s5) 0; padding: var(--s5);
  background: var(--night-2);
  border: 1px solid var(--night-line); border-radius: var(--r-paper);
}
/* Die Fassung ohne Rahmen: derselbe Abstand, keine Flaeche. */
.form-card-no-border { margin: 0 0 var(--s5) 0; padding: var(--s5) 0; border: 0; background: none; }

/* Die Frage selbst, ueber ihren Antworten. */
.form-card-header,
.form-card-header-nb {
  margin: 0 0 var(--s4) 0;
  font-size: var(--t-body-l); font-weight: var(--w-mid); color: var(--ivory);
}
/* Nur die eine Fassung traegt die Trennlinie - "nb" heisst no border. */
.form-card-header { padding-bottom: var(--s3); border-bottom: 1px solid var(--night-line); }
.form-card-header-nb { border-bottom: 0; }

/* Der erklaerende Halbsatz unter der Frage ("Select category required"). */
.form-card .small,
.form-card-no-border .small {
  display: block; margin-top: var(--s1);
  font-size: var(--t-body-s); font-weight: var(--w-book); color: var(--ash);
}

/* Die Antworten. Nebeneinander, solange Platz ist. */
.form-card-body { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: flex-start; }
.form-card-body .form-group { margin-bottom: 0; }

/* Eine Antwortmoeglichkeit: Knopf und Beschriftung auf einer Grundlinie.
   Die alte Regel schob den Knopf absolut aus dem Textfluss heraus
   (padding-left 1.25rem, margin-left -1.25rem); hier reicht eine Flexzeile. */
.form-check {
  display: flex; align-items: center; gap: var(--s2);
  margin: 0; padding: 0;
}
.form-check label { margin: 0; cursor: pointer; color: var(--ash); }
.form-check-input { margin: 0; flex: 0 0 auto; cursor: pointer; }

/* Layout-Kleinigkeiten, die die Formularklassen voraussetzen. */
.align-items-center { align-items: center; }
.col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
@media (min-width: 992px) { .order-lg-1 { order: 1; } }

/* --- Die Stimme am Kopf der Profilseite --------------------------------
   Der Entwurf laesst sie unten rechts in der Kopfkarte SCHWEBEN, und genau
   das macht die Karte kurz: gemessen am Entwurf 304 Pixel hoch, weil das
   Zitat den freien Platz rechts neben den Kennzahlen fuellt statt eine
   eigene Zeile zu brauchen.

   Am 12.09.2026 hatte ich sie in den Fluss gelegt, weil sie bei einer
   kurzen Merkmalzeile auf den Kennzahlen lag. Das war die falsche Antwort:
   die Karte wurde dadurch 462 statt 304 Pixel hoch, mit einem leeren Band
   quer durch die Mitte — an drei Profilen nebeneinander zu sehen.

   Richtig ist, ihr den Platz freizuhalten: hat die Karte ein Zitat, hoert
   der Koerper 250 Pixel vor dem rechten Rand auf. Dann kann nichts mehr
   darunterrutschen, und die Karte bleibt so kurz wie im Entwurf.
   Unter 1080 Pixel schaltet der Entwurf selbst in den Fluss; dort faellt
   die Freihaltung weg. */
.hero-card .hero-schnipsel {
  position: absolute; top: auto;
  bottom: var(--s5); right: var(--s5);
  max-width: 250px; margin: 0;
}
.hero-card:has(.hero-schnipsel) .hero-body {
  padding-right: calc(250px + var(--s8));
}
.hero-card .hero-schnipsel q { quotes: "\201E" "\201C"; font-style: normal; }
.hero-card .hero-schnipsel .wer { display: block; margin-top: var(--s2); font-size: var(--t-micro); color: var(--stone); }

@media (max-width: 1080px) {
  .hero-card .hero-schnipsel {
    position: static; max-width: none;
    margin-top: var(--s4); box-shadow: none;
  }
  .hero-card:has(.hero-schnipsel) .hero-body { padding-right: 0; }
}


/* --- Fahrschulkarten: unten buendig ------------------------------------
   Die Karten einer Reihe sind gleich hoch (Raster), aber ihr INHALT ist es
   nicht: eine Fahrschule hat einen Preis, die naechste drei. Damit standen
   das Merkmalsband, der Knopf und die Fussnote in jeder Karte auf einer
   anderen Hoehe — am 13.09.2026 auf der Suchseite nebeneinander zu sehen.

   Die Preisliste bekommt darum den uebrigen Platz, und alles darunter sitzt
   an der Unterkante. Damit liegen Band, Knopf und Fussnote in einer Reihe
   auf derselben Linie, egal wie viele Preise darueber stehen. */
.card-data .preise { flex: 1 1 auto; }
.card-data .passung { margin-top: var(--s4); }

/* --- Die drei Schritte nebeneinander -----------------------------------
   Im Entwurf steht diese Liste in einer schmalen Spalte neben einer
   gespielten Szene, also untereinander. Die Szene ist nicht gebaut (sie
   zeigt eine erfundene Fahrschuelerin), darum steht die Liste ueber die
   ganze Breite — und dort gehoeren drei Schritte nebeneinander, nicht als
   drei sehr lange Zeilen untereinander. */
.haken-drei {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6) var(--s8); margin: var(--s8) 0 0; padding: 0; list-style: none;
}
@media (max-width: 860px) {
  .haken-drei { grid-template-columns: 1fr; }
}

/* --- Zwei Kleinigkeiten, die der Entwurf offen laesst -------------------

   1. --w-reg gibt es nicht. 07b-suche.html schreibt "font-weight:
      var(--w-reg)"; im Designsystem heisst das Gewicht --w-book (400).
      Ein unbekannter Wert macht in CSS die ganze Eigenschaft ungueltig —
      im Entwurf faellt die Zeile also ebenfalls aus, nur faellt es dort
      niemandem auf. Hier steht, was gemeint war.

   2. Die Reichweite-Pillen tragen einen versteckten Radioknopf, damit sie
      ohne JavaScript bedienbar sind. Dann muss aber auch OHNE JavaScript
      zu sehen sein, welche gewaehlt ist. */
:root { --w-reg: var(--w-book); }
.pill:has(input:checked) {
  background: var(--ice-veil); color: var(--ivory);
  box-shadow: inset 0 0 0 1px var(--ice);
}

/* ==========================================================================
   AUS DEN ENTWUERFEN UEBERNOMMEN
   DriveLab GmbH, 12.09.2026.

   Woertlich aus den <style>-Bloecken der Entwuerfe des Vergleichsportals.
   Nichts nachgebaut, nichts umgeschrieben: die Entwuerfe SIND die Vorlage.
   Aufgenommen ist genau das, wofuer eine Vorlage in views-neu/ auch eine
   Klasse traegt; was schon in identity, bausteine, raster oder thema steht,
   wird nicht wiederholt.

   Diese Datei wird gebaut, nicht von Hand gepflegt: tools/ch-css-bauen.py.
   ========================================================================== */

:root {
  --head-h: 77px;
  --stack: calc(var(--head-h) + var(--tabs-h));
  --stack-gap: calc(var(--head-h) + var(--tabs-h) + var(--s4));
  --tabs-h: 53px;
  --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);
}

@media (max-width: 1240px) {
.cmp-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.pricehead { grid-template-columns: 1fr; gap: var(--s10); }
}
@media (max-width: 1060px) {
.cmp-main { grid-template-columns: 1fr; }
.rail { position: static; }
.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) {
.cmp-grid { grid-template-columns: 1fr; }
.kpis, .steps { grid-template-columns: 1fr 1fr; }
.top .btn-login { padding: 0 var(--s3); min-height: 44px; }
.top .btn-login .lbl { display: none; }
.top .btn-login .ico { display: block; }
.searchbar { flex-wrap: wrap; }
.searchbar .btn { flex: 1; min-height: 44px; }
.seg button { min-height: 44px; }
.flabel { min-width: 100%; }
.fcount { margin-left: 0; }
.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); }
.top { position: static; }
/* Klickflaechen: mindestens 44px auf dem Geraet, mit dem die meisten kommen. */ .pill { padding: 14px var(--s4); font-size: var(--t-body-s); }
.fselect { padding: 14px var(--s8) 14px var(--s4); }
.freset { padding: 14px 0; }
.school .btn-outline { padding: 14px var(--s4); font-size: var(--t-body-s); }
.rank li { padding: 0 var(--s4); }
.rank .who a { padding: 16px 0 7px; }
.rank .who span { padding-bottom: 13px; }
.rank .val { padding: var(--s3) 0; }
.near a { padding: 13px var(--s3); }
.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; }
}
@media (max-width: 560px) {
.steps { grid-template-columns: 1fr; }
}
.preisfeld .spanne {
    position: absolute; left: 0; right: 0; top: 50%; height: 10px; margin-top: -5px;
    border-radius: var(--r-pill); transform-origin: left;
    background: color-mix(in srgb, var(--ice) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ice) 26%, transparent);
  }
.preisfeld .ende {
    position: absolute; top: 50%; width: 1px; height: 26px; margin-top: -13px;
    background: color-mix(in srgb, var(--ivory) 22%, transparent);
  }
.dist-scale .ist-schnitt { color: var(--ivory); }
.legende { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s2); }
.legende li { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-caption); color: var(--ash-dim); line-height: 1.45; }
.legende b { color: var(--ash); font-weight: var(--w-mid); }
.lg { flex: none; width: var(--s6); display: grid; place-items: center; }
.lg-punkt { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--ivory) 45%, transparent); }
.lg-schnitt { width: 13px; height: 13px; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cobalt) 22%, transparent); }
.lg-band { width: var(--s6); height: 10px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ice) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ice) 26%, transparent); }
.fnote { font-size: var(--t-caption); color: var(--ash-dim); margin: 0; padding: var(--s3) var(--s4) var(--s4); line-height: 1.55; max-width: 92ch; border-top: 1px solid var(--night-line); }
.cover .badge { position: absolute; left: var(--s2); bottom: var(--s2); }
/* --- Der ehrliche leere Fall ------------------------------------------
     Ein Ort ohne Eintrag bekommt keine leere Liste und keine Fehlermeldung,
     sondern einen Weg nach draussen. Kein Ausrufezeichen, keine Warnfarbe:
     „noch keine“ ist ein Zustand, kein Fehler. --- */ .leerfall { margin-top: var(--s10); border-radius: var(--r-data); background: var(--night-2);
              box-shadow: var(--ring); padding: var(--s8); }
.leerfall .marke { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-micro);
                     text-transform: uppercase; letter-spacing: .1em; color: var(--ash-dim); margin-bottom: var(--s4); }
.leerfall h3 { font-size: var(--t-h3); font-weight: var(--w-mid); color: var(--ivory); margin: 0 0 var(--s3); letter-spacing: -.012em; }
.leerfall p { font-size: var(--t-body-s); color: var(--ash); margin: 0 0 var(--s5); max-width: 62ch; line-height: 1.65; }
.wege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--night-line);
          border-radius: var(--r-data); overflow: hidden; }
.weg { background: var(--night-1); padding: var(--s4); display: flex; gap: var(--s3); align-items: flex-start; }
.weg .gl { color: var(--ash-dim); margin-top: 1px; }
.weg h4 { font-size: var(--t-body-s); font-weight: var(--w-mid); color: var(--ivory); margin: 0 0 3px; }
.weg p { font-size: var(--t-caption); color: var(--ash-dim); margin: 0 0 var(--s2); line-height: 1.5; }
.weg a { font-size: var(--t-caption); font-weight: var(--w-mid); }
.panel .werte { list-style: none; margin: 0; padding: var(--s1) 0; }
.panel .werte li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 9px var(--s4); font-size: var(--t-body-s); color: var(--ash); }
.panel .werte li + li { border-top: 1px solid var(--night-line); }
.panel .werte b { color: var(--ivory); font-weight: var(--w-mid); }
@media (max-width: 860px) {
.cmp-grid { grid-template-columns: 1fr 1fr; }
.wege { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.searchbar .btn { flex: 1; }
.leerfall, .pricehead { padding: var(--s5); }
}
@media (max-width: 560px) {
/* Auf 390px bleibt die Spanne zweizeilig lesbar, statt zu schrumpfen. */ .range { display: block; }
.range .bis { display: block; margin: var(--s2) 0; }
}
@media (pointer: coarse) {
.btn, .btn-sm, .btn-outline, .pill, .seg button { min-height: 44px; }
.weg a { display: inline-block; padding: 12px 0; }
}
.nav-panel.is-open { display: block; }
.nav-panel .btn { width: 100%; margin-top: var(--s4); }
/* ---- Brotkrumen --------------------------------------------------------- */ .crumbs-cms { padding: var(--s2) 0 var(--s1); }
.crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  font-size: var(--t-caption); color: var(--ash-dim);
}
.crumbs li { display: flex; align-items: center; gap: var(--s2); }
.crumbs li + li::before { content: "›"; color: var(--ash-dim); }
.crumbs-cms a { color: var(--ash); display: inline-flex; align-items: center; min-height: 44px; }
.crumbs [aria-current="page"] { color: var(--ivory); }
/* ---- Profilkopf: OpenSeas "Featured Collection Card" --------------------- *//* Die tragende Flaeche der Seite steht eine Stufe hoeher als eine gewoehnliche
   Karte: night-3 statt night-2. So liest die Hierarchie ueber den Ton. */ .hero-card { padding: var(--s3); position: relative; background: var(--night-3); }
/* Kein aspect-ratio mit min-height: der Browser rechnet die Mindesthoehe sonst
   in eine Mindestbreite um (180 x 4 = 720px) und die Seite scrollt waagrecht. */
/* Kein Deckbild im Kopf. Die Schulfotos sind 302x226 gross;jede Groesse, in der sie als Kopfbild etwas hergeben, vergroessert sie um das Zwei- bis Sechsfache. Das Foto steht darum nur noch im runden Traeger neben dem Namen, wo es seine eigene Groesse behaelt — und weiter unten in der Seite. Drei Anlaeufe (gedehnt, unscharf, gross und weich) haben denselben Schluss ergeben: das Bild taugt nicht als Kopfbild. */ .avatar img.fs-bild-rund, .profil-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
/* Die Plaketten stehen ueber dem Bild, nicht darauf — auf dem Foto haben sie
   verdeckt, was zu sehen sein soll. */ .cover-tags {
  display: flex; gap: var(--s2); flex-wrap: wrap;
  margin: 0 0 var(--s4);
}
/* Bewusste Abweichung von der Referenz: sie setzt das Signet oben links auf das
   Titelbild. Hier ueberlappt es unten links, weil Signet, H1 und Kennzahlen EIN
   Block sind — trennt man sie, steht der Name allein unter einem leeren Band.
   Absicht, nicht Versehen. */ .hero-body {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s6); flex-wrap: wrap;
  padding: 0 var(--s3) var(--s2);
  margin-top: 0; position: relative; z-index: 3;
}
.id-block { display: flex; align-items: flex-end; gap: var(--s4); min-width: 0; }
.avatar-lg, .avatar-xs {
  flex: none; display: grid; place-items: center;
  border-radius: var(--r-pill);
  font-family: var(--sans); font-weight: var(--w-semi);
  letter-spacing: -.02em; color: var(--ice);
  background: #2c3a4a;                                   /* Rueckfall ohne color-mix */
  background: color-mix(in srgb, var(--ice) 16%, var(--night-3));
  box-shadow: 0 0 0 1px var(--night-line-2);
}
.avatar-lg { width: 72px; height: 72px; font-size: var(--t-sub); border: var(--s1) solid var(--night-3); }
.avatar-xs { width: var(--s8); height: var(--s8); font-size: var(--t-caption); }
.id-text { min-width: 0; padding-bottom: 2px; }
.id-title { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.meta-line {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  margin-top: var(--s2);
  font-size: var(--t-body-s); color: var(--ash);
}
.meta-line .sep { color: var(--ash-dim); }
.meta-line b { font-weight: var(--w-mid); color: var(--ivory); }
/* Kennzahlenleiste */ .stat-strip {
  display: grid; grid-template-columns: repeat(4, minmax(88px, auto));
  gap: 1px; background: var(--night-line);
  border-radius: var(--r-data); overflow: hidden;
  box-shadow: var(--ring);
}
.stat { background: var(--night-2); padding: var(--s3) var(--s4); }
.stat dt {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .1em;
  color: var(--ash-dim); margin: 0 0 var(--s1); font-weight: var(--w-semi);
}
.stat dd { margin: 0; font-size: var(--t-body-l); font-weight: var(--w-mid); color: var(--ivory); }
.stat dd small { font-size: var(--t-caption); color: var(--ash-dim); margin-left: var(--s1); }
/* ---- Reiter ------------------------------------------------------------- */ .tabs {
  position: sticky; top: var(--head-h); z-index: 30;
  background: rgba(23,23,33,.9);                        /* Rueckfall ohne color-mix */
  background: color-mix(in srgb, var(--night-1) 90%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--night-line);
  margin-top: var(--s6);
}
.tabs-inner { display: flex; gap: var(--s5); overflow-x: auto; scrollbar-width: none; }
.tabs-inner::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; min-height: 52px;
  padding: 0 2px; white-space: nowrap;
  font-size: var(--t-body-s); font-weight: var(--w-mid);
  color: var(--ash); border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--ivory); }
.tab.is-on { color: var(--ivory); border-bottom-color: var(--ice); }
/* ---- Raster: Inhalt + klebende Spalte ----------------------------------- */ .split {
  display: grid; grid-template-columns: minmax(0,1fr) 372px;
  gap: var(--s10); align-items: start;
  padding: var(--s10) 0 var(--s24);
}
.block { margin-bottom: var(--s14); scroll-margin-top: var(--stack-gap); }
/* Abschnittskopf nach Referenz: eine Zeile, 32px, rechts ein eisblauer Link. */ .block-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s6);
}
.block-head a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--t-body-s); font-weight: var(--w-mid); color: var(--ice);
}
/* ---- Merkmalsraster ----------------------------------------------------- */ .feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
@media (min-width: 1200px) {
.feat-grid { grid-template-columns: repeat(3, 1fr); }
}
.feat { padding: var(--s3); display: flex; gap: var(--s3); align-items: flex-start; }
/* Referenz-Bildsprache: 24px, 1.5px Kontur, einfarbig — keine Kachel darunter. */ .feat-ico { flex: none; width: var(--s6); height: var(--s6); display: grid; place-items: center; color: var(--ice); }
.feat-ico svg { width: var(--s6); height: var(--s6); stroke-width: 1.5; }
.feat-gold .feat-ico { color: var(--gold); }
.feat h3 {
  margin: 0 0 var(--s1); font-size: var(--t-body-s); font-weight: var(--w-mid);
  color: var(--ivory); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
}
.feat p { margin: 0; font-size: var(--t-body-s); line-height: 1.5; color: var(--ash); }
.feat details { margin-top: var(--s2); }
.feat summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--t-small); font-weight: var(--w-mid); color: var(--ice);
}
.feat summary::-webkit-details-marker { display: none; }
.feat summary::after { content: " ↓"; }
.feat details[open] summary::after { content: " ↑"; }
.feat details p { margin-top: var(--s2); }
/* ---- Preistabelle ------------------------------------------------------- */ .table-wrap { overflow-x: auto; border-radius: var(--r-data); box-shadow: var(--ring); background: var(--night-2); }
table.prices { width: 100%; border-collapse: collapse; min-width: 520px; }
table.prices caption { text-align: left; padding: var(--s4) var(--s5) 0; font-size: var(--t-body-s); color: var(--ash); }
table.prices th, table.prices td { text-align: left; padding: var(--s3) var(--s5); font-size: var(--t-body-s); }
/* Der Tabellenkopf traegt die Spalten — eine Stufe hoeher als die Tabelle. */ table.prices thead th {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .1em;
  color: var(--ash-dim); font-weight: var(--w-semi);
  background: var(--night-3);
  border-bottom: 1px solid var(--night-line);
}
table.prices tbody tr + tr td { border-top: 1px solid var(--night-line); }
table.prices tbody th { font-weight: var(--w-mid); color: var(--ivory); }
table.prices .cell-num { text-align: right; color: var(--ivory); font-size: var(--t-body); white-space: nowrap; }
table.prices tbody tr:hover td, table.prices tbody tr:hover th { background: var(--night-3); }
.row-group th {
  font-size: var(--t-micro) !important; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ash-dim) !important; font-weight: var(--w-semi) !important;
  background: rgba(255,255,255,.03); padding-top: var(--s2) !important; padding-bottom: var(--s2) !important;
}
.table-foot { padding: var(--s3) var(--s5) var(--s4); font-size: var(--t-caption); color: var(--ash-dim); }
/* ---- Bewertungen -------------------------------------------------------- */ .score-panel { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: var(--s8); align-items: center; padding: var(--s6); background: var(--night-3); }
.score-big { text-align: center; }
.score-big .val { font-size: var(--t-display); line-height: 1; font-weight: var(--w-mid); color: var(--ivory); }
.score-big .out { font-size: var(--t-body); color: var(--ash-dim); }
.score-big .stars { display: block; font-size: var(--t-sub); margin: var(--s2) 0 var(--s1); }
/* Keine Sterneverteilung: das Google-Profil liefert nur Schnitt und Anzahl.
   Balken haetten eine Verteilung behauptet, die niemand kennt. */ .score-note { display: grid; gap: var(--s4); justify-items: start; }
.score-note p { margin: 0; font-size: var(--t-body-s); line-height: 1.55; color: var(--ash); }
.reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); margin-top: var(--s5); }
.review { padding: var(--s3); }
.review-top { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.review-top .who { font-size: var(--t-body-s); font-weight: var(--w-mid); color: var(--ivory); }
.review-top .when { font-size: var(--t-caption); color: var(--ash-dim); }
.review p { margin: 0; font-size: var(--t-body-s); line-height: 1.6; color: var(--ash); }
.review .stars { display: block; margin-bottom: var(--s2); }
/* ---- Treffpunkt --------------------------------------------------------- */ .meet { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 0; overflow: hidden; padding: 0; }
.meet-text { padding: var(--s6); }
.meet-text dl { margin: var(--s4) 0 0; display: grid; gap: var(--s3); }
.meet-text dt { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--ash-dim); font-weight: var(--w-semi); }
.meet-text dd { margin: 2px 0 0; font-size: var(--t-body-s); color: var(--ivory); }
.map {
  position: relative; min-height: 190px;
  background:
    linear-gradient(0deg, var(--night-line) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, var(--night-line) 1px, transparent 1px) 0 0 / 34px 100%,
    linear-gradient(140deg, var(--ink-soft) 0%, var(--night-3) 100%);
  border-left: 1px solid var(--night-line);
}
.map-road { position: absolute; inset: 0; }
.map-pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  display: grid; place-items: center; gap: 6px; text-align: center;
}
.map-dot {
  width: 14px; height: 14px; border-radius: var(--r-pill);
  background: var(--ice);
  box-shadow: 0 0 0 6px rgba(142,197,255,.22);           /* Rueckfall ohne color-mix */
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ice) 22%, transparent);
}
.map-label {
  font-size: var(--t-caption); font-weight: var(--w-mid); color: var(--ivory);
  background: rgba(16,16,24,.72);                        /* Rueckfall ohne color-mix */
  background: color-mix(in srgb, var(--night-0) 72%, transparent);
  padding: var(--s1) var(--s2); border-radius: var(--s1);
  box-shadow: var(--ring);
}
.near-row > span { min-width: 0; }
.near-place { display: block; }
.near-row {
  color: var(--ivory);
  display: grid; grid-template-columns: var(--s8) minmax(0,1fr) auto;
  align-items: center; gap: var(--s3);
  min-height: 48px; padding: var(--s1) var(--s2);
  border-radius: var(--s1); text-decoration: none;
  transition: background-color .16s ease;
}
/* Bild und Initialenkreis sind in der Zeile exakt gleich gross: das Foto ist
   ein Signet, keine Auszeichnung (GRUNDSATZ-KEIN-RANKING.md). */ .near-row .fs-bild-rund { width: var(--s8); height: var(--s8); }
.near-row + .near-row { box-shadow: inset 0 1px 0 var(--night-line); }
.near-row:hover { background: var(--night-3); }
.near-name {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-body-s); font-weight: var(--w-mid); color: var(--ivory); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.near-place { font-size: var(--t-micro); line-height: 1.4; color: var(--ash-dim); }
.near-row:hover .near-name { color: var(--ice); }
.near-num { text-align: right; white-space: nowrap; }
.near-num .price { display: block; font-size: var(--t-body-s); line-height: 1.3; color: var(--ivory); }
/* Kein Gruen und kein Rot gegen einen Schnitt: GRUNDSATZ-KEIN-RANKING schlaegt
   die Gestaltungsidee. An der Stelle der Abweichung steht die Lektionsdauer —
   Preis und Dauer gehoeren ueberall zusammen, sonst ist der Preis keine Auskunft. */ .near-unit { font-size: var(--t-micro); line-height: 1.4; color: var(--ash-dim); }
/* ---- Anfragekasten: der einzige gefuellte Kobalt ------------------------- */ .side { position: sticky; top: var(--stack-gap); scroll-margin-top: var(--stack-gap); }
/* Der Anfragekasten ist die einzige Stelle der Seite, an der etwas
   passiert — er darf die Handlungsfarbe tragen, nicht nur der Knopf darin.
   Kobalt als FLAECHE waere zu laut (und Schrift darauf muesste weiss sein);ein Hauch davon reicht: auf Papier rund 7% Kobalt auf Weiss, auf Nacht 14% in die Graphitstufe gemischt. Dima am 09.09.2026: "bläulich". Die Kante nimmt denselben Ton eine Stufe kraeftiger, damit der Kasten eine Kante behaelt und nicht auslaeuft. */ .ask {
  background: color-mix(in srgb, var(--cobalt) 14%, var(--night-3));
  border-radius: var(--r-night);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 22%, transparent);
  overflow: hidden;
}
html.thema-hell .ask {
  background: color-mix(in srgb, var(--cobalt) 7%, #ffffff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 18%, transparent);
}
/* Die Trennkante im Kasten nimmt denselben Ton, sonst steht eine warme
   Creme-Linie in einem blauen Kasten. */ .ask-top { border-bottom-color: color-mix(in srgb, var(--cobalt) 18%, transparent) !important; }
.ask-top { padding: var(--s6) var(--s6) var(--s5); border-bottom: 1px solid var(--night-line); }
/* Die Verkaufszeilen tragen Bedeutung — also Elfenbein, nicht Nebelgrau. */ .ask-sub { margin: var(--s2) 0 0; font-size: var(--t-body-s); color: var(--ivory); }
.f-row { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; }
.field-sm { padding: var(--s3) var(--s4); font-size: var(--t-body-s); }
textarea.field { resize: vertical; min-height: var(--s18); font-size: var(--t-body-s); }
.pillset .pill { font-size: var(--t-small); min-height: 44px; padding: 0 var(--s3); }
.pill[disabled] { opacity: .42; cursor: not-allowed; }
.hint { font-size: var(--t-caption); color: var(--ash); margin: var(--s2) 0 0; }
.ask .btn-primary { width: 100%; }
.reassure { display: flex; align-items: flex-start; gap: var(--s2); font-size: var(--t-small); color: var(--ash); line-height: 1.45; }
.reassure svg { flex: none; margin-top: 2px; color: var(--pos); }
.ask-note {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s4) var(--s6) var(--s6);
  font-size: var(--t-small); color: var(--ash);
}
.ok.is-on { display: flex; }
/* ---- Feste Leiste unten (schmale Bildschirme) --------------------------- */ .dock {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(23,23,33,.94);                        /* Rueckfall ohne color-mix */
  background: color-mix(in srgb, var(--night-1) 94%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--night-line-2);
  padding: var(--s3) var(--s5);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  align-items: center; justify-content: space-between; gap: var(--s4);
}
/* Zwei gefuellte Kobalt-Knoepfe gleichzeitig gibt es nicht: sobald das Formular
   sichtbar ist, verschwindet die Leiste. Das Skript setzt .is-off. */ .dock.is-off { display: none; }
.dock .dp { font-size: var(--t-body-l); font-weight: var(--w-mid); color: var(--ivory); line-height: 1.1; }
.dock .du { font-size: var(--t-micro); color: var(--ash-dim); white-space: nowrap; }
.dock .btn { min-height: 44px; }
/* ---- Fusszeile ----------------------------------------------------------
   Dieselbe Fusszeile wie die Startseite: Flaeche, Farbe und Linkfarbe kommen
   aus identity.css (Leinwand, nicht die dunklere Huelle), Raster 1.4fr + vier
   Spalten. Hier nur die Beruehrflaeche: 44px hoch, ohne zusaetzliches Polster. *//* 44 px Tippflaeche braucht ein Finger, keine Maus. Am Rechner machte die
   Mindesthoehe die Fusszeile luftig und ungleichmaessig — fuenf Ortslinks
   standen fast 50 px auseinander, waehrend die Nachbarspalte dicht stand.
   Jetzt: ruhige Zeilen am Rechner, volle Tippflaeche auf Tippgeraeten. */ .foot a { display: inline-flex; align-items: center; padding: var(--s1) 0; }
@media (pointer: coarse) {
.foot a { min-height: 44px; padding: var(--s2) 0; }
}
.foot-bottom nav { display: flex; gap: var(--s5); flex-wrap: wrap; }
@media (max-width: 1080px) {
/* minmax(0,1fr), nicht 1fr: '1fr' hat als Minimum die Mindestbreite des
     Inhalts — die Preistabelle (min-width 520px) sprengte damit die Seite. */ .split { grid-template-columns: minmax(0, 1fr); gap: var(--s10); padding-bottom: var(--s14); }
.side { position: static; }
/* Dieselbe Schwelle wie auf der Startseite: vier Links plus zwei Knoepfe
     passen ab hier nicht mehr einzeilig, also uebernimmt das Menue-Panel. */ .nav-links, .nav-right .btn { display: none; }
.foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.meet { grid-template-columns: 1fr; }
.map { border-left: 0; border-top: 1px solid var(--night-line); }
}
@media (max-width: 980px) {
.dock { display: flex; }
.stat-strip { grid-template-columns: repeat(4, 1fr); width: 100%; }
}
@media (max-width: 720px) {
.feat-grid, .reviews { grid-template-columns: 1fr; }
.score-panel { grid-template-columns: 1fr; gap: var(--s5); }
.hero-body { margin-top: 0; gap: var(--s5); }
.id-block { flex-direction: column; align-items: flex-start; gap: var(--s3); }
.id-title { align-items: flex-start; }
.avatar-lg { width: 60px; height: 60px; font-size: var(--t-body-l); }
.stat-strip { grid-template-columns: repeat(2, 1fr); }
.foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.f-row { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
.foot-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
   Anschluesse an die gemeinsamen Bausteine (bausteine.css). Hier steht NUR,
   wo ein Baustein auf dieser Seite sitzt — nie, wie er aussieht. Keine Farbe,
   keine Groesse ohne var(): genau daran liefen die sechs Seiten auseinander.
   ========================================================================== *//* Ring und Kennzahlen stehen als ein Block rechts im Profilkopf. */ .hero-zahlen { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.hero-zahlen .stat-strip { flex: 1 1 220px; }
/* Nur EIN Ring auf dieser Seite, und nur, weil hier genau eine Fahrschule
   steht. Auf einer Liste bekaeme ihn jede Karte — sonst wird er zur
   Auszeichnung (bausteine.css). */ .hero-zahlen .ring { color: var(--ivory); }
.hero-zahlen .ring-wert { color: var(--ivory); }
.ring-note { font-size: var(--t-micro); color: var(--ash-dim); text-align: center; margin: var(--s1) 0 0; }
/* Merkmalzeile: Glyphe plus Wort, direkt unter dem Namen. */ .merkmalzeile { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s3); }
/* Der Schnipsel schwebt ueber dem Titelband — aber nur, solange das Band hoch
   genug ist. Darunter setzt ihn bausteine.css ohnehin in den Fluss. *//* Nicht mehr auf dem Titelband: dort steht jetzt das Foto. Der Schnipsel
   sitzt rechts neben den Kennzahlen, wo die Karte ohnehin leer war. */ .hero-schnipsel { top: auto; bottom: var(--s5); right: var(--s5); max-width: 250px; }
.hero-schnipsel q { quotes: "„" "“"; font-style: normal; }
.hero-schnipsel .wer { display: block; margin-top: var(--s2); font-size: var(--t-micro); color: var(--stone); }
@media (max-width: 1080px) {
.hero-schnipsel { position: static; max-width: none; margin-top: var(--s4); box-shadow: none; }
}
/* Kapitelnummern: gedaempft, sie ordnen, sie schreien nicht. */ .block .kapitel { color: var(--ash-dim); }
/* Sterneverteilung — die Balken kommen aus dem gemeinsamen Vokabular
   (.laeuft), die Bahn ist die einzige Zutat dieser Seite. */ .verteilung { display: grid; gap: var(--s2); margin-top: var(--s5); }
.vt { display: grid; grid-template-columns: var(--s18) minmax(0,1fr) var(--s18);
      align-items: center; gap: var(--s3); font-size: var(--t-body-s); color: var(--ash); }
.vt-bahn { height: var(--s2); border-radius: var(--r-pill); overflow: hidden;
           background: var(--night-line); }
.vt-bahn i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--gold); }
.vt-zahl { text-align: right; font-family: var(--mono); font-size: var(--t-caption); color: var(--ivory); }
/* Preisfeld des ORTES. Es beschreibt Basel, nie eine einzelne Fahrschule —
   darum tragen die Punkte keine Namen und sind alle gleich gross. */ .ortsfeld { padding: var(--s5); margin-bottom: var(--s4); }
.ortsfeld .preisfeld { margin: var(--s5) var(--s2) var(--s2); color: var(--ivory); }
.ortsfeld-enden { display: flex; justify-content: space-between; font-family: var(--mono);
                  font-size: var(--t-caption); color: var(--ash-dim); }
/* Preis mit Dauer in der Tabellenzelle: die beiden bleiben ein Wert. */ table.prices .cell-preis { text-align: right; }
table.prices .cell-preis .preis { min-width: 190px; margin-left: auto; }
table.prices .cell-preis .preis b { font-size: var(--t-h3); color: var(--ivory); }
/* Derselbe Baustein im Anfragekasten — kein zweiter Preis-Stil. */ .ask .preis { margin-top: var(--s3); }
.ask .preis b { color: var(--ivory); }
.ask .preis .dauer { color: var(--ash); }
/* ==========================================================================
   Keine eigene Radiusfamilie mehr. Die Seite hatte Knoepfe, Pillen, Plaketten
   und Felder auf 4px eckig gestellt — das war die frueher eigene Datenflaeche
   und der sichtbarste Bruch zur Startseite. Radien kommen jetzt aus
   identity.css: Karte 10px, Feld 12px, Knopf und Pille rund.
   ========================================================================== *//* Beruehrbare Flaechen: 44px hoch, aber mit align-items zentriert statt
   aufgepolstert — die Optik bleibt dicht. */ .btn, .btn-outline, .btn-sm, .pill, .nav-link, .logo { min-height: 44px; }
.btn-sm { padding: 0 var(--s5); }
.btn-outline { padding: 0 var(--s5); }
.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; }
/* ---------- Der Einstieg ----------
   Der ganze Zweck dieser Seite ist das Postleitzahl-Feld. Es steht oben,
   ueber der Falz, und traegt den einzigen gefuellten Knopf des Bildschirms. */ .einstieg { padding: var(--s18) 0 var(--s12); }
.einstieg .lede { margin-bottom: var(--s10); }
.suchkasten {
  background: var(--night-2); border-radius: var(--r-night);
  box-shadow: var(--ring); padding: var(--s8);
  max-width: 900px;
}
.suchzeile { display: flex; align-items: stretch; gap: var(--s3); flex-wrap: wrap; }
.suchfeld { position: relative; flex: 1 1 320px; min-width: 0; }
.suchfeld .field { padding-left: 46px; border-radius: var(--r-pill); font-variant-numeric: tabular-nums; }
.such-ico { position: absolute; left: var(--s4); top: 50%; transform: translateY(-50%); color: var(--ash-dim); pointer-events: none; }
.suchzeile .btn { flex: 0 0 auto; }
.reichweite { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }
.reichweite .label { margin: 0; }
.hinweis { margin: var(--s5) 0 0; font-size: var(--t-body-s); color: var(--ash); }
.sec-head .muted { color: var(--ash-dim); }
.ortkarten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); }
.ort { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); }
.ort-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.ort-name { font-size: var(--t-body-l); font-weight: var(--w-mid); color: var(--ivory); margin: 0; }
/* Eine Zeile, immer. Vorher brach "66.50 CHF bis 100 CHF" bei den langen
   Werten um und die fuenf Karten standen unterschiedlich hoch. Die Zahl passt
   sich der Kartenbreite an, statt umzubrechen. */ .ort-spanne { display: flex; align-items: baseline; gap: var(--s2);
              flex-wrap: nowrap; white-space: nowrap; }
.ort-spanne b { font-family: var(--mono); font-size: clamp(19px, 2.1vw, var(--t-h3)); font-weight: var(--w-mid);
                letter-spacing: -.03em; color: var(--ivory); font-variant-numeric: tabular-nums; }
.ort-spanne small { font-size: var(--t-caption); color: var(--ash-dim); }
.ort-spanne .bis { font-size: var(--t-micro); color: var(--ash-dim); text-transform: uppercase; letter-spacing: .14em; }
.ort-note { margin: 0; font-size: var(--t-body-s); color: var(--ash); line-height: 1.5; }
.ort-note strong { font-weight: var(--w-mid); color: var(--ivory); font-family: var(--mono); }
.ort .preisfeld { color: var(--ivory); margin: var(--s1) 0 0; }
.ort-skala { display: flex; justify-content: space-between; font-family: var(--mono);
             font-size: var(--t-micro); color: var(--ash-dim); margin-top: calc(var(--s2) * -1); }
.ort .btn { margin-top: auto; }
.ortkarten-mehr { display: flex; justify-content: center; gap: var(--s3);
                  flex-wrap: wrap; margin-top: var(--s5); }
.spannen-fuss { margin: var(--s5) 0 0; font-size: var(--t-body-s); color: var(--ash-dim); }
/* ---------- Textabschnitte ---------- *//* Der Text steht mittig zur Kachelspalte: die Tipps sind dreimal so hoch wie
   die zwei Absaetze, oben ausgerichtet klebte der Text an der Decke. */ .zweispalt { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s12); align-items: center; }
.fliess p { color: var(--ash); line-height: 1.65; margin: 0 0 var(--s4); max-width: 62ch; }
.fliess p:last-child { margin-bottom: 0; }
/* auto-fit statt fester Dreierteilung: die Kacheln stehen in einer HALBEN
   Spalte, drei nebeneinander liessen rund 150px pro Kachel — der Text brach
   auf ein Wort pro Zeile um. Jetzt so viele, wie bei 210px Platz haben. */ .tipps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s4); }
.tipp { display: flex; gap: var(--s3); padding: var(--s5); }
.tipp .gl { color: var(--ice); }
.tipp h3 { font-size: var(--t-body-s); font-weight: var(--w-mid); color: var(--ivory); margin: 0 0 var(--s1); }
.tipp p { font-size: var(--t-caption); color: var(--ash-dim); margin: 0; line-height: 1.55; }
.angebot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.angebot .card-night { display: flex; flex-direction: column; gap: var(--s4); }
.angebot h3 { font-size: var(--t-sub); font-weight: var(--w-mid); color: var(--ivory); margin: 0; }
.angebot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.angebot li { display: flex; align-items: flex-start; gap: var(--s2); font-size: var(--t-body-s); color: var(--ash); }
.angebot li .gl { color: var(--ice); margin-top: 2px; }
.angebot .row { margin-top: auto; }
.acc-body p { margin: 0 0 var(--s3); }
.acc-body p:last-child { margin-bottom: 0; }
.acc-body ol { margin: 0 0 var(--s3); padding-left: var(--s5); display: grid; gap: var(--s1); }
/* ---------- Schlussband ---------- */ .cta-band { border-radius: var(--r-night); padding: var(--s14) 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(--s8); }
.foot-brand p { color: var(--ash); font-size: var(--t-body-s); line-height: 1.6; margin: var(--s4) 0 0; max-width: 30ch; }
@media (max-width: 1080px) {
.ortkarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
.zweispalt { grid-template-columns: 1fr; gap: var(--s10); }
.tipps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.einstieg { padding: var(--s12) 0 var(--s10); }
.suchkasten { padding: var(--s5); }
.suchzeile .btn, .seg { flex: 1 1 100%; }
.seg button { flex: 1; justify-content: center; }
.ortkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tipps, .angebot { grid-template-columns: 1fr; }
.cta-band { padding: var(--s12) var(--s5); }
}
@media (max-width: 440px) {
.ortkarten { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) {
.seg button, .toport, .acc-btn, .nav-lang a, .foot-list a, .foot-bottom a, .ort-kopf .badge { min-height: 44px; }
.seg button, .toport { align-items: center; }
.foot-list a, .foot-bottom a { display: inline-flex; align-items: center; }
}
/* ---------- Tipps: Kopf mit halber Kursiven, dann eine versetzte Wand -----
   Zwei Sachen aus dem Vorbild, die hier bis 07.09.2026 fehlten:
   (a) Officevibes Ueberschrift ist zur HAELFTE kursive Serife — eine ganze
       Zeile, nicht ein einzelnes Wort (VERGLEICH.md, Zeile 21).
   (b) Die Karten stehen nicht im Gleichschritt. Gegeneinander versetzt liest
       die Flaeche als Wand, nicht als Tabelle.
   Dazu die Regel aus mercury/officevibe: zeigen statt beschreiben. Jede Karte
   traegt unten ein echtes Stueck Oberflaeche — die Pillen, die es wirklich
   gibt, mit dem Wert, der wirklich gesetzt ist. */ .tipp-kopf { max-width: 60ch; margin-bottom: var(--s12); }
.tipp-kopf h2 { margin: var(--s3) 0 var(--s5); }
.tipp-kopf .kursiv { display: block; font-family: var(--serif); font-style: italic;
                     font-weight: 400; color: var(--gold); letter-spacing: -.02em; }
.tipp-kopf .lede { max-width: 56ch; }
.tippwand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5);
            align-items: start; }
.tippwand > :nth-child(3n+2) { margin-top: var(--s8); }
.tippwand > :nth-child(3n) { margin-top: var(--s14); }
.tippkarte {
  display: flex; flex-direction: column; gap: var(--s3);
  background: var(--night-2); border-radius: var(--r-night); padding: var(--s5);
  box-shadow: var(--ring);
  transition: transform var(--mo-kurz) var(--mo-kurve), box-shadow var(--mo-kurz) var(--mo-kurve);
}
.tippkarte:hover { transform: translateY(-4px);
                   box-shadow: var(--ring-2), 0 18px 44px rgba(0,0,0,.45); }
.tipp-ring { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
             box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold); }
.tipp-ring .gl { width: 18px; height: 18px; }
.tippkarte h3 { margin: 0; font-size: var(--t-body); font-weight: var(--w-mid); color: var(--ivory);
                letter-spacing: -.01em; }
.tippkarte p { margin: 0; font-size: var(--t-caption); color: var(--ash-dim); line-height: 1.55; }
.tippkarte .probe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto;
         padding-top: var(--s4); border-top: 1px solid var(--night-line); }
.pp { font-family: var(--mono); font-size: 11px; color: var(--ash-dim); padding: 4px 9px;
      border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--night-line); white-space: nowrap; }
.pp.wort { font-family: var(--sans); }
.pp.ist-an { background: var(--gold); color: var(--night-1); box-shadow: none;
             font-weight: var(--w-mid); }
.sterne .gl { width: 13px; height: 13px; }
/* ---------- Angebot: zwei Seiten, keine Kaesten ---------------------------
   Bis 07.09.2026 standen hier zwei Karten mit je einem Keil dahinter. Der
   Keil ist Officevibes Kniff, aber er stand auf dieser Seite schon im Helden
   und im Schlussband — dreimal dasselbe ist keine Signatur mehr, sondern eine
   Masche. Und zwei Keile nebeneinander stossen sich gegenseitig weg.
   Stattdessen Mercurys Muster (mercury-04.jpg): oben ein Stueck der
   Oberflaeche auf getoenter Flaeche, unten Ueberschrift und Text — ohne
   Rahmen, ohne Karte, nur eine Haarlinie ueber dem Abschnitt. Was jede Seite
   bekommt, wird gezeigt statt behauptet: links die Vergleichsansicht, rechts
   das eigene Profil beim Speichern. *//* Ein Raster mit zwei Reihen statt zwei Spalten mit eigenem Fluss: nur so
   sind die beiden Buehnen gleich hoch. Mit je einer eigenen Spalte waren es
   208 und 227px — nebeneinander sieht das aus wie ein Fehler. */ .angebot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
           column-gap: var(--s12); row-gap: var(--s6); align-items: stretch; }
.angebot .txt { display: flex; flex-direction: column; gap: var(--s5); }
.angebot h3 { font-size: var(--t-sub); font-weight: var(--w-mid); color: var(--ivory); margin: 0;
              letter-spacing: -.02em; }
.angebot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.angebot li { display: flex; align-items: flex-start; gap: var(--s3); font-size: var(--t-body-s);
              color: var(--ash); line-height: 1.55; }
.angebot li .gl { color: var(--gold); margin-top: 2px; }
/* Zwei farbige Karten, nach referenzen/officevibe-01.jpg.
   Dort stehen die Produktkarten NICHT in Grau nebeneinander: eine ist tief
   blau, eine warm, und darauf liegen weisse Schnipsel — eine Nachricht, eine
   Sprechblase — versetzt und mit Schatten, wie aufgeklebt. Genau das fehlte
   hier: zwei dunkle Kaesten auf dunklem Grund sagen nichts, egal was drin
   steht. Jetzt traegt die Farbe die Aussage, und der Inhalt sitzt auf einem
   weissen Zettel darauf.
   Kontrast: auf dem Zettel steht alles in Tinte auf Papier;die Beschriftung auf der Farbflaeche liegt jeweils auf ihrem hellsten Ende. */ .buehne { position: relative; display: flex; flex-direction: column; min-height: 208px;
          border-radius: var(--r-night); padding: var(--s5);
          box-shadow: 0 22px 50px rgba(0,0,0,.45); overflow: hidden; }
/* Der Schleier: Dima will die Schrift auf dieser Karte weiss (09.09.2026).
   Weiss auf dem hellen Gold waere 1.9:1 und damit unlesbar — also legt
   sich ein dunkler Verlauf ueber den Farbverlauf, dort wo Text steht.
   Gerechnet: #f0b429 mit 45% Tinte darueber ergibt rund 132/99/23, und
   Weiss darauf steht bei 5.6:1. Das Gold bleibt Gold, es wird nur an der
   Textecke tiefer. */ .buehne.b1 {
  background:
    /* oben links, wo die Augenbraue steht */
    linear-gradient(160deg, rgba(20,16,8,.45) 0%, rgba(20,16,8,.14) 45%, rgba(20,16,8,0) 72%),
    /* unten, wo die Summenzeile steht — dort liegt das mittlere Gold, und
       Weiss darauf waere ohne Schleier 3.4:1 */
    linear-gradient(0deg, rgba(20,16,8,.42) 0%, rgba(20,16,8,0) 42%),
    linear-gradient(150deg, #f0b429 0%, #b8791f 38%, #3a2f57 100%);
}
.buehne.b2 { background: linear-gradient(150deg, #4a57c8 0%, #2c3576 45%, #1b1c3a 100%); }
.buehne-kopf { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5);
               font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.buehne-kopf::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .25; }
.b1 .buehne-kopf { color: rgba(255,255,255,.82); }
.b2 .buehne-kopf { color: rgba(255,255,255,.72); }
/* Der weisse Zettel: dieselbe Sprache wie der Schnipsel im Helden. */ .zettel { background: var(--paper-1); color: var(--charcoal); border-radius: var(--r-night);
          padding: var(--s5); box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.zettel + .b-antwort { margin-top: var(--s5); }
/* links: eine echte Bewertung, woertlich von der Livesite */ .b-sterne { display: inline-flex; gap: 4px; color: var(--gold-ink); margin-bottom: var(--s3); }
.b-sterne .gl { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.b-zitat { margin: 0; font-family: var(--serif); font-style: italic; font-size: var(--t-body-l);
           color: var(--ink); line-height: 1.4; letter-spacing: -.01em; }
.b-wer { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s5);
         padding-top: var(--s4); border-top: 1px solid var(--paper-line); }
.b-wer img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.b-wer span { font-size: 11px; color: var(--stone); line-height: 1.45; }
.b-wer b { display: block; color: var(--charcoal); font-weight: var(--w-mid); font-size: var(--t-body-s); }
/* Die Zahl, die den Zettel traegt: alle Bewertungen der Schweiz, gerechnet. */ .b-summe { display: flex; align-items: baseline; gap: var(--s2); margin-top: auto;
           padding-top: var(--s5); color: rgba(255,255,255,.86); font-size: 11px; }
.b-summe b { font-family: var(--mono); font-size: var(--t-body-l); color: #ffffff;
             font-weight: var(--w-mid); letter-spacing: -.02em; }
/* rechts: eine eingehende Anfrage, mit den zwei Antworten aus der Mail */ .b-anfrage-kopf { display: flex; align-items: baseline; justify-content: space-between;
                  gap: var(--s3); margin-bottom: var(--s3); }
.b-anfrage-kopf b { color: var(--charcoal); font-size: var(--t-body-s); font-weight: var(--w-mid); }
.b-anfrage-kopf span { font-family: var(--mono); font-size: 11px; color: var(--stone); }
.b-anfrage-text { margin: 0; font-size: var(--t-body-s); color: var(--ink); line-height: 1.55; }
.b-anfrage-meta { display: flex; gap: 6px; flex-wrap: wrap; margin: var(--s3) 0 0; }
.b-anfrage-meta .pp { color: var(--stone); box-shadow: inset 0 0 0 1px var(--paper-line); }
.b-antwort { display: flex; gap: var(--s3); }
.b-antwort span { flex: 1; text-align: center; padding: 10px 0; border-radius: var(--r-pill);
                  font-size: var(--t-body-s); font-weight: var(--w-mid); }
/* Feste Farben gingen hier nicht mehr: sobald die Seite hell steht, wird
   Gold zum dunklen Goldton und die schwarze Schrift darauf faellt auf
   2.99:1, und das feste Weiss der Nein-Antwort steht auf weissem Grund
   (1:1). Beide lesen jetzt Wertnamen und wandern mit — dunkel: Tinte auf
   Gold (8.8:1) und Elfenbein auf Nacht;hell: Weiss auf dunklem Gold (6.4:1) und Tinte auf Weiss. */ .b-antwort .ja { background: var(--gold); color: var(--night-1); }
.b-antwort .nein { color: var(--ivory); box-shadow: inset 0 0 0 1px var(--night-line-2); }
.acc-item:has(.acc-btn[aria-expanded="true"]) {
  box-shadow: inset 2px 0 0 var(--gold);
  background: linear-gradient(90deg, rgba(240,180,41,.05), transparent 46%);
}
.acc-item:has(.acc-btn[aria-expanded="true"]) .kapitel i {
  background: var(--gold); color: var(--night-1); box-shadow: none;
}
/* ---------- Schlussband ---------- *//* ---------- Abschluss: die Suche noch einmal, statt eines Knopfes dorthin --
   Vorher: ein Kasten mit zwei Keilen dahinter und einem Knopf "Zur Suche",
   der nichts tut ausser nach oben zu scrollen. Der orange Keil lag dabei
   quer ueber dem Wort "Region". Beides weg. Die Seite endet jetzt mit dem
   Werkzeug selbst — dasselbe Feld wie oben, dieselbe Rechnung dahinter.
   Kein Kasten, kein Keil: eine Haarlinie, viel Luft, und der gezogene Pfeil
   zeigt auf das Feld. Der Keil steht damit nur noch EINMAL auf der Seite,
   im Helden — dort ist er Signatur, hier war er Masche. */ .schluss { text-align: center; padding: var(--s18) 0 var(--s10); }
.schluss h2 { margin: 0 auto var(--s5); max-width: 20ch; }
.schluss .lede { margin: 0 auto; max-width: 52ch; }
.schluss-form { max-width: 560px; margin: var(--s10) auto 0; }
.schluss-zeile { position: relative; display: flex; align-items: stretch; gap: var(--s3); }
.schluss-zeile .suchfeld { flex: 1 1 auto; }
.schluss-zeile .btn { flex: none; }
/* Der Pfeil haengt links neben dem Feld, ausserhalb der Zeile — im Fluss
   haette er die Zeile schmaler gemacht. */ .schluss-pfeil { position: absolute; left: -104px; top: 50%; width: 92px; height: 46px;
                 transform: translateY(-60%) rotate(4deg) scaleY(-1); color: var(--gold); }
.schluss-fuss { margin: var(--s8) 0 0; font-size: var(--t-body-s); color: var(--ash-dim); }
.schluss-fuss a { color: var(--ice); }
@media (max-width: 860px) {
.schluss-pfeil { display: none; }
}
@media (max-width: 980px) {
/* Der Versatz braucht drei Spalten;auf zweien wird aus der Wand eine Treppe. Deshalb: weniger Spalten, kein Versatz. */ .tippwand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tippwand > :nth-child(n) { margin-top: 0; }
}
@media (max-width: 720px) {
.tippwand, .angebot { grid-template-columns: 1fr; }
/* Einspaltig muss die Reihenfolge Buehne-Text-Buehne-Text sein, nicht
     Buehne-Buehne-Text-Text, wie das Raster sie sonst legt. */ .angebot .b1 { order: 1; }
.angebot .t1 { order: 2; }
.angebot .b2 { order: 3; }
.angebot .t2 { order: 4; }
}
/* --- Officevibes Signaturen, jetzt wirklich benutzt ------------------------
   Bis 07.09.2026 war diese Seite eine dunkle Kartenwueste — genau der Look,
   den man von jeder Vorlage bekommt. Die Vorbildseite lebt von vier Dingen,
   die alle schon im Baukasten liegen und hier nie zum Einsatz kamen:
   versetzte Farbflaechen hinter der Karte (.keil), aufgeklebte Schnipsel
   (.schnipsel), handgezogene Markierungen (.mark) und ganzflaechige Baender
   mit EINER grossen Aussage. */ .such-buehne { position: relative; max-width: 760px; margin: var(--s14) auto 0;
               padding: var(--s6); }
.such-buehne .suchkasten { position: relative; z-index: 1; background: var(--night-2);
                           border-radius: var(--r-night); padding: var(--s6);
                           box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.such-buehne::before { inset: -26px -30px auto auto; width: 46%; height: 58%;
                       border-radius: var(--r-night); }
.such-buehne::after { inset: auto auto -24px -22px; width: 38%; height: 46%;
                       border-radius: var(--r-night); }
/* Der aufgeklebte Schnipsel: ein echter Satz aus einer Bewertung, versetzt
   auf die Karte gelegt. Auf schmalen Schirmen ruecken solche Zettel in den
   Fluss, sonst decken sie das Suchfeld zu. */ .such-schnipsel { right: -22px; bottom: -30px; text-align: left; }
.such-schnipsel b { display: block; font-size: var(--t-micro); letter-spacing: .1em;
                    text-transform: uppercase; color: var(--stone); margin-bottom: 4px; }
.such-schnipsel q { quotes: "\201E" "\201C"; font-style: normal; color: var(--charcoal); }
.such-schnipsel .wer { display: block; margin-top: var(--s2); font-size: var(--t-micro);
                       color: var(--stone); }
@media (max-width: 900px) {
.such-schnipsel { position: static; margin: var(--s5) auto 0; box-shadow: none; }
.such-buehne { padding: var(--s3); }
}
/* Ganzflaechiges Band mit EINER Aussage — der Rhythmuswechsel, der die Seite
   aus der Kartenwueste holt. */ .band-aussage { background: var(--ink); padding: var(--s24) 0; text-align: center; }
.band-aussage .wrap { max-width: 900px; }
.band-aussage p { margin: 0; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.25;
                  color: #fff; letter-spacing: -.03em; font-weight: var(--w-mid); }
.band-aussage .pen-target .mark { --pen: var(--gold); }
.band-aussage .klein { margin-top: var(--s6); font-size: var(--t-body-s);
                       color: rgba(255,255,255,.72); letter-spacing: 0; font-weight: var(--w-reg); }
/* Verlaufsring: Officevibe misst mit einem Ring, dessen Bogen einen Verlauf
   traegt. Hier zeigt er, wo der Schnitt in der Spanne liegt. */ .ring-verlauf .ring-arc { stroke: url(#ringVerlauf); }
/* aus 07b-suche.html */
/* ==========================================================================
   Suche, Variante B — "Der Trichter"
   Officevibes Handschrift: eine Fuehrung statt einer Auslage, warm, mit Luft,
   und eine handgezogene Markierung als Signatur. Die Seite zeigt in drei
   Schritten, was nach dem Suchen passiert — jeder Schritt mit einem echten
   kleinen Ausschnitt, nicht mit einem Symbolbild.
   ========================================================================== */ .svB-kopf { padding: calc(var(--nav-h) + var(--s18)) 0 var(--s14); text-align: center; }
.svB-kopf .h1-type, .svB-kopf .lede { margin-left: auto; margin-right: auto; }
.svB-kopf .lede { max-width: 54ch; }
.svB-kopf .suchkasten { max-width: 760px; margin: var(--s10) auto 0; }
.svB-kopf .pen-target .mark { --pen: var(--gold); }
.zweiseiter { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
              gap: var(--s14); align-items: center;
              padding-top: var(--s10); padding-bottom: var(--s18); }
.zs-text h2 { margin: var(--s3) 0 var(--s5); font-size: var(--t-h2); font-weight: var(--w-mid);
              color: var(--ivory); letter-spacing: -.03em; line-height: 1.15; }
.zs-text > p { margin: 0; color: var(--ash); line-height: 1.7; max-width: 46ch; }
/* Hakenliste: Ring plus Haken, wie im Vorbild — nie ein Kreuz, nie rot. */ .haken { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; gap: var(--s5); }
.haken li { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: var(--s4);
            align-items: start; color: var(--ivory); line-height: 1.5; }
/* Nummernring statt Haken: die drei sind eine Reihenfolge, keine Abhakliste. */ .haken { counter-reset: none; }
.haken .ring-haken { width: 28px; height: 28px; border-radius: 50%; display: grid;
                     place-items: center; box-shadow: inset 0 0 0 1.5px var(--gold); }
.haken .ring-haken b { font-family: var(--mono); font-size: var(--t-body-s); color: var(--gold);
                       font-weight: var(--w-mid); line-height: 1; }
.haken span { color: var(--ash); }
.haken b { color: var(--ivory); font-weight: var(--w-mid); }
.zs-text .btn { margin-top: var(--s10); }
/* Die angeschnittene Oberflaeche. *//* Der Anschnitt laeuft bis zur Bildkante und darueber hinaus. Ohne den
   Riegel am Abschnitt scrollt die Seite dann waagrecht — der haesslichste
   Fehler, den eine Seite haben kann. */ .anschnitt-halter { overflow-x: clip; }
/* Nur 80px Anschnitt, nicht bis zur Bildkante. Ganz angeschnitten lag die
   Preisspalte ausserhalb des Bildes — angeschnitten werden darf Tiefe, nie
   eine Angabe, die man lesen muss. *//* Der Anschnitt endet exakt am Fensterrand — bei jeder Breite dieselbe
   Rechnung: das Polster des Rasters (--s6) plus die Haelfte dessen, was das
   Fenster breiter ist als die Seite (--page). Gemessen bei 1100, 1240, 1440
   und 1920: die Karte endet ueberall genau am Fensterrand. Feste -80px waren bei 1440px zu wenig
   (die Karte hoerte 40px vor dem Rand auf, und der Inhalt sass sichtbar zu
   weit links), bei 1200px zu viel. */ .anschnitt { position: relative;
             margin-right: calc(-1 * (max(0px, (100vw - var(--page)) / 2) + var(--s6))); }
.anschnitt-karte {
  background: var(--night-2); border-radius: var(--r-night) 0 0 var(--r-night);
  box-shadow: inset 0 0 0 1px var(--night-line), 0 40px 90px rgba(0,0,0,.55);
  /* rechts der Anschnitt, unten Platz fuer den Zettel: er soll auf Rand
     liegen, nicht auf einer Zeile. */
  /* Oben und unten gleich viel. Der Platz fuer den Zettel steckt in den
     Szenen, die unten wirklich hinreichen (siehe #szene2/#szene3) — an der
     Karte machte er jede kurze Szene sichtbar kopflastig.
     Rechts 32 statt 24: zum offenen Fensterrand darf es etwas mehr sein als
     zur gezeichneten Kante links. */
  padding: var(--s6) var(--s8) var(--s6) var(--s6);
  overflow: hidden;
}
.anschnitt-kopf { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
                  padding-bottom: var(--s5); border-bottom: 1px solid var(--night-line); }
.anschnitt-kopf .txt b { display: block; color: var(--ivory); font-weight: var(--w-mid);
                         font-size: var(--t-body-l); letter-spacing: -.02em; }
.anschnitt-kopf .txt span { font-size: var(--t-body-s); color: var(--ash-dim); }
/* Ringanzeige mit Verlauf: das Vorbild misst so. */ .messring { position: relative; width: 96px; height: 96px; flex: none; }
.messring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.messring .bahn { fill: none; stroke: var(--night-4); stroke-width: 8; }
.messring .bogen { fill: none; stroke: url(#ringVerlauf); stroke-width: 8; stroke-linecap: round; }
/* Die Beschriftung steht UNTER dem Ring, nicht darin: im Kreis lief sie ueber
   den Rand hinaus. */ .messring .wert { position: absolute; inset: 0; display: grid; place-items: center;
                  font-family: var(--mono); font-size: var(--t-h3); color: var(--ivory);
                  letter-spacing: -.03em; }
.messring-fuss { display: block; margin-top: var(--s2); text-align: center; font-size: 10px;
                 color: var(--ash-dim); letter-spacing: .08em; text-transform: uppercase; }
.anschnitt-liste { display: grid; gap: 0; margin-top: var(--s2); }
.anschnitt-liste div { display: grid; grid-template-columns: 36px minmax(0,1fr) 92px;
                       gap: var(--s4); align-items: center; padding: 11px 0;
                       border-bottom: 1px solid rgba(255,255,255,.05); }
.anschnitt-liste img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.anschnitt-liste b { color: var(--ivory); font-size: var(--t-body-s); font-weight: var(--w-mid);
                     display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anschnitt-liste small { color: var(--ash-dim); font-size: 11px; }
.anschnitt-liste .p { font-family: var(--mono); color: var(--ivory); text-align: right;
                      font-variant-numeric: tabular-nums; }
/* Aufgeklebte Schnipsel, versetzt auf die Oberflaeche. */ .chip.links {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--cobalt); color: #fff; border-radius: var(--r-pill);
  padding: 7px 14px; font-size: var(--t-caption); font-weight: var(--w-mid);
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
/* Der Zettel sass auf der ersten Zeile und deckte den Ort zu. Jetzt liegt er
   auf der Kopfkante der Karte, wo nichts steht. */ .chip.links { left: -20px; top: -16px; }
.notiz {
  position: absolute; z-index: 3; left: -34px; bottom: 18px; max-width: 300px;
  background: var(--paper-1); color: var(--charcoal); border-radius: var(--r-night);
  padding: var(--s4) var(--s5); box-shadow: 0 18px 44px rgba(0,0,0,.5); font-size: var(--t-body-s);
}
.notiz b { display: block; color: var(--charcoal); font-weight: var(--w-mid); margin-bottom: 2px; }
.notiz span { color: var(--stone); }
/* --- Die drei Schritte sind Schalter -------------------------------------
   Links steht, was passiert;rechts wird es vorgefuehrt. Ein Schritt, den man nur liest, bleibt eine Behauptung. Einer, der die Oberflaeche daneben umschaltet, ist eine Vorfuehrung. */ .haken { gap: var(--s3); }
.haken li { display: block; }
.schritt {
  display: grid; grid-template-columns: 28px minmax(0,1fr); gap: var(--s4);
  align-items: start; width: 100%; text-align: left; font: inherit; line-height: 1.5;
  background: none; border: 0; cursor: pointer; color: var(--ivory);
  padding: var(--s3); border-radius: var(--r-night);
  transition: background var(--mo-kurz) var(--mo-kurve);
}
.schritt:hover { background: rgba(255,255,255,.035); }
.schritt[aria-pressed="true"] { background: rgba(255,255,255,.06); }
/* Der gewaehlte Schritt fuellt seinen Ring — dieselbe Farbe wie die Zahl im
   Ring vorher, nur umgedreht. Kein zweites Signal noetig. */ .schritt[aria-pressed="true"] .ring-haken { background: var(--gold); box-shadow: none; }
.schritt[aria-pressed="true"] .ring-haken b { color: var(--night-1); }
/* Die drei Szenen auf der Oberflaeche. Feste Mindesthoehe, damit die Karte
   beim Umschalten nicht springt — ein springender Kasten liest sich als Fehler. *//* Alle drei liegen in derselben Rasterzelle uebereinander. Die abgewaehlten
   sind unsichtbar, aber vorhanden — deshalb ist die Karte immer so hoch wie
   die hoechste Szene, bei jeder Fensterbreite, ohne eine getippte Hoehe.
   visibility statt display: display:none nimmt die Zelle aus dem Raster, und
   der Kasten spraenge wieder. *//* Mittig: die Karte ist so hoch wie die hoechste Szene, und eine kurze Szene
   klebte oben mit einem leeren Drittel darunter. */ .szenen { display: grid; align-items: center; }
.szene { grid-area: 1 / 1; }
.szene.ist-weg { visibility: hidden; pointer-events: none; }
.szene:not(.ist-weg) { animation: szene-auf var(--mo-kurz) var(--mo-kurve) both; }
.szene-kopf { padding-bottom: var(--s5); margin-bottom: var(--s5);
              border-bottom: 1px solid var(--night-line); }
.szene-kopf b { display: block; color: var(--ivory); font-weight: var(--w-mid);
                font-size: var(--t-body-l); letter-spacing: -.02em; }
.szene-kopf span { font-size: var(--t-body-s); color: var(--ash-dim); }
/* Szene 1 — Ort waehlen: das Suchfeld und die Orte, wie sie oben auf der
   Seite wirklich stehen. */ .such-mock { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center;
             gap: var(--s3); background: var(--night-3); border-radius: var(--r-pill);
             padding: 6px 6px 6px var(--s5); box-shadow: inset 0 0 0 1px var(--night-line); }
/* Der Strich sass mit vertical-align auf gut Glueck neben der Zahl und stand
   sichtbar zu tief. Als Flex-Zeile richtet die Zeile ihn selbst mittig aus —
   keine geratene Zahl mehr. */ .such-mock .tipp { display: inline-flex; align-items: center; gap: 3px;
                   font-family: var(--mono); font-size: var(--t-body-l); color: var(--ivory); }
.caret { width: 2px; height: 1.15em; flex: none; background: var(--gold);
         animation: blinkt 1.1s steps(1, end) infinite; }
.knopf-mock { background: var(--gold); color: var(--night-1); border-radius: var(--r-pill);
              padding: 11px 20px; font-size: var(--t-body-s); font-weight: var(--w-mid); }
.knopf-mock.voll { display: block; text-align: center; margin-top: var(--s4); }
.ort-gitter { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s3);
              margin-top: var(--s5); }
.ortstein { background: var(--night-3); border-radius: var(--r-night); padding: var(--s4);
            box-shadow: inset 0 0 0 1px var(--night-line); }
.ortstein b { display: block; color: var(--ivory); font-size: var(--t-body-s);
              font-weight: var(--w-mid); overflow: hidden; text-overflow: ellipsis;
              white-space: nowrap; }
.ortstein small { font-family: var(--mono); font-size: 11px; color: var(--ash-dim); }
.ortstein.ist-treffer { box-shadow: inset 0 0 0 1.5px var(--gold); background: rgba(240,180,41,.08); }
.ortstein.ist-treffer small { color: var(--gold); }
/* Szene 3 — anfragen. Bewusst ohne Namen einer Fahrschule: das Formular ist
   dasselbe fuer alle, und ein Name hier waere eine Hervorhebung. */ .feld { background: var(--night-3); border-radius: var(--r-field); padding: 9px var(--s4);
        box-shadow: inset 0 0 0 1px var(--night-line); margin-bottom: var(--s3); }
.feld .k { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
           color: var(--ash-dim); margin-bottom: 2px; }
.feld .v { color: var(--ivory); font-size: var(--t-body-s); }
.feld.gross .v { display: block; line-height: 1.65; }
.anfrage-fuss { margin: var(--s4) 0 0; text-align: center; font-size: var(--t-caption);
                color: var(--ash-dim); }
@media (prefers-reduced-motion: reduce) {
.szene:not(.ist-weg) { animation: none; }
.caret { animation: none; }
}
@media (max-width: 1000px) {
.zweiseiter { grid-template-columns: minmax(0,1fr); gap: var(--s10); }
.anschnitt { margin-right: 0; }
/* Ohne Anschnitt braucht die Karte auch die 80px Polster rechts nicht —
     auf 390px waren das 80 von 366 nutzbaren Pixeln, tote Flaeche. */ .anschnitt-karte { border-radius: var(--r-night); padding-right: var(--s6); }
.chip.links { left: var(--s4); top: -14px; }
.notiz { position: static; margin-top: var(--s5); max-width: none; }
.ort-gitter { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* Stimme */ .svB-stimme { padding: var(--s18) 0; border-top: 1px solid var(--night-line); text-align: center; }
.svB-stimme q { font-family: var(--serif); font-style: italic; font-size: var(--t-h2);
                line-height: 1.3; color: var(--ivory); quotes: "\201E" "\201C";
                display: block; max-width: 22ch; margin: 0 auto; }
.svB-stimme footer { margin-top: var(--s6); font-size: var(--t-body-s); color: var(--ash-dim); }
.svB-stimme footer b { color: var(--ivory); }
.ortkachel[aria-pressed="true"] { background: var(--night-3);
                                  box-shadow: inset 0 0 0 1px var(--ice); }
.ortkachel .kopf { display: flex; align-items: baseline; justify-content: space-between;
                   gap: var(--s3); padding: var(--s4) var(--s4) var(--s3); }
.ortkachel .ort { color: var(--ivory); font-weight: var(--w-mid); font-size: var(--t-body);
                  letter-spacing: -.02em; }
.ortkachel .n { font-family: var(--mono); font-size: 11px; color: var(--ash-dim); }
.ortkachel .zeilen { border-top: 1px solid var(--night-line); }
.ortkachel .z { display: flex; align-items: baseline; justify-content: space-between;
                gap: var(--s3); padding: 7px var(--s4); font-size: 12px; line-height: 1.3;
                border-bottom: 1px solid rgba(255,255,255,.045); }
.ortkachel .z:last-child { border-bottom: 0; }
.ortkachel .z span { color: var(--ash); overflow: hidden; text-overflow: ellipsis;
                     white-space: nowrap; }
.ortkachel .z b { font-family: var(--mono); font-weight: var(--w-mid); color: var(--ivory);
                  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ortkachel .rest { padding: 7px var(--s4); font-size: 11px; color: var(--ash-dim);
                   border-top: 1px solid rgba(255,255,255,.045); }
.ortkachel .fuss { margin-top: auto; padding: var(--s3) var(--s4) var(--s4);
                   border-top: 1px solid var(--night-line); display: flex;
                   justify-content: space-between; gap: var(--s3);
                   font-family: var(--mono); font-size: 11px; color: var(--ash-dim); }
.ortkachel .fuss b { color: var(--ivory); font-weight: var(--w-mid); }
.filterband .label { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
                     color: var(--ash-dim); margin-right: var(--s2); }
.filterband .pill { font-size: var(--t-caption); padding: 6px 12px; }
.fskachel .txt { padding: var(--s3) var(--s4) var(--s4); display: grid; gap: 2px; }
.fskachel .ort { font-size: var(--t-caption); color: var(--ash-dim); }
.fskachel .preis { font-family: var(--mono); color: var(--ivory); font-size: var(--t-body); }
.fskachel .preis small { font-family: var(--sans); font-size: var(--t-caption); color: var(--ash-dim); }
.svC-kopf .lede { max-width: 44ch; }
.vorwort { margin: 0 0 var(--s8); color: var(--ash); font-size: var(--t-body-s); line-height: 1.65; max-width: 78ch; }
/* ---------- Ortskarten ----------
   Sechs Orte, sechs gleich gebaute Karten: gleiche Groesse, gleiche
   Helligkeit, gleiche Reihenfolge der Angaben, alphabetisch sortiert. */ .ortkarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.ort-spanne { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.ort-spanne b { font-family: var(--mono); font-size: var(--t-h3); font-weight: var(--w-mid);
                letter-spacing: -.03em; color: var(--ivory); font-variant-numeric: tabular-nums; }
.spannen-fuss { margin: var(--s6) 0 0; font-size: var(--t-body-s); color: var(--ash-dim); line-height: 1.6; }
/* ---------- Pillenliste ----------
   Die uebrigen Orte. Schlicht, weil zu ihnen hier keine Zahl steht — nicht,
   weil sie weniger wert waeren. Gleiche Helligkeit wie die Karten daueber. */ .weiter-kopf { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap;
               margin: var(--s14) 0 var(--s5); }
.weiter-kopf h3 { font-size: var(--t-sub); font-weight: var(--w-mid); color: var(--ivory); margin: 0; }
.weiter-kopf .muted { color: var(--ash-dim); }
.orte { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.ortpille {
  display: inline-flex; align-items: center;
  font-size: var(--t-body-s); font-weight: var(--w-mid);
  padding: var(--s3) var(--s5); border-radius: var(--r-pill);
  box-shadow: var(--ring-2); color: var(--ivory);
}
.ortpille:hover { box-shadow: inset 0 0 0 1px var(--ivory); color: var(--ivory); }
/* ---------- Textabschnitt ---------- */ .zweispalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s12); align-items: start; }
@media (max-width: 720px) {
.suchzeile .btn { flex: 1 1 100%; }
}
@media (pointer: coarse) {
.ortpille, .nav-lang a, .foot-list a, .foot-bottom a { min-height: 44px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; }
.nav-solid { background: var(--glass); border-bottom-color: var(--night-line); }
/* ---------- 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 .lede { max-width: 56ch; }
.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;
}
.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; }
}
.hero-type { max-width: 15ch; }
.hero .lede { max-width: 52ch; }
.capture-cats .label { margin: 0 var(--s2) 0 0; }
.hero-foot .line { flex: 1 1 auto; height: 1px; background: var(--night-line); }
.sec-head .lede { margin-top: var(--s4); }
.knopfpaar .btn { width: 100%; min-width: 19rem; }
.orte { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s6); }
.step-card > .badge { align-self: flex-start; margin-top: var(--s3); }
.step-rest .n { font-weight: var(--w-mid); color: var(--ivory); }
.school-rating .val { font-size: var(--t-body-l); font-weight: var(--w-mid); }
.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); }
/* ---------- Ü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); }
/* ---------- 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 .row { justify-content: center; margin-top: var(--s10); }
@media (max-width: 1080px) {
.school-card > .btn { flex: 0 0 auto; }
}
@media (max-width: 720px) {
.hero-type { max-width: none; }
.hero-actions .btn { flex: 1 1 100%; }
.step-grid, .why-grid, .about, .about-facts { grid-template-columns: 1fr; }
.about { gap: var(--s10); }
.sec-head { flex-direction: column; align-items: flex-start; gap: var(--s6); }
/* 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;
  }
}
.modellband .lede { max-width: 44ch; }
.modell-reihe .fs-bild-rund { width: var(--s8); height: var(--s8); }
/* Der Stern ist als Flaeche gezeichnet, nicht als Strich. */ .modell-bew .gl { fill: currentColor; stroke: none; }
/* 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); }
/* Kobalt markiert den SCHNITT DES ORTES — keine Fahrschule. */ .feld-stat.ist-schnitt { border-left-color: var(--cobalt); }
.feld-v .num { font-size: var(--t-h2); font-weight: var(--w-mid); letter-spacing: -.03em; color: var(--ivory); }
.display-type .mark-ellipse { top: -30%; height: 165%; }
.kosten-kachel .gl { color: var(--ash-dim); }
@media (max-width: 720px) {
.modell-reihe > .preis { grid-column: 2; grid-row: 1; }
}