[hidden] { display: none !important; }

/* =====================================================================
   VereinMap Designsystem
   Monochrom: Schwarz, Weiß und neutrale Grautöne bestimmen das Bild.
   Farbe nur mit Funktion: Rot = kritisch/Fehler, Orange = Warnung,
   Grün = bestätigter Erfolg, Blau = Information. Alle Komponenten
   beziehen ihre Werte ausschließlich aus diesen Variablen.
   ===================================================================== */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin-wght-normal.woff2) format('woff2-variations'), url(/fonts/inter-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations'), url(/fonts/inter-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }

:root {
  color-scheme: light;
  /* Farben */
  --color-background: #ffffff;
  --color-surface: #f7f7f8;
  --color-surface-raised: #ffffff;
  --color-text: #111111;
  --color-text-2: #3a3a3c;
  --color-text-muted: #666666;
  --color-text-faint: #8e8e93;
  --color-border: #e5e5e7;
  --color-border-strong: #dcdcdc;
  --color-hover: #f0f0f0;
  --color-selected: #ededee;
  --color-primary: #171717;
  --color-primary-hover: #242424;
  --color-primary-edge: #333333;
  --color-on-primary: #ffffff;
  --color-critical: #dc2626; --color-critical-bg: #fef2f2; --color-critical-ink: #991b1b;
  --color-warning: #d97706; --color-warning-bg: #fffbeb; --color-warning-ink: #92400e;
  --color-success: #15803d; --color-success-bg: #f0fdf4; --color-success-ink: #166534;
  --color-info: #2563eb;    --color-info-bg: #eff6ff;    --color-info-ink: #1e40af;
  --color-overlay: rgba(17, 17, 17, .42);

  /* Typografie */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --text-xs: .75rem;      /* 12 Metadaten, Tabellenköpfe */
  --text-sm: .8125rem;    /* 13 Hilfetexte */
  --text-base: .9375rem;  /* 15 Fließtext */
  --text-md: 1.0625rem;   /* 17 Zwischenüberschriften */
  --text-lg: 1.375rem;    /* 22 Abschnittstitel */
  --text-xl: 1.875rem;    /* 30 Seitenüberschriften */
  --text-display: clamp(2.25rem, 4.6vw, 3.5rem);
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --leading-tight: 1.15; --leading-snug: 1.3; --leading-body: 1.55;
  --tracking-tight: -0.022em; --tracking-label: .06em;

  /* Abstände (4er-Raster) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px;

  /* Rundungen */
  --radius-small: 8px; --radius-medium: 14px; --radius-large: 20px; --radius-pill: 999px;

  /* Schatten: Licht fällt von links oben, Schatten nach rechts unten */
  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .04);
  --shadow-elevated: 2px 10px 28px rgba(0, 0, 0, .10);
  --shadow-overlay: 4px 24px 64px rgba(0, 0, 0, .20);
  --shadow-button: 2px 3px 0 rgba(0, 0, 0, .85), 6px 10px 24px rgba(0, 0, 0, .14);
  --shadow-button-hover: 2px 4px 0 rgba(0, 0, 0, .85), 8px 14px 28px rgba(0, 0, 0, .18);
  --shadow-button-active: 1px 1px 0 rgba(0, 0, 0, .85), 2px 4px 10px rgba(0, 0, 0, .10);
  --shadow-button-secondary: 1px 2px 0 rgba(0, 0, 0, .06), 2px 6px 14px rgba(0, 0, 0, .05);

  /* Bewegung */
  --transition-fast: 160ms ease;
  --transition-normal: 220ms ease;
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  /* Ebenen */
  --z-sticky: 30; --z-scrim: 35; --z-sidebar: 40; --z-dropdown: 50; --z-dialog: 1000; --z-toast: 1100;

  /* Bedienelemente */
  --control-h-s: 40px; --control-h-m: 48px; --control-h-l: 64px; --control-h-xs: 32px;
  --input-h: 48px;
  --focus-ring: 0 0 0 3px rgba(17, 17, 17, .16);
  --focus-outline: 3px solid #777777;

  /* Diagramme: monochrom, zweite Reihe hellgrau */
  --series-1: #171717; --series-2: #b4b4b8;

  /* Kompatibilitäts-Aliase für bestehende Regeln (zeigen auf das System oben) */
  --bg: var(--color-background); --surface: var(--color-surface-raised); --surface-2: var(--color-surface);
  --text: var(--color-text); --text-2: var(--color-text-2); --muted: var(--color-text-muted);
  --border: var(--color-border); --border-strong: var(--color-border-strong);
  --brand: var(--color-primary); --brand-strong: #000000; --brand-soft: var(--color-selected); --brand-ink: var(--color-on-primary);
  --primary: var(--color-primary); --primary-ink: var(--color-on-primary); --pennant: var(--color-text);
  --info-bg: var(--color-surface);
  --ok: var(--color-success-ink); --ok-bg: var(--color-success-bg);
  --warn: var(--color-warning-ink); --warn-bg: var(--color-warning-bg);
  --off: var(--color-critical-ink); --off-bg: var(--color-critical-bg);
  --pos: var(--color-success); --neg: var(--color-critical);
  --navy: var(--color-primary); --navy-ink: var(--color-on-primary);
  --featured: var(--color-primary); --featured-2: var(--color-primary); --featured-ink: var(--color-on-primary);
  --buy: var(--color-primary); --buy-ink: var(--color-on-primary); --go: var(--color-primary); --go-ink: var(--color-on-primary);
  --check: var(--color-text); --cross: var(--color-text-faint);
  --sidebar: var(--color-surface); --sidebar-2: var(--color-hover); --sidebar-text: var(--color-text-2); --sidebar-muted: var(--color-text-faint); --sidebar-active: var(--color-surface-raised);
  --radius: var(--radius-medium);
  --color-surface-sunken: #f1f1f2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark; --color-surface-sunken: #222225;
    --color-background: #0c0c0d; --color-surface: #141415; --color-surface-raised: #18181a;
    --color-text: #f5f5f7; --color-text-2: #d1d1d6; --color-text-muted: #a1a1a6; --color-text-faint: #7c7c80;
    --color-border: #2a2a2d; --color-border-strong: #3a3a3d; --color-hover: #222224; --color-selected: #262628;
    --color-primary: #f5f5f7; --color-primary-hover: #ffffff; --color-primary-edge: #d1d1d6; --color-on-primary: #111111;
    --color-critical: #f87171; --color-critical-bg: #2a1515; --color-critical-ink: #fca5a5;
    --color-warning: #fbbf24; --color-warning-bg: #2a2110; --color-warning-ink: #fcd34d;
    --color-success: #4ade80; --color-success-bg: #10251a; --color-success-ink: #86efac;
    --color-info: #60a5fa;    --color-info-bg: #111c2e;    --color-info-ink: #93c5fd;
    --color-overlay: rgba(0, 0, 0, .6);
    --shadow-subtle: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-elevated: 2px 10px 28px rgba(0, 0, 0, .5);
    --shadow-overlay: 4px 24px 64px rgba(0, 0, 0, .6);
    --shadow-button: 2px 3px 0 rgba(0, 0, 0, .9), 6px 10px 24px rgba(0, 0, 0, .5);
    --shadow-button-hover: 2px 4px 0 rgba(0, 0, 0, .9), 8px 14px 28px rgba(0, 0, 0, .55);
    --shadow-button-active: 1px 1px 0 rgba(0, 0, 0, .9), 2px 4px 10px rgba(0, 0, 0, .4);
    --shadow-button-secondary: 1px 2px 0 rgba(0, 0, 0, .5);
    --focus-ring: 0 0 0 3px rgba(245, 245, 247, .22);
    --focus-outline: 3px solid #a1a1a6;
    --series-1: #f5f5f7; --series-2: #5a5a5e;
    --brand-strong: #ffffff;
  }
}

/* Dunkel auch bei ausdrücklicher Wahl in den persönlichen Einstellungen */
:root[data-theme="dark"] {
    color-scheme: dark; --color-surface-sunken: #222225;
    --color-background: #0c0c0d; --color-surface: #141415; --color-surface-raised: #18181a;
    --color-text: #f5f5f7; --color-text-2: #d1d1d6; --color-text-muted: #a1a1a6; --color-text-faint: #7c7c80;
    --color-border: #2a2a2d; --color-border-strong: #3a3a3d; --color-hover: #222224; --color-selected: #262628;
    --color-primary: #f5f5f7; --color-primary-hover: #ffffff; --color-primary-edge: #d1d1d6; --color-on-primary: #111111;
    --color-critical: #f87171; --color-critical-bg: #2a1515; --color-critical-ink: #fca5a5;
    --color-warning: #fbbf24; --color-warning-bg: #2a2110; --color-warning-ink: #fcd34d;
    --color-success: #4ade80; --color-success-bg: #10251a; --color-success-ink: #86efac;
    --color-info: #60a5fa;    --color-info-bg: #111c2e;    --color-info-ink: #93c5fd;
    --color-overlay: rgba(0, 0, 0, .6);
    --shadow-subtle: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-elevated: 2px 10px 28px rgba(0, 0, 0, .5);
    --shadow-overlay: 4px 24px 64px rgba(0, 0, 0, .6);
    --shadow-button: 2px 3px 0 rgba(0, 0, 0, .9), 6px 10px 24px rgba(0, 0, 0, .5);
    --shadow-button-hover: 2px 4px 0 rgba(0, 0, 0, .9), 8px 14px 28px rgba(0, 0, 0, .55);
    --shadow-button-active: 1px 1px 0 rgba(0, 0, 0, .9), 2px 4px 10px rgba(0, 0, 0, .4);
    --shadow-button-secondary: 1px 2px 0 rgba(0, 0, 0, .5);
    --focus-ring: 0 0 0 3px rgba(245, 245, 247, .22);
    --focus-outline: 3px solid #a1a1a6;
    --series-1: #f5f5f7; --series-2: #5a5a5e;
    --brand-strong: #ffffff;
}

* { box-sizing: border-box; }
body { margin: 0; }
h1 { margin: 0 0 .25rem; }
h2 { margin: 0 0 .75rem; }
h3 { margin: 1.25rem 0 .5rem; }
code.big { font-size: 1.2rem; letter-spacing: .05em; }

.club-name { font-weight: 500; color: var(--muted); }

.container { max-width: 1180px; margin: 0 auto; padding: 1.5rem 16px 3rem; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.pre { white-space: pre-wrap; }
.empty { color: var(--muted); text-align: center; padding: 1rem; }

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.grid2.wide-left { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid2 .span2 { grid-column: 1 / -1; }
.grid-zip { display: grid; grid-template-columns: 1fr 2fr; gap: .75rem; }
@media (max-width: 820px) {
  .grid2, .grid2.wide-left { grid-template-columns: 1fr; }
}

.event { display: grid; grid-template-columns: 170px 1fr auto; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.event:last-child { border-bottom: 0; }
.event p { margin: .25rem 0 0; }
@media (max-width: 600px) { .event { grid-template-columns: 1fr; gap: .25rem; } }

.creds { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: 1rem 0; }
.creds dt { color: var(--muted); }
.creds dd { margin: 0; }

.danger-zone .delete-form { margin-top: 1rem; display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.danger-zone .delete-form label { margin: 0; flex: 1 1 260px; }

.hero { text-align: center; padding: 3rem 0 2rem; }
.hero h1 { font-size: 2.2rem; }
.hero .lead { font-size: 1.15rem; max-width: 600px; margin: .5rem auto 1.5rem; }
.hero .actions { justify-content: center; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.features h3 { margin-top: 0; }

.invite { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: .75rem; align-items: end; }
.invite label { margin: 0; }
@media (max-width: 820px) { .invite { grid-template-columns: 1fr; } }

/* ---------- Gewinn / Verlust ---------- */
.pos { color: var(--pos); } .neg { color: var(--neg); }

/* ---------- Preiskarten ---------- */
.pricing { display: grid; grid-template-columns: repeat(var(--plan-cols, 4), minmax(0, 1fr)); align-items: stretch; margin: 1rem 0; }
@media (max-width: 1100px) { .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pricing { grid-template-columns: 1fr; } }
.plan { position: relative; display: flex; flex-direction: column; }
.ribbon { position: absolute; top: 14px; right: -34px; transform: rotate(45deg); background: var(--buy); color: var(--buy-ink); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 40px; z-index: 1; }
.plan-head { text-align: center; position: relative; }
.plan-tag { position: absolute; left: 50%; transform: translateX(-50%); text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; }
.plan-tag svg { width: 16px; height: 16px; }
.plan-price { margin-top: .9rem; display: flex; align-items: baseline; justify-content: center; gap: .6rem; }
.plan-price s { opacity: .6; font-weight: 600; font-size: 1.05rem; }
.plan-price strong { line-height: 1; font-variant-numeric: tabular-nums; }
.plan-period { margin-top: .4rem; }
.plan-features { list-style: none; margin: 0; padding: 1.4rem 1.4rem .5rem; flex: 1; }
.plan-features li { display: flex; gap: .6rem; align-items: flex-start; padding: .38rem 0; }
.plan-features svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; }
.plan-features li.no { color: var(--muted); }
.plan.featured .plan-features li.no { color: rgb(11 47 107 / .6); }
.info:not(.alert) { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; font-size: .62rem; font-weight: 700; font-style: normal; vertical-align: super; cursor: help; }
.plan-actions { padding: 1rem 1.4rem 1.4rem; text-align: center; display: flex; flex-direction: column; gap: .8rem; }
.plan-actions .btn { padding: .8rem 1rem; }
.plan.featured .btn.buy { background: var(--buy); border-color: var(--buy); }
.trial-link { font-weight: 700; text-decoration: underline; color: var(--navy); }
.plan.featured .trial-link { color: var(--featured-ink); }
.pricing-note { text-align: center; }
.pricing-section { margin-top: 3rem; }
.section-title { text-align: center; font-size: 1.8rem; margin-bottom: 2.4rem; }
.hero.compact { padding: 2rem 0 1rem; }

/* ---------- Registrierung: Tarifauswahl ---------- */
.plan-picker { display: grid; gap: .5rem; }
@media (max-width: 600px) { .plan-picker { grid-template-columns: repeat(2, 1fr); } }
.plan-option { position: relative; margin: 0; padding: .7rem .5rem; text-align: center; cursor: pointer; display: flex; flex-direction: column; gap: .15rem; }
.plan-option input { position: absolute; opacity: 0; pointer-events: none; }
.plan-option.featured::after { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: .65rem; }
.plan-option-name { font-weight: 700; }
.plan-option-price { font-size: .9rem; color: var(--muted); }
.plan-option-price small { font-size: .75rem; }
label.check input { width: auto; margin: .2rem 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Startseite & Angebotsfinder ---------- */
.landing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .landing { grid-template-columns: 1fr; gap: 2rem; } }
.checks { list-style: none; padding: 0; }
.checks li { position: relative; }
.checks li::before { content: ''; position: absolute; left: 2px; width: 12px; height: 6px; border-left: 2px solid var(--check); border-bottom: 2px solid var(--check); transform: rotate(-45deg); }
.preview { width: 100%; height: auto; }
.finder-wrap { position: sticky; }
.finder h2 { text-align: center; }
.finder-step + .finder-step { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.finder.js .finder-step + .finder-step { margin-top: 0; padding-top: 0; border-top: 0; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; }
.choice { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: .7rem; cursor: pointer; text-align: center; }
.choice input, .choice-row input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) { border-color: var(--go); background: color-mix(in srgb, var(--go) 10%, transparent); }
.choice-list { display: flex; flex-direction: column; gap: .6rem; }
.choice-row { position: relative; margin: 0; padding: .75rem 1rem; display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.choice-row .icon { width: 24px; height: 24px; }
.choice-row:has(input:checked) { border-color: var(--go); background: color-mix(in srgb, var(--go) 10%, transparent); }
input[type=range] { padding: 0; border: 0; background: none; }
.range-scale { display: flex; justify-content: space-between; }
.finder-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.4rem; }
.btn.go { background: var(--go); border-color: var(--go); color: var(--go-ink); border-radius: 999px; padding: .85rem 1rem; font-size: 1.02rem; }
.btn.go:hover { filter: brightness(1.06); }
.finder-progress { list-style: none; display: flex; justify-content: space-between; padding: 1.2rem .5rem 0; margin: 1.2rem 0 0; border-top: 1px solid var(--border); position: relative; font-size: .82rem; }
.finder-progress li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; flex: 1; color: var(--muted); }
.finder-progress li::before { content: ''; width: 14px; height: 14px; border-radius: 50%; opacity: .35; z-index: 1; }
.finder-progress li.on { color: var(--text); font-weight: 700; }
.finder-progress li.on::before { opacity: 1; }
.finder-progress li + li::after { content: ''; position: absolute; top: 6px; right: 50%; width: 100%; height: 2px; background: var(--border); }
.offer { max-width: 980px; margin: 0 auto; text-align: center; }
.offer .finder-progress { border: 0; max-width: 520px; margin: 0 auto 1.5rem; }
.offer h1 { font-size: 2rem; }
.offer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.5rem; text-align: left; margin-top: 2rem; align-items: start; }
@media (max-width: 760px) { .offer-grid { grid-template-columns: 1fr; } }
.offer-plan { transform: none; }

/* ---------- Finanzen ---------- */
.subnav a.active { border-color: var(--primary); }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 4px; margin-bottom: var(--space-3); }
.segmented label { margin: 0; text-align: center; min-height: 36px; display: grid; place-items: center; padding: 0 12px; border-radius: var(--radius-pill); cursor: pointer; position: relative; font-weight: var(--weight-semibold); color: var(--color-text-muted); }
.segmented input { position: absolute; opacity: 0; }
.tx-edit { display: flex; flex-direction: column; gap: .25rem; min-width: 180px; }
.tx-edit select { margin: 0; padding: .2rem .4rem; font-size: .82rem; }
.item-row { display: grid; grid-template-columns: 1fr 90px 130px; gap: .5rem; margin-bottom: .5rem; }
.item-row input { margin: 0; }
.sepa-options { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-top: 1rem; }
.sepa-options label { margin: 0; }
.pay-form { display: inline-flex; gap: .4rem; align-items: center; }
.pay-form input, .pay-form select { width: auto; margin: 0; }
.stat .num small { font-size: 1rem; color: var(--muted); }
.progress.slim { height: 6px; margin: .5rem 0 0; }
.progress.warn span { background: var(--warn); }
.plan-split { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.plan-split div { display: flex; flex-direction: column; }
.plan-split strong { font-size: 1.6rem; }
@media (max-width: 600px) { .plan-split { grid-template-columns: repeat(2, 1fr); } }
.perm-form { display: flex; flex-direction: column; gap: .1rem; }
.perm-form label { margin: 0; }

/* Diagramm */
.legend { display: flex; gap: 1rem; font-size: .85rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.sw.s1, .bar.s1 { background: var(--series-1); fill: var(--series-1); }
.sw.s2, .bar.s2 { background: var(--series-2); fill: var(--series-2); }
.chart-wrap { position: relative; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .baseline { stroke: var(--muted); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 11px; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .hit.on { fill: var(--text); fill-opacity: .05; }
.tooltip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .5rem .7rem; font-size: .82rem; box-shadow: var(--shadow-elevated); white-space: nowrap; z-index: 2; }

@media print {
  .topbar, .footer, .no-print, .subnav, .trial-bar { display: none !important; }
  body { background: #fff; color: #000; }
  .container { padding: 0; max-width: none; }
}
/* Rechnung im Portal (Bildschirm & Druck) */
.sheet { background: #fff; color: #111; max-width: 800px; margin: 0 auto; padding: 48px 56px; border: 1px solid var(--border); border-radius: 4px; font-size: 14px; }
.sheet h1 { font-size: 22px; }
.inv-head { display: flex; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.inv-recipient { margin-bottom: 2rem; min-height: 80px; }
.inv-meta { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.inv-items { margin-bottom: 1.5rem; }
.inv-items th { color: #555; }
.inv-items th, .inv-items td { border-color: #ddd; }
.inv-items tbody tr:hover { background: none; }
@media print { .sheet { border: 0; padding: 0; max-width: none; } }
@media (max-width: 600px) { .sheet { padding: 24px 18px; } .inv-head { flex-direction: column; } }

/* ---------- Zusatzmodul Nachhilfe ---------- */
/* Ampelfarben = Funktionsfarben des Designsystems */
:root { --light-green: var(--color-success); --light-yellow: var(--color-warning); --light-red: var(--color-critical); --light-blue: var(--color-info); --light-off: var(--color-border-strong); }
.ampel { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .88rem; white-space: nowrap; }
.lamp { display: inline-flex; gap: 3px; padding: 3px 5px; background: #171717; border-radius: var(--radius-pill); flex: 0 0 auto; }
.lamp i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3c; }
/* In Listen stehen die Ampeln untereinander auf einer Linie, der Text folgt linksbündig */
.list li > .ampel { min-width: 15rem; justify-content: flex-start; }
@media (max-width: 480px) { .list li > .ampel { min-width: 0; } }
.ampel-red .lamp i:nth-child(1) { background: var(--light-red); box-shadow: 0 0 6px var(--light-red); }
.ampel-yellow .lamp i:nth-child(2) { background: var(--light-yellow); box-shadow: 0 0 6px var(--light-yellow); }
.ampel-green .lamp i:nth-child(3) { background: var(--light-green); box-shadow: 0 0 6px var(--light-green); }
.ampel-blue .lamp i { background: var(--light-blue); opacity: .55; }
.ampel-grey .lamp { display: none; }
.ampel-red { color: var(--light-red); } .ampel-yellow { color: var(--warn); } .ampel-green { color: var(--pos); } .ampel-grey { color: var(--muted); font-weight: 500; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: .4rem; vertical-align: 0; }
.dot-green { background: var(--light-green); } .dot-yellow { background: var(--light-yellow); } .dot-red { background: var(--light-red); }
.stats.lights .stat.on { border-color: var(--primary); }
.period-bar { height: 4px; background: var(--light-off); border-radius: 999px; margin-top: .35rem; max-width: 220px; overflow: hidden; }
.period-bar span { display: block; height: 100%; background: currentColor; }
.period-bar.ampel-green { color: var(--light-green); } .period-bar.ampel-yellow { color: var(--light-yellow); } .period-bar.ampel-red { color: var(--light-red); } .period-bar.ampel-blue { color: var(--light-blue); }
.ampel-card { border-left: 3px solid var(--light-off); }
.ampel-card.ampel-green { border-left-color: var(--light-green); } .ampel-card.ampel-yellow { border-left-color: var(--light-yellow); } .ampel-card.ampel-red { border-left-color: var(--light-red); }
.ampel-card .num { color: inherit; }
.checklist { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 1rem; }
label.check.big { border: 1px solid var(--border); border-radius: 10px; padding: .6rem .75rem; margin: 0; cursor: pointer; }
label.check.big:has(input:checked) { border-color: var(--light-green); background: color-mix(in srgb, var(--light-green) 8%, transparent); }
label.check.big input { width: 18px; height: 18px; accent-color: var(--light-green); }
label.check.big span { display: flex; flex-direction: column; }
label.check.big small { color: var(--muted); font-weight: 400; }
.payer-toggle { max-width: 520px; }
.session-form { display: grid; grid-template-columns: 150px 90px 1fr 1fr 1fr; gap: .5rem; align-items: end; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.session-form label { margin: 0; }
.session-form .wide { grid-column: 1 / 5; }
@media (max-width: 900px) { .session-form { grid-template-columns: 1fr 1fr; } .session-form .wide { grid-column: 1 / -1; } }
.approval { border: 1px solid var(--border); border-radius: 10px; padding: .75rem 1rem; margin-bottom: .6rem; display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; align-items: center; }
.approval-head { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.approval .muted { grid-column: 1; }
.approval form { grid-column: 2; grid-row: 1 / 3; }
.new-approval summary { cursor: pointer; color: var(--primary); margin: .5rem 0; }
.period-info { margin-top: -.4rem; min-height: 1em; }
.tutoring-alert { border-left: 3px solid var(--light-yellow); }
.badge.tiny { font-size: .65rem; padding: 0 .35rem; }
.sr-only { margin: -1px; padding: 0; border: 0; clip-path: inset(50%); }
.addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.addon.active { border-color: var(--light-green); }
.addon-chip { font-weight: 700; border-radius: 999px; padding: .15rem .7rem; font-size: .85rem; white-space: nowrap; }
.section-title.small-title { font-size: 1.3rem; text-align: left; margin: 2rem 0 1rem; }
.addon-banner { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 1.2rem 1.5rem; margin: 1.5rem 0 1rem; }
.addon-banner h3 { margin: .4rem 0 .2rem; font-size: 1.2rem; }
.addon-banner p { margin: 0; color: var(--muted); max-width: 720px; }
.addon-banner-price { text-align: right; display: flex; flex-direction: column; }
.addon-banner-price strong { font-size: 1.8rem; }
.offer-addon { margin-top: .6rem; font-size: .9rem; border-radius: 6px; padding: .2rem .6rem; display: inline-block; font-weight: 600; }
.addon-teaser .lead { color: var(--muted); }
.addon-price strong { font-size: 1.5rem; }
.addon-count span { font-weight: 600; }
.stacked .grid2 { grid-template-columns: 1fr; }
.stacked .grid2 .grid-zip { grid-template-columns: 1fr 2fr; }
.stacked .checklist { grid-template-columns: 1fr; }
.stacked .segmented label { font-size: .88rem; }

/* ---------- Dokumente ---------- */
.docs-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1rem; align-items: start; }
.docs-layout > *, .grid2 > *, .grid4 > * { min-width: 0; }
/* Schmale Bildschirme: Ordner als waagerecht wischbare Leiste statt langer Liste */
@media (max-width: 960px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); }
  .folders { position: static; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .folders::-webkit-scrollbar { display: none; }
  .folders a { flex: 0 0 auto; white-space: nowrap; gap: 8px; scroll-snap-align: start; }
  .folders a.sub-folder { padding-left: 12px; }
}
.folders { display: flex; flex-direction: column; gap: 2px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: 6px; position: sticky; top: 1rem; }
.folders a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 38px; padding: 0 12px; border-radius: var(--radius-small); color: var(--color-text-2); font-size: .875rem; font-weight: var(--weight-medium); }
.folders a:hover { background: var(--color-hover); color: var(--color-text); text-decoration: none; }
.folders a span { color: var(--muted); font-variant-numeric: tabular-nums; }
.folders a.warn-link { color: var(--warn); }
.storage-meter { min-width: 220px; }
.file-badge { display: inline-grid; place-items: center; width: 34px; height: 40px; font-size: .6rem; font-weight: 800; margin-right: .6rem; vertical-align: middle; flex: 0 0 auto; }
.file-badge::after { content: attr(data-ext); }
.file-badge.big { width: 64px; height: 76px; font-size: .9rem; margin: 0 0 1rem; }
.doc-link { display: inline-flex; align-items: center; }
.dropzone { position: relative; display: block; border: 2px dashed var(--border); padding: 1.2rem; text-align: center; cursor: pointer; margin-bottom: 1rem; transition: border-color .15s, background .15s; }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; width: 100%; height: 100%; }
.dz-text { display: flex; flex-direction: column; gap: .2rem; font-weight: 400; }
.dz-text small { color: var(--muted); }
.doc-preview { width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.doc-preview-img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 8px; border: 1px solid var(--border); }
.no-preview { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.meta { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0; }
.meta dt { color: var(--muted); font-size: .88rem; }
.meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.template-grid .card { display: flex; flex-direction: column; }
.template-grid .card > .btn, .stack-form { margin-top: auto; }
.stack-form .btn { width: 100%; }
.receipt-link { font-weight: 600; }

/* Anwesenheit */
.attendance-tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.attendance-tools select { width: auto; margin: 0; }
.att-count { font-weight: 600; margin-right: auto; }
.att-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: .4rem 1.2rem; margin-bottom: 1rem; }
.att-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--border); }
.att-name { display: flex; flex-direction: column; font-weight: 500; }
.att-name small { color: var(--muted); font-weight: 400; }
.att-choice { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
.att-choice label { margin: 0; padding: .3rem .55rem; font-size: .8rem; cursor: pointer; position: relative; border-left: 1px solid var(--border); }
.att-choice label:first-child { border-left: 0; }
.att-choice input { position: absolute; opacity: 0; }
.att-choice label:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: -2px; }
.att-choice .a-yes:has(input:checked) { background: var(--ok-bg); color: var(--ok); font-weight: 700; }
.att-choice .a-exc:has(input:checked) { background: var(--warn-bg); color: var(--warn); font-weight: 700; }
.att-choice .a-no:has(input:checked) { background: var(--off-bg); color: var(--off); font-weight: 700; }

/* Protokoll */
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.plain[disabled] input, fieldset.plain[disabled] textarea, fieldset.plain[disabled] select { background: var(--bg); color: var(--text); opacity: 1; }
.meeting-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 .75rem; }
.meeting-grid .span2 { grid-column: span 2; }
@media (max-width: 820px) { .meeting-grid { grid-template-columns: 1fr 1fr; } }
.agenda { counter-reset: top; display: grid; gap: .75rem; margin-bottom: .75rem; }
.top { counter-increment: top; border: 1px solid var(--border); border-radius: 10px; padding: .75rem 1rem .25rem; }
.top-head { display: flex; gap: .6rem; align-items: center; margin-bottom: .6rem; }
.top-head input { margin: 0; font-weight: 600; }
.top-no { font-weight: 800; color: var(--primary); white-space: nowrap; }
.top-no::after { content: ' ' counter(top); }
.votes { display: grid; grid-template-columns: repeat(3, minmax(0, 120px)); gap: .5rem; }
.sticky-actions { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .6rem; box-shadow: var(--shadow-elevated); margin-bottom: 1rem; justify-content: flex-end; }
fieldset.plain[disabled] ::placeholder { color: transparent; }

/* ---------- Logo, Fotos, Unterlagen-Checkliste ---------- */
.club-logo { height: 30px; width: auto; max-width: 90px; object-fit: contain; border-radius: 6px; }
.club-hero { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.club-hero > div { flex: 1 1 auto; }
.club-logo-lg { height: 72px; width: auto; max-width: 180px; object-fit: contain; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); padding: 6px; }
.logo-quick input, .logo-card input, .logo-settings input[type=file], .upload-mini input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.logo-quick label, .logo-card label, .logo-settings label.btn, .upload-mini label { position: relative; margin: 0; cursor: pointer; }
.logo-card { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; border-style: dashed; }
@media (max-width: 700px) { .logo-card { grid-template-columns: 1fr; } }
.logo-card h2 { margin-bottom: .2rem; }
.logo-card p { margin: 0; }
.logo-placeholder { width: 72px; height: 72px; border-radius: 14px; display: grid; place-items: center; background: var(--info-bg); color: var(--primary); font-weight: 800; font-size: 1.3rem; letter-spacing: .04em; }
.logo-row { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.logo-row > div { flex: 1 1 260px; }
.avatar { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 30px; height: 30px; font-size: .72rem; margin-right: .55rem; vertical-align: middle; }
.avatar.big { width: 76px; height: 76px; font-size: 1.4rem; }
.member-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.member-head h1 { margin: 0; }
.member-head p { margin: .2rem 0 0; }
.member-link { display: inline-flex; align-items: center; }
.photo-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.photo-row label { margin: 0; flex: 1 1 240px; }
.choice-title { font-weight: 600; margin: 0 0 .4rem; }
.docs-choice label.check { margin-bottom: .35rem; }
.docs-choice label.check small { font-weight: 400; }
.checklist-table { display: grid; gap: .5rem; }
.req-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 10px; padding: .6rem .8rem; }
.req-row.done { background: color-mix(in srgb, var(--ok-bg) 60%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); }
.req-row.expired { border-color: var(--off); }
.req-main { display: flex; gap: .7rem; align-items: center; min-width: 0; flex: 1 1 300px; }
.req-icon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border); font-weight: 800; flex: 0 0 auto; }
.req-row.done .req-icon { background: var(--ok); border-color: var(--ok); color: #fff; }
.req-row.expired .req-icon { background: var(--off); border-color: var(--off); color: #fff; }
.req-actions { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.docs-alert { border-left: 6px solid var(--warn); }
.doc-type-add { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; margin-top: 1rem; }
.doc-type-add label { margin: 0; flex: 1 1 200px; }

/* =====================================================================
   Grundlagen
   ===================================================================== */
body { font: var(--weight-regular) var(--text-base)/var(--leading-body) var(--font); letter-spacing: -0.011em; color: var(--color-text); background: var(--color-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3 { font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--color-text); text-wrap: balance; }
h1 { font-size: var(--text-xl); line-height: var(--leading-tight); font-weight: 650; }
h2 { font-size: var(--text-md); line-height: var(--leading-snug); letter-spacing: -0.015em; }
h3 { font-size: var(--text-base); line-height: var(--leading-snug); letter-spacing: -0.01em; }
p { text-wrap: pretty; }
a { color: var(--color-text); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; }
/* Links im Fließtext unterstrichen; Namen in Listen und Tabellen erst beim Überfahren */
.prose a, p a, dd a, .muted a, .alert a { text-decoration: underline; text-decoration-color: var(--color-border-strong); }
.prose a:hover, p a:hover, dd a:hover, .muted a:hover, .alert a:hover { text-decoration-color: currentColor; }
td a, .list a { font-weight: var(--weight-medium); }
code, .mono { font-family: var(--font-mono); font-size: .92em; }
code { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; padding: 1px 6px; }
:focus-visible { outline: var(--focus-outline); outline-offset: 3px; }
::selection { background: #111111; color: #ffffff; }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }
.num, td.num, .stat .num { font-variant-numeric: tabular-nums; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }

/* =====================================================================
   Seitengerüst: helle Seitenleiste, schlanke Kopfzeile, ruhige Fläche
   ===================================================================== */
body.has-shell { background: var(--color-background); }
.shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--color-surface); border-right: 1px solid var(--color-border); color: var(--color-text-2); display: flex; flex-direction: column; padding: var(--space-4) var(--space-3); gap: var(--space-3); z-index: var(--z-sidebar); scrollbar-width: thin; }
.side-brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.side-brand:hover { text-decoration: none; }
.side-brand .brandmark { width: 34px; height: 34px; flex: 0 0 auto; object-fit: contain; }
/* Vereinslogo deutlich größer, damit es gut erkennbar ist */
.side-brand .club-logo, .club-monogram { width: 60px; height: 60px; flex: 0 0 auto; object-fit: contain; }
.club-monogram { display: grid; place-items: center; border-radius: var(--radius-medium); background: var(--color-primary); color: var(--color-on-primary); font-weight: var(--weight-bold); font-size: 1.05rem; letter-spacing: .02em; }
.side-brand .club-logo { background: #ffffff; border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: 4px; }
/* Lange Vereinsnamen dürfen zweizeilig sein */
.side-brand strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.side-brand span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.side-brand strong { font-size: .9375rem; font-weight: var(--weight-semibold); letter-spacing: -0.015em; overflow: hidden; }
.side-brand small { color: var(--color-text-faint); font-size: var(--text-xs); }
.side-nav { display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.side-group { display: flex; flex-direction: column; gap: 2px; }
.side-label { font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-faint); padding: 0 var(--space-3) var(--space-1); }
.side-nav a { display: flex; align-items: center; gap: var(--space-3); min-height: 38px; padding: 0 var(--space-3); border-radius: var(--radius-small); color: var(--color-text-2); font-size: .875rem; font-weight: var(--weight-medium); position: relative; transition: background-color var(--transition-fast), color var(--transition-fast); }
.side-nav a:hover { background: var(--color-hover); color: var(--color-text); text-decoration: none; }
.side-nav a.active { background: var(--color-surface-raised); color: var(--color-text); font-weight: var(--weight-semibold); box-shadow: 0 0 0 1px var(--color-border), var(--shadow-subtle); }
.side-nav a.active .ui-icon { opacity: 1; }
.side-nav a em { margin-left: auto; font-size: 11px; font-weight: var(--weight-semibold); color: var(--color-text-2); background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); line-height: 18px; font-variant-numeric: tabular-nums; }
.ui-icon { width: 18px; height: 18px; flex: 0 0 auto; opacity: .78; }
.side-foot { border-top: 1px solid var(--color-border); padding-top: var(--space-3); display: grid; gap: var(--space-2); }
.side-user { display: flex; gap: var(--space-3); align-items: center; padding: 0 var(--space-2); }
.side-user span:last-child { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.side-user strong { color: var(--color-text); font-size: .875rem; font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user small { color: var(--color-text-faint); font-size: var(--text-xs); }
.avatar { background: var(--color-selected); color: var(--color-text); font-weight: var(--weight-semibold); }
.side-user .avatar.xs { background: var(--color-primary); color: var(--color-on-primary); }
.avatar.xs { width: 32px; height: 32px; font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: .02em; }
.side-actions { display: flex; flex-wrap: wrap; gap: 2px; }
.side-actions a, .side-actions button.link { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; color: var(--color-text-2); font-size: var(--text-sm); font-weight: var(--weight-medium); padding: 0 var(--space-2); border-radius: var(--radius-small); text-decoration: none; }
.side-actions a:hover, .side-actions button.link:hover { background: var(--color-hover); color: var(--color-text); text-decoration: none; }
.side-actions .ui-icon { width: 16px; height: 16px; }
.main { min-width: 0; display: flex; flex-direction: column; }
.appbar { display: flex; align-items: center; gap: var(--space-3); height: 60px; padding: 0 max(var(--space-9), env(safe-area-inset-right, 0px)) 0 var(--space-9); border-bottom: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-background) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); position: sticky; top: 0; z-index: var(--z-sticky); }
.appbar-title { font-weight: var(--weight-semibold); font-size: .9375rem; letter-spacing: -0.015em; }
.appbar-date { margin-left: auto; color: var(--color-text-muted); font-size: var(--text-sm); }
.has-shell .container { max-width: 1280px; width: 100%; margin: 0; padding: var(--space-8) var(--space-9) var(--space-10); }
.has-shell .footer { margin-top: auto; }
.scrim { position: fixed; inset: 0; background: var(--color-overlay); z-index: var(--z-scrim); }
.menu-toggle { display: none; align-items: center; justify-content: center; flex-direction: column; gap: 4px; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface-raised); cursor: pointer; box-shadow: var(--shadow-button-secondary); }
.menu-toggle span { display: block; width: 18px; height: 1.5px; margin: 0; border-radius: 2px; }
.menu-toggle:hover { background: var(--color-hover); }
@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); transform: translateX(-100%); transition: transform var(--transition-normal); box-shadow: var(--shadow-overlay); padding-top: max(var(--space-4), env(safe-area-inset-top, 0px)); }
  body.nav-open .sidebar { transform: none; }
  .menu-toggle { display: inline-flex; }
  .side-nav a { min-height: 44px; }
  .appbar { padding-left: var(--space-4); padding-right: var(--space-4); height: 64px; }
  .appbar-date { display: none; }
  .has-shell .container { padding: var(--space-6) var(--space-4) var(--space-9); }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* Öffentliche Kopfzeile */
.topbar { display: flex; align-items: center; background: var(--color-background); border-bottom: 1px solid var(--color-border); padding: 0 max(var(--space-6), env(safe-area-inset-left, 0px)); height: 68px; gap: var(--space-6); flex-wrap: nowrap; position: sticky; top: 0; z-index: var(--z-sticky); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: var(--weight-bold); font-size: 1.0625rem; letter-spacing: -0.03em; color: var(--color-text); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand .brandmark { width: 32px; height: 32px; }
.publicnav { margin-left: auto; display: flex; align-items: center; gap: var(--space-6); font-size: .875rem; font-weight: var(--weight-medium); }
.publicnav a:not(.btn) { color: var(--color-text-2); }
.publicnav a:not(.btn):hover { color: var(--color-text); text-decoration: none; }
body.public .container { max-width: 1200px; }
@media (max-width: 820px) {
  .topbar { padding: 0 var(--space-4); gap: var(--space-3); height: 60px; }
  .publicnav { gap: var(--space-4); }
  .publicnav a[href="/#funktionen"], .publicnav a[href="/kontakt"] { display: none; }
}
@media (max-width: 480px) { .publicnav a[href="/preise"] { display: none; } .publicnav .btn { min-height: var(--control-h-s); padding: 0 var(--space-4); font-size: .875rem; } .brand { font-size: 1rem; } }

/* =====================================================================
   Buttons
   Primär: schwarze Pille mit festem Schatten nach rechts unten (wirkt
   wie ein physisches Bedienelement). Sekundär: weiß, dezent umrandet.
   Größen: .small 40 px · Standard 48 px · .large 64 px
   ===================================================================== */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--control-h-m); height: auto; padding: 0 var(--space-6);
  font: inherit; font-size: .9375rem; font-weight: var(--weight-semibold); letter-spacing: -0.015em; line-height: 1.2; white-space: nowrap; text-decoration: none;
  color: var(--color-text); background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-button-secondary); cursor: pointer; user-select: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}
.btn:hover { background: var(--color-hover); border-color: #c7c7cc; text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: var(--focus-outline); outline-offset: 4px; }
.btn svg, .btn .ui-icon { width: 18px; height: 18px; flex: 0 0 auto; opacity: 1; }

.btn.primary, .btn.buy, .btn.go {
  background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary-edge);
  box-shadow: var(--shadow-button);
}
.btn.primary:hover, .btn.buy:hover, .btn.go:hover { background: var(--color-primary-hover); border-color: var(--color-primary-edge); transform: translateY(-2px); box-shadow: var(--shadow-button-hover); filter: none; }
.btn.primary:active, .btn.buy:active, .btn.go:active { transform: translateY(1px); box-shadow: var(--shadow-button-active); }

.btn.small { min-height: var(--control-h-s); padding: 0 var(--space-4); font-size: .875rem; gap: 8px; }
.btn.small svg, .btn.small .ui-icon { width: 16px; height: 16px; }
.btn.small.primary, .btn.small.buy, .btn.small.go { box-shadow: 1px 2px 0 rgba(0, 0, 0, .85), 3px 6px 14px rgba(0, 0, 0, .12); }
.btn.small.primary:hover, .btn.small.buy:hover, .btn.small.go:hover { box-shadow: 1px 3px 0 rgba(0, 0, 0, .85), 4px 9px 18px rgba(0, 0, 0, .16); }
.btn.large, .btn.go { min-height: var(--control-h-l); padding: 0 34px; font-size: 1.0625rem; gap: 12px; }
.btn.large svg { width: 20px; height: 20px; }
.btn.full { width: 100%; }
.btn.icon { width: var(--control-h-s); min-height: var(--control-h-s); padding: 0; }

.btn.danger { border-color: color-mix(in srgb, var(--color-critical) 35%, var(--color-border-strong)); background: var(--color-surface-raised); }
.btn.danger:hover { background: var(--color-critical-bg); border-color: color-mix(in srgb, var(--color-critical) 55%, var(--color-border-strong)); }

button.link, .btn.link { display: inline; min-height: 0; height: auto; padding: 0; border: 0; background: none; box-shadow: none; color: var(--color-text); font: inherit; font-weight: var(--weight-medium); text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; cursor: pointer; transform: none; }
button.link:hover, .btn.link:hover { text-decoration-color: currentColor; background: none; transform: none; }

.btn:disabled, .btn.disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; pointer-events: none; }
/* Ladezustand: Spinner vor der Beschriftung, solange die Anfrage läuft */
.btn.is-loading { pointer-events: none; }
.btn.is-loading::before { content: ''; width: 16px; height: 16px; flex: 0 0 auto; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin .7s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transition: none; transform: none; }
  .btn.is-loading::before { animation-duration: 2.4s; }
}

