/* ============================================================
   90+ Pilot-App · Frontend-Styles (v0.2)
   Vollständig auf CSS-Custom-Properties umgestellt (SPEC 5.2).
   Dark Mode ist Standard; Light-Theme als zweite Variablenbelegung.
   Farben ausschließlich über Variablen — keine harten Hex-Werte
   außerhalb der beiden Theme-Blöcke.
   ============================================================ */

/* ---------- Theme: DARK (Standard, 90+-Blauwelt) ---------- */
:root{
  color-scheme: dark;
  /* SPEC-Kernnamen */
  --bg:#06120D; --surface:#0C1F17; --surface2:#081711;
  --text:#E8F8F0; --muted:#8FA89C; --border:#24453A;
  --accent:#0AE197;
  /* Flächen & Tinte (Bestandsnamen, überall verwendet) */
  --page:var(--bg); --card:var(--surface); --card2:#122A20;
  --ink:var(--text); --ink-2:#AFC9BD; --ink-3:var(--muted);
  --grid:#1B382C; --line:var(--border); --ring:rgba(0,0,0,.28);
  /* Marke */
  --brand:#0AE197;            /* Markenfläche (Buttons, Icons) */
  --brand-2:#33EBAC;          /* Hover der Markenfläche */
  --brand-3:#4FEFB6;          /* Markenakzent als Text */
  --brand-ink:#5CF2BC;        /* Marke als Textfarbe */
  --brand-tint:rgba(10,225,151,.14);
  --on-brand:#04231A;
  --side:#040D09;             /* Sidebar-Grund */
  --side-line:rgba(255,255,255,.10);
  --side-text:rgba(255,255,255,.82);
  --side-text-2:rgba(255,255,255,.55);
  --side-text-3:rgba(255,255,255,.42);
  --logo-accent:#0AE197;
  --crest-g1:#0E5C40; --crest-g2:#081711; --crest-ink:#C9F7E4;
  --head-g1:#0B2A1E; --head-g2:#11402D;
  --auth-g1:#040D09; --auth-g2:#081711; --auth-g3:#0E3A28;
  /* Serien (dataviz, dark-validiert) */
  --series-1:#2FD9A0; --series-1-deep:#7FF0C8; --series-1-soft:rgba(47,217,160,.30);
  --series-2:#33584A;
  /* M18: Chart-Warnserie + Hintergrund-Tint (getrennt von Chartserien) */
  --series-warn:var(--st-warn); --tint-soft:rgba(47,217,160,.28);
  /* Status/Ampel (reserviert, AA auf --surface) */
  --st-good:#45B36B; --st-good-text:#7FD6A0; --st-good-bg:rgba(69,179,107,.15);
  --st-warn:#F2B33D; --st-warn-text:#F6C866; --st-warn-bg:rgba(242,179,61,.14);
  --st-warn-deep:#B07E1B; --on-warn:#3A2A00;
  --st-serious:#ED7A4E; --st-serious-text:#F7AC88; --st-serious-bg:rgba(237,122,78,.15);
  --st-crit:#E5545A; --st-crit-text:#FF9CA0; --st-crit-bg:rgba(229,84,90,.16);
  --toast-bg:#0E3A2A; --toast-err:#8E2A2A; --toast-ok-ic:#8CC98C; --toast-err-ic:#F5B5B5;
  --ai-bg:rgba(139,120,240,.20); --ai-text:#C3B7F7;
  --work-bg:rgba(126,110,225,.20); --work-text:#BFB4F2;
  --confD-bg:#28453A; --confD-ink:var(--text);
  /* Spielfeld (Kaderplan-Board) */
  --pitch:#0E3A24; --pitch-2:#124528; --pitch-line:rgba(255,255,255,.22);
  --shadow:0 1px 2px rgba(0,0,0,.25),0 4px 14px rgba(0,0,0,.30);
  --radius:12px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---------- Theme: LIGHT (zweite Belegung) ---------- */
html[data-theme="light"]{
  color-scheme: light;
  --bg:#F4F6F9; --surface:#FFFFFF; --surface2:#E9EEF5;
  --text:#141E2C; --muted:#64707F; /* M18: 5,0:1 auf #fff (vorher 3,15:1) */
  --border:#CBD3DE;
  --accent:#067A54;
  --page:var(--bg); --card:var(--surface); --card2:#F0F3F8;
  --ink:var(--text); --ink-2:#4E5B70; --ink-3:var(--muted);
  --grid:#E4E8EF; --line:var(--border); --ring:rgba(15,36,64,.10);
  --brand:#067A54; --brand-2:#0A9166; --brand-3:#067A54;
  --brand-ink:#065F43; --brand-tint:#DFF7EC; --on-brand:#FFFFFF;
  --side:#04150E;
  --side-line:rgba(255,255,255,.12);
  --side-text:rgba(255,255,255,.82);
  --side-text-2:rgba(255,255,255,.55);
  --side-text-3:rgba(255,255,255,.42);
  --logo-accent:#0AE197;
  --crest-g1:#0E5C40; --crest-g2:#04150E; --crest-ink:#C9F7E4;
  --head-g1:#065F43; --head-g2:#0A8059;
  --auth-g1:#04150E; --auth-g2:#0A2A1D; --auth-g3:#10402C;
  /* M18: Chartserien ≥3:1 auf #fff — series-1 4,4:1 · series-1-soft 3,2:1
     (vorher 1,3:1) · series-2 5,2:1 (vorher 1,3:1) · series-warn 3,1:1.
     Heller Flächen-Tint für Nicht-Chart-Zwecke: --tint-soft. */
  --series-1:#0B8F63; --series-1-deep:#066247; --series-1-soft:#57BE97;
  --series-2:#5C7A6C;
  --series-warn:#C98500; --tint-soft:#D5F3E6;
  --st-good:#0CA30C; --st-good-text:#006300; --st-good-bg:#E7F4E7;
  --st-warn:#FAB219; --st-warn-text:#7A5200; --st-warn-bg:#FDF3D8;
  --st-warn-deep:#C98500; --on-warn:#3A2A00;
  --st-serious:#EC835A; --st-serious-text:#8C3A1B; --st-serious-bg:#FCEAE2;
  --st-crit:#D03B3B; --st-crit-text:#9B2323; --st-crit-bg:#FBE7E7;
  --toast-bg:#0A2A1D; --toast-err:#7A1F1F; --toast-ok-ic:#8CC98C; --toast-err-ic:#F5B5B5;
  --ai-bg:#EDE9FB; --ai-text:#4A3AA6;
  --work-bg:#E7E4F6; --work-text:#3F3390;
  --confD-bg:#B9C1CD; --confD-ink:#141E2C;
  --pitch:#2F7D4F; --pitch-2:#358A58; --pitch-line:rgba(255,255,255,.45);
  --shadow:0 1px 2px rgba(15,36,64,.06),0 4px 14px rgba(15,36,64,.07);
}

*{box-sizing:border-box;margin:0;padding:0}
/* M18 · sichtbarer Fokusring in beiden Themes (Tastaturbedienung) */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.sidebar :focus-visible,.briefing-head:focus-visible{outline-color:var(--logo-accent)}
.pcard:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
html[data-theme="light"] .pcard:focus-visible{outline-color:#FFFFFF}
html,body{height:100%}
body{background:var(--page);color:var(--ink);font-size:14.5px;line-height:1.45;
  -webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
a{color:inherit}

/* ---------- Layout ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:242px;flex:0 0 242px;background:var(--side);color:var(--side-text);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.view{flex:1;padding:26px 34px 12px;max-width:1220px;width:100%;margin:0 auto}
.view-footer{padding:14px 34px 20px;max-width:1220px;width:100%;margin:0 auto;
  color:var(--ink-3);font-size:12px;border-top:1px solid var(--grid);display:flex;
  justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- Sidebar ---------- */
.brand{padding:22px 20px 16px;border-bottom:1px solid var(--side-line)}
.brand .logo{font-size:26px;font-weight:800;letter-spacing:.5px}
.brand .logo span{color:var(--logo-accent)}
.brand .claim{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--side-text-2);margin-top:3px}
.club{display:flex;align-items:center;gap:10px;padding:14px 20px;
  border-bottom:1px solid var(--side-line)}
.club-crest{width:34px;height:34px;border-radius:9px;background:linear-gradient(150deg,var(--crest-g1),var(--crest-g2));
  border:1px solid var(--side-line);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12px;color:var(--crest-ink);flex:0 0 34px}
.club b{font-size:13.5px;display:block}
.club small{color:var(--side-text-2);font-size:11px}
nav{padding:12px 10px;flex:1}
.nav-h{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--side-text-3);
  padding:12px 12px 6px}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;color:var(--side-text);padding:8px 12px;border-radius:8px;
  font-size:13.5px;margin-bottom:1px;text-decoration:none}
.nav-item svg{flex:0 0 17px;opacity:.85}
.nav-item:hover{background:rgba(255,255,255,.08)}
.nav-item.active{background:rgba(255,255,255,.14);color:#FFFFFF;font-weight:600}
/* v0.6.2 (UIPOLISH §36) · Captain-Eintrag typografisch leicht gestärkt —
   nur Schriftgewicht/Laufweite, kein Größensprung (kein Layout-Shift der
   übrigen Navigation, keine eigene Farbe) */
.nav-item.nav-captain{font-weight:750;letter-spacing:.01em}
.nav-badge{margin-left:auto;background:var(--st-warn);color:var(--on-warn);font-weight:700;
  font-size:11px;border-radius:99px;padding:1px 7px}
.nav-dot{width:7px;height:7px;border-radius:50%;margin-left:auto}
.sidebar-foot{padding:14px 20px 18px;font-size:10.5px;color:var(--side-text-2);
  border-top:1px solid var(--side-line)}
.sidebar-foot a{color:var(--side-text);text-decoration:underline;cursor:pointer}
.theme-toggle{display:flex;align-items:center;gap:8px;width:100%;margin-bottom:10px;
  background:rgba(255,255,255,.08);border:1px solid var(--side-line);color:var(--side-text);
  border-radius:8px;padding:6px 10px;font-size:11.5px;font-weight:600}
.theme-toggle:hover{background:rgba(255,255,255,.15)}
.theme-toggle svg{flex:0 0 15px}

/* ---------- Allgemein ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:18px;flex-wrap:wrap}
.page-head h1{font-size:21px;font-weight:750;letter-spacing:-.01em}
.page-head .sub{color:var(--ink-2);font-size:13px;margin-top:3px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  border:1px solid var(--ring)}
.btn{border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);
  padding:7px 14px;font-size:13px;font-weight:600}
.btn:hover{border-color:var(--brand-3)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-2)}
.btn-ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:var(--brand-tint);color:var(--brand-ink)}
.btn-danger{background:var(--card);border-color:var(--st-crit);color:var(--st-crit-text)}
.btn[disabled]{opacity:.45;cursor:default;pointer-events:none}
.btn-sm{padding:4px 10px;font-size:12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
.muted{color:var(--ink-3);font-size:12px}
.hint{font-size:12px;color:var(--ink-3)}

/* Formulare */
.inp, select.inp, textarea.inp{width:100%;border:1.5px solid var(--line);border-radius:9px;
  padding:8px 11px;font:inherit;font-size:13.5px;background:var(--card);color:var(--ink)}
.inp:focus{outline:2px solid var(--series-1);outline-offset:-1px;border-color:var(--series-1)}
textarea.inp{resize:vertical;min-height:70px}
.fld{margin-bottom:11px}
.fld label{display:block;font-size:11.5px;font-weight:650;color:var(--ink-2);margin-bottom:4px;
  letter-spacing:.02em}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.form-grid .full{grid-column:1/-1}
.form-note{font-size:12px;color:var(--ink-2);background:var(--page);border:1px solid var(--grid);
  border-radius:8px;padding:9px 12px;margin:6px 0 12px}
.err-inline{font-size:12.5px;color:var(--st-crit-text);background:var(--st-crit-bg);
  border:1px solid var(--st-crit);border-radius:8px;padding:8px 11px;margin:8px 0}
.ok-inline{font-size:12.5px;color:var(--st-good-text);background:var(--st-good-bg);
  border-radius:8px;padding:8px 11px;margin:8px 0}

/* Chips / Badges */
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:99px;
  padding:2px 9px;font-size:11.5px;font-weight:600;white-space:nowrap}
.chip-agent{background:var(--brand-tint);color:var(--brand-ink)}
.chip-conf{background:var(--card);border:1px solid var(--line);color:var(--ink-2);font-weight:600}
.chip-conf b{display:inline-flex;width:15px;height:15px;border-radius:4px;align-items:center;
  justify-content:center;font-size:10px;color:var(--on-brand);background:var(--brand)}
.chip-conf.c-B b{background:var(--brand-2)}
.chip-conf.c-C b{background:var(--ink-3);color:var(--page)}
.chip-conf.c-D b{background:var(--confD-bg);color:var(--confD-ink)}
.chip-ai{background:var(--ai-bg);color:var(--ai-text)}
.chip-legal{background:var(--st-warn-bg);color:var(--st-warn-text)}
.prio{font-size:11px;font-weight:700;letter-spacing:.02em;border-radius:6px;padding:2px 7px}
.prio-krit{background:var(--st-crit-bg);color:var(--st-crit-text)}
.prio-hoch{background:var(--st-serious-bg);color:var(--st-serious-text)}
.prio-mittel{background:var(--brand-tint);color:var(--brand-3)}
.status-pill{display:inline-flex;align-items:center;gap:5px;border-radius:99px;
  padding:2px 9px;font-size:11.5px;font-weight:650}
.sp-neu{background:var(--tint-soft);color:var(--series-1-deep)}
.sp-arbeit{background:var(--work-bg);color:var(--work-text)}
.sp-freigabe{background:var(--st-warn-bg);color:var(--st-warn-text)}
.sp-erledigt{background:var(--st-good-bg);color:var(--st-good-text)}
.sp-fehler{background:var(--st-crit-bg);color:var(--st-crit-text)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 9px}
.dot-good{background:var(--st-good)}
.dot-warn{background:var(--st-warn);outline:1px solid var(--st-warn-deep);outline-offset:-1px}
.dot-crit{background:var(--st-crit)}
.statusline{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-2)}
.rating-badge{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:3px 10px;
  font-size:12px;font-weight:700}
.rb-top{background:var(--st-good-bg);color:var(--st-good-text)}
.rb-mittelfeld{background:var(--st-warn-bg);color:var(--st-warn-text)}
.rb-risiko{background:var(--st-crit-bg);color:var(--st-crit-text)}
.excl-badge{display:inline-flex;border-radius:6px;padding:2px 7px;font-size:10.5px;font-weight:700;
  background:var(--st-serious-bg);color:var(--st-serious-text);text-transform:uppercase;letter-spacing:.04em}
.chip-demo{display:inline-flex;border-radius:6px;padding:2px 7px;font-size:10.5px;font-weight:700;
  background:var(--ai-bg);color:var(--ai-text);text-transform:uppercase;letter-spacing:.04em}

/* Feldfehler (M04): markiertes Eingabefeld */
.inp.inp-err{border-color:var(--st-crit);outline:1px solid var(--st-crit);outline-offset:-1px}

/* Konsens-Panel (M02): Partei-Zeilen aus dem Server-Zustand */
.consent-list{list-style:none;margin:8px 0 0;padding:0}
.consent-list li{display:flex;align-items:center;gap:9px;padding:7px 2px;
  border-bottom:1px solid var(--grid);font-size:13px}
.consent-list li:last-child{border-bottom:0}
.consent-list .cname{font-weight:650;flex:1}
.consent-list .cts{font-size:11.5px;color:var(--ink-3)}

/* Demo-Banner */
.banner-demo{background:var(--st-warn-bg);color:var(--st-warn-text);border-bottom:1px solid var(--st-warn);
  padding:7px 34px;font-size:12.5px;font-weight:600;display:flex;gap:8px;align-items:center}

/* ---------- Briefing-Leiste ---------- */
.briefing{margin-bottom:20px;overflow:hidden}
.briefing-head{display:flex;align-items:center;gap:12px;padding:11px 18px;width:100%;
  background:linear-gradient(90deg,var(--head-g1),var(--head-g2));color:var(--crest-ink);border:0;
  border-radius:var(--radius);text-align:left}
.briefing.open .briefing-head{border-radius:var(--radius) var(--radius) 0 0}
.briefing-head .sun{flex:0 0 18px}
.briefing-head b{font-size:14px}
.briefing-head .meta{color:var(--side-text-2);font-size:12px}
.briefing-head .chev{margin-left:auto;transition:transform .25s}
.briefing.open .chev{transform:rotate(180deg)}
.briefing-body{display:none;background:var(--card);border:1px solid var(--ring);border-top:0;
  border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow)}
.briefing.open .briefing-body{display:block;animation:slideIn .22s ease}
.brief-item{display:flex;gap:14px;align-items:flex-start;padding:13px 18px;
  border-bottom:1px solid var(--grid)}
.brief-item:last-child{border-bottom:0}
.brief-rank{flex:0 0 24px;height:24px;border-radius:7px;background:var(--brand-tint);
  color:var(--brand-ink);font-weight:800;font-size:12.5px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.brief-txt{flex:1;font-size:13.5px}
.brief-txt .why{color:var(--ink-2);font-size:12.5px;margin-top:2px}
.brief-meta{display:flex;gap:7px;align-items:center;flex-wrap:wrap;flex:0 0 auto;margin-top:1px}

/* ---------- Teamkarten ---------- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.agent-card{padding:18px;display:flex;flex-direction:column;gap:12px;cursor:pointer;
  transition:transform .12s,box-shadow .12s}
.agent-card:hover{transform:translateY(-2px);box-shadow:0 2px 4px var(--ring),0 10px 26px var(--ring)}
.agent-top{display:flex;gap:12px;align-items:flex-start}
.agent-ic{width:40px;height:40px;flex:0 0 40px;border-radius:10px;background:var(--brand);
  color:var(--on-brand);display:flex;align-items:center;justify-content:center}
.agent-top h3{font-size:15.5px;font-weight:750}
.agent-top .role{color:var(--ink-2);font-size:12.5px}
.agent-top .statusline{margin-left:auto;flex:0 0 auto}
.tagline{font-size:13px;color:var(--brand-3);font-style:italic;border-left:3px solid var(--brand-tint);
  padding-left:10px}
.kpi-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:var(--page);border:1px solid var(--grid);border-radius:10px;padding:9px 12px}
.stat .lbl{font-size:11px;color:var(--ink-2);letter-spacing:.02em;text-transform:uppercase;font-weight:600}
.stat .val{font-size:19px;font-weight:750;letter-spacing:-.01em;margin-top:1px}
.stat .val small{font-size:12px;color:var(--ink-2);font-weight:600}
.stat .delta{font-size:11.5px;font-weight:650;margin-left:4px}
.delta-warn{color:var(--st-serious-text)}
.delta-good{color:var(--st-good-text)}
.agent-msg{display:flex;gap:9px;align-items:flex-start;background:var(--page);
  border:1px solid var(--grid);border-left:3px solid var(--st-warn);border-radius:8px;
  padding:9px 11px;font-size:12.5px}
.agent-msg.crit{border-left-color:var(--st-crit)}
.agent-msg.good{border-left-color:var(--st-good)}
.agent-foot{display:flex;align-items:center;justify-content:space-between;color:var(--ink-2);
  font-size:12px;margin-top:auto}
.done-count b{color:var(--ink)}
.kpi-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}

/* ---------- Agentenprofil ---------- */
.profile-grid{display:grid;grid-template-columns:370px 1fr;gap:18px;align-items:start}
.jobcard{padding:20px}
.jobcard .agent-top{margin-bottom:12px}
.jobcard h4{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  margin:18px 0 8px;font-weight:700}
.jobcard .mission{font-size:13.5px;color:var(--ink-2)}
.tasklist{list-style:none}
.tasklist li{display:flex;gap:8px;font-size:13px;padding:3.5px 0;color:var(--ink-2)}
.tasklist li::before{content:"";flex:0 0 5px;height:5px;border-radius:50%;background:var(--series-1);margin-top:7px}
.notdo{list-style:none}
.notdo li{display:flex;gap:8px;font-size:12.5px;color:var(--ink-2);padding:3px 0}
.notdo svg{flex:0 0 14px;margin-top:2px;color:var(--ink-3)}
.auto-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:4px}
.auto-step{border:1px solid var(--grid);border-radius:8px;padding:7px 8px;text-align:center;background:var(--page)}
.auto-step b{display:block;font-size:12px}
.auto-step small{font-size:10px;color:var(--ink-3);display:block;line-height:1.25;margin-top:2px}
.auto-step.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.auto-step.on small{color:var(--side-text-2)}
.auto-note{font-size:11.5px;color:var(--ink-2);margin-top:7px}

