/* === teamgeist Design-System: Tokens ===
   Source-of-truth: teamgeist_CD_Manual_Redesign_2022_v4.pdf + colors_and_type.css
   Welle 0.58: Brand-Fonts (Expressway + Open Sans tg) eingebunden,
   Body-Defaults + Helper-Klassen ergaenzt.
*/

/* ============ FONTS — CD Manual 2022 ============ */
@font-face {
  font-family: 'Expressway';
  src: url('/static/fonts/ExpresswayRg.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Expressway';
  src: url('/static/fonts/ExpresswayRg-Italic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Expressway';
  src: url('/static/fonts/ExpresswaySb.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Expressway';
  src: url('/static/fonts/ExpresswaySb-Italic.otf') format('opentype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Expressway';
  src: url('/static/fonts/ExpresswayRg-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Expressway';
  src: url('/static/fonts/ExpresswayRg-BoldItalic.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Open Sans tg';
  src: url('/static/fonts/OpenSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans tg';
  src: url('/static/fonts/OpenSans-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Open Sans tg';
  src: url('/static/fonts/OpenSans-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans tg';
  src: url('/static/fonts/OpenSans-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* === Color Tokens (CD Manual 2022 p.24) === */
  --color-accent: #ce2128;          /* Fire Engine Red */
  --color-accent-hover: #b91c22;    /* Akzent bei Hover */
  --color-accent-press: #a31920;    /* Akzent bei Press/Active */
  --color-accent-soft: #fbe9ea;     /* Tinted bg, soft red surfaces */
  --color-text: #575756;             /* 80% Schwarz - Body (NIE pure black!) */
  --color-text-strong: #2f2f2f;      /* Headings strong */
  --color-text-light: #8c8c8b;       /* Secondary Text */
  --color-text-disabled: #c0c0c0;    /* Disabled Text */
  --color-bg: #ffffff;               /* Weiss */
  --color-bg-alt: #e8e9f0;           /* Hellgrau (CD Manual p.24) */
  --color-bg-soft: #f5f5f7;          /* Subtiler Hintergrund zwischen weiss + hellgrau */
  --color-surface: #f5f5f7;          /* Card-Surface — synced mit bg-soft */
  --color-surface-hover: #e8e9f0;    /* Hover */
  --color-border: #d6d7dc;           /* Hairline-Borders */
  --color-border-dark: #8c8c8b;      /* Strong Borders */
  --color-success: #2d8a4f;          /* Gruen */
  --color-success-soft: #e6f4ec;     /* Erfolg-Soft (Background-Tint) */
  --color-success-strong: #1e6334;   /* Erfolg-Strong (Hover/Focus) */
  --color-warning: #d4892b;          /* Orange */
  --color-warning-soft: #fbf1e0;     /* Warnung-Soft */
  --color-warning-strong: #9c6217;   /* Warnung-Strong */
  --color-danger: #ce2128;           /* Rot (= accent) */
  --color-danger-soft: #fbe9ea;      /* Fehler-Soft (= accent-soft) */
  --color-danger-strong: #a31920;    /* Fehler-Strong (= accent-press) */
  --color-info: #0ea5e9;             /* Blau */
  --color-info-soft: #e0f2fe;        /* Info-Soft */
  --color-info-strong: #0369a1;      /* Info-Strong */
  /* Neutral-Skala (Welle 0.60) */
  --color-neutral-50:  #fafbfc;
  --color-neutral-100: #f5f5f7;      /* = bg-soft */
  --color-neutral-200: #e8e9f0;      /* = bg-alt */
  --color-neutral-300: #d6d7dc;      /* = border */
  --color-neutral-400: #b8b9c1;
  --color-neutral-500: #8c8c8b;      /* = text-light */
  --color-neutral-600: #6f6f6e;
  --color-neutral-700: #575756;      /* = text */
  --color-neutral-800: #3f3f3e;
  --color-neutral-900: #2f2f2f;      /* = text-strong */
  /* Akzent-Skala */
  --color-accent-50:  #fdf3f4;
  --color-accent-100: #fbe9ea;       /* = accent-soft */
  --color-accent-300: #ed8a8e;
  --color-accent-500: #ce2128;       /* = accent */
  --color-accent-700: #a31920;       /* = accent-press */
  --color-accent-900: #6e1015;

  /* ============ CHART-PALETTE — 20 unterscheidbare Farben (Welle 0.61) ============
     Brand-Rot fuehrt, Grau-Familie als Komplement, dann harmonische Sekundaerfarben
     in gedaempften Toenen die nicht mit dem Brand-Akzent kollidieren.
     Verwendung: 9-14 Gesellschaften, BWA-Kontengruppen, Multi-Serie-Charts.
     Reihenfolge optimiert fuer maximalen Kontrast bei 5/8/10/15/20 Segmenten. */
  --chart-c01: #ce2128;   /* teamgeist Brand Rot */
  --chart-c02: #1e3a8a;   /* Tiefes Indigo — starker Kontrast zu Rot */
  --chart-c03: #2d8a4f;   /* Erfolg-Gruen */
  --chart-c04: #d4892b;   /* Warm-Orange */
  --chart-c05: #6b21a8;   /* Pflaume/Lila */
  --chart-c06: #0e7490;   /* Petrol/Teal */
  --chart-c07: #b45309;   /* Bernstein/Caramel */
  --chart-c08: #be185d;   /* Magenta/Pink */
  --chart-c09: #4d7c0f;   /* Olive */
  --chart-c10: #475569;   /* Slate Grau */
  --chart-c11: #ed8a8e;   /* Rot hell (Akzent-300) */
  --chart-c12: #6ea8e0;   /* Hell-Blau */
  --chart-c13: #94c794;   /* Sage Gruen */
  --chart-c14: #f3c876;   /* Hell-Bernstein */
  --chart-c15: #c79be0;   /* Lavendel */
  --chart-c16: #6cc7c7;   /* Aqua */
  --chart-c17: #d4a06f;   /* Tan/Sand */
  --chart-c18: #e69ec0;   /* Rose */
  --chart-c19: #aac17e;   /* Salbei */
  --chart-c20: #8c8c8b;   /* Body-Grau (neutral) */

  /* ============ HEADER + SIDEBAR FARBEN (Welle 0.62b) ============
     Eigene Tokens fuer Header + Sub-Sidebar damit sie im Style-Guide
     unabhaengig von --color-bg/--color-text editierbar sind. Defaults
     spiegeln die teamgeist CI Welle 0.60 wider (weiss + hellgrau). */
  --header-bg:                #ffffff;       /* Top-Nav Background */
  --header-text:              #575756;       /* Tab-Text default */
  --header-text-hover:        #ce2128;       /* Tab-Text bei Hover */
  --header-text-active:       #ce2128;       /* Aktiver Tab */
  --header-border:            #d6d7dc;       /* Untere Border */
  --header-active-bg:         #f5f5f7;       /* Hintergrund aktiver Tab */
  --header-active-underline:  #ce2128;       /* Border-Bottom 3px aktiver Tab */
  --header-search-bg:         #f5f5f7;       /* Such-Input Background */
  --header-search-border:     #d6d7dc;       /* Such-Input Border */
  --header-search-focus-bg:   #ffffff;
  --header-search-focus-ring: #ce2128;
  --header-icon:              #575756;
  --header-icon-hover:        #ce2128;
  --header-icon-hover-bg:     #f5f5f7;
  --header-avatar-bg:         #ce2128;       /* Avatar-Kreis Hintergrund */
  --header-avatar-text:       #ffffff;

  --sidebar-bg:               #e8e9f0;       /* Sub-Sidebar Background */
  --sidebar-text:             #575756;       /* Item-Text default */
  --sidebar-text-hover:       #ce2128;       /* Item-Text bei Hover */
  --sidebar-hover-bg:         #ffffff;       /* Item-Hover Background */
  --sidebar-active-bg:        #ffffff;       /* Aktiver Item Background */
  --sidebar-active-text:      #ce2128;       /* Aktiver Item Text */
  --sidebar-active-border:    #ce2128;       /* Aktiver Item Left-Border 3px */
  --sidebar-border:           #d6d7dc;       /* Right-Border zur Content-Area */
  --sidebar-group-label:      #8c8c8b;       /* Gruppen-Label "STAMMDATEN" etc. */

  /* === Semantic Color Tokens === */
  --color-error-light: #fef2f2;      /* Error Background */
  --color-success-light: #f0fdf4;    /* Success Background */
  --color-warning-light: #fffbeb;   /* Warning Background */
  --color-info-light: #f0f9ff;       /* Info Background */

  /* === Surface & Text Secondary Tokens (for sidebar & muted content) === */
  --color-text-muted: #94a3b8;       /* Muted/Secondary Text */
  --color-surface-dark: #1a1a2e;     /* Dark Surface (sidebar header) */
  --color-surface-dark-2: #16213e;   /* Darker Surface (sub-sidebar) */
  --color-surface-dark-hover: #0f3460; /* Dark Surface Hover */

  /* === Shadow Tokens === */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);

  /* === Radius Tokens — CD Manual 2022 p.32 (~2mm = 6-10px) === */
  --radius-xs: 4px;
  --radius-sm: 6px;          /* event-boxes, default */
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* === Spacing Tokens === */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* === Typography Tokens — CD Manual 2022 ===
     Display = Expressway (eckig, dynamisch). Body = Open Sans tg.
     "teamgeist" word always italic + lowercase (Klasse .tg-name) */
  --font-body: 'Open Sans tg', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Expressway', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Monaco', 'Courier New', monospace;

  /* Font Sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 22px;
  --font-size-3xl: 28px;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* === Layout Tokens === */
  --topbar-height: 56px;
  --sidebar-width: 240px;
  --content-max-width: 1400px;

  /* === Transitions === */
  --transition-fast: 0.1s ease-in-out;
  --transition-base: 0.2s ease-in-out;
  --transition-slow: 0.3s ease-in-out;

  /* === Z-Index Stack === */
  --z-dropdown: 1000;
  --z-sticky: 100;
  --z-fixed: 200;
  --z-modal-overlay: 500;
  --z-modal: 510;
  --z-tooltip: 520;
  --z-notification: 530;

  /* === Layout-Tokens (Welle 0.59 / Cluster B) === */
  --layout-header-height: 48px;
  --layout-sidebar-width: 196px;
  --layout-tab-padding-h: 0.7rem;
  --layout-sidebar-item-padding: 0.37rem 1rem;
  --layout-userdropdown-min-width: 168px;
  --layout-content-max-width: 100%;
  --layout-sidebar-label-padding: 0.55rem 1rem 0.2rem;
}

/* === Accessibility: Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0s;
    --transition-base: 0s;
    --transition-slow: 0s;
  }
}

/* ============ ELEMENT DEFAULTS — CD Manual ============
   Body in Open Sans tg, 80%-grau (#575756, NIE pure black).
   Headings in Expressway. */
html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .tg-display {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); font-weight: 600; }
h5 { font-size: var(--font-size-base); font-weight: 600; }

/* "teamgeist" Wortmarke — IMMER lowercase + italic (CD Manual) */
.tg-name { font-style: italic; text-transform: lowercase; }
.tg-name-red { color: var(--color-accent); font-style: italic; text-transform: lowercase; }

/* Eyebrow — kleine uppercase Labels in Expressway */
.tg-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* Selektion immer in teamgeist-Rot (CD-Style) */
::selection { background: var(--color-accent); color: #ffffff; }

/* === Form Field Defaults === */
input, textarea, select {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(206, 33, 40, 0.15);
}

.form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.form-row > * {
  flex: 1;
  min-width: 200px;
}

/* === Index-Card Component === */
.index-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  overflow: hidden;
}

.index-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
}

.index-card-body {
  padding: 16px 20px;
  flex: 1;
}

.index-card-title {
  margin: 0 0 6px 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
}

.index-card-desc {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-normal);
}

.index-card-footer {
  padding: 8px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.index-card-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.03em;
}

.index-card-badge--live {
  background: var(--color-success-light);
  color: var(--color-success);
}

.index-card-badge--partial {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.index-card-badge--coming {
  background: var(--color-surface);
  color: var(--color-text-light);
}

/* === KPI-Card Component === */
.kpi-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
}

.kpi-card--neutral  { border-left-color: #94a3b8; }
.kpi-card--success  { border-left-color: #16a34a; }
.kpi-card--warning  { border-left-color: #ca8a04; }
.kpi-card--error    { border-left-color: var(--color-accent); }

.kpi-card-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-light);
  margin-bottom: 6px;
}

.kpi-card-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-strong);
  line-height: var(--line-height-tight);
}

.kpi-card-sub {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  margin-top: 4px;
}

/* === Dark Mode Support (future-ready) === */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1a1a;
    --color-surface: #2d2d2d;
    --color-surface-hover: #3a3a3a;
    --color-border: #3a3a3a;
    --color-border-dark: #4a4a4a;
    --color-text: #e0e0e0;
    --color-text-strong: #ffffff;
    --color-text-light: #a0a0a0;
    --color-text-muted: #7a8a9e;
    --color-error-light: #3f0f0f;
    --color-success-light: #0f3f1f;
    --color-warning-light: #3f2f0f;
    --color-info-light: #0f2f3f;
    --color-surface-dark: #0f1116;
    --color-surface-dark-2: #0d1017;
    --color-surface-dark-hover: #1a1f2e;
  }
}

/* === Compare Pair & Table Components (Welle 0.59) === */

.compare-pair {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
  border-left-width: 4px;
}

.compare-pair.compare-positive {
  border-left-color: var(--color-success);
  background: linear-gradient(90deg, rgba(22, 163, 74, 0.05) 0%, transparent 100%);
}

.compare-pair.compare-negative {
  border-left-color: var(--color-accent);
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0%, transparent 100%);
}

.compare-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-light);
  margin-bottom: 12px;
}

