:root {
    color-scheme: light dark;

    /* Design-Tokens (siehe DESIGN_KONZEPT.md) - verbindliche Grundlage für
       die gesamte Anwendung, etabliert am Dashboard-Piloten. */
    --color-ink: #1c1e1c;
    --color-paper: #f1f2ef;
    --color-surface: #ffffff;
    --color-border: #dbded8;
    --color-accent: #166f4c;
    --color-accent-hover: #125b3e;
    --color-danger: #b3261e;
    --color-warning: #a8790e;
    --color-info: #1d7f87;
    --color-muted: #5b5e58;

    /* Status-Farben (Bedeutung/Zuordnung unverändert gegenüber der
       ursprünglichen Fassung, nur kontraststärker abgestimmt) */
    --status-neu: #54708c;
    --status-geplant: #1d7f87;
    --status-verpackt: #a8790e;
    --status-verkauft: #7454b0;
    --status-versendet: #166f4c;
    --status-archiviert: #83867f;
    --status-unverkauft: #a13d3d;

    /* Typografie: bewusst ein hochwertiger SYSTEM-Font-Stack statt eines
       Webfonts (kein Download, keine externe Abhängigkeit) */
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
    --fs-xs: 0.8125rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2rem;

    /* Abstände (8px-Basis, 4px-Zwischenschritt) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;

    --radius-sm: 4px;
    --radius-md: 8px;
}

* {
    box-sizing: border-box;
}

/* Ohne diese Regel wird das hidden-Attribut von jeder eigenen Klasse
   überstimmt, die selbst "display" setzt (z.B. .formular, .update-spinner
   mit display:flex) - Autor-Regeln haben in der CSS-Kaskade unabhängig von
   Selektor-Spezifität immer Vorrang vor der User-Agent-Regel
   "[hidden] { display: none }". Betraf konkret den Systemupdate-Bereich:
   #update-spinner (.update-spinner) und #update-installieren-formular
   (.formular) blieben trotz hidden-Attribut sichtbar. */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    font-size: var(--fs-base);
    background: var(--color-paper);
    color: var(--color-ink);
}

h1 {
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 var(--space-6);
}

h2 {
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.2;
    margin: var(--space-8) 0 var(--space-3);
}

h3 {
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.2;
    margin: var(--space-6) 0 var(--space-2);
}

/* ============================================================
   Hauptnavigation: links einschiebbares Off-Canvas-Menü
   ------------------------------------------------------------
   Persistenter Kopfbereich (.app-kopfzeile, Hamburger-Button + Titel)
   bleibt beim Scrollen sichtbar (position: sticky). Das eigentliche Menü
   (.hauptnav) liegt außerhalb des Bildschirms (transform: translateX)
   und fährt bei Bedarf ein. .menu-abdeckung dimmt den restlichen Inhalt
   und schließt das Menü bei Klick/Tap außerhalb. Offen-/Geschlossen-
   Zustand wird in sessionStorage gehalten, damit er einen klassischen
   Seitenwechsel (kein SPA-Routing) übersteht - siehe Script direkt nach
   dem Menü-Markup unten, das synchron VOR main läuft, damit kein
   sichtbares Nachträglich-Aufklappen entsteht.
   ============================================================ */

.app-kopfzeile {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--color-accent);
    color: white;
}

.menu-knopf {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.menu-knopf:hover {
    background: rgba(255, 255, 255, 0.15);
}

.menu-knopf:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

.menu-knopf-linie {
    display: block;
    width: 22px;
    height: 2px;
    background: white;
    border-radius: 2px;
}

.app-titel {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-2);
    margin-left: calc(var(--space-2) * -1);
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: white;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-titel:hover {
    background: rgba(255, 255, 255, 0.15);
}

.app-titel:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

.app-titel .logo-bild {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: var(--radius-sm);
    padding: 0.2rem;
    line-height: 0;
    flex-shrink: 0;
}

.app-titel .logo-bild img {
    display: block;
    height: 24px;
    width: 24px;
    object-fit: contain;
}

.menu-abdeckung {
    position: fixed;
    inset: 0;
    background: rgba(28, 30, 28, 0.4);
    z-index: 30;
}

.hauptnav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background: var(--color-accent);
    color: white;
    z-index: 40;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    overflow-y: auto;
    padding: var(--space-4) 0;
}

