/* Lokal eingebundene Schriftarten (statt Google Fonts extern von fonts.googleapis.com) -
   verhindert, dass bei jedem Seitenaufruf (auch der oeffentlichen Signup-Seite) die
   IP-Adresse des Besuchers an Google uebertragen wird. DM Sans ist ein Variable Font:
   Google liefert fuer alle statischen Schnitte (300-700) dieselbe Datei mit einer
   Gewichts-Achse, der Browser waehlt anhand von font-weight die passende Darstellung -
   deshalb hier bewusst nur eine gemeinsame Datei fuer alle DM-Sans-Schnitte. */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/dm-sans-variable.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dm-mono-400.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/dm-mono-500.woff2') format('woff2');
}

:root {
    /* --primary/-dark/-light werden pro Mandant ueberschrieben (siehe
       includes/layout.php getColorConfig()/renderHeader()) - Default hier
       nur der Fallback ohne DB-Werte. Neuer Standardakzent: weiches Indigo
       statt des frueheren, kraeftigeren Blaus. */
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --primary-light: #eef2ff;
    --secondary: #374151;
    --accent: #f59e0b;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;

    /* Zinc-Neutraltoene statt reinem Grau/Schwarz - ruhigerer Kontrast,
       kein hartes #000/#fff. Sidebar jetzt hell statt dunkel (siehe
       .sidebar-* Regeln) - auch --bg-sidebar-* sind pro Mandant ueberschreibbar,
       Default hier entsprechend auf helles Schema umgestellt. */
    --bg: #fafafa;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-sidebar-hover: #f4f4f5;
    --text: #18181b;
    --text-muted: #71717a;
    --text-sidebar: #52525b;
    --text-sidebar-hover: #52525b;
    --text-sidebar-active: #4338ca;
    --border: #e4e4e7;
    --border-focus: #4f46e5;

    --radius: 12px;
    --radius-sm: 8px;
    /* Deutlich zurueckhaltender als zuvor (Linear/Vercel-Stil: Kontur traegt
       die Form, Schatten nur als sehr feines Tiefen-Signal). */
    --shadow: 0 1px 2px rgba(24,24,27,0.04), 0 2px 8px rgba(24,24,27,0.03);
    --shadow-lg: 0 4px 12px rgba(24,24,27,0.06), 0 12px 32px rgba(24,24,27,0.08);

    --sidebar-width: 260px;
    --sidebar-width-collapsed: 76px;
    --header-height: 64px;

    --font: 'DM Sans', sans-serif;
    --font-mono: 'DM Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
}

html, body {
    overflow-x: hidden;
    overflow-x: clip; /* clip statt hidden: kein Formatting Context → iOS Momentum-Scroll funktioniert in Kindcontainern */
    max-width: 100vw;
}

/* ─── LAYOUT ─── */
.app-wrapper {
    display: block;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

/* ─── SIDEBAR ─── */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: transform 0.3s ease;
}

.sidebar-logo {
    padding: 22px 20px 18px;
    /* Trennlinie INNERHALB der Sidebar (nicht die Aussenkante zum
       Content) - deshalb an die dynamische Sidebar-Textfarbe gekoppelt statt
       an das globale, helle --border, sonst wirkte sie auf einer dunklen
       Sidebar wie ein hell durchscheinender Fremdkoerper. */
    border-bottom: 1px solid color-mix(in srgb, var(--text-sidebar) 15%, transparent);
}

.sidebar-logo .logo-icon {
    width: 36px; height: 36px;
    background: var(--primary);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
    font-size: 18px;
}

.sidebar-logo h1 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-sidebar);
    letter-spacing: 0.02em;
}

.sidebar-logo p {
    font-size: 0.72rem;
    color: var(--text-sidebar);
    opacity: 0.7;
    margin-top: 2px;
}

.sidebar-nav {
    flex: 1;
    padding: 12px 0;
    overflow-y: auto;
}

.nav-section {
    padding: 16px 20px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.8;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1px 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-sidebar);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
}

/* Hover/Aktiv bleiben bewusst innerhalb der individuell eingestellten
   Sidebar-Farben (--bg-sidebar-hover / --text-sidebar), nicht der globalen
   Markenfarbe --primary: sonst wirkte z.B. eine indigofarbene Hervorhebung
   auf einer rot eingestellten Sidebar wie ein Fremdkoerper. Der aktive Punkt
   bekommt zusaetzlich einen Akzentstreifen in --primary als Kennzeichnung,
   ohne Hintergrund/Text zu uebersteuern. */
