/* ════════════════════════════════════════════════════════════════════════════
   GERO Nexus — Corporate Design (synchron zu gero-holding.de)
   Primärfarbe: #001E41 (Marken-Dunkelblau)  ·  Akzentfarbe: #00AFEB (Cyan)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Custom Properties ─────────────────────────────────────────────────── */
:root {
  --gero-navy:      #001E41;   /* Marken-Dunkelblau */
  --gero-navy-2:    #00264f;   /* Sidebar-Hover */
  --gero-navy-3:    #004B96;   /* Sekundär-Blau */
  --gero-cyan:      #00AFEB;   /* Akzent-Cyan */
  --gero-cyan-dark: #008cbe;
  --gero-bg:        #F9FAFA;   /* Sehr helles Grau */
  --gero-surface:   #ffffff;
  --gero-text:      #1a2640;
  --gero-body:      #4F4F4F;   /* Fließtext */
  --gero-muted:     #6c7a89;
  --gero-border:    #e2e6ea;
  /* Verbindungs-Editor: Breakout (steckt in Σ) vs. parallel (zusätzlich). */
  --gero-breakout:      #4a6a1e;   /* Grün, Text/Marker */
  --gero-breakout-bg:   #e6f0d9;
  --gero-breakout-line: #a3c26a;   /* Rand am Feld */
  --gero-parallel:      #8a5311;   /* Orange, Text/Marker */
  --gero-parallel-bg:   #fde9d0;
  --gero-parallel-line: #e6a45c;
  /* Semantisches „Erfolg/erledigt/OK"-Grün — EIN Grün app-weit, harmonisiert
     zum Navy/Cyan-Brand. NICHT hierüber: freenet-Provider-Grün + Ampel-Grün
     (Bindefrist „frei"). Ton „Smaragd-Light" (2026-07-12): satter Grünwert, aber
     nur als sehr heller Tint → kein Neon-Effekt (früher #16a34a/#dcfce7 = grell).
     Alternativen dokumentiert in _reports/design_farbschema_semantik.md. */
  --gero-ok:     #059669;   /* solide (Pipeline-/Status-Schritt „done") */
  --gero-ok-tx:  #047857;   /* Text/Icon auf hell */
  --gero-ok-bg:  #ecfdf5;   /* weiches Badge-/Karten-Tint */
  --gero-ok-bd:  #c7ecdb;   /* Rahmen */
  /* „Warnung/Achtung"-Amber — moderner, wärmer als Bootstrap-Gelb (#ffc107),
     harmoniert mit dem Brand. Ampel-Amber (Bindefrist-Balken) separat. */
  --gero-warn:    #f59e0b;   /* solide (Progress/Fill) */
  --gero-warn-tx: #b45309;   /* Text/Icon auf hell */
  --gero-warn-bg: #fef3c7;   /* weiches Badge-/Karten-Tint */
  --gero-warn-bd: #fde68a;   /* Rahmen */
  /* „Fehler/Drift"-Rot — Tint-Variante für Scores/Badges (Gesamtqualität rot,
     Konfidenz-Pille rot). Solides Bootstrap-Rot bleibt für .badge.bg-danger. */
  --gero-danger:    #dc3545;   /* solide */
  --gero-danger-tx: #c0392b;   /* Text/Icon auf hell */
  --gero-danger-bg: #fde8e8;   /* weiches Tint */
  --gero-danger-bd: #f1aeb5;   /* Rahmen */
  /* Neutraler Zahlen-Tint — reine Kennzahlen (Summen/Anzahl) OHNE „geprüft"-
     Bedeutung: Marken-Blau, hell. Trennt Wert (blau) von Status (grün). */
  --gero-num-bg: #e8f1fb;
  --gero-num-tx: #004B96;
  /* Status „Manuelle Prüfung" (reviewing) — bewusst NEUTRAL (Schiefer), damit
     der Bearbeitungs-Status nicht die Markenfarbe „verbraucht". */
  --gero-status-review-bg: #eef1f5;
  --gero-status-review-tx: #334155;
  --font-heading:   'Montserrat', system-ui, sans-serif;
  --font-body:      'Inter', system-ui, sans-serif;
  --sidebar-width:  260px;
  --topbar-height:  58px;
  --radius:         10px;
  --shadow-sm:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:      0 3px 6px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:      0 10px 30px rgba(0,0,0,.12);
}

/* ── Reset & Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--gero-text);
  background: var(--gero-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.gero-stat-value, .gero-logo-title, .gero-page-title {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── Layout ────────────────────────────────────────────────────────────── */
.gero-body { overflow: hidden; height: 100vh; }

.gero-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.gero-sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--gero-navy);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 100;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}

/* Logo */
.gero-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.gero-logo-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gero-cyan);
  font-size: 1.6rem;
  line-height: 1;
}

.gero-logo-img {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  object-fit: contain;
}

.gero-logo-g {
  color: white;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -1px;
}

.gero-logo-text { display: flex; flex-direction: column; }
.gero-logo-title { color: white; font-weight: 700; font-size: 1.2rem; line-height: 1.2; }
.gero-logo-sub { color: var(--gero-cyan); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.5px; }

/* Navigation */
.gero-nav {
  list-style: none;
  padding: 8px 12px;
  margin: 0;
}

/* Sektions-Überschrift (CMO-Gruppe). Immer sichtbar — die alte CMO-Nav war ebenso
   gruppiert, das trägt die Muscle-Memory der Bearbeiter. */
.gero-nav-caption {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 14px 12px 5px;
  /* ≥4,5:1 auf Navy (bei .62 ~6,8:1) — getrackter Kleintext braucht das (UX-Review 2026-07-23). */
  color: rgba(255,255,255,.62);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Beta-Markierung an Caption ODER Einzel-Item (Item: rechtsbündig ans Zeilenende). */
.gero-nav-beta {
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .04rem .32rem;
  border-radius: 999px;
  background: rgba(245,158,11,.20);
  color: #f5b559;
  border: 1px solid rgba(245,158,11,.36);
}
.gero-nav-link .gero-nav-beta { margin-left: auto; }

/* „Beta ausblenden"-Umschalter: blendet ALLE Beta-Flächen zusammen aus
   (.gero-hide-beta wird von gero.js an der Sidebar getoggelt, initial serverseitig
   aus User.hide_beta_nav). */
.gero-sidebar.gero-hide-beta .gero-beta-only { display: none; }

/* ── Einklappbare Sektionen (Disclosure). Der Sektions-Kopf ist ein Button im
   Caption-Look; die Item-Liste klappt darunter auf/zu. Progressive Enhancement:
   die Collapse-Regeln greifen NUR mit aktivem JS (`.js-nav` an der Sidebar) —
   ohne JS bleibt alles offen (kein Aussperren). Zustand pro Browser (localStorage),
   die Sektion der aktuellen Seite ist immer offen.
   Bewusst NICHT Bootstrap-Collapse wie `.gero-nav-toggle` (Admin „Ansehen als"):
   dieses Muster ist zweckgebaut für Persistenz + Auto-Open der aktiven Sektion,
   was Bootstrap nicht mitbringt. Chevron im Baum-Stil (▸ zu / ▾ auf) — die
   passende Konvention für einklappbare Navigation. */
.gero-nav-sec { list-style: none; }
.gero-nav-sechead {
  display: flex; align-items: center; gap: .4rem; width: 100%;
  padding: 14px 12px 5px; background: none; border: 0; cursor: pointer;
  font-family: inherit; text-align: left;
  color: rgba(255,255,255,.62);
  font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  transition: color .15s ease;
}
.gero-nav-sechead:hover { color: rgba(255,255,255,.9); }
.gero-nav-sechead:focus-visible { outline: 2px solid var(--gero-cyan); outline-offset: 2px; border-radius: 6px; }
.gero-nav-seclist { list-style: none; margin: 0; padding: 0; }
.gero-nav-chevron {
  margin-left: auto; display: none; font-size: .7rem !important; width: auto !important;
  color: rgba(255,255,255,.5); transition: transform .18s ease;
}
/* Collapse nur mit JS; Chevron nur mit JS (ohne Toggle wäre er irreführend). */
.gero-sidebar.js-nav .gero-nav-chevron { display: inline-block; }
.gero-sidebar.js-nav .gero-nav-seclist { display: none; }
.gero-sidebar.js-nav .gero-nav-sec.is-open > .gero-nav-seclist { display: block; }
.gero-sidebar.js-nav .gero-nav-sec:not(.is-open) .gero-nav-chevron { transform: rotate(-90deg); }

.gero-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.18s ease;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 2px;
}

.gero-nav-link i {
  font-size: 1.1rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

/* Nav-Eintrag als Button (z.B. die Rollen-Vorschau-POST-Formulare): Button-
   Chrome zurücksetzen, damit er 1:1 wie ein <a>.gero-nav-link aussieht. */
.gero-nav-btn {
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gero-nav-link:hover {
  background: rgba(0,175,235,.10);
  color: white;
}
.gero-nav-link:hover i { color: var(--gero-cyan); }

.gero-nav-link.active {
  background: rgba(0,175,235,.16);
  color: white;
  position: relative;
}
.gero-nav-link.active i { color: var(--gero-cyan); }

.gero-nav-link.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--gero-cyan);
  border-radius: 0 2px 2px 0;
}

/* Divider */
.gero-sidebar-divider {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 8px 16px;
}

/* User-Bereich */
.gero-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin: 0 12px 16px;
  background: rgba(255,255,255,.05);
  border-radius: 10px;
  flex-shrink: 0;
}

.gero-user-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  padding: 4px;
  margin: -4px;
  border-radius: 8px;
  transition: background 0.18s;
}

.gero-user-link:hover {
  background: rgba(255,255,255,.06);
}

.gero-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gero-cyan), var(--gero-cyan-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.gero-user-info {
  flex: 1;
  min-width: 0;
}

.gero-user-name {
  display: block;
  color: white;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gero-user-email {
  display: block;
  color: rgba(255,255,255,.45);
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gero-logout-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.4);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.18s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  font-size: 1rem;
}

.gero-logout-btn:hover {
  color: #ff6b6b;
  background: rgba(255,107,107,.1);
}

/* ── Hauptbereich ──────────────────────────────────────────────────────── */
.gero-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* Topbar */
.gero-topbar {
  /* min-height statt fester Höhe: bei vielen topbar_actions-Buttons und schmalem
     Fenster darf die Leiste wachsen (Buttons umbrechen in eine 2. Zeile), statt
     dass die Buttons sich quetschen, ihren Text mehrzeilig umbrechen und oben
     aus der Leiste herauslaufen (Befund 2026-06-12, Empfehlungs-Seite @ ~860px). */
  min-height: var(--topbar-height);
  background: var(--gero-surface);
  border-bottom: 1px solid var(--gero-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 8px 24px;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.gero-breadcrumb {
  display: flex;
  align-items: center;
  color: var(--gero-text);
  font-size: 0.875rem;
  font-weight: 500;
}

.breadcrumb-link {
  color: var(--gero-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.breadcrumb-link:hover { color: var(--gero-cyan); }

/* Topbar-Actions (rechte Seite) */
.gero-topbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
/* Button-Beschriftungen nie mehrzeilig umbrechen — sonst „ballonen" die Buttons
   bei knappem Platz in die Höhe. Lieber als Ganzes in die nächste Zeile umbrechen. */
.gero-topbar-actions .btn { white-space: nowrap; }
/* Einheitliche Button-Höhe im Topbar-Cluster: gero-btn-outline/-primary haben
   festes padding 8px, gero-btn-success erbt nur btn-sm (niedriger) → im Cluster
   sahen die Buttons unterschiedlich hoch aus (Chef-Befund). Hier vertikal
   angleichen — wirkt NUR im Topbar (gero-btn-success btn-lg woanders bleibt heil). */
.gero-topbar-actions .btn { padding-top: 8px; padding-bottom: 8px; line-height: 1.4; }
.gero-topbar-actions .gero-basis-select { padding-top: 8px; padding-bottom: 8px; line-height: 1.4; min-height: 0; }

.gero-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--gero-muted);
  text-decoration: none;
  font-size: 1.1rem;
  transition: background .15s, color .15s;
}
.gero-help-btn:hover {
  background: rgba(0,175,235,0.12);
  color: var(--gero-cyan);
}
.gero-help-btn.active {
  background: rgba(0,175,235,0.15);
  color: var(--gero-cyan);
}

/* Content */
.gero-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

/* Footer */
.gero-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 24px;
  background: var(--gero-surface);
  border-top: 1px solid var(--gero-border);
  color: var(--gero-muted);
  font-size: 0.75rem;
}

.gero-footer-sha {
  font-family: 'SF Mono', 'Menlo', monospace;
  color: var(--gero-muted);
  opacity: 0.7;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.gero-card {
  background: var(--gero-surface);
  border-radius: var(--radius);
  border: 1px solid var(--gero-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.gero-card-highlight {
  border-color: var(--gero-cyan);
  border-width: 1px;
}

.gero-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--gero-border);
  background: #fafbfc;
}

.gero-card-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gero-text);
  display: flex;
  align-items: center;
}

.gero-card-body {
  padding: 20px;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* Einheitlicher Pill-Stil für ALLE Buttons: auch reine Bootstrap-.btn
   (btn-danger, btn-outline-secondary, btn-warning, btn-light …) übernehmen den
   runden Radius der gero-btn-*. Bootstrap rundet die Innenkanten von Input-
   Groups (Suche) und Button-Groups über höher spezifische Regeln selbst ab —
   die bleiben dadurch unberührt. (.btn-close trägt kein .btn → unbetroffen.) */
.btn {
  border-radius: 25px;
}

/* Primär: Pill-Style in Marken-Dunkelblau wie auf gero-holding.de */
/* Primär-Buttons (Haupt-Aktionen, z.B. „Angebot speichern") in der Marken-Hero-Farbe
   — Navy→Cyan-Verlauf wie das Hero-Banner, damit die Buttons aus einem Guss wirken.
   `.gero-btn-manual` (Anleitung) teilt bewusst dieselbe Optik (GF-Wunsch: soll sich
   einreihen, nicht herausstechen). Leichter Text-Schatten für Lesbarkeit am helleren
   Cyan-Ende. */
.gero-btn-primary,
.gero-btn-manual {
  background: linear-gradient(120deg, #001428 0%, #002f5e 38%, #0a5c9e 68%, #00AFEB 130%);
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: 25px;
  padding: 8px 20px;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
  box-shadow: 0 3px 12px rgba(0,175,235,.30);
  transition: all 0.18s;
}
.gero-btn-primary:hover,
.gero-btn-manual:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,175,235,.42);
}
.gero-btn-primary:active,
.gero-btn-manual:active { transform: translateY(0); }
/* Fokus-Ring in Navy (nicht Cyan): Cyan auf weißem Grund erreicht die 3:1-Marke für
   Fokusindikatoren (WCAG 1.4.11) nicht; Navy schon. Cyaner Halo als Marken-Akzent. */
.gero-btn-primary:focus-visible,
.gero-btn-manual:focus-visible {
  outline: 2px solid var(--gero-navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0,175,235,.35);
}

/* Sekundär-Buttons (Abbrechen, PDF, ZIP …): dezent hero-getönt statt stark weiß —
   fügt sich farblich ins Marken-Blau ein, bleibt aber klar zweitrangig (heller,
   umrandet) gegenüber den gefüllten Primär-Buttons → Hierarchie bleibt erhalten. */
.gero-btn-outline {
  background: #f4f9fd;
  border: 1.5px solid #bfe4f6;
  color: #003a6b;
  font-weight: 500;
  border-radius: 25px;
  padding: 8px 20px;
  transition: all 0.18s;
}

.gero-btn-outline:hover {
  background: #e6f4fc;
  border-color: var(--gero-cyan);
  color: var(--gero-navy);
}
/* Disabled-Zustand analog zu gero-btn-danger/-warning — u. a. für den
   „läuft…"-Button (apps/analyses/views.py) und festgeschriebene Belege.
   Projekt-Konvention opacity .55 statt Bootstrap-Default .65. */
.gero-btn-outline.disabled,
.gero-btn-outline:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Nummerierte Pagination (templates/partials/pagination.html) im GERO-Look:
   Cyan-Akzent statt Bootstrap-Blau, runde aktive Seite, dezente Zahlen. */
.gero-pagination .page-link {
  color: var(--gero-navy);
  border-color: var(--gero-border);
  border-radius: 8px;
  margin: 0 2px;
  min-width: 34px;
  text-align: center;
  transition: all 0.15s;
}
.gero-pagination .page-link:hover {
  color: var(--gero-cyan);
  background: var(--gero-bg);
  border-color: var(--gero-cyan);
  z-index: 2;
}
.gero-pagination .page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 175, 235, 0.25);
}
.gero-pagination .page-item.active .page-link {
  background: var(--gero-navy);
  border-color: var(--gero-navy);
  color: #fff;
  font-weight: 600;
}
.gero-pagination .page-item.disabled .page-link {
  color: var(--gero-muted);
  background: transparent;
  border-color: var(--gero-border);
}

