/*
  Rata Web: Gestaltungsgrundlage (RATA-55).
  Übernommen aus der Entwurfsmappe docs/web-version/design/rata.css im Umbrella-Repository Rata;
  die Hilfsklassen der Mappe ("mappe-") fehlen. Jede Farbe steht als Variable in :root und in
  beiden Dunkelblöcken; außerhalb der Variablen steht kein Farbwert.
*/

:root {
    --rata-primary: #087f95;
    --rata-primary-hover: #066879;
    --rata-primary-soft: #eaf4f8;
    --rata-on-primary: #ffffff;
    --rata-bg: #f5f8fa;
    --rata-surface: #ffffff;
    --rata-surface-soft: #f0f5f8;
    --rata-text: #14394b;
    --rata-text-muted: #718591;
    --rata-border: #dce6eb;
    --rata-border-strong: #b9cfda;

    --rata-ok-bg: #e4f2e9;
    --rata-ok: #317756;
    --rata-warn-bg: #fbf0d8;
    --rata-warn-border: #eed9a5;
    --rata-warn: #8e6e2b;
    --rata-error-bg: #fff0ed;
    --rata-error-border: #efcfc5;
    --rata-error: #a55741;
    --rata-file-pdf: #c8312b;
    --rata-file-xlsx: #1d6f42;
    --rata-neutral-bg: #eef2f4;
    --rata-neutral: #687b85;
    --rata-locked-bg: #e8eaf6;
    --rata-locked: #3c4a8a;
    --rata-free-bg: #e7f0fb;
    --rata-free: #1d5fa8;

    --rata-dot-ok: #4ba878;
    --rata-dot-warn: #d4a13c;
    --rata-dot-error: #d0634a;
    --rata-dot-none: var(--rata-neutral);
    --rata-knob: #fff;
    --rata-shadow-dialog: rgba(10, 30, 40, 0.18);
    --rata-shadow-doc: rgba(20, 57, 75, 0.05);
    --rata-draft-mark: rgba(165, 87, 65, 0.12);
    --rata-print-bg: #fff;
    --rata-backdrop: rgba(20, 57, 75, 0.35);
    --rata-source-intern-bg: #dff3ef;
    --rata-source-intern: #1d7466;
    --rata-source-cloud-bg: #ece7fa;
    --rata-source-cloud: #5b3fa8;
    --rata-status-progress-bg: #e6eefb;
    --rata-status-progress: #2f63b8;
    --rata-status-final-bg: #2f8a5b;
    --rata-status-final: #ffffff;
    --rata-bar-unresolved: #e08a2e;
    --rata-on-signal: #ffffff;

    --rata-font: "Segoe UI", Arial, sans-serif;
    --rata-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    --rata-font-size: 14px;
    /* Abstände und Radien kommen nur aus diesen Stufen; --rata-space ist der Grundabstand (Stufe 8),
       die Formularabstände sind benannte Stufen für Feldgruppen und Label. */
    --rata-radius-s: 5px;
    --rata-radius-m: 6px;
    --rata-radius: 8px;
    --rata-radius-l: 10px;
    --rata-radius-xl: 12px;
    --rata-radius-pill: 999px;
    --rata-space-1: 2px;
    --rata-space-2: 4px;
    --rata-space-3: 6px;
    --rata-space-4: 8px;
    --rata-space-5: 10px;
    --rata-space-6: 12px;
    --rata-space-7: 14px;
    --rata-space: 16px;
    --rata-space-9: 18px;
    --rata-space-10: 22px;
    --rata-space-11: 28px;
    --rata-space-12: 36px;
    --rata-space-13: 48px;
    --rata-space-14: 64px;
    --rata-space-form: 14px;
    --rata-space-label: 6px;
    --rata-sidebar: 232px;
    --rata-content: 1240px;
    color-scheme: light;
}

/* Dunkles Schema: folgt der Systemeinstellung, außer der Umschalter hat "hell" gewählt. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --rata-primary: #3fb3c9;
        --rata-primary-hover: #63c4d6;
        --rata-primary-soft: #143a44;
        --rata-on-primary: #06262e;
        --rata-bg: #0e181e;
        --rata-surface: #142229;
        --rata-surface-soft: #1a2b34;
        --rata-text: #dbe7ed;
        --rata-text-muted: #8ea3ae;
        --rata-border: #263943;
        --rata-border-strong: #3a5260;
        --rata-ok-bg: #16352a;
        --rata-ok: #7fcfa4;
        --rata-warn-bg: #362b13;
        --rata-warn-border: #5a4720;
        --rata-warn: #e7c27a;
        --rata-error-bg: #3a1f19;
        --rata-error-border: #5e3328;
        --rata-error: #f0a08a;
        --rata-file-pdf: #f28b82;
        --rata-file-xlsx: #7fd49a;
        --rata-neutral-bg: #1e2c33;
        --rata-neutral: #9fb0b8;
        --rata-locked-bg: #23284a;
        --rata-locked: #aab4f0;
        --rata-free-bg: #16304d;
        --rata-free: #8fbcf0;
        --rata-dot-ok: #4ba878;
        --rata-dot-warn: #d4a13c;
        --rata-dot-error: #d0634a;
        --rata-dot-none: var(--rata-neutral);
        --rata-knob: #dbe7ed;
        --rata-shadow-dialog: rgba(0, 0, 0, 0.4);
        --rata-shadow-doc: rgba(0, 0, 0, 0.3);
        --rata-draft-mark: rgba(240, 160, 138, 0.14);
        --rata-print-bg: #fff;
        --rata-backdrop: rgba(0, 0, 0, 0.55);
        --rata-source-intern-bg: #163a34;
        --rata-source-intern: #7fd6c6;
        --rata-source-cloud-bg: #2b2448;
        --rata-source-cloud: #bcaaf3;
        --rata-status-progress-bg: #1b2a45;
        --rata-status-progress: #8fb2f0;
        --rata-status-final-bg: #3f9e6e;
        --rata-status-final: #08251a;
        --rata-bar-unresolved: #e39a4a;
        --rata-on-signal: #0e181e;
        color-scheme: dark;
    }
}

/* Dunkles Schema, vom Umschalter gewählt (Cookie <Instanz>.theme, data-theme am html-Element). */
:root[data-theme="dark"] {
    --rata-primary: #3fb3c9;
    --rata-primary-hover: #63c4d6;
    --rata-primary-soft: #143a44;
    --rata-on-primary: #06262e;
    --rata-bg: #0e181e;
    --rata-surface: #142229;
    --rata-surface-soft: #1a2b34;
    --rata-text: #dbe7ed;
    --rata-text-muted: #8ea3ae;
    --rata-border: #263943;
    --rata-border-strong: #3a5260;
    --rata-ok-bg: #16352a;
    --rata-ok: #7fcfa4;
    --rata-warn-bg: #362b13;
    --rata-warn-border: #5a4720;
    --rata-warn: #e7c27a;
    --rata-error-bg: #3a1f19;
    --rata-error-border: #5e3328;
    --rata-error: #f0a08a;
    --rata-file-pdf: #f28b82;
    --rata-file-xlsx: #7fd49a;
    --rata-neutral-bg: #1e2c33;
    --rata-neutral: #9fb0b8;
    --rata-locked-bg: #23284a;
    --rata-locked: #aab4f0;
    --rata-free-bg: #16304d;
    --rata-free: #8fbcf0;
    --rata-dot-ok: #4ba878;
    --rata-dot-warn: #d4a13c;
    --rata-dot-error: #d0634a;
    --rata-dot-none: var(--rata-neutral);
    --rata-knob: #dbe7ed;
    --rata-shadow-dialog: rgba(0, 0, 0, 0.4);
    --rata-shadow-doc: rgba(0, 0, 0, 0.3);
    --rata-draft-mark: rgba(240, 160, 138, 0.14);
    --rata-print-bg: #fff;
    --rata-backdrop: rgba(0, 0, 0, 0.55);
    --rata-source-intern-bg: #163a34;
    --rata-source-intern: #7fd6c6;
    --rata-source-cloud-bg: #2b2448;
    --rata-source-cloud: #bcaaf3;
    --rata-status-progress-bg: #1b2a45;
    --rata-status-progress: #8fb2f0;
    --rata-status-final-bg: #3f9e6e;
    --rata-status-final: #08251a;
    --rata-bar-unresolved: #e39a4a;
    --rata-on-signal: #0e181e;
    color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--rata-bg); color: var(--rata-text); font: var(--rata-font-size)/1.5 var(--rata-font); }
a { color: var(--rata-primary); }
button, input, textarea { font: inherit; color: inherit; }
h1 { font-size: 30px; letter-spacing: -0.8px; margin: var(--rata-space-2) 0 0; font-weight: 650; }
h2 { font-size: 18px; margin: 0 0 var(--rata-space-6); font-weight: 650; }
h3 { font-size: 15px; margin: 0; font-weight: 650; }
p { margin: 0 0 var(--rata-space-5); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--rata-text-muted); }
.small { font-size: 12px; }

/*
  Grundelemente: gestaltet die nackten HTML-Elemente, die Bausteine und Seiten ohne eigene Klasse
  verwenden (Formularfelder, Tabellen in DataTable, Listen, Beschreibungslisten).
*/
main { min-width: 0; overflow-wrap: anywhere; }
main h1 { margin-bottom: var(--rata-space-10); }
main h2 { margin-top: var(--rata-space-10); }

/* Ein Button ohne Klasse sieht aus wie .btn; Hauptaktionen bleiben über ActionButton Primary
   ausdrücklich, auch der einzige Absendebutton eines Formulars wird nicht hervorgehoben. */
button:not(.btn):not(.switch) { display: inline-flex; align-items: center; justify-content: center; gap: var(--rata-space-4); background: var(--rata-surface); color: var(--rata-text); border: 1px solid var(--rata-border-strong); padding: var(--rata-space-4) var(--rata-space-7); border-radius: var(--rata-radius-m); font-size: 12px; cursor: pointer; white-space: nowrap; text-decoration: none; min-height: 34px; vertical-align: middle; }
button:not(.btn):not(.switch):hover { background: var(--rata-primary-soft); }
button:disabled { cursor: not-allowed; opacity: 0.6; }

input:not([type]), input[type=text], input[type=password], input[type=number], input[type=month], input[type=date], input[type=search], textarea { display: inline-block; max-width: 100%; border: 1px solid var(--rata-border-strong); border-radius: var(--rata-radius-m); padding: var(--rata-space-4) var(--rata-space-5); background: var(--rata-surface); color: var(--rata-text); vertical-align: middle; }
p > input:not([type]), p > input[type=text], p > input[type=password], p > input[type=number], p > input[type=month], p > input[type=date], p > input[type=search], p > textarea,
.field input:not([type]), .field input[type=text], .field input[type=password], .field input[type=number], .field input[type=month], .field input[type=date], .field input[type=search], .field textarea { display: block; width: 100%; }
input:focus, textarea:focus { outline: 2px solid var(--rata-primary); outline-offset: 0; border-color: var(--rata-primary); }
textarea { resize: vertical; line-height: 1.6; min-height: 84px; }
input[readonly], textarea[readonly] { background: var(--rata-surface-soft); color: var(--rata-text-muted); }
input[type=checkbox] { accent-color: var(--rata-primary); }
label { font-size: 12px; font-weight: 550; color: var(--rata-text-muted); }
/* Formularzeilen: Label und Feld bilden eine Gruppe mit kleinem Abstand, zwischen den Gruppen
   und vor dem Absendebutton steht der größere Formularabstand. */
