/* cf-vorhaben.css — Grundsatz-Regel des Operators (2026-07-30):
   JEDE Information geht ueber das Slide-out von rechts. Das Slide-out ist NICHT neu gebaut,
   es ist das bestehende .sidep aus der Konsole, erweitert um zwei Dinge, die gefehlt haben:
   eine zweite Ausfahr-Stufe und eine Leiste mit Unterkategorien.
   Alles hier ist ADDITIV — keine bestehende Regel wird ueberschrieben, nur Klassen ergaenzt,
   die es vorher nicht gab. */

/* ================================================================ Weiss-Defekt
   Gemessen am 2026-07-30 im Dunkel-Design: die nativen Radios und Kaestchen im Blatt
   "Vorhaben anlegen" rendern WEISS — Chrome zeichnet sie selbst, das Blatt-CSS erreicht
   sie nicht. Die Wahl-Flaeche war dunkel, der Punkt darin leuchtete weiss.
   Der Fix greift KONSOLENWEIT, nicht nur im Vorhaben: dasselbe Element steht in jedem
   Blatt der Konsole. Ein Fix nur an einer Stelle waere die naechste weisse Flaeche. */
input[type="radio"], input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;flex:none;margin:0;position:relative;
  border:1.5px solid var(--line-strong);background:var(--surface-3);
  transition:border-color .15s var(--ease),background .15s var(--ease);cursor:pointer}
input[type="radio"]{border-radius:50%}
input[type="checkbox"]{border-radius:5px}
input[type="radio"]:checked, input[type="checkbox"]:checked{border-color:var(--lime);background:var(--lime)}
input[type="radio"]:checked::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--on-lime)}
input[type="checkbox"]:checked::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:10px;
  border:solid var(--on-lime);border-width:0 2px 2px 0;transform:rotate(42deg)}
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(207,221,40,.28)}
input[type="radio"]:disabled, input[type="checkbox"]:disabled{opacity:.45;cursor:not-allowed}
/* Native Auswahlfelder zeichnete Chrome ebenfalls selbst — gleiche Ursache, gleiche Kur. */
select.inp{appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2383858C' stroke-width='1.8' stroke-linecap='round'><path d='M6 8l4 4 4-4'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center}
select.inp option{background:var(--surface);color:var(--ink)}

/* ========================================================== Slide-out, drei Stufen
   Ausfahren heisst NICHT dasselbe breiter ziehen — das waere Skalierung, kein Entwurf.
   Jede Stufe ist eine eigene Komposition:

   1 Lesespur    560 px   eine Spalte, Unterkategorien als Reiter oben, das Wesentliche.
   2 Arbeit      72 vw    zwei Spalten, Diagramme treten hinzu, Kennzahlen werden Kacheln.
   3 Buehne      bis zur Navigation. Die Unterkategorien wandern nach LINKS und werden
                 zur stehenden Seiten-Navigation — dort ist Platz fuer weitere Punkte,
                 ohne dass etwas enger wird. Der Inhalt laeuft drei- bis vierspaltig.

   Weiter als bis zur Navigation faehrt nichts: die Konsole soll erreichbar bleiben. */
.sidep.cf-side{width:min(560px,100%);
  transition:transform .28s var(--ease),width .34s var(--ease)}
.sidep.cf-side.stufe2{width:min(1100px,72vw)}
.sidep.cf-side.stufe3{width:calc(100vw - var(--railw))}
body.rail-collapsed .sidep.cf-side.stufe3{width:calc(100vw - var(--railw-c))}
@media(max-width:900px){.sidep.cf-side, .sidep.cf-side.stufe2, .sidep.cf-side.stufe3{width:100%}}
.sidep.cf-side .sidep-b{padding:0}

/* Stufe 3: der Rumpf wird zweispaltig — stehende Navigation links, Inhalt rechts. */
.sidep.stufe3 .sidep-b{display:grid;grid-template-columns:236px minmax(0,1fr);align-items:start}
.sidep.stufe3 .cfs-kopf{grid-column:1 / -1}
.sidep.stufe3 .cfs-tabwrap{position:sticky;top:0;align-self:stretch;
  border-right:1px solid var(--line);background:var(--surface-2);min-height:100%}
.sidep.stufe3 .cfs-tabs{flex-direction:column;gap:2px;padding:14px 12px;border-bottom:0;
  overflow:visible;background:none}
.sidep.stufe3 .cfs-tab{width:100%;justify-content:flex-start;border-bottom:0;margin-bottom:0;
  border-radius:10px;padding:11px 12px}
.sidep.stufe3 .cfs-tab.on{background:var(--surface);box-shadow:var(--shadow)}
.sidep.stufe3 .cfs-tab .zahl{margin-left:auto}
.sidep.stufe3 .cfs-inhalt{padding:20px 24px 48px}
/* Die Fussnote der stehenden Navigation: hier kommen weitere Punkte hinzu, wenn es sie gibt. */
.cfs-navfuss{display:none}
.sidep.stufe3 .cfs-navfuss{display:block;padding:14px 12px;border-top:1px solid var(--line);
  font-size:.76rem;color:var(--ink-faint);line-height:1.5}

/* Kopf: Titel, Unterzeile, Stufen-Knopf */
.cfs-kopf{padding:4px 20px 0}
.cfs-sub{font-size:.86rem;color:var(--ink-soft);line-height:1.5;margin:-2px 0 14px}
.cfs-stufe{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:9px;
  border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink-soft);
  font-size:.82rem;font-weight:700;cursor:pointer;transition:.15s var(--ease);white-space:nowrap}
