/* ===========================================================================
   Trainer-Cockpit — Hülle, Navigation, Seitenmuster
   ---------------------------------------------------------------------------
   Dicht und scanbar. Der Trainer sitzt hier zwischen zwei Schulungen und will
   in fünf Sekunden sehen, was los ist: wer telefoniert gerade, was hat das
   heute gekostet, welches Gespräch muss ich nachbesprechen.
   =========================================================================== */

.admin-header {
  background: color-mix(in oklch, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 clamp(var(--space-4), 3vw, var(--space-8));
  display: flex;
  align-items: center;
  gap: clamp(var(--space-3), 2.5vw, var(--space-6));
  height: 3.25rem;
  position: sticky;
  top: 0;
  z-index: 20;
}
.admin-header .brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: "Bricolage", system-ui, sans-serif;
  font-weight: 700;
  color: var(--ink);
  font-size: 1.125rem;
  letter-spacing: -0.04em;
  text-decoration: none;
}
.admin-header .brand:hover { color: var(--brand); }
.admin-header .brand-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--brand);
  align-items: center;
  justify-content: center;
}
.admin-header .brand-icon svg { display: block; }

/* Navigation: kein Pillen-Karussell, sondern eine Linie unter dem aktiven
   Punkt — dieselbe Leitung wie überall sonst. Wird es eng, scrollt nur die
   Navigation; Hilfe, Design und Konto bleiben immer sichtbar. */
.admin-nav {
  display: flex;
  align-items: stretch;
  height: 100%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink-2);
  font-size: var(--step--1);
  font-weight: 600;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.admin-nav a::after {
  content: "";
  position: absolute;
  left: var(--space-3); right: var(--space-3); bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.admin-nav a:hover { color: var(--ink); }
.admin-nav a:hover::after { transform: scaleX(0.35); }
.admin-nav a.active { color: var(--ink); }
/* Die aktive Registerkarte trägt ein echtes Element statt ::after — siehe
   layouts/admin.ejs. Beim Seitenwechsel verschiebt der Browser es von der alten
   zur neuen Position (theme.css, ::view-transition-group). */
.admin-nav a.active::after { display: none; }
.nav-indicator {
  position: absolute;
  left: var(--space-3); right: var(--space-3); bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--brand);
  view-transition-name: rufi-nav-indicator;
}
.admin-nav a:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; border-radius: var(--radius-sm); }

