/* ============================================================
   ComAI Research Dashboards · gemeinsames Design-System
   Optik angelehnt an comai.space (Navy #00326d, Blau #0068b4,
   Rosé #f39ca9, Bordeaux #9d2246, Teal #008878, Amber #f7a600).
   Läuft komplett offline: Systemschriften, keine externen Fonts.
   Akzentfarbe pro Dashboard über body[data-accent="…"].
   ============================================================ */

:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
          Ubuntu, Cantarell, "Fira Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* comai.space-Palette */
  --navy:  #00326d;
  --blue:  #0068b4;
  --sky:   #89b4e1;
  --rose:  #f39ca9;
  --wine:  #9d2246;
  --amber: #f7a600;
  --teal:  #008878;
  --mint:  #8acbb7;
  --lilac: #bebde0;
  --leaf:  #c1ddb4;

  --radius: 14px;
  --radius-sm: 10px;
  --gap: 20px;
  --maxw: 1280px;
  --ease: cubic-bezier(.2, 0, 0, 1);
}

/* ---- Light (Default) ---- */
body[data-theme="light"] {
  --bg:               #f5f6f8;
  --surface:          #ffffff;
  --surface-2:        #f8f9fb;
  --surface-3:        #edf0f4;
  --on-surface:       #1d2129;
  --on-surface-muted: #5b616c;
  --heading:          var(--navy);
  --outline:          #d8dce3;
  --outline-soft:     #e7eaef;
  --grid-line:        #ebedf1;
  --shadow:    0 1px 2px rgba(0, 50, 109, .05), 0 1px 3px rgba(0, 50, 109, .08);
  --shadow-lg: 0 4px 14px rgba(0, 50, 109, .10), 0 2px 6px rgba(0, 50, 109, .06);
  --ins-bg: #d6f5e0; --ins-fg: #075e34;
  --del-bg: #fcdcdc; --del-fg: #8a1c1c;
}

/* ---- Dark ---- */
body[data-theme="dark"] {
  --bg:               #10141b;
  --surface:          #1a1f28;
  --surface-2:        #212734;
  --surface-3:        #2a3140;
  --on-surface:       #e6e8ec;
  --on-surface-muted: #9aa1ad;
  --heading:          #cfe0f5;
  --outline:          #39414f;
  --outline-soft:     #2a3140;
  --grid-line:        #29303d;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5);
  --shadow-lg: 0 6px 18px rgba(0,0,0,.5);
  --ins-bg: #12492f; --ins-fg: #7ff0ab;
  --del-bg: #5a1e1e; --del-fg: #ffb3b3;
}

/* ---- Akzente pro Dashboard ---- */
body[data-accent="blue"] {
  --accent:        var(--blue);
  --accent-strong: var(--navy);
  --accent-soft:   rgba(0, 104, 180, .12);
  --accent-on:     #ffffff;
}
body[data-accent="rose"] {
  --accent:        var(--wine);
  --accent-strong: #6d1730;
  --accent-soft:   rgba(243, 156, 169, .22);
  --accent-on:     #ffffff;
}
body[data-accent="teal"] {
  --accent:        var(--teal);
  --accent-strong: #00574e;
  --accent-soft:   rgba(138, 203, 183, .25);
  --accent-on:     #ffffff;
}
body[data-accent="amber"] {
  --accent:        #c78500;
  --accent-strong: #8a5c00;
  --accent-soft:   rgba(247, 166, 0, .16);
  --accent-on:     #ffffff;
}
body[data-theme="dark"][data-accent="blue"]  { --accent: #64aee6; --accent-strong: #a9cdf0; --accent-soft: rgba(100,174,230,.16); --accent-on:#0c1930; }
body[data-theme="dark"][data-accent="rose"]  { --accent: #f39ca9; --accent-strong: #f8c1ca; --accent-soft: rgba(243,156,169,.16); --accent-on:#3d0d1a; }
body[data-theme="dark"][data-accent="teal"]  { --accent: #6fcdb8; --accent-strong: #a5e0d2; --accent-soft: rgba(111,205,184,.16); --accent-on:#04302a; }
body[data-theme="dark"][data-accent="amber"] { --accent: #f7b733; --accent-strong: #fbd170; --accent-soft: rgba(247,183,51,.16); --accent-on:#3a2a00; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--on-surface);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background .3s var(--ease), color .3s var(--ease);
}

/* ---------------- Farbstreifen (comai-Palette) ---------------- */
.palette-stripe {
  display: flex; height: 5px; width: 100%;
}
.palette-stripe span { flex: 1; }
.palette-stripe span:nth-child(1) { background: var(--navy); }
.palette-stripe span:nth-child(2) { background: var(--blue); }
.palette-stripe span:nth-child(3) { background: var(--sky); }
.palette-stripe span:nth-child(4) { background: var(--mint); }
.palette-stripe span:nth-child(5) { background: var(--teal); }
.palette-stripe span:nth-child(6) { background: var(--leaf); }
.palette-stripe span:nth-child(7) { background: var(--amber); }
.palette-stripe span:nth-child(8) { background: var(--rose); }
.palette-stripe span:nth-child(9) { background: var(--wine); }

/* ---------------- App-Bar ---------------- */
.appbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 12px clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--outline-soft);
}
.appbar__lead { display: flex; align-items: center; gap: 14px; min-width: 0; }
.appbar__logo {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
}
.appbar__heading { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.appbar__title {
  margin: 0; font-size: 1.1rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--heading); white-space: nowrap;
}
.appbar__kicker {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent);
}
.appbar__period {
  font-size: .76rem; font-weight: 700; white-space: nowrap;
  color: var(--accent); background: var(--accent-soft);
  padding: 3px 11px; border-radius: 999px;
}
.appbar__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Navigation zwischen den Dashboards */
.nav-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--outline);
  background: var(--surface-2); color: var(--on-surface-muted);
  font-size: .78rem; font-weight: 600; text-decoration: none;
  transition: all .18s var(--ease); white-space: nowrap;
}
.nav-pill:hover { border-color: var(--accent); color: var(--accent); }
.nav-pill.active {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-on);
}
.nav-pill__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

