/* ==========================================================================
   Lucky Plucker Panel - Richtung B "Abendschicht" - KOMPONENTEN (Stand 1.0)
   Mobile first, Umbruch auf Desktop bei 900 px. Nur Variablen aus tokens.css.
   Keine Inline-Styles, keine Skripte, keine externen Ressourcen noetig.
   Inhalt: 1 Basis | 2 Geruest | 3 Karte/Text | 4 Chip/Knopf | 5 Listen
           6 Tabelle | 7 Formular | 8 Hinweiszeile | 9 Reiter | 10 Fachkomponenten
           11 Zustandsseiten | 12 Desktop
   ========================================================================== */

/* 1 Basis ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body { margin: 0; background: radial-gradient(900px 420px at 80% -10%, var(--c-bg-glow) 0%, transparent 70%), var(--c-bg); background-attachment: fixed; color: var(--c-ink); font-family: var(--font); font-size: var(--fs-m); line-height: 1.45; padding-bottom: 96px; min-height: 100vh; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--c-orange); }
small { display: block; font-size: var(--fs-xs); color: var(--c-muted); font-weight: 400; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--c-muted); font-size: var(--fs-s); }
.center { text-align: center; }
.t-wide { display: none; }

/* 2 Geruest: Seitenleiste, Kopfleiste, untere Leiste ----------------------- */
.sidebar { display: none; }
.content { min-width: 0; }
.appbar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line); background: var(--scrim); position: sticky; top: 0; z-index: 4; }
.brand-m { display: inline-flex; min-height: var(--hit-min); align-items: center; }
.brand-m img { border-radius: 50%; display: block; }
.appbar .page-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-head); font-size: var(--fs-nav); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.page { padding: var(--sp-4); max-width: var(--w-page); }
.foot { color: var(--c-muted); font-size: var(--fs-xs); padding: var(--sp-4); text-align: center; }
.dock { position: fixed; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--r-l); display: flex; padding: var(--sp-1); z-index: 5; box-shadow: var(--shadow-dock); }
.dock-link { flex: 1; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: var(--c-muted); font-size: var(--fs-2xs); font-weight: 600; border-radius: var(--r-m); padding: var(--sp-1) 2px; }
.dock-link[aria-current="page"] { background: var(--c-orange); color: var(--c-on-orange); }
.brand { display: flex; align-items: center; gap: var(--sp-3); color: var(--c-ink); text-decoration: none; }
.brand img { border-radius: 50%; }
.brand-t { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-l); line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; }
.brand-t small { color: var(--c-orange); font-size: var(--fs-2xs); letter-spacing: .14em; }
.nav-side { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-link { display: flex; align-items: center; gap: var(--sp-3); min-height: 46px; padding: 0 14px; border-radius: var(--r-m); color: var(--c-muted); text-decoration: none; font-weight: 600; border-left: 3px solid transparent; }
.nav-link:hover { background: var(--c-surface); color: var(--c-ink); }
.nav-link[aria-current="page"] { background: var(--c-surface-2); color: var(--c-orange); border-left-color: var(--c-orange); }
.user { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-m); }
.user-t { font-weight: 600; line-height: 1.15; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--c-wine); color: var(--c-on-wine); border: 1px solid var(--c-orange); display: inline-grid; place-items: center; font-weight: 700; font-size: var(--fs-s); flex: none; }

