:root {
    --bg: #f4f6f8;
    --card: #ffffff;
    --ink: #1f2933;
    --muted: #6b7280;
    --line: #e2e6ea;
    --brand: #1f6f3c;       /* Vereinsgrün */
    --brand-dark: #165a30;
    --ok: #1f7a3d;
    --warn: #b45309;
    --danger: #b91c1c;
    --info: #1e3a8a;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
}
a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Topbar */
.topbar { background: var(--brand); color: #fff; position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 5px rgba(0,0,0,.18); }
.topbar-inner {
    display: flex; align-items: center; gap: 1.5rem;
    max-width: 1000px; margin: 0 auto; height: 80px;
    padding: 0 1rem;
}
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand-logo {
    display: block; height: 62px; width: auto;
    background: #fff; border-radius: 10px; padding: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.mainnav { display: flex; gap: .2rem; flex: 1; flex-wrap: wrap; align-items: center; }
.mainnav > a, .navmore-btn { display: inline-flex; align-items: center; justify-content: center; color: #e8f3ec; padding: .45rem; border-radius: 9px; width: 44px; height: 44px; }
.mainnav > a .icon, .navmore-btn .icon { width: 28px; height: 28px; }
.mainnav > a:hover, .navmore-btn:hover { background: rgba(255,255,255,.14); text-decoration: none; }
.mainnav > a.active, .navmore.has-active > .navmore-btn, .navmore[open] > .navmore-btn { background: var(--brand-dark); color: #fff; }
/* Menütext nur für Screenreader/Tooltip – visuell ausgeblendet (reine Icon-Darstellung) */
.navtext { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Topbar-Ausklappmenüs: Konto (Avatar) + „Mehr" – aufgebaut auf <details> */
.navdrop { position: relative; }
.navdrop > summary { list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.navdrop > summary::-webkit-details-marker { display: none; }
.navdrop > summary::marker { content: ""; }
.usermenu { position: relative; flex: 0 0 auto; }

/* Runder Avatar in der Leiste (eigene Klasse, damit die Foto-Lightbox nicht auslöst) */
.nav-ava { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: #eaf3ee; color: var(--brand-dark); font-weight: 700; font-size: .82rem; flex: 0 0 auto; line-height: 1; }
.nav-ava-img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.nav-ava-lg { width: 44px; height: 44px; font-size: 1.05rem; }
.user-btn { display: inline-flex; align-items: center; gap: .25rem; padding: .18rem .3rem .18rem .18rem; border-radius: 999px; color: #e8f3ec; }
.user-btn:hover { background: rgba(255,255,255,.14); }
.usermenu[open] > .user-btn { background: rgba(255,255,255,.2); }
.user-btn .icon { width: 16px; height: 16px; opacity: .85; transition: transform .15s ease; }
.usermenu[open] > .user-btn .icon { transform: rotate(180deg); }

.drop-panel { position: absolute; top: calc(100% + 7px); min-width: 224px; background: #fff; color: #1c2b22; border: 1px solid #e2e9e4; border-radius: 12px; box-shadow: 0 12px 32px rgba(10,30,18,.22); padding: .4rem; z-index: 60; }
.drop-panel.drop-right { right: 0; }
.drop-head { display: flex; align-items: center; gap: .55rem; padding: .35rem .5rem .55rem; border-bottom: 1px solid #eef2ef; margin-bottom: .35rem; }
.drop-name { font-weight: 700; font-size: .95rem; color: #16241c; }
.drop-item { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: 8px; color: #243a2e; font-size: .92rem; white-space: nowrap; }
.drop-item .icon { width: 19px; height: 19px; color: var(--brand); flex: 0 0 auto; }
.drop-item:hover { background: #eef4f0; text-decoration: none; }
.drop-item.active { background: #e4efe8; color: var(--brand-dark); }
.drop-sep { border: 0; border-top: 1px solid #eef2ef; margin: .35rem .3rem; }
.drop-danger, .drop-danger .icon { color: #b3261e; }
.drop-danger:hover { background: #fcecea; }

/* Layout */
.wrap { max-width: 1000px; margin: 1.5rem auto; padding: 0 1rem; }
.wrap.centered { max-width: 420px; margin-top: 8vh; }
/* Breadcrumb */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; font-size: .82rem; color: var(--muted); margin: 0 0 1.1rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--brand-dark); }
.breadcrumb .sep { color: var(--line); }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }
@media print { .breadcrumb { display: none !important; } }
.foot { text-align: center; color: var(--muted); font-size: .8rem; padding: 2rem 0; }

h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; }

/* Cards */
.card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 10px; padding: 1.1rem 1.25rem; margin-bottom: 1rem;
}
.auth-card { max-width: 400px; margin: 0 auto; }

.grid { display: grid; gap: 1rem; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid.cards { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
/* Einstellungen: Kacheln packen platzsparend als Masonry – mehrspaltig nach Breite
   (3 Spalten auf breiten Schirmen, 2 auf Tablet, 1 auf dem Handy), Karten brechen nie um. */
.settings-grid { column-width: 23rem; column-gap: 1rem; }
.settings-grid .card { break-inside: avoid; margin: 0 0 1rem; }
/* Alt-Spaltencontainer neutralisieren: die Karten fließen direkt in die Masonry-Spalten. */
.settings-col { display: contents; }
@media (max-width: 640px) {
    .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
}

/* Kontaktformular-Gründe: kompakter Editor (Dropdown wählt den Grund, „＋" legt neu an) */
.kr-selrow { display: flex; gap: .5rem; align-items: center; margin-top: .3rem; }
.kr-selrow .kr-select { flex: 1 1 auto; margin-top: 0; }
.kr-selrow .kr-add { flex: 0 0 auto; }
.kr-fields { margin-top: .1rem; }
.kr-fields label { margin: .5rem 0 0; }
.kr-actions { display: flex; gap: .5rem; align-items: center; margin-top: .8rem; }
.kr-actions .kr-del { margin-left: auto; }

/* Ansetzungen (Schiedsrichter-Einsätze): Kalender + Liste */
.asg-stats { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1rem; }
.asg-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; }
.asg-day { display: flex; flex-direction: column; gap: .3rem; min-height: 4.6rem; padding: .35rem .4rem; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfc; }
.asg-day.has-items { background: #fff; }
.asg-day.is-today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.asg-day-h { display: flex; justify-content: space-between; align-items: baseline; font-size: .74rem; color: var(--muted); }
.asg-day-h .dow { font-weight: 700; color: var(--ink); }
.asg-day-h .dom { font-variant-numeric: tabular-nums; }
.asg-day-body { display: flex; flex-wrap: wrap; gap: .25rem; }
.asg-chip { display: inline-flex; align-items: center; gap: .2rem; max-width: 100%; padding: .1rem .4rem .1rem .1rem; border-radius: 999px; background: #eef4f0; font-size: .72rem; color: var(--ink); }
.asg-chip .avatar { width: 22px; height: 22px; font-size: .58rem; }
.asg-chip-t { font-variant-numeric: tabular-nums; }
.asg-av-none { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #e2e6e9; color: var(--muted); }
@media (max-width: 720px) { .asg-cal { grid-template-columns: repeat(2, 1fr); } }

.asg-list { display: flex; flex-direction: column; }
.asg-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.asg-row:last-child { border-bottom: none; }
.asg-row.asg-open { background: #fffaf0; border-radius: 8px; padding: .55rem .5rem; margin: .15rem 0; }
.asg-when { flex: 0 0 auto; min-width: 5.2rem; text-align: center; }
.asg-date { display: block; font-weight: 700; }
.asg-time { display: block; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.asg-main { flex: 1 1 12rem; min-width: 0; }
.asg-teams { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; font-weight: 600; }
.asg-role { font-weight: 600; }
.asg-meta { margin-top: .15rem; }
.asg-ref { flex: 0 0 auto; display: flex; align-items: center; gap: .4rem; }
.asg-ref-name { font-size: .9rem; }
.asg-assign { display: flex; gap: .3rem; align-items: center; margin: 0; }
.asg-assign select { width: auto; max-width: 11rem; margin: 0; }
/* Schmale Screens: Ansetzungs-Zeile als gestapelte Karte statt enger 2-Spalten-Grid.
   Datum+Uhrzeit als Kopfzeile, Titel/Rolle/Meta volle Breite, SR + Löschen als Fußzeile. */
@media (max-width: 720px) {
  .asg-row { flex-direction: column; align-items: stretch; gap: .35rem; padding: .75rem 0; }
  .asg-row.asg-open { padding: .75rem .6rem; }
  .asg-when { display: flex; align-items: baseline; gap: .5rem; min-width: 0; text-align: left; }
  .asg-when .asg-date, .asg-when .asg-time { display: inline; }
  .asg-when .asg-date { color: var(--brand); }
  .asg-main { flex: 1 1 auto; width: 100%; min-width: 0; }
  .asg-teams { flex-flow: column nowrap; align-items: stretch; gap: .3rem; }
  .asg-teams .asg-role-wrap { align-self: flex-start; }
  .asg-meta { overflow-wrap: anywhere; }
  .asg-ref { width: 100%; gap: .5rem; margin-top: .1rem; padding-top: .45rem; border-top: 1px dashed var(--line); }
  .asg-ref > form:last-child { margin-left: auto !important; }
  .asg-assign { flex: 1 1 auto; }
  .asg-assign select { max-width: none; width: 100%; }
}

.stat .stat-label { color: var(--muted); font-size: .85rem; }
.stat .stat-value { font-size: 1.6rem; font-weight: 700; margin: .2rem 0; }
.stat.total { background: #eef6f0; border-color: #cfe6d7; }
.big { font-size: 2rem; font-weight: 700; margin: .3rem 0 1rem; }

/* Forms */
label { display: block; margin: .6rem 0; font-size: .9rem; color: #374151; }
input, select, textarea {
    width: 100%; padding: .55rem .65rem; margin-top: .25rem;
    border: 1px solid #cbd2d9; border-radius: 7px; font: inherit; background: #fff;
}
/* Radios/Checkboxen sind keine Eingabefelder: die Regel darüber streckt sie sonst auf volle
   Breite und drängt den zugehörigen Text aus dem Layout. Rahmen/Polsterung ignoriert der
   Browser bei diesen Feldern ohnehin – nur die Breite richtet Schaden an. */
input[type=radio], input[type=checkbox] { width: auto; }
input:focus, select:focus, textarea:focus { outline: 2px solid #bfe3cb; border-color: var(--brand); }
.form .btn { margin-top: 1rem; }

.btn {
    display: inline-block; cursor: pointer;
    background: #fff; color: var(--ink); border: 1px solid #cbd2d9;
    padding: .5rem .9rem; border-radius: 7px; font: inherit;
}
.btn:hover { background: #f0f2f4; text-decoration: none; }
.btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-sm { padding: .3rem .55rem; font-size: .82rem; }
.btn-danger { background: #b3261e; color: #fff; border-color: #b3261e; }
.btn-danger:hover { background: #8f1d17; }
/* Icons in Buttons */
.btn .icon { vertical-align: -.18em; }
.btn-text-icon { display: inline-flex; align-items: center; gap: .4rem; }
/* Reiner Icon-Button (kompakt, quadratisch) */
.btn-icon { display: inline-flex; align-items: center; justify-content: center; padding: .42rem; line-height: 0; }
.btn-icon.btn-sm { padding: .34rem; }
.btn-icon .icon { vertical-align: 0; }
.btn-danger.btn-icon { background: #fff; color: #b3261e; border-color: #e3b6b3; }
.btn-danger.btn-icon:hover { background: #fbeae9; }
.row-gap { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
/* kompakte Icon-Aktionen nebeneinander (z. B. Termin-Zeile) */
.icon-actions { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.icon-actions .btn-icon { padding: .28rem; }
.icon-actions form { margin: 0; }
/* Termine: Aktionsspalte (Icons) rechtsbündig */
.events-table th:last-child, .events-table td:last-child { text-align: right; }
.events-table .icon-actions { justify-content: flex-end; }
/* anklickbare Adresse -> Karten/Navigation */
.maps-link { color: var(--brand-dark); display: inline-flex; align-items: center; gap: .25rem; }
.maps-link:hover { text-decoration: underline; }
.maps-link .icon { flex: 0 0 auto; vertical-align: -.15em; }

/* Anwesenheit: runde A/E/U-Auswahl (Radios) */
.att-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .8rem; }
/* Erfassung: mehrspaltiges Raster, je Mitglied eine kompakte Zeile
   (Name links, A/E/U-Buttons rechtsbündig). */
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 0 1.4rem; }
.att-item { display: flex; align-items: center; gap: .4rem; min-width: 0; padding: .12rem 0; border-bottom: 1px solid var(--line); }
.att-item .att-name { flex: 1 1 auto; min-width: 0; }
.att-item .att-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-item .aeu { flex: 0 0 auto; }
.aeu { display: inline-flex; gap: .25rem; }
.aeu label { cursor: pointer; display: inline-flex; }
.aeu input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.aeu label span { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; border: 2px solid var(--line); color: var(--muted); font-weight: 800; font-size: .9rem; background: #fff; }
.aeu label:hover span { border-color: #9aa3ad; }
.aeu-a input:checked + span { background: var(--ok); border-color: var(--ok); color: #fff; }
.aeu-g input:checked + span { background: #f5c518; border-color: #e0b400; color: #3a2e00; }
.aeu-e input:checked + span { background: var(--warn); border-color: var(--warn); color: #fff; }
.aeu-u input:checked + span { background: var(--danger); border-color: var(--danger); color: #fff; }
.aeu-p input:checked + span { background: #9aa3ad; border-color: #9aa3ad; color: #fff; }
.aeu input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.att-readonly .aeu label { cursor: default; }
.att-readonly .aeu label span { opacity: .92; }
.att-saved { color: var(--ok); font-size: .85rem; display: inline-flex; align-items: center; gap: .2rem; opacity: 0; transition: opacity .15s; }
.att-saved.show { opacity: 1; }
/* farbige Zähl-/Status-Punkte (Statistik, Mitgliedskarte) */
.aeu-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem; border-radius: 999px; color: #fff; font-weight: 700; font-size: .8rem; vertical-align: -.3em; }
.aeu-dot.aeu-a { background: var(--ok); }
.aeu-dot.aeu-g { background: #f5c518; color: #3a2e00; }
.aeu-dot.aeu-e { background: var(--warn); }
.aeu-dot.aeu-u { background: var(--danger); }
.aeu-dot.aeu-p { background: #9aa3ad; }

/* Reiter (Unterseiten-Tabs), z. B. Anwesenheit / Beiträge */
.subtabs { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 2px solid var(--line); margin: 0 0 1rem; }
.subtabs a { padding: .5rem .95rem; color: var(--muted); font-weight: 600; border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; margin-bottom: -2px; }
.subtabs a:hover { color: var(--ink); background: #eef1f3; text-decoration: none; }
.subtabs a.active { color: var(--brand-dark); background: var(--card); border-color: var(--line); border-bottom-color: var(--card); }

/* sortier-/filterbare Tabelle */
.sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-th:hover { background: #e7ebee; }
.sortable-th[data-sort="asc"]::after { content: " ▲"; font-size: .7em; color: var(--muted); }
.sortable-th[data-sort="desc"]::after { content: " ▼"; font-size: .7em; color: var(--muted); }
.filter-row th { padding: .25rem .3rem; background: #fff; }
.col-filter { width: 100%; min-width: 0; margin: 0; padding: .2rem .35rem; font-size: .8rem; box-sizing: border-box; }

/* Anwesenheits-Matrix je Termin */
.att-matrix th.att-col, .att-matrix td.att-cell, .att-matrix td.att-points, .att-matrix thead th:last-child { text-align: center; }
.att-matrix td.att-cell { padding: .3rem .2rem; }
.att-matrix td.att-points { font-variant-numeric: tabular-nums; }
.att-matrix .aeu-dot { min-width: 1.4rem; height: 1.4rem; font-size: .75rem; vertical-align: middle; }

/* kompakte Formulare in Tabellenzeilen */
.rowform { display: flex; gap: .4rem; align-items: center; flex-wrap: nowrap; margin: 0; }
.rowform input[type=date] { width: auto; margin-top: 0; padding: .28rem .4rem; font-size: .82rem; }
.inline-check { display: inline-flex; align-items: center; gap: .25rem; margin: 0; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.inline-check input { width: auto; margin: 0; }
/* Beitrag bezahlen: Kalender-Symbol = natives Datumsfeld (Standard heute).
   Das transparente Datumsfeld liegt über dem Icon; sein (unsichtbarer) Picker-
   Indikator füllt die ganze Fläche -> Antippen öffnet überall den Datumswähler. */
.payform .pay-cal { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border: 1px solid #cbd2d9; border-radius: 7px; background: #fff; color: var(--muted); }
.payform .pay-cal:hover { color: var(--brand-dark); }
.payform .pay-cal .pay-date { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.payform .pay-cal .pay-date::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; cursor: pointer; }
.payform .pay-cal.pay-cal-set { color: var(--brand); border-color: var(--brand); background: #eaf3ec; }

/* Tables */
.table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.table th, .table td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--line); }
.table th { background: #f1f4f6; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.table tr:last-child td { border-bottom: none; }
.table.compact th, .table.compact td { padding: .4rem .6rem; font-size: .9rem; }
/* Responsive Tabellen: breite Datentabellen werden auf dem Smartphone zu Karten */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Mitgliederliste: leere Zellen am Desktop mit „–" (mobil werden sie ausgeblendet) */
table.cards-table td:empty::before { content: "–"; color: var(--muted); }

/* Mitgliederliste: immer als mehrzeilige Kacheln – Desktop = Raster, Mobil = eine Spalte.
   Kein Feldinhalt bricht um; zu langer Text wird mit … abgeschnitten. */
table.member-cards { border: 0; background: transparent; display: block; }
table.member-cards thead { display: none; }
table.member-cards tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .6rem; }
table.member-cards tr { display: block; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: .7rem .8rem; }
table.member-cards td { display: block; border: 0; padding: 0; max-width: 100%; }
table.member-cards td.col-name { margin-bottom: .55rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
table.member-cards td.col-name .member-cell { gap: .7rem; }
/* Name + Rolle als linksbündiger Stapel neben dem Foto */
table.member-cards td.col-name .member-id { display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; }
table.member-cards td.col-name .member-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.08rem; line-height: 1.2; font-weight: 500; }
table.member-cards td.col-name .member-role { margin-top: .28rem; display: flex; flex-wrap: wrap; gap: .22rem; }
table.member-cards td:not(.col-name):not(:empty) {
    font-size: .85rem; line-height: 1.55;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
table.member-cards td:not(.col-name):not(:empty)::before { content: attr(data-label) ": "; color: var(--muted); font-size: .76rem; }
table.member-cards td:empty { display: none; }

/* „Spalten"-Knopf rechts über der Tabelle mit Aufklapp-Panel */
.col-config-bar { display: flex; justify-content: flex-end; margin: .2rem 0 .6rem; }
.col-config-pop { position: relative; }
.col-config-pop > summary { list-style: none; cursor: pointer; }
.col-config-pop > summary::-webkit-details-marker { display: none; }
.col-config-pop > summary::marker { content: ""; }
.col-config-panel {
    position: absolute; right: 0; top: calc(100% + .35rem); z-index: 30;
    width: min(28rem, 92vw);
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: .8rem .9rem; box-shadow: 0 8px 28px rgba(20,40,30,.18);
}
.col-config-panel .col-order { max-width: none; }

@media print { .table-scroll { overflow: visible; } }
@media (max-width: 640px) {
    .table-scroll { overflow-x: visible; }
    table.table.t-stack { border: 0; background: transparent; border-radius: 0; }
    table.table.t-stack thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    table.table.t-stack tbody { display: block; }
    table.table.t-stack tr { display: block; border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: .55rem .7rem; margin-bottom: .55rem; }
    table.table.t-stack td { display: block; border: 0; padding: .22rem 0; text-align: left; white-space: normal; }
    table.table.t-stack td[data-label]::before {
        content: attr(data-label);
        display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em;
        color: var(--muted); font-weight: 700; margin-bottom: .05rem;
    }
    table.table.t-stack td:empty { display: none; }
    table.table.t-stack td .row-gap { justify-content: flex-start; }

    /* Mitgliederliste: kompakte Karten – Name oben, Zusatzfelder als „Label: Wert" nebeneinander */
    table.cards-table { border: 0; background: transparent; }
    table.cards-table thead { display: none; }
    table.cards-table tbody, table.cards-table tr, table.cards-table td { display: block; }
    table.cards-table tr { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: .5rem .65rem; margin-bottom: .5rem; }
    table.cards-table td { border: 0; padding: 0; }
    table.cards-table td.col-name { margin-bottom: .15rem; }
    table.cards-table td:not(.col-name):not(:empty) { display: inline-block; margin-right: .9rem; font-size: .85rem; line-height: 1.5; }
    table.cards-table td:not(.col-name):not(:empty)::before { content: attr(data-label) ": "; color: var(--muted); font-size: .76rem; }
    table.cards-table td:empty { display: none; }
    /* interaktive Aktions-Zelle (z. B. Bezahl-Formular) als eigener Block */
    table.cards-table td.col-action:not(:empty) { display: block; margin-top: .4rem; }
    table.cards-table td.col-action::before { display: none; }
    table.cards-table td.col-action .rowform { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

    /* Seitenkopf umbricht auf dem Smartphone; Auswahl-Felder (z. B. Saison) volle Breite */
    .page-head { flex-wrap: wrap; }
    .page-head form { width: 100%; margin: 0; }
    .page-head form select { width: 100%; }

    /* Beitragsliste: Mitgliedskachel zweizeilig –
       Zeile 1: Avatar+Name linksbündig; Zeile 2: alles Übrige linksbündig. */
    table.contrib-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; padding: .5rem .65rem; }
    table.contrib-table td.col-name { flex: 0 0 100%; order: 1; display: flex; justify-content: flex-start; align-items: center; gap: .35rem; margin: 0 0 .35rem; text-align: left; }
    table.contrib-table td.col-name .member-cell { min-width: 0; }
    table.contrib-table td.col-name .member-cell > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    table.contrib-table td:not(.col-name):not(:empty) { display: inline-flex; align-items: center; margin: 0; font-size: .82rem; }
    table.contrib-table td:not(.col-name):not(:empty)::before { font-size: .66rem; }
    table.contrib-table td[data-label="Status"] { order: 2; }
    table.contrib-table td[data-label="Status"]:not(:empty)::before { content: none; }
    table.contrib-table td[data-label="Soll"] { order: 3; }
    table.contrib-table td[data-label="Bezahlt"] { order: 4; }
    table.contrib-table td[data-label="Datum"] { order: 5; }
    table.contrib-table td.col-action:not(:empty) { display: inline-flex; order: 6; margin: 0; }
    table.contrib-table td.col-action .rowform { flex-wrap: wrap; gap: .3rem; }
}

/* Badges */
.badge { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .78rem; background: #eef0f2; color: #374151; }
.badge-ok { background: #e3f3e8; color: var(--ok); }
.badge-warn { background: #fdf0dd; color: var(--warn); }
.badge-blue { background: #dcebfb; color: #1a5fb4; } /* lindblau (z. B. Pate-Badge) */
.badge-off { background: #f1f1f1; color: #6b7280; }
.badge-info { background: #e7edf8; color: var(--info); }
/* WhatsApp-Symbol hinter Handy-Nummern */
.wa-link { color: #25D366; display: inline-flex; align-items: center; vertical-align: -.18em; margin-left: .2rem; }
.wa-link:hover { color: #1da851; }
.wa-icon { display: block; }
/* Live-Suche: ausgefilterte Zeilen/Tabelle ausblenden (auch bei Karten-Layout) */
.filtered-out { display: none !important; }
.live-empty { margin: .5rem 0; }
/* Beitragsstatus als runder Icon-Button (grün = bezahlt, rot = offen, …) */
.status-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; border-radius: 50%;
    color: #fff; flex: 0 0 auto; vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.status-dot .icon { width: 1.25rem; height: 1.25rem; stroke-width: 2.3; }
.status-dot.sd-ok     { background: var(--ok); }      /* bezahlt */
.status-dot.sd-danger { background: var(--danger); }  /* offen */
.status-dot.sd-warn   { background: var(--warn); }    /* teilweise */
.status-dot.sd-muted  { background: #9aa3ad; }        /* beitragsfrei / kein Betrag */

/* Stand-Kachel: grafisches Statistik-Raster (Desktop 3-spaltig, Mobil 2-spaltig) */
.stand-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.stand-head h2 { margin: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin-top: .7rem; }
.stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .1rem; padding: .7rem .4rem; background: #f6f8f9; border: 1px solid var(--line); border-radius: 10px; }
.stat-ic { display: inline-flex; color: var(--muted); }
.stat-num { font-size: 1.35rem; font-weight: 800; line-height: 1.15; }
.stat-lbl { font-size: .76rem; color: var(--muted); }
.stat-num.ok, .stat-ic.ok { color: var(--ok); }
.stat-num.warn, .stat-ic.warn { color: var(--warn); }
.stat-num.muted, .stat-ic.muted { color: var(--muted); }
.stat-num.info, .stat-ic.info { color: var(--info); }
.stat-num.danger, .stat-ic.danger { color: var(--danger); }
/* 3er-Variante (Mitgliederkonto-Stand): Desktop wie Mobil 3 nebeneinander */
.stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) {
    /* 6-Spalten-Raster: erste 3 Kacheln je 2 Spalten (Reihe 1),
       die 2 Beträge je 3 Spalten (Reihe 2). */
    .stat-grid { grid-template-columns: repeat(6, 1fr); gap: .45rem; }
    .stat { grid-column: span 2; padding: .55rem .25rem; }
    .stat:nth-child(4), .stat:nth-child(5) { grid-column: span 3; }
    .stat-num { font-size: 1.15rem; }
    /* 3er-Variante behält 3 Spalten, jede Kachel 2 von 6 */
    .stat-grid-3 .stat { grid-column: span 2; }
    .stat-grid-3 .stat-num { font-size: 1.05rem; }
}

/* Segment-Umschalter (Saison-Beiträge / Konto) */
.seg-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #fff; margin: 0 0 1rem; }
.seg-switch a { padding: .45rem 1rem; color: var(--ink); font-weight: 600; font-size: .92rem; border-right: 1px solid var(--line); }
.seg-switch a:last-child { border-right: 0; }
.seg-switch a:hover { background: #f0f2f4; text-decoration: none; }
.seg-switch a.active { background: var(--brand); color: #fff; }

/* Mitgliederkonto: Anlege-Formular */
.konto-add-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .5rem .8rem; margin: .3rem 0 .6rem; }
.konto-add-grid label { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: var(--muted); }
.konto-add-grid input, .konto-add-grid select { margin: 0; }
.konto-table td.col-amount .badge { margin-right: .35rem; }
.konto-table td.col-action { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
@media (max-width: 640px) {
    table.konto-table td.col-action:not(:empty) { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
}

/* Spalten-Sortierung der Mitgliederliste ("Spalten anpassen") */
.col-order { list-style: none; padding: 0; margin: .2rem 0 .6rem; display: flex; flex-direction: column; gap: .3rem; max-width: 24rem; }
.col-item { display: flex; align-items: center; gap: .4rem; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.col-item .drag-handle { display: inline-flex; color: var(--muted); cursor: grab; touch-action: none; }
.col-item .col-label { flex: 1; color: var(--ink); font-size: .9rem; margin: 0; }
.col-item.dragging { opacity: .45; border-style: dashed; }
.col-move { display: inline-flex; gap: .15rem; }
.col-move .btn-icon { padding: .22rem; color: var(--muted); }
.col-move .btn-icon:hover { color: var(--brand-dark); }
.nowrap { white-space: nowrap; }

/* Flash */
.flash { padding: .7rem .9rem; border-radius: 8px; margin-bottom: .8rem; font-size: .92rem; }
.flash-success { background: #e3f3e8; color: var(--ok); border: 1px solid #bfe3cb; }
.flash-error { background: #fde8e8; color: var(--danger); border: 1px solid #f5c2c2; }
.flash-info { background: #e8eefb; color: var(--info); border: 1px solid #c5d3f3; }

/* Misc */
.muted { color: var(--muted); }
.small { font-size: .82rem; }
/* Unterüberschriften (Untertitel in einer Überschrift) möglichst in EINER Zeile mit dem
   Titel halten – nicht mitten im Satz umbrechen. Auf schmalen Handys wieder normal
   umbrechen, sonst würde ein langer Untertitel horizontal überlaufen. */
h1:has(> .muted), h1:has(> .small), h2:has(> .muted), h2:has(> .small),
h3:has(> .muted), h3:has(> .small),
h1 > .muted, h1 > .small, h2 > .muted, h2 > .small, h3 > .muted, h3 > .small { white-space: nowrap; }
@media (max-width: 640px) {
    h1:has(> .muted), h1:has(> .small), h2:has(> .muted), h2:has(> .small),
    h3:has(> .muted), h3:has(> .small),
    h1 > .muted, h1 > .small, h2 > .muted, h2 > .small, h3 > .muted, h3 > .small { white-space: normal; }
}
.ok { color: var(--ok); } .warn { color: var(--warn); } .info { color: var(--info); }
.eur-neg { color: var(--danger); }

/* Mitglieder-Abrechnung */
.settle-box { background: #f6f8f9; border: 1px solid var(--line); border-radius: 10px; padding: .7rem .8rem; margin: 0 0 1rem; }
.settle-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .8rem; margin-bottom: .6rem; font-size: .92rem; }
.settle-sum .op { color: var(--muted); font-weight: 700; }
.konto-table tr.muted-row td { color: var(--muted); }
.konto-table tr.muted-row strong { font-weight: 600; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.filters { display: flex; gap: .6rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.filters input[type=search] { width: auto; flex: 1; min-width: 180px; margin-top: 0; }
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; }
.tabs a { padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); font-size: .85rem; }
.tabs a.active { background: var(--brand); color: #fff; border-color: var(--brand); }
/* Mitgliederliste: höhere, zweizeilige Reiter mit kleiner grauer Trefferzahl */
.tabs-count a { display: flex; flex-direction: column; align-items: center; gap: .03rem; min-width: 4rem; padding: .42rem .65rem .46rem; line-height: 1.15; text-align: center; }
.tabs-count a .tab-count { font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tabs-count a.active .tab-count { color: rgba(255, 255, 255, .82); }
/* „Paten" = eigener Umschalt-Filter neben den Status-Reitern (kombinierbar, daher abgesetzt) */
.tabs-count a.tab-toggle { margin-left: .5rem; border-style: dashed; }
.tabs-count a.tab-toggle.active { border-style: solid; }
@media (max-width: 640px) { .tabs-count a.tab-toggle { margin-left: 0; } }
/* Klickbare Statistik-Einträge (Dashboard) */
.facet-link { color: inherit; text-decoration: none; display: block; }
.facet-link:hover { color: var(--brand-dark); text-decoration: underline; }
/* Aktive Filter als Chips (Mitgliederliste) */
.filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .9rem; }
.chip { display: inline-flex; align-items: center; gap: .45rem; background: #eef3ee; border: 1px solid var(--line); border-radius: 999px; padding: .22rem .7rem; font-size: .85rem; }
.chip a { color: var(--muted); text-decoration: none; font-weight: 700; line-height: 1; }
.chip a:hover { color: var(--danger); }
.dl { display: grid; grid-template-columns: 130px 1fr; gap: .35rem .8rem; margin: 0; }
.dl dt { color: var(--muted); font-size: .85rem; }
.dl dd { margin: 0; }
.kv { list-style: none; padding: 0; margin: 0 0 1rem; }
.kv li { display: flex; justify-content: space-between; padding: .3rem 0; border-bottom: 1px dashed var(--line); }
code { background: #eef0f2; padding: .1rem .35rem; border-radius: 4px; font-size: .9em; }

/* Kassen: rechtsbündige Zahlenspalten + Radio-Gruppe */
th.r, td.r { text-align: right; white-space: nowrap; }
.radios { border: 1px solid var(--line); border-radius: 8px; padding: .4rem .6rem; margin: 0; }
.radios legend { font-size: .8rem; color: var(--muted); padding: 0 .3rem; }
.radios .inline-check { margin-right: 1rem; font-size: .95rem; color: inherit; }
tr.muted td { color: var(--muted); }

/* Mitglieder-Avatare */
.avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#eaf3ee; color:var(--brand-dark); font-weight:700; flex:0 0 auto; overflow:hidden; line-height:1; }
img.avatar { object-fit:cover; object-position:center 25%; }
.avatar-sm { width:34px; height:34px; font-size:.78rem; }
.avatar-md { width:48px; height:48px; font-size:1rem; }
.avatar-lg { width:84px; height:84px; font-size:1.5rem; border:2px solid #fff; box-shadow:0 2px 10px rgba(20,50,30,.15); }
/* Online-Status: grün pulsierender Halo um den Avatar + Punkt in der Logins-Kachel */
.avatar.is-online { outline:2px solid #2db45a; outline-offset:2px; animation:online-pulse 1.8s ease-in-out infinite; }
@keyframes online-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(45,180,90,.55); } 50% { box-shadow:0 0 0 7px rgba(45,180,90,0); } }
.online-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:#c7cdca; flex:0 0 auto; }
.online-dot.is-on { background:#2db45a; animation:online-pulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .avatar.is-online, .online-dot.is-on { animation:none; } }
.member-cell { display:flex; align-items:center; gap:.6rem; color:inherit; }
.member-cell:hover { text-decoration:none; }
.member-cell:hover span { text-decoration:underline; }
/* Inline-Beitragszuordnung im Kontoauszug (Popover) */
.assign-inline { position:relative; display:inline-block; }
.assign-inline > summary { cursor:pointer; list-style:none; }
.assign-inline > summary::-webkit-details-marker { display:none; }
.assign-form { position:absolute; right:0; top:calc(100% + .3rem); z-index:30; width:248px; text-align:left;
    background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(20,50,30,.18);
    padding:.7rem; display:flex; flex-direction:column; gap:.45rem; white-space:normal; }
.assign-form select, .assign-form .btn { width:100%; }
.photo-edit { display:flex; align-items:flex-start; gap:1.2rem; flex-wrap:wrap; padding-bottom:1.1rem; margin-bottom:.4rem; border-bottom:1px solid var(--line); }
.photo-controls { flex:1; min-width:220px; }
/* Klickbarer Avatar zum Foto-Wählen */
.avatar-pick { position:relative; background:none; border:0; padding:0; cursor:pointer; border-radius:50%; line-height:0; }
.avatar-pick .avatar { transition:filter .15s ease; }
.avatar-pick:hover .avatar, .avatar-pick:focus-visible .avatar { filter:brightness(.92); }
.avatar-pick-badge { position:absolute; right:-2px; bottom:-2px; width:26px; height:26px; border-radius:50%; background:var(--green); color:#fff; font-size:.8rem; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.3); border:2px solid #fff; }
/* Porträtfoto per Klick vergrößern (auch in den Listen); nur die Foto-Auswahl bleibt Auswahl */
img.avatar { cursor:zoom-in; }
.avatar-pick img.avatar { cursor:pointer; }
.avatar-lightbox { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:4vmin; background:rgba(10,20,14,0); opacity:0; cursor:zoom-out; transition:opacity .18s ease; }
.avatar-lightbox.show { background:rgba(10,20,14,.82); opacity:1; }
.avatar-lightbox img { max-width:92vw; max-height:92vh; border-radius:14px; background:#fff; box-shadow:0 14px 46px rgba(0,0,0,.5); transform:scale(.94); transition:transform .18s ease; }
.avatar-lightbox.show img { transform:scale(1); }
/* Zentrale Rückfrage (Bestätigungs-Dialog) – mittig statt Browser-Dialog */
.cdlg-backdrop { position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:5vmin; background:rgba(10,20,14,0); opacity:0; transition:opacity .15s ease; }
.cdlg-backdrop.show { background:rgba(10,20,14,.5); opacity:1; }
.cdlg { width:100%; max-width:26rem; background:#fff; border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.35); padding:1.35rem 1.35rem 1.1rem; transform:translateY(8px) scale(.98); transition:transform .15s ease; }
.cdlg-backdrop.show .cdlg { transform:none; }
.cdlg-msg { margin:0 0 1rem; line-height:1.5; white-space:pre-line; color:#1a2b22; }
.cdlg-skip { display:flex; align-items:center; gap:.5rem; margin:0 0 1.15rem; font-size:.9rem; color:var(--muted, #667); cursor:pointer; }
.cdlg-skip input { width:1rem; height:1rem; flex:0 0 auto; }
.cdlg-actions { display:flex; justify-content:flex-end; gap:.6rem; flex-wrap:wrap; }
/* Foto-Cropper */
.cropper { margin:.2rem 0 .2rem; }
#cropCanvas { width:240px; height:240px; max-width:72vw; max-height:72vw; border-radius:50%; background:#eaf3ee; box-shadow:0 2px 12px rgba(20,50,30,.18); touch-action:none; cursor:grab; display:block; }
#cropCanvas:active { cursor:grabbing; }
.cropper-tools { display:flex; align-items:center; gap:.8rem; margin-top:.55rem; max-width:240px; }
.cropper-zoom { flex:1; display:flex; align-items:center; gap:.45rem; }
.cropper-zoom input[type=range] { flex:1; }

/* Mobil-Navigation (Hamburger) für die App-Topbar */
.nav-toggle { display: none; }
.nav-toggle-label { display: none; }
@media (max-width: 820px) {
    .topbar-inner { flex-wrap: wrap; justify-content: space-between; height: auto; min-height: 64px; gap: .4rem .8rem; padding: .5rem 1rem; }
    .brand-logo { height: 48px; }
    .nav-toggle-label { display: flex; align-items: center; justify-content: center; width: 44px; height: 40px; cursor: pointer; color: #fff; background: rgba(255,255,255,.14); border-radius: 8px; -webkit-tap-highlight-color: transparent; }
    .mainnav { order: 3; flex: 1 0 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .35rem; display: none; padding-bottom: .3rem; }
    .mainnav > a, .navmore-btn { width: 52px; height: 48px; padding: .5rem; }
    .mainnav > a .icon, .navmore-btn .icon { width: 26px; height: 26px; }
    .usermenu { order: 4; flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: .5rem; display: none; border-top: 1px solid rgba(255,255,255,.22); padding-top: .65rem; padding-bottom: .35rem; }
    .nav-toggle:checked ~ .mainnav,
    .nav-toggle:checked ~ .usermenu { display: flex; }

    /* „Mehr" und Konto klappen im Hamburger per Tipp auf (Panel steht dann in der Leiste) */
    .navmore { position: static; flex: 1 0 100%; display: flex; flex-direction: column; align-items: center; }
    .user-btn { justify-content: center; width: 100%; padding: .6rem; border: 1px solid rgba(255,255,255,.4); border-radius: 9px; gap: .5rem; color: #fff; }
    .navmore .drop-panel, .usermenu .drop-panel { position: static; width: 100%; min-width: 0; margin: .45rem 0 0; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.2); box-shadow: none; }
    .navmore .drop-item, .usermenu .drop-item { color: #eaf5ee; padding: .7rem .6rem; }
    .navmore .drop-item .icon, .usermenu .drop-item .icon { color: #cfe8d8; }
    .navmore .drop-item:hover, .usermenu .drop-item:hover { background: rgba(255,255,255,.12); }
    .navmore .drop-item.active, .usermenu .drop-item.active { background: rgba(255,255,255,.16); color: #fff; }
    .usermenu .drop-head { border-bottom-color: rgba(255,255,255,.24); }
    .usermenu .drop-name { color: #fff; }
    .usermenu .drop-sep { border-top-color: rgba(255,255,255,.24); }
    .usermenu .drop-danger, .usermenu .drop-danger .icon { color: #ffd7d2; }
    .usermenu .drop-danger:hover { background: rgba(255,255,255,.12); }
}

/* E-Mail-Vorlagen: Platzhalter-Chips + HTML-Editor + Vorschau */
.mail-tpl-form .ph-chips { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: .2rem 0 .6rem; }
.ph-chip { font: inherit; font-size: .78rem; cursor: pointer; border: 1px solid var(--line); background: #eef3f0; color: var(--brand-dark); border-radius: 999px; padding: .14rem .55rem; }
.ph-chip:hover { background: #dcebe2; }
.ph-picker { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin: .2rem 0 .7rem; }
.ph-picker label { margin: 0; }
.ph-picker .ph-select { margin: 0; max-width: 26rem; flex: 1 1 16rem; }
.ph-picker .ph-insert { white-space: nowrap; }
/* Mehrfach-Auswahl (Klick zum An-/Abwählen) */
select[multiple].toggle-select { padding: .15rem; }
select[multiple].toggle-select option { padding: .2rem .45rem; cursor: pointer; border-radius: 4px; }
select[multiple].toggle-select option:checked { background: #1f6f3c; color: #fff; font-weight: 600; }
/* Filter-Regeln (Versandplanung) */
.rule-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .4rem; }
.rule-row select, .rule-row input { margin: 0; }
.rule-row .rule-conn { width: 5rem; flex: 0 0 auto; }
.rule-row .rule-op { width: 3.6rem; flex: 0 0 auto; text-align: center; }
.rule-row input[name="rule_value[]"] { width: 6rem; flex: 0 0 auto; }
.rule-row select[name="rule_field[]"] { flex: 1 1 12rem; min-width: 10rem; }
/* Kleine Adress-Karte auf der Mitglieds-Detailseite */
.member-map { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); line-height: 0; }
.member-map iframe { width: 100%; height: 200px; border: 0; display: block; filter: saturate(.95); }
/* Editor + Vorschau: standardmäßig GESTAPELT (Vorschau volle Breite unter dem Editor).
   Die Mails sind 800px breit – nebeneinander bliebe die Vorschau ein unlesbarer Streifen.
   Erst auf sehr breiten Monitoren nebeneinander, dann via minmax(0,1fr) ohne Spalten-Kollaps.
   Höhere Spezifität als „.grid.cols-2" (0,2,0), damit die Ein-Spalten-Regel greift. */
.grid.cols-2.mail-editor-grid { grid-template-columns: 1fr; gap: 1rem; align-items: start; }
@media (min-width: 1500px) {
    .grid.cols-2.mail-editor-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.he-label { display: block; font-size: .85rem; color: var(--muted); margin: .2rem 0 .25rem; }
.html-editor { border: 1px solid #cbd2d9; border-radius: 8px; overflow: hidden; background: #fff; }
.he-toolbar { display: flex; flex-wrap: wrap; gap: .15rem; padding: .3rem; border-bottom: 1px solid var(--line); background: #f7f9fa; }
.he-btn { min-width: 1.95rem; height: 1.95rem; border: 1px solid transparent; background: transparent; border-radius: 6px; cursor: pointer; font: inherit; font-size: .9rem; line-height: 1; color: var(--ink); }
.he-btn:hover { background: #e7edf0; border-color: var(--line); }
.he-sep { width: 1px; align-self: stretch; background: var(--line); margin: .1rem .15rem; }
.he-area { min-height: 16rem; max-height: 32rem; overflow: auto; padding: .7rem .8rem; outline: none; font-size: .95rem; line-height: 1.55; }
.he-area:focus { box-shadow: inset 0 0 0 2px rgba(28,107,60,.15); }
.he-preview-wrap { min-width: 0; }
.he-preview { display: block; width: 100%; min-height: 30rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
@media (max-width: 780px) { .he-area { min-height: 12rem; } .he-preview { min-height: 22rem; } }

/* E-Mail-Editor: Bildgrößen-Leiste (erscheint bei ausgewähltem Bild) */
.he-imgbar { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; padding: .35rem .5rem; border-bottom: 1px solid var(--line); background: #eef3f0; font-size: .85rem; }
.he-imgbar-lbl { color: var(--muted); }
.he-size { font: inherit; font-size: .8rem; cursor: pointer; border: 1px solid #cbd2d9; background: #fff; border-radius: 6px; padding: .18rem .55rem; }
.he-size:hover { background: #e7edf0; }
.he-imgbar-custom { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; color: var(--muted); }
.he-size-input { width: 5rem; padding: .15rem .35rem; margin: 0; }
.he-area img { max-width: 100%; height: auto; }
.he-area img.he-sel { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Zwei-Faktor-Anmeldung */
.linklike { background: none; border: 0; padding: 0; margin: 0; color: var(--brand-dark); cursor: pointer; font: inherit; text-decoration: underline; }
.linklike:hover { color: var(--brand); }
.setup-steps { margin: 0 0 1rem; padding-left: 1.2rem; line-height: 1.6; }
.setup-flex { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }
.qr-box { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .5rem; line-height: 0; }
.qr-box svg { width: 200px; height: 200px; display: block; }
.setup-key { min-width: 12rem; }
.secret-key { display: inline-block; font-size: 1.15rem; letter-spacing: .12rem; background: #f3f6f4; border: 1px solid var(--line); border-radius: 8px; padding: .4rem .7rem; user-select: all; }
.recovery-grid { display: grid; grid-template-columns: repeat(2, minmax(8rem, 1fr)); gap: .4rem .8rem; margin: .6rem 0; }
.recovery-grid code { font-size: 1.05rem; letter-spacing: .08rem; background: #f3f6f4; border: 1px solid var(--line); border-radius: 6px; padding: .3rem .5rem; text-align: center; user-select: all; }
@media (max-width: 520px) { .recovery-grid { grid-template-columns: 1fr; } .qr-box svg { width: 170px; height: 170px; } }