.icon-btn {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: none; cursor: pointer;
  background: transparent; color: var(--on-surface);
  transition: background .2s var(--ease);
}
.icon-btn:hover { background: var(--surface-3); }
.icon-btn svg { display: none; }
body[data-theme="light"] .theme-icon-dark  { display: block; }
body[data-theme="dark"]  .theme-icon-light { display: block; }

/* ---------------- Layout ---------------- */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--gap) clamp(16px, 4vw, 40px) 64px;
  display: flex; flex-direction: column; gap: var(--gap);
}

/* Intro-Zeile unter der App-Bar (wie Seitenkopf auf comai.space) */
.pagehead { padding-top: 10px; }
.pagehead h1, .pagehead__title {
  margin: 0 0 6px; font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800; letter-spacing: -.02em; color: var(--heading);
}
.pagehead p { margin: 0; max-width: 74ch; color: var(--on-surface-muted); font-size: .92rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--outline-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.card__head { margin-bottom: 14px; }
.card__head--row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.card__num {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; color: var(--accent);
}
.card__title {
  margin: 0; font-size: 1.02rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--heading);
}
.card__hint { margin: 4px 0 0; font-size: .82rem; color: var(--on-surface-muted); }

.grid-2 { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 880px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------------- KPIs ---------------- */
.kpi-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 880px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .kpi-grid { grid-template-columns: 1fr; } }

.kpi {
  background: var(--surface);
  border: 1px solid var(--outline-soft);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 16px 20px 14px;
}
.kpi__value {
  font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.15; color: var(--heading); overflow-wrap: anywhere;
}
.kpi__label { margin-top: 4px; font-size: .8rem; color: var(--on-surface-muted); }
.kpi__sub   { margin-top: 2px; font-size: .72rem; color: var(--on-surface-muted); opacity: .8; }

/* ---------------- Controls / Chips ---------------- */
.card--controls { padding: 16px 22px; }
.controls__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.controls__label { font-size: .85rem; font-weight: 600; color: var(--on-surface-muted); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  border: 1px solid var(--outline);
  background: var(--surface-2); color: var(--on-surface);
  font-size: .83rem; font-weight: 600; cursor: pointer;
  transition: all .18s var(--ease); user-select: none;
  font-family: inherit;
}
.chip__dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.chip[aria-pressed="false"] { opacity: .4; }
.chip[aria-pressed="false"] .chip__dot { filter: grayscale(1); }
.chip:hover { border-color: var(--accent); }

/* kleine Umschalter (z. B. % / Anzahl) */
.seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--surface-3); }
.seg button {
  border: none; border-radius: 999px; padding: 5px 13px;
  font: 600 .78rem var(--font); color: var(--on-surface-muted);
  background: transparent; cursor: pointer; transition: all .15s var(--ease);
}
.seg button.active { background: var(--accent); color: var(--accent-on); }