/* 3 Karte, Text, Raster --------------------------------------------------- */
.grid { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
.stack { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); min-width: 0; align-content: start; }
.card { background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface)); border: 1px solid var(--c-line); border-radius: var(--r-l); padding: var(--sp-4); min-width: 0; }
.card-h { font-family: var(--font-head); font-size: var(--fs-s); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-orange); margin-bottom: var(--sp-3); }
.card-h-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.card-h-row .card-h { margin: 0; }
.card-hero { border-color: var(--c-line-accent); background: linear-gradient(135deg, var(--c-hero-from) 0%, var(--c-surface) 75%); }
.card-accent { border-color: var(--c-line-accent); }
.big { font-family: var(--font-head); font-size: var(--fs-xl); font-weight: 600; line-height: 1.15; margin-bottom: var(--sp-3); }
.big-num { font-family: var(--font-head); font-size: var(--fs-xxl); font-weight: 600; color: var(--c-ink); line-height: 1.1; margin: var(--sp-2) 0; font-variant-numeric: tabular-nums; }
.note { font-size: var(--fs-s); color: var(--c-muted); margin-top: var(--sp-3); }
.sub-h { font-family: var(--font-head); font-size: var(--fs-s); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; margin-top: var(--sp-4); color: var(--c-orange); }
.kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.toolbar .grow { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-l); flex: 1 1 100%; order: -1; }
.toolbar .btn { flex: 1 1 140px; }
.dl > div { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 10px 0; border-top: 1px solid var(--c-line); font-variant-numeric: tabular-nums; }
.dl > div:first-child { border-top: 0; }
.dl dt { color: var(--c-muted); }
.dl dd { margin: 0; font-weight: 600; font-family: var(--font-head); text-align: right; }
.dl .sep { border-top: 1px solid var(--c-orange); }
.dl .ok dd { color: var(--c-ok); }

/* 4 Chip, Status, Knopf ---------------------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px 14px; border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-s); min-height: 32px; font-family: var(--font-head); letter-spacing: .04em; text-transform: uppercase; }
.pill-open { background: var(--c-ok-bg); color: var(--c-ok); border: 1px solid var(--c-ok); }
.pill-closed { background: var(--c-danger-bg); color: var(--c-danger); border: 1px solid var(--c-danger-line); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.chip { display: inline-block; padding: 4px 12px; border-radius: var(--r-pill); border: 1px solid var(--c-line); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; color: var(--c-muted); }
.chip-ok { background: var(--c-ok-bg); color: var(--c-ok); border-color: var(--c-ok-line); }
.chip-warn { background: var(--c-warn-bg); color: var(--c-warn); border-color: var(--c-warn-line); }
.chip-danger { background: var(--c-danger-bg); color: var(--c-danger); border-color: var(--c-danger-line); }
.chip-info { background: var(--c-info-bg); color: var(--c-info); border-color: var(--c-info-line); }
.badge { min-width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: var(--r-s); background: var(--c-red); color: var(--c-on-red); font-weight: 700; font-size: var(--fs-s); flex: none; }
.badge-warn { background: var(--c-orange); color: var(--c-on-orange); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--hit); padding: 10px 20px; border-radius: var(--r-m); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn-primary:active { background: var(--c-primary-press); }
.btn-secondary { background: transparent; color: var(--c-ink); border-color: var(--c-line-strong); }
.btn-danger { background: var(--c-red); color: var(--c-on-red); }
.btn-small { min-height: var(--hit-min); padding: 6px 16px; background: var(--c-primary); color: var(--c-on-primary); }
.btn-small.btn-secondary { background: transparent; color: var(--c-ink); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-wide { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-stamp { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 220px; height: 220px; margin: var(--sp-5) auto; border-radius: 50%; background: radial-gradient(circle at 50% 35%, var(--stamp-from) 0%, var(--c-red) 55%, var(--stamp-to) 100%); color: var(--c-on-red); border: 6px solid var(--c-orange); box-shadow: 0 0 0 8px var(--glow-orange-soft), 0 0 48px var(--glow-red); font: inherit; cursor: pointer; }
.btn-stamp:active { transform: scale(.98); }
.stamp-t { font-family: var(--font-head); font-size: var(--fs-stamp); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.stamp-s { font-size: var(--fs-s); }
.lnk { font-weight: 700; min-height: var(--hit-min); display: inline-flex; align-items: center; padding: 0 var(--sp-2); }

/* 5 Listen ---------------------------------------------------------------- */
.rows li, .entries li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--c-line); min-height: 56px; }
.rows li:first-child, .entries li:first-child { border-top: 0; }
.rows.wrap li, .entries li { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; font-weight: 600; }
.rows.wrap .grow { flex: 1 1 160px; }
.date { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 54px; padding: var(--sp-1) 0; border: 1px solid var(--c-line); border-radius: var(--r-s); font-size: var(--fs-xs); line-height: 1.2; flex: none; color: var(--c-muted); }
.date b { font-family: var(--font-head); font-size: var(--fs-m); color: var(--c-orange); text-transform: uppercase; }
.dur { font-family: var(--font-head); font-variant-numeric: tabular-nums; display: none; }
.entries .grow { flex: 1 1 140px; }
.clock-s { font-family: var(--font-head); font-size: var(--fs-clock); font-weight: 600; color: var(--c-orange); line-height: 1; font-variant-numeric: tabular-nums; }
.clock-s small { display: inline; font-size: var(--fs-m); }
.clock-l { font-family: var(--font-head); font-size: var(--fs-clock-l); font-weight: 600; color: var(--c-orange); text-align: center; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: .04em; margin: var(--sp-2) 0; }
.status-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); }
.staff { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.meter { display: flex; gap: 6px; }
.meter i { width: 12px; height: 28px; border-radius: 3px; background: transparent; border: 1px solid var(--c-line); }
.meter i.on { background: var(--c-orange); border-color: var(--c-orange); box-shadow: 0 0 12px var(--glow-orange); }
.bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-2); align-items: end; height: 150px; margin-top: var(--sp-3); }
.bars li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; font-size: var(--fs-xs); }
.bars b { color: var(--c-muted); }
.bars em { font-style: normal; font-weight: 600; font-size: var(--fs-2xs); }
.bar { width: 100%; max-width: 30px; min-height: 4px; background: var(--c-wine); border: 1px solid var(--c-orange); border-radius: 6px 6px 1px 1px; display: block; }
.today .bar { background: var(--c-orange); box-shadow: 0 0 14px var(--glow-orange); }
.today b { color: var(--c-orange); }
.h0 { height: 3%; background: transparent; border-color: var(--c-line); }
.h30 { height: 32%; } .h35 { height: 36%; } .h75 { height: 75%; } .h80 { height: 80%; }