/* Rechts: zwei Symbolknöpfe und der Avatar. */
.header-right { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-1); }
.header-icon {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.header-icon:hover,
.header-menu[open] > .header-icon { background: var(--surface-2); color: var(--ink); }
.header-icon.active { color: var(--brand); }
.header-icon:focus-visible,
.user-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.header-menu { position: relative; }
.header-menu > summary { list-style: none; }
.header-menu > summary::-webkit-details-marker { display: none; }

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: var(--space-1);
  padding: 0.2rem 0.4rem 0.2rem 0.2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.user-chip:hover,
.user-menu[open] > .user-chip { border-color: var(--border-strong); background: var(--surface-2); }
.user-chip.active { border-color: var(--brand); }
.user-avatar {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.user-avatar-lg { width: 2.25rem; height: 2.25rem; font-size: 0.85rem; }
.user-chevron { display: inline-flex; color: var(--ink-3); transition: transform var(--dur-fast) var(--ease-out); }
.user-menu[open] .user-chevron { transform: rotate(180deg); }

.menu-popover,
.theme-popover {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  z-index: 30;
}
/* Menüs klappen aus dem Knopf heraus auf, statt einzuspringen. Schließen bleibt
   sofort: Wer ein Menü zumacht, will weiter. */
.header-menu[open] > .menu-popover,
.header-menu[open] > .theme-popover {
  transform-origin: top right;
  animation: rufi-pop-in var(--dur-fast) var(--ease-out) both;
}
@keyframes rufi-pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.menu-popover { width: 16.5rem; max-width: calc(100vw - 2 * var(--space-4)); padding: var(--space-2); display: grid; gap: 1px; }
.menu-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--border);
}
.menu-identity { display: grid; min-width: 0; }
.menu-email { font-size: var(--step--1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-role { font-size: 0.72rem; color: var(--ink-3); }
.menu-section {
  margin: var(--space-2) var(--space-2) var(--space-1);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0.45rem var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-item svg { color: var(--ink-3); flex: 0 0 auto; }
.menu-item:hover,
.menu-item:focus-visible { background: var(--surface-2); outline: none; }
.menu-item.active { background: var(--brand-soft); color: var(--brand-dark); }
.menu-item.active svg { color: var(--brand); }
.menu-logout { margin: var(--space-1) 0 0; padding-top: var(--space-1); border-top: 1px solid var(--border); }

.theme-popover { padding: var(--space-3); min-width: 15rem; }
.theme-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; }
.theme-row button {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: var(--radius-sm);
  padding: 0.25em 0.7em;
  font-size: var(--step--1);
  cursor: pointer;
}
.theme-row button:hover { border-color: var(--brand); color: var(--brand); }
.theme-label { color: var(--ink-3); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; flex: 0 0 4rem; font-weight: 600; }
.swatch { width: 1.4rem; height: 1.4rem; padding: 0 !important; border-radius: 50% !important; border: 2px solid transparent !important; }
.swatch-magenta { background: #E20074 !important; }
.swatch-indigo  { background: #4F46E5 !important; }
.swatch-emerald { background: #059669 !important; }
.swatch-amber   { background: #D97706 !important; }

.admin-main {
  max-width: 78rem;
  margin: clamp(var(--space-6), 4vh, var(--space-8)) auto var(--space-12);
  padding: 0 clamp(var(--space-4), 3vw, var(--space-8));
}

/* Seitenkopf: Titel links, Aktionen rechts, darunter eine Haarlinie. */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.page-header h1 { margin: 0; font-size: var(--step-2); }
.page-header .subtitle { color: var(--ink-2); font-size: var(--step--1); margin-top: var(--space-2); max-width: 62ch; }
.page-header .actions { margin-top: 0; }

/* Werkzeugleiste über Listen: Suche links, Filter und Zähler rechts. */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.toolbar .list-search { margin: 0; flex: 1 1 18rem; }
.toolbar .count { color: var(--ink-3); font-size: var(--step--1); margin-left: auto; white-space: nowrap; }

.list-search { display: flex; align-items: center; gap: var(--space-2); }
.list-search input {
  flex: 1;
  min-width: 12rem;
  padding: 0.5em 0.8em;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.list-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* Filter-Chips — ein Klick, kein Dropdown. */
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chip {
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--ink-2);
  border-radius: 100px;
  padding: 0.25em 0.8em;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Datenzeilen statt Tabelle, wo eine Zeile mehr als Text trägt. */
.rows { display: grid; gap: var(--space-2); }
.row-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5, 1.25rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.row-card:hover { border-color: var(--border-strong); }
.row-card .row-main { min-width: 0; }
.row-card h3 { margin: 0 0 var(--space-1); font-size: var(--step-0); }
.row-card h3 a { color: inherit; text-decoration: none; }
.row-card h3 a:hover { color: var(--brand); }
.row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  color: var(--ink-3);
  font-size: var(--step--1);
  align-items: center;
}
.row-meta .sep { opacity: 0.4; }
.row-actions { display: flex; gap: var(--space-2); align-items: center; justify-content: flex-end; }

/* Kennzahl-Block: eine Zahl, die etwas bedeutet, mit Kontext darunter. */
.stat { display: grid; gap: var(--space-1); }
.stat-value {
  font-family: "Bricolage", system-ui, sans-serif;
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label { color: var(--ink-3); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.02em; }
.stat-foot { color: var(--ink-3); font-size: var(--step--1); }

.stars { color: var(--brand); letter-spacing: 0.08em; }
.stars .empty { color: var(--border-strong); }

.c-table .row-title { display: block; }
.c-table .row-title strong { font-size: var(--step--1); }
.c-table .row-title small { color: var(--ink-3); font-size: var(--step--1); }
.c-table .actions-cell { text-align: right; white-space: nowrap; }
.c-table .actions-cell form { display: inline; }

form.form-page { max-width: 46rem; }
form.form-page h2 {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--step-1);
}
form.form-page h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.section-title { font-family: "Bricolage", system-ui, sans-serif; }

@media (max-width: 52rem) {
  .admin-header { gap: var(--space-2); padding-inline: var(--space-3); }
  .admin-nav a { padding: 0 var(--space-2); }
  .admin-nav a::after,
  .nav-indicator { left: var(--space-2); right: var(--space-2); }
  .row-card { grid-template-columns: 1fr; }
  .row-actions { justify-content: flex-start; }
}

/* === Anmeldung ============================================================
   Zwei Hälften: links die Arbeit, rechts der Grund. Die rechte Seite ist der
   einzige Ort im Produkt, an dem ein Bild stehen darf — hier entscheidet sich
   in zwei Sekunden, ob das Werkzeug ernst genommen wird.
   ========================================================================= */

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(22rem, 30rem) 1fr;
  background: var(--bg);
}

.login-form-col {
  display: flex;
  flex-direction: column;
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.login-brand .brand-mark {
  width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  color: var(--brand);
}
.login-brand .brand-mark svg { display: block; }
.login-brand .brand-name {
  font-family: "Bricolage", system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.04em;
  color: var(--ink);
}

.login-form-wrap {
  margin: auto 0;
  padding: var(--space-8) 0;
  max-width: 24rem;
  width: 100%;
}
.login-form-wrap h1 {
  font-size: var(--step-2);
  margin-bottom: var(--space-2);
}
.login-form-wrap > .muted { margin-bottom: var(--space-6); }
.login-form { margin-top: var(--space-6); }
.login-submit { width: 100%; justify-content: center; padding: 0.8em 1em; margin-top: var(--space-2); }

.login-foot {
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
  font-size: var(--step--1);
  color: var(--ink-3);
  line-height: 1.5;
}
.login-foot .dot { opacity: 0.4; margin: 0 0.3em; }

/* --- Die rechte Hälfte --------------------------------------------------- */

/* Der Anrufer steht über dem Text, nicht dahinter. Als Tapete hinter der
   Schrift braucht ein Bild einen Verlauf, der es ersäuft — dann kann man es
   auch weglassen. Also: oben die Figur, unten die Aussage. */
.login-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: clamp(var(--space-6), 4vw, var(--space-12));
  /* exakt der Hintergrund des Renders — so hat das Bild keine sichtbare Kante */
  background: oklch(25.1% 0.038 354);
  color: oklch(96% 0.008 340);
  isolation: isolate;
}

/* Bild und Video liegen übereinander: das Bild ist sofort da, das Video legt
   sich darüber, sobald es laufen kann. Wer Bewegung reduziert haben will,
   bekommt nur das Bild. Die Figur nimmt, was der Text übrig lässt — auf
   niedrigen Fenstern schrumpft sie, statt den Text zu schieben. */
.login-hero-media {
  position: absolute;
  right: clamp(-1rem, 5vw, 6rem);
  top: 50%;
  translate: 0 -50%;
  height: clamp(17rem, 98vh, 62rem);
  aspect-ratio: 1;
  z-index: -2;
}
.login-hero-media img,
.login-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Der Render bringt seinen eigenen dunklen Hintergrund mit. Die Maske lässt
     ihn zum Rand hin auslaufen, damit keine quadratische Kante stehen bleibt. */
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 96%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 96%);
}
.login-hero-media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.login-hero-media video.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .login-hero-media video { display: none; }
}

/* Ein Lichtkegel hinter der Figur — die Bühne, auf der sie steht. */
.login-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse 56% 50% at 66% 48%, oklch(46% 0.10 350 / 0.45), transparent 74%),
    linear-gradient(to bottom, transparent 40%, oklch(17% 0.028 350 / 0.85) 100%);
}

