/* KingFlow — Design-System als Code. Tokens in :root, kein Rohwert in Komponenten (Latte D1). Eine Schriftfamilie, sechs Stufen (D2).
   Hell ist Vorgabe, Dunkel über prefers-color-scheme oder data-thema (D5). Bewegung nur als Antwort auf eine Handlung (D6). */
:root {
  --grund: #f4f6f5; --flaeche: #ffffff; --flaeche-2: #eaeeec; --tinte: #17242b; --tinte-2: #4e5e66; --tinte-3: #5c6c74; --linie: #d5dcdf; --linie-stark: #9fadb3;
  --akzent: #0e6e73; --akzent-tinte: #ffffff; --akzent-hell: #d9eeef; --akzent-dunkel: #0a5357;
  --warn: #9a5200; --warn-hell: #fbe9d2; --fehl: #b3261e; --fehl-hell: #f9dedc; --gut: #1f6b43; --gut-hell: #d8eee1;
  --fokus: #0e6e73;
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 24px; --a6: 32px; --a7: 48px;
  --r: 8px; --r-gross: 14px; --r-rund: 999px;
  --schatten: 0 12px 32px rgba(23, 36, 43, 0.18);
  --t1: 0.8125rem; --t2: 0.9375rem; --t3: 1.0625rem; --t4: 1.25rem; --t5: 1.625rem; --t6: 2.125rem;
  --zh-eng: 1.2; --zh: 1.5;
  --schrift: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --dauer: 160ms; --kurve: cubic-bezier(0.2, 0, 0, 1);
  --leiste: 220px; --inhalt: 1100px; --ziel: 44px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) { --grund: #10161a; --flaeche: #182027; --flaeche-2: #212b33; --tinte: #e8edef; --tinte-2: #aab8be; --tinte-3: #8b9aa1; --linie: #2a363e; --linie-stark: #4a5a63;
  --akzent: #43b3b8; --akzent-tinte: #0b1a1c; --akzent-hell: #163a3d; --akzent-dunkel: #6cc9cd; --warn: #e8a33d; --warn-hell: #3d2a0e; --fehl: #f09389; --fehl-hell: #4a1f1b; --gut: #6cc392; --gut-hell: #173a27; --fokus: #6cc9cd; --schatten: 0 12px 32px rgba(0, 0, 0, 0.5); color-scheme: dark; } }
:root[data-thema="dunkel"] { --grund: #10161a; --flaeche: #182027; --flaeche-2: #212b33; --tinte: #e8edef; --tinte-2: #aab8be; --tinte-3: #8b9aa1; --linie: #2a363e; --linie-stark: #4a5a63;
  --akzent: #43b3b8; --akzent-tinte: #0b1a1c; --akzent-hell: #163a3d; --akzent-dunkel: #6cc9cd; --warn: #e8a33d; --warn-hell: #3d2a0e; --fehl: #f09389; --fehl-hell: #4a1f1b; --gut: #6cc392; --gut-hell: #173a27; --fokus: #6cc9cd; --schatten: 0 12px 32px rgba(0, 0, 0, 0.5); color-scheme: dark; }
@media (prefers-reduced-motion: reduce) { :root { --dauer: 0ms; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--t2)/var(--zh) var(--schrift); color: var(--tinte); background: var(--grund); min-height: 100vh; }
h1, h2, h3 { margin: 0; line-height: var(--zh-eng); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: var(--t5); } h2 { font-size: var(--t4); } h3 { font-size: var(--t3); }
p { margin: 0; } a { color: var(--akzent); text-underline-offset: 0.15em; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.leise { color: var(--tinte-2); } .klein { font-size: var(--t1); } .mono { font-family: var(--mono); font-size: var(--t1); overflow-wrap: anywhere; }
pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.zeile { display: flex; flex-wrap: wrap; gap: var(--a2) var(--a3); align-items: center; }
.abstand { margin-top: var(--a5); } .abstand-klein { margin-top: var(--a3); }

/* Gerüst: Kopf, Bereichsleiste links (Handy: unten), Inhalt */
.kopf { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--a3); min-height: 56px; padding: 0 var(--a4); background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.marke { display: inline-flex; align-items: center; gap: var(--a2); min-height: var(--ziel); font-weight: 700; font-size: var(--t3); color: var(--tinte); text-decoration: none; letter-spacing: -0.02em; }
.marke svg { width: 26px; height: 26px; }
.kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: var(--a2); }
.leiste { position: fixed; left: 0; top: 56px; bottom: 0; width: var(--leiste); padding: var(--a3); border-right: 1px solid var(--linie); background: var(--flaeche); display: flex; flex-direction: column; gap: var(--a1); }
.leiste a { display: flex; align-items: center; gap: var(--a3); min-height: var(--ziel); padding: 0 var(--a3); border-radius: var(--r); color: var(--tinte-2); text-decoration: none; font-weight: 500; }
.leiste a[aria-current="page"] { background: var(--akzent-hell); color: var(--tinte); }
.leiste a:hover { color: var(--tinte); }
.leiste a svg { width: 20px; height: 20px; flex: none; }
.leiste .zahl { margin-left: auto; min-width: 22px; padding: 0 var(--a2); border-radius: var(--r-rund); background: var(--akzent); color: var(--akzent-tinte); font-size: var(--t1); font-weight: 600; text-align: center; }
main { margin-left: var(--leiste); padding: var(--a5) var(--a4) var(--a7); max-width: calc(var(--inhalt) + var(--leiste)); }
.ansicht-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a2) var(--a4); margin-bottom: var(--a4); }
.ansicht-kopf h1 { flex: 1 1 auto; } .ansicht-kopf .handlung { display: flex; flex-wrap: wrap; gap: var(--a2); }
section + section { margin-top: var(--a6); }
@media (max-width: 860px) {
  .leiste { top: auto; bottom: 0; width: 100%; height: auto; flex-direction: row; justify-content: space-around; padding: var(--a1) var(--a2); border-right: 0; border-top: 1px solid var(--linie); overflow-x: auto; }
  .leiste a { flex-direction: column; gap: 2px; min-width: 56px; min-height: var(--ziel); padding: var(--a1); font-size: var(--t1); font-weight: 500; }
  .leiste .zahl { margin: 0; position: absolute; transform: translate(14px, -6px); }
  .leiste a { position: relative; }
  main { margin-left: 0; padding: var(--a4) var(--a4) calc(var(--a7) + 56px); max-width: none; }
}