/* 6 Tabelle (Desktop echte Tabelle, Handy Karten mit data-label) ----------- */
.table-wrap { overflow-x: auto; position: relative; }
.table { width: 100%; border-collapse: collapse; }
.table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.table, .table tbody, .table tr, .table td { display: block; }
.table tr { padding: var(--sp-3) 0; border-top: 1px solid var(--c-line); }
.table tbody tr:first-child { border-top: 0; }
.table td { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: 6px 0; min-height: 36px; }
.table td::before { content: attr(data-label); color: var(--c-muted); font-size: var(--fs-xs); flex: none; }
.table td.cell-main { font-weight: 700; font-size: var(--fs-m); }
.table td.cell-main::before, .table td.cell-actions::before { content: none; }
.table td.cell-actions { justify-content: flex-start; flex-wrap: wrap; }
.table .num { font-family: var(--font-head); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.table .who { display: flex; align-items: center; gap: var(--sp-3); }
.table tr.row-warn { background: var(--c-warn-bg); }
.table tr.row-danger { background: var(--c-danger-bg); }

/* 7 Formular --------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-3); min-width: 0; }
fieldset.card { margin: 0; min-width: 0; }
legend { padding: 0; }
legend.card-h { float: left; width: 100%; }
legend.card-h + * { clear: both; }
.field { display: grid; gap: 6px; margin-bottom: var(--sp-3); }
.field label, .field .label { font-weight: 600; font-size: var(--fs-s); }
.hint { font-size: var(--fs-xs); color: var(--c-muted); }
input[type=text], input[type=number], input[type=date], input[type=time], select, textarea { width: 100%; min-height: var(--hit); padding: 10px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--r-m); background: var(--c-surface-sunken); color: var(--c-ink); font: inherit; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-orange) 50%), linear-gradient(135deg, var(--c-orange) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
input:focus, select:focus, textarea:focus { border-color: var(--c-orange); }
.field-error input, .field-error select, .field-error textarea { border-color: var(--c-danger); }
.field-error .hint { color: var(--c-danger); }
.money { position: relative; }
.money input { text-align: right; padding-right: 40px; font-family: var(--font-head); font-size: var(--fs-l); font-variant-numeric: tabular-nums; }
.unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--c-orange); }
.grid2, .posrow { display: grid; gap: 0 var(--sp-3); grid-template-columns: minmax(0, 1fr); }
.check { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--hit-min); font-weight: 600; cursor: pointer; }
.check input { width: 24px; height: 24px; accent-color: var(--c-orange); flex: none; margin: 0; }
.choice { display: grid; gap: var(--sp-2); }
.choice .check { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-m); }
.form-actions .btn { flex: 1 1 160px; }
.sticky-actions .btn { flex: 1 1 160px; }
.notes { margin-bottom: 0; }
.summary { align-self: start; border-color: var(--c-line-accent); }

/* 8 Hinweiszeile (Hinweis, Warnung, Fehler, Erfolg) ----------------------- */
.hint-row { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-m); border: 1px solid var(--c-line); background: var(--c-surface); font-size: var(--fs-s); }
.hint-row .ic { margin-top: 1px; }
.card > .hint-row { margin: var(--sp-3) 0; }
.hint-row b { display: block; }
.hint-row-info { background: var(--c-info-bg); border-color: var(--c-info-line); color: var(--c-info); }
.hint-row-warn { background: var(--c-warn-bg); border-color: var(--c-warn-line); color: var(--c-warn); }
.hint-row-danger { background: var(--c-danger-bg); border-color: var(--c-danger-line); color: var(--c-danger); }
.hint-row-ok { background: var(--c-ok-bg); border-color: var(--c-ok-line); color: var(--c-ok); }
.hint-row p, .hint-row span.txt { color: var(--c-ink); }

