@charset "UTF-8";
/* ============================================================================
   Serpa - Designsprache

   HIER STEHT, WORAUS DIE APP GEBAUT IST: Schrift, Farben, Abstaende, Radien
   und die paar Bausteine, die ueberall gleich aussehen muessen.
   In style.css steht daneben, WIE DIE SEITEN ANGEORDNET sind.

   WARUM DIESE TRENNUNG:

   Die App ist auf Hochformat ausgelegt, ein Handy in der Hand. Die spaetere
   Webseite bekommt ein eigenes Design mit Schwerpunkt Querformat - breite
   Bildschirme, Maus statt Daumen, mehrere Spalten nebeneinander.

   Anordnung laesst sich dabei nicht teilen. Eine Schublade, die man von unten
   hochzieht, ergibt am Rechner keinen Sinn.

   Die SPRACHE dagegen muss geteilt werden, sonst sind es zwei Produkte, die
   zufaellig denselben Namen tragen. Dieselbe Signalfarbe, dieselbe Schrift,
   dieselben Abstaende. Wer die Farbe spaeter aendert, aendert sie an EINER
   Stelle und nicht an zweien - und vergisst die zweite nicht.

   Genau das hat sich beim Wechsel von Orange auf RAL 5005 bewaehrt: Bis
   auf eine Handvoll fest eingetragener Werte, die dabei aufflogen und
   jetzt ebenfalls hier stehen, war es EINE Zeile.

   Die Regel ab jetzt:

     Steht ein Wert an mehr als einer Stelle im Code, gehoert er hierher.
     Beschreibt eine Regel eine Anordnung, gehoert sie NICHT hierher.
   ============================================================================ */

/* ============================================================
   DIE DESIGNSPRACHE

   DESIGNSPRACHE (Stand 18.08.2026, abends geaendert)
   Modern, grafisch hochwertig, dynamisch. Die Richtung ist "Liquid Glass":
   Flaechen wirken wie geschliffenes Glas ueber dem Bild darunter - mit
   einer hellen Lichtkante oben, einem Schatten unten und einem weichen
   Glanz quer darueber. Das Motorradbild ist dabei nicht Beiwerk, sondern
   Untergrund: es liegt hinter dem Inhalt und scheint durch.

   backdrop-filter ist ausdruecklich erwuenscht - es war einmal verboten,
   siehe ENTSCHEIDUNGEN.md. Der Unterschied bleibt aber wichtig:

     Milchglas von der Stange = weisser Schleier ueber Farbverlaufblasen,
     ueberall gleich, ohne Bezug zum Inhalt.

     Liquid Glass = eine Linse ueber etwas Echtem. Das Bild darunter muss
     erkennbar bleiben, die Kanten fangen Licht, und beim Antippen gibt
     die Flaeche spuerbar nach.

   Was weiterhin gilt:

     1. Farbverlaeufe nur, wo sie Daten bedeuten, Text lesbar machen oder
        Glas einen Untergrund geben. Der Kurvigkeitsbalken darf einen, ein
        Knopf nicht. Der Untergrund heisst --start-licht und ist EIN
        Verlauf fuer alle Bildschirme ohne eigenes Bild - niemand schreibt
        ihn ab, jeder benutzt die Marke (seit dem 05.09.2026, vorher
        standen vier Abschriften davon in style.css).
     2. Kein Verlaufstext, kein Neonleuchten.
     3. Keine Emoji als Symbole - dafuer gibt es die SVG-Sammlung in
        index.html.
     4. JEDE Flaeche ist Glas, auch Knoepfe, Eingabefelder und Umschalter.
        Inhaltskarten sind EINE Form (.karte in style.css): eine dunkle
        Scheibe in --glas-hell mit Lichtkante oben, wie die gruppierten
        Karten von iOS auf Dunkel. Damit das Glas lebt, liegt unter jedem
        Bildschirm etwas, das durchscheinen kann: --start-licht, eine
        Karte, ein Foto oder das eigene Motorrad - Glas ueber blankem
        Schwarz bleibt tot. Wo eine Karte ein eigenes Bild hat (die
        Bike-Karte), scheint es unscharf hinter ihr durch. Frueher galt
        hier "Bedienelemente ohne Bild bleiben matt" und spaeter der
        Werkstattraum als Untergrund, siehe ENTSCHEIDUNGEN.md
        (20.08. und 05.09.2026).

        DIE FORM EINER KARTE ist seit dem 10.09.2026 auch innen festgelegt,
        und zwar mit vier Bausteinen aus style.css:

          .widget-kopf     das Abzeichen und, wenn noetig, ein Link rechts
          .widget-name     die eine grosse Zeile, die sagt, worum es geht
          .widget-koerper  Werte (.widget-werte) oder ein Satz (.hint);
                           nur dieser Teil waechst
          .widget-knopf    die eine Handlung, am Fuss

        Wer eine neue Karte baut, nimmt diese vier - dann stehen die
        Knoepfe zweier nebeneinanderliegender Karten von selbst auf einer
        Linie, und nichts muss von Hand nachgemessen werden. So gebaut
        sind die Bike-Karte, die Reisekarte, die Kasse, die Mitfahrer und
        die Tageskarten im Reiseplaner.

   RAL 5005 ist die EINZIGE Signalfarbe und wird sparsam eingesetzt. Wenn
   alles die Signalfarbe traegt, bedeutet sie nichts mehr.
   ============================================================ */

