/* IBM Plex Sans wird lokal geladen (vendor/plex/plex.css, eingebunden in index.html) — kein CDN. */

:root {
  /* Signalisiert dem Browser, dass diese App Hell/Dunkel selbst steuert (per data-theme) —
     ohne das kann Chromes "Web-Inhalte automatisch abdunkeln" trotz korrektem Light-CSS
     einen Repaint-Effekt erzwingen, der computed styles ignoriert (nicht per JS prüfbar,
     nur visuell sichtbar). [data-theme]-Blöcke unten überschreiben dies pro Theme. */
  color-scheme: dark;
  /* Deep Maritime Navy Palette */
  --bg-color: #020817;
  --bg-secondary: #050f1f;
  --bg-card: #0a1929;
  --bg-card-hover: #0d2137;
  --sidebar-bg: rgba(5, 15, 31, 0.85);
  --panel-bg: rgba(10, 25, 41, 0.55);
  --panel-border: rgba(255, 255, 255, 0.07);

  /* Accent Palette — identical to Zeiterfassung */
  --primary: #2dd4bf;
  --primary-hover: #14b8a6;
  --accent: #fbbf24;
  --accent-rose: #fb7185;
  --accent-green: #4ade80;
  --accent-purple: #a78bfa;

  /* Text */
  --text-main: #f0f9ff;
  --text-secondary: #94a3b8;
  --text-muted: #94a3b8;
  --text-dim: #748498;   /* WCAG AA: 4.6:1 auf Karten-BG (war #475569 = 2.3:1) */

  /* Semantic */
  --success: #4ade80;
  --danger: #f43f5e;
  --warning: #fbbf24;

  /* Glass & Blur */
  --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  --glass-blur: blur(12px);

  /* Border accents */
  --border-teal: rgba(45, 212, 191, 0.3);
  --border-teal-dim: rgba(45, 212, 191, 0.12);

  /* Table / Input */
  --input-bg: rgba(255, 255, 255, 0.05);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-color: #f0f9ff;
  --field-bg: rgba(0, 0, 0, 0.3);   /* inline Feld-/Panel-Hintergrund (dunkel) */
  /* Text auf gefüllten Akzent-Knöpfen. Muss mit dem Thema kippen, denn die
     Akzente kippen mit: im Dunkelmodus sind sie HELL (--success #4ade80),
     da braucht es dunkle Schrift — gemessen 10,7:1 statt 1,7:1 mit Weiß.
     Der grüne „Speichern"-Knopf war deshalb auch im Dunkelmodus kaum lesbar. */
  --on-accent: #0b1220;
  /* Text auf Flächen, die in BEIDEN Themen dunkel bleiben (Toast, Foto-Kacheln).
     Die dürfen nicht --text-main folgen: das kippt im Hellmodus auf Fast-Schwarz
     und der Hinweis stand dann dunkel auf dunkel (Meldung #60). */
  --on-inverse: #f0f9ff;
  --table-header-bg: rgba(0, 0, 0, 0.4);
  --table-row-alt: rgba(255, 255, 255, 0.025);
  --table-row-hover: rgba(45, 212, 191, 0.05);
  --table-border: rgba(255, 255, 255, 0.055);
  --detail-view-bg: #050f1f;
  /* Der Seitengrund ist ein Verlauf, kein Flächenton. Er MUSS über Tokens
     laufen: stand er fest im body-Regelsatz, deckte der dunkle Verlauf im
     Hellmodus die helle --bg-color vollständig zu — die App saß hell auf
     nachtblau (Meldung #60). */
  --bg-glow: rgba(45, 212, 191, 0.04);
  --bg-grad-1: #0a1929;
  --bg-grad-2: #020817;
  --accent-blue: #60a5fa;   /* Rollenfarbe Verwaltung (Hub-Eyebrow, Navgroup) */
  --on-lavender: #ddd6fe;   /* Text auf dem lavendelfarbenen „Was ist neu"-Chip */
  /* Drei Pastelltöne, die als SCHRIFT auf gleichfarbigen Chips sitzen. Im
     Dunkelmodus behalten sie ihren bisherigen Wert — im Hellmodus wären
     Pastell auf Pastell unlesbar. */
  --accent-lavender: #c4b5fd;
  --accent-emerald: #10b981;
  --accent-sky: #38bdf8;
  /* Bernstein als SCHRIFT. --warning selbst kippt nicht zwischen den Themen
     (#fbbf24 in beiden) und kommt auf hellem Grund auf 1,48:1. */
  --accent-amber: #fbbf24;

  /* Als RGB-Tripel, weil der Kalender sie mit rund zwanzig verschiedenen
     Deckkräften benutzt (Linien, Hover, Chips). Eine fertige Farbe je Stufe
     wären zwanzig Tokens; so bleibt es bei dreien.
     Verwendung: rgba(var(--ink-rgb), 0.06) — nie der feste Wert.

     1.27.1: 62 Stellen standen noch auf festem `rgba(255,255,255,…)`. Auf
     dunklem Grund ist das ein Aufhellen und sieht richtig aus; im Hellmodus ist
     es Weiß auf Weiß und damit **unsichtbar**. Betroffen war vor allem die
     Rückmeldung: `.nav-item:hover`, `.stellar-table tbody tr:hover`,
     `.settings-tab:hover`, die Zebrastreifen, die Scrollbalken und die
     Ladeanimation — im Hellmodus zeigte das Programm nicht, worauf man zeigt.

     Bewusst NICHT umgestellt bleiben Flächen, die in beiden Themen dunkel sind:
     der Toast, das Login-Overlay, die Kategorie-Kacheln (Foto darunter) und der
     SVG-Text des Tischplans (Schiffsrumpf darunter). */
  --ink-rgb: 255, 255, 255;          /* Aufhellung auf dunklem Grund */
  --lavender-rgb: 167, 139, 250;
  --blue-rgb: 59, 130, 246;
  --cal-sunken: rgba(0, 0, 0, 0.16); /* zurückgesetzte Fläche (leere Zelle) */
}

/* ─── Light Mode ─── überschreibt jedes Farb-Token aus :root ─── */
[data-theme="light"] {
  color-scheme: light;
  --bg-color: #eef2f7;
  --bg-secondary: #e2e8f0;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --sidebar-bg: rgba(255, 255, 255, 0.9);
  --panel-bg: rgba(255, 255, 255, 0.75);
  --panel-border: rgba(15, 23, 42, 0.1);

  --text-main: #0f172a;
  --text-secondary: #475569;
  --text-muted: #5c6b7e;   /* WCAG AA auch auf hellem Seiten-BG (4.8:1; war #64748b = 4.2:1) */
  --text-dim: #6a7686;   /* WCAG AA: 4.6:1 auf Weiß (war #94a3b8 = 2.6:1) */

  --glass-shadow: 0 4px 24px rgba(15, 23, 42, 0.1);

  --input-bg: #ffffff;
  --input-border: rgba(15, 23, 42, 0.15);
  --input-color: #0f172a;
  --field-bg: #ffffff;
  --table-header-bg: rgba(15, 23, 42, 0.05);
  --table-row-alt: rgba(15, 23, 42, 0.025);
  --table-row-hover: rgba(45, 212, 191, 0.1);
  --table-border: rgba(15, 23, 42, 0.08);
  --detail-view-bg: #f1f5f9;
  --bg-glow: rgba(13, 148, 136, 0.05);
  --bg-grad-1: #f8fafc;
  --bg-grad-2: #e2e8f0;
  --accent-blue: #2563eb;
  --on-lavender: #5b21b6;
  --accent-lavender: #6d28d9;
  --accent-emerald: #047857;
  --accent-sky: #0369a1;
  --accent-amber: #92400e;

  /* Kippt mit: dieselbe Deckkraft, aber dunkle Tinte auf hellem Grund.
     Die Akzent-Tripel folgen den Akzenten oben, sonst säßen Pastellflächen
     unter dunkler Schrift. */
  --ink-rgb: 15, 23, 42;
  --lavender-rgb: 109, 40, 217;
  --blue-rgb: 37, 99, 235;
  --cal-sunken: rgba(15, 23, 42, 0.045);
}

/* Light-Mode-Fixups für häufige inline-dunkle Stellen (Formularfelder) */
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .form-control {
  color: var(--text-main) !important;
  background-color: #ffffff !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: var(--text-dim); }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-main);
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, var(--bg-glow), transparent),
    radial-gradient(ellipse at top, var(--bg-grad-1) 0%, var(--bg-grad-2) 65%);
}

.app-container {
  display: flex;
  height: 100vh;
  width: 100vw;
}

/* ── Sidebar ── */
.sidebar {
  width: 260px;
  background: var(--sidebar-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(var(--ink-rgb), 0.05);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0.75rem;
  z-index: 10;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(var(--ink-rgb), 0.08); border-radius: 3px; }

.logo-container {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 2rem;
  padding: 0.5rem 0.75rem 1rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.05);
}

.logo-container h1 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--text-main);
}

.logo-container span {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.875rem;
  background: transparent;
  border: none;
  border-radius: 0.625rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
  width: 100%;
  position: relative;
  letter-spacing: 0.01em;
}

.nav-item i {
  font-size: 1rem;
  width: 20px;
  text-align: center;
  transition: color 0.18s ease;
  flex-shrink: 0;
}

.nav-item:hover {
  background: rgba(var(--ink-rgb), 0.05);
  color: var(--text-main);
  transform: translateX(2px);
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(45,212,191,0.15), rgba(45,212,191,0.04));
  color: var(--primary);
  border-left: 2px solid var(--primary);
  padding-left: calc(0.875rem - 2px);
  font-weight: 600;
}
.nav-item.active i { color: var(--primary); }
.nav-item.active::after {
  content: '';
  position: absolute;
  right: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.6;
  box-shadow: 0 0 6px var(--primary);
}

.sidebar-footer {
  margin-top: auto;
}

.main-content {
  flex: 1;
  padding: 2rem 2.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Scrollbar for main content */
.main-content::-webkit-scrollbar { width: 5px; }
.main-content::-webkit-scrollbar-track { background: transparent; }
.main-content::-webkit-scrollbar-thumb { background: rgba(var(--ink-rgb), 0.08); border-radius: 3px; }
.main-content::-webkit-scrollbar-thumb:hover { background: rgba(var(--ink-rgb), 0.14); }

/* Offline Banner */
.offline-banner {
  display: none;
  background: linear-gradient(90deg, #b91c1c, #991b1b);
  color: white;
  padding: 1rem 2rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  font-weight: 600;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 4px 15px rgba(185, 28, 28, 0.4);
  animation: slideDown 0.4s ease forwards;
}

.offline-banner.active {
  display: flex;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.view {
  display: none;
  /* Ohne `forwards`: stehen gebliebenes translateY(0) machte jede Seite zum
     Bezugsrahmen für alles mit position:fixed darin — Schubladen und Menüs
     klebten an der Seite statt am Fenster (Prüfung 26.9.2026). */
  animation: viewFadeIn 0.3s ease;
}

.view.active {
  display: block;
}

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.view-header {
  margin-bottom: 2.5rem;
}

.view-header h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  letter-spacing: -0.5px;
}

.view-header p {
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* Bento Grid (Dashboard) acting like a Flow-Layout QScrollArea */
.bento-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: flex-start;
  width: 100%;
}

.bento-grid .bento-card {
  flex: 1 1 300px;
  max-width: calc(50% - 0.75rem);
}

@media (max-width: 1000px) {
  .bento-grid .bento-card {
    max-width: 100%;
  }
}

.bento-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 280px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.bento-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.card-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s ease;
  z-index: 1;
}

.bento-card:hover .card-bg {
  transform: scale(1.1);
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(13, 15, 20, 0.95) 0%, rgba(13, 15, 20, 0.4) 100%);
  z-index: 2;
}

.card-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Phase 20 Tour Types Styling overrides */
.tile-breakfast .card-bg {
  background-color: #f59e0b !important;
  /* Warm, helles Gelb/Orange */
}

.tile-breakfast .card-icon {
  color: #f59e0b !important;
}

.tile-party .card-bg {
  background-color: #db2777 !important;
  /* Magenta/Lila */
}

.tile-party .card-icon {
  color: #db2777 !important;
}

.tile-kombi .card-bg {
  background-color: #06b6d4 !important;
  /* Türkis/Blau */
}

.tile-kombi .card-icon {
  color: #06b6d4 !important;
}

.card-icon {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(var(--ink-rgb), 0.1);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--text-main);
}

.card-content h3 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.card-content p {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.action-btn {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  color: #fff;
  border: none;
  padding: 0.7rem 1.1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  box-shadow: 0 2px 12px rgba(20,184,166,0.25);
}

.action-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2dd4bf, #14b8a6);
  box-shadow: 0 4px 20px rgba(20,184,166,0.45);
  transform: translateY(-1px);
}
.action-btn:active:not(:disabled) { transform: translateY(0); }

.action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* .action-btn bringt Weiß und einen Teal-Schein für seinen Verlauf mit. An
   31 Stellen wird der Hintergrund inline auf eine neutrale Fläche gestellt —
   das Weiß und der Schein blieben dabei stehen. Im Dunkelmodus fiel das nicht
   auf, im Hellmodus war der Knopf unsichtbar (Meldung #60). Eine Regel hier
   statt 31 Fundstellen; wer die Farbe inline setzt, gewinnt weiterhin. */
.action-btn[style*="background:transparent"],
.action-btn[style*="background: transparent"],
.action-btn[style*="--panel-bg"],
.action-btn[style*="--field-bg"],
.action-btn[style*="--bg-card"],
.action-btn[style*="--bg-secondary"],
.action-btn[style*="--input-bg"] {
  color: var(--text-main);
  box-shadow: none;
}

/* Dynamic Tile Badges */
.status-badge {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  background: var(--success);
  color: white;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  z-index: 4;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  display: none;
  /* Initially hidden until checked */
}

.status-badge.has-unpaid {
  display: block;
  background: var(--danger);
  animation: pulse 2s infinite;
}

.status-badge.locked {
  display: block;
  background: #f59e0b;
  /* warning orange */
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* Glass Panels */
.glass-panel {
  background: var(--panel-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--panel-border);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: var(--glass-shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.glass-panel:hover {
  border-color: var(--border-teal);
  box-shadow: 0 0 0 1px var(--border-teal), 0 4px 24px rgba(45, 212, 191, 0.08);
}

/* ═══════════════════════════════════════════════════════════
   FLACHE OBERFLÄCHEN — Hairline statt Glass/Blur/Glow.
   Rollout des Hub-Redesigns (/impeccable critique) auf weitere Views: kein
   backdrop-filter, kein Box-Shadow-Glow — nur Rahmen + ruhiger Hover.
   ═══════════════════════════════════════════════════════════ */
.flat-panel {
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: 1rem;
  padding: 2rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.flat-panel:hover { border-color: var(--primary); background: rgba(45,212,191,0.03); }

/* Zusammenfassungs-Kennzahlen als eine Lesezeile statt gleich großer Kacheln —
   gleiches Prinzip wie .hub-kpi-line, wiederverwendbar außerhalb des Hubs. */
.stat-line {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.8rem;
  padding: 0.9rem 0; margin-bottom: 1.5rem;
  border-top: 1px solid var(--panel-border); border-bottom: 1px solid var(--panel-border);
  font-size: 0.88rem; color: var(--text-muted);
}
.stat-line > span { display: flex; align-items: center; gap: 0.5rem; }
.stat-line i { color: var(--text-muted); font-size: 0.85rem; }
.stat-line .stat-val {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-main); font-size: 1.05rem;
}

.d-flex-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.glass-panel h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Ticket Buttons */
.ticket-buttons {
  display: flex;
  gap: 1rem;
  margin: 1.5rem 0;
}

.primary-btn {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  color: #ffffff;
  border: none;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  transition: all 0.2s;
  box-shadow: 0 2px 12px rgba(20, 184, 166, 0.3);
}

.primary-btn:hover {
  background: linear-gradient(135deg, #2dd4bf, #14b8a6);
  color: white;
  box-shadow: 0 4px 20px rgba(20, 184, 166, 0.5);
  transform: translateY(-1px);
}

/* Phase 11: Table View (CRM) */
.stellar-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 0.9rem;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
}

.stellar-table thead {
  background: rgba(0, 0, 0, 0.3);
}

.stellar-table th {
  padding: 12px 15px;
  text-align: left;
  font-weight: 600;
  color: var(--text-main);
  border-bottom: 1px solid var(--panel-border);
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(0, 0, 0, 0.3);
}

.stellar-table td {
  padding: 12px 15px;
  border-bottom: 1px solid var(--panel-border);
  color: var(--text-muted);
}

.stellar-table tbody tr:hover {
  background: rgba(var(--ink-rgb), 0.05);
}

.stellar-table tbody tr:last-child td {
  border-bottom: none;
}

.hint {
  color: var(--text-muted);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mt-4 {
  margin-top: 2rem;
}

.mt-2 {
  margin-top: 1rem;
}

.inline-block {
  text-decoration: none;
}

/* ── Forms & Search ── */
.search-box { position: relative; width: 100%; }

.search-box i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.search-box input[type="text"],
.stellar-form input,
.stellar-form textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 0.625rem;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  caret-color: var(--primary);
}

.stellar-form input,
.stellar-form textarea { padding-left: 1rem; }

.search-box input:focus,
.stellar-form input:focus,
.stellar-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(45,212,191,0.05);
  box-shadow: 0 0 0 3px rgba(45,212,191,0.12);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.submit-btn {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  color: white;
  border: none;
  padding: 0.875rem 1.5rem;
  border-radius: 0.625rem;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1rem;
  transition: all 0.2s ease;
  box-shadow: 0 2px 12px rgba(20,184,166,0.3);
}

.submit-btn:hover {
  background: linear-gradient(135deg, #2dd4bf, #14b8a6);
  box-shadow: 0 4px 20px rgba(20,184,166,0.5);
  transform: translateY(-1px);
}
.submit-btn:active { transform: translateY(0); }

/* Lists */
.results-container {
  flex: 1;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  overflow-y: auto;
  max-height: 400px;
}

.customer-list {
  list-style: none;
}

.customer-list li {
  padding: 1rem;
  border-bottom: 1px solid var(--panel-border);
  transition: background 0.2s;
}

.customer-list li:hover:not(.empty-state) {
  background: rgba(var(--ink-rgb), 0.05);
}

.customer-list li:last-child {
  border-bottom: none;
}

.empty-state {
  text-align: center;
  padding: 2rem !important;
  color: var(--text-muted);
}

.customer-name {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.customer-details {
  font-size: 0.9rem;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.customer-details span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Document Grid */
.doc-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.doc-card {
  background: var(--panel-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.doc-card:hover {
  transform: translateY(-3px);
  background: rgba(30, 35, 52, 0.8);
  border-color: rgba(var(--ink-rgb), 0.1);
}

.doc-icon {
  font-size: 2rem;
  color: var(--accent);
}

.doc-info h4 {
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
}

.doc-info span {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ── Toast ── */
/* Meldung #98: „Bei Speichern passiert nichts." Der Toast liegt dauerhaft im
   DOM und wird nur über `opacity: 0` versteckt — seine Fläche bleibt und fängt
   weiter Klicks. Auf einem breiten Bildschirm landet dieser tote Fleck unten
   rechts im Leeren; auf einem Handy (412 px, gemessen an Dominiks Gerät) deckt
   er mit `max-width: 360px` fast die ganze Zeile ab. Genau dort steht in jedem
   Formular der Speichern-Knopf, weil die Knopfzeilen `flex-end` sind.
   Ein Toast ist nie anklickbar — also nimmt er auch keine Klicks entgegen. */
.toast {
  pointer-events: none;
  position: fixed;
  bottom: 5.5rem;   /* über dem „Problem melden"-Knopf unten rechts */
  right: 1.5rem;
  padding: 0.875rem 1.25rem;
  border-radius: 0.75rem;
  background: rgba(10, 25, 41, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--on-inverse);
  font-weight: 500;
  font-size: 0.875rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
  opacity: 0;
  transform: translateX(24px) scale(0.95);
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 360px;
}

.toast.show {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.toast.success {
  border-left: 3px solid var(--success);
  background: rgba(10, 30, 20, 0.92);
}

.toast.error {
  border-left: 3px solid var(--danger);
  background: rgba(30, 10, 15, 0.92);
}

.toast.info {
  border-left: 3px solid var(--primary);
}

.toast.warning {
  border-left: 3px solid var(--warning);
}

/* Phase 9: Neu-Badge für Live FileWatcher */
.neu-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--success);
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 12px;
  box-shadow: 0 0 10px var(--success);
  animation: pulse-neu 2s infinite;
  z-index: 10;
}

@keyframes pulse-neu {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
  }

  50% {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.8);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
  }
}

/* Print Styles for PDF Export */
@media print {
  body {
    background: white;
    color: black;
  }

  .sidebar,
  .dashboard-controls,
  #export-pdf-btn,
  .neu-badge {
    display: none !important;
  }

  .main-content {
    padding: 0;
  }

  .glass-panel {
    background: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }

  canvas {
    max-width: 100% !important;
  }

  /* ── Dienstplan drucken ────────────────────────────────────────────────
     Der Plan muss aus dem Haus können — bisher führte das Büro daneben eine
     Excel-Liste, nur um sie verschicken zu können. Gedruckt wird, was auf dem
     Blatt etwas nützt: die Fahrten mit ihrer Besetzung. Personalpool,
     Inspektor, Werkzeugleiste und jeder Knopf bleiben draußen — auf Papier
     kann man nichts anklicken. */
  body.ls-drucken .ls-pools,
  body.ls-drucken .ls-insp,
  body.ls-drucken .ls-metrics,
  body.ls-drucken .ls-menu,
  body.ls-drucken .ls-fill,
  body.ls-drucken .ls-slot.add,
  body.ls-drucken .ls-btn,
  body.ls-drucken .bereichsleiste {
    display: none !important;
  }
  body.ls-drucken .ls-board {
    display: block !important;
  }
  /* Nebeneinander statt scrollend: auf Papier gibt es keinen Scrollbalken. */
  body.ls-drucken .ls-trips {
    display: block !important;
    overflow: visible !important;
    max-height: none !important;
  }
  body.ls-drucken .ls-trip {
    break-inside: avoid;
    border: 1px solid #bbb;
    margin-bottom: 8px;
    background: none !important;
  }
  body.ls-drucken .ls-trip-h {
    background: none !important;
  }
}

/* ── Settings Tabs ── */
.settings-tab {
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.75rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.settings-tab:hover {
  color: var(--text-main);
  background: rgba(var(--ink-rgb), 0.04);
}

.settings-tab.active {
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
  background: linear-gradient(180deg, transparent, rgba(45,212,191,0.06));
  font-weight: 600;
}
.settings-tab.active i { color: var(--primary); }

/* ── Global Inputs — Maritime Dark Theme ── */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="url"],
textarea,
select {
  background-color: var(--input-bg);
  color: var(--input-color);
  border: 1px solid var(--input-border);
  border-radius: 0.5rem;
  padding: 0.6rem 0.875rem;
  font-family: inherit;
  font-size: 0.875rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  caret-color: var(--primary);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(45,212,191,0.05);
  box-shadow: 0 0 0 3px rgba(45,212,191,0.12);
}

input::placeholder, textarea::placeholder {
  color: var(--text-muted);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 2rem;
  cursor: pointer;
}
/* Die aufgeklappte Liste erbt nichts vom Feld — ohne Tokens blieb sie im
   Hellmodus nachtblau, während alles andere hell war. */
select option { background-color: var(--bg-card); color: var(--text-main); }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--ink-rgb), 0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--ink-rgb), 0.18); }
::-webkit-scrollbar-corner { background: transparent; }

/* Base Card Transition */
.tour-card {
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Drag and Drop Visual Feedback */
.tour-card.is-dragging {
  cursor: grabbing !important;
  opacity: 0.8 !important;
  transform: scale(1.05) rotate(3deg) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
  z-index: 9999 !important;
  animation: none !important;
}

.tour-card.dragging {
  opacity: 0.4;
  transform: scale(0.95);
  animation: none !important;
}

/* Custom Context Menu */
.custom-context-menu {
  position: fixed;
  background: var(--panel-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: var(--glass-shadow);
  z-index: 10000;
  display: none;
  flex-direction: column;
  min-width: 200px;
  padding: 8px 0;
  transform-origin: top left;
  animation: fadeIn 0.2s ease forwards;
}

.custom-context-menu.active {
  display: flex;
}

.context-menu-item {
  padding: 10px 15px;
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s;
  font-size: 0.95rem;
}

.context-menu-item:hover {
  background: rgba(var(--ink-rgb), 0.1);
}

.context-menu-item.danger:hover {
  background: rgba(239, 68, 68, 0.2);
  color: var(--danger);
}

/* ── Role-based permission system ──
   Elements are visible by default (login overlay hides them on startup).
   Once a role class is set on <body> after login, unwanted items are hidden.
   This avoids fighting with element-specific display values (flex vs block). */

/* Admin-only: hidden for büro and zeiterfassung */
body.role-büro .perm-admin,
body.role-zeiterfassung .perm-admin { display: none !important; }

/* Verwaltung (büro): hidden for zeiterfassung */
body.role-zeiterfassung .perm-büro { display: none !important; }

/* Zeiterfassung (zt): hidden for büro */
body.role-büro .perm-zt { display: none !important; }

/* Legacy alias */
.admin-only { display: none; }
body.role-admin .admin-only { display: revert; }

/* Utility Hidden Class */
.hidden {
  display: none !important;
}

/* Phase 21: Modern Excel Table — top-level, always active */
.modern-excel-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
  background: var(--panel-bg);
}

.modern-excel-table thead {
  background: var(--table-header-bg);
  color: var(--text-main);
}

.modern-excel-table th {
  padding: 12px 15px;
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid var(--table-border);
  position: sticky;
  top: 0;
  z-index: 5;
}

.modern-excel-table td {
  padding: 10px 15px;
  border-bottom: 1px solid var(--table-border);
  color: var(--text-main);
  vertical-align: middle;
}

.modern-excel-table tbody tr:nth-child(even) {
  background-color: var(--table-row-alt);
}

.modern-excel-table tbody tr:hover {
  background-color: var(--table-row-hover);
  transition: background-color 0.15s ease;
}

.modern-excel-table input,
.modern-excel-table select.inline-select {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
}

.modern-excel-table input:focus {
  outline: none;
  border: 1px solid var(--primary);
  background: var(--input-bg);
}

.modern-excel-table select.inline-select:focus {
  outline: none;
}

.quick-entry-row {
  background-color: rgba(59, 130, 246, 0.08) !important;
  border-top: 2px solid var(--primary);
}

.quick-entry-row input,
.quick-entry-row select {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-color) !important;
  padding: 6px 10px;
  border-radius: 6px;
}

.status-badge-inline {
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  display: inline-block;
}

/* Phase 21: Native Excel Table UI */
#excel-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

#excel-table th,
#excel-table td {
  padding: 10px 15px;
  border: 1px solid #ddd;
}

#excel-tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

#excel-tbody tr:nth-child(odd) {
  background-color: #fff;
}

/* Thead Color Coding */
.header-yellow th {
  background-color: #fceea7;
  color: #8c6b0a;
  border-color: #ebd66a;
}

.header-magenta th {
  background-color: #f3d4ed;
  color: #8b3a7a;
  border-color: #e2aed6;
}

.header-blue th {
  background-color: #d1eff7;
  color: #1f7a93;
  border-color: #abdcf0;
}

/* Inline Editing */
.inline-edit {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  padding: 5px 8px;
  font-family: inherit;
  font-size: inherit;
  color: var(--text-main);
  border-radius: 4px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.inline-edit:focus,
.inline-edit:hover {
  border-color: var(--primary);
  background: rgba(45,212,191,0.05);
  box-shadow: 0 0 0 2px rgba(45,212,191,0.1);
  outline: none;
}

.highlight-new {
  background: rgba(59, 130, 246, 0.05);
}


/* Emergency CSS: keep tour-detail-view visible (theme-aware) */
#tour-detail-view:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  background-color: var(--detail-view-bg) !important;
  min-height: 100vh !important;
  width: 100vw !important;
  position: absolute !important;
  top: 0;
  left: 0;
  z-index: 1000;
}

/* Phase 2 UX Upgrades: Sleeke Hover-Menüs in Listen — NUR mit Maus.
   Auf Handy und Tablet gibt es kein Hover: dort waren diese Knöpfe schlicht
   unsichtbar und unklickbar (Hub-Meldung 182: „Ich bekomme diese beiden
   Meldungen nicht weg" — der Knopf „Korrigieren" war da, nur nicht zu sehen).
   Mit Tastatur zeigt :focus-within sie ebenfalls. */
@media (hover: hover) and (pointer: fine) {
    tr .action-btn,
    tr .primary-btn,
    li .action-btn,
    li .primary-btn {
        opacity: 0;
        pointer-events: none;
        transition: all 0.2s ease-in-out;
    }

    tr:hover .action-btn,
    tr:hover .primary-btn,
    tr:focus-within .action-btn,
    tr:focus-within .primary-btn,
    li:hover .action-btn,
    li:hover .primary-btn,
    li:focus-within .action-btn,
    li:focus-within .primary-btn {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Bypass exceptions for panels and modales */
#zt-missed-table .action-btn,
.bento-card .action-btn,
#profile-customer-panel .action-btn,
#add-customer-panel .action-btn,
.panel-action-buttons .action-btn {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Terminal Log Console styling overrides - safe fallback */
#sys-btn-clear-log {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ═══════════════════════════════════════════════════════════════
   ZWEI-STUFEN DASHBOARD — Kategorie-Kacheln (Ebene 1)
   ═══════════════════════════════════════════════════════════════ */

/* Container für Kategorie-Kacheln */
.category-tiles-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: flex-start;
    width: 100%;
    animation: fadeIn 0.4s ease forwards;
}

/* Die große Kategorie-Kachel */
.category-tile {
    position: relative;
    width: 300px;
    height: 220px;
    flex: 0 0 300px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    user-select: none;
}

.category-tile:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.category-tile:active {
    transform: translateY(-4px) scale(1.01);
}

/* Hintergrundbild-Layer (object-fit: cover via background-size) */
.category-tile .cat-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.8s ease;
    z-index: 1;
}

.category-tile:hover .cat-bg {
    transform: scale(1.12);
}

/* Gradient-Overlay für optimale Lesbarkeit */
.category-tile .cat-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.35) 50%,
        rgba(0, 0, 0, 0.12) 100%
    );
    z-index: 2;
    transition: background 0.3s ease;
}