/* =====================================================================
   Formulare
   ===================================================================== */
label { display: block; font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--color-text); margin-bottom: var(--space-4); letter-spacing: -0.005em; }
input, select, textarea { display: block; width: 100%; margin-top: 6px; min-height: var(--input-h); padding: 10px 14px; font: inherit; font-size: .9375rem; font-weight: var(--weight-regular); color: var(--color-text); background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-small); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
textarea { min-height: 96px; line-height: var(--leading-body); }
select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; }
input[type=checkbox], input[type=radio] { display: inline-block; width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; accent-color: var(--color-primary); vertical-align: middle; }
input[type=file] { padding: 8px; min-height: 0; }
input[type=color] { padding: 4px; width: 56px; }
input::placeholder, textarea::placeholder { color: var(--color-text-faint); }
input:hover, select:hover, textarea:hover { border-color: #c7c7cc; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-text); box-shadow: var(--focus-ring); }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--color-critical); }
input:user-invalid:focus, textarea:user-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-critical) 18%, transparent); }
input:disabled, select:disabled, textarea:disabled { background: var(--color-surface); color: var(--color-text-muted); cursor: not-allowed; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--space-3); }
legend { font-weight: var(--weight-semibold); font-size: .9375rem; margin-bottom: var(--space-3); }
.sub-fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: var(--space-5) var(--space-5) var(--space-2); background: var(--color-surface); }
form.inline { display: inline-block; margin: 0; }
form.inline select { display: inline-block; width: auto; margin: 0; min-height: var(--control-h-s); padding-top: 6px; padding-bottom: 6px; }
.filters, .search { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); align-items: center; }
.search { margin: 0; }
.filters input, .filters select, .search input { width: auto; flex: 1 1 200px; margin: 0; }
label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: var(--weight-regular); font-size: .9375rem; }
label.check input { margin-top: 2px; flex: 0 0 auto; }
.field-error { color: var(--color-critical-ink); font-size: var(--text-sm); margin-top: 6px; }

/* =====================================================================
   Flächen und Gruppen
   ===================================================================== */
.page-head { margin-bottom: var(--space-7); }
.page-head h1 { margin: 0 0 6px; }
.page-head .muted { max-width: 72ch; margin: 0; font-size: .9375rem; }
.page-head.row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.card { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: var(--space-6); margin-bottom: var(--space-5); box-shadow: none; }
.card.narrow { max-width: 440px; margin: var(--space-10) auto; padding: var(--space-8); box-shadow: var(--shadow-elevated); border-color: transparent; }
.card.narrow.wide { max-width: 660px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.card-head h2 { margin: 0; }
details.card summary { cursor: pointer; font-weight: var(--weight-semibold); list-style-position: outside; }
details.card[open] summary { margin-bottom: var(--space-4); }
.grid2 { gap: var(--space-5); }

/* Kennzahlen: eine zusammenhängende Leiste, große ruhige Zahlen */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-medium); overflow: hidden; margin-bottom: var(--space-6); }
.stat { display: flex; flex-direction: column; border: 0; border-radius: 0; border-right: 1px solid var(--color-border); padding: var(--space-5) var(--space-6); background: transparent; color: var(--color-text); }
.stat:last-child { border-right: 0; }
.stat .label { order: -1; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.stat .num { font-size: 1.75rem; font-weight: var(--weight-semibold); letter-spacing: -0.03em; line-height: 1.15; margin: 6px 0 2px; }
.stat .num.small-num { font-size: 1.25rem; }
.stat .sub { font-size: var(--text-sm); color: var(--color-text-muted); }
a.stat { transition: background-color var(--transition-fast); }
a.stat:hover { background: var(--color-surface); text-decoration: none; }
.stats.lights .stat.on { box-shadow: inset 0 -2px 0 var(--color-primary); }
@media (max-width: 700px) { .stat { border-right: 0; border-bottom: 1px solid var(--color-border); } .stat:last-child { border-bottom: 0; } }

/* =====================================================================
   Tabellen
   ===================================================================== */
.table-wrap { position: relative; overflow-x: auto; margin: 0 calc(var(--space-6) * -1); padding: 0 var(--space-6); }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { text-align: left; vertical-align: top; }
th { font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); background: transparent; border-bottom: 1px solid var(--color-border); padding: 10px 12px; white-space: nowrap; }
td { padding: 14px 12px; border-bottom: 1px solid var(--color-border); }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr { transition: background-color var(--transition-fast); }
tbody tr:hover { background: var(--color-surface); }
tbody tr:last-child td { border-bottom: 0; }
/* Handy: Tabellen mit .stack-mobile werden zu kompakten Karten (Name oben, Werte mit Beschriftung darunter) */
@media (max-width: 640px) {
  table.stack-mobile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack-mobile, table.stack-mobile tbody, table.stack-mobile tr, table.stack-mobile td { display: block; width: 100%; }
  table.stack-mobile tr { position: relative; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
  table.stack-mobile tbody tr:last-child { border-bottom: 0; }
  table.stack-mobile tbody tr:hover { background: transparent; }
  table.stack-mobile td { border: 0; padding: 3px 0; text-align: left; }
  table.stack-mobile td:first-child { padding-bottom: var(--space-2); padding-right: 96px; }
  table.stack-mobile td[data-label] { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: var(--space-3); font-size: .875rem; }
  table.stack-mobile td[data-label]::before { content: attr(data-label); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-medium); padding-top: 2px; }
  table.stack-mobile td.num { text-align: left; }
  table.stack-mobile td.stack-status { position: absolute; top: var(--space-4); right: 0; width: auto; display: block; padding: 0; }
  table.stack-mobile td.stack-status::before { content: none; }
  .table-wrap:has(table.stack-mobile) { overflow: visible; margin: 0; padding: 0; }
}

/* =====================================================================
   Statusmarken und Hinweise
   Farbe nur mit Text: jede Marke trägt ihre Bedeutung auch als Wort.
   ===================================================================== */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 18px; background: var(--color-surface); color: var(--color-text-2); border: 1px solid var(--color-border); white-space: nowrap; }
.badge.ok, .badge.warn, .badge.off { background: var(--color-surface-raised); color: var(--color-text); }
.badge.ok::before, .badge.warn::before, .badge.off::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.badge.ok::before { background: var(--color-success); }
.badge.warn::before { background: var(--color-warning); }
.badge.off::before { background: var(--color-critical); }
.badge.admin { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }

.alert { position: relative; padding: 14px 16px 14px 40px; border-radius: var(--radius-small); margin-bottom: var(--space-5); font-size: .9375rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); }
.alert::before { content: ''; position: absolute; left: 17px; top: 20px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-text-muted); }
.alert.success { background: var(--color-success-bg); border-color: color-mix(in srgb, var(--color-success) 22%, transparent); }
.alert.success::before { background: var(--color-success); }
.alert.error { background: var(--color-critical-bg); border-color: color-mix(in srgb, var(--color-critical) 25%, transparent); }
.alert.error::before { background: var(--color-critical); }
.alert.warn { background: var(--color-warning-bg); border-color: color-mix(in srgb, var(--color-warning) 28%, transparent); }
.alert.warn::before { background: var(--color-warning); }
.alert.info::before { background: var(--color-info); }

/* Reiter innerhalb einer Seite */
.subnav { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--color-border); gap: var(--space-1); margin-bottom: var(--space-7); }
.subnav a { font-size: .875rem; font-weight: var(--weight-medium); padding: 10px 12px; color: var(--color-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a:hover { color: var(--color-text); text-decoration: none; }
.subnav a.active { color: var(--color-text); border-bottom-color: var(--color-text); font-weight: var(--weight-semibold); }
@media (min-width: 961px) { .has-shell .finance-subnav { display: none; } }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; gap: var(--space-4); padding: 12px 0; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.list li:last-child { border-bottom: 0; }
.progress { height: 6px; background: var(--color-hover); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: var(--space-4); }
.progress span { display: block; height: 100%; background: var(--color-primary); border-radius: inherit; }

.trial-bar { display: flex; gap: var(--space-4); align-items: center; justify-content: flex-start; flex-wrap: wrap; padding: 10px var(--space-9); font-size: .875rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); color: var(--color-text-2); }
.trial-bar.expired { background: var(--color-critical-bg); color: var(--color-text); }
@media (max-width: 960px) { .trial-bar { padding: 10px var(--space-4); } }

.footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-5) var(--space-9); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-sm); text-align: left; }
.footer nav { display: flex; gap: var(--space-5); }
.footer a { color: var(--color-text-muted); }
.footer a:hover { color: var(--color-text); }
body.public .footer { max-width: 1200px; margin: var(--space-9) auto 0; padding-left: var(--space-4); padding-right: var(--space-4); }
@media (max-width: 960px) { .footer { padding: var(--space-5) var(--space-4); } }

/* Kleinere Bausteine */
.club-hero .club-logo-lg { height: 96px; max-width: 240px; border-radius: var(--radius-medium); padding: 6px; }
.file-badge { border-radius: 4px 10px 4px 4px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); letter-spacing: .02em; }
.req-row, .approval, .top, .att-row { border-radius: var(--radius-small); }
.event-date { color: var(--color-text); }
.reply { border-left: 2px solid var(--color-text); }
.dropzone { border-radius: var(--radius-medium); border-color: var(--color-border-strong); background: var(--color-surface); }
.dropzone:hover, .dropzone.over { border-color: var(--color-text); background: var(--color-hover); }
.segmented label:has(input:checked) { background: var(--color-surface-raised); color: var(--color-text); box-shadow: 0 0 0 1px var(--color-border), var(--shadow-subtle); }
.segmented label:has(input:focus-visible) { outline: var(--focus-outline); outline-offset: 2px; }
.folders a.active { background: var(--color-surface-raised); color: var(--color-text); font-weight: var(--weight-semibold); box-shadow: 0 0 0 1px var(--color-border), var(--shadow-subtle); }
.addon-chip { background: var(--color-selected); color: var(--color-text); }
.docs-alert, .tutoring-alert { border-left-width: 1px; }

/* ---------- Startseite ---------- */
.landing { padding: var(--space-10) 0 var(--space-8); gap: var(--space-10); }
.landing h1 { font-size: var(--text-display); font-weight: 680; letter-spacing: -0.04em; line-height: 1.02; margin-bottom: var(--space-5); }
.landing .lead { font-size: 1.1875rem; line-height: 1.5; color: var(--color-text-muted); max-width: 44ch; letter-spacing: -0.015em; }
.checks { margin: var(--space-6) 0; }
.checks li { padding: 6px 0 6px 30px; color: var(--color-text-2); }
.checks li::before { top: 13px; border-color: var(--color-text); }
.preview { border-radius: var(--radius-large); border: 1px solid var(--color-border); box-shadow: var(--shadow-elevated); margin-top: var(--space-6); }
.finder-wrap { top: 92px; }
.finder { border-radius: var(--radius-large); border: 1px solid var(--color-border); box-shadow: var(--shadow-elevated); padding: var(--space-7) var(--space-7) var(--space-6); background: var(--color-surface-raised); }
.finder h2 { color: var(--color-text); font-size: var(--text-lg); letter-spacing: -0.025em; margin-bottom: var(--space-5); }
.choice-grid { gap: var(--space-3); }
.choice { border: 1px solid var(--color-border-strong); border-radius: var(--radius-medium); font-weight: var(--weight-semibold); padding: var(--space-6) var(--space-2) var(--space-5); transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast); }
.choice:hover, .choice-row:hover { border-color: var(--color-text); }
.choice .icon { color: var(--color-text); width: 40px; height: 40px; }
.choice:has(input:checked), .choice-row:has(input:checked) { border-color: var(--color-text); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-text); }
.choice:has(input:focus-visible), .choice-row:has(input:focus-visible) { outline: var(--focus-outline); outline-offset: 3px; }
.choice-row { border: 1px solid var(--color-border-strong); border-radius: var(--radius-medium); font-weight: var(--weight-semibold); justify-content: flex-start; min-height: var(--control-h-m); }
.choice-row .icon { color: var(--color-text); }
input[type=range] { accent-color: var(--color-primary); }
.btn.go { flex: 1; max-width: 400px; }
.finder-progress li::before { background: var(--color-border-strong); }
.finder-progress li.on::before { background: var(--color-text); box-shadow: 0 0 0 3px var(--color-surface-raised), 0 0 0 5px var(--color-text); }
.features .card h3 { font-size: var(--text-md); margin-top: 0; }
.hero h1 { font-weight: 680; letter-spacing: -0.035em; }
.hero .lead { color: var(--color-text-muted); }
.kicker { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 var(--space-4); }

