/* WoMo-Logbuch – Gestaltungswerte (Werte-Datei)

   Diese Datei hält ausschließlich Custom Properties (Token) und die
   Schriftquellen (@font-face) – keine einzige Regel. `static/style.css` ist das Regel-Stylesheet und bezieht alle Werte
   von hier per `var(--…)`; es deklariert selbst keine Custom Property mehr
   (geprüft von `tests/test_design_tokens.py`). Jede Seite, die `style.css`
   lädt, lädt DAVOR diese Datei (zwei parallele Anfragen, kein `@import`).

   Spezifikation: docs/superpowers/specs/2026-10-26-gestaltungswerte-design.md
   (Abschnitt 4). Schnitt 1 hat `:root` und beide Dunkel-Blöcke wörtlich und
   wertgleich aus `style.css` hierher umgezogen; die weiteren Schnitte
   ergänzen Schrift-, Abstands- und Bewegungsstufen.

   Kopien außerhalb dieser Datei (theme-color-Metas in `base.html`, Manifest,
   JS-Rückfallwerte) prüft der Wächter gegen die Werte hier – wer einen Token
   ändert, sieht im Testlauf, wo die Kopie steht. */


/* ---------------------------------------------- Schriftquellen (@font-face)
   Die Quellen der drei Schriftfamilien, die --font-display/--font-body/
   --font-mono unten nennen. Sie stehen hier und nirgends sonst, weil jede
   Seite diese Datei lädt – auch die eigenständigen Seiten ohne style.css
   (Vollbildkarten, Druck, Demo, Anhang-Ansicht). @font-face ist keine
   Regel: es gestaltet kein Element, und der Browser lädt eine Datei erst,
   wenn ein Text sie wirklich braucht. Bis 0.238.39 standen sie in
   style.css, die Demo trug eine eigene Kopie, die übrigen Seiten fielen
   auf die Systemschrift zurück. */
/* Selbst gehostete Webfonts (latin + latin-ext Subsets von Google Fonts,
   latin-ext lädt nur on-demand via unicode-range). Kein CDN/Render-Block-Chain. */