/* Danger: Pill-Style in Bootstrap-Danger-Rot, semantisch für destruktive
   Aktionen (Löschen) und Fehler-Indikatoren. Hält Pill-Konsistenz mit
   gero-btn-primary/outline statt eckiger Bootstrap-btn-outline-danger. */
.gero-btn-danger {
  background: transparent;
  border: 1.5px solid var(--bs-danger);
  color: var(--bs-danger);
  font-weight: 500;
  border-radius: 25px;
  padding: 8px 20px;
  transition: all 0.18s;
}

.gero-btn-danger:hover {
  background: var(--bs-danger);
  border-color: var(--bs-danger);
  color: white;
}

.gero-btn-danger.disabled,
.gero-btn-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Warnung/Vorsicht: teure oder Notfall-Aktionen (z. B. „Schwärzung prüfen",
   „erneut mit Opus", Drift bestätigen). Amber-Tint im Marken-Warn-Ton, füllt
   solide beim Hover — analog zu gero-btn-danger, damit die Rollen konsistent
   wirken. Ersetzt rohes btn-warning/btn-outline-warning (grelles #ffc107 +
   weißer Text, schlecht lesbar). */
.gero-btn-warning {
  background: var(--gero-warn-bg);
  border: 1.5px solid var(--gero-warn-bd);
  color: var(--gero-warn-tx);
  font-weight: 500;
  border-radius: 25px;
  padding: 8px 20px;
  transition: all 0.18s;
}
/* Hover füllt mit dem DUNKLEN Warn-Ton (--gero-warn-tx #b45309), nicht dem hellen
   --gero-warn (#f59e0b): weißer Text auf #f59e0b erreicht nur ~2,1:1 (WCAG-Bruch),
   auf #b45309 dagegen ~5:1. Bleibt zugleich klar dunkler als der Idle-Tint →
   eindeutiges Hover-Feedback. (Amber ist heller als das Danger-Rot, daher NICHT
   1:1 wie gero-btn-danger:hover übertragbar.) */
.gero-btn-warning:hover {
  background: var(--gero-warn-tx);
  border-color: var(--gero-warn-tx);
  color: #fff;
}
.gero-btn-warning.disabled,
.gero-btn-warning:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Globaler Rollen-Vorschau-Modus (Admin-Werkzeug): sticky Kopf-Banner, solange
   eine „Ansehen als <Rolle>"-Vorschau läuft. Marken-Warn-Ton (--gero-warn-tx
   #b45309), weißer Text ~5:1. Als Klasse statt Inline-Style, damit der Ton nicht
   erneut handgebaut wird. */
.gero-role-preview-bar {
  position: sticky;
  top: 0;
  z-index: 1035;
  background: var(--gero-warn-tx);
  color: #fff;
  padding: 0.5rem 0.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* Zusatztext leicht zurückgenommen, aber NICHT per opacity (das brach den
   Kontrast auf ~4,1:1 unter WCAG-AA) — heller Amber-Weißton hält ~4,7:1. */
.gero-role-preview-bar__sub { color: #fde8d5; }

/* Tertiär/Text-Aktion: dezente Inline-Aktionen in Tabellen/Panels. Marken-Navy
   statt Bootstrap-Blau (#0d6efd), kein Kasten. Ohne !important, damit begleitende
   Utilities (.text-muted, .text-danger) die Tönung weiter steuern können
   (z. B. rotes Text-Löschen). Ersetzt rohes btn-link. */
.gero-btn-link {
  background: transparent;
  border: 0;
  color: var(--gero-navy-3);
  font-weight: 600;
  border-radius: 25px;
  padding: 6px 10px;
  text-decoration: none;
  transition: color 0.15s;
}
.gero-btn-link:hover {
  color: var(--gero-cyan);
  text-decoration: underline;
}

/* Einheitlicher Fokus-Ring für die Nicht-Primär-Rollen (Tastatur-Navigation,
   WCAG 2.4.7 / 1.4.11) — dasselbe Navy-Outline + Cyan-Halo wie gero-btn-primary,
   statt Bootstraps markenfremdem Blau-Ring. */
.gero-btn-outline:focus-visible,
.gero-btn-danger:focus-visible,
.gero-btn-warning:focus-visible,
.gero-btn-link:focus-visible {
  outline: 2px solid var(--gero-navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0,175,235,.35);
}
/* Auf dem dunklen Hero-Gradient (selbst = var(--gero-navy)) ist der Navy-Ring
   praktisch unsichtbar und der Cyan-Halo (~2:1) reißt WCAG 1.4.11. Dort WEISSER
   Ring — auf Navy/Cyan zuverlässig >4,5:1, unabhängig vom Cyan-Glow. Gilt auch für
   den bestehenden gero-btn-primary/-manual-Ring (war schon vorher zu leise). */
.gero-hero .gero-btn-outline:focus-visible,
.gero-hero .gero-btn-danger:focus-visible,
.gero-hero .gero-btn-warning:focus-visible,
.gero-hero .gero-btn-link:focus-visible,
.gero-hero .gero-btn-primary:focus-visible,
.gero-hero .gero-btn-manual:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.55);
}

/* ── Semantik-Grün: EIN harmonisiertes Grün statt Bootstrap-Erfolgsgrün ─────
   Deckt app-weit die grünen Erfolgs-/Status-Indikatoren ab (Badges, grüner
   Text, Häkchen, Konfidenz/Qualität). Excel-Export ist jetzt Marken-Blau
   (gero-btn-primary). Ampel-Grün (Bindefrist „frei") und freenet-Provider-Grün
   nutzen eigene Werte und sind NICHT betroffen. */
.text-success { color: var(--gero-ok-tx) !important; }
.badge.bg-success,
.badge.bg-success.text-white {
  background-color: var(--gero-ok-bg) !important;
  color: var(--gero-ok-tx) !important;
}

/* ── Marken-Blau: Bootstrap-Standardblau → Brand (Navy→Cyan) ────────────────
   Blau ist die Hauptmarkenfarbe. Status-/Label-Badges (bg-primary, z.B.
   „Manuelle Prüfung") und blauer Text erhalten den Marken-Blau-Look wie die
   gero-btn-primary-Buttons — konsistent statt Bootstrap-Standardblau. */
.badge.bg-primary,
.badge.text-bg-primary {
  background: linear-gradient(120deg, #002f5e, #0a5c9e 60%, #00AFEB 130%) !important;
  color: #fff !important;
}
.text-primary { color: var(--gero-navy-3) !important; }

/* Status-Badge „Manuelle Prüfung" (bg-review, aus status_display.TON_BADGE_KLASSE):
   NEUTRAL statt Marken-Verlauf — ein Bearbeitungs-Status soll die Markenfarbe
   nicht belegen. Andere .badge.bg-primary (echte Marken-Labels) bleiben Verlauf. */
.gero-status-neutral { color: var(--gero-status-review-tx) !important; }

.badge.bg-review {
  background: var(--gero-status-review-bg) !important;
  color: var(--gero-status-review-tx) !important;
  border: 1px solid #dbe1e8;
}

/* Bootstrap-Grün-Utilities (border-/table-/alert-/progress) auf DASSELBE
   Marken-OK-Grün ziehen — sonst mehrere Grüntöne auf einer Seite (Review:
   markierte Zeile, Feld-Rahmen). */
.border-success { border-color: var(--gero-ok-bd) !important; }
/* Nicht-Badge bg-success (Konfidenz-Score-Pillen, Progress-Bars, Fills): solides
   Marken-Grün mit weißer Schrift — Badges bleiben weiches Tint (siehe oben). */
.bg-success:not(.badge) { background-color: var(--gero-ok) !important; }
.table-success {
  --bs-table-color: var(--gero-ok-tx);
  --bs-table-bg: var(--gero-ok-bg);
  --bs-table-border-color: var(--gero-ok-bd);
  --bs-table-striped-color: var(--gero-ok-tx);
  --bs-table-hover-color: var(--gero-ok-tx);
  --bs-table-hover-bg: var(--gero-ok-bg);
}
.alert-success {
  color: var(--gero-ok-tx);
  background-color: var(--gero-ok-bg);
  border-color: var(--gero-ok-bd);
}

/* ── Amber „Warnung/Achtung": Bootstrap-Gelb (#ffc107) → moderner Marken-Amber
   ─ analog zum Grün. Flaches Bootstrap-Gelb wirkte neben Navy/Cyan/Grün nicht
   mehr stimmig. Ampel-Amber (Bindefrist-Balken, eigene Werte) bleibt. */
.text-warning { color: var(--gero-warn-tx) !important; }
.badge.bg-warning,
.badge.bg-warning.text-dark {
  background-color: var(--gero-warn-bg) !important;
  color: var(--gero-warn-tx) !important;
}
.bg-warning:not(.badge) { background-color: var(--gero-warn) !important; }
.border-warning { border-color: var(--gero-warn) !important; }
.table-warning {
  --bs-table-color: var(--gero-warn-tx);
  --bs-table-bg: var(--gero-warn-bg);
  --bs-table-border-color: var(--gero-warn-bd);
  --bs-table-striped-color: var(--gero-warn-tx);
  --bs-table-hover-color: var(--gero-warn-tx);
  --bs-table-hover-bg: var(--gero-warn-bg);
}
.alert-warning {
  color: var(--gero-warn-tx);
  background-color: var(--gero-warn-bg);
  border-color: var(--gero-warn-bd);
}

/* Konfidenz-/Qualitäts-Score als weiche Tints (wie die Badges) statt satter
   Vollfarbe — die %-Pillen in den Review-Feldern + die Gesamtqualitäts-Anzeige.
   Progress-Bars/Fills bleiben solide (bg-success:not(.badge) oben). Grün/Amber/
   Rot konsistent, kommt NACH bg-success:not(.badge) → gewinnt für input-group. */
.input-group-text.bg-success, .gero-quality-badge.bg-success {
  background-color: var(--gero-ok-bg) !important;
  color: var(--gero-ok-tx) !important;
}
.input-group-text.bg-warning, .gero-quality-badge.bg-warning {
  background-color: var(--gero-warn-bg) !important;
  color: var(--gero-warn-tx) !important;
}
.input-group-text.bg-danger, .gero-quality-badge.bg-danger {
  background-color: var(--gero-danger-bg) !important;
  color: var(--gero-danger-tx) !important;
}

/* Angebots-Spalten-Drag (Tabellenkopf, eigener Pointer-Drag): gezogener Kopf
   blass, Ziel-Kopf mit Cyan-Einfügelinie links. */
.gero-col-dragging { opacity: .5; }
.gero-col-target { box-shadow: inset 3px 0 0 var(--gero-cyan, #00afeb); }

/* Spaltenbreite ziehen: Greifzone am rechten Kopf-Rand (col-resize-Cursor). */
.gero-col-resizer {
  position: absolute; top: 0; right: 0; width: 6px; height: 100%;
  cursor: col-resize; user-select: none; z-index: 6; touch-action: none;
}
.gero-col-resizer:hover { background: var(--gero-cyan, #00afeb); opacity: .5; }
body.gero-col-resizing, body.gero-col-resizing * { cursor: col-resize !important; user-select: none !important; }

/* ── Tables ────────────────────────────────────────────────────────────── */
.gero-table {
  font-size: 0.875rem;
}

.gero-table thead th {
  background: var(--gero-navy);
  border-bottom: none;
  color: white;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 12px 14px;
  white-space: nowrap;
}

.gero-table thead th:first-child { border-top-left-radius: var(--radius); }
.gero-table thead th:last-child  { border-top-right-radius: var(--radius); }

.gero-table td {
  padding: 10px 14px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f2f5;
}

.gero-table tbody tr:nth-child(even) { background: #F9FAFA; }
.gero-table tbody tr:hover { background: rgba(0,175,235,.08); }
.gero-table tbody tr:last-child td { border-bottom: none; }

/* ── Dashboard Stats ───────────────────────────────────────────────────── */
.gero-stat-card {
  background: var(--gero-surface);
  border: 1px solid var(--gero-border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.gero-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gero-cyan);
}

.gero-stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.gero-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

/* Container für Number+Label rechts vom Icon — `min-width:0` verhindert
   Flex-Overflow bei langen Zahlen-Strings (Code würde sonst aus der Card
   überlaufen). */
.gero-stat-body { flex: 1; min-width: 0; }

.gero-stat-number {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--gero-text);
  line-height: 1;
}

.gero-stat-label {
  color: var(--gero-muted);
  font-size: 0.8rem;
  margin-top: 2px;
}

/* ── Provider-Auswahl-Kacheln (Tarife + Rahmenverträge, „Schiene + Anteil") ──
   Telco-Markenfarbe NUR als Akzent (Schiene links + Punkt + Balken), Zahl im
   ruhigen Navy. Farbe kommt dynamisch per inline-style (PROVIDER_COLORS). */
.gero-provider-tile { display:flex; overflow:hidden; padding:0;
  transition:transform .16s ease, box-shadow .16s ease; }
.gero-provider-tile:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.gero-provider-tile .gpt-rail { width:5px; flex:none; }
.gero-provider-tile .gpt-body { padding:1.1rem 1.15rem 1.15rem; flex:1; min-width:0; }
.gero-provider-tile .gpt-name { font-weight:700; font-size:.98rem; letter-spacing:-.01em; color:var(--gero-text); }
.gero-provider-tile .gpt-dot { width:.62em; height:.62em; border-radius:50%; display:inline-block; flex:none; }
.gero-provider-tile .gpt-num { font-size:2.5rem; font-weight:800; letter-spacing:-.03em; line-height:1;
  color:var(--gero-text); font-variant-numeric:tabular-nums; }
/* Ebenen-Überschrift „Konditionen": bewusst dunkler (Navy) + minimal größer als
   die Werte-Labels darunter, damit Überschrift und Label nicht verwechselt
   werden. cursor:help signalisiert den erklärenden title-Tooltip. */
.gero-provider-tile .gpt-sub-h { font-size:.64rem; text-transform:uppercase; letter-spacing:.05em;
  font-weight:750; color:var(--gero-navy-3); padding-top:.5rem; margin-bottom:.35rem;
  border-top:1px solid var(--gero-border); cursor:help; }
.gero-provider-tile .gpt-sub-v { font-weight:750; font-variant-numeric:tabular-nums; color:var(--gero-text); }
.gero-provider-tile .gpt-sub-l { font-size:.6rem; text-transform:uppercase; letter-spacing:.05em;
  font-weight:700; color:var(--gero-muted); cursor:help; }
.gpt-cta { font-size:.8rem; font-weight:650; color:var(--gero-navy-3); text-decoration:none;
  display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; }
.gpt-cta:hover { color:var(--gero-cyan); }

/* ── Empty State ───────────────────────────────────────────────────────── */
.gero-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--gero-muted);
  text-align: center;
}

/* Kompakte Variante für enge Container (z.B. schmale Side-Spalten). */
.gero-empty-state--compact {
  padding: 24px 16px;
}

.gero-empty-state--compact i { font-size: 2rem; }

.gero-empty-state i {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.4;
}

.gero-empty-state p { margin-bottom: 16px; }

/* ── Login Page ────────────────────────────────────────────────────────── */
.gero-login-body {
  background: var(--gero-bg);
  height: 100vh;
  overflow: hidden;
}

.gero-login-page {
  display: flex;
  height: 100vh;
}

.gero-login-brand {
  flex: 1;
  background: linear-gradient(135deg, var(--gero-navy) 0%, var(--gero-navy-3) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

.gero-login-brand-content { max-width: 480px; }

.gero-login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 0;
}

.gero-login-wordmark {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gero-login-logo-g {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--gero-cyan), var(--gero-cyan-dark));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 900;
  font-size: 1.6rem;
}

.gero-login-logo-img {
  width: 132px;
  height: 132px;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(0,175,235,.35));
}

.gero-login-logo-text {
  color: white;
  font-size: 3.8rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
}

.gero-login-headline {
  color: var(--gero-cyan);
  font-size: 4.4rem;
  font-weight: 800;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.5px;
}

.gero-login-tagline {
  color: rgba(255,255,255,.65);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 40px;
}

.gero-login-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gero-login-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.75);
}

.gero-login-feature i {
  color: var(--gero-cyan);
  font-size: 1.2rem;
  width: 24px;
  flex-shrink: 0;
}

.gero-login-form-side {
  width: 440px;
  min-width: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  padding: 40px;
}

.gero-login-card { width: 100%; max-width: 360px; }

.gero-login-card-header { margin-bottom: 28px; }
.gero-login-card-header h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; }
.gero-login-card-header p { color: var(--gero-muted); margin: 0; }