/* Sprachumschalter in der Kopfleiste (DE|EN) — etwas kompakter als die
   Umschalter in den Karten, damit er neben den Nav-Pills nicht aufträgt.
   Die Knöpfe baut shared.js in den Platzhalter #langSwitch. */
/* Leer, solange shared.js die Knoepfe noch nicht gesetzt hat — sonst blitzt
   fuer einen Frame eine leere Pille auf. */
.seg--lang:empty { display: none; }
.seg--lang { flex: none; align-self: center; }
.seg--lang button {
  min-width: 34px; padding: 5px 10px;
  font-size: .74rem; letter-spacing: .05em;
}
.seg--lang button:hover:not(.active) { color: var(--accent); }

/* Auswahl-Pills (Entitäten, Issues …) */
.pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 116px; overflow-y: auto; padding: 8px;
  background: var(--surface-2); border: 1px solid var(--outline-soft);
  border-radius: var(--radius-sm);
}
.pill {
  padding: 3px 11px; border-radius: 999px; font-size: .74rem; font-weight: 600;
  cursor: pointer; user-select: none;
  border: 1px solid var(--outline); color: var(--on-surface-muted);
  background: var(--surface); opacity: .55;
  transition: all .15s var(--ease); font-family: inherit;
}
.pill.on { opacity: 1; border-color: var(--pill-color, var(--accent)); color: var(--pill-color, var(--accent)); background: transparent; }
.pill:hover { opacity: 1; }

/* ---------------- Charts ---------------- */
.chart { width: 100%; height: 380px; }
.chart--tall { height: 560px; }
.chart--half { height: 320px; }
@media (max-width: 560px) { .chart { height: 300px; } .chart--tall { height: 420px; } }
/* Ein einzelner Balken (Policies 02): grid top 34 + barWidth 46 + grid bottom 44.
   Steht bewusst nach der Media-Query — sonst zoege dort .chart { height: 300px }
   bei gleicher Spezifitaet per Quellreihenfolge die Hoehe wieder auf. */
.chart--flat { height: 132px; }

.legend-note { font-size: .74rem; color: var(--on-surface-muted); margin-top: 8px; }

/* Bildunterschrift unter einer Grafik */
.chart-caption {
  margin: 10px 0 0; font-size: .8rem; color: var(--on-surface-muted);
}

/* Legende unter den Zeitleisten (Policies 01 und 04).
   Zwei Gruppen: Symbolik oben, Aufschluesselung der Kuerzel darunter. */
.tl-legend {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--outline-soft);
  font-size: .74rem; color: var(--on-surface-muted);
}
.tl-legend__group { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 16px; }
.tl-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.tl-legend__item b { font-weight: 700; color: var(--on-surface); }
.tl-legend__title { font-weight: 600; }
.tl-legend__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--on-surface-muted);
}
.tl-legend__bar {
  width: 24px; height: 8px; border-radius: 3px; flex: none;
  background: var(--on-surface-muted);
}
/* Gestrichelt = Launch lag vor dem Erfassungsbeginn (offener Balkenanfang). */
.tl-legend__bar--open {
  height: 0; border-radius: 0; background: none;
  border-top: 1.5px dashed var(--on-surface-muted);
}
.tl-legend__swatch { height: 9px; border-radius: 3px; flex: none; }

/* ---------------- Formulare ---------------- */
select {
  font-family: inherit; font-size: .85rem; font-weight: 500;
  color: var(--on-surface); background: var(--surface-2);
  border: 1px solid var(--outline); border-radius: 8px;
  padding: 8px 10px; cursor: pointer; min-width: 130px;
}
input[type="range"] { accent-color: var(--accent); }

.version-pick { display: flex; flex-direction: column; gap: 6px; min-width: 220px; font-size: .76rem; color: var(--on-surface-muted); font-weight: 600; }
.version-pick__label { font-size: .78rem; }
.version-pick input[type="range"] { width: 100%; }