.compare-values {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
}

.compare-col {
  text-align: center;
}

.compare-col-header {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-light);
  margin-bottom: 8px;
}

.compare-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-strong);
  line-height: var(--line-height-tight);
}

.compare-delta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.compare-delta-arrow {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.compare-pair.compare-positive .compare-delta-arrow {
  color: var(--color-success);
}

.compare-pair.compare-negative .compare-delta-arrow {
  color: var(--color-accent);
}

/* Welle 0.60: dynamische Pfeil-Staerke nach Magnitude des Deltas */
.compare-pair.arrow-thin   .compare-delta-arrow { font-size: 1.1rem; font-weight: 400; }
.compare-pair.arrow-medium .compare-delta-arrow { font-size: 1.5rem; font-weight: 600; }
.compare-pair.arrow-bold   .compare-delta-arrow { font-size: 2.1rem; font-weight: 800; text-shadow: 0 0 1px currentColor; }

.compare-delta-value {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.compare-delta-value > div:first-child {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
}

.compare-delta-percent {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-light);
}

/* === Compare Table === */

.compare-table {
  width: 100%;
}

.compare-table-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
  margin-bottom: 12px;
}

.compare-table-grid {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.compare-table-header-row {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.compare-table-header-row th {
  padding: 12px 16px;
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-light);
  border-right: 1px solid var(--color-border);
}

.compare-table-header-row th:last-child {
  border-right: none;
}

.compare-table-row {
  border-bottom: 1px solid var(--color-border);
  border-left: 4px solid transparent;
}

.compare-table-row:last-child {
  border-bottom: none;
}

.compare-table-row.compare-table-row-positive {
  border-left-color: var(--color-success);
  background: linear-gradient(90deg, rgba(22, 163, 74, 0.03) 0%, transparent 100%);
}

.compare-table-row.compare-table-row-negative {
  border-left-color: var(--color-accent);
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.03) 0%, transparent 100%);
}

