/* ============================================================
   BAUSTEINE — was mehr als eine Seite braucht

   Die Regel, nach der etwas hier landet: Es kommt auf mindestens zwei
   Seiten vor UND bedeutet dort dasselbe. Zwei Dinge, die zufällig gleich
   aussehen, gehören nicht zusammengelegt — sie laufen dann beim nächsten
   Mal wieder auseinander, nur unsichtbarer.

   ---------------------------------------------------------------------
   Was hier NICHT steht, und warum

   Beim Aufräumen sah es zunächst nach sechs Segmentwahlen aus, die zu
   einer werden könnten — `.wahl`, `.schalter`, `.antrieb-wahl`,
   `.jahres-wahl`, `.saison-schalter`, `.umkreis-wahl`. Nebeneinander
   gelegt waren es drei verschiedene Dinge:

     · eine Gruppe aus Pillen in einer Schiene  (.jahres-wahl, .antrieb-wahl)
     · ein einzelner Schalter zum An- und Ausmachen  (.schalter, .laenderwahl)
     · eine Liste großer Auswahlkarten mit Symbol und Erklärtext  (.wahl)

   und `.umkreis-wahl` ist überhaupt keine Wahl, sondern eine Zeile mit
   einem Schieberegler darin. Zusammengelegt sind deshalb nur die ersten
   beiden. Namen zu zählen ist keine Analyse.
   ============================================================ */


/* ============================================================
   1 · SCHIEBEREGLER

   Stand wörtlich in seite-planer.css und seite-assistent.css — mit zwei
   Unterschieden, die niemand beschlossen hat: Der Assistent hatte keinen
   sichtbaren Fokusring, und sein Firefox-Knauf keinen Zeigerwechsel. So
   sieht Drift aus, wenn man ihr ein Jahr Zeit lässt.
   ============================================================ */
.regler-kopf{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--a3);margin-bottom:var(--a2);
}
.regler-kopf label{
  font-family:var(--ff-display);font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-mute);
}
.regler-kopf output{
  font-family:var(--ff-mono);font-variant-numeric:tabular-nums;
  font-size:19px;color:var(--text);
}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:2px;
  background:var(--linie-hell);border-radius:var(--r-fein);outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:var(--r-pille);
  background:var(--text);border:0;cursor:pointer;
  transition:transform var(--d-tupf) var(--k-beides);
}
input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:var(--r-pille);
  background:var(--text);border:0;cursor:pointer;
}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
input[type=range]:focus-visible{outline:2px solid var(--schild);outline-offset:6px}


/* ============================================================
   2 · SEGMENTGRUPPE

   Mehrere Pillen in einer Schiene, genau eine ist gewählt. Für Fälle mit
   wenigen, kurzen, gleichrangigen Möglichkeiten — Jahreszeit, Antrieb.

   Wer mehr als vier Möglichkeiten hat oder Erklärtext braucht, nimmt
   nicht das hier, sondern die Auswahlkarten des Assistenten: Eine
   Schiene mit sieben Pillen bricht um und sieht dann aus wie ein Unfall.
   ============================================================ */
.segmente{
  display:inline-flex;gap:var(--a1);
  background:var(--flaeche);border-radius:var(--r-pille);padding:var(--a1);
}
.segmente button{
  background:none;border:0;cursor:pointer;border-radius:var(--r-pille);
  padding:9px 17px;white-space:nowrap;
  font-family:var(--ff-display);font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-leise);
  transition:background var(--d-kurz) var(--k-beides),
             color      var(--d-kurz) var(--k-beides);
}
.segmente button:hover{color:var(--text)}
.segmente button[aria-pressed="true"],
.segmente button[aria-checked="true"]{background:var(--flaeche-2);color:var(--text)}
.segmente button:focus-visible{outline:2px solid var(--schild);outline-offset:2px}

/* Die gewachsenen Namen bleiben, damit HTML und Tests nicht angefasst
   werden müssen. Sie zeigen jetzt nur noch auf dasselbe Bauteil. */
.jahres-wahl,.antrieb-wahl{
  display:inline-flex;gap:var(--a1);
  background:var(--flaeche);border-radius:var(--r-pille);padding:var(--a1);
}
.jz,.antrieb,.strecke-art{
  background:none;border:0;cursor:pointer;border-radius:var(--r-pille);
  padding:9px 17px;white-space:nowrap;
  font-family:var(--ff-display);font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-leise);
  transition:background var(--d-kurz) var(--k-beides),
             color      var(--d-kurz) var(--k-beides);
}
.jz:hover,.antrieb:hover,.strecke-art:hover{color:var(--text)}
.jz[aria-pressed="true"],.jz[aria-checked="true"],
.antrieb[aria-pressed="true"],.antrieb[aria-checked="true"],
.strecke-art[aria-checked="true"]{
  background:var(--flaeche-2);color:var(--text);
}
.jz:focus-visible,.antrieb:focus-visible,.strecke-art:focus-visible{outline:2px solid var(--schild);outline-offset:2px}