.workcol{display:flex;flex-direction:column;gap:18px;min-width:0}
.panel{padding:18px 20px}
.panel-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.panel-h h3{font-size:15px;font-weight:750}
.feed-item{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--grid);align-items:flex-start}
.feed-item:first-of-type{border-top:0}
.feed-item.new-flash{animation:flash 1.6s ease}
.feed-kind{flex:0 0 86px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);margin-top:3px}
.feed-kind.deleg{color:var(--series-1-deep)}
.feed-main{flex:1;min-width:0}
.feed-main .t{font-size:13.5px;font-weight:600}
.feed-main .d{font-size:12.5px;color:var(--ink-2);margin-top:2px;overflow-wrap:anywhere}
.feed-side{flex:0 0 auto;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.feed-side time{font-size:11px;color:var(--ink-3)}
.result{border-top:1px solid var(--grid);padding:12px 0}
.result:first-of-type{border-top:0}
.result .t{font-size:13.5px;font-weight:650}
.result .d{font-size:12.5px;color:var(--ink-2);margin:3px 0 7px;overflow-wrap:anywhere}
.result .src{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3)}

/* ---------- Chart ---------- */
.chart-wrap{position:relative}
.chart-wrap svg{display:block;width:100%;height:auto}
.chart-tip{position:absolute;pointer-events:none;background:var(--toast-bg);color:var(--crest-ink);
  font-size:11.5px;border-radius:7px;padding:5px 9px;transform:translate(-50%,-115%);
  white-space:nowrap;opacity:0;transition:opacity .1s;box-shadow:var(--shadow);z-index:5}
.chart-tip small{color:var(--side-text-2)}
.chart-note{font-size:11.5px;color:var(--ink-3);margin-top:6px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-2);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* Headroom-Balken */
.hbar{display:grid;grid-template-columns:170px 1fr 96px;gap:10px;align-items:center;
  padding:5.5px 0;border-top:1px solid var(--grid);font-size:12.5px}
.hbar:first-of-type{border-top:0}
.hbar .n{color:var(--ink-2);font-weight:600}
.hbar .track{height:11px;border-radius:99px;background:var(--page);border:1px solid var(--grid);overflow:hidden}
.hbar .track i{display:block;height:100%;background:var(--series-1)}
.hbar.neg .track i{background:var(--st-crit)}
.hbar.binding .n{color:var(--st-serious-text)}
.hbar.binding .track i{background:var(--st-serious)}
.hbar .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:650}
.bind-tag{display:inline-block;margin-left:6px;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;background:var(--st-serious-bg);color:var(--st-serious-text);
  border-radius:5px;padding:1px 5px;vertical-align:1px}

/* ---------- Auftrag ---------- */
.order-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.agent-pick{display:grid;gap:8px}
.pick{display:flex;gap:11px;align-items:center;border:1.5px solid var(--grid);border-radius:10px;
  padding:10px 13px;background:var(--card);cursor:pointer;text-align:left;width:100%;color:var(--ink)}
.pick:hover{border-color:var(--brand-3)}
.pick.sel{border-color:var(--brand-3);background:var(--brand-tint);box-shadow:inset 0 0 0 1px var(--brand-3)}
.pick .agent-ic{width:32px;height:32px;flex-basis:32px;border-radius:8px}
.pick b{font-size:13.5px;display:block}
.pick small{color:var(--ink-2);font-size:11.5px}
.order-form textarea{width:100%;min-height:118px;border:1.5px solid var(--line);border-radius:10px;
  padding:12px 14px;font:inherit;font-size:13.5px;resize:vertical;background:var(--card);color:var(--ink)}
.order-form textarea:focus{outline:2px solid var(--series-1);outline-offset:-1px;border-color:var(--series-1)}
.chips-row{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 14px}
.type-chip{border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--ink-2);
  font-size:12px;font-weight:600;padding:4px 12px}
.type-chip:hover{border-color:var(--brand-3);color:var(--brand-3)}
.type-chip.sel{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.order-note{font-size:12px;color:var(--ink-2);background:var(--page);border:1px solid var(--grid);
  border-radius:8px;padding:9px 12px;margin-bottom:14px}
.task-running{display:flex;gap:10px;align-items:center;color:var(--ink-2);font-size:13px;padding:12px 0}
.spinner{width:16px;height:16px;border-radius:50%;border:2.5px solid var(--grid);
  border-top-color:var(--series-1);animation:spin .8s linear infinite;flex:0 0 16px}
@keyframes spin{to{transform:rotate(360deg)}}
.result-card .body{font-size:13.5px;line-height:1.55;overflow-wrap:anywhere}

/* ---------- Freigaben ---------- */
.approval{padding:18px 20px;margin-bottom:16px;transition:opacity .3s}
.approval.decided{opacity:.72}
.appr-head{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.appr-head h3{font-size:15px;font-weight:750;flex:1;min-width:220px}
.appr-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin:13px 0}
.appr-cell{background:var(--page);border:1px solid var(--grid);border-radius:9px;padding:10px 12px}
.appr-cell h5{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.appr-cell p{font-size:12.5px;color:var(--ink-2)}
.appr-cell p b{color:var(--ink)}
.appr-foot{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.four-eyes{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--brand-ink);
  background:var(--brand-tint);border-radius:99px;padding:3px 10px;font-weight:600}
.appr-foot .spacer{flex:1}
.btn-approve{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn-approve:hover{background:var(--brand-2)}
.decision-tag{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12.5px;
  border-radius:8px;padding:5px 11px}
.dec-ok{background:var(--st-good-bg);color:var(--st-good-text)}
.dec-no{background:var(--st-crit-bg);color:var(--st-crit-text)}
.dec-legal{background:var(--st-warn-bg);color:var(--st-warn-text)}
.chain{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px;display:flex;
  flex-direction:column;gap:6px;animation:slideIn .35s ease}
.chain-item{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ink-2)}
.chain-item svg{color:var(--st-good);flex:0 0 15px}
.chain-item b{color:var(--ink)}

/* ---------- Tabellen ---------- */
.audit-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.f-chip{border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--ink-2);
  font-size:12px;font-weight:600;padding:4px 12px}
.f-chip.sel{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
table.tbl{width:100%;border-collapse:collapse;font-size:12.8px}
table.tbl th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);font-weight:700;white-space:nowrap}
table.tbl td{padding:9px 12px;border-bottom:1px solid var(--grid);vertical-align:top}
table.tbl tr:last-child td{border-bottom:0}
table.tbl td.ts{white-space:nowrap;color:var(--ink-2);font-variant-numeric:tabular-nums}
table.tbl td.hash{color:var(--ink-3)}
table.tbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.tbl th.num{text-align:right}
tr.row-link{cursor:pointer}
tr.row-link:hover td{background:var(--brand-tint)}
.empty-note{color:var(--ink-3);text-align:center;padding:26px 10px;font-size:13px}

/* ---------- Verträge ---------- */
.dropzone{border:2px dashed var(--line);border-radius:var(--radius);padding:26px 18px;text-align:center;
  color:var(--ink-2);font-size:13px;background:var(--page);transition:border-color .15s,background .15s;cursor:pointer}
.dropzone.drag{border-color:var(--series-1);background:var(--tint-soft);color:var(--series-1-deep)}
.dropzone b{display:block;font-size:14px;color:var(--ink);margin-bottom:3px}
.clause{border:1px solid var(--grid);border-radius:10px;padding:14px 16px;margin-bottom:14px;background:var(--card)}
.clause.validated{border-left:3px solid var(--st-good)}
.clause.rejected{opacity:.6;border-left:3px solid var(--st-crit)}
.clause-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
.clause-head .ct{font-size:13.5px;font-weight:700;flex:1;min-width:160px}
.orig{background:var(--page);border-left:3px solid var(--line);border-radius:0 8px 8px 0;
  padding:9px 12px;font-size:12.5px;color:var(--ink-2);font-style:italic;margin-bottom:10px;
  overflow-wrap:anywhere}
.cond-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.cond-row .fld{flex:1;min-width:130px;margin-bottom:8px}
.clause-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}

/* ---------- Netting-Ströme ---------- */
.flows{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.flow-list{list-style:none;font-size:12.8px}
.flow-list li{display:flex;gap:8px;padding:5px 0;border-top:1px solid var(--grid);align-items:center}
.flow-list li:first-child{border-top:0}
.flow-list .amt{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}
.flow-h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;margin-bottom:6px}
.netting-kpis{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 14px}

/* ---------- Treiber-Balken (Rating) ---------- */
.driver{display:grid;grid-template-columns:190px 1fr 70px;gap:10px;align-items:center;
  padding:5px 0;font-size:12.5px}
.driver .track{height:9px;border-radius:99px;background:var(--page);border:1px solid var(--grid);overflow:hidden}
.driver .track i{display:block;height:100%;background:var(--series-1)}
.driver .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:650}

/* ---------- Toast ---------- */
.toasts{position:fixed;right:22px;bottom:22px;display:flex;flex-direction:column;gap:10px;z-index:60;max-width:430px}
.toast{background:var(--toast-bg);color:var(--crest-ink);border-radius:11px;padding:12px 16px;font-size:13px;
  box-shadow:0 8px 26px var(--ring);display:flex;gap:10px;align-items:flex-start;
  animation:toastIn .3s cubic-bezier(.2,.9,.3,1.2)}
.toast.leaving{opacity:0;transform:translateY(6px);transition:all .3s}
.toast.err{background:var(--toast-err)}
/* Dritter Ton: Aktion erfolgt, aber noch nicht abgeschlossen (HTTP 202).
   Bernstein statt Grün oder Rot — die vorhandenen Statusmarken des Hauses,
   damit kein neuer Farbwert entsteht. */
.toast.warn{background:var(--st-warn-deep);color:var(--on-warn)}
.toast.warn b,.toast.warn small{color:var(--on-warn)}
.toast.warn svg{color:var(--on-warn)}
.toast svg{flex:0 0 17px;margin-top:1px;color:var(--toast-ok-ic)}
.toast.err svg{color:var(--toast-err-ic)}
.toast b{font-weight:700}
.toast small{color:var(--side-text-2);display:block;margin-top:2px}

/* ---------- Login ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--auth-g1) 0%,var(--auth-g2) 55%,var(--auth-g3) 100%);padding:24px}
.auth-card{width:100%;max-width:460px;background:var(--card);border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.35);padding:30px 32px 24px;border:1px solid var(--ring)}
.auth-brand{text-align:center;margin-bottom:18px}
.auth-brand .logo{font-size:34px;font-weight:800;letter-spacing:.5px;color:var(--brand-ink)}
.auth-brand .logo span{color:var(--series-1)}
.auth-brand .claim{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.tabs{display:flex;gap:4px;background:var(--page);border:1px solid var(--grid);border-radius:10px;
  padding:4px;margin-bottom:18px}
.tab{flex:1;border:0;background:transparent;border-radius:7px;padding:7px 6px;font-size:12.5px;
  font-weight:650;color:var(--ink-2)}
.tab.sel{background:var(--brand);color:var(--on-brand)}
/* v0.7.6.2 (§6): Die Regeln des früheren Demo-Kastens der Anmeldeseite sind
   mit dem Kasten entfernt — kein Element trägt die Klasse mehr. */
.auth-foot{margin-top:16px;font-size:11px;color:var(--ink-3);text-align:center;line-height:1.5}

/* ---------- Modal (generisch, v0.2) ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50;
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .15s ease}
.modal{width:100%;max-width:520px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 22px 70px rgba(0,0,0,.45);padding:20px 22px;max-height:90vh;overflow-y:auto}
.modal h3{font-size:16px;font-weight:750;margin-bottom:4px}
.modal .modal-sub{font-size:12.5px;color:var(--ink-2);margin-bottom:14px}
.modal-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.mode-pick{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px}
.mode-pick.two{grid-template-columns:1fr 1fr}
.mode-btn{border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);
  padding:10px 8px;font-size:12.5px;font-weight:650;text-align:center}
.mode-btn:hover{border-color:var(--brand-3)}
.mode-btn.sel{border-color:var(--brand-3);background:var(--brand-tint);color:var(--brand-ink)}

/* ---------- Kaderplan-Board (SPEC 5.1) ---------- */
.subtabs{display:flex;gap:4px;background:var(--card);border:1px solid var(--grid);border-radius:10px;
  padding:4px;margin-bottom:16px;max-width:520px}
.subtab{flex:1;border:0;background:transparent;border-radius:7px;padding:7px 10px;font-size:12.5px;
  font-weight:650;color:var(--ink-2);text-align:center;text-decoration:none}
.subtab.sel{background:var(--brand);color:var(--on-brand)}
.subtab:hover:not(.sel){color:var(--brand-3)}

.board-head{position:sticky;top:0;z-index:20;background:var(--page);
  padding:10px 0 12px;margin-bottom:14px;border-bottom:1px solid var(--grid)}
.plan-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;align-items:center}
.plan-tab{border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--ink-2);
  font-size:12.5px;font-weight:650;padding:5px 14px}
.plan-tab:hover{border-color:var(--brand-3)}
.plan-tab.sel{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.plan-tab.base.sel{background:var(--card2);border-color:var(--brand-3);color:var(--brand-3)}
.board-kpis{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.bk{background:var(--card);border:1px solid var(--grid);border-radius:10px;padding:7px 13px;min-width:120px}
.bk .lbl{font-size:10px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.bk .val{font-size:16.5px;font-weight:750;font-variant-numeric:tabular-nums;line-height:1.25}
.bk .val small{font-size:11px;font-weight:600;color:var(--ink-2)}
.bk.scr-good .val{color:var(--st-good-text)}
.bk.scr-warn .val{color:var(--st-warn-text)}
.bk.scr-crit .val{color:var(--st-crit-text)}
.bk .delta{font-size:11px;font-weight:700;margin-left:5px}
.board-grid{display:grid;grid-template-columns:1fr 280px;gap:16px;align-items:start}

.pitch-wrap{position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--ring);box-shadow:var(--shadow);background:var(--pitch)}
.pitch-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pitch-rows{position:relative;z-index:2;display:flex;flex-direction:column;
  justify-content:space-between;min-height:640px;padding:16px 12px;gap:10px}
.pitch-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-content:center;flex:1;
  position:relative;padding-left:26px;padding-right:14px}
.pitch-row-label{position:absolute;left:4px;top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;font-size:9.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pitch-line);pointer-events:none}
.pcard{width:162px;min-height:80px;background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--line);border-radius:9px;padding:6px 8px;font-size:11px;
  color:var(--ink);position:relative;box-shadow:0 2px 8px rgba(0,0,0,.30);cursor:pointer}
.pcard[draggable="true"]{cursor:grab}
.pcard.dragging{opacity:.4}
.pcard .nm{font-size:12px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .meta{color:var(--ink-2);font-size:10px;margin-bottom:2px}
.pcard .fin{display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap;font-variant-numeric:tabular-nums;
  color:var(--ink-2);font-size:9.5px;line-height:1.55;overflow:hidden}
.pcard .fin span{white-space:normal}
.pcard .fin b{color:var(--ink);font-weight:650}
.pcard .exp{font-variant-numeric:tabular-nums}
.pcard .exp.soon{color:var(--st-crit-text);font-weight:750}
.pcard.st-leihe_in,.pcard.st-leihe_out{border-left-color:var(--st-warn)}
.pcard.st-kader{border-left-color:var(--series-1)}
.pcard.is-new{border-left-color:var(--st-good);box-shadow:0 0 0 1px var(--st-good),0 2px 8px rgba(0,0,0,.30)}
.pcard.is-mod{border-left-color:var(--st-serious)}
.pcard.is-target{border-left-style:dashed;border-left-color:var(--brand-3)}
.pcard .tag{position:absolute;top:-7px;right:6px;font-size:8.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;border-radius:5px;padding:1px 5px}
.pcard .tag.t-new{background:var(--st-good);color:var(--auth-g1)}
.pcard .tag.t-mod{background:var(--st-serious);color:var(--auth-g1)}
.pcard .tag.t-loan{background:var(--st-warn);color:var(--on-warn)}

.pop{position:fixed;z-index:45;width:250px;background:var(--card);border:1px solid var(--line);
  border-radius:11px;box-shadow:0 14px 40px rgba(0,0,0,.45);padding:12px 14px;font-size:12px;
  pointer-events:none;animation:fadeIn .12s ease}
.pop .nm{font-size:13.5px;font-weight:750;margin-bottom:2px}
.pop .sub{color:var(--ink-2);font-size:11px;margin-bottom:8px}
.pop .row{display:flex;justify-content:space-between;gap:10px;padding:2.5px 0;
  border-top:1px solid var(--grid);font-variant-numeric:tabular-nums}
.pop .row:first-of-type{border-top:0}
.pop .row span:first-child{color:var(--ink-2)}
.pop .row b{font-weight:650}

.board-side{display:flex;flex-direction:column;gap:14px}
.side-box{padding:13px 15px}
.side-box h4{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  font-weight:800;margin-bottom:9px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.side-box .pcard{width:100%;margin-bottom:8px}
.side-box .pcard:last-child{margin-bottom:0}
.dz-out{border:2px dashed var(--line);border-radius:10px;min-height:64px;padding:10px;
  font-size:11.5px;color:var(--ink-3);display:flex;align-items:center;justify-content:center;
  text-align:center;transition:border-color .15s,background .15s}
.dz-out.drag{border-color:var(--st-crit);background:var(--st-crit-bg);color:var(--st-crit-text)}
.pitch-wrap.drag-in{outline:3px dashed var(--st-good);outline-offset:-3px}
.out-item{display:flex;gap:8px;align-items:center;font-size:12px;padding:6px 0;border-top:1px solid var(--grid)}
.out-item:first-of-type{border-top:0}
.out-item .lbl{flex:1;min-width:0}
.out-item .lbl b{display:block;font-size:12.5px}
.out-item .lbl small{color:var(--ink-2)}

.move-list{margin-top:16px}
.move-item{display:flex;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--grid);font-size:12.8px}
.move-item:first-of-type{border-top:0}
.move-item .mv-type{flex:0 0 96px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand-3)}
.move-item .mv-label{flex:1;min-width:0}
.move-item .mv-fx{display:flex;gap:12px;font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink-2);white-space:nowrap}
.move-item .mv-fx b{font-weight:700}
.mv-up{color:var(--st-crit-text)}
.mv-down{color:var(--st-good-text)}
.mv-remove{border:0;background:transparent;color:var(--ink-3);font-size:15px;padding:2px 7px;border-radius:6px}
.mv-remove:hover{background:var(--st-crit-bg);color:var(--st-crit-text)}
.board-foot{margin-top:10px;font-size:11.5px;color:var(--ink-3);display:flex;gap:8px;align-items:center}
.warn-list{margin-top:10px}
.warn-list .agent-msg{margin-bottom:8px}

/* Planvergleich */
.cmp-table td.best{background:var(--st-good-bg);color:var(--st-good-text);font-weight:750;border-radius:4px}
.cmp-table td.num,.cmp-table th.num{text-align:right}
.cmp-table th.plan-col{color:var(--brand-3)}

/* Kaderdaten */
.squad-tbl .inp{padding:4px 7px;font-size:12.3px;border-radius:7px;border-width:1px;min-width:64px}
.squad-tbl td{padding:5px 6px}
.squad-tbl th{padding:8px 6px}
.squad-tbl .inp.w-name{min-width:130px}
.squad-tbl .inp.w-date{min-width:118px}
.minicharts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.minichart svg{display:block;width:100%;height:auto}

/* Mobile-Fallback: gruppierte Kartenliste statt Drag-and-drop */
.squad-mobile{display:none}
/* M15: Aktionsmenü-Knopf auch ≥900 px sichtbar (zusätzlich zu Drag-and-drop) */
.pcard .dots{display:block;position:absolute;right:4px;bottom:3px;border:0;background:transparent;
  color:var(--ink-3);font-weight:800;font-size:14px;padding:1px 6px;border-radius:6px;letter-spacing:1px}
