/* =================================================== */
/* CantorHub – Design System                           */
/* =================================================== */

/* ─── Tokens ─────────────────────────────────────── */
:root {
    --brand:           #c14468;
    /* Von --brand abgeleitet (nicht literal), damit BRAND_FARBE-Überschreibungen
       (siehe _brand_boot.html) Hover-Zustand, Tint und Fokusring mitziehen. */
    --brand-dark:      color-mix(in srgb, var(--brand) 85%, black);
    --brand-light:     color-mix(in srgb, var(--brand) 10%, transparent);
    --brand-ring:      color-mix(in srgb, var(--brand) 22%, transparent);
    --cal-geb:         #157347;
    --cal-geb-bg:      rgba(21, 128, 61, 0.13);
    --cal-weekend:     #dc2626;

    /* Kategoriale Palette — Stimmen (S/A/T/B/C/M) und Berechtigungskategorien.
       Stimme A / Kategorie „Termine" sind die Akzentfarbe (var(--brand)), alle
       weiteren sind domain-feste Kategoriefarben, nicht pro Verein konfigurierbar.
       Tints entstehen per color-mix() direkt an der Verwendungsstelle, damit
       Opazitaetsunterschiede (Light/Dark, Base/Hover) ohne weitere Tokens greifen. */
    --kat-1:           #7c3aed;   /* violett  — Stimme S / Artikel        */
    --kat-2:           #0369a1;   /* blau    — Stimme T / Forum          */
    --kat-3:           #059669;   /* gruen   — Stimme B / Dateien        */
    --kat-4:           #b45309;   /* orange  — Stimme C / Orte          */
    --kat-5:           #0891b2;   /* cyan    — Stimme M / Repertoire    */
    --kat-6:           #65a30d;   /* limette — (nur Berechtigungskategorie Mitglieder) */

    /* Sidebar */
    --sb-bg:           #ffffff;
    --sb-hover:        rgba(0, 0, 0, 0.04);
    --sb-active-bg:    var(--brand-light);
    --sb-text:         #6b7280;
    --sb-text-hover:   #374151;
    --sb-text-active:  var(--brand);
    --sb-divider:      #e5e7eb;
    --sb-width:        232px;

    /* Top bar */
    --tb-bg:           #ffffff;
    --tb-border:       #e5e7eb;
    --tb-h:            52px;
    --tb-icon:         #9ca3af;

    /* Surfaces */
    --bg-app:          #f1f3f5;
    --bg-card:         #ffffff;
    --shadow-xs:       0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:       0 1px 4px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03);
    --shadow-md:       0 4px 16px rgba(0,0,0,0.10);

    /* Text */
    --t1: #111827;
    --t2: #374151;
    --t3: #6b7280;
    --t4: #9ca3af;

    /* Border */
    --border:          #e5e7eb;
    --border-dark:     #d1d5db;

    /* Radius */
    --r-sm: 4px;
    --r:    8px;
    --r-lg: 12px;

    /* Typography */
    --font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono:       ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;

    /* Table */
    --bg-thead:     #f9fafb;
    --bg-row-hover: #f3f4f6;

    /* Forum */
    --forum-bg:         #f8f9fb;
    --msg-bg:           #ffffff;
    --msg-border:       #e5e7eb;
    --msg-me-bg:        color-mix(in srgb, var(--brand) 10%, white);
    --msg-me-border:    color-mix(in srgb, var(--brand) 25%, white);
    --mention-bg:       #ecfdf5;
    --mention-border:   #6ee7b7;
    --mention-color:    #065f46;

    /* Search highlight */
    --search-hl-bg:     #c7f0d8;
    --search-hl-color:  #0c6b3c;

    /* Code / pre */
    --pre-bg:           #f8f9fa;
    --code-bg:          #f1f3f5;
    --code-bar-bg:      #e4e6ea;
    --code-bar-dots:    rgba(0,0,0,0.15);
    --code-color:       var(--t1);

    /* Warning / outdated banner */
    --warn-bg:          #fffbeb;
    --warn-border:      #fcd34d;
    --warn-text:        #92400e;
    --warn-strong:      #78350f;
    --warn-icon:        #d97706;

    /* Error / validation */
    --error-bg:         #fef2f2;
    --error-border:     #fecaca;
    --error-text:       #b91c1c;
    /* Vollton fuer destruktive Buttons — --error-bg ist eine Flaeche und
       traegt keine weisse Schrift */
    --error-solid:      #c53030;
    --error-solid-hover:#9b2c2c;

    /* Ampel-Status (Zusage / Anwesenheit): weiche Flaeche + kraeftige
       Vollton-Variante fuer aktive bzw. Hover-Zustaende */
    --status-success-bg:     #dcfce7;
    --status-success-text:   #166534;
    --status-success-border: #bbf7d0;
    --status-success-solid:  #16a34a;
    --status-warning-bg:     #fef9c3;
    --status-warning-text:   #854d0e;
    --status-warning-border: #fde68a;
    --status-warning-solid:  #ca8a04;
    --status-danger-bg:      #fee2e2;
    --status-danger-text:    #991b1b;
    --status-danger-border:  #fecaca;
    --status-danger-solid:   #dc2626;

    /* Password-strength meter (score 0-4) */
    --strength-0:       #dc2626;
    --strength-1:       #f0ad4e;
    --strength-2:       #eab308;
    --strength-3:       #84cc16;
    --strength-4:       #22c55e;

    /* Hover surfaces */
    --hover-bg:         #f3f4f6;
    --hover-icon-bg:    #f3f4f6;

    /* Aliases */
    --text-muted:  #6b7280;

    --ease: 0.18s ease;
}

/* ─── Dark Mode ──────────────────────────────────── */
[data-theme="dark"] {
    --cal-geb:         #4ade80;
    --cal-geb-bg:      rgba(74, 222, 128, 0.16);
    --cal-weekend:     #f87171;

    --kat-1:           #a78bfa;
    --kat-2:           #38bdf8;
    --kat-3:           #34d399;
    --kat-4:           #fbbf24;
    --kat-5:           #22d3ee;
    --kat-6:           #86efac;

    --sb-bg:           #111117;
    --sb-hover:        rgba(255, 255, 255, 0.05);
    --sb-active-bg:    color-mix(in srgb, var(--brand) 14%, transparent);
    --sb-text:         #a0a3b8;
    --sb-text-hover:   #c9ccde;
    --sb-text-active:  #ffffff;
    --sb-divider:      rgba(255, 255, 255, 0.07);

    --tb-bg:           #1a1a2e;
    --tb-border:       rgba(255, 255, 255, 0.07);
    --tb-icon:         #7c7f93;

    --bg-app:          #12121a;
    --bg-card:         #1a1a2e;
    --shadow-xs:       0 1px 2px rgba(0,0,0,0.20);
    --shadow-sm:       0 1px 4px rgba(0,0,0,0.30), 0 0 0 1px rgba(255,255,255,0.04);
    --shadow-md:       0 4px 16px rgba(0,0,0,0.35);

    --t1:              #e5e7eb;
    --t2:              #c9ccde;
    --t3:              #a0a3b8;
    --t4:              #7c7f93;

    --border:          rgba(255, 255, 255, 0.07);
    --border-dark:     rgba(255, 255, 255, 0.10);

    --bg-thead:        #22222e;
    --bg-row-hover:    rgba(255, 255, 255, 0.03);

    --forum-bg:        #16161e;
    --msg-bg:          #1e1e2e;
    --msg-border:      rgba(255, 255, 255, 0.07);
    --msg-me-bg:       color-mix(in srgb, var(--brand) 22%, transparent);
    --msg-me-border:   color-mix(in srgb, var(--brand) 35%, transparent);
    --mention-bg:      rgba(6, 95, 70, 0.15);
    --mention-border:  rgba(110, 231, 183, 0.30);
    --mention-color:   #6ee7b7;

    --search-hl-bg:    rgba(34, 197, 94, 0.30);
    --search-hl-color: #86efac;

    --pre-bg:          #22222e;
    --code-bg:         #1e1e2e;
    --code-bar-bg:     #2a2a3e;
    --code-bar-dots:   rgba(255,255,255,0.2);
    --code-color:      #cdd6f4;

    --warn-bg:         #2a2410;
    --warn-border:     #5b4a1a;
    --warn-text:       #e5c97a;
    --warn-strong:     #f3e0a6;
    --warn-icon:       #e0a93a;

    --error-bg:        #2e1416;
    --error-border:    #5b2326;
    --error-text:      #f5a3a3;
    --error-solid:     #9b2c2c;
    --error-solid-hover:#7f1d1d;

    /* Ampel-Status: gedaempfte Flaechen, der Vollton bleibt identisch */
    --status-success-bg:     rgba(22,101,52,.25);
    --status-success-text:   #86efac;
    --status-success-border: rgba(22,101,52,.40);
    --status-warning-bg:     rgba(133,77,14,.25);
    --status-warning-text:   #fde047;
    --status-warning-border: rgba(133,77,14,.40);
    --status-danger-bg:      rgba(153,27,27,.25);
    --status-danger-text:    #fca5a5;
    --status-danger-border:  rgba(153,27,27,.40);

    --strength-0:      #ef4444;
    --strength-1:      #f59e0b;
    --strength-2:      #facc15;
    --strength-3:      #a3e635;
    --strength-4:      #4ade80;

    --hover-bg:        rgba(255, 255, 255, 0.04);
    --hover-icon-bg:   rgba(255, 255, 255, 0.06);

    --text-muted:      #a0a3b8;
}

[data-theme="dark"] .sidebar-title { color: var(--t1); }
[data-theme="dark"] thead th { background: var(--bg-thead); }
[data-theme="dark"] td { border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] tbody tr:hover td { background: var(--bg-row-hover); }
[data-theme="dark"] .hamburger:hover,
[data-theme="dark"] .toolicon:hover { background: var(--hover-icon-bg); }
[data-theme="dark"] .messages { background: var(--forum-bg); }
[data-theme="dark"] .message .content { background: var(--msg-bg); border-color: var(--msg-border); }
[data-theme="dark"] .message .avatar img { border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .message_me .content_me { background: var(--msg-me-bg); border-color: var(--msg-me-border); }
[data-theme="dark"] .mention { background: var(--mention-bg); border-color: var(--mention-border); color: var(--mention-color); }
[data-theme="dark"] .wiki pre { background: var(--pre-bg); }
[data-theme="dark"] #app-main.drag-active .upload-overlay { background: color-mix(in srgb, var(--brand) 18%, transparent); }
[data-theme="dark"] span.not_found { background: rgba(254,249,195,0.10); }
[data-theme="dark"] .offcanvas { box-shadow: -2px 0 16px rgba(0,0,0,0.30); }

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

/* ─── Base ───────────────────────────────────────── */
html, body {
    height: 100%;
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    color: var(--t1);
    background: var(--sb-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

a {
    color: var(--brand);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

/* =================================================== */
/* App Shell                                           */
/* =================================================== */
body {
    display: flex;
}

.sidebar {
    width: var(--sb-width);
    height: 100vh;
    height: 100dvh;
    background: var(--sb-bg);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    z-index: 200;
    border-right: 1px solid var(--sb-divider);
    transition: width var(--ease), transform var(--ease);
}

.sidebar.collapsed {
    width: 0;
    border-right: none;
    overflow: hidden;
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
    position: relative;
}

/* =================================================== */
/* Sidebar – Brand                                     */
/* =================================================== */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    height: var(--tb-h);
    border-bottom: 1px solid var(--sb-divider);
    flex-shrink: 0;
    box-sizing: border-box;
}

.sidebar-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.sidebar-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.015em;
}

/* =================================================== */
/* Sidebar – Navigation                                */
/* =================================================== */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0;
    scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    margin: 1px 6px;
    border-radius: var(--r-sm);
    color: var(--sb-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background var(--ease), color var(--ease);
    cursor: pointer;
    border: none;
    background: none;
    width: calc(100% - 12px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    line-height: 1.4;
}

.nav-item:hover {
    background: var(--sb-hover);
    color: var(--sb-text-hover);
    text-decoration: none;
}

.nav-item.active {
    background: var(--sb-active-bg);
    color: var(--sb-text-active);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 20%;
    bottom: 20%;
    width: 3px;
    background: var(--brand);
    border-radius: 0 2px 2px 0;
}

/* Flashing indicator for nav items with pending action */
.nav-item-offen::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
    animation: nav-offen-pulse 1.6s ease-in-out infinite;
}
@keyframes nav-offen-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 50%, transparent); }
    50%       { opacity: .7; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 0%, transparent); }
}

.nav-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.65;
    transition: opacity var(--ease);
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
    opacity: 1;
}

.nav-divider {
    height: 1px;
    background: var(--sb-divider);
    margin: 5px 14px;
}

/* =================================================== */
/* Sidebar – Footer                                    */
/* =================================================== */
.sidebar-bottom {
    padding: 6px 0;
    border-top: 1px solid var(--sb-divider);
    flex-shrink: 0;
}

.version-string {
    font-size: 10px;
    color: var(--sb-text);
    opacity: 0.35;
    padding: 2px 20px 6px;
    white-space: nowrap;
}

/* =================================================== */
/* Upload overlay (app-main drag target)               */
/* =================================================== */
.upload-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 400;
    pointer-events: none;
}

#app-main.drag-active .upload-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    border: 2px dashed var(--brand);
    border-radius: var(--r);
}

.upload-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--brand);
    font-size: 18px;
    font-weight: 600;
    pointer-events: none;
    user-select: none;
}

.upload-overlay-inner svg {
    width: 52px;
    height: 52px;
}

/* =================================================== */
/* Top Bar                                             */
/* =================================================== */
.top-bar {
    height: var(--tb-h);
    background: var(--tb-bg);
    border-bottom: 1px solid var(--tb-border);
    display: flex;
    align-items: center;
    padding: 0 10px 0 14px;
    gap: 2px;
    flex-shrink: 0;
    box-shadow: var(--shadow-xs);
}

.top-bar .title {
    flex: 0 1 auto;
    font-size: 15px;
    font-weight: 600;
    color: var(--t1);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 6px;
    letter-spacing: -0.01em;
}

/* Section icon left of the topbar title */
.topbar-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--t3);
    stroke: currentColor;
    display: block;
    margin-left: 4px;
}

/* Filter chips in topbar */
.filter-chips {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 5px;
    height: 16px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 3px;
    white-space: nowrap;
    text-decoration: none;
    line-height: 16px;
    transition: opacity var(--ease);
}
.filter-chip:hover { opacity: 0.8; }
.filter-chip--default { background: var(--bg-row-hover); color: var(--t3); }
.filter-chip--true  { background: #dcfce7; color: #166534; }
.filter-chip--false { background: #fee2e2; color: #991b1b; }
.filter-chip-x {
    font-size: 10px;
    font-weight: 700;
    opacity: 0.55;
    line-height: 1;
}
.filter-chip:hover .filter-chip-x { opacity: 1; }

[data-theme="dark"] .filter-chip--default { background: rgba(255,255,255,0.08); color: var(--t3); }
[data-theme="dark"] .filter-chip--true  { background: rgba(16,185,129,0.20); color: #6ee7b7; }
[data-theme="dark"] .filter-chip--false { background: rgba(239,68,68,0.20); color: #fca5a5; }

.breadcrumb-nav {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    padding: 0 6px;
    gap: 2px;
    font-size: 14px;
}

.breadcrumb-seg {
    white-space: nowrap;
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb-seg:hover { text-decoration: underline; }

.breadcrumb-current {
    color: var(--t1);
    font-weight: 600;
    pointer-events: none;
}

.breadcrumb-sep {
    color: var(--t4);
    flex-shrink: 0;
    padding: 0 2px;
    font-size: 13px;
}

/* ─── Top Bar Icons ──────────────────────────────── */
.hamburger {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    cursor: pointer;
    color: var(--tb-icon);
    flex-shrink: 0;
    transition: background var(--ease), color var(--ease);
    stroke: currentColor;
}

.hamburger:hover {
    background: var(--hover-icon-bg);
    color: var(--brand);
}

.toolicon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--tb-icon);
    transition: color var(--ease);
    stroke: currentColor;
}

/* Auf-/Zuklappen-Button: Icon dreht sich mit dem Zustand */
.kf-toggle-all-icon {
    transition: transform var(--ease), color var(--ease);
}
.kf-toggle-all-open .kf-toggle-all-icon {
    transform: rotate(180deg);
}

.top-bar a {
    display: flex;
    align-items: center;
    padding: 7px;
    border-radius: var(--r-sm);
    transition: background var(--ease);
}

.top-bar a:hover {
    background: var(--hover-icon-bg);
    text-decoration: none;
}

.top-bar a:hover .toolicon { color: var(--brand); }

.topbar-actions button {
    display: flex;
    align-items: center;
    padding: 7px;
    border: none;
    background: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--ease);
    color: var(--tb-icon);
}
.topbar-actions button:hover { background: var(--hover-icon-bg); }
.topbar-actions button:hover .toolicon { color: var(--brand); }

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ─── Top Bar Search ─────────────────────────────── */
.topbar-search {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0 2px;
}

.topbar-search-icon {
    position: absolute;
    left: 9px;
    width: 14px;
    height: 14px;
    color: var(--tb-icon);
    pointer-events: none;
    stroke: currentColor;
    transition: color var(--ease);
}

.topbar-search input[type="search"] {
    width: 150px;
    height: 30px;
    font-family: var(--font);
    font-size: 13px;
    color: var(--t1);
    background: var(--bg-app);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0 12px 0 30px;
    outline: none;
    transition: width var(--ease), background var(--ease),
                border-color var(--ease), box-shadow var(--ease);
}

.topbar-search input[type="search"]::placeholder { color: var(--t4); }

.topbar-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

.topbar-search input[type="search"]:hover { background: var(--hover-icon-bg); }

.topbar-search input[type="search"]:focus {
    width: 220px;
    background: var(--bg-card);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.topbar-search:focus-within .topbar-search-icon { color: var(--brand); }

.hamburger { display: none; }

/* ─── Sidebar Submenu ────────────────────────────── */
.nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
}

.nav-submenu.open {
    max-height: 300px;
}

.nav-subitem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 38px;
    margin: 1px 6px;
    border-radius: var(--r-sm);
    color: var(--sb-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: none;
    width: calc(100% - 12px);
    white-space: nowrap;
}

.nav-subitem:hover {
    background: var(--sb-hover);
    color: var(--sb-text-hover);
    text-decoration: none;
}

.nav-subitem .nav-icon {
    width: 14px;
    height: 14px;
}

.nav-chevron {
    width: 12px;
    height: 12px;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.45;
    transition: transform 0.2s ease;
}

.nav-item-settings.open .nav-chevron {
    transform: rotate(180deg);
}

/* =================================================== */
/* Content Area                                        */
/* =================================================== */
.content {
    flex: 1;
    overflow-y: auto;
    background: var(--bg-app);
    position: relative;
    min-height: 0;
}

.content header {
    background: var(--bg-card);
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
}

.content h2 {
    margin: 0 0 8px;
    color: var(--t1);
    font-size: 1.2rem;
}

/* =================================================== */
/* Buttons                                             */
/* =================================================== */
button,
.btn,
a.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    transition: background var(--ease), box-shadow var(--ease);
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

button:hover,
.btn:hover,
a.btn:hover {
    background: var(--brand-dark);
    text-decoration: none;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--brand) 28%, transparent);
}