/* ============================================================
   3 · SCHALTER

   Eine einzelne Pille mit Rand, die an oder aus ist. Anders als ein
   Segment steht sie für sich: Mehrere davon nebeneinander schließen
   einander nicht aus.
   ============================================================ */
.schalter,.laenderwahl button{
  font-family:var(--ff-display);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;
  background:transparent;color:var(--text-mute);
  border:1px solid var(--linie);border-radius:var(--r-pille);
  padding:9px 18px;cursor:pointer;
  transition:border-color var(--d-kurz) var(--k-beides),
             background   var(--d-kurz) var(--k-beides),
             color        var(--d-kurz) var(--k-beides);
}
.schalter:hover,.laenderwahl button:hover{border-color:var(--linie-hell);color:var(--text)}
.schalter[aria-pressed="true"],.laenderwahl button[aria-pressed="true"]{
  background:var(--flaeche-2);border-color:var(--schild);color:var(--text);
}
.schalter:focus-visible,.laenderwahl button:focus-visible{
  outline:2px solid var(--schild);outline-offset:2px;
}


/* ============================================================
   4 · STRASSENSCHILD

   Das blaue Autobahnschild und seine mautfreie grüne Fassung. Die Farben
   sind bewusst keine Palettenwerte: Sie ahmen die echte Beschilderung
   nach, und die richtet sich nicht nach dieser Seite. Deshalb stehen sie
   hier als eigene Tokens statt als lose Hex-Werte im Regelwerk.
   ============================================================ */
:root{
  --schild-grund:  #2C6BB0;
  --schild-kante:  #4E8FD6;
  --schild-text:   #EAF3FF;
  --schild-frei:   #1E6B52;
  --schild-frei-k: #35A67F;
}
.schild{
  display:inline-block;
  font-family:var(--ff-display);font-size:12px;font-weight:700;letter-spacing:.04em;
  color:var(--schild-text);background:var(--schild-grund);
  border:1px solid var(--schild-kante);border-radius:var(--r-fein);
  padding:1px 6px 2px;margin-right:var(--a1);
  white-space:nowrap;vertical-align:1px;
}
.schild.frei{background:var(--schild-frei);border-color:var(--schild-frei-k)}


/* ============================================================
   5 · ETIKETT

   Kleine Pille mit gesperrter Versalschrift. Sie benennt einen Zustand,
   sie schaltet nichts — deshalb ohne Zeigerwechsel und ohne Fokus.
   ============================================================ */
.pille-frei{
  display:inline-block;
  font-family:var(--ff-display);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--frei);border:1px solid rgba(79,209,165,.4);
  background:rgba(79,209,165,.08);
  border-radius:var(--r-pille);padding:2px 10px;
}


/* ============================================================
   6 · MESSBALKEN

   Eine Bahn, darin ein oder mehrere Anteile. Der Planer stapelt
   mehrere nebeneinander (Maut je Land), andere Stellen zeigen einen.
   ============================================================ */
.balken-bahn{
  display:flex;height:20px;overflow:hidden;
  background:rgba(35,64,78,.5);border-radius:var(--r-fein);
}
.balken-teil{height:100%;transition:width var(--d-lang) var(--k-ein)}
.balken-wert{
  font-family:var(--ff-mono);font-variant-numeric:tabular-nums;
  font-size:13.5px;text-align:right;color:var(--text);
}
.balken-wert.null{color:var(--frei)}


/* ============================================================
   7 · MENÜ

   Ein Knopf, unter dem eine kurze Liste aufklappt. Gebaut für den
   Planer: Elf Wege nebeneinander sind keine Auswahl, sondern eine
   Wand. Was man oft tut, bleibt draußen; was man einmal am Ende der
   Planung tut, liegt hier.

   Kein <dialog>, kein Popover-Attribut: Die Liste soll die Seite nicht
   abdunkeln und keinen Fokus einsperren. Sie ist eine Verlängerung des
   Knopfs, nicht ein eigener Ort.
   ============================================================ */
.menue{position:relative;display:inline-flex}
.menue-pfeil{width:15px;height:15px;opacity:.7;transition:transform var(--d-kurz) var(--k-beides)}
.menue[data-offen="ja"] .menue-pfeil{transform:rotate(180deg)}

.menue-liste{
  position:absolute;top:calc(100% + 8px);left:0;z-index:40;min-width:230px;
  display:flex;flex-direction:column;gap:2px;padding:var(--a1);
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--r-mittel);
  box-shadow:0 18px 40px rgba(4,12,18,.55);
}
/* `display:flex` oben schlaegt die Browserregel fuer [hidden] — dieselbe
   Falle wie bei .tat, deshalb hier gleich mit. */
