/*
 * Gemeinsame Schale beider Ansichten — Portierung von
 * `Entscheidungs-Workshop.html` (Design-Artefakt).
 *
 * Struktur, Proportionen und Wording stammen aus dem Wireframe und bleiben
 * verbindlich. Geändert wurde nur: die frei gemischte Palette liegt jetzt auf
 * den echten Bechtle-Token-Werten, und der Fokusring ist auf dunklem Grund
 * sichtbar.
 */
:root{
  /* Bechtle-Design-System (tokens/colors.css) */
  --green-900:#042a1c; --green-800:#075033; --green-700:#0a6b45; --green-600:#0f8956;
  --green-400:#4dbf88; --green-300:#8ad9b2; --green-200:#c2ecd7; --green-100:#e4f6ed;
  --grey-050:#f7f8f7; --grey-200:#e2e6e4; --grey-300:#c8cfcb; --grey-500:#6d7873; --grey-600:#4c5551;
  --amber-600:#a86a00; --amber-100:#fdf1dc; --red-600:#c0271f;

  /* Rollen aus dem Wireframe, jetzt als Aliase auf Tokens */
  --ink:var(--green-900); --ink-2:var(--grey-600); --ink-3:var(--grey-500);
  --line:var(--grey-200); --line-2:var(--grey-300); --page:#fff; --soft:var(--grey-050);
  --t1:var(--green-100); --t1-line:var(--green-300); --t1-ink:var(--green-700);
  --t2:var(--green-200); --t2-line:var(--green-400); --t2-ink:var(--green-800);
  --t3:var(--green-800); --t3-line:var(--green-800); --t3-ink:#fff;
  --warn:var(--amber-600); --warn-bg:var(--amber-100); --bad:var(--red-600); --ok:var(--green-600);
  --maxw:1500px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);
     font-family:"Bechtle Pro","Segoe UI",system-ui,sans-serif;font-size:18px;line-height:1.5;
     -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.015em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
