/* ===================================================================
   Ticketsystem - Gestaltung
   Ruhige, arbeitsorientierte Oberflaeche. Die Bereichsfarbe ist das
   durchgaengige Erkennungsmerkmal: sie markiert, in wessen Auftrag man
   gerade arbeitet - in Navigation, Karten und Kopfzeilen.
   =================================================================== */

:root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --border: #e2e5ea;
    /*
     * Rahmen von Eingabefeldern brauchen 3:1 gegen den Hintergrund
     * (WCAG 1.4.11). Der helle Trennrahmen oben genügt dafür nicht -
     * er trennt Flächen, umrandet aber keine Bedienelemente.
     */
    --border-control: #767e8a;
    --border-strong: #cbd1da;
    --text: #1c1f24;
    --text-muted: #646b76;
    --accent: #2f5fd0;
    --accent-dark: #23499f;
    --danger: #b3261e;
    --success: #14683b;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(20, 24, 31, .06), 0 1px 8px rgba(20, 24, 31, .04);
    --sidebar-w: 248px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 600; }
a { color: var(--accent); }

/* ---------- Grundgeruest ---------- */

.shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
    position: sticky;
    top: 0;
    /* dvh berücksichtigt die einklappbare Leiste mobiler Browser;
       vh bleibt als Rückfall für ältere Browser stehen. */
    height: 100vh;
    height: 100dvh;
    min-height: 0;
}

/*
 * Der Menübereich bekommt einen eigenen Bildlauf. Ohne das wurden bei
 * vielen Bereichen die unteren Einträge abgeschnitten - die Seitenleiste
 * ist auf Bildschirmhöhe festgelegt und kann nicht mitwachsen.
 */
.sidebar > .nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Platz für den Rollbalken, damit er den Text nicht überdeckt */
    margin-right: -6px;
    padding-right: 6px;
    /* Dezenter Rollbalken, damit er die Leiste nicht dominiert */
    scrollbar-width: thin;
    scrollbar-color: #ccd2da transparent;
}
.sidebar > .nav::-webkit-scrollbar { width: 7px; }
.sidebar > .nav::-webkit-scrollbar-thumb { background: #ccd2da; border-radius: 4px; }
.sidebar > .nav::-webkit-scrollbar-thumb:hover { background: #b6bec9; }
.sidebar > .nav::-webkit-scrollbar-track { background: transparent; }

/* Kopf und Fuß bleiben stehen, nur die Mitte rollt */
.sidebar > .brand,
.sidebar > .sidebar-foot,
.sidebar > .sidebar-operator,
.sidebar > .sidebar-version {
    flex: 0 0 auto;
}

/*
 * Sind sehr viele Bereiche angelegt, bekommt auch die Bereichsliste
 * innerhalb des Menüs eine eigene Grenze - sonst schiebt sie die
 * Verwaltungspunkte aus dem sichtbaren Bereich.
 */
.nav-group .nav-sub {
    max-height: 44vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.brand {
    font-weight: 650;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: var(--text);
    text-decoration: none;
    padding: 4px 10px 18px;
}

.nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }

.nav-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin: 18px 10px 6px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 7px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
}

.nav-item:hover { background: #eef0f4; }

.area-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dot, var(--accent));
    flex: 0 0 auto;
}

.area-dot-lg { width: 14px; height: 14px; }

.sidebar-foot {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 7px;
    text-decoration: none;
    color: var(--text);
}

.user-chip:hover { background: #eef0f4; }

.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 600;
}

.user-meta { display: flex; flex-direction: column; line-height: 1.3; overflow: hidden; }
.user-meta strong { font-size: 13px; font-weight: 600; }
.user-meta small { font-size: 11px; color: var(--text-muted); }

.main { padding: 30px 34px 60px; max-width: 1180px; }

/* ---------- Seitenkopf ---------- */

.page-head { margin-bottom: 22px; }
.page-head h1 { font-size: 24px; letter-spacing: -0.015em; }
.page-sub { color: var(--text-muted); margin: 5px 0 0; font-size: 14px; }

.area-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--area, var(--accent));
}

/* ---------- Karten ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px;
    margin-bottom: 18px;
}

.card-title {
    font-size: 12px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.sub-title { font-size: 14px; margin: 22px 0 10px; }

.two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    align-items: start;
}

.empty-state { color: var(--text-muted); }
.empty-state h2 { font-size: 16px; color: var(--text); margin-bottom: 6px; }

/* ---------- Bereichsuebersicht ---------- */

.area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.area-card {
    position: relative;
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 20px 18px;
    text-decoration: none;
    color: var(--text);
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}

.area-card:hover {
    box-shadow: 0 2px 4px rgba(20,24,31,.08), 0 6px 18px rgba(20,24,31,.09);
    transform: translateY(-1px);
}

.area-card-bar {
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--area, var(--accent));
}


.area-stats { display: flex; gap: 26px; margin: 0 0 16px; }
.area-stats dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.area-stats dd { margin: 2px 0 0; font-size: 22px; font-weight: 600; }

.area-card-go { font-size: 13px; color: var(--area, var(--accent)); font-weight: 550; }

.hint { color: var(--text-muted); font-size: 13px; margin-top: 16px; }

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

.field { margin-bottom: 14px; }
.field-narrow { max-width: 90px; }

