/* branchen.css — was nur die Branchen-Seiten brauchen: die Hero-Karte (Szene oder Editor)
 * und die Befundliste des Dossiers.
 *
 * Herkunft: css/branchen-k-hero.css aus dem Stand vor dem Umbau. Die Klassennamen sind
 * absichtlich unveraendert (.k-inst, .lbl, .dl, .nw, .stamp …), damit die acht Szenen in
 * js/hero/<slug>.js ohne eine einzige Aenderung weiterlaufen. Getauscht ist nur die Palette:
 * die alte Karte war dunkel (#0D1B3E, #c3d7f5), das Design „Instrument" ist hell.
 *
 * Laedt nur auf den Seiten, die eine Szene haben — eingehaengt in head.html unter
 * {{#hero.isAnim}}. Nicht in css/page.css, weil dessen 72-KB-Budget (Selbsttest in
 * build-page.test.mjs) noch 139 Byte Luft hat und diese Regeln 4 kB brauchen.
 *
 * Der Halo um die Beschriftungen (paint-order:stroke) stanzt die Schrift aus den Linien frei;
 * er muss die FLAECHE unter der Figur treffen, nicht mehr das dunkle Blau — sonst steht ein
 * dunkler Rand um jede Zahl.
 */

/* Eigener Mono-Stapel: css/page.css fuehrt keinen als Variable, `.v-code` schreibt ihn
   woertlich aus. Hier einmal als Token, damit die Fundstellen unten gleich bleiben.
   Auf :root, NICHT auf .k-inst — die Befundliste steht ausserhalb der Karte, dort war die
   Variable leer, und eine `font:`-Kurzschreibweise mit leerem Wert ist ungueltig und faellt
   ersatzlos weg. Die Ueberschrift kam deshalb in 16 px Geist statt 11,5 px Mono (16.09.). */
:root{--v-mono-stack:ui-monospace,Menlo,Consolas,monospace}

