:root {
    --brand-primary: #163a5f;
    --brand-accent: #2f6fb8;
    --brand-ink: #0f2441;
    --brand-surface: #f4f6f9;
    --brand-border: #e4e7eb;
}

html { font-size: 14px; }

@media (min-width: 768px) {
    html { font-size: 16px; }
}

html, body { height: 100%; }

body.app-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--brand-surface);
    color: #1f2a37;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(47, 111, 184, 0.55);
}

/* Header */
.app-header {
    background: linear-gradient(95deg, var(--brand-primary) 0%, #1f4f80 60%, var(--brand-accent) 100%);
    color: #fff;
    box-shadow: 0 1px 0 rgba(15, 36, 65, 0.04), 0 4px 14px rgba(15, 36, 65, 0.08);
}

.app-header-bar {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

@media (min-width: 768px) {
    .app-header-bar {
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
    }
}

.app-header .app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: #fff;
    text-decoration: none;
}

.app-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.05em;
}

/* Logo des Mandanten in der Kopfzeile. Steht an derselben Stelle wie die
   Initialen-Kachel und hat dieselbe Hoehe, damit die Leiste nicht springt,
   je nachdem ob ein Kunde ein Logo hochgeladen hat oder nicht. */
.app-brand-logo {
    height: 38px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    padding: 3px 6px;
}

.app-brand-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.15;
}

.app-brand-title {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.app-brand-subtitle {
    font-size: 0.74rem;
    opacity: 0.82;
}

.app-user-label {
    font-size: 0.72rem;
    opacity: 0.8;
    color: rgba(255, 255, 255, 0.8);
}

.app-user-name {
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
}

.app-user-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    transition: background 0.15s ease;
    text-decoration: none;
}
.app-user-icon:hover,
.app-user-icon:focus {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.btn-app-outline {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: transparent;
}

.btn-app-outline:hover,
.btn-app-outline:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    color: #fff;
}

/* Navigation */
.app-nav {
    background: rgba(0, 0, 0, 0.18);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.app-nav .navbar-nav {
    gap: 0.15rem;
}

.app-nav .navbar-toggler {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
}

.app-nav .navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

.app-nav .nav-link {
    color: rgba(255, 255, 255, 0.78);
    padding: 0.55rem 0.95rem;
    font-size: 0.92rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.app-nav .nav-link:hover,
.app-nav .nav-link:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.app-nav .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-bottom-color: #fff;
}

.app-nav .nav-link.disabled {
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
}

/* --- Abschnitts-Formulare (Artikel, Lieferant) ----------------------------
 *
 * Vorlage: Docs/handoff-artikel. Deren CSS benutzt generische Namen (.card,
 * .badge, .btn, .section, .grid, blankes `label`). 1:1 uebernommen wuerde es
 * Bootstrap projektweit ueberschreiben. Alles haengt deshalb unter
 * `.editor-form` und traegt eigene Klassennamen.
 * Der orange 4px-Streifen aus der Vorlage entfaellt (abgestimmt).
 * ------------------------------------------------------------------------- */

.editor-form {
    max-width: 940px;
}

.editor-form .crumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #6b7a8d;
    margin-bottom: 0.5rem;
}

.editor-form .crumb .sep { opacity: 0.5; }
.editor-form .crumb .cur { color: #1f2d3d; font-weight: 600; }
.editor-form .crumb a { color: inherit; text-decoration: none; }
.editor-form .crumb a:hover { text-decoration: underline; }

.editor-form .form-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.editor-form .form-head h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.4px;
}

.editor-form .form-head p {
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    color: #6b7a8d;
}

