/* =============================================================================
   VETI — Onboarding-Flow, von der bestätigten Registrierung bis zum Dashboard.

   Design-Grundlage ist Dashboard-Variante v2, deren drei Entscheidungen hier
   weitergeführt werden:

     1  Kontraste in lesbarer Tiefe — Akzente aus der Inuveta-Rampe, aber
        brand-cyan-700 statt der Dunkelmodus-Töne. Alle Textfarben ≥ 4,5:1.
     2  Wenig Schachtelung — Inhalt liegt auf einer Fläche, getrennt durch
        Haarlinien statt durch Karten in Karten.
     3  Hierarchie — pro Bildschirm eine Sache, die führt.

   Was gegenüber v2 dazukommt: Ein Onboarding ist kein Dashboard. Hier steht
   pro Bildschirm eine einzige Entscheidung, also darf die Typografie größer
   und der Rhythmus langsamer sein. Der Marken-Verlauf (cyan → purple) trägt
   die Wiedererkennung und wird sparsam gesetzt — Siegel, Fortschritt, Avatar.

   Haltung aus der Strategieklausur: VETI ist Coach, nicht Mentor.
   Schonungslos ehrlich, kein Gendern, keine Weichzeichner.
   ========================================================================== */

:root {
  /* --- Akzente (wie v2, in lesbarer Tiefe) ------------------------------- */
  --v-accent:       var(--c-brand-cyan-700);   /* #0D818C · 4,9:1 auf Weiß */
  --v-accent-fill:  var(--c-brand-cyan-600);
  --v-accent-soft:  #E4F5F6;
  --v-deep:         var(--c-brand-purple-500); /* #563FC0 · Weiß darauf 7,3:1 */
  --v-deep-hover:   var(--c-brand-purple-600); /* #45329A · Weiß darauf 9,6:1 */
  --v-deep-soft:    #EDE9F9;
  --v-warn:         var(--c-yellow-700);
  --v-warn-soft:    #FBEBCC;
  --v-ok:           var(--c-green-700);
  --v-ok-soft:      #DCF3E5;

  --v-hair:  rgba(28, 28, 30, 0.10);
  --v-hair-2: rgba(28, 28, 30, 0.06);
  /* Für Flächen, die man anklicken soll. Ein Haarstrich reicht dafür nicht:
     auf hellem Panel verschwindet er, und die Karte liest sich nicht mehr als
     Knopf. Auf Weiß ergibt das rund #C6C6C7. */
  --v-rand:  rgba(28, 28, 30, 0.24);

  /* Fließtext im Gespräch. Beschriftungen, Zähler und Zahlen bleiben
     bei Inter — dort zählt die enge, gleichmäßige Laufweite. */
  --v-lesefont: 'Lexend', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --v-ink:   var(--c-neutral-900);
  --v-body:  var(--c-neutral-700);
  --v-muted: var(--c-neutral-600);

  /* Dichteres Glas, weil Text direkt darauf liegt (v2). */
  --glass-tint: rgba(255, 255, 255, 0.74);

  /* Für Flächen (Marke, Avatar): der helle Verlauf trägt dort Weiß. */
  --v-brand: linear-gradient(135deg, var(--c-brand-cyan-400), var(--c-brand-purple-500));
  /* Für Text: dieselbe Achse, aber in lesbarer Tiefe. cyan-400 läge auf Weiß
     bei rund 1,6:1 — genau der Fehler, den v2 behebt. */
  --v-brand-text: linear-gradient(100deg, var(--c-brand-cyan-700), var(--c-brand-purple-500));
}

/* --- Bühne ---------------------------------------------------------------- */

.flow {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--sp-4) var(--sp-6);
}
.flow > main { flex: 1; padding-bottom: var(--sp-8); }
/* Das Dashboard am Ende braucht mehr Breite als die Schritte davor. */
.flow--weit { max-width: 1100px; }
/* Vier Antwortkarten nebeneinander brauchen mehr als die Lesespalte. */
.flow--breit { max-width: 1000px; }

/* --- Kopfzeile ------------------------------------------------------------ */

.vhead {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: 72px;
}
.vhead__brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.vhead__brand:hover .vhead__word { color: var(--v-accent); }
.vhead__mark {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--v-brand);
  box-shadow: 0 2px 8px rgba(86, 63, 192, .32);
}
.vhead__word {
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--v-ink);
}
.vhead__right { display: flex; align-items: center; gap: var(--sp-2); }