/* Die Figur darf unter den Text laufen. Damit die Schrift trotzdem steht,
   liegt zwischen beiden ein Schleier, der nach rechts durchsichtig wird. */
.login-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to right,
    oklch(25.1% 0.038 354) 0%,
    oklch(25.1% 0.038 354) 30%,
    oklch(25.1% 0.038 354 / 0.74) 50%,
    transparent 78%);
}

.login-hero-inner { max-width: 28rem; position: relative; }
@media (min-width: 62rem) { .login-hero-inner { min-width: 31rem; } }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(80% 0.12 350);
  margin-bottom: var(--space-6);
}
.hero-badge::before {
  content: "";
  width: 3rem; height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: draw-line var(--dur-slow) var(--ease-out) both;
}

/* Überschriften erben im Theme die Text-Farbe — auf der dunklen Bühne
   wäre das fast unsichtbares Dunkelgrau auf Schwarz. Hier gilt die Farbe
   der Bühne, nicht die des Dokuments. */
.login-hero h1, .login-hero h2, .login-hero h3 { color: inherit; }

.hero-headline {
  font-family: "Bricolage", system-ui, sans-serif;
  width: max-content;
  max-width: 31rem;
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0 0 var(--space-4);
  /* Die Überschrift bricht an ihren eigenen <br>, nicht an der Spaltenbreite:
     sie darf breiter werden als der Fließtext darunter. */
  width: max-content;
  max-width: min(31rem, 100%);
}
.hero-sub {
  font-size: var(--step-1);
  line-height: 1.45;
  color: oklch(82% 0.015 340);
  max-width: 38ch;
  margin: 0 0 var(--space-6);
}