/* ---------- Schrift ----------
   Inter, eine neutrale Grotesk, fuer Bildschirme gezeichnet: grosse
   x-Hoehe, offene Formen, Tabellenziffern. Sie ist der offene Zwilling
   von Apples Systemschrift - genau die Wirkung, die eine App haben soll,
   die sich wie eine iOS-App anfuehlen will. Eine einzige Datei als
   Variable Font traegt alle Gewichte von 100 bis 900 und eine optische
   Groesse (opsz), die Titel ab 20 Punkten etwas enger setzt.

   Bis zum 05.09.2026 war es Barlow in zwei Breiten; die Condensed-Breite
   gab Messwerten und Titeln den Instrumentencharakter. Inter hat keine
   Condensed - der Charakter kommt jetzt aus Gewicht, Tabellenziffern und
   enger Sperrung bei Titeln. Warum gewechselt wurde: ENTSCHEIDUNGEN.md.

   Die Datei liegt ABSICHTLICH im eigenen Ordner und wird nicht per Link
   von Google geladen: Google Fonts direkt einzubinden ist in Deutschland
   datenschutzrechtlich angreifbar, weil dabei die IP-Adresse des
   Besuchers an Google geht. Lizenz ist SIL OFL 1.1, der Text liegt in
   fonts/LIZENZ-Inter-OFL.txt. Die Version steht im Dateinamen, nicht als
   ?v= - pruefe.sh zaehlt ?v= nur in index.html, und ein vergessener
   Parameter hier hiesse: alte Schrift aus dem Browser-Speicher.

   font-display: swap heisst: Text erscheint sofort in der Systemschrift
   und wechselt nach, sobald Inter geladen ist. Ohne das bliebe die App
   fuer einen Moment leer. */

@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("../fonts/inter-4.1-variable-latin.woff2") format("woff2");
}

