/* ===========================================================================
   Rufi — Fundament
   ---------------------------------------------------------------------------
   Ein Werkzeug für Telefontraining hat zwei Oberflächen mit gegensätzlichen
   Aufgaben. Der Trainer arbeitet in einem Cockpit: dicht, scanbar, viel
   Information auf einmal. Das Talent sitzt mit Headset da und ist nervös — für
   es muss der Bildschirm möglichst leer sein, weil jede Zeile Text vom Zuhören
   abhält. Beides trägt dieselbe Sprache, aber in unterschiedlicher Lautstärke.

   Motiv: DIE LEITUNG. Eine Linie zieht sich durch das ganze Produkt. Auf der
   Anmeldeseite zeichnet sie sich, im Technik-Check ist sie die Wellenform, im
   Gespräch der Puls, im Report die Zeitachse des Gesprächs. Sie ist nie
   Dekoration — an jeder Stelle trägt sie Daten.

   Browser-Annahme: Wer telefonieren kann, hat WebRTC und getUserMedia. Damit
   sind alte Engines ohnehin ausgeschlossen, und oklch(), clamp() und
   color-mix() sind gefahrlos benutzbar.
   =========================================================================== */

/* --- Schrift, selbst gehostet. Kein Google-CDN: die Seite soll keine
   IP-Adressen von Talenten an Dritte melden, und offline läuft sie auch. --- */