.hauptnav.offen {
    transform: translateX(0);
}

.hauptnav-links {
    display: flex;
    flex-direction: column;
}

.hauptnav-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    color: white;
    text-decoration: none;
    font-weight: 500;
    border-left: 3px solid transparent;
}

.hauptnav-links a:hover {
    background: rgba(255, 255, 255, 0.1);
}

.hauptnav-links a.aktiv {
    background: rgba(255, 255, 255, 0.18);
    font-weight: 600;
    border-left-color: white;
}

.hauptnav-fuss {
    padding: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hauptnav-fuss .nav-benutzer {
    color: white;
    opacity: 0.85;
    font-size: var(--fs-sm);
}

.hauptnav-fuss .logout-form {
    margin: 0;
}

.hauptnav-fuss .logout-knopf {
    background: none;
    border: none;
    color: white;
    font: inherit;
    cursor: pointer;
    padding: var(--space-2) 0;
    min-height: 44px;
    text-align: left;
    width: 100%;
}

.hauptnav-fuss .logout-knopf:hover {
    text-decoration: underline;
}

main {
    max-width: 960px;
    margin: var(--space-8) auto;
    padding: 0 var(--space-6);
}

@media (max-width: 640px) {
    main {
        margin: var(--space-6) auto;
        padding: 0 var(--space-4);
    }
}

.tabellen-scroll {
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4);
    margin: var(--space-4) 0;
}

.tabellen-scroll table {
    margin: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: var(--fs-sm);
}

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

th {
    font-weight: 500;
    color: var(--color-muted);
}

.tabellen-scroll tbody tr:last-child td {
    border-bottom: none;
}

.tabellen-scroll p {
    padding: var(--space-3) var(--space-2);
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-muted);
}

/* Utility-Klasse für Zahlenspalten (Beträge, Stückzahlen, ...) - rechts-
   bündig mit tabellarischen Mono-Ziffern für sauberen Vergleich beim
   Überfliegen einer Spalte. */
.zahl {
    font-family: var(--font-mono);
    text-align: right;
}

/* Paketnummer-Zeile unter dem Artikelnamen in den Dashboard-Checklisten
   ("Geplante Artikel" / "Verkaufte Artikel", siehe Auftrag "Dashboard-
   Checkliste: Paketnummer ergänzen") - ALS ZWEITE ZEILE statt eigener
   Tabellenspalte, damit auf schmalen (Handy-)Bildschirmen nicht die
   Artikel-Spalte gequetscht wird (table hat width:100% ohne feste
   Spaltenbreiten - eine dritte Spalte ging zulasten der ersten). Monospace
   wie .zahl oben, damit die Nummer beim Abgleich mit dem aufgeklebten
   Paketetikett schnell zu erfassen ist. */
.paketnummer-zelle {
    display: inline-block;
    margin-top: 0.15rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--color-muted);
}

.formular {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 420px;
}