:root {
  /* ZWEI ERSCHEINUNGEN, EINE SPRACHE (seit 17.09.2026, ENTSCHEIDUNGEN.md).
     Hier in :root steht die DUNKLE Fassung, sie ist die Vorgabe. Weiter
     unten, unter :root[data-thema="hell"], stehen NUR die Marken, die im
     hellen Modus anders sind - Radien, Abstaende, Schrift gelten fuer beide.
     Wer das Thema schaltet, ist js/grundlage/thema.js: ein Attribut am
     <html>, sonst nichts. Kein Selektor in style.css fragt nach dem Thema;
     wer das tut, hat die Marke an der falschen Stelle. */
  color-scheme: dark;

  /* Flaechen, von dunkel nach hell gestaffelt */
  --bg:         #000000;   /* Grundflaeche, reines Schwarz */
  --surface:    #181818;   /* Karten und Bedienfeld */
  --surface-2:  #212121;   /* Vertiefungen: Eingabefelder, Messwerte */
  --line:       #2E2E2E;   /* Kanten */

  --text:       #F2F3F5;
  --muted:      #9AA3B0;   /* Nebentext und Beschriftungen, 8:1 auf Schwarz */

  /* Die Signalfarbe ist RAL 5005 "Signalblau".

     ZWEI Toene derselben Farbe, und das hat einen messbaren Grund: RAL 5005
     ist ein DUNKLES Blau. Auf der fast schwarzen Grundflaeche dieser App
     kommt es auf einen Kontrast von 2,4:1 - Text und Symbole waeren darin
     kaum zu erkennen (lesbar wird es ab 4,5:1). Das fruehere Orange kam auf
     6,7:1, deshalb fiel das dort nie auf.

     --accent      die Farbe selbst, fuer FLAECHEN: Knoepfe, gefuellte
                   Marken, alles wo heller Text darauf liegt.
     --accent-hell derselbe Farbton, nur aufgehellt (gleiche 203 Grad, volle
                   Saettigung), fuer TEXT, SYMBOLE und LINIEN auf dunklem
                   Grund. Kommt auf 4,8:1.

     Wer eine der beiden aendert, sollte die andere mitziehen - sie sind
     zwei Ansichten derselben Farbe, keine zwei Farben. */
  --accent:      #005387;   /* RAL 5005 Signalblau, RGB 0 83 135 */
  --accent-hell: #1F95E5;   /* aufgehellt: Text und Symbole auf Dunkel.
                               Auf einer Glaskarte ueber Schwarz 4,4:1, auf
                               der Grundflaeche 6,4:1. */
  --accent-glanz:#0068A8;   /* obere Kante der Knopfwoelbung */
  --accent-tief: #003F66;   /* untere Kante der Knopfwoelbung */
  --accent-dk:   #005E99;   /* Zustand beim Ueberfahren. Heller statt
                               dunkler: Auf einem dunklen Blau verschwaende
                               ein noch dunkleres Blau im Hintergrund. */
  --accent-ink:  #FFFFFF;   /* Text AUF der Signalfarbe. Weiss statt des
                               frueheren Fast-Schwarz - auf RAL 5005 kaeme
                               dunkler Text auf 2,4:1, Weiss auf 8,1:1. */

  --good:       #4ADE80;   /* positive Auswertung */
  --gps:        #4A9EFF;   /* eigener Standort - hebt sich von der Route ab */

  /* Die MESSSKALEN (Kurvigkeit, Steigung). Sie haengen ABSICHTLICH nicht an
     der Signalfarbe: Hier bedeutet die Farbe einen Wert, nicht die Marke.
     Wenig - mittel - viel liest jeder als gruen - gelb - orange, das ist
     erlernt. Am oberen Ende der Skala ein Blau, das dieselbe Farbe hat wie
     die Knoepfe der App, saehe nach Marke aus und nach nichts sonst. */
  --skala-wenig:  #4ADE80;
  --skala-mittel: #FACC15;
  --skala-viel:   #FF6B00;

  --danger:     #FF5A52;   /* Loeschen und Verwerfen */

  /* Radien. Frueher bewusst klein (6/12/16) - mit dem Schritt zu vollem
     Liquid Glass am 20.08.2026 deutlich angehoben: Glas wirkt erst mit
     weichen Ecken wie eine geschliffene Scheibe, mit spitzen wie eine
     Fensterscheibe. --r-pill ist die Pillenform fuer Umschalter, Suche
     und Abzeichen: 999px heisst schlicht "so rund wie moeglich". */
  --r-sm: 12px;   /* Chips, Eingabefelder, Knoepfe */
  --r-md: 18px;   /* Karten */
  --r-lg: 24px;   /* grosse Bloecke, Oberkante der Schublade */
  --r-xl: 28px;   /* die grosse Karte des Starts - iOS setzt Karten dieser Groesse mit 26-28 */
  --r-pill: 999px;
  --radius: var(--r-sm);   /* Altname aus der ersten Fassung, damit bestehende Regeln weiter gelten */

  /* Das Glas-Rezept als Marken, damit jede Flaeche dieselbe Scheibe ist.
     Fuenf Stufen weisser Schleier, von kaum sichtbar bis zur Lichtkante.
     Die Namen sagen die STAERKE, nicht den Einsatzort - dieselbe Stufe
     taugt als Fuellung, als Kante und als Lichtkante, je nachdem wie viel
     Licht die Stelle vertraegt.

     Warum ueberhaupt Stufen: In style.css standen einmal 99 verschiedene
     Weisswerte zwischen 0.02 und 1.0. Kein Mensch sieht den Unterschied
     zwischen 0.12 und 0.14, aber jeder sieht, wenn eine Flaeche aus der
     Reihe faellt. Weniger Stufen heisst mehr Einheit. */
  --glas-hauch:  rgba(255, 255, 255, 0.03);   /* Schachbrett, vertiefte Flaechen */
  --glas-hell:   rgba(255, 255, 255, 0.055);  /* die uebliche Fuellung */
  --glas-rand:   rgba(255, 255, 255, 0.20);   /* die uebliche Kante */
  --glas-heller: rgba(255, 255, 255, 0.22);   /* gedrueckt / hervorgehoben */
  --glas-licht:  rgba(255, 255, 255, 0.45);   /* obere Lichtkante (inset) */
  /* Der Rand einer Karte (und alles, was wie eine Karte steht: Umschalter,
     Zeilen in den Einstellungen). Kraeftiger als --glas-rand, denn er soll
     ABGRENZEN: Friedrich will jede Karte klar vom Grund unterscheiden
     koennen, im Hellen wie im Dunklen. Seit dem 17.09.2026 abends in der
     Signalfarbe, halb durchsichtig - ein blauer Saum, kein blauer Rahmen.
     Das ist die eine Stelle, an der das Blau Beschriftung einer Flaeche
     ist und nicht Bedienung; die Kante bleibt duenn, damit es so bleibt. */
  --karten-rand: color-mix(in srgb, var(--accent-hell) 42%, transparent);
  /* Die Fuellung ist dunkel (0,055), Kante und Lichtkante sind kraeftig:
     Eine Scheibe erkennt man am Rand, nicht an der Flaeche. Friedrich
     wollte die Karten im Dunklen zweimal dunkler als die erste Fassung
     (0,13, dann 0,08). */

  /* Der Filter und der Schatten jeder Glaskarte, als Marken - in style.css
     standen einmal zwoelf verschiedene Blur-Radien nebeneinander. Eine
     Karte hat GENAU EINEN backdrop-filter; was in ihr liegt (Kacheln,
     Zeilen), bekommt Fuellung und Kante, aber keinen zweiten Filter -
     der Browser rechnet jeden davon je Bild. */
  --glas-filter:   blur(30px) saturate(150%);
  --glas-schatten: 0 14px 38px var(--schatten-mittel);

  /* Der Untergrund fuer Bildschirme ohne eigenes Bild: ein leiser
     Lichtkegel von oben in der Signalfarbe, der bis gut zur Haelfte
     auslaeuft - darunter ist die Flaeche reines Schwarz. Er gibt den
     Glaskanten etwas zu fangen (Grundsatz 4), ohne mit Fotos oder Karten
     zu streiten. Grundsatz 1 nennt ihn ausdruecklich. */
  --start-licht:
    radial-gradient(120% 58% at 50% -12%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 66%),
    radial-gradient(60% 40% at 100% 85%, color-mix(in srgb, var(--accent-hell) 14%, transparent), transparent 70%);
  /* Zwei Lichter: der Kegel von oben und ein blauer Schein unten rechts.
     Sie geben der Bedienschicht (Leiste, Bedienfeld) etwas zu verwischen.
     Ein dritter, metallischer links war kurz da und ist gestrichen - unter
     der Unschaerfe blieb davon ein Grauhauch, mehr nicht. */

  /* WO DAS GLAS WIRKLICH GLAS IST (seit dem 17.09.2026, nach der Pruefung
     gegen Apples Richtlinien): Den Filter, der den Untergrund verwischt,
     tragen nur die schwebenden Bedienflaechen - Leiste, Bedienfeld des
     Planers, Blatt, Toast, runde Knoepfe - und die Bike-Karte, weil ihr
     Foto in ihr liegt. Inhaltskarten (.karte) behalten Fuellung, Kante,
     Lichtkante und Glanz, aber keinen Filter: Der Browser rechnet jeden
     Filter je Bild, und Glas auf Glas verwischt die Ebene, die das Material
     erst schafft. Wer eine neue Bedienflaeche baut, nimmt --glas-filter;
     wer eine Karte baut, nimmt .karte und laesst den Filter weg. */

  /* Metall. Die Wortmarke ist gerendertes, gebuerstetes Metall - vollstaendig
     neutral, ohne jeden Farbstich (gemessene Saettigung 0,03). Text und
     Nebentext der App tragen dagegen einen Blaustich bei 220 Grad, und genau
     daher ruehrt der Eindruck, dass Schriftzug und Oberflaeche zwei
     Handschriften sind. Diese drei Toene sind aus dem Logo gemessen und
     schliessen die Luecke.

     WAS METALL NICHT IST: eine Signalfarbe. Was metallisch ist, ist
     Beschriftung - eine Ueberschrift, ein Untertitel, nie ein Knopf. RAL 5005
     bleibt allein zustaendig fuer alles, was man antippen kann. Wer das
     aufweicht, nimmt der Signalfarbe ihre Bedeutung (siehe oben) und dem
     Nutzer die Auskunft, was ueberhaupt bedienbar ist. */
  --metall:       #9D9997;   /* Beschriftung mit Markenbezug, 7,4:1 auf Schwarz */
  --metall-glanz: #DDD9D9;   /* Ueberschriften und Lichtkanten, 15:1 */
  --metall-tief:  #726E6C;   /* nur Grosses und Dekoratives, 4,2:1 */

  /* Die Nachtseite. Sie hat genau EINEN Ort: den Startfilm (start.js), die
     Bergwelt der ersten drei Sekunden. Vier Staffeln, jede dunkler als die
     davor - die Tiefe entsteht allein aus diesem Gefaelle, nicht aus
     Perspektive. Die Toene liegen unter --surface, sind also dunkler als
     jede Flaeche der App: Der Film soll aus dem Schwarz kommen, nicht auf
     ihm liegen.

     Sie stehen hier und nicht in style.css, weil auch der Film die
     Designsprache benutzt (Grenze 2) - und weil eine Datei mit sechs
     Farbnamen leichter nachzustimmen ist als ein Dutzend Fundstellen.

     Seit dem 11.09.2026 liegt der Film auf Eis (abgelegt/startfilm/).
     Die Marken bleiben trotzdem hier: Dort wartet startfilm.css auf sie,
     und ein Comeback soll nicht damit anfangen, sechs Farben aus der
     Geschichte zu suchen. Sonst benutzt sie nichts. */
  --nacht-1:     #141A23;   /* fernste Staffel, noch etwas Himmel darin */
  --nacht-2:     #0D1219;
  --nacht-3:     #080C11;
  --nacht-4:     #04060A;   /* naechste Staffel, fast Schwarz */
  --nacht-grat:  #AFC0D4;   /* das kalte Licht auf den Kammlinien */
  --nacht-stern: #DDE4EC;

  /* Dasselbe in Schwarz: Schatten unter Glasflaechen, Schleier ueber Fotos.
     Sechs Stufen statt fuenf, weil Schwarz einen weiteren Bereich abdecken
     muss - vom kaum merklichen Schatten bis zur fast deckenden Abdeckung
     ueber einem hellen Foto. */
  --schatten-hauch:  rgba(0, 0, 0, 0.22);   /* Kontaktschatten, dicht am Rand */
  --schatten-weich:  rgba(0, 0, 0, 0.35);   /* der uebliche Schlagschatten */
  --schatten-mittel: rgba(0, 0, 0, 0.50);   /* abgehobene Flaechen */
  --schatten-stark:  rgba(0, 0, 0, 0.62);   /* Overlays, Textschatten */
  --schatten-tief:   rgba(0, 0, 0, 0.78);   /* Schleier ueber einem Foto */
  --schatten-voll:   rgba(0, 0, 0, 0.92);   /* fast deckend */

  /* Das FELD ueber der Landkarte: Navigationsleiste, Bedienfeld des
     Planers, Manoevertafel, Toast, Einfuehrung. Im Dunklen ist es dunkles
     Glas (die zweittiefste Schattenstufe, ueber einer hellen Karte waere
     ein weisser Schleier unlesbar), im Hellen weisses Glas. Deshalb eine
     eigene Marke und nicht --schatten-tief direkt: Der Schatten bleibt in
     beiden Erscheinungen ein Schatten, das Feld wechselt. */
  --feld-glas:   var(--schatten-tief);
  /* Altname, damit bestehende Regeln weiter gelten. */
  --glas-dunkel: var(--feld-glas);

  /* Der Gefahr-Knopf ist wie der normale Knopf aufgebaut - heller Glanz
     oben, Grundfarbe in der Mitte, dunkle Kante unten - nur in Rot.
     Dieselben drei Rollen wie bei --accent, deshalb dieselben Namen. */
  --danger-glanz: #FF7B74;
  --danger-tief:  #D93A32;
  --danger-ink:   #1A0605;   /* Schrift AUF dem roten Knopf */

  /* Ein Schild aus hellem Blech mit dunkler Schrift. Umgekehrt zum Rest der
     App, deshalb braucht es eigene Marken statt --text/--bg.

     Zwei Verwendungen, beide aus derselben Idee: der Passname auf der Karte
     und das Alpha-Abzeichen an der Wortmarke. Ein Blechschild faellt auf
     dunklem Grund sofort auf, ohne eine zweite Signalfarbe einzufuehren -
     RAL 5005 bleibt allein zustaendig fuer alles Bedienbare, und ein
     Abzeichen ist kein Knopf. */
  --pass-schild:     #D8D2C4;
  --pass-schild-ink: #2A2620;

  /* Der Farbton, in dem die Werkstattlampen abdunkeln. Kein reines
     Schwarz: Das Raumfoto ist blaugrau, und ein schwarzer Fleck darauf
     saehe aus wie ein Loch statt wie ausgehendes Licht. */
  --raum-dunkel: #1A1E26;

  /* Die Wortmarke ist ein Bild aus hellem Metall - auf der hellen
     Grundflaeche waere sie kaum zu sehen. Die helle Erscheinung dunkelt sie
     ueber diesen Filter ab; im Dunklen bleibt sie, wie sie ist. */
  --logo-filter: none;

  /* Abstandsskala. Immer eine dieser Stufen benutzen, nie krumme Werte -
     das ist der Unterschied zwischen "gestaltet" und "zusammengeschoben".
     Die beiden grossen Stufen sind fuer breite Bildschirme gedacht - auf
     einem Handy waere s7 schon ein Fuenftel der Breite. */
  --s1: 4px;  --s2: 8px;  --s3: 12px;
  --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px;

  /* Hoehe der Navigationsleiste. --nav-raum ist der Platz, den die
     Bildschirme dafuer frei lassen muessen - er ist 0, solange die Leiste
     versteckt ist (siehe body.mit-nav in style.css). Wo die Leiste sitzt,
     entscheidet die Anordnung: im Hochformat unten (style.css), im
     Querformat oben (quer.css) - der Platzhalter ist derselbe. */
  --nav-h: 66px;
  /* Im Querformat ist dieselbe Leiste die Kopfzeile einer Webseite und
     darf mehr Gewicht haben als eine Daumenleiste - quer.css legt --nav-h
     innerhalb seines Media-Blocks auf diesen Wert um. Alles Weitere folgt
     von selbst, weil Margen, Hoehenformeln und der Toast an --nav-h
     rechnen. */
  --nav-h-quer: 80px;
  --nav-raum: 0px;

  /* Masse fuer breite Bildschirme. Hier und nicht in quer.css, weil eine
     Spaltenbreite eine Ansage der Designsprache ist, kein Anordnungsdetail -
     und weil style.css eine davon ebenfalls benutzt (das Planer-Bedienfeld
     ist im Hochformat ueber 760 Punkten dieselbe Seitenleiste). */
  --inhalt-max: 1080px;    /* Lesebreite fuer Listen und Textseiten */
  /* Zwei verschiedene Grenzen, und der Unterschied ist der Inhalt: Eine
     1400 Punkte breite TEXTZEILE liest niemand - deshalb 1080 fuer alles
     zum Lesen. Ein Regal aus BILDERN darf dagegen breit sein, dort ist
     Breite kein Hindernis, sondern mehr Bild. */
  --feed-max: 1440px;      /* Kartenregale: Touren und Stats */
  --spalte-panel: 330px;   /* Bedienfeld des Planers als Seitenleiste */
  --spalte-ride: 380px;    /* Wertefeld beim Aufzeichnen als Seitenspalte */

  /* Zwei Rollen, seit dem 05.09.2026 dieselbe Schrift: --schrift-display
     steht an Ueberschriften, Messwerten und Beschriftungen, --schrift-text
     an allem zum Lesen. Die Marke bleibt getrennt, damit die Rollen im
     Code sichtbar sind und eine spaetere Display-Schrift eine Zeile ist. */
  --schrift-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --schrift-display: var(--schrift-text);
}