/* Knöpfe */
.k { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: var(--a2); min-height: var(--ziel); padding: 0 var(--a4); border: 1px solid var(--linie-stark); border-radius: var(--r); background: var(--flaeche); color: var(--tinte); font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; transition: background var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve); }
.k:hover { border-color: var(--tinte-3); } .k:disabled { opacity: 0.5; cursor: default; }
.k-haupt { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-tinte); } .k-haupt:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.k-leise { border-color: transparent; background: transparent; color: var(--akzent); } .k-leise:hover { background: var(--akzent-hell); border-color: transparent; }
.k-gefahr { color: var(--fehl); border-color: var(--fehl); } .k-gefahr:hover { background: var(--fehl-hell); }
.k-klein { padding: 0 var(--a3); font-size: var(--t1); }
.k-symbol { padding: 0; width: var(--ziel); min-width: var(--ziel); flex: none; }
.k svg { width: 18px; height: 18px; }

/* Felder */
.feld { display: grid; gap: var(--a1); } .feld > span { font-size: var(--t1); color: var(--tinte-2); font-weight: 500; }
.feld input, .feld select, .feld textarea { width: 100%; min-height: var(--ziel); padding: var(--a2) var(--a3); border: 1px solid var(--linie-stark); border-radius: var(--r); background: var(--flaeche); color: var(--tinte); font: inherit; }
.feld textarea { min-height: 120px; font-family: var(--mono); font-size: var(--t1); line-height: 1.45; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--akzent); outline: none; box-shadow: 0 0 0 3px var(--akzent-hell); }
.feld .hinweis { font-size: var(--t1); color: var(--tinte-3); }
.formular { display: grid; gap: var(--a4); }
.formular .reihe { display: grid; gap: var(--a4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.formular .fuss { display: flex; justify-content: flex-end; gap: var(--a2); margin-top: var(--a2); }
.fehler-text { color: var(--fehl); font-size: var(--t2); }

/* Stand-Chips: Farbe plus Wort, nie Farbe allein */
.stand { display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--a2); border-radius: var(--r-rund); font-size: var(--t1); font-weight: 500; background: var(--flaeche-2); color: var(--tinte-2); white-space: nowrap; }
.stand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.stand.laeuft, .stand.aktiv, .stand.offen, .stand.in_arbeit { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.stand.fertig, .stand.erledigt, .stand.wirksam, .stand.geschlossen { background: var(--gut-hell); color: var(--gut); }
.stand.fehler, .stand.abgebrochen, .stand.rot, .stand.unwirksam { background: var(--fehl-hell); color: var(--fehl); }
.stand.uebersprungen, .stand.warnung, .stand.umgesetzt, .stand.wartend { background: var(--warn-hell); color: var(--warn); }
:root[data-thema="dunkel"] .stand.laeuft, :root[data-thema="dunkel"] .stand.aktiv, :root[data-thema="dunkel"] .stand.offen, :root[data-thema="dunkel"] .stand.in_arbeit { color: var(--akzent); }
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) .stand.laeuft, :root:not([data-thema="hell"]) .stand.aktiv, :root:not([data-thema="hell"]) .stand.offen, :root:not([data-thema="hell"]) .stand.in_arbeit { color: var(--akzent); } }