/* --- Fortschritt über dem Flow ------------------------------------------- */

.steps {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--sp-6);
}
.steps__dot {
  height: 4px;
  flex: 1;
  border-radius: var(--r-pill);
  background: var(--c-neutral-100);
  transition: background 300ms var(--ease, ease);
}
.steps__dot--done { background: var(--v-accent-fill); }
/* Der laufende Abschnitt füllt sich mit: sonst steht der Balken über sechzehn
   Fragen still und zeigt eine Position statt eines Fortschritts. */
.steps__dot--now  { background: var(--c-neutral-100); position: relative; overflow: hidden; }
.steps__inner {
  display: block; height: 100%;
  border-radius: var(--r-pill);
  background: var(--v-deep);
  transition: width 420ms cubic-bezier(.16, 1, .3, 1);
  min-width: 10px;
}
.steps__label {
  flex: none;
  margin-left: var(--sp-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Typografie ----------------------------------------------------------- */

.eyebrow {
  margin: 0 0 var(--sp-3);
  font-size: 11px; line-height: 16px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--v-accent);
}
.eyebrow--quiet { color: var(--v-muted); }

.v-h1 {
  margin: 0;
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--v-ink);
  text-wrap: balance;
}
.v-h2 {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--v-ink);
}
.v-h3 {
  margin: 0;
  font-size: 16px; line-height: 22px; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v-ink);
}

.lead {
  margin: var(--sp-4) 0 0;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.62;
  color: var(--v-body);
  max-width: 58ch;
}
.body { margin: var(--sp-3) 0 0; font-size: 14px; line-height: 1.6; color: var(--v-body); }
.small { font-size: 12.5px; line-height: 1.55; color: var(--v-muted); }
.num { font-variant-numeric: tabular-nums; }

/* Zitat/Claim — trägt die Marke, deshalb der einzige Ort mit dem Verlauf im Text. */
.claim {
  margin: var(--sp-5) 0 0;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.015em;
  background: var(--v-brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  max-width: 24ch;
}

/* --- Flächen -------------------------------------------------------------- */

.panel {
  padding: var(--sp-6);
  border-radius: var(--r-glass);
}
@media (max-width: 599px) { .panel { padding: var(--sp-4); } }

.rule { height: 0; margin: var(--sp-5) 0; border: 0; border-top: 1px solid var(--v-hair); }

/* --- Knöpfe --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: background 160ms, border-color 160ms, color 160ms, transform 160ms;
}
.btn--primary { background: var(--v-deep); color: #fff; }
.btn--primary:hover { background: var(--v-deep-hover); }
.btn--primary:active { transform: scale(.99); }
.btn--quiet {
  background: transparent;
  border-color: var(--v-hair);
  color: var(--v-body);
}
.btn--quiet:hover { border-color: var(--v-muted); color: var(--v-ink); }
.btn--ghost { background: none; color: var(--v-accent); padding: 0; height: auto; }
.btn--ghost:hover { text-decoration: underline; }
.btn--full { width: 100%; }
.btn:disabled { opacity: .35; pointer-events: none; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.actions--split { justify-content: space-between; }

/* --- Siegel „VETI-Ehrenwort" ---------------------------------------------- */
/* Aus der Klausur: „100 % diskret", Einsichtnahme organisatorisch
   ausgeschlossen. Bewusst nicht „technisch" oder „vertraglich". */

.seal {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--r-card);
  border-left: 3px solid var(--v-accent);
  background: var(--v-accent-soft);
}
.seal__icon { flex: none; color: var(--v-accent); margin-top: 1px; }
.seal__title { margin: 0; font-size: 13px; font-weight: 600; color: var(--v-ink); }
/* Nachweise: klein, in einer Reihe, umbrechend. Sie stehen unter dem Titel
   und über dem Ehrenwort — sichtbar, aber ohne ihm die Schau zu stehlen. */
.seal__marken {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: 6px 0 0;
}
.seal__marke {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 0 1px var(--v-hair);
  font-size: 11px; font-weight: 600; letter-spacing: -0.1px;
  color: var(--v-accent);
  white-space: nowrap;
}
.seal__text { font-family: var(--v-lesefont); margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--v-body); }

/* --- Auswahlkacheln (Säulen) ---------------------------------------------- */