/* ============================================================
   DIE HELLE ERSCHEINUNG

   Dieselbe Sprache bei Tageslicht: weisses Glas auf kuehlem Hellgrau,
   dunkle Schrift, dieselbe Signalfarbe. Nur was sich unterscheidet,
   steht hier - alles andere erbt von :root.

   Zwei Dinge, die nicht auf der Hand liegen:

     Das Glas ist WEISS, nicht durchsichtig-dunkel. Im Dunklen ist eine
     Scheibe ein wenig Weiss ueber Schwarz; im Hellen ist sie viel Weiss
     ueber Hellgrau, und die Kante ist reines Weiss - so setzt iOS seine
     Karten im hellen Modus. Ohne diese Umkehr saehen die Karten wie
     Schmutz auf Glas aus.

     Die Messfarben und Zustaende sind DUNKLER: Das Gruen, das auf Schwarz
     leuchtet, ist auf Weiss nicht mehr zu lesen (2,1:1). Jede hier ist auf
     mindestens 4,5:1 gegen --surface gesetzt, damit sie auch als Text
     taugt. RAL 5005 selbst bleibt, und --accent-hell ist im Hellen die
     Farbe selbst: Sie liegt auf Hellgrau bei 7,1:1, mehr braucht sie nicht.
   ============================================================ */