.formular label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.formular label.checkbox-label,
.formular label.radio-label {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.formular input:not([type="checkbox"]):not([type="radio"]),
.formular textarea,
.formular select {
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 1rem; /* mind. 16px, verhindert iOS-Autozoom beim Fokussieren */
}

.formular input[type="checkbox"],
.formular input[type="radio"] {
    width: auto;
}

/* Symbol-Leiste im Etiketten-Reiter (siehe Auftrag "Etiketten-Reiter:
   freier Text + einfache Symbole") - fügt beim Antippen das jeweilige
   Zeichen in das Textfeld ein. 44px Kantenlänge wie .haken-knopf, damit
   die Symbole auf dem Handy gut treffbar bleiben. */
.symbol-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* ".formular button" (siehe weiter unten) hat als Element+Klasse-Selektor
   höhere Spezifität als eine einzelne Klasse - ohne den ".formular"-
   Präfix hier würden Mindesthöhe/Padding/grüner Hintergrund des
   allgemeinen Formular-Buttons diese kompakten Buttons trotz späterer
   Position im Stylesheet überstimmen. Gilt auch für
   .etikett-box-loeschen weiter unten. */
.formular button.symbol-knopf {
    width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
    align-self: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: inherit;
    font-size: 1.3rem;
    font-weight: normal;
    line-height: 1;
    cursor: pointer;
}

.formular button.symbol-knopf:hover {
    background: var(--color-border);
}

/* Etiketten-Editor: Textfelder frei platzieren/größenändern (siehe
   Auftrag "Etiketten-Reiter: Textfelder per Ziehen/Größenändern
   platzieren, Hoch-/Querformat"), app/templates/etiketten.html. Die
   Vorschauschrift ist dieselbe DejaVu Sans Mono wie beim tatsächlichen
   Druck (siehe modules/etiketten/freitext.py), damit die Vorschau
   möglichst genau zeigt, was gedruckt wird. */
@font-face {
    font-family: "DejaVu Sans Mono";
    src: url("../fonts/DejaVuSansMono.ttf") format("truetype");
    font-display: swap;
}

.etikett-leinwand-rahmen {
    display: flex;
    justify-content: center;
    margin: var(--space-4) 0;
}

.etikett-leinwand {
    position: relative;
    width: min(92vw, 380px);
    background: white;
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    touch-action: none; /* verhindert Scrollen der Seite während des Ziehens auf der Leinwand */
    overflow: hidden;
}

.etikett-box {
    position: absolute;
    border: 1px dashed #888;
    box-sizing: border-box;
    min-width: 24px;
    min-height: 24px;
}

.etikett-box-text {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 2px;
    font-family: "DejaVu Sans Mono", monospace;
    line-height: 1.2;
    color: #000;
    outline: none;
    word-break: break-word;
}

.etikett-box-griff,
.formular button.etikett-box-schrift-kleiner,
.formular button.etikett-box-schrift-groesser,
.formular button.etikett-box-loeschen {
    position: absolute;
    top: -24px;
    height: 24px;
    min-height: 0;
    padding: 0;
    align-self: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-border);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: normal;
    cursor: pointer;
    touch-action: none;
}

.etikett-box-griff {
    left: 0;
    width: 24px;
    cursor: move;
}

.formular button.etikett-box-schrift-kleiner,
.formular button.etikett-box-schrift-groesser {
    width: 28px;
    font-size: 0.75rem;
}

.formular button.etikett-box-schrift-kleiner {
    left: 26px;
}

.formular button.etikett-box-schrift-groesser {
    left: 56px;
}

.formular button.etikett-box-loeschen {
    right: 0;
    width: 24px;
    color: var(--color-danger);
}

.etikett-box-resize {
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 20px;
    height: 20px;
    background: var(--color-ink);
    border-radius: 50%;
    cursor: nwse-resize;
    touch-action: none;
}

.haken-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: var(--color-accent);
    color: white;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

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

.haken-knopf:active {
    transform: scale(0.96);
}

.haken-knopf:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.haken-knopf:disabled {
    opacity: 0.6;
    cursor: default;
}

/* "Ausblenden"-Knopf der Dashboard-Checklisten (schaltet Telegram-
   Erinnerungen stumm, ändert aber NICHT den Paketstatus - siehe Auftrag
   "Dashboard-Checkliste geplant->verpackt", Teil 1) - bewusst dezenter/
   kleiner als .haken-knopf, da es sich um eine sekundäre Aktion handelt. */