.category-tile:hover .cat-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.45) 55%,
        rgba(0, 0, 0, 0.15) 100%
    );
}

/* Text-Content zentriert am unteren Rand */
.category-tile .cat-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1.2rem;
    gap: 0.5rem;
}

/* Kategorie-Icon (optional, oben-mitte) */
.category-tile .cat-icon {
    position: absolute;
    top: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-size: 2rem;
    opacity: 0.85;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    transition: opacity 0.3s ease;
}

.category-tile:hover .cat-icon {
    opacity: 1;
}

/* Kategorie-Name */
.category-tile .cat-name {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #ffffff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9), 0 1px 4px rgba(0, 0, 0, 0.7);
    line-height: 1.2;
    margin: 0;
    /* Meldung #35: ein langer Name lief aus der 220px hohen Kachel heraus. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Unterzeile (z.B. Kategorie-Beschreibung).
   Meldung #35: „Layout der neuen Kacheln ist zwar super, aber leider zu voll
   sodass der Content verdeckt ist." Die Kachel ist 220px hoch und der Inhalt
   unten ausgerichtet — eine lange Unterzeile schob den Namen aus dem Bild.
   Beide Zeilen sind jetzt gedeckelt, die volle Liste steht im title. */
.category-tile .cat-subtitle {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
}

/* Fahrt-Anzahl Badge oben rechts */
.category-tile .cat-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: background 0.3s ease;
}

.category-tile:hover .cat-badge {
    background: rgba(0, 0, 0, 0.75);
}

/* "Ohne Kategorie"-Kachel — gestrichelter Rand */
.category-tile.uncategorized {
    border: 2px dashed rgba(255, 255, 255, 0.25);
}

.category-tile.uncategorized .cat-bg {
    background-color: rgba(100, 116, 139, 0.4) !important;
}

.category-tile.uncategorized .cat-name {
    color: rgba(255, 255, 255, 0.75);
}

/* Zurück-zur-Übersicht Button */
.back-to-overview-btn {
    display: none;
    align-items: center;
    gap: 8px;
    background: rgba(var(--ink-rgb), 0.07);
    border: 1px solid rgba(var(--ink-rgb), 0.12);
    color: var(--text-main);
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 500;
    transition: all 0.2s ease;
    width: auto;
    margin-bottom: 1.2rem;
}

.back-to-overview-btn.visible {
    display: flex;
}

.back-to-overview-btn:hover {
    background: rgba(45,212,191,0.1);
    border-color: var(--border-teal);
    color: var(--primary);
    transform: translateX(-3px);
}

/* ═══════════════════════════════════════════════════════════════
   SETTINGS — Kategorie-Verwaltung
   ═══════════════════════════════════════════════════════════════ */

.category-settings-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(var(--ink-rgb), 0.06);
    border-radius: 12px;
    transition: background 0.2s ease;
}

.category-settings-row:hover {
    background: rgba(var(--ink-rgb), 0.04);
}

.cat-color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(var(--ink-rgb), 0.2);
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
    cursor: pointer;
    position: relative;
}

.cat-img-preview {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(var(--ink-rgb), 0.1);
    flex-shrink: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--text-muted);
    overflow: hidden;
}

.cat-img-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-settings-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-main);
    font-size: 0.95rem;
}

.cat-action-btn {
    background: transparent;
    border: 1px solid rgba(var(--ink-rgb), 0.1);
    color: var(--text-muted);
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.cat-action-btn:hover {
    background: rgba(45,212,191,0.1);
    border-color: var(--primary);
    color: var(--primary);
}

.cat-action-btn.danger:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--danger);
    color: var(--danger);
}

/* Neue Kategorie Formular */
.new-category-form {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px 16px;
    background: rgba(59, 130, 246, 0.06);
    border: 1px dashed rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.new-category-form input[type="text"] {
    flex: 1;
    min-width: 140px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(var(--ink-rgb), 0.1);
    color: var(--text-main);
    font-size: 0.9rem;
}

.new-category-form input[type="color"] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid rgba(var(--ink-rgb), 0.15);
    cursor: pointer;
    padding: 2px;
    background: transparent;
    flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════
   REGIONDO BADGES & UI
   ═══════════════════════════════════════════════════════════ */

/* Kleines Globus-Badge auf Tour-Kacheln */
.regiondo-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 12;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.45);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Inline-Badge in Tabellen/Listen */
.regiondo-badge-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(14, 165, 233, 0.35);
    color: var(--accent-sky);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* Stornierte Regiondo-Buchungen */
.regiondo-cancelled {
    opacity: 0.55;
    border-left: 3px solid #ef4444 !important;
    background: rgba(239, 68, 68, 0.04);
}
.regiondo-cancelled .regiondo-badge {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

/* Sync-Status-Chip in der Topbar */
.regiondo-sync-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.25);
    color: var(--accent-sky);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
    cursor: default;
    transition: background 0.2s;
}
.regiondo-sync-chip.syncing {
    background: rgba(14, 165, 233, 0.2);
    animation: rd-pulse 1.2s ease-in-out infinite;
}
.regiondo-sync-chip.error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}
/* Light-Mode: das helle Blau ist auf hellem Grund kaum lesbar → kräftigeres Blau. */
[data-theme="light"] .regiondo-sync-chip {
    background: rgba(2, 132, 199, 0.1);
    border-color: rgba(2, 132, 199, 0.3);
    color: #0369a1;
}
[data-theme="light"] .regiondo-sync-chip.error { color: #b91c1c; }
@keyframes rd-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Regiondo Settings Tab */
.regiondo-settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.regiondo-key-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.regiondo-key-field label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}
.regiondo-key-field input {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.25);
    color: var(--text-main);
    font-family: 'JetBrains Mono', monospace, sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
}
.regiondo-key-field input:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
}

.regiondo-status-card {
    background: rgba(14, 165, 233, 0.06);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.regiondo-status-card .status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
}
.regiondo-status-card .status-label { color: var(--text-muted); }
.regiondo-status-card .status-value { font-weight: 600; color: var(--text-main); }
.regiondo-status-card .status-value.ok    { color: var(--accent-emerald); }
.regiondo-status-card .status-value.warn  { color: #f59e0b; }
.regiondo-status-card .status-value.error { color: #ef4444; }

.regiondo-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.regiondo-log-table th {
    text-align: left;
    padding: 8px 10px;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: sticky;
    top: 0;
    z-index: 5;
    /* Nicht nachtblau festschreiben: im Hellmodus stand die Kopfzeile sonst
       dunkel auf dunkel (2,88:1). --bg-card kippt mit, --text-main auch. */
    background: var(--bg-card);
    color: var(--text-main);
}
.regiondo-log-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.04);
    color: var(--text-main);
    vertical-align: middle;
}
.regiondo-log-table tr:hover td { background: rgba(var(--ink-rgb), 0.02); }

/* ═══════════════════════════════════════════════════════════
   KALENDER — Calendar View
   ═══════════════════════════════════════════════════════════ */

/* Calendar view takes full height */
#calendar-view {
    height: 100%;
    overflow-y: auto;
}
/* Override generic .view.active (display:block) for calendar */
#calendar-view.active {
    display: flex !important;
    flex-direction: column;
}

/* Wochentagsleiste und Monatsraster. Die Maße standen bis 1.9.6 als Inline-Style
   im HTML — und `element.style.display = ''` beim Ansichtswechsel löschte sie
   mit. Von hier aus kann das nicht passieren. */
#cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 5px;
    flex-shrink: 0;
}
#cal-grid {
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(104px, 1fr);
    flex: 1;
    min-height: 0;
    border-top: 1px solid rgba(var(--ink-rgb), 0.06);
    border-left: 1px solid rgba(var(--ink-rgb), 0.06);
    border-radius: 10px;
    overflow: hidden;
}
/* Woche und Tag bringen ihren Rahmen selbst mit (.cal-zr). */
#cal-grid.woche, #cal-grid.tag { border: none; border-radius: 0; overflow: visible; }

/* Weekday header labels */
.cal-weekday-label {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: 4px 4px 6px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}
.cal-weekday-label.cal-weekend { color: var(--text-dim); }

/* ── Monatsraster ───────────────────────────────────────────
   Meldung #40: gerundete Karten mit 6 px Abstand und farbig gefüllten Pillen
   darin sehen aus wie ein Kachel-Dashboard, nicht wie ein Kalender. Ein
   Kalender ist ein Raster: durchgehende Haarlinien, kein Abstand, und die
   Fahrt ist eine Zeile aus Punkt, Zeit und Name. */
/* Die Linien liegen als Zellrand, nicht als durchscheinender Rasterabstand:
   `--panel-bg` ist halbtransparent, eine eingefärbte Rasterfläche schimmerte
   deshalb durch jede Zelle und legte einen hellen Schleier über den Monat. */
.cal-cell {
    padding: 5px 6px 6px;
    position: relative;
    min-height: 104px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(var(--ink-rgb), 0.06);
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.06);
    transition: background 0.12s ease;
}

.cal-cell-empty { background: var(--cal-sunken); }
.cal-cell-has-tours { cursor: pointer; }
.cal-cell:not(.cal-cell-empty):hover { background: rgba(var(--ink-rgb), 0.05); }
.cal-cell-weekend { background: rgba(var(--ink-rgb), 0.022); }
.cal-cell-past { opacity: 0.62; }
.cal-cell-past .cal-day-num { color: rgba(var(--ink-rgb), 0.45); }

/* Tagesnummer */
.cal-day-num {
    font-size: 0.76rem;
    font-weight: 600;
    color: rgba(var(--ink-rgb), 0.68);
    margin-bottom: 4px;
    line-height: 20px;
    height: 20px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
/* Heute: die gefüllte Scheibe um die Zahl statt einer eingefärbten Zelle. Die
   eingefärbte Zelle überstrahlte die Fahrtfarben darin. */
.cal-cell-today .cal-day-num {
    color: var(--on-accent);
    font-weight: 800;
    background: var(--success, var(--accent-emerald));
    width: 22px; height: 20px;
    border-radius: 999px;
    margin-inline: auto;
}

/* ── Fahrtzeilen im Monat ───────────────────────────────────── */
.cal-pills {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: 0;
}
.cal-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    padding: 1px 3px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.55;
    color: rgba(var(--ink-rgb), 0.82);
}
.cal-pill:hover { background: rgba(var(--ink-rgb), 0.07); }
.cal-pill-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cal-pill-time {
    font-weight: 600;
    flex-shrink: 0;
    font-size: 0.66rem;
    color: rgba(var(--ink-rgb), 0.64);
    font-variant-numeric: tabular-nums;
}
.cal-pill-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-more {
    font-size: 0.66rem;
    color: rgba(var(--ink-rgb), 0.66);
    padding: 1px 3px 0 15px;
    font-weight: 600;
}

/* ── Zeitraster für Woche und Tag ───────────────────────────── */
.cal-zr {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(var(--ink-rgb), 0.07);
    border-radius: 10px;
    overflow: hidden;
    background: var(--panel-bg, var(--bg-card));
}
.cal-zr-kopf {
    display: grid;
    grid-template-columns: 54px repeat(7, 1fr);
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.09);
    flex-shrink: 0;
}
.cal-zr.ist-tag .cal-zr-kopf,
.cal-zr.ist-tag .cal-zr-spalten { grid-template-columns: 1fr; }
.cal-zr.ist-tag .cal-zr-kopf { grid-template-columns: 54px 1fr; }

.cal-zr-tag {
    padding: 7px 4px 8px;
    text-align: center;
    border-left: 1px solid rgba(var(--ink-rgb), 0.055);
    display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.cal-zr-wt {
    font-size: 0.64rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.09em; color: rgba(var(--ink-rgb), 0.64);
}
.cal-zr-dt {
    font-size: 1.15rem; font-weight: 400; line-height: 1.15;
    color: rgba(var(--ink-rgb), 0.78); font-variant-numeric: tabular-nums;
}
.cal-zr-tag.ist-heute .cal-zr-wt { color: var(--success, var(--accent-emerald)); }
.cal-zr-tag.ist-heute .cal-zr-dt {
    background: var(--success, var(--accent-emerald)); color: var(--on-accent); font-weight: 700;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.cal-zr-abw {
    font-size: 0.6rem; color: var(--warning, var(--warning));
    background: color-mix(in srgb, var(--warning, var(--warning)) 14%, transparent);
    border-radius: 999px; padding: 0 6px; margin-top: 2px;
}

/* Ganztags-Zeile über der Stundenachse (Meldung #55): Termine ohne Uhrzeit —
   Wartung, Reinigung, Besichtigung. Dieselben Spaltenmaße wie Kopf und Raster,
   sonst stünde der Eintrag nicht über seinem Tag. */
.cal-zr-ganztags {
    display: grid;
    grid-template-columns: 54px repeat(7, 1fr);
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.09);
    flex-shrink: 0;
    background: rgba(var(--lavender-rgb), 0.05);
}
.cal-zr.ist-tag .cal-zr-ganztags { grid-template-columns: 54px 1fr; }
.cal-zr-gt-ecke {
    font-size: 0.6rem; color: rgba(var(--ink-rgb), 0.64);
    display: flex; align-items: center; justify-content: flex-end;
    padding: 4px 8px; text-align: right;
}
.cal-zr-gt-tag {
    border-left: 1px solid rgba(var(--ink-rgb), 0.055);
    padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.cal-zr-gt-chip {
    /* Kein dicker Rand an einer Seite: Hintergrund und Rahmen tragen die Farbe
       schon, die dritte Wiederholung war Dekoration. */
    background: rgba(var(--lavender-rgb), 0.18);
    border: 1px solid rgba(var(--lavender-rgb), 0.4);
    color: var(--on-lavender); border-radius: 6px; padding: 2px 7px;
    font-size: 0.7rem; font-weight: 600; text-align: left; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-zr-gt-chip:hover { background: rgba(var(--lavender-rgb), 0.3); }

.cal-zr-koerper {
    flex: 1; min-height: 0; overflow-y: auto;
    display: grid; grid-template-columns: 54px 1fr;
    position: relative;
}
.cal-zr-achse { position: relative; }
.cal-zr-std {
    position: absolute; right: 8px; transform: translateY(-50%);
    font-size: 0.64rem; color: rgba(var(--ink-rgb), 0.64);
    font-variant-numeric: tabular-nums;
}
.cal-zr-spalten { display: grid; grid-template-columns: repeat(7, 1fr); position: relative; }
.cal-zr-spalte {
    position: relative;
    border-left: 1px solid rgba(var(--ink-rgb), 0.055);
}
.cal-zr-spalte.ist-wochenende { background: rgba(var(--ink-rgb), 0.02); }
.cal-zr-spalte.ist-heute { background: color-mix(in srgb, var(--success, var(--accent-emerald)) 5%, transparent); }
.cal-zr-spalte.ist-vorbei { background: var(--cal-sunken); }
.cal-zr-linie {
    position: absolute; left: 0; right: 0; height: 0;
    border-top: 1px solid rgba(var(--ink-rgb), 0.05);
}

/* Ein Termin: die Fahrtart gibt die Farbe, die Höhe gibt die Dauer. */
.cal-zr-termin {
    position: absolute;
    border-radius: 5px;
    padding: 2px 7px;
    overflow: hidden;
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1.35;
    /* Die Füllung trägt die Farbe der Fahrtart. Ein farbiger Balken links
       daneben sagt dasselbe ein zweites Mal — weg damit. */
    background: color-mix(in srgb, var(--ton) 38%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ton) 55%, transparent);
    color: rgba(var(--ink-rgb), 0.95);
    transition: filter 0.12s ease;
}
.cal-zr-termin:hover { filter: brightness(1.35); z-index: 3; }
.cal-zr-zeit {
    display: block; font-size: 0.64rem; font-weight: 600;
    color: rgba(var(--ink-rgb), 0.72); font-variant-numeric: tabular-nums;
}
.cal-zr-name { display: block; font-weight: 600; }
.cal-zr-schiff { display: block; font-size: 0.64rem; color: rgba(var(--ink-rgb), 0.66); }
/* Kurze Termine haben keinen Platz für drei Zeilen — Zeit und Name in eine. */
.cal-zr-termin.ist-kurz { padding-top: 1px; white-space: nowrap; }
.cal-zr-termin.ist-kurz .cal-zr-zeit { display: inline; margin-right: 5px; }
.cal-zr-termin.ist-kurz .cal-zr-name { display: inline; }
.cal-zr-termin.ist-kurz .cal-zr-schiff { display: none; }

/* Die Jetzt-Linie, wie man sie kennt. */
.cal-zr-jetzt {
    position: absolute; left: 0; right: 0; height: 0; z-index: 4;
    border-top: 2px solid var(--danger);
    pointer-events: none;
}
.cal-zr-jetzt::before {
    content: ''; position: absolute; left: -5px; top: -5px;
    width: 9px; height: 9px; border-radius: 50%; background: var(--danger);
}

/* ── Detail panel ─────────────────────────────────────────*/
.cal-detail-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 12px;
    padding: 14px 18px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.14s, transform 0.14s;
}
.cal-detail-card:hover {
    transform: translateX(3px);
}
.cal-detail-card-rd {
    background: rgba(var(--lavender-rgb), 0.07);
    border-color: rgba(var(--lavender-rgb), 0.2);
}
.cal-detail-card-rd:hover { background: rgba(var(--lavender-rgb), 0.13); }
.cal-detail-card-intern {
    background: rgba(var(--blue-rgb), 0.07);
    border-color: rgba(var(--blue-rgb), 0.2);
}
.cal-detail-card-intern:hover { background: rgba(var(--blue-rgb), 0.13); }

.cal-detail-left { flex: 1; min-width: 0; }

.cal-detail-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-detail-time {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-lavender);
    flex-shrink: 0;
    background: rgba(var(--lavender-rgb), 0.12);
    padding: 1px 7px;
    border-radius: 20px;
}

.cal-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.cal-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.73rem;
    color: rgba(var(--ink-rgb), 0.64);
    background: rgba(var(--ink-rgb), 0.06);
    border-radius: 20px;
    padding: 2px 8px;
}
.cal-tag-rd    { color: var(--accent-lavender); background: rgba(var(--lavender-rgb), 0.12); }
.cal-tag-intern{ color: var(--accent-blue); background: rgba(var(--blue-rgb), 0.12); }

.cal-detail-bar {
    height: 4px;
    background: rgba(var(--ink-rgb), 0.08);
    border-radius: 2px;
    overflow: hidden;
}
.cal-detail-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.cal-detail-arrow {
    color: rgba(var(--ink-rgb), 0.45);
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: color 0.14s, transform 0.14s;
}
.cal-detail-card:hover .cal-detail-arrow {
    color: rgba(var(--ink-rgb), 0.75);
    transform: translateX(3px);
}

/* ═══════════════════════════════════════════════════════════
   UNIFIED SIDEBAR — Section Labels & Scrollable
   ═══════════════════════════════════════════════════════════ */

/* Make sidebar scrollable when navigation is long */
.sidebar {
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(var(--ink-rgb), 0.22);
    padding: 16px 1rem 6px;
    user-select: none;
}

[data-theme="light"] .nav-section-label {
    color: rgba(0,0,0,0.32);
}

/* ═══════════════════════════════════════════════════════════
   HUB DASHBOARD — eine primäre Handlung + gruppierte Übersicht
   (ersetzt das einheitliche 6-Karten-Glass-Grid — /impeccable critique #161:
   „6 identische Karten, glass-panel + blur an 11 Elementen, Cyan-Glow" waren
   die konkrete, gemessene Ursache der „AI sloppy"-Wahrnehmung. Flache
   Flächen, Haarlinien statt Rahmen, kein Blur, kein Glow.)
   ═══════════════════════════════════════════════════════════ */

.hub-kpi-line {
    display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem;
    padding: 0.9rem 0; margin-bottom: 1.6rem;
    border-top: 1px solid var(--panel-border); border-bottom: 1px solid var(--panel-border);
    font-size: 0.85rem; color: var(--text-muted);
}
.hub-kpi-line .hub-kpi-val {
    font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-main); margin-right: 0.35rem;
}

.hub-navgroup { margin-bottom: 1.4rem; }
.hub-navgroup h4 {
    font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700;
    margin: 0 0 0.3rem; color: #60a5fa;
}
.hub-navgroup.zt h4 { color: var(--primary); }
.hub-navrow {
    display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0.15rem;
    border-bottom: 1px solid var(--panel-border); cursor: pointer;
}
.hub-navgroup .hub-navrow:last-child { border-bottom: none; }
.hub-navrow i { width: 18px; text-align: center; color: var(--text-muted); font-size: 0.9rem; flex-shrink: 0; }
.hub-navrow .hub-navrow-t { font-weight: 600; font-size: 0.92rem; }
.hub-navrow .hub-navrow-s { color: var(--text-muted); font-size: 0.78rem; margin-top: 0.1rem; }
.hub-navrow:hover, .hub-navrow:focus-visible { color: var(--primary); }

/* ── Startseite · „Heute" und „Die nächsten Tage" (Meldung #63) ──────────────
   Achtung: die Wurzel-Schriftgröße steht auf 12px, nicht 16. Die Maße unten
   sind an .hub-navrow (0.92rem) und .hub-kpi-line (0.85rem) ausgerichtet. */