.editor-form .req { color: #d6336c; }

.editor-form .form-card {
    background: #fff;
    border: 1px solid #e4e9f0;
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(20, 45, 80, 0.07);
    overflow: hidden;
}

.editor-form .form-section {
    padding: 1.75rem 2rem;
    border-bottom: 1px solid #eef2f7;
}

.editor-form .form-section:last-of-type { border-bottom: none; }

.editor-form .sec-head {
    display: flex;
    align-items: center;
    gap: 0.8125rem;
    margin-bottom: 1.375rem;
}

.editor-form .sec-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* currentColor im SVG erbt die Akzentfarbe des Abschnitts. */
.editor-form .sec-icon svg { width: 19px; height: 19px; }

.editor-form .sec-title { font-size: 1rem; font-weight: 700; }
.editor-form .sec-hint { font-size: 0.78125rem; color: #8794a4; }

.editor-form .t-blue   .sec-icon { background: #e8f0fa; color: #1d5a94; }
.editor-form .t-amber  .sec-icon { background: #faf1e2; color: #c98a2b; }
.editor-form .t-green  .sec-icon { background: #e7f4ee; color: #2fa36b; }
.editor-form .t-purple .sec-icon { background: #f0ebf8; color: #7a5ea8; }

.editor-form .field-grid {
    display: grid;
    gap: 1.25rem 1.375rem;
    align-items: start;
}

.editor-form .field-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.editor-form .field-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.editor-form .span-2 { grid-column: span 2; }

.editor-form .form-field label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #3a4a5c;
    margin-bottom: 0.4375rem;
}

.editor-form .form-field input,
.editor-form .form-field select,
.editor-form .form-field textarea {
    width: 100%;
    padding: 0.75rem 0.875rem;
    font-size: 0.90625rem;
    color: #1f2d3d;
    font-family: inherit;
    background: #f7f9fc;
    border: 1.5px solid #dde4ee;
    border-radius: 9px;
}

.editor-form .form-field textarea { resize: vertical; }

.editor-form .form-field input:focus,
.editor-form .form-field select:focus,
.editor-form .form-field textarea:focus {
    outline: none;
    border-color: #1c5289;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(28, 82, 137, 0.12);
}

.editor-form .form-field input::placeholder,
.editor-form .form-field textarea::placeholder { color: #9aa7b6; }

/* Schreibgeschuetzte Werte (Bestand, Ø-Preis beim Bearbeiten). */
.editor-form .form-field input[readonly] {
    background: #eef2f7;
    color: #4a5a6c;
    font-weight: 600;
    cursor: default;
}

.editor-form .help {
    font-size: 0.75rem;
    color: #8794a4;
    margin-top: 0.375rem;
}

.editor-form .feld-fehler {
    display: block;
    font-size: 0.75rem;
    color: #d6336c;
    margin-top: 0.375rem;
}

.editor-form .select-wrap { position: relative; }

.editor-form .select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem;
    cursor: pointer;
}

.editor-form .select-wrap::after {
    content: '▼';
    position: absolute;
    right: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6b7a8d;
    font-size: 0.6875rem;
}

.editor-form .prefix-wrap { position: relative; }

.editor-form .prefix-wrap .prefix {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #8794a4;
    font-size: 0.90625rem;
    font-weight: 600;
}

.editor-form .prefix-wrap input { padding-left: 1.875rem; }

.editor-form .form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 2rem;
    background: #f7f9fc;
    border-top: 1px solid #eef2f7;
}

.editor-form .form-actions .note { font-size: 0.78125rem; color: #8794a4; }
.editor-form .form-actions .btns { display: flex; gap: 0.75rem; }

.editor-form .btn-anlegen {
    padding: 0.75rem 1.625rem;
    font-size: 0.90625rem;
    font-weight: 700;
    color: #fff;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    background: linear-gradient(180deg, #1c5289, #164374);
    box-shadow: 0 4px 14px rgba(22, 67, 116, 0.32);
}

.editor-form .btn-abbrechen {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.375rem;
    font-size: 0.90625rem;
    font-weight: 600;
    color: #4a5a6c;
    background: #fff;
    border: 1.5px solid #d5dde7;
    border-radius: 9px;
    text-decoration: none;
}

/*
 * „Aktiv" sieht aus wie die Pill-Badge der Vorlage, ist aber ein echter
 * Schalter. Als reine Anzeige koennte man einen Artikel nie deaktivieren –
 * und diese Seite dient auch dem Bearbeiten.
 */
.editor-form .aktiv-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.8125rem;
    border-radius: 999px;
    font-size: 0.78125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    background: #f1f3f5;
    color: #6b7a8d;
    border: 1px solid #e4e9f0;
    margin: 0;
}

.editor-form .aktiv-switch input { margin: 0; cursor: pointer; }

.editor-form .aktiv-switch:has(input:checked) {
    background: #e7f4ee;
    color: #1f7a52;
    border-color: #cfe7db;
}

.editor-form .aktiv-switch:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(28, 82, 137, 0.12);
}

@media (max-width: 720px) {
    .editor-form .field-grid.cols-2,
    .editor-form .field-grid.cols-4 { grid-template-columns: 1fr; }
    .editor-form .span-2 { grid-column: auto; }
    .editor-form .form-head { flex-direction: column; align-items: flex-start; }
    .editor-form .form-actions { flex-direction: column; align-items: stretch; }
    .editor-form .form-actions .btns { justify-content: flex-end; }
    .editor-form .form-section { padding: 1.5rem 1.25rem; }
}

/* --- Validierungs-Zusammenfassung ---------------------------------------- */

/*
 * Das Markup ist `class="alert alert-danger d-none d-validation-only"`. Ohne
 * diese Regel bleibt die Box wegen `d-none` IMMER unsichtbar – auch dann, wenn
 * Fehler vorliegen. Ohne `d-none` waere sie umgekehrt immer sichtbar, als
 * leeres rotes Rechteck.
 *
 * Der ValidationSummary-TagHelper setzt beim Rendern `validation-summary-valid`
 * bzw. `validation-summary-errors`; jquery.validate.unobtrusive tauscht die
 * Klasse zur Laufzeit. Genau daran haengen wir die Sichtbarkeit.
 * Zwei Klassen schlagen die Spezifitaet von `.d-none`.
 */
.d-validation-only.validation-summary-errors {
    display: block !important;
}

/* --- Bereichs-Dropdowns in der Navigation -------------------------------- */

/* Kennfarbe pro Bereich, gesetzt über data-bereich am Dropdown. */
.app-nav-menu {
    --bereich-farbe: #8a8f99;
}

.app-nav-menu[data-bereich="angebote"] { --bereich-farbe: #4a90d9; }
/* Planung steht neben der Angebotsverwaltung und arbeitet an denselben Auftraegen -
   deshalb ein verwandter Ton und keine fuenfte Grundfarbe. */
.app-nav-menu[data-bereich="planung"]  { --bereich-farbe: #6b5bd2; }
.app-nav-menu[data-bereich="lager"]    { --bereich-farbe: #2fa36b; }
.app-nav-menu[data-bereich="kunden"]   { --bereich-farbe: #c98a2b; }
.app-nav-menu[data-bereich="admin"]    { --bereich-farbe: #8a8f99; }

.app-nav-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 1.1rem;
    font-size: 0.92rem;
    font-weight: 500;
}

.app-nav-menu .nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--bereich-farbe);
}

.app-nav-menu .dropdown-item.active,
.app-nav-menu .dropdown-item:active {
    background: rgba(0, 0, 0, 0.05);
    color: inherit;
    font-weight: 700;
}

.app-nav .dropdown-toggle::after {
    margin-left: 0.45rem;
    opacity: 0.7;
}

@media (min-width: 992px) {
    /* Kein Abstand zwischen Auslöser und Menü – sonst schließt das Menü,
       sobald die Maus die Lücke überquert. */
    .app-nav .dropdown-menu {
        margin-top: 0;
    }

    /* Öffnen per Hover zusätzlich zum Klick. Bootstrap steuert `.show` beim
       Klick; die Hover-Regel läuft unabhängig davon. */
    .app-nav .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
    }
}

@media (max-width: 991.98px) {
    /* Im Burger-Menü klappen die Bereiche innerhalb des dunklen Balkens auf,
       statt als weiße Karte darüber zu schweben. */
    .app-nav .dropdown-menu {
        background: rgba(0, 0, 0, 0.22);
        border: 0;
        border-radius: 0;
        margin: 0 0 0.25rem 0;
        padding: 0.15rem 0;
    }

    .app-nav-menu .dropdown-item {
        color: rgba(255, 255, 255, 0.78);
        padding-left: 2.2rem;
    }

    .app-nav-menu .dropdown-item:hover,
    .app-nav-menu .dropdown-item:focus {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
    }

    .app-nav-menu .dropdown-item.active {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    .app-nav .dropdown-divider {
        border-top-color: rgba(255, 255, 255, 0.15);
    }
}

/* Main + footer */
.app-main {
    flex: 1 0 auto;
}

.app-footer {
    background: #fff;
    border-top: 1px solid var(--brand-border);
    color: #6b7280;
}

/* Login */
.auth-wrapper {
    min-height: calc(100vh - 10rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    border-radius: 14px;
}

/* Auftrags-Detailseite (nah am Original-Layout) */
.auftrag-detail {
    max-width: 1100px;
    margin: 0 auto;
    font-size: 0.92rem;
}

.auftrag-detail-tabbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #e4e7eb;
}

.auftrag-detail-tabs .tab {
    color: var(--brand-accent);
    text-decoration: none;
    padding: 0.1rem 0.2rem;
}

.auftrag-detail-tabs .tab.active {
    color: #222;
    font-weight: 600;
    text-decoration: underline;
}

.auftrag-detail-tabs .tab.disabled {
    color: #aaa;
    cursor: not-allowed;
}

.auftrag-detail-tabs .tab-sep {
    color: #bbb;
    margin: 0 0.35rem;
}

.auftrag-detail-title {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0.25rem 0 1rem 0;
    color: #222;
}

.auftrag-detail-actions {
    display: flex;
    gap: 0.5rem;
}

.auftrag-detail-actions .btn.btn-success[disabled] {
    opacity: 1;
    cursor: default;
}

.auftrag-detail-form .field-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.auftrag-detail-form .field-row > label {
    min-width: 120px;
    max-width: 120px;
    text-align: right;
    margin: 0;
    padding: 0;
    color: #333;
    font-weight: 400;
    white-space: nowrap;
    line-height: 1.9;
}

.auftrag-detail-form .field-row > input,
.auftrag-detail-form .field-row > select,
.auftrag-detail-form .field-row > textarea {
    flex: 1;
    min-width: 0;
    background-color: #ffffff;
    color: #333;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    padding: 0.22rem 0.5rem;
    font-size: 0.92rem;
    line-height: 1.4;
}

.auftrag-detail-form .field-row > input[readonly],
.auftrag-detail-form .field-row > select[disabled],
.auftrag-detail-form .field-row > textarea[readonly] {
    background-color: #eeeeee;
}

.auftrag-detail-form .field-row > textarea {
    resize: vertical;
}

.auftrag-detail-form .field-row > input:focus,
.auftrag-detail-form .field-row > select:focus,
.auftrag-detail-form .field-row > textarea:focus {
    outline: none;
    box-shadow: none;
}

.auftrag-detail-form .field-row .checkbox-inline {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    padding: 0.2rem 0;
}

/* Hinweistext zu einem Feld - gehoert NEBEN die Feldzeile, nicht hinein.

   .field-row ist ein Flex-Container mit fester Beschriftungsbreite; das
   Eingabefeld traegt flex: 1 und min-width: 0. Ein dritter Eintrag in der
   Zeile - ein Hinweis etwa - wird damit zum gleichberechtigten Flex-Element
   und drueckt das Eingabefeld auf nahezu null zusammen: Es ist dann sichtbar,
   aber man kann nichts mehr hineinschreiben. Genau so war das Passwortfeld
   der Benutzeranlage unbenutzbar, und damit liess sich kein Benutzer mehr
   anlegen.

   Der Einzug richtet den Hinweis unter dem Eingabefeld aus statt unter der
   Beschriftung. */
.auftrag-detail-form .field-hinweis {
    margin-left: calc(120px + 0.5rem);
    margin-top: 0.15rem;
}

.auftrag-detail-form .checkbox-inline label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-weight: 400;
    color: #333;
}

.auftrag-detail-form .checkbox-inline input[type="checkbox"] {
    margin: 0;
    cursor: not-allowed;
}

.auftrag-detail-form .sub-header,
.auftrag-adressen .sub-header {
    font-weight: 600;
    color: var(--brand-primary);
    margin-bottom: 0.35rem;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid #e4e7eb;
    font-size: 0.95rem;
}

.auftrag-detail-form .checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.25rem 0;
    max-height: 9rem;
    overflow-y: auto;
}

.auftrag-detail-form .checkbox-list .checkbox-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-weight: 400;
    color: #333;
    cursor: pointer;
}

.auftrag-detail-form .checkbox-list .checkbox-item input {
    margin: 0;
}

.auftrag-artikel .table {
    font-size: 0.85rem;
}

.auftrag-artikel .table th {
    white-space: nowrap;
    background: #f3f5f8;
}

.auftrag-artikel .table input,
.auftrag-artikel .table select {
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    padding: 0.15rem 0.35rem;
    font-size: 0.85rem;
    width: 100%;
}

.auftrag-artikel .table .col-anz {
    width: 4.5rem;
}

.auftrag-artikel .table .col-anz input {
    width: 100%;
    text-align: right;
    -moz-appearance: textfield;
}

.auftrag-artikel .table .col-anz input::-webkit-outer-spin-button,
.auftrag-artikel .table .col-anz input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.auftrag-artikel .table .col-price {
    width: 6rem;
}

@media (max-width: 576px) {
    .auftrag-detail-form .field-row {
        flex-wrap: wrap;
    }
    .auftrag-detail-form .field-row > label {
        min-width: 100%;
        max-width: 100%;
        text-align: left;
    }
    /* Die Beschriftung steht jetzt ueber dem Feld - der Einzug faellt weg. */
    .auftrag-detail-form .field-hinweis {
        margin-left: 0;
    }
}

/* Auftragsübersicht */
.page-header {
    margin-bottom: 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--brand-border);
}

.page-header h1 {
    color: var(--brand-ink);
    letter-spacing: -0.01em;
}

.page-header .page-meta {
    color: #6b7280;
    font-size: 0.82rem;
}

/* Filterleiste */
.auftrag-filter {
    border: 1px solid var(--brand-border);
    border-radius: 10px;
    background: #fff;
}

.auftrag-filter .form-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #43516b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
}