.compare-table-row td {
  padding: 12px 16px;
  border-right: 1px solid var(--color-border);
  color: var(--color-text-strong);
  font-size: var(--font-size-sm);
}

.compare-table-row td:last-child {
  border-right: none;
}

.compare-table-label-col {
  text-align: left;
  width: 30%;
}

.compare-table-label {
  font-weight: var(--font-weight-semibold);
}

.compare-table-value-col {
  text-align: right;
  width: 20%;
}

.compare-table-value {
  text-align: right;
  font-weight: var(--font-weight-medium);
}

.compare-table-delta-col {
  text-align: right;
  width: 15%;
}

.compare-table-delta {
  text-align: right;
}

.compare-table-delta-value {
  font-weight: var(--font-weight-semibold);
}

.compare-table-percent-col {
  text-align: center;
  width: 12%;
}

.compare-table-percent {
  text-align: center;
}

.compare-table-percent-value {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
}

.compare-table-trend-col {
  text-align: center;
  width: 8%;
}

.compare-table-arrow {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.compare-table-row.compare-table-row-positive .compare-table-arrow {
  color: var(--color-success);
}

.compare-table-row.compare-table-row-negative .compare-table-arrow {
  color: var(--color-accent);
}

/* Welle 0.60: dynamische Pfeil-Staerke pro Tabellen-Zeile */
.compare-table-row.arrow-thin   .compare-table-arrow { font-size: 0.95rem; font-weight: 400; }
.compare-table-row.arrow-medium .compare-table-arrow { font-size: 1.2rem;  font-weight: 600; }
.compare-table-row.arrow-bold   .compare-table-arrow { font-size: 1.6rem;  font-weight: 800; text-shadow: 0 0 1px currentColor; }

/* Welle 0.60: Status-Spalte in Tabellen zentrieren */
table th, table td {
  /* default: belassen — nur dezent untereinander */
}
table td:has(.index-card-badge),
table th.status-col,
table td.status-col {
  text-align: center;
  vertical-align: middle;
}
.index-card-badge {
  text-align: center;
  min-width: 70px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .compare-values {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .compare-table-grid {
    font-size: var(--font-size-xs);
  }

  .compare-table-row td {
    padding: 10px 8px;
  }

  .compare-table-label-col {
    width: auto;
  }

  .compare-table-value-col,
  .compare-table-delta-col,
  .compare-table-percent-col,
  .compare-table-trend-col {
    width: auto;
  }
}