.menue-liste[hidden]{display:none}

.menue-eintrag{
  display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;text-decoration:none;
  padding:10px 12px;border-radius:var(--r-klein);
  font-family:var(--ff-display);font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-mute);
  transition:background var(--d-kurz) var(--k-beides), color var(--d-kurz) var(--k-beides);
}
.menue-eintrag svg{width:17px;height:17px;flex:none;opacity:.8}
.menue-eintrag:hover{background:var(--flaeche-2);color:var(--text)}
.menue-eintrag:focus-visible{outline:2px solid var(--schild);outline-offset:-2px}
@media (pointer:coarse){ .menue-eintrag{min-height:44px} }

/* ---------- Ein Menü aus Reisen statt aus Befehlen ----------
   „GPX" und „Kalender" sind Befehle und stehen deshalb in Versalien mit
   weitem Sperrsatz. „Zürich → Venedig" ist ein Name — so gesetzt wäre er
   doppelt so breit und nur noch halb lesbar. Darunter, klein und einfarbig,
   Länge und Länder.

   Zehn Einträge sind mehr, als in ein Klappmenü von selbst passen: Deshalb
   eine gedeckelte Höhe, die scrollt, statt aus dem Fenster zu laufen. */
.menue-liste.ist-vorschlaege{max-height:min(62vh,420px);overflow-y:auto;min-width:264px}
.ist-vorschlaege .menue-eintrag{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  text-transform:none;letter-spacing:0;
  font-size:14px;color:var(--text);
}
.ist-vorschlaege .menue-eintrag small{
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--text-leise);font-variant-numeric:tabular-nums;
}


/* ============================================================
   8 · WEGWEISER

   Ein Wegweiser am Autobahnkreuz: blaue Tafel, weisse Schrift, weisse
   Umrandung mit ein paar Millimetern Abstand zur Kante. Drei Ziele, ihre
   Entfernung, und — das ist der Zusatz dieses Produkts — was sie kosten.

   Warum das der Held der Seite ist: Es zeigt in vier Zeilen genau das,
   wofuer es die Anwendung gibt, mit echten Zahlen aus derselben Rechnung
   wie der Planer. Ein Werbebild haette dieselbe Flaeche gebraucht und
   nichts belegt.
   ============================================================ */
.wegweiser{
  margin:0;
  background:var(--wegweiser-flaeche);
  border:1px solid var(--wegweiser-kante);
  border-radius:var(--r-gross);
  box-shadow:var(--schatten-2);
  overflow:hidden;
  /* Die weiße Innenlinie ist das Erkennungszeichen europäischer
     Wegweiser — sie läuft mit Abstand zur Außenkante. Zurückgenommen auf
     75 %, sonst schneidet sie sich bei Nachtblau in die Fläche. */
  outline:2px solid rgba(237,241,245,.75);
  outline-offset:-9px;
}

/* Die Annäherung — klein in Ruhe, groß beim Überfahren — steht in
   intro.css: Sie gehört zur Bühne der Startseite. Im Planer und im
   Assistenten ist die Tafel kein Angebot, sondern das Ergebnis, und ein
   Ergebnis versteckt sich nicht. */

.wegweiser-kopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:20px 26px 0;
  font-family:var(--ff-display);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(237,241,245,.72);
}
.wegweiser-strassen{letter-spacing:.1em;color:rgba(237,241,245,.85)}
/* Straßennummern führt nur die Alpenrunde; die neun anderen Vorschläge
   lassen die Zeile leer. Ein leeres <span> hat keine Zeilenbox und macht
   die Kopfzeile einen Pixel flacher — auf der Bühne wechselt das Schild
   alle acht Sekunden, und dann ruckelt es um genau diesen Pixel. Ein
   schmalloses Leerzeichen hält die Zeile offen, ohne etwas anzuzeigen. */
.wegweiser-strassen:empty::before{content:"\200B"}