@font-face {
  font-family: "Bricolage";
  src: url("/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Instrument";
  src: url("/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}

:root {
  /* --- Neutrale Töne, warm und leicht Richtung Magenta gekippt.
     Reines Grau wirkt neben einem kräftigen Akzent schmutzig; ein Hauch
     derselben Farbe im Grau bindet alles zusammen, ohne dass es auffällt. */
  --bg:        oklch(98.4% 0.006 340);
  --surface:   oklch(100% 0 0);
  --surface-2: oklch(96.5% 0.008 340);
  --surface-3: oklch(93.5% 0.012 340);
  --ink:       oklch(19% 0.02 340);
  --ink-2:     oklch(45% 0.015 340);
  --ink-3:     oklch(62% 0.012 340);
  --border:    oklch(91% 0.009 340);
  --border-strong: oklch(84% 0.012 340);

  --success:   oklch(58% 0.15 150);
  --warn:      oklch(68% 0.15 70);
  --danger:    oklch(55% 0.20 25);

  /* Schatten sind zurückhaltend und warm getönt. Eine Karte, die schwebt,
     lenkt ab; eine Karte mit klarer Kante nicht. */
  --shadow-sm: 0 1px 2px oklch(19% 0.02 340 / 0.05);
  --shadow-md: 0 4px 20px -6px oklch(19% 0.02 340 / 0.12);
  --shadow-lift: 0 18px 50px -24px oklch(19% 0.02 340 / 0.35);

  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 20px;

  /* Statusflächen */
  --success-soft: oklch(95% 0.05 150);
  --success-ink:  oklch(40% 0.12 150);
  --warn-soft:    oklch(96% 0.06 80);
  --warn-ink:     oklch(45% 0.12 70);
  --warn-border:  oklch(88% 0.09 80);
  --danger-soft:  oklch(95% 0.04 25);
  --danger-ink:   oklch(45% 0.16 25);
  --info-soft:    oklch(95% 0.04 255);
  --info-ink:     oklch(45% 0.15 255);
  --danger-dark:  oklch(47% 0.19 25);

  /* Akzent (Standard: Magenta) */
  --brand:       oklch(56% 0.24 350);
  --brand-dark:  oklch(47% 0.21 350);
  --brand-soft:  oklch(95% 0.04 350);

  /* --- Typografische Skala. Fließend, damit große Bildschirme atmen. */
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0:  clamp(0.94rem, 0.92rem + 0.12vw, 1rem);
  --step-1:  clamp(1.1rem, 1.04rem + 0.3vw, 1.28rem);
  --step-2:  clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --step-3:  clamp(1.7rem, 1.4rem + 1.4vw, 2.6rem);
  --step-4:  clamp(2.2rem, 1.6rem + 2.8vw, 4rem);

  /* --- Rhythmus. Nicht überall gleich viel Luft: eng gruppieren, großzügig
     trennen. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2.5rem;
  --space-12: 4rem;

  /* --- Bewegung. Exponentielles Ausklingen wirkt physikalisch, Bounce nicht. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Für das, was geht: beschleunigt hinaus, statt auszuklingen. */
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 620ms;
}

/* Akzentvarianten — gleiche Namen, andere Werte */
:root[data-accent="indigo"]  { --brand: oklch(52% 0.22 275); --brand-dark: oklch(45% 0.20 275); --brand-soft: oklch(95% 0.04 275); }
:root[data-accent="emerald"] { --brand: oklch(56% 0.14 163); --brand-dark: oklch(48% 0.13 163); --brand-soft: oklch(95% 0.04 163); }
:root[data-accent="amber"]   { --brand: oklch(65% 0.16 65);  --brand-dark: oklch(55% 0.14 65);  --brand-soft: oklch(95% 0.05 65); }

/* --- Dunkel. Kein Schwarz mit Neon, sondern ein warmer, tiefer Raum. */
:root[data-theme="dark"] {
  --bg:        oklch(17% 0.018 340);
  --surface:   oklch(21% 0.02 340);
  --surface-2: oklch(25% 0.022 340);
  --surface-3: oklch(30% 0.024 340);
  --ink:       oklch(96% 0.006 340);
  --ink-2:     oklch(78% 0.012 340);
  --ink-3:     oklch(62% 0.014 340);
  --border:    oklch(31% 0.022 340);
  --border-strong: oklch(40% 0.026 340);
  --shadow-sm: 0 1px 2px oklch(8% 0.02 340 / 0.5);
  --shadow-md: 0 6px 24px -8px oklch(8% 0.02 340 / 0.6);
  --shadow-lift: 0 24px 60px -28px oklch(5% 0.02 340 / 0.8);

  --success-soft: oklch(28% 0.07 150);
  --success-ink:  oklch(82% 0.14 150);
  --warn-soft:    oklch(30% 0.07 70);
  --warn-ink:     oklch(85% 0.13 80);
  --warn-border:  oklch(38% 0.08 70);
  --danger-soft:  oklch(28% 0.09 25);
  --danger-ink:   oklch(80% 0.13 25);
  --info-soft:    oklch(28% 0.07 255);
  --info-ink:     oklch(82% 0.11 255);
  --danger-dark:  oklch(72% 0.16 25);
  --brand:       oklch(66% 0.22 350);
  --brand-dark:  oklch(74% 0.19 350);
}
:root[data-theme="dark"][data-accent="magenta"] { --brand-soft: oklch(32% 0.10 350); }
:root[data-theme="dark"][data-accent="indigo"]  { --brand: oklch(66% 0.19 275); --brand-dark: oklch(76% 0.16 275); --brand-soft: oklch(30% 0.09 275); }
:root[data-theme="dark"][data-accent="emerald"] { --brand: oklch(70% 0.14 163); --brand-dark: oklch(78% 0.12 163); --brand-soft: oklch(30% 0.07 163); }
:root[data-theme="dark"][data-accent="amber"]   { --brand: oklch(76% 0.15 65);  --brand-dark: oklch(84% 0.13 65);  --brand-soft: oklch(32% 0.08 65); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Jede Komponente mit eigenem `display` (Grid, Flex) schlägt sonst die
   Browserregel für [hidden] — und ein gefilterter Eintrag bliebe sichtbar.
   Genau daran ist die Filterung der Listen zuerst gescheitert. */
[hidden] { display: none !important; }

body {
  font-family: "Instrument", ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1, "ss01" 1;
}

a { color: var(--brand-dark); text-underline-offset: 0.2em; }
a:hover { color: var(--brand); }
button, input, textarea, select { font: inherit; }

/* Überschriften in der Display-Schrift. Eng gesetzt, damit sie wie Typografie
   wirken und nicht wie vergrößerter Fließtext. */
h1, h2, h3, h4 {
  font-family: "Bricolage", "Instrument", system-ui, sans-serif;
  color: var(--ink);
  margin-top: 0;
  letter-spacing: -0.022em;
  line-height: 1.1;
  font-weight: 600;
}
h1 { font-size: var(--step-3); margin-bottom: var(--space-2); }
h2 { font-size: var(--step-2); margin-top: var(--space-8); margin-bottom: var(--space-3); }
h3 { font-size: var(--step-1); margin-bottom: var(--space-2); font-weight: 600; }
p { margin: var(--space-2) 0; }
.muted, p.muted { color: var(--ink-2); font-size: var(--step--1); }
small { color: var(--ink-3); font-size: var(--step--1); }
code {
  background: var(--surface-3);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
  font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
}

/* Karten — Kante statt Schwebe. */
.c-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

/* Buttons */
.c-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--brand);
  color: white !important;
  border: 1px solid var(--brand);
  padding: 0.55em 1.1em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none !important;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.c-button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.c-button:active { transform: translateY(1px); }
.c-button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.c-button.ghost {
  background: transparent;
  color: var(--ink-2) !important;
  border-color: var(--border-strong);
}
.c-button.ghost:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark) !important; }
.c-button.danger { background: var(--danger); border-color: var(--danger); }
.c-button.danger:hover { background: var(--danger-dark); border-color: var(--danger-dark); }
.c-button.ghost.danger { background: transparent; color: var(--danger) !important; border-color: var(--border-strong); }
.c-button.ghost.danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-ink) !important; }
.c-button.ghost.danger:focus-visible { outline-color: var(--danger); }
.c-button + .c-button { margin-left: var(--space-2); }
.c-button[disabled] { opacity: 0.4; cursor: not-allowed; }
.c-button svg { flex: 0 0 auto; vertical-align: middle; }