/* Startseiten-Kopf (1.50.0): Suche links, Nachrichten + Was ist neu rechts. */
.hub-kopf { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.8rem; flex-wrap: wrap; }
.hub-kopf .br-suche { flex: 1; max-width: 560px; }
.hub-kopf-rechts { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.hub-kopf-btn {
  position: relative; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.95rem; border-radius: 10px; border: 1px solid var(--panel-border);
  background: transparent; color: var(--text-main); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.hub-kopf-btn:hover { border-color: var(--primary); color: var(--primary); }
.hub-kopf-btn .rail-badge { top: -6px; right: -6px; }
#hub-bereiche { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
@media (max-width: 900px) { #hub-bereiche { grid-template-columns: 1fr; } }

.st-block { margin-bottom: 2rem; }
.st-ueber {
  display: flex; align-items: baseline; gap: 0.6rem;
  font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase;
  font-weight: 700; color: var(--text-muted); margin: 0 0 0.7rem;
}
.st-ueber span { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-muted); }
/* „alle ansehen“ in der Überschrift — ein Link, kein Knopf, deshalb ohne Fläche. */
.st-mehr {
  margin-left: auto; background: none; border: 0; cursor: pointer; padding: 0;
  font: inherit; text-transform: none; letter-spacing: 0; font-weight: 600;
  color: var(--primary);
}
.st-mehr:hover { text-decoration: underline; }

.st-liste {
  border: 1px solid var(--panel-border); border-radius: 10px; overflow: hidden;
}
.st-fahrt {
  display: grid;
  grid-template-columns: 3.6rem minmax(150px, 1fr) auto auto;
  align-items: center; gap: 0.4rem 1.4rem;
  padding: 0.8rem 1.1rem;
  border-top: 1px solid var(--panel-border);
  cursor: pointer;
}
.st-fahrt:first-child { border-top: none; }
.st-fahrt:hover, .st-fahrt:focus-visible { background: rgba(45, 212, 191, 0.05); outline: none; }
.st-fahrt.st-termin { cursor: default; }
.st-charter .st-name i { color: var(--accent-blue, #60a5fa); }
.st-neben .st-warn { color: var(--accent-amber); }
.st-fahrt.st-termin:hover { background: none; }

.st-zeit {
  font-size: 0.95rem; font-weight: 700; color: var(--text-main);
  font-variant-numeric: tabular-nums;
}
.st-name { font-size: 0.95rem; font-weight: 600; color: var(--text-main); }
.st-name i { color: var(--text-dim); margin-right: 0.35rem; font-size: 0.85em; }
.st-neben { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.12rem; }
.st-ohne { color: var(--text-muted); font-style: italic; font-weight: 400; }

.st-gaeste, .st-crew { text-align: right; min-width: 6.5rem; }
.st-gaeste b, .st-crew b {
  display: block; font-size: 1.05rem; font-weight: 700; line-height: 1.25;
  color: var(--text-main); font-variant-numeric: tabular-nums;
}
.st-gaeste span, .st-crew span { font-size: 0.78rem; color: var(--text-muted); }
.st-crew b.st-luecke { color: var(--accent-amber); }
.st-vage {
  font-size: 0.7rem; font-weight: 600; color: var(--accent-amber);
  text-transform: uppercase; letter-spacing: 0.04em;
}

.st-leer {
  border: 1px solid var(--panel-border); border-radius: 10px;
  padding: 1.8rem 1.2rem; text-align: center;
  color: var(--text-muted); font-size: 0.88rem;
}

/* Was auf jemanden wartet. Keine Zahl ohne Aufgabe: eine 0 wird gar nicht erst
   gezeigt, sonst steht die Startseite voller Nullen und man liest sie nicht mehr. */
.st-aufgaben { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.st-aufgabe {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.42rem 0.85rem; border-radius: 8px; cursor: pointer;
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  color: var(--text-main); font-size: 0.85rem; font-family: inherit;
}
.st-aufgabe:hover { border-color: var(--warning); }
.st-aufgabe i { color: var(--accent-amber); font-size: 0.9em; }
.st-aufgabe b { font-variant-numeric: tabular-nums; }

.st-woche {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 0.6rem;
}
/* Meldung #106: Tag klickbar, Datum fett, Anzahl kleiner. */
.st-tag {
  border: 1px solid var(--panel-border); border-radius: 10px;
  padding: 0.6rem 0.8rem; background: transparent; color: var(--text-main);
  font: inherit; text-align: left; cursor: pointer; display: block;
}
.st-tag:hover, .st-tag:focus-visible { border-color: var(--primary); outline: none; }
.st-tag-leer { opacity: 0.55; }
.st-tag-kopf { font-size: 0.88rem; color: var(--text-main); }
.st-tag-kopf b { font-weight: 700; }
.st-tag-zahl { font-size: 1rem; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; margin-right: 0.15rem; }
.st-tag-label { margin-top: 0.25rem; }
.st-tag-label { font-size: 0.76rem; color: var(--text-muted); }
.st-tag-merk { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.4rem; font-size: 0.74rem; color: var(--text-muted); }
.st-tag-merk .st-warn { color: var(--accent-amber); }

/* Schmal: Gäste und Crew rutschen unter den Namen statt sich zu quetschen. */
@media (max-width: 820px) {
  .st-fahrt { grid-template-columns: 3.6rem 1fr; }
  .st-gaeste, .st-crew { grid-column: 2; text-align: left; min-width: 0; }
  .st-gaeste b, .st-crew b { display: inline; margin-right: 0.35rem; font-size: 0.95rem; }
}
.hub-navrow:hover i, .hub-navrow:focus-visible i { color: var(--primary); }
.toast .toast-aktion { margin-left: 0.8rem; border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 6px; padding: 0.15rem 0.6rem; font: inherit; font-weight: 700; cursor: pointer; }
/* Ladefehler auf Startseite und Bereichen: sichtbar, mit Rückweg. */
.st-fehler { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.st-fehler button { border: 1px solid var(--panel-border); background: transparent; color: var(--text-main); border-radius: 8px; padding: 0.3rem 0.8rem; font: inherit; cursor: pointer; }
.st-fehler button:hover { border-color: var(--primary); color: var(--primary); }

/* Wissen zur Fahrt (#119) — in Fahrt und Charter-Editor, wie an Bord. */
.wissen-block { border: 1px solid var(--panel-border); border-radius: 10px; padding: 0.5rem 0.9rem; margin-bottom: 0.9rem; }
.wissen-block summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; }
.wissen-block summary i { color: var(--primary); }
.wissen-zahl { margin-left: auto; font-size: 0.75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wissen-liste { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 0.5rem; }
.wissen-eintrag { border: 1px solid var(--panel-border); background: transparent; color: var(--text-main); border-radius: 999px; padding: 0.25rem 0.7rem; font: inherit; font-size: 0.82rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; }
.wissen-eintrag:hover { border-color: var(--primary); color: var(--primary); }
.wissen-bereich { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }

/* Wiki-Bereiche als Filter (#124). */
.wk-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 0.7rem; }
.wk-chip { border: 1px solid var(--panel-border); background: transparent; color: var(--text-muted); border-radius: 999px; padding: 0.2rem 0.65rem; font: inherit; font-size: 0.78rem; cursor: pointer; }
.wk-chip.an { border-color: var(--primary); color: var(--primary); font-weight: 600; }

/* Leitstand (#116): Fahrt auf ein Schiff ziehen. */
.ls-shipgroup.over { outline: 2px dashed var(--primary); outline-offset: 2px; }
.ls-trip[draggable="true"] { cursor: grab; }
.ls-trip.dragging { opacity: 0.5; }

/* Schiff in Karte und Kopfzeile (#109/#112): Kürzel als Knopf, Klick öffnet die Auswahl. */
.ship-wechsel-btn {
  margin-left: auto; background: rgba(255,255,255,0.1); padding: 2px 8px; border-radius: 12px;
  font-size: 0.8rem; color: var(--text-main); border: 1px solid transparent; cursor: pointer; font-family: inherit;
}
.ship-wechsel-btn:hover { border-color: var(--primary); }
.ship-wechsel { margin-left: auto; font-size: 0.8rem; max-width: 12rem; }
.detail-tour-ship { display: inline-flex; align-items: center; gap: 0.5rem; }
.detail-tour-ship .ship-wechsel-btn { margin-left: 0; }
.detail-tour-ship .detail-ship-name { color: var(--text-muted); font-size: 0.85rem; }

/* ── Bereichs-Startseiten (1.49.0): Suche, Monatsraster, Schnellauswahl ──────
   Dieselbe Sprache wie die Startseite: Haarlinien, keine Karten, kein Glow. */
.br-ueber { font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; margin: 1.4rem 0 0.5rem; color: #60a5fa; }
.br-suche { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.9rem; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--field-bg); max-width: 640px; }
.br-suche i { color: var(--text-muted); }
.br-suche input { flex: 1; border: none; background: transparent; color: var(--text-main); font: inherit; font-size: 1rem; outline: none; min-width: 0; }
.br-suche input::placeholder { color: var(--text-muted); }
.br-knopf { border: 1px solid var(--panel-border); background: transparent; color: var(--text-main); border-radius: 8px; padding: 0.4rem 0.8rem; font: inherit; font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
.br-knopf:hover { border-color: var(--primary); color: var(--primary); }
.br-treffer { max-width: 640px; }
.br-treffer-zeile { display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left; padding: 0.55rem 0.9rem; border: none; border-bottom: 1px solid var(--panel-border); background: transparent; color: var(--text-main); font: inherit; cursor: pointer; }
.br-treffer-zeile i { color: var(--text-muted); width: 16px; }
.br-treffer-zeile small { color: var(--text-muted); margin-left: auto; }
.br-treffer-zeile:hover { color: var(--primary); }
.br-leer { color: var(--text-muted); font-size: 0.85rem; padding: 0.6rem 0.2rem; }
.br-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.8rem; }
.br-kachel { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 0.9rem 1rem; border: 1px solid var(--panel-border); border-radius: 10px; background: transparent; color: var(--text-main); font: inherit; text-align: left; cursor: pointer; }
/* Die Kategoriefarbe als Punkt vor dem Namen — dieselbe Farbe wie in der Fahrtenliste. */
.br-kachel-t::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--kat, var(--primary)); margin-right: 0.5rem; vertical-align: 0; }
.br-kachel:hover { border-color: var(--primary); }
.br-kachel-t { font-weight: 700; font-size: 0.95rem; }
.br-kachel-s { color: var(--text-muted); font-size: 0.78rem; }
.br-balken { display: block; width: 100%; height: 4px; border-radius: 2px; background: rgba(var(--ink-rgb), 0.10); overflow: hidden; margin-top: 0.2rem; }
.br-balken span { display: block; height: 100%; background: var(--belegt, var(--primary)); }
.br-monat { margin-top: 1.4rem; max-width: 640px; }
.br-monat-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.95rem; }
.br-pfeil { width: 30px; height: 30px; border: 1px solid var(--panel-border); border-radius: 8px; background: transparent; color: var(--text-main); font-size: 1.1rem; cursor: pointer; }
.br-pfeil:hover { border-color: var(--primary); color: var(--primary); }
.br-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.br-wt { font-size: 0.7rem; color: var(--text-muted); text-align: center; padding-bottom: 0.2rem; }
.br-tag { position: relative; min-height: 46px; border: 1px solid var(--panel-border); border-radius: 8px; background: transparent; color: var(--text-main); font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; padding: 0.3rem 0.45rem; gap: 0.15rem; }
.br-tag span { font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.br-tag i { font-style: normal; font-size: 0.72rem; font-weight: 700; color: var(--primary); }
.br-tag.leer { color: var(--text-muted); }
.br-tag.heute { border-color: var(--primary); }
.br-tag:hover { background: rgba(var(--ink-rgb), 0.06); }
/* Meldung #148: Charter-Raster mit Beschriftung — wer fährt, auf welchem Schiff. */
.br-monat.detail { max-width: none; }
.br-monat.detail .br-tag { min-height: 64px; }
.br-tag em { display: block; width: 100%; font-style: normal; font-size: 0.68rem; line-height: 1.25; color: var(--primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.br-tag em:hover { text-decoration: underline; }
.br-tag em.br-mehr { color: var(--text-muted); }
.zt-tag-box { grid-column: 1 / -1; margin-top: 0.6rem; padding: 0.7rem 0.9rem; border-radius: 10px; background: rgba(var(--ink-rgb), 0.04); border: 1px solid var(--panel-border); font-size: 0.8rem; }
.zt-tag-t { font-weight: 600; margin-bottom: 0.35rem; }
.zt-tag-z { display: flex; gap: 0.5rem; }
.zt-tag-z input { flex: 1; min-width: 0; padding: 0.35rem 0.6rem; border-radius: 6px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--input-color); font-family: ui-monospace, monospace; font-size: 0.78rem; }
.zt-tag-kopie { padding: 0.35rem 0.8rem; border-radius: 6px; border: 1px solid var(--panel-border); background: transparent; color: var(--primary); cursor: pointer; font: inherit; font-size: 0.78rem; }
.zt-tag-h { margin-top: 0.45rem; color: var(--text-muted); font-size: 0.74rem; line-height: 1.45; }
.ed-tb { border: 1px solid var(--panel-border); border-radius: 10px; padding: 0.5rem 0.8rem; font-size: 0.8rem; }
.ed-tb-kopf { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.25rem; }
.ed-tb-zeile { display: grid; grid-template-columns: 9rem 1fr; gap: 0.6rem; padding: 0.22rem 0; border-top: 1px solid rgba(var(--ink-rgb), 0.06); }
.ed-tb-zeile span { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-tb-zeile.frei { cursor: pointer; }
.ed-tb-zeile.frei span { color: var(--success); }
.ed-tb-zeile.frei:hover b, .ed-tb-zeile.gewaehlt b { color: var(--primary); }
.br-treffer-kopf { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.9rem 0.2rem; font-size: 0.8rem; color: var(--text-muted); }
.br-treffer-zeile .br-datum { width: 3.2rem; }
.br-treffer-zeile > span:not(.br-datum) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-frei { border: none; cursor: default; }
.br-zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.br-zweispaltig .br-monat { margin-top: 0; }
.br-datum { width: 3.6rem; flex-shrink: 0; font-weight: 700; font-size: 0.85rem; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; }
.br-datum small { font-weight: 400; color: var(--text-muted); font-size: 0.72rem; }
.br-datum.heute { color: var(--primary); }
@media (max-width: 900px) { .br-zweispaltig { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════════
   ZEITERFASSUNG VIEWS — Common Styles
   ═══════════════════════════════════════════════════════════ */

/* Pulse dot for live entries */
.zt-pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2dd4bf;
    box-shadow: 0 0 8px rgba(45,212,191,0.6);
    animation: zt-pulse 2s ease-in-out infinite;
}

@keyframes zt-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(45,212,191,0.4); }
    50% { box-shadow: 0 0 16px rgba(45,212,191,0.8); }
}

/* Status badges for devices */
.zt-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.zt-status-badge.online {
    background: rgba(16,185,129,0.15);
    color: var(--accent-emerald);
    border: 1px solid rgba(16,185,129,0.3);
}

.zt-status-badge.offline {
    background: rgba(239,68,68,0.15);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.3);
}

.zt-status-badge.pending {
    background: rgba(251,191,36,0.15);
    color: #fbbf24;
    border: 1px solid rgba(251,191,36,0.3);
}

.zt-status-badge.web {
    background: rgba(59,130,246,0.15);
    color: #3b82f6;
    border: 1px solid rgba(59,130,246,0.3);
}

/* Zeiterfassung KPI cards */
.zt-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 24px;
}

.zt-kpi-card {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    padding: 18px;
    text-align: center;
    backdrop-filter: var(--glass-blur);
}

.zt-kpi-card .kpi-value {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 6px 0;
}

.zt-kpi-card .kpi-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Zeiterfassung tabs */
.zt-tabs {
    display: flex;
    gap: 4px;
    background: rgba(0,0,0,0.2);
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.zt-tab {
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.zt-tab:hover {
    background: rgba(var(--ink-rgb), 0.05);
    color: var(--text-main);
}

.zt-tab.active {
    background: rgba(45,212,191,0.15);
    color: #2dd4bf;
}

/* Zeiterfassung duration counter */
.zt-duration {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.88rem;
    color: #2dd4bf;
    font-weight: 600;
}

/* Modal overlay for ZT modules */
.zt-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.zt-modal-overlay.active {
    display: flex;
}

/* Heatmap cells */
.zt-heatmap-cell {
    border-radius: 3px;
    width: 100%;
    aspect-ratio: 1;
    transition: background 0.2s;
}

/* Light theme adjustments for ZT */
[data-theme="light"] .zt-pulse-dot {
    background: #0d9488;
    box-shadow: 0 0 8px rgba(13,148,136,0.5);
}

[data-theme="light"] .zt-tab.active {
    background: rgba(13,148,136,0.12);
    color: #0d9488;
}

[data-theme="light"] .zt-duration {
    color: #0d9488;
}


/* ═══════════════════════════════════════════════════════════════
   GLOBAL KEYFRAMES — Maritime Premium Animations
   ═══════════════════════════════════════════════════════════════ */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(24px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(20,184,166,0.4), 0 2px 12px rgba(20,184,166,0.3); }
  50%       { box-shadow: 0 0 0 10px rgba(20,184,166,0), 0 2px 12px rgba(20,184,166,0.3); }
}

/* Skeleton shimmer */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(var(--ink-rgb), 0.04) 0%,
    rgba(var(--ink-rgb), 0.08) 50%,
    rgba(var(--ink-rgb), 0.04) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}

/* Premium login panel override */
#app-login-overlay .glass-panel {
  border-radius: 1.25rem !important;
  border: 1px solid rgba(45,212,191,0.15) !important;
  box-shadow:
    0 0 0 1px rgba(45,212,191,0.08),
    0 25px 50px rgba(0,0,0,0.6),
    0 4px 24px rgba(45,212,191,0.05) !important;
}

/* Login form fields */
#app-login-overlay input {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #f0f9ff !important;
  border-radius: 0.625rem !important;
  padding: 0.875rem 1rem !important;
  font-size: 0.95rem !important;
  transition: all 0.2s ease !important;
}
#app-login-overlay input:focus {
  border-color: var(--primary) !important;
  background: rgba(45,212,191,0.07) !important;
  box-shadow: 0 0 0 3px rgba(45,212,191,0.15) !important;
  outline: none !important;
}

/* Login button pulse */
#app-login-overlay .submit-btn {
  animation: btnPulse 2.5s ease-in-out infinite;
}

/* Quick entry row — teal accent instead of blue */
.quick-entry-row {
  background-color: rgba(45, 212, 191, 0.05) !important;
  border-top: 2px solid var(--primary);
}
.highlight-new {
  background: rgba(45, 212, 191, 0.04);
}

/* ── Analytics Command Center ────────────────────────────── */
.analytics-view { overflow-y: auto; }

.analytics-kpi-grid {
  display: grid;
  /* auto-fit statt fester Spaltenzahl: die Kachelreihen sind unterschiedlich
     lang (6 oben, 4 im Umsatzblock) und sollen beide sauber umbrechen. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

/* Panelreihen der Auswertung. Vorher standen diese Maße als Inline-Styles in
   jeder einzelnen Reihe im HTML. */
.analytics-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.analytics-row > .analytics-panel {
  flex: 1 1 320px;
  min-width: 280px;
}

.analytics-panel {
  display: flex;
  flex-direction: column;
}

/* Chart.js braucht einen Elternknoten mit fester Höhe und position:relative,
   sonst zeichnet es in eine Fläche der Höhe 0 — die Diagramme waren unsichtbar. */
.analytics-panel .chart-container,
.analytics-view .chart-container {
  position: relative;
  flex: 1;
  min-height: 200px;
  width: 100%;
}

.analytics-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.analytics-kpi-card .kpi-icon {
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.analytics-kpi-card .kpi-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.analytics-kpi-card .kpi-value {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1;
}

.analytics-kpi-card .kpi-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.analytics-period-btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}

.analytics-period-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #0f172a;
  font-weight: 600;
}

.analytics-period-btn:hover:not(.active) {
  background: rgba(var(--ink-rgb), 0.05);
  color: var(--text-main);
}

@media (max-width: 1200px) {
  .analytics-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Payroll module master switch ─────────────────────────────────────────────
   When body has .payroll-off, everything tagged .payroll-feature is hidden.
   Uses display:none so table columns/tiles reflow cleanly without layout gaps. */
body.payroll-off .payroll-feature { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   NAVIGATION REDESIGN — Icon-Rail + Flyout + Command-Palette
   ══════════════════════════════════════════════════════════════════════════ */

.app-rail {
  /* Aus den Kundengesprächen: „Was heißt der Anker?" Die Rail war reine
     Bildsprache, der Name stand nur im Tooltip. Die Navigationsknöpfe tragen
     ihn jetzt sichtbar; die Werkzeuge im Fuß (Zahnrad, Lupe, Ausschalter)
     bleiben ohne, sie sind allgemein bekannt und würden die Leiste zu lang
     machen. */
  width: 84px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 6px;
  z-index: 30;
}
.rail-logo {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff; font-size: 1.1rem; margin-bottom: 6px;
}
.rail-section { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.rail-divider { width: 28px; height: 1px; background: var(--panel-border); margin: 6px 0; }
.rail-spacer { flex: 1 1 auto; }
.rail-footer { margin-top: auto; }

.rail-btn {
  position: relative;
  width: 72px; min-height: 44px;
  border: none; border-radius: 12px;
  background: transparent; color: var(--text-secondary);
  font-size: 1.05rem; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 5px 3px;
  transition: background .15s, color .15s, transform .1s;
}
.rail-label {
  font-size: 0.65rem; font-weight: 600; line-height: 1.15; letter-spacing: 0.01em;
  text-align: center; max-width: 68px; hyphens: auto; overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Reicht die Höhe nicht, scrollt der Navigationsteil — nie die ganze Leiste,
   sonst wandern Einstellungen und Abmelden aus dem Bild. */
#rail-main { overflow-y: auto; min-height: 0; scrollbar-width: none; }
#rail-main::-webkit-scrollbar { display: none; }
.rail-btn:hover { background: var(--field-bg); color: var(--text-main); }
.rail-btn:active { transform: scale(0.94); }
.rail-btn.active, .rail-group.open {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
}
.rail-btn.active::before {
  content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--primary);
}
.rail-badge {
  position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 9px; background: var(--primary); color: #fff;
  font-size: 0.62rem; font-weight: 700; line-height: 16px;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--sidebar-bg);
}
.rail-badge.rail-badge-warn { background: var(--danger); }
/* Statische BETA-Pille auf einem Rail-Eintrag (z. B. Disposition). Sitzt unten
   mittig, in Warn-Ton, damit „experimentell" sofort lesbar ist. */
.rail-btn .nav-beta {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  font-size: 0.48rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1;
  padding: 1px 3px; border-radius: 4px;
  background: var(--warning, #d98a00); color: #fff;
  box-shadow: 0 0 0 1.5px var(--sidebar-bg);
}
/* Beta-Gate: verbirgt statische Reste, wenn das Disposition-Modul aus ist. */
body.dispo-off .dispo-feature { display: none !important; }
body.projektzeit-off .projektzeit-feature { display: none !important; }
/* Bereichsknopf: Klick führt zur Landing-Page, der Chevron öffnet das Flyout. */
.rail-chevron {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.55rem; color: var(--text-dim); opacity: 0.55;
}
.rail-btn:hover .rail-chevron, .rail-group.open .rail-chevron { opacity: 1; color: var(--text-main); }
.rail-chevron:hover { background: rgba(var(--ink-rgb), 0.10); }

/* Bereichsleiste — zweite Ebene unter dem Seitenkopf (Meldung #111). Eine
   Haarlinie, Text-Knöpfe, aktiver Punkt in Primärfarbe. */
.bereichsleiste[hidden] { display: none; }   /* das Attribut muss die Regel darunter schlagen */
.bereichsleiste {
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
  margin: -0.6rem 0 1.6rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--panel-border);
  font-size: 0.85rem;
}
.bereichsleiste .bl-bereich {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; color: var(--text-main); white-space: nowrap;
  border: none; background: transparent; padding: 0.2rem 0; font: inherit; font-weight: 700;
}
.bereichsleiste .bl-bereich i { color: var(--text-muted); font-size: 0.8em; }
.bereichsleiste .bl-zurueck { cursor: pointer; }
.bereichsleiste .bl-zurueck:hover { color: var(--primary); }
.bereichsleiste .bl-zurueck:hover i { color: var(--primary); }
.bereichsleiste .bl-items { display: flex; align-items: center; gap: 0.2rem 1.1rem; flex-wrap: wrap; }
.bereichsleiste .bl-item {
  position: relative; border: none; background: transparent; padding: 0.2rem 0;
  font: inherit; color: var(--text-muted); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.bereichsleiste .bl-item:hover { color: var(--text-main); }
.bereichsleiste .bl-item.active { color: var(--primary); font-weight: 600; }
.bereichsleiste .bl-item.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -0.65rem; height: 2px; background: var(--primary);
}
.bereichsleiste .flyout-badge { position: static; }
.rail-status { font-size: 0.6rem; margin: 4px 0; }
.rail-version { font-size: 0.55rem; color: var(--text-dim); opacity: 0.6; }

/* Flyout-Untermenü */
.nav-flyout {
  position: fixed; left: 64px; top: 0; bottom: 0; width: 236px;
  background: var(--panel-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--panel-border);
  box-shadow: var(--glass-shadow);
  padding: 16px 12px; z-index: 25;
  display: flex; flex-direction: column; gap: 3px;
  transition: opacity .16s ease, transform .16s ease;
}
.nav-flyout[aria-hidden="true"] { opacity: 0; transform: translateX(-12px); pointer-events: none; }
.nav-flyout[aria-hidden="false"] { opacity: 1; transform: translateX(0); }
.flyout-head {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); font-weight: 700; padding: 4px 10px 10px;
}
.flyout-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; border: none; background: transparent; cursor: pointer;
  color: var(--text-secondary); font-family: inherit; font-size: 0.9rem;
  padding: 9px 10px; border-radius: 9px; text-align: left;
  transition: background .12s, color .12s;
}
.flyout-item i { width: 18px; text-align: center; font-size: 0.95rem; }
.flyout-item span { flex: 1; }
.flyout-item:hover { background: var(--field-bg); color: var(--text-main); }
.flyout-item.active { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); font-weight: 600; }
.flyout-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--danger); color: #fff; font-size: 0.65rem; font-weight: 700;
  align-items: center; justify-content: center; display: none;
}

/* Command-Palette */
.cmd-palette-overlay {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh;
}
.cmd-palette {
  width: min(600px, 92vw); max-height: 62vh; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--panel-border);
  border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,0.5); overflow: hidden;
}
.cmd-palette-input-row {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-bottom: 1px solid var(--panel-border); color: var(--text-muted);
}
.cmd-palette-input-row input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text-main); font-size: 1.05rem; font-family: inherit;
}
.cmd-palette-hint {
  font-size: 0.7rem; color: var(--text-dim); border: 1px solid var(--panel-border);
  border-radius: 6px; padding: 2px 6px;
}
.cmd-palette-list { overflow-y: auto; padding: 8px; }
.cmd-palette-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 10px; cursor: pointer; color: var(--text-secondary);
}
.cmd-palette-item i { width: 18px; text-align: center; color: var(--text-muted); }
.cmd-palette-item .cmd-palette-label { flex: 1; color: var(--text-main); }
.cmd-palette-item .cmd-palette-group { font-size: 0.72rem; color: var(--text-dim); }
.cmd-palette-item.active { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.cmd-palette-item.active i, .cmd-palette-item.active .cmd-palette-group { color: var(--primary); }
.cmd-palette-empty { padding: 2rem; text-align: center; color: var(--text-muted); }

/* ══ Light-Mode Polish: lesbare Akzent-/Statusfarben auf hellem Grund ══════════ */
[data-theme="light"] {
  /* Hier sind die Akzente DUNKEL — also weiße Schrift darauf (4,8–5,0:1). */
  --on-accent: #ffffff;
  /* Teal-700 statt -600: als Text auf Weiß 5,3:1 (war 4,0), und Weiß auf dem
     gefüllten Knopf 4,6:1 (war 3,7). Beide Richtungen gewinnen. */
  --primary: #0f766e;
  --primary-hover: #115e59;
  --success: #15803d;
  --warning: #b45309;
  --danger: #dc2626;
  --accent: #b45309;
  --accent-green: #15803d;
  --accent-rose: #e11d48;
  --accent-purple: #7c3aed;
}
/* Hart kodierte Inline-Blautöne (CRM-Chips/Stats/Icons) im Light-Mode lesbar */
[data-theme="light"] .crm-filter-chip,
[data-theme="light"] #crm-stat-total,
[data-theme="light"] #crm-stat-regiondo { color: #1d4ed8 !important; }
[data-theme="light"] .fa-globe { color: #0369a1 !important; }
/* Dunkler Tabellenkopf → helle Tokenfarbe */
[data-theme="light"] .stellar-table thead,
[data-theme="light"] .stellar-table th { background: var(--table-header-bg) !important; }
/* Amber-Statuswerte etwas abdunkeln */
[data-theme="light"] .regiondo-status-card .status-value.warn { color: #b45309 !important; }

/* ── Flyout „Menü anpassen"-Link ── */
.flyout-customize {
  margin-top: auto; display: flex; align-items: center; gap: 12px; width: 100%;
  border: none; border-top: 1px solid var(--panel-border); background: transparent; cursor: pointer;
  color: var(--text-muted); font-family: inherit; font-size: 0.82rem; padding: 12px 10px 4px;
}
.flyout-customize:hover { color: var(--primary); }
.flyout-customize i { width: 18px; text-align: center; }

/* ── „Menü anpassen"-Panel ── */
.navc-overlay {
  position: fixed; inset: 0; z-index: 10002; background: rgba(0,0,0,0.5); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.navc-modal {
  width: min(560px, 94vw); max-height: 82vh; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--panel-border);
  border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,0.5); overflow: hidden;
}
.navc-head { padding: 18px 20px 10px; border-bottom: 1px solid var(--panel-border); }
.navc-head h3 { margin: 0 0 4px; }
.navc-head p { margin: 0; color: var(--text-muted); font-size: 0.82rem; }
.navc-body { overflow-y: auto; padding: 12px 16px; }
.navc-group { margin-bottom: 16px; }
.navc-group-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 700; margin-bottom: 6px; }
.navc-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  background: var(--field-bg); border: 1px solid var(--panel-border); margin-bottom: 6px;
}
.navc-item.navc-dragging { opacity: 0.5; }
.navc-drag { cursor: grab; color: var(--text-dim); }
.navc-icon { width: 18px; text-align: center; color: var(--text-secondary); }
.navc-label { flex: 1; color: var(--text-main); }
.navc-up, .navc-down {
  background: transparent; border: 1px solid var(--panel-border); border-radius: 6px;
  color: var(--text-secondary); cursor: pointer; width: 26px; height: 26px;
}
.navc-up:hover, .navc-down:hover { color: var(--primary); border-color: var(--primary); }
.navc-toggle { display: flex; align-items: center; }
.navc-foot { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--panel-border); }
.navc-foot .action-btn { width: auto; padding: 8px 16px; }
.navc-primary { background: var(--primary); color: #fff; border: none; }

/* ── Command-Palette: verschachtelte Kategorien ── */
.cmd-cat-head {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
  color: var(--text-muted); padding: 12px 12px 5px; display: flex; align-items: center; gap: 8px;
}
.cmd-cat-head:first-child { padding-top: 4px; }
.cmd-cat-more { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-dim); font-size: 0.7rem; }