.pillars { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
@media (min-width: 720px) { .pillars { grid-template-columns: repeat(3, 1fr); } }

.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1.5px solid var(--v-rand);
  border-radius: var(--r-card);
  background: #fff;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 160ms, box-shadow 160ms, transform 160ms;
}
.pillar__kopf { display: flex; align-items: center; justify-content: space-between; }
.pillar__liste { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.pillar__punkt {
  position: relative; padding-left: 14px;
  font-size: 12px; line-height: 1.45; color: var(--v-body);
}
.pillar__punkt::before {
  content: ''; position: absolute; left: 2px; top: 7px;
  width: 4px; height: 4px; border-radius: var(--r-pill); background: var(--v-accent);
}
.pillar__fuss {
  margin-top: auto; padding-top: var(--sp-3);
  border-top: 1px solid var(--v-hair-2);
  display: flex; flex-direction: column; gap: 4px;
}
.pillar__meta { font-size: 11.5px; font-weight: 600; color: var(--v-ink); }
.pillar__ergebnis { font-size: 12px; line-height: 1.45; color: var(--v-muted); }
/* Beim Überfahren das Marken-Lila — dieselbe Farbe, die der führende Knopf
   trägt. Türkis bleibt dem gewählten Zustand vorbehalten, sonst sähen
   „darüber" und „ausgewählt" gleich aus. */
.pillar:hover { border-color: var(--v-deep); transform: translateY(-2px); }
.pillar[aria-pressed="true"] {
  border-color: var(--v-accent);
  box-shadow: inset 0 0 0 1px var(--v-accent);
  background: var(--v-accent-soft);
}
.pillar__icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--v-deep-soft);
  color: var(--v-deep);
}
.pillar__name { font-size: 15px; font-weight: 600; color: var(--v-ink); }
.pillar__text { font-size: 12.5px; line-height: 1.5; color: var(--v-muted); }
.pillar__later {
  margin-top: auto;
  padding-top: var(--sp-2);
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--v-muted);
}

/* --- Video ---------------------------------------------------------------- */

.video {
  position: relative;
  margin-top: var(--sp-6);
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  background: var(--c-neutral-900) var(--v-brand);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.video__play {
  width: 68px; height: 68px;
  border: 0; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92);
  color: var(--v-ink);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
  transition: transform 160ms;
}
.video__play:hover { transform: scale(1.06); }
.video__meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: linear-gradient(transparent, rgba(0, 0, 0, .45));
  color: #fff; font-size: 12px;
}
.video__bar { height: 3px; background: rgba(255,255,255,.3); border-radius: var(--r-pill); }
.video__fill { height: 100%; width: 0; background: #fff; border-radius: var(--r-pill); transition: width .3s linear; }

/* --- Fragebogen im Flow ---------------------------------------------------- */

.q {
  margin-top: var(--sp-6);
}
.q__stem {
  margin: 0;
  font-size: clamp(20px, 2.8vw, 27px);
  line-height: 1.26;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--v-ink);
  text-wrap: balance;
}
.q__opts { display: grid; gap: 10px; margin-top: var(--sp-6); }
@media (min-width: 860px) { .q__opts--breit { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); align-items: stretch; } }

