/* Design-System "ALBAU Web", uebernommen aus docs/prototyp/ServiceDesk-Prototyp.html:
   Werkbank mit 50px Kopfzeile, Arbeitsflaeche mit Kacheln, Palette ALBAU Web.
   Die Klassen heissen wie im Prototyp, damit Masken von dort ohne Umbenennen herueberkommen.
   Zwei Fassungen, gewaehlt pro Person im Benutzermenue (Hell, Dunkel, System). Das Attribut
   data-theme auf <html> setzt das Skript im Kopf von index.html, bevor das erste Bild steht;
   ohne Attribut gilt Hell.
   Hell: die Palette "ALBAU Web" aus ALBAU (albau-tokens.css, Kontrastdurchgang vom 09.09.2026),
   ein Blau #1F4A80 fuer alle Aktionen. Zuordnung: --line = --albau-line-row (Rahmen von Kacheln
   und Feldern), --line-soft = --albau-line (Linie zwischen Zeilen).
   Dunkel: die Farben des dunklen Designs von Azure DevOps (warme Graustufen der Fluent-Palette,
   Akzent #0078D4). Abgeglichen am 04.11.2026 mit einem Bildschirmfoto des Backlogs: Kopfzeile
   #1F1F1F (--bar), Seitengrund #262422 (--canvas), Inhaltsflaeche #313131 (--surface), linke
   Navigation #3C3A38 (--group). Auf diesen helleren Flaechen sind --text-3, --action-text/--info
   und --crit heller als zuvor, damit sie auch auf --group 4.5:1 halten.
   Die getoenten Flaechen der Badges (--ok-soft, --warn-soft, --crit-soft, --info-soft,
   --plan-soft, --done-soft) sind 18 % ihres Farbtons auf --surface, also etwas heller als Kachel
   und Kachelkopf statt dunkler (sonst wirken sie wie Loecher). Die Statusfarben selbst sind dafuer
   aufgehellt: mindestens 4.6:1 auf der eigenen Flaeche, 5.8:1 auf --surface und --group.
   --action-soft und --selected bleiben bewusst dunkelblau wie die Auswahl in DevOps.
   --action ist die Flaeche (Knopf, Balken), --action-text die Schrift in der Akzentfarbe;
   im Dunkeln ist #0078D4 als Schrift zu schwach, darum dort ein helleres Blau.
   Kontrast (03.11.2026): Schrift mindestens 4.5:1 auf ihrem Grund. Hell sind --ok, --warn und
   --plan dafuer dunkler als in ALBAU; --on-ok und --on-crit sind die Schrift auf den vollen
   Flaechen, im Dunkeln dunkel, weil Weiss auf dem hellen Gruen und Rot nicht lesbar ist.
   --selected ist hell etwas heller als --albau-nav-active (#DCE9F6), dunkel etwas dunkler als
   bisher, damit --text-3 und --action-text auf gewaehlten Zeilen und Tasten 4.5:1 halten. */
:root {
	--bar: #FFFFFF;
	--canvas: #F2F5F8; --panel: #EDF1F5; --surface: #FFFFFF; --group: #F5F8FB; --locked: #EDF1F5;
	--line: #BFCAD6; --line-soft: #CFD8E1;
	--text: #26303C; --text-2: #4C5A70; --text-3: #5F6B78;
	--action: #1F4A80; --action-hover: #12305B; --action-soft: #DCE9F6; --on-action: #FFFFFF; --action-text: #1F4A80;
	--selected: #E3EEF8;
	--ok: #147935; --ok-soft: #DCF2E3; --warn: #926600; --warn-soft: #FFF3D6; --crit: #B23A3A; --crit-soft: #FCEDEB; --info: #28619B; --info-soft: #EDF3F9;
	--on-ok: #FFFFFF; --on-crit: #FFFFFF;
	--plan: #785BA5; --plan-soft: #F0EBF7; --done: #1B6635; --done-soft: #E4F3E9;
	--t-bug: #CC293D; --t-story: #0098C7;
	--overlay: rgba(27, 36, 48, .18);
	--font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--r-sm: 4px; --r-md: 7px; --r-field: 9px; --r-tile: 10px; --r-card: 12px;
	--shadow: 0 1px 2px rgba(27, 36, 48, .06), 0 4px 14px rgba(27, 36, 48, .06);
	--shadow-pop: 0 1px 3px rgba(27, 36, 48, .08), 0 10px 28px rgba(27, 36, 48, .16);
	color-scheme: light;
}

:root[data-theme="dark"] {
	--bar: #1F1F1F;
	--canvas: #262422; --panel: #2B2A28; --surface: #313131; --group: #3C3A38; --locked: #2B2A28;
	--line: #4A4846; --line-soft: #403E3C;
	--text: #F3F2F1; --text-2: #D2D0CE; --text-3: #B3B0AD;
	--action: #0078D4; --action-hover: #106EBE; --action-soft: #0F2B47; --on-action: #FFFFFF; --action-text: #5CACF7;
	--selected: #1D324D;
	--ok: #7EC99F; --ok-soft: #3F4C45; --warn: #DFB35F; --warn-soft: #504839; --crit: #F7A4AB; --crit-soft: #554647; --info: #83C0F9; --info-soft: #404B55;
	--on-ok: #1B1A19; --on-crit: #1B1A19;
	--plan: #CEAFE3; --plan-soft: #4D4851; --done: #6FCC94; --done-soft: #3C4D43;
	--overlay: rgba(0, 0, 0, .45);
	--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
	--shadow-pop: 0 1px 3px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .5);
	color-scheme: dark;
}

