/* Funnel analytics dashboard — elegant, light/dark, brand navy/green. */
:root{
  --navy:#204987; --navy-dark:#15335F; --green:#00A651; --amber:#E8A628; --red:#C0392B;
  --ink:#12161C; --muted:#5A6470; --line:#E4E7EC; --bg:#F4F6F9; --card:#ffffff;
  --shadow:0 1px 2px rgba(18,22,28,.04),0 4px 16px rgba(18,22,28,.05);
  --radius:14px; --pos:#00A651; --neg:#C0392B;
  --c1:#204987; --c2:#00A651; --c3:#E8A628; --c4:#3E92CC; --c5:#8E5FD3; --c6:#C0392B; --c7:#6B7280;
}
@media (prefers-color-scheme:dark){
  :root{--ink:#E7ECF3; --muted:#94A0B0; --line:#2A3340; --bg:#0E141C; --card:#161E28;
    --navy:#5E93D6; --navy-dark:#3E6DA8; --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35);
    --c1:#5E93D6; --c4:#57B0E8;}
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);
  color:var(--ink);line-height:1.5;font-size:14px;-webkit-font-smoothing:antialiased}
a{color:var(--navy)}
button{font-family:inherit;cursor:pointer}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:20px;padding:12px 22px;flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:-.02em;font-size:15px;display:flex;align-items:center;gap:8px;color:var(--ink)}
.brand .dot{color:var(--green)}
.funnel-tabs{display:flex;gap:6px}
.funnel-tab{border:1px solid var(--line);background:transparent;color:var(--muted);padding:6px 14px;
  border-radius:99px;font-size:13px;font-weight:600}
.funnel-tab.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.funnel-tab:disabled{opacity:.5;cursor:not-allowed}
.controls{margin-left:auto;display:flex;align-items:center;gap:12px}
select,input[type=date]{font-family:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--line);
  border-radius:9px;background:var(--card);color:var(--ink)}
.win-label{font-size:12px;color:var(--muted)}
.btn-mini{border:1px solid var(--line);background:transparent;color:var(--muted);padding:7px 12px;
  border-radius:9px;font-size:13px;font-weight:600}
.btn-mini:hover{border-color:var(--navy);color:var(--navy)}
/* ---- Datumsbereich-Picker ---- */
.dr{position:relative}
.dr-trigger{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:9px;
  padding:7px 12px;font-size:13px;font-weight:600;white-space:nowrap}
.dr-trigger:hover{border-color:var(--navy)}
.dr-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:70;background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.28);padding:14px}
.dr-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.dr-title{font-size:12.5px;font-weight:700;color:var(--muted)}
.dr-nav{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:8px;
  width:28px;height:28px;font-size:16px;line-height:1}
.dr-nav:hover{border-color:var(--navy);color:var(--navy)}
.dr-months{display:flex;gap:22px}
.dr-mname{font-size:12px;font-weight:800;text-align:center;margin-bottom:8px;color:var(--ink)}
.dr-grid{display:grid;grid-template-columns:repeat(7,32px);gap:0 0}
.dr-wd{font-size:10.5px;font-weight:700;color:var(--muted);text-align:center;padding-bottom:5px}
.dr-empty{height:30px}
.dr-day{height:30px;border:0;background:transparent;color:var(--ink);font-size:12.5px;cursor:pointer;
  position:relative;border-radius:0}
.dr-day:hover:not(:disabled){box-shadow:inset 0 0 0 1.5px var(--navy);border-radius:8px}
.dr-day.dr-future{color:var(--line);cursor:not-allowed}
/* Spanne: durchgehender Streifen, nur die Enden rund — das macht den Bereich lesbar */
.dr-day.dr-in{background:var(--navy-soft,rgba(32,73,135,.14))}
.dr-day.dr-start{border-radius:8px 0 0 8px}
.dr-day.dr-end{border-radius:0 8px 8px 0}
.dr-day.dr-start.dr-end{border-radius:8px}
.dr-day.dr-start,.dr-day.dr-end{background:var(--navy);color:#fff;font-weight:800}
.dr-day.dr-today:not(.dr-in){box-shadow:inset 0 0 0 1px var(--muted);border-radius:8px}
.dr-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--line)}
.dr-hint{font-size:11.5px;color:var(--muted);font-weight:600}
@media (prefers-color-scheme:dark){.dr-day.dr-in{background:rgba(94,147,214,.22)}}
@media(max-width:700px){.dr-months{flex-direction:column;gap:14px}}