.cfs-stufe:hover{color:var(--ink);border-color:var(--lime)}
.cfs-stufen{display:inline-flex;gap:6px;align-items:center}
.cfs-stufe .ic{width:16px;height:16px}
.cfs-stufe.auf{background:var(--lime);color:var(--on-lime);border-color:transparent}
.cfs-stufe:disabled{opacity:.4;cursor:not-allowed}
.cfs-stufe:disabled:hover{color:var(--ink-soft);border-color:var(--line-strong)}
.cfs-stufe.auf:disabled:hover{color:var(--on-lime)}
/* Auf der Lese-Breite ist fuer zwei beschriftete Knoepfe kein Platz — dort bleibt nur der Pfeil. */
@media(max-width:1200px){.sidep:not(.stufe2):not(.stufe3) .cfs-stufe span{display:none}}

/* Unterkategorien — die Knopfleiste auf dem Slide-out */
/* Die Leiste scrollt, wenn die Unterkategorien nicht auf die Lese-Breite passen. Ohne Hinweis
   sieht ein abgeschnittener Knopf aus wie ein Darstellungsfehler — der Verlauf am rechten Rand
   sagt: hier geht es weiter. In Stufe 2 ist Platz genug, dann faellt er weg. */
.cfs-tabwrap{position:relative}
.cfs-tabwrap::after{content:"";position:absolute;top:0;right:0;bottom:1px;width:34px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--surface));z-index:4}
.sidep.stufe2 .cfs-tabwrap::after{display:none}
.cfs-tabs{display:flex;gap:4px;padding:0 20px;border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;position:sticky;top:0;background:var(--surface);z-index:3}
.cfs-tabs::-webkit-scrollbar{display:none}
.cfs-tab{display:inline-flex;align-items:center;gap:8px;padding:12px 12px 11px;border:0;background:none;
  color:var(--ink-soft);font-size:.9rem;font-weight:700;white-space:nowrap;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s var(--ease)}
.cfs-tab .ic{width:17px;height:17px}
.cfs-tab:hover{color:var(--ink)}
.cfs-tab.on{color:var(--ink);border-bottom-color:var(--lime)}
.cfs-tab .zahl{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--surface-3);color:var(--ink-faint);font-size:.72rem;font-weight:800}
.cfs-tab.on .zahl{background:var(--lime);color:var(--on-lime)}
.cfs-tab.warn .zahl{background:var(--bad-bg);color:var(--bad)}

.cfs-inhalt{padding:18px 20px 40px}
/* Ab Stufe 2 laeuft der Inhalt mehrspaltig — dafuer ist die Stufe da. */
/* Zwei Spalten, die auf DERSELBEN Linie enden. Mit align-items:start endete jede Spalte dort,
   wo ihr Inhalt aufhoerte — die linke 676 px, die rechte 523 px, und dazwischen ein Loch.
   Jetzt sind beide Spalten gleich hoch (stretch), laufen innen als Flex, und der letzte
   Kasten einer Spalte fuellt den Rest. Gekuerzt wird dabei nichts. */
