/* ═══════════════════════════════════════════════════════════════════════════
   Wegwarte – Liquid Glass
   Zwei Farbwelten in derselben Handschrift: hell für die Planung am Schreib-
   tisch, dunkel für unterwegs. Die Startseite erzwingt Dunkel per data-theme.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Lokale Web Fonts (DSGVO-konform, kein Google-Request zur Laufzeit) ──── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
}

:root {
  /* Liquid Glass (hell) */
  --glass-bg:        rgba(255,255,255,0.38);
  --glass-bg-strong: rgba(255,255,255,0.52);
  --glass-bg-sheer:  rgba(255,255,255,0.1);   /* „Liquid Glass“ – fast transparent, trägt vom Blur */
  --glass-border:    rgba(255,255,255,0.70);
  --glass-highlight: rgba(255,255,255,0.90);
  --glass-blur:      blur(2px) ;
  --glass-blur-lg:   blur(2px) ;

  /* Aurora – dieselben Naturtöne, im Hellen zurückgenommen */
  --aurora-1: rgba(28, 89, 62, 0.16);
  --aurora-2: rgba(18, 32, 47, 0.16);
  --aurora-3: rgba(255, 159, 10, 0.14);
  --aurora-4: rgba(40, 90, 55, 0.14);

  --accent:        #1EBA7A;
  --accent-hover:  #159862;
  --accent-tint:   rgba(30,186,122,0.12);
  /* Akzentfarbe als Schrift auf hellem Grund. Das Marken-Grün selbst kommt
     dort nur auf 2,6:1 – als Fläche hinter weißer Schrift bleibt es, als
     Textfarbe steht hier die abgedunkelte Fassung mit 4,9:1. */
  --accent-text:   #0F7A4E;
  --page-bg:       #f5f5f7;
  --card-bg:       #ffffff;
  --card-glass:    rgba(255,255,255,0.72);
  --text:          #1d1d1f;
  --text-2:        #4b4b4f;
  /* Gedeckte Schrift für Etiketten und Hilfstexte. #6b6b70 hält auf --page-bg
     noch 4,6:1 – die alte Fassung (#86868b) lag mit 3,4:1 unter WCAG AA. */
  --muted:         #6b6b70;
  --border:        #d2d2d7;
  --border-light:  #ededf0;
  --separator:     rgba(0,0,0,0.07);
  --hover-fill:    rgba(0,0,0,0.05);
  --fill-quaternary: rgba(120,120,128,0.12);
  --segment-active: #ffffff;
  --success:       #30a14e;
  --success-strong:#1a7c3d;
  --success-bg:    #f0fdf4;
  --danger:        #e0322a;
  --danger-strong: #c0392b;
  --danger-bg:     #fff5f4;
  --warning:       #d97a0a;
  --warning-strong:#a85d06;
  --warning-bg:    #fffaf0;
  --info:          #1EBA7A;
  --info-bg:       #E4F6EE;
  --topbar-bg:     rgba(245,245,247,0.8);
  --map-land:      #c9cbd1;
  --map-land-line: rgba(255,255,255,0.85);
  --map-kachel:    voyager;      /* von map.js gelesen */

  --radius-sm:   10px;
  --radius:      16px;
  --radius-lg:   20px;
  --radius-feld: 12px;
  --radius-full: 980px;

  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;

  /* ── Schriftskala ──────────────────────────────────────────────────────
     Vier Stufen, mehr braucht die Anwendung nicht: Titel einmal je Seite,
     Überschrift je Abschnitt, Fließtext, Etikett. Die krummen Zwischen-
     größen von früher (11,5 / 12,5 / 14,5 px) sind hier aufgegangen. */
  --fs-titel:    17px;   /* Kartentitel, Dialogüberschrift */
  --fs-heading:  15px;   /* Abschnittsüberschrift */
  --fs-body:     14px;   /* Fließtext, Tabellenzelle */
  --fs-body-sm:  13px;   /* dichter Fließtext, Metazeilen */
  --fs-label:    12px;   /* Feldetikett, Hilfstext, Legende */
  --fs-mikro:    11px;   /* Badge, Tab-Beschriftung, schwebendes Etikett */
  --fw-heading:  600;
  --fw-medium:   500;

  /* ── Eingabefelder (Revolut-Stil) ─────────────────────────────────────── */
  --feld-h:        56px;
  --feld-bg:       rgba(255,255,255,0.62);
  --feld-bg-focus: #ffffff;
  --feld-border:   rgba(0,0,0,0.11);

  --shadow-sm: 0 0 0 0.5px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.05);
  --shadow:    0 0 0 0.5px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05);
  --shadow-lg: 0 0 0 0.5px rgba(0,0,0,0.04), 0 8px 28px rgba(0,0,0,0.09);

  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --ease-out:    cubic-bezier(0,0,0.2,1);
  --ease-in-out: cubic-bezier(0.4,0,0.2,1);
  --ease-spring: cubic-bezier(0.32,0.72,0,1);
}
/* ── Abenteuer / Expedition ─────────────────────────────────────────────── */
:root[data-theme="abenteuer"] {
  /* Basis-Hintergrund: Tiefes Waldgrün / Zelt-Canvas */
  --page-bg:       #1c211e;
  --card-bg:       #252b27;
  --card-glass:    rgba(37, 43, 39, 0.72);

  /* Liquid Glass: Etwas abgedunkelt, milchiger für einen rustikaleren Look */
  --glass-bg:        rgba(37, 43, 39, 0.55);
  --glass-bg-strong: rgba(44, 51, 46, 0.75);
  --glass-bg-sheer:  rgba(28, 33, 30, 0.25);
  --glass-border:    rgba(226, 217, 198, 0.12);
  --glass-highlight: rgba(226, 217, 198, 0.08);

  /* Aurora – Naturtöne: Lagerfeuer, tiefer Wald und Sternenhimmel */
  --aurora-1: rgba(230, 126, 34, 0.22);  /* Lagerfeuer-Orange */
  --aurora-2: rgba(30, 89, 62, 0.35);    /* Tiefgrün */
  --aurora-3: rgba(211, 84, 0, 0.25);    /* Glut */
  --aurora-4: rgba(24, 34, 47, 0.40);    /* Nachtblau */

  /* Akzent: Expeditions- / Signal-Orange */
  --accent:        #e67e22;
  --accent-hover:  #d35400;
  --accent-tint:   rgba(230, 126, 34, 0.20);
  --accent-text:   #f0913c;

  /* Textfarben: Pergament & warmes Steingrau (kein hartes Reinweiß) */
  --text:          #e2d9c6;
  --text-2:        #b5b0a1;
  --muted:         #8f8b80;

  /* UI-Elemente & Rahmen */
  --border:        #38403a;
  --border-light:  #2a302c;
  --separator:     rgba(226, 217, 198, 0.08);
  --hover-fill:    rgba(226, 217, 198, 0.06);
  --fill-quaternary: rgba(226, 217, 198, 0.09);
  --segment-active: #3f4741;

  /* Status-Farben (leicht gedeckter, passend zur Naturpalette) */
  --success:       #399c5c;
  --success-strong:#399c5c;
  --success-bg:    rgba(57, 156, 92, 0.15);
  --danger:        #c0392b;
  --danger-strong: #c0392b;
  --danger-bg:     rgba(192, 57, 43, 0.15);
  --warning:       #d35400;
  --warning-strong:#d35400;
  --warning-bg:    rgba(211, 84, 0, 0.15);
  --info:          #2980b9;
  --info-bg:       rgba(41, 128, 185, 0.15);

  /* Topbar & Map */
  --topbar-bg:     rgba(28, 33, 30, 0.8);
  --map-land:      #282e2a;
  --map-land-line: rgba(226, 217, 198, 0.15);
  --map-kachel:    dark;

  /* Schatten: Etwas wärmer und erdiger als im reinen Dunkelmodus */
  --shadow-sm: 0 0 0 0.5px rgba(15,18,16,0.8), 0 1px 2px rgba(15,18,16,0.6);
  --shadow:    0 0 0 0.5px rgba(15,18,16,0.8), 0 1px 2px rgba(15,18,16,0.6), 0 8px 24px rgba(15,18,16,0.65);
  --shadow-lg: 0 0 0 0.5px rgba(15,18,16,0.8), 0 8px 28px rgba(15,18,16,0.75);
}
/* ── Dunkel: per Umschalter oder Systemvorgabe ──────────────────────────── */
:root[data-theme="dunkel"] {
  --glass-bg:        rgba(40,40,44,0.38);
  --glass-bg-strong: rgba(48,48,52,0.52);
  --glass-bg-sheer:  rgba(44,44,50,0.1);   /* „Liquid Glass“ – fast transparent, trägt vom Blur */
  --glass-border:    rgba(255,255,255,0.14);
  --glass-highlight: rgba(255,255,255,0.16);

  --aurora-1: rgba(28, 89, 62, 0.45);
  --aurora-2: rgba(0, 130, 255, 0.4);
  --aurora-3: rgba(255, 159, 10, 0.25);
  --aurora-4: rgba(40, 60, 40, 0.40);

  --accent:        #2DD08E;
  --accent-hover:  #46E0A2;
  --accent-tint:   rgba(45,208,142,0.20);
  --accent-text:   #46E0A2;
  --page-bg:       #000000;
  --card-bg:       #1c1c1e;
  --card-glass:    rgba(44,44,46,0.72);
  --text:          #f5f5f7;
  --text-2:        #c7c7cc;
  --muted:         #8e8e93;
  --border:        #38383a;
  --border-light:  #2c2c2e;
  --separator:     rgba(255,255,255,0.10);
  --hover-fill:    rgba(255,255,255,0.07);
  --fill-quaternary: rgba(120,120,128,0.24);
  --segment-active: #636366;
  --success:       #30d158;
  --success-strong:#30d158;
  --success-bg:    rgba(48,209,88,0.14);
  --danger:        #ff453a;
  --danger-strong: #ff453a;
  --danger-bg:     rgba(255,69,58,0.14);
  --warning:       #ff9f0a;
  --warning-strong:#ff9f0a;
  --warning-bg:    rgba(255,159,10,0.14);
  --info:          #2DD08E;
  --info-bg:       rgba(45,208,142,0.14);
  --topbar-bg:     rgba(0,0,0,0.7);
  --map-land:      #3a3a3e;
  --map-land-line: rgba(0,0,0,0.55);
  --map-kachel:    dark;
  --feld-bg:       rgba(118,118,128,0.18);
  --feld-bg-focus: rgba(118,118,128,0.28);
  --feld-border:   rgba(255,255,255,0.13);
  --shadow-sm: 0 0 0 0.5px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow:    0 0 0 0.5px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 0 0 0.5px rgba(0,0,0,0.5), 0 8px 28px rgba(0,0,0,0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --glass-bg:        rgba(40,40,44,0.38);
    --glass-bg-strong: rgba(48,48,52,0.52);
    --glass-bg-sheer:  rgba(44,44,50,0.18);   /* „Liquid Glass“ – fast transparent, trägt vom Blur */
    --glass-border:    rgba(255,255,255,0.14);
    --glass-highlight: rgba(255,255,255,0.16);
    --aurora-1: rgba(28, 89, 62, 0.45);
    --aurora-2: rgba(18, 32, 47, 0.50);
    --aurora-3: rgba(255, 159, 10, 0.25);
    --aurora-4: rgba(40, 60, 40, 0.40);
    --accent:        #2DD08E;
    --accent-hover:  #46E0A2;
    --accent-tint:   rgba(45,208,142,0.20);
    --accent-text:   #46E0A2;
    --page-bg:       #000000;
    --card-bg:       #1c1c1e;
    --card-glass:    rgba(44,44,46,0.72);
    --text:          #f5f5f7;
    --text-2:        #c7c7cc;
    --muted:         #8e8e93;
    --border:        #38383a;
    --border-light:  #2c2c2e;
    --separator:     rgba(255,255,255,0.10);
    --hover-fill:    rgba(255,255,255,0.07);
    --fill-quaternary: rgba(120,120,128,0.24);
    --segment-active: #636366;
    --success:       #30d158;
    --success-strong:#30d158;
    --success-bg:    rgba(48,209,88,0.14);
    --danger:        #ff453a;
    --danger-strong: #ff453a;
    --danger-bg:     rgba(255,69,58,0.14);
    --warning:       #ff9f0a;
    --warning-strong:#ff9f0a;
    --warning-bg:    rgba(255,159,10,0.14);
    --info:          #2DD08E;
    --info-bg:       rgba(45,208,142,0.14);
    --topbar-bg:     rgba(0,0,0,0.7);
    --map-land:      #3a3a3e;
    --map-land-line: rgba(0,0,0,0.55);
    --map-kachel:    dark;
    --feld-bg:       rgba(118,118,128,0.18);
    --feld-bg-focus: rgba(118,118,128,0.28);
    --feld-border:   rgba(255,255,255,0.13);
    --shadow-sm: 0 0 0 0.5px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
    --shadow:    0 0 0 0.5px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.45);
    --shadow-lg: 0 0 0 0.5px rgba(0,0,0,0.5), 0 8px 28px rgba(0,0,0,0.55);
  }
}

