/* ==========================================================================
   SebMoCenter - Basisstile nach _s3-ui-standards, übernommen aus KS.ProjektCenter (dort aus
   S3.UI.Showcase / S3.DocCenter und NCP.BesucherCenter). Reihenfolge: S3-Basis, generische Ergänzungen,
   Ergänzungen des SebMo-Gerüsts, zuletzt das Kunden-Theme (sebmo-theme.css).
   S3.DocCenter – Theme & Base Styles
   Based on S3.NorthDataAutoExporter design system
   ========================================================================== */

/* ---------- CSS Custom Properties ---------- */

:root {
    --font-size: 16px;
    --background: #fafafa;
    --foreground: #1f1f1f;
    --card: #ffffff;
    --card-foreground: #1f1f1f;
    --popover: #ffffff;
    --popover-foreground: #1f1f1f;
    --primary: #0C5DA6;
    --primary-foreground: #ffffff;
    --secondary: #f5f5f5;
    --secondary-foreground: #1f1f1f;
    --muted: #f0f0f0;
    --muted-foreground: #6b6b6b;
    --accent: #e6f7ff;
    --accent-foreground: #0C5DA6;
    /* #c62828 statt des früheren #ff4444: Weiß auf #ff4444 ergibt 3,41:1 und
       verfehlt WCAG AA (4,5:1). Das Icon in .action-btn-danger:hover lag mit
       2,79:1 sogar unter der 3:1-Grenze für Bedienelemente. #c62828 erreicht
       5,62:1 bzw. 4,60:1. Siehe STANDARDS.md, Abschnitt Farben. */
    --destructive: #c62828;
    --destructive-foreground: #ffffff;
    --border: #e8e8e8;
    --input: transparent;
    --input-background: #ffffff;
    --font-weight-medium: 500;
    --font-weight-normal: 400;
    --ring: #0C5DA6;
    --radius: 0;
    --sidebar: #333333;
    --sidebar-foreground: #e8e8e8;
    --sidebar-primary: #0C5DA6;
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: #3a3a3a;
    --sidebar-accent-foreground: #ffffff;
    --sidebar-border: #444444;
    --sidebar-ring: #0C5DA6;
    --sidebar-submenu: #2b2b2b;
}

/* ---------- Base styles ---------- */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100vh;
}

/* PDF.js erstellt versteckte Off-Screen-Canvases als Body-Children.
   Diese Canvases haben height:0 aber position im Dokument, was scrollHeight erhöht. */
body > canvas {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
}

html {
    font-size: var(--font-size);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
    color: var(--foreground);
    background-color: var(--background);
}

h1 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    border: none;
    outline: none;
}

h2 {
    font-size: 1.25rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

h3 {
    font-size: 1.125rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

h4 {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

label {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

button {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    cursor: pointer;
}

input {
    font-size: 1rem;
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ---------- Shadow utilities ---------- */

.shadow-header {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.shadow-sidebar {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
}

.shadow-actionbar {
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.06);
}

.shadow-card {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
}

.shadow-button {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.shadow-dropdown {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ---------- Layout ---------- */

.layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.sidebar {
    background-color: var(--sidebar);
    color: var(--sidebar-foreground);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.sidebar-animating {
    transition: width 0.2s ease;
}

.sidebar-collapsed {
    width: 64px;
}

.header {
    height: 68px;
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 1rem;
}

.action-bar {
    background-color: var(--card);
    padding: 0.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    /* Einheitliche Höhe mit und ohne Knopf (STANDARDS.md 3.2, State + Action-Bar): Ein .btn ist 39 px hoch
       (0.875rem x 1.5 + 1rem Innenabstand + 2 px Rand), dazu 1rem Innenabstand der Leiste = 55 px. Ohne die
       Mindesthöhe wäre eine Leiste, die nur den Titel trägt, niedriger und spränge beim Seitenwechsel. */
    min-height: 55px;
    box-sizing: border-box;
    margin-top: 1rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.10), 0 2px 10px rgba(0, 0, 0, 0.10);
    position: relative;
}

.action-bar-loader {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: color-mix(in srgb, var(--primary) 15%, transparent);
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.action-bar-loader.active {
    opacity: 1;
}

.action-bar-loader::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    background-color: var(--primary);
    animation: actionbar-loading 1.2s ease-in-out infinite;
}

@keyframes actionbar-loading {
    0%   { left: -40%; }
    100% { left: 100%; }
}

.content-area {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    width: 100%;
}

/* ---------- Content-Container (max-width + zentriert) ---------- */

/* Container-Varianten - die jeweilige Page wraps ihren Top-Level-Inhalt
   mit einer dieser Klassen. Breite steht statisch im Markup, kein
   Runtime-State, kein Page-Wechsel-Flicker. */
.container-narrow,
.container-standard,
.container-wide,
.container-full {
    width: 100%;
    margin: 0 auto;
}

.container-narrow   { max-width: 720px;  }
.container-standard { max-width: 1040px; }
.container-wide     { max-width: 1584px; }
.container-full     { max-width: none;   }

/* ---------- Status badges ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    border-radius: 9999px;
    white-space: nowrap;
}

.badge-success {
    background-color: #dcfce7;
    color: #166534;
}

.badge-warning {
    background-color: #fef9c3;
    color: #854d0e;
}

.badge-error {
    background-color: #fee2e2;
    color: #991b1b;
}

.badge-primary {
    background-color: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}

.badge-muted {
    background-color: var(--muted);
    color: var(--muted-foreground);
}

/* Pille, die einem Text in derselben Zelle nachgestellt ist - etwa das
   Gruppenkennzeichen hinter dem Besuchernamen. Ohne eigenen Abstand steht sie
   nur um das Leerzeichen aus dem Markup versetzt und klebt am Namen. */
.badge-nachgestellt {
    margin-left: 0.5rem;
}

/* ---------- Tables ---------- */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th {
    text-align: left;
    padding: 0.625rem 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--muted-foreground);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
    /* Label oben verankern, damit Spalten ohne Filter dasselbe Label-Y
       haben wie Spalten mit Filter (sonst zentriert die default
       vertical-align: middle das Label in der Zelle). */
    vertical-align: top;
}

.data-table td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data-table tbody tr:nth-child(odd) {
    background-color: var(--background);
}

.data-table tbody tr:nth-child(even) {
    background-color: var(--card);
}

.data-table tbody tr:hover {
    background-color: var(--muted);
}

/* Klickbare Zeile - Cursor-Pointer als visuelle Affordance für
   Row-Click-Navigation. Action-Buttons in der Zelle haben
   `@onclick:stopPropagation`, damit sie nicht doppelt navigieren. */
.data-table tbody tr.clickable {
    cursor: pointer;
}

/* Fixed Layout - Spaltenbreiten werden aus <col>-Elementen übernommen,
   erlaubt sticky Header ohne Spalten-Verschiebung, schneidet lange
   Inhalte per `text-overflow: ellipsis` in Zellen mit `overflow: hidden`. */
.data-table.data-table-fixed {
    table-layout: fixed;
}

/* Netz gegen zu schmale Spalten (SP-10): Ein Spaltenkopf, der breiter ist als seine Spalte, wird gekürzt, statt in
   die Nachbarspalte zu ragen. Die Spaltenbreiten sind so gewählt, dass das bei 1024 und 1440 px nicht eintritt. */
.data-table.data-table-fixed th {
    overflow: hidden;
}

.data-table.data-table-fixed .th-label > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Breite Tabelle mit Mindestbreite: rollt in dieser Hülle seitlich, statt Spalten zusammenzuschieben. */
.tabelle-rollbar {
    overflow-x: auto;
}

/* Header-Zelle: 2-zeilig - oben Label+Sort, unten Filter-Input/Select */
.data-table .th-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0;
    user-select: none;
}

.data-table .th-label.sortable {
    cursor: pointer;
}

.data-table .th-label.sortable:hover {
    color: var(--foreground);
}

.data-table .sort-icon {
    opacity: 0.45;
    flex-shrink: 0;
}

.data-table .sort-icon.sort-active {
    opacity: 1;
    color: var(--primary);
}

/* Robustes Safety-Net: greift auch dann, wenn ein Projekt das Sort-Icon ohne
   `sort-icon`-Klasse rendert (nur `icon-sm`) - passierte unabhängig in VDZ +
   HYTORC. Stylt direkt das svg im sortierbaren Header: inaktiv dezenter Grauton,
   aktiv hervorgehoben (egal ob `sort-active` am DIV oder am Icon hängt). */
.data-table .th-label.sortable svg {
    color: var(--muted-foreground);
    opacity: 0.4;
}

.data-table .th-label.sortable.sort-active svg,
.data-table .th-label.sortable svg.sort-active {
    color: var(--primary);
    opacity: 1;
}

.data-table .th-filter-input,
.data-table .th-filter-select {
    width: 100%;
    margin-top: 0.375rem;
    padding: 0.375rem 0.5rem;
    height: 34px;
    box-sizing: border-box;
    font-size: 0.8125rem;
    /* Formularelemente erben die Schriftart nicht von selbst. Ohne diese Zeile
       lief die ganze Filterzeile in Arial, während die Tabelle darunter im
       Systemstack stand - in sich stimmig und deshalb schwer zu bemerken. */
    font-family: inherit;
    font-weight: var(--font-weight-normal);
    border: 1px solid var(--border);
    background-color: var(--card);
    color: var(--foreground);
    border-radius: var(--radius);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.data-table .th-filter-input:focus,
.data-table .th-filter-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent);
}

.data-table .th-filter-input.is-active,
.data-table .th-filter-select.is-active {
    border-color: var(--primary);
    background-color: color-mix(in srgb, var(--primary) 4%, var(--card));
}

.data-table .th-filter-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.375rem center;
    background-size: 14px;
    padding-right: 1.5rem;
}

/* Select wirkt wie Placeholder solange "Alle" gewählt ist (kein .is-active).
   Optionen im Dropdown bleiben in der normalen Schriftfarbe. */
.data-table .th-filter-select:not(.is-active) {
    color: var(--muted-foreground);
}

.data-table .th-filter-select option {
    color: var(--foreground);
}

/* ----- Filter-Input mit ×-Clear-Button -----
   Wrap übernimmt margin-top vom Input, damit der absolut positionierte
   Clear-Button vertikal mittig im Input sitzt (sonst rutscht er um halben
   Margin nach unten). */
.th-filter-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 0.375rem;
}

.th-filter-wrap .th-filter-input {
    flex: 1;
    margin-top: 0;
    padding-right: 1.75rem;
}

.th-filter-clear {
    position: absolute;
    right: 0.375rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--muted);
    border: none;
    border-radius: 50%;
    color: var(--muted-foreground);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 0;
    transition: background-color 0.15s, color 0.15s;
}

.th-filter-clear:hover {
    background: var(--destructive);
    color: #fff;
}

/* ===== Datum-Filter (Popover am Spalten-Header) =====
   Trigger ist ein <div> in der th-Zelle, Popover öffnet via JS-Interop
   (popover-position.js) als position:fixed. Pflicht: font-weight: 400 am
   Trigger, sonst erbt er die 500 von ".data-table th" und der "Zeitraum …"-
   Placeholder wirkt fetter als die Text-Filter-Placeholder daneben. */
.th-date-col {
    position: relative;
    overflow: visible;
}

.th-date-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    width: 100%;
    margin-top: 0.375rem;
    padding: 0.375rem 0.5rem;
    height: 34px;
    box-sizing: border-box;
    font-size: 0.8125rem;
    font-weight: 400;
    border: 1px solid var(--border);
    background-color: var(--card);
    border-radius: var(--radius);
    color: var(--muted-foreground);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.th-date-trigger:hover {
    border-color: var(--primary);
}

.th-date-trigger.has-value {
    color: var(--foreground);
}

.th-date-trigger.is-active {
    border-color: var(--primary);
    background-color: color-mix(in srgb, var(--primary) 4%, var(--card));
}

.th-date-display {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.date-chevron {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: #999;
}

.date-popover-overlay {
    position: fixed;
    inset: 0;
    z-index: 49;
}

.date-popover-container {
    display: grid;
    grid-template-columns: auto auto;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}

.date-popover-presets {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 170px;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
}

.date-presets-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.25rem 0.5rem 0.375rem;
}

.date-preset-btn {
    font-size: 0.8125rem;
    padding: 0.4rem 0.625rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--foreground);
    white-space: nowrap;
}

.date-preset-btn:hover {
    background: var(--muted);
}

.date-preset-btn.active {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-weight: 500;
}

.date-popover {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 220px;
}

.date-popover-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-popover-row label {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    width: 28px;
    flex-shrink: 0;
}

.date-popover-row .date-input {
    flex: 1;
    min-width: 0;
    margin-top: 0;
}

.date-popover-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--border);
    padding-top: 0.5rem;
}

.date-popover-apply {
    flex: 1;
    font-size: 0.75rem;
    padding: 0.4rem 0.75rem;
    background: var(--primary);
    color: var(--primary-foreground);
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
}

.date-popover-apply:hover {
    opacity: 0.9;
}

.date-popover-clear {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    padding: 0.4rem 0.75rem;
}

.date-popover-clear:hover {
    color: var(--foreground);
    border-color: var(--foreground);
}

/* ===== Bereichsfilter im Spaltenkopf (Components/Shared/BereichFilter.razor) =====
   Derselbe Auslöser und dasselbe Popover wie der Datum-Filter, für Datum, Zahl, Dauer und Uhrzeit. Der Auslöser ist
   ein <button> (Tastatur), deshalb Schrift und Ausrichtung zurück auf die der Tabelle. */
button.th-date-trigger {
    font-family: inherit;
    line-height: inherit;
    text-align: left;
    min-width: 0;
}

.th-date-trigger:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent);
}

/* Zahlenspalten sind schmal: kein Pfeil, weniger Innenabstand, Text rechts wie die Spalte. */
.th-date-trigger.bereich-ausloeser-num {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}

.th-date-trigger.bereich-ausloeser-num .date-chevron {
    display: none;
}

.data-table th.cell-num .th-date-trigger .th-date-display {
    text-align: right;
}

/* Ein gesetzter Bereich braucht den Platz für seinen Text; dass der Auslöser aufklappt, zeigt dann der farbige Rahmen. */
.th-date-trigger.bereich-ausloeser.has-value .date-chevron {
    display: none;
}

/* Zeile „n von m“ unter einer gefilterten Tabelle ohne Pagination (FilterStand.razor). */
.filter-stand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.625rem;
}

.filter-stand svg {
    flex-shrink: 0;
}

/* Tabellen in Detailmasken (.konto-tabelle, .ausw-klein) haben kein festes Spaltenraster: Der Filter soll die Spalte
   nicht aufblähen und in einer Zahlenspalte nicht schmaler werden als sein Platzhalter. */
.konto-tabelle .th-date-trigger,
.ausw-klein .th-date-trigger {
    min-width: 3.5rem;
}

.konto-tabelle .th-filter-wrap,
.ausw-klein .th-filter-wrap {
    min-width: 6rem;
}

/* Listen mit vielen schmalen Spalten: Unter dieser Breite hätten Zahlenspalten samt Filter keinen Platz - die Tabelle
   rollt dann seitlich in .tabelle-rollbar (SP-10), statt Köpfe und Filter abzuschneiden. */
.data-table.rl-liste {
    min-width: 60rem;
}

.data-table.abr-liste {
    min-width: 56rem;
}

/* Arbeitszeiten am Mitarbeiter (SL-5): sieben Spalten mit Filter - darunter rollt die Tabelle in .tabelle-rollbar. */
.data-table.ma-az-tabelle {
    min-width: 54rem;
}

.bereich-popover.bereich-popover-schmal {
    grid-template-columns: auto;
}

.bereich-popover label {
    font-weight: 400;
}

.date-popover-row .zahl-eingabe {
    flex: 1;
    min-width: 0;
}

.date-popover-row .zahl-eingabe .date-input {
    width: 100%;
    min-width: 0;
}

.bereich-popover .bereich-fehler {
    margin: 0;
}

/* Optionale Selected-Row-Markierung - 3px Primary-Border links + leichter
   Primary-Tint. Wird auf `<tr class="selected">` angewendet. */
.data-table tbody tr.selected {
    background-color: color-mix(in srgb, var(--primary) 8%, var(--card)) !important;
    box-shadow: inset 3px 0 0 var(--primary);
}

/* Empty-State-Zeile innerhalb der Tabelle */
.data-table .empty-state-row td {
    padding: 2.5rem 0.75rem;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    /* STANDARDS 3.10: Innenabstand, sonst kleben Icon und Knopf am Kartenrand. */
    padding: 2.5rem 0.75rem;
    color: var(--muted-foreground);
    text-align: center;
}

/* In Tabellenzeilen gibt die Zelle den Abstand vor (.empty-state-row td). */
.empty-state-row .empty-state {
    padding: 0;
}

/* Zelle mit Ellipsis - funktioniert nur in data-table-fixed (table-layout: fixed). */
.data-table .cell-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Action-Spalte (icon-only Buttons rechts in der Zeile). Header-Label und
   Body-Buttons rechtsbündig. Gap entsteht durch margin-left an Buttons,
   damit der `<td>` als table-cell-Layout intakt bleibt. */
.data-table .cell-actions {
    text-align: right;
    white-space: nowrap;
}

.data-table td.cell-actions .action-btn + .action-btn {
    margin-left: 0.25rem;
}

/* ---------- Cards ---------- */

.card {
    background-color: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
    width: 100%;
}

.card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    font-weight: var(--font-weight-medium);
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--card);
    color: var(--foreground);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
}

.btn:hover {
    background-color: var(--muted);
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

.btn-primary:hover {
    background-color: color-mix(in srgb, var(--primary) 85%, #000);
    border-color: color-mix(in srgb, var(--primary) 85%, #000);
}

/* Speichern-Rückmeldung am Knopf selbst (STANDARDS 3.19), nicht als Toast.
   Grün aus HYTORC.LizenzService übernommen (5,27:1 auf Weiß), Rot ist der
   Destructive-Wert aus STANDARDS 1 Farben (5,62:1) - beide über 4,5:1. */
.btn--saved,
.btn-primary.btn--saved,
.btn-primary.btn--saved:hover {
    background-color: #0a7d2c;
    border-color: #0a7d2c;
    color: #fff;
}

.btn--saved .icon-sm {
    animation: btn-saved-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes btn-saved-pop {
    0%   { transform: scale(0.4) rotate(-20deg); opacity: 0; }
    60%  { transform: scale(1.2) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.btn--failed,
.btn-primary.btn--failed,
.btn-primary.btn--failed:hover {
    background-color: #c62828;
    border-color: #c62828;
    color: #fff;
}

.btn-secondary {
    background-color: var(--card);
    color: var(--foreground);
    border-color: var(--border);
}

.btn-secondary:hover {
    background-color: var(--muted);
}

.btn-danger {
    background-color: var(--destructive);
    color: var(--destructive-foreground);
    border-color: var(--destructive);
}

.btn-danger:hover {
    background-color: #a52121;
    border-color: #a52121;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--foreground);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.action-btn:hover {
    background-color: var(--muted);
}

.action-btn-danger:hover {
    background-color: #fee2e2;
    color: var(--destructive);
}

.action-bar-title {
    font-size: 1.125rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    white-space: nowrap;
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
}

.action-bar-title-with-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* Zusatz hinter dem Titel der Aktionsleiste, z. B. der Bauherr auf der Projektseite. */
.action-bar-untertitel {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    margin-left: 0.25rem;
}

/* ---------- Forms ---------- */

.form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--input-background);
    color: var(--foreground);
    outline: none;
    transition: border-color 0.15s ease;
}

/* Gleiche Höhe für alles Einzeilige.
   Ohne sie standen drei Höhen nebeneinander: Textfeld 39px, select 36px,
   datetime-local 41px. Padding und Rahmen sind überall gleich - der
   Unterschied kommt aus dem, was der Browser innen selbst beisteuert
   (Zeilenhöhe "normal" beim select, eigene Innenteile beim Datumsfeld).
   Dagegen hilft nur eine gesetzte Höhe.

   Die Rechnung stammt aus den Werten darüber und bleibt richtig, wenn sie
   sich ändern: 1.5em Zeilenhöhe + 2x0.5rem Innenabstand + 2x1px Rahmen.

   Nur input und select, nicht textarea: Die trägt dieselbe Klasse und lebt
   von ihrer Zeilenzahl. */
input.form-input,
.form-select {
    height: calc(1.5em + 1rem + 2px);
    line-height: 1.5;
}

.form-input:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 15%, transparent);
}

.form-input[readonly],
.form-input:read-only {
    background-color: var(--background);
    color: var(--muted-foreground);
    cursor: default;
    border-color: var(--border);
}

.form-input[readonly]:focus,
.form-input:read-only:focus {
    border-color: var(--border);
    box-shadow: none;
}

/* Volle Spaltenbreite wie die Textfelder. Ohne Angabe passt sich ein select an
   seine längste Option an - dann steht in einer zweispaltigen Zeile ein
   169px-Feld neben einem 269px-Feld, und die Zeile sieht aus, als wäre sie
   falsch zusammengesetzt. Der Inhalt ist ausserdem variabel: Gastgeber und
   Besuchsgründe pflegt der Kunde selbst. */
.form-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    /* Ein select erbt die Schriftart nicht von selbst - ohne diese Zeile stand
       es in Arial, während daneben der Systemstack lief. Fiel als
       Höhenunterschied auf, bevor es als Schriftunterschied auffiel. */
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--input-background);
    color: var(--foreground);
    outline: none;
    cursor: pointer;
}

