:root {
  --primary: #1f6f5c;
  --primary-dark: #17574a;
  --primary-soft: #e3f1ec;
  --accent: #f2b632;
  --bg: #f5f6f3;
  --surface: #ffffff;
  --text: #1f2a28;
  --muted: #66736f;
  --border: #dfe4e1;
  --danger: #b4372f;
  --danger-soft: #fbe9e7;
  --success: #2e7d32;
  --success-soft: #e6f4e7;
  --warning-soft: #fff5d6;
  --info-soft: #e7f0fb;
  --on-primary: #ffffff;
  --brand: #1f6f5c;
  --on-brand: #ffffff;
  --on-accent: #17574a;
  --input-bg: #ffffff;
  --input-border: #c9d1cd;
  --table-head: #fafbfa;
  --row-hover: #f8faf9;
  --row-highlight: #fffaea;
  --gold-bg: #fdf0c8;
  --gold-text: #6b4d00;
  --red-bg: #fde2e1;
  --red-text: #8b1e17;
  --alert-success-border: #c4e3c6;
  --alert-error-border: #f1c4bf;
  --alert-info-border: #c9dcf3;
  --alert-warning-border: #f2df9c;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 40, 35, .06), 0 2px 8px rgba(20, 40, 35, .04);
  --sidebar: 236px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Dunkles Design: explizit gewählt oder automatisch nach Geräteeinstellung ---- */
:root[data-theme="dunkel"] {
  --primary: #4fb79c; --primary-dark: #7fd3bc; --primary-soft: #1d3a33; --accent: #f2b632;
  --bg: #121715; --surface: #1b2220; --text: #e3ebe8; --muted: #9aa8a3; --border: #2e3936;
  --danger: #ef7d73; --danger-soft: #3a1f1d; --success: #6fcf76; --success-soft: #1c3320;
  --warning-soft: #3a3118; --info-soft: #1b2a3b; --on-primary: #0f1513;
  --input-bg: #141a18; --input-border: #3a4643; --table-head: #1f2826; --row-hover: #222c29; --row-highlight: #33301c;
  --gold-bg: #3f3415; --gold-text: #f4d27a; --red-bg: #43211e; --red-text: #f3a39b;
  --alert-success-border: #2e5133; --alert-error-border: #5e2f2a; --alert-info-border: #2c4561; --alert-warning-border: #5b4b20;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --primary: #4fb79c; --primary-dark: #7fd3bc; --primary-soft: #1d3a33; --accent: #f2b632;
    --bg: #121715; --surface: #1b2220; --text: #e3ebe8; --muted: #9aa8a3; --border: #2e3936;
    --danger: #ef7d73; --danger-soft: #3a1f1d; --success: #6fcf76; --success-soft: #1c3320;
    --warning-soft: #3a3118; --info-soft: #1b2a3b; --on-primary: #0f1513;
    --input-bg: #141a18; --input-border: #3a4643; --table-head: #1f2826; --row-hover: #222c29; --row-highlight: #33301c;
    --gold-bg: #3f3415; --gold-text: #f4d27a; --red-bg: #43211e; --red-text: #f3a39b;
    --alert-success-border: #2e5133; --alert-error-border: #5e2f2a; --alert-info-border: #2c4561; --alert-warning-border: #5b4b20;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}
:root[data-theme="hell"] { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); line-height: 1.5; font-size: 15px; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--primary); }
h1 { font-size: 1.6rem; margin: 0 0 .75rem; line-height: 1.25; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
code { background: var(--primary-soft); padding: .1em .35em; border-radius: 4px; font-size: .92em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }

/* ---- Layout ---- */
.topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h, 56px); background: var(--brand); color: var(--on-brand); display: flex; align-items: center; gap: 1rem; padding: 0 1rem; z-index: 20; }
.brand { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; font-weight: 600; }
.logo { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: .85rem; flex-shrink: 0; }
.topbar-user { margin-left: auto; display: flex; gap: .6rem; align-items: center; font-size: .9rem; }
.burger { display: none; cursor: pointer; font-size: 1.4rem; }
.sidebar { position: fixed; top: var(--topbar-h, 56px); bottom: 0; left: 0; width: var(--sidebar); background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; padding: 1rem .6rem; z-index: 10; }
.sidebar a, .sidebar .link { display: block; padding: .45rem .75rem; border-radius: 7px; color: var(--text); text-decoration: none; }
.sidebar a:hover, .sidebar .link:hover { background: var(--bg); }
.sidebar a.active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.nav-group { padding-bottom: .75rem; margin-bottom: .75rem; border-bottom: 1px solid var(--border); }
.nav-group:last-child { border-bottom: 0; }
.nav-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: .2rem .75rem .35rem; }
.logout { margin: 0; }
.link { background: none; border: 0; font: inherit; cursor: pointer; width: 100%; text-align: left; color: var(--danger) !important; }
.content { flex: 1; padding: 1.5rem; width: 100%; max-width: 1200px; }
/* Verwaltung: ganze Bildschirmbreite nutzen; Rand wächst mit der Bildschirmgröße */
body.app .content { margin: var(--topbar-h, 56px) 0 0 var(--sidebar); width: auto; max-width: none; padding: clamp(1rem, 1.4vw + .4rem, 2.5rem); }
body.app .site-footer { margin-left: var(--sidebar); }
body.public .content { margin: 0 auto; }
.public-header { background: var(--brand); color: var(--on-brand); padding: .8rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.public-header nav { display: flex; align-items: center; gap: .4rem 1rem; flex-wrap: wrap; min-width: 0; }
.public-header nav a { color: var(--on-brand); text-decoration: none; }
.public-header .btn { background: var(--accent); color: var(--on-accent); }
.site-footer { padding: 1rem 1.5rem; color: var(--muted); font-size: .85rem; display: flex; gap: 1.25rem; flex-wrap: wrap; border-top: 1px solid var(--border); }
.site-footer a { color: var(--muted); }
.site-footer .version { margin-left: auto; display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.system-header .system-logo { height: 40px; width: auto; max-width: none; padding: 4px 8px; box-sizing: content-box; }
.product-logo-large { display: block; width: 100%; max-width: 520px; height: auto; background: #fff; border-radius: 10px; padding: .6rem; margin-bottom: 1rem; }
.product-logo { height: 32px; width: auto; background: #fff; border-radius: 6px; padding: 3px 6px; box-sizing: content-box; }
.logo-img { height: var(--logo-h, 36px); max-width: calc(var(--logo-h, 36px) * 4); object-fit: contain; background: #fff; border-radius: 6px; padding: 2px 4px; }
.brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.color-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.color-row label { flex: 0 0 auto; }
input[type=color] { width: 64px; height: 40px; padding: 2px; cursor: pointer; }
.presets { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.preset { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; }
.preset-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); display: inline-block; }
.logo-preview { max-height: 80px; max-width: 260px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 6px; }
.design-preview { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.design-preview .dp-head { padding: .7rem 1rem; font-weight: 600; display: flex; gap: .6rem; align-items: center; }
.design-preview .dp-body { padding: 1rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; background: var(--surface); }
.mail-preview { border: 1px solid var(--border); border-radius: 8px; background: var(--bg); padding: 1rem; }
.var-list { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; font-size: .85rem; margin: 0; }
.var-list dt code { cursor: copy; }
.var-list dd { margin: 0; color: var(--muted); }
.progress-line { height: 10px; width: 100%; }
dl.kv dd .progress-line { display: block; max-width: 320px; margin-top: .3rem; }
/* Zugriffsstatistik: Einstellungen der automatischen Sperre */
.autoblock { margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--border); }
.autoblock .input-num { width: 5.5em; display: inline-block; padding: .2rem .4rem; margin: 0 .2rem; }
/* Hohe Auslastung (ab 80 %): roter Balken */
.progress-line.is-high { accent-color: var(--danger); }
.progress-line.is-high::-webkit-progress-value { background: var(--danger); }
.progress-line.is-high::-moz-progress-bar { background: var(--danger); }

/* ---- Bausteine ---- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; margin-bottom: 1rem; min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.narrow { max-width: 440px; margin: 2rem auto; }
.narrow-lg { max-width: 760px; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.lead { font-size: 1.08rem; color: var(--muted); margin-top: 0; }
.pre { white-space: pre-line; }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.hero { text-align: center; padding: 3rem 1rem 2rem; }
.hero h1 { font-size: 2rem; }
.hero .lead { max-width: 640px; margin: 0 auto 1.5rem; }
.hero-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem 1rem; border-radius: 8px; border: 1px solid transparent; background: var(--primary); color: var(--on-primary); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; line-height: 1.2; }
.btn:hover { background: var(--primary-dark); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-secondary { background: var(--surface); color: var(--primary-dark); border-color: var(--border); }
.btn-secondary:hover { background: var(--primary-soft); }
.btn-ghost { background: transparent; color: var(--primary-dark); }
.btn-ghost:hover { background: var(--primary-soft); }
.btn-danger { background: var(--danger); }
.btn-danger:hover { filter: brightness(.9); }
.btn-danger { color: var(--on-primary); }
.btn-small { padding: .3rem .6rem; font-size: .85rem; }
.btn-large { padding: .8rem 1.4rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
form.inline { display: inline; }

.alert { padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid transparent; }
.alert ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.alert-success { background: var(--success-soft); border-color: var(--alert-success-border); }
.alert-error { background: var(--danger-soft); border-color: var(--alert-error-border); }
.alert-info { background: var(--info-soft); border-color: var(--alert-info-border); }
.alert-warning { background: var(--warning-soft); border-color: var(--alert-warning-border); }
.credentials dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: .6rem 0 0; }
.credentials dd { margin: 0; }
.credentials .pw { font-size: 1.1rem; letter-spacing: .05em; }

.badge { display: inline-block; padding: .05rem .5rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-size: .78rem; font-weight: 600; vertical-align: middle; }
.badge-gold { background: var(--gold-bg); color: var(--gold-text); font-size: .9rem; }
.badge-ok { background: var(--success-soft); color: var(--success); }
.mail-versendet { background: var(--success-soft); color: var(--success); }
.mail-fehlgeschlagen { background: var(--danger-soft); color: var(--danger); }
.mail-nicht-versendet { background: var(--warning-soft); color: var(--gold-text); }
.role-badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.role-admin { background: var(--red-bg); color: var(--red-text); }
.role-vorstand { background: var(--gold-bg); color: var(--gold-text); }
.role-mitglied { background: var(--primary-soft); color: var(--primary-dark); }
.topbar .role-badge { background: color-mix(in srgb, var(--on-brand) 18%, transparent); color: var(--on-brand); }
.status { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; vertical-align: middle; }
.status-aktiv { background: var(--success-soft); color: var(--success); }
.status-passiv { background: var(--warning-soft); color: var(--gold-text); }
.status-ausgetreten { background: var(--bg); color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; text-decoration: none; color: var(--text); box-shadow: var(--shadow); display: flex; flex-direction: column; }
a.stat:hover { border-color: var(--primary); }
.stat-value { font-size: 1.6rem; font-weight: 700; color: var(--primary-dark); }
.stat-label { color: var(--muted); font-size: .88rem; }
.stat-alert .stat-value { color: var(--danger); }

.tabs { display: flex; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.tabs a { padding: .5rem 1rem; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.active { color: var(--primary-dark); border-color: var(--primary); font-weight: 600; }

/* ---- Tabellen ---- */
.table-wrap { overflow-x: auto; padding: 0; }
.table-wrap > h2 { padding: 1.25rem 1.25rem 0; }
.table-wrap .form-actions { padding: 0 1.25rem 1.25rem; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; background: var(--table-head); }
.table th.right, .table td.right { text-align: right; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: var(--row-hover); }
.table tr.inactive td { opacity: .55; }
.table tr.highlight td { background: var(--row-highlight); }
.card > .table { margin-top: .5rem; }
.w-50 { width: 50%; }
progress.bar { width: 100%; height: 10px; appearance: none; border: 0; border-radius: 5px; background: var(--bg); overflow: hidden; }
progress.bar::-webkit-progress-bar { background: var(--bg); border-radius: 5px; }
progress.bar::-webkit-progress-value { background: var(--primary); border-radius: 5px; }
progress.bar::-moz-progress-bar { background: var(--primary); border-radius: 5px; }

/* ---- Formulare ---- */
.form label, .filters label, .inline-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; font-weight: 500; margin-bottom: .8rem; flex: 1; min-width: 0; }
.form label.check, label.check { flex-direction: row; align-items: flex-start; gap: .5rem; font-weight: 400; font-size: .92rem; }
label.check input { margin-top: .2rem; }
input, select, textarea { font: inherit; font-size: .95rem; padding: .5rem .65rem; border: 1px solid var(--input-border); border-radius: 7px; background: var(--input-bg); color: var(--text); width: 100%; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--primary); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
textarea { resize: vertical; }
fieldset { margin: 0 0 1rem; }
fieldset.card { border: 1px solid var(--border); }
legend { font-weight: 700; font-size: 1.05rem; padding: 0 .35rem; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; }
.row > label { flex: 1 1 160px; }
.row > .w-25 { flex: 0 1 130px; }
.row > .w-33 { flex: 0 1 220px; }
.w-auto { width: auto; }
.form-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .8rem; }
.filters input[type=search] { flex: 1 1 220px; width: auto; }
.filters select { width: auto; }
.filters label.check { margin: 0; flex: 0 0 auto; }
.inline-form { align-items: flex-end; }
.inline-form .btn { margin-bottom: .8rem; }
.inline-form.compact { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.inline-form.compact select { width: auto; padding: .3rem .5rem; }
.inline-form.compact label, .inline-form.compact .btn { margin: 0; flex: 0 0 auto; }
.choice-list { display: grid; gap: .5rem; margin-bottom: 1rem; }
.form label.choice, label.choice { flex-direction: row; align-items: flex-start; gap: .65rem; padding: .7rem .85rem; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-weight: 400; margin-bottom: .5rem; }
label.choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
label.choice input { margin-top: .25rem; }
.mandate { background: var(--bg); border-radius: 8px; padding: .9rem 1rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Listen & Termine ---- */
dl.kv { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: .4rem 1rem; margin: 0; }
dl.kv dt { color: var(--muted); font-size: .88rem; }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }
.roles-legend { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1rem; margin: 0; }
.roles-legend dd { margin: 0; color: var(--muted); font-size: .9rem; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: .3rem 0; border-bottom: 1px solid var(--border); }
ul.plain li:last-child { border: 0; }
.event-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.event-list li { display: flex; gap: .75rem; align-items: center; }
.date-chip { background: var(--primary-soft); color: var(--primary-dark); border-radius: 8px; padding: .3rem .5rem; font-weight: 700; font-size: .85rem; min-width: 56px; text-align: center; }
.date-chip.big { font-size: 1.15rem; padding: .6rem .7rem; min-width: 76px; display: flex; flex-direction: column; }
.date-chip small { font-weight: 500; font-size: .75rem; }
.card.event { display: flex; gap: 1rem; align-items: flex-start; }
.event-body { flex: 1; min-width: 0; }
.event-body h2 { margin-bottom: .2rem; }
.event-body p { margin: .2rem 0; }
.event-actions { display: flex; gap: .25rem; }
.news-teaser { border-bottom: 1px solid var(--border); padding-bottom: .5rem; margin-bottom: .75rem; }
.news-teaser:last-child { border: 0; margin-bottom: 0; }
.news-teaser h3 { margin: 0; }
.news-teaser p { margin: .2rem 0; }
.prose { max-width: 780px; }

/* ---- Profilbild, Mitgliederbereich ---- */
.avatar { display: inline-grid; place-items: center; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; }
.avatar-sm { width: 30px; height: 30px; font-size: .75rem; }
.avatar-md { width: 44px; height: 44px; font-size: .95rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.3rem; }
.avatar-xl { width: 112px; height: 112px; font-size: 2.2rem; }
.topbar .avatar-initials { background: var(--accent); color: var(--on-accent); }
.topbar-profile { display: flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; }
.profile-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.profile-head h1 { margin: 0; }
.profile-head p { margin: 0; }
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { white-space: nowrap; }
.nav-count { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; margin-left: .3rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .75rem; font-weight: 700; text-align: center; line-height: 1.3rem; }
.stat-presets { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.stat-chart-wrap { overflow-x: auto; }
.stat-chart { width: 100%; height: 190px; display: block; }
.stat-chart .c-members, .dot.c-members { fill: var(--primary); background: var(--primary); }
.stat-chart .c-future { opacity: .35; }
.stat-chart .c-in, .dot.c-in { fill: var(--success); background: var(--success); }
.stat-chart .c-out, .dot.c-out { fill: var(--danger); background: var(--danger); }
.stat-chart .c-axis { stroke: var(--border); stroke-width: 1; }
.stat-legend .dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin: 0 .2rem 0 .6rem; vertical-align: -1px; }
.stat-legend .dot:first-child { margin-left: 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
[data-payout][hidden] { display: none; }
.strike { text-decoration: line-through; }
.badge-red { background: var(--red-bg); color: var(--red-text); }
.dropdown-card { position: absolute; z-index: 5; margin-top: .3rem; padding: .6rem .9rem; white-space: nowrap; line-height: 1.9; }
.survey-list { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.survey-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: 0; margin: 0; }
.survey-row > .survey-item { flex: 1 1 320px; padding: 1rem 1.25rem; border: 0; }
.survey-tools { display: flex; gap: .3rem; align-items: center; padding: 0 1rem .6rem 1.25rem; margin-left: auto; }
.survey-row .survey-tools { padding-top: .6rem; }
.survey-inactive { opacity: .7; }
.survey-switch { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.survey-switch-off { border-color: var(--alert-error-border); background: var(--danger-soft); }
.survey-delete-pop { right: 0; white-space: normal; width: 300px; }
.survey-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-decoration: none; color: inherit; margin: 0; }
.survey-item:hover { border-color: var(--primary); }
.survey-state { flex: 0 0 auto; }
.survey-invite .survey-list { margin-bottom: 0; }
.survey-invite .survey-item { padding: .6rem 0; border-top: 1px solid var(--border); }
.survey-question-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.survey-question [hidden] { display: none; }
.survey-answer legend { font-size: 1rem; }
.survey-answer textarea { width: 100%; }
.survey-scale { display: flex; gap: .4rem; flex-wrap: wrap; }
.form .survey-scale label { flex: 0 0 auto; margin: 0; }
.survey-scale input { position: absolute; opacity: 0; pointer-events: none; }
.survey-scale span { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--input-border); border-radius: 8px; cursor: pointer; font-weight: 600; }
.survey-scale input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.survey-scale input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.survey-scale-legend { display: flex; justify-content: space-between; max-width: 15rem; margin-top: .3rem; }
.survey-result h3 { margin-top: 0; }
.survey-bars td { vertical-align: middle; }
.survey-top td:first-child { font-weight: 600; }
.survey-texts { margin: 0; padding-left: 1.1rem; }
.survey-texts li { margin-bottom: .4rem; white-space: pre-line; }
.survey-own dt { font-weight: 600; margin-top: .5rem; }
.survey-own dd { margin: 0; }
.survey-delete { margin-top: .8rem; }
.survey-delete form { margin-top: .5rem; }
.tabs-scroll { position: relative; margin-bottom: 1rem; }
.tabs-scroll > .tabs { margin-bottom: 0; scroll-behavior: smooth; }
.tabs-arrow { position: absolute; top: 0; bottom: 1px; width: 2.25rem; border: 0; padding: 0; cursor: pointer; font-size: 1.5rem; line-height: 1; color: var(--primary-dark); z-index: 1; }
.tabs-arrow[hidden] { display: none; }
.tabs-arrow-left { left: 0; background: linear-gradient(to right, var(--bg) 60%, transparent); text-align: left; padding-left: .2rem; }
.tabs-arrow-right { right: 0; background: linear-gradient(to left, var(--bg) 60%, transparent); text-align: right; padding-right: .2rem; }
.tabs-arrow:hover { color: var(--primary); }
.avatar-edit { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.avatar-edit > div { flex: 1; min-width: 200px; }
.name-cell { display: flex; align-items: center; gap: .6rem; }
.name-cell p { margin: 0; }
.theme-choice { display: grid; gap: .5rem; margin-bottom: 1rem; }
.theme-swatch { width: 38px; height: 26px; border-radius: 6px; border: 1px solid var(--border); flex-shrink: 0; }
.theme-hell .theme-swatch { background: linear-gradient(135deg, #ffffff 50%, #e3f1ec 50%); }
.theme-dunkel .theme-swatch { background: linear-gradient(135deg, #1b2220 50%, #1d3a33 50%); }
.theme-auto .theme-swatch { background: linear-gradient(135deg, #ffffff 50%, #1b2220 50%); }
details.mandate { margin: .5rem 0 .8rem; }
details summary { cursor: pointer; }
.highlight-box { background: var(--warning-soft); padding: .5rem; border-radius: 6px; }
.signature-box { border: 1px dashed var(--border); border-radius: 8px; padding: .8rem; margin-bottom: .8rem; display: grid; gap: .5rem; }
.signature-img { max-width: 260px; max-height: 90px; background: #fff; border-radius: 4px; padding: 4px; }
.inline-details { display: inline-block; position: relative; }
.inline-details summary { list-style: none; display: inline-flex; }
.inline-details summary::-webkit-details-marker { display: none; }
.popover { position: absolute; right: 0; z-index: 5; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .75rem; box-shadow: var(--shadow); width: 260px; text-align: left; }
ul.changes { margin: .3rem 0 0; padding-left: 1.1rem; }
ul.changes del { color: var(--danger); }
ul.changes ins { color: var(--success); text-decoration: none; font-weight: 600; }
.mail-body { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88rem; }

/* ---- Import ---- */
.popover.menu { display: grid; gap: .1rem; width: 270px; }
.popover.menu a { padding: .45rem .5rem; border-radius: 6px; text-decoration: none; color: var(--text); }
.popover.menu a:hover { background: var(--primary-soft); }
.badge.import-neu { background: var(--success-soft); color: var(--success); }
.badge.import-aenderung { background: var(--info-soft); color: var(--primary-dark); }
.badge.import-fehler { background: var(--danger-soft); color: var(--danger); }
.table tr.import-error td { background: color-mix(in srgb, var(--danger-soft) 55%, transparent); }

/* ---- Öffentliche Termine ---- */
.home-events { margin: 0 0 2rem; }
.home-events h2 { margin: 0; }
.event-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .9rem; }
.event-card { display: flex; gap: .9rem; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .9rem; box-shadow: var(--shadow); }
.event-card .date-chip.big { min-width: 68px; }

/* ---- Zahlungs-QR ---- */
.pay-box { display: flex; gap: 1.5rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; border-left: 5px solid var(--accent); }
.pay-box > div { flex: 1 1 320px; }
.pay-box h2 { margin-top: 0; }
figure.qr { margin: 0; text-align: center; }
figure.qr img { width: 200px; height: 200px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 6px; }
figure.qr figcaption { font-size: .8rem; color: var(--muted); margin-top: .3rem; }
.btn-paypal { background: #0070ba; color: #fff; border-radius: 999px; }
.btn-paypal:hover { background: #005ea6; }
.payment-request { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.payment-request > div { flex: 1 1 380px; }

/* ---- Kurse ---- */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.course-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.2rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .7rem; }
.course-card h2 { margin: .3rem 0 0; font-size: 1.2rem; }
.course-card h2 a { color: var(--text); text-decoration: none; }
.course-time { margin: .2rem 0 0; color: var(--primary-dark); font-weight: 600; }
.course-card .btn-block { margin-top: auto; }
.course-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; text-align: center; }
.course-stats > div { background: var(--bg); border-radius: 8px; padding: .5rem .2rem; }
.course-stats strong { display: block; font-size: 1.05rem; }
.course-stats span { font-size: .75rem; color: var(--muted); }
.course-stats .alert-num strong { color: var(--danger); }
.home-courses { margin: 0 0 2rem; }
.home-courses h2 { margin: 0; }
a.course-mini { text-decoration: none; color: var(--text); }
a.course-mini:hover { border-color: var(--primary); }
.reg-table td { vertical-align: top; }
.reg-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; min-width: 210px; }
.reg-actions form.inline { margin: 0; }
.btn-danger-outline { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.btn-danger-outline:hover { background: var(--danger-soft); }
/* Dialogfenster (z. B. Kursanmeldung bearbeiten) */
dialog.modal { width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; }
dialog.modal[open] { display: flex; flex-direction: column; }
dialog.modal::backdrop { background: rgba(15, 23, 21, .55); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0 0 .2rem; font-size: 1.15rem; }
.modal-body { padding: 1rem 1.25rem 1.25rem; overflow-y: auto; }
.modal-body hr { margin: 1rem 0; border: 0; border-top: 1px solid var(--border); }
.modal-body .row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 520px) { .modal-body .row { grid-template-columns: 1fr; } }
.badge.reg-neu { background: var(--warning-soft); color: var(--gold-text); }
.badge.reg-zugelassen { background: var(--success-soft); color: var(--success); }
.badge.reg-warteliste { background: var(--info-soft); color: var(--primary-dark); }
.badge.reg-abgelehnt, .badge.reg-storniert { background: var(--bg); color: var(--muted); }

.pay-link-box { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; padding: .8rem; border: 1px dashed var(--border); border-radius: 10px; }
.pay-link-box figure.qr img { width: 130px; height: 130px; }
.break { overflow-wrap: anywhere; }
.closed-note { margin: auto 0 0; }

/* ---- Kurse öffentlich ---- */
.course-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding: 2rem; margin-bottom: 1.5rem; border-radius: 18px;
  background: linear-gradient(135deg, var(--primary-soft), color-mix(in srgb, var(--accent) 22%, var(--surface))); border: 1px solid var(--border); }
.course-hero h1 { font-size: 2.1rem; margin: .1rem 0 .4rem; }
.course-hero .lead { max-width: 620px; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; color: var(--primary); margin: 0; }
.hero-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.hero-facts li { background: var(--surface); border-radius: 12px; padding: .7rem 1.1rem; min-width: 150px; box-shadow: var(--shadow); }
.hero-facts strong { display: block; font-size: 1.35rem; color: var(--primary-dark); }
.hero-facts span { font-size: .82rem; color: var(--muted); }
.ccard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; margin-bottom: 1.5rem; }
.ccard { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.ccard:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(20, 40, 35, .13); }
.ccard-media { position: relative; display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 50%, #000)); overflow: hidden; }
.ccard-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.ccard:hover .ccard-media img { transform: scale(1.04); }
.ccard-placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-size: 4.5rem; color: rgba(255, 255, 255, .85);
  background-image: repeating-conic-gradient(rgba(255, 255, 255, .08) 0 25%, transparent 0 50%); background-size: 48px 48px; }
.ccard-placeholder.big { font-size: 7rem; }
.ccard-day { position: absolute; left: .8rem; top: .8rem; background: var(--surface); color: var(--text); font-weight: 700; font-size: .8rem; padding: .25rem .7rem; border-radius: 999px; box-shadow: var(--shadow); }
.ccard-state { position: absolute; right: .8rem; bottom: .8rem; font-weight: 700; font-size: .78rem; padding: .25rem .7rem; border-radius: 999px; }
.ccard-state.full { background: var(--danger); color: #fff; }
.ccard-state.few { background: var(--accent); color: var(--on-accent); }
.ccard-state.soon { background: rgba(0, 0, 0, .65); color: #fff; }
.ccard-body { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.ccard-offer { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }
.ccard-offer.light { color: #fff; opacity: .9; }
.ccard-body h2 { margin: 0; font-size: 1.25rem; }
.ccard-body h2 a { color: var(--text); text-decoration: none; }
.ccard-meta { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; font-size: .92rem; }
.ccard-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--border); }
.ccard-price strong { display: block; font-size: 1.35rem; color: var(--primary-dark); line-height: 1.1; }
.ccard-price span { font-size: .78rem; color: var(--muted); }
.ccard-places { text-align: right; min-width: 110px; }
.places-bar { display: block; height: 7px; border-radius: 99px; background: var(--bg); overflow: hidden; margin-bottom: .2rem; border: 1px solid var(--border); }
.places-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.places-bar.big { height: 9px; margin: .2rem 0 .35rem; }
.places-bar .w-0 { width: 0%; }
.places-bar .w-5 { width: 5%; }
.places-bar .w-10 { width: 10%; }
.places-bar .w-15 { width: 15%; }
.places-bar .w-20 { width: 20%; }
.places-bar .w-25 { width: 25%; }
.places-bar .w-30 { width: 30%; }
.places-bar .w-35 { width: 35%; }
.places-bar .w-40 { width: 40%; }
.places-bar .w-45 { width: 45%; }
.places-bar .w-50 { width: 50%; }
.places-bar .w-55 { width: 55%; }
.places-bar .w-60 { width: 60%; }
.places-bar .w-65 { width: 65%; }
.places-bar .w-70 { width: 70%; }
.places-bar .w-75 { width: 75%; }
.places-bar .w-80 { width: 80%; }
.places-bar .w-85 { width: 85%; }
.places-bar .w-90 { width: 90%; }
.places-bar .w-95 { width: 95%; }
.places-bar .w-100 { width: 100%; }
.ccard-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ccard-actions .btn:only-child { grid-column: 1 / -1; }
.cdetail-hero { position: relative; border-radius: 18px; overflow: hidden; min-height: 280px; max-height: 420px; margin-bottom: 1.2rem; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 45%, #000)); display: flex; align-items: flex-end; }
.cdetail-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cdetail-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, .05) 60%); }
.cdetail-hero-text { position: relative; z-index: 1; color: #fff; padding: 1.6rem 1.8rem; }
.cdetail-hero-text h1 { color: #fff; font-size: 2.2rem; margin: .1rem 0 .2rem; }
.cdetail-hero-text p { margin: 0; font-size: 1.1rem; opacity: .95; }
.cdetail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.2rem; align-items: start; }
.cdetail-text { font-size: 1.04rem; line-height: 1.7; }
.sticky { position: sticky; top: 76px; }
.side-price strong { display: block; font-size: 2rem; color: var(--primary-dark); line-height: 1.1; }
.side-price span { color: var(--muted); font-size: .88rem; }
.side-facts { display: grid; grid-template-columns: auto 1fr; gap: .55rem .8rem; margin: 1rem 0 1.2rem; font-size: .95rem; }
.side-facts dt { color: var(--muted); white-space: nowrap; }
.side-facts dd { margin: 0; }
.session-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.session-chip { display: inline-flex; flex-direction: column; align-items: center; min-width: 58px; padding: .35rem .5rem; border-radius: 10px; background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; font-size: .9rem; }
.session-chip small { font-weight: 500; font-size: .7rem; color: var(--muted); }
.session-chip.past { opacity: .45; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
.gallery-item { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--bg); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: .4rem .55rem; font-size: .78rem; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent); }
.cdetail-others { margin-top: 1.5rem; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(10, 14, 13, .92); display: flex; align-items: center; justify-content: center; padding: 2rem; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 92vw; max-height: 88vh; text-align: center; }
.lightbox img { max-width: 92vw; max-height: 80vh; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.lightbox figcaption { color: #eee; margin-top: .6rem; }
.lightbox button { position: absolute; background: rgba(255, 255, 255, .12); color: #fff; border: 0; border-radius: 50%; width: 46px; height: 46px; font-size: 1.8rem; cursor: pointer; }
.voucher-reset { border-top: 1px solid var(--border); padding-top: .8rem; margin-top: .8rem; }
.voucher-reset h3 { font-size: 1rem; margin: 0 0 .5rem; }
img[data-zoom] { cursor: zoom-in; }
.lightbox button[hidden] { display: none; }
.lightbox button:hover { background: rgba(255, 255, 255, .25); }
.lb-close { top: 1rem; right: 1rem; } .lb-prev { left: 1rem; top: 50%; } .lb-next { right: 1rem; top: 50%; }
body.lb-open { overflow: hidden; }
.choice-thumb { width: 64px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.choice-thumb.ph { display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 1.5rem; }
.gallery-admin summary { cursor: pointer; display: flex; align-items: baseline; gap: .5rem; list-style: none; }
.gallery-admin summary h2 { margin: 0; display: inline; }
.gallery-admin[open] summary { margin-bottom: 1rem; }
.gallery-grid.admin { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-top: .5rem; }
.gallery-grid.admin figure { margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; position: relative; background: var(--surface); }
.gallery-grid.admin figure.is-cover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.gallery-grid.admin img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cover-flag { position: absolute; top: .4rem; left: .4rem; background: var(--accent); color: var(--on-accent); font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; }
.caption-form { padding: .4rem; display: grid; gap: .3rem; }
.caption-form input { font-size: .82rem; padding: .3rem .4rem; }
.img-actions { display: flex; justify-content: space-between; }
.img-actions .btn { padding: .2rem .45rem; }
@media (max-width: 900px) {
  .course-hero { grid-template-columns: 1fr; padding: 1.3rem; }
  .hero-facts { grid-auto-flow: column; overflow-x: auto; }
  .cdetail-grid { grid-template-columns: 1fr; }
  .sticky { position: static; }
  .cdetail-hero-text h1 { font-size: 1.6rem; }
}

/* ---- Passkeys ---- */
.or-line { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .85rem; margin: 1.1rem 0 .8rem; }
.or-line::before, .or-line::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.passkey-list li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }

.passkey-offer { text-align: center; }
.passkey-offer .form label { text-align: left; }
.passkey-offer label { text-align: left; margin-bottom: .8rem; display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; font-weight: 500; }
.passkey-icon { font-size: 2.6rem; width: 76px; height: 76px; margin: .2rem auto .6rem; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); }
.passkey-benefits { list-style: none; padding: 0; margin: 1rem auto 1.2rem; text-align: left; display: inline-grid; gap: .35rem; font-size: .95rem; }
.passkey-offer-actions { display: flex; gap: .5rem; justify-content: center; margin-top: 1rem; flex-wrap: wrap; }

/* ---- Benutzer bearbeiten ---- */
.select-filter { margin-bottom: .4rem; }
select.member-select { width: 100%; padding: .25rem; }
select.member-select option { padding: .3rem .4rem; }
select.member-select option:disabled { color: var(--muted); }

/* ---- Neuigkeiten ---- */
.cat-1 { --cat: #2388c2; } .cat-2 { --cat: #2e9d4a; } .cat-3 { --cat: #e0841a; }
.cat-4 { --cat: #d6303a; } .cat-5 { --cat: #7a4fc4; } .cat-6 { --cat: #0f8f8a; } .cat-0 { --cat: var(--primary); }
.cat-badge { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .02em;
  color: var(--cat); background: color-mix(in srgb, var(--cat) 14%, var(--surface)); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.chip { padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--border); text-decoration: none; color: var(--text); font-size: .88rem; background: var(--surface); }
.chip:hover { border-color: var(--cat, var(--primary)); }
.chip[class*="cat-"]:not(.active) { border-color: color-mix(in srgb, var(--cat) 35%, var(--border)); color: color-mix(in srgb, var(--cat) 70%, var(--text)); }
.chip[class*="cat-"]:not(.active) { border-color: color-mix(in srgb, var(--cat) 35%, var(--border)); color: color-mix(in srgb, var(--cat) 70%, var(--text)); }
.chip.active { background: var(--cat, var(--primary)); border-color: var(--cat, var(--primary)); color: #fff; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.1rem; }
.news-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.news-card:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(20, 40, 35, .12); }
.news-card.pinned { border-color: var(--accent); }
.news-card.draft { opacity: .75; border-style: dashed; }
.news-card-media { display: block; aspect-ratio: 16 / 9; background: var(--primary-soft); overflow: hidden; }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card-media.no-image { display: grid; place-items: center; background: linear-gradient(135deg, var(--cat), color-mix(in srgb, var(--cat) 55%, #000)); text-decoration: none; }
.news-card-initial { font-size: 3rem; font-weight: 800; color: rgba(255, 255, 255, .85); }
.news-card-body { padding: 1rem 1.15rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.news-card-body h2 { margin: .2rem 0 0; font-size: 1.12rem; line-height: 1.3; }
.news-card-body h2 a { color: var(--text); text-decoration: none; }
.news-card-body h2 a:hover { color: var(--primary); }
.news-teaser-text { margin: 0; color: var(--muted); font-size: .93rem; flex: 1; }
.news-card-body p.small { margin: 0; }
.news-meta { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.badge-draft { background: var(--warning-soft); color: var(--gold-text); }
@media (min-width: 900px) {
  .news-card.featured { grid-column: 1 / -1; flex-direction: row; }
  .news-card.featured .news-card-media { flex: 0 0 55%; aspect-ratio: auto; min-height: 280px; }
  .news-card.featured .news-card-body { padding: 1.6rem; justify-content: center; }
  .news-card.featured h2 { font-size: 1.6rem; }
  .news-card.featured .news-teaser-text { flex: 0; font-size: 1.02rem; }
}
.news-article { max-width: 780px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem 2rem 2rem; box-shadow: var(--shadow); }
.news-article h1 { font-size: 2rem; margin: .5rem 0 .8rem; }
.news-cover { width: calc(100% + 4rem); margin: -.5rem -2rem 1.2rem; max-height: 420px; object-fit: cover; display: block; }
.news-byline { display: flex; align-items: center; gap: .7rem; padding-bottom: 1rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--border); }
.news-byline .actions { margin-left: auto; }
.news-lead { font-size: 1.15rem; color: var(--muted); line-height: 1.55; }
.news-more { max-width: 780px; margin: 1.5rem auto 0; }
.news-grid.compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.news-mini { display: flex; gap: .7rem; align-items: center; padding: .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text); }
.news-mini img, .news-mini-ph { width: 64px; height: 48px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.news-mini-ph { background: var(--cat); }
.news-teaser-link { display: flex; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); }
.news-teaser-link:last-child { border-bottom: 0; }
.news-teaser-link img { width: 92px; height: 64px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.news-teaser-link:hover strong { color: var(--primary); }

/* Öffentliche Neuigkeiten */
.badge-public { background: var(--info-soft); color: var(--primary-dark); text-decoration: none; }
.public-check { background: var(--info-soft); padding: .5rem .6rem; border-radius: 8px; }
.home-news { margin: 0 0 2rem; }
.home-news h2 { margin: 0; }
.news-card-body h3 { margin: .2rem 0 0; font-size: 1.08rem; line-height: 1.3; }
.news-card-body h3 a { color: var(--text); text-decoration: none; }
.news-card-body h3 a:hover { color: var(--primary); }
.news-byline .logo-img { height: 40px; }

/* Inhalt (Editor und Darstellung) */
.news-content { font-size: 1.04rem; line-height: 1.7; overflow-wrap: anywhere; }
.news-content > :first-child { margin-top: 0; }
.news-content h1, .news-content h2 { font-size: 1.45rem; margin: 1.6rem 0 .6rem; }
.news-content h3 { font-size: 1.2rem; margin: 1.3rem 0 .5rem; }
.news-content p { margin: 0 0 1rem; }
.news-content img { max-width: 100%; height: auto; border-radius: 10px; }
.news-content blockquote { margin: 1.2rem 0; padding: .6rem 1.1rem; border-left: 4px solid var(--accent); background: var(--primary-soft); border-radius: 0 10px 10px 0; font-style: italic; }
.news-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.news-content th, .news-content td { border: 1px solid var(--border); padding: .5rem .7rem; text-align: left; }
.news-content th { background: var(--primary-soft); }
.news-content iframe, .news-content .ql-video { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 10px; display: block; margin: 1rem 0; }
.news-content .ql-align-center { text-align: center; } .news-content .ql-align-right { text-align: right; } .news-content .ql-align-justify { text-align: justify; }
.news-content li[data-list="bullet"] { list-style-type: disc; } .news-content li[data-list="ordered"] { list-style-type: decimal; }
.news-content .ql-ui { display: none; }
.news-box { padding: 1rem 1.2rem; border-radius: 12px; margin: 1.2rem 0; border-left: 5px solid var(--primary); background: var(--primary-soft); }
.news-box > :last-child { margin-bottom: 0; } .news-box h3 { margin-top: 0; }
.news-box.success { border-color: var(--success); background: var(--success-soft); }
.news-box.warning { border-color: var(--accent); background: var(--warning-soft); }
.news-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem; margin: 1rem 0; }
.news-button { display: inline-block; padding: .65rem 1.3rem; border-radius: 999px; background: var(--primary); color: var(--on-primary) !important; text-decoration: none; font-weight: 600; }
.news-button:hover { filter: brightness(1.08); }
.news-figure { margin: 1.2rem 0; } .news-figure img { width: 100%; }
.news-figure figcaption { text-align: center; color: var(--muted); font-size: .9rem; margin-top: .4rem; }
.news-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; margin: 1.2rem 0; }
.news-facts > div { background: var(--primary-soft); border-radius: 12px; padding: 1rem; text-align: center; }
.news-facts strong { display: block; font-size: 1.7rem; color: var(--primary); }
.news-facts span { color: var(--muted); font-size: .9rem; }
.news-video iframe { width: 100%; aspect-ratio: 16 / 9; }

/* Editor */
.news-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.input-large { font-size: 1.2rem !important; font-weight: 600; }
.editor-tabs { margin: .8rem 0 0; }
.tab-btn { background: none; border: 0; border-bottom: 2px solid transparent; padding: .5rem 1rem; font: inherit; color: var(--muted); cursor: pointer; margin-bottom: -1px; }
.tab-btn.active { color: var(--primary-dark); border-color: var(--primary); font-weight: 600; }
#quill-editor { min-height: 360px; background: var(--input-bg); }
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--input-border) !important; }
.ql-toolbar.ql-snow { border-radius: 8px 8px 0 0; background: var(--table-head); }
.ql-container.ql-snow { border-radius: 0 0 8px 8px; font-family: inherit; font-size: 1rem; }
.ql-editor { min-height: 360px; color: var(--text); }
.ql-editor.ql-blank::before { color: var(--muted); font-style: normal; }
.ql-snow .ql-stroke { stroke: var(--text); } .ql-snow .ql-fill { fill: var(--text); } .ql-snow .ql-picker { color: var(--text); }
.ql-snow .ql-picker-options, .ql-snow .ql-tooltip { background: var(--surface); color: var(--text); border-color: var(--border); }
.ql-snow .ql-tooltip input[type=text] { background: var(--input-bg); color: var(--text); border-color: var(--input-border); }
textarea.code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88rem; line-height: 1.5; tab-size: 2; min-height: 380px; }
.snippet-bar { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .6rem 0; }
.file-btn { cursor: pointer; }
.preview-box { border: 1px dashed var(--border); border-radius: 10px; padding: 1.2rem; min-height: 200px; }
.cover-preview { width: 100%; border-radius: 8px; margin-bottom: .5rem; }
@media (max-width: 900px) {
  .news-form-grid { grid-template-columns: 1fr; }
  .news-article { padding: 1rem 1.1rem 1.5rem; }
  .news-cover { width: calc(100% + 2.2rem); margin: -.5rem -1.1rem 1rem; }
  .news-article h1 { font-size: 1.5rem; }
}

/* ---- Responsiv ---- */
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .burger { display: block; }
  .sidebar { transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow); }
  .nav-toggle:checked ~ .sidebar { transform: none; }
  body.app .content, body.app .site-footer { margin-left: 0; }
  .content { padding: 1rem; }
}
/* Telefon: WhatsApp-Button neben der Nummer */
.btn-wa { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .5rem; border-radius: 999px; background: #25d366; color: #fff !important;
  font-size: .78rem; font-weight: 600; text-decoration: none; vertical-align: middle; white-space: nowrap; }
.btn-wa:hover { background: #1ebe5b; text-decoration: none; }
.show-sm { display: none; }
@media (max-width: 600px) {
  .hide-sm { display: none; }
  .show-sm { display: block; margin-top: .15rem; }
  h1 { font-size: 1.35rem; }
  .card.event { flex-direction: column; }
  dl.kv { grid-template-columns: 1fr; gap: 0 1rem; }
  dl.kv dd { margin-bottom: .4rem; }
}

/* ---- Druck (z. B. Geburtstags- und Jubiläumslisten) ---- */
@media print {
  .topbar, .sidebar, .site-footer, .actions, .no-print, .tabs, .public-header, .btn, .alert { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  body.app .content { margin: 0; padding: 0; max-width: none; }
  .card { box-shadow: none; border: 0; padding: 0; }
  .hide-sm { display: table-cell !important; }
  a { color: inherit; text-decoration: none; }
}

/* ---- Lizenz & Systemverwaltung ---- */
.license-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; letter-spacing: .03em; overflow-wrap: anywhere; word-break: break-all;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: .35rem .5rem; display: inline-block; max-width: 100%; }
.license-key-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.license-cert { max-width: 760px; border-top: 4px solid var(--primary); }
.license-cert h2 { margin-top: .2rem; }
.otp-input { font-size: 1.4rem; letter-spacing: .3em; text-align: center; font-family: ui-monospace, Menlo, monospace; }
.setup-2fa { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.setup-2fa figure.qr { margin: 0; background: #fff; padding: 8px; border-radius: 8px; border: 1px solid var(--border); }
.system-header { background: #2b3440; color: #fff; }
.system-header nav { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }
.system-header nav a { color: #fff; text-decoration: none; opacity: .85; }
.system-header nav a.active, .system-header nav a:hover { opacity: 1; text-decoration: underline; }
.system-header .logo { background: #f8b040; color: #2b3440; }
.system-content { margin: 0 auto; }
@media print { .license-cert { border: 0; } .system-header { display: none !important; } }
.recovery-codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.recovery-codes code { display: block; text-align: center; font-size: 1rem; padding: .4rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; letter-spacing: .05em; }

/* ---- Branding & Rechtliches je Mandant ---- */
.wordmark-img { height: var(--wordmark-h, 36px); max-width: min(calc(var(--wordmark-h, 36px) * 9), 60vw); object-fit: contain; }
.wordmark-preview { background: var(--brand); padding: .6rem 1rem; border-radius: 8px; display: inline-block; }
.wordmark-preview img { max-height: 48px; max-width: 100%; display: block; }
.favicon-preview { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; padding: 4px; background: #fff; }
.branding-row { display: grid; gap: .5rem; padding: .75rem 0; border-top: 1px solid var(--border); }
.branding-row:first-of-type { border-top: 0; }
.legal-form fieldset { padding: 1.25rem; }
.legal-form legend h2 { margin: 0; padding: 0 .3rem; }
.choice-row { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-bottom: .8rem; }
.choice-row label.check { margin: 0; }
.richtext-field .ql-toolbar.ql-snow { border-radius: 8px 8px 0 0; border-color: var(--input-border); background: var(--surface); }
.richtext-field .ql-container.ql-snow { border-color: var(--input-border); min-height: 320px; background: var(--input-bg); }
.richtext-field .ql-editor { min-height: 320px; }
.legal-content h2 { margin-top: 1.4rem; }
.reg-table .badge { white-space: nowrap; }
.layout-hints { margin: -.4rem 0 .9rem; padding-left: 1.1rem; }
.btn-icon-danger { color: var(--danger); padding-left: .5rem; padding-right: .5rem; }
.btn-icon-danger:hover { background: var(--danger-soft); }
.danger-zone { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem; border: 1px solid var(--alert-error-border); border-radius: 8px; background: var(--danger-soft); }
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; align-items: start; }
.group-new { border-style: dashed; }
.role-mitarbeit { background: var(--info-soft); color: var(--text); }
.perm-list { display: grid; gap: .3rem; }
.perm-groups { margin: .3rem 0 .6rem 1.6rem; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.perm-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.plain-fieldset { border: 0; padding: 0; margin: 0 0 .8rem; display: grid; gap: .35rem; }
.inline-choice { display: flex !important; flex-direction: row !important; align-items: center; gap: .4rem; flex-wrap: wrap; }
.input-xs { width: 5rem !important; }
.input-auto { width: auto !important; }
.indent { margin: -.2rem 0 .2rem 1.6rem; }
.module-list { margin: .6rem 0; display: grid; gap: .15rem; }
.board-list { display: grid; gap: .8rem; }
.board-list li { display: flex; gap: .75rem; align-items: center; }
.board-list a { overflow-wrap: anywhere; }

/* Vorstand: Reihenfolge, Startseite */
.board-list .board-info { flex: 1; min-width: 0; }
.board-sort { display: flex; flex-direction: column; gap: .15rem; }
.board-sort form { margin: 0; }
.board-sort .btn { padding: .1rem .45rem; line-height: 1.1; }
.board-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.board-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; }
.home-board, .home-docs { margin: 0 0 2rem; }
.home-board h2, .home-docs h2 { margin: 0; }
.input-xs { width: 4.2rem !important; display: inline-block; }
.home-layout td { vertical-align: middle; }

/* Protokolle & Dokumente */
.doc-group h2 { margin: 1.4rem 0 .6rem; }
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list li { display: flex; gap: .9rem; align-items: flex-start; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
.doc-list li:last-child { border-bottom: 0; }
.doc-icon { flex: 0 0 auto; width: 2.8rem; height: 3.3rem; border-radius: 6px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: .35rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .03em; color: #fff; background: #6b7280; text-decoration: none; }
.doc-icon.doc-pdf { background: #c0392b; }
.doc-icon.doc-docx, .doc-icon.doc-odt { background: #2b5797; }
.doc-icon.doc-xlsx, .doc-icon.doc-ods { background: #1e7145; }
.doc-icon.doc-pptx, .doc-icon.doc-odp { background: #c55a11; }
.doc-icon.doc-png, .doc-icon.doc-jpg { background: #7c3aed; }
.doc-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.doc-body p { margin: .35rem 0 0; }
.doc-actions { display: flex; flex-wrap: wrap; gap: .25rem; justify-content: flex-end; align-items: center; }
.event-docs { margin: .4rem 0; }
@media (max-width: 640px) {
  .doc-list li { flex-wrap: wrap; }
  .doc-actions { width: 100%; justify-content: flex-start; }
}

.board-links { display: inline-flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.board-links .chip { font-size: .78rem; padding: .1rem .55rem; }
.board-address { display: inline-block; }
.board-card-contact { margin-top: .3rem; }

.directory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.directory-card { display: flex; gap: .75rem; align-items: flex-start; margin: 0; }
.directory-card a { overflow-wrap: anywhere; }
.board-fields { border: 1px solid var(--border); border-radius: 10px; padding: .6rem .9rem; margin: .4rem 0 .8rem; }
.board-fields summary { cursor: pointer; }
.board-fields[open] summary { margin-bottom: .6rem; }

/* Vorstand als Visitenkarten (2 × 2) */
.board-section { margin: 1.5rem 0 0; }
.board-section h2, .home-board h2 { margin: 0; }
.bcard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.bcard { position: relative; display: flex; flex-direction: column; min-height: 220px; padding: 1.25rem 1.4rem 1rem 1.6rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.bcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: linear-gradient(var(--primary), var(--primary-dark)); }
.bcard::after { content: ''; position: absolute; right: -42px; top: -42px; width: 110px; height: 110px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 22%, transparent); pointer-events: none; }
.bcard-head { display: flex; gap: 1rem; align-items: center; }
.bcard-photo { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; font-size: 1.5rem; border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--primary); }
.bcard-photo img { width: 100%; height: 100%; object-fit: cover; }
.bcard-id { flex: 1; min-width: 0; }
.bcard-id h3 { margin: 0; font-size: 1.2rem; line-height: 1.25; overflow-wrap: anywhere; }
.bcard-role { margin: .2rem 0 0; font-size: .78rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--primary); }
.bcard-brand { position: relative; z-index: 1; align-self: flex-start; opacity: .9; }
.bcard-brand .logo-img { max-height: 34px; max-width: 70px; width: auto; }
.bcard-brand .logo { width: 34px; height: 34px; font-size: .8rem; }
.bcard-rule { height: 2px; width: 56px; margin: .9rem 0 .7rem; background: var(--accent); border-radius: 2px; }
.bcard-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .9rem; }
.bcard-contact li { display: flex; gap: .55rem; align-items: baseline; min-width: 0; }
.bcard-contact a, .bcard-contact span { overflow-wrap: anywhere; }
.bcard-ico { flex: 0 0 1.1rem; text-align: center; color: var(--primary); font-weight: 700; }
.bcard-links { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .65rem; }
.bcard-links a { font-size: .76rem; padding: .12rem .6rem; border-radius: 999px; text-decoration: none;
  background: var(--primary-soft); color: var(--primary-dark); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); }
.bcard-links a:hover { background: var(--primary); color: #fff; }
/* Social-Media-Links in den Farben der Plattform (Visitenkarten, Vorstand, Mitgliederakte) */
.social[class*="social-"]:not(.social-web) { background: var(--soc); border-color: var(--soc); color: #fff; }
.social[class*="social-"]:not(.social-web):hover { background: color-mix(in srgb, var(--soc) 82%, #000); border-color: var(--soc); color: #fff; }
.social-instagram { --soc: #e1306c; background: linear-gradient(45deg, #f58529, #dd2a7b 55%, #8134af) !important; }
.social-facebook { --soc: #1877f2; }
.social-linkedin { --soc: #0a66c2; }
.social-x, .social-threads, .social-tiktok { --soc: #111; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.social-youtube { --soc: #ff0000; }
.social-xing { --soc: #026466; }
.social-bluesky { --soc: #1185fe; }
.social-whatsapp { --soc: #25d366; }
.bcard-foot { margin-top: auto; padding-top: .8rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.bcard-club { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bcard-tools { display: inline-flex; gap: .15rem; }
.bcard-tools form { margin: 0; }
.bcard-tools .btn { padding: .1rem .45rem; line-height: 1.2; }
@media (max-width: 760px) {
  .bcard-grid { grid-template-columns: minmax(0, 1fr); }
  .bcard { min-height: 0; }
}
@media print { .bcard-tools { display: none; } }

/* Logo-Initialen in der Kopfzeile wachsen mit der eingestellten Logogröße */
.topbar .brand .logo, .public-header .brand .logo { width: var(--logo-h, 34px); height: var(--logo-h, 34px); font-size: calc(var(--logo-h, 34px) * .38); }
.size-row { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; align-items: center; }
.size-row input[type=range] { width: 100%; }
.size-row output { font-variant-numeric: tabular-nums; min-width: 3.5rem; text-align: right; }
.bg-preview { width: 100%; max-height: 180px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }

/* Systemverwaltung */
.inline-details { display: inline-block; position: relative; }
.inline-details > summary { list-style: none; display: inline-block; cursor: pointer; }
.inline-details > summary::-webkit-details-marker { display: none; }
.inline-details[open] { display: block; margin-top: .4rem; }
.inline-details form { margin: .4rem 0; padding: .5rem; border: 1px solid var(--border); border-radius: 8px; }
.changelog-entry summary { cursor: pointer; }
.changelog-entry ul { margin: .6rem 0 0; padding-left: 1.2rem; }
.changelog-entry li { margin: .2rem 0; }
.select-all { user-select: all; }

.cert-image-preview { max-width: 100%; max-height: 90px; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 14px 14px; border: 1px solid var(--border); border-radius: 6px; padding: 4px; }

/* ---- Mitgliedsausweis ---------------------------------------------------- */
.mcard-layout { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.mcard { aspect-ratio: 85.6 / 54; width: 100%; border-radius: 16px; overflow: hidden; background: #fff; color: #14181a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .1); display: flex; flex-direction: column; margin-bottom: .75rem; }
.mcard-band { background: var(--mc-bg); color: var(--mc-on); border-bottom: 4px solid var(--mc-accent); display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; }
.mcard-band strong { display: block; font-size: 1.02rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard-band span { display: block; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; opacity: .9; }
.mcard-band > div { min-width: 0; }
.mcard-logo { flex: none; width: 2.6rem; height: 2.6rem; background: #fff; border-radius: 8px; display: grid; place-items: center; padding: .25rem; }
.mcard-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mcard-body { flex: 1; display: flex; gap: .8rem; align-items: center; padding: .7rem 1rem; min-height: 0; }
.mcard-data { flex: 1; min-width: 0; }
.mcard-name { font-weight: 700; font-size: 1.15rem; line-height: 1.2; margin-bottom: .4rem; overflow-wrap: anywhere; }
.mcard-data dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; font-size: .78rem; }
.mcard-data dt { color: #5d6866; }
.mcard-data dd { margin: 0; font-weight: 600; }
.mcard-qr { flex: none; width: 36%; max-width: 140px; aspect-ratio: 1; image-rendering: pixelated; }
.wallet-buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .5rem; }
.wallet-btn { display: inline-flex; align-items: center; gap: .55rem; padding: .65rem 1.1rem; border-radius: 10px; background: #000; color: #fff !important;
  font-weight: 600; text-decoration: none !important; border: 1px solid #000; }
.wallet-btn:hover { background: #222; }
.wallet-ico { display: inline-grid; place-items: center; width: 1.5rem; height: 1.1rem; border-radius: 3px; font-size: .78rem; font-weight: 700; }
.wallet-apple .wallet-ico { background: linear-gradient(#5ac8fa 0 25%, #4cd964 25% 50%, #ffcc00 50% 75%, #ff3b30 75%); }
.wallet-google .wallet-ico { background: #fff; color: #4285f4; }
.card-check { text-align: center; }
.card-check .kv { text-align: left; margin: 1rem 0; }
.card-check-badge { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; margin: .5rem auto 1rem; font-size: 2rem; font-weight: 700; color: #fff; }
.card-check.is-valid .card-check-badge { background: var(--success); }
.card-check.is-invalid .card-check-badge { background: var(--danger); }
.card-check.is-valid h1 { color: var(--success); }
.card-check.is-invalid h1 { color: var(--danger); }
@media (max-width: 900px) { .mcard-layout { grid-template-columns: 1fr; } .mcard { max-width: 420px; margin-inline: auto; } }
@media (max-width: 380px) { .mcard-band { padding: .5rem .7rem; } .mcard-body { padding: .5rem .7rem; } .mcard-name { font-size: 1rem; } .mcard-data dl { font-size: .7rem; } }

/* ---- Lizenz-Shop ---------------------------------------------------------- */
.order-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
.order-summary { position: sticky; top: 1rem; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.choice-grid label.choice { margin: 0; flex-direction: column; gap: .3rem; }
.choice-grid label.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-grid label.choice { position: relative; }
.choice-grid label.choice span { display: flex; flex-direction: column; gap: .15rem; }
.choice-grid label.choice strong { font-size: 1.1rem; }
.choice-grid label.choice small { color: var(--muted); }
.choice-grid label.choice em { font-style: normal; font-weight: 600; color: var(--primary); }
.choice-grid label.choice:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
label.choice.is-disabled { opacity: .45; cursor: not-allowed; }
.module-choices { display: grid; gap: .5rem; margin-bottom: 1rem; }
.module-choice { align-items: flex-start; }
.order-lines td { vertical-align: top; }
.order-lines .order-total td { font-weight: 700; border-top: 2px solid var(--border); }
.order-summary .order-lines { margin-bottom: 1rem; font-size: .9rem; }
.paybox { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.paybox figure.qr img { width: 150px; height: 150px; }
.paypal-btn { background: #ffc439; color: #111 !important; border-color: #ffc439; }
.paypal-btn:hover { background: #f2b600; }
@media (max-width: 900px) { .order-layout { grid-template-columns: 1fr; } .order-summary { position: static; } }

/* Dokumentenablage (DMS) */
.badge-warn { background: var(--red-bg); color: var(--red-text); }
.dms-crumbs { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .88rem; margin-bottom: .4rem; color: var(--muted); }
.dms-crumbs a { color: var(--muted); }
.dms-crumbs .sep { opacity: .6; }
.dms-bar { align-items: center; }
.dms-links { display: flex; gap: .9rem; margin-left: auto; font-size: .9rem; flex-wrap: wrap; }
.dms-links a { text-decoration: none; }
.dms-folder-locked { opacity: .65; }
.dms-pad { padding: 0 1.25rem 1.25rem; }
.doc-icon.doc-gif, .doc-icon.doc-webp, .doc-icon.doc-tif, .doc-icon.doc-svg { background: #7c3aed; }
.doc-icon.doc-doc, .doc-icon.doc-rtf { background: #2b5797; }
.doc-icon.doc-xls, .doc-icon.doc-csv { background: #1e7145; }
.doc-icon.doc-ppt { background: #c55a11; }
.doc-icon.doc-zip { background: #8a6d1d; }
.dms-drop { position: relative; display: flex !important; align-items: center; justify-content: center; text-align: center; min-height: 7rem; padding: 1rem;
  border: 2px dashed var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; flex-direction: column !important; }
.dms-drop.over, .dms-drop:hover { border-color: var(--primary); background: var(--primary-soft); }
.dms-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dms-drop-list { display: block; margin-top: .4rem; }
.dms-upload details { margin: .5rem 0 .8rem; }
.dms-upload details[open] summary { margin-bottom: .6rem; }
.dms-doc { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.dms-preview { padding: 0; overflow: hidden; }
.dms-preview iframe { display: block; width: 100%; height: 70vh; border: 0; }
.dms-preview img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; }
.dms-text pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 28rem; overflow: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: .8rem; font-size: .85rem; }
.dms-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem .8rem; margin: .4rem 0 0; }
.dms-meta dt { color: var(--muted); }
.dms-meta dd { margin: 0; }
.dms-break { overflow-wrap: anywhere; }
td.dms-break { min-width: 11rem; }
.table tr.dms-rev-shown td { background: var(--primary-soft); }
.dms-snippet { color: var(--muted); }
.dms-snippet mark { background: var(--gold-bg); color: var(--gold-text); padding: 0 .1rem; border-radius: 3px; }
.dms-users { border: 1px solid var(--border); border-radius: 8px; padding: .6rem .8rem; max-height: 22rem; overflow: auto; margin: 0 0 .8rem; }
.dms-users input[type=search] { margin-bottom: .5rem; }
.dms-users label.check { margin-bottom: .3rem; }
@media (max-width: 900px) {
  .dms-doc { grid-template-columns: 1fr; }
  .dms-links { margin-left: 0; }
}
.dms-pad .form-actions { padding: 0; }
.choice-grid.is-disabled label.choice:not(:first-child) { opacity: .45; cursor: not-allowed; }

/* ---- Chats ---- */
.chat-overview { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.chat-tile { display: flex; align-items: center; gap: .9rem; margin: 0; padding: .9rem 1.1rem; text-decoration: none; color: inherit; }
.chat-tile:hover { border-color: var(--primary); }
.chat-tile-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-dark); font-size: 1.15rem; flex-shrink: 0; }
.chat-kind-vorstand { background: var(--gold-bg); color: var(--gold-text); }
.chat-tile-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-tile-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1rem; align-items: start; }
.chat-layout:has(> .chat-room:only-child) { grid-template-columns: minmax(0, 1fr); }
.chat-channels { padding: .5rem; display: flex; flex-direction: column; gap: .15rem; position: sticky; top: calc(var(--topbar-h, 56px) + 1rem); }
.chat-channels a { display: flex; justify-content: space-between; align-items: center; gap: .4rem; padding: .5rem .7rem; border-radius: 8px; color: var(--text); text-decoration: none; font-size: .92rem; }
.chat-channels a:hover { background: var(--bg); }
.chat-channels a.active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.chat-room { display: flex; flex-direction: column; padding: 0; margin: 0; height: calc(100vh - var(--topbar-h, 56px) - 3rem); min-height: 420px; overflow: hidden; }
.chat-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--border); }
.chat-head h1 { font-size: 1.2rem; margin: 0; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; background: var(--bg); }
.chat-more { display: block; margin: 0 auto 1rem; }
.chat-more[hidden] { display: none; }
.chat-empty { text-align: center; margin-top: 2rem; }
.chat-messages { display: flex; flex-direction: column; gap: .55rem; }
.chat-day { align-self: center; font-size: .75rem; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .1rem .7rem; margin: .5rem 0; }
.chat-msg { display: flex; align-items: flex-end; gap: .5rem; max-width: min(78%, 680px); }
.chat-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-bubble { background: var(--surface); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: .45rem .75rem .55rem; min-width: 0; box-shadow: var(--shadow); }
.chat-msg.mine .chat-bubble { background: var(--primary-soft); border-color: transparent; border-radius: 14px 14px 4px 14px; }
.chat-msg.deleted .chat-bubble { background: transparent; box-shadow: none; font-style: italic; }
.chat-meta { display: flex; align-items: center; gap: .25rem; font-size: .75rem; margin-bottom: .15rem; flex-wrap: wrap; }
.chat-msg.mine .chat-meta { justify-content: flex-end; }
.chat-meta .role-badge { font-size: .65rem; padding: 0 .4rem; }
.chat-del { background: none; border: 0; cursor: pointer; padding: 0 .15rem; font-size: .8rem; opacity: 0; transition: opacity .15s; }
.chat-msg:hover .chat-del, .chat-del:focus { opacity: .7; }
@media (hover: none) { .chat-del { opacity: .5; } }
.chat-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.chat-image img { display: block; max-width: 100%; max-height: 260px; border-radius: 8px; margin: .3rem 0; }
.chat-file { display: block; margin-top: .3rem; overflow-wrap: anywhere; }
.chat-poll { margin-top: .3rem; min-width: min(320px, 60vw); }
.chat-poll-q { font-weight: 600; }
.chat-poll-opt { position: relative; display: flex; justify-content: space-between; gap: .5rem; width: 100%; margin-top: .35rem; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: .9rem; text-align: left; cursor: pointer; overflow: hidden; }
.chat-poll-opt:disabled { cursor: default; }
.chat-poll-opt.mine { border-color: var(--primary); font-weight: 600; }
.chat-poll-bar { position: absolute; inset: 0 auto 0 0; background: var(--primary-soft); opacity: .8; }
.chat-poll-text, .chat-poll-count { position: relative; }
.chat-poll-names { margin: .1rem 0 0 .6rem; }
.chat-poll .btn { margin-top: .4rem; }
.chat-compose { display: flex; align-items: flex-end; gap: .5rem; padding: .7rem 1rem; border-top: 1px solid var(--border); }
.chat-tools { display: flex; gap: .1rem; }
.chat-tools label.btn { margin: 0; }
.chat-input { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.chat-input textarea { resize: none; max-height: 200px; }
.chat-file-name { cursor: pointer; color: var(--primary-dark); overflow-wrap: anywhere; }
.chat-error, .chat-readonly { margin: 0 1rem .7rem; }
.chat-tile-archived { opacity: .75; }
.chat-kind-raum { font-weight: 800; }
.chat-archive { margin-bottom: 1.5rem; }
.chat-archive summary { cursor: pointer; list-style: none; }
.chat-archive summary::-webkit-details-marker { display: none; }
.chat-archive summary h2 { display: inline; }
.chat-archive summary::before { content: '▸ '; color: var(--muted); }
.chat-archive[open] summary::before { content: '▾ '; }
.inline-input { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.input-days { width: 6rem; }
.chat-member-pick[hidden] { display: none; }
.chat-member-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: .5rem .7rem; margin: .5rem 0 .3rem; }
.chat-member-list label.check { margin-bottom: .35rem; }
.chat-member-list label[hidden] { display: none; }
.chat-delete { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; }
.chat-readonly { padding: .7rem 0; text-align: center; }
@media (max-width: 900px) {
  .chat-layout { grid-template-columns: minmax(0, 1fr); }
  .chat-channels { display: none; }
  .chat-room { height: calc(100vh - var(--topbar-h, 56px) - 2rem); }
  .chat-msg { max-width: 92%; }
}

/* ---- KI-Assistent ---- */
.assistant-log { display: grid; gap: .6rem; margin-top: .8rem; }
.assistant-log-item { border: 1px solid var(--border); border-radius: 8px; padding: .7rem .9rem; }
.assistant-log-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; }
.assistant-log-meta { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-top: .4rem; }
.assistant-page { max-width: 780px; margin: 0 auto; }
.assistant-inline { padding: 0; overflow: hidden; }
.assistant-inline .assistant-messages { height: 340px; }
.faq-list { display: grid; gap: .5rem; }
.faq-item { margin: 0; padding: .8rem 1.1rem; }
.faq-item summary { cursor: pointer; font-weight: 600; }
.faq-item[open] summary { margin-bottom: .5rem; }
.assistant-widget { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; }
.assistant-toggle { display: flex; align-items: center; gap: .4rem; padding: .7rem 1.1rem; border: 0; border-radius: 999px; background: var(--primary); color: var(--on-primary); font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.assistant-toggle[hidden] { display: none; }
.assistant-panel { width: min(380px, calc(100vw - 2rem)); height: min(560px, calc(100vh - 2rem)); margin: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.assistant-panel[hidden] { display: none; }
.assistant-panel-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem .6rem .6rem 1rem; background: var(--primary); color: var(--on-primary); }
.assistant-panel-head .btn-ghost { color: inherit; }
.assistant-panel .assistant-chat { flex: 1; min-height: 0; }
.assistant-chat { display: flex; flex-direction: column; }
.assistant-messages { flex: 1; min-height: 0; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .5rem; background: var(--bg); }
.assistant-msg { max-width: 85%; padding: .5rem .75rem; border-radius: 14px 14px 14px 4px; background: var(--surface); border: 1px solid var(--border); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; font-size: .93rem; }
.assistant-msg.me { align-self: flex-end; background: var(--primary); color: var(--on-primary); border-color: transparent; border-radius: 14px 14px 4px 14px; }
.assistant-msg.typing { color: var(--muted); font-style: italic; }
.assistant-form { display: flex; gap: .4rem; padding: .6rem; border-top: 1px solid var(--border); }
.assistant-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; padding: 0 .7rem .6rem; font-size: .72rem; line-height: 1.35; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--primary-dark); cursor: pointer; text-decoration: underline; white-space: nowrap; }
@media print { .assistant-widget { display: none; } }

/* ---- Webseite (Verwaltung): Seitenliste, Startpakete, Design-Auswahl ---- */
.site-status { padding: .8rem 1rem; }
.site-status-text { flex: 1 1 320px; }
.page-head.compact { margin-bottom: .5rem; }
.page-head.compact h2 { margin: 0; }
.site-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.site-switch { order: 2; margin-left: auto; }
.site-pages tr[data-depth="1"] .site-title-cell { padding-left: 2.2rem; position: relative; }
.site-pages tr[data-depth="1"] .site-title-cell::before { content: "↳"; position: absolute; left: 1rem; color: var(--muted); }
.site-pages .drag-handle { cursor: grab; color: var(--muted); padding: 0 .3rem; font-size: 1.1rem; user-select: none; }
.site-pages tr.dragging td { opacity: .4; }
.site-pages tr.drop-before td { box-shadow: inset 0 3px 0 var(--primary); }
.site-pages tr.drop-after td { box-shadow: inset 0 -3px 0 var(--primary); }
.site-state { font-weight: 600; }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .8rem; padding: .6rem .8rem; background: var(--table-head); border: 1px solid var(--border); border-radius: var(--radius); }
.bulk-bar select { width: auto; margin: 0; }
.bulk-bar[hidden] { display: none; }
[data-tx-table] .bulk-bar { margin: 0 0 .8rem; }
.table .check-col { width: 1.6rem; padding-right: 0; }
.site-state.state-veroeffentlicht { color: var(--success); }
.site-state.state-deaktiviert { color: var(--danger); }
.starter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; margin-top: .8rem; }
.starter-card { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; background: var(--surface); }
.starter-card .btn { margin-top: auto; }
.pattern-bar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .7rem 1rem; }
.shortcode-help { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--border); }
.shortcode-list { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; }
.slug-input { display: flex; align-items: center; gap: .3rem; }
.slug-input input { flex: 1; }
.template-hints { padding-left: 1.1rem; margin: -.3rem 0 .8rem; }
.cover-preview { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--radius); margin-bottom: .5rem; }
.header-images img.header-thumb { display: block; width: 100%; max-height: 120px; object-fit: cover; border-radius: var(--radius); margin: .5rem 0; border: 1px solid var(--border); }
.header-images img.header-thumb.logo { object-fit: contain; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.inline-upload { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .4rem 0; }
.inline-upload input[type=file] { flex: 1 1 200px; margin: 0; }
.design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.design-card { display: flex; flex-direction: column; gap: .35rem; border: 2px solid var(--border); border-radius: var(--radius); padding: .8rem; cursor: pointer; position: relative; margin: 0; }
.design-card:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.design-card input { position: absolute; top: .7rem; right: .7rem; width: auto; }
.design-mock { display: flex; flex-direction: column; height: 130px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); background: #fff; --b: var(--brand); --a: var(--accent); }
.m-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; background: #fff; border-bottom: 1px solid #e6e9e8; }
.m-logo { width: 34px; height: 8px; border-radius: 2px; background: var(--b); }
.m-nav { display: flex; gap: 4px; } .m-nav i { width: 14px; height: 4px; border-radius: 2px; background: #b8c0bd; }
.m-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 10px; background: linear-gradient(135deg, var(--b), color-mix(in srgb, var(--b) 55%, var(--a))); }
.m-hero b { width: 60%; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .95); }
.m-hero em { width: 40%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .7); }
.m-btn { width: 30px; height: 8px; border-radius: 3px; background: var(--a); }
.m-body { display: flex; gap: 5px; padding: 7px 8px; background: #fff; }
.m-body span { flex: 1; height: 22px; border-radius: 3px; background: #eef1f0; }
.mock-klar .m-head { border-top: 3px solid var(--b); }
.mock-schulhof .m-head { background: var(--b); border: 0; } .mock-schulhof .m-logo { background: #fff; border-radius: 99px; } .mock-schulhof .m-nav i { background: rgba(255, 255, 255, .7); }
.mock-schulhof .m-btn, .mock-schulhof .m-body span { border-radius: 99px; } .mock-schulhof .m-hero { background: color-mix(in srgb, var(--b) 85%, #000); }
.mock-magazin .m-head { flex-direction: column; gap: 4px; padding: 6px 0 0; } .mock-magazin .m-logo { width: 60px; background: #333; }
.mock-magazin .m-nav { width: 100%; justify-content: center; background: var(--b); padding: 3px; border-top: 2px solid var(--a); } .mock-magazin .m-nav i { background: rgba(255, 255, 255, .75); }
.mock-magazin .m-hero { align-items: center; } .mock-magazin .m-body span { border-top: 2px solid var(--b); border-radius: 0; }
.mock-elegant .m-head { background: #14181a; border: 0; } .mock-elegant .m-logo { background: #f1f3f2; } .mock-elegant .m-nav i { background: rgba(255, 255, 255, .5); width: 12px; height: 2px; }
.mock-elegant .m-hero { background: linear-gradient(160deg, #14181a, color-mix(in srgb, var(--b) 70%, #14181a)); justify-content: flex-end; padding-bottom: 8px; }
.mock-elegant .m-hero b { height: 6px; background: rgba(255, 255, 255, .85); } .mock-elegant .m-btn { border-radius: 0; }
.mock-klassik .m-head { border-top: 5px solid var(--b); padding: 4px 8px; } .mock-klassik .m-logo { width: 30px; height: 14px; }
.mock-klassik .m-nav { gap: 0; } .mock-klassik .m-nav i { width: 12px; height: 10px; border-radius: 0; background: transparent; border-left: 1px solid #ccd; }
.mock-klassik .m-hero { align-items: center; background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), linear-gradient(120deg, #c9a27a, #7a8f9c); }
.mock-klassik .m-hero b { background: rgba(0,0,0,.55); width: 50%; } .mock-klassik .m-btn { display: none; }
.mock-klassik .m-body span { border-radius: 0; background: var(--b); } .mock-klassik .m-body span:nth-child(2) { opacity: .8; } .mock-klassik .m-body span:nth-child(3) { opacity: .6; }
.single-pages { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: .6rem 0; }
.single-page { display: inline-flex; align-items: center; gap: .4rem; }
.slide-list { display: grid; gap: .8rem; }
.slide-item { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 1rem; align-items: start; border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem; }
.slide-item img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 6px; }
.slide-item .grid-2 label { margin-bottom: .3rem; }
.slide-tools { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
@media (max-width: 640px) { .slide-item { grid-template-columns: 1fr; } }

/* Editor der Webseite (TinyMCE) */
.editor-pane .tox-tinymce { border: 1px solid var(--border); border-radius: var(--radius); }
.editor-pane .tox .tox-toolbar__group { padding: 0 4px; }

/* Bankkonten & Zahlungsabgleich */
.bank-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.bank-card { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: inherit; border-top: 4px solid var(--primary); transition: box-shadow .15s; }
.bank-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .1); }
.bank-card.is-inactive { opacity: .6; }
.bank-card .badge { align-self: flex-start; margin-top: .3rem; }
.bank-kind { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.bank-kind.kind-paypal { color: #0070ba; }
.bank-name { font-size: 1.1rem; }
.bank-balance { font-size: 1.6rem; font-weight: 700; margin-top: .4rem; }
.bank-import { display: flex; flex-direction: column; gap: .8rem; }
.bank-import-form { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
.bank-import-form > div { flex: 1 1 280px; }
.bank-import-form label { margin: 0; }
.bank-import + .filters, .bank-import-form + .bank-import-form { border-top: 1px solid var(--border); padding-top: .8rem; }
.tx-purpose { color: var(--muted); word-break: break-word; max-width: 60ch; }
.tx-match { margin-bottom: .2rem; }
.tx-ignoriert td { opacity: .65; }
.link-btn { background: none; border: 0; padding: 0 .2rem; color: var(--muted); cursor: pointer; font: inherit; text-decoration: underline; }
.link-btn:hover { color: var(--danger); }
.pager a { display: inline-block; padding: .2rem .55rem; border-radius: 6px; }
.pager a.active { background: var(--primary); color: var(--on-primary); }
.text-warning { color: var(--gold-text); }
.danger-zone { border-left: 4px solid var(--danger); }
.rec-item { scroll-margin-top: 80px; }
.rec-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.rec-amount { font-size: 1.25rem; font-weight: 700; text-align: right; white-space: nowrap; }
.rec-sug { margin-top: .7rem; display: flex; flex-direction: column; gap: .4rem; }
.rec-sug-row { display: flex; gap: .6rem; align-items: center; margin: 0; }
.rec-sug-row .btn { flex: 0 0 auto; margin: 0; }
.rec-manual { margin-top: .7rem; }
.rec-manual summary { cursor: pointer; color: var(--primary); font-size: .9rem; }
.rec-form { margin-top: .6rem; }
.rec-done { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; border-top: 1px dashed var(--border); padding-top: .6rem; }
.rec-done input { max-width: 260px; margin: 0; }
.pay-page .kv { margin: 1rem 0; }
.pay-checkout { margin: 1rem 0 1.5rem; }
.pay-transfer { margin-top: 1rem; }
.choice-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.choice-pill input { position: absolute; opacity: 0; }
.choice-pill span { display: inline-block; padding: .5rem 1.1rem; border: 2px solid var(--border); border-radius: 999px; font-weight: 600; cursor: pointer; }
.choice-pill input:checked + span { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.choice-pill input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.donate-amounts { border: 0; padding: 0; margin: 0 0 .5rem; }
@media (max-width: 700px) {
  .rec-head { flex-direction: column; }
  .rec-amount { text-align: left; }
  .rec-sug-row { align-items: flex-start; }
}

/* Verleih */
.rent-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); gap: 1rem; margin-bottom: 1rem; justify-content: center; }
.rent-item { display: flex; flex-direction: column; gap: .5rem; margin: 0; text-align: center; }
/* Einheitliche Karten: gleich großes Bild, gleich hohe Bildleiste, Preis immer unten */
.rent-item .gal-thumbs.rent-thumbs { justify-content: center; }
.rent-items.has-thumbs .gal-thumbs.rent-thumbs { min-height: 48px; }
.rent-items:not(.has-thumbs) .gal-thumbs.rent-thumbs { display: none; }
.rent-main.rent-noimg { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 8px; background: var(--soft, #f1f2f0); font-size: 3rem; opacity: .6; }
.rent-body { display: flex; flex-direction: column; flex: 1; }
.rent-price { margin: auto 0 0 !important; padding-top: .6rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .15rem; }
.rent-price strong { font-size: 1.05rem; color: var(--primary-dark, var(--primary)); }
.rent-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: .4rem; box-sizing: border-box; background: var(--soft, #f1f2f0); border-radius: 8px; } /* Bild immer vollständig, nie beschnitten (wie im Shop) */
.rent-item h3 { margin: 0 0 .3rem; }
.rent-item p { margin: 0 0 .3rem; }
.rent-thumb { max-width: 220px; border-radius: 8px; }
.rent-cal-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -.25rem; }
.rent-cal { border-collapse: separate; border-spacing: 2px; font-size: .8rem; min-width: 100%; }
.rent-cal th { font-weight: 600; text-align: center; padding: .2rem 0; min-width: 1.8rem; color: var(--muted); }
.rent-cal th span { display: block; font-size: .65rem; font-weight: 400; }
.rent-cal th.we { color: var(--text); }
.rent-cal th.today { color: var(--primary); }
.rent-cal .rent-cal-item { text-align: left; white-space: nowrap; padding-right: .6rem; color: var(--text); position: sticky; left: 0; background: var(--surface); z-index: 1; }
.rent-cal td { text-align: center; border-radius: 4px; height: 1.9rem; padding: 0; font-weight: 600; }
.rent-cal td a { display: block; line-height: 1.9rem; color: inherit; text-decoration: none; }
.rent-cal td.free { background: var(--success-soft); color: var(--success); }
.rent-cal td.part { background: var(--warning-soft); color: var(--gold-text); }
.rent-cal td.full { background: var(--danger-soft); color: var(--danger); }
.rent-cal td.past { background: var(--soft, #f1f2f0); opacity: .5; }
.rent-cal td a:hover { outline: 2px solid var(--primary); border-radius: 4px; }
.rent-legend .lg { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; vertical-align: -2px; margin-left: .6rem; }
.rent-legend .lg.free { background: var(--success-soft); } .rent-legend .lg.part { background: var(--warning-soft); } .rent-legend .lg.full { background: var(--danger-soft); }
.rent-month-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.rent-chip { font-size: .8rem; padding: .3rem .6rem; border-radius: 6px; border-left: 4px solid var(--primary); background: var(--soft, #f1f2f0); color: inherit; text-decoration: none; }
.rent-chip.st-angefragt { border-color: var(--gold-text); }
.rent-chip.st-intern { border-color: var(--muted); }
.rent-chip.st-ausgegeben { border-color: var(--success); }
.rent-st.st-angefragt { background: var(--warning-soft); color: var(--gold-text); }
.rent-st.st-bestaetigt, .rent-st.st-ausgegeben { background: var(--success-soft); color: var(--success); }
.rent-st.st-abgelehnt, .rent-st.st-storniert { background: var(--danger-soft); color: var(--danger); }
.rent-qty { border: 1px solid var(--border); border-radius: 8px; padding: .6rem .9rem; margin: .5rem 0 1rem; }
.rent-qty legend { font-weight: 600; padding: 0 .3rem; }
.rent-qty .rent-qty-row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 1rem; margin: .3rem 0; text-align: left; }
.rent-qty .rent-qty-row input { width: 5.5rem; margin: 0; flex: 0 0 auto; }
.rent-act { margin: 0 0 .9rem; padding-bottom: .9rem; border-bottom: 1px dashed var(--border); display: flex; flex-direction: column; align-items: stretch; gap: .35rem; }
.rent-act .btn { align-self: flex-start; }
.rent-act:last-of-type { border-bottom: 0; }
.rent-act label { margin-bottom: .4rem; }
@media (max-width: 520px) { .public-header { padding: .7rem 1rem; } .public-header nav { gap: .3rem .8rem; font-size: .95rem; } }
.public-header .brand { min-width: 0; max-width: 100%; }
.public-header .brand-name { min-width: 0; overflow-wrap: anywhere; }

/* Fanshop */
.shop-head h1 a { color: inherit; text-decoration: none; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.shop-card { display: flex; flex-direction: column; gap: .3rem; margin: 0; color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.shop-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .1); transform: translateY(-2px); }
.shop-card.is-soldout { opacity: .65; }
.shop-card .badge { align-self: flex-start; }
.shop-img { aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--soft, #f1f2f0); display: grid; place-items: center; margin-bottom: .4rem; }
.shop-img img { width: 100%; height: 100%; object-fit: contain; padding: .4rem; box-sizing: border-box; } /* Bild immer vollständig, nie beschnitten */
.shop-img span { font-size: 3rem; opacity: .5; }
.shop-price { font-weight: 700; color: var(--primary); }
.shop-price.big { font-size: 1.6rem; margin: .3rem 0 .6rem; }
.shop-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem; align-items: start; }
.shop-detail h2 { margin-top: 0; }
.shop-variants { border: 0; padding: 0; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.shop-variants legend { margin-bottom: .4rem; }
.choice-pill.is-disabled span { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.shop-buy-row { align-items: flex-end; flex-wrap: wrap; }
.shop-buy-row .btn { margin-bottom: .8rem; }
.qty-input { width: 4.5rem; margin: 0; }
.shop-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.stock-chip { display: inline-block; padding: .1rem .45rem; border-radius: 999px; background: var(--success-soft); color: var(--success); margin: .1rem 0; }
.stock-chip.low { background: var(--warning-soft); color: var(--gold-text); }
.stock-chip.out { background: var(--danger-soft); color: var(--danger); }
.shop-st.st-neu { background: var(--warning-soft); color: var(--gold-text); }
.shop-st.st-bezahlt, .shop-st.st-bereit, .shop-st.st-versendet { background: var(--info-soft); color: var(--primary-dark); }
.shop-st.st-abgeschlossen { background: var(--success-soft); color: var(--success); }
.shop-st.st-storniert { background: var(--danger-soft); color: var(--danger); }
@media (max-width: 760px) { .shop-detail { grid-template-columns: 1fr; } }
.form label.choice-pill { flex: 0 0 auto; display: inline-flex; margin: 0; min-width: 0; }
.choice-pill span { white-space: nowrap; }
.rent-more { border-top: 1px dashed var(--border); padding-top: .6rem; margin-top: .6rem; }
.rent-more > summary { cursor: pointer; font-weight: 600; }

/* ---- Bildergalerien (Fanshop, Verleih) ---- */
.shop-gallery, .rent-gallery { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.shop-gallery .shop-img, .rent-main { position: relative; display: block; }
.rent-main { border-radius: 8px; overflow: hidden; }
.rent-main img { display: block; }
.gal-zoom { position: absolute; right: .5rem; bottom: .5rem; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff;
  font-size: 1rem !important; opacity: .85 !important; transition: opacity .15s; pointer-events: none; }
.gal-count { position: absolute; left: .5rem; bottom: .5rem; padding: .15rem .5rem; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .75rem; }
.gal-thumbs { display: flex; flex-wrap: wrap; gap: .4rem; }
.gal-thumb { flex: 0 0 auto; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: var(--soft, #f1f2f0); cursor: pointer; }
.gal-thumbs.small .gal-thumb { width: 48px; height: 48px; }
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: auto !important; border-radius: 0 !important; }
.gal-thumb.is-active, .gal-thumb:hover { border-color: var(--primary); }
.gal-thumb:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* Galerie im Formular */
.gal-edit { border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .9rem .8rem; margin: 0; min-width: 0; }
.gal-edit legend { font-weight: 600; padding: 0 .3rem; }
.gal-edit-list { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.gal-edit-item { display: flex; flex-direction: column; gap: .25rem; padding: .5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface, #fff); }
.gal-edit-item:has(input[name=main_image]:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.gal-edit-item img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--soft, #f1f2f0); border-radius: 6px; display: block; }
.gal-edit-item .check { margin: 0; }
.gal-edit-move { display: flex; gap: .3rem; }
.gal-edit-move .btn { flex: 1; padding: .15rem .3rem; }
.gal-edit-item:has(input[name=remove_images]:checked) img { opacity: .35; filter: grayscale(1); }
.shop-gallery .gal-thumb img, .rent-gallery .gal-thumb img { object-fit: contain; padding: 2px; box-sizing: border-box; }

/* ---- Eingebettet in die Vereinswebseite (Mitgliedsantrag) ---- */
body.embed { background: transparent; min-height: 0; }
body.embed main.content { max-width: none; margin: 0; padding: 0 2px 1rem; }
body.embed .narrow-lg, body.embed .narrow { max-width: none; }

/* ---- Spendenbox ---- */
.donate-box .lead { margin-top: -.3rem; }
.donate-amounts legend { font-weight: 700; font-size: 1.05rem; margin-bottom: .6rem; }
.donate-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .6rem; margin-bottom: .8rem; }
.form label.donate-preset { position: relative; display: block; margin: 0; cursor: pointer; }
.donate-preset input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.donate-preset span { display: grid; place-items: center; min-height: 64px; border: 2px solid var(--border); border-radius: 12px; background: var(--surface, #fff);
  font-size: 1.35rem; font-weight: 700; color: var(--primary); transition: border-color .15s, background .15s, transform .1s; }
.donate-preset:hover span { border-color: var(--primary); }
.donate-preset input:checked + span { border-color: var(--primary); background: var(--primary); color: var(--on-primary, #fff); }
.donate-preset input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }
.donate-custom { font-weight: 600; }
.donate-custom-field { display: flex; align-items: center; gap: .4rem; max-width: 220px; }
.donate-custom-field input { font-size: 1.2rem; font-weight: 700; text-align: right; }
.donate-custom-field span { font-size: 1.2rem; font-weight: 700; }
.donor-fields { border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .9rem; margin: .4rem 0 .8rem; }
.donor-fields > summary { cursor: pointer; font-weight: 600; }
.donor-fields[open] > summary { margin-bottom: .6rem; }
.donate-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
.donate-actions .btn { flex: 1 1 220px; }
.donate-transfer { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }
.donate-qr { width: 180px; height: 180px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }

/* Bildergalerie in Beiträgen (übernommen von der Webseite, Klick vergrößert) */
.news-content .s-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .5rem; margin: 1.2rem 0; }
.news-content .s-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; cursor: zoom-in; }

/* Webseite → Startseite: Karussell-Einstellungen */
.feed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1rem; align-items: start; }
.feed-card legend { font-weight: 700; }
.feed-modes { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.feed-cats { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin-bottom: .6rem; }
.feed-pick { max-height: 340px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); padding: .4rem .7rem; }
.feed-pick .check { margin: .25rem 0; }
.feed-preview { margin-top: .8rem; } .feed-preview ol { margin: .4rem 0 0; padding-left: 1.3rem; }
.feed-opt[hidden] { display: none !important; }
.form .feed-cats label.check { flex: 0 0 auto; display: inline-flex; flex-direction: row; align-items: center; gap: .35rem; }

/* ==== Mitgliedsantrag (modern: Schritte, Kacheln) ==== */
.apply { max-width: 860px; margin: 0 auto; }
.apply-head { position: relative; overflow: hidden; margin: 0 0 1.4rem; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 22px; color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 60%, #08182a) 100%); box-shadow: 0 24px 50px -28px rgba(8, 30, 55, .55); }
.apply-head::after { content: ""; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.apply-head > * { position: relative; z-index: 1; }
.apply-eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .9; }
.apply-eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: var(--accent, #f5a623); }
.apply-head h1 { margin: 0 0 .5rem; color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; }
.apply-lead { margin: 0; opacity: .92; max-width: 40rem; }
.apply-form { display: grid; gap: 1.1rem; }
.apply-step { margin: 0; padding: 1.3rem clamp(1rem, 3vw, 1.8rem) 1.5rem; border: 1px solid var(--border); border-radius: 20px; background: var(--surface, var(--card)); box-shadow: 0 12px 32px -24px rgba(8, 30, 55, .35); min-width: 0; }
.apply-step > legend { display: flex; align-items: center; gap: .8rem; padding: 0; margin: 0 0 1rem; float: left; width: 100%; font-weight: 700; font-size: 1.15rem; }
.apply-step > legend + * { clear: both; }
.apply-step > legend small { display: block; font-weight: 400; font-size: .85rem; color: var(--muted); }
.apply-num { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: var(--on-primary, #fff); font-weight: 800; font-size: 1rem;
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--primary) 70%, transparent); }
.apply-form input:not([type=checkbox]):not([type=radio]), .apply-form select, .apply-form textarea { border-radius: 10px; padding: .7rem .85rem; }
/* Kacheln (Beitrag, Zahlweise) */
.apply-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; margin: 0 0 1.1rem; }
.form label.apply-tile { position: relative; display: block; margin: 0; cursor: pointer; }
.apply-tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.apply-tile-body { display: flex; flex-direction: column; gap: .2rem; height: 100%; padding: 1.1rem 1.1rem 1rem; border: 2px solid var(--border); border-radius: 16px; background: var(--bg, #fff);
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.apply-tile:hover .apply-tile-body { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); transform: translateY(-2px); }
.apply-tile input:checked ~ .apply-tile-body { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); background: color-mix(in srgb, var(--primary) 5%, var(--bg, #fff)); }
.apply-tile input:focus-visible ~ .apply-tile-body { outline: 3px solid var(--primary); outline-offset: 2px; }
.apply-tile-name { font-weight: 700; padding-right: 1.6rem; }
.apply-tile-price { font-size: 1.7rem; font-weight: 800; color: var(--primary); line-height: 1.1; margin-top: .2rem; }
.apply-tile-meta { font-size: .85rem; color: var(--muted); }
.apply-tile-text { font-size: .88rem; color: var(--muted); margin-top: .3rem; line-height: 1.4; }
.apply-tile-ico { font-size: 1.6rem; line-height: 1; margin-bottom: .3rem; }
.apply-badge { align-self: flex-start; margin-top: .5rem; padding: .15rem .55rem; border-radius: 999px; background: var(--success-soft, #e3f4e8); color: var(--success, #1d7a3a); font-size: .75rem; font-weight: 700; }
.apply-check { position: absolute; top: .8rem; right: .8rem; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border);
  color: transparent; font-size: .8rem; font-weight: 800; transition: all .15s; }
.apply-tile input:checked ~ .apply-check { background: var(--primary); border-color: var(--primary); color: var(--on-primary, #fff); }
.apply .mandate { border-radius: 14px; }
.apply-mandate-title { margin: 0 0 .4rem; font-weight: 700; }
.apply-submit { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: .4rem; }
.apply-submit .btn { border-radius: 999px; padding: .85rem 2rem; font-size: 1.05rem; box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--primary) 80%, transparent); }
body.embed .apply { max-width: none; }
body.embed .apply-head { display: none; }
.apply-tile-name, .apply-tile-text { overflow-wrap: anywhere; hyphens: auto; }
.apply-tile-name { padding-right: 2rem; }

/* Webseite → Einstellungen: Vorschau des Suchergebnisses */
.seo-preview { display: flex; flex-direction: column; gap: .15rem; max-width: 600px; margin: .4rem 0 1rem; padding: .9rem 1.1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); font-family: Arial, sans-serif; }
.seo-preview-url { font-size: .82rem; color: var(--muted); }
.seo-preview-title { font-size: 1.15rem; color: #1a0dab; line-height: 1.3; }
[data-theme="dark"] .seo-preview-title { color: #8ab4f8; }
.seo-preview-desc { font-size: .9rem; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .seo-preview-title { color: #8ab4f8; } }

/* Impressum / Datenschutz (Verwaltung) */
.legal-app { max-width: 900px; margin: 0 auto; }
.legal-app-switch { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.legal-app-switch a { padding: .4rem 1rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45); color: #fff; text-decoration: none; font-weight: 600; font-size: .9rem; }
.legal-app-switch a:hover { background: rgba(255, 255, 255, .14); }
.legal-app-switch a.is-active { background: #fff; color: var(--primary); border-color: #fff; }
.legal-app-card { border-radius: 20px; padding: clamp(1.3rem, 4vw, 2.6rem); }
.legal-app-card h2 { margin: 2rem 0 .7rem; padding-top: 1.4rem; border-top: 1px solid var(--border); font-size: 1.3rem; color: var(--primary); }
.legal-app-card h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-app-card h3 { margin: 1.4rem 0 .4rem; font-size: 1.05rem; }
.legal-app-card p, .legal-app-card li { line-height: 1.7; overflow-wrap: anywhere; }
.legal-app-head { display: grid; grid-template-columns: minmax(0, 1fr) 220px; column-gap: 1.6rem; align-items: center; }
.legal-app-head > :not(.legal-app-figure) { grid-column: 1; }
.legal-app-figure { grid-column: 2; grid-row: 1 / span 4; margin: 0; align-self: stretch; display: grid; place-items: center; }
.legal-app-figure img { width: 100%; height: 100%; max-height: 180px; object-fit: cover; border-radius: 14px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45); }
.legal-app-figure .legal-art { width: 100%; max-width: 200px; color: var(--primary); }
@media (max-width: 640px) { .legal-app-head { grid-template-columns: 1fr; } .legal-app-figure { grid-column: 1; grid-row: auto; order: -1; margin-bottom: .8rem; } .legal-app-figure img { max-height: 160px; } }
.legal-img-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.legal-img-item { display: flex; flex-direction: column; gap: .4rem; }
.legal-img-preview { width: 100%; max-width: 320px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }

/* ==== Erscheinungsbild wie die Vereinswebseite (Verwaltung, Lizenz-Shop, Systemverwaltung) ====
   Helle Kopfzeile mit Farbleiste, weiche Karten mit Schatten, Kennzahlen mit Farbverlauf, Fußzeile im Vereinston.
   Die Layouts aus Einstellungen → Design (lib/theme.js) setzen darauf auf. */
:root {
  --radius: 16px;
  --radius-sm: 10px;
  --bg: #f4f6f8;
  --shadow: 0 1px 2px rgba(10, 35, 60, .04), 0 10px 30px -18px rgba(10, 35, 60, .28);
  --shadow-lift: 0 18px 40px -18px rgba(10, 35, 60, .32);
  --bar: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 60%, var(--accent)));
}
body { font-size: 15.5px; }
h1 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); letter-spacing: -.01em; }
h2 { letter-spacing: -.005em; }

/* Kopfzeile */
.topbar, .public-header { background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border); box-shadow: 0 8px 24px -20px rgba(10, 35, 60, .45); }
.public-header { position: relative; padding-top: calc(.8rem + 4px); }
.topbar::before, .public-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--bar); }
.topbar .brand, .public-header .brand { color: var(--text); }
.topbar .brand-name, .public-header .brand-name { font-weight: 700; letter-spacing: -.01em; }
.topbar .burger { color: var(--primary-dark); }
.topbar .role-badge { background: var(--primary-soft); color: var(--primary-dark); }
.logo-img { background: transparent; padding: 0; }
.public-header nav a:not(.btn) { color: var(--text); font-weight: 500; padding: .35rem .1rem; border-bottom: 3px solid transparent; }
.public-header nav a:not(.btn):hover { color: var(--primary); }
.public-header nav a.active:not(.btn) { color: var(--primary); border-bottom-color: var(--brand); }
.public-header .btn { background: var(--primary); color: var(--on-primary); }
.public-header .btn-secondary { background: var(--surface); color: var(--primary-dark); border-color: var(--border); }
.system-header { background: var(--surface); color: var(--text); }
.system-header nav a { color: var(--text); opacity: 1; }
.system-header nav a.active, .system-header nav a:hover { text-decoration: none; }
.system-header .logo { background: var(--accent); color: var(--on-accent); }

/* Seitenleiste */
.sidebar { padding: 1.1rem .7rem; }
.sidebar a, .sidebar .link { border-radius: var(--radius-sm); padding: .48rem .8rem; transition: background .15s, color .15s; }
.sidebar a:hover, .sidebar .link:hover { background: color-mix(in srgb, var(--primary-soft) 60%, transparent); color: var(--primary-dark); }
.sidebar a.active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; box-shadow: inset 3px 0 0 var(--brand); }
.nav-title { font-size: .7rem; font-weight: 700; letter-spacing: .14em; color: var(--primary); }

/* Seitentitel mit Akzentstrich wie auf der Webseite */
body.app .content > h1:first-of-type::before, .content .page-head h1::before { content: ""; display: block; width: 44px; height: 4px; margin-bottom: .6rem; border-radius: 2px; background: var(--accent); }
.content { padding: 1.75rem clamp(1rem, 2.4vw, 2rem); }

/* Karten */
.card { border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem 1.5rem; margin-bottom: 1.2rem; }
.card > h2:first-child, .card-head h2 { font-size: 1.15rem; }
a.card:hover, .survey-item:hover { box-shadow: var(--shadow-lift); }
.table-wrap { overflow: hidden; overflow-x: auto; }
.table th { letter-spacing: .08em; }
.table tr.clickable:hover td { background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface)); }
.grid-2, .grid-3 { gap: 1.2rem; }

/* Kennzahlen wie „So kommt das Geld an“ */
.stats { gap: 1.2rem; margin-bottom: 1.2rem; }
.stat { position: relative; overflow: hidden; border-radius: var(--radius); padding: 1.3rem 1.3rem 1.15rem; transition: transform .2s, box-shadow .2s; }
.stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--bar); }
a.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--border); }
.stat-value { font-size: 1.85rem; line-height: 1.15; letter-spacing: -.01em; color: var(--primary); }
.stat-label { margin-top: .3rem; }

/* Buttons, Formulare, Hinweise */
.btn { border-radius: 8px; font-weight: 600; transition: background .15s, filter .15s, transform .15s; }
.btn:not(.btn-small):not(.btn-ghost):active { transform: translateY(1px); }
input, select, textarea { border-radius: 8px; }
input:focus, select:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--primary) 22%, transparent); outline-offset: 0; }
.alert { border-radius: 12px; padding: .9rem 1.1rem; }
.tabs a { border-bottom-width: 3px; font-weight: 500; }
.tabs a.active { color: var(--primary); border-color: var(--brand); font-weight: 700; }
.date-chip { border-radius: var(--radius-sm); }
label.choice { border-radius: 12px; }

/* Fußzeile im Vereinston wie der Abschluss der Webseite */
.site-footer { position: relative; margin-top: 2rem; padding: 1.3rem clamp(1rem, 2.4vw, 2rem); border-top: 0; color: color-mix(in srgb, var(--on-brand) 85%, transparent);
  background: linear-gradient(120deg, var(--brand), color-mix(in srgb, var(--brand) 72%, #000)); }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, var(--brand))); }
.site-footer a { color: var(--on-brand); }
.site-footer a:hover { color: var(--accent); }
@media print { .site-footer { background: none; color: #000; } }

/* Webseite → Logos */
.logo-list { display: grid; gap: .8rem; }
.logo-item { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1.1rem; align-items: center; padding: .8rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.logo-item.is-hidden { opacity: .6; border-style: dashed; }
.logo-thumb { display: grid; place-items: center; height: 100px; padding: .5rem; background: #fff; border: 1px solid var(--border); border-radius: 10px; }
.logo-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.logo-fields .row label { margin-bottom: .4rem; }
.logo-tools { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }
.logo-tools label.check { margin: 0 .4rem 0 0; flex: 0 0 auto; }
.form .logo-replace { flex-direction: row; align-items: center; gap: .4rem; margin: 0; flex: 0 1 auto; color: var(--muted); }
.logo-replace input { width: auto; max-width: 210px; padding: .2rem; font-size: .8rem; }
@media (max-width: 640px) { .logo-item { grid-template-columns: 1fr; } }

/* Spendenbox: Schieberegler für den freien Betrag */
.donate-slider { margin: .4rem 0 1rem; padding: 1rem 1.1rem .8rem; border: 2px solid var(--border); border-radius: 14px; background: var(--surface); transition: border-color .15s, background .15s; }
.donate-slider.is-set { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface)); }
.donate-slider[hidden] { display: none; }
.donate-slider-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .6rem; font-weight: 600; }
.donate-slider output { font-size: 1.6rem; font-weight: 800; color: var(--primary); letter-spacing: -.01em; min-width: 4ch; text-align: right; }
.donate-slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--brand), var(--accent)) 0 / var(--p, 0%) 100% no-repeat, var(--border); }
.donate-slider input[type=range]:focus { outline: none; }
.donate-slider input[type=range]:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); outline-offset: 4px; }
.donate-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); box-shadow: 0 3px 10px rgba(10, 35, 60, .3); }
.donate-slider input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); box-shadow: 0 3px 10px rgba(10, 35, 60, .3); }
.donate-slider-scale { display: flex; justify-content: space-between; margin-top: .45rem; font-size: .8rem; color: var(--muted); }
.fee-slider { margin-top: 1rem; }
.fee-slider .donate-slider-head { flex-wrap: wrap; }
.fee-slider:not(.is-set) output { font-size: 1rem; font-weight: 600; color: var(--muted); }
.fee-slider input[type=range]:disabled { opacity: .45; cursor: not-allowed; }

/* Rundmail: Mehrfachauswahl Beitrags-/Zahlungsarten und einzelne Mitglieder */
.check-group { border: 1px solid var(--border); border-radius: 8px; padding: .5rem .8rem .7rem; display: grid; gap: .35rem; }
.check-group[hidden] { display: none; }
.check-group legend { font-size: .95rem; }
.check-group .chat-member-list { margin-bottom: 0; }

/* Geburtstags-/Jubiläumsliste: Glückwunsch-E-Mails */
.greet-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-bottom: .8rem; }

/* Verleih: Monatskalender mit Zeitraumwahl */
.rcal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.rcal-head strong { font-size: 1.1rem; }
.rcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.rcal-wd { text-align: center; font-size: .78rem; font-weight: 600; color: var(--muted); padding: .2rem 0; }
.rcal-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-height: 3.4rem; padding: .25rem 0;
  border: 2px solid transparent; border-radius: 8px; font: inherit; color: inherit; cursor: pointer; background: var(--soft, #f1f2f0); }
.rcal-empty { background: transparent; cursor: default; }
.rcal-num { font-weight: 700; font-size: 1rem; line-height: 1; }
.rcal-info { font-size: .68rem; text-transform: uppercase; letter-spacing: .02em; }
.rcal-day.st-free { background: var(--success-soft); color: var(--success); }
.rcal-day.st-part { background: var(--warning-soft); color: var(--gold-text); }
.rcal-day.st-full { background: var(--danger-soft); color: var(--danger); }
.rcal-day.st-past, .rcal-day:disabled { background: var(--soft, #f1f2f0); color: var(--muted); opacity: .55; cursor: default; }
.rcal-day.is-today .rcal-num { text-decoration: underline; text-underline-offset: 3px; }
.rcal-day:not(:disabled):hover { border-color: var(--primary); }
.rcal-day.in-range, .rcal-day.preview { border-color: var(--primary); box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--primary) 12%, transparent); }
.rcal-day.preview { border-style: dashed; }
.rcal-day.sel-start, .rcal-day.sel-end { background: var(--primary); border-color: var(--primary); color: #fff; opacity: 1; }
.rcal-result { margin-top: .8rem; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: 8px; }
.rcal-result.loading { opacity: .6; }
.rcal-result h3 { margin: 0 0 .5rem; font-size: 1rem; }
.rcal-items { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .3rem; }
.rcal-item { display: flex; justify-content: space-between; gap: .8rem; padding: .35rem .6rem; border-radius: 6px; }
.rcal-item.st-free { background: var(--success-soft); color: var(--success); }
.rcal-item.st-part { background: var(--warning-soft); color: var(--gold-text); }
.rcal-item.st-full { background: var(--danger-soft); color: var(--danger); }
.rent-matrix { margin-top: .8rem; }
.rent-matrix summary { cursor: pointer; color: var(--muted); margin-bottom: .5rem; }
@media (max-width: 520px) { .rcal-day { min-height: 2.7rem; } .rcal-info { display: none; } }

/* Verleih eingebettet in die Vereinswebseite: Karten etwas schlichter, Kalender volle Breite */
body.embed .rent-items { margin-top: 0; }
body.embed .card { box-shadow: none; }
.greet-auto { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; }

/* Dokumentenablage: Miniansicht statt Typ-Symbol bei Bildern */
.doc-icon.doc-thumb { width: 3.3rem; height: 3.3rem; padding: 0; overflow: hidden; background: var(--soft, #f1f2f0); border: 1px solid var(--border); align-items: center; }
.doc-icon.doc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-icon.doc-thumb.no-thumb { background: #7c3aed; border: 0; align-items: flex-end; padding-bottom: .35rem; }
/* Dokumentenablage: Fortschrittsanzeige beim Hochladen */
.upload-progress { margin-top: .8rem; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--soft, #f1f2f0); }
.upload-progress[hidden] { display: none; }
.upload-progress-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.upload-progress progress { width: 100%; height: 12px; accent-color: var(--primary); }
.upload-progress.is-error { border-color: var(--danger); background: var(--danger-soft); }
.upload-progress.is-error strong { color: var(--danger); }
.backup-job { margin: 0 0 1rem; }
.backup-job .form-actions { margin-top: .6rem; }
/* Dokumentenablage: Adobe-Formate in den Farben der Programme */
.doc-icon.doc-psd, .doc-icon.doc-psb { background: #001e36; color: #31a8ff; }
.doc-icon.doc-ai, .doc-icon.doc-eps { background: #330000; color: #ff9a00; }
.doc-icon.doc-indd, .doc-icon.doc-indt, .doc-icon.doc-idml { background: #49021f; color: #ff3366; }
.dms-folder-pick { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: .2rem 0 .6rem; }

/* Dokumentenablage wie ein Leitz-Ordner: links Ordnerbaum, Mitte Inhalt, rechts Vorschau – jede Spalte scrollt für sich */
.dms-explorer { display: grid; grid-template-columns: minmax(200px, 260px) minmax(260px, 1fr) minmax(340px, 1.5fr); gap: .75rem; margin-bottom: 1rem;
  height: clamp(520px, calc(100vh - var(--topbar-h, 56px) - 2.5rem), 1600px); }
.dms-explorer > .card { margin: 0; padding: 0; display: flex; flex-direction: column; overflow: auto; overscroll-behavior: contain; }
.dms-pane-head { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .65rem .9rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.dms-pane-head .chips { margin: 0 0 0 auto; gap: .25rem; }
.dms-pane-head .chip { padding: .15rem .55rem; font-size: .8rem; }
.dms-pad-s { padding: .8rem .9rem; margin: 0; }

/* Ordnerrücken als Symbol: farbiger Rücken mit Etikett und Griffloch; Farbe je Ebene */
.dms-binder { --binder: #1f5aa6; flex: 0 0 auto; position: relative; display: inline-block; width: .8rem; height: 1.1rem; border-radius: 2px; background: var(--binder); box-shadow: inset -2px 0 0 rgba(0, 0, 0, .2); }
.dms-binder::before { content: ""; position: absolute; left: .14rem; right: .16rem; top: .17rem; height: .36rem; border-radius: 1px; background: rgba(255, 255, 255, .88); }
.dms-binder::after { content: ""; position: absolute; left: 50%; bottom: .13rem; width: .3rem; height: .3rem; margin-left: -.16rem; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.dms-binder-1 { --binder: #c0392b; }
.dms-binder-2 { --binder: #1e7a4f; }
.dms-binder-3 { --binder: #c98a00; }
.dms-binder-off { --binder: #9aa3a0; }
.dms-binder-xl { width: 2.6rem; height: 3.6rem; border-radius: 4px; box-shadow: inset -5px 0 0 rgba(0, 0, 0, .2); }
.dms-binder-xl::before { left: .45rem; right: .5rem; top: .5rem; height: 1.1rem; }
.dms-binder-xl::after { width: .9rem; height: .9rem; margin-left: -.5rem; bottom: .45rem; }
.dms-cabinet { font-size: 1rem; line-height: 1; }

/* Ordnerbaum */
.dms-side .dms-pane-head { padding: .5rem .6rem; }
.dms-tree, .dms-tree ul { list-style: none; margin: 0; padding: 0; }
.dms-tree-root { padding: .4rem .5rem .8rem; }
.dms-tree ul { padding-left: .9rem; margin-left: .55rem; border-left: 1px dotted var(--border); }
.dms-tree li { margin: 1px 0; font-size: .9rem; }
.dms-tree summary { list-style: none; display: flex; align-items: center; cursor: pointer; }
.dms-tree summary::-webkit-details-marker { display: none; }
.dms-tree summary::before { content: "▸"; flex: 0 0 .9rem; color: var(--muted); font-size: .85rem; text-align: center; transition: transform .12s; }
.dms-tree details[open] > summary::before { transform: rotate(90deg); }
.dms-leaf { padding-left: .9rem; }
.dms-node { display: flex; align-items: center; gap: .45rem; min-width: 0; flex: 1; padding: .22rem .4rem; border-radius: 5px; text-decoration: none; color: var(--text); }
.dms-node-name { overflow-wrap: anywhere; }
a.dms-node:hover { background: var(--bg); }
a.dms-node.active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }

/* Inhalt: kompakte Zeilen wie im Register */
.dms-rows { list-style: none; margin: 0; padding: 0; }
.dms-row { border-bottom: 1px solid var(--border); }
.dms-row-link { display: flex; align-items: center; gap: .7rem; padding: .5rem .9rem; text-decoration: none; color: var(--text); min-width: 0; }
a.dms-row-link:hover { background: var(--bg); }
a.dms-row-link:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.dms-row.selected .dms-row-link { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.dms-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; line-height: 1.3; }
.dms-row-main strong { font-weight: 600; }
.dms-row-flags { display: flex; gap: .2rem; font-size: .85rem; }
.dms-row .doc-icon { width: 1.9rem; height: 2.3rem; padding-bottom: .2rem; font-size: .5rem; border-radius: 4px; }
.dms-row .doc-icon.doc-thumb { width: 1.9rem; height: 2.3rem; padding: 0; }
.dms-row-folder .dms-binder { width: 1.15rem; height: 1.6rem; margin: 0 .4rem; }
.dms-row-folder .dms-binder::before { top: .25rem; height: .5rem; left: .2rem; right: .22rem; }
.dms-row-folder .dms-binder::after { width: .4rem; height: .4rem; margin-left: -.22rem; bottom: .2rem; }

/* Vorschau */
.dms-viewer { transition: opacity .15s; }
.dms-viewer.loading { opacity: .55; }
.dms-viewer-head { display: flex; gap: .7rem; align-items: center; padding: .8rem 1rem .5rem; }
.dms-viewer-head .doc-icon { width: 2.2rem; height: 2.7rem; font-size: .55rem; padding-bottom: .25rem; border-radius: 5px; }
.dms-viewer-title { min-width: 0; overflow-wrap: anywhere; }
.dms-viewer-title h2 { margin: 0; font-size: 1.1rem; }
.dms-viewer-tools { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .7rem; border-bottom: 1px solid var(--border); }
.dms-viewer-note { margin: 0; padding: .45rem 1rem; font-size: .85rem; background: var(--gold-bg); color: var(--gold-text); }
.dms-viewer-body { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 360px; background: var(--bg); }
.dms-viewer-body iframe { flex: 1; width: 100%; min-height: 360px; border: 0; background: #fff; }
.dms-viewer-img { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.dms-viewer-img img { max-width: 100%; max-height: 70vh; box-shadow: var(--shadow); }
.dms-viewer-text { padding: .8rem 1rem; }
.dms-viewer-text pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .82rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .8rem; }
.dms-viewer-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 2rem 1.5rem; text-align: center; }
.dms-viewer-empty p { margin: 0; max-width: 28rem; }
.doc-icon.doc-icon-xl { width: 3.6rem; height: 4.4rem; font-size: .8rem; }
.dms-viewer-meta { padding: .8rem 1rem 1rem; margin: 0; border-top: 1px solid var(--border); }

/* Suche: Trefferliste links, Vorschau rechts */
.dms-explorer-search { grid-template-columns: minmax(300px, 1fr) minmax(360px, 1.5fr); }
.dms-row-main .dms-snippet { margin-top: .2rem; }
.dms-row-main .badge { font-size: .7rem; vertical-align: middle; }

/* Dateien auf die Inhaltsliste ziehen */
.dms-list { position: relative; }
.dms-drop-hint { display: none; }
.dms-list.drop-over { outline: 2px dashed var(--primary); outline-offset: -4px; }
.dms-list.drop-over .dms-drop-hint { display: flex; position: sticky; top: 0; bottom: 0; z-index: 2; height: 0; overflow: visible; justify-content: center; pointer-events: none; }
.dms-list.drop-over .dms-drop-hint span { margin-top: 4rem; padding: .7rem 1.1rem; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 600; box-shadow: var(--shadow); }
.dms-list.drop-over .dms-rows { opacity: .45; }

/* Bereiche unter der Ablage (Hochladen, Ordner verwalten) zugeklappt */
.dms-section > summary { cursor: pointer; list-style: none; }
.dms-section > summary::-webkit-details-marker { display: none; }
.dms-section > summary h2 { display: inline; margin: 0; font-size: 1.05rem; }
.dms-section > summary::after { content: "▾"; float: right; color: var(--muted); }
.dms-section[open] > summary { margin-bottom: 1rem; }
.dms-section[open] > summary::after { content: "▴"; }
.dms-section h3 { margin-top: 0; }

@media (max-width: 1280px) {
  .dms-explorer { grid-template-columns: minmax(190px, 240px) minmax(0, 1fr); height: auto; }
  .dms-explorer > .dms-side, .dms-explorer > .dms-list { max-height: 60vh; }
  .dms-viewer { grid-column: 1 / -1; min-height: 70vh; }
  .dms-explorer-search { grid-template-columns: minmax(0, 1fr); }
  .dms-explorer-search > .dms-list { max-height: 55vh; }
}
@media (max-width: 760px) {
  .dms-explorer { grid-template-columns: 1fr; }
  .dms-explorer > .dms-side { max-height: 40vh; }
  .dms-explorer > .dms-list { max-height: none; }
  /* Auf dem Handy öffnet ein Dokument direkt die Detailseite */
  .dms-viewer { display: none; }
}

/* ---- Verwaltung auf großen Bildschirmen ---- */
/* Übersicht: Kacheln verteilen sich auf so viele Spalten, wie Platz ist */
.dash-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.bcard-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
/* Tabellen ohne eigenen Scrollbereich: auf schmalen Bildschirmen in der Karte seitlich scrollen statt die Seite zu verbreitern */
.card:has(> .table), .card:has(> table), .card:has(> form > .table) { overflow-x: auto; }
@media (min-width: 1700px) {
  /* Lange Lesetexte und Formulare bleiben angenehm schmal */
  .prose, .news-article, .news-more { max-width: 860px; }
}
@media (max-width: 600px) {
  /* Filterleisten auf dem Handy: Suchfeld und Knopf ganze Breite, Auswahlfelder zu zweit nebeneinander */
  .filters input[type=search], .filters input[type=text], .filters > .btn { flex: 1 1 100%; }
  .filters select { flex: 1 1 calc(50% - .5rem); min-width: 0; width: auto; }
}
/* Webseite → Einstellungen → Social Media */
.social-table input[type=checkbox] { width: 18px; height: 18px; }
.social-table td:nth-child(2) { min-width: 240px; }
.social-chip { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sc); color: #fff; vertical-align: middle; margin-right: .3rem; }
.social-chip svg { width: 16px; height: 16px; }

/* ---- Zugriffsstatistik ---- */
/* Reihenfarben (geprüft auf Farbsehschwäche, je Modus eigene Stufe) */
:root { --viz-https: #1baf7a; --viz-http: #eb6834; --viz-bytes: #3a7bd5; --viz-grid: var(--border); }
:root[data-theme="dunkel"] { --viz-https: #199e70; --viz-http: #d95926; --viz-bytes: #4d8de0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) { --viz-https: #199e70; --viz-http: #d95926; --viz-bytes: #4d8de0; } }
.access-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.access-head .chips { margin: 0; }
.access-key { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .35rem; vertical-align: .05em; }
.access-https { background: var(--viz-https); }
.access-http { background: var(--viz-http); }
.access-bytes { background: var(--viz-bytes); }
.stat-value .access-key { width: .8rem; height: .8rem; vertical-align: .1em; }
.access-legend { display: flex; gap: 1rem; color: var(--muted); }
.viz { margin: .5rem 0 0; }
.viz-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; height: 220px; }
.viz-y { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: .75rem; color: var(--muted); line-height: 1; margin: -.35em 0; }
.viz-bars { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: end; height: 100%; border-bottom: 1px solid var(--muted);
  background: linear-gradient(var(--viz-grid) 1px, transparent 1px) 0 0 / 100% 50%; }
.viz-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; padding: 0 1px; outline: none; cursor: default; }
.viz-col:hover, .viz-col:focus-visible { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.viz-col:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); }
.viz-seg { display: block; width: min(100%, 28px); min-height: 1px; }
.viz-seg:first-child { border-radius: 4px 4px 0 0; }
.viz-x { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-left: calc(var(--viz-y-w, 0px)); padding-left: 2.6rem; font-size: .72rem; color: var(--muted); }
.viz-x span { white-space: nowrap; overflow: visible; text-align: left; }
.viz-tip { position: fixed; z-index: 50; pointer-events: none; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow);
  padding: .45rem .65rem; font-size: .82rem; white-space: pre-line; line-height: 1.45; }
.viz-tip[hidden] { display: none; }
.access-table { margin-top: 1rem; }
.access-table summary { cursor: pointer; color: var(--primary-dark); font-size: .9rem; }
.access-top td { position: relative; }
.access-bar { display: block; height: 3px; margin-top: .25rem; border-radius: 2px; background: var(--viz-https); opacity: .7; }

/* ---- Anwesenheitsliste (Einlass) ---- */
.att-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 760px) { .att-grid { grid-template-columns: 1fr; } }
.att-grid h3 { margin: .2rem 0 .6rem; font-size: 1rem; }
.att-video { position: relative; max-width: 420px; margin-bottom: .6rem; border-radius: 10px; overflow: hidden; background: #000; }
.att-video[hidden] { display: none; }
.att-video video { display: block; width: 100%; height: auto; }
.att-result { font-size: 1.15rem; font-weight: 600; padding: .9rem 1.1rem; border-radius: 10px; margin-bottom: 1rem; border: 2px solid transparent; }
.att-result.is-ok { background: var(--success-soft, #e6f4ea); border-color: var(--success, #2e7d32); }
.att-result.is-warn { background: #fff4d6; border-color: #c99a1c; color: #5c4300; }
.att-result.is-error { background: var(--danger-soft); border-color: var(--danger); }
.att-new { animation: att-flash 2s ease-out; }
@keyframes att-flash { from { background: var(--success-soft, #e6f4ea); } to { background: transparent; } }
.att-delete { margin-top: 1rem; }

/* Rundmail: Anhänge, Bestätigungen, Versandprotokoll */
.badge-error { background: var(--danger-soft); color: var(--danger); }
fieldset.mail-attach { margin: .4rem 0 .8rem; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: 10px; }
fieldset.mail-attach legend { padding: 0 .3rem; font-weight: 600; }
.mail-docs .chat-member-list { max-height: 220px; }
.mail-attach-list { margin: .8rem 0 0; padding-top: .6rem; border-top: 1px dashed var(--border); }
.mail-attach-list li { margin: .15rem 0; }
.mail-stats { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.mail-poll { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin: 0 0 .8rem; padding: .5rem .7rem; border-radius: 8px; background: var(--bg); }
.mail-log td { vertical-align: top; }
[data-filter-field][hidden] { display: none !important; }
.mail-guests { display: grid; gap: .5rem; margin: 0 0 .5rem; }
.mail-guest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "f l x" "e c x"; gap: .4rem; align-items: center; padding: .5rem; border: 1px solid var(--border); border-radius: 8px; }
.mail-guest input { margin: 0; min-width: 0; }
.mail-guest [name=guest_first] { grid-area: f; } .mail-guest [name=guest_last] { grid-area: l; }
.mail-guest [name=guest_email] { grid-area: e; } .mail-guest [name=guest_company] { grid-area: c; }
.mail-guest [data-guest-remove] { grid-area: x; }
@media (max-width: 520px) { .mail-guest { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "f x" "l x" "e x" "c x"; } }

/* PayPal-Einstellungen: „Gebühr trägt der Zahler“ eingerückt unter dem jeweiligen Bereich, ohne Bereich nicht wählbar */
.form .pp-fee { margin-left: 1.9rem; margin-top: -.35rem; }
.form label.is-disabled { opacity: .45; cursor: not-allowed; }

/* Automatischer Zahlungsabgleich: Statusleiste in Beiträgen, Kursen, Fanshop und Verleih */
.automatch { border: 1px solid var(--border); border-left: 4px solid var(--muted); border-radius: 10px; background: var(--surface, var(--card, #fff)); padding: .7rem 1rem; margin: 0 0 1rem; }
.automatch.is-on { border-left-color: var(--success); }
.automatch-head { display: flex; align-items: center; gap: .75rem; }
.automatch-head > div { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.automatch-icon { font-size: 1.3rem; line-height: 1; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--bg); color: var(--muted); }
.automatch.is-on .automatch-icon { background: var(--success-soft); color: var(--success); }
.automatch-facts { list-style: none; margin: .45rem 0 0 2.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; color: var(--muted); }
.automatch-facts strong { color: var(--text, inherit); }
.match-badge { display: inline-block; margin-top: .2rem; font-size: .8rem; color: var(--success); white-space: nowrap; }
.match-badge a { color: inherit; }
.automatch-settings summary { cursor: pointer; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; list-style: none; }
.automatch-settings summary h2 { margin: 0; display: inline; }
.automatch-settings[open] summary { margin-bottom: 1rem; }
@media (max-width: 600px) { .automatch-facts { margin-left: 0; } }

/* Kurs-Anwesenheit: Raster Name × Termine, Erfassen am Handy, Zugang der Kursleitung */
.ca-grid-wrap { overflow-x: auto; padding: 0; }
.ca-grid { border-collapse: separate; border-spacing: 0; font-size: .9rem; min-width: 100%; }
.ca-grid th, .ca-grid td { border-bottom: 1px solid var(--border); padding: .45rem .35rem; text-align: center; white-space: nowrap; }
.ca-grid .ca-name { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 12rem; padding-left: .8rem; font-weight: normal; border-right: 1px solid var(--border); }
.ca-grid thead th { background: var(--primary); color: var(--on-primary, #fff); font-size: .78rem; font-weight: 600; vertical-align: bottom; }
.ca-grid thead .ca-name { background: var(--primary); color: var(--on-primary, #fff); font-weight: 600; }
.ca-grid thead a { color: inherit; text-decoration: none; display: block; line-height: 1.15; }
.ca-grid thead a:hover { text-decoration: underline; }
.ca-grid .ca-wd { display: block; font-weight: 400; opacity: .8; font-size: .7rem; }
.ca-grid .ca-col { min-width: 2.6rem; }
.ca-grid thead .ca-col:not(.ca-done) { opacity: .75; }
.ca-grid .ca-cell { min-width: 2.6rem; border-left: 1px solid var(--border); }
.ca-grid .is-present { color: var(--primary); font-weight: 700; font-size: 1.05rem; background: var(--primary-soft); }
.ca-grid .is-absent { color: var(--muted); }
.ca-grid .ca-today { box-shadow: inset 2px 0 0 var(--accent, #f2b632), inset -2px 0 0 var(--accent, #f2b632); }
.ca-grid .ca-sum { border-left: 1px solid var(--border); font-weight: 600; min-width: 3.5rem; }
.ca-grid tbody tr:nth-child(even) .ca-cell:not(.is-present), .ca-grid tbody tr:nth-child(even) .ca-name { background-color: color-mix(in srgb, var(--surface) 94%, var(--text)); }
.ca-grid tfoot th, .ca-grid tfoot td { font-weight: 700; border-bottom: 0; }
.ca-take { max-width: 40rem; margin: 0 auto; }
.ca-take-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.ca-take-head h1 { margin: 0 0 .2rem; }
.ca-take-head p { margin: 0; }
.ca-logo { max-height: 56px; max-width: 120px; object-fit: contain; }
.ca-date-nav { display: flex; gap: .5rem; align-items: center; }
.ca-date-nav .btn { min-width: 2.8rem; font-size: 1.2rem; padding-top: .35rem; padding-bottom: .35rem; }
.ca-date-nav .disabled { opacity: .35; pointer-events: none; }
.ca-date-pick { flex: 1; margin: 0; }
.ca-date-pick select { width: 100%; font-size: 1rem; }
.ca-date-title { margin: .7rem 0; }
.ca-form { padding: .4rem .8rem .9rem; }
.ca-list { width: 100%; border-collapse: collapse; }
.ca-list th { text-align: left; padding: .6rem .2rem; border-bottom: 2px solid var(--border); }
.ca-list td { padding: 0; border-bottom: 1px solid var(--border); }
.ca-row { display: flex; gap: .9rem; align-items: center; padding: .75rem .2rem; cursor: pointer; margin: 0; }
.ca-row input[type=checkbox] { width: 1.7rem; height: 1.7rem; flex: none; accent-color: var(--primary); margin: 0; }
.ca-row:has(input:checked) { background: var(--primary-soft); }
.ca-who { display: flex; flex-direction: column; gap: .1rem; }
.ca-note { font-size: .82rem; color: var(--muted); }
.ca-contact { padding: 0 .2rem .5rem 2.8rem; color: var(--muted); }
.ca-contact summary { cursor: pointer; }
.ca-save { width: 100%; margin-top: .9rem; padding: .8rem; font-size: 1.05rem; }
.ca-links { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.lead-pin { font-size: 1.4rem; letter-spacing: .25em; }
.lead-pin-input { font-size: 1.5rem; letter-spacing: .4em; text-align: center; }
code.break { word-break: break-all; }
@media print { .ca-grid thead th, .ca-grid thead .ca-name { background: #eee !important; color: #000 !important; } .ca-grid-wrap { overflow: visible; } }

/* KI-Assistent eingebettet in die Vereinswebseite (Fenster unten rechts): Chat füllt den ganzen Rahmen */
body.embed:has(.assistant-embed) { background: var(--surface); overflow: hidden; }
body.embed main.content:has(.assistant-embed) { padding: 0; }
.assistant-embed { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.assistant-embed .assistant-chat { flex: 1; min-height: 0; }
.assistant-toggle .chat-icon { flex: none; }
.chat-widget-settings { border: 1px solid var(--border); border-radius: 10px; padding: .6rem 1rem .4rem; }

/* Zwei-Klick-Lösung für Videos: Hinweis statt Rahmen, bis jemand „Video laden“ wählt */
.embed-consent { aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: center; gap: .1rem; padding: 1.2rem 1.4rem; border-radius: 10px; background: var(--primary-soft); border: 1px solid var(--border); text-align: center; font-size: .92rem; }
.embed-consent p { margin: .25rem 0; }
.embed-consent-btn { font: inherit; font-weight: 600; padding: .5rem 1.1rem; border: 0; border-radius: 8px; background: var(--primary); color: var(--on-primary); cursor: pointer; }
@media (max-width: 520px) { .embed-consent { aspect-ratio: auto; } }
.assistant-form[hidden], .assistant-consent[hidden] { display: none; }
.assistant-consent { padding: .8rem .9rem .9rem; border-top: 1px solid var(--border); background: var(--surface); font-size: .86rem; line-height: 1.45; }
.assistant-consent p { margin: 0 0 .5rem; }
.assistant-consent .btn { width: 100%; }
.chat-link-row { border-bottom: 1px solid var(--border); padding: .6rem 0 .8rem; margin: 0; }
.chat-link-row:last-of-type { border-bottom: 0; }
.chat-link-row.inactive { opacity: .6; }
.chat-link-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.chat-link-actions .check { margin: 0; }
.chat-preview-btn, .assistant-action { display: inline-flex; align-items: center; padding: .35rem .8rem; border-radius: 999px; border: 1.5px solid var(--primary); color: var(--primary); font-weight: 600; font-size: .85rem; text-decoration: none; background: var(--surface); }
.chat-preview-btn { margin-left: auto; }
.assistant-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.15rem 0 .2rem; max-width: 90%; }
a.assistant-action:hover { background: var(--primary); color: var(--on-primary); }
.chat-greeting-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.chat-greeting-preview { background: var(--bg); border-radius: 10px; padding: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.chat-greeting-preview .assistant-msg { max-width: 100%; }
.assistant-start { margin-top: 0; }
@media (max-width: 760px) { .chat-greeting-grid { grid-template-columns: 1fr; } }

/* Offline-Seite der installierten App */
.offline-page { max-width: 32rem; margin: 15vh auto; padding: 0 16px; text-align: center; }
#app [hidden] { display: none; }

/* Teilen in sozialen Netzwerken */
.share-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; align-items: start; }
.share-grid .card { margin: 0; }
.share-grid textarea { font-family: inherit; }
.share-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.share-btn { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border-radius: 10px; color: #fff; font-weight: 600; text-decoration: none; }
.share-btn:hover { filter: brightness(1.08); color: #fff; }
.share-whatsapp { background: #1f9d55; } .share-facebook { background: #1877f2; } .share-x { background: #111; }
.share-linkedin { background: #0a66c2; } .share-telegram { background: #229ed9; } .share-mail { background: #5b6472; }
.share-insta { margin-bottom: 1rem; }
.share-preview { border: 1px solid var(--border, #ddd); border-radius: 10px; overflow: hidden; }
.share-preview img { display: block; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; }
.share-preview > div { padding: .6rem .8rem; display: flex; flex-direction: column; gap: .15rem; background: var(--surface-2, rgba(127,127,127,.08)); }
[data-share] [hidden] { display: none; }
[data-ml-card-no][hidden] { display: none; }
/* Automatische Datensicherung */
[data-show-when][hidden] { display: none !important; }
.row > .grow { flex: 2 1 240px; }
.radio-list { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: .8rem; }
.weekday-picks > div { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.weekday-picks label.check { margin: 0; }
.backup-runs { margin-top: .8rem; }
.backup-runs summary { cursor: pointer; font-weight: 600; }
td.plan-actions { min-width: 200px; }
td.plan-actions > * { margin: 0 .25rem .3rem 0; }

/* Hilfe & Handbuch: Karte mit Titelseite */
.help-book { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.help-cover img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--border); box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .45); }
@media (max-width: 520px) { .help-book { grid-template-columns: 1fr; } .help-cover { max-width: 140px; } }
.access-section { margin: 2rem 0 .8rem; }
.access-dim .access-top td:last-child { width: 4.5rem; }