/* ═══ Analyse & Prognose (Funnel) ══════════════════════════════════════════
   Nur Haus-Tokens. Die Signalfarben tragen Bedeutung, keine Dekoration:
   good = trägt, bad = zieht Geld, warn = handeln, mute = wir wissen es nicht.
   Der letzte Fall ist der wichtigste — ohne ihn verkauft eine Prognose
   Sicherheit, die sie nicht hat.

   ALLE Klassen dieser Datei tragen das Präfix pvx-. Grund: der Vorgänger
   benutzte `muted`, `tbl`, `ta-r`, `btn-prim` — Namen, zu denen es in der
   Konsole KEINE Regel gibt. Der Hinweistext stand dadurch in voller Tinte
   neben dem Fließtext, der Hauptknopf war optisch kein Hauptknopf. Ein
   Präfix mit eigener Datei macht die Lücke messbar statt unsichtbar;
   docs/guard-predict-ablauf.mjs prüft, dass jede benutzte Klasse eine Regel hat. */

.pvx{display:flex;flex-direction:column;gap:18px}

/* ── Einleitung ─────────────────────────────────────────────────────────
   Steht auf BEIDEN Abteilungen und sagt in einem Satz, was diese hier tut
   und was die andere tut. Ohne sie ist die Trennung eine Behauptung. */
.pvx-lead{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--lime);
  border-radius:var(--r-sm);padding:16px 20px;font:400 .95rem/1.6 var(--sans);color:var(--ink-soft);max-width:none}
.pvx-lead b{color:var(--ink);font-weight:800}
.pvx-a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.pvx-a:hover{color:var(--lime)}

/* ── Ablauf-Leiste — das Bedienelement ──────────────────────────────────
   Nummer, Titel, Zustand. Ein gesperrter Schritt bleibt sichtbar und trägt
   seinen Grund; ihn auszublenden zerreißt die Abfolge genau dort, wo jemand
   nicht weiterkommt. */
.pvx-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;
  list-style:none;margin:0;padding:0;counter-reset:none}
.pvx-step{display:flex;flex-direction:column;gap:3px;position:relative;
  background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--line-strong);
  border-radius:var(--r-sm);padding:12px 14px 13px;min-width:0;cursor:pointer;
  transition:border-color .16s var(--ease),background .16s var(--ease)}
.pvx-step:hover{background:var(--surface-2)}
.pvx-step-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:999px;
  background:var(--surface-3);color:var(--ink-faint);font:800 .72rem/1 var(--disp);flex:none}