p > label, .field label { display: block; margin-bottom: var(--rata-space-label); }
p > label:not(:first-child) { margin-top: var(--rata-space-form); }
p > :is(input, textarea) ~ :is(button, .btn) { margin-top: var(--rata-space-form); }
:not(p) > input + :is(button, .btn) { margin-left: var(--rata-space-4); }
form > p { margin: 0 0 var(--rata-space-form); }
.validation-message { color: var(--rata-error); font-size: 12px; margin-top: var(--rata-space-2); }

table { border-collapse: collapse; width: 100%; font-size: 13px; background: var(--rata-surface); margin-bottom: var(--rata-space-9); }
.table-wrap > table { margin-bottom: 0; }
th { text-align: left; background: var(--rata-surface-soft); color: var(--rata-text-muted); font-weight: 600; font-size: 11px; }
th, td { padding: var(--rata-space-6) var(--rata-space); border-bottom: 1px solid var(--rata-border); vertical-align: middle; }
tfoot td { background: var(--rata-surface-soft); font-weight: 600; border-bottom: 0; }

ul.rata-list { list-style: none; margin: 0 0 var(--rata-space); padding: 0; }
ul.rata-list > li { padding: var(--rata-space-5) 0; border-bottom: 1px solid var(--rata-border); }
ul.rata-list > li:last-child { border-bottom: 0; }

dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--rata-space-2) var(--rata-space); font-size: 13px; margin: 0 0 var(--rata-space); }
dt { color: var(--rata-text-muted); }
dd { margin: 0; }

/* App-Rahmen */
.app { display: flex; min-height: 100vh; }
.sidebar { width: var(--rata-sidebar); flex-shrink: 0; overflow-wrap: anywhere; background: var(--rata-surface); border-right: 1px solid var(--rata-border); padding: var(--rata-space-11) var(--rata-space-9) var(--rata-space-9); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: var(--rata-space-6); font-size: 25px; font-weight: 700; letter-spacing: -1px; margin: 0 var(--rata-space-3) var(--rata-space-12); color: var(--rata-text); text-decoration: none; }
.brand img { width: 40px; height: 40px; }
.brand small { display: block; font-size: 11px; letter-spacing: 0; color: var(--rata-text-muted); font-weight: 400; margin-top: var(--rata-space-1); }
.nav-caption { font-size: 10px; font-weight: 700; letter-spacing: 1.6px; color: var(--rata-text-muted); margin: var(--rata-space-9) var(--rata-space-6) var(--rata-space-5); text-transform: uppercase; }
.nav-item { display: flex; gap: var(--rata-space-6); align-items: center; padding: var(--rata-space-5) var(--rata-space-6); border-radius: var(--rata-radius); color: var(--rata-text-muted); text-decoration: none; margin-bottom: var(--rata-space-1); font-size: 13px; }
.nav-item:hover { background: var(--rata-surface-soft); }
.nav-item.active { background: var(--rata-primary-soft); color: var(--rata-primary); font-weight: 600; }
.nav-item .count { margin-left: auto; }
/* Schnellzugang unter „Monate“ (RATA-64): eingerückt mit feiner Führungslinie links. */
.nav-subs { margin: 0 0 var(--rata-space-2) var(--rata-space-6); padding-left: var(--rata-space-2); border-left: 1px solid var(--rata-border); }
.nav-sub { padding: var(--rata-space-3) var(--rata-space-4); gap: var(--rata-space-4); font-size: 12px; white-space: nowrap; }
.sources { margin-top: auto; padding: var(--rata-space-7) var(--rata-space-5) 0; border-top: 1px solid var(--rata-border); font-size: 12px; color: var(--rata-text-muted); line-height: 1.8; }
.sources a { color: inherit; text-decoration: none; display: block; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--rata-radius-pill); margin-right: var(--rata-space-4); background: var(--rata-dot-ok); vertical-align: 1px; }
.dot.warn { background: var(--rata-dot-warn); }
.dot.error { background: var(--rata-dot-error); }
.dot.none { background: var(--rata-dot-none); }
.main { flex: 1; min-width: 0; }
.topbar { min-height: 56px; overflow-wrap: anywhere; border-bottom: 1px solid var(--rata-border); padding: 0 var(--rata-space-12); display: flex; justify-content: space-between; align-items: center; color: var(--rata-text-muted); font-size: 12px; background: var(--rata-surface); gap: var(--rata-space-4) var(--rata-space); flex-wrap: wrap; }
/* Ein langer Name ohne Leerzeichen bricht in der Kopfleiste um, statt die Seite zu verbreitern;
   reicht die Breite für Ort und Nutzergruppe nicht, rückt die Nutzergruppe in eine zweite Zeile. */
.topbar > * { min-width: 0; }
.topbar .user { display: flex; flex-wrap: wrap; gap: var(--rata-space-4) var(--rata-space-7); align-items: center; min-width: 0; }
.topbar .user > span { display: inline-flex; gap: var(--rata-space-3); align-items: center; min-width: 0; overflow-wrap: anywhere; }
.topbar form { margin: 0; }
.content { max-width: var(--rata-content); margin: 0 auto; padding: var(--rata-space-11) var(--rata-space-12) var(--rata-space-14); }

/* Schemaumschalter */
.theme-switch { display: inline-flex; gap: var(--rata-space-1); margin: 0; }
.btn.active { background: var(--rata-primary-soft); color: var(--rata-primary); font-weight: 600; }

/* Anmeldung ohne App-Rahmen (Mappe 06) */
.login-frame { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--rata-space-7); padding: var(--rata-space-10) var(--rata-space); }
.login { width: 100%; max-width: 380px; margin: 0 auto; background: var(--rata-surface); border: 1px solid var(--rata-border); border-radius: var(--rata-radius-xl); padding: var(--rata-space-11); }
.login .brand { margin: 0 0 var(--rata-space-10); }
/* Feld und Button teilen sich die Zeile; reicht die Breite nicht, rückt der Button darunter, statt
   die Seite zu verbreitern (Review 433d95e). */
.inline-form { display: flex; flex-wrap: wrap; gap: var(--rata-space-4); }
.inline-form input { flex: 1 1 12em; min-width: 0; }
.inline-form > * + :is(button, .btn) { margin-left: 0; }

/* Seitenkopf */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--rata-space); margin-bottom: var(--rata-space-10); flex-wrap: wrap; }
.page-head h1 { margin-bottom: 0; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.6px; color: var(--rata-text-muted); text-transform: uppercase; }
.page-actions { display: flex; gap: var(--rata-space-4); flex-wrap: wrap; align-items: center; }
.back { font-size: 12px; text-decoration: none; display: inline-block; margin-bottom: var(--rata-space-7); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--rata-space-4); background: var(--rata-surface); color: var(--rata-text); border: 1px solid var(--rata-border-strong); padding: var(--rata-space-4) var(--rata-space-7); border-radius: var(--rata-radius-m); font-size: 12px; cursor: pointer; white-space: nowrap; text-decoration: none; min-height: 34px; }
.btn:hover { background: var(--rata-primary-soft); }
.btn.primary { background: var(--rata-primary); border-color: var(--rata-primary); color: var(--rata-on-primary); font-weight: 600; }
.btn.primary:hover { background: var(--rata-primary-hover); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--rata-primary); }
.btn.quiet:hover { background: var(--rata-primary-soft); }
.btn.quiet.active { background: var(--rata-primary-soft); }
.btn.danger { color: var(--rata-error); border-color: var(--rata-error-border); }
.btn.small { min-height: 28px; padding: var(--rata-space-2) var(--rata-space-5); font-size: 11px; }
.icon { flex: none; vertical-align: -3px; }
.btn.small .icon { width: 14px; height: 14px; }