.field label, .field legend {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

input[type="text"], input[type="email"], input[type="password"],
input[type="datetime-local"], select, textarea {
    width: 100%;
    padding: 8px 11px;
    /* Kräftiger Rahmen, damit Felder auf Weiss erkennbar bleiben (1.4.11) */
    border: 1px solid var(--border-control);
    border-radius: 7px;
    font: inherit;
    color: var(--text);
    background: #fff;
}

input[disabled] { background: #f1f2f5; color: var(--text-muted); }

input[type="color"] {
    width: 44px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: #fff;
}

.field-hint { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; }

/* Gruppierte Auswahl mit eigenem Rahmen statt dem des Browsers */
fieldset.field { border: 1px solid var(--border); border-radius: var(--radius); padding: 0; margin: 0 0 14px; }

.checkbox {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 4px;
    /* Die ganze Zeile ist die Klickfläche und misst mindestens 24 px (2.5.8). */
    min-height: 24px;
}

.checkbox input { margin: 0; }

.inline-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.inline-form .field { margin-bottom: 0; }
.actions { margin-top: 14px; }

/* ---------- Schaltflaechen ---------- */

.button {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-weight: 550;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}

.button:hover { background: #f3f4f7; }

.button-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.button-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.button-danger {
    background: #B42318; border-color: #B42318; color: #fff;
}
.button-danger:hover { background: #912018; border-color: #912018; }

.button-block { display: block; width: 100%; text-align: center; }

.link-button {
    background: none;
    border: 0;
    padding: 4px 0;
    color: var(--accent);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
}

.link-button.danger { color: var(--danger); }
.link-button:hover { text-decoration: underline; }

/* ---------- Listen und Zeilen ---------- */

.rows { display: flex; flex-direction: column; }

.row-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.row-item:first-child { border-top: 0; }

.accordion {
    border-top: 1px solid var(--border);
    padding: 4px 0;
}

.accordion:first-of-type { border-top: 0; }

.accordion summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 4px;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    flex-wrap: wrap;
}

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

.accordion summary::before {
    content: "›";
    color: var(--text-muted);
    font-size: 17px;
    transition: transform .15s ease;
    display: inline-block;
}

.accordion[open] summary::before { transform: rotate(90deg); }

.accordion-body { padding: 8px 4px 18px 22px; }

.divider { height: 1px; background: var(--border); margin: 18px 0; }

.badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e7edfb;
    color: var(--accent-dark);
}

.badge-muted { background: #eceef1; color: var(--text-muted); }

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }

.tag {
    font-size: 13px;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--area, var(--accent));
}

.muted { color: var(--text-muted); }
.small { font-size: 12px; }
.right { margin-left: auto; }

/* ---------- Meldungen ---------- */

.flash {
    padding: 11px 15px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    border: 1px solid;
}

.flash-success { background: #e9f6ee; border-color: #bfe3cd; color: var(--success); }
.flash-error { background: #fdecea; border-color: #f5c4bf; color: var(--danger); }

/* ---------- Anmeldeseite ---------- */

body.bare {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 24px;
}

.bare-panel {
    width: 100%;
    max-width: 390px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 30px 30px 34px;
}

.bare-brand {
    font-size: 12px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin: 0 0 18px;
}

.bare-title { font-size: 21px; margin-bottom: 6px; }
.bare-lead { color: var(--text-muted); font-size: 14px; margin: 0 0 20px; }
.bare-form { margin-top: 18px; }
.bare-form .button { margin-top: 6px; }

/* ---------- Kleinere Bildschirme ---------- */

@media (max-width: 860px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; flex-direction: column; }
    .main { padding: 22px 18px 50px; }
    .field-row { grid-template-columns: 1fr; }
}

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

/* ===================================================================
   Etappe 2: Tickets, Board, Konfiguration
   =================================================================== */

.head-actions { margin-left: auto; display: flex; gap: 8px; }
.area-head-text { min-width: 0; }
.area-head-text .page-sub a { color: var(--text-muted); text-decoration: none; }
.area-head-text .page-sub a:hover { text-decoration: underline; }

/* Werkzeugleiste: siehe weiter unten, Abschnitt „Suchfeld und Knöpfe" */
.filter-form { margin-left: auto; }
.filter-form select, .filter-form input[type="search"] { padding: 6px 10px; font-size: 14px; width: auto; }

.chip {
    display: inline-block; padding: 5px 13px; border-radius: 999px;
    border: 1px solid var(--border-strong); background: #fff;
    color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 550;
}
.chip:hover { background: #f1f3f6; }
.chip-active { background: var(--text); border-color: var(--text); color: #fff; }

/* Board */
.board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 10px; }
.board-column {
    flex: 1 0 262px; background: #eef0f4; border-radius: var(--radius);
    padding: 12px; border-top: 3px solid var(--col, var(--accent));
}
.board-column-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.board-column-head h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.board-column-head .count { font-size: 12px; color: var(--text-muted); }
.board-dropzone { min-height: 60px; display: flex; flex-direction: column; gap: 8px; }
.board-dropzone.drag-over { outline: 2px dashed var(--accent); outline-offset: 3px; border-radius: 8px; }

.ticket-card {
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    padding: 11px 12px; box-shadow: var(--shadow); cursor: grab;
}
.ticket-card.dragging { opacity: .45; }
.ticket-card-title { display: block; font-weight: 550; color: var(--text); text-decoration: none; margin: 6px 0; font-size: 14px; }
.ticket-card-title:hover { color: var(--accent); }
.ticket-card-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; }

.pill {
    display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px;
    border-radius: 999px; background: var(--pill, var(--text-muted));
    /* Schriftfarbe wird zur Farbe berechnet (View::lesbareSchrift); der
       Rückfall bleibt Weiss für die festen Farben im Quelltext. */
    color: var(--pill-text, #fff);
}

.overdue { color: var(--danger); font-weight: 600; }

/* Tabellen */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-muted); padding: 0 10px 9px; border-bottom: 1px solid var(--border);
}
.data-table td { padding: 11px 10px; border-bottom: 1px solid var(--border); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tr.is-muted td { opacity: .55; }
.data-table a { text-decoration: none; font-weight: 550; }
.data-table a:hover { text-decoration: underline; }
.right-align { text-align: right; }
.inline-block { display: inline-block; }

/* Ticket-Formular */
.title-input { font-size: 18px; font-weight: 550; }
.editor-grid { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 18px; align-items: start; }
.actions-card { display: flex; gap: 10px; align-items: center; }

.link-list { list-style: none; margin: 6px 0 0; padding: 0 0 0 18px; }
.link-list li { margin-bottom: 5px; padding: 3px 0; word-break: break-all; font-size: 13.5px; }
.link-list a { word-break: break-all; font-size: 13px; }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border);
}
.checklist li:last-child { border-bottom: 0; }
.checklist li.checked span { text-decoration: line-through; color: var(--text-muted); }
.checklist-toggle { flex: 1; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--border); }
.timeline li { position: relative; padding: 0 0 14px 14px; font-size: 13px; }
.timeline li::before {
    content: ""; position: absolute; left: -21px; top: 5px; width: 8px; height: 8px;
    border-radius: 50%; background: var(--border-strong);
}
.timeline-meta { color: var(--text-muted); font-size: 12px; }

.danger-zone { border-color: #f0d4d2; }

/* (ältere .icon-button-Regel entfernt – die spätere galt ohnehin) */
.icon-button:hover:not([disabled]) { background: #f1f3f6; color: var(--danger); }
.icon-button[disabled] { opacity: .3; cursor: default; }

/* Konfigurationsseiten */
.config-rows { display: flex; flex-direction: column; }
.config-row {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 11px 0; border-bottom: 1px solid var(--border);
}
.config-row:last-child { border-bottom: 0; }
.config-row-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.grow { flex: 1; min-width: 140px; }

.template-list { list-style: none; margin: 0 0 12px; padding: 0; }
.template-list li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}

.placeholder-list { margin: 0 0 16px; }
.placeholder-list > div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 6px 0; font-size: 13px; }
.placeholder-list dt code { background: #eef0f4; padding: 2px 6px; border-radius: 4px; font-size: 12px; }
.placeholder-list dd { margin: 0; color: var(--text-muted); }

@media (max-width: 900px) {
    .editor-grid { grid-template-columns: 1fr; }
    .filter-form { margin-left: 0; width: 100%; flex-wrap: wrap; }
    .placeholder-list > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Kennzeichnung bevorzugter Bereiche */
.priority-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .03em;
    padding: 3px 9px;
    border-radius: 999px;
    background: #fdf3d8;
    color: #8a5a00;
    border: 1px solid #f0dda8;
    vertical-align: middle;
    margin-bottom: 6px;
}
.area-head-text h1 .priority-tag { margin-left: 8px; margin-bottom: 0; }

/* Fortschritt der Checkliste */
.card-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.progress-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.progress-label.complete { color: var(--success); }
.progress-bar {
    height: 6px; background: #e6e9ee; border-radius: 999px;
    overflow: hidden; margin: 4px 0 14px;
}
.progress-bar span {
    display: block; height: 100%; background: var(--accent);
    border-radius: 999px; transition: width .2s ease;
}
.progress-bar span.complete { background: var(--success); }
.check-count { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.check-count.complete { color: var(--success); }

/* ===================================================================
   Mobil: eigene Navigation, Board scrollt seitlich, Tabellen brechen um
   =================================================================== */

.mobile-bar { display: none; }

@media (max-width: 860px) {
    /* Kopfleiste mit Menüschalter statt fester Seitenleiste */
    .mobile-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 16px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 20;
    }
    .mobile-bar .brand { padding: 0; font-size: 15px; }
    .menu-toggle {
        /* Ohne Skript nutzlos - dort steht das Menü ohnehin offen (siehe unten). */
        display: none;
        border: 1px solid var(--border-strong);
        background: #fff;
        border-radius: 7px;
        padding: 7px 12px;
        font: inherit;
        font-size: 14px;
        cursor: pointer;
        min-height: 40px;
    }

    .shell { display: block; }

    .sidebar {
        position: static;
        height: auto;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        padding: 12px 14px 18px;
    }
    /*
     * Ohne Skript bleibt das Menü einfach sichtbar und steht untereinander -
     * sonst gäbe es auf dem Telefon gar keine Navigation. Verstecken und
     * Aufklappen übernimmt erst das Skript.
     */
    .js .sidebar { display: none; }
    .js .menu-toggle { display: block; }

    /*
     * Aufgeklappt liegt das Menü fest am Bildschirm, direkt unter der
     * klebenden Kopfleiste. Vorher stand es im Seitenfluss ganz oben: Wer
     * weiter unten auf „Menü" drückte, sah nichts, und der Inhalt sprang um
     * die Höhe des Menüs nach unten.
     */
    .js .sidebar.open {
        display: flex;
        position: fixed;
        top: var(--mobile-bar-h, 61px);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 19;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-bottom: 0;
        box-shadow: 0 10px 24px rgba(17, 24, 39, .14);
    }
    /*
     * Solange das Menü offen ist, rollt der Inhalt dahinter nicht mit.
     * Die Kopfleiste muss dabei fest verankert werden: „overflow: hidden"
     * nimmt „position: sticky" den Bezugsrahmen, die Leiste rutschte sonst
     * mitsamt dem Schalter zum Schliessen aus dem Bild.
     */
    .nav-offen, .nav-offen body { overflow: hidden; }
    .nav-offen .mobile-bar { position: fixed; top: 0; left: 0; right: 0; }

    /*
     * Der Bildlauf liegt am Menü selbst, nicht an der Liste darin - sonst
     * gäbe es im Auszug zwei ineinanderliegende Bildläufe.
     *
     * „flex: 0 0 auto" ist dabei entscheidend: Am Rechner darf die Liste
     * schrumpfen, weil sie einen eigenen Bildlauf hat. Hier hat sie keinen,
     * und geschrumpft lief ihr Inhalt einfach über - der letzte Menüpunkt
     * lag dann unter dem Benutzerblock am Fuß.
     */
    .sidebar > .nav {
        overflow-y: visible;
        max-height: none;
        margin-right: 0;
        padding-right: 0;
        flex: 0 0 auto;
        min-height: auto;
    }
    .nav-group .nav-sub { max-height: none; overflow-y: visible; }
    .sidebar > .brand { display: none; }

    .nav-item, .user-chip { min-height: 44px; }

    .main { padding: 18px 16px 48px; max-width: none; }

    .page-head h1 { font-size: 20px; }
    .area-head { flex-wrap: wrap; }
    /*
     * Die Knöpfe der Bereichsseite (Favorit, Neues Ticket, CSV, Drucken,
     * Einstellungen) brauchen nebeneinander mehr Platz als das Telefon hat -
     * die Seite liess sich dadurch 82 px zur Seite schieben. Jetzt brechen
     * sie um, zwei je Zeile.
     */
    .head-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
    .head-actions .button { flex: 1 1 auto; min-width: 45%; text-align: center; }

    /* Werkzeugleiste umbrechen, Filter volle Breite */
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar-group { flex-wrap: wrap; }
    .filter-form { flex-direction: column; align-items: stretch; width: 100%; }
    .filter-form select,
    .filter-form input[type="search"],
    .filter-form .button { width: 100%; min-height: 44px; }

    /* Board seitlich scrollbar, Spalten schmaler */
    .board {
        margin: 0 -16px;
        padding: 0 16px 12px;
        scroll-snap-type: x mandatory;
    }
    .board-column { flex: 0 0 82%; scroll-snap-align: start; }

    /* Ziehen funktioniert auf Touch nicht zuverlässig - Hinweis einblenden */
    .board-hint { display: block; }

    /* Karten und Formulare */
    .card { padding: 16px; border-radius: 8px; }
    .editor-grid { grid-template-columns: 1fr; }
    .editor-grid aside { order: -1; }
    .actions-card { position: sticky; bottom: 12px; z-index: 10; }
    .actions-card .button { flex: 1; text-align: center; min-height: 44px; }

    /* Eingaben: 16px verhindert das Zoomen in iOS beim Antippen */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="search"], input[type="date"], input[type="datetime-local"],
    select, textarea {
        font-size: 16px;
        min-height: 44px;
    }
    textarea { min-height: 90px; }

    .button, .link-button { min-height: 44px; }
    .inline-form { flex-direction: column; align-items: stretch; }
    .inline-form .button { width: 100%; }

    /* Tabellen als Kacheln stapeln */
    .data-table thead { display: none; }
    .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
    .data-table tr {
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 10px 12px;
        margin-bottom: 10px;
    }
    .data-table td { border: 0; padding: 4px 0; }
    .data-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-muted);
    }
    .data-table td.right-align { text-align: left; padding-top: 10px; }

    /* Konfigurationszeilen untereinander */
    .config-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .config-row-actions { margin-left: 0; flex-wrap: wrap; }
    .config-row .inline-form input[type="color"] { width: 100%; }

    .area-grid { grid-template-columns: 1fr; }
    .two-col { grid-template-columns: 1fr; }
    .accordion summary { padding: 12px 4px; }
    .right { margin-left: 0; width: 100%; }
    .bare-panel { padding: 24px 20px 28px; }
}