/* Drei Aussagen, getrennt durch Haarlinien. Keine Icon-Kärtchen. */
.hero-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid oklch(100% 0 0 / 0.14);
  max-width: 28rem;
}
.hero-features li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: 1px solid oklch(100% 0 0 / 0.14);
}
.hero-features .hero-num {
  font-family: "Bricolage", system-ui, sans-serif;
  font-size: var(--step--1);
  font-weight: 700;
  color: oklch(72% 0.16 350);
  font-variant-numeric: tabular-nums;
}
.hero-features strong {
  display: block;
  font-size: var(--step-0);
  font-weight: 600;
  margin-bottom: 0.15em;
}
.hero-features span {
  color: oklch(76% 0.015 340);
  font-size: var(--step--1);
  line-height: 1.45;
}

.theme-picker-mini {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  display: flex;
  gap: var(--space-2);
  z-index: 2;
}
.theme-picker-mini button {
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  border: 2px solid oklch(100% 0 0 / 0.3);
  cursor: pointer;
  padding: 0;
}
.theme-picker-mini button:hover { border-color: oklch(100% 0 0 / 0.8); }

@media (max-width: 62rem) {
  .login-shell { grid-template-columns: 1fr; }
  .login-hero { order: -1; min-height: 16rem; padding: var(--space-6); }
  .hero-features { display: none; }
  .hero-headline { width: auto; max-width: 100%; }
  .hero-sub { display: none; }
  .login-form-col { border-right: 0; }
}

/* === Generic overlay spinner (KI-Autor + future async actions) === */
.gen-overlay[hidden] { display: none !important; }
.gen-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: grid;
  place-items: center;
  z-index: 100;
  backdrop-filter: blur(4px);
  animation: genOverlayIn 200ms ease-out;
}
@keyframes genOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.gen-overlay-card {
  background: var(--surface);
  color: var(--ink);
  border-radius: 12px;
  padding: 32px 40px;
  max-width: 420px;
  text-align: center;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}