/* Listen: Zeilen, keine Karten. Auf dem Handy stapeln die Zellen. */
.liste { width: 100%; border-collapse: collapse; }
.liste th { text-align: left; white-space: nowrap; font-size: var(--t1); font-weight: 500; color: var(--tinte-2); padding: var(--a2) var(--a3); border-bottom: 1px solid var(--linie); }
.liste td.knapp { white-space: nowrap; }
.liste td { padding: var(--a3); border-bottom: 1px solid var(--linie); vertical-align: top; overflow-wrap: anywhere; }
.liste tr:last-child td { border-bottom: 0; }
.liste .titel { font-weight: 600; } .liste .unter { color: var(--tinte-2); font-size: var(--t1); margin-top: 2px; }
.liste .handlung { display: flex; flex-wrap: wrap; gap: var(--a2); justify-content: flex-end; }
.liste a.zeile-link { color: var(--tinte); text-decoration: none; } .liste a.zeile-link:hover { color: var(--akzent); text-decoration: underline; }
@media (max-width: 860px) {
  .liste thead { display: none; }
  .liste, .liste tbody, .liste tr, .liste td { display: block; width: 100%; }
  .liste tr { padding: var(--a3) 0; border-bottom: 1px solid var(--linie); } .liste td { padding: var(--a1) 0; border: 0; }
  .liste .handlung { justify-content: flex-start; margin-top: var(--a2); }
  .liste td[data-l]::before { content: attr(data-l) ": "; color: var(--tinte-2); font-size: var(--t1); }
}
.leer { padding: var(--a5); border: 1px dashed var(--linie-stark); border-radius: var(--r-gross); color: var(--tinte-2); text-align: center; }
.leer strong { display: block; color: var(--tinte); font-weight: 600; margin-bottom: var(--a1); }

/* Die Fristleiste — das eine prägende Element: Zeitschiene von Start bis Fälligkeit mit Marke „jetzt" */
.frist { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--a2); min-width: 140px; }
.frist .schiene { position: relative; height: 6px; border-radius: var(--r-rund); background: var(--flaeche-2); overflow: visible; }
.frist .lauf { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-rund); background: var(--akzent); }
.frist.knapp .lauf { background: var(--warn); } .frist.ueber .lauf { background: var(--fehl); }
.frist .marke { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--tinte); transform: translateX(-1px); }
.frist .text { font-size: var(--t1); color: var(--tinte-2); white-space: nowrap; } .frist.ueber .text { color: var(--fehl); font-weight: 600; } .frist.knapp .text { color: var(--warn); font-weight: 600; }