/* ── Reset & Grundlagen ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; background: var(--page-bg); -webkit-text-size-adjust: 100%; }
body {
  min-height: 100%;
  background: transparent;
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 14px; line-height: 1.47; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; color: inherit; }
/* ── Überschriften: Grundmaße ────────────────────────────────────────────
   Bisher waren nur die bekannten Behälter bedient (.section-head h2,
   .chart-box h3, .modal-head h3, .leer h4). Jede Überschrift außerhalb davon
   fiel auf die Browservorgabe zurück – h2 also 21 px/700 statt 17 px/600.
   Diese Grundregel hält sie in jedem Fall in der Skala; die Regeln der
   Behälter setzen darauf nur noch Anordnung und Feinheiten. */
h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-heading); letter-spacing: -0.02em; line-height: 1.3; }
h2 { font-size: var(--fs-titel); }
h3 { font-size: var(--fs-heading); }
h4 { font-size: var(--fs-body); }
h5, h6 { font-size: var(--fs-label); color: var(--muted); }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
/* Muss nach den Komponenten greifen: .btn & Co. setzen ein eigenes display und
   würden das UA-Verhalten von [hidden] sonst aushebeln. */
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
.ic { flex: 0 0 auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
*:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--accent-tint); }

.bg-aurora {
  position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(80vmax 80vmax at 10% 10%,   var(--aurora-1), transparent 50%),
    radial-gradient(62vmax 62vmax at 95% 12%,  var(--aurora-2), transparent 60%),
    radial-gradient(60vmax 60vmax at 80% 95%,  var(--aurora-3), transparent 70%),
    radial-gradient(58vmax 58vmax at 8% 92%,   var(--aurora-4), transparent 70%),
    radial-gradient(50vmax 50vmax at 50% 45%,  var(--aurora-2), transparent 75%);
  filter: blur(44px);
  animation: auroraDrift 26s var(--ease-in-out) infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2.5vmax,-2vmax,0) scale(1.06); }
  100% { transform: translate3d(-2vmax,2.5vmax,0) scale(1.03); }
}
@keyframes fadeInUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

/* ── Navigation: schwebende Pillenleiste, auf allen Bildschirmgrößen ─────── */
/* ── Navigations-Pill: „Liquid Glass“ (mehrschichtig, Apple-Stil) ─────────────
   Ebenen hinter dem Inhalt: 0 Brechung (Blur + SVG-Verzerrung), 1 Farbschleier,
   2 Glanzkante. Der Filter #glass-distortion steckt in layout.php. */
.tabbar {
  display: flex; position: fixed; z-index: 140;
  left: 50%; transform: translateX(-50%);
  bottom: max(14px, env(safe-area-inset-bottom));
  width: min(520px, calc(100vw - 24px));
  border-radius: var(--radius-full); padding: 6px; gap: 3px;
  overflow: hidden; isolation: isolate;   /* Ebenen auf die Pillform beschneiden, eigener Stapel */
  box-shadow: 0 6px 16px rgba(0,0,0,0.26), 0 1px 4px rgba(0,0,0,0.18);
}
.tabbar-effect {                          /* Ebene 0 – unscharfer, verzerrter Durchblick */
  position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  backdrop-filter: blur(2px) saturate(180%);
  -webkit-backdrop-filter: blur(2px) saturate(180%);
  filter: url(#glass-distortion);
}
.tabbar-tint {                            /* Ebene 1 – zarter Farbschleier */
  position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  background: var(--glass-bg-sheer);
}
.tabbar-shine {                           /* Ebene 2 – Glanzkante (Specular) */
  position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 1.5px 1.5px 1px 0 rgba(255,255,255,0.55),
              inset -1px -1px 1px 1px rgba(255,255,255,0.28);
}
.tabbar a {                               /* Ebene 3 – Inhalt */
  position: relative; z-index: 3;
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 2px; border-radius: var(--radius-full);
  font-size: var(--fs-mikro); font-weight: 600; color: var(--muted);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.tabbar a:hover { color: var(--text); }
.tabbar a.active { background: var(--accent); color: #fff; }
@media (prefers-reduced-motion: reduce) { .tabbar-effect { filter: none; } }

/* ── Hauptbereich ───────────────────────────────────────────────────────── */
.main-wrap { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 0.5px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  min-height:56px; padding: 8px 28px; display:flex; align-items:center; gap:12px;
  position: sticky; top:0; z-index:50;
}
.topbar .marke { display: flex; align-items: center; }
.topbar .marke svg { height: 24px; width: auto; color: var(--text); }
.topbar-title { font-size: var(--fs-heading); font-weight:600; letter-spacing:-.2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.topbar-spacer { margin-left:auto; }
/* Unten großzügig Platz lassen: die schwebende Tabbar darf nichts überdecken. */
.page { padding: 26px 28px calc(112px + env(safe-area-inset-bottom)); flex:1; width:100%; max-width: 1480px; }
.page-heading { font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem); font-weight:700; letter-spacing:-.5px; line-height:1.15; }
.page-sub { color: var(--muted); font-size: var(--fs-body-sm); margin-top:5px; }
.page-head { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom: 22px; }
.section-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:13px; }
.section-head h2 { font-size: var(--fs-titel); font-weight: var(--fw-heading); letter-spacing:-.25px; }
.section-head .hint { font-size: var(--fs-label); color:var(--muted); }
.stack { display:flex; flex-direction:column; gap:26px; }

/* Glas-Pille (Menü-Toggle, Theme-Schalter, Zurück) */
.nav-toggle {
  display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px;
  border:0.5px solid var(--glass-border); border-radius: var(--radius-full);
  background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-highlight);
  font-size: var(--fs-body-sm); font-weight:600; cursor:pointer; color: var(--text);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.nav-toggle:hover { transform: translateY(-1px); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-highlight); }
.nav-toggle:active { transform: scale(0.97); }
.nav-toggle.icon-only { padding:0; width:34px; justify-content:center; }

/* ── Karten ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--glass-bg); border-radius: var(--radius);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-highlight);
}
.card-body { padding: 22px 26px; }
.card-title { font-size: var(--fs-label); font-weight:600; color: var(--muted); }

.chart-box {
  background: var(--glass-bg); border-radius: var(--radius);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-highlight);
  padding: 22px 24px; position:relative; overflow:hidden;
  transition: box-shadow var(--duration-base) var(--ease-in-out), transform var(--duration-base) var(--ease-in-out);
  animation: fadeInUp var(--duration-base) var(--ease-out) both;
}
.chart-box::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(150deg, rgba(255,255,255,0.16), transparent 40%);
}
.chart-box > * { position:relative; z-index:1; }
.chart-box.flush { padding: 0; }
/* Der Kartentitel sieht immer gleich aus – ob er als h2 oder h3 in der
   Gliederung steht, hängt nur daran, ob der Abschnitt darüber schon eine
   Überschrift trägt. Die Optik darf davon nicht abhängen. */
.chart-box > h2, .chart-box h3 { font-size: var(--fs-heading); font-weight: var(--fw-heading);
  display:flex; align-items:center; gap:8px; }
.chart-box > h2 small, .chart-box h3 small { font-weight:400; font-size: var(--fs-label); color: var(--muted); margin-left:auto; }
/* Unterabschnitt innerhalb einer Karte. Nur als direktes Kind – sonst geriete
   die Überschrift im Leerzustand (.leer h4) mit hinein. */
.chart-box > h4 { font-size: var(--fs-body); font-weight: var(--fw-heading);
  display:flex; align-items:center; gap:8px; color: var(--text); }
.chart-box > h4 small { font-weight:400; font-size: var(--fs-label); color: var(--muted); margin-left:auto; }
/* Ein Unterabschnitt liegt hinter einem Trenner. Welche Ebene er in der
   Gliederung trägt, hängt vom Kartentitel darüber ab (h2 → h3, h3 → h4) –
   die Optik richtet sich hier nach der Stellung, nicht nach der Ebene. */
.chart-box > .trenner + h3, .chart-box > .trenner + h4 { font-size: var(--fs-body); }

/* ── KPI-Kacheln ────────────────────────────────────────────────────────── */
.kpi-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap:14px; }
.kpi-tile {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--glass-border); border-radius: var(--radius);
  padding:20px 22px; box-shadow: var(--shadow), inset 0 1px 0 var(--glass-highlight);
  position:relative; overflow:hidden;
  transition: transform var(--duration-base) var(--ease-in-out), box-shadow var(--duration-base) var(--ease-in-out);
  animation: fadeInUp var(--duration-base) var(--ease-out) both;
}
.kpi-tile::before { content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(140deg, rgba(255,255,255,0.18), transparent 46%); }
.kpi-tile::after {
  content:''; position:absolute; top:18px; right:18px; width:9px; height:9px; border-radius:50%;
  background: var(--border); box-shadow: 0 0 0 4px rgba(255,255,255,0.18);
}
.kpi-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight); }
.kpi-tile.green::after  { background: var(--success); }
.kpi-tile.red::after    { background: var(--danger); }
.kpi-tile.yellow::after { background: var(--warning); }
.kpi-tile.blue::after   { background: var(--info); }
.kpi-tile .kpi-label { font-size: var(--fs-label); color:var(--muted); font-weight:600; margin-bottom:10px; padding-right:16px; }
.kpi-tile .kpi-value { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:23px; font-weight:500; letter-spacing:-.5px; }
.kpi-tile .kpi-value .unit { font-size: var(--fs-body-sm); color: var(--muted); margin-left:3px; letter-spacing:0; }
.kpi-tile.green .kpi-value  { color: var(--success-strong); }
.kpi-tile.red .kpi-value    { color: var(--danger-strong); }
.kpi-tile.yellow .kpi-value { color: var(--warning-strong); }
.kpi-tile .kpi-sub { font-size: var(--fs-label); color:var(--muted); margin-top:7px; }
.kpi-grid > *:nth-child(2) { animation-delay:40ms; }
.kpi-grid > *:nth-child(3) { animation-delay:80ms; }
.kpi-grid > *:nth-child(4) { animation-delay:120ms; }
.kpi-grid > *:nth-child(5) { animation-delay:160ms; }
.kpi-grid > *:nth-child(6) { animation-delay:200ms; }
.kpi-grid > *:nth-child(7) { animation-delay:240ms; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 20px; border-radius: var(--radius-full); font-size: var(--fs-body-sm); font-weight: var(--fw-medium);
  min-height:40px; border:none; cursor:pointer; white-space:nowrap;
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.btn:active { transform: translateY(0) scale(0.98); }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* Wartezustand: Text bleibt stehen, ein Ring dreht sich davor – z. B. während
   der Routen-Import beim Modell auf Antwort wartet. */
.btn.laedt { pointer-events:none; opacity:.85; }
.btn.laedt::before {
  content:''; width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.4); border-top-color:#fff;
  animation: btn-dreh 0.7s linear infinite; flex:0 0 auto;
}
.btn-outline.laedt::before, .btn-ghost.laedt::before {
  border-color: var(--accent-tint); border-top-color: var(--accent);
}
@keyframes btn-dreh { to { transform: rotate(360deg); } }
.btn-primary { background: var(--accent); color:#fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(29,158,117,0.3); }
.btn-success { background: var(--success); color:#fff; }
.btn-danger  { background: var(--danger);  color:#fff; }
.btn-outline { background: transparent; color: var(--accent-text); font-weight: var(--fw-medium);
  border: 1px solid var(--feld-border); }
.btn-outline:hover { background: var(--accent-tint); border-color: var(--accent); }
.btn-ghost   { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--hover-fill); color: var(--text); }
.btn-glass {
  background: var(--glass-bg-strong); color: var(--text);
  border: 0.5px solid var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-highlight);
}
.btn-glass:hover { transform: translateY(-1px); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-highlight); }
.btn-sm { padding:7px 14px; font-size: var(--fs-label); min-height:34px; }
.btn-block { width:100%; }
.icon-btn {
  width:30px; height:30px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  border:none; background:transparent; color: var(--muted); cursor:pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--hover-fill); color: var(--text); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn.danger:hover { background: var(--danger-bg); color: var(--danger); }

