@charset "UTF-8";
/* ============================================================================
   Serpa - Anordnung der App (Hochformat)

   Diese Datei beschreibt, WIE DIE SEITEN AUFGEBAUT sind: die Schublade, die
   untere Leiste, die Garage, der Freisteller, die Karte.

   Die gemeinsame Designsprache - Schrift, Farben, Abstaende, Radien - steht
   in design.css und wird VOR dieser Datei geladen. Wer hier eine Farbe oder
   ein Mass fest eintraegt statt eine Marke zu benutzen, baut genau die
   Doppelung ein, die die Trennung verhindern soll.

   ALLES HIER IST AUF HOCHFORMAT AUSGELEGT. Ein Handy in der Hand, ein Daumen,
   eine Spalte. Die spaetere Webseite bekommt eine eigene Datei fuer das
   Querformat und benutzt dieselbe design.css.
   ============================================================================ */

/* ---------- Startmenü & "Meine Touren" ----------
   Beide sind einfache, zentrierte Vollbild-Ansichten - der Einstieg vor
   dem eigentlichen Routenplaner (siehe .app-layout weiter unten), der
   anfangs per [hidden] versteckt ist. */
.start-screen {
  height: calc(100% - var(--nav-raum));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Konto, Passwort und "Meine Touren" haben kein eigenes Bild. Damit das
     Glas darauf ueberhaupt etwas zu brechen hat, liegt hier eine
     weichgezeichnete Fassung des Startfotos. Wichtig ist das Mass: bei zu
     starker Unschaerfe bleibt nur noch eine graue Flaeche uebrig, und dann
     hat das Glas wieder nichts, worueber es liegen koennte. Die Maschine
     muss also noch zu erahnen sein. Fertig weichgezeichnet in der Datei,
     nicht per CSS - so muss der Browser zur Laufzeit nichts rechnen. */
  background:
    linear-gradient(to bottom,
      var(--schatten-weich) 0%,
      var(--schatten-weich) 30%,
      var(--schatten-mittel) 55%,
      var(--schatten-tief) 78%,
      var(--schatten-voll) 100%),
    url('../img/hintergrund-weich.jpg') center / cover no-repeat fixed;
}

.start-screen-inner {
  width: 320px;
  max-width: 100%;
  /* Die Formulare liegen jetzt auf einer Glasplatte statt frei im Raum. */
  padding: var(--s5);
  border-radius: var(--r-lg);
  background: var(--glas-hauch);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glas-rand);
  box-shadow:
    inset 0 1px 0 var(--glas-heller),
    inset 0 -1px 0 var(--schatten-weich),
    0 16px 40px var(--schatten-mittel);
}
/* Auf Listenbildschirmen waere so eine Platte im Weg - dort ist die Liste
   selbst aus Glas, siehe .saved-list li. */
.listen-screen .start-screen-inner {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.start-screen-inner .sub { margin: 0 0 32px; }
.start-screen-inner h2 {
  margin: 0 0 var(--s4);
  font-family: var(--schrift-display);
  font-weight: 700;
  /* Der grosse Titel eines Bildschirms, wie iOS ihn setzt: gemischt,
     eng gesperrt, 28 Punkte. Versalien waeren in Inter zu breit. */
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--metall-glanz);
}
/* --- Die Wortmarke ---------------------------------------------------------
   Der Schriftzug als Bild, darunter der Untertitel. Steht auf dem Anmelde-
   und dem Rechtliches-Bildschirm; im Querformat zusaetzlich in der
   Kopfleiste, wo quer.css die Masse anpasst.

   Der Untertitel ist Volltonfarbe, KEIN Verlaufstext - Grundsatz 2 der
   Designsprache (siehe Kopf von design.css). Die Metallwirkung kommt aus
   der Farbe selbst, die aus dem Logo gemessen ist, und aus der weiten
   Laufweite. Bei dieser Schriftgroesse waere ein Verlauf ohnehin kaum zu
   sehen, waere aber ein gebrochener Grundsatz. */
.wortmarke {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s5);
}
.wortmarke-bild {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  filter: var(--logo-filter);
}
.wortmarke-sub {
  font-family: var(--schrift-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  /* Weit gesperrt, damit die kurze Zeile die Breite des Schriftzugs
     aufnimmt statt darunter zu verschwinden. */
  letter-spacing: 0.14em;
  /* Der Zeichenabstand haengt rechts am letzten Buchstaben und schoebe die
     Zeile sonst nach links aus der Mitte. */
  text-indent: 0.14em;
  line-height: 1;
  color: var(--metall);
}

/* --- Anmeldung ueber Google und Apple --------------------------------------
   Die Knoepfe sind bewusst ruhig gehalten (ghost, kein Farbfeld): Der
   Hauptweg ist die Anmeldung mit E-Mail darueber, diese beiden sind das
   Angebot daneben. */
.konto-anbieter {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s4);
}

/* Ein "oder" mit einer Linie links und rechts. Der Strich entsteht aus zwei
   Pseudo-Elementen, die sich den Platz teilen - so bleibt er immer genau so
   lang, wie neben dem Wort Platz ist. */
.konto-oder {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.konto-oder::before,
.konto-oder::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--glas-rand);
}

.anbieter-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
}

/* --- Das Alpha-Abzeichen ----------------------------------------------------
   Die App ist eine fruehe Fassung: Der Routenplaner, die Garage und das
   Aufzeichnen laufen, das eigentliche Ziel - der Community-Teil - fehlt
   noch ganz. Wer das nicht weiss, haelt Fehlendes fuer kaputt.

   Als Blechschild und nicht als bunter Aufkleber: Die Designsprache erlaubt
   genau EINE Signalfarbe, und die gehoert dem Bedienbaren. Helles Blech auf
   dunklem Grund faellt trotzdem sofort auf - es ist der hoechste Kontrast,
   den die App ueberhaupt kennt. */
.alpha-schild {
  align-self: center;
  padding: 2px var(--s2);
  border-radius: var(--r-sm);
  background: var(--pass-schild);
  color: var(--pass-schild-ink);
  font-family: var(--schrift-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  line-height: 1.5;
  white-space: nowrap;
}

/* Die Zeile aus Schriftzug und Abzeichen. Der Untertitel haengt darunter
   und richtet sich weiter am Schriftzug aus, nicht am Abzeichen. */
.wortmarke-zeile {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

/* Der Schriftzug im Kopf des Starts: Regeln beim Start-Block (.start-kopf),
   Groesse dort begruendet. Er steht NUR im Hochformat (.nur-hoch), im
   Querformat traegt die Kopfleiste ihn. */


/* ---------- Die Einfuehrung beim ersten Oeffnen ------------------------------
   Fuenf Karten uebereinander an derselben Stelle, gezeichnet von
   einfuehrung.js: vier Funktionen, dann die Empfehlung fuers Konto. Sie
   liegt ueber ALLEM (auch ueber den Dialogen mit 1200 und 1400), weil sie
   der erste Eindruck ist und nichts dazwischenfunken soll.

   Bis zum 11.09.2026 stand hier der Startfilm; der liegt in
   abgelegt/startfilm/ und wartet. */

.einfuehrung {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  padding-bottom: max(var(--s4), env(safe-area-inset-bottom));
  background: var(--feld-glas);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Der Schalter ist das hidden-Attribut. Weil "display: flex" oben schwerer
   wiegt als die Browservorgabe fuer hidden, muss der Fall hier eigens
   stehen - sonst bliebe die Einfuehrung immer sichtbar. */
.einfuehrung[hidden] { display: none; }

.einfuehrung-blatt {
  width: 100%;
  max-width: 420px;
  border-radius: var(--r-xl);
  padding: var(--s4) var(--s4) var(--s5);
  text-align: center;
}
.einfuehrung-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s5);
}
.einfuehrung-kopf .linkbtn { text-decoration: none; font-size: 14px; color: var(--muted); }
.einfuehrung-kopf .linkbtn:hover { color: var(--accent-hell); }

/* Der Inhalt einer Karte blendet bei jedem Schritt kurz neu ein - genug,
   dass der Wechsel als Wechsel zu spueren ist, zu kurz zum Warten. */
.einfuehrung-inhalt { animation: einfuehrungHerein 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes einfuehrungHerein {
  from { opacity: 0; transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
  .einfuehrung-inhalt { animation: none; }
  /* Der Puls "faehrt jetzt" steht dann still, aber deutlich: ein fester
     Ring statt der Welle. Das Wort daneben traegt die Bedeutung ohnehin. */
  .fahrt-puls { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 45%, transparent); }
  .karte, button.karte, .btn, .glas-rund { transition: none; }
}

/* Der Schriftzug ueber der ersten Karte. Etwas kleiner als sonst in der
   App und mit einem Trennstrich darunter: Er begruesst, er ueberschreibt
   nicht. Danach faengt der Inhalt an. */
.einfuehrung-marke {
  margin: 0 0 var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--glas-hell);
}
.einfuehrung-marke .wortmarke-bild { max-width: 168px; }

/* Das grosse Zeichen: derselbe Glaskreis wie .widget-wert-symbol, nur
   doppelt so gross, weil er hier die Buehne ist und nicht die Beschriftung. */
.einfuehrung-zeichen {
  width: 84px;
  height: 84px;
  margin: 0 auto var(--s4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--glas-hauch);
  border: 1px solid var(--glas-rand);
  box-shadow: inset 0 1px 0 var(--glas-hell), 0 10px 30px var(--schatten-mittel);
  color: var(--metall-glanz);
}
.einfuehrung-zeichen .ic { width: 38px; height: 38px; }
/* Das Bild einer Einfuehrungskarte: echte Bausteine der App in klein,
   nicht antippbar. Die Hoehe ist begrenzt, damit die Karte auf einem
   kleinen Handy samt Text und Knopf ins Fenster passt. */
.einfuehrung-bild { margin: 0 0 var(--s4); pointer-events: none; text-align: left; }
.einfuehrung-bild .btn { cursor: default; }
.einfuehrung-foto { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--karten-rand); }
.einfuehrung-foto img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: 60% 60%; }
.einfuehrung-chip {
  position: absolute; left: var(--s3); bottom: var(--s3);
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--feld-glas);
  color: var(--text);
  font-size: 13px; font-weight: 600;
}
.einfuehrung-chip i { font-style: normal; opacity: 0.5; }
.einfuehrung-chip .ic { width: 14px; height: 14px; }
.einfuehrung-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.einfuehrung-live { display: flex; flex-direction: column; gap: var(--s2); }
.einfuehrung-live .fahrt-band { padding: var(--s2) var(--s3); }
.einfuehrung-live .fahrt-jetzt-knopf { width: 100%; }
.einfuehrung-entdecken { display: flex; flex-direction: column; gap: var(--s2); }
.einfuehrung-entdecken .touren-leiste { margin: 0; }
.einfuehrung-entdecken .quellen-umschalter { margin: 0; }
.einfuehrung-entdecken .seg { font-size: 12px; padding: 7px 0; }
.einfuehrung-entdecken .entdecken-reiter { padding: 7px 12px; }
/* Beim Konto leuchtet der Kreis blau: Das ist der eine Schritt, bei dem
   die App etwas will. */
.einfuehrung-zeichen.konto {
  color: var(--accent-hell);
  border-color: color-mix(in srgb, var(--accent-hell) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.einfuehrung-titel {
  margin: 0 0 var(--s3);
  font-family: var(--schrift-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--metall-glanz);
}
.einfuehrung-text {
  margin: 0 auto;
  max-width: 34ch;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}
.einfuehrung-text b { color: var(--text); font-weight: 600; }

/* Die Punkte sagen, wie viele Karten es sind und wo man steht - damit
   niemand "Weiter" drueckt, ohne zu wissen, wie lang das noch geht. */
.einfuehrung-punkte {
  display: flex;
  justify-content: center;
  gap: var(--s2);
  margin: var(--s5) 0 var(--s4);
}
.einfuehrung-punkte span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--glas-heller);
  transition: background 0.2s ease, transform 0.2s ease;
}
.einfuehrung-punkte span.aktiv { background: var(--accent-hell); transform: scale(1.3); }

.einfuehrung-knoepfe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
}
.einfuehrung-knoepfe .btn { width: 100%; flex: 0 0 auto; }
/* Der kleine Weg unter dem grossen Knopf: "Gleich ausprobieren" bei den
   Funktionen, "Spaeter" beim Konto. Absichtlich leise. */
.einfuehrung-knoepfe .linkbtn { text-decoration: none; font-size: 14px; color: var(--muted); }
.einfuehrung-knoepfe .linkbtn:hover { color: var(--accent-hell); }


/* Auf den Listenbildschirmen (Rechtliches) stehen Ueberschrift und Inhalt
   links - eine mittige Wortmarke darueber haenge in der Luft. */
.listen-screen .wortmarke { align-items: flex-start; }

.start-screen-inner .saved-list { text-align: left; }

.back-btn { margin-bottom: var(--s5); }

/* ---------- Rechtliches ----------
   Der Fusszeilen-Link zu Impressum und Datenschutz. Dezent wie auf jeder
   Webseite, aber bewusst NICHT unlesbar: Die Angaben muessen "leicht
   erkennbar" sein (§ 5 DDG). Wer sie kleiner oder blasser macht als hier,
   erzeugt genau die Angreifbarkeit, die er vermeiden wollte. */
/* Der eine Absatz in Worten ueber Serpa, ganz unten auf dem Start - fuer
   Crawler, aber lesbar. Leise wie der Fuss darunter. */
.ueber-kurz {
  margin: var(--s6) 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
}
.ueber-kurz a { color: var(--muted); }
.ueber-kurz a:hover { color: var(--text); }
.rechts-fuss {
  margin: var(--s5) 0 var(--s3);
  text-align: center;
}
.rechts-fuss .linkbtn {
  font-size: 13px;
  color: var(--muted);
}
.rechts-fuss .linkbtn:hover { color: var(--text); }

/* Der Lauftext der Rechtstexte. Etwas enger gesetzt als der Rest der App,
   weil hier am Stueck gelesen wird statt auf einen Blick erfasst. */
.rechts-text { font-size: 14px; line-height: 1.6; }
.rechts-text p { margin: 0 0 var(--s3); }
.rechts-text .label { margin-top: var(--s4); }
.rechts-text a { color: var(--accent-hell); }

/* Der Alpha-Hinweis ueber den Akkordeons. Als einziger Text dort steht er
   offen da, deshalb bekommt er weniger Gewicht als eine Ueberschrift und
   mehr als eine Fussnote: Nebentextfarbe, aber volle Zeilenhoehe. */
.rechts-alpha {
  margin: 0 0 var(--s5);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.rechts-alpha a { color: var(--accent-hell); }

/* Auf dem Rechtliches-Bildschirm stehen vier Akkordeons untereinander und
   sonst nichts - sie duerfen atmen, statt wie im Bedienfeld des Planers
   dicht zu stapeln. Nur hier: Auf den anderen Bildschirmen sind die
   Akkordeons Teil eines vollen Formulars, dort zaehlt jeder Punkt Hoehe. */
#rechtlichesScreen .accordion { margin: 0 0 var(--s4); }
#rechtlichesScreen .accordion summary { padding: var(--s1) 0; }

/* ---------- Untere Navigationsleiste ----------
   Fest am unteren Rand. Die Bildschirme darueber bekommen ihre Hoehe
   ueber calc(100% - var(--nav-raum)), damit nichts hinter der Leiste
   verschwindet - ein einfaches padding am body wuerde bei Elementen mit
   height:100% nicht helfen, die wuerden unten herausragen.

   env(safe-area-inset-bottom) ist der Streifen, den iPhones unten fuer
   die Wisch-Leiste reservieren. Ohne den Zuschlag saessen die Beschriftungen
   darunter. */
/* Elemente, die nur die Querformat-Kopfleiste braucht (Schriftzug,
   Rechtliches-Link, Konto-Knopf rechts). Im Hochformat unsichtbar.
   BEWUSST eine Klasse und nicht das hidden-Attribut: hidden gewinnt per
   !important (design.css) und liesse sich aus quer.css nicht aufheben. */
.nur-quer { display: none; }

/* Das Gegenstueck: Elemente, die es nur im Hochformat gibt, weil die
   Kopfleiste des Querformats dieselbe Sache schon zeigt (der Schriftzug im
   Garagenkopf). Hier steht bewusst keine Regel - quer.css schaltet sie aus,
   und Sichtbarkeit ist der richtige Grundzustand: Wer die Klasse vergisst
   nachzuziehen, sieht es sofort, statt dass etwas spurlos fehlt. */

.haupt-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  display: flex;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  /* Glas statt matter Flaeche: Auf dem Startbildschirm liegt das Foto
     darunter und scheint verwischt durch, auf den Kartenbildschirmen die
     Karte. Genau davon lebt der Effekt - deshalb hier eine sehr dunkle
     Fuellung statt einer hellen, sonst waere die Leiste ueber heller
     Karte nicht mehr zu lesen. */
  background: var(--feld-glas);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  border-top: 1px solid var(--glas-hell);
  /* Abgerundete Oberkante wie im Inspirationsbild: Die Leiste liest sich
     dadurch als aufgelegte Glasscheibe, nicht als abgeschnittener Rand.
     Der Schatten nach oben loest sie zusaetzlich vom Inhalt. */
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow:
    inset 0 1px 0 var(--glas-heller),
    0 -8px 24px var(--schatten-weich);
}
/* Die Leiste nach unten verlaengert. Als App vom Startbildschirm mit
   durchscheinender Statusleiste rechnet Safari das Fenster auf manchen
   iPhones um die Hoehe der Statusleiste zu kurz - die Leiste sitzt dann
   ein Stueck ueber der Unterkante, und darunter blieb ein grauer Streifen
   stehen (gesehen am 17.09.2026). Dieser Saum fuellt ihn mit derselben
   Flaeche. Sitzt die Leiste richtig, liegt er unsichtbar unter dem Rand. */
.haupt-nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 120px;
  background: var(--feld-glas);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  pointer-events: none;
}

.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font-family: var(--schrift-display);
  /* Wie die Tab-Leiste von iOS: klein, gemischt, ohne Sperrung. Seit dem
     15.09.2026 sind es sechs Eintraege auf 360 Punkte - je 60, und
     "Ausrüstung" braucht bei dieser Groesse rund 56 davon. */
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  transition: color 0.15s ease, transform 0.15s cubic-bezier(0.2,0.8,0.2,1);
}
.nav-tab:active { transform: scale(0.92); }
/* Das Symbol sitzt in einer eigenen Pille. Unangetippt ist sie
   unsichtbar; beim aktiven Eintrag wird sie zur Glasflaeche mit der
   Signalfarbe darin - so zeigt die Leiste, WO man ist, nicht nur mit
   einer anderen Schriftfarbe. Die Pille ist seit dem sechsten Eintrag
   (15.09.2026) schmaler, sonst stiessen zwei aktive Nachbarn aneinander. */
.nav-tab .ic {
  width: 26px;
  height: 26px;
  padding: 5px 11px;
  box-sizing: content-box;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.nav-tab.aktiv { color: var(--accent-hell); }
.nav-tab.aktiv .ic {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  border-color: color-mix(in srgb, var(--accent-hell) 35%, transparent);
  box-shadow: inset 0 1px 0 var(--glas-rand);
}
.nav-tab:hover:not(.aktiv) { color: var(--text); }
.nav-tab:hover:not(.aktiv) .ic { background: var(--glas-hauch); }

/* Solange die Leiste sichtbar ist, halten alle Bildschirme unten Platz frei. */
body.mit-nav { --nav-raum: calc(var(--nav-h) + env(safe-area-inset-bottom)); }

/* ---------- Glas ----------
   Das Grundrezept, aus dem alle Glasflaechen gebaut sind. Vier Schichten
   uebereinander, jede mit einer Aufgabe:

     1. Eine sehr helle, fast durchsichtige Fuellung. Sie faerbt nichts,
        sie hebt nur an.
     2. backdrop-filter: verwischt und saettigt, was DAHINTER liegt. Das
        ist der eigentliche Glaseffekt - ohne etwas dahinter passiert
        nichts, deshalb sitzt Glas hier immer ueber dem Bild.
     3. Zwei innere Linien: oben eine helle Lichtkante, unten eine dunkle.
        Genau das laesst eine Flaeche wie eine Scheibe mit Dicke wirken
        statt wie ein aufgemalter Kasten.
     4. Ein weicher Schlagschatten nach aussen, damit sie abhebt.

   -webkit-backdrop-filter muss mit dabeistehen, sonst bleibt der Effekt
   auf iPhones aus - und das ist die Hauptzielgruppe. */
.glas {
  background: var(--glas-hauch);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glas-rand);
  box-shadow:
    inset 0 1px 0 var(--glas-licht),
    inset 0 -1px 0 var(--schatten-weich),
    0 10px 30px var(--schatten-mittel);
}

/* Runder Glasknopf, z.B. fuer das Konto oben rechts. */
.glas-rund {
  /* position und overflow sind Voraussetzung fuer das Profilbild: .rund-bild
     liegt mit inset:0 darin und wird vom overflow rund beschnitten. */
  position: relative;
  overflow: hidden;
  width: 46px; height: 46px;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text);
  background: var(--glas-hell);
  backdrop-filter: var(--glas-filter);
  -webkit-backdrop-filter: var(--glas-filter);
  border: 1px solid var(--glas-heller);
  box-shadow:
    inset 0 1px 0 var(--glas-licht),
    0 6px 18px var(--schatten-weich);
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.16s ease;
}
.glas-rund:hover { background: var(--glas-rand); }
.glas-rund:active { transform: scale(0.94); }

/* Die blasse Fassung fuer den zweiten Knopf einer Gruppe. Gleich gross,
   nur zurueckhaltender - so bleibt die Trefferflaeche voll erhalten und die
   Rangfolge ist trotzdem auf den ersten Blick da. */
.glas-rund.blass {
  background: var(--glas-hauch);
  border-color: var(--glas-hell);
  color: color-mix(in srgb, white 72%, transparent);
  box-shadow:
    inset 0 1px 0 var(--glas-heller),
    0 4px 12px var(--schatten-weich);
}
.glas-rund.blass:hover { background: var(--glas-hell); color: var(--text); }

/* ---------- Kopfzeile ----------
   Der runde Knopf oben rechts (Konto). Er darf nie
   schrumpfen - lieber bricht der Schriftzug daneben um, als dass eine
   Trefferflaeche kleiner wird. */
.kopf-knoepfe {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s2);
}

/* Bildschirme mit einer Liste statt eines Formulars: Inhalt oben statt
   senkrecht zentriert, und ueber die volle Breite. Ein Formular in der
   Mitte wirkt ruhig, eine Liste in der Mitte wirkt verloren. */
.listen-screen { align-items: stretch; justify-content: flex-start; text-align: left; overflow-y: auto; }
/* Touren, Reifen und seit dem 14.09.2026 auch die Stats sind
   Daten-Bildschirme - das Foto dahinter macht sie nur unruhig, und
   Friedrich will ueberall denselben dunklen Grund. Rechtliches und Konto
   behalten das Foto. */
/* Auch die Listenbildschirme bekommen den Lichtkegel (Grundsatz 4 in
   design.css): Glas ueber blanker Flaeche bleibt tot. */
#tourenScreen, #reifenScreen, #statsScreen, #freundeScreen, #einstellungenScreen { background: var(--start-licht), var(--bg); }
/* Die Ausruestung und die Merkliste: Produktfotos auf weissen Karten
   ueber dem verwischten Werkstattfoto wurden unruhig. Also Schwarz mit
   einem leisen Lichtkegel von oben - das gibt den Glaskanten etwas zu
   fangen, ohne mit den Fotos zu streiten. */
#shopScreen, #merklisteScreen, #reiseScreen { background: var(--start-licht), var(--bg); }
/* Der Planer-Einstieg: Das Foto ist der GRUND des ganzen Bildschirms, nicht
   ein Band darueber. Die Karten liegen als Glas auf der Strasse, das
   Motorrad steht ueber ihnen; nach unten laeuft das Bild in die
   Grundflaeche aus, damit die Leiste auf Ruhe steht. */
#planerWahlScreen {
  background:
    linear-gradient(to bottom, transparent 42%, var(--bg) 88%),
    url("../img/planer-kopf.webp") 62% 35% / cover no-repeat,
    var(--bg);
}
.listen-screen .start-screen-inner {
  width: 100%;
  /* Unten deutlich mehr als oben: Der Bildschirm endet an der Unterkante
     der Leiste, und ohne diesen Abstand klebt die letzte Karte daran.
     Gilt fuer alle Listenbildschirme, weil es ueberall dasselbe Problem
     war - Touren, Ausruestung, Merkliste, Reise. */
  padding: var(--s5) var(--s4) var(--s7);
  padding-top: max(var(--s5), env(safe-area-inset-top) + var(--s3));
  /* Und ohne diese zwei Zeilen waere der Abstand unten wirkungslos:
     .listen-screen streckt seine Kinder auf Fensterhoehe (align-items:
     stretch). Der Kasten ist dann genau so hoch wie das Fenster, sein
     Inhalt laeuft darueber hinaus, und der Innenabstand liegt irgendwo
     mitten im Gescrollten statt am Ende. Mit flex-start waechst der
     Kasten mit seinem Inhalt, mit min-height fuellt er trotzdem das
     Fenster, wenn wenig drinsteht. Dieselbe Loesung stand fuer das
     Querformat schon in quer.css - jetzt gilt sie ueberall. */
  align-self: flex-start;
  min-height: 100%;
}
.listen-screen .back-btn { flex: 0 0 auto; align-self: flex-start; }

/* ---------- Konto ----------
   Ein Knopf, der wie ein Textlink aussieht. Gebraucht für die kleinen
   Nebenwege ("Passwort vergessen", "Abmelden"), die keinen vollwertigen
   Knopf verdienen, aber trotzdem anklickbar sein müssen. Bewusst ein
   <button> und kein <a>, weil nichts verlinkt wird. */
.linkbtn {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent-hell);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.linkbtn:hover { color: var(--text); }

/* ---------- Profil ----------
   Das Konto sitzt hinter dem Profilsymbol oben rechts. */

/* Das Profilbild IM runden Knopf oben rechts. Es fuellt ihn ganz aus, das
   Symbol darunter tritt dafuer zurueck (konto.js schaltet um). */
.rund-bild {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.profil-kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s5);
}
.profil-kopf h2 { margin: 0; }
.profil-kopf .sub { margin: 0; }

/* Das grosse runde Profilbild. Es ist ein KNOPF, kein Bild: Ein Druck
   darauf waehlt ein neues. Das Kamerazeichen an der Ecke sagt das ohne
   Worte - und es ist der einzige Weg, spaeter noch ein Bild nachzureichen,
   denn beim Anlegen des Kontos ist es freiwillig. */
.profil-bild {
  position: relative;
  width: 96px; height: 96px;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--glas-rand);
  box-shadow:
    inset 0 1px 0 var(--glas-heller),
    0 8px 22px var(--schatten-mittel);
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.profil-bild:active { transform: scale(0.96); }
.profil-bild img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.profil-platzhalter { width: 44px; height: 44px; }

/* Das Kamerazeichen sitzt halb in der Kante des Bildes, so wie das
   Abzeichen am Hinweis in der Garage - dadurch gehoert es dazu, statt
   danebenzuschweben. */
.profil-bild-marke {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--accent-ink);
  background: var(--accent);
  border: 2px solid var(--bg);
}

.profil-name-aendern { margin-bottom: var(--s4); }
#profilNameFeld { margin-top: var(--s2); text-align: left; }
#profilNameFeld input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--glas-rand);
  background: var(--glas-hell);
  color: var(--text);
  font: inherit;
  box-shadow:
    inset 0 1px 0 var(--glas-rand),
    inset 0 2px 5px var(--schatten-hauch);
}
#profilNameFeld input:focus { outline: none; border-color: var(--accent-hell); }
#profilNameFeld .btn { margin-top: var(--s2); }

.profil-liste {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

/* Die Rueckmeldung unter einem Namensfeld: gruen wenn frei, rot wenn
   vergeben. Gruen ist hier ausnahmsweise erlaubt - es ist keine Deko,
   sondern die Antwort auf eine Ja-Nein-Frage. */
.namen-hinweis {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
}
.namen-hinweis.gut { color: var(--good); }
.namen-hinweis.fehler { color: var(--danger); }

.freiwillig {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

/* Der Knopf zum Bildaussuchen im Anmeldeformular: kleine runde Vorschau
   plus Beschriftung. Als Zeile und nicht als grosse Flaeche - das Bild ist
   freiwillig und soll nicht wichtiger aussehen als das Passwort. */
.bild-waehlen {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2);
  margin-bottom: 6px;
  border-radius: var(--r-md);
  border: 1px solid var(--glas-rand);
  background: var(--glas-hell);
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.bild-waehlen:hover { color: var(--text); }
.bild-waehlen-kreis {
  position: relative;
  width: 42px; height: 42px;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  overflow: hidden;
}
.bild-waehlen-kreis img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.konto-formular {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  margin-bottom: 14px;
}
.konto-formular label { font-size: 12px; color: var(--muted); }
.konto-formular input {
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--glas-rand);
  background: var(--glas-hell);
  color: var(--text);
  font: inherit;
  margin-bottom: 6px;
  box-shadow:
    inset 0 1px 0 var(--glas-rand),
    inset 0 2px 5px var(--schatten-hauch);
}
.konto-formular input:focus { outline: none; border-color: var(--accent-hell); }
.konto-formular .btn { margin-top: 6px; padding: 13px; font-size: 16px; }

/* Die Felder fuers Anlegen stecken in einem eigenen Kasten, damit sie sich
   zusammen aus- und einblenden lassen. Der Kasten braucht die Spaltenordnung
   noch einmal: Als EIN Flex-Kind des Formulars gibt er sie nicht an seine
   eigenen Kinder weiter, und Beschriftung und Feld stuenden nebeneinander. */
#kontoNeuFelder {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Der Zustimmungshaken. Der Vorsatz .konto-formular steht davor, weil
   dieselbe Datei ein paar Zeilen hoeher "input { padding: 12px 14px }" fuer
   die Textfelder setzt - ohne ihn waere das Kaestchen so gross wie ein
   Eingabefeld. */
.zustimmung {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin: var(--s3) 0 0;
  padding: var(--s3);
  border-radius: var(--r-sm);
  background: var(--glas-hauch);
  border: 1px solid var(--glas-hell);
}
.konto-formular .zustimmung input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  box-shadow: none;
  accent-color: var(--accent);
  cursor: pointer;
}
/* Beschriftung und Knopf stehen in EINEM Absatz und sollen wie ein Satz
   lesen. Deshalb bekommt das <label> hier die Textfarbe zurueck, die
   .konto-formular label auf Grau setzt - grau waere hier ein Nebentext, und
   das ist es nicht. */