.sidep.stufe2 .cfs-zwei,.sidep.stufe3 .cfs-zwei{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.sidep.stufe3 .cfs-zwei{gap:22px}
.sidep.stufe2 .cfs-drei{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-items:stretch}
.sidep.stufe3 .cfs-drei{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.sidep.stufe2 .cfs-zwei > *,.sidep.stufe3 .cfs-zwei > *,
.sidep.stufe2 .cfs-drei > *,.sidep.stufe3 .cfs-drei > *{
  display:flex;flex-direction:column;min-width:0}
.sidep.stufe2 .cfs-zwei > * > .cfs-sec:last-child,.sidep.stufe3 .cfs-zwei > * > .cfs-sec:last-child,
.sidep.stufe2 .cfs-drei > * > .cfs-sec:last-child,.sidep.stufe3 .cfs-drei > * > .cfs-sec:last-child{
  flex:1;margin-bottom:0}
/* Eine Spalte, die selbst schon eine Karte IST (Bausteine), dehnt sich als Ganzes. */
.sidep.stufe2 .cfs-zwei > .cfs-sec,.sidep.stufe3 .cfs-zwei > .cfs-sec,
.sidep.stufe3 .cfs-drei > .cfs-sec{margin-bottom:0}
.cfs-hin{font-size:.84rem;color:var(--ink-faint);margin-top:10px;line-height:1.55}
/* Sichtbar erst ab der jeweiligen Stufe — so traegt jede Stufe wirklich anderen Inhalt,
   statt denselben nur breiter. */
.cfs-nur2{display:none}.sidep.stufe2 .cfs-nur2,.sidep.stufe3 .cfs-nur2{display:block}
.cfs-nur3{display:none}.sidep.stufe3 .cfs-nur3{display:block}
.cfs-nur1{display:block}.sidep.stufe2 .cfs-nur1,.sidep.stufe3 .cfs-nur1{display:none}

/* Abschnitt im Slide-out */
.cfs-sec{border:1px solid var(--line);border-radius:14px;background:var(--surface-2);padding:16px 17px;margin-bottom:14px}
.cfs-sec>h4{font-size:.95rem;margin:0 0 3px;font-family:var(--disp)}
.cfs-sec>.cfs-sech{font-size:.82rem;color:var(--ink-faint);margin-bottom:12px;line-height:1.5}
.cfs-kv{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;font-size:.9rem}
.cfs-kv dt{color:var(--ink-soft)}
.cfs-kv dd{margin:0;font-weight:700;text-align:right}

/* ==================================================================== Grid-System
   1 | 2 | 3 | 4 Spalten. Der 1er traegt alle Angaben, ab dem 2er wird die Kachel knapp
   und der Rest wandert ins Slide-out. Das ist die Aufteilung, die der Operator verlangt hat:
   in der Flaeche nur so viel, dass man waehlen kann — die Tiefe kommt rechts. */
.vh-leiste{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.vh-leiste .wachs{flex:1;min-width:120px}
.vh-grid{display:grid;gap:14px;align-items:start}
.vh-grid[data-spalten="1"]{grid-template-columns:1fr}
.vh-grid[data-spalten="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.vh-grid[data-spalten="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.vh-grid[data-spalten="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1400px){.vh-grid[data-spalten="4"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.vh-grid[data-spalten="3"],.vh-grid[data-spalten="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.vh-grid[data-spalten]{grid-template-columns:1fr}}

/* Der Spalten-Waehler */
.vh-spalt{display:inline-flex;padding:3px;background:var(--surface-3);border:1px solid var(--line);border-radius:10px;gap:2px}
.vh-spalt button{border:0;background:none;width:34px;height:30px;border-radius:8px;cursor:pointer;
  color:var(--ink-soft);display:grid;place-items:center;transition:.15s var(--ease)}
.vh-spalt button:hover{color:var(--ink)}
.vh-spalt button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.vh-spalt svg{width:15px;height:15px;pointer-events:none}

/* Die Kachel */
.vh-kachel{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:18px 19px;
  cursor:pointer;transition:.18s var(--ease);text-align:left;width:100%;display:flex;flex-direction:column;gap:12px;
  position:relative;overflow:hidden}
.vh-kachel:hover{border-color:var(--line-strong);box-shadow:var(--shadow);transform:translateY(-2px)}
.vh-kachel:focus-visible{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(207,221,40,.22)}
.vh-kachel .k-kopf{display:flex;align-items:flex-start;gap:11px}
.vh-kachel .k-ic{width:38px;height:38px;border-radius:11px;background:var(--surface-3);color:var(--ink-soft);
  display:grid;place-items:center;flex:none}
.vh-kachel .k-ic .ic{width:19px;height:19px}
.vh-kachel h3{font-size:1.02rem;margin:0 0 2px;line-height:1.3}
.vh-kachel .k-sub{font-size:.82rem;color:var(--ink-soft);line-height:1.45}
.vh-grid[data-spalten="4"] .vh-kachel h3,.vh-grid[data-spalten="3"] .vh-kachel h3{font-size:.96rem}

/* Fortschritts-Balken der Kette — in der knappen Kachel ersetzt er die sieben Glieder */
.vh-bar{height:7px;border-radius:999px;background:var(--surface-3);overflow:hidden;display:flex;gap:2px}
.vh-bar i{flex:1;background:var(--surface-3);transition:background .2s}
.vh-bar i.on{background:var(--lime)}
/* Die Lasur war im hellen Design kaum vom Hintergrund zu unterscheiden — ein fehlendes
   Glied muss man sehen, ohne die Zahl daneben zu lesen. */
.vh-bar i.miss{background:var(--bad);opacity:.55}
.vh-kzeile{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:.8rem;color:var(--ink-soft)}
.vh-kzeile b{color:var(--ink);font-variant-numeric:tabular-nums}
/* Das Herkunfts-Etikett von mwOut() ist ein Flex-Kind NEBEN dem Zahlentext. In der knappen
   Kachel reicht die Breite nicht, und es schob sich mitten in die Zahl: "1.500 SELBST
   EINGETRAGEN €". Die Geometrie war dabei in Ordnung — kein Ueberlauf, keine Wache schlug an;
   sichtbar wurde es erst im Bild. Zahl bleibt zusammen, Etikett rutscht darunter. */
.vh-kzeile .mw{flex-direction:column;align-items:flex-end;gap:1px;white-space:nowrap;text-align:right}
.vh-kzeile .mw .mw-b{font-size:.68rem;line-height:1.2}
.vh-kfuss .mw{white-space:nowrap}
.vh-kfuss{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:2px}
.vh-warn{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--bad);
  background:var(--bad-bg);border-radius:9px;padding:8px 10px;line-height:1.4}
.vh-warn .ic{width:15px;height:15px;flex:none}
.vh-ok{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--good);
  background:var(--good-bg);border-radius:9px;padding:8px 10px;line-height:1.4}
.vh-ok .ic{width:15px;height:15px;flex:none}

/* Die Ketten-Abschnitte im Slide-out. Der Operator: "UI passt nicht, ist versetzt, hier
   auch zu eng." Ursache: die Glieder standen in einer einzigen Spalte innerhalb eines
   cfs-zwei, das nur bei mehr als drei offenen Gliedern griff — dadurch sprang das Raster.
   Jetzt ein eigenes, gleichmaessiges Raster mit gleich hohen Zellen und genug Polster. */
/* Gleich hoch in DERSELBEN Reihe — nicht ueber alle Reihen hinweg. Mit auto-rows:1fr
   erbte ein abgeschlossenes Glied ("Nichts zu tun") die Hoehe eines offenen mit zwei
   Knoepfen und stand als halbleerer Kasten da. */
.vh-kette-raster{display:grid;gap:12px;align-items:stretch}
/* Die Nummer des Glieds. Vorher lieh sie sich .vh-gl — und damit deren min-width:150px:
   das Symbol war 150 px breit und schob jede Ueberschrift in die Mitte. */
.vh-kg-num{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-size:.78rem;font-weight:800;background:var(--bad-bg);color:var(--bad)}
.vh-kg-num.on{background:var(--good-bg);color:var(--good)}
.sidep.stufe2 .vh-kette-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
.sidep.stufe3 .vh-kette-raster{grid-template-columns:repeat(3,minmax(0,1fr))}
.vh-kette-raster > .cfs-sec{margin-bottom:0;display:flex;flex-direction:column;gap:9px;padding:17px 18px}
.vh-kette-raster .vh-kg-kopf{display:flex;align-items:flex-start;gap:12px}
.vh-kette-raster .vh-kg-kopf h4{margin:0;font-size:.98rem;line-height:1.3}
.vh-kette-raster .vh-kg-tat{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap;padding-top:4px}
.vh-kette-raster .vh-kg-tat .btn{flex:1 1 auto;min-width:0;justify-content:center;white-space:nowrap}
/* In der Buehne stehen drei Zellen nebeneinander — dort passen zwei Knoepfe nicht mehr
   in eine Zeile (gemessen: 416 px Inhalt in 404 px Zelle). Untereinander statt gequetscht;
   gekuerzt wird nichts. */
.sidep.stufe3 .vh-kette-raster .vh-kg-tat{flex-direction:column}
.sidep.stufe3 .vh-kette-raster .vh-kg-tat .btn{width:100%}

/* Die sieben Glieder gross (1er-Kachel und Slide-out) */
.vh-glieder{display:flex;gap:7px;flex-wrap:wrap}
.vh-gl{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:11px;
  background:var(--surface-2);padding:10px 12px;flex:1;min-width:150px;text-align:left;cursor:default}
.vh-gl.klick{cursor:pointer;transition:.15s var(--ease)}
.vh-gl.klick:hover{border-color:var(--bad);background:var(--bad-bg)}
.vh-gl .n{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none;
  font-size:.74rem;font-weight:800;background:var(--bad-bg);color:var(--bad)}
.vh-gl.on .n{background:var(--good-bg);color:var(--good)}
.vh-gl .t{min-width:0}
.vh-gl .t b{display:block;font-size:.82rem;font-weight:800}
.vh-gl .t span{display:block;font-size:.78rem;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============================================================== Geld-Rechnung (KF3)
   Der Trichter als Bild plus Regler. Jede Zahl traegt ihre Herkunft: Annahme oder gemessen. */
.vh-rechner{display:flex;flex-direction:column;gap:14px}
.vh-regler{display:flex;align-items:center;gap:12px}
.vh-regler label{font-size:.85rem;font-weight:700;min-width:96px}
.vh-regler input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:var(--surface-3)}
.vh-regler input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--lime);border:3px solid var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer}
.vh-regler input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--lime);
  border:3px solid var(--surface);cursor:pointer}