@media (max-width: 420px) {
    .main { padding: 14px 12px 44px; }
    .board-column { flex: 0 0 88%; }
    .page-head h1 { font-size: 18px; }
}

.board-hint {
    display: none;
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 10px;
}

/* Dateianhänge */
.file-list { list-style: none; margin: 0; padding: 0; }
.file-list li {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border);
}
.file-list li:last-child { border-bottom: 0; }
.file-info { display: flex; flex-direction: column; min-width: 0; }
.file-info a { font-weight: 550; text-decoration: none; word-break: break-all; }
.file-info a:hover { text-decoration: underline; }
.file-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
input[type="file"] {
    width: 100%; padding: 9px; border: 1px dashed var(--border-strong);
    border-radius: 7px; background: #fbfbfc; font: inherit; font-size: 14px;
}

/* Matrix der Benachrichtigungen */
.table-scroll { overflow-x: auto; }
.matrix-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }
.matrix-table th, .matrix-table td {
    padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: center;
}
.matrix-table thead th {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); font-weight: 600;
}
.matrix-table tbody th { text-align: left; font-weight: 550; }
.checkbox-center { justify-content: center; margin: 0; }
.code-block {
    display: block; background: #eef0f4; padding: 9px 11px; border-radius: 6px;
    font-size: 12px; word-break: break-all;
}

@media (max-width: 860px) {
    .file-list li { flex-direction: column; align-items: flex-start; }
    .file-actions { width: 100%; justify-content: space-between; }
}

/* Kommentare */
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment {
    padding: 12px 0; border-bottom: 1px solid var(--border);
}
.comment:last-child { border-bottom: 0; }
.comment-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.comment-body { margin: 0; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.comment-actions { display: flex; gap: 12px; margin-top: 6px; }
.comment-edit-form { margin-top: 10px; }
.bare-foot { margin-top: 16px; text-align: center; font-size: 13px; }

/* Zwei-Faktor-Anmeldung */
.code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 20px;
    letter-spacing: .18em;
    text-align: center;
}
.secret-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 17px;
    letter-spacing: .08em;
    background: #eef0f4;
    padding: 12px 14px;
    border-radius: 8px;
    word-break: break-all;
    user-select: all;
}
.code-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    margin: 16px 0;
    padding: 0;
}
.code-grid li {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: #eef0f4;
    padding: 9px 12px;
    border-radius: 6px;
    text-align: center;
    letter-spacing: .05em;
    user-select: all;
}
.status-on { color: var(--success); font-weight: 550; }