.zustimmung-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.konto-formular .zustimmung-text label {
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.zustimmung-text .linkbtn { font-size: 13px; }

.konto-meldung {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.konto-meldung.fehler { color: var(--danger); }

.konto-wechsel { margin-top: 22px; font-size: 13px; color: var(--muted); }

/* --- Konto löschen --------------------------------------------------------
   Rot ist hier keine Deko, sondern die einzige Stelle in der App, an der
   die Farbe eine Warnung ist. Deshalb bekommt sie nur der eine Knopf, der
   wirklich etwas unwiderruflich macht - würde noch etwas anderes daneben
   rot leuchten, wäre die Warnung nichts mehr wert. */

.linkbtn.gefahr { color: var(--danger); }
.linkbtn.gefahr:hover { color: var(--text); }

/* Derselbe Aufbau wie .btn, nur in Rot: gleicher Verlauf von hell nach
   dunkel, gleiche Lichtkante. Der Knopf soll sich anfühlen wie die
   anderen und sich nur in der Farbe unterscheiden. */
.btn.gefahr {
  background: linear-gradient(to bottom, var(--danger-glanz), var(--danger) 55%, var(--danger-tief));
  color: var(--danger-ink);
  box-shadow:
    inset 0 1px 0 var(--glas-licht),
    inset 0 -1px 0 var(--schatten-hauch),
    0 4px 14px color-mix(in srgb, var(--danger) 28%, transparent);
}
.btn.gefahr:hover { background: var(--danger-tief); color: var(--accent-ink); }

.loeschen-ueberschrift {
  margin: 18px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}

/* Die Aufzählung dessen, was verschwindet. Linksbündig und mit Punkten,
   damit sie als Liste gelesen wird und nicht als Fließtext überflogen. */
.loeschen-liste {
  margin: 0 0 16px;
  padding-left: 20px;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}
.loeschen-liste strong { color: var(--text); font-weight: 600; }

/* Kurzer Hinweis über den Auswertungszahlen einer sehr kurzen Ausfahrt.
   Gedämpft und nicht rot: Es ist kein Fehler, nur eine Einordnung. */
.kurz-hinweis {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--glas-hell);
  background: var(--glas-hauch);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: inset 0 1px 0 var(--glas-rand);
}

/* ---------- Routenplaner: zwei Spalten, Bedienfeld links, Karte rechts ---------- */
.app-layout {
  height: calc(100% - var(--nav-raum));
  display: flex;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.back-to-start {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}
.back-to-start:hover { border-color: var(--muted); color: var(--text); }

/* Griff zum Aufziehen des Bedienfelds - nur auf schmalen Bildschirmen
   sichtbar (display:flex kommt erst aus der Media Query weiter unten).
   Bewusst ein eigenes Element AUSSERHALB des scrollenden Bereichs
   (.panel-scroll), nicht per position:sticky darin - diese Kombination
   (sticky + abgerundete Ecken + Scroll auf demselben Element) fuehrt in
   Safari zu doppelt gezeichneten Inhalten beim Scrollen. */
.panel-grip {
  display: none;
  width: 100%;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  border: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;   /* verhindert, dass iOS beim Ziehen gleichzeitig die Seite mitscrollt */
}
.panel-grip:active { cursor: grabbing; }
.panel-grip-strich {
  display: block;
  width: 44px; height: 5px;
  border-radius: var(--r-pill);
  /* Hell statt dunkel: Auf einer Glasscheibe ist der Griff eine Auflage
     aus mattem Glas, keine eingefraeste Rille. Deutlich genug, dass man
     ihn als Griff erkennt - er ist die einzige Stelle, an der man die
     Karte groesser ziehen kann, und wer ihn uebersieht, findet die
     Funktion nie. */
  background: color-mix(in srgb, white 55%, transparent);
  box-shadow: 0 1px 3px var(--schatten-mittel);
}
.panel-grip:hover .panel-grip-strich { background: var(--muted); }

/* ---------- Bedienfeld ---------- */
#panel {
  width: var(--spalte-panel);
  flex: 0 0 var(--spalte-panel);
  display: flex;
  flex-direction: column;
  /* Glas ueber der Karte. Die Fuellung ist dunkel und nicht hell: darunter
     liegt eine helle Landkarte, ein weisser Schleier waere unlesbar. */
  background: var(--feld-glas);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  border-right: 1px solid var(--glas-hell);
  box-shadow: inset 1px 0 0 var(--glas-hell);
}

/* Der eigentliche scrollende Inhalt - getrennt vom Griff, siehe oben. */
.panel-scroll {
  flex: 1;
  min-height: 0;   /* noetig, damit dieser Bereich innerhalb der Flex-Spalte ueberhaupt scrollen kann */
  overflow-y: auto;
  padding: 18px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Der Schriftzug im Planer-Kopf, im Hochformat der einzige Auftritt der
   Marke im Planer (siehe ENTSCHEIDUNGEN.md, 27.08.2026).

   Die Hoehe kommt aus der Breite: Das Logo ist 5,16-mal so breit wie hoch,
   140 Punkte ergeben also rund 27 - dasselbe Mass, auf das der Kopf
   ausgelegt ist. */
.wortmarke-kopf {
  /* Der Abstand nach unten steht hier und nicht an .sub darunter: Die Klasse
     .sub traegt an acht weiteren Stellen Text, die von dieser Zeile nichts
     wissen. */
  margin: 0 0 var(--s1);
}
.wortmarke-kopf .wortmarke-bild { width: 140px; }
.sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

.block h2 {
  margin: 0 0 var(--s2);
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
}

/* ---------- Einklappbare Abschnitte (Optionen, Sehenswertes, ...) ----------
   <details>/<summary> ist ein eingebautes HTML-Element für genau diesen
   Zweck - auf-/zuklappen - ganz ohne eigenes JavaScript. Wir entfernen nur
   das Standard-Dreieck davor und ersetzen es durch einen eigenen Pfeil,
   damit es zum Rest des Bedienfelds passt. */
/* Jeder Abschnitt ist eine eigene kleine Glasplatte, wie die Kartenreihe
   im Inspirationsbild - vorher waren es nackte Zeilen im Bedienfeld. */
.accordion {
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--glas-hell);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--glas-hell);
  box-shadow:
    inset 0 1px 0 var(--glas-rand),
    inset 0 -1px 0 var(--schatten-hauch);
}
.accordion summary {
  margin: 0;
  font-family: var(--schrift-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  list-style: none;             /* Chrome/Safari: eigenes Dreieck ausblenden */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.accordion summary::-webkit-details-marker { display: none; } /* Chrome/Safari */
.accordion summary::marker { content: ""; }                    /* Firefox */
.accordion summary::after {
  content: "▸";
  color: var(--muted);
  font-size: 11px;
  transition: transform 0.15s ease;
}
.accordion[open] summary::after { transform: rotate(90deg); }
.accordion summary:hover { color: var(--text); }
.accordion-body { margin-top: 10px; }

.hint  { color: var(--muted); font-size: 12px; margin: 8px 0 0; line-height: 1.45; }
.tiny  { color: var(--muted); opacity: 0.75; font-size: 11px; line-height: 1.5; }
.tiny a, .hint a { color: var(--muted); }

/* ---------- Ortssuche ---------- */
.search-wrap { position: relative; }

/* Die drei Suchfelder: Start, Zwischenziel, Ziel. Beschriftung klein
   darueber, Felder mit Luft dazwischen. Das gesperrte Zielfeld der
   Rundtour tritt sichtbar zurueck, statt nur nicht zu reagieren. */
.such-feld { margin-bottom: var(--s3); }
.such-feld .label { display: block; margin-bottom: 6px; }
.such-feld .search-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Als Pille, wie im Inspirationsbild - ein Suchfeld ist das rundeste
   Element jeder modernen Oberflaeche. Die Fuellung ist helles Glas statt
   dunkler Vertiefung: Das Feld liegt auf einer Glasplatte, und ein
   dunkles Loch darin saehe aus wie hineingebohrt. */
.search-input {
  width: 100%;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glas-rand);
  background: var(--glas-hell);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 15px;
  box-shadow:
    inset 0 1px 0 var(--glas-rand),
    inset 0 2px 5px var(--schatten-hauch);
}
.search-input:focus { outline: none; border-color: var(--accent-hell); }
.richtung-select { margin-top: 8px; cursor: pointer; }
/* Rundtour nach Zeit: die vier Chips, darunter "zurueck um" mit dem
   Zeitfeld daneben. Das Kilometerfeld folgt und zeigt, was daraus wird. */
.rundtour-zeit { margin: 6px 0 var(--s3); }
.rundtour-zeit .seg { padding: 7px 0; font-size: 13px; }
.rundtour-zurueck { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.rundtour-zurueck label { flex: 0 0 auto; font-size: 13px; color: var(--muted); }
.rundtour-zurueck input { flex: 1; min-width: 0; margin: 0; }
#roundtripBlock > .label { display: block; margin-bottom: 6px; }
.search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--schatten-voll);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-md);
  list-style: none;
  margin: 0;
  padding: 4px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 500;
  box-shadow: inset 0 1px 0 var(--glas-heller), 0 12px 30px var(--schatten-mittel);
}
.search-results li {
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.35;
}
.search-results li:hover { background: var(--surface-2); }
.search-results li.empty { cursor: default; color: var(--muted); }
.search-results li.empty:hover { background: transparent; }
.search-results li.standort-option {
  display: flex; align-items: center; gap: var(--s2);
  color: var(--gps);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 4px;
}
.search-results li.standort-option:hover { background: color-mix(in srgb, var(--gps) 12%, transparent); }

/* ---------- Umschalter (Planungsart) ---------- */
/* Als PILLE: Die Rinne ist dunkles Glas, das aktive Segment eine hellere
   Glasscheibe darin,
   und die Signalfarbe steckt in Schrift und Symbol des aktiven Segments -
   nicht in einer gefuellten Flaeche. So bleibt die Farbe ein Zeichen und
   wird keine Deko. */
/* Der Umschalter ist seit dem 17.09.2026 dieselbe Scheibe wie eine Karte:
   Glasfuellung, Kante, Lichtkante oben. Der aktive Reiter ist eine
   Glaspille mit dem Blau darunter - dieselbe Sprache wie der Knopf. */
.segmented {
  display: flex;
  background: var(--glas-hell);
  border: 1px solid var(--karten-rand);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 4px;
  box-shadow: inset 0 1px 0 var(--glas-licht), 0 4px 14px var(--schatten-weich);
}
.seg {
  flex: 1;
  padding: 9px 0;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-family: var(--schrift-display);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease;
}
.seg.active {
  background:
    linear-gradient(to bottom, var(--glas-heller), var(--glas-hauch)),
    color-mix(in srgb, var(--accent) 42%, transparent);
  border-color: var(--glas-licht);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 var(--glas-licht),
    0 0 0 1px color-mix(in srgb, var(--accent-hell) 40%, transparent),
    0 3px 10px var(--schatten-weich);
}

/* ---------- Kurvigkeits-Regler ---------- */
/* -webkit-appearance/appearance entfernen die Browser-Standardoptik, damit
   wir Schiene und Griff selbst gestalten können - keine Raster-Markierungen,
   der Regler ist stufenlos bedienbar. */
.slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--skala-wenig), var(--skala-mittel), var(--skala-viel));
  outline: none;
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--text);
  border: 3px solid var(--accent-hell);
  cursor: pointer;
  box-shadow: 0 1px 4px var(--schatten-mittel);
}
.slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--text);
  border: 3px solid var(--accent-hell);
  cursor: pointer;
  box-shadow: 0 1px 4px var(--schatten-mittel);
}
.slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: transparent; /* Farbe kommt schon vom Element selbst */
}

/* ---------- Optionen (Checkboxen) ---------- */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  font-size: 13px;
  cursor: pointer;
}
.checkbox-row input[type="checkbox"] {
  width: 17px; height: 17px;
  accent-color: var(--accent); /* faerbt die native Checkbox in der Signalfarbe ein */
  cursor: pointer;
}

/* ---------- Buttons ---------- */
.row { display: flex; gap: 8px; margin-top: 10px; }
.btn {
  flex: 1;
  /* inline-flex mit gap: Knoepfe mit Symbol brauchen Abstand zwischen
     Zeichen und Schrift, und beides soll mittig stehen. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 12px 18px;
  border: 1px solid var(--glas-heller);
  border-radius: var(--r-pill);
  /* DER KNOPF IST EINE GLASPILLE (seit dem 17.09.2026, vorher ein blau
     gefuellter Knopf): eine helle Scheibe mit Lichtkante oben, einem
     Hauch der Signalfarbe darunter und einem weichen Schein am Rand.
     Weisse Schrift, kein Farbfeld - so wollte Friedrich es, nach dem
     Vorbild seines Entwurfs "Einladen". Was ihn vom Glas-Knopf (.ghost)
     unterscheidet: die hellere Kante, der Schein und das Blau darunter.
     Der Schein ist ein Verlauf, aber einer, der Glas einen Untergrund
     gibt (Grundsatz 1 in design.css, dritter Fall). */
  background:
    linear-gradient(to bottom, var(--glas-heller), var(--glas-hauch)),
    color-mix(in srgb, var(--accent) 42%, transparent);
  backdrop-filter: var(--glas-filter);
  -webkit-backdrop-filter: var(--glas-filter);
  border-color: var(--glas-licht);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 var(--glas-licht),
    inset 0 -1px 0 var(--schatten-hauch),
    0 0 0 1px color-mix(in srgb, var(--accent-hell) 45%, transparent),
    0 0 22px color-mix(in srgb, var(--accent-hell) 35%, transparent),
    0 8px 22px var(--schatten-weich);
  transition: filter 0.12s ease, transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: scale(0.97); }
/* Ein Symbol im Knopf sitzt in einer eigenen kleinen Glasscheibe - das
   Plus in "Einladen" aus dem Entwurf. Nur das erste Symbol; ein Pfeil am
   Ende bleibt, was er ist. */
.btn > .ic:first-child {
  width: 30px; height: 30px;
  padding: 6px;
  margin-left: -6px;
  border-radius: 50%;
  border: 1px solid var(--glas-rand);
  background: var(--glas-hell);
  box-shadow: inset 0 1px 0 var(--glas-licht);
}
.btn.klein > .ic:first-child { width: 24px; height: 24px; padding: 4px; margin-left: -4px; }
.btn.ghost {
  background: var(--glas-hauch);
  border-color: var(--glas-rand);
  color: var(--text);
  font-weight: 500;
  box-shadow:
    inset 0 1px 0 var(--glas-heller),
    0 3px 10px var(--schatten-weich);
}
.btn.ghost:hover { border-color: var(--muted); background: var(--surface-2); color: var(--text); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.klick-modus-btn { width: 100%; margin-top: 8px; font-size: 12.5px; }
.klick-modus-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

/* ---------- Listen ---------- */
.badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--glas-heller);
  border: 1px solid var(--glas-hell);
  color: var(--text);
  font-size: 11px;
  text-align: center;
}
/* Das Abzeichen an jeder Zeile, an der wir mitverdienen - ueberall
   dasselbe: in der Garage, in den Listen, auf der Produktseite. Es ist
   mit Absicht ruhig gehalten und trotzdem lesbar: Eine Kennzeichnung,
   die niemand bemerkt, ist keine; eine, die schreit, macht die Liste
   unbrauchbar. Bis zum 03.09.2026 gab es drei Fassungen davon, und in
   der Garage sahen die beiden Leisten verschieden aus. */