/* Eingaben */
.c-input {
  width: 100%;
  padding: 0.6em 0.8em;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.c-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.c-input::placeholder { color: var(--ink-3); }

/* Tabellen — Linear-Dichte: schmale Zeilen, klare Kanten, keine Zebras. */
.c-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: var(--step--1);
}
.c-table thead { background: var(--surface-2); }
.c-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  color: var(--ink-2);
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.c-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.c-table tbody tr:last-child td { border-bottom: 0; }
.c-table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.c-table tbody tr:hover { background: var(--surface-2); }
.c-table strong { color: var(--ink); font-weight: 600; }
.c-table small { display: block; margin-top: 2px; }

/* Leerzustände erklären die Oberfläche, statt "nichts da" zu sagen. */
.c-empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--ink-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
}
.c-empty h3 { color: var(--ink); margin-bottom: var(--space-2); }
.c-empty .c-button { margin-top: var(--space-4); }

/* Pillen */
.c-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.7em;
  border-radius: 100px;
  font-size: var(--step--1);
  font-weight: 600;
  background: var(--surface-3);
  color: var(--ink-2);
  white-space: nowrap;
}
.c-pill.brand { background: var(--brand-soft); color: var(--brand-dark); }
.c-pill.success { background: var(--success-soft); color: var(--success-ink); }
.c-pill.warn { background: var(--warn-soft); color: var(--warn-ink); }
.c-pill.danger { background: var(--danger-soft); color: var(--danger-ink); }

.c-error { color: var(--danger); margin: var(--space-2) 0; font-size: var(--step--1); }
.c-flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
  font-size: var(--step--1);
  border-left: 3px solid transparent;
}
.c-flash.warn { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn); }
.c-flash.success { background: var(--success-soft); color: var(--success-ink); border-color: var(--success); }
.c-flash.danger { background: var(--danger-soft); color: var(--danger-ink); border-color: var(--danger); }

/* Formulare */
.field { margin-bottom: var(--space-4); }
.field label {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-2);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.field .hint { color: var(--ink-3); font-size: var(--step--1); margin-top: var(--space-1); line-height: 1.45; }

.actions, .form-actions { margin-top: var(--space-6); display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

/* --- Das Leitungs-Motiv -------------------------------------------------
   Eine Linie, die an jeder Station etwas anderes bedeutet. Sie ist überall
   dieselbe Geste, trägt aber jedes Mal echte Daten. */
.line-rule {
  height: 1px;
  background: linear-gradient(90deg, var(--brand) 0%, color-mix(in oklch, var(--brand) 20%, transparent) 60%, transparent 100%);
  border: 0;
  margin: var(--space-6) 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-soft), 0 0 0 4px var(--brand);
  border-radius: var(--radius-sm);
}