.pvx-step-t{font:700 .9rem/1.3 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.pvx-step-s{font:400 .74rem/1.4 var(--sans);color:var(--ink-faint);overflow-wrap:anywhere}
/* Ein noch nicht begangener, aber erreichbarer Schritt. Braucht eine eigene Regel, auch wenn sie
   nur den Grundzustand bestätigt — sonst ist der Zustand im DOM behauptet und im Bild nicht da. */
.pvx-step.is-open{border-top-color:var(--line-strong)}
.pvx-step.is-now{border-top-color:var(--lime);background:var(--surface-2)}
.pvx-step.is-now .pvx-step-n{background:var(--lime);color:var(--on-lime)}
.pvx-step.is-done{border-top-color:var(--good)}
.pvx-step.is-done .pvx-step-n{background:var(--good-bg);color:var(--good)}
/* Erledigt UND aktuell: die Spur bleibt Lime (wo stehe ich), der Haken bleibt gruen (was ist
   erledigt). Zwei Aussagen, zwei Traeger — nicht eine, die die andere verdraengt. */
.pvx-step.is-now.is-erledigt .pvx-step-n{background:var(--good-bg);color:var(--good)}
.pvx-step.is-lock{cursor:not-allowed;opacity:.62;border-top-style:dashed}
.pvx-step.is-lock .pvx-step-s{color:var(--warn)}

/* ── Schritt-Kopf ─────────────────────────────────────────────────────── */
.pvx-panel{display:flex;flex-direction:column;gap:14px}
.pvx-sh{display:flex;flex-direction:column;gap:6px}
.pvx-sh-n{font:800 .68rem/1 var(--sans);letter-spacing:.12em;color:var(--ink-faint)}
.pvx-sh-t{font:800 clamp(1.25rem,2.4vw,1.7rem)/1.2 var(--disp);letter-spacing:-.02em;color:var(--ink);margin:0}
.pvx-p{font:400 .95rem/1.6 var(--sans);color:var(--ink-soft);margin:0;max-width:76ch}
.pvx-p b{color:var(--ink);font-weight:700}
.pvx-hint{font:400 .8rem/1.5 var(--sans);color:var(--ink-faint);display:block;overflow-wrap:anywhere}

/* ── Kasten ───────────────────────────────────────────────────────────── */
.pvx-card{padding:0;overflow:hidden}
.pvx-card-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:15px 20px;border-bottom:1px solid var(--line)}
.pvx-card-h b{font:800 .98rem/1.3 var(--sans);color:var(--ink)}
.pvx-card-b{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.pvx-card-b>.pvx-card{border:0;box-shadow:none;padding:0}

/* ── Kennzahlen ───────────────────────────────────────────────────────── */
.pvx-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pvx-kpis-3{grid-template-columns:repeat(3,1fr)}
.pvx-kpis-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.pvx-kpis-4,.pvx-kpis-3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pvx-kpis,.pvx-kpis-3,.pvx-kpis-4{grid-template-columns:1fr}}
.pvx-kpi{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;min-width:0}
.pvx-kpi-l{font:800 .68rem/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.pvx-kpi-v{font:800 1.6rem/1.15 var(--disp);margin-top:7px;font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.pvx-kpi-s{font:400 .76rem/1.5 var(--sans);color:var(--ink-faint);margin-top:5px;overflow-wrap:anywhere}
.pvx-kpi.t-good .pvx-kpi-v{color:var(--good)} .pvx-kpi.t-bad .pvx-kpi-v{color:var(--bad)}
.pvx-kpi.t-warn .pvx-kpi-v{color:var(--warn)} .pvx-kpi.t-info .pvx-kpi-v{color:var(--info)}
/* „wir wissen es nicht" bekommt eine eigene Fläche, keine eigene Farbe — eine
   Farbe wäre eine Aussage. Die Schraffur sagt: hier ist nichts zu holen. */
.pvx-kpi.t-mute{background:repeating-linear-gradient(45deg,var(--surface-3) 0 6px,transparent 6px 12px)}
.pvx-na,.pvx-range{color:var(--ink-faint);font-size:1.05rem;letter-spacing:.02em}

/* ── Chips ────────────────────────────────────────────────────────────── */
.pvx-chip{display:inline-block;font:800 .62rem/1 var(--sans);letter-spacing:.09em;padding:5px 9px;
  border-radius:999px;white-space:nowrap;text-transform:uppercase}
.pvx-chip.t-good{background:var(--good-bg);color:var(--good)} .pvx-chip.t-bad{background:var(--bad-bg);color:var(--bad)}
.pvx-chip.t-warn{background:var(--warn-bg);color:var(--warn)} .pvx-chip.t-info{background:var(--info-bg);color:var(--info)}
.pvx-chip.t-mute{background:transparent;color:var(--ink-faint);border:1px dashed var(--line-strong)}

/* ── Hinweis-Streifen ─────────────────────────────────────────────────── */
.pvx-notes{display:flex;flex-direction:column;gap:7px}
.pvx-note{border-left:3px solid var(--warn);background:var(--warn-bg);padding:10px 14px;
  border-radius:0 var(--r-sm) var(--r-sm) 0;font:400 .88rem/1.55 var(--sans);color:var(--ink)}
.pvx-honesty{border-left-color:var(--line-strong);background:var(--surface-2);color:var(--ink-soft)}

/* ── Datenquellen (Analyse, Schritt 1) ────────────────────────────────── */
.pvx-src{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.pvx-srccard{display:flex;flex-direction:column;gap:9px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:18px 20px;min-width:0}
.pvx-srccard b{font:800 1rem/1.3 var(--sans);color:var(--ink)}
.pvx-srccard .btn{margin-top:auto}

/* ── Tabellen ─────────────────────────────────────────────────────────── */
.pvx-tbl{width:100%}
.pvx-tbl td{vertical-align:top}
.pvx-r{text-align:right;font-variant-numeric:tabular-nums}
.pvx-tt{font:700 .88rem/1.4 var(--sans);color:var(--ink)}

/* ── Marktlage ────────────────────────────────────────────────────────── */
.pvx-rhythm{padding:11px 0;border-bottom:1px solid var(--line)}
.pvx-rhythm:last-child{border-bottom:0}
.pvx-rhythm b{margin-right:10px;color:var(--ink)}
.pvx-rhythm.is-off b{color:var(--ink-faint)}
.pvx-traits{display:flex;flex-direction:column}
.pvx-trait{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--line)}
.pvx-trait:last-child{border-bottom:0}
.pvx-trait b{color:var(--ink)}
.pvx-lift{margin-left:auto;font:800 .85rem/1 var(--disp);color:var(--good);font-variant-numeric:tabular-nums}

/* ── Grundlage (Prognose, Schritt 1) ──────────────────────────────────── */
.pvx-basis{display:flex;flex-direction:column}
.pvx-basis-row{display:grid;grid-template-columns:auto minmax(0,170px) minmax(0,1fr);gap:12px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line)}
.pvx-basis-row:last-child{border-bottom:0}
@media(max-width:640px){.pvx-basis-row{grid-template-columns:auto minmax(0,1fr)}
  .pvx-basis-row .pvx-hint{grid-column:2}}
.pvx-basis-i{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:999px;
  font:800 .72rem/1 var(--disp);background:var(--surface-3);color:var(--ink-faint)}
.pvx-basis-row.is-ok .pvx-basis-i{background:var(--good-bg);color:var(--good)}
.pvx-basis-row.is-off b{color:var(--ink-faint)}

/* ── Fallauswahl (Prognose, Schritt 2) ────────────────────────────────── */
.pvx-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.pvx-pick{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;
  cursor:pointer;min-width:0;transition:border-color .16s var(--ease)}
.pvx-pick:hover{border-color:var(--line-strong)}
.pvx-pick.on{border-color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime)}
.pvx-pick b{font:700 .92rem/1.35 var(--sans);color:var(--ink);overflow-wrap:anywhere}