.badge.anzeige {
  font-family: var(--schrift-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border-color: var(--glas-rand);
  vertical-align: middle;
}

.wp-list, .saved-list { list-style: none; margin: 0; padding: 0; }

.wp-list li, .saved-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  margin-bottom: 6px;
  font-size: 13px;
  background: var(--glas-hauch);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--glas-hell);
  box-shadow:
    inset 0 1px 0 var(--glas-heller),
    inset 0 -1px 0 var(--schatten-hauch);
  transition: background 0.14s ease, transform 0.14s cubic-bezier(0.2,0.8,0.2,1);
}
.saved-list li:active { transform: scale(0.985); }
.wp-list li.empty, .saved-list li.empty {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
  color: var(--muted);
  font-size: 12px;
  padding: 4px 0;
}
.wp-num {
  font-family: var(--schrift-display);
  font-variant-numeric: tabular-nums;
  width: 20px; height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.wp-coord {
  flex: 1;
  min-width: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Die drei Knoepfe je Wegpunkt: hoch, runter, weg. Sie sitzen rechts und
   halten ihren Platz, auch wenn einer davon unbenutzbar ist - eine Zeile,
   die ploetzlich schmaler wird, laesst die ganze Liste zappeln.

   36 Punkte Kantenlaenge sind kein Zufall: Das ist die Groesse, die auch
   mit Handschuhen noch trifft. Die Zeichen darin sind kleiner, der Rest
   ist Trefferflaeche. */
.wp-knoepfe {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
}
.wp-knopf {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.wp-knopf:hover { background: var(--glas-hell); color: var(--text); }
.wp-knopf:active { background: var(--glas-heller); }
.wp-weg:hover { color: var(--danger); }
/* Unbenutzbar heisst hier blass, nicht weg: Der Platz bleibt, damit die
   Zeilen untereinander stehen. */
.wp-knopf:disabled { opacity: 0.22; cursor: default; background: transparent; }

/* Die ganze Zeile laesst sich anfassen (Maus: ziehen, Finger: halten und
   ziehen - die Unterscheidung trifft beginneWegpunktZiehen in app.js).
   Hier steht bewusst KEIN touch-action: Die Schublade soll ueber der Liste
   weiter scrollen; das Scrollen unterbindet waehrend eines laufenden Zugs
   ein touchmove-Zuhoerer in app.js.

   user-select, damit sich beim Ziehen mit der Maus nicht die halbe Zeile
   blau faerbt; touch-callout, damit iOS beim Halten kein
   Kopieren-Menue aufklappt - das Halten IST hier der Befehl. */
.wp-list li[data-punkt] {
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Die gegriffene Zeile hebt sich ab und folgt dem Finger OHNE Nachlauf -
   deshalb hier ausdruecklich keine Uebergangszeit. Die anderen Zeilen
   behalten ihre und ruecken dadurch sanft zur Seite. */
.wp-list li.wp-gegriffen {
  position: relative;
  z-index: 2;
  transition: none;
  background: var(--glas-hell);
  border-color: var(--glas-rand);
  box-shadow: 0 10px 24px var(--schatten-mittel);
}

.saved-list li { cursor: pointer; justify-content: space-between; align-items: center; gap: var(--s3); }
.saved-list li:hover { background: var(--glas-hell); }
.saved-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.saved-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
/* Auf dem Bildschirm "Touren" ist die eigene Tour eine Karte, kein
   Listeneintrag - der Name traegt dort dieselbe Groesse wie bei einer
   geteilten Tour. Im schmalen Bedienfeld des Planers bleibt er klein. */
.tour-karte .saved-name { font-size: 17px; font-weight: 600; }
.saved-marke { flex: 0 0 auto; display: flex; color: var(--accent-hell); }
.saved-meta i { font-style: normal; opacity: 0.45; margin: 0 2px; }
.saved-meta {
  color: var(--muted);
  font-family: var(--schrift-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
.del {
  border: 0; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px;
}
.del:hover { color: var(--danger); }

/* ---------- Das Vorschaubild einer Tour ----------
   Ein echter Kartenausschnitt mit der Route darauf, oben auf jeder
   Tourenkarte. Welche Kacheln und welcher Zoom, rechnet vorschau.js aus;
   app.js setzt sie als <image> in ein <svg>.

   Der Rahmen ist flacher als 16:9 (640 zu 280): Das Bild soll den Beitrag
   anfuehren, nicht ausfuellen. Es sitzt buendig in der Karte, ohne eigenen
   Rand, mit den Rundungen nur oben - wie ein Bild in einem Beitrag. */
.tour-vorschau {
  position: relative;
  display: block;
  aspect-ratio: 640 / 280;
  margin: calc(-1 * var(--s3)) calc(-1 * var(--s3)) var(--s3);
  border-radius: var(--r-md) var(--r-md) 0 0;
  overflow: hidden;
  /* Der Grund hinter den Kacheln: sichtbar nur, solange sie laden - und
     als Flaeche, falls sie es nicht tun. Die Route liegt dann trotzdem da. */
  background: var(--raum-dunkel);
  border-bottom: 1px solid var(--glas-hell);
}
.tour-vorschau svg { display: block; width: 100%; height: 100%; }

/* Die Kartenkacheln werden in die dunkle Oberflaeche eingebettet: etwas
   dunkler, etwas entfaerbt, damit die Karte Auskunft bleibt und nicht als
   grelle weisse Flaeche den Feed zerschneidet. Die Werte sind von Hand
   abgestimmt - hell genug, dass man Waelder, Orte und Strassen erkennt. */
.vorschau-karte {
  filter: grayscale(0.35) brightness(0.72) contrast(1.02);
}

/* Die Route in zwei Strichen uebereinander: erst ein heller Saum, dann das
   Blau. Der Saum loest die Linie von der Karte - Strassen sind dort selbst
   farbig, und Blau auf Blau (Fluesse!) braucht eine Kante. */
.vorschau-saum {
  fill: none;
  stroke: var(--text);
  stroke-width: 7.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.vorschau-linie {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Der Anfangspunkt. Er beantwortet die Frage, in welche Richtung die Runde
   laeuft - bei einem geschlossenen Kringel sonst nicht zu erkennen. */
.vorschau-start {
  fill: var(--accent-glanz);
  stroke: var(--accent-ink);
  stroke-width: 2;
}

/* Die Namensnennung, unten rechts im Bild. OpenStreetMap verlangt sie
   ueberall, wo seine Karten zu sehen sind - dieselbe Pflicht, die auf der
   grossen Karte die Leaflet-Ecke erfuellt. */
.vorschau-osm {
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-size: 9px;
  color: var(--muted);
  text-shadow: 0 1px 2px var(--schatten-stark);
  pointer-events: none;
}

/* Eine eigene Tour auf dem Bildschirm "Touren" ist eine KARTE in der
   Standardform - dieselbe wie der Reisetag, die Kasse und die Mitfahrer.
   Die vier Bausteine und ihre Begruendung stehen in design.css bei
   Grundsatz 4. Hier steht nur, was sie von einer Listenzeile trennt.

   Der Vorsatz .saved-list ist noetig und kein Zierrat: Weiter oben steht
   ".saved-list li { display: flex }" fuer die schmale Zeile im Planer.
   Ohne den Vorsatz gewaenne diese Regel, und das Vorschaubild saesse links
   NEBEN dem Text statt darueber. */
.saved-list li.tour-karte {
  display: block;
  padding: var(--s4);
  border-radius: var(--r-xl);
  margin-bottom: var(--s4);
}
.tour-karte-zeile {
  display: flex;
  align-items: center;
  gap: 9px;
}
/* Das Bild fuehrt die Karte an und laeuft bis an ihre Kante. Die Rundung
   oben ist die der Karte abzueglich ihrer Randlinie - dieselbe Rechnung
   wie bei der Tageskarte im Reiseplaner. */
.saved-list li.tour-karte .tour-vorschau,
.geteilt .tour-vorschau {
  margin: calc(-1 * var(--s4)) calc(-1 * var(--s4)) var(--s3);
  border-radius: calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px) 0 0;
}
/* Das Datum steht rechts im Kopf, wo bei anderen Karten der Link sitzt. */
.karte-datum {
  margin-left: auto;
  font-family: var(--schrift-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}
/* Das Werkzeug einer Karte steht rechts, in EINEM Halter.

   Der Halter ist der Punkt: Ohne ihn braucht jeder Knopf sein eigenes
   "margin-left: auto", und drei davon verteilen sich dann ueber die
   Zeile, statt beieinander zu stehen. Genau so sass der Teilen-Knopf beim
   ersten Anlauf mitten im Kopf.

   Und sie sind RUNDE GLASKNOEPFE, keine blassen Zeichen: Was man antippen
   soll, muss aussehen wie etwas, das man antippen kann. Als graue Symbole
   am Rand hat sie niemand gefunden. */
.karte-werkzeuge {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: 0 0 auto;
}
.karte-werkzeug { width: 38px; height: 38px; }
.karte-werkzeug .ic { width: 19px; height: 19px; }
/* Der Globus sagt einen ZUSTAND: blau heisst, die Tour steht oeffentlich.
   Die beiden anderen sind Handlungen und bleiben still, bis man sie
   beruehrt. */
.karte-werkzeug.oeffentlich {
  color: var(--accent-hell);
  border-color: color-mix(in srgb, var(--accent-hell) 50%, transparent);
}
.karte-werkzeug.gefahr:hover { color: var(--danger-glanz); }
.karte.tour-karte .widget-name { display: flex; align-items: center; gap: 8px; }
.karte.tour-karte:active { transform: scale(0.99); }

/* ---------- Touren: "Meine" und "Entdecken" ----------
   Der Umschalter ist derselbe .segmented wie im Planer. Er steht direkt
   unter der Ueberschrift, damit auf einen Blick klar ist, dass dieser
   Bildschirm zwei Inhalte hat - und nicht einen mit einer Zusatzleiste. */
/* Die Leiste ueber den Touren: links der Umschalter fuer das Eigene
   (Touren, Reisen), rechts ganz fuer sich der Reiter "Entdecken" mit dem
   Weltsymbol - derselbe Globus, der an einer Tour sagt, dass sie
   oeffentlich ist. Eigenes und die Welt sind zwei Scheiben, keine. */
.touren-leiste { display: flex; align-items: stretch; gap: var(--s2); margin: 0 0 var(--s4); }
.touren-leiste .touren-umschalter { flex: 1; margin: 0; }
.entdecken-reiter {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--karten-rand);
  background: var(--glas-hell);
  box-shadow: inset 0 1px 0 var(--glas-licht), 0 4px 14px var(--schatten-weich);
}
.entdecken-reiter .ic { width: 15px; height: 15px; }

/* Der Satz ueber dem Entdecken-Teil. Er steht bewusst NUR dort: In der
   eigenen Liste hat er nichts zu suchen, dort weiss man schon, was man hat. */
.mitmach-satz {
  margin: 0 0 var(--s4);
  padding: var(--s3);
  border-radius: var(--r-sm);
  background: var(--glas-hauch);
  border: 1px solid var(--glas-hell);
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.entdecken-zeile { align-items: center; }
/* Der Umkreis nimmt nur die Breite, die er braucht - "Mein Standort"
   daneben ist der laengere Text und soll den Rest bekommen. */
.entdecken-umkreis { flex: 0 0 auto; width: auto; }

/* Der kleine Knopf in der eigenen Liste, der eine Tour oeffentlich stellt.
   Grau heisst privat, blau heisst oeffentlich - dieselbe Sprache wie
   ueberall sonst: Was leuchtet, ist an. */
.teilen-knopf {
  flex: 0 0 auto;
  display: flex;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0 2px;
}
.teilen-knopf:hover { color: var(--text); }
.teilen-knopf.oeffentlich { color: var(--accent-hell); }

/* ---------- Eine geteilte Tour ----------
   Mehr Zeilen als eine eigene Tour: Es steht ein Mensch dahinter, und der
   gehoert nach oben. Deshalb keine Zeile wie in .saved-list, sondern eine
   Karte - Kopf mit Name und Bild, dann die Tour, dann die Zahlen. */
.geteilt-liste { list-style: none; margin: var(--s4) 0 0; padding: 0; }

/* Eine fremde Tour traegt seit dem 10.09.2026 .karte und damit dieselbe
   Form wie die eigene. Hier steht nur, was sie unterscheidet: im Kopf
   das Gesicht dessen, der sie geteilt hat, statt eines Abzeichens. */
.geteilt {
  display: block;
  margin-bottom: var(--s4);
  border-radius: var(--r-xl);
}

.geteilt-kopf { gap: var(--s2); }
/* Wo die Tour liegt - jetzt eine eigene Zeile im Koerper statt eines
   Anhaengsels im Kopf. Dort drueckte sie den Teilen-Knopf weg, sobald
   der Ortsname laenger als ein Wort war. */
.widget-koerper .geteilt-weg { margin: 0; }

/* Bild und Ersatzbuchstabe teilen sich die Masse, damit die Kopfzeile
   gleich hoch bleibt, ob jemand ein Profilbild hat oder nicht. */
.geteilt-bild, .geteilt-buchstabe {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--glas-rand);
}
.geteilt-bild { object-fit: cover; background: var(--surface-2); }
.geteilt-buchstabe {
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--schrift-display);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.geteilt-nutzer {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
}
/* Gegend und Entfernung. Sie beantworten die erste Frage beim
   Ueberfliegen - "wo ist das, und komme ich da hin?" - und stehen deshalb
   im Metallton und nicht im Grau des Nebentextes. */
.geteilt-weg {
  flex: 0 0 auto;
  color: var(--metall);
  font-family: var(--schrift-display);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Der Tourname traegt die Anzeigeschrift, wie jede Ueberschrift im Haus.
   Er ist das, wonach man in der Liste sucht. */
.geteilt-name {
  margin: 0 0 6px;
  font-family: var(--schrift-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--metall-glanz);
}

/* Das Motorrad-Zeichen steht IN der Zeile mit dem Namen. .saved-marke ist
   ein Flex-Kasten und damit ein eigener Block - in einer Listenzeile ist das
   richtig, in einer Ueberschrift wirft es den Namen eine Zeile tiefer. */
.geteilt-name .saved-marke {
  display: inline-flex;
  vertical-align: -2px;
  margin-right: 6px;
}

/* Hoechstens drei Zeilen Beschreibung. Wer mehr schreibt, bekommt sie
   beim Oeffnen der Tour zu sehen - in der Liste wuerde ein Aufsatz alle
   anderen Touren nach unten schieben. */
.geteilt-text {
  margin: 0 0 var(--s2);
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Unter dem Hauptknopf die leisen Nebenwege. Sie sind Links und keine
   Knoepfe: Auf einer Karte gibt es EINE Handlung, die man erwartet - der
   Rest steht daneben, ohne mit ihr um Aufmerksamkeit zu streiten. */
.widget-fuss-neben {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  margin-top: var(--s3);
}
.widget-fuss-neben .linkbtn { font-size: 13.5px; }

.geteilt-fuss {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
}
.geteilt-fuss .btn { flex: 0 0 auto; }
/* Die Karte hat Platz - hier muessen die Knoepfe nicht so schmal sein wie
   in einer Werkzeugleiste. */
.geteilt-fuss .btn.klein { padding: 9px 15px; font-size: 14px; }
/* "Melden" wird nach rechts geschoben und bleibt leise. Es soll erreichbar
   sein, aber nicht so aussehen, als waere es der uebliche naechste Schritt. */
.geteilt-melden { margin-left: auto; font-size: 13px; }

/* ---------- Der Schalter im Teilen-Dialog ----------
   Das Kaestchen sitzt oben und der Text daneben, nicht darunter: Ein
   Schalter, dessen Erklaerung erst nach zwei Zeilen anfaengt, wird
   angetippt, bevor sie gelesen ist. */
/* Beide Selektoren tragen .garage-dialog-inhalt vor sich her, und das ist
   kein Zierrat: Dort steht "input { width: 100% }" fuer die Textfelder des
   Dialogs. Ohne den Vorsatz gewaenne diese Regel gegen die hier, und aus
   dem Kaestchen wuerde eine bildschirmbreite Flaeche. */
.garage-dialog-inhalt .teilen-schalter {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin: var(--s4) 0 0;
  padding: var(--s3);
  border-radius: var(--r-sm);
  background: var(--glas-hauch);
  border: 1px solid var(--glas-hell);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}
.garage-dialog-inhalt .teilen-schalter input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
/* Der Textblock daneben muss schrumpfen duerfen. Ohne min-width:0 nimmt er
   die Breite seines laengsten Wortes als Untergrenze und schiebt sich aus
   dem Fenster heraus. */
.teilen-schalter > span {
  flex: 1;
  min-width: 0;
}
.teilen-schalter-titel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--text);
}
.teilen-schalter-text {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.teilen-schalter input:disabled + span .teilen-schalter-titel { color: var(--muted); }
/* Der Hinweis zum Startpunkt steht unter dem Schalter und nicht darin -
   er gilt auch dann, wenn der Schalter aus bleibt und die Tour spaeter
   doch geteilt wird. */
.teilen-hinweis { margin-top: var(--s2); }

/* Der kleine Umschalter zwischen den Herkuenften. Schmaler als der grosse
   Reiter-Umschalter darueber, damit die Rangordnung sichtbar bleibt:
   erst Meine/Entdecken, darunter die Herkunft. */
.quellen-umschalter { max-width: 380px; margin: var(--s4) auto; }
/* Die Suche im Entdecken-Teil als eigene Karte, damit sie wie ein Widget
   steht und nicht wie loses Zubehoer ueber der Liste. */
.entdecken-filter { margin-bottom: var(--s4); }
.entdecken-filter .such-feld { margin-bottom: var(--s3); }
.entdecken-filter .entdecken-zeile { margin-top: 0; }
.entdecken-filter .hint:empty { display: none; }
.quellen-umschalter .seg { padding: 6px 0; font-size: 12.5px; }

/* Die Zwischenzeile, wenn die Serpa-Liste nach Bundesland geordnet ist.
   Bewusst keine Karte: Sie gliedert nur und soll nicht anklickbar wirken. */
/* Die Zwischenzeile gliedert die ganze Liste und ist damit eine
   Ueberschrift, keine Beischrift. Sie traegt deshalb den Metallton der
   uebrigen Ueberschriften statt des Grautons fuer Nebentext, und sie ist
   gross genug, dass man beim Scrollen im Vorbeigehen sieht, in welchem
   Bundesland man gerade ist. */
.geteilt-gruppe {
  margin: var(--s5) 0 var(--s3);
  font-family: var(--schrift-display);
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--metall-glanz);
}
.geteilt-gruppe:first-child { margin-top: 0; }

.geteilt-leer {
  margin: var(--s5) 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
  text-align: center;
}

/* ---------- Statistik ----------
   Die Wertekacheln tragen seit dem 14.09.2026 dieselbe Huelle wie die
   Karten des Starts (.karte): gleiches Glas, gleiche Kante, gleicher
   Radius, gleicher Innenabstand. Vorher waren sie eine kleinere, flachere
   Form mit eigenem Radius - zwei Handschriften fuer dieselbe Sache. Der
   Abstand im Raster ist derselbe wie zwischen den Karten der Reise. */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.stat {
  background: var(--glas-hell);
  backdrop-filter: var(--glas-filter);
  -webkit-backdrop-filter: var(--glas-filter);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-lg);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow:
    inset 0 1px 0 var(--glas-heller),
    inset 0 -1px 0 var(--schatten-hauch),
    var(--glas-schatten);
}
/* Eine Kachel, deren Nachbar fehlen kann (die Schraeglage bei alten
   Aufzeichnungen): Ist im selben Raster eine Kachel versteckt, nimmt sie
   die ganze Zeile - sonst stuende sie allein links, und das Raster saehe
   aus, als fehle etwas. */
.stats:has(> [hidden]) > .stat-partner { grid-column: 1 / -1; }
.stat .k {
  font-family: var(--schrift-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.stat .v {
  font-family: var(--schrift-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
/* Ein langer Wert in einer halben Kachel ("31° L / 28° R"): etwas kleiner
   und ohne Umbruch, sonst rutschte das R in eine zweite Zeile. */
.stat .v.eng { font-size: 18px; white-space: nowrap; }
.stat.highlight { grid-column: 1 / -1; border: 1px solid var(--accent-hell); }
.stat.highlight .v { color: var(--accent-hell); }

.curvebar {
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}
.curvebar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--skala-wenig), var(--skala-mittel), var(--skala-viel));
  transition: width 0.4s ease;
}

/* ---------- Höhenprofil ---------- */
.hoehenprofil-kopf {
  font-family: var(--schrift-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 14px;
}
.hoehenprofil-spanne { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.hoehenprofil {
  display: block;
  width: 100%;
  height: 90px;
  margin-top: 6px;
  border-radius: var(--r-md);
  background: var(--schatten-hauch);
  border: 1px solid var(--glas-hell);
  box-shadow: inset 0 2px 6px var(--schatten-weich);
}
.hoehenprofil-fläche { opacity: 0.28; }
.hoehenprofil-linie { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- Ride aufzeichnen ----------
   Eigener Vollbild-Aufbau: Karte oben, Werte-Feld unten. Bewusst mit
   grossen Zahlen - das muss man im Zweifel mit Handschuhen und einem
   kurzen Blick an der Ampel erfassen koennen. */
.ride-screen {
  height: calc(100% - var(--nav-raum));
  display: flex;
  flex-direction: column;
}

.ride-map { flex: 1; min-height: 0; background: var(--surface-2); }

.ride-panel {
  flex: 0 0 auto;
  max-height: 55dvh;
  overflow-y: auto;
  padding: var(--s4);
  padding-bottom: max(var(--s4), env(safe-area-inset-bottom));
  /* Graphit statt Schwarz, fast deckend: Die Karte scheint noch durch,
     das Feld traegt aber denselben Grund wie der Rest der App. */
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  border-top: 1px solid var(--glas-hell);
  box-shadow: inset 0 1px 0 var(--glas-rand);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
/* Nach dem Beenden darf das Feld mehr Platz nehmen - dann ist die
   Auswertung wichtiger als die Karte. */
.ride-panel.zusammenfassung { max-height: 88dvh; }

.ride-tempo {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 2px;
}
.ride-tempo-wert {
  font-family: var(--schrift-display);
  font-size: 76px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-hell);
}
.ride-tempo-einheit {
  font-family: var(--schrift-display);
  text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 15px; color: var(--muted); }
.ride-status { text-align: center; margin: 0 0 12px; }
/* Dieselbe Handschrift wie .widget-name und die Ueberschriften der
   Startbildschirme: Anzeigeschrift, Versalien, Silberton. Nur kleiner - der
   Ride-Titel steht in einem Bedienfeld und nicht auf einer ganzen Seite. */
.ride-titel {
  margin: 0 0 12px;
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--metall-glanz);
}

/* Laeuft die Aufzeichnung gerade nicht, soll das auf einen Blick klar sein. */
.ride-panel.pausiert .ride-tempo-wert { color: var(--muted); }

/* Vor dem Start nimmt das Feld die halbe Hoehe: Der Knopf und die
   Stats-Karte sind gross, die Karte ist noch nicht wichtig (Friedrich,
   17.09.2026). Der Inhalt verteilt sich auf die Hoehe, statt oben zu
   kleben. */
.ride-panel.bereit { min-height: 50dvh; max-height: 70dvh; display: flex; flex-direction: column; }
.ride-panel.bereit #rideBereit { flex: 1; display: flex; flex-direction: column; gap: var(--s4); }
.ride-panel.bereit .ride-titel { margin-bottom: 0; }
.ride-panel.bereit #btnRideStart { padding: 20px 18px; font-size: 18px; }
/* Die Stats-Karte fuellt den Rest der Hoehe - sie ist das zweite Ding auf
   diesem Bildschirm, nicht ein Anhang. */
.ride-panel.bereit .ride-stats-karte { flex: 1; margin: 0; padding: var(--s4) var(--s5); }
.ride-panel.bereit .ride-stats-symbol { width: 56px; height: 56px; }
.ride-panel.bereit .ride-stats-symbol .ic { width: 28px; height: 28px; }
.ride-panel.bereit .ride-stats-titel { font-size: 20px; }

/* Die Stats-Karte im Bedienfeld vor dem Start: links die Gesamtzahl
   gross, rechts der Pfeil. Dieselbe Glasplatte wie der Kopf des
   Stats-Bildschirms, damit man beim Antippen ankommt, wo man hinwollte. */
.ride-stats-karte {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s3) 0;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  border: 1px solid var(--glas-hell);
  background:
    radial-gradient(ellipse 70% 90% at 0% 50%,
      color-mix(in srgb, var(--accent) 30%, transparent) 0%,
      transparent 70%),
    linear-gradient(to bottom, var(--glas-hauch), var(--glas-hauch));
  box-shadow: inset 0 1px 0 var(--glas-rand);
  color: var(--text);
  text-align: left;
  font-family: var(--schrift-text);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.ride-stats-karte:hover { background: var(--glas-hell); }
.ride-stats-karte:active { transform: scale(0.985); }
.ride-stats-zahl {
  flex: 0 0 auto;
  font-family: var(--schrift-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-hell);
}
.ride-stats-zahl i { font-style: normal; font-size: 14px; font-weight: 600; margin-left: 3px; color: var(--muted); }
.ride-stats-symbol { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--accent-hell); }
.ride-stats-symbol .ic { width: 22px; height: 22px; }
.ride-stats-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ride-stats-titel {
  font-family: var(--schrift-display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--metall-glanz);
}
.ride-stats-unter { font-size: 12.5px; color: var(--muted); }
.ride-stats-pfeil { flex: 0 0 auto; font-size: 22px; line-height: 1; color: var(--accent-hell); }

.ride-abschnitt { margin-top: 16px; margin-bottom: 6px; }
.ride-notizen { resize: vertical; min-height: 70px; font-family: inherit; line-height: 1.45; }

/* Ab derselben Breite, ab der auch der Planer zweispaltig wird, steht das
   Wertefeld NEBEN der Karte statt unter ihr - links, auf derselben Seite
   wie das Bedienfeld des Planers.

   Warum die 761 und nicht die 900 aus quer.css: Das sind zwei verschiedene
   Fragen. quer.css beantwortet "gehoert die Leiste nach oben?", diese Grenze
   hier "ist genug Breite fuer zwei Spalten?" - dieselbe Frage, die der
   Planer mit derselben Zahl beantwortet (siehe fensterIstSchmal in app.js).
   Vorher hing der Ride-Zweispalter an der 900 aus quer.css; auf dem Handy im
   Liegen (844 breit, 390 hoch) hatte der Planer damit seine Seitenleiste,
   Ride aber eine Schublade, die fast die ganze Karte verdeckte.

   Die Spalte ist hoechstens 45 Prozent breit: Bei 761 Punkten waeren die
   vollen 380 fast die Haelfte des Fensters, und die Karte ist beim
   Aufzeichnen das Wichtigere. */
@media (min-width: 761px) {
  /* row-reverse, weil im HTML die Karte zuerst steht: Das Feld rueckt damit
     nach LINKS, auf dieselbe Seite wie das Bedienfeld des Planers. Die
     Reihenfolge im Dokument bleibt unangetastet - beim Vorlesen kommt
     weiter zuerst die Karte, dann das Feld. */
  .ride-screen { flex-direction: row-reverse; }
  .ride-panel {
    flex: 0 0 min(var(--spalte-ride), 45%);
    height: 100%;
    max-height: none;
    border-top: 0;
    border-right: 1px solid var(--glas-hell);
    border-radius: 0;
    padding-bottom: max(var(--s4), env(safe-area-inset-bottom));
  }
  .ride-panel.bereit,
  .ride-panel.zusammenfassung { max-height: none; }
}

/* ---------- Fotos ---------- */
.foto-hinzu-btn { flex: 0 0 auto; padding: 4px 10px; font-size: 12px; }

.foto-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.foto-galerie:empty { display: none; }

.foto-kachel { position: relative; }
.foto-kachel img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  cursor: pointer;
  background: var(--surface-2);
  border: 1px solid var(--glas-rand);
  box-shadow: inset 0 1px 0 var(--glas-heller), 0 4px 12px var(--schatten-weich);
}
/* Kleines Kreuz zum Entfernen - nur dort, wo Fotos noch bearbeitbar sind. */
.foto-loeschen {
  position: absolute;
  top: 3px; right: 3px;
  width: 22px; height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--schatten-tief);
  color: var(--text);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.foto-loeschen:hover { background: var(--danger); }

/* Vollbild-Ansicht eines angetippten Fotos */
.foto-ansicht {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--schatten-tief);
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.foto-ansicht img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.foto-ansicht-zu {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--schatten-voll);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* Marker fuer ein unterwegs aufgenommenes Foto auf der Karte */
.foto-marker {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--text);
  color: var(--accent-ink);   /* Farbe des Symbols darin */
  border: 2px solid var(--accent-ink);
  box-shadow: 0 2px 6px var(--schatten-mittel);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}

.aufzeichnung-notizen {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;   /* eigene Zeilenumbrueche des Nutzers erhalten */
}

/* ---------- Live-Navigation ---------- */
/* Die Navigation traegt NICHT die Signalfarbe, sondern das helle Blau des
   eigenen Standorts - und genau darum geht es hier.

   Seit die Signalfarbe selbst ein Blau ist, liegen die beiden naeher
   beieinander als frueher. Unterschieden werden sie noch durch zweierlei:
   Dieses Blau ist deutlich heller, und dieser Knopf ist nur ein Umriss,
   keine Flaeche. Sollte das eines Tages nicht mehr reichen, gehoert der
   Standortfarbe ein eigener Ton - nicht diesem Knopf eine Ausnahme. */
.nav-btn {
  background: transparent;
  border-color: var(--gps);
  color: var(--gps);
  font-weight: 600;
}
.nav-btn:hover { background: color-mix(in srgb, var(--gps) 12%, transparent); border-color: var(--gps); color: var(--gps); }

/* Während die Navigation läuft, fährt das Seitenpanel weg und die Karte
   nutzt den vollen Platz - wie bei einem eigenständigen Navi-Gerät. */
#panel { transition: flex-basis 0.3s ease, width 0.3s ease, height 0.3s ease; }
/* Waehrend am Griff gezogen wird (siehe app.js) MUSS die Animation aus sein -
   sonst hinkt das Panel dem Finger sichtbar hinterher statt ihm 1:1 zu folgen. */
#panel.panel-dragging { transition: none; }
body.nav-modus #panel {
  flex-basis: 0;
  width: 0;
  overflow: hidden;
  border-right: 0;
}

/* Die Manoevertafel liegt direkt auf der Karte (wie bei Google Maps/Waze).
   Ausgelegt fuer den Blick von der Maschine: grosser Pfeil, grosse Zahl,
   ein kurzer Satz - mehr muss in einer halben Sekunde nicht erfassbar
   sein. Die Entfernung ist das Groesste auf der Tafel, denn sie ist das,
   was sich staendig aendert und was man wirklich abliest. */
.nav-banner {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 12px; right: 12px;
  z-index: 900;
  background: var(--feld-glas);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-lg);
  padding: var(--s4);
  box-shadow:
    inset 0 1px 0 var(--glas-licht),
    0 12px 34px var(--schatten-mittel);
}

.nav-manoever {
  display: flex;
  align-items: center;
  gap: var(--s4);
}
/* Der Pfeil: eigene Scheibe in der Standortfarbe, damit das Auge sofort
   dort landet. "scharf" dreht denselben Pfeil einfach 40 Grad weiter -
   ein eigenes Symbol braucht es dafuer nicht. */
.nav-pfeil {
  flex: 0 0 auto;
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--gps) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--gps) 45%, transparent);
  color: var(--gps);
  box-shadow: inset 0 1px 0 var(--glas-heller);
}
.nav-pfeil .ic {
  width: 46px; height: 46px;
  stroke-width: 2.4;
  transition: transform 0.25s ease;
}
.nav-pfeil.scharf-rechts .ic { transform: rotate(40deg); }
.nav-pfeil.scharf-links  .ic { transform: rotate(-40deg); }

.nav-texte { min-width: 0; }
.nav-distance {
  font-family: var(--schrift-display);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.nav-detail { font-size: 15px; color: var(--muted); margin-top: 4px; }

/* Das DANACH in der Fusszeile der Tafel: An der Kreuzung selbst will man
   schon wissen, wie es weitergeht - besonders wenn zwei Abzweigungen kurz
   hintereinander liegen. */
.nav-danach {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--glas-hell);
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 13px;
  color: var(--muted);
}
.nav-danach .ic { width: 16px; height: 16px; }

/* Die Fahrdatenleiste am unteren Rand: Tempo, Rest, Ankunft, Beenden.
   Eine Zeile, keine zweite - die Navigation MUSS ohne Scrollen auf den
   Schirm passen, das war die Vorgabe. */
.nav-fuss {
  position: absolute;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 12px; right: 12px;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  background: var(--feld-glas);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 var(--glas-licht),
    0 12px 34px var(--schatten-mittel);
}
.nav-wert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
}
.nav-wert .wert {
  font-family: var(--schrift-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nav-wert .einheit {
  font-family: var(--schrift-display);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.nav-stop-btn {
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 50%, transparent);
  color: var(--danger);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.nav-stop-btn:hover { background: color-mix(in srgb, var(--danger) 26%, transparent); }

/* Waehrend der Fahrt braucht niemand die Zoom-Knoepfe - sie laegen genau
   unter der Manoevertafel und sind mit Handschuhen ohnehin nicht zu
   treffen. Die OSM-Quellenangabe bleibt sichtbar, die ist Pflicht. */
body.nav-modus .leaflet-control-zoom { display: none; }

/* Eigener Standort auf der Karte: eine Spitze, die IMMER nach oben zeigt -
   weil sich während der Navigation ja die ganze Karte mit der Fahrtrichtung
   mitdreht (siehe setzeKartenDrehung() in app.js), nicht der Marker selbst. */
.you-are-here {
  width: 30px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gps);
  /* Ein Schatten statt einer Kontur: Auf hellen wie dunklen Kacheln hebt
     er das Motorrad ab, ohne dass die Form dicker wird. */
  filter: drop-shadow(0 1px 2px var(--schatten-voll)) drop-shadow(0 0 1px var(--schatten-voll));
  /* Dieser eine Marker folgt der Kartendrehung weich statt zu springen -
     als einziger, siehe die Begruendung im Marker-Abschnitt weiter unten. */
  transition: transform 1s linear;
}
/* Das Motorrad von oben: Raeder und Lenker dunkel, Rumpf in der
   Standortfarbe, der Helm hell - dieselben drei Toene, die der Punkt beim
   Start benutzt, nur als Form. */
.you-are-here svg { width: 100%; height: 100%; display: block; }
.you-are-here .rad, .you-are-here .lenker { fill: var(--surface-2); }
.you-are-here .rumpf, .you-are-here .schultern { fill: currentColor; }
.you-are-here .schultern { opacity: 0.75; }
.you-are-here .helm { fill: var(--accent-ink); }

/* Eigener Standort beim Start: schlichter blauer Punkt, ohne Blickrichtung -
   im Unterschied zur Spitze (.you-are-here) während der Navigation. */
.standort-marker {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--gps);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--gps);
}

/* ---------- Karte ---------- */

/* overflow:hidden ist hier kein Schönheitsmittel, sondern Pflicht: Während
   der Navigation ist die Karte absichtlich viel grösser als der Bildschirm
   (Begründung gleich darunter). Ohne diese Zeile würde sie über den ganzen
   Rest der Seite quellen. */
/* "isolation: isolate" ist die wichtigste Zeile dieses Kastens. Leaflet
   vergibt INNERHALB der Karte z-index-Werte von 200 bis 1000 (Kacheln 200,
   Marker 600, Bedienelemente 1000). Ohne einen eigenen Stapelkontext
   messen sich diese Werte mit allem anderen auf der Seite - und schlagen
   das Bedienfeld mit seiner 5 muehelos. Die Folge war sichtbar: Die
   Schublade schiebt sich um eine Eckenrundung ueber die Karte, und genau
   dieser Streifen wurde von den Kacheln uebermalt. Mit ihm verschwanden
   der Griff zum Ziehen, die gerundete Oberkante und die helle Trennlinie.
   "isolate" sperrt Leaflets Zahlen in den Kasten, danach zaehlt nach
   aussen nur noch der Kasten selbst. */
#mapWrap { flex: 1; position: relative; overflow: hidden; isolation: isolate; }

#map { position: absolute; inset: 0; background: var(--surface-2); }

/* ---------- Karte drehen während der Navigation ----------------------------
   Damit man beim Fahren nicht im Kopf umrechnen muss, zeigt die Fahrtrichtung
   immer nach oben - die Karte dreht sich also unter der eigenen Position weg.
   Diesen Winkel setzt setzeKartenDrehung() in app.js als CSS-Variable
   --karten-drehung an #mapWrap, von wo aus er hierher und bis zu jedem
   einzelnen Marker durchvererbt wird.

   Warum die Karte dabei zum QUADRAT wird: Ein gedrehtes Rechteck deckt seine
   eigene Fläche nicht mehr ab, an den Ecken gucken sonst leere Dreiecke
   heraus. Ein Quadrat mit der Bildschirmdiagonale als Seitenlänge deckt den
   Bildschirm dagegen in jeder Drehlage ab. Die genaue Seitenlänge misst
   passeKartenQuadratAn() in app.js aus und schreibt sie nach
   --karten-quadrat; die 150vmax hier sind nur der Rückfallwert, falls diese
   Messung noch nicht gelaufen ist - grosszügig gerundet, aber immer sicher.

   Die negativen Ränder ziehen das Quadrat um seine halbe Grösse zurück und
   setzen damit seine MITTE auf die Bildschirmmitte. Nur deshalb kann unten
   ein reines rotate() stehen: Die Drehung dreht dann um genau diesen Punkt,
   und das Umschalten in den Navi-Modus fängt sauber bei rotate(0deg) an,
   statt sichtbar von irgendwo hereinzurutschen.                           */
body.nav-modus #map {
  inset: auto;
  top: 50%;
  left: 50%;
  width:  var(--karten-quadrat, 150vmax);
  height: var(--karten-quadrat, 150vmax);
  margin-top:  calc(var(--karten-quadrat, 150vmax) / -2);
  margin-left: calc(var(--karten-quadrat, 150vmax) / -2);
  transform: rotate(var(--karten-drehung, 0deg));
  /* Das GPS meldet etwa einmal pro Sekunde, und genau so lange muss die
     Bewegung dauern - dann geht eine Meldung nahtlos in die naechste ueber.
     Ist sie kuerzer als der Schwenk in app.js, steht die Drehung dazwischen
     still und ruckt dann wieder los; genau das kam als "abgehackt" an.
     "linear" statt "ease-out", weil ein Fahrzeug seinen Kurs gleichmaessig
     aendert und nicht in Schueben. */
  transition: transform 1s linear;
}

/* Gegendrehung der Marker. Die Karte dreht sich als Ganzes, also drehen sich
   alle Marker mit - Wegpunkt-Zahlen stünden auf dem Kopf, die Standortspitze
   zeigte irgendwohin. Jeder Marker dreht deshalb um genau denselben Winkel
   zurück und steht dadurch wieder gerade auf dem Bildschirm.

   Das kostet keine einzige Zeile JavaScript pro Marker: Die Variable erbt von
   #mapWrap herunter, also gilt die Regel automatisch auch für Marker, die
   erst während der Fahrt dazukommen. Ausserhalb der Navigation ist der Wert
   0deg und die Regel damit wirkungslos. Dieselbe Dauer wie oben, sonst
   liefen Karte und Marker sichtbar auseinander. */
.you-are-here, .wp-marker, .poi-marker, .foto-marker, .standort-marker {
  transform: rotate(calc(-1 * var(--karten-drehung, 0deg)));
}

/* Die Uebergangsanimation bekommt im Navi-Modus NUR der eigene Standort;
   seine transition-Zeile steht oben in seinem eigenen Block. Auf einer
   Alpenroute liegen schnell zwanzig Pass-Marker im Bild, und jeder von
   ihnen waere sonst eine eigene Animation, die der Compositor im
   Sekundentakt mitrechnet. Die uebrigen Marker springen dadurch hart mit -
   was niemand sieht, weil sie waehrend der Fahrt Beiwerk sind. */
body:not(.nav-modus) .wp-marker,
body:not(.nav-modus) .poi-marker,
body:not(.nav-modus) .foto-marker,
body:not(.nav-modus) .standort-marker { transition: transform 1s linear; }

/* Sprechblasen (z.B. an einem Pass) hängen an ihrer Spitze, deshalb wird hier
   um genau diese Spitze zurückgedreht - der Text bleibt lesbar, die Blase
   bleibt am richtigen Ort. */
.leaflet-popup-content-wrapper {
  transform: rotate(calc(-1 * var(--karten-drehung, 0deg)));
  transform-origin: bottom center;
}

/* Die Zoom-Knöpfe sitzen in den ECKEN des Kartenbehälters - und der ist
   während der Fahrt viel grösser als der Bildschirm, seine Ecken liegen also
   weit ausserhalb. Statt sie aufwendig zurückzurechnen blenden wir sie aus:
   Die Karte zoomt während der Navigation ohnehin selbst auf Stufe 17 und
   folgt der eigenen Position, von Hand zoomen will da niemand. */
body.nav-modus .leaflet-control-container { display: none; }

/* Leaflet-Bedienelemente etwas dunkler einfärben */
/* Die Namensnennung von OpenStreetMap. Sie war hier abgeschaltet, weil
   die Quellen auch im Fuss des Bedienfelds stehen - nur steht der dort
   ausserhalb des Bildschirms, und auf der Aufzeichnungs-Karte und im
   Navi-Modus gibt es ihn gar nicht. Die Nutzungsbedingungen sind an
   dieser Stelle eindeutig: "Do not hide attribution beneath UI, behind
   toggles, or off-screen."

   Also sichtbar, aber dezent: klein, halbdurchsichtig, in der Ecke. */
.leaflet-control-attribution {
  background: var(--schatten-mittel);
  color: var(--muted);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--r-sm) 0 0 0;
}
.leaflet-control-attribution a { color: var(--muted); text-decoration: underline; }

/* Nummerierte Wegpunkt-Marker */
.wp-marker {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  border: 2px solid var(--accent-ink);
  box-shadow: 0 2px 6px var(--schatten-mittel);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
  font-family: -apple-system, sans-serif;
}

/* Sehenswertes: Gebirgspässe */
.poi-marker {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  box-shadow: 0 2px 6px var(--schatten-mittel);
  border: 2px solid var(--accent-ink);
}
/* Die Marker enthalten jetzt ein SVG statt eines Emoji. Weil das Symbol
   seine Farbe ueber currentColor holt, muss hier eine dunkle Textfarbe
   stehen - sonst waere die Strichzeichnung weiss auf hellem Grund. */
.poi-marker.pass { background: var(--pass-schild); color: var(--pass-schild-ink); }
/* Die kuratierten Strecken (strecken.js): Farbe, die einen Zustand
   bedeutet, auf derselben Skala wie die Kurvigkeit - gruen frei, gelb mit
   Beschraenkung, rot gesperrt. Ungepruefte Lage: das neutrale Schild mit
   gestrichelter Kante, damit der Unterschied sichtbar bleibt. */