/* Industry dossiers: a readable index of decisions, with evidence one click away. */
.v-verd{--v-ok:#006b50;--v-warn:#865000;--v-bad:#a82139}
.industry-page .v-verd .v-verd-h{font-family:inherit;font-size:.82rem;letter-spacing:.025em;color:#4b5870}
.v-verd .bv-p--ok{background:#d7f4e9;color:#006b50;border-color:#92ceb6}
.v-verd .bv-p--part{background:#fff0c2;color:#865000;border-color:#e3bf66}
.v-verd .bv-p--no{background:#ffe0e6;color:#a82139;border-color:#eba9b6}
.industry-filters{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.25rem 0 .65rem}
.industry-filters[hidden],.industry-filter-status[hidden],[data-verdict-item][hidden],[data-verdict-group][hidden]{display:none}
.industry-filter{display:inline-flex;align-items:center;gap:.65rem;min-height:44px;padding:.6rem .85rem;border:1px solid #a6b1c3;border-radius:6px;background:#fff;color:#0d1b3e;font-family:inherit;font-weight:600;font-size:.88rem;line-height:1.35;cursor:pointer;transition:background .18s,color .18s,transform .18s}
.industry-filter span{padding:.12rem .4rem;border-radius:3px;background:rgba(13,27,62,.07);font-variant-numeric:tabular-nums}
.industry-filter--ok{border-color:#006b50;color:#006b50}
.industry-filter--part{border-color:#865000;color:#865000}
.industry-filter--no{border-color:#a82139;color:#a82139}
.industry-filter[aria-pressed=true]{background:#0d1b3e;border-color:#0d1b3e;color:#fff}
.industry-filter--ok[aria-pressed=true]{background:#006b50;border-color:#006b50}
.industry-filter--part[aria-pressed=true]{background:#865000;border-color:#865000}
.industry-filter--no[aria-pressed=true]{background:#a82139;border-color:#a82139}
.industry-filter[aria-pressed=true] span{background:rgba(255,255,255,.16)}
.industry-filter:hover{box-shadow:0 2px 5px rgba(13,27,62,.12);transform:translateY(-1px)}
.industry-filter:active{transform:translateY(1px)}
.industry-filter:focus-visible,.industry-assessment summary:focus-visible,.industry-disclosure summary:focus-visible,.industry-facts summary:focus-visible{outline:3px solid #1e56b5;outline-offset:4px}
.industry-filter-status{font-size:.82rem;color:#4b5870;margin:.5rem 0 1.3rem}
.industry-filter-legend,.industry-scene-comparison{font-size:.82rem;line-height:1.55;color:#4b5870;margin:.65rem 0}
.industry-assessment{border-bottom:1px solid #d5dce5;border-left:3px solid #006b50;padding-left:1rem;background:#fff;list-style:none}
.industry-assessment--part{border-left-color:#b37b12}
.industry-assessment--no{border-left-color:#c5344f}
.industry-assessment summary{display:grid;grid-template-columns:minmax(0,1fr) auto 20px;align-items:center;gap:1rem;padding:1.05rem .8rem 1.05rem 0;cursor:pointer;list-style:none}
.industry-assessment summary::-webkit-details-marker,.industry-disclosure summary::-webkit-details-marker,.industry-facts summary::-webkit-details-marker{display:none}
.industry-assessment-title{font-size:.98rem;line-height:1.55;color:#0d1b3e;font-weight:500}
.industry-assessment-toggle{color:#1e56b5;font-size:1.35rem;text-align:center;transition:transform .18s}
.industry-assessment details[open] .industry-assessment-toggle,.industry-disclosure[open]>summary>span,.industry-facts[open]>summary>span{transform:rotate(45deg)}
.industry-assessment summary:hover .industry-assessment-title{color:#1e56b5}
.industry-assessment summary:active{background:#f2f5fa}
.industry-assessment-body{max-width:76ch;padding:0 2.2rem 1rem 0;color:#33445d;font-size:.96rem;line-height:1.75}
.industry-assessment-body p{margin:0 0 .65rem}
.industry-assessment-body a{color:#1e56b5;text-decoration:underline;text-underline-offset:3px}
.industry-disclosure{border-top:1px solid #cad3e0;margin:0}
.industry-disclosure:last-child{border-bottom:1px solid #cad3e0}
.industry-disclosure>summary,.industry-facts>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;list-style:none;cursor:pointer;padding:1.15rem 0;color:#0d1b3e;font-size:1.08rem;font-weight:600;line-height:1.45}
.industry-disclosure>summary>span,.industry-facts>summary>span{flex:none;font-size:1.45rem;font-weight:400;color:#1e56b5;transition:transform .18s}
.industry-disclosure>summary:hover,.industry-facts>summary:hover{color:#1e56b5}
.industry-disclosure>summary:active,.industry-facts>summary:active{background:#eef3fa}
.industry-disclosure-body{padding:0 0 1.5rem;max-width:85ch}
.industry-facts{border-top:2px solid #1e56b5;margin-top:2rem}
.industry-facts .v-ledger{margin-bottom:1rem}
@media(max-width:600px){
 .industry-filters{display:grid;grid-template-columns:1fr 1fr}
 .industry-filter{justify-content:space-between;font-size:.8rem;padding:.65rem}
 .industry-assessment summary{grid-template-columns:minmax(0,1fr) 20px;gap:.55rem}
 .industry-assessment-title{grid-column:1;font-size:.94rem}
 .industry-assessment summary .bv-p{grid-column:1;grid-row:2;justify-self:start}
 .industry-assessment-toggle{grid-column:2;grid-row:1/3}
 .industry-assessment-body{padding-right:1rem}
}
@media(prefers-reduced-motion:reduce){.industry-filter,.industry-assessment-toggle,.industry-disclosure>summary>span,.industry-facts>summary>span{transition:none}}

.k-inst{background:var(--v-bg2);border:1px solid var(--v-line);border-radius:14px;
  padding:1.15rem 1.25rem 1.05rem;color:var(--v-ink2)}
.k-inst-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem;
  font-size:.8rem;color:var(--v-ink3)}
.k-inst-head .dot{width:9px;height:9px;border-radius:50%;background:var(--v-acc);
  box-shadow:0 0 0 3px var(--v-acc-soft);flex:none}
.k-inst-head .dot.live{animation:k-inst-pulse 1.6s ease-in-out infinite}
@keyframes k-inst-pulse{0%,100%{box-shadow:0 0 0 3px var(--v-acc-soft)}50%{box-shadow:0 0 0 6px rgba(30,86,181,.05)}}
.k-inst-head .name{color:var(--v-ink);font-weight:600}
.k-inst-head .right{margin-left:auto;font:500 .75rem/1 var(--v-mono-stack);letter-spacing:.08em;
  text-transform:uppercase;color:var(--v-ink3);white-space:nowrap}
.k-inst svg{display:block;width:100%;height:auto;overflow:visible}

/* Beschriftungen */
.k-inst .lbl{font:400 12px/1 var(--v-mono-stack);fill:var(--v-ink2);letter-spacing:.02em;
  paint-order:stroke;stroke:var(--v-bg2);stroke-width:3px;stroke-linejoin:round}
.k-inst .lbl.b{fill:var(--v-ink);font-weight:600}
.k-inst .lbl.acc{fill:var(--v-acc)}
.k-inst .lbl.warn{fill:var(--v-warn)}
.k-inst .lbl.bad{fill:var(--v-bad)}
.k-inst .lbl.ok{fill:var(--v-ok)}

/* Zeichnungselemente: Kontur (dl), Mittellinie (cl), verdeckte Kante (hl), Schraffur,
   Bemassung (dim), Schriftfeld (tb), Positionsnummer (balloon) */
.k-inst .dl{fill:none;stroke:var(--v-c2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.k-inst .dl.thin{stroke-width:.9;stroke:var(--v-c3)}
.k-inst .dl.hair{stroke-width:.6;stroke:var(--v-c4)}
.k-inst .cl{fill:none;stroke:var(--v-acc-line);stroke-width:.8;stroke-dasharray:10 3 2 3}
.k-inst .hl{fill:none;stroke:var(--v-c4);stroke-width:.8;stroke-dasharray:4 3}
.k-inst .hatch line{stroke:var(--v-c4);stroke-width:.7}
.k-inst .dim{fill:none;stroke:var(--v-acc);stroke-width:.9;stroke-linecap:round}
.k-inst .dim.arr{fill:var(--v-acc);stroke:none}
.k-inst .tb{fill:none;stroke:var(--v-line);stroke-width:.8}
.k-inst .enc{fill:none;stroke:var(--v-c4);stroke-width:.8;stroke-dasharray:7 4}
.k-inst .balloon circle{fill:var(--v-bg);stroke:var(--v-acc);stroke-width:1}
.k-inst .balloon .lbl{fill:var(--v-acc);stroke:none;font-weight:600}

/* Das Neue am Vorhaben: Akzentfarbe, gefuellte Positionsnummern */
.k-inst .nw{fill:none;stroke:var(--v-acc);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.k-inst .nw.hair{stroke-width:.8;stroke-dasharray:3 3}
.k-inst .nw.beam{stroke-width:1.2;stroke-dasharray:2 2}
.k-inst .nw.pool{fill:var(--v-warn);stroke:none}
.k-inst .balloon.new circle{fill:var(--v-acc);stroke:var(--v-acc)}
.k-inst .balloon.new .lbl{fill:var(--v-bg)}

.k-inst .fade{opacity:0;transition:opacity .35s ease}
.k-inst .fade.on{opacity:1}
.k-inst .stamp{opacity:0;transform:scale(1.35);transform-box:fill-box;transform-origin:center;
  transition:opacity .45s ease,transform .55s cubic-bezier(.34,1.56,.64,1)}
.k-inst .stamp.on{opacity:1;transform:scale(1)}
.k-inst .stamp rect{fill:rgba(47,111,78,.08);stroke:var(--v-ok);stroke-width:2}
.k-inst .stamp .lbl{font-weight:700;stroke:none}

/* Anzeigen und Ergebniszeile */
.k-inst-readouts{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin-top:.9rem}
.k-inst-ro{border:1px solid var(--v-line);border-radius:9px;padding:.5rem .65rem;background:var(--v-bg)}
.k-inst-ro .k{display:block;font:500 .75rem/1.3 var(--v-mono-stack);letter-spacing:.07em;
  text-transform:uppercase;color:var(--v-ink3)}
.k-inst-ro .v{display:block;font:400 .92rem/1.3 var(--v-mono-stack);color:var(--v-ink);
  margin-top:.15rem;font-variant-numeric:tabular-nums}
.k-inst-ro .v.acc{color:var(--v-acc);font-weight:600}
.k-inst-result{margin-top:.8rem;padding:.6rem .8rem;border-radius:8px;
  font:400 .78rem/1.55 var(--v-mono-stack);border:1px solid var(--v-line);
  color:var(--v-ink2);background:var(--v-bg);
  transition:background .5s ease,border-color .5s ease,color .5s ease}
.k-inst-result.ok{background:rgba(47,111,78,.07);border-color:rgba(47,111,78,.22);color:var(--v-ok)}
.k-inst-result strong{font-weight:700;color:var(--v-ink)}
.k-inst-replay{margin-top:.5rem;font:500 .75rem/1 var(--v-mono-stack);letter-spacing:.08em;
  text-transform:uppercase;color:var(--v-ink3);background:none;border:0;padding:.5rem 0;
  min-height:44px;cursor:pointer}
.k-inst-replay:hover{color:var(--v-acc)}
.k-inst-replay:focus-visible{outline:2px solid var(--v-acc);outline-offset:3px;border-radius:4px}

@media (prefers-reduced-motion: reduce){
  .k-inst .fade,.k-inst .stamp{transition:none}
  .k-inst-head .dot.live{animation:none}
}

/* ── Editor-Karte (Software-Seite) ───────────────────────────────────────────────────
   Dieselbe Karte, anderer Inhalt: statt einer Szene steht hier Quelltext. Rein statisch,
   kein Skript — der Text steht vollstaendig im HTML. Die drei Punkte sind das Fenster-
   Motiv des alten Heros; sie tragen hier keine Bedeutung und sind deshalb aria-hidden. */
.k-inst--code .k-inst-head{gap:.42rem}
.k-inst--code .dot{width:10px;height:10px;border-radius:50%;box-shadow:none;animation:none;flex:none}
.k-inst--code .dot.r{background:#e06c5f}
.k-inst--code .dot.y{background:#d9a441}
.k-inst--code .dot.g{background:#57a773}
.k-inst--code .k-inst-head .name{margin-left:.4rem;font:400 .75rem/1 var(--v-mono-stack);
  color:var(--v-ink3);font-weight:400}
/* .v-code kommt aus page.css (Schrift, Farben der Spans); hier nur die Lage in der Karte. */
.k-inst--code .v-code{margin:0;padding:.2rem 0}
.k-inst--code .k-inst-result{margin-top:.9rem}

/* Auf dem Handy wird die Karte schmal; drei Anzeigen nebeneinander ergeben dort
   Spalten von unter 90 px. Untereinander bleibt jede Zahl lesbar. */
@media (max-width:560px){
  .k-inst{padding:1rem 1rem .9rem}
  .k-inst-readouts{grid-template-columns:1fr 1fr}
  .k-inst-head{flex-wrap:wrap}
  .k-inst-head .right{margin-left:0;width:100%}
}

/* ── Befundliste: die 22 Tätigkeiten je Branche ──────────────────────────────────────
 *
 * Vorher eine Tabelle mit 22 gleich aussehenden Zeilen, 1811 px hoch: der Befund
 * („Förderfähig" / „Abgrenzung" / „Nicht förderfähig") stand dreimal in derselben dunklen
 * Schrift. Die wichtigste Aussage der Seite trug damit kein einziges visuelles Signal, und
 * die Liste las sich als Wand (Max, 16.09.: „wieder eine grosse Textwand", „22 Punkte zu
 * viel", „Farbgebung gefaellt mir auch nicht ganz").
 *
 * Jetzt drei Dinge: eine Summenzeile beantwortet die Frage vorab, die Zeilen sind nach
 * Bereich gruppiert (sechs Bloecke statt einer Kette), und der Befund traegt Farbe und
 * einen Randstreifen. Die Farbe ist semantisch, nicht dekorativ — gruen/gelb/grau steht
 * fuer die Aussage, nicht fuer die Marke; der Markenakzent bleibt den Handlungen.
 */
.v-verd{margin:0}
.v-verd-sum{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.35rem}
.v-verd-sum .bv-p{font-size:.78rem;padding:.22rem .6rem}

.v-verd-g + .v-verd-g{margin-top:1.5rem}
/* `html.v2` davor, weil page.css die Ueberschriften mit `html.v2 h1,h2,h3` setzt — das ist
   spezifischer als eine blosse Klasse und hat meine Angaben sonst ueberstimmt: die Zeile kam
   in 16 px Geist dunkelblau statt in 11,5 px Mono grau. Gemessen, nicht geraten (16.09.). */
html.v2 .v-verd-h{font:600 .72rem/1.3 var(--v-mono-stack);letter-spacing:.09em;text-transform:uppercase;
  color:var(--v-ink3);margin:0 0 .5rem;padding-bottom:.4rem;border-bottom:1px solid var(--v-line2)}
.v-verd-l{list-style:none;margin:0;padding:0}

.v-verd-i{display:flex;align-items:baseline;gap:1rem;justify-content:space-between;
  padding:.62rem 0 .62rem .85rem;border-bottom:1px solid var(--v-line2);position:relative}
.v-verd-l li:last-child{border-bottom:0}
/* Randstreifen: traegt den Befund auch dort, wo die Pille erst am Zeilenende steht. */
.v-verd-i::before{content:"";position:absolute;left:0;top:.55rem;bottom:.55rem;width:3px;
  border-radius:2px;background:var(--v-vc)}
.v-verd-i--ok{--v-vc:var(--v-ok)}
.v-verd-i--part{--v-vc:var(--v-warn)}
.v-verd-i--no{--v-vc:var(--v-line)}
.v-verd-t{color:var(--v-ink);font-size:.95rem;line-height:1.55}
.v-verd-i--no .v-verd-t{color:var(--v-ink2)}
.v-verd-i .bv-p{flex:none;align-self:center}

/* Gruen fuer „foerderfaehig": page.css kennt nur yes/part/no, und yes ist der Markenakzent.
   Ein positiver Befund ist aber kein Markensignal — er braucht die Ampelfarbe. */
.bv-p--ok{--v-cc:var(--v-ok)}

@media (max-width:560px){
  .v-verd-i{flex-direction:column;align-items:flex-start;gap:.35rem}
  .v-verd-i .bv-p{align-self:flex-start}
}

.industry-scene{margin:0;background:#f3f6fa;border-top:3px solid #1e56b5;padding:1.3rem 1.3rem 1rem;border-radius:2px 2px 12px 12px;box-shadow:0 2px 4px rgba(13,27,62,.03),0 16px 40px rgba(13,27,62,.05)}
.industry-scene-kicker{font-size:.75rem;font-weight:500;letter-spacing:.025em;color:#52617a;margin-bottom:.4rem}
.industry-scene-title{font-size:1.15rem;line-height:1.4;letter-spacing:-.02em;color:#0d1b3e;font-weight:650;margin:0 0 1rem}
.industry-scene-caption{display:grid;gap:.7rem;margin-top:1rem}
.industry-scene-caption p{display:grid;grid-template-columns:108px 1fr;gap:.7rem;font-size:.83rem;line-height:1.55;color:#3b4b65;margin:0}
.industry-scene-caption strong{font-weight:600;color:#0d1b3e}
.industry-scene-caption p:first-child strong{color:#1e56b5}
@media(max-width:600px){.industry-scene{padding:1rem}.industry-scene-caption p{grid-template-columns:88px 1fr;font-size:.82rem;gap:.5rem}}

@media(max-width:600px){
 .industry-page .v-panel{padding:1rem .8rem}
 .industry-page .industry-assessment summary{padding-top:.7rem;padding-bottom:.7rem}
 .industry-page .v-verd-h{font-family:inherit;letter-spacing:.025em;font-size:.82rem;color:#4b5870}
 .industry-page .v-sec--open .v-head{margin-bottom:1rem}
}