/* 9 Reiter ----------------------------------------------------------------- */
.tabs { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); margin-bottom: var(--sp-3); }
.tab { flex: none; min-height: var(--hit-min); display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-pill); color: var(--c-muted); text-decoration: none; font-weight: 600; }
.tab[aria-current="page"] { background: var(--c-orange); border-color: var(--c-orange); color: var(--c-on-orange); }
.tab .badge { min-width: 24px; height: 24px; font-size: var(--fs-xs); }

/* 10 Fachkomponenten ------------------------------------------------------- */
/* Dienstplan: Woche als Tageskarten */
.plan { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
.plan-day { background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface)); border: 1px solid var(--c-line); border-radius: var(--r-l); padding: var(--sp-4); display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
.plan-day.is-today { border-color: var(--c-orange); }
.plan-day.is-past { opacity: .8; }
.plan-day-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--sp-2); }
.plan-day-h b { font-family: var(--font-head); font-size: var(--fs-l); text-transform: uppercase; letter-spacing: .04em; }
.plan-time { font-weight: 600; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; }
.plan-task { color: var(--c-muted); font-size: var(--fs-s); }
.plan-people { display: grid; gap: var(--sp-1); font-size: var(--fs-s); }
.plan-people li { display: flex; align-items: center; gap: var(--sp-2); }
.plan-people .avatar { width: 28px; height: 28px; font-size: var(--fs-2xs); }
.plan-people .none { color: var(--c-muted); }
.occ { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
/* Kanban / Pipeline */
.board { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
.board-col { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-l); padding: var(--sp-3); display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
.board-h { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-head); font-size: var(--fs-s); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-orange); }
.app-card { background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--r-m); padding: var(--sp-3); display: grid; gap: var(--sp-2); }
.app-card.is-open { border-color: var(--c-orange); }
.app-card b { font-size: var(--fs-m); }
.app-card .btn-small { justify-self: start; }
.steps { display: flex; gap: var(--sp-1); }
.steps i { flex: 1; height: 8px; border-radius: 4px; background: var(--c-line); }
.steps i.done { background: var(--c-orange); }
/* Fortschritt / Bestand */
.progress { height: 10px; background: var(--c-surface-sunken); border: 1px solid var(--c-line); border-radius: var(--r-pill); overflow: hidden; min-width: 80px; }
.progress > span { display: block; height: 100%; background: var(--c-ok); border-radius: var(--r-pill); }
.progress-low > span { background: var(--c-warn); }
.progress-critical > span { background: var(--c-danger); }
/* Voraussetzungen / Verlauf */
.req li { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; border-top: 1px solid var(--c-line); min-height: 52px; }
.req li:first-child { border-top: 0; }
.req .ic { color: var(--c-ok); }
.req .no .ic { color: var(--c-danger); }
.timeline { display: grid; gap: var(--sp-3); border-left: 2px solid var(--c-line); margin-left: var(--sp-2); padding-left: var(--sp-4); }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; left: calc(var(--sp-4) * -1 - 7px); top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-orange); }
.timeline li.is-next::before { background: transparent; border: 2px solid var(--c-line-strong); }
.timeline time { display: block; font-size: var(--fs-xs); color: var(--c-muted); }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.stat b { display: block; font-family: var(--font-head); font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.stat span { font-size: var(--fs-xs); color: var(--c-muted); }
/* Rechte-Matrix */
.matrix { border-collapse: separate; border-spacing: 0; min-width: 640px; width: 100%; font-size: var(--fs-s); }
.matrix th, .matrix td { padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.matrix thead th { font-family: var(--font-head); font-size: var(--fs-xs); color: var(--c-orange); letter-spacing: .06em; }
.matrix th:first-child, .matrix td:first-child { text-align: left; position: sticky; left: 0; background: var(--c-surface); white-space: normal; min-width: 190px; border-right: 1px solid var(--c-line); }
.matrix td:first-child small { font-family: monospace; }
.matrix .m-yes { color: var(--c-ok); font-weight: 700; }
.matrix .m-yes::after { content: "\2713"; }
.matrix .m-duty { color: var(--c-warn); font-size: var(--fs-xs); font-weight: 700; }
.matrix .m-duty::after { content: "i. D."; }
.matrix .m-self { color: var(--c-info); font-size: var(--fs-xs); font-weight: 700; }
.matrix .m-self::after { content: "selbst"; }
.matrix .m-no { color: var(--c-muted); }
.matrix .m-no::after { content: "\2013"; }
.matrix .is-fixed td:first-child::after { content: "fest"; margin-left: var(--sp-2); font-size: var(--fs-2xs); color: var(--c-on-orange); background: var(--c-orange); padding: 1px 8px; border-radius: var(--r-pill); font-weight: 700; }
/* Embed-Vorschau (Ankuendigungsentwurf) */
.embed-preview { border-left: 4px solid var(--c-red); background: var(--c-surface-sunken); border-radius: var(--r-s); padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-2); }
.embed-preview b { font-size: var(--fs-m); }
.embed-preview .embed-foot { font-size: var(--fs-xs); color: var(--c-muted); }
/* Fortschrittsbreiten (Prozent, 5er-Schritte) */
.fill-0 > span { width: 0; } .fill-5 > span { width: 5%; } .fill-10 > span { width: 10%; } .fill-15 > span { width: 15%; } .fill-20 > span { width: 20%; }
.fill-25 > span { width: 25%; } .fill-30 > span { width: 30%; } .fill-35 > span { width: 35%; } .fill-40 > span { width: 40%; } .fill-45 > span { width: 45%; }
.fill-50 > span { width: 50%; } .fill-55 > span { width: 55%; } .fill-60 > span { width: 60%; } .fill-65 > span { width: 65%; } .fill-70 > span { width: 70%; }
.fill-75 > span { width: 75%; } .fill-80 > span { width: 80%; } .fill-85 > span { width: 85%; } .fill-90 > span { width: 90%; } .fill-95 > span { width: 95%; } .fill-100 > span { width: 100%; }

/* 11 Zustandsseiten (Anmeldung, kein Zugang, leer) ------------------------- */
.login { padding-bottom: 0; display: grid; place-items: start center; min-height: 100vh; background: radial-gradient(520px 420px at 50% 22%, #5A1B17 0%, transparent 70%), var(--c-bg); }
.login-box { width: 100%; max-width: 440px; text-align: center; padding: var(--sp-7) var(--sp-4) var(--sp-4); }
.login-logo { border-radius: 50%; display: block; margin: 0 auto var(--sp-4); box-shadow: 0 0 56px var(--glow-orange); }
.login-h { font-family: var(--font-head); font-size: var(--fs-xxl); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; line-height: 1.1; }
.login-s { font-family: var(--font-head); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--c-orange); margin: var(--sp-2) 0 var(--sp-5); font-size: var(--fs-s); }
.login-p { color: var(--c-muted); margin-bottom: var(--sp-5); }
.login-note { color: var(--c-muted); font-size: var(--fs-s); margin: var(--sp-5) 0 var(--sp-4); border-top: 1px solid var(--c-line); padding-top: var(--sp-4); }
.login-box .btn + .btn { margin-top: var(--sp-3); }
.state-icon { width: 96px; height: 96px; margin: 0 auto var(--sp-4); border-radius: 50%; display: grid; place-items: center; background: var(--c-danger-bg); border: 2px solid var(--c-danger-line); color: var(--c-danger); }
.state-icon .ic { width: 44px; height: 44px; stroke-width: 1.6; }
.empty { text-align: center; padding: var(--sp-6) var(--sp-4); display: grid; gap: var(--sp-3); justify-items: center; }
.empty .state-icon { background: var(--c-surface-sunken); border-color: var(--c-line); color: var(--c-orange); margin-bottom: 0; }
.empty-h { font-family: var(--font-head); font-size: var(--fs-l); font-weight: 600; }
.empty p { color: var(--c-muted); max-width: 44ch; }
.menu-list { display: grid; gap: var(--sp-2); }
.menu-list a { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: 0 var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-m); background: var(--c-surface); color: var(--c-ink); text-decoration: none; font-weight: 600; }
.menu-list a .ic { color: var(--c-orange); }

/* 12 Desktop --------------------------------------------------------------- */
@media (min-width: 900px) {
  body { padding-bottom: 0; display: grid; grid-template-columns: var(--w-side) 1fr; align-items: start; }
  .login { grid-template-columns: minmax(0, 1fr); }
  .dock, .brand-m, .t-narrow { display: none; }
  .t-wide { display: inline; }
  .sidebar { display: flex; flex-direction: column; gap: var(--sp-5); position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: var(--sp-5) var(--sp-4); background: var(--c-side-bg); border-right: 1px solid var(--c-line); }
  .appbar { padding: var(--sp-4) var(--sp-6); }
  .appbar .page-title { font-size: var(--fs-xl); }
  .page { padding: var(--sp-5) var(--sp-6); }
  .grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
  .card { padding: var(--sp-5); }
  .grid > .status { grid-column: span 2; }
  .grid > .tasks { grid-column: 1 / -1; order: 5; }
  .tasks .rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-6); }
  .tasks .rows li:nth-child(2) { border-top: 0; }
  .grid > .clock { grid-column: span 1; grid-row: span 2; }
  .grid > .sum, .grid > .entries-c { grid-column: span 2; }
  .grid > .lead { grid-column: 1 / -1; }
  .dur { display: inline; }
  .entries .grow { flex: 1; }
  .kgrid, .split { grid-template-columns: minmax(0, 1fr) var(--w-aside); align-items: start; }
  .kgrid > .kopf, .split > .kopf { grid-column: 1 / -1; margin-bottom: 0; }
  .kgrid > .summary, .split > .summary { position: sticky; top: 96px; }
  .grid2 { grid-template-columns: 1fr 1fr; }
  .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--sp-3); }
  .posrow { grid-template-columns: 2fr 1fr; }
  .cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }
  .cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); align-items: start; }
  .toolbar .grow { flex: 1; order: 0; text-align: center; }
  .toolbar .btn { flex: none; }
  .plan { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); }
  .plan-day { padding: var(--sp-3); }
  .board { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); align-items: start; }
  .table { display: table; }
  .table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  .table tbody { display: table-row-group; }
  .table tr { display: table-row; padding: 0; }
  .table th { text-align: left; font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-orange); padding: 10px 12px; border-bottom: 1px solid var(--c-line-strong); }
  .table td { display: table-cell; padding: 12px; vertical-align: middle; border-top: 1px solid var(--c-line); }
  .table tbody tr:first-child td { border-top: 0; }
  .table td::before { content: none; }
  .table td.cell-actions { white-space: nowrap; }
  .table th.num { text-align: right; }
  .table td.num { text-align: right; }
}