.zeilen-aktionen {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.stumm-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

.stumm-knopf:hover:not(:disabled) {
    background: var(--color-paper);
}

.stumm-knopf:disabled,
.stumm-knopf.ist-stumm {
    opacity: 0.5;
    cursor: default;
}

/* Kompaktes Aktionen-Dropdown (siehe Auftrag "Rechnungen-Reiter:
   Dropdown-Menü für Aktionen" - ersetzt zwei nebeneinanderstehende
   Buttons durch ein einzelnes, platzsparendes Menü). */
.aktionen-dropdown {
    position: relative;
    display: inline-block;
    margin-bottom: var(--space-4);
}

.aktionen-knopf {
    min-height: 44px;
    padding: 0.5rem 1.25rem;
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

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

.aktionen-menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    z-index: 20;
    min-width: 300px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.aktionen-menu form {
    margin: 0;
}

.aktionen-menu-eintrag {
    display: block;
    width: 100%;
    min-height: 44px;
    text-align: left;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font: inherit;
    color: var(--color-ink);
    cursor: pointer;
}

.aktionen-menu-eintrag:hover {
    background: var(--color-paper);
    color: var(--color-accent);
}

.aktionen-menu-eintrag:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.lageretikett-knopf {
    min-height: 44px;
    padding: 0.3rem 0.8rem;
    font-size: 0.9rem;
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
}

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

.lageretikett-knopf:disabled {
    opacity: 0.7;
    cursor: default;
}

.formular button {
    align-self: flex-start;
    min-height: 44px;
    padding: 0.5rem 1.25rem;
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

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

.formular button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.formular button:disabled {
    opacity: 0.6;
    cursor: default;
}

.formular button.gefahr {
    background: var(--color-danger);
}

.formular button.gefahr:hover {
    background: #8f1e18;
}

.filterleiste {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    max-width: none;
}

.filterleiste label {
    flex-direction: column;
}

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

.kachel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-6);
    display: flex;
    flex-direction: column;
    flex: 1 1 150px;
}

.kachel-wert {
    font-family: var(--font-mono);
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--color-ink);
}

.kachel-label {
    font-size: var(--fs-sm);
    color: var(--color-muted);
}

.kachel-warnung {
    border-left-color: var(--color-warning);
}

.kachel-warnung .kachel-wert {
    color: var(--color-warning);
}

@media (max-width: 640px) {
    .kachel {
        flex-basis: calc(50% - var(--space-2));
    }
}

.filter a {
    margin-right: 0.75rem;
    color: var(--color-accent);
    text-decoration: none;
}

.filter a.aktiv {
    font-weight: bold;
    text-decoration: underline;
}

/* Flash-/Statusmeldungen: drei Varianten über denselben linken Farbstreifen
   wie bei den Kacheln (ein wiederverwendetes Struktur-Signal für "das hier
   ist markiert"), auf ruhigem, hellem Flächenhintergrund statt kräftiger
   Einfärbung. Standardvariante (ohne weitere Klasse, Flask-Kategorie
   "message") bleibt "Erfolg" - die meisten Flash-Aufrufe sind positive
   Bestätigungen und übergeben bewusst keine Kategorie. .fehler/.hinweis
   werden von flash(text, "fehler"/"hinweis") gesetzt (siehe
   app/routes/*.py) und in base.html als li-Klasse durchgereicht. */
.meldungen {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.meldungen li {
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
}

.meldungen li.fehler {
    border-left-color: var(--color-danger);
}

.meldungen li.hinweis {
    border-left-color: var(--color-info);
}

.status-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: white;
    white-space: nowrap;
}

.status-neu {
    background: var(--status-neu);
}

.status-geplant {
    background: var(--status-geplant);
}

.status-verpackt {
    background: var(--status-verpackt);
}

.status-verkauft {
    background: var(--status-verkauft);
}

.status-versendet {
    background: var(--status-versendet);
}

.status-archiviert {
    background: var(--status-archiviert);
}

.status-unverkauft {
    background: var(--status-unverkauft);
}

.inline-auswahl {
    /* Erzwingt helle Systemsteuerelement-Darstellung für dieses Dropdown,
       unabhängig vom systemweiten Dark Mode - ohne das würde der Browser
       (wegen "color-scheme: light dark" oben in :root) die Schriftfarbe
       im Dark Mode selbst wählen und dabei ggf. hellen/weißen Text auf
       dem unten explizit weißen Hintergrund erzeugen (unsichtbar). */
    color-scheme: light;
    font: inherit;
    font-size: 1rem;
    min-height: 44px;
    padding: 0.3rem 0.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    max-width: 11rem;
}