/* Zahlen in Tabellen und Scores springen nicht. */
.c-table td, .nps-score, .score-bar .num, .call-timer, .dash-kpi-value {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Hintergrundmotiv einer Komponente. Liegt hinter dem Inhalt, füllt den
   Elternteil und übernimmt dessen Radius. Gehört hierher und nicht ins
   Cockpit-Stylesheet: die Seiten des Talents laden admin.css nicht.
   --------------------------------------------------------------------------- */
.bg-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}
.bg-media img,
.bg-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bg-media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.bg-media.is-ready video,
.bg-media video.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bg-media video { display: none; }
}

/* ===========================================================================
   Ab hier: Bausteine, die mehr als eine Seite benutzt.
   Wer eine Komponente in zwei Ansichten einbindet, muss ihr CSS dorthin
   legen, wo beide es laden — sonst sieht eine von beiden nackten Text. Die
   Zeitachse stand in result.css und fehlte deshalb im Gesprächsbericht des
   Trainers, der dieselbe Partial einbindet.
   =========================================================================== */
/* ===========================================================================
   Zeitachse des Gesprächs
   ---------------------------------------------------------------------------
   Dieselbe Leitung wie überall, hier mit zwei Richtungen: nach oben, was das
   Talent gesagt hat, nach unten der Kunde. Das ist kein Diagramm zur Zierde —
   man sieht in einer Sekunde, wer das Gespräch gefüllt hat und wo es hakte.
   =========================================================================== */

.timeline-block { margin: var(--space-8) 0; }
.timeline-head h2 { margin-bottom: var(--space-1); }
.timeline-head .muted { margin-bottom: var(--space-6); max-width: 60ch; }

.timeline {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  height: 5.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}

.timeline-lane { position: relative; display: flex; align-items: flex-end; }
.timeline-lane-down { align-items: flex-start; }

/* An die Zeitachse gebunden, nicht global. `.seg` ist ein Allerweltsname:
   Ungebunden hat diese Regel den gestapelten Balken auf dem Cockpit zerlegt —
   dort liegen drei Segmente nebeneinander im Flex, und `position: absolute`
   hat sie übereinandergeschoben, sodass nur eines sichtbar blieb. */
.timeline .seg {
  position: absolute;
  height: 100%;
  border-radius: 2px;
  min-width: 2px;
  transition: filter var(--dur-fast) var(--ease-out);
}
.timeline .seg:hover { filter: brightness(1.15); }
.timeline .seg-you { bottom: 0; background: oklch(72% 0.09 195); }
.timeline .seg-them { top: 0; background: var(--brand); opacity: 0.85; }

/* Die Achse selbst: eine Haarlinie, auf der die Ereignisse sitzen. */
.timeline-axis {
  position: relative;
  height: 1.1rem;
  margin: 0.15rem 0;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}
.timeline .gap {
  position: absolute;
  top: 0; bottom: 0;
  background: repeating-linear-gradient(
    90deg, var(--border-strong) 0 2px, transparent 2px 6px
  );
  opacity: 0.8;
}
.timeline .cut {
  position: absolute;
  top: -0.35rem; bottom: -0.35rem;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--warn);
}
.timeline .cut-them { background: var(--brand-dark); }

.timeline-scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--step--1);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-2);
  padding: 0 var(--space-1);
}

.timeline-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-4) var(--space-6);
  margin: var(--space-6) 0 0;
}
.timeline-facts dt {
  font-size: var(--step--1);
  color: var(--ink-3);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-1);
}
.timeline-facts dd { margin: 0; font-size: var(--step-0); color: var(--ink); font-weight: 500; }
.timeline-facts .vs { color: var(--ink-3); margin: 0 0.35em; font-weight: 400; }
.timeline-facts .dot {
  display: inline-block;
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  margin-right: 0.4em;
  vertical-align: baseline;
}
.timeline-facts .dot-you { background: oklch(72% 0.09 195); }
.timeline-facts .dot-them { background: var(--brand); }

@media (max-width: 40rem) {
  .timeline { height: 4.5rem; }
}


/* ---------------------------------------------------------------------------
   Die Leitung als Auftakt: eine Linie, die sich einmal zieht.
   Stand in trainee.css, bis die KI-Autoren im Trainer-Bereich sie ebenfalls
   benutzten — und der Erreichbarkeitstest das gemeldet hat, bevor es jemand
   im Bild sehen musste.
   --------------------------------------------------------------------------- */