.gen-overlay-card h3 { margin: 16px 0 8px; color: var(--ink); }
.gen-overlay-card p.muted { margin: 0; }
.gen-spinner {
  display: inline-flex;
  gap: 8px;
  margin-bottom: 4px;
}
.gen-spinner span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  animation: genBounce 1.2s infinite ease-in-out both;
}
.gen-spinner span:nth-child(2) { animation-delay: 0.18s; }
.gen-spinner span:nth-child(3) { animation-delay: 0.36s; }
@keyframes genBounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
  40% { transform: scale(1.0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gen-spinner span { animation: none; opacity: 0.7; }
}

/* === Docs page === */
.docs-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
}
.docs-toc {
  position: sticky;
  top: 80px;
  font-size: 13px;
  border-left: 2px solid var(--border);
  padding-left: 16px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.docs-toc h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  margin: 16px 0 8px;
  font-weight: 600;
}
.docs-toc h4:first-child { margin-top: 0; }
.docs-toc a {
  display: block;
  padding: 4px 0;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
}
.docs-toc a:hover { color: var(--brand-dark); }

.docs-content { max-width: 740px; line-height: 1.65; }
.docs-content section { margin-bottom: 48px; scroll-margin-top: 80px; }
.docs-content h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.docs-content h2 .anchor { color: var(--ink-3); margin-right: 6px; font-weight: 400; }
.docs-content h3 { font-size: 16px; margin: 24px 0 8px; }
.docs-content p { color: var(--ink); margin: 8px 0; }
.docs-content ul, .docs-content ol { padding-left: 22px; margin: 8px 0; }
.docs-content li { margin: 4px 0; }
.docs-content code {
  background: var(--surface-3);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
}
.docs-callout {
  background: var(--brand-soft);
  border-left: 3px solid var(--brand);
  padding: 12px 14px;
  border-radius: 0 8px 8px 0;
  margin: 16px 0;
  font-size: 14px;
  color: var(--ink);
}
.docs-callout.warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn-ink); }
.docs-callout.tip strong { color: var(--brand-dark); }
.docs-callout.warn strong { color: var(--warn-ink); }

.docs-mock {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
}
.docs-mock-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.docs-bubble {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 14px;
  margin: 4px 0;
  max-width: 80%;
  line-height: 1.4;
}
.docs-bubble.ai {
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.docs-bubble.trainee {
  background: var(--brand);
  color: white;
  border-bottom-right-radius: 4px;
  margin-left: auto;
  display: block;
  width: fit-content;
}
.docs-faq summary {
  font-weight: 600;
  cursor: pointer;
  padding: 12px 0;
  color: var(--ink);
  list-style: none;
  border-bottom: 1px solid var(--border);
}
.docs-faq summary::-webkit-details-marker { display: none; }
.docs-faq summary::before { content: '➕ '; color: var(--ink-3); margin-right: 6px; }
.docs-faq[open] summary::before { content: '➖ '; }
.docs-faq[open] summary { color: var(--brand-dark); }
.docs-faq p { padding: 8px 0 16px; color: var(--ink-2); }

.docs-mini-nps {
  display: flex;
  gap: 3px;
  margin: 12px 0 8px;
}
.docs-mini-nps span {
  flex: 1;
  height: 10px;
  border-radius: 3px;
}
.docs-mini-nps .d { background: var(--danger-soft); }
.docs-mini-nps .p { background: var(--warn-soft); }
.docs-mini-nps .o { background: var(--success-soft); }
.docs-mini-nps-axis {
  display: flex;
  gap: 3px;
  font-size: 10px;
  color: var(--ink-3);
}
.docs-mini-nps-axis span { flex: 1; text-align: center; }

@media (max-width: 880px) {
  .docs-shell { grid-template-columns: 1fr; gap: 16px; }
  .docs-toc { position: static; border-left: 0; padding-left: 0; max-height: none; }
}

/* ============================================================
   Dashboard / Home page
   ============================================================ */

.dash-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 8px 0 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.dash-hero-text h1 {
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  font-weight: 700;
}
.dash-hero-text h1 .dot { color: var(--brand); }
.dash-hero-text .subtitle { margin: 0; color: var(--ink-2); font-size: 15px; }
.dash-hero-text .subtitle strong { color: var(--ink); }
.dash-hero-actions { display: flex; gap: 8px; flex-shrink: 0; }

.dash-pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--success);
  font-weight: 600;
}
.dash-pulse::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 currentColor;
  animation: dash-pulse 1.6s ease-out infinite;
}
@keyframes dash-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(22,163,74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .dash-pulse::before { animation: none; }
}