.poi-marker.strecke.frei { background: var(--skala-wenig); color: var(--pass-schild-ink); }
.poi-marker.strecke.beschraenkt { background: var(--skala-mittel); color: var(--pass-schild-ink); }
.poi-marker.strecke.gesperrt { background: var(--danger); color: var(--accent-ink); }
.poi-marker.strecke.ungeprueft { background: var(--pass-schild); color: var(--pass-schild-ink); border-style: dashed; }
.strecke-popup-meta { color: var(--muted); font-size: 12px; }
.strecke-popup-score { font-weight: 600; }
.strecke-popup-sperre { display: inline-block; margin-top: 4px; }
.strecke-popup-sperre.gesperrt { color: var(--danger); font-weight: 600; }
.strecke-popup-sperre.beschraenkt { color: var(--skala-mittel); }

.poi-popup { font-size: 13px; line-height: 1.5; }
.poi-popup .poi-popup-titel { font-weight: 700; }

/* ---------- Overlays ---------- */
.toast {
  /* fixed statt absolute: Der Toast haengt jetzt am Bildschirm, nicht
     mehr an der Karte. Der Abstand nach oben nimmt die Notch mit. */
  position: fixed;
  top: calc(16px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%);
  background: var(--feld-glas);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glas-rand);
  border-left: 3px solid var(--accent-hell);
  color: var(--text);
  padding: 10px 16px;
  border-radius: var(--r-md);
  font-size: 14px;
  z-index: 1000;
  max-width: 80%;
  box-shadow: inset 0 1px 0 var(--glas-heller), 0 10px 30px var(--schatten-mittel);
}

.busy {
  position: absolute;
  inset: 0;
  background: var(--schatten-stark);
  display: flex; align-items: center; justify-content: center;
  gap: var(--s3);
  z-index: 999;
  color: var(--text);
  font-family: var(--schrift-display);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.spinner {
  width: 22px; height: 22px;
  border: 3px solid var(--glas-rand);
  border-top-color: var(--accent-hell);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Schmale Bildschirme / Hochformat ----------
   Hauptzielgruppe ist eine Handy-App (siehe CLAUDE.md) - hier wird aus
   "Bedienfeld links, Karte rechts" ein senkrechter Aufbau: die Karte oben
   und dominant (per order VISUELL vor dem Bedienfeld, an der Reihenfolge
   im HTML aendert das nichts), das Bedienfeld darunter als Schublade, die
   sich am Griff STUFENLOS ziehen laesst - von "nur der Griff ist sichtbar,
   Karte hat den ganzen Bildschirm" bis fast volle Hoehe. Die eigentliche
   Hoehe setzt app.js direkt per style.height (Abschnitt 9c) - hier nur ein
   Startwert, falls JS noch nicht geladen ist. */
@media (max-width: 760px) {
  .app-layout { flex-direction: column; }

  #mapWrap { order: 1; flex: 1; }

  #panel {
    order: 2;
    width: 100%;
    flex: 0 0 auto;
    height: 45dvh;
    border-right: 0;
    border-top: 1px solid var(--glas-rand);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    overflow: hidden;   /* rundet auch den Scroll-Inhalt sauber ab, auch beim elastischen Ueberscrollen */
    /* Die Schublade schiebt sich um eine Eckenrundung UEBER die Karte.
       Ohne das laege sie schlicht daneben, und ihr Glas haette nichts zu
       brechen - genau der Unterschied zwischen einer Glasscheibe ueber
       der Karte und einem schwarzen Kasten darunter. Der Blur an der
       Oberkante zeigt die Karte verwischt, wie beim Inspirationsbild. */
    margin-top: calc(-1 * var(--r-lg));
    position: relative;
    z-index: 5;
    box-shadow: 0 -10px 30px var(--schatten-weich);
  }

  .panel-grip { display: flex; }

  /* Waehrend der Navigation soll die Karte wie bei einem echten Navi-Geraet
     den ganzen Bildschirm bekommen - anders als am Desktop (dort schrumpft
     die BREITE auf 0, siehe body.nav-modus #panel weiter oben) schrumpft
     hier die HOEHE auf 0. !important, weil app.js beim Ziehen eine eigene
     Hoehe per Inline-Style setzt, die sonst gewinnen wuerde. */
  body.nav-modus #panel { height: 0 !important; }
}
/* ============================================================================
   DER START
   Der erste Bildschirm: Wortmarke und Konto oben, darunter Inhaltskarten -
   das eigene Bike, die naechste Reise, die Merkliste, Vorschlaege, Reifen.
   Seit dem 05.09.2026; davor stand hier der Werkstattraum mit Drehteller
   (rund 660 Zeilen Raum, Lampen, Buehne, Lauflicht, Hinweis-Tafel). Warum
   er ging: ENTSCHEIDUNGEN.md zu diesem Datum.

   Der Bildschirm ist ein Listenbildschirm (.start-screen.listen-screen) und
   erbt dessen Scrollen und Hoehe; hier stehen nur Untergrund, Kopf und die
   Karten.
   ============================================================================ */

/* Der Untergrund: Schwarz mit dem Lichtkegel aus design.css, damit die
   Glaskanten etwas zu fangen haben (Grundsatz 1 und 4). */
.start-seite { background: var(--start-licht), var(--bg); }
.start-seite .start-screen-inner {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  width: 100%;
  max-width: none;
  padding-bottom: var(--s6);
}
/* Keine Karte darf schrumpfen. Ein Flex-Kind mit overflow: hidden (die
   Bike-Karte, wegen des unscharfen Fotos dahinter) darf sonst unter seine
   Inhaltshoehe fallen, sobald die Spalte voll ist - sie war beim ersten
   Ansehen ein 40 Punkte hoher Streifen. */
.start-seite .start-screen-inner > * { flex: 0 0 auto; }

/* ---------- Der Kopf ----------
   Wortmarke links, Konto rechts, wie die Navigationszeile einer iOS-App.
   Keine zweite Ueberschrift: Die Leiste sagt "Start", das Logo ist der
   Titel. Der Zuschlag fuer die Geraete-Aussparung (Notch) sitzt hier, weil
   dieser Kopf im Hochformat die oberste Zeile ist. */
.start-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-top: calc(env(safe-area-inset-top) + var(--s2));
  /* Luft nach unten. Der Flex-Abstand der Seite (--s5) allein liess Logo
     und Karte aneinanderkleben; zusammen sind es jetzt 40 Punkte. */
  margin-bottom: var(--s3);
}
.start-kopf .wortmarke-garage { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
/* 172 Punkte: gut drei Viertel der Anmeldegroesse (220). Die alte Regel
   "klein, damit es nicht mit Meine Garage streitet" ist mit dieser
   Ueberschrift gegangen - das Logo IST jetzt der Titel der Seite. */
.wortmarke-garage .wortmarke-bild { width: 172px; }
/* Der Profilknopf ist der einzige Knopf im Kopf und darf dem Logo
   standhalten: 52 statt der 46 Punkte der uebrigen runden Knoepfe. */
.start-kopf .glas-rund { width: 52px; height: 52px; }

/* ---------- Die Karte ----------
   EINE Scheibe fuer alle Karten des Starts, spaeter fuer alle Karten der
   App. Das Rezept ist das der Planer-Wahlkarte (der juengsten Karte der
   App), nur mit Marken statt Zahlen: Fuellung --glas-hell (10 Prozent -
   die 5 Prozent von --glas-hauch sind auf Schwarz unsichtbar), Filter und
   Schatten aus design.css, Lichtkante oben, dunkle Kante unten.

   Die Karte hat GENAU EINEN backdrop-filter. Was in ihr liegt (Zeilen,
   Symbolkreise, Knoepfe), bekommt Fuellung und Kante, aber keinen zweiten
   Filter - der Browser rechnet jeden davon je Bild. */
.karte {
  position: relative;
  padding: var(--s4);
  border-radius: var(--r-lg);
  color: var(--text);
  /* Der Glanz quer ueber die Scheibe (Designsprache: "ein weicher Glanz
     quer darueber"): ein Verlauf von der linken oberen Ecke, der nach der
     Mitte verschwindet - Grundsatz 1, dritter Fall. Darunter die Fuellung. */
  background:
    linear-gradient(135deg, var(--glas-rand) 0%, transparent 38%),
    var(--glas-hell);
  /* Kein backdrop-filter: Karten sind Inhalt, nicht Bedienschicht - siehe
     "Wo das Glas wirklich Glas ist" in design.css. */
  border: 1px solid var(--karten-rand);
  box-shadow:
    inset 0 1px 0 var(--glas-licht),
    inset 0 -1px 0 var(--schatten-hauch),
    var(--glas-schatten);
}
/* Die Lichtkante als Saum, der nach unten auslaeuft - das, was eine
   Scheibe von einem Kasten unterscheidet. Ein Verlauf, aber einer, der
   einer Glaskante ihr Licht gibt (Grundsatz 1, dritter Fall): Er liegt als
   eigene Schicht auf dem Rand und ist ueber eine Maske auf den Rand
   beschraenkt. */
.karte::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(to bottom, var(--glas-licht), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
button.karte {
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.2,0.8,0.2,1), background 0.15s ease;
}
button.karte:hover { background: var(--glas-rand); }
button.karte:active { transform: scale(0.985); }

/* Das Abzeichen oben in einer Karte ("Mein Bike"): eine Pille in der
   Signalfarbe, gedaempft - sie beschriftet, sie ist kein Knopf. */
.abzeichen {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--s2);
  border-radius: var(--r-pill);
  font-family: var(--schrift-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: var(--accent-hell);
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-hell) 35%, transparent);
}

/* ---------- Die Bike-Karte ---------- */
.bike-karte {
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  /* Die eine Karte mit Filter: Ihr Foto liegt in ihr, nicht dahinter. */
  backdrop-filter: var(--glas-filter);
  -webkit-backdrop-filter: var(--glas-filter);
  /* Zwei Spalten, vier Zeilen. Links Kopf, Name, Werte, Knopf; rechts die
     Buehne, die ALLE Zeilen spannt - so reicht die Werkstatt dahinter von
     der Ober- bis zur Unterkante der Karte, wie in der Vorlage. Bis zum
     06.09.2026 sass die Buehne unter dem Namen in einem eigenen Raster,
     und der Raum begann erst dort. 44 zu 56: Die Maschine ist doppelt so
     breit wie hoch und braucht die Breite mehr als die Werte. */
  display: grid;
  /* Der Anteil der Textspalte steht EINMAL hier und wird zweimal
     gebraucht: fuer die Spalten des Rasters und fuer die linke Kante des
     Raums (.bike-raum), die auf der Spaltengrenze liegen muss. */
  --bike-text-anteil: 0.46;
  /* Wie weit der Werkstattraum ueber die Buehne hinausragt - nach BEIDEN
     Seiten gleich, sonst laege die Tellermitte nicht mehr auf der
     Buehnenmitte. Nach links traegt der Ueberhang das Fading zu den
     Werten, nach rechts schneidet die Karte ihn ab. */
  --bike-raum-ueberhang: 56px;
  grid-template-columns: minmax(0, calc(var(--bike-text-anteil) * 100%)) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  column-gap: var(--s3);
}
/* Der Kopf liegt ueber beiden Spalten - das Plus rechts steht damit ueber
   der Werkstatt, wie der Knopf in der Vorlage. */
.bike-karte .widget-kopf { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 3; }
.bike-karte .widget-name { grid-column: 1; grid-row: 2; position: relative; z-index: 1; }
.bike-karte .widget-werte { grid-column: 1; grid-row: 3; position: relative; z-index: 1; }
/* Der Knopf hat Inhaltsbreite und steht links unten: justify-self ist
   noetig, weil ein Rasterkind sonst auf die Spaltenbreite gestreckt wird -
   width: auto allein aendert daran nichts. So endet er deutlich vor dem
   Uebergang zur Werkstatt. */
.bike-karte .widget-knopf {
  grid-column: 1; grid-row: 4;
  align-self: end; justify-self: start;
  width: auto;
  padding-inline: var(--s3);
  position: relative; z-index: 1;
}
.bike-karte .bike-buehne { grid-column: 2; grid-row: 1 / -1; }
/* Die Werkstatt als Untergrund der rechten Kartenhaelfte. Sie ersetzt das
   unscharf hinterlegte eigene Foto, das hier zuerst stand: Zwei
   Untergruende in einer Karte waren einer zu viel, und der Raum sagt mehr.
   Nach links laeuft er ueber eine Maske aus, damit Name und Werte auf
   ruhigem Glas stehen. Der Teller sitzt im Ausschnitt bei 90 Prozent der
   Hoehe, deshalb "center bottom" - so steht die Maschine darauf und nicht
   davor. */
.bike-raum {
  position: absolute;
  top: 0; bottom: 0;
  right: calc(-1 * var(--bike-raum-ueberhang));
  /* Die linke Kante liegt 16 Punkte vor der Buehne (im Spaltenabstand),
     die rechte gleich weit dahinter (ueber die Kartenkante hinaus, die
     Karte schneidet ab): Der Raum ist damit SYMMETRISCH um die Buehne, und
     "center" legt die Tellermitte des Bildes von selbst auf die
     Buehnenmitte - die Maschine steht auf dem Teller, ohne dass das Bild
     verschoben wuerde. Wer den Ueberhang aendert, aendert ihn ueber die
     Marke und damit auf beiden Seiten zugleich.

     Hier stand zuerst ein Raum mit 150 Punkten Ueberhang nach links und
     einer Verschiebung des Bildes um 67 Punkte nach rechts. Das rechnete
     nur auf dem Handy: Im Breiten fuellt das Bild die Raumbreite genau aus,
     die Verschiebung schob seine rechte Seite aus der Karte (der Teller war
     abgeschnitten) und liess links eine harte Bildkante stehen, die das
     Fading zunichte machte.

     Die Rechnung fuer left: Textspalte + Spaltenabstand, davon der
     Ueberhang zurueck. Prozent bezieht sich hier auf die Kartenbreite
     innerhalb des Rahmens; die Textspalte ist ein Anteil der Breite
     innerhalb des Innenabstands. */
  left: calc(var(--bike-text-anteil) * (100% - 2 * var(--s4)) + var(--s3) - var(--bike-raum-ueberhang));
  z-index: 0;
  background: url("../img/bike-raum.webp") center bottom / cover no-repeat;
  /* Der Uebergang zu den Werten: ueber gut die Haelfte der Raumbreite, und
     er beginnt bei null. -webkit- zuerst, Safari braucht es. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 58%);
  mask-image: linear-gradient(to right, transparent 0%, black 58%);
  pointer-events: none;
}
/* Die Lichtkante der Karte liegt ueber allem. Das Bild bekommt seinen
   z-index in seiner eigenen Regel weiter unten, die Tafel bringt ihren
   selbst mit. Hier stand zuerst eine Regel fuer ALLE Kinder der Buehne -
   sie setzte die Tafel von absolut auf relativ und schob sie aus dem Bild. */
.bike-karte::before { z-index: 2; }

.widget-kopf {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
/* Der Link im Kopf steht neben dem Abzeichen, nicht in einem Fliesstext -
   unterstrichen saehe er dort aus wie ein Fehler. */
.widget-kopf .linkbtn {
  margin-left: auto;
  text-decoration: none;
  white-space: nowrap;
  font-size: 14px;
}
.widget-kopf .motorrad-umschalter { margin-left: auto; padding: 3px; gap: 3px; }
/* Im Kopf der Bike-Karte ist der Umschalter ein Nebending: kleiner als die
   grossen Umschalter der Listen, sonst frisst er die Zeile. */
.widget-kopf .motorrad-umschalter .seg { padding: 5px 10px; font-size: 12px; letter-spacing: 0.03em; }
.widget-kopf .glas-rund.klein { margin-left: auto; }
/* :not([hidden]) ist noetig: Der Umschalter steht auch bei einer Maschine
   im HTML, nur versteckt - und "+" sieht ihn trotzdem. */
.widget-kopf .motorrad-umschalter:not([hidden]) + .glas-rund.klein { margin-left: 0; }
/* Mit ".karte" davor, nicht allein: Der Bikename ist eine h2 in einem
   Listenbildschirm, und ".start-screen-inner h2" (28 Punkte, Abstand s4)
   wog schwerer als ".widget-name" allein - daher der Umbruch und die zu
   grosse Luecke zu den Werten, die zweimal aufgefallen war. */
.karte .widget-name {
  margin: 0 0 var(--s2);
  font-family: var(--schrift-display);
  /* Waechst mit dem Fenster: In der linken Spalte der Bike-Karte stehen
     auf dem Handy rund 150 Punkte, und "Honda CB650R" braucht bei 24
     Punkten 165 - bei 19,5 passt es in eine Zeile (nachgemessen: bei 21
     brach es noch um). */
  font-size: clamp(19px, 5vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--metall-glanz);
  overflow-wrap: anywhere;
}
/* Links die Werte und der Knopf, rechts die Buehne mit dem Foto. 46 zu 54:
   Die Werte-Zeilen brauchen in Inter rund 140 Punkte ("1.084 cm³" bei 17
   Punkten), die Maschine bekommt den Rest. */
/* Das Raster der Reisekarte: links das Kartenbild, rechts die Zeilen und
   der Knopf. Beide Spalten gleich hoch (stretch) - und die Textspalte
   verteilt ihren Inhalt: Zeilen oben, Knopf unten. Ohne das stand der
   Knopf mitten in der Spalte und darunter blieb Leere, das sah aus wie
   verschoben. */
.widget-inhalt {
  display: grid;
  grid-template-columns: minmax(0, 52%) minmax(0, 1fr);
  gap: var(--s3);
  align-items: stretch;
}
.widget-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.widget-knopf {
  /* Nicht wachsen: .btn traegt flex: 1, und in der Textspalte der
     Reisekarte streckte sich der Knopf dadurch ueber die ganze Resthoehe -
     ein 163 zu 132 Punkte grosses Quadrat. */
  flex: 0 0 auto;
  margin-top: var(--s3);
  width: 100%;
  /* Etwas enger als der Standardknopf: In der linken Spalte stehen auf dem
     Handy nur rund 160 Punkte zur Verfuegung - auf einem 360 Punkte breiten
     Geraet 141. Die Schrift waechst deshalb mit der Fensterbreite, sonst
     bricht "Bike bearbeiten" dort auf zwei Zeilen. */
  padding-inline: var(--s2);
  font-size: clamp(13px, 3.6vw, 14px);
  white-space: nowrap;
}
.widget-werte { display: flex; flex-direction: column; }
.widget-wert {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
}
/* Die erste Zeile schliesst direkt an den Namen an - ihr eigener
   Innenabstand oben addierte sich sonst zum Abstand darueber. Keine
   Trennlinien zwischen den Zeilen: Sie standen einmal an allen, dann durch
   einen Editierfehler nur noch an der ersten - als einzelner Strich unter
   "Hubraum" sahen sie nach einem Fehler aus. */
.widget-wert:first-child { padding-top: 0; }
/* Der Symbolkreis: Fuellung und Kante, kein eigener Filter (siehe .karte). */
.widget-wert-symbol {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--glas-hauch);
  border: 1px solid var(--glas-rand);
  box-shadow: inset 0 1px 0 var(--glas-hell);
  color: var(--metall);
}
.widget-wert-symbol .ic { width: 18px; height: 18px; }
.widget-wert-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* Einzeilig, und wenn es trotzdem nicht passt, mit Auslassungspunkten
   statt mitten im Wort abgeschnitten. Ein halbes Wort ("Septem") liest
   sich wie ein Fehler, "..." sagt: hier geht es weiter. Funktioniert nur,
   weil .widget-wert-text darueber min-width: 0 traegt - ohne das waechst
   die Spalte mit dem Text, und es gaebe nichts abzuschneiden. */
.widget-wert .wert {
  font-size: 17px;
  line-height: 1.25;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Der Zeitraum der Reisekarte darf zwei Zeilen haben - an der einen
   Stelle, die zeitraumKurz() in einstieg.js dafuer freigibt. Mehr als
   zwei nie: Eine dritte schneidet line-clamp mit Auslassungspunkten ab.
   Die Schreibweise mit -webkit- ist die, die alle heutigen Browser dafuer
   verstehen. */
.widget-wert .wert.wert-zeitraum {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Die Buehne: unten die Maschine, darunter ein weicher Schatten als Boden.
   Der Schatten folgt ueber drop-shadow der Silhouette des freigestellten
   Fotos und legt sich damit unter die Raeder - das ist der Kontaktschatten,
   der die Maschine vom "Schweben" befreit, ohne Zeichenflaeche. */
.bike-buehne {
  position: relative;
  /* Der Raum ragt ueber die Buehne hinaus - die Karte selbst schneidet ihn
     an ihren Kanten ab (sie hat overflow: hidden). Der Innenabstand unten
     haelt die Maschine von der Kartenkante fern, sie soll auf dem Teller
     stehen. Die Hoehe kommt aus den Zeilen der Karte, die Buehne spannt
     sie alle; 200 ist die Untergrenze fuer den Leerzustand. */
  padding-bottom: var(--s2);
  min-height: 200px;
  align-self: stretch;
  z-index: 1;
  /* Ein Stapel: die Tafel oben, die Maschine unten auf dem Teller. Die
     Tafel stand vorher absolut auf einem Prozentwert der Buehnenhoehe -
     bei jeder anderen Kartenbreite lag sie damit woanders, mal ueber der
     Maschine, mal auf ihrem Tank. Im Fluss sitzt sie immer knapp darueber. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
/* Der Kontaktschatten auf dem Teller. Schwaecher als frueher: Der Teller
   im Bild traegt die Maschine schon optisch, der Schatten setzt sie nur auf. */
.bike-buehne::before {
  content: "";
  position: absolute;
  left: 10%; right: 10%; bottom: 4px;
  height: 11%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--schatten-tief), transparent 70%);
}
.bike-bild {
  position: relative;
  z-index: 1;
  /* Etwas schmaler als die Buehne: Die Maschine soll AUF dem Teller
     stehen und ihn noch sehen lassen. Mit 112 Prozent stand sie ueber
     seine Kante hinaus. */
  width: 94%;
  height: auto;
  max-height: 270px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 10px 8px var(--schatten-mittel));
}
/* ---------- Die Fahrer-Plakette ----------
   garage.js, BUEHNE_ZEIGT = 'fahrer'. Die rechte Kartenhaelfte ist dann
   keine Buehne fuer eine Maschine, sondern eine Tafel um den Fahrer:
   Werkstattraum, Teller und Kontaktschatten gehen weg, es bleibt ein
   tiefer Grund mit einem leisen blauen Schein, darauf Hoehenlinien wie
   in der Gravur des Serpa-Schriftzugs, in der Mitte das Profilbild als
   Kreis, darunter der Name in Versalien.

   Der Kreis mit "cover" sieht bei jedem Foto gleich aus - Hochkant,
   Querformat, Selfie -, deshalb braucht er weder Freisteller noch
   Zuschnitt. Genau da hakte es beim Bike-Foto.

   Kein Neonleuchten (Grundsatz der Designsprache): Der Schein ist eine
   Mischung aus der Signalfarbe und Durchsichtigkeit, weit unter dem, was
   als Licht gelesen wuerde. Er gibt dem Grund Tiefe, mehr nicht. */
.bike-karte.zeigt-fahrer .bike-raum,
.bike-karte.zeigt-fahrer .bike-bild,
.bike-karte.zeigt-fahrer .buehne-hinweis { display: none; }
/* Die Tafel laeuft bis an die Kartenkanten oben, rechts und unten (die
   negativen Margen heben den Innenabstand der Karte auf) und ist KEIN
   Kasten: Ihr Grund liegt im ::before und laeuft ueber eine Maske nach
   links in das Glas der Werte aus und oben und unten in die Kartenkante -
   so, wie vorher der Werkstattraum. Die Maske liegt auf dem Grund, nicht
   auf der Buehne selbst, sonst wuerde sie das Bild mit ausblenden. */
/* Im Fahrer-Modus bekommt die Tafel mehr von der Karte: Die Textspalte
   rueckt auf 40 Prozent, und die Tafel greift zusaetzlich um eine Stufe
   nach links UEBER die Spaltengrenze - dort laeuft ihr Grund ohnehin
   schon aus, so beginnt das Auslaufen frueher und die Tafel wirkt wie ein
   Teil der Karte statt wie ihre rechte Haelfte. */
.bike-karte.zeigt-fahrer { --bike-text-anteil: 0.40; }
.bike-karte.zeigt-fahrer .bike-buehne {
  justify-content: center;
  padding: var(--s4) 0 var(--s4) var(--s5);
  margin: calc(-1 * var(--s4)) calc(-1 * var(--s4)) calc(-1 * var(--s4)) calc(-1 * var(--s6));
  overflow: hidden;
  min-height: 248px;
}
.bike-karte.zeigt-fahrer .bike-buehne::before {
  content: "";
  position: absolute;
  /* inset und height heben die Masse des Kontaktschattens auf, der im
     Bike-Modus in diesem Pseudo-Element wohnt. */
  inset: 0;
  height: auto;
  border-radius: 0;
  background:
    radial-gradient(circle at 56% 44%,
      color-mix(in srgb, var(--accent) 34%, transparent),
      transparent 58%),
    var(--raum-dunkel);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, black 44%),
    linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, black 44%),
    linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.fahrer-plakette {
  position: relative;
  width: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  color: var(--metall);
}
/* Die Hoehenlinien liegen hinter dem Bild und laufen ueber den Rand der
   Tafel hinaus - die Karte schneidet sie ab, wie eine Karte einen
   Ausschnitt der Landschaft zeigt. */
.fahrer-ringe {
  position: absolute;
  left: 50%; top: 50%;
  width: 210%;
  height: 210%;
  transform: translate(-50%, -50%);
  fill: none;
  stroke: currentColor;
  stroke-width: 0.9;
  opacity: 0.55;
  pointer-events: none;
  /* Nach links laufen die Linien aus wie der Grund - sonst endeten sie
     an der Spaltengrenze in einer geraden Kante, und die Tafel waere
     doch wieder ein Kasten. Die Prozente sind auf das SVG bezogen, das
     210 Prozent der Tafel breit ist: Die linke Tafelkante liegt bei 26. */
  -webkit-mask-image: linear-gradient(to right, transparent 24%, black 42%);
  mask-image: linear-gradient(to right, transparent 24%, black 42%);
}
.fahrer-plakette-inhalt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) 0;
}
.fahrer-bild {
  /* Deutlich groesser als der erste Wurf (108): Das Bild ist der Grund,
     aus dem es die Tafel gibt. Ueber die Breite der Tafel, damit es auf
     jedem Geraet den Platz nimmt, den es hat; quer.css deckelt oben. */
  width: 92%;
  max-width: 184px;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  /* Ein heller Ring als Glaskante, ein dunkler als Abstand zu den
     Hoehenlinien, dann der Schatten, der den Kreis vom Grund loest. */
  box-shadow:
    0 0 0 3px var(--glas-heller),
    0 0 0 7px var(--raum-dunkel),
    0 14px 28px var(--schatten-tief);
  background: var(--glas-hell);
}
/* Der leere Kreis: ein Knopf, kein Bild. Das Profilsymbol gross, in der
   Metallfarbe der Beschriftung. */
.fahrer-bild.fahrer-leer {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--glas-rand);
  color: var(--metall);
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.2,0.8,0.2,1), background 0.15s ease;
}
.fahrer-bild.fahrer-leer .ic { width: 44px; height: 44px; }
.fahrer-bild.fahrer-leer:hover { background: var(--glas-heller); }
.fahrer-bild.fahrer-leer:active { transform: scale(0.96); }
/* Der Name wie ein Schild: Versalien, weit gesperrt, Metall - dieselbe
   Handschrift wie "Deine Motorradapp" unter dem Logo. */
