@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;display:none}
:root{
  --bg:#0d2039;
  --surface:#12293f;
  --surface2:#16324a;
  --border:#28455f;
  --text:#edf2f6;
  --text2:#9eb2c4;
  --text3:#6f8ba3;
  --accent:#f59e0b;
  --accent2:#FF6B35;
  --green:#34a870;
  --red:#e0574f;
  --orange:#f97316;
  /* Category colors — one distinct tone per data type, instead of orange
     doing double duty everywhere. Keeps --accent2 as the single "action/now"
     signal while giving each metric its own visual identity. */
  --cat-elevation:#C17A4D;
  --cat-weather:#5B8DBE;
  --cat-supply:#FF6B35;
  --cat-rest:#6FA88A;
}

/* ── Plan Mode: Light Theme ─────────────────────────────────────────────────── */
body:not(.ride-mode){
  --bg:#E7EFF5;
  --surface:#FFFFFF;
  --surface2:#EDF2F7;
  --border:#DDE7EE;
  --text:#0e2843;
  --text2:#4E6C8C;
  --text3:#7E97B0;
  background:transparent;
  color:var(--text);
  position:relative;
  z-index:0;
}

body:not(.ride-mode) .card{
  box-shadow:0 1px 8px rgba(16,32,51,.05);
}
body:not(.ride-mode) input[type=text],
body:not(.ride-mode) input[type=number],
body:not(.ride-mode) input[type=date],
body:not(.ride-mode) select{
  background:#fff;
  border-color:#DCD8CC;
  color:#102033;
}
body:not(.ride-mode) th{
  background:#E9E5DA;
  color:#4A6585;
}
body:not(.ride-mode) td{
  background:#fff;
}
body:not(.ride-mode) tr:nth-child(even) td{
  background:#F8F6F1;
}
body:not(.ride-mode) .stat{
  background:#fff;
  border-color:#DCD8CC;
}
body:not(.ride-mode) #chart-wrap{
  background:#fff;
}
body:not(.ride-mode) .bag-slot-hdr,
body:not(.ride-mode) .bag-hdr{
  background:#E9E5DA;
}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);padding:env(safe-area-inset-top,20px) 0 env(safe-area-inset-bottom,40px);min-height:100dvh;transition:background .25s,color .2s}
h1{font-size:22px;font-weight:800;color:#fff;letter-spacing:-0.3px;line-height:1.15}
.sub{font-size:12px;color:var(--text2);margin-top:4px;font-weight:500;letter-spacing:0.01em}

/* Cards */
.card{background:var(--surface);border-radius:14px;border:1px solid var(--border);padding:16px;margin-bottom:12px}
/* Plan-mode Foto-Hero — Modus-Umschalter sitzt bewusst in der IMMER
   sichtbaren Top-Bar davor, nicht hier drin (sonst kein Weg zurück von
   Fahren nach Planen, da .hero-plan über .plan-only ausgeblendet wird) */
.hero-plan{
  position:relative;overflow:hidden;border-radius:22px;margin-bottom:14px;
  min-height:190px;padding:16px 16px 14px;display:flex;flex-direction:column;
  background-image:
    radial-gradient(130% 100% at 88% 6%,rgba(255,107,53,.30) 0%,rgba(255,107,53,0) 55%),
    url(../assets/images/tiles/hero-texture.svg),
    linear-gradient(135deg,#0d2039 0%,#1c3f5c 100%);
  background-size:cover,cover,cover;
  background-position:center,center,center;
  background-repeat:no-repeat,no-repeat,no-repeat;
  border:1px solid rgba(255,255,255,.10);
}
.hero-plan-copy{position:relative;z-index:2;text-align:center}
.hero-plan-copy h1{margin:0;font-size:21px;font-weight:900;letter-spacing:-.4px;color:#fff;line-height:1.15;text-shadow:0 2px 10px rgba(0,0,0,.4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Reine Höhenprofil-Vorschau — keine Interaktion, nur Überblick (Form +
   Tag/Nacht). Inhalt kommt von renderHeroProfile() in planner.js. */
.hero-mini-profile{position:relative;z-index:2;margin-top:10px;height:64px;flex:none;border-radius:12px;overflow:hidden;background:rgba(5,18,30,.24)}
.hero-mini-profile svg{display:block;width:100%;height:100%}

/* Statistik-Zeile — Teil derselben Hero-Kachel (kein eigenes Panel mehr,
   sonst wirken Hero + Stats wie zwei übereinanderliegende Kacheln statt
   einer einzigen einheitlichen). Nur eine dünne Trennlinie statt Rand/
   Schatten/Blur grenzt sie optisch vom Höhenprofil darüber ab. */
.hero-stats-row{
  position:relative;z-index:2;margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;gap:14px
}

/* Kacheln mit Fotohintergrund — immer 3 Spalten, auch mobil (kompakt genug,
   damit alle 9 ohne viel Scrollen sichtbar sind) */
.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}
.tile-btn{
  position:relative;overflow:hidden;aspect-ratio:1.15;min-height:98px;border-radius:13px;border:1px solid rgba(255,255,255,.16);
  background-image:var(--tile-bg);background-size:cover;background-position:center;
  padding:0;cursor:pointer;font-family:inherit;box-shadow:0 4px 12px rgba(0,0,0,.16);
  transition:transform .15s;text-align:left;
  container-type:inline-size;
}
/* container-type:inline-size macht die tatsächliche Kachel-Breite als
   cqw-Einheit für den Inhalt verfügbar — Text/Icon skalieren so mit der
   Kachel mit (auf dem Laptop bei breiter .app-wrap-Spalte deutlich größer
   als am Handy), statt bei fixer px-Größe winzig zu wirken. clamp() hält
   dabei die Handy-Größe als Minimum, also keine Änderung dort. */
/* Ohne aspect-ratio bleibt die Kachel bei fester min-height, während die
   Spaltenbreite auf breiten Bildschirmen (siehe @media(min-width:1024px)
   weiter unten) stark wächst — bei extrem breitem Seitenverhältnis zoomt
   background-size:cover die SVG-Illustrationen dann in bedeutungslose
   Ausschnitte hinein (auf dem Laptop gemeldet: Kacheln "verschoben"/
   kaputt). Mit aspect-ratio bleibt das Seitenverhältnis überall gleich,
   also auch der Bildausschnitt konsistent zu dem, was am Handy getestet wurde. */
.tile-btn:active{transform:scale(.96)}
.tile-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,20,33,.95) 0%,rgba(5,20,33,.55) 60%,rgba(5,20,33,.08) 100%)}
.tile-content{position:absolute;left:clamp(7px,2cqw,14px);right:clamp(7px,2cqw,14px);bottom:clamp(6px,1.8cqw,12px);z-index:1}
.tile-content svg{width:clamp(14px,4.5cqw,22px);height:clamp(14px,4.5cqw,22px);color:#fff;stroke:#fff;margin-bottom:3px;display:block}
.tile-btn h3{margin:0 0 1px;font-size:clamp(10px,3.6cqw,16px);font-weight:800;color:#fff;line-height:1.1}
.tile-btn p{margin:0;font-size:clamp(7.5px,2.6cqw,12px);color:rgba(255,255,255,.72);line-height:1.2}
/* Aktive Kachel (deren Panel gerade unten offen ist) bekommt einen
   orangen Glow-Rahmen statt aufgehellt zu werden — funktioniert über alle
   9 unterschiedlich hellen Fotos hinweg zuverlässig gleich gut, ein
   Aufhellen würde je nach Foto unterschiedlich stark wirken. Siehe
   openTileSection() in planner.js für das Umschalten der Klasse. */
.tile-btn.tile-active{border-color:var(--accent2);box-shadow:0 0 0 2px rgba(255,107,53,.4),0 0 16px rgba(255,107,53,.45),0 4px 12px rgba(0,0,0,.16)}

/* Schnellaktionen — sitzt ganz unten, dezent, nicht im Fokus. Der Titel
   liegt auf dem fixen navy Seitenhintergrund (body::before) ohne eigene
   Karte darunter, deshalb eigener Chip-Hintergrund für verlässlichen Kontrast. */
.quick-title{display:flex;align-items:center;justify-content:space-between;margin:18px 0 8px}
.quick-title h2{display:inline-block;font-size:10.5px;margin:0;padding:5px 10px;border-radius:7px;background:var(--surface);border:1px solid var(--border);color:var(--text2);font-weight:800;text-transform:uppercase;letter-spacing:.08em;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}
.quick{border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text2);min-height:50px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;font-size:8.5px;font-weight:700;line-height:1.15;cursor:pointer;font-family:inherit}
.quick svg{width:14px;height:14px;color:var(--accent2)}

/* ── Unified Chip Design ── */
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:7px 12px;font-size:11px;font-weight:700;color:var(--text2);font-family:inherit;letter-spacing:.02em;white-space:nowrap}
.chip.active{background:var(--accent2);border-color:var(--accent2);color:#fff}
.chip.success{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.25);color:#22c55e}
.chip.danger{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.25);color:#f87171}
.chip.warn{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.25);color:#f59e0b}
.chip-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* Input chip style */
input[type=text].chip-input,input[type=number].chip-input,input[type=date].chip-input,select.chip-input{
  display:inline-flex;background:var(--surface2);border:1px solid var(--border);border-radius:10px;
  padding:7px 10px;font-size:12px;font-weight:600;color:var(--text);font-family:inherit;
  letter-spacing:.02em;outline:none;transition:border-color .15s
}
input[type=text].chip-input:focus,input[type=number].chip-input:focus,
input[type=date].chip-input:focus,select.chip-input:focus{border-color:var(--accent2)}
.card-dark{background:var(--surface2);border-radius:12px;border:1px solid var(--border);padding:12px;margin-bottom:12px}
.section-title{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
/* Plan/Ride mode */
#ride-hero{display:none}
#ride-hero-bottom-card{display:none}
.sec-hdr{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;-webkit-user-select:none;padding:2px 0;margin-bottom:0}
.sec-hdr:active{opacity:.7}
.sec-hdr .section-title{margin-bottom:0}
.sec-body{overflow:hidden;transition:max-height .28s ease,opacity .2s ease;opacity:1}
.sec-body.closed{max-height:0!important;opacity:0}

/* Menü-Kachel-Header mit Tagline — einheitlich auf allen Kachel-Panels */
.menu-hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
.menu-hdr-left{display:flex;align-items:center;gap:10px;min-width:0}
.menu-hdr-icon{flex-shrink:0;width:30px;height:30px;border-radius:9px;background:rgba(255,107,53,.14);border:1px solid rgba(255,107,53,.28);display:flex;align-items:center;justify-content:center;color:var(--accent2)}
.menu-hdr-icon svg{display:block}
.menu-hdr .section-title{margin-bottom:0}
.menu-hdr-tag{font-size:10.5px;color:var(--text3);font-weight:600;white-space:nowrap;flex-shrink:0}

/* Edle Menüzeilen (Icon-Badge + Titel + Beschreibung + Chevron) */
.menu-row{display:flex;align-items:center;gap:13px;width:100%;background:linear-gradient(180deg,var(--surface2),var(--surface));border:1px solid var(--border);border-radius:14px;padding:12px 14px;cursor:pointer;font-family:inherit;text-align:left;box-shadow:0 1px 2px rgba(0,0,0,.18);transition:transform .12s ease,border-color .12s ease}
.menu-row:active{transform:scale(.98);border-color:rgba(255,107,53,.35)}
.menu-row-icon{flex-shrink:0;width:38px;height:38px;border-radius:11px;background:rgba(255,107,53,.14);border:1px solid rgba(255,107,53,.28);display:flex;align-items:center;justify-content:center;color:var(--accent2)}
.menu-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.menu-row-title{font-size:13.5px;font-weight:800;color:var(--text);letter-spacing:-.1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-row-desc{font-size:10.5px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-row-chevron{flex-shrink:0;color:var(--text3);opacity:.55}
.menu-reset-link{display:inline-flex;align-items:center;gap:6px;background:none;border:none;font-size:11px;color:var(--text3);cursor:pointer;padding:6px 2px 2px;font-family:inherit;text-align:left;opacity:.75}

/* GPX Verwaltung — zweites Panel im Rollout der Metallic-Optik (nach
   Parameter & Strategie). Kein eigenes Template dafür, da .menu-row/
   .menu-hdr für eine Listen-Struktur wie diese schon passen — nur dieselbe
   Gunmetal-Palette wie im Parameter-Panel lokal übernommen, exakt gleiche
   Technik (Neubelegung derselben --surface/--text-Variablen, die .card/
   .menu-row/... ohnehin per var() nutzen). */
/* color:var(--text) explizit hier gesetzt (nicht nur die Variable neu
   belegt): "color" vererbt sich als bereits AUFGELÖSTER Wert vom body
   (body{color:var(--text)} löst dort schon gegen das globale --text auf)
   — jedes Kind ohne eigene color-Angabe würde sonst weiter das alte
   helle Theme zeigen, auch wenn --text hier lokal neu gesetzt ist. Diese
   eine Zeile erzwingt die Neuauflösung gegen die lokale Palette und
   vererbt sich von da ab korrekt an alle Kind-Elemente ohne eigene Farbe. */
#gpxmanage-card{
  --surface:#262e36;--surface2:#3c4650;--border:#59636e;
  --text:#f5f7f9;--text2:#c3cad2;--text3:#c3cad2;
  color:var(--text);
  background-image:linear-gradient(120deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 35%);
}

/* Versorgung entlang der Route — drittes Panel im Rollout. Dynamisch per
   renderPoiList()/renderFilterChips() in planner.js befüllter Inhalt nutzt
   bereits var(--text3)/var(--border) für alle neutralen Farben (nur die
   festen Status-Farben grün/rot/gelb für offen/zu/unbekannt sind bewusst
   hart codiert, themenunabhängig) — deshalb genügt auch hier dieselbe
   lokale Variablen-Neubelegung ohne JS-Änderungen. */
#poi-card{
  --surface:#262e36;--surface2:#3c4650;--border:#59636e;
  --text:#f5f7f9;--text2:#c3cad2;--text3:#c3cad2;
  color:var(--text);
  background-image:linear-gradient(120deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 35%);
}

/* Route & Karte — viertes Panel im Rollout. renderMapsSection() in planner.js
   baut Layer-Chips/Belag-Button/Legende ausschließlich mit var(--surface)/
   var(--text2)/var(--border) — das eigentliche Kartenbild (Leaflet-Kacheln
   von OSM/CyclOSM/OpenTopoMap) bleibt unangetastet, nur der Rahmen darum. */
#maps-card{
  --bg:#1c232a;--surface:#262e36;--surface2:#3c4650;--border:#59636e;
  --text:#f5f7f9;--text2:#c3cad2;--text3:#c3cad2;
  color:var(--text);
  background-image:linear-gradient(120deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 35%);
}

/* Etappenplan & Details — fünftes Panel im Rollout. Die Tabelle (th, td
   input[type=number]) nutzt var(--bg) für ihren Hintergrund, nicht
   var(--surface) — ohne lokale --bg-Neubelegung wäre die Kopfzeile/die
   Zahlenfelder hier trotzdem hell geblieben, obwohl der Rest der Karte
   schon dunkel ist. Deshalb --bg zusätzlich zu den bisherigen Variablen
   gesetzt (dunkelste Stufe der Palette, dunkler als --surface, damit die
   Kopfzeile weiterhin als "abgesetzt" gegenüber den Zeilen wirkt). */
#table-card{
  --bg:#1c232a;--surface:#262e36;--surface2:#3c4650;--border:#59636e;
  --text:#f5f7f9;--text2:#c3cad2;--text3:#c3cad2;
  color:var(--text);
  background-image:linear-gradient(120deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 35%);
}
/* Ein zweiter, unabhängig von --surface/--text hart codierter Light-Theme-
   Block (oben, "body:not(.ride-mode) th/td/input[...]" — Farben direkt in
   Hex, nicht per var()) überschreibt sonst Kopfzeile, Zeilen und alle
   Eingabefelder der Tabelle wieder auf Weiß, egal was hier lokal gesetzt
   wird. #table-card-Selektoren gewinnen dank ID-Spezifität zuverlässig
   dagegen, ohne diesen globalen Block selbst anzufassen (der bedient noch
   alle anderen, noch nicht umgestellten Panels). */