/* ── Urteil (Prognose, Schritt 3) ─────────────────────────────────────── */
.pvx-verdict{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow)}
@media(max-width:860px){.pvx-verdict{grid-template-columns:1fr}}
.pvx-eyebrow{font:800 .68rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.pvx-word{font:800 clamp(1.7rem,3.6vw,2.9rem)/1.05 var(--disp);letter-spacing:-.03em;margin-bottom:8px;overflow-wrap:anywhere}
.pvx-word.t-good{color:var(--good)} .pvx-word.t-bad{color:var(--bad)}
.pvx-word.t-warn{color:var(--warn)} .pvx-word.t-info{color:var(--info)}
.pvx-word.t-mute{color:var(--ink-faint);font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:700;letter-spacing:0}

/* ── Eingriffe (Prognose, Schritt 4) ──────────────────────────────────── */
.pvx-iv{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;background:var(--surface);cursor:pointer}
.pvx-iv.on{border-color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime)}
.pvx-iv.is-blocker{border-left:3px solid var(--bad)} .pvx-iv.is-measure{border-left:3px solid var(--warn);cursor:default}
.pvx-iv-cb{width:18px;height:18px;margin-top:2px;accent-color:var(--lime);flex:none}
.pvx-iv-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.pvx-iv-what{font:700 .92rem/1.45 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.pvx-iv-delta{font:800 1rem/1.2 var(--disp);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.pvx-iv-delta em{display:block;font:800 .62rem/1.2 var(--sans);font-style:normal;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:3px}
.pvx-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pvx-tags span{font:800 .62rem/1 var(--sans);letter-spacing:.06em;padding:4px 7px;border-radius:6px;
  background:var(--surface-3);color:var(--ink-faint)}
.pvx-tags span.t-bad{background:var(--bad-bg);color:var(--bad)} .pvx-tags span.t-warn{background:var(--warn-bg);color:var(--warn)}

/* ── Zugänge / Formulare ──────────────────────────────────────────────── */
.pvx-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.pvx-two{grid-template-columns:1fr}}
.pvx-conn{display:flex;flex-direction:column}
.pvx-conn-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;gap:12px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line)}
.pvx-conn-row:last-child{border-bottom:0}
.pvx-conn-row b{color:var(--ink)}
@media(max-width:700px){.pvx-conn-row{grid-template-columns:1fr}}

/* ── Brücke zwischen den Abteilungen ──────────────────────────────────── */
.pvx-bridge{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--surface-2);border:1px dashed var(--line-strong);border-radius:var(--r-sm);padding:18px 22px}
.pvx-bridge.is-ready{border-style:solid;border-color:var(--lime)}
.pvx-bridge b{display:block;font:800 1rem/1.3 var(--sans);color:var(--ink);margin-bottom:4px}
.pvx-bridge .btn{flex:none}

.pvx-actions{display:flex;gap:10px;flex-wrap:wrap}
.pvx .btn.is-off{opacity:.5;cursor:not-allowed}
@media(max-width:640px){
  .pvx-actions{flex-direction:column;align-items:stretch}
  .pvx-actions .btn,.pvx-bridge .btn{width:100%;justify-content:center;white-space:normal;height:auto;min-height:44px;padding:11px 17px}
}