.btn-secondary,
a.btn-secondary {
    background: transparent;
    color: var(--t2);
    border: 1px solid var(--border-dark);
    box-shadow: none;
}

.btn-secondary:hover,
a.btn-secondary:hover {
    background: var(--bg-app);
    border-color: var(--t4);
    color: var(--t1);
    box-shadow: none;
}

.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-danger { background: var(--error-solid); }
.btn-danger:hover { background: var(--error-solid-hover); box-shadow: 0 2px 10px rgba(197, 48, 48, 0.28); }
.text-muted { color: var(--t4); }

/* =================================================== */
/* Forms & Inputs                                      */
/* =================================================== */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
    font-family: var(--font);
    font-size: 13px;
    color: var(--t1);
    background: var(--bg-card);
    border: 1px solid var(--border-dark);
    border-radius: var(--r-sm);
    padding: 7px 10px;
    transition: border-color var(--ease), box-shadow var(--ease);
    outline: none;
    width: 100%;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

input::placeholder,
textarea::placeholder {
    color: var(--t4);
}

label {
    font-size: 13px;
    font-weight: 500;
    color: var(--t2);
    display: block;
    margin-bottom: 4px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    padding: 8px 0;
}

.form-grid .form-group {
    display: contents;
}

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

.inline-input {
    font-family: var(--font);
    font-size: 13px;
    color: var(--t1);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    padding: 4px 8px;
    width: 100%;
    transition: border-color var(--ease), box-shadow var(--ease);
    outline: none;
    resize: none;
}

.inline-input:focus {
    background: var(--bg-card);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.inline-input[readonly] {
    color: var(--t3);
}

.invalid-feedback {
    font-size: 11.5px;
    color: var(--error-text);
    margin-top: 3px;
}

.form-privacy {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-self: end;
    margin: -4px 0 2px;
    font-size: 12px;
    color: var(--t2);
    cursor: pointer;
    user-select: none;
}
.form-privacy input[type="checkbox"] {
    margin: 0;
}

.error,
ul.errorlist {
    background: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-border);
    border-radius: var(--r-sm);
    padding: 10px 14px;
    margin: 8px 0;
    list-style: none;
    font-size: 13px;
}

/* =================================================== */
/* Table View (full-height layout)                     */
/* =================================================== */

/* Fills the content area so .table-container gets a defined height */
.table-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* =================================================== */
/* Tables                                              */
/* =================================================== */
.table-container {
    background: var(--bg-card);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    /* Fills the table-view and scrolls — giving sticky thead its scroll context */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
}

table,
.forum table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font);
    font-size: 13px;
    background: var(--bg-card);
    margin: 0;
}

thead th {
    position: sticky;
    top: 0;
    background: var(--bg-thead);
    z-index: 2;
    border-bottom: 1px solid var(--border);
}

th {
    padding: 9px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--t3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    position: relative;
}

th.orderable:hover {
    background: var(--hover-bg);
    color: var(--t1);
}

th.orderable a {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 4px;
}

td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--bg-row-hover);
    color: var(--t2);
    vertical-align: middle;
}

tr:last-child td { border-bottom: none; }

tr[data-href] { cursor: pointer; }

tbody tr:hover td { background: var(--bg-row-hover); }

th.right, td.right { text-align: right; }
th.center, td.center { text-align: center; }

th.asc a::after  { content: " ↑"; color: var(--brand); font-size: 10px; font-weight: 700; }
th.desc a::after { content: " ↓"; color: var(--brand); font-size: 10px; font-weight: 700; }

time {
    font-size: 11.5px;
    color: var(--t4);
}

.table-container img { max-width: 100%; height: auto; }

/* =================================================== */
/* Konzert Split Layout                                */
/* =================================================== */
.split-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.split-layout input[name="csrfmiddlewaretoken"] { display: none; }

.split-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.split-panel--konzert {
    width: 60%;
    flex: 0 0 auto;
    border-radius: var(--r) 0 0 var(--r);
    border-right: none;
}

.split-panel--pool {
    width: 40%;
    flex: 0 0 auto;
    border-radius: 0 var(--r) var(--r) 0;
}

.split-divider {
    width: 5px;
    background: var(--border);
    cursor: col-resize;
    flex-shrink: 0;
    position: relative;
    transition: background var(--ease);
}

.split-divider:hover,
.split-divider.dragging {
    background: var(--brand);
}

/* Touch target for divider */
.split-divider::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -8px;
    right: -8px;
}

.split-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 16px;
    height: 36px;
    border-bottom: 2px solid var(--brand);
    flex-shrink: 0;
    background: var(--bg-card);
}

.split-header strong {
    font-size: 0.875rem;
    color: var(--t1);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.pool-search {
    position: relative;
    display: flex;
    align-items: center;
}
.pool-search-icon {
    position: absolute;
    left: 7px;
    width: 13px;
    height: 13px;
    color: var(--t4);
    pointer-events: none;
    stroke: currentColor;
    transition: color var(--ease);
}
.pool-search input[type="search"] {
    width: 120px;
    height: 28px;
    font-family: var(--font);
    font-size: 13px;
    color: var(--t1);
    background: var(--bg-app);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0 10px 0 26px;
    outline: none;
    transition: width var(--ease), background var(--ease),
                border-color var(--ease), box-shadow var(--ease);
}
.pool-search input[type="search"]::placeholder { color: var(--t4); }
.pool-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.pool-search input[type="search"]:hover { background: var(--hover-icon-bg); }
.pool-search input[type="search"]:focus {
    width: 180px;
    background: var(--bg-card);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}
.pool-search:focus-within .pool-search-icon { color: var(--brand); }

.split-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
}

.split-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--bg-row-hover);
    transition: background var(--ease);
    font-size: 13px;
    user-select: none;
}

.split-item:hover { background: var(--hover-bg); }

.split-item-handle {
    flex-shrink: 0;
    color: var(--t4);
    font-size: 14px;
    cursor: grab;
    opacity: 0.25;
    transition: opacity var(--ease);
    line-height: 1;
}

.split-item:hover .split-item-handle,
.split-item-handle:active { opacity: 1; }

.split-item-pos {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font: 700 11px var(--mono);
    font-variant-numeric: tabular-nums;
}

.split-item-titel {
    flex: 1;
    min-width: 0;
    color: var(--t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.split-item-eig {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0;  /* collapse chip whitespace */
}

.split-item-eig .eig-chip { margin-left: 3px; }
.split-item-eig .eig-chip:first-child { margin-left: 0; }

.split-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--t4);
    font-size: 13px;
}

/* Drag feedback */
.split-item.sortable-ghost {
    opacity: 0.3;
    background: var(--brand-light);
}

.split-item.sortable-chosen {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-radius: var(--r);
}

.split-item.sortable-drag {
    opacity: 0.9;
}

/* Dark mode */
[data-theme="dark"] .split-item-pos {
    background: var(--brand-dark);
}


[data-theme="dark"] .split-item.sortable-chosen {
    box-shadow: 0 2px 8px rgba(0,0,0,0.40);
}

[data-theme="dark"] .split-divider:hover,
[data-theme="dark"] .split-divider.dragging {
    background: var(--brand);
}

/* Mobile: stack vertically */
@media (max-width: 600px) {
    .split-layout {
        flex-direction: column;
    }
    .split-divider {
        width: auto;
        height: 5px;
        cursor: row-resize;
    }
    .split-divider::after {
        left: 0;
        right: 0;
        top: -8px;
        bottom: -8px;
    }
    .split-panel--konzert {
        width: auto;
        height: 50%;
        border-radius: var(--r) var(--r) 0 0;
        border-right: 1px solid var(--border);
        border-bottom: none;
    }
    .split-panel--pool {
        width: auto;
        flex: 1;
        border-radius: 0 0 var(--r) var(--r);
    }
}

/* =================================================== */
/* Offcanvas Panels                                    */
/* =================================================== */
.offcanvas {
    position: fixed;
    top: var(--tb-h);
    right: 0;
    height: calc(100% - var(--tb-h));
    background: var(--bg-card);
    box-shadow: -2px 0 16px rgba(0,0,0,0.10);
    transform: translateX(calc(100% + 2px));
    transition: transform var(--ease);
    overflow-y: auto;
    padding: 16px;
    z-index: 500;
    border-left: 1px solid var(--border);
    font-size: 13px;
}

.offcanvas.open { transform: translateX(0); }

.offcanvas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.offcanvas-header strong { font-size: 0.875rem; color: var(--t1); }
.offcanvas-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-muted);
    padding: 0 4px;
    line-height: 1;
}
.offcanvas-close:hover { color: var(--brand); }

#ColumnSelector { width: 200px; z-index: 503; }
#Filter         { width: 320px; z-index: 501; }
@media (max-width: 480px) {
    #Filter     { width: 100%; max-width: 360px; }
}
#Action         { width: min(300px, calc(100vw - 24px)); z-index: 502; display: flex; flex-direction: column; gap: 8px; padding: 12px; }
#AddPanel       { width: 420px; z-index: 504; font-size: 1rem; }
.add-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--brand);
}
.add-panel-header strong { font-size: 1rem; color: var(--t1); }
.add-panel-close {
    background: none; border: none; cursor: pointer;
    font-size: 1.2rem; color: var(--text-muted); padding: 0 4px;
}
.add-panel-close:hover { color: var(--brand); }
.add-panel form .form-group { margin-bottom: 14px; }
.add-panel form label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 4px; color: var(--t2); }
.add-panel form .checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: normal; }
.add-panel form input[type="text"],
.add-panel form input[type="email"],
.add-panel form input[type="password"],
.add-panel form input[type="number"],
.add-panel form input[type="date"],
.add-panel form input[type="datetime-local"],
.add-panel form select,
.add-panel form textarea { width: 100%; }
.add-panel-checkboxes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.add-panel-checkboxes label { display: flex; align-items: center; gap: 6px; font-weight: normal; font-size: 0.875rem; }
.add-panel-actions { display: flex; gap: 10px; margin-top: 20px; }
.add-panel-actions .btn { flex: 1; }
.add-panel-hint { font-size: 0.8rem; color: var(--t3); margin: 8px 0 16px; line-height: 1.4; }
.artikel-add-label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 6px; color: var(--t2); }
.artikel-add-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 1.05rem;
    font-family: var(--font);
    border: 1px solid var(--border-dark);
    border-radius: var(--r);
    background: var(--bg-card);
    color: var(--t1);
    outline: none;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.artikel-add-input::placeholder { color: var(--t3); }
.artikel-add-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.artikel-add-input.is-invalid { border-color: #c53030; box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.18); }
.artikel-add-error { display: none; margin-top: 6px; font-size: 0.8rem; color: #c53030; }
.artikel-add-input.is-invalid ~ .artikel-add-error { display: block; }

/* Dropzone fields in AddPanel */
.dropzone-field {
    border: 2px dashed var(--border-dark);
    border-radius: var(--r-sm);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    min-height: 48px;
    margin-bottom: 8px;
    transition: border-color var(--ease), background var(--ease);
}
.dropzone-field:hover,
.dropzone-field.dz-drag-hover {
    border-color: var(--brand);
    background: var(--brand-light);
}
.dropzone-field-placeholder {
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.dropzone-field-uploading {
    font-size: 0.8125rem;
    color: var(--t3);
}
.dropzone-field-done {
    font-size: 0.8125rem;
    color: var(--brand);
    font-weight: 600;
}
.dropzone-field-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: var(--r-sm);
    vertical-align: middle;
    margin-right: 8px;
}

.action-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.action-divider {
    border-top: 1px solid var(--border);
    margin: 4px 0;
}

.action-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Aktionen sind eine Liste: volle Breite, Icon links, Text linksbündig —
   so bleibt jeder Button lesbar, egal wie lang die Beschriftung ist. */
.action-btn {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    flex-shrink: 0;
}

.action-btn svg { flex: 0 0 auto; }

.action-move-btns {
    display: grid;
    gap: 6px;
    flex: 0 0 auto;   /* auf niedrigen Fenstern schrumpft die Ordnerliste, nicht die Buttons */
}

.folder-picker {
    flex: 0 1 auto;   /* wächst nur mit dem Inhalt, gibt bei Platzmangel als Erstes nach */
    min-height: 0;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--bg-app);
}

.folder-picker-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    font-size: 0.8125rem;
    cursor: pointer;
    border-radius: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--t2);
    margin: 0;
    font-weight: normal;
}

.folder-picker-item input[type="radio"] {
    flex-shrink: 0;
    accent-color: var(--brand);
}

.folder-picker-item:hover { background: var(--bg-row-hover); }

.folder-picker-item:has(input:checked) {
    background: var(--brand-light);
    color: var(--brand);
    font-weight: 600;
}

/* Native <dialog> styling */
.app-dialog {
    border: none;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: 24px 28px;
    min-width: 300px;
    font-family: var(--font);
    font-size: 0.9375rem;
    position: relative;
}

.app-dialog::backdrop {
    background: rgba(0, 0, 0, 0.35);
}

.app-dialog h3 {
    margin: 0 0 16px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--t1);
}

.dialog-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-muted);
    padding: 0 4px;
    line-height: 1;
}
.dialog-close:hover { color: var(--brand); }

.app-dialog input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-dark);
    border-radius: var(--r-sm);
    font-size: 0.9375rem;
    font-family: var(--font);
    margin-bottom: 16px;
    outline: none;
}

.app-dialog input[type="text"]:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.dialog-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ─── File ID column in Ordner table ────────────────── */
.file-id-cell {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    width: 1%;
    user-select: all;
}

/* ─── Inline new-folder row ─────────────────────────── */
.nf-row td { padding-top: 6px; padding-bottom: 6px; }
.nf-name-cell { display: flex; align-items: center; gap: 6px; }
.nf-input {
    flex: 1;
    min-width: 0;
    padding: 4px 8px;
    border: 1px solid var(--border-dark);
    border-radius: var(--r-sm);
    font-size: 0.875rem;
    font-family: var(--font);
    background: var(--bg-card);
    color: var(--t1);
    outline: none;
}
.nf-input:focus { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-ring); }
.nf-input.nf-error { border-color: #c53030; }
.nf-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-dark);
    border-radius: var(--r-sm);
    background: none;
    cursor: pointer;
    color: var(--t3);
    padding: 0;
    transition: color var(--ease), border-color var(--ease);
}
.nf-btn:hover { color: var(--brand); border-color: var(--brand); }
.nf-confirm { border-color: var(--border); }
[data-theme="dark"] .nf-input { background: var(--bg-card); }

/* ─── Filter offcanvas (redesigned) ──────────────── */
#Filter {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

#Filter .offcanvas-header {
    padding: 12px 16px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.filter-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.filter-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px 8px;
}

/* Each field wrapper from {{ form.as_div }} */
.filter-body > div {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}

.filter-body > div:last-child { margin-bottom: 0; }

/* Field labels become section headers */
.filter-body label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--t3);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Inputs and selects */
.filter-body input[type="text"],
.filter-body input[type="number"],
.filter-body input[type="search"],
.filter-body select {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--t1);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    transition: border-color var(--ease), box-shadow var(--ease);
}

.filter-body input[type="text"]:focus,
.filter-body input[type="number"]:focus,
.filter-body input[type="search"]:focus,
.filter-body select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

/* ── Tri-state sliding toggle switch ── */
.tri-toggle-select { display: none !important; }

/* Row layout in filter panel: label left, control right */
.filter-body > div:has(.tri-toggle-wrap),
.filter-body > div:has(.filter-inline) {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.filter-body > div:has(.tri-toggle-wrap) label,
.filter-body > div:has(.filter-inline) label { margin-bottom: 0; }

.filter-body .filter-inline { width: auto; padding: 4px 6px; font-size: 11px; border-radius: 999px; }

.tri-toggle-wrap { display: flex; align-items: center; }

/* The pill-shaped track */
.tri-toggle {
    position: relative;
    display: inline-flex;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px;
    user-select: none;
}

/* Sliding thumb — one segment wide, absolutely positioned */
.tri-toggle-thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 14px;
    height: calc(100% - 2px);
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    pointer-events: none;
    z-index: 0;
    transition: transform .16s cubic-bezier(.4, 0, .2, 1),
                background .16s ease;
}