/* Die Leitung als Auftakt: eine Linie, die sich einmal zieht. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 var(--space-4);
}
.eyebrow-line {
  display: block;
  height: 1px;
  width: clamp(2rem, 8vw, 5rem);
  background: currentColor;
  transform-origin: left;
  animation: draw-line var(--dur-slow) var(--ease-out) both;
}
@keyframes draw-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ===========================================================================
   Versuche vergleichen — auf der Auswertung des Talents, im Nachgespräch und
   im Talent-Profil. Besser grün, schwächer gelb, ohne Wertung (Redeanteil)
   neutral. Rot gibt es hier bewusst nicht: Ein schwächerer Versuch ist Üben.
   =========================================================================== */
.attempt-compare { margin-top: var(--space-6); }
.attempt-compare.debrief-card { margin-top: 0; }
.attempt-head h2 { margin: 0; font-size: var(--step-1); }
.attempt-sub { margin: var(--space-1) 0 0; color: var(--ink-2); font-size: var(--step--1); }
.attempt-summary { margin: var(--space-3) 0 0; line-height: 1.5; }
.attempt-rows { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; }
.attempt-row {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) auto;
  align-items: baseline;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.attempt-row:last-child { border-bottom: 0; padding-bottom: 0; }
.attempt-row dt { font-weight: 600; }
.attempt-row dd { margin: 0; display: flex; align-items: baseline; gap: var(--space-2); font-variant-numeric: tabular-nums; }
.attempt-before { color: var(--ink-3); }
.attempt-arrow { color: var(--ink-3); }
.attempt-delta {
  min-width: 3.2rem;
  text-align: right;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-3);
}
.attempt-row.is-better .attempt-delta { color: var(--success-ink); }
.attempt-row.is-worse .attempt-delta { color: var(--warn-ink); }
.talent-progress { margin-top: var(--space-4); }
.talent-progress-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.talent-progress-head h3 { margin: 0; }
.talent-progress-list { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin-top: var(--space-3); }
.talent-progress-title { margin: 0; display: grid; gap: var(--space-1); }

/* Selbstbild gegen Auswertung — Talent-Auswertung und Nachgespräch. */
.self-compare { margin-top: var(--space-6); }
.self-compare.debrief-card { margin-top: 0; }
.self-compare h2 { margin: 0; font-size: var(--step-1); }
.self-compare-sub { margin: var(--space-2) 0 0; color: var(--ink-2); line-height: 1.5; }
.self-compare-table { width: 100%; margin-top: var(--space-3); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.self-compare-table th, .self-compare-table td { padding: var(--space-2) var(--space-2); text-align: left; border-bottom: 1px solid var(--border); vertical-align: baseline; }
.self-compare-table thead th { font-size: var(--step--1); color: var(--ink-3); font-weight: 600; }
.self-compare-table tbody th { font-weight: 600; }
.self-compare-table tr:last-child th, .self-compare-table tr:last-child td { border-bottom: 0; }
.self-compare-table tr.is-big-gap td { color: var(--warn-ink); font-weight: 600; }
.self-scale-of { color: var(--ink-3); font-weight: 400; font-size: var(--step--1); }
.self-gap { display: block; font-size: var(--step--1); font-weight: 500; }
.self-compare-note { margin: var(--space-3) 0 0; line-height: 1.5; }

/* ===========================================================================
   Seitenwechsel — die eine Bewegung, die man überall spürt.

   Rufi ist mehrseitig; ohne das springt jede Seite hart ein. Jetzt blendet der
   Browser über: Die alte Seite geht kurz weg, die neue kommt mit einem Hauch
   Bewegung von unten. Der Header steht still, weil er auf beiden Seiten derselbe
   ist — man bleibt sichtbar in derselben Anwendung. Kurz gehalten, weil ein
   Trainer zwischen zwei Schulungen nicht warten soll. Neu laden (die Auswertung
   des Talents lädt sich selbst nach) blendet nicht über.

   Reines CSS, kein Skript. Browser ohne View Transitions wechseln wie bisher.
   =========================================================================== */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: rufi-page-out 120ms var(--ease-in) both; }