/* ── Segmented Control / Pill-Switch ────────────────────────────────────── */
.view-toggle {
  display:inline-flex; background: var(--fill-quaternary); border-radius:9px; padding:2px; gap:2px;
  max-width:100%; overflow-x:auto; scrollbar-width:none;
}
.view-toggle::-webkit-scrollbar { display:none; }
.view-toggle button, .view-toggle a {
  display:flex; align-items:center; gap:6px; padding:5px 14px; border-radius:7px; flex:0 0 auto; white-space:nowrap;
  font-size: var(--fs-label); font-weight: var(--fw-medium); border:none; background:transparent; cursor:pointer; color: var(--text-2);
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.view-toggle button.active, .view-toggle a.active {
  background: var(--segment-active); color: var(--text); font-weight:600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.04);
}
.view-toggle .cnt { font-size: var(--fs-mikro); color: var(--muted); font-family:'IBM Plex Mono', monospace; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:20px;
  font-size: var(--fs-mikro); font-weight:600; white-space:nowrap; }
.badge-success { background: var(--success-bg); color: var(--success-strong); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger-strong); }
.badge-warning { background: var(--warning-bg); color: var(--warning-strong); }
.badge-info    { background: var(--info-bg);    color: var(--accent-text); }
.badge-neutral { background: var(--fill-quaternary); color: var(--text-2); }
.badge-glass   { background: var(--glass-bg-strong); border:0.5px solid var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: var(--text); }

