/*
 * Oberfläche. Mobile first: die Grundregeln gelten für schmale Bildschirme, ab 48rem kommen Erweiterungen.
 * Alle Werte stammen aus tokens.css (keine festen Farben hier). Kein Inline-Stil in den Templates (CSP).
 */

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

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    color: var(--color-text);
    background: var(--color-bg);
}

h1,
h2,
h3 {
    line-height: 1.25;
    margin: 0 0 var(--space-3);
}

h1 {
    font-size: var(--font-size-xl);
}

h2 {
    font-size: var(--font-size-l);
}

p {
    margin: 0 0 var(--space-3);
}

a {
    color: var(--color-link);
}

a:hover {
    text-decoration-thickness: 2px;
}

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

code,
.mono {
    font-family: var(--font-mono);
}

.hidden-visually {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: var(--space-2);
    top: -4rem;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
    padding: var(--space-2) var(--space-4);
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    border-radius: var(--radius-s);
}

.skip-link:focus {
    top: var(--space-2);
}

/* ---- Kopf, Navigation, Fuß ----------------------------------------------------------------- */

.site-header {
    background: var(--brand-header-bg);
    color: var(--brand-header-text);
    border-bottom: 3px solid var(--brand-primary);
    box-shadow: var(--shadow-s);
}

.header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-2) var(--space-4);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-min);
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

/* Logo in eigenem Seitenverhältnis (quadratisch oder Wortmarke), nur die Höhe ist fest. */
.brand img {
    display: block;
    width: auto;
    height: 2.5rem;
    max-width: 9rem;
}

.brand-titel {
    padding-left: var(--space-2);
    border-left: 1px solid var(--color-border);
    color: var(--color-muted);
    font-weight: 500;
}

.header-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-left: auto;
}

.user-name {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Benutzermenü (details/summary: funktioniert ohne JavaScript) */
.user-menu {
    position: relative;
}

.user-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--touch-min);
    padding: 0 var(--space-3);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-m);
    cursor: pointer;
    list-style: none;
}

.user-menu-toggle::-webkit-details-marker {
    display: none;
}

.user-menu-toggle:hover,
.user-menu[open] > .user-menu-toggle {
    background: var(--brand-primary-soft);
}

.menu-icon,
.menu-icon::before,
.menu-icon::after {
    display: block;
    width: 1.25rem;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}

.menu-icon {
    position: relative;
}

.menu-icon::before,
.menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.menu-icon::before {
    top: -6px;
}

.menu-icon::after {
    top: 6px;
}

.user-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-1));
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: min(19rem, calc(100vw - 2rem));
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-m);
}

.user-menu-who {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.user-menu-panel .language-form {
    display: flex;
    flex-wrap: wrap;
}

.user-menu-panel .language-form select {
    flex: 1 1 8rem;
}

.user-menu-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.user-menu-links a {
    display: flex;
    align-items: center;
    min-height: var(--touch-min);
    padding: 0 var(--space-2);
    color: var(--color-text);
    border-radius: var(--radius-m);
    text-decoration: none;
}

.user-menu-links a:hover,
.user-menu-links a[aria-current="page"] {
    background: var(--brand-primary-soft);
}

.user-menu-logout {
    margin: 0;
}

.main-nav {
    flex: 1 0 100%;
    order: 3;
}

.main-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
    padding: 0 var(--space-4);
    border-radius: var(--radius-m);
    color: var(--color-text);
    text-decoration: none;
}

.main-nav a:hover {
    background: var(--brand-primary-soft);
}

.main-nav a[aria-current="page"] {
    background: var(--brand-primary-soft);
    color: var(--brand-primary-dark);
    font-weight: 600;
}

.language-form {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

.language-form select {
    width: auto;
    min-width: 8rem;
}

.js .language-form .btn {
    display: none;
}

.site-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-4);
}

.site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-1) var(--space-5);
    padding: var(--space-2) var(--space-4);
    color: var(--color-muted);
    font-size: var(--font-size-s);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    text-align: center;
}

.site-footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
}

/* ---- Karten und Raster -------------------------------------------------------------------- */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-s);
    padding: var(--space-5) var(--space-4);
    margin-bottom: var(--space-4);
}

.card > :last-child {
    margin-bottom: 0;
}

.card-narrow {
    max-width: var(--form-width);
    margin-left: auto;
    margin-right: auto;
}

.card-error {
    border-left: 6px solid var(--status-rot);
}