.opt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--v-hair);
  border-radius: var(--r-card);
  background: #fff;
  text-align: left;
  font: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--v-ink);
  cursor: pointer;
  transition: border-color 160ms, background 160ms, transform 160ms;
}
@media (min-width: 860px) {
  .q__opts--breit .opt {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "key" "text" "mark";
    font-size: 13.5px;
  }
  .q__opts--breit .opt__key  { grid-area: key; }
  .q__opts--breit .opt__text { grid-area: text; }
  .q__opts--breit .opt__mark { grid-area: mark; justify-self: end; align-self: end; }
}
.opt:hover { border-color: var(--v-accent); transform: translateY(-1px); }
.opt__key { font-size: 12px; font-weight: 600; color: var(--v-muted); font-variant-numeric: tabular-nums; }
.opt__mark {
  width: 20px; height: 20px; flex: none;
  border: 1.5px solid var(--v-hair); border-radius: var(--r-pill);
}
.opt[aria-checked="true"] { border-color: var(--v-accent); background: var(--v-accent-soft); }
.opt[aria-checked="true"] .opt__key { color: var(--v-accent); }
.opt[aria-checked="true"] .opt__mark {
  border-color: var(--v-accent);
  background: var(--v-accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5 8.5 14 15 6.5'/%3E%3C/svg%3E")
    center / 13px no-repeat;
}

/* --- Motivstruktur: Schieberegler mit sichtbarer Skala ---------------------
   Ohne Ticks und Zahlen ist nicht zu erkennen, wie viele Stufen die Skala hat
   und wo man steht — man sieht nur einen Regler und eine Zahl. Die Zahlen sind
   zusätzlich anklickbar; am Telefon ist das schneller als ziehen.
   Der Daumen wandert von THUMB/2 bis Breite − THUMB/2, deshalb ist alles
   darunter um genau diesen Betrag eingerückt.                                */
.scale { --thumb: 24px; margin-top: var(--sp-6); }
.scale__row {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  font-size: 12.5px; color: var(--v-muted); margin-bottom: 12px;
}

.scale__bed { position: relative; height: 34px; }
.scale__rail {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: calc(var(--thumb) / 2); right: calc(var(--thumb) / 2);
  height: 6px; border-radius: var(--r-pill);
  background: var(--c-neutral-200);
}
.scale__ticks {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: calc(var(--thumb) / 2); right: calc(var(--thumb) / 2);
  height: 14px;
}
.scale__tick {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 2px; height: 8px; border-radius: 1px;
  background: rgba(28, 28, 30, .22);
}
.scale__tick--end { height: 14px; background: rgba(28, 28, 30, .38); }

.scale input[type="range"] {
  position: relative; z-index: 1;
  width: 100%; height: 34px; margin: 0;
  background: none; accent-color: var(--v-accent);
  -webkit-appearance: none; appearance: none;
}
.scale input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--thumb); height: var(--thumb);
  border-radius: var(--r-pill);
  background: var(--v-accent);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(13, 129, 140, .38);
  cursor: grab;
}
.scale input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
.scale input[type="range"]::-moz-range-thumb {
  width: var(--thumb); height: var(--thumb);
  border-radius: var(--r-pill);
  background: var(--v-accent);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(13, 129, 140, .38);
}

.scale__nums {
  position: relative;
  height: 30px;
  margin: 6px calc(var(--thumb) / 2) 0;
}
.scale__num {
  position: absolute; top: 0; transform: translateX(-50%);
  min-width: 26px; height: 26px;
  padding: 0 4px;
  border: 0; border-radius: var(--r-pill);
  background: none;
  font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--v-muted);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color 150ms, background 150ms;
}
.scale__num:hover { color: var(--v-accent); background: var(--v-accent-soft); }
.scale__num.is-on { color: #fff; background: var(--v-accent); font-weight: 600; }

.scale__hint {
  margin: var(--sp-3) 0 0; text-align: center;
  font-size: 12.5px; color: var(--v-muted);
  min-height: 1.2em;
}
.scale.is-gesetzt .scale__hint { color: var(--v-accent); }

/* Bei elf Stufen wird es am Telefon eng — dann nur jede zweite Zahl. */
@media (max-width: 560px) {
  .scale__num { min-width: 20px; font-size: 11px; }
  .scale__num:nth-child(even) { display: none; }
}

/* --- Auswertung läuft ------------------------------------------------------ */

.work { margin-top: var(--sp-6); }
.work__item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 13px 0;
  border-top: 1px solid var(--v-hair-2);
  font-size: 14px;
  color: var(--v-muted);
  transition: color 300ms;
}
.work__item:first-child { border-top: 0; }
.work__item--done { color: var(--v-body); }
.work__item--now  { color: var(--v-ink); font-weight: 600; }
.work__dot {
  flex: none; width: 20px; height: 20px; border-radius: var(--r-pill);
  border: 1.5px solid var(--v-hair);
  display: grid; place-items: center;
}
.work__item--done .work__dot { background: var(--v-accent); border-color: var(--v-accent); color: #fff; }
.work__item--now .work__dot {
  border-color: var(--v-deep);
  border-right-color: transparent;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Dashboard-Vorschau ---------------------------------------------------- */

.dash { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
@media (min-width: 900px) { .dash { grid-template-columns: 1fr 1fr; } }
.dash__wide { grid-column: 1 / -1; }

.stat { display: flex; flex-direction: column; gap: 2px; }
.stat__val { font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--v-ink); font-variant-numeric: tabular-nums; }
.stat__cap { font-size: 12px; color: var(--v-muted); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-4); }

/* Etwas kräftiger als in v2: die Balken liegen hier auf der Aurora, nicht auf
   einer weißen Karte, und gehen sonst darin unter. */
/* display: block ist Pflicht — beide sind <span>, und ein inline-Element
   nimmt weder Höhe noch die Höhe seines Kindes an. */
.bar { display: block; height: 7px; border-radius: var(--r-pill); background: var(--c-neutral-200); overflow: hidden; }
.bar__fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--v-accent); transition: width 500ms cubic-bezier(.16,1,.3,1); }