#table-card th{background:var(--bg);color:var(--text3)}
#table-card td{background:transparent}
#table-card tr:nth-child(even) td{background:rgba(255,255,255,.02)}
#table-card input[type=text]{background:transparent;border-color:transparent;color:var(--text)}
#table-card input[type=number]{background:var(--bg);border-color:var(--border);color:var(--text)}

/* Wetter & Nacht — sechstes Panel im Rollout. renderWeather() baut ein
   eigenes <table> (Stopp/Zeit/Wetter/Temp/Regen/Wind) — betroffen vom
   selben hart codierten Light-Theme-Block wie Etappenplan, deshalb wieder
   --bg + höher-spezifische th/td/tr:nth-child(even)-Selektoren. Alle
   Zellen haben hier schon eigene color:var(...)-Angaben (kein
   Vererbungs-Bug wie bei Etappenplan), color:var(--text) trotzdem als
   Sicherheitsnetz gesetzt. */
#weather-card{
  --bg:#1c232a;--surface:#262e36;--surface2:#3c4650;--border:#59636e;
  --text:#f5f7f9;--text2:#c3cad2;--text3:#c3cad2;
  color:var(--text);
  background-image:linear-gradient(120deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 35%);
}
#weather-card th{background:var(--bg);color:var(--text3)}
#weather-card td{background:transparent}
#weather-card tr:nth-child(even) td{background:rgba(255,255,255,.02)}