.pcard .dots:hover{background:var(--brand-tint);color:var(--brand-ink)}
.menu-pop{position:fixed;z-index:55;background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 14px 40px rgba(0,0,0,.45);padding:6px;min-width:190px}
.menu-pop button{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);
  padding:8px 11px;border-radius:7px;font-size:12.8px}
.menu-pop button:hover{background:var(--brand-tint);color:var(--brand-ink)}
.menu-pop button.danger{color:var(--st-crit-text)}

@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes flash{0%{background:var(--tint-soft)}100%{background:transparent}}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .profile-grid{grid-template-columns:1fr}
  .order-grid{grid-template-columns:1fr}
  .appr-grid{grid-template-columns:1fr}
  .flows{grid-template-columns:1fr}
  .board-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .app{flex-direction:column}
  .sidebar{width:100%;flex:none;height:auto;position:static;flex-direction:row;
    align-items:center;flex-wrap:wrap;gap:0}
  .brand{border:0;padding:14px 18px}
  .club{border:0;margin-left:auto}
  nav{display:flex;flex-wrap:wrap;padding:6px 12px 12px;width:100%}
  .nav-h{display:none}
  .nav-item{width:auto}
  .sidebar-foot{display:none}
  .view{padding:20px 18px 10px}
  .view-footer{padding:12px 18px 16px}
  /* Board: Feld ausblenden, gruppierte Liste mit „…“-Menü zeigen */
  .pitch-wrap{display:none}
  .squad-mobile{display:block}
  .squad-mobile .pcard{width:100%;margin-bottom:8px;cursor:default}
  .squad-mobile .pcard .dots{display:block}
  .squad-mobile .grp-h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-3);font-weight:800;margin:14px 0 8px}
  .board-head{position:static}
  .minicharts{grid-template-columns:1fr}
  .move-item{flex-wrap:wrap}
  .move-item .mv-label{flex-basis:100%;order:3}
}

/* ============ Sprint 2 · M05/M06/M07/M12 ============ */
/* M06: Move-Badge „freigabepflichtig bei Umsetzung" */
.duty-tag{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:99px;font-size:9.5px;
  font-weight:800;letter-spacing:.03em;background:var(--st-warn-bg);color:var(--st-warn-text);
  border:1px solid var(--st-warn);vertical-align:1px;white-space:nowrap}
/* M05: Profil-Link im Board-Popover und im Kaderdaten-Grid */
.pop-link{display:flex;align-items:center;gap:5px;justify-content:flex-end;margin-top:9px;
  padding-top:8px;border-top:1px solid var(--grid);color:var(--brand-3);font-size:12px;font-weight:650}
.pop-link:hover{color:var(--brand-ink)}
.plink{display:inline-flex;align-items:center;margin-right:5px;color:var(--brand-3);vertical-align:middle}
.plink:hover{color:var(--brand-ink)}
/* M12: gestylter Datei-Input (statt nativem „Choose File") */
input[type="file"].inp::file-selector-button, .file-inp::file-selector-button{
  border:1px solid var(--line);border-radius:8px;background:var(--brand);color:var(--on-brand);
  padding:6px 12px;margin-right:10px;font:inherit;font-size:12.5px;font-weight:650;cursor:pointer}
input[type="file"].inp::file-selector-button:hover, .file-inp::file-selector-button:hover{background:var(--brand-2)}
input[type="file"].inp{color:var(--ink-2)}
/* M12: Datums-Inputs — Kalender-Icon an Theme anpassen */
input[type="date"].inp{color-scheme:dark}
:root[data-theme="light"] input[type="date"].inp{color-scheme:light}

/* ============ Sprint 3a · M14/M20/M21/M22/M31 ============ */
/* --- Topbar (M20 Glocke + M21 Suche) --- */
.topbar{display:flex;align-items:center;gap:14px;padding:10px 34px;background:var(--card);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.topbar-user{font-size:12px;color:var(--ink-3);white-space:nowrap}
.gsearch{position:relative;display:flex;align-items:center;gap:8px;flex:0 1 420px;min-width:220px;
  background:var(--page);border:1px solid var(--line);border-radius:9px;padding:6px 12px;color:var(--ink-3)}
.gsearch:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--brand-tint)}
.gsearch-inp{flex:1;background:transparent;border:0;outline:0;color:var(--ink);font:inherit;font-size:13px;min-width:0}
.gsearch-inp::placeholder{color:var(--ink-3)}
.gsearch-drop{position:absolute;top:calc(100% + 8px);left:0;right:0;min-width:340px;max-height:430px;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:70;padding:6px}
.gs-group{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  font-weight:800;padding:8px 10px 4px}
.gs-hit{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;cursor:pointer;font-size:13px}
.gs-hit.sel,.gs-hit:hover{background:var(--brand-tint)}
.gs-title{font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-sub{color:var(--ink-3);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:auto}
.gs-badge{flex:0 0 auto;padding:1px 7px;border-radius:99px;font-size:9.5px;font-weight:800;letter-spacing:.04em;
  background:var(--brand-tint);color:var(--brand-ink);border:1px solid var(--line)}
.gs-empty{padding:14px;color:var(--ink-3);font-size:13px}
/* --- Glocke + Benachrichtigungscenter (M20) --- */
.bell-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:9px;border:1px solid var(--line);background:var(--page);color:var(--ink-2);cursor:pointer}
.bell-btn:hover{color:var(--ink);border-color:var(--accent)}
.bell-badge{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;
  background:var(--st-crit);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
.notif-pop{position:fixed;width:400px;max-width:calc(100vw - 20px);background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);z-index:75;overflow:hidden}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13.5px}
.notif-list{max-height:420px;overflow-y:auto}
.notif-item{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--grid);cursor:pointer}
.notif-item:hover{background:var(--brand-tint)}
.notif-item.unread{background:var(--surface2)}
.notif-item.unread:hover{background:var(--brand-tint)}
.notif-dot{flex:0 0 8px;width:8px;height:8px;border-radius:99px;margin-top:6px;background:transparent}
.notif-dot.on{background:var(--accent)}
.notif-t{font-size:12.5px;font-weight:650;color:var(--ink)}
.notif-b{font-size:11.5px;color:var(--ink-2);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif-meta{display:flex;gap:8px;align-items:center;margin-top:5px;font-size:10.5px;color:var(--ink-3)}
/* --- M14 · Kaderdaten: Sortierung, Summenzeile, Projektion --- */
.th-sort{cursor:pointer;user-select:none;white-space:nowrap}
.th-sort:hover{color:var(--brand-3)}
.th-sort.sorted{color:var(--brand-3)}
.sum-row td{border-top:2px solid var(--line);background:var(--surface2);font-size:12.5px;padding-top:9px;padding-bottom:9px}
.proj-assump{margin-top:8px;font-size:12px;color:var(--ink-2)}
.proj-assump summary{cursor:pointer;color:var(--brand-3);font-weight:650;font-size:12px}
/* --- M22 · Kalender --- */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-grid.cal-head{margin:8px 0 4px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);font-weight:800;text-align:center}
.cal-cell{min-height:86px;border:1px solid var(--grid);border-radius:8px;padding:5px;background:var(--page);
  display:flex;flex-direction:column;gap:3px;overflow:hidden}
.cal-cell.empty{background:transparent;border-color:transparent}
.cal-cell.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.cal-cell.tf{background:var(--brand-tint)}
.cal-daynum{font-size:11px;font-weight:700;color:var(--ink-3)}
.cal-cell.today .cal-daynum{color:var(--brand-3)}
.cal-chip{display:flex;align-items:center;gap:4px;font-size:10px;line-height:1.25;padding:2px 5px;border-radius:6px;
  background:var(--surface2);cursor:pointer;color:var(--ink-2)}
.cal-chip:hover{background:var(--brand-tint);color:var(--ink)}
.cal-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-more{font-size:9.5px;color:var(--ink-3)}
.cal-dot{display:inline-block;flex:0 0 8px;width:8px;height:8px;border-radius:99px;vertical-align:middle}
.cal-dot.lvl-crit{background:var(--st-crit)}
.cal-dot.lvl-warn{background:var(--st-warn)}
.cal-dot.lvl-hint{background:var(--series-1)}
.cal-dot.lvl-none{background:var(--ink-3)}
.cal-tf-swatch{display:inline-block;width:14px;height:10px;border-radius:3px;background:var(--brand-tint);
  border:1px solid var(--line);vertical-align:middle}
@media (max-width:900px){
  .topbar{padding:8px 14px}
  .topbar-user{display:none}
  .cal-cell{min-height:56px}
  .cal-chip span{display:none}
}

/* ============ Sprint 3b · M15/M17/M18/M26/M27/M30 ============ */
/* --- M26 · zentrales Tooltip-System (Hover + Tastatur-Fokus + Tap) --- */
.tip{position:relative;cursor:help;border-bottom:1px dotted var(--ink-3)}
.tip::after{content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 7px);
  width:max-content;max-width:260px;white-space:normal;background:var(--toast-bg);color:var(--on-brand);
  font-size:11.5px;font-weight:500;line-height:1.45;letter-spacing:0;text-transform:none;text-align:left;
  border-radius:8px;padding:7px 10px;box-shadow:var(--shadow);z-index:85;
  opacity:0;pointer-events:none;transition:opacity .12s ease .05s}
.tip:hover::after,.tip:focus::after,.tip:focus-visible::after{opacity:1}
th .tip,.hash .tip{border-bottom-color:transparent}
.hash .tip::after{left:auto;right:0}
/* --- M26 · Glossar-Seite --- */
.gloss-item{padding:9px 0;border-top:1px solid var(--grid)}
.gloss-item:first-of-type{border-top:0}
.gloss-term{font-size:13.5px;font-weight:700}
.gloss-def{font-size:12.8px;color:var(--ink-2);margin-top:2px;max-width:760px}
/* --- M27 · klickbare object_refs im Audit Trail --- */
.obj-link{color:var(--brand-3);text-decoration:none}
.obj-link:hover{color:var(--brand-ink);text-decoration:underline}
/* --- M17 · Dirty-State: Leiste + Zeilen-Punkt --- */
.dirty-bar{position:sticky;bottom:14px;z-index:35;display:flex;gap:10px;align-items:center;
  background:var(--toast-bg);color:var(--on-brand);border-radius:11px;padding:10px 16px;
  box-shadow:0 8px 26px var(--ring);margin-top:14px;font-size:13px}
tr.row-dirty td:first-child{position:relative}
tr.row-dirty td:first-child::before{content:"";position:absolute;left:1px;top:50%;
  transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:var(--st-warn);
  outline:1px solid var(--st-warn-deep)}
/* --- Wiederkehrende Inline-Styles als Klasse (M28) --- */
.stat .val.val-sm,.bk .val.val-sm{font-size:13.5px;line-height:1.35;margin-top:5px}
.card-scroll{overflow-x:auto}
.row-inline{display:flex;gap:8px;align-items:center}
/* --- M30 · Kaderdaten als Kartenliste (mobil) --- */
.sqd-cards{display:none}
.sqd-card{padding:10px 12px;margin-bottom:10px}
.sqd-card-h{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.sqd-card-h b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
.sqd-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;font-size:12px;color:var(--ink-2)}
.sqd-card-grid b{color:var(--ink);font-variant-numeric:tabular-nums}
/* --- M30 · Mobile-Feinschliff (390-px-Viewport) --- */
@media (max-width:640px){
  .brief-item{flex-wrap:wrap}
  .brief-txt{flex:1 1 calc(100% - 38px);min-width:180px;overflow-wrap:anywhere}
  .brief-meta{flex-basis:100%;margin-left:38px;margin-top:2px}
  .page-head h1{font-size:18px}
  .topbar{gap:8px;padding:8px 12px}
  .gsearch{min-width:0;flex:1 1 auto}
  .bell-btn{flex:0 0 36px;margin-right:4px}
  .bell-badge{top:-5px;right:-5px}
  .board-kpis .bk{min-width:calc(50% - 5px)}
  /* Unter-Tabs horizontal scrollbar statt gequetscht */
  /* R17 · Subtab-Clipping: umbrechen statt abschneiden/scrollen */
  .subtabs{flex-wrap:wrap;max-width:100%}
  .subtab{white-space:nowrap;flex:1 1 auto;padding:7px 14px}
  /* Kaderdaten: Kartenliste statt Quer-Scrolltabelle */
  .squad-tbl-wrap{display:none}
  .sqd-cards{display:block;margin-bottom:16px}
  .squad-mobile .pcard,.side-box .pcard{margin-top:9px}
  .squad-mobile .grp-h{margin-top:16px}
}

/* Logo-Einbindung (Marken-Update 08/2026) */
.brand-lockup{display:flex;align-items:center;gap:11px}
.logo-img{width:44px;height:44px;border-radius:10px;flex:0 0 auto;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.auth-logo-img{width:76px;height:76px;border-radius:17px;margin-bottom:10px;box-shadow:0 4px 16px rgba(0,0,0,.35)}

.brand-lockup .claim{font-size:9px;letter-spacing:.11em;line-height:1.5}

/* ============================================================
   Reaudit Welle 2 · R05 Import-Assistent, R02 Batch-Undo, R06 Dialoge
   ============================================================ */
.modal.modal-wide{max-width:960px;width:min(960px,94vw)}
.warn-inline{font-size:12.5px;color:var(--st-warn-text);background:var(--st-warn-bg);
  border:1px solid var(--st-warn);border-radius:8px;padding:8px 11px;margin:8px 0}
.imp-steps{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 12px;
  font-size:11.5px;color:var(--ink-3)}
.imp-step{padding:3px 9px;border-radius:999px;border:1px solid var(--line);font-weight:600}
.imp-step.cur{background:var(--st-good-bg);color:var(--st-good-text);border-color:var(--st-good)}
.imp-step.done{color:var(--st-good-text)}
.imp-sep{color:var(--ink-3)}
.imp-cols td{vertical-align:top}
.imp-tbl-wrap{max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.imp-tbl th{position:sticky;top:0;background:var(--card);z-index:1}
.imp-tbl input.inp{padding:4px 7px;font-size:12.5px;min-width:70px;width:100%}
.imp-tbl td{padding:6px 8px;font-size:12.5px}
.imp-noterow td{padding-top:0;border-top:none}
.imp-note{margin:0 0 4px}
.imp-row-fehler td{background:var(--st-crit-bg)}
.imp-row-duplikat td{background:var(--st-warn-bg)}
.ampel{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:999px;white-space:nowrap}
.ampel-ok{background:var(--st-good-bg);color:var(--st-good-text)}
.ampel-dup{background:var(--st-warn-bg);color:var(--st-warn-text)}
.ampel-err{background:var(--st-crit-bg);color:var(--st-crit-text)}

/* ============ Reaudit Welle 3 · R11–R17, R27 ============ */
/* --- R15 · Screenreader-only-Text + Skip-Link --- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:10px;top:-48px;z-index:120;background:var(--brand);
  color:var(--on-brand);font-weight:700;font-size:13px;padding:9px 16px;border-radius:0 0 10px 10px;
  text-decoration:none;transition:top .15s ease}
.skip-link:focus,.skip-link:focus-visible{top:0;outline:2px solid var(--accent);outline-offset:2px}
#view:focus{outline:none}

/* --- R12/R14 · Hervorhebung von Kontext-Zielen (Suche/Notification) --- */
.feed-hl,tr.row-hl td,.gloss-hl{animation:flash 2.4s ease 1;border-radius:8px}
.feed-hl{outline:2px solid var(--brand-3);outline-offset:2px}
tr.row-hl td{background:var(--brand-tint)}
.gloss-hl{outline:2px solid var(--brand-3);outline-offset:4px}

/* --- R13 · Signal-Kontext --- */
.sig-src{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:650}
.chip-overdue{background:var(--st-crit-bg);color:var(--st-crit-text);border-color:var(--st-crit)}

/* --- R14 · Zahlungsliste --- */
.pay-tbl{min-width:760px}
.pay-tbl td{vertical-align:middle}
.pay-tbl .inp{padding:5px 8px;font-size:12.5px}

/* --- R16 · Klausel-Editor: Expertenansicht + Teilbedingungen --- */
.cond-expert{margin:6px 0 10px}
.cond-expert summary{cursor:pointer;font-size:12px;color:var(--ink-3);font-weight:650}
.cond-expert summary:hover{color:var(--ink-2)}
.cond-json{font-size:11.5px;background:var(--card2);border:1px solid var(--grid);
  border-radius:8px;padding:8px 10px;margin:6px 0 4px;overflow-x:auto;white-space:pre-wrap}
.cond-parts{margin:4px 0 0 18px;font-size:13px;color:var(--ink-2)}
.cond-parts li{margin:2px 0}

/* --- R17 · Hamburger-Navigation (≤768) + Overflow-Fixes @390 --- */
.nav-toggle{display:none;background:transparent;border:0;color:var(--ink);
  padding:6px;border-radius:8px;flex:0 0 auto;align-items:center}
.nav-toggle:hover{background:var(--card2)}
.nav-backdrop{display:none}
@media (max-width:768px){
  .nav-toggle{display:inline-flex}
  /* Sidebar off-canvas statt Chip-Wolke: belegt keinen Inhaltplatz mehr */
  .sidebar{position:fixed;left:0;top:0;bottom:0;height:100dvh;width:min(300px,86vw);
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;z-index:110;transform:translateX(-102%);
    transition:transform .18s ease;box-shadow:0 0 40px rgba(0,0,0,.5);overflow-y:auto}
  body.nav-open .sidebar{transform:none}
  .sidebar nav{display:block;padding:8px 10px;width:100%}
  .sidebar .nav-h{display:block}
  .sidebar .nav-item{width:100%}
  .sidebar .club{margin-left:0;border-bottom:1px solid var(--side-line)}
  .sidebar .brand{border-bottom:1px solid var(--side-line);padding:16px 18px 12px}
  .sidebar-foot{display:block}
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:105;background:rgba(0,0,0,.45)}
  .nav-backdrop[hidden]{display:none}
  /* Import-Hilfe / lange Hinweistexte umbruchfähig, kein horizontaler Overflow */
  .form-note,.hint,.panel-h .hint{overflow-wrap:anywhere}
  .kpi-tiles{grid-template-columns:1fr 1fr}
  .fld .inp{min-width:0;max-width:100%}
  .page-head>div[style]{max-width:100%}
  .view{overflow-x:clip}
}

/* --- R27 · Leerfläche @1920: Team/Liquidität mit großzügigerer max-width --- */
@media (min-width:1600px){
  body[data-route="captain"] .view,body[data-route="captain"] .view-footer,
  body[data-route="liquiditaet"] .view,body[data-route="liquiditaet"] .view-footer{
    max-width:1500px}
}
/* Tooltip-Links bleiben Textfarbe (kein Unterstrich-Doppel) */
a.tip{text-decoration:none;color:inherit}
a.chip-conf{text-decoration:none}

/* ============================================================
   Welle 4 · RG-P2-13 Progressive Disclosure + RG-P2-11 Decision
   Workspace + RG-P2-09/10 Strukturierte Bewertung + RG-P2-14 Lage
   ============================================================ */
/* Einklappbare Detail-Sektionen (pdSection) */
.pd-sec{margin-bottom:14px}
.pd-sec.pd-flat{border:1px solid var(--grid);border-radius:10px;background:var(--page);margin-top:10px}
.pd-sum{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  padding:12px 16px;font-weight:750;font-size:14px;user-select:none}
.pd-sec.pd-flat>.pd-sum{padding:9px 12px;font-size:13px}
.pd-sum::-webkit-details-marker{display:none}
.pd-sum .hint{font-weight:500}
.pd-sum .chev{margin-left:auto;transition:transform .15s ease;color:var(--ink-3)}
.pd-sec[open]>.pd-sum .chev{transform:rotate(180deg)}
.pd-sec>.pd-body{padding:0 16px 14px}
.pd-sec.pd-flat>.pd-body{padding:0 12px 12px}
.pd-sum:focus-visible{outline:2px solid var(--brand-3);outline-offset:-2px;border-radius:10px}

/* RG-P2-14 · Lage-Strip: 3–5 entscheidende Aussagen, rollenpriorisiert */
.lage-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.lage-item{display:block;background:var(--card);border:1px solid var(--grid);border-radius:12px;
  padding:11px 14px;text-decoration:none;color:inherit}
.lage-item:hover{border-color:var(--brand-3)}
.lage-item .lbl{font-size:11px;color:var(--ink-2);letter-spacing:.02em;text-transform:uppercase;font-weight:650}
.lage-item .val{font-size:18px;font-weight:750;margin-top:2px}
.lage-item .val small{font-size:11.5px;color:var(--ink-2);font-weight:600}
.lage-item .sub{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.lage-item.warn{border-left:3px solid var(--st-warn)}
.lage-item.crit{border-left:3px solid var(--st-crit)}

/* RG-P2-09/10 · Strukturierte Bewertung */
.assess-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px 12px}
.kern-badge{display:inline-block;font-size:9.5px;font-weight:750;letter-spacing:.04em;
  text-transform:uppercase;color:var(--brand-ink);background:var(--brand-soft,rgba(94,148,255,.16));
  border:1px solid var(--brand-3);border-radius:6px;padding:1px 5px;margin-left:6px;vertical-align:2px}
.dissens-note{display:flex;gap:8px;align-items:flex-start;background:var(--st-warn-soft,rgba(255,180,60,.12));
  border:1px solid var(--st-warn);border-radius:9px;padding:8px 11px;font-size:12.5px;margin:8px 0}
.assess-team-tbl td,.assess-team-tbl th{font-size:12.5px}
.assess-hist{margin-top:10px}
.assess-hist summary{cursor:pointer;font-size:12.5px;font-weight:650;color:var(--ink-2)}
.assess-hist .feed-item{padding:7px 0}

/* RG-P2-11 · Decision Workspace */
.dec-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:1100px){.dec-grid{grid-template-columns:1fr}}
.dec-block h3{display:flex;align-items:center;gap:8px}
.dec-refbar{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:2px 0 14px}
.dec-refbar .ref-chip{display:inline-flex;gap:6px;align-items:center;font-size:12px;font-weight:600;
  background:var(--page);border:1px solid var(--grid);border-radius:999px;padding:4px 11px;
  text-decoration:none;color:inherit}