/* Kacheln */
/* Gesamtfortschritt des Monats (RATA-118): gestapelter Balken in den Farben der Status-Chips, Stücke und Legende filtern. */
.month-progress { margin: 0 0 var(--rata-space); padding: var(--rata-space-7) var(--rata-space); background: var(--rata-surface); border: 1px solid var(--rata-border); border-radius: var(--rata-radius-l); }
.month-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rata-space-5); flex-wrap: wrap; font-size: 13px; }
.month-progress-percent { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.month-progress-effort { margin-top: var(--rata-space-7); font-size: 12.5px; }
.month-progress-effort .month-progress-percent { color: var(--rata-warn); font-size: 13px; }
.month-progress-bar { display: flex; height: 10px; margin-top: var(--rata-space-4); overflow: hidden; border-radius: var(--rata-radius-pill); background: var(--rata-neutral-bg); }
.month-progress-bar-thin { height: 6px; }
.month-progress-bar > * { display: block; height: 100%; }
.month-progress-part:hover, .month-progress-part.on { filter: brightness(0.9); }
.month-progress-legend { display: flex; flex-wrap: wrap; gap: var(--rata-space-3) var(--rata-space-7); margin-top: var(--rata-space-4); font-size: 12px; }
.month-progress-item { display: inline-flex; align-items: center; gap: var(--rata-space-3); color: var(--rata-text-muted); text-decoration: none; }
.month-progress-item:hover, .month-progress-item.on { color: var(--rata-primary); }
.month-progress-item.on { font-weight: 600; }
.month-progress-dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--rata-radius-pill); }
.status-part-finalized { background: var(--rata-status-final-bg); }
.status-part-approved { background: var(--rata-ok); }
.status-part-not-required { background: var(--rata-neutral); }
.status-part-in-progress { background: var(--rata-status-progress); }
.status-part-not-started { background: repeating-linear-gradient(45deg, var(--rata-border-strong) 0 3px, var(--rata-neutral-bg) 3px 6px); }
/* Kennzahlen mit Symbol auf getöntem Feld (RATA-118): fünf in einer Zeile, darunter drei, auf dem Telefon zwei. */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--rata-space-5); margin-bottom: var(--rata-space); }
.kpi { display: flex; flex-direction: column; gap: var(--rata-space-2); min-width: 0; padding: var(--rata-space-6) var(--rata-space-7); background: var(--rata-surface); border: 1px solid var(--rata-border); border-radius: var(--rata-radius-l); color: var(--rata-text); text-decoration: none; }
a.kpi:hover { border-color: var(--rata-warn-border); }
.kpi-title { display: flex; align-items: center; gap: var(--rata-space-4); font-size: 12px; color: var(--rata-text-muted); }
.kpi-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: var(--rata-radius); }
.kpi-icon svg { width: 16px; height: 16px; }
.kpi-value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi-value small { font-size: 12px; font-weight: 400; color: var(--rata-text-muted); }
.kpi-sub { font-size: 12px; color: var(--rata-text-muted); overflow-wrap: anywhere; }
.kpi-blue .kpi-icon { background: var(--rata-status-progress-bg); color: var(--rata-status-progress); }
.kpi-violet .kpi-icon { background: var(--rata-source-cloud-bg); color: var(--rata-source-cloud); }
.kpi-accent .kpi-icon { background: var(--rata-primary-soft); color: var(--rata-primary); }
.kpi-highlight { border-color: var(--rata-primary); box-shadow: inset 0 3px 0 var(--rata-primary); }
.kpi-warn { background: var(--rata-warn-bg); border-color: var(--rata-warn-border); }
.kpi-warn .kpi-icon { background: var(--rata-surface); color: var(--rata-warn); }
.kpi-warn .kpi-title, .kpi-warn .kpi-value, .kpi-warn .kpi-value small, .kpi-warn .kpi-sub { color: var(--rata-warn); }
.kpi-grey .kpi-icon { background: var(--rata-neutral-bg); color: var(--rata-neutral); }
.kpi-grey .kpi-value { color: var(--rata-neutral); }
@media (max-width: 1000px) {
    .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Statusmarken */
.pill { display: inline-flex; align-items: center; gap: var(--rata-space-3); border-radius: var(--rata-radius-s); font-size: 11px; padding: var(--rata-space-2) var(--rata-space-4); white-space: nowrap; line-height: 1.4; }
.pill.ok { background: var(--rata-ok-bg); color: var(--rata-ok); }
.pill.run { background: var(--rata-primary-soft); color: var(--rata-primary); }
.pill.none { background: var(--rata-neutral-bg); color: var(--rata-neutral); }
.pill.warn { background: var(--rata-warn-bg); color: var(--rata-warn); }
.pill.error { background: var(--rata-error-bg); color: var(--rata-error); }
.pill.locked { background: var(--rata-locked-bg); color: var(--rata-locked); }
.pill.free { background: var(--rata-free-bg); color: var(--rata-free); }
.project { display: inline-block; font-size: 11px; padding: var(--rata-space-1) var(--rata-space-4); border-radius: var(--rata-radius-s); background: var(--rata-surface-soft); color: var(--rata-text-muted); border: 1px solid var(--rata-border); max-width: 100%; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* Projekt-Chip (RATA-63): Quelle als Symbol auf farbigem Feld, Trennstrich, Schlüssel in Festbreitenschrift. */
.project-chip { display: inline-flex; align-items: stretch; vertical-align: middle; max-width: 100%; white-space: nowrap; font-size: 11px; line-height: 1.5; border: 1px solid var(--rata-border); border-radius: var(--rata-radius-s); overflow: hidden; background: var(--rata-surface-soft); }
.project-chip-source { display: inline-flex; align-items: center; padding: 0 var(--rata-space-3); border-right: 1px solid var(--rata-border); background: var(--rata-neutral-bg); color: var(--rata-neutral); }
.project-chip-source .icon { width: 12px; height: 12px; }
.project-chip-intern .project-chip-source { background: var(--rata-source-intern-bg); color: var(--rata-source-intern); }
.project-chip-cloud .project-chip-source { background: var(--rata-source-cloud-bg); color: var(--rata-source-cloud); }
.project-chip-key { padding: var(--rata-space-1) var(--rata-space-3); font-family: var(--rata-font-mono); color: var(--rata-text); overflow: hidden; text-overflow: ellipsis; }
/* Ticket-Chip (RATA-116): Projekt-Chip mit Nummer; als Link Rand und Nummer in Akzentfarbe, Pfeil beim Überfahren. */
.ticket-chip-num { flex: 0 0 auto; display: inline-flex; align-items: center; padding: var(--rata-space-1) var(--rata-space-3); border-left: 1px solid var(--rata-border); background: var(--rata-surface); font-family: var(--rata-font-mono); font-weight: 700; color: var(--rata-text); }
a.ticket-chip { color: var(--rata-text); text-decoration: none; cursor: pointer; transition: border-color .12s; }
.ticket-chip-ext { display: inline-flex; align-items: center; width: 0; overflow: hidden; opacity: 0; background: var(--rata-surface); color: var(--rata-text-muted); transition: opacity .12s; }
.ticket-chip-ext .icon { width: 11px; height: 11px; }
a.ticket-chip:hover { border-color: var(--rata-primary); }
a.ticket-chip:hover .ticket-chip-num { color: var(--rata-primary); text-decoration: underline; }
a.ticket-chip:hover .ticket-chip-ext { width: auto; padding-right: var(--rata-space-2); opacity: 1; }
a.ticket-chip:focus-visible { outline: 2px solid var(--rata-primary); outline-offset: 2px; }

/* Status-Symbol eines Nachweises (RATA-63): je grüner, desto fertiger; Plaketten oben rechts. */
.status-icon { position: relative; display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--rata-radius-pill); border: 1px solid transparent; }
.status-icon .icon { width: 16px; height: 16px; }
.status-icon-not-started { border: 1px dashed var(--rata-border-strong); color: var(--rata-neutral); }
.status-icon-in-progress { background: var(--rata-status-progress-bg); color: var(--rata-status-progress); }
.status-icon-approved { background: var(--rata-ok-bg); color: var(--rata-ok); }
.status-icon-finalized { background: var(--rata-status-final-bg); color: var(--rata-status-final); }
.status-icon-not-required { color: var(--rata-text-muted); opacity: 0.6; }
.status-icon-unknown { background: var(--rata-neutral-bg); color: var(--rata-neutral); }
/* Monatsstatus (MonthStatusIcon, RATA-64); freigegeben, festgeschrieben und erledigt nutzen die Klassen oben. */
.status-icon-running { background: var(--rata-status-progress-bg); color: var(--rata-status-progress); }
.status-icon-incomplete { background: var(--rata-warn-bg); color: var(--rata-warn); }
.status-icon-sources-incomplete, .status-icon-late { background: var(--rata-error-bg); color: var(--rata-error); }
.status-icon-small { width: 18px; height: 18px; vertical-align: middle; }
.status-icon-small .icon { width: 11px; height: 11px; }
.status-badges { position: absolute; top: calc(-1 * var(--rata-space-2)); right: calc(-1 * var(--rata-space-3)); display: flex; gap: var(--rata-space-1); }
.status-badge { display: inline-grid; place-items: center; min-width: 14px; height: 14px; padding: 0 var(--rata-space-1); border-radius: var(--rata-radius-pill); font-size: 10px; font-weight: 700; line-height: 1; color: var(--rata-on-signal); }
.status-badge-review { background: var(--rata-dot-warn); }
.status-badge-late { background: var(--rata-dot-error); }

/* Geloggte Stunden je Kunde (RATA-63): Hauptzahl, Nebenwerte, Anteilsbalken. */
.hours { min-width: 0; }
.hours-values { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--rata-space-4); }
.hours-main { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours .warn { color: var(--rata-warn); }
.hours-side { font-variant-numeric: tabular-nums; }
.hours-bar { display: flex; height: 8px; margin-top: var(--rata-space-2); border-radius: var(--rata-radius-pill); overflow: hidden; background: var(--rata-surface-soft); }
.hours-bar-in { background: var(--rata-dot-ok); }
.hours-bar-open { background: var(--rata-bar-unresolved); }
.hours-bar-out { background: var(--rata-border-strong); }

/* Legende zu Chips, Status-Symbolen und Stundenbalken (RATA-63). */
.legend { display: flex; flex-wrap: wrap; gap: var(--rata-space-3) var(--rata-space-9); margin: 0 0 var(--rata-space-7); font-size: 11px; color: var(--rata-text-muted); }
.legend-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rata-space-3) var(--rata-space-6); }
.legend-item { display: inline-flex; align-items: center; gap: var(--rata-space-3); }
.legend-swatch { display: inline-block; width: 14px; height: 8px; border-radius: var(--rata-radius-pill); }

/* Kundentabelle der Monatsübersicht: Symbol und Aktion so schmal wie nötig. */
.customers-table th { white-space: nowrap; }
.customers-table .col-status { width: 1%; }
.customers-table .col-hours { min-width: 180px; }
/* Die ganze Zeile ist das Ziel (RATA-117): Link oder Knopf am Kundennamen überdeckt die Zeile; ein Fokus rahmt sie. */
.customers-table tr.customer-row { position: relative; cursor: pointer; }
.customers-table tr.customer-row:hover td { background: var(--rata-surface-soft); }
.customers-table tr.customer-row:has(.row-link:focus-visible) { outline: 2px solid var(--rata-primary); outline-offset: -2px; }
.customers-table .row-link, .customers-table button.row-link:not(.btn):not(.switch) { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--rata-text); text-align: left; white-space: normal; text-decoration: none; cursor: pointer; }
.customers-table button.row-link:not(.btn):not(.switch):hover { background: none; }
.customers-table .row-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Über der Zeilenfläche: Die PT-Werte zeigen beim Überfahren die Stunden als Tooltip und haben dasselbe Ziel wie die Zeile. */
.customers-table .hours-value, .customers-table button.hours-value:not(.btn):not(.switch) { position: relative; z-index: 2; display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; color: inherit; text-decoration: none; cursor: pointer; }
.customers-table button.hours-value:not(.btn):not(.switch):hover { background: none; }
.customers-table .row-link:focus-visible { outline: none; }
.customers-table tr.customer-row:hover .row-link { color: var(--rata-primary); text-decoration: underline; }
.customers-table tr.is-quiet td { color: var(--rata-text-muted); }
.customers-table tr.is-quiet .row-link, .customers-table tr.is-quiet button.row-link:not(.btn):not(.switch) { color: var(--rata-text-muted); font-weight: 500; }
.customers-table .customer-projects { opacity: 0.85; }
.customers-table .col-go { width: 1%; white-space: nowrap; text-align: right; color: var(--rata-text-muted); font-size: 12px; }
.customers-table .row-hint { opacity: 0; margin-right: var(--rata-space-3); }
.customers-table tr.customer-row:hover .row-hint, .customers-table tr.customer-row:has(.row-link:focus-visible) .row-hint { opacity: 1; color: var(--rata-primary); }
.status-chips { display: flex; flex-wrap: wrap; gap: var(--rata-space-3); align-items: center; }
.status-chip { display: inline-flex; align-items: center; gap: var(--rata-space-3); padding: var(--rata-space-1) var(--rata-space-5) var(--rata-space-1) var(--rata-space-4); border: 1px solid transparent; border-radius: var(--rata-radius-pill); font-size: 12px; font-weight: 600; white-space: nowrap; }
.status-chip svg { width: 14px; height: 14px; flex: none; }
.status-chip-not-started { border: 1px dashed var(--rata-border-strong); color: var(--rata-text-muted); font-weight: 500; }
.status-chip-in-progress { background: var(--rata-status-progress-bg); color: var(--rata-status-progress); }
.status-chip-approved { background: var(--rata-ok-bg); color: var(--rata-ok); }
.status-chip-finalized { background: var(--rata-status-final-bg); color: var(--rata-status-final); }
.status-chip-not-required, .status-chip-unknown { background: var(--rata-neutral-bg); color: var(--rata-neutral); font-weight: 500; }
.status-chip-review { background: var(--rata-warn-bg); color: var(--rata-warn); }
.status-chip-late { background: var(--rata-error-bg); color: var(--rata-error); }