/* IBM Plex Mono 400 normal latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 400 normal latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 500 normal latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 500 normal latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Saira Condensed 500 normal latin-ext */
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/saira-condensed-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Saira Condensed 500 normal latin */
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/saira-condensed-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Saira Condensed 600 normal latin-ext */
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/saira-condensed-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Saira Condensed 600 normal latin */
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/saira-condensed-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Saira Condensed 700 normal latin-ext */
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/saira-condensed-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Saira Condensed 700 normal latin */
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/saira-condensed-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Source Sans 3 400 italic latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/source-sans-3-400i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Source Sans 3 400 italic latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/source-sans-3-400i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Source Sans 3 400 normal latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/source-sans-3-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Source Sans 3 400 normal latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/source-sans-3-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Source Sans 3 600 normal latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/source-sans-3-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Source Sans 3 600 normal latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/source-sans-3-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* P166: --bg von #ebeee7 auf #f0f2ea – ein warmes Salbei-Creme statt des
     kühleren Moosgrau (Kanäle je +3…+5, R-B-Differenz 4→6 = spürbar wärmer,
     aber knapp unter der Wahrnehmungsschwelle einzeln nebeneinander).
     --muted (#4d5c4b) auf dem neuen --bg (WCAG-Relative-Luminanz, gleiches
     Verfahren wie P133g): 6,31:1 (vorher auf #ebeee7 nach derselben Formel
     6,08:1) – weiterhin klar über dem AA-Ziel 4,5:1, keine Abdunkelung
     nötig. --line/--route-soft bleiben unverändert: beide liegen bereits im
     selben warmen Grünton (R-B-Differenz 7 bzw. 12) wie das neue --bg und
     wirken darauf nicht kühl-fremd. */
  --bg: #f0f2ea;
  --card: #ffffff;
  --ink: #1c2520;
  --muted: #4d5c4b;
  --line: #d5dace;
  --route: #2c5f45;
  --route-soft: #e2ece6;
  --accent: #1e4f8f;
  --accent-deep: #173f74;   /* Primär-Button-Hover, war hartkodiert */
  --accent-soft: #e3ebf7;   /* Fähr-Tag-Tönung, war hartkodiert */
  --accent-ink: #ffffff;
  --danger: #a4332a;
  --danger-soft: #fbf3f2;   /* Strecken-/Warn-Hinweis-Tönung, war hartkodiert */
  --location: #d9534f;      /* Eigener Standort auf der Karte, war hartkodiert */
  /* P133g: von #b06d12 auf #96560a abgedunkelt – Text auf Weiß/--card war
     4,16:1 (< 4,5:1 AA-Kleintext-Ziel), auf --excursion-soft nur 3,5:1
     (< AA). #96560a trifft rechnerisch (WCAG-Relative-Luminanz) 5,78:1 auf
     Weiß/--card und 4,85:1 auf --excursion-soft – AA für alle Verwender
     (.tour-route-label, .today-tour-name, .tour-head h3, .wish-tag.wish-muss
     u. a.), Bernstein-Charakter bleibt (nur dunkler). */
  --excursion: #96560a;     /* Ausflugsziele – Bernstein, von Route/Buchung abgesetzt */
  --excursion-soft: #f5ead6;
  --parking: #1d6fd6;       /* Parkplatz-Ausflugsziel-Marker („P", blau, P45) */
  --dining: #c0392b;        /* Restaurant-Ausflugsziel-Marker („🍴", rot, P45) */
  /* P133g: von #e0a500 auf #b8860b abgedunkelt – als Icon (.fav-star, ★ ohne
     Text) gilt WCAG 1.4.11 Non-Text-Contrast (3:1 statt 4,5:1); #e0a500 auf
     Weiß/--card lag bei 2,2:1 (FAIL). #b8860b trifft rechnerisch 3,25:1 auf
     Weiß/--card – Bernstein-Charakter bleibt (nur dunkler). */
  --star: #b8860b;           /* Favoriten-Stern, Bernstein-Familie aber heller */
  --notify: #e8c98f;         /* Flash-Benachrichtigungs-Rahmen */
  --notify-soft: #fdf3e4;    /* Flash-Benachrichtigungs-Fläche */
  --attention: #9a4a1f;      /* Offene-Punkte-Badge-Text (Checkliste/Packliste) */
  --attention-soft: #f6e3d9; /* Offene-Punkte-Badge-Fläche */
  /* Schnitt 2 (Spec 7.2): die Streuwerte aus style.css als Token.
     --ok/--warn sind Aliase, keine neuen Farben (das Ziel will wenige):
     Status „produktiv"/„test" am linken Rand der KI-Tabelle. Als Rand gilt
     WCAG 1.4.11 (3:1): --route 7,42:1 und --excursion 5,78:1 auf --card. Im
     Dunkeln folgen sie ihrem Ziel von selbst (7,68:1 / 7,56:1) und brauchen
     deshalb keine eigene Zweitbelegung. */
  --ok: var(--route);
  --warn: var(--excursion);
  /* Papier: bewusste Hell-Ausnahmen, die auch im Dunkeln hell BLEIBEN –
     2FA-QR-Code (Kamera braucht hellen Grund), Kfz-Kennzeichen (echtes
     Schild), Leaflet-Knöpfe (sitzen auf der hellen Karte). --paper-ink auf
     --paper 15,73:1 (AA/AAA), --paper-line ist ein rein informativer Rand. */
  --paper: #ffffff;
  --paper-ink: #1c2520;
  --paper-line: rgba(0, 0, 0, 0.2);
  /* Abdunkelung hinter Dialogen (::backdrop) – vorher zwei verschiedene Werte. */
  --scrim: rgba(20, 24, 22, 0.45);
  /* Leichte Tönung aus --ink (Status-Pille „vergangen", „nur lesen").
     --muted darauf: 6,35:1 über --card, 5,64:1 über --bg – AA. */
  --ink-tint: rgba(28, 37, 32, 0.06);
  /* Kartenfläche unter den Kacheln (sichtbar, solange sie laden, und hinter
     dem PDF-Anhang) und der Grund der Leaflet-Attribution – vorher je Seite
     als Kopie in fünf eigenständigen Seiten. Hell ist die Attribution
     Leaflets eigener Wert, dunkel --card mit derselben Deckkraft. */
  --map-surface: #dfe6e1;
  --map-attribution: rgba(255, 255, 255, 0.8);
  /* P166: Radius-Skala statt einem einzelnen Wert – --radius wandert dabei
     dezent von 10px auf 12px (gewollte, kleine Modernisierung, s.
     Design-Refresh-Plan P166). --radius-sm deckt die bisherigen 8px-Flächen
     (Formularfelder, Dropdowns, kleine Karten) ab, --radius-lg die wenigen
     Sonderfälle mit auffällig größerem Radius (14–18px-Landing-Karten),
     --radius-pill ersetzt die vielen hartkodierten 999px-Pillen/Chips. */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  /* P166: Elevation-Token – --shadow-1 für ruhende Karten (sehr weich,
     zwei flache Layer), --shadow-2 für Hover/Dialog/Dropdown (kräftiger,
     größerer Streuradius). Ink-basierte Alpha-Werte (--ink = #1c2520) statt
     reinem Schwarz, passend zur restlichen Palette. Dark-Mode-Zweitbelegung
     in beiden Dark-Blöcken unten. */
  --shadow-1: 0 1px 2px rgba(28, 37, 32, 0.05), 0 4px 12px rgba(28, 37, 32, 0.06);
  --shadow-2: 0 2px 6px rgba(28, 37, 32, 0.08), 0 10px 28px rgba(28, 37, 32, 0.14);
  /* Schnitt 2: --shadow-3 hebt die Geräte-Rahmen der Landing ab (beide
     Rahmen teilen ihn, vorher zwei leicht verschiedene Werte);
     --shadow-marker setzt Marker/Badges von den Kartenkacheln ab (vorher
     .18/.3/.35 gemischt, jetzt einheitlich .35 – die Kacheln sind in beiden
     Themes gleich hell, deshalb dieselbe Belegung im Dunkeln);
     --shadow-inset vertieft die Wasserwaage. */
  --shadow-3: 0 18px 40px -16px rgba(28, 37, 32, 0.55);
  --shadow-marker: 0 1px 4px rgba(0, 0, 0, 0.35);
  --shadow-inset: inset 0 2px 10px rgba(0, 0, 0, 0.08);
  --field: #ffffff;          /* Formularfeld-Fläche (Input/Select/Textarea) */
  --font-display: "Saira Condensed", "Arial Narrow", sans-serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* ------------------------------------------- Schrift (Schnitt 3, Spec 5)
     Neun Größenstufen, benannt nach Größe statt nach Rolle – dieselbe Stufe
     dient vielen Rollen. Basis 16 px, Schritte um 1,125…1,25 auf glatte
     Pixel gerundet. Nur --fs-3xl (h1/Seitenkopf) und --fs-hero (Landing)
     fließen mit der Breite: Telefon zuerst. Schriftgewichte bekommen keinen
     Token – sie sind durch die geladenen Schriftdateien vorgegeben. */
  --fs-2xs: 0.72rem;   /* 11,5 px – Mono-Kleinstlabels, Badges in Chips */
  --fs-xs: 0.8rem;     /* 12,8 px – Metazeilen, Chips, Tabellenköpfe */
  --fs-sm: 0.875rem;   /* 14 px – Zweittext, Tabellenzellen, kleine Buttons */
  --fs-md: 1rem;       /* 16 px – Fließtext, Formularfelder, Buttons */
  --fs-lg: 1.125rem;   /* 18 px – h3, Panel-Titel, Lead */
  --fs-xl: 1.375rem;   /* 22 px – h2, Kennzahlen */
  --fs-2xl: 1.75rem;   /* 28 px – große Kennzahlen, Abschnitts-Display */
  --fs-3xl: clamp(1.75rem, 1.2rem + 2.4vw, 2.25rem); /* 28 → 36 px – h1 */
  --fs-hero: clamp(2rem, 5vw, 3.1rem);               /* 32 → 50 px – Landing */
  /* Zeilenhöhen (einheitenlos, erben relativ) und Laufweiten. */
  --lh-none: 1;        /* Buttons, Badges, Icon-Boxen */
  --lh-tight: 1.1;     /* h1, Display */
  --lh-snug: 1.3;      /* h2/h3, Chips, Tabellen */
  --lh-base: 1.5;      /* Fließtext */
  --ls-tight: 0.01em;  /* Display-Überschriften */
  --ls-caps: 0.06em;   /* Versal-Labels, Kicker, .navlink */
  --ls-wide: 0.12em;   /* der eine Kicker mit sehr weitem Satz */

  /* ----------------------------------------- Abstände (Schnitt 4, Spec 6)
     4-px-Raster mit zwei Halbschritten (6 px, 12 px) für dichte Stellen wie
     Chips und Tabellen. Gilt für padding/margin/gap/inset in style.css –
     dort steht nur noch 0, auto, %, var( oder calc( aus Token. Negative
     Abstände: calc(-1 * var(--space-…)). */
  --space-3xs: 0.125rem; /* 2 px – Hairline-Lücken, Chip-Innenraum oben/unten */
  --space-2xs: 0.25rem;  /* 4 px – Icon↔Text, enge Listen */
  --space-xs: 0.375rem;  /* 6 px – Chip-Innenraum, Tabellenzellen */
  --space-sm: 0.5rem;    /* 8 px – Standard-gap, Button-Innenraum oben/unten */
  --space-md: 0.75rem;   /* 12 px – Panel-Innenraum mobil, Formularzeilen */
  --space-lg: 1rem;      /* 16 px – Panel-Innenraum, Absatzabstand */
  --space-xl: 1.5rem;    /* 24 px – Abschnittsabstand, Seiten-Innenraum */
  --space-2xl: 2rem;     /* 32 px – Gruppenabstand, Dialog-Innenraum */
  --space-3xl: 3rem;     /* 48 px – Seitenende, Landing-Abschnitte */
  /* Fließende Abstände der Landing (vorher vier clamp()-Literale). */
  --space-section: clamp(1.8rem, 4vw, 3.4rem);    /* Spalten-gap Hero/Kopf */
  --space-section-sm: clamp(1.4rem, 4vw, 3rem);   /* Spalten-gap Funktionen */
  --space-fluid-lg: clamp(1.4rem, 4vw, 2.2rem);   /* Innenraum Kachel groß */
  --space-fluid-md: clamp(1.2rem, 3vw, 2.2rem);   /* Innenraum Kachel mittel */
  /* Layout-Konstanten: keine Stufen, aber vorher als Literal mehrfach. */
  --page-max: 1080px;        /* .page */
  --page-max-wide: 1440px;   /* .page--wide */
  --header-clearance: 4.6rem; /* Platz unter dem Sticky-Header (Sprungziele, Sticky-Spalten) */
  --touch-target: 44px;      /* Mindestmaß eines Bedienelements (auch mit Handschuhen) */
  /* Platz rechts im Etappentitel für die absolut gesetzte Wetter-Pille
     (max-width 10rem + Luft) – damit ein langer Name nicht darunter läuft. */
  --stop-weather-clearance: 10.5rem;

  /* ------------------------------------------ Bewegung (Schnitt 5, Spec 8)
     Dauern (8.1) und Kurven (8.2). Jede Transition in style.css nennt
     Dauer UND Kurve aus dieser Gruppe; Zeit-Literale stehen nur hier.
     Eintritt/Hover mit --ease-out, Austritt mit --ease-in, Drücken und
     Loslassen von .btn/.chip mit der Feder. Unter reduzierter Bewegung
     belegt der Block am Ende der Datei die Dauern neu (8.5). */
  --t-fast: 150ms;           /* Hover, Drücken, Farbe, Fokusring */
  --t-med: 250ms;            /* Auf-/Zuklappen, Einblenden, Sticky-Wechsel */
  --t-slow: 400ms;           /* große Flächen, Landing-Einblendung */
  --t-spring: 500ms;         /* Laufzeit der Feder */
  --t-spin: 700ms;           /* Lade-Spinner (Schleife) */
  --t-pulse: 1.5s;           /* Status-Puls/-Blinken, Flash, Autosave-Pop */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* Hauskurve: Eintritt, Hover */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);        /* Austritt */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Schleifen, Umschalten */
  --ease-linear: linear;                        /* Spinner, Scroll-Timelines */
  /* Gedämpfte Feder (Masse 1, Steifigkeit 200, Dämpfung 22 → ζ ≈ 0,78,
     2 % Überschwingen), über --t-spring in 10-%-Schritten abgetastet (8.3).
     Kennt ein Browser linear() nicht (Safari < 17.2), wird die Deklaration
     zur Rechenzeit ungültig und fällt weich auf `ease` zurück. */
  --ease-spring: linear(0, 0.17 10%, 0.47 20%, 0.72 30%, 0.89 40%, 0.98 50%,
                        1.01 60%, 1.02 70%, 1.02 80%, 1.01 90%, 1);
  color-scheme: light;
}