* { box-sizing: border-box; scrollbar-width: thin; }
html, body { min-height: 100%; }
html { scrollbar-color: var(--line) transparent; }
body { margin: 0; background: var(--canvas); color: var(--text); font: 500 13px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
.num { font-variant-numeric: tabular-nums; }
a { color: var(--action-text); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1:focus { outline: none; }
/* Nur fuer Screenreader: unsichtbar, aber vorgelesen. */
.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; }

/* Kopfzeile */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.top { height: 50px; background: var(--bar); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 18px; padding: 0 18px; position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.mark { width: 30px; height: 30px; display: block; }
.brand b { font-size: 15.5px; font-weight: 700; }
.brand small { display: block; white-space: nowrap; font-size: 10.5px; color: var(--text-3); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; margin-top: -2px; }
.nav { display: flex; height: 50px; }
.nav a { display: flex; align-items: center; padding: 0 11px; white-space: nowrap; font-weight: 700; font-size: 12.5px; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.nav a.on { color: var(--action-text); border-bottom-color: var(--action-text); }
.nav a .n { margin-left: 6px; font-size: 10px; font-weight: 800; background: var(--crit); color: var(--on-crit); border-radius: 999px; padding: 0 5px; height: 15px; display: inline-flex; align-items: center; }
.who { margin-left: auto; display: flex; align-items: center; gap: 10px; position: relative; }
.who-name { font-weight: 700; white-space: nowrap; color: var(--text-2); }
/* Benutzermenue am Namen, wie das Menue am Kuerzel in ALBAU Web (UserMenu.razor). Die Fangflaeche
   nimmt den Klick daneben und schliesst das Menue, ohne die Arbeit dahinter abzudunkeln. */
.who-trigger { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 4px; border: 1px solid transparent; border-radius: 999px; background: none; cursor: pointer; }
.who-trigger:hover, .who-trigger.open { border-color: var(--line); background: var(--group); }
.who-catcher { position: fixed; inset: 0; z-index: 20; }
.who-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 21; width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; }
.who-panel .id { padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 1px; }
.who-panel .id b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-panel .id small { font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-panel .sec { padding: 10px 12px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 6px; }
.who-panel .cap { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; border-radius: var(--r-md); background: var(--canvas); }
.choice button { padding: 4px 0; border: 0; border-radius: calc(var(--r-md) - 2px); background: none; color: var(--text-2); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.choice button:hover { color: var(--text); }
.choice button.on { background: var(--selected); color: var(--action-text); font-weight: 700; }
.who-panel .cmd { display: block; width: 100%; padding: 9px 12px; border: 0; border-top: 1px solid var(--line-soft); background: none; color: var(--text-2); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }
.who-panel .cmd:hover { background: var(--group); color: var(--text); }

/* Arbeitsflaeche */
.work { flex: 1; padding: 16px 18px 26px; }
.foot { padding: 8px 18px; font-size: 11px; color: var(--text-3); border-top: 1px solid var(--line-soft); font-weight: 600; }
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-height: 30px; flex-wrap: wrap; }
.toolbar h1 { font-size: 15.5px; font-weight: 700; margin: 0 8px 0 0; }
.toolbar .meta { color: var(--text-3); font-size: 12px; font-weight: 600; }
.toolbar .grow { flex: 1; }
.lead { color: var(--text-2); font-weight: 600; max-width: 760px; margin: 0 0 14px; }
.btn { height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface); font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; color: var(--text); }
.btn.primary { background: var(--action); color: var(--on-action); border-color: var(--action); }
.btn.ok { background: var(--ok); color: var(--on-ok); border-color: var(--ok); }
.btn.crit { background: var(--surface); color: var(--crit); border-color: var(--crit); }
.btn.ghost { background: transparent; color: var(--action-text); border-color: var(--action-text); }
.btn.sm { height: 24px; padding: 0 8px; font-size: 11px; }
.btn:disabled { opacity: .5; cursor: default; }
.chip { height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); white-space: nowrap; cursor: pointer; }
.chip.on { background: var(--action-soft); border-color: var(--action-text); color: var(--action-text); }

.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-tile); box-shadow: var(--shadow); min-width: 0; margin-bottom: 14px; }
.tile .head { height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line-soft); background: var(--group); border-radius: var(--r-tile) var(--r-tile) 0 0; }
.tile .head h2 { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.tile .head .r { margin-left: auto; font-size: 11px; color: var(--text-3); font-weight: 600; }
.tile .body { padding: 14px; }
.lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.m, .muted { color: var(--text-3); font-size: 11.5px; font-weight: 600; }
.strong { font-weight: 700; }

/* Abzeichen */
.badge { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.s-ein { background: var(--line-soft); color: var(--text-2); } .s-gep { background: var(--plan-soft); color: var(--plan); } .s-ums { background: var(--info-soft); color: var(--info); }
.s-tst { background: var(--warn-soft); color: var(--warn); } .s-frei { background: var(--ok-soft); color: var(--ok); } .s-aus { background: var(--done-soft); color: var(--done); } .s-abg { background: var(--crit-soft); color: var(--crit); }
.p1 { background: var(--crit-soft); color: var(--crit); } .p2 { background: var(--warn-soft); color: var(--warn); } .p3 { background: var(--line-soft); color: var(--text-2); }
.rd { background: var(--crit-soft); color: var(--crit); }
.rq { background: var(--warn-soft); color: var(--warn); border: 1px dashed var(--warn); } .rq.ext { background: var(--crit-soft); color: var(--crit); border-color: var(--crit); }
.tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--r-sm); background: var(--group); border: 1px solid var(--line-soft); font-size: 10.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.tag.prod { background: var(--action-soft); border-color: transparent; color: var(--action-text); }
/* Im Dunkeln ist --action-soft ein dunkles Auswahlblau; als Etikett waere es ein Loch in der Kachel. */
:root[data-theme="dark"] .tag.prod { background: var(--info-soft); color: var(--info); }
.tag.info { background: var(--info-soft); border-color: transparent; color: var(--info); }
.ti { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.ti.bug { background: var(--t-bug); border-radius: 50%; } .ti.story { background: var(--t-story); }
.key { color: var(--text-3); font-weight: 800; font-size: 11.5px; white-space: nowrap; }
.av { width: 22px; height: 22px; border-radius: 50%; background: var(--action-soft); color: var(--action-text); display: grid; place-items: center; font-size: 9.5px; font-weight: 800; flex: none; border: 1px solid var(--line); }
.av.sys { background: var(--group); color: var(--text-3); }
.who-cell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dash { color: var(--line); }

/* Uebersicht: Ablauf */
.flow { display: flex; align-items: stretch; padding: 4px 0; }
.flow .st { flex: 1; min-width: 0; position: relative; padding: 10px 12px 10px 18px; background: var(--group); border: 1px solid var(--line-soft); margin-right: -1px; }
.flow .st:first-child { border-radius: 8px 0 0 8px; padding-left: 12px; }
.flow .st:last-child { border-radius: 0 8px 8px 0; }
.flow .st::after { content: ""; position: absolute; right: -9px; top: 50%; width: 16px; height: 16px; background: var(--group); border-right: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft); transform: translateY(-50%) rotate(45deg); z-index: 1; }
.flow .st:last-child::after { display: none; }
.flow .st .l { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.flow .st .v { font-size: 22px; font-weight: 800; line-height: 1.1; margin: 2px 0; }
.flow .st .d { font-size: 11px; color: var(--text-2); font-weight: 600; }
.flow .st.hot .v { color: var(--warn); }
.projects { display: flex; flex-wrap: wrap; gap: 8px; }

/* Ablauf: Board */
.board { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(210px, 1fr)); gap: 10px; align-items: start; overflow-x: auto; padding-bottom: 6px; }
.col { background: var(--panel); border-radius: var(--r-tile); padding: 8px; min-height: 560px; border: 1.5px dashed transparent; }
.col.target { border-color: var(--action); background: var(--selected); }
.col .ch { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; }
.col .ch h3 { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.col .ch .n { font-size: 11px; font-weight: 800; color: var(--text-3); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; height: 18px; display: inline-flex; align-items: center; }
.col .ch .wip { margin-left: auto; min-width: 0; font-size: 10.5px; color: var(--text-3); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col .ch .wip.crit { color: var(--crit); }
.cards { display: flex; flex-direction: column; gap: 8px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 9px 9px 8px 11px; position: relative; box-shadow: 0 1px 1px rgba(27, 36, 48, .04); cursor: pointer; }
.card[draggable="true"] { cursor: grab; }
.card:hover { border-color: var(--action); }
.card:focus-visible { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px var(--action-soft); }
.card.dragging { opacity: .45; }
.card::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--t-story); }
.card.bug::before { background: var(--t-bug); }
.card.sel { outline: 2px solid var(--action); outline-offset: -1px; }
.card .c1 { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; flex-wrap: wrap; }
.card .tt { font-weight: 600; font-size: 12px; line-height: 1.35; margin-bottom: 7px; }
.card .c3 { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.card .c3 .sp { margin-left: auto; display: flex; align-items: center; gap: 5px; }

/* Test */
.test { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; align-items: start; }
.test tbody tr { cursor: pointer; }
.test td.late { color: var(--crit); font-weight: 800; }
.test td.tt { min-width: 160px; }
.list { display: flex; flex-direction: column; }
.list .row { padding: 0 14px; }
.list .row:last-child { border-bottom: 0; }
.proto .ph { padding: 14px 16px 10px; border-bottom: 1px solid var(--line-soft); }
.proto .ph .c1 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.proto h2 { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.env { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 12px; }
.radio { display: flex; gap: 10px; margin: 8px 0; }
.radio button { flex: 1; height: 34px; border: 1.5px solid var(--line); border-radius: var(--r-field); background: var(--surface); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.radio button.ok { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.radio button.bad { border-color: var(--crit); background: var(--crit-soft); color: var(--crit); }
.proto .acts { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; align-items: center; }
.proto .acts .m { margin-right: auto; }
@media (max-width: 1100px) { .test { grid-template-columns: 1fr; } }

/* Tabelle */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th { height: 34px; text-align: left; padding: 0 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); background: var(--group); border-bottom: 1px solid var(--line); white-space: nowrap; }
td { height: 38px; padding: 4px 12px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; font-weight: 600; }
td.tt { white-space: normal; max-width: 460px; min-width: 260px; }
td.right { text-align: right; }
tr.sel td { background: var(--selected); }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--selected); }
tr.inactive td { opacity: .55; }
.strip { display: flex; gap: 26px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-tile); box-shadow: var(--shadow); margin-bottom: 14px; flex-wrap: wrap; }
.strip div { display: flex; flex-direction: column; gap: 2px; }
.strip b { font-size: 18px; font-weight: 800; }
.strip b.c { color: var(--crit); } .strip b.w { color: var(--warn); } .strip b.g { color: var(--ok); }
.empty { padding: 26px 14px; text-align: center; color: var(--text-3); font-weight: 600; }

/* Eingabefelder */
.input, .sel-field { height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: 12px; font-weight: 700; color: var(--text); }
.sel-field { color: var(--text-2); max-width: 190px; }
.sel-field.set { color: var(--text); }
textarea.input { height: auto; min-height: 66px; padding: 8px 10px; font-weight: 500; line-height: 1.45; resize: vertical; width: 100%; }
/* Fokus wie beim Auswahlfeld statt des Systemrahmens. */
.input:focus-visible { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px var(--action-soft); }
.input::placeholder, .nf-input::placeholder { color: var(--text-3); font-weight: 600; }
.input:disabled { background: var(--locked); color: var(--text-2); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.form .full { grid-column: 1 / -1; }
.form .check { font-weight: 600; font-size: 12.5px; }

/* Kontrollkaestchen (Components/Checkbox.razor) statt des Systemfelds. */
.cb { display: inline-flex; align-items: flex-start; gap: 8px; padding: 0; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.cb-box { position: relative; flex: none; width: 16px; height: 16px; margin-top: 1px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--surface); transition: background .12s, border-color .12s; }
.cb:hover:not(:disabled) .cb-box { border-color: var(--text-3); }
.cb[aria-checked="true"] .cb-box { background: var(--action); border-color: var(--action); }
.cb[aria-checked="true"] .cb-box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border-right: 2px solid var(--on-action); border-bottom: 2px solid var(--on-action); transform: rotate(45deg); }
.cb:focus-visible { outline: none; }
.cb:focus-visible .cb-box { border-color: var(--action); box-shadow: 0 0 0 3px var(--action-soft); }
.cb:disabled { cursor: default; opacity: .55; }

/* Zahlenfeld (Components/NumberField.razor): Textfeld mit eigenen Knoepfen statt der Systempfeile. */
.nf { display: flex; align-items: center; gap: 2px; padding-right: 4px !important; }
.nf-input { flex: 1; min-width: 0; height: 100%; min-height: 26px; padding: 0; border: 0; background: none; outline: none; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.nf:focus-within { border-color: var(--action); box-shadow: 0 0 0 3px var(--action-soft); }
.nf.off { background: var(--locked); }
.nf-step { flex: none; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; }
.nf-step:hover:not(:disabled) { background: var(--group); color: var(--text); }
.nf-step:disabled { opacity: .35; cursor: default; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
/* Planung: links ohne Meilenstein, rechts die Meilensteine mit Kapazitätsbalken (Prototyp «Planung»). */
.plan { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; align-items: start; }
.plan .tile.target, .relbox.target { border-color: var(--action); background: var(--selected); }
.relbox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-tile); box-shadow: var(--shadow); margin-bottom: 12px; min-width: 0; }
.relbox .sh { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.relbox .sh h3 { margin: 0; font-size: 13px; font-weight: 700; white-space: nowrap; }
.relbox .sh .dates { font-size: 11px; color: var(--text-3); font-weight: 600; white-space: nowrap; }
.relbox .cap { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.relbox .cap .bar { width: 100px; margin: 0; }
.relbox .drop { margin: 8px 14px 12px; }
.bar.warn i { background: var(--warn); } .bar.crit i { background: var(--crit); }
.handle { color: var(--text-3); font-weight: 800; letter-spacing: -2px; width: 12px; flex: none; }
.plan-row { cursor: pointer; }
.plan-row[draggable="true"] { cursor: grab; }
.plan-row.dragging { opacity: .45; }
@media (max-width: 1100px) { .plan { grid-template-columns: 1fr; } }
.list .row.sel { background: var(--selected); box-shadow: inset 3px 0 0 var(--action); }
.list a.row { color: inherit; cursor: pointer; }
.list .row .t .m { display: block; font-weight: 600; white-space: normal; }
.stack { display: flex; flex-direction: column; min-width: 0; }
.retire { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.retire .m { flex: 1; }
.confirm { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--crit); border-radius: var(--r-md); background: var(--crit-soft); }
.confirm h3 { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--crit); }
.confirm p { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; }
.confirm .lbl { display: block; margin: 10px 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.confirm .list .row { padding: 0; min-height: 30px; }
.confirm .list .row .t { flex: 0 1 auto; }
.confirm .m.err { margin-top: 10px; }
.confirm .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.grp { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; background: var(--group); border-bottom: 1px solid var(--line-soft); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.grp .r { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--text-3); }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }
.form .fld .input { height: 33px; width: 100%; border-radius: var(--r-field); font-size: 12.5px; }
.form .fld textarea.input { height: auto; }
.search-row { display: flex; gap: 8px; margin: 0 0 10px; }
.search-row .input { flex: 1; max-width: 420px; height: 30px; }

/* Felder im Detail */
.fld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fld .v { min-height: 33px; border: 1px solid var(--line); border-radius: var(--r-field); display: flex; align-items: center; padding: 0 10px; font-weight: 600; font-size: 12.5px; gap: 8px; background: var(--surface); white-space: nowrap; overflow: hidden; }
.fld .v.lock { background: var(--locked); color: var(--text-2); }

/* Auswahlfeld (Components/Dropdown.razor) statt des Systemfelds: der Knopf traegt die Klasse des
   frueheren <select> (input, v, sel-field), das Menue liegt fest im Fenster (js/dropdown.js). */
.dd { position: relative; display: inline-block; max-width: 100%; min-width: 0; vertical-align: middle; }
.fld > .dd { display: block; }
.dd-btn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; padding-right: 10px; }
.dd-btn.sel-field { min-width: 110px; }
.dd-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-btn::after { content: ""; flex: none; width: 6px; height: 6px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: translateY(-2px) rotate(45deg); transition: transform .12s; }
.dd-btn:hover:not(:disabled) { border-color: var(--text-3); }
.dd-btn:focus-visible, .dd-btn[aria-expanded="true"] { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px var(--action-soft); }
.dd-btn[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.dd-btn:disabled { opacity: .55; cursor: default; }
.dd-menu { position: fixed; top: 0; left: 0; z-index: 30; visibility: hidden; margin: 0; padding: 4px; list-style: none; max-width: min(380px, calc(100vw - 16px)); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-field); box-shadow: var(--shadow-pop); }
.dd-menu.placed { visibility: visible; }
.dd-opt { position: relative; padding: 6px 12px 6px 28px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-opt.act { background: var(--selected); }
.dd-opt.none { color: var(--text-3); }
.dd-opt.on { color: var(--action-text); font-weight: 700; }
.dd-opt.on::before { content: ""; position: absolute; left: 11px; top: 50%; width: 4px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-65%) rotate(45deg); }
.dd-text.empty { color: var(--text-3); font-weight: 600; }

/* Datumswaehler (Components/DatePicker.razor): Knopf und Menue des Auswahlfelds, im Menue ein Monat. */
.dp .dd-btn { min-width: 132px; }
.dp .dd-btn::after { display: none; }
.dp-icon { flex: none; width: 14px; height: 14px; color: var(--text-3); }
.dp-menu { width: 256px; padding: 10px; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp-head b { font-size: 12.5px; font-weight: 700; }
.dp-nav { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: var(--r-md); background: none; color: var(--text-2); font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; }
.dp-nav:hover { background: var(--group); color: var(--text); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-row { display: contents; }
.dp-wd { padding: 2px 0 4px; text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--text-3); }
.dp-day { height: 30px; display: grid; place-items: center; border-radius: var(--r-md); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.dp-day:hover, .dp-day.act { background: var(--selected); }
.dp-day.out { color: var(--text-3); }
.dp-day.today { color: var(--action-text); font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--action-text); }
.dp-day.on { background: var(--action); color: var(--on-action); font-weight: 700; box-shadow: none; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.dp-link { padding: 3px 6px; border: 0; border-radius: var(--r-sm); background: none; color: var(--action-text); font-size: 12px; font-weight: 700; cursor: pointer; }
.dp-link:hover { background: var(--action-soft); }

/* Schritte und Kommentare */
.step { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; font-weight: 600; }
.step i { width: 16px; height: 16px; border: 1.5px solid var(--line); border-radius: 3px; display: inline-grid; place-items: center; font-size: 10px; font-weight: 800; font-style: normal; color: var(--on-ok); flex: none; margin-top: 1px; }
.step i.done { background: var(--ok); border-color: var(--ok); }
button.step-box { padding: 0; background: none; border: 0; cursor: pointer; }
button.step-box:disabled { cursor: default; }
.step .grow { flex: 1; min-width: 0; }
.step .m { display: block; }
.legend { display: flex; gap: 16px; font-size: 11px; color: var(--text-2); font-weight: 600; margin-top: 8px; flex-wrap: wrap; }
.legend.progress { margin-top: 12px; row-gap: 4px; }
.legend.progress b { color: var(--text); font-weight: 700; margin-right: 4px; }
.drop { margin: 8px 0 0; border: 1.5px dashed var(--line); border-radius: var(--r-md); padding: 8px; text-align: center; font-size: 11px; color: var(--text-3); font-weight: 700; }
.drop.click { display: block; cursor: pointer; }
.drop.over { border-color: var(--action-text); background: var(--action-soft); color: var(--action-text); }
/* Anhänge direkt angezeigt: Bilder unter ihrer Zeile und an ihrer Stelle in der Beschreibung, PDF und Text im Rahmen.
   Nie breiter als das Panel; Text auf weissem Grund, wie der Browser ihn ohne Stil zeichnet. */
.att-preview { padding: 8px 2px 10px; border-bottom: 1px solid var(--line-soft); }
.att-preview img, .desc-img img { display: block; max-width: 100%; max-height: 360px; height: auto; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: #fff; }
.att-preview iframe { display: block; width: 100%; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: #fff; }
.att-preview iframe.pdf { height: 560px; max-height: 70vh; }
.att-preview iframe.text { height: 320px; }
.att-preview .m { margin-top: 4px; }
.desc-img { display: block; margin: 4px 0; width: fit-content; max-width: 100%; }
.desc-img img { max-height: 480px; }
.bar { display: block; height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; margin: 4px 0 2px; }
.bar i { display: block; height: 100%; background: var(--action); border-radius: 3px; }
.bar.ok i { background: var(--ok); }

/* Übersicht: Kennzahlen, Fluss und «Wartet auf», darunter «Meine Aufgaben» (Prototyp, Maske «Übersicht»). */
.grid { display: grid; gap: 14px; margin-bottom: 14px; }
.grid > .tile { margin-bottom: 0; }
.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.overview-mid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.overview-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .overview-mid, .overview-bottom { grid-template-columns: minmax(0, 1fr); } }
/* Aktivität: der Kommentar höchstens zwei Zeilen, die Zeit rechts oben. */
.overview-bottom .row .t .m { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.overview-bottom .row .when { flex: none; align-self: flex-start; padding-top: 8px; }
.overview-bottom .row .t { padding: 6px 0; }
/* Fortschritt: Meilensteinliste und Diagramme (SVG, Farben aus den Variablen, damit «Dunkel» stimmt). */
.progress-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .progress-grid { grid-template-columns: minmax(0, 1fr); } }
.prog { display: flex; flex-direction: column; gap: 12px; }
.prog .it { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
.prog .it .n { font-weight: 700; font-size: 12.5px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.prog .it .n .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prog .it .v { font-size: 11.5px; color: var(--text-2); font-weight: 700; }
.prog .it .bar { grid-column: 1 / -1; margin: 0; }
svg.chart { display: block; width: 100%; height: auto; }
svg.chart text { font-family: inherit; font-weight: 600; fill: var(--text-3); font-size: 10.5px; }
svg.chart text.v { fill: var(--text); font-weight: 800; }
svg.chart line.grid { stroke: var(--line-soft); stroke-width: 1; }
.chart-empty { padding: 24px 0; text-align: center; }
.legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.kpi .body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.kpi .v { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.kpi .v small { font-size: 13px; color: var(--text-3); font-weight: 600; margin-left: 6px; letter-spacing: 0; }
.kpi .d { font-size: 11.5px; color: var(--text-2); font-weight: 600; }
.kpi .d b { color: var(--text); }
.list .row.task { cursor: pointer; min-height: 46px; }
.list .row.task:hover { background: var(--group); }
a.row.more { color: inherit; text-decoration: none; }
/* Lange Namen kürzen statt die Seite auf dem Handy breiter zu machen. */
.btn.next-milestone { display: inline-block; line-height: 28px; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m.err { color: var(--crit); }
.row { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 2px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.cm { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 12px; }
.cm .w { font-weight: 700; } .cm .when { color: var(--text-3); font-size: 11px; font-weight: 600; margin-left: 6px; }
.cm .sys { color: var(--text-2); }
.cm .txt { white-space: pre-wrap; }
.inq { border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 8px 10px; margin-bottom: 8px; }
.inq.open { border-color: var(--warn); background: var(--warn-soft); }

/* Detail-Panel */
.overlay { position: fixed; inset: 50px 0 0 0; background: var(--overlay); z-index: 4; }
.panel { position: absolute; right: 0; top: 0; bottom: 0; width: 600px; max-width: 100%; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -8px 0 30px rgba(27, 36, 48, .12); display: flex; flex-direction: column; }
.panel:focus { outline: none; }
.panel.page { position: static; width: auto; max-width: 860px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--r-tile); box-shadow: var(--shadow); }
.panel .ph { padding: 14px 18px 10px; border-bottom: 1px solid var(--line-soft); }
.panel .ph .c1 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.panel h2 { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.panel .pb { padding: 14px 18px; overflow: auto; flex: 1; }
.panel .pf { border-top: 1px solid var(--line-soft); padding: 10px 18px; display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--text-3); font-weight: 600; flex-wrap: wrap; }
.panel .pf .btns { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.close { margin-left: auto; background: none; border: 0; color: var(--text-3); font-size: 16px; font-weight: 800; cursor: pointer; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 16px; }
.sec { margin: 16px 0 6px; display: block; }
/* «Gemeldet von»: Angabe und Wert nebeneinander wie im Work Item von ALKIS; lange Werte (Adresse, Fehler) brechen um. */
.report { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; font-size: 12.5px; margin: 0 0 8px; }
.report .kv { display: contents; }
.report .kv span { color: var(--text-2); font-weight: 600; }
.report .kv b { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.report-more { margin: 0 0 10px; font-size: 12.5px; }
.report-more summary { cursor: pointer; color: var(--action-text, var(--action)); font-weight: 700; margin-bottom: 6px; }
.desc { font-size: 12.5px; color: var(--text); line-height: 1.55; margin: 2px 0 10px; white-space: pre-wrap; }
.subform { border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 10px; margin: 8px 0; background: var(--group); display: flex; flex-direction: column; gap: 8px; }
.subform .line { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Claude im Detail (AgentSection): je Auftrag ein Kasten, das Protokoll neueste zuerst. */
.agent-job { border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 10px; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; min-width: 0; }
.agent-job .line { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.agent-job .search-row { margin: 0; }
.agent-job .search-row .input { max-width: none; }
.agent-job .desc { white-space: pre-wrap; }
.agent-job .m { overflow-wrap: anywhere; }
.agent-log { max-height: 340px; overflow: auto; border-top: 1px solid var(--line-soft); padding-top: 4px; }
.agent-entry { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 3px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
.agent-entry .when { color: var(--text-3); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.agent-entry .kind { color: var(--text-2); font-weight: 700; font-size: 11px; min-width: 64px; }
.agent-entry .txt { flex: 1 1 240px; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-entry.k0 .txt { font-weight: 600; }
.agent-entry.k2 .txt, .agent-entry.k4 .txt, .agent-entry.k7 .txt { color: var(--text-2); }
.agent-entry.k3 { background: var(--warn-soft); }
.agent-entry.k6 .txt { color: var(--crit); }
.agent-ask { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; width: 100%; }
.agent-ask .input { flex: 1; min-width: 160px; height: 28px; }

/* Verwaltung (Pages/Admin/Administration.razor) nach dem Verwaltungsbereich von ALBAU Web
   (Administration.razor.css): oben auf weisser Flaeche, ueber die volle Breite der Arbeitsflaeche,
   Kopf mit Suche und Schnellzugriff, darunter auf der Leinwand das Verzeichnis in Gruppen. Die
   Farbtoene der Gruppen sind die Paare der Zustaende, damit die dunkle Fassung ohne eigene Zeile
   mitkommt. Die Unterseiten fuehren links in der Werkzeugleiste mit «Verwaltung» zurueck. */
.admin { display: flex; flex-direction: column; }
.admin-top { margin: -16px -18px 0; padding: 22px 18px 20px; background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.admin-head { display: flex; align-items: center; gap: 24px; }
.admin-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.admin-heading h1 { margin: 0; font-size: 18px; font-weight: 700; }
.admin-heading p { margin: 0; max-width: 64ch; color: var(--text-3); font-weight: 600; line-height: 1.5; }
.admin-search { flex: none; width: 360px; max-width: 45%; height: 33px; border-radius: var(--r-field); font-size: 12.5px; }
.admin-search:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px var(--action-soft); }
.admin-empty { margin: 0; padding: 16px 0; color: var(--text-3); font-weight: 600; }
.admin-label { display: flex; align-items: center; min-height: 30px; margin: 20px 0 8px; }
.admin-label-text { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.admin-label-text { flex: 1; }
.admin-label-actions { display: flex; align-items: center; gap: 8px; }
.admin-link { height: 26px; padding: 0 6px; border: 0; background: none; color: var(--action-text); font-size: 12px; font-weight: 700; cursor: pointer; }
.admin-link:hover:not(:disabled) { text-decoration: underline; }
.admin-link:disabled { opacity: .5; cursor: default; }
.admin-star { display: inline-flex; color: var(--text-3); font-size: 13px; line-height: 1; }
.admin-star.on { color: var(--warn); }
.admin-edit-hint { display: flex; align-items: baseline; gap: 16px; margin: 0 0 12px; color: var(--text-3); font-size: 11.5px; font-weight: 600; line-height: 1.45; }
.admin-edit-count { flex: none; margin-left: auto; color: var(--text-2); font-weight: 700; }

.admin-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* Beim Anpassen rahmt eine gestrichelte Flaeche die Plaetze ein: nichts davon gilt vor «Fertig». */
.admin-quick.editing { margin: 0 -12px; padding: 12px; border: 1.5px dashed var(--line); border-radius: var(--r-card); background: var(--canvas); }
.admin-quick.editing .admin-tile { background: var(--surface); cursor: grab; }
.admin-quick-empty { grid-column: 1 / -1; margin: 0; padding: 16px; border: 1px dashed var(--line); border-radius: var(--r-card); color: var(--text-3); font-weight: 600; text-align: center; }
/* Die gezogene Kachel steht schon auf dem Platz, auf dem sie landen wuerde — als Luecke mit Umriss. */
.admin-quick.editing .admin-tile.dragged { border: 1.5px dashed var(--action-text); background: var(--selected); opacity: .75; }
.admin-tile-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; }
.admin-tile-grip, .admin-tile-remove { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--text-3); font-size: 12px; font-weight: 800; }
.admin-tile-grip { cursor: grab; }
.admin-tile-grip svg { width: 16px; height: 16px; fill: currentColor; }
.admin-tile-remove { border-color: var(--line-soft); background: var(--surface); cursor: pointer; }
.admin-tile-grip:hover, .admin-tile-grip:focus-visible { color: var(--action-text); }
.admin-tile-remove:hover { border-color: var(--crit); color: var(--crit); }
.admin-tile-grip:focus-visible, .admin-tile-remove:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--action-soft); }
.admin-free { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 110px; padding: 16px; border: 1.5px dashed var(--line); border-radius: var(--r-card); color: var(--text-3); font-weight: 600; text-align: center; }
.admin-tile { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--line-soft); border-radius: var(--r-card); background: var(--group); color: inherit; }
.admin-tile:hover { border-color: var(--action-text); background: var(--surface); box-shadow: var(--shadow); }
.admin-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--action-soft); border-color: var(--action); }
.admin-tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-tile-title { font-size: 12.5px; font-weight: 700; color: var(--text); }
.admin-tile-hint { display: -webkit-box; overflow: hidden; color: var(--text-3); font-size: 11.5px; font-weight: 600; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.tone-blue { --tone: var(--info); --tone-soft: var(--info-soft); }
.tone-green { --tone: var(--ok); --tone-soft: var(--ok-soft); }
.tone-purple { --tone: var(--plan); --tone-soft: var(--plan-soft); }
.admin-badge { display: flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--r-md); background: var(--tone-soft); color: var(--tone); }
.admin-badge.large { width: 38px; height: 38px; border-radius: var(--r-tile); }
.admin-sign { width: 14px; height: 14px; flex: none; }
.admin-badge.large .admin-sign { width: 19px; height: 19px; }

.admin-directory { margin: 0 -18px; padding: 0 18px 8px; transition: background-color .12s ease; }
/* Eine gezogene Kachel schwebt ueber dem Verzeichnis: loslassen nimmt sie aus dem Schnellzugriff. */
.admin-directory.drop { background: var(--selected); }
.admin-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.admin-column { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 10px 10px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); }
.admin-column-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; padding: 0 4px 10px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; font-weight: 700; }
.admin-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; min-height: 30px; padding: 5px 8px; border-radius: var(--r-md); color: var(--text); font-size: 12.5px; font-weight: 600; }
.admin-entry .admin-sign { color: var(--tone); }
.admin-entry-text { flex: 1; min-width: 0; }
button.admin-entry { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; }
button.admin-entry:disabled { opacity: .55; cursor: default; }
a.admin-entry:hover, button.admin-entry:hover:not(:disabled) { background: var(--selected); color: var(--action-text); }
a.admin-entry:focus-visible, button.admin-entry:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--action-soft); }
/* Der Stern beim Anpassen: umrissen, was sich anheften laesst, gefuellt, was schon oben steht. */
button.admin-entry:hover:not(:disabled) .admin-star, .admin-entry.pinned .admin-star { color: var(--warn); }
/* Sichtbar, aber stumm: erkennbar vorhanden und erkennbar noch nicht bedienbar. */
.admin-entry.pending { color: var(--text-3); cursor: default; }
.admin-entry.pending .admin-sign { color: var(--text-3); opacity: .7; }
.admin-pending { flex: none; padding: 1px 6px; border-radius: var(--r-sm); background: var(--locked); border: 1px solid var(--line-soft); color: var(--text-3); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

.admin-back { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 6px; border-radius: var(--r-field); color: var(--text-2); font-weight: 700; font-size: 12.5px; }
.admin-back::before { content: ""; width: 7px; height: 7px; border-left: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateX(2px) rotate(45deg); }
.admin-back:hover { background: var(--group); color: var(--action-text); }
.admin-divider { width: 1px; height: 20px; background: var(--line); margin-right: 4px; }

@media (max-width: 1100px) {
	.admin-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.admin-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Die Spannweite am Element rechnet mit vier Spalten; in zweien nimmt der Hinweis die ganze Reihe. */
	.admin-free { grid-column: 1 / -1 !important; }
}

/* Rechte je Rolle (Pages/Admin/Rights.razor): die Matrix aus dem Prototyp mit seinem Haekchen .chk.
   Die Spalten der eigenen Rollen treten mit der Auswahlfarbe hervor. */
.rights-mine { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.rights-mine .lbl { margin-right: 4px; }
table.rights th.c, table.rights td.c { width: 96px; text-align: center; }
table.rights th.mine { color: var(--action-text); }
table.rights td.c.mine { background: var(--group); }
table.rights tr.grp td { height: 30px; padding-top: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); background: var(--surface); }
table.rights td.tt { min-width: 300px; }
.chk { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--line); border-radius: 3px; font-size: 10px; font-weight: 800; color: var(--text-3); }
.chk.on { background: var(--action); border-color: var(--action); color: var(--on-action); }

/* Zustandsablauf (Pages/Admin/StateFlow.razor): der Weg als Kette wie im Prototyp (.flowcfg),
   darunter die Uebergaenge; geplante Zeilen stehen gedaempft da. */
.flowcfg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px 14px; font-size: 12px; font-weight: 700; }
.flowcfg .s { height: 28px; padding: 0 10px; border-radius: var(--r-md); display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-soft); }
.flowcfg .ar, .flow-step .ar { color: var(--text-3); }
.flow-aside { display: inline-flex; align-items: center; gap: 8px; margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--line-soft); }
.flow-note { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 14px 12px; }
.flow-step { display: inline-flex; align-items: center; gap: 6px; }
table.flow-table td { vertical-align: top; padding-top: 9px; padding-bottom: 9px; }
table.flow-table td.tt { min-width: 200px; }
table.flow-table tr.planned td { color: var(--text-3); }
table.flow-table tr.planned .badge { opacity: .6; }
table.flow-table .admin-pending { display: inline-block; margin-top: 3px; }

/* Benachrichtigungsregeln (Pages/Admin/NotificationRules.razor): Empfaenger als Chips zum Umschalten,
   Kanaele und Aktiv als Kontrollkaestchen; eine abgeschaltete Regel steht gedaempft da. */
table.rules td { vertical-align: middle; padding-top: 7px; padding-bottom: 7px; }
table.rules td.tt { min-width: 240px; }
.rule-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rule-chips .chip:disabled { cursor: default; opacity: .6; }
.rule-channels { display: flex; gap: 14px; }
.message.notice { max-width: none; border-color: var(--warn); background: var(--warn-soft); }

/* Meldungen und Zustaende */
.message { margin: 0 0 12px; padding: 9px 12px; border: 1px solid var(--action); border-radius: var(--r-md); background: var(--action-soft); color: var(--text); font-weight: 600; }
.message.error { border-color: var(--crit); background: var(--crit-soft); }
.message.reason { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-color: var(--crit); background: var(--surface); }
.message.reason .input { flex: 1; min-width: 220px; }
.notice { max-width: 640px; }
.loading { padding: 40px 18px; color: var(--text-3); font-weight: 600; }

#blazor-error-ui { display: none; position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 18px; background: var(--crit); color: var(--on-crit); z-index: 1000; font-weight: 600; }
#blazor-error-ui a { color: var(--on-crit); margin-left: 8px; }

/* Finger statt Maus: die eigenen Steuerelemente bekommen groessere Tippflaechen. */
@media (pointer: coarse) {
	.dd-opt { padding-top: 11px; padding-bottom: 11px; }
	.dp-day { height: 38px; }
	.dp-nav { width: 38px; height: 38px; }
	.dp-link { padding: 9px 10px; }
	.nf-step { width: 34px; height: 30px; }
	.cb { min-height: 24px; gap: 10px; }
	.cb-box { width: 20px; height: 20px; margin-top: -1px; }
	.cb[aria-checked="true"] .cb-box::after { left: 5.5px; top: 1.5px; width: 5px; height: 10px; }
}

@media (max-width: 760px) {
	.top { padding: 0 12px; gap: 10px; }
	.brand small, .brand b, .who-name { display: none; }
	/* Die Navigation rollt quer, statt die Seite breiter als das Handy zu machen. */
	.nav { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
	.nav a { padding: 0 8px; margin-bottom: 0; }
	.who { flex: none; }
	.work { padding: 14px 16px 22px; }
	.fields, .form { grid-template-columns: 1fr; }
	.flow { flex-direction: column; }
	.flow .st { margin: 0 0 -1px; border-radius: 0 !important; padding-left: 12px; }
	.flow .st::after { display: none; }
	.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.overview-mid { grid-template-columns: minmax(0, 1fr); }
	.admin-top { margin: -14px -16px 0; padding: 18px 16px 16px; }
	.admin-head { flex-direction: column; align-items: stretch; gap: 14px; }
	.admin-search { width: auto; max-width: none; }
	.admin-columns { grid-template-columns: minmax(0, 1fr); }
	.admin-directory { margin: 0 -16px; padding: 0 16px 8px; }
	.admin-edit-hint { flex-direction: column; gap: 4px; }
	.admin-edit-count { margin-left: 0; }
}