.nav-item:hover {
    background: var(--bg-sidebar-hover);
    color: var(--text-sidebar-hover);
}

.nav-item.active {
    background: var(--bg-sidebar-hover);
    color: var(--text-sidebar-hover);
    font-weight: 600;
    border-left: 3px solid var(--primary);
    padding-left: 9px;
}

.nav-item .nav-icon {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.65;
}

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

.nav-item .nav-icon svg {
    /* Farbe wird bereits serverseitig in navIcon() (layout.php) direkt ins
       SVG geschrieben (fill/stroke -> currentColor je nach Icon) - ein
       pauschales "stroke: currentColor" hier wuerde reinen Fill-Icons ohne
       eigenen stroke-Wert (z.B. Geburtstage, Strafen-Auswertung) einen
       ungewollten duennen Rahmen aufzwingen (deren unsichtbare
       Hintergrund-Box hat nur stroke-width ohne stroke-Farbe gesetzt). */
    width: 16px;
    height: 16px;
}

.page-header h2 img {
    width: 16px;
    height: 16px;
    filter: brightness(0) saturate(100%) contrast(1.2);
    opacity: 0.9;
}

.nav-item .badge {
    margin-left: auto;
    background: var(--primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
}

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid color-mix(in srgb, var(--text-sidebar) 15%, transparent);
    font-size: 0.75rem;
    color: var(--text-sidebar);
    opacity: 0.6;
}

/* ─── MAIN ─── */
.main-content {
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ─── TOPBAR ─── */
.topbar {
    height: var(--header-height);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 28px;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    box-sizing: border-box;
}

.topbar-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    flex: 1;
}

.topbar-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
}
.topbar-menu-btn:hover { background: var(--bg); color: var(--text); }

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

.topbar-user {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 10px 5px 6px;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
    cursor: pointer;
}
.topbar-user:hover {
    background: var(--bg);
}
.topbar-user-link {
    position: absolute;
    inset: 0;
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.topbar-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.topbar-user-name {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.topbar-user .level-badge {
    background: var(--primary-light);
    color: var(--primary);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 4px;
}

/* ─── SIDEBAR + CONTENT LAYOUT (Sitzungen / Versammlungen / Gruppen-Mail) ─── */
.side-content-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    align-items: start;
}
.side-content-layout > * { min-width: 0; }

.gruppenmail-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    align-items: start;
}
.gruppenmail-grid > * { min-width: 0; }

@media (max-width: 900px) {
    .side-content-layout,
    .gruppenmail-grid {
        grid-template-columns: 1fr;
    }
    .side-content-layout .datum-list {
        max-height: 220px;
    }
    .gruppenmail-grid .empfaenger-list {
        max-height: 220px;
    }
}

/* ─── PAGE ─── */
.page-content {
    padding: 28px;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    width: 100%;
}

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

.page-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
}

.page-header p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ─── CARDS ─── */
.card {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.card-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.card-header h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.card-body {
    padding: 22px;
}

/* ─── STATS ─── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-icon {
    width: 46px; height: 46px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.stat-icon.blue   { background: var(--primary-light); }
.stat-icon.green  { background: #d1fae5; }
.stat-icon.amber  { background: #fef3c7; }
.stat-icon.red    { background: #fee2e2; }
.stat-icon.purple { background: #ede9fe; }

.stat-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    font-family: var(--font-mono);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 3px;
    font-weight: 500;
}

/* ─── BUTTONS ─── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
}

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

.btn-secondary {
    background: var(--bg);
    color: var(--secondary);
    border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--border); }

.btn-success {
    background: var(--success);
    color: #fff;
}
.btn-success:hover { background: #059669; }

.btn-danger {
    background: var(--danger);
    color: #fff;
}
.btn-danger:hover { background: #dc2626; }

.btn-warning {
    background: var(--warning);
    color: #fff;
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
}
.btn-outline:hover { background: var(--primary-light); }

.btn-sm { padding: 5px 11px; font-size: 0.78rem; }
.btn-lg { padding: 11px 22px; font-size: 0.95rem; }

.btn:disabled, .btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ─── FORMS ─── */
.form-grid {
    display: grid;
    gap: 18px;
}
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group.span-2 { grid-column: span 2; }
.form-group.span-3 { grid-column: span 3; }

label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--secondary);
    letter-spacing: 0.01em;
}