.fahrer-name {
  font-family: var(--schrift-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--metall);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fahrer-name.fahrer-aufforderung { color: var(--accent-hell); }

/* Das Standardmotorrad steht voll da. Hier lag einmal opacity: 0.8, damit
   es "zurueckritt" - es sah dadurch durchsichtig aus, besonders rechts vor
   dem hellen Teller. Dass es nicht die eigene Maschine ist, sagt die Tafel
   darueber, das muss das Bild nicht auch noch andeuten. */

/* ---------- Die Tafel "Dein Bike einfuegen" ----------
   Sie liegt mittig auf dem Standardmotorrad und erscheint nur, solange kein
   eigenes Foto da ist. Gestaltet als Tafel an der Werkstattwand, nicht als
   Bedienelement der App: Sucherwinkel statt Rahmen, Glas statt Flaeche.

   Bis zum 05.09.2026 rechnete setzeBuehnenPlatz() ihre Lage aus, weil die
   Buehne selbst gerechnet wurde; in der Karte genuegt "mittig". */
.buehne-hinweis {
  /* Im Fluss ueber der Maschine, nicht absolut auf einem Prozentwert -
     siehe die Begruendung bei .bike-buehne. */
  position: relative;
  z-index: 5;
  width: 100%;
  /* Deutlich Luft nach unten: Die Tafel gehoert an die Wand ueber der
     Maschine, nicht auf ihren Lenker. */
  margin-bottom: var(--s5);
  display: flex;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: hinweis-auftauchen 0.5s ease-out both;
}
@keyframes hinweis-auftauchen {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.hinweis-tafel {
  position: relative;
  width: 100%;
  /* Schmal halten: Die Sucherwinkel werden mit der Tafel gestreckt
     (preserveAspectRatio="none"), und eine breite flache Tafel zieht ihre
     Ecken in die Laenge. Bei 150 Punkten bricht die Zeile auf zwei um, die
     Tafel wird dadurch fast so hoch wie breit - und die Winkel behalten
     ungefaehr die Form ihrer Vorlage (100 zu 74). */
  max-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  /* Unten mehr Luft als oben: Dort haengt das Abzeichen halb in der Kante. */
  padding: var(--s4) var(--s3) var(--s5);
  border-radius: var(--r-md);
  /* Glas ueber dem Raumbild - eine Linse ueber etwas Echtem. Dunkel
     getoent, weil dahinter die helle Werkzeugwand liegt. */
  background: linear-gradient(var(--schatten-mittel), var(--schatten-weich));
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
          backdrop-filter: blur(16px) saturate(1.05);
  box-shadow:
    inset 0 1px 0 var(--glas-licht),
    inset 0 -1px 0 var(--schatten-hauch),
    0 12px 34px var(--schatten-weich);
  transition: transform 0.12s ease-out;
}
/* Die vier Sucherwinkel in den Ecken: Sie sagen "hier kommt ein Bild hin",
   ohne dass ein Wort dafuer noetig waere. */
.hinweis-winkel {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  fill: none;
  stroke: color-mix(in srgb, white 85%, transparent);
  stroke-width: 2.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.hinweis-kamera {
  width: 22px; height: 22px;
  stroke-width: 1.3;
  color: color-mix(in srgb, white 92%, transparent);
}
.hinweis-text {
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  color: color-mix(in srgb, white 95%, transparent);
  text-shadow: 0 1px 10px var(--schatten-mittel);
}
/* Der Zeiger nach unten. Er HAENGT an der Tafel, halb in ihre Unterkante
   eingesenkt, statt daneben zu schweben, und traegt die Signalfarbe in
   ihrem hellen Ton - Weiss ginge auf dem Werkstattbild unter. Eine Flaeche
   von 32 Punkten setzt sich gegen jeden Untergrund durch, ein Strich nicht. */
.hinweis-marke {
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 30px; height: 30px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-hell);
  box-shadow:
    0 6px 16px var(--schatten-mittel),
    0 0 0 4px var(--schatten-weich);
  animation: marke-nicken 1.9s ease-in-out infinite;
}
.hinweis-marke svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: var(--accent-ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Bewegung sieht das Auge noch am Rand des Blickfelds, Farbe erst beim
   Hinsehen. Bewusst langsam und klein - ein huepfendes Element waere Reklame. */
@keyframes marke-nicken {
  0%, 62%, 100% { transform: translateX(-50%) translateY(0); }
  78%           { transform: translateX(-50%) translateY(5px); }
}
.buehne-hinweis:active .hinweis-tafel { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .buehne-hinweis, .hinweis-marke { animation: none; }
}
/* Die Karte ohne eingetragenes Motorrad. Sie benutzt seit dem 11.09.2026
   dasselbe Raster wie die gefuellte (.bike-karte): links der Text, rechts
   Werkstatt und Standardmaschine. Vorher war sie eine schlichte Spalte
   auf schwarzem Grund und sah damit aus wie ein Fehler statt wie ein
   Platz, der auf etwas wartet. */
/* Die leere Karte hat keine Wertezeilen, dafuer einen Knopf mit langer
   Aufschrift - sie darf sich mehr Textspalte nehmen als die gefuellte.
   Die Marke steht auf der KARTE, weil das Raster und die linke Kante des
   Werkstattraums sie dort ablesen. */
.bike-leer { --bike-text-anteil: 0.56; }
.bike-leer .bike-leer-text {
  grid-column: 1;
  grid-row: 1 / -1;
  /* "stretch" statt "center": Die Spalte ist damit so hoch wie die
     Werkstatt daneben, und erst dadurch hat das "margin-top: auto" des
     Knopfes einen Raum, in den es ihn nach unten schieben kann. */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  position: relative;
  /* Ueber der Werkstatt statt darunter: Der Knopf ragt auf schmalen
     Geraeten ein Stueck in die zweite Spalte, und dort lag sonst das
     Vorderrad davor. Die Buehne steht auf z-index 1. */
  z-index: 3;
}
.bike-leer .abzeichen { margin-bottom: 0; }
.bike-leer .widget-name { margin: 0; }
/* "width: max-content" statt "auto": In einer Spalte mit
   "align-items: flex-start" bekommt ein Kind hoechstens die Breite der
   Spalte - und die ist hier 46 Prozent der Karte, auf einem 375 Punkte
   breiten Geraet also 143. "Motorrad eintragen" braucht 194 und brach
   dadurch auf zwei Zeilen um. Mit max-content nimmt der Knopf seine
   natuerliche Breite und ragt ein Stueck in die ausgeblendete linke Kante
   der Werkstatt hinein, wo nichts steht. */
.bike-leer .btn { margin-top: auto; width: max-content; flex: 0 0 auto; white-space: nowrap; padding: 12px 16px; }
/* Die Buehne fuellt wie bei der gefuellten Karte die rechte Spalte ueber
   alle Zeilen. */
.bike-leer .bike-buehne { grid-column: 2; grid-row: 1 / -1; }
/* Angemeldet, aber noch ohne Motorrad: Dann steht rechts die Fahrer-Tafel
   statt der Werkstatt, und der Knopf "Motorrad eintragen" ragte auf dem
   Handy in sie hinein (gesehen am 17.09.2026 auf einem iPhone 13). Die
   Tafel ist hier deshalb kleiner, die Textspalte breiter, und die
   Aufforderung "Profilbild einfuegen" entfaellt - der Kreis selbst ist der
   Knopf dafuer und traegt die Beschriftung fuer Vorleser. */
.bike-leer.zeigt-fahrer { --bike-text-anteil: 0.56; }
.bike-leer.zeigt-fahrer .bike-buehne { min-height: 196px; }
/* Der Inhalt der Tafel nimmt ihre ganze Breite: Ohne das schrumpfte er
   auf die Breite seines Kindes, und der leere Kreis (92 Prozent von
   nichts) blieb ein kleiner Knopf, waehrend das Foto gross war. */
.bike-leer.zeigt-fahrer .fahrer-plakette-inhalt { width: 100%; gap: var(--s2); }
.bike-leer.zeigt-fahrer .fahrer-bild { width: 100px; max-width: 80%; }
.bike-leer.zeigt-fahrer .fahrer-bild.fahrer-leer .ic { width: 36px; height: 36px; }
.bike-leer.zeigt-fahrer .fahrer-name { max-width: 100px; font-size: 10.5px; letter-spacing: 0.1em; line-height: 1.3; white-space: normal; }

/* ---------- Die Abschnitte ----------
   Kopfzeile (Titel links, "Alle ansehen" rechts) und darunter die Karten.
   Der Abschnitt selbst ist KEIN Glas - die Karten darin sind es. So sieht
   es aus wie die gruppierten Listen von iOS: Titel ueber der Gruppe. */
.start-abschnitt { display: flex; flex-direction: column; gap: var(--s3); }
.start-abschnitt .garage-shop-kopf { margin-bottom: 0; }
.start-abschnitt .produkt-band { margin: 0 calc(-1 * var(--s4)); padding: var(--s1) var(--s4); }
.start-seite .produkt-karte {
  background: var(--glas-hell);
  border: 1px solid var(--glas-rand);
  box-shadow: inset 0 1px 0 var(--glas-heller);
}
.start-abschnitt .garage-merkliste-leer { align-items: flex-start; }

/* ---------- Die Reisekarte ----------
   Kartenbild links, rechts Name und drei Zeilen, unten ueber die volle
   Breite der Knopf "Weiterplanen". Die ganze Karte ist ein Knopf
   (einstieg.js), der Knopf darin nur die Aufforderung. */
/* ---------- Die Reisekarte ----------
   Sie ist der Zwilling der Bike-Karte und benutzt dieselben Bausteine
   (.widget-kopf, .widget-name, .widget-inhalt, .widget-werte,
   .widget-knopf). Hier steht nur, was sie unterscheidet: rechts das
   Kartenbild statt der Werkstatt.

   Sie heisst .reise-widget und NICHT .reise-karte - den Namen traegt schon
   das Karten-SVG aus reise.js. Vor dem Vergeben eines Klassennamens einmal
   grep, das ist hier zum zweiten Mal aufgefallen. */
.reise-widget {
  border-radius: var(--r-xl);
  /* Damit das Kartenbild bis an die Kante laufen darf, ohne die Ecke der
     Karte zu ueberstehen. */
  overflow: hidden;
}
.reise-bild {
  position: relative;
  display: block;
  padding: 0;
  /* Eingefasst mit gleichem Rand rundum und vier runden Ecken, wie in der
     Vorlage. Randlos bis an die Kartenkante war es kurz - dort lag es um
     die Rahmenlinie der Karte versetzt und die Ecke unten links stritt mit
     der Kartenrundung. */
  margin: 0;
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  /* Damit die Karte auch bei einem kurzen Namen etwas hermacht. */
  min-height: 212px;
  background: var(--raum-dunkel);
  transition: transform 0.15s cubic-bezier(0.2,0.8,0.2,1);
}
.reise-bild:active { transform: scale(0.985); }
/* .tour-vorschau ist die Vorschau der TOURENLISTE: Dort sitzt sie oben in
   der Karte, ist deshalb nur oben gerundet, hat negative Margen und ein
   festes Seitenverhaeltnis von 640:280. Hier steht sie in einem eigenen
   Fenster - alle vier Ecken rund, keine Margen, kein festes Verhaeltnis. */
.reise-bild .tour-vorschau {
  position: absolute;
  inset: 0;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
  border-bottom: 0;
  background: none;
}
.reise-bild svg { display: block; width: 100%; height: 100%; }
/* Die Einladung, solange keine Reise geplant ist. Sie spiegelt die leere
   Bike-Karte darueber: links Abzeichen, Name und der blaue Knopf, rechts
   das Symbolbild. Dadurch stehen die beiden blauen Knoepfe der Startseite
   untereinander an derselben Kante. */
.reise-einladung {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  column-gap: var(--s3);
  align-items: stretch;
}
.reise-einladung-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
}
.reise-einladung .abzeichen { margin-bottom: 0; }
.reise-einladung .widget-name { margin: 0; }
/* "margin-top: auto" schiebt den Knopf an den unteren Rand der Spalte, auf
   die Hoehe der Bildunterkante. "flex: 0 0 auto" ist noetig, weil .btn
   sonst mit flex: 1 die ganze Resthoehe fuellt. */
.reise-einladung-text .btn { margin-top: auto; width: max-content; flex: 0 0 auto; }
/* Das Symbolbild ist kein Knopf wie das Kartenbild einer echten Reise -
   es fuehrt nirgendwohin, es zeigt nur, was hier entstehen kann. Deshalb
   kein Zeigerwechsel und kein Druckeffekt. */
.reise-einladung .reise-bild { cursor: default; display: block; }
.reise-einladung .reise-bild:active { transform: none; }

/* ---------- Das Fenster zum Anlegen und Aendern ----------
   Es liegt ueber allem, auch ueber der unteren Leiste (z-index hoeher als
   deren 900), sonst haette man beim Tippen im Formular die Navigation unter
   den Fingern. */
.garage-dialog {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--schatten-stark);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.garage-dialog-blatt {
  width: 100%;
  max-width: 520px;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  border-radius: 24px 24px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 560px) {
  .garage-dialog { align-items: center; }
  .garage-dialog-blatt { border-radius: 24px; max-height: 86dvh; }
}

.garage-dialog-kopf {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s4) var(--s3);
  border-bottom: 1px solid var(--glas-hell);
}
.garage-dialog-kopf h3 {
  margin: 0;
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 21px;
  text-transform: uppercase;
}
/* Das Kreuz zum Schliessen: so gross wie ein Daumen, mit einem Zeichen,
   das man sieht - Friedrich fand es ueberall zu klein. */
.garage-dialog-kopf .glas-rund.klein { width: 48px; height: 48px; font-size: 30px; line-height: 1; }

.garage-dialog-inhalt {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.garage-dialog-inhalt label {
  margin-top: var(--s3);
  font-size: 12px;
  color: var(--muted);
}
.garage-dialog-inhalt input,
.garage-dialog-inhalt select,
.garage-dialog-inhalt textarea {
  /* Ein <input> bringt eine eigene Wunschbreite von etwa 20 Zeichen mit. In
     einem Raster aus 1fr-Spalten gewinnt diese Wunschbreite und schiebt das
     Feld ueber den Rand hinaus - width und min-width nehmen ihr das. */
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--glas-rand);
  background: var(--glas-hell);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  box-shadow:
    inset 0 1px 0 var(--glas-rand),
    inset 0 2px 5px var(--schatten-hauch);
}
.garage-dialog-inhalt textarea { resize: vertical; line-height: 1.45; }
.garage-dialog-inhalt input:focus,
.garage-dialog-inhalt select:focus,
.garage-dialog-inhalt textarea:focus { outline: none; border-color: var(--accent-hell); }

/* Waehrend die technischen Daten geholt werden, pulsiert das Feld leicht.
   Ohne das saehe es aus, als passiere nichts. */
.garage-dialog-inhalt input.wird-geholt {
  border-color: var(--accent-hell);
  animation: holen 1s ease-in-out infinite;
}
@keyframes holen { 50% { opacity: 0.55; } }

/* Der Gruss ueber dem Formular, wenn der Motorrad-Dialog aus der
   Registrierung kommt. Abgesetzt durch einen Strich, damit klar ist: Das
   ist die Einordnung, darunter faengt das Formular an. */
.dialog-willkommen {
  margin: 0 0 var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--glas-hell);
}

.dialog-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.dialog-paar > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dialog-paar label { margin-top: var(--s3); }

.btn.klein { flex: 0 0 auto; padding: 7px 11px; font-size: 12.5px; }

/* ---------- Die Anleitung vor der Fotoauswahl ----------
   Liegt ueber dem Garage-Dialog (dessen z-index ist 1200), denn sie wird
   aus ihm heraus geoeffnet. Mittig statt am unteren Rand: Es ist kein
   Formular, das man ausfuellt, sondern etwas zum Lesen. */
.foto-tipp {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  background: var(--schatten-stark);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.foto-tipp-blatt {
  width: 340px;
  max-width: 100%;
  padding: var(--s5);
  border-radius: var(--r-lg);
  text-align: center;
}
.foto-tipp-symbol { color: var(--accent-hell); margin-bottom: var(--s2); }
.foto-tipp-blatt h3 {
  margin: 0 0 var(--s4);
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Die Punkte linksbuendig, obwohl die Tafel mittig ist: Eine Aufzaehlung
   mittig zu setzen macht sie schwerer lesbar, weil jede Zeile woanders
   anfaengt. Der Punkt davor ist gezeichnet statt vom Browser, damit er in
   der Signalfarbe steht. */
.foto-tipp-liste {
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.foto-tipp-liste li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}
.foto-tipp-liste li::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-hell);
}
.foto-tipp-liste strong { color: var(--text); font-weight: 600; }

.foto-tipp-knoepfe { display: flex; gap: var(--s2); }

/* ---------- Das eigene Foto im Dialog ---------- */
.foto-feld {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s4);
  padding: var(--s3);
  border-radius: var(--r-md);
  border: 1px solid var(--glas-hell);
  background: var(--glas-hauch);
}
.foto-feld-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}
.foto-feld .label { margin: 0; }
.foto-feld .hint { margin: 0; }
.foto-vorschau:empty { display: none; }
.foto-vorschau { display: flex; flex-direction: column; gap: var(--s2); }
.foto-bild {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--glas-hell);
  /* Schachbrett, damit man sieht, wo das Bild durchsichtig ist. Ohne das
     koennte man nach dem Freistellen nicht beurteilen, ob es geklappt hat. */
  background-color: var(--surface);
  background-image:
    linear-gradient(45deg, var(--glas-hauch) 25%, transparent 25%, transparent 75%, var(--glas-hauch) 75%),
    linear-gradient(45deg, var(--glas-hauch) 25%, transparent 25%, transparent 75%, var(--glas-hauch) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
.foto-bild img { width: 100%; height: 150px; object-fit: contain; display: block; }
.foto-knöpfe { display: flex; gap: var(--s2); flex-wrap: wrap; }

.garage-dialog-fuss {
  flex: 0 0 auto;
  display: flex;
  gap: var(--s2);
  padding: var(--s3) var(--s4) var(--s4);
  border-top: 1px solid var(--glas-hell);
}
.garage-dialog-fuss .btn.ghost { flex: 0 0 auto; color: var(--danger); }

/* Der Fuss der Abmelde-Frage: zwei gleichwertige Wege untereinander statt
   nebeneinander. "Abmelden und Geraet leeren" passt in keine halbe Zeile,
   und der zweite Knopf ist kein Loeschen - deshalb bekommt er hier auch
   nicht die Warnfarbe, die .garage-dialog-fuss .btn.ghost sonst setzt. */
.abmelden-fuss { flex-direction: column; }
.abmelden-fuss .btn { width: 100%; flex: 0 0 auto; }
.abmelden-fuss .btn.ghost { color: var(--text); }

/* ---------- Der Motorrad-Finder im Dialog ----------
   Marke als Knopfreihe, weil die Fahrzeugdatenbank 1684 Marken kennt und
   die allermeisten davon amerikanische Kleinstserien sind. Zwoelf Knoepfe
   decken ab, was in Deutschland tatsaechlich faehrt; fuer alles andere gibt
   es darunter die Suche. */
.finder {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  margin-bottom: var(--s3);
  border-radius: var(--r-md);
  border: 1px solid var(--glas-hell);
  background: var(--glas-hauch);
}
.finder .label { margin: 0; }
.finder .hint { margin: 0; }
.finder .dialog-paar label:first-child,
.finder > label { margin-top: var(--s2); }

.finder-marken { display: flex; flex-wrap: wrap; gap: 6px; }

.marken-chip,
.modell-chip {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--glas-rand);
  background: var(--glas-hauch);
  color: var(--muted);
  font-family: var(--schrift-text);
  font-size: 12.5px;
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.marken-chip:hover,
.modell-chip:hover { color: var(--text); border-color: var(--glas-licht); }
.marken-chip.active,
.modell-chip.active {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

/* Die Modelltreffer koennen je nach Marke und Jahr siebzig Eintraege sein.
   Ohne Hoehenbegrenzung waere der halbe Dialog eine Knopfwueste, deshalb
   scrollt der Kasten in sich. */
.finder-modelle {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 132px;
  overflow-y: auto;
  padding: 2px;
}
.finder-modelle .tiny { margin: 0; width: 100%; }

/* Die Trefferliste der Markensuche liegt direkt unter dem Eingabefeld und
   soll den Dialog nicht laenger machen, sondern in sich scrollen. */
.garage-dialog-inhalt .search-results {
  position: static;
  max-height: 180px;
  margin: 0;
}

/* ============================================================================
   Der Freisteller

   Ein Vollbildfenster ueber allem. Aufbau von oben nach unten: Kopfzeile,
   Buehne mit dem Foto, Regler, Werkzeugleiste. Die Buehne nimmt sich den
   Rest - genau wie in der Garage selbst, damit es sich vertraut anfuehlt.

   Das SCHACHBRETT unter dem Foto ist keine Zierde: Ohne es koennte man gar
   nicht sehen, wo das Bild durchsichtig geworden ist, und damit das Ergebnis
   nicht beurteilen.
   ============================================================================ */

.frei-fenster {
  position: fixed;
  inset: 0;
  z-index: 1400;          /* ueber dem Garagen-Dialog (1200) */
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.frei-kopf {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--glas-hell);
}
.frei-kopf h3 {
  margin: 0;
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: var(--schrift-display);
  font-weight: 700;
  /* Auf 320 Pixeln brach die Zeile sonst um und die Kopfzeile wurde doppelt
     so hoch - Platz, der der Buehne fehlt. */
  font-size: clamp(14px, 4.4vw, 17px);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.frei-kopf .btn.klein { padding: 8px 16px; font-size: 14px; }

/* Der Fortschrittsbalken beim Laden und Rechnen.

   Zwei Zustaende, und der Unterschied ist Absicht:

     mit Klasse "unbestimmt"   ein Streifen laeuft durch, KEINE Zahl. Fuer
                               Schritte, deren Dauer sich nicht messen laesst.
     ohne                      die Fuellung waechst auf einen echten Anteil,
                               daneben steht, wieviel von wieviel geladen ist.

   Ein erfundener Prozentwert waere schlimmer als gar keiner: Er weckt eine
   Erwartung, die das Programm nicht einloesen kann. */
.frei-fortschritt {
  flex: 0 0 auto;
  padding: var(--s3) var(--s4) 0;
}

.frei-fortschritt-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--muted);
}
.frei-fortschritt-zeile span:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.frei-balken {
  height: 4px;
  border-radius: 2px;
  background: var(--glas-hell);
  overflow: hidden;
}
.frei-balken-füllung {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--accent);
  transition: width 0.18s linear;
}

/* Der laufende Streifen. Er ist bewusst schmal und wandert von links nach
   rechts wieder heraus - so ist auf einen Blick klar, dass hier nichts
   gezaehlt wird, sondern nur etwas arbeitet. */
.frei-fortschritt.unbestimmt .frei-balken-füllung {
  width: 34%;
  transition: none;
  animation: balken-wandern 1.15s ease-in-out infinite;
}
@keyframes balken-wandern {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(330%); }
}
/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt statt der
   Wanderung einen ruhig pulsierenden Balken ueber die volle Breite. */
@media (prefers-reduced-motion: reduce) {
  .frei-fortschritt.unbestimmt .frei-balken-füllung {
    width: 100%;
    animation: balken-pulsen 1.6s ease-in-out infinite;
  }
  @keyframes balken-pulsen {
    0%, 100% { opacity: 0.30; }
    50%      { opacity: 1; }
  }
}

.frei-buehne {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s3);
  overflow: hidden;
  /* Verhindert, dass ein Wisch ueber die Leinwand die Seite dahinter
     mitzieht - auf dem Handy sonst ein sicherer Weg, den Strich zu verlieren. */
  overscroll-behavior: contain;
}

.frei-leinwand {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--r-md);
  /* OHNE touch-action: none nimmt der Browser das Wischen als Scrollen und
     der Pinsel bekommt die Bewegung nie zu sehen. */
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  background-color: var(--surface);
  background-image:
    linear-gradient(45deg, var(--glas-hauch) 25%, transparent 25%, transparent 75%, var(--glas-hauch) 75%),
    linear-gradient(45deg, var(--glas-hauch) 25%, transparent 25%, transparent 75%, var(--glas-hauch) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
  box-shadow: 0 10px 40px var(--schatten-stark);
}

.frei-regler { flex: 0 0 auto; padding: 0 var(--s4); }
.frei-zeile {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
}
.frei-zeile label {
  flex: 0 0 auto;
  width: 108px;
  font-family: var(--schrift-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.frei-zeile .slider {
  flex: 1;
  margin: 0;
  background: var(--glas-rand);
}
.frei-zeile output {
  flex: 0 0 auto;
  width: 30px;
  text-align: right;
  font-family: var(--schrift-display);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

.frei-werkzeuge {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  padding: var(--s2) var(--s3) var(--s3);
}
.frei-werkzeug {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px 2px;
  border-radius: 14px;
  border: 1px solid var(--glas-hell);
  background: var(--glas-hauch);
  color: var(--muted);
  cursor: pointer;
  font-family: var(--schrift-display);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.frei-werkzeug span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frei-werkzeug:hover:not(:disabled) { color: var(--text); background: var(--glas-hell); }
.frei-werkzeug.active {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}
.frei-werkzeug:disabled { opacity: 0.35; cursor: not-allowed; }

/* =========================================================================
   SHOP

   Der Preisvergleich fuer Ausruestung. Fast alles hier benutzt Bausteine,
   die es schon gibt (.saved-list, .stats, .marken-chip, .accordion) -
   dieser Abschnitt ergaenzt nur, was dem Shop allein gehoert.
   ========================================================================= */

/* Der Demo-Balken. Er sagt auf beiden Shop-Bildschirmen unuebersehbar,
   dass alle Preise Beispieldaten sind. Warmes Orange statt Markenblau,
   weil es eine Warnung ist und keine Schmuckfarbe - dieselbe Logik wie
   bei der Kurvigkeits-Skala, die auch nicht im Markenton faerbt. */
/* Der Kopf des Ausruestungs-Bildschirms: Ueberschrift links, der kurze
   Weg zur Merkliste rechts. Sie soll von hier aus einen Tipp entfernt
   sein, nicht am unteren Ende einer langen Liste. */
.ausruestung-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}
.ausruestung-kopf h2 { margin: 0; }
.merk-schnellweg { display: inline-flex; align-items: center; gap: 6px; width: auto; }
.merk-schnellweg .ic { width: 16px; height: 16px; }

/* Die Suche der Ausruestung: gross, ganz oben, mit der Lupe im Feld.
   Wer weiss, was er will, soll nicht erst an Regalen vorbei. */
.ausruestung-suche { margin: var(--s4) 0 var(--s3); }
.ausruestung-suche .search-input {
  padding: 15px 18px 15px 50px;
  font-size: 17px;
}
.suche-symbol {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  color: var(--muted);
  pointer-events: none;
}

/* Die Warengruppen als EINE wischbare Zeile, wie die Leisten in der
   Garage: Der Anschnitt am rechten Rand sagt, dass es weitergeht. Der
   negative Rand laesst die Zeile bis an die Bildschirmkante laufen,
   das Innenpolster bringt den ersten Chip wieder auf die Textkante. */
.warengruppen-band {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--s4)) var(--s3);
  padding: 2px var(--s4) var(--s2);
  scroll-snap-type: x proximity;
  /* Ohne das rastete der erste Chip ("Alle") beim Laden am Rand des
     Rollbereichs ein und der Innenabstand links war weggescrollt - der
     Chip klebte an der Fensterkante, waehrend alles darueber eingerueckt
     stand. Die Rastung soll den Innenabstand mitrechnen. */
  scroll-padding-inline: var(--s4);
}
.warengruppen-band::-webkit-scrollbar { display: none; }
.warengruppen-band .marken-chip {
  scroll-snap-align: start;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  white-space: nowrap;
}

/* Die Produktzeilen als Glaskarten: groesseres Foto, der Preis in der
   Anzeigeschrift, die Warengruppe als leise Zeile darueber. */
.produkt-liste { display: flex; flex-direction: column; gap: var(--s2); }
.produkt-liste li {
  padding: var(--s2);
  border-radius: var(--r-md);
  border: 1px solid var(--glas-hell);
  background: var(--glas-hauch);
  box-shadow: inset 0 1px 0 var(--glas-rand);
}
.produkt-liste .produkt-mini-bild { width: 88px; height: 88px; }
.produkt-liste .saved-name { white-space: normal; line-height: 1.3; }
.produkt-liste .saved-meta { font-size: 13px; }
.produkt-liste .saved-meta .badge.anzeige { margin-left: 2px; }
.merk-zahl {
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* Der Herz-Knopf. Er sitzt an jeder Produktkarte, und die ganze Zeile
   darunter ist klickbar - deshalb hebt er sich mit eigener Flaeche ab und
   ist gross genug fuer einen Daumen. */
.merk-herz {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--glas-rand);
  background: var(--glas-hell);
  color: var(--muted);
  cursor: pointer;
  transition: color .14s ease, background .14s ease;
}
.merk-herz .ic { width: 20px; height: 20px; }
.merk-herz.ist-gemerkt { color: var(--danger); background: var(--glas-heller); }

/* Der Titel der Produktseite mit dem Herz daneben. */
.produkt-kopf { display: flex; align-items: flex-start; gap: var(--s3); }
.produkt-kopf .produkt-titel { flex: 1 1 auto; }

/* Ein Eintrag der Merkliste, dessen Produkt nicht mehr im Katalog steht:
   sichtbar blass, aber nicht weg. Der Name bleibt lesbar, denn er wird
   beim Merken mitgespeichert. */
.saved-list li.fehlt { opacity: .55; }

/* Die Bildergalerie der Produktseite: ein wischbares Band, jedes Bild
   eine volle Breite, scroll-snap laesst es beim Loslassen einschnappen.
   Hier stehen spaeter die echten Produktfotos aus dem Haendlerkatalog;
   bis die Bildlizenz gesichert ist, malt die App das Kategorie-Symbol
   mit einer ehrlichen Beschriftung. */
.galerie { margin-bottom: var(--s3); }
.galerie-band {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* das Band selbst zeigt, wo man ist */
  border-radius: var(--r-md);
  gap: var(--s2);
}
.galerie-band::-webkit-scrollbar { display: none; }
.galerie-bild {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--s2);
  /* Kein festes Mass mehr, sondern 3:2 von der Breite her, nach oben
     gedeckelt: Auf dem Handy wird der Rahmen so etwa 240 Punkte hoch, am
     Schreibtisch nicht hoeher als 320 - und er passt sich der Spalte an. */
  aspect-ratio: 3 / 2;
  max-height: 320px;
  position: relative;         /* Anker fuer das Foto, siehe unten */
  margin: 0;
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-md);
  background: var(--glas-hell);
}
/* Mit Foto wird der Rahmen weiss, denn alle Haendlerfotos kommen auf
   weissem Grund - auf Glas stuende sonst ein weisses Rechteck im grauen
   Kasten. Dasselbe wie bei .produkt-mini-bild img. */
.galerie-bild.mit-foto { background: var(--accent-ink); border-color: var(--accent-ink); }
.galerie-bild .ic { width: 84px; height: 84px; color: var(--accent-hell); }
/* Das Foto bekommt seine natuerliche Groesse und wird NUR verkleinert,
   nie vergroessert - vergroessern macht es unscharf. Die Obergrenze
   setzt produktseite.js aus den Bildpunkten des Fotos (begrenzeProduktBild).
   Absolut verankert und mit margin:auto zentriert, aus demselben Grund wie
   bei .produkt-mini-bild img: So kann es gar nicht anders, als in den
   Rahmen zu passen. */