/* ── Tabellen ───────────────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.data-table { width:100%; border-collapse:collapse; font-size: var(--fs-body-sm); }
.data-table th { text-align:left; padding:10px 14px; font-size: var(--fs-mikro); font-weight:600; color:var(--muted);
  border-bottom:0.5px solid var(--border); white-space:nowrap; }
.data-table td { padding:11px 14px; border-bottom:0.5px solid var(--border-light); vertical-align:middle; }
.data-table tbody tr:last-child td { border-bottom:none; }
.data-table tbody tr { transition: background var(--duration-fast) var(--ease-out); }
.data-table tbody tr:hover { background: var(--hover-fill); }
.data-table tbody tr.clickable { cursor:pointer; }
.data-table td.mono, .data-table th.mono { font-family:'IBM Plex Mono', ui-monospace, monospace; }
.data-table td.num, .data-table th.num { text-align:right; }
.data-table .zeile-titel { font-weight:600; }
.data-table .zeile-sub { font-size: var(--fs-label); color: var(--muted); margin-top:1px; }
.td-actions { width:1%; white-space:nowrap; text-align:right; }
.cell-icon { display:flex; align-items:center; gap:9px; }
.kat-dot {
  width:28px; height:28px; border-radius:9px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background: var(--accent-tint); color: var(--accent);
}
.kat-dot.grau { background: var(--fill-quaternary); color: var(--text-2); }

/* ── Slideover: horizontal scrollende Kartenreihe ───────────────────────── */
.slideover {
  display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; padding: 4px 4px 14px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.slideover::-webkit-scrollbar { height:8px; }
.slideover::-webkit-scrollbar-thumb { background: var(--fill-quaternary); border-radius:99px; }
.slideover::-webkit-scrollbar-track { background:transparent; }
.slide-card {
  flex: 0 0 296px; scroll-snap-align:start; border-radius: var(--radius);
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border:0.5px solid var(--glass-border);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-highlight);
  overflow:hidden; position:relative; display:flex; flex-direction:column;
  transition: transform var(--duration-base) var(--ease-in-out), box-shadow var(--duration-base) var(--ease-in-out);
  animation: fadeInUp var(--duration-base) var(--ease-out) both;
}
.slide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight); }
.slide-card.klein { flex-basis: 210px; }
.slide-card .sc-bild {
  height:128px; background: linear-gradient(140deg, var(--accent-tint), var(--fill-quaternary));
  background-size:cover; background-position:center; position:relative; flex:0 0 auto;
}
.slide-card .sc-bild .sc-flaggen { position:absolute; left:12px; bottom:10px; font-size:17px; letter-spacing:1px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
.slide-card .sc-bild .sc-badge { position:absolute; right:10px; top:10px; }
.slide-card .sc-body { padding:14px 16px 15px; display:flex; flex-direction:column; gap:5px; flex:1; }
.slide-card .sc-titel { font-size: var(--fs-heading); font-weight: var(--fw-heading); letter-spacing:-.2px; line-height:1.25; }
.slide-card .sc-meta { font-size: var(--fs-label); color: var(--muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.slide-card .sc-foot { margin-top:auto; padding-top:10px; display:flex; align-items:center; gap:10px;
  font-size: var(--fs-label); color:var(--text-2); }
.slide-card .sc-foot .v { font-family:'IBM Plex Mono', monospace; }
.slide-card.neu {
  border-style:dashed; border-width:1px; background: var(--glass-bg);
  align-items:center; justify-content:center; min-height:190px; cursor:pointer; color: var(--accent); gap:8px;
}
.slide-card.neu:hover { background: var(--accent-tint); }
.slide-card.neu .plus-kreis {
  width:44px; height:44px; border-radius:50%; background: var(--accent-tint);
  display:flex; align-items:center; justify-content:center;
}
/* Ordner-Karte */
.folder-card { align-items:flex-start; }
.folder-card .fc-icon {
  width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background: var(--accent-tint); color: var(--accent); margin-bottom:11px;
}
.folder-card .fc-body { padding:16px 17px 15px; display:flex; flex-direction:column; flex:1; width:100%; }
.doc-card .fc-icon { background: var(--fill-quaternary); color: var(--text-2); }

/* ── Formulare ──────────────────────────────────────────────────────────── */
.form-row { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.form-row > label, .form-label { font-size: var(--fs-label); color: var(--muted); font-weight:600; }
.form-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap:0 16px; }
.form-control {
  width:100%; padding:12px 15px; border:1px solid var(--feld-border); border-radius: var(--radius-feld);
  font-size: var(--fs-heading); color: var(--text); background: var(--feld-bg); min-height:48px;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.form-control:hover:not(:focus):not(:disabled) { border-color: var(--border); }
.form-control:focus {
  outline:none; border-color: var(--accent); background: var(--feld-bg-focus);
  box-shadow: 0 0 0 3.5px var(--accent-tint);
}
.form-control:disabled { opacity:.55; cursor:not-allowed; }
textarea.form-control { min-height:104px; resize:vertical; line-height:1.5; }
select.form-control {
  appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b70' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:16px;
}
.form-hint { font-size: var(--fs-label); color: var(--muted); line-height:1.45; }
.form-err  { font-size: var(--fs-label); color: var(--danger-strong); font-weight:500;
  display:flex; align-items:flex-start; gap:5px; }
.form-err::before { content:'!'; flex:0 0 auto; width:14px; height:14px; border-radius:50%;
  background: var(--danger); color:#fff; font-size:10px; font-weight:700; line-height:14px; text-align:center; }

/* ── Eingabefeld im Revolut-Stil: schwebendes Etikett ─────────────────────
   Ruhezustand: Der Feldtitel steht mittig im leeren Feld – kein doppeltes
   Etikett darüber. Sobald etwas eingegeben ist oder das Feld den Fokus hat,
   wandert der Titel klein nach oben links und gibt den Wert frei. Die Klasse
   .feld setzt app.js auf jede .form-row aus label + .form-control; ohne
   JavaScript bleibt das klassische Etikett-über-Feld erhalten. */
.feld { position: relative; }
.feld > label {
  position: absolute; left: 16px; right: 16px; top: 50%;
  transform: translateY(-50%); transform-origin: left center;
  display: flex; align-items: center; gap: 5px;
  font-size: var(--fs-heading); font-weight: 400; color: var(--muted);
  pointer-events: none; white-space: nowrap; overflow: hidden;
  transition: top var(--duration-fast) var(--ease-out),
              font-size var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  z-index: 1;
}
.feld > label svg { width:1em; height:1em; flex:0 0 auto; }
.feld > .form-control { min-height: var(--feld-h); padding: 23px 15px 7px; }
.feld > textarea.form-control { min-height: 116px; padding-top: 26px; }
.feld > select.form-control  { padding-top: 24px; padding-bottom: 6px; }

/* .schwebt setzt das Skript für gefüllte Felder; :focus-within greift ohne
   Skript und deckt damit den Fokus in jedem Fall ab. */
.feld.schwebt > label,
.feld:focus-within > label {
  top: 9px; transform: none;
  font-size: var(--fs-mikro); font-weight: 600; letter-spacing: .012em;
}
.feld:focus-within > label { color: var(--accent); }
/* Der Platzhalter darf erst auftauchen, wenn das Etikett oben Platz gemacht
   hat – sonst stünden zwei Texte übereinander. */
.feld > .form-control::placeholder { color: transparent; }
.feld.schwebt > .form-control::placeholder,
.feld:focus-within > .form-control::placeholder { color: var(--muted); opacity:.75; }

/* Mehrzeilig: Das Etikett sitzt oben statt mittig, sonst läge es in der Mitte
   eines hohen Textfeldes. */
.feld.feld-mehrzeilig > label { top: 18px; transform: none; }
.feld.feld-mehrzeilig.schwebt > label,
.feld.feld-mehrzeilig:focus-within > label { top: 9px; }

/* Fehlerzustand: Rahmen und Etikett führen die Meldung darunter. */
.feld.fehler > .form-control { border-color: var(--danger); }
.feld.fehler > .form-control:focus { box-shadow: 0 0 0 3.5px var(--danger-bg); }
.feld.fehler > label, .feld.fehler:focus-within > label { color: var(--danger-strong); }

/* Hinweis und Fehlermeldung stehen unter dem Feld, leicht eingerückt. */
.feld > .form-hint, .feld > .form-err { padding-left: 4px; }

/* Feld mit direkt anschließendem Knopf (Freund anfragen, Person hinzufügen).
   Beide stehen auf derselben Höhe, damit die Zeile nicht ausfranst. */
.feld-zeile { display:flex; gap:8px; align-items:stretch; flex-wrap:wrap; }
.feld-zeile > .form-row { flex:1 1 200px; margin-bottom:0; min-width:0; }
.feld-zeile > .btn { min-height: var(--feld-h); flex:0 0 auto; }

.check-row { display:flex; align-items:flex-start; gap:10px; font-size: var(--fs-body);
  cursor:pointer; padding:9px 0; min-height:44px; align-items:center; }
.check-row input[type=checkbox], .check-row input[type=radio] { width:20px; height:20px;
  accent-color: var(--accent); cursor:pointer; flex:0 0 auto; }

/* Dateiablage */
.dropzone {
  border:1px dashed var(--border); border-radius: var(--radius-sm); padding:20px 16px; text-align:center;
  color: var(--muted); font-size: var(--fs-label); cursor:pointer; background: var(--fill-quaternary);
  transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast);
}
.dropzone:hover, .dropzone.ueber { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
.dropzone input[type=file] { display:none; }
.datei-liste { display:flex; flex-direction:column; gap:6px; margin-top:9px; }
.datei-chip {
  display:flex; align-items:center; gap:8px; font-size: var(--fs-label); padding:6px 10px;
  background: var(--fill-quaternary); border-radius:8px; color: var(--text-2);
}
.datei-chip .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.datei-chip .sz { margin-left:auto; font-family:'IBM Plex Mono', monospace; font-size: var(--fs-mikro); color: var(--muted); }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position:fixed; inset:0; z-index:200; background: rgba(0,0,0,0.32);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition: opacity var(--duration-base) var(--ease-out);
}
.modal-backdrop.offen { opacity:1; pointer-events:auto; }
.modal {
  width:100%; max-width:560px; max-height: calc(100vh - 40px); display:flex; flex-direction:column;
  background: var(--glass-bg-strong); border-radius: var(--radius-lg);
  backdrop-filter: var(--glass-blur-lg); -webkit-backdrop-filter: var(--glass-blur-lg);
  border:0.5px solid var(--glass-border);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight);
  transform: translateY(16px) scale(.98); opacity:0;
  transition: transform var(--duration-base) var(--ease-spring), opacity var(--duration-base) var(--ease-out);
}
.modal-backdrop.offen .modal { transform:none; opacity:1; }
.modal.breit { max-width:720px; }
.modal-head { display:flex; align-items:center; gap:12px; padding:18px 22px 14px; border-bottom:0.5px solid var(--separator); }
.modal-head h3 { font-size: var(--fs-titel); font-weight: var(--fw-heading); letter-spacing:-.25px; }
.modal-head .icon-btn { margin-left:auto; }
.modal-body { padding:18px 22px; overflow-y:auto; flex:1; }
.modal-foot { display:flex; gap:9px; justify-content:flex-end; padding:14px 22px 18px;
  border-top:0.5px solid var(--separator); flex-wrap:wrap; }
body.modal-offen { overflow:hidden; }

/* ── Alerts & Leerzustände ──────────────────────────────────────────────── */
.alert-item {
  border-radius:12px; padding:13px 17px; border-left:3px solid; display:flex; flex-direction:column; gap:3px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-highlight); margin-bottom:10px;
}
.alert-item.danger  { background: var(--danger-bg);  border-color: var(--danger); }
.alert-item.warning { background: var(--warning-bg); border-color: var(--warning); }
.alert-item.info    { background: var(--info-bg);    border-color: var(--info); }
.alert-item.success { background: var(--success-bg); border-color: var(--success); }
.alert-item .a-title { font-weight:600; font-size: var(--fs-body-sm); }
.alert-item .a-msg   { font-size: var(--fs-label); color: var(--text-2); }

.leer { text-align:center; padding:46px 22px; color: var(--muted); }
.leer .leer-icon {
  width:52px; height:52px; border-radius:16px; margin:0 auto 13px;
  background: var(--fill-quaternary); display:flex; align-items:center; justify-content:center; color: var(--muted);
}
/* Ein Leerzustand ist eine Meldung, kein Gliederungspunkt – daher ein Absatz
   und keine Überschrift. .leer h4 bleibt stehen, falls irgendwo noch eine
   alte Fassung im Umlauf ist. */
.leer .leer-titel, .leer h4 { font-size: var(--fs-heading); font-weight: var(--fw-heading);
  color: var(--text); margin-bottom:4px; }
.leer p { font-size: var(--fs-label); max-width:340px; margin:0 auto; }

/* ── Toast ──────────────────────────────────────────────────────────────── */
/* ── Geführte Einleitung ────────────────────────────────────────────────── */
/* Der abgedunkelte Bereich entsteht durch einen sehr großen Schlagschatten am
   Loch. Vier einzelne Blenden hätten an den Ecken Lücken und müssten bei jedem
   Scrollen einzeln nachgeführt werden. */
body.tour-an { overflow: hidden; }
.tour-loch {
  position: fixed; z-index: 400; pointer-events: none;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.68), 0 0 0 2px var(--accent) inset;
  transition: left var(--duration-base) var(--ease-out), top var(--duration-base) var(--ease-out),
              width var(--duration-base) var(--ease-out), height var(--duration-base) var(--ease-out);
}
/* Begrüßung und Abschluss haben kein Ziel – dann deckt die Blende alles ab. */
.tour-loch.ohne-ziel {
  left: 50%; top: 50%; width: 0; height: 0;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.72);
}

.tour-karte {
  position: fixed; z-index: 401; width: min(340px, calc(100vw - 24px));
  background: var(--glass-bg-strong); border: 0.5px solid var(--glass-border);
  backdrop-filter: var(--glass-blur-lg); -webkit-backdrop-filter: var(--glass-blur-lg);
  border-radius: var(--radius-lg); padding: 18px 20px 16px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight);
  animation: tourAuf var(--duration-base) var(--ease-spring);
  transition: left var(--duration-base) var(--ease-out), top var(--duration-base) var(--ease-out);
}
@keyframes tourAuf { from { opacity:0; transform: translateY(6px) scale(0.97); } }

/* Pfeil zum hervorgehobenen Element. --pfeil-x setzt das Skript auf die Mitte
   des Ziels, damit der Pfeil auch bei am Rand liegenden Karten stimmt. */
.tour-karte.pfeil-oben::before,
.tour-karte.pfeil-unten::before {
  content: ''; position: absolute; left: var(--pfeil-x, 50%); margin-left: -8px;
  border: 8px solid transparent; width: 0; height: 0;
}
.tour-karte.pfeil-oben::before  { top: -16px; border-bottom-color: var(--glass-border); }
.tour-karte.pfeil-unten::before { bottom: -16px; border-top-color: var(--glass-border); }

.tour-kopf { display: flex; align-items: center; margin-bottom: 8px; }
.tour-zaehler {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--accent);
}
.tour-x {
  margin-left: auto; background: none; border: 0; cursor: pointer; line-height: 1;
  font-size: 22px; color: var(--muted); padding: 0 2px;
}
.tour-x:hover { color: var(--text); }
.tour-karte h3 { font-size: var(--fs-titel); font-weight: var(--fw-heading); letter-spacing: -0.02em; margin-bottom: 6px; }
.tour-karte p  { font-size: 13.5px; line-height: 1.6; color: var(--text-2); }