.arearow { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--sp-3); align-items: baseline; padding: 11px 0; border-top: 1px solid var(--v-hair-2); }
.arearow:first-child { border-top: 0; }
.arearow__name { font-size: 14px; color: var(--v-ink); }
.arearow__val { font-size: 13px; font-weight: 600; color: var(--v-accent); font-variant-numeric: tabular-nums; }
.arearow .bar { grid-column: 1 / -1; }

/* --- 7-Tage-Challenge ------------------------------------------------------ */

.streak { display: flex; gap: 7px; margin-top: var(--sp-5); }
.day {
  flex: 1;
  aspect-ratio: 1;
  max-width: 56px;
  display: grid; place-items: center;
  border-radius: var(--r-card);
  border: 1.5px solid var(--v-hair);
  background: #fff;
  font-size: 13px; font-weight: 600; color: var(--v-muted);
  font-variant-numeric: tabular-nums;
}
.day--done { background: var(--v-accent); border-color: var(--v-accent); color: #fff; }
.day--now  { border-color: var(--v-deep); color: var(--v-deep); box-shadow: inset 0 0 0 1px var(--v-deep); }

.task {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--r-card);
  border: 1px solid var(--v-hair);
  background: #fff;
}
.task__meta { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); font-size: 12px; color: var(--v-muted); }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--v-deep-soft); color: var(--v-deep);
  font-size: 11.5px; font-weight: 600;
}
.chip--ok { background: var(--v-ok-soft); color: var(--v-ok); }
.chip--warn { background: var(--v-warn-soft); color: var(--v-warn); }

/* --- Zwischenzustände ------------------------------------------------------ */

.note {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--r-card);
  border-left: 3px solid var(--v-warn);
  background: var(--v-warn-soft);
}
.note--error { border-left-color: #C03F3F; background: #F9ECEC; }
.note--info { border-left-color: var(--v-deep); background: var(--v-deep-soft); }
.note--ok { border-left-color: var(--v-ok); background: var(--v-ok-soft); }
.note p { font-family: var(--v-lesefont); margin: 0; font-size: 13px; line-height: 1.55; color: var(--v-body); }
.note strong { color: var(--v-ink); }

.empty {
  margin-top: var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
  border: 1px dashed var(--v-hair);
  border-radius: var(--r-card);
  text-align: center;
  color: var(--v-muted);
  font-size: 13.5px;
}

/* Skeleton für Ladezustände */
.skel {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--c-neutral-100) 25%, var(--c-neutral-50) 50%, var(--c-neutral-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1400ms linear infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* --- Übergang zwischen Bildschirmen ---------------------------------------- */

.screen { animation: enter .38s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }

/* --- Persona ---------------------------------------------------------------
   Was die sieben Fragen ergeben haben, als Liste statt als Fließtext: der
   Nutzer soll auf einen Blick sehen, worauf er VETI eingestellt hat, und es
   im Zweifel wiedererkennen.                                              */
.persona {
  display: grid; gap: 1px;
  background: var(--v-hair);
  border: 1px solid var(--v-hair);
  border-radius: 14px;
  overflow: hidden;
}
.persona__zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4);
  padding: 9px 13px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 13px;
}
.persona__was  { color: var(--v-muted); flex: none; }
.persona__wert { font-weight: 600; color: var(--v-ink); text-align: right; }

/* --- Konfetti -------------------------------------------------------------
   Emoji-Ausbruch am Ende eines Abschnitts. Die Teilchen steigen langsam auf,
   damit man sie liest statt sie nur aufblitzen zu sehen; knapp bleibt dafür
   die Menge — VETI ist schonungslos ehrlich, keine Jubelmaschine. Liegt über
   allem, fängt keine Klicks ab und ist bei reduzierter Bewegung ganz aus.  */
