/* ════════════════════════════════════════════════════════════════════════════
   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;
  --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: 40px;
  height: 40px;
  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: 0.95rem; line-height: 1.2; }
.gero-logo-sub { color: var(--gero-cyan); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.5px; }

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

.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;
}

.gero-nav-link:hover {
  background: rgba(255,255,255,.08);
  color: white;
}

.gero-nav-link.active {
  background: rgba(255,255,255,.04);
  color: white;
  position: relative;
}

.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; }

.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 */
.gero-btn-primary {
  background: var(--gero-navy);
  border: 1px solid var(--gero-navy);
  color: white;
  font-weight: 600;
  border-radius: 25px;
  padding: 8px 20px;
  transition: all 0.18s;
}

.gero-btn-primary:hover {
  background: var(--gero-navy-3);
  border-color: var(--gero-navy-3);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,30,65,.20);
}

.gero-btn-primary:active { transform: translateY(0); }

.gero-btn-outline {
  background: transparent;
  border: 1.5px solid var(--gero-navy);
  color: var(--gero-navy);
  font-weight: 500;
  border-radius: 25px;
  padding: 8px 20px;
  transition: all 0.18s;
}

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

/* 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;
}

/* Success: grüner Pill-Button (Excel-Export). Setzt nur Farbe + Pill-Radius —
   Größe/Padding kommt weiter von btn-sm/btn-lg, damit die Bootstrap-Größen heil
   bleiben. So sind die Excel-Buttons rund wie gero-btn-primary statt eckig. */
.gero-btn-success {
  background: var(--bs-success, #198754);
  border: 1px solid var(--bs-success, #198754);
  color: #fff;
  font-weight: 600;
  border-radius: 25px;
  transition: all 0.18s;
}
.gero-btn-success:hover {
  background: #157347;
  border-color: #157347;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(25,135,84,.20);
}
.gero-btn-success:active { transform: translateY(0); }
.gero-btn-success:focus-visible { outline: 2px solid var(--gero-cyan); outline-offset: 2px; }

/* 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; }
.gero-btn-success.disabled,
.gero-btn-success:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

/* ── 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;
}

/* ── 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: #198754;
  color: white;
  border-color: #198754;
}

.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: #198754; }

.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: #198754;
  background: rgba(25,135,84,.04);
}

.gero-dropzone #id_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: #198754;
  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: #198754; }

.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(25,135,84,.12);
  color: #198754;
}

/* ── 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);
}

/* 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; }

.gero-quality-high { background: rgba(25,135,84,.1); color: #198754; border: 1px solid rgba(25,135,84,.2); }
.gero-quality-medium { background: rgba(255,193,7,.12); color: #856404; border: 1px solid rgba(255,193,7,.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: #856404;
  border-bottom-color: rgba(255,193,7,.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(255,193,7,.5);
}

.gero-manual-input:focus {
  border-color: #ffc107;
  box-shadow: 0 0 0 0.2rem rgba(255,193,7,.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); }

/* ── Review Table (Rufnummern-Listenansicht) ───────────────────────────── */
.gero-review-table-wrapper {
  overflow-x: auto;
  max-height: 70vh;
  overflow-y: auto;
}

.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;
}

.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;
}

.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);
}

.gero-table-section-manual {
  background: #fef9e7 !important;
  color: #856404 !important;
}

.gero-col-manual {
  background: #fef9e7;
  color: #856404;
}

/* Row Ampel-Hintergründe */
.gero-row-high  { background: rgba(25,135,84,.04); }
.gero-row-medium { background: rgba(255,193,7,.06); }
.gero-row-low   { background: rgba(220,53,69,.06); }

.gero-review-table tbody tr:hover { filter: brightness(0.97); }

/* 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: rgba(25,135,84,.06); }
.gero-conf-warning   { background: rgba(255,193,7,.22); }
.gero-conf-danger    { background: rgba(220,53,69,.15); }
.gero-conf-secondary { background: rgba(108,117,125,.06); }

/* 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 */
.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(255,193,7,.07);
  border-color: rgba(255,193,7,.35);
}

.gero-table-input-manual:focus {
  border-color: #ffc107;
  background: #fffdf0;
  box-shadow: 0 0 0 2px rgba(255,193,7,.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;
}

/* 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(255,193,7,.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;
}