/* ═══ 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}

/* ── Band „Beispiel-Bestand" ───────────────────────────────────────────
   Steht ÜBER der Abteilung, nicht als Fussnote darunter. Eine Kennzeichnung,
   die man erst nach dem Lesen der Zahlen findet, hat ihren Zweck verfehlt. */
.pvx-demo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  background:var(--surface-3);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:13px 18px}
.pvx-demo b{font:800 .84rem/1.3 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.pvx-demo span{font:400 .84rem/1.55 var(--sans);color:var(--ink-soft)}
.pvx-demo .btn{flex:none}
@media(max-width:820px){.pvx-demo{grid-template-columns:1fr}.pvx-demo .btn{width:100%;justify-content:center}}

/* ── Die Akte (Drilldown) ──────────────────────────────────────────────
   Von rechts, die Tabelle bleibt dahinter stehen. Vorher wechselte ein
   Zeilenklick kommentarlos die Abteilung — der Mensch merkte nicht, dass er
   woanders ist. Kontext erhalten ist hier die eigentliche Leistung. */
.pvx-akte-hg{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:60;animation:pvxfade .18s var(--ease)}
@keyframes pvxfade{from{opacity:0}to{opacity:1}}
.pvx-akte{position:fixed;top:0;right:0;bottom:0;width:min(660px,100vw);z-index:61;display:flex;flex-direction:column;
  background:var(--surface);border-left:1px solid var(--line-strong);box-shadow:-18px 0 48px rgba(0,0,0,.22);
  animation:pvxein .2s var(--ease)}
@keyframes pvxein{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.pvx-akte-h{display:flex;align-items:center;justify-content:space-between;gap:14px;flex:none;
  padding:16px 20px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.pvx-akte-h b{font:800 1rem/1.3 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.pvx-akte-b{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 34px;display:flex;flex-direction:column;gap:14px}
/* Ohne diese Zeile stauchen sich die Karten in der scrollenden Spalte gegenseitig:
   ein Flex-Kind darf schrumpfen, und im Bild schoben sich die Kaesten uebereinander.
   Im gerenderten DOM ist alles korrekt — nur zu sehen war es falsch. */
.pvx-akte-b>*{flex:0 0 auto}
.pvx-akte-kopf{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}

/* Das Motiv fuehrt und traegt bewusst KEIN Karten-Chrome. Mit Rahmen und
   Kartenkopf sieht ein Werbemotiv aus wie eine Kennzahl unter Kennzahlen —
   genau das war die Beschwerde („ich muss die Anzeige sehen"). */
.pvx-motiv{margin:0;display:flex;flex-direction:column;gap:8px}
.pvx-motiv img{display:block;width:100%;max-width:100%;height:auto;border-radius:var(--r-sm);background:var(--surface-3)}
.pvx-motiv figcaption{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pvx-motiv-leer{display:flex;flex-direction:column;gap:7px;padding:26px 22px;border-radius:var(--r-sm);
  background:repeating-linear-gradient(45deg,var(--surface-3) 0 8px,transparent 8px 16px);
  border:1px dashed var(--line-strong);min-height:150px;justify-content:center}
.pvx-motiv-leer b{font:800 .95rem/1.3 var(--sans);color:var(--ink)}
.pvx-motiv-leer span{font:400 .85rem/1.55 var(--sans);color:var(--ink-soft)}
.pvx-akte-urteil{display:flex;flex-direction:column;gap:8px;min-width:0}

.pvx-fact{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:12px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--line)}
.pvx-fact:last-child{border-bottom:0}
.pvx-fact-k{font:800 .7rem/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.pvx-fact-v{font:400 .9rem/1.5 var(--sans);color:var(--ink);overflow-wrap:anywhere}
@media(max-width:560px){.pvx-fact{grid-template-columns:1fr;gap:2px}}
.pvx-quote{font:400 1rem/1.6 var(--sans);color:var(--ink);margin:0 0 10px;padding-left:14px;
  border-left:3px solid var(--line-strong);overflow-wrap:anywhere}

.pvx-drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:12px 0}
@media(max-width:760px){.pvx-drei{grid-template-columns:1fr}}
.pvx-drei>div>b{display:block;font:800 .7rem/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:6px}

/* ── Schritt 4: Ihr Stand ─────────────────────────────────────────────── */
.pvx-stand{display:flex;flex-direction:column}
.pvx-standrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;
  padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  margin-bottom:8px;cursor:pointer;transition:border-color .16s var(--ease)}
.pvx-standrow:hover{border-color:var(--line-strong);background:var(--surface-2)}
.pvx-standrow b{display:block;font:700 .92rem/1.35 var(--sans);color:var(--ink);overflow-wrap:anywhere}
@media(max-width:640px){.pvx-standrow{grid-template-columns:1fr;gap:7px}}

.pvx-oeffnen{font:700 .78rem/1.3 var(--sans);color:var(--ink-faint);white-space:nowrap}
.pvx-tbl tbody tr:hover .pvx-oeffnen,.pvx-standrow:hover .pvx-oeffnen{color:var(--lime)}
.pvx-srccard.is-empfohlen{border-color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime)}

/* Trefferquote gilt fuer das WERKZEUG, nicht fuer diesen Fall — deshalb eine
   ruhige Dauerzeile am Fuss und kein nummerierter Schritt. */
.pvx-quote-row{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:14px 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pvx-quote-row b{display:block;font:800 .88rem/1.3 var(--sans);color:var(--ink);margin-bottom:3px}
.pvx-tags span.t-good{background:var(--good-bg);color:var(--good)}

.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}
}