.vh-regler .wert{min-width:104px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
/* Der Trichter fuellt seinen Kasten, statt oben zu kleben: die Spalten sind jetzt gleich
   hoch, und ein Diagramm, das auf halber Hoehe aufhoert, sieht aus wie ein Ladefehler. */
.vh-tri{display:flex;flex-direction:column;gap:6px;flex:1;justify-content:space-between}
.vh-tri-z{display:flex;align-items:center;gap:11px}
.vh-tri-z .lbl{width:112px;font-size:.83rem;color:var(--ink-soft);flex:none}
.vh-tri-z .bar{flex:1;height:32px;border-radius:9px;background:var(--surface-3);overflow:hidden;position:relative}
.vh-tri-z .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--lime),var(--lime-strong));border-radius:9px}
.vh-tri-z .val{width:112px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums;font-size:.9rem;flex:none}
.vh-tri-z.geld .bar i{background:linear-gradient(90deg,var(--good),var(--good))}
.vh-ampel{display:flex;align-items:center;gap:12px;border-radius:13px;padding:16px 18px;line-height:1.5;
  margin-bottom:14px}
.vh-ampel.gut{background:var(--good-bg);color:var(--good)}
.vh-ampel.mittel{background:var(--warn-bg);color:var(--warn)}
.vh-ampel.schlecht{background:var(--bad-bg);color:var(--bad)}
.vh-ampel b{display:block;font-size:1.02rem}
.vh-ampel span{display:block;font-size:.85rem;opacity:.92}
.vh-ampel .zahl{font-family:var(--disp);font-size:1.9rem;font-weight:800;font-variant-numeric:tabular-nums;flex:none}
.vh-annahme{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink-faint);background:var(--surface-3);border-radius:6px;padding:2px 6px;margin-left:6px}