.gero-form-label {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--gero-text);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.gero-login-footer {
  margin-top: 24px;
  text-align: center;
  color: var(--gero-muted);
  font-size: 0.78rem;
}

/* ── Alert ─────────────────────────────────────────────────────────────── */
.gero-messages { margin-bottom: 20px; }

.gero-alert {
  border-radius: var(--radius);
  border: none;
  font-size: 0.875rem;
}

/* ── Pipeline Steps ────────────────────────────────────────────────────── */
.gero-pipeline-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
}

.gero-pipeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.gero-step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e8ecf0;
  color: var(--gero-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  border: 2px solid #e8ecf0;
}

.gero-pipeline-step.active .gero-step-number {
  background: var(--gero-cyan);
  color: white;
  border-color: var(--gero-cyan);
  box-shadow: 0 0 0 4px rgba(0,180,216,.15);
}

.gero-pipeline-step.done .gero-step-number {
  background: var(--gero-ok);
  color: white;
  border-color: var(--gero-ok);
}

.gero-step-label {
  font-size: 0.72rem;
  color: var(--gero-muted);
  text-align: center;
  white-space: nowrap;
}

.gero-pipeline-step.active .gero-step-label { color: var(--gero-cyan); font-weight: 600; }
.gero-pipeline-step.done .gero-step-label { color: var(--gero-ok-tx); }

.gero-pipeline-connector {
  flex: 1;
  height: 2px;
  background: #e8ecf0;
  margin: 0 4px;
  margin-bottom: 20px;
}

/* ── Drop Zone ─────────────────────────────────────────────────────────── */
.gero-dropzone {
  border: 2px dashed var(--gero-border);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  background: #fafbfc;
}

.gero-dropzone:hover,
.gero-dropzone.dragover {
  border-color: var(--gero-cyan);
  background: rgba(0,180,216,.04);
}

.gero-dropzone.has-file {
  border-color: var(--gero-ok-tx);
  background: rgba(22,163,74,.04);
}

.gero-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.gero-dropzone-icon {
  font-size: 3rem;
  color: var(--gero-muted);
  margin-bottom: 12px;
  line-height: 1;
}

.gero-dropzone-text {
  font-size: 1rem;
  margin-bottom: 6px;
}

.gero-dropzone-hint {
  font-size: 0.82rem;
  color: var(--gero-muted);
}

.gero-selected-file {
  margin-top: 12px;
  color: var(--gero-ok-tx);
  font-weight: 500;
}

.gero-info-box {
  background: #f0f7ff;
  border: 1px solid #bde0ff;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  gap: 10px;
  font-size: 0.875rem;
}

/* ── Processing Animation ──────────────────────────────────────────────── */
.gero-processing-animation {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

.gero-processing-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--gero-cyan);
  border-right-color: rgba(0,180,216,.3);
  animation: geroSpin 1.2s linear infinite;
}

.gero-processing-icon {
  position: absolute;
  inset: 12px;
  background: linear-gradient(135deg, var(--gero-navy), var(--gero-navy-3));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gero-cyan);
  font-size: 1.8rem;
}

@keyframes geroSpin {
  to { transform: rotate(360deg); }
}

/* Status Steps */
.gero-status-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  max-width: 320px;
  margin: 0 auto;
}

.gero-status-step {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gero-muted);
}

.gero-status-step.active { color: var(--gero-cyan); font-weight: 600; }
.gero-status-step.done { color: var(--gero-ok-tx); }

.gero-status-step-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
  background: #f0f2f5;
}

.gero-status-step.active .gero-status-step-icon {
  background: rgba(0,180,216,.15);
  color: var(--gero-cyan);
}

.gero-status-step.done .gero-status-step-icon {
  background: rgba(22,163,74,.12);
  color: var(--gero-ok-tx);
}

/* ── PDF Viewer ────────────────────────────────────────────────────────── */
.gero-pdf-viewer {
  background: #525659;
  padding: 20px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.gero-pdf-page {
  margin-bottom: 16px;
}

.gero-pdf-page-label {
  color: rgba(255,255,255,.5);
  font-size: 0.75rem;
  margin-bottom: 6px;
  text-align: center;
}

.gero-pdf-page-img {
  width: 100%;
  display: block;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

/* Platzhalter, solange das Bild noch nicht geladen ist (data-src, kein src):
   reserviert die echte Seitenhöhe → kein Layout-Sprung beim Vorladen und der
   IntersectionObserver kann den Vorlauf zuverlässig berechnen. --page-ar wird
   je Seite inline aus den realen PDF-Maßen gesetzt (Hoch-/Querformat); Fallback
   A4. Nach dem Laden greift die :not([src])-Regel nicht mehr → natürliche
   Bildproportion, keine Verzerrung. */
.gero-pdf-page-img:not([src]) {
  aspect-ratio: var(--page-ar, 1 / 1.414);
  background: #fff;
}

/* Zentriert Bild + Overlay zusammen */
.gero-redact-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

/* ── Review Page ───────────────────────────────────────────────────────── */
.gero-quality-card {
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.875rem;
}

.gero-quality-card i { font-size: 1.4rem; flex-shrink: 0; }
.gero-quality-card strong { display: block; font-size: 1.4rem; font-weight: 700; }
.gero-quality-card span { font-size: 0.78rem; color: inherit; opacity: 0.8; }

/* Aufklappbare Kachel (Konfidenz „Mittel"): muss als anklickbar ERKENNBAR sein,
   sonst bleibt die Chip-Liste unentdeckt und die Kachel so nutzlos wie vorher. */
.gero-quality-card-clickable { cursor: pointer; transition: filter 0.15s ease, box-shadow 0.15s ease; }
/* 3 % Helligkeit sind auf manchen Monitoren nicht wahrnehmbar (UX-Review
   2026-08-13) — der Schatten macht das Anfassbare unabhängig vom Bildschirm
   sichtbar. */
.gero-quality-card-clickable:hover { filter: brightness(0.96); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }
.gero-quality-card-clickable:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.gero-quality-caret { font-size: 0.9rem !important; opacity: 0.7; }

.gero-quality-high { background: var(--gero-ok-bg); color: var(--gero-ok-tx); border: 1px solid var(--gero-ok-bd); }
.gero-quality-medium { background: rgba(245,158,11,.12); color: var(--gero-warn-tx); border: 1px solid rgba(245,158,11,.3); }
.gero-quality-low { background: rgba(220,53,69,.1); color: #842029; border: 1px solid rgba(220,53,69,.2); }

.gero-quality-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  color: white;
}

/* Item Sections */
.gero-item-section { background: white; }

.gero-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #fafbfc;
  border-bottom: 1px solid #f0f2f5;
  user-select: none;
}

.gero-item-header:hover { background: #f5f8ff; }

.gero-phone-badge {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--gero-cyan), var(--gero-cyan-dark));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
  flex-shrink: 0;
}

.gero-item-body { padding: 16px 20px 20px; }

.gero-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gero-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gero-border);
  margin-bottom: 4px;
}

.gero-section-label-manual {
  color: var(--gero-warn-tx);
  border-bottom-color: rgba(245,158,11,.3);
}

.gero-field-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gero-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.gero-confidence-score {
  font-size: 0.7rem;
  font-weight: 700;
}

.gero-review-input { font-size: 0.875rem; }

.gero-manual-input {
  background: #fffdf0;
  border-color: rgba(245,158,11,.5);
}

.gero-manual-input:focus {
  border-color: #ffc107;
  box-shadow: 0 0 0 0.2rem rgba(245,158,11,.2);
}

.gero-confidence-pill {
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
}

.gero-collapse-icon { transition: transform 0.2s; font-size: 0.75rem; color: var(--gero-muted); }
.gero-collapse-icon.rotated { transform: rotate(180deg); }

/* Sidebar „Beta"-Untermenü (CRM-Module, nur is_dev) */
.gero-nav-toggle .gero-collapse-icon { color: rgba(255,255,255,.55); }
.gero-nav-toggle[aria-expanded="true"] .gero-collapse-icon { transform: rotate(180deg); }
.gero-nav-sub {
  list-style: none;
  margin: 2px 0 4px 18px;
  padding: 0 0 0 16px;
  border-left: 1px solid rgba(255,255,255,.08);
}
.gero-nav-sub .gero-nav-link { font-size: 0.825rem; padding: 8px 12px; }
.gero-nav-sub .gero-nav-link i { font-size: 1rem; }

/* Klickbare Status-Kacheln (FNZ-Pipeline & ähnliche) */
.gero-pipeline-tile { transition: border-color .15s, transform .15s; }
.gero-pipeline-tile:hover { border-color: var(--gero-cyan) !important; transform: translateY(-2px); }

/* ── Review Table (Rufnummern-Listenansicht) ───────────────────────────── */
.gero-review-table-wrapper {
  overflow-x: auto;
  max-height: 70vh;
  overflow-y: auto;
  /* Scrollbalken PERSISTENT anzeigen (Befund 2026-06-23): macOS/Overlay-
     Scrollbars blenden den horizontalen Balken aus, bis man scrollt — bei der
     breiten Review-Tabelle merkt die Mitarbeiterin dann nicht, dass sie nach
     rechts scrollen kann. Explizites Styling erzwingt in Chrome/Safari einen
     dauerhaft sichtbaren (Nicht-Overlay-)Scrollbalken; Firefox via
     scrollbar-* analog. */
  scrollbar-width: auto;                       /* Firefox: nicht „thin"/„none" */
  scrollbar-color: #9aa4b2 #eef1f4;            /* Firefox: Thumb / Track */
}
.gero-review-table-wrapper::-webkit-scrollbar {
  height: 14px;                                /* horizontaler Balken gut greifbar */
  width: 12px;
}
.gero-review-table-wrapper::-webkit-scrollbar-track {
  background: #eef1f4;
}
.gero-review-table-wrapper::-webkit-scrollbar-thumb {
  background: #9aa4b2;
  border-radius: 7px;
  border: 3px solid #eef1f4;                   /* etwas Abstand zum Track */
}
.gero-review-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #7b8696;
}

/* Schwebender horizontaler Scrollbalken (Befund 2026-06-24): hängt mit
   `position:fixed` knapp über dem Footer und ist damit immun gegen das
   `overflow:hidden` der umgebenden `.gero-card` (das `position:sticky` killt).
   JS (gero-floating-scrollbar.js) koppelt ihn mit der gerade sichtbaren breiten
   Tabelle, setzt `left`/`width`/`bottom` und blendet ihn aus, sobald deren
   nativer Balken ohnehin sichtbar ist. */