/* Nur für Bildschirmleser. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.count { background: var(--rata-surface-soft); border-radius: var(--rata-radius-s); padding: var(--rata-space-1) var(--rata-space-3); font-size: 10px; color: var(--rata-text-muted); }

/* Hinweise */
.notice { display: flex; gap: var(--rata-space-6); align-items: center; padding: var(--rata-space-6) var(--rata-space); background: var(--rata-primary-soft); border: 1px solid var(--rata-border); color: var(--rata-text); border-radius: var(--rata-radius); margin-bottom: var(--rata-space); font-size: 13px; }
.notice > .grow { flex: 1; }
.notice.warn { background: var(--rata-warn-bg); border-color: var(--rata-warn-border); color: var(--rata-warn); }
.notice.error { background: var(--rata-error-bg); border-color: var(--rata-error-border); color: var(--rata-error); }
.notice.ok { background: var(--rata-ok-bg); border-color: transparent; color: var(--rata-ok); }
.notice.locked { background: var(--rata-locked-bg); border-color: transparent; color: var(--rata-locked); }

/* Panels und Tabellen */
.panel { background: var(--rata-surface); border: 1px solid var(--rata-border); border-radius: var(--rata-radius-l); margin-bottom: var(--rata-space-9); }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--rata-space-6); padding: var(--rata-space-7) var(--rata-space-9); border-bottom: 1px solid var(--rata-border); }
.panel-head h2 { margin: 0; }
/* Ein Kopfzusatz mit dieser Klasse steht rechts, auch wenn davor eine Marke neben dem Titel steht. */
.panel-head .panel-head-end { margin-left: auto; }
[data-field="projects-without-customer"] > .panel-head { justify-content: flex-start; }
.panel-body { padding: var(--rata-space) var(--rata-space-9); }
.table-wrap { overflow-x: auto; }
/* Eine Tabelle im Panel sitzt bündig an dessen Rand wie in der Mappe. */
.panel-body > .table-wrap { margin: calc(-1 * var(--rata-space)) calc(-1 * var(--rata-space-9)); border-radius: 0 0 var(--rata-radius-l) var(--rata-radius-l); }
.panel-body > .table-wrap:not(:last-child) { margin-bottom: var(--rata-space); border-radius: 0; }
/* Steht ein Satz über der Tabelle, rückt sie nicht unter ihn. */
.panel-body > p + .table-wrap { margin-top: 0; }
td.key { font-family: var(--rata-font-mono); white-space: nowrap; }
td.name { overflow-wrap: anywhere; }
:is(th, td).source { white-space: nowrap; }
tr.clickable:hover td { background: var(--rata-surface-soft); cursor: pointer; }
.cell-title { font-weight: 600; }
.cell-sub { display: flex; gap: var(--rata-space-3); flex-wrap: wrap; margin-top: var(--rata-space-2); }

/* Formulare */
.field { margin-bottom: var(--rata-space-form); }
.check { display: flex; gap: var(--rata-space-4); align-items: center; font-size: 13px; color: var(--rata-text); font-weight: 400; }
.switch { display: inline-flex; align-items: center; gap: var(--rata-space-4); font-size: 12px; color: var(--rata-text); white-space: nowrap; }
button.switch { background: none; border: 0; padding: 0; cursor: pointer; }
.switch i { flex: none; width: 30px; height: 17px; border-radius: var(--rata-radius-pill); background: var(--rata-border-strong); position: relative; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: var(--rata-radius-pill); background: var(--rata-knob); }
.switch.on i { background: var(--rata-primary); }
.switch.on i::after { left: 15px; }

/* Dialog */
.dialog { max-width: 560px; background: var(--rata-surface); border: 1px solid var(--rata-border); border-radius: var(--rata-radius-xl); box-shadow: 0 18px 50px var(--rata-shadow-dialog); }
.dialog-head { padding: var(--rata-space-9) var(--rata-space-10) 0; }
.dialog-body { padding: var(--rata-space-7) var(--rata-space-10); }
.dialog-foot { padding: var(--rata-space-7) var(--rata-space-10) var(--rata-space-9); display: flex; justify-content: flex-end; gap: var(--rata-space-4); border-top: 1px solid var(--rata-border); }
/* Natives <dialog> mit den Dialogklassen (RATA-59): ohne Browser-Innenabstand, zentriert, der
   Hintergrund wird abgedunkelt; die Überschrift ist so groß wie ein Paneltitel. */
dialog.dialog { padding: 0; width: calc(100% - var(--rata-space-13)); color: var(--rata-text); }
dialog.dialog::backdrop { background: var(--rata-shadow-dialog); }
.dialog-head h2 { margin: 0; font-size: 16px; }
.dialog-body > p { margin: 0; }

/* Icon-Button (RATA-59): klein, quadratisch, ohne Rahmen, neben einem Text. „button.icon-btn:not(.btn)“
   wiegt so viel wie die Regel für Buttons ohne Klasse oben und gewinnt, weil sie später steht. */
button.icon-btn:not(.btn) { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-height: 0; padding: 0; border: 0; border-radius: var(--rata-radius-m); background: transparent; color: var(--rata-text-muted); cursor: pointer; vertical-align: middle; }
button.icon-btn:not(.btn):hover { background: var(--rata-primary-soft); color: var(--rata-primary); }
.icon-btn .icon { width: 14px; height: 14px; }
.customer-name { min-width: 12em; }
.customer-name .icon-btn { margin-left: var(--rata-space-2); }
.customer-name > span { overflow-wrap: break-word; }

.choice { display: flex; gap: var(--rata-space-6); padding: var(--rata-space-6) var(--rata-space-7); border: 1px solid var(--rata-border); border-radius: var(--rata-radius); margin-bottom: var(--rata-space-4); }
.choice.selected { border-color: var(--rata-primary); background: var(--rata-primary-soft); }
.choice input { margin-top: var(--rata-space-2); }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; gap: var(--rata-space-5); padding: var(--rata-space-4) 0; border-bottom: 1px solid var(--rata-border); font-size: 13px; }
.checklist li:last-child { border-bottom: 0; }

/* Monatsreiter und Zuordnung in der Zeile (Entwurf 01) */
.months { display: flex; gap: var(--rata-space-3); margin: 0 0 var(--rata-space-10); overflow-x: auto; padding-bottom: var(--rata-space-1); }
.month { flex: 0 0 auto; min-width: 118px; border: 1px solid var(--rata-border); background: var(--rata-surface); border-radius: var(--rata-radius); padding: var(--rata-space-4) var(--rata-space-6); text-decoration: none; color: var(--rata-text); font-size: 12px; }
.month b { display: block; font-size: 13px; margin-bottom: var(--rata-space-2); }
.month.active { border-color: var(--rata-primary); box-shadow: inset 0 -3px 0 var(--rata-primary); }
.month-list { margin: calc(-1 * var(--rata-space-6)) 0 var(--rata-space-9); font-size: 13px; }
.month-list ul { display: flex; flex-wrap: wrap; gap: var(--rata-space-2) var(--rata-space-6); list-style: none; margin: var(--rata-space-4) 0 0; padding: 0; }
.assign { display: flex; gap: var(--rata-space-4); align-items: center; flex-wrap: wrap; }

/* Banner und modaler Dialog (Entwurf 04) */
.banner { align-items: flex-start; }
.banner-actions { display: flex; gap: var(--rata-space-4); flex-wrap: wrap; }
.dialog-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: var(--rata-space); background: var(--rata-backdrop); }
.dialog-backdrop > .dialog { width: 100%; max-height: 90vh; overflow-y: auto; }
/* Die Druckvorschau ist breiter als die übrigen Dialoge, der Rahmen füllt sie ohne seitliches Scrollen (RATA-96). */
.dialog-backdrop > .dialog[data-dialog=print-preview] { max-width: min(820px, 100%); }
.states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rata-space-5); margin-bottom: var(--rata-space-11); }
.state { border: 1px solid var(--rata-border); background: var(--rata-surface); border-radius: var(--rata-radius); padding: var(--rata-space-6) var(--rata-space-7); font-size: 12px; }
.state b { display: block; margin: var(--rata-space-3) 0 var(--rata-space-2); font-size: 13px; }
.compact .group { grid-template-columns: minmax(0, 1fr) 90px; padding: var(--rata-space-6) 0; }

/* Bearbeitung an Ort und Stelle (Entwurf 03) */
.group-tools { display: flex; gap: var(--rata-space-2); margin-top: var(--rata-space-5); flex-wrap: wrap; }
.inline-edit { cursor: text; border-radius: var(--rata-radius-s); }
.inline-edit:hover { outline: 1px dashed var(--rata-border-strong); outline-offset: 2px; }
.inline-edit-field { display: block; width: 100%; }
ul.ticket-list, ol.outline { list-style: none; margin: 0; padding: 0; }
ol.outline li { padding: var(--rata-space-2) 0; font-size: 12px; }
.effort-mode .inline-form, .reason .inline-form, .group-meta .inline-form { display: inline-flex; }

/* Nachweisdokument */
.statement-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--rata-space-10); align-items: start; }
.document { background: var(--rata-surface); border: 1px solid var(--rata-border); border-radius: var(--rata-radius-s); box-shadow: 0 8px 28px var(--rata-shadow-doc); padding: var(--rata-space-12) var(--rata-space-12); }
.doc-head { border-bottom: 2px solid var(--rata-text); padding-bottom: var(--rata-space-9); margin-bottom: var(--rata-space-2); }
.doc-head h2 { font-size: 26px; letter-spacing: -0.6px; margin: var(--rata-space-5) 0 var(--rata-space-4); }
.doc-meta { display: flex; justify-content: space-between; gap: var(--rata-space-6); color: var(--rata-text-muted); font-size: 12px; flex-wrap: wrap; }
.doc-project { display: flex; align-items: center; gap: var(--rata-space-5); margin: var(--rata-space-10) 0 var(--rata-space-2); padding: var(--rata-space-4) var(--rata-space-6); border: 1px solid var(--rata-border); border-radius: var(--rata-radius-m); background: var(--rata-surface-soft); font-size: 13px; }
.doc-project b { flex: 1; }
.doc-project [data-field="project-summary"] { font-variant-numeric: tabular-nums; }
/* Gleich spezifisch wie button:not(.btn):not(.switch) oben und später: Der leise Link überschreibt Rahmen, Fläche und Höhe des Standardbuttons. */
button.link-quiet:not(.btn):not(.switch) { border: 0; background: transparent; padding: 0 var(--rata-space-2); min-height: 0; color: var(--rata-text-muted); font-size: 12px; cursor: pointer; white-space: nowrap; }
button.link-quiet:not(.btn):not(.switch):hover { background: transparent; color: var(--rata-primary); text-decoration: underline; }
.print-mini { border: 1px solid var(--rata-border); border-radius: var(--rata-radius-s); padding: var(--rata-space-6); margin: var(--rata-space-5) 0; background: var(--rata-surface); color: var(--rata-text); }
.print-mini-title { font-size: 12px; font-weight: 700; }
.print-mini-period { font-size: 10px; color: var(--rata-text-muted); margin-bottom: var(--rata-space-4); }
.print-mini-heading { font-size: 10px; font-weight: 700; margin-top: var(--rata-space-4); }
.print-mini-line { height: 4px; width: 85%; border-radius: var(--rata-radius-pill); background: var(--rata-border-strong); margin: var(--rata-space-2) 0; }
.print-mini-line.short { width: 60%; }
.print-mini-total { height: 1px; background: var(--rata-text); margin-top: var(--rata-space-5); }
.print-preview-frame { display: block; width: 100%; height: 70vh; border: 1px solid var(--rata-border); border-radius: var(--rata-radius-s); background: var(--rata-surface); }
.group { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: var(--rata-space-10); padding: var(--rata-space-9) 0; border-bottom: 1px solid var(--rata-border); }
/* „+ Neue Leistungsgruppe“ (RATA-120): gestrichelte Fläche am Ende der Liste bzw. eines Projektabschnitts,
   an Ort und Stelle zur Eingabekarte; die eben angelegte Gruppe leuchtet einmal auf. */