/* ── uiPrompt-Modal (Ersatz für window.prompt, das Electron nicht kann) ───── */
.uid-overlay {
  position: fixed; inset: 0; z-index: 10050; background: rgba(0,0,0,0.5); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.uid-modal {
  width: min(460px, 92vw); padding: 22px;
  background: var(--bg-card); border: 1px solid var(--panel-border);
  border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,0.5);
}
.uid-title { margin: 0 0 6px; font-size: 1.05rem; }
.uid-message { margin: 0 0 12px; color: var(--text-muted); font-size: 0.85rem; max-height: 60vh; overflow-y: auto; }
.uid-input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px;
  background: var(--field-bg); border: 1px solid var(--panel-border);
  color: var(--text-main); font-size: 0.9rem; font-family: inherit; resize: vertical;
}
.uid-input:focus { outline: none; border-color: var(--primary); }
.uid-input.uid-invalid { border-color: var(--danger); }
.uid-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.uid-foot .action-btn { width: auto; padding: 8px 18px; }
.uid-foot .uid-cancel {
  background: var(--field-bg); color: var(--text-muted); border: 1px solid var(--panel-border);
}
.uid-foot .uid-cancel:hover { color: var(--text-main); }
.uid-primary { background: var(--primary); color: var(--on-accent, #fff); border: none; }
/* Zerstörende Bestätigung: der Knopf sagt es, bevor man ihn drückt. */
.uid-danger { background: var(--danger, #ef4444); color: #fff; border: none; }

/* ── Abwesenheiten im Fahrten-Kalender ───────────────────────────────────── */
.cal-absence-chip {
  margin-top: 4px; display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.68rem; padding: 2px 7px; border-radius: 20px;
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  cursor: default; white-space: nowrap;
}
.cal-absence-list {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--field-bg); border: 1px solid var(--panel-border);
}
.cal-absence-head {
  font-size: 0.8rem; font-weight: 600; color: var(--warning); margin-bottom: 8px;
}
.cal-absence-name {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 8px 6px 0;
  font-size: 0.82rem; color: var(--text-main);
}
.cal-absence-type {
  font-size: 0.7rem; padding: 1px 7px; border-radius: 20px;
  background: var(--panel-bg); color: var(--text-muted); border: 1px solid var(--panel-border);
}

/* ── Abwesenheitsmatrix (Mitarbeiter × Tage) ─────────────────────────────── */
.abs-scroll {
  overflow-x: auto; border: 1px solid var(--panel-border); border-radius: 12px;
  background: var(--panel-bg);
}
.abs-table { border-collapse: collapse; width: 100%; font-size: 0.78rem; }
.abs-table th, .abs-table td { border: 1px solid var(--table-border, var(--panel-border)); }
.abs-table thead th {
  position: sticky; top: 0; z-index: 2; padding: 6px 2px; text-align: center;
  background: var(--table-header-bg, var(--field-bg)); color: var(--text-muted); font-weight: 600;
}
.abs-table th.abs-name {
  position: sticky; left: 0; z-index: 3; min-width: 160px; text-align: left;
  padding: 6px 12px; background: var(--table-header-bg, var(--field-bg)); color: var(--text-main);
}
.abs-table tbody th.abs-name { z-index: 1; font-weight: 500; }
.abs-day { min-width: 30px; }
.abs-day span { font-size: 0.62rem; opacity: 0.7; }
.abs-cell { height: 30px; min-width: 30px; text-align: center; }
.abs-weekend { background: color-mix(in srgb, var(--text-muted) 10%, transparent); }
.abs-total { text-align: center; font-weight: 700; color: var(--text-muted); min-width: 38px; }

/* ── Meldungs-Gruppen im Message-Center ─────────────────────────────────── */
/* Die Kategoriefarben kommen als feste Hex-Werte vom Server (lib/messages.js)
   und werden auch vom Schiffs-Tablet benutzt — dort dürfen sie nicht kippen.
   Für den hellen Bürohintergrund werden sie hier generisch abgedunkelt, statt
   eine zweite Farbtabelle zu pflegen: #f59e0b auf Weiß war 1,3:1. */
.msg-group-head { color: var(--kat, var(--text-main)); }
[data-theme="light"] .msg-group-head { color: color-mix(in srgb, var(--kat, #000) 58%, #000); }

.msg-group-head {
  display: flex; align-items: center; gap: 8px;
  margin: 1.4rem 0 0.6rem; font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.msg-group-head:first-child { margin-top: 0; }
.msg-group-head span {
  background: var(--field-bg); border: 1px solid var(--panel-border);
  color: var(--text-muted); border-radius: 20px; padding: 0 8px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0;
}

/* ── System & Diagnose ──────────────────────────────────────────────────── */
.sys-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.sys-card { padding: 18px 20px; }
.sys-card h3 {
  margin: 0 0 14px; font-size: 0.95rem; display: flex; align-items: center; gap: 8px;
}
.sys-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 5px 0; font-size: 0.85rem; color: var(--text-muted);
  border-bottom: 1px solid color-mix(in srgb, var(--panel-border) 50%, transparent);
}
.sys-row:last-child { border-bottom: none; }
.sys-row strong { color: var(--text-main); font-weight: 600; text-align: right; }
.sys-bar-wrap { margin-bottom: 10px; }
.sys-bar {
  height: 7px; border-radius: 20px; background: var(--field-bg);
  overflow: hidden; margin-top: 4px;
}
.sys-bar div { height: 100%; border-radius: 20px; transition: width 0.4s ease; }
.uid-error {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  color: var(--danger); font-size: 0.85rem; font-weight: 500;
}

/* ── Fahrten-Ansicht: Werkzeugleiste, Listenansicht, Karten-Zusätze ─────────── */
.fahrten-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 10px 12px; border-radius: 12px;
  background: var(--panel-bg, rgba(255,255,255,0.03)); border: 1px solid var(--panel-border, rgba(255,255,255,0.08));
}
.fahrten-toolbar .ft-spacer { flex: 1; }
.ft-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ft-chip {
  padding: 7px 14px; border-radius: 20px; border: 1px solid rgba(var(--ink-rgb), 0.12);
  background: transparent; color: var(--text-muted); font-size: 0.85rem; cursor: pointer;
  font-family: inherit; transition: all .12s;
}
.ft-chip:hover { color: var(--text-main); }
.ft-chip.on { background: rgba(45,212,191,0.15); border-color: rgba(45,212,191,0.45); color: var(--primary, #2dd4bf); font-weight: 600; }
/* Ist ein Zeitraum gesetzt, greifen die Schnellfilter nicht — das muss man sehen,
   sonst wundert man sich, warum „Heute" nichts bewirkt (Meldung #14). */
.ft-chip.gedimmt { opacity: .4; }
.ft-zeitraum { display: flex; align-items: center; gap: 5px; }
.ft-zeitraum > span { color: var(--text-muted); }
.ft-zeitraum input[type="date"] { color-scheme: dark; min-width: 132px; }
.ft-select {
  padding: 8px 12px; border-radius: 9px; background: #1e293b; border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-main); font-size: 0.88rem; cursor: pointer; font-family: inherit; max-width: 220px;
}
.ft-viewtoggle { display: flex; border: 1px solid rgba(var(--ink-rgb), 0.12); border-radius: 9px; overflow: hidden; }
.ft-view {
  padding: 8px 12px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.95rem;
}
.ft-view.on { background: rgba(45,212,191,0.15); color: var(--primary, #2dd4bf); }

/* Karten-Zusatz: gezählt-Ist-Marke (Listenansicht) + Sprungknöpfe.
   `.tour-ist-line` ist entfallen — die gezählte Zahl steht auf der Kachel jetzt
   im Auslastungsbalken statt als eigene Zeile darunter. */
.tour-ist-chip { padding:2px 8px; border-radius:10px; background:rgba(56,189,248,0.15); color:#7dd3fc; font-weight:600; }
.tour-jump-btns { position:absolute; bottom:10px; left:10px; display:flex; gap:6px; z-index:15; }
/* Die Sprungknöpfe liegen absolut über der Kachel und belegen unten 40px, der
   Karteninhalt hält aber nur 24px frei. Alles, was neu unter dem Balken steht,
   braucht diesen Abstand — sonst schiebt sich der Knopf über die Auswahl. */
.tour-bar-fuss { margin-top:5px; font-size:0.75rem; opacity:0.7; margin-bottom:20px; }
.tour-ship-pick-wrap { margin-top:7px; margin-bottom:20px; }
.tour-jump-btns .jump {
  width:30px; height:30px; border-radius:7px; border:1px solid var(--panel-border, rgba(var(--ink-rgb), 0.15));
  background:rgba(15,25,45,0.75); color:#cbd5e1; cursor:pointer; font-size:0.8rem; display:flex; align-items:center; justify-content:center;
}
.tour-jump-btns .jump:hover { color:#fff; border-color:var(--primary,#2dd4bf); }

/* Listenansicht (kompakte Tabelle) */
.fahrten-table { width:100%; border-collapse:collapse; font-size:0.9rem; }
.fahrten-table thead th {
  text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted);
  padding:8px 12px; border-bottom:1px solid var(--panel-border, rgba(255,255,255,0.1)); position:sticky; top:0; background:var(--bg-color,#0a1424); cursor:pointer; white-space:nowrap;
}
.fahrten-table tbody td { padding:9px 12px; border-bottom:1px solid rgba(var(--ink-rgb), 0.05); }
.fahrten-table tbody tr { cursor:pointer; }
.fahrten-table tbody tr:hover { background:rgba(var(--ink-rgb), 0.03); }
.fahrten-table tbody tr.past-row { opacity:0.5; }
.ft-occ-bar { display:inline-block; width:64px; height:6px; border-radius:3px; background:rgba(var(--ink-rgb), 0.1); overflow:hidden; vertical-align:middle; margin-right:6px; }
.ft-occ-bar > span { display:block; height:100%; border-radius:3px; }
.ft-status { padding:2px 8px; border-radius:8px; font-size:0.72rem; font-weight:600; }
.ft-status.past { background:rgba(120,120,140,0.25); color:#b8c2d0; }
.ft-status.online { background:rgba(45,212,191,0.15); color:var(--primary,#2dd4bf); }
.ft-status.unpaid { background:rgba(239,68,68,0.15); color:#fca5a5; }
.fahrten-table .ft-jump { color:var(--text-muted); cursor:pointer; padding:4px 6px; }
.fahrten-table .ft-jump:hover { color:var(--primary,#2dd4bf); }

/* ── Mitarbeiter-Übersicht ─────────────────────────────────────────────────── */
.ma-mono { font-family: 'Courier New', ui-monospace, monospace; font-size: 0.92em; }
#mitarbeiter-container .ma-row:hover { background: var(--table-row-hover); }
#mitarbeiter-container details.ma-sec > summary { list-style: none; }
#mitarbeiter-container details.ma-sec > summary::-webkit-details-marker { display: none; }
#mitarbeiter-container details.ma-sec[open] > summary > .fa-chevron-down { transform: rotate(180deg); }

/* ═══════════════════════════════════════════════════════════════════════════
   Barrierefreiheit (Audit-Fixes) — additiv, ändert nichts am bestehenden Look.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tastatur-Fokus sichtbar machen. :focus-visible greift NUR bei Tastatur-Navigation
   (nicht bei Maus-Klick) — für Maus-Nutzer bleibt alles unverändert. Hilft vor allem
   Buttons/Links/klickbaren Elementen, die bisher keinen Fokus-Stil hatten. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Bewegungsempfindlichkeit respektieren: Reise-Animationen entfernen, aber
   Zustandswechsel-Feedback (Farbe/Deckkraft) kurz erhalten — KEIN globaler 0-Kill. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.12s !important;
    scroll-behavior: auto !important;
  }
}

/* Präsenz an der Fahrt: wer sonst gerade dieselbe Gästeliste bearbeitet. */
.tour-praesenz {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 6px; font-size: 0.82rem; font-weight: 600;
  background: rgba(224, 166, 58, 0.15); color: #e0a63a; border: 1px solid rgba(224, 166, 58, 0.4);
}
/* Leer nimmt es keinen Platz — der Normalfall ist, dass niemand sonst da ist.
   Muss NACH der Regel oben stehen, sonst gewinnt deren `display`. */
.tour-praesenz:empty { display: none; }

/* ── Notizen & Übergabe (Fahrt/Einsatz) ─────────────────────────────────────
   Bewusst schlicht: das hier wird gelesen, während jemand am Telefon ist. */
.notiz-panel { margin-top: 18px; padding: 14px 16px; }
.notiz-panel h3 { font-size: 0.95rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.notiz-form { display: flex; gap: 8px; margin-bottom: 12px; }
.notiz-form input {
  flex: 1; padding: 9px 12px; border-radius: 8px; font-size: 0.9rem;
  background: var(--field-bg); color: var(--text-main); border: 1px solid var(--panel-border);
}
.notiz-form .action-btn { width: auto; padding: 8px 16px; }
.notiz-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.notiz-liste li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px;
  border-radius: 8px; background: rgba(var(--ink-rgb), 0.04); }
.notiz-txt { flex: 1; font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.notiz-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 3px; }
.notiz-del { background: none; border: none; color: var(--text-muted); cursor: pointer;
  padding: 2px 6px; border-radius: 5px; font-size: 0.85rem; }
.notiz-del:hover { color: var(--danger); background: rgba(239, 68, 68, 0.12); }
.notiz-leer { color: var(--text-muted); font-size: 0.85rem; padding: 6px 2px; }

/* Erwähnung in einer Notiz: hebt den Adressaten hervor, ohne zu schreien. */
.notiz-at { color: var(--primary); font-weight: 700; }

/* ── Reservierungen an der Fahrt ────────────────────────────────────────────
   Sie belegen keine Plätze; die Gestaltung soll sie deshalb klar von der
   Gästeliste trennen, ohne sie zu verstecken. */
.resv-panel { margin-top: 18px; padding: 14px 16px; }
.resv-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.resv-panel h3 { font-size: 0.95rem; margin: 0; display: flex; align-items: center; gap: 8px; }
.resv-summe { font-size: 0.82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.resv-hinweis { margin: 4px 0 12px; font-size: 0.78rem; color: var(--text-muted); }
.resv-form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.resv-form input, .resv-form select {
  padding: 8px 11px; border-radius: 8px; font-size: 0.88rem;
  background: var(--field-bg); color: var(--text-main); border: 1px solid var(--panel-border);
}
.resv-form #resv-name { flex: 2 1 160px; }
.resv-form #resv-phone { flex: 1 1 120px; }
.resv-form #resv-pax { width: 76px; }
.resv-form #resv-tisch { flex: 2 1 170px; }
.resv-form .action-btn { width: auto; padding: 8px 16px; }
.resv-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.resv-liste li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 9px 12px; border-radius: 8px; background: rgba(var(--ink-rgb), 0.04); }
.resv-liste li.erledigt { opacity: 0.55; }
.resv-name { font-weight: 600; }
.resv-pax { font-variant-numeric: tabular-nums; font-weight: 700; }
.resv-detail { font-size: 0.8rem; color: var(--text-muted); flex: 1 1 100%; }
.resv-akt { display: flex; gap: 6px; margin-left: auto; }
.resv-akt button { background: none; border: 1px solid var(--panel-border); color: var(--text-muted);
  cursor: pointer; padding: 3px 9px; border-radius: 6px; font-size: 0.78rem; }
.resv-akt button:hover { color: var(--text-main); border-color: var(--primary); }
.resv-leer { color: var(--text-muted); font-size: 0.85rem; padding: 6px 2px; }

/* ── Tischplan ──────────────────────────────────────────────────────────────
   Der Plan ist die Hauptsache im Bereich; alles andere ordnet sich unter. */
.tp-panel { margin-top: 18px; padding: 14px 16px; }
.tp-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tp-panel h3 { font-size: 0.95rem; margin: 0; display: flex; align-items: center; gap: 8px; }
.tp-info { font-size: 0.82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tp-akt { margin-left: auto; }
.tp-akt .action-btn { width: auto; padding: 6px 14px; font-size: 0.82rem; }
.tp-flaeche { width: 100%; overflow-x: auto; }
.tp-svg { width: 100%; min-width: 640px; height: auto; display: block;
  background: rgba(0, 0, 0, 0.18); border-radius: 8px; touch-action: none; }
.tp-tisch { cursor: pointer; }
.tp-tisch:hover .tp-form { stroke: var(--primary); stroke-width: 0.07; }
.tp-tisch.an .tp-form { stroke: var(--primary); stroke-width: 0.1; }
.tp-tisch.aussen { cursor: not-allowed; }
.tp-tisch-txt { font-size: 0.34px; fill: rgba(255, 255, 255, 0.75); font-weight: 700; pointer-events: none; }
.tp-tisch-gast { font-size: 0.26px; fill: rgba(255, 255, 255, 0.9); pointer-events: none; }
.tp-einbau-txt { font-size: 0.32px; fill: rgba(255, 255, 255, 0.45); pointer-events: none; }
.tp-meldung { margin-top: 10px; font-size: 0.84rem; }
.tp-meldung .warn { color: var(--warning); }
.tp-vorschlag { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tp-vorschlag span { padding: 3px 9px; border-radius: 6px; background: rgba(255,255,255,0.06); font-size: 0.8rem; }

/* ── Werkzeuge an der Fahrt: Tischplan · Reservierungen · Notizen ───────────
   Vorher lagen die drei als Kacheln untereinander unter der Gästeliste — man
   scrollte an allen dreien vorbei und arbeitete mit keiner. Reiter zeigen auf
   einen Blick, dass es sie gibt, und was darin liegt. */
.fahrt-werkzeuge { margin-top: 18px; }
.fw-reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--panel-border); flex-wrap: wrap; }
.fw-tab {
  padding: 9px 16px; border: none; background: none; cursor: pointer;
  color: var(--text-muted); font-family: inherit; font-size: 0.92rem; font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px;
}
.fw-tab:hover { color: var(--text-main); }
.fw-tab.an { color: var(--primary); border-bottom-color: var(--primary); }
.fw-zahl { font-size: 0.75rem; font-weight: 700; padding: 1px 7px; border-radius: 9px;
  background: rgba(var(--ink-rgb), 0.1); font-variant-numeric: tabular-nums; }
.fw-zahl:empty { display: none; }
.fahrt-werkzeuge > section { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }

/* ── Tischplan: Arbeitsfläche ───────────────────────────────────────────────
   Gäste links, Deck rechts. Setzen heißt: Namen nehmen, Tisch antippen —
   beides muss gleichzeitig sichtbar sein, sonst klickt man blind. */
.tp-arbeit { display: flex; gap: 14px; align-items: flex-start; }
.tp-arbeit .tp-flaeche { flex: 1; min-width: 0; }
.tp-gaeste { flex: 0 0 220px; max-height: 340px; display: flex; flex-direction: column;
  background: rgba(0, 0, 0, 0.18); border-radius: 8px; padding: 10px; }
.tp-gaeste-kopf { display: flex; justify-content: space-between; align-items: center;
  font-size: 0.8rem; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; }
.tp-gastliste { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex;
  flex-direction: column; gap: 5px; }
.tp-gastliste li { display: flex; align-items: center; gap: 8px; padding: 6px 9px;
  border-radius: 7px; background: rgba(var(--ink-rgb), 0.05); cursor: pointer; font-size: 0.84rem; }
.tp-gastliste li:hover { background: rgba(var(--ink-rgb), 0.1); }
.tp-gastliste li.an { background: var(--primary); color: #0f172a; font-weight: 700; }
.tp-gastliste li.gesetzt { opacity: 0.5; }
.tp-gast-pax { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 1.4em; }
.tp-gast-wunsch { font-size: 0.72rem; opacity: 0.75; }
.tp-leer { color: var(--text-muted); font-size: 0.82rem; padding: 4px 2px; }
/* Beim Setzen zeigen, wo es passt und wo nicht — sonst probiert man herum. */
.tp-svg.setzen .tp-tisch.passt .tp-form { stroke: var(--success); stroke-width: 0.09; }
.tp-svg.setzen .tp-tisch.zueng .tp-form { opacity: 0.4; }
/* Meldung #257: hier passt ein Teil der Gruppe, der Rest geht an den nächsten Tisch. */
.tp-svg.setzen .tp-tisch.teils .tp-form { stroke: var(--warning); stroke-width: 0.09; stroke-dasharray: 0.18 0.1; }
.tp-gast-wunsch.tp-teil { color: var(--warning); font-weight: 600; }
/* Meldung #253: die Stühle am Tisch — frei als Umriss, besetzt gefüllt. */
/* Füllung kommt als SVG-Attribut (frei: none, besetzt: blau) — hier KEIN fill,
   sonst überstimmt das Stylesheet es und besetzte Stühle bleiben unsichtbar. */
.tp-stuhl { stroke-width: 0.03; }
.tp-stuhl.besetzt { stroke: none; }
@media (max-width: 900px) {
  .tp-arbeit { flex-direction: column; }
  .tp-gaeste { flex: none; width: 100%; max-height: 200px; }
}

/* ── Tischplan-Einstellungen (Schiffe) ──────────────────────────────────────
   Werkzeuge über dem Plan, nicht daneben: der Plan ist lang und schmal und
   braucht die volle Breite. */
.tps-werkzeuge { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.tps-block { flex: 1 1 300px; background: rgba(0, 0, 0, 0.18); border-radius: 8px; padding: 12px 14px; }
.tps-titel { display: block; font-size: 0.8rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 9px; }
.tps-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tps-btn { padding: 7px 13px; border-radius: 7px; cursor: pointer; font-family: inherit;
  font-size: 0.83rem; font-weight: 600; color: var(--text-main);
  background: rgba(var(--ink-rgb), 0.07); border: 1px solid var(--panel-border); }
.tps-btn:hover { border-color: var(--primary); color: var(--primary); }
.tps-btn.gefahr { margin-top: 10px; color: var(--danger); border-color: rgba(239, 68, 68, 0.4); }
.tps-btn.gefahr:hover { background: rgba(239, 68, 68, 0.12); color: var(--danger); }
.tps-feld { display: flex; align-items: center; gap: 8px; font-size: 0.84rem;
  color: var(--text-muted); margin-bottom: 8px; }
.tps-feld input, .tps-feld select { padding: 6px 10px; border-radius: 6px; font-size: 0.85rem;
  background: var(--field-bg); color: var(--text-main); border: 1px solid var(--panel-border); }
.tps-feld input { width: 78px; }
.tps-hinweis { margin: 0; font-size: 0.76rem; color: var(--text-muted); }
.tps-tisch-kopf { font-size: 0.9rem; margin-bottom: 9px; }
.tps-reihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.tps-reihe .tps-feld { margin-bottom: 0; }
.tps-auswahl { padding: 6px 10px; border-radius: 6px; font-size: 0.85rem; background: var(--field-bg);
  color: var(--text-main); border: 1px solid var(--panel-border); }
.tps-anlegen { padding: 1.5rem; color: var(--text-muted); }
.tps-anlegen p { margin: 0 0 12px; }
.tp-einbau.greifbar { cursor: move; }
.tp-einbau.greifbar:hover polygon { stroke: var(--primary); }
.tp-einbau.an polygon { stroke: var(--primary); stroke-width: 0.1; }
.tps-tisch-leer { color: var(--text-muted); font-size: 0.84rem; padding: 6px 0 10px; }

/* ── Verkauf: buchen oder nur vormerken ─────────────────────────────────────
   Zwei klar getrennte Vorgänge statt einer Buchung, die man hinterher
   zurückdreht. Der Unterschied steht dran, nicht nur im Kopf der Kollegin. */
.vk-modus { display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.vk-modus-btn { flex: 1 1 200px; text-align: left; padding: 10px 14px; border-radius: 9px;
  cursor: pointer; font-family: inherit; color: var(--text-main);
  background: rgba(var(--ink-rgb), 0.05); border: 1px solid var(--panel-border); }
.vk-modus-btn b { display: block; font-size: 0.92rem; }
.vk-modus-btn small { display: block; font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; }
.vk-modus-btn:hover { border-color: var(--primary); }
.vk-modus-btn.an { border-color: var(--primary); background: rgba(56, 189, 248, 0.12); }
.vk-modus-btn.an small { color: var(--text-main); opacity: 0.8; }

/* Farbpunkt der Fahrtkategorie — Systematik aus dem Planungskalender.
   Ein Punkt neben dem Namen, kein farbiger Rand an der Karte: er steht bei dem,
   was er beschreibt, und im Kalender ist es genauso gelöst.
   Stand bis eben doppelt (hier 7px, im <style>-Block von index.html 6px) — der
   spätere Inline-Block gewann. Es bleibt bei dessen 6px, damit sich nichts verschiebt. */
.kat-punkt {
  display: inline-block; border-radius: 50%; margin-right: 6px;
  vertical-align: middle; flex: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   „Was ist neu" — Versionsverlauf (Quelle: CHANGELOG.md über /api/changelog)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Knopf auf der Startseite */
.hub-neu-btn {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 14px; padding: 8px 16px 8px 14px;
  border-radius: 999px; cursor: pointer;
  font-size: 0.85rem; font-weight: 600;
  color: var(--accent-lavender);
  background: rgba(167, 139, 250, 0.14);
  border: 1px solid rgba(167, 139, 250, 0.32);
  transition: background 0.15s, transform 0.15s;
}
.hub-neu-btn:hover { background: rgba(167, 139, 250, 0.24); transform: translateY(-1px); }
.hub-neu-btn .hub-neu-v {
  font-variant-numeric: tabular-nums; font-size: 0.76rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(167, 139, 250, 0.22); color: var(--on-lavender);
}
/* Ein Punkt, solange diese Version noch nicht angesehen wurde. */
.hub-neu-btn.ungelesen::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
}

/* Kopfzeile der Ansicht */
.nv-kopf {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  margin-bottom: 20px;
}
.nv-filter { display: flex; gap: 2px; padding: 3px; border-radius: 10px;
  background: rgba(var(--ink-rgb), 0.05); border: 1px solid rgba(var(--ink-rgb), 0.09); }
.nv-filter button {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  padding: 6px 14px; border-radius: 8px; font-size: 0.82rem; font-weight: 600;
}
.nv-filter button:hover { background: rgba(var(--ink-rgb), 0.07); color: var(--text-main); }
.nv-filter button.aktiv { background: rgba(167, 139, 250, 0.2); color: var(--accent-lavender); }
#nv-suche {
  flex: 1; min-width: 200px; max-width: 340px;
  padding: 8px 14px; border-radius: 10px; font-size: 0.85rem;
  background: var(--field-bg); border: 1px solid var(--panel-border); color: var(--text-main);
}
#nv-suche:focus { outline: none; border-color: var(--primary); }

/* Zeitstrahl: eine durchgehende Linie, an der die Versionen hängen. */
.nv-liste { position: relative; padding-left: 28px; }
.nv-liste::before {
  content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.5), rgba(167, 139, 250, 0.05));
}
.nv-v { position: relative; margin-bottom: 10px; }
.nv-v::before {
  content: ''; position: absolute; left: -25px; top: 15px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--panel-bg); border: 2px solid rgba(167, 139, 250, 0.55);
}
/* Die neueste Version bekommt den vollen Punkt — sie ist der Stand. */
.nv-v.aktuell::before { background: #a78bfa; border-color: #a78bfa;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.18); }

.nv-v-kopf {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  width: 100%; text-align: left; cursor: pointer;
  padding: 11px 14px; border-radius: 12px;
  background: rgba(var(--ink-rgb), 0.03);
  border: 1px solid var(--panel-border);
  color: var(--text-main); font: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.nv-v-kopf:hover { background: rgba(var(--ink-rgb), 0.06); border-color: rgba(167, 139, 250, 0.3); }
.nv-v-kopf:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.nv-v-nr { font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; color: var(--accent-lavender); }
.nv-v-titel { font-weight: 600; font-size: 0.9rem; flex: 1; min-width: 0; }
.nv-v-datum { font-size: 0.76rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nv-v-meldung {
  font-size: 0.72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: rgba(56, 189, 248, 0.14); color: #7dd3fc;
}
.nv-v-pfeil { color: var(--text-muted); transition: transform 0.2s; font-size: 0.8rem; }
.nv-v-kopf[aria-expanded="true"] .nv-v-pfeil { transform: rotate(90deg); }

.nv-v-koerper { padding: 4px 14px 16px; display: flex; flex-direction: column; gap: 14px; }
/* Meldung #193: Das Einklappen tat nichts. `display: flex` aus der Zeile
   darüber ist spezifischer als das eingebaute `[hidden] { display: none }` des
   Browsers — das Attribut wurde gesetzt und blieb wirkungslos. Dieselbe Falle
   wie bei `.bereichsleiste` und `.tour-loch`. */
.nv-v-koerper[hidden] { display: none; }
.nv-zeig {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  margin-top: 2px; padding: 0.4rem 0.9rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.82rem; font-weight: 600;
  background: rgba(var(--ink-rgb), 0.06); color: var(--text-main); border: 1px solid var(--panel-border);
}
.nv-zeig:hover { border-color: var(--primary); color: var(--primary); }
.nv-ab-titel { font-weight: 700; font-size: 0.88rem; color: var(--text-main); margin-bottom: 5px; }
/* Das Zitat aus der Meldung — der Satz, der die Änderung ausgelöst hat. */
.nv-zitat {
  border-left: 2px solid rgba(56, 189, 248, 0.5);
  padding: 4px 0 4px 12px; margin-bottom: 8px;
  color: #7dd3fc; font-size: 0.85rem; font-style: italic;
}
.nv-text { font-size: 0.86rem; line-height: 1.65; color: var(--text-muted); }
.nv-text strong { color: var(--text-main); font-weight: 600; }
.nv-text code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.86em;
  background: rgba(var(--ink-rgb), 0.07); padding: 1px 5px; border-radius: 4px;
  color: var(--text-main);
}
.nv-text ul { margin: 6px 0; padding-left: 20px; }
.nv-text li { margin: 3px 0; }
.nv-text table { border-collapse: collapse; margin: 8px 0; font-size: 0.82rem; }
.nv-text th, .nv-text td { padding: 5px 12px 5px 0; text-align: left; }
.nv-text th { color: var(--text-main); font-weight: 600; border-bottom: 1px solid var(--panel-border); }
.nv-leer { padding: 40px; text-align: center; color: var(--text-muted); }

@media (max-width: 720px) {
  .nv-liste { padding-left: 20px; }
  .nv-v::before { left: -18px; }
  .nv-v-datum { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Lernstand (Leitstand) — was das System aus Fahrten und Zählungen gelernt hat
   ═══════════════════════════════════════════════════════════════════════════ */
/* Meldung #45: Der Lernstand ist kein Fenster mehr, sondern eine Seite in den
   Einstellungen. Overlay und Kopfleiste sind damit weggefallen. */
.lrn-laedt { padding: 40px 0; color: var(--text-muted); font-size: 0.86rem; }
/* Automatik & KI (#129): eine Zeile je Ablauf — Symbol, Name + Zweck, Schalter */
.atk-zeile { display: grid; grid-template-columns: 24px 1fr auto; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--panel-border); }
.atk-zeile > i { color: var(--primary); text-align: center; }
.atk-titel { font-weight: 600; font-size: 0.92rem; }
.atk-was { font-size: 0.8rem; color: var(--text-muted); }
.atk-steuerung { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 10px; font-size: 0.85rem; max-width: min(520px, 48vw); }
/* Stempel-Rückfragen tragen acht Zahlenfelder: ohne Umbruch drückten sie den Text zu einer schmalen Spalte und liefen rechts hinaus. */
.atk-steuerung > * { white-space: nowrap; }
.atk-wert { color: var(--text-muted); }
.atk-schalter, .atk-zahl { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.atk-schalter input { width: 18px; height: 18px; accent-color: var(--primary); }
.atk-zahl input { width: 64px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--input-color); font-family: inherit; }

.lrn-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.lrn-k { padding: 14px; border-radius: 12px; background: rgba(var(--ink-rgb), 0.04); border: 1px solid var(--panel-border); }
.lrn-k.mi-k-klick { cursor: pointer; }
.lrn-k.mi-k-klick:hover, .lrn-k.mi-k-klick:focus-visible { border-color: var(--warning); outline: none; }
.lrn-k-z { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--primary); line-height: 1.1; }
.lrn-k-t { font-size: 0.82rem; font-weight: 600; margin-top: 2px; }
.lrn-k-s { font-size: 0.74rem; color: var(--text-muted); margin-top: 5px; line-height: 1.45; }

.lrn-bewegung {
  margin: 16px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 0.84rem; line-height: 1.6;
  background: rgba(var(--ink-rgb), 0.04); color: var(--text-muted);
}
.lrn-bewegung b { color: var(--text-main); }
.lrn-bewegung.hoch { background: color-mix(in srgb, var(--success) 10%, transparent); }
.lrn-bewegung.runter { background: color-mix(in srgb, var(--warning) 10%, transparent); }

.lrn-verlauf { margin-top: 18px; }
.lrn-verlauf-t, .lrn-tab-t { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.lrn-balken { display: flex; gap: 6px; align-items: flex-end; height: 82px; }
.lrn-b { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.lrn-b-f { width: 100%; background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 40%, transparent)); border-radius: 4px 4px 0 0; min-height: 3px; }
.lrn-b span { font-size: 0.64rem; color: var(--text-muted); margin-top: 4px; font-variant-numeric: tabular-nums; }

.lrn-tab-t { margin-top: 20px; }
.lrn-tab { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.lrn-tab th { text-align: left; font-weight: 600; color: var(--text-muted); padding: 5px 8px; border-bottom: 1px solid var(--panel-border); }
.lrn-tab td { padding: 5px 8px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.05); }
.lrn-tab .r { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Fahrtzeiten: Dauer je Fahrtart, mit Herkunft und Korrekturmöglichkeit ── */
.lrn-zeiten-kopf {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap; margin-top: 28px;
}
.lrn-hinweis { margin: 6px 0 0; font-size: 0.76rem; color: var(--text-muted); line-height: 1.6; max-width: 62ch; }
.lrn-zeiten-werkzeug { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.lrn-zeiten-werkzeug input[type="search"] {
  background: rgba(var(--ink-rgb), 0.05); border: 1px solid var(--panel-border);
  color: var(--text-main); border-radius: 8px; padding: 7px 11px; font-size: 0.8rem; min-width: 190px;
}
.lrn-btn, .lrn-mini {
  background: rgba(var(--ink-rgb), 0.06); border: 1px solid var(--panel-border);
  color: var(--text-main); border-radius: 8px; cursor: pointer;
  padding: 7px 13px; font-size: 0.8rem; font-weight: 600;
}
.lrn-btn:hover, .lrn-mini:hover { background: rgba(var(--ink-rgb), 0.11); }
.lrn-btn:disabled { opacity: 0.5; cursor: default; }
.lrn-mini { padding: 3px 9px; font-size: 0.72rem; font-weight: 500; color: var(--text-muted); }
.lrn-mini.ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); }
/* Ohne feste Spaltenbreiten zieht die Tabelle auf 1300 px auseinander und die
   Dauer steht einen halben Bildschirm von ihrer Fahrtart entfernt. */
.lrn-zeiten { margin-top: 12px; max-width: 940px; table-layout: fixed; }
.lrn-zeiten th:nth-child(2), .lrn-zeiten td:nth-child(2) { width: 110px; }
.lrn-zeiten th:nth-child(3), .lrn-zeiten td:nth-child(3) { width: 130px; }
.lrn-zeiten th:nth-child(4), .lrn-zeiten td:nth-child(4) { width: 170px; }
.lrn-zeiten th:nth-child(5), .lrn-zeiten td:nth-child(5) { width: 90px; }
.lrn-zeiten td:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrn-zeiten-kopf { max-width: 940px; }
.lrn-kacheln, .lrn-tab:not(.lrn-zeiten) { max-width: 940px; }
.lrn-zeiten tbody tr:hover { background: rgba(var(--ink-rgb), 0.03); }
.lrn-leer { padding: 22px 8px; text-align: center; color: var(--text-muted); }
.lrn-eingabe {
  background: rgba(var(--ink-rgb), 0.07); border: 1px solid var(--panel-border);
  color: var(--text-main); border-radius: 6px; padding: 3px 7px;
  font-size: 0.78rem; width: 92px; font-variant-numeric: tabular-nums;
}
/* Die Herkunft ist die wichtigste Spalte der Tabelle: sie sagt, wie belastbar
   die Zahl daneben ist. Deshalb als eigenes Etikett und nicht als Kleingedrucktes. */
.lrn-q {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.lrn-q-gemessen   { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.lrn-q-hand       { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.lrn-q-plan       { background: rgba(96, 165, 250, 0.16); color: #93c5fd; }
.lrn-q-gelernt    { background: rgba(167, 139, 250, 0.16); color: var(--accent-lavender); }
.lrn-q-abgeleitet { background: rgba(var(--ink-rgb), 0.06); color: var(--text-muted); }
.lrn-q-kalender   { background: rgba(var(--ink-rgb), 0.06); color: var(--text-muted); }
.wk-marke-check { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.wk-text .wiki-link { color: var(--primary); text-decoration: underline dotted; }
.wk-text .wiki-link.fehlt, .wk-netz .wiki-link.fehlt { color: var(--danger); text-decoration: underline dashed; }
.wk-netz { display: flex; flex-direction: column; gap: 8px; margin-top: 1.4rem; padding-top: 0.9rem;
  border-top: 1px solid var(--panel-border); max-width: 80ch; }
.wk-netz > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wk-netz-titel { font-size: 0.78rem; color: var(--text-muted); min-width: 92px; }
.wk-netz-link { cursor: pointer; font-family: inherit; background: none; }
.wk-netz-link:hover { border-color: var(--primary); color: var(--primary); }
.wk-verweis-einfuegen { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wk-verweis-einfuegen select { padding: 6px 10px; border-radius: 6px; background: var(--field-bg);
  color: var(--text-main); border: 1px solid var(--panel-border); font-size: 0.85rem; }
.lrn-q-ais        { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.lrn-halt-w { color: var(--text-muted); font-size: 0.74rem; }
.lrn-n { font-size: 0.68rem; color: var(--text-muted); margin-left: 6px; font-variant-numeric: tabular-nums; }

/* Meldung #48: Interessenten sind anklickbar — das muss man ihnen ansehen. */
.ls-int-z { cursor: pointer; display: flex; align-items: baseline; gap: 6px; }
.ls-int-z:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.ls-int-plus {
  margin-left: auto; font-size: 0.68rem; color: var(--primary);
  opacity: 0; transition: opacity 0.12s ease; white-space: nowrap;
}
.ls-int-z:hover .ls-int-plus, .ls-int-z:focus-visible .ls-int-plus { opacity: 1; }

/* Meldung #58: warum jemand im Pool fehlt. Bewusst leise — es ist eine Auskunft,
   keine Warnung, und die Namen stehen absichtlich nicht dabei. */
.ls-pool-hinweis {
  margin-top: 14px; padding: 7px 10px; border-radius: 8px;
  font-size: 0.72rem; line-height: 1.45; color: var(--text-muted);
  background: rgba(var(--ink-rgb), 0.04); cursor: help;
}

/* ── Mailimport (GetYourGuide) ──────────────────────────────────────────────
   Nutzt bewusst die Bausteine der Lernstand-Seite (.lrn-kacheln, .lrn-tab,
   .lrn-q, .lrn-btn, .lrn-mini) — es sind die Grundformen der Einstellungs-
   seiten, nicht Eigenheiten des Lernstands. Hier steht nur, was dazukommt. */
.mi-warnung {
  padding: 12px 16px; border-radius: 10px; margin-bottom: 18px;
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  color: var(--text-main); font-size: 0.82rem; line-height: 1.6; max-width: 78ch;
}
.mi-warnung code {
  background: rgba(var(--ink-rgb), 0.08); border-radius: 4px;
  padding: 1px 5px; font-size: 0.78rem;
}

/* Der Modus ist die wichtigste Aussage der Seite: schreibt der Import gerade
   in den Betrieb oder nicht? Deshalb steht er ganz oben und trägt Farbe. */
.mi-modus {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 14px 18px; border-radius: 12px; margin-bottom: 20px; max-width: 940px;
  background: rgba(var(--ink-rgb), 0.04); border: 1px solid var(--panel-border);
}
.mi-modus.ist-scharf {
  background: color-mix(in srgb, var(--success) 10%, transparent);
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
}
.mi-modus-titel { font-weight: 700; font-size: 0.9rem; }
.mi-modus p { margin: 4px 0 0; font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; max-width: 62ch; }
.lrn-btn.ist-aktion {
  background: color-mix(in srgb, var(--success) 22%, transparent);
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
  color: var(--success);
}

.mi-produkte, .mi-eingang { max-width: 1100px; }
.mi-produkte td:first-child { max-width: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-zeit { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 0.74rem; }
.mi-betreff { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-ref { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mi-buchung { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-hinweis { font-size: 0.72rem; color: var(--warning); margin-top: 3px; max-width: 260px; line-height: 1.45; }

/* Welche Angaben in der Mail gefunden wurden — und welche nicht. Daran wird
   das Muster nachgezogen, wenn GetYourGuide seine Formulierung ändert. */
.mi-felder { display: flex; flex-wrap: wrap; gap: 3px; max-width: 200px; }
.mi-feld {
  font-size: 0.65rem; padding: 1px 6px; border-radius: 4px;
  background: rgba(var(--ink-rgb), 0.06); color: var(--text-muted);
}
.mi-feld.ok { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.mi-feld.fehlt {
  background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger);
  text-decoration: line-through;
}

.mi-roh-overlay {
  position: fixed; inset: 0; z-index: 9999; padding: 32px;
  background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.mi-roh {
  width: min(860px, 100%); max-height: 84vh; display: flex; flex-direction: column;
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 14px; padding: 18px 22px;
}
.mi-roh-kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.mi-roh pre {
  margin: 0; overflow: auto; font-size: 0.76rem; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; color: var(--text-muted);
}

.lrn-offen {
  margin-top: 18px; padding: 10px 14px; border-radius: 10px; font-size: 0.78rem; line-height: 1.6;
  background: color-mix(in srgb, var(--warning) 9%, transparent); color: var(--text-muted);
}
.lrn-offen b { color: var(--text-main); }

/* ── Termine und Gruppen (Meldung #55) ──────────────────────────────────────
   Der Termin-Dialog baut auf .uid-modal auf, braucht aber mehr Platz als eine
   Eingabezeile: Titel, Zeiten, Zuständigkeiten, Notiz. */
.trm-modal { width: min(620px, 94vw); max-height: 88vh; overflow-y: auto; }
.trm-label {
  display: block; margin: 14px 0 4px; font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted);
}
.trm-reihe { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 10px; align-items: end; }
.trm-reihe .trm-label { margin-top: 0; }
.trm-add { grid-template-columns: 1fr 1.4fr auto; margin-top: 8px; }
.trm-add .action-btn { width: auto; padding: 10px 16px; font-size: 0.82rem; }

.trm-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; align-items: center; }
.trm-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: color-mix(in srgb, var(--accent-lavender) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-lavender) 38%, transparent);
  /* War fest #ddd6fe — im Hellmodus 1,09:1 gegen die eigene Tönung, also
     praktisch unsichtbar. --accent-lavender kippt zwischen den Themen und ist
     genau dafür gedacht: Schrift auf gleichfarbigem Chip. */
  color: var(--accent-lavender);
  border-radius: 999px; padding: 3px 6px 3px 8px; font-size: 0.78rem; font-weight: 600;
}
.trm-chip button {
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: 0.95rem; line-height: 1; padding: 0 3px; opacity: 0.65;
}
.trm-chip button:hover { opacity: 1; }
/* Wer ausführt, nicht nur Bescheid weiß. Der Stern ist gefüllt UND der Rahmen
   kräftiger — Farbe allein trüge die Unterscheidung nicht für jeden. */
.trm-chip .trm-rolle { opacity: 0.55; font-size: 0.85rem; }
.trm-chip .trm-rolle:hover { opacity: 1; }
.trm-chip-chef {
  background: color-mix(in srgb, var(--accent-lavender) 26%, transparent);
  border-color: var(--accent-lavender);
}
.trm-chip-chef .trm-rolle { opacity: 1; }

.trm-neben { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-dim); }

/* Meldung #95: der Ausweg aus der leeren Gruppenliste. Ein Link, kein Knopf —
   er verlässt den Dialog, statt in ihm etwas zu tun. */
.trm-hinweis { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.35rem; min-height: 1em; }
.trm-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--primary); font: inherit; font-size: inherit; text-decoration: underline;
}
.trm-link:hover { color: var(--text-main); }
.trm-mehr { margin-top: 16px; border-top: 1px solid var(--panel-border); padding-top: 6px; }
.trm-mehr > summary {
  cursor: pointer; list-style: none; padding: 8px 0;
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted);
}
.trm-mehr > summary::-webkit-details-marker { display: none; }
.trm-mehr > summary::before { content: '▸ '; }
.trm-mehr[open] > summary::before { content: '▾ '; }
.trm-mehr > summary:hover { color: var(--text-main); }
.trm-mehr .trm-reihe { grid-template-columns: 1fr 1fr; }
p.trm-neben { margin: 8px 0 0; font-size: 0.78rem; }
.trm-leer { color: var(--text-muted); font-size: 0.8rem; }
.trm-laedt { color: var(--text-muted); font-size: 0.85rem; padding: 12px 2px; }
.trm-hinweis { margin: 0 0 16px; font-size: 0.82rem; color: var(--text-muted); max-width: 72ch; line-height: 1.6; }

.trm-neu { display: flex; gap: 10px; align-items: center; max-width: 480px; margin-bottom: 18px; }
.trm-neu .action-btn { width: auto; padding: 10px 18px; font-size: 0.82rem; }
.trm-g-liste { display: flex; flex-direction: column; gap: 12px; }
.trm-g-karte {
  /* --panel-bg ist halbtransparent; eine Karte auf einer Karte würde durchscheinen. */
  background: var(--bg-card); border: 1px solid var(--panel-border);
  border-radius: 12px; padding: 14px 16px;
}
.trm-g-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.trm-g-kopf strong { font-size: 0.95rem; }
.trm-g-zahl { font-size: 0.76rem; color: var(--text-muted); margin-right: auto; }
.trm-g-leute {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 4px 14px; max-height: 230px; overflow-y: auto;
}
.trm-g-person {
  display: flex; align-items: center; gap: 7px; font-size: 0.83rem;
  color: var(--text-main); cursor: pointer; padding: 2px 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Berichte & Fahrgäste — zwei Ansichten, ein Aufbau
   ─────────────────────────────────────────────────────────────────────────
   Beide Seiten hatten ihre Reiter als gleichrangige Reihe: elf bei den
   Berichten, drei bei den Fahrgästen. Elf gleich große Ziele sind keine
   Navigation, sondern eine Liste, durch die man sich klickt. Neu ist ein
   zweistufiger Aufbau — Bereich, dann Bericht — und darunter immer dieselbe
   Reihenfolge: erst die Antwort (Kennzahlen), dann die Form (Diagramm),
   dann der Beleg (Tabelle).

   Alle Farben laufen über Tokens. Die alten Inline-Farben (`rgba(59,130,246,
   0.15)`, `color:var(--text-muted)`) standen im Markup und waren im
   Hellmodus nicht mehr zu treffen.
   ══════════════════════════════════════════════════════════════════════════ */

.rep-kopf {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 1.1rem;
}

/* ── Ebene 1: Bereich ── Segmentierte Auswahl, drei breite Ziele ─────────── */
.rep-bereiche {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--field-bg); border: 1px solid var(--panel-border);
  border-radius: 11px;
}
.rep-bereich {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1.05rem; border: none; border-radius: 8px;
  background: transparent; color: var(--text-muted);
  font-family: inherit; font-size: 0.86rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.rep-bereich:hover { color: var(--text-main); }
.rep-bereich i { font-size: 0.92em; opacity: 0.85; }
.rep-bereich.aktiv {
  background: var(--bg-card); color: var(--text-main);
  box-shadow: 0 1px 3px rgba(0,0,0,0.22), 0 0 0 1px var(--panel-border) inset;
}
.rep-bereich:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Ebene 2: Bericht ── ruhiger, nur Text mit Unterstrich ───────────────── */
.rep-unter {
  display: flex; gap: 0.15rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--panel-border); margin-bottom: 1.4rem;
}
.rep-unter-btn {
  padding: 0.55rem 0.85rem; border: none; background: none;
  color: var(--text-muted); font-family: inherit; font-size: 0.85rem;
  font-weight: 600; cursor: pointer; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.rep-unter-btn:hover { color: var(--text-main); }
.rep-unter-btn.aktiv { color: var(--primary); border-bottom-color: var(--primary); }
.rep-unter-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 4px 4px 0 0; }

/* ── Filterzeile ─────────────────────────────────────────────────────────── */
.rep-filter { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.rep-filter label { font-size: 0.82rem; color: var(--text-muted); }
.rep-filter input[type="date"], .rep-filter select {
  padding: 0.42rem 0.6rem; border-radius: 8px;
  background: var(--input-bg); border: 1px solid var(--input-border);
  color: var(--input-color); font-family: inherit; font-size: 0.85rem;
}

/* ── Kennzahlen ── aus den Daten des offenen Berichts, ohne Extra-Abfrage ── */
.rep-kennzahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.7rem; margin-bottom: 1.2rem;
}
.rep-kz {
  padding: 0.85rem 1rem; border-radius: 12px;
  background: var(--panel-bg); border: 1px solid var(--panel-border);
}
.rep-kz-wert {
  font-size: 1.5rem; font-weight: 700; color: var(--text-main);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.rep-kz-label {
  font-size: 0.76rem; color: var(--text-muted); margin-top: 0.2rem;
  letter-spacing: 0.02em;
}
/* Zusatzzeile trägt Information, keine Dekoration: Anteil, Spanne, Zeitraum. */
.rep-kz-neben { font-size: 0.74rem; color: var(--text-dim); margin-top: 0.35rem; }

/* ── Diagramm ── nur wo eine Kurve schneller liest als eine Spalte ───────── */
.rep-diagramm {
  padding: 1rem 1.1rem 0.6rem; border-radius: 12px; margin-bottom: 1.2rem;
  background: var(--panel-bg); border: 1px solid var(--panel-border);
}
.rep-diagramm h4 {
  font-size: 0.85rem; font-weight: 600; color: var(--text-secondary);
  margin-bottom: 0.7rem;
}
.rep-diagramm-flaeche { height: 190px; position: relative; }

/* ── Tabelle ── waagerecht scrollbar, nie die Seite ──────────────────────── */
.rep-tabelle-rahmen { overflow-x: auto; }

/* ── Seitenwahl ── 121 Zeilen am Stück waren keine Liste, sondern eine Wand ─ */
.rep-seiten {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: 0.8rem 0.2rem 0.2rem;
  border-top: 1px solid var(--panel-border); margin-top: 0.6rem;
}
.rep-seiten-info { font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rep-seiten-knoepfe { display: flex; gap: 0.3rem; align-items: center; }
.rep-seite {
  min-width: 32px; padding: 0.32rem 0.55rem; border-radius: 7px;
  border: 1px solid var(--panel-border); background: var(--field-bg);
  color: var(--text-main); font-family: inherit; font-size: 0.8rem;
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.rep-seite:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.rep-seite.aktiv { background: color-mix(in srgb, var(--primary) 16%, transparent); border-color: var(--primary); color: var(--primary); font-weight: 700; }
.rep-seite:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Leerzustand ── sagt, warum nichts da ist, nicht nur dass ────────────── */
.rep-leer { padding: 2.6rem 1.5rem; text-align: center; }
.rep-leer i { font-size: 1.7rem; color: var(--text-dim); margin-bottom: 0.7rem; display: block; }
.rep-leer-titel { font-size: 0.95rem; font-weight: 600; color: var(--text-main); margin-bottom: 0.3rem; }
.rep-leer-text { font-size: 0.84rem; color: var(--text-muted); max-width: 46ch; margin: 0 auto; line-height: 1.5; }

@media (max-width: 760px) {
  .rep-bereiche { width: 100%; }
  .rep-bereich { flex: 1; justify-content: center; padding: 0.5rem 0.6rem; }
  .rep-bereich span { display: none; }
  .rep-kennzahlen { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
}

/* ── Berichte · System ── Einordnung unter den Kennzahlen, nicht daneben ──── */
.rep-sys { padding: 1.1rem 1.3rem; }
.rep-sys h4 { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.9rem; }
.rep-sys-zeile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding: 0.7rem 0; border-top: 1px solid var(--panel-border);
}
.rep-sys-zeile:first-of-type { border-top: none; padding-top: 0; }

/* ── Geräte-Dashboard · eine Zeile je Terminal (Meldung #68) ─────────────────
   Achtung beim Nachrechnen: die Wurzel-Schriftgröße steht auf 12px, nicht 16.
   0.7rem sind hier 8.4px — unlesbar klein. Die Maße unten sind an .stat-line
   (0.88rem) und den vorherigen Gerätekarten (1.05/1.2rem) ausgerichtet.
   Ersetzt neun Karten mit je einem 160-px-Diagramm. Die Maße stehen hier und
   nicht inline, weil `element.style.display = ''` sonst das ganze Attribut
   mitnimmt — dieselbe Falle wie beim Kalender. */
.zt-geraete { display: flex; flex-direction: column; }
.zt-geraet {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto auto auto;
  align-items: center;
  gap: 0.5rem 1.4rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--panel-border);
}
.zt-geraet:first-child { border-top: none; padding-top: 0; }

/* Ein noch nicht angelerntes Gerät: drei Spalten statt vier (es hat keine
   Scan-Zahlen), und die mittlere trägt die Messwerte. */
.zt-geraet-neu { grid-template-columns: minmax(190px, 1fr) auto auto; }

/* Die Messwerte stehen unter der Kennung, nicht daneben: in der Zeile eines
   registrierten Geräts ist die erste Spalte die einzige, die wachsen darf. */
.zt-geraet-mess {
  display: block; margin-top: 0.25rem;
  font-size: 0.82rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.zt-geraet-neu .zt-geraet-mess { margin-top: 0; }

.zt-geraet-name { font-size: 1.05rem; font-weight: 600; color: var(--text-main); }
.zt-geraet-id {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.9rem; color: var(--text-muted); margin-top: 0.2rem;
}
.zt-geraet-zahlen { display: flex; gap: 1.3rem; }
/* min-width, damit die Spalten fluchten: ohne sie richtet sich jede Zeile nach
   ihrer eigenen Ziffernbreite, und ein vierstelliger Wert schiebt seine Zeile
   aus der Flucht der übrigen. */
.zt-geraet-z { text-align: right; min-width: 3.6rem; }
.zt-geraet-z b {
  display: block; font-size: 1.2rem; font-weight: 700;
  color: var(--text-main); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.zt-geraet-z span { font-size: 0.88rem; color: var(--text-muted); }
/* Zustands-Abzeichen: Farbe am Symbol, Text auf --text-main. Trüge der Text die
   Farbe, käme „Offline" im Hellmodus auf 3,86:1 gegen seine eigene Tönung. */
.zt-zustand {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.7rem; border-radius: 8px;
  font-size: 0.88rem; font-weight: 600;
  color: var(--text-main); white-space: nowrap;
}
.zt-zustand i { font-size: 0.9em; }
.zt-zustand.gut      { background: color-mix(in srgb, var(--success) 14%, transparent); }
.zt-zustand.gut i    { color: var(--success); }
.zt-zustand.schlecht { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.zt-zustand.schlecht i { color: var(--danger); }
.zt-zustand.still    { background: color-mix(in srgb, var(--text-muted) 14%, transparent); }
.zt-zustand.still i  { color: var(--text-muted); }
.zt-zustand.info     { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.zt-zustand.info i   { color: var(--primary); }

.zt-geraet-tat { display: flex; gap: 0.4rem; }
.zt-geraet-tat button {
  background: transparent; border: 1px solid var(--panel-border);
  color: var(--text-muted); border-radius: 8px;
  padding: 0.34rem 0.55rem; cursor: pointer; font-size: 0.85rem;
}
.zt-geraet-tat button:hover { color: var(--text-main); border-color: var(--text-dim); }
.zt-geraet-tat .zt-dev-del { border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); }

/* Schmal: Zustand und Zahlen rutschen unter den Namen, statt sich zu quetschen. */
@media (max-width: 780px) {
  .zt-geraet { grid-template-columns: 1fr auto; }
  .zt-geraet-zahlen { grid-column: 1 / -1; justify-content: space-between; gap: 0.8rem; }
}
.rep-sys-label { font-size: 0.9rem; color: var(--text-main); }
.rep-sys-hinweis { font-size: 0.76rem; color: var(--text-dim); margin-top: 0.15rem; }
.rep-sys-wert { font-size: 1.25rem; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Berichte · CSV-Knopf ── war fest auf Dunkelmodus-Teal (1,1:1 auf hell) ─ */
.rep-csv {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.9rem; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  /* Ein Ton dunkler als --primary: auf der eigenen Tönung reicht Teal-600
     nicht (gemessen 2,96:1), Teal-800 schon. */
  color: var(--primary-hover); font-family: inherit; font-size: 0.82rem;
  font-weight: 600; cursor: pointer; transition: background .16s ease;
}
.rep-csv:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.rep-csv:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.rep-mx-probe { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }

/* ── Fahrgäste · Meldungskarte ──────────────────────────────────────────────
   Die Kategorie steckte in einem 4px-Farbstreifen links — die einzige
   Zuordnung, und im Hellmodus der einzige kräftige Fleck auf der Seite.
   Jetzt trägt sie der Rahmen und eine sehr leichte Tönung der Fläche. */
.msg-karte {
  padding: 1rem 1.2rem; margin-bottom: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--kat, var(--panel-border)) 38%, var(--panel-border));
  background: color-mix(in srgb, var(--kat, transparent) 5%, var(--panel-bg));
}
.msg-kat-icon { color: var(--kat, var(--text-muted)); }
/* Die Kategoriefarben sind für dunklen Grund gewählt — auf hellem abdunkeln. */
[data-theme="light"] .msg-kat-icon { color: color-mix(in srgb, var(--kat, #000) 58%, #000); }

/* ── Berichte · Anteilsbalken ───────────────────────────────────────────────
   Die Füllung lief über `width` mit `transition:width` — eine Layout-
   Eigenschaft zu animieren kostet bei jedem Bild einen Umbruch. Über
   `transform: scaleX()` bleibt es auf der Compositor-Ebene. Die Rinne lag
   auf rgba(255,255,255,0.05) und war im Hellmodus nicht zu sehen. */
.rep-balken {
  /* Nicht --field-bg: das ist im Hellmodus reines Weiß und auf der ebenfalls
     weißen Karte unsichtbar — der leere Teil des Balkens muss ablesbar sein. */
  background: color-mix(in srgb, var(--text-main) 12%, transparent);
  border-radius: 4px; height: 8px; overflow: hidden;
}
.rep-balken-fuell {
  /* Kein eigener Radius: scaleX würde ihn waagerecht stauchen, und die Rinne
     beschneidet ohnehin. */
  height: 100%; width: 100%;
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) { .rep-balken-fuell { transition-duration: 0.12s; } }

/* ── Berichte · Suche in der Mitarbeiter-Auswertung (Meldung #66) ─────────── */
.rep-suche {
  position: relative; display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.rep-suche > i {
  position: absolute; left: 0.85rem; color: var(--text-dim);
  pointer-events: none; font-size: 0.85rem;
}
.rep-suche input {
  flex: 1; padding: 0.55rem 0.8rem 0.55rem 2.3rem; border-radius: 9px;
  background: var(--input-bg); border: 1px solid var(--input-border);
  color: var(--input-color); font-family: inherit; font-size: 0.88rem;
}
.rep-suche input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.rep-suche-treffer {
  font-size: 0.8rem; color: var(--text-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Der Name führt zum Stammsatz — als Knopf, nicht als angemalter Text. */
.rep-ma-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-weight: 500; color: var(--text-main); text-align: left;
}
.rep-ma-link i { color: var(--primary); }
.rep-ma-link:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.rep-ma-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* ── uiFormular ── mehrere Felder in einem Dialog (Meldung #64) ──────────── */
.uid-feld { margin-bottom: 12px; }
.uid-label {
  display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px;
}
.uid-feld .uid-input { margin: 0; }
.uid-fehler { color: var(--danger); margin: 0 0 8px; }

/* ── Fahrtenliste: Datum und Zeit in einer Spalte (Meldung #74) ───────────── */
/* „das datum … im deutschen format also tag monat jahr … und im idealfall auch
   nebeneinander". Zwei Spalten für einen Zeitpunkt waren doppelt so breit und
   halb so lesbar. */
.fahrten-table .ft-wann {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fahrten-table .ft-uhr {
  margin-left: 8px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ── Schiffe ── eine Karte je Schiff statt einer Zeile mit sieben Spalten ──── */
/* Meldung #67: „das Layout hier ist noch unschön." In der Tabelle trug eine
   einzige Zelle fünf Bedienelemente. Bei sechs Schiffen ist die Karte das
   ehrlichere Format — jede Zeile eine Sache, Bezeichnung daneben statt im
   Spaltenkopf drei Bildschirmbreiten weiter oben. */
.schiff-karten { display: flex; flex-direction: column; gap: 0.9rem; }
.schiff-karte { padding: 1rem 1.2rem; }
.schiff-karte-kopf {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  padding-bottom: 0.85rem; margin-bottom: 0.2rem;
  border-bottom: 1px solid var(--panel-border);
}
/* Ein Feldstil statt 40 Inline-`style` je Zeile. */
.schiff-feld {
  padding: 0.42rem 0.6rem; border-radius: 8px;
  background: var(--input-bg); border: 1px solid var(--input-border);
  color: var(--input-color); font-family: inherit; font-size: 0.9rem;
}
.schiff-feld:focus { outline: none; border-color: var(--primary); }

@media (max-width: 720px) {
  /* Auf schmalem Schirm untereinander: der Wert rutscht sonst aus der Karte. */
  .schiff-karte .rep-sys-zeile { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .schiff-karte .rep-sys-zeile > div:last-child { justify-content: flex-start; }
}

/* ── Dienstplan-Setup · Checklisten-Vorlagen (1.25.1) ────────────────────────
   Bewusst eine Liste und keine Matrix wie Soll-Besatzung und Rüstzeiten: dort
   steht in jeder Zelle eine Zahl, hier ein Satz. Eine Matrix aus Sätzen wäre
   nicht lesbar.

   Achtung beim Nachrechnen: die Wurzel-Schriftgröße steht auf 12px, nicht 16.
   Und --text-dim reicht hier nicht: auf dem Seitengrund kommt es auf 4,1:1.
   Für Nebentext ist --text-muted die richtige Stufe (6,9:1). */
.ds-cl-block { margin-bottom: 1.6rem; }
.ds-cl-block h4 {
  font-size: 0.95rem; font-weight: 600; margin: 0 0 0.5rem;
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
}
.ds-cl-block h4 span {
  font-size: 0.82rem; font-weight: 400; color: var(--text-muted);
}
.ds-cl-zeile {
  display: grid;
  grid-template-columns: auto 7rem minmax(180px, 1fr) auto auto;
  align-items: center; gap: 0.9rem;
  padding: 0.6rem 0.2rem;
  border-top: 1px solid var(--panel-border);
}
.ds-cl-zeile:hover { background: rgba(var(--ink-rgb, 255, 255, 255), 0.03); }
.ds-cl-pflicht {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.76rem; color: var(--text-muted); cursor: pointer; white-space: nowrap;
}
.ds-cl-pflicht input { accent-color: var(--accent-amber); }
.ds-cl-kat { font-size: 0.8rem; color: var(--text-muted); }
.ds-cl-text { font-size: 0.92rem; color: var(--text-main); }
.ds-cl-bezug { font-size: 0.8rem; color: var(--text-muted); text-align: right; white-space: nowrap; }
.ds-cl-weg {
  background: transparent; border: 1px solid var(--panel-border);
  color: var(--text-muted); border-radius: 8px; padding: 0.3rem 0.55rem;
  cursor: pointer; font-size: 0.85rem; font-family: inherit;
}
.ds-cl-weg:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
/* Zwei Klicks. Der Knopf sitzt neben jeder Zeile — ein Versehen wäre still. */
.ds-cl-weg-sicher {
  color: var(--danger); border-color: var(--danger);
  font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.7rem;
}
.ds-cl-leer { font-size: 0.84rem; color: var(--text-muted); padding: 0.5rem 0.2rem; }

.ds-cl-neu {
  margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--panel-border);
}
.ds-cl-neu h4 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.7rem; }
.ds-cl-form {
  display: grid; grid-template-columns: auto auto auto minmax(200px, 1fr) auto auto;
  gap: 0.6rem; align-items: center;
}
.ds-cl-form select, .ds-cl-form input[type="text"] {
  padding: 0.5rem 0.7rem; border-radius: 8px; font-family: inherit; font-size: 0.88rem;
  border: 1px solid var(--panel-border); background: var(--field-bg); color: var(--text-main);
}
.ds-cl-form .action-btn { width: auto; padding: 0.5rem 1.1rem; font-size: 0.85rem; }
.ds-cl-fehler { margin: 0.6rem 0 0; font-size: 0.84rem; color: var(--danger); min-height: 1.1em; }

/* Schmal: Zeile und Formular brechen um, statt sich zu quetschen. */
@media (max-width: 900px) {
  .ds-cl-zeile { grid-template-columns: 1fr auto; gap: 0.4rem 0.8rem; }
  .ds-cl-zeile .ds-cl-text { grid-column: 1 / -1; order: -1; }
  .ds-cl-bezug { text-align: left; }
  .ds-cl-form { grid-template-columns: 1fr 1fr; }
  .ds-cl-form input[type="text"] { grid-column: 1 / -1; }
}

/* ═══ Wiki (1.26.0) ═════════════════════════════════════════════════════════
   Zwei Spalten: links die Seiten nach Bereich, rechts die Seite. Kein
   Editor-Dialog — bearbeitet wird an derselben Stelle, an der gelesen wird.
   Die Wurzel-Schriftgröße ist hier 12px, nicht 16 — rem-Werte danach rechnen. */
.wk-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  margin-bottom: 1rem;
}
.wk-unter { margin: 0.25rem 0 0; color: var(--text-muted); font-size: 0.85rem; max-width: 78ch; }

.wk-raum {
  display: grid; grid-template-columns: 280px 1fr; gap: 1rem;
  align-items: start;
}
@media (max-width: 900px) { .wk-raum { grid-template-columns: 1fr; } }

.wk-liste {
  background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 10px;
  padding: 0.6rem; max-height: 72vh; overflow-y: auto;
}
.wk-liste input[type="search"] {
  width: 100%; padding: 0.45rem 0.6rem; margin-bottom: 0.5rem;
  border-radius: 8px; border: 1px solid var(--panel-border);
  background: var(--field-bg); color: var(--text-main); font-family: inherit; font-size: 0.85rem;
}
.wk-gruppe {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); padding: 0.7rem 0.4rem 0.25rem;
}
.wk-eintrag {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: 7px;
  padding: 0.45rem 0.5rem; color: var(--text-main); font-family: inherit; font-size: 0.86rem;
}
.wk-eintrag:hover { background: rgba(var(--ink-rgb), 0.06); }
/* Die gewählte Seite trägt eine Fläche UND fetten Titel — Farbe allein wäre
   auf einem blassen Bildschirm zu wenig. */
.wk-eintrag.wk-an { background: rgba(var(--ink-rgb), 0.1); }
.wk-eintrag.wk-an .wk-e-titel { font-weight: 700; }
.wk-e-titel { display: block; }
.wk-e-bezug { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 1px; }

.wk-seite {
  background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 10px;
  padding: 1.1rem 1.3rem; min-height: 40vh;
}
.wk-s-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--panel-border); padding-bottom: 0.7rem; margin-bottom: 0.9rem;
}
.wk-s-kopf h3 { margin: 0 0 0.35rem; font-size: 1.25rem; }
.wk-s-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.wk-marke {
  font-size: 0.7rem; font-weight: 600;
  color: var(--text-muted); border: 1px solid var(--panel-border); border-radius: 5px;
  padding: 0.1rem 0.4rem;
}
/* Der Bezug ist die eigentliche Aussage der Seite — er darf sich vom Bereich
   unterscheiden lassen. */
.wk-marke-bezug { color: var(--accent); border-color: var(--accent); }
.wk-stand { font-size: 0.74rem; color: var(--text-muted); }
.wk-s-knoepfe { display: flex; gap: 0.4rem; flex: none; }
.wk-btn {
  width: auto; padding: 0.3rem 0.75rem; font-size: 0.78rem; box-shadow: none;
  background: rgba(var(--ink-rgb), 0.06); color: var(--text-main); border: 1px solid var(--panel-border);
}
.wk-gefahr { background: rgba(239, 68, 68, 0.12); color: var(--danger); border-color: rgba(239, 68, 68, 0.25); }

/* Der gerenderte Markdown-Text. Die Maße stehen hier und nicht im Renderer —
   an Bord braucht derselbe Text andere. */
.wk-text { font-size: 0.92rem; line-height: 1.65; max-width: 80ch; }
.wk-text h2 { font-size: 1.1rem; margin: 1.3rem 0 0.4rem; }
.wk-text h3 { font-size: 1rem; margin: 1.1rem 0 0.4rem; }
.wk-text h4 { font-size: 0.92rem; margin: 0.9rem 0 0.3rem; color: var(--text-muted); }
.wk-text p { margin: 0 0 0.7rem; }
.wk-text ul { margin: 0 0 0.7rem; padding-left: 1.4rem; }
.wk-text li { margin-bottom: 0.2rem; }
.wk-text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em;
  background: rgba(var(--ink-rgb), 0.08); border-radius: 4px; padding: 0.05rem 0.25rem;
}
/* Eine breite Tabelle scrollt in sich, nie die Seite. */
.wk-text table { display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 0.8rem; }
.wk-text th, .wk-text td { border: 1px solid var(--panel-border); padding: 0.3rem 0.6rem; text-align: left; }
.wk-text th { background: rgba(var(--ink-rgb), 0.05); }

.wk-leer { color: var(--text-muted); font-size: 0.85rem; padding: 0.5rem 0.4rem; }
.wk-leer-gross {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem; min-height: 30vh; color: var(--text-muted);
}
.wk-leer-gross i { font-size: 2rem; opacity: 0.5; }
.wk-leer-gross p { margin: 0; font-size: 0.9rem; }

/* ── Formular ── */
.wk-form { display: flex; flex-direction: column; gap: 0.8rem; }
.wk-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; font-weight: 600; }
.wk-form input[type="text"], .wk-form input:not([type]), .wk-form textarea {
  padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid var(--panel-border);
  background: var(--field-bg); color: var(--text-main); font-family: inherit; font-size: 0.88rem;
  font-weight: 400;
}
.wk-form textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.84rem; line-height: 1.6;
  resize: vertical;
}
.wk-hint { font-weight: 400; color: var(--text-muted); font-size: 0.78rem; }

.wk-bezug { border: 1px solid var(--panel-border); border-radius: 8px; padding: 0.6rem 0.8rem 0.8rem; }
.wk-bezug legend { font-size: 0.82rem; font-weight: 600; padding: 0 0.3rem; }
.wk-bezug-zeile { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; }
.wk-bezug-zeile select {
  padding: 0.35rem 0.5rem; border-radius: 7px; border: 1px solid var(--panel-border);
  background: var(--field-bg); color: var(--text-main); font-family: inherit; font-size: 0.82rem;
}
.wk-b-key { flex: 1; }
.wk-b-key select { width: 100%; }
.wk-b-weg {
  flex: none; width: 26px; height: 26px; border-radius: 6px; cursor: pointer;
  background: transparent; border: 1px solid var(--panel-border);
  color: var(--text-muted); font-size: 1rem; line-height: 1;
}
.wk-b-weg:hover { color: var(--danger); border-color: rgba(239, 68, 68, 0.35); }
.wk-form-knoepfe { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* ── 1.83.0: Baum, Symbol, Schlagworte, Reichweite ────────────────────────── */

/* Der Baum: die Einrückung kommt aus --tiefe, nicht aus verschachtelten
   Listen — der Ast ist damit eine flache Folge von Knöpfen und lässt sich
   ohne Umbau ein- und ausklappen. */
.wk-eintrag { display: grid; grid-template-columns: 14px 1fr; column-gap: 4px;
  padding-left: calc(0.5rem + var(--tiefe, 0) * 0.85rem); }
.wk-eintrag > .wk-e-titel, .wk-eintrag > .wk-e-bezug { grid-column: 2; }
.wk-klapp { grid-row: 1 / span 2; align-self: start; color: var(--text-muted);
  font-size: 0.7rem; line-height: 1.5; cursor: pointer; }
.wk-klapp:hover { color: var(--text-main); }
.wk-klapp-leer { cursor: inherit; }
/* Eine Seite ohne Bezug erscheint nirgends von selbst. Das steht als Wort da,
   nicht als Farbe allein — sonst liest es niemand. */
.wk-e-bezug.wk-ohne { font-style: italic; opacity: 0.7; }
.wk-marke-warn { color: var(--danger); border-color: rgba(239, 68, 68, 0.35); }

.wk-krumen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem;
  font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.wk-krumen button { background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--text-muted); }
.wk-krumen button:hover { color: var(--primary); text-decoration: underline; }
.wk-icon { margin-right: 0.4rem; }

.wk-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.wk-tag { background: rgba(var(--ink-rgb), 0.06); border: 0; border-radius: 999px;
  padding: 0.1rem 0.55rem; font: inherit; font-size: 0.74rem; color: var(--text-muted); cursor: pointer; }
.wk-tag:hover { color: var(--primary); }

.wk-titelzeile { display: flex; align-items: center; gap: 0.5rem; }
.wk-titelzeile input { flex: 1; font-size: 1.05rem !important; font-weight: 600 !important; }
.wk-icon-knopf { flex: none; width: 38px; height: 38px; font-size: 1.2rem; cursor: pointer;
  border-radius: 8px; border: 1px solid var(--panel-border); background: var(--field-bg); color: var(--text-muted); }
.wk-symbole { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.wk-symbole button { font-size: 1.1rem; width: 34px; height: 34px; cursor: pointer;
  border-radius: 7px; border: 1px solid var(--panel-border); background: var(--field-bg); }
.wk-symbole button:last-child { width: auto; padding: 0 0.6rem; font-size: 0.78rem; color: var(--text-muted); }
.wk-form-reihe { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.wk-form-reihe label { flex: 1 1 180px; }
.wk-form-reihe select, .wk-form-reihe input {
  padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid var(--panel-border);
  background: var(--field-bg); color: var(--text-main); font-family: inherit; font-size: 0.88rem; font-weight: 400;
}

/* Schreiben und Lesen nebeneinander — unter 1100 px untereinander, die
   Vorschau dann zusammengeschoben. */
.wk-schreib { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; align-items: start; }
.wk-schreib-spalte { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.wk-vorschau-titel { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }
.wk-vorschau { border: 1px solid var(--panel-border); border-radius: 8px; padding: 0.6rem 0.8rem;
  background: rgba(var(--ink-rgb), 0.02); max-height: 30rem; overflow-y: auto; }
@media (max-width: 1100px) {
  .wk-schreib { grid-template-columns: 1fr; }
  .wk-vorschau { max-height: 16rem; }
}

/* Die [[-Ergänzung hängt unter dem Textfeld, nicht über dem Cursor: eine
   Fläche, die mitwandert, verdeckt beim Tippen genau die Zeile darunter. */
.wk-vervoll { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: -0.4rem; }
.wk-vervoll button { border: 1px solid var(--panel-border); background: var(--field-bg);
  color: var(--text-main); border-radius: 6px; padding: 0.2rem 0.55rem; font: inherit;
  font-size: 0.8rem; cursor: pointer; }
.wk-vervoll button.an { border-color: var(--primary); color: var(--primary); font-weight: 600; }

.wk-reichweite { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--text-muted); }
.wk-reichweite.wk-warn { color: var(--danger); }

/* Bilder im Wiki (1.84.0). Die Breite folgt dem Textmaß, nie der Bildgröße —
   ein Handyfoto mit 4032 px sprengt sonst die Spalte. */
.wk-text img, .wk-vorschau img {
  display: block; max-width: 100%; height: auto; margin: 0.6rem 0;
  border-radius: 8px; border: 1px solid var(--panel-border);
}
.wk-bildzeile { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.3rem; }
#wk-f-text.wk-zieht { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent); }

/* Das Netz. Feste Höhe: die Simulation braucht eine Fläche, bevor sie rechnet,
   und eine aus dem Inhalt wachsende gäbe es hier nicht. */
.wk-graph { display: block; width: 100%; height: 60vh; min-height: 320px; }
.wk-graph-hint { display: block; text-align: center; margin: 0.2rem 0 0; }
.wk-netzknopf[aria-pressed="true"], #wk-netzknopf[aria-pressed="true"] {
  border-color: var(--primary); color: var(--primary);
}

/* Mehrere Buchungen auf denselben Namen — die erste Zeile der Gruppe nennt
   Anzahl und Summe. Zusammengelegt wird nicht: jede Buchung bleibt einzeln
   bearbeitbar. */
.buchungs-gruppe {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.01em;
  padding: 1px 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
}

/* Bearbeitungsstand einer Fahrt — „hat da jemand draufgeschaut?" */
.tour-geprueft {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 4px 10px; border-radius: 6px; font-family: inherit; font-size: 0.82rem;
  background: var(--field-bg); border: 1px solid var(--panel-border); color: var(--text-muted);
  transition: background .15s, color .15s, border-color .15s;
}
.tour-geprueft:hover { color: var(--text-main); }
.tour-geprueft.ist-geprueft {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
  color: var(--success);
}
/* Marke auf der Fahrtkarte in der Übersicht. */
.tour-geprueft-marke {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 12px; font-size: 0.8rem;
  background: rgba(16, 185, 129, 0.18); color: #34d399;
}

/* ── Projekte & Zeiten (Büro) ── */
.zp-feld { display:flex; flex-direction:column; gap:4px; font-size:0.78rem; color:var(--text-muted); }
.zp-feld input, .zp-feld select, #zp-body input:not([type="checkbox"]):not([type="color"]), #zp-body select {
  padding:0.45rem 0.6rem; border-radius:8px; border:1px solid var(--panel-border);
  background:var(--field-bg); color:var(--text-main); font-family:inherit; font-size:0.88rem;
}
.zp-feld input[type="color"] { padding:2px; height:36px; width:56px; }
.zp-tabelle th { text-align:left; padding:8px 10px; font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; border-bottom:1px solid var(--panel-border); }
.zp-tabelle td { padding:8px 10px; border-top:1px solid var(--panel-border); font-size:0.88rem; vertical-align:middle; }
.zp-zahl { display:inline-block; min-width:18px; padding:0 6px; border-radius:9px; background:var(--warning,#d98a00); color:#fff; font-size:0.7rem; font-weight:700; margin-left:4px; }
.zp-marke { font-size:0.7rem; color:var(--text-muted); border:1px solid var(--panel-border); border-radius:5px; padding:0 5px; margin-left:6px; }
.zp-tag { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:14px; background:rgba(var(--ink-rgb),0.06); border:1px solid var(--panel-border); font-size:0.85rem; }
.zp-tag button { border:0; background:transparent; color:var(--text-muted); cursor:pointer; font-size:1rem; line-height:1; padding:0; }
.zp-tag button:hover { color:var(--danger); }

/* ── 1.85.0: Projektzeit sieht aus wie der Rest der App ──────────────────────
   Vorher: graue Tabelle, Farbe nur als 10-px-Punkt, alle Maße als Inline-Stil
   im JS. Jetzt dieselben Mittel wie Leitstand und Aufgabenbrett — Karte mit
   farbiger Kante, Anteilsbalken, Marken, Kacheln. Die Projektfarbe steht als
   `--kat` an der Karte, damit `color-mix` daraus Fläche und Rand ableiten kann
   und dieselbe Farbe in Hell und Dunkel trägt. */

.pz-reiter-zeile { display:flex; gap:0.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.pz-reiter {
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:0.45rem 1rem; border-radius:8px; font:inherit; font-size:0.88rem;
  background:transparent; color:var(--text-muted); border:1px solid var(--panel-border);
}
.pz-reiter:hover { color:var(--text-main); }
.pz-reiter.an { background:var(--primary); color:#fff; border-color:var(--primary); font-weight:600; }

/* Kacheln wie im Lernstand: Zahl groß, Bedeutung darunter, Einordnung klein. */
.pz-kacheln { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0.7rem; margin-bottom:1rem; }
.pz-kachel { background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:12px; padding:0.8rem 1rem; }
.pz-k-wert { font-size:1.5rem; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; }
.pz-k-label { font-size:0.82rem; color:var(--text-muted); margin-top:2px; }
.pz-k-hinweis { font-size:0.74rem; color:var(--text-muted); opacity:0.8; margin-top:4px; }
/* Zustand trägt Farbe UND Rand — auf einem blassen Bildschirm ist Farbe allein zu wenig. */
.pz-kachel.pz-laeuft { border-color:color-mix(in srgb, var(--success) 45%, var(--panel-border)); }
.pz-kachel.pz-laeuft .pz-k-wert { color:var(--success); }
.pz-kachel.pz-warnt { border-color:rgba(217,138,0,0.45); }
.pz-kachel.pz-warnt .pz-k-wert { color:var(--warning,#d98a00); }

/* Die Leiste „läuft gerade". */
.pz-laufleiste {
  display:flex; align-items:center; justify-content:space-between; gap:0.8rem; flex-wrap:wrap;
  padding:0.6rem 0.9rem; margin-bottom:1rem; border-radius:12px;
  background:var(--panel-bg); border:1px solid var(--panel-border);
}
.pz-laufende { display:flex; gap:0.5rem; flex-wrap:wrap; }
.pz-lauf {
  display:inline-flex; align-items:center; gap:8px; font-size:0.84rem;
  padding:4px 10px; border-radius:999px;
  background:color-mix(in srgb, var(--kat) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--kat) 40%, transparent);
}
.pz-lauf-projekt { color:var(--text-muted); }
.pz-uhr-zeit { font-variant-numeric:tabular-nums; font-weight:600; }
/* Der Punkt pulst, damit „läuft" nicht nur behauptet wird. */
.pz-puls { width:8px; height:8px; border-radius:50%; background:var(--success); animation:pz-puls 2s ease-in-out infinite; }
@keyframes pz-puls { 0%,100% { opacity:1; } 50% { opacity:0.25; } }
@media (prefers-reduced-motion: reduce) { .pz-puls { animation:none; } }
.pz-uhr-start, .pz-uhr-stop {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; font:inherit; font-size:0.85rem;
  padding:0.4rem 0.9rem; border-radius:8px; border:1px solid var(--panel-border);
  background:rgba(var(--ink-rgb),0.06); color:var(--text-main);
}
.pz-uhr-start:hover { border-color:var(--success); color:var(--success); }
.pz-uhr-stop { border-color:color-mix(in srgb, var(--success) 45%, var(--panel-border)); }

/* Werkzeugzeile: Suche, Chips, Hauptknopf. */
.pz-werkzeug { display:flex; align-items:center; gap:0.7rem; flex-wrap:wrap; margin-bottom:0.9rem; }
.pz-werkzeug input[type="search"] {
  flex:1; min-width:200px; padding:0.45rem 0.7rem; border-radius:8px;
  border:1px solid var(--panel-border); background:var(--field-bg); color:var(--text-main); font:inherit; font-size:0.88rem;
}
.pz-werkzeug .wk-chips { margin:0; }
.pz-neu { width:auto; padding:0.45rem 1rem; background:var(--primary); border:none; }
.pz-gut { width:auto; padding:0.35rem 0.9rem; font-size:0.82rem; background:var(--success); border:none; }
.pz-von-bis { display:flex; align-items:center; gap:6px; font-size:0.82rem; color:var(--text-muted); }
.pz-von-bis input { padding:0.35rem 0.5rem; border-radius:7px; border:1px solid var(--panel-border); background:var(--field-bg); color:var(--text-main); font:inherit; font-size:0.82rem; }

/* Projektkarten. Die Farbe sitzt als Kante links — wie die Priorität am
   Aufgabenzettel; sie wiederholt den Punkt neben dem Namen, statt allein zu stehen. */
.pz-karten { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:0.8rem; }
.pz-karte {
  background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:12px;
  border-left:4px solid var(--kat); padding:0.85rem 1rem; display:flex; flex-direction:column; gap:0.55rem;
}
.pz-karte.ruht { opacity:0.62; }
.pz-k-kopf { display:flex; align-items:flex-start; justify-content:space-between; gap:0.6rem; }
.pz-k-kopf h3 { margin:0; font-size:1rem; display:flex; align-items:center; gap:7px; }
.pz-k-tasten { display:flex; gap:4px; flex:none; }
.pz-tast {
  width:30px; height:30px; border-radius:7px; cursor:pointer; font-size:0.8rem;
  background:rgba(var(--ink-rgb),0.06); border:1px solid var(--panel-border); color:var(--text-muted);
}
.pz-tast:hover { color:var(--text-main); border-color:var(--primary); }
.pz-uhr:hover { color:var(--success); border-color:var(--success); }
.pz-weg:hover { color:var(--danger); border-color:rgba(239,68,68,0.35); }
/* `.kat-punkt` bringt keine Maße mit — die standen überall inline. Hier einmal
   für alles, was im Projektzeit-Modul einen Farbpunkt trägt. */
.pz-karte .kat-punkt, .pz-zeile .kat-punkt, .zp-tag .kat-punkt,
.pz-tabelle-rahmen .kat-punkt, .zp-tabelle .kat-punkt { width:10px; height:10px; }
.pz-marken { display:flex; flex-wrap:wrap; gap:5px; }
.pz-marke {
  font-size:0.72rem; color:var(--text-muted);
  border:1px solid var(--panel-border); border-radius:6px; padding:1px 7px;
}
.pz-marke.pz-abr { color:var(--success); border-color:color-mix(in srgb, var(--success) 40%, transparent); }
.pz-marke.pz-geld { color:var(--text-main); font-variant-numeric:tabular-nums; }
.pz-marke.pz-ruht { font-style:italic; }
.pz-marke.pz-warnmarke { color:var(--warning,#d98a00); border-color:rgba(217,138,0,0.4); }
.pz-balken { display:block; height:6px; border-radius:3px; background:rgba(var(--ink-rgb),0.09); overflow:hidden; }
.pz-balken > span { display:block; height:100%; border-radius:3px; background:var(--kat); }
.pz-k-fuss { display:flex; flex-wrap:wrap; gap:0.1rem 0.9rem; font-size:0.78rem; color:var(--text-muted); }
.pz-k-fuss b { color:var(--text-main); font-variant-numeric:tabular-nums; }
.pz-notiz { margin:0; font-size:0.8rem; color:var(--text-muted); }
.pz-still { color:var(--text-muted); font-size:0.84rem; }

/* Auswertung: eine Zeile ist Name, Balken, Zahlen — in einem Raster, damit die
   Zahlen untereinander stehen und sich vergleichen lassen. */
.pz-ueber { font-size:0.86rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); margin:1.4rem 0 0.5rem; }
.pz-liste { display:flex; flex-direction:column; gap:2px; }
.pz-zeile {
  display:grid; grid-template-columns:minmax(140px,1.6fr) minmax(80px,2fr) 78px 92px 92px auto;
  align-items:center; gap:0.7rem; padding:0.4rem 0.6rem; border-radius:8px;
}
.pz-zeile:nth-child(odd) { background:rgba(var(--ink-rgb),0.03); }
.pz-z-name { display:flex; align-items:center; gap:7px; font-size:0.88rem; min-width:0; }
.pz-z-name .kat-punkt { flex:none; }
.pz-z-balken { min-width:60px; }
.pz-z-wert { text-align:right; font-weight:600; font-variant-numeric:tabular-nums; font-size:0.88rem; }
.pz-z-neben { text-align:right; font-size:0.8rem; color:var(--text-muted); font-variant-numeric:tabular-nums; }
@media (max-width: 900px) {
  .pz-zeile { grid-template-columns:1fr 70px 82px; }
  .pz-z-balken, .pz-zeile > :last-child { display:none; }
}
.pz-tabelle-rahmen { border:1px solid var(--panel-border); border-radius:10px; overflow:auto; }
.pz-tabelle-rahmen table { width:100%; border-collapse:collapse; }

/* Formular und Tags. */
.pz-form { background:var(--panel-bg); border:1px solid var(--primary); border-radius:12px; padding:1rem; margin-bottom:1rem; }
.pz-form-reihe { display:grid; grid-template-columns:2fr 2fr 1fr 1fr; gap:10px; align-items:end; }
.pz-form-reihe.zwei { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.pz-haken { display:flex; align-items:center; gap:6px; font-size:0.85rem; }
.pz-notizfeld { flex:1; min-width:180px; }
@media (max-width: 800px) { .pz-form-reihe { grid-template-columns:1fr 1fr; } }
.pz-tag-neu { display:flex; gap:8px; align-items:center; margin:0.8rem 0; flex-wrap:wrap; }
.pz-tag-neu input[type="search"], .pz-tag-neu input:not([type="color"]) { max-width:240px; }
.pz-tags { display:flex; gap:8px; flex-wrap:wrap; }
.zp-tag { border-color:color-mix(in srgb, var(--kat, var(--panel-border)) 40%, var(--panel-border)); }

/* Projektzeit am Kundenblatt. */
.cp-projekte { margin-top:1rem; padding-top:0.8rem; border-top:1px solid var(--panel-border); }
.cp-projekte h4 { margin:0 0 0.5rem; font-size:0.85rem; color:var(--text-muted); font-weight:600; }
.cp-projekt {
  display:grid; grid-template-columns:9px 1fr auto auto; align-items:center; gap:8px;
  width:100%; text-align:left; cursor:pointer; font:inherit; font-size:0.85rem;
  padding:0.35rem 0.5rem; margin-bottom:3px; border-radius:8px;
  background:transparent; color:var(--text-main); border:1px solid transparent; border-left:3px solid var(--kat);
}
.cp-projekt:hover { background:color-mix(in srgb, var(--kat) 10%, transparent); }
.cp-p-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-p-wert { font-weight:600; font-variant-numeric:tabular-nums; }
.cp-p-satz { color:var(--text-muted); font-size:0.78rem; font-variant-numeric:tabular-nums; }

/* Kleine Auswahl statt prompt(). */
.pz-schleier {
  position:fixed; inset:0; z-index:99990; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.45); padding:1rem;
}
.pz-dialog {
  background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:14px;
  padding:1.2rem; max-width:440px; width:100%; box-shadow:0 20px 50px rgba(0,0,0,0.35);
}
.pz-dialog h3 { margin:0 0 0.3rem; font-size:1.05rem; }
.pz-dialog p { margin:0 0 0.9rem; color:var(--text-muted); font-size:0.88rem; }
.pz-wahl { display:flex; flex-direction:column; gap:6px; max-height:50vh; overflow-y:auto; }
.pz-wahl button {
  text-align:left; cursor:pointer; font:inherit; font-size:0.9rem; padding:0.5rem 0.8rem;
  border-radius:9px; background:transparent; color:var(--text-main);
  border:1px solid var(--panel-border); border-left:4px solid var(--kat);
}
.pz-wahl button:hover { background:color-mix(in srgb, var(--kat) 12%, transparent); }
.pz-dialog-ab {
  margin-top:0.9rem; width:100%; cursor:pointer; font:inherit; font-size:0.85rem; padding:0.45rem;
  border-radius:8px; background:transparent; color:var(--text-muted); border:1px solid var(--panel-border);
}


/* ── Schwarzes Brett (#143) — nur das Drumherum; die Zettel selbst kommen aus
   public/js/brett.js, damit Büro, Portal und Bord-App gleich aussehen. */
.pw-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding: 16px;
           border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel-bg); }
.pw-form input[type="text"], .pw-form textarea, .pw-form select, .pw-form input[type="date"] {
  padding: 0.5rem 0.65rem; border-radius: 8px; border: 1px solid var(--panel-border);
  background: var(--field-bg); color: var(--text-main); font-family: inherit; font-size: 0.9rem;
}
.pw-f-zeile { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 0.8rem; color: var(--text-muted); }
.pw-f-zeile label { display: inline-flex; align-items: center; gap: 6px; }
.pw-f-knoepfe { display: flex; gap: 8px; justify-content: flex-end; }
.pw-f-knoepfe .action-btn { width: auto; padding: 0.5rem 1.1rem; }
/* Abbrechen wiegt weniger als Anpinnen — zwei gleich schwere Knöpfe nebeneinander
   programmieren den Fehlgriff. */
.pw-f-knoepfe .pw-abbruch { background: transparent; border: 1px solid var(--panel-border); color: var(--text-muted); }
.pw-f-knoepfe .pw-abbruch:hover { color: var(--text-main); }
.pw-f-hinweis { margin: 0; font-size: 0.78rem; color: var(--text-muted); }
.pw-neu { width: auto; }
.pw-flaeche { margin-top: 16px; }
.pw-archiv { margin-top: 18px; }
.pw-archiv summary { cursor: pointer; color: var(--text-muted); font-size: 0.88rem; padding: 6px 0; }

/* ── Schiffskarte (AIS) ──────────────────────────────────────────────────────
   Die Kacheln sind hell (OpenStreetMap) — in der dunklen Verwaltung bewusst
   nicht eingefärbt: eine Karte muss lesbar sein, nicht zum Fenster passen. */
.ais-lage { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .ais-lage { grid-template-columns: 1fr; } }
.ais-karte { height: 560px; border-radius: 12px; border: 1px solid var(--panel-border); overflow: hidden; background: #dfe8ef; }
.ais-kopf { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.ais-kopf .ais-stand { margin: 0; }
.ais-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; }
.ais-tag input { font: inherit; font-size: 0.82rem; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--panel-border); background: var(--field-bg); color: var(--text-main); color-scheme: dark; }
.ais-leer { font-size: 0.8rem; color: var(--text-muted); padding: 6px 2px; }
.ais-stand { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 10px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.ais-stand .ais-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); margin-right: 5px; }
.ais-stand .ais-punkt.an { background: var(--success); }
.ais-liste { display: flex; flex-direction: column; gap: 8px; }
.ais-schiff { border: 1px solid var(--panel-border); border-radius: 10px; padding: 10px 12px; background: var(--panel-bg); cursor: pointer; }
.ais-schiff:hover { border-color: var(--primary); }
.ais-schiff.alt { opacity: .6; }
.ais-schiff .ais-name { font-weight: 700; font-size: 0.92rem; display: flex; justify-content: space-between; gap: 8px; }
.ais-schiff .ais-info { font-size: 0.78rem; color: var(--text-muted); margin-top: 3px; }
.ais-liste h4 { margin: 10px 0 2px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.ais-fahrt { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; width: 100%; text-align: left; font: inherit; font-size: 0.82rem; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--panel-border); background: var(--panel-bg); color: var(--text-main); cursor: pointer; font-variant-numeric: tabular-nums; }
.ais-fahrt:hover, .ais-fahrt.aktiv { border-color: var(--primary); }
.ais-fahrt .ais-fahrt-neben { color: var(--text-muted); font-size: 0.75rem; }
.msg-lage { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.35rem; }
.msg-lage i { margin-right: 4px; color: var(--accent-sky); }
/* Die Pille sitzt MIT IHRER MITTE auf der Position — Leaflet legt sonst ihre
   linke obere Ecke dorthin. Der Rand nimmt das Schiffs-Himmelblau der
   Verwaltung, keine dritte Akzentfarbe. */
/* `--stapel` fächert Schiffe auf, die fast auf demselben Punkt liegen — am
   Anleger liegen sie das halbe Jahr nebeneinander, und übereinander gezeichnet
   sah ein fahrendes Schiff aus wie keins („warum ist die Eule nicht aktiv?"). */
.ais-marke { display: inline-flex; align-items: center; gap: 4px; transform: translate(-50%, calc(-50% + var(--stapel, 0px))); background: #0f172a; color: #fff; border: 2px solid var(--accent-sky); border-radius: 999px; padding: 2px 8px; font-weight: 700; font-size: 11px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.ais-kurs { width: 11px; height: 11px; fill: var(--accent-sky); flex: none; }
.ais-marke.alt { border-color: #94a3b8; color: #cbd5e1; border-style: dashed; }
.ais-marke small { font-weight: 500; opacity: .85; margin-left: 2px; }
/* Meldung #197: Fahrzeuge auf derselben Karte. Eckig statt rund und in einer
   anderen Farbe — ein Auto und ein Schiff müssen auf einen Blick auseinander-
   gehen, und Farbe allein reicht dafür nicht (dieselbe Überlegung wie beim
   Mini-Kalender: Farbe UND Form). */
.kfz-marke { display: inline-flex; align-items: center; transform: translate(-50%, -50%);
  background: #1e293b; color: #fff; border: 2px solid var(--accent-amber, #f59e0b); border-radius: 6px;
  padding: 2px 8px; font-weight: 700; font-size: 11px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
/* Unterwegs: der Punkt ist der zuletzt gemeldete, nicht der aktuelle. Ein
   gestrichelter Rand sagt „hier stand es, als es losfuhr" — ein Kurspfeil wie
   bei den Schiffen wäre gelogen, wir kennen die Richtung nicht. */
.kfz-marke.unterwegs { border-style: dashed; opacity: .82; }
/* Überschrift in der Liste neben der Karte. */
.ais-abschnitt { margin: 14px 0 6px; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted); font-weight: 600; }
.ais-marke.alt .ais-kurs { fill: #94a3b8; }
.leaflet-container { font-family: inherit; }
/* Zoomknöpfe und Quellenangabe in den Farben der Verwaltung — sonst sitzt
   ein weißes Fenster in der dunklen Oberfläche. */
.ais-karte.leaflet-container .leaflet-bar a, .ais-karte.leaflet-container .leaflet-bar a:hover { background: var(--panel-bg); color: var(--text-main); border-bottom-color: var(--panel-border); backdrop-filter: blur(4px); }
.ais-karte.leaflet-container .leaflet-control-attribution { background: var(--panel-bg); color: var(--text-muted); font-size: 10px; backdrop-filter: blur(4px); }
.ais-karte.leaflet-container .leaflet-control-attribution a { color: var(--text-muted); }

/* ── Flotte auf der Startseite (AIS) ─────────────────────────────────────── */
.st-flotte { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.st-schiff {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 10px; align-items: center; text-align: left;
  padding: 10px 12px; border: 1px solid var(--panel-border); border-radius: 10px;
  background: var(--panel-bg); color: var(--text-main); font-family: inherit; cursor: pointer;
}
.st-schiff:hover, .st-schiff:focus-visible { border-color: var(--primary); outline: none; }
.st-schiff .st-kz { grid-row: 1 / 3; font-weight: 800; font-size: 0.95rem; letter-spacing: .02em; color: var(--accent-sky); }
.st-schiff .st-schiff-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-schiff .st-schiff-stand { font-size: 0.78rem; color: var(--text-muted); }
.st-schiff.st-faehrt .st-schiff-stand { color: var(--success); font-weight: 600; }
.st-schiff.st-still .st-kz { color: var(--text-muted); }

/* Die jüngste Bewertung — ein Satz unter dem Heute-Block. */
.st-bewertung {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; width: 100%; text-align: left;
  margin-top: 10px; padding: 8px 12px; border: 1px solid var(--panel-border); border-radius: 8px;
  background: transparent; color: var(--text-main); font-family: inherit; font-size: 0.88rem; cursor: pointer;
}
.st-bewertung:hover { border-color: var(--primary); }
.st-sterne { color: var(--accent-amber); letter-spacing: .06em; font-size: 0.95rem; }
.st-bewertung-neben { margin-left: auto; font-size: 0.78rem; color: var(--text-muted); }

/* ── AIS im Leitstand ────────────────────────────────────────────────────── */
.ls-ais {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 600;
  border: 1px solid var(--panel-border); color: var(--text-muted); white-space: nowrap;
}
.ls-ais.faehrt { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.ls-ais.still { opacity: .7; }
.ls-ais-fahrt { color: var(--text-main); font-variant-numeric: tabular-nums; }
.ls-spur { font: inherit; font-size: 0.72rem; padding: 0 7px; border-radius: 999px; border: 1px solid var(--panel-border); background: var(--field-bg); color: var(--text-main); cursor: pointer; line-height: 1.5; }
.ls-spur:hover { border-color: var(--primary); color: var(--primary); }

/* ── Bewertungen im GetYourGuide-Reiter ──────────────────────────────────── */
.lrn-tab-s { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); margin-left: 8px; }
.mi-bewertungen { display: flex; flex-direction: column; border: 1px solid var(--panel-border); border-radius: 10px; overflow: hidden; }
.mi-bew-klapp > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px; }
.mi-bew-klapp > summary::-webkit-details-marker { display: none; }
.mi-bew-klapp > summary::before { content: "▸"; color: var(--text-muted); transition: transform .15s; }
.mi-bew-klapp[open] > summary::before { transform: rotate(90deg); }
.mi-bew-klapp > summary:focus-visible { outline: 2px solid var(--accent-blue, #3b82f6); outline-offset: 2px; border-radius: 4px; }
.mi-bewertung {
  display: grid; grid-template-columns: 6.2rem minmax(0, 1fr) minmax(0, 1.4fr) 3.4rem auto; gap: 12px; align-items: baseline;
  padding: 9px 14px; border-top: 1px solid var(--panel-border); font-size: 0.86rem;
}
.mi-bewertung:first-child { border-top: none; }
.mi-sterne { color: var(--accent-amber); letter-spacing: .06em; white-space: nowrap; }
.mi-sterne.still, .mi-bewertung .still { color: var(--text-muted); font-style: italic; }
.mi-bew-produkt { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-bew-titel { color: var(--text-main); }
.mi-bew-datum { color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 900px) { .mi-bewertung { grid-template-columns: 6.2rem 1fr; } .mi-bew-datum { text-align: left; } }

/* Aufgaben-Brett (Meldung #162) — drei Spalten: Offen · In Arbeit · Erledigt */
.kb-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 900px) { .kb-board { grid-template-columns: 1fr; } }
.kb-col { background: rgba(var(--ink-rgb), 0.04); border: 1px solid var(--panel-border); border-radius: 12px; padding: 10px; min-height: 120px; }
.kb-col-h { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 2px 4px 10px; display: flex; justify-content: space-between; }
.kb-card { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.kb-card.ist-hoch { border-left: 3px solid var(--danger); }
/* Meldung #200: Kacheln lassen sich ziehen. `grab` sagt das, bevor jemand es
   ausprobiert; die gezogene Karte bleibt blass sichtbar, damit man weiß,
   woher sie kommt, und die Zielspalte hebt sich ab. */
.kb-card[draggable="true"] { cursor: grab; }
.kb-card[draggable="true"]:active { cursor: grabbing; }
.kb-card.zieht { opacity: 0.4; }
.kb-col.ist-ziel { background: color-mix(in srgb, var(--primary) 9%, transparent); border-radius: 10px; outline: 2px dashed var(--primary); outline-offset: -2px; }
.kb-titel { font-weight: 600; }
.kb-meta { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
.kb-meta.ist-spaet { color: var(--danger); }
.kb-text { font-size: .8rem; color: var(--text-muted); margin-top: 4px; white-space: pre-wrap; }
.kb-wer { display: block; margin-top: 8px; background: none; border: 0; padding: 0; font: inherit; font-size: .8rem; color: var(--primary); cursor: pointer; text-align: left; }
.kb-aktionen { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.kb-btn { border: 1px solid var(--panel-border); background: var(--field-bg); color: var(--text-main); border-radius: 8px; padding: 4px 10px; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.kb-btn.ist-ok { background: var(--success); border-color: var(--success); color: #fff; }
.kb-leer { color: var(--text-muted); text-align: center; padding: 14px 0; }

/* Volle Fahrten (Meldung #175) */
.st-voll .st-ueber { color: var(--danger); }
.st-fahrt-voll { border-left: 3px solid var(--danger); }
.st-voll-pct { color: var(--danger); }

/* ── fendr, die zweite Marke ──────────────────────────────────────────────
   Die erste ist die des Betriebs. fendr steht klein und leise daneben: wer
   die Software macht, nicht wem sie gehört. Nirgends größer als das hier.

   **Zeichen, Abstand und Laufweite stehen nicht hier**, sondern in
   `public/js/net.js` (`.fendr-marke`) — dieselbe Regel für alle vier
   Oberflächen, von denen drei dieses Stylesheet gar nicht laden. Hier steht
   nur, wie groß und wie laut die Marke an dieser Stelle sein darf. */
.fendr-zeile { font-size: 0.74rem; color: var(--text-muted); letter-spacing: 0.02em; }
.fendr-zeile .fendr-marke, .rail-fendr { color: var(--text-muted); }
.fendr-zeile .fendr-marke:hover, .rail-fendr:hover { color: var(--primary); }
/* Das Zeichen steht neben dem Wort, nicht darüber: die Leiste ist schmal, und
   zwei Zeilen Herstellername wären mehr Aufmerksamkeit, als ihm zusteht.
   Eine Deckkraft, nicht zwei — 0,7 mal 0,9 ergab 0,63 und war zu blass. */
.rail-fendr { justify-content: center; font-size: 0.68rem; margin-top: 2px; opacity: 0.72; }

/* ── Geführte Einführung (public/js/tour.js) ────────────────────────────── */
.tour-schleier { position: fixed; inset: 0; z-index: 20000; background: rgba(2, 8, 23, 0.55); }
.tour-loch { position: fixed; z-index: 20001; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(2, 8, 23, 0.55), 0 0 0 3px var(--primary); transition: top .2s, left .2s, width .2s, height .2s; }
.tour-loch[hidden] { display: none; }
.tour-karte { position: fixed; z-index: 20002; width: 340px; max-width: calc(100vw - 24px); padding: 18px 20px 16px;
  border-radius: 14px; background: var(--panel-bg, #0a1929); border: 1px solid var(--panel-border, rgba(255,255,255,.1));
  box-shadow: 0 20px 50px rgba(0,0,0,.5); color: var(--text-main); }
.tour-karte h3 { margin: 4px 0 8px; font-size: 1.05rem; }
.tour-karte p { margin: 0; line-height: 1.5; color: var(--text-muted); font-size: 0.92rem; }
.tour-nr { font-size: 0.72rem; color: var(--text-muted); letter-spacing: .06em; }
.tour-knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.tour-knoepfe button { font: inherit; border-radius: 8px; padding: 7px 14px; cursor: pointer; border: 1px solid var(--panel-border, rgba(255,255,255,.1)); background: transparent; color: var(--text-muted); }
.tour-knoepfe .tour-weiter { background: var(--primary); color: #04121a; border-color: transparent; font-weight: 600; }

/* ── Paywall: Vorschau mit Schleier (1.78.0) ─────────────────────────── */
.paywall-aktiv { position: relative; overflow: hidden; min-height: 460px; }
.paywall-aktiv > *:not(.paywall) { filter: blur(6px) saturate(.6); pointer-events: none; user-select: none; }
.settings-pane.paywall-aktiv, #zt-report-content.paywall-aktiv { min-height: 620px; }
.settings-pane .paywall, #zt-report-content .paywall { padding: 32px 24px; }
.paywall { position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 24px; background: linear-gradient(180deg, rgba(2, 8, 23, .35), rgba(2, 8, 23, .65)); }
.paywall-karte { background: var(--panel-bg-solid, var(--panel-bg, #0a1929)); color: var(--text-color, #f0f9ff); border: 1px solid var(--border-color, rgba(255,255,255,.1)); border-radius: 18px; padding: 28px 30px; max-width: 520px; width: 100%; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.paywall-kopf { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent, #2dd4bf); margin-bottom: 10px; }
.paywall-karte h2 { margin: 0 0 6px; font-size: 1.5rem; }
.paywall-claim { margin: 0 0 14px; opacity: .85; }
.paywall-kann { margin: 0 0 14px; padding-left: 20px; opacity: .9; }
.paywall-kann li { margin: 4px 0; }
.paywall-preis { font-weight: 600; margin: 0 0 16px; }
/* Meldung #190: das Modul zeigen, nicht nur beschreiben. Das Bild kommt über
   den eigenen Server (routes/lizenz.js), damit die Verwaltung nichts Fremdes
   abruft; fehlt es, nimmt sich die Figur selbst aus dem Weg (onerror). */
.paywall-bild { margin: 0 0 14px; }
.paywall-bild img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--panel-border);
}
.paywall-bild figcaption { margin-top: 6px; font-size: 0.78rem; color: var(--text-muted); }
.paywall-kann-nicht { margin: 0 0 12px; padding-left: 1.1rem; color: var(--text-muted); font-size: 0.86rem; }
.paywall-kann-nicht li::marker { content: '— '; }

/* Die Paketzeile steht über dem Preis und trägt die eigentliche Auskunft:
   welches Paket das Modul freischaltet und welches der Betrieb heute hat. */
.paywall-paket {
  margin: 0 0 10px; padding: 10px 14px; border-radius: 10px;
  background: rgba(var(--ink-rgb), 0.05); border: 1px solid var(--panel-border);
  font-size: 0.9rem; line-height: 1.5;
}
.paywall-aktionen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.paywall-mehr { margin-left: auto; font-size: .86rem; opacity: .8; }
.paywall-hinweis { margin: 0; opacity: .8; }
.paywall-status { margin: 12px 0 0; min-height: 1.3em; font-size: .9rem; color: var(--accent, #2dd4bf); }
.flyout-item.gesperrt span { opacity: .75; }
.flyout-schloss { margin-left: auto; font-size: .7rem; opacity: .7; }
.paywall-aktionen button { font: inherit; font-size: .92rem; font-weight: 600; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border-color, rgba(255,255,255,.14)); background: transparent; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.paywall-aktionen button.btn-primary { background: var(--accent, #2dd4bf); color: #04121a; border-color: transparent; }
.paywall-aktionen button:disabled { opacity: .5; cursor: wait; }

/* Fehlende Stempelungen auf dem Handy: Karten statt einer Tabelle, deren
   Aktionsspalte rechts außerhalb des Bildes lag (Hub-Meldung 182). */
@media (max-width: 720px) {
  #zt-missed-table thead { display: none; }
  #zt-missed-table, #zt-missed-table tbody { display: block; }
  #zt-missed-table tr.zt-missed-zeile { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid var(--panel-border); }
  #zt-missed-table tr.zt-missed-zeile td { display: contents; }
  #zt-missed-table tr.zt-missed-zeile td::before { content: attr(data-label); color: var(--text-muted); font-size: .8rem; align-self: center; }
  #zt-missed-table tr.zt-missed-zeile td.zt-missed-aktion::before { content: none; }
  #zt-missed-table tr.zt-missed-zeile td.zt-missed-aktion > div { grid-column: 1 / -1; justify-content: flex-start !important; margin-top: 6px; }
  #zt-missed-table tr.zt-correction-row td { display: block; }
}

/* Zeiten nachtragen (Berichte) */
.zt-nachtrag { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.zt-nachtrag h3 { margin: 0 0 10px; font-size: 1rem; }
.nt-kopf { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.nt-kopf label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--text-muted); }
.nt-kopf .nt-grund { flex: 1 1 220px; }
.zt-nachtrag select, .zt-nachtrag input { padding: 6px 9px; border-radius: 6px; font-size: 0.88rem; font-family: inherit;
  background: var(--field-bg); color: var(--text-main); border: 1px solid var(--panel-border); }
.nt-tabelle { border-collapse: collapse; font-size: 0.88rem; }
.nt-tabelle th { text-align: left; font-size: 0.75rem; color: var(--text-muted); font-weight: 600; padding: 2px 8px 4px 0; }
.nt-tabelle td { padding: 3px 8px 3px 0; }
.nt-dauer { font-variant-numeric: tabular-nums; min-width: 60px; color: var(--text-muted); }
.nt-weg { background: none; border: 0; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; }
.nt-weg:hover { color: var(--danger); }
.nt-fuss { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.nt-summe { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 0.85rem; }
.nt-info { color: var(--danger); font-size: 0.85rem; flex: 1; }
.nt-hinweis { margin: 8px 0 0; font-size: 0.76rem; color: var(--text-muted); }

/* Bild an einer Nachricht (Meldung #185) */
.nachricht-bild { display: block; max-width: 240px; max-height: 180px; margin-top: 8px; border-radius: 8px;
  border: 1px solid var(--panel-border); cursor: zoom-in; object-fit: cover; }
.nachricht-bild.gross { max-width: 100%; max-height: none; cursor: zoom-out; }
.nachricht-bild-fehlt { display: block; margin-top: 6px; font-size: 0.78rem; color: var(--text-muted); }

/* Schalter eines nicht gebuchten Moduls */
.nicht-gebucht { display: block; margin-top: .35rem; font-size: .82rem; color: var(--warning, #f59e0b); }
.hub-navrow.gesperrt .hub-navrow-t { opacity: .8; }

/* Buchungskanäle (public/js/buchungskanaele.js) */
.kanal-kopf h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; }
.kanal-kopf .hint { margin: 0 0 18px; max-width: 72ch; }
.kanal-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 16px; }
.kanal-karte { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--panel-bg); }
.kanal-karte-kopf { display: flex; align-items: center; gap: 10px; }
.kanal-karte-kopf i { color: var(--text-muted); width: 18px; text-align: center; }
.kanal-karte.an .kanal-karte-kopf i { color: var(--success); }
.kanal-status { margin-left: auto; font-size: .75rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--panel-border); color: var(--text-muted); }
.kanal-karte.an .kanal-status { border-color: var(--success); color: var(--success); }
.kanal-text { margin: 0; font-size: .86rem; line-height: 1.5; }
.kanal-stand { margin: 0; font-size: .8rem; color: var(--text-muted); }
.kanal-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; }
.kanal-link { font-size: .84rem; color: var(--primary); text-decoration: none; }
.kanal-link:hover { text-decoration: underline; }
.kanal-einstellungen { margin-left: auto; font: inherit; font-size: .82rem; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--panel-border); background: var(--field-bg); color: inherit; cursor: pointer; }
.kanal-feld { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--text-muted); }
.kanal-feld input, .kanal-klein input { font: inherit; font-size: .84rem; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--panel-border); background: var(--field-bg); color: inherit; }
.kanal-vorbereitet { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; color: var(--text-muted); font-size: .8rem; }
.kanal-vorbereitet-titel { text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; }
.kanal-klein { display: grid; grid-template-columns: 110px minmax(0, 320px) auto; gap: 8px; align-items: center; opacity: .75; }
.kanal-klein b { font-weight: 600; }
.kanal-klein a { color: inherit; }
.kanal-abschnitt { border-top: 1px solid var(--panel-border); padding: 12px 0; }
.kanal-abschnitt > summary { cursor: pointer; font-weight: 600; padding: 4px 0 12px; }
.kanal-abschnitt > .glass-panel { height: auto !important; }
@media (max-width: 560px) { .kanal-klein { grid-template-columns: 1fr auto; } .kanal-klein input { grid-column: 1 / -1; grid-row: 2; } }

/* ── Einrichtungs-Assistent (public/js/einrichtung.js) ───────────────── */
.ew-schleier { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(2, 8, 23, .72); }
.ew-fenster { display: grid; grid-template-columns: 230px minmax(0, 1fr); width: min(980px, 100%); height: min(720px, calc(100vh - 48px)); background: var(--bg-card); color: var(--text-main); border: 1px solid var(--panel-border); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.ew-leiste { display: flex; flex-direction: column; gap: 18px; padding: 26px 20px; background: var(--field-bg); border-right: 1px solid var(--panel-border); }
.ew-kopf { font-weight: 700; display: flex; align-items: center; gap: 10px; color: var(--primary); }
.ew-schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ew-schritte li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text-muted); font-size: .92rem; }
.ew-schritte li.jetzt { color: var(--text-main); background: var(--border-teal-dim); font-weight: 600; }
.ew-nr { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--panel-border); font-size: .78rem; font-variant-numeric: tabular-nums; }
.ew-schritte li.jetzt .ew-nr { border-color: var(--primary); color: var(--primary); }
.ew-schritte li.erledigt .ew-nr { background: var(--primary); border-color: var(--primary); color: var(--on-accent); }
.ew-spaeter { margin-top: auto; font: inherit; font-size: .86rem; background: none; border: 0; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; padding: 0; }
.ew-inhalt { display: flex; flex-direction: column; min-height: 0; }
.ew-body { flex: 1; overflow-y: auto; padding: 34px 40px 20px; }
.ew-body h2 { margin: 0 0 8px; font-size: 1.6rem; line-height: 1.2; text-wrap: balance; }
.ew-lead { margin: 0 0 22px; color: var(--text-muted); line-height: 1.55; max-width: 60ch; }
.ew-still { margin: 6px 0 0; color: var(--text-muted); font-size: .86rem; }
.ew-hinweis { margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--border-teal-dim); font-size: .88rem; line-height: 1.5; }
.ew-hinweis i { color: var(--primary); margin-right: 6px; }
.ew-punkte { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.ew-punkte li { display: flex; align-items: center; gap: 12px; }
.ew-punkte i { width: 20px; text-align: center; color: var(--primary); }
.ew-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.ew-feld { display: flex; flex-direction: column; gap: 6px; font-size: .86rem; font-weight: 600; }
.ew-feld small { font-weight: 400; color: var(--text-muted); }
.ew-body input:not([type=file]), .ew-body select, .ew-body textarea { font: inherit; font-weight: 400; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--input-color); width: 100%; box-sizing: border-box; }
.ew-body textarea { resize: vertical; line-height: 1.5; }
.ew-body input:focus-visible, .ew-body select:focus-visible, .ew-body textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.ew-logo { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.ew-logo-vorschau { width: 84px; height: 84px; flex: none; border-radius: 12px; border: 1px dashed var(--input-border); display: flex; align-items: center; justify-content: center; background: var(--input-bg); color: var(--text-muted); font-size: 1.6rem; overflow: hidden; }
.ew-logo-vorschau img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ew-logo p { margin: 2px 0 8px; }
.ew-karte { height: 250px; border-radius: 10px; border: 1px solid var(--panel-border); margin-top: 8px; }
.ew-tabelle { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.ew-tabelle th { text-align: left; font-size: .76rem; font-weight: 600; color: var(--text-muted); padding: 0 8px 8px 0; }
.ew-tabelle td { padding: 4px 8px 4px 0; }
.ew-tabelle tr.ew-da td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--panel-border); }
.ew-tabelle tr.ew-da i { color: var(--success); }
.ew-tabelle .ew-zahl { width: 90px; }
.ew-tabelle th:nth-child(3):not(:last-child) { width: 110px; }
.ew-knopf-klein { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .86rem; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--input-border); background: transparent; color: var(--text-main); cursor: pointer; }
.ew-kanaele { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.ew-kanaele li { display: grid; grid-template-columns: 22px 130px 1fr; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid var(--panel-border); border-radius: 10px; color: var(--text-muted); }
.ew-kanaele li.an { color: var(--text-main); }
.ew-kanaele li.an i { color: var(--success); }
.ew-bilanz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0 0; }
.ew-bilanz div { padding: 16px; border: 1px solid var(--panel-border); border-radius: 10px; }
.ew-bilanz dt { font-size: .8rem; color: var(--text-muted); }
.ew-bilanz dd { margin: 4px 0 0; font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ew-fuss { display: flex; align-items: center; gap: 14px; padding: 16px 40px; border-top: 1px solid var(--panel-border); }
.ew-status { flex: 1; font-size: .86rem; color: var(--text-muted); }
.ew-status.fehler { color: var(--danger); }
.ew-knopf { font: inherit; font-weight: 600; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--input-border); background: transparent; color: var(--text-main); cursor: pointer; }
.ew-primaer { margin-left: auto; background: var(--primary); border-color: transparent; color: var(--on-accent); }
.ew-knopf:disabled { opacity: .55; cursor: wait; }
.ew-fortsetzen { display: flex; align-items: center; gap: 14px; width: 100%; margin-bottom: 18px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--border-teal); background: var(--border-teal-dim); color: var(--text-main); font: inherit; text-align: left; cursor: pointer; }
.ew-fortsetzen > i:first-child { color: var(--primary); font-size: 1.2rem; }
.ew-fortsetzen span { flex: 1; color: var(--text-muted); }
.ew-fortsetzen b { display: block; color: var(--text-main); }

/* Ein Modul kam dazu oder fiel weg — derselbe Kasten wie „Einrichtung
   fortsetzen", aber kein Knopf: er führt nirgendwohin, er sagt etwas. */
.st-lizenz-hinweis { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--border-teal); background: var(--border-teal-dim); color: var(--text-muted); }
.st-lizenz-hinweis > i:first-child { color: var(--primary); font-size: 1.1rem; }
.st-lizenz-hinweis span { flex: 1; }
.st-lizenz-hinweis b { color: var(--text-main); }
.st-lizenz-weg { border: 0; background: none; color: var(--text-muted); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.st-lizenz-weg:hover { background: var(--panel-border); color: var(--text-main); }
@media (max-width: 760px) {
  .ew-schleier { padding: 0; }
  .ew-fenster { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: 100%; border-radius: 0; }
  .ew-leiste { flex-direction: row; align-items: center; padding: 12px 16px; gap: 12px; border-right: 0; border-bottom: 1px solid var(--panel-border); }
  .ew-kopf { display: none; }
  .ew-schritte { flex-direction: row; gap: 4px; }
  .ew-schritte li { padding: 0; font-size: 0; gap: 0; background: none !important; }
  .ew-schritte li .ew-nr { font-size: .72rem; width: 22px; height: 22px; }
  .ew-spaeter { margin: 0 0 0 auto; font-size: .8rem; white-space: nowrap; }
  .ew-body { padding: 22px 18px 16px; }
  .ew-fuss { padding: 12px 18px; }
  .ew-raster { grid-template-columns: 1fr; }
}


/* ── Schlusswort zum `hidden`-Attribut ───────────────────────────────────────
   Dreimal ist dieselbe Falle aufgetreten (Bereichsleiste, Tour-Loch,
   Versionsverlauf): Eine Klassenregel mit `display` schlägt das eingebaute
   `[hidden] { display: none }`, weil die des Browsers die schwächste Stufe hat.
   Diese eine Zeile beendet das für alles, was danach noch dazukommt. */

/* ── Apps für die Mitarbeiter (Einstellungen → Zeiterfassung) ──────────────
   Eine Zeile je Oberfläche: Symbol, Text, Adresse zum Kopieren. Die Adresse
   steht in einem Feld statt als Text, weil sie zum Weitergeben gedacht ist —
   antippen wählt sie aus, der Knopf daneben kopiert sie. */
.zts-app {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .8rem; border: 1px solid var(--panel-border); border-radius: 10px;
  margin-bottom: .5rem; flex-wrap: wrap;
}
.zts-app-zu { opacity: .62; }
.zts-app-icon { color: var(--primary); width: 1.3rem; text-align: center; flex: none; }
.zts-app-text { flex: 1; min-width: 12rem; }
.zts-app-name { font-weight: 600; }
.zts-app-was { font-size: .82rem; color: var(--text-muted); }
.zts-app-wer { font-size: .76rem; color: var(--text-dim, var(--text-muted)); margin-top: .15rem; }
.zts-app-url {
  flex: 1 1 15rem; min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8rem;
  padding: .4rem .6rem; border: 1px solid var(--panel-border); border-radius: 8px;
  background: var(--field-bg); color: var(--text-main);
}
.zts-app-kopie { width: auto; flex: none; padding: .4rem .7rem; background: transparent; border: 1px solid var(--panel-border); }
@media (max-width: 640px) { .zts-app-url { flex-basis: 100%; } }

[hidden] { display: none !important; }

/* Foto eines Firmenfahrzeugs (Meldung #202). Klein und quadratisch im Kopf der
   Karte: es soll wiedererkennen helfen, nicht die Karte übernehmen. */
.fz-foto {
  width: 52px; height: 52px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--panel-border); flex: none;
}


/* ── Tischplan: was ersetzt, sieht auch danach aus ─────────────────────────
   Zwei Meldungen im Abstand von vier Minuten: „ändert er es für alle Tische"
   und „durch Klick auf ‚reihen quer' versehentlich meinen Tischplan gelöscht".
   Dieselbe Ursache. Das Feld „Plätze je Tisch" gehörte zum Muster, stand aber
   neben dem Feld des gewählten Tisches, und die Muster-Knöpfe sahen aus wie
   jeder andere Knopf. */
.tps-gefahr-block {
  border: 1px solid var(--danger, #e74c3c); border-radius: 10px; padding: 12px 14px;
  background: color-mix(in srgb, var(--danger, #e74c3c) 6%, transparent);
}
.tps-gefahr-block .tps-hinweis b { color: var(--danger, #e74c3c); }
.tps-tisch-kopf input { font: inherit; padding: 3px 6px; }

/* WLAN-Netze je Terminal (zeiterfassung-devices.js): eine Zeile je Netz */
.zt-wlan-zeile { display:flex; gap:0.4rem; align-items:center; margin-bottom:0.4rem; }
.zt-wlan-zeile input { flex:1; min-width:0; padding:0.4rem 0.6rem; border-radius:6px; border:1px solid var(--panel-border); background:var(--field-bg); color:var(--text-main); font-size:0.85rem; }
.zt-wlan-weg { background:transparent; border:1px solid var(--panel-border); color:var(--danger); border-radius:6px; width:2rem; height:2rem; cursor:pointer; }
.zt-wlan-plus, .zt-wlan-ok { padding:0.4rem 0.8rem; border-radius:6px; border:1px solid var(--panel-border); background:var(--field-bg); color:var(--text-main); cursor:pointer; font-size:0.85rem; }
.zt-wlan-ok { background:var(--primary); color:var(--on-accent); border-color:transparent; }

/* Kennzeichen hinter einer geschätzten Endzeit (net.js zeitSpanne). Gedämpft und
   klein: es soll auffallen, wenn man hinsieht, und nicht die Zeile stören. */
.zeit-geschaetzt { opacity: .55; margin-left: 1px; cursor: help; font-weight: 600; }

/* Verweis auf eine Fahrt in einer Nachricht (net.js markdownMini). Als Pille, damit
   er sich vom Fließtext abhebt — er führt aus der Nachricht heraus. */
.fahrt-link { display:inline-flex; align-items:center; gap:5px; padding:1px 8px; border-radius:11px;
  background:var(--field-bg); border:1px solid var(--panel-border); color:var(--primary);
  font-size:.86em; font-weight:600; text-decoration:none; }
.fahrt-link:hover { border-color:var(--primary); }
.fahrt-link i { font-size:.85em; opacity:.8; }

/* ── Kopf einer Fahrt (1.153.0) ─────────────────────────────────────────────
   „Den Kopf einer Fahrt layouttechnisch nochmal verbessern."

   Zwei Dinge waren daran falsch. Erstens standen die Farben der Höchstzahl als
   feste Weißtöne im HTML — gebaut für das dunkle Thema, im hellen unlesbar.
   Zweitens stand alles in einer Reihe: Datum, Schiff, Erwartung, wer mitarbeitet,
   der Prüfstand und mittendrin ein Eingabefeld. Tatsachen und Bedienelemente
   sahen gleich aus, und bei schmalem Fenster brach die Reihe an beliebiger Stelle.

   Jetzt tragen alle Angaben dieselbe Form (`.td-chip`), und das eine Feld darin
   ist als Feld erkennbar. Kein Kasten, keine Schatten: der Kopf soll ruhig sein. */
.tour-kopf-fakten { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.td-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px;
  background: var(--field-bg); border: 1px solid var(--panel-border); font-size: .85rem; color: var(--text-muted); }
.td-chip i { font-size: .8rem; opacity: .75; }
.td-chip input[type="number"] { width: 58px; padding: 1px 4px; text-align: center; font-size: .88rem; font-weight: 600;
  color: var(--text-main); background: transparent; border: 0; border-bottom: 1px solid var(--panel-border); border-radius: 0; }
.td-chip input[type="number"]:focus { outline: none; border-bottom-color: var(--primary); }
.td-chip > button { display: none; padding: 1px 7px; border: 1px solid var(--success); border-radius: 6px;
  background: transparent; color: var(--success); cursor: pointer; font-size: .8rem; }
.td-chip > button:hover { background: var(--success); color: #fff; }

/* Die Zahlen im Kopf einer Fahrt: gebucht, gezählt, unterwegs zu-/ausgestiegen.
   Eigener Platz neben dem Datum (1.153.0) — vorher standen sie IM Datumsfeld und
   haben dabei das formatierte Datum durch das rohe ISO-Datum ersetzt.
   `--on-accent` statt `--text-main` auf farbigem Grund: im hellen Thema wäre die
   Schrift sonst dunkel auf Blau. */
.tour-kopf-zahlen { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kopf-marke { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--on-accent); }
.kopf-marke.ist { background: var(--field-bg); border: 1px solid var(--primary); color: var(--primary); }
.kopf-marke.leise { background: var(--field-bg); border: 1px solid var(--panel-border); color: var(--text-muted); font-weight: 500; }

/* Felder, die es nur bei Einsätzen MIT Gästen gibt (Pax geplant/final, gezählt).
   `hidden` allein genügt hier nicht: die beiden Wrapper tragen `display:contents`
   als Inline-Stil, damit sie im Raster nicht als eigene Zelle zählen — und ein
   Inline-`display` schlägt das, was `hidden` über das Browser-Stylesheet setzt.
   Deshalb ausdrücklich, und deshalb mit `!important`. */
.ed-nur-mit-gaesten[hidden] { display: none !important; }

/* Meldung #256: unbezahlte Buchungen in der Gästeliste der Fahrt. Streifen links
   und das Zahlfeld rot — die Zeile selbst bleibt lesbar. */
#booking-table-body tr.unbezahlt td:first-child { box-shadow: inset 4px 0 0 var(--danger); }
#booking-table-body tr.unbezahlt .pay-status { color: var(--danger); border-color: var(--danger); font-weight: 700;
  background: color-mix(in srgb, var(--danger) 10%, transparent); }

/* Meldung #275: stornierte Buchungen bleiben sichtbar, sehen aber nicht mehr
   gültig aus — abgeblendet, Name durchgestrichen, ein Chip sagt warum. */
#booking-table-body tr.buchung-storniert td { opacity: .55; }
#booking-table-body tr.buchung-storniert td:last-child { opacity: 1; }
#booking-table-body tr.buchung-storniert .cell-name > span:first-child { text-decoration: line-through; }
.storno-chip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 20px; font-size: .72rem; font-weight: 700;
  color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }

/* ── Doppelte prüfen (1.183.0, js/dubletten.js) ─────────────────────── */
.dub-leiste { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.dub-tab { padding: 0.45rem 1rem; border-radius: 8px; border: 1px solid var(--panel-border); background: transparent; color: var(--text-main); cursor: pointer; font: inherit; }
.dub-tab.aktiv { background: var(--primary); border-color: var(--primary); color: var(--on-accent); }
.dub-zahl { display: inline-block; min-width: 1.4em; padding: 0 0.35em; margin-left: 0.25em; border-radius: 999px; background: rgba(var(--ink-rgb), 0.12); font-size: 0.8em; text-align: center; font-variant-numeric: tabular-nums; }
.dub-filter { display: inline-flex; gap: 0.35rem; align-items: center; color: var(--text-muted); font-size: 0.9rem; margin-left: 0.5rem; }
.dub-suchen { width: auto; margin-left: auto; padding: 0.45rem 1rem; }
.dub-hinweis { color: var(--text-muted); font-size: 0.88rem; margin: 0 0 1rem; max-width: 70ch; }
.dub-liste { display: flex; flex-direction: column; gap: 0.9rem; }
.dub-leer { padding: 2.5rem 1rem; text-align: center; color: var(--text-muted); }
.dub-leer .fa-circle-check { color: var(--success); margin-right: 0.3rem; }
.dub-karte { border: 1px solid var(--panel-border); border-radius: 10px; background: var(--panel-bg); padding: 0.8rem 1rem; transition: opacity 0.2s; }
.dub-karte.dub-weg { opacity: 0.35; pointer-events: none; }
.dub-karte header { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 0.6rem; }
.dub-grund { color: var(--text-muted); font-size: 0.9rem; }
.dub-aktion { margin-left: auto; display: inline-flex; gap: 0.6rem; align-items: center; }
.dub-chip { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid currentColor; }
.dub-sicher { color: var(--danger); }
.dub-mittel { color: var(--warning); }
.dub-schwach { color: var(--text-muted); }
.dub-fahrt { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 0.6rem; }
.dub-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
@media (max-width: 720px) { .dub-paar { grid-template-columns: 1fr; } }
.dub-seite { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.7rem; border-radius: 8px; background: var(--field-bg); min-width: 0; }
.dub-feld { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.5rem; font-size: 0.9rem; padding: 0.12rem 0.3rem; border-radius: 4px; }
.dub-feld span { color: var(--text-muted); }
.dub-feld b { font-weight: 500; overflow-wrap: anywhere; }
.dub-feld em { color: var(--text-dim); font-style: normal; }
.dub-feld.dub-anders { background: rgba(var(--ink-rgb), 0.07); }
.dub-feld.dub-anders b { font-weight: 650; }
.dub-behalten { width: auto; align-self: flex-start; margin-top: 0.5rem; padding: 0.4rem 0.9rem; font-size: 0.88rem; }
.dub-link { background: none; border: none; color: var(--primary); cursor: pointer; font: inherit; font-size: 0.9rem; padding: 0.2rem; }
.dub-link:hover { text-decoration: underline; }
.dub-wer { color: var(--text-muted); font-size: 0.85rem; }

.dub-sammel { width: auto; margin-left: auto; padding: 0.45rem 1rem; }
.dub-sammel + .dub-suchen { margin-left: 0; }

/* ── Kalender einlesen (1.187.0, js/kalenderimport.js) ──────────────── */
.ki-kopf { padding: 1rem 1.2rem; margin-bottom: 1rem; }
.ki-kopf h3 { margin: 0 0 0.4rem; }
.ki-hinweis { color: var(--text-muted); font-size: 0.88rem; max-width: 72ch; margin: 0 0 0.9rem; }
.ki-feld { display: block; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.7rem; }
.ki-feld input { display: block; width: 100%; margin-top: 0.25rem; padding: 0.5rem 0.7rem; border-radius: 8px;
  border: 1px solid var(--input-border); background: var(--input-bg); color: var(--input-color); font: inherit; }
.ki-zeile { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.ki-schalter { display: inline-flex; gap: 0.4rem; align-items: center; color: var(--text-main); font-size: 0.9rem; }
.ki-klein { color: var(--text-muted); font-size: 0.82rem; }
.ki-leiste { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.ki-liste { display: flex; flex-direction: column; gap: 0.5rem; }
.ki-leer { padding: 2rem 1rem; text-align: center; color: var(--text-muted); }
.ki-leer .fa-circle-check { color: var(--success); margin-right: 0.3rem; }
.ki-karte { display: grid; grid-template-columns: 11rem 1fr auto; gap: 0.9rem; align-items: center;
  padding: 0.7rem 0.9rem; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--panel-bg); }
@media (max-width: 760px) { .ki-karte { grid-template-columns: 1fr; } }
.ki-karte.ki-doppelt { border-color: var(--warning); }
.ki-wann { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.ki-wann span { color: var(--text-muted); font-size: 0.85rem; }
.ki-was { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ki-was b { overflow-wrap: anywhere; }
.ki-schon { color: var(--warning); font-size: 0.82rem; }
.ki-tun { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: flex-end; }
.ki-btn { width: auto; padding: 0.35rem 0.8rem; font-size: 0.85rem; }

/* Wochendienstplan: der Tag führt in den Tagesleitstand (1.187.0). */
.dp-tag { background: none; border: 1px solid transparent; border-radius: 7px; color: inherit; font: inherit;
  cursor: pointer; padding: 2px 6px; line-height: 1.25; }
.dp-tag:hover { border-color: var(--primary); color: var(--primary); }
.dp-tag:hover span { color: var(--primary) !important; }

/* Kalender-Kanal: Art, Verknüpfung, Abweichung (1.188.0). */
.ki-feld textarea { display: block; width: 100%; margin-top: 0.25rem; padding: 0.5rem 0.7rem; border-radius: 8px;
  border: 1px solid var(--input-border); background: var(--input-bg); color: var(--input-color); font: inherit; resize: vertical; }
.ki-art { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.05rem 0.4rem; border-radius: 5px; border: 1px solid currentColor; margin-right: 0.35rem; vertical-align: middle; }
.ki-art-einsatz { color: var(--accent-amber, #d8a24a); }
.ki-art-fahrt { color: var(--primary); }
.ki-art-termin { color: var(--text-muted); }
.ki-verknuepft { color: var(--success); font-size: 0.82rem; }
.ki-abw { color: var(--warning); font-size: 0.82rem; }
.ki-karte.ki-verknuepft { border-left: 3px solid var(--success); }
.ki-karte.ki-neu { border-left: 3px solid var(--warning); }
.ki-karte.ki-uebernommen { border-left: 3px solid var(--primary); }

/* Wochendienstplan: der Arbeitsstand färbt den Spaltenkopf (1.188.0). */
.dp-kopf.as-arbeit { box-shadow: inset 0 3px 0 #6aa9e0; }
.dp-kopf.as-antwort { box-shadow: inset 0 3px 0 var(--warning); }
.dp-kopf.as-fertig { box-shadow: inset 0 3px 0 var(--success); }

/* Kalender und Fahrtenliste: der Arbeitsstand am Tag (1.188.0). */
.cal-day-as { float: right; margin: -2px -2px 0 0; }
.cal-cell.as-arbeit { box-shadow: inset 0 3px 0 #6aa9e0; }
.cal-cell.as-antwort { box-shadow: inset 0 3px 0 var(--warning); }
.cal-cell.as-fertig { box-shadow: inset 0 3px 0 var(--success); }

/* ── Wirtschaft (1.191.0, js/wirtschaft.js) ─────────────────────────── */
.wi-leiste { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1.2rem; }
.wi-zeit { display: inline-flex; gap: 0.4rem; align-items: center; margin-left: auto; }
.wi-zeit select, .wi-zeit input { padding: 0.35rem 0.6rem; border-radius: 8px; border: 1px solid var(--input-border);
  background: var(--input-bg); color: var(--input-color); font: inherit; font-size: 0.86rem; }
.wi-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem; margin-bottom: 1.4rem; }
.wi-kachel { border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel-bg); padding: 0.9rem 1rem;
  display: flex; flex-direction: column; gap: 0.25rem; }
.wi-kachel.wi-warn { border-color: color-mix(in srgb, var(--warning) 55%, var(--panel-border)); }
.wi-kachel-t { color: var(--text-muted); font-size: 0.8rem; letter-spacing: 0.02em; }
.wi-kachel-w { font-size: 1.6rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wi-kachel-u { color: var(--text-muted); font-size: 0.8rem; }
.wi-trend { font-weight: 700; }
.wi-trend.gut { color: var(--success); }
.wi-trend.schlecht { color: var(--danger); }
.wi-ueber { font-size: 0.95rem; margin: 1.4rem 0 0.6rem; }
.wi-diagramm { height: 260px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel-bg);
  padding: 0.7rem; margin-bottom: 1rem; }
.wi-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.2rem; }
.wi-tabelle { width: 100%; font-size: 0.86rem; }
.wi-tabelle td, .wi-tabelle th { font-variant-numeric: tabular-nums; }
.wi-leer { padding: 1.5rem; text-align: center; color: var(--text-muted); }
.wi-fuss { color: var(--text-muted); font-size: 0.8rem; margin-top: 0.5rem; }
.wi-hinweis { border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--panel-border)); border-radius: 10px;
  background: color-mix(in srgb, var(--warning) 8%, transparent); padding: 0.7rem 0.9rem; margin-bottom: 1rem;
  color: var(--text-main); font-size: 0.88rem; }
.wi-hinweis i { color: var(--warning); margin-right: 0.4rem; }
.wi-quote { font-weight: 700; font-variant-numeric: tabular-nums; }
.wi-quote.wi-schwach { color: var(--danger); }
.wi-quote.wi-stark { color: var(--success); }

/* ── Stempel-Rückfragen im Posteingang (1.195.0, public/js/inbox.js) ──────
   Die Wahl ist eine Uhrzeit: jeder Knopf trägt sie groß, darunter klein,
   woher sie kommt. Der Verlauf ist eine Zeitleiste, weil er eine ist —
   Plan, Mitarbeiter, Teamleiter, in dieser Reihenfolge. */
.kl-unterwegs { font-size: .8rem; color: var(--text-muted); padding: 8px 8px 10px; border-bottom: 1px dashed var(--table-border); }
.kl-unterwegs i { margin-right: 6px; opacity: .7; }
.kl-fall { padding: 12px 8px 14px; border-bottom: 1px solid var(--table-border); }
.kl-fall:last-child { border-bottom: 0; }
.kl-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kl-anlass { color: var(--text-muted); font-size: .85rem; }
.kl-schiff { margin-left: auto; font-size: .75rem; color: var(--text-muted); border: 1px solid var(--panel-border); border-radius: 20px; padding: 1px 9px; }
.kl-verlauf { list-style: none; margin: 8px 0 10px; padding: 0 0 0 14px; border-left: 2px solid color-mix(in srgb, var(--warning) 55%, transparent); font-size: .84rem; }
.kl-verlauf li { padding: 2px 0; }
.kl-verlauf li:first-child { color: var(--text-muted); }
.kl-wahl { display: flex; gap: 8px; flex-wrap: wrap; }
.kl-knopf {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 9rem;
  padding: 7px 12px; border-radius: 10px; cursor: pointer; text-align: left;
  background: var(--field-bg); border: 1px solid var(--panel-border); color: var(--text-main);
  transition: border-color .15s ease, background .15s ease;
}
.kl-knopf:hover, .kl-knopf:focus-visible { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--field-bg)); }
.kl-zeit { font-weight: 700; font-variant-numeric: tabular-nums; }
.kl-was { font-size: .74rem; color: var(--text-muted); }
.kl-andere { border-style: dashed; }

/* ── Korrigierte Schichten in den Berichten (Meldung #276) ──────────────
   Was nicht von der Stempeluhr kommt, trägt eine Marke; in der Matrix eine
   gestrichelte Umrandung, damit der Tag auf den ersten Blick auffällt. */
.zt-korr { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 0 7px; border-radius: 20px;
  font-size: .7rem; font-weight: 700; white-space: nowrap; color: var(--warning);
  background: color-mix(in srgb, var(--warning) 13%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); }
tr.zt-korrigiert td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.zt-korr-zelle { outline: 2px dashed var(--warning); outline-offset: -2px; }

/* Meldung #271: ausgefallene Fahrt — Kachel abgeblendet, Knopf in der Fahrtansicht rot gefüllt. */
.tour-card.tour-ausgefallen, .tour-ausgefallen { opacity: .6; }
#btn-tour-ausfall.ist-ausgefallen { background: color-mix(in srgb, var(--danger) 15%, transparent) !important; border-color: var(--danger) !important; color: var(--danger) !important; }

/* ── Auswertung: zwei Ansichten in einem Fenster (1.199.0) ───────────────
   Der Umschalter ist ein Segment, kein Reiter der Seite: er tauscht die ganze
   Ansicht. Jede Hälfte sagt in einer Zeile, wofür sie da ist. */
.aw-kopf { display: flex; flex-direction: column; gap: 10px; }
.aw-kopf h2 { margin: 0; }
.aw-kopf p { margin: 0; color: var(--text-muted); max-width: 70ch; }
.aw-umschalter { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; align-self: flex-start;
  background: var(--field-bg); border: 1px solid var(--panel-border); }
.aw-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 16px; border: 0;
  border-radius: 9px; background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; text-align: left; }
.aw-tab b { font-size: .95rem; color: var(--text-main); font-weight: 700; }
.aw-tab small { font-size: .72rem; }
.aw-tab:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.aw-tab.aktiv { background: var(--primary); color: var(--on-accent, #04140f); }
.aw-tab.aktiv b, .aw-tab.aktiv small { color: inherit; }
.aw-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
details.aw-eingeklappt > summary { cursor: pointer; font-weight: 700; list-style: revert; }
details.aw-eingeklappt > summary span { font-weight: 400; color: var(--text-muted); font-size: .88rem; }
details.aw-eingeklappt[open] > summary { margin-bottom: 14px; }