/* Ausnahme für feste Aufzählungen aus dem Code - Sprache, Rolle, Status.
   Die wachsen nicht mit den Daten des Kunden, und "Deutsch" in einem Feld über
   die halbe Zeile ist derselbe leere Platz wie bei einem Datum. Gastgeber und
   Besuchsgründe bleiben bei voller Breite: Die pflegt der Kunde, und der
   nächste Eintrag kann länger sein als alle bisherigen. */
.form-select-kurz {
    width: auto;
    min-width: 10rem;
}

.form-select:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 15%, transparent);
}

.form-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
}

/* Auswahlkarten: Kästchen bzw. Radio mit Titel und Erklärung, gewählt mit Markenrand (Rollen, Passwortart). */
.optionen {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}

.option:hover {
    border-color: var(--primary);
}

.option-an {
    border-color: var(--primary);
    background-color: color-mix(in srgb, var(--primary) 5%, white);
}

.option input {
    margin-top: 0.2rem;
    accent-color: var(--primary);
}

.option-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.option-titel {
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
}

.option-erklaerung {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

/* Checkbox mit Beschriftung: die ganze Zeile ist Klickfläche (mind. 36 px hoch, Hover-Fläche), das Kästchen
   20 px groß mit kräftigem Rand und deutlichem Haken in der Aktionsfarbe. Eigene Zeichnung statt Browser-Standard,
   damit es in allen Browsern gleich und gut erkennbar aussieht. */
.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 36px;
    padding: 0.375rem 0.75rem 0.375rem 0.5rem;
    margin-left: -0.5rem;
    border-radius: var(--radius);
    cursor: pointer;
    user-select: none;
    font-size: 0.875rem;
    color: var(--foreground);
    transition: background-color 0.12s ease;
}

.checkbox-label:hover {
    background-color: var(--muted);
}

.checkbox-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    display: grid;
    place-content: center;
    background-color: var(--card);
    border: 2px solid var(--muted-foreground);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.checkbox-label:hover input[type="checkbox"]:not(:disabled) {
    border-color: var(--primary);
}

/* Haken: zwei Kanten eines gedrehten Rechtecks, erscheint nur im angehakten Zustand. */
.checkbox-label input[type="checkbox"]::after {
    content: "";
    width: 6px;
    height: 11px;
    margin-top: -2px;
    border: solid var(--primary-foreground);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.1s ease;
}

.checkbox-label input[type="checkbox"]:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.checkbox-label input[type="checkbox"]:checked::after {
    transform: rotate(45deg) scale(1);
}

.checkbox-label input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* Deaktiviert: keine Hover-Fläche, grauer Rand bzw. graue Füllung, Text gedämpft. */
.checkbox-label:has(input:disabled) {
    cursor: default;
    color: var(--muted-foreground);
}

.checkbox-label:has(input:disabled):hover {
    background-color: transparent;
}

.checkbox-label input[type="checkbox"]:disabled {
    cursor: default;
    background-color: var(--muted);
    border-color: var(--border);
}

.checkbox-label input[type="checkbox"]:disabled:checked {
    background-color: var(--muted-foreground);
    border-color: var(--muted-foreground);
}

/* Optionsfeld (Radio) in den Maßen der Checkbox (CD-12, Daniel Simon, 2026-11-10): 20 px, kräftiger Rand,
   gewählt in der Aktionsfarbe mit weißem Punkt. Gilt in Optionskarten (.option) und in einfachen Zeilen
   (.radio-label, Aufbau und Klickfläche wie .checkbox-label). */
.radio-label {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 36px;
    padding: 0.375rem 0.75rem 0.375rem 0.5rem;
    margin-left: -0.5rem;
    border-radius: var(--radius);
    cursor: pointer;
    user-select: none;
    font-size: 0.875rem;
    color: var(--foreground);
    transition: background-color 0.12s ease;
}

.radio-label:hover {
    background-color: var(--muted);
}

.option input[type="radio"],
.radio-label input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    display: grid;
    place-content: center;
    background-color: var(--card);
    border: 2px solid var(--muted-foreground);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.option:hover input[type="radio"]:not(:disabled),
.radio-label:hover input[type="radio"]:not(:disabled) {
    border-color: var(--primary);
}

.option input[type="radio"]::after,
.radio-label input[type="radio"]::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary-foreground);
    transform: scale(0);
    transition: transform 0.1s ease;
}

.option input[type="radio"]:checked,
.radio-label input[type="radio"]:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.option input[type="radio"]:checked::after,
.radio-label input[type="radio"]:checked::after {
    transform: scale(1);
}

.option input[type="radio"]:focus-visible,
.radio-label input[type="radio"]:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.radio-label:has(input:disabled) {
    cursor: default;
    color: var(--muted-foreground);
}

.radio-label:has(input:disabled):hover {
    background-color: transparent;
}

.option input[type="radio"]:disabled,
.radio-label input[type="radio"]:disabled {
    cursor: default;
    background-color: var(--muted);
    border-color: var(--border);
}

.option input[type="radio"]:disabled:checked,
.radio-label input[type="radio"]:disabled:checked {
    background-color: var(--muted-foreground);
    border-color: var(--muted-foreground);
}

.form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.form-group {
    margin-bottom: 0.875rem;
}

/* Zwei Felder nebeneinander. Bricht unter 560px um - im Modal ist das die
   Breite, ab der zwei Spalten zu schmal für eine Firmenbezeichnung werden. */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 560px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Zwischenüberschrift im Formular - gliedert lange Eingabemasken.
   Herkunft: DEVEX.CRM (.detail-abschnitt). */
.form-abschnitt {
    margin: 1.25rem 0 0.75rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--border);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--muted-foreground);
}

.form-abschnitt:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Erläuterung unter einem Feld - trägt die Begründung, die sonst nur im
   Code steht (z.B. warum die PIN an die hinterlegte Adresse geht). */
/* Abstand nach oben für einen Block, der sonst am vorigen klebt - etwa eine
   Fehlermeldung unter dem letzten Feld. Vier Seiten benutzten dafür
   ".portal-abstand-oben"; die Klasse steht aber nur im Stylesheet des Portals
   und blieb hier wirkungslos. */
.feld-abstand-oben {
    margin-top: 1rem;
}

.form-hinweis {
    margin: 0.375rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--muted-foreground);
}

/* Fehlerbanner im Formular. Farblich identisch zu .login-error - der Standard
   sieht dafür den Namen .alert-error vor; .login-error wird beim nächsten
   Touch der Login-Seiten darauf umgestellt. */
.alert-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background-color: #fee2e2;
    color: #991b1b;
    font-size: 0.875rem;
    border-radius: var(--radius);
}

/* Nebensächliche Aktion im Fliesstext - kein Knopf, damit sie nicht mit den
   beiden Entscheidungen darüber konkurriert. */
.btn-link {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer;
}

/* Aktion in einer Tabellenzeile - steht unter dem Zustand, nicht daneben, damit
   die schmale Spalte nicht bricht. */
.zeile-aktion {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
}

.btn-link:hover {
    color: color-mix(in srgb, var(--primary) 85%, #000);
}

/* Zwei Karten untereinander auf derselben Seite. */
.karte-abstand {
    margin-top: 1.25rem;
}

/* ---------- Feldbreite nach Inhalt ---------- */
/* Ein Eingabefeld sagt durch seine Breite, was erwartet wird. Ein Vorname in
   einem Feld über die halbe Zeile behauptet Platz für einen Satz - und wenn
   jedes Feld gleich breit ist, unterscheidet nichts mehr eine Postleitzahl von
   einer Firmenbezeichnung. Deshalb bekommt jedes Feld die Breite seines
   erwarteten Inhalts, nicht die seiner Spalte.

   Umgesetzt als max-width auf der vollen Breite: In einer schmalen Spalte oder
   auf dem Telefon schrumpft das Feld weiter mit, es wächst nur nicht darüber
   hinaus. Ein festes width würde die Umbrüche zerlegen.

   Über den Typ, wo der Typ es hergibt - sonst muss jedes neue Feld daran
   denken, und das erste, das es vergisst, fällt niemandem auf. Die
   Filter-Popover setzen ihre eigene Breite über einen spezifischeren Selektor
   und bleiben davon unberührt. */

/* ~30 Zeichen. */
.form-input[type="email"] {
    max-width: 22rem;
}

/* Passwörter sind länger als sie aussehen, aber keine Sätze. */
.form-input[type="password"] {
    max-width: 20rem;
}

/* Vor- und Nachname, Ort - selten über 20 Zeichen. */
.feld-name {
    max-width: 16rem;
}

/* Firma, Bezeichnung, Titel, Überschrift - kann ein halber Satz werden. */
.feld-lang {
    max-width: 30rem;
}

/* PIN, Kuerzel, Zahl. */
.feld-kurz {
    max-width: 10rem;
}
/* Mehrzeiliger Text - Einleitung, Bestätigungstext, Abschlusstext. Rund 95
   Zeichen je Zeile; darüber wird das Korrekturlesen mühsam, und genau dazu
   sind diese Felder da. */
.feld-flies {
    max-width: 44rem;
}
/* Bezeichnung von Aufgabe und Unteraufgabe: der Titel der Seite, deshalb fett. */
.feld-titel {
    font-weight: 600;
}

/* Bewusst über die Inhaltslänge hinaus. Die Klasse steht im Markup, damit die
   Entscheidung sichtbar ist - ein Feld ohne Breitenangabe wäre sonst nicht von
   einem unterscheidbar, bei dem jemand die Frage nur nicht gestellt hat. Wer
   sie setzt, schreibt den Grund daneben. */
.feld-voll {
    max-width: none;
}
.form-input[type="date"] {
    width: auto;
    min-width: 10rem;
}

.form-input[type="datetime-local"] {
    width: auto;
    min-width: 13rem;
}

.form-input[type="time"] {
    width: auto;
    min-width: 7rem;
}

/* Aufzählung ohne Punkte - für kurze Verweislisten in einer Karte. */
/* Filter im Kartenkopf (Journal-Karten, Daniel Simon 2026-11-05): kompakte Auswahl und Umschalter vor dem
   Hauptknopf; .is-active markiert einen gesetzten Filter wie in den Tabellenköpfen. */
.kopf-filter {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
    font-weight: normal;
}

.kopf-filter .form-select {
    width: auto;
    max-width: 11rem;
    padding: 0 1.75rem 0 0.5rem;
    font-size: 0.8125rem;
}

/* Auswahl und Knöpfe im Filterblock gleich hoch. */
.kopf-filter .form-select,
.kopf-filter .btn {
    height: 2rem;
    box-sizing: border-box;
}

.kopf-filter .form-select.is-active,
.kopf-filter .btn.is-active {
    border-color: var(--primary);
    background-color: color-mix(in srgb, var(--primary) 8%, white);
}

.liste-schlicht {
    list-style: none;
    margin: 0;
    padding: 0;
}

.liste-schlicht li {
    padding: 0.25rem 0;
}

/* Kleine Listen in Karten, deren ganze Zeile verlinkt ist (Daniel Simon, 2026-11-05): Der Link mit .zeilen-ziel spannt
   per ::after über die Zeile, andere Links und Knöpfe in der Zeile liegen darüber und bleiben eigenständig. */
.liste-verlinkt > li {
    position: relative;
    isolation: isolate;
    cursor: pointer;
}

/* Hover-Fläche ragt links und rechts etwas über den Text hinaus (Daniel Simon, 2026-11-05); per Pseudo-Element,
   damit die Abstände der einzelnen Listen unverändert bleiben. */
.liste-verlinkt > li:hover::before {
    content: "";
    position: absolute;
    inset: 0 -0.625rem;
    z-index: -1;
    background-color: var(--muted);
}

.liste-verlinkt a.zeilen-ziel::after {
    content: "";
    position: absolute;
    inset: 0;
}

.liste-verlinkt > li :is(a:not(.zeilen-ziel), button) {
    position: relative;
    z-index: 1;
}

/* ---------- Bearbeiten in der Zeile ---------- */
/* Schmaler als ein Formularfeld: Die Zeile soll ihre Höhe behalten, sonst
   springt die ganze Tabelle beim Umschalten in den Änderungsmodus. */
.zeilen-eingabe {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* In der Tabellenzeile bestimmt die Spalte die Breite: ohne das liefen Datumsfelder (min-width 10rem) über die
   Spalte hinaus in den Zellabstand und stießen an das Nachbarfeld (Daniel Simon, 2026-11-05). */
.data-table .zeilen-eingabe {
    width: 100%;
    min-width: 0;
}

/* Datumsfelder nur so breit wie nötig: Ohne Mindestbreite ist das Feld 134px breit, das reicht für Datum und
   Kalendersymbol. Die Spalte dafür ist 10rem breit (Feld plus Zellabstand), den Rest bekommen die Textspalten. */
.data-table .form-input[type="date"].zeilen-eingabe {
    width: auto;
    max-width: 100%;
    min-width: 0;
}

.cell-actions {
    white-space: nowrap;
}

/* Termine direkt in der Listenzeile ändern (Daniel Simon, 2026-11-06). Die Datumszellen liegen über dem gestreckten
   Zeilenlink, sonst öffnete schon der erste Klick des Doppelklicks die Aufgabe. Der Stift erscheint beim Überfahren
   der Zeile und bei Tastaturfokus. */
.data-table tbody tr .termin-zelle {
    position: relative;
    z-index: 1;
    cursor: default;
}

/* Spezifischer als die Knopfregel der klickbaren Zeile (position: relative), sonst nähme der Stift Platz weg. */
.data-table tbody tr.clickable .termin-zelle .termin-stift {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-color: var(--card);
    color: var(--muted-foreground);
    opacity: 0;
}

.data-table tbody tr.clickable:hover .termin-zelle .termin-stift,
.data-table tbody tr.clickable .termin-zelle .termin-stift:focus-visible {
    opacity: 1;
}

/* Platz für den Stift rechts in der Ende-Zelle, damit er das Datum nicht verdeckt. */
.data-table td.termin-zelle-stift {
    padding-right: 1.75rem;
}

/* Die offene Zelle liegt über den Nachbarzellen (die selbst z-index 1 haben), damit das Eingabefeld sie überdecken darf. */
.data-table tbody tr .termin-zelle-offen {
    z-index: 3;
}

.datum-editor {
    position: absolute;
    left: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    /* Breiter als die Zelle: ohne max-content begrenzt die Zelle das Feld, und die Knöpfe brechen um. */
    width: max-content;
    padding: 0.25rem;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}

.datum-editor-zeile {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Die Fehlermeldung bricht in der Breite der Eingabezeile um, statt das Feld breiter zu machen. */
.datum-editor .feld-fehler {
    width: 0;
    min-width: 100%;
    margin: 0.25rem 0 0;
    white-space: normal;
}

/* Gedämpft statt in der Markenfarbe: In der Zeile stehen drei Symbole
   nebeneinander, und wenn alle rot sind, hebt sich das Löschen nicht mehr ab -
   die Markenfarbe des Hauses ist selbst ein Rot. */
.cell-actions .btn-link {
    padding: 0.125rem 0.25rem;
    vertical-align: middle;
    color: var(--muted-foreground);
}

.cell-actions .btn-link:hover {
    color: var(--foreground);
}

.cell-actions .btn-link-destructive,
.cell-actions .btn-link-destructive:hover {
    color: var(--destructive);
}

/* ---------- Klickbare Zeile ---------- */
/* Ein echter Link, kein @onclick: Nur so funktionieren Mittelklick, Tastatur,
   "Link in neuem Tab öffnen" und "Adresse kopieren" - alles, was ein Benutzer
   von einem Listeneintrag erwartet. Der <a> bleibt leer und wird über die
   Zeile gestreckt; träge er den Namen, würde dessen overflow:hidden die
   Streckung abschneiden. Die Beschriftung kommt per aria-label.
   Muster aus DEVEX.CRM. */
.data-table tbody tr.clickable {
    cursor: pointer;
    position: relative;
}

.zeilen-link {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Bedienelemente in der Zeile müssen über dem gestreckten Link liegen,
   sonst fängt er ihre Klicks ab. */
.data-table tbody tr.clickable .btn,
.data-table tbody tr.clickable .btn-link,
.data-table tbody tr.clickable button,
.data-table tbody tr.clickable input,
.data-table tbody tr.clickable select {
    position: relative;
    z-index: 1;
}

/* ---------- Modals (STANDARDS 3.5) ---------- */
/* Herkunft: DEVEX.CRM/wwwroot/css/app.css, übernommen. */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal {
    background-color: var(--card);
    width: 600px;
    max-width: calc(100vw - 32px);
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

/* Der Dialog selbst nimmt beim Öffnen den Fokus an, wenn er kein Eingabefeld hat (modal.js, PT-13). Er ist
   kein Bedienelement - der Rahmen des Dialogs zeigt, wo man ist; die Schaltflächen behalten ihren Fokusring. */
.modal:focus {
    outline: none;
}

.modal-wide {
    width: 1200px;
}

.modal-titel {
    margin: 0 0 1rem;
    font-size: 1.125rem;
    font-weight: var(--font-weight-medium);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Setzt eine Aktion im Modal-Fuss nach links ab - für zerstörende Aktionen,
   die nicht neben Abbrechen/Schliessen stehen sollen, wo man sie versehentlich
   trifft. Herkunft: DEVEX.CRM. */
.modal-actions-links {
    margin-right: auto;
}

.modal-mittig {
    text-align: center;
    padding: 1.5rem 0;
}

.modal-mittig .spinner {
    margin: 0 auto 0.5rem;
    display: block;
}

/* Angezeigter, nicht bearbeitbarer Wert im Formularraster. Bewusst kein
   readonly-Input: Ein Feld, das aussieht wie ein Feld, lädt zum Tippen ein. */
.feld-lesend {
    padding: 0.5rem 0;
    font-size: 0.875rem;
}

/* Zweite Zeile in einer Tabellenzelle - E-Mail unter dem Namen, Herkunft unter
   dem Zustand. */
.zeile-nebentext {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    line-height: 1.4;
}

/* Zerstörende Aktion. Farbwert aus STANDARDS 1 (#c62828, 5,62:1 auf Weiß) -
   der frühere Hauswert #ff4444 unterschritt mit 3,41:1 die AA-Grenze. */
.btn-destructive {
    background-color: #c62828;
    border-color: #c62828;
    color: #fff;
}

.btn-destructive:hover {
    background-color: #a81f1f;
    border-color: #a81f1f;
}

.alert-success {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background-color: #dcfce7;
    color: #166534;
    font-size: 0.875rem;
    border-radius: var(--radius);
}

.filter-label {
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--muted-foreground);
    white-space: nowrap;
}

/* ---------- Pagination ---------- */

.pagination {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--card);
    color: var(--foreground);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.pagination-btn:hover {
    background-color: var(--muted);
}

.pagination-btn-active {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

.pagination-btn-active:hover {
    background-color: color-mix(in srgb, var(--primary) 85%, #000);
}

.pagination-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.pagination-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.pagination-left,
.pagination-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.pagination-range {
    font-variant-numeric: tabular-nums;
}

.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    color: var(--muted-foreground);
    user-select: none;
}

/* Page-Size-Select in der Pagination-Card - eigenständig (nicht von
   .th-filter-select abgeleitet, sonst sind Höhe/Padding/Width vermischt). */
.page-size-select {
    height: 34px;
    box-sizing: border-box;
    padding: 0 1.75rem 0 0.625rem;
    font-size: 0.875rem;
    line-height: 1;
    border: 1px solid var(--border);
    background-color: var(--card);
    color: var(--foreground);
    border-radius: var(--radius);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 14px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.page-size-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent);
}

/* Vertikaler Abstand zwischen Tabellen-Card und Pagination-Card. */
.list-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ---------- Detail-Page ---------- */

.detail-card {
    padding: 1.5rem 2rem;
}

.detail-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 2rem;
    row-gap: 0.625rem;
    margin: 0;
    font-size: 0.875rem;
}

.detail-grid dt {
    color: var(--muted-foreground);
    font-weight: var(--font-weight-medium);
    margin: 0;
}

.detail-grid dd {
    margin: 0;
    color: var(--foreground);
}

/* Aktionen unten in einer Karte: Speichern rechts, Löschen links (Aufgaben- und Unteraufgabendetail). */
.karte-aktionen {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.karte-aktion-links {
    margin-right: auto;
}

/* ---------- Navigation ---------- */

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    height: 40px;
    font-size: 0.875rem;
    color: var(--sidebar-foreground);
    text-decoration: none;
    border-radius: var(--radius);
    transition: background-color 0.15s ease;
}

.nav-link:hover {
    background-color: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
    text-decoration: none;
}

.nav-link-active,
.nav-link.active {
    background-color: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
    box-shadow: inset 4px 0 0 var(--sidebar-primary);
}

.nav-link-active:hover,
.nav-link.active:hover {
    background-color: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
}

/* ---------- Tree / Nav-Row ---------- */
/* Flat + Tree-Items teilen sich die gleiche nav-link-Struktur.
   Active-Indicator (4px box-shadow) sitzt am Sidebar-Rand.
   Folder-Expand-Chevron ist rechts, damit das Icon direkt
   neben dem Indicator steht. */

.tree-link-folder {
    cursor: pointer;
}

.tree-chevron-right {
    margin-left: auto;
    opacity: 0.6;
    transition: transform 0.15s ease;
}

.tree-chevron-open {
    transform: rotate(90deg);
}

.tree-children {
    position: relative;
    margin-left: 16px;
}

.tree-children::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background-color: var(--sidebar-border);
}

/* Collapsed Sidebar: Baumkinder werden komplett ausgeblendet - nur
   Level-0-Folder bleiben als Icons sichtbar. Dadurch fluchtet jedes
   sichtbare Icon mit den flachen NavLinks. */
.tree-children.sidebar-collapsed {
    display: none;
}

/* Collapsed Sidebar: Chevron am Folder-Header raus, sonst würde
   `margin-left: auto` das Folder-Icon aus der zentrierten Spur drücken. */
.nav-collapsed .tree-chevron-right {
    display: none;
}

/* ---------- Icon sizes ---------- */

.icon-sm {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.icon-md {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ---------- Blazor ReconnectModal ---------- */

.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.components-rejoining-animation {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block;
}

#components-reconnect-modal:not([open]) {
    display: none;
}

#components-reconnect-modal {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    color: var(--foreground);
    font-size: 0.875rem;
}

#components-reconnect-modal::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
}

.components-reconnect-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button {
    border: 0;
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 0.5rem 1.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

#components-reconnect-modal button:hover {
    background-color: color-mix(in srgb, var(--primary) 85%, #000);
}

.components-rejoining-animation {
    position: relative;
    width: 60px;
    height: 60px;
}

.components-rejoining-animation div {
    position: absolute;
    border: 3px solid var(--primary);
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes components-rejoining-animation {
    0%, 4.9% {
        top: 30px; left: 30px; width: 0; height: 0; opacity: 0;
    }
    5% {
        top: 30px; left: 30px; width: 0; height: 0; opacity: 1;
    }
    100% {
        top: 0; left: 0; width: 60px; height: 60px; opacity: 0;
    }
}

/* ---------- Formular-spezifisch (kompakte Inputs/Labels) ---------- */

.formular .form-input {
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
    height: 1.75rem;
    min-height: 1.75rem;
    max-height: 1.75rem;
    box-sizing: border-box;
    line-height: 1.2;
}

.formular .form-label {
    font-size: 0.6875rem;
    margin-bottom: 0.125rem;
    padding: 0 2px;
    color: var(--muted-foreground);
    font-weight: var(--font-weight-normal);
    display: block;
}

.formular input[type="date"].form-input {
    padding: 0 0.5rem;
    line-height: 1.75rem;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.formular input[type="date"].form-input::-webkit-datetime-edit {
    padding: 0;
    line-height: 1.75rem;
}

.formular input[type="date"].form-input::-webkit-calendar-picker-indicator {
    padding: 0;
    margin: 0;
}

/* ---------- Text Picker (PDF → Input) ---------- */
/* Cursor im PDF bleibt unverändert (Text-Selektion bleibt natürlich) */

/* ---------- Animations ---------- */

/* Lade-Spinner: neutraler rotierender Ring. Ersetzt im Ladezustand ein Icon -
   Icons selbst drehen NIE (STANDARDS.md § Icons). Erbt die Farbe via currentColor. */
.spinner {
    display: inline-block;
    flex: none;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
}

.spinner-sm { width: 16px; height: 16px; }
.spinner-md { width: 20px; height: 20px; }

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Rotation des Kreispfeil-Symbols im Ladezustand (STANDARDS.md §1 Icons,
   §3.15). Die Klasse wurde in der Showcase an sechs Stellen verwendet, war
   aber nirgends definiert - es drehte sich also nichts, obwohl der Standard
   es vorschreibt. DEVEX.CRM hatte die Regel deshalb selbst nachgebaut.

   Sie gilt ausschließlich für neutrale Ladesymbole. Ein bedeutungstragendes
   Icon wird im Ladezustand ersetzt, nicht gedreht - dafür gibt es
   Spinner.razor. */
.spin {
    animation: spin 0.8s linear infinite;
}

/* ---------- Login page ---------- */

.login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--sidebar);
    padding: 1.5rem;
}

.login-card {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
}

.login-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.login-logo-img {
    height: 88px;
    width: auto;
}

/* Wortmarke statt Monogramm: über die Breite gesetzt, nicht über die Höhe.
   Bei 88 px Höhe wäre sie 444 px breit und spränge aus der 400-px-Karte.
   300 px Breite ergeben rund 59 px Höhe - dabei bleibt die Zweitzeile
   "CASING & PACKAGING" lesbar, anders als in der schmalen Kopfleiste. */
.login-logo-wortmarke {
    height: auto;
    width: 100%;
    max-width: 300px;
}

.login-title {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--foreground);
}

.login-field {
    margin-bottom: 1rem;
}

.login-btn {
    width: 100%;
    margin-top: 0.5rem;
}

.login-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    margin-bottom: 1rem;
    background-color: #fee2e2;
    color: #991b1b;
    font-size: 0.875rem;
    border-radius: var(--radius);
}

.login-footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.6875rem;
    color: var(--sidebar-foreground);
    opacity: 0.5;
    line-height: 1.6;
}