.new-group-add, button.new-group-add:not(.btn):not(.switch) { display: flex; align-items: center; justify-content: center; gap: var(--rata-space-4); width: 100%; margin: var(--rata-space-6) 0; padding: var(--rata-space-6); border: 1.5px dashed var(--rata-border-strong); border-radius: var(--rata-radius-l); background: none; color: var(--rata-text-muted); font-size: 13.5px; white-space: normal; transition: border-color .12s, color .12s, background-color .12s; }
.new-group-add .icon { width: 18px; height: 18px; }
.new-group-add:hover, .new-group-add:focus-visible, button.new-group-add:not(.btn):not(.switch):hover, button.new-group-add:not(.btn):not(.switch):focus-visible { border-color: var(--rata-primary); color: var(--rata-primary); background: var(--rata-primary-soft); }
.new-group-add.small, button.new-group-add.small:not(.btn):not(.switch) { min-height: 0; padding: var(--rata-space-4); font-size: 12.5px; }
.new-group-card { display: grid; gap: var(--rata-space-4); margin: var(--rata-space-6) 0; padding: var(--rata-space-6) var(--rata-space-7); border: 1.5px solid var(--rata-primary); border-radius: var(--rata-radius-l); background: var(--rata-surface); box-shadow: 0 0 0 3px var(--rata-primary-soft); }
.new-group-name, .new-group-description { display: block; width: 100%; min-width: 0; }
.new-group-name { font-weight: 600; }
.new-group-description { min-height: 52px; resize: vertical; }
.new-group-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rata-space-4); }
.new-group-project { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rata-space-4); min-width: 0; }
.new-group-buttons { display: flex; gap: var(--rata-space-4); margin-left: auto; }
.group-created { animation: group-created 2s ease-out 1; }
@keyframes group-created { from { background-color: var(--rata-primary-soft); } to { background-color: transparent; } }
.group.flagged { border-left: 3px solid var(--rata-dot-warn); padding-left: var(--rata-space-7); margin-left: calc(-1 * var(--rata-space-9)); border-radius: 0; }
/* Ohne Berechnung (RATA-113): blauer Rand, Marke und durchgestrichene PT; überdeckt den Prüfrand. */
.group.not-billed { border-left: 3px solid var(--rata-free); padding-left: var(--rata-space-7); margin-left: calc(-1 * var(--rata-space-9)); border-radius: 0; }
.group-billing { margin-top: var(--rata-space-5); }
.strike, .effort-days.strike input { text-decoration: line-through; color: var(--rata-text-muted); }
.effort-not-billed { color: var(--rata-free); font-weight: 700; font-variant-numeric: tabular-nums; }
.side-row.free, .head-totals .free, .doc-total-sub.free, tr.free, b.free { color: var(--rata-free); }
.head-totals { display: inline-flex; flex-wrap: wrap; gap: var(--rata-space-2) var(--rata-space-5); font-size: 13px; color: var(--rata-text-muted); }
.head-totals b { color: var(--rata-text); }
.head-totals .free b { color: var(--rata-free); }
.row-billing { display: flex; flex-wrap: wrap; gap: 0 var(--rata-space-4); margin-top: var(--rata-space-2); color: var(--rata-text-muted); }
.row-billing .free { color: var(--rata-free); }
.group-title { display: flex; gap: var(--rata-space-4); align-items: baseline; flex-wrap: wrap; }
.group-title .pos { color: var(--rata-text-muted); }
.group-desc { margin-top: var(--rata-space-4); white-space: pre-line; line-height: 1.65; }
.group-desc.empty { color: var(--rata-text-muted); font-style: italic; }
.group-meta { display: flex; gap: var(--rata-space-3); flex-wrap: wrap; margin-top: var(--rata-space-5); align-items: center; }
.reason { font-size: 12px; color: var(--rata-warn); background: var(--rata-warn-bg); border-radius: var(--rata-radius-s); padding: var(--rata-space-3) var(--rata-space-5); margin-top: var(--rata-space-5); display: flex; gap: var(--rata-space-5); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.effort { text-align: right; }
.effort-days { display: flex; justify-content: flex-end; align-items: center; gap: var(--rata-space-3); }
.effort-days input { width: 7ch; text-align: right; font-size: 20px; font-weight: 700; padding: var(--rata-space-3) var(--rata-space-4); font-variant-numeric: tabular-nums; border-color: var(--rata-text-muted); }
.effort-days input:focus { border-color: var(--rata-primary); }
.effort-feedback { min-height: 16px; font-size: 11px; margin-top: var(--rata-space-2); }
.effort-feedback.ok { color: var(--rata-ok); }
.effort-feedback.error { color: var(--rata-error); }
.effort-mode { font-size: 11px; color: var(--rata-text-muted); margin-top: var(--rata-space-3); }
.effort-info { background: var(--rata-surface-soft); border: 1px dashed var(--rata-border-strong); border-radius: var(--rata-radius-s); padding: var(--rata-space-4) var(--rata-space-5); margin-top: var(--rata-space-4); font-size: 11px; color: var(--rata-text-muted); text-align: left; }
.effort-info span { display: flex; justify-content: space-between; gap: var(--rata-space-3); }
.effort-info strong { font-weight: 600; color: var(--rata-text); }
.doc-total { display: flex; justify-content: space-between; gap: var(--rata-space); background: var(--rata-surface-soft); padding: var(--rata-space) var(--rata-space-9); margin-top: var(--rata-space-9); font-size: 15px; }
.doc-total strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.doc-total-sub { display: flex; justify-content: space-between; gap: var(--rata-space); padding: var(--rata-space-3) var(--rata-space-9); font-size: 13px; }
.doc-total.billable { margin-top: 0; font-weight: 700; }
.side-card { background: var(--rata-surface); border: 1px solid var(--rata-border); border-radius: var(--rata-radius-l); padding: var(--rata-space-7) var(--rata-space); margin-bottom: var(--rata-space-7); }
.side-card h3 { margin-bottom: var(--rata-space-5); }
.downloads { display: flex; flex-wrap: wrap; gap: var(--rata-space-3); align-items: center; margin: var(--rata-space-5) 0 0; }
.downloads .btn.small .icon { width: 16px; height: 16px; }
.downloads [data-field="download-pdf"] .icon { color: var(--rata-file-pdf); }
.downloads [data-field="download-xlsx"] .icon { color: var(--rata-file-xlsx); }
/* Summen-Karte in PT (RATA-119): groß „Angesetzt im Nachweis“, darunter Bereich × geloggt, geschätzt, angesetzt. */
.sum-hero, .sum-billable { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rata-space-5); }
.sum-hero { padding-bottom: var(--rata-space-4); border-bottom: 1px solid var(--rata-border); margin-bottom: var(--rata-space-3); font-size: 13px; }
.sum-hero b { font-size: 22px; font-variant-numeric: tabular-nums; }
.sum-billable { font-size: 13px; color: var(--rata-free); margin-bottom: var(--rata-space-3); }
.sum-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.sum-table th { background: none; }
.sum-table thead th { font-size: 11px; font-weight: 500; color: var(--rata-text-muted); text-align: right; padding: var(--rata-space-2) 0 var(--rata-space-2) var(--rata-space-4); }
.sum-table thead th:first-child { text-align: left; padding-left: 0; }
.sum-table tbody th { text-align: left; font-weight: 400; color: var(--rata-text-muted); padding: var(--rata-space-3) 0; border-top: 1px solid var(--rata-border); }
.sum-table td { text-align: right; padding: var(--rata-space-3) 0 var(--rata-space-3) var(--rata-space-4); border-top: 1px solid var(--rata-border); white-space: nowrap; }
.sum-table tr.main th, .sum-table tr.main td { color: var(--rata-text); font-weight: 600; }
.sum-table tr.free th, .sum-table tr.free td { color: var(--rata-free); }
.sum-table tr.warn th, .sum-table tr.warn td { color: var(--rata-warn); }
.sum-table tr.muted th, .sum-table tr.muted td { color: var(--rata-text-muted); }
.side-row { display: flex; justify-content: space-between; gap: var(--rata-space-5); font-size: 12px; padding: var(--rata-space-2) 0; }
.workarea { border: 1px dashed var(--rata-border-strong); border-radius: var(--rata-radius); background: var(--rata-surface-soft); padding: var(--rata-space) var(--rata-space-9); margin-top: var(--rata-space-9); }
.workarea h3 { margin-bottom: var(--rata-space-4); }
.ticket-row { display: flex; gap: var(--rata-space-6); align-items: center; padding: var(--rata-space-5) 0; border-bottom: 1px solid var(--rata-border); font-size: 12px; flex-wrap: wrap; }
.ticket-row:last-child { border-bottom: 0; }
.ticket-row .grow { flex: 1; min-width: 200px; }

/* Symbole und Arbeitsbereich (RATA-74): Aktionen als kleine Symbole, blass bis zum Überfahren der Zeile
   oder zum Tastaturfokus; die häufigste Aktion einer Zeile steht in der Akzentfarbe. Die Bereiche unter
   dem Nachweis sind einklappbare Karten mit kompakten Zeilen. */
.sym-bar { display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: var(--rata-space-1); }
.sym-bar .inline-form { display: inline-flex; margin: 0; }
/* „button.sym:not(.btn):not(.switch)“ schlägt die allgemeine Button-Regel, wie bei icon-btn; jede
   Regel, die Deckkraft oder Farbe eines Symbols ändert, braucht deshalb auch diese Form. */