/* ================================================================ Mannschaft (KF2)
   Fuenf Darstellungen zur Wahl. Sie unterscheiden sich nicht in der Farbe, sondern in dem,
   was sie zuerst zeigen — deshalb sind sie ueberhaupt eine Wahl und keine Spielerei:

   dossier   Vollstaendigkeit    alles auf einen Blick, nichts versteckt
   ausweis   Person und Auftrag  Emblem gross, Daten als Ausweiszeilen
   buehne    Wirkung             dunkle Bildkachel, Emblem als Flaeche, Text darueber
   kennkarte Koennen             Ring-Diagramm zuerst, Faehigkeiten als Chips
   liste     Menge               eine Zeile je Agent, viele auf einmal vergleichbar

   Die Spaltenzahl haengt an der Stufe des Slide-outs: Lesespur 1, Arbeit 2, Buehne 3.
   Der Nutzer kann sie ueberschreiben. */
/* Gleich hohe Reihen. Ohne grid-auto-rows richtet sich jede Reihe nach ihrem laengsten
   Kasten, und die Karten daneben enden frueher — im Bild eine Treppe statt einer Ordnung.
   Der Operator hat es "symmetrisch" genannt: dieselbe Hoehe, ohne zu kuerzen. */
.vh-ag{display:grid;gap:12px;grid-auto-rows:1fr;align-items:stretch}
.vh-ag > *{min-width:0}
.vh-ag[data-sp="1"]{grid-template-columns:1fr}
.vh-ag[data-sp="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.vh-ag[data-sp="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1200px){.vh-ag[data-sp="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.vh-ag[data-sp="2"],.vh-ag[data-sp="3"]{grid-template-columns:1fr}}

/* Der Stil-Waehler */
.vh-stilw{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.vh-stilw .lbl{font-size:.8rem;color:var(--ink-faint);font-weight:700}
.vh-stile{display:inline-flex;padding:3px;background:var(--surface-3);border:1px solid var(--line);
  border-radius:10px;gap:2px;flex-wrap:wrap}
.vh-stile button{border:0;background:none;padding:7px 11px;border-radius:8px;cursor:pointer;
  color:var(--ink-soft);font-size:.82rem;font-weight:700;transition:.15s var(--ease)}
.vh-stile button:hover{color:var(--ink)}
.vh-stile button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

/* Das Emblem: aus dem Namen abgeleitet, deterministisch, im CI. Kein externes Bild —
   es ist ueberall scharf, laedt nicht nach und kann nicht fehlen. */
.vh-embl{flex:none;border-radius:13px;overflow:hidden;background:var(--surface-3);display:block}
.vh-embl svg{display:block;width:100%;height:100%}

/* ---- gemeinsame Bausteine ---- */
.vh-agk{border:1px solid var(--line);border-radius:16px;background:var(--surface);
  display:flex;flex-direction:column;gap:11px;padding:16px 17px;transition:.18s var(--ease);position:relative}
.vh-agk:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.vh-agk.aus{opacity:.5}
.vh-agk .a-n b{display:block;font-size:.98rem;font-family:var(--disp);line-height:1.25}
.vh-agk .a-n span{display:block;font-size:.81rem;color:var(--ink-soft);line-height:1.4}
.vh-skills{display:flex;flex-wrap:wrap;gap:6px}
.vh-skill{font-size:.75rem;font-weight:700;border-radius:7px;padding:4px 8px;
  background:var(--surface-3);color:var(--ink-soft);border:1px solid var(--line);white-space:nowrap}
.vh-skill.stark{background:var(--lime);color:var(--on-lime);border-color:transparent}
.vh-agz{display:flex;gap:14px;font-size:.78rem;color:var(--ink-soft);flex-wrap:wrap}
.vh-agz b{color:var(--ink);font-variant-numeric:tabular-nums}
.vh-agg{font-size:.79rem;color:var(--ink-faint);line-height:1.5;border-left:2px solid var(--line-strong);padding-left:10px}
.vh-agbtn{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:2px}
.vh-lern{height:5px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.vh-lern i{display:block;height:100%;background:var(--lime);border-radius:999px;transition:width .4s var(--ease)}
/* inline-block, sonst streckt sich der Chip in einem Block-Elternteil ueber die ganze
   Kartenbreite — im Bild eine gruene Bank statt einer Marke. */
.vh-agst{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.02em;
  padding:3px 9px;border-radius:999px;white-space:nowrap;flex:none;align-self:flex-start}
.vh-agst.bereit{background:var(--good-bg);color:var(--good)}
.vh-agst.lernt{background:var(--warn-bg);color:var(--warn)}
.vh-agst.pause{background:var(--surface-3);color:var(--ink-faint)}
.vh-agst.fehlt{background:var(--bad-bg);color:var(--bad)}

/* ---- 1. dossier: alles offen ---- */
.vh-ag[data-stil="dossier"] .a-kopf{display:flex;align-items:flex-start;gap:12px}
.vh-ag[data-stil="dossier"] .vh-embl{width:44px;height:44px}
.vh-ag[data-stil="dossier"] .a-n{flex:1;min-width:0}

/* ---- 2. ausweis: Emblem gross, Daten als Zeilen ---- */
.vh-ag[data-stil="ausweis"] .vh-agk{padding:0;overflow:hidden}
.vh-ag[data-stil="ausweis"] .aw-kopf{display:flex;gap:14px;padding:17px 18px;
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.vh-ag[data-stil="ausweis"] .vh-embl{width:66px;height:66px;border-radius:14px}
.vh-ag[data-stil="ausweis"] .aw-rumpf{padding:15px 18px;display:flex;flex-direction:column;gap:11px;flex:1}
.vh-ag[data-stil="ausweis"] .aw-zeile{display:grid;grid-template-columns:88px 1fr;gap:10px;
  font-size:.82rem;padding:6px 0;border-bottom:1px solid var(--line)}
.vh-ag[data-stil="ausweis"] .aw-zeile:last-of-type{border-bottom:0}
.vh-ag[data-stil="ausweis"] .aw-zeile dt{color:var(--ink-faint);font-weight:700}
.vh-ag[data-stil="ausweis"] .aw-zeile dd{margin:0;color:var(--ink)}

/* ---- 3. buehne: das Emblem wird zur Flaeche, Text liegt darauf ---- */
.vh-ag[data-stil="buehne"] .vh-agk{padding:0;overflow:hidden;border-color:transparent;background:var(--rail)}
.vh-ag[data-stil="buehne"] .bu-bild{position:relative;aspect-ratio:16/9;background:var(--rail-2);overflow:hidden}
.vh-ag[data-stil="buehne"] .bu-bild .vh-embl{position:absolute;inset:0;width:100%;height:100%;border-radius:0;background:none}
.vh-ag[data-stil="buehne"] .bu-schleier{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,11,12,0) 30%,rgba(10,11,12,.86) 100%)}
.vh-ag[data-stil="buehne"] .bu-text{position:absolute;left:16px;right:16px;bottom:13px;z-index:2}
.vh-ag[data-stil="buehne"] .bu-text b{display:block;color:#fff;font-family:var(--disp);font-size:1.02rem;line-height:1.25}
.vh-ag[data-stil="buehne"] .bu-text span{display:block;color:rgba(255,255,255,.76);font-size:.8rem;line-height:1.4;margin-top:2px}
.vh-ag[data-stil="buehne"] .bu-marke{position:absolute;top:13px;left:16px;z-index:2}
.vh-ag[data-stil="buehne"] .bu-rumpf{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.vh-ag[data-stil="buehne"] .vh-skill{background:rgba(255,255,255,.08);color:rgba(255,255,255,.82);border-color:rgba(255,255,255,.12)}
.vh-ag[data-stil="buehne"] .vh-skill.stark{background:var(--lime);color:var(--on-lime);border-color:transparent}
.vh-ag[data-stil="buehne"] .vh-agz{color:rgba(255,255,255,.66)}
.vh-ag[data-stil="buehne"] .vh-agz b{color:#fff}
.vh-ag[data-stil="buehne"] .vh-agg{color:rgba(255,255,255,.6);border-left-color:rgba(255,255,255,.18)}
.vh-ag[data-stil="buehne"] .vh-agg b{color:rgba(255,255,255,.82) !important}
.vh-ag[data-stil="buehne"] .vh-lern{background:rgba(255,255,255,.12)}

/* ---- 4. kennkarte: der Koennens-Ring fuehrt ---- */
.vh-ag[data-stil="kennkarte"] .kk-kopf{display:flex;align-items:center;gap:14px}
.vh-ag[data-stil="kennkarte"] .kk-ring{position:relative;width:74px;height:74px;flex:none}
.vh-ag[data-stil="kennkarte"] .kk-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.vh-ag[data-stil="kennkarte"] .kk-ring .kk-z{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--disp);font-weight:800;font-size:1.02rem;font-variant-numeric:tabular-nums}
.vh-ag[data-stil="kennkarte"] .kk-ring .kk-z i{font-style:normal;font-size:.62rem;color:var(--ink-faint);display:block;text-align:center;font-weight:700}

/* ---- 5. liste: eine Zeile je Agent ---- */
.vh-ag[data-stil="liste"]{grid-template-columns:1fr !important;gap:0;
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.vh-ag[data-stil="liste"] .vh-agk{border:0;border-bottom:1px solid var(--line);border-radius:0;
  flex-direction:row;align-items:center;gap:14px;padding:13px 16px}
.vh-ag[data-stil="liste"] .vh-agk:last-child{border-bottom:0}
.vh-ag[data-stil="liste"] .vh-agk:hover{box-shadow:none;background:var(--surface-2)}
.vh-ag[data-stil="liste"] .vh-embl{width:36px;height:36px;border-radius:10px}
.vh-ag[data-stil="liste"] .li-n{flex:1;min-width:0}
.vh-ag[data-stil="liste"] .li-n b{display:block;font-size:.92rem;font-family:var(--disp)}
.vh-ag[data-stil="liste"] .li-n span{display:block;font-size:.79rem;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vh-ag[data-stil="liste"] .li-bar{width:120px;flex:none}
.vh-ag[data-stil="liste"] .li-weg{display:none}
@media(max-width:820px){.vh-ag[data-stil="liste"] .li-bar{display:none}}

/* ============================================================== Ein-Satz-Start (KF1) */
.vh-satz{border:1px solid var(--lime);border-radius:16px;background:var(--surface-2);padding:18px 19px;margin-bottom:16px}
.vh-satz h3{font-size:1.05rem;margin:0 0 4px;font-family:var(--disp)}
.vh-satz p{font-size:.86rem;color:var(--ink-soft);line-height:1.55;margin:0 0 13px}
.vh-satz .zeile{display:flex;gap:9px;flex-wrap:wrap}
.vh-satz .zeile .inp{flex:1;min-width:240px}
.vh-bsp{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.vh-bsp button{border:1px dashed var(--line-strong);background:none;color:var(--ink-soft);border-radius:999px;
  padding:6px 12px;font-size:.79rem;cursor:pointer;transition:.15s var(--ease)}
.vh-bsp button:hover{border-color:var(--lime);color:var(--ink);border-style:solid}
/* Eigener Name, weil .vh-vor im Bestands-CSS schon vergeben ist: dort ist es das vierspaltige
   Raster der Vorschau-Werte. Derselbe Name hat die Herkunfts-Zeilen in dessen Spalten gepresst —
   ein Konflikt, den kein Blick ins eigene Stylesheet zeigt, nur der Blick ins Bild. */
.vh-herk{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:baseline;
  border:1px solid var(--line);border-radius:12px;background:var(--surface-2);padding:11px 14px;margin-bottom:8px}
.vh-herk .hw{font-weight:700;font-size:.92rem;min-width:0}
.vh-herk .hq{font-size:.76rem;color:var(--ink-faint);text-align:right;white-space:nowrap}
@media(max-width:560px){.vh-herk{grid-template-columns:1fr}.vh-herk .hq{text-align:left;white-space:normal}}

/* Formular im Slide-out */
.vh-form .field+.field{margin-top:15px}
.vh-wahl2{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
@media(max-width:560px){.vh-wahl2{grid-template-columns:1fr}}
.vh-opt2{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line-strong);border-radius:12px;
  background:var(--surface-2);padding:12px 13px;cursor:pointer;transition:.15s var(--ease);position:relative}
.vh-opt2:hover{border-color:var(--ink-faint)}
.vh-opt2.on{border-color:var(--lime);background:var(--surface);box-shadow:0 0 0 2px rgba(207,221,40,.2)}
.vh-opt2 input{position:absolute;top:12px;right:12px}
.vh-opt2 b{font-size:.9rem;padding-right:24px}
.vh-opt2 span{font-size:.79rem;color:var(--ink-soft);line-height:1.45}
.vh-kanz{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.vh-kanz:last-child{border-bottom:0}
.vh-kanz label{display:flex;align-items:center;gap:9px;flex:1;font-size:.9rem;cursor:pointer;min-width:0}
.vh-kanz .inp{width:104px;height:38px;flex:none}
.vh-kanz .eh{font-size:.8rem;color:var(--ink-faint);width:64px;flex:none}
.vh-nebz{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.vh-nebz label{display:flex;align-items:center;gap:9px;font-size:.89rem;cursor:pointer}
.vh-fuss{display:flex;gap:9px;justify-content:flex-end;padding-top:16px;margin-top:4px;border-top:1px solid var(--line);
  position:sticky;bottom:0;background:var(--surface);padding-bottom:10px;z-index:2}

/* Gemessen beim Durchlauf am 2026-07-30: der schwebende "Ask AI"-Knopf sitzt unten rechts —
   also genau dort, wo im Slide-out der Speichern-Knopf steht. Er fing den Klick ab, und zwar
   lautlos: das Formular sah bedienbar aus und war es nicht. Solange ein Slide-out offen ist,
   tritt der Knopf zurueck; danach ist er wieder da. */
body.cf-side-offen .askai-fab{opacity:0;pointer-events:none;transition:opacity .18s var(--ease)}

/* =============================================================== Zeitraum im CI
   Ein Datumsfeld des Betriebssystems oeffnet dessen Kalender — in dessen Farben, mit
   dessen Schrift, und im Dunkel-Modus als weisser Block. Deshalb hier ein eigener:
   die Auswahl faehrt nach OBEN auf (das Feld steht am unteren Ende des Formulars),
   traegt die vier Fassungen, die ein Betrieb wirklich braucht, und einen Monatskalender
   im CI. */
.vh-zr{position:relative}
.vh-zr-feld{display:flex;align-items:center;gap:10px;width:100%;height:46px;padding:0 14px;
  border-radius:var(--r-in,12px);border:1px solid var(--line-strong);background:var(--surface-2);
  color:var(--ink);font-family:inherit;font-size:.96rem;font-weight:500;cursor:pointer;text-align:left;
  transition:.15s var(--ease)}
.vh-zr-feld:hover{border-color:var(--ink-faint)}
.vh-zr.auf .vh-zr-feld{border-color:var(--lime);box-shadow:0 0 0 3px rgba(207,221,40,.18)}
.vh-zr-feld .ic{width:18px;height:18px;color:var(--ink-faint);flex:none}
.vh-zr-feld .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vh-zr-pop{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:150;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);
  padding:14px;opacity:0;transform:translateY(6px) scale(.99);pointer-events:none;transition:.16s var(--ease)}
.vh-zr.auf .vh-zr-pop{opacity:1;transform:none;pointer-events:auto}
.vh-zr-modi{display:flex;gap:4px;background:var(--surface-3);border:1px solid var(--line);
  border-radius:10px;padding:3px;margin-bottom:12px}
.vh-zr-modi button{flex:1;border:0;background:none;padding:7px 8px;border-radius:8px;cursor:pointer;
  color:var(--ink-soft);font-size:.82rem;font-weight:700;transition:.15s var(--ease)}
.vh-zr-modi button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.vh-zr-raster{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.vh-zr-raster.vier{grid-template-columns:repeat(4,1fr)}
.vh-zr-raster button{border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink);
  border-radius:10px;padding:10px 8px;font-size:.85rem;font-weight:700;cursor:pointer;transition:.15s var(--ease)}
.vh-zr-raster button:hover{border-color:var(--lime)}
.vh-zr-raster button.on{background:var(--lime);color:var(--on-lime);border-color:transparent}
/* Monatskalender */
.vh-kal-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.vh-kal-kopf b{font-size:.92rem;font-family:var(--disp)}
.vh-kal-kopf button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line-strong);
  background:var(--surface-2);color:var(--ink-soft);cursor:pointer;display:grid;place-items:center}
.vh-kal-kopf button:hover{color:var(--ink);border-color:var(--lime)}
.vh-kal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.vh-kal .wt{font-size:.7rem;color:var(--ink-faint);text-align:center;font-weight:800;padding:4px 0}
.vh-kal button{border:0;background:none;color:var(--ink);border-radius:8px;height:32px;font-size:.83rem;
  cursor:pointer;font-variant-numeric:tabular-nums;transition:.12s var(--ease)}
.vh-kal button:hover{background:var(--surface-3)}
.vh-kal button.leer{visibility:hidden}
.vh-kal button.rand{background:var(--lime);color:var(--on-lime);font-weight:800}
.vh-kal button.drin{background:var(--lime);opacity:.24;border-radius:0}
.vh-kal-fuss{display:flex;gap:8px;justify-content:space-between;align-items:center;margin-top:12px;
  padding-top:11px;border-top:1px solid var(--line);font-size:.8rem;color:var(--ink-soft)}

/* ================================================================ KI-Gespraech
   Statt eines leeren Formulars: die Mannschaft fragt, der Betrieb antwortet. Eine Frage
   je Schritt, mit vorgeschlagenen Antworten — tippen muss nur, wer will. */
.vh-dlg{display:flex;flex-direction:column;gap:14px}
.vh-dlg-spur{display:flex;gap:5px;margin-bottom:2px}
.vh-dlg-spur i{flex:1;height:4px;border-radius:999px;background:var(--surface-3)}
.vh-dlg-spur i.on{background:var(--lime)}
.vh-dlg-frage{border:1px solid var(--line);border-radius:16px;background:var(--surface-2);padding:18px 19px}
.vh-dlg-wer{display:flex;align-items:center;gap:9px;margin-bottom:9px;font-size:.78rem;
  color:var(--ink-faint);font-weight:700}
.vh-dlg-wer .pkt{width:22px;height:22px;border-radius:7px;background:var(--lime);color:var(--on-lime);
  display:grid;place-items:center;font-size:.66rem;font-weight:800}
.vh-dlg-frage h4{font-size:1.08rem;margin:0 0 5px;font-family:var(--disp);line-height:1.35}
.vh-dlg-frage .warum{font-size:.83rem;color:var(--ink-soft);line-height:1.55;margin-bottom:13px}
.vh-dlg-vor{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
.vh-dlg-vor button{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  border-radius:999px;padding:8px 14px;font-size:.86rem;cursor:pointer;transition:.15s var(--ease)}
.vh-dlg-vor button:hover{border-color:var(--lime);background:var(--surface-2)}
.vh-dlg-vor button.on{background:var(--lime);color:var(--on-lime);border-color:transparent;font-weight:700}
.vh-dlg-antw{display:flex;gap:8px;flex-wrap:wrap}
.vh-dlg-antw .inp{flex:1;min-width:200px}
.vh-dlg-log{display:flex;flex-direction:column;gap:8px}
.vh-dlg-log .z{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:.85rem;
  padding:9px 12px;border-radius:11px;background:var(--surface-2);border:1px solid var(--line)}
.vh-dlg-log .z dt{color:var(--ink-faint)}
.vh-dlg-log .z dd{margin:0;font-weight:700}

/* ============================================================ Bausteine, gleich gross
   Der Operator: "bei Bausteinen alle Container gleich, symmetrisch, nicht kuerzen."
   Gleich hohe Reihen, der Knopf sitzt immer unten — der Text wird dabei NICHT gekuerzt,
   die Karte waechst und die Nachbarn wachsen mit. */
.vh-bs-raster{display:grid;gap:12px;grid-auto-rows:1fr;align-items:stretch}
.sidep.stufe2 .vh-bs-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
.sidep.stufe3 .vh-bs-raster{grid-template-columns:repeat(3,minmax(0,1fr))}
.vh-bs-raster > .cfs-sec{margin-bottom:0;display:flex;flex-direction:column;gap:9px}
.vh-bs-fuss{margin-top:auto;padding-top:4px}
.vh-bs-fuss .btn{width:100%;justify-content:center}