.card-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
    margin-bottom: var(--space-4);
}

.card-grid .card {
    margin-bottom: 0;
}

.page-title {
    margin-bottom: var(--space-4);
}

.lead {
    color: var(--color-muted);
    font-size: var(--font-size-l);
}

.muted {
    color: var(--color-muted);
}

.stack > * + * {
    margin-top: var(--space-3);
}

/* ---- Formulare -------------------------------------------------------------------------------- */

.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.field label,
.field .label {
    font-weight: 600;
}

.field .hint {
    color: var(--color-muted);
    font-size: var(--font-size-s);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea {
    width: 100%;
    min-height: var(--touch-min);
    padding: var(--space-2) var(--space-3);
    font: inherit;
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-m);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 0;
    border-color: var(--brand-primary);
}

.field-invalid input,
.field-invalid select {
    border-color: var(--status-rot);
    border-width: 2px;
}

.field-error {
    color: var(--status-rot-text);
    font-size: var(--font-size-s);
    font-weight: 600;
}

.code-input {
    font-family: var(--font-mono);
    font-size: var(--font-size-xl);
    letter-spacing: 0.25em;
    text-align: center;
    max-width: 14rem;
}

/* Auswahlfeld mit Beschriftung: die ganze Zeile (Beschriftung) ist mindestens so hoch wie ein Touch-Ziel */
.check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: var(--touch-min);
}

.check input {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: calc((var(--touch-min) - 1.5rem) / 2) 0 0;
    accent-color: var(--brand-primary);
}

.check label {
    flex: 1;
    min-height: var(--touch-min);
    padding: calc((var(--touch-min) - 1em * var(--line-height)) / 2) 0;
    font-weight: 400;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
}

.inline-form {
    display: inline;
    margin: 0;
}

/* ---- Schaltflächen ------------------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-min);
    padding: var(--space-2) var(--space-5);
    font: inherit;
    font-weight: 600;
    color: var(--brand-primary-dark);
    background: var(--color-surface);
    border: 2px solid var(--brand-primary);
    border-radius: var(--radius-m);
    cursor: pointer;
    text-decoration: none;
}

.btn:hover {
    background: var(--brand-primary-soft);
}

.btn-primary {
    color: var(--brand-on-primary);
    background: var(--brand-primary);
}

.btn-primary:hover {
    background: var(--brand-primary-dark);
}

.btn-danger {
    color: var(--status-rot-text);
    border-color: var(--status-rot);
}

.btn-danger:hover {
    background: var(--status-rot-bg);
}

.btn-block {
    width: 100%;
}

.btn-link {
    min-height: var(--touch-min);
    padding: 0 var(--space-2);
    font: inherit;
    color: var(--color-link);
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}

.link-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.link-list a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
}

/* ---- Meldungen und Status ------------------------------------------------------------------ */

.flash-list {
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.flash {
    margin-bottom: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid;
    border-left-width: 6px;
    border-radius: var(--radius-m);
}

.flash-erfolg {
    color: var(--status-gruen-text);
    background: var(--status-gruen-bg);
    border-color: var(--status-gruen);
}

.flash-fehler {
    color: var(--status-rot-text);
    background: var(--status-rot-bg);
    border-color: var(--status-rot);
}

.flash-hinweis {
    color: var(--status-blau-text);
    background: var(--status-blau-bg);
    border-color: var(--status-blau);
}

/* Statusanzeige: Farbe UND Text (nie nur Farbe) */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.1rem var(--space-3);
    font-size: var(--font-size-s);
    font-weight: 600;
    border: 1px solid;
    border-radius: 999px;
    white-space: nowrap;
}

.badge-blau {
    color: var(--status-blau-auf);
    background: var(--status-blau-stark);
    border-color: var(--status-blau-stark);
}

.badge-gruen {
    color: var(--status-gruen-auf);
    background: var(--status-gruen-stark);
    border-color: var(--status-gruen-stark);
}

.badge-gelb {
    color: var(--status-gelb-auf);
    background: var(--status-gelb-stark);
    border-color: var(--status-gelb-stark);
}

.badge-rot {
    color: var(--status-rot-auf);
    background: var(--status-rot-stark);
    border-color: var(--status-rot-stark);
}

.badge-grau {
    color: var(--status-grau-text);
    background: var(--status-grau-bg);
    border-color: var(--status-grau);
}

/* ---- Angaben, Tabellen --------------------------------------------------------------------- */

.facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-1) var(--space-4);
    margin: 0 0 var(--space-3);
}

.facts dt {
    color: var(--color-muted);
    font-size: var(--font-size-s);
}

.facts dd {
    margin: 0 0 var(--space-2);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.table-wrap {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: var(--space-3);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}

.table th {
    font-size: var(--font-size-s);
    color: var(--color-muted);
    background: var(--color-surface-alt);
}

/* Handy und Tablet (unter 1024 px): jede Zeile als Karte, die Spaltenüberschrift steht über dem Wert (data-label).
   Grenze von 640 auf 1024 px angehoben (Wunsch 18.10.2026: nie seitlich schieben, auch nicht am Tablet). */
@media (max-width: 63.99rem) {
    .table-responsive thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .table-responsive,
    .table-responsive tbody {
        display: block;
    }

    .table-responsive tr {
        display: block;
        margin-bottom: var(--space-3);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-m);
        background: var(--color-surface);
    }

    .table-responsive td {
        display: block;
        padding: var(--space-2) var(--space-3);
        border-bottom: 1px solid var(--color-border);
        overflow-wrap: anywhere;
    }

    .table-responsive td:last-child,
    .table-responsive td:has(+ .cell-leer:last-child) {
        border-bottom: 0;
    }

    /* Zelle ohne Inhalt (z. B. keine Aktionen für das eigene Konto): keine leere Beschriftung zeigen */
    .table-responsive td.cell-leer {
        display: none;
    }

    .table-responsive td::before {
        content: attr(data-label);
        display: block;
        color: var(--color-muted);
        font-size: var(--font-size-s);
        font-weight: 600;
    }
}

/* ---- Seitenkopf, Reiter, Hinweise, Listen ------------------------------------------------------- */

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-4);
}

.page-head .page-title {
    margin-bottom: 0;
}

.tabs ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--color-border);
}

.tabs a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
    padding: 0 var(--space-4);
    color: var(--color-text);
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

.tabs a:hover {
    background: var(--brand-primary-soft);
}

.tabs a[aria-current="page"] {
    color: var(--brand-primary-dark);
    font-weight: 600;
    border-bottom-color: var(--brand-primary);
}

.notice {
    margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-s);
    border: 1px solid;
    border-left-width: 4px;
    border-radius: var(--radius-s);
}

.notice-warn {
    color: var(--status-gelb-text);
    background: var(--status-gelb-bg);
    border-color: var(--status-gelb);
}

.plain-list {
    margin: var(--space-1) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-s);
}

.breakable {
    overflow-wrap: anywhere;
}

.mono {
    font-size: var(--font-size-s);
}

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

fieldset.field legend {
    padding: 0;
    margin-bottom: var(--space-1);
    font-weight: 600;
}

.card-wide {
    grid-column: 1 / -1;
}

.card-narrow-left {
    max-width: 36rem;
}

.prose {
    max-width: 46rem;
}

.prose ul {
    padding-left: 1.25rem;
}

.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.search-form input[type="search"] {
    flex: 1 1 14rem;
    width: auto;
}

.filter-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3) var(--space-4);
}

.filter-form .form-actions {
    grid-column: 1 / -1;
}

/* ---- Aktionen, Bestätigung, Geräteliste, Verlauf ------------------------------------------------- */

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2);
}

.actions-stack {
    flex-direction: column;
    align-items: stretch;
}

.btn-small {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-s);
}

summary.btn {
    list-style: none;
}

summary.btn::-webkit-details-marker {
    display: none;
}

details.confirm[open] {
    flex: 1 0 100%;
}

.confirm-form {
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-3);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
}

.device-list {
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.device {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.device-main {
    flex: 1 1 14rem;
    min-width: 0;
}

.device-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-s);
}

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

.timeline-item {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.timeline-text {
    margin: 0 0 var(--space-1);
    overflow-wrap: anywhere;
}

.timeline-reason {
    margin: 0 0 var(--space-1);
    font-style: italic;
    overflow-wrap: anywhere;
}

.timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: 0;
    font-size: var(--font-size-s);
}

/* ---- 2FA-Einrichtung -------------------------------------------------------------------------- */

.secret {
    display: block;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--font-size-l);
    letter-spacing: 0.08em;
    background: var(--color-surface-alt);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-m);
    overflow-wrap: anywhere;
    user-select: all;
}

.uri {
    font-size: var(--font-size-s);
    overflow-wrap: anywhere;
}