/* ---------- Preise: weiße Karten, empfohlener Tarif schwarz hinterlegt ---------- */
.pricing { gap: var(--space-4); }
.plan { overflow: visible; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-large); box-shadow: none; transform: none; }
.plan-head { background: transparent; color: var(--color-text); border-bottom: 1px solid var(--color-border); border-radius: 0; margin-top: var(--space-7); padding: var(--space-5) var(--space-5) var(--space-6); }
.plan-tag { top: -16px; background: var(--color-surface-raised); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); box-shadow: none; padding: 6px 16px; font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); }
.plan-price strong { font-weight: 680; font-size: 2.5rem; letter-spacing: -0.04em; }
.plan-price s { color: var(--color-text-faint); }
.plan-period { color: var(--color-text-muted); }
.plan-features li { font-size: .875rem; color: var(--color-text-2); }
.plan-features li.yes svg { color: var(--color-text); }
.plan-features li.no, .plan.featured .plan-features li.no { color: var(--color-text-faint); }
.plan-features li.no svg { color: var(--color-text-faint); }
.plan.featured { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); box-shadow: var(--shadow-elevated); transform: none; }
.plan.featured .plan-head { color: var(--color-on-primary); border-bottom-color: color-mix(in srgb, var(--color-on-primary) 16%, transparent); padding-top: var(--space-6); }
.plan.featured .plan-head::before { content: 'Empfohlen'; display: block; margin: 0 0 var(--space-2); font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--color-on-primary) 70%, transparent); }
.plan.featured .plan-tag { background: var(--color-primary); color: var(--color-on-primary); border-color: color-mix(in srgb, var(--color-on-primary) 30%, transparent); }
.plan.featured .plan-period, .plan.featured .plan-price s { color: color-mix(in srgb, var(--color-on-primary) 65%, transparent); }
.plan.featured .plan-features li { color: color-mix(in srgb, var(--color-on-primary) 88%, transparent); }
.plan.featured .plan-features li.yes svg { color: var(--color-on-primary); }
.plan.featured .plan-features li.no, .plan.featured .plan-features li.no svg { color: color-mix(in srgb, var(--color-on-primary) 45%, transparent); }
.plan.featured .plan-price { margin-top: var(--space-1); }
.plan .btn.buy:not(.featured .btn) { background: var(--color-primary); border-color: var(--color-primary-edge); }
/* Auf schwarzer Karte: weißer Hauptknopf mit hellem Schattenrand */
.plan.featured .btn.buy, .plan.featured .btn.primary { background: var(--color-on-primary); color: var(--color-primary); border-color: var(--color-on-primary); box-shadow: 2px 3px 0 rgba(255, 255, 255, .28), 6px 10px 24px rgba(0, 0, 0, .35); }
.plan.featured .btn.buy:hover, .plan.featured .btn.primary:hover { background: #f0f0f0; box-shadow: 2px 4px 0 rgba(255, 255, 255, .3), 8px 14px 28px rgba(0, 0, 0, .4); }
.plan.featured .btn:not(.buy):not(.primary) { background: transparent; color: var(--color-on-primary); border-color: color-mix(in srgb, var(--color-on-primary) 35%, transparent); box-shadow: none; }
.trial-link, .plan.featured .trial-link { color: inherit; font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 3px; }
.ribbon, .plan.featured .ribbon { display: none; }
.plan.current { outline: 2px solid var(--color-text); outline-offset: 3px; }
.plan.featured.current { outline-color: var(--color-text); }
.info:not(.alert) { background: var(--color-text-faint); color: #ffffff; }
.plan.featured .info:not(.alert) { background: color-mix(in srgb, var(--color-on-primary) 40%, transparent); color: var(--color-primary); }
.addon-banner { border: 1px solid var(--color-border); border-radius: var(--radius-large); background: var(--color-surface); }
.addon-banner-price strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.offer-addon { background: var(--color-surface); color: var(--color-text); }
.plan-option { border: 1px solid var(--color-border-strong); border-radius: var(--radius-medium); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.plan-option:hover { border-color: var(--color-text); }
.plan-option:has(input:checked) { border-color: var(--color-text); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-text); }
.plan-option:has(input:focus-visible) { outline: var(--focus-outline); outline-offset: 3px; }
.plan-option.featured::after { content: 'Empfohlen'; background: var(--color-primary); color: var(--color-on-primary); border-radius: var(--radius-pill); padding: 1px 8px; font-weight: var(--weight-semibold); }
.paypal-form { display: flex; gap: var(--space-4); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--space-2); }
.paypal-form label, .paypal-form fieldset { margin: 0; }
.paypal-form .months { display: flex; gap: var(--space-4); border: 0; padding: 0; }
/* PayPal-Knopf in den Markenfarben von PayPal (Vorgabe des Zahlungsanbieters) */
.btn.paypal-btn:hover { background: #f5b82b; box-shadow: 2px 4px 0 #c9951f, 8px 14px 28px rgba(0, 0, 0, .16); }
.paypal-btn span { font-style: italic; font-weight: var(--weight-bold); color: #003087; }

/* ---------- Abrechnungszeitraum (Monatlich / Jährlich) ---------- */
.billing-toggle { display: inline-flex; margin: 0 auto var(--space-7); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); padding: 4px; position: relative; left: 50%; transform: translateX(-50%); }
.billing-toggle label { margin: 0; min-height: var(--control-h-s); padding: 0 var(--space-5); border-radius: var(--radius-pill); cursor: pointer; font-size: .875rem; font-weight: var(--weight-semibold); color: var(--color-text-muted); transition: background-color var(--transition-fast), color var(--transition-fast); position: relative; display: inline-flex; gap: .45rem; align-items: center; }
.billing-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.billing-toggle label:has(input:checked) { background: var(--color-surface-raised); color: var(--color-text); box-shadow: 0 0 0 1px var(--color-border), var(--shadow-subtle); }
.billing-toggle label:has(input:focus-visible) { outline: var(--focus-outline); outline-offset: 2px; }
.billing-toggle .save { font-size: 11px; font-weight: var(--weight-semibold); background: var(--color-primary); color: var(--color-on-primary); border-radius: var(--radius-pill); padding: 1px 7px; }
.pricing-wrap .bill-y { display: none; }
.pricing-wrap:has(.billing-toggle input[value=jaehrlich]:checked) .bill-y { display: revert; }
.pricing-wrap:has(.billing-toggle input[value=jaehrlich]:checked) .bill-m { display: none; }
.pricing-wrap:has(.billing-toggle input[value=jaehrlich]:checked) .plan-price.bill-y, .pricing-wrap:has(.billing-toggle input[value=jaehrlich]:checked) .plan-actions .btn.bill-y { display: flex; }
.plan-period { font-size: .86rem; opacity: .9; }
.plan-actions form { display: grid; gap: .5rem; }
.plan-features li.storage { font-weight: 500; }
.terms-note { margin: var(--space-7) auto 0; max-width: 820px; font-size: var(--text-sm); color: var(--color-text-muted); border-top: 1px solid var(--color-border); padding-top: var(--space-5); }
.terms-note p { margin: .3rem 0; }
.term-box { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.term-box p { margin: .2rem 0; }

/* ---------- Paket & Hosting: Balken für Speicher und Mitglieder ---------- */
.meter { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--color-hover); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--color-primary); border-radius: inherit; }
.meter.warn > span { background: var(--color-warning); }
.meter.crit > span { background: var(--color-critical); }
.meter-row { display: flex; justify-content: space-between; gap: .5rem; font-size: .76rem; font-variant-numeric: tabular-nums; }
.side-plan { display: grid; gap: 6px; margin: 0; padding: var(--space-3); border-radius: var(--radius-medium); background: var(--color-surface-raised); border: 1px solid var(--color-border); color: var(--color-text-2); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.side-plan:hover { text-decoration: none; border-color: var(--color-border-strong); box-shadow: var(--shadow-subtle); }
.side-plan-head { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; margin-bottom: 2px; }
.side-plan-head strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.side-plan-head em { font-style: normal; font-size: 11px; font-weight: var(--weight-semibold); color: var(--color-on-primary); background: var(--color-primary); padding: 1px 8px; border-radius: var(--radius-pill); }
.side-plan .meter-row { color: var(--color-text-faint); }
.side-plan .meter-row span:last-child { color: var(--color-text-2); }
.side-plan .meter { height: 4px; }
.side-nav a em { font-style: normal; }

/* Gesperrter Bereich im Gratis-Tarif */
.locked-card { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }
.locked-icon { width: 48px; height: 48px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.locked-icon svg { width: 24px; height: 24px; }
.locked-card h2 { margin-top: 0; }
@media (max-width: 560px) { .locked-card { grid-template-columns: 1fr; } }

/* Tarif & Zahlung: aktueller Tarif mit Upgrade */
.plan-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
.plan-hero-main { padding: 1.25rem 1.4rem; display: grid; gap: .9rem; align-content: start; }
.plan-hero-title { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.plan-hero-title h2 { margin: 0; font-size: 1.5rem; }
.plan-hero-price { color: var(--muted); font-size: .92rem; }
.plan-hero-price strong { color: var(--text); font-size: 1.05rem; }
.plan-hero-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.plan-hero-meters > div { display: grid; gap: 6px; min-width: 0; }
.plan-hero-meters .meter-row { color: var(--muted); font-size: .8rem; }
.plan-hero-meters .meter-row strong { color: var(--text); font-weight: 600; }
.plan-hero-upgrade { background: var(--brand-soft); padding: 1.25rem 1.4rem; display: grid; gap: .6rem; align-content: start; border-left: 1px solid var(--border); }
.plan-hero-upgrade h3 { margin: 0; font-size: 1rem; }
.plan-hero-upgrade ul { margin: 0; padding-left: 1.1rem; color: var(--text-2); font-size: .88rem; }
.plan-hero-upgrade .actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.plan-hero-upgrade form { display: contents; }
@media (max-width: 860px) { .plan-hero { grid-template-columns: 1fr; } .plan-hero-upgrade { border-left: 0; border-top: 1px solid var(--border); } .plan-hero-meters { grid-template-columns: 1fr; } }

/* Gratis-Tarif auf der Preisseite */
.free-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 1.25rem 2rem; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.4rem; margin-top: 1.25rem; }
.free-plan.current { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.free-plan h3 { margin: 0 0 .15rem; font-size: 1.1rem; }
.free-plan .free-price { font-size: 1.6rem; font-weight: 600; color: var(--text); }
.free-plan .free-price small { font-size: .85rem; font-weight: 400; color: var(--muted); }
.free-plan .free-lists { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 1.5rem; font-size: .86rem; }
.free-plan .free-lists ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.free-plan .free-lists li { display: flex; gap: .4rem; }
.free-plan .free-lists .yes li::before { content: "✓"; color: var(--check); font-weight: 700; }
.free-plan .free-lists .no li { color: var(--muted); }
.free-plan .free-lists .no li::before { content: "–"; color: var(--cross, var(--muted)); }
.free-plan .free-action { display: grid; gap: .35rem; justify-items: stretch; min-width: 180px; }
@media (max-width: 900px) { .free-plan { grid-template-columns: 1fr; } .free-plan .free-lists { grid-template-columns: 1fr; } .free-plan .free-action { min-width: 0; } }
.vat-note { color: var(--muted); font-size: .78rem; }
.hosting-cell { min-width: 150px; display: grid; gap: 4px; }
.hosting-cell .meter-row { color: var(--muted); font-size: .74rem; }
.plan-hero-meters .meter-row { flex-direction: column; gap: 1px; }
.plan-hero-meters .meter-row strong { font-size: .95rem; white-space: nowrap; }
.lock-form { display: grid; gap: .75rem; max-width: 640px; margin-bottom: 1.5rem; }
.lock-form fieldset { display: grid; gap: .35rem; }

/* Zeitraumauswahl (Tag, KW, Monat, Quartal, Jahr, frei) */
.period-picker { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1rem; }
.period-tabs { display: inline-flex; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 4px; gap: 2px; flex-wrap: wrap; }
.period-tabs a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: var(--radius-pill); color: var(--color-text-muted); font-size: .8125rem; font-weight: var(--weight-semibold); transition: background-color var(--transition-fast), color var(--transition-fast); }
.period-tabs a:hover { color: var(--color-text); text-decoration: none; }
.period-tabs a.active { background: var(--color-surface-raised); color: var(--color-text); box-shadow: 0 0 0 1px var(--color-border), var(--shadow-subtle); }
.period-nav { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.period-label { min-width: 9rem; text-align: center; font-variant-numeric: tabular-nums; }
.period-jump { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: 0; }
.period-jump label { display: inline-flex; gap: .3rem; align-items: center; margin: 0; font-size: .86rem; }
.period-jump input[type=date] { width: auto; padding: .3rem .5rem; }

/* ---------- Aufgaben (Board im Stil von Microsoft Planner) ---------- */
.task-toolbar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin-bottom: 1rem; }
.task-tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0; }
.task-tools label { display: inline-flex; gap: .4rem; align-items: center; margin: 0; font-size: .86rem; color: var(--muted); }
.task-tools select, .task-tools input[type=search] { width: auto; padding: .35rem .55rem; }
.task-toolbar > .period-tabs:last-child { margin-left: auto; }
.task-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px); gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.task-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: grid; gap: 8px; min-height: 120px; }
.task-col.drop-over { outline: 2px dashed var(--brand); outline-offset: -4px; }
.task-col-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: 2px 4px; }
.task-col-head h2 { margin: 0; font-size: .95rem; font-weight: 600; }
.task-col .count { display: inline-block; min-width: 1.4em; padding: 0 .35em; border-radius: 999px; background: var(--border); color: var(--text-2); font-size: .74rem; text-align: center; font-weight: 600; margin-left: .25rem; }
.col-menu summary { list-style: none; cursor: pointer; padding: 0 .4rem; border-radius: 6px; color: var(--muted); font-size: 1.1rem; line-height: 1.4; }
.col-menu summary::-webkit-details-marker { display: none; }
.col-menu[open] summary { background: var(--border); }
.col-menu { position: relative; }
.col-menu-box { position: absolute; right: 0; top: 100%; z-index: 5; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-elevated); padding: .7rem; display: grid; gap: .5rem; width: 240px; }
.col-menu-box form { display: flex; gap: .4rem; margin: 0; }
.quick-add summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 40px; color: var(--color-text-2); font-weight: var(--weight-medium); font-size: .875rem; padding: 0 12px; border-radius: var(--radius-small); background: var(--color-surface-raised); border: 1px dashed var(--color-border-strong); transition: border-color var(--transition-fast), color var(--transition-fast); }
.quick-add summary:hover { border-color: var(--color-text); color: var(--color-text); }
.quick-add summary .ui-icon { width: 16px; height: 16px; }
.quick-add summary::-webkit-details-marker { display: none; }
.quick-add[open] summary { display: none; }
.quick-add-form { display: grid; gap: .45rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .6rem; margin: 0; }
.quick-add-form label { margin: 0; }
.quick-row { display: grid; gap: .4rem; }
.task-list { display: grid; gap: 8px; }
.task-empty { color: var(--muted); font-size: .84rem; text-align: center; margin: .4rem 0; }
.task-tile { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: 12px 14px; display: grid; gap: 8px; box-shadow: var(--shadow-subtle); cursor: grab; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.task-tile:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-elevated); }
.task-tile.dragging { opacity: .45; }
.task-tile.kind-fall { border-left: 3px solid var(--color-text); }
.task-tile.kind-info { border-left: 3px solid var(--color-text-faint); }
.tile-labels { display: flex; flex-wrap: wrap; gap: 4px; }
.tile-label { font-size: .7rem; font-weight: 600; padding: 1px 7px; border-radius: 4px; color: #fff; background: var(--c); }
.tile-main { display: flex; gap: 8px; align-items: flex-start; }
.tile-check-form { margin: 0; display: inline-flex; }
.tile-check { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); color: transparent; padding: 0; display: grid; place-items: center; cursor: pointer; margin-top: 1px; }
.tile-check svg { width: 12px; height: 12px; }
.tile-check:hover { border-color: var(--color-text); color: var(--color-text); }
.tile-check.checked, .task-tile.done .tile-check, .task-table tr.done .tile-check { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.tile-title { color: var(--text); font-weight: 500; font-size: .9rem; line-height: 1.35; overflow-wrap: anywhere; }
.tile-title:hover { color: var(--brand); }
.tile-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: .74rem; color: var(--muted); }
.tile-meta svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }
.tile-kind { font-weight: 600; padding: 0 6px; border-radius: 4px; }
.tile-kind.kind-fall { background: var(--color-primary); color: var(--color-on-primary); }
.tile-kind.kind-info { background: var(--color-surface); color: var(--color-text-2); border: 1px solid var(--color-border); }
.tile-prio.prio-dringend { color: var(--color-critical-ink); font-weight: var(--weight-bold); }
.tile-prio.prio-wichtig { color: var(--color-warning-ink); font-weight: var(--weight-semibold); }
.tile-due { padding: 0 6px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }
.tile-due.overdue { background: var(--color-critical-bg); border-color: color-mix(in srgb, var(--color-critical) 30%, transparent); color: var(--color-critical-ink); font-weight: var(--weight-semibold); }
.tile-due.today { background: var(--color-warning-bg); border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); color: var(--color-warning-ink); font-weight: var(--weight-semibold); }
.tile-progress { color: var(--brand); font-weight: 500; }
.tile-people { margin-left: auto; display: inline-flex; gap: 2px; align-items: center; }
.avatar.xxs { width: 22px; height: 22px; font-size: .6rem; background: var(--brand-soft); color: var(--brand); }
/* Erledigt: zugeklappt, kompakt und durchgestrichen */
.task-tile.done { padding: 6px 10px; gap: 0; box-shadow: none; background: transparent; border-style: dashed; }
.task-tile.done .tile-title, .task-table tr.done .tile-title, .checklist li.done span, h1.struck { text-decoration: line-through; color: var(--muted); }
.done-section summary { cursor: pointer; font-size: .84rem; color: var(--text-2); font-weight: 500; padding: .3rem .2rem; }
.done-section[open] summary { margin-bottom: 6px; }
.add-col { background: transparent; border-style: dashed; min-height: 0; }
.task-table td { vertical-align: middle; }
.switch-form { margin: 0; }
.switch { display: inline-flex; align-items: center; gap: .55rem; background: none; border: 0; padding: .3rem 0; cursor: pointer; color: var(--text); font: inherit; font-size: .9rem; }
.switch .knob { width: 36px; height: 20px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background .15s; flex: none; }
.switch .knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.switch.on .knob { background: var(--color-primary); }
.switch.on .knob::after { background: var(--color-on-primary); }
.switch:focus-visible { outline: var(--focus-outline); outline-offset: 3px; border-radius: var(--radius-small); }
.switch.on .knob::after { transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) { .switch .knob, .switch .knob::after { transition: none; } }
/* Detailseite */
.task-detail { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.task-side { display: grid; gap: 1rem; }
.task-form { display: grid; gap: .9rem; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.label-picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.label-chip { display: inline-flex; margin: 0; cursor: pointer; }
.label-chip input { position: absolute; opacity: 0; }
.label-chip span { padding: .25rem .65rem; border-radius: 6px; border: 1.5px solid var(--c); color: var(--c); font-size: .84rem; font-weight: 600; }
.label-chip input:checked + span { background: var(--c); color: #fff; }
.label-chip input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }
.assign-picker { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.checklist { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .35rem; }
.checklist li { display: flex; align-items: center; gap: .55rem; }
.checklist li span { flex: 1; }
.inline-add { display: flex; gap: .4rem; margin: 0; }
.comments { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .7rem; }
.comments li { background: var(--surface-2); border-radius: 8px; padding: .55rem .7rem; }
.comments p { margin: .2rem 0 0; white-space: pre-wrap; }
.comment-head { display: flex; justify-content: space-between; gap: .5rem; }
.comment-form { display: grid; gap: .4rem; margin: 0; }
@media (max-width: 900px) { .task-detail { grid-template-columns: 1fr; } .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .task-toolbar > .period-tabs:last-child { margin-left: 0; } }

/* ---------- Kalender (Aufbau wie Outlook) ---------- */
.cal { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.cal-side { display: grid; gap: 1rem; position: sticky; top: 12px; }
.mini-cal { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .7rem; }
.mini-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; font-size: .88rem; }
.mini-head a { padding: 0 .45rem; border-radius: 6px; color: var(--text-2); font-size: 1.05rem; }
.mini-head a:hover { background: var(--surface-2); text-decoration: none; }
.mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; text-align: center; font-size: .76rem; font-variant-numeric: tabular-nums; }
.mini-dow { color: var(--muted); font-weight: 600; padding: 2px 0; }
.mini-grid a { color: var(--text); padding: 4px 0; border-radius: 50%; position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.mini-grid a:hover { background: var(--surface-2); text-decoration: none; }
.mini-grid a.out { color: var(--muted); opacity: .6; }
.mini-grid a.sel { background: var(--brand-soft); border-radius: 0; }
.mini-grid a.today { background: var(--color-primary); color: var(--color-on-primary); border-radius: 50%; font-weight: var(--weight-semibold); }
.mini-grid a.busy::after { content: ""; position: absolute; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--brand); }
.mini-grid a.today.busy::after { background: var(--color-on-primary); }
.cal-legend h3, .cal-feed h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 .4rem; }
.cal-legend ul { list-style: none; margin: 0 0 .3rem; padding: 0; display: grid; gap: .3rem; font-size: .86rem; }
.cal-legend li { display: flex; gap: .5rem; align-items: center; }
.cal-legend i, .cat-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--c); flex: none; display: inline-block; }
.cal-feed input { font-size: .74rem; padding: .35rem .45rem; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.cal-feed form { margin: .3rem 0 0; }
.cal-main { min-width: 0; }
.cal-toolbar { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-bottom: .8rem; }
.cal-title { font-size: 1.3rem; margin: 0 .5rem; min-width: 0; }
.cal-views { margin-left: auto; }
.btn.icon { padding-left: .6rem; padding-right: .6rem; font-size: 1rem; line-height: 1; }
/* Termin-Chip: helle Fläche in Kategorienfarbe mit farbigem Rand links (wie Outlook) */
.cal-chip { display: flex; gap: .3rem; align-items: center; font-size: .76rem; line-height: 1.3; padding: 1px 6px 1px 5px; border-radius: 4px; color: var(--text); background: color-mix(in srgb, var(--c) 16%, var(--surface)); border-left: 3px solid var(--c); overflow: hidden; white-space: nowrap; cursor: pointer; }
.cal-chip:hover { text-decoration: none; background: color-mix(in srgb, var(--c) 26%, var(--surface)); }
.cal-chip span { overflow: hidden; text-overflow: ellipsis; }
.cal-chip time { font-variant-numeric: tabular-nums; color: var(--text-2); flex: none; }
.cal-chip.allday { background: var(--c); color: #fff; border-left-color: var(--c); }
.cal-chip.allday:hover { filter: brightness(1.08); }
.rec { font-style: normal; opacity: .75; font-size: .9em; }
.cal-chip.dragging, .cal-event.dragging { opacity: .4; }
/* Monat */
.cal-month { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cal-month-head, .cal-month-row { display: grid; grid-template-columns: 34px repeat(7, minmax(0, 1fr)); }
.cal-month-head span { padding: .45rem .5rem; font-size: .76rem; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); }
.cal-month-row + .cal-month-row .cal-cell, .cal-month-row + .cal-month-row .kw-col { border-top: 1px solid var(--border); }
.kw-col { font-size: .68rem; color: var(--muted); text-align: center; padding-top: .45rem; background: var(--surface-2); border-right: 1px solid var(--border); }
a.kw-col:hover { color: var(--brand); text-decoration: none; }
.cal-cell { min-height: 112px; padding: 4px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--border); min-width: 0; cursor: cell; }
.cal-month-row .cal-cell:nth-child(2) { border-left: 0; }
.cal-cell.weekend { background: color-mix(in srgb, var(--color-surface) 55%, var(--color-surface-raised)); }
.cal-cell.out { background: color-mix(in srgb, var(--surface-2) 70%, var(--bg)); }
.cal-cell.out .cal-daynum { color: var(--muted); }
.cal-cell.drop-over, .cal-col.drop-over, .cal-allday-cell.drop-over { background: var(--brand-soft); }
.cal-daynum { align-self: flex-start; font-size: .8rem; font-weight: 500; color: var(--text-2); padding: 1px 6px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.cal-daynum:hover { background: var(--surface-2); text-decoration: none; }
.cal-cell.today .cal-daynum { background: var(--color-primary); color: var(--color-on-primary); font-weight: var(--weight-semibold); }
.cal-more { font-size: .74rem; color: var(--text-2); padding: 0 4px; }
/* Woche / Tag */
.cal-week { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cal-week-head, .cal-allday, .cal-body { display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(0, 1fr)); }
.cal-week-head { border-bottom: 1px solid var(--border); }
.cal-week-head a { padding: .4rem .6rem; color: var(--text-2); display: flex; gap: .4rem; align-items: baseline; border-left: 1px solid var(--border); }
.cal-week-head a:hover { text-decoration: none; background: var(--surface-2); }
.cal-week-head a strong { font-size: 1.25rem; font-weight: 500; color: var(--text); }
.cal-week-head a.today strong { color: var(--brand); font-weight: 700; }
.cal-week-head a.today { box-shadow: inset 0 -3px 0 var(--brand); }
.gutter { font-size: .68rem; color: var(--muted); padding: .35rem .4rem; text-align: right; }
.cal-allday { border-bottom: 1px solid var(--border); min-height: 30px; }
.cal-allday-cell { border-left: 1px solid var(--border); padding: 3px; display: grid; gap: 2px; align-content: start; cursor: cell; }
.cal-scroll { max-height: 640px; overflow-y: auto; }
.cal-body { position: relative; height: calc(24 * var(--hour)); }
.cal-hours { position: relative; }
.cal-hours span { position: absolute; right: .4rem; font-size: .68rem; color: var(--muted); transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.cal-hours span:first-child { transform: none; }
.cal-col { position: relative; border-left: 1px solid var(--border); background-image: repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px calc(var(--hour) / 2), color-mix(in srgb, var(--border) 45%, transparent) calc(var(--hour) / 2) calc(var(--hour) / 2 + 1px), transparent calc(var(--hour) / 2 + 1px) var(--hour)); cursor: cell; }
.cal-col.weekend { background-color: var(--surface-2); }
.cal-event { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 1px; padding: 3px 6px; border-radius: 4px; overflow: hidden; color: var(--text); background: color-mix(in srgb, var(--c) 18%, var(--surface)); border-left: 3px solid var(--c); font-size: .74rem; line-height: 1.25; box-shadow: 0 0 0 1px var(--surface); cursor: pointer; }
.cal-event:hover { text-decoration: none; background: color-mix(in srgb, var(--c) 28%, var(--surface)); z-index: 2; }
.cal-event strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-event span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--color-critical); z-index: 3; pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-critical); }
/* Liste */
.cal-list { display: grid; gap: 0; padding: 0; }
.cal-list-day { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; padding: .8rem 1.1rem; border-top: 1px solid var(--border); }
.cal-list-day:first-child { border-top: 0; }
.cal-list-date { display: flex; flex-direction: column; align-items: center; color: var(--text-2); }
.cal-list-date strong { font-size: 1.5rem; font-weight: 500; color: var(--text); line-height: 1.1; }
.cal-list-day.today .cal-list-date strong { color: var(--brand); font-weight: 700; }
.cal-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.cal-list li { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.cal-list .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.cal-list .time { width: 7.5rem; color: var(--text-2); font-variant-numeric: tabular-nums; font-size: .88rem; }
.cat-tag { font-size: .72rem; font-weight: 600; padding: 1px 7px; border-radius: 4px; background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
/* Termin-Formular und Detail */
.event-form { display: grid; gap: 1rem; max-width: 820px; }
.title-input input { font-size: 1.15rem; font-weight: 500; }
.when { display: grid; gap: .5rem; }
.when-row { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: flex-end; }
.when-row label { margin: 0; }
.when-sep { padding-bottom: .55rem; color: var(--muted); }
.recur { display: grid; gap: .7rem; }
.recur-row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.recur-row select { width: auto; }
.inline-label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.num-input { width: 4.5rem !important; }
.weekday-picker { display: flex; gap: .35rem; flex-wrap: wrap; }
.day-chip { margin: 0; cursor: pointer; }
.day-chip input { position: absolute; opacity: 0; }
.day-chip span { display: inline-grid; place-items: center; width: 2.4rem; height: 2.1rem; border-radius: 6px; border: 1px solid var(--border-strong); font-size: .86rem; font-weight: 500; }
.day-chip input:checked + span { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.day-chip input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }
.recur-end { display: flex; gap: .4rem 1.1rem; align-items: center; flex-wrap: wrap; }
.recur-end label { display: inline-flex; gap: .35rem; align-items: center; margin: 0; }
.recur-end input[type=date] { width: auto; }
.form-actions { display: flex; gap: .5rem; }
.event-peek { max-width: 760px; border-top: 4px solid var(--c); display: grid; gap: .9rem; }
.peek-head { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.peek-head h1 { margin: 0; }
.peek-facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin: 0; }
.peek-facts dt { color: var(--muted); font-size: .86rem; }
.peek-facts dd { margin: 0; }
.peek-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.peek-actions form { margin: 0; }
.category-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem 1rem; align-items: end; }
.category-form label { display: flex; gap: .5rem; align-items: center; margin: 0; }
@media (max-width: 1000px) { .cal { grid-template-columns: 1fr; } .cal-side { position: static; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .cal-side > .btn { grid-column: 1 / -1; } }
@media (max-width: 640px) { .cal-cell { min-height: 72px; } .cal-chip time { display: none; } .cal-views { margin-left: 0; } .cal-title { width: 100%; margin: .2rem 0; order: -1; } }

/* Protokoll */
.audit-filters { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: flex-end; padding: .9rem 1.1rem; }
.audit-filters label { margin: 0; display: grid; gap: .25rem; font-size: .84rem; min-width: 150px; }
.audit-filters label.grow { flex: 1; min-width: 200px; }
.audit-filter-actions { display: flex; gap: .4rem; }
.audit-table td { vertical-align: top; }
.audit-action { font-weight: 500; white-space: nowrap; }
.audit-action.act-new { color: var(--ok); }
.audit-action.act-del { color: var(--off); }
.audit-details summary { cursor: pointer; font-size: .78rem; color: var(--muted); margin-top: .2rem; }
.audit-details dl { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .9rem; margin: .4rem 0 0; font-size: .82rem; }
.audit-details dt { color: var(--muted); }
.audit-details dd { margin: 0; overflow-wrap: anywhere; }
.assign-readonly { margin: 0; }
.quick-add-form select { width: 100%; }
.quick-row { grid-template-columns: minmax(0, 1fr); }
.quick-row > * { min-width: 0; width: 100%; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: .4rem 0 0; }
.facts dt { color: var(--muted); font-size: .88rem; }
.facts dd { margin: 0; }

/* Mitgliederordner in den Dokumenten */
.member-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; margin-top: .4rem; }
.member-folder { display: flex; gap: .6rem; align-items: center; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--surface); }
.member-folder:hover { border-color: var(--color-border-strong); background: var(--color-surface); box-shadow: var(--shadow-subtle); text-decoration: none; }
.member-folder svg { width: 26px; height: 26px; color: var(--color-text); fill: var(--color-surface); flex: none; }
.member-folder span { display: grid; min-width: 0; }
.member-folder strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-folder small { color: var(--muted); font-size: .76rem; }
.member-folder.out { opacity: .7; }
.left-members { margin-top: 1rem; }
.left-members summary { cursor: pointer; color: var(--text-2); font-size: .9rem; }
.folders a.sub-folder { padding-left: 1.6rem; display: flex; gap: .4rem; align-items: center; font-size: .86rem; }
.folders a.sub-folder svg { width: 15px; height: 15px; flex: none; }
.crumbs { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; margin: 0 0 .8rem; font-size: .95rem; }
.folders a.sub-folder { justify-content: flex-start; }
.letter-jump { display: flex; flex-wrap: wrap; gap: .25rem; margin: .6rem 0 .2rem; }
.letter-jump a { min-width: 1.9rem; text-align: center; padding: .15rem .35rem; border-radius: 6px; border: 1px solid var(--border); font-size: .82rem; font-weight: 600; color: var(--text-2); }
.letter-jump a:hover { background: var(--color-hover); border-color: var(--color-text); text-decoration: none; }
.letter-head { margin: 1rem 0 .1rem; font-size: .8rem; letter-spacing: .08em; color: var(--muted); border-bottom: 1px solid var(--border); padding-bottom: .25rem; scroll-margin-top: 1rem; }
.crumb-action { margin: 0 0 0 auto; }

/* =====================================================================
   Alarme und Zustände
   critical  rot, pulsiert (Ring) bis gelesen bzw. bearbeitet
   warning   orange, pulsiert langsamer (z. B. eskaliert)
   neutral   ruhiger grauer Zähler (offen, gelesen)
   progress  ruhig, „in Bearbeitung“
   done      erledigt, kein Signal
   Bewegung nur am Punkt bzw. Zähler; Text trägt immer die Bedeutung mit.
   ===================================================================== */
@keyframes alarm-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--pulse-color) 38%, transparent); }
  50% { opacity: .85; box-shadow: 0 0 0 7px color-mix(in srgb, var(--pulse-color) 0%, transparent); }
}
.alarm { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--radius-pill); font-size: 11px; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.alarm[hidden], .alarm-dot[hidden] { display: none; }
.alarm-critical { --pulse-color: var(--color-critical); background: var(--color-critical); color: #ffffff; animation: alarm-pulse 1.8s ease-out infinite; }
.alarm-warning { --pulse-color: var(--color-warning); background: var(--color-warning); color: #ffffff; animation: alarm-pulse 2.8s ease-out infinite; }
.alarm-neutral { background: var(--color-surface-raised); color: var(--color-text-2); border: 1px solid var(--color-border-strong); }
.menu-toggle { position: relative; }
.alarm-dot { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-background); }
.alarm-dot.alarm-critical { --pulse-color: var(--color-critical); background: var(--color-critical); animation: alarm-pulse 1.8s ease-out infinite; }
.alarm-dot.alarm-warning { --pulse-color: var(--color-warning); background: var(--color-warning); animation: alarm-pulse 2.8s ease-out infinite; }

/* Zustandsanzeige: Punkt + Text */
.status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-2); white-space: nowrap; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--color-text-faint); }
.status-critical { color: var(--color-critical-ink); }
.status-critical .status-dot { --pulse-color: var(--color-critical); background: var(--color-critical); animation: alarm-pulse 1.8s ease-out infinite; }
.status-warning { color: var(--color-warning-ink); }
.status-warning .status-dot { --pulse-color: var(--color-warning); background: var(--color-warning); animation: alarm-pulse 2.8s ease-out infinite; }
.status-neutral .status-dot { background: transparent; border: 2px solid var(--color-text-muted); }
.status-progress .status-dot { background: conic-gradient(var(--color-text) 0 50%, transparent 50% 100%); border: 2px solid var(--color-text); }
.status-done { color: var(--color-text-muted); }
.status-done .status-dot { background: var(--color-success); }

@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung bleibt der Alarm an Farbe, Ring und Text erkennbar */
  .alarm-critical, .alarm-warning, .alarm-dot.alarm-critical, .alarm-dot.alarm-warning, .status-critical .status-dot, .status-warning .status-dot { animation: none; }
  .alarm-critical, .alarm-dot.alarm-critical, .status-critical .status-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-critical) 25%, transparent); }
  .alarm-warning, .alarm-dot.alarm-warning, .status-warning .status-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-warning) 25%, transparent); }
}

/* Support-Anfragen als Liste */
.ticket-list { display: grid; gap: var(--space-4); align-content: start; }
.ticket { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: var(--space-6); }
.ticket.state-neu { border-color: color-mix(in srgb, var(--color-critical) 45%, var(--color-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-critical) 18%, transparent); }
.ticket.state-eskaliert { border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-border)); }
.ticket.state-erledigt { background: var(--color-surface); }
.ticket-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.ticket-subject { font-size: var(--text-md); margin: 0 0 4px; }
.ticket-meta { margin: 0 0 var(--space-4); }
.ticket-message { margin: 0 0 var(--space-5); color: var(--color-text-2); }
.ticket-form label { margin-bottom: var(--space-3); }
.tab-count { margin-left: 6px; font-variant-numeric: tabular-nums; color: var(--color-text-faint); font-weight: var(--weight-medium); }
.period-tabs a.active .tab-count { color: var(--color-text-muted); }
.empty-state { text-align: center; padding: var(--space-10) var(--space-6); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-large); }
.empty-state h2 { font-size: var(--text-md); margin: 0 0 6px; }
.empty-state p { margin: 0 auto; max-width: 46ch; }

/* ---------- Logo VereinMAP (schwarz/weiß je nach Darstellung) ---------- */
.vm-logo { display: block; height: auto; max-width: 100%; }
.theme-dark-only { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-dark-only { display: block !important; }
  :root:not([data-theme="light"]) .theme-light-only { display: none !important; }
}
:root[data-theme="dark"] .theme-dark-only { display: block !important; }
:root[data-theme="dark"] .theme-light-only { display: none !important; }
.brand .vm-lockup { height: 38px; width: auto; }
.auth-logo { width: min(260px, 74%); margin: 0 auto var(--space-6); }
.auth-logo .vm-logo { width: 100%; }
/* Seitenleiste: Betreiber oben mit Logo, Vereine mit großem Vereinslogo; VereinMAP immer unten */
.side-brand-product { flex-direction: column; align-items: flex-start; gap: 6px; }
.side-brand-product .side-lockup { height: 40px; width: auto; }
.side-brand-product small { color: var(--color-text-faint); font-size: var(--text-xs); padding-left: 2px; }
.side-product { display: grid; gap: 8px; padding: var(--space-3) var(--space-2) var(--space-1); border-radius: var(--radius-small); text-decoration: none; }
.side-product:hover { background: var(--color-hover); text-decoration: none; }
.side-product-logo { height: 30px; width: auto; }
.side-product .side-version { margin: 0; padding: 0; }
.side-product:hover .side-version { background: none; }
/* VereinMAP-Logo immer sichtbar: rechts in der Kopfzeile */
.appbar-brand { display: block; flex: 0 0 auto; padding-left: var(--space-4); margin-left: var(--space-2); border-left: 1px solid var(--color-border); }
.appbar-brand .vm-logo { height: 30px; width: auto; }
@media (max-width: 960px) {
  .appbar-brand { margin-left: auto; padding-left: 0; border-left: 0; }
  .appbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .presence { margin-left: var(--space-2); }
}
.card.narrow h1 { font-size: var(--text-lg); letter-spacing: -0.025em; margin-bottom: var(--space-5); }