.galerie-bild img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  /* Das kleinere von beiden: der Rahmen oder die scharfe Groesse des
     Fotos. Ohne gesetzte Variable gilt allein der Rahmen. */
  max-width: min(100%, var(--foto-breite, 100%));
  max-height: min(100%, var(--foto-hoehe, 100%));
  object-fit: contain;
  border-radius: var(--r-md);
}
.galerie-bild figcaption { color: var(--muted); font-size: 12px; }
.galerie-punkte {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--s2);
}
.galerie-punkte span {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--glas-licht);
  transition: background 0.2s ease, transform 0.2s ease;
}
.galerie-punkte span.aktiv {
  background: var(--accent-hell);
  transform: scale(1.3);
}

/* Die Bildkachel in den Listen: gross genug, dass ein echtes Foto etwas
   zeigt, bis dahin das Kategorie-Symbol auf Glas. */
/* 74 statt 58 Punkte (ein knappes Viertel mehr): Ein Reifen ist ein
   dunkler Ring auf hellem Grund - bei 58 Punkten war vom Profil nichts
   mehr zu erkennen, und genau das Profil unterscheidet die Modelle. */
.produkt-mini-bild {
  flex: 0 0 auto;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  position: relative;         /* Anker fuer das Foto, siehe unten */
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-sm);
  background: var(--glas-hell);
}
.produkt-mini-bild .ic { width: 38px; height: 38px; color: var(--accent-hell); }
/* Das Foto wird absolut in den Kasten gespannt statt mit height:100%
   in den Fluss gestellt: Ein Prozent-Mass loest sich im Raster am
   Seitenverhaeltnis des Bildes auf, und das Foto ragte dann unten aus
   dem Kasten heraus - mitten in die Beschriftung. Absolut verankert
   kann es gar nicht anders, als in den Kasten zu passen. */
.produkt-mini-bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: var(--accent-ink);   /* die Fotos kommen auf weissem Grund */
}

.produkt-titel { margin: 0; }
.produkt-kategorie { margin: 2px 0 var(--s3); }

/* Die Produktseite steht auf Schwarz, nicht auf dem weichgezeichneten
   Startfoto wie die uebrigen Listenbildschirme: Hier traegt das
   Produktfoto in seinem weissen Rahmen das Bild, und ein zweites Foto
   dahinter machte die Seite unruhig. Entschieden am 05.09.2026. */
#shopProduktScreen { background: var(--bg); }

/* Die Groessen als stumme Chips - reine Information, keine Auswahl.
   Gewaehlt wird die Groesse spaeter im Shop, nicht hier. */
.groessen-reihe { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s3); }
.shop-groesse {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glas-rand);
  background: var(--glas-hell);
  color: var(--muted);
  font-size: 12px;
}

.produkt-daten { margin-bottom: var(--s3); }
.meinung-text { margin: 0; font-size: 14px; line-height: 1.55; }

/* Eine Angebotszeile traegt mehr Zeilen als eine Tour in "Meine Touren",
   deshalb bekommt der Text etwas Luft nach innen. Das Abzeichen "Anzeige"
   steht in derselben Groesse wie der Platzname - eine Kennzeichnung, die
   kleiner gedruckt ist als das, was sie kennzeichnet, kennzeichnet nichts. */
.angebots-liste .saved-text { gap: 2px; }
/* Darf umbrechen: Mit Abzeichen, Haendlername und "guenstigstes" ist die
   Zeile auf dem Handy zu voll fuer eine Reihe, und ein abgeschnittener
   Haendlername waere im Vergleich das Schlimmste. */
.angebot-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.angebot-kopf .saved-name { white-space: normal; }
.angebot-kopf .badge.anzeige { font-size: 13px; color: var(--muted); }

/* Der Gesamtpreis ist DIE Zahl des Vergleichs und steht deshalb im
   Instrumenten-Stil, wie die Messwerte im Rest der App. */
.angebot-gesamt {
  font-family: var(--schrift-display);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* "Fuer dich": der Grund eines Vorschlags in der Akzentfarbe - er ist
   das Besondere an dieser Liste. Der leere Zustand (noch kein Motorrad
   in der Garage) ist eine Glaskarte mit Abkuerzung dorthin. */
.vorschlag-block { margin-top: var(--s3); padding: 0; background: none; border: 0; box-shadow: none; }
.vorschlag-leer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-md);
  margin-bottom: var(--s3);
}
.vorschlag-leer .hint { margin: 0; }
.vorschlag-leer .btn { flex: 0 0 auto; }

/* Der Merken-Knopf nimmt die volle Breite unter dem Preisvergleich ein -
   er ist die einzige Handlung auf der Seite, die nichts kostet. */
.merken-knopf { width: 100%; margin-top: var(--s3); }

/* "Direkt zu den Shops": dieselben Chips wie bei den Kategorien, nur
   dass sie nach draussen fuehren. */
.shop-links { display: flex; flex-wrap: wrap; gap: 6px; }

/* Die Shop-Leiste in der Garage: eine schmale, wischbare Reihe aus
   Karten. Sie bleibt bewusst klein - die Buehne mit der Maschine ist der
   Star der Seite, der Shop ist das, was man beim Weiterscrollen findet. */
/* Derselbe Innenabstand wie bei den anderen Platten - sonst steht die
   Ueberschrift der Leiste vier Punkte weiter links als der Motorradname
   darueber, und das faellt genau dann auf, wenn beides untereinander steht. */
.garage-shop-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
/* Die EINE Form fuer Abschnittstitel ueber Kartenreihen (seit dem
   05.09.2026; vorher drei Groessen 15/17/18): gemischt, 17 Punkte, eng.
   Der Titel darf umbrechen, "Alle ansehen" nicht. */
.garage-shop-kopf h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  font-family: var(--schrift-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--metall-glanz);
}
.garage-shop-kopf h3 .ic { width: 18px; height: 18px; color: var(--danger); }
.garage-shop-kopf .linkbtn { flex: 0 0 auto; white-space: nowrap; text-decoration: none; font-size: 15px; }

/* ---------- Produktkarten, Baender, Raster, Regale ----------
   EINE Karte fuer alles, was Produkte nebeneinander zeigt: die Leisten in
   der Garage, die Regale der Ausruestung, die Vorschlaege. Das HTML dazu
   baut produktKarte() in shop.js. */
/* ---------- Der direkte Weg in die Shops ----------
   Eine wischbare Zeile aus Karten, ganz oben im Schaufenster. Sie ist
   BEWUSST keine Produktkarte: kein Bild, kein Preis, nur Name, Halbsatz
   und Pfeil. Wer hier tippt, sucht kein Angebot, sondern einen Laden -
   und soll die Zeile auf einen Blick ueberfliegen koennen.

   Die Kacheln sind schmaler als eine Produktkarte und alle gleich breit,
   damit die Zeile ruhig bleibt: Sechs Haendler mit unterschiedlich langen
   Namen ergaeben sonst ein Zickzack. */
.shop-leiste { margin-bottom: var(--s5); }
.shop-leiste-band {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  /* Luft fuer Schatten und Fokusrand, wie beim Produktband darunter. */
  padding: 3px 3px var(--s2);
  margin: 0 calc(-1 * var(--s1));
}
.shop-leiste-band::-webkit-scrollbar { display: none; }
/* Der Vorsatz ".shop-leiste-band" ist noetig und kein Zierrat: Weiter oben
   steht "button.karte { width: 100% }", und das ist ein Selektor aus
   Element UND Klasse - er schlaegt ein blosses ".shop-kachel". Ohne den
   Vorsatz war jede Kachel so breit wie das Fenster und von sechs
   Haendlern sah man einen. */
.shop-leiste-band .shop-kachel {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 172px;
  padding: var(--s3);
  border-radius: var(--r-lg);
  display: grid;
  /* Drei Zeilen: Name oben, Satz darunter, Pfeil unten rechts. Die
     mittlere waechst, damit der Pfeil bei allen Kacheln auf einer Hoehe
     sitzt - auch bei einem Halbsatz, der nur eine Zeile braucht. */
  grid-template-rows: auto 1fr auto;
  gap: 4px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.2,0.8,0.2,1), background 0.15s ease;
}
.shop-kachel:hover { background: var(--glas-heller); }
.shop-kachel:active { transform: scale(0.97); }
.shop-kachel-name {
  font-family: var(--schrift-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
}
.shop-kachel-satz {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
}
/* Blau, weil er das Anklickbare ist - dieselbe Rolle wie der Pfeil an der
   Planer-Wahlkarte. */
.shop-kachel-pfeil {
  justify-self: end;
  font-size: 18px;
  line-height: 1;
  color: var(--accent-hell);
}

.produkt-band {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Etwas Luft, damit Schatten und Fokusrand nicht abgeschnitten werden. */
  padding: 3px 3px var(--s2);
  margin: 0 calc(-1 * var(--s1));
}
.produkt-band::-webkit-scrollbar { display: none; }
/* Zwei nebeneinander, die Karte so breit wie die Spalte. */
.produkt-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
}
/* Jede Karte ist eine kleine Glasplatte: das Bild oben auf hellem Grund,
   das Herz darauf, darunter Name und Preis. Im Band 148 Punkte breit -
   drei Karten sind auf einem Handy angeschnitten zu sehen, und der
   Anschnitt sagt, dass man wischen kann. Im Raster so breit wie die
   Spalte. */
.produkt-karte {
  position: relative;
  flex: 0 0 148px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: var(--s2);
  border-radius: var(--r-md);
  border: 1px solid var(--glas-hell);
  background: var(--glas-hauch);
  box-shadow: inset 0 1px 0 var(--glas-rand);
  color: var(--text);
  text-align: left;
  font-family: var(--schrift-text);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.produkt-karte:hover { background: var(--glas-hell); transform: translateY(-2px); }
.produkt-karte:active { transform: scale(0.97); }
.produkt-karte .produkt-mini-bild { width: 100%; height: 96px; }
.produkt-raster .produkt-karte { flex: 1 1 auto; }
.produkt-raster .produkt-mini-bild { height: 124px; }
/* Das Herz liegt auf dem Foto, oben rechts, mit dunklem Grund, damit es
   auf dem weissen Produktbild nicht verschwindet. */
.karte-herz {
  position: absolute;
  top: calc(var(--s2) + 6px);
  right: calc(var(--s2) + 6px);
  width: 32px;
  height: 32px;
  background: var(--schatten-mittel);
  border-color: var(--glas-rand);
  color: var(--text);
}
.karte-herz .ic { width: 16px; height: 16px; }
.produkt-karte-name {
  font-size: 12.5px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* lange Namen enden nach zwei Zeilen */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.produkt-karte-grund {
  font-family: var(--schrift-display);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--accent-hell);
}
.produkt-karte-meta {
  font-family: var(--schrift-display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.produkt-karte-meta i { font-style: normal; opacity: 0.45; margin: 0 2px; }
/* "2 Shops" hinter einem ab-Preis: Es gibt die Ware bei zwei Haendlern,
   und die Produktseite vergleicht. Klein und leise, aber sichtbar. */
.zwei-shops {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--accent-hell) 45%, transparent);
  color: var(--accent-hell);
  font-family: var(--schrift-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}
/* Das guenstigste Angebot im Vergleich bekommt eine Kante in der
   Signalfarbe und ein Abzeichen - der eine Ort, an dem Blau auf der
   Produktseite etwas bedeutet. */
.angebots-liste li.guenstigstes { border-color: color-mix(in srgb, var(--accent-hell) 45%, transparent); }
.badge.guenstig {
  font-family: var(--schrift-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

/* Ein Regal der Ausruestung: Titel und Grund links, "Alle" rechts, der
   Inhalt darunter in einer von drei Formen (Band, Raster, Zeilen). */
.regal { margin: var(--s5) 0 0; }
.regal-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s3);
  margin: 0 0 var(--s3);
}
.regal-kopf .linkbtn { flex: 0 0 auto; text-decoration: none; font-size: 13.5px; white-space: nowrap; }
.regal-titel {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--s2);
  /* Dieselbe Form wie die Abschnittstitel des Starts (.garage-shop-kopf h3):
     gemischt, 17 Punkte, eng - seit dem 05.09.2026 EINE Form fuer alle
     Titel ueber Kartenreihen. */
  font-family: var(--schrift-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--metall-glanz);
}
.regal-grund { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }

/* ---------- Die Welt-Ansicht ----------
   Kopf mit Zahl und Sortierung, darunter je Facette eine Zeile Chips, dann
   das Raster. Die Facettenzeilen wischen wie die Warengruppen oben. */
.welt-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  margin: var(--s4) 0 var(--s3);
}
.welt-kopf .regal-titel { margin: 0; }
.welt-sortierung { flex: 0 0 auto; margin: 0; }
.welt-sortierung .seg { padding: 6px 12px; font-size: 12.5px; white-space: nowrap; }
.facette { display: flex; align-items: center; gap: var(--s2); margin-bottom: 2px; }
.facette-name {
  flex: 0 0 76px;
  font-family: var(--schrift-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.facette-band { flex: 1 1 auto; min-width: 0; margin: 0 calc(-1 * var(--s4)) 0 0; padding: 2px var(--s4) var(--s2) 0; }
.facette-band .marken-chip i { font-style: normal; opacity: 0.55; margin-left: 4px; font-size: 11px; }
.welt-raster { margin-top: var(--s3); }
.welt-raster .empty { grid-column: 1 / -1; }
.welt-mehr { margin-top: var(--s4); }
/* Das Abzeichen auf der Karte: winzig, unten links, damit auch ein
   Raster aus achtundvierzig Karten an jeder gekennzeichnet ist. */
.produkt-karte .badge.anzeige { font-size: 9px; padding: 0 6px; margin-top: 2px; }

/* Die Merkliste auf dem Start. Hier stand bis zum 11.09.2026 ein blauer
   Schein in der oberen linken Ecke - ein Rest aus der Zeit, als dieser
   Abschnitt noch eine eigene Platte mit Rand und Innenabstand war. Seit
   er ein schlichter .start-abschnitt ist, hatte der Verlauf nichts mehr,
   worin er liegen konnte: Er lag als heller Schleier ueber Ueberschrift
   und Karte. Weg damit - die Ueberschrift mit dem roten Herz reicht als
   Kennzeichnung. */
.garage-merkliste .produkt-karte { flex-basis: 172px; }
.garage-merkliste-leer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.garage-merkliste-leer .hint { margin: 0; }
.garage-merkliste-leer .btn { width: auto; }
.garage-merkliste .produkt-mini-bild { height: 116px; }

/* Waehrend "Punkt auf der Karte setzen" an ist, wird der Zeiger zum
   Fadenkreuz. Auf dem Handy sieht man das zwar nicht, aber die Meldung
   dort sagt es - und am Rechner ist es der schnellste Hinweis darauf,
   dass der naechste Klick etwas anderes tut als sonst. */
body.kartenklick #map { cursor: crosshair; }

/* ---------- Navigation: Glas kostet hier zu viel ----------
   Die beiden Navi-Platten liegen ueber einer Karte, die sich in jedem
   Bild dreht und verschiebt. Ein backdrop-filter muss deshalb in JEDEM
   Bild den Untergrund zurueckholen, herunterrechnen, weichzeichnen und
   neu zusammensetzen - zweimal, ueber die volle Bildschirmbreite. Genau
   das kostet auf dem iPhone die Bildrate.

   Waehrend der Fahrt wiegt Lesbarkeit ohnehin schwerer als Glas: Sonne
   auf dem Display, Handschuhe, ein Blick von einer Sekunde. Deshalb hier
   eine ruhige, fast deckende Flaeche statt einer Linse. */
body.nav-modus .nav-banner,
body.nav-modus .nav-fuss {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--schatten-voll);
}

/* ---------- Bedienung waehrend der Fahrt ----------
   Drei runde Knoepfe am rechten Rand, zwischen Manoevertafel und
   Fahrdatenleiste. Gross genug fuer Handschuhe (48 Punkte), und wie die
   beiden Platten ohne backdrop-filter - hier zaehlt jede Bildrate. */
.nav-knoepfe {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
/* Der Standort-Knopf auf der Planer-Karte. Sitzt unten rechts ueber den
   Leaflet-Bedienelementen, aber ausserhalb der Karte selbst - dieselbe
   Ueberlegung wie bei den Navi-Knoepfen daneben. */
.karten-knopf {
  position: absolute;
  right: var(--s4);
  /* Hoch genug, dass die Schublade mit ihrer runden Oberkante den Knopf
     nicht anschneidet - sie ragt gut 40 Punkt in die Karte hinein. */
  bottom: calc(var(--s7) + var(--s4));
  z-index: 400;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--glas-rand);
  background: var(--schatten-voll);
  backdrop-filter: blur(12px);
  color: var(--text);
  cursor: pointer;
}
.karten-knopf:active { background: var(--glas-heller); }
/* Im Navi-Modus uebernehmen die grossen Knoepfe daneben. */
body.nav-modus .karten-knopf { display: none; }

.nav-rund {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--glas-rand);
  background: var(--schatten-voll);
  color: var(--text);
  font-family: var(--schrift-display);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.nav-rund:active { background: var(--glas-heller); }
/* Der Zentrieren-Knopf traegt die Akzentfarbe: Er erscheint nur, wenn die
   Karte gerade NICHT der Position folgt, und ist dann das Wichtigste auf
   dem Bildschirm. */
#btnNavZentrieren { color: var(--accent-hell); border-color: var(--accent-hell); }
.nav-rund .ic { width: 24px; height: 24px; }

/* Der Schraeglage-Block auf dem Aufzeichnen-Bildschirm. Er steht vor dem
   Start-Knopf, weil der Nullpunkt im Stand gesetzt werden muss. */
.neigung-block {
  margin: var(--s3) 0;
  padding: var(--s3);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-md);
  background: var(--glas-hell);
}
.neigung-block .hint { margin: 0 0 var(--s2); }
.ride-frage { margin: 0 0 var(--s3); line-height: 1.5; }
.neigung-block .hint:last-child { margin: var(--s2) 0 0; }

/* Die Namensnennung waehrend der Navigation. Klein und dezent, aber
   sichtbar - sie ist Pflicht und darf deshalb nicht hinter etwas
   verschwinden. Sitzt ueber der Fahrdatenleiste am linken Rand. */
.nav-quelle {
  position: absolute;
  left: 12px;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 72px);
  margin: 0;
  z-index: 900;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--schatten-mittel);
  color: var(--muted);
  font-size: 10px;
}
.nav-quelle a { color: var(--muted); }

/* Der Suchknopf in den Ortsfeldern. Gesucht wird auf Absenden, nicht
   beim Tippen - der Grund steht in app.js bei der Ortssuche. */
.such-knopf {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--glas-heller);
  color: var(--text);
  cursor: pointer;
}
.such-knopf:active { background: var(--glas-licht); }
/* Sobald im Feld daneben etwas steht, wird aus der Lupe ein Knopf mit
   Wort: "Suchen", blau. Der Grund ist eine Beobachtung, keine Zierde:
   Die App sucht NICHT beim Tippen (siehe app.js, Ortssuche), und wer
   das nicht weiss, tippt, wartet, und passiert nichts. Eine Lupe am
   Rand sagt "hier kann man suchen" - ein blauer Knopf mit Wort sagt
   "jetzt druecken". Das Wort haengt app.js beim Verkabeln in den Knopf. */
.such-knopf .such-wort { display: none; }
.such-knopf.bereit {
  width: auto;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding-inline: var(--s3) var(--s4);
  gap: 6px;
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent-glanz);
  box-shadow: inset 0 1px 0 var(--accent-glanz), 0 6px 16px color-mix(in srgb, var(--accent) 45%, transparent);
}
.such-knopf.bereit .such-wort {
  display: inline;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.such-feld .search-input { padding-right: 48px; }

/* Der Knopf, der die Route wirklich berechnet. */
.route-knopf { width: 100%; margin-top: var(--s3); }
.route-knopf:disabled { opacity: 0.45; cursor: not-allowed; }
#routeKnopfHinweis { margin-top: 6px; text-align: center; }


/* ---------- Meine Stats ----------
   Der Rueckblick ueber die eigenen Ausfahrten (rueckblick.js). Die Bausteine
   sind bewusst die der uebrigen App: Wertekacheln (.stat), der
   Segment-Umschalter, die eingelassene Rinne des Hoehenprofils, Metall fuer
   Ueberschriften und die Signalfarbe fuer genau EINE Zahl - die grosse. */

/* Die grosse Zahl ueber allem. Eine Glaskarte mit einem leisen blauen
   Schein von unten - derselbe Griff wie die Glut hinter den Bergen im
   Startfilm, nur viel zurueckhaltender. */
.stats-held {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s6) var(--s4);
  margin: 0 0 var(--s4);
  border-radius: var(--r-lg);
  border: 1px solid var(--glas-rand);
  background:
    radial-gradient(ellipse 90% 75% at 50% 115%,
      color-mix(in srgb, var(--accent) 32%, transparent) 0%,
      transparent 65%),
    linear-gradient(to bottom, var(--glas-hauch), var(--glas-hauch));
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    inset 0 1px 0 var(--glas-rand),
    inset 0 -1px 0 var(--schatten-hauch);
}
.stats-held-titel {
  font-family: var(--schrift-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: var(--muted);
}
.stats-held-zahl {
  font-family: var(--schrift-display);
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-hell);
  /* Ein leiser Schein in der eigenen Farbe - kein Neon, nur die Lampe
     ueber der Zahl. */
  text-shadow: 0 0 28px color-mix(in srgb, var(--accent-hell) 35%, transparent);
}
.stats-held-zahl i {
  font-style: normal;
  font-size: 22px;
  font-weight: 600;
  margin-left: 6px;
  color: var(--muted);
}
.stats-held-unter { font-size: 13px; color: var(--muted); }

/* Abschnittstitel in der Handschrift von .ride-titel: Anzeigeschrift,
   Versalien, Silber. */
.stats-abschnitt {
  margin: var(--s6) 0 var(--s3);
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--metall-glanz);
}

/* Die Wertekacheln erben alles von .stat; hier steht nur der Abstand der
   Gruppe selbst und die etwas groessere Zahl. */
.stats-kacheln { margin: 0 0 var(--s4); }
.stats-kacheln .stat .v { font-size: 26px; }
.stat.stats-still { grid-column: 1 / -1; align-items: center; padding: var(--s4); }

/* Zeitraumwahl: links der Umschalter Jahr/Monat, rechts die Blaetterpfeile
   mit dem Namen des Zeitraums dazwischen. */
.stats-zeitwahl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin: 0 0 var(--s3);
}
.stats-umschalter { flex: 0 1 220px; margin: 0; }
.stats-blaettern {
  display: flex;
  align-items: center;
  gap: var(--s1);
}
.stats-zeitname {
  min-width: 108px;
  text-align: center;
  font-family: var(--schrift-display);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stats-pfeil {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--glas-hell);
  border-radius: var(--r-sm);
  background: var(--glas-hauch);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s ease;
}
.stats-pfeil:hover { background: var(--glas-hell); }
.stats-pfeil:disabled { opacity: 0.25; cursor: default; background: var(--glas-hauch); }

/* Das Diagramm sitzt in derselben eingelassenen Rinne wie das Hoehenprofil.
   position: relative traegt die kleine Massstab-Angabe oben rechts. */
.stats-diagramm {
  position: relative;
  padding: var(--s3) var(--s3) var(--s2);
  margin: 0 0 var(--s3);
  border-radius: var(--r-md);
  background: var(--schatten-hauch);
  border: 1px solid var(--glas-hell);
  box-shadow: inset 0 2px 6px var(--schatten-weich);
}
.stats-diagramm svg { display: block; width: 100%; height: 110px; }
.stats-diagramm-max {
  position: absolute;
  top: var(--s2);
  right: var(--s3);
  font-family: var(--schrift-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.stats-balken { fill: var(--accent); }
.stats-balken.hervor { fill: var(--accent-hell); }
.stats-balken.leer { fill: var(--glas-hell); }
.stats-achse {
  display: flex;
  justify-content: space-between;
  padding: var(--s1) 2px 0;
}
.stats-achse i {
  font-style: normal;
  font-family: var(--schrift-display);
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
}

/* Rekordzeilen: links Titel und Fahrt, rechts der Wert in der
   Anzeigeschrift. Die Zeilen sind .saved-list-Eintraege und erben deren
   Glas; hier steht nur, was der Rekordwert anders macht. */
.stats-rekord-wert {
  flex: 0 0 auto;
  font-family: var(--schrift-display);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-hell);
}


/* ========================= REIFEN ==========================================

   Der Bildschirm des ersten Partnerprogramms. Drei Teile, von oben nach
   unten: die eigene Maschine, die Groessenwahl, die Angebote.

   Die Gestaltung folgt derselben Ordnung wie der Rest der App - Glas auf
   Schwarz, die Signalfarbe nur dort, wo etwas bedienbar ist. Der einzige
   eigene Gedanke steckt in der Groessenwahl: Sie ist gesetzt wie die
   Praegung auf einer Reifenflanke. */

.reifen-held {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s5) var(--s4);
  margin: 0 0 var(--s3);
  border-radius: var(--r-md);
  border: 1px solid var(--glas-hell);
  /* Der Schein sitzt links unten statt mittig wie bei den Stats: Der Text
     ist linksbuendig, und ein Licht unter der Mitte zoege das Auge von der
     Zeile weg, auf die es ankommt. */
  background:
    radial-gradient(ellipse 80% 90% at 12% 115%,
      color-mix(in srgb, var(--accent) 30%, transparent) 0%,
      transparent 68%),
    linear-gradient(to bottom, var(--glas-hauch), var(--glas-hauch));
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    inset 0 1px 0 var(--glas-rand),
    inset 0 -1px 0 var(--schatten-hauch);
}
.reifen-held-titel {
  margin: 0;
  font-family: var(--schrift-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: var(--muted);
}
.reifen-held-name {
  margin: 0;
  font-family: var(--schrift-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--metall-glanz);
}
.reifen-held-sub {
  margin: var(--s2) 0 0;
  max-width: 42ch;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

.reifen-wahl {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4);
  margin: 0 0 var(--s4);
  border-radius: var(--r-md);
  border: 1px solid var(--glas-hell);
  background: var(--glas-hauch);
}

/* Die Flankenpraegung. Die Auswahlfelder tragen keine eigene Kante - die
   Zeile soll als EIN Schriftzug gelesen werden, nicht als drei Formulare.
   Dass sie bedienbar sind, sagt die Signalfarbe. */
.reifen-mass {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  padding: var(--s2) 0 var(--s1);
}
.reifen-mass-feld {
  -webkit-appearance: none;
  appearance: none;
  padding: 2px 4px;
  border: 0;
  border-bottom: 2px solid color-mix(in srgb, var(--accent-hell) 55%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--accent-hell);
  font-family: var(--schrift-display);
  font-size: 40px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
}
.reifen-mass-feld:focus-visible {
  outline: 2px solid var(--accent-hell);
  outline-offset: 3px;
}
/* Die Auswahlliste selbst zeichnet das Betriebssystem. Sie steht dort auf
   hellem Grund, deshalb bekommt sie die Textfarbe der Seite und nicht die
   der Praegung - sonst waere Blau auf Weiss zu blass. */
.reifen-mass-feld option {
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
}
.reifen-mass-trenner {
  font-family: var(--schrift-display);
  font-size: 34px;
  font-weight: 600;
  color: var(--metall-tief);
}
.reifen-mass-hilfe { text-align: center; margin-top: 0; }
.reifen-mass-hilfe b { color: var(--metall); font-weight: 600; }

.reifen-laden { color: var(--muted); font-size: 13px; text-align: center; padding: var(--s5) 0; }
.reifen-fehler { text-align: center; padding: var(--s4) 0; }
/* Vierzehn Marken ergeben umgebrochen fuenf Zeilen - auf dem Handy waere
   der halbe Bildschirm Filter, bevor der erste Reifen auftaucht. Deshalb
   EINE Zeile, die man zur Seite schiebt; dasselbe Muster wie die
   Shop-Leiste in der Garage. */
.reifen-marken {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 0 var(--s3);
  padding-bottom: 2px;
}
.reifen-marken::-webkit-scrollbar { display: none; }
.reifen-marken .marken-chip { white-space: nowrap; }

/* Die Zaehlung an den Markenchips. Ein eigenes Element, damit sie nicht wie
   Teil des Markennamens aussieht. */
.reifen-marken .marken-chip i {
  font-style: normal;
  margin-left: 5px;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

.reifen-treffer {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin: 0 0 var(--s3);
}
.reifen-treffer-zahl {
  font-family: var(--schrift-display);
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--metall-glanz);
}
.reifen-treffer-text {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
}
.reifen-treffer-text i { font-style: normal; opacity: 0.8; }

.reifen-liste { display: flex; flex-direction: column; gap: var(--s2); }

/* Eine Angebotszeile. Links das Symbol, in der Mitte Marke, Modell und die
   Bezeichnung des Haendlers, rechts Preis und Weg zum Shop. Der Preis steht
   ganz rechts, weil danach verglichen wird. */
.reifen-karte {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  cursor: default;
}
.reifen-symbol {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: var(--r-sm);
  background: var(--glas-hauch);
  border: 1px solid var(--glas-hell);
  color: var(--metall-tief);
}
.reifen-symbol .ic { width: 34px; height: 34px; }
.reifen-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.reifen-marke {
  font-family: var(--schrift-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--metall);
}
.reifen-modell {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.reifen-bezeichnung {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--muted);
  opacity: 0.85;
}
.reifen-meta { font-size: 11.5px; color: var(--muted); }
.reifen-meta i { font-style: normal; opacity: 0.5; margin: 0 3px; }

.reifen-preis-spalte {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.reifen-preis {
  font-family: var(--schrift-display);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text);
}
/* Ein Angebot in der Preisspalte. Bei zwei Haendlern stehen zwei davon
   untereinander; das guenstigste traegt die Signalfarbe am Preis. */
.reifen-angebot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);
  padding-top: 5px;
}
.reifen-angebot + .reifen-angebot { border-top: 1px solid var(--glas-hell); }
.reifen-angebot-text { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.reifen-angebot-shop { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.reifen-angebot-versand { font-size: 11px; color: var(--muted); text-align: right; }
.reifen-angebot.guenstigstes .reifen-preis { color: var(--accent-hell); }
.reifen-angebot .btn.klein { flex: 0 0 auto; }

.reifen-offen { margin-top: var(--s5); }
.reifen-offen b { color: var(--text); font-weight: 600; }

/* ---------- Das Einwilligungs-Blatt ----------
   Gebaut wie der Garagen-Dialog: unten angeschlagen auf dem Handy, mittig
   ab 560 Punkten. Es ist kein Banner, sondern eine Frage an genau einer
   Stelle - deshalb darf es den Bildschirm ruhig fuellen. */
.partner-schleier {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--schatten-stark);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.partner-blatt {
  width: 100%;
  max-width: 520px;
  max-height: 92dvh;
  overflow-y: auto;
  padding: var(--s5) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.partner-blatt h3 {
  margin: 0 0 var(--s3);
  font-family: var(--schrift-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--metall-glanz);
}
.partner-blatt .hint { font-size: 13px; }
.partner-blatt b { color: var(--text); font-weight: 600; }
.partner-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}
.partner-knoepfe .btn { flex: 1 1 160px; }

/* Der Stand der Einwilligung in der Datenschutzerklaerung. Ohne diese
   Zeile waere der Widerrufsknopf ein Knopf ins Nichts. */
.partner-stand {
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  border: 1px solid var(--glas-hell);
  background: var(--glas-hauch);
  font-size: 13px;
  color: var(--text);
}

@media (min-width: 560px) {
  .partner-schleier { align-items: center; }
  .partner-blatt { border-radius: var(--r-lg); }
}
.reifen-mehr { width: 100%; margin-top: var(--s3); }
.reifen-beispielmass { white-space: nowrap; }

/* Auf schmalen Geraeten wird aus der Zeile ein Block: erst Marke, Modell
   und Bezeichnung ueber die volle Breite, darunter eine Leiste mit Preis,
   Kennzeichnung und Weg zum Shop. Nebeneinander bliebe fuer den Namen
   sonst eine Spalte von der Breite eines Daumens. */
@media (max-width: 520px) {
  .reifen-karte { flex-wrap: wrap; }
  /* Symbol und Text bleiben nebeneinander - nur die Preisleiste rutscht
     unter beide. Ein Symbol allein in der ersten Zeile saehe aus, als
     fehle daneben etwas. */
  .reifen-text { flex: 1 1 0; min-width: 60%; }
  /* Die Angebote untereinander, jedes als eigene Zeile ueber die volle
     Breite: Haendler und Preis links, der Knopf rechts. Seit es zwei
     Haendler gibt, passen sie nebeneinander in keine Handybreite. */
  .reifen-preis-spalte {
    flex: 1 1 100%;
    align-items: stretch;
    margin-top: var(--s1);
  }
  /* Die Kennzeichnung wandert in die obere rechte Ecke der Karte, auf
     die Zeile der Marke. Als eigene Zeile ueber den Angeboten stand sie
     allein in der Luft und kostete eine ganze Zeile Hoehe. */
  .reifen-karte { position: relative; }
  .reifen-preis-spalte .badge.anzeige {
    position: absolute;
    top: var(--s2);
    right: var(--s3);
  }
  .reifen-angebot { justify-content: space-between; }
  .reifen-angebot-text { align-items: flex-start; }
  .reifen-angebot-versand { text-align: left; }
}

/* Produktfoto in der Angebotszeile. Die Fotos kommen vom Bildserver des
   Netzwerks auf weissem Grund - deshalb bekommt der Rahmen hier Weiss
   statt Glas, sonst schwebte ein weisses Quadrat in einem grauen Kasten. */
.reifen-foto {
  background: var(--accent-ink);
  overflow: hidden;
}
.reifen-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--r-sm);
}