::view-transition-new(root) { animation: rufi-page-in 240ms var(--ease-out) both; }
@keyframes rufi-page-out { to { opacity: 0; } }
@keyframes rufi-page-in { from { opacity: 0; transform: translateY(6px); } }

.admin-header { view-transition-name: rufi-header; }
::view-transition-old(rufi-header),
::view-transition-new(rufi-header) { animation-duration: 160ms; }

/* Die Unterstreichung der aktiven Registerkarte gleitet von „Übersicht“ zu
   „Personas“, statt dort zu verschwinden und hier aufzutauchen. Der Browser
   bewegt Position und Breite; dieselbe Kurve wie die Seite. */
::view-transition-group(rufi-nav-indicator) {
  animation-duration: 240ms;
  animation-timing-function: var(--ease-out);
}

/* Rückmeldungen („✓ Gespeichert“) gleiten ein, nachdem die Seite steht.
   Nur solche mit role — dauerhafte Hinweise wie „Start-Passwort“ sollen nicht
   bei jedem Seitenaufruf einfliegen. */
.c-flash[role="status"],
.c-flash[role="alert"] { animation: rufi-flash-in var(--dur) var(--ease-out) 80ms both; }
@keyframes rufi-flash-in { from { opacity: 0; transform: translateY(-6px); } }

/* Aufgeklappte Bereiche („Umbenennen“, Datenschutz-Hinweis, FAQ) blenden ihren
   Inhalt ein, statt ihn hinzuwerfen. Die Menüs im Header regeln das selbst. */
details:not([data-menu])[open] > summary ~ * { animation: rufi-reveal var(--dur) var(--ease-out) both; }
@keyframes rufi-reveal { from { opacity: 0; transform: translateY(-4px); } }

/* Die Regel oben erwischt Pseudo-Elemente der Überblendung nicht — also hier
   ausdrücklich: Wer weniger Bewegung will, bekommt einen harten Seitenwechsel. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ===========================================================================
   Stimmungsverlauf des Kunden — auf der Auswertung des Talents und im
   Nachgespräch. Eine Linie auf derselben Zeitachse wie „Wie das Gespräch lief“,
   darunter die Sätze, die sie gedreht haben. Die Linie trägt Daten, sie ist
   keine Dekoration; deshalb steht neben jedem Wert auch ein Wort.
   =========================================================================== */
.mood-block { margin-top: var(--space-6); }
.mood-head h2 { margin: 0; font-size: var(--step-1); }
.mood-head p { margin: var(--space-1) 0 0; line-height: 1.5; }
.mood-chart { margin-top: var(--space-4); }
.mood-axis { margin: var(--space-2) 0 0; font-size: var(--step--1); }
.mood-plot { position: relative; }
.mood-svg {
  display: block;
  width: 100%;
  height: 5.5rem;
  border-bottom: 1px solid var(--border);
}
.mood-dots { position: absolute; inset: 0; pointer-events: none; }
.mood-zero { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 4; }
.mood-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mood-dot {
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  margin: -0.3rem 0 0 -0.3rem;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--brand);
  pointer-events: auto;
}
.mood-dot.is-good { background: var(--success); border-color: var(--success); }
.mood-dot.is-bad { background: var(--warn); border-color: var(--warn); }
.mood-turn-mark { stroke-width: 1; stroke-dasharray: 2 3; }
.mood-turn-mark.is-auf { stroke: var(--success); }
.mood-turn-mark.is-ab { stroke: var(--warn); }
.mood-summary { margin: var(--space-3) 0 0; line-height: 1.55; }

/* Die Wendepunkte: Zitat groß, Wirkung darunter — es ist der Satz, den man
   sich merken soll. */
.mood-turns { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.mood-turn {
  border-left: 3px solid var(--border-strong);
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
}
.mood-turn.is-auf { border-left-color: var(--success); }
.mood-turn.is-ab { border-left-color: var(--warn); }
.mood-turn-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.mood-turn-quote { margin: var(--space-2) 0 0; font-size: var(--step-1); line-height: 1.45; }
.mood-turn-effect { margin: var(--space-1) 0 0; color: var(--ink-2); line-height: 1.5; }
.mood-none { margin: var(--space-3) 0 0; }
@media (max-width: 40rem) {
  .mood-svg { height: 4.5rem; }
}