/* Höhenprofil & Tageslicht — siebtes Panel im Rollout. Der Chart selbst ist
   eigenständiges SVG mit expliziten fill=/stroke=-Attributen (immun gegen
   den CSS-Vererbungsbug), Legenden-Punktfarben bleiben deshalb unverändert.
   #chart-wrap ist aber vom hart codierten body:not(.ride-mode) #chart-wrap
   {background:#fff}-Block betroffen (Rand um den SVG-Plot), daher
   höher-spezifischer --bg-Override wie bei den Tabellen-Panels. */
#chart-card{
  --bg:#1c232a;--surface:#262e36;--surface2:#3c4650;--border:#59636e;
  --text:#f5f7f9;--text2:#c3cad2;--text3:#c3cad2;
  color:var(--text);
  background-image:linear-gradient(120deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 35%);
}
#chart-card #chart-wrap{background:var(--bg)}

/* Pausen & Schlaf — achtes Panel im Rollout. Einfaches Formular (km/Min/Ort
   als input[type=number]/input[type=text], kein <table>) — betroffen vom
   selben hart codierten Light-Theme-Block wie die anderen Formularfelder,
   deshalb wieder höher-spezifischer Input-Override wie bei den
   Tabellen-Panels. label nutzt schon var(--text3) direkt, kein Zusatz nötig. */