.gero-floating-hscroll {
  position: fixed;
  bottom: 0;                     /* JS überschreibt um die Footer-Höhe */
  height: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--gero-surface);
  border-top: 1px solid var(--gero-border);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);
  z-index: 1030;                 /* über Inhalt, unter Modals (Bootstrap 1050+) */
  display: none;                 /* JS schaltet via .gero-floating-hscroll-on */
  scrollbar-width: auto;         /* Firefox: keinen dünnen Overlay-Balken */
  scrollbar-color: #9aa4b2 #eef1f4;
}
.gero-floating-hscroll.gero-floating-hscroll-on { display: block; }
.gero-floating-hscroll > div { height: 1px; }
.gero-floating-hscroll::-webkit-scrollbar { height: 16px; }
.gero-floating-hscroll::-webkit-scrollbar-track { background: #eef1f4; }
.gero-floating-hscroll::-webkit-scrollbar-thumb {
  background: #9aa4b2;
  border-radius: 7px;
  border: 3px solid #eef1f4;
}
.gero-floating-hscroll::-webkit-scrollbar-thumb:hover { background: #7b8696; }

.gero-review-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8rem;
}

.gero-review-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Verbindungs-Detailspalten (read-only Aufschlüsselung der Σ Verbindungen):
   dezent abgesetzt, damit klar ist dass sie nur zur Prüfung dienen und nicht
   editierbar sind (GF-Wunsch 2026-06-22). */
.gero-review-table .gero-conn-detail-th {
  background: #eef2f6;
  font-style: italic;
}
.gero-review-table .gero-conn-detail-td {
  background: #fafbfc;
  color: var(--gero-muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
/* Deutlicher Trenner zwischen der editierbaren Σ-Spalte „Verbindungen" und dem
   read-only Detail-Block — damit die Bearbeiterin die Grenze sofort sieht. */
.gero-review-table .gero-conn-detail-first {
  border-left: 2px solid var(--gero-border);
}

/* Anzeige-Only-Detailspalte (z.B. „Vodafone Mobiles Bezahlen"): sieht aus wie die
   Nachbarspalten, zählt aber ausdrücklich NICHT in die Σ Verbindungen. Genau der
   Unterschied, auf den es beim Summen-Abgleich ankommt — er darf deshalb nicht
   nur im Hover-Tooltip stehen (UX-Review 2026-07-21). Gestrichelter Rahmen +
   Info-Icon im Kopf = dauerhaft sichtbar, auch auf Tablet ohne Hover. */
.gero-review-table .gero-conn-detail-displayonly {
  border-left: 2px dashed var(--gero-border);
  border-right: 2px dashed var(--gero-border);
}
.gero-review-table th.gero-conn-detail-displayonly {
  background: #f6f1e7;  /* warmer Ton, hebt sich vom kühlen Detail-Block ab */
}
.gero-review-table .gero-conn-detail-displayonly .gero-nosum-mark {
  font-style: normal;
  opacity: 0.75;
  margin-left: 0.15rem;
}

/* ── Verbindungs-Editor (Weg B): aufklappbares Panel pro Anschluss ─────────── */
.gero-conn-edit-toggle {
  color: var(--gero-cyan);
  line-height: 1;
  border: 0;
  text-decoration: none;
  /* Dezenter Chip-Hintergrund → als klickbares Bedienelement erkennbar, nicht als
     dekoratives Icon (bessere Auffindbarkeit, UX-Review 2026-07-10). */
  background: rgba(0, 175, 235, .1);
  border-radius: 4px;
  padding: 2px 5px !important;
}
.gero-conn-edit-toggle:hover { color: var(--gero-cyan-dark); background: rgba(0, 175, 235, .2); text-decoration: none; }
.gero-conn-edit-toggle.is-open { color: #fff; background: var(--gero-cyan); }

.gero-conn-edit-row > td { border-bottom: 2px solid var(--gero-cyan); }
/* Das Panel sitzt in einer td[colspan] innerhalb der horizontal scrollenden
   Tabelle. Ohne Fixierung wäre es so breit wie die (sehr breite) Tabelle und Kopf
   + Σ-Strip lägen links außerhalb des Sichtfelds. `position: sticky; left:0` hält
   es am linken Rand des Scroll-Viewports; die Breite = sichtbare Wrapper-Breite
   setzt das JS beim Öffnen (gero-conn-edit). So bleibt der ganze Editor ohne
   Horizontal-Scroll im Blick, egal wie weit die Tabelle gescrollt ist. */
.gero-conn-edit-panel {
  position: sticky;
  left: 0;
  box-sizing: border-box;
  background: #f4f8fb;
  border-left: 3px solid var(--gero-cyan);
  padding: 14px 18px;
}
.gero-conn-edit-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 12px;
}
.gero-conn-edit-title { color: var(--gero-text); font-size: 0.9rem; }
.gero-conn-edit-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gero-conn-edit-close { margin-left: auto; }
.gero-conn-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}
.gero-conn-badge-breakout { background: var(--gero-breakout-bg); color: var(--gero-breakout); }
.gero-conn-badge-parallel { background: var(--gero-parallel-bg); color: var(--gero-parallel); }

.gero-conn-edit-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px 22px;
}
.gero-conn-edit-group-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--gero-muted);
  border-bottom: 1px solid var(--gero-border);
  padding-bottom: 3px;
  margin-bottom: 8px;
}
.gero-conn-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 8px 10px;
}
.gero-conn-edit-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding-left: 6px;
  border-left: 3px solid transparent;
}
.gero-conn-edit-cell.is-breakout { border-left-color: var(--gero-breakout-line); }
.gero-conn-edit-cell.is-parallel { border-left-color: var(--gero-parallel-line); }
.gero-conn-edit-lbl {
  font-size: 0.68rem;
  line-height: 1.15;
  color: var(--gero-muted);
  min-height: 1.9em;
}
/* Symbol-Marker je Feld (Σ/+) — Text-Alternative zur Randfarbe (farbenblind-sicher). */
.gero-conn-mark {
  display: inline-block;
  width: 1.1em;
  text-align: center;
  font-weight: 700;
  border-radius: 3px;
  margin-right: 2px;
}
.gero-conn-mark-breakout { background: var(--gero-breakout-bg); color: var(--gero-breakout); }
.gero-conn-mark-parallel { background: var(--gero-parallel-bg); color: var(--gero-parallel); }
.gero-conn-edit-input {
  font-variant-numeric: tabular-nums;
  text-align: right;
  /* Im Panel MÜSSEN die Felder sichtbar als Eingabe erkennbar sein — anders als
     die randlosen Tabellen-Inputs (die wie Text aussehen bis Fokus). Sonst wären
     leere Ziel-Felder unsichtbar und man wüsste nicht, wohin umbuchen. */
  background: #fff;
  border: 1px solid var(--gero-border);
}
.gero-conn-edit-input::placeholder { color: #c2c9d0; }

.gero-conn-edit-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--gero-border);
  font-size: 0.8rem;
  color: var(--gero-body);
}
.gero-conn-edit-summary strong { font-variant-numeric: tabular-nums; color: var(--gero-text); }
.gero-conn-sum-total strong { color: var(--gero-navy-3); }
.gero-conn-sum-warn { color: #b3261e; font-weight: 600; }

.gero-review-table thead th {
  background: #f0f4f8;
  border-bottom: 2px solid var(--gero-border);
  border-right: 1px solid var(--gero-border);
  color: var(--gero-muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 7px 10px;
  white-space: nowrap;
}

/* ── Sticky-Header für .gero-table in .table-responsive ────────────────────
   Wiederverwendbarer Modifier: das .table-responsive bekommt eine eigene
   Scroll-Höhe (sonst greift `position:sticky` nicht, weil .table-responsive
   selbst der Scroll-Kontext ist und ohne max-height nicht vertikal scrollt).
   Die thead-th tragen bereits einen opaken Hintergrund (var(--gero-navy)) —
   so scheinen beim Scrollen keine Zeilen durch. */
.table-responsive.gero-sticky-head {
  max-height: 70vh;
  overflow-y: auto;
}

.table-responsive.gero-sticky-head .gero-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
}

.gero-table-section-header th {
  background: #e8ecf2;
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--gero-text);
  padding: 5px 10px;
  border-bottom: 1px solid var(--gero-border);
}

/* Kennzahlen-Kopf des Rechnungen-Reiters: die Summe ist die wichtigste Zahl
   der Seite und stand bisher als Fließtext gleichgewichtig neben allem
   anderen. Rechts daneben die Filterleiste (ersetzt den „in Prüfung"-Chip,
   der nur alarmierte und nirgendwohin führte). */
.gero-ist-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1.4rem;
}
/* Navy wie jede andere Kennzahl der Seite (Kacheln, Mappen-Σ) — das Amber der
   alten Fließtext-Zeile war klein erträglich, als große Zahl stach es als
   einziger Warnton ohne Warnung heraus (GF 2026-07-30). Amber bleibt dem
   Prüfungs-Signal vorbehalten. */