label .required { color: var(--danger); margin-left: 2px; }

.form-control {
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.875rem;
    color: var(--text);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    width: 100%;
}

.form-control:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 15%, transparent);
}

.form-control:disabled {
    background: var(--bg);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* iOS Safari zoomt beim Fokussieren eines Eingabefelds automatisch in die
   Seite hinein, sobald dessen Schriftgroesse unter 16px liegt (u.a. auf den
   Login-Screens deutlich spuerbar, da .form-control dort mit 0.875rem/14px
   die einzigen Eingabefelder auf der Seite sind) - nur auf schmalen/mobilen
   Bildschirmen auf 16px angehoben, damit sich am Desktop-Erscheinungsbild
   nichts aendert. */
@media (max-width: 900px) {
    .form-control { font-size: 16px; }
}

/* Datums-/Zeitfelder: iOS Safari (und teils Android) geben diesen Feldern eine
   feste Eigenbreite, wodurch sie ueber den Bildschirmrand hinausragen. Auf
   schmalen Bildschirmen wie ein normales Textfeld verhalten (volle Breite,
   nie breiter als der Container, gleiche Hoehe). */
@media (max-width: 900px) {
    input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"] {
        -webkit-appearance: none;
        appearance: none;
        display: block;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        min-height: 2.6em;
        line-height: 1.2;
    }
    input[type="date"].form-control, input[type="time"].form-control, input[type="datetime-local"].form-control, input[type="month"].form-control { width: 100%; }
    input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value,
    input[type="datetime-local"]::-webkit-date-and-time-value, input[type="month"]::-webkit-date-and-time-value {
        text-align: left;
        min-height: 1.2em;
        margin: 0;
    }
    /* Eltern in Grid/Flex duerfen nicht von der Eigenbreite der Felder aufgeweitet werden */
    .form-group, .form-grid > *, .cf-row > * { min-width: 0; }
}

textarea.form-control { resize: vertical; min-height: 100px; }

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.875rem;
}

.form-check input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* ─── TABLE ─── */
.table-wrapper {
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.855rem;
}

thead th {
    padding: 10px 14px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

thead th:hover { color: var(--text); }
thead th.sort-asc::after  { content: ' ↑'; color: var(--primary); }
thead th.sort-desc::after { content: ' ↓'; color: var(--primary); }

tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background-color 0.1s;
}

tbody tr:hover { background: color-mix(in srgb, var(--primary) 5%, var(--bg-card)); }
tbody tr:last-child { border-bottom: none; }

tbody td {
    padding: 11px 14px;
    vertical-align: middle;
}

.table-actions {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}

/* ─── BADGES ─── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.badge-success { background: #d1fae5; color: #065f46; }
.badge-danger  { background: #fee2e2; color: #991b1b; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-info    { background: #dbeafe; color: #1e40af; }
.badge-gray    { background: #f3f4f6; color: #374151; }
.badge-purple  { background: #ede9fe; color: #5b21b6; }

/* ─── FILTER CHIPS ─── */
/* Aktive Spaltenfilter (z.B. Mitgliederliste) - Farbe folgt --primary statt
   fest verdrahtetem Blau, damit ein individuell eingestellter Markenfarbton
   auch hier konsistent durchschlaegt. */
.filter-chip-bar {
    padding: 10px 16px;
    background: color-mix(in srgb, var(--primary) 6%, var(--bg-card));
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-chip-label {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
    color: var(--primary-dark);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.filter-chip a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px; height: 15px;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.7rem;
    opacity: 0.65;
}
.filter-chip a:hover { opacity: 1; background: rgba(0,0,0,0.08); }

.filter-chip-clear {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--danger);
    text-decoration: none;
    margin-left: 2px;
}
.filter-chip-clear:hover { text-decoration: underline; }

/* ─── SEARCH / FILTER BAR ─── */
.filter-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 14px 0;
}

.search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.search-input-wrap .search-icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1;
    pointer-events: none;
}