/* Aufgaben und Meldungen auf „Heute" */
.aufgabe { display: grid; grid-template-columns: 1fr minmax(160px, 220px) auto; gap: var(--a3) var(--a4); align-items: center; padding: var(--a3) 0; border-bottom: 1px solid var(--linie); }
.aufgabe .was { min-width: 0; } .aufgabe .was .titel { font-weight: 600; } .aufgabe .was .unter { color: var(--tinte-2); font-size: var(--t1); }
.aufgabe .tun { display: flex; gap: var(--a2); align-items: center; }
@media (max-width: 860px) { .aufgabe { grid-template-columns: 1fr; } .aufgabe .tun { justify-content: flex-start; } }
.meldung { display: grid; grid-template-columns: auto 1fr auto; gap: var(--a3); align-items: start; padding: var(--a3) 0; border-bottom: 1px solid var(--linie); }
.meldung .wer { padding-top: 2px; } .meldung .text { color: var(--tinte-2); font-size: var(--t1); margin-top: 2px; }
.agent { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--flaeche-2); color: var(--tinte); font-weight: 700; }
.agent.rot { background: var(--fehl-hell); color: var(--fehl); } .agent.warnung { background: var(--warn-hell); color: var(--warn); }

/* Kennzahlen: Zahl groß, Wort klein, keine Dekoration */
.zahlen { margin-bottom: var(--a6); display: grid; gap: var(--a3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.zahl-kachel { padding: var(--a3) var(--a4); border: 1px solid var(--linie); border-radius: var(--r-gross); background: var(--flaeche); }
.zahl-kachel .wert { font-size: var(--t6); font-weight: 600; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.zahl-kachel .wert.schlecht { color: var(--fehl); } .zahl-kachel .wert.gut { color: var(--gut); }
.zahl-kachel .wort { margin-top: var(--a1); color: var(--tinte-2); font-size: var(--t1); }
.diagramm { width: 100%; height: auto; display: block; } .diagramm text { font-family: var(--schrift); font-size: 11px; fill: var(--tinte-2); }
.diagramm .achse { stroke: var(--linie); } .diagramm .linie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.diagramm .punkt { r: 4; stroke: var(--flaeche); stroke-width: 2; }
.legende { display: flex; flex-wrap: wrap; gap: var(--a3); font-size: var(--t1); color: var(--tinte-2); margin-top: var(--a2); }
.legende span::before { content: ""; display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; background: var(--farbe); }

/* Zeichner / Schaubild */
.schaubild { position: relative; height: 420px; border: 1px solid var(--linie); border-radius: var(--r-gross); background: var(--flaeche); touch-action: none; overflow: hidden; }
.schaubild.zeichnen { height: min(70vh, 680px); }
.schaubild .djs-container { background: var(--flaeche); }
.schaubild .djs-visual > :first-child { fill: var(--flaeche-2) !important; stroke: var(--tinte-2) !important; }
.schaubild .djs-visual path, .schaubild .djs-visual polyline { stroke: var(--tinte-2) !important; }
.schaubild .djs-visual path[fill]:not([fill="none"]) { fill: var(--tinte-2) !important; }
.schaubild marker path, .schaubild marker polyline { fill: var(--tinte-2) !important; stroke: var(--tinte-2) !important; }
.sprung { position: absolute; left: var(--a4); top: -60px; z-index: 30; padding: var(--a2) var(--a3); background: var(--akzent); color: var(--akzent-tinte); border-radius: var(--r); }
.sprung:focus { top: var(--a2); }
.schaubild .djs-palette, .schaubild .djs-context-pad { background: var(--flaeche); border-color: var(--linie); }
.schaubild .aktiv .djs-visual > :first-child { stroke: var(--akzent) !important; stroke-width: 3px !important; fill: var(--akzent-hell) !important; }
.schaubild .erledigt .djs-visual > :first-child { stroke: var(--gut) !important; fill: var(--gut-hell) !important; }
.schaubild .fehler .djs-visual > :first-child { stroke: var(--fehl) !important; stroke-width: 3px !important; fill: var(--fehl-hell) !important; }
.schaubild .uebersprungen .djs-visual > :first-child { stroke: var(--tinte-3) !important; stroke-dasharray: 4 3; }
.schaubild svg text { fill: var(--tinte) !important; }

/* Tabs, Dialog, Meldung */
.tabs { display: flex; gap: var(--a1); border-bottom: 1px solid var(--linie); margin-bottom: var(--a4); overflow-x: auto; }
.tabs button { min-height: var(--ziel); padding: 0 var(--a3); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--tinte-2); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--tinte); border-bottom-color: var(--akzent); }
dialog { width: min(560px, calc(100vw - 2 * var(--a4))); padding: var(--a5); border: 0; border-radius: var(--r-gross); background: var(--flaeche); color: var(--tinte); box-shadow: var(--schatten); }
dialog::backdrop { background: rgba(23, 36, 43, 0.45); }
dialog h2 { margin-bottom: var(--a4); }
dialog.breit { width: min(900px, calc(100vw - 2 * var(--a4))); }
.toast { position: fixed; left: 50%; bottom: var(--a5); transform: translateX(-50%); z-index: 20; max-width: min(560px, calc(100vw - 2 * var(--a4))); padding: var(--a3) var(--a4); border-radius: var(--r); background: var(--tinte); color: var(--grund); box-shadow: var(--schatten); }
.toast[hidden] { display: none; }
@media (max-width: 860px) { .toast { bottom: calc(var(--a5) + 64px); } }
summary { display: flex; align-items: center; min-height: var(--ziel); cursor: pointer; color: var(--akzent); }
.chips { display: flex; flex-wrap: wrap; gap: var(--a2); }
.chips button { min-height: var(--ziel); padding: 0 var(--a3); border: 1px solid var(--linie-stark); border-radius: var(--r-rund); background: var(--flaeche); color: var(--tinte-2); font: inherit; font-size: var(--t1); cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--akzent-hell); border-color: var(--akzent); color: var(--tinte); }
.protokoll { display: grid; gap: var(--a2); } .protokoll .eintrag { display: grid; grid-template-columns: 120px 1fr; gap: var(--a3); font-size: var(--t1); } .protokoll .eintrag time { color: var(--tinte-3); font-variant-numeric: tabular-nums; }
.protokoll .eintrag.fehler { color: var(--fehl); } .protokoll .eintrag.ende, .protokoll .eintrag.fertig { color: var(--gut); }
@media (max-width: 860px) { .protokoll .eintrag { grid-template-columns: 1fr; gap: 0; } }
.anmeldung { max-width: 420px; margin: var(--a7) auto; padding: var(--a5); }
.anmeldung .marke { font-size: var(--t5); margin-bottom: var(--a5); }
.schluessel-zeigen { padding: var(--a3); border-radius: var(--r); background: var(--flaeche-2); font-family: var(--mono); font-size: var(--t2); word-break: break-all; user-select: all; }