.sym, button.sym:not(.btn):not(.switch) { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; min-height: 0; padding: 0; border: 1px solid transparent; border-radius: var(--rata-radius-m); background: transparent; color: var(--rata-text-muted); cursor: pointer; opacity: 0.45; text-decoration: none; }
.sym .icon { width: 16px; height: 16px; }
.work-row:hover .sym, .group:hover .group-head-actions .sym, .sym:focus-visible,
.work-row:hover button.sym:not(.btn):not(.switch), .group:hover .group-head-actions button.sym:not(.btn):not(.switch), button.sym:not(.btn):not(.switch):focus-visible { opacity: 1; }
.sym:hover, button.sym:not(.btn):not(.switch):hover { opacity: 1; border-color: var(--rata-border); background: var(--rata-surface); color: var(--rata-primary); }
.sym.primary, button.sym.primary:not(.btn):not(.switch) { opacity: 1; color: var(--rata-primary); }
.sym.danger:hover, button.sym.danger:not(.btn):not(.switch):hover { color: var(--rata-error); }
button.sym:not(.btn):not(.switch):disabled { cursor: default; opacity: 0.3; }
.group-head-actions { margin-left: auto; align-self: center; }
.work-card { background: var(--rata-surface); border: 1px solid var(--rata-border); border-radius: var(--rata-radius-l); padding: var(--rata-space-2) var(--rata-space-9) var(--rata-space-5); margin-top: var(--rata-space-9); }
.work-head { display: flex; align-items: center; gap: var(--rata-space-4); padding: var(--rata-space-5) 0; list-style: none; user-select: none; }
.work-head::-webkit-details-marker { display: none; }
.work-head::before { content: "▸"; width: 14px; color: var(--rata-text-muted); }
.work-card[open] > .work-head::before { content: "▾"; }
.work-head h3 { margin: 0; font-size: 15px; }
.work-head .count { white-space: nowrap; }
.work-sum { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.work-list { list-style: none; margin: 0; padding: 0; }
.work-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px auto; gap: var(--rata-space-4); align-items: center; min-height: 34px; border-top: 1px solid var(--rata-border); font-size: 13px; }
.work-row:hover { background: var(--rata-surface-soft); }
.work-left { display: flex; align-items: center; gap: var(--rata-space-3); min-width: 0; }
.work-title { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-left .project-chip, .work-left .small { flex: none; white-space: nowrap; }
.work-pt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tag { flex: none; padding: 0 var(--rata-space-3); border: 1px solid var(--rata-border); border-radius: var(--rata-radius-s); background: var(--rata-surface-soft); color: var(--rata-text-muted); font-size: 11px; white-space: nowrap; }
.assign-choices .choice { align-items: center; cursor: pointer; }
.assign-choices .choice input { margin-top: 0; }
.choice-name { display: inline-flex; align-items: center; gap: var(--rata-space-2); }
.choice-mark { margin-left: auto; color: var(--rata-text-muted); font-size: 12px; text-align: right; }
@media (max-width: 480px) {
    .work-card { padding: var(--rata-space-2) var(--rata-space-5) var(--rata-space-4); }
    .work-row { grid-template-columns: minmax(0, 1fr) 52px auto; gap: var(--rata-space-2); padding: var(--rata-space-2) 0; }
    .work-left { flex-wrap: wrap; row-gap: var(--rata-space-1); }
    .work-title { flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; }
}
details > summary { cursor: pointer; }

/* Herkunft als Baum (RATA-73): Epic → Ticket → Unteraufgabe → Worklog, je Ebene eingerückt mit Führungslinie;
   rechts „Geloggt“ und „Geschätzt“ in PT, die nie umbrechen, dann die Symbolleiste der Ticketzeile. */
.origin-tree { margin-top: var(--rata-space-5); font-size: 13px; }
.origin-head, button.origin-head:not(.btn):not(.switch) { display: block; text-align: left; white-space: normal; gap: var(--rata-space-2); min-height: 0; padding: var(--rata-space-2) 0; border: 0; background: none; color: var(--rata-primary); font: inherit; font-size: 13px; cursor: pointer; }
.origin-head .muted { color: var(--rata-text-muted); }
.origin-list { list-style: none; margin: 0; padding: 0; }
.origin-tree [hidden] { display: none; }
.origin-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px 0; gap: var(--rata-space-3); align-items: center; min-height: 30px; border-radius: var(--rata-radius-s); }
/* Mit Symbolleiste hat die letzte Spalte in jeder Zeile dieselbe Breite, sonst verrutschen die Werte. */
.origin-tree.with-actions .origin-row { grid-template-columns: minmax(0, 1fr) 64px 64px 112px; }
.origin-cols { min-height: 0; margin-top: var(--rata-space-2); padding: var(--rata-space-2) 0; border-bottom: 1px solid var(--rata-border); border-radius: 0; color: var(--rata-text-muted); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
.origin-cols span:nth-child(2), .origin-cols span:nth-child(3) { text-align: right; }
.origin-node:hover { background: var(--rata-surface-soft); }
/* Gleiche Form wie die Grundregel „button.sym:not(.btn):not(.switch)“, sonst blieben Button-Symbole blass. */
.origin-node:hover .sym, .origin-node:focus-within .sym,
.origin-node:hover button.sym:not(.btn):not(.switch), .origin-node:focus-within button.sym:not(.btn):not(.switch) { opacity: 1; }
.origin-label { display: flex; align-items: center; gap: var(--rata-space-2); min-width: 0; overflow: hidden; background-image: linear-gradient(var(--rata-border), var(--rata-border)); background-repeat: no-repeat; background-size: 1px 100%; }
.origin-node.lvl1 .origin-label { background-image: none; }
.origin-node.lvl2 .origin-label { padding-left: var(--rata-space-9); background-position: 7px 0; }
.origin-node.lvl3 .origin-label { padding-left: var(--rata-space-12); background-position: 25px 0; }
.origin-node.lvl4 .origin-label { padding-left: calc(var(--rata-space-12) + var(--rata-space-9)); background-position: 43px 0; }
.origin-toggle, button.origin-toggle:not(.btn):not(.switch) { flex: none; width: 16px; min-height: 0; padding: 0; border: 0; background: none; color: var(--rata-text-muted); font-size: 11px; text-align: center; cursor: pointer; }
.origin-key { flex: none; white-space: nowrap; }
.origin-title { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.origin-label .tag, .origin-label .project-chip { flex: none; }
/* Ein Ticket-Chip gibt in einer engen Zeile nach: der Projektschlüssel kürzt mit Ellipse, die Nummer bleibt ganz (RATA-116, Review P1).
   Der Titel nimmt nur den Platz, der neben dem Chip übrig bleibt (.origin-title und .work-title mit Basis 0). */
.origin-label .ticket-chip, .work-left .ticket-chip { flex: 0 1 auto; min-width: 0; }
/* Reicht der Platz neben Einrückung und Marken nicht einmal für Quelle und Nummer, rutscht der Chip in eine eigene Zeile. */
.origin-label, .work-left { flex-wrap: wrap; row-gap: var(--rata-space-1); }
.origin-label.muted b { color: var(--rata-text); font-weight: 500; }
.origin-value { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.origin-actions { display: inline-flex; justify-content: flex-end; min-width: 0; }
.origin-more, button.origin-more:not(.btn):not(.switch) { min-height: 0; padding: 0; border: 0; background: none; color: var(--rata-primary); font: inherit; cursor: pointer; }
@media (max-width: 480px) {
    .origin-row { grid-template-columns: minmax(0, 1fr) 48px 48px 0; gap: var(--rata-space-2); }
    .origin-tree.with-actions .origin-row { grid-template-columns: minmax(0, 1fr) 48px 48px; }
    .origin-actions { grid-column: 1 / -1; justify-content: flex-start; }
    .origin-cols { font-size: 10px; letter-spacing: 0; text-transform: none; }
    .origin-label { flex-wrap: wrap; row-gap: var(--rata-space-1); padding-top: var(--rata-space-1); padding-bottom: var(--rata-space-1); }
    .origin-title { flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; }
    .origin-node.lvl2 .origin-label { padding-left: var(--rata-space-6); background-position: 5px 0; }
    .origin-node.lvl3 .origin-label { padding-left: calc(var(--rata-space-6) + var(--rata-space-6)); background-position: 17px 0; }
    .origin-node.lvl4 .origin-label { padding-left: var(--rata-space-12); background-position: 29px 0; }
    .origin-actions .sym, .origin-actions button.sym:not(.btn):not(.switch) { width: 22px; height: 22px; }
}
/* Zeile der KI-Aktionen je Gruppe: Zusammenfassung, Prompt, vorbereiteter Text (RATA-44, RATA-101). */
.work-row > .group-material { grid-column: 1 / -1; margin: 0 0 var(--rata-space-3); }
.group-material { margin-top: var(--rata-space-5); font-size: 12px; container-type: inline-size; container-name: ai-row; }
.group-material-body { margin-top: var(--rata-space-3); }
.group-material pre { margin: 0; padding: var(--rata-space-4) var(--rata-space-5); max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--rata-font-mono); background: var(--rata-surface-soft); border: 1px solid var(--rata-border); border-radius: var(--rata-radius-s); }
/* Eine Zeile ohne Umbruch (RATA-121): Zusammenfassung, Klammer „Prompt“ mit zwei Symbolknöpfen, rechtsbündig „Text übernehmen“. */
.ai-links { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--rata-space-4); min-width: 0; font-size: 12.5px; white-space: nowrap; }
.ai-prompt { display: inline-flex; flex: none; align-items: center; gap: var(--rata-space-1); padding: 0 var(--rata-space-1) 0 var(--rata-space-4); border: 1px solid var(--rata-border); border-radius: var(--rata-radius-m); color: var(--rata-text-muted); }
.ai-icon, button.ai-icon:not(.btn):not(.switch) { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; min-height: 0; padding: 0; border: 0; border-radius: var(--rata-radius-s); background: none; color: var(--rata-primary); cursor: pointer; }
.ai-icon:hover, .ai-icon:focus-visible, button.ai-icon:not(.btn):not(.switch):hover { background: var(--rata-primary-soft); }
.ai-icon:focus-visible { outline: 2px solid var(--rata-primary); outline-offset: 1px; }
.ai-icon .icon { width: 16px; height: 16px; }
.ai-adopt-slot { display: inline-flex; flex: none; align-items: center; gap: var(--rata-space-3); margin-left: auto; }
/* Schmale Karte: „Text übernehmen“ nur als Symbol; der Text bleibt zugänglicher Name. Die Marke „veraltet“
   braucht mehr Platz, als die Zeile unter 460 px hat: Dort wird sie zum Warnpunkt (Text und Tooltip bleiben). */
@container ai-row (max-width: 380px) {
    .ai-adopt-text { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@container ai-row (max-width: 460px) {
    .ai-adopt-slot .pill { width: 10px; height: 10px; padding: 0; overflow: hidden; border-radius: var(--rata-radius-pill); background: var(--rata-warn); color: transparent; font-size: 0; }
}
/* Gleich spezifisch wie button:not(.btn):not(.switch) und später: Die Links überschreiben Rahmen, Fläche und Höhe des Standardbuttons. */
.ai-link, button.ai-link:not(.btn):not(.switch) { display: inline-flex; align-items: center; gap: var(--rata-space-2); min-height: 0; padding: var(--rata-space-1) 0; border: 0; border-radius: 0; background: none; font: inherit; color: var(--rata-primary); text-decoration: none; white-space: nowrap; cursor: pointer; }
.ai-link:hover, .ai-link:focus-visible, button.ai-link:not(.btn):not(.switch):hover { background: none; text-decoration: underline; }
.ai-link .icon { width: 15px; height: 15px; flex-shrink: 0; }
.ai-adopt { position: relative; display: inline-flex; }
.ai-link.off { color: var(--rata-text-muted); opacity: .55; cursor: not-allowed; text-decoration: none; }
.ai-tip { display: none; position: absolute; right: 0; top: calc(100% + var(--rata-space-3)); z-index: 5; width: min(380px, calc(100vw - 32px)); padding: var(--rata-space-4) var(--rata-space-6); border-radius: var(--rata-radius-s); background: var(--rata-text); color: var(--rata-surface); font-size: 12px; line-height: 1.5; text-align: left; white-space: pre-line; box-shadow: 0 6px 18px var(--rata-shadow-dialog); }
.ai-tip small { display: block; margin-bottom: var(--rata-space-2); opacity: .8; font-size: 11px; }
.ai-adopt:hover .ai-tip, .ai-adopt:focus-within .ai-tip { display: block; }
.ai-copy-feedback { display: flex; align-items: center; gap: var(--rata-space-2); margin: var(--rata-space-2) 0 0; color: var(--rata-text-muted); }
.ai-copy-feedback.ok { color: var(--rata-ok); }
.ai-copy-feedback .icon { width: 15px; height: 15px; }
.draft-mark { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-24deg); font-size: 96px; font-weight: 700; letter-spacing: 8px; color: var(--rata-draft-mark); pointer-events: none; }

/* Datenstand: eine Karte je Quelle; unter zwei Kartenbreiten fällt das Raster auf eine Spalte (RATA-60). */
.source-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--rata-space-9); margin-bottom: var(--rata-space-9); }
.source-cards > .panel { margin-bottom: 0; }
.source-name { display: flex; align-items: center; gap: var(--rata-space-4); min-width: 0; overflow-wrap: anywhere; }
.source-state { font-size: 13px; font-weight: 600; white-space: nowrap; }
.month-marks { display: flex; flex-wrap: wrap; gap: var(--rata-space-4); margin: var(--rata-space-4) 0; }
.month-marks .icon { width: 12px; height: 12px; }
.source-problems { margin: var(--rata-space-4) 0; padding-left: var(--rata-space-9); color: var(--rata-error); overflow-wrap: anywhere; }
.tech-line { display: flex; flex-wrap: wrap; gap: var(--rata-space-4) var(--rata-space-9); }