/* KPI strip */
/* Fünf Kennzahlen in vier Spalten lassen immer eine allein in der zweiten
   Reihe stehen, mit drei leeren Feldern daneben. Fünf Spalten lösen das —
   und weil die Karten schmaler werden, passt der gestapelte Balken der
   Promotor-Quote genau in die Höhe der anderen. */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 70rem) { .dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dash-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.dash-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%);
  opacity: 0.85;
}
.dash-kpi-label {
  color: var(--ink-3);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 8px;
}
.dash-kpi-value {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
}
.dash-kpi-value .dash-kpi-unit {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-3);
  margin-left: 4px;
}
.dash-kpi-empty { color: var(--ink-3); font-weight: 500; }
.dash-kpi-foot {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.dash-kpi-foot a { color: var(--brand-dark); text-decoration: none; }
.dash-kpi-foot a:hover { color: var(--brand); }

.trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.trend-up   { background: var(--success-soft); color: var(--success-ink); }
.trend-down { background: var(--danger-soft);  color: var(--danger-ink); }
.trend-flat { background: var(--surface-3);    color: var(--ink-2); }

.dash-stack-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 12px;
  background: var(--surface-3);
}
.dash-stack-bar .seg { display: block; height: 100%; }
.dash-stack-bar .seg-detraktor { background: var(--danger); }
.dash-stack-bar .seg-passiv    { background: var(--warn); }
.dash-stack-bar .seg-promotor  { background: var(--success); }

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
}

.dash-kpi-pulse::before {
  background: linear-gradient(90deg, var(--success) 0%, var(--success) 100%);
}
.dash-kpi-pulse .dash-kpi-value { color: var(--success); }

/* Two-column grid for charts/widgets */
.dash-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.dash-chart, .dash-scores, .dash-recent, .dash-top, .dash-quick {
  padding: 18px 20px;
}
.dash-chart header,
.dash-scores header,
.dash-recent header,
.dash-top header,
.dash-quick header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.dash-chart header h3,
.dash-scores header h3,
.dash-recent header h3,
.dash-top header h3,
.dash-quick header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.dash-chart-empty,
.dash-chart-foot {
  font-size: 12px;
  color: var(--ink-3);
}
.dash-chart-empty {
  padding: 32px 0;
  text-align: center;
  background: var(--surface-2);
  border-radius: 8px;
  margin-top: 8px;
}
.dash-chart-foot {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.dash-chart-foot strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.dash-chart-foot .legend { display: inline-flex; align-items: center; gap: 4px; }

/* Sparkline */
.dash-spark {
  width: 100%;
  height: 100px;
  display: block;
}
.dash-spark-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* NPS histogram */
.dash-nps-bars {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 4px;
  height: 140px;
  align-items: end;
  padding-top: 18px;
}
.dash-nps-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  position: relative;
  min-width: 0;
}
/* Die Säule wächst in ihrer eigenen Spur nach oben. Vorher teilte sie sich
   die Höhe mit der Beschriftung darunter — ab zwei Stimmen ragte sie über die
   Achse hinaus nach unten. */
.dash-nps-track {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-height: 0;
}
.dash-nps-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: opacity 100ms ease;
}
.dash-nps-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  line-height: 16px;
}
.dash-nps-x {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Score bars */
.score-row {
  display: grid;
  grid-template-columns: 110px 1fr 36px;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.score-row + .score-row { border-top: 1px solid var(--border); }
.score-label {
  font-weight: 500;
  color: var(--ink-2);
  font-size: 13px;
}
.score-track {
  height: 10px;
  background: var(--surface-3);
  border-radius: 5px;
  overflow: hidden;
}
.score-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 200ms ease;
}
.score-fill.score-empathy  { background: linear-gradient(90deg, var(--brand-soft), var(--brand)); }
.score-fill.score-solution { background: linear-gradient(90deg, var(--success-soft), var(--success)); }
.score-fill.score-comm     { background: linear-gradient(90deg, var(--warn-soft), var(--warn)); }
.score-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}