.login-version {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.login-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* ---------- Blazor-specific ---------- */

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuOTI5IDUxLjMwNCAyNjYuOTQgNTEuOTE0TDI4OS45MDcgNjUuNzA0QzI5MS4xMTkgNjYuMzE0IDI5Mi4xMjkgNjcuMjI4IDI5Mi43MzcgNjguMzY5TDMwNC4yMDIgODcuNjE0QzMwNS4wMzQgODkuNDMxIDMwNS4wMzQgOTEuNTUxIDMwNC4yMDIgOTMuMzY5TDI4OS4yNDYgOTMuMzY5QzI5MC4wNzggOTEuNTUxIDI5MC4wNzggODkuNDMxIDI4OS4yNDYgODcuNjE0TDI3Ny43ODEgNjguMzY5QzI3Ny4xNzMgNjcuMjI4IDI3Ni4xNjMgNjYuMzE0IDI3NC45NTEgNjUuNzA0TDI1MS45ODQgNTEuOTE0QzI1Mi45OTUgNTEuMzA0IDI1NC4yMDYgNTEgMjU1LjQxOCA1MUwyNjMuNTA2IDUxWiIgZmlsbD0iI0ZGNDQzMyIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9nPjwvc3ZnPg==) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid var(--destructive);
}

/* ==========================================================================
   Ergänzungen aus NCP.BesucherCenter (generisch, keine NCP-Fachlichkeit)
   ========================================================================== */

/* --- Ladezustand des Anmeldeknopfs ---------------------------------------
   Die Anmeldeseite ist statisch gerendert (das Auth-Cookie kann nur im
   HttpContext ausgestellt werden), ein Blazor-Ladezustand ist dort nicht
   möglich. Stattdessen schaltet form-submit-spinner.js den Knopf beim
   Absenden auf .is-loading. Übernommen aus DEVEX.CRM. */
.login-btn-spinner {
    display: none;
}

.login-btn.is-loading {
    pointer-events: none;
    opacity: 0.85;
}

.login-btn.is-loading .login-btn-spinner {
    display: inline-block;
}

/* Abmelden liegt in einem Formular (POST mit Antiforgery-Token). Das Formular
   darf im Dropdown keinen eigenen Kasten aufmachen. */
.header-dropdown-form {
    margin: 0;
    display: block;
}

.header-dropdown-form button {
    width: 100%;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
}

/* Hinweisbanner in Gelb (Farbwerte der .badge-warning) - etwa für das Standardpasswort. */
.alert-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background-color: #fef9c3;
    color: #854d0e;
    font-size: 0.875rem;
    border-radius: var(--radius);
}

.alert-warning a {
    color: inherit;
    text-decoration: underline;
}

/* Empty-State einer Seite, deren Inhalt in einem späteren Paket entsteht (LeererBereich). */
.leerer-bereich {
    padding: 3rem 1.5rem;
}

.leerer-bereich-titel {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
}

/* ---------- Kennzahlen oben auf einer Seite (StatCard, Paket 5/6) ----------
   Übernommen aus DS.Steuerverwaltung (app.css .kpi-grid); Kachel aus S3.FinCenter.vNext (StatCard). */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.kpi-grid > * {
    min-width: 0;
}

/* Beträge rechtsbündig mit gleich breiten Ziffern (Kosten, OP-10). */
.betrag {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Kopf über Beträgen ebenso rechtsbündig - sonst gewinnt ".data-table th" (Daniel Simon, 2026-11-05). */
.data-table th.betrag {
    text-align: right;
}

.data-table tfoot td {
    font-weight: 600;
    border-top: 2px solid var(--border);
    background: var(--background);
}

/* ---------- Schmale Bildschirme (aus KS.ProjektCenter, Daniel Simon, 2026-11-05) ----------
   Unter 700px dürfen breite Tabellen in ihrer Karte seitlich scrollen statt die Seite zu sprengen, Actionbar und
   Kopf brechen um bzw. werden knapper. Die Sidebar startet unter 900px eingeklappt (MainLayout). */
@media (max-width: 700px) {
    .card:has(table.data-table) {
        overflow-x: auto;
    }

    .card table.data-table {
        min-width: 36rem;
    }

    .action-bar,
    .action-bar-actions,
    .action-bar-title-with-back {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .header-user-name,
    .header-title-img {
        display: none;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Ergänzungen des SebMo-Gerüsts (generisch, keine Fachlichkeit). Stehen VOR dem Kunden-Theme,
   damit dessen Tokens und Regeln als letzter Block gelten.
   ========================================================================== */

/* ---------- Zahlen- und Betragsfelder: immer rechtsbündig (STANDARDS 3.4) ----------
   Klassen und Werte aus _s3-ui-standards (S3.UI.Showcase app.css). Eingabe: .form-input.form-input-num
   (Baustein ZahlEingabe), Tabelle: th/td.cell-num - auch der Spaltenkopf und die Summenzeile. */
.form-input.form-input-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.data-table .cell-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Sortierkopf und Filter einer Zahlenspalte ebenfalls rechts. */
.data-table th.cell-num .th-label,
.data-table th.cell-num .th-sort {
    justify-content: flex-end;
    text-align: right;
}

/* ZahlEingabe: Feld mit Einheit dahinter (Std, %, Tage, €). Die Einheit gehört nicht in den Wert. */
.zahl-eingabe {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
}

.zahl-eingabe-einheit {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    white-space: nowrap;
}

/* Feldbreiten nach Inhalt (STANDARDS 3.4): Zahl, Datum, Uhrzeit. */
.form-input.feld-zahl {
    width: 8rem;
}

.form-input.feld-datum {
    width: auto;
    min-width: 10rem;
}

.form-input.feld-uhrzeit {
    width: auto;
    min-width: 7rem;
}

/* DatumUhrzeitEingabe: Datum und Uhrzeit nebeneinander, brechen auf schmalen Schirmen um. */
.feld-datum-uhrzeit {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ---------- Feldfehler und Pflichtfeld (STANDARDS 3.4) ---------- */
.form-input.is-invalid,
.form-select.is-invalid {
    border-color: var(--destructive);
}

.form-input.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--destructive);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--destructive) 15%, transparent);
}

.feld-fehler {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: #991b1b;
}

/* Pflichtkennzeichen am Label: <label class="form-label pflicht">. Stern in der Textfarbe - Orange ist Aktion,
   Rot ist Fehler (corporate-design.md 5). */
.form-label.pflicht::after {
    content: " *";
    color: var(--foreground);
}

.form-input:disabled,
.form-select:disabled {
    background-color: var(--background);
    color: var(--muted-foreground);
    cursor: not-allowed;
}

/* Hinweisbanner neutral (Info) - kühl in Navy-Hell wie .badge-info, nie orange. */
.alert-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background-color: #E1E4E6;
    color: #092231;
    font-size: 0.875rem;
    border-radius: var(--radius);
}

/* ---------- Aufklappmenüs: Benutzermenü (STANDARDS 3.17) und Aktionsmenüs ----------
   Aus MainLayout.razor.css (KS) hierher verschoben: Als scoped CSS waren die Regeln spezifischer als das
   Kunden-Theme (Menülinie 5 px ginge verloren) und für Aktionsmenüs außerhalb des Layouts nicht nutzbar.
   Aktionsmenü: <div class="menue-anker"> um Auslöser und <div class="header-dropdown sebmo-menue shadow-dropdown">. */
.header-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius);
    position: relative;
    user-select: none;
}

.header-user:hover {
    background-color: var(--muted);
}

.header-user-name {
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.dropdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 49;
}

.header-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.375rem;
    padding: 0.375rem 0;
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-width: 240px;
    z-index: 50;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    cursor: default;
}

.header-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    color: var(--foreground);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

button.header-dropdown-item {
    background: none;
    border: none;
    font-family: inherit;
    text-align: left;
}

.header-dropdown-item:hover {
    background-color: var(--muted);
    text-decoration: none;
}

.header-dropdown-item .icon-sm {
    color: var(--muted-foreground);
}

.header-dropdown-separator {
    height: 1px;
    background-color: var(--border);
    margin: 0.25rem 0;
}

.header-dropdown-item-danger,
.header-dropdown-item-danger .icon-sm {
    color: var(--destructive);
}

.header-dropdown-item-danger:hover {
    background-color: #fee2e2;
    color: var(--destructive);
}

/* Kopf des Benutzermenüs: Name, E-Mail, Rollen - damit sichtbar ist, mit welchen Rechten man arbeitet. */
.header-dropdown-kopf {
    padding: 0.625rem 1.25rem 0.5rem;
    line-height: 1.4;
}

.header-dropdown-kopf-name {
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
}

.header-dropdown-kopf-zusatz {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 18rem;
}

/* Anker eines Aktionsmenüs: das Menü hängt rechtsbündig unter dem Auslöser. */
.menue-anker {
    position: relative;
    display: inline-block;
}

.menue-anker-links .header-dropdown {
    right: auto;
    left: 0;
}

/* ---------- Kontextmenü (Components/Shared/Kontextmenue, kontextmenue.js) ----------
   Geht an der Mausposition auf (Plantafel: Rechtsklick, Umschalt+F10). Fläche, Schatten, Trenner und die abgesetzte
   gefährliche Aktion wie das Benutzermenü (STANDARDS.md 3.17, .header-dropdown) - dichter gesetzt, weil es mitten
   im Raster steht und bis zu zehn Zeilen trägt. Kein Orange: Keine Zeile ist „die“ Aktion der Seite; überfahren
   und fokussiert sind kühl (--accent), der Fokus trägt zusätzlich eine Linie in der Ringfarbe. */