/* Projekte als schlanke Liste mit Zuordnen im Dialog (RATA-72): Bedienelemente einheitlich 30 px,
   Zeilen rund 44 px; unter 720 px zwei Spalten mit Kunde und Vorbelegung unter dem Projekt. */
.month-stepper { display: inline-flex; align-items: center; border: 1px solid var(--rata-border-strong); border-radius: var(--rata-radius-m); background: var(--rata-surface); overflow: hidden; vertical-align: middle; }
.month-stepper button.month-stepper-step { min-height: 0; height: 28px; width: 28px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 14px; }
.month-stepper button.month-stepper-step:hover { background: var(--rata-primary-soft); }
.month-stepper-label { min-width: 110px; padding: 0 var(--rata-space-5); text-align: center; font-size: 13px; font-weight: 600; white-space: nowrap; }
.project-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rata-space-5); margin-bottom: var(--rata-space-5); }
.segmented { display: inline-flex; max-width: 100%; border: 1px solid var(--rata-border-strong); border-radius: var(--rata-radius-m); background: var(--rata-surface); overflow: hidden; vertical-align: middle; }
.segmented button.segmented-option { min-height: 0; height: 28px; padding: 0 var(--rata-space-7); border: 0; border-radius: 0; background: transparent; color: var(--rata-text-muted); font-size: 13px; }
.segmented button.segmented-option + button { border-left: 1px solid var(--rata-border); }
.segmented button.segmented-option.on { background: var(--rata-primary-soft); color: var(--rata-primary); font-weight: 600; }
.segmented-count { margin-left: var(--rata-space-3); font-size: 11px; opacity: 0.8; }

/* Umschalter statt Auswahlliste (RATA-71): wenige feste Werte nebeneinander, mit Linie, Ecke und Höhe eines
   Eingabefelds. Darunter liegen echte Radio-Knöpfe: Tab und Pfeiltasten wählen, ein Post braucht kein Skript.
   „.segmented > label“ wiegt mehr als „.field label“ und steht später. */
.segmented > label.segmented-option { position: relative; display: inline-flex; align-items: center; gap: var(--rata-space-2); height: 28px; margin: 0; padding: 0 var(--rata-space-6); border-left: 1px solid var(--rata-border); color: var(--rata-text-muted); font-size: 12px; font-weight: 400; white-space: nowrap; cursor: pointer; }
.segmented > label.segmented-option:first-child { border-left: 0; }
.segmented > label.segmented-option:hover { background: var(--rata-surface-soft); }
.segmented > label.segmented-option:has(input:checked) { background: var(--rata-primary-soft); color: var(--rata-primary); font-weight: 600; }
.segmented > label.segmented-option:has(input:focus-visible) { outline: 2px solid var(--rata-primary); outline-offset: -2px; }
.segmented input[type=radio], .choice-list input[type=radio] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.segmented .icon { width: 14px; height: 14px; }
.segmented-chips > label.segmented-option { padding-left: var(--rata-space-3); padding-right: var(--rata-space-3); }
.segmented-chips > label.segmented-option .project-chip { opacity: .6; }
.segmented-chips > label.segmented-option:has(input:checked) { background: var(--rata-surface-soft); }
.segmented-chips > label.segmented-option:has(input:checked) .project-chip { opacity: 1; box-shadow: 0 0 0 1.5px var(--rata-primary); }
.side-actions { display: flex; flex-wrap: wrap; gap: var(--rata-space-3); margin: var(--rata-space-5) 0; }
.inline-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--rata-space-5); }
.inline-fields-grow { flex: 1 1 10em; min-width: 0; }
/* Auswahlzeilen in einem Formularfeld bleiben Zeilen; „.field label“ machte sie sonst zu Blöcken. */
.field .assign-choices > label.choice { display: flex; min-height: 30px; margin: 0 0 var(--rata-space-3); padding: var(--rata-space-2) var(--rata-space-6); border-radius: var(--rata-radius-m); font-size: 13px; font-weight: 400; color: var(--rata-text); }
.field .assign-choices > label.choice:not(.selected) { border-color: var(--rata-border-strong); }
/* Ein langer Gruppenname bricht in seiner Zeile um; die Zeile wächst mit, kurze bleiben 30 px hoch (RATA-102). */
.field .assign-choices > label.choice .choice-name { min-width: 0; overflow-wrap: anywhere; }
.field .assign-choices > label.choice .choice-mark { flex: none; }
/* Zeilen mit Umschalter (RATA-71): Eingabefelder und kleine Knöpfe daneben so hoch wie der Umschalter, mit Rahmen 30 px. */
.compact-fields input:not([type]) { height: 30px; padding: 0 var(--rata-space-4); font-size: 13px; }

/* Auswahlzeilen als Radio-Knöpfe (RATA-71), etwa die Namen beim Anmelden; wie „button.choice-row“ unten. */
fieldset.choice-list { margin: 0; padding: 0; min-width: 0; max-height: none; }
.choice-list > label.choice-row { position: relative; display: flex; align-items: center; gap: var(--rata-space-5); height: 30px; margin: 0; padding: 0 var(--rata-space-6); border-top: 1px solid var(--rata-border); background: var(--rata-surface); color: var(--rata-text); font-size: 13px; font-weight: 400; cursor: pointer; }
.choice-list > label.choice-row:first-child { border-top: 0; }
.choice-list > label.choice-row:hover { background: var(--rata-surface-soft); }
.choice-list > label.choice-row:has(input[type=radio]:checked) { background: var(--rata-primary-soft); }
.choice-list > label.choice-row:has(input[type=radio]:checked) i { border: 4px solid var(--rata-primary); }
.choice-list > label.choice-row:has(input[type=radio]:focus-visible) { outline: 2px solid var(--rata-primary); outline-offset: -2px; }
.choice-list > label.choice-row-other input:not([type]) { flex: 1; min-width: 0; height: 24px; padding: 0 var(--rata-space-4); font-size: 13px; }