/* Recent activity */
.dash-recent-list { list-style: none; padding: 0; margin: 0; }
.dash-recent-list li + li { border-top: 1px solid var(--border); }
.dash-recent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px;
  text-decoration: none;
  color: var(--ink);
  border-radius: 6px;
  transition: background 100ms ease;
}
.dash-recent-row:hover { background: var(--surface-2); }
.dash-recent-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-recent-main strong { font-size: 14px; }
.dash-recent-main .muted { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }

/* Top scenarios table */
.dash-top-table { width: 100%; border-collapse: collapse; }
.dash-top-table tr + tr td { border-top: 1px solid var(--border); }
.dash-top-table td { padding: 10px 0; vertical-align: middle; }
.dash-top-title {
  font-weight: 500;
  color: var(--ink);
  font-size: 14px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-top-uses {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink-2);
  width: 60px;
  font-size: 13px;
}
.dash-top-nps { text-align: right; width: 130px; }

/* Inventory tiles */
.dash-inventory {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.dash-inv-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border-radius: 8px;
  background: var(--surface-2);
  text-decoration: none;
  color: var(--ink);
  transition: background 100ms ease, transform 100ms ease;
}
.dash-inv-tile:hover { background: var(--brand-soft); transform: translateY(-1px); }
.dash-inv-num {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dash-inv-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  font-weight: 600;
}
.dash-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Empty state */
.dash-empty {
  background: linear-gradient(135deg, var(--brand-soft) 0%, var(--surface) 80%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}
.dash-empty h2 {
  margin: 0 0 24px;
  font-size: 20px;
  font-weight: 600;
}
.dash-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  counter-reset: step;
}
.dash-steps li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.dash-step-num {
  position: absolute;
  top: -10px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: white;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
.dash-steps h3 { margin: 0; font-size: 16px; font-weight: 600; }
.dash-steps p { margin: 0; color: var(--ink-2); font-size: 13px; }
.dash-steps .c-button { align-self: flex-start; margin-top: 4px; }

@media (max-width: 980px) {
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid-2 { grid-template-columns: 1fr; }
  .dash-steps { grid-template-columns: 1fr; }
}

/* ============================================================
   Talent profile widgets
   ============================================================ */

/* Mini score bars inside the KPI tile (Coaching-Mittel) */
.talent-mini-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.mini-row {
  display: grid;
  grid-template-columns: 60px 1fr 28px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.mini-label { color: var(--ink-3); font-weight: 500; }
.mini-track {
  display: block;
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
}
.mini-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
}
.mini-fill.mini-empathy  { background: var(--brand); }
.mini-fill.mini-solution { background: var(--success); }
.mini-fill.mini-comm     { background: var(--warn); }
.mini-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  color: var(--ink);
}

/* Recurring coaching-themes list */
.talent-themes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.talent-themes li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 6px;
  font-size: 13px;
}
.talent-themes .c-pill {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.talent-themes .theme-text {
  color: var(--ink-2);
  line-height: 1.4;
}

/* Persona / scenario spread */
.talent-spread {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.talent-spread li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.talent-spread li:last-child { border-bottom: 0; }
.spread-name { color: var(--ink); }
.spread-count {
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Learning-goal coverage table */
.talent-goals { width: 100%; border-collapse: collapse; }
.talent-goals th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.talent-goals td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}
.talent-goals tr:last-child td { border-bottom: 0; }
.talent-goals .goal-text { color: var(--ink); max-width: 480px; }
.talent-goals .goal-cell {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  width: 60px;
}
.talent-goals .goal-voll      { color: var(--success); }
.talent-goals .goal-teilweise { color: var(--warn); }
.talent-goals .goal-nicht     { color: var(--danger); }

.goal-quota {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 140px;
}
.goal-quota-track {
  flex: 1;
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
}
.goal-quota-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--success));
  border-radius: 3px;
}
.goal-quota-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink-2);
  font-size: 12px;
  min-width: 40px;
  text-align: right;
}
@media (max-width: 600px) {
  .dash-hero { flex-direction: column; align-items: stretch; }
  .dash-kpis { grid-template-columns: 1fr; }
  .dash-hero-text h1 { font-size: 26px; }
}