/* Mono-Schrift für Kennungen (Paketnummern, Sendungsnummern, ...) - ohne
   Rechtsbündigkeit (siehe .zahl), da es sich nicht um Vergleichszahlen
   handelt, sondern um alphanumerische Bezeichner, die im Fließtext stehen. */
.kennung {
    font-family: var(--font-mono);
}

/* Spalten, die auf schmalen Screens ausgeblendet werden, um komplexe
   Tabellen kompakter darzustellen (siehe Auftrag: "wichtige Informationen
   auf Mobile priorisieren; sekundäre Daten ggf. kompakter darstellen") -
   der Inhalt bleibt über die bestehende Detailseite bzw. per horizontalem
   Scrollen weiterhin erreichbar, wird aber nicht mehr erzwungen. */
@media (max-width: 640px) {
    .mobil-sekundaer {
        display: none;
    }
}

/* Hintergrund/Textfarbe bewusst NUR für die nicht farbcodierten Dropdowns
   (Kartongröße, Versanddienst) - beim Status-Dropdown käme das sonst mit
   höherer Quelltext-Reihenfolge nach den .status-X-Hintergrundfarben und
   würde sie wieder auf Weiß überschreiben (siehe .status-inline-auswahl
   unten, das seine Hintergrundfarbe stattdessen aus .status-neu/-geplant/
   etc. bezieht). */
.inline-auswahl:not(.status-inline-auswahl) {
    background: var(--color-surface);
    color: var(--color-ink);
}

.status-inline-auswahl {
    color: white;
    font-weight: 600;
    font-size: var(--fs-xs);
    border: none;
}

.detail dt {
    font-weight: bold;
    margin-top: 0.5rem;
}

.detail dd {
    margin: 0;
}

.foto-galerie {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0;
}

.foto-kachel {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.5rem;
}

.foto-kachel img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
}

.foto-kachel button.gefahr {
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
}

.schnellversand-katalog {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0;
}

/* Fläche/Rahmen kommen jetzt von .karte (siehe Auftrag: "gemeinsame
   Komponenten statt immer neuer Sonderklassen") - hier nur noch die für
   dieses Foto-Kachel-Layout spezifischen Eigenheiten. */
.schnellversand-karte {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
    padding: 0.75rem;
    width: 160px;
    text-align: center;
}

.schnellversand-karte img,
.schnellversand-kein-foto {
    width: 130px;
    height: 130px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.schnellversand-kein-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-paper);
    color: var(--color-muted);
    font-size: 0.8rem;
}

.schnellversand-name {
    font-weight: 600;
}

.schnellversand-bestand {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.schnellversand-foto-vorschau {
    width: 130px;
    height: 130px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.einfuege-flaeche {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin: 1rem 0 0.75rem;
    text-align: center;
    color: var(--color-muted);
    max-width: 420px;
    cursor: text;
}

.einfuege-flaeche:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Platzhaltertext für den contenteditable-Einfüge-Bereich: contenteditable
   erlaubt (anders als z.B. bei einem <input>) kein natives placeholder-
   Attribut, daher der :empty:before-Trick. contenteditable ist nötig, damit
   iOS Safari beim langen Drücken das "Einfügen"-Menü auch für Bilder anbietet
   - ein reines, nicht-editierbares Element bekommt dort nur Text-Funktionen. */
.einfuege-flaeche:empty:before {
    content: attr(data-placeholder);
    color: var(--color-muted);
}

@media (max-width: 640px) {
    /* Copy-Paste von Bildern ist auf mobilen Browsern trotz contenteditable
       nicht in jedem Fall zuverlässig (Verhalten unterscheidet sich je nach
       iOS-/Android-Version und App, aus der kopiert wurde). Da die Funktion
       laut Rückmeldung zu ca. 99% über das Handy genutzt wird, wird der
       Datei-Upload-Button hier deutlich größer/prominenter dargestellt - als
       zuverlässiger bevorzugter Weg für mobile Nutzer. */
    .versandetikett-hochladen-formular input[type="file"] {
        display: block;
        width: 100%;
        font-size: 1rem;
    }

    .versandetikett-hochladen-formular input[type="file"]::file-selector-button {
        display: block;
        width: 100%;
        padding: 0.9rem 1rem;
        margin-bottom: 0.5rem;
        background: var(--color-accent);
        color: white;
        border: none;
        border-radius: var(--radius-sm);
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
    }

    .versandetikett-hochladen-formular button[type="submit"] {
        width: 100%;
        padding: 0.9rem 1rem;
        font-size: 1rem;
        font-weight: 600;
    }
}

.versandetikett-vorschau {
    max-width: 248px;
    max-height: 400px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    display: block;
}

.warnhinweis {
    background: #fff8e1;
    border: 1px solid var(--color-warning);
    color: #7a5b00;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    max-width: 420px;
}

.update-spinner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spinner-drehung 0.7s linear infinite;
}

@keyframes spinner-drehung {
    to {
        transform: rotate(360deg);
    }
}

.update-fehler {
    color: var(--color-danger);
}

.update-erfolg {
    color: var(--color-accent);
}

main.login-seite {
    max-width: none;
    margin: 0;
    padding: 1.5rem;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.login-karte {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 2rem;
    max-width: 360px;
    width: 100%;
    text-align: center;
}

.login-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 0.5rem;
}

.login-karte .formular {
    max-width: none;
    text-align: left;
    margin-top: 1rem;
}

.fussnotiz {
    margin-top: 2rem;
    font-size: var(--fs-xs);
}

.seiten-navigation {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.seiten-navigation a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-2);
    color: var(--color-accent);
    text-decoration: none;
}