/* Stapelseite: Balken je Schritt, Fehlergruppen, ausklappbarer Filter */
.balken { display: flex; height: 10px; min-width: 160px; border-radius: var(--r-rund); overflow: hidden; background: var(--flaeche-2); }
.balken i { display: block; height: 100%; } .b-fertig { background: var(--gut); } .b-wartet { background: var(--linie-stark); } .b-haengt { background: var(--warn); } .b-fehler { background: var(--fehl); } .b-abgebrochen { background: var(--tinte-3); }
.liste td.r, .liste th.r { text-align: right; font-variant-numeric: tabular-nums; }
.liste tr.heiss td { background: var(--fehl-hell); }
.gruppe { border: 1px solid var(--linie); border-radius: var(--r-gross); background: var(--flaeche); margin-bottom: var(--a3); }
.gruppe.heiss { border-color: var(--fehl); box-shadow: 0 0 0 3px var(--fehl-hell); }
.gruppe .gz { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--a3); padding: var(--a3) var(--a4); align-items: center; }
.gruppe .n { font-size: var(--t5); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; line-height: 1; }
.gruppe .sig { font-family: var(--mono); font-size: var(--t1); color: var(--tinte-2); margin-top: 2px; overflow-wrap: anywhere; }
.gruppe .unter { color: var(--tinte-2); font-size: var(--t1); margin-top: 2px; }
.gruppe .handlung { display: flex; flex-wrap: wrap; gap: var(--a2); justify-content: flex-end; }
.gruppe .detail { border-top: 1px dashed var(--linie); padding: 0 var(--a4) var(--a3); } .gruppe .detail summary { font-size: var(--t1); } .gruppe .detail pre { padding: var(--a2) var(--a3); border-radius: var(--r); background: var(--flaeche-2); }
@media (max-width: 860px) { .gruppe .gz { grid-template-columns: 1fr; } .gruppe .n { text-align: left; } .gruppe .handlung { justify-content: flex-start; } }
.filter { border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 0 var(--a4); margin-bottom: var(--a4); background: var(--flaeche); }
.filter summary { font-weight: 500; } .filter form { padding-bottom: var(--a4); }