.auftrag-filter .form-control,
.auftrag-filter .input-group-text,
.auftrag-filter .btn-primary {
    height: 38px;
}

.auftrag-filter .auftrag-search .input-group-text {
    background: #fff;
    border-right: 0;
    color: #6b7280;
}

.auftrag-filter .auftrag-search .form-control {
    border-left: 0;
    font-size: 0.95rem;
}

.auftrag-filter .auftrag-search .form-control::placeholder {
    color: #98a2b3;
    opacity: 1;
}

.auftrag-filter .auftrag-search .form-control:focus {
    border-color: var(--brand-accent);
    box-shadow: none;
}

.auftrag-filter .auftrag-search:focus-within {
    border-radius: 0.375rem;
    box-shadow: 0 0 0 0.2rem rgba(47, 111, 184, 0.18);
}

.auftrag-filter .auftrag-filter-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 38px;
    padding-left: 0;
    margin: 0;
}

.auftrag-filter .auftrag-filter-check .form-check-input {
    margin: 0;
    flex: 0 0 auto;
}

.auftrag-filter .auftrag-filter-check .form-check-label {
    margin: 0;
    user-select: none;
}

.auftrag-filter .auftrag-filter-hint {
    margin-top: 0.6rem;
    color: #6b7280;
    font-size: 0.8rem;
}

.filter-multiselect {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    background: #fff;
    padding: 0.25rem 0.5rem;
}

.filter-multiselect > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
    padding: 0.3rem 0.25rem;
    font-size: 0.875rem;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.filter-multiselect > summary::-webkit-details-marker { display: none; }
.filter-multiselect > summary::before {
    content: "▸";
    font-size: 0.8em;
    color: #6b7280;
}
.filter-multiselect[open] > summary::before { content: "▾"; }