/* Log-Liste (Historie/Fehlerprotokoll): ersetzt eine reine 3-Spalten-Tabelle
   durch eine Liste, damit lange Ereignis-Beschreibungen auf schmalen
   Screens nicht zu horizontalem Scrollen zwingen (siehe Auftrag: "breite
   Tabellen nicht automatisch nur per horizontalem Scrollen behandeln, wenn
   eine sinnvollere mobile Darstellung möglich ist") - Zeitpunkt/Paket-Bezug
   stehen auf schmalen Screens als kompakte Meta-Zeile über dem Text statt
   in eigenen Spalten. */
.log-liste {
    list-style: none;
    margin: var(--space-4) 0;
    padding: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.log-liste li {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.log-liste li:last-child {
    border-bottom: none;
}

.log-meta {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 11rem;
    font-size: var(--fs-sm);
    color: var(--color-muted);
}

.log-zeit {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
}

.log-beschreibung {
    flex: 1 1 auto;
}

@media (max-width: 640px) {
    .log-liste li {
        flex-direction: column;
        gap: var(--space-1);
    }

    .log-meta {
        min-width: 0;
        flex-direction: row;
        gap: var(--space-3);
    }
}

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

.logo-vorschau {
    width: 48px;
    height: 48px;
    object-fit: contain;
    vertical-align: middle;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.2rem;
    background: var(--color-surface);
}

.paket-warnung {
    background: #fdecea;
}

/* Generische Inhalts-Karte (im Unterschied zu .kachel, das speziell für
   Kennzahl-Kacheln mit Zahl+Label gedacht ist - siehe Bestandsaufnahme:
   .kunde-karte/.schnellversand-karte zweckentfremdeten bisher .kachel für
   strukturell andere Inhalte). Dieselbe Optik (Fläche/Rahmen/Radius),
   aber ohne die Flex-Spalten-/Randstreifen-Eigenheiten der Kennzahl-Kachel. */
.karte {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-4);
}

/* Eine Tabelle INNERHALB einer Karte bekommt keine eigene, zweite
   Fläche/Rahmen (vermeidet verschachtelte Boxen) - die umgebende Karte
   ist bereits die visuelle Begrenzung. */
.karte .tabellen-scroll {
    background: none;
    border: none;
    padding: 0;
    margin-top: var(--space-3);
}

/* Balkendiagramm "Einnahmen (letzte 6 Monate)" auf dem Dashboard - reines
   inline-SVG statt Chart-Bibliothek (siehe Auftrag: keine externen CDNs,
   Bibliothek nur falls nötig lokal einbinden - ein einfaches Balken-
   diagramm mit einer Durchschnittslinie braucht keine). Skaliert über
   viewBox/width:100%, min-width erzwingt bei Bedarf horizontales Scrollen
   im umgebenden .tabellen-scroll statt unlesbar kleiner Beschriftung. */
.diagramm-legende {
    margin: 0 0 var(--space-3);
    color: var(--color-muted);
    font-size: var(--fs-sm);
}

.einnahmen-diagramm {
    display: block;
    width: 100%;
    min-width: 480px;
    height: auto;
}

.diagramm-balken {
    fill: var(--color-accent);
}

.diagramm-durchschnittslinie {
    stroke: var(--color-ink);
    stroke-width: 1;
    stroke-dasharray: 4 3;
}

.diagramm-wert {
    font-size: 8px;
    fill: var(--color-ink);
    text-anchor: middle;
    font-family: var(--font-mono);
}

.diagramm-monat {
    font-size: 7px;
    fill: var(--color-muted);
    text-anchor: middle;
}

.kunde-karte {
    margin-bottom: 1rem;
}

.kunde-karte h2 {
    margin-top: 0;
}

.tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1.5rem;
}