.wegweiser-ziele{list-style:none;margin:0;padding:14px 26px 20px}
.wegweiser-zeile{
  display:grid;grid-template-columns:1fr auto auto;
  /* `center` und nicht `baseline`, und das ist eine Änderung mit Grund.

     Auf der Grundlinie ausgerichtet hängt die Zeilenhöhe daran, wie weit
     das tiefste Element unter die Grundlinie reicht — und das ist mal der
     Preis mit 16 Pixeln, mal das kleiner gesetzte „FREI" mit 13. Eine
     mautfreie Etappe machte die Zeile damit zwei Pixel flacher als eine
     bezahlte. Über vier Zeilen wurde daraus ein Schild, das je nach Route
     zwischen 383 und 392 Pixeln hoch war; auf der Bühne wechselt es alle
     acht Sekunden, und dann sieht man den Kasten atmen.

     Mittig ausgerichtet ist die Höhe die des höchsten Elements, und das ist
     immer der Ortsname — er ist in jeder Fenstergröße größer gesetzt als
     Kilometer und Preis. Damit hängt die Zeilenhöhe an genau einer Zahl
     statt an drei Schriftgrößen und ihren Unterlängen.

     Ein `min-height` täte es nicht: Es müsste über der natürlichen Höhe
     liegen, und die wandert mit `clamp` durch die Fenstergrößen. Irgendwo
     dazwischen wäre es nicht mehr bindend, und die Schwankung käme
     zurück — an einer Breite, die niemand prüft. */
  align-items:center;gap:10px 16px;
  padding:9px 0;
  border-bottom:1px solid rgba(237,241,245,.22);
}
.wegweiser-zeile:last-child{border-bottom:0}
.wegweiser-ort{
  font-family:var(--ff-display);
  font-size:clamp(19px,2.1vw,26px);line-height:1.1;
  letter-spacing:-.01em;color:#fff;
}
/* Das Ziel der Runde traegt mehr Gewicht — auf einem echten Schild steht
   die Fernstrecke oben und fett, die naechste Ausfahrt klein. */
.wegweiser-zeile.ist-ziel .wegweiser-ort{font-weight:700}
.wegweiser-km{
  font-family:var(--ff-mono);font-size:13px;
  color:rgba(237,241,245,.78);font-variant-numeric:tabular-nums;
}
.wegweiser-preis{
  font-family:var(--ff-display);font-size:16px;min-width:5ch;text-align:right;
  color:#fff;font-variant-numeric:tabular-nums;
}
/* Frei ist keine Zahl, sondern eine Aussage — deshalb steht dort ein Wort
   in der Farbe, die auf dieser Seite „kostet nichts" bedeutet. */
.wegweiser-preis.ist-frei{color:var(--frei);font-size:13px;letter-spacing:.1em;text-transform:uppercase}

/* Die Umhüllung, wenn die Tafel ein Verweis ist. Ohne `text-decoration:none`
   unterstreicht der Browser jede Zeile darin, Zahlen inklusive — die Regel
   ist beim Verschieben des Bauteils einmal verlorengegangen und hat genau
   das wieder getan. */
.mautband-weg{display:block;text-decoration:none;color:inherit}
.mautband-weg:hover,.mautband-weg:focus-visible{text-decoration:none}
.mautband-weg:focus-visible{outline:2px solid var(--schild);outline-offset:4px}
.mautband-weg:hover .wegweiser{outline-color:#fff}
.mautband-weg:hover .band-etikett{color:rgba(237,241,245,.85)}

@media(max-width:640px){
  .wegweiser{outline-offset:-7px}
  .wegweiser-kopf{padding:16px 18px 0}
  .wegweiser-ziele{padding:10px 18px 16px}
  .wegweiser-ort{font-size:19px}
}


/* Die Tafel als Ergebnis: im Planer über den Kennzahlen, im Assistenten
   am Ende der neun Schritte. Dieselbe Sprache wie auf der Startseite —
   wer dort das Schild gesehen hat, erkennt hier sein eigenes wieder.

   Kein Verweis, keine Annäherung: Sie zeigt, was gerade herausgekommen
   ist, und steht dafür still. */
.wegweiser.ist-ergebnis{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:var(--a5) var(--a6) var(--a6);
  outline-offset:-8px;
}
.wegweiser.ist-ergebnis .kz{border-left:1px solid rgba(237,241,245,.22);padding:6px 0 0 var(--a5)}
.wegweiser.ist-ergebnis .kz:first-child{border-left:0;padding-left:0}
.wegweiser.ist-ergebnis .kz .v{
  font-family:var(--ff-display);font-size:clamp(26px,3.4vw,40px);
  line-height:1;letter-spacing:-.02em;color:#fff;display:block;
  font-variant-numeric:tabular-nums;
}
.wegweiser.ist-ergebnis .kz.akzent .v{color:var(--peage)}
.wegweiser.ist-ergebnis .kz .l{
  display:block;margin-top:7px;
  font-family:var(--ff-display);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(237,241,245,.62);
}
@media(max-width:760px){
  .wegweiser.ist-ergebnis{grid-template-columns:repeat(2,1fr);gap:var(--a4) 0;padding:var(--a4)}
  .wegweiser.ist-ergebnis .kz:nth-child(odd){border-left:0;padding-left:0}
  .wegweiser.ist-ergebnis .kz{padding-left:var(--a4)}
}