#addpause-card{
  --bg:#1c232a;--surface:#262e36;--surface2:#3c4650;--border:#59636e;
  --text:#f5f7f9;--text2:#c3cad2;--text3:#c3cad2;
  color:var(--text);
  background-image:linear-gradient(120deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 35%);
}
#addpause-card input[type=number],
#addpause-card input[type=text]{background:var(--bg);border-color:var(--border);color:var(--text)}

/* Favoriten — neuntes und letztes Panel im Rollout. renderFavorites() baut
   sein HTML komplett über var(--bg)/var(--border)/var(--text*)/var(--accent2)
   auf, kein hart codierter Light-Theme-Block betroffen (kein <table>, keine
   generischen input[type=...]-Felder) — reine Variablen-Neubelegung reicht.
   Status-Punktfarben (#4ade80/#f87171 offen/geschlossen) bleiben wie bei
   Etappenplan/Wetter bewusst unverändert (semantisch, nicht Theme-bezogen). */
#fav-card{
  --bg:#1c232a;--surface:#262e36;--surface2:#3c4650;--border:#59636e;
  --text:#f5f7f9;--text2:#c3cad2;--text3:#c3cad2;
  color:var(--text);
  background-image:linear-gradient(120deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 35%);
}

/* Parameter & Strategie — ursprünglich 1:1 aus dem abgestimmten Template
   (BivyRide_Parameterkarte_Template.html) übernommen: Außenkarte, 2×2-Raster,
   Abstände, Kartenhöhen (grid-auto-rows fest — dadurch bleiben alle 4
   Kacheln unabhängig vom Inhalt exakt gleich groß) und Radien bleiben
   unangetastet. Die Farben (--br-*) waren zunächst die eigenen
   Template-Blautöne — nachträglich (nachdem die anderen 8 Kacheln auf den
   einheitlichen Metallic-Look umgestellt wurden) auf dieselbe Palette
   (--surface/--surface2/--bg/--text*) umgezogen, damit dieses erste Panel
   nicht mehr farblich aus der Reihe fällt. Nur die Hex-Werte sind ersetzt,
   Struktur/Radien/Abstände unverändert. data-slot-Elemente sind unten (ab
   ".icon-chip{color:...}") mit Schriftgrößen für die eingefügten echten
   Werte ergänzt — im leeren Template gab es dafür nur Platzhalter-Balken,
   keine Textgrößen. */