/* Das Anzeige-Kennzeichen an der Reifen-Leiste der Garage. Neutral statt
   des warnenden Orange des Demo-Vermerks: Es kennzeichnet Werbung, es
   warnt nicht vor ihr. */
/* Die Einladungs-Karte, solange noch keine Reifengroesse gemerkt ist.
   Sie hat dieselbe Breite wie die Angebote daneben - breiter gemacht
   verdraengte sie auf dem Handy genau das, wozu sie einlaedt. Ihr
   Symbolfeld traegt die Signalfarbe, damit sie als Aufforderung zu
   erkennen ist und nicht als Reifen ohne Bild. */
.garage-reifen-einladung .produkt-mini-bild {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  border-color: color-mix(in srgb, var(--accent-hell) 45%, transparent);
}


/* ============================================================
   REISE PLANEN
   Oben die Reisekarte - alle Tage auf einem echten Kartenausschnitt,
   der Name darauf, unten quer ein Glasstreifen mit der Bilanz. Darunter
   der Etappenfaden: je Tag ein Glied aus Nummernscheibe und Tageskarte,
   verbunden durch eine Linie, die im Plus fuer den naechsten Tag endet.
   Der Bauplan mit den drei Entwuerfen und der Bewertung steht in
   doku/ENTSCHEIDUNGEN.md zum 04.09.2026.
   ============================================================ */

/* ---------- Die Liste der Reisen (Bildschirm Touren, Teil Reisen) ---------- */
.reise-neu {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin: 0 0 var(--s4);
}
.reisen-liste { margin: 0; }
/* Das Leerbild einer Reise ohne Route: derselbe Rahmen wie ein Kartenbild,
   nur ohne Kacheln - die gestrichelte Linie mit den hohlen Scheiben. */
.reise-leer-bild {
  background:
    radial-gradient(70% 90% at 50% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    var(--raum-dunkel);
}

/* ---------- Der Bildschirm ---------- */
.reise-kopf { margin-bottom: var(--s2); }
.reise-kopf .back-btn { margin-bottom: 0; }

/* ---------- Die Reisekarte ----------
   4:3 statt des flachen 640x280 der Tourenliste: Ein Bild, das eine ganze
   Reise zeigt, braucht Hoehe. Auf 358 Punkten Breite sind das 268 hoch. */
.reise-held {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0 0 var(--s2);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--raum-dunkel);
  border: 1px solid var(--glas-rand);
  box-shadow:
    inset 0 1px 0 var(--glas-heller),
    0 16px 40px var(--schatten-mittel);
}
.reise-held.leer {
  background:
    radial-gradient(70% 90% at 50% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    var(--raum-dunkel);
}
.reise-karte { display: block; width: 100%; height: 100%; }
/* Die Kacheln der Reisekarte dunkler als die der Tageskarten: Auf ihr
   liegen der Name und der Streifen, und bei Zoomstufen, die halb
   Deutschland zeigen, ist OpenStreetMap fast nur blasses Gruen. */
.reise-held .vorschau-karte { filter: grayscale(0.45) brightness(0.5) contrast(1.08); }
/* Die Namensnennung wandert nach oben rechts: unten liegt der Streifen. */
.reise-held .vorschau-osm { bottom: auto; top: var(--s2); }
/* Ein Schleier hinter dem Namen, von oben nach unten auslaufend. Ein
   Verlauf, der Text lesbar macht - nicht der Verlaufstext, den design.css
   ausschliesst. */
.reise-held::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 30%;
  background: linear-gradient(to bottom, var(--schatten-tief), transparent);
  pointer-events: none;
}

/* Der Name liegt AUF der Karte, oben links, in der Handschrift der
   Ueberschriften. Der Schatten loest ihn von hellen Kacheln. */
.reise-held-kopf {
  position: absolute;
  top: var(--s3);
  left: var(--s4);
  right: var(--s4);
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
}
.reise-held-titel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Der Zeitraum unter dem Namen, wenn ein Startdatum gesetzt ist - die
   Frage "wann", die sonst nirgends auf der Reisekarte steht. */
.reise-held-zeitraum {
  font-family: var(--schrift-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--metall);
  text-shadow: 0 1px 3px var(--schatten-stark);
}
.reise-name {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-family: var(--schrift-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--metall-glanz);
  text-shadow: 0 1px 3px var(--schatten-stark), 0 0 14px var(--schatten-tief);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Der Bilanzstreifen: Glas ueber den Kacheln, unten quer. Eine Linse ueber
   etwas Echtem - genau der Fall, den design.css meint. */
.reise-bilanz {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s2) var(--s4) var(--s3);
  background: linear-gradient(to top, var(--schatten-tief), var(--schatten-mittel));
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border-top: 1px solid var(--glas-rand);
  box-shadow: inset 0 1px 0 var(--glas-hell);
}
.reise-werte {
  display: flex;
  align-items: baseline;
  gap: var(--s1) var(--s4);
  /* Darf umbrechen: Mit Inter sind die drei Werte auf 326 Punkten rund
     40 Punkte zu breit; abgeschnitten waere schlimmer als zweizeilig. */
  flex-wrap: wrap;
  min-width: 0;
}
/* Die eine grosse Zahl: die Gesamtstrecke. Auf 320 Punkten etwas kleiner,
   damit die Zeile nicht umbricht. */
.reise-held-zahl {
  font-family: var(--schrift-display);
  font-size: clamp(30px, 10vw, 36px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--metall-glanz);
  text-shadow: 0 1px 2px var(--schatten-stark);
  white-space: nowrap;
}
.reise-held-zahl i {
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-left: 5px;
  color: var(--metall);
}
.reise-bilanz .wert {
  font-family: var(--schrift-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--metall-glanz);
  text-shadow: 0 1px 2px var(--schatten-stark);
  white-space: nowrap;
}
/* Einheiten in Metall statt --muted: --muted kaeme auf hellem Glas nur auf
   3,5:1, Metall haelt 4,4:1 auch im schlimmsten Fall. */
.reise-bilanz .wert i {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-left: 4px;
  color: var(--metall);
}
.reise-offen { margin-left: auto; font-size: 12.5px; white-space: nowrap; }

/* Das Tagesband unter den Zahlen: je Tag ein Stueck, so breit wie der Tag
   lang ist, mit der Tagesnummer darin und den Kilometern daneben.

   VORHER waren es nackte Striche in der Kurvigkeitsfarbe. Sie sagten
   niemandem etwas: zwei gruene Balken ohne Beschriftung, ohne Legende.
   Die Nummer und die Kilometer IM Stueck machen daraus eine Zeile, die
   sich von selbst liest - und die Farbe bleibt als zweite, leisere
   Auskunft (dieselbe Skala wie ueberall: gruen ruhig, orange kurvig). */
.reise-band {
  display: flex;
  gap: var(--s1);
  height: 26px;
}
.reise-band-tag {
  position: relative;
  flex: var(--km, 1) 1 0;
  /* Seit "Tag 1" statt "1" darinsteht, braucht das kleinste Stueck rund
     44 Punkte - darunter waere schon die Beschriftung abgeschnitten. */
  min-width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 var(--s2);
  border: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--schrift-display);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  /* Dunkle Schrift auf den hellen Skalenfarben - das ist der einzige Ort
     in der App, an dem Text auf Gruen oder Orange steht. */
  color: var(--danger-ink);
  background: var(--skala-mittel);
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.reise-band-tag b { font-weight: 700; font-size: 13px; }
.reise-band-tag i { font-style: normal; font-weight: 600; opacity: 0.72; }
.reise-band.mit-auswahl .reise-band-tag:not(.aktiv) { opacity: 0.4; }
.reise-band-tag.aktiv { transform: translateY(-1px); box-shadow: 0 2px 8px var(--schatten-weich); }
.reise-band-tag.wenig { background: var(--skala-wenig); }
.reise-band-tag.viel { background: var(--skala-viel); }
/* Tage ohne Route nehmen nur so viel Platz, wie ihre Nummer braucht -
   sie haben keine Laenge, mit der sie sich messen koennten. */
.reise-band-tag.leer, .reise-band-tag.ruhe {
  flex: 0 0 auto;
  background: transparent;
  border: 1px dashed var(--glas-heller);
  color: var(--muted);
}
.reise-band-tag.ruhe { border-style: solid; }

/* ---------- Die Kacheln unter der Karte ----------
   Die Handschrift von "Meine Stats" (.stat), zwei Spalten, direkt unter
   der Karte, damit sie als ihr Fuss gelesen werden. Eine Kachel mit
   Tagesnummer ist ein Knopf und waehlt den Tag; das blaue Zeichen sagt es. */
.reise-zahlen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin: 0 0 var(--s5);
  text-align: left;
}
.reise-zahlen .stat { color: var(--text); font-family: var(--schrift-text); }
.reise-zahlen .stat.breit { grid-column: 1 / -1; }
.reise-zahlen .stat .v { color: var(--metall-glanz); }
.reise-zahlen .stat .v i {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-left: 4px;
  color: var(--metall);
}
.reise-zahlen .stat .unter { font-size: 11.5px; color: var(--muted); }
.reise-zahlen .stat .unter i { font-style: normal; }
.reise-zahlen .stat.tippbar {
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.reise-zahlen .stat.tippbar:active { transform: scale(0.985); }
.reise-zahlen .stat.aktiv { border-color: color-mix(in srgb, var(--accent-hell) 45%, transparent); }
.reise-tipp-pfeil { color: var(--accent-hell); font-style: normal; font-size: 15px; margin-left: 2px; }
/* Der Punkt in der Skalenfarbe vor der kurvigsten Etappe - zugleich die
   Legende fuer das Profil oben, ohne eine eigene zu bauen. */
.reise-stufe-punkt {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--skala-mittel);
  vertical-align: 3px;
}
.reise-stufe-punkt.wenig { background: var(--skala-wenig); }
.reise-stufe-punkt.viel { background: var(--skala-viel); }
/* Kuerzeste und laengste Etappe als schlichte Zeile unter dem Schnitt.
   Vorher lag hier eine Rinne mit einem Punkt darauf - sie sah aus wie ein
   Schieberegler, war aber keiner, und was der Punkt bedeutete, erschloss
   sich nicht. Jetzt stehen die Zahlen da, und jede fuehrt zu ihrem Tag. */
.reise-spanne {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  margin-top: var(--s2);
}
.reise-spanne .linkbtn {
  font-family: var(--schrift-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--muted);
}
.reise-spanne .linkbtn b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.reise-spanne .linkbtn i { font-style: normal; opacity: 0.5; margin: 0 3px; }
.reise-spanne .linkbtn:hover { color: var(--accent-hell); }
.reise-spanne .linkbtn:hover b { color: var(--accent-hell); }

/* ---------- Was im SVG der Reisekarte liegt ----------
   Saum, Linie und Kacheln kommen aus dem Vorschaubild (.vorschau-*).
   Neu sind die Nacht, das Ziel und die Marken. */
.reise-nacht {
  fill: none;
  stroke: var(--metall);
  stroke-width: 2.5;
  stroke-dasharray: 6 8;
  stroke-linecap: round;
}
.reise-ziel {
  fill: none;
  stroke: var(--text);
  stroke-width: 3;
}
.reise-marke circle, .reise-marke rect {
  fill: var(--accent);
  stroke: var(--accent-ink);
  stroke-width: 2;
}
.reise-marke text {
  fill: var(--accent-ink);
  font-family: var(--schrift-display);
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
}
/* Die hohlen Scheiben des Leerbilds: noch kein Tag hat eine Route. */
.reise-marke.hohl circle { fill: var(--raum-dunkel); stroke: var(--metall); }
.reise-marke.hohl text { fill: var(--metall-glanz); }
/* Was leuchtet, ist gewaehlt: der gewaehlte Tag bleibt, die anderen dimmen. */
.reise-karte.mit-auswahl .vorschau-linie:not(.aktiv),
.reise-karte.mit-auswahl .vorschau-saum:not(.aktiv) { opacity: 0.4; }
.reise-karte .vorschau-linie.aktiv { stroke: var(--accent-hell); }

/* ---------- Der Etappenfaden ---------- */
.reise-tage-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin: 0 0 var(--s3);
}
.etappen {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
/* Ein Glied: links die Scheibe, rechts die Karte. Der Faden ist das
   ::before, von der Unterkante der Scheibe bis ins naechste Glied. */
.etappe {
  position: relative;
  display: grid;
  grid-template-columns: var(--s6) minmax(0, 1fr);
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.etappe::before {
  content: "";
  position: absolute;
  left: calc(var(--s6) / 2 - 1px);
  top: var(--s6);
  bottom: calc(-1 * var(--s4));
  width: 2px;
  background: var(--glas-rand);
}
.etappe.leer::before, .etappe.fehlt::before {
  background: repeating-linear-gradient(to bottom, var(--glas-rand) 0 6px, transparent 6px 12px);
}
.etappe.anhaengen::before { display: none; }

.etappe-nummer {
  align-self: start;
  width: var(--s6);
  height: var(--s6);
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  background: var(--glas-hell);
  border: 1px solid var(--glas-heller);
  box-shadow: inset 0 1px 0 var(--glas-licht), 0 4px 12px var(--schatten-weich);
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--metall-glanz);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.etappe.leer .etappe-nummer, .etappe.fehlt .etappe-nummer {
  border-style: dashed;
  background: var(--glas-hauch);
  color: var(--muted);
}
.etappe.aktiv .etappe-nummer {
  background: var(--accent);
  border-color: var(--accent-glanz);
  color: var(--accent-ink);
}
.etappe.anhaengen .etappe-nummer { color: var(--muted); cursor: default; }

/* Die Tageskarte traegt seit dem 10.09.2026 .karte und damit dieselbe
   Glasplatte wie die Bike-Karte, die Reisekarte und die beiden Karten
   oben: Rundung r-xl, Innenabstand s4, Lichtkante. Das ist die
   Default-Form fuer alles Kartenfoermige in dieser App - hier steht nur
   noch, was die Tageskarte davon abweichen laesst.

   Das Bild bleibt randlos: seine negativen Raender muessen zum
   Innenabstand der Karte passen, sonst bleibt ringsum ein Streifen
   stehen. Die Rundung oben ist die der Karte abzueglich ihrer Randlinie. */
.etappe-karte {
  border-radius: var(--r-xl);
  transition: border-color 0.15s ease, background 0.25s ease;
}
.etappe-karte .tour-vorschau {
  margin: calc(-1 * var(--s4)) calc(-1 * var(--s4)) var(--s3);
  border-radius: calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px) 0 0;
}
.etappe-karte .etappe-werte { left: var(--s4); }
.etappe.aktiv .etappe-karte { border-color: color-mix(in srgb, var(--accent-hell) 45%, transparent); }
.etappe.leuchtet .etappe-karte { background: var(--glas-hell); }
/* Kilometer und Kurvigkeit liegen AUF dem Bild, unten links. Der Schatten
   macht sie auf jeder Karte lesbar. */
.etappe-werte {
  position: absolute;
  left: var(--s3);
  bottom: var(--s2);
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-shadow: 0 1px 3px var(--schatten-stark);
}
.etappe-werte i { font-style: normal; opacity: 0.55; margin: 0 3px; }
.etappe-karte .label {
  display: block;
  font-family: var(--schrift-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.etappe-karte .label i { font-style: normal; opacity: 0.5; margin: 0 3px; }
.etappe-name {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 17px;
  font-weight: 600;
  min-width: 0;
}
/* Die Kennzahlen eines Fahrtags: eine Zeile aus Symbol und Wert, die
   umbricht, wenn die Karte schmal wird. Kein Raster - die Zahl der
   Angaben schwankt, weil aeltere Routen weniger wissen. */
.tag-fakten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-top: var(--s3);
}
.tag-fakt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--schrift-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.tag-fakt .ic { width: 16px; height: 16px; opacity: 0.75; }

.etappe-aktionen {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s3);
  margin-top: var(--s2);
}
.etappe-aktionen .linkbtn { margin-right: auto; font-size: 14px; }

/* Ein Tag ohne Route: dieselbe Platte, nur gestrichelt, mit der einen
   Sache, die man tun kann. Die Hoehe haelt den Faden gespannt. */
/* Ein Tag ohne Route ist eine Luecke, keine Karte. Deshalb gestrichelt,
   ohne Glas und ohne Lichtkante - die Kante gehoert dem, was schon da
   ist. */
.etappe.leer .etappe-karte, .etappe.fehlt .etappe-karte {
  min-height: calc(var(--s8) * 2);
  display: grid;
  place-items: center;
  gap: var(--s2);
  background: var(--glas-hauch);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-style: dashed;
  border-color: var(--glas-rand);
  text-align: center;
  color: var(--muted);
  cursor: pointer;
}
.etappe.leer .etappe-karte::before, .etappe.fehlt .etappe-karte::before { display: none; }
.etappe.leer .etappe-karte .ic.gross, .etappe.fehlt .etappe-karte .ic.gross { width: 28px; height: 28px; opacity: 0.6; }
.etappe-leer-text { font-size: 14px; }
.etappe.leer .del, .etappe.fehlt .del { position: absolute; top: var(--s2); right: var(--s2); }

/* Die Pfeile zum Verschieben gibt es nur im Sortiermodus. */
.etappe-pfeile { display: none; margin-left: auto; }
/* Der Sortiermodus: die Karten klappen zu Zeilen zusammen, das Bild geht
   weg, alle Zeilen gleich hoch - sieben Tage auf einen Bildschirm, nichts
   scrollt, und man sieht, in welche Luecke ein Tag faellt. */
.etappen.sortiert .tour-vorschau,
.etappen.sortiert .etappe-aktionen,
.etappen.sortiert .etappe-leer-text,
.etappen.sortiert .etappe-karte .ic.gross,
.etappen.sortiert .etappe-karte .btn,
.etappen.sortiert .etappe-karte .del { display: none; }
.etappen.sortiert .etappe-karte {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s2) var(--s2) var(--s3);
  text-align: left;
  cursor: default;
}
.etappen.sortiert .etappe-karte .label { flex: 0 0 auto; }
.etappen.sortiert .etappe-name { flex: 1; margin: 0; font-size: 15px; }
.etappen.sortiert .etappe-pfeile { display: flex; }
.etappen.sortiert .etappe::before { top: var(--s6); }

/* Das letzte Glied: das Plus, in das der Faden laeuft. */
.etappe-anhaengen { width: 100%; justify-content: center; }

.reise-fuss {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  margin: var(--s5) 0 var(--s3);
}
.reise-fuss .hint { margin: 0; }

/* ---------- Mitfahrer und Kasse ----------
   Zwei Karten im Kopf der Reise, in derselben Sprache wie die Bike-Karte
   und die Reisekarte auf dem Start: .karte mit .widget-kopf,
   .widget-name, .widget-werte und .widget-knopf. Hier steht nur, was sie
   unterscheidet - nichts Eigenes erfinden, wo die App die Form schon hat.

   Das Raster braucht keine eigene Regel fuers Querformat: auto-fit legt
   die beiden nebeneinander, sobald je 260 Punkte da sind, und sonst
   untereinander. Auf dem Handy ist das immer eine Spalte, in der linken
   Spalte des Querformats immer zwei.                                     */

.reise-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s4);
  /* Kein align-items: start. Nebeneinander sollen beide Karten gleich
     hoch sein, damit ihre Knoepfe auf einer Linie stehen - das erledigt
     das gestreckte Rasterkind zusammen mit dem .widget-koerper darin. */
  margin: var(--s6) 0 var(--s5);
}
/* Die Karte ist eine Spalte aus drei Teilen: Kopf und Name oben, der
   KOERPER dazwischen, der Knopf unten. Nur der Koerper waechst - deshalb
   stehen die Knoepfe zweier verschieden voller Karten auf einer Linie,
   und zwar unabhaengig davon, wieviel darueber steht. Ohne diesen
   Zwischenkasten hing es davon ab, welches Element gerade das letzte
   war, und die Knoepfe standen versetzt. */
.kasse-widget, .mitfahrer-widget, .gespraech-widget, .notizen-widget {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
}
.widget-koerper { flex: 1; display: flex; flex-direction: column; gap: var(--s3); }
.kasse-widget .hint, .mitfahrer-widget .hint,
.gespraech-widget .hint, .notizen-widget .hint { margin: 0; }
.kasse-widget .widget-knopf, .mitfahrer-widget .widget-knopf,
.gespraech-widget .widget-knopf, .notizen-widget .widget-knopf { margin-top: var(--s4); }
/* Die Kasse traegt als Namen einen Betrag. Ziffern in gleicher Breite,
   sonst huepft die Zahl bei jeder Aenderung. */
.kasse-widget .widget-name { font-variant-numeric: tabular-nums; }
/* Nur der offene Betrag faerbt sich, und nur wenn wirklich etwas offen
   ist. Eine Null in Warnfarbe waere eine Warnung vor nichts. */
.kasse-widget .wert.warnt { color: var(--danger-glanz); }

/* ---------- Die Karte "Chat" und das Blatt dahinter (seit 14.09.2026) ----------
   Die Vorschau auf der Karte: zwei Zeilen, je eine Nachricht, abgeschnitten
   mit Auslassungspunkten - sie soll sagen, dass sich etwas tut, nicht den
   Verlauf ersetzen. */
.gespraech-vorschau { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.gespraech-vorschau li {
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gespraech-vorschau b { font-weight: 600; color: var(--text); }
/* Ungelesene: gefuellt in Blau, denn das ist die eine Zahl auf der Karte,
   die zum Handeln auffordert. */
.gespraech-neu {
  padding: 3px var(--s2);
  border-radius: var(--r-pill);
  font-family: var(--schrift-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-ink);
  background: var(--accent-hell);
}

/* Der Verlauf: eigene Blasen rechts in Blau, fremde links im Glas, Trenner
   je Tag dazwischen. Die Blase ist hoechstens 84 % breit, damit die Seite,
   auf der sie sitzt, lesbar bleibt - ohne die Luecke sieht man nicht, wer
   spricht. */
.gespraech-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.gespraech-leer { align-self: center; margin: var(--s4) 0; }
.gespraech-tag {
  align-self: center;
  margin: var(--s2) 0;
  font-family: var(--schrift-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.gespraech-blase {
  max-width: 84%;
  align-self: flex-start;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-md);
  border: 1px solid var(--glas-rand);
  background: var(--glas-hell);
}
.gespraech-blase.meine {
  align-self: flex-end;
  border-color: color-mix(in srgb, var(--accent-hell) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 32%, transparent);
}
.gespraech-autor {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-hell);
}
/* pre-wrap: Zeilenumbrueche aus dem Feld bleiben; anywhere: ein langer
   Link sprengt die Blase nicht. */
.gespraech-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.gespraech-zeit {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s1);
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
.gespraech-zeit .del { font-size: 14px; }

/* Das Eingabefeld im Fuss des Blatts: Feld und Sendeknopf in einer Zeile,
   das Feld waechst mit dem Text (gespraech.js setzt die Hoehe), aber nur
   bis vier Zeilen - darueber rollt es. */
.gespraech-eingabe { flex: 1; display: flex; gap: var(--s2); align-items: flex-end; }
.gespraech-eingabe textarea {
  flex: 1;
  min-width: 0;
  max-height: 120px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--glas-rand);
  background: var(--glas-hell);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  resize: none;
}
.gespraech-eingabe textarea:focus { outline: none; border-color: var(--accent-hell); }
.gespraech-senden { flex: 0 0 auto; padding: 10px 13px; }
/* Das Symbol ist hier der ganze Knopf - keine eigene Scheibe darin, wie
   sonst beim ersten Symbol eines Knopfes (.btn > .ic:first-child). */
.gespraech-senden > .ic:first-child {
  width: 18px; height: 18px;
  padding: 0; margin: 0;
  border: 0; background: none; box-shadow: none;
}

/* ---------- Notizen: die Zettel (seit 14.09.2026) ----------
   Ein Zettel ist ein Knopf, weil ein Tipp ihn zum Aendern oeffnet. Der
   Text bricht nach drei Zeilen ab - der ganze steht im Blatt. */
.notiz-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.notiz-zettel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-md);
  background: var(--glas-hell);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.notiz-zettel:hover { border-color: color-mix(in srgb, var(--accent-hell) 40%, transparent); }
.notiz-text {
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.notiz-meta { font-size: 11px; color: var(--muted); }
/* Auf der Tageskarte stehen die Zettel unter den Kennzahlen, mit etwas
   Luft nach oben. */
.etappe-notizen { margin-top: var(--s3); }

/* ---------- GPX-Import (seit 14.09.2026) ----------
   Der Knopf unter der Planungsart, ueber die volle Breite wie der
   Umschalter darueber. Die Kennzahlen im Blatt: eine Zeile, die sagt, was
   in der Datei steckt, bevor man sich entscheidet. */
.gpx-knopf { width: 100%; margin-top: var(--s3); }
.gpx-zahlen {
  margin: 0 0 var(--s2);
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--metall-glanz);
}
.gpx-zahlen i { font-style: normal; opacity: 0.5; margin: 0 4px; }

/* ---------- Freunde: Gruppen (seit 15.09.2026) ----------
   Die Gruppenliste und der Strom einer Gruppe sind Karten wie unter
   "Touren"; eigen ist nur der Kopf der offenen Gruppe. */
/* Die Gruppenkarte traegt .tour-karte mit: Die Klasse hebt die Zeilenform
   von .saved-list li auf (siehe dort) - ohne sie stuende der Name als
   Buchstabenturm neben den Kennzahlen. */
.gruppen-karte { cursor: pointer; }
.gruppen-kopf { display: flex; flex-direction: column; margin-bottom: var(--s5); }
/* Die Gesichter sind ein Knopf, der die Mitgliederliste oeffnet - so
   braucht die Karte keinen vierten Knopf dafuer. */