:root[data-thema="hell"] {
  color-scheme: light;

  --bg:         #E8ECF1;
  --surface:    #FFFFFF;
  --surface-2:  #DEE3EA;
  --line:       #C3CBD5;

  --text:       #131720;
  --muted:      #5B6574;   /* 5,9:1 auf --surface-2 */

  --accent-hell: #005387;
  --accent-dk:   #004470;

  /* Alle als Text tauglich: mindestens 4,5:1 auf der hellen Karte (#F6F7F9). */
  --good:        #11703A;   /* 5,6:1 */
  --gps:         #1D6FD1;
  --skala-wenig:  #1FA356;
  --skala-mittel: #8A6A00;  /* 5,1:1 - als Balken weiter gelb genug */
  --skala-viel:   #D45400;
  --danger:       #C42D26;  /* 5,2:1 */
  --danger-glanz: #F0554B;
  --danger-tief:  #B2281F;
  --danger-ink:   #FFFFFF;

  --glas-hauch:  rgba(255, 255, 255, 0.38);
  --glas-hell:   rgba(255, 255, 255, 0.60);
  --glas-rand:   rgba(255, 255, 255, 0.90);
  --glas-heller: rgba(255, 255, 255, 0.82);
  --glas-licht:  rgba(255, 255, 255, 1.00);
  --karten-rand: color-mix(in srgb, var(--accent) 38%, transparent);
  --glas-schatten: 0 14px 38px var(--schatten-mittel);

  /* Schatten im Hellen: dieselben Rollen, ein Drittel der Dichte, und
     nicht Schwarz, sondern das Blaugrau der Flaechen - schwarze Schatten
     auf Hellgrau sehen nach Druckfehler aus. */
  --schatten-hauch:  rgba(24, 34, 52, 0.06);
  --schatten-weich:  rgba(24, 34, 52, 0.10);
  --schatten-mittel: rgba(24, 34, 52, 0.16);
  --schatten-stark:  rgba(24, 34, 52, 0.28);
  --schatten-tief:   rgba(24, 34, 52, 0.55);
  --schatten-voll:   rgba(24, 34, 52, 0.80);

  --feld-glas:   rgba(255, 255, 255, 0.86);

  --metall:       #6B6765;   /* 5,3:1 auf --surface */
  --metall-glanz: #2E2B2A;
  --metall-tief:  #9D9997;

  /* Der Raum hinter Motorrad und Kartenvorschau: im Hellen ein kuehles
     Hellgrau statt des blaugrauen Werkstattdunkels, sonst stuende auf
     jeder Karte ein dunkles Loch. */
  --raum-dunkel: #D3DAE3;
  --logo-filter: brightness(0.38) contrast(1.35);

  --start-licht:
    radial-gradient(120% 58% at 50% -12%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 66%),
    radial-gradient(60% 40% at 100% 85%, color-mix(in srgb, var(--accent-hell) 12%, transparent), transparent 70%),
    radial-gradient(50% 35% at -10% 60%, color-mix(in srgb, var(--metall) 12%, transparent), transparent 70%);
}