.tour-punkte { display: flex; gap: 5px; margin: 14px 0 12px; }
.tour-punkte span {
  width: 100%; height: 3px; border-radius: 2px; background: var(--fill-quaternary);
  transition: background var(--duration-fast) var(--ease-out);
}
.tour-punkte span.da  { background: var(--accent); }
.tour-punkte span.weg { background: var(--accent-tint); }

.tour-fuss { display: flex; align-items: center; gap: 8px; }
.tour-knoepfe { margin-left: auto; display: flex; gap: 6px; }
.tour-skip {
  background: none; border: 0; cursor: pointer; padding: 0;
  font-size: 12.5px; color: var(--muted);
}
.tour-skip:hover { color: var(--text-2); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .tour-loch, .tour-karte { transition: none; animation: none; }
}

.toast-wrap { position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:300;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast {
  display:flex; align-items:center; gap:9px; padding:10px 18px; border-radius: var(--radius-full);
  background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur-lg); -webkit-backdrop-filter: var(--glass-blur-lg);
  border:0.5px solid var(--glass-border); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight);
  font-size:13px; font-weight:500; animation: toastIn var(--duration-base) var(--ease-spring);
}
.toast.err { color: var(--danger-strong); }
.toast.ok  { color: var(--success-strong); }
@keyframes toastIn { from { opacity:0; transform:translateY(14px) scale(.96); } to { opacity:1; transform:none; } }

/* ── Karten (Leaflet) ───────────────────────────────────────────────────── */
.karte { width:100%; border-radius: var(--radius); overflow:hidden; background: var(--fill-quaternary); }
.karte.welt   { height: 460px; }
.karte.detail { height: 520px; }
.leaflet-container { background: transparent !important; font: inherit !important; outline:none; }
.leaflet-control-attribution {
  background: var(--glass-bg-strong) !important; backdrop-filter: var(--glass-blur);
  color: var(--muted) !important; font-size:9.5px !important; border-radius: 8px 0 0 0; border:none !important;
}
.leaflet-control-attribution a { color: var(--text-2) !important; }
.leaflet-bar, .leaflet-control-zoom {
  border:0.5px solid var(--glass-border) !important; border-radius: 12px !important; overflow:hidden;
  box-shadow: var(--shadow) !important;
}
.leaflet-bar a {
  background: var(--glass-bg-strong) !important; color: var(--text) !important;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-bottom-color: var(--separator) !important; font-weight:400 !important;
}
.leaflet-bar a:hover { background: var(--card-glass) !important; }
.leaflet-popup-content-wrapper {
  background: var(--glass-bg-strong) !important; color: var(--text) !important;
  backdrop-filter: var(--glass-blur-lg); -webkit-backdrop-filter: var(--glass-blur-lg);
  border:0.5px solid var(--glass-border); border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
}
.leaflet-popup-content { margin:13px 16px !important; font-size:13px !important; line-height:1.45 !important; }
.leaflet-popup-tip { background: var(--glass-bg-strong) !important; box-shadow:none !important; }
.leaflet-popup-close-button { color: var(--muted) !important; }
.pop-titel { font-weight:650; font-size:13.5px; margin-bottom:2px; }
.pop-meta { font-size:11.5px; color: var(--muted); }

/* Kartenpins */
.pin-wrap { background:none !important; border:none !important; }
.pin {
  width:34px; height:34px; border-radius:50% 50% 50% 6px; transform: rotate(-45deg);
  background: var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 3px 9px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.35);
  border: 1.5px solid rgba(255,255,255,.9);
}
.pin > svg { transform: rotate(45deg); }
.pin.hotel { background:#7850ff; }
.pin.heim  { background: var(--text-2); }
.pin.flug      { background:#0a84ff; }   /* Flughäfen */
.pin.mietwagen { background:#ff8c1e; }   /* Mietwagen-Stationen */
.pin.nr {
  position:absolute; top:-5px; right:-5px; width:17px; height:17px; border-radius:50%;
  background: var(--card-bg); color: var(--text); font-size:9.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; transform:none;
  box-shadow: var(--shadow-sm); border:0.5px solid var(--border);
}
.pin-auto {
  width:42px; height:42px; border-radius:50%; background: var(--card-bg); color: var(--accent);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 14px rgba(0,0,0,.28), 0 0 0 3px var(--accent-tint);
  border:1.5px solid var(--accent); animation: pulseAuto 2.4s var(--ease-in-out) infinite;
}
@keyframes pulseAuto {
  0%,100% { box-shadow: 0 4px 14px rgba(0,0,0,.28), 0 0 0 3px var(--accent-tint); }
  50%     { box-shadow: 0 4px 14px rgba(0,0,0,.28), 0 0 0 11px rgba(29,158,117,0); }
}
.karte-legende {
  display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:11.5px; color: var(--muted);
  padding:11px 16px 0;
}
.karte-legende .lg { display:flex; align-items:center; gap:6px; }
.karte-legende .sw { width:11px; height:11px; border-radius:3px; }

/* ── Hero: Titelbild als Bühne, Inhalt als Glas darüber ─────────────────── */
.hero {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  min-height: 260px; display: flex; flex-direction: column; justify-content: space-between;
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-lg); margin-bottom: 22px;
  animation: fadeInUp var(--duration-base) var(--ease-out) both;
}
/* Zwei Verläufe: unten dunkel für die Schrift, oben leicht für die Pillen. */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 34%, rgba(0,0,0,0.05) 62%, rgba(0,0,0,0.28) 100%);
}
.hero > * { position: relative; z-index: 1; }
.hero-inner { padding: 26px 28px 24px; color: #fff; }
.hero-inner .page-heading { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.4); }
.hero-inner .page-sub { color: rgba(255,255,255,0.9); text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
/* Im Textfluss statt absolut: So können die Pillen umbrechen, ohne die
   Überschrift darunter zu überdecken. */
.hero-oben {
  padding: 16px 18px 0; z-index: 2;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.hero .badge-glass { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.35); color: #fff; }
.hero-hoch { min-height: 450px; }

/* Kennzahlen auf dem Bild – dunkles Glas, damit sie überall lesbar bleiben. */
.hero-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.hero-kpi {
  background: rgba(255,255,255,0.16); border: 0.5px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-radius: 14px; padding: 9px 14px; min-width: 92px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.hero-kpi .k { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,0.78);
  text-transform: uppercase; letter-spacing: .05em; }
.hero-kpi .v { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 17px;
  font-weight: 500; letter-spacing: -.4px; margin-top: 2px; }
.hero-kpi .v small { font-size: 11px; opacity: .75; margin-left: 2px; }
.hero-kpi .s { font-size: 10.5px; color: rgba(255,255,255,0.72); margin-top: 1px; }

/* ── Karte mit aufgesetzten Kacheln ─────────────────────────────────────── */
.karte-buehne { position: relative; border-radius: var(--radius); overflow: hidden; }
.karte-buehne .karte { border-radius: 0; }
.karte-overlay {
  position: absolute; left: 0; right: 0; z-index: 500; pointer-events: none;
  display: flex; gap: 10px; padding: 14px 16px;
}
.karte-overlay.oben { top: 0; flex-wrap: wrap; }
.karte-overlay.unten {
  bottom: 0; overflow-x: auto; scroll-snap-type: x proximity;
  pointer-events: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.karte-overlay.unten::-webkit-scrollbar { display: none; }
/* Zoom-Bedienelemente aus dem Weg der Kacheln schieben */
.karte-buehne .leaflet-top.leaflet-left { margin-top: 84px; }

.glass-kachel {
  background: rgba(28,28,30,0.55); color: #fff;
  border: 0.5px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 15px; padding: 10px 14px; min-width: 118px; flex: 0 0 auto;
  box-shadow: 0 6px 22px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.16);
}
.glass-kachel .k { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,0.72);
  display: flex; align-items: center; gap: 5px; }
.glass-kachel .v { font-size: 14.5px; font-weight: 600; letter-spacing: -.2px; margin-top: 3px; }
.glass-kachel .v .mono { font-family: 'IBM Plex Mono', monospace; font-weight: 500; }
.glass-kachel .s { font-size: 11px; color: rgba(255,255,255,0.66); margin-top: 1px; }

/* Stop-Karten, die über dem unteren Kartenrand liegen */
.stop-karte {
  scroll-snap-align: start; min-width: 208px; max-width: 232px; cursor: pointer;
  display: flex; align-items: flex-start; gap: 10px;
  transition: transform var(--duration-fast) var(--ease-out);
}
.stop-karte:hover { transform: translateY(-2px); }
.stop-karte.aktiv { border-color: var(--accent); box-shadow: 0 6px 22px rgba(0,0,0,0.3), 0 0 0 1.5px var(--accent); }
.stop-karte .nr {
  width: 26px; height: 26px; border-radius: 9px; flex: 0 0 auto;
  background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center;
}
.stop-karte .txt { min-width: 0; }
.stop-karte .titel { font-size: 13px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.stop-karte .meta { font-size: 11px; color: rgba(255,255,255,0.68); margin-top: 2px;
  display: flex; align-items: center; gap: 5px; }
.stop-karte .meta .mono { font-family: 'IBM Plex Mono', monospace; }

/* ── Tagesauswahl ───────────────────────────────────────────────────────── */
.tag-leiste {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.tag-leiste::-webkit-scrollbar { display: none; }
.tag-pille {
  flex: 0 0 auto; scroll-snap-align: start; min-width: 58px; text-align: center;
  padding: 9px 6px 8px; border-radius: 18px; cursor: pointer;
  background: var(--glass-bg); border: 0.5px solid var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-highlight);
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.tag-pille:hover { transform: translateY(-1px); }
.tag-pille .z { font-family: 'IBM Plex Mono', monospace; font-size: 17px; font-weight: 500; line-height: 1.1; }
.tag-pille .w { font-size: 10.5px; color: var(--muted); font-weight: 600; margin-top: 1px; }
.tag-pille .p { display: block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin: 4px auto 0; opacity: 0; }
.tag-pille.hat-stops .p { opacity: 1; }
.tag-pille.aktiv { background: var(--accent); border-color: transparent; color: #fff; }
.tag-pille.aktiv .w { color: rgba(255,255,255,0.85); }
.tag-pille.aktiv .p { background: #fff; }
.tag-pille.heute:not(.aktiv) { border-color: var(--accent); }
/* Als <button> in der Planung – Grundstile des Browsers abräumen. */
button.tag-pille { font: inherit; color: inherit; }
.tag-pille.alle { min-width: 66px; display: flex; flex-direction: column; justify-content: center; }
.tag-pille.alle .z { font-family: inherit; font-size: 13px; font-weight: 650; }
.tag-pille.leer { opacity: .5; }

/* Kategoriefilter */
.filter-leiste { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
button.tag { border: none; cursor: pointer; font: inherit; }
.tag.aktiv { background: var(--accent-tint); color: var(--accent-text); font-weight: 600; }
.tag .anz { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; opacity: .7; }

/* Fortschrittskachel: doppelt so breit, mit Balken */
.kpi-tile.breit { grid-column: span 2; }
.kpi-tile.breit::after { display: none; }
.fortschritt-balken {
  height: 7px; border-radius: 99px; background: var(--fill-quaternary);
  overflow: hidden; margin-top: 12px;
}
.fortschritt-balken > span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  transition: width var(--duration-slow) var(--ease-out);
}
.fortschritt-enden {
  display: flex; justify-content: space-between; font-size: 10.5px;
  color: var(--muted); margin-top: 6px; font-family: 'IBM Plex Mono', monospace;
}
@media (max-width: 480px) { .kpi-tile.breit { grid-column: span 2; } }

/* Sprechblasen-Link auf der Karte */
.pop-link {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 7px;
  font-size: var(--fs-label); font-weight: 600; color: var(--accent-text) !important;
}
/* Schaltfläche in der Sprechblase (Land als bereist markieren) */
.pop-btn {
  display: block; width: 100%; margin-top: 9px; padding: 7px 14px;
  border: none; border-radius: var(--radius-full); cursor: pointer;
  background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600;
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.pop-btn:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); }
.pop-btn:disabled { opacity: .6; cursor: progress; }
.pop-btn.weg { background: var(--fill-quaternary); color: var(--text-2); }
.pop-btn.weg:hover:not(:disabled) { background: var(--danger-bg); color: var(--danger-strong); }
.welt-tip {
  background: var(--glass-bg-strong) !important; color: var(--text) !important;
  border: 0.5px solid var(--glass-border) !important; border-radius: 8px !important;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm) !important; font-size: 12px !important; font-weight: 500;
  padding: 3px 9px !important;
}
.welt-tip::before { display: none !important; }

/* Stop-Karten in der Planung: eigene Höhe je Karte statt gleichgestreckt –
   sonst zieht eine Karte mit Alternativen alle anderen mit in die Länge. */
#plan-karten { align-items: flex-start; }
.plan-karte {
  flex: 0 0 288px; scroll-snap-align: start; position: relative;
  display: flex; flex-direction: column; gap: 8px; padding: 15px 16px 14px;
  border-radius: var(--radius); text-align: left;
  background: var(--glass-bg); border: 0.5px solid var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-highlight);
  transition: transform var(--duration-base) var(--ease-in-out), box-shadow var(--duration-base) var(--ease-in-out);
  animation: fadeInUp var(--duration-base) var(--ease-out) both;
}
.plan-karte.klickbar { cursor: pointer; }
.plan-karte.klickbar:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight); }
.plan-karte .kopf { display: flex; align-items: flex-start; gap: 10px; }
.plan-karte .titel { font-size: 14px; font-weight: 650; letter-spacing: -.2px; line-height: 1.25; }
.plan-karte .adresse { font-size: 11.5px; color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.plan-karte .zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-2); }
.plan-karte .zeile .mono { font-family: 'IBM Plex Mono', monospace; }
.plan-karte .weg { position: absolute; top: 10px; right: 10px; opacity: 0; transition: opacity var(--duration-fast); }
.plan-karte:hover .weg { opacity: 1; }
.plan-karte .alt-reihe { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }

/* Tagesüberschrift im Ablaufplan über alle Tage. Sie bleibt rechts der Linie –
   ragte sie nach links, liefe die Linie mitten durch den Text. */
.zs-tag {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); padding: 4px 0 10px;
}
.zs-tag:not(:first-child) { padding-top: 18px; }

/* ── Zeitstrahl des Tages ───────────────────────────────────────────────── */
.zeitstrahl { position: relative; padding-left: 30px; }
.zeitstrahl::before {
  content: ''; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 1.5px;
  background: linear-gradient(var(--accent), var(--border-light));
}
.zs-punkt { position: relative; padding: 0 0 16px; }
.zs-punkt::before {
  content: ''; position: absolute; left: -25px; top: 15px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--card-bg); border: 2px solid var(--accent);
}
.zs-punkt.vorbei::before { background: var(--accent); }
.zs-punkt.vorbei { opacity: .6; }
.zs-punkt.jetzt::before { box-shadow: 0 0 0 4px var(--accent-tint); }
.zs-punkt:last-child { padding-bottom: 0; }
.zs-karte {
  display: flex; align-items: center; gap: 12px; padding: 12px 15px;
  background: var(--glass-bg); border: 0.5px solid var(--glass-border); border-radius: 14px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-highlight);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.zs-karte:hover { transform: translateX(2px); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-highlight); }
.zs-karte.klickbar { cursor: pointer; }

/* Stationen mit Koordinaten lassen sich ansteuern – das Symbol rechts zeigt
   das an, ohne zusätzlichen Platz zu kosten. */