.gruppen-leute {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
.gruppen-leute:hover { color: var(--text); }
.gruppen-leute-text i { font-style: normal; opacity: 0.5; margin: 0 3px; }
/* Die Mitgliederzeile: Gesichter gross (44 statt 34 Punkte), daneben der
   Knopf "Einladen". Die Karte wird dadurch nicht hoeher - die Zeile
   ersetzt die bisherige Textzeile, und der Knopf ist so hoch wie ein
   Gesicht. */
.gruppen-leute-zeile { display: flex; align-items: center; gap: var(--s3); }
.gruppen-leute-zeile .gruppen-leute { flex: 1; min-width: 0; }
.gruppen-leute-zeile .mitfahrer-punkt { width: 44px; height: 44px; font-size: 17px; }
.gruppen-leute-zeile .mitfahrer-punkt .ic { width: 21px; height: 21px; }
.gruppen-leute-zeile .gruppen-leute-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gruppen-einladen { flex: 0 0 auto; padding: 11px 16px; }
/* Der offene Beitrag: die Knoepfe unter der Karte, das Kommentarfeld in
   einer eigenen Karte. */
.beitrag-knoepfe { display: flex; gap: var(--s2); margin: var(--s4) 0 var(--s5); }
.beitrag-knoepfe .btn { flex: 1; }
.beitrag-kommentare .kommentare { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- Fahrten in der Gruppe (seit 15.09.2026) ----------
   Der grosse Knopf "Ich fahre jetzt" traegt die Signalfarbe, "Fahrt
   planen" steht als Glas daneben. Eine laufende Fahrt hat einen kleinen
   pulsierenden Punkt - das eine Zeichen fuer "gerade jetzt". */
.fahrten-karte { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s5); }
.fahrten-karte .widget-kopf { margin-bottom: 0; }
.fahrten-knoepfe { display: flex; gap: var(--s2); }
.fahrten-knoepfe .fahrt-jetzt-knopf { flex: 1.4; }
.fahrt-laeuft {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3);
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--accent-hell) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.fahrt-laeuft-text { flex: 1; min-width: 0; font-weight: 600; }
.fahrt-laeuft-text i, .fahrt-kopf i { font-style: normal; opacity: 0.5; margin: 0 3px; }
.fahrt-puls {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: var(--r-pill);
  background: var(--good);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent);
  animation: fahrtPuls 1.6s ease-out infinite;
}
@keyframes fahrtPuls {
  to { box-shadow: 0 0 0 8px transparent; }
}
.fahrt-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.fahrt {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  border-radius: var(--r-md);
  border: 1px solid var(--karten-rand);
  background: var(--glas-hell);
}
.fahrt.jetzt { border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.fahrt-kopf { display: flex; align-items: center; gap: var(--s2); }
.fahrt-wer { font-weight: 600; }
.fahrt-wann { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; }
.fahrt-tour {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  border: 1px solid var(--glas-rand);
  background: var(--glas-hauch);
  color: var(--accent-hell);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.fahrt-tour span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fahrt-tour i { font-style: normal; opacity: 0.6; }
.fahrt-text { margin: 0; font-size: 14px; line-height: 1.4; }
.fahrt-fuss { display: flex; align-items: center; gap: var(--s3); }
.fahrt-dabei-text { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); }
.fahrt-fuss .mitfahrer-punkt { width: 28px; height: 28px; font-size: 12px; }
.fahrt-fuss .mitfahrer-punkt .ic { width: 14px; height: 14px; }
/* Tag und Uhrzeit nebeneinander im Blatt. */
.fahrt-zeitzeile { display: flex; gap: var(--s2); }
.fahrt-zeitzeile input { flex: 1; min-width: 0; }

/* Der Weg in den Kalender bzw. auf die Karte, als schlichte Zeile unter
   dem Satz einer Fahrt. */
.fahrt-zusatz { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--s1); font-size: 13px; }
.fahrt-zusatz i { font-style: normal; opacity: 0.5; margin: 0 3px; }

/* ---------- Terminumfrage (seit 17.09.2026) ----------
   Je Termin eine Zeile zum Antippen: Haken links, der wird sichtbar, wenn
   man selbst gestimmt hat; die Gesichter derer, die koennen; die Zahl
   rechts. Der fuehrende Termin traegt den Akzentrand. */
.umfragen-karte { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s5); }
.umfragen-karte .widget-kopf { margin-bottom: 0; }
.umfrage-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.umfrage {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  border-radius: var(--r-md);
  border: 1px solid var(--karten-rand);
  background: var(--glas-hell);
}
.umfrage .fahrt-kopf .umfrage-weg { margin-left: auto; }
.umfrage-frage { margin: 0; font-weight: 600; line-height: 1.4; }
.umfrage-termine { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1); }
.umfrage-termin {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  border: 1px solid var(--glas-rand);
  background: var(--glas-hauch);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.umfrage-termin.fuehrt { border-color: color-mix(in srgb, var(--accent-hell) 55%, transparent); }
.umfrage-termin.gewaehlt { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.umfrage-haken {
  width: 20px; height: 20px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--glas-rand);
  color: transparent;
}
.umfrage-termin.gewaehlt .umfrage-haken { background: var(--accent); border-color: var(--accent); color: var(--text); }
.umfrage-termin-text { flex: 1; min-width: 0; }
.umfrage-termin .mitfahrer-punkt { width: 24px; height: 24px; font-size: 11px; }
.umfrage-termin .mitfahrer-punkt .ic { width: 12px; height: 12px; }
.umfrage-zahl { min-width: 1.5em; text-align: right; font-weight: 700; color: var(--muted); }
.umfrage-planen { align-self: flex-start; }
.umfrage-termin-felder { list-style: none; margin: 0 0 var(--s2); padding: 0; display: flex; flex-direction: column; gap: var(--s2); }

/* ---------- Standort einer Fahrt (seit 17.09.2026) ---------- */
/* Die Wahl "Standort teilen" im Blatt "Ich fahre jetzt": eine eigene
   Zeile mit grossem Haken, die sich beim Setzen blau faerbt - sie ist
   die eine Entscheidung in diesem Blatt, die etwas ueber einen verraet. */
.standort-wahl {
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  gap: var(--s3);
  border-radius: var(--r-md);
  border: 1px solid var(--glas-rand);
  background: var(--glas-hell);
  font-size: 15px;
  font-weight: 600;
}
.standort-wahl input[type="checkbox"] { width: 26px; height: 26px; }
.standort-wahl span { display: inline-flex; align-items: center; gap: var(--s2); }
.standort-wahl:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent-hell) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.standort-schalter {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s3);
  font-size: 13px;
  color: var(--muted);
}
.standort-schalter-text { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: var(--s1); }
/* Die Karte im Blatt: fest hoch, sonst haette Leaflet nichts zu fuellen. */
.fahrt-karte {
  height: min(60vh, 420px);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--glas-rand);
}
/* Ein Fahrer auf der Karte: das Gesicht rund, der Name als Schild rechts
   daneben. Blass, wenn der Punkt aelter als eine Viertelstunde ist. */
.standort-fahrer { position: relative; width: 36px; height: 36px; }
.standort-fahrer.alt { opacity: 0.55; }
.standort-fahrer-bild {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  border: 2px solid var(--accent-hell);
  background: var(--bg);
  overflow: hidden;
  box-shadow: 0 2px 8px var(--schatten-mittel);
}
.standort-fahrer-bild .geteilt-bild, .standort-fahrer-bild .geteilt-buchstabe { width: 100%; height: 100%; }
.standort-fahrer-name {
  position: absolute;
  left: 42px; top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  padding: 2px var(--s2);
  border-radius: var(--r-pill);
  background: var(--glas-dunkel);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 1px 4px var(--schatten-weich);
}
.standort-fahrer-name i { font-style: normal; opacity: 0.5; }

/* ---------- Einstellungen (seit 17.09.2026) ----------
   Ein Bildschirm hinter dem Zahnrad oben rechts: Profil, Rechtliches und
   die Erscheinung. Zeilen wie Karten, nur flach - eine Liste, kein Regal. */
.einstellungen-liste { list-style: none; margin: 0 0 var(--s5); padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.einstellungen-zeile {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-lg);
  border: 1px solid var(--karten-rand);
  background: var(--glas-hell);
  box-shadow: inset 0 1px 0 var(--glas-licht), var(--glas-schatten);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.2,0.8,0.2,1), background 0.15s ease;
}
.einstellungen-zeile:hover { background: var(--glas-heller); }
.einstellungen-zeile:active { transform: scale(0.985); }
.einstellungen-bild {
  position: relative;
  overflow: hidden;
  width: 44px; height: 44px;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--glas-rand);
  background: var(--glas-hauch);
}
.einstellungen-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.einstellungen-name { font-weight: 600; }
.einstellungen-meta { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.einstellungen-pfeil { color: var(--muted); font-size: 22px; line-height: 1; }
.einstellungen-karte { display: flex; flex-direction: column; gap: var(--s3); }
.einstellungen-karte .widget-kopf { margin-bottom: 0; }

/* ---------- Freunde auf dem Start (seit 17.09.2026) ----------
   Ganz oben das Widget "Jetzt" mit dem grossen Knopf "Ich fahre jetzt" -
   immer da, auch ohne Konto (dann fuehrt er zum Konto). Darunter das
   Fahrtband: eine Zeile je Fahrt, blau umrandet wie eine Einladung, weil
   es eine ist. Bei "jetzt" der gruene Puls. Die ganze Zeile fuehrt in die
   Gruppe, der Knopf rechts schliesst an. Zeigt jemand seinen Standort,
   steht darunter die kleine Karte. */
.fahren-widget { display: flex; flex-direction: column; gap: var(--s3); }
.fahren-widget .widget-kopf { margin-bottom: 0; }
/* Die zwei Knoepfe untereinander, beide ueber die volle Breite: "Ich
   fahre jetzt" soll gross sein, und nebeneinander brach "Fahrt planen"
   auf dem Handy in zwei Zeilen. */
.fahren-widget .fahrten-knoepfe { flex-direction: column; }
.fahren-widget .fahrt-jetzt-knopf { padding: 16px 14px; font-size: 17px; }
.fahren-einladung .widget-name { margin: 0; }
.fahren-satz { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.start-standort-karte {
  height: 220px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--glas-rand);
  background: var(--raum-dunkel);
}
.garage-fahrt { gap: var(--s2); }
.fahrt-band {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-lg);
  border-color: color-mix(in srgb, var(--accent-hell) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  cursor: pointer;
}
.fahrt-band.jetzt {
  border-color: color-mix(in srgb, var(--good) 50%, transparent);
  background: color-mix(in srgb, var(--good) 14%, transparent);
}
.fahrt-band-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Als Fliesstext, nicht als Flex-Zeile: "Bernd faehrt morgen 15:00" soll an
   Wortgrenzen umbrechen, nicht als Block neben dem Namen. */
.fahrt-band-wer { display: block; font-size: 16px; line-height: 1.3; }
.fahrt-band-wer b { font-weight: 700; margin-right: 2px; }
.fahrt-band-wer .fahrt-puls { vertical-align: middle; margin-bottom: 2px; }
.fahrt-band-meta { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fahrt-band-meta i { font-style: normal; opacity: 0.5; margin: 0 3px; }
.fahrt-band-dabei { flex: 0 0 auto; font-size: 13px; color: var(--muted); }
.fahrt-band .btn.klein { flex: 0 0 auto; }
/* Die Freunde-Karte: Standardform wie die Reisekarte. Die Geister-Gesichter
   in der Einladung sind gross - sie sind das Bild der Karte. */
.freunde-widget { display: flex; flex-direction: column; cursor: pointer; }
.freunde-widget .widget-knopf { margin-top: var(--s4); }
.freunde-einladung { cursor: default; }
.freunde-geister .mitfahrer-punkt { width: 44px; height: 44px; }
.freunde-geister .mitfahrer-punkt .ic { width: 21px; height: 21px; }
.freunde-satz { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.gruppen-strom-titel { margin: 0 0 var(--s3); }
/* Das Chatfenster: der Verlauf hat eine feste Hoehe und rollt in sich,
   das Feld steht darunter fest. Auf dem Handy etwa ein Drittel des
   Bildschirms - genug fuer sechs, sieben Blasen, und die Beitraege
   darunter bleiben in Reichweite. */
.gruppen-chat { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s5); }
.gruppen-chat .widget-kopf { margin-bottom: 0; }
.gruppen-chat-liste {
  max-height: 36vh;
  min-height: 120px;
  overflow-y: auto;
  padding: var(--s2) 0;
  scroll-behavior: smooth;
}
/* Die Plus-Kachel: gestrichelt und leer wie ein Tag ohne Route, mit einem
   grossen Plus in der Mitte. Sie steht immer an erster Stelle - das
   Teilen ist der eine Handgriff, den man in einer Gruppe braucht. */
/* Mit .saved-list li davor, sonst gewaenne "display: block" von
   .saved-list li.tour-karte, und das Plus saesse oben links statt mittig. */
.saved-list li.gruppen-plus {
  display: grid;
  place-items: center;
  min-height: 120px;
  background: var(--glas-hauch);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-style: dashed;
  border-color: var(--glas-rand);
  color: var(--accent-hell);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.gruppen-plus::before { display: none; }
.gruppen-plus:hover, .gruppen-plus:focus-visible {
  border-color: var(--accent-hell);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  outline: none;
}
.gruppen-plus-zeichen {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-hell) 35%, transparent);
}
.gruppen-plus-zeichen .ic { width: 32px; height: 32px; }
/* Die Kommentarspalte unter einem Beitrag: durch eine Linie vom Knopf
   darueber abgesetzt, die Blasen etwas kleiner als im Chat. */
.kommentare {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--glas-hell);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.kommentare .gespraech-blase { max-width: 92%; padding: var(--s1) var(--s3); }
.kommentare .gespraech-text { font-size: 14px; }
.kommentare .gespraech-leer { align-self: flex-start; margin: 0; }
.kommentare .gespraech-eingabe textarea { padding: 8px 12px; font-size: 14px; }
.kommentare .gespraech-senden { padding: 8px 11px; }
.beitrag-karte .geteilt-kopf .karte-datum { margin-left: auto; }
.beitrag-karte .geteilt-kopf .karte-werkzeuge { margin-left: 0; }

/* Die Punkte ueberlappen sich leicht: So liest sich eine Gruppe als eine
   Gruppe und nicht als eine Reihe einzelner Bilder. */
.mitfahrer-punkte { display: flex; align-items: center; }
.mitfahrer-punkt {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  margin-right: calc(-1 * var(--s2));
  border-radius: var(--r-pill);
  border: 1px solid var(--glas-rand);
  background: var(--glas-hell);
  backdrop-filter: var(--glas-filter);
  -webkit-backdrop-filter: var(--glas-filter);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 700;
  font-size: 14px;
  color: var(--metall-glanz);
}
.mitfahrer-punkt img { width: 100%; height: 100%; object-fit: cover; }
/* Angedeutete Plaetze: gestrichelt, blass, mit einem Kopfsymbol darin.
   Sie sagen ohne einen Satz, dass hier Leute hingehoeren - ein leerer
   Streifen sagt das nicht. */
.mitfahrer-punkt.geist {
  border-style: dashed;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--muted);
  opacity: 0.5;
}
.mitfahrer-punkt .ic { width: 17px; height: 17px; }
/* Wer noch nicht geantwortet hat, steht blasser da - ohne dass man ihn
   suchen muesste. */
.mitfahrer-punkt.wartet { opacity: 0.45; }
/* Die Ueberlappung gilt nur fuer die Gruppe auf der Karte. In einer Liste
   steht je Zeile genau ein Mensch, und da soll der Name Luft haben. */
.mitfahrer-treffer .mitfahrer-punkt,
.mitfahrer-bestand .mitfahrer-punkt { margin-right: 0; }

.reise-eintrag-marke {
  flex: 0 0 auto;
  align-self: center;
  color: var(--muted);
}

/* Das Blatt "Mitfahrer": Suche oben, Bestand unten. */
.mitfahrer-suchzeile { display: flex; gap: var(--s2); align-items: center; }
.mitfahrer-suchzeile input { flex: 1; }
.mitfahrer-treffer, .mitfahrer-bestand { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.mitfahrer-treffer li, .mitfahrer-bestand li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) 0;
}
.mitfahrer-treffer-zeile {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  padding: var(--s1) 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.mitfahrer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.blatt-zwischentitel {
  margin: var(--s4) 0 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
/* Der erste Zwischentitel im Blatt braucht oben keinen Abstand - darueber
   steht schon die Kopfzeile des Blatts. */
#reiseBlattInhalt > .blatt-zwischentitel:first-child { margin-top: 0; }

/* Einladungen ueber der Reiseliste. Blau umrandet, weil sie eine Antwort
   verlangen - alles andere in dieser Liste verlangt nichts. */
.einladungen { margin-bottom: var(--s4); }
.einladung {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  border: 1px solid color-mix(in srgb, var(--accent-hell) 45%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.einladung-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.einladung-knoepfe { display: flex; gap: var(--s2); flex: 0 0 auto; }

/* ---------- Das Blatt "Kasse" ---------- */
.kasse-quitt { margin: 0; color: var(--good); font-size: 14px; }

.kasse-wege { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.kasse-weg {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
}
.kasse-weg:last-child { border-bottom: 0; }
.kasse-wer { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kasse-pfeil { color: var(--muted); flex: 0 0 auto; }
.kasse-betrag { margin-left: auto; font-variant-numeric: tabular-nums; }

.kasse-liste { margin-top: var(--s2); }
.kasse-zeile { display: flex; align-items: center; gap: var(--s3); cursor: pointer; }
.kasse-zeile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kasse-zeile-wert {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.kasse-zeile-wert i { font-style: normal; font-size: 11.5px; color: var(--muted); }

/* Die Aufteilung im Blatt: je Zeile ein Haken, ein Name, ein Betrag.

   ALLE Selektoren hier tragen .garage-dialog-inhalt vor sich her, aus
   genau dem Grund, der schon bei .teilen-schalter weiter oben steht: Dort
   gilt "input { width: 100% }" fuer die Textfelder des Blatts, und ohne
   den Vorsatz gewinnt diese Regel - aus dem Kaestchen wird dann eine
   Flaeche ueber die halbe Zeile, und der Name daneben faellt auf null.
   Genau das ist beim ersten Anlauf passiert.                              */
.garage-dialog-inhalt .kasse-anteile { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.garage-dialog-inhalt .kasse-anteile li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) 0;
}
.garage-dialog-inhalt .kasse-anteil {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: 1;
  min-width: 0;
  margin-top: 0;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
}
.garage-dialog-inhalt .kasse-anteil.einzeln { margin-top: var(--s4); font-size: 14px; }
.garage-dialog-inhalt .kasse-anteil input[type="checkbox"],
.garage-dialog-inhalt .kasse-haken input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.garage-dialog-inhalt .kasse-anteil-betrag {
  width: 96px;
  flex: 0 0 auto;
  text-align: right;
  padding: var(--s2) var(--s3);
}
.garage-dialog-inhalt .kasse-haken {
  display: flex;
  align-items: center;
  gap: var(--s1);
  flex: 0 0 auto;
  margin-top: 0;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}

/* ---------- Teilen per Link ----------
   Der Knopf auf der Tourenkarte und im Kopf der Reise, und der
   Bildschirm, auf dem ein geteilter Link landet.                          */

/* Zwei runde Knoepfe nebeneinander im Kopf der Reisekarte. Ohne den
   Halter schoebe der zweite den ersten weg (margin-left: auto steht auf
   beiden). */
.reise-held-werkzeug { display: flex; gap: var(--s2); flex: 0 0 auto; }
/* Der Teilen-Knopf ist eine Handlung, kein Zustand - deshalb bleibt er
   still, bis man ihn beruehrt. Der Globus daneben LEUCHTET, wenn die Tour
   oeffentlich steht, und sagt damit etwas ueber die Tour aus. Zwei
   verschiedene Dinge, zwei verschiedene Auftritte. */
.karte-teilen { color: var(--muted); }
.karte-teilen:hover { color: var(--accent-hell); }

/* ---------- Der Bildschirm hinter einem Link ---------- */
.link-warten { margin: var(--s7) 0; text-align: center; }
.link-empfang { display: flex; flex-direction: column; }
/* Von wem der Link kommt - die erste Zeile, die der Empfaenger liest.
   Sie steht ueber der Karte, weil "wer" vor "was" kommt: Man oeffnet den
   Link ja, weil ein bestimmter Mensch ihn geschickt hat. */
.link-absender {
  margin: 0 0 var(--s4);
  font-family: var(--schrift-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-align: center;
}
.link-karte { margin: 0 auto; width: 100%; max-width: 480px; }
.link-karte .tour-vorschau { cursor: default; }
/* Die Tage einer oeffentlichen Reise auf dem Ansehen-Bildschirm: Nummer,
   Name, Laenge - eine Zeile je Tag, ruhig wie ein Fahrplan. */
.reise-tage-liste { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s2); }
.reise-tage-zeile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--glas-hauch);
  border: 1px solid var(--glas-hell);
}
.reise-tage-nr { font-family: var(--schrift-display); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.reise-tage-name { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reise-tage-km { color: var(--muted); font-size: 13px; white-space: nowrap; }
/* Der Globus im Reise-Kopf sagt einen Zustand, wie an der Tourenkarte:
   blau heisst, die Reise steht oeffentlich. */
.reise-held-werkzeug .oeffentlich {
  color: var(--accent-hell);
  border-color: color-mix(in srgb, var(--accent-hell) 50%, transparent);
}

.link-wahl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  margin: var(--s6) auto 0;
  width: 100%;
  max-width: 480px;
}
/* Der grosse Knopf traegt die Empfehlung. Er ist breit, weil er die
   Antwort ist, mit der die meisten am besten fahren. */
.link-hauptknopf { width: 100%; padding: 15px var(--s4); font-size: 16px; }
.link-wahl .hint { margin: 0; text-align: center; }
/* Und darunter der leise Weg. Kein zweiter grosser Knopf: Wer nur schauen
   will, findet ihn - wer unentschieden ist, bekommt eine Empfehlung. */
.link-gast { font-size: 14px; color: var(--muted); }
.link-gast:hover { color: var(--accent-hell); }

/* ---------- Das Blatt: Route waehlen ---------- */
.reise-wahl { margin-top: var(--s2); }
.reise-wahl li { border: 1px solid transparent; }
.reise-wahl li.aktuell { border-color: color-mix(in srgb, var(--accent-hell) 45%, transparent); }
.reise-wahl .badge { flex: 0 0 auto; }

/* ---------- Der Planer im Reise-Modus ----------
   Das Band oben im Bedienfeld, solange eine Route fuer einen Tag einer
   Reise entsteht. Blau, weil es einen Zustand meldet, den man beenden
   kann - der Abbrechen-Link ist die Bedienung dazu. */
.reise-planung-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin: 0 0 var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-hell) 45%, transparent);
  box-shadow: inset 0 1px 0 var(--glas-rand);
  font-size: 14px;
  color: var(--text);
}
.reise-planung-band b { font-weight: 600; }
.reise-planung-band .linkbtn { flex: 0 0 auto; font-size: 13px; }

/* Die zwei Wege auf einer Tageskarte ohne Route: waehlen oder erstellen. */
.etappe-leer-knoepfe { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: center; }
/* Ein Ruhetag ist kein offener Tag: kein gestrichelter Rahmen, kein Faden
   in Gestrichelt, ein Koffer statt der Route - der Tag ist entschieden. */
.etappe.ruhe .etappe-karte {
  min-height: 0;
  display: grid;
  place-items: center;
  gap: var(--s2);
  text-align: center;
  color: var(--muted);
}
.etappe.ruhe .etappe-karte .ic.gross { width: 28px; height: 28px; opacity: 0.6; }
.etappe.ruhe .del { position: absolute; top: var(--s2); right: var(--s2); }
.etappe.ruhe .etappe-nummer { color: var(--muted); }
/* Der Eintrag "Neue Route erstellen" ganz oben im Blatt. */
.reise-wahl-erstellen .saved-marke { color: var(--accent-hell); }

/* ============================================================
   PLANER-EINSTIEG: Tour oder Reise?
   Ein Kopfbild und zwei Karten in der Standardform. Gezeichnet von
   einstieg.js.

   Der Bildschirm traegt seit dem 11.09.2026 KEIN Foto mehr hinter dem
   Glas, sondern denselben schwarzen Grund wie die uebrigen Listen (siehe
   die Regel bei #shopScreen weiter oben). Das Foto ist stattdessen nach
   vorn geholt - siehe .planer-kopf-bild.
   ============================================================ */

/* Das Kopfbild: randlos ueber die volle Breite, unten ins Schwarz
   auslaufend. Die Maske macht daraus statt eines aufgeklebten Bildes einen
   Anfang der Seite - dasselbe Mittel wie beim Werkstattraum der
   Bike-Karte, nur senkrecht.

   Die negativen Raender heben den Innenabstand von .start-screen-inner
   auf; nach oben zusaetzlich der Abstand, damit das Bild wirklich an der
   Oberkante beginnt. */
.planer-kopf-bild {
  margin: calc(-1 * var(--s5)) calc(-1 * var(--s4)) 0;
  margin-top: calc(-1 * max(var(--s5), env(safe-area-inset-top) + var(--s3)));
  /* Eine Hoehe, KEIN aspect-ratio. Mit "aspect-ratio: 16/9" und einer
     Hoehengrenze schrumpft der Kasten auch in der Breite, sobald die
     Grenze greift - das Bild sass dann als schmaler Streifen links statt
     ueber die volle Breite. "cover" schneidet den Ausschnitt ohnehin
     passend zu, eine Seitenverhaeltnis-Angabe braucht es also gar nicht. */
  height: clamp(220px, 40vh, 420px);
  /* 60 Prozent und nicht die Mitte: Das Motorrad steht im unteren Teil des
     Fotos, die Raeder enden bei etwa 89 Prozent seiner Hoehe. Wo "cover"
     oben und unten beschneidet, soll es oben beschneiden - vom Berg
     darf etwas fehlen, vom Motorrad nicht. Mit 52 Prozent (bis zum
     14.09.2026) waren die Raeder abgeschnitten. */
  /* Seit dem 17.09.2026 nur noch ein Abstandhalter: Das Foto liegt als
     Grund unter dem ganzen Bildschirm (#planerWahlScreen), dieser Kasten
     haelt den Platz frei, damit Titel und Karten erst unter dem Motorrad
     beginnen. */
  background: none;
}
/* Seit dem 17.09.2026 liegen Titel und Karten AUF dem Foto: Das Bild ist
   hoeher und laeuft weiter unten aus, der Titel rueckt tief hinein, und
   die Karten darunter sind Glas ueber dem Motorrad - der eine Fall neben
   der Bike-Karte, in dem eine Karte den Filter traegt, weil etwas
   Echtes unter ihr liegt. */
/* Der Titel steht auf dem Foto - auf einer eigenen kleinen Glasscheibe,
   damit er in beiden Erscheinungen lesbar bleibt: Die Scheibe traegt die
   Grundflaeche halb durchsichtig, also im Dunklen dunkel unter heller
   Schrift, im Hellen hell unter dunkler. Ein Schatten allein reichte im
   Hellen nicht (dunkle Schrift auf grauem Fels). */
.planer-kopf-titel {
  display: inline-block;
  margin: calc(-1 * (var(--s8) + var(--s7))) 0 var(--s4);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: var(--glas-filter);
  -webkit-backdrop-filter: var(--glas-filter);
  border: 1px solid var(--glas-rand);
  box-shadow: inset 0 1px 0 var(--glas-licht);
}

.wahl-karten {
  display: grid;
  gap: var(--s3);
  text-align: left;
}
/* Die ganze Karte ist der Knopf. Deshalb steht unten keiner: Ein Knopf im
   Knopf waere nicht nur ungueltiges HTML, sondern auch eine zweite Antwort
   auf dieselbe Frage. */
.wahl-karte {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  border-radius: var(--r-xl);
  /* Durchsichtiger als eine gewoehnliche Karte, damit das Foto durch sie
     hindurch zu sehen bleibt: die Grundflaeche zu 40 Prozent, darueber
     der Glanz. Der Filter verwischt das Bild darunter, damit die Schrift
     auf ruhigem Grund steht - lesbar in beiden Erscheinungen. */
  background:
    linear-gradient(135deg, var(--glas-rand) 0%, transparent 38%),
    color-mix(in srgb, var(--bg) 40%, transparent);
  backdrop-filter: var(--glas-filter);
  -webkit-backdrop-filter: var(--glas-filter);
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.2,0.8,0.2,1), background 0.15s ease;
}
.wahl-karte:hover { background: var(--glas-rand); }
.wahl-karte:active { transform: scale(0.985); }
/* Der Kopf ist hier ein <span> und kein <div> - in einem <button> darf
   kein Block stehen. Die Anordnung kommt trotzdem von .widget-kopf, nur
   das display muss nachgereicht werden. */
.wahl-karte .widget-kopf { display: flex; margin-bottom: 0; }
.wahl-karte .widget-koerper { align-items: flex-start; }
.wahl-karte .widget-name { margin: 0; }
.wahl-symbol {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  color: var(--accent-hell);
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-hell) 35%, transparent);
  box-shadow: inset 0 1px 0 var(--glas-rand);
}
.wahl-symbol .ic { width: 32px; height: 32px; }
.wahl-pfeil { margin-left: auto; font-size: 22px; line-height: 1; color: var(--accent-hell); }

/* ============================================================
   DIE REISEKARTE IN DER GARAGE
   Eine Platte wie die Ausruestungsleiste, aber mit EINEM Inhalt: die
   zuletzt angelegte Reise als Kartenbild mit Zeile darunter, die ganze
   Karte ein Knopf. Ohne Reise die Einladung. Gezeichnet von einstieg.js.
   ============================================================ */
/* Das Bergsymbol im Kopf in der Signalfarbe - die Regel fuer den Kopf der
   Shop-Platten faerbt Symbole rot, das gilt dem Herz der Merkliste. */
/* Die Reisekarte auf dem Start steht seit dem 05.09.2026 im Start-Block
   (.reise-karte); hier nur noch das Symbol im Abschnittskopf. */
.garage-reise .garage-shop-kopf h3 .ic { color: var(--accent-hell); }