.filter-multiselect-list {
    margin-top: 0.4rem;
    max-height: 220px;
    overflow-y: auto;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.filter-multiselect-list .checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.15rem 0.25rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.filter-multiselect-list .checkbox-item:hover { background: #f1f3f5; }

@media (max-width: 767.98px) {
    .auftrag-filter .auftrag-filter-check,
    .auftrag-filter .form-control,
    .auftrag-filter .btn-primary {
        height: auto;
        min-height: 38px;
    }
}

.auftrag-table {
    --bs-table-hover-bg: #f5f8fc;
    border-collapse: separate;
    border-spacing: 0;
}

.auftrag-table > thead > tr > th {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #43516b;
    background: #f7f9fc;
    border-bottom: 1px solid var(--brand-border);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    white-space: nowrap;
}

.auftrag-table > tbody > tr > td {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #eef1f5;
    vertical-align: middle;
}

.auftrag-table-wrapper {
    border: 1px solid var(--brand-border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.auftrag-table-wrapper .auftrag-table {
    margin-bottom: 0;
}

/* Aktionen-Spalte bleibt beim horizontalen Scroll der Tabelle rechts sichtbar.
   Background muss explizit gesetzt sein, sonst scheinen darunterliegende Spalten durch. */
.auftrag-actions-cell {
    position: sticky;
    right: 0;
    background: #ffffff;
    z-index: 2;
    box-shadow: -4px 0 6px -4px rgba(0, 0, 0, 0.12);
}

.auftrag-table > tbody > tr:hover .auftrag-actions-cell {
    background: var(--bs-table-hover-bg, #f5f8fc);
}

.auftrag-group-row > td.auftrag-actions-cell {
    background: #eef3f9;
    box-shadow: none;
}

.auftrag-group-row,
.auftrag-group-row:hover,
.auftrag-group-row > td {
    background-color: #f1f4f9 !important;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    --bs-table-hover-bg: #f1f4f9;
    --bs-table-accent-bg: transparent;
}

.auftrag-group-row > td {
    padding: 0.55rem 0.9rem;
    box-shadow: inset 3px 0 0 var(--brand-accent);
}

.auftrag-group-label {
    color: #6b7280;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    margin-right: 0.35rem;
}

.auftrag-group-sort {
    margin-right: 0.35rem;
    gap: 0.15rem;
}

.auftrag-group-sort-indicator {
    color: #9ca3af;
    font-size: 0.75rem;
}

.auftrag-group-sort:hover .auftrag-group-sort-indicator,
.auftrag-group-sort:hover .auftrag-group-label {
    color: var(--brand-primary);
}

.auftrag-group-title {
    color: var(--brand-primary);
    font-weight: 600;
    font-size: 0.95rem;
}

.auftrag-group-count {
    background: rgba(22, 58, 95, 0.08);
    color: var(--brand-primary);
    margin-left: 0.5rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.25em 0.55em;
}

/* Soft status badges */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25em 0.6em;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    background: #eef1f5;
    color: #43516b;
    border: 1px solid transparent;
    white-space: nowrap;
}

.status-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.65;
}

.status-pill.is-done {
    background: #eef1f5;
    color: #5a6478;
}

.status-pill.is-active {
    background: #e7f0fa;
    color: #1f4f80;
}

.status-pill.is-open {
    background: #fdf3da;
    color: #8a6308;
}

.status-pill.is-late {
    background: #fbe7e7;
    color: #a92a2a;
}

/* Avatar pill (Mitarbeiter) – rund, Initialen weiß auf Farbe.
   Farbe kommt per inline style (background-color) von außen (Helper). */
.avatar-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #6b7280; /* Fallback wenn kein style gesetzt */
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
    flex-shrink: 0;
    user-select: none;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.avatar-pill.is-haupt {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--brand-accent, #f5a623);
}

.avatar-stack {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex-wrap: wrap;
}

/* Größeres Avatar in der Detail-Ansicht */
.avatar-pill.avatar-lg {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
}

/* Abteilungs-Badge (Phase 4): voll ausgeschriebener Name auf farbigem Pill.
   Default-Farbe kommt aus AbteilungFarbeHelper (Hash auf Name oder DB-Override). */
.abteilung-stack {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.abteilung-pill {
    display: inline-block;
    padding: 0.18em 0.55em;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.25;
    color: #1f2a37;
    border: 1px solid rgba(15, 36, 65, 0.08);
    white-space: nowrap;
}

/* Termin pill (Liste) – rot/prominent für Versand, gedeckt für Abholung */
.termin-cell {
    white-space: nowrap;
}

.termin-pill {
    display: inline-block;
    padding: 0.22em 0.55em;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.termin-pill.is-versand {
    background: #d63a3a;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.termin-pill.is-abholung {
    background: #e7eef7;
    color: #1f3a5f;
    border: 1px solid #c8d4e3;
}

/* Fälligkeit cell */
.faellig-cell {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.faellig-cell.is-overdue { color: #a92a2a; font-weight: 600; }
.faellig-cell.is-today   { color: #8a6308; font-weight: 600; }
.faellig-cell.is-future  { color: #2f7a48; }
.faellig-cell.is-empty   { color: #98a2b3; }

/* Action button group */
.auftrag-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: nowrap;
}

.auftrag-actions .btn,
.auftrag-actions form .btn {
    padding: 0.2rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 6px;
}

.auftrag-actions .btn-icon {
    padding: 0.2rem 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.auftrag-actions .btn-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

.auftrag-actions form {
    margin: 0;
}

/* Sortable table headers */
.sort-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.sort-link:hover {
    color: var(--brand-primary);
    text-decoration: underline;
}

/* Phase 4: Inline-Edit Kontextmenü */
.auftrag-context-menu {
    position: fixed;
    z-index: 1090;
    min-width: 180px;
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 36, 65, 0.18);
    padding: 0.25rem 0;
    font-size: 0.88rem;
}

.auftrag-context-menu[hidden] {
    display: none;
}

.auftrag-context-menu-header {
    padding: 0.4rem 0.85rem 0.3rem 0.85rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    border-bottom: 1px solid var(--brand-border);
    margin-bottom: 0.2rem;
}

.auftrag-context-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0.4rem 0.85rem;
    color: #1f2a37;
    cursor: pointer;
}

.auftrag-context-menu-item:hover,
.auftrag-context-menu-item:focus {
    background: #eef3f9;
    color: var(--brand-primary);
    outline: none;
}

.auftrag-context-menu-item.is-current {
    font-weight: 600;
    color: var(--brand-primary);
}

.auftrag-context-menu-item.is-current::before {
    content: "✓";
    margin-right: 0.4em;
    color: var(--brand-accent);
}

.auftrag-row {
    cursor: context-menu;
}

/* Phase 4 / Etappe 3: klickbare Edit-Zellen + Popover */
.auftrag-edit-cell {
    cursor: pointer;
    position: relative;
    transition: box-shadow 0.1s ease, background-color 0.1s ease;
}

.auftrag-edit-cell:hover {
    background-color: #eef3f9;
    box-shadow: inset 0 0 0 1px var(--brand-accent);
}

.auftrag-edit-popover {
    position: fixed;
    z-index: 1085;
    min-width: 280px;
    max-width: 360px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 36, 65, 0.18);
    padding: 0.55rem 0.65rem 0.5rem 0.65rem;
    font-size: 0.88rem;
}

.auftrag-edit-popover[hidden] {
    display: none;
}

.auftrag-edit-popover-header {
    font-weight: 600;
    color: var(--brand-primary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.3rem;
}

.auftrag-edit-popover-hint {
    font-size: 0.74rem;
    color: #6b7280;
    margin-bottom: 0.4rem;
}

.auftrag-edit-popover-list {
    overflow-y: auto;
    max-height: 50vh;
    margin: 0 -0.2rem 0.5rem -0.2rem;
    padding: 0 0.2rem;
}

.auftrag-edit-popover-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.25rem;
    border-radius: 4px;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.auftrag-edit-popover-item:hover {
    background: #f5f8fc;
}

.auftrag-edit-popover-item .avatar-pill {
    width: 22px;
    height: 22px;
    font-size: 0.62rem;
}

.auftrag-edit-popover-item .auftrag-edit-popover-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auftrag-edit-popover-item .abteilung-pill {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auftrag-edit-popover-body {
    padding: 0.2rem 0 0.4rem 0;
}

.auftrag-edit-popover-footer {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--brand-border);
}

.auftrag-edit-popover-footer .btn {
    padding: 0.18rem 0.6rem;
    font-size: 0.82rem;
}

.auftrag-edit-popover-footer .me-auto {
    margin-right: auto !important;
}

/* Phase 5: Kanban-Board */
.board-narrow-wrapper {
    /* Filter + Header bleiben auf der alten container-xxl-Breite, zentriert. */
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

.board-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: 10px;
    padding: 0.6rem;
}

.board-columns {
    display: flex;
    flex-direction: row;
    gap: 0.6rem;
    align-items: flex-start;
    min-width: max-content;
    /* Zentriert die Spalten auf breiten Bildschirmen, wenn alle reinpassen.
       'safe' fällt auf 'start' zurück, sobald Overflow droht – sonst wäre
       die linkeste Spalte beim Scroll nicht mehr erreichbar. */
    justify-content: safe center;
}

.board-column {
    flex: 0 0 280px;
    width: 280px;
    max-height: calc(100vh - 280px);
    display: flex;
    flex-direction: column;
    background: #f5f8fc;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    overflow: hidden;
}

.board-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.55rem 0.7rem;
    background: #eef3f9;
    border-bottom: 1px solid var(--brand-border);
    box-shadow: inset 3px 0 0 var(--brand-accent);
    cursor: pointer;
    user-select: none;
}

.board-column.is-vollstaendig .board-column-header {
    box-shadow: inset 3px 0 0 #2f7a48;
}

.board-column-title {
    font-weight: 600;
    color: var(--brand-primary);
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-column-count {
    background: rgba(22, 58, 95, 0.08);
    color: var(--brand-primary);
    font-weight: 600;
    border-radius: 999px;
    padding: 0.1em 0.55em;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.board-column-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.board-column-empty {
    color: #98a2b3;
    font-size: 0.78rem;
    text-align: center;
    padding: 0.4rem 0;
    font-style: italic;
}

.board-card {
    display: block;
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: 6px;
    padding: 0.5rem 0.6rem 0.55rem 0.6rem;
    text-decoration: none;
    color: inherit;
    font-size: 0.86rem;
    box-shadow: 0 1px 1px rgba(15, 36, 65, 0.04);
    transition: box-shadow 0.12s ease, transform 0.12s ease, border-color 0.12s ease;
    cursor: grab;
    user-select: none;
}

.board-card:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 1px;
}

.board-card:hover {
    border-color: var(--brand-accent);
    box-shadow: 0 4px 10px rgba(15, 36, 65, 0.10);
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
}

.board-card-banner {
    display: block;
    margin: -0.5rem -0.6rem 0.4rem -0.6rem;
    padding: 0.18em 0.6em;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    letter-spacing: 0.04em;
}

.board-card-banner.is-versand {
    background: #d63a3a;
    color: #fff;
    text-transform: uppercase;
}

.board-card-banner.is-abholung {
    background: #e7eef7;
    color: #1f3a5f;
    border-bottom: 1px solid #c8d4e3;
}

.board-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
}

.board-card-nr {
    font-weight: 700;
    color: var(--brand-primary);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.board-card-art {
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.board-card-kunde {
    font-weight: 600;
    color: #1f2a37;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-card-produkt {
    color: #43516b;
    font-size: 0.82rem;
    margin-top: 0.05rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-card-mitarbeiter,
.board-card-abteilungen {
    margin-top: 0.4rem;
}

.board-card-mitarbeiter .avatar-pill {
    width: 22px;
    height: 22px;
    font-size: 0.62rem;
}

.board-card-footer {
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px dashed var(--brand-border);
    font-size: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.35rem;
}

.board-card-faellig {
    font-variant-numeric: tabular-nums;
}

.board-card-faellig.is-overdue { color: #a92a2a; font-weight: 600; }
.board-card-faellig.is-today   { color: #8a6308; font-weight: 600; }
.board-card-faellig.is-future  { color: #2f7a48; }
.board-card-faellig.is-empty   { color: #98a2b3; font-style: italic; }

/* Kollabierte Spalte: schmal, Header kippt vertikal, Body weg. */
.board-column.is-collapsed {
    flex: 0 0 36px;
    width: 36px;
}

.board-column.is-collapsed .board-column-body {
    display: none;
}

.board-column.is-collapsed .board-column-header {
    flex-direction: column;
    justify-content: flex-start;
    padding: 0.55rem 0.3rem;
    height: 100%;
    box-shadow: inset 0 3px 0 var(--brand-accent);
}

.board-column.is-collapsed.is-vollstaendig .board-column-header {
    box-shadow: inset 0 3px 0 #2f7a48;
}

.board-column.is-collapsed .board-column-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin-top: 0.4rem;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    line-height: 1.1;
}

.board-column.is-collapsed .board-column-count {
    font-size: 0.72rem;
    margin-top: 0.4rem;
}

.board-column-more {
    display: block;
    text-align: center;
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
    color: var(--brand-accent);
    text-decoration: none;
    background: rgba(47, 111, 184, 0.08);
    border: 1px dashed rgba(47, 111, 184, 0.4);
    border-radius: 6px;
    margin-top: 0.2rem;
}

.board-column-more:hover {
    background: rgba(47, 111, 184, 0.16);
    color: var(--brand-primary);
}

/* Drag & Drop Feedback */
.board-card[draggable="true"] {
    cursor: grab;
}

.board-card.is-dragging {
    opacity: 0.4;
    cursor: grabbing;
}

.board-column.is-drop-target {
    outline: 2px dashed var(--brand-accent);
    outline-offset: -2px;
}

.board-column.is-drop-target .board-column-body {
    background: rgba(47, 111, 184, 0.06);
}

/* Logo des Mandanten auf der Login-Seite. Im Subdomain-Betrieb steht der Mandant
   ja schon vor der Anmeldung fest - der Kunde sieht sein eigenes Logo, bevor er
   sein Passwort eintippt. */
.auth-brand-logo {
    height: 64px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

.auth-brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 1.5rem;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
    box-shadow: 0 10px 25px rgba(22, 58, 95, 0.25);
}

/* ===========================================================================
   Wochenplaner
   ===========================================================================
   Links die Aufträge ohne Termin, rechts das Raster. Die Höhe einer Rasterzeile
   kommt als --wp-zeile aus der Seite: Sie hängt an der Schrittweite, die der
   Mandant einstellt, und muss in CSS und JavaScript dieselbe sein. Deshalb steht
   sie an EINER Stelle (der Seite) und wird von beiden gelesen.
   ========================================================================= */

.wp-layout {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

/* ---- Filterleiste über dem Plan ----------------------------------------------

   SIE IST IMMER OFFEN. Vorher waren Auftragsart und Maschine zugeklappte <details>
   in der Kopfzeile: Auf einem großen Monitor hat sie dort niemand gesehen, und ein
   gesetzter Filter fiel erst auf, wenn ein Auftrag fehlte.

   Die Abschnitte sind durch senkrechte Linien getrennt und umbrechen auf schmalen
   Geräten. Ein Abschnitt je Frage - Auftragsart, Maschine -, darunter über die ganze
   Breite der Streifen mit der Zielmaschine. */
.wp-filterbar {
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-bottom: 0.75rem;
}

.wp-filterbar-teil {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    border-right: 1px solid var(--brand-border);
}

/* Der Maschinenabschnitt nimmt den Rest der Zeile: Dort stehen die meisten Pillen,
   und sie sollen umbrechen, statt die Leiste zu sprengen. */
.wp-filterbar-teil-weit {
    flex: 1 1 auto;
    border-right: none;
}

.wp-filterbar-kopf {
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
}

.wp-filterbar-titel {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #667085;
}

.wp-filterbar-hilfe,
.wp-filterbar-kopf a {
    font-size: 12px;
}

.wp-filterbar-hilfe {
    color: #667085;
}

.wp-pillen {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

/* Eine Pille ist ein <label> mit verstecktem Kästchen. Wie sie aussieht, entscheidet
   :has(input:checked) - damit braucht der Filter kein JavaScript, um den eigenen
   Stand zu zeigen (abgeschickt wird mit JavaScript, siehe unten). */
.wp-pille {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid #c4cad3;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.wp-pille > input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.wp-pille:hover {
    border-color: var(--brand-accent);
}

.wp-pille:has(input:checked) {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
    font-weight: 600;
}

/* Tastaturbedienung: Das Kästchen ist unsichtbar, also muss die Pille den Fokus
   zeigen - sonst tastet man sich blind durch den Filter. */
.wp-pille:has(input:focus-visible) {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
}

.wp-pille-zahl {
    font-size: 11px;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

/* Die Maschinenpille trägt ihre Farbe als --m am Element (die Seite setzt sie):
   angehakt die Fläche, sonst nur das Plättchen. */
.wp-pille-maschine:has(input:checked) {
    background: var(--m);
    border-color: var(--m);
}

.wp-pille-punkt {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--m);
    flex: 0 0 auto;
}

.wp-pille-maschine:has(input:checked) .wp-pille-punkt {
    background: #fff;
}

.wp-filterbar-knopf {
    justify-content: center;
    border-right: none;
}

/* Mit JavaScript schickt jede Änderung das Formular ab - dann ist der Knopf nur noch
   im Weg. Die Klasse setzt das Skript. */
.wp-filterbar.is-auto .wp-filterbar-knopf {
    display: none;
}

.wp-filterbar-ziel {
    flex: 1 0 100%;
    border-top: 1px solid #badbcc;
    background: #e8f5ee;
    color: #0a3622;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 0 0 8px 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: baseline;
}

.wp-filterbar-ziel > span:last-child {
    color: #3d5a4a;
}

.wp-wochennav {
    white-space: nowrap;
}

.wp-pool {
    flex: 0 0 240px;
    width: 240px;
    background: #f5f8fc;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
}

.wp-pool.is-ziel {
    border-color: var(--brand-accent);
    box-shadow: inset 0 0 0 2px var(--brand-accent);
}

.wp-pool-head {
    padding: 0.5rem 0.7rem;
    background: #eef3f9;
    border-bottom: 1px solid var(--brand-border);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--brand-primary);
}

.wp-pool-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 120px;
}

.wp-pool-empty {
    color: #98a2b3;
    font-size: 0.78rem;
    text-align: center;
    padding: 0.4rem 0;
    font-style: italic;
}

.wp-grid-scroll {
    flex: 1 1 auto;
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    padding: 0.5rem;
}

.wp-grid {
    display: flex;
    gap: 2px;
    min-width: max-content;
}

.wp-times {
    flex: 0 0 52px;
}

.wp-times-body {
    position: relative;
}

.wp-time {
    height: var(--wp-zeile);
    font-size: 0.72rem;
    color: #667085;
    text-align: right;
    padding-right: 0.35rem;
    line-height: var(--wp-zeile);
    border-top: 1px solid #f0f3f7;
}

.wp-day {
    flex: 1 1 140px;
    min-width: 140px;
}

.wp-day-head {
    padding: 0.35rem 0.4rem;
    background: #eef3f9;
    border: 1px solid var(--brand-border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brand-primary);
    text-align: center;
    white-space: nowrap;
}

.wp-day.is-heute .wp-day-head {
    background: var(--brand-accent);
    color: #fff;
}

/* ---- Tagestrennung -------------------------------------------------------

   JEDER TAG STEHT IN EINEM EIGENEN RAHMEN, abwechselnd hell und dunkel getönt.
   Vorher trennte die Tage nur eine 2-Pixel-Lücke: In der Wochenansicht nach
   Maschine sind die Tage unterschiedlich breit (je Tag so viele Spuren, wie es
   Maschinen gibt), und dann ließ sich nur durch Zählen der Spuren sagen, wo der
   Mittwoch anfängt.

   NICHT in der Tagesansicht (.wp-grid-tag): Dort ist jede Spalte eine MASCHINE und
   kein Tag - abwechselnde Tagesrahmen wären dort eine Aussage, die nicht stimmt.

   nth-child zählt die Zeitleiste mit: Sie ist Kind 1, der erste Tag also Kind 2
   (gerade -> hell), der zweite Tag Kind 3 (ungerade -> dunkel). */
.wp-grid:not(.wp-grid-tag) > .wp-day {
    margin-left: 8px;
    padding: 3px 3px 4px;
    background: #f7f9fc;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
}

.wp-grid:not(.wp-grid-tag) > .wp-day:nth-child(odd) {
    background: #e9eef5;
    border-color: #d5dde8;
}

/* Der erste Tag rückt nur um 4 Pixel von der Zeitleiste ab - die 8 sind der
   Abstand ZWISCHEN zwei Tagen. */
.wp-grid:not(.wp-grid-tag) > .wp-times + .wp-day {
    margin-left: 4px;
}

/* Die Zeitleiste um Rahmen (1px) und Innenabstand (3px) des Tages versetzen,
   sonst stehen die Uhrzeiten vier Pixel zu hoch neben den Rasterzeilen. */
.wp-grid:not(.wp-grid-tag) > .wp-times {
    padding-top: 4px;
}

/* Die Auslastungszeile unter dem Tageskopf: je Maschine ein Mini-Balken. Feste
   Höhe, weil die Spalte der Zeitleiste denselben Platzhalter braucht - sonst steht
   das Raster versetzt neben den Karten. */
.wp-day-last {
    height: 26px;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 4px;
    background: #f7f9fc;
    border-left: 1px solid var(--brand-border);
    border-right: 1px solid var(--brand-border);
    border-bottom: 1px solid var(--brand-border);
    cursor: help;
}

/* Die Spur eines Balkens. flex: 1 - alle Maschinen teilen sich die Spaltenbreite
   gleichmäßig, egal wie viele es sind. */
.wp-last-spur {
    flex: 1 1 0;
    height: 5px;
    min-width: 6px;
    border-radius: 3px;
    background: #e9edf2;
    overflow: hidden;
}

.wp-last-fuellung {
    height: 100%;
    border-radius: 3px;
    background: var(--m, var(--brand-accent));
}

/* In der Zeitleiste steht die Zeile nur als Platzhalter - ohne Inhalt, ohne
   Zeigerwechsel. */
.wp-times .wp-day-last {
    border-left: none;
    border-right: none;
    background: transparent;
    cursor: default;
}

.wp-day-body {
    position: relative;
    border: 1px solid var(--brand-border);
    border-radius: 0 0 6px 6px;
    background: #fcfdfe;
    overflow: hidden;
}

/* Die Ablegeziele. Sie liegen UNTER den Karten (kein z-index) - eine Karte
   verdeckt ihren Slot, und genau das ist gewollt: Man legt neben die Karte ab,
   nicht auf sie. */
.wp-slot {
    height: var(--wp-zeile);
    border-top: 1px solid #f0f3f7;
}

.wp-slot:nth-child(2n) {
    background: #f8fafc;
}

.wp-slot.is-ziel {
    background: rgba(47, 122, 72, 0.16);
    border-top-color: var(--brand-accent);
}

.wp-card {
    background: #fff;
    border: 1px solid var(--brand-border);
    border-left: 3px solid var(--brand-accent);
    border-radius: 5px;
    padding: 0.2rem 0.35rem;
    font-size: 0.76rem;
    line-height: 1.25;
    cursor: grab;
    user-select: none;
    overflow: hidden;
    box-shadow: 0 1px 1px rgba(15, 36, 65, 0.05);
}

.wp-card.is-dragging {
    opacity: 0.45;
}

/* Terminkarten schweben über dem Raster: Ihre Höhe entspricht der Dauer, und sie
   sollen die Zellen nicht auseinanderschieben.

   left/right sind die Voreinstellung für eine Karte, die die Spalte für sich hat.
   Liegen mehrere gleichzeitig, setzt die Seite left und width (und right: auto)
   und stellt sie damit nebeneinander - siehe WochenplanKartenLayout.

   DER LINKE RAND TRÄGT DIE FARBE DER MASCHINE (--m, von der Seite gesetzt). Als
   Variable und nicht als fertige Farbe im style-Attribut, weil eine Warnung ihn
   überschreiben können muss: Eine Angabe im style-Attribut schlägt jede Regel im
   Stylesheet, eine Variable nicht. */
.wp-card-termin {
    position: absolute;
    left: 2px;
    right: 2px;
    border-left-color: var(--m, var(--brand-accent));
}

/* Die Karten in der Liste links behalten ihre Höhe. OHNE DAS SCHRUMPFEN SIE:
   .wp-pool-body ist ein Flex-Container in Spaltenrichtung mit begrenzter Höhe, und
   dort geben Kinder von sich aus Höhe ab (flex-shrink: 1), statt den Bereich scrollen
   zu lassen - der Text wurde abgeschnitten, sobald mehrere Aufträge offen waren. */
.wp-pool-body > .wp-card {
    flex: 0 0 auto;
}

/* Der Griff für die Dauer: ein schmaler Streifen am unteren Rand der Terminkarte.
   Er ist IMMER zu sehen, nur blass - erst beim Darüberfahren wird er kräftig. Ein
   Griff, den man nur findet, wenn man ohnehin schon weiß, dass es ihn gibt, ist
   keiner. */
.wp-card-griff {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 7px;
    cursor: ns-resize;
    touch-action: none;
}

.wp-card-griff::before {
    content: "";
    display: block;
    width: 26px;
    height: 3px;
    margin: 2px auto 0;
    border-radius: 2px;
    background: #cbd5e1;
}

.wp-card-termin:hover .wp-card-griff::before,
.wp-card-termin.is-resizing .wp-card-griff::before {
    background: var(--brand-accent);
}

.wp-card-termin.is-resizing {
    box-shadow: 0 0 0 2px var(--brand-accent);
    cursor: ns-resize;
}

.wp-card-head {
    display: flex;
    justify-content: space-between;
    gap: 0.3rem;
    font-weight: 600;
    color: var(--brand-primary);
}

/* Die Nummer steht links, ALLES ANDERE rechts. Mit space-between allein wäre bei
   drei und mehr Angaben (Uhrzeit, Warnzeichen, Datumsknopf) die mittlere in der
   Mitte gelandet - die Uhrzeit wanderte dann je nachdem, ob die Karte eine Warnung
   trägt. Die Nummer ist die einzige Angabe, die jede Karte hat; deshalb hängt der
   Abstand an ihr. */
.wp-card-nr {
    margin-right: auto;
}

.wp-card-art,
.wp-card-zeit,
.wp-card-faellig {
    font-weight: 400;
    color: #667085;
    font-size: 0.72rem;
}

/* ---- Der Datumsknopf auf der Terminkarte ---------------------------------
   Er öffnet den Dialog „Termin verschieben" - den Weg aus der angezeigten Zeit
   heraus. Immer zu sehen, nur blass: dieselbe Überlegung wie beim Griff für die
   Dauer. Ein Knopf, den man nur findet, wenn man ohnehin schon weiß, dass es ihn
   gibt, ist keiner.

   Das Zeichen ist eine Maske und kein Bild: So nimmt es seine Farbe von der
   Schriftfarbe (currentColor) und wird beim Darüberfahren kräftig, ohne dass dafür
   eine zweite Grafik nötig wäre. */
.wp-datum-marke,
.wp-card-datum {
    --wp-zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}

/* Das zweite Zeichen: „Auftrag öffnen" auf den Karten in der LISTE links. Dort hält
   der Klick auf die Karte die Hervorhebung fest, statt die Details zu öffnen - der
   Pfeil aus dem Kasten ist der gewohnte Weg dorthin. */
.wp-details-marke,
.wp-card-details {
    --wp-zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-8 8'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
}

.wp-datum-marke,
.wp-card-datum,
.wp-details-marke,
.wp-card-details {
    -webkit-mask: var(--wp-zeichen) center / contain no-repeat;
    mask: var(--wp-zeichen) center / contain no-repeat;
    background-color: currentColor;
}

.wp-card-datum,
.wp-card-details {
    flex: 0 0 auto;
    align-self: center;
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    color: #a3aebd;
    cursor: pointer;
}

.wp-card:hover .wp-card-datum,
.wp-card:hover .wp-card-details {
    color: #667085;
}

.wp-card-datum:hover,
.wp-card-datum:focus-visible,
.wp-card-details:hover,
.wp-card-details:focus-visible {
    color: var(--brand-accent);
}

/* Dieselben Zeichen im Hinweistext über dem Plan - dort erklären sie, was auf der
   Karte gemeint ist. */
.wp-datum-marke,
.wp-details-marke {
    display: inline-block;
    width: 11px;
    height: 11px;
    vertical-align: -1px;
    color: #667085;
}

/* Die Karte, die die Hervorhebung FESTHÄLT. Derselbe Ring wie an den hervorgehobenen
   Terminkarten: Es ist dieselbe Aussage - „um diesen Auftrag geht es gerade". */
.wp-card-pool.is-fokus-fest {
    box-shadow: 0 0 0 2px var(--brand-accent), 0 4px 12px rgba(47, 111, 184, 0.35);
}

/* Ein Blätterpfeil, der eine Karte annimmt. Dieselbe Farbe wie eine Rasterzelle
   unter der Karte (.wp-slot.is-ziel): Es ist dasselbe Versprechen - hier kann
   abgelegt werden. */
.wp-sprung.is-ziel {
    border-color: var(--brand-accent);
    background: rgba(47, 122, 72, 0.16);
    color: var(--brand-primary);
}

/* Der Weg aus einer Meldung heraus („Dorthin wechseln"), wenn die Karte die Ansicht
   verlassen hat. Auf dem farbigen Grund des Toasts muss er weiß sein. */
.wp-toast-link {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

.toast.text-bg-warning .wp-toast-link {
    color: #332701;
}

/* „schon: Di 10:00 · Digital 1" auf einer Karte in der Liste links: Der Auftrag ist
   anderswo eingeplant und fehlt nur DIESER Maschine. Deutlicher als die uebrigen
   Nebenangaben, weil daran haengt, was das Ziehen tut - es legt dann einen ZWEITEN
   Termin an. */
.wp-card-geplant {
    font-size: 0.7rem;
    color: #8a5a00;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wp-card-pool.is-anderswo {
    border-left-style: dashed;
    border-left-color: #d9a441;
}

/* „fehlt auf: Offset SM52" - nur wenn mehrere Maschinen angehakt sind. Kräftiger
   als die Nebenangaben darunter: Es ist die Antwort auf die Frage, warum diese
   Karte in einer Liste über drei Geräte steht - und es ist die Maschine, auf der
   sie landet, wenn man sie einfach ablegt. */
.wp-card-fehlt {
    font-size: 0.7rem;
    font-weight: 600;
    color: #163a5f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Derselbe Auftrag liegt zur selben Zeit noch woanders. Die Karte bleibt lesbar - es
   ist ein Hinweis, kein Fehler: ein Zeichen in der Kopfzeile und ein kraeftiger
   linker Rand, keine rote Flaeche. */
.wp-card-termin.is-ueberschneidung {
    border-left-color: #c2410c;
    box-shadow: 0 0 0 1px rgba(194, 65, 12, 0.35);
}

.wp-card-konflikt {
    color: #c2410c;
    cursor: help;
    font-size: 0.72rem;
    line-height: 1;
}

/* DOPPELBELEGUNG: zwei verschiedene Auftraege zur selben Zeit auf derselben
   Maschine. Der haertere Fall - ein Auftrag kann sich aufteilen, eine Maschine
   nicht. Deshalb ein eigenes Rot, und die Regel steht NACH der Ueberschneidung:
   Liegt beides vor, gewinnt die Doppelbelegung. */
.wp-card-termin.is-doppelbelegung {
    border-left-color: #b42318;
    box-shadow: 0 0 0 1px rgba(180, 35, 24, 0.4);
}

/* Die Zahl sitzt IN der Kartenecke, nicht in der Kopfzeile: Auf einer Karte von
   einer Rasterzeile Hoehe ist die Kopfzeile die einzige sichtbare Zeile, und dort
   steht schon Nummer und Uhrzeit. */
.wp-card-doppelt {
    position: absolute;
    top: 0;
    right: 0;
    background: #b42318;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 0 4px 0 4px;
    cursor: help;
}

/* Platz fuer die Ecke, damit die Uhrzeit nicht darunter verschwindet. */
.wp-card-termin.is-doppelbelegung .wp-card-head {
    padding-right: 18px;
}

/* Der Kasten unter dem Plan - Bootstrap hat kein Rot in diesem Ton. */
.wp-alert-doppelt {
    background: #fef3f2;
    border: 1px solid #fecdca;
    color: #7a271a;
}

.wp-card-kunde {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Die Maschinenauswahl auf der Karte. Sie muss in eine Karte von einer Rasterzeile
   Höhe passen, also klein sein - und sie darf das Ziehen nicht verhindern: Der
   Zeiger ist hier ein Pfeil, nicht die Greifhand, damit man sieht, dass dieses
   Stück Karte anders reagiert. */
.wp-card-maschine {
    display: block;
    width: 100%;
    margin-top: 0.1rem;
    font-size: 0.68rem;
    line-height: 1.1;
    padding: 0 1rem 0 0.15rem;
    height: 1.15rem;
    color: #344054;
    background: #f8fafc;
    border: 1px solid var(--brand-border);
    border-radius: 3px;
    cursor: pointer;
}

.wp-card-maschine:disabled {
    opacity: 0.6;
    cursor: progress;
}

.wp-card-produkt {
    color: #667085;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 991.98px) {
    /* Auf schmalen Geräten untereinander: Nebeneinander bliebe für das Raster
       kaum Platz. */
    .wp-layout {
        flex-direction: column;
    }

    .wp-pool {
        flex: 1 1 auto;
        width: 100%;
        max-height: 220px;
    }
}

/* ---- Ansichtsumschalter ---------------------------------------------------
   Eine eigene Leiste über den Filtern: Die Ansicht ist keine Auswahl im Formular,
   sondern ein Weg zu einer anderen Adresse. */
.wp-ansichtsleiste {
    margin-bottom: 0.4rem;
}

.wp-ansicht-hinweis {
    flex: 1 1 320px;
    align-self: center;
}

.wp-segmente {
    display: inline-flex;
    border: 1px solid var(--brand-border);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.wp-segment {
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    color: var(--brand-primary);
    text-decoration: none;
    white-space: nowrap;
    border-right: 1px solid var(--brand-border);
}

.wp-segment:last-child {
    border-right: none;
}

.wp-segment:hover {
    background: #eef3f9;
}

.wp-segment.is-aktiv {
    background: var(--brand-primary);
    color: #fff;
    font-weight: 600;
}

/* ---- Spuransicht: je Tag eine Spur pro Maschine --------------------------- */

/* Die Mindestbreite macht die SPUR, nicht der Tag: Ein Tag mit sechs Maschinen
   ist sechsmal so breit, und das Raster scrollt waagerecht (.wp-grid-scroll). */
.wp-day.has-spuren {
    min-width: 0;
}

.wp-spuren {
    display: flex;
    gap: 2px;
}

.wp-spur {
    flex: 1 1 92px;
    min-width: 92px;
}

/* Feste Höhe wie die Auslastungszeile der Wochenansicht - die Zeitleiste stellt
   denselben Platzhalter davor. */
.wp-spur-kopf {
    height: 26px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    background: #f7f9fc;
    border-left: 1px solid var(--brand-border);
    border-right: 1px solid var(--brand-border);
    border-bottom: 1px solid var(--brand-border);
    font-size: 0.68rem;
    white-space: nowrap;
    overflow: hidden;
    cursor: help;
}

.wp-spur-kuerzel {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 0.66rem;
    color: #fff;
    background: var(--m, var(--brand-accent));
    border-radius: 3px;
    padding: 0 3px;
}

.wp-spur-balken {
    flex: 1 1 0;
    min-width: 8px;
    height: 5px;
    border-radius: 3px;
    background: #e9edf2;
    overflow: hidden;
}

.wp-spur-fuellung {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--m, var(--brand-accent));
}

.wp-spur-prozent {
    flex: 0 0 auto;
    color: #667085;
}

/* In der Zeitleiste steht der Spurkopf nur als Platzhalter. */
.wp-times .wp-spur-kopf {
    border: none;
    background: transparent;
    cursor: default;
}

/* SCHRAFFIERT BEIM ZIEHEN: Diese Spur nimmt die Auftragsart der gezogenen Karte
   nicht an. Das Schraffieren setzt das Skript (is-gesperrt), und es setzt dazu
   dropEffect = none - die Schraffur ist die Erklärung, nicht die Sperre. */
.wp-spur.is-gesperrt .wp-day-body {
    background: repeating-linear-gradient(45deg, #f1f3f5 0 5px, #e4e8ec 5px 10px);
}

.wp-spur.is-gesperrt .wp-slot {
    border-top-color: transparent;
    background: transparent;
}

/* ---- Eingeplant, ohne Maschine -------------------------------------------
   Links unter der Liste. Dieselben Karten, nur ohne Rastergeometrie. */
.wp-ohne-maschine {
    margin-top: 0.5rem;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.wp-ohne-maschine-body {
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 220px;
    overflow-y: auto;
}

/* Eine Terminkarte außerhalb des Rasters: Die Regeln für .wp-card-termin setzen
   position: absolute und eine Breite - hier gilt der Fluss. */
.wp-card.wp-card-frei {
    position: static;
    width: auto;
    height: auto;
    left: auto;
    right: auto;
    top: auto;
    border-left-color: #adb5bd;
}

/* ---- Hervorhebung: alle Termine eines Auftrags ----------------------------

   Ein Auftrag kann durch mehrere Maschinen laufen und steht dann mehrmals im Plan.
   Beim Zeigen auf eine Karte leuchten seine Termine auf, alle anderen blenden ab -
   sonst sucht man die Woche nach der Auftragsnummer ab.

   Die Warnränder (Doppelbelegung, Überschneidung) bleiben am linken Rand stehen;
   der blaue Ring kommt darüber. */
.wp-layout.is-fokus .wp-card-termin:not(.is-fokus-treffer):not(.wp-geist) {
    opacity: 0.35;
}

.wp-card-termin.is-fokus-treffer {
    z-index: 3;
    box-shadow: 0 0 0 2px var(--brand-accent), 0 4px 12px rgba(47, 111, 184, 0.35);
}

/* EIN „GEIST": ein Termin desselben Auftrags auf einer Maschine, die der Filter
   gerade ausblendet. Er erscheint nur während der Hervorhebung und beantwortet die
   Frage, die man dabei hat - „wo läuft der Auftrag sonst noch?".

   Gestrichelt und blass, damit er nicht mit einer Karte zu verwechseln ist, die
   wirklich in dieser Spalte liegt. Nicht anklickbar und nicht ziehbar: Was der
   Filter ausblendet, lässt sich hier nicht bearbeiten - dafür nimmt man den Haken
   aus dem Filter. pointer-events: none hält ihn außerdem aus dem Ablegen heraus. */
.wp-card-termin.wp-geist {
    z-index: 2;
    opacity: 0.7;
    pointer-events: none;
    cursor: default;
    border: 1px dashed #98a2b3;
    border-left: 3px dashed var(--m, var(--brand-accent));
    box-shadow: 0 0 0 2px rgba(47, 111, 184, 0.25);
}

/* Eine Karte in einer Spur: Platz ist knapp, also kleiner und ohne Produktzeile
   (die lässt die Ansicht schon weg). */
.wp-card-termin.is-kompakt {
    font-size: 0.72rem;
    padding: 0.15rem 0.25rem;
}

.wp-card-termin.is-kompakt .wp-card-kunde {
    font-size: 0.68rem;
}

/* ---- Auslastungsmatrix (Tagesansicht) ------------------------------------
   Zeilen = Maschinen, Spalten = Tage. Die Zellen sind Links: Der Kasten ist
   Anzeige und Navigation in einem. */
.wp-matrix {
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.5rem;
}

.wp-matrix-titel {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-primary);
    margin-bottom: 0.35rem;
}

/* Die Spaltenzahl steht im style-Attribut - sie haengt an der Zahl der
   gezeichneten Tage (fuenf oder sieben). */
.wp-matrix-gitter {
    display: grid;
    gap: 3px;
    font-size: 0.75rem;
}

.wp-matrix-tag {
    text-align: center;
    font-weight: 600;
    color: #667085;
    white-space: nowrap;
}

.wp-matrix-tag.is-gewaehlt {
    color: var(--brand-primary);
}

.wp-matrix-maschine {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #344054;
    overflow: hidden;
}

.wp-matrix-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Der Farbpunkt vor einem Maschinennamen - auch im Kopf der Tagesspalte. */
.wp-punkt {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--m, var(--brand-accent));
    display: inline-block;
}

.wp-matrix-zelle {
    display: block;
    text-align: center;
    padding: 0.2rem 0;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #0f2441;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.wp-matrix-zelle:hover {
    border-color: var(--brand-primary);
}

.wp-matrix-zelle.is-gewaehlt {
    border: 2px solid var(--brand-primary);
    font-weight: 600;
}

/* ---- Tagesansicht: eine Spalte je Maschine ------------------------------- */

/* Breit genug fuer ganze Karten - deshalb 200 statt 92 Pixel. */
.wp-spur.wp-maschinenspalte {
    flex: 1 1 200px;
    min-width: 200px;
}

.wp-maschinenspalte .wp-day-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.wp-spalte-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Im Spaltenkopf ist der Punkt weiss, wenn der Kopf farbig ist (heute). */
.wp-maschinenspalte .wp-spur-kopf {
    justify-content: space-between;
    font-size: 0.7rem;
}

/* Der Tag ueber der Zeitleiste: Die Spaltenkoepfe nennen die Maschinen. */
.wp-day-head.wp-tag-marke {
    background: #fff;
    border-color: transparent;
    color: #667085;
    font-size: 0.72rem;
}