/* ===========================================================================
   Atmosphäre — Hintergründe, die tragen statt zu stören
   ---------------------------------------------------------------------------
   Ein Hintergrund, den man liest, ist keiner. Alle Motive sind dunkel und
   kontrastarm; darüber liegt in jedem Fall ein Verlauf, der die Schrift trägt.
   Das Standbild kommt sofort, das Video erst, wenn die Seite steht und
   niemand „weniger Bewegung" verlangt hat (siehe public/js/ambient.js).
   =========================================================================== */

/* `.bg-media` steht in theme.css — die Talentseiten laden admin.css nicht. */

/* --- Cockpit-Kopf ------------------------------------------------------- */

.dash-hero.has-media {
  position: relative;
  isolation: isolate;
  border-bottom: 0;
  border-radius: var(--radius-lg, 16px);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: oklch(25.1% 0.038 354);
  color: oklch(96% 0.008 340);
  overflow: hidden;
}
.dash-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.dash-hero-media img,
.dash-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dash-hero-media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.dash-hero-media video.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .dash-hero-media video { display: none; }
}
/* Der Verlauf trägt die Schrift: links dicht, nach rechts durchsichtig. */
.dash-hero.has-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right,
    oklch(22% 0.03 352 / 0.92) 0%,
    oklch(22% 0.03 352 / 0.72) 45%,
    oklch(22% 0.03 352 / 0.25) 100%);
}
/* Statt jede Regel einzeln zu überschreiben — der Basisstil setzt die
   Schriftfarbe mit !important — werden die Token hier lokal umdefiniert.
   Alles, was darin steckt, wird damit von selbst hell. */
.dash-hero.has-media {
  --ink: oklch(97% 0.008 340);
  --ink-2: oklch(85% 0.015 340);
  --ink-3: oklch(72% 0.015 340);
  --border: oklch(100% 0 0 / 0.18);
  --border-strong: oklch(100% 0 0 / 0.32);
}
  /* --brand-soft und --brand-dark bleiben unangetastet: --brand-dark ist der
     Hover-Hintergrund des Primärknopfs. Wer ihn hier auf Weiß setzt, bekommt
     beim Überfahren weiße Schrift auf weißem Grund. */
.dash-hero.has-media .dash-hero-text h1 { color: inherit; }
.dash-hero.has-media .dash-hero-text .subtitle strong { color: #fff; }
.dash-hero.has-media .c-button.ghost { background: oklch(100% 0 0 / 0.06); }

/* Der Ghost-Knopf auf dunklem Grund. Der Basisstil setzt seine Farbe mit
   !important — hier hilft nur dasselbe Mittel. */
.dash-hero.has-media .c-button.ghost:hover {
  background: oklch(100% 0 0 / 0.14);
  border-color: oklch(100% 0 0 / 0.6);
  color: #fff !important;
}

/* Die Kennzahlkarten sind jetzt schmaler. Damit die Zahl nicht aus ihrer Karte
   läuft und die Legende unter dem Balken nicht umbricht. */
.dash-kpi { min-width: 0; }
.dash-kpi-label { overflow-wrap: anywhere; }
.dash-kpi-value { font-variant-numeric: tabular-nums; }
.dash-kpi-foot { overflow-wrap: anywhere; }
.dash-kpi-foot .legend-dot + .legend-dot { margin-left: 0.5em; }

/* Sehr schmal: nur das Logo bleibt, und der Rand der Navigation blendet aus,
   damit man sieht, dass es rechts weitergeht. */
@media (max-width: 40rem) {
  .admin-header .brand-name { display: none; }
  .admin-nav { mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent); }
  .user-chevron { display: none; }
  .user-chip { padding: 0.2rem; }
}