:root {
    --color-bg: #f5f6f8;
    --color-surface: #ffffff;
    --color-text: #1f2430;
    --color-muted: #667085;
    --color-border: #e2e5ea;
    --color-primary: #2f6feb;
    --color-primary-hover: #2557c4;
    --color-danger: #d64545;
    --radius: 10px;
    --spacing: 16px;
    /* Höhe der Header-Inhaltszeile (bestimmt aktuell von den 38px-Menü-Icons) -
       dient dem Logo als Bezugsgröße, da eine echte CSS-%-Höhe hier nicht greift
       (Eltern-Elemente haben keine explizite Höhe, nur inhaltsbasierte Auto-Höhe). */
    --header-content-height: 38px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
}

.container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 var(--spacing);
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 768px) {
    .container--wide {
        /* Absichtlich großzügig, damit Tablets (z.B. iPad quer ~1024px) die volle
           Breite nutzen können, statt vorzeitig begrenzt zu werden. */
        max-width: 1100px;
    }
}

@media (min-width: 1200px) {
    .container--wide {
        max-width: 1300px;
    }
}

.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    min-height: var(--header-content-height);
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Logo links, Seitenname (Admin -> Einstellungen) rechts daneben. */
.brand {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    text-decoration: none;
}

/* Logo (Admin -> Einstellungen): auf Header-Höhe begrenzt, Breite proportional. */
.site-logo {
    height: var(--header-content-height);
    width: auto;
}

/* Seitenname: Größe an die Logo-Höhe gekoppelt (skaliert automatisch mit
   --header-content-height mit), fette schmale Blockschrift + Blauton
   angelehnt an das "Travemünder Woche"-Logo. */
.brand-name {
    font-family: "Arial Narrow", "Arial Black", Impact, "Franklin Gothic Bold", sans-serif;
    font-weight: 900;
    font-size: calc(var(--header-content-height) * 0.7);
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #0089cf;
}


.nav {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.9rem;
}

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

/* Mobil: die Begrüßung in der Kopfzeile weglassen - sie steht bereits als
   Willkommens-Karte auf dem Dashboard und würde neben den Menü-Icons drängeln. */
@media (max-width: 767px) {
    .nav-user {
        display: none;
    }
}

.icon-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

.icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--color-muted);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Zähler-Badge am Manager-Menü-Icon (offene Registrierungen), unten rechts. */
.nav-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--color-surface);
}

/* position:absolute würde sonst das hidden-Attribut überschreiben (Autoren-CSS
   schlägt die UA-Regel [hidden]{display:none} bei gleicher Herkunft/Gewichtung
   unabhängig von der Spezifität) - hier explizit wieder ausblenden (siehe JS-
   Aktualisierung der Badges in public/js/app.js). */
.nav-badge[hidden] {
    display: none;
}

.icon-btn:hover,
.icon-btn:focus-visible {
    background: var(--color-bg);
    color: var(--color-primary);
}

/* Menü-Icon des Bereichs, in dem man sich gerade befindet (Dashboard/Manager/Admin). */
.icon-btn--nav-aktiv {
    background: rgba(47, 111, 235, 0.15);
    color: var(--color-primary);
}

.icon-btn--nav-aktiv:hover,
.icon-btn--nav-aktiv:focus-visible {
    background: rgba(47, 111, 235, 0.22);
}

.main {
    padding: 16px 16px 20px;
}

@media (min-width: 480px) {
    .main {
        padding: 24px 16px 48px;
    }
}

/* Manager- und Admin-Bereich sind bewusst nur ab Tablet-Breite (768px) nutzbar -
   die datenlastigen Tabellen/Overlays dort sind auf dem Smartphone nicht sinnvoll
   bedienbar. Auf dem Handy werden die Header-Icons ausgeblendet und die Seite
   zeigt statt des eigentlichen Inhalts nur einen Hinweis. */
.mobile-restricted-notice {
    display: none;
}

@media (max-width: 767px) {
    .icon-nav a[href^="/manager/"],
    .icon-nav a[href^="/admin/"] {
        display: none;
    }

    body.mobile-restricted .main > *:not(.mobile-restricted-notice) {
        display: none;
    }

    body.mobile-restricted .mobile-restricted-notice {
        display: block;
    }
}

.site-footer {
    padding: 12px 16px;
    color: var(--color-muted);
    font-size: 0.85rem;
    text-align: center;
}

@media (min-width: 480px) {
    .site-footer {
        padding: 24px 16px;
    }
}

/* Fläche nur so breit wie der Inhalt (nicht die volle Seitenbreite), mit
   abgerundeten Ecken - wie die Karten und die Tab-Leiste. */
.site-footer > .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px 16px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.footer-links a {
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.85rem;
}

.footer-links a:hover {
    text-decoration: underline;
}

.legal-text {
    line-height: 1.6;
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px;
}

@media (min-width: 480px) {
    .card {
        padding: 24px;
    }
}

h1 {
    font-size: 1.4rem;
    margin-top: 0;
}