/* ---- Fehlerseiten ---------------------------------------------------------------------------- */

.error-code,
.error-ref {
    color: var(--color-muted);
}

.error-details {
    overflow-x: auto;
    padding: var(--space-4);
    font-size: 0.8125rem;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
}

/* Hauptmenü am Handy/kleinen Tablet (unter 768 px) im ☰-Menü statt als Leiste über dem Inhalt (Wunsch 19.10.2026) */
.menu-hauptnav {
    display: none;
}

@media (max-width: 47.99rem) {
    .main-nav {
        display: none;
    }

    .menu-hauptnav {
        display: block;
        margin-bottom: var(--space-3);
        padding-bottom: var(--space-3);
        border-bottom: 1px solid var(--color-border);
    }
}

/* ---- Breitere Bildschirme -------------------------------------------------------------------- */

@media (min-width: 48rem) {
    .header-inner {
        flex-wrap: nowrap;
        padding: var(--space-2) var(--space-5);
    }

    .main-nav {
        flex: 1 1 auto;
        order: 0;
    }

    .header-tools {
        margin-left: 0;
    }

    .site-main {
        padding: var(--space-5);
    }

    .card {
        padding: var(--space-6);
    }

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

    .filter-form {
        grid-template-columns: repeat(2, 1fr);
    }

    .facts {
        grid-template-columns: max-content 1fr;
    }

    .facts dd {
        margin-bottom: 0;
    }

    .btn-block {
        width: auto;
    }
}

@media (max-width: 39.99rem) {
    .user-name,
    .brand-titel {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .site-main {
        padding: var(--space-3);
    }

    .card {
        padding: var(--space-4) var(--space-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

/* ---- Kern K1: Verträge, Dateien, Kurse ------------------------------------------------------ */

input[type="file"] {
    width: 100%;
    min-height: var(--touch-min);
    padding: var(--space-2) 0;
    font: inherit;
    font-size: 1rem;
    color: var(--color-text);
}

textarea {
    min-height: 7rem;
    resize: vertical;
}

.field-invalid textarea {
    border-color: var(--status-rot);
    border-width: 2px;
}

/* Zeilenumbrüche aus Freitexten (Zahlungsbedingungen, Bemerkung) bleiben sichtbar */
.prewrap {
    white-space: pre-line;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.nowrap {
    white-space: nowrap;
}

.laender-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0 var(--space-3);
}

/* ---- Kern K2: Bestellungen ---------------------------------------------------------------------- */

.chip {
    display: inline-block;
    padding: 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-s);
    color: var(--brand-primary-dark);
    background: var(--brand-primary-soft);
    border-radius: var(--radius-s);
    overflow-wrap: anywhere;
}

.intern-box {
    border-left: 4px solid var(--status-gelb);
}

.bst-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

@media (min-width: 960px) {
    .bst-detail {
        grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    }
}

.bst-links > .card,
.bst-haupt > .card {
    margin-bottom: var(--space-4);
}

.bst-positionen > li {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.bst-positionen > li:last-child {
    border-bottom: 0;
}

.bst-summe {
    margin: var(--space-3) 0 0;
}

.bst-zeichnungen {
    margin-top: var(--space-1);
}

.bst-zeichnung {
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
}

.bst-position {
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-m);
    min-width: 0;
}

.bst-position > legend {
    padding: 0 var(--space-2);
    font-weight: 600;
}

.bst-linien h3 {
    margin: var(--space-3) 0 var(--space-2);
    font-size: var(--font-size-m, 1rem);
}

.bst-linie {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding: var(--space-2);
    background: var(--color-bg);
    border-radius: var(--radius-s);
}

@media (min-width: 640px) {
    .bst-linie {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
        align-items: end;
    }
}

.bst-filter,
.filter-details > summary {
    cursor: pointer;
}

.filter-details {
    flex-basis: 100%;
}

.js .js-aus {
    display: none;
}

.prio-wahl {
    min-height: var(--touch-min);
    width: auto;
}

.nur-gross {
    display: none;
}

@media (min-width: 1100px) {
    .nur-gross {
        display: table-cell;
    }
}

.auftrag-karten {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    margin: 0;
    padding: 0;
}

@media (min-width: 720px) {
    .auftrag-karten {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.auftrag-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
}

/* Kern K3: Antworten auf Bestellungen, Terminstand, Entscheidung */
.antwort {
    margin-bottom: var(--space-4);
    border-left: 4px solid var(--status-gelb);
}

.antwort-gitter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

@media (min-width: 960px) {
    .antwort-gitter {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.antwort-karte {
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-m);
    scroll-margin-top: var(--space-4);
}

.antwort-karte h3 {
    margin: 0 0 var(--space-2);
}

.antwort-karte select,
.antwort-karte input[type="text"],
.antwort-karte input[type="date"] {
    max-width: 100%;
}

.antwort-intern {
    margin-bottom: var(--space-4);
}

.antwort-start {
    margin-bottom: var(--space-4);
    border-left: 4px solid var(--status-gelb);
}

.auftrag-antworten > li {
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
}

.auftrag-antworten > li:first-child {
    border-top: 0;
}

.antwort-schnell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
}

.termin-liste > li {
    padding: var(--space-2) 0;
    overflow-wrap: anywhere;
}

.termin-historie {
    margin-top: var(--space-1);
    font-size: var(--font-size-s);
}

.termin-historie > summary,
.termin-verlauf li {
    overflow-wrap: anywhere;
}

.termin-verlauf > li {
    padding: var(--space-1) 0;
}

fieldset.entscheidung {
    min-width: 0;
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-m);
}

fieldset.entscheidung > legend {
    padding: 0 var(--space-2);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Kern K4a: Fertigung (Arbeitsplan, Statusmeldung, Fotos) */
.melden-leiste {
    margin: 0 0 var(--space-4);
}

@media (max-width: 719px) {
    .melden-leiste {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin: 0 calc(-1 * var(--space-3)) var(--space-4);
        padding: var(--space-2) var(--space-3);
        background: var(--color-bg);
        border-top: 1px solid var(--color-border-strong);
    }
}

.melden {
    border-left: 4px solid var(--status-blau, var(--brand-primary));
    scroll-margin-top: var(--space-4);
}

.melden select,
.melden input[type="text"],
.melden input[type="date"],
.melden input[type="file"] {
    max-width: 100%;
}

fieldset.plan-zeile {
    min-width: 0;
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-m);
}

fieldset.plan-zeile > legend {
    padding: 0 var(--space-2);
    font-weight: 600;
}

.plan-gesperrt {
    background: var(--color-bg);
}

.fertigung-pos h3 {
    overflow-wrap: anywhere;
}

.schritt-laufend {
    margin: var(--space-3) 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--status-blau, var(--brand-primary));
    border-radius: var(--radius-m);
}

.schritt-laufend progress {
    width: 100%;
    max-width: 24rem;
    height: 1rem;
    accent-color: var(--brand-primary);
}

.schritte-kommend > li {
    padding: var(--space-1) 0;
    overflow-wrap: anywhere;
}

.schritt-aktion {
    margin-top: var(--space-2);
}

.foto-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-2) 0;
    padding: 0;
}