.dec-refbar .ref-chip:hover{border-color:var(--brand-3)}
.dec-refbar .ref-typ{font-size:10px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.dec-row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;
  border-bottom:1px solid var(--grid);font-size:13px}
.dec-row:last-child{border-bottom:0}
.dec-row .k{color:var(--ink-2)}

/* ============ WELLE 5 · RG-P2-15..17, RG-P3-07/10/16 ============ */
/* RG-P2-15 · Sticky Header für große Tabellen (unter der sticky Topbar) */
.card-scroll{max-height:72vh;overflow:auto}
.card-scroll table.tbl thead th{position:sticky;top:0;background:var(--card);z-index:2;
  box-shadow:0 1px 0 var(--line)}
.squad-tbl-wrap{max-height:none}
.squad-tbl thead th{position:sticky;top:0;background:var(--card);z-index:2}

/* RG-P3-10 · Breadcrumb: Modul → Bereich → Objekt */
.breadcrumb{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:12px;
  color:var(--ink-3);margin:0 0 10px}
.breadcrumb a{color:var(--ink-2);text-decoration:none}
.breadcrumb a:hover{color:var(--brand-3);text-decoration:underline}
.breadcrumb .bc-sep{color:var(--ink-3)}
.breadcrumb .bc-cur{color:var(--ink);font-weight:650}

/* RG-P3-07 · Loading-Skeleton (leichtgewichtig, nur CSS) */
.skel{position:relative;overflow:hidden;background:var(--grid);border-radius:8px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--brand-tint),transparent);
  animation:skel-shimmer 1.2s infinite}
@keyframes skel-shimmer{100%{transform:translateX(100%)}}
.skel-page{max-width:1100px}
.skel-title{height:26px;width:340px;margin-bottom:10px}
.skel-sub{height:13px;width:520px;max-width:80%;margin-bottom:20px}
.skel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px}
.skel-card{height:150px}
.skel-block{height:260px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion: reduce){.skel::after{animation:none}}

/* RG-P3-16 · Vergleich: schlechtester Wert markiert, Δ-Spalte, Klartext-Differenzen */
.cmp-table td.worst{background:color-mix(in srgb, var(--st-crit) 14%, transparent);
  border-radius:4px}
.cmp-table td.best{position:relative}
.cmp-table .cmp-delta{color:var(--ink-2);border-left:1px solid var(--line)}
.cmp-table th.cmp-delta{border-left:1px solid var(--line)}
.cmp-diff{display:flex;flex-direction:column;gap:6px;font-size:12.8px;color:var(--ink-2);
  margin-top:10px;padding:10px 12px;background:var(--page);border:1px solid var(--grid);border-radius:9px}

/* RG-P2-17 · Import-Assistent Schritt 1: Dreiklang + aufklappbare Formathilfe */
.imp-triad{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:12px 0}
.imp-triad-step{display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  background:var(--page);border:1px solid var(--grid);border-radius:11px;padding:14px}
.imp-triad-n{width:26px;height:26px;border-radius:50%;background:var(--brand);color:var(--on-brand);
  display:flex;align-items:center;justify-content:center;font-weight:750;font-size:13px}
.imp-help{margin-top:10px}
.imp-help summary{cursor:pointer;font-size:12.5px;font-weight:650;color:var(--ink-2);padding:6px 0}
.imp-help summary:hover{color:var(--brand-3)}

/* RG-P3-15 · Signal-Struktur Was/Warum/Bis wann/Wer/Handlung */
.sig-row{display:flex;gap:8px;align-items:baseline;margin-bottom:3px}
.sig-row .sig-k{flex:0 0 62px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:750}
.sig-row .t{font-weight:650;font-size:13px}
.sig-row .d{font-size:12.5px;color:var(--ink-2)}

/* ============================================================
   Captain90+ Phase 1 — Auslegung eines erteilten Auftrags.
   ------------------------------------------------------------
   v0.7.7.1 (§20/§21): Die Regeln der früheren Eingabe-Kopfzone dieses Blocks
   (.cap-hero, .cap-hero-head, .cap-hero-label, .cap-ctx-row, .cap-need-grid,
   .cap-need-card) sind ENTFERNT, nicht überschrieben. Die Auftragseingabe der
   Startseite ist keine Fläche mehr, sondern eine Zeile; sie lebt in `.cmd`.
   Was hier bleibt, gehört zur Auslegungsansicht nach der Übergabe.
   ============================================================ */