/* ----------------------------------------------- Dark Mode (P133j)
   „Digitales Roadbook" bei Nacht: die dunklen Werte sind NICHT invertiert,
   sondern entsättigt aus der Tag-Palette abgeleitet (Asphalt-Grün statt
   Moosgrau, gedämpftes Kiefern-/Wegweiser-Kolorit). Zwei Auslöser teilen
   sich EINE Token-Zweitbelegung:
     • `@media (prefers-color-scheme: dark)`  – greift bei theme="system"
       (Default; auch alle Gast-Seiten: Landing/Login).
     • `:root[data-theme="dark"]`             – manueller Schalter (Konto,
       `users.theme`), rendert am <html> serverseitig → kein Flackern.
   `:root[data-theme="light"]` gewinnt umgekehrt über die Media-Query, damit
   der Schalter „Hell" auch auf einem Dark-System hell bleibt.

   Kern-Kniff für die doppelt genutzten Farbtoken (--route/--accent/--excursion/
   --danger sind mal Fläche-mit-heller-Schrift, mal Text auf Fläche): im Dunkeln
   werden die Farben AUFGEHELLT und die „Schrift auf Farbe" (--accent-ink) auf
   ein dunkles Ink gekippt. So liest sich dieselbe Variable als heller Text auf
   dunklem Grund UND als dunkler Text auf heller Farbfläche.

   WCAG-AA-Nachweis (WCAG-Relative-Luminanz, Muster P127/P133g) – jedes
   Token-Paar rechnerisch geprüft (schlechtestes Textpaar
   --accent auf --accent-soft = 6,18:1, alle übrigen darüber; Non-Text
   --star auf --card = 8,1:1, --line-Rahmen rein informativ). Kein Paar < AA. */
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