.foto-leiste img {
    display: block;
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: var(--radius-s);
    border: 1px solid var(--color-border);
}

.zurueckgenommen {
    opacity: 0.7;
}

.zurueckgenommen strong {
    text-decoration: line-through;
}

.schritt-namen {
    margin: var(--space-1) 0 var(--space-2);
    padding-left: var(--space-4);
}

/* Kern K5: Versand, Sendungen, Teillieferung */
.vw-icon {
    vertical-align: -3px;
    margin-right: var(--space-1);
}

.versand-linie {
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-m);
    overflow-wrap: anywhere;
}

.versand-linie > p {
    margin: 0 0 var(--space-2);
}

.versand-kennzahlen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-2);
}

.versand-kennzahlen > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.versand-wahl {
    min-width: 0;
    margin: 0 0 var(--space-3);
}

.inline-form {
    display: inline;
}

.galerie img {
    max-width: 96px;
    height: auto;
    margin: 0 var(--space-1) var(--space-1) 0;
    border-radius: var(--radius-s, 4px);
}

/* Kern K7a: Aufgaben, Glocke, Benachrichtigungen */
.glocke {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    text-decoration: none;
}

.glocke-zahl {
    margin-left: 0;
}

.aufgaben-liste {
    margin: 0;
}

.aufgabe {
    min-width: 0;
    padding: var(--space-2) 0 var(--space-2) var(--space-3);
    border-left: 4px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.aufgabe-rot {
    border-left-color: #b42318;
}

.aufgabe-gelb {
    border-left-color: #b7791f;
}

.aufgabe-text {
    margin: 0 0 var(--space-1);
    overflow-wrap: anywhere;
}

.aufgabe-zeit {
    margin: 0 0 var(--space-1);
}

.aufgabe-zeit > span + span::before {
    content: " · ";
}

.aufgabe-nachricht {
    margin: 0 0 var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--color-bg);
    overflow-wrap: anywhere;
}