.date-range{display:flex;gap:6px;align-items:center}
/* color-scheme statt eines Filters auf dem Icon: damit rendert der Browser das
   Kalendersymbol UND das aufklappende Kalenderblatt passend zum Theme — im Dunkeln
   war das schwarze Symbol auf dunkelblauem Grund kaum zu sehen. */
.date-range input[type=date]{cursor:pointer;color-scheme:light}
@media (prefers-color-scheme:dark){.date-range input[type=date]{color-scheme:dark}}
:root[data-theme="dark"] .date-range input[type=date]{color-scheme:dark}
:root[data-theme="light"] .date-range input[type=date]{color-scheme:light}
/* Das Symbol soll die ganze Fläche abdecken: geklickt wird ohnehin überall, das
   verhindert nur, dass der Textcursor im Feld erscheint. */
.date-range input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer}

/* ---- view tabs ---- */
.tabs{display:flex;gap:2px;padding:0 22px;background:var(--card);border-bottom:1px solid var(--line);
  overflow-x:auto;position:sticky;top:53px;z-index:15}
.tabs button{background:none;border:none;padding:13px 16px;font-size:13.5px;font-weight:600;color:var(--muted);
  border-bottom:2px solid transparent;white-space:nowrap}
.tabs button.active{color:var(--navy);border-bottom-color:var(--navy)}

main{padding:22px;max-width:1180px;margin:0 auto}
.panel{display:none}
/* Der Abstand zwischen den Bloecken gehoert an den Container, nicht an jede Karte:
   Karten, die direkt untereinander im Panel stehen (Funnel + Vergleich, ROAS +
   Pipeline), klebten sonst aneinander, waehrend nebeneinander liegende Karten
   ueber das grid-gap sehr wohl Luft hatten. */
.panel.active{display:flex;flex-direction:column;gap:20px;animation:fade .25s ease}
/* .panel.active statt .panel: die eigenen margin-bottom von .kpis/.rates/.note stehen
   weiter unten in der Datei und haetten sonst bei gleicher Spezifitaet gewonnen —
   dann kaeme zum gap noch ihr Rand dazu (die doppelten Abstaende). Verschachtelte
   .note in Karten behalten ihren Rand, weil die Regel nur direkte Kinder trifft. */