.gero-ist-head__num {
  font-family: Montserrat, sans-serif; font-weight: 800; font-size: 1.55rem;
  line-height: 1.1; color: var(--gero-navy);
}
.gero-ist-head__per { font-size: .95rem; font-weight: 600; color: var(--gero-muted); }
.gero-ist-head__label { font-size: .74rem; color: var(--gero-muted); }
.gero-ist-head__meta { font-size: .74rem; color: var(--gero-muted); padding-bottom: .15rem; }
.gero-ist-filter { display: inline-flex; gap: .3rem; align-items: center; padding-bottom: .1rem; }
.gero-ist-filter__btn {
  border: 1px solid var(--gero-border); border-radius: 999px;
  background: var(--gero-surface); color: var(--gero-muted);
  font-size: .74rem; font-weight: 600; padding: .28rem .7rem; line-height: 1;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.gero-ist-filter__btn:hover {
  color: var(--gero-navy-3); border-color: rgba(0,175,235,.5);
  background: rgba(0,175,235,.08);
}
.gero-ist-filter__btn--active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--gero-navy-3), var(--gero-cyan));
}
/* Die Prüfungs-Variante behält ihren Warnton — als Knopf UND gedrückt. */
.gero-ist-filter__btn--warn { color: #b45309; border-color: rgba(245,158,11,.45); }
.gero-ist-filter__btn--warn.gero-ist-filter__btn--active {
  background: #b45309; color: #fff;
}
.gero-ist-filter__count {
  display: inline-block; margin-left: .25rem; padding: .08rem .4rem;
  border-radius: 999px; font-size: .68rem; font-weight: 700;
  background: rgba(245,158,11,.18);
}
.gero-ist-filter__btn--active .gero-ist-filter__count {
  background: rgba(255,255,255,.25);
}
.gero-ist-filter__btn:focus-visible { outline: 2px solid var(--gero-cyan); outline-offset: 2px; }

/* Gruppenkopf einer Analyse-Einheit (Sammelmappe) in der Kundenakte — trägt die
   Aktionen, die der ganzen Mappe gehören (Angebot/Auftrag/Projekt). Hebt sich
   vom Zebra der Rechnungszeilen ab, ohne wie eine Tabellen-Überschrift zu wirken. */
.gero-table tbody tr.gero-unit-head,
.gero-table tbody tr.gero-unit-head:nth-child(even) {
  background: #eef2f7;
}
.gero-table tbody tr.gero-unit-head:hover { background: #e6ecf4; }
.gero-table tbody tr.gero-unit-head td {
  border-top: 1px solid var(--gero-border);
  padding-top: 7px;
  padding-bottom: 7px;
}
/* Die Kopfzeile führt die Spalten an, die ihre Rechnungen darunter füllen —
   deshalb trägt sie deren Zahlen auch optisch stärker als eine Einzelzeile. */
/* Name und Status-Pillen bleiben in EINER Zeile: bricht der Name um, springen
   sonst die Pillen darunter und jede Mappe bekommt eine andere Zeilenhöhe —
   bei sechs Mappen war genau das die Unruhe. Der Name kürzt stattdessen. */
.gero-unit-title { display: flex; align-items: center; min-width: 0; }
.gero-unit-name {
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: .93rem;
  color: var(--gero-navy);
  /* `min-width:0` ist Pflicht, sonst verweigert der Flex-Eintrag das Schrumpfen
     unter seine Textbreite und schiebt stattdessen die Aktionsspalte aus dem
     Bild — die Ellipse greift dann nie. */
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gero-unit-name:hover { color: var(--gero-navy-3); }
/* Meta-Zeile: Status zuerst (sie darf nie abgeschnitten werden), dann der
   erklärende Text — der kürzt, wenn die Spalte eng wird. Eine Zeile, sonst
   bekommt jede Mappe wieder eine andere Höhe. */
.gero-unit-sub {
  display: flex; align-items: center; gap: .35rem;
  margin-left: 2.05rem;                          /* fluchtet unter den Namen */
  font-size: .72rem; color: var(--gero-muted);
  /* Zwei Pillen (Status + „N in Prüfung") plus Zähler sprengen sonst die
     Spalte und laufen in „Anbieter" hinein. */
  overflow: hidden;
}
.gero-unit-meta {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Status und Anbieter im Gruppenkopf: dieselbe Aussage wie die Pille bzw. das
   Anbieter-Chip der Rechnungszeilen, aber ohne deren Rahmen — sonst steht in
   der Spalte eine Säule aus identischen Badges. Die Farbe trägt das Signal. */
.gero-unit-state { font-weight: 700; white-space: nowrap; }
.gero-unit-state--ok    { color: var(--gero-ok-tx, #15803d); }
.gero-unit-state--warn  { color: #b45309; }
.gero-unit-state--muted { color: #64748b; }
/* Feste Spaltenbreiten. Bei `table-layout:auto` bestimmt der LÄNGSTE Mappenname
   die Breite der ersten Spalte — mit `white-space:nowrap` ist deren Mindest-
   breite die volle Textbreite, und `min-width:0` ändert daran nichts (es hebt
   nur die automatische Mindestgröße des Flex-Eintrags auf, nicht seinen
   Mindestbreiten-Beitrag zur Tabelle). Die Aktionsspalte rutschte dadurch aus
   dem Bild. Fest verteilt bleiben die Spalten stabil, egal wie eine Mappe
   heißt; `min-width` schickt schmale Fenster in den Seitwärts-Scroll, statt
   alles zusammenzuquetschen. */
.gero-table--grouped { table-layout: fixed; min-width: 62rem; }
.gero-table--grouped > thead > tr > th:nth-child(1) { width: 24%; }
.gero-table--grouped > thead > tr > th:nth-child(2) { width: 14%; }
.gero-table--grouped > thead > tr > th:nth-child(3) { width: 8%; }
.gero-table--grouped > thead > tr > th:nth-child(4) { width: 8%; }
.gero-table--grouped > thead > tr > th:nth-child(5) { width: 11%; }
.gero-table--grouped > thead > tr > th:nth-child(6) { width: 12%; }
.gero-table--grouped > thead > tr > th:nth-child(7) { width: 11%; }
.gero-table--grouped > thead > tr > th:nth-child(8) { width: 12%; }
/* RV, Anzahl, Betrag und Datum brechen nicht um: ein zweizeiliger Betrag macht
   die Zeile höher als ihre Nachbarn — und gekürzt werden dürfen sie NICHT
   (eine abgeschnittene Zahl liest sich als andere Zahl). Sie bekommen deshalb
   ihre Breite zugeteilt, nicht eine Ellipse. */
.gero-table--grouped td:nth-child(3),
.gero-table--grouped td:nth-child(4),
.gero-table--grouped td:nth-child(5),
.gero-table--grouped td:nth-child(7) { white-space: nowrap; }
/* Abgekürzte Spaltenköpfe als `abbr` statt nur `title` — so hängt die Erklärung
   am Wort und nicht allein am Mauszeiger. */
.gero-table th abbr { text-decoration: none; cursor: help; }
/* Der Dateiname einer Rechnung ist lang und hat kaum Wortgrenzen — ohne
   Kürzung sprengt er die feste Spalte in drei Zeilen. Vollständig im Titel. */
.gero-doc-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Eine Pille oder ein Anbieter-Chip bricht nie um — „Februar 2026" zweizeilig
   macht die ganze Zeile höher als ihre Nachbarn. Bewusst NUR in dieser Tabelle:
   `.gero-table` trägt rund 66 Templates, und deren Umbruchverhalten hat der
   Befund nicht betroffen. */
.gero-table--grouped .gero-pill,
.gero-table--grouped .gero-provider-badge { white-space: nowrap; }
.gero-unit-sum { font-weight: 700; color: var(--gero-navy); }
/* Der aktuelle Stand ist der Grund, warum jemand die Akte öffnet: eine Kante
   in Cyan macht ihn in einer Liste aus sechs Mappen auf einen Blick findbar.
   `box-shadow` statt `border-left`, weil ein Rahmen an der ersten Zelle die
   Spalten der Kopfzeile gegen die Zeilen darunter verschöbe. */
.gero-table tbody tr.gero-unit-head--current td:first-child {
  box-shadow: inset 3px 0 0 var(--gero-cyan);
}
/* Rechnungen einer Mappe hängen sichtbar an ihrem Kopf: eingerückt, mit einer
   durchgehenden Führungslinie statt eines ↳ je Zeile (das brach bei sechs
   Mappen in ebenso viele lose Pfeile auseinander). */
.gero-table tbody tr.gero-unit-child td:first-child {
  padding-left: 2.1rem;
  background-image: linear-gradient(var(--gero-border), var(--gero-border));
  background-size: 1px 100%;
  background-position: 1.1rem 0;
  background-repeat: no-repeat;
}
/* Gruppierte Tabelle: jede Mappe ist ein eigenes `tbody` — nur so klappt
   Bootstrap-collapse innerhalb einer Tabelle. Damit zählen aber ZWEI Regeln der
   Basis-Tabelle nicht mehr über die ganze Tabelle, sondern pro Gruppe: das
   Zebra (`nth-child(even)`) beginnt in jeder Gruppe neu, und „letzte Zeile ohne
   Rahmen" trifft jede Gruppen-Schlusszeile, sodass die Gruppen ineinanderlaufen.
   In der gruppierten Ansicht trägt die Struktur ohnehin der Gruppenkopf: Zebra
   aus, dafür bekommt jede Zeile ihre Trennlinie. */
.gero-table--grouped tbody tr:nth-child(even) { background: transparent; }
.gero-table--grouped tbody tr:last-child td { border-bottom: 1px solid var(--gero-border); }
/* Bootstrap klappt per Höhen-Animation auf. Eine Zeilengruppe ist in der Höhe
   aber nicht sauber animierbar: das Aufklappen springt sofort, das Zuklappen
   läuft die vollen 0,35 s ab — es fühlt sich an, als hakte das Zuklappen. Ohne
   Übergang schalten beide Richtungen sofort (Bootstrap wartet nur so lange, wie
   die CSS-Übergangsdauer angibt). */
.gero-table--grouped tbody.collapsing { transition: none; }

/* Auf-/Zuklappen einer Sammelmappe: reiner Pfeil, kein Knopf-Chrome. */
.gero-unit-toggle {
  background: none;
  border: 0;
  padding: 0 .35rem 0 0;
  color: var(--gero-text-muted, #64748b);
  line-height: 1;
}
.gero-unit-toggle:hover { color: var(--gero-navy); }
.gero-unit-toggle .bi { transition: transform .15s ease; display: inline-block; }
.gero-unit-toggle[aria-expanded="true"] .bi { transform: rotate(90deg); }

/* KD-Kürzel der Kundenliste (AC/EX/ND) — kurz, farbcodiert, wie im Vorsystem. */
.gero-kd { font-weight: 700; font-size: .74rem; letter-spacing: .03em; }
.gero-kd--ac { color: #1d4ed8; }
.gero-kd--ex { color: #be185d; }
.gero-kd--nd { color: #64748b; }

.gero-table-section-manual {
  background: #fef9e7 !important;
  color: var(--gero-warn-tx) !important;
}

.gero-col-manual {
  background: #fef9e7;
  color: var(--gero-warn-tx);
}

/* Row Ampel-Hintergründe */
.gero-row-high  { background: #f0fdf4; }  /* green-50 — selbe Grün-Skala wie die Pillen/Badges */
.gero-row-medium { background: rgba(245,158,11,.06); }
.gero-row-low   { background: rgba(220,53,69,.06); }

/* Hover-Akzent — aber nicht auf der bereits markierten Zeile (sonst dunkelt der
   Filter den Auswahl-Hintergrund unnötig ab). */
.gero-review-table tbody tr:hover:not(.gero-row-active) { filter: brightness(0.97); }

/* Excel-artige Zeilen-Markierung: Klick auf eine Zeile hebt die GANZE Zeile
   hervor, damit man beim Horizontal-Scrollen zu den Verbindungs-Detailspalten
   rechts nicht in die Nachbarzeile verrutscht (GF-Wunsch 2026-06-22). Hintergrund
   liegt auf den <td> (nicht <tr>), damit er sowohl die Ampel-Hintergründe
   (.gero-row-high/medium/low, auf <tr>) als auch die read-only Detail-Spalten-
   Hintergründe (.gero-conn-detail-td) übermalt. Akzent = GERO-Cyan (konsistent
   mit Fokus-Ring/Drag-Target), linker Balken markiert den Zeilenanfang. */
.gero-review-table tbody tr.gero-review-row { cursor: pointer; }
.gero-review-table tbody tr.gero-review-row > td { transition: background 0.1s ease; }
.gero-review-table tbody tr.gero-row-active > td {
  background: rgba(0, 175, 235, .14);
}
.gero-review-table tbody tr.gero-row-active > td:first-child {
  box-shadow: inset 3px 0 0 0 var(--gero-cyan);
}

/* Kurzes Aufblitzen der Zielzeile beim Sprung aus einem Hinweis-Banner /
   Vorschlags-Karte (Klick auf einen Rufnummer-Chip → #item-<id>). Macht die
   angesprungene Zeile sofort sichtbar, statt sie suchen zu müssen. Danach bleibt
   die dezentere .gero-row-active-Markierung stehen (GF-Wunsch 2026-07-03). */
@keyframes geroRowFlash {
  0%   { background: rgba(0, 175, 235, .45); }
  100% { background: rgba(0, 175, 235, .14); }
}
.gero-review-table tbody tr.gero-row-flash > td { animation: geroRowFlash 1.1s ease-out; }
/* Bewegungsreduktion respektieren: kein Aufblitzen, die persistente
   .gero-row-active-Markierung bleibt trotzdem als Blickfang erhalten. */
@media (prefers-reduced-motion: reduce) {
  .gero-review-table tbody tr.gero-row-flash > td { animation: none; }
}

/* Spalten-Resize: aktiviert via JS-Klasse `gero-table-resizable` auf dem Wrapper.
   `table-layout: fixed` respektiert die <col>-Breiten, sonst rechnet der Browser
   automatisch und Resize hat keinen Effekt. Handle sitzt absolut am rechten Rand
   des <th>; das <th> bekommt `position: relative` vom JS.  */
.gero-table-resizable .gero-review-table { table-layout: fixed; }
.gero-col-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  user-select: none;
  background: transparent;
  z-index: 11;
}
.gero-col-resize-handle:hover { background: rgba(13,110,253,.35); }
body.gero-resizing-col { user-select: none; }

/* Zell-Konfidenz: Hintergrundfärbung — Grün dezent, Gelb/Rot deutlich sichtbar */
.gero-conf-success   { background: #f0fdf4; }  /* green-50 — einheitliche Grün-Skala */
.gero-conf-warning   { background: rgba(245,158,11,.22); }
.gero-conf-danger    { background: rgba(220,53,69,.15); }
.gero-conf-secondary { background: rgba(108,117,125,.06); }
/* Auto-ergänzt (z.B. Datenvolumen aus der Tarif-DB) — eigener Info-Stil statt
   rotem Konfidenz-Alarm; der Wert kam nicht aus der Rechnung, ist aber kein
   KI-Lesefehler. Begleitet vom blauen Magic-Icon (bitte kurz prüfen). */
.gero-conf-autofill  { background: rgba(13,202,240,.12); }

/* Sanity-Verletzung: semantisch unsinnige Werte (z.B. negativer Grundpreis).
   Roter Linker Rand markiert Cell, ohne den Konfidenz-Hintergrund zu überschreiben. */
.gero-sanity-cell {
  box-shadow: inset 3px 0 0 0 var(--bs-danger, #dc3545);
}

.gero-review-td {
  padding: 4px 8px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f2f5;
  border-right: 1px solid #f5f6f8;
  /* Spalten-Breite respektieren — lange Inhalte (z.B. Tarif-Strings mit 100+ Zeichen)
     dürfen die Zelle nicht aufblasen, sonst werden Nachbar-Spalten zusammengequetscht
     (Bug 2026-05-21). Der Input darin bekommt eigenes overflow:hidden + ellipsis.
     `max-width: 0` ist ein bekannter Browser-Trick: ohne ihn ignoriert der Browser
     `overflow` bei `<td>`, weil Tabellenzellen sich am Inhalt orientieren. */
  overflow: hidden;
  max-width: 0;
}

/* Inline-Inputs */
/* Read-only-Aggregat-Zelle (mms_cost/data_pass_cost): Wert sichtbar, editiert wird
   im Verbindungs-Editor. Dezenter Hintergrund wie die read-only-Aufschlüsselungs-
   spalten (.gero-conn-detail-td), damit klar „kein Eingabefeld" ist; Klick öffnet
   das Panel (data-conn-open) → cursor:pointer + Hover-Feedback. */
.gero-readonly-cell {
  display: inline-block;
  padding: 3px 6px;
  font-size: 0.8rem;
  color: var(--gero-muted);
  background: #fafbfc;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.gero-readonly-cell:hover { background: #eef1f4; }
/* Leere Read-only-Zelle (kein MMS/Datenpässe-Wert — 98,5 % der Zeilen): KEIN Kästchen
   zeigen, sonst leere weiße Pille in fast jeder Zeile (User-Befund 2026-07-10). Bearbeitet
   wird über den „aufschlüsseln"-Toggle der Verbindungen-Spalte. */
.gero-readonly-cell:empty { background: none; padding: 0; }
/* Datenpässe-Aufschlüsselung nach Ländergruppen: standardmäßig zu, dezenter Aufklapper. */
.gero-conn-aufschluesselung { margin: 6px 0 2px; }
.gero-conn-aufschluesselung > summary {
  cursor: pointer; font-size: 0.78rem; color: var(--gero-cyan-dark);
  padding: 2px 0; user-select: none; list-style: revert; width: fit-content;
}
.gero-conn-aufschluesselung > summary:hover { text-decoration: underline; }
/* is_text-Aggregat im Panel (mms_cost/data_pass_cost): kursives Label als dezenter
   Hinweis, dass es sich (anders als die Decimal-Parallel-Felder) NICHT im Live-Σ-
   Richtwert unten niederschlägt — der Marker-Tooltip erklärt es genauer. */
.gero-conn-edit-cell.is-text-agg .gero-conn-edit-lbl { font-style: italic; }

.gero-table-input {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 0.8rem;
  color: var(--gero-text);
  transition: border-color 0.15s, background 0.15s;
  /* Lange Strings (z.B. Tarif-Namen) elliptisieren statt Zelle aufzublasen.
     `text-overflow: ellipsis` braucht zwingend `overflow: hidden` UND `white-space: nowrap`
     — sonst greift weder das Abschneiden noch das …-Suffix. Hover/Fokus zeigt den vollen
     Wert via title-Tooltip (im Template gesetzt). */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.gero-table-input:hover { border-color: var(--gero-border); background: white; }
.gero-table-input:focus { border-color: var(--gero-cyan); background: white; outline: none; box-shadow: 0 0 0 2px rgba(0,180,216,.15); }

.gero-table-input-manual {
  background: rgba(245,158,11,.07);
  border-color: rgba(245,158,11,.35);
}

.gero-table-input-manual:focus {
  border-color: #ffc107;
  background: #fffdf0;
  box-shadow: 0 0 0 2px rgba(245,158,11,.2);
}

.gero-cell-icon {
  font-size: 0.7rem;
  flex-shrink: 0;
}

/* ── Export-Modal Theme-Karten ───────────────────────────────────────────── */
.gero-export-option {
  display: block;
  color: inherit;
}

.gero-export-card {
  position: relative;
  background: white;
  border: 1px solid var(--gero-border);
  border-radius: 12px;
  padding-left: 16px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  transition: all 0.18s ease;
  cursor: pointer;
  height: 100%;
}

.gero-export-card:hover {
  border-color: var(--theme, var(--gero-cyan));
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* Aktive/ausgewählte Karte im Form-Picker (z. B. Sammelmappen-Ziel-Anbieter). */
.gero-export-option.is-selected .gero-export-card {
  border-color: var(--theme, var(--gero-cyan));
  border-width: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme, var(--gero-cyan)) 18%, transparent);
}
.gero-export-option.is-selected .gero-export-card-accent {
  width: 8px;
}

.gero-export-card-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--theme, var(--gero-cyan));
}

.gero-export-card-body {
  flex: 1;
  padding: 14px 18px;
}

.gero-export-card-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gero-muted);
  margin-bottom: 2px;
}

.gero-export-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gero-text);
  line-height: 1.2;
  margin-bottom: 4px;
}

.gero-export-card-hint {
  font-size: 0.78rem;
  color: var(--gero-muted);
}

/* Form-Aktionsleiste am Ende einer Detailseite. */
.gero-form-footer {
  background: white;
  border: 1px solid var(--gero-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-top: 24px;
  box-shadow: var(--shadow-sm);
}

/* ── Result Page ───────────────────────────────────────────────────────── */
.gero-result-icon { font-size: 2.5rem; }

.gero-result-field { padding: 4px 0; }
.gero-result-field-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--gero-muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.gero-result-field-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gero-text);
}

.gero-mini-stat { text-align: center; }
.gero-mini-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--gero-text); }
.gero-mini-stat-label { font-size: 0.72rem; color: var(--gero-muted); }

/* ── Manuelle Schwärzung / Zeichenmodus ────────────────────────────────── */

/* Wrapper um jedes Seitenbild */
.gero-redact-wrapper {
  position: relative;
  display: block;
  line-height: 0;
}

/* Transparentes Overlay über dem Bild */
.gero-redact-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;  /* Standardmäßig kein Maus-Abfangen */
  user-select: none;
}

/* Im Zeichenmodus: Overlay nimmt Maus-Events entgegen */
.gero-draw-active .gero-redact-overlay {
  pointer-events: all;
  cursor: crosshair;
}

/* Kurzer Hinweis mittig auf der Seite, wenn im Zeichenmodus auf eine noch nicht
   geladene (oder fehlgeschlagene) Seite geklickt wird — liegt im Sichtfeld des
   Klicks, anders als das Seitenlabel darüber (kann weggescrollt sein). */
.gero-loading-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.8rem;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}

/* Rubber-Band-Rechteck beim Zeichnen */
.gero-rubber-band {
  position: absolute;
  border: 2px dashed #ef4444;
  background: rgba(239, 68, 68, 0.15);
  pointer-events: none;
}

/* Fertige Schwärzungs-Rechtecke */
.gero-redact-box {
  position: absolute;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(239, 68, 68, 0.8);
  pointer-events: none;
}

/* Löschen-Button auf jedem Rechteck */
.gero-redact-del {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ef4444;
  color: white;
  border: none;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: all;
  padding: 0;
}

.gero-redact-del:hover { background: #dc2626; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .gero-login-brand { display: none; }
  .gero-login-form-side { width: 100%; min-width: unset; }

  .gero-sidebar { position: fixed; left: -260px; transition: left 0.3s; }
  .gero-sidebar.open { left: 0; }
  .gero-main { margin-left: 0; }
}

/* ── Anomalie-Cards (Review-Seite) ─────────────────────────────────────── */
.gero-anomalies {
  background: var(--gero-surface);
  border: 1px solid var(--gero-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.gero-anomalies-header {
  background: linear-gradient(90deg, rgba(0,175,235,.10), rgba(0,175,235,.04));
  padding: 12px 18px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--gero-navy);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--gero-border);
}

.gero-anomalies-header i {
  color: var(--gero-cyan);
  font-size: 1.05rem;
}

.gero-anomalies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--gero-border);
}

.gero-anomaly {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  background: var(--gero-surface);
  align-items: flex-start;
}

.gero-anomaly-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.gero-anomaly-body { flex: 1; min-width: 0; }

.gero-anomaly-title {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--gero-text);
  line-height: 1.35;
  margin-bottom: 2px;
}

.gero-anomaly-detail {
  font-size: 0.78rem;
  color: var(--gero-muted);
  word-break: break-word;
}

.gero-anomaly-danger  .gero-anomaly-icon { background: rgba(217,83,79,.12); color: #D9534F; }
.gero-anomaly-warning .gero-anomaly-icon { background: rgba(245,158,11,.15);  color: #b88600; }
.gero-anomaly-info    .gero-anomaly-icon { background: rgba(0,175,235,.12); color: var(--gero-cyan); }

/* ── Bindefristen-Timeline (Dashboard) ─────────────────────────────────── */
.gero-bindefristen-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--gero-border);
}

@media (max-width: 1100px) {
  .gero-bindefristen-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .gero-bindefristen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gero-bindefrist-month {
  background: var(--gero-surface);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  min-height: 180px;
}

.gero-bindefrist-current {
  background: linear-gradient(180deg, rgba(0,175,235,.06), var(--gero-surface) 60%);
}

.gero-bindefrist-empty .gero-bindefrist-count { color: var(--gero-border); }
.gero-bindefrist-empty .gero-bindefrist-count-label { color: var(--gero-muted); opacity: 0.5; }

.gero-bindefrist-month-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.gero-bindefrist-month-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--gero-navy);
  letter-spacing: -0.01em;
}