.aufgabe-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
}

.aufgabe-weitere {
    margin: var(--space-1) 0;
}

.aufgaben-gruppe summary {
    cursor: pointer;
}

.aufgaben-gruppe summary h2 {
    display: inline;
}

.benachrichtigung {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    overflow-wrap: anywhere;
}

.benachrichtigung-neu {
    border-left: 4px solid var(--color-focus);
    padding-left: var(--space-2);
}

.benachrichtigung p {
    margin: 0 0 var(--space-1);
}

/* Kern K7b: Kalender und Kundentermine */
.db-layout {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
}

.db-haupt,
.db-seite {
    min-width: 0;
}

.db-kopf .kal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.db-umschalter {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-left: auto;
}

.kal-titel {
    margin: var(--space-4) 0 var(--space-2);
}

.kal-titel-zeile {
    margin: var(--space-2) 0;
}

.krit-liste {
    margin: 0;
}

.krit-zeile {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    overflow-wrap: anywhere;
}

.krit-grund {
    color: var(--color-muted);
}

.kal-legende {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: var(--space-2) 0 0;
    padding: 0;
}

.kal-legende > li {
    list-style: none;
}

.kal-ruhe-muster {
    display: inline-block;
    width: 1.2rem;
    height: 0.9rem;
    border: 1px solid var(--color-border);
    background: repeating-linear-gradient(45deg, transparent 0 4px, var(--color-border) 4px 6px);
    vertical-align: middle;
}

/* Raster: ab 640 px sieben Spalten, darunter die Agenda */
.db-raster-bereich {
    display: none;
}

.db-agenda {
    display: block;
}

.agenda-liste > li {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    overflow-wrap: anywhere;
}

@media (min-width: 640px) {
    .db-raster-bereich {
        display: block;
    }

    .db-agenda {
        display: none;
    }

    .db-raster {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .kal-wt {
        padding: var(--space-1);
        font-size: var(--font-size-s);
        font-weight: 600;
        text-align: center;
        border-bottom: 1px solid var(--color-border);
    }

    .db-tag {
        position: relative;
        min-width: 0;
        min-height: 5.5rem;
        padding: var(--space-1);
        border-right: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
    }

    .db-aus {
        background: var(--color-bg);
    }

    .kal-heute {
        outline: 2px solid var(--color-focus);
        outline-offset: -2px;
    }

    .db-markiert {
        background: var(--color-bg);
    }

    .db-ruhe {
        background: repeating-linear-gradient(45deg, transparent 0 6px, var(--color-border) 6px 8px);
    }

    .kal-nr {
        display: block;
        font-size: var(--font-size-s);
        color: var(--color-muted);
    }

    .kal-neu {
        position: absolute;
        top: 0;
        right: 2px;
        text-decoration: none;
        font-weight: 700;
    }

    .evt {
        display: flex;
        align-items: center;
        min-width: 0;
        margin-top: 2px;
        padding: 1px 4px;
        font-size: var(--font-size-s);
        text-decoration: none;
        border: 1px solid var(--color-border);
        border-radius: 4px;
        overflow: hidden;
        white-space: nowrap;
    }

    .evt .evt-nr {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .evt-rot {
        border-color: var(--status-rot-stark);
        background: var(--status-rot-bg);
    }

    .evt-gelb {
        border-color: var(--status-gelb-stark);
        background: var(--status-gelb-bg);
    }

    .evt-gruen {
        border-color: var(--status-gruen-stark);
        background: var(--status-gruen-bg);
    }

    .evt-erledigt {
        opacity: 0.55;
        text-decoration: line-through;
    }

    .evt-mehr > summary {
        cursor: pointer;
        font-size: var(--font-size-s);
    }
}

@media (min-width: 1100px) {
    .db-layout {
        grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
        align-items: start;
    }
}

.kt-bestellung {
    padding: var(--space-1) 0;
    overflow-wrap: anywhere;
}

.kt-pos {
    display: block;
    margin-left: var(--space-5, 1.5rem);
}

.kt-pos input {
    width: 8rem;
}

.kt-box-titel {
    margin: var(--space-3) 0 var(--space-1);
}