/* Anrede: vier Optionen als Segment-Schalter */
.segmented.three { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 480px) { .segmented.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
fieldset.salutation { margin-bottom: var(--space-4); }
fieldset.salutation legend { font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 6px; }
.tag-muted { font-size: 11px; font-weight: var(--weight-medium); color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0 6px; margin-left: 2px; white-space: nowrap; }

/* ---------- Persönliche Einstellungen ---------- */
.settings-form { max-width: 860px; }
.settings-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-6); align-items: center; padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border); }
.settings-row:first-of-type { border-top: 1px solid var(--color-border); }
.settings-text h2 { margin: 0 0 4px; }
.settings-text p { margin: 0; }
.settings-control { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.settings-actions { padding-top: var(--space-6); }
@media (max-width: 720px) { .settings-row { grid-template-columns: 1fr; gap: var(--space-3); } }
.theme-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.theme-choice { margin: 0; cursor: pointer; display: grid; gap: var(--space-2); }
.theme-choice input { position: absolute; opacity: 0; pointer-events: none; }
.theme-preview { display: grid; grid-template-columns: 30% 1fr; grid-template-rows: 1fr 1fr; gap: 6px; height: 72px; padding: 8px; border-radius: var(--radius-medium); border: 1px solid var(--color-border-strong); transition: box-shadow var(--transition-fast), border-color var(--transition-fast); }
.theme-preview i { grid-row: 1 / 3; border-radius: 6px; }
.theme-preview b { border-radius: 6px; }
.theme-light { background: #ffffff; } .theme-light i { background: #f2f2f3; } .theme-light b { background: #e9e9eb; } .theme-light b:last-child { background: #171717; width: 55%; }
.theme-dark { background: #0c0c0d; } .theme-dark i { background: #1c1c1e; } .theme-dark b { background: #2a2a2d; } .theme-dark b:last-child { background: #f5f5f7; width: 55%; }
.theme-system { background: linear-gradient(135deg, #ffffff 50%, #0c0c0d 50%); } .theme-system i { background: #e9e9eb; } .theme-system b { background: #2a2a2d; } .theme-system b:last-child { background: #f5f5f7; width: 55%; }
.theme-label { font-size: .875rem; font-weight: var(--weight-medium); text-align: center; color: var(--color-text-2); }
.theme-choice:has(input:checked) .theme-preview { border-color: var(--color-text); box-shadow: 0 0 0 2px var(--color-text); }
.theme-choice:has(input:checked) .theme-label { color: var(--color-text); font-weight: var(--weight-semibold); }
.theme-choice:has(input:focus-visible) .theme-preview { outline: var(--focus-outline); outline-offset: 3px; }
/* Schalter */
.toggle { display: inline-flex; align-items: center; gap: var(--space-3); margin: 0; cursor: pointer; font-weight: var(--weight-medium); font-size: .9375rem; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track { position: relative; width: 44px; height: 26px; border-radius: var(--radius-pill); background: var(--color-border-strong); transition: background-color var(--transition-fast); flex: 0 0 auto; }
.toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform var(--transition-fast); }
.toggle input:checked + .toggle-track { background: var(--color-primary); }
.toggle input:checked + .toggle-track::after { transform: translateX(18px); background: var(--color-on-primary); }
.toggle input:focus-visible + .toggle-track { outline: var(--focus-outline); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .toggle-track, .toggle-track::after { transition: none; } }

/* ---------- Versionsverlauf ---------- */
.side-version { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-top: var(--space-1); padding: 6px var(--space-2); border-radius: var(--radius-small); font-size: 11px; color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
.side-version span:last-child { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--color-border-strong); }
.side-version:hover { background: var(--color-hover); color: var(--color-text-2); text-decoration: none; }
.versions { list-style: none; margin: 0; padding: 0; max-width: 860px; }
.version { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6) 0; border-top: 1px solid var(--color-border); }
.version-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.version-meta time { color: var(--color-text-muted); font-size: var(--text-sm); }
.version-body h2 { margin: 0 0 var(--space-2); }
.version-body ul { margin: 0; padding-left: 18px; color: var(--color-text-2); }
.version-body li { margin: 4px 0; }
@media (max-width: 640px) { .version { grid-template-columns: 1fr; gap: var(--space-2); } .version-meta { flex-direction: row; align-items: center; gap: var(--space-3); } }

/* ---------- Support-Verlauf ---------- */
.thread { list-style: none; margin: var(--space-2) 0 var(--space-5); padding: 0; display: grid; gap: var(--space-3); }
.msg { max-width: 82%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-medium); background: var(--color-surface); border: 1px solid var(--color-border); }
.msg.mine { justify-self: end; background: var(--color-surface-raised); border-color: var(--color-border-strong); }
.msg.from-operator:not(.mine) { border-left: 2px solid var(--color-text); }
.msg-meta { display: flex; gap: var(--space-3); align-items: baseline; font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: 4px; }
.msg-meta strong { color: var(--color-text); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.msg p { margin: 0; color: var(--color-text-2); }
@media (max-width: 640px) { .msg { max-width: 100%; } }
.reply-box summary { cursor: pointer; font-weight: var(--weight-semibold); font-size: .875rem; display: inline-flex; align-items: center; min-height: var(--control-h-s); padding: 0 var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); list-style: none; box-shadow: var(--shadow-button-secondary); }
.reply-box summary::-webkit-details-marker { display: none; }
.reply-box summary:hover { background: var(--color-hover); }
.reply-box[open] summary { margin-bottom: var(--space-4); }

/* ---------- Anwesenheit (wie Teams) ---------- */
.presence { display: flex; align-items: center; margin-left: auto; padding-left: var(--space-2); }
.presence:empty { display: none; }
.presence:empty + .appbar-date { margin-left: auto; }
.presence + .appbar-date { margin-left: var(--space-4); }
.presence-avatar, .presence-chip, .presence-mark { display: inline-grid; place-items: center; border-radius: 50%; font-weight: var(--weight-semibold); letter-spacing: .02em; background: var(--color-primary); color: var(--color-on-primary); position: relative; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.presence-avatar { width: 32px; height: 32px; font-size: 11px; border: 2px solid var(--color-background); margin-left: -8px; }
.presence-avatar:first-child { margin-left: 0; }
.presence-avatar.more { background: var(--color-selected); color: var(--color-text); }
/* Grüner Punkt = online, Stift-Ring = bearbeitet gerade */
.presence-avatar::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-success); border: 2px solid var(--color-background); }
.presence-avatar.more::after { content: none; }
.presence-avatar.is-editing, .presence-chip.is-editing, .presence-mark.is-editing { box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-warning); }
.presence-chip { width: 22px; height: 22px; font-size: 9px; margin-left: 4px; }
.side-nav a .presence-chip:first-of-type { margin-left: auto; }
.presence-mark { width: 20px; height: 20px; font-size: 9px; margin-left: 6px; vertical-align: middle; text-decoration: none; }
.presence-toast { position: fixed; right: max(var(--space-5), env(safe-area-inset-right, 0px)); bottom: max(var(--space-5), env(safe-area-inset-bottom, 0px)); z-index: var(--z-toast); max-width: min(380px, calc(100vw - 32px)); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-medium); box-shadow: var(--shadow-overlay); padding: var(--space-4); display: grid; gap: var(--space-2); font-size: .875rem; animation: toast-in var(--transition-normal) var(--ease-out); }
.presence-toast-row { display: flex; align-items: center; gap: var(--space-3); }
.presence-toast-row .presence-avatar { margin-left: 0; }
.presence-toast p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
@keyframes toast-in { }
@media (prefers-reduced-motion: reduce) { .presence-toast { animation: none; } }
.setting-card { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.setting-card > div { flex: 1 1 360px; }
.setting-card h2 { margin: 0 0 4px; }
.setting-card p { margin: 0; }

/* ---------- Betreiber: Datensicherung, Online-Zeiten ---------- */
.backup-head { display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; align-items: flex-start; margin-bottom: var(--space-4); }
.backup-facts { flex: 1 1 320px; margin: 0; }
.backup-controls { display: grid; gap: var(--space-3); justify-items: start; flex: 0 1 460px; }
.backup-controls form { margin: 0; width: 100%; }
.spark { display: inline-flex; align-items: flex-end; gap: 3px; height: 26px; vertical-align: middle; }
.spark i { display: block; width: 7px; min-height: 2px; border-radius: 2px; background: var(--color-primary); opacity: .85; }

/* ---------- Admin-Dashboard ---------- */
.cockpit { margin-bottom: var(--space-6); }
.cockpit-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }
.cockpit-head h2 { font-size: var(--text-lg); letter-spacing: -0.025em; margin: 0; }
.cockpit-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); }
.cockpit-grid > .card { margin: 0; }
.cockpit-chart { grid-column: span 3; position: relative; }
.cockpit-panel { grid-column: span 2; }
.cockpit-recent { grid-column: 1 / -1; }
@media (max-width: 1100px) { .cockpit-chart { grid-column: 1 / -1; } .cockpit-panel { grid-column: span 3; } .cockpit-panel:last-of-type { grid-column: 1 / -1; } }
@media (max-width: 640px) { .cockpit-grid { grid-template-columns: 1fr; } .cockpit-grid > .card { grid-column: 1 / -1; } }
.cockpit-kpi { display: grid; gap: 2px; margin-bottom: var(--space-4); }
.cockpit-kpi strong { font-size: 1.75rem; font-weight: var(--weight-semibold); letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.trend { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
.trend.up { color: var(--color-success-ink); }
.trend.down { color: var(--color-critical-ink); }
.minichart { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; height: 140px; align-items: end; }
.mc-col { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; cursor: default; }
.mc-bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; border-bottom: 1px solid var(--color-border); }
.mc-bar { display: block; width: min(100%, 22px); background: var(--color-border-strong); border-radius: 4px 4px 0 0; transition: background-color var(--transition-fast); }
.mc-bar.current, .pair .mc-bar { background: var(--series-1); }
.pair .mc-bar { width: min(45%, 16px); }
.pair .mc-bar.alt { background: var(--series-2); }
.mc-col span { font-size: 11px; color: var(--color-text-muted); text-align: center; }
.mc-col:hover .mc-bar, .mc-col.on .mc-bar { background: var(--color-text-2); }
.pair .mc-col:hover .mc-bar.alt, .pair .mc-col.on .mc-bar.alt { background: var(--color-text-faint); }
.chart-legend { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-3); color: var(--color-text-muted); }
.chart-legend a { margin-left: auto; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--series-1); margin-right: 6px; vertical-align: -1px; }
.lg.alt { background: var(--series-2); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 10px var(--space-4); margin: 0; font-size: .875rem; }
.kv dt { color: var(--color-text-muted); }
.kv dd { margin: 0; text-align: right; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.cockpit-panel h3, .cockpit-recent h3 { margin: 0; font-size: var(--text-base); }
.cockpit-plan { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 var(--space-3); }
.cockpit-panel .meter { margin: 4px 0 var(--space-3); }
.activity { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.activity li { display: flex; gap: var(--space-3); align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: .875rem; }
.activity li:last-child { border-bottom: 0; }
.activity small { display: block; margin-top: 2px; }
.activity .avatar.xxs { flex: 0 0 auto; margin-top: 1px; }
.side-brand .club-monogram { display: grid; place-items: center; line-height: 1; }

.mail-status { margin-top: var(--space-4); }
.creds-actions { margin-bottom: var(--space-5); }

.smtp-card { max-width: 860px; margin-top: var(--space-7); }
.smtp-test { margin: var(--space-4) 0 0; }

/* ---------- Nachrichten an Vereine ---------- */
.compose summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-weight: var(--weight-semibold); list-style: none; }
.compose summary::-webkit-details-marker { display: none; }
.compose summary .ui-icon { width: 16px; height: 16px; }
.compose[open] summary { margin-bottom: var(--space-4); }
.compose-form { max-width: 720px; }
.section-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); margin: var(--space-6) 0 var(--space-3); }

/* Angebotsfinder: Größenklassen statt Vereinsart */
.finder-lead { text-align: center; color: var(--color-text-muted); margin: calc(var(--space-3) * -1) auto var(--space-5); max-width: 40ch; font-size: .9375rem; }
.size-choice { gap: 2px; padding: var(--space-6) var(--space-2); }
.size-choice strong { font-size: 1.625rem; font-weight: 680; letter-spacing: -0.03em; line-height: 1.1; }
.size-choice span { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--weight-medium); }
.exact-count { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.exact-count input { margin-top: 6px; }

/* Betreiber: Reiter Datensicherung */
.backup-bulk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.backup-bulk-grid form { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; margin: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface); }
.backup-bulk-grid label { flex: 1 1 180px; margin: 0; }
@media (max-width: 900px) { .backup-bulk-grid { grid-template-columns: 1fr; } }
.bulk-title { flex: 1 1 100%; margin: 0 0 var(--space-1); font-size: var(--text-base); }

/* ---------- Laufband mit Vereinslogos (Startseite, über den Preisen) ----------
   Ununterbrochen von rechts nach links; sichtbar sind höchstens 4 Logos (Handy: 2).
   Die Liste ist doppelt vorhanden, damit die Bewegung nahtlos weiterläuft.
   Bewusst ohne mask-image und Container-Einheiten: Safari auf dem iPhone lässt bewegte
   Inhalte unter einer Maske sonst verschwinden. Die Ränder blenden zwei Verläufe darüber aus.
   Ebenfalls bewusst ohne will-change/backface-visibility/3D: Safari zeichnet die hereinlaufenden
   Logos damit sonst verspätet, und es entsteht kurz eine leere Lücke. */
.logo-band { margin: var(--space-10) auto var(--space-6); max-width: 1040px; text-align: center; }
.logo-marquee { position: relative; overflow: hidden; padding: 2px 0; }
.logo-marquee::before, .logo-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 8%; z-index: 1; pointer-events: none; }
.logo-marquee::before { left: 0; background: linear-gradient(90deg, var(--color-background), transparent); }
.logo-marquee::after { right: 0; background: linear-gradient(270deg, var(--color-background), transparent); }
.logo-track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: logo-scroll var(--logo-duration, 36s) linear infinite; }
.logo-track li { flex: 0 0 260px; padding: 0 var(--space-2); box-sizing: border-box; }
.logo-track img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; background: #ffffff; border: 1px solid var(--color-border); border-radius: var(--radius-medium); }
/* Anhalten beim Überfahren nur mit Maus – auf Touch-Geräten bliebe es nach dem Antippen stehen */
@media (hover: hover) { .logo-marquee:hover .logo-track { animation-play-state: paused; } }
@keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 1100px) { .logo-track li { flex-basis: calc((100vw - 64px) / 4); } }
@media (max-width: 640px) { .logo-track li { flex-basis: calc((100vw - 32px) / 2); } }
/* Ohne Bewegung: die ersten Logos ruhig nebeneinander */
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; width: auto; justify-content: center; flex-wrap: wrap; row-gap: var(--space-3); }
  .logo-track li[aria-hidden] { display: none; }
  .logo-marquee::before, .logo-marquee::after { display: none; }
}

.member-age { font-weight: var(--weight-regular); color: var(--color-text-muted); }

/* Finder: fünf Größenklassen – oben drei, unten zwei; Handy: „bis 30“ breit, darunter 2 × 2 */
.size-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.size-grid .size-choice { grid-column: span 2; }
.size-grid .size-choice:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 480px) {
  .size-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .size-grid .size-choice, .size-grid .size-choice:nth-child(n+4) { grid-column: span 1; }
  .size-grid .size-choice:first-child { grid-column: 1 / -1; }
}
.plan-picker { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.admin-quota { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin: var(--space-2) 0 0; }

/* DATEV-Export */
.datev-export { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); }
.datev-export form label { margin: 0; min-width: 12rem; }
.datev-export .datev-range { margin: 0 auto 0.6rem 0; }
.datev-accounts input { max-width: 8rem; margin: 0; }
.datev-accounts td { vertical-align: middle; }

/* Beitragszeitraum: Zahlweise und Zeitraum */
.fee-period { margin-bottom: var(--space-4); display: grid; gap: var(--space-3); }
.fee-intervals { display: flex; flex-wrap: wrap; gap: 4px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 4px; width: fit-content; max-width: 100%; }
.fee-intervals a { padding: 6px 14px; border-radius: var(--radius-pill); color: var(--color-text-muted); font-weight: var(--weight-semibold); text-decoration: none; white-space: nowrap; }
.fee-intervals a:hover { color: var(--color-text); text-decoration: none; }
.fee-intervals a.active { background: var(--color-surface-raised); color: var(--color-text); box-shadow: 0 0 0 1px var(--color-border), var(--shadow-subtle); }
.fee-intervals .count { font-size: .78em; color: var(--color-text-muted); margin-left: 2px; }
.fee-period-pick { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.fee-period-pick select { width: auto; min-width: 12rem; margin: 0; }
.fee-period p { margin: 0; }
.fee-default-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.fee-default-row label { margin: 0; }
@media (max-width: 640px) { .fee-intervals { width: 100%; display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-medium); } .fee-intervals a { text-align: center; } .fee-period-pick select { flex: 1; min-width: 0; } }

/* Kontoauszug zuordnen */
.import-summary { flex-wrap: wrap; }
.import-review td select { margin: 6px 0 0; max-width: 26rem; width: 100%; }
.import-review .import-purpose { max-width: 34rem; overflow-wrap: anywhere; }
.import-review .pos { color: var(--color-success, #157f3b); }
.import-row.import-vorhanden { opacity: .62; }
.import-actions { justify-content: flex-end; }
@media (max-width: 760px) {
  .import-review table, .import-review tbody, .import-review tr, .import-review td { display: block; width: 100%; }
  .import-review thead { display: none; }
  .import-review tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); }
  .import-review td { border: 0; padding: 0; }
  .import-review td[data-label="Datum"] { grid-column: 1; color: var(--color-text-muted); font-size: .85rem; }
  .import-review td[data-label="Betrag"] { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-weight: var(--weight-semibold); }
  .import-review td[data-label="Umsatz"] { grid-column: 1; }
  .import-review td[data-label="Zuordnung"] { grid-column: 1 / -1; margin-top: var(--space-2); }
  .import-review td select { max-width: none; }
}
.file-loaded { display: block; margin-top: 4px; }

/* Vorabankündigung bei Lastschriften */
.sepa-notice { border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: var(--space-3) var(--space-4); margin: 0; display: grid; gap: var(--space-2); }
.sepa-notice legend { font-weight: var(--weight-semibold); padding: 0 6px; }
.sepa-notice .inline-field { display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap; }
.sepa-notice .inline-field input { width: 5rem; margin: 0; }
.sepa-notice p { margin: 0; }

/* Nachhilfe: Übersicht für Lehrkräfte und Stunden-Rückblick */
.teacher-filters { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--space-3); align-items: end; }
.teacher-filters label { margin: 0; }
.teacher-filters .tf-mine { align-self: center; }
.teacher-filters .tf-actions { display: flex; gap: var(--space-2); justify-content: flex-end; grid-column: span 3; }
.az-index { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--space-3); }
.az-index a { min-width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-weight: var(--weight-semibold); text-decoration: none; color: var(--color-text); background: var(--color-surface-raised); }
.az-index a:hover { background: var(--color-surface); text-decoration: none; }
.teacher-group { padding-top: var(--space-3); scroll-margin-top: 80px; }
.group-label { font-size: 1rem; margin: 0 0 var(--space-2); color: var(--color-text-muted); }
.teacher-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-2); }
.teacher-list a { display: grid; gap: 2px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-medium); color: var(--color-text); text-decoration: none; min-height: 44px; }
.teacher-list a:hover, .teacher-list a:focus-visible { border-color: var(--color-text); text-decoration: none; }
.teacher-list .tl-name { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.teacher-list .tl-last { color: var(--color-text-muted); }
.sessions-filters { margin: 0 0 var(--space-3); }
.day-block { padding-top: var(--space-3); }
@media (max-width: 760px) {
  .teacher-filters { grid-template-columns: 1fr 1fr; }
  .teacher-filters .tf-search { grid-column: 1 / -1; }
  .teacher-filters .tf-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
.quick-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }

/* Angebotsfinder: alles inklusive mit grünem Haken */
.included-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.included-list li { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--color-border); border-radius: 12px; padding: .75rem 1rem; font-weight: 600; }
.included-list li .icon { width: 22px; height: 22px; flex: none; }
.included-list li span { flex: 1; display: grid; }
.included-list li small { font-weight: 400; color: var(--color-text-muted); font-size: .78rem; }
.included-check { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #1f9d55; color: #fff; font-size: .9rem; font-weight: 700; }
.addon-choice { grid-template-columns: 1fr 1fr; }

/* Eigene Formular-Vorlagen */
.tpl-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.tpl-modes .choice { text-align: left; align-items: flex-start; }
.tpl-modes .choice span { font-weight: 400; }
.tpl-form .tpl-text, .tpl-form .tpl-pdf { display: none; }
.tpl-form:has(input[name="mode"][value="text"]:checked) .tpl-text { display: block; }
.tpl-form:has(input[name="mode"][value="pdf"]:checked) .tpl-pdf { display: block; }
.tpl-form textarea { font-family: inherit; line-height: 1.5; }
.tpl-help ul { margin: var(--space-2) 0; padding-left: 1.2rem; }
.tpl-help code.ph { display: inline-block; margin: 2px 2px 2px 0; }
@media (max-width: 760px) { .tpl-modes { grid-template-columns: 1fr; } }
.tpl-form:has(input[name="mode"][value="pdf"]:checked) .tpl-preview { display: none; }

/* ---------- Startseite & Funktionsseite: sachliche Inhaltsabschnitte (Schwarz-Weiß-Designsystem) ---------- */
.kicker.center { display: block; }
.mk-section { margin: var(--space-12, 4rem) auto 0; max-width: 1120px; }
.mk-section .section-title { margin-bottom: var(--space-8); }
.mk-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-6); padding: var(--space-5) var(--space-4); margin: var(--space-6) auto 0; max-width: 1120px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); font-size: .9rem; font-weight: var(--weight-medium); color: var(--color-text-2); }
.mk-trust span { display: inline-flex; align-items: center; gap: 8px; }
.mk-check { width: 18px; height: 18px; border-radius: 50%; background: var(--color-text); position: relative; flex: none; }
.mk-check::after { content: ''; position: absolute; left: 5px; top: 5px; width: 7px; height: 4px; border-left: 2px solid var(--color-background); border-bottom: 2px solid var(--color-background); transform: rotate(-45deg); }
.mk-reasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.mk-reasons.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-reason { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-large, 16px); padding: var(--space-6); box-shadow: var(--shadow-subtle); }
.mk-reason h3 { margin: var(--space-2) 0; font-size: 1.05rem; letter-spacing: -.01em; }
.mk-reason p { margin: 0; color: var(--color-text-muted); line-height: 1.55; }
.mk-num { font-size: .8rem; font-weight: var(--weight-semibold); letter-spacing: .12em; color: var(--color-text-muted); }
.mk-areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.mk-area { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-large, 16px); padding: var(--space-6); }
.mk-area-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.mk-area-head h3 { margin: 0; font-size: 1.1rem; }
.mk-area .checks { margin: var(--space-3) 0 0; font-size: .92rem; }
.mk-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--color-text); color: var(--color-background); display: grid; place-items: center; flex: none; }
.mk-icon .icon, .mk-icon svg { width: 22px; height: 22px; }
.mk-icon.large { width: 56px; height: 56px; border-radius: 16px; }
.mk-icon.large .icon, .mk-icon.large svg { width: 30px; height: 30px; }
.mk-security { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-8); background: var(--color-text); color: var(--color-background); border-radius: 24px; padding: var(--space-10, 2.5rem); }
.mk-security h2 { color: inherit; font-size: 1.7rem; letter-spacing: -.02em; margin: 0 0 var(--space-3); }
.mk-security .kicker, .mk-security .muted { color: color-mix(in srgb, var(--color-background) 70%, transparent); }
.mk-security-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-6); }
.mk-security-list li { display: grid; gap: 4px; align-content: start; padding-left: 28px; position: relative; }
.mk-security-list li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 12px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.mk-security-list span { color: color-mix(in srgb, var(--color-background) 72%, transparent); font-size: .92rem; line-height: 1.5; }
.mk-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); counter-reset: step; }
.mk-steps li { counter-increment: step; border-top: 2px solid var(--color-text); padding-top: var(--space-4); }
.mk-steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-text); color: var(--color-background); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.mk-steps h3 { margin: 0 0 var(--space-2); font-size: 1.05rem; }
.mk-faq { max-width: 760px; margin: 0 auto; display: grid; gap: var(--space-2); }
.mk-faq details { border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: var(--space-4) var(--space-5); background: var(--color-surface-raised); }
.mk-faq summary { cursor: pointer; font-weight: var(--weight-semibold); }
.mk-faq p { margin: var(--space-3) 0 0; color: var(--color-text-muted); line-height: 1.55; }
.mk-cta { max-width: 1120px; margin: var(--space-12, 4rem) auto var(--space-8); text-align: center; border: 1px solid var(--color-border); border-radius: 24px; padding: var(--space-10, 2.5rem) var(--space-6); background: var(--color-surface); }
.mk-cta h2 { font-size: 1.8rem; letter-spacing: -.02em; margin: 0 0 var(--space-2); }
.mk-cta p { color: var(--color-text-muted); margin: 0 auto var(--space-5); max-width: 56ch; }
.mk-cta .actions { justify-content: center; }
.mk-hero { max-width: 860px; margin: var(--space-10) auto var(--space-8); text-align: center; }
.mk-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -.035em; line-height: 1.08; margin: 0 0 var(--space-4); }
.mk-hero .lead { color: var(--color-text-muted); font-size: 1.15rem; line-height: 1.5; }
.mk-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: var(--space-6); }
.mk-jump a { border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 8px 14px; font-weight: var(--weight-medium); color: var(--color-text); text-decoration: none; background: var(--color-surface-raised); }
.mk-jump a:hover { border-color: var(--color-text); text-decoration: none; }
.mk-detail { max-width: 1120px; margin: 0 auto; padding: var(--space-8) 0; border-top: 1px solid var(--color-border); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-8); scroll-margin-top: 80px; }
.mk-detail-head { display: flex; gap: var(--space-4); align-items: flex-start; }
.mk-detail-head h2 { margin: 0 0 var(--space-2); font-size: 1.4rem; letter-spacing: -.02em; }
.mk-detail-list { margin: 0; }
@media (max-width: 1000px) { .mk-reasons { grid-template-columns: 1fr 1fr; } .mk-areas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .mk-reasons, .mk-reasons.three, .mk-areas, .mk-steps, .mk-security, .mk-security-list, .mk-detail { grid-template-columns: 1fr; }
  .mk-security { padding: var(--space-6); border-radius: 18px; }
  .mk-trust { justify-content: flex-start; }
}

/* Öffentliche Kopfzeile: Menü mittig, Anmelden/Login als deutlicher Button rechts */
.topbar .publicnav-links { flex: 1; display: flex; justify-content: center; gap: var(--space-6); font-size: .9rem; font-weight: var(--weight-medium); }
.topbar .publicnav-links a { color: var(--color-text-2); text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; }
.topbar .publicnav-links a:hover, .topbar .publicnav-links a.active { color: var(--color-text); border-bottom-color: var(--color-text); text-decoration: none; }
.topbar .publicnav { margin-left: 0; gap: var(--space-3); }
.login-btn { border: 2px solid var(--color-text) !important; background: var(--color-surface-raised); color: var(--color-text); font-weight: var(--weight-semibold); gap: 8px; }
.login-btn:hover { background: var(--color-text); color: var(--color-background); }
.login-btn .login-short { display: none; }
@media (max-width: 760px) { .topbar .publicnav-links { display: none; } .topbar .publicnav { margin-left: auto; } }
@media (max-width: 480px) { .login-btn .login-long { display: none; } .login-btn .login-short { display: inline; } }

/* Betreiber: Vertragsunterlagen je Verein */
.doc-menu { position: relative; }
.doc-menu summary { list-style: none; cursor: pointer; }
.doc-menu summary::-webkit-details-marker { display: none; }
.doc-menu .doc-pop { position: fixed; left: 50%; top: 12vh; transform: translateX(-50%); z-index: 60; width: min(440px, calc(100vw - 32px)); max-height: 76vh; overflow: auto; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-medium); box-shadow: var(--shadow-overlay, 0 12px 32px rgb(0 0 0 / .14)); padding: var(--space-4); }
.doc-actions { display: grid; gap: var(--space-3); }
.doc-menu[open] summary::before { content: ''; position: fixed; inset: 0; background: rgb(0 0 0 / .25); z-index: 55; cursor: default; }
.doc-pop-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); font-weight: var(--weight-semibold); }
.doc-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.doc-cancel { border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: var(--space-3); margin: 0; display: grid; gap: var(--space-2); }
.doc-cancel legend { font-size: .85rem; font-weight: var(--weight-semibold); padding: 0 4px; }
.doc-cancel label { margin: 0; font-size: .85rem; }
.doc-actions p { margin: 0; }

/* Entwurf einer Vertragsunterlage: Bearbeiten links, PDF-Vorschau rechts */
.draft-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-5); align-items: start; }
.draft-form { display: grid; gap: var(--space-3); }
.draft-form label { margin: 0; }
.draft-body { font-family: var(--font-mono, ui-monospace, monospace); font-size: .85rem; line-height: 1.5; }
.draft-positions input { margin: 0; }
.draft-positions td:last-child input { max-width: 9rem; text-align: right; }
.draft-actions { flex-wrap: wrap; }
.draft-preview { position: sticky; top: 76px; }
.draft-preview iframe { width: 100%; height: 78vh; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: #fff; }
@media (max-width: 1000px) { .draft-layout { grid-template-columns: 1fr; } .draft-preview { position: static; } .draft-preview iframe { height: 70vh; } }

/* Zwei-Faktor-Anmeldung */
.tfa-card { max-width: 860px; margin-top: var(--space-7); }
.tfa-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-3); }
.tfa-actions .inline-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; }
.tfa-actions .inline-form input { width: auto; min-width: 0; flex: 1 1 150px; margin: 0; }
.tfa-off > summary { list-style: none; cursor: pointer; }
.tfa-off > summary::-webkit-details-marker { display: none; }
.tfa-off[open] > summary { margin-bottom: var(--space-2); }
.otp-input { font-variant-numeric: tabular-nums; letter-spacing: .12em; font-size: 1.15rem; }
.otp-input.small { font-size: 1rem; letter-spacing: .06em; }
.tfa-setup { max-width: 720px; }
.tfa-steps { padding-left: 1.3em; display: grid; gap: var(--space-5); margin: 0; }
.tfa-steps li::marker { font-weight: 700; }
.tfa-qr { width: 200px; max-width: 100%; margin: var(--space-3) 0; padding: 10px; background: #fff; border-radius: 12px; border: 1px solid var(--color-border); }
.tfa-qr svg { display: block; width: 100%; height: auto; }
.tfa-secret { word-break: break-all; user-select: all; }
.tfa-confirm { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.tfa-confirm input { width: 11em; margin: 0; }
.tfa-codes-card { max-width: 620px; }
.tfa-codes { list-style: none; padding: 0; margin: var(--space-4) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-5); }
.tfa-codes code { font-size: 1.05rem; letter-spacing: .04em; }
.tfa-help { margin-top: var(--space-4); }
.tfa-help summary { cursor: pointer; color: var(--color-text-muted); }
@media print { .tfa-codes-card .tfa-code-actions, .tfa-codes-card .alert { display: none; } }
.ga-app { margin: var(--space-3) 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface-raised); max-width: 520px; }
.ga-head { display: flex; gap: var(--space-3); align-items: center; }
.ga-icon { width: 56px; height: 56px; border-radius: 13px; flex: 0 0 auto; box-shadow: 0 1px 3px rgb(0 0 0 / .15); }
.ga-icon-generic { display: grid; place-items: center; background: #fff; color: #5f6368; border: 1px solid var(--color-border); }
.ga-stores { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); }
.ga-store { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-decoration: none; }
.ga-qr { width: 96px; padding: 6px; background: #fff; border-radius: 8px; border: 1px solid var(--color-border); }
.ga-qr svg { display: block; width: 100%; height: auto; }
.ga-app .muted.small { margin-bottom: 0; }

/* Hilfe / Anleitungen */
.help-btn { margin-left: auto; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--color-border-strong); background: var(--color-surface-raised); font-weight: 700; font-size: .95rem; text-decoration: none; flex: 0 0 auto; }
.help-btn:hover { background: var(--color-text); border-color: var(--color-text); }
.help-btn ~ .appbar-date { margin-left: 0; }
.help-btn.inline { width: 20px; height: 20px; font-size: .75rem; margin: 0 2px; vertical-align: -3px; display: inline-grid; }
.help-search { display: flex; gap: var(--space-2); flex-wrap: wrap; max-width: 640px; margin-bottom: var(--space-6); }
.help-search input { flex: 1 1 260px; margin: 0; }
.help-group { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); margin: var(--space-7) 0 var(--space-3); }
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.help-card { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; background: var(--color-surface-raised); color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.help-card:hover { box-shadow: 0 8px 24px rgb(0 0 0 / .08); transform: translateY(-2px); }
.help-thumb { display: block; aspect-ratio: 16 / 8; overflow: hidden; background: var(--color-surface-sunken, #f4f4f5); border-bottom: 1px solid var(--color-border); }
.help-thumb img { width: 100%; height: auto; display: block; }
.help-card-body { display: grid; gap: 6px; padding: var(--space-4); }
.help-card-title { display: flex; gap: 8px; align-items: center; }
.help-card-meta { color: var(--color-text-faint); }
.help-crumbs { color: var(--color-text-muted); margin-bottom: var(--space-3); }
.help-crumbs a { color: inherit; }
.help-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--space-8); align-items: start; }
.help-article { max-width: 860px; }
.help-toc { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding-left: 1.2em; margin: 0 0 var(--space-6); }
.help-section { margin-bottom: var(--space-8); scroll-margin-top: 80px; }
.help-section h2 { font-size: 1.25rem; margin-bottom: var(--space-4); }
.help-steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: var(--space-5); }
.help-steps > li { counter-increment: step; position: relative; padding-left: 44px; }
.help-steps > li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--color-text); color: var(--color-background); display: grid; place-items: center; font-weight: 700; font-size: .875rem; }
.help-steps p { margin: 0 0 var(--space-3); line-height: 1.6; }