/* Thumb color by state — transform is set via JS/inline style */
.tri-toggle[data-value="false"]   .tri-toggle-thumb { background: #ef4444; }
.tri-toggle[data-value="unknown"] .tri-toggle-thumb { background: #9ca3af; }
.tri-toggle[data-value="true"]    .tri-toggle-thumb { background: #22c55e; }

[data-theme="dark"] .tri-toggle[data-value="false"]   .tri-toggle-thumb { background: #dc2626; }
[data-theme="dark"] .tri-toggle[data-value="unknown"] .tri-toggle-thumb { background: #4b5563; }
[data-theme="dark"] .tri-toggle[data-value="true"]    .tri-toggle-thumb { background: #16a34a; }

/* Segments sit above the thumb (z-index 1) */
.tri-toggle-seg {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 13px;
    border: none;
    background: transparent;
    color: var(--t4);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: color .12s ease;
}

/* White text on the active (thumb-covered) segment */
.tri-toggle-seg.selected { color: #fff; }

/* Neutral hover highlight — covers the thumb color */
.tri-toggle-seg:hover { background: rgba(255, 255, 255, 0.45); border-radius: 999px; }
[data-theme="dark"] .tri-toggle-seg:hover { background: rgba(255, 255, 255, 0.12); }

/* Action buttons in the header bar */
.filter-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-header-actions .btn {
    padding: 4px 10px;
    font-size: 11px;
}

/* =================================================== */
/* Forum                                               */
/* =================================================== */

/* Full-height flex column so messages fill remaining space */
.forum-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.forum-entry {
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 10;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}

.text-container {
    display: flex;
    flex: 1;
    gap: 8px;
}

.forum-entry form {
    display: flex;
    flex: 1;
    gap: 8px;
    width: 100%;
    align-items: flex-end;
}

.forum-entry textarea {
    flex: 1;
    min-height: 68px;
    resize: vertical;
    font-size: 13px;
    padding: 8px 10px;
    line-height: 1.5;
}

.forum-entry button[type="submit"] {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.forum-entry button[type="submit"]:hover {
    background: var(--brand-dark);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 28%, transparent);
}

.forum-entry button[type="submit"]::before {
    content: "";
    border: solid #fff;
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 4px;
    transform: translate(-2px, -1px) rotate(-45deg);
}

.messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    background: var(--forum-bg);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.message,
.message_me {
    display: flex;
    align-items: flex-start;
    font-size: 13.5px;
    line-height: 1.55;
}

.message_me { flex-direction: row-reverse; }

.message .avatar {
    width: 42px;
    margin-right: 10px;
    text-align: center;
    flex-shrink: 0;
}

.message_me .avatar { width: 0; }

.message .avatar img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-card);
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
    display: block;
}

.message .avatar div {
    margin-top: 3px;
    font-size: 10.5px;
    color: var(--t3);
}

div.avatar { cursor: pointer; }

.message .content {
    background: var(--msg-bg);
    border-radius: 2px 12px 12px 12px;
    padding: 8px 12px;
    max-width: 78%;
    width: max-content;
    flex: 0 1 auto;
    overflow-y: visible;
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--msg-border);
}

.message_me .content_me {
    background: var(--msg-me-bg);
    border-radius: 12px 2px 12px 12px;
    padding: 8px 12px;
    max-width: 78%;
    width: max-content;
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--msg-me-border);
}

.message .content p,
.message_me .content_me p { margin: 0; }

.message .content time,
.message_me .content_me time {
    display: block;
    font-size: 10.5px;
    color: var(--t4);
    margin-top: 3px;
    text-align: right;
}

/* ── Reaktionen (XEP-0444) ───────────────────────────────── */
.reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}
.reactions:empty { display: none; }

.reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 11px;
    cursor: pointer;
    background: var(--bg-card);
    border: 1px solid var(--msg-border);
    color: var(--t3);
    transition: border-color .12s, background .12s;
}
.reaction-chip:hover { border-color: var(--brand); }
.reaction-chip.mine {
    background: color-mix(in srgb, var(--brand) 12%, var(--bg-card));
    border-color: var(--brand);
    color: var(--brand);
}

/* Dezenter "+"-Auslöser, erscheint beim Hover über der Nachricht. */
.reaction-add {
    align-self: center;
    margin: 0 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--msg-border);
    background: var(--bg-card);
    color: var(--t3);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s, border-color .12s, color .12s;
}
.message:hover .reaction-add,
.message_me:hover .reaction-add,
.reaction-add:focus-visible { opacity: 1; }
.reaction-add:hover { border-color: var(--brand); color: var(--brand); }

.reaction-picker {
    position: absolute;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    max-width: 230px;
    padding: 6px;
    border-radius: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}
.reaction-pick {
    border: 0;
    background: transparent;
    font-size: 19px;
    line-height: 1;
    padding: 4px;
    border-radius: 7px;
    cursor: pointer;
}
.reaction-pick:hover { background: var(--msg-border); }
.reaction-input {
    width: 46px;
    margin-left: 4px;
    padding: 4px 6px;
    font-size: 15px;
    border-radius: 7px;
    border: 1px solid var(--msg-border);
    background: var(--bg-card);
    color: var(--t2, var(--t3));
}

.message_me img,
.message img,
.message_me video,
.message video {
    max-width: 100%;
    max-height: 280px;
    height: auto;
    display: block;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    margin-top: 4px;
}

.mention {
    background: var(--mention-bg);
    border: 1px solid var(--mention-border);
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 12px;
    color: var(--mention-color);
}

.search-hl {
    background: var(--search-hl-bg);
    color: var(--search-hl-color);
    border-radius: 3px;
    padding: 0 2px;
    font-weight: 600;
}

/* ─── Forum Search Results ───────────────────────── */
.forum-search {
    height: 100%;
    overflow-y: auto;
    padding: 16px;
    background: var(--forum-bg);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.forum-search-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.forum-search-forum {
    flex-shrink: 0;
    width: 170px;
    padding-top: 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forum-search-forum:hover { text-decoration: underline; }

.forum-search-msg {
    flex: 1;
    min-width: 0;
}

.forum-search-empty {
    color: var(--t3);
    font-size: 13px;
    padding: 24px 4px;
}

@media (max-width: 768px) {
    .forum-search-row { flex-direction: column; gap: 3px; }
    .forum-search-forum {
        width: auto;
        text-align: left;
        padding-top: 0;
    }
}

/* =================================================== */
/* Member Profile                                      */
/* =================================================== */
.member-profile {
    max-width: 760px;
    margin: 20px auto;
    padding: 24px;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--t1);
}

/* Member list row tints — same palette as aufgaben perm-stimme-X.
   --kat-1..5 bzw. var(--brand) fuer Stimme A; die Dark-Tints brauchen etwas
   mehr Opazitaet (10 %/20 %) als die Light-Tints (7 %/15 %). */
.row-stimme-s { --stimme-bg: linear-gradient(color-mix(in srgb, var(--kat-1) 7%, transparent), color-mix(in srgb, var(--kat-1) 7%, transparent)), var(--bg-card); }
.row-stimme-a { --stimme-bg: linear-gradient(color-mix(in srgb, var(--brand) 7%, transparent), color-mix(in srgb, var(--brand) 7%, transparent)), var(--bg-card); }
.row-stimme-t { --stimme-bg: linear-gradient(color-mix(in srgb, var(--kat-2) 7%, transparent), color-mix(in srgb, var(--kat-2) 7%, transparent)), var(--bg-card); }
.row-stimme-b { --stimme-bg: linear-gradient(color-mix(in srgb, var(--kat-3) 7%, transparent), color-mix(in srgb, var(--kat-3) 7%, transparent)), var(--bg-card); }
.row-stimme-c { --stimme-bg: linear-gradient(color-mix(in srgb, var(--kat-4) 7%, transparent), color-mix(in srgb, var(--kat-4) 7%, transparent)), var(--bg-card); }
.row-stimme-m { --stimme-bg: linear-gradient(color-mix(in srgb, var(--kat-5) 7%, transparent), color-mix(in srgb, var(--kat-5) 7%, transparent)), var(--bg-card); }
.row-stimme-s td, .row-stimme-a td, .row-stimme-t td,
.row-stimme-b td, .row-stimme-c td, .row-stimme-m td { background: var(--stimme-bg); }
.row-inactive td { background: var(--bg-app); }

[data-theme="dark"] .row-stimme-s { --stimme-bg: linear-gradient(color-mix(in srgb, var(--kat-1) 10%, transparent), color-mix(in srgb, var(--kat-1) 10%, transparent)), var(--bg-card); }
[data-theme="dark"] .row-stimme-a { --stimme-bg: linear-gradient(color-mix(in srgb, var(--brand) 10%, transparent), color-mix(in srgb, var(--brand) 10%, transparent)), var(--bg-card); }
[data-theme="dark"] .row-stimme-t { --stimme-bg: linear-gradient(color-mix(in srgb, var(--kat-2) 10%, transparent), color-mix(in srgb, var(--kat-2) 10%, transparent)), var(--bg-card); }
[data-theme="dark"] .row-stimme-b { --stimme-bg: linear-gradient(color-mix(in srgb, var(--kat-3) 10%, transparent), color-mix(in srgb, var(--kat-3) 10%, transparent)), var(--bg-card); }
[data-theme="dark"] .row-stimme-c { --stimme-bg: linear-gradient(color-mix(in srgb, var(--kat-4) 10%, transparent), color-mix(in srgb, var(--kat-4) 10%, transparent)), var(--bg-card); }
[data-theme="dark"] .row-stimme-m { --stimme-bg: linear-gradient(color-mix(in srgb, var(--kat-5) 10%, transparent), color-mix(in srgb, var(--kat-5) 10%, transparent)), var(--bg-card); }

tr.row-stimme-s:hover td { background: linear-gradient(color-mix(in srgb, var(--kat-1) 15%, transparent), color-mix(in srgb, var(--kat-1) 15%, transparent)), var(--bg-card); }
tr.row-stimme-a:hover td { background: linear-gradient(color-mix(in srgb, var(--brand) 15%, transparent), color-mix(in srgb, var(--brand) 15%, transparent)), var(--bg-card); }
tr.row-stimme-t:hover td { background: linear-gradient(color-mix(in srgb, var(--kat-2) 15%, transparent), color-mix(in srgb, var(--kat-2) 15%, transparent)), var(--bg-card); }
tr.row-stimme-b:hover td { background: linear-gradient(color-mix(in srgb, var(--kat-3) 15%, transparent), color-mix(in srgb, var(--kat-3) 15%, transparent)), var(--bg-card); }
tr.row-stimme-c:hover td { background: linear-gradient(color-mix(in srgb, var(--kat-4) 15%, transparent), color-mix(in srgb, var(--kat-4) 15%, transparent)), var(--bg-card); }
tr.row-stimme-m:hover td { background: linear-gradient(color-mix(in srgb, var(--kat-5) 15%, transparent), color-mix(in srgb, var(--kat-5) 15%, transparent)), var(--bg-card); }

[data-theme="dark"] tr.row-stimme-s:hover td { background: linear-gradient(color-mix(in srgb, var(--kat-1) 20%, transparent), color-mix(in srgb, var(--kat-1) 20%, transparent)), var(--bg-card); }
[data-theme="dark"] tr.row-stimme-a:hover td { background: linear-gradient(color-mix(in srgb, var(--brand) 20%, transparent), color-mix(in srgb, var(--brand) 20%, transparent)), var(--bg-card); }
[data-theme="dark"] tr.row-stimme-t:hover td { background: linear-gradient(color-mix(in srgb, var(--kat-2) 20%, transparent), color-mix(in srgb, var(--kat-2) 20%, transparent)), var(--bg-card); }
[data-theme="dark"] tr.row-stimme-b:hover td { background: linear-gradient(color-mix(in srgb, var(--kat-3) 20%, transparent), color-mix(in srgb, var(--kat-3) 20%, transparent)), var(--bg-card); }
[data-theme="dark"] tr.row-stimme-c:hover td { background: linear-gradient(color-mix(in srgb, var(--kat-4) 20%, transparent), color-mix(in srgb, var(--kat-4) 20%, transparent)), var(--bg-card); }
[data-theme="dark"] tr.row-stimme-m:hover td { background: linear-gradient(color-mix(in srgb, var(--kat-5) 20%, transparent), color-mix(in srgb, var(--kat-5) 20%, transparent)), var(--bg-card); }

tr:hover td.stimme-merged-cell { background: var(--stimme-bg, var(--bg-card)); }

.avatar-circle {
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

table.mitglied-table tbody td {
    border-bottom: 1px solid var(--border);
}

table.mitglied-table tr.stimme-group-start td {
    border-top: 2px solid var(--border);
}

.stimme-merged-cell {
    position: relative;
    padding: 0;
    width: 24px;
    border-left: 2px solid var(--border) !important;
    border-right: 2px solid var(--border) !important;
}

.stimme-merged-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.profile-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.profile-image img {
    width: 110px;
    height: auto;
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

.profile-info h1 {
    margin: 0 0 4px;
    font-size: 1.4rem;
    color: var(--t1);
}

.member-title {
    font-weight: 600;
    color: var(--brand-dark);
    font-size: 12.5px;
    margin: 2px 0;
}

.member-id {
    color: var(--t4);
    font-size: 11.5px;
}

.profile-section {
    margin-bottom: 20px;
}

.profile-section h2 {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--t3);
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.contact-info,
.address-info,
.personal-info {
    display: grid;
    gap: 6px;
}

.contact-item,
.address-item,
.personal-item {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 13px;
}

.label {
    font-weight: 500;
    min-width: 155px;
    color: var(--t3);
}

.value {
    flex: 1;
    color: var(--t1);
}

/* =================================================== */
/* Detail Pages                                        */
/* =================================================== */
.detail-page {
    padding: 20px 24px;
}

.detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--r);
    background: var(--brand-light);
    color: var(--brand);
    flex-shrink: 0;
}

.detail-info h1 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--t1);
    font-weight: 600;
}

.detail-subtitle {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--t4);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.detail-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.detail-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 16px 20px;
    box-shadow: var(--shadow-sm);
}

/* Map card: flex column so the map fills remaining card height */
.detail-card:has(.detail-map) {
    display: flex;
    flex-direction: column;
}

.detail-card h3 {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--brand-dark);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--brand);
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-card h3 a {
    color: inherit;
    text-decoration: none;
}

.detail-card h3 a:hover {
    text-decoration: underline;
}

.detail-card h3 .h3-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.detail-card h3 a.h3-edit {
    display: inline-flex;
    align-items: center;
    opacity: 0.4;
    text-decoration: none;
}

.detail-card h3 a.h3-edit:hover {
    opacity: 1;
}

.detail-card-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--t2);
}

/* Forms inside detail cards */
.detail-card .form-group {
    margin-bottom: 12px;
}
.detail-card .form-group:last-child {
    margin-bottom: 0;
}
.detail-card .form-grid {
    padding: 0;
}
.detail-card .checkbox-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-card-danger {
    border-color: #fecaca;
}
.detail-card-danger h3 { color: #b91c1c; border-bottom-color: #fecaca; }
.danger-desc { margin-bottom: 12px; }
.detail-cards-spaced { margin-top: 24px; }

.detail-card-row {
    display: flex;
    gap: 8px;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px solid var(--bg-row-hover);
}
.detail-card-row:last-child { border-bottom: none; }
.detail-card-row .label {
    min-width: 100px;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    background: var(--bg-row-hover);
    color: var(--t4);
    line-height: 1.5;
}
.badge-primary {
    background: var(--brand-light);
    color: var(--brand);
}

/* Tags */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tag {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12.5px;
    border-radius: 14px;
    background: var(--bg-row-hover);
    color: var(--t2);
}
.tag-active {
    background: var(--brand-light);
    color: var(--brand);
}

/* Media rows */
.media-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--bg-row-hover);
}
.media-row:last-child { border-bottom: none; }
.media-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.media-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--t3);
}

/* Ordered list (song list) */
.detail-list {
    margin: 0;
    padding: 0 0 0 20px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--t2);
}

/* Attendance table */
.attendance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.attendance-table th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    padding: 6px 10px;
    border-bottom: 2px solid var(--border);
    color: var(--t3);
}
.attendance-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--bg-row-hover);
    vertical-align: top;
}
.attendance-table tbody tr:last-child td { border-bottom: none; }
.att-voice {
    font-weight: 600;
    color: var(--brand);
    white-space: nowrap;
}
.att-count {
    display: inline-block;
    font-weight: 700;
    min-width: 16px;
    text-align: center;
    padding: 0 5px;
    border-radius: 8px;
    font-size: 11px;
    line-height: 18px;
    margin-right: 4px;
}
.att-yes .att-count,
.att-count-yes { background: var(--status-success-bg); color: var(--status-success-text); }
.att-maybe .att-count,
.att-count-maybe { background: var(--status-warning-bg); color: var(--status-warning-text); }
.att-no .att-count,
.att-count-no { background: var(--status-danger-bg); color: var(--status-danger-text); }
.att-na .att-count,
.att-count-na { background: var(--bg-row-hover); color: var(--t4); }

/* Inline attendance badges (list table) */
.att-inline {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}
.att-inline-yes { background: var(--status-success-bg); color: var(--status-success-text); }
.att-inline-no { background: var(--status-danger-bg); color: var(--status-danger-text); }
.att-inline-maybe { background: var(--status-warning-bg); color: var(--status-warning-text); }
.att-inline-na {
    background: var(--bg-row-hover);
    color: var(--t4);
    border: 1.5px solid transparent;
    animation: att-na-flash 1.6s ease-in-out infinite;
}
@keyframes att-na-flash {
    0%, 100% { border-color: transparent; box-shadow: none; }
    50%       { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent); }
}
.att-names {
    font-size: 12px;
    color: var(--t4);
}