/* Benutzer mit Initialen (RATA-106); inaktive gedämpft. */
.user-badge { display: inline-flex; align-items: center; gap: var(--rata-space-4); min-width: 0; }
.user-badge .user-initials { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--rata-radius-pill); background: var(--rata-primary-soft); color: var(--rata-primary); font-size: 11px; font-weight: 600; }
.user-badge .user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-badge.inactive { opacity: .6; }
/* Verantwortung (RATA-108): Vorbesetzung auf der Seite Kunden, Kopf des Kundenmonats, Spalte der Monatsübersicht. */
.btn.quiet.responsible-set { color: var(--rata-text); }
.responsible-open { max-width: 100%; min-width: 0; }
.responsible-now { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--rata-space-4); max-width: 100%; margin-right: var(--rata-space-5); vertical-align: middle; }
.responsible-cell { display: inline-flex; align-items: center; gap: var(--rata-space-4); max-width: 100%; min-width: 0; }
.customers-table .col-responsible { white-space: nowrap; }
.filter-count { margin: var(--rata-space-4) 0; }
/* Filter als Links (RATA-108): dieselbe Leiste wie die Radio-Variante, ohne Formular. */
.segmented > a.segmented-option { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--rata-space-6); border-left: 1px solid var(--rata-border); color: var(--rata-text-muted); font-size: 12px; text-decoration: none; white-space: nowrap; }
.segmented > a.segmented-option:first-child { border-left: 0; }
.segmented > a.segmented-option:hover { background: var(--rata-surface-soft); }
.segmented > a.segmented-option.on { background: var(--rata-primary-soft); color: var(--rata-primary); font-weight: 600; }
.segmented > a.segmented-option:focus-visible { outline: 2px solid var(--rata-primary); outline-offset: -2px; }
.choice-list > label.choice-row-other .icon { flex: none; color: var(--rata-text-muted); }
.projects-page input.project-search { height: 30px; padding: 0 var(--rata-space-5); font-size: 13px; }
.project-bar .project-search { width: 240px; margin-left: auto; }
.projects-page .btn { min-height: 0; height: 30px; font-size: 13px; }
/* Ein gemeinsames Raster für alle Zeilen (RATA-98): Die Chip-Spalte ist so breit wie der breiteste Chip, die Namen beginnen auf einer Linie. */
.project-table { display: grid; grid-template-columns: max-content minmax(0, 2.2fr) minmax(0, 2fr) 170px 110px; column-gap: var(--rata-space-6); background: var(--rata-surface); border: 1px solid var(--rata-border); border-radius: var(--rata-radius-l); overflow: hidden; margin-top: var(--rata-space-5); }
.project-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; min-height: 44px; padding: var(--rata-space-2) var(--rata-space-9); border-top: 1px solid var(--rata-border); font-size: 13px; }
.project-row:first-child { border-top: 0; }
.project-row:not(.project-head):hover { background: var(--rata-surface-soft); }
.project-head { min-height: 32px; background: var(--rata-bg); color: var(--rata-text-muted); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.project-cell-chip, .project-cell-name { min-width: 0; }
/* Auf dieser Seite wird der Schlüssel nie gekürzt, sondern bricht notfalls um; ProjectTag kürzt anderswo weiter. */
.project-cell-chip .project-chip, .dialog-project .project-chip { white-space: normal; }
.project-cell-chip .project-chip-key, .dialog-project .project-chip-key { min-width: 0; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.project-name { overflow-wrap: anywhere; }
.project-cell-customer b { font-weight: 600; overflow-wrap: anywhere; }
.project-cell-customer small { display: block; color: var(--rata-text-muted); font-size: 12px; line-height: 1.3; }
.project-none { display: inline-block; padding: var(--rata-space-1) var(--rata-space-5); border: 1px solid var(--rata-warn-border); border-radius: var(--rata-radius-s); background: var(--rata-warn-bg); color: var(--rata-warn); font-size: 12px; font-weight: 600; }
.project-cell-default { margin: 0; }
.projects-page .switch { height: 30px; font-size: 13px; }
.project-cell-action { text-align: right; }
.project-row-message { grid-column: 1 / -1; }
.project-empty { grid-column: 1 / -1; margin: 0; padding: var(--rata-space-7) var(--rata-space-9); border-top: 1px solid var(--rata-border); }
.project-foot { margin-top: var(--rata-space-5); }
.dialog-project { display: flex; align-items: center; gap: var(--rata-space-5); margin: 0 0 var(--rata-space-6); }
.projects-page .dialog-search { width: 100%; margin-bottom: var(--rata-space-4); }
.choice-list { max-height: 230px; overflow-y: auto; border: 1px solid var(--rata-border); border-radius: var(--rata-radius-m); }
.choice-list button.choice-row { display: flex; width: 100%; min-height: 0; height: 30px; justify-content: flex-start; gap: var(--rata-space-5); padding: 0 var(--rata-space-6); border: 0; border-top: 1px solid var(--rata-border); border-radius: 0; background: var(--rata-surface); font-size: 13px; text-align: left; }
.choice-list button.choice-row:first-child { border-top: 0; }
.choice-list button.choice-row:hover { background: var(--rata-surface-soft); }
.choice-list button.choice-row.selected { background: var(--rata-primary-soft); }
.choice-row i { flex: none; width: 14px; height: 14px; border: 1.5px solid var(--rata-text-muted); border-radius: var(--rata-radius-pill); }
.choice-row.selected i { border: 4px solid var(--rata-primary); }
.choice-row-mark { margin-left: auto; color: var(--rata-text-muted); font-size: 11px; }
/* Zwei Kennzeichen in einer Zeile (RATA-109: „Vorgabe aus Einstellungen“ und „ich“) stehen beieinander. */
.choice-row-mark + .choice-row-mark { margin-left: var(--rata-space-4); }
.dialog-line { display: flex; align-items: center; gap: var(--rata-space-5); margin-top: var(--rata-space-7); font-size: 13px; }
.dialog-subhead { margin: var(--rata-space-9) 0 var(--rata-space-4); font-size: 13px; }
.assignment-history { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.assignment-history li { display: flex; align-items: center; justify-content: space-between; gap: var(--rata-space-5); padding: var(--rata-space-2) 0; border-top: 1px solid var(--rata-border); }
@media (max-width: 720px) {
    .project-table { display: block; }
    .project-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--rata-space-6); row-gap: var(--rata-space-2); padding: var(--rata-space-4) var(--rata-space-6); }
    .project-head { display: none; }
    .project-cell-chip, .project-cell-name, .project-cell-customer, .project-cell-default { grid-column: 1; }
    .project-cell-action { grid-column: 2; grid-row: 1; }
    .project-bar .project-search { width: 100%; margin-left: 0; }
}

@media (max-width: 1100px) {
    .statement-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Unter 760 px wird die Seitenleiste zur Leiste über dem Inhalt (AK 8). */
@media (max-width: 759.98px) {
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app { display: block; }
    .sidebar { width: auto; padding: var(--rata-space-6) var(--rata-space-7); border-right: 0; border-bottom: 1px solid var(--rata-border); flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--rata-space-2); }
    .rata-nav { display: flex; flex-wrap: wrap; gap: var(--rata-space-2); }
    .brand { margin: 0 var(--rata-space-6) 0 0; font-size: 20px; }
    .brand img { width: 30px; height: 30px; }
    .brand small, .nav-caption { display: none; }
    .nav-item { padding: var(--rata-space-4) var(--rata-space-5); font-size: 12px; }
    /* Die Unterpunkte reihen sich als eigene Einträge in die umbrechende Leiste, ohne Linie und Einzug. */
    .nav-subs { display: contents; }
    .sources { margin: var(--rata-space-3) 0 0; border-top: 0; padding: 0; width: 100%; display: flex; gap: var(--rata-space-7); flex-wrap: wrap; }
    .topbar { padding: var(--rata-space-4) var(--rata-space); height: auto; min-height: 46px; flex-wrap: wrap; }
    .topbar .user { flex-wrap: wrap; gap: var(--rata-space-4); }
    .content { padding: var(--rata-space-9) var(--rata-space) var(--rata-space-13); }
    h1 { font-size: 24px; }
    .document { padding: var(--rata-space-10) var(--rata-space); }
    .group { grid-template-columns: minmax(0, 1fr); gap: var(--rata-space-5); }
    .effort { text-align: left; }
    .effort-days { justify-content: flex-start; }
    th, td { padding: var(--rata-space-5) var(--rata-space-5); }
    /* Kundentabelle als Raster je Kunde: Kunde mit Projekten, darunter Status und Aufwand, je über die volle Breite; Verantwortlich und Hinweis entfallen. */
    .customers-table, .customers-table tbody { display: block; width: 100%; }
    .customers-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .customers-table tr { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--rata-space-5); row-gap: var(--rata-space-2); align-items: start; padding: var(--rata-space-5); border-bottom: 1px solid var(--rata-border); }
    .customers-table td { display: block; border: 0; padding: 0; width: auto; min-width: 0; }
    .customers-table .col-customer { grid-column: 1; grid-row: 1; }
    .customers-table .col-status { grid-column: 1; grid-row: 2; width: auto; }
    .customers-table .col-hours { grid-column: 1; grid-row: 3; min-width: 0; }
    .customers-table .col-responsible, .customers-table .col-go { display: none; }
    /* Kundenliste der Seite Kunden als Raster je Kunde: Name mit Löschen rechts daneben, darunter Projekte und der Schalter mit eigener Beschriftung. */
    .customer-list, .customer-list tbody { display: block; width: 100%; }
    .customer-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .customer-list tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--rata-space-5); row-gap: var(--rata-space-3); align-items: start; padding: var(--rata-space-5); border-bottom: 1px solid var(--rata-border); }
    .customer-list td { display: block; border: 0; padding: 0; width: auto; min-width: 0; }
    .customer-list .col-name { grid-column: 1; grid-row: 1; }
    .customer-list .col-delete { grid-column: 2; grid-row: 1; }
    .customer-list .col-projects { grid-column: 1 / span 2; grid-row: 2; }
    .customer-list .col-responsible { grid-column: 1 / span 2; grid-row: 3; display: flex; align-items: center; gap: var(--rata-space-4); min-width: 0; }
    .customer-list .col-responsible::before { content: "Verantwortlich"; color: var(--rata-text-muted); font-size: 12px; }
    .customer-list .col-show { grid-column: 1 / span 2; grid-row: 4; display: flex; align-items: center; gap: var(--rata-space-4); }
    .customer-list .col-show::before { content: "Projekte ausweisen"; color: var(--rata-text-muted); font-size: 12px; }
    .customer-list .customer-name { min-width: 0; }
}

@media print {
    .sidebar, .topbar, .theme-switch, .page-head .page-actions, .no-print { display: none !important; }
    .app { display: block; }
    body { background: var(--rata-print-bg); }
    .content { max-width: none; padding: 0; }
    .document { border: 0; box-shadow: none; padding: 0; }
}

/* Druck immer im hellen Schema: sonst stünde im dunklen Schema heller Text auf weißem Papier
   (Folgebefund B6 aus RATA-55). Die Werte sind die von :root; ":root:root" schlägt die
   Dunkelblöcke, weil es gleich spezifisch ist und später steht. */
@media print {
    :root:root {
        --rata-primary: #087f95;
        --rata-primary-hover: #066879;
        --rata-primary-soft: #eaf4f8;
        --rata-on-primary: #ffffff;
        --rata-bg: #f5f8fa;
        --rata-surface: #ffffff;
        --rata-surface-soft: #f0f5f8;
        --rata-text: #14394b;
        --rata-text-muted: #718591;
        --rata-border: #dce6eb;
        --rata-border-strong: #b9cfda;
        --rata-ok-bg: #e4f2e9;
        --rata-ok: #317756;
        --rata-warn-bg: #fbf0d8;
        --rata-warn-border: #eed9a5;
        --rata-warn: #8e6e2b;
        --rata-error-bg: #fff0ed;
        --rata-error-border: #efcfc5;
        --rata-error: #a55741;
        --rata-file-pdf: #c8312b;
        --rata-file-xlsx: #1d6f42;
        --rata-neutral-bg: #eef2f4;
        --rata-neutral: #687b85;
        --rata-locked-bg: #e8eaf6;
        --rata-locked: #3c4a8a;
        --rata-free-bg: #e7f0fb;
        --rata-free: #1d5fa8;
        --rata-dot-ok: #4ba878;
        --rata-dot-warn: #d4a13c;
        --rata-dot-error: #d0634a;
        --rata-dot-none: var(--rata-neutral);
        --rata-knob: #fff;
        --rata-shadow-dialog: rgba(10, 30, 40, 0.18);
        --rata-shadow-doc: rgba(20, 57, 75, 0.05);
        --rata-draft-mark: rgba(165, 87, 65, 0.12);
        --rata-print-bg: #fff;
        --rata-backdrop: rgba(20, 57, 75, 0.35);
        --rata-source-intern-bg: #dff3ef;
        --rata-source-intern: #1d7466;
        --rata-source-cloud-bg: #ece7fa;
        --rata-source-cloud: #5b3fa8;
        --rata-status-progress-bg: #e6eefb;
        --rata-status-progress: #2f63b8;
        --rata-status-final-bg: #2f8a5b;
        --rata-status-final: #ffffff;
        --rata-bar-unresolved: #e08a2e;
        --rata-on-signal: #ffffff;
        color-scheme: light;
    }
}