.konfetti {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 300;
}
.konfetti__teil {
  position: absolute;
  font-size: 20px;
  line-height: 1;
  will-change: transform, opacity;
  animation: konfettiFlug 2.4s cubic-bezier(.16, .6, .3, 1) forwards;
}
@keyframes konfettiFlug {
  0%   { transform: translate(-50%, 0) scale(.4) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(1) rotate(var(--dr)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .konfetti { display: none; } }

/* --- Dashboard: Arbeitsplatz statt Ergebnisseite ---------------------------
   Die Auswertung ist ein Modul unter mehreren. Aufbau wie in Variante v2:
   schmale Leiste mit dem, was ständig gilt (Coach, Bereiche), daneben die
   Module in Lesereihenfolge.                                               */

.dashgrid { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
@media (min-width: 1000px) {
  .dashgrid { grid-template-columns: 320px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
  .dashgrid__rail { position: sticky; top: var(--sp-4); }
}
.dashgrid__rail, .dashgrid__haupt { display: flex; flex-direction: column; gap: var(--sp-4); }

.modul { padding: var(--sp-5); }
.modul__kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-2);
}

/* Coach und Gespräch — der wichtigste Weg auf dieser Seite. */
.modul--chat { border-top: 3px solid var(--v-accent); }
.coach { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.coach__bild {
  flex: none; width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--v-brand);
  color: #fff; font-size: 19px; font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 3px 12px rgba(86, 63, 192, .3);
}

.vorschlaege { display: flex; flex-direction: column; gap: 6px; }
.vorschlag {
  padding: 9px 12px;
  border: 1px solid var(--v-hair); border-radius: var(--r-card);
  background: #fff; color: var(--v-body);
  font: inherit; font-size: 12.5px; line-height: 1.4;
  text-align: left; cursor: pointer;
  transition: border-color 150ms, color 150ms;
}
.vorschlag:hover { border-color: var(--v-accent); color: var(--v-accent); }

.bereiche { display: flex; flex-direction: column; margin-top: var(--sp-4); }
.bereich {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 11px 0; border-top: 1px solid var(--v-hair-2);
}
.bereich:first-child { border-top: 0; }
.bereich__name { font-size: 13.5px; color: var(--v-muted); }
.bereich--offen .bereich__name { color: var(--v-ink); font-weight: 600; }
.bereich__cta {
  border: 0; background: none; padding: 0;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--v-accent); cursor: pointer;
}
.bereich__cta:hover { text-decoration: underline; }

/* Radar */
.radar { margin-top: var(--sp-4); }
.radar svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.radar__flaeche { animation: netzAuf .7s cubic-bezier(.16, 1, .3, 1) both; transform-origin: center; }
@keyframes netzAuf { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.radar__legende {
  display: flex; justify-content: center; gap: var(--sp-5);
  margin-top: var(--sp-2); font-size: 12px; color: var(--v-muted);
}
.radar__legende span { display: flex; align-items: center; gap: 7px; }
.radar__marke { width: 14px; height: 3px; border-radius: 2px; display: block; }
.radar__marke--ist { background: var(--v-accent); }
.radar__marke--soll { background: repeating-linear-gradient(90deg, rgba(86,63,192,.55) 0 4px, transparent 4px 8px); }

.mehr { margin-top: var(--sp-4); }
.mehr summary {
  cursor: pointer; list-style: none;
  font-size: 12.5px; font-weight: 600; color: var(--v-accent);
}
.mehr summary::-webkit-details-marker { display: none; }
.mehr summary::before { content: '▸ '; }
.mehr[open] summary::before { content: '▾ '; }

/* Fokusfelder */
.fokus { list-style: none; margin: var(--sp-4) 0 0; padding: 0; counter-reset: f; }
.fokus__item {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: baseline; gap: var(--sp-3);
  padding: 13px 0; border-top: 1px solid var(--v-hair-2);
}
.fokus__item:first-child { border-top: 0; }
.fokus__nr { font-size: 11.5px; font-weight: 600; color: var(--v-muted); }
.fokus__name { display: block; font-size: 14.5px; font-weight: 600; color: var(--v-ink); }
.fokus__text { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--v-muted); }
.fokus__wert { font-size: 13px; font-weight: 600; color: var(--v-accent); }

.modul--challenge { border-top: 3px solid var(--v-deep); }