/* Admin drag-and-drop chips */
.att-chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 1.5em;
}
.attendance-edit-mode .att-display { display: none; }
.attendance-edit-mode .att-chips { display: flex; }
.attendance-edit-mode .att-chips:empty::before {
    content: "–";
    color: var(--t4);
    font-size: 12px;
}
.att-chip {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-row-hover);
    color: var(--t2);
    font-size: 12px;
    line-height: 1.4;
    user-select: none;
    border: 1px solid transparent;
}
.attendance-edit-mode .attendance-single .att-chip { cursor: grab; }
.attendance-edit-mode .attendance-single .att-chip:active { cursor: grabbing; }
.attendance-edit-mode .attendance-split .att-chip { cursor: pointer; }
.att-chip.att-chip-dirty {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand-ring);
}
.att-chip.sortable-ghost { opacity: 0.4; }
.att-chip.sortable-chosen { background: var(--brand); color: #fff; }

/* Mobile tap-to-move popover for attendance chips (mirrors .reaction-picker) */
.att-move-picker {
    position: absolute;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
    padding: 6px;
    border-radius: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}
.att-move-pick {
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 13px;
    padding: 6px 8px;
    border-radius: 7px;
    cursor: pointer;
    color: var(--t2);
}
.att-move-pick:hover,
.att-move-pick:focus-visible { background: var(--msg-border); }

.detail-card h3 button.h3-edit {
    display: inline-flex;
    align-items: center;
    opacity: 0.4;
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
}
.detail-card h3 button.h3-edit:hover { opacity: 1; }
.detail-card h3 button.h3-edit[hidden] { display: none; }

.anwesenheit-save-btn,
.anwesenheit-cancel-btn {
    display: inline-block;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 6px;
    border: 1px solid var(--brand);
    cursor: pointer;
}
.anwesenheit-save-btn { background: var(--brand); color: #fff; }
.anwesenheit-save-btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.anwesenheit-cancel-btn { background: transparent; color: var(--brand); }
.anwesenheit-cancel-btn:hover { background: var(--brand-light); }
.anwesenheit-save-btn[hidden],
.anwesenheit-cancel-btn[hidden] { display: none; }
.anwesenheit-save-btn:disabled { opacity: 0.6; cursor: wait; }

/* Attendance split layout (mobile) */
.attendance-split {
    display: none;
    gap: 12px;
}

.attendance-split .attendance-table {
    flex: 1;
    min-width: 0;
}

.attendance-split .attendance-table + .attendance-table { margin-top: 12px; }

/* Mobile: hide single table, show split */
@media (max-width: 768px) {
    .attendance-single { display: none; }
    .attendance-split { display: block; }
}

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

.detail-map {
    flex: 1;
    min-height: 250px;
    width: 100%;
    border-radius: var(--r-sm);
    z-index: 0;
}

/* yes/maybe/no brauchen hier nichts: die --status-*-Tokens sind bereits
   dunkelmodus-tauglich. Nur „keine Angabe" hat kein Ampel-Pendant. */
[data-theme="dark"] .att-na .att-count,
[data-theme="dark"] .att-count-na { background: rgba(255,255,255,0.08); color: var(--t4); }

[data-theme="dark"] .att-inline-na { background: rgba(255,255,255,0.08); color: var(--t4); border-color: transparent; }

/* =================================================== */
/* Zusage Widget                                        */
/* =================================================== */
.zusage-widget {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    animation: zusage-fade 0.2s ease;
}

@keyframes zusage-fade {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

.zusage-state-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.zusage-state-yes   { background: var(--status-success-bg); color: var(--status-success-text); border: 1.5px solid var(--status-success-border); }
.zusage-state-no    { background: var(--status-danger-bg);  color: var(--status-danger-text);  border: 1.5px solid var(--status-danger-border); }
.zusage-state-maybe { background: var(--status-warning-bg); color: var(--status-warning-text); border: 1.5px solid var(--status-warning-border); }
.zusage-state-na    { background: var(--bg-row-hover); color: var(--t4); border: 1.5px solid var(--border); }

.zusage-locked-note { font-size: 12px; color: var(--t4); font-style: italic; }

.zusage-actions      { display: flex; gap: 6px; flex-wrap: wrap; }
.zusage-actions form { margin: 0; padding: 0; }

.zusage-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: var(--r-sm);
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    border: 1.5px solid transparent;
    background: transparent;
    line-height: 1.5;
    white-space: nowrap;
    transition: background var(--ease), border-color var(--ease),
                color var(--ease), box-shadow var(--ease);
}

.zusage-btn-yes   { background: var(--status-success-bg); color: var(--status-success-text); border-color: var(--status-success-border); }
.zusage-btn-yes:hover   { background: var(--status-success-solid); color: #fff; border-color: var(--status-success-solid); box-shadow: 0 2px 8px rgba(22,163,74,.25); }
.zusage-btn-maybe { background: var(--status-warning-bg); color: var(--status-warning-text); border-color: var(--status-warning-border); }
.zusage-btn-maybe:hover { background: var(--status-warning-solid); color: #fff; border-color: var(--status-warning-solid); box-shadow: 0 2px 8px rgba(202,138,4,.25); }
.zusage-btn-no    { background: var(--status-danger-bg); color: var(--status-danger-text); border-color: var(--status-danger-border); }
.zusage-btn-no:hover    { background: var(--status-danger-solid); color: #fff; border-color: var(--status-danger-solid); box-shadow: 0 2px 8px rgba(220,38,38,.25); }

/* Nur der Nicht-Ampel-Zustand braucht eine eigene Dark-Mode-Regel — die
   Farbzustaende ziehen ihre Werte aus den --status-*-Tokens. */
[data-theme="dark"] .zusage-state-na    { background: rgba(255,255,255,.05); color: var(--t4); border-color: rgba(255,255,255,.08); }

/* Next-event banner */
.termin-banner[hidden] { display: none; }
.termin-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    margin-bottom: 18px;
    background: var(--brand-light);
    border: 1px solid var(--brand-ring);
    border-left: 4px solid var(--brand);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
}
.termin-banner-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.termin-banner-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--brand);
}
.termin-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.termin-banner-line1 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.termin-banner-countdown {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand);
    white-space: nowrap;
}
.termin-banner-titel {
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.termin-banner-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    white-space: nowrap;
}
.termin-banner-line2 {
    font-size: 12px;
    color: var(--t3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.termin-banner-main:hover .termin-banner-titel { text-decoration: underline; }
.termin-banner-zusage { flex: 0 0 auto; }
.termin-banner-dismiss {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: none;
    background: transparent;
    color: var(--t4);
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: background var(--ease), color var(--ease);
}
.termin-banner-dismiss:hover { background: var(--bg-row-hover); color: var(--t2); }

@media (max-width: 640px) {
    /* Dismiss button stays pinned to the top right corner instead of flowing
       into its own row; the text reserves space for it. */
    .termin-banner { flex-wrap: wrap; gap: 10px; position: relative; }
    .termin-banner-main { flex: 1 1 100%; order: 1; padding-right: 28px; }
    .termin-banner-zusage { order: 2; flex: 1 1 100%; }
    .termin-banner-dismiss {
        position: absolute;
        top: 6px;
        right: 6px;
    }
}

/* Invite list */
.invite-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.invite-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--bg-row-hover);
}
.invite-row:last-child { border-bottom: none; }

/* Form actions */
.form-actions {
    display: flex;
    gap: 10px;
    padding: 16px 0;
}

/* Form field with inline action button (e.g. "+Ort" next to dropdown) */
.form-field-with-action {
    display: flex;
    gap: 8px;
    align-items: center;
}
.form-field-with-action select {
    flex: 1;
}
.form-field-with-action .btn-sm {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 0.85rem;
}

/* Search-select (pill-style input with hidden select) */
.search-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}
.search-select-icon {
    position: absolute;
    left: 9px;
    width: 14px;
    height: 14px;
    color: var(--t4);
    pointer-events: none;
    stroke: currentColor;
    transition: color var(--ease);
}
.search-select-input {
    width: 100%;
    height: 34px;
    font-family: var(--font);
    font-size: 0.95rem;
    color: var(--t1);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 0 10px 0 30px;
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.search-select-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}
.search-select-wrap:focus-within .search-select-icon {
    color: var(--brand);
}
.search-select-input::placeholder {
    color: var(--t4);
}
.search-select-input::-webkit-search-cancel-button {
    cursor: pointer;
}
.search-select-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: var(--bg-row-hover);
    color: var(--t2);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    flex-shrink: 0;
    transition: background var(--ease), color var(--ease);
}
.search-select-add:hover {
    background: var(--brand);
    color: #fff;
}
.search-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 40px;
    z-index: 600;
    max-height: 200px;
    overflow-y: auto;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    display: none;
    margin-top: 2px;
}
.search-select-dropdown.active {
    display: block;
}
.search-select-item {
    display: block;
    width: 100%;
    padding: 7px 12px;
    background: transparent;
    color: var(--t1);
    border: none;
    border-radius: var(--r-sm);
    text-align: left;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-select-item:hover,
.search-select-item.selected {
    background: var(--bg-row-hover);
    color: var(--t1);
}

/* Checkbox row in forms */
.checkbox-group label,
.checkbox-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--t2);
    margin-right: 16px;
    cursor: pointer;
}
.checkbox-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 4px;
}

/* Single-column cards on small screens */
@media (max-width: 768px) {
    .detail-cards { grid-template-columns: 1fr; }
    .attendance-single { display: none; }
    .attendance-split { display: block; }
}

[data-theme="dark"] .detail-icon { background: color-mix(in srgb, var(--brand) 15%, transparent); }
[data-theme="dark"] .detail-card-danger { border-color: #7f1d1d; }
[data-theme="dark"] .detail-card-danger h3 { color: #fca5a5; border-bottom-color: #7f1d1d; }
[data-theme="dark"] .badge-primary { background: color-mix(in srgb, var(--brand) 20%, transparent); }
[data-theme="dark"] .tag-active { background: color-mix(in srgb, var(--brand) 15%, transparent); }
[data-theme="dark"] .detail-card-row { border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .media-row { border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .invite-row { border-bottom-color: rgba(255,255,255,0.05); }

/* =================================================== */
/* Wiki / Articles                                     */
/* =================================================== */
.wiki {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.75;
    color: var(--t2);
    padding: 20px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.wiki h1 {
    font-size: 1.45em;
    color: var(--brand-dark);
    border-bottom: 2px solid var(--brand);
    padding-bottom: 0.3em;
    margin-bottom: 0.9em;
}

.wiki h2 {
    font-size: 1.2em;
    color: var(--brand-dark);
    margin-top: 1.5em;
}

.wiki h3 {
    font-size: 1.05em;
    color: var(--t1);
    margin-top: 1.2em;
}

.wiki p { margin-bottom: 1em; }

.wiki a { color: var(--brand); }
.wiki a:hover { text-decoration: underline; }

.wiki strong { font-weight: 600; }

.datei-preview {
    max-width: 200px;
    max-height: 200px;
    border: 1px solid var(--border);
    border-radius: 4px;
    vertical-align: middle;
}

/* View context uses block layout so float works (text wraps around figures). */
/* The flex column on .wiki is only needed in the editor so the textarea fills height. */
.wiki-page .wiki {
    display: block;
    height: auto;
}

/* ── Right-floated file thumbnails ────────────────── */
.wiki-page .wiki .wiki-figure {
    float: right;
    clear: right;
    margin: 0.2em 0 0.8em 1.2em;
    max-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 6px;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.wiki-page .wiki .wiki-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--r-sm);
    margin: 0;
    box-shadow: none;
}

.wiki-page .wiki .wiki-figure figcaption {
    font-size: 11.5px;
    color: var(--t3);
    margin-top: 6px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wiki-page .wiki .wiki-figure a {
    border-bottom: none;
}
.wiki-page .wiki .wiki-figure a:hover {
    border-bottom: none;
}

/* Mobile: floaten aufheben, damit der Text lesbar bleibt */
@media (max-width: 768px) {
    .wiki-page .wiki .wiki-figure {
        float: none;
        clear: none;
        margin: 1em auto;
        max-width: 100%;
    }
}

[data-theme="dark"] .wiki-page .wiki .wiki-figure {
    background: var(--bg-card);
    border-color: rgba(255, 255, 255, 0.07);
}

.wiki pre {
    background: var(--pre-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 14px 16px;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.6;
    margin: 1em 0;
    position: relative;
}

.wiki-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    color: var(--muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.wiki-copy-btn svg { width: 100%; height: 100%; }
.wiki pre:hover .wiki-copy-btn { opacity: 1; }
.wiki-copy-btn:hover { color: var(--text); border-color: var(--border); }
.wiki-copy-btn--done { color: var(--brand) !important; opacity: 1 !important; }

.wiki textarea {
    width: 100%;
    flex: 1;
    box-sizing: border-box;
    min-height: 100px;
    font-family: var(--mono);
    font-size: 13px;
    border: 1px solid var(--border-dark);
    border-radius: var(--r-sm);
    padding: 10px;
    resize: vertical;
}

.wiki .wiki {
    border-left: 3px solid var(--brand);
    padding-left: 12px;
}

.wiki span.title {
    font-style: italic;
    color: var(--t3);
}

span.not_found {
    background: #fef9c3;
    border-radius: 2px;
    padding: 0 2px;
}

/* =================================================== */
/* Article editor                                     */
/* =================================================== */
.article-editor {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-app);
}

/* Top / bottom action bars */
.ae-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--bg-card);
    flex-shrink: 0;
}
.ae-bar-top { border-bottom: 1px solid var(--border); }
.ae-bar-foot { border-top: 1px solid var(--border); }

/* Identity block — which article is being edited */
.ae-ident {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
.ae-ident-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    padding: 8px;
    box-sizing: border-box;
    color: var(--brand);
    background: var(--brand-light);
    border-radius: var(--r);
}
.ae-ident-text { min-width: 0; }
.ae-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--t1);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ae-base {
    font-size: 12px;
    color: var(--t3);
}
.ae-base-new {
    color: var(--brand);
    font-weight: 500;
}

/* Collapsible syntax cheat-sheet */
.ae-help {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.ae-help > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--t3);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.ae-help > summary::-webkit-details-marker { display: none; }
.ae-help > summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform var(--ease);
}
.ae-help[open] > summary::before { transform: rotate(90deg); }
.ae-help > summary:hover { color: var(--brand); }

.ae-cheats {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    padding: 2px 20px 14px;
}
.ae-cheat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--t3);
}
.ae-cheat code {
    font-family: var(--mono);
    font-size: 11px;
    background: var(--pre-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 2px 6px;
    color: var(--t1);
    white-space: nowrap;
}

/* Editor body — textarea fills remaining height */
.ae-body {
    flex: 1;
    min-height: 0;
    display: flex;
    padding: 16px 20px;
}
.article-editor .wiki {
    padding: 0;
    flex: 1;
    min-height: 0;
}
.article-editor .wiki textarea {
    min-height: 0;
    resize: none;
    background: var(--bg-card);
    color: var(--t1);
    line-height: 1.7;
    padding: 16px 18px;
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.article-editor .wiki textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

/* Footer change-summary input */
.ae-comment {
    flex: 1;
    min-width: 0;
}

@media (max-width: 768px) {
    .ae-bar { padding: 10px 14px; }
    .ae-body { padding: 12px 14px; }
    .ae-help > summary,
    .ae-cheats { padding-left: 14px; padding-right: 14px; }
}

/* === Wiki Tables === */
.wiki-table {
    border-collapse: collapse;
    margin: 1.2em 0;
    width: 100%;
    font-size: 0.9em;
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.wiki-table th,
.wiki-table td {
    padding: 8px 14px;
    border: 1px solid var(--border);
    vertical-align: top;
    text-align: left;
}

.wiki-table thead th {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    border-color: var(--brand-dark);
    border-top: none;
    letter-spacing: 0.02em;
}
.wiki-table thead th:first-child { border-left: none; }
.wiki-table thead th:last-child  { border-right: none; }
.wiki-table tbody tr:first-child td,
.wiki-table tbody tr:first-child th { border-top: none; }
.wiki-table tbody td:first-child,
.wiki-table tbody th:first-child    { border-left: none; }
.wiki-table tbody td:last-child,
.wiki-table tbody th:last-child     { border-right: none; }

.wiki-table tbody th {
    background: var(--brand-light);
    color: var(--brand-dark);
    font-weight: 600;
    border-color: color-mix(in srgb, var(--brand) 18%, transparent);
    white-space: nowrap;
}

.wiki-table tbody tr:nth-child(even) td {
    background: var(--bg-app);
}

.wiki-table tbody tr:hover td,
.wiki-table tbody tr:hover th {
    background: var(--bg-row-hover);
    transition: background var(--ease);
}

[data-theme="dark"] .wiki-table th,
[data-theme="dark"] .wiki-table td {
    border-color: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .wiki-table thead th {
    border-color: var(--brand-dark);
}

[data-theme="dark"] .wiki-table tbody th {
    background: color-mix(in srgb, var(--brand) 14%, transparent);
    color: #e89ab5;
    border-color: color-mix(in srgb, var(--brand) 20%, transparent);
}

[data-theme="dark"] .wiki-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.025);
}

/* =================================================== */
/* Wiki Page — document card layout                    */
/* =================================================== */
.wiki-page {
    background: var(--bg-card);
    min-height: 100%;
    padding: 28px 0 48px;
}

.wiki-page .version-banner {
    max-width: 820px;
    margin: 0 auto 28px;
}

.wiki-page .wiki {
    height: auto;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 52px;
    font-size: 15px;
    line-height: 1.85;
}

/* ── Headings ─────────────────────────────────────── */
.wiki-page .wiki h1 {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--t1);
    border: none;
    border-left: 4px solid var(--brand);
    padding: 0.1em 0 0.1em 16px;
    margin-bottom: 1.1em;
    line-height: 1.3;
}

.wiki-page .wiki h2 {
    font-size: 1.2em;
    color: var(--brand-dark);
    border-bottom: 2px solid var(--brand);
    padding-bottom: 0.25em;
    margin: 2em 0 0.75em;
}

.wiki-page .wiki h3 {
    font-size: 1.05em;
    color: var(--t1);
    border-left: 3px solid color-mix(in srgb, var(--brand) 35%, transparent);
    padding-left: 10px;
    margin: 1.6em 0 0.5em;
}

.wiki-page .wiki h4 {
    font-size: 0.88em;
    color: var(--t3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 1.4em 0 0.4em;
}

.wiki-page .wiki h5 {
    font-size: 0.88em;
    color: var(--t4);
    font-weight: 600;
    margin: 1.1em 0 0.3em;
}

/* ── Links ────────────────────────────────────────── */
.wiki-page .wiki a {
    color: var(--brand);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
    transition: border-color var(--ease), color var(--ease);
}
.wiki-page .wiki a:hover {
    text-decoration: none;
    border-bottom-color: var(--brand);
}

/* ── Lists ────────────────────────────────────────── */
.wiki-page .wiki ul {
    list-style: none;
    padding-left: 1.2em;
    margin: 0.5em 0 1em;
}
.wiki-page .wiki ul > li {
    position: relative;
    padding-left: 0.9em;
    margin-bottom: 0.2em;
}
.wiki-page .wiki ul > li::before {
    content: '›';
    position: absolute;
    left: -0.4em;
    color: var(--brand);
    font-weight: 700;
    font-size: 1.15em;
    line-height: 1.6;
}
.wiki-page .wiki ol {
    padding-left: 1.8em;
    margin: 0.5em 0 1em;
}
.wiki-page .wiki ol > li {
    margin-bottom: 0.2em;
}
.wiki-page .wiki ol > li::marker {
    color: var(--brand);
    font-weight: 600;
}

/* ── Block elements ───────────────────────────────── */
.wiki-page .wiki .citation {
    border-left: 4px solid var(--brand);
    background: var(--brand-light);
    padding: 10px 18px;
    margin: 1.4em 0;
    border-radius: 0 var(--r) var(--r) 0;
    color: var(--t2);
    font-style: italic;
    font-size: 0.97em;
}

.wiki-page .wiki .indent {
    padding-left: 1.4em;
    border-left: 2px solid var(--border-dark);
    color: var(--t3);
    margin: 0.3em 0 0.3em 0.5em;
}

.wiki-page .wiki .boxed {
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 6%, transparent), color-mix(in srgb, var(--brand) 2%, transparent));
    border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
    border-radius: var(--r);
    padding: 14px 18px;
    margin: 1.4em 0;
}