/* Ein Block, zwei Selektoren – Media-Query UND manuelles Attribut belegen
   dieselben Token. `:not([data-theme="light"])` lässt den Hell-Schalter
   die System-Präferenz überstimmen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161a16;
    --card: #1e231f;
    --field: #191d1a;
    --ink: #e7ebe4;
    --muted: #a6b0a2;         /* 7,1:1 auf --card / 7,8:1 auf --bg */
    --line: #333a34;
    --route: #79c39c;
    --route-soft: #22302a;
    --accent: #6fb0ee;
    --accent-deep: #93c6f5;
    --accent-soft: #1d2c3b;
    --accent-ink: #0e1310;    /* dunkles Ink auf aufgehellten Farbflächen */
    --danger: #ef8a80;
    --danger-soft: #2e1c1a;
    --location: #ef7a76;
    --excursion: #e0a94b;
    --excursion-soft: #2f2717;
    --parking: #4f9bef;
    --dining: #e2695c;
    --star: #e2b23c;
    --notify: #6b5a34;
    --notify-soft: #2a2416;
    --attention: #e8a27f;
    --attention-soft: #33231b;
    /* P166: im Dunkeln trägt die Fläche/-line den Kontrast, Schatten bleiben
       nur ein leiser Tiefen-Hinweis – reines Schwarz statt --ink-Alpha, da
       --ink hier selbst hell ist. */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.22);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.45);
    /* Schnitt 2: Papier bleibt hell (bewusste Ausnahme, s. hell) –
       --paper-ink auf --paper 15,73:1, --paper 17,6:1 gegen --bg. */
    --paper: #ffffff;
    --paper-ink: #1c2520;
    --paper-line: rgba(0, 0, 0, 0.2);
    --scrim: rgba(0, 0, 0, 0.6);  /* dunkler, damit der Dialog sich abhebt */
    /* Tönung aus dem hellen --ink: --muted darauf 5,74:1 über --card,
       6,41:1 über --bg – AA. */
    --ink-tint: rgba(231, 235, 228, 0.08);
    --shadow-3: 0 18px 40px -16px rgba(0, 0, 0, 0.6);
    --shadow-marker: 0 1px 4px rgba(0, 0, 0, 0.35);  /* Kacheln bleiben hell */
    --shadow-inset: inset 0 2px 10px rgba(0, 0, 0, 0.3);
    --map-surface: #1b211c;
    --map-attribution: rgba(30, 35, 31, 0.8);  /* --card mit 0.8 */
  }
}
:root[data-theme="dark"] {
  --bg: #161a16;
  --card: #1e231f;
  --field: #191d1a;
  --ink: #e7ebe4;
  --muted: #a6b0a2;
  --line: #333a34;
  --route: #79c39c;
  --route-soft: #22302a;
  --accent: #6fb0ee;
  --accent-deep: #93c6f5;
  --accent-soft: #1d2c3b;
  --accent-ink: #0e1310;
  --danger: #ef8a80;
  --danger-soft: #2e1c1a;
  --location: #ef7a76;
  --excursion: #e0a94b;
  --excursion-soft: #2f2717;
  --parking: #4f9bef;
  --dining: #e2695c;
  --star: #e2b23c;
  --notify: #6b5a34;
  --notify-soft: #2a2416;
  --attention: #e8a27f;
  --attention-soft: #33231b;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.22);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.45);
  --paper: #ffffff;
  --paper-ink: #1c2520;
  --paper-line: rgba(0, 0, 0, 0.2);
  --scrim: rgba(0, 0, 0, 0.6);
  --ink-tint: rgba(231, 235, 228, 0.08);
  --shadow-3: 0 18px 40px -16px rgba(0, 0, 0, 0.6);
  --shadow-marker: 0 1px 4px rgba(0, 0, 0, 0.35);
  --shadow-inset: inset 0 2px 10px rgba(0, 0, 0, 0.3);
  --map-surface: #1b211c;
  --map-attribution: rgba(30, 35, 31, 0.8);
}

/* ------------------------------------- Reduzierte Bewegung (Spec 8.5)
   Alle Dauern gehen auf nahe null statt auf `none` – `transitionend`/
   `animationend` feuern weiter (JS wartet darauf). Nur der Spinner bleibt
   sichtbar, dreht aber langsam. Der universelle Rückfall für Fremd-CSS
   (Leaflet) steht als einziger Block dieser Art in style.css. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01ms;
    --t-med: 0.01ms;
    --t-slow: 0.01ms;
    --t-spring: 0.01ms;
    --t-pulse: 0.01ms;
    --t-spin: 2s;
  }
}