.search-input-wrap .form-control {
    padding-left: 38px;
    border-radius: 999px;
    background: var(--bg);
}
.search-input-wrap .form-control:focus {
    background: var(--bg-card);
}

/* ─── ALERTS ─── */
/* Bewusst KEIN display:flex hier: die allermeisten Alerts enthalten gemischten
   Inline-Inhalt (Text + <strong>/<code> direkt hintereinander ohne
   umschliessendes Element) - als Flex-Container wuerde jeder Textabschnitt
   zwischen den Tags zu einem eigenen, umbrechenden Flex-Item statt normal
   fliessendem Text zu bleiben. Die einzige Stelle, die wirklich eine
   Flex-Anordnung (Icon/Text nebeneinander, Button rechts) braucht - siehe
   core/includes/layout.php, Impersonation-Banner - setzt display:flex bereits
   explizit per Inline-Style selbst. */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    margin-bottom: 16px;
}

.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.alert-danger  { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.alert-warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.alert-info    { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }

/* ─── PAGINATION ─── */
.pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
    padding-top: 16px;
}

.page-link {
    padding: 6px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--secondary);
    text-decoration: none;
    background: #fff;
    transition: all 0.15s;
}

.page-link:hover   { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.page-link.active  { background: var(--primary); color: #fff; border-color: var(--primary); }
.page-link.disabled { opacity: 0.4; pointer-events: none; }

/* ─── MODAL (natives <dialog>-Element) ───
   Ersetzt die fruehere zweistufige .modal-overlay > .modal-Struktur: das
   <dialog>-Element ist jetzt selbst die Box, der abgedunkelte Hintergrund
   kommt ueber die native ::backdrop-Pseudo-Klasse. <dialog> rendert per
   showModal() automatisch im Browser-"Top Layer" oberhalb von alle anderem
   (kein z-index-Wettrennen mit z.B. der Mitglieder-App-Tableiste mehr
   moeglich) und bringt Fokus-Falle, ESC-Taste sowie display:none im
   geschlossenen Zustand automatisch mit. Ein/Ausblend-Animation, Backdrop-
   Klick und Abfangen der ESC-Taste fuer den weichen Uebergang siehe
   app.js (openModal()/closeModal()/mvSetupDialog()). */
/* Zentrierung bewusst ueber die native margin:auto-Logik des Browsers (UA-
   Stylesheet fuer <dialog> setzt "position:fixed; inset:0; margin:auto" von
   sich aus) - KEIN eigenes top/left/transform mehr. Eigentliche Ursache der
   wiederkehrenden Positionierungs-/Groessen-Bugs war vermutlich die ganze
   Zeit das CSS-transform auf dem Dialog selbst (fuer die Ein-/Ausblend-
   Animation): WebKit hat einen bekannten Bug, bei dem sowohl die eigene
   Zentrierungs-Berechnung als auch die inhaltsbasierte Hoehen-Berechnung
   (fit-content) durcheinanderkommt, sobald ein <dialog> ein transform traegt
   - unabhaengig davon, OB dieses transform fuer eine eigene Positionierung
   oder nur fuer eine Animation genutzt wird. Die Animation laeuft deshalb
   jetzt nur noch ueber opacity, kein transform mehr.
   max-height ueber dvh (dynamic viewport height) statt vh - beruecksichtigt
   die ein-/ausblendende Safari-Werkzeugleiste zuverlaessig von sich aus. */
dialog.mv-dialog {
    margin: auto;
    border: none;
    padding: 0;
    border-radius: 14px;
    width: calc(100vw - 40px);
    max-width: 680px;
    max-height: 85vh;
    max-height: 85dvh;
    background: #fff;
    box-shadow: var(--shadow-lg);
    /* display:none als Grundzustand, NICHT flex - das war der eigentliche
       Fehler hinter der ganzen "Klick auf Nachrichten im oberen Bereich
       funktioniert nicht"-Odyssee: ein unbedingtes display:flex ueberschreibt
       die UA-Stylesheet-Regel "dialog:not([open]) { display:none }" (gleiche
       Spezifitaet, Autoren-CSS gewinnt gegen User-Agent-CSS) - der Dialog
       blieb dadurch AUCH IM GESCHLOSSENEN ZUSTAND gerendert und fing dort,
       wo showModal() ihn zentriert haette, unsichtbar Klicks ab. Per
       elementFromPoint() bestaetigt: ein geschlossener #modalMsgActions lag
       exakt ueber dem oberen Drittel der Chat-Nachrichtenliste. Betraf
       vermutlich JEDES Modal in der App, nicht nur den Chat. */
    display: none;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.2s;
}
dialog.mv-dialog[open] { display: flex; }
dialog.mv-dialog.mv-open { opacity: 1; }
dialog.mv-dialog::backdrop {
    background: rgba(17,24,39,0.6);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.2s;
}
dialog.mv-dialog.mv-open::backdrop { opacity: 1; }

/* Verhindert die native Textauswahl-/Copy-Callout-Blase beim langen
   Halten auf Buttons und Ueberschriften INNERHALB von Modals (z.B. das
   Kontextmenue im Chat) - bewusst NICHT auf input/textarea angewendet,
   die muessen weiterhin normal auswaehlbar/editierbar bleiben. */
dialog.mv-dialog button,
dialog.mv-dialog .modal-header h3 {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3 { font-size: 1rem; font-weight: 700; }

.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s;
}
.modal-close:hover { color: var(--text); }

.modal-body {
    padding: 24px;
    overflow-y: auto;
    /* flex: 1 1 auto statt der Kurzform "flex:1" (= flex-basis:0%): Der
       <dialog> hat selbst KEINE explizite Hoehe, sondern schrumpft auf
       seinen Inhalt (fit-content) bis max-height - in genau diesem Fall
       (Flex-Container, dessen EIGENE Groesse erst aus dem Inhalt berechnet
       werden muss) loesen Browser flex-basis:0% auf einem wachsenden
       Flex-Kind unterschiedlich auf: Chrome faellt korrekt auf die
       inhaltsbasierte Mindesthoehe zurueck, WebKit (Safari/iOS - auch
       "Chrome" auf iOS laeuft zwingend auf WebKit) hat die Box hier
       stattdessen auf nahezu 0 zusammenschrumpfen lassen, wodurch
       das gesamte Modal viel zu niedrig wurde, unabhaengig vom sonstigen
       Inhalt. flex-basis:auto (statt 0%) nutzt die tatsaechliche
       Inhaltsgroesse als Ausgangswert und behebt das - waechst bei
       tatsaechlich langem Inhalt (der die max-height ausreizt) weiterhin
       ganz normal in den verbleibenden Platz hinein. */
    flex: 1 1 auto;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ─── TABS ─── */
/* Horizontales Scrollen statt Umbruch/Schrumpfen: bei vielen Reitern (z.B.
   Einstellungen mit 10 Tabs) reicht die Breite selbst auf Desktop oft nicht
   fuer alle Labels in einer Zeile - ohne nowrap+flex-shrink:0 bricht der
   Button-Text zweizeilig um und die Abstaende wirken durch das ungleiche
   Schrumpfen der Buttons uneinheitlich. Scrollen statt umbrechen haelt jedes
   Tab-Label einzeilig und gleichmaessig breit. */
.tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    margin-bottom: 22px;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden; /* sonst wandelt der Browser das implizite overflow-y:visible automatisch in "auto" um, sobald overflow-x gesetzt ist -> ungewollter vertikaler Scrollbalken */
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox: Scrollbalken optisch ausblenden, Scrollen per Wheel/Touch bleibt moeglich */
}
.tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge: dito */

.tab-btn {
    padding: 10px 18px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
}

.tab-btn:hover  { color: var(--text); }
a.tab-btn { text-decoration: none; display: inline-block; } /* Reiter als Links (z.B. Verbandsansicht) */
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

/* Einstellungen: am PC mehrzeilig umbrechen statt scrollen (Smartphone: weiter scrollbar, siehe Media-Query unten) */
@media (min-width: 901px) {
    #settingsTabs { flex-wrap: wrap; overflow: visible; row-gap: 0; }
}

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ─── MEMBER DETAIL ─── */
.member-header-card {
    /* Einfarbig statt Verlauf: der fruehere Verlauf ging von --bg-sidebar aus
       (frueher dunkles Navy) - seit die Sidebar hell ist, wurde das linke
       Ende weiss und die weisse Schrift dort unlesbar. --primary-dark ist
       immer dunkel genug fuer weissen Text und bleibt ueber die Einstellungen
       pro Mandant anpassbar. */
    background: var(--primary-dark);
    border-radius: var(--radius);
    padding: 28px;
    color: #fff;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.member-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 35%, transparent);
    border: 3px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.member-header-info h2 {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.member-header-info p {
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    margin-top: 3px;
}

.member-header-badges {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.member-header-badges .badge {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
}

/* ─── ANWESENHEIT ─── */
.anwesenheit-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.15s;
}

.anwesenheit-btn[data-val="1"] { background: var(--success); border-color: var(--success); color: #fff; }
.anwesenheit-btn[data-val="2"] { background: var(--danger);  border-color: var(--danger);  color: #fff; }
.anwesenheit-btn[data-val="3"] { background: var(--warning); border-color: var(--warning); color: #fff; }

/* ─── UTILS ─── */
.text-muted   { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-center  { text-align: center; }
.mt-4  { margin-top: 16px; }
.mb-4  { margin-bottom: 16px; }
.gap-2 { gap: 8px; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.w-full { width: 100%; }

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

/* ─── EMPTY STATE ─── */
.empty-state {
    text-align: center;
    padding: 52px 20px;
    color: var(--text-muted);
}

.empty-state .empty-icon {
    font-size: 2.8rem;
    margin-bottom: 12px;
    opacity: 0.3;
}

.empty-state h4 { font-size: 1rem; color: var(--text); margin-bottom: 6px; }
.empty-state p  { font-size: 0.875rem; }

/* ─── TOOLTIP ─── */
[data-tooltip] { position: relative; cursor: pointer; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%; transform: translateX(-50%);
    background: #1e2433;
    color: #fff;
    font-size: 0.72rem;
    padding: 4px 9px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 999;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
    /* Sidebar: position:fixed + overflow damit Inhalt sichtbar bleibt */
    .sidebar {
        position: fixed !important;
        top: 0; left: 0;
        height: 100vh;
        width: var(--sidebar-width, 260px);
        overflow-y: auto;
        overflow-x: hidden;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(.4,0,.2,1);
        z-index: 300;
        background: var(--bg-sidebar) !important;
    }
    .sidebar.open { transform: translateX(0); }

    /* Overlay hinter geöffneter Sidebar */
    .sidebar-overlay {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 299;
    }
    .sidebar-overlay.visible { display: block; }

    /* Hamburger-Button sichtbar */
    #sidebarToggle { display: flex !important; }

    .main-content {
        margin-left: 0;
    }

    /* Hamburger-Button in Topbar */
    .topbar-menu-btn { display: flex !important; }

    /* Nutzername kostet auf schmalen Bildschirmen zu viel Platz - kompakter
       Avatar (ohne Namenstext) reicht dort. */
    .topbar-user-name { display: none; }

    .form-grid.cols-2,
    .form-grid.cols-3 { grid-template-columns: 1fr; }
    .form-group.span-2,
    .form-group.span-3 { grid-column: span 1; }

    .page-content { padding: 14px; }

    /* Page header: Stack vertikal */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .page-header .d-flex,
    .page-header > div:last-child { width: 100%; flex-wrap: wrap; }

    /* Stats-Grid: 2 Spalten, Items dürfen schrumpfen */
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stats-grid > * { min-width: 0; }

    /* Tabs scrollen horizontal */
    .tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .tab-btn { flex-shrink: 0; }

    /* Tabellen: intern scrollen – identisch zu #tableWrapper in mitglieder.php */
    .table-wrapper {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        width: 100%;
        max-width: 100%;
    }
    .table-wrapper table {
        width: max-content;
        min-width: 100%;
    }

    /* Buttons in Table-Actions */
    .table-actions { gap: 4px; }

    /* Filter-Karte: Stack */
    .card-body form > div { flex-direction: column; align-items: stretch !important; }

    /* Inline-Edit abschalten auf Mobile (zu kleine Felder) */
    .inline-edit-toggle-wrap { display: none; }

    /* Modal: Bottom-Sheet - gilt nicht fuer Modals mit einem Text-Eingabefeld
       oder kurze Aktionsmenüs (siehe mitglied/chat.php: #modalNewChat,
       #modalForward, #modalMsgActions) - die bleiben bewusst als einfaches,
       zentriertes Popup stehen. Ein am Bildschirmrand verankertes Sheet
       reagiert auf iOS Safari NICHT auf die eingeblendete Tastatur (die
       verkleinert nur den sichtbaren Bereich, nicht das Layout) und das
       Eingabefeld landet dann unsichtbar dahinter - ein zentriertes Popup
       mit vernuenftiger max-height bleibt dagegen zuverlaessig sichtbar. */
    dialog.mv-dialog:not(#modalNewChat):not(#modalForward):not(#modalMsgActions) {
        position: fixed;
        left: 0; right: 0; bottom: 0; top: auto;
        margin: 0;
        width: 100%;
        max-width: 100vw;
        max-height: 90vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
    }
    dialog.mv-dialog:not(#modalNewChat):not(#modalForward):not(#modalMsgActions).mv-open { transform: translateY(0); }

    /* 2-spaltige Grids in Einstellungen: 1 Spalte */
    div[style*="grid-template-columns:1fr 1fr"] { display: block !important; }
    div[style*="grid-template-columns: 1fr 1fr"] { display: block !important; }
}

@media (max-width: 600px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .page-content { padding: 10px; }
    .card-header { flex-wrap: wrap; gap: 8px; }
    .card-header h3 { font-size: 0.9rem; }

    /* Topbar kompakter */
    .topbar { padding: 0 14px; gap: 10px; }
    .topbar-user .level-badge { display: none; }

    /* Buttons kleiner */
    .btn { padding: 7px 12px; font-size: 0.82rem; }
    .btn-sm { padding: 5px 9px; font-size: 0.76rem; }

    /* Page-header Buttons: volle Breite */
    .page-header .btn { flex: 1; text-align: center; justify-content: center; }

    /* Stat-Cards kompakter damit 3 Stück nebeneinander passen */
    .stat-card { padding: 10px 8px; gap: 8px; overflow: hidden; }
    .stat-card > div:last-child { min-width: 0; overflow: hidden; }
    .stat-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .stat-icon { width: 34px; height: 34px; font-size: 0.75rem; border-radius: 7px; }
    .stat-value { font-size: 1.1rem; }
    .stat-label { font-size: 0.65rem; }
}

/* ─── PRINT ─── */
@media print {
    .sidebar, .topbar, .topbar-actions, .btn, .filter-bar, .table-actions, .pagination { display: none !important; }
    .main-content { margin-left: 0; }
    .card { box-shadow: none; border: 1px solid #ddd; }
    body { background: #fff; }
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ─── SPINNER ─── */
.spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── TOGGLE SWITCH ─── */
.toggle-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

input.toggle {
    width: 40px; height: 22px;
    appearance: none;
    background: var(--border);
    border-radius: 11px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

input.toggle::before {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    top: 3px; left: 3px;
    transition: left 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

input.toggle:checked {
    background: var(--primary);
}
input.toggle:checked::before { left: 21px; }

/* ─── SESSION STATUS ─── */
.sitzung-row-selected { background: #eff6ff !important; }

/* ─── DATUM SECTION HEADER ─── */
.date-section-header {
    background: var(--bg);
    padding: 8px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
}



/* ── Zahlung Modal (v1.4.0) ── */
.zahlung-summe {
    background: var(--primary-light, #eff6ff);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-bottom: 16px;
}

/* ── Kalender (v1.4.0) ── */
.kalender-grid { display: grid; grid-template-columns: repeat(7,1fr); grid-auto-rows: 100px; gap: 2px; }
.kal-day { height: 100%; padding: 4px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); cursor: pointer; transition: background .12s; overflow: hidden; box-sizing: border-box; }
.kal-day:hover { background: var(--primary-light, #eff6ff); }
.kal-day.today { border-color: var(--primary); background: var(--primary-light, #eff6ff); }
.kal-day.other-month { background: none; border-color: transparent; cursor: default; }
.kal-day-nr { font-size: .75rem; font-weight: 700; color: var(--text-muted); margin-bottom: 3px; }
.kal-event { border-radius: 3px; padding: 2px 5px; margin-bottom: 2px; cursor: pointer; font-size: .7rem; line-height: 1.3; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kal-age { opacity: 0.85; }
@media(max-width:700px){ .kal-age { display: none; } }
@media(max-width:700px){ .kalender-grid{ grid-auto-rows: 72px; } .kal-event{ font-size: 0.58rem; padding: 1px 2px; } }

/* ── Einstellungen-Tabs ── */
.settings-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab-btn {
    padding: 10px 18px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
    flex-shrink: 0;
}
.settings-tab-btn:hover { color: var(--text); }
.settings-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.settings-tab-pane { display: none; }
.settings-tab-pane.active { display: block; }

/* ── Hamburger nur auf Mobile (kein doppelter Block nötig) ── */
@media (min-width: 901px) {
    #sidebarToggle { display: none !important; }
    .sidebar-overlay { display: none !important; }
}

/* ── Mobile Optimierungen: Sitzungen, Versammlungen, Gruppenmail, Kalender ── */
@media (max-width: 900px) {

    /* Sitzungen: Anwesenheits-Buttons stapeln */
    .anwesenheit-row { flex-direction: column; gap: 6px; }
    .anwesenheit-btns { display: flex; flex-wrap: wrap; gap: 4px; }

    /* Gruppenmail: zweispaltiges Layout auf eine Spalte */
    .gruppenmail-grid { grid-template-columns: 1fr !important; }

    /* Kalender: Monatsansicht auf Mobile kompakt */
    .kalender-grid { gap: 1px; grid-auto-rows: 80px; }
    .kal-day { padding: 2px 3px; font-size: 0.7rem; }
    .kal-day-nr { font-size: 0.7rem; }
    .kal-event { font-size: 0.62rem; padding: 1px 3px; }

    /* Kalender Seitenleiste unter Kalender */
    .kalender-layout { grid-template-columns: 1fr !important; }

    /* Versammlungen: Buttons auf Mobile vertikal */
    .versammlung-actions { flex-direction: column; gap: 6px; }

    /* Tabellen: horizontales Scrollen auf Mobile */
    .table-scroll-mobile { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Sitzungen: Datum-Auswahl full width */
    .sitzung-datumwahl { flex-direction: column; gap: 8px; }
    .sitzung-datumwahl select,
    .sitzung-datumwahl input { width: 100% !important; }

    /* Page-Header Aktionen untereinander auf kleinen Screens */
    .page-header { gap: 10px; }
    .page-header > div:last-child { display: flex; flex-wrap: wrap; gap: 6px; }

    /* Card-Body Padding reduzieren */
    .card-body { padding: 14px !important; }

    /* Tabs: horizontal scrollbar auf Mobile */
    .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    .tab-btn { flex-shrink: 0; padding: 10px 12px; font-size: 0.8rem; }
}


/* Variablen-Chips (Drag & Drop in Editor/Betreff, siehe assets/js/variablen_dnd.js) */
.var-chips { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.var-chips-label { font-size:0.78rem; font-weight:700; color:var(--text-muted); margin-right:4px; }
.var-chips-hint { font-size:0.74rem; color:var(--text-muted); margin-left:6px; }
.var-chip {
    display:inline-block; padding:4px 10px; border:1px solid var(--border); border-radius:6px;
    background:var(--bg); color:var(--text); font-size:0.78rem; font-family:monospace;
    cursor:grab; user-select:none; -webkit-user-select:none; -webkit-user-drag:element;
    touch-action:manipulation;
}
.var-chip:hover, .var-chip:focus { border-color:var(--primary); color:var(--primary); outline:none; }
.var-chip:active { cursor:grabbing; }
.var-chip-drag { opacity:.5; }
body.var-dragging .ql-editor, body.var-dragging [data-var-field] { outline:2px dashed var(--primary); outline-offset:-2px; }
@media (hover: none) { .var-chips-hint { display:none; } }


/* Passive Mitglieder (ohne Austritt) in der Mitgliederliste gesondert markiert */
.badge-passiv { background:#fef3c7; color:#92400e; border:1px solid #f59e0b; }
tr.row-passiv > td { background:#fffbeb; }
tr.row-passiv > td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }


/* Touch-Geraete: Checkboxen/Radiobuttons gut treffbar (Browser-Standard ist ca. 13 px) */
@media (pointer: coarse), (max-width: 900px) {
    input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; min-width: 22px; accent-color: var(--primary); }
    .form-check { gap: 10px; }
    .form-check input[type="checkbox"] { width: 22px; height: 22px; }
}