/* ── Code blocks — dark terminal ──────────────────── */
.wiki-page .wiki pre {
    background: var(--code-bg);
    color: var(--code-color);
    border: none;
    border-radius: var(--r);
    padding: 0;
    overflow: hidden;
    margin: 1.4em 0;
    box-shadow: var(--shadow-sm);
}
.wiki-page .wiki pre::before {
    content: '⬤  ⬤  ⬤';
    display: block;
    background: var(--code-bar-bg);
    border-bottom: 1px solid var(--border);
    padding: 7px 14px;
    font-size: 7px;
    color: var(--code-bar-dots);
    letter-spacing: 4px;
}
.wiki-page .wiki pre code {
    display: block;
    padding: 16px 20px;
    font-size: 12.5px;
    line-height: 1.7;
    font-family: var(--mono);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Media ────────────────────────────────────────── */
.wiki-page .wiki img:not([style*="width"]) {
    max-width: 100%;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm);
    margin: 0.4em 0;
}
.wiki-page .wiki audio,
.wiki-page .wiki video {
    width: 100%;
    border-radius: var(--r-sm);
    margin: 0.6em 0;
}

/* ── Mentions ─────────────────────────────────────── */
.wiki-page .wiki .mention {
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    border-color: color-mix(in srgb, var(--brand) 25%, transparent);
    color: var(--brand-dark);
    border-radius: 99px;
}

/* ── Footer ───────────────────────────────────────── */
.wiki-page .wiki #footer {
    margin-top: 2.5em;
    padding-top: 1.2em;
    border-top: 1px solid var(--border);
    justify-content: center;
    font-size: 11px;
    gap: 5px;
    opacity: 0.5;
}

/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 768px) {
    .wiki-page {
        padding: 16px 0 24px;
    }
    .wiki-page .wiki {
        padding: 0 18px;
        font-size: 14.5px;
    }
    .wiki-page .version-banner {
        margin: 0 12px 18px;
    }
    .wiki-page .wiki h1 { font-size: 1.45em; }
}

/* ── Dark mode ────────────────────────────────────── */
[data-theme="dark"] .wiki-page .wiki .citation {
    background: color-mix(in srgb, var(--brand) 12%, transparent);
}
[data-theme="dark"] .wiki-page .wiki .boxed {
    background: color-mix(in srgb, var(--brand) 7%, transparent);
    border-color: color-mix(in srgb, var(--brand) 18%, transparent);
}
[data-theme="dark"] .wiki-page .wiki .mention {
    background: color-mix(in srgb, var(--brand) 15%, transparent);
    color: #e89ab5;
    border-color: color-mix(in srgb, var(--brand) 25%, transparent);
}

/* =================================================== */
/* Password Strength                                   */
/* =================================================== */
.pw-strength {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

/* In a .form-grid the surrounding .form-group is display:contents, so the
   injected meter would otherwise land in its own grid cell and shove the
   following field sideways. Span the full width so it sits on its own row. */
.form-grid .pw-strength {
    grid-column: 1 / -1;
    margin-top: 0;
}

.pw-strength-track {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--border);
    overflow: hidden;
}

.pw-strength-bar {
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: var(--strength-0);
    transition: width 0.25s ease, background 0.25s ease;
}

.pw-strength-label {
    font-size: 12px;
    color: var(--t3);
    white-space: nowrap;
}

.pw-strength[data-score="0"] .pw-strength-bar { background: var(--strength-0); }
.pw-strength[data-score="1"] .pw-strength-bar { background: var(--strength-1); }
.pw-strength[data-score="2"] .pw-strength-bar { background: var(--strength-2); }
.pw-strength[data-score="3"] .pw-strength-bar { background: var(--strength-3); }
.pw-strength[data-score="4"] .pw-strength-bar { background: var(--strength-4); }

.pw-widget {
    margin: 8px 0 4px;
}

.pw-match {
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-top: 5px;
}

.pw-match[data-match="yes"] { color: var(--strength-4); }
.pw-match[data-match="no"]  { color: var(--strength-0); }

/* =================================================== */
/* Misc                                                */
/* =================================================== */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

#footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    color: var(--t3);
}

/* =================================================== */
/* Audio buttons (Repertoire table + Titel detail)     */
/* =================================================== */
.audio-cell {
    white-space: nowrap;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 0;  /* eliminate inline-button whitespace gaps */
}
.audio-cell-head { width: 1%; }
.audio-cell .audio-btn + .audio-btn { margin-left: 4px; }

.audio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 24px;
    min-width: 24px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--t3);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
}
.audio-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-ring);
}
.audio-btn:active { transform: scale(0.94); }

.audio-btn-icon {
    flex: 0 0 auto;
    transform: translateX(0.5px);  /* optical centering of play triangle */
}
.audio-btn-logo {
    display: block;
    height: 14px;
    width: 14px;
    flex: 0 0 auto;
}

/* Original = outline / quiet */
.audio-btn--original {
    border-color: var(--border-dark);
    color: var(--t3);
}
.audio-btn--original:hover,
.audio-btn--original.playing {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-light);
}

/* JG Aufnahme = tinted / subdued */
.audio-btn--jg {
    background: var(--brand-light);
    border-color: var(--brand);
    color: var(--brand);
}
.audio-btn--jg:hover {
    background: color-mix(in srgb, var(--brand) 20%, transparent);
    border-color: var(--brand-dark);
    color: var(--brand-dark);
}
.audio-btn--jg.playing {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 0 0 3px var(--brand-ring);
}
[data-theme="dark"] .audio-btn--jg {
    background: color-mix(in srgb, var(--brand) 15%, transparent);
    border-color: color-mix(in srgb, var(--brand) 40%, transparent);
    color: #d97a96;
}
[data-theme="dark"] .audio-btn--jg:hover {
    background: color-mix(in srgb, var(--brand) 28%, transparent);
    border-color: color-mix(in srgb, var(--brand) 60%, transparent);
    color: #eba8be;
}
[data-theme="dark"] .audio-btn--jg.playing {
    background: color-mix(in srgb, var(--brand) 55%, transparent);
    border-color: var(--brand);
    color: #fff;
}

/* Pulse while playing */
@keyframes audioPulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--brand-ring); }
    50%      { box-shadow: 0 0 0 4px var(--brand-ring); }
}
.audio-btn.playing { animation: audioPulse 1.6s ease-in-out infinite; }

/* =================================================== */
/* File-icon links (PDF / Notensatz in Repertoire)     */
/* =================================================== */
.file-icon-cell {
    white-space: nowrap;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}
.file-icon-cell-head { width: 1%; text-align: center; }

.file-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    border-radius: var(--r-sm);
    color: var(--t3);
    text-decoration: none;
    transition: background var(--ease), color var(--ease);
}
.file-icon-btn:hover {
    background: var(--brand-light);
    color: var(--brand);
}
.file-icon-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-ring);
}
.file-icon-btn--pdf:hover  { color: var(--brand); }
.file-icon-btn--notes:hover { color: var(--brand); }

/* =================================================== */
/* Eigenschaften chips (Repertoire table + Titel)      */
/* =================================================== */
.eig-cell {
    white-space: nowrap;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 0;  /* collapse whitespace between inline chips */
}
.eig-cell-head { width: 1%; }
.eig-cell .eig-chip + .eig-chip { margin-left: 4px; }

.eig-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    border-radius: 999px;
    color: var(--t2);
    font-size: 12px;
    line-height: 1;
    vertical-align: middle;
    transition: color var(--ease), background var(--ease);
}
.eig-chip:hover { color: var(--brand); background: var(--brand-light); }
.eig-chip--dot:hover,
.eig-chip--beats:hover { background: transparent; }

/* Aktiv: status dot */
.eig-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-sizing: border-box;
}
.eig-dot--on  { background: #10b981; }
.eig-dot--off { background: transparent; border: 1.5px solid var(--t4); }

/* Beats: encircled number */
.eig-beats {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    padding: 0 2px;
    border: 1.5px solid var(--border-dark);
    border-radius: 999px;
    font: 700 9.5px var(--mono);
    font-variant-numeric: tabular-nums;
    color: var(--t2);
    letter-spacing: -0.02em;
}
.eig-chip--beats { padding: 0; min-width: 24px; }

/* Tempo: 1/2/3 chevrons */
.eig-tempo {
    display: inline-block;
    color: var(--brand);
    font: 800 14px var(--font-sans);
    letter-spacing: -2.5px;
    line-height: 1;
    padding-right: 2px;  /* compensate negative letter-spacing on last glyph */
}

/* Tonart: plain text label — no border/background */
.eig-tonart {
    display: inline-block;
    font: 600 11px var(--font-sans);
    color: var(--t2);
    line-height: 22px;
    vertical-align: middle;
}
.eig-cell .eig-chip + .eig-tonart,
.eig-cell .eig-tonart + .eig-chip { margin-left: 4px; }

/* Dark-mode tweaks */
[data-theme="dark"] .eig-dot--on  { background: #34d399; }
[data-theme="dark"] .eig-beats    { border-color: rgba(255,255,255,0.18); color: var(--t1); }
[data-theme="dark"] .eig-chip:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); }

/* Aktiv/Inaktiv status dot — used in member tables */
.status-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1.5px solid var(--border-dark);
    vertical-align: middle;
}
.status-dot--on  { background: #22c55e; border-color: #16a34a; }
.status-dot--off { background: #ef4444; border-color: #dc2626; }
[data-theme="dark"] .status-dot--on  { background: #16a34a; border-color: #22c55e; }
[data-theme="dark"] .status-dot--off { background: #dc2626; border-color: #ef4444; }

/* =================================================== */
/* Floating mini audio player                          */
/* =================================================== */
.mini-player {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translate(-50%, calc(100% + 32px));
    width: min(520px, calc(100vw - 24px));
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: 10px 14px 12px;
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.18s ease;
}
.mini-player.open {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.mp-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--t2);
    font-size: 13px;
    min-width: 0;
}
.mp-info-icon {
    flex: 0 0 auto;
    color: var(--brand);
    display: inline-flex;
}
.mp-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mp-title {
    font-weight: 600;
    color: var(--t1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-composer {
    font-size: 11px;
    color: var(--t3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: none;
}
.mp-composer:not(:empty) { display: block; }
.mp-type {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand);
    background: var(--brand-light);
    padding: 2px 8px;
    border-radius: 999px;
}

.mp-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mp-play,
.mp-prev,
.mp-next,
.mp-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--t2);
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    transition: background var(--ease), color var(--ease);
}
.mp-play {
    width: 34px;
    height: 34px;
    background: var(--brand);
    color: #fff;
    flex: 0 0 auto;
}
.mp-play:hover { background: var(--brand-dark); }
.mp-play:focus-visible,
.mp-prev:focus-visible,
.mp-next:focus-visible,
.mp-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.mp-prev,
.mp-next {
    width: 28px;
    height: 28px;
    color: var(--t3);
    flex: 0 0 auto;
}
.mp-prev:hover:not(:disabled),
.mp-next:hover:not(:disabled) { background: var(--hover-bg); color: var(--t1); }
.mp-prev:disabled,
.mp-next:disabled { opacity: 0.3; cursor: default; }

.mp-close {
    width: 28px;
    height: 28px;
    font-size: 16px;
    line-height: 1;
    color: var(--t3);
    flex: 0 0 auto;
}
.mp-close:hover { background: var(--hover-bg); color: var(--t1); }

.mp-time {
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    color: var(--t3);
    flex: 0 0 auto;
    min-width: 34px;
    text-align: center;
}

.mp-progress {
    flex: 1 1 auto;
    height: 16px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.mp-progress::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
}
.mp-progress-bar {
    position: absolute;
    left: 0;
    height: 4px;
    width: 0;
    background: var(--brand);
    border-radius: 2px;
    transition: width 0.08s linear;
    pointer-events: none;
}
.mp-progress:hover::before { background: var(--border-dark); }

@media (max-width: 768px) {
    .mini-player {
        left: 8px;
        right: 8px;
        bottom: 8px;
        transform: translate(0, calc(100% + 24px));
        width: auto;
    }
    .mini-player.open { transform: translate(0, 0); }
}

.text-center { text-align: center; }


/* =================================================== */
/* Sidebar Overlay (mobile)                            */
/* =================================================== */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 750;
}

/* =================================================== */
/* Responsive                                          */
/* =================================================== */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        height: 100dvh;
        width: var(--sb-width) !important;
        transform: translateX(-100%);
        z-index: 800;
    }

    .sidebar.active {
        transform: translateX(0);
        box-shadow: var(--shadow-md);
    }

    .sidebar-overlay.active {
        display: block;
    }

    .hamburger {
        display: flex !important;
        flex-shrink: 0;
    }

    .topbar-search input[type="search"] { width: 108px; }
    .topbar-search input[type="search"]:focus { width: 148px; }

    .form-grid {
        grid-template-columns: 1fr;
    }

    #AddPanel {
        width: 100vw;
    }
}

@media (min-width: 769px) {
    .hamburger { display: none !important; }
}

/* ── Folder drag-and-drop ─────────────────────────────── */
.table-container tbody tr[draggable="true"] { cursor: grab; }
.table-container tbody tr[draggable="true"]:active { cursor: grabbing; }

.dnd-dragging {
    opacity: 0.35;
}

.dnd-over td {
    background: var(--brand-light) !important;
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.dnd-file-over td {
    background: rgba(34, 197, 94, 0.10) !important;
    outline: 2px solid #22c55e;
    outline-offset: -2px;
}

/* ── Outdated version banner + version navigator ──────── */
.version-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 12px 16px;
    padding: 14px 18px;
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
}

.version-banner-msg {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.version-banner-msg > svg {
    flex-shrink: 0;
    color: var(--warn-icon);
}
.version-banner-msg strong {
    display: block;
    color: var(--warn-strong);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.version-banner-msg span {
    color: var(--warn-text);
    font-size: 13px;
}

/* Version stepper */
.version-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.version-step {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--warn-strong);
    background: var(--bg-card);
    border: 1px solid var(--warn-border);
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.version-step:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    text-decoration: none;
}
.version-step svg { flex-shrink: 0; }
.version-step-disabled,
.version-step-disabled:hover {
    opacity: 0.45;
    background: var(--bg-card);
    border-color: var(--warn-border);
    color: var(--warn-strong);
    cursor: default;
}

.version-current {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--warn-text);
    padding: 0 4px;
    font-variant-numeric: tabular-nums;
}

.version-latest {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 6px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: background var(--ease);
}
.version-latest:hover {
    background: var(--brand-dark);
    text-decoration: none;
}

@media (max-width: 768px) {
    .version-banner { gap: 12px; }
    .version-nav { width: 100%; flex-wrap: wrap; }
}