.panel.active > *{margin-top:0;margin-bottom:0}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---- cards + grid ---- */
.grid{display:grid;gap:16px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-bottom:12px}
.kpi .label{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.kpi .value{font-size:28px;font-weight:800;letter-spacing:-.03em;margin:4px 0 2px;color:var(--ink)}
.kpi .sub{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.delta{font-weight:700}
.delta.pos{color:var(--pos)} .delta.neg{color:var(--neg)} .delta.flat{color:var(--muted)}
.kpi .spark{height:34px;margin-top:8px}
/* Abgesetzte Zweitzahl in einer Kachel (z. B. "Unser Anteil davon"). Sie ist
   aus der Hauptzahl abgeleitet und gehoert deshalb unter sie — als eigene
   Kachel daneben konkurrierten drei gleich grosse Zahlen miteinander und keine
   stach heraus. Kleiner als .value, aber klar eine Zahl und keine Fussnote. */
.kpi-split{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.kpi-split .k-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.kpi-split .k-val{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--navy);margin-top:2px;line-height:1.15}
.kpi-split .k-note{font-size:11px;color:var(--muted);margin-top:3px}

.rates{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:20px}
.rate{text-align:center;padding:16px}
.rate .r-val{font-size:24px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.rate .r-label{font-size:11.5px;color:var(--muted);margin-top:3px;font-weight:600}
.rate.primary{border:1.5px solid var(--navy)}
.r-target{font-size:11px;font-weight:700;margin-top:6px}
.r-target.beat{color:var(--green)}
.r-target.miss{color:var(--red)}

/* benchmark comparison strip (funnel tab) */
.bench-cmp{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.bcmp-row{display:grid;grid-template-columns:150px 1fr 78px;align-items:center;gap:16px}
.bcmp-label{font-size:13px;font-weight:700;color:var(--ink)}
.bcmp-bars{display:flex;flex-direction:column;gap:6px}
.bcmp-bar{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}
.bcmp-track{position:relative;background:var(--bg);border-radius:6px;height:18px;overflow:hidden}
.bcmp-fill{height:100%;border-radius:6px;transition:width .5s ease}
.bcmp-fill.new{background:linear-gradient(90deg,var(--navy),var(--navy-dark))}
.bcmp-fill.old{background:#93a1b2}
.bcmp-v{font-size:11.5px;font-weight:700;white-space:nowrap;color:var(--muted);min-width:82px;text-align:right}
.bcmp-delta{text-align:right;font-weight:800;font-size:13.5px}
.bcmp-delta.beat{color:var(--green)}
.bcmp-delta.miss{color:var(--red)}
@media(max-width:640px){.bcmp-row{grid-template-columns:1fr auto;gap:6px 12px}.bcmp-bars{grid-column:1/-1}}

/* refresh button */
.btn-mini.refresh{font-size:16px;line-height:1;padding:6px 11px}
.btn-mini.refresh:active{transform:rotate(180deg);transition:transform .3s}

.two-col{grid-template-columns:1.6fr 1fr}
/* Scrollt statt Beschriftungen zu verlieren (Quiz-Insights mit vielen Banken). */
/* Feste Hoehe, nicht max-height: so sind alle Karten einer Reihe gleich hoch und
   nur die mit zu vielen Balken (Banken) scrollt intern, statt die ganze Reihe
   aufzuziehen und daneben Leerraum zu hinterlassen. */
.chart-scroll{height:240px;overflow-y:auto;overflow-x:hidden;margin-right:-6px;padding-right:6px}
.chart-scroll::-webkit-scrollbar{width:8px}
.chart-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.chart-wrap{position:relative;height:300px}
.chart-wrap.sm{height:220px}
.chart-wrap.lg{height:340px}

/* ---- funnel bars ---- */
.funnel-bars{display:flex;flex-direction:column;gap:8px}
.fbar{display:grid;grid-template-columns:170px 1fr;align-items:center;gap:12px}
.fbar .fb-label{font-size:13px;color:var(--muted);font-weight:600;text-align:right}
.fb-track{background:var(--bg);border-radius:8px;height:38px;position:relative}
.fb-fill{height:100%;background:linear-gradient(90deg,var(--navy),var(--navy-dark));border-radius:8px;
  display:flex;align-items:center;min-width:0;transition:width .5s ease}
.fb-fill.lead{background:linear-gradient(90deg,var(--green),#00863f)}
.fb-in{color:#fff;font-weight:700;font-size:13px;padding-left:12px;white-space:nowrap}
.fb-num{position:absolute;top:50%;transform:translateY(-50%);margin-left:8px;font-size:13px;font-weight:700;
  color:var(--ink);white-space:nowrap}
.fb-pct{opacity:.7;font-weight:600;margin-left:4px}
.fb-meta{font-size:11.5px;color:var(--muted);position:absolute;right:10px;top:50%;transform:translateY(-50%)}
.fb-drop{color:var(--red);font-weight:600}

/* ---- tables ---- */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:9px 10px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.bar-cell{position:relative}
.bar-cell .bg{position:absolute;inset:0;background:rgba(32,73,135,.08);border-radius:4px}
.pill{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:700}
.pill.green{background:rgba(0,166,81,.12);color:var(--green)}
.pill.navy{background:rgba(32,73,135,.12);color:var(--navy)}
.pill.amber{background:rgba(232,166,40,.15);color:#a06c00}

.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.card-head h3{margin-bottom:0}
/* Mehrere Umschalter im Kartenkopf nebeneinander (Reihe + Granularitaet). */
.toggles{display:inline-flex;gap:8px;flex-wrap:wrap}
.gran-toggle{display:inline-flex;gap:2px;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:2px}
.gran-btn{border:none;background:none;color:var(--muted);font-size:12px;font-weight:700;padding:5px 12px;border-radius:7px}
.gran-btn.active{background:var(--card);color:var(--navy);box-shadow:var(--shadow)}
/* Überschrift gehört optisch zur folgenden Karte: oben mehr Luft, unten fast keine.
   Muss das margin:0 der Panel-Kinder überschreiben, daher hier weiter unten. */
.panel.active > .section-title{margin:10px 0 -8px}
.section-title{font-size:15px;font-weight:800;letter-spacing:-.01em;margin:26px 0 12px;color:var(--ink)}
.muted{color:var(--muted)} .small{font-size:12px}
.note{background:rgba(232,166,40,.1);border:1px solid rgba(232,166,40,.35);border-radius:10px;
  padding:10px 14px;font-size:12.5px;color:var(--ink);margin-bottom:16px}
.note.warn{background:rgba(192,57,43,.08);border-color:rgba(192,57,43,.35)}
/* Warnzeile im Partner-Baum: ein fehlender oder widerspruechlicher Satz macht
   unseren Anteil still zu hoch. Muss ohne Aufklappen ins Auge fallen. */
.vp-warn td{color:#c0392b;background:rgba(192,57,43,.07);font-size:12px;padding-top:4px;padding-bottom:4px}
.leak-banner{display:flex;gap:14px;align-items:center;
  background:linear-gradient(90deg,rgba(0,166,81,.10),rgba(32,73,135,.05));
  border:1px solid rgba(0,166,81,.3);border-left:4px solid var(--green);border-radius:12px;
  padding:14px 18px;margin-bottom:16px}
.leak-ico{font-size:24px;flex:none}
.leak-t{font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--ink)}
.leak-s{font-size:12.5px;color:var(--muted);margin-top:2px}
.stat-inline{display:flex;gap:26px;flex-wrap:wrap;margin-top:6px}
.stat-inline .s .n{font-size:22px;font-weight:800;color:var(--ink)}
.stat-inline .s .l{font-size:11.5px;color:var(--muted)}

.quiz-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.empty{text-align:center;padding:50px 20px;color:var(--muted)}
.empty .big{font-size:40px;margin-bottom:10px}
/* Ein ausgefallener Abschnitt: nur dieser Tab zeigt die Karte, der Rest der
   Seite bleibt stehen und aktuell. */
.section-error{text-align:center;padding:40px 20px}
.section-error .big{font-size:32px;margin-bottom:8px}
.section-error .retry{margin-top:12px}
/* Nachladen eines einzelnen Tabs: abblenden statt Vollbild-Overlay — und das
   Bisherige stehen lassen statt es zu leeren. Die Beschriftung sagt an, dass die
   sichtbaren Zahlen noch zum alten Zeitraum gehoeren. */
.panel.busy{opacity:.55;pointer-events:none;transition:opacity .15s;position:relative}
.panel.busy::before{content:"wird aktualisiert …";position:sticky;top:8px;z-index:5;
  align-self:center;background:var(--navy);color:#fff;font-size:12px;font-weight:700;
  padding:5px 12px;border-radius:999px;box-shadow:var(--shadow)}
.badge{display:inline-block;padding:4px 12px;border-radius:99px;font-size:12px;font-weight:700}
.badge.on{background:rgba(0,166,81,.14);color:var(--green)}
.badge.off{background:rgba(192,57,43,.12);color:var(--red)}

#loading{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:50;font-weight:600;color:var(--muted)}
#loading.hide{display:none}
/* Fehlerbanner statt zerstoertem Overlay. Der alte Pfad ueberschrieb
   #loading.innerHTML und setzte .hide nie: das Overlay blieb fuer immer stehen,
   das Spinner-Markup war weg, und es gab keinen Weg zurueck ausser Neuladen.
   Nicht modal — Funnel, Zeitraum und Kanal bleiben bedienbar.
   [hidden] muss explizit gewinnen: display:flex schlaegt sonst die UA-Regel. */
.load-error{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;
  background:var(--red);color:#fff;box-shadow:0 4px 16px rgba(18,22,28,.25);font-weight:600}
.load-error[hidden]{display:none}
.load-error .btn-mini{border-color:rgba(255,255,255,.6);color:#fff}
.load-error .btn-mini:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.12)}
.spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--navy);border-radius:50%;
  animation:sp .7s linear infinite;margin:0 auto 12px}
@keyframes sp{to{transform:rotate(360deg)}}
@media(max-width:640px){.two-col{grid-template-columns:1fr}.fbar{grid-template-columns:110px 1fr}.fbar .fb-label{font-size:11px}}

/* Gestapelte Funnel-Stufe (Zustellwege) */
.fb-fill.seg{display:flex;overflow:hidden}
.fb-seg{display:block;height:100%;flex-shrink:0}
.fb-seg-seite{background:var(--green)}
.fb-seg-email{background:var(--c4)}
.fb-seg-whatsapp{background:var(--c3)}
.fb-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:10px;
  padding-left:182px;font-size:11.5px;color:var(--muted)}
.fb-legend span{display:inline-flex;align-items:center;gap:6px}
.fb-legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.fb-legend .muted{flex-basis:100%;padding-left:0}
@media(max-width:640px){.fb-legend{padding-left:0}}

/* Telefon-Abdeckung ueber der Revert-Grenze: rot markiert, damit die Kachel
   im Ueberflug auffaellt und nicht erst beim Lesen der Zahl. */
.card.rate.bad{border-color:var(--red)}
.card.rate.bad .r-val{color:var(--red)}

/* "2 von 7" statt einer Quote: das Verbindungswort tritt zurueck, damit die
   beiden Zahlen die Kachel tragen und nicht wie eine Prozentzahl gelesen wird.
   Siehe rateOrCount() in dashboard.js. */
.rate .r-val .of{font-size:15px;font-weight:600;color:var(--muted)}

/* ---- Ampel-Kacheln (Prüfung & Übergabe) ----
   Die Ampel faerbt den linken Rand, nicht die Zahl: die Farbe soll den Blick
   lenken, ohne mit dem Wert um Aufmerksamkeit zu konkurrieren. Schwellen kommen
   vom Server (pruefung.ziele), nie aus dem Stylesheet. */
.card.kpi.amp{border-left:4px solid var(--line)}
.card.kpi.amp-green{border-left-color:var(--green)}
.card.kpi.amp-yellow{border-left-color:var(--amber)}
.card.kpi.amp-red{border-left-color:var(--red)}
.amp-ziel{font-size:11px;color:var(--muted);margin-top:6px;font-weight:600}
/* Das Eurozeichen darf nicht allein in der Zeile stehen bleiben: bei
   "€ 2 176 629" brach der Wert sonst hinter dem Zeichen um. */
.card.kpi.amp .value{white-space:nowrap}
/* Sechs Kacheln auf der Uebersicht: mit 300px Mindestbreite werden daraus zwei
   Reihen zu drei statt einer Reihe zu fuenf plus einem Nachzuegler. */
.kpis.pruef{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
/* Mehrere Ueberschriften in EINER Karte (Diagramm + Tabelle + zweites Diagramm)
   brauchen Luft nach oben; .card h3 hat nur einen Rand nach unten. */
.card p + h3, .card table + h3, .card .chart-wrap + h3, .card .grid + h3,
.card .funnel-bars + h3{margin-top:22px}
.block-h{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:700;margin-bottom:12px}
/* Import-Abgleich: harte Befunde von Hinweisen trennen. Die Hinweiszeilen
   bleiben lesbar, treten aber zurueck — sie treiben keine Kachel. */
tr.zeile-befund td:first-child{border-left:3px solid var(--red);padding-left:9px}
tr.zeile-hinweis td{color:var(--muted)}
tr.zeile-hinweis td:first-child{border-left:3px solid var(--line);padding-left:9px}
/* Trichter mit eigener Verlustspalte. Feste Breite, damit die Balken aller
   Zeilen an derselben Stelle enden — `auto` wuerde je Zeile anders messen
   (jede .fbar ist ihr eigenes Grid) und die Balken gegeneinander verschieben. */
.fbar.drei{grid-template-columns:170px 1fr 168px}
.fb-verlust{font-size:12px;text-align:right;white-space:nowrap}
@media(max-width:640px){.fbar.drei{grid-template-columns:110px 1fr 110px}
  .fb-verlust{font-size:11px}}

/* --- Partner-Baum (bis vier Ebenen) ------------------------------------- */
/* Zahlen brechen nicht um: die Volumenspalte zeigte sonst "€" und den Betrag
   auf zwei Zeilen (09.09.2026). */
#p-partner table td.num, #p-partner table th.num { white-space: nowrap; }
#p-partner table td:nth-child(2) { white-space: nowrap; }
/* Farben AUSSCHLIESSLICH ueber die Tokens: feste Hex-Werte liessen die
   aufgeklappten Zeilen im Dunkelmodus weiss leuchten (Elias, 09.09.2026).
   Die Abhebung entsteht als halbtransparente Toenung auf --ink, die in beiden
   Themes funktioniert. */
.vp-kette-chip {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: rgba(32,73,135,.12); color: var(--navy);
  font-size: 11px; font-weight: 600; vertical-align: middle; white-space: nowrap;
}
/* Baumspalte: Linien liegen absolut in der Zelle, damit sie ueber die ganze
   Zeilenhoehe laufen und zwischen den Zeilen zusammenstossen. */
.vp-baum { position: relative; padding-left: 0; padding-right: 0; width: 1%; white-space: nowrap; }
.vp-baum-inhalt { display: inline-flex; align-items: center; min-width: 24px; padding-left: 2px; }
/* Die Namensspalte darf umbrechen, sonst schiebt ein langer Firmenname die
   Spalte "Unser Anteil" aus der Karte (gemessen 09.09.2026: 73 px Ueberlauf). */
#p-partner table td:nth-child(3) { max-width: 240px; white-space: normal; }
#p-partner table .vp-toggle { padding: 4px 7px; }
.vp-l { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; }
/* Etwas kraeftiger als --line: die reine Trennlinienfarbe verschwand im
   Dunkelmodus fast (09.09.2026). */
.vp-l--durch, .vp-l--kreuz, .vp-l--ecke, .vp-l--ecke-leer {
  border-left: 1px solid color-mix(in srgb, var(--muted) 55%, transparent);
}
.vp-l--kreuz::after, .vp-l--ecke::after {
  content: ''; position: absolute; left: 0; top: 50%; width: 13px;
  border-top: 1px solid color-mix(in srgb, var(--muted) 55%, transparent);
}
.vp-l--ecke, .vp-l--ecke-leer { height: 50%; bottom: auto; }
.vp-parent > td { border-top: 1px solid var(--line); }
.vp-sub > td { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.vp-eigen > td, .vp-behaelt > td { color: var(--muted); }
.vp-eigen > td.num, .vp-behaelt > td.num { color: var(--ink); }
.vp-behaelt > td { border-bottom: 1px solid var(--line); }
.vp-label { padding-left: 4px; white-space: nowrap; color: var(--ink); }
.vp-einzug { color: var(--muted); }
.vp-toggle { min-width: 24px; }