@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 oder Text lesbar machen.
        Der Kurvigkeitsbalken darf einen, ein Knopf nicht.
     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.
        Damit das ueberall wirkt, liegt unter jedem Bildschirm etwas, das
        durchscheinen kann (Foto, Karte, Raum) - Glas ueber blankem Schwarz
        bleibt tot. Frueher galt hier "Bedienelemente ohne Bild bleiben
        matt", siehe ENTSCHEIDUNGEN.md.

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

/* ---------- Schrift ----------
   Barlow, eine leicht technische Grotesk. Eine Familie in zwei Breiten
   statt zweier verschiedener Schriften - das wirkt ruhiger und ist
   schwerer falsch zu machen.

   Die Dateien liegen ABSICHTLICH im eigenen Ordner und werden 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-Barlow-OFL.txt.

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

@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("fonts/barlow-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/barlow-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/barlow-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("fonts/barlow-condensed-700.woff2") format("woff2");
}

:root {
  /* 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:      #8B929E;   /* Nebentext und Beschriftungen */

  /* 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: #0084D6;   /* aufgehellt: Text und Symbole auf Dunkel */
  --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;

  /* Das warme Licht in der Garage: der Schein, den der Raum auf die Kante
     der Maschine wirft. Auch das ist keine Markenfarbe, sondern LICHT, und
     es haengt deshalb absichtlich nicht an --accent.

     Nachgesehen beim Wechsel auf RAL 5005: Mit blauem Saum verschwand die
     Maschine im Raum. Der Werkstattraum ist selbst blau-grau - ein warmer
     Schein trennt die Maschine davon ab, ein blauer verschmilzt damit. */
  --licht-warm: #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-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.05);   /* Schachbrett, vertiefte Flaechen */
  --glas-hell:   rgba(255, 255, 255, 0.10);   /* die uebliche Fuellung */
  --glas-rand:   rgba(255, 255, 255, 0.14);   /* die uebliche Kante */
  --glas-heller: rgba(255, 255, 255, 0.20);   /* gedrueckt / hervorgehoben */
  --glas-licht:  rgba(255, 255, 255, 0.32);   /* obere Lichtkante (inset) */

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

  /* Altname, damit bestehende Regeln weiter gelten: dunkles Glas ueber
     einer hellen Flaeche (Karte!) ist genau die zweittiefste Stufe. */
  --glas-dunkel: var(--schatten-tief);

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

  /* Das Schild an einem Pass: helles Blech, dunkle Schrift. Umgekehrt zum
     Rest der App, deshalb braucht es eigene Marken statt --text/--bg. */
  --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;

  /* 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: 58px;
  --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 */
  --spalte-panel: 330px;   /* Bedienfeld des Planers als Seitenleiste */
  --spalte-ride: 380px;    /* Wertefeld beim Aufzeichnen als Seitenspalte */

  /* Zwei Schriftrollen: Condensed fuer Ueberschriften und Messwerte,
     die normale Breite fuer alles zum Lesen. */
  --schrift-text: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --schrift-display: "Barlow Condensed", "Barlow", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { 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;
  height: 100%;
  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;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin: 0;
}
.label {
  font-family: var(--schrift-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12px;
  color: var(--muted);
}
.wert {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

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