/* ── Article history ──────────────────────────────────── */
.history-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.history-view form {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.history-toolbar {
    flex-shrink: 0;
    padding: 10px 16px;
    background: var(--bg-thead);
    border-bottom: 1px solid var(--border);
}

.history-table-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

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

.history-table thead th {
    background: var(--bg-thead);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    position: sticky;
    top: 0;
    z-index: 1;
}

.history-table tbody tr:hover {
    background: var(--bg-row-hover);
}

.radio-cell {
    width: 32px;
    text-align: center;
}

.history-table .nowrap { white-space: nowrap; }

.history-table .comment { color: var(--text-muted); font-style: italic; }

.diff-size { white-space: nowrap; }
.diff-size .added  { color: #16a34a; font-weight: 600; margin-right: 4px; }
.diff-size .removed { color: #dc2626; font-weight: 600; }
.diff-size .muted   { color: var(--text-muted); }

/* ── Article diff ─────────────────────────────────────── */
.diff-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.diff-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-app);
    flex-shrink: 0;
}

.diff-meta-versions {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

.diff-old  { color: #b91c1c; }
.diff-new  { color: #15803d; }
.diff-arrow { color: var(--text-muted); }

.diff-mode-toggle {
    display: flex;
    gap: 6px;
}

.diff-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* Unified diff */
.diff-unified-wrap {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.diff-unified {
    width: 100%;
    border-collapse: collapse;
    font-family: ui-monospace, "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace;
    font-size: 0.8125rem;
    tab-size: 4;
}

.diff-unified td {
    padding: 1px 8px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
}

.diff-gutter {
    width: 24px;
    text-align: center;
    user-select: none;
    color: var(--text-muted);
    border-right: 1px solid var(--border);
    flex-shrink: 0;
}

.diff-add  { background: #f0fdf4; }
.diff-add .diff-gutter  { background: #bbf7d0; color: #15803d; border-color: #86efac; }
.diff-add .diff-code    { color: #15803d; }

.diff-del  { background: #fef2f2; }
.diff-del .diff-gutter  { background: #fecaca; color: #b91c1c; border-color: #fca5a5; }
.diff-del .diff-code    { color: #b91c1c; }

.diff-hunk { background: #eff6ff; }
.diff-hunk-label {
    padding: 3px 10px;
    color: #1d4ed8;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.8rem;
    border-top: 1px solid #bfdbfe;
    border-bottom: 1px solid #bfdbfe;
}

/* Side-by-side (difflib.HtmlDiff output) */
.diff-side-wrap {
    flex: 1;
    overflow: auto;
    min-height: 0;
    padding: 0;
}

.diff-side-wrap table.diff {
    width: 100%;
    border-collapse: collapse;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.8125rem;
}

.diff-side-wrap table.diff td,
.diff-side-wrap table.diff th {
    padding: 2px 8px;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.6;
}

.diff-side-wrap table.diff th {
    background: var(--bg-thead);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1;
}

.diff-side-wrap td.diff_header { color: var(--text-muted); user-select: none; width: 3em; text-align: right; }
.diff-side-wrap td.diff_next,
.diff-side-wrap th.diff_next   { display: none; }

.diff-side-wrap tr.diff_add td { background: #f0fdf4; }
.diff-side-wrap tr.diff_chg td { background: #fefce8; }
.diff-side-wrap tr.diff_sub td { background: #fef2f2; }

.diff-side-wrap span.diff_add { background: #bbf7d0; }
.diff-side-wrap span.diff_chg { background: #fde68a; }
.diff-side-wrap span.diff_sub { background: #fecaca; }

/* =================================================== */
/* iCal subscription block                             */
/* =================================================== */
.ical-subscribe {
    position: relative;
    margin-top: 24px;
    padding: 16px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--t2);
}
.ical-subscribe .ical-close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    color: var(--t3);
    border: none;
    border-radius: var(--r-sm);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
}
.ical-subscribe .ical-close:hover {
    background: var(--bg-app);
    color: var(--t1);
    box-shadow: none;
}
.ical-subscribe h3 {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--t1);
}
.ical-subscribe .ical-url-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.ical-subscribe code {
    flex: 1 1 320px;
    padding: 6px 10px;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 12px;
    color: var(--t1);
    word-break: break-all;
    user-select: all;
}
.ical-subscribe ul {
    margin: 0;
    padding-left: 18px;
    color: var(--t3);
    font-size: 12px;
    line-height: 1.5;
}

/* =================================================== */
/* Row context menu                                    */
/* =================================================== */
/* Metrik und Farben folgen den Aktions-Buttons im Auswahl-Panel (.action-btn),
   damit Rechtsklick-Menü und Off-Canvas dieselbe Sprache sprechen. */
.context-menu {
    position: fixed;
    z-index: 1000;
    min-width: 220px;
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-dark);
    border-radius: var(--r);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.context-menu-header {
    max-width: 280px;
    padding: 2px 4px 6px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    background: transparent;
    color: var(--t1);
    border: none;
    border-radius: var(--r-sm);
    text-align: left;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    box-shadow: none;
    white-space: nowrap;
}
.context-menu-item svg {
    flex: 0 0 auto;
    color: var(--t3);
}
.context-menu-item:hover {
    background: var(--bg-row-hover);
    box-shadow: none;
    color: var(--t1);
}
.context-menu-item:hover svg { color: currentColor; }
.context-menu-item.danger,
.context-menu-item.danger svg {
    color: #c53030;
}
.context-menu-item.danger:hover {
    background: rgba(197, 48, 48, 0.10);
    color: #9b2c2c;
}
/* Als Textfarbe braucht Rot auf dunklem Grund mehr Helligkeit als der
   Button-Ton #c53030 (gleiche Aufhellung wie bei .dl-icon-pdf). */
[data-theme="dark"] .context-menu-item.danger,
[data-theme="dark"] .context-menu-item.danger svg {
    color: #f87171;
}
[data-theme="dark"] .context-menu-item.danger:hover {
    background: rgba(248, 113, 113, 0.14);
    color: #fca5a5;
}
.context-menu-sep {
    height: 1px;
    margin: 4px 6px;
    background: var(--border);
}
.rename-input {
    width: 100%;
    min-width: 120px;
    padding: 2px 6px;
    font-size: inherit;
    font-family: inherit;
    background: var(--bg-app);
    color: var(--t1);
    border: 1px solid var(--brand);
    border-radius: var(--r-sm);
    box-sizing: border-box;
}

/* =================================================== */
/* Wiki file-name autocomplete                         */
/* =================================================== */
.wiki-autocomplete {
    position: fixed;
    z-index: 1000;
    min-width: 260px;
    max-width: 420px;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-dark);
    border-radius: var(--r-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    font-size: 13px;
    display: none;
}
.wiki-autocomplete.active {
    display: block;
}
.wiki-autocomplete-item {
    display: block;
    width: 100%;
    padding: 7px 12px;
    background: transparent;
    color: var(--t1);
    border: none;
    border-radius: var(--r-sm);
    text-align: left;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wiki-autocomplete-item:hover,
.wiki-autocomplete-item.selected {
    background: var(--bg-row-hover);
    color: var(--t1);
}

/* Live syntax guide for the {abstimmung:...} editor helper */
.wiki-hint {
    position: fixed;
    z-index: 1000;
    max-width: 360px;
    padding: 6px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-dark);
    border-radius: var(--r-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    font-size: 12px;
    line-height: 1.4;
    color: var(--t2);
    pointer-events: none;
    display: none;
}
.wiki-hint.active {
    display: block;
}
.wiki-hint strong {
    color: var(--t1);
}

/* =================================================== */
/* Karte (Map page)                                    */
/* =================================================== */

/* Full-bleed map container — fills .content exactly */
.karte-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
#map {
    width: 100%;
    height: 100%;
}

/* ── Floating legend panel ── */
.karte-legend {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 500;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: 0 4px 16px rgba(0,0,0,.14);
    padding: 12px 14px;
    min-width: 190px;
    font-size: 13px;
    color: var(--t1);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.karte-legend-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 13px;
    color: var(--brand);
    letter-spacing: 0.02em;
}
.karte-legend-title > span {
    flex: 1;
    transition: opacity .15s ease, max-width .2s ease;
}
.karte-legend-collapsed .karte-legend-title > span {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
}
.karte-legend-collapsed {
    padding: 5px 7px;
    gap: 0;
    min-width: 0;
    width: auto;
}

.karte-legend-collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--t3);
    cursor: pointer;
    border-radius: var(--r-sm);
    padding: 0;
    transition: color var(--ease), background var(--ease);
    flex-shrink: 0;
}
.karte-legend-collapse:hover { color: var(--brand); background: var(--bg-row-hover); }
.karte-legend-collapse svg { transition: transform .2s ease; }
.karte-legend-collapsed .karte-legend-collapse svg { transform: rotate(180deg); }

.karte-legend-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    max-height: 400px;
    transition: max-height .25s ease, opacity .2s ease;
    opacity: 1;
}
.karte-legend-collapsed .karte-legend-body {
    max-height: 0;
    opacity: 0;
}

.karte-legend-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

/* ── Layer toggle rows ── */
.karte-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.karte-toggle-row:hover .karte-toggle-label {
    color: var(--brand);
}
.karte-toggle-label {
    flex: 1;
    font-size: 12.5px;
    transition: color var(--ease);
}

/* Color legend dots */
.karte-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(0,0,0,.15);
}
.karte-dot-ort    { background: #4b80c0; }
.karte-dot-member { background: var(--brand); }
.karte-dot-live   { background: #e63946; }

/* Icon placeholders for indented toggle rows (locate/share) */
.karte-locate-icon-wrap,
.karte-share-icon-wrap {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--t3);
}
.karte-locate-icon-wrap svg,
.karte-share-icon-wrap svg {
    width: 14px;
    height: 14px;
}

/* Toggle switch */
.karte-toggle-switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    flex-shrink: 0;
}
.karte-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.karte-switch-track {
    position: absolute;
    inset: 0;
    background: var(--border-dark);
    border-radius: 9px;
    transition: background var(--ease);
    cursor: pointer;
}
.karte-switch-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: transform var(--ease);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.karte-toggle-switch input:checked + .karte-switch-track {
    background: var(--brand);
}
.karte-toggle-switch input:checked + .karte-switch-track::after {
    transform: translateX(14px);
}

/* ── Action buttons ── */
.karte-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    border: 1.5px solid transparent;
    font-size: 12.5px;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
    line-height: 1.4;
    width: 100%;
    background: transparent;
    color: var(--t2);
}
.karte-btn-add {
    border-color: var(--border-dark);
    color: var(--t2);
}
.karte-btn-add:hover {
    background: #4b80c0;
    border-color: #4b80c0;
    color: #fff;
    box-shadow: 0 2px 8px rgba(75,128,192,.25);
}

/* ── Toast notifications ── */
.karte-toast {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    z-index: 600;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    background: var(--bg-card);
    color: var(--t1);
    border: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    white-space: nowrap;
}
.karte-toast.karte-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.karte-toast-ok    { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.karte-toast-error { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.karte-toast-info  { background: var(--bg-card); color: var(--t1); border-color: var(--border); }

/* ── Custom Leaflet markers ── */
.karte-pin {
    width: 28px;
    height: 36px;
    background: var(--pin-color, var(--brand));
    border-radius: 14px 14px 4px 4px;
    clip-path: polygon(50% 100%, 0% 30%, 0% 0%, 100% 0%, 100% 30%);
    display: flex;
    align-items: 38%;
    justify-content: center;
    padding-top: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

.karte-live-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e63946;
    border: 2.5px solid #fff;
    box-shadow: 0 0 0 0 rgba(230,57,70,.5);
    animation: karte-pulse 2s infinite;
}
.karte-live-dot-me {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #2e9e4f;
    border: 2.5px solid #fff;
    box-shadow: 0 0 0 0 rgba(46,158,79,.5);
    animation: karte-pulse-me 2s infinite;
}

@keyframes karte-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(230,57,70,.5); }
    70%  { box-shadow: 0 0 0 8px rgba(230,57,70,0); }
    100% { box-shadow: 0 0 0 0 rgba(230,57,70,0); }
}
@keyframes karte-pulse-me {
    0%   { box-shadow: 0 0 0 0 rgba(46,158,79,.5); }
    70%  { box-shadow: 0 0 0 8px rgba(46,158,79,0); }
    100% { box-shadow: 0 0 0 0 rgba(46,158,79,0); }
}

/* ── Coord hint in dialog ── */
.karte-coord-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--t4);
    padding: 6px 10px;
    border-radius: var(--r-sm);
    background: var(--bg-row-hover);
    border: 1px solid var(--border);
    margin-bottom: 4px;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.karte-coord-hint-active {
    background: color-mix(in srgb, var(--brand) 8%, transparent);
    color: var(--brand);
    border-color: var(--brand);
    font-weight: 500;
}
.karte-coord-hint svg {
    flex-shrink: 0;
}

/* ── Karte search autocomplete ── */
.karte-search-results {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 250px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    box-shadow: 0 6px 24px rgba(0,0,0,.18);
    z-index: 700;
    padding: 4px;
    display: none;
}
.karte-search-results.karte-search-open {
    display: block;
}
.karte-search-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 13px;
    color: var(--t1);
    transition: background var(--ease);
}
.karte-search-item:hover,
.karte-search-item.karte-search-active {
    background: var(--bg-row-hover);
}
.karte-search-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.karte-search-item-sub {
    font-size: 11px;
    color: var(--t4);
}
.karte-search-empty {
    padding: 8px;
    font-size: 12.5px;
    color: var(--t4);
    text-align: center;
}

/* ── Ort dialog sizing ── */
.karte-ort-dialog {
    width: min(420px, 95vw);
}

/* Anchor the ort dialog to top-left instead of center */
.karte-ort-dialog[open] {
    align-self: flex-start;
    justify-self: flex-start;
    margin-top: 10px;
    margin-left: 10px;
}

/* Indented toggle rows under Live-Standorte */
.karte-row-indent {
    padding-left: 20px;
}

/* Active icon state for locate/share toggles */
.karte-icon-active svg {
    color: var(--brand);
}

/* ── Dialog form fields (no display:contents, unlike .form-grid) ── */
.dialog-field {
    margin-bottom: 12px;
}
.dialog-field label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--t3);
    margin-bottom: 3px;
}
.dialog-field input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-dark);
    border-radius: var(--r-sm);
    font-size: 0.9375rem;
    font-family: var(--font);
    outline: none;
    box-sizing: border-box;
    margin-bottom: 0;
}
.dialog-field input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}
.dialog-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.dialog-field-grow { flex: 1; }
.dialog-field-shrink { flex: 0 0 80px; }

[data-theme="dark"] .dialog-field label {
    color: var(--t3);
}
[data-theme="dark"] .dialog-field input {
    background: var(--bg-card);
    border-color: var(--border-dark);
    color: var(--t1);
}

/* ── Geocode button ── */
.karte-geocode-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    margin-bottom: 8px;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--border-dark);
    background: transparent;
    color: var(--t2);
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.karte-geocode-btn:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* ── Popup extras ── */
.karte-popup-addr {
    font-size: 11px;
    color: #888;
}
.karte-popup-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 3px 9px;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--border-dark, #ccc);
    background: transparent;
    color: var(--brand);
    font-size: 11.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.karte-popup-btn:hover {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
.karte-popup-link {
    display: inline-block;
    margin-top: 5px;
    font-size: 11.5px;
    color: #4b80c0;
    text-decoration: none;
}
.karte-popup-link:hover { text-decoration: underline; }

/* ── Dark mode ── */
[data-theme="dark"] .karte-legend {
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
[data-theme="dark"] .karte-toast-ok {
    background: rgba(22,101,52,.25);
    color: #86efac;
    border-color: rgba(22,101,52,.4);
}
[data-theme="dark"] .karte-toast-error {
    background: rgba(153,27,27,.25);
    color: #fca5a5;
    border-color: rgba(153,27,27,.4);
}
[data-theme="dark"] .karte-live-dot,
[data-theme="dark"] .karte-live-dot-me {
    border-color: var(--bg-card);
}
[data-theme="dark"] .karte-pin {
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
[data-theme="dark"] .karte-coord-hint-active {
    background: color-mix(in srgb, var(--brand) 15%, transparent);
}

/* Abstimmung (poll widget in articles) */
.abstimmung {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 16px 20px;
    margin: 16px 0;
}
.abstimmung-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-dark);
    border-bottom: 2px solid var(--brand);
    padding-bottom: 6px;
    margin: 0 0 12px;
}
.abstimmung-countdown {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
    font-size: 11px;
    color: var(--t3);
    white-space: nowrap;
}
.abstimmung-options {
    list-style: none;
    margin: 0;
    padding: 0;
}
.abstimmung-option {
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}
.abstimmung-option:last-child {
    border-bottom: none;
}
.abstimmung-option.is-mine {
    background: var(--brand-light);
}
.abstimmung-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--t1);
}
.abstimmung-choice input[type="checkbox"]:disabled {
    cursor: not-allowed;
}
.abstimmung-choice input[type="checkbox"]:disabled + .abstimmung-label {
    color: var(--t3);
}
.abstimmung-result {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 2px 24px;
}
.abstimmung-count {
    display: inline-block;
    font-weight: 700;
    min-width: 16px;
    text-align: center;
    padding: 0 5px;
    border-radius: 8px;
    font-size: 11px;
    line-height: 18px;
    background: var(--brand-light);
    color: var(--brand);
}
.abstimmung-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-row-hover);
    border-radius: 4px;
    overflow: hidden;
}
.abstimmung-bar span {
    display: block;
    height: 100%;
    background: var(--brand);
    border-radius: 4px;
}
.abstimmung-voters {
    font-size: 11px;
    color: var(--t3);
    flex: 2;
}
.abstimmung-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
.abstimmung-limit {
    font-size: 12px;
    color: var(--t3);
}
.abstimmung-counter {
    font-weight: 700;
    color: var(--brand);
}
.abstimmung-toggle-form {
    margin-top: 8px;
}
.abstimmung-locked {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--t3);
}
.abstimmung-readonly .abstimmung-label {
    color: var(--t1);
    font-weight: 500;
}
.abstimmung-readonly .abstimmung-result {
    margin-left: 0;
}