.zs-karte.navigierbar { cursor: pointer; }
.zs-karte .zs-nav {
  margin-left: auto; flex: 0 0 auto; color: var(--muted); display: flex; align-items: center;
  opacity: .55; transition: opacity var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.zs-karte.navigierbar:hover .zs-nav,
.zs-karte.navigierbar:focus-visible .zs-nav { opacity: 1; color: var(--accent); }
.zs-karte.navigierbar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Zieladresse im Navigationsdialog */
.nav-ziel { display: flex; flex-direction: column; gap: 3px; }
.nav-ziel .nav-titel { font-size: 16px; font-weight: 650; letter-spacing: -0.02em; }
.nav-ziel .nav-adresse { font-size: 13px; color: var(--text-2); line-height: 1.5; }
/* Übernachtungslücke: gestrichelter Rahmen, damit sie als Fehlstelle liest. */
.zs-karte.luecke-karte {
  background: transparent; border: 1px dashed var(--border);
  box-shadow: none; backdrop-filter: none;
}
.zs-karte.luecke-karte:hover { transform: none; }
.zs-punkt.luecke::before { background: var(--card-bg); border-color: var(--border); }
.zs-zeit { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 500;
  color: var(--accent-text); min-width: 46px; flex: 0 0 auto; white-space: nowrap; }
.zs-punkt.vorbei .zs-zeit { color: var(--muted); }
.zs-titel { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.zs-meta { font-size: 11.5px; color: var(--muted); margin-top: 1px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ── Stundenwetter ──────────────────────────────────────────────────────── */
.wetter-reihe { display: flex; gap: 6px; overflow-x: auto; padding-top: 4px; scrollbar-width: none; }
.wetter-reihe::-webkit-scrollbar { display: none; }
.wetter-stunde {
  flex: 0 0 auto; min-width: 54px; text-align: center; padding: 9px 4px;
  border-radius: 13px; background: var(--fill-quaternary);
}
.wetter-stunde .h { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.wetter-stunde .i { color: var(--accent); margin: 4px 0 2px; }
.wetter-stunde .t { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 500; }
.wetter-stunde .r { font-size: 9.5px; color: var(--info); }

/* ── Sonstiges ──────────────────────────────────────────────────────────── */
.chip-row { display:flex; gap:7px; flex-wrap:wrap; }
.tag {
  display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius: var(--radius-full);
  background: var(--fill-quaternary); font-size: var(--fs-label); color: var(--text-2); font-weight: var(--fw-medium);
}
.trenner { height:0.5px; background: var(--separator); margin: 4px 0; border:none; }
.zwei-spalten { display:grid; grid-template-columns: 1.55fr 1fr; gap:20px; align-items:start; }
.info-liste { display:flex; flex-direction:column; }
.info-liste .zeile { display:flex; gap:14px; padding:10px 0; border-bottom:0.5px solid var(--border-light); font-size: var(--fs-body-sm); }
.info-liste .zeile:last-child { border-bottom:none; }
.info-liste .k { color: var(--muted); flex:0 0 40%; font-size: var(--fs-label); }
.info-liste .v { font-weight: var(--fw-medium); flex:1; }
.text-muted { color: var(--muted); }
.text-sm { font-size: var(--fs-label); }
.nowrap { white-space:nowrap; }
.mt-2 { margin-top:8px; } .mt-4 { margin-top:16px; } .mt-6 { margin-top:24px; }
.mb-2 { margin-bottom:8px; } .mb-4 { margin-bottom:16px; }
.flex { display:flex; align-items:center; gap:10px; }
.flex-wrap { flex-wrap:wrap; }
.ml-auto { margin-left:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Mobile Tab-Leiste */
/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .zwei-spalten { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* Auf schmalen Geräten reicht das Symbol – so bleibt Platz für den Seitentitel. */
  .topbar { padding: 8px 14px; gap:8px; }
  .topbar .nav-toggle { padding:0; width:34px; justify-content:center; }
  .topbar .nav-toggle-text { display:none; }
  .page { padding: 18px 16px calc(116px + env(safe-area-inset-bottom)); }
  .card-body { padding: 18px 17px; }
  .chart-box { padding: 18px 17px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap:11px; }
  .kpi-tile { padding:15px 16px; }
  .kpi-tile .kpi-value { font-size:20px; }
  .kpi-tile .kpi-label { font-size:11.5px; margin-bottom:7px; }
  .kpi-tile::after { top:14px; right:14px; width:8px; height:8px; }
  .karte.welt { height: 330px; }
  .karte.detail { height: 400px; }
  .hero { min-height: 210px; border-radius: var(--radius); }
  .hero-hoch { min-height: 260px; }
  .hero-inner { padding: 18px 18px 18px; }
  .hero-kpi { min-width: 78px; padding: 8px 11px; }
  .hero-kpi .v { font-size: 15px; }
  .karte-overlay { padding: 10px 12px; gap: 8px; }
  .glass-kachel { min-width: 104px; padding: 8px 11px; border-radius: 13px; }
  .glass-kachel .v { font-size: 13px; }
  .stop-karte { min-width: 176px; }
  .karte-buehne .leaflet-top.leaflet-left { margin-top: 62px; }
  .plan-karte { flex-basis: min(80vw, 272px); }
  .tag-leiste { gap: 7px; }
  .slide-card { flex-basis: 258px; }
  /* Kachelreihen fluchten mit den großen Boxen, statt bis an den Rand zu laufen. */
  .slideover { padding-left:0; padding-right:0; margin-left:0; margin-right:0; }
  .modal { max-width:none; max-height: calc(100vh - 24px); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .modal-backdrop { padding:0; align-items:flex-end; }
  .modal-backdrop.offen .modal { transform:none; }
  .modal { transform: translateY(100%); }
  .modal-foot { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex:1; }
  .toast-wrap { bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* Auf dem Handy spannt die Leiste über die volle Breite. */
  .tabbar { width: calc(100vw - 24px); bottom: max(12px, env(safe-area-inset-bottom)); }
  .tabbar a { font-size:10px; padding:7px 2px; }
  .data-table { font-size:12.5px; }
  .data-table th, .data-table td { padding:9px 11px; }
  .page-heading { font-size: 1.45rem; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .slide-card { flex-basis: min(78vw, 270px); }
  .form-grid { grid-template-columns: 1fr; }
}

/* ── Fingerbedienung: 44 px Mindestfläche ─────────────────────────────────
   Auf Zeigegeräten bleiben die kompakten Maße; nur wo mit dem Daumen getippt
   wird, wachsen Knöpfe und Umschalter auf die von Apple empfohlene Fläche.
   Steht bewusst hinter allen Bausteinen – sonst gewönne deren Grundmaß. */
@media (pointer: coarse) {
  .btn      { min-height: 44px; padding: 11px 22px; }
  .btn-sm   { min-height: 40px; padding: 10px 16px; }
  .icon-btn { width: 44px; height: 44px; border-radius: 12px; }
  .nav-toggle { height: 40px; }
  .nav-toggle.icon-only { width: 40px; }
  .view-toggle { padding: 3px; }
  .view-toggle button, .view-toggle a { padding: 11px 16px; }
  .check-row input[type=checkbox], .check-row input[type=radio] { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .bg-aurora { animation:none; filter: blur(20px); }
}

/* ── Sparbetrieb für schwache Geräte ──────────────────────────────────────
   Gesetzt vom Kopf-Skript in includes/layout.php, wenn das Gerät wenig
   Arbeitsspeicher oder wenige Kerne meldet (typisch: Android-Mittelklasse,
   einige Jahre alt). Leistungsfähige Geräte sehen davon nichts.

   Die beiden teuersten Stellen der Oberfläche sind:
     1. .bg-aurora – blur(44px) über eine Fläche größer als der Bildschirm,
        dauerhaft animiert. Der Weichzeichner muss dabei immer wieder neu
        berechnet werden; das hält den Grafikchip ununterbrochen beschäftigt.
     2. .tabbar-effect – der SVG-Filter (feTurbulence + feDisplacementMap) auf
        einem fest eingeblendeten Element. Verzerrungsfilter zählen zum
        Langsamsten, was mobile Grafikchips zu tun bekommen.

   Beides wird hier zurückgenommen, ohne das Erscheinungsbild aufzugeben: Die
   Farbverläufe der Aurora bleiben (sie sind ohnehin weich), nur der zusätzliche
   Weichzeichner wird kleiner und die Dauerbewegung entfällt. */
:root[data-spar="1"] .bg-aurora {
  filter: blur(16px);
  animation: none;
}
:root[data-spar="1"] .tabbar-effect { filter: none; }

/* Die geschichteten Glanzkanten der Navigationsleiste kosten je Bild einen
   eigenen Zeichenschritt – auf schwachen Geräten reicht die einfache Kante. */
:root[data-spar="1"] .tabbar-shine {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
@media print {
  .topbar, .tabbar, .bg-aurora { display:none !important; }
  
  .card, .chart-box, .kpi-tile { box-shadow:none; border:0.5px solid #ccc; backdrop-filter:none; }
}

/* ── Unterkunfts-Stapel: mehrere Vorschläge je Anreisetag ───────────────── */
.stapel-block { margin-bottom: 26px; }
.stapel-block:last-child { margin-bottom: 0; }
.stapel-kopf {
  display: flex; align-items: center; gap: 9px; margin-bottom: 11px; flex-wrap: wrap;
}
.stapel-kopf .k {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
/* Waagerecht wischbar; auf dem Desktop stehen die Vorschläge nebeneinander. */
.stapel {
  display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 10px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.stapel::-webkit-scrollbar { display: none; }
.stapel > .plan-karte { scroll-snap-align: center; }
.plan-karte.gebucht { border-color: var(--accent); box-shadow: var(--shadow), 0 0 0 1.5px var(--accent); }
.plan-karte.archiviert { opacity: .55; }
.plan-karte.archiviert:hover { opacity: 1; }

/* Punkte als Positionsanzeige des Stapels */
.stapel-punkte { display: flex; gap: 6px; justify-content: center; padding-top: 2px; }
.stapel-punkte span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--border);
  transition: background var(--duration-fast) var(--ease-out), width var(--duration-fast) var(--ease-out);
}
.stapel-punkte span.da { background: var(--accent); width: 16px; border-radius: 99px; }

@media (max-width: 900px) {
  /* Auf dem Handy genau eine Karte im Blick – Wischen blättert weiter. */
  .stapel > .plan-karte { flex-basis: min(84vw, 300px); }
}

/* ── Kuration: Chat ─────────────────────────────────────────────────────── */
.chat { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.chat-verlauf {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 380px; overflow-y: auto; padding: 4px;
}
.chat-nachricht { display: flex; }
.chat-nachricht.eigen { justify-content: flex-end; }
.chat-bubble {
  max-width: 78%; padding: 9px 13px; border-radius: 15px;
  background: var(--fill-quaternary); border: 0.5px solid var(--glass-border);
}
.chat-nachricht.eigen .chat-bubble { background: var(--accent); color: #fff; }
.chat-text { font-size: 13.5px; line-height: 1.45; word-break: break-word; }
.chat-meta { font-size: 10.5px; opacity: 0.7; margin-top: 3px; }
.chat-nachricht.eigen .chat-meta { color: rgba(255,255,255,0.85); }
.chat-form { display: flex; gap: 8px; align-items: flex-end; }
.chat-form textarea { resize: none; min-height: 44px; max-height: 140px; line-height: 1.4; padding: 12px 15px; }
.chat-form .btn { flex: 0 0 auto; min-height: 44px; width: 44px; padding: 0; }

/* ── Kuration: Status-Stepper ───────────────────────────────────────────── */
.kur-stepper { display: flex; gap: 4px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.kur-stepper::-webkit-scrollbar { display: none; }
.kur-step {
  flex: 1 0 auto; min-width: 92px; display: flex; flex-direction: column; align-items: center;
  gap: 7px; position: relative; padding-top: 4px;
}
.kur-step .pkt {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--fill-quaternary); color: var(--muted);
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600; z-index: 1;
}
.kur-step .lbl { font-size: 11px; color: var(--muted); text-align: center; font-weight: 500; }
/* Verbindungslinie zum nächsten Schritt */
.kur-step::after {
  content: ''; position: absolute; top: 18px; left: 50%; width: 100%; height: 2px;
  background: var(--border-light); z-index: 0;
}
.kur-step:last-child::after { display: none; }
.kur-step.fertig .pkt { background: var(--accent); color: #fff; }
.kur-step.fertig::after { background: var(--accent); }
.kur-step.fertig .lbl { color: var(--text-2); }
.kur-step.aktiv .pkt { background: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-tint); }
.kur-step.aktiv .lbl { color: var(--text); font-weight: 650; }

/* ── Kuration: Werbebanner "Reise anfragen" ─────────────────────────────── */
.kur-banner {
  display: flex; align-items: center; gap: 16px; margin-bottom: 22px;
  padding: 16px 20px; border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--accent-tint), transparent 70%), var(--glass-bg);
  border: 0.5px solid var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-highlight);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.kur-banner:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight); }
.kur-banner-icon {
  width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
}
.kur-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kur-banner-text .t { font-size: 14.5px; font-weight: 650; letter-spacing: -.2px; }
.kur-banner-text .s { font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) {
  .kur-banner { flex-wrap: wrap; }
  .kur-banner-text .s { display: none; }
}

/* ── Reisebilder-Galerie ─────────────────────────────────────────────────── */
.bilder-reihe {
  display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 12px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.bild-kachel { position: relative; flex: 0 0 auto; scroll-snap-align: start; }
.bild-kachel img {
  width: 172px; height: 172px; object-fit: cover; display: block; cursor: zoom-in;
  border-radius: var(--radius); border: 0.5px solid var(--glass-border);
  background: var(--fill-quaternary);
  transition: transform var(--duration-fast) var(--ease-out);
}
.bild-kachel img:hover { transform: scale(1.02); }
.bild-weg { position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); }
.bild-kachel:hover .bild-weg, .bild-weg:focus-within { opacity: 1; }
.bild-weg .icon-btn { background: rgba(0,0,0,0.55); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@media (max-width: 640px) { .bild-kachel img { width: 144px; height: 144px; } }

/* ── Lightbox ─────────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.lb-btn {
  position: absolute; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1;
  background: rgba(255,255,255,0.14); color: #fff; border: 0.5px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lb-btn:hover { background: rgba(255,255,255,0.28); }
.lb-schliessen { top: 20px; right: 20px; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) { .lb-prev { left: 8px; } .lb-next { right: 8px; } }

/* ── Freunde ─────────────────────────────────────────────────────────────── */
.freund-zeile { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 0.5px solid var(--separator); }
.freund-zeile:last-child { border-bottom: 0; }
.freund-zeile .nm { font-weight: 600; font-size: 14px; }
.freund-zeile .ma { font-size: 12px; color: var(--muted); }
.freund-zeile .avatar { width: 60px; height: 60px; font-size: 14px; flex: 0 0 auto; }

/* Ein-/Ausschalter mit Erklärzeile darunter – für die Benachrichtigungen. */
.schalter-zeile {
  display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; cursor: pointer;
  border-bottom: 0.5px solid var(--separator);
}
.schalter-zeile:last-of-type { border-bottom: 0; }
.schalter-zeile input[type=checkbox] {
  width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto;
  accent-color: var(--accent); cursor: pointer;
}
.schalter-zeile .nm { display: block; font-weight: 500; font-size: 13.5px; }
.schalter-zeile .ma { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.5; }

/* ── Avatar ──────────────────────────────────────────────────────────────── */
.avatar {
  width: 60px; height: 60px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-tint); color: var(--accent);
  font-weight: 650; font-size: 15px; letter-spacing: .2px;
}
.avatar.lg { width: 80px; height: 80px; font-size: 22px; }
.avatar.sm { width: 30px; height: 30px; font-size: 12px; }
img.avatar { object-fit: cover; }
/* Profilbild links neben der Begrüßung: linksbündig mit den Kacheln darunter,
   Ober- und Unterkante fluchten mit dem Text-Block (Name + Zeile darunter). */
.kopf-mit-bild { display: flex; align-items: center; gap: 14px; }
.kopf-mit-bild > div { min-width: 0; }
.kopf-mit-bild > .btn, .kopf-mit-bild .ml-auto { align-self: center; }
/* Kreis etwa so hoch wie der zweizeilige Text daneben – bündig, nicht größer. */
.avatar.kopf-avatar { width: 150px; height: 150px; font-size: 18px; }

/* Gleich hohe Karten nebeneinander – oben und unten bündig. Mit .fuell füllt
   die letzte Karte jeder Spalte die Resthöhe, sodass beide Spalten unten abschließen. */
.zwei-spalten.gleich { align-items: stretch; }
.zwei-spalten.gleich > * { height: 100%; }
.zwei-spalten.gleich.fuell > .stack > :last-child { flex: 1 0 auto; }

/* KPI-Kachel als Link (z. B. „Was ist heute geplant?"). */
.kpi-tile.kpi-link {
  text-decoration: none; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.kpi-tile.kpi-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight); }
.kpi-tile.kpi-link .kpi-sub { color: var(--accent-text); }

/* Planer-Zeile unter einer Reisekarte – eigenes, klickbares Feld zum Profil. */
.slide-card-wrap { display: flex; flex-direction: column; gap: 8px; animation: fadeInUp var(--duration-slow) var(--ease-spring) backwards; }
.reise-owner {
  display: flex; align-items: center; gap: 9px; padding: 7px 11px; border-radius: var(--radius);
  background: var(--glass-bg); border: 0.5px solid var(--glass-border);
  text-decoration: none; color: var(--text); font-size: 12.5px;
  transition: background var(--duration-fast) var(--ease-out);
}
.reise-owner:hover { background: var(--glass-bg-strong); }
.reise-owner .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reise-owner .ml-auto { color: var(--muted); }

/* Planer-Chip auf der Bühne der Reiseseite – wer die Reise angelegt hat. */
.hero-planer {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 4px 13px 4px 4px; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.16); border: 0.5px solid rgba(255,255,255,0.32);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; text-decoration: none; font-size: 12.5px; font-weight: 600;
  transition: background var(--duration-fast) var(--ease-out);
}
.hero-planer:hover { background: rgba(255,255,255,0.28); }
.hero-planer .avatar { width: 26px; height: 26px; font-size: 11px; }

/* „Geplant von" – Chip mit Profilbild, verlinkt auf das Nutzerprofil. */
.planer-chip {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text);
  padding: 5px 13px 5px 5px; border-radius: var(--radius-full);
  border: 0.5px solid var(--glass-border); background: var(--glass-bg);
}
.planer-chip:hover { background: var(--glass-bg-strong); }
.planer-chip .nm { font-size: 13px; font-weight: 600; line-height: 1.1; }
.planer-chip .rl { font-size: 11px; color: var(--muted); }

/* KPI-Kachel als Verweis (z. B. „Was ist heute geplant?"). */
a.kpi-tile { text-decoration: none; color: inherit; justify-content: center; }
a.kpi-tile .kpi-value { font-family: inherit; font-size: 16.5px; font-weight: 650; letter-spacing: -.2px; }
a.kpi-tile .kpi-arrow { margin-top: 8px; color: var(--accent-text); font-size: var(--fs-label); font-weight: 600; }

/* ── Freundesanfragen-Badge am Profil-Tab ────────────────────────────────── */
.tab-badge {
  position: absolute; top: 4px; right: 16px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  background: var(--danger, #ff3b30); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABENTEUER-MODUS: Geschichteter Dschungel, alte GPS-Kacheln, elegante UI
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-theme="abenteuer"] {
  /* ── 1. FARBEN: Tiefer Regenwald ── */
  --page-bg:       #0e140e;

  /* Das dunkle Plastik der GPS-Geräte */
  --card-bg:       #1a211a;
  --card-glass:    #1a211a;

  /* Glas-Effekte deaktivieren, stattdessen opakes Gehäuse */
  --glass-bg:        #1a211a;
  --glass-bg-strong: #222b22;
  --glass-bg-sheer:  transparent;
  --glass-border:    #0a0f0a;
  --glass-highlight: rgba(255, 255, 255, 0.02);
  --glass-blur:      none;
  --glass-blur-lg:   none;

  /* Die elegante Schrift und Buttons aus Version 1 */
  --accent:        #e67e22;
  --accent-hover:  #d35400;
  --accent-tint:   rgba(230, 126, 34, 0.15);
  --accent-text:   #f0913c;
  --text:          #e2d9c6;
  --text-2:        #b5b0a1;
  --muted:         #8f8b80;

  /* Dunkle Fugen für das Gehäuse */
  --border:        #0a0f0a;
  --border-light:  #141a14;
  --separator:     #141a14;
  --hover-fill:    rgba(230, 126, 34, 0.08);
  --fill-quaternary: #141a14;
  --segment-active: #3f4741;

  /* Eingabefelder: eingelassenes, dunkles Display im Gerätegehäuse */
  --feld-bg:       #0d120c;
  --feld-bg-focus: #101710;
  --feld-border:   #060a06;

  /* Aurora ausblenden */
  --aurora-1: transparent; --aurora-2: transparent;
  --aurora-3: transparent; --aurora-4: transparent;
}

/* Eingabefelder im Abenteuer-Thema: kein Glas, sondern ein in das Gehäuse
   eingelassenes GPS-Display – gepunktetes Raster, harte Fuge, innen liegender
   Schatten. Der schwebende Titel bleibt derselbe wie überall. */
:root[data-theme="abenteuer"] .form-control {
  border-width: 2px;
  background-image: radial-gradient(rgba(226,217,198,0.045) 1px, transparent 1px);
  background-size: 4px 4px;
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.75);
}
:root[data-theme="abenteuer"] select.form-control {
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8b80' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),
    radial-gradient(rgba(226,217,198,0.045) 1px, transparent 1px);
  background-repeat: no-repeat, repeat;
  background-position: right 13px center, 0 0;
  background-size: 16px, 4px 4px;
}
:root[data-theme="abenteuer"] .form-control:focus {
  border-color: var(--accent);
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.75), 0 0 0 3px var(--accent-tint);
}

/* ── 2. ALTE GPS-OPTIK FÜR KACHELN (Plastik & dicker Rahmen) ── */
:root[data-theme="abenteuer"] .card,
:root[data-theme="abenteuer"] .chart-box,
:root[data-theme="abenteuer"] .kpi-tile,
:root[data-theme="abenteuer"] .plan-karte,
:root[data-theme="abenteuer"] .slide-card,
:root[data-theme="abenteuer"] .modal {
  background-color: var(--card-bg);
  border: 3px solid #050805 !important;
  border-radius: 12px !important;
  background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 4px 4px;
  box-shadow: inset 1px 1px 2px rgba(255,255,255,0.05), 6px 10px 15px rgba(0,0,0,0.8) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── 3. RICHTIG VIELE ECHTE BLÄTTER (KLEIN, SCHARF & 32 STÜCK) ── */

/* EBENE 1: Der tiefere Hintergrund (16 kleine Blätter) */
:root[data-theme="abenteuer"] body::before {
  content: '';
  position: fixed;
  inset: -50px;
  z-index: -2;
  pointer-events: none;

  background-image:
    url('blatt.png'), url('blatt.png'),
    url('blatt.png'), url('blatt.png'),
    url('blatt.png'), url('blatt.png'),
    url('blatt.png'), url('blatt.png'),
    url('blatt.png'), url('blatt.png'),
    url('blatt.png'), url('blatt.png'),
    url('blatt.png'), url('blatt.png'),
    url('blatt.png'), url('blatt.png');

  background-position:
    /* Linker Rand */
    top -2% left -2%, top 15% left -4%, top 35% left -1%, top 55% left -3%, top 75% left -5%, bottom -2% left 2%,
    /* Rechter Rand */
    top -2% right -2%, top 15% right -4%, top 35% right -1%, top 55% right -3%, top 80% right -5%, bottom -2% right 2%,
    /* Oben & Unten Mitte */
    top -5% left 25%, top -4% right 30%, bottom -5% left 30%, bottom -4% right 25%;

  background-size:
    /* Viel kleiner (zwischen 9% und 15% der Bildschirmbreite), damit das 564px Bild knackscharf bleibt */
    12vw, 10vw, 14vw, 9vw, 13vw, 11vw,
    14vw, 9vw, 12vw, 10vw, 15vw, 11vw,
    10vw, 13vw, 14vw, 12vw;

  background-repeat: no-repeat;
  transform: rotate(-12deg);

  /* Helligkeit deutlich angehoben (45%) und Unschärfe auf 4px reduziert */
  filter: brightness(0.38) blur(5.5px) drop-shadow(0 10px 15px rgba(0,0,0,0.8));
  animation: leavesBg1 1.5s ease-out both;
}

/* EBENE 2: Etwas weiter vorne (16 weitere Blätter) */
:root[data-theme="abenteuer"] body::after {
  content: '';
  position: fixed;
  inset: -50px;
  z-index: -1;
  pointer-events: none;

  background-image:
    url('blatt.png'), url('blatt.png'),
    url('blatt.png'), url('blatt.png'),
    url('blatt.png'), url('blatt.png'),
    url('blatt.png'), url('blatt.png'),
    url('blatt.png'), url('blatt.png'),
    url('blatt.png'), url('blatt.png'),
    url('blatt.png'), url('blatt.png'),
    url('blatt.png'), url('blatt.png');

  background-position:
    /* Füllt die Lücken der ersten Ebene auf */
    top 5% left 2%, top 25% left -2%, top 45% left 1%, top 65% left -1%, top 85% left 3%, bottom 10% left -2%,
    top 8% right 1%, top 28% right -2%, top 48% right 2%, top 68% right -1%, top 90% right 3%, bottom 12% right -3%,
    top -2% left 45%, top -3% right 45%, bottom -2% left 40%, bottom -1% right 40%;

  background-size:
    11vw, 13vw, 10vw, 14vw, 9vw, 12vw,
    10vw, 14vw, 11vw, 13vw, 9vw, 15vw,
    12vw, 11vw, 10vw, 13vw;

  background-repeat: no-repeat;
  transform: rotate(15deg);

  /* Helligkeit hoch auf 65% (sehr gut sichtbar) und fast scharf (1.5px Blur) */
  filter: brightness(0.4) blur(5.5px) drop-shadow(0 8px 12px rgba(0,0,0,0.9));
  animation: leavesBg2 1.8s ease-out both;
}

@keyframes leavesBg1 {
  from { opacity: 0; transform: scale(1.05) rotate(-12deg); }
  to { opacity: 1; transform: scale(1) rotate(-12deg); }
}
@keyframes leavesBg2 {
  from { opacity: 0; transform: scale(1.05) rotate(15deg); }
  to { opacity: 1; transform: scale(1) rotate(15deg); }
}