input,select,textarea{font:inherit;color:inherit}
/* Fokusring auch auf dunkelgrünem Grund sichtbar (Wireframe-Fund L12) */
:focus-visible{outline:3px solid var(--green-400);outline-offset:2px;
               box-shadow:0 0 0 5px rgba(255,255,255,.55)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[hidden]{display:none!important}

/* ---------- Demo-Band ---------- */
.demo{background:var(--warn-bg);border-bottom:1px solid var(--warn);color:var(--warn);
      font-size:14px;font-weight:700;padding:9px 0}

/* ---------- Kopf ---------- */
header.top{border-bottom:1px solid var(--line);padding:18px 0 16px}
.top-grid{display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap}
.top-main{flex:1 1 520px;min-width:0}
/* Die Überschrift stand einmal bei 38px und lief über zwei Zeilen. Sie wird
   einmal gelesen; der Raum davor arbeitet danach mit dem, was darunter steht. */
h1{font-size:clamp(22px,1.8vw,29px);line-height:1.2}
.lead{margin-top:8px;font-size:clamp(16px,1.15vw,18px);font-weight:300;color:var(--ink-2);max-width:70ch}
.top-side{display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.rolechip{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
          padding:6px 14px;border-radius:999px;background:var(--t1);color:var(--t1-ink);white-space:nowrap}
.rolechip.mod{background:var(--t3);color:#fff}
.rolechip.who{cursor:pointer;border:2px solid var(--t1-line)}
.rolechip.who:hover{background:var(--t2)}
.gprog{width:320px;max-width:100%}
.gprog .bar{height:10px;background:var(--soft);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.gprog .bar i{display:block;height:100%;background:var(--t2-line);width:0}
.gprog .cap{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-3);margin-top:6px;
            font-variant-numeric:tabular-nums}

/* ---------- Entscheidungsregel ----------
   Zwei Auftritte (S-016): knapp in Phase 6 (F-41, ohne Scrollen), ausgebaut
   am Ende von Phase 1. Dazwischen gar nicht — als Dauerband kostete sie auf
   jedem Schirm Höhe und wurde zur Tapete. */
.rule{background:var(--t3);color:#fff;padding:18px 0}
.rule .wrap{display:flex;gap:32px;align-items:baseline;flex-wrap:wrap}
.rule .k{font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green-300);flex:0 0 auto}
.rule ul{margin:0;padding:0;list-style:none;display:flex;gap:10px 34px;flex-wrap:wrap;flex:1}
.rule li{font-size:clamp(16px,1.2vw,18px)}

/* Die ausgebaute Fassung: Rangfolge statt Zeile. Die Nummern sind der Punkt —
   drei der vier Sätze bilden eine Kette (K.-o. schlägt Bewertung schlägt
   Bauchgefühl), und eine durchlaufende Zeile verbirgt genau das. */
.rule.big{padding:44px 0 48px;margin-top:8px}
.rule.big .wrap{display:block}
.rule-head{margin-bottom:26px}
.rule-cue{margin-top:8px;font-size:clamp(18px,1.5vw,23px);font-weight:300;color:var(--green-200);max-width:60ch}
.rule-list{margin:0;padding:0;list-style:none;display:grid;gap:14px;
           grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.rule-list li{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.07);
              border-left:4px solid var(--green-300);padding:16px 20px}
.rule-list .n{flex:none;font-size:15px;font-weight:700;color:var(--green-300);
              font-variant-numeric:tabular-nums;line-height:1.6}
.rule-list .t{font-size:clamp(17px,1.35vw,20px);font-weight:700;line-height:1.35}

/* ---------- Sektionen ----------
   Deutlich abgesetzt, damit die Moderation Leute HINSCHICKEN kann („schaut in
   die Bewertung") — vorher lief alles als eine Bahn durch. Kräftiger Balken
   statt dekorativer Linie: die Marke ist solide, nicht filigran. */
section{padding:34px 0}
section + section{border-top:1px solid var(--line)}
/* Sektion ohne eigenen Inhalt (Phase 1 trägt nur die Entscheidungsregel):
   keine Trennlinie, keine Polsterung — eine Linie ohne Inhalt darüber liest
   sich als Fehler. */
section.bare,section + section.bare{padding:0;border-top:0}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.sec-head::before{content:"";display:block;width:100%;height:6px;background:var(--t2-line);
                  margin-bottom:14px}
.sec-head h2{font-size:clamp(20px,1.7vw,26px)}
.sec-head .note{font-size:15px;color:var(--ink-3)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- Timeline ----------
   EINE Zeile hoch, nicht sechs. Der Phasen-TITEL steht nicht mehr in der
   Kachel: er stand siebenmal auf dem Schirm, brach in schmalen Kacheln
   buchstabenweise um („Com-mit-ment") und kostete den Löwenanteil der Höhe.
   Er steht jetzt EINMAL, oben in der Detailansicht direkt darunter — dort,
   wo er hingehört, weil er die laufende Phase beschreibt.
   Für die übrigen Kacheln trägt ihn `title` + `aria-label`.

   Die Breite bleibt proportional zur Dauer (flex-grow) — das war der Teil,
   der funktioniert hat. */
.tl{display:flex;gap:5px;align-items:stretch;overflow-x:auto}
.ph{flex-grow:var(--w);flex-basis:0;min-width:74px;border:1px solid var(--line-2);border-top-width:4px;
    background:#fff;text-align:left;padding:7px 9px 8px;display:flex;align-items:center;gap:7px;
    line-height:1.2;overflow:hidden;transition:background .15s,border-color .15s}
/* Zweizeilig: so passen „Phase 7" und „5 Min" auch in die schmalste Kachel,
   ohne die Proportionalitaet der Breite aufzugeben. */
.phtxt{display:flex;flex-direction:column;min-width:0}
.ph .num{font-size:12px;font-weight:700;color:var(--ink-3);white-space:nowrap;
         font-variant-numeric:tabular-nums}
.ph .dur{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Status als Punkt vor der Nummer — das Wort „offen" siebenmal nebeneinander
   sagt weniger als seine Abwesenheit. Der Text bleibt im aria-label. */
.ph .st{flex:none;width:9px;height:9px;border-radius:999px;border:2px solid var(--line-2);
        align-self:center;font-size:0;overflow:hidden}
.ph[data-st=running] .st{background:var(--ok);border-color:var(--ok)}
.ph[data-st=done] .st{background:var(--t1-ink);border-color:var(--t1-ink)}
.ph[data-tier="1"]{border-top-color:var(--t1-line)}
.ph[data-tier="2"]{border-top-color:var(--t2-line)}
.ph[data-tier="3"]{border-top-color:var(--t3-line)}
.ph[aria-current=true][data-tier="1"]{background:var(--t1);border-color:var(--t1-line)}
.ph[aria-current=true][data-tier="2"]{background:var(--t2);border-color:var(--t2-line)}
.ph[aria-current=true][data-tier="3"]{background:var(--t3);border-color:var(--t3);color:#fff}
.ph[aria-current=true] .num{color:inherit}
.ph[aria-current=true][data-tier="3"] .num{color:var(--green-300)}
.ph[aria-current=true][data-tier="3"] .st{border-color:var(--green-300)}
/* Moderation navigiert; Teilnehmende folgen — kuenftige Phasen sind kein Ziel. */
button.ph:hover{background:var(--soft)}
.tl.follow .ph{cursor:default}
.tl.follow .ph:not([aria-current=true]){opacity:.55}
.tierkey{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--ink-3);margin-left:auto}
.tierkey span{display:flex;align-items:center;gap:8px}
.tierkey i{width:22px;height:5px;display:block}

/* ---------- Detailansicht ---------- */
.detail{border:1px solid var(--line);border-top:5px solid var(--line-2);margin-top:14px;background:#fff}
.detail[data-tier="1"]{border-top-color:var(--t1-line)}
.detail[data-tier="2"]{border-top-color:var(--t2-line)}
.detail[data-tier="3"]{border-top-color:var(--t3-line)}
.detail-grid{display:grid;grid-template-columns:1fr 400px}
/* Der Phasentitel steht ueber der Karte, gleich unter den Kacheln. Die Karte
   traegt nur noch Skript und Timer und wird dadurch flacher. */
.phasehead{margin-top:16px;padding-left:16px;border-left:5px solid var(--line-2)}
.phasehead[data-tier="1"]{border-left-color:var(--t1-line)}
.phasehead[data-tier="2"]{border-left-color:var(--t2-line)}
.phasehead[data-tier="3"]{border-left-color:var(--t3-line)}
.phasehead h2{font-size:clamp(22px,1.9vw,30px);margin-top:2px}
.phasehead .desc{font-size:17px;color:var(--ink-2);margin-top:4px;max-width:75ch}
.detail-main{padding:22px 30px 26px;min-width:0}
.dlist{list-style:none;margin:0;padding:0;border-top:0}
.dlist li{padding:14px 0;border-bottom:1px solid var(--line);font-size:clamp(17px,1.35vw,20px);
          display:flex;gap:14px;align-items:flex-start}
.dlist li::before{content:"";flex:none;width:10px;height:10px;margin-top:.55em;background:var(--t2-line)}
.dlist li[data-mod]::before{background:var(--warn)}
.modtag{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--warn);
        background:var(--warn-bg);padding:2px 8px;margin-left:10px;white-space:nowrap;vertical-align:2px}
.aside{border-left:1px solid var(--line);padding:30px 28px;background:var(--soft);
       display:flex;flex-direction:column;gap:18px}
.timer{font-variant-numeric:tabular-nums;font-size:clamp(54px,6.2vw,86px);font-weight:700;line-height:1;
       letter-spacing:-.03em}
.timer.warn{color:var(--warn)}
.warnline{height:4px;background:var(--warn)}
.tctl{display:flex;gap:10px;flex-wrap:wrap}
.btn{border:2px solid var(--t3);border-radius:999px;padding:12px 24px;font-weight:700;font-size:16px;
     background:#fff;color:var(--t3);min-height:48px;display:inline-flex;align-items:center;justify-content:center}
.btn:hover{background:var(--t1)}
.btn.solid{background:var(--t3);color:#fff}
.btn.solid:hover{background:var(--green-700)}
.btn.plain{border-color:var(--line-2);color:var(--ink-2)}
.btn.plain:hover{background:#fff;border-color:var(--ink-3)}
.btn[disabled]{opacity:1;background:var(--grey-200);border-color:var(--grey-200);color:var(--ink-3);cursor:not-allowed}
.navctl{display:flex;gap:10px;flex-wrap:wrap}
.hint{font-size:15px;color:var(--ink-3)}

/* ---------- Use-Case-Karten ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.uc{border:1px solid var(--line);border-top:4px solid var(--t3);padding:20px 22px;background:#fff}
.uc h3{font-size:19px}
.uc .sub{font-size:15px;color:var(--ink-2);margin-top:4px;font-weight:700}
.uc .sum{font-size:15px;color:var(--ink-2);margin-top:10px}
details.brief{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
details.brief summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--t1-ink)}
details.brief h4{margin:14px 0 4px;font-size:14px}
details.brief p{font-size:14px;color:var(--ink-2);margin:0 0 8px}
.origin{margin-top:14px;padding:10px 12px;background:var(--soft);border-left:3px solid var(--t2-line);font-size:13px}
.origin .k{font-weight:700;color:var(--ink-2)}
.origin .warn-t{display:block;margin-top:5px;color:var(--warn)}
.means{display:flex;gap:26px;margin-top:16px}
.mean .k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.mean .v{font-size:30px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.ko{margin-top:14px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    display:inline-block;padding:3px 9px}
.ko.open{background:var(--soft);color:var(--ink-3)}
.ko.pass{background:var(--t1);color:var(--t1-ink)}
.ko.fail{background:#f8e6e5;color:var(--bad)}
.cov{margin-top:10px;font-size:14px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.dis{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.dis-k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--warn)}
.dis-row{margin-top:10px}
.dis-row .lbl{font-size:15px;font-weight:700}
.dis-row .sub2{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.bar5{display:flex;gap:3px;margin-top:5px}
.bar5 span{flex:1;text-align:center;font-size:12px;font-weight:700;padding:4px 0;border:1px solid var(--line);
           background:var(--soft);color:var(--ink-3);font-variant-numeric:tabular-nums}
.bar5 span[data-n]:not([data-n="0"]){background:var(--t2);border-color:var(--t2-line);color:var(--ink)}
.none{font-size:15px;color:var(--ink-3);margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}

/* ---------- Bewertung (Teilnehmende) ---------- */
.vote-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.vote-def{font-size:16px;color:var(--ink-2);margin-bottom:22px;max-width:70ch}
.vote-uc{border-top:1px solid var(--line);padding:16px 0}
.vote-uc .n{font-size:18px;font-weight:700}
.vote-uc .s{font-size:14px;color:var(--ink-3);margin-top:2px}
.scale{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.scale button{flex:1 1 56px;min-width:56px;min-height:52px;border:2px solid var(--line-2);background:#fff;
              border-radius:6px;font-size:19px;font-weight:700;color:var(--ink-2)}
.scale button:hover{border-color:var(--t3);color:var(--t3)}
.scale button[aria-pressed=true]{background:var(--t3);border-color:var(--t3);color:#fff}
.vote-nav{display:flex;gap:12px;align-items:center;margin-top:26px;flex-wrap:wrap}
.vote-prog{font-size:15px;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-left:auto}
.covered{background:var(--t1);border:1px solid var(--t1-line);padding:18px 20px;font-size:17px}
.covered b{color:var(--t1-ink)}

/* ---------- Abschluss ---------- */
.summary{background:var(--t3);color:#fff;padding:44px 0}
.summary h2{font-size:clamp(20px,1.7vw,26px);margin-bottom:22px}
.sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.scell .k{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green-300);
          display:block;margin-bottom:6px}
.scell .v{font-size:clamp(17px,1.4vw,21px);font-weight:700;overflow-wrap:anywhere}
.scell .v.empty{font-weight:300;color:var(--green-300)}
footer.foot{padding:22px 0 46px;font-size:14px;color:var(--ink-3)}

@media (max-width:1180px){
  .detail-grid{grid-template-columns:1fr}
  .aside{border-left:0;border-top:1px solid var(--line)}
  .sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .wrap{padding:0 20px}
  .top-side{align-items:flex-start}
  /* NICHT stapeln. Aus sieben Kacheln wurde hier eine Liste über den halben
     Bildschirm — genau die Höhe, die dieser Umbau einspart. Stattdessen
     komprimieren; reicht das nicht, wird geschoben. Der Ablauf ist eine
     Zeitleiste: senkrecht gestapelt ist er keine mehr. */
  .tl{padding-bottom:6px}
  .ph{min-width:68px;padding:7px 6px 8px;gap:5px}
  .ph .dur{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- Bewertungswerkzeug — 1:1 aus dem Wireframe ---------- */
/* ── Anmeldung ────────────────────────────────────────────────────────────
   Eine Tür, ein Feld, kein Raumname — dass hier nirgends nach dem Workshop
   gefragt wird, ist Absicht und nicht Sparsamkeit. */
.loginwrap{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:48px 24px}
.login{width:100%;max-width:560px;border:1px solid var(--line);border-top:5px solid var(--t3);
       background:#fff;padding:40px 40px 44px}
.login h1{font-size:clamp(24px,2.2vw,34px);margin:6px 0 10px}
.login .lead{font-size:17px;margin-bottom:26px}
.loginform{display:flex;gap:12px;flex-wrap:wrap}
.codeinput{flex:1 1 240px;min-height:56px;padding:0 18px;font-size:24px;font-weight:700;letter-spacing:.22em;
           border:2px solid var(--line-2);border-radius:4px;background:#fff;text-transform:lowercase}
.codeinput:focus{border-color:var(--t3);outline:none}
.loginerr{margin-top:16px;font-size:16px;color:var(--bad);min-height:1.4em}
.whobox{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.linkbtn{border:0;background:none;padding:0;font-size:14px;color:var(--ink-3);text-decoration:underline;
         cursor:pointer;font-weight:700}
.linkbtn:hover{color:var(--ink)}

/* ── Reveal-Gate ──────────────────────────────────────────────────────────
   Verdeckt ist der WARNENDE Zustand, nicht der neutrale: solange der Balken
   bernstein ist, laeuft die Erfassung und niemand darf Zahlen sehen. Gruen
   heisst „aufgedeckt" — und das ist der Moment, auf den Phase 4 hinarbeitet. */
.revealbar{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between;
           padding:18px 22px;border:2px solid var(--warn);background:var(--warn-bg)}
.revealbar.on{border-color:var(--t2-line);background:var(--t1)}
.rb-text{min-width:0}
.rb-k{display:block;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--warn)}
.revealbar.on .rb-k{color:var(--t1-ink)}
.rb-s{display:block;font-size:16px;color:var(--ink-2);margin-top:3px;font-variant-numeric:tabular-nums}
.rb-ctl{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto}
.rb-ctl .btn[aria-pressed=true]{background:var(--t2);border-color:var(--t2-line)}

/* Erfassungsstand statt Tabelle — das Einzige, was die Moderation vorher sieht. */
.progrows{display:flex;flex-direction:column;gap:10px}
.progrow{display:grid;grid-template-columns:minmax(120px,220px) 1fr auto;gap:16px;align-items:center}
.progrow .pn{font-size:17px;font-weight:700;overflow-wrap:anywhere}
.progrow .pbar{height:14px;background:var(--soft);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.progrow .pbar i{display:block;height:100%;background:var(--t2-line);width:0}
.progrow .pv{font-size:15px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.progrow[data-done="1"] .pbar i{background:var(--ok)}
.progrow[data-done="1"] .pv{color:var(--t1-ink);font-weight:700}

/* ── K.-o.-Schalterreihe ──────────────────────────────────────────────────
   Die Fall-Seite ist rot umrandet, egal ob sie „ja" oder „nein" heisst: beim
   EU-AI-Act-Kriterium faellt „ja" durch, und ein Reflex auf „nein = schlecht"
   waere genau der invertierte Fehler aus dem Handover-Artefakt. */
.kosw{display:flex;gap:6px;justify-content:center;align-items:center}
.kobtn{flex:0 1 62px;min-height:40px;border:2px solid var(--line-2);background:#fff;font-weight:700;
       font-size:15px;border-radius:4px;color:var(--ink-2);cursor:pointer}
.kobtn:hover:not([disabled]){border-color:var(--ink-3)}
.kobtn[aria-pressed=true]{background:var(--t3);border-color:var(--t3);color:#fff}
.kobtn.bad[aria-pressed=true]{background:var(--bad);border-color:var(--bad)}
.kobtn.bad{border-style:dashed;border-color:var(--red-600)}
.kobtn[disabled]{cursor:not-allowed;opacity:.75}
.koopen{margin-top:5px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
        font-weight:700;text-align:center}
.ko-table td.crit{width:32%}
.ko-table th.num{min-width:140px}
.koall{margin-top:20px;padding:16px 18px;border:2px solid var(--bad);background:#f8e6e5;color:var(--ink);
       font-size:16px}
/* Durchgefallen heisst ausgegraut und gekennzeichnet — nicht verschwunden. */
.uc[data-ko=fail]{background:var(--soft);border-color:var(--line-2)}
.uc[data-ko=fail] h3{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:2px}

.tool{margin-top:26px;border:1px solid var(--line);background:#fff;padding:28px 30px 32px}
.tool>h3{font-size:20px;margin-bottom:4px}
.tool>.sub{font-size:16px;color:var(--ink-3);margin-bottom:22px}
.scoregrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:36px;align-items:start}
.scoregrid.solo{grid-template-columns:minmax(0,1fr)}
table.score{border-collapse:collapse;width:100%}
table.score th,table.score td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);font-size:16px}
table.score thead th{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
                     vertical-align:bottom;border-bottom:2px solid var(--line-2)}
table.score tbody tr.grouphead td{background:var(--soft);font-weight:700;font-size:14px;letter-spacing:.07em;
                                  text-transform:uppercase;color:var(--t2-ink)}
table.score tbody tr.mean td{font-weight:700;background:var(--t1)}
table.score td.crit{width:40%}
table.score td.num,table.score th.num{text-align:center}
table.score .def{display:block;font-size:13px;font-weight:400;color:var(--ink-3);margin-top:2px}
input.sc{width:62px;height:46px;text-align:center;font-size:19px;font-weight:700;border:2px solid var(--line-2);
         background:#fff;border-radius:4px;font-variant-numeric:tabular-nums}
input.sc:hover{border-color:var(--ink-3)}
input.sc:focus{border-color:var(--t3)}
input.sc[data-set=true]{border-color:var(--t3);background:var(--t1)}
/* Dissens sitzt in der ZELLE — Use Case x Kriterium —, nicht in der Zeile. */
table.score td.dissens-cell{background:var(--warn-bg);box-shadow:inset 0 0 0 2px var(--warn)}
table.score .cellval{font-weight:700}
table.score .cellnote{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
                      color:var(--warn);margin-top:3px}
/* Namentliche Einzelwerte nach dem Reveal (D4). Name und Wert sind optisch
   getrennt — „Person 1 5" liest sich sonst als „Person 15". */
table.score .cellwho{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin-top:5px}
table.score .cellwho span,.diswho span{display:inline-flex;align-items:stretch;border:1px solid var(--line-2);
                                       background:#fff;white-space:nowrap;overflow:hidden}
table.score .cellwho em,.diswho em{font-style:normal;font-weight:400;padding:2px 5px;color:var(--ink-2)}
table.score .cellwho b,.diswho b{padding:2px 6px;background:var(--soft);border-left:1px solid var(--line);
                                 font-variant-numeric:tabular-nums}
table.score .cellwho span{font-size:11px;line-height:1.35}
.diswho{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.diswho span{font-size:13px}
.bar5.mini{margin-top:4px;gap:2px}
.bar5.mini span{font-size:10px;padding:1px 0}
.uch{font-size:15px;font-weight:700;color:var(--ink);text-transform:none;letter-spacing:0}
.uch small{display:block;font-weight:400;font-size:12px;color:var(--ink-3);margin-top:2px}
.ampel{display:flex;gap:6px;justify-content:center;margin-top:8px}
.ampel button{width:30px;height:30px;border-radius:999px;border:2px solid var(--line-2);background:#fff}
.ampel button[aria-pressed=true][data-a=gruen]{background:var(--ok);border-color:var(--ok)}
.ampel button[aria-pressed=true][data-a=gelb]{background:#d79a1e;border-color:#d79a1e}
.ampel button[aria-pressed=true][data-a=rot]{background:var(--bad);border-color:var(--bad)}
.ampel-cap{display:block;text-align:center;font-size:11px;color:var(--ink-3);margin-top:4px;font-weight:400;
           text-transform:none;letter-spacing:0}
.portfolio{max-width:620px;margin:0 auto 26px}
.portfolio svg{width:100%;height:auto;display:block;border:1px solid var(--line)}
.plegend{font-size:14px;color:var(--ink-3);margin-top:10px}
.plegend b{color:var(--ink)}
@media (max-width:1180px){ .scoregrid{grid-template-columns:1fr} }

/* ── Entscheidung: Fist-to-Five, Feld, Wiedervorlage (S-006) ──────────────
   Die Stufen 0–2 sind ROT umrandet, nicht rot gefüllt: ein Einwand ist kein
   Fehler, sondern der Zweck des Formats. Er soll auffindbar sein, nicht
   beschämend. */
.fistpick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.fistbtn{flex:1 1 128px;min-height:64px;border:2px solid var(--line-2);border-radius:6px;background:#fff;
         display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 6px}
.fistbtn .v{font-size:24px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.fistbtn .l{font-size:12px;color:var(--ink-3);text-align:center;line-height:1.2}
.fistbtn.low{border-color:var(--bad)}
.fistbtn:hover{border-color:var(--t3)}
.fistbtn[aria-pressed=true]{background:var(--t3);border-color:var(--t3);color:#fff}
.fistbtn[aria-pressed=true] .l{color:var(--green-300)}
.fistbtn.low[aria-pressed=true]{background:var(--bad);border-color:var(--bad)}
.fistbtn.low[aria-pressed=true] .l{color:#fbe3e1}
.fistnote{display:block;margin-bottom:16px}
.fistnote textarea,.dfield textarea,.dfield input,.dfield select,.rev-row input{
  width:100%;margin-top:6px;padding:10px 12px;border:2px solid var(--line-2);border-radius:4px;background:#fff}
.fistnote textarea:focus,.dfield textarea:focus,.dfield input:focus,.dfield select:focus,
.rev-row input:focus{border-color:var(--t3);outline:none}
.fiststat{margin-top:6px;font-size:16px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.fiststat.ok{color:var(--t1-ink)}
.fiststat.warn-t{color:var(--warn)}
.bar5.fistbar{margin-top:10px;max-width:420px}
.objections{margin-top:18px;padding-top:14px;border-top:2px solid var(--warn)}
.obj-row{margin-top:10px}
.obj-row .lbl{font-size:16px;font-weight:700}
.obj-row .sub2{font-size:15px;color:var(--ink-2)}

.decisionbox{margin-top:22px}
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.dfield{display:block}
.dfield.wide{margin-top:18px}
.dfield.override{border-left:4px solid var(--bad);padding-left:14px}
.decision-read{font-size:clamp(19px,1.6vw,24px);font-weight:700}
.revisits{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.rev-row{display:grid;grid-template-columns:minmax(120px,1fr) 180px minmax(160px,1.4fr);gap:12px;
         align-items:center;margin-top:10px}
.rev-row .rn{font-weight:700;font-size:16px}
@media (max-width:900px){ .rev-row{grid-template-columns:1fr} }

.exportfallback{width:100%;margin-top:14px;padding:12px;border:2px solid var(--t3);border-radius:4px;
                font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.45;
                background:var(--soft)}

/* „Sind die Leute fertig?" — steht am Weiter-Knopf, nicht in einer eigenen
   Fläche weiter unten. Amber = es fehlt jemand, gruen = der Raum kann weiter. */
.ready{border:2px solid var(--warn);background:var(--warn-bg);padding:10px 12px;margin-bottom:4px}
.ready.on{border-color:var(--t2-line);background:var(--t1)}
.ready .rk{display:block;font-size:15px;font-weight:700;color:var(--warn);
           font-variant-numeric:tabular-nums}
.ready.on .rk{color:var(--t1-ink)}
.ready .rs{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}

/* Fallback §12.4 — Nachtrag vom Bogen. Die Flaeche sagt laut, WESSEN Bogen
   gerade getippt wird: ein Nachtrag auf der falschen Person ist stiller
   Datenmuell. */
.entrybar{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between;
          padding:16px 20px;border:2px solid var(--t3);background:var(--t1)}
.entrybar .rb-k{display:block;font-size:13px;font-weight:700;letter-spacing:.1em;
                text-transform:uppercase;color:var(--t1-ink)}
.entrybar .rb-s{display:block;font-size:16px;color:var(--ink-2);margin-top:3px}
.btn.small{padding:7px 14px;font-size:14px}
.progrow{grid-template-columns:minmax(120px,200px) 1fr auto auto}
/* Nachgetragen sieht anders aus als selbst eingetippt (T-7). */
input.sc[data-src=moderator]{border-style:dashed;border-color:var(--warn);background:var(--warn-bg)}

/* Phase und Freigabe laufen auseinander — die Zeile wird lauter, nicht modal. */
.revealbar.urgent{border-width:3px;box-shadow:0 0 0 4px rgba(168,106,0,.14)}

textarea.assumptions{width:100%;padding:12px 14px;border:2px solid var(--line-2);border-radius:4px;
                     background:#fff;font-size:16px;line-height:1.5}
textarea.assumptions:focus{border-color:var(--t3);outline:none}

/* Konsens-Werte aus dem Dissens-Dialog (Phase 4). */
.meanedit{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.me-row{display:grid;grid-template-columns:minmax(110px,1fr) 150px 150px minmax(160px,1.4fr);
        gap:12px;align-items:end;margin-top:12px}
.me-row .rn{font-weight:700;font-size:16px;padding-bottom:10px}
.me-cell{display:block}
.me-cell .k{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
            color:var(--ink-3)}
.me-cell input,.me-note{width:100%;margin-top:4px;padding:9px 11px;border:2px solid var(--line-2);
                        border-radius:4px;background:#fff;font-variant-numeric:tabular-nums}
.me-cell input:focus,.me-note:focus{border-color:var(--t3);outline:none}
.me-cell.set input{border-color:var(--t2-line);background:var(--t1);font-weight:700}
.me-cell .c{display:block;font-size:12px;color:var(--ink-3);margin-top:3px;font-variant-numeric:tabular-nums}
@media (max-width:900px){ .me-row{grid-template-columns:1fr 1fr} }

/* Einzelstimmen in Phase 4 untereinander, nicht nebeneinander — sie werden
   gelesen, nicht überflogen. */
table.score .cellwho{flex-direction:column;align-items:stretch;gap:3px}
table.score .cellwho span{justify-content:space-between}

.summary .shint{margin-top:20px;font-size:15px;color:var(--green-300)}

/* Kurze Rueckmeldung fuer fehlgeschlagene Raumkommandos — kein Dialog. */
.flash{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:50;
       background:var(--green-900);color:#fff;padding:14px 22px;font-size:16px;font-weight:700;
       box-shadow:0 8px 28px rgba(0,0,0,.28);max-width:min(90vw,640px)}

/* Admin-Vorbereitung (S-013/D10) */
.newws{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;align-items:end;
       margin-top:16px}
.wsrow{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
       padding:14px 0;border-top:1px solid var(--line)}
.wsrow .wn{font-size:18px;font-weight:700}
.wsrow .ws{font-size:14px;color:var(--ink-3)}
.rosterbox{margin:8px 0 22px;padding:18px 20px;border:2px solid var(--t2-line);background:var(--t1)}
code.invite{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;font-weight:700;
            letter-spacing:.14em;background:#fff;border:1px solid var(--line-2);padding:4px 10px}
@media (max-width:900px){ .wsrow{grid-template-columns:1fr} }

/* Use-Case-Import (S-023). Der Bericht steht bewusst neben der Eingabe und
   nicht in einem Hinweis-Streifen: er ist das Ergebnis, nicht eine Randnotiz. */
.impbox{width:100%;margin-top:12px;padding:12px 14px;border:2px solid var(--line-2);border-radius:4px;
        background:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
        line-height:1.5;resize:vertical}
.impbox:focus{border-color:var(--t3);outline:none}
.impreport{margin:14px 0 4px;padding:12px 14px;border-left:4px solid var(--t3);background:#fff}
.impreport .wn{font-size:16px;font-weight:700}
.impreport .ws{font-size:14px;color:var(--ink-3)}
.impreport.bad{border-left-color:#b3261e}
.rosterbox input[type=file]{margin-top:12px;font-size:14px}