/* === Konzert Download Menu === */
.dl-trigger {
    position: relative;
    display: inline-flex;
}
.dl-trigger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    border-radius: var(--r-sm);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--tb-icon);
    transition: background var(--ease);
}
.dl-trigger-btn:hover {
    background: var(--hover-icon-bg);
}
.dl-trigger-btn .toolicon {
    /* inherit toolicon sizing — no extra margin needed */
    display: block;
}
.dl-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 270px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: 8px;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity var(--ease), transform var(--ease);
}
.dl-menu.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.dl-menu-header {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--t4);
    padding: 4px 8px 8px;
}
.dl-group-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--t4);
    padding: 8px 8px 4px;
    margin-top: 4px;
}
.dl-group-label:not(:first-of-type) {
    border-top: 1px solid var(--border);
}
.dl-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--t1);
    transition: background var(--ease);
}
.dl-item:hover {
    background: var(--hover-bg);
}
.dl-item:hover .dl-item-title {
    color: var(--brand);
}
.dl-item-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dl-icon-word  { background: #eff6ff; color: #2563eb; }
.dl-icon-pdf   { background: #fef2f2; color: #dc2626; }
.dl-icon-noten { background: #f0fdf4; color: #16a34a; }
.dl-icon-audio { background: var(--brand-light); color: var(--brand); }
.dl-item-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.dl-item-title {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--t1);
    transition: color var(--ease);
}
.dl-item-sub {
    font-size: 0.78rem;
    color: var(--t3);
}
[data-theme="dark"] .dl-icon-word  { background: rgba(37,99,235,0.15);  color: #60a5fa; }
[data-theme="dark"] .dl-icon-pdf   { background: rgba(220,38,38,0.15);  color: #f87171; }
[data-theme="dark"] .dl-icon-audio { background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand); }

.dl-context-menu {
    position: fixed !important;
    top: 0;
    left: 0;
    right: auto;
    min-width: 250px;
    z-index: 1001;
}

/* === 404 Error Page === */
.error-standalone {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--bg-app);
}

.error-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    margin-bottom: 2rem;
}
.error-brand img {
    width: 36px;
    height: 36px;
}
.error-brand span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand);
}

.error-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: 3rem 3.5rem;
    text-align: center;
    max-width: 480px;
    width: 100%;
}

.error-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--brand-light);
    margin-bottom: 1.25rem;
    animation: error-float 3s ease-in-out infinite;
}

.error-note svg {
    width: 40px;
    height: 40px;
}

@keyframes error-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

.error-code {
    font-size: 7rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
}

.error-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--t1);
    margin: 0 0 0.75rem;
}

.error-message {
    font-size: 0.95rem;
    color: var(--t3);
    line-height: 1.7;
    margin: 0 0 2rem;
}

.error-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.error-btn-primary {
    display: inline-block;
    background: var(--brand);
    color: #fff;
    border: none;
    padding: 0.65rem 1.5rem;
    border-radius: var(--r);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}
.error-btn-primary:hover {
    background: var(--brand-dark);
    color: #fff;
    text-decoration: none;
}

.error-btn-secondary {
    display: inline-block;
    background: transparent;
    color: var(--t2);
    border: 1px solid var(--border-dark);
    padding: 0.65rem 1.5rem;
    border-radius: var(--r);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.error-btn-secondary:hover {
    background: var(--brand-light);
    border-color: var(--brand);
    color: var(--brand);
    text-decoration: none;
}

.error-path {
    font-size: 0.78rem;
    font-family: var(--mono);
    color: var(--t4);
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    word-break: break-all;
}

@media (max-width: 480px) {
    .error-card {
        padding: 2rem 1.5rem;
    }
    .error-code {
        font-size: 5rem;
    }
}
[data-theme="dark"] .dl-icon-noten { background: rgba(22,163,74,0.15);  color: #4ade80; }

/* ChangeLog audit view */
.change-row { margin-bottom: 0.2rem; font-size: 0.875rem; }
.change-field { font-weight: 600; color: var(--text); }
.change-old { color: var(--text-muted); text-decoration: line-through; }
.change-new { color: var(--text); }
.nowrap { white-space: nowrap; }
.changelog-model { font-weight: 600; color: var(--primary); }

#changelog-sentinel,
.table-sentinel {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}
#changelog-sentinel.loading::after,
.table-sentinel.loading::after {
  content: "Lade \2026";
}

/* ── Site-wide notification bubbles (ChangeLog-based) ── */
.notify-stack {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    z-index: 700;
    pointer-events: none;
    max-width: 360px;
}
.notify-bubble {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--t1);
    border: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    pointer-events: auto;
    cursor: pointer;
    animation: notify-slide-in 0.3s ease forwards;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.notify-bubble:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.notify-bubble-out {
    opacity: 0;
    transform: translateX(30px);
}
.notify-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--primary);
    background: color-mix(in srgb, var(--brand) 8%, transparent);
}
.notify-icon svg {
    width: 16px;
    height: 16px;
}
.notify-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.notify-body {
    min-width: 0;
    flex: 1;
}
.notify-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 2px;
}
.notify-header strong {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notify-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notify-snippet {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.notify-who {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 1px;
}
@keyframes notify-slide-in {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@media (max-width: 480px) {
    .notify-stack {
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-width: none;
    }
}

/* ── Folder table live-refresh row highlight ── */
@keyframes row-fresh-in {
    from { background: var(--brand-light); }
    to   { background: transparent; }
}
tr.row-fresh td {
    animation: row-fresh-in 0.6s ease-out forwards;
}

/* ── Upload progress card ── */
.upload-card {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    z-index: 600;
    font-size: 13px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.upload-card[hidden] { display: none !important; }
.upload-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: var(--bg-thead);
    border-bottom: 1px solid var(--border);
}
.upload-card-title {
    flex: 1;
    font-weight: 600;
    color: var(--t1);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.upload-card-toggle,
.upload-card-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--t3);
    padding: 2px 4px;
    border-radius: var(--r-sm);
    line-height: 1;
    font-size: 14px;
    transition: color 0.15s, background 0.15s;
}
.upload-card-toggle:hover,
.upload-card-close:hover {
    color: var(--t1);
    background: var(--bg-row-hover);
}
.upload-card-body {
    max-height: 240px;
    overflow-y: auto;
    padding: 8px 0;
}
.upload-card--collapsed .upload-card-body { display: none; }
.uc-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
}
.uc-name {
    color: var(--t2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.uc-bar-wrap {
    width: 60px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}
.uc-bar {
    height: 100%;
    background: var(--brand);
    border-radius: 2px;
    transition: width 0.2s;
}
.uc-status {
    font-size: 11px;
    white-space: nowrap;
    color: var(--t3);
    min-width: 80px;
    text-align: right;
}
.uc-status.ok  { color: #16a34a; }
.uc-status.err { color: var(--brand); }
[data-theme="dark"] .uc-status.ok { color: #4ade80; }

/* =================================================== */
/* Öffentliches Beitritts-Formular (join pages)        */
/* =================================================== */

/* Standalone-Seiten laden intern.css ohne App-Shell — den globalen
   no-scroll/flex-Reset von html,body wieder aufheben, damit die Seite
   normal scrollt und der Inhalt zentriert. */
html.join-page,
body.join-page {
    height: auto;
    min-height: 100%;
    overflow: auto;
    /* Auch auf html, sonst zeigt sich unterhalb des kurzen body die
       --sb-bg des globalen Resets als sichtbare Kante. */
    background: var(--bg-app);
}
body.join-page {
    display: block;
}

.join-wrap {
    max-width: 480px;            /* schmal: Erfolg / ungültig */
    margin: 0 auto;
    padding: 32px 16px 48px;
}
.join-wrap.join-wide {
    max-width: 720px;            /* breit: Beitritts-Formular */
}

.join-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 28px 28px 24px;
}

.join-header {
    text-align: center;
    margin-bottom: 24px;
}
.join-logo {
    width: 84px;
    height: auto;
    margin-bottom: 16px;
}
.join-header h1 {
    margin: 0 0 8px;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--t1);
}
.join-intro {
    margin: 0 auto;
    max-width: 48ch;
    color: var(--t3);
    font-size: 0.95rem;
    line-height: 1.55;
}
.join-email {
    display: inline-block;
    margin-top: 14px;
    padding: 6px 14px;
    border-radius: var(--r-sm);
    background: var(--brand-light);
    color: var(--brand);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Form: Karten untereinander statt im 2-Spalten-Raster */
.join-form .detail-card {
    margin-bottom: 16px;
}
.join-hint {
    margin: -4px 0 10px;
    font-size: 0.8rem;
    color: var(--t3);
}
/* Fehlermeldungen über die volle Rasterbreite, damit sie das
   display:contents-Raster nicht verschieben (vgl. .pw-strength). */
.join-form .form-grid .invalid-feedback {
    grid-column: 1 / -1;
}
.req {
    color: var(--brand);
    margin-left: 2px;
}
.join-required-note {
    margin: 4px 2px 0;
    font-size: 0.8rem;
    color: var(--t3);
}

/* Honeypot: aus dem Sichtfeld geschoben statt display:none — Bots fuellen
   sichtbare Felder aus und ueberspringen versteckte. */
.hp-feld {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Einwilligungen */
.join-consents {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
}
.join-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--t2);
    cursor: pointer;
}
.join-consent input[type="checkbox"] {
    width: auto;
    margin: 2px 0 0;
    flex-shrink: 0;
}
.join-consent a {
    color: var(--brand);
    text-decoration: underline;
}

.join-actions {
    margin-top: 20px;
}
.join-actions .btn {
    width: 100%;
    justify-content: center;
    padding: 11px 14px;
    font-size: 14px;
}

/* Status-Seiten (Erfolg / ungültig) */
.join-status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
}
.join-status-icon svg {
    width: 28px;
    height: 28px;
}
.join-status-ok {
    background: var(--brand-light);
    color: var(--brand);
}
.join-status-warn {
    background: var(--warn-bg);
    color: var(--warn-icon);
}
.join-message {
    color: var(--t2);
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
}
.join-message p {
    margin: 0 0 14px;
}
.join-message-muted {
    color: var(--t4);
    font-size: 0.85rem;
}

/* === Kalender === */
/* Kalenderseite füllt den Rest von .content – auch neben dem Termin-Banner,
   der als Geschwister im selben .content sitzt. */
.content:has(.cal-page) { display: flex; flex-direction: column; }
.cal-page {
    flex: 1;
    min-height: 0;
    box-sizing: border-box;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
}
.cal-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Toolbar: Monatsnavigation + Legende */
.cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.cal-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cal-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border-dark);
    color: var(--t2);
    cursor: pointer;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.cal-nav-btn:hover {
    background: var(--brand-light);
    border-color: var(--brand);
    color: var(--brand);
}
.cal-nav-btn svg { width: 18px; height: 18px; }
.cal-title {
    margin: 0;
    min-width: 168px;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--t1);
    letter-spacing: -0.01em;
}
.cal-title-year {
    margin-left: 8px;
    font-weight: 400;
    color: var(--t3);
}
.cal-today-btn {
    margin-left: 4px;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--ease);
}
.cal-today-btn:hover { background: var(--brand-dark); color: #fff; text-decoration: none; }
.cal-legend {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--t3);
}
.cal-legend-item { display: inline-flex; align-items: center; gap: 6px; }

/* Karte um das Raster – füllt den restlichen Platz */
.cal-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Wochentagskopf */
.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--bg-thead);
    border-bottom: 1px solid var(--border);
}
.cal-weekday {
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--t3);
    text-align: left;
}
.cal-weekday:nth-child(n+6) { color: var(--cal-weekend); }

/* Raster: 1px-Trennlinien, Zeilen füllen die Höhe gleichmäßig */
.cal-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr;
    gap: 1px;
    background: var(--border);
}
.cal-day {
    position: relative;
    overflow: hidden;
    min-height: 0;
    padding: 6px 8px 8px;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: background var(--ease);
}
.cal-day.has-events { cursor: pointer; }
.cal-day.has-events:hover { background: var(--hover-bg); }
.cal-day.is-weekend { background: color-mix(in srgb, var(--bg-thead) 55%, var(--bg-card)); }
.cal-day.is-weekend.has-events:hover { background: var(--hover-bg); }
.cal-day.is-outside { background: var(--bg-app); }
.cal-day.is-outside .cal-daynum { opacity: 0.5; }
/* Wer Termine anlegen darf, öffnet jeden Tag – auch den leeren. */
.cal-can-add .cal-day { cursor: pointer; }
.cal-can-add .cal-day:hover { background: var(--hover-bg); }

.cal-daynum {
    align-self: flex-start;
    min-width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--t2);
    border-radius: 999px;
}
.cal-day.is-weekend .cal-daynum { color: var(--cal-weekend); }
.cal-day.is-today .cal-daynum {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 35%, transparent);
}

/* Chips (Termine / Geburtstage) */
.cal-day-detail {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.cal-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border-radius: var(--r-sm);
    font-size: 12px;
    line-height: 1.3;
    text-decoration: none;
    min-width: 0;
    transition: filter var(--ease), transform var(--ease);
    border-left: 3px solid transparent;
}
.cal-chip:hover { text-decoration: none; filter: brightness(0.97); transform: translateX(1px); }
[data-theme="dark"] .cal-chip:hover { filter: brightness(1.15); }
.cal-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}
.cal-chip-time { font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0.85; }
.cal-chip-icon { width: 13px; height: 13px; flex: none; }

.cal-chip--termin {
    background: var(--brand-light);
    color: var(--brand-dark);
    border-left-color: var(--brand);
}
.cal-chip--termin.is-konzert {
    background: var(--brand);
    color: #fff;
    border-left-color: var(--brand-dark);
}
[data-theme="dark"] .cal-chip--termin { color: #f0b8c7; }
[data-theme="dark"] .cal-chip--termin.is-konzert { color: #fff; }
.cal-chip--geb {
    background: var(--cal-geb-bg);
    color: var(--cal-geb);
    border-left-color: var(--cal-geb);
}

/* Mehrtägige Termine: durchgehender Balken über alle betroffenen Tage.
   Die Chips bluten in die Zellränder (padding 8px) und werden vom
   overflow:hidden der Zelle sauber beschnitten, sodass ein Band entsteht;
   nur Start-/Endtag werden abgerundet. */
.cal-chip.is-span {
    margin-left: -8px;
    margin-right: -8px;
    padding-left: 8px;
    padding-right: 8px;
    border-left: none;
    border-radius: 0;
}
.cal-chip.is-span-start {
    margin-left: 0;
    border-top-left-radius: var(--r-sm);
    border-bottom-left-radius: var(--r-sm);
    border-left: 3px solid var(--brand);
    padding-left: 7px;
}
.cal-chip.is-span-end {
    margin-right: 0;
    border-top-right-radius: var(--r-sm);
    border-bottom-right-radius: var(--r-sm);
}
.cal-chip-cont { font-weight: 700; opacity: 0.75; flex: none; }

/* In der Detailleiste keinen Balken/Bleed – dort steht jeder Tag für sich. */
.cal-panel-body .cal-chip.is-span {
    margin: 0;
    border-radius: var(--r);
    border-left: 3px solid var(--brand);
    padding-left: 14px;
}

/* Punkte (nur mobil sichtbar) */
.cal-dots { display: none; gap: 3px; flex-wrap: wrap; padding: 1px 2px; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.cal-dot--termin { background: var(--brand); }
.cal-dot--geb { background: var(--cal-geb); }
.cal-legend .cal-dot { width: 8px; height: 8px; }

/* Offcanvas-Tagesdetail (Desktop + Mobil): großer, lesbarer Bereich */
.cal-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 1099;
}
.cal-panel-overlay.open { opacity: 1; visibility: visible; }
.cal-panel {
    position: fixed;
    top: var(--tb-h);
    right: 0;
    height: calc(100% - var(--tb-h));
    width: 380px;
    max-width: 90vw;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    z-index: 1100;
    display: flex;
    flex-direction: column;
}
.cal-panel.open { transform: translateX(0); }
.cal-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.cal-panel-date { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--t1); }
.cal-panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 0;
    flex: none;
    border: none;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--t2);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.cal-panel-close:hover { background: var(--hover-bg); color: var(--t1); }
.cal-panel-close svg { width: 26px; height: 26px; flex: none; }
/* Einträge und Anlege-Formular teilen sich einen Scrollbereich. */
.cal-panel-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.cal-panel-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.cal-panel-body .cal-chip {
    font-size: 14px;
    padding: 11px 14px;
    border-radius: var(--r);
    border-left-width: 4px;
    gap: 9px;
}
.cal-panel-body .cal-chip-text { white-space: normal; overflow: visible; }
.cal-panel-body .cal-chip-icon { width: 17px; height: 17px; }

/* Termin anlegen im Tagesdetail */
.cal-panel-add { padding: 16px 20px 20px; }
.cal-panel-body:not([hidden]) + .cal-panel-add { border-top: 1px solid var(--border); }
.cal-add-open {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
/* .btn setzt display, das schlägt sonst das hidden-Attribut, mit dem
   kalender.js zwischen Button und Formular umschaltet. */
.cal-add-open[hidden] { display: none; }
.cal-add-open svg { width: 17px; height: 17px; flex: none; }
.cal-add-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.cal-add-checks { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; }

/* Mobil: kompaktes Raster mit Punkten, natürliche Höhe (scrollt) */
@media (max-width: 768px) {
    .cal-page { flex: none; min-height: 100%; padding: 12px 10px; }
    .cal-wrap, .cal-card { flex: none; }
    .cal-grid { flex: none; grid-auto-rows: auto; }
    .cal-toolbar { margin-bottom: 12px; }
    .cal-legend { width: 100%; order: 3; }
    .cal-weekday { padding: 7px 4px; text-align: center; font-size: 10px; }
    .cal-day {
        min-height: 58px;
        padding: 5px 3px;
        align-items: center;
        cursor: pointer;
    }
    .cal-daynum { align-self: center; font-size: 12px; }
    .cal-dots { display: flex; justify-content: center; }
    .cal-day-detail { display: none; }
}

/* === Dateidetail: Ablageorte und Versionen === */
.datei-vorschau {
    max-width: 100%;
    max-height: 64px;
    border-radius: 4px;
    object-fit: contain;
}

.datei-hinweis {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--text-muted);
}

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