.gero-bindefrist-month-year {
  font-size: 0.7rem;
  color: var(--gero-muted);
}

.gero-bindefrist-count {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--gero-cyan);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
}

.gero-bindefrist-count-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--gero-muted);
}

.gero-bindefrist-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.75rem;
  color: var(--gero-text);
  flex: 1;
}

.gero-bindefrist-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  border-top: 1px dashed rgba(0,30,65,.06);
}

.gero-bindefrist-list li:first-child { border-top: none; }

.gero-bindefrist-phone {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 0.72rem;
  color: var(--gero-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gero-bindefrist-date {
  font-size: 0.7rem;
  color: var(--gero-muted);
  flex-shrink: 0;
}

.gero-bindefrist-more {
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--gero-cyan);
  font-style: italic;
}

/* Nummer + Lösch-Button immer vertikal gestapelt + zentriert — sonst stehen sie
   im schmalen #-Feld mal nebeneinander, mal umgebrochen (inkonsistent). */
.gero-rownum-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
/* Lösch-Button pro Review-Zeile: nur im „Bearbeiten"-Modus sichtbar (Toggle
   unter der Tabelle setzt .gero-manage-mode auf den Wrapper). Im Normalzustand
   komplett ausgeblendet → ruhige Tabelle, kein Hover-Flackern. Dezent grau,
   rot erst beim direkten Icon-Hover. */
.gero-del-item {
  display: none;
  color: var(--gero-muted);
  min-width: 28px;
  min-height: 28px;
  line-height: 1;
  transition: color .12s ease;
}
.gero-review-table-wrapper.gero-manage-mode .gero-del-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gero-del-item:hover,
.gero-del-item:focus {
  color: #dc3545;
}

/* Ziehbare Angebots-Spaltenköpfe (Drag-and-Drop-Sortierung in der Tabelle) */
.gero-custom-th {
  cursor: grab;
  user-select: none;
}
.gero-custom-th:active {
  cursor: grabbing;
}

/* Sortierbare Tabellen (gero-sortable): Hover-Hinweis auf den Spaltenköpfen,
   damit die Klick-Sortierung erkennbar ist (Pfeil erscheint erst nach Klick).
   Den Cyan-Ton als background-IMAGE-Overlay legen (statt background-color zu
   ersetzen) — so bleibt der deckende Basis-Hintergrund der th erhalten. Sonst
   scheinen bei Sticky-Headern (.gero-review-table thead, .gero-rec-table erste
   Spalte) die durchscrollenden Zeileninhalte durch die schwebenden Köpfe. */
table.gero-sortable thead th:hover {
  background-image: linear-gradient(rgba(0,175,235,0.08), rgba(0,175,235,0.08));
}
table.gero-sortable thead th .gero-sort-arrow { font-size: 0.75em; }

/* =========================================================================
   CRM-Cockpit — Premium-Relaunch (Design-Showcase Kunden-Akte, 2026-06-26)
   Wiederverwendbare Komponenten für alle CRM-Module: Hero-Band, KPI-Kacheln,
   Status-Pills, Segment-Balken, gestaffeltes Einblenden. Marken-Tokens (Navy/
   Cyan) bleiben Leitfarben; Grün ist der Ersparnis-Payoff.
   ========================================================================= */

/* Hero-Band — dunkler Marken-Gradient mit Punkt-Textur + Tiefe */
.gero-hero {
  position: relative;
  border-radius: 20px;
  padding: 1.85rem 2rem;
  color: #fff;
  background:
    radial-gradient(1100px 320px at 108% -40%, rgba(0,175,235,0.42), transparent 60%),
    linear-gradient(135deg, var(--gero-navy) 0%, var(--gero-navy-3) 100%);
  box-shadow: 0 22px 48px -24px rgba(0,30,65,0.6);
  overflow: hidden;
}
.gero-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 22px 22px; opacity: 0.6;
}
.gero-hero > * { position: relative; z-index: 1; }
.gero-hero h1, .gero-hero h2, .gero-hero h3 { color: #fff; }
.gero-hero__meta { color: rgba(255,255,255,0.74); }
.gero-hero__meta a { color: #fff; text-decoration: underline; }
.gero-hero__mono {
  width: 62px; height: 62px; border-radius: 17px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.55rem; font-weight: 800; color: #fff; letter-spacing: .5px;
  background: linear-gradient(135deg, var(--gero-cyan), var(--gero-cyan-dark));
  box-shadow: 0 10px 24px -8px rgba(0,175,235,0.85);
}

/* Status-Pill (auf dunklem + hellem Grund) */
.gero-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .26rem .7rem; border-radius: 999px;
  font-size: .76rem; font-weight: 600; line-height: 1;
}
.gero-pill--on-dark { background: rgba(255,255,255,0.16); color: #fff; border: 1px solid rgba(255,255,255,0.25); }
/* Pille als KNOPF (bisher nur „Wichtige Info!" im Kopf der Kundenakte). Eine
   klickbare Pille ohne Hover- und Fokus-Zustand ist von einer beschrifteten
   nicht zu unterscheiden — und der Tastatur-Fokus fiele auf den Browser-Default
   zurück, während jede andere neue Komponente hier einen Marken-Ring hat. Die
   Farbe kommt vom Aufrufer (`--ac`), damit dieselbe Regel auch für einen
   künftigen zweiten Knopf dieser Art trägt. */
.gero-pill--action {
  --ac: var(--gero-danger);
  border: 0; cursor: pointer; color: #fff; background: var(--ac);
  transition: filter .14s ease, box-shadow .14s ease, transform .14s ease;
}
.gero-pill--action:hover {
  filter: brightness(1.08); transform: translateY(-1px);
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--ac) 70%, transparent);
}
/* Doppelter Ring statt `outline`: der Knopf steht einmal auf dem dunklen
   Hero-Gradienten und einmal auf weissem Grund (Pop-out-Kopf) — ein einfarbiger
   Ring verschwände auf einer der beiden Flächen. */
.gero-pill--action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ac);
}