.tab-knopf {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    min-height: 44px;
    padding: 0.6rem 1rem;
    font: inherit;
    font-weight: 600;
    color: var(--color-ink);
    cursor: pointer;
    white-space: nowrap;
}

.tab-knopf:hover {
    color: var(--color-accent);
}

.tab-knopf.aktiv {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* Auf schmalen Screens würden 9 (Admin-)Tabs in mehreren Zeilen umbrechen
   und viel vertikalen Platz vor dem eigentlichen Inhalt beanspruchen - eine
   einzeilige, horizontal scrollbare Leiste ist die kompaktere Darstellung
   (siehe Auftrag: "keine unnötigen horizontalen Scrollbereiche" gilt für
   Dateninhalte; eine kompakte Tab-Leiste ist hier die sinnvollere
   Alternative zu mehrzeiligem Umbruch, der wichtige Inhalte weiter nach
   unten verdrängen würde). */
@media (max-width: 640px) {
    .tab-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}

.tab-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-6);
}

.tab-panel h2 {
    margin-top: 0;
}

/* Aufklappbare Abschnitte (Paketdetail, siehe Auftrag: "13 hinter-
   einanderliegende Bereiche visuell deutlich besser gruppieren"). Nutzt
   das native <details>/<summary>-Element - funktioniert ohne jedes
   JavaScript auf Desktop UND iPhone, ist per Tastatur bedienbar und kann
   die vorhandenen Formulare/Skripte unverändert im Inneren aufnehmen
   (der Browser hält den Inhalt eines geschlossenen <details> weiterhin
   im DOM, nur unsichtbar - bestehende IDs/Event-Listener funktionieren
   unabhängig vom Auf-/Zugeklappt-Zustand normal weiter). */
.abschnitt {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin: var(--space-4) 0;
}

.abschnitt > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-lg);
    font-weight: 600;
}

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

.abschnitt > summary::after {
    content: "+";
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--color-muted);
    flex-shrink: 0;
}

.abschnitt[open] > summary::after {
    content: "−";
}

.abschnitt > summary:hover {
    background: var(--color-paper);
}

.abschnitt > summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.abschnitt-inhalt {
    padding: 0 var(--space-4) var(--space-4);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
}

.abschnitt-inhalt h3:first-child {
    margin-top: 0;
}

/* Gefahrenzone deutlich vom normalen Arbeitsbereich abgesetzt (siehe
   Auftrag) - roter Rahmen/Überschrift statt einer Fläche in Gefahrenfarbe,
   damit es auffällt, ohne wie ein Fehlerzustand zu wirken. */
.abschnitt.gefahrenzone {
    border-color: var(--color-danger);
}

.abschnitt.gefahrenzone > summary {
    color: var(--color-danger);
}

h1 .status-badge {
    margin-left: var(--space-3);
    vertical-align: middle;
}