/* Fahnen im Schaubild: jeder Halt ist sichtbar, nicht nur als Farbe (Wort + Grund) */
.schaubild .fahne { position: relative; white-space: nowrap; padding: 3px var(--a2); border-radius: var(--r); font: 500 var(--t1)/1.3 var(--schrift); background: var(--flaeche-2); color: var(--tinte); border: 1px solid var(--linie-stark); box-shadow: var(--schatten); }
.schaubild .fahne::after { content: ""; position: absolute; left: 10px; bottom: -6px; width: 10px; height: 10px; transform: rotate(45deg); background: inherit; border-right: 1px solid; border-bottom: 1px solid; border-color: inherit; }
.schaubild .fahne.achtung { background: var(--fehl); color: var(--flaeche); border-color: var(--fehl); font-weight: 600; }
.schaubild .fahne.wartet { background: var(--flaeche); color: var(--tinte-2); }
.schaubild .fahne.offen { background: var(--akzent-hell); color: var(--tinte); border-color: var(--akzent); }

/* Bestandsaufnahme: Ergebnis nach Ende — Balken je Befund, Anteil in Prozent */
.befund { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--a3); align-items: center; padding: var(--a3) var(--a4); border: 1px solid var(--linie); border-radius: var(--r-gross); background: var(--flaeche); margin-bottom: var(--a2); }
.befund .n { font-size: var(--t5); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; line-height: 1; }
.befund .anteil { height: 8px; border-radius: var(--r-rund); background: var(--flaeche-2); overflow: hidden; margin-top: var(--a2); } .befund .anteil i { display: block; height: 100%; background: var(--akzent); } .befund.gut .anteil i { background: var(--gut); }
.befund .handlung { display: flex; flex-wrap: wrap; gap: var(--a2); justify-content: flex-end; }
@media (max-width: 860px) { .befund { grid-template-columns: 1fr; } .befund .n { text-align: left; } .befund .handlung { justify-content: flex-start; } }

/* Auswertungen: Auswahl-Leiste, Kacheln mit klickbaren Werten (gewählt = Akzent, grau = passt nicht zur Auswahl, wie bei Qlik) */
.auswahl { padding: var(--a3) var(--a4); border: 1px solid var(--linie); border-radius: var(--r-gross); background: var(--flaeche); margin-bottom: var(--a4); align-items: end; }
.auswahl .feld.knapp { min-width: 160px; } .auswahl .feld.knapp input { min-width: 200px; }
.chip { border-color: var(--akzent); background: var(--akzent-hell); color: var(--tinte); }
.kacheln { display: grid; gap: var(--a3); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; margin-bottom: var(--a4); }
.kachel { padding: var(--a3) var(--a4); border: 1px solid var(--linie); border-radius: var(--r-gross); background: var(--flaeche); min-width: 0; }
.kachel.breit { grid-column: 1 / -1; }
.kachel h3 { font-size: var(--t2); font-weight: 600; margin: 0 0 var(--a2); }
.werte { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 420px; overflow-y: auto; }
.werte .wert { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(60px, 1.2fr) auto; gap: var(--a2); align-items: center; width: 100%; min-height: var(--ziel); padding: 0 var(--a2); border: 1px solid transparent; border-radius: var(--r); background: none; color: var(--tinte); font: inherit; font-size: var(--t1); text-align: left; cursor: pointer; }
.werte .wert:hover { background: var(--flaeche-2); } .werte .wert:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.werte .wert .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.werte .wert .balken-aus { height: 10px; border-radius: var(--r-rund); background: var(--flaeche-2); overflow: hidden; } .werte .wert .balken-aus i { display: block; height: 100%; background: var(--akzent); }
.werte .wert .n { font-variant-numeric: tabular-nums; color: var(--tinte-2); min-width: 3ch; text-align: right; }
.werte .wert.gewaehlt { background: var(--akzent-hell); border-color: var(--akzent); font-weight: 600; }
.werte .wert.grau { color: var(--tinte-3); } .werte .wert.grau .balken-aus i { background: var(--linie-stark); }