/* Ersparnis-Spotlight im Hero (Glas-Effekt, grüner Payoff) */
.gero-savings {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 16px; padding: 1.05rem 1.4rem; min-width: 268px;
}
.gero-savings__label { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; color: rgba(255,255,255,0.72); }
.gero-savings__num { font-size: 2.5rem; font-weight: 800; line-height: 1; color: #fff; }
.gero-savings__accent { color: #4ade80; }
.gero-savings__sub { font-size: .8rem; color: rgba(255,255,255,0.82); }

/* Kachelzeile der Kundenakte: die Kacheln teilen sich die Breite nach ANZAHL.
   Zwei davon hängen an der Buchhaltungs-Rolle — mit festen Viertel-Spalten
   füllte ein Bearbeiter nur die linke Hälfte und rechts stand nichts. */
.gero-kpi-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.gero-kpi-row > .gero-crm-kpi { flex: 1 1 210px; min-width: 0; }

/* KPI-Kachel — Akzentlinie, Icon-Badge, Hover-Lift */
.gero-crm-kpi {
  position: relative; height: 100%;
  background: var(--gero-surface);
  border: 1px solid var(--gero-border); border-radius: 16px;
  padding: 1.15rem 1.3rem; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gero-crm-kpi::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: var(--kpi-accent, var(--gero-cyan));
}
.gero-crm-kpi:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -20px rgba(0,30,65,0.5); }
.gero-crm-kpi--active { border-color: var(--kpi-accent, var(--gero-cyan)); box-shadow: 0 0 0 1px var(--kpi-accent, var(--gero-cyan)) inset; }
.gero-crm-kpi__icon {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
/* Icon und Label in EINER Kopfzeile, die Zahl darunter: „0,00 €" zuerst und
   erst darunter wovon — das las sich rückwärts. */
.gero-crm-kpi__head {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem;
}
.gero-crm-kpi__num { display: block; font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--gero-text); }
/* Eine Null ist keine Nachricht: sie tritt zurück, damit die Kacheln mit einem
   echten Wert die Zeile führen. */
.gero-crm-kpi__num--zero { font-weight: 600; color: var(--gero-muted); }
.gero-crm-kpi__label { display: block; font-size: .8rem; color: var(--gero-muted); }
/* NUR in der neuen Kopfzeile führt das Label die Kachel an und wird dafür
   dunkler — sonst wäre eine Kachel mit Nullwert durchgehend grau. Die
   Basisklasse bleibt gedämpft: vier weitere Seiten (monitoring/vvl, fnz,
   ziele, inventory/article_detail) setzen sie weiterhin als Bildunterschrift
   UNTER die Zahl, dort würde fett/dunkel mit der Kennzahl konkurrieren. */
.gero-crm-kpi__head .gero-crm-kpi__label {
  font-size: .82rem; font-weight: 600; color: var(--gero-text);
}
/* Handlungs-Kachel (Kundenakte): Zusatzzeile mit Stichtag/Herkunft — die Zahl
   allein sagt nicht, worauf sie sich bezieht. */
/* Eigener, dunklerer Grauton statt --gero-muted: die Hinweiszeile ist der
   kleinste Text der Kachel und liefe damit unter 4,5:1 (WCAG AA). */
.gero-crm-kpi__hint { display: block; font-size: .72rem; color: #56616e; margin-top: .35rem; min-height: 1.1em; }
.gero-crm-kpi--action { display: block; }
button.gero-crm-kpi--action { cursor: pointer; }
button.gero-crm-kpi--action:focus-visible { outline: 2px solid var(--kpi-accent, var(--gero-cyan)); outline-offset: 2px; }

/* Segment-Balken (Bindefristen-Verteilung) */
.gero-crm-seg { display: flex; height: 13px; border-radius: 999px; overflow: hidden; background: var(--gero-border); }
.gero-crm-seg > span { display: block; height: 100%; }

/* Gestaffeltes Einblenden — AKTUELL UNBENUTZT (2026-07-27 aus allen Templates
   entfernt). Die Sequenz startete bei opacity 0 und lief eine halbe Sekunde;
   auf dem Hero, dem grössten Element ganz oben, las sich das als kurzes Blinken
   bei jedem Seitenaufruf. Vor allem war es ein sichtbarer Unterschied zwischen
   den Beta-Seiten (hatten es) und den freigegebenen (hatten es nie) — dieselbe
   Software durfte sich nicht je nach Modul anders anfühlen.
   Definition bleibt stehen, falls die Sequenz je bewusst zurückkommen soll;
   dann aber überall oder nirgends. */
@keyframes geroReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.gero-reveal { animation: geroReveal .5s cubic-bezier(.2,.7,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .gero-reveal { animation: none; } }

/* Schlankes Hero-Band für Detail-/Entitäts-Seiten (Auftrag/Beleg/Projekt) */
.gero-hero--slim { padding: 1.2rem 1.4rem; border-radius: 16px; }
.gero-hero--slim .gero-hero__mono { width: 48px; height: 48px; border-radius: 13px; font-size: 1.2rem; }

/* Semantische Status-Pills (heller Grund) — durchgängige Ampel über alle Module */
.gero-pill--ok     { background: color-mix(in srgb, var(--gero-ok) 13%, transparent);  color: var(--gero-ok-tx); }
.gero-pill--info   { background: rgba(0,175,235,.13);  color: #007aab; }
.gero-pill--warn   { background: rgba(245,158,11,.15); color: #b45309; }
.gero-pill--danger { background: rgba(239,68,68,.13);  color: #b91c1c; }
.gero-pill--muted  { background: rgba(148,163,184,.18);color: #475569; }

/* Ein-/Ausblenden-Schalter (rot/grün) — generalisiert aus dem Angebotstool-
   Spaltenschalter (`gero-col-toggle` in _recommendation_form.html). Grün = Inhalt
   ist eingeblendet/sichtbar, Rot = ausgeblendet. Der farbige Punkt ist ein
   zweites, graustufen-taugliches Signal (gefüllt=an, hohl=aus). Kontraste wie im
   Vorbild: #14532d auf #ecfdf5 ≈ 11:1, #991b1b auf #fef2f2 ≈ 8:1 (WCAG AAA). */
.gero-vis-toggle {
  border-radius: 25px; padding: 6px 14px; font-weight: 500;
  border-width: 1.5px; border-style: solid; transition: all .18s;
  display: inline-flex; align-items: center;
}
.gero-vis-toggle .gero-vis-dot {
  display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
  margin-right: .45rem; flex: none;
}
/* AN — Inhalt eingeblendet (grün, gefüllter Punkt). */
.gero-vis-toggle.is-on  { background-color: #ecfdf5; border-color: #15803d; color: #14532d; }
.gero-vis-toggle.is-on .gero-vis-dot { background-color: #15803d; }
.gero-vis-toggle.is-on:hover { background-color: #d6f5e3; border-color: #14532d; }
/* AUS — Inhalt ausgeblendet (rot, hohler Punkt). */
.gero-vis-toggle.is-off { background-color: #fef2f2; border-color: #b91c1c; color: #991b1b; }
.gero-vis-toggle.is-off .gero-vis-dot { background-color: transparent; box-shadow: inset 0 0 0 1.5px #b91c1c; }
.gero-vis-toggle.is-off:hover { background-color: #fde2e2; border-color: #991b1b; }

/* Tabellen-Zeilen-Hover (Listen wirken lebendig statt statisch) */
.gero-table tbody tr { transition: background .12s ease; }
.gero-table tbody tr:hover { background: rgba(0,175,235,.05); }

/* Kanban / Pipeline-Board (Projekte — Headline-WOW) */
.gero-kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.gero-kanban__col {
  flex: 0 0 270px; min-width: 270px;
  background: var(--gero-bg); border: 1px solid var(--gero-border);
  border-radius: 14px; display: flex; flex-direction: column;
}
.gero-kanban__head {
  padding: .7rem .85rem; border-bottom: 1px solid var(--gero-border);
  border-top: 3px solid var(--col-accent, var(--gero-cyan));
  border-radius: 14px 14px 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.gero-kanban__title { font-size: .8rem; font-weight: 700; color: var(--gero-text); }
.gero-kanban__sum { font-size: .72rem; color: var(--gero-muted); white-space: nowrap; }
.gero-kanban__count {
  font-size: .7rem; font-weight: 700; color: #fff; background: var(--col-accent, var(--gero-cyan));
  border-radius: 999px; padding: .05rem .45rem;
}
.gero-kanban__body { padding: .6rem; display: flex; flex-direction: column; gap: .55rem; overflow-y: auto; max-height: 62vh; }
.gero-kanban__card {
  display: block; background: var(--gero-surface); border: 1px solid var(--gero-border);
  border-radius: 11px; padding: .65rem .75rem; text-decoration: none; color: inherit;
  box-shadow: 0 2px 6px -4px rgba(0,30,65,.25);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.gero-kanban__card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(0,30,65,.5); border-color: var(--gero-cyan); color: inherit; }
.gero-kanban__empty { padding: 1rem .75rem; text-align: center; color: var(--gero-muted); font-size: .8rem; }

/* Pipeline-Trichter (Projekt-Übersicht Standardansicht — Option C). Vier Phasen-
   Segmente, je ein Gradient (--c1→--c2 inline gesetzt), als Link zum Filtern der
   Liste darunter (?phase=…). Chevron am rechten Rand = Trichter-Fluss. */
.gero-funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gero-funnel__seg {
  position: relative; display: block; border-radius: 12px; padding: .75rem .8rem .8rem;
  color: #fff; text-decoration: none; overflow: visible;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 8px 18px -12px rgba(0,30,65,.5);
  /* Weißer Text sitzt links über dem dunklen c1-Ende; der Schatten sichert die
     Lesbarkeit auch dort, wo er über das hellere c2-Ende läuft (WCAG-Puffer). */
  text-shadow: 0 1px 2px rgba(3,20,42,.42);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.gero-funnel__seg:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(0,30,65,.6); color: #fff; filter: saturate(1.12); }
.gero-funnel__seg:focus-visible { outline: 3px solid var(--gero-cyan); outline-offset: 2px; }
.gero-funnel__seg.is-active { box-shadow: inset 0 0 0 2px rgba(255,255,255,.92), 0 12px 24px -12px rgba(0,30,65,.65); }
.gero-funnel__k { display: block; font-size: .68rem; font-weight: 700; opacity: .92; text-transform: uppercase; letter-spacing: .04em; }
.gero-funnel__v { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.05; margin-top: .1rem; }
.gero-funnel__e { display: block; font-size: .74rem; opacity: .92; }
.gero-funnel__arrow {
  position: absolute; right: -9px; top: 50%; width: 18px; height: 18px;
  transform: translateY(-50%) rotate(45deg); border-radius: 3px;
  background: var(--c2); z-index: 1;
}
.gero-funnel__seg:last-child .gero-funnel__arrow { display: none; }
@media (max-width: 720px) {
  .gero-funnel { grid-template-columns: repeat(2, 1fr); }
  .gero-funnel__arrow { display: none; }
}

/* ── Monitoring Sub-Navigation (Pills im Cockpit-Look statt Bootstrap-Blau) ── */
.gero-subnav .nav-link {
  color: var(--gero-navy-3);
  background: var(--gero-surface);
  border: 1px solid var(--gero-border);
  border-radius: 9px;
  font-size: .85rem;
  font-weight: 600;
  padding: .4rem .8rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gero-subnav .nav-link:hover {
  border-color: var(--gero-cyan);
  color: var(--gero-cyan);
}
.gero-subnav .nav-link.active {
  background: var(--gero-navy-2, #003a73);
  border-color: var(--gero-navy-2, #003a73);
  color: #fff;
}

/* ── Such-zentrierter Kunden-Einstieg ─────────────────────────────────────
   Hero mit großem Suchfeld + Filter-Pills, Ergebnis als Karten-Grid.        */
.gero-search-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--gero-navy), var(--gero-navy-3));
  border-radius: 18px; padding: 1.55rem 1.7rem; color: #fff;
}
.gero-search-hero__title { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; margin: 0 0 .9rem; }
/* Dauerhafte Hinweiszeile im Hero („Sucht in …"). BEWUSST nicht `text-white-50`:
   .5 Deckkraft auf dem Navy-Verlauf bleibt unter 3:1 Kontrast — für den kurz
   aufblitzenden Spinner-Text daneben vertretbar, für Fließtext, der immer
   dasteht, nicht (UX-Review 2026-07-28). Gleiche Deckkraft wie `.gero-hero__meta`. */
.gero-search-hint { color: rgba(255,255,255,.78); }
.gero-search-box { position: relative; max-width: 640px; }
.gero-search-box .gero-search-icon {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--gero-navy-3); font-size: 1.1rem; pointer-events: none;
}
.gero-search-input {
  width: 100%; border: 0; border-radius: 14px;
  padding: .95rem 1rem .95rem 2.8rem; font-size: 1.05rem; color: var(--gero-text);
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.55);
}
.gero-search-input:focus { outline: 3px solid rgba(0,175,235,.55); }

.gero-filter-pill {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .34rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.25); user-select: none;
  transition: background .15s ease, border-color .15s ease;
}
.gero-filter-pill:hover { background: rgba(255,255,255,.24); }
.gero-filter-pill input { position: absolute; opacity: 0; pointer-events: none; }
/* Tastatur-Fokus sichtbar machen (Checkbox ist visuell versteckt). */
.gero-filter-pill:has(input:focus-visible) { outline: 2px solid rgba(0,175,235,.7); outline-offset: 2px; }
.gero-filter-pill:has(input:checked) { background: var(--gero-cyan); border-color: var(--gero-cyan); color: var(--gero-navy); }

.gero-cust-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.gero-cust-card {
  position: relative; display: flex; flex-direction: column; gap: .55rem;
  background: var(--gero-surface); border: 1px solid var(--gero-border);
  border-radius: 16px; padding: 1.05rem 1.15rem; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gero-cust-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 3px;
  background: var(--gero-cyan); opacity: 0; transition: opacity .18s ease;
}
.gero-cust-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -20px rgba(0,30,65,.5); border-color: rgba(0,175,235,.45); }
.gero-cust-card:hover::before { opacity: 1; }
.gero-cust-card--stub { border-style: dashed; border-color: rgba(245,158,11,.55); background: rgba(245,158,11,.035); }
.gero-cust-card--stub::before { background: #f59e0b; }
.gero-cust-card--stub:hover { border-color: rgba(245,158,11,.75); }

/* Sortierbare Tabellen-Spaltenköpfe — erben exakt den nativen th-Look
   (.gero-table > thead > tr > th): navy-3, Großbuchstaben, .72rem/700. */
.gero-cust-table th { white-space: nowrap; }
.gero-th-sort {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font-family: inherit; font-weight: 700; color: var(--gero-navy-3);
  display: inline-flex; align-items: center; gap: .3rem;
  text-transform: uppercase; letter-spacing: .04em; font-size: .72rem;
  transition: color .15s ease;
}
.gero-th-sort:hover { color: var(--gero-cyan); }
.gero-th-sort.is-active { color: var(--gero-cyan); }
.gero-th-sort__hint { opacity: .4; font-size: .68rem; }
.gero-cust-row--stub { background: rgba(245,158,11,.05); }
.gero-cust-row--stub:hover { background: rgba(245,158,11,.09); }
.gero-cust-card__name { font-weight: 700; color: var(--gero-text); font-size: 1.02rem; line-height: 1.25; }
.gero-cust-card__cmo { font-size: .74rem; font-family: ui-monospace, 'SFMono-Regular', monospace; color: var(--gero-muted); }
.gero-cust-chip {
  display: inline-flex; align-items: center; gap: .32rem;
  font-size: .74rem; font-weight: 600; color: var(--gero-body);
  background: var(--gero-bg); border: 1px solid var(--gero-border);
  border-radius: 8px; padding: .22rem .5rem;
}
/* Anklickbarer Chip (Ort → Karte). Sieht bis zum Hover aus wie die anderen —
   das Symbol trägt die Bedeutung, der Hover bestätigt sie.                    */
a.gero-cust-chip { text-decoration: none; transition: border-color .12s, color .12s, background .12s; }
a.gero-cust-chip:hover,
a.gero-cust-chip:focus-visible {
  color: var(--gero-navy-3); border-color: var(--gero-navy-3);
  background: rgba(0,113,168,.07);
}

/* ── Akte-Tabs — Pill-Cloud im Navy/Cyan-Stil ─────────────────────────────
   Überschreibt die Bootstrap-`nav-tabs`-Defaults (blasse Link-Tabs + grauer
   Unterstrich) zu farbigen Pills mit gefülltem Aktiv-Zustand. Greift in beiden
   Akten (Kunde + Lager-Artikel), die `.gero-tabs` nutzen.                     */
/* Kompakt gesetzt, damit ALLE Reiter sichtbar bleiben: die Akte hat 17 davon,
   und die Mitarbeiterinnen kennen sie aus dem Vorsystem vollständig auf zwei
   Zeilen. Weiter gefasst brauchten sie drei und schoben den Inhalt nach unten;
   ein Überlauf-Menü kam nicht in Frage (GF 2026-07-30) — also enger. */
.gero-tabs.nav-tabs { border-bottom: 0; gap: .28rem; }
.gero-tabs .nav-item { margin: 0; }
.gero-tabs .nav-link {
  display: inline-flex; align-items: center; gap: .3rem;
  margin: 0; padding: .3rem .6rem;
  border: 1px solid var(--gero-border); border-radius: 999px;
  font-size: .78rem; font-weight: 600; color: var(--gero-muted);
  background: var(--gero-surface);
  transition: color .15s ease, background .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .15s ease;
}
.gero-tabs .nav-link i { font-size: .85rem; opacity: .85; }
.gero-tabs .nav-link:hover {
  color: var(--gero-navy-3); border-color: rgba(0,175,235,.5);
  background: rgba(0,175,235,.08);
}
.gero-tabs .nav-link.active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--gero-navy-3), var(--gero-cyan));
  box-shadow: 0 8px 18px -8px rgba(0,75,150,.6);
  transform: translateY(-1px);
}
.gero-tabs .nav-link.active i { opacity: 1; }
.gero-tabs .nav-link:focus-visible { outline: 2px solid var(--gero-cyan); outline-offset: 2px; }

/* Zähler-Badge in den Tabs (statt hartem bg-secondary) */
.gero-tabs .nav-link .badge {
  background: var(--gero-bg) !important; color: var(--gero-body) !important;
  border: 1px solid var(--gero-border); font-weight: 700;
  border-radius: 999px; padding: .1rem .38rem; font-size: .66rem;
}
.gero-tabs .nav-link.active .badge {
  background: rgba(255,255,255,.22) !important; color: #fff !important;
  border-color: rgba(255,255,255,.4) !important;
}

/* ── Tabellen — „designter" Look (Komponente war bisher ungestylt) ────────
   Dezenter Großbuchstaben-Header, weiche Trennlinien, Zeilen-Hover.         */
.gero-table { margin-bottom: 0; }
.gero-table > thead > tr > th {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gero-navy-3);
  background: linear-gradient(var(--gero-bg), var(--gero-bg)) padding-box;
  border-top: 0; border-bottom: 2px solid rgba(0,175,235,.35);
  padding: .6rem .75rem; white-space: nowrap;
}
.gero-table > tbody > tr { transition: background .12s ease; }
.gero-table > tbody > tr:hover { background: rgba(0,175,235,.05); }
.gero-table > tbody > tr > td {
  border-top: 0; border-bottom: 1px solid var(--gero-border);
  padding: .6rem .75rem; vertical-align: middle;
}
.gero-table > tbody > tr:last-child > td { border-bottom: 0; }

/* ── Leerzustand — glühender Icon-Badge statt verblasstem Riesen-Icon ──── */
.gero-empty { text-align: center; padding: 2.6rem 1rem; }
.gero-empty__icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
  color: var(--gero-navy-3);
  background: radial-gradient(circle at 32% 28%, rgba(0,175,235,.18), rgba(0,75,150,.07));
  border: 1px solid rgba(0,175,235,.25);
}
.gero-empty__title { font-weight: 600; color: var(--gero-text); }
.gero-empty__sub {
  font-size: .85rem; color: var(--gero-muted); margin: .3rem auto 0; max-width: 460px;
}
.gero-empty__sub a { color: var(--gero-navy-3); font-weight: 600; }
.gero-empty .btn { margin-top: 1.1rem; }

/* ── Provider-Badge — Marken-Farbe in Tabellen (Anbieter-Spalte) ───────────
   Farbe kommt per --pc (provider_color-Filter); Punkt + getönter Grund.      */
.gero-provider-badge {
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .74rem; font-weight: 700; line-height: 1;
  padding: .26rem .6rem; border-radius: 999px;
  color: var(--pc, #6c757d);
  background: color-mix(in srgb, var(--pc, #6c757d) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc, #6c757d) 32%, transparent);
}
.gero-provider-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--pc, #6c757d); flex: 0 0 auto;
}

/* ── Aktions-Icon-Buttons — farbcodiert je Aktion (--ac), füllen beim Hover ─ */
.gero-icon-action {
  --ac: var(--gero-navy-3);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border-radius: 9px;
  font-size: .95rem; line-height: 1; text-decoration: none;
  color: var(--ac);
  background: color-mix(in srgb, var(--ac) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--ac) 26%, transparent);
  transition: color .14s ease, background .14s ease, border-color .14s ease,
              transform .14s ease, box-shadow .14s ease;
}
.gero-icon-action + .gero-icon-action { margin-left: .3rem; }
.gero-icon-action:hover {
  color: #fff; background: var(--ac); border-color: var(--ac);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--ac) 70%, transparent);
}
.gero-icon-action:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   WOW-SEITEN-SYSTEM — der moderne Standard-Look (Backlog · Kunden · Fragen · …)
   Ein Ort für Hero-Band, KPI-Kacheln, Segment-Umschalter und WOW-Karten.
   Seiten nutzen diese Klassen statt inline-CSS zu duplizieren; die Ring-/Count-
   up-Animation übernimmt gero.js automatisch (.gero-hero-ring .prog / .gero-count).
   App ist bewusst Light-only → KEIN prefers-color-scheme:dark für Hintergründe.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero-Band ────────────────────────────────────────────────────────────── */
/* Statischer Verlauf (bewusst KEINE Dauer-Animation — auf einem Arbeitswerkzeug
   wirkt ein endlos wandernder Gradient unruhig). Einmalige Animationen (Karten-
   Einflug, Ring, Count-up) bleiben. */
/* min-height als gemeinsamer Anker → alle vollen Heroes gleich hoch (Inhalt
   vertikal zentriert via .gero-hero-inner align-items:center). */
.gero-hero { position:relative; overflow:hidden; border-radius:20px; margin-bottom:1.25rem;
  padding:1.15rem 1.8rem; min-height:118px; box-sizing:border-box; display:flex; align-items:center; color:#fff;
  background:linear-gradient(120deg,#001428 0%,#002f5e 38%,#0a5c9e 68%,#00AFEB 120%);
  box-shadow:0 18px 40px -18px rgba(0,30,65,.6); }
.gero-hero-inner { flex:1 1 auto; }
.gero-hero::after { content:''; position:absolute; top:-42%; right:-8%; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.14), transparent 62%); pointer-events:none; }
/* Akzent-Varianten (Gradient je Bereich) */
.gero-hero-green  { background-image:linear-gradient(120deg,#001428 0%,#123f24 42%,#15803d 78%,#22c55e 125%); box-shadow:0 18px 40px -18px rgba(0,40,20,.5); }
.gero-hero-violet { background-image:linear-gradient(120deg,#1a1030 0%,#3b2a6b 45%,#6d4bc7 80%,#8b5cf6 125%); }
.gero-hero-amber  { background-image:linear-gradient(120deg,#2a1800 0%,#7c4a02 45%,#b45309 80%,#f59e0b 125%); }

.gero-hero-inner { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; }
.gero-hero-title { font-family:var(--font-heading,sans-serif); font-weight:800; font-size:1.65rem; letter-spacing:-.01em; margin:0; color:#fff; }
.gero-hero-sub { margin:.15rem 0 0; color:rgba(255,255,255,.74); font-size:.9rem; max-width:56ch; }
.gero-hero-actions { margin-left:auto; display:flex; flex-direction:column; gap:.6rem; align-items:stretch; }

/* Icon-Kachel (Alternative zum Ring) */
.gero-hero-icon { width:64px; height:64px; border-radius:18px; flex:none; display:grid; place-items:center; font-size:1.7rem;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); }

/* Fortschritts-Ring (Animation via gero.js) */
.gero-hero-ringwrap { position:relative; flex:none; }
.gero-hero-ring { width:68px; height:68px; flex:none; transform:rotate(-90deg); }
.gero-hero-ring .track { fill:none; stroke:rgba(255,255,255,.18); stroke-width:9; }
.gero-hero-ring .prog  { fill:none; stroke:#fff; stroke-width:9; stroke-linecap:round;
  stroke-dasharray:327; stroke-dashoffset:327; transition:stroke-dashoffset 1.3s cubic-bezier(.22,1,.36,1); }
.gero-hero-ringwrap b { position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-heading,sans-serif); font-weight:800; font-size:1.15rem; color:#fff; }

/* ── KPI-Kacheln (auf dunklem Hero-Grund) ─────────────────────────────────── */
.gero-kpi { display:flex; gap:.7rem; flex-wrap:wrap; }
/* KPI-Kacheln im Hero kompakt halten, damit die KPI-Heroes nicht deutlich höher
   werden als die einfachen (mt-3 der Templates auf schmalen Abstand gedämpft). */
.gero-hero .gero-kpi { margin-top:.45rem !important; }
.gero-kpi-tile { min-width:92px; padding:.4rem .75rem; border-radius:12px; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(6px); }
.gero-kpi-tile b { display:block; font-family:var(--font-heading,sans-serif); font-weight:800; font-size:1.45rem; line-height:1; color:#fff; }
.gero-kpi-tile span { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.72); }

/* ── Segment-Umschalter (im Hero) ─────────────────────────────────────────── */
.gero-seg { display:inline-flex; background:rgba(255,255,255,.12); border-radius:10px; padding:.15rem; }
.gero-seg a, .gero-seg button { padding:.3rem .8rem; border:0; background:transparent; border-radius:8px; font-size:.82rem; font-weight:600;
  color:rgba(255,255,255,.82); text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; gap:.3rem; font-family:inherit; }
.gero-seg a.on, .gero-seg button.on { background:#fff; color:var(--gero-navy,#001E41); }
.gero-seg .cnt { font-size:.7rem; font-weight:800; background:#dc2626; color:#fff; border-radius:999px; padding:.02rem .4rem; }
.gero-seg a.on .cnt, .gero-seg button.on .cnt { background:var(--gero-navy,#001E41); color:#fff; }

/* ── WOW-Karte (moderne Inhaltskarte) ─────────────────────────────────────── */
.gero-wow-card { position:relative; background:var(--gero-surface,#fff); border:1px solid var(--gero-border,#e2e6ea); border-radius:16px;
  box-shadow:0 1px 3px rgba(16,30,54,.05); transition:box-shadow .16s ease, transform .12s ease;
  animation:gero-card-in .45s cubic-bezier(.22,1,.36,1) backwards; animation-delay:calc(var(--i,0) * 45ms); }
@keyframes gero-card-in { from{opacity:0; transform:translateY(12px) scale(.985);} to{opacity:1; transform:none;} }
.gero-wow-card:hover { box-shadow:0 12px 28px -14px rgba(16,30,54,.30); transform:translateY(-2px); }
/* Akzentbalken links (Farbe via --accent) */
.gero-wow-card.gero-accent::before { content:''; position:absolute; left:0; top:14px; bottom:14px; width:4px;
  border-radius:0 4px 4px 0; background:var(--accent,var(--gero-cyan,#00AFEB)); }

/* ── Leerzustand · Puls ───────────────────────────────────────────────────── */
.gero-empty { text-align:center; color:var(--gero-muted,#9aa4b2); padding:3rem 1rem;
  border:1.5px dashed var(--gero-border,#d7dde5); border-radius:16px; }
.gero-empty i { display:block; font-size:2.2rem; margin-bottom:.5rem; opacity:.55; }
@keyframes gero-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0);} 50%{box-shadow:0 0 0 4px rgba(220,38,38,.14);} }

@media (max-width:640px){ .gero-hero-actions{ margin-left:0; width:100%; } }
@media (prefers-reduced-motion: reduce){ .gero-hero{animation:none;} .gero-wow-card{animation:none;} }

/* Weißer Hero-CTA-Knopf (auf dunklem Hero-Grund) */
.gero-hero-btn { border:0; border-radius:12px; padding:.6rem 1.1rem; font-weight:700; color:var(--gero-navy,#001E41); background:#fff;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.4); transition:transform .12s, box-shadow .12s; cursor:pointer; }
.gero-hero-btn:hover { transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(0,0,0,.5); color:var(--gero-navy,#001E41); }

/* ── Kompakte Hero-Variante (gleicher Look, weniger Höhe: dichte/Formularseiten) ── */
.gero-hero-sm { padding:1.05rem 1.4rem; margin-bottom:1rem; }
.gero-hero-sm .gero-hero-title { font-size:1.3rem; }
.gero-hero-sm .gero-hero-sub { font-size:.86rem; }
.gero-hero-sm::after { width:300px; height:300px; top:-55%; }
.gero-hero-sm .gero-hero-icon { width:46px; height:46px; font-size:1.3rem; border-radius:14px; }

/* ── Badge-System (Status) — ein Ort statt verstreuter inline-style-Badges ── */
.gero-badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.7rem; font-weight:700;
  letter-spacing:.02em; padding:.2rem .6rem; border-radius:999px; white-space:nowrap; line-height:1.35;
  background:var(--gero-bg,#f2f4f7); color:var(--gero-muted,#64748b); border:1px solid var(--gero-border,#e2e6ea); }
.gero-badge--ok     { background:var(--gero-ok-bg); color:var(--gero-ok-tx); border-color:transparent; }
.gero-badge--warn   { background:var(--gero-warn-bg); color:var(--gero-warn-tx); border-color:transparent; }
.gero-badge--danger { background:var(--gero-danger-bg); color:var(--gero-danger-tx); border-color:transparent; }
.gero-badge--info   { background:#e0f2fe; color:#0369a1; border-color:transparent; }
.gero-badge--muted  { background:#eef1f5; color:#64748b; border-color:transparent; }
.gero-badge--accent { background:color-mix(in srgb,var(--gero-cyan,#00AFEB) 14%,transparent); color:var(--gero-cyan-dark,#008cbe); border-color:transparent; }

/* ── FOUC-Guard: kein Transition-Flackern beim ersten Laden ──────────────────
   Beim Laden feuern CSS-Transitions einmal kurz mit, während der Browser die
   Styles setzt → sichtbares Repaint/„Blinken" (v.a. Karten/Kacheln, CLS=0, also
   kein Verschieben — nur Neuzeichnen). `.gero-preload` liegt initial am <body>
   und schaltet Transitions ab; gero.js entfernt die Klasse nach `window.load`,
   dann sind Hover-/Interaktions-Transitions wieder normal aktiv. Fällt JS aus,
   bleiben nur die Transitions weg (Seite voll funktionsfähig). */
.gero-preload,
.gero-preload *,
.gero-preload *::before,
.gero-preload *::after {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

/* ── In-App-Tour (gero-tour.js) — Schulungs-Overlay mit Spotlight ────────────
   Das Spotlight ist ein transparentes Rechteck über dem erklärten Element;
   der riesige box-shadow dunkelt den REST der Seite ab (eine einzige Fläche,
   kein vierteiliges Overlay → keine Fugen beim Repositionieren). Das Overlay
   fängt alle Klicks ab, solange die Tour läuft — bedient wird nur die Karte. */
.gero-tour-overlay {
  position: fixed; inset: 0; z-index: 2000;
}
.gero-tour-spotlight {
  position: fixed;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0, 30, 65, 0.62);
  border: 2px solid var(--gero-cyan, #00AFEB);
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
  pointer-events: none;
}
.gero-tour-card {
  position: fixed;
  width: 380px; max-width: calc(100vw - 24px);
  background: var(--gero-surface, #fff);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 30, 65, 0.35);
  padding: .9rem 1.1rem 1rem;
  transition: left .25s ease, top .25s ease;
}
.gero-tour-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .35rem;
}
.gero-tour-step-count {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gero-cyan-dark, #008cbe);
}
.gero-tour-close {
  border: 0; background: none; font-size: 1.3rem; line-height: 1;
  color: var(--gero-muted, #6c7a89); padding: 0 .2rem; cursor: pointer;
}
.gero-tour-close:hover { color: var(--gero-text, #1a2640); }
.gero-tour-title {
  font-weight: 700; color: var(--gero-text, #1a2640); margin-bottom: .35rem;
}
.gero-tour-text {
  font-size: .85rem; color: var(--gero-body, #4F4F4F); line-height: 1.5;
}
.gero-tour-text .gero-tour-chip {
  display: inline-block; padding: 0 .35rem; border-radius: 4px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.gero-tour-nav {
  display: flex; justify-content: space-between; gap: .5rem; margin-top: .8rem;
}