/* ---------------- Rising / Falling ---------------- */
.rf-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .rf-grid { grid-template-columns: 1fr; } }
.rf-col h3 {
  margin: 0 0 10px; font-size: .92rem; color: var(--heading);
  display: flex; align-items: center; gap: 6px;
}
.rf-col h3 .up { color: #1d9f6e; } .rf-col h3 .dn { color: #d05252; }
.rf-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: var(--radius-sm); margin-bottom: 6px;
  background: var(--surface-2); border: 1px solid var(--outline-soft);
  transition: border-color .2s var(--ease);
}
.rf-item:hover { border-color: var(--accent); }
.rf-rank { font-family: var(--font-mono); font-size: .68rem; color: var(--on-surface-muted); width: 1.4rem; text-align: center; }
.rf-name { flex: 1; font-size: .84rem; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.rf-badge {
  font-size: .6rem; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  margin-left: 6px; vertical-align: 1px;
  background: var(--badge-bg, var(--accent-soft)); color: var(--badge-fg, var(--accent));
}
.rf-spark { width: 86px; height: 26px; flex: none; }
.rf-delta { font-size: .8rem; font-weight: 700; min-width: 4.4rem; text-align: right; }
.rf-delta.pos { color: #1d9f6e; } .rf-delta.neg { color: #d05252; }
.rf-period { font-size: .76rem; color: var(--on-surface-muted); margin-bottom: 12px; }

/* ---------------- Diff-Viewer ---------------- */
.diff-controls { display: flex; gap: 12px; flex-wrap: wrap; }
.diff-controls label { display: flex; flex-direction: column; gap: 5px; font-size: .76rem; color: var(--on-surface-muted); font-weight: 600; }
.diff-stats { display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 14px; font-size: .82rem; color: var(--on-surface-muted); }
.diff-stats b { color: var(--on-surface); }
.ins-legend, .del-legend { padding: 1px 6px; border-radius: 5px; font-weight: 600; }
.ins-legend { background: var(--ins-bg); color: var(--ins-fg); }
.del-legend { background: var(--del-bg); color: var(--del-fg); }
.diff-output {
  max-height: 520px; overflow: auto;
  background: var(--surface-2);
  border: 1px solid var(--outline-soft); border-radius: var(--radius-sm);
  padding: 18px 20px; font-size: .9rem; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
}
.diff-output ins { background: var(--ins-bg); color: var(--ins-fg); text-decoration: none; border-radius: 4px; padding: 0 2px; }
.diff-output del { background: var(--del-bg); color: var(--del-fg); border-radius: 4px; padding: 0 2px; }
.diff-empty { color: var(--on-surface-muted); font-style: italic; }

/* ---------------- Tabellen ---------------- */
.table-wrap { overflow-x: auto; }
table.data-table { border-collapse: collapse; width: 100%; font-size: .82rem; }
.data-table th {
  text-align: left; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-surface-muted); font-weight: 700;
  padding: 8px 10px; border-bottom: 2px solid var(--outline);
  white-space: nowrap;
}
.data-table td { padding: 7px 10px; border-bottom: 1px solid var(--outline-soft); }
.data-table tr:hover td { background: var(--surface-2); }

/* ---------------- Hub (Startseite) ---------------- */
.hero { padding: 34px 0 6px; }
.hero__kicker {
  font-size: .72rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue);
}
body[data-theme="dark"] .hero__kicker { color: var(--sky); }
.hero h1 {
  margin: 8px 0 12px; font-size: clamp(1.8rem, 4.5vw, 2.7rem);
  font-weight: 800; letter-spacing: -.025em; color: var(--heading); max-width: 24ch;
}
.hero p { margin: 0; max-width: 72ch; color: var(--on-surface-muted); font-size: .98rem; }

.hub-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; }
@media (max-width: 980px) { .hub-grid { grid-template-columns: 1fr; } }

.hub-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--outline-soft);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.hub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--hub-accent); }
.hub-card__visual {
  height: 130px; position: relative;
  display: flex; align-items: flex-end; gap: 6px;
  padding: 18px 22px 0;
  background: var(--hub-tint);
}
.hub-card__visual .bar { flex: 1; border-radius: 4px 4px 0 0; background: var(--hub-accent); opacity: .85; }
.hub-card__body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hub-card__num {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; color: var(--hub-accent);
}
.hub-card__title { margin: 0; font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; color: var(--heading); }
.hub-card__desc { margin: 0; font-size: .85rem; color: var(--on-surface-muted); flex: 1; }
.hub-card__cta { font-size: .85rem; font-weight: 700; color: var(--hub-accent); }

/* ---------------- Footer ---------------- */
.footer {
  color: var(--on-surface-muted); font-size: .78rem; text-align: center;
  padding-top: 16px; border-top: 1px solid var(--outline-soft);
}
.footer a { color: var(--accent, var(--blue)); text-decoration: none; font-weight: 600; }

/* Scrollbars dezent */
.pills::-webkit-scrollbar, .diff-output::-webkit-scrollbar { width: 8px; height: 8px; }
.pills::-webkit-scrollbar-thumb, .diff-output::-webkit-scrollbar-thumb { background: var(--outline); border-radius: 8px; }