/* ============================================================
   WAS DAS SYSTEM VERLANGT

   Drei Einstellungen, die Leute am Geraet treffen und die die App
   beantworten muss - hier ueber die Marken, damit style.css nichts davon
   wissen muss:

     Transparenz reduzieren   kein Filter, deckende Flaechen statt Glas
     Kontrast erhoehen        kraeftigere Kanten und dunklerer Nebentext
     Bewegung reduzieren      steht in style.css bei den Animationen selbst
   ============================================================ */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glas-filter: none;
    --glas-hell: var(--surface);
    --glas-hauch: var(--surface);
    --feld-glas: var(--surface);
  }
}
@media (prefers-contrast: more) {
  :root {
    --glas-rand: rgba(255, 255, 255, 0.45);
    --muted: #B8C0CC;
  }
  :root[data-thema="hell"] {
    --glas-rand: rgba(24, 34, 52, 0.45);
    --muted: #3F4756;
  }
}

* { box-sizing: border-box; }

/* Das HTML-Attribut "hidden" soll IMMER gewinnen.
   Warum das hier steht: Browser blenden ein Element mit hidden nur ueber
   die schwache Regel "display:none" aus. Jede eigene Regel mit
   display:flex oder display:grid schlaegt sie - das Element bleibt trotz
   hidden sichtbar. Genau dieser Fehler ist in diesem Projekt mehrfach
   aufgetreten, und jedes Mal musste eine eigene [hidden]-Regel
   nachgereicht werden. Diese eine Zeile erledigt es ein fuer alle Mal.
   Das !important ist hier ausnahmsweise richtig: hidden IST eine Ansage,
   keine Empfehlung. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  /* DIE HOEHE, AN DER ALLES ANDERE HAENGT. Jedes
     height: calc(100% - var(--nav-raum)) im Projekt rechnet von hier aus.

     Warum nicht schlicht 100 Prozent: Auf dem Handy gibt es ZWEI
     Bildschirmhoehen. Die grosse gilt mit eingefahrener Adresszeile, die
     kleine mit ausgefahrener - und "100%" meint immer die GROSSE. Steht die
     Adresszeile aber im Bild, rechnet die ganze App mit mehr Platz, als sie
     hat: Der Inhalt schiebt sich unter die Leiste am unteren Rand, und
     darunter bleibt ein Streifen stehen.

     dvh ist die Hoehe, die gerade wirklich da ist. Sie aendert sich beim
     Ein- und Ausfahren der Adresszeile, und genau das ist hier richtig.

     Die 100% davor sind der Rueckfall fuer Browser, die dvh nicht kennen -
     sie ueberlesen die zweite Zeile einfach. */
  height: 100%;
  height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Wiederkehrende Bausteine ----------
   .titel  - grosse Ueberschrift in Versalien
   .label  - kleine Beschriftung ueber einem Abschnitt
   .wert   - eine Zahl zum Ablesen (Tacho, Distanz, Grad/km)

   Der Kniff bei .wert ist tabular-nums: alle Ziffern sind gleich breit,
   dadurch huepft ein hochzaehlender Wert nicht hin und her. */