@media print {
    .sidebar, .mobile-bar, .button, .page-head .page-sub { display: none !important; }
    .code-grid li { border: 1px solid #999; }
}

/* QR-Code bei der Einrichtung */
.qr-block {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.qr-image {
    flex: 0 0 auto;
    line-height: 0;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.qr-image svg { display: block; max-width: 100%; height: auto; }
.qr-text { flex: 1 1 220px; min-width: 200px; }
.qr-text p { margin-top: 0; }

/* Kommentare in der rechten Spalte */
.editor-grid aside .comment-list { max-height: 520px; overflow-y: auto; }
.editor-grid aside .comment { padding: 10px 0; }
.editor-grid aside .comment-body { font-size: 14px; }
.editor-grid aside .comment-head { font-size: 13px; }

@media (max-width: 900px) {
    .qr-block { justify-content: center; }
    .editor-grid aside .comment-list { max-height: none; }
}

/* Bereichsübergreifende Suche */
.search-card { padding: 16px 20px; }
.search-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.search-row .field { margin-bottom: 0; }
.area-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text); }
.area-link:hover { text-decoration: underline; }
.pill-muted { background: #e6e9ee; color: var(--text-muted); }

/* Zeiterfassung */
.time-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.time-list { list-style: none; margin: 0; padding: 0; }
.time-list li {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border);
}
.time-list li:last-child { border-bottom: 0; }
.time-list li.is-billed { opacity: .65; }
.time-main { min-width: 0; }
.time-note { font-size: 13px; color: var(--text-muted); margin-top: 2px; word-break: break-word; }
.time-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.time-open { color: #B45309; }
.data-table tfoot th { border-top: 2px solid var(--border-strong); padding: 10px; text-align: left; font-size: 13px; }

/* Vorlagen */
.template-choices { display: flex; gap: 10px; flex-wrap: wrap; }
.template-chip {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 14px; border: 1px solid var(--border-strong);
    border-radius: 8px; text-decoration: none; color: var(--text); background: #fff;
}
.template-chip:hover { background: #f3f4f7; }
.template-chip.is-active { border-color: var(--accent); background: #eef3fd; }

@media (max-width: 860px) {
    .search-row { flex-direction: column; align-items: stretch; }
    .search-row .button { width: 100%; }
    .time-list li { flex-direction: column; }
    .time-actions { width: 100%; justify-content: flex-end; }
    .template-chip { width: 100%; }
}

/* ===================================================================
   Navigation mit aufklappbaren Gruppen
   =================================================================== */

.nav-group { margin: 6px 0 2px; }
.nav-group > summary {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 7px; cursor: pointer;
    font-size: 14px; list-style: none; color: var(--text);
    width: 100%; box-sizing: border-box;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::before {
    content: "›"; color: var(--text-muted); font-size: 16px;
    display: inline-block; transition: transform .15s ease; width: 10px;
    flex: 0 0 auto;
}
.nav-group[open] > summary::before { transform: rotate(90deg); }
.nav-group > summary:hover { background: #eef0f4; }
.nav-group-label { flex: 1 1 auto; min-width: 0; }
/* Zugeklappt: Zahlen am Gruppenkopf. Aufgeklappt: nur an den Einträgen. */
.nav-group[open] > summary > .nav-badges { display: none; }
.nav-sub { padding-left: 12px; border-left: 1px solid var(--border); margin-left: 14px; }
.nav-sub .nav-item { font-size: 13.5px; padding: 6px 10px; }
.nav-item.is-current { background: #e7edfb; color: var(--accent-dark); font-weight: 550; }

/* ===================================================================
   Startseite: Bereichsgruppen und Statuszahlen
   =================================================================== */

.area-group { margin-bottom: 20px; }
.area-group > summary {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 2px; cursor: pointer; list-style: none;
    border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
.area-group > summary::-webkit-details-marker { display: none; }
.area-group > summary::before {
    content: "›"; color: var(--text-muted); font-size: 17px;
    transition: transform .15s ease; display: inline-block;
}
.area-group[open] > summary::before { transform: rotate(90deg); }
.area-group-title {
    font-size: 12px; font-weight: 650; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-muted);
}

.area-search { flex: 1; gap: 8px; }
.area-search input[type="search"] { max-width: 320px; }

.area-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.area-card h2 a { color: var(--text); text-decoration: none; }
.area-card h2 a:hover { color: var(--accent); }
.area-card-numbers { display: flex; gap: 6px; flex: 0 0 auto; }
.area-number {
    min-width: 34px; text-align: center; padding: 3px 8px;
    border-radius: 7px; background: #eef0f4; font-weight: 650; font-size: 15px;
}
.area-number.is-overdue { background: #fdecea; color: var(--danger); }

.status-bars { list-style: none; margin: 14px 0 0; padding: 0; }
.status-bars li { border-top: 1px solid var(--border); }
.status-bars li a {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 0; text-decoration: none; color: var(--text); font-size: 13px;
}
.status-bars li.is-empty a { color: var(--text-muted); }
.status-bars .status-name { flex: 1; }
.status-bars .status-count { font-weight: 600; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); flex: 0 0 auto; }

.area-card-actions {
    display: flex; align-items: center; gap: 12px;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
.area-card.is-compact .area-card-actions { margin-top: 10px; padding-top: 10px; }

.chip-status { display: inline-flex; align-items: center; gap: 6px; }
.status-filter { flex-wrap: wrap; }

/* Zeitangabe an Karten */
.time-chip {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 12px; color: var(--text-muted);
}
.time-chip.is-open { color: #B45309; font-weight: 600; }

@media (max-width: 860px) {
    .area-search { width: 100%; }
    .area-search input[type="search"] { max-width: none; }
    .area-card-head { flex-direction: column; gap: 8px; }
    .area-card-numbers { align-self: flex-start; }
    .nav-sub { margin-left: 8px; padding-left: 8px; }
    .status-filter { gap: 6px; }
}

/* ===================================================================
   Übersicht: Kennzahlen, Aufmerksamkeitsliste, Bereichskacheln
   =================================================================== */

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.stat {
    display: flex; flex-direction: column; gap: 2px;
    padding: 16px 18px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    text-decoration: none; color: var(--text); box-shadow: var(--shadow);
    transition: border-color .12s ease, transform .12s ease;
}
.stat:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.stat strong { font-size: 26px; font-weight: 650; line-height: 1.1; }
.stat span { font-size: 12.5px; color: var(--text-muted); }
.stat.is-alert strong { color: var(--danger); }
.stat.is-alert { border-color: #f3cfcb; background: #fffaf9; }
.stat.is-time strong { font-size: 21px; color: #B45309; }

.attention-card { border-left: 3px solid var(--danger); }
.attention-list { list-style: none; margin: 0; padding: 0; }
.attention-list li {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 9px 0; border-bottom: 1px solid var(--border);
}
.attention-list li:last-child { border-bottom: 0; }
.attention-title { font-weight: 550; text-decoration: none; color: var(--text); }
.attention-title:hover { color: var(--accent); text-decoration: underline; }
.attention-area { flex: 1; }
.attention-due {
    font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
    background: #fff5e6; color: #8a5a00; white-space: nowrap;
}
.attention-due.is-late { background: #fdecea; color: var(--danger); }

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.area-tile {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    overflow: hidden; border-top: 3px solid var(--area);
    transition: box-shadow .12s ease, transform .12s ease;
}
.area-tile:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(16,24,40,.09); }
.area-tile.has-overdue { border-left: 1px solid #f3cfcb; }
.area-tile-main { display: block; padding: 15px 17px 12px; text-decoration: none; color: var(--text); }
.area-tile-top { display: flex; align-items: flex-start; gap: 10px; }
.area-tile-name { flex: 1; min-width: 0; }
.area-tile-name h2 { font-size: 15.5px; margin: 0 0 3px; word-break: break-word; }
.area-tile-count { text-align: right; flex: 0 0 auto; }
.area-tile-count strong { display: block; font-size: 22px; font-weight: 650; line-height: 1; }
.area-tile-count small { font-size: 11px; color: var(--text-muted); }

.status-bar {
    display: flex; height: 7px; border-radius: 999px; overflow: hidden;
    margin: 14px 0 9px; background: #eef0f4;
}
.status-bar-part { background: var(--seg); min-width: 4px; }

.status-legend {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--text-muted);
}
.status-legend li { display: flex; align-items: center; gap: 5px; }
.status-legend strong { color: var(--text); }

.area-tile-empty { font-size: 13px; color: var(--text-muted); margin: 14px 0 4px; }

.area-tile-foot {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 9px 17px; border-top: 1px solid var(--border); background: #fafbfc;
}
.tile-flag { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.tile-flag.is-overdue { background: #fdecea; color: var(--danger); }
.tile-flag.is-time { background: #fff5e6; color: #8a5a00; }
.tile-add {
    margin-left: auto; font-size: 12.5px; text-decoration: none;
    color: var(--text-muted); font-weight: 550;
}
.tile-add:hover { color: var(--accent); }

.area-tile.is-compact .area-tile-main { padding: 12px 15px 10px; }
.area-tile.is-compact .area-tile-foot { padding: 7px 15px; }

/* Beträge in der Zeitauswertung */
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rate-hint { font-size: 12px; color: var(--text-muted); }

/* Wiederkehrende Tickets */
.rule-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 11px 0; border-bottom: 1px solid var(--border);
}
.rule-row:last-child { border-bottom: 0; }
.rule-main { flex: 1; min-width: 180px; }
.rule-next { font-size: 12.5px; color: var(--text-muted); }
.rule-row.is-paused { opacity: .6; }

@media (max-width: 860px) {
    .stat-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat { padding: 13px 14px; }
    .stat strong { font-size: 22px; }
    .tile-grid { grid-template-columns: 1fr; }
    .attention-list li { align-items: flex-start; }
    .attention-area { flex: 1 0 100%; }
    .rule-row { flex-direction: column; align-items: stretch; }
}

/* Abrechnung */
.export-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 860px) {
    .export-actions { width: 100%; }
    .export-actions .button { flex: 1; text-align: center; }
}

/* Systemstand */
.version-card { border-left: 3px solid var(--accent); }
.info-grid { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.info-grid > div { display: flex; flex-direction: column; gap: 2px; }
.info-grid dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.info-grid dd { margin: 0; font-size: 14px; }

/* Auswahl in Tabellen */
.select-table .select-col { width: 42px; text-align: center; }
.select-table tbody tr.is-selected { background: #f5f8ff; }
.nowrap-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.chip-sep { width: 1px; height: 20px; background: var(--border-strong); margin: 0 4px; }
.legend-inline {
    display: inline-flex; align-items: center; gap: 4px;
    margin-right: 12px; font-size: 12.5px; color: var(--text-muted); white-space: nowrap;
}
.legend-inline strong { color: var(--text); }

@media (max-width: 860px) {
    .select-table .select-col { width: auto; text-align: left; }
    .select-table td.select-col::before { content: "Auswählen"; }
    .nowrap-actions { justify-content: flex-start; }
    .info-grid { grid-template-columns: repeat(2, 1fr); }
}
.sidebar-version { font-size: 11px; color: var(--text-muted); text-align: center; margin: 6px 0 0; }

/* Betreiberangaben in der Seitenleiste */
.sidebar-operator {
    display: flex; flex-direction: column; gap: 1px;
    padding: 8px 12px; margin-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 11.5px; color: var(--text-muted); line-height: 1.5;
}
.sidebar-operator strong { color: var(--text); font-size: 12px; }
.sidebar-operator a { color: var(--text-muted); text-decoration: none; word-break: break-all; }
.sidebar-operator a:hover { color: var(--accent); text-decoration: underline; }

/* Dateien am Kommentar */
.comment-files { list-style: none; margin: 6px 0 0; padding: 0; }
.comment-files li { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 13px; }
.comment-files a { text-decoration: none; word-break: break-all; }
.comment-files a:hover { text-decoration: underline; }

/* ===================================================================
   Kundenportal
   =================================================================== */

.portal-nav { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.portal-nav a { text-decoration: none; color: var(--text-muted); font-size: 14px; }
.portal-nav a:hover { color: var(--text); }
.portal-nav .button { color: #fff; }
.portal-user { font-size: 14px; color: var(--text); font-weight: 550; }

.comment.is-team { border-left: 3px solid var(--accent); padding-left: 12px; }
.comment.is-mine { border-left: 3px solid var(--border-strong); padding-left: 12px; }

/* Auswertungen */
.bar-cell { width: 140px; }
.mini-bar { display: block; height: 8px; background: #eef0f4; border-radius: 999px; overflow: hidden; }
.mini-bar span { display: block; height: 100%; background: var(--seg, var(--accent)); border-radius: 999px; }

.aging-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.aging-cell {
    display: flex; flex-direction: column; gap: 2px;
    padding: 14px 16px; background: #f6f8fa; border-radius: var(--radius);
}
.aging-cell strong { font-size: 24px; font-weight: 650; }
.aging-cell span { font-size: 12.5px; color: var(--text-muted); }
.aging-cell.is-alert { background: #fdecea; }
.aging-cell.is-alert strong { color: var(--danger); }

.trend { display: flex; align-items: flex-end; gap: 10px; height: 170px; padding: 10px 0; overflow-x: auto; }
.trend-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 0 46px; height: 100%; }
.trend-bars { display: flex; align-items: flex-end; gap: 3px; height: 100%; width: 100%; justify-content: center; }
.trend-bar { width: 14px; border-radius: 3px 3px 0 0; min-height: 2px; }
.trend-bar.is-created { background: var(--accent); }
.trend-bar.is-closed { background: var(--success); }
.trend-label { font-size: 11px; color: var(--text-muted); }
.trend-legend { display: flex; gap: 18px; font-size: 12.5px; color: var(--text-muted); margin: 4px 0 0; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
.swatch.is-created { background: var(--accent); }
.swatch.is-closed { background: var(--success); }

@media (max-width: 860px) {
    .portal-nav { width: 100%; margin-left: 0; }
        .bar-cell { display: none; }
}

/* Tastenkürzel-Hilfe */
.shortcut-help {
    position: fixed; right: 22px; bottom: 22px; z-index: 100;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--radius); padding: 16px 20px;
    box-shadow: 0 6px 24px rgba(16,24,40,.16); max-width: 300px;
}
.shortcut-help h3 { font-size: 13px; margin: 0 0 10px; }
.shortcut-help dl { margin: 0 0 8px; }
.shortcut-help dl > div { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; font-size: 13px; }
.shortcut-help dt { flex: 0 0 30px; }
.shortcut-help dd { margin: 0; color: var(--text-muted); }
kbd {
    display: inline-block; min-width: 20px; text-align: center;
    padding: 1px 6px; border: 1px solid var(--border-strong);
    border-bottom-width: 2px; border-radius: 4px;
    background: #fafbfc; font-family: ui-monospace, Menlo, monospace; font-size: 12px;
}
.badge-customer { background: #ede9fe; color: #5b21b6; }
.comment.is-internal { background: #fffbeb; border-radius: 6px; padding: 10px 12px; }

@media (max-width: 860px) { .shortcut-help { display: none; } }

/* Diagnose */
.check-list { list-style: none; margin: 0; padding: 0; }
.check { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.check:last-child { border-bottom: 0; }
.check-icon {
    flex: 0 0 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #fff;
}
.check.is-ok .check-icon { background: var(--success); }
.check.is-warn .check-icon { background: #B45309; }
.check.is-fail .check-icon { background: var(--danger); }
.check.is-info .check-icon { background: var(--text-muted); }
.check-body { flex: 1; min-width: 0; }
.check-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.check-value { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.check.is-fail .check-value { color: var(--danger); font-weight: 600; }
.check.is-warn .check-value { color: #B45309; font-weight: 600; }
.check-hint { margin: 3px 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }

.state-ok { color: var(--success); }
.state-warn { color: #B45309; }
.state-fail { color: var(--danger); }
.stat.is-warn { border-color: #f0dda8; background: #fffdf7; }
.restore-row td { background: #fffaf9; }

/* Anwendungsprotokoll */
.log-list {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; max-height: 420px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 8px; background: #fbfbfc;
}
.log-entry {
    display: flex; gap: 10px; padding: 6px 10px;
    border-bottom: 1px solid var(--border); align-items: baseline;
}
.log-entry:last-child { border-bottom: 0; }
.log-time { flex: 0 0 132px; color: var(--text-muted); }
.log-level { flex: 0 0 62px; font-weight: 700; }
.log-entry.is-error .log-level { color: var(--danger); }
.log-entry.is-warn .log-level { color: #B45309; }
.log-entry.is-info .log-level { color: var(--text-muted); }
.log-message { flex: 1; min-width: 0; word-break: break-word; }
.log-entry.is-error { background: #fffaf9; }

@media (max-width: 860px) {
    .log-entry { flex-direction: column; gap: 2px; }
    .log-time, .log-level { flex: none; }
}

/* Filterfeld in der Bereichsliste des Menüs */
.nav-filter {
    width: 100%;
    margin: 4px 0 6px;
    padding: 5px 9px;
    font-size: 13px;
    min-height: 32px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fbfbfc;
}
/* `outline: none` galt hier auch für die Tastatur: `.nav-filter:focus` ist
   spezifischer als `input:focus-visible` weiter unten und gewann. Der
   Rahmen bleibt, die Fokusmarkierung entfällt nur bei Mausbedienung. */
.nav-filter:focus { border-color: var(--accent); }
.nav-filter:focus:not(:focus-visible) { outline: none; }
.nav-empty { font-size: 12.5px; color: var(--text-muted); padding: 4px 10px; margin: 0; }

/* Bereichslogo */
.area-logo {
    width: 34px; height: 34px; flex: 0 0 auto;
    object-fit: contain; border-radius: 6px;
    background: #fff; border: 1px solid var(--border); padding: 2px;
}
.area-logo-lg { width: 44px; height: 44px; }
.portal-brand { display: inline-flex; align-items: center; gap: 10px; }
.portal-logo { height: 30px; max-width: 130px; object-fit: contain; }
.logo-preview {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-bottom: 8px; padding: 6px; background: #fff; border-radius: 8px;
    max-height: 60px; max-width: 220px; border: 1px solid var(--border);
}
.logo-preview img { max-height: 52px; max-width: 170px; object-fit: contain; }

/* Favoritenstern */
.fav-form { display: inline-flex; }
.fav-button {
    /* Zielgrösse mindestens 24 x 24 px (WCAG 2.5.8); mit 2px Innenabstand
       kam der Stern in der Listenansicht auf rund 22 px. */
    border: 0; background: none; cursor: pointer; padding: 2px 4px;
    min-width: 24px; min-height: 24px;
    font-size: 18px; line-height: 1; color: var(--border-strong);
    border-radius: 5px;
}
.fav-button:hover { color: #d9a300; background: #fff8e6; }
.fav-button.is-on { color: #e8a800; }
.area-tile-foot .fav-form { margin-right: 2px; }
.head-actions .fav-button { font-size: 22px; }

/* Ticketnummer */
.ticket-number {
    display: inline-block; font-variant-numeric: tabular-nums;
    color: var(--text-muted); font-weight: 600; font-size: 0.92em; margin-right: 5px;
}
h1 .ticket-number { font-size: 0.72em; vertical-align: middle; }

/* Priorität */
.prio {
    display: inline-block; font-size: 11px; font-weight: 650;
    padding: 1px 7px; border-radius: 999px; margin-left: 6px; white-space: nowrap;
}
.prio-urgent { background: #fdecea; color: #B42318; }
.prio-high   { background: #fff4e5; color: #B45309; }
.prio-low    { background: #f1f3f6; color: var(--text-muted); }

/* Wiedervorlage */
.followup-card { border-left: 3px solid #7C3AED; }
.followup-list { list-style: none; margin: 0 0 4px; padding: 0; }
.followup-list li {
    display: flex; gap: 10px; align-items: flex-start; justify-content: space-between;
    padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.followup-list li:last-child { border-bottom: 0; }
.quick-days { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.quick-days .button { flex: 1; min-width: 90px; font-size: 12.5px; padding: 6px 8px; }
.icon-button {
    border: 1px solid var(--border); background: var(--surface); cursor: pointer;
    border-radius: 5px; width: 26px; height: 26px; line-height: 1; color: var(--success);
}
.icon-button:hover { background: #f0fdf4; border-color: var(--success); }

.nav-alert { color: #7C3AED; font-weight: 600; }
.nav-count {
    display: inline-block; min-width: 18px; text-align: center;
    background: #7C3AED; color: #fff; border-radius: 999px;
    font-size: 11px; padding: 0 5px; margin-left: 4px;
}
.nav-count.is-alert { background: #B42318; }
.nav-count.is-warn { background: #C2410C; }
.nav-badges {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.nav-area-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Auswahl im Portal ausserhalb der Bürozeiten */
.outside-choice { padding: 14px; background: #fffbeb; border-radius: var(--radius); border: 1px solid #f3e3b3; }
.radio-card input { margin-top: 3px; flex: 0 0 auto; }
.radio-card input:checked ~ span strong { color: var(--accent); }
.radio-card span { display: flex; flex-direction: column; gap: 2px; }
.radio-card:has(input:checked) { border-color: var(--accent); background: #f7f9ff; }

/* Wochentage */
.weekday-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.weekday { cursor: pointer; }
.weekday input { position: absolute; opacity: 0; pointer-events: none; }
.weekday span {
    display: inline-block; min-width: 42px; text-align: center;
    padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px;
    font-size: 13px; background: var(--surface); color: var(--text-muted);
}
.weekday input:checked + span {
    background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}
.flash-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

/* Dringlichkeitsauswahl im Portal */
.urgency-choice { padding: 14px; background: #f7f9fc; border-radius: var(--radius); border: 1px solid var(--border); }
.urgency-choice > label:first-child { font-weight: 600; margin-bottom: 4px; display: block; }
.portal-stats .stat { cursor: default; }
.portal-stats .stat:hover { transform: none; border-color: var(--border); }

/* Betreiberangaben ganz oben, zum Ausklappen */
.operator-box {
    margin: -4px -4px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fafbfc;
    font-size: 12.5px;
}
.operator-box > summary {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 10px; cursor: pointer; list-style: none;
    color: var(--text-muted); font-weight: 600;
}
.operator-box > summary::-webkit-details-marker { display: none; }
.operator-box > summary::after {
    content: "⌄"; margin-left: auto; font-size: 13px; line-height: 1;
    transition: transform .15s ease;
}
.operator-box[open] > summary::after { transform: rotate(180deg); }
.operator-box > summary:hover { color: var(--text); }
.operator-name {
    color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.operator-body {
    display: flex; flex-direction: column; gap: 3px;
    padding: 2px 10px 9px; color: var(--text-muted); line-height: 1.5;
}
.operator-body a { color: var(--text-muted); text-decoration: none; word-break: break-all; }
.operator-body a:hover { color: var(--accent); text-decoration: underline; }

/* Kundenbestätigung */
.confirm-ask { border-left: 3px solid var(--accent); }
.confirm-form { display: inline-block; margin-right: 10px; }
.confirm-reopen { margin-top: 12px; }
.confirm-reopen > summary { cursor: pointer; color: var(--text-muted); font-size: 13.5px; }
.confirm-reopen > summary:hover { color: var(--danger); }
.confirm-reopen form { margin-top: 10px; }
.confirm-card.is-pending { border-left: 3px solid #B45309; }
.confirm-card.is-ok { border-left: 3px solid var(--success); }
.confirm-card.is-reopen { border-left: 3px solid var(--danger); }

/* Bereichsnotizen */
.notes-card { border-left: 3px solid #7C3AED; background: #fdfcff; }
.notes-body { white-space: pre-wrap; font-size: 13.5px; line-height: 1.6; margin: 0 0 6px; }

/* Bereichsnotizen in der Bereichsansicht */
.area-notes { padding: 0; margin-bottom: 16px; }
.area-notes > summary {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    padding: 12px 16px; cursor: pointer; list-style: none;
}
.area-notes > summary::-webkit-details-marker { display: none; }
.area-notes > summary::after { content: "⌄"; margin-left: auto; color: var(--text-muted); }
.area-notes[open] > summary::after { transform: rotate(180deg); }
.area-notes > summary:hover { background: #faf9ff; }
.area-notes .notes-body { padding: 0 16px; }
.area-notes .field-hint { padding: 0 16px 12px; }

/* Checklisten-Fortschritt */
.checklist-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums;
    margin-left: 6px; white-space: nowrap;
}
.checklist-bar {
    display: inline-block; width: 34px; height: 5px;
    background: #e6e9ee; border-radius: 999px; overflow: hidden;
}
.checklist-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.checklist-badge.is-done { color: var(--success); font-weight: 600; }
.checklist-badge.is-done .checklist-bar > span { background: var(--success); }

/* Sammelaktionen */
.bulk-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 14px; margin-bottom: 12px;
    background: #eef4ff; border: 1px solid #c7d9f7; border-radius: var(--radius);
    position: sticky; top: 8px; z-index: 20;
}
.bulk-count { font-size: 13.5px; color: var(--text); }
.bulk-bar select { min-height: 34px; font-size: 13.5px; }

/* Zeitabfrage nach dem Abschliessen */
.ask-time-card { border-left: 3px solid #B45309; background: #fffdf7; }

@media (max-width: 860px) {
    .bulk-bar { position: static; }
    .bulk-bar select, .bulk-bar .button { width: 100%; }
}

/* Auswahl auf Board-Karten */
.card-select { float: right; margin: -2px 0 0 6px; cursor: pointer; }
.card-select input { cursor: pointer; }
.ticket-card.is-selected { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Nachfrage nach der Zeit im Board */
.time-prompt {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(16,24,40,.35);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.time-prompt-inner {
    background: var(--surface); border-radius: var(--radius);
    padding: 22px 24px; max-width: 440px; width: 100%;
    box-shadow: 0 10px 40px rgba(16,24,40,.25);
}
.time-prompt-inner strong { font-size: 15px; }
.time-prompt-inner p { color: var(--text-muted); font-size: 13.5px; margin: 6px 0 14px; }
.time-prompt-inner form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.time-prompt-inner input[type="text"] { flex: 1 1 180px; min-height: 38px; }

/* Handbuch */
.help-toc { position: sticky; top: 8px; z-index: 10; }
.help-toc strong { display: block; margin-bottom: 8px; font-size: 13px; }
.help-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.help-toc a { font-size: 13.5px; text-decoration: none; color: var(--accent); }
.help-toc a:hover { text-decoration: underline; }

.help-section { scroll-margin-top: 70px; }
.help-section h3.sub-title { margin-top: 16px; }

.help-steps { margin: 0 0 10px; padding-left: 22px; }
.help-steps li { padding: 4px 0; line-height: 1.6; }

.help-bullets { margin: 0 0 10px; padding-left: 20px; }
.help-bullets li { padding: 4px 0; line-height: 1.6; }

.help-list { margin: 0 0 10px; }
.help-list > div { padding: 8px 0; border-bottom: 1px solid var(--border); }
.help-list > div:last-child { border-bottom: 0; }
.help-list dt { font-weight: 650; font-size: 14px; }
.help-list dd { margin: 3px 0 0; color: var(--text-muted); line-height: 1.6; }

.help-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px 18px; margin: 0; }
.help-keys > div { display: flex; align-items: baseline; gap: 10px; }
.help-keys dt { flex: 0 0 40px; }
.help-keys dd { margin: 0; color: var(--text-muted); font-size: 13.5px; }

.help-tip {
    background: #f2f7ff; border-left: 3px solid var(--accent);
    padding: 10px 14px; border-radius: 0 6px 6px 0;
    font-size: 13.5px; line-height: 1.6; margin: 12px 0 0; color: var(--text);
}
.help-table { margin-top: 10px; }
.help-table td, .help-table th { font-size: 13.5px; }

@media (max-width: 860px) {
    .help-toc { position: static; }
}

/* Menü: Hilfe abgesetzt am Ende */
.nav-separator { height: 1px; background: var(--border); margin: 10px 4px; }
.nav-help { color: var(--text-muted); }

/* Zeitfenster im Board */
.time-prompt-inner .field { margin-bottom: 10px; }
.time-prompt-inner .field label { font-size: 12.5px; }
.time-prompt-inner input { width: 100%; min-height: 38px; }
.time-prompt-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.time-prompt-error { color: var(--danger); font-size: 13px; margin: 0 0 8px; }

/* Kurze Rückmeldung */
/* Die Live-Region selbst ist unsichtbar und leer; sichtbar ist der Toast
   darin. So steht die Region schon im Dokument, bevor Text erscheint. */
.toast-region { position: fixed; inset: auto; pointer-events: none; }

.toast {
    position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
    background: #1f2937; color: #fff; padding: 10px 18px;
    border-radius: 8px; font-size: 13.5px; z-index: 300;
    box-shadow: 0 4px 16px rgba(16,24,40,.25);
}

/* Herkunft eines per E-Mail eingegangenen Tickets */
.source-card { border-left: 3px solid #0EA5E9; }
.source-card p { font-size: 13.5px; margin: 0 0 4px; }


/* ---------- Barrierefreiheit ---------- */

/*
 * Sprungmarke: erlaubt es, die Navigation zu überspringen. Sichtbar,
 * sobald sie den Fokus bekommt (WCAG 2.4.1).
 */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 500;
    background: var(--accent);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 8px 0;
    font-size: 14px;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
}

/* Deutlich sichtbare Fokusmarkierung auf allen Bedienelementen (2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Die übrigen Feldtypen; die oben genannten haben den Rahmen schon (1.4.11) */
input[type="number"], input[type="date"], input[type="search"],
input[type="tel"], input[type="url"] {
    border: 1px solid var(--border-control);
}
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--accent);
    width: 18px;
    height: 18px;
}

/* Mindestgröße von Zielen (2.5.8) */
.icon-button, .link-button {
    min-width: 24px;
    min-height: 24px;
}

/* Nur für Vorleseprogramme */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Bewegung nur, wenn gewünscht (2.3.3) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

fieldset.field > legend { font-weight: 600; font-size: 13px; padding: 0 6px; }

/* Anzeige der Passwortstärke */
.pw-strength { display: none; margin-top: 6px; }
.pw-strength.is-visible { display: block; }
.pw-bar {
    height: 6px; background: #e6e9ee; border-radius: 999px; overflow: hidden;
}
.pw-bar > span {
    display: block; height: 100%; width: 0;
    border-radius: 999px; transition: width .18s ease, background .18s ease;
    background: var(--danger);
}
.pw-strength[data-score="2"] .pw-bar > span { background: #B45309; }
.pw-strength[data-score="3"] .pw-bar > span { background: #15803D; }
.pw-strength[data-score="4"] .pw-bar > span { background: var(--success); }
.pw-note { font-size: 12.5px; color: var(--text-muted); margin: 5px 0 0; line-height: 1.5; }


/* ---------- Auswahlkarten (Dringlichkeit im Portal) ---------- */

/*
 * Vorher lagen Punkt und Text untereinander, weil der Punkt als Block
 * gesetzt war. Jetzt stehen sie nebeneinander, der Text sauber daneben
 * ausgerichtet.
 */
.radio-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid var(--border-control);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    margin: 8px 0;
    transition: border-color .12s ease, background .12s ease;
}
.radio-card:hover { border-color: var(--accent); }
.radio-card > input[type="radio"] {
    flex: 0 0 auto;
    margin: 2px 0 0;
    width: 18px;
    height: 18px;
}
.radio-card > span {
    display: block;
    min-width: 0;
}
.radio-card strong { display: block; font-size: 14.5px; margin-bottom: 2px; }
.radio-card small { display: block; color: var(--text-muted); font-size: 13px; line-height: 1.55; }
.radio-card:has(> input:checked) {
    border-color: var(--accent);
    background: #f5f8ff;
    box-shadow: inset 0 0 0 1px var(--accent);
}
.urgency-level { margin-top: 10px; }

/* ---------- Werkzeugleiste im Portal ---------- */

/*
 * Werkzeugleiste. Bewusst hier und nicht oben bei den übrigen Listenstilen:
 * Die Abfrage für schmale Fenster weiter oben soll NICHT gewinnen - sie
 * stellte die Leiste untereinander, was bei den kurzen Filtern unnötig viel
 * Platz kostete. Suchfeld und Knöpfe standen ausserdem unterschiedlich hoch.
 */
.toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar input[type="search"],
.toolbar select {
    min-height: 38px;
    border: 1px solid var(--border-control);
    border-radius: 8px;
    padding: 0 11px;
    font-size: 14px;
    background: var(--surface);
}
.toolbar input[type="search"] { min-width: 190px; }
.toolbar .button { min-height: 38px; display: inline-flex; align-items: center; }
.toolbar .chip { min-height: 38px; display: inline-flex; align-items: center; }

@media (max-width: 700px) {
    .toolbar, .toolbar-group { width: 100%; }
    .toolbar input[type="search"] { flex: 1 1 100%; }
}

/* Bestätigungsseite für den Adresswechsel */
.confirm-email {
    background: #f5f8ff; border: 1px solid var(--border);
    border-radius: 8px; padding: 11px 14px; margin: 12px 0;
    font-size: 15px; word-break: break-all; text-align: center;
}


/* ---------- Auswahlgruppe: Überschrift, Abstände, Hintergrund ---------- */

/*
 * Vorher sass die Überschrift auf dem Rahmen und der hellblaue Grund lief
 * hinter den Karten weiter. Jetzt steht die Überschrift frei darüber, die
 * Gruppe hat keinen eigenen Rahmen mehr, und nur die Karten selbst sind
 * abgesetzt.
 */
fieldset.field.urgency-choice {
    border: 0;
    background: none;
    padding: 0;
    margin: 0 0 16px;
}
fieldset.field.urgency-choice > legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
fieldset.field.urgency-choice > legend + * { clear: both; }
.urgency-choice .radio-card { margin-bottom: 10px; }
.urgency-choice .radio-card:last-of-type { margin-bottom: 0; }
.urgency-choice > .field-hint { clear: both; margin: 10px 0 0; }
.urgency-choice .urgency-level {
    clear: both;
    margin-top: 14px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

/* ---------- Datumsfelder ---------- */

/*
 * Datumsfelder werden vom Browser eigenwillig gesetzt und wirkten neben
 * den übrigen Feldern zu klein.
 */
/*
 * Datumsfelder: höhere Auswahlkraft als die allgemeine Feldregel, damit
 * sie in jedem Zusammenhang gleich aussehen - auch in schmalen Spalten.
 */
.field input[type="date"],
input[type="date"] {
    min-height: 40px;
    padding: 0 11px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid var(--border-control);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    width: 100%;
    max-width: 260px;
    box-sizing: border-box;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .65;
    padding: 4px;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Angaben im Kundenticket */
.fact-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 22px; margin: 0; }
.fact-list > div { padding: 7px 0; border-bottom: 1px solid var(--border); }
.fact-list dt { font-size: 12.5px; color: var(--text-muted); margin-bottom: 3px; }
.fact-list dd { margin: 0; font-size: 14px; }

/* ---------- Nachrichtenverlauf als Unterhaltung ---------- */

.chat { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 8px; }

.chat-row { display: flex; gap: 9px; align-items: flex-end; max-width: 82%; }
.chat-row.is-mine { align-self: flex-end; flex-direction: row-reverse; }

.chat-avatar {
    flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #e6e9ee; color: var(--text-muted);
    font-size: 11.5px; font-weight: 650; letter-spacing: .3px;
}
.chat-row.is-mine .chat-avatar { background: var(--accent); color: #fff; }
.chat-row.is-internal .chat-avatar { background: #FDE68A; color: #92400E; }

.chat-bubble {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px 14px 14px 4px;
    padding: 9px 13px 8px;
    min-width: 0;
}
.chat-row.is-mine .chat-bubble {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    border-radius: 14px 14px 4px 14px;
}
.chat-row.is-internal .chat-bubble {
    background: #FFFBEB;
    border-color: #FCD34D;
    color: var(--text);
    border-radius: 14px;
}

.chat-name { font-size: 12px; font-weight: 650; margin-bottom: 2px; }
.chat-row.is-mine .chat-name { color: rgba(255,255,255,.9); }
.chat-text { font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; margin: 0; }
.chat-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; text-align: right; }
/* .75 ergab auf dem Akzentblau 3,97:1 und fiel damit unter AA (4,5:1).
   Mit .9 sind es 5,0:1 – nachgerechnet, nicht geschätzt. */
.chat-row.is-mine .chat-meta { color: rgba(255,255,255,.9); }
.chat-internal-tag {
    display: inline-block; font-size: 10.5px; font-weight: 650; text-transform: uppercase;
    letter-spacing: .4px; color: #92400E;
    margin: 0 0 1px;
    line-height: 1.2;
}
.chat-row.is-internal .chat-name { margin-bottom: 1px; color: var(--text); }
/*
 * Bei internen Notizen war die Zeitangabe fast unsichtbar: Die Regel für
 * eigene Nachrichten setzt sie hell, die gelbe Blase ist aber hell.
 */
.chat-row.is-mine.is-internal .chat-name,
.chat-row.is-mine.is-internal .chat-meta { color: var(--text-muted); }
.chat-row.is-internal .chat-meta { color: #92400E; opacity: .85; }
.chat-row.is-internal .chat-text { margin-top: 0; }
.chat-internal-tag + .chat-text,
.chat-internal-tag + .chat-name + .chat-text { margin-top: 0; }
.chat-empty { color: var(--text-muted); font-size: 13.5px; padding: 10px 0; }

@media (max-width: 700px) {
    .chat-row { max-width: 94%; }
}

/* ---------- Dateien: Ablegebereich ---------- */

.dropzone {
    border: 2px dashed var(--border-control);
    border-radius: var(--radius);
    background: #fafbfc;
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.dropzone:hover { border-color: var(--accent); background: #f5f8ff; }
.dropzone.is-over { border-color: var(--accent); background: #eaf1ff; }
.dropzone-title { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.dropzone-hint { font-size: 12.5px; color: var(--text-muted); margin: 0; }
/*
 * Nur verstecken, wenn JavaScript läuft: Ohne Skript gibt es keine
 * Ablegefläche - dann muss das Dateifeld sichtbar bleiben, sonst lässt
 * sich gar nichts hochladen.
 */
.js .dropzone input[type="file"] { display: none; }
.dropzone input[type="file"] { display: block; margin: 8px auto 0; }

.dropzone-list { list-style: none; margin: 10px 0 0; padding: 0; text-align: left; }
.dropzone-list li {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; padding: 5px 9px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 7px; margin-bottom: 5px;
}
.dropzone-list .size { color: var(--text-muted); margin-left: auto; font-size: 12px; }

.badge-internal {
    display: inline-block; font-size: 10.5px; font-weight: 650;
    text-transform: uppercase; letter-spacing: .4px;
    background: #FEF3C7; color: #92400E;
    padding: 2px 7px; border-radius: 999px; margin-left: 6px;
}
.comment-edit textarea { width: 100%; margin-bottom: 6px; }

/* Kundenportal: zwei Spalten */
/* Gleiche Aufteilung wie die Ticketmaske: Inhalt breit, Randspalte fest. */
.portal-columns { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.portal-col-main, .portal-col-side { min-width: 0; }
@media (max-width: 1000px) {
    .portal-columns { grid-template-columns: 1fr; }
}

/* Checkliste im Portal */
.checklist-bar-outer { height: 7px; background: #e6e9ee; border-radius: 999px; overflow: hidden; margin: 6px 0 12px; }
.checklist-bar-outer > span { display: block; height: 100%; background: var(--success); border-radius: 999px; }
.portal-checklist { list-style: none; margin: 0; padding: 0; }
.portal-checklist li { display: flex; gap: 9px; padding: 5px 0; font-size: 13.5px; border-bottom: 1px solid var(--border); }
.portal-checklist li:last-child { border-bottom: 0; }
.portal-checklist li.is-done { color: var(--text-muted); text-decoration: line-through; }
.portal-checklist li.is-done span { color: var(--success); }

/* Wechsel zwischen den Bereichsseiten */
.config-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

/* Hinweis zur Zwei-Faktor-Anmeldung */
.twofa-hint { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.twofa-hint form.inline { display: inline; }

/* Protokoll: einzelne Einträge abhaken */
.log-dismiss { flex: 0 0 auto; }
.log-dismiss .link-button { font-size: 12px; }

/* Bereich in der Kopfzeile des Kundentickets */
.ticket-area { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); margin: 0 0 4px; }

/* Einreicher und Datum in der Seitenleiste */
.meta-block { border-top: 1px solid var(--border); margin: 12px 0; padding-top: 11px; display: grid; gap: 5px; }
.meta-line { font-size: 13px; display: flex; gap: 8px; }
.meta-label { color: var(--text-muted); min-width: 82px; }

/* Selbstprüfung */
.selftest-summary { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.pill-ok   { background: #DCFCE7; color: #166534; }
.pill-warn { background: #FEF3C7; color: #92400E; }
.pill-fail { background: #FEE2E2; color: #991B1B; }
.selftest-table td { vertical-align: top; }
.selftest-hint { display: block; margin-top: 3px; line-height: 1.5; }
.selftest-state { font-size: 13.5px; }
.selftest-warn .selftest-state { color: #92400E; font-weight: 600; }
.selftest-fail .selftest-state { color: var(--danger); font-weight: 650; }
.selftest-fail td { background: #FEF2F2; }
.selftest-warn td { background: #FFFBEB; }

/* Angemeldete Geräte */
.device-list { list-style: none; margin: 0 0 12px; padding: 0; }
.device-list li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 9px 0; border-bottom: 1px solid var(--border); }
.device-list li:last-child { border-bottom: 0; }
.device-name { font-size: 14px; font-weight: 550; }

/* Logo */
.system-logo { max-height: 34px; max-width: 150px; vertical-align: middle; margin-right: 8px; }
.bare-panel .system-logo { display: block; margin: 0 auto 16px; max-height: 56px; max-width: 220px; }

/* Reaktionszeit */
.badge-late { display: inline-block; font-size: 10.5px; font-weight: 650; text-transform: uppercase;
    letter-spacing: .4px; background: #FEE2E2; color: #991B1B; padding: 2px 7px; border-radius: 999px; }
.badge-waiting { background: #FEF3C7; color: #92400E; }

/* Bewertung */
.rate-buttons { display: flex; gap: 10px; margin: 10px 0; }
.rate-buttons .button { flex: 1; }
.rating-good { color: #166534; font-weight: 650; }
.rating-bad { color: #991B1B; font-weight: 650; }

/* ---------- Reiter ---------- */

.tab-bar {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
.tab-button {
    appearance: none; background: none; border: 0;
    border-bottom: 2px solid transparent;
    padding: 9px 14px; margin-bottom: -1px;
    font: inherit; font-size: 14px; font-weight: 550;
    color: var(--text-muted); cursor: pointer;
    min-height: 40px;
}
.tab-button:hover { color: var(--text); }
.tab-button.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel > .card:first-child { margin-top: 0; }

@media (max-width: 700px) {
    /* Reiter waagrecht scrollbar statt umbrechend */
    .tab-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab-button { flex: 0 0 auto; padding: 9px 12px; }
}

/* ---------- Mobile Bedienung ---------- */

@media (max-width: 820px) {
    /*
     * Das Board ist auf einem Telefon kaum zu bedienen - der Hinweis
     * verweist auf die Listenansicht, die dort besser funktioniert.
     */
    .board { display: block; }
    .board-column { margin-bottom: 14px; }
    .mobile-list-hint { display: block; }

    /* Ticketmaske: Seitenleiste zuklappbar statt endlos gestapelt */
    .editor-grid { grid-template-columns: 1fr; }
    .editor-side > details.side-group { border: 1px solid var(--border); border-radius: var(--radius); }
}

.mobile-list-hint { display: none; margin: 0 0 12px; }

/* Zusammenklappbare Menügruppe */
/*
 * Nur der Abstand und der aufklappbare Inhalt - Aussehen und Pfeil der
 * Gruppe regelt bereits der Block weiter oben (.nav-group > summary).
 * Eine zweite Regel mit justify-content: space-between hatte die
 * Beschriftung „Verwaltung" nach rechts geschoben und einen zweiten Pfeil
 * erzeugt.
 */
.nav-group-body { display: flex; flex-direction: column; }

.favicon-preview { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; padding: 5px; background: #fff; }

/* N14: Zielgrößen im Verlauf (WCAG 2.5.8) */
.chat-meta .link-button {
    min-height: 24px; min-width: 24px;
    padding: 3px 6px; font-size: 11.5px;
}
.chat-meta form.inline { display: inline-flex; }


/* Ohne Skript sichtbar, mit Skript überflüssig */
.js .no-js-only { display: none; }