.help-shot { display: block; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgb(0 0 0 / .06); max-width: 760px; background: #fff; }
.help-shot img { display: block; width: 100%; height: auto; }
.help-tips { border-left: 3px solid var(--color-text); background: var(--color-surface-raised); padding: var(--space-4) var(--space-5); border-radius: 0 12px 12px 0; margin: var(--space-6) 0; }
.help-tips ul { margin: var(--space-2) 0 0; padding-left: 1.2em; }
.help-pager { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-7); }
.help-more { margin-top: var(--space-5); }
.help-side-inner { position: sticky; top: 80px; border: 1px solid var(--color-border); border-radius: 14px; padding: var(--space-4); background: var(--color-surface-raised); }
.help-side ul { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: 2px; }
.help-side a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm); }
.help-side a:hover { background: var(--color-surface-sunken, #f4f4f5); color: var(--color-text); }
.help-side a.active { background: var(--color-text); color: var(--color-background); }
@media (max-width: 1000px) { .help-layout { grid-template-columns: 1fr; } .help-side { display: none; } }
@media (max-width: 560px) { .help-steps > li { padding-left: 38px; } }
.help-num { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #e5484d; color: #fff; font: 700 12px/1 Inter, system-ui, sans-serif; vertical-align: 1px; margin: 0 2px; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.help-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); }
.help-section-head h2 { margin: 0; }
.help-who { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; border: 1px solid var(--color-border-strong); color: var(--color-text-muted); background: var(--color-surface-raised); white-space: nowrap; }
.help-who-admin { background: var(--color-text); color: var(--color-background); border-color: var(--color-text); }
.help-who-right { color: var(--color-text); }
.help-who-box { border: 1px solid var(--color-border); border-radius: 14px; padding: var(--space-4) var(--space-5); background: var(--color-surface-raised); margin: 0 0 var(--space-6); }
.help-who-box ul { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.help-who-box li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.help-who-box p { margin: var(--space-3) 0 0; }
@media (max-width: 560px) { .help-who { white-space: normal; } }
.help-who-box .help-who-one { margin: var(--space-3) 0 0; }
.setting-card .tfa-note { flex-basis: 100%; margin: var(--space-3) 0 0; }
.logo-track.js-marquee { animation: none; }

/* Datensicherung: Wiederherstellen, zweiter Standort */
.offsite-card { margin-bottom: var(--space-6); }
.offsite-card p { margin: var(--space-2) 0 0; }
.restore-table tr.changed td { font-weight: 600; }
.restore-plus { color: var(--color-success-ink, #15803d); }
.restore-minus { color: var(--color-critical-ink); }
.restore-keep { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.restore-confirm label { max-width: 420px; }
.backup-upload { margin: var(--space-4) 0; }
.backup-upload summary { cursor: pointer; }
.inline-upload { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-3); }
.inline-upload input[type=file] { width: auto; margin: 0; }
.purge-pop { display: inline-block; position: relative; }
.purge-pop > summary { list-style: none; cursor: pointer; }
.purge-pop > summary::-webkit-details-marker { display: none; }
.purge-pop[open] form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 280px; padding: var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); border-radius: 12px; box-shadow: 0 10px 30px rgb(0 0 0 / .15); display: grid; gap: var(--space-2); text-align: left; white-space: normal; }
button.help-shot { padding: 0; cursor: zoom-in; width: 100%; text-align: left; font: inherit; }
button.help-shot:focus-visible { outline: 3px solid var(--color-text); outline-offset: 3px; }
.zoom-box { position: fixed; inset: 0; z-index: 1000; background: rgb(0 0 0 / .82); display: grid; place-items: center; padding: 24px; cursor: zoom-out; }
.zoom-box img { max-width: min(1600px, 100%); max-height: calc(100vh - 48px); width: auto; height: auto; border-radius: 10px; box-shadow: 0 20px 60px rgb(0 0 0 / .5); background: #fff; }
.zoom-close { position: fixed; top: 14px; right: 18px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: #111; font-size: 26px; line-height: 1; cursor: pointer; }

/* Ordneransicht der Sicherungen */
.folder-list { display: grid; gap: var(--space-3); }
.folder { padding: 0; overflow: hidden; }
.folder > summary { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; }
.folder > summary::-webkit-details-marker { display: none; }
.folder > summary svg { color: var(--color-text); flex: 0 0 auto; }
.folder-count { margin-left: auto; color: var(--color-text-muted); }
.file-list { list-style: none; margin: 0; padding: 0 var(--space-5) var(--space-3); border-top: 1px solid var(--color-border); }
.file-list li { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) 0 var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-border); }
.file-list li:last-child { border-bottom: 0; }
.file-list .file-name { font-size: .85rem; word-break: break-all; }
.file-list .btn { margin-left: auto; }
.legal-check span a { text-decoration: underline; }
.mk-paperwork-lead { max-width: 720px; margin: 0 auto var(--space-7); }
.mk-paperwork-note { margin-top: var(--space-6); color: var(--color-text-muted); }

/* Angebotsfinder Schritt 3: Beispielbild Nachhilfe & BuT (blendet sich ein) */
.addon-example { margin: var(--space-5) 0 0; animation: addon-pop .45s ease-out both; animation-delay: .15s; }
.addon-example figcaption { font-size: .82rem; color: var(--color-text-muted); margin-bottom: var(--space-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; line-height: 1.4; }
.addon-example-shot { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; background: #fff; cursor: zoom-in; box-shadow: 0 8px 24px rgb(0 0 0 / .08); }
.addon-example-shot img { display: block; width: 100%; height: auto; }
.addon-example-zoom { position: absolute; right: 8px; bottom: 8px; font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgb(17 17 17 / .78); color: #fff; }
.addon-example-shot:hover { box-shadow: 0 12px 30px rgb(0 0 0 / .14); }
@keyframes addon-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .addon-example { animation: none; } }
.addon-disclaimer { font-size: .76rem; line-height: 1.45; color: var(--color-text-muted); margin: var(--space-3) 0 0; }

/* Support: Anhänge */
.attach-input { display: grid; gap: 4px; margin: var(--space-2) 0; }
.attach-label { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: .875rem; }
.attach-input input[type=file] { margin: 0; }
.attach-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.attach-list a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface-raised); color: var(--color-text); text-decoration: none; font-size: .82rem; max-width: 100%; }
.attach-list a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.attach-list a small { color: var(--color-text-muted); }
.attach-list a:hover { border-color: var(--color-text); }
.msg.mine .attach-list a { background: color-mix(in srgb, var(--color-surface-raised) 85%, transparent); }

/* Rabattcodes */
.discount-card { margin-bottom: var(--space-5); }
.discount-form { display: grid; grid-template-columns: minmax(0, 320px) auto; gap: var(--space-2) var(--space-3); align-items: end; }
.discount-form label { margin: 0; }
.discount-form input { text-transform: uppercase; letter-spacing: .04em; }
.discount-form p { grid-column: 1 / -1; margin: 0; }
.discount-active { display: flex; gap: var(--space-4); align-items: center; }
.discount-badge { display: inline-grid; place-items: center; min-width: 64px; height: 44px; padding: 0 12px; border-radius: 12px; background: var(--color-text); color: var(--color-background); font-weight: 700; font-size: 1.05rem; }
@media (max-width: 560px) { .discount-form { grid-template-columns: 1fr; } } .register-code input { text-transform: uppercase; }
.discount-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3) var(--space-4); align-items: end; }
.discount-edit .wide { grid-column: 1 / -1; }
.discount-edit label { margin: 0; }
.code-input { text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.code-chip { color: var(--color-text); white-space: nowrap; font-weight: 700; letter-spacing: .05em; padding: 3px 8px; border-radius: 6px; background: var(--color-surface-sunken, #f1f1f2); }
.filter-tabs { margin: var(--space-5) 0 var(--space-3); display: inline-flex; flex-wrap: wrap; gap: 2px; grid-template-columns: none; }
.filter-tabs a { text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; border-radius: var(--radius-pill); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
.filter-tabs a.active { background: var(--color-surface-raised); color: var(--color-text); box-shadow: 0 0 0 1px var(--color-border), var(--shadow-subtle); }
.discount-uses td { padding-top: 0; border-top: 0; }
.discount-uses ul { margin: var(--space-2) 0 0; padding-left: 1.2em; }
.code-row { display: flex; gap: var(--space-2); align-items: end; }
.code-row label { flex: 1; margin: 0; }
.register-total { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); margin: var(--space-4) 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md, 12px); background: var(--color-surface-sunken, #f6f6f7); }
.register-total strong { font-size: 1.35rem; }
.pay-sim-sum { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0; }
.pay-sim-sum dt { color: var(--color-text-muted); }
.register-code { border: 1.5px dashed var(--color-border-strong, #bbb); border-radius: var(--radius-md, 12px); padding: 0 var(--space-4); margin: var(--space-4) 0; background: var(--color-surface-raised, #fff); }
.register-code > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; font-size: 1.05rem; font-weight: var(--weight-semibold); cursor: pointer; list-style: none; }
.register-code > summary::-webkit-details-marker { display: none; }
.register-code > summary::after { content: '+'; margin-left: auto; font-size: 1.4rem; font-weight: 400; color: var(--color-text-muted); }
.register-code[open] > summary::after { content: '−'; }
.register-code[open] { padding-bottom: var(--space-3); border-style: solid; }
.register-code > summary svg { width: 22px; height: 22px; }

/* ---------- Willkommensfenster (erster Login) ---------- */
html.welcome-open:has([data-welcome]:not(.closing)) { overflow: hidden; }
.welcome { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 84px 16px 24px; overflow-y: auto;
  background: radial-gradient(ellipse at 50% 40%, rgba(30,30,40,.45), rgba(8,8,12,.72)); backdrop-filter: blur(8px) saturate(1.2);
  animation: welcome-fade .5s ease both; }
.welcome.closing { animation: welcome-fade .35s ease reverse both; }
.welcome-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.welcome-confetti.back { z-index: 0; }
.welcome-stage { width: min(560px, 100%); position: relative; z-index: 1; }
.welcome-card {
  position: relative; margin: 0; padding: 40px 36px 28px; border-radius: 28px; text-align: center;
  background: var(--color-surface-raised, #fff); color: var(--color-text);
  box-shadow: 0 50px 100px -20px rgba(0,0,0,.45), 0 30px 60px -30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) inset;
  animation: welcome-in .5s cubic-bezier(.2, .8, .2, 1) both; }
.welcome.closing .welcome-card { animation: welcome-out .4s cubic-bezier(.5, 0, .75, 0) both; }
.welcome-sheen { display: none; }
.welcome-coin { position: relative; width: 104px; height: 104px; margin: -92px auto 14px; }
.coin-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden;
  background: radial-gradient(circle at 30% 25%, #fff, #e9e9ee 60%, #cfcfd8); box-shadow: 0 18px 40px -8px rgba(0,0,0,.45), 0 0 0 6px #fff, 0 0 0 7px rgba(0,0,0,.08); overflow: hidden; }
.coin-face img, .coin-face svg, .coin-face .brandmark { width: 64%; height: 64%; object-fit: contain; }
.coin-back { transform: rotateY(180deg); font-size: 52px; background: radial-gradient(circle at 30% 25%, #2b2b33, #111 70%); }
.welcome-kicker { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); }
.welcome h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 4.6vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em; }
.welcome-lead { margin: 0 auto 10px; max-width: 30em; font-size: 1.05rem; line-height: 1.55; }
.welcome-status { display: inline-block; margin: 2px 0 14px; padding: 6px 14px; border-radius: 999px; font-size: .9rem; font-weight: 600;
  background: var(--color-success-bg); color: var(--color-success-ink); }
.welcome-sub { margin: 6px 0 10px; font-weight: 700; text-align: left; }
.welcome-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.welcome-step { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 14px; text-align: left; cursor: pointer; font: inherit; color: inherit;
  border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface, #fafafa);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  animation: step-in .4s ease both; animation-delay: calc(.25s + var(--i) * .08s); }
.welcome-step:hover, .welcome-step:focus-visible { transform: translateY(-1px); border-color: var(--color-text); box-shadow: 0 14px 28px -12px rgba(0,0,0,.35); }
.step-num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px;
  background: var(--color-text, #111); color: var(--color-surface-raised, #fff); box-shadow: 0 4px 10px -2px rgba(0,0,0,.35); }
.step-text { flex: 1; display: grid; gap: 1px; }
.step-text small { color: var(--color-text-muted); font-size: .85rem; }
.step-arrow { font-size: 1.2rem; color: var(--color-text-muted); transition: transform .2s ease; }
.welcome-step:hover .step-arrow { transform: translateX(4px); color: var(--color-text); }
.welcome-help { margin: 4px 0 18px; font-size: .92rem; color: var(--color-text-muted); line-height: 1.5; }
.welcome-q { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; font-weight: 800; font-size: 12px; color: var(--color-text); vertical-align: -4px; }
.welcome-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.welcome-actions .btn { min-width: 160px; }
@keyframes welcome-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes welcome-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes welcome-out { to { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .welcome-card { padding: 32px 20px 22px; border-radius: 22px; } .welcome { align-items: start; padding-top: 70px; } .welcome-actions .btn { flex: 1; min-width: 0; } }
@media (prefers-reduced-motion: reduce) {
  .welcome, .welcome-card, .welcome-coin, .welcome-step { animation: welcome-fade .3s ease both !important; }
}
.discount-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; margin: var(--space-5) 0 var(--space-3); }
.discount-toolbar .filter-tabs { margin: 0; }
.discount-search { display: flex; gap: var(--space-2); align-items: center; flex: 1; max-width: 460px; }
.discount-search input { flex: 1; margin: 0; }
.code-channels { margin-top: 4px; max-width: 26em; line-height: 1.4; }
.discount-table td:first-child { min-width: 260px; }

/* ---------- Fernzugriff ---------- */
.remote-live { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 0 rgba(229,72,77,.6); animation: remote-pulse 1.6s ease-out infinite; vertical-align: middle; flex: none; }
@keyframes remote-pulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.55); } 70% { box-shadow: 0 0 0 10px rgba(229,72,77,0); } 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); } }
.remote-indicator { position: relative; }
.remote-indicator > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 12px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: .88rem;
  background: #fff1f1; color: #b4232a; border: 1.5px solid rgba(229,72,77,.45); white-space: nowrap; }
.remote-indicator > summary::-webkit-details-marker { display: none; }
.remote-indicator > summary svg { width: 18px; height: 18px; }
.remote-pop { position: absolute; right: 0; top: calc(100% + 8px); width: min(340px, 86vw); z-index: 60; padding: var(--space-4); border-radius: 16px; background: var(--color-surface-raised); border: 1px solid var(--color-border); box-shadow: 0 20px 40px -12px rgba(0,0,0,.35); display: grid; gap: var(--space-2); }
.remote-pop p { margin: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .remote-indicator > summary { background: #3a1517; color: #ffb3b6; } }
:root[data-theme="dark"] .remote-indicator > summary { background: #3a1517; color: #ffb3b6; }
@media (max-width: 720px) { .remote-label { display: none; } .remote-indicator > summary { padding: 0 10px; } }
/* Betreiber im Fernzugriff: roter Rahmen um das ganze Programm, wie bei einer Bildschirmfreigabe */
body.remote-mode::after { content: ''; position: fixed; inset: 0; border: 4px solid #e5484d; pointer-events: none; z-index: 8999; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.remote-return { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; border-radius: 999px; background: #111; color: #fff; box-shadow: 0 12px 30px -8px rgba(0,0,0,.5); font-size: .9rem; }
.remote-return .btn { background: #fff; color: #111; }
.remote-current { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; border-color: rgba(229,72,77,.45); }
.remote-form { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr auto; gap: var(--space-3); align-items: end; }
.remote-form label { margin: 0; }
.remote-form .btn svg { width: 18px; height: 18px; }
@media (max-width: 760px) { .remote-form { grid-template-columns: 1fr; } }
.remote-modal { position: fixed; inset: 0; z-index: 9100; display: grid; place-items: center; padding: 16px; background: rgba(10,10,14,.6); backdrop-filter: blur(6px); animation: welcome-fade .3s ease both; }
.remote-card { width: min(480px, 100%); padding: 32px 28px 24px; border-radius: 24px; text-align: center; background: var(--color-surface-raised); color: var(--color-text); box-shadow: 0 40px 80px -20px rgba(0,0,0,.5); animation: remote-in .5s cubic-bezier(.2, 1.2, .3, 1) both; }
.remote-card h2 { margin: 6px 0 8px; font-size: 1.45rem; }
.remote-card p { margin: 0 0 10px; }
.remote-reason { background: var(--color-surface, #f6f6f7); border-radius: 12px; padding: 10px 14px; text-align: left; }
.remote-facts { text-align: left; margin: 8px 0 18px; padding-left: 1.2em; display: grid; gap: 4px; font-size: .92rem; color: var(--color-text-muted); }
.remote-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.remote-actions form { margin: 0; }
.remote-actions .btn { min-width: 150px; }
.remote-radar { position: relative; width: 84px; height: 84px; margin: 0 auto 6px; display: grid; place-items: center; }
.remote-radar svg { position: relative; width: 34px; height: 34px; z-index: 1; }
.remote-radar::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: var(--color-text); }
.remote-radar svg { color: var(--color-surface-raised); }
.remote-radar span { position: absolute; inset: 14px; border-radius: 50%; border: 2px solid var(--color-text); opacity: 0; animation: radar 2.4s ease-out infinite; }
.remote-radar span:nth-child(2) { animation-delay: .8s; } .remote-radar span:nth-child(3) { animation-delay: 1.6s; }
.remote-radar.ok::before { background: var(--color-success); } .remote-radar.ok span { border-color: var(--color-success); }
@keyframes radar { from { transform: scale(1); opacity: .7; } to { transform: scale(2.1); opacity: 0; } }
@keyframes remote-in { from { opacity: 0; transform: translateY(30px) scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .remote-live, .remote-radar span, .remote-card { animation: none; } }
.club-remote-btn .btn svg { width: 18px; height: 18px; }

/* Anruf: Auswahl bei der Freigabe, Hinweis-Chip, Anruf-Fenster */
.remote-media { margin: 0 0 16px; }
.remote-media-q { font-weight: 700; margin: 0 0 8px; }
.remote-media-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.remote-media-opts label { margin: 0; cursor: pointer; }
.remote-media-opts input { position: absolute; opacity: 0; }
.remote-media-opts label > span { display: grid; gap: 4px; justify-items: center; padding: 10px 6px; border: 1.5px solid var(--color-border); border-radius: 14px; font-size: .85rem; font-weight: 600; transition: border-color .15s, background .15s; }
.remote-media-opts b { font-size: 1.4rem; }
.remote-media-opts input:checked + span { border-color: var(--color-text); background: var(--color-surface, #f6f6f7); box-shadow: 0 0 0 1px var(--color-text); }
.remote-media-opts input:focus-visible + span { outline: 2px solid var(--color-text); outline-offset: 2px; }
@media (max-width: 420px) { .remote-media-opts { grid-template-columns: 1fr; } .remote-media-opts label > span { grid-auto-flow: column; justify-content: start; } }
.call-chip { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 999px; text-decoration: none; color: #fff; background: #111; box-shadow: 0 14px 32px -10px rgba(0,0,0,.55); }
.call-chip small { display: block; color: rgba(255,255,255,.7); font-size: .78rem; }
.call-chip-ring { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #16a34a; font-size: 1.1rem; }
.call-chip.waiting .call-chip-ring { animation: call-ring 1.2s ease-in-out infinite; }
@keyframes call-ring { 0%, 100% { transform: rotate(0); box-shadow: 0 0 0 0 rgba(22,163,74,.6); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(14deg); } 60% { transform: rotate(-8deg); box-shadow: 0 0 0 12px rgba(22,163,74,0); } }
.remote-pop .btn.buy { justify-self: start; }
body.call-page { margin: 0; min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; background: #0e0e11; color: #fff; font-family: Inter, system-ui, sans-serif; }
.call-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); }
.call-head div { display: grid; flex: 1; }
.call-head small { color: rgba(255,255,255,.65); font-size: .8rem; }
.call-badge { font-size: .72rem; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.1); }
.call-stage { position: relative; display: grid; place-items: center; overflow: hidden; min-height: 280px; }
.call-screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.call-remote { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.call-screen:not([hidden]) ~ .call-remote { inset: auto; left: 12px; top: 12px; width: 32%; height: auto; aspect-ratio: 4 / 3; border-radius: 12px; z-index: 2; box-shadow: 0 8px 20px rgba(0,0,0,.5); }
.call-avatar { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; font-size: 2.4rem; font-weight: 800; background: linear-gradient(135deg, #2b2b33, #4a4a57); box-shadow: 0 0 0 8px rgba(255,255,255,.04); }
.call-self { position: absolute; right: 12px; bottom: 12px; width: 30%; max-width: 180px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; z-index: 3; transform: scaleX(-1); box-shadow: 0 8px 20px rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.2); }
.call-join { position: absolute; inset: auto 16px 24px; z-index: 4; display: grid; gap: 10px; justify-items: center; text-align: center; }
.call-join p { margin: 0; max-width: 34em; }
.call-join .muted { color: rgba(255,255,255,.6); }
.call-controls { display: flex; justify-content: center; gap: 14px; padding: 14px; background: rgba(255,255,255,.04); border-top: 1px solid rgba(255,255,255,.08); }
.call-btn { display: grid; gap: 4px; justify-items: center; min-width: 64px; padding: 10px 8px; border: 0; border-radius: 16px; font-size: 1.3rem; cursor: pointer; color: #fff; background: rgba(255,255,255,.1); }
.call-btn span { font-size: .72rem; font-weight: 600; }
.call-btn[aria-pressed="true"] { background: #fff; color: #111; }
.call-btn.hangup { background: #e5484d; }

/* Mitglieder-Import */
.import-steps { list-style: none; display: flex; gap: var(--space-2); padding: 0; margin: 0 0 var(--space-4); flex-wrap: wrap; }
.import-steps li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--color-surface, #f4f4f5); color: var(--color-text-muted); font-weight: 600; font-size: .9rem; }
.import-steps li span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-border); color: var(--color-text); font-size: .8rem; }
.import-steps li.current { color: var(--color-text); background: var(--color-surface-raised); box-shadow: 0 0 0 1px var(--color-border); }
.import-steps li.current span, .import-steps li.done span { background: var(--color-text); color: var(--color-surface-raised); }
.import-drop { display: grid; justify-items: center; gap: 6px; padding: var(--space-6) var(--space-4); margin: 0 0 var(--space-4); border: 2px dashed var(--color-border-strong, #c8c8cc); border-radius: 18px; text-align: center; cursor: pointer; background: var(--color-surface, #fafafa); }
.import-drop svg { width: 34px; height: 34px; }
.import-drop input { margin-top: 8px; max-width: 100%; }
.import-tips { margin: var(--space-3) 0 0; padding-left: 1.2em; display: grid; gap: 4px; }
.import-file { display: flex; gap: 12px; align-items: center; padding: 10px 14px; margin-bottom: var(--space-4); border-radius: 12px; background: var(--color-surface, #f6f6f7); }
.import-file svg { width: 24px; height: 24px; }
.import-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px 16px; margin: var(--space-3) 0; }
.import-map-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 0; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 12px; }
.import-map-row.mapped { border-color: var(--color-text); }
.import-col { display: grid; min-width: 0; }
.import-col small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-map-row select { margin: 0; }
.import-arrow { color: var(--color-text-muted); }
.import-defaults { margin: var(--space-3) 0; }
.import-defaults summary { cursor: pointer; font-weight: 600; }
.import-defaults-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.import-defaults-grid label { margin: 0; }
.import-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: var(--space-4); }
.import-summary div { display: grid; padding: 12px 14px; border-radius: 14px; background: var(--color-surface, #f6f6f7); border-left: 4px solid var(--color-border); }
.import-summary strong { font-size: 1.6rem; line-height: 1.1; }
.import-summary span { font-size: .85rem; color: var(--color-text-muted); }
.import-summary .ok { border-left-color: var(--color-success); } .import-summary .warn { border-left-color: var(--color-warning); }
.import-summary .dup { border-left-color: var(--color-info, #3b82f6); } .import-summary .error { border-left-color: var(--color-critical); }
@media (max-width: 640px) { .import-summary { grid-template-columns: 1fr 1fr; } .import-map { grid-template-columns: 1fr; } }
.import-dup-choice { display: grid; gap: 6px; margin-bottom: var(--space-3); }
.imp-badge { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 800; font-size: .8rem; color: #fff; }
.imp-badge.imp-ok { background: var(--color-success); } .imp-badge.imp-warn { background: var(--color-warning); }
.imp-badge.imp-dup { background: var(--color-info, #3b82f6); } .imp-badge.imp-error { background: var(--color-critical); }
tr.imp-error td, tr.imp-dup td { opacity: .65; }
.import-actions { margin-top: var(--space-4); }
.import-table td:last-child { min-width: 220px; }

/* ---------- Benachrichtigungen ---------- */
.bell-btn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--color-border); color: var(--color-text); background: var(--color-surface-raised); }
.bell-btn svg { width: 19px; height: 19px; }
.bell-btn.ring svg { animation: bell-ring 2.4s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes bell-ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(16deg); } 80% { transform: rotate(-14deg); } 85% { transform: rotate(10deg); } 90% { transform: rotate(-6deg); } }
.bell-count { position: absolute; top: -5px; right: -6px; border-radius: 999px; background: #e5484d; color: #fff; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--color-surface-raised); }
.notif-toasts { position: fixed; top: 72px; right: 18px; z-index: 9500; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); perspective: 800px; }
.notif-toast { display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 14px 12px; border-radius: 18px; text-decoration: none; color: var(--color-text); background: var(--color-surface-raised); border: 1px solid var(--color-border); box-shadow: 0 24px 50px -16px rgba(0,0,0,.4); animation: toast-in .55s cubic-bezier(.2, 1.3, .3, 1) both; transform-origin: top right; }
.notif-toast.out { animation: toast-out .3s ease both; }
.notif-toast-emoji { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-size: 1.6rem; background: var(--color-surface, #f4f4f5); }
.notif-toast-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.notif-toast-text span { font-size: .9rem; color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-toast-text small { font-size: .75rem; color: var(--color-text-muted); }
.notif-toast-x { border: 0; background: none; font-size: 1.3rem; line-height: 1; color: var(--color-text-muted); cursor: pointer; padding: 0 2px; }
@keyframes toast-in { from { opacity: 0; transform: translateX(40px) rotateY(-30deg) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(40px) scale(.95); } }
.push-device-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.push-device-head > div { flex: 1; min-width: 220px; }
.push-device-head h2 { margin: 0; }
.push-device-head p { margin: 2px 0 0; }
.push-device-icon { font-size: 2rem; }
.push-help { margin-top: var(--space-3); }
.push-help summary { cursor: pointer; }
.push-help ul { padding-left: 1.2em; display: grid; gap: 4px; }
.notif-grid { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-5); align-items: start; }
@media (max-width: 900px) { .notif-grid { grid-template-columns: 1fr; } .phone-preview { justify-self: center; } }
.notif-fields { display: grid; gap: var(--space-3); }
.notif-fields label { margin: 0; }
.emoji-row { display: grid; grid-template-columns: 90px 1fr; gap: var(--space-3); align-items: start; }
.emoji-row .emoji-pick { padding-top: 22px; }
.emoji-current input { font-size: 1.6rem; text-align: center; padding: 4px; height: 52px; }
.emoji-pick { display: flex; flex-wrap: wrap; gap: 4px; }
.emoji-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid transparent; background: var(--color-surface, #f4f4f5); font-size: 1.25rem; cursor: pointer; transition: transform .12s; }
.emoji-btn:hover { transform: scale(1.18); } .emoji-btn.on { border-color: var(--color-text); background: var(--color-surface-raised); }
.icon-pick { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; }
.icon-pick legend { font-weight: 600; margin-bottom: 6px; font-size: .9rem; }
.icon-pick label { margin: 0; cursor: pointer; }
.icon-pick input { position: absolute; opacity: 0; }
.icon-pick label > span { display: grid; justify-items: center; gap: 2px; width: 74px; padding: 8px 4px; border: 1.5px solid var(--color-border); border-radius: 12px; }
.icon-pick label > span > svg { width: 22px; height: 22px; }
.icon-pick small { font-size: .7rem; color: var(--color-text-muted); }
.icon-pick input:checked + span { border-color: var(--color-text); box-shadow: 0 0 0 1px var(--color-text); }
.icon-pick input:focus-visible + span { outline: 2px solid var(--color-text); outline-offset: 2px; }
.notif-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 560px) { .notif-row, .emoji-row { grid-template-columns: 1fr; } }
.notif-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 12px; }
.phone { position: relative; width: 280px; height: 520px; border-radius: 42px; padding: 14px; background: linear-gradient(160deg, #3b4a6b, #1a1f2e 55%, #4a2f4f); box-shadow: 0 0 0 10px #111, 0 30px 60px -20px rgba(0,0,0,.6); overflow: hidden; }
.phone-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 92px; height: 24px; border-radius: 14px; background: #000; }
.phone-time { margin: 52px 0 26px; text-align: center; color: #fff; font-size: 3.2rem; font-weight: 300; letter-spacing: -.02em; }
.phone-push { padding: 10px 12px 12px; border-radius: 18px; background: rgba(255,255,255,.78); backdrop-filter: blur(12px); color: #111; animation: toast-in .6s cubic-bezier(.2, 1.3, .3, 1) both; }
.phone-push-head { display: flex; align-items: center; gap: 6px; font-size: .68rem; letter-spacing: .04em; margin-bottom: 4px; }
.phone-push-head img { width: 18px; height: 18px; border-radius: 5px; }
.phone-push-head .muted { margin-left: auto; color: #555; }
.phone-push strong { display: block; font-size: .92rem; }
.phone-push p { margin: 2px 0 0; font-size: .85rem; color: #333; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.app-toast-prev { position: absolute; left: 14px; right: 14px; bottom: 22px; display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: #fff; color: #111; }
.app-toast-prev small { display: block; color: #777; font-size: .7rem; }
.app-toast-icon { display: grid; place-items: center; border-radius: 10px; }
.app-toast-icon svg { width: 20px; height: 20px; }
.notif-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.notif-list form { margin: 0; }
.notif-item { width: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--color-border); border-radius: 14px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.notif-list li.unread .notif-item { background: var(--color-surface, #f6f6f7); border-color: var(--color-text); }
.notif-icon { position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--color-surface-raised); border: 1px solid var(--color-border); }
.notif-icon svg { width: 20px; height: 20px; }
.notif-icon b { position: absolute; right: -8px; bottom: -6px; font-size: 1.05rem; }
.notif-text { display: grid; gap: 2px; flex: 1; }
.notif-text span { color: var(--color-text-muted); font-size: .92rem; }
.notif-dot { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; margin-top: 6px; }
.push-toggle { margin: 4px 0 12px; }
@media (prefers-reduced-motion: reduce) { .notif-toast, .phone-push, .bell-btn.ring svg { animation: none; } }

/* Mitteilungen: Brett */
.notif-compose > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.05rem; }
.notif-compose[open] > summary { margin-bottom: var(--space-4); }
.publish-switches { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--color-surface, #f6f6f7); }
.publish-switches .toggle > span:last-child { display: grid; }
.publish-switches small { font-size: .8rem; }
.board { margin: var(--space-5) 0; }
.board-title { font-size: 1.1rem; margin: 0 0 var(--space-3); }
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.board-card { position: relative; display: grid; border-radius: 18px; background: var(--color-surface-raised); border: 1px solid var(--color-border); box-shadow: 0 10px 24px -18px rgba(0,0,0,.35); transform: rotate(-.4deg); transition: transform .2s ease, box-shadow .2s ease; }
.board-card:nth-child(2n) { transform: rotate(.5deg); }
.board-card:hover { transform: translateY(-3px) rotate(0); box-shadow: 0 18px 32px -18px rgba(0,0,0,.45); }
.board-card::before { content: '📌'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 1.2rem; }
.board-card.unread { border-color: var(--color-text); }
.board-link { display: flex; gap: 12px; padding: 18px 16px 12px; color: inherit; text-decoration: none; }
.board-text { display: grid; gap: 3px; flex: 1; min-width: 0; }
.board-body { color: var(--color-text-muted); font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.board-meta { display: flex; justify-content: space-between; align-items: center; padding: 0 16px 10px; }
.board-meta form { margin: 0; }
a.notif-item { text-decoration: none; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-icon.big { width: 56px; height: 56px; border-radius: 16px; }
.notif-icon.big svg { width: 26px; height: 26px; }
.notif-icon.big b { font-size: 1.4rem; }
.announcement-head { display: flex; gap: 16px; align-items: center; margin-bottom: var(--space-4); }
.announcement-head h1 { margin: 0; font-size: 1.6rem; }
.announcement-head p { margin: 2px 0 0; }
.announcement-body { font-size: 1.05rem; line-height: 1.6; }
.announcement-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.announcement-actions > span { flex: 1; }
.announcement-actions form { margin: 0; }
.unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; vertical-align: middle; }

/* Recht & Updates */
.legal-filter { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.legal-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.legal-chip { border-radius: 999px; border: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); font-size: .88rem; font-weight: 600; background: var(--color-surface-raised); }
.legal-chip.on { background: var(--color-text); color: var(--color-surface-raised); border-color: var(--color-text); }
.legal-search { display: flex; gap: var(--space-2); max-width: 520px; }
.legal-search input { flex: 1; margin: 0; }
.legal-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--color-border); display: grid; gap: 10px; }
.legal-month { margin: 10px 0 0 -26px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); background: var(--color-surface-raised); padding: 2px 8px; width: max-content; border-radius: 999px; border: 1px solid var(--color-border); }
.legal-entry { position: relative; }
.legal-entry::before { content: ''; position: absolute; left: -25px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-surface-raised); border: 2px solid var(--color-border-strong, #bbb); }
.legal-entry.unread::before { background: #e5484d; border-color: #e5484d; }
.legal-entry.important::before { background: var(--color-warning); border-color: var(--color-warning); }
.legal-entry > a { display: flex; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--color-border); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.legal-entry > a:hover { border-color: var(--color-text); transform: translateX(2px); }
.legal-entry.important > a { border-color: var(--color-warning); background: var(--color-warning-bg); }
.legal-date { flex: none; width: 82px; font-size: .82rem; font-weight: 700; color: var(--color-text-muted); padding-top: 2px; }
.legal-body { display: grid; gap: 4px; min-width: 0; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.legal-topic { font-size: .76rem; font-weight: 700; border-radius: 999px; background: var(--color-surface, #f4f4f5); }
.legal-important { font-size: .76rem; font-weight: 700; color: var(--color-warning-ink, #8a5a00); }
.legal-new { font-size: .7rem; font-weight: 800; color: #fff; background: #e5484d; padding: 1px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em; }
.legal-note { font-size: .92rem; }
.legal-disclaimer { margin-top: var(--space-4); }
.legal-detail h1 { margin: 8px 0 4px; font-size: 1.5rem; }
.legal-note-box { margin: var(--space-4) 0; padding: 14px 16px; border-radius: 14px; background: var(--color-surface, #f6f6f7); border-left: 4px solid var(--color-text); }
.legal-note-box p { margin: 6px 0 0; }
.legal-review-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.legal-review h2 { margin: 8px 0 6px; font-size: 1.1rem; }
.legal-review h2 a { color: inherit; }
.legal-release { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); align-items: end; margin-top: var(--space-3); }
.legal-release .wide { grid-column: 1 / -1; }
.legal-release label { margin: 0; }
.legal-source-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); align-items: end; }
.legal-source-form label { margin: 0; }
.legal-url { word-break: break-all; max-width: 420px; }
@media (max-width: 560px) { .legal-entry > a { flex-direction: column; gap: 4px; } .legal-date { width: auto; } }
.badge.main-admin { background: #fff4d6; color: #7a5200; border: 1px solid #f0d58a; }
.role-self { display: inline-flex; gap: 8px; align-items: center; }
.role-label { font-weight: 600; }
.handover summary { cursor: pointer; }
.handover ol { margin: var(--space-3) 0 0; padding-left: 1.2em; display: grid; gap: 4px; }

/* Klickgeräusche: Klangauswahl */
.sound-control { display: grid; gap: var(--space-3); justify-items: start; width: 100%; }
.sound-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; width: 100%; }
.sound-choice strong { overflow-wrap: anywhere; }
.sound-choice { margin: 0; cursor: pointer; }
.sound-choice input { position: absolute; opacity: 0; }
.sound-choice > span { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 10px 12px; border: 1.5px solid var(--color-border); border-radius: 14px; transition: border-color .15s, background .15s; }
.sound-choice b { grid-row: span 2; font-size: 1.4rem; }
.sound-choice strong { font-size: .9rem; }
.sound-choice small { color: var(--color-text-muted); font-size: .76rem; }
.sound-choice input:checked + span { border-color: var(--color-text); box-shadow: 0 0 0 1px var(--color-text); background: var(--color-surface, #f6f6f7); }
.sound-choice input:focus-visible + span { outline: 2px solid var(--color-text); outline-offset: 2px; }
.sound-volume { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sound-volume label { margin: 0; cursor: pointer; }
.sound-volume input { position: absolute; opacity: 0; }
.sound-volume label > span { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--color-border); font-size: .85rem; font-weight: 600; }
.sound-volume input:checked + span { background: var(--color-text); color: var(--color-surface-raised); border-color: var(--color-text); }
.sound-row { align-items: start; }

/* ---------- Plastische Symbol-Kacheln (Farbverlauf, Glanzkante, weicher Schatten) ---------- */
.i3d { --a: #5a5a66; --b: #24242c; --r: 9px; position: relative; flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r); overflow: hidden; isolation: isolate;
  background: linear-gradient(165deg, var(--a) 0%, var(--b) 75%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.22), 0 0 0 1px color-mix(in srgb, var(--b) 70%, #000), 0 3px 6px -2px rgba(0,0,0,.35); }
/* Glanzfläche oben mit klarer Kante (Vorschlag B: klar & kräftig) */
.i3d::before { content: ''; position: absolute; inset: 1px 1px 52% 1px; z-index: 0; border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.10)); }
.i3d .ui-icon { position: relative; z-index: 1; width: 64%; height: 64%; color: #fff; stroke-width: 2.4; opacity: 1 !important; filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
.i3d-sm { width: 24px; height: 24px; --r: 7px; }
.i3d-lg { width: 44px; height: 44px; --r: 13px; }
.i3d-xl { width: 56px; height: 56px; --r: 16px; }
.i3d-graphite { --a: #61616d; --b: #1d1d24; }
.i3d-slate { --a: #9aa3b5; --b: #4f596d; }
.i3d-blue { --a: #6f9bff; --b: #2a55d4; }
.i3d-indigo { --a: #8f8cff; --b: #4a40cc; }
.i3d-violet { --a: #b48cff; --b: #6c3fd1; }
.i3d-sky { --a: #6fd0f7; --b: #1d86c4; }
.i3d-teal { --a: #4fd6c0; --b: #11877a; }
.i3d-green { --a: #6fd88a; --b: #1f8d45; }
.i3d-amber { --a: #ffcf6e; --b: #db8410; }
.i3d-orange { --a: #ffa774; --b: #dc5226; }
.i3d-rose { --a: #ff8fa0; --b: #cf3556; }
.i3d-red { --a: #ff7d78; --b: #c42b2b; }
.i3d-bronze { --a: #e2b07a; --b: #9c5f26; }
/* Navigation: Kacheln statt Striche, etwas gedämpft bis zum Hover/aktiv */
.side-nav a:hover .i3d, .side-nav a.active .i3d { filter: none; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .side-nav a .i3d { transition: none; } }
.notif-icon.tile { background: none; border: 0; width: auto; height: auto; }
.notif-icon.tile b { right: -6px; bottom: -6px; }
.icon-pick span .i3d { width: 30px; height: 30px; }
.icon-pick input:checked + span .i3d { transform: scale(1.06); }
.app-toast-icon { background: none; width: auto; height: auto; }
.remote-media-opts span .i3d { width: 36px; height: 36px; --r: 11px; }
.sound-choice .i3d { grid-row: span 2; width: 34px; height: 34px; --r: 10px; }
.legal-topic { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; }
.legal-topic .i3d, .legal-chip .i3d { width: 20px; height: 20px; --r: 6px; }
.legal-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px; }
.publish-switches .toggle { align-items: center; }
.publish-switches .toggle .i3d { margin-right: 2px; }
.help-card-title .i3d { margin-right: 4px; }
.push-device-head .i3d { flex: none; }

/* Menü anordnen: lange drücken und ziehen */
.side-nav a { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.side-nav.nav-drag-active { cursor: grabbing; }
.side-nav a.nav-dragging { position: relative; z-index: 5; background: var(--color-surface-raised); box-shadow: 0 10px 24px -10px rgba(0,0,0,.35), 0 0 0 1px var(--color-border-strong, #ccc); transform: scale(1.03); cursor: grabbing; }
.nav-order-form { margin: 2px 0 0; padding: 0 var(--space-3); }
.nav-order-hint { margin: 0; font-size: .72rem; color: var(--color-text-muted); opacity: .8; }
.nav-order-reset { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* Startseite: Datenschutzkonform nach DSGVO */
.mk-gdpr { text-align: center; }
.mk-gdpr-text { max-width: 760px; margin: 0 auto var(--space-6); line-height: 1.65; font-size: 1.02rem; }
.mk-gdpr-badges { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); }
.mk-gdpr-badges li { display: flex; border-radius: 18px; background: var(--color-surface-raised); border: 1px solid var(--color-border); box-shadow: 0 12px 28px -22px rgba(0,0,0,.45); }
.mk-gdpr-badges span { display: grid; }
.mk-gdpr-badges strong { letter-spacing: -.01em; }
.mk-gdpr-badges small { color: var(--color-text-muted); font-size: .8rem; line-height: 1.35; }

/* Ungelesene Mitteilungen und neue Rechts-Updates: rot pulsierend (deutlich sichtbar), bis gelesen */
@keyframes unread-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(229, 72, 77, .75); }
  25% { transform: scale(1.22); }
  45% { transform: scale(.96); box-shadow: 0 0 0 9px rgba(229, 72, 77, 0); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
}
.side-nav a em.nav-pulse { background: #e5484d; color: #fff; border-color: transparent; font-weight: var(--weight-bold); animation: unread-pulse 1.6s ease-out infinite; }
.bell-count { animation: unread-pulse 1.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .side-nav a em.nav-pulse, .bell-count { animation: none; } }
.side-label-hide { display: flex; align-items: center; justify-content: space-between; }
.side-hide { border: 0; background: none; color: var(--color-text-muted); font-size: 1rem; line-height: 1; width: 22px; height: 22px; border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.side-group:hover .side-hide, .side-hide:focus-visible { opacity: 1; }
.side-hide:hover { background: var(--color-hover); color: var(--color-text); }
@media (hover: none) { .side-hide { opacity: .7; } }

/* Einstellungen → Menü: Bereiche und Menüpunkte ein-/ausblenden */
.nav-choose { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-3); width: 100%; }
.nav-choose-group { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 14px; align-content: start; }
.nav-choose-head { margin: 0 0 4px; }
.nav-choose-item { margin: 0; display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.nav-choose-item .i3d { width: 20px; height: 20px; --r: 6px; }

/* Alle Symbole einheitlich schwarz mit glänzender Oberfläche (überschreibt die Bereichsfarben) */
:root:not([data-icons="farbig"]) .i3d[class] { --a: #55555c; --b: #0b0b0d;
  background: linear-gradient(180deg, #5b5b62 0%, #2a2a2f 48%, #0d0d10 52%, #050506 100%); }
:root:not([data-icons="farbig"]) .i3d[class]::before { inset: 1px 1px 50% 1px; background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.06)); }
:root:not([data-icons="farbig"]) .i3d[class] .ui-icon { color: #fff; filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.side-nav a .i3d { filter: none; }
/* Einstellungen: Symbol-Stil wählen (Vorschau unabhängig von der aktuellen Wahl) */
.icon-style-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; width: 100%; }
.icon-style-choice { margin: 0; cursor: pointer; }
.icon-style-choice input { position: absolute; opacity: 0; }
.icon-style-choice > span { display: grid; gap: 4px; padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: 14px; }
.icon-style-choice input:checked + span { border-color: var(--color-text); box-shadow: 0 0 0 1px var(--color-text); background: var(--color-surface, #f6f6f7); }
.icon-style-choice small { color: var(--color-text-muted); font-size: .8rem; }
.icon-style-preview { display: flex; gap: 6px; margin-bottom: 4px; }
.icon-style-preview.is-farbig .i3d[class] { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.35), 0 3px 6px -2px rgba(0,0,0,.35) !important; }
.icon-style-preview.is-farbig .i3d-blue { background: linear-gradient(165deg, #6f9bff, #2a55d4 75%) !important; }
.icon-style-preview.is-farbig .i3d-orange { background: linear-gradient(165deg, #ffa774, #dc5226 75%) !important; }
.icon-style-preview.is-farbig .i3d-violet { background: linear-gradient(165deg, #b48cff, #6c3fd1 75%) !important; }
.icon-style-preview.is-farbig .i3d-teal { background: linear-gradient(165deg, #4fd6c0, #11877a 75%) !important; }
.icon-style-preview.is-farbig .i3d-rose { background: linear-gradient(165deg, #ff8fa0, #cf3556 75%) !important; }
.icon-style-preview.is-schwarz .i3d[class] { background: linear-gradient(180deg, #5b5b62 0%, #2a2a2f 48%, #0d0d10 52%, #050506 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 1px #000, 0 3px 6px -2px rgba(0,0,0,.45) !important; }
/* DSGVO-Abzeichen: einheitlich – Symbol oben, Überschrift und Text auf gleicher Höhe */
.mk-gdpr-badges { align-items: stretch; }
.mk-gdpr-badges li { flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 10px; padding: 20px 14px 18px; }
.mk-gdpr-badges span { justify-items: center; gap: 4px; }
.mk-gdpr-badges strong { white-space: nowrap; font-size: .95rem; }
.mk-gdpr-badges small { max-width: 18ch; }
/* Logo im Kasten „Sicherheit & Datenschutz“ */
.mk-security { align-items: stretch; }
.mk-security > div:first-child { display: flex; flex-direction: column; }
.mk-security-logo { margin-top: auto; padding-top: var(--space-6); }
.mk-security-logo img { width: min(240px, 70%); height: auto; opacity: .95; }
@media (max-width: 900px) { .mk-security-logo { margin-top: var(--space-4); } .mk-security-logo img { width: 180px; } }

/* Alles Rote pulsiert einheitlich und kräftig: Support, ungelesene Mitteilungen, Recht & Updates, Glocke, Punkte und „neu“-Marken */
.alarm-critical, .alarm-warning, .alarm-dot.alarm-critical, .side-nav a em.nav-pulse, .bell-count, .notif-dot, .unread-dot, .legal-new, .remote-live, .legal-entry.unread::before {
  animation: unread-pulse 1.3s cubic-bezier(.3, 0, .2, 1) infinite !important; }
.legal-entry.unread::before { transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
  .alarm-critical, .alarm-warning, .alarm-dot.alarm-critical, .side-nav a em.nav-pulse, .bell-count, .notif-dot, .unread-dot, .legal-new, .remote-live, .legal-entry.unread::before { animation: none !important; }
}

/* Seitenweise Listen */
.list-pager { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

/* Zähler-Kreise (Glocke, Menü): exakt rund, Ziffer genau mittig – auch beim Pulsieren */
.bell-count, .side-nav a em {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  text-align: center; white-space: nowrap; transform-origin: 50% 50%;
}
.bell-count { min-width: 20px; height: 20px; padding: 0 4px; font-size: 11px; }
.side-nav a em { min-width: 20px; height: 20px; padding: 0 5px; }
/* Inter sitzt optisch etwas hoch: Zeilenkasten auf Versalhöhe zuschneiden (wo der Browser es kann) */
@supports (text-box: trim-both cap alphabetic) {
  .bell-count, .side-nav a em { text-box: trim-both cap alphabetic; }
}

/* =====================================================================
   Premium-3D-Buttons: Klavierlack (primär), poliertes Glas mit Chromkante (sekundär),
   im Dunkelmodus poliertes Chrom (primär) und Rauchglas (sekundär).
   Nur Optik: Größen, Abstände, Positionen und Funktionen bleiben unverändert.
   Aufbau je Material: weicher Glanz oben (radial) · Grundverlauf · Lichtkante oben (inset) ·
   Schattenkante unten (inset) · Kontaktschatten · weicher Raumschatten.
   ===================================================================== */
:root {
  /* Klavierlack */
  --p3-bg: radial-gradient(130% 85% at 50% -12%, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .07) 42%, rgba(255, 255, 255, 0) 62%),
           linear-gradient(180deg, #2c2c30 0%, #161618 48%, #0a0a0b 100%);
  --p3-bg-hover: radial-gradient(130% 85% at 50% -12%, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .10) 45%, rgba(255, 255, 255, 0) 66%),
           linear-gradient(180deg, #36363b 0%, #1c1c1f 48%, #0d0d0e 100%);
  --p3-bg-active: radial-gradient(130% 85% at 50% -12%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 55%),
           linear-gradient(180deg, #0c0c0d 0%, #141416 55%, #1b1b1e 100%);
  --p3-ink: #ffffff; --p3-edge: #000000; --p3-text-shadow: 0 -1px 0 rgba(0, 0, 0, .55);
  --p3-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), inset 0 -1px 0 rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .045),
               0 1px 1px rgba(0, 0, 0, .40), 0 3px 6px -1px rgba(0, 0, 0, .26), 0 12px 24px -10px rgba(0, 0, 0, .45);
  --p3-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .40), inset 0 -1px 0 rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .07),
               0 1px 1px rgba(0, 0, 0, .40), 0 6px 12px -3px rgba(0, 0, 0, .30), 0 18px 32px -12px rgba(0, 0, 0, .50), 0 0 0 4px rgba(0, 0, 0, .04);
  --p3-shadow-active: inset 0 2px 5px rgba(0, 0, 0, .70), inset 0 -1px 0 rgba(255, 255, 255, .10), 0 1px 1px rgba(0, 0, 0, .30);
  /* Poliertes Glas mit Chromkante */
  --s3-bg: radial-gradient(130% 85% at 50% -12%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, 0) 70%),
           linear-gradient(180deg, #ffffff 0%, #f6f6f8 50%, #e9e9ed 100%);
  --s3-bg-hover: radial-gradient(130% 85% at 50% -12%, #ffffff 0%, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, 0) 75%),
           linear-gradient(180deg, #ffffff 0%, #fafafb 50%, #efeff3 100%);
  --s3-bg-active: linear-gradient(180deg, #e4e4e9 0%, #eeeef2 55%, #f6f6f8 100%);
  --s3-ink: var(--color-text); --s3-text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
  --s3-edge: rgba(0, 0, 0, .10) rgba(0, 0, 0, .13) rgba(0, 0, 0, .22);
  --s3-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(0, 0, 0, .06), inset 0 0 0 1px rgba(255, 255, 255, .5),
               0 1px 1px rgba(0, 0, 0, .07), 0 3px 6px -2px rgba(0, 0, 0, .10), 0 10px 20px -10px rgba(0, 0, 0, .22);
  --s3-shadow-hover: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(0, 0, 0, .06), inset 0 0 0 1px rgba(255, 255, 255, .7),
               0 1px 1px rgba(0, 0, 0, .07), 0 6px 12px -4px rgba(0, 0, 0, .14), 0 16px 28px -12px rgba(0, 0, 0, .26), 0 0 0 4px rgba(0, 0, 0, .025);
  --s3-shadow-active: inset 0 2px 4px rgba(0, 0, 0, .12), inset 0 -1px 0 rgba(255, 255, 255, .9), 0 1px 0 rgba(255, 255, 255, .6);
  /* Mulde für Tab-Leisten und Schalter */
  --well-bg: linear-gradient(180deg, #ececf0 0%, #f4f4f6 100%);
  --well-shadow: inset 0 1px 2px rgba(0, 0, 0, .10), inset 0 0 0 1px rgba(0, 0, 0, .04), 0 1px 0 rgba(255, 255, 255, .9);
  --knob-bg: radial-gradient(120% 120% at 35% 25%, #ffffff 0%, #f4f4f6 45%, #d9d9de 100%);
  --knob-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 1px rgba(0, 0, 0, .10), 0 1px 1px rgba(0, 0, 0, .22), 0 2px 5px rgba(0, 0, 0, .18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --p3-bg: radial-gradient(130% 85% at 50% -12%, #ffffff 0%, rgba(255, 255, 255, .6) 40%, rgba(255, 255, 255, 0) 65%),
             linear-gradient(180deg, #fbfbfd 0%, #e2e2e7 50%, #c4c4cb 100%);
    --p3-bg-hover: radial-gradient(130% 85% at 50% -12%, #ffffff 0%, rgba(255, 255, 255, .75) 45%, rgba(255, 255, 255, 0) 70%),
             linear-gradient(180deg, #ffffff 0%, #ebebef 50%, #d0d0d6 100%);
    --p3-bg-active: linear-gradient(180deg, #bdbdc4 0%, #d6d6dc 55%, #e6e6ea 100%);
    --p3-ink: #111111; --p3-edge: #9a9aa2; --p3-text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
    --p3-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(0, 0, 0, .22), 0 1px 1px rgba(0, 0, 0, .6), 0 4px 8px -2px rgba(0, 0, 0, .55), 0 14px 26px -10px rgba(0, 0, 0, .7);
    --p3-shadow-hover: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(0, 0, 0, .22), 0 1px 1px rgba(0, 0, 0, .6), 0 6px 14px -3px rgba(0, 0, 0, .6), 0 0 18px rgba(255, 255, 255, .10);
    --p3-shadow-active: inset 0 2px 5px rgba(0, 0, 0, .35), 0 1px 1px rgba(0, 0, 0, .5);
    --s3-bg: radial-gradient(130% 85% at 50% -12%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 45%, rgba(255, 255, 255, 0) 65%),
             linear-gradient(180deg, #2e2e33 0%, #222226 50%, #18181b 100%);
    --s3-bg-hover: radial-gradient(130% 85% at 50% -12%, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .06) 50%, rgba(255, 255, 255, 0) 70%),
             linear-gradient(180deg, #35353a 0%, #28282c 50%, #1c1c1f 100%);
    --s3-bg-active: linear-gradient(180deg, #141416 0%, #1c1c1f 60%, #232327 100%);
    --s3-ink: var(--color-text); --s3-text-shadow: 0 -1px 0 rgba(0, 0, 0, .6);
    --s3-edge: rgba(255, 255, 255, .14) rgba(255, 255, 255, .09) rgba(0, 0, 0, .7);
    --s3-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .6), 0 4px 10px -3px rgba(0, 0, 0, .6);
    --s3-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .6), 0 6px 14px -4px rgba(0, 0, 0, .7), 0 0 14px rgba(255, 255, 255, .05);
    --s3-shadow-active: inset 0 2px 5px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .05);
    --well-bg: linear-gradient(180deg, #0f0f11 0%, #151517 100%);
    --well-shadow: inset 0 1px 3px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .03), 0 1px 0 rgba(255, 255, 255, .05);
    --knob-bg: radial-gradient(120% 120% at 35% 25%, #ffffff 0%, #e6e6ea 45%, #b9b9c0 100%);
    --knob-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 1px rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  --p3-bg: radial-gradient(130% 85% at 50% -12%, #ffffff 0%, rgba(255, 255, 255, .6) 40%, rgba(255, 255, 255, 0) 65%),
           linear-gradient(180deg, #fbfbfd 0%, #e2e2e7 50%, #c4c4cb 100%);
  --p3-bg-hover: radial-gradient(130% 85% at 50% -12%, #ffffff 0%, rgba(255, 255, 255, .75) 45%, rgba(255, 255, 255, 0) 70%),
           linear-gradient(180deg, #ffffff 0%, #ebebef 50%, #d0d0d6 100%);
  --p3-bg-active: linear-gradient(180deg, #bdbdc4 0%, #d6d6dc 55%, #e6e6ea 100%);
  --p3-ink: #111111; --p3-edge: #9a9aa2; --p3-text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  --p3-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(0, 0, 0, .22), 0 1px 1px rgba(0, 0, 0, .6), 0 4px 8px -2px rgba(0, 0, 0, .55), 0 14px 26px -10px rgba(0, 0, 0, .7);
  --p3-shadow-hover: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(0, 0, 0, .22), 0 1px 1px rgba(0, 0, 0, .6), 0 6px 14px -3px rgba(0, 0, 0, .6), 0 0 18px rgba(255, 255, 255, .10);
  --p3-shadow-active: inset 0 2px 5px rgba(0, 0, 0, .35), 0 1px 1px rgba(0, 0, 0, .5);
  --s3-bg: radial-gradient(130% 85% at 50% -12%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 45%, rgba(255, 255, 255, 0) 65%),
           linear-gradient(180deg, #2e2e33 0%, #222226 50%, #18181b 100%);
  --s3-bg-hover: radial-gradient(130% 85% at 50% -12%, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .06) 50%, rgba(255, 255, 255, 0) 70%),
           linear-gradient(180deg, #35353a 0%, #28282c 50%, #1c1c1f 100%);
  --s3-bg-active: linear-gradient(180deg, #141416 0%, #1c1c1f 60%, #232327 100%);
  --s3-ink: var(--color-text); --s3-text-shadow: 0 -1px 0 rgba(0, 0, 0, .6);
  --s3-edge: rgba(255, 255, 255, .14) rgba(255, 255, 255, .09) rgba(0, 0, 0, .7);
  --s3-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .6), 0 4px 10px -3px rgba(0, 0, 0, .6);
  --s3-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .6), 0 6px 14px -4px rgba(0, 0, 0, .7), 0 0 14px rgba(255, 255, 255, .05);
  --s3-shadow-active: inset 0 2px 5px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .05);
  --well-bg: linear-gradient(180deg, #0f0f11 0%, #151517 100%);
  --well-shadow: inset 0 1px 3px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .03), 0 1px 0 rgba(255, 255, 255, .05);
  --knob-bg: radial-gradient(120% 120% at 35% 25%, #ffffff 0%, #e6e6ea 45%, #b9b9c0 100%);
  --knob-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 1px rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .5);
}

/* Gemeinsam: gestochen scharfe Schrift und Symbole, sanfte Übergänge */
.btn, .bell-btn, .help-btn, .menu-toggle {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-clip: padding-box;
  transition: transform 140ms cubic-bezier(.2, .7, .3, 1), box-shadow 180ms ease, border-color 180ms ease, filter 180ms ease;
}
.btn svg, .bell-btn svg, .menu-toggle svg { shape-rendering: geometricPrecision; }

/* Sekundär: poliertes Glas mit Chromkante (inkl. Gefahr-Variante, Glocke, Hilfe, Menü) */
.btn, .btn.small, .btn.large, .bell-btn, .help-btn, .menu-toggle {
  background: var(--s3-bg); border-color: var(--s3-edge); color: var(--s3-ink); box-shadow: var(--s3-shadow); text-shadow: var(--s3-text-shadow);
}
.btn:hover, .bell-btn:hover, .help-btn:hover, .menu-toggle:hover {
  background: var(--s3-bg-hover); border-color: var(--s3-edge); color: var(--s3-ink); box-shadow: var(--s3-shadow-hover);
}
.btn:active, .bell-btn:active, .help-btn:active, .menu-toggle:active {
  background: var(--s3-bg-active); box-shadow: var(--s3-shadow-active); transform: translateY(1px); transition-duration: 60ms;
}
.btn.danger { color: var(--color-critical-ink); }
.btn.danger:hover { color: var(--color-critical-ink); box-shadow: var(--s3-shadow-hover), 0 0 0 4px color-mix(in srgb, var(--color-critical) 8%, transparent); }

/* Primär: Klavierlack (dunkel: poliertes Chrom) */
.btn.primary, .btn.buy, .btn.go,
.btn.small.primary, .btn.small.buy, .btn.small.go, .btn.large.primary, .btn.large.buy {
  background: var(--p3-bg); border-color: var(--p3-edge); color: var(--p3-ink); box-shadow: var(--p3-shadow); text-shadow: var(--p3-text-shadow);
}
.btn.primary:hover, .btn.buy:hover, .btn.go:hover,
.btn.small.primary:hover, .btn.small.buy:hover, .btn.small.go:hover {
  background: var(--p3-bg-hover); border-color: var(--p3-edge); color: var(--p3-ink); box-shadow: var(--p3-shadow-hover); transform: translateY(-1px); filter: none;
}
.btn.primary:active, .btn.buy:active, .btn.go:active,
.btn.small.primary:active, .btn.small.buy:active, .btn.small.go:active {
  background: var(--p3-bg-active); box-shadow: var(--p3-shadow-active); transform: translateY(1px);
}

/* PayPal bleibt gelb, bekommt aber dieselbe Glanz- und Tiefenwirkung */
.btn.paypal-btn {
  background: radial-gradient(130% 85% at 50% -12%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #ffd56a 0%, #ffc439 50%, #efb01d 100%);
  border-color: #d99d16; color: #111111; text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(150, 95, 0, .35), 0 1px 1px rgba(120, 80, 0, .3), 0 4px 8px -2px rgba(120, 80, 0, .25), 0 12px 22px -10px rgba(120, 80, 0, .4);
}
.btn.paypal-btn:hover { filter: brightness(1.04) saturate(1.05); border-color: #d99d16; }
.btn.paypal-btn:active { box-shadow: inset 0 2px 5px rgba(120, 80, 0, .4); }

/* Textlinks und deaktivierte Buttons bleiben flach */
button.link, .btn.link, button.link:hover, .btn.link:hover, .btn.link:active { background: none; box-shadow: none; text-shadow: none; border: 0; transform: none; }
.btn:disabled, .btn.disabled, .btn[aria-disabled="true"] { box-shadow: none; filter: saturate(.6); }

/* Tab-Leisten und Auswahlfelder: eingelassene Mulde, aktive Wahl als erhabenes Glas */
.period-tabs, .segmented { background: var(--well-bg); box-shadow: var(--well-shadow); border-color: transparent; }
.period-tabs a.active, .segmented label:has(input:checked) {
  background: var(--s3-bg); color: var(--color-text); text-shadow: var(--s3-text-shadow);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(0, 0, 0, .08), 0 1px 1px rgba(0, 0, 0, .08), 0 3px 8px -2px rgba(0, 0, 0, .16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .period-tabs a.active, :root:not([data-theme="light"]) .segmented label:has(input:checked) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .6); }
}
:root[data-theme="dark"] .period-tabs a.active, :root[data-theme="dark"] .segmented label:has(input:checked) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .6); }

/* Schalter: Mulde + Chromknopf; eingeschaltet in Klavierlack */
.toggle-track, .switch .knob { background: var(--well-bg); box-shadow: var(--well-shadow); }
.toggle input:checked + .toggle-track, .switch.on .knob { background: var(--p3-bg); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .3); }
.toggle-track::after, .switch .knob::after, .switch.on .knob::after { background: var(--knob-bg); box-shadow: var(--knob-shadow); }

@media (prefers-reduced-motion: reduce) {
  .btn, .bell-btn, .help-btn, .menu-toggle { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}
.bell-count, .btn .badge, .btn em, .btn .count, .btn .tab-count { text-shadow: none; }

/* =====================================================================
   Symbole in Buttons: Metall-Verläufe + feine Prägung (passend zu den 3D-Buttons)
   Glas → dunkles Pianometall · Klavierlack → Chrom · Gefahr → rotes Metall
   Fallback: ohne Verlauf bleibt die normale Schriftfarbe (currentColor).
   ===================================================================== */
.vm-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
:root {
  --ico-on-glass: url(#vm-piano); --ico-on-glass-emboss: drop-shadow(0 1px 0 rgba(255, 255, 255, .95)) drop-shadow(0 -.5px 0 rgba(0, 0, 0, .18));
  --ico-on-lack: url(#vm-chrome); --ico-on-lack-emboss: drop-shadow(0 -.5px 0 rgba(0, 0, 0, .7)) drop-shadow(0 1px 1px rgba(0, 0, 0, .55));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ico-on-glass: url(#vm-chrome); --ico-on-glass-emboss: drop-shadow(0 -.5px 0 rgba(0, 0, 0, .8)) drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
    --ico-on-lack: url(#vm-piano); --ico-on-lack-emboss: drop-shadow(0 1px 0 rgba(255, 255, 255, .8)) drop-shadow(0 -.5px 0 rgba(0, 0, 0, .25));
  }
}
:root[data-theme="dark"] {
  --ico-on-glass: url(#vm-chrome); --ico-on-glass-emboss: drop-shadow(0 -.5px 0 rgba(0, 0, 0, .8)) drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
  --ico-on-lack: url(#vm-piano); --ico-on-lack-emboss: drop-shadow(0 1px 0 rgba(255, 255, 255, .8)) drop-shadow(0 -.5px 0 rgba(0, 0, 0, .25));
}
/* Glas-Buttons, Glocke */
.btn svg[stroke="currentColor"], .bell-btn svg[stroke="currentColor"] { stroke: var(--ico-on-glass) currentColor; filter: var(--ico-on-glass-emboss); }
.btn svg[fill="currentColor"], .bell-btn svg[fill="currentColor"] { fill: var(--ico-on-glass) currentColor; filter: var(--ico-on-glass-emboss); }
/* Klavierlack-Buttons */
:is(.btn.primary, .btn.buy, .btn.go) svg[stroke="currentColor"] { stroke: var(--ico-on-lack) currentColor; filter: var(--ico-on-lack-emboss); }
:is(.btn.primary, .btn.buy, .btn.go) svg[fill="currentColor"] { fill: var(--ico-on-lack) currentColor; filter: var(--ico-on-lack-emboss); }
/* Gefahr: rotes Metall */
.btn.danger svg[stroke="currentColor"] { stroke: url(#vm-ruby) currentColor; }
.btn.danger svg[fill="currentColor"] { fill: url(#vm-ruby) currentColor; }
/* Hover: Symbol leuchtet minimal auf; Klick: Prägung wird flacher */
.btn:hover svg, .bell-btn:hover svg { filter: var(--ico-on-glass-emboss) brightness(1.12); }
:is(.btn.primary, .btn.buy, .btn.go):hover svg { filter: var(--ico-on-lack-emboss) brightness(1.1); }
.btn:active svg, .bell-btn:active svg { filter: none; }
/* Text-Symbole: „?“-Knopf und Menü-Striche im selben Material */
.help-btn { color: transparent; -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #5a5a62 0%, #1f1f23 45%, #050506 60%, #2a2a2f 100%), var(--s3-bg); background-clip: text, padding-box, padding-box; -webkit-background-clip: text, padding-box, padding-box;
  text-shadow: none; filter: none; }
.help-btn:hover { color: transparent; background-image: linear-gradient(180deg, #6a6a72 0%, #2a2a2f 45%, #0b0b0d 60%, #34343a 100%), var(--s3-bg-hover); background-clip: text, padding-box, padding-box; -webkit-background-clip: text, padding-box, padding-box; }
.menu-toggle span { background: linear-gradient(90deg, #2a2a2f, #050506 50%, #2a2a2f); box-shadow: 0 1px 0 rgba(255, 255, 255, .9); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .help-btn { background-image: linear-gradient(180deg, #ffffff 0%, #ececf0 42%, #b4b4bc 55%, #f7f7f9 100%), var(--s3-bg); }
  :root:not([data-theme="light"]) .help-btn:hover { background-image: linear-gradient(180deg, #ffffff 0%, #f4f4f6 42%, #c4c4cb 55%, #ffffff 100%), var(--s3-bg-hover); }
  :root:not([data-theme="light"]) .menu-toggle span { background: linear-gradient(90deg, #c4c4cb, #ffffff 50%, #c4c4cb); box-shadow: 0 -1px 0 rgba(0, 0, 0, .6); }
}
:root[data-theme="dark"] .help-btn { background-image: linear-gradient(180deg, #ffffff 0%, #ececf0 42%, #b4b4bc 55%, #f7f7f9 100%), var(--s3-bg); }
:root[data-theme="dark"] .help-btn:hover { background-image: linear-gradient(180deg, #ffffff 0%, #f4f4f6 42%, #c4c4cb 55%, #ffffff 100%), var(--s3-bg-hover); }
:root[data-theme="dark"] .menu-toggle span { background: linear-gradient(90deg, #c4c4cb, #ffffff 50%, #c4c4cb); box-shadow: 0 -1px 0 rgba(0, 0, 0, .6); }
@media (forced-colors: active) { .help-btn { color: ButtonText; -webkit-text-fill-color: ButtonText; background-image: none; } }
/* Etwas kräftigere Linien, damit der Metallverlauf sichtbar wird (Symbolgröße unverändert) */
.btn svg.ui-icon, .bell-btn svg.ui-icon { stroke-width: 1.9; }

/* =====================================================================
   Menü- und Kachel-Symbole: Chrom-Zeichen mit Prägung (wie in den Buttons),
   Kachel mit derselben Tiefe wie Klavierlack-Buttons. Glanzkante (Variante B) bleibt.
   ===================================================================== */
.i3d .ui-icon, :root:not([data-icons="farbig"]) .i3d[class] .ui-icon {
  stroke: url(#vm-chrome) currentColor; color: #fff;
  filter: drop-shadow(0 -.5px 0 rgba(0, 0, 0, .75)) drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
:root:not([data-icons="farbig"]) .i3d[class] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(255, 255, 255, .10), 0 0 0 1px #000,
              0 1px 1px rgba(0, 0, 0, .35), 0 3px 6px -2px rgba(0, 0, 0, .40), 0 8px 14px -8px rgba(0, 0, 0, .45);
}
/* Menü: Hover hebt die Kachel und lässt das Chrom aufleuchten, aktiver Reiter mit edler Beleuchtung */
.side-nav a .i3d { transition: transform 140ms cubic-bezier(.2, .7, .3, 1), box-shadow 180ms ease; }
.side-nav a:hover .i3d .ui-icon, .side-nav a.active .i3d .ui-icon { filter: drop-shadow(0 -.5px 0 rgba(0, 0, 0, .75)) drop-shadow(0 1px 1px rgba(0, 0, 0, .6)) brightness(1.15); }
:root:not([data-icons="farbig"]) .side-nav a:hover .i3d[class] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -1px 0 rgba(255, 255, 255, .12), 0 0 0 1px #000,
              0 1px 1px rgba(0, 0, 0, .35), 0 5px 10px -3px rgba(0, 0, 0, .45), 0 12px 18px -10px rgba(0, 0, 0, .5);
}
:root:not([data-icons="farbig"]) .side-nav a.active .i3d[class] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(255, 255, 255, .14), 0 0 0 1px #000,
              0 1px 1px rgba(0, 0, 0, .35), 0 4px 10px -3px rgba(0, 0, 0, .5), 0 0 0 3px rgba(0, 0, 0, .06);
}
.side-nav a:active .i3d { transform: translateY(1px); }
.side-nav a:active .i3d .ui-icon { filter: none; }
/* Dunkelmodus: heller Ring um die Kachel bleibt erhalten */
:root[data-theme="dark"]:not([data-icons="farbig"]) .i3d[class] { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(255,255,255,.16), 0 3px 8px -2px rgba(0,0,0,.7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-icons="farbig"]) .i3d[class] { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(255,255,255,.16), 0 3px 8px -2px rgba(0,0,0,.7); } }
@media (prefers-reduced-motion: reduce) { .side-nav a .i3d, .side-nav a:active .i3d { transition: none; transform: none; } }

/* Lange Wörter ohne Leerzeichen (z. B. Notizen, Protokolltexte, Links) umbrechen statt aus der Karte zu laufen */
main p, main li, main dd, main .pre, main h1, main h2, main h3, .card { overflow-wrap: anywhere; }
main td { overflow-wrap: break-word; }

/* Dokument-„Papier“ (Rechnung, Vorschauen) bleibt auch im Dunkelmodus ein helles Blatt mit dunkler Schrift */
.sheet {
  color-scheme: light;
  --color-text: #111111; --color-text-2: #333336; --color-text-muted: #6b6b70; --color-text-faint: #8a8a8f;
  --color-border: #e5e5ea; --color-border-strong: #d1d1d6; --color-surface: #f6f6f7; --color-surface-raised: #ffffff; --color-hover: #f2f2f4;
  --text: #111111; --muted: #6b6b70; --border: #e5e5ea; --border-strong: #d1d1d6;
}
.sheet h1, .sheet h2, .sheet h3, .sheet h4, .sheet a, .sheet strong, .sheet th, .sheet td { color: inherit; }
.sheet .muted, .sheet .small.muted { color: var(--color-text-muted); }

/* Gelbe Warn-Zähler im Dunkelmodus: dunkle Schrift auf Bernstein (sonst kaum lesbar) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .alarm-warning { color: #1a1200; } }
:root[data-theme="dark"] .alarm-warning { color: #1a1200; }

/* Aktionen je Tabellenzeile: klappt innerhalb der Zeile auf (wird in scrollbaren Tabellen nicht abgeschnitten) */
.row-menu { display: inline-block; text-align: right; }
.row-menu > summary { list-style: none; cursor: pointer; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu > summary::after { content: ' ▾'; font-size: .8em; }
.row-menu[open] > summary::after { content: ' ▴'; }
.row-menu-list { display: grid; gap: 6px; margin-top: 8px; min-width: 210px; }
.row-menu-list form { margin: 0; }

/* Kassenbuch (GoBD): stornierte Buchungen durchgestrichen, Storno-Buchungen markiert, Festschreibung */
tr.tx-cancelled td { opacity: .6; }
tr.tx-cancelled .tx-text, tr.tx-cancelled td.num { text-decoration: line-through; text-decoration-thickness: 1px; }
tr.tx-storno td { background: color-mix(in srgb, var(--color-warning) 6%, transparent); }
.tx-lock { color: var(--color-text-muted); margin-top: 2px; }
.tx-storno-menu .row-menu-list { min-width: 240px; }
.tx-storno-menu > summary::after { content: none; }
.ledger-lock h2 { font-size: 1.05rem; }
.ledger-lock .inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.ledger-lock .inline-form label { flex: 1 1 180px; margin: 0; }

/* Mitgliedsnummer */
.member-no-col { width: 1%; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.member-no-badge { display: inline-block; vertical-align: middle; font-size: .5em; font-weight: 600; letter-spacing: .02em; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-surface-sunken); color: var(--color-text-2); font-variant-numeric: tabular-nums; position: relative; top: -.15em; }
.sort-link { color: inherit; text-decoration: none; }
.sort-link:hover { text-decoration: underline; }
label .hint { display: block; font-weight: 400; font-size: .8125rem; color: var(--color-text-muted); margin-top: 4px; }

/* Mitgliedsnummern-Schema (Vereinsdaten) */
.scheme-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.scheme-choice { margin: 0; cursor: pointer; }
.scheme-choice input { position: absolute; opacity: 0; pointer-events: none; }
.scheme-choice > span { display: grid; gap: 4px; height: 100%; padding: 14px 16px; border-radius: var(--radius-medium); border: 1px solid var(--color-border-strong); background: var(--s3-bg); box-shadow: var(--s3-shadow); transition: box-shadow .15s, border-color .15s; }
.scheme-choice > span strong { font-variant-numeric: tabular-nums; font-size: 1.05rem; letter-spacing: .02em; }
.scheme-choice > span small { color: var(--color-text-muted); font-size: .8125rem; font-weight: 400; }
.scheme-choice:hover > span { box-shadow: var(--s3-shadow-hover); }
.scheme-choice input:checked + span { border-color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-text), var(--s3-shadow); }
.scheme-choice input:focus-visible + span { outline: var(--focus-outline); outline-offset: 2px; }
.scheme-preview strong { font-variant-numeric: tabular-nums; }

/* ---------- DIN A4: echte Seiten auf dem Bildschirm und beim Druck ---------- */
@page { size: A4; margin: 14mm; }
@page a4sheet { size: A4; margin: 0; }
.sheet.a4-page { page: a4sheet; }
.a4-pages { display: flex; flex-direction: column; align-items: center; gap: 10mm; padding: 0 0 12mm; }
.sheet.a4-page { width: 210mm; height: 297mm; max-width: none; margin: 0; padding: 18mm 20mm 20mm 25mm; position: relative; overflow: hidden; background: #fff; color: #111; border: 0; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / .12), 0 8px 24px rgb(0 0 0 / .10); flex: none; }
.a4-body { height: 100%; overflow: hidden; }
.a4-body > :first-child { margin-top: 0; }
.a4-foot { position: absolute; left: 25mm; right: 20mm; bottom: 8mm; font-size: 8pt; color: #8a8a8f; text-align: right; }
@media print {
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  .a4-pages { display: block; gap: 0; padding: 0; zoom: 1 !important; }
  .sheet.a4-page { box-shadow: none; border-radius: 0; margin: 0; break-after: page; page-break-after: always; }
  .sheet.a4-page:last-child { break-after: auto; page-break-after: auto; }
}
/* Druck aus der App (z. B. Rechnung): nur das Dokument, ohne Menü, Kopfzeile und Hinweise */
@media print {
  .sidebar, .appbar, .no-print, .notif-toasts, .flash, .alert, #vp-ui, .presence, .help-btn { display: none !important; }
  .shell { display: block !important; }
  .main, .main > * { padding: 0 !important; margin: 0 !important; max-width: none !important; }
}

/* Kalender: mit Outlook & Handy verbinden */
.cal-sub-buttons { display: grid; gap: 8px; margin: 10px 0; }
.cal-sub-manual { margin: 6px 0; }
.cal-sub-manual summary { cursor: pointer; color: var(--color-text-2); }
.copy-row { display: flex; gap: 6px; }
.copy-row input { flex: 1; min-width: 0; font-size: .8rem; }
.cal-sub-note { margin-top: 8px; }
.steps { padding-left: 1.2rem; display: grid; gap: 8px; }
.cal-import-btn { margin-top: 8px; }

/* Mitgliedsstatus (Vereinsdaten) */
.status-table input[name=label] { min-width: 200px; }
.status-add { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.status-add label:first-child { flex: 1 1 260px; margin: 0; }
.status-add .check { margin: 0 0 10px; }

/* Inventar & Schlüssel */
.upload-inline { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }
.upload-inline label { flex: 1 1 240px; margin: 0; }

/* Organigramm */
.org-scroll { overflow-x: auto; padding: 8px 0 16px; }
.org-tree { display: inline-block; min-width: 100%; text-align: center; }
.org-tree ul { position: relative; display: flex; justify-content: center; padding: 22px 0 0; margin: 0; }
.org-tree > ul { padding-top: 0; }
.org-tree li { position: relative; list-style: none; padding: 22px 8px 0; display: flex; flex-direction: column; align-items: center; }
.org-tree > ul > li { padding-top: 0; }
.org-tree li::before, .org-tree li::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 22px; border-top: 1.5px solid var(--color-border-strong); }
.org-tree li::after { right: auto; left: 50%; border-left: 1.5px solid var(--color-border-strong); }
.org-tree li:only-child::before, .org-tree li:only-child::after, .org-tree > ul > li::before, .org-tree > ul > li::after { display: none; }
.org-tree li:only-child { padding-top: 22px; }
.org-tree li:only-child::after { display: block; border-top: 0; width: 0; }
.org-tree > ul > li:only-child { padding-top: 0; }
.org-tree > ul > li:only-child::after { display: none; }
.org-tree li:first-child::before, .org-tree li:last-child::after { border: 0 none; }
.org-tree li:last-child::before { border-right: 1.5px solid var(--color-border-strong); border-radius: 0 8px 0 0; }
.org-tree li:first-child::after { border-radius: 8px 0 0 0; }
.org-tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; height: 22px; border-left: 1.5px solid var(--color-border-strong); }
.org-node { min-width: 150px; max-width: 220px; padding: 10px 14px; border-radius: var(--radius-medium); background: var(--s3-bg); border: 1px solid var(--color-border-strong); box-shadow: var(--s3-shadow); text-align: center; }
.org-tree > ul > li > .org-node { background: var(--p3-bg); color: var(--p3-ink); border-color: var(--p3-edge); box-shadow: var(--p3-shadow); }
.org-tree > ul > li > .org-node .org-person, .org-tree > ul > li > .org-node .org-contact a, .org-tree > ul > li > .org-node .org-note { color: inherit; opacity: .85; }
.org-title { font-weight: var(--weight-semibold); font-size: .875rem; line-height: 1.25; }
.org-person { font-size: .8125rem; color: var(--color-text-2); margin-top: 3px; }
.org-node.vacant .org-person { color: var(--color-text-faint); font-style: italic; }
.org-contact { display: grid; gap: 1px; margin-top: 4px; font-size: .72rem; color: var(--color-text-muted); overflow-wrap: anywhere; }
.org-note { margin-top: 4px; font-size: .72rem; color: var(--color-text-muted); }
.org-edit-list details > summary { cursor: pointer; padding: 6px 0; }
.org-edit { margin: 8px 0; }
.org-edit-tools { display: flex; gap: 8px; margin-bottom: 10px; }
.center { text-align: center; }
@page orgchart { size: A4 landscape; margin: 10mm; }
@media print {
  .org-wrap { page: orgchart; border: 0; box-shadow: none; padding: 0; }
  .org-scroll { overflow: visible; }
  .org-node { box-shadow: none; background: #fff !important; color: #111 !important; border-color: #888; }
}
/* Viele Unterpunkte (> 4): als umbrechendes Raster in einem Rahmen statt endloser Breite */
.org-tree ul.wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; margin: 22px auto 0; padding: 14px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-large); }
.org-tree ul.wrap::before { top: -23.5px; }
.org-tree ul.wrap > li { padding: 0; }
.org-tree ul.wrap > li::before, .org-tree ul.wrap > li::after { display: none; }
.org-tree ul.wrap > li > .org-node { max-width: none; width: 100%; }
.org-tree ul.wrap > li > ul { width: 100%; }

/* Kontenplan */
.kontenplan .kp-acc { width: 7.5em; font-variant-numeric: tabular-nums; }
.kontenplan tr.kp-hidden td { opacity: .55; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Organigramm: verschachtelte Ebenen im Raster als eingerückte Liste; schmaleres Raster; Kontakt einzeilig */
.org-tree ul.wrap { width: min(600px, 90vw); align-items: start; }
.org-tree ul.wrap > li > .org-node { height: auto; }
.org-tree ul.wrap > li { align-items: stretch; }
.org-tree ul.wrap ul { display: grid; gap: 6px; padding: 8px 0 0 12px; margin: 6px 0 0 12px; border-left: 1.5px solid var(--color-border-strong); justify-content: stretch; width: auto; }
.org-tree ul.wrap ul::before { display: none; }
.org-tree ul.wrap li li { padding: 0; align-items: stretch; }
.org-tree ul.wrap li li::before, .org-tree ul.wrap li li::after { display: none; }
.org-tree ul.wrap li li > .org-node { max-width: none; width: 100%; text-align: left; padding: 7px 10px; }
.org-contact a, .org-contact span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Schlüsselbestand: Buttons untereinander statt abgeschnitten */
.key-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* Nachhilfe: alles Rote pulsiert (abgelaufene Bewilligung / kein Bescheid) */
@keyframes red-text-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes red-bar-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .7); } 50% { box-shadow: 0 0 10px 2px rgba(229, 72, 77, .55); } }
@keyframes red-edge-pulse { 0%, 100% { border-left-color: var(--light-red); } 50% { border-left-color: rgba(229, 72, 77, .25); } }
.ampel-red .lamp i:nth-child(1), .dot-red { animation: unread-pulse 1.3s cubic-bezier(.3, 0, .2, 1) infinite; }
.ampel-red .ampel-text { animation: red-text-pulse 1.3s ease-in-out infinite; }
.period-bar.ampel-red > span { animation: red-bar-pulse 1.3s ease-in-out infinite; border-radius: 99px; }
.ampel-card.ampel-red { animation: red-edge-pulse 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .ampel-red .lamp i:nth-child(1), .dot-red, .ampel-red .ampel-text, .period-bar.ampel-red > span, .ampel-card.ampel-red { animation: none; }
}

/* Benutzer & Rechte: Suche */
.user-filters input[type=search] { flex: 2 1 260px; }
.page-jump { margin: 8px 0 0; }
#benutzerliste { scroll-margin-top: 80px; }

/* Benutzer & Rechte: Speichern der Häkchen */
.perm-save { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.perm-save .btn:disabled { opacity: .5; pointer-events: none; }
.perm-dirty-note { color: var(--color-warning-ink, #92400e); font-weight: 600; }
.perm-form.dirty { outline: 2px dashed color-mix(in srgb, var(--color-warning) 55%, transparent); outline-offset: 6px; border-radius: 8px; }
tr[id^="u-"] { scroll-margin-top: 90px; }

/* Tarifkarten: Etikett „Empfohlen“ immer einzeilig; Preis wechselt mit der Abrechnung */
.plan-option.featured::after { white-space: nowrap; line-height: 18px; }
.plan-option-price { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.plan-option-sub { font-size: .72rem; color: var(--color-text-2); }
.plan-option-price.pp-flip { animation: pp-flip .28s ease; }
@keyframes pp-flip { from { opacity: .2; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .plan-option-price.pp-flip { animation: none; } }
.plan-option-price [data-pp-main] { white-space: nowrap; font-size: 1rem; font-weight: var(--weight-semibold); color: var(--color-text); }
.plan-option-price [data-pp-main] small { font-weight: 400; color: var(--color-text-2); }
.plan-option-sub, .plan-option-vat { white-space: nowrap; }
.plan-option-vat { font-size: .68rem; color: var(--color-text-2); }

/* Tarife: Admin-Anzahl je Paket und individuelles Paket „Ab 500“ */
.plan-admins { display: inline-flex; align-self: flex-start; margin-top: .55rem; padding: 2px 10px; border-radius: var(--radius-pill); font-size: .78rem; font-weight: var(--weight-semibold); background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); color: var(--color-text); }
.plan.featured .plan-admins { background: color-mix(in srgb, var(--color-on-primary) 14%, transparent); border-color: color-mix(in srgb, var(--color-on-primary) 30%, transparent); color: var(--color-on-primary); }
.plan-individual { border-style: dashed; }
.plan-individual .plan-price strong { font-size: 1.6rem; }
.plan-option-admins { font-size: .75rem; font-weight: var(--weight-semibold); color: var(--color-text-2); }
.plan-option-individual { color: inherit; text-decoration: none; border-style: dashed; }
.plan-option-individual:hover { text-decoration: none; }
.plan-option-individual [data-pp-main] { font-size: 1rem; font-weight: var(--weight-semibold); color: var(--color-text); }
.plan-option-ask { margin-top: auto; font-size: .8rem; font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 3px; }
.plan-option-individual { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem 1rem; padding: .6rem .9rem; }
.plan-option-individual .plan-option-ask { margin: 0; }

/* Preisseite: Betrag und €-Zeichen nie trennen; Größe passt sich der Spaltenbreite an */
.pricing .plan-price { flex-wrap: nowrap; gap: .4rem; }
.pricing .plan-price strong, .pricing .plan-price s { white-space: nowrap; }
.pricing .plan { container-type: inline-size; }
.pricing .plan:not(.plan-individual) .plan-price strong { font-size: clamp(1.5rem, 14cqi, 2.5rem); }

/* Abstimmung */
.pre-line { white-space: pre-line; overflow-wrap: anywhere; }
.poll-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.poll-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-medium); color: inherit; text-decoration: none; transition: border-color var(--transition-fast), background-color var(--transition-fast); }
.poll-list a:hover { border-color: var(--color-text); background: var(--color-surface-raised); }
.poll-list .poll-title { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.poll-list li.poll-need a { border-color: var(--color-critical); box-shadow: inset 3px 0 0 var(--color-critical); }
.poll-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 12px; }
.poll-choice { border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: 10px 12px; display: grid; gap: 6px; }
.poll-choice legend { font-weight: var(--weight-semibold); padding: 0 4px; }
.poll-max { width: 4.5em; display: inline-block; margin-left: 4px; padding: 2px 6px; }
.poll-answers { display: grid; gap: 8px; margin: 12px 0 16px; }
.poll-answer { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-medium); cursor: pointer; font-weight: var(--weight-medium); }
.poll-answer:hover { border-color: var(--color-text); }
.poll-answer:has(input:checked) { border-color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-text); background: var(--color-surface-raised); }
.poll-answer input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-text); }
.poll-answer span { overflow-wrap: anywhere; }
.poll-bars { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.poll-bar-label { display: flex; justify-content: space-between; gap: 12px; font-weight: var(--weight-medium); }
.poll-bar-label span:first-child { overflow-wrap: anywhere; }
.poll-bar-label .num { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-text-2); }
.poll-bar { height: 10px; border-radius: 99px; background: var(--color-surface-sunken); overflow: hidden; margin-top: 4px; }
.poll-bar span { display: block; height: 100%; border-radius: inherit; background: var(--color-text-muted); transition: width .4s ease; }
.poll-bars li.top .poll-bar span { background: var(--color-text); }
.poll-bars li.top .poll-bar-label span:first-child { font-weight: var(--weight-semibold); }
.poll-names { margin-top: 2px; }
.poll-voters { margin-top: 16px; }
.poll-voters summary { cursor: pointer; font-weight: var(--weight-semibold); }
.poll-secret { margin: 6px 0 14px; align-items: center; }
.poll-secret > span:last-child { display: grid; gap: 2px; }
.poll-choice label.check { align-items: center; }
.poll-choice .poll-max { width: 4.2em; min-height: 0; height: 32px; padding: 2px 8px; margin: 0 0 0 6px; }
.poll-form .form-actions { flex-wrap: wrap; }

/* Antworten auf Mitteilungen */
.ann-replies { margin-top: 16px; }
.reply-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.reply { border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: 10px 14px; background: var(--color-surface); max-width: 85%; scroll-margin-top: 90px; }
.reply.mine { margin-left: auto; background: var(--color-surface-raised); border-color: var(--color-border-strong); }
.reply:target { box-shadow: 0 0 0 2px var(--color-text); }
.reply-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 4px; }
.reply-to { font-size: .75rem; font-weight: var(--weight-semibold); padding: 1px 8px; border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong); color: var(--color-text-2); }
.reply-to.private { background: var(--color-surface-sunken); }
.reply-body { overflow-wrap: anywhere; }
.reply-actions { display: flex; gap: 8px; justify-content: flex-end; }
.reply-actions:empty { display: none; }
.reply-form textarea { width: 100%; }
.reply-send { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 8px; }
.reply-target { display: flex; align-items: center; gap: 8px; margin: 0; }
.reply-target select { min-width: 220px; }
.reply-target-radios { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (max-width: 600px) { .reply { max-width: 100%; } .reply-target select { min-width: 0; width: 100%; } }

/* Schnittstelle (API) */
.api-new { border: 2px solid var(--color-text); }
.api-token-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.api-token { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .95rem; padding: 8px 12px; border-radius: var(--radius-small); background: var(--color-surface-sunken); border: 1px solid var(--color-border-strong); overflow-wrap: anywhere; user-select: all; max-width: 100%; }
.api-scopes { border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: 10px 12px; display: grid; gap: 6px; margin: 0 0 12px; }
.api-scopes legend { font-weight: var(--weight-semibold); padding: 0 4px; }
.api-scopes label.check { align-items: flex-start; }
.api-scopes label.check > span { display: grid; gap: 1px; }
.api-tokens li { display: grid; gap: 4px; }
.api-tokens li.off { opacity: .6; }
.api-tokens form { justify-self: start; margin-top: 4px; }
.api-docs code { overflow-wrap: anywhere; }
.api-example { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .8rem; background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-small); padding: 10px 12px; overflow-x: auto; white-space: pre; }
.api-docs td:nth-child(1), .api-docs td:nth-child(3) code { white-space: nowrap; }

/* Startseite: Kennzahlen und Funktionsübersicht */
.mk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); max-width: 1100px; margin: var(--space-8, 48px) auto 0; padding: 0 16px; }
.mk-stats > div { text-align: center; padding: var(--space-5, 20px) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-large, 16px); background: var(--color-surface-raised); display: grid; gap: 4px; }
.mk-stats strong { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mk-stats span { color: var(--color-text-2); font-size: .9rem; }
.mk-features-lead { max-width: 760px; margin: 0 auto var(--space-6, 28px); }
.mk-feature-group { margin: 0 auto var(--space-6, 28px); max-width: 1100px; }
.mk-feature-group h3 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-2); margin: 0 0 var(--space-3); display: flex; align-items: center; gap: 8px; }
.mk-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.mk-feature { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-large, 16px); background: var(--color-surface-raised); transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); }
.mk-feature:hover { border-color: var(--color-text); transform: translateY(-2px); box-shadow: 0 10px 24px rgb(0 0 0 / .07); }
.mk-feature .i3d { width: 40px; height: 40px; --r: 11px; flex: none; }
.mk-feature h4 { margin: 2px 0 4px; font-size: 1rem; }
.mk-feature p { margin: 0; font-size: .88rem; color: var(--color-text-2); line-height: 1.45; }
@media (max-width: 760px) { .mk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .mk-feature { transition: none; } .mk-feature:hover { transform: none; } }
.mk-features-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Menü-Reiter: Größe der Symbol-Kacheln (einzige Stelle) – Kachel 28 px, Symbol ≈ 21 px */
.side-nav a .i3d { width: 28px; height: 28px; --r: 8px; }
.side-nav a .i3d .ui-icon { width: 76%; height: 76%; stroke-width: 2.2; }
.side-nav a { padding-block: 2px; }

/* Mitglieder-Zugang (/mitglied) */
.member-portal { background: var(--color-bg, #f7f7f8); }
.mp-bar { background: var(--color-surface-raised); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 20; }
.mp-bar-in { max-width: 1000px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mp-brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.mp-brand svg, .mp-brand img { height: 26px; width: auto; flex: none; }
.mp-club { font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 12px; border-left: 1px solid var(--color-border-strong); }
.mp-tabs { max-width: 1000px; margin: 0 auto; padding: 0 16px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.mp-tabs a { padding: 10px 12px; color: var(--color-text-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; font-weight: var(--weight-medium); }
.mp-tabs a.active { color: var(--color-text); border-bottom-color: var(--color-text); }
.mp-main { max-width: 1000px; margin: 0 auto; padding: 24px 16px 48px; }
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.mp-grid .card { margin: 0; }
.mp-login { max-width: 460px; margin: 24px auto; }
.mp-bank { border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: 10px 14px; margin: 8px 0 14px; }
.mp-bank legend { font-weight: var(--weight-semibold); padding: 0 4px; }
.mp-events li { display: flex; gap: 16px; align-items: flex-start; }
.mp-date { display: grid; min-width: 64px; }
.mp-poll-alert a { font-weight: var(--weight-semibold); }
.ma-request { border-left: 3px solid var(--color-text); }
.ma-access .card-head, .ma-request .card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.ma-summary summary { cursor: pointer; }
.inline-label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .9rem; }
.inline-label select { width: auto; }
.mp-grid .card > a:last-child { display: inline-block; margin-top: 6px; font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 3px; color: var(--color-text); }
.donation-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.donation-search input[type=search] { flex: 1 1 240px; min-width: 0; }
.donation-search + .table-wrap td .btn.small { white-space: nowrap; }
.donation-search + .table-wrap td:last-child { text-align: right; }
.donation-search + .table-wrap td:last-child > * { display: flex; width: max-content; margin-left: auto; }
.donation-search + .table-wrap td:last-child > * + * { margin-top: 6px; }

/* ===== Ordnung für Filter, Chips, Zeitraum und Unter-Reiter (sauber neben- und untereinander) ===== */
/* Filterzeilen: Felder teilen sich die Breite gleichmäßig; Auswahllisten dürfen schmaler als ihr längster Eintrag werden */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filters > input:not([type=hidden]), .filters > select, .filters > label { flex: 1 1 140px; min-width: 0; margin: 0; }
.filters > input[type=search], .filters > input[name=q] { flex: 2 1 200px; }
.filters > .btn, .filters > button { flex: 0 0 auto; }
@media (max-width: 640px) {
  /* Handy: zwei gleich breite Spalten, Suche über die ganze Breite */
  .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters > input[type=search], .filters > input[name=q] { grid-column: 1 / -1; }
  .filters > .btn, .filters > button { width: 100%; justify-content: center; }
  /* Knopf immer als eigene, volle Zeile am Ende */
  .filters > :is(.btn, button):last-child { grid-column: 1 / -1; }
  /* Bleibt eine Auswahlliste allein in ihrer Zeile, nimmt sie die volle Breite (mit bzw. ohne Suchfeld davor) */
  .filters:has(> input[type=search], > input[name=q]) > select:nth-last-child(2):nth-child(even of :not(input[type=hidden])) { grid-column: 1 / -1; }
  .filters:not(:has(> input[type=search], > input[name=q])) > select:nth-last-child(2):nth-child(odd of :not(input[type=hidden])) { grid-column: 1 / -1; }
  .donation-search { display: grid; }
}

/* Recht & Updates: Themen als gleichmäßiges Raster, Suche darunter über die volle Breite */
.legal-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.legal-chip { width: 100%; min-height: 40px; padding: 6px 14px 6px 8px; line-height: 1.25; }
.legal-chip:first-child:not(:has(.i3d)) { padding-left: 14px; }
.legal-search { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
@media (max-width: 640px) { .legal-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .legal-chip { font-size: .82rem; } }

/* Zeitraum: Handy – Reiter als Raster (keine umbrechenden Wörter), Navigation in einer Zeile, Datum darunter */
@media (max-width: 640px) {
  .period-picker { display: grid; gap: 10px; }
  .period-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 18px; }
  .period-tabs:has(> a:nth-child(7)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .period-tabs a { justify-content: center; padding: 0 6px; white-space: nowrap; }
  .period-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; }
  .period-nav .period-label { text-align: center; }
  .period-nav .period-jump { grid-column: 1 / -1; }
  .period-nav .period-jump input[type=date] { width: 100%; }
  .period-nav > .muted { grid-column: 1 / -1; }
}

/* Unter-Reiter: am Handy waagerecht wischbar statt auf mehrere Zeilen umzubrechen */
@media (max-width: 640px) {
  .subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { white-space: nowrap; flex: none; }
}
/* Themen-Chips: Symbol und Text mittig */
.legal-chip { justify-content: center; text-align: center; padding: 6px 14px; }
.legal-chip:first-child:not(:has(.i3d)) { padding-left: 14px; }

/* Stempel und Unterschrift des Vereins in Dokumenten */
.seal-control { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; border: 1px solid #d4d4d8; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; color: #111; }
.seal-control[hidden] { display: none; }
.seal-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.seal-toggle input { width: 18px; height: 18px; margin: 0; accent-color: #111; }
.seal-edit { font-size: 12px; font-weight: 500; color: #555; }
.seal-setup { flex-basis: 100%; max-width: 640px; border: 1px solid #d4d4d8; border-radius: 14px; background: #fff; padding: 14px 16px; margin-top: 6px; color: #111; }
.seal-setup[hidden] { display: none; }
.seal-setup h3 { margin: 0 0 4px; font-size: 16px; }
.seal-hint { margin: 0 0 10px; font-size: 13px; color: #555; }
.sigpad { position: relative; border: 1px dashed #a1a1aa; border-radius: 10px; background: #fafafa; }
.sigpad canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; touch-action: none; cursor: crosshair; border-radius: 10px; }
.sigpad::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: 26%; border-bottom: 1px solid #d4d4d8; pointer-events: none; }
.sigpad [data-sigpad-clear] { position: absolute; top: 6px; right: 6px; }
.seal-line { display: grid; gap: 4px; margin: 10px 0 0; font-size: 13px; font-weight: 600; }
.seal-line.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.seal-line input[type=text] { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid #d4d4d8; border-radius: 8px; }
.seal-actions { display: flex; gap: 8px; margin-top: 12px; }
[data-seal-slot] { position: relative; }
.seal-art { position: absolute; left: 0; bottom: calc(100% - 2px); width: max-content; max-width: 170mm; display: flex; align-items: flex-end; gap: 0; pointer-events: none; }
.seal-art .seal-stamp, .seal-art .seal-stamp-img { width: var(--seal-stamp, 88px); height: var(--seal-stamp, 88px); object-fit: contain; color: #1f3a93; opacity: .88; transform: rotate(-9deg); margin: 0 -20px 4px 0; flex: none; }
.seal-art .seal-sign { max-height: var(--seal-sign, 54px); max-width: calc(var(--seal-sign, 54px) * 6); min-width: 0; flex: 0 1 auto; object-fit: contain; object-position: left bottom; position: relative; z-index: 1; margin-bottom: 2px; }
.seal-signer { position: absolute; left: 0; top: 20px; font-size: 10px; white-space: nowrap; color: #333; }
.seal-only { display: none; }
body.with-seal .seal-only { display: flex; }
body.with-seal .signature { margin-top: var(--seal-space, 5.2rem); }
@media print { .seal-control, .seal-setup { display: none !important; } .seal-art .seal-stamp { color: #1f3a93; } }
.seal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 12px 0 16px; }
.seal-box { border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: 12px 14px; display: grid; gap: 8px; align-content: start; }
.seal-box h3 { margin: 0; font-size: 1rem; }
.seal-preview { min-height: 110px; display: grid; place-items: center; background: #fff; border-radius: 10px; border: 1px dashed var(--color-border-strong); padding: 8px; }
.seal-preview img { max-height: 100px; max-width: 100%; }
.seal-preview .seal-stamp { width: 100px; height: 100px; color: #1f3a93; transform: rotate(-9deg); }
.seal-form .sigpad { max-width: 520px; }
/* Rechnung (App-Layout): Unterschriftsblock „Für den Verein“ nur mit Häkchen, rechtsbündig mit Linie */
body.with-seal .sheet .signature.seal-only { display: flex; justify-content: space-between; align-items: flex-end; margin: var(--seal-space, 6.5rem) 0 1rem; }
.sheet .signature.seal-only .line { border-top: 1px solid #333; padding-top: 4px; min-width: 260px; font-size: 11px; }
.seal-box label.btn { cursor: pointer; justify-self: start; }
.seal-box label.btn input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.seal-box form.inline { display: inline-flex; }

/* Eigene Kopf- und Fußzeile des Vereins */
.doc-header { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 14px; border-bottom: 1px solid #ccc; padding-bottom: 8px; margin-bottom: 1rem; font-size: 11px; line-height: 1.45; color: #111; }
.doc-header.logo-links { grid-template-columns: auto minmax(0, 1fr); }
.doc-header.logo-rechts { grid-template-columns: minmax(0, 1fr) auto; }
.doc-header.logo-rechts .doc-header-logo { order: 2; }
.doc-header-logo { height: 52px; width: auto; max-width: 160px; object-fit: contain; }
.doc-header-text .first { font-size: 13px; font-weight: 700; }
.doc-header-mitte .doc-header-text { text-align: center; }
.doc-header-rechts .doc-header-text { text-align: right; }
.doc-footer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid #ccc; padding-top: 6px; margin-top: 24px; font-size: 7.5pt; line-height: 1.4; color: #555; }
.doc-footer > div:nth-child(2) { text-align: center; }
.doc-footer > div:nth-child(3) { text-align: right; }
.doc-footer.on-page { position: absolute; left: 25mm; right: 20mm; bottom: 13mm; margin: 0; background: #fff; }
.a4-page.has-doc-footer .a4-foot { bottom: 6mm; }
/* Kopf- und Fußzeile: Bearbeitung mit Vorschau */
.lh-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 20px; align-items: start; }
.lh-fields { display: grid; gap: 16px; min-width: 0; }
.lh-fields .card { margin: 0; }
.lh-seg { margin-bottom: 12px; max-width: 420px; }
.lh-footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lh-footer-cols textarea { font-size: .85rem; }
.lh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lh-chips .btn { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .75rem; }
.lh-preview-wrap { position: sticky; top: 80px; }
.lh-preview { position: relative; aspect-ratio: 210 / 297; background: #fff; color: #111; border-radius: 4px; box-shadow: 0 1px 3px rgb(0 0 0 / .12), 0 8px 24px rgb(0 0 0 / .1); padding: 7% 8% 18% 10%; font-size: 9px; overflow: hidden; }
.lh-preview .doc-header { font-size: 8px; margin-bottom: 10px; }
.lh-preview .doc-header[hidden], .lh-preview [hidden] { display: none !important; }
.lh-preview .doc-header-text .first { font-size: 10px; }
.lh-preview .doc-header-logo { height: 34px; }
.lh-std { display: flex; align-items: center; gap: 6px; font-size: 7.5px; border-bottom: 1px solid #ccc; padding-bottom: 6px; margin-bottom: 10px; }
.lh-std img { height: 24px; }
.lh-body .lh-title { font-weight: 700; font-size: 11px; margin: 6px 0 8px; }
.lh-body i { display: block; height: 5px; background: #ececee; border-radius: 3px; margin: 7px 0; }
.lh-body i.short { width: 60%; }
.lh-preview .doc-footer { position: absolute; left: 10%; right: 8%; bottom: 4%; font-size: 6px; margin: 0; gap: 6px; }
@media (max-width: 1000px) { .lh-editor { grid-template-columns: minmax(0, 1fr); } .lh-preview-wrap { position: static; max-width: 420px; } }
@media (max-width: 640px) { .lh-footer-cols { grid-template-columns: minmax(0, 1fr); } }
/* Größe einstellen: Vorschau skaliert mit (Basis: Stempel 88 px, Unterschrift 54 px hoch wie im Dokument) */
.seal-preview { min-height: 150px; overflow: hidden; }
.seal-preview[data-size-preview="stamp"] img, .seal-preview[data-size-preview="stamp"] .seal-stamp { width: calc(88px * var(--pv, 1)); height: calc(88px * var(--pv, 1)); max-height: none; object-fit: contain; }
.seal-preview[data-size-preview="sign"] img { max-height: calc(54px * var(--pv, 1)); max-width: 100%; }
.seal-form input[type=range] { width: 100%; accent-color: var(--color-text); margin-top: 6px; padding: 0; }
.seal-form output { font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 6px; color: var(--color-text-2); }
/* Vorschau wie im Dokument: Bild über der Unterschriftslinie, Box wächst mit der Größe */
.seal-preview { overflow: visible; min-height: 140px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 14px 16px 10px; gap: 0; }
.seal-preview > img, .seal-preview > .seal-stamp { max-width: 100%; }
.seal-preview[data-size-preview="sign"] img { height: auto; max-height: calc(54px * var(--pv, 1)); width: auto; max-width: 100%; object-fit: contain; }
.seal-pv-line { align-self: stretch; border-top: 1px solid #333; margin-top: 2px; }
.seal-preview .muted { align-self: center; margin: auto 0; }
.seal-size { display: grid; gap: 2px; margin: 4px 0 0; font-size: .85rem; font-weight: 600; }
.seal-size input[type=range] { width: 100%; accent-color: var(--color-text); padding: 0; margin: 4px 0 0; border: 0; box-shadow: none; background: none; min-height: 0; }
.seal-size output { font-weight: 600; color: var(--color-text-2); margin-left: 6px; }
.seal-size-state { font-weight: 500; min-height: 1.2em; }

.seal-art.seal-right { left: auto; right: 0; }
/* Stempel- und Unterschrifts-Box über die volle Breite, damit breite Bilder (Stempel + Unterschrift) wachsen können */
.seal-grid { grid-template-columns: minmax(0, 1fr); }
.seal-preview[data-size-preview="sign"] img { max-width: 100%; }
/* Vorschau mittig; hochgeladene Stempel behalten ihr Seitenverhältnis (breite Stempel nicht winzig) */
.seal-preview { align-items: center; }
.seal-preview[data-size-preview="stamp"] img { width: auto; height: calc(88px * var(--pv, 1)); max-width: 100%; transform: none; }
.seal-art .seal-stamp-img { width: auto; max-width: calc(var(--seal-stamp, 88px) * 3); transform: none; margin-right: 6px; }

/* Stempel/Unterschrift im Dokument frei verschieben und skalieren */
.seal-item { position: relative; display: inline-flex; align-items: flex-end; flex: none; transform-origin: left bottom; pointer-events: auto; cursor: move; touch-action: none; user-select: none; }
.seal-item.seal-signer { position: absolute; display: block; }
.seal-art .seal-item:has(.seal-sign) { flex: 0 1 auto; min-width: 0; }
.seal-item img { -webkit-user-drag: none; pointer-events: none; }
.seal-handle { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #1f3a93; cursor: nwse-resize; opacity: 0; transition: opacity .15s; }
.seal-item:hover, .seal-item.seal-active { outline: 1px dashed rgba(31,58,147,.6); outline-offset: 2px; }
.seal-item:hover > .seal-handle, .seal-item.seal-active > .seal-handle { opacity: 1; }
@media (hover: none) { .seal-handle { opacity: 1; width: 18px; height: 18px; right: -9px; bottom: -9px; } }
@media print { .seal-handle { display: none !important; } .seal-item { outline: none !important; cursor: auto; } }
body.seal-dragging { user-select: none; -webkit-user-select: none; }
/* Drei Häkchen untereinander: Stempel und Unterschrift / nur Stempel / nur Unterschrift */
.seal-control { align-items: flex-start; border-radius: 14px; padding: 8px 14px; }
.seal-modes { display: flex; flex-direction: column; gap: 4px; }
.seal-modes .seal-toggle { font-weight: 600; }
.seal-control .seal-edit { align-self: flex-start; margin-top: 1px; }
body.with-seal .signature, body.with-seal .sheet .signature.seal-only { margin-top: calc(var(--seal-space, 5.2rem) + 1.5rem); }
.seal-box [data-bg-remove] { width: auto; align-self: flex-start; display: inline-flex; margin-top: 6px; }
/* Rechnung: Steuersatz je Position nur bei umsatzsteuerpflichtigen Rechnungen */
.item-row select[data-vat-col] { margin: 0; display: none; }
form.with-vat .item-row { grid-template-columns: 1fr 90px 130px 90px; }
form.with-vat .item-row select[data-vat-col] { display: block; }
form.with-vat [data-tax-reason] { display: none; }
@media (max-width: 640px) { .item-row, form.with-vat .item-row { grid-template-columns: 1fr 1fr; } .item-row input[name=item_description] { grid-column: 1 / -1; } }
.einv-box { border: 1px solid var(--color-border, #e4e4e7); border-radius: 14px; padding: 14px 16px; margin: 0 0 1rem; background: var(--color-surface, #fff); }
.einv-box h2 { font-size: 1rem; margin: 0 0 .4rem; }
.einv-box .actions { margin-top: .6rem; }
.einv-box ul { margin: .4rem 0 0 1.1rem; }
.inv-sums td { border: 0 !important; }
.inv-items td.num, .inv-items th.num { white-space: nowrap; }
.inv-items .inv-sums td { padding-top: .2rem; padding-bottom: .2rem; }
.inv-items .inv-sums tr:first-child td { padding-top: .6rem; }
.seal-art.seal-right { padding-right: 14px; }
.seal-art > .seal-item:last-child > .seal-stamp, .seal-art > .seal-item:last-child > .seal-stamp-img { margin-right: 0; }
/* Drag & Drop: Ablagebereich hervorheben */
.drop-zone { position: relative; }
.drop-zone.drop-over { outline: 2px dashed #111; outline-offset: 4px; border-radius: 12px; background-color: rgba(17, 17, 17, .04); }
.drop-zone.drop-over::after { content: attr(data-drop-hint); position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; font-size: 15px; color: #111; background: rgba(255, 255, 255, .78); border-radius: 12px; pointer-events: none; z-index: 5; }
.drop-msg { margin-top: .4rem; color: var(--color-text-muted, #555); }
.drop-msg.bad { color: #b42318; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .drop-zone.drop-over::after { background: rgba(20, 20, 20, .82); color: #fff; } :root:not([data-theme="light"]) .drop-zone.drop-over { outline-color: #fff; } }
:root[data-theme="dark"] .drop-zone.drop-over::after { background: rgba(20, 20, 20, .82); color: #fff; }
:root[data-theme="dark"] .drop-zone.drop-over { outline-color: #fff; }
.cand-name { font-weight: 600; }
/* Personen-Auswahl wie MS Teams */
[data-people-picker].pp-enhanced { display: none !important; }
.pp { position: relative; }
.pp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 40px; }
.pp-add { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border, #d4d4d8); background: var(--surface, #fff); color: #5b5fc7; display: inline-grid; place-items: center; cursor: pointer; transition: background .15s, border-color .15s; }
.pp-add:hover, .pp-add[aria-expanded="true"] { background: #f0f0fb; border-color: #5b5fc7; }
.pp-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; cursor: pointer; }
.pp-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; color: #1d2330; flex: none; letter-spacing: .02em; }
.pp-empty { color: var(--color-text-muted, #71717a); font-size: 14px; }
.pp-pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: min(360px, calc(100vw - 32px)); background: var(--surface, #fff); border: 1px solid var(--border, #e4e4e7); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .14); padding: 12px; }
.pp-search { width: 100%; margin: 0 0 8px; border: 0; border-bottom: 2px solid #5b5fc7; border-radius: 6px 6px 0 0; background: var(--color-bg-subtle, #f4f4f5); padding: 10px 12px; font-size: 14px; }
.pp-search:focus { outline: none; }
.pp-list { max-height: 300px; overflow-y: auto; }
.pp-head { font-size: 13px; font-weight: 600; margin: 8px 4px 4px; color: var(--text, #1d2330); }
.pp-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 6px; border: 0; background: none; border-radius: 8px; text-align: left; font: inherit; color: inherit; cursor: default; }
button.pp-item { cursor: pointer; }
button.pp-item:hover, button.pp-item:focus-visible { background: var(--color-bg-subtle, #f4f4f5); outline: none; }
.pp-item .pp-avatar { background: #e4e4e7 !important; }
.pp-name { flex: 1; min-width: 0; font-size: 14px; display: flex; flex-direction: column; }
.pp-name small { color: var(--color-text-muted, #71717a); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-remove { border: 0; background: none; font-size: 20px; line-height: 1; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; color: #52525b; }
.pp-remove:hover { background: var(--color-bg-subtle, #f4f4f5); }
.pp-none { color: var(--color-text-muted, #71717a); font-size: 14px; margin: 8px 4px; }
:root[data-theme="dark"] .pp-avatar, :root[data-theme="dark"] .pp-chips .pp-avatar { color: #1d2330; }
/* Termin: Knöpfe paarweise untereinander, alle gleich breit */
.event-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; max-width: 560px; }
.event-actions > .btn, .event-actions > form, .event-actions > form .btn { width: 100%; justify-content: center; text-align: center; }
.event-actions > .btn:only-child { grid-column: 1 / -1; }
@media (max-width: 480px) { .event-actions { grid-template-columns: 1fr; } }
/* „Als erledigt markieren“ wie in MS Teams/Planner: grauer Kreis, beim Darüberfahren erscheint der Haken, Hinweis als helle Sprechblase */
.tile-check { position: relative; width: 20px; height: 20px; border: 1.5px solid #616161; background: transparent; color: transparent; transition: color .12s, border-color .12s, background-color .12s; }
.tile-check svg { width: 13px; height: 13px; }
.tile-check:hover, .tile-check:focus-visible { border-color: #424242; color: #424242; background: transparent; outline: none; }
.tile-check:active { transform: scale(.92); }
.tile-check.checked, .task-tile.done .tile-check, .task-table tr.done .tile-check { background: #424242; border-color: #424242; color: #fff; }
.tile-check.checked:hover, .task-tile.done .tile-check:hover, .task-table tr.done .tile-check:hover { background: #616161; border-color: #616161; }
.tile-check[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-30%) translateY(4px); white-space: nowrap; background: #fff; color: #242424; font-size: 12.5px; font-weight: 400; line-height: 1.3; padding: 7px 11px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,.14), 0 8px 16px rgba(0,0,0,.12); opacity: 0; pointer-events: none; transition: opacity .12s ease .35s, transform .12s ease .35s; z-index: 30; }
.tile-check[data-tip]:hover::after, .tile-check[data-tip]:focus-visible::after { opacity: 1; transform: translateX(-30%) translateY(0); }
:root[data-theme="dark"] .tile-check { border-color: #adadad; }
:root[data-theme="dark"] .tile-check:hover { border-color: #e0e0e0; color: #e0e0e0; }
:root[data-theme="dark"] .tile-check[data-tip]::after { background: #2b2b2b; color: #f0f0f0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tile-check { border-color: #adadad; } :root:not([data-theme="light"]) .tile-check:hover { border-color: #e0e0e0; color: #e0e0e0; } :root:not([data-theme="light"]) .tile-check[data-tip]::after { background: #2b2b2b; color: #f0f0f0; } }
.tile-check[data-tip]::after { left: -8px; transform: translateY(4px); }
.tile-check[data-tip]:hover::after, .tile-check[data-tip]:focus-visible::after { transform: translateY(0); }
/* Ratgeber & Vergleich */
.rg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.rg-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 1.35rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.rg-card:hover { border-color: var(--color-text); box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.rg-card h2, .rg-card h3 { font-size: 1.1rem; margin: 0; line-height: 1.3; }
.rg-card p { margin: 0; color: var(--color-text-2); font-size: .95rem; }
.rg-topic { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.rg-meta { font-size: 13px; color: var(--color-text-muted); margin-top: auto; }
.rg-cta { text-align: center; padding: 2rem 1rem; }
.rg-article { max-width: 760px; margin: 0 auto; padding: 0 0 2rem; }
.rg-article h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.2; margin: .5rem 0 .75rem; }
.rg-article h2 { font-size: 1.3rem; margin: 2rem 0 .6rem; }
.rg-article p { line-height: 1.7; }
.rg-crumb { font-size: 14px; color: var(--color-text-muted); margin: 1.5rem 0 0; }
.rg-crumb a { color: inherit; }
.rg-feature { margin: 2.25rem 0 1rem; padding: 1.25rem 1.4rem; border-radius: 16px; background: var(--color-bg-subtle, #f4f4f5); border: 1px solid var(--border); }
.rg-feature p { margin: .4rem 0 1rem; }
.rg-disclaimer { margin-top: 1.5rem; }
.rg-more-title { font-size: 1.1rem; }
.cmp-table td:first-child { font-weight: 600; width: 46%; }
.cmp-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-bg-subtle, #f4f4f5); font-size: 12px; margin-right: .6rem; vertical-align: 1px; }
@media (max-width: 640px) { .cmp-table td:first-child { width: auto; } }
.footer nav { flex-wrap: wrap; row-gap: .4rem; }
/* Vergleich: Frage und Antwort ordentlich untereinander */
.cmp-list { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; display: grid; gap: .75rem; }
.cmp-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.1rem 1.25rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.cmp-item .cmp-num { width: 32px; height: 32px; margin: 0; font-size: 13px; font-weight: 600; display: grid; place-items: center; border-radius: 50%; background: var(--color-bg-subtle, #f4f4f5); }
.cmp-q { font-size: 1rem; line-height: 1.4; margin: .2rem 0 .35rem; }
.cmp-a { margin: 0; color: var(--color-text-2); line-height: 1.55; }
.cmp-label { font-weight: 600; color: var(--color-text); }
@media (max-width: 480px) { .cmp-item { grid-template-columns: 28px minmax(0, 1fr); gap: .75rem; padding: 1rem; } .cmp-item .cmp-num { width: 28px; height: 28px; } }
/* Website-Vorschau (nur Darstellung) */
.demo-wrap { max-width: 1120px; margin: 0 auto 3rem; padding: 0 16px; }
.demo-window { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.12); color: #1d2330; }
.demo-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f4f4f5; border-bottom: 1px solid #e4e4e7; }
.demo-bar span { width: 11px; height: 11px; border-radius: 50%; background: #d4d4d8; }
.demo-bar em { font-style: normal; font-size: 12px; color: #71717a; margin-left: 12px; background: #fff; padding: 3px 12px; border-radius: 999px; }
.demo-app { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 520px; }
.demo-side { background: #fafafa; border-right: 1px solid #ececef; padding: 14px 10px; }
.demo-club { display: flex; gap: 10px; align-items: center; padding: 6px 8px 14px; border-bottom: 1px solid #ececef; margin-bottom: 10px; }
.demo-club small { display: block; color: #71717a; font-size: 11px; }
.demo-club strong { font-size: 13px; }
.demo-logo { width: 34px; height: 34px; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.demo-nav { display: flex; flex-direction: column; gap: 2px; }
.demo-nav button { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 8px 10px; border-radius: 10px; font: inherit; font-size: 14px; color: #3f3f46; cursor: pointer; text-align: left; }
.demo-nav button svg { width: 18px; height: 18px; }
.demo-nav button:hover { background: #f0f0f2; }
.demo-nav button.active { background: #fff; color: #111; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.demo-main { position: relative; padding: 0 22px 22px; min-width: 0; }
.demo-top { display: flex; align-items: center; gap: 14px; height: 56px; border-bottom: 1px solid #ececef; margin: 0 -22px 18px; padding: 0 22px; }
.demo-top strong { font-size: 15px; margin-right: auto; }
.demo-date { font-size: 13px; color: #71717a; }
.demo-bell { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #f4f4f5; }
.demo-bell svg { width: 16px; height: 16px; }
.demo-bell i { position: absolute; top: -4px; right: -4px; background: #dc2626; color: #fff; font-style: normal; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 5px; }
.demo-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.demo-kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.demo-kpi { border: 1px solid #ececef; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.demo-kpi small { color: #71717a; font-size: 12px; }
.demo-kpi b { font-size: 22px; }
.demo-kpi span { font-size: 12px; color: #71717a; }
.demo-main .up { color: #15803d; } .demo-main .warn { color: #b45309; }
.demo-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.demo-card { border: 1px solid #ececef; border-radius: 14px; padding: 14px; }
.demo-card h3 { font-size: 14px; margin: 0 0 10px; }
.demo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.demo-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.demo-list li > i { width: 4px; align-self: stretch; border-radius: 4px; background: var(--c); flex: none; }
.demo-list li span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.demo-list small { color: #71717a; }
.demo-list.plain em { font-style: normal; font-weight: 600; white-space: nowrap; }
.demo-tools { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; }
.demo-search { flex: 1; min-width: 180px; border: 1px solid #e4e4e7; border-radius: 10px; padding: 8px 12px; font-size: 13px; color: #a1a1aa; }
.demo-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e4e4e7; background: #fff; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: #111; }
.demo-btn svg { width: 14px; height: 14px; }
.demo-btn.primary { background: #111; color: #fff; border-color: #111; }
.demo-btn.sm { padding: 4px 10px; font-size: 12px; }
.demo-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.demo-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #71717a; padding: 8px; border-bottom: 1px solid #ececef; }
.demo-table td { padding: 10px 8px; border-bottom: 1px solid #f4f4f5; vertical-align: middle; }
.demo-table .r { text-align: right; white-space: nowrap; }
.demo-av { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c); font-size: 11px; font-weight: 600; margin-right: 8px; vertical-align: middle; color: #1d2330; }
.demo-av.sm { width: 24px; height: 24px; font-size: 10px; margin: 0 0 0 auto; }
.demo-badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #f4f4f5; }
.demo-badge.ok { background: #dcfce7; color: #166534; } .demo-badge.warn { background: #fef3c7; color: #92400e; }
.demo-seg { display: inline-flex; border: 1px solid #e4e4e7; border-radius: 999px; padding: 3px; font-size: 13px; }
.demo-seg > * { padding: 4px 12px; border-radius: 999px; }
.demo-seg b { background: #111; color: #fff; }
.demo-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.demo-day { min-height: 230px; border: 1px solid #ececef; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.demo-day small { font-size: 12px; color: #71717a; font-weight: 600; }
.demo-day.today small { color: #111; }
.demo-day.today { border-color: #111; }
.demo-ev { font-size: 11px; line-height: 1.3; padding: 5px 6px; border-radius: 6px; background: color-mix(in srgb, var(--c) 14%, #fff); border-left: 3px solid var(--c); }
.demo-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.demo-col { background: #fafafa; border-radius: 14px; padding: 10px; }
.demo-col h4 { font-size: 13px; margin: 2px 4px 10px; } .demo-col h4 small { color: #71717a; font-weight: 400; }
.demo-tile { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #fff; border: 1px solid #ececef; border-radius: 12px; padding: 10px; margin-bottom: 8px; font-size: 13px; }
.demo-tile em { width: 100%; font-style: normal; font-size: 11px; font-weight: 600; color: #fff; background: #c2410c; border-radius: 4px; padding: 1px 6px; flex: none; width: auto; }
.demo-tile b { flex: 1; font-weight: 500; min-width: 0; }
.demo-tile .demo-check { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #616161; display: grid; place-items: center; color: transparent; cursor: pointer; flex: none; }
.demo-tile .demo-check svg { width: 12px; height: 12px; }
.demo-tile .demo-check:hover { color: #424242; }
.demo-tile.done .demo-check { background: #424242; border-color: #424242; color: #fff; }
.demo-tile.done b { text-decoration: line-through; color: #71717a; }
.demo-tile em + .demo-check { order: 0; }
.demo-bars { display: flex; align-items: flex-end; gap: 12px; height: 150px; padding-top: 6px; }
.demo-bars span { flex: 1; display: flex; align-items: flex-end; gap: 3px; height: 100%; position: relative; padding-bottom: 18px; }
.demo-bars i { flex: 1; background: #111; border-radius: 4px 4px 0 0; }
.demo-bars i.out { background: #d4d4d8; }
.demo-bars small { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 11px; color: #71717a; }
.demo-toast { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); background: #111; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.2); white-space: nowrap; z-index: 5; }
.demo-toast a { color: #fff; font-weight: 600; margin-left: 6px; }
.demo-note { text-align: center; margin-top: 1rem; }
.demo-cta { text-align: center; }
@media (max-width: 860px) {
  .demo-app { grid-template-columns: 1fr; }
  .demo-side { border-right: 0; border-bottom: 1px solid #ececef; padding: 10px; }
  .demo-club { display: none; }
  .demo-nav { flex-direction: row; overflow-x: auto; gap: 4px; scrollbar-width: none; }
  .demo-nav button { flex: none; padding: 7px 10px; }
  .demo-kpis, .demo-kpis.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-cols, .demo-board { grid-template-columns: 1fr; }
  .demo-week { grid-template-columns: repeat(7, 120px); overflow-x: auto; }
  .demo-date { display: none; }
  .demo-table { display: block; overflow-x: auto; white-space: nowrap; }
  .demo-toast { white-space: normal; width: calc(100% - 32px); text-align: center; border-radius: 14px; }
}
.demo-tile-lab { flex-basis: 100%; }
.demo-tile-lab em { display: inline-block; }
.demo-legend { float: right; font-size: 11px; font-weight: 400; color: #71717a; display: inline-flex; align-items: center; gap: 4px; }
.demo-legend i { width: 10px; height: 10px; border-radius: 3px; background: #111; display: inline-block; margin-left: 6px; }
.demo-legend i.out { background: #d4d4d8; }
.demo-side, .demo-nav, .demo-main { min-width: 0; } .demo-app { grid-template-columns: 220px minmax(0, 1fr); } @media (max-width: 860px) { .demo-app { grid-template-columns: minmax(0, 1fr); } }
/* Vorschau: vollständige Admin-Seitenleiste */
.demo-app { min-height: 760px; }
.demo-side { max-height: 780px; overflow-y: auto; scrollbar-width: thin; }
.demo-group { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #a1a1aa; padding: 12px 10px 4px; }
.demo-nav button { padding: 6px 10px; font-size: 13.5px; }
.demo-nav button .demo-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-count { font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: #dc2626; border-radius: 999px; padding: 1px 7px; }
.demo-chip { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid #e4e4e7; margin: 1px 4px 1px 0; }
@media (max-width: 860px) { .demo-app { min-height: 0; } .demo-side { max-height: none; overflow: visible; } .demo-group { display: none; } .demo-nav .demo-soon { display: none; } }
/* Seitenleiste ruhiger: kleinere Kacheln in Anthrazit, die aktive Seite tiefschwarz mit Markierung links */
.side-nav a .i3d { width: 25px; height: 25px; --r: 7px; }
.side-nav a .i3d .ui-icon { width: 72%; height: 72%; stroke-width: 2.1; }
:root:not([data-icons="farbig"]) .side-nav a:not(.active) .i3d[class] { background: linear-gradient(180deg, #6a6a72 0%, #46464d 48%, #34343a 52%, #2c2c31 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.14); }
:root:not([data-icons="farbig"]) .side-nav a:not(.active) .i3d[class]::before { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.03)); }
:root:not([data-icons="farbig"]) .side-nav a:not(.active):hover .i3d[class] { background: linear-gradient(180deg, #5b5b62 0%, #2a2a2f 48%, #0d0d10 52%, #050506 100%); }
.side-nav a.active { background: var(--color-surface-raised); box-shadow: 0 0 0 1px var(--color-border-strong, #d4d4d8), 0 2px 6px rgba(0,0,0,.08); }
.side-nav a.active::before { content: ''; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--color-text); }
.side-nav a.active .i3d { transform: scale(1.06); }
/* Vorschau: gleiche Kacheln wie im Programm */
.demo-nav button { position: relative; gap: 12px; min-height: 36px; }
.demo-nav .i3d { width: 25px; height: 25px; --r: 7px; }
.demo-nav .i3d .ui-icon { width: 72%; height: 72%; stroke-width: 2.1; }
.demo-nav button:not(.active) .i3d[class] { background: linear-gradient(180deg, #6a6a72 0%, #46464d 48%, #34343a 52%, #2c2c31 100%) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.14); }
.demo-nav button:not(.active):hover .i3d[class] { background: linear-gradient(180deg, #5b5b62 0%, #2a2a2f 48%, #0d0d10 52%, #050506 100%) !important; }
.demo-nav button.active .i3d[class] { background: linear-gradient(180deg, #5b5b62 0%, #2a2a2f 48%, #0d0d10 52%, #050506 100%) !important; transform: scale(1.06); }
.demo-nav button.active { box-shadow: 0 0 0 1px #d4d4d8, 0 2px 6px rgba(0,0,0,.08); }
.demo-nav button.active::before { content: ''; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: #111; }
.demo-nav .i3d svg.ui-icon { width: 72%; height: 72%; }
.demo-nav button { padding-left: 14px; }
.demo-nav button.active::before { left: 3px; }
@media (max-width: 860px) { .demo-nav button.active::before { display: none; } .demo-nav button { padding-left: 10px; } }
/* Benutzer & Rechte: Übersicht wie in der Vorschau */
#benutzerliste .card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
#benutzerliste .card-head h2 { margin: 0; } #benutzerliste .card-head h2 .muted { font-weight: 400; margin-left: .4rem; }
.users-table th.center, .users-table td.center { text-align: center; }
.users-table td { vertical-align: middle; }
.user-cell { display: flex; align-items: center; gap: .75rem; }
.user-av { width: 34px; height: 34px; border-radius: 50%; background: var(--c); color: #1d2330; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
.user-role { display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 999px; background: var(--color-hover); color: var(--color-text); white-space: nowrap; }
.user-role.ok { background: #dcfce7; color: #166534; }
.user-role.warn { background: #fef3c7; color: #92400e; }
.user-role.off { background: #fee2e2; color: #991b1b; }
.user-role-sub { display: block; margin-top: 2px; }
.perm-chip { display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--color-border); margin: 2px 4px 2px 0; white-space: nowrap; }
.tfa-yes { font-weight: 700; }
.user-row.is-off td { opacity: .65; }
.user-row.is-open td { background: var(--color-hover); }
.user-edit-row > td { background: var(--color-hover); padding: 0 !important; }
.user-edit { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 2fr) minmax(180px, 1fr); gap: 1.25rem; padding: 1rem 1.25rem 1.25rem; }
.user-edit h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); margin: 0 0 .5rem; }
.user-edit .perm-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .2rem .8rem; }
.user-edit .perm-save { grid-column: 1 / -1; margin-top: .4rem; }
.user-edit-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.user-edit-actions form { margin: 0; }
.users-settings-title { margin: 2rem 0 .75rem; font-size: 1.1rem; }
@media (max-width: 900px) { .user-edit { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .users-table thead { display: none; }
  .users-table, .users-table tbody, .users-table tr, .users-table td { display: block; width: 100%; }
  .users-table tr.user-row { display: grid; grid-template-columns: 1fr auto; gap: .35rem .75rem; padding: .75rem 0; border-bottom: 1px solid var(--color-border); }
  .users-table tr.user-row td { border: 0; padding: 0; }
  .users-table tr.user-row td:nth-child(1) { grid-column: 1 / -1; }
  .users-table tr.user-row td.center { text-align: left; }
  .users-table tr.user-row td.center::before { content: '2FA '; color: var(--color-text-muted); font-size: 12px; }
  .users-table tr.user-row td.user-perms { grid-column: 1 / -1; }
}
/* Kacheln mit weichem Schatten (leichter Rand rechts/unten), überall im Programm */
:root { --shadow-tile: 0 1px 2px rgba(0, 0, 0, .04), 3px 4px 12px -2px rgba(0, 0, 0, .07); --shadow-tile-hover: 0 1px 2px rgba(0, 0, 0, .05), 4px 8px 20px -4px rgba(0, 0, 0, .12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow-tile: 0 1px 2px rgba(0, 0, 0, .4), 3px 4px 14px -2px rgba(0, 0, 0, .45); --shadow-tile-hover: 0 1px 2px rgba(0, 0, 0, .45), 4px 8px 22px -4px rgba(0, 0, 0, .55); } }
:root[data-theme="dark"] { --shadow-tile: 0 1px 2px rgba(0, 0, 0, .4), 3px 4px 14px -2px rgba(0, 0, 0, .45); --shadow-tile-hover: 0 1px 2px rgba(0, 0, 0, .45), 4px 8px 22px -4px rgba(0, 0, 0, .55); }
.app .card, .card, .task-tile, .seal-box, .ticket, .reply, .poll-choice, .poll-list a, .teacher-list a, .stats, .sub-fieldset, .folders, .addon-banner, .sepa-notice, .mp-bank, .rg-card, .cmp-item, .demo-card, .demo-kpi, .demo-tile { box-shadow: var(--shadow-tile); }
.task-tile:hover, .poll-list a:hover, .teacher-list a:hover, .rg-card:hover { box-shadow: var(--shadow-tile-hover); }
.card .card, .card .seal-box, .card .stats { box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
@media print { .card, .task-tile, .seal-box { box-shadow: none !important; } }