.filter .filter-zaehler { font-weight: 400; margin-left: var(--a2); }
.filter form .reihe { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* Fehler-Burndown */
.diagramm .offen-flaeche { fill: var(--fehl-hell); opacity: .7; }
.ursachen .wert-zeile { display: block; width: 100%; min-height: var(--ziel); padding: var(--a1) var(--a2); border: 1px solid transparent; border-radius: var(--r); background: none; color: var(--tinte); font: inherit; text-align: left; cursor: pointer; }
.ursachen .wert-zeile:hover { background: var(--flaeche-2); } .ursachen .wert-zeile:focus-visible { outline: 2px solid var(--akzent); }
.ursachen tr.gewaehlt .wert-zeile { background: var(--akzent-hell); border-color: var(--akzent); }
.stand.fehl-stand { background: var(--fehl-hell); color: var(--fehl); } .stand.gut-stand { background: var(--gut-hell); color: var(--gut); } .stand.warn-stand { background: var(--warn-hell); color: var(--warn); }

/* Der erste Tag: Karten mit Haken */
.erster-tag { padding: var(--a4); border: 1px solid var(--akzent); border-radius: var(--r-gross); background: var(--akzent-hell); margin-bottom: var(--a6); }
.erster-tag .zeile { justify-content: space-between; } .erster-tag h2 { margin: 0; }
.karten { display: grid; gap: var(--a3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: var(--a3); }
.karte { display: grid; grid-template-columns: 36px 1fr; gap: var(--a3); padding: var(--a3) var(--a4); border: 1px solid var(--linie); border-radius: var(--r-gross); background: var(--flaeche); }
.karte .nr { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--akzent); color: var(--flaeche); font-weight: 600; }
.karte.fertig { opacity: .75; } .karte.fertig .nr { background: var(--gut); }
.karte p { margin: var(--a1) 0 var(--a2); }
/* Prozess bauen */
.bau-grid { display: grid; gap: var(--a4); grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; }
.bau-liste, .bau-vorschau { padding-left: 0; list-style: none; margin: 0; }
.bau-schritt { border: 1px solid var(--linie); border-radius: var(--r-gross); background: var(--flaeche); padding: var(--a3) var(--a4); margin-bottom: var(--a3); }
.bau-kopf { display: flex; align-items: center; gap: var(--a3); margin-bottom: var(--a3); } .bau-kopf .handlung { margin-left: auto; display: flex; gap: var(--a2); }
.bau-kopf .nr { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--akzent-hell); color: var(--akzent-dunkel); font-weight: 600; font-size: var(--t1); }
.bau-vorschau li { padding: var(--a2) 0; border-bottom: 1px dashed var(--linie); }
@media (max-width: 860px) { .bau-grid { grid-template-columns: 1fr; } }
/* Auswahlleiste: Felder, Auswahlen und Knöpfe gleich hoch und auf einer Grundlinie (Befund GF 07.11.: „Zeitraum" rutschte nach unten) */
.auswahl .feld input, .auswahl .feld select { height: var(--ziel); min-height: var(--ziel); padding-top: 0; padding-bottom: 0; }
.auswahl .feld > span { min-height: 1.3em; display: block; }
.auswahl > .k, .auswahl .chips { align-self: end; } .auswahl > .k { height: var(--ziel); }