.datei-orte li {
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.datei-orte li:last-child { border-bottom: none; }

.datei-ort-hier {
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--border);
    color: var(--text-muted);
    font-size: 11px;
}

.datei-version-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.datei-version-tabelle td {
    padding: 7px 8px 7px 0;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.datei-version-tabelle tr:last-child td { border-bottom: none; }
.datei-version-tabelle .ist-aktuell td { font-weight: 600; }
.datei-version-tabelle .v-vorschau { width: 44px; padding-right: 12px; }

.datei-version-tabelle .v-vorschau img {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--bg-thead);
}

.datei-version-tabelle .v-nummer { width: 70px; color: var(--text-muted); }
.datei-version-tabelle .v-groesse { text-align: right; white-space: nowrap; }
.datei-version-tabelle .v-aktion { text-align: right; width: 1%; }
.datei-version-tabelle .v-aktion form { margin: 0; }
.datei-version-tabelle .keine-versionen td { color: var(--text-muted); }

.btn-klein {
    padding: 3px 10px;
    font-size: 12px;
}

@media (max-width: 640px) {
    .datei-version-tabelle .v-autor { display: none; }
    .datei-version-tabelle .v-vorschau { width: 32px; padding-right: 8px; }
    .datei-version-tabelle .v-vorschau img { width: 32px; height: 32px; }
}

/* === Dialog: brechende Verweise beim Löschen/Umbenennen === */
.verwendung-dialog {
    max-width: 520px;
    width: calc(100% - 32px);
    padding: 20px 22px;
    border: 1px solid var(--border-dark);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.verwendung-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.verwendung-dialog h3 {
    margin: 0 0 8px;
    font-size: 17px;
}

.verwendung-hinweis {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--text-muted);
}

.verwendung-block {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.verwendung-block:last-of-type {
    border-bottom: none;
}

.verwendung-block ul {
    margin: 4px 0 0;
    padding-left: 20px;
}

.verwendung-block li {
    padding: 2px 0;
    color: var(--text-muted);
}

.verwendung-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* =================================================== */
/* Chip-Multiselect                                    */
/* =================================================== */
/* Markup: _chip_multiselect.html, Verhalten: chip-multiselect.js.
   Das native <select> bekommt bewusst KEINE display-Regel -- das JS blendet es
   ueber das hidden-Attribut aus, ohne JS muss es sichtbar bleiben. Aus demselben
   Grund haengt .chip-ms-ui sein display an :not([hidden]). */

.chip-ms {
    width: 100%;
    min-width: 0;
}

.chip-ms-ui:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.chip-ms-legend {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--t4);
}

.chip-ms-list {
    list-style: none;
    margin: 0;
    padding: 4px;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    min-width: 0;
}

.chip-ms-list:empty::before {
    content: attr(data-leer);
    display: block;
    padding: 6px 5px;
    font-size: 12px;
    color: var(--t4);
}

/* Oben: die getroffene Auswahl als Chips */
.chip-ms-selected {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 4px;
    min-height: 34px;
}

/* Darunter: der scrollbare Vorrat als Zeilenliste */
.chip-ms-pool {
    max-height: 220px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.chip-ms-item {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    cursor: pointer;
    user-select: none;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.chip-ms-pool > .chip-ms-item {
    padding: 7px 9px;
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--t1);
}

.chip-ms-pool > .chip-ms-item:hover {
    background: var(--brand-light);
}

.chip-ms-item.chip-ms-chip {
    padding: 3px 6px 3px 10px;
    border-radius: 999px;
    background: var(--brand-light);
    color: var(--brand);
    border: 1px solid transparent;
    font-size: 12.5px;
    line-height: 1.4;
}

.chip-ms-item.chip-ms-chip:hover {
    border-color: var(--brand);
}

.chip-ms-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-ms-aktion {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 14px;
    line-height: 1;
    opacity: 0.55;
    cursor: pointer;
}

.chip-ms-item:hover .chip-ms-aktion {
    opacity: 1;
}

.chip-ms-search {
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    padding: 0 10px;
    font-family: var(--font);
    font-size: 13px;
    color: var(--t1);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    outline: none;
    transition: border-color var(--ease), box-shadow var(--ease);
}

.chip-ms-search:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.chip-ms-search::placeholder {
    color: var(--t4);
}

/* Ziehen gibt es nur auf Zeigergeraeten -- siehe chip-multiselect.js */
@media (pointer: fine) {
    .chip-ms-item { cursor: grab; }
    .chip-ms-item:active { cursor: grabbing; }
}

.chip-ms-item.sortable-ghost { opacity: 0.4; }
.chip-ms-item.sortable-chosen { background: var(--brand); color: #fff; }

/* ── Ausschluss-Variante (Nicht in Gruppen) ── */
.chip-ms--exclude .chip-ms-item.chip-ms-chip {
    background: var(--status-danger-bg);
    color: var(--status-danger-text);
}

.chip-ms--exclude .chip-ms-item.chip-ms-chip:hover {
    border-color: var(--status-danger-border);
}

.chip-ms--exclude .chip-ms-pool > .chip-ms-item:hover {
    background: var(--status-danger-bg);
}

/* ── Ziel-Popover nach Long-Press ── */
/* position:fixed und rohe Viewport-Koordinaten, anders als .att-move-picker: die
   Offcanvas-Panels sind selbst fixed und scrollen intern. */
.chip-ms-picker {
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
    padding: 6px;
    border-radius: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

.chip-ms-pick {
    padding: 8px 10px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--t1);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.chip-ms-pick:hover {
    background: var(--bg-row-hover);
}

/* =================================================== */
/* Farbwahl (Color Picker)                              */
/* =================================================== */
/* Markup: _color_picker.html, Verhalten: color-picker.js.
   Textfeld bleibt Quelle der Wahrheit; der native <input type="color"> dient
   als Picker UND Vorschau-Swatch in einem. */

.color-picker {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-picker-text {
    flex: 1;
    min-width: 0;
}

.color-picker-swatch {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-dark);
    border-radius: 5px;
    background: var(--bg-card);
    cursor: pointer;
}

.color-picker-swatch::-webkit-color-swatch-wrapper { padding: 2px; }
.color-picker-swatch::-webkit-color-swatch { border: none; border-radius: 3px; }
.color-picker-swatch::-moz-color-swatch { border: none; border-radius: 3px; }

.color-picker-swatch:focus-visible {
    outline: 2px solid var(--brand-ring);
    outline-offset: 2px;
}

/* =================================================== */
/* Gruppen-Berechtigungen                              */
/* =================================================== */
/* Gemeinsam von folder_berechtigungen, artikel_berechtigungen und
   forum_zugriff genutzt; Verhalten in berechtigungen.js. */

.detail-card .radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    cursor: pointer;
    color: var(--t2);
    font-size: 14px;
}

.detail-card .gruppen-auswahl {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bg-row-hover);
}

.detail-card .gruppen-auswahl[hidden] {
    display: none;
}

.members-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.members-chips[hidden] {
    display: none;
}

.member-chip {
    padding: 0.125rem 0.625rem;
    border-radius: 99px;
    background: var(--bg-row-hover);
    color: var(--t2);
    font-size: 12px;
    white-space: nowrap;
}

.detail-hint {
    margin-top: 0.75rem;
    font-size: 12px;
    color: var(--t3);
}

/* === Hilfe-Tooltip ===
   Info-Icon (_hilfe_icon.html) plus die eine geteilte Blase, die tooltip.js an
   den Body hängt. Der Text steht als help_text am Model, nie hier. */
.hilfe-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    padding: 0;
    border: 0;
    background: none;
    color: var(--t4);
    cursor: help;
    line-height: 0;
}
.hilfe-icon:hover,
.hilfe-icon:focus-visible {
    color: var(--brand);
}
.hilfe-icon:focus-visible {
    outline: 2px solid var(--brand-ring);
    outline-offset: 2px;
    border-radius: 50%;
}
/* Auslöser, die kein Icon sind (Chips, Spaltenköpfe) */
[data-hilfe]:not(.hilfe-icon) {
    cursor: help;
}

/* position: fixed ist Pflicht – .table-container und .cal-panel-scroll haben
   overflow-y:auto und würden eine absolut positionierte Blase abschneiden. */
.hilfe-bubble {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    max-width: 300px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--t2);
    font-size: 12.5px;
    line-height: 1.45;
    box-shadow: var(--shadow-md);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}
.hilfe-bubble.visible {
    opacity: 1;
}

/* Ohne dies reißt das margin-right der Checkbox-Labels eine Lücke zum Icon. */
.detail-card .checkbox-group label {
    margin-right: 0;
}
/* .checkbox-row bringt padding-top mit; im Kalender-Panel regelt der Spaltenabstand
   von .cal-add-checks den Abstand bereits. */
.cal-add-checks .checkbox-row {
    padding-top: 0;
}

/* =================================================== */
/* Konfiguration                                       */
/* =================================================== */
.kf-page {
    padding: 16px;
    padding-bottom: calc(var(--kf-bars-h, 0px) + 24px);
    max-width: 1100px;
    margin: 0 auto;
}

/* Karte für neu angelegte Einträge — immer ganz oben, vor den Gruppen. */
.kf-neu {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    margin-bottom: 12px;
    padding: 4px 16px;
}

/* Akkordeon-Karten im Stil von .detail-card, Marker-Rezept von .ae-help. */
.kf-gruppe {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    margin-bottom: 12px;
}
.kf-gruppe > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-bottom: 1px solid transparent;
}
.kf-gruppe[open] > summary { border-bottom-color: var(--border); }
.kf-gruppe > summary::-webkit-details-marker { display: none; }
.kf-gruppe > summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid var(--t3);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform var(--ease);
    flex-shrink: 0;
}
.kf-gruppe[open] > summary::before { transform: rotate(90deg); }
.kf-gruppe > summary:hover .kf-gruppen-titel { color: var(--brand); }
.kf-gruppen-titel {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--brand-dark);
    transition: color var(--ease);
}
.kf-gruppen-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--t3);
    background: var(--bg-thead);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1px 8px;
    min-width: 22px;
    text-align: right;
    margin-left: auto;
    flex-shrink: 0;
}
.kf-gruppen-hinweis {
    font-size: 12px;
    color: var(--t4);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.kf-gruppe-body { padding: 4px 16px; }

/* Eintrag als Grid mit benannten Bereichen — DOM-Reihenfolge Key → Wert →
   Beschreibung stimmt in beiden Layouts, die Media Query schaltet nur um. */
.kf-eintrag {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(0, 1.5fr);
    grid-template-areas: "key  wert"
                         "desc wert";
    column-gap: 16px;
    row-gap: 4px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.kf-eintrag:last-child { border-bottom: none; }
.kf-key { grid-area: key; align-self: start; display: flex; align-items: center; gap: 8px; }
.kf-desc { grid-area: desc; align-self: start; }
.kf-wert { grid-area: wert; }

.kf-key code {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--t3);
    overflow-wrap: anywhere;
}

/* Wert steht immer in einem sichtbaren Feld (kein Edit-Modus mehr). */
.kf-eintrag .inline-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 5px 9px;
    border: 1px solid var(--border-dark);
    border-radius: 5px;
    background: var(--bg-card);
    color: var(--t1);
    font-size: 13px;
    font-family: var(--font);
    resize: none;
    min-height: 32px;
    line-height: 1.45;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.kf-eintrag textarea.inline-input { overflow: hidden; }
.kf-eintrag .inline-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand-light);
    background: var(--bg-card);
}
/* Textfelder füllen die volle Höhe der wert-Zelle (auf Desktop key+desc-Zeilen)
   und stehen nie unter 4 Zeilen. height:100% greift, weil .kf-wert als Grid-
   Eintrag eine definite Höhe hat; autogrow setzt min-height auf den Inhalt. */
.kf-eintrag[data-typ="text"] textarea.kf-value-input {
    height: 100%;
    min-height: calc(1.45em * 4 + 10px);
}
/* Number-Input: Spinner bleibt (Port/Zoom/Tage), kein min/max/step — die
   Wertefunktion wird nicht eingeengt (z.B. leere Datei-ID möglich). */
.kf-eintrag input[type="number"].inline-input { width: 100%; }

/* Boolean als Toggle-Switch — die Checkbox trägt bewusst nicht .inline-input,
   sondern wird hier eigens gestylt. Gespeichert bleibt "1"/"0" als Zeichenkette. */
.kf-bool {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
}
.kf-bool input {
    appearance: none;
    -webkit-appearance: none;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: var(--border-dark);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
    transition: background var(--ease);
}
.kf-bool input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-card);
    box-shadow: var(--shadow-xs);
    transition: transform var(--ease);
}
.kf-bool input:checked { background: var(--brand); }
.kf-bool input:checked::after { transform: translateX(18px); }
.kf-bool input:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 2px; }
.kf-bool-state { font-size: 12px; color: var(--t3); }
.kf-bool input:not(:checked) ~ .kf-bool-state::before { content: "Aus"; }
.kf-bool input:checked ~ .kf-bool-state::before { content: "An"; color: var(--brand); }

/* Löschen-Button immer sichtbar (kein Edit-Modus, an den er sich hängen könnte),
   dezent über --t4, rot bei Hover. Auf Touch die einzige erreichbare Variante. */
.kf-del-btn {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--t4);
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--ease), background var(--ease);
}
.kf-del-btn:hover { color: var(--error-solid); background: var(--error-bg); }
.kf-eintrag.to-delete { opacity: 0.45; }
.kf-eintrag.to-delete .kf-key code,
.kf-eintrag.to-delete .kf-desc-text { text-decoration: line-through; }

/* Ungespeicherte Änderung — Warnfarbe statt Marken-Blau, damit sie sich von
   :focus unterscheidet und auch ungefokussiert auffällt. Nur am tatsächlich
   geänderten Teil (Wert und/oder Beschreibung getrennt geprüft in konfiguration.js). */
.kf-wert.kf-geaendert .inline-input {
    border-color: var(--warn-icon);
    box-shadow: 0 0 0 2px var(--warn-border);
}
.kf-wert.kf-geaendert .kf-bool-state { color: var(--warn-icon); font-weight: 600; }
.kf-desc.kf-geaendert .kf-desc-text { color: var(--warn-strong); font-weight: 600; }

/* Beschreibung: Klick auf Text oder Stift schaltet zum Eingabefeld. */
.kf-desc { display: flex; align-items: flex-start; gap: 6px; }
.kf-desc-text {
    flex: 1;
    font-size: 12px;
    color: var(--t3);
    line-height: 1.4;
    cursor: pointer;
    word-break: break-word;
    min-height: 18px;
}
.kf-desc-text:empty::before {
    content: "Beschreibung hinzufügen";
    color: var(--t4);
    font-style: italic;
}
.kf-desc-edit {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--t4);
    padding: 2px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    transition: color var(--ease);
}
.kf-desc-edit:hover { color: var(--brand); }
/* .kf-desc-input darf KEIN eigenes display bekommen — das hidden-Attribut muss
   wirken, display:grid/flex gewinnt sonst dagegen. */
.kf-desc-input { width: 100%; box-sizing: border-box; }

.kf-leer { text-align: center; color: var(--t4); padding: 32px 0; font-size: 14px; }

/* Fokus-Freiraum statt gestrichelter Scroll-Nachführung. */
.kf-eintrag textarea,
.kf-eintrag input {
    scroll-margin-bottom: calc(var(--kf-bars-h, 0px) + 24px);
}

/* hidden braucht überall eine explizite Regel — intern.css hat keine globale
   [hidden]-Regel, und display:grid/flex gewinnt sonst gegen das Attribut. */
.kf-eintrag[hidden],
.kf-gruppe[hidden],
.kf-neu[hidden],
.kf-desc-input[hidden],
.kf-leer[hidden] { display: none; }

/* Markup-Legende für MAIL_*-Felder — hängt am Fokus, nicht mehr am Edit-Modus. */
.konfig-mailhelp {
    position: fixed;
    bottom: var(--kf-applybar-h, 0px);
    left: var(--sb-width);
    right: 0;
    z-index: 99;
    display: none;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    padding: 10px 28px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--t3);
}
.konfig-mailhelp.visible { display: flex; }
.konfig-mailhelp code {
    font-family: var(--mono);
    font-size: 11px;
    background: var(--bg-thead);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    color: var(--t1);
}
.konfig-mailhelp .konfig-mailhelp-title {
    font-weight: 700;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
}

/* Apply-Bar — IDs bleiben, damit das übernommene JS unverändert greift. */
.konfig-apply-bar {
    position: fixed;
    bottom: 0;
    left: var(--sb-width);
    right: 0;
    padding: 14px 28px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    transform: translateY(100%);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 100;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}
.konfig-apply-bar.visible { transform: translateY(0); }
.konfig-change-summary { font-size: 13px; color: var(--t3); }

[data-theme="dark"] .kf-eintrag .inline-input {
    background: var(--bg-app);
    border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .kf-bool input { background: rgba(255, 255, 255, 0.18); }
[data-theme="dark"] .kf-bool input::after { background: var(--t1); }
[data-theme="dark"] .konfig-apply-bar { box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.35); }

@media (max-width: 768px) {
    .kf-eintrag {
        grid-template-columns: 1fr;
        grid-template-areas: "key" "wert" "desc";
    }
    .konfig-apply-bar { left: 0; }
    .konfig-mailhelp {
        left: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}