.cap-interp{padding:18px 20px;margin-bottom:16px}
.cap-sec-h{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:8px 0 6px}
.cap-verstanden-row{display:flex;gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid var(--grid);font-size:13px;flex-wrap:wrap}
.cap-verstanden-row:last-child{border-bottom:0}
.cap-verstanden-row .k{color:var(--ink-2);min-width:180px}
.cap-miss-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--grid);flex-wrap:wrap}
.cap-miss-row:last-child{border-bottom:0}
.cap-miss-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cap-chip-assume{background:var(--st-warn-bg);color:var(--st-warn-text);border-color:var(--st-warn)}
.cap-scope{display:flex;gap:10px;flex-wrap:wrap}
.cap-scope-item{display:inline-flex;gap:5px;align-items:center;font-size:12.5px;color:var(--ink-2)}
.cap-scope-item svg{color:var(--st-good-text)}
/* v0.6.2 (§24) · Kernentscheidung prominent: größte Zeile im Decision Case */
.cap-decision{display:flex;gap:12px;align-items:baseline;border-radius:10px;padding:12px 14px;margin-top:14px;border:1px solid var(--grid);border-left-width:4px;flex-wrap:wrap}
.cap-decision b{font-size:17px;letter-spacing:-.01em}
.cap-decision span{flex-basis:100%}
.cap-decision span{font-size:12.5px;color:var(--ink-2)}
.cap-dec-good{border-left-color:var(--st-good);background:var(--st-good-bg)}
.cap-dec-good b{color:var(--st-good-text)}
.cap-dec-warn{border-left-color:var(--st-warn);background:var(--st-warn-bg)}
.cap-dec-warn b{color:var(--st-warn-text)}
.cap-dec-crit{border-left-color:var(--st-crit);background:var(--st-crit-bg)}
.cap-dec-crit b{color:var(--st-crit-text)}
.cap-dec-data{border-left-color:var(--ink-3)}
.cap-kz{cursor:help}
.cap-inputs{margin:0 0 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 16px}
.rowlink{cursor:pointer}
.rowlink:hover td{background:var(--brand-tint)}
.gs-captain-row{border-top:1px solid var(--line);color:var(--brand-3)}
.gs-captain-row .gs-title{font-weight:650}
.gs-captain-badge{display:inline-flex;align-items:center;color:var(--brand-3)}
@media (max-width:768px){
  .cap-verstanden-row .k{min-width:0}
  .cap-miss-row{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   Captain90+ · Entscheidungsfläche (v0.7.7.1)
   ------------------------------------------------------------
   Diese Fläche ersetzt das 65/35-Cockpit aus v0.6.3 vollständig. Sie ist
   keine Überlagerung: Die Regeln des alten Cockpits (.cap-cockpit, .cc-main,
   .cc-side, .cap-att-list mit gleichgewichtigen Karten, .cap-agents-grid,
   .cap-hero als Formularkasten, .cap-more, die 65/35-Umbrüche) sind entfernt
   und nicht überschrieben. Was aus jenem Block hier weiterlebt, lebt weiter,
   weil ANDERE Ansichten es benutzen — Arbeitsfläche, Auftragsdetail,
   Briefingseite, Taskforce-Zeilen —, nicht als Rest der alten Startseite.

   Der Aufbau folgt der Leserichtung einer Entscheidung:
     dh  Entscheidungskopf — Lage in einem Satz
     fk  der führende Vorgang, einziger Block in voller Höhe
     lg  das Entscheidungsregister — alles Übrige, nach Zeit gruppiert
     cmd die Ansprache an Captain90+
     rl  die Nebenspalte: Briefing, Veränderungen, Spezialisten, Aufträge

   Flächen (§13): Genau EINE — der führende Vorgang. Register, Register-
   kopf, Eingabe und Nebenspalte tragen keine eigene Fläche, sondern stehen
   auf dem Seitengrund und trennen sich durch Linien, Weißraum und Typografie.

   Typografie (§14): Lagesatz 26 · Vorgangstitel 24 · Kennwert 22 ·
   Sektion 15 · Vokabel-/Marken-Label 10,5 versal · Fließtext 13,5 · Meta 11,5.
   ============================================================ */

/* ---------- dh · Entscheidungskopf (§4A) ---------- */
.dh{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;padding-bottom:16px;margin-bottom:24px;
  border-bottom:1px solid var(--grid)}
.dh-l{min-width:0}
.dh-marke{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:750;color:var(--ink-3);margin-bottom:6px}
.dh-lage{font-size:26px;font-weight:700;letter-spacing:-.022em;line-height:1.22;
  margin:0;max-width:34ch}
/* §8 · Die sekundäre Menge steht unter der Lage, erkennbar nachgeordnet:
   dieselbe Spalte, kleinere Schrift, gedämpfte Farbe. Sie ist keine zweite
   Kennzahl, sondern der Hinweis, dass nichts verlorengegangen ist. */
.dh-uebrige{font-size:12.5px;color:var(--ink-3);margin-top:8px;max-width:44ch}
.dh-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.dh-stand{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.dh-links{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.dh-link{border:0;background:none;padding:0;font-size:11.5px;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.dh-link:hover{color:var(--brand-3)}
.dh-err{flex:1 1 100%;margin-top:8px}
.dh-err a{color:var(--brand-3);font-weight:600}
/* §55/§86 · Der Sprung zur Eingabe ist nur mobil sinnvoll. */
.cap-jump{display:none}
.cap-mon-pill{display:inline-flex;gap:6px;align-items:center;font-size:11.5px;
  font-weight:650;color:var(--ink-3);cursor:help;font-variant-numeric:tabular-nums}
.cap-mon-pill .dot{font-size:10px;line-height:1}
.cap-mon-pill.ok .dot{color:var(--st-good-text)}
.cap-mon-pill.warn{color:var(--st-warn-text)}
.cap-mon-klick{cursor:pointer}
.cap-info-body{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.cap-info-body p{margin:0 0 10px}
.cap-formel{font-size:11.5px;color:var(--ink-3);letter-spacing:.02em}

/* ---------- dk · Das Raster (§4/§12) ----------
   Die Hauptspalte ist deutlich breiter als früher und die Nebenspalte trägt
   keine Fläche mehr — dadurch führt die Entscheidung die Seite, statt sich
   die Breite mit einem Statusblock zu teilen. */
.dk{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:40px;align-items:start}
.dk-main{min-width:0}
.dk-rail{min-width:0}
@media (min-width:1600px){
  .dk{grid-template-columns:minmax(0,1fr) 300px;gap:56px}
}
@media (min-width:1081px){
  .dk-rail{position:sticky;top:70px}
}
.cap-sec{margin-bottom:22px}
.dk-main .cap-sec:last-child{margin-bottom:0}

/* ---------- fk · Der führende Vorgang (§4B/§12 Ebene 1–3) ---------- */
.fk-sec{margin-bottom:32px}
.fk-lab{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:750;color:var(--ink-3);margin-bottom:10px}
.fk{position:relative;background:var(--card);border:1px solid var(--ring);
  border-left:3px solid var(--ink-3);border-radius:var(--radius);padding:26px 30px}
.fk.cap-kat-crit{border-left-color:var(--st-crit)}
.fk.cap-kat-warn{border-left-color:var(--st-serious)}
.fk.cap-kat-neutral{border-left-color:var(--ink-3)}
.fk-kopf{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.fk-kat{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:750;color:var(--ink-3)}
.fk.cap-kat-crit .fk-kat{color:var(--st-crit-text)}
.fk.cap-kat-warn .fk-kat{color:var(--st-serious-text)}
.fk-titel{font-size:24px;font-weight:700;letter-spacing:-.022em;line-height:1.25;
  margin:0 0 14px;max-width:26ch}
.fk .cap-warum{margin:0 0 20px}
/* §12 Ebene 2 · Die Entscheidungsgrundlage steht VOR der Handlung und in
   einer Reihe: Zahlen, Abdeckung, Einfluss, Zuständigkeit. */
.fk-basis{display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap;
  padding:18px 0;border-top:1px solid var(--grid);border-bottom:1px solid var(--grid)}
.fk-kw{min-width:0}
.fk-kw-v{font-size:22px;font-weight:750;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.fk-kw-k{font-size:11.5px;color:var(--ink-3);font-weight:600;margin-top:3px}
.fk-ab{display:flex;gap:28px;flex-wrap:wrap}
.fk-ab.fk-ab-leer{display:block}
.fk-ab-leer .ab-k{display:block}
.fk-ab-leer-t{font-size:13px;color:var(--ink-3);line-height:1.4;max-width:24ch;margin-top:4px}
.fk-zu{min-width:0}
.fk-zu .ab-k{margin-bottom:4px}
/* §12 Ebene 3 · Die Einschätzung ist Text mit Herkunft, kein Zierrat. */
.fk-cap{margin-top:18px;padding-left:14px;border-left:2px solid var(--brand-3)}
.fk-cap-n{font-size:11px;font-weight:750;color:var(--brand-3);letter-spacing:.02em}
.fk-cap-t{font-size:14px;line-height:1.55;color:var(--ink);margin:4px 0 0;max-width:70ch}
.fk-cap-ag{font-size:11.5px;color:var(--ink-3);margin-top:6px}
.fk-akt{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:22px}
.fk-primary{padding:10px 22px;font-size:14px}
.fk-sek-row{display:inline-flex;gap:18px;align-items:center;flex-wrap:wrap}
.fk-sek{border:0;background:none;padding:2px 0;font-size:12.5px;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.fk-sek:hover{color:var(--ink-2)}
/* §78 · Während ein Auftrag läuft, tritt der Vorgangsbereich zur Zeile zurück. */
.fk-mini{display:flex;flex-direction:column;border-top:1px solid var(--grid)}
.cap-att-mini{display:flex;flex-direction:row;align-items:baseline;gap:12px;
  flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--grid)}
.fk-mini .cap-att-mini:last-child{border-bottom:0}
.cap-att-kat{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:750;color:var(--ink-3)}
.cap-att-kat.cap-kat-warn{color:var(--st-serious-text)}
.cap-att-kat.cap-kat-crit{color:var(--st-crit-text)}
.cap-att-kat.cap-kat-neutral{color:var(--ink-3)}
.cap-att-titel{font-size:13.5px;letter-spacing:-.01em;line-height:1.3;flex:1 1 200px;min-width:0}
.cap-att-kw b{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.cap-att-mini:hover .cap-att-titel{color:var(--brand-3)}
.cap-empty-text{font-size:13px;color:var(--ink-2);line-height:1.55;max-width:640px;margin-top:5px}
/* §42 · Stale Monitoring bleibt kontextbezogen, kein Vollbreiten-Alarm. */
.cap-mon-note{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--ink-2);
  border-left:3px solid var(--st-warn);padding:8px 12px;margin-bottom:14px;line-height:1.5}
.cap-mon-note svg{flex:0 0 14px;margin-top:2px;color:var(--st-warn-text)}

/* ---------- lg · Entscheidungsregister (§5/§12 Ebene 4) ----------
   Eine Tabelle, keine Kartenreihe. Die Spaltenbeschriftung steht einmal
   oben; die Zeitgruppen sind Zwischenüberschriften, keine eigenen Kästen. */
.lg{margin-bottom:32px}
.lg-kopf{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap;margin-bottom:12px}
.sek-h{font-size:15px;font-weight:800;letter-spacing:-.005em;margin:0}
.lg-sub{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.lg-titel,.lg-z{display:grid;
  grid-template-columns:112px 104px minmax(0,1fr) 124px 96px 132px;
  gap:16px;align-items:baseline}
.lg-titel{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:750;color:var(--ink-3);padding:0 2px 7px;
  border-bottom:1px solid var(--ring)}
.lg-block{margin-top:2px}
.lg-h{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:750;
  color:var(--ink-3);display:flex;gap:8px;align-items:baseline;
  padding:16px 2px 6px}
.lg-n{font-variant-numeric:tabular-nums;color:var(--ink-3);opacity:.7}
.lg-z{padding:9px 2px;border-bottom:1px solid var(--grid);color:inherit;
  text-decoration:none}
.lg-z:hover{text-decoration:none}
.lg-z:last-child{border-bottom:0}
.lg-z:hover{background:var(--brand-tint)}
.lg-zeit{font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.lg-zeit.zt-ueberfaellig{color:var(--st-crit-text)}
.lg-zeit.zt-stunde,.lg-zeit.zt-heute{color:var(--st-serious-text)}
.lg-t{font-size:13.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* §10 · Eigene Entscheidungen im Register dezent hervorgehoben — über
   Schriftschnitt und eine Randmarke, NICHT über eine neue Signalfarbe. Die
   Zustandsfarben bleiben den Zuständen vorbehalten. */
.lg-z-ich{box-shadow:inset 2px 0 0 var(--brand-3)}
.lg-z-ich .lg-t{font-weight:700}
.zu{font-size:11.5px;color:var(--ink-3)}
.zu-ich{font-weight:750;color:var(--brand-3)}
.zu-ich-weich{font-weight:650;color:var(--ink-2)}
.lg-z:hover .lg-t{color:var(--brand-3)}
.lg-kw{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.lg-akt{font-size:12px;color:var(--ink-3);display:inline-flex;gap:4px;
  align-items:center;justify-content:flex-end;white-space:nowrap}
.lg-z:hover .lg-akt{color:var(--brand-3)}

/* ---------- cmd · Ansprache an Captain90+ (§10) ----------
   Kein Kasten, kein Formularfuß. Eine Zeile mit Beschriftung darüber. */
.cmd{margin-bottom:32px;padding-top:24px;border-top:1px solid var(--grid)}
.cmd-l{display:block;font-size:15px;font-weight:750;letter-spacing:-.005em;margin-bottom:10px}
.cmd-row{display:flex;gap:14px;align-items:flex-end}
.cmd-in{flex:1 1 auto;min-width:0;background:none;border:0;border-bottom:1px solid var(--ring);
  border-radius:0;color:var(--ink);font:inherit;font-size:14.5px;line-height:1.5;
  padding:6px 2px;resize:none;min-height:34px;max-height:120px}
.cmd-in::placeholder{color:var(--ink-3)}
.cmd-in:focus{outline:none;border-bottom-color:var(--brand-3)}
.cmd-go{flex:0 0 auto;padding:9px 20px}
.cmd-ctx{font-size:12.5px;color:var(--ink-2);margin-top:10px;display:flex;gap:8px;
  align-items:center;flex-wrap:wrap}
.cmd-ctx a{color:var(--brand-3);font-weight:600;cursor:pointer}
.cmd-foot{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:12px}
.cmd-q{border:0;background:none;padding:0;font-size:12px;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cmd-q:hover{color:var(--brand-3)}
.cmd-hint{font-size:11.5px;color:var(--ink-3);margin-left:auto}
.cmd-ro{font-size:13px;color:var(--ink-2);line-height:1.55;max-width:60ch}

/* ---------- rl · Nebenspalte (§6/§9/§12 Ebene 5) ----------
   Ohne Flächen, kleinere Schrift, gedämpfte Farbe: dauerhaft sichtbar und
   erkennbar nachgeordnet. */
.rl-grp{padding-top:18px;margin-bottom:6px;border-top:1px solid var(--grid)}
.dk-rail>.rl-grp:first-child{padding-top:0;border-top:0}
.rl-h{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:750;
  color:var(--ink-3);margin:0 0 10px;display:flex;justify-content:space-between;
  gap:8px;align-items:baseline}
.rl-h-st{font-variant-numeric:tabular-nums;font-weight:650;opacity:.8}
.rl-brief-t{font-size:13px;line-height:1.55;color:var(--ink-2);margin:0 0 8px}
.rl-delta-st{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;margin:-4px 0 8px}
.rl-delta{margin:0;padding:0;list-style:none}
.rl-delta li{font-size:12.5px;line-height:1.5;color:var(--ink-2);padding:5px 0 5px 12px;
  position:relative}
.rl-delta li::before{content:"–";position:absolute;left:0;color:var(--ink-3)}
.rl-list{display:flex;flex-direction:column}
.rl-ag{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:4px 8px;
  padding:8px 0;border-bottom:1px solid var(--grid);color:inherit;align-items:baseline;
  text-decoration:none}
.rl-list>.rl-ag:last-child{border-bottom:0}
.rl-ag:hover .rl-ag-n{color:var(--brand-3)}
.rl-ag-dot{font-size:9px;line-height:1.6}
.cap-ag-aktuell.rl-ag-dot,.cap-ag-prueft.rl-ag-dot{color:var(--st-good-text)}
.cap-ag-aktualisierung.rl-ag-dot{color:var(--st-warn-text)}
.rl-ag-n{font-size:12.5px;font-weight:700}
.rl-ag-c{font-size:11px;font-weight:700;color:var(--st-serious-text);
  font-variant-numeric:tabular-nums;grid-column:3;grid-row:1}
.rl-ag-k{grid-column:2;font-size:11px;color:var(--ink-3);font-weight:600}
.rl-ag-s{grid-column:2;font-size:11px;color:var(--ink-3)}
.rl-aktiv{box-shadow:inset 3px 0 0 var(--brand-3);padding-left:8px}
.rl-aktiv .rl-ag-n{color:var(--brand-3)}
.rl-m{display:flex;flex-direction:column;gap:2px;padding:8px 0;
  border-bottom:1px solid var(--grid);color:inherit;text-decoration:none}
.rl-list>.rl-m:last-child{border-bottom:0}
.rl-m-t{font-size:12.5px;font-weight:700}
.rl-m:hover .rl-m-t{color:var(--brand-3)}
.rl-m-s{font-size:11px;color:var(--ink-3)}
.rl-m .status-pill{align-self:flex-start;margin-top:3px}
.rl-leer{font-size:12.5px;color:var(--ink-3)}
.rl-more{display:inline-flex;gap:5px;align-items:center;margin-top:10px;
  font-size:12px;font-weight:650;color:var(--brand-3)}
.rl-more:hover{text-decoration:underline;text-underline-offset:2px}

/* ---------- Arbeitsfläche, Auftragsdetail, Briefingseite ----------
   Aus dem Block von v0.6.3 übernommen, weil ANDERE Ansichten sie benutzen.
   Sie gehören nicht zur Startseite und sind deshalb unverändert. */
.cap-work{background:var(--card);border:1px solid var(--ring);border-radius:var(--radius);
  padding:18px 20px}
.cap-work-kat{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:750;color:var(--ink-3)}
.cap-work-title{font-size:19px;font-weight:800;letter-spacing:-.015em;margin:4px 0 8px}
.cap-work-dec{padding-left:12px;border-left:4px solid var(--ink-3)}
.cap-work-dec.cap-dec-good{border-left-color:var(--st-good);color:var(--st-good-text)}
.cap-work-dec.cap-dec-warn{border-left-color:var(--st-warn);color:var(--st-warn-text)}
.cap-work-dec.cap-dec-crit{border-left-color:var(--st-crit);color:var(--st-crit-text)}
.cap-work-sub{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-bottom:10px}
.cap-work-tf{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;flex-wrap:wrap;margin-top:12px}
.cap-work-fort{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cap-work-bet{font-size:11.5px;color:var(--ink-3);margin-top:10px}
.cap-work-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.cap-kz-list{display:flex;flex-direction:column;border-top:1px solid var(--grid);margin-top:4px}
.cap-kzr{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:7px 0;border-bottom:1px solid var(--grid)}
.cap-kzr:last-child{border-bottom:0}
.cap-kzr span{font-size:12.5px;color:var(--ink-2)}
.cap-kzr b{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.cap-brief-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.cap-brief-sum{font-size:13px;line-height:1.55;color:var(--ink-2);max-width:760px;margin-top:8px}
.cap-brief-full{padding:18px 20px}
.cap-brief-full .cap-brief-sum{font-size:13.5px;color:var(--ink)}
.cap-brief-wichtig{margin:0 0 10px}
.cap-brief-delta{margin:0 0 10px;font-size:12.5px;color:var(--ink-2);border-top:1px solid var(--grid);
  padding-top:10px;line-height:1.55}
.cap-brief-delta b{color:var(--ink)}
.cap-brief-grid{display:flex;flex-direction:column;border-top:1px solid var(--grid)}
.cap-brief-kat{display:flex;gap:12px;align-items:baseline;padding:8px 2px;
  border-bottom:1px solid var(--grid)}
.cap-brief-kat:last-child{border-bottom:0}
.cap-brief-count{font-size:16px;font-weight:800;min-width:24px;text-align:right;
  font-variant-numeric:tabular-nums}
.cap-brief-kat b{font-size:12.5px;flex:0 0 auto}
.cap-brief-top{font-size:12px;color:var(--ink-3);margin-top:0;line-height:1.4}
.cap-brief-kat>div:last-child{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;min-width:0}
.cap-brief-top a{color:var(--brand-3)}
.cap-origin{background:var(--page);border:1px solid var(--grid);color:var(--ink-2)}
.cap-origin-captain{background:var(--brand-tint);border-color:var(--brand-3);color:var(--brand-3)}
.cap-tf-row{display:flex;gap:10px;align-items:flex-start;padding:8px 0;
  border-bottom:1px solid var(--grid)}
.cap-work .cap-tf-row:last-child,.cap-taskforce .cap-tf-row:last-child{border-bottom:0}
.cap-tf-mark{flex:0 0 18px;text-align:center;font-size:13px;margin-top:1px}
.cap-tf-mark.ok{color:var(--st-good-text)}
.cap-tf-mark.warn{color:var(--st-warn-text)}
.cap-tf-mark.open{color:var(--ink-3)}
.cap-tf-zeile{font-size:12.5px;color:var(--ink-2);margin-top:2px;line-height:1.45}
.cap-facts{margin-top:16px}
.cap-fact{border-top:1px solid var(--grid);padding:9px 0}
.cap-fact-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.cap-fact-head b{font-size:12.5px}
.cap-fact-body{font-size:13px;line-height:1.5;color:var(--ink-2);margin-top:3px}
.cap-empfehlung{margin-top:16px;border-left:3px solid var(--brand-3);padding:6px 0 6px 12px}
.cap-empfehlung-text{font-size:13.5px;line-height:1.55;font-weight:550}
.cap-case-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.cap-partial{border-left:3px solid var(--st-warn);padding:8px 12px;margin-bottom:12px}
.cap-partial-head{display:flex;gap:8px;align-items:center;color:var(--st-warn-text);font-size:13px}
.cap-partial-body{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.cap-partial-cta{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Tablet (§16) ----------
   Die Nebenspalte wandert unter die Hauptspalte. Die Reihenfolge bleibt,
   weil sie schon im Dokument steht. */
@media (max-width:1080px){
  .dk{grid-template-columns:1fr;gap:32px}
  .dk-rail{position:static}
  .lg-titel,.lg-z{grid-template-columns:100px 96px minmax(0,1fr) 104px 88px}
  .lg-akt{display:none}
}

/* ---------- Mobil ≤768 (§16) ----------
   Eigene Hierarchie, keine geschrumpfte Desktopansicht: Lage · führender
   Vorgang · Grundlage · Handlung · Register · Eingabe · Spezialisten. Das
   Register verliert die Tabellenform und wird zur Zeile mit zwei Ebenen —
   kein Querlauf für eine zentrale Entscheidung (§16). */
@media (max-width:768px){
  .dh{margin-bottom:18px;gap:12px;align-items:flex-start}
  .dh-lage{font-size:21px;max-width:none}
  .dh-r{align-items:flex-start;text-align:left}
  .dh-stand,.dh-links{justify-content:flex-start}
  .cap-jump{display:inline;color:var(--brand-3);font-weight:650;text-decoration:none}
  .fk{padding:18px 16px}
  .fk-titel{font-size:19px;max-width:none}
  .fk-basis{gap:20px;padding:14px 0}
  .fk-kw-v{font-size:19px}
  .fk-ab{gap:18px}
  .fk-akt{gap:14px;margin-top:18px}
  .fk-primary{width:100%;min-height:44px;padding:11px 18px}
  .fk-sek{min-height:44px;display:inline-flex;align-items:center}
  .lg-titel{display:none}
  .lg-z{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:11px 2px;
    min-height:44px;align-content:center}
  .lg-t{grid-column:1;grid-row:1;white-space:normal;font-size:13.5px}
  .lg-kw{grid-column:2;grid-row:1;text-align:right}
  .lg-zeit{grid-column:1;grid-row:2}
  .lg-st{grid-column:2;grid-row:2;justify-self:end}
  .lg-zu{grid-column:1;grid-row:3}
  .lg-akt{display:none}
  .cmd-row{flex-direction:column;align-items:stretch;gap:12px}
  .cmd-go{width:100%;min-height:44px}
  .cmd-hint{margin-left:0}
  .cmd-q{min-height:44px;display:inline-flex;align-items:center}
  .cap-work{padding:15px 16px}
}
/* ============================================================
   v0.7.4 · Regelwerke: Abdeckung, Einrichtungsassistent, Diagnose
   (Master-Prompt §84 — Bestandsdesignsystem, keine neue Optik, keine
   Entwicklerkonsolen-Anmutung). Alle Klassen sind neu; kein Bestandsscreen
   verändert sich dadurch.
   ============================================================ */
.dot-off{background:var(--ink-3);opacity:.55}
/* Große Primäraktion der Einrichtungsflächen — dieselbe Buttonfamilie,
   nur mit mehr Fläche (kein neuer Stil). */
.btn-lg{padding:9px 18px;font-size:13.5px;font-weight:650}

/* --- Abdeckung (§32/§33) --- */
.reg-cov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px}
.reg-cov-card{padding:18px 20px}
.reg-cov-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.reg-cov-head h3{font-size:16px;font-weight:750}
.reg-cov-head .statusline{margin-top:3px}
.reg-cov-note{margin-bottom:10px}
.reg-cov-list{display:flex;flex-direction:column}
.reg-cov-sub{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);
  margin:10px 0 2px;padding-top:8px;border-top:1px solid var(--grid)}
.reg-cov-sub:first-child{border-top:0;padding-top:0;margin-top:0}
.reg-cov-item{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;
  padding:9px 0;border-top:1px solid var(--grid);flex-wrap:wrap}
.reg-cov-item:first-child{border-top:0}
.reg-cov-item-t{flex:1 1 190px;min-width:0;font-size:13.2px}
.reg-cov-item-s{flex:0 0 auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.reg-cov-warn{color:var(--st-warn-text)}
.reg-cov-foot{margin-top:16px}
.reg-open-packs{margin-bottom:16px}

/* --- Ersteinrichtung (§45/§46) --- */
.reg-setup{padding:30px 28px;margin-bottom:16px;max-width:820px}
.reg-setup h2{font-size:20px;font-weight:750;margin-bottom:8px}
.reg-setup p{font-size:13.5px;color:var(--ink-2);margin-bottom:14px;max-width:62ch}
.reg-setup-warn{margin-bottom:14px}

/* --- Fortschritt (§47) --- */
.reg-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;list-style:none;margin-bottom:18px}
.reg-step{display:flex;align-items:center;gap:8px;border:1px solid var(--grid);border-radius:10px;
  padding:9px 11px;background:var(--card);font-size:12.5px;color:var(--ink-2);min-width:0}
.reg-step-n{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;
  border-radius:50%;background:var(--page);border:1px solid var(--line);font-size:11.5px;font-weight:700;flex:0 0 21px}
.reg-step-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reg-step.done{border-color:var(--st-good);color:var(--ink)}
.reg-step.done .reg-step-n{background:var(--st-good-bg);color:var(--st-good-text);border-color:var(--st-good)}
.reg-step.now{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.reg-step.now .reg-step-t{font-weight:700;color:var(--ink)}

/* --- Auswahl (§5) --- */
.reg-tpl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}
.reg-tpl{padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.reg-tpl h3{font-size:16px;font-weight:750}
.reg-tpl-list{list-style:none;flex:1;font-size:12.8px;color:var(--ink-2)}
.reg-tpl-list li{padding:5px 0;border-top:1px solid var(--grid)}
.reg-tpl-list li:first-child{border-top:0}
.reg-tpl .btn{align-self:flex-start;margin-top:6px}

/* --- Dokumente (§49/§50) --- */
.reg-dropzone{padding:36px 20px}
.reg-confirm{background:var(--page);border-radius:10px;padding:11px 13px;margin-bottom:8px;border-top:0}
.reg-fehlstellen{list-style:none;margin-top:6px;font-size:12.3px;color:var(--ink-2)}
.reg-fehlstellen li{padding:2px 0}
.reg-fehlstellen li::before{content:"○ ";color:var(--ink-3)}
.reg-uploadmeldungen{margin-bottom:16px}

/* --- Prüfung (§10/§13/§15) --- */
.reg-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.reg-summary>div{background:var(--page);border:1px solid var(--grid);border-radius:10px;padding:11px 13px}
.reg-summary b{display:block;font-size:20px;font-weight:750;line-height:1.2}
.reg-summary span{font-size:11.8px;color:var(--ink-3)}
.reg-ok{color:var(--st-good-text);background:var(--st-good-bg);border-color:var(--st-good)}
.reg-pruefliste{list-style:none;font-size:13.2px;color:var(--ink-2)}
.reg-pruefliste li{padding:3px 0}
.reg-kette{border:1px solid var(--grid);border-radius:10px;padding:11px 13px;margin-bottom:10px;background:var(--page)}
.reg-kette-f{font-size:13px;padding:3px 0}
.reg-kette-f .hint{display:block}
.reg-kette-pfeil{color:var(--ink-3);font-size:13px;line-height:1}
.reg-block{background:var(--st-warn-bg);color:var(--st-warn-text);border-radius:8px;padding:8px 10px;
  margin-top:6px;font-size:12.5px}
.reg-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.reg-cta h3{font-size:15px;font-weight:750}

/* --- Captain begleitet den Vorgang (§29/§68) ---
   Eine Textfläche mit linker Akzentlinie — dieselbe Formsprache wie die
   Captain-Einschätzung an einer AttentionCard, damit erkennbar bleibt: hier
   spricht der bestehende Orchestrator, kein neuer Agent (§69). */
.reg-captain{margin-bottom:16px;border-left:3px solid var(--brand-3)}
.reg-captain-h{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.reg-captain-h b{font-size:14.5px;font-weight:750}
.reg-captain-text{font-size:13.4px;line-height:1.55;color:var(--ink-2);max-width:76ch}
.reg-captain-cta{margin-top:12px;font-size:12.6px;color:var(--ink-3);font-weight:600}

/* --- Freigabe (§20–§22/§37) --- */
.reg-freigabe .reg-diff{margin-top:16px;border-top:1px solid var(--grid);padding-top:12px}
.reg-diff h4{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  margin:12px 0 7px;font-weight:700}
.reg-impact{list-style:none;font-size:13px;color:var(--ink-2)}
.reg-impact li{padding:2px 0}
.reg-impact li::before{content:"• ";color:var(--ink-3)}

/* --- Bestimmungs-Diff (v0.7.6 §37-§40) ---
   Der Wortlaut steht bewusst hinter einer Schaltflaeche: Ein Aenderungsbild,
   das drei Bildschirme Normtext ausschuettet, wird nicht gelesen. */
.reg-best-diff{margin-top:14px}
.reg-best-quelle{border:1px solid var(--grid);border-radius:8px;padding:10px 12px;margin-bottom:10px}
.reg-best-kopf{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;margin-bottom:6px}
.reg-best-liste{list-style:none;margin:0}
.reg-best-zeile{padding:6px 0;border-top:1px solid var(--grid);font-size:13px}
.reg-best-zeile:first-child{border-top:0}
.reg-best-zeile .chip{margin-left:8px}
.reg-best-zeile .btn{margin-top:4px}
.reg-wortlaut{margin-top:8px;padding:8px 10px;background:var(--surface-2,rgba(0,0,0,.03));
  border-radius:6px;font-size:12.6px;line-height:1.5}
.reg-wortlaut>div+div{margin-top:8px;padding-top:8px;border-top:1px solid var(--grid)}
.reg-wortlaut p{margin:2px 0 0;white-space:pre-wrap}

/* --- Sicherungswaechter (v0.7.6 §33-§35) --- */
.reg-sicherung ul{margin:6px 0 0 18px;font-size:12.8px}
.reg-sicherung .hint{margin-top:6px}

.reg-entscheidung{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--grid)}
.reg-einzel{max-height:52vh;overflow:auto;margin-top:10px}

/* --- Erfolg (§67) --- */
.reg-erfolg{padding:30px 28px;max-width:760px}
.reg-erfolg h2{font-size:20px;font-weight:750;margin-bottom:12px}
.reg-erfolgliste{margin-bottom:14px}
.reg-erfolg .form-note{margin-bottom:16px}

/* --- Verlauf (§58) --- */
.reg-verlauf{list-style:none}
.reg-verlauf li{display:flex;gap:12px;align-items:baseline;padding:6px 0;border-top:1px solid var(--grid);font-size:13px}
.reg-verlauf li:first-child{border-top:0}
.reg-verlauf .ts{flex:0 0 130px;color:var(--ink-3);font-size:11.8px}

/* --- Technische Details (§87) --- */
.reg-technik{margin-top:12px}
.reg-technik .pd-body{overflow-x:auto}
.reg-technik td{font-size:12.3px}

/* ===========================================================
   v0.7.5 Welle 2 · Schritt 1: die Empfehlung (§11–§13, §24–§26)

   Ausschließlich NEUE Klassen. Es wird keine Bestandsklasse umdefiniert —
   die übrigen 90 Bestandsbilder der visuellen Prüfung bleiben dadurch
   unberührt.
   =========================================================== */
/* §26 · Kontextzeile über der Empfehlung */
.reg-kontext{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-bottom:14px;font-size:12.8px;color:var(--ink-2)}
.reg-kontext-t b{font-weight:700;color:var(--ink-1)}
.reg-chip{display:inline-block;padding:2px 9px;border-radius:11px;
  font-size:11.6px;font-weight:650;border:1px solid var(--grid);
  background:var(--card2);cursor:default}
.reg-chip-warn{border-color:var(--st-warn-text);color:var(--st-warn-text)}
.reg-chip-offen{color:var(--ink-3)}
.reg-chip-detail{display:inline-block}
.reg-chip-detail>summary{list-style:none;cursor:pointer}
.reg-chip-detail>summary::-webkit-details-marker{display:none}
.reg-chip-detail>.hint{margin-top:5px;max-width:60ch}

/* §11/§24 · Der Empfehlungsblock — eine Karte, ein Weg */
.reg-empfehlung{padding:22px 24px;margin-bottom:16px}
.reg-emp-kopf{display:flex;gap:16px;justify-content:space-between;
  align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.reg-emp-kopf h2{font-size:19px;font-weight:750;margin:4px 0 2px}
.reg-badge{display:inline-block;padding:2px 8px;border-radius:4px;
  font-size:10.6px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
  background:var(--brand-3);color:#fff}
/* Die Kennzeichnung „✓" bedeutet „verbindlich für Ihren Club" — nicht
   „erledigt". Neben einer Statuskennzeichnung wie „Nicht eingerichtet" wäre
   das ohne Legende als Erledigungshaken lesbar, und genau die falsche
   Vollständigkeit verbietet §15. */
.reg-emp-legende{margin:10px 0 2px;font-size:12px}
.reg-emp-liste{border-top:1px solid var(--grid)}
.reg-emp-zeile{padding:9px 0;border-bottom:1px solid var(--grid)}
.reg-emp-h{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.reg-emp-h b{font-size:14.5px;font-weight:750}
.reg-emp-check{color:var(--brand-3);font-weight:750;display:inline-flex}
.reg-emp-check svg{width:15px;height:15px}
.reg-emp-m{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:3px}
.reg-emp-summe{margin-top:12px;font-size:13.4px}
.reg-emp-aktion{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  margin-top:16px}
.reg-vorbehalt{margin-bottom:12px}
/* v0.7.6 §47/§48 · Die Lücken der Lieferung. Bewusst eine schlichte Liste
   und kein Warnblock je Zeile: Es ist eine Feststellung über den
   Lieferumfang, keine Fehlerliste des Nutzers. */
.reg-luecken-liste{margin:10px 0 0;padding-left:20px;font-size:13.4px}
.reg-luecken-liste>li{margin-bottom:6px;max-width:88ch}
.btn-link{background:none;border:0;padding:0;font-size:13px;font-weight:650;
  color:var(--brand-3);cursor:pointer;text-decoration:underline}
.reg-individuell{margin-bottom:16px}
.reg-wiz-foot{margin-top:4px}

/* §30 · Benötigte Dokumente, nach Verband gruppiert */
.reg-benoetigt-gruppe{margin-bottom:10px}
.reg-benoetigt-h{display:flex;gap:10px;align-items:baseline;
  padding:6px 0 2px;border-bottom:1px solid var(--grid)}

/* --- Tablet/Mobil (§83): Massenupload und Diff bleiben Desktop-stark,
       die Einrichtung bleibt bedienbar. --- */
@media (max-width:900px){
  .reg-steps{grid-template-columns:repeat(2,1fr)}
  .reg-cov-grid,.reg-tpl-grid{grid-template-columns:1fr}
  .reg-cta{align-items:flex-start}
}
@media (max-width:640px){
  .reg-steps{grid-template-columns:1fr}
  .reg-cov-item{flex-direction:column;gap:6px}
  .reg-cov-item-s{justify-content:flex-start}
  .reg-verlauf li{flex-direction:column;gap:2px}
  .reg-verlauf .ts{flex:0 0 auto}
  .reg-entscheidung .btn{width:100%;text-align:center;justify-content:center}
  .reg-empfehlung{padding:18px 16px}
  .reg-emp-aktion{align-items:stretch}
  .reg-emp-aktion .btn-lg{width:100%;text-align:center;justify-content:center}
  .reg-kontext{gap:6px}
  .reg-setup,.reg-erfolg{padding:22px 18px}
}

/* ============================================================
   v0.7.7.0 · Zweite Entwurfsrunde
   ------------------------------------------------------------
   Abstände ausschließlich aus einer Skala mit 4 px Grundeinheit
   (4 · 8 · 12 · 16 · 24 · 32 · 40 · 48). Keine neuen Schriften, keine neue
   Farbwelt: Die Zustandsfarben sind die vorhandenen (--st-good/warn/
   serious/crit), und Farbe trägt nirgends allein eine Bedeutung — jedes
   farbige Element führt Zeichen und Wort mit.
   ============================================================ */
:root{
  --r4:4px; --r8:8px; --r12:12px; --r16:16px;
  --r24:24px; --r32:32px; --r40:40px; --r48:48px;
}

/* ---------- Entscheidungsvokabeln ---------- */
.vk{display:inline-flex;align-items:center;gap:var(--r4);padding:1px 8px;
  border-radius:99px;font-size:10.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;border:1px solid var(--line);white-space:nowrap}
.vk-sym{font-size:9px;line-height:1}
.vk-blocker{background:var(--st-crit-bg);color:var(--st-crit-text);border-color:var(--st-crit)}
.vk-bestaetigt{background:var(--st-good-bg);color:var(--st-good-text);border-color:var(--st-good)}
.vk-massnahme{background:var(--st-warn-bg);color:var(--st-warn-text);border-color:var(--st-warn)}
.vk-pruefen{background:var(--card2);color:var(--ink-2)}
.vk-chance{background:var(--brand-tint);color:var(--brand-ink);border-color:var(--brand-3)}

/* ---------- Abdeckung ----------
   Bewusst kein Balken: Abdeckung ist keine Strecke. Die Punktreihe zeigt
   eine Stufe, keinen Fortschritt — und daneben steht immer das Wort. */
.ab-zeile{display:flex;gap:var(--r16);flex-wrap:wrap;margin:0 0 var(--r16)}
.ab,.einfl{flex:1 1 260px;min-width:0;padding:var(--r12) var(--r16);
  border:1px solid var(--line);border-radius:var(--r12);background:var(--card)}
.ab-k{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-weight:800;display:block;margin-bottom:var(--r4)}
.ab-stufe{font-size:15px;font-weight:750;color:var(--ink);
  display:flex;align-items:center;gap:var(--r8)}
.ab-sym{font-size:9px;letter-spacing:1px;color:var(--ink-3)}
.ab-satz{font-size:12.5px;color:var(--ink-2);margin-top:var(--r4);line-height:1.45}
.ab-namen{font-size:12px;color:var(--ink-3);margin-top:2px}
.ab-voll{border-left:3px solid var(--st-good)}
.ab-trag{border-left:3px solid var(--st-warn)}
.ab-eing{border-left:3px solid var(--st-serious)}
.ab-offen{border-left:3px solid var(--st-crit)}
.ab-klein{padding:var(--r8) var(--r12)}
.ab-klein .ab-stufe{font-size:13px}
.einfl-stufe{font-size:15px;font-weight:750;color:var(--ink)}
.einfl-wesentlich .einfl-stufe,.einfl-bestimmend .einfl-stufe{color:var(--st-serious-text)}

/* ---------- Grundlagen einer Aussage ---------- */
.gl{display:flex;flex-direction:column;gap:2px}
.gl-row{display:grid;grid-template-columns:16px minmax(120px,1.4fr) 110px 1.4fr auto;
  gap:var(--r8);align-items:baseline;padding:var(--r8) 0;
  border-bottom:1px solid var(--grid);font-size:12.5px}
.gl-row:last-child{border-bottom:0}
.gl-sym{color:var(--ink-3);font-size:11px}
.gl-belegt .gl-sym{color:var(--st-good)}
.gl-geschaetzt .gl-sym{color:var(--st-warn)}
.gl-unbekannt .gl-sym{color:var(--ink-3)}
.gl-lbl{font-weight:650;color:var(--ink)}
.gl-art{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--ink-3)}
.gl-belegt .gl-art{color:var(--st-good-text)}
.gl-geschaetzt .gl-art{color:var(--st-warn-text)}
.gl-wert{color:var(--ink-2);min-width:0;overflow-wrap:anywhere}

/* ---------- Zeit ---------- */
.zt{font-size:11.5px;font-weight:700;white-space:nowrap}
.zt-ueberfaellig{color:var(--st-crit-text)}
.zt-stunde{color:var(--st-serious-text)}
.zt-heute{color:var(--st-warn-text)}
.zt-woche,.zt-spaeter,.zt-offen{color:var(--ink-3)}

/* ---------- Zuständigkeit ---------- */
.zust{font-size:11.5px;color:var(--ink-2)}
.zust-ich{font-weight:750;color:var(--brand-ink)}

/* ---------- Berechtigung ----------
   Keine Platzhalterpunkte, keine Balken, keine Anzahl: Aus allem davon
   ließe sich auf Größenordnung oder Länge schließen. */
.gs{display:inline-flex;align-items:center;gap:var(--r4);font-size:12px;
  color:var(--ink-3);font-style:italic}
.gs-sym{font-style:normal;font-size:9px;color:var(--ink-3)}
.orig-gs{background:transparent;border-style:dashed}

/* ---------- Datenstand ---------- */
.st-alt{font-size:11.5px}
.st-aktuell{color:var(--ink-3)}
.st-aelter{color:var(--st-warn-text)}
.st-veraltet{color:var(--st-serious-text);font-weight:700}
.st-unbek{color:var(--ink-3);font-style:italic}

/* ---------- Auswirkung einer Einschränkung ---------- */
.wk{margin-top:var(--r8);padding:var(--r8) var(--r12);border-radius:var(--r8);
  font-size:12.5px;background:var(--card2);color:var(--ink-2)}
.wk-sperr{background:var(--st-crit-bg);color:var(--st-crit-text)}
.wk-akt{background:var(--st-warn-bg);color:var(--st-warn-text)}

/* ---------- Vorgangskarte: Warum jetzt? ---------- */
.cap-att-kopf{display:flex;align-items:center;gap:var(--r8);flex-wrap:wrap;
  margin-bottom:var(--r4)}
.cap-warum{display:flex;gap:var(--r8);align-items:baseline;margin:var(--r8) 0 var(--r4);
  font-size:12.5px;line-height:1.45}
.cap-warum-k{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-weight:800;white-space:nowrap}
.cap-warum-t{color:var(--ink)}
.cap-att-zu{font-size:12px;margin-bottom:var(--r4)}
.tf-hinweis{font-size:11.5px;color:var(--ink-3);padding:0 var(--r16) var(--r12);
  line-height:1.45}

/* ---------- Arbeitsvorrat ----------
   v0.7.7.1 (§5/§20): Der Arbeitsvorrat aus v0.7.7.0 (.vr, .vr-zeile, .vr-h,
   .vr-n, .vr-titel, .vr-kw samt mobilem Umbruch) ist ENTFERNT. Er war eine
   Zeilenliste unter einem Kartenstapel; an seine Stelle tritt das
   Entscheidungsregister `.lg` mit Spaltenbeschriftung und nächster Aktion.
   Zwei Zeilenformate nebeneinander stehen zu lassen wäre genau die
   Kaskade aus drei Generationen, die §20 ausschließt. */

/* ---------- Ruhiger Tag ----------
   Kein Leerzustand. „Nichts zu tun" ist im Regelbetrieb das Ergebnis, für
   das der Kunde zahlt — es wird ruhig, aber sichtbar gezeigt. */
.rt{border:1px solid var(--line);border-radius:var(--r12);background:var(--card);
  padding:var(--r24)}
.rt-kopf{margin-bottom:var(--r16)}
.rt-titel{font-size:17px;font-weight:750;color:var(--ink);display:block;
  margin-bottom:var(--r4)}
.rt-sub{font-size:13px;color:var(--ink-2);line-height:1.5;max-width:62ch}
.rt-grid{display:flex;flex-direction:column;gap:2px}
.rt-zeile{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:var(--r12);
  padding:var(--r8) 0;border-bottom:1px solid var(--grid);font-size:12.5px}
.rt-zeile:last-child{border-bottom:0}
.rt-k{font-weight:700;color:var(--ink)}
.rt-v{color:var(--ink-2)}
.rt-next{margin-top:var(--r16);padding-top:var(--r16);border-top:1px solid var(--line)}
.rt-next-t{font-size:15px;font-weight:750;color:var(--ink)}
.rt-next-s{font-size:12.5px;color:var(--ink-2);margin-top:2px}

/* ---------- Freigabe: Vier-Augen-Stand und Folge ---------- */
.va{margin-top:var(--r12);padding:var(--r12) var(--r16);border-radius:var(--r8);
  background:var(--card2)}
.va-zeile{display:grid;grid-template-columns:minmax(96px,132px) 1fr;gap:var(--r12);
  padding:var(--r4) 0;font-size:12.5px}
.va-k{font-weight:700;color:var(--ink-3)}
.va-v{color:var(--ink)}
.va-offen .va-v{color:var(--st-warn-text);font-weight:650}
.va-sperr .va-v{color:var(--st-serious-text)}
.folge{margin-top:var(--r8);font-size:12.5px;color:var(--ink-2);line-height:1.5}
.folge-t{display:block;margin-top:2px;max-width:78ch}
.appr-foot .btn[disabled]{opacity:.5;cursor:not-allowed}

/* ============================================================
   Responsive · die beiden führungskritischen Ansichten zuerst
   ------------------------------------------------------------
   Mobil ist keine verkleinerte Desktopansicht. Die Tagesübersicht muss die
   Lage ohne Scrollen zeigen, die Freigabesicht vollwertig bedienbar sein —
   sie wird im Zug und am Verhandlungstisch benutzt, nicht am Schreibtisch.
   ============================================================ */
@media (max-width:900px){
  .ab-zeile{flex-direction:column;gap:var(--r12)}
  .gl-row{grid-template-columns:16px 1fr auto;row-gap:2px}
  .gl-wert{grid-column:2 / -1;color:var(--ink-3)}
  .gl-q{grid-column:2 / -1}
}
@media (max-width:768px){
  /* Freigabe: Die Entscheidung steht am ENDE der Karte — nach Befund,
     Grundlage und Vier-Augen-Stand. Eine klebende Leiste würde sie über den
     Inhalt legen und damit genau die Reihenfolge umkehren, auf die es hier
     ankommt: erst die Grundlage, dann die Entscheidung. */
  .appr-foot{background:var(--card);margin-top:var(--r16);
    padding:var(--r12) 0 0;border-top:1px solid var(--line);
    display:flex;flex-wrap:wrap;gap:var(--r8)}
  .appr-foot .btn{flex:1 1 44%;min-height:44px}
  .appr-foot .btn-ghost{flex:1 1 100%}
  .appr-foot .inp{flex:1 1 100%;max-width:none !important}
  .appr-grid{grid-template-columns:1fr}
  .va-zeile{grid-template-columns:1fr;row-gap:0}
  .rt{padding:var(--r16)}
  .rt-zeile{grid-template-columns:1fr;row-gap:0;padding:var(--r8) 0}
  /* Kein Element unter 44 px Höhe: Fingerbedienung, nicht Mauszeiger.
     Die Registerzeile bringt ihr Maß aus dem eigenen Block mit. */
  .f-chip{min-height:44px}
}

/* ============================================================
   v0.7.7.0 RELEASE REFRESH · Der unbestätigte Freigabestand
   ------------------------------------------------------------
   Bewusst kein Fehlerrot: Es ist keine Störung, sondern eine offene Frage.
   Die einzige angebotene Handlung ist der Abgleich mit dem Server — die
   Entscheidung selbst bleibt gesperrt, bis feststeht, ob sie noch aussteht.
   ============================================================ */
.unbestaetigt{line-height:1.5}
.unbest-akt{margin-top:var(--r12)}
.unbest-akt .btn{min-height:40px}
@media (max-width:768px){
  .unbest-akt .btn{width:100%;min-height:44px}
}

/* ============================================================
   v0.7.9 · LEISTUNGSDATEN — Player Performance Center
   ============================================================
   Ein Arbeitsplatz, kein Dashboard. Die Gestaltung hat genau eine
   Aufgabe: Der Blick muss in einer Sekunde trennen können, was
   BEKANNT, was UNBEKANNT und was WIDERSPRÜCHLICH ist. Alles andere
   bleibt ruhig — Farbe wird hier nicht dekorativ eingesetzt, sie ist
   der Träger einer fachlichen Aussage.
   ============================================================ */

/* Unbekannt. Der wichtigste Zustand dieser Welle — und bis v0.7.8
   ungestaltet: `perf-unb` wurde verwendet, ohne dass es die Regel gab.
   Ein unbekannter Wert sah damit aus wie ein gewöhnlicher Text.
   Gepunktete Unterlinie statt Farbe: Sie sagt „hier fehlt etwas",
   ohne zu alarmieren — unbekannt ist kein Fehler. */
.perf-unb{color:var(--ink-3);border-bottom:1px dotted var(--ink-3);
  font-style:normal;cursor:help;font-size:.95em}
td.num .perf-unb{border-bottom:0}

/* Zahl mit Zwillingszahl: „180 · 2 ohne Angabe". Der Zusatz steht
   IMMER da, wenn es unbekannte Fälle gibt — er ist nicht optional. */
.perf-nz{font-variant-numeric:tabular-nums;font-weight:650}
.perf-nz-zus{color:var(--ink-3);font-size:11.5px;font-weight:400;
  margin-left:6px;white-space:nowrap}

/* Feldstatus-Punkt vor einem Wert. Vier Zustände, bewusst klein. */
.perf-dot{display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:6px;vertical-align:.12em;flex:0 0 auto}
.perf-dot-best{background:var(--st-good)}      /* menschlich bestätigt */
.perf-dot-belegt{background:var(--series-2)}    /* belegt, ungeprüft   */
.perf-dot-konflikt{background:var(--st-serious)}/* Widerspruch offen   */
.perf-dot-leer{background:transparent;border:1px solid var(--ink-3)}

/* Spielerliste */
.perf-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;
  margin-bottom:14px}
.perf-toolbar .fld{margin:0;min-width:150px}
.perf-toolbar .fld label{display:block;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.perf-such{min-width:230px;flex:1 1 230px}
.perf-treffer{color:var(--ink-3);font-size:12px;align-self:center;
  padding-bottom:9px;white-space:nowrap;margin-left:auto}
/* Die Werkzeugleiste darf die Seite nicht breiter machen als den Inhalt —
   sonst schiebt sie die Tabelle unter den rechten Rand. */
.perf-toolbar{max-width:100%}
.perf-toolbar .fld{flex:0 1 auto;max-width:220px}

table.tbl tr.perf-zeile{cursor:pointer}
table.tbl tr.perf-zeile:hover td{background:var(--card2)}
table.tbl tr.perf-zeile:focus-visible{outline:2px solid var(--series-1);
  outline-offset:-2px}
table.tbl thead.perf-sticky th{position:sticky;top:0;z-index:2;
  background:var(--card);box-shadow:inset 0 -1px 0 var(--grid)}
.perf-sort{cursor:pointer;user-select:none;white-space:nowrap}
.perf-sort[aria-sort]:not([aria-sort="none"]){color:var(--brand-ink)}
.perf-sort-pfeil{font-size:9px;margin-left:3px;opacity:.75}

/* Spielerkopf */
.perf-kopf{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;
  padding:16px 18px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);margin-bottom:14px}
.perf-kopf-name{font-size:19px;font-weight:750;letter-spacing:-.01em}
.perf-kopf-sub{color:var(--ink-2);font-size:12.5px;margin-top:3px}
.perf-kopf-rechts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;
  align-items:center;justify-content:flex-end}
.perf-nr{display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;border-radius:9px;background:var(--card2);
  border:1px solid var(--grid);font-weight:750;font-variant-numeric:tabular-nums}

/* Aufklappbare Zeile: die selten gelesenen Angaben liegen darunter,
   nicht in achtzehn Spalten nebeneinander. Keine Information geht
   verloren — sie ist nur geschichtet. */
tr.perf-auf td{background:var(--card2);padding:0}
.perf-auf-inner{padding:12px 14px 14px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 22px}
.perf-auf-grp{min-width:0}
.perf-auf-grp h4{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:6px;font-weight:700}
.perf-auf-z{display:flex;justify-content:space-between;gap:12px;
  padding:3px 0;font-size:12.5px;border-bottom:1px solid var(--grid)}
.perf-auf-z:last-child{border-bottom:0}
.perf-auf-z span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.perf-auf-akt{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;
  grid-column:1/-1}

/* Belegkette im Drilldown */
.perf-beleg{border:1px solid var(--grid);border-radius:9px;padding:10px 12px;
  margin-bottom:8px;background:var(--card2)}
.perf-beleg.perf-beleg-gilt{border-color:var(--st-good);
  background:var(--st-good-bg)}
.perf-beleg.perf-beleg-konflikt{border-color:var(--st-serious);
  background:var(--st-serious-bg)}
.perf-beleg-kopf{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  margin-bottom:5px}
.perf-beleg-wert{font-weight:750;font-variant-numeric:tabular-nums}
.perf-beleg-meta{color:var(--ink-3);font-size:11.5px;line-height:1.55}
.perf-beleg-alt{opacity:.72}

/* Feldblock im Drilldown: je Feld eine eigene Einheit. Es gibt bewusst
   KEINEN recordweiten Stand — „Datensatz verifiziert" wäre falsch, wenn
   ein Feld bestätigt und ein anderes ungeprüft ist. */
.perf-feld{border-top:1px solid var(--grid);padding:12px 0 4px}
.perf-feld:first-of-type{border-top:0}
.perf-feld-kopf{display:flex;align-items:baseline;gap:9px;margin-bottom:8px}
.perf-feld-name{font-weight:700;font-size:13px}
.perf-feld-jetzt{margin-left:auto;font-variant-numeric:tabular-nums;
  font-weight:650}

/* Dreiwertige Auswahl im Bearbeiten-Dialog: Ja / Nein / Unbekannt.
   Keine Ankreuzfläche — die kennt nur zwei Zustände und würde den
   dritten stillschweigend zu „Nein" machen. */
.perf-drei{display:flex;gap:0;border:1.5px solid var(--line);
  border-radius:9px;overflow:hidden}
.perf-drei button{flex:1;border:0;background:var(--card);color:var(--ink-2);
  padding:8px 4px;font-size:12.5px;font-weight:650;cursor:pointer;
  border-right:1px solid var(--line)}
.perf-drei button:last-child{border-right:0}
.perf-drei button:hover{background:var(--card2)}
.perf-drei button[aria-pressed="true"]{background:var(--brand);
  color:var(--on-brand)}
.perf-drei button.perf-drei-unb[aria-pressed="true"]{background:var(--ink-3);
  color:var(--page)}

/* Bearbeiten-Dialog */
.perf-edit-gitter{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.perf-edit-gitter .fld{margin:0}
.perf-edit-voll{grid-column:1/-1}
.perf-warn{font-size:12.5px;color:var(--st-warn-text);
  background:var(--st-warn-bg);border:1px solid var(--st-warn);
  border-radius:8px;padding:8px 11px;margin-top:10px}
.perf-quelle-box{border:1px solid var(--grid);border-radius:9px;
  padding:12px;margin-top:14px;background:var(--card2)}
.perf-quelle-box h4{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px;font-weight:700}

/* Herkunftshinweis: solange kein echter Anbieter angebunden ist, darf
   die Fläche nicht so aussehen, als kämen die Zahlen von der DFL. */
.perf-herkunft{display:inline-flex;align-items:center;gap:7px;
  border:1px dashed var(--st-warn);color:var(--st-warn-text);
  background:var(--st-warn-bg);border-radius:8px;padding:5px 10px;
  font-size:11.5px;font-weight:650}

@media (max-width:1100px){
  .perf-edit-gitter{grid-template-columns:1fr}
  .perf-kopf-rechts{margin-left:0;width:100%;justify-content:flex-start}
}

/* Die Bestandsregel `.tab` gilt für <button>. Die Reiter der Leistungsdaten
   sind Verweise (<a>), damit jeder Reiter eine eigene Adresse hat und
   verlinkbar bleibt — dafür fehlen einem Anker nur Blocksatz und Zentrierung. */
.tabs a.tab{display:block;text-align:center;text-decoration:none;
  line-height:1.35}
.tabs a.tab:hover{background:var(--card2);color:var(--ink)}
.tabs a.tab.sel:hover{background:var(--brand-2);color:var(--on-brand)}

/* Der Bearbeiten-Dialog ist länger als ein Laptopsichtfeld: neun Zahlenfelder,
   zwei dreiwertige Angaben und der Quellenblock. `.modal` scrollt bereits
   (max-height:90vh) — dabei wandern aber „Abbrechen" und „Speichern" aus dem
   Blick. Für die breiten Dialoge bleiben sie deshalb stehen. */
.modal.modal-wide .modal-actions{position:sticky;bottom:-20px;
  background:var(--card);padding:12px 0 4px;margin-top:14px;
  border-top:1px solid var(--grid)}
.modal.modal-wide #pe-pruef:not(:empty),
.modal.modal-wide #pm-pruef:not(:empty){position:sticky;bottom:56px;
  background:var(--card);padding-top:8px}

/* ============================================================
   v0.7.10 · LEISTUNGSDATEN — Layout der Spielerdetailansicht
   ============================================================
   DER BEFUND, DER ZU DIESEM ABSCHNITT GEFÜHRT HAT
   ------------------------------------------------------------
   Gemessen im Browser gegen den Stand v0.7.9, Kachelbreite 178 px:

     " · 128 Spiele ohne Angabe"                  passt, 13 px Luft
     " · 34 Spiele ohne belastbare Angabe"        läuft 39,8 px hinaus
     " · 6 Spiele ohne Angabe (unbestätigt)"      läuft 53,0 px hinaus

   Die Zusatzangabe trug `white-space:nowrap` und saß in einer Kachel mit
   fester Mindestbreite von 170 px. Der Abstand zum Überlauf betrug damit
   DREIZEHN PIXEL. Ob die Kachel hält, entschied nicht die Anwendung,
   sondern die Schriftmetrik des Betrachters — dieselbe Seite bricht auf
   einem Rechner und trägt auf dem nächsten. Ein Layout, dessen Richtigkeit
   von der installierten Schrift abhängt, ist nicht richtig, sondern
   glücklich.

   Zweiter Befund: `.card-h` und `.card-b` wurden im Markup seit v0.7.8
   verwendet, OHNE dass es dafür eine Regel gab. Beide Container waren
   ungestaltete Blöcke ohne Innenabstand — die Kacheln saßen bündig am
   Kartenrand, was den Eindruck erzeugt, sie liefen aus der Karte heraus.

   Dritter Befund: Acht Kacheln in `repeat(auto-fit, minmax(170px, 1fr))`
   ergaben je nach Breite 6+2, 5+3 oder 3+3+2. Eine Reihe mit sechs und
   eine mit zwei Kacheln ist keine Ordnung, sondern ein Rest.
   ============================================================ */

/* --- Die fehlenden Kartenregeln ----------------------------------------
   Kopf und Rumpf einer Karte. Der Kopf trägt Titel, Hilfstext und
   Handlungen in EINER Zeile, die bei schmaler Fläche umbricht — nicht
   ineinandergequetscht, sondern untereinander. */
.card-h{display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px 18px;flex-wrap:wrap;padding:14px 18px 12px;
  border-bottom:1px solid var(--grid)}
.card-h h2{font-size:15px;font-weight:750;letter-spacing:-.01em;
  line-height:1.25}
/* Der Hilfstext gehört zum Titel, nicht neben die Handlungen: Er bricht
   deshalb unter ihn und nicht in die Knopfspalte. */
.card-h>h2+.muted{flex:1 1 100%;order:2;margin-top:-2px}
.card-h .card-akt{margin-left:auto;order:1;display:flex;gap:8px;
  flex-wrap:wrap;align-items:center}
.card-b{padding:14px 18px 16px;min-width:0}
/* Eine Karte, deren Rumpf selbst scrollt, braucht den Abstand innen am
   Inhalt — sonst klebt die erste Spalte am Rand des Scrollbereichs. */
.card-b.card-b-flush{padding:0}

/* --- Bei schmaler Fläche wandert die Handlung unter den Titel ---------- */
@media (max-width:640px){
  .card-h{flex-direction:column;align-items:stretch}
  .card-h .card-akt{margin-left:0;order:3;width:100%}
  .card-h .card-akt .btn{width:100%;justify-content:center}
}

/* --- KPI-Kacheln: bewusste Matrix statt Restverteilung -----------------
   Acht Kacheln, vier je Reihe: zwei volle Reihen statt einer vollen und
   einem Rest. Die Spaltenzahl ist ausdrücklich gesetzt und nicht dem
   `auto-fit` überlassen — `minmax(0,1fr)` statt `minmax(170px,1fr)`, weil
   eine Mindestbreite in Pixeln genau das ist, was die Kachel bei langem
   Text sprengt. */
.kpi-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1240px){.kpi-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:960px){.kpi-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.kpi-tiles{grid-template-columns:minmax(0,1fr)}}

/* `min-width:0` ist hier keine Feinheit, sondern die Bedingung dafür, dass
   die Regel überhaupt greift: Ein Grid-Kind hat `min-width:auto` und wird
   von seinem längsten nicht umbrechbaren Inhalt aufgebläht — die Spalte
   wächst dann über `1fr` hinaus und schiebt die Nachbarn hinaus.
   `overflow-wrap:anywhere` fängt den Rest: ein einzelnes langes Wort
   bricht, statt zu ragen. */
.kpi-tiles>.stat{min-width:0;display:flex;flex-direction:column;
  justify-content:flex-start;padding:11px 13px 12px}
.kpi-tiles>.stat .lbl{overflow-wrap:anywhere;hyphens:auto}
.kpi-tiles>.stat .val{overflow-wrap:anywhere;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  margin-top:3px;line-height:1.2}

/* Der Zusatz steht UNTER dem Wert, nicht daneben — §20. Damit hat er die
   volle Kachelbreite und braucht kein `nowrap` mehr, das ihn vorher aus der
   Kachel trug. Kleiner und ruhiger, weil er nachrangig ist. */
.kpi-tiles>.stat .perf-nz-zus{white-space:normal;margin-left:0;
  font-size:11px;line-height:1.3;color:var(--ink-3);overflow-wrap:anywhere}
.kpi-tiles>.stat .perf-unb{font-size:15px;border-bottom:0}

/* Gleich hohe Kacheln je Reihe — über `align-items:stretch` des Gitters,
   nicht über eine feste Höhe. Eine feste Höhe schnitte genau den Text ab,
   um dessen Sichtbarkeit es hier geht. */
.kpi-tiles{align-items:stretch}
.kpi-tiles>.stat{min-height:74px}

/* --- Abschnittskopf mit Handlung (Spiel für Spiel) --------------------- */
.perf-abschnitt-akt{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* --- Tabelle: die Handlungsspalte bekommt ihren Platz ------------------
   Keine festen Breiten. Die Handlungsspalte darf nur nicht umbrechen und
   nicht schrumpfen; der Gegner darf den gewonnenen Raum nehmen. */
table.tbl td.perf-akt,table.tbl th.perf-akt{width:1%;white-space:nowrap;
  text-align:right;padding-right:14px}
table.tbl td.perf-akt .btn-link{display:inline-block;padding:4px 2px}
table.tbl .perf-sp-gegner{min-width:0}
table.tbl .perf-sp-datum,table.tbl .perf-sp-ha{white-space:nowrap;width:1%}

/* --- Aufgeklappter Bereich: sichtbar zur Zeile gehörig ----------------- */
tr.perf-auf>td{border-left:3px solid var(--brand);padding:0}
.perf-auf-inner{border-radius:0 0 8px 8px}
@media (max-width:900px){
  .perf-auf-inner{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .perf-auf-inner{grid-template-columns:minmax(0,1fr)}
}

/* --- Mobil: die Tabelle wird zu Karten --------------------------------
   Eine zehnspaltige Tabelle auf 390 px zusammenzudrücken ergibt keine
   Tabelle mehr, sondern eine Spalte aus abgeschnittenen Wörtern. Gemessen
   im Bestand: Die Tabelle blieb 1042 px breit in einem 352 px breiten
   Bereich — alles rechts von „Spielzustand" war nur durch waagerechtes
   Schieben erreichbar, einschließlich der Schaltfläche „Details".

   Stattdessen wird jede Zeile zu einer Karte. Die Spaltenüberschrift steht
   über `data-label` am Feld und wird hier davorgesetzt: Keine Angabe geht
   verloren, sie steht nur untereinander. */
/* --- Die Staffel, gemessen statt geschätzt ----------------------------
   Die Einsatztabelle ist rund 1084 px breit. Verfügbar sind: Fensterbreite
   minus 242 px Seitenleiste minus 68 px Innenabstand. Daraus folgt, wann
   welche Darstellung trägt:

     1280 px Fenster -> 970 px verfügbar  ->  1084 px passen NICHT
     1024 px Fenster -> 714 px verfügbar  ->  passen deutlich nicht
      768 px Fenster -> 730 px verfügbar  ->  passen nicht

   Gemessen vor dieser Regel: Bei 1280 und 1024 war „Details" nur durch
   waagerechtes Schieben erreichbar — die Schaltfläche lag außerhalb des
   sichtbaren Bereichs ihrer Hülle. Das ist kein Schönheitsfehler: Die
   einzige Handlung der Zeile war nicht auffindbar.

   Zwei Stufen statt einer:
     1101–1400 px  Wettbewerb und Heim/Auswärts entfallen in der TABELLE.
                   Beide stehen im aufgeklappten Bereich — geschichtet,
                   nicht gelöscht. 1084 − 110 − 70 ≈ 904 px passen in 970.
     bis 1100 px   Jede Zeile wird zu einer Karte. Eine zehnspaltige Tabelle
                   auf 714 px ergibt keine Tabelle mehr, sondern eine Spalte
                   aus abgeschnittenen Wörtern.
*/
@media (max-width:1400px){
  .perf-tabelle table.tbl th.perf-sp-wettb,
  .perf-tabelle table.tbl td.perf-sp-wettb,
  .perf-tabelle table.tbl th.perf-sp-ha,
  .perf-tabelle table.tbl td.perf-sp-ha{display:none}
}

@media (max-width:1100px){
  .perf-tabelle table.tbl,.perf-tabelle thead,.perf-tabelle tbody,
  .perf-tabelle th,.perf-tabelle td,.perf-tabelle tr{display:block}
  .perf-tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .perf-tabelle tbody tr.perf-zeile{border:1px solid var(--grid);
    border-radius:10px;margin-bottom:10px;padding:10px 12px;
    background:var(--card)}
  /* In der Kartendarstellung ist Platz — die beiden Spalten, die der
     Tabelle zu breit waren, kommen hier zurück. */
  .perf-tabelle table.tbl td.perf-sp-wettb,
  .perf-tabelle table.tbl td.perf-sp-ha{display:flex}
  .perf-tabelle tbody tr.perf-zeile td{border:0;padding:3px 0;
    display:flex;gap:12px;align-items:baseline;justify-content:space-between;
    text-align:right}
  .perf-tabelle tbody tr.perf-zeile td::before{
    content:attr(data-label);color:var(--ink-3);font-size:11px;
    letter-spacing:.04em;text-transform:uppercase;font-weight:650;
    text-align:left;flex:0 0 auto}
  /* Das Datum trägt die Karte — es steht oben, groß, ohne Beschriftung. */
  .perf-tabelle tbody tr.perf-zeile td.perf-sp-datum{font-size:14px;
    font-weight:700;padding-bottom:6px;margin-bottom:4px;
    border-bottom:1px solid var(--grid)}
  .perf-tabelle tbody tr.perf-zeile td.perf-sp-datum::before{content:none}
  .perf-tabelle tbody tr.perf-zeile td.perf-akt{justify-content:flex-end;
    padding-top:8px;margin-top:4px;border-top:1px solid var(--grid);
    width:auto;text-align:right}
  .perf-tabelle tbody tr.perf-zeile td.perf-akt::before{content:none}
  .perf-tabelle tbody tr.perf-auf td{padding:0;border-left:3px solid var(--brand)}
  .perf-tabelle tbody tr.perf-auf td::before{content:none}
  .perf-tabelle .card-b{overflow-x:visible}
}

/* --- Typografie und Rhythmus ------------------------------------------
   `h2` lief bisher auf den Vorgabewert des Browsers (21,75 px, fett, ohne
   Abstandsregel) und war damit größer als die Seitenüberschrift `h1`
   (21 px). Die Abschnittsüberschrift ist der Seitenüberschrift
   untergeordnet, nicht gleichrangig. */
.perf-kopf{margin-bottom:16px}
.card+.card{margin-top:0}

/* --- Dialog „Neuen Einsatz anlegen" (v0.7.10) -------------------------- */
.perf-neu-abschnitt{font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;
  margin:18px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--grid)}
.perf-neu-abschnitt:first-of-type{margin-top:12px}

.perf-neu-filter{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 12px;
  margin-bottom:10px}
.perf-neu-filter .fld{margin:0;min-width:0}

/* Die Spielliste scrollt in sich. Eine Saison hat mehr Spiele, als in einen
   Dialog passen — und der Dialog darf nicht länger werden als der Bildschirm,
   sonst ist die Schaltfläche unten nicht mehr erreichbar. */
.perf-neu-spiele{max-height:230px;overflow-y:auto;border:1px solid var(--grid);
  border-radius:10px;background:var(--page)}
.perf-neu-spiel{display:grid;
  grid-template-columns:auto 96px minmax(0,1fr) auto;gap:4px 10px;
  align-items:center;padding:8px 12px;cursor:pointer;
  border-bottom:1px solid var(--grid)}
.perf-neu-spiel:last-child{border-bottom:0}
.perf-neu-spiel:hover{background:var(--card2)}
.perf-neu-spiel:focus-within{outline:2px solid var(--series-1);
  outline-offset:-2px}
.perf-neu-sp-datum{font-variant-numeric:tabular-nums;font-weight:650;
  white-space:nowrap}
.perf-neu-sp-gegner{font-weight:650;min-width:0;overflow-wrap:anywhere}
/* Die Nebenangaben stehen in der zweiten Zeile über die volle Breite —
   nebeneinander drängten sie den Gegnernamen zusammen, und genau der ist
   die Angabe, an der eine Nutzerin das Spiel erkennt. */
.perf-neu-sp-meta{grid-column:2/-1;color:var(--ink-3);font-size:11.5px;
  min-width:0;overflow-wrap:anywhere}
.perf-neu-spiel.ist-belegt{opacity:.55;cursor:not-allowed}
.perf-neu-spiel.ist-belegt:hover{background:transparent}
.perf-neu-treffer{margin:6px 2px 0}

/* „Noch keine Angabe" — der vierte Zustand der Schalter, benannt statt
   unsichtbar. */
.perf-neu-leer{font-size:11px;color:var(--ink-3);margin-top:4px}

.perf-neu-zahl{min-width:0}
.perf-neu-unb{display:flex;align-items:center;gap:6px;margin-top:5px;
  font-size:11px;color:var(--ink-3);cursor:pointer;font-weight:400;
  letter-spacing:0;text-transform:none}
.perf-neu-unb input{width:13px;height:13px;accent-color:var(--brand)}
.perf-neu-zahl .inp:disabled{opacity:.5}

/* Die frisch angelegte Zeile kurz hervorheben — sonst sucht die Nutzerin
   in einer Liste von dreißig Spielen nach ihrem eigenen Eintrag. */
@keyframes perf-neu-blink{
  0%{background:var(--brand-tint)}100%{background:transparent}
}
tr.perf-neu-markiert td{animation:perf-neu-blink 2.8s ease-out 1}

@media (max-width:640px){
  .perf-neu-spiel{grid-template-columns:auto minmax(0,1fr)}
  .perf-neu-sp-meta{grid-column:1/-1}
  .perf-neu-spiele{max-height:44vh}
}

/* ===================================================================
   v0.8.0 · CAPTAIN AI WORKSPACE
   ===================================================================
   §65 · Kein Design-System-Rewrite. Alles hier nutzt die bestehenden
   Tokens (--surface, --border, --muted, --brand …), die bestehende
   Buttonfamilie und die bestehenden Abstände. Neu ist die RUHE, nicht
   die Sprache: mehr Weißraum, weniger gleichzeitige Flächen.

   §101 · Bei 1440x900 müssen Captain, Composer und Gesprächsfläche ohne
   Scrollen sichtbar sein. Die Höhenrechnung steht deshalb an der Shell
   und nicht an den Kindern — `min-height:0` in der Kette ist der Grund,
   warum der Verlauf scrollt und nicht die Seite.
   =================================================================== */

/* Die Shell RECHNET ihre Höhe nicht, sie FÜLLT die vorhandene.
   Der erste Entwurf stand auf `calc(100vh - 150px)`, und die Zahl war
   geraten: Gemessen ergaben Topbar (57), Abstand und Innenabstand der
   Ansicht (33+12) sowie die Fußzeile (52) zusammen 181 — die Seite
   scrollte um 31 Pixel, und §101 war rot.

   Eine Zahl wäre außerdem beim nächsten Breakpoint wieder falsch
   gewesen. Die Kette `.app → .main → .view` ist im Bestand bereits ein
   Flex-Spalten-Layout; sie muss nur für diese Routen begrenzt werden,
   damit `flex:1` etwas zu verteilen hat. `min-height:0` ist dabei der
   entscheidende Teil: Ohne ihn wächst ein Flex-Kind über seinen Anteil
   hinaus, und der Verlauf schöbe den Composer aus dem Bild.

   Begrenzt wird AUSSCHLIESSLICH über `body[data-chat]`, das die beiden
   Gesprächsansichten setzen. Über `data-route="captain"` zu gehen wäre
   naheliegend und falsch: Dieselbe Route trägt `#/captain/legacy` und
   `#/captain/{mission_id}` — das Cockpit und die Auftragsdetails würden
   abgeschnitten. */
body[data-chat] .app{height:100vh; overflow:hidden}
body[data-chat] .view{display:flex; flex-direction:column; min-height:0;
  overflow:hidden}
.chat-shell{display:flex; flex-direction:column; min-height:0; flex:1;
  max-width:none}
.chat-haupt{display:flex; flex-direction:column; min-height:0; flex:1;
  width:100%; max-width:820px; margin:0 auto}

/* -- Startfläche (§16/§53) ------------------------------------------- */
.chat-shell-start .chat-haupt{justify-content:center}
.chat-start{display:flex; flex-direction:column; align-items:center;
  gap:18px; padding:0 16px; width:100%}
.chat-start-titel{font-size:32px; font-weight:600; letter-spacing:-.02em;
  margin:0; color:var(--ink)}
.chat-start-frage{font-size:17px; color:var(--ink-2); margin:0 0 6px}
.chat-vorschlaege{display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center; max-width:760px}
.chat-vorschlag{background:var(--card2); border:1px solid var(--line);
  color:var(--ink-2); border-radius:999px; padding:8px 14px; font-size:13px;
  cursor:pointer; font-family:inherit; text-align:left; line-height:1.35}
.chat-vorschlag:hover{border-color:var(--brand); color:var(--ink)}
.chat-vorschlag:focus-visible{outline:2px solid var(--brand);
  outline-offset:2px}

/* -- Kopf eines Gesprächs -------------------------------------------- */
.chat-kopf{display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; padding:0 4px 12px; border-bottom:1px solid var(--line);
  flex-wrap:wrap}
.chat-titel{font-size:18px; font-weight:600; margin:0; line-height:1.3;
  min-width:0; overflow-wrap:anywhere}
/* v0.8.0 Phase 10 · Dieselbe Regel für die Projektüberschrift.
   Beide tragen NUTZERTEXT von bis zu 200 Zeichen, und ein Titel darf ein
   einziges langes Wort sein. Ohne `overflow-wrap` bleibt der KASTEN der
   Überschrift im Rahmen, während der TEXT herausläuft — deshalb hat die
   Elementmessung diesen Fall nicht gefunden, sondern erst der
   Seitenüberlauf. Gemessen bei 1024 px mit einem Titel aus 71 Zeichen
   ohne Trennstelle: 240 px, und die Seite ließ sich seitwärts schieben.
   Bei 768 und 390 px war der Überlauf beschnitten, der Inhalt also
   unerreichbar. */
.projekt-titel{min-width:0; overflow-wrap:anywhere}
.projekt-text{overflow-wrap:anywhere}
.chat-kopf-aktionen{display:flex; gap:6px; flex-wrap:wrap}

/* -- Verlauf (§18) ---------------------------------------------------- */
.chat-verlauf{flex:1; min-height:0; overflow-y:auto; padding:18px 4px;
  display:flex; flex-direction:column; gap:20px}
.msg{display:flex; flex-direction:column; gap:6px; max-width:100%}
.msg-kopf{font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3)}
.msg-inhalt{font-size:15px; line-height:1.6; overflow-wrap:anywhere;
  white-space:pre-wrap}
/* §18 · Keine bunten Blasen. Die Nutzerzeile ist zurückhaltend abgesetzt,
   die Antwort dominiert lesbar — das ist ein Arbeitskontext, kein
   Messenger. */
.msg-user .msg-inhalt{background:var(--card2); border:1px solid var(--line);
  border-radius:10px; padding:10px 14px; color:var(--ink-2)}
.msg-captain .msg-inhalt{color:var(--ink)}
.msg-fehler .msg-inhalt{color:var(--ink-2); border-left:3px solid var(--line);
  padding-left:12px}

/* -- Quellen (§21/§49) ------------------------------------------------ */
.msg-quellen{margin-top:2px}
.msg-quellen>summary{font-size:12px; color:var(--ink-3); cursor:pointer;
  list-style:none; display:inline-block; padding:2px 0}
.msg-quellen>summary::-webkit-details-marker{display:none}
.msg-quellen>summary:hover{color:var(--brand-ink)}
.msg-quellen ul{margin:6px 0 0; padding-left:18px; font-size:13px;
  color:var(--ink-2)}

/* -- Artefakte (§19/§20) ---------------------------------------------- */
.artefakt{margin-top:10px; border:1px solid var(--line); border-radius:10px;
  background:var(--card); padding:14px; overflow-x:auto}
.artefakt-titel{font-size:12px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-3); margin-bottom:10px}
.artefakt-werte{display:grid; grid-template-columns:auto 1fr; gap:6px 18px;
  margin:0; font-size:14px}
.artefakt-werte dt{color:var(--ink-3)}
.artefakt-werte dd{margin:0; color:var(--ink)}
/* §22 · „Nicht erfasst" ist eine Aussage, keine leere Zelle — und sie
   sieht anders aus als ein Wert, damit niemand sie überliest. */
.artefakt-werte dd.wert-unbekannt{color:var(--ink-3); font-style:italic}
.artefakt-tbl{width:100%; margin:0}
.artefakt-mehr{font-size:12px; color:var(--ink-3); margin-top:8px}
.artefakt-liste{margin:0; padding-left:18px; font-size:14px;
  color:var(--ink-2)}
.artefakt-gruppe{margin-bottom:10px}
.artefakt-gruppe-titel{font-size:12px; color:var(--ink-3); margin-bottom:4px}
.artefakt-zeile{font-size:14px; margin-bottom:6px}
.artefakt-offen{color:var(--ink-3)}
.artefakt-aktionen{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}

/* -- Composer (§17) --------------------------------------------------- */
.composer{border:1px solid var(--line); border-radius:12px;
  background:var(--card); padding:10px 12px; width:100%;
  display:flex; flex-direction:column; gap:8px}
.composer:focus-within{border-color:var(--brand)}
.composer-gross{padding:14px 16px}
.composer-text{width:100%; border:0; background:transparent; color:var(--ink);
  font-family:inherit; font-size:15px; line-height:1.55; resize:none;
  outline:none; min-height:44px; max-height:200px}
.composer-text::placeholder{color:var(--ink-3)}
.composer-leiste{display:flex; align-items:center; gap:10px}
.composer-upload{background:transparent; border:1px solid var(--line);
  border-radius:8px; color:var(--ink-2); width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; flex:none}
.composer-upload:hover:not(:disabled){border-color:var(--brand);
  color:var(--brand-ink)}
.composer-upload:disabled{opacity:.5; cursor:default}
.composer-hinweis{font-size:11px; color:var(--ink-3); flex:1; min-width:0}
.composer-send{flex:none}
.composer-send:disabled{opacity:.55; cursor:default}

/* -- Seitenleiste: neues Gespräch und Liste (§15/§52) ----------------- */
.nav-neu{display:block; margin:0 10px 12px; padding:9px 12px;
  border:1px solid var(--brand); border-radius:8px; color:var(--brand-ink);
  font-size:13px; font-weight:600; text-align:center; cursor:pointer}
.nav-neu:hover{background:var(--brand-tint)}
.nav-gruppe{display:flex; align-items:center; justify-content:space-between;
  width:calc(100% - 20px); margin:8px 10px 2px; padding:6px 8px;
  background:transparent; border:0; color:var(--side-text-2);
  font-family:inherit; font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; cursor:pointer; border-radius:6px}
.nav-gruppe:hover{color:var(--side-text); background:rgba(255,255,255,.04)}
.nav-gruppe:focus-visible{outline:2px solid var(--brand); outline-offset:1px}
.nav-gruppe-pfeil{font-size:10px}
.nav-chats{padding:0 4px}
.chat-gruppe{margin-bottom:10px}
.chat-gruppe-titel{font-size:10px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--side-text-3); padding:0 12px 4px}
.chat-eintrag{display:flex; align-items:center; gap:6px; padding:6px 12px;
  color:var(--side-text-2); font-size:13px; border-radius:6px;
  margin:0 6px; text-decoration:none}
.chat-eintrag:hover{background:rgba(255,255,255,.05); color:var(--side-text)}
.chat-eintrag.active{background:var(--brand-tint); color:var(--brand-ink)}
.chat-eintrag-titel{overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; flex:1; min-width:0}
.chat-pin{color:var(--brand); flex:none}
.chat-projekt{font-size:9px; border:1px solid var(--side-line);
  border-radius:4px; padding:0 3px; color:var(--side-text-3); flex:none}
.chat-liste-leer{font-size:12px; color:var(--side-text-3); padding:4px 12px}

/* -- Seiten (Projekte, Handlungsbedarf, Bibliothek) ------------------- */
.seite{max-width:920px; margin:0 auto}
.seiten-kopf{margin-bottom:22px}
.seiten-kopf h1{font-size:22px; font-weight:600; margin:0 0 6px}
.seiten-sub{color:var(--ink-2); font-size:14px; margin:0}
.abschnitt{font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3); margin:26px 0 10px; font-weight:600}
.liste{margin:0; padding-left:18px; font-size:14px; line-height:1.9}
.leerflaeche{text-align:center; padding:48px 16px; color:var(--ink-2)}
.leerflaeche .btn{margin-top:14px}
.karte.att-karte{border:1px solid var(--line); border-radius:10px;
  background:var(--card); padding:14px; margin-bottom:10px}
/* v0.8.0 Phase 10 · Titel und Einschätzung einer Handlungsbedarfskarte
   kommen aus dem Bestand (Vertragstitel, Spielername, Freigabegegenstand)
   und können ein einzelnes langes Wort sein. Ohne `overflow-wrap` bleibt
   der Kasten im Rahmen, während der Text herausläuft; bei 390 px war der
   Überlauf beschnitten — 294 px Inhalt waren damit unerreichbar, nicht
   nur schwer erreichbar. Dieselbe Regel wie beim Gesprächstitel. */
.att-titel{font-weight:600; margin-bottom:6px; overflow-wrap:anywhere}
.att-text{color:var(--ink-2); font-size:14px; margin-bottom:10px;
  overflow-wrap:anywhere}
.att-beitraege li{overflow-wrap:anywhere}
.att-aktionen{display:flex; gap:8px; flex-wrap:wrap}
.bibliothek-hinweis{margin-top:28px; font-size:13px}

/* ===================================================================
   §55 · Responsive
   ===================================================================
   Die Grenzen folgen den bestehenden Breakpoints. Entscheidend ist der
   Composer: Er muss auf jedem Gerät erreichbar bleiben, ohne dass die
   Seite waagerecht läuft. */
@media (max-width:1024px){
  .chat-haupt{max-width:100%}
}
@media (max-width:768px){
  .chat-start-titel{font-size:26px}
  .chat-start-frage{font-size:15px}
  .chat-vorschlaege{flex-direction:column; width:100%}
  .chat-vorschlag{width:100%}
  .chat-kopf-aktionen{width:100%}
  /* §55 · Tabellen in Artefakten laufen auf schmalen Geräten in einer
     kontrollierten Fläche, nicht über den Seitenrand. */
  .artefakt{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .artefakt-tbl{min-width:420px}
}
@media (max-width:480px){
  .chat-verlauf{padding:14px 0; gap:16px}
  .composer{border-radius:10px}
  .composer-hinweis{display:none}
  .artefakt-werte{grid-template-columns:1fr; gap:2px 0}
  .artefakt-werte dt{margin-top:8px}
}

/* §56 · Accessibility: sichtbarer Fokus überall dort, wo diese Welle
   neue bedienbare Flächen einführt. Der Bestand hat die Regel, die neuen
   Klassen brauchen sie ausdrücklich. */
.chat-eintrag:focus-visible, .nav-neu:focus-visible,
.composer-upload:focus-visible, .msg-quellen>summary:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px}

/* Bewegungsreduktion respektieren — die Fläche hat keine Animationen,
   aber das automatische Scrollen ans Ende ist eine. */
@media (prefers-reduced-motion:reduce){
  .chat-verlauf{scroll-behavior:auto}
}

/* §35 · Die globale Suche bleibt für Power User erreichbar, steht aber
   nicht mehr als zweite große Eingabe neben dem Composer.

   Beim Rauchtest dieser Phase war genau das zu sehen: ein 420 Pixel
   breites Feld mit „Suchen oder beauftragen …" in der Kopfleiste,
   während zwei Fingerbreit darunter der Composer dieselbe Einladung
   aussprach. Zwei Felder, die beide nach einem Auftrag fragen, sind
   keine doppelte Möglichkeit, sondern eine offene Frage an die Nutzerin,
   welches das richtige ist.

   Der Wortlaut ändert sich mit: „Suchen" sagt, was das Feld tut.
   „Beauftragen" tut jetzt der Composer. */
body[data-chat] .gsearch-kompakt, .gsearch-kompakt{flex:0 1 240px;
  min-width:150px}
.gsearch-kompakt .gsearch-inp::placeholder{color:var(--ink-3)}
@media (max-width:768px){
  .gsearch-kompakt{flex:0 1 160px; min-width:110px}
}

/* ==========================================================================
   v0.8.0 Phase 5 · Unterlagen im Gespräch (§23, §104)
   ==========================================================================
   Keine zweite Designbibliothek (§65): Die Chips nutzen dieselben Tokens,
   Radien und Abstände wie die Statuspillen. Sie sind bewusst leise — eine
   angehängte Datei ist ein Nebensatz zur Frage, nicht ihr Gegenstand. */
.composer-anhaenge{display:flex; flex-wrap:wrap; gap:6px;
  margin:0 0 8px; padding:0 0 8px; border-bottom:1px solid var(--line)}
.anhang-chip{display:inline-flex; align-items:center; gap:8px;
  max-width:100%; padding:4px 6px 4px 10px; border:1px solid var(--line);
  border-radius:999px; background:var(--card2); font-size:12px;
  line-height:1.3}
.anhang-chip-name{font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:220px}
.anhang-chip-art{color:var(--ink-3)}
.anhang-chip-weg{border:0; background:transparent; color:var(--ink-3);
  cursor:pointer; font-size:15px; line-height:1; padding:2px 6px;
  border-radius:999px}
.anhang-chip-weg:hover{color:var(--ink); background:var(--line)}
.anhang-chip-fest{padding-right:10px}
.msg-anhaenge{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.msg-user .anhang-chip-fest{background:transparent}

@media (max-width:480px){
  .anhang-chip-name{max-width:130px}
}
.anhang-chip-weg:focus-visible{outline:2px solid var(--brand);
  outline-offset:2px}

/* ==========================================================================
   v0.8.0 Phase 6 · Antwortvertrag (§21, §48, §81)
   ==========================================================================
   §48 · Das Etikett an der Karte sagt, WAS die Angabe ist. Es ist bewusst
   leise gesetzt — es soll die Zahl einordnen, nicht mit ihr konkurrieren —
   und nur die Annahme trägt Farbe: Sie ist die einzige der vier Arten, bei
   der eine Nutzerin etwas nachsehen sollte, bevor sie sich stützt. */
.artefakt-huelle{position:relative}
.artefakt-art{display:inline-block; margin:0 0 6px; padding:2px 8px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--card2); color:var(--ink-3);
  font-size:11px; letter-spacing:.02em; text-transform:uppercase}
.artefakt-art-annahme{border-color:var(--warn, var(--line));
  color:var(--ink-2)}
.artefakt-art-einschaetzung{color:var(--ink-2)}

/* Ein Defekt wird benannt, nicht verschwiegen. Er sieht deshalb aus wie
   eine Feststellung und nicht wie ein Alarm — die Auskunft darüber ist
   vollständig, es fehlt nur ihre Darstellung. */
.artefakt-defekt{border:1px dashed var(--line); border-radius:10px;
  padding:10px 12px; color:var(--ink-3); font-size:13px}

/* §21 · Die Art der Quelle steht vor ihrer Bezeichnung: „Spieler Hartwig"
   ist nachprüfbar, „Hartwig" allein verlangt zu wissen, was gemeint war. */
.msg-quellen .quelle-art{color:var(--ink-3); font-size:12px}

/* ==========================================================================
   v0.8.0 Phase 7 · Die Arbeitsakte (§29, §30)
   ==========================================================================
   Die Akte ist eine Arbeitsfläche, keine Anzeige: Was sich ändern lässt,
   muss sichtbar änderbar sein. Die Aktionen stehen deshalb beim Titel und
   nicht in einem Menü — und „Lösen" steht an der Zeile, zu der es gehört. */
.projekt-aktionen{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.projekt-art{display:inline-block; min-width:96px; color:var(--ink-3);
  font-size:12px; text-transform:uppercase; letter-spacing:.02em}
.liste li .projekt-loesen{margin-left:10px; color:var(--ink-3);
  font-size:12px}
.liste li .projekt-loesen:hover{color:var(--ink)}
@media (max-width:480px){
  .projekt-art{display:block; min-width:0; margin-bottom:2px}
  .liste li .projekt-loesen{margin-left:0; display:block; margin-top:2px}
}

/* ==========================================================================
   v0.8.0 Phase 8 · Handlungsbedarf (§32, §33)
   ==========================================================================
   Die Karte trägt jetzt, was sie immer trug: Kategorie, Frist, Einschätzung
   und die Beiträge der Fachagenten. Die Hierarchie ist dabei umgekehrt zur
   Lesereihenfolge einer Tabelle — zuerst WORUM es geht (Kategorie), dann
   WAS (Titel), dann WARUM es zählt (Einschätzung). */
.att-kopf{display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:6px}
.att-kategorie{color:var(--ink-3); font-size:11px; letter-spacing:.04em;
  text-transform:uppercase}
.att-frist{color:var(--ink-2); font-size:12px; white-space:nowrap}
.att-beitraege{margin:8px 0 0; padding-left:18px; color:var(--ink-2);
  font-size:13px}
.att-beitraege li{margin:2px 0}
.att-karte .att-aktionen{margin-top:12px}

@media (max-width:480px){
  .att-kopf{flex-direction:column; gap:2px}
  .att-frist{white-space:normal}
}

/* ============ v0.8.0 FINAL COMPLETION · Laufende Vorgänge im Gespräch ====
   Bewusst KEINE neuen Farben, keine neue Typografie, keine neue
   Komponentenbibliothek (§41 des Auftrags). Es werden ausschließlich
   vorhandene Marken (`--card`, `--line`, `--ink-2`, `--brand`) benutzt und
   die Abstände der bestehenden Artefaktkarten gespiegelt. */
.laufend{border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  margin-top:8px; background:var(--card)}
.laufend-kopf{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.laufend-stand{font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3)}
.laufend-stand.laufend-aktiv{color:var(--brand)}
.laufend-schritte{font-size:12px; color:var(--ink-3)}
.laufend-text{margin-top:8px; font-size:14px; line-height:1.55;
  color:var(--ink-2); overflow-wrap:anywhere}
.laufend-abschnitt{margin-top:10px; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3)}
.laufend-liste{margin:6px 0 0; padding-left:18px; font-size:13.5px;
  color:var(--ink-2)}
.laufend-liste li{margin:3px 0; overflow-wrap:anywhere}
.laufend-fundstelle{color:var(--ink-3); font-size:12px}
.laufend-zahlen{display:grid; grid-template-columns:1fr auto; gap:4px 14px;
  margin:10px 0 0; font-size:13.5px}
.laufend-zahlen dt{color:var(--ink-2); min-width:0; overflow-wrap:anywhere}
.laufend-zahlen dd{margin:0; text-align:right; font-variant-numeric:tabular-nums}
.laufend-fehler{margin-top:8px; font-size:13.5px; color:var(--st-warn-deep);
  overflow-wrap:anywhere}
.laufend-vorbehalt{margin-top:10px; font-size:12.5px; color:var(--ink-3);
  overflow-wrap:anywhere}
/* §66 · Auf schmalen Geräten wird die Kennzahlentabelle zur Liste — keine
   Desktoptabelle im Telefonformat. */
@media (max-width:560px){
  .laufend-zahlen{grid-template-columns:1fr}
  .laufend-zahlen dd{text-align:left; color:var(--ink);
    margin:0 0 6px; font-weight:600}
}
.laufend-unbekannt{color:var(--ink-3); font-style:italic; font-size:12.5px}