.kontextmenue {
    position: fixed;
    z-index: 60;
    min-width: 232px;
    max-width: min(340px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    padding: 0.25rem 0;
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    font-size: 0.8125rem;
    line-height: 1.35;
    outline: none;
    cursor: default;
    user-select: none;
}

.kontextmenue-kopf {
    padding: 0.375rem 0.875rem 0.3125rem;
}

.kontextmenue-kopf-titel {
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kontextmenue-kopf-zusatz {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kontextmenue-trenner {
    height: 1px;
    margin: 0.25rem 0;
    background-color: var(--border);
}

.kontextmenue-zeile {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    min-height: 30px;
    padding: 0.3125rem 0.875rem;
    border: none;
    background: none;
    font: inherit;
    color: var(--foreground);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.kontextmenue-zeile .icon-sm {
    flex: none;
    color: var(--muted-foreground);
}

.kontextmenue-zeile-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.kontextmenue-zeile:hover,
.kontextmenue-zeile:focus {
    background-color: var(--accent);
    color: var(--foreground);
    text-decoration: none;
    outline: none;
}

/* Sichtbarer Fokus: Linie links in der Ringfarbe - auch ohne Farbsehen von „überfahren“ zu unterscheiden. */
.kontextmenue-zeile:focus {
    box-shadow: inset 3px 0 0 var(--ring);
}

.kontextmenue-taste {
    flex: none;
    margin-left: 1rem;
    font-size: 0.6875rem;
    color: var(--muted-foreground);
}

/* Gerade nicht möglich: bleibt lesbar und erreichbar, der Grund steht darunter. */
.kontextmenue-zeile[aria-disabled="true"] {
    color: var(--muted-foreground);
    cursor: not-allowed;
}

.kontextmenue-zeile[aria-disabled="true"]:hover,
.kontextmenue-zeile[aria-disabled="true"]:focus {
    background-color: var(--muted);
    color: var(--muted-foreground);
}

.kontextmenue-zeile[aria-disabled="true"] .icon-sm {
    opacity: 0.55;
}

.kontextmenue-grund {
    font-size: 0.6875rem;
}

.kontextmenue-zeile-gefahr:not([aria-disabled="true"]),
.kontextmenue-zeile-gefahr:not([aria-disabled="true"]) .icon-sm {
    color: var(--destructive);
}

.kontextmenue-zeile-gefahr:not([aria-disabled="true"]):hover,
.kontextmenue-zeile-gefahr:not([aria-disabled="true"]):focus {
    background-color: #fee2e2;
    color: var(--destructive);
}

/* Musterkarte 28: Fläche, auf der das Kontextmenü aufgeht. */
.muster-km-flaeche {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--card);
    font: inherit;
    font-size: 0.8125rem;
    color: var(--foreground);
    text-align: left;
    cursor: context-menu;
}

.muster-km-flaeche:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

/* Lesetext im Menü (Meldung zu einem Konflikt): nicht wählbar, bricht um. */
.kontextmenue-text {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.25rem 0.875rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    user-select: text;
    cursor: text;
}

.kontextmenue-text .icon-sm {
    flex: none;
    margin-top: 1px;
}

.kontextmenue-text-fehler {
    color: var(--pt-fehler-text, #b91c1c);
}

.kontextmenue-text-warnung {
    color: var(--pt-warnung-text, #92400e);
}


/* ---------- Tabs (STANDARDS 3.11) ----------
   Aktiver Tab: Label in --primary und Unterstrich in Stärke der Menülinie (--sebmo-linie, 5 px; ohne
   Kunden-Theme 2 px). Aufbau nach KS.ProjektCenter (Projektseite/ProjektTabs.razor.css), verallgemeinert.
   Orange-Text nur hier und nur auf Weiß (corporate-design.md 5c) - die Tabs stehen deshalb in einer Karte. */
.tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0 0.75rem;
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--sebmo-linie, 2px);
    background: transparent;
    transition: background-color 0.15s ease;
}

.tab:hover {
    text-decoration: none;
}

.tab:hover::after {
    background: var(--border);
}

.tab.active {
    color: var(--primary);
}

.tab.active::after {
    background: var(--primary);
}

.tab-anzahl {
    font-weight: var(--font-weight-normal);
    color: var(--muted-foreground);
}

.tab-warning {
    display: inline-flex;
    color: #b45309;
}

/* Gepaddeter Inhalt einer .card ohne Kopf (z. B. unter Tabs) - Abstände wie der Body der Card-Komponente. */
.karten-inhalt {
    padding: 1rem 1.25rem;
}

/* ---------- Mitarbeiter (Paket 3a, Strang Web-Masken) ----------
   Kopf der Detailansicht über den Reitern, Auswahlraster der Qualifikationen, Wochenzeile des Arbeitszeitmodells.
   Nur Abstände und Raster, keine eigenen Farben: Text in --foreground/--muted-foreground, Orange bleibt bei Tab und Link. */
.ma-kopf {
    padding: 1rem 1.25rem 0.75rem;
}

.ma-kopf-name {
    font-size: 1.125rem;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
}

.ma-kopf-zusatz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.875rem;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

/* Leiser Zellen- und Nebentext (z. B. „frei“ im Wochensoll, Rollen eines Kontos). */
.text-leise {
    color: var(--muted-foreground);
}

/* Mehrfachauswahl als Raster (Qualifikationen): gleich breite Spalten, Kontrollkästchen .checkbox-label (CD-10). */
.auswahl-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.125rem 1rem;
}

.auswahl-raster.optionen-fehler {
    outline: 1px solid var(--destructive);
    outline-offset: 0.375rem;
}

.auswahl-raster .badge {
    margin-left: 0.25rem;
}

/* Verknüpftes Konto bzw. verknüpfter Mitarbeiter unter dem Feld. */
.verknuepfung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0.25rem;
    font-size: 0.875rem;
}

.verknuepfung .icon-sm {
    color: var(--muted-foreground);
}

/* Soll je Wochentag: sieben schmale Felder plus Wochensumme in einer Zeile. */
.soll-woche {
    display: grid;
    grid-template-columns: repeat(7, minmax(3.75rem, 1fr)) minmax(4.5rem, auto);
    gap: 0.5rem;
    align-items: end;
}

.soll-tag {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.soll-tag-name {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    color: var(--muted-foreground);
    text-align: right;
}

.soll-tag .zahl-eingabe,
.form-input.feld-dauer-tag {
    width: 100%;
}

.form-input.feld-dauer {
    width: 6rem;
}

/* Telefonnummer: so breit wie die E-Mail daneben (.form-input[type="email"]), nicht über die ganze Spalte. */
.form-input.feld-telefon {
    max-width: 22rem;
}

.soll-summe-wert {
    padding: 0.5rem 0;
    text-align: right;
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .soll-woche {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Knopf, der die ganze Tabellenzeile öffnet (wie .zeilen-link, aber für einen Dialog statt einer Adresse). Spezifischer als
   ".data-table tbody tr.clickable button" (Bedienelemente über dem Zeilenlink) - dieser Knopf IST der Zeilenlink. */
.data-table tbody tr.clickable button.zeilen-link {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;     /* Knöpfe dehnen sich mit inset: 0 allein nicht über die Zeile */
    height: 100%;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

/* Statusmarke hinter Text in derselben Zeile (z. B. „gilt heute“ hinter der Bezeichnung eines Modells). */
.badge-abstand {
    margin-left: 0.375rem;
}

/* Statusmarke mit Tooltip in einer klickbaren Zeile: liegt über dem gestreckten Zeilen-Link, sonst erschiene ihr
   title nie (Kennzeichen „gesperrt“ der Benutzerliste, API-15). */
.data-table tbody tr.clickable .badge-ueber-link {
    position: relative;
    z-index: 1;
    cursor: help;
}

/* Abschnitt „Anmeldung“ der Benutzer-Detailansicht (API-15): Werte der Kontosperre als .detail-grid, darunter Hinweis
   und Knopf; ohne Sperre eine ruhige Zeile. */
.anmeldung-lage {
    margin-bottom: 0.75rem;
}

.anmeldung-lage dd {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}

.anmeldung-lage + .form-hinweis {
    margin-bottom: 0.75rem;
}

.anmeldung-meldung {
    margin-bottom: 0.75rem;
}

.anmeldung-ruhig {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* ---------- Konten des Mitarbeiters (Paket 3b, Strang Rechenkern) ----------
   Reiter „Konten“ der Mitarbeiter-Detailansicht (Baustein MitarbeiterKonten): Kennzahlen des Arbeitszeitkontos,
   Zusammensetzung des Saldos, Buchungen, Urlaubskonto je Jahr. Nur Anordnung und Schriftgrößen - keine eigenen Farben:
   Salden stehen in --foreground, auch negative (ein Minus ist ein Stand, kein Fehler; das Vorzeichen steht immer da).
   Orange kommt hier nicht vor. Zahlen über .cell-num rechtsbündig (STANDARDS 3.4). */
.kennzahlen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 1.25rem;
    border: 1px solid var(--border);
}

.kennzahl {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem 1rem;
    border-left: 1px solid var(--border);
}

.kennzahl:first-child {
    border-left: none;
}

.kennzahl dt {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    color: var(--muted-foreground);
}

.kennzahl dd {
    margin: 0;
    font-size: 1.25rem;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Der Saldo ist die Hauptzahl des Reiters - größer, sonst gleich. */
.kennzahl-haupt dd {
    font-size: 1.625rem;
    line-height: 1.2;
}

.kennzahl-zusatz {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--muted-foreground);
}

/* Neutraler Hinweis über einem Kontoblock (.alert-info): Abstand zum Inhalt darunter. */
.konto-hinweis {
    margin-bottom: 1rem;
    align-items: flex-start;
}

.konto-hinweis .icon-sm {
    margin-top: 0.125rem;
}

/* Zusammensetzung des Saldos (schmal) neben den Buchungen (breit). */
.konto-spalten {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 9fr);
    gap: 1.5rem;
    align-items: start;
}

.konto-titel {
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
}

.konto-tabelle {
    border: 1px solid var(--border);
}

/* Schmale Fenster: Die Tabelle scrollt in ihrer Hülle seitlich, statt Spalten übereinanderzuschieben. */
.konto-scroll {
    overflow-x: auto;
}

/* Urlaubskonto: Zahlenspalten so breit wie ihr Kopf, die Begründung der Anpassung bekommt den Rest. */
.konto-urlaub .cell-num {
    width: 1%;
    padding-left: 1.25rem;
}

.konto-urlaub .konto-anpassung {
    min-width: 12rem;
    padding-left: 1.5rem;
}

.konto-tabelle .konto-datum,
.konto-tabelle .konto-erfasst {
    white-space: nowrap;
}

.konto-tabelle .konto-aktion {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

/* Begründung der manuellen Anpassung: darf umbrechen, damit sie ganz zu lesen ist. */
.konto-tabelle .konto-anpassung {
    white-space: normal;
    color: var(--muted-foreground);
}

/* Stornierte Buchung: bleibt lesbar als Spur, zählt nicht - Betrag durchgestrichen, Zeile leise. */
.konto-tabelle tr.zeile-storniert td {
    color: var(--muted-foreground);
}

.konto-tabelle tr.zeile-storniert .konto-betrag {
    text-decoration: line-through;
}

/* Zeile aus Beschriftung, Wert und kleiner Aktion (hinterlegter Jahresurlaub, Folgejahr anlegen). */
.konto-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.875rem;
    font-size: 0.875rem;
}

.konto-zeile .btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Saldo vor und nach der Buchung im Dialog. */
.konto-vorschau {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem 0.75rem;
    margin: 0.25rem 0 0;
    padding: 0.625rem 0.875rem;
    background: var(--background);
    border: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.konto-vorschau strong {
    margin-right: 0.75rem;
    color: var(--foreground);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Text der Buchung in der Storno-Rückfrage. */
.konto-zitat {
    margin: 0.5rem 0;
    padding: 0.5rem 0.875rem;
    border-left: 3px solid var(--border);
    color: var(--foreground);
}

@media (max-width: 900px) {
    .kennzahlen,
    .konto-spalten {
        grid-template-columns: 1fr;
    }

    .kennzahl {
        border-left: none;
        border-top: 1px solid var(--border);
    }

    .kennzahl:first-child {
        border-top: none;
    }
}
/* Löschen im Dialog links, getrennt von Abbrechen und Speichern. */
.modal-actions .dialog-links {
    margin-right: auto;
}

/* ---------- Anmeldeseite (corporate-design.md 4d, sebmo-ci-preview.html Abschnitt 5) ----------
   Heller Grund, darunter das Navy-Band über die untere Bildschirmhälfte; die Anmeldekarte ist eine
   Markenkarte (.sebmo-markenkarte: Kante 20 px, Markenschatten) und liegt halb auf dem Band.
   Überschreibt die Login-Regeln aus KS weiter oben. */
.login-page {
    background: linear-gradient(var(--background) 0, var(--background) 52%, var(--sebmo-navy) 52%);
    padding: 1.5rem 1.5rem 1.5rem calc(1.5rem + 10px);   /* links +10 px: gleicht den Schatten nach rechts optisch aus */
}

.login-card {
    max-width: 440px;   /* 420 px Inhalt + 20 px Kante */
    padding: 2rem 2.25rem 2.25rem;
}

/* Vollständiges Logo (Bildmarke + Unterzeile), 240 px breit (corporate-design.md 3, 4d). */
.login-logo {
    margin-bottom: 1.25rem;
}

.login-logo-sebmo {
    display: block;
    width: 240px;
    height: auto;
}

.login-title {
    font-size: 1.125rem;
    font-weight: var(--font-weight-medium);
    margin-bottom: 1.5rem;
}

.login-bleiben {
    margin: 0.25rem 0 0.75rem;
}

/* Der Fuß steht auf dem Navy-Band. */
.login-footer {
    margin-top: 2rem;
    color: #e8e8e8;
    opacity: 0.7;
}

/* Niedrige Fenster: Das Band beginnt tiefer, damit das Formular nicht auf Navy ausläuft. */
@media (max-height: 640px) {
    .login-page {
        background: linear-gradient(var(--background) 0, var(--background) 70%, var(--sebmo-navy) 70%);
    }
}

/* ---------- Datensatznavigator (Muster DS.KVCenter): "12 von 66" mit Pfeilen für vorherigen/nächsten Datensatz,
   bezogen auf die Liste, aus der man kam. Steht in der Action-Bar links von den Aktionen. ---------- */
.datensatz-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-right: 0.5rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.datensatz-nav .action-btn {
    display: inline-flex;
    text-decoration: none;
}

.datensatz-nav .action-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ---------- Dashboard-Kopf: Markenkarte ohne Navy-Band ----------
   Die Markenkarte (weiß, orange Kante) steht im Anwendungskontext direkt auf dem Seitenhintergrund. Das Navy-Band
   gibt es nur auf der Anmeldeseite - in der Anwendung passt es nicht (Daniel Simon, 2026-11-10). */
.dash-kopf {
    margin-bottom: 1.5rem;
}

.dash-kopf .sebmo-markenkarte {
    /* In der Anwendung der übliche Kartenschatten (.card); der kräftige Website-Schatten bleibt der Anmeldeseite
       vorbehalten. Der dünne Rand oben, unten und links ist ein innerer Schatten. Die orange Kante ist hier kein
       border, sondern ein eigener Balken (::after), der oben und unten 1 px Abstand hält - so läuft die Randlinie
       der Karte über und unter dem Balken durch, und seine Ecken bleiben rechtwinklig. */
    position: relative;
    border-right: none;
    /* Gleiche Machart wie der Kartenschatten (.card: 0 1px 6px, 10 %), aber kräftiger, damit sich die Markenkarte
       von den übrigen Karten abhebt. */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35),
                inset 1px 0 0 var(--border), inset 0 1px 0 var(--border), inset 0 -1px 0 var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem 1.5rem;
    /* Zwei Fünftel des Inhaltsbereichs (Daniel Simon, 2026-11-11); der Kopf trägt .container-wide und beginnt damit an
       derselben linken Kante wie die Karten darunter. Auf schmalen Fenstern wächst die Karte bis zur vollen Breite,
       bevor die Begrüßung umbricht (Daniel Simon (S3), 2026-11-12): nicht schmaler als 640 px, solange der
       Inhaltsbereich das hergibt. Reicht auch die volle Breite nicht, rutscht das Datum unter die Begrüßung, statt
       sie zusammenzudrücken. */
    flex-wrap: wrap;
    width: 40%;
    min-width: min(100%, 640px);
    box-sizing: border-box;
    padding: 1.25rem calc(1.75rem + var(--sebmo-kante)) 1.25rem 1.75rem;
}

.dash-kopf .sebmo-markenkarte::after {
    content: "";
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 0;
    width: var(--sebmo-kante);
    background-color: var(--sebmo-orange);
}

.dash-kopf-gruss {
    font-size: 1.25rem;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
}

.dash-kopf-lage {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.dash-kopf-datum {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    white-space: nowrap;
    text-align: right;
}

.seiten-stapel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ---------- Modul-Startseite: Ausblick auf die geplanten Bereiche ----------
   Keine Links (die Seiten gibt es noch nicht), deshalb bewusst ohne Hover und ohne Chevron. */
.geplant-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.geplant-eintrag {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px dashed var(--border);
    background-color: var(--background);
    text-align: left;
}

.geplant-eintrag .icon-md {
    flex-shrink: 0;
    color: var(--muted-foreground);
}

.geplant-titel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
}

.geplant-text {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    line-height: 1.45;
}

/* ---------- Stammdaten-Masken (Paket 2a) ----------
   Feld mit Zusatz rechts daneben (Wochentag neben dem Datum), Wochentag in Listen gedämpft und gleich breit, damit die
   Daten untereinander stehen; Änderungshinweis mit Abstand unter dem Formular. */
.feld-mit-zusatz {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.feld-zusatz {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.feiertag-wochentag {
    display: inline-block;
    min-width: 1.75rem;
    color: var(--muted-foreground);
}

.aenderungs-hinweis {
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

/* ---------- Korrekturen an übernommenen Regeln ---------- */

/* Knöpfe erben die Schrift nicht von selbst - ohne diese Zeile standen sie in Arial neben dem Systemstack. */
.btn {
    font-family: inherit;
}

/* Speichern-Rückmeldung (STANDARDS 3.19) behält ihre Farbe auch unter der Maus: Die Hover-Regel des Kunden-Themes
   (Primär wird Navy) ist spezifischer als .btn--saved/.btn--failed und färbte "Fehlgeschlagen" sonst Navy. */
.btn.btn-primary.btn--saved:hover:not(:disabled) {
    background-color: #0a7d2c;
    border-color: #0a7d2c;
}

.btn.btn-primary.btn--failed:hover:not(:disabled) {
    background-color: #c62828;
    border-color: #c62828;
}

/* Abmelden im Benutzermenü ist ein Formularknopf - gleiche Schriftgröße wie die Links daneben. */
.header-dropdown-form button.header-dropdown-item {
    font-size: 0.875rem;
}

/* Anmeldekarte: beide Felder über die volle Breite (die Breitenregel für Passwortfelder gilt Formularen). */
.login-card .form-input {
    width: 100%;
    max-width: none;
}

/* Flächen für "gewählt" kühl in Navy-Hell statt Primär-Tint: Ein Orange-Tint läse sich wie die Fehlerpille
   (corporate-design.md 4, --accent). Die Markierung selbst bleibt Orange als Linie bzw. Rahmen. */
.data-table tbody tr.selected {
    background-color: var(--accent) !important;
    box-shadow: inset var(--sebmo-linie, 3px) 0 0 var(--primary);
}

.option-an {
    background-color: var(--accent);
}

/* Meldung über den Feldern einer Maske: Abstand zum ersten Feld. */
.meldung-oben {
    margin-bottom: 1rem;
}

/* Warnung unter dem Kontrollkästchen „Aktiv“, wenn der Wechsel rückwirkend rechnet (AktivWechselWarnung, RK-1):
   mehrzeiliger Text, das Symbol steht deshalb an der ersten Zeile. */
.aktiv-wechsel-warnung {
    align-items: flex-start;
    margin: 0.375rem 0 0.5rem;
    line-height: 1.45;
}

.aktiv-wechsel-warnung svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* ---------- Musterseite (nur Entwicklung, /entwicklung/muster) ----------
   Nur Anordnung der Muster - die gezeigten Bausteine tragen ausschließlich ihre echten Klassen. */
.muster-reihe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.muster-reihe + .muster-reihe {
    margin-top: 0.75rem;
}

.muster-spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.muster-notiz {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin-top: 0.75rem;
}

.muster-band {
    padding: 1.5rem 1.5rem 0;
    background: linear-gradient(var(--background) 0, var(--background) 50%, var(--sebmo-navy) 50%);
    padding-bottom: 1.75rem;
}

.muster-menue-offen {
    position: relative;
    min-height: 13.5rem;
}

.muster-menue-offen .header-dropdown {
    position: absolute;
    top: 2.75rem;
    left: 0;
    right: auto;
}

.muster-sidebar {
    width: 240px;
    padding: 0.5rem 0;
    background-color: var(--sidebar);
    color: var(--sidebar-foreground);
}

.muster-sidebar .nav-link:hover,
.muster-sidebar .nav-link.is-hover {
    background-color: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
}

.muster-sidebar .nav-link.active {
    background-color: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
}

/* ==========================================================================
   Plantafel (/disposition/plantafel, ADR-010 Entwurf) - Seite, Raster, Zelle, Ressourcenleiste, Konflikthinweis.
   Eigener Block mit Präfix .pt-, steht vor dem Kunden-Theme. Farbregeln (corporate-design.md 5, 6a):
   - Markenfarben nicht für Einträge: drei neutrale Kategorietöne (Mitarbeiter weiß, Maschine graugrün, Subunternehmer
     grauviolett); die Art ist immer auch am Icon und am Text erkennbar.
   - Orange nur als Linie der Auswahl und des Ablageziels (Aktion); "gewählt/überfahren" kühl (--accent).
   - Konflikt rot, Hinweis gelb, veröffentlicht grün in den Werten der S3-Statuspillen (STANDARDS.md 1).
   ========================================================================== */
:root {
    --pt-m: #ffffff;
    --pt-m-rand: #d4d7da;
    --pt-g: #dfeceb;
    --pt-g-rand: #c2d6d4;
    --pt-s: #e9e5f2;
    --pt-s-rand: #d2cae3;
    --pt-frei: #f4f4f4;
    --pt-linie: #dcdfe2;
    --pt-fehler: #c62828;
    --pt-fehler-text: #991b1b;
    --pt-fehler-flaeche: #fee2e2;
    --pt-warnung: #ca8a04;
    --pt-warnung-text: #854d0e;
    --pt-warnung-flaeche: #fef9c3;
    --pt-ok-text: #166534;
}

/* Die Seite füllt den Inhaltsbereich; gescrollt wird im Raster und in der Leiste, nicht auf der Seite. */
.pt-seite {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    height: 100%;
    min-height: 420px;
}

.pt-karte {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---- Statuszeile über dem Raster: Auswahl, letzte Meldung, sonst Bedienhinweis. Feste Mindesthöhe, damit das Raster nicht springt. ---- */
.pt-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem 0.75rem;
    min-height: 46px;
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.8125rem;
}

.pt-status-ruhe {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted-foreground);
}

.pt-status-auswahl {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.125rem 0.5rem 0.125rem 0.625rem;
    background-color: var(--accent);
    box-shadow: inset var(--sebmo-linie, 3px) 0 0 var(--primary);
    min-height: 34px;
}

.pt-status-auswahl strong {
    font-weight: var(--font-weight-medium);
}

.pt-status-auswahl .btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
}

/* ---- Konflikthinweis ---- */
.pt-hinweis {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.3125rem 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    min-width: 0;
}

.pt-hinweis .icon-sm {
    margin-top: 1px;
}

.pt-hinweis-text {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.375rem;
    min-width: 0;
}

.pt-hinweis-titel {
    font-weight: var(--font-weight-medium);
}

.pt-hinweis-titel:not(:last-child)::after {
    content: ":";
}

.pt-hinweis-fehler {
    background-color: var(--pt-fehler-flaeche);
    color: var(--pt-fehler-text);
}

.pt-hinweis-warnung {
    background-color: var(--pt-warnung-flaeche);
    color: var(--pt-warnung-text);
}

/* Kollision (Zeilenversion, ADR-009): kühl wie .alert-info - ein Kollege war schneller, kein Fehler des Benutzers. */
.pt-hinweis-kollision {
    background-color: #E1E4E6;
    color: #092231;
}

.pt-hinweis-ok {
    padding-left: 0;
    color: var(--foreground);
}

.pt-hinweis-ok .icon-sm {
    color: var(--pt-ok-text);
}

.pt-hinweis-kompakt {
    display: flex;
    gap: 0.25rem;
    margin-top: 2px;
    padding: 3px 4px;
    font-size: 0.6875rem;
    line-height: 1.3;
    white-space: normal;
    text-align: left;
    overflow-wrap: anywhere;
}

.pt-hinweis-kompakt .icon-sm {
    width: 12px;
    height: 12px;
}

/* ---- Raster ---- */
.pt-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    outline: none;
    background-color: var(--background);
}

.pt-tafel {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 0.75rem;
    line-height: 1.3;
    background-color: var(--card);
}

.pt-col-auftrag {
    width: 220px;
}

.pt-tafel th,
.pt-tafel td {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 0;
    font-weight: var(--font-weight-normal);
    text-align: left;
    vertical-align: top;
}

/* Kopfzeilen und Auftragsspalte bleiben stehen. Der ganze Tabellenkopf ist sticky (nicht die einzelnen Zellen
   mit errechnetem Abstand) - so entsteht zwischen Wochen- und Tageszeile kein Spalt, durch den Einträge scheinen. */
.pt-tafel thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

.pt-tafel thead th {
    background-color: var(--card);
}

.pt-kopf-wochen th {
    height: 24px;
}

.pt-kopf-tage th {
    border-bottom-color: var(--pt-linie);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.06);
}

.pt-tafel thead th.pt-ecke {
    position: sticky;
    left: 0;
    z-index: 5;
    padding: 0.375rem 0.5rem;
    vertical-align: bottom;
    border-right-color: var(--pt-linie);
    border-bottom-color: var(--pt-linie);
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.06);
}

.pt-ecke-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
}

.pt-filter-wrap {
    display: block;
}

.pt-filter {
    width: 100%;
    height: 28px;
    box-sizing: border-box;
    padding: 0 0.5rem;
    font-family: inherit;
    font-size: 0.8125rem;
    color: var(--foreground);
    background-color: var(--input-background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
}

.pt-filter:focus-visible,
.pt-filter.is-active {
    border-color: var(--primary);
}

.pt-filter:focus-visible {
    box-shadow: 0 0 0 1px var(--ring);
}

.pt-tafel thead th.pt-woche {
    padding: 0 0.5rem;
    vertical-align: middle;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    border-left: 1px solid var(--pt-linie);
    white-space: nowrap;
}

/* Die Wochenbeschriftung bleibt beim waagerechten Scrollen neben der Auftragsspalte sichtbar. */
.pt-woche-text {
    position: sticky;
    left: 228px;
    display: inline-block;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
}

.pt-woche-spanne {
    font-weight: var(--font-weight-normal);
    color: var(--muted-foreground);
}

/* Höhe des Tageskopfs (PT-K1, Daniel Simon 2026-11-10): 47 px = 4 px Abstand oben + 22 px Knopf der Tagesaktion
   (.pt-tag-aktion) + 2 px Luft + 16 px Marken (.pt-tag-marke) + 3 px Abstand unten. Datum oben in der Zeile der Aktion,
   Stand unten in der Zeile der Marken. Die Kompaktansicht ist ohnehin höher (Datum zweizeilig) und hat keine Tagesaktion. */
.pt-tag-knopf {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1px;
    width: 100%;
    min-height: 47px;
    padding: 4px 6px 5px;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.pt-tag-knopf:hover {
    background-color: var(--accent);
}

.pt-tag-knopf:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
}

.pt-tag-datum {
    display: flex;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pt-tag-wt {
    font-weight: var(--font-weight-medium);
}

.pt-stand {
    display: flex;
    align-items: center;
    gap: 3px;
    min-height: 14px;
    font-size: 0.6875rem;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-stand-veroeffentlicht {
    color: var(--pt-ok-text);
}

.pt-stand-geaendert {
    color: var(--pt-warnung-text);
}

.pt-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Wochenende und Feiertage abgesetzt; Wochenanfang mit kräftigerer Linie. */
.pt-tafel .pt-frei {
    background-color: var(--pt-frei);
}

.pt-tafel .pt-wochenanfang {
    border-left: 1px solid var(--pt-linie);
}

/* Heute: Navy-Linie am Kopf und feine Seitenlinien durch die Spalte - Linie, keine Fläche. */
.pt-tafel thead th.pt-heute {
    box-shadow: inset 0 3px 0 var(--sebmo-navy, #333), 0 2px 3px rgba(0, 0, 0, 0.06);
}

.pt-tafel td.pt-heute {
    box-shadow: inset 1px 0 0 #8e9aa3, inset -1px 0 0 #8e9aa3;
}

/* Gewählter Tag (Bezug der Ressourcenleiste): kühle Fläche, orange Auswahllinie unten. */
.pt-tafel thead th.pt-tag-gewaehlt {
    background-color: var(--accent);
    box-shadow: inset 0 calc(-1 * var(--sebmo-linie, 3px)) 0 var(--primary), 0 2px 3px rgba(0, 0, 0, 0.06);
}

.pt-tafel thead th.pt-tag-gewaehlt.pt-heute {
    box-shadow: inset 0 3px 0 var(--sebmo-navy, #333), inset 0 calc(-1 * var(--sebmo-linie, 3px)) 0 var(--primary), 0 2px 3px rgba(0, 0, 0, 0.06);
}

/* Die Zellen der gewählten Spalte: dieselbe kühle Fläche, schwächer - der Tag bleibt beim Rollen nach unten erkennbar.
   Fläche ohne Aktion ist kühl, nie Orange (corporate-design.md 5). Wochenende und Feiertag behalten ihren Grauton
   als Mischung, damit „frei“ auch in der gewählten Spalte zu sehen ist. Die Zeile „Abwesend“ (tfoot) steht deckend
   über dem Raster und bekommt die Mischung mit ihrem eigenen Grund. */
.pt-tafel tbody td.pt-tag-gewaehlt {
    background-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.pt-tafel tbody td.pt-tag-gewaehlt.pt-frei {
    background-color: color-mix(in srgb, var(--accent) 55%, var(--pt-frei));
}

.pt-tafel tfoot td.pt-tag-gewaehlt {
    background-color: color-mix(in srgb, var(--accent) 55%, var(--background));
}

/* ---- Veröffentlichen ---- */

/* Bezugsrahmen für Kante und Aktion des Tages (der Kopf selbst klebt als Ganzes, die Zelle ist sonst nicht positioniert). */
.pt-tafel thead th.pt-tag {
    position: relative;
}

/* Tag mit unveröffentlichtem Entwurf: orange Kante links am Spaltenkopf - Linie, keine Fläche. Oben steht die
   Navy-Linie „heute“, unten die Auswahllinie; die linke Kante ist frei. */
.pt-tafel thead th.pt-tag-offen::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--primary);
    pointer-events: none;
}

/* Aktion des Tages im Spaltenkopf (veröffentlichen bzw. Versionen): ruhig, erst beim Überfahren betont. 22 x 22 px
   (PT-K1: nicht kleiner, der Kopf ist dafür höher - siehe .pt-tag-knopf); 4 px von oben, damit der Rahmen beim
   Überfahren unter der Navy-Linie „heute“ bleibt. */
.pt-tag-aktion {
    position: absolute;
    top: 4px;
    right: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: none;
    color: var(--muted-foreground);
    cursor: pointer;
}

.pt-tag-aktion-offen {
    color: var(--primary);
}

.pt-tag-aktion:hover {
    background-color: var(--card);
    border-color: var(--border);
    color: var(--foreground);
}

.pt-tag-aktion:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

.pt-tag-aktion .pt-icon {
    width: 14px;
    height: 14px;
}

/* Konflikte und Hinweise der Spalte: Marken unten rechts im Spaltenkopf, in der Zeile des Stands - Warndreieck in
   den Farben der Zellen (pt-marke-fehler, pt-marke-warnung), ab zwei mit Zahl. Knöpfe: Ein Klick springt zum nächsten
   betroffenen Eintrag (plantafel.js). Sie liegen über dem Kopf-Knopf, unter der Tagesaktion (Höhe: .pt-tag-knopf). */
.pt-tag-marken {
    position: absolute;
    right: 3px;
    bottom: 3px;
    display: flex;
    gap: 1px;
}

.pt-tag-marke {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 18px;
    height: 16px;
    padding: 0 2px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: none;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

.pt-tag-marke:hover {
    background-color: var(--card);
    border-color: var(--border);
}

.pt-tag-marke:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

.pt-tag-marke-zahl {
    font-size: 0.6875rem;
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
}

/* Der Stand weicht den Marken aus (Auslassung statt Überlagerung). */
.pt-tag-marken-1 .pt-stand {
    padding-right: 28px;
}

.pt-tag-marken-2 .pt-stand {
    padding-right: 54px;
}

/* Sprungziel einer Marke: kurzer Ring in der Fokusfarbe, der ausklingt - zeigt hin, wählt nichts aus. */
.pt-sprungziel {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    animation: pt-sprungziel 2s ease-out forwards;
}

.pt-tafel td.pt-zelle.pt-sprungziel {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
}

@keyframes pt-sprungziel {
    0%, 55% {
        outline-color: var(--ring);
    }

    100% {
        outline-color: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pt-sprungziel {
        animation: none;
    }
}

/* Zähler am Knopf „Veröffentlichen“: Zahl der Tage mit unveröffentlichtem Entwurf. */
.pt-zaehler {
    display: inline-block;
    min-width: 1.25rem;
    margin-left: 0.125rem;
    padding: 0 0.3125rem;
    border-radius: 999px;
    background-color: var(--primary-foreground);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
    line-height: 1.25rem;
    text-align: center;
}

/* Schmale Fenster: Die Action-Bar der Plantafel bleibt einzeilig (55 px) - Datumsspanne und Hinweis „Entwurf“
   entfallen (die Spanne steht im Kopf der Tafel), „Zurück“ zeigt nur den Pfeil. */
@media (max-width: 1280px) {
    .pt-zeitraum-spanne,
    .action-bar-title-with-back > .badge,
    .pt-zurueck-text,
    #pt-veroeffentlichen > .icon-sm {
        display: none;
    }

    .pt-aktionen {
        gap: 0.5rem;
    }
}

.pt-legende-linie {
    display: inline-block;
    width: 3px;
    height: 14px;
    background-color: var(--primary);
}

/* Rückfrage „Veröffentlichen“ (VeroeffentlichenDialog) */
.vo-einleitung {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.vo-tage {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Viele Tage (SP-3 b): Die Liste rollt im Dialog, Titel, Einleitung, „Alle Tage“, Kommentar und Knöpfe bleiben
   stehen. Der Dialog wird dafür zur Spalte, in der nur die Liste nachgibt, und darf etwas höher werden als sonst.
   Reicht die Höhe selbst dafür nicht (sehr niedriges Fenster), rollt wie bisher der ganze Dialog - Titel und Knöpfe
   haften dann oben und unten. Ebenso der Versionenverlauf eines Tages (SP-2 b). */
.modal:has(> .vo-tage),
.modal:has(> .vo-verlauf-allein) {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.modal:has(> .vo-tage) > *,
.modal:has(> .vo-verlauf-allein) > * {
    flex: 0 0 auto;
}

.modal > .vo-tage,
.modal > .vo-verlauf-allein {
    flex: 0 1 auto;
    min-height: 9rem;
    overflow-y: auto;
}

.modal > .vo-verlauf-allein {
    min-height: 5rem;
}

/* Haften am Rand des Dialogs: Die Elemente reichen in den Innenabstand des Dialogs (1.5rem), damit beim Rollen
   nichts dahinter durchscheint; in Ruhe sieht der Dialog aus wie jeder andere. */
.modal:has(> .vo-tage) > .modal-titel,
.modal:has(> .vo-verlauf-allein) > .modal-titel {
    position: sticky;
    top: -1.5rem;
    z-index: 1;
    margin-top: -1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
    margin-bottom: 0;
    background-color: var(--card);
}

.modal:has(> .vo-tage) > .modal-actions,
.modal:has(> .vo-verlauf-allein) > .modal-actions {
    position: sticky;
    bottom: -1.5rem;
    z-index: 1;
    margin-bottom: -1.5rem;
    padding-bottom: 1.5rem;
    background-color: var(--card);
}

.vo-verlauf.vo-verlauf-allein {
    margin: 0;
}

/* Schalter „Alle Tage“ über der Liste - steht in der Flucht der Kästchen der Tage. */
.vo-alle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 -0.375rem;
    padding: 0 0.75rem;
    min-height: 36px;
}

/* Zustand „teilweise“: gefüllt wie gewählt, Strich statt Haken. */
.checkbox-label input[type="checkbox"]:indeterminate {
    background-color: var(--primary);
    border-color: var(--primary);
}

.checkbox-label input[type="checkbox"]:indeterminate::after {
    width: 10px;
    height: 0;
    margin-top: 0;
    border-width: 0 0 2.5px 0;
    transform: none;
}

.vo-tag {
    padding: 0.5rem 0.75rem 0.625rem;
}

.vo-tag + .vo-tag {
    border-top: 1px solid var(--border);
}

.vo-tag-kopf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;   /* schmales Fenster: die Aktionen rutschen unter das Datum, statt abgeschnitten zu werden */
    gap: 0 0.75rem;
    min-height: 28px;
}

.vo-tag-wahl {
    margin: 0;
}

.vo-tag-datum {
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vo-tag-version {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vo-tag-aktionen {
    display: flex;
    gap: 0.875rem;
    margin-left: auto;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.vo-tag-aktionen .btn-link {
    color: var(--muted-foreground);
}

.vo-tag-aktionen .btn-link:hover:not(:disabled) {
    color: var(--foreground);
}

.vo-ruhig {
    margin: 0.25rem 0 0 1.75rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.vo-aenderungen,
.vo-hinweise {
    list-style: none;
    margin: 0.25rem 0 0 1.75rem;
    padding: 0;
    font-size: 0.875rem;
}

.vo-aenderungen li,
.vo-hinweise li {
    display: flex;
    align-items: flex-start;
    gap: 0.4375rem;
    padding: 0.125rem 0;
}

.vo-aenderungen .pt-icon,
.vo-hinweise .pt-icon {
    margin-top: 0.25rem;
    color: var(--muted-foreground);
}

.vo-aenderung-neu .pt-icon {
    color: var(--pt-ok-text);
}

.vo-aenderung-entfallen .pt-icon {
    color: var(--pt-fehler-text);
}

.vo-hinweise {
    margin-top: 0.375rem;
}

.vo-hinweise li {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
}

.vo-hinweise li + li {
    margin-top: 0.1875rem;
}

.vo-hinweise .vo-warnung {
    background-color: var(--pt-warnung-flaeche);
    color: var(--pt-warnung-text);
}

.vo-hinweise .vo-warnung .pt-icon {
    color: var(--pt-warnung);
}

.vo-hinweise .vo-sperre {
    background-color: var(--muted);
    color: var(--foreground);
}

.vo-tag-verhindert .vo-tag-datum {
    color: var(--muted-foreground);
}

.vo-verwerfen {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.375rem 0 0.25rem 1.75rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--accent);
    font-size: 0.875rem;
}

/* „Inzwischen geändert“ beim Verwerfen (RV-1): kühle Meldung mit Abstand zu Warnung und Tagesliste. */
.vo-kollision {
    margin: 0.5rem 0;
}

.vo-verwerfen-knoepfe {
    display: flex;
    gap: 0.375rem;
    margin-left: auto;
    flex-shrink: 0;
}

.vo-verwerfen-knoepfe .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.vo-verlauf {
    margin: 0.5rem 0 0 1.75rem;
}

.vo-verlauf-tabelle {
    font-size: 0.8125rem;
}

.vo-verlauf-tabelle .vo-ruhig {
    margin: 0;
}

.vo-verlauf-zeit {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.vo-kommentar {
    margin-top: 1rem;
}

/* Handlungsbedarf im Dashboard (HandlungsbedarfListe) */
.hb-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hb-eintrag + .hb-eintrag {
    border-top: 1px solid var(--border);
}

.hb-kopf {
    display: grid;
    /* Feste rechte Spalte: Die Marke („1 von 3 Tagen offen“, „2 Tage offen“) ist verschieden breit - mit „auto“
       begänne die mittlere Spalte in jeder Zeile woanders. */
    grid-template-columns: 1.5rem minmax(0, 1.4fr) minmax(0, 1fr) 11rem;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.25rem;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
}

button.hb-kopf {
    cursor: pointer;
}

button.hb-kopf:hover {
    background-color: var(--accent);
}

button.hb-kopf:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
}

.hb-kopf > .icon-sm {
    color: var(--muted-foreground);
}

.hb-titel {
    display: block;
    font-weight: var(--font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hb-unter {
    display: block;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hb-rechts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    white-space: nowrap;
}

.hb-text {
    min-width: 0;
}

/* Einzeilige Arten (Auftrag „In Planung“, Bedarf an einem Arbeitstag): keine mittlere Spalte - der Text reicht bis zu
   den Knöpfen und bricht um, statt mitten im Satz zu enden (SP-5, SP-6). */
.hb-kopf-einzeilig {
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    align-items: start;
}

.hb-kopf-einzeilig > .icon-sm {
    margin-top: 0.1875rem;
}

.hb-kopf-einzeilig .hb-titel,
.hb-kopf-einzeilig .hb-unter {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
}

.hb-kopf-einzeilig .hb-rechts {
    align-self: center;
}

.hb-posten {
    margin: 0 0 0.75rem 2.5rem;
}

/* Die Posten jeder Abwesenheit stehen in denselben Spalten: feste Breiten statt Breite nach Inhalt, sonst beginnt
   „Auftrag“ und „Stand“ in jeder aufgeklappten Zeile woanders. */
.hb-posten .data-table {
    table-layout: fixed;
    width: 100%;
}

.hb-posten .hb-spalte-tag {
    width: 9rem;
}

.hb-posten .hb-spalte-stand {
    width: 9rem;
}

.hb-posten .hb-spalte-aktionen {
    width: 18rem;
}

.hb-posten .data-table td {
    vertical-align: middle;
}

.hb-posten-aktionen {
    display: flex;
    justify-content: flex-end;
    gap: 0.375rem;
}

.hb-posten-aktionen .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.hb-tag {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
    /* Schmal: die Aufträge der Abwesenheit unter Name und Zeitraum, die Marke rechts über beide Zeilen. */
    .hb-kopf {
        grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    }

    .hb-posten .hb-spalte-tag {
        width: 6rem;
    }

    .hb-posten .hb-spalte-stand {
        width: 6.5rem;
    }

    .hb-kopf .hb-mitte {
        grid-column: 2;
        grid-row: 2;
    }

    button.hb-kopf .hb-rechts {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

/* Auftragsspalte */
.pt-tafel th.pt-auftrag {
    position: sticky;
    left: 0;
    z-index: 2;
    padding: 5px 8px 6px;
    background-color: var(--card);
    border-right-color: var(--pt-linie);
    box-shadow: 2px 0 3px rgba(0, 0, 0, 0.06);
}

.pt-auftrag-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
    color: var(--foreground);
}

.pt-auftrag-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin-top: 3px;
    font-size: 0.6875rem;
    color: var(--muted-foreground);
}

.pt-auftrag-meta .badge {
    padding: 0 0.375rem;
    font-size: 0.6875rem;
}

.pt-auftrag-kst {
    font-variant-numeric: tabular-nums;
}

/* Bezeichnung als Link zur Auftragsmaske: sieht aus wie die Bezeichnung, unterstreicht beim Überfahren. */
a.pt-auftrag-link {
    text-decoration: none;
    border-radius: 2px;
}

a.pt-auftrag-link:hover {
    color: var(--accent-foreground);
    text-decoration: underline;
}

a.pt-auftrag-link:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

/* Auftrag in Statuszeile, Meldung und Dialog als Link. */
.pt-verweis {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    text-underline-offset: 2px;
}

.pt-verweis:hover {
    color: var(--accent-foreground);
    text-decoration-color: currentColor;
}

.pt-verweis:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

.pt-zeile-abgeschlossen .pt-auftrag-name {
    color: var(--muted-foreground);
}

.pt-klappen,
.pt-mehr {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 2px;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.6875rem;
    color: var(--muted-foreground);
    text-decoration: underline;
    cursor: pointer;
}

.pt-klappen {
    margin-left: auto;
}

.pt-klappen:hover,
.pt-mehr:hover {
    color: var(--foreground);
}

.pt-klappen:focus-visible,
.pt-mehr:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

.pt-mehr {
    height: 18px;
}

.pt-mehr-fehler {
    color: var(--pt-fehler-text);
}

.pt-mehr-warnung {
    color: var(--pt-warnung-text);
}

/* ---- Zelle ---- */
.pt-tafel td.pt-zelle {
    position: relative;
    height: 34px;
    padding: 3px 3px 1px;
    outline: none;
}

.pt-tafel td.pt-zelle:focus-visible {
    box-shadow: inset 0 0 0 2px var(--ring);
}

/* Eine Ressource ist gewählt: Die Zellen sind Ziele. */
.pt-auswahl-aktiv .pt-zelle {
    cursor: copy;
}

.pt-auswahl-aktiv .pt-tafel td.pt-zelle:hover {
    background-color: var(--accent);
}

/* Ablageziel beim Ziehen und Zelle mit abgewiesener Zuordnung. */
.pt-tafel td.pt-zelle.pt-drop-ziel {
    background-color: var(--accent);
    box-shadow: inset 0 0 0 2px var(--primary);
}

.pt-tafel td.pt-zelle.pt-zelle-abgewiesen {
    box-shadow: inset 0 0 0 2px var(--pt-fehler);
}

/* Abgeschlossener Abrechnungszeitraum (HA-7): Schloss im Spaltenkopf, die Zellen des Tages sind kein Ziel.
   Neutral - weder Orange (Aktion) noch Rot (Fehler): Der Tag ist Geschichte, kein Konflikt. */
.pt-tag-schloss {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    color: var(--muted-foreground);
}

.pt-auswahl-aktiv .pt-tafel td.pt-zelle.pt-gesperrt {
    cursor: not-allowed;
}

.pt-auswahl-aktiv .pt-tafel td.pt-zelle.pt-gesperrt:hover {
    background-color: transparent;
}

.pt-auswahl-aktiv .pt-tafel td.pt-zelle.pt-gesperrt.pt-frei:hover {
    background-color: var(--pt-frei);
}

.pt-tafel td.pt-leer {
    padding: 0;
    border-right: none;
}

.pt-leer-inhalt {
    position: sticky;
    left: 0;
    width: min(100%, 720px);
    box-sizing: border-box;
    font-size: 0.875rem;
}

/* ---- Eintrag (Chip): eine Zeile, 20 px hoch, Text mit Auslassung ---- */
.pt-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    height: 20px;
    margin: 0 0 2px;
    padding: 0 4px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background-color: transparent;
    font: inherit;
    font-size: 0.75rem;
    line-height: 18px;
    color: var(--foreground);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}

button.pt-chip {
    cursor: pointer;
}

button.pt-chip[draggable="true"] {
    cursor: grab;
}

.pt-chip .pt-icon {
    color: var(--muted-foreground);
}

.pt-chip-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-chip-g {
    background-color: var(--pt-g);
    border-color: var(--pt-g-rand);
}

.pt-chip-s {
    background-color: var(--pt-s);
    border-color: var(--pt-s-rand);
}

/* Maschine mit Maschinenführer: zweite Zeile im selben Eintrag. */
.pt-chip-zweizeilig {
    height: 36px;
    align-items: flex-start;
}

.pt-chip-zweizeilig > .pt-icon {
    margin-top: 3px;
}

.pt-chip-zeilen {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 16px;
    padding-top: 1px;
}

.pt-chip-zeilen .pt-chip-text {
    display: block;
}

.pt-chip-unterzeile {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.6875rem;
    color: var(--muted-foreground);
}

.pt-chip-unterzeile .pt-icon {
    width: 10px;
    height: 10px;
}

.pt-legende-chip.pt-chip-m {
    padding-left: 0;
}

.pt-chip-laufzeit {
    border-style: dashed;
    border-color: #8fb0ad;
}

.pt-chip-zusatz {
    font-size: 0.625rem;
    color: var(--muted-foreground);
}

button.pt-chip:hover {
    border-color: var(--sebmo-navy, #333);
}

button.pt-chip:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

/* Konflikt und Hinweis: farbige Kante links und Warndreieck - nie nur Farbe. */
.pt-chip-fehler {
    border-color: var(--pt-fehler);
    box-shadow: inset 3px 0 0 var(--pt-fehler);
    padding-left: 7px;
}

.pt-chip-warnung {
    border-color: var(--pt-warnung);
    box-shadow: inset 3px 0 0 var(--pt-warnung);
    padding-left: 7px;
}

.pt-chip .pt-chip-warn {
    color: var(--pt-warnung-text);
}

.pt-chip-fehler .pt-chip-warn {
    color: var(--pt-fehler);
}

/* Gewählter Eintrag und weitere Einträge derselben Ressource: kühl, mit Navy-Rahmen. */
.pt-chip-gewaehlt,
.pt-chip-gleiche {
    background-color: var(--accent);
    border-color: var(--sebmo-navy, #333);
}

.pt-chip-gewaehlt {
    font-weight: var(--font-weight-medium);
    box-shadow: inset 0 0 0 1px var(--sebmo-navy, #333);
}

.pt-gezogen {
    opacity: 0.45;
}

/* ---- Kompakte Ansicht: Anzahlen je Art ---- */
.pt-tafel-kompakt .pt-tag-knopf {
    align-items: center;
    padding: 4px 0 5px;
}

.pt-tafel-kompakt .pt-tag-datum {
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-size: 0.75rem;
}

.pt-tafel-kompakt .pt-woche-spanne {
    display: none;
}

/* Kompakt: Die Marken stehen ohne Zahl übereinander am rechten Rand neben Wochentag und Datum; Datum und Stand
   rücken dafür um die Markenbreite nach links (die Kopfhöhe bleibt). */
.pt-tafel-kompakt .pt-tag-marken {
    top: 4px;
    right: 0;
    bottom: auto;
    flex-direction: column;
    gap: 0;
}

.pt-tafel-kompakt .pt-tag-marke {
    min-width: 12px;
    width: 12px;
    height: 15px;
    padding: 0;
}

.pt-tafel-kompakt .pt-tag-marke .pt-icon {
    width: 10px;
    height: 10px;
}

.pt-tafel-kompakt .pt-stand {
    padding-right: 0;
}

.pt-tafel-kompakt .pt-tag-marken-1 .pt-tag-knopf,
.pt-tafel-kompakt .pt-tag-marken-2 .pt-tag-knopf {
    padding-right: 10px;
}

.pt-tafel td.pt-zelle-kompakt {
    padding: 4px 0;
    vertical-align: middle;
}

.pt-zahlen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.pt-zahl {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 30px;
    padding: 0 3px;
    box-sizing: border-box;
    border: 1px solid var(--pt-m-rand);
    background-color: var(--pt-m);
    font-variant-numeric: tabular-nums;
    line-height: 14px;
}

.pt-zahl .pt-icon {
    width: 10px;
    height: 10px;
    color: var(--muted-foreground);
}

.pt-zahl-g {
    background-color: var(--pt-g);
    border-color: var(--pt-g-rand);
}

.pt-zahl-s {
    background-color: var(--pt-s);
    border-color: var(--pt-s-rand);
}

.pt-zelle-marke {
    display: inline-flex;
    margin-top: 1px;
}

.pt-marke-fehler {
    color: var(--pt-fehler);
}

.pt-marke-warnung {
    color: var(--pt-warnung-text);
}

/* ---- Legende ---- */
.pt-legende {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding: 0.375rem 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.pt-legende-chip {
    width: auto;
    margin: 0;
}

.pt-legende-marke {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.pt-legende-rechts {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* ---- Action-Bar der Plantafel ---- */
.pt-aktionen {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pt-blaettern {
    display: flex;
    align-items: center;
}

.pt-blaettern .btn {
    display: inline-flex;
    align-items: center;
    min-height: 39px;
}

.pt-blaettern .btn + .btn {
    margin-left: -1px;
}

.pt-kompakt-schalter {
    margin: 0;
    font-size: 0.875rem;
}

/* ---- Ressourcenleiste ---- */
/* Breite über --pt-leiste-breite an .pt-seite: Der Ziehgriff (plantafel.js) setzt sie, das Raster nimmt den Rest. */
.pt-leiste {
    flex: 0 0 var(--pt-leiste-breite, 288px);
    width: var(--pt-leiste-breite, 288px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pt-leiste-tabs {
    flex-shrink: 0;
    gap: 0;
    padding: 0 0.25rem;
}

.pt-leiste-tabs .tab {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0.75rem 0.375rem;
    font-size: 0.8125rem;
}

.pt-leiste-filter {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem 0.375rem;
}

.pt-leiste-filter .checkbox-label,
.pt-leiste-filter .radio-label {
    min-height: 30px;
    font-size: 0.8125rem;
}

.pt-quali-knopf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    height: 28px;
    padding: 0 0.5rem;
    border: 1px solid var(--border);
    background-color: var(--card);
    font: inherit;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    cursor: pointer;
}

.pt-quali-knopf.is-active {
    border-color: var(--primary);
    color: var(--foreground);
}

.pt-quali-knopf:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

.pt-quali-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.pt-quali-liste {
    display: flex;
    flex-direction: column;
    max-height: 232px;
    overflow-y: auto;
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
    border: 1px solid var(--border);
    background-color: var(--background);
}

.pt-quali-modus {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--border);
}

.pt-leiste-kopf {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background-color: var(--background);
    font-size: 0.6875rem;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.pt-leiste-liste {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

.pt-leiste-leer {
    padding: 2rem 0.75rem;
    font-size: 0.875rem;
}

.pt-ressource {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    height: 32px;
    padding: 0 0.75rem;
    border: none;
    border-bottom: 1px solid var(--border);
    background-color: var(--card);
    font: inherit;
    font-size: 0.8125rem;
    color: var(--foreground);
    text-align: left;
    cursor: pointer;
}

.pt-ressource[draggable="true"] {
    cursor: grab;
}

.pt-ressource:disabled {
    cursor: default;
}

.pt-ressource:hover:not(:disabled) {
    background-color: var(--accent);
}

.pt-ressource:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
}

.pt-ressource-icon {
    width: 14px;
    height: 14px;
    color: var(--muted-foreground);
}

.pt-ressource-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-ressource-belegt .pt-ressource-name {
    color: var(--muted-foreground);
}

.pt-ressource-lage {
    flex: 0 1 auto;
    max-width: 46%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    color: var(--muted-foreground);
}

.pt-ressource .badge {
    padding: 0 0.375rem;
    font-size: 0.6875rem;
}

.pt-ressource-gewaehlt,
.pt-ressource-gewaehlt:hover:not(:disabled) {
    background-color: var(--accent);
    box-shadow: inset var(--sebmo-linie, 3px) 0 0 var(--primary);
}

.pt-ressource-gewaehlt .pt-ressource-name {
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
}

/* ---- Ressourcenleiste eingeklappt (PT-7): schmaler Streifen, das Raster gewinnt die Breite ---- */
.pt-leiste-suchzeile {
    display: flex;
    gap: 0.375rem;
}

.pt-leiste-suchzeile .pt-filter {
    flex: 1 1 auto;
    min-width: 0;
}

.pt-leiste-zuklappen,
.pt-leiste-auf {
    border: none;
    background: none;
    font: inherit;
    color: var(--muted-foreground);
    cursor: pointer;
}

.pt-leiste-zuklappen {
    flex: 0 0 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--card);
}

.pt-leiste-zuklappen:hover,
.pt-leiste-auf:hover {
    background-color: var(--accent);
    color: var(--foreground);
}

.pt-leiste-zuklappen:focus-visible,
.pt-leiste-auf:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
}

.pt-leiste.pt-leiste-zu {
    flex: 0 0 40px;
    width: 40px;
}

.pt-leiste-auf {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    height: 100%;
    padding: 0.875rem 0;
    font-size: 0.8125rem;
}

.pt-leiste-auf-text {
    writing-mode: vertical-rl;
    letter-spacing: 0.02em;
}

/* ---- Ziehgriff zwischen Raster und Leiste: Machart der Anwendungs-Sidebar (.sidebar-resize-handle in
   MainLayout.razor.css) - 4 px breiter Streifen, in Ruhe unsichtbar, überfahren und beim Ziehen Aktionsfarbe zu 50 %,
   Zeiger col-resize. Er füllt die Lücke zwischen den Karten (Greiffläche 16 px, auch für den Finger); die negativen
   Ränder heben die zweite Lücke auf, die er als Flex-Element sonst erzeugte. ---- */
.pt-griff {
    position: relative;
    flex: 0 0 1rem;
    margin: 0 -1rem;
    cursor: col-resize;
    touch-action: none;
}

.pt-griff::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 2px);
    width: 4px;
    transition: background-color 0.15s ease;
}

.pt-griff:hover::before,
.pt-griff.pt-griff-zieht::before,
.pt-griff:focus-visible::before {
    background-color: color-mix(in srgb, var(--primary) 50%, transparent);
}

.pt-griff:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
}

/* ---- Nur-Ansicht (ohne Recht Disponieren): nichts lädt zum Greifen ein, nichts ist ausgegraut ---- */
.pt-nur-ansicht button.pt-chip {
    cursor: default;
}

.pt-nur-ansicht .pt-ressource:disabled {
    color: var(--foreground);
    opacity: 1;
}

/* ---- Bereichsauswahl (OP-27): kühle Fläche, orange Linie oben und unten - wie das Ablageziel ---- */
.pt-seite[data-pt-bereich] .pt-tafel {
    user-select: none;
    -webkit-user-select: none;
}

.pt-tafel td.pt-zelle.pt-bereich {
    background-color: var(--accent);
    box-shadow: inset 0 2px 0 var(--primary), inset 0 -2px 0 var(--primary);
}

/* Lange Sammelmeldungen der Bereichsauswahl schieben das Raster nicht aus dem Bild. */
.pt-status {
    max-height: 10.5rem;
    overflow-y: auto;
}

.pt-status .pt-hinweis-text > span {
    min-width: 0;
}

.pt-chip-anzahl {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.pt-chip .pt-chip-bemerkung {
    width: 11px;
    height: 11px;
}

/* ---- Zeile "Abwesend" (P-SC03-102): bleibt am unteren Rand stehen; ruhig - Text ohne Fläche ---- */
.pt-tafel tfoot {
    position: sticky;
    bottom: 0;
    z-index: 3;
}

.pt-tafel tfoot th,
.pt-tafel tfoot td {
    border-bottom: none;
    background-color: var(--background);
    box-shadow: inset 0 1px 0 var(--pt-linie), 0 -2px 3px rgba(0, 0, 0, 0.06);
}

.pt-tafel tfoot td.pt-frei {
    background-color: var(--pt-frei);
}

.pt-tafel tfoot th.pt-abwesend-kopf {
    box-shadow: inset 0 1px 0 var(--pt-linie), 2px -2px 3px rgba(0, 0, 0, 0.06);
}

.pt-tafel td.pt-abwesend {
    height: 22px;
    padding: 3px 3px 2px;
}

.pt-tafel td.pt-abwesend.pt-heute {
    box-shadow: inset 1px 0 0 #8e9aa3, inset -1px 0 0 #8e9aa3, inset 0 1px 0 var(--pt-linie), 0 -2px 3px rgba(0, 0, 0, 0.06);
}

.pt-abw {
    display: flex;
    align-items: baseline;
    gap: 5px;
    height: 18px;
    padding: 0 4px;
    box-sizing: border-box;
    border: 1px solid transparent;
    font-size: 0.75rem;
    line-height: 16px;
    color: var(--foreground);
    white-space: nowrap;
    overflow: hidden;
}

.pt-abw-art {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    color: var(--muted-foreground);
}

/* Beantragter Urlaub ist noch keine Abwesenheit: Hinweis in Gelb, wie am Eintrag. */
.pt-abw-beantragt .pt-abw-art {
    color: var(--pt-warnung-text);
}

.pt-abw-beantragt .pt-chip-text {
    color: var(--muted-foreground);
}

.pt-abw-gleiche {
    background-color: var(--accent);
    border-color: var(--sebmo-navy, #333);
}

.pt-abwesend-schmal .pt-abw-art {
    display: none;
}

.pt-abw-zahl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-variant-numeric: tabular-nums;
    color: var(--muted-foreground);
}

.pt-tafel-kompakt td.pt-abwesend {
    vertical-align: middle;
}

.pt-abw-zahl .pt-icon {
    width: 10px;
    height: 10px;
}

/* ---- Eintragsdialog (Maschinenführer; Personenzahl und Bemerkung) ---- */
.pt-dialog-kopf {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-bottom: 1rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    background-color: var(--background);
}

.pt-dialog-kopf .icon-sm {
    margin-top: 2px;
    color: var(--muted-foreground);
}

.pt-dialog-name {
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.pt-dialog-ort {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.pt-dialog-gruppe {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    max-height: 44vh;
    overflow-y: auto;
}

.pt-dialog textarea.form-input {
    min-height: 4.25rem;
    resize: vertical;
}

/* Hinweis im Eintragsdialog, wenn ein Kollege den Eintrag inzwischen geändert hat: über den Feldern, die jetzt den neuen Stand zeigen. */
.pt-dialog-hinweis {
    align-items: flex-start;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.pt-dialog-hinweis .icon-sm {
    flex: 0 0 auto;
    margin-top: 2px;
}

/* Musterseite: die Bausteine in einem kleinen Raster (nur Anordnung). */
.muster-pt-tafel {
    overflow-x: auto;
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    width: fit-content;
    max-width: 100%;
}

/* Schmale Fenster: Leiste unter das Raster. */
@media (max-width: 1100px) {
    .pt-seite {
        flex-direction: column;
        height: auto;
    }

    .pt-karte {
        flex: none;
        height: 70vh;
    }

    .pt-leiste {
        flex: none;
        width: 100%;
        max-height: 60vh;
    }

    .pt-leiste.pt-leiste-zu {
        flex: none;
        width: 100%;
    }

    /* Untereinander hat die Leiste keine feste Höhe mehr - mit der Basis 0 fiele die Liste auf null zusammen und keine
       Ressource wäre zu sehen (gefunden bei der Sichtprüfung des Kontextmenüs, 2026-11-11). Die Liste nimmt ihre
       eigene Höhe, begrenzt durch die Höchsthöhe der Leiste, und rollt darin. */
    .pt-leiste-liste {
        flex: 1 1 auto;
    }

    /* Untereinander gibt es keine Breite aufzuteilen. */
    .pt-griff {
        display: none;
    }

    .pt-leiste-auf {
        flex-direction: row;
        justify-content: center;
        padding: 0.5rem 0;
    }

    .pt-leiste-auf-text {
        writing-mode: horizontal-tb;
    }
}

/* ==========================================================================
   Abwesenheiten (Paket 8a): Liste, Detailansicht, Erfassungsdialog, Reiter des Mitarbeiters.
   Eigener Block mit Präfix .abw-, steht vor dem Kunden-Theme. Farbregeln (corporate-design.md 2b, 5): kein Orange
   für Status - die Art ist schlichter Text, der Status eine Pille (.badge-warning/-success/-error), „heute“ kühl
   (.badge-info). Eine Krankmeldung ist kein Alarm und bekommt keine Signalfarbe.
   ========================================================================== */

/* Art-Auswahl im Dialog: drei Auswahlkarten nebeneinander (.option), auf schmalen Schirmen untereinander. */
.abw-arten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.abw-arten .option {
    padding: 0.625rem 0.75rem;
}

/* Feststehender Wert an der Stelle eines Feldes (Mitarbeiter beim Ändern) - gleiche Höhe wie die Eingabe. */
.abw-fest {
    padding: 0.5rem 0;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
}

.abw-hinweis-zeitraum {
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}

.abw-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
}

/* Vorschau im Dialog: was die Abwesenheit bewirkt. Feste Mindesthöhe, damit der Dialog beim Rechnen nicht springt. */
.abw-vorschau {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 2.75rem;
    margin-top: 0.25rem;
}

.abw-vorschau > .spinner {
    align-self: flex-start;
}

.abw-vorschau .konto-vorschau {
    margin: 0;
}

.abw-hinweis {
    margin: 0;
}

/* Wirkung auf das Urlaubskonto: schmale Tabelle mit Rahmen wie die Kontotabellen. */
.abw-wirkung {
    border: 1px solid var(--border);
}

.abw-wirkung + .abw-wirkung,
.abw-kontozeile + .abw-wirkung {
    margin-top: 1rem;
}

.abw-wirkung tr.abw-aktuell td {
    background-color: var(--accent);
}

.abw-kontozeile {
    margin-top: 0.375rem;
}

/* Liste: Personalnummer und Wochentag leise neben dem Wert, Wochentag in fester Breite - die Daten stehen bündig. */
.abw-nummer {
    margin-left: 0.375rem;
    font-size: 0.8125rem;
}

.abw-wochentag {
    display: inline-block;
    width: 1.625rem;
    font-size: 0.8125rem;
}

/* „von Ihnen erfasst“ hinter der Art (AB-2): leise daneben; wird die Spalte schmal, steht es als zweite Zeile
   darunter statt abgeschnitten zu werden. */
.abw-selbst {
    margin-left: 0.375rem;
    font-size: 0.8125rem;
    white-space: nowrap;
}

@media (max-width: 1280px) {
    .abw-selbst {
        display: block;
        margin-left: 0;
    }
}

/* Zusatz am offenen Urlaubsantrag, der das Urlaubskonto überzieht (AA-4): eigene Zeile unter der Statuspille, Symbol
   und Text in der Schriftfarbe der .badge-warning (auf Weiß 7,4 : 1) - eine Warnung in S3-Gelb-Dunkel, keine zweite
   Pille neben „Beantragt“ und nie orange. Der Text darf umbrechen, statt in der schmalen Spalte abgeschnitten zu werden. */
.abw-ueberzieht {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: #854d0e;
}

.abw-ueberzieht .icon-sm {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    margin-top: 0.0625rem;
}

.abw-sichthinweis {
    margin: 0;
    padding: 0 0.25rem;
}

/* Vergangene Abwesenheiten im Reiter des Mitarbeiters treten zurück, bleiben aber lesbar. */
.abw-vergangen td {
    color: var(--muted-foreground);
}

/* Stornierte Abwesenheiten (AB-3) bleiben sichtbar, zählen aber nicht: die Zeile tritt zurück, die graue Pille
   „Storniert“ sagt, warum. Kein Durchstreichen - die Angaben sollen lesbar bleiben. */
.abw-storniert td {
    color: var(--muted-foreground);
}

/* Detailansicht: links die Angaben, rechts die Wirkung. */
.abw-spalten {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 0 2rem;
}

.abw-angaben {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: 0.5rem 1rem;
    margin: 0;
    font-size: 0.875rem;
}

.abw-angaben dt {
    color: var(--muted-foreground);
}

.abw-angaben dd {
    margin: 0;
    color: var(--foreground);
}

.abw-angaben dd .text-leise {
    margin-left: 0.375rem;
}

.abw-bemerkung {
    white-space: pre-line;
}

/* AF-21 b: Text des Antragstellers aus der SebMoApp - als Zitat mit kühler Linie abgesetzt (nur lesbar, kein Feld),
   die Herkunft klein darunter. Kein Orange: Es ist keine Aktion. */
.abw-antragstext {
    border-left: 2px solid var(--border);
    padding-left: 0.625rem;
    overflow-wrap: anywhere;
    white-space: normal;   /* die Zeilenumbrüche des Markups zwischen Text und Herkunft zählen nicht */
}

.abw-antragstext-text {
    display: block;
    white-space: pre-line;
}

.abw-antragstext-herkunft {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    white-space: normal;
}

/* Spalte „Bemerkung“ der Abwesenheiten am Mitarbeiter: der Text des Antragstellers in eigener Zeile. */
.abw-antragstext-zeile {
    display: block;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .abw-arten,
    .abw-spalten {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Detailansicht bei 1024 px: Neben der Seitenleiste bleiben je Spalte rund 330 px - die Wirkungstabelle des
   Urlaubskontos (vier Spalten) lief dort rechts aus der Karte. Angaben und Wirkung stehen deshalb untereinander. */
@media (max-width: 1180px) {
    .abw-spalten {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 1.25rem;
    }
}

/* ==========================================================================
   Paket 7a: Arbeitszeiten (SC.07) - Arbeitsliste und Arbeitstag. Eigener Block des Strangs Rechenkern.
   Dichte Liste: Uhrzeiten und Stunden rechtsbündig mit gleich breiten Ziffern (STANDARDS 3.4); Kennzeichen als
   Pillen ohne Orange (corporate-design.md 5: Orange ist Aktion). „Gewählt“ kühl (--accent).
   ========================================================================== */

.az-leiste {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
}

.az-woche {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.az-woche-text {
    min-width: 15.5rem;
    text-align: center;
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
}

.az-summe {
    margin-left: auto;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}

.az-tabelle td,
.az-intervalle td,
.az-wert {
    font-variant-numeric: tabular-nums;
}

/* Liste der Arbeitstage: unter dieser Breite bliebe dem Namen kein Platz (Rechnung am colgroup der Seite). */
.az-tabelle.az-liste {
    min-width: 70rem;
}

.az-tabelle tbody td {
    padding-top: 0.4375rem;
    padding-bottom: 0.4375rem;
}

.az-tabelle th.az-wahl,
.az-tabelle td.az-wahl {
    padding-right: 0;
    text-align: center;
}

.az-tabelle .az-wahl input {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--sidebar);
}

.az-tabelle tbody tr.az-gewaehlt,
.az-tabelle tbody tr.az-gewaehlt:hover {
    background-color: var(--accent);
}

.az-wochentag {
    display: inline-block;
    width: 1.75rem;
}

.az-zahl-links {
    white-space: nowrap;
}

.az-nummer {
    margin-left: 0.375rem;
}

/* Tätigkeiten hinter den Zuschlägen: in Textfarbe, damit beides in einer Spalte unterscheidbar bleibt. */
.az-taetigkeit {
    color: var(--foreground);
}

.az-tabelle th .th-label {
    white-space: nowrap;
}

.az-kennzeichen {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

td.az-kennzeichen {
    display: table-cell;
    white-space: normal;
}

td.az-kennzeichen .badge {
    margin: 0.0625rem 0.25rem 0.0625rem 0;
}

.az-meldeliste {
    margin: 0.25rem 0 0;
    padding-left: 1.125rem;
}

.az-sichthinweis {
    margin-top: 0.75rem;
}

/* Arbeitstag: links die Erfassung, rechts die Tageswerte. */
.az-spalten {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 0 2.5rem;
}

.az-abschnitt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.az-abschnitt .form-abschnitt {
    flex: 1;
}

.az-abschnitt-folge {
    margin-top: 1.25rem;
}

.az-intervalle td {
    vertical-align: top;
}

/* Entfernt: bleibt lesbar, zählt aber sichtbar nicht mehr. */
.az-intervalle tr.az-entfernt td.cell-num {
    color: var(--muted-foreground);
    text-decoration: line-through;
}

.az-intervalle tr.az-pause td {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    background-color: var(--muted);
    color: var(--muted-foreground);
    font-size: 0.75rem;
    text-align: center;
}

.az-original-wert {
    display: block;
    font-weight: var(--font-weight-medium);
}

.az-geaendert {
    display: block;
    font-size: 0.75rem;
}

.az-werte {
    margin-bottom: 0.5rem;
}

.az-ohne-zuschlag {
    margin-top: 0;
}

.az-hinweise {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.az-hinweise .form-hinweis {
    margin: 0;
}

/* Mehrere Gründe eines Konflikts (KonfliktGruende): jeder Grund in seiner Zeile, unter dem fetten „Konflikt.“. */
.az-konfliktgruende {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.az-konfliktgrund {
    display: block;
}

.alert-warning:has(.az-konfliktgruende) {
    align-items: flex-start;
}

.az-felder {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
}

.az-dialog-original {
    margin-top: 0;
}

/* Abweichende Fassungen (ZA-F11 b, Baustein ArbeitstagFassungen): Korrektur des Büros und Fassung der App nebeneinander.
   Die geltende Fassung trägt die kühle Fläche (--accent, wie „gewählt“) und die Marke „gilt“ - kein Orange, es ist
   ein Zustand und keine Aktion. Unter 640 px stehen die beiden untereinander. */
.az-fassungsliste {
    display: grid;
    gap: 0.75rem;
}

.az-fassungen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
}

.az-fassung {
    display: grid;
    align-content: start;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--card);
    font-size: 0.875rem;
}

.az-fassung-gilt {
    background-color: var(--accent);
    border-color: var(--foreground);
}

.az-fassung-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.az-fassung-titel {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-foreground);
}

.az-fassung-gilt .az-fassung-titel {
    color: var(--foreground);
}

.az-fassung-zeit {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
}

.az-fassung-zeit .text-leise {
    margin-left: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 400;
}

.az-fassung-geloescht {
    color: var(--muted-foreground);
    text-decoration: line-through;
}

.az-fassungen-aktion {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.az-fassungen-hinweis {
    margin: 0.5rem 0 0;
}

@media (max-width: 640px) {
    .az-fassungen {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Anderem Arbeitstag zuordnen (AZ-1): Datum mit Schnellwahl Vortag/Folgetag in einer Zeile, auf schmalem Schirm umbrechend. */
.az-u-text {
    margin: 0 0 0.75rem;
}

.az-ziel-link {
    margin-left: 0.25rem;
    font-weight: 600;
    white-space: nowrap;
}

.az-u-wahl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.az-taetigkeitswahl td {
    vertical-align: middle;
}

.az-taetigkeitswahl tr.az-summenzeile td {
    border-top: 2px solid var(--border);
}

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

/* ==========================================================================
   Abrechnungszeiträume (Paket 10a, Strang Web-Masken): Detailansicht mit Prüfliste, breiter Ergebnistabelle und
   Exportliste. Nur Raster, Abstände und Flächen aus den vorhandenen Tokens - Orange bleibt Aktion (Primärbutton),
   Status sind Pillen (.badge-info/-success/-warning), Abweichungen kühl (--accent), nie orange oder rot (CD 2b).
   ========================================================================== */

.abr-seite > .card + .card,
.abr-seite > .card + .fc-card,
.abr-seite > .fc-card + .card,
.abr-seite > .fc-card + .fc-card {
    margin-top: 1rem;
}

/* Lebenslauf des Zeitraums unter dem Kopf: Begriff links, Zeitpunkt und Benutzer rechts. */
.abr-verlauf {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.25rem 1.25rem;
    margin: 0;
    font-size: 0.875rem;
}

.abr-verlauf dt {
    color: var(--muted-foreground);
}

.abr-verlauf dd {
    margin: 0;
}

.abr-grund {
    display: block;
    margin-top: 0.125rem;
    color: var(--foreground);
}

.abr-verlauf + .konto-hinweis {
    margin-top: 1rem;
}

/* Prüfliste vor dem Abschluss: Symbol, Text, rechts der Verweis in die Arbeitsliste. Die Stufe färbt nur das Symbol. */
.abr-pruefliste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.abr-pruefpunkt {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
}

.abr-pruefpunkt:last-child {
    border-bottom: 0;
}

.abr-pruefpunkt > .icon-sm {
    flex: none;
    margin-top: 0.125rem;
}

.abr-pruefpunkt.abr-erfuellt > .icon-sm { color: #166534; }
.abr-pruefpunkt.abr-warnung > .icon-sm { color: #854d0e; }
.abr-pruefpunkt.abr-sperrt > .icon-sm { color: var(--destructive); }

.abr-pruefpunkt.abr-sperrt .abr-pruefpunkt-text {
    font-weight: var(--font-weight-medium);
}

.abr-pruefpunkt-text {
    flex: 1 1 auto;
    min-width: 0;
}

.abr-pruefpunkt-text .text-leise {
    font-weight: var(--font-weight-normal);
    margin-left: 0.375rem;
}

.abr-verweis {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.abr-tage {
    max-width: 56rem;
}

/* Kopf der Ergebniskarte: Titel und Hinweis links, Vergleich mit Umschalter rechts. */
.abr-ergebnis-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding: 0.875rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.abr-ergebnis-titel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
}

.abr-ergebnis-hinweis {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    max-width: 60rem;
}

.abr-vergleich {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.abr-vergleich .checkbox-label {
    margin: 0;
    color: var(--foreground);
}

/* Rollbereich der Ergebnistabelle: senkrecht und waagerecht. Kopfzeilen und Summenzeile stehen, die Namensspalte
   bleibt beim seitlichen Rollen stehen. Stehende Zellen brauchen deckende Flächen (Zebra, Hover). */
.abr-rahmen {
    overflow: auto;
    max-height: calc(100vh - 15rem);
    min-height: 12rem;
}

/* Ergebnistabelle im Detail eines Abrechnungszeitraums (SL-1 b, Daniel Simon (S3), 2026-11-11: „Höhengrenze der
   Tabelle entfernen - nur die Seite rollt“). Der Rahmen hat keine eigene Höhe mehr und rollt nur noch waagerecht (die
   Leiste liegt am Ende der Tabelle); senkrecht rollt allein der Inhaltsbereich. Kopfzeilen und Summenzeile kleben
   hier ausdrücklich nicht: Ihr Rollbehälter wäre weiter der Rahmen, der senkrecht nichts mehr rollt - sie stünden nie,
   und ein Kleben am Fenster läge über Seitenkopf und Aktionsleiste. Die Summenzeile ist die letzte Zeile der Tabelle,
   die Filterzeile steht unter den Kopfzeilen. Nur die Namensspalte bleibt beim seitlichen Rollen stehen (left: 0).
   Gilt nicht für die Statistiken (.ausw-rahmen), „Je Tag“ am Auftrag und die Musterseite - dort bleibt der Rahmen der
   Rollbereich. */
.abr-rahmen.abr-rahmen-seite {
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    min-height: 0;
}

.abr-rahmen.abr-rahmen-seite > .abr-tabelle thead th,
.abr-rahmen.abr-rahmen-seite > .abr-tabelle thead tr.abr-kopf2 th {
    top: auto;
}

.abr-rahmen.abr-rahmen-seite > .abr-tabelle tfoot td {
    bottom: auto;
}

/* Hinweis unter der Ergebnistabelle (ausgeblendete Zuschlagsspalten): bündig mit dem Karteninhalt. */
.abr-spalten-hinweis {
    margin: 0;
    padding: 0.625rem 1.25rem 0.875rem;
}

.abr-rahmen:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
}

.abr-tabelle {
    width: 100%;
    min-width: max-content;
    border-collapse: separate;
    border-spacing: 0;
    --abr-kopf1: 2.25rem;
}

.abr-tabelle th,
.abr-tabelle td {
    padding: 0.4375rem 0.75rem;
}

.abr-tabelle thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--card);
    vertical-align: bottom;
    line-height: 1.25;
}

.abr-tabelle thead tr:first-child th {
    height: var(--abr-kopf1);
    box-sizing: border-box;
}

/* Zweite Kopfzeile (Std/Tage, Zuschlagsarten) steht unter der ersten. */
.abr-tabelle thead tr.abr-kopf2 th {
    top: var(--abr-kopf1);
    font-weight: var(--font-weight-normal);
    font-size: 0.8125rem;
}

/* Gruppenköpfe („Urlaub“, „Zuschläge“): mittig über ihren Spalten, mit feiner Linie statt der dicken Kopflinie. */
.abr-tabelle thead th.abr-gruppe {
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.abr-tabelle thead th.abr-gruppe .th-label {
    justify-content: center;
}

.abr-tabelle th.abr-zuschlag .th-label {
    white-space: normal;
    min-width: 5.5rem;
    max-width: 9rem;
}

.abr-tabelle .abr-name {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 15rem;
    min-width: 15rem;
    max-width: 15rem;
    border-right: 1px solid var(--border);
    white-space: nowrap;
}

.abr-tabelle thead th.abr-name {
    z-index: 3;
    vertical-align: bottom;
}

.abr-tabelle tbody tr:nth-child(odd) td.abr-name { background: var(--background); }
.abr-tabelle tbody tr:nth-child(even) td.abr-name { background: var(--card); }
.abr-tabelle tbody tr:hover td.abr-name { background: var(--muted); }

.abr-name-text {
    display: inline-block;
    max-width: 9.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.abr-nr {
    margin-left: 0.375rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.abr-marke {
    margin-left: 0.375rem;
}

.abr-tabelle td.abr-saldo {
    font-weight: var(--font-weight-medium);
}

/* Der Saldo schließt den Block der Kontowerte ab; dahinter beginnen die Zuschläge. */
.abr-tabelle td.abr-saldo,
.abr-tabelle th.abr-saldo {
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

.abr-tabelle thead th.abr-gruppe.abr-gruppe-links .th-label {
    justify-content: flex-start;
    padding-left: 0.5rem;
}

.abr-tabelle tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--background);
    border-top: 2px solid var(--border);
    border-bottom: 0;
}

.abr-tabelle tfoot td.abr-name {
    z-index: 3;
}

/* Abweichung zur Vergleichsfassung: kühle Fläche mit feiner Kante links, alter Wert klein darunter. */
.abr-tabelle td.abr-abweichung {
    background: var(--accent);
    box-shadow: inset 2px 0 0 #8fa3b0;
}

.abr-tabelle tbody tr:hover td.abr-abweichung {
    background: #d6ecf7;
}

.abr-vorher {
    display: block;
    font-size: 0.6875rem;
    line-height: 1.2;
    color: var(--muted-foreground);
}

/* Rückfrage-Dialog: Wechsel als zwei Pillen mit Pfeil, Gründe untereinander (wie der Statusdialog des Auftrags). */
.abr-wechsel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    color: var(--muted-foreground);
}

.abr-gegenstand {
    margin-left: 0.25rem;
    font-size: 0.8125rem;
}

.abr-gruende p {
    margin: 0;
}

.abr-gruende p + p {
    margin-top: 0.5rem;
}

/* ==========================================================================
   Auswertungen (Paket 10b): Zeitraumwahl, Filterleiste, Statistiktabelle, Zeiten am Auftrag. Eigener Block mit
   Präfix .ausw- (nicht .stat-, das gehört der StatCard), steht vor dem Kunden-Theme. Die Tabelle nutzt den Rollbereich
   der Abrechnung (.abr-rahmen, .abr-tabelle). Farbregeln (corporate-design.md 2b, 5): „gewählt“ kühl (--accent),
   kein Orange außer an Aktionen.
   ========================================================================== */

.ausw-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem 1.25rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
}

.ausw-zeitraum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

/* Umschalter der Zeitraumart: eine Gruppe mit gemeinsamem Rahmen, gewählt kühl hinterlegt. */
.ausw-wahl {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius, 0.375rem);
    overflow: hidden;
}

.ausw-wahl-knopf {
    padding: 0.3125rem 0.75rem;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--foreground);
    background: var(--card);
    border: 0;
    border-right: 1px solid var(--border);
    cursor: pointer;
}

.ausw-wahl-knopf:last-child { border-right: 0; }
.ausw-wahl-knopf:hover:not(:disabled) { background: var(--muted); }
.ausw-wahl-knopf:disabled { color: var(--muted-foreground); cursor: not-allowed; }
.ausw-wahl-knopf:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

.ausw-wahl-knopf.is-active {
    background: var(--accent);
    font-weight: var(--font-weight-medium);
    box-shadow: inset 0 -2px 0 #8fa3b0;
}

.ausw-zeitraum-text {
    min-width: 9.5rem;
    text-align: center;
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
}

.ausw-zeitraum-grenzen {
    min-width: 0;
    font-weight: var(--font-weight-normal);
    color: var(--muted-foreground);
}

.ausw-frei {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ausw-frei .form-input { width: 8.5rem; }

.ausw-frei-label {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.ausw-frei-fehler { flex-basis: 100%; margin: 0; }

.ausw-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Filter der Leiste sehen aus wie die Spaltenfilter der Listen (.data-table .th-filter-*), stehen aber außerhalb der Tabelle. */
.ausw-filter .th-filter-input,
.ausw-filter .th-filter-select {
    width: 100%;
    margin: 0;
    padding: 0.375rem 0.5rem;
    height: 34px;
    box-sizing: border-box;
    font-size: 0.8125rem;
    font-family: inherit;
    font-weight: var(--font-weight-normal);
    border: 1px solid var(--border);
    background-color: var(--card);
    color: var(--foreground);
    border-radius: var(--radius);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ausw-filter .th-filter-input:focus,
.ausw-filter .th-filter-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent);
}

.ausw-filter .th-filter-input.is-active,
.ausw-filter .th-filter-select.is-active {
    border-color: var(--primary);
    background-color: color-mix(in srgb, var(--primary) 4%, var(--card));
}

.ausw-filter .th-filter-wrap .th-filter-input { padding-right: 1.75rem; }

.ausw-filter .th-filter-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.375rem center;
    background-size: 14px;
    padding-right: 1.5rem;
}

.ausw-filter .th-filter-select:not(.is-active) { color: var(--muted-foreground); }
.ausw-filter .th-filter-select option { color: var(--foreground); }

.ausw-auswahl {
    width: auto;
    min-width: 11rem;
    font-size: 0.8125rem;
}

.ausw-filter .ausw-auswahl { width: 11.5rem; }

.ausw-zeitraum .ausw-auswahl {
    height: 34px;
    padding: 0.3125rem 0.5rem;
    min-width: 14rem;
}

.ausw-suche { width: 15rem; }
.ausw-suche .th-filter-wrap { margin: 0; }

.ausw-zeile-hinweis {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    background: var(--background);
}

.ausw-leer { padding: 2.5rem 1rem; }

.ausw-hinweis { max-width: 75rem; }

/* Statistiktabelle: höher als die Ergebniskarte der Abrechnung, die Seite hat darüber nur die Leiste. */
.ausw-rahmen { max-height: calc(100vh - 17rem); }

/* Statistikseiten des Moduls Auswertungen: senkrecht rollt genau ein Bereich (Daniel Simon (S3), 2026-11-11: „Im Modul
   der Auswertungen gibt es immer doppelte Scrollleisten“). Die geschätzte Höhe oben (100vh - 17rem) kennt weder die
   Reiter noch eine umbrechende Leiste noch den Hinweis unter der Karte - Tabelle und Inhaltsbereich rollten deshalb
   beide. Hier füllt die Seite stattdessen den Inhaltsbereich genau aus, und der Rahmen der Tabelle bekommt die Höhe,
   die Leiste und Hinweis übrig lassen: Es rollt nur die Tabelle (Kopfzeilen, Summenzeile und Namensspalte bleiben
   stehen), der Inhaltsbereich nicht. Eine kurze Tabelle bleibt so hoch wie ihr Inhalt. Gilt nur für die Seite, deren
   Karte die Statistiktabelle unmittelbar trägt - nicht für die Musterseite und nicht für eine leere Statistik. */
.content-area > .list-page:has(> .card > .ausw-rahmen) {
    height: 100%;
}

.content-area > .list-page:has(> .card > .ausw-rahmen) > * {
    flex: none;
}

.content-area > .list-page:has(> .card > .ausw-rahmen) > .card {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
}

.content-area > .list-page > .card > .ausw-rahmen {
    flex: 0 1 auto;
    max-height: none;
    min-height: 0;
}

.content-area > .list-page:has(> .card > .ausw-rahmen) > .card > :not(.ausw-rahmen) {
    flex: none;
}

/* Sehr niedriges Fenster: Für die Tabelle bliebe kein brauchbarer Rest. Dann rollt umgekehrt nur der Inhaltsbereich,
   die Tabelle steht in voller Höhe - weiterhin ein Rollbereich, nie zwei. */
@media (max-height: 660px) {
    .content-area > .list-page:has(> .card > .ausw-rahmen) {
        height: auto;
    }

    .content-area > .list-page:has(> .card > .ausw-rahmen) > .card,
    .content-area > .list-page > .card > .ausw-rahmen {
        flex: none;
    }
}

.ausw-tabelle td,
.ausw-tabelle th { font-variant-numeric: tabular-nums; }

/* Dichter als die Abrechnung: viele Zahlenspalten sollen bei 1440 px ohne seitliches Rollen passen. */
.ausw-tabelle th,
.ausw-tabelle td { padding: 0.4375rem 0.5rem; }

.ausw-tabelle thead .th-label { font-size: 0.8125rem; gap: 0.125rem; }

.ausw-tabelle .abr-name {
    width: 13.5rem;
    min-width: 13.5rem;
    max-width: 13.5rem;
}

.ausw-tabelle .th-label.ausw-kopf {
    align-items: flex-end;
    white-space: nowrap;
}

/* Unterspalten einer Gruppe: lange Bezeichnungen (Tätigkeiten, Zuschlagszeiträume) brechen um, statt die Spalte zu dehnen. */
.ausw-tabelle th.ausw-sub .th-label.ausw-kopf {
    white-space: normal;
    max-width: 6.75rem;
    margin-left: auto;
    text-align: right;
}

/* Filterzeile unter den Kopfzeilen (Statistikfilter): rollt mit dem Inhalt weg - die Kopfzeilen bleiben stehen. */
.abr-tabelle thead tr.ausw-filterzeile th {
    top: auto;
    z-index: 1;
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
    vertical-align: middle;
}

.abr-tabelle thead tr.ausw-filterzeile th.abr-name {
    z-index: 2;
}

.ausw-filterzeile .th-date-trigger {
    margin-top: 0;
    min-width: 3.25rem;
}

.ausw-filterhinweis {
    font-size: 0.75rem;
    font-weight: var(--font-weight-normal);
    color: var(--muted-foreground);
}

.ausw-zusatz {
    font-size: 0.75rem;
    font-weight: var(--font-weight-normal);
    color: var(--muted-foreground);
}

.ausw-tabelle td.ausw-betont { font-weight: var(--font-weight-medium); }

.ausw-tabelle td.ausw-betont,
.ausw-tabelle th.ausw-betont { border-left: 1px solid var(--border); }

.ausw-tabelle .ausw-name-breit {
    width: 20rem;
    min-width: 20rem;
    max-width: 20rem;
}

.ausw-tabelle .ausw-name-breit .ausw-name-einzeilig .abr-name-text { max-width: 12.5rem; }
.ausw-tabelle .ausw-name-zweizeilig .abr-name-text { max-width: 100%; }

.ausw-name-einzeilig {
    display: flex;
    align-items: baseline;
    min-width: 0;
}

.ausw-name-einzeilig .abr-name-text { flex: 0 1 auto; max-width: none; min-width: 0; }
.ausw-name-einzeilig .ausw-name-zusatz { flex: 0 0 auto; display: inline-flex; align-items: center; }

.ausw-name-zweizeilig { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ausw-name-zweizeilig .abr-name-text { display: block; max-width: 100%; }

.ausw-name-zweizeilig .ausw-name-zusatz {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.ausw-name-zweizeilig .abr-nr {
    margin-left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ausw-name-zweizeilig .abr-marke { margin-left: 0; font-size: 0.6875rem; padding-top: 0; padding-bottom: 0; }

.ausw-link {
    color: inherit;
    text-decoration: none;
}

.ausw-link:hover { text-decoration: underline; color: var(--primary); }

/* Zeiten am Auftrag */
.ausw-kopfzusatz { font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

.ausw-kennzahlen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.ausw-zeiten-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

.ausw-unterkopf {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.ausw-klein td,
.ausw-klein th { padding: 0.375rem 0.625rem; font-variant-numeric: tabular-nums; }

.ausw-klein tfoot td {
    font-weight: var(--font-weight-medium);
    border-top: 2px solid var(--border);
}

.ausw-tage-rahmen { max-height: 28rem; min-height: 0; margin-bottom: 0.75rem; }

.ausw-tage td { font-variant-numeric: tabular-nums; }

.ausw-tage tr.ausw-tag-offen td { background: var(--accent); }

.ausw-tage tr.ausw-tag-detail td {
    background: var(--background);
    padding: 0.5rem 1rem 0.75rem 2rem;
}

.ausw-tag-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
}

.ausw-tag-liste {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
}

.ausw-tag-liste li {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    padding: 0.1875rem 0;
    border-bottom: 1px dashed var(--border);
}

.ausw-tag-wert {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.ausw-tag-zusatz { flex-basis: 100%; font-size: 0.75rem; }

@media (max-width: 1100px) {
    .ausw-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ausw-zeiten-raster, .ausw-tag-raster { grid-template-columns: minmax(0, 1fr); }
}

/* Leihmaschinen am Auftrag (AuftragLeihmaschinen): Tabelle der Zuordnungen mit Geltungszeitraum (RP-1), darunter
   Auswahl, „Gilt ab“ und Knopf in einer Zeile. Die Datumsspalten stehen in Tabellenziffern untereinander. */
.leih-tabelle td { font-variant-numeric: tabular-nums; }

.leih-tabelle .leih-datum { white-space: nowrap; }

.leih-zusatz {
    margin-left: 0.375rem;
    font-size: 0.75rem;
}

/* Abschnitt, dessen Geltungszeitraum vorbei ist: zurückgenommen, bleibt lesbar. */
.leih-tabelle tr.leih-vorbei td { color: var(--muted-foreground); }

/* Schloss statt Aktion: an der Zuordnung lässt sich nichts mehr ändern (abgerechnet oder freigegeben). */
.leih-fest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--muted-foreground);
}

.leih-zuordnen { margin-top: 1rem; }

.leih-zuordnen-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.leih-feld {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.leih-feld-maschine {
    flex: 1 1 16rem;
    max-width: 26rem;
}

/* Abwesenheiten, Sicht des Baustellenleiters: die eigenen Aufträge, auf denen der Mitarbeiter im Zeitraum eingeplant ist. */
.abw-auftraege {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

/* Je Auftrag zwei Zeilen: Bezeichnung (mit Auslassung), darunter die betroffenen Tage - die Tage bleiben immer lesbar. */
.abw-auftrag {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.abw-auftrag a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.abw-auftrag .text-leise { font-size: 0.75rem; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Ab hier: Kunden-Theme SebMo als LETZTER Block (Muster NCP.BesucherCenter über KS.ProjektCenter).
   Unverändert übernommen aus docs/00-kundenartefakte/branding/sebmo-theme.css; SSOT der Werte ist
   corporate-design.md. Werte dort ändern und hier nachziehen, nicht umgekehrt. Regeln, die das Theme
   an Layout-Klassen bindet (Anmeldeseite, Dashboard-Kopf), stehen in den jeweiligen .razor.css.
   ========================================================================== */

/* ==========================================================================
   SebMo-Theme - Overrides auf den S3-UI-Standard (ADR-003, akzeptiert 2026-11-09)
   NACH der S3-app.css laden bzw. als letzten Block der app.css kopieren.
   Alle Farben GEMESSEN bzw. aus dem Vektor-Logo gelesen - corporate-design.md
   Kapitel 2 und 5. Aufbau wie ks-theme.css: :root-Tokens, danach wenige Regeln,
   die sich nicht über Tokens ausdrücken lassen (jeweils mit Begründung).
   ========================================================================== */

:root {
    /* EIN Orange: das Website-Original #CB5227 (Buttons, Kanten, Menülinie von sebmo.de).
       Weiß darauf 4,40 : 1 - unter AA (4,5 : 1). Bewusste Entscheidung von Daniel Simon (S3, 2026-11-09)
       (Daniel Simon, 2026-11-09, CD-6). Orange-Text deshalb nur für Links und aktiven Tab,
       und nur auf Weiß (4,40 : 1) - nicht auf grauen Flächen (corporate-design.md 5c). */
    --primary: #CB5227;
    --primary-foreground: #ffffff;
    --ring: #CB5227;

    /* Hover-/Aktivflächen kühl in Navy-Hell statt Orange-Tint
       (Orange-Tint läse sich wie die Fehlerpille #fee2e2). Navy darauf 13,93 : 1. */
    --accent: #EBEDEF;
    --accent-foreground: #092231;

    /* Sidebar in SebMo-Navy (Navy-Band der Website) statt S3-Dunkelgrau (CD-2). */
    --sidebar: #092231;
    --sidebar-foreground: #e8e8e8;          /* 13,34 : 1 */
    --sidebar-accent: #041118;              /* Hover/Aktiv eingesenkt = Schattenton des Website-Navy-Bands; Text 15,60 : 1, Orange 4,35 : 1 */
    --sidebar-accent-foreground: #ffffff;
    --sidebar-border: #273D4A;
    --sidebar-submenu: #071A25;
    --sidebar-primary: #CB5227;             /* Aktiv-Indikator 5 px: auf Navy 3,72 : 1, auf #041118 4,35 : 1 (≥ 3 : 1 Grafik) */
    --sidebar-ring: #CB5227;

    /* SebMo-Zusatztokens */
    --sebmo-navy: #092231;                  /* Logo, Markenflächen, Hover der Primäraktion */
    --sebmo-navy-tief: #041118;             /* Schattenton auf Navy (Website-Fußband, gerendert) */
    --sebmo-orange: #CB5227;                /* = --primary, für Kanten und Linien */
    --sebmo-text: #4D4D4D;                  /* Fließtextgrau der Website - nur Print/Referenz */
    --sebmo-navy-dark: #9FC4DB;             /* abgeleitet, nur Apps im Dark Mode (Navy-Rollen) */
    --sebmo-orange-dark: #DE7854;           /* abgeleitet, nur Apps im Dark Mode (Tint), auf #1C1C1E 5,61 : 1 */
    --sebmo-kante: 20px;                    /* Markenkarte: orange Kante rechts (Website: 20 px, gemessen) */
    --sebmo-linie: 5px;                     /* Menülinie: Oberkante aufgeklappter Menüs, Sidebar-Indikator, aktiver Tab (Website: 5 px) */
    --sebmo-schatten-markenkarte: 10px 10px 10px 10px rgba(0, 0, 0, 0.5);   /* Website-Wert, Blur 10 px ≤ S3-Grenze 12 px */
}

/* ---- Regeln, die sich nicht über Tokens ausdrücken lassen ---- */

/* Primäraktion: Hover wie die Website - Orange wird Navy (gemessen am CTA „Zu den Kontaktdaten“). Weiß auf Navy 16,35 : 1. */
.btn-primary:hover:not(:disabled) {
    background-color: var(--sebmo-navy);
    border-color: var(--sebmo-navy);
}

/* Warme Primärfarbe → Löschen als Kontur (STANDARDS 3.3). Orange und Fehlerrot liegen in der
   Helligkeit nur 1,28 auseinander; zwei gefüllte warme Buttons wären verwechselbar. */
.btn-danger {
    background-color: var(--card);
    color: #991b1b;
    border-color: var(--destructive);
}
.btn-danger:hover {
    background-color: #fee2e2;
    border-color: var(--destructive);
    color: #991b1b;
}

/* Laufender Status („Aktiv“) kühl in Navy-Hell; .badge-primary (Orange-Tint) wird nicht verwendet (STANDARDS 1). */
.badge-info {
    background-color: #E1E4E6;
    color: #092231;                         /* 12,80 : 1 */
}

/* Orange-Text nur auf Weiß: in Tabellen (Zebra #fafafa 4,21 : 1, Hover #f0f0f0 3,86 : 1) keine orangen
   Links - Zeilen sind als Ganzes klickbar (S3 tr.clickable), Zellentext bleibt --foreground. */
.data-table a {
    color: var(--foreground);
}

/* Menülinie 5 px statt 4 px am Sidebar-Indikator (S3: inset 4px). Aktive Tabs (STANDARDS 3.11,
   Klasse im Showcase nicht definiert) beim Bau ebenfalls mit border-bottom-width: var(--sebmo-linie). */
.nav-link.active { box-shadow: inset var(--sebmo-linie) 0 0 var(--sidebar-primary); }

/* Oberkante aufgeklappter Menüs und Popover: Benutzermenü (3.17), Datum-Filter-Popover (3.2);
   eigene Aktionsmenüs bekommen dieselbe Klasse .sebmo-menue. */
.header-dropdown,
.date-popover,
.sebmo-menue {
    border-top: var(--sebmo-linie) solid var(--sebmo-orange);
}

/* Bereichsfilter: Die Oberkante gehört dem ganzen Popover (Vorgaben und Felder), nicht nur der rechten Hälfte. */
.bereich-popover {
    border-top: var(--sebmo-linie) solid var(--sebmo-orange);
}

.bereich-popover .date-popover {
    border-top: none;
}

/* Markenkarte (nur Anmeldung und Dashboard-Kopf, corporate-design.md 5a). */
.sebmo-markenkarte {
    background-color: var(--card);
    border-right: var(--sebmo-kante) solid var(--sebmo-orange);
    box-shadow: var(--sebmo-schatten-markenkarte);
}