.parameter-panel{
  --br-orange:#ff6b35;--br-orange-soft:rgba(255,107,53,.13);
  --br-page:#1c232a;--br-panel:#262e36;--br-panel-top:#3c4650;
  --br-tile:#3c4650;--br-tile-bottom:#313a43;--br-well:#1c232a;
  --br-border:rgba(89,99,110,.35);--br-border-soft:rgba(89,99,110,.2);
  --br-slot:rgba(245,247,249,.72);--br-slot-muted:rgba(195,202,210,.48);
  --br-success:#35c78a;--br-radius-panel:24px;--br-radius-tile:18px;--br-gap:14px;
  width:min(100%,760px);
  margin:0 auto; /* Template gab keine Zentrierung vor — auf Wunsch ergänzt,
    sonst sitzt die auf 760px begrenzte Karte auf breiten Bildschirmen
    linksbündig unter dem vollbreiten Kachelraster. */
  padding:22px;
  border:1px solid rgba(89,99,110,.35);
  border-radius:var(--br-radius-panel);
  background:
    linear-gradient(150deg,rgba(255,255,255,.025),transparent 38%),
    linear-gradient(180deg,var(--br-panel-top),var(--br-panel));
  box-shadow:
    0 18px 42px rgba(2,12,22,.24),
    inset 0 1px 0 rgba(255,255,255,.035);
}
.panel-head{
  display:grid;grid-template-columns:46px minmax(0,1fr) minmax(90px,.48fr);
  align-items:center;gap:14px;min-height:52px;margin-bottom:18px;
}
.icon-chip{
  width:46px;height:46px;display:grid;place-items:center;position:relative;
  border:1px solid rgba(255,107,53,.34);border-radius:14px;
  background:var(--br-orange-soft);box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.icon-chip::before,.icon-chip::after{
  content:"";position:absolute;width:18px;height:2px;border-radius:99px;
  background:var(--br-orange);box-shadow:0 -6px 0 var(--br-orange),0 6px 0 var(--br-orange);
}
.icon-chip::after{width:4px;height:4px;box-shadow:10px -6px 0 var(--br-orange),-8px 6px 0 var(--br-orange)}
.slot-stack{display:grid;gap:8px;min-width:0}
.slot-line{height:10px;max-width:100%;border-radius:999px;background:var(--br-slot)}
.slot-line.title{width:68%;height:12px}
.slot-line.label{width:46%;height:9px;background:var(--br-slot-muted)}
.slot-line.meta{width:82%;height:8px;background:var(--br-slot-muted)}
.panel-head>.slot-line{justify-self:end;width:86%}
.slot-line:not(:empty),.tile-label-slot:not(:empty),.meta-slot:not(:empty){
  width:auto;height:auto;background:transparent;color:#f5f7f9;border-radius:0;
}
.slot-line.title:not(:empty){font-weight:700;letter-spacing:.025em}
.slot-line.label:not(:empty),.tile-label-slot:not(:empty),.meta-slot:not(:empty){color:#c3cad2;font-size:.78rem}
.parameter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:232px;gap:var(--br-gap)}
.parameter-tile{
  min-width:0;display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;padding:17px;
  overflow:hidden;border:1px solid var(--br-border);border-radius:var(--br-radius-tile);
  background:
    linear-gradient(145deg,rgba(255,255,255,.028),transparent 44%),
    linear-gradient(180deg,var(--br-tile),var(--br-tile-bottom));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.tile-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tile-top .icon-chip{width:38px;height:38px;border-radius:12px}
.tile-top .icon-chip::before{transform:scale(.76)}
.tile-top .icon-chip::after{transform:scale(.76)}
.tile-label-slot{width:42%;height:9px;border-radius:999px;background:var(--br-slot-muted)}
.value-area{display:grid;align-content:center;gap:10px;min-height:58px}
.value-line{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;gap:9px;align-items:center}
.control-chip,.value-chip,.action-chip,.result-chip{
  border:1px solid var(--br-border-soft);background:var(--br-well);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.control-chip{height:38px;border-radius:11px;position:relative}
.control-chip::after{
  content:"";position:absolute;inset:50% auto auto 50%;width:12px;height:2px;
  border-radius:99px;background:rgba(245,247,249,.72);transform:translate(-50%,-50%);
}
.control-chip.plus::before{
  content:"";position:absolute;inset:50% auto auto 50%;width:2px;height:12px;
  border-radius:99px;background:rgba(245,247,249,.72);transform:translate(-50%,-50%);
}
.value-chip{height:38px;border-radius:11px;display:grid;place-items:center;padding:0 12px}
.value-chip::after{content:"";width:72%;height:10px;border-radius:99px;background:var(--br-slot)}
.meta-slot{width:72%;height:8px;border-radius:999px;background:var(--br-slot-muted)}
.result-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.result-chip{min-height:64px;display:grid;place-items:center;padding:12px;border-radius:12px}
.result-chip::after{content:"";width:70%;height:10px;border-radius:999px;background:var(--br-slot);box-shadow:0 17px 0 -1px var(--br-slot-muted)}
.action-chip{min-height:38px;display:grid;place-items:center;border-radius:11px}
.action-chip::after{content:"";width:42%;height:9px;border-radius:999px;background:rgba(245,247,249,.72)}
.action-chip.primary{border-color:transparent;background:var(--br-orange)}
.action-chip.primary::after{background:rgba(255,255,255,.9)}
.icon-chip:not(:empty)::before,.icon-chip:not(:empty)::after,
.value-chip:not(:empty)::after,.result-chip:not(:empty)::after,.action-chip:not(:empty)::after{display:none}
.value-chip:not(:empty),.result-chip:not(:empty),.action-chip:not(:empty){color:#f5f7f9;font-weight:700;text-align:center}
.panel-foot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--br-gap);margin-top:18px}
.panel-foot .action-chip{background:rgba(28,35,42,.5);border-color:rgba(89,99,110,.18)}
.panel-foot .action-chip:last-child::before{
  content:"";width:8px;height:4px;margin-right:9px;
  border-left:2px solid var(--br-success);border-bottom:2px solid var(--br-success);
  transform:rotate(-45deg) translateY(-1px);
}
.panel-foot .action-chip:last-child{grid-template-columns:auto auto;justify-content:center}
@media(max-width:560px){
  .parameter-panel{padding:16px;border-radius:20px}
  .panel-head{grid-template-columns:42px minmax(0,1fr);gap:11px}
  .panel-head>.slot-line{display:none}
  .parameter-grid{grid-auto-rows:206px;gap:10px}
  .parameter-tile{padding:14px;gap:10px;border-radius:15px}
  .tile-top .icon-chip{width:34px;height:34px}
  .value-line{grid-template-columns:34px minmax(0,1fr) 34px;gap:7px}
  .control-chip,.value-chip{height:36px}
  .result-chip{min-height:58px}
  .panel-foot{margin-top:14px;gap:10px}
}
@media(max-width:350px){
  .parameter-panel{padding:13px}
  .parameter-grid{gap:8px;grid-auto-rows:198px}
  .parameter-tile{padding:11px}
  .tile-label-slot{width:36%}
}

/* ── Layout-Fix: echter Inhalt statt leerer Platzhalter-Balken kann
   Eigenbreite mitbringen (v.a. das native <input type=date> hat einen
   Mindestbreiten-Anspruch des Browsers) — als Grid-Kind wächst so ein
   Element ohne min-width:0 über die Kachel hinaus, was durch
   .parameter-tile{overflow:hidden} dann Text abschneidet (z.B. "Start"
   → "Sta"). min-width:0 auf allen Kachel-Kindern erzwingt, dass sie sich
   an die (unveränderte) Kachelbreite halten. ── */
.tile-top,.value-area,.value-line,.value-chip,.meta-slot,.result-row,.result-chip,.schedule-fields{min-width:0}
#start-date,#arrival-date,#speed,#pause-interval{min-width:0}

/* ── Inhalt der data-slot-Elemente: Schriftgrößen für echte Werte (im
   leeren Template nur Platzhalter-Balken ohne Textgröße/-farbe). Struktur/
   Farben/Radien oben bleiben dabei unangetastet. ── */
.icon-chip{color:var(--br-orange)}
.panel-head .slot-line.title{font-size:17px}
.panel-head .slot-line.meta:not(:empty){color:#c3cad2;font-size:.78rem}
.parameter-tile .slot-line.title{font-size:13px}
/* Bug im Template selbst: .value-chip{display:grid} ohne
   grid-template-columns platziert mehrere Kind-Elemente automatisch in
   eigene Zeilen (Grid-Auto-Placement) — bei der Uhrzeit ("<input>:<input>
   Uhr", drei Kind-Knoten) rutschte dadurch jedes Stück in eine eigene
   Zeile untereinander statt in eine Reihe. display:flex verhält sich bei
   einem einzelnen Kind (Datum, Tempo, Pausen-Zahl) identisch zu
   place-items:center, ordnet mehrere Kinder aber correctly in einer Reihe
   an. .result-chip/.action-chip NICHT angefasst — die nutzen dieselbe
   Grid-Stapelung bewusst für "Zahl über Bezeichnung". */
.value-chip{display:flex;align-items:center;justify-content:center}
.value-chip:not(:empty){font-size:15px;white-space:nowrap}
/* Uhrzeit bekommt jetzt dasselbe .value-chip-Feld wie das Datum (statt des
   gedämpften meta-slot-Platzhalterstils) — dadurch automatisch dieselbe
   Schriftfarbe/-größe wie das Datum, wie gewünscht. */
.action-chip:not(:empty){font-size:13px;padding:0 10px}
.result-chip span,.action-chip.primary span{display:block;font-size:15px;font-weight:700}
.result-chip small,.action-chip.primary small{display:block;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:2px;opacity:.85}
/* Einheit (km/h, km) steht jetzt fest außerhalb des Zahlenfelds statt darin
   eingequetscht zu sein — das Zahlenfeld selbst wird dadurch größer/klarer
   lesbar (auf Wunsch, wirkte vorher zu klein zwischen den Stepper-Buttons). */
.unit-caption{text-align:center;font-size:.78rem;font-weight:600;color:#c3cad2;margin-top:-2px}
#start-date,#start-h,#start-m,#arrival-date,#arrival-h,#arrival-m,#speed,#pause-interval{border:none;background:none;padding:0;font:inherit;color:inherit;-webkit-appearance:none;text-align:center}
#start-date:focus,#start-h:focus,#start-m:focus,#arrival-date:focus,#arrival-h:focus,#arrival-m:focus,#speed:focus,#pause-interval:focus{outline:none}
#start-date,#arrival-date{width:100%;cursor:pointer;color-scheme:dark}
#start-h,#start-m,#arrival-h,#arrival-m{width:1.5em}
#speed,#pause-interval{width:100%;font-size:17px}

/* Start ⇄ Ankunft-Umschalter (Rückwärtsplanung: bei fixer Ankunftszeit wird
   der Start automatisch zurückgerechnet, siehe syncStartFromArrivalIfNeeded()
   in planner.js). schedule-fields hält Start- und Ankunft-Eingaben getrennt
   im DOM, nur eine der beiden ist per display sichtbar. */
.mode-toggle{display:flex;background:var(--br-well);border:1px solid var(--br-border-soft);border-radius:999px;padding:2px;gap:2px}
.mode-toggle-btn{border:none;background:transparent;color:#c3cad2;font-family:inherit;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:5px 9px;border-radius:999px;cursor:pointer;-webkit-appearance:none}
.mode-toggle-btn.active{background:var(--br-orange);color:#fff}
.schedule-fields{display:grid;gap:10px}

/* Inputs */
label{display:block;font-size:10px;color:var(--text3);margin-bottom:5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
input[type=number],input[type=text]{
  border:1px solid var(--border);border-radius:8px;padding:9px 12px;
  font-size:15px;color:var(--text);background:var(--bg);
  outline:none;-webkit-appearance:none;font-family:inherit;font-weight:500;
}
input[type=number]:focus,input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,158,11,.15)}
input[type=number]{width:72px;text-align:center}
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}
input[type=date]{
  border:1px solid var(--border);border-radius:8px;padding:9px 12px;
  font-size:15px;color:var(--text);background:var(--bg);
  outline:none;-webkit-appearance:none;font-family:inherit;font-weight:500;
  color-scheme:dark;
}
input[type=date]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,158,11,.15)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:7px;color:#fff;border:none;border-radius:10px;padding:11px 18px;font-size:14px;font-weight:700;cursor:pointer;-webkit-appearance:none;font-family:inherit;letter-spacing:0.01em;transition:opacity .15s,transform .1s}
.btn:active{opacity:.85;transform:scale(.97)}
.btn:disabled{opacity:.4}
.btn-primary{background:var(--accent2)}
.btn-success{background:#3F7D5C}
.btn-sm{padding:7px 13px;font-size:12px;border-radius:8px}

/* Stat pills */
.stat-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.stat{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:12px;color:var(--text2);font-weight:600;white-space:nowrap}
.stat span{color:var(--text);font-size:14px;font-weight:800;display:block;margin-bottom:1px}

/* Rows / layout */
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill{background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.25);color:#FF8C5A;border-radius:8px;padding:7px 12px;font-size:12px;font-weight:600}
.err{color:#f87171;font-size:12px;margin-top:5px}
.hint{font-size:10px;color:var(--text3);margin-top:3px;letter-spacing:0.02em}

/* Chart */
#chart-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px;background:var(--bg)}
#chart-svg{display:block}

/* Table */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:12px;min-width:660px}
th{background:var(--bg);color:var(--text3);padding:8px 8px;text-align:left;font-size:9px;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;font-weight:700;border-bottom:1px solid var(--border)}
td{padding:10px 8px;vertical-align:middle;border-bottom:1px solid rgba(51,65,85,.5)}
tr:last-child td{border-bottom:none}
tr.active td{background:rgba(245,158,11,.08)!important}
td input[type=text]{border:none;background:transparent;font-size:13px;color:var(--text);width:100%;padding:0;font-family:inherit;font-weight:600}
td input[type=text]:focus{outline:none;border-bottom:1px solid var(--accent)}
td input[type=number]{width:62px;font-size:12px;border:1px solid var(--border);border-radius:6px;padding:4px 6px;background:var(--bg);color:var(--text);font-family:inherit;text-align:center;-webkit-appearance:none}
td input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}

/* Legend */
.legend{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0 4px;font-size:11px;color:var(--text3)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}

/* Header */
.header-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;flex-wrap:wrap}

/* Divider */
.divider{height:1px;background:var(--border);margin:12px 0}

/* Overlay */
#fertig-overlay,#project-overlay{background:rgba(0,0,0,.75);backdrop-filter:blur(8px)}
#fertig-overlay>div,#project-overlay>div{background:var(--surface);border:1px solid var(--border)}
body:not(.ride-mode) #fertig-overlay>div,body:not(.ride-mode) #project-overlay>div{box-shadow:0 8px 40px rgba(16,32,51,.12)}

/* Project list */
.project-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;border:1px solid var(--border);margin-bottom:8px;cursor:pointer;transition:border-color .15s,background .15s}
.project-item:hover,.project-item:active{border-color:var(--accent2);background:rgba(255,107,53,.07)}
.project-item-name{flex:1;font-size:14px;font-weight:700;color:var(--text)}
.project-item-meta{font-size:11px;color:var(--text3);margin-top:2px}
.project-del{background:none;border:none;color:var(--text3);cursor:pointer;padding:4px 8px;border-radius:6px;font-size:14px;flex-shrink:0}
.project-del:hover{color:#f87171;background:rgba(239,68,68,.1)}

/* Scrollbar */
::-webkit-scrollbar{height:3px;width:3px;background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* ── Ride-Mode Light Theme ── */
body.ride-mode.ride-light{
  --bg:#E7EFF5;
  --surface:#FFFFFF;
  --surface2:#EDF2F7;
  --border:#DDE7EE;
  --text:#0e2843;
  --text2:#4E6C8C;
  --text3:#7E97B0;
}
body.ride-mode.ride-light #ride-hero,
body.ride-mode.ride-light #ride-hero-bottom-card{
  background:linear-gradient(160deg,#FFFFFF,#EDF2F7) !important;
  border-color:#DDE7EE;
}
/* ── Ride-Mode Chip Nav ── */
#ride-chip-nav{display:none}
body.ride-mode #ride-chip-nav{display:block}
body.ride-mode .plan-only{display:none!important}
body.ride-mode #ride-hero{display:block}
body.ride-mode #ride-hero-bottom-card{display:block}
.ride-chip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.ride-chip-grid-bot{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:7px}
.ride-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:13px 8px;border:1px solid var(--border);border-radius:14px;background:var(--surface2);color:var(--text3);cursor:pointer;font-family:inherit;font-weight:800;text-transform:uppercase;letter-spacing:.06em;transition:background .15s,border-color .15s,color .15s;-webkit-tap-highlight-color:transparent;width:100%}
.ride-chip.active{background:var(--surface);border-color:var(--accent2);color:var(--text);box-shadow:inset 0 -3px 0 0 var(--accent2)}
.ride-chip-svg{width:26px;height:26px;flex-shrink:0;stroke:currentColor}
.ride-chip.active .ride-chip-svg{stroke:var(--accent2)}
/* Tag/Nacht ist ein Umschalter, keine Navigations-Auswahl — eigener, ruhigerer
   Ton (Indigo statt Orange), damit er nicht wie ein aktiver Nav-Tab wirkt */
#chip-light.active{background:var(--surface);border-color:#5b6b8c;color:var(--text);box-shadow:inset 0 -3px 0 0 #5b6b8c}
#chip-light.active .ride-chip-svg{stroke:#8fa3c9}
.ride-chip-label{line-height:1;white-space:nowrap;font-size:10px;letter-spacing:.05em}
#ride-panel-wrap{display:none}
body.ride-mode #ride-panel-wrap{display:block}
.ride-panel{display:none}
.ride-panel.active{display:block}
/* Leaflet zoom control — dark theme fit */
.leaflet-control-zoom{border:none!important;box-shadow:0 2px 8px rgba(0,0,0,.35)!important}
.leaflet-control-zoom a{
  background:var(--surface)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
  width:30px!important;height:30px!important;line-height:28px!important;
  font-size:16px!important;font-weight:700!important;
}
.leaflet-control-zoom a:first-child{border-top-left-radius:8px!important;border-top-right-radius:8px!important}
.leaflet-control-zoom a:last-child{border-top:none!important;border-bottom-left-radius:8px!important;border-bottom-right-radius:8px!important}
.leaflet-control-zoom a:hover{background:var(--bg)!important;color:var(--orange)!important}
/* Wider column on desktop-size screens — mobile/tablet stays untouched */
@media(min-width:1024px){
  .app-wrap{max-width:1320px!important}
  .overview-map-box{height:clamp(440px,65vh,720px)!important}
}

/* Fullscreen map — same instance, just expanded via CSS instead of a
   separate map (avoids duplicating drag/click/layer logic) */
.overview-map-box.map-fullscreen-active{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  border-radius:0!important;
  z-index:500; /* below poi-infobox (1200) so pin taps still work in fullscreen */
}
/* Fixed full-page Hintergrund, placed at the END of the stylesheet: isolates
   this rule so that if any browser/extension chokes on it, nothing else in
   the stylesheet (fonts, layout, colors) gets taken down with it.
   Dasselbe navy/Topo/Orange-Glow-Rezept wie Hero, Kacheln und das
   Parameter-Panel — vorher stand hier ein helles Himmel/Straße-Foto, das
   nach der Dunkel-Umstellung von Hero/Kacheln/Parameter-Panel als
   Fremdkörper an den Rändern durchschien. Zwei sanfte, gegenläufige Glows
   (warmes Orange oben rechts, kühleres Blau unten links) sorgen dafür,
   dass die Fläche lebendig bleibt statt als eine flache dunkle Wand zu
   wirken — bewusst nicht schwärzer als die Karten selbst (--bg ist die
   hellste der drei Navy-Stufen, --surface/--surface2 sind dunkler),
   damit Hero/Kacheln/Panels als Ebenen davor erkennbar bleiben. */
body:not(.ride-mode)::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-image:
    radial-gradient(120% 70% at 85% 0%,rgba(255,150,90,.20) 0%,rgba(255,150,90,0) 55%),
    radial-gradient(90% 55% at 10% 100%,rgba(100,160,215,.14) 0%,rgba(100,160,215,0) 60%),
    url(../assets/images/tiles/hero-texture.svg),
    linear-gradient(160deg,#17334f 0%,#0d2039 55%,#0a1830 100%);
  background-size:cover,cover,320px 137px,cover;
  background-position:center,center,center,center;
  background-repeat:no-repeat,no-repeat,repeat,no-repeat;
}