/* KI-Assistent: Symbol in der Kopfzeile (ersetzt den früheren schwebenden
   Button) - führt zur eigenen Vollbild-Chat-Seite (app/templates/
   assistent.html), kein Overlay mehr. margin-left:auto schiebt es an den
   rechten Rand der Kopfzeile, Hamburger/Titel bleiben links gruppiert. */
.assistent-header-knopf {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    color: white;
    text-decoration: none;
    font-size: var(--fs-md);
    flex-shrink: 0;
}

.assistent-header-knopf:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Eigenständige Vollbild-Chat-Seite (siehe assistent.html) - bewusst KEIN
   base.html/.app-kopfzeile, sondern ein eigener, chat-typischer
   Kopfbereich mit Zurück-Pfeil statt Hamburger-Menü (Vorbild: WhatsApp-
   Chatansicht). 100dvh statt 100vh, damit mobile Adressleisten/Toolbars
   die Höhe nicht verfälschen (100vh mit vh-Einheit als Fallback für
   ältere Browser ohne dvh-Unterstützung). */
body.seite-assistent {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.assistent-chat-kopf {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-accent);
    color: white;
    flex-shrink: 0;
}

.assistent-zurueck {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: calc(var(--space-2) * -1);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: white;
    font-size: var(--fs-lg);
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.assistent-zurueck:hover {
    background: rgba(255, 255, 255, 0.15);
}

.assistent-chat-titel {
    font-weight: 600;
}

.assistent-chat-flaeche {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    background: var(--color-surface);
}

/* Dezentes Wasserzeichen (siehe Auftrag Teil 1) - eigenes Element hinter
   dem Nachrichtenverlauf statt background-image direkt auf .assistent-
   verlauf, da CSS background keine unabhängige Deckkraft kennt und ein
   opacity auf dem Verlauf selbst auch die Nachrichten ausbleichen würde. */
.assistent-chat-flaeche::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 220px;
    opacity: 0.06;
    pointer-events: none;
}

.assistent-verlauf {
    position: relative;
    flex: 1;
    min-height: 120px;
    overflow-y: auto;
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.assistent-nachricht {
    padding: var(--space-2) var(--space-3);
    border-radius: 16px;
    font-size: var(--fs-sm);
    max-width: 85%;
    white-space: pre-wrap;
}

.assistent-nachricht-text {
    white-space: pre-wrap;
}

.assistent-nachricht-bild {
    display: block;
    max-width: 100%;
    max-height: 220px;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
}

.assistent-nachricht-nutzer {
    align-self: flex-end;
    background: var(--color-accent);
    color: white;
    border-bottom-right-radius: 4px;
}

.assistent-nachricht-antwort {
    align-self: flex-start;
    background: var(--color-paper);
    color: var(--color-ink);
    border-bottom-left-radius: 4px;
}

.assistent-zeitstempel {
    display: block;
    margin-top: var(--space-1);
    font-size: 11px;
    opacity: 0.65;
}

.assistent-nachricht-nutzer .assistent-zeitstempel {
    text-align: right;
}

.assistent-nachricht-antwort .assistent-zeitstempel {
    text-align: left;
}

.assistent-vorschlag-aktionen {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.assistent-vorschlag-aktionen button {
    flex: 1;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    font-size: var(--fs-sm);
    cursor: pointer;
}

.assistent-vorschlag-bestaetigen {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

.assistent-vorschlag-verwerfen {
    background: var(--color-surface);
    color: var(--color-ink);
}

.assistent-vorschlag-aktionen button:disabled {
    opacity: 0.6;
    cursor: default;
}

.assistent-vorschlag-ergebnis {
    margin-top: var(--space-2);
    font-size: var(--fs-sm);
    font-style: italic;
    opacity: 0.85;
}

.assistent-eingabe {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-3);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.assistent-eingabe-zeile {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.assistent-eingabe input[type="text"] {
    flex: 1;
    font-size: 16px;
}

.assistent-bild-knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-muted);
    font-size: var(--fs-lg);
    cursor: pointer;
}

.assistent-bild-knopf:hover {
    background: var(--color-paper);
}

.assistent-bild-vorschau {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
}

.assistent-bild-vorschau img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.assistent-bild-entfernen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: var(--color-danger);
    color: white;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}