.titel {
  font-family: var(--schrift-display);
  font-weight: 700;
  /* Gemischte Schrift mit enger Sperrung statt Versalien: Inter-Versalien
     sind ein Drittel breiter als die alten Condensed-Versalien und wuerden
     auf dem Handy umbrechen. So setzt auch iOS seine grossen Titel. */
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.label {
  font-family: var(--schrift-display);
  font-weight: 600;
  text-transform: uppercase;
  /* Versalien in Inter brauchen Luft, aber weniger als frueher: 0.06em
     statt 0.09 - die Schrift ist von sich aus breiter. */
  letter-spacing: 0.06em;
  font-size: 11px;
  color: var(--muted);
}
.wert {
  font-family: var(--schrift-display);
  font-weight: 600;
  /* Tabellenziffern: alle Ziffern gleich breit, ein hochzaehlender Wert
     huepft nicht. Inter kann das ueber dasselbe Schluesselwort. */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ---------- Symbole ----------
   Alle SVG-Symbole nehmen ueber currentColor die Textfarbe ihrer Umgebung
   an, dadurch passen sie ohne Zutun in jeden Knopf und jede Liste.
   fill:none plus stroke ist der Grund, warum sie ueberall gleich wirken:
   es sind Strichzeichnungen, keine Flaechen. */
.ic {
  width: 20px; height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic.gross { width: 24px; height: 24px; }
.ic.klein { width: 16px; height: 16px; stroke-width: 1.8; }