.form-group {
    margin-bottom: 16px;
}

label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    color: var(--color-muted);
}

input[type="text"],
input[type="number"],
input[type="time"],
input[inputmode="numeric"] {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
}

select {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--color-text);
}

textarea {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--color-text);
    resize: vertical;
}

.textarea-legal {
    min-height: 240px;
}

/* Vorschau des aktuellen Hintergrundbilds in Admin -> Einstellungen. */
.hintergrundbild-vorschau {
    margin-bottom: 12px;
}

.hintergrundbild-vorschau img {
    max-width: 320px;
    max-height: 180px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    object-fit: contain;
}

input:focus,
textarea:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--color-text);
    cursor: pointer;
    margin-bottom: 0;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    margin-top: 3px;
}

.btn {
    display: inline-block;
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

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

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

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

.btn--danger:hover {
    background: #b53a3a;
}

.card--danger {
    border-color: #f4c7c7;
}

.card--danger h2 {
    color: var(--color-danger);
}

/* Hebt Karten hervor, die eine Aktion des Admins erwarten (z.B. ausstehende Freischaltungen). */
.card--accent {
    border-color: var(--color-primary);
}

.card--accent h1 {
    color: var(--color-primary);
}

.alert {
    padding: 12px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 0.9rem;
    transition: opacity 0.4s ease, margin-bottom 0.4s ease, padding 0.4s ease, max-height 0.4s ease;
    max-height: 200px;
    overflow: hidden;
}

.alert--ausblenden {
    opacity: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    max-height: 0;
}

.label-tooltip {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 4px;
    color: var(--color-muted);
    cursor: help;
}

.alert-info {
    background: #eaf1fd;
    color: var(--color-primary);
    border: 1px solid #c7d9f8;
}

.alert-error {
    background: #fdecec;
    color: var(--color-danger);
    border: 1px solid #f4c7c7;
}

/* Modal-Kopf ohne eigenen Schließen-Button (siehe dashboard.php) - der Hinweis
   muss über "Bestätigen" oder "Notfallnummer löschen" aktiv aufgelöst werden. */
.notfallnummer-hinweis-modal .modal-header,
.nachricht-wichtig-modal .modal-header {
    justify-content: flex-start;
}

/* Wichtig-Meldung (siehe dashboard.php): dicker roter Rand, damit das erzwungene
   Overlay auch optisch sofort als dringend erkennbar ist. */
.nachricht-wichtig-modal {
    border: 4px solid var(--color-danger);
}

.notfallnummer-hinweis-liste {
    margin: 0 0 16px;
    padding-left: 20px;
}

.notfallnummer-hinweis-liste li {
    margin-bottom: 6px;
}

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

.pin-label {
    text-align: center;
    color: var(--color-muted);
    font-size: 0.8rem;
    margin: 0 0 6px;
}

.pin-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 12px;
    margin-bottom: 10px;
}

.pin-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--color-border);
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.pin-dot.filled {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: scale(1.15);
}

.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 200px;
    margin: 0 auto 12px;
}

.keypad-btn {
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.1s ease, transform 0.1s ease, color 0.1s ease;
}

.keypad-btn:active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    transform: scale(0.92);
}

.keypad-btn--action {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    font-size: 1rem;
    color: var(--color-muted);
}

.keypad-btn--action:active {
    background: var(--color-bg);
    color: var(--color-text);
}

@media (min-width: 480px) {
    .pin-label {
        font-size: 0.9rem;
        margin-bottom: 12px;
    }

    .pin-display {
        gap: 14px;
        min-height: 20px;
        margin-bottom: 28px;
    }

    .pin-dot {
        width: 16px;
        height: 16px;
    }

    .keypad {
        gap: 16px;
        max-width: 280px;
        margin: 0 auto 24px;
    }

    .keypad-btn {
        font-size: 1.5rem;
    }

    .keypad-btn--action {
        font-size: 1.2rem;
    }
}

.card + .card {
    margin-top: 20px;
}

/* Dienstplan-Detailansicht: wird inline auf der Seite dargestellt statt als
   Overlay-Popup, damit sie sich wie ein normaler Seitenabschnitt verhält. */
.dienstplan-detail-panel {
    margin-top: 20px;
}

/* Modal-Overlay für "Neu anlegen"/"Bearbeiten"-Formulare (z.B. Benutzer, Einheiten, Auswahlfelder). */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 16px;
    overflow-y: auto;
    z-index: 100;
}

.modal-overlay[hidden] {
    display: none;
}

.modal {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 20px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
    overflow-wrap: break-word;
}

@media (min-width: 480px) {
    .modal {
        padding: 24px;
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.modal-header h2 {
    margin: 0;
}

body.modal-open {
    overflow: hidden;
}

/* Klickbarer Text in Tabellen, der ein Detail-Overlay öffnet (z.B. Dienstplan-Datum). */
.link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
}

.link-button:hover,
.link-button:focus-visible {
    color: var(--color-primary-hover);
}

/* Definitionsliste in Detail-Overlays (Label/Wert-Paare). */
.detail-list {
    margin: 0 0 12px;
}

.detail-list dt {
    font-size: 0.8rem;
    color: var(--color-muted);
    margin-top: 12px;
}

.detail-list dt:first-child {
    margin-top: 0;
}

.detail-list dd {
    margin: 2px 0 0;
    font-size: 1rem;
}

/* Tabellenartige Label/Wert-Anzeige ohne Rahmen (z.B. Bahn-Info im Dienstplan) -
   alle Werte beginnen auf gleicher Höhe, unabhängig von der Label-Länge. */
.info-grid {
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: start;
    column-gap: 8px;
    row-gap: 2px;
    margin: 0;
    font-size: 0.8rem;
}

.info-grid dt {
    font-weight: 600;
    white-space: nowrap;
}

.info-grid dd {
    margin: 0;
    white-space: nowrap;
}

/* "+"-Button für Klassen/Einheiten: statt einer eigenen Spalte sitzt er jetzt
   unten rechts in der jeweiligen Spalte (letztes Element der Zelle). */
/* Wrapper um den Inhalt der Klassen-/Einheiten-Zelle: reserviert unten Platz
   für den absolut positionierten "+"-Button (.spalten-plus). Prozentuale
   Höhen (100%) funktionieren in Tabellenzellen browserübergreifend nicht
   zuverlässig (Zeilenhöhe steht erst nach dem Layout aller Zellen fest) -
   deshalb absolute Positionierung relativ zur Zelle (siehe "position:
   relative" an den <td>-Elementen) statt Flex+margin-top:auto. */
.spalten-inhalt {
    padding-bottom: 26px;
}

.spalten-plus {
    display: flex;
    position: absolute;
    right: 8px;
    bottom: 6px;
}

/* Aktionszeile unter der Bahnen-Tabelle (Übernehmen/Kopieren von Vortag/Leeren) -
   bewusst außerhalb der Tabelle, damit sie über die volle Breite läuft statt an
   die (bei table-layout:fixed feste) erste Spaltenbreite gebunden zu sein. */
.dienstplan-aktionen-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

/* Dashboard: zentrale Anlaufstelle für Helfer. */

/* Kompakte Willkommens-Kachel: weniger Innenabstand und engere Überschrift. */
.dashboard-willkommen {
    padding: 14px 16px;
}

@media (min-width: 480px) {
    .dashboard-willkommen {
        padding: 16px 24px;
    }
}

.dashboard-willkommen h1 {
    margin: 0 0 2px;
    font-size: 1.35rem;
}

.dashboard-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.dashboard-abschnitt {
    margin: 24px 0 12px;
    font-size: 1rem;
    /* Steht direkt auf dem (ggf. hellen/bunten) Seitenhintergrund statt auf
       einer Card-Fläche - dunklerer Text plus Schatten für Lesbarkeit auf
       beliebigem Untergrund. */
    color: var(--color-text);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dashboard-plaene {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* Die Abstände regelt hier das Grid (gap). Ohne diese Ausnahme würde der
   globale ".card + .card"-Abstand die zweite Kachel innerhalb ihrer
   Grid-Zelle nach unten schieben - die Kacheln wirkten dann verschieden groß. */
.dashboard-plaene > .card {
    margin-top: 0;
}

/* PC/Tablet: zwei Karten nebeneinander. Erst ab 768px, weil der Container
   darunter auf 480px begrenzt ist und zwei Spalten dort zu schmal würden. */
@media (min-width: 768px) {
    .dashboard-plaene {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

/* Checkin/Checkout-Kacheln: größerer Abstand zueinander als die übrigen
   Kachel-Paare, damit sie klar als zwei getrennte Aktionen wirken. */
.dashboard-plaene--checkin-checkout {
    gap: 24px;
}

@media (min-width: 768px) {
    .dashboard-plaene--checkin-checkout {
        gap: 32px;
    }
}

.dashboard-status-box {
    margin-top: 16px;
}

.dashboard-status-heading {
    margin: 0 0 8px;
    font-size: 0.9rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dashboard-status-text {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
}

.dashboard-status-text--leer {
    color: var(--color-muted);
}

.dashboard-status-bahn {
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-text);
}

.dashboard-status-bahn--gesperrt {
    color: var(--color-muted);
}

.dashboard-status-trennlinie {
    margin: 12px 0;
    border: none;
    border-top: 1px solid var(--color-border);
}

.dashboard-status-subheading {
    margin: 0 0 6px;
    font-size: 0.8rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dashboard-status-mannschaft {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    line-height: 1.6;
    /* Grid statt Flex pro Zeile: Spalte 1 (Name) so breit wie der längste Name,
       Spalte 2 (In/Out) folgt direkt danach - bei allen Personen an derselben
       Stelle, statt an den rechten Rand gedrückt zu werden. */
    display: grid;
    grid-template-columns: max-content auto;
    column-gap: 12px;
}

.dashboard-status-mannschaft-item {
    display: contents;
}

.dashboard-status-mannschaft-item--ausgecheckt {
    color: var(--color-muted);
}

.dashboard-status-mannschaft-zeiten {
    white-space: nowrap;
}

/* Tür-Icon oben, Text darunter, beides zentriert - abweichend vom normalen
   Kachel-Layout (Icon links, Text rechts), unabhängig von der Bildschirmgröße. */
.dienst-karte--checkin,
.dienst-karte--checkout {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 10px;
}

.dienst-karte {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 0;
    color: inherit;
    text-decoration: none;
}

/* Checkin/Checkout-Kacheln sind <button>-Elemente (die ganze Kachel ist
   klickbar) - Browser-Standardaussehen zurücksetzen, damit sie wie die
   übrigen Kacheln wirken. */
button.dienst-karte {
    width: 100%;
    font: inherit;
    cursor: pointer;
}

a.dienst-karte:hover,
a.dienst-karte:focus-visible,
button.dienst-karte:hover,
button.dienst-karte:focus-visible {
    border-color: var(--color-primary);
    box-shadow: 0 2px 10px rgba(47, 111, 235, 0.15);
}

/* Kachel ist gerade nicht nutzbar (z.B. keine Planung aktiv, nicht
   eingecheckt) - echtes disabled-Attribut, es öffnet sich kein Overlay. */
.dienst-karte--inaktiv {
    opacity: 0.55;
    cursor: not-allowed;
}

.dienst-karte--inaktiv:hover,
.dienst-karte--inaktiv:focus-visible {
    border-color: var(--color-border);
    box-shadow: none;
}

.dienst-karte-icon {
    display: flex;
    flex-shrink: 0;
    padding: 12px;
    border-radius: 50%;
    background: rgba(47, 111, 235, 0.1);
    color: var(--color-primary);
}

.dienst-karte-icon--checkin {
    background: rgba(46, 125, 50, 0.12);
    color: #2e7d32;
}

.dienst-karte-icon--checkout {
    background: rgba(214, 69, 69, 0.12);
    color: var(--color-danger);
}

.dienst-karte-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dienst-karte-datum {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.tagesmeldung-einheit {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
}

/* .hint bringt sonst asymmetrische Außenabstände mit (6px oben, 16px unten),
   die als Flex-Item-Margin die vertikale Zentrierung in der Zeile verschieben. */
.tagesmeldung-einheit .hint {
    margin: 0;
}

/* "+"-Button zum Einplanen/Einchecken: dezenter Rahmen, damit er als eigenes
   Element erkennbar ist statt als bloßes Pluszeichen neben dem Text zu kleben. */
.tagesmeldung-add-btn {
    border: 1px solid var(--color-border);
}

.tagesmeldung-add-btn:hover,
.tagesmeldung-add-btn:focus-visible {
    border-color: var(--color-primary);
}

.tagesmeldung-an-bord {
    color: #2e7d32;
    font-weight: 600;
}

/* Aktionsspalte in Tabellen: mehrere Icon-Buttons/Formulare auf einer Linie. */
.data-table tbody tr td:last-child {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Checkout-Icon in der Ist-Meldung: durchgehend rot statt nur bei Hover. */
.tagesmeldung-checkout-icon {
    color: var(--color-danger);
}

/* Buchungszeiten-Overlay: Liste der Check-in/out-Zeiten einer Person. */
.zeiten-modal-header {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}

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

.zeiten-liste li {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}

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

/* Tagesmeldungs-Vergleich: pro Einheit eine Zeile mit Planung links, Ist-Meldung
   rechts. Beide Seiten iterieren über dieselbe Einheiten-Liste, damit z.B. "35/01"
   links exakt auf gleicher Höhe wie "35/01" rechts steht - klappt eine Seite aus
   (z.B. frühere Checkout-Zeiten), wächst die ganze Zeile mit, da beide Spalten in
   derselben Grid-Zeile stehen. */
.tagesmeldung-kopfzeile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 2px;
}

.tagesmeldung-kopfzeile-spalte {
    padding: 0 20px 4px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
}

.tagesmeldung-kopfzeile-spalte:first-child {
    padding-left: 0;
}

.tagesmeldung-kopfzeile-hinweis {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-muted);
}

.tagesmeldung-zeile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 8px 0;
    border-top: 1px solid var(--color-border);
}

.tagesmeldung-zeile:first-of-type {
    border-top: none;
}

.tagesmeldung-spalte {
    padding: 0 20px;
    min-width: 0;
}

.tagesmeldung-spalte:first-child {
    padding-left: 0;
    padding-right: 20px;
    border-right: 1px solid var(--color-border);
}

.tagesmeldung-spalte:last-child {
    padding-left: 20px;
    padding-right: 0;
}

/* Tagesmeldungen: geplante Personen als Chips unter der jeweiligen Einheit. */
.planung-personen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 4px;
}

/* display:flex würde sonst das hidden-Attribut überschreiben (Autoren-CSS
   schlägt die UA-Regel [hidden]{display:none} bei gleicher Herkunft/Gewichtung
   unabhängig von der Spezifität) - hier explizit wieder ausblenden. */
.planung-personen[hidden] {
    display: none;
}

.planung-person {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.85rem;
}

.planung-leer {
    margin: 0 0 4px;
}

/* Drag & Drop in der Planung: ganze Einheiten-Gruppe ist Ablagefläche. */
.planung-gruppe {
    padding: 2px 6px;
    margin: 0 -6px;
    border-radius: var(--radius);
}

.planung-gruppe.drag-over {
    outline: 2px dashed var(--color-primary);
    outline-offset: -2px;
    background: rgba(47, 111, 235, 0.06);
}

/* Ist-Meldung als Ablagefläche: eine geplante Person kann hierher gezogen
   werden, um sie einzuchecken. */
.tagesmeldung-ist[data-ist-dropzone] {
    border-radius: var(--radius);
}

.tagesmeldung-ist.drag-over {
    outline: 2px dashed var(--color-primary);
    outline-offset: -2px;
    background: rgba(47, 111, 235, 0.06);
}

.planung-person[draggable="true"] {
    cursor: grab;
}

.planung-person.dragging {
    opacity: 0.4;
}

/* Ist-Meldung: ausgecheckte bzw. frühere Aufenthalte gedimmt darstellen. */
.planung-person--ausgecheckt {
    color: var(--color-muted);
    border-style: dashed;
}

/* Ausgeklappter Block ausgecheckter Personen: durch eine Linie von den
   aktiven Personen darüber abgesetzt. */
.tagesmeldung-ausgecheckt-block {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
}

/* "N checkout" neben "N checkin": färbt sich rot, solange die ausgecheckten
   Personen darunter eingeblendet sind. */
.tagesmeldung-checkout-toggle[aria-expanded="true"] {
    color: var(--color-danger);
}

/* Besatzungsliste auf dem Dashboard: Eincheck-Zeit dezent neben dem Namen. */
.besatzung-seit {
    color: var(--color-muted);
    font-size: 0.75rem;
}

/* Nicht wählbare Personen in der Besatzungs-Auswahl (an Bord eines anderen Boots). */
.einheit-check-row--gesperrt {
    opacity: 0.55;
    cursor: not-allowed;
}

.dienst-karte-pdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Mobil: kompakte Kacheln, die nur die "Heute"/"Morgen"-Pille zeigen (Icon
   und Datum sind ausgeblendet, Status nur bei inaktiver Kachel). Beide
   Kacheln haben damit identischen Inhalt und automatisch dieselbe Höhe; bei
   zwei Kacheln teilen sie sich die Seitenbreite exakt zur Hälfte. */
@media (max-width: 767px) {
    .dienst-karte {
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        min-width: 0;
        overflow: hidden;
        padding: 14px 12px;
        text-align: center;
    }

    .dienst-karte-icon,
    .dienst-karte-datum {
        display: none;
    }

    /* Checkin/Checkout-Kacheln zeigen ihre Tür-Icons auch mobil (kein
       Download-Button vorhanden, der sonst statt des Icons stünde). */
    .dienst-karte--checkin .dienst-karte-icon,
    .dienst-karte--checkout .dienst-karte-icon {
        display: flex;
    }

    .dienst-karte-text {
        align-items: center;
        min-width: 0;
    }

    /* "Heute"/"Morgen" als kleine, gut zu treffende "Pille" - etwas breiter,
       da sie jetzt (ohne Status-Text darüber) das einzige Beschriftungselement
       der Kachel ist. */
    .dienst-karte-pdf {
        margin: 0;
        padding: 8px 32px;
        background: var(--color-primary);
        border-radius: 999px;
        color: #ffffff;
        font-size: 0.85rem;
    }

    a.dienst-karte:active .dienst-karte-pdf {
        background: var(--color-primary-hover);
    }

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

/* Gruppiert die Felder einer einzelnen Klassen-Zuordnung im Dienstplan-Overlay,
   damit sich mehrere zugeordnete Klassen einer Bahn optisch voneinander abheben. */
.klasse-zuordnung {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--color-border);
}

.klasse-zuordnung:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

/* Erste Zeile Klasse+Liegeplatz, zweite Zeile Start+WF+TN. Beide Zeilen laufen
   unabhängig voneinander (Flex statt gemeinsamer Grid-Spalten), damit ein langer
   Wert in der ersten Zeile (z.B. Liegeplatz) keine Lücken in der zweiten reißt:
   jedes Label sitzt direkt vor seinem Wert. */
.klasse-felder-grid {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    margin: 0;
    font-size: 0.8rem;
}

.klasse-felder-zeile {
    display: flex;
    align-items: center;
    column-gap: 4px;
    flex-wrap: nowrap;
}

/* Etwas Luft zwischen einem Wert und dem darauf folgenden nächsten Label. */
.klasse-felder-zeile dt:not(:first-child) {
    margin-left: 10px;
}

.klasse-felder-grid dt {
    font-weight: 600;
    white-space: nowrap;
}

.klasse-felder-grid dd {
    margin: 0;
    white-space: nowrap;
}

/* Per Doppelklick editierbare Werte (z.B. Bahn-Infos im Dienstplan-Overlay). */
.editable-display {
    display: inline-block;
    cursor: pointer;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    padding: 2px 10px;
    line-height: 1.4;
}

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

.editable-display[hidden] {
    display: none;
}

.editable-form {
    display: flex;
    align-items: center;
    gap: 4px;
}

.editable-form[hidden] {
    display: none;
}

.editable-form input[type="text"] {
    width: 120px;
    padding: 4px 6px;
    font-size: 0.85rem;
}

.klasse-felder-grid input[type="time"] {
    width: 68px;
    padding: 2px 4px;
    font-size: 0.78rem;
}

/* Breit genug für drei Ziffern plus die Auf/Ab-Pfeile des Zahlenfelds. */
.klasse-felder-grid input[type="number"] {
    width: 62px;
    padding: 2px 4px;
    font-size: 0.78rem;
}

h2 {
    font-size: 1.15rem;
    margin-top: 24px;
    margin-bottom: 12px;
}

/* Themen-Untergliederung innerhalb eines h2-Abschnitts (z.B. Admin -> Einstellungen:
   "Darstellung" als h2, darunter "Seitenname"/"Logo"/... als h3). */
h3 {
    font-size: 1rem;
    margin-top: 20px;
    margin-bottom: 10px;
}

h4 {
    font-size: 0.9rem;
    margin-top: 16px;
    margin-bottom: 8px;
    color: var(--color-muted);
}

/* Trennt Einstellungs-Abschnitte (Admin -> Einstellungen) optisch voneinander. */
.settings-trennlinie {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 28px 0 0;
}

.settings-trennlinie--klein {
    margin-top: 20px;
}

h2:first-child,
h3:first-child {
    margin-top: 0;
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-row .form-group {
    flex: 1;
}

.hint {
    font-size: 0.8rem;
    color: var(--color-muted);
    margin: 6px 0 16px;
}

/* Freundlicher Platzhalter für leere Listen (z.B. "keine offenen Registrierungen"). */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 0;
    color: #1c7a3d;
    text-align: center;
}

.empty-state p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.95rem;
}

.admin-tabs {
    display: flex;
    gap: 4px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 20px;
    padding: 0 8px;
    overflow-x: auto;
}

.admin-tab {
    padding: 10px 16px;
    font-size: 0.9rem;
    color: var(--color-muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.admin-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}

/* Zähler-Badge an einem Tab (z.B. offene Registrierungen), neben dem Label. */
.tab-badge {
    display: inline-block;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--color-danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    vertical-align: middle;
}

/* display:inline-block würde sonst das hidden-Attribut überschreiben (siehe .nav-badge
   oben) - hier explizit wieder ausblenden. */
.tab-badge[hidden] {
    display: none;
}

/* Zweite Tab-Ebene (z.B. Auswahlfelder: Ortsverbände/Bootstypen) als Pills. */
.sub-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.sub-tab {
    padding: 8px 16px;
    font-size: 0.9rem;
    color: var(--color-muted);
    text-decoration: none;
    white-space: nowrap;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

.sub-tab:not(.active):hover,
.sub-tab:not(.active):focus-visible {
    background: var(--color-bg);
    color: var(--color-primary);
}

.sub-tab.active {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
    font-weight: 600;
}

.table-scroll {
    overflow-x: auto;
    margin-bottom: 8px;
}

/* Spaltenbreiten passen sich dem tatsächlichen Inhalt an statt sich starr
   gleichmäßig aufzuteilen (z.B. "Notfallnummer" braucht mehr Platz als
   "Status") - da alle Zellen ohnehin "white-space: nowrap" bekommen (siehe
   unten), gibt es dabei nirgends einen Umbruch. */
.data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 0.9rem;
}

.data-table th,
.data-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

/* Variante mit durchgehenden grauen Linien (z.B. die Bahn-Tabelle im
   Dienstplan-Detail). Volle Breite statt Inhaltsbreite, damit der Inhalt
   innerhalb der Seite umbricht statt eine Scrollbar zu erzeugen. */
.data-table--bordered {
    width: 100%;
    font-size: 0.82rem;
}

/* ".data-table tbody tr td:last-child" (weiter unten) macht die letzte Spalte
   zu einer Flex-Zeile für Aktions-Icons - hier ist die letzte Spalte aber
   "Einheiten" mit mehrzeiligem Inhalt (Liste + "+"-Button), der normal
   untereinander stehen soll statt nebeneinander gequetscht zu werden. */
.data-table--bordered tbody tr td:last-child {
    display: table-cell;
}

.data-table--bordered th,
.data-table--bordered td {
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    white-space: normal;
}

.data-table th {
    color: var(--color-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Sortierbare Spaltenüberschriften: Klick sortiert, kleiner Pfeil zeigt die Richtung. */
.data-table th.sortable-col {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 20px;
}

.data-table th.sortable-col:hover,
.data-table th.sortable-col:focus-visible {
    color: var(--color-primary);
}

.data-table th.sortable-col::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    border: 4px solid transparent;
    opacity: 0.3;
}

.data-table th.sortable-col[data-sort-dir="asc"]::after {
    border-bottom-color: currentColor;
    margin-top: -6px;
    opacity: 1;
}

.data-table th.sortable-col[data-sort-dir="desc"]::after {
    border-top-color: currentColor;
    margin-top: 2px;
    opacity: 1;
}

.actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.inline-form {
    display: inline-flex;
    align-items: center;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

/* .btn ist für volle Formularbreite gedacht (siehe .btn width:100%) - innerhalb von
   .card-header (z.B. "Neue Meldung" neben der Überschrift) soll er sich stattdessen
   an seinen Inhalt anpassen wie ein normaler Button. */
.card-header .btn {
    width: auto;
}

/* Für mehrere Buttons nebeneinander im card-header (z.B. "Archiv" + "Neue Meldung") -
   bewusst kein .button-row (dessen flex:1 die Buttons gleich breit zwingt und den
   Text zum Umbrechen bringen kann). */
.card-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.card-header h1 {
    margin: 0;
}

.status-icon {
    display: inline-flex;
    align-items: center;
}

.status-icon--active {
    color: #1c7a3d;
}

.status-icon--locked {
    color: var(--color-danger);
}

.status-icon--inactive {
    color: var(--color-muted);
}

.button-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.button-row .btn,
.button-row .btn-outline {
    width: auto;
    flex: 1;
}

.btn-outline {
    display: inline-block;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
}

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

.btn-outline--gefahr {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.btn-outline--gefahr:hover {
    background: #fdecec;
}

.notfallnummer-vorschau {
    font-size: 1.1rem;
    margin: 8px 0 16px;
}

.notfallnummer-anzeige {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-outline--sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

/* "Notfallnummer anzeigen" in der Benutzerverwaltung: bewusst auffällig rot,
   da damit sensible Daten offengelegt werden. Ausgegraut/inaktiv, wenn der
   Benutzer keine Notfallnummer hinterlegt hat. */
.btn-danger-sm {
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-danger);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: normal;
    text-align: center;
}

.btn-danger-sm:hover {
    background: #b53a3a;
}

.btn-danger-sm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.notfallnummer-zelle {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.btn-outline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #fff;
}

.qr-preview {
    display: flex;
    justify-content: center;
    margin: 16px 0;
}

.qr-preview img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px;
    background: #fff;
}

/* QR-Code oben rechts auf der Manager-Registrierungsseite: fixe Höhe, wird bei
   Klick vergrößert und mittig angezeigt (siehe .qr-lightbox-modal). Nur sichtbar,
   solange die Registrierung aktiv ist (kein Token/gesperrt => gar nicht gerendert). */
.registrierung-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.registrierung-status {
    flex: 1 1 320px;
}

.registrierung-qr-thumb {
    flex: 0 0 auto;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.registrierung-qr-thumb img {
    display: block;
    height: 150px;
    width: 150px;
    max-width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px;
    background: #fff;
}

.qr-lightbox-modal {
    max-width: min(90vw, 560px);
    text-align: center;
}

.qr-lightbox-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.icon-btn--sm {
    width: 26px;
    height: 26px;
}

.icon-btn--xs {
    width: 22px;
    height: 22px;
}

button.icon-btn {
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
}

.icon-btn--accent {
    color: var(--color-muted);
}

.icon-btn--accent:hover,
.icon-btn--accent:focus-visible {
    background: rgba(47, 111, 235, 0.12);
    color: var(--color-primary);
}

.icon-btn--primary {
    color: var(--color-primary);
}

.icon-btn--primary:hover,
.icon-btn--primary:focus-visible {
    background: rgba(47, 111, 235, 0.12);
    color: var(--color-primary-hover);
}

.icon-btn--warning {
    color: #b7791f;
}

.icon-btn--warning:hover,
.icon-btn--warning:focus-visible {
    background: rgba(183, 121, 31, 0.12);
}

.icon-btn--success {
    color: #1c7a3d;
}

.icon-btn--success:hover,
.icon-btn--success:focus-visible {
    background: rgba(28, 122, 61, 0.12);
}

.icon-btn--danger {
    color: var(--color-muted);
}

.icon-btn--danger:hover,
.icon-btn--danger:focus-visible {
    background: rgba(214, 69, 69, 0.12);
    color: var(--color-danger);
}

.icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.icon-btn--disabled {
    color: var(--color-muted);
    opacity: 0.5;
    cursor: not-allowed;
}

.color-swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    vertical-align: middle;
}

/* Rahmenlose Liste der zugeordneten Einheiten im Dienstplan-Overlay:
   Nr. | Einheit | Entfernen. Reihenfolge ist per Ziehen und Loslassen änderbar. */
.data-table--plain {
    width: auto;
    border-collapse: collapse;
}

.data-table--plain td {
    border: none;
    padding: 3px 6px;
    vertical-align: middle;
}

.data-table--plain tr[draggable="true"] {
    cursor: grab;
}

.data-table--plain tr.dragging {
    opacity: 0.4;
}

.data-table--plain td:first-child {
    padding-left: 0;
}

.einheit-nr {
    color: var(--color-muted);
    text-align: right;
    white-space: nowrap;
}

.einheit-nr--erste {
    color: var(--color-danger);
    font-weight: 700;
}

/* Kleiner, nicht-verkleinerungs-transformierter Zusatzhinweis in Spaltenüberschriften. */
.col-hint {
    font-weight: 400;
    font-size: 0.85em;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-muted);
}

/* "Wichtiges"-Spalte im Dienstplan-Overlay: das Textfeld füllt die gesamte
   Höhe der Zeile aus (auch leer), damit genug Platz zum Schreiben da ist. */
.wichtiges-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
}

.wichtiges-textarea {
    flex: 1 1 auto;
    width: 100%;
    min-height: 60px;
    resize: vertical;
    box-sizing: border-box;
    padding: 4px 6px;
    font: inherit;
    font-size: 0.78rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

/* Info-Text im Dienstplan (siehe Info-Button neben "Eintrag anlegen"): volle
   Seitenbreite, feste Höhe - wird später zusammen mit dem Detail-Dienstplan
   in einem PDF angezeigt. */
.dienstplan-info-textarea {
    display: block;
    width: 100%;
    height: 400px;
    box-sizing: border-box;
    resize: vertical;
    padding: 12px;
    font: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.einheit-aktionen {
    white-space: nowrap;
}

.einheit-aktionen .inline-form {
    display: inline-block;
}

.einheit-chip {
    display: inline-block;
    padding: 3px 8px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.einheit-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 16px;
    padding: 4px;
}

.einheit-check-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    cursor: pointer;
}

.einheit-check-row input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* Hinweise wie "geplant für ..." in der Auswahlzeile: ohne die üblichen
   .hint-Außenabstände, damit sie sauber mittig neben dem Namen stehen. */
.einheit-check-row .hint {
    margin: 0;
}

.btn-secondary {
    display: inline-block;
    margin-left: 8px;
    padding: 12px;
    color: var(--color-muted);
    text-decoration: none;
}

.alert-success {
    background: #e8f7ee;
    color: #1c7a3d;
    border: 1px solid #bfe6cc;
}

/* Stufen-Badge einer Meldung (Manager -> Meldungen), Farben wie bei .alert-success/
   .icon-btn--warning/.alert-error für Konsistenz mit dem Rest der Oberfläche. */
.badge-stufe {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-stufe--info {
    background: #e8f7ee;
    color: #1c7a3d;
}

.badge-stufe--warnung {
    background: #fdf3dd;
    color: #b7791f;
}

.badge-stufe--wichtig {
    background: #fdecec;
    color: var(--color-danger);
}

/* Liste auf /nachrichten.php und im Manager-Posteingang - neueste oben, ein Kasten
   je Meldung. Auf /nachrichten.php ist die Zeile ein Button (öffnet ein Modal mit
   dem vollen Text, siehe data-toggle-target), im Posteingang ein einfacher Kasten. */
.nachrichten-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nachrichten-eintrag {
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Klickbare Variante (siehe /nachrichten.php): Innen-Abstand kommt vom Button
   selbst, damit dessen Klickfläche die ganze Zeile abdeckt statt nur den Text. */
.nachrichten-eintrag--klickbar {
    padding: 0;
}

.nachrichten-eintrag-button {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.nachrichten-eintrag-button:hover,
.nachrichten-eintrag-button:focus-visible {
    background: var(--color-bg);
}

.nachrichten-eintrag-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.nachrichten-eintrag-titel {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nachrichten-eintrag-kopf .hint {
    flex-shrink: 0;
}

.nachrichten-eintrag p {
    margin: 0 0 8px;
}

.nachrichten-eintrag .btn {
    margin-top: 4px;
}

/* Ungelesene Posteingang-Nachricht (Manager -> Meldungen -> Posteingang). */
.nachrichten-eintrag--ungelesen {
    background: #eaf1fd;
    border-color: #c7d9f8;
}

.punkt-ungelesen {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    vertical-align: middle;
}

/* Detail-Modal einer einzelnen Meldung (siehe nachrichten.php). */
.nachricht-detail-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.nachricht-detail-text {
    margin-bottom: 4px;
}

.nachricht-detail-aktion {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.nachricht-detail-aktion p.hint {
    margin: 0;
}

.button-row.nachricht-detail-aktion {
    justify-content: flex-end;
}