/* =============================================================================
   BASIS-STYLES  ·  verwendet ausschließlich die Variablen aus tokens.css
   Bewusst neutral gehalten – das finale Design entsteht über die Tokens
   (bzw. gezielte Überschreibungen) in Zusammenarbeit mit ChatGPT.
   ========================================================================== */

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

html { font-size: var(--font-size-base); }

body {
    margin: 0;
    font-family: var(--font-sans);
    line-height: var(--line-height);
    color: var(--color-text);
    background: var(--color-bg);
}

h1, h2, h3, h4 { color: var(--color-heading); line-height: 1.25; }

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

.muted { color: var(--color-text-muted); }
.req   { color: var(--color-error-fg); }

.skip-link {
    position: absolute; left: -999px; top: 0;
    background: var(--color-primary); color: var(--color-primary-text); padding: var(--space-2) var(--space-4);
    border-radius: 0 0 var(--radius-sm) 0; z-index: 100;
}
.skip-link:focus { left: 0; }

/* --- App-Grundgerüst ---------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }

.app-content {
    flex: 1; display: flex; flex-direction: column; min-width: 0;
    margin-left: var(--sidebar-width);
}

/* --- Sidebar ------------------------------------------------------------ */
.sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width);
    background: var(--color-sidebar-bg); color: var(--color-sidebar-text);
    display: flex; flex-direction: column; padding: var(--space-4);
    overflow-y: auto;
}

/* Vereinslogo: eine Definition, feste Bildbox auch vor dem Laden. */
.sidebar__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 64px;
    padding: 0;
    background: transparent;
    font-weight: var(--font-weight-bold);
    font-size: 1.05rem;
    color: var(--color-text);
    text-align: center;
}
.sidebar__brand img {
    display: block;
    flex: 0 0 auto;
    width: 174px;
    height: 64px;
    min-height: 64px;
    max-width: 100%;
    object-fit: contain;
    margin-inline: auto;
}
[data-theme="dark"] .sidebar__brand img {
    background: var(--color-document-paper);
    border-radius: 8px;
    padding: 6px;
}
@media (max-width: 860px) {
    .sidebar__brand img { max-width: min(174px, calc(100% - 88px)); }
}
.sidebar__logo { color: var(--color-sidebar-accent); font-size: 1.3rem; }

.nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav__link {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
    color: var(--color-sidebar-text); font-size: 0.95rem; transition: background var(--transition);
}
.nav__link:hover { background: var(--color-sidebar-active); text-decoration: none; color: var(--color-primary-text); }
.nav__link.is-active { background: var(--color-sidebar-active); color: var(--color-primary-text); }
.nav__link.is-active { box-shadow: inset 3px 0 0 var(--color-sidebar-accent); }
.nav__icon { width: 1.2em; text-align: center; opacity: 0.85; }
.nav__section {
    text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.06em;
    color: var(--color-text-muted); padding: var(--space-5) var(--space-3) var(--space-2);
}
.nav__spacer { flex: 1; }

/* --- Topbar ------------------------------------------------------------- */
.topbar {
    display: flex; align-items: center; gap: var(--space-4);
    height: var(--topbar-height); padding: 0 var(--space-6);
    background: var(--color-surface); border-bottom: 1px solid var(--color-border);
    position: sticky; top: 0; z-index: 20;
}
.topbar__title { font-size: 1.15rem; margin: 0; flex: 1; }
.topbar__user { display: flex; align-items: center; gap: var(--space-3); }
.topbar__name { color: var(--color-text-muted); font-size: 0.9rem; }

.btn-icon {
    display: none; background: none; border: 0; font-size: 1.4rem; cursor: pointer;
    color: var(--color-text); padding: var(--space-1) var(--space-2);
}

/* --- Main / Footer ------------------------------------------------------ */
.main { flex: 1; padding: var(--space-6); width: 100%; max-width: var(--content-max); margin: 0 auto; }
.footer {
    padding: var(--space-4) var(--space-6); color: var(--color-text-muted);
    font-size: 0.85rem; border-top: 1px solid var(--color-border);
    display: flex; gap: var(--space-2); align-items: center;
}
.footer__sep { opacity: 0.5; }

/* --- Panels ------------------------------------------------------------- */
.panel {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6); overflow: hidden;
}
.panel__header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.panel__title { margin: 0; font-size: 1.05rem; }
.panel__body { padding: var(--space-5); }

.page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4); margin-bottom: var(--space-5);
}
.page-head__title { margin: 0; font-size: 1.4rem; }

/* --- Kennzahlen-Kacheln ------------------------------------------------- */
.stat-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4); margin-bottom: var(--space-6);
}
.stat-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: var(--space-5); box-shadow: var(--shadow-sm);
}
.stat-card__value { font-size: 2rem; font-weight: var(--font-weight-bold); color: var(--color-heading); }
.stat-card__label { color: var(--color-text-muted); font-size: 0.9rem; margin-top: var(--space-1); }

/* --- Tabellen ----------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.table th, .table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.table thead th { background: var(--color-surface-alt); font-weight: var(--font-weight-medium); color: var(--color-text-muted); }
.table tbody tr:hover { background: var(--color-surface-alt); }
.table__actions { white-space: nowrap; text-align: right; display: flex; gap: var(--space-2); justify-content: flex-end; }

/* Rollen-/Rechte-Matrix (Benutzerformular) */
.matrix { font-size: 0.9rem; }
.matrix th, .matrix td { padding: var(--space-2) var(--space-3); }
.matrix__perm { text-align: left; white-space: normal; }
.matrix__perm .u-text-xs { display: block; }
.matrix__role { text-align: center; vertical-align: bottom; }
.matrix__rolelabel { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font-weight: var(--font-weight-medium); }
.matrix__rolelabel span { font-size: 0.8rem; white-space: nowrap; }
.matrix__cell { text-align: center; }
.matrix__yes { color: var(--color-success-fg); font-weight: var(--font-weight-bold); }
.matrix__no { color: var(--color-text-muted); opacity: 0.5; }
.matrix__grouprow th { background: var(--color-surface-alt); text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); }

/* --- Badges ------------------------------------------------------------- */
.badge {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    background: var(--color-surface-alt); border: 1px solid var(--color-border);
    font-size: 0.78rem; color: var(--color-text-muted); margin: 1px;
}
.badge--ok    { background: var(--color-success-bg); color: var(--color-success-fg); border-color: transparent; }
.badge--muted { background: var(--color-surface-alt); color: var(--color-text-muted); border-color: transparent; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
    border: 1px solid transparent; font-size: 0.92rem; font-weight: var(--font-weight-medium);
    cursor: pointer; transition: background var(--transition), border-color var(--transition);
    background: var(--color-surface-alt); color: var(--color-text); line-height: 1.2;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--color-primary); color: var(--color-primary-text); }
.btn--primary:hover { background: var(--color-primary-hover); color: var(--color-primary-text); }
.btn--ghost { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn--ghost:hover { background: var(--color-surface-alt); }
.btn--sm { padding: var(--space-1) var(--space-3); font-size: 0.82rem; }
.btn--block { width: 100%; }

/* --- Formulare ---------------------------------------------------------- */
.form { max-width: 420px; }
.form--wide { max-width: 720px; }
.field { margin-bottom: var(--space-4); }
.label { display: block; margin-bottom: var(--space-1); font-weight: var(--font-weight-medium); font-size: 0.9rem; }
.input, select, textarea {
    width: 100%; padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    font: inherit; color: var(--color-text); background: var(--color-surface); transition: border-color var(--transition), box-shadow var(--transition);
}
.input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.hint { font-size: 0.8rem; color: var(--color-text-muted); margin: var(--space-1) 0 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.form-checks { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4) 0; }

.fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-4); margin: var(--space-4) 0; }
.fieldset__legend { font-weight: var(--font-weight-medium); font-size: 0.9rem; padding: 0 var(--space-2); }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2); }
.checkbox { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 0.92rem; cursor: pointer; }
.checkbox input { margin-top: 3px; }

.inline-form { display: inline; margin: 0; }

/* --- Alerts ------------------------------------------------------------- */
.alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin-bottom: var(--space-4); font-size: 0.92rem; }
.alert--success { background: var(--color-success-bg); color: var(--color-success-fg); }
.alert--error   { background: var(--color-error-bg);   color: var(--color-error-fg); }
.alert--info    { background: var(--color-info-bg);    color: var(--color-info-fg); }
.alert--warning { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.alert__list { margin: var(--space-2) 0 0; padding-left: var(--space-5); }

/* --- Auth / Fehlerseiten ----------------------------------------------- */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--space-4); }
.auth-wrap { width: 100%; max-width: 400px; }
.auth-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-6);
}
.auth-card__brand { display: flex; align-items: center; gap: var(--space-2); justify-content: center; font-weight: var(--font-weight-bold); margin-bottom: var(--space-5); }
.auth-card__title { text-align: center; margin: 0 0 var(--space-5); font-size: 1.3rem; }
.auth-foot { text-align: center; color: var(--color-text-muted); font-size: 0.82rem; margin-top: var(--space-4); }

.error-card { text-align: center; }
.error-code { font-size: 3rem; font-weight: var(--font-weight-bold); color:var(--color-primary-ink); }
.error-title { margin: var(--space-2) 0; }
.error-text { color: var(--color-text-muted); margin-bottom: var(--space-5); }

/* --- Barrierefreiheit / Motion ----------------------------------------- */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* --- Responsiv: Sidebar mobil ------------------------------------------ */
@media (max-width: 860px) {
    .app.nav-open { overflow: hidden; }
    .app-content { margin-left: 0; }
    .sidebar {
        transform: translateX(-100%); transition: transform var(--transition); z-index: 40;
        box-shadow: var(--shadow-lg);
    }
    .app.nav-open .sidebar { transform: translateX(0); }
    .btn-icon { display: inline-block; }
    .form-row { grid-template-columns: 1fr; }
}

/* =============================================================================
   Modul: Mitglieder (und allgemeine Ergänzungen)
   ========================================================================== */
.page-head { align-items: flex-start; }
.page-head__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.filter-bar { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.filter-bar .input { max-width: 320px; }
.filter-bar select.input { max-width: 220px; }

.pagination { display: flex; align-items: center; gap: var(--space-4); justify-content: center; padding: var(--space-4); border-top: 1px solid var(--color-border); }
.pagination__info { color: var(--color-text-muted); font-size: 0.9rem; }
.is-disabled { opacity: 0.5; pointer-events: none; }

/* Beschreibungs-Liste (Schlüssel/Wert) */
.dl { display: grid; grid-template-columns: 210px 1fr; margin: 0; }
.dl__row { display: contents; }
.dl__key { padding: var(--space-2) var(--space-3) var(--space-2) 0; color: var(--color-text-muted); font-size: 0.9rem; border-bottom: 1px solid var(--color-border); }
.dl__val { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }

.input--sm { padding: var(--space-1) var(--space-2); font-size: 0.85rem; max-width: 240px; width: auto; display: inline-block; }
.inline-consent { display: flex; gap: var(--space-2); align-items: center; justify-content: flex-end; flex-wrap: wrap; }

.btn--danger { background: var(--color-error-fg); color: var(--color-primary-text); }
.btn--danger:hover { background: var(--color-danger-hover); color: var(--color-primary-text); }

.panel--danger { border-color: color-mix(in srgb, var(--color-error-fg) 40%, var(--color-border)); }
.panel--danger .panel__header { background: var(--color-error-bg); }

.mandate-add { margin-top: var(--space-4); }
.mandate-add > summary { display: inline-block; list-style: none; cursor: pointer; }
.mandate-add > summary::-webkit-details-marker { display: none; }

@media (max-width: 860px) {
    .dl { grid-template-columns: 1fr; }
    .dl__key { border-bottom: none; padding-bottom: 0; }
    .dl__val { padding-top: 0; }
}

/* ======================================================================== */
/* Modul: Finanzen & SEPA                                                    */
/* ======================================================================== */

/* Unter-Navigation (Tabs) */
.tabs {
    display: flex; gap: var(--space-4); flex-wrap: wrap;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-6);
}
.tab {
    padding: var(--space-3) var(--space-1); margin-bottom: -1px;
    color: var(--color-text-muted); text-decoration: none;
    border-bottom: 2px solid transparent; font-weight: var(--font-weight-medium);
}
.tab:hover { color: var(--color-text); }
.tab.is-active { color:var(--color-primary-ink); border-bottom-color: var(--color-primary); }

/* Kennzahl-Kacheln (ergänzend zu .stat-grid/.stat-card) */
.stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.stat {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: var(--space-5); box-shadow: var(--shadow-sm);
}
.stat__label { color: var(--color-text-muted); font-size: 0.9rem; }
.stat__value { font-size: 1.6rem; font-weight: var(--font-weight-bold); color: var(--color-heading); margin-top: var(--space-1); }
.stat--pos .stat__value { color: var(--color-success-fg); }
.stat--neg .stat__value { color: var(--color-error-fg); }

/* Zwei-Spalten-Raster */
.grid-2 {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-4); margin-bottom: var(--space-6);
}

/* Beträge & rechtsbündige Zahlenspalten */
.num { text-align: right; }
td.num, th.num { text-align: right; white-space: nowrap; }
.amount--pos { color: var(--color-success-fg); }
.amount--neg { color: var(--color-error-fg); }

@media (max-width: 860px) {
    .stat-grid--3 { grid-template-columns: 1fr 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .stat-grid--3 { grid-template-columns: 1fr; }
}

/* ======================================================================== */
/* Utility-Klassen (CSP-konform, ersetzen Inline-Styles)                     */
/* ======================================================================== */
.u-empty      { text-align: center; padding: var(--space-6); }
.u-mt-4       { margin-top: var(--space-4); }
.u-mt-3       { margin-top: var(--space-3); }
.u-m-0        { margin: 0; }
.u-nowrap     { white-space: nowrap; }
.u-prewrap    { white-space: pre-wrap; margin: 0; }
.u-maxw-200   { max-width: 200px; }
.u-text-xs    { font-size: 0.8rem; }
.u-list-plain { list-style: none; padding: 0; margin: 0; }

/* ======================================================================== */
/* Branding / Logo                                                           */
/* ======================================================================== */
.brand-chip {
    display: block; background: var(--color-surface); border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
}
.brand-chip img { display: block; width: 100%; height: auto; }
.auth-card__brand { justify-content: center; }
.auth-logo { display: block; max-width: 230px; width: 100%; height: auto; margin: 0 auto var(--space-2); }

/* ======================================================================== */
/* Über-Seite                                                                */
/* ======================================================================== */
.about-hero {
    display: flex; align-items: center; gap: var(--space-5);
    flex-wrap: wrap; margin-bottom: var(--space-4);
}
.about-hero__logo { max-width: 260px; width: 100%; height: auto; }
.about-hero__text h2 { margin: 0 0 var(--space-1); }
.about-version { color: var(--color-text-muted); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.about-grid > .panel { min-width: 0; }
.about-modules { display: grid; gap: var(--space-3); }
.about-module { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); min-width: 0; }
.about-module__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.about-module__head strong { overflow-wrap: anywhere; }
.about-module__head .badge { white-space: nowrap; }
.about-module p { margin: var(--space-2) 0; }
.about-module details { font-size: .875rem; }
.about-module summary { cursor: pointer; padding: var(--space-2) 0; }
.about-module ol { padding-left: 1.5rem; overflow-wrap: anywhere; }
.badge-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ======================================================================== */
/* Newsletter: HTML-Editor & Statistik                                       */
/* ======================================================================== */
.editor-toolbar { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.editor-area {
    min-height: 340px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    padding: var(--space-4); background: var(--color-surface); overflow: auto; line-height: 1.5;
}
.editor-area:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.editor-area img { max-width: 100%; height: auto; }
.editor-source { width: 100%; min-height: 340px; font-family: var(--font-mono, monospace); font-size: 0.85rem; }
.is-hidden { display: none; }

.nl-progress {
    height: 10px; border-radius: 999px; background: var(--color-surface-alt);
    border: 1px solid var(--color-border); overflow: hidden;
}
.nl-progress__bar { height: 100%; background: var(--color-success-fg); }

/* ======================================================================== */
/* Öffentliche Seiten (Anmeldung/Bestätigung, öffentliche Veranstaltung)     */
/* ======================================================================== */
.public-card { max-width: 640px; }
.public-note { color: var(--color-text-muted); font-size: 0.9rem; }
.event-public__meta { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0; }
.event-public__meta dt { color: var(--color-text-muted); }

@media (max-width: 860px) {
    .about-grid { grid-template-columns: 1fr; }
}

/* ======================================================================== */
/* Dateiverwaltung (Stufe 6)                                                 */
/* ======================================================================== */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    margin-bottom: var(--space-4); font-size: 0.9rem; }
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color:var(--color-primary-ink); text-decoration: underline; }
.breadcrumb__sep { color: var(--color-text-muted); }
.breadcrumb__current { font-weight: var(--font-weight-medium); color: var(--color-text); }

.usage { display: flex; flex-direction: column; gap: var(--space-3); }
.usage__stats { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: baseline; }

.file-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.file-icon { display: inline-block; width: 1.2em; color:var(--color-primary-ink); }
.file-icon--doc { color: var(--color-text-muted); }

.row-menu { position: relative; display: inline-block; }
.row-menu > summary { display: inline-block; list-style: none; cursor: pointer; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu__body { display: flex; flex-direction: column; gap: var(--space-3);
    margin-top: var(--space-2); padding: var(--space-3);
    background: var(--color-surface-alt); border: 1px solid var(--color-border);
    border-radius: var(--radius); min-width: 260px; }

.cell-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; }
.cell-form .input--sm { max-width: 100%; }

.share-box { border-top: 1px dashed var(--color-border); padding-top: var(--space-3);
    display: flex; flex-direction: column; gap: var(--space-2); }
.share-box__title { font-weight: var(--font-weight-medium); font-size: 0.85rem; }
.share-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.share-row .input--sm { min-width: 220px; }

/* -----------------------------------------------------------------------------
   E-Mail-Client (Stufe 7)
   -------------------------------------------------------------------------- */
.mail-list td { vertical-align: top; }
.mail-list a { text-decoration: none; color: var(--color-text); }
.mail-list a:hover { text-decoration: underline; }

/* Ungelesene Nachrichten hervorheben */
.mail-row--unread td,
.mail-row--unread a { font-weight: var(--font-weight-bold); color: var(--color-heading); }
.mail-row--unread { box-shadow: inset 3px 0 0 var(--color-primary); }

.mail-attach { margin-left: var(--space-2); color: var(--color-text-muted); }

/* Nachrichtentext: Zeilenumbrüche erhalten, lange Zeilen umbrechen */
.mail-body {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
    padding: var(--space-4);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    max-width: 100%;
    overflow-x: auto;
}

/* Inline-Code (Hinweise, Serveradressen) */
code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.9em;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    padding: 0.05em 0.35em;
    border-radius: var(--radius-sm);
}

/* E-Mail Teil 2: Ordnerleiste, Aktionen, Verfassen */
.mail-folders {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.mail-folder {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.85rem;
}
.mail-folder:hover { background: var(--color-surface-alt); }
.mail-folder.is-active {
    background: var(--color-primary);
    color: var(--color-primary-text);
    border-color: transparent;
}

.mail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.mail-move { display: inline-flex; align-items: center; gap: var(--space-2); }

.mail-compose {
    width: 100%;
    min-height: 16rem;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.92rem;
    line-height: 1.5;
    resize: vertical;
}

/* -----------------------------------------------------------------------------
   Dateiverwaltung – Dateimanager-Ansicht (Nextcloud-Anmutung)
   -------------------------------------------------------------------------- */
.u-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.fm-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4);
}
.fm-toolbar__actions { display: flex; gap: var(--space-2); }
.fm-new { user-select: none; }

/* Dropdown-Menü (auf <details> aufgebaut, funktioniert ohne JS; JS ergänzt nur
   das Schließen bei Klick außerhalb / Escape). */
.fm-menu { position: relative; display: inline-block; }
.fm-menu > summary { list-style: none; cursor: pointer; }
.fm-menu > summary::-webkit-details-marker { display: none; }
.fm-menu > summary::marker { content: ""; }

.fm-menu__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; padding: 0; border-radius: var(--radius-sm);
    border: 1px solid transparent; background: transparent;
    color: var(--color-text-muted); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.fm-row:hover .fm-menu__btn,
.fm-menu[open] .fm-menu__btn {
    border-color: var(--color-border); background: var(--color-surface); color: var(--color-text);
}

.fm-menu__list {
    position: absolute; right: 0; left: auto; top: calc(100% + 4px); z-index: 40;
    min-width: 220px; display: flex; flex-direction: column; padding: var(--space-2);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: 0 10px 30px var(--shadow-dialog-color);
}
.fm-menu__item {
    display: flex; align-items: center; gap: var(--space-2); width: 100%;
    text-align: left; padding: var(--space-2) var(--space-3); background: transparent;
    border: 0; border-radius: var(--radius-sm); color: var(--color-text);
    font-size: 0.9rem; text-decoration: none; cursor: pointer;
}
.fm-menu__item:hover { background: var(--color-surface-alt); }
.fm-menu__item.is-danger { color: var(--color-error-fg); }
.fm-menu__item.is-danger:hover { background: var(--color-error-bg); }
.fm-menu__sep { height: 1px; margin: var(--space-2) 0; background: var(--color-border); border: 0; }
.fm-menu__form { margin: 0; }

/* Das Aufklappmenü (⋮) darf nicht vom Panel (overflow:hidden für runde Ecken)
   oder vom horizontal scrollbaren Tabellen-Container abgeschnitten werden.
   Solange ein Menü offen ist, wird der Zuschnitt aufgehoben (Klasse per JS). */
.panel.fm.is-menu-open { overflow: visible; }
.panel.fm.is-menu-open .table-wrap { overflow: visible; }
/* Bei wenig Platz nach unten (untere Zeilen) öffnet das Menü nach oben. */
.fm-menu.fm-menu--up .fm-menu__list { top: auto; bottom: calc(100% + 4px); }

/* Liste */
.fm .table-wrap { margin: 0; }
.fm-list { font-size: 0.94rem; }
.fm-list thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.fm-list td, .fm-list th {
    padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.fm-list tbody tr:last-child td { border-bottom: 0; }
.fm-row:hover { background: var(--color-surface-alt); }
.fm-list__menu { width: 3rem; text-align: right; white-space: nowrap; }

.fm-name { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.fm-name > a {
    text-decoration: none; color: var(--color-text); font-weight: var(--font-weight-medium);
    overflow-wrap: anywhere;
}
.fm-name > a:hover { color:var(--color-primary-ink); text-decoration: underline; }

/* Icon-Kachel */
.fm-ic {
    flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.62rem; font-weight: var(--font-weight-bold); color: var(--color-primary-text); letter-spacing: 0.02em;
}
.fm-ic--folder { background: transparent; color: var(--area-documents-ink); }
.fm-ic__svg { width: 1.75rem; height: 1.75rem; fill: currentColor; }
.fm-ic--file { background: var(--color-text-muted); }
.fm-ic--img { background: var(--file-image); }
.fm-ic--pdf { background: var(--file-pdf); }
.fm-ic--doc { background: var(--file-document); }
.fm-ic--sheet { background: var(--file-sheet); }
.fm-ic--slide { background: var(--file-slide); }
.fm-ic--archive { background: var(--file-archive); }
.fm-ic--audio { background: var(--file-audio); }
.fm-ic--video { background: var(--file-video); }
.fm-ic--text { background: var(--file-text); }

/* Leerer Ordner */
.fm-empty { text-align: center; color: var(--color-text-muted); padding: var(--space-7) var(--space-4); }
.fm-empty__ic { font-size: 2.4rem; opacity: 0.5; display: block; margin-bottom: var(--space-2); }

/* Status-/Speicherzeile */
.fm-status {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5);
    padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border);
    color: var(--color-text-muted); font-size: 0.85rem;
}
.fm-status__spacer { flex: 1 1 auto; }
.fm-status .nl-progress { width: 160px; }

/* Dialoge (natives <dialog>) */
.fm-dialog {
    border: none; border-radius: var(--radius); padding: 0; width: min(520px, 94vw);
    color: var(--color-text); background: var(--color-surface);
    box-shadow: 0 20px 60px var(--shadow-dialog-color);
}
.fm-dialog::backdrop { background: var(--color-overlay); }
.fm-dialog__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-4); border-bottom: 1px solid var(--color-border);
}
.fm-dialog__title { margin: 0; font-size: 1.02rem; }
.fm-dialog__x {
    border: 0; background: transparent; font-size: 1.4rem; line-height: 1; cursor: pointer;
    color: var(--color-text-muted);
}
.fm-dialog__x:hover { color: var(--color-text); }
.fm-dialog__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.fm-dialog__foot {
    display: flex; justify-content: flex-end; gap: var(--space-2);
    padding: var(--space-4); border-top: 1px solid var(--color-border);
}
.fm-dialog__foot--flush { padding-left: 0; padding-right: 0; border-top: 0; }
.fm-dialog .input, .fm-dialog select.input { width: 100%; }

/* =====================================================================
   E-Mail „Outlook"-Oberfläche (Stufe 7c)
   ===================================================================== */

/* Kopfleiste mit Postfach-Umschalter */
.mail-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.mail-topbar__left, .mail-topbar__right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.mail-switch { min-width: 16rem; max-width: 100%; }
.mail-switch--single { font-weight: var(--font-weight-medium); color: var(--color-heading); }

/* Zwei-Spalten-Layout: Ordnerbaum links, Liste rechts */
.mail-shell {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}
.mail-sidebar {
    flex: 0 0 224px;
    max-width: 224px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-2);
    align-self: flex-start;
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-4));
    max-height: calc(100vh - var(--topbar-height) - var(--space-5));
    overflow-y: auto;
}
.mail-sidebar__head {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-bold);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mail-tree { display: flex; flex-direction: column; gap: 1px; }
.mail-tree__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.2;
}
.mail-tree__item[data-depth="0"] { padding-left: var(--space-3); }
.mail-tree__item[data-depth="1"] { padding-left: calc(var(--space-3) + 14px); }
.mail-tree__item[data-depth="2"] { padding-left: calc(var(--space-3) + 28px); }
.mail-tree__item[data-depth="3"] { padding-left: calc(var(--space-3) + 42px); }
.mail-tree__item[data-depth="4"] { padding-left: calc(var(--space-3) + 56px); }
.mail-tree__item[data-depth="5"] { padding-left: calc(var(--space-3) + 70px); }
a.mail-tree__item:hover { background: var(--color-surface-alt); }
.mail-tree__item.has-unread .mail-tree__name { font-weight: var(--font-weight-bold); color: var(--color-heading); }
.mail-tree__item.has-unread .mail-tree__count { font-weight: var(--font-weight-bold); }
.mail-tree__item.is-active {
    background: var(--color-primary);
    color: var(--color-primary-text);
}
.mail-tree__item.is-active .mail-tree__name,
.mail-tree__item.is-active .mail-tree__count { color: var(--color-primary-text); }
.mail-tree__item--group { color: var(--color-text-muted); font-size: 0.82rem; cursor: default; }
.mail-tree__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-tree__count { flex: 0 0 auto; color:var(--color-primary-ink); font-variant-numeric: tabular-nums; }

/* Nachrichtenbereich */
.mail-main { flex: 1 1 auto; min-width: 0; }
.mail-main__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--space-2);
}
.mail-main__folder { font-size: 1.05rem; font-weight: var(--font-weight-bold); color: var(--color-heading); }
.mail-main__count { font-size: 0.85rem; }

/* Nachrichten-Tabelle mit Spalten 📎 | ! | Von | Betreff | Datum */
.mail-grid { width: 100%; }
.mail-grid th { font-size: 0.78rem; color: var(--color-text-muted); }
.mail-grid .mail-col-ic { width: 1%; text-align: center; white-space: nowrap; }
.mail-grid .mail-col-from { width: 22%; }
.mail-grid .mail-col-subj { width: auto; }
.mail-grid .mail-col-date { width: 1%; white-space: nowrap; text-align: right; font-size: 0.85rem; }
.mail-grid td { vertical-align: middle; }
.mail-grid a { text-decoration: none; color: var(--color-text); }
.mail-grid a:hover { text-decoration: underline; }
.mail-grid__row { cursor: pointer; }
.mail-grid__row:hover { background: var(--color-surface-alt); }
.mail-grid__row.is-unread { box-shadow: inset 3px 0 0 var(--color-primary); }
.mail-grid__row.is-unread a,
.mail-grid__row.is-unread .mail-col-from,
.mail-grid__row.is-unread .mail-col-subj { font-weight: var(--font-weight-bold); color: var(--color-heading); }
.mail-prio { font-weight: var(--font-weight-bold); }
.mail-prio--high { color: var(--color-error-fg); }
.mail-prio--low  { color: var(--area-finance-ink); font-weight: var(--font-weight-normal); }
.mail-mark { margin-right: var(--space-1); font-weight: var(--font-weight-bold); }
.mail-mark--reply { color: var(--area-communication-ink); }
.mail-mark--fwd   { color: var(--area-finance-ink); }

.mail-empty {
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-alt);
}
.mail-empty__ic { display: block; font-size: 2rem; opacity: 0.5; margin-bottom: var(--space-2); }

/* Lesenansicht */
.mail-read { display: flex; flex-direction: column; gap: var(--space-4); }
.mail-cmdbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.mail-cmdbar .inline-form { display: inline-flex; }
.mail-cmdbar__sep { width: 1px; height: 1.4rem; background: var(--color-border); margin: 0 var(--space-1); }
.mail-cmdbar--compose { background: transparent; border: none; padding: 0; }

.mail-read__head {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-5);
}
.mail-read__meta { margin: 0; }
.mail-attachments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
.mail-attachments__label { color: var(--color-text-muted); font-size: 0.85rem; }
.mail-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-alt);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.85rem;
}
.mail-chip:hover { background: var(--color-surface); border-color: var(--color-primary); }

.mail-viewbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.mail-viewbar__label { color: var(--color-text-muted); font-size: 0.85rem; }
.mail-viewtoggle {
    appearance: none;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
}
.mail-viewtoggle:hover { background: var(--color-surface-alt); }
.mail-viewtoggle.is-active { background: var(--color-primary); color: var(--color-primary-text); border-color: transparent; }
.mail-viewtoggle:disabled { opacity: 0.45; cursor: not-allowed; }

.mail-html-frame {
    display: block;
    width: 100%;
    min-height: 320px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-document-paper);
}

/* Verfassen (Outlook-artig) */
.mail-compose-shell { display: flex; flex-direction: column; gap: var(--space-3); }
.mail-fields {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-surface);
}
.mail-field { display: flex; align-items: stretch; border-bottom: 1px solid var(--color-border); }
.mail-field:last-child { border-bottom: none; }
.mail-field__label {
    flex: 0 0 96px;
    display: flex;
    align-items: center;
    padding: var(--space-3);
    background: var(--color-surface-alt);
    border-right: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.9rem;
}
.mail-field__label.req::after { content: " *"; color: var(--color-error-fg); }
.mail-field__input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    padding: var(--space-3);
    font: inherit;
    background: transparent;
    color: var(--color-text);
}
.mail-field__input:focus { outline: none; box-shadow: inset 0 -2px 0 var(--color-primary); }
.mail-field__input[readonly] { color: var(--color-text-muted); }
.mail-compose-body {
    width: 100%;
    min-height: 20rem;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
    background: var(--color-surface);
    color: var(--color-text);
}

/* Responsiv: unter 780px stapeln */
@media (max-width: 780px) {
    .mail-shell { flex-direction: column; }
    .mail-sidebar { flex-basis: auto; max-width: none; width: 100%; position: static; max-height: none; }
    .mail-grid .mail-col-from { width: auto; }
    .mail-field__label { flex-basis: 72px; }
}
@media (max-width: 560px) {
    .mail-grid .mail-col-date { display: none; }
}

/* ---- E-Mail: Sortierung, Blättern, ziehbare Spalten, Anhang-Ablage (Stufe 7d) ---- */

/* Kopfzeile des Nachrichtenbereichs: Ordner + Anzahl links, „Ordner leeren" rechts */
.mail-main__head { align-items: center; }
.mail-mainhead__action { margin-left: auto; }

/* Sortierbare Spaltenköpfe */
.mail-grid thead a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    cursor: pointer;
}
.mail-grid thead a:hover { text-decoration: underline; }

/* Ziehbare Spaltenbreiten */
.mail-grid[data-resizable-cols] th { position: relative; }
.mail-grid.is-resizable { table-layout: fixed; }
.mail-grid.is-resizable th,
.mail-grid.is-resizable td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
}
.col-resizer::after {
    content: "";
    position: absolute;
    right: 3px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: transparent;
}
.col-resizer:hover::after,
.col-resizer.is-dragging::after { background: var(--color-primary); }

/* Blätter-Leiste */
.mail-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
.mail-pager__info { font-size: 0.85rem; }
.mail-pager__nav { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mail-pager__btn {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.85rem;
}
a.mail-pager__btn:hover { background: var(--color-surface-alt); }
.mail-pager__btn.is-disabled { opacity: 0.4; }
.mail-pager__pos { font-size: 0.85rem; color: var(--color-text-muted); }
.mail-pager__per { display: flex; align-items: center; gap: var(--space-2); }
.mail-pager__per select { width: auto; }

/* Anhänge als Liste mit „In Dateien speichern" */
.mail-attachments { display: block; }
.mail-attach-list {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
}
.mail-attach-item { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mail-attach-save { display: inline-flex; align-items: center; gap: var(--space-1); }
.mail-attach-save select { width: auto; max-width: 220px; }

/* --- E-Mail: Ordner-erstellen-Button in der Sidebar --- */
.mail-sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.mail-sidebar__title { overflow: hidden; text-overflow: ellipsis; }
.mail-sidebar__add {
    border: 1px solid var(--color-border); background: var(--color-surface);
    width: 24px; height: 24px; border-radius: var(--radius-sm); cursor: pointer;
    line-height: 1; color: var(--color-text-muted); flex: none; font-size: 1rem; padding: 0;
}
.mail-sidebar__add:hover { color: var(--color-text); background: var(--color-surface-alt); }

/* --- Rechtsklick-Kontextmenü (E-Mail: Nachrichten & Ordner) --- */
.ctx-menu {
    position: fixed; z-index: 1000; min-width: 200px; left: -9999px; top: 0;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
    padding: var(--space-1); display: flex; flex-direction: column; gap: 2px;
}
.ctx-menu[hidden] { display: none; }
.ctx-menu__item {
    display: block; width: 100%; text-align: left; background: none; border: 0;
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
    font: inherit; color: var(--color-text); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.ctx-menu__item:hover { background: var(--color-surface-alt); }
.ctx-menu__item.is-danger { color: var(--color-error-fg); }
.ctx-menu__form { margin: 0; }
.ctx-menu__move { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); }
.ctx-menu__move select { flex: 1; min-width: 0; }

/* --- Menüeinträge: Symbol in fester Spalte, Text bündig untereinander --- */
.fm-menu__item { display: flex; align-items: center; }
.fm-menu__ic { display: inline-block; width: 1.4em; text-align: center; margin-right: 0.55em; flex: none; }

/* --- Datum + Uhrzeit nebeneinander (Veranstaltungen) --- */
.dt-group { display: flex; gap: var(--space-2); align-items: center; }
.dt-group input[type="date"] { flex: 1 1 auto; min-width: 0; }
.dt-group__time { flex: 0 0 auto; width: auto; max-width: 8.5rem; }

/* Mitgliederzusätze und Import: auch auf schmalen Bildschirmen bedienbar. */
.member-filter { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.import-example { max-width: 260px; overflow-wrap: anywhere; }
.form-row > .field { min-width: 0; }
.form-actions { flex-wrap: wrap; }
@media (max-width: 560px) {
    .main, .app-content, .panel, .panel__body { min-width: 0; }
    .page-head__actions { flex-wrap: wrap; }
    .member-filter a, .dl__val { overflow-wrap: anywhere; }
    .filter-bar .field { width: 100%; margin-bottom: var(--space-2); }
    .btn, .btn--sm, .input { min-height: 44px; }
    .table-wrap { max-width: 100%; overscroll-behavior-x: contain; }
}

/* Datenschutz und mobile Bedienung: bestehende Gestaltung beibehalten. */
.privacy-notice { white-space: pre-wrap; overflow-wrap: anywhere; }
.app-content, .main, .panel, .panel__body, .field, .mail-main { min-width: 0; }
.table-wrap { max-width: 100%; overscroll-behavior-inline: contain; }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.mail-tree__row { display: flex; align-items: center; min-width: 0; }
.mail-tree__row > .mail-tree__item { flex: 1; min-width: 0; }
.mail-action-button { flex: 0 0 44px; min-height: 44px; min-width: 44px; border: 0; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 1.4rem; cursor: pointer; }

.ctx-menu { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; }
@media (max-width: 860px) {
    body.nav-open { overflow: hidden; }
    .sidebar { max-width: calc(100vw - 56px); overflow-y: auto; height: 100dvh; }
    .btn, .btn-icon, .fm-menu > summary, .ctx-menu__item, .tab { min-height: 44px; }
    .input, select.input, textarea.input { font-size: 16px; min-width: 0; }
    .tabs { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }
    .tab { flex: 0 0 auto; }
    .topbar__title { min-width: 0; overflow-wrap: anywhere; }
    .fm-dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }
    .mail-sidebar { max-height: 250px; overflow-y: auto; }
}
@media (max-width: 560px) {
    .main { padding: 16px; }
    .page-head { flex-direction: column; align-items: stretch; gap: 12px; }
    .page-head__actions, .form-actions { flex-wrap: wrap; }
    .page-head__title, .dl__val, .alert, .footer { overflow-wrap: anywhere; }
    .topbar { gap: 8px; padding: 12px; flex-wrap: wrap; }
    .topbar__name { display: none; }
    .topbar__user { margin-left: auto; }
    .form-row { grid-template-columns: minmax(0, 1fr); }
    .inline-consent { flex-direction: column; align-items: stretch; }
    .inline-consent .input { width: 100%; max-width: none; }
    .mail-field { flex-wrap: wrap; min-width: 0; }
    .mail-toolbar { flex-wrap: wrap; }
    .mail-preview, .mail-body, iframe { max-width: 100%; }
    .stats-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Wiederverwendbarer Inhaltseditor (AP-EDITOR). */
.rich-content { overflow-wrap: anywhere; line-height: 1.65; }
.rich-content img { display: block; max-width: 100%; height: auto; }
.rich-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.rich-content th, .rich-content td { padding: 8px; border: 1px solid var(--color-border); }
.rich-content .rc-card { padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.rich-content .rc-callout { padding: 16px; background: var(--color-surface-alt); border-radius: var(--radius-md); }
.rich-content .rc-button { display: inline-block; background: var(--color-primary); color: var(--color-primary-text); padding: 12px 18px; border-radius: var(--radius-sm); }
.rich-content .rc-center { text-align: center; }
.rich-content .rc-left { text-align: left; }
.rich-content .rc-right { text-align: right; }
.rich-content .rc-justify { text-align: justify; }
.rich-content .rc-small { font-size: 0.85rem; }
.editor-options { margin-top: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 12px; }
.editor-options summary { cursor: pointer; min-height: 44px; }
.editor-options .field { margin-top: 16px; }
.editor-options .btn { margin: 8px 8px 8px 0; }
.editor-dialog { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); background: var(--color-surface); padding: 20px; }
.editor-dialog::backdrop { background: var(--color-overlay); }
.editor-dialog .rich-content { margin-top: 20px; }
@media (max-width: 560px) { .editor-toolbar .btn { min-height: 44px; } .editor-area { min-height: 240px; } .editor-source { min-height: 240px; } .editor-options { padding: 8px; } }

/* Öffentliche Antragsnachweise auf kleinen Displays lesbar halten. */
.application-hash { overflow-wrap:anywhere; }

/* Spendenprojekte: native Fortschrittsanzeige ohne Inline-CSS. */
.project-progress { width:100%; height:1.25rem; accent-color:var(--color-primary); margin:.5rem 0 1rem; }
.project-card { padding:1rem 0; border-bottom:1px solid var(--color-border); }
.project-bank-value { overflow-wrap:anywhere; }

/* Öffentliche Veranstaltungsübersicht. */
.event-public-filters { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:20px 0; }
.event-public-card { padding:24px 0; border-bottom:1px solid var(--color-border); overflow-wrap:anywhere; }
.event-public-card h2 { margin:8px 0 12px; font-size:1.35rem; }
.event-public-date { color:var(--color-primary-ink); font-weight:600; }

/* =============================================================================
   Kiparo · Feinere gemeinsame Oberfläche, Oktober 2026
   ============================================================================= */
html { color-scheme: light; }
body { -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: var(--font-sans); }
.ui-icon { display: block; width: 22px; height: 22px; flex: 0 0 auto; }
.app { background: var(--color-bg); }
.app-content { margin-left: calc(var(--sidebar-width) + 24px); }
.sidebar {
    inset: 12px auto 12px 12px; height: calc(100dvh - 24px); width: var(--sidebar-width);
    padding: 10px; border: 1px solid var(--color-border); border-radius: 22px;
    background: var(--color-sidebar-bg); box-shadow: var(--shadow-sm); overflow: hidden; z-index: 40;
}
.sidebar__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 18px; flex: 0 0 auto; }

.sidebar__close { display: none; }
.sidebar__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 3px 8px; }
.nav-section + .nav-section { margin-top: 16px; }
.nav__section { margin: 0; padding: 0 12px 7px; color: var(--color-nav-heading); font-size: 0.72rem; font-weight: 600; text-transform: none; letter-spacing: 0.03em; }
.nav { gap: 3px; }
.nav__link {
    min-height: 44px; padding: 10px 12px; gap: 11px; border-radius: 12px;
    color: var(--color-sidebar-text); font-size: 0.91rem; line-height: 1.35; font-weight: 500;
    box-shadow: none; transition: background var(--transition), color var(--transition);
}
.nav__link:hover { background: var(--color-sidebar-hover); color: var(--color-heading); }
.nav__link.is-active { background: var(--color-primary-soft); color: var(--color-primary-hover); box-shadow: none; font-weight: 650; }
.nav__icon { display: flex; align-items: center; justify-content: center; width: 22px; flex: 0 0 22px; opacity: 1; }
.nav__label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nav-group__toggle { list-style: none; cursor: pointer; user-select: none; }
.nav-group__toggle::-webkit-details-marker { display: none; }
.nav-group__toggle::marker { content: ''; }
.nav-group.is-current > summary { color: var(--color-primary-hover); }
.nav-group__chevron { color: var(--color-nav-heading); flex: 0 0 16px; }
.nav-group__chevron .ui-icon { width: 16px; height: 16px; transition: transform var(--transition); }
.nav-group[open] > summary .nav-group__chevron .ui-icon { transform: rotate(90deg); }
.nav__children { padding: 3px 0 4px 23px; margin: 0 0 0 20px; border-left: 1px solid var(--color-border); }
.nav__link--child { min-height: 40px; font-size: 0.85rem; padding: 8px 10px; gap: 6px; font-weight: 450; }
.nav__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; font-size: 0.7rem; font-weight: 650; color: var(--color-primary-hover); background: var(--color-primary-soft); border-radius: 7px; }
.sidebar__account { border-top: 1px solid var(--color-border); padding-top: 9px; flex: 0 0 auto; }
.account-avatar { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; background: var(--color-primary-soft); color: var(--color-primary-hover); flex: 0 0 34px; }
.account-avatar .ui-icon { width: 18px; height: 18px; }
.sidebar__profile { padding: 10px; }
.sidebar__profile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sidebar__profile-text strong { font-size: 0.82rem; font-weight: 600; overflow-wrap: anywhere; }
.sidebar__profile-text > span { font-size: 0.73rem; color: var(--color-text-muted); }
.sidebar__about { font-size: 0.8rem; min-height: 36px; padding: 7px 12px; }
.sidebar__about .ui-icon { width: 18px; height: 18px; }
.nav-backdrop { position: fixed; inset: 0; z-index: 45; background: var(--color-overlay); }
.nav-backdrop[hidden] { display: none; }
.topbar { height: auto; min-height: var(--topbar-height); background: var(--color-surface); border-color: var(--color-border); padding: 10px 32px; gap: 16px; }
@supports (backdrop-filter: blur(16px)) {
    .topbar { background: var(--color-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
}
.topbar__title { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.025em; min-width: 0; overflow-wrap: anywhere; }
.topbar__profile { display: flex; align-items: center; gap: 9px; color: var(--color-text); border-radius: 11px; }
.topbar__profile:hover { text-decoration: none; }
.topbar__name { font-size: 0.8rem; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__user { gap: 12px; flex: 0 0 auto; }
.topbar__logout .ui-icon { width: 17px; height: 17px; }
.topbar__logout { background: transparent; border-color: transparent; }
.main { padding: 32px; }
.page-head__title { font-size: 1.65rem; font-weight: 650; letter-spacing: -0.045em; }
h3, .panel__title { letter-spacing: -0.02em; font-weight: 600; }
.panel { box-shadow: var(--shadow-sm); border-color: var(--color-border); }
.panel__header { background: var(--color-surface); padding: 20px 24px; }
.panel__body { padding: 24px; }
.stat-card, .stat { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.stat-card__value, .stat__value { letter-spacing: -0.055em; font-weight: 650; font-variant-numeric: tabular-nums; }
.stat-card__label a { color: var(--color-text-muted); }
.stat-card__label a:hover { color:var(--color-primary-ink); }
.btn { min-height: 40px; font-weight: 550; border-radius: 10px; }
.btn--primary { box-shadow: 0 2px 4px var(--shadow-accent-color); }
.btn--ghost { background: var(--color-surface); }
.btn--sm { min-height: 34px; }
.btn:disabled { box-shadow: none; }
.input, select, textarea { background: var(--color-surface); min-height: 42px; border-color: var(--color-border); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); }
.table { font-size: 0.88rem; }
.table thead th { font-size: 0.77rem; font-weight: 600; background: var(--color-surface-alt); }
.table td { font-variant-numeric: tabular-nums; }
.badge { border-color: transparent; padding: 4px 9px; font-weight: 550; }
.tabs { gap: 4px; border-bottom: 0; padding: 4px; background: var(--color-surface-alt); border-radius: 12px; }
.tab { border: 0; border-radius: 9px; }
.tab.is-active { background: var(--color-surface); box-shadow: var(--shadow-sm); color: var(--color-primary-hover); }
.footer { border-top: 0; padding: 20px 32px; font-size: 0.75rem; flex-wrap: wrap; }
.fm-toolbar__actions { flex-wrap: wrap; }
.fm-list th { position: relative; }
.auth-body { background: var(--color-bg); }
.auth-card { border-radius: var(--radius-lg); box-shadow: var(--shadow); border-color: var(--color-border); }
.btn-icon, .sidebar__close { align-items: center; justify-content: center; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-text); cursor: pointer; }
@media (max-width: 1100px) and (min-width: 861px) {
    .main { padding: 24px; }
    .topbar { padding-inline: 24px; }
    .topbar__name { display: none; }
}
@media (max-width: 860px) {
    .app-content { margin-left: 0; }
    .sidebar { inset: 10px auto 10px 10px; height: calc(100dvh - 20px); max-width: calc(100vw - 32px); width: 300px; z-index: 50; transform: translateX(calc(-100% - 12px)); box-shadow: var(--shadow-lg); }
    .sidebar__close, .btn-icon { display: inline-flex; }
    .sidebar__header { padding: 7px 7px 15px; }
    .nav__link, .nav__link--child, .sidebar__about { min-height: 44px; }
    .topbar { padding: 10px 16px; gap: 12px; flex-wrap: nowrap; }
    .topbar__title { font-size: 1rem; }
    .topbar__name, .logout-label { display: none; }
    .topbar__user { gap: 4px; }
    .topbar__logout { min-height: 44px; min-width: 44px; padding: 10px; }
    .topbar__profile .account-avatar { width: 34px; }
    .main { padding: 24px; }
    .footer { padding: 16px 24px; }
    .sidebar { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
    .main { padding: 20px 16px; }
    .panel__body, .panel__header { padding: 18px; }
    .page-head__title { font-size: 1.45rem; }
    .btn, .btn--sm { min-height: 44px; }
    .input, select, textarea { font-size: 16px; }
    .footer { padding: 16px; row-gap: 8px; }
    .topbar__title { font-size: 0.92rem; }
    .topbar__profile { display: none; }
    .page-head__actions .btn { flex: 0 1 auto; }
}
@media (prefers-reduced-transparency: reduce) { .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--color-surface); } }

.sidebar__profile-text strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Sicherheitsnachweise bleiben auch auf schmalen Displays lesbar. */
.security-secret { overflow-wrap: anywhere; user-select: all; }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 8px; padding-left: 20px; }

/* Aufgabenorientierte Finanzverwaltung */
.finance-navigation { margin-bottom: 20px; }
.finance-navigation__current { color: var(--color-text-muted); font-size: .875rem; margin: 0 0 12px; }
.finance-navigation__mobile { display: none; }
.finance-subnav, .finance-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.finance-subnav .is-active { background: var(--color-primary-soft); color: var(--color-primary-ink); }
.finance-task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.finance-task { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--color-border); border-radius: 16px; padding: 18px; color: inherit; text-decoration: none; }
.finance-task:hover, .finance-task:focus-visible { border-color: var(--color-primary-ink); background: var(--color-surface-alt); }
.finance-task span { color: var(--color-text-muted); font-size: .875rem; }
.finance-details { margin-top: 20px; border-top: 1px solid var(--color-border); }
.finance-details > summary { cursor: pointer; padding: 16px 0; font-weight: 600; }
.finance-details__body { display: grid; gap: 16px; }
.finance-details__body > .field { margin: 0; }
@media (max-width: 860px) {
    .finance-navigation__mobile { display: flex; }
    .finance-navigation__current { display: none; }
    .finance-details > summary { min-height: 44px; }
}

/* Optionale Angaben erst bei Bedarf anzeigen, vorhandene Werte bleiben erhalten. */
.form-details { margin: 16px 0 24px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); }
.form-details > summary { cursor: pointer; padding: 16px 18px; font-weight: 600; color: var(--color-heading); min-height: 48px; }
.form-details > summary > span { display: block; margin: 6px 0 0 18px; font-size: .875rem; font-weight: 400; color: var(--color-text-muted); }
.form-details__body { padding: 8px 18px 18px; }
.form-details__body > .field:last-child { margin-bottom: 0; }
.form-details > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 14px; }
[data-project-bank-period][hidden] { display: none; }

/* Einheitliche Bedienelemente und sparsame blaue/violette Akzente. */
input[type="checkbox"], input[type="radio"] {
    appearance: none; -webkit-appearance: none; width: 24px; height: 24px; min-width: 24px; padding: 0; margin: 0; flex: 0 0 24px;
    border: 1.5px solid var(--color-control-border); border-radius: 7px; background: var(--color-surface); vertical-align: middle; cursor: pointer;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked { border-color: var(--color-primary); background-color: var(--color-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M6 12l4 4 8-9'/%3E%3C/svg%3E"); }
input[type="checkbox"]:indeterminate { background-color: var(--color-primary); border-color: var(--color-primary); background-image: linear-gradient(white,white); background-size: 12px 2px; background-position: center; background-repeat: no-repeat; }
input[type="radio"]:checked { border-color: var(--color-primary); background: radial-gradient(circle, white 0 4px, var(--color-primary) 5px); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .55; cursor: not-allowed; }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 12px; line-height: 1.5; border-radius: 12px; cursor: pointer; }
label:has(> input[type="checkbox"]:checked), label:has(> input[type="radio"]:checked) { background-color: var(--color-primary-soft); }
.checkbox input { margin-top: 0; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr)); gap: 12px; margin: 16px 0; }
label.choice-card { border: 1px solid var(--color-border); border-radius: 16px; padding: 16px; }
.choice-card strong, .choice-card small { display: block; }
.choice-card small { margin-top: 6px; font-size: 13px; color: var(--color-text-muted); }
.choice-card:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.panel--accent { border-color: var(--color-border); background: linear-gradient(120deg, var(--color-surface-alt), var(--color-primary-soft)); }
.page-head h2::before { content: ''; display: inline-block; vertical-align: -2px; width: 5px; height: 22px; border-radius: 5px; margin-right: 10px; background: linear-gradient(var(--color-primary),var(--color-accent)); }
.form-details > summary:hover { background: var(--color-accent-soft); border-radius: 16px; }
.workflow-steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 24px; counter-reset: workflow; }
.workflow-steps li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--color-surface-alt); color: var(--color-text-muted); font-size: 13px; }
.workflow-steps li::before { counter-increment: workflow; content: counter(workflow); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface); font-weight: 600; }
.workflow-steps li[aria-current="step"] { background: var(--color-accent-soft); color: var(--color-accent); }
.workflow-steps li[aria-current="step"]::before { background: var(--color-accent); color: var(--color-primary-text); }
.workflow-steps .is-complete { background: var(--color-success-bg); color: var(--color-success-fg); }
.workflow-controls { display: flex; justify-content: space-between; gap: 12px; margin: 20px 0; }
.workflow-controls[hidden], [data-workflow-step][hidden], [data-payment-source][hidden], [data-workflow-back][hidden], [data-workflow-next][hidden] { display: none; }
@media (max-width: 480px) {
    input[type="checkbox"], input[type="radio"] { width: 26px; height: 26px; min-width: 26px; flex-basis: 26px; }
    label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: 48px; }
    .checkbox-grid { grid-template-columns: minmax(0,1fr); }
    .workflow-steps { gap: 6px; }.workflow-steps li { padding: 8px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { input[type="checkbox"], input[type="radio"] { transition: none; } }
@media (forced-colors: active) { input[type="checkbox"], input[type="radio"] { appearance: auto; -webkit-appearance: auto; background-image: none; } }

/* Dateinamen brauchen auf Mobilgeräten eine eigene, volle Zeile. */
.fm-name { min-width:0; }
.fm-name > a,.fm-name > span:last-child { min-width:0; overflow-wrap:anywhere; }
@media(max-width:640px) {
 .fm-list,.fm-list tbody,.fm-trash-list,.fm-trash-list tbody { display:block; width:100%; }
 .fm-list thead,.fm-trash-list thead { display:none; }
 .fm-list tr,.fm-trash-list tr { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; padding:14px; position:relative; border-bottom:1px solid var(--color-border); }
 .fm-list td,.fm-trash-list td { display:block; border:0; padding:0; min-width:0; width:auto; white-space:normal; }
 .fm-list tr { grid-template-columns:max-content minmax(0,1fr) 44px; gap:4px 6px; }
 .fm-list tbody td { padding-block:0; }
 .fm-list td:first-child { grid-column:1 / 3; grid-row:1; }
 .fm-list .fm-list__menu { grid-column:3; grid-row:1; width:auto; align-self:start; }
 .fm-list td:nth-child(2),.fm-list td:nth-child(3) { grid-row:2; font-size:12px; line-height:1.5; color:var(--color-text-muted); }
 .fm-list td:nth-child(2) { grid-column:1; padding-left:46px; white-space:nowrap; }
 .fm-list td:nth-child(3) { grid-column:2 / -1; padding-left:0; }
 .fm-list td:nth-child(3)::before { content:"·"; margin-right:6px; }
 .fm-list .fm-menu__btn { min-width:44px; min-height:44px; }
 .fm-list .fm-name { display:flex; width:100%; gap:10px; align-items:flex-start; }
 .fm-list .fm-name > a { flex:1; line-height:1.5; word-break:normal; overflow-wrap:anywhere; }
 .fm-list td[colspan],.fm-trash-list td[colspan] { grid-column:1 / -1; }
 .fm-trash-list td:first-child,.fm-trash-list .table__actions { grid-column:1 / -1; }
 .fm-trash-list .table__actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
 .fm-toolbar { gap:12px; align-items:flex-start; }.fm-toolbar__actions { display:flex; flex-wrap:wrap; gap:6px; }
 .breadcrumb { min-width:0; overflow-wrap:anywhere; flex-wrap:wrap; }
 .fm-name .fm-ic { flex:0 0 36px; }
}
.communication-launcher { position:fixed; right:max(18px,env(safe-area-inset-right)); bottom:calc(20px + env(safe-area-inset-bottom)); z-index:70; width:54px; height:54px; display:grid; place-items:center; border-radius:19px; background:var(--color-primary); color:white; box-shadow:var(--shadow-lg); text-decoration:none; }
.communication-launcher svg { width:26px; height:26px; }.communication-launcher:focus-visible { outline:3px solid var(--color-accent); outline-offset:4px; }
.communication-badge { position:absolute; top:-7px; right:-6px; min-width:24px; height:24px; border-radius:20px; padding:0 5px; display:grid; place-items:center; background:var(--color-error-fg); color:var(--color-surface); font-size:12px; border:2px solid var(--color-surface); }
.communication-badge[hidden] {display:none;}
.communication-popup { position:fixed; inset:auto max(18px,env(safe-area-inset-right)) calc(84px + env(safe-area-inset-bottom)) auto; margin:0; width:410px; max-width:calc(100vw - 24px); max-height:min(650px,calc(100dvh - 110px)); padding:0; border:1px solid var(--color-border); border-radius:22px; color:var(--color-text); background:var(--color-surface); box-shadow:var(--shadow-lg); z-index:71; overflow:hidden; }
.communication-popup[open] {display:flex;flex-direction:column;}
.communication-popup__head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--color-border); flex:none; }
.communication-popup__head h2 {font-size:16px;margin:0;}.communication-popup__body { padding:16px; overflow-y:auto; overscroll-behavior:contain; }
.communication-popup .form-row {display:grid;grid-template-columns:minmax(0,1fr);gap:0;}.communication-popup textarea {min-height:85px;}
.communication-entry { margin:12px 0; padding:14px; border:1px solid var(--color-border); border-radius:14px; background:var(--color-surface-alt); }
.communication-entry--note { background:var(--color-accent-soft); border-left:3px solid var(--color-accent); }
.communication-entry__meta {display:flex;flex-wrap:wrap;gap:4px 10px; font-size:12px;}.communication-entry__meta span {color:var(--color-text-muted);}
.communication-entry__body {white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0;}
[data-communication-entries] {max-height:280px;overflow-y:auto;margin:12px 0;}
.footer {padding-right:86px;}
@media(max-width:480px){.communication-popup{right:12px;max-height:calc(100dvh - 105px);}.communication-launcher{right:16px;}}
/* Restliche feste Flächen in Formularen, Workflow, Kalender und Editor. */
[data-theme="dark"] .panel--accent {background:linear-gradient(120deg,var(--color-surface-alt),var(--color-accent-soft));border-color:var(--color-border);}
[data-theme="dark"] input[type="checkbox"],[data-theme="dark"] input[type="radio"] {background-color:var(--color-surface-alt);border-color:var(--color-text-muted);}
[data-theme="dark"] input[type="checkbox"]:checked,[data-theme="dark"] input[type="checkbox"]:indeterminate {background-color:var(--color-primary);border-color:var(--color-primary);}
[data-theme="dark"] .workflow-steps li {background:var(--color-surface-alt);}[data-theme="dark"] .workflow-steps li::before{background:var(--color-surface);}
[data-theme="dark"] .workflow-steps li[aria-current="step"] {background:var(--color-accent-soft);}[data-theme="dark"] .workflow-steps .is-complete{background:var(--color-success-bg);color:var(--color-success-fg);}
[data-theme="dark"] .finance-task,[data-theme="dark"] .finance-details {border-color:var(--color-border);}[data-theme="dark"] .finance-task:hover {background:var(--color-primary-soft);}[data-theme="dark"] .finance-task span {color:var(--color-text-muted);}
[data-theme="dark"] .finance-subnav .is-active {background:var(--color-primary-soft);color:var(--color-primary-hover);}

.communication-mail-counts { display:flex;flex-wrap:wrap;gap:8px; }

/* Vereinsanschreiben: Auswahl und Berichte bleiben auch ohne breite Tabellen lesbar. */
.member-mail-picks { max-height:320px; overflow:auto; overflow-wrap:anywhere; }
.member-mail-picks label { width:100%; }.member-mail-picks small {display:block;}
.member-mail-summary {display:flex;flex-wrap:wrap;gap:10px 18px;overflow-wrap:anywhere;}
.member-mail-history {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;}
.member-mail-report h3 {overflow-wrap:anywhere;}
.member-mail-report {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;align-items:start;}

/* Clean App · Eine Akzentfarbe, klare Inhalte und gezielt eingesetzte Karten. */
.app-content { margin-left: var(--sidebar-width); }
.sidebar { inset: 0 auto 0 0; height: 100dvh; border: 0; border-right: 1px solid var(--color-border); border-radius: 0; box-shadow: none; padding: 16px 12px; }
.sidebar__header { padding: 8px 10px 24px; }

.nav__link { border-radius: 10px; font-weight: 450; }
.nav__link.is-active, .nav-group.is-current > summary { color: var(--color-primary-ink); }
.nav__link.is-active { font-weight: 600; }
.nav__section { padding-bottom: 8px; font-size: 11px; letter-spacing: .02em; }
.nav__children { border-left: 0; margin-left: 18px; padding-left: 16px; }
.nav__link--child { font-size: 13px; }
.account-avatar { background: var(--color-surface-alt); color: var(--color-text-muted); }
.topbar { background: var(--color-surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--color-border); }
.topbar__title { font-size: 15px; letter-spacing: -.015em; }
.main { padding: 32px; }
.page-head { gap: 16px; margin-bottom: 24px; }
.page-head h2, .page-head__title { margin: 0; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.035em; font-weight: 650; }
.page-head h2::before { content: none; }
.panel { border-radius: var(--radius); box-shadow: none; margin-bottom: 24px; }
.panel__header { padding: 18px 24px; }
.panel__body { padding: 24px; }
.panel__body > :first-child { margin-top: 0; }
.panel__body > :last-child { margin-bottom: 0; }
.panel--accent, [data-theme="dark"] .panel--accent { background: var(--color-surface); border-color: var(--color-border); }
.stat-card, .stat { box-shadow: none; border-radius: var(--radius); }
.btn { min-height: 44px; padding: 10px 16px; border-radius: 10px; font-weight: 550; }
.btn--primary { box-shadow: none; }
.btn--primary, .btn--danger { color: var(--color-primary-text); }
.btn--sm { min-height: 36px; padding: 8px 12px; }
.btn--ghost { background: var(--color-surface); }
.btn-icon { background: transparent; border: 0; }
.input, select, textarea { min-height: 46px; border-radius: 10px; background: var(--color-surface); }
.label { font-size: 14px; margin-bottom: 8px; }
.hint { line-height: 1.55; }
.form-details { border-radius: 12px; margin-block: 16px 20px; box-shadow: none; }
.form-details > summary { font-size: 14px; padding: 16px; }
.form-details > summary:hover { background: var(--color-surface-alt); border-radius: 12px; }
.form-details__body { padding: 4px 16px 16px; }
.choice-card:has(input:checked) { box-shadow: none; border-color: var(--color-primary); }
input[type="checkbox"], input[type="radio"] { border-color: var(--color-text-muted); background-color: var(--color-surface); }
label:has(> input[type="checkbox"]:checked), label:has(> input[type="radio"]:checked) { background: var(--color-primary-soft); }
.table thead th { background: var(--color-surface); font-size: 12px; }
.table th, .table td { padding-block: 15px; }
.table tbody tr:last-child td { border-bottom: 0; }
.tabs { background: var(--color-surface-alt); padding: 4px; border: 1px solid var(--color-border); }
.tab { min-height: 40px; display: inline-flex; align-items: center; }
.tab.is-active { color: var(--color-primary-ink); box-shadow: var(--shadow-sm); }
.finance-task { background: var(--color-surface); border-color: var(--color-border); border-radius: 12px; padding: 18px; }
.finance-task:hover, .finance-task:focus-visible { background: var(--color-surface-alt); border-color: var(--color-primary); text-decoration: none; }
.finance-task span, .finance-navigation__current { color: var(--color-text-muted); }
.finance-details { border-color: var(--color-border); }
.finance-subnav .is-active { background: var(--color-primary-soft); color: var(--color-primary-ink); }
.workflow-steps li, [data-theme="dark"] .workflow-steps li { background: transparent; border-radius: 8px; padding: 6px 8px; }
.workflow-steps li::before { background: var(--color-surface); border: 1px solid var(--color-border); }
.workflow-steps li[aria-current="step"], [data-theme="dark"] .workflow-steps li[aria-current="step"] { color: var(--color-primary-ink); background: var(--color-primary-soft); }
.workflow-steps li[aria-current="step"]::before { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-text); }
.workflow-steps .is-complete, [data-theme="dark"] .workflow-steps .is-complete { background: transparent; color: var(--color-text-muted); }
.workflow-steps .is-complete::before { color: var(--color-success-fg); }
.communication-launcher { border-radius: 50%; width: 52px; height: 52px; box-shadow: 0 4px 16px var(--shadow-dialog-color); }
.communication-popup { border-radius: 18px; }
.communication-entry { border: 0; border-radius: 12px; }
.communication-entry--note { border-left: 3px solid var(--color-primary); }
.editor-shell, .editor-wrapper { box-shadow: none; }
.app-welcome { margin-bottom: 28px; }
.app-welcome h2 { margin: 4px 0 10px; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.04em; }
.app-welcome p { margin: 0; color: var(--color-text-muted); }
.app-section-heading { font-size: 16px; font-weight: 600; margin: 28px 0 14px; }
.app-overview { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 16px; }
a.app-overview-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; color: var(--color-text); transition: border-color var(--transition), background var(--transition); }
a.app-overview-card:hover { border-color: var(--color-primary); text-decoration: none; background: var(--color-surface-alt); }
.app-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; color: var(--color-primary-ink); background: var(--color-primary-soft); }
.app-card-icon .ui-icon { width: 20px; height: 20px; }
.app-overview-card .stat-card__value { font-size: 30px; margin-top: 4px; line-height: 1.2; }
.app-overview-card .stat-card__label { font-size: 13px; margin: 0; }
.app-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.app-shortcut { display: flex; align-items: center; gap: 14px; min-height: 80px; padding: 18px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); }
.app-shortcut > span:nth-child(2) { flex: 1; min-width: 0; }
.app-shortcut strong, .app-shortcut small { display: block; }
.app-shortcut strong { font-size: 14px; font-weight: 600; }
.app-shortcut small { color: var(--color-text-muted); margin-top: 3px; }
.app-shortcut > .ui-icon { width: 16px; height: 16px; color: var(--color-text-muted); }
.app-shortcut:hover { text-decoration: none; border-color: var(--color-primary); }
:root[data-theme="dark"] .btn--danger { background: var(--color-danger-fill); color: var(--color-primary-text); }
:root[data-theme="dark"] .nav__badge { color: var(--color-primary-ink); }
@media (max-width: 1100px) and (min-width: 861px) { .main { padding: 24px; } }
@media (max-width: 860px) {
 .app-content { margin-left: 0; }
 .sidebar { inset: 0 auto 0 0; height: 100dvh; width: 300px; max-width: calc(100vw - 40px); border-radius: 0 20px 20px 0; transform: translateX(calc(-100% - 12px)); box-shadow: var(--shadow-lg); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
 .main { padding: 24px; }
 .topbar { padding-inline: 16px; }
}
@media (max-width: 560px) {
 .main { padding: 24px 16px; }
 .panel__body, .panel__header { padding: 18px; }
 .btn--sm { min-height: 44px; }
 .input, select, textarea { font-size: 16px; }
 .app-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
 a.app-overview-card { padding: 16px; }
 .app-overview-card .stat-card__value { font-size: 28px; }
 .app-card-icon { width: 36px; height: 36px; }
 .app-welcome { margin-bottom: 24px; }
 .workflow-steps { gap: 4px; }
 .workflow-steps li { font-size: 12px; padding: 6px; }
 .members-app-table, .members-app-table tbody { display: block; width: 100%; }
 .members-app-table thead { display: none; }
 .members-app-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 18px; border-bottom: 1px solid var(--color-border); }
 .members-app-table tbody tr:last-child { border-bottom: 0; }
 .members-app-table td { display: block; border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
 .members-app-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 1; font-size: 16px; font-weight: 600; }
 .members-app-table td:nth-child(2) a { color: var(--color-heading); }
 .members-app-table td:nth-child(4) { grid-column: 2; grid-row: 2; align-self: start; }
 .members-app-table td:first-child { grid-column: 1; grid-row: 2; font-size: 12px; }
 .members-app-table td:first-child::before { content: 'Nr. '; }
 .members-app-table td:nth-child(3) { grid-column: 1 / -1; font-size: 13px; }
 .members-app-table td:nth-child(5) { grid-column: 1 / -1; font-size: 13px; color: var(--color-text-muted); }
 .members-app-table td:nth-child(5)::before { content: 'Beitrag: '; }
 .members-app-table .table__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 4px; }
 .members-app-table td[colspan] { grid-column: 1 / -1; grid-row: auto; }
 .members-app-table td[colspan]::before { content: none; }
}
@media (prefers-reduced-motion: reduce) { a.app-overview-card { transition: none; } }
:root[data-theme="dark"] .finance-subnav .is-active { color: var(--color-primary-ink); }

/* Priorisierte Bereiche und flache Übersichtskarten. */
.nav__badge--mail { border-radius: 999px; background: var(--color-primary); color: var(--color-primary-text); min-width: 24px; }
.nav__badge--mail[hidden] { display: none; }
:root[data-theme="dark"] .nav__badge--mail { color: var(--color-primary-text); }
.app-overview { grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr)); gap: 12px; }
a.app-overview-card { flex-direction: row; align-items: center; min-height: 84px; padding: 18px; gap: 14px; }
.app-overview-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.app-overview-card .stat-card__value { font-size: 23px; margin: 0; }
.app-overview-card .stat-card__label { font-size: 13px; }
@media(max-width:560px) { .app-overview { grid-template-columns: minmax(0,1fr); }.app-shortcuts { grid-template-columns: minmax(0,1fr); } }

/* Seitenlayout wird in Prozentklassen gespeichert und auf die Seitenbreite skaliert. */
.rc-layout { position:relative; width:100%; aspect-ratio:210 / 297; isolation:isolate; overflow:hidden; contain:paint; container-type:inline-size; background:var(--color-document-paper); color:var(--color-document-ink); border:1px solid var(--color-border); margin:16px 0; }
.rc-layout > .rc-object { position:absolute; margin:0; padding:0; min-width:0; font-size:2cqw; line-height:1.45; overflow-wrap:anywhere; }
.rc-layout > .rc-textbox > :first-child { margin-top:0; }.rc-layout > .rc-textbox > :last-child { margin-bottom:0; }
.rc-layout > .rc-textbox h2 {font-size:1.6em;}.rc-layout > .rc-textbox h3 {font-size:1.3em;}
.rc-layout > .rc-picture > img { display:block; width:100%; height:100%; max-width:100%; object-fit:contain; margin:0; }
.club-brand-initial {display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;border-radius:12px;background:var(--color-primary-soft);color:var(--color-primary-ink);font-size:24px;font-weight:700;}

.sidebar__club-name {font-size:14px;line-height:1.3;color:var(--color-text);overflow-wrap:anywhere;}

.auth-card__brand {flex-direction:column;gap:12px;text-align:center;overflow-wrap:anywhere;}
.auth-logo {width:auto;max-width:100%;max-height:100px;object-fit:contain;margin:0;}
.club-branding-preview {display:flex;align-items:center;gap:16px;margin:16px 0;overflow-wrap:anywhere;}
.club-branding-preview img {width:auto;max-width:160px;max-height:80px;object-fit:contain;background:var(--color-document-paper);border-radius:8px;padding:8px;}
.totp-qr {width:min(100%,320px);margin:20px 0;padding:8px;background:var(--color-document-paper);border-radius:12px;}
.totp-qr svg {display:block;width:100%;height:auto;}
.public-body {background:var(--color-bg);color:var(--color-text);margin:0;min-height:100vh;}
.public-wrap {width:100%;max-width:1160px;margin:0 auto;padding:32px 24px;}
.public-card {max-width:none;padding:32px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:20px;box-shadow:none;min-width:0;overflow-wrap:anywhere;}
.public-brand {display:flex;align-items:center;gap:16px;padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--color-border);font-size:20px;overflow-wrap:anywhere;}
.public-brand .auth-logo {max-width:180px;max-height:72px;flex-shrink:1;}
.public-brand strong {min-width:0;}
.public-wrap .auth-foot {text-align:center;line-height:1.8;}
.public-card .form {max-width:760px;}
@media(max-width:560px){.public-wrap{padding:12px;}.public-card{padding:20px 16px;border-radius:16px;}.public-brand{gap:12px;font-size:17px;}.public-brand .auth-logo{max-width:100px;max-height:60px;}}
.public-card > h1 {text-align:left;font-size:clamp(1.6rem,2.5vw,2.2rem);line-height:1.2;margin-bottom:24px;}
/* Branding bleibt zur gesamten Seitenleiste zentriert, unabhängig vom Schließen-Knopf. */
.sidebar__header {position:relative;justify-content:center;}

.sidebar__club-name {display:block;width:100%;text-align:center;}
.sidebar__close {position:absolute;right:0;top:8px;}
.club-brand-placeholder {display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:96px;height:56px;border:1px dashed var(--color-border);border-radius:12px;background:var(--color-surface-alt);color:var(--color-text-muted);font-size:16px;font-weight:500;}

/* Modul-Einstiege: gleicher Aufbau in Finanzen und Mitgliedern, alle Farben aus Tokens. */
.module-navigation { margin-bottom: var(--space-6); }
.module-navigation__home { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; margin-bottom: var(--space-3); color: var(--color-text-muted); font-size: 14px; border-radius: var(--radius-sm); }
.module-navigation__home .ui-icon { width: 18px; height: 18px; }
.module-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.module-action { display: flex; align-items: center; gap: var(--space-3); min-width: 0; min-height: 56px; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: 14px; font-weight: var(--font-weight-medium); }
.module-action .ui-icon { flex: 0 0 20px; width: 20px; height: 20px; color: var(--color-text-muted); }
.module-action span { min-width: 0; overflow-wrap: break-word; }
.module-action:hover { text-decoration: none; border-color: var(--color-primary); background: var(--color-surface-alt); }
.module-action.is-active { color: var(--color-primary-ink); background: var(--color-primary-soft); border-color: var(--color-primary); font-weight: var(--font-weight-bold); }
.module-action.is-active .ui-icon { color: var(--color-primary-ink); }
.module-action:focus-visible, .module-navigation__home:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
@media (max-width: 1100px) { .module-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .module-actions { grid-template-columns: minmax(0, 1fr); } .module-action { width: 100%; min-height: 52px; } }
.module-hub__intro { margin-bottom: var(--space-6); }
.module-hub__eyebrow { color: var(--color-primary-ink); font-weight: var(--font-weight-medium); margin: 0 0 var(--space-2); }
.module-hub__intro h2 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.035em; margin: 0 0 var(--space-3); }
.module-hub__intro > p:last-child { color: var(--color-text-muted); margin: 0; }
.module-hub__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.module-card { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); min-height: 128px; min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); transition: border-color var(--transition), background var(--transition); }
.module-card:hover { text-decoration: none; border-color: var(--color-primary); background: var(--color-surface-alt); }
.module-card:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.module-card__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; height: 44px; background: var(--color-primary-soft); color: var(--color-primary-ink); border-radius: var(--radius-sm); }
.module-card__icon .ui-icon { width: 24px; height: 24px; }
.module-card__content { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; min-width: 0; overflow-wrap: break-word; }
.module-card__content strong { color: var(--color-heading); font-size: 16px; font-weight: var(--font-weight-bold); }
.module-card__content > span { color: var(--color-text-muted); font-size: 14px; }
.module-card__content .module-card__count { align-self: flex-start; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-primary-ink); font-size: 12px; }
.module-card__arrow { flex: 0 0 16px; color: var(--color-text-muted); padding-top: var(--space-3); }
.module-card__arrow .ui-icon { width: 16px; height: 16px; }
@media (max-width: 640px) {
    .module-hub__grid { grid-template-columns: minmax(0, 1fr); }
    .module-card { padding: var(--space-4); gap: var(--space-3); min-height: 112px; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .module-card { transition: none; } }

/* Beitragsvorschläge: vorhandene Panels und Designfarben, keine Inline-Stile. */
.contribution-purpose { overflow-wrap: anywhere; }
.contribution-candidate { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.contribution-choice { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; cursor: pointer; }
.contribution-choice input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; }
.contribution-suggestion h3 { overflow-wrap: anywhere; }

/* Einheitliche Moduloberfläche; gespeicherte Dokumentinhalte bleiben unabhängig. */
.app-content, .main, .page-head > *, .panel, .card, .form-row > * { min-width:0; }
.module-hub__eyebrow, .module-action.is-active, .module-action.is-active .ui-icon { color:var(--area-ink); }
.module-action.is-active { background:var(--area-soft); border-color:var(--area-ink); box-shadow:inset 3px 0 var(--area-ink); }
.module-action:hover, .module-card:hover { border-color:var(--area-ink); }
.module-card { box-shadow:var(--shadow-sm); }
.module-card:hover { box-shadow:var(--shadow); }
.module-card__icon, .module-card__content .module-card__count { color:var(--area-ink); background:var(--area-soft); }
.nav__link.is-active { color:var(--area-ink); background:var(--area-soft); box-shadow:inset 3px 0 var(--area-ink); font-weight:var(--font-weight-bold); }
.nav__link.is-active .nav__icon { color:var(--area-ink); }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-5); margin-bottom:var(--space-5); flex-wrap:wrap; }
.page-head__title, .page-head h2 { margin:0; font-size:clamp(23px,2.5vw,29px); letter-spacing:-.025em; color:var(--color-heading); }
.page-head__description { margin:var(--space-2) 0 0; max-width:65ch; color:var(--color-text-muted); font-size:14px; }
.page-head__actions { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.page-head__actions .btn { min-height:48px; }
.empty-state { text-align:center; padding:var(--space-6); color:var(--color-text-muted); }
.empty-state__icon { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; margin-bottom:var(--space-3); border-radius:var(--radius); color:var(--area-ink,var(--color-primary-ink)); background:var(--area-soft,var(--color-primary-soft)); }
.empty-state h3 { color:var(--color-heading); margin:0 0 var(--space-2); font-size:17px; }
.empty-state p { margin:0; }
body.app :is(a,button,input,select,textarea,summary):focus-visible { outline:3px solid var(--color-accent); outline-offset:3px; }
body.app .table-wrap { max-width:100%; overflow-x:auto; }
body.app .table th { background:var(--color-surface-alt); color:var(--color-text-muted); }
body.app .table td { overflow-wrap:break-word; }
body.app .panel, body.app .card { border-radius:var(--radius); box-shadow:var(--shadow-sm); }
body.app .input { background:var(--color-surface); color:var(--color-text); border-color:var(--color-control-border); }
body.app .input:focus { border-color:var(--color-primary); }
body.app .module-action, body.app .module-card { text-decoration:none; }
@media (max-width:640px) {
 .page-head { gap:var(--space-4); }
 .page-head__actions { width:100%; }
 .page-head__actions .btn { width:100%; justify-content:center; }
 .filter-bar { flex-wrap:wrap; }
 .filter-bar .input { min-width:0; max-width:100%; }
 .page-head__description { overflow-wrap:anywhere; }
}

.module-hub__utilities { margin-top:var(--space-6); }
.module-hub__utilities h3 { color:var(--color-text-muted); font-size:15px; margin:0 0 var(--space-3); }

/* Oberflächen der Spezialwerkzeuge verwenden dieselben zentralen Tokens.
   Arbeitsfläche, QR-Code und hochgeladene Inhalte behalten ihre Inhaltsfarben. */
body.app .sg-media-thumb, body.app .sg-stage-wrap, body.app .sg-inspector { background:var(--color-surface-alt); border-color:var(--color-border); }
body.app .sg-save { box-shadow:var(--shadow); }
body.app .sg-check input[type="checkbox"] { accent-color:var(--color-primary); }
body.app .sg-filter { flex-wrap:wrap; }
body.app .sg-filter .input { min-width:0; }
body.app .sg-editor-body { min-width:0; }
body.app .sg-editor-body > * { min-width:0; }
body.app .sg-inspector h4, body.app .sg-toolbar .btn-icon { color:var(--color-text); }
body.app .sg-inspector input, body.app .sg-inspector select { background:var(--color-surface); color:var(--color-text); }
body.app .date-picker { --picker-accent:var(--color-primary); --picker-range:var(--color-primary-soft); color:var(--color-text); background:var(--color-surface); border-color:var(--color-border); }
body.app .date-picker::backdrop { background:var(--color-overlay); }
body.app .date-picker__day.is-other-month, body.app .date-picker__weekday, body.app .date-picker__clear { color:var(--color-text-muted); }
body.app .date-picker__month, body.app .date-picker__year, body.app .date-picker__time select { background:var(--color-surface); color:var(--color-text); border-color:var(--color-border); }
body.app .date-picker__day.is-selected > span { color:var(--color-primary-text); }
body.app .date-picker__actions { border-color:var(--color-border); }
body.app .date-picker__error { color:var(--color-error-fg); }
body.app .date-picker-field__trigger { width:44px; height:44px; }
body.app .date-picker__clear { min-height:44px; }
body.app .date-picker__day:disabled { opacity:.5; color:var(--color-text-muted); }
body.app .page-head h2::before { background:var(--area-ink,var(--color-primary-ink)); }
/* Auch Signage benutzt vollständige Karten statt ungestalteter .card-Flächen. */
body.app .card { background:var(--color-surface); border:1px solid var(--color-border); padding:var(--space-5); margin-bottom:var(--space-5); }
body.app .card > :first-child { margin-top:0; }
body.app .card > :last-child { margin-bottom:0; }
body.app .sg-cards > .card { margin-bottom:0; }
body.app .sg-stat:hover { text-decoration:none; border-color:var(--area-ink); box-shadow:var(--shadow); }
body.app .sg-object.selected { outline-color:var(--color-primary); }
body.app .sg-resize { background:var(--color-primary); border-color:var(--color-primary-text); }
@media (max-width:640px) { body.app .card { padding:var(--space-5); } }

body.app .date-picker__close, body.app .date-picker__arrow, body.app .date-picker__clock, body.app .date-picker__number { color:var(--color-primary-ink); }
body.app .date-picker__month, body.app .date-picker__year, body.app .date-picker__time select { border-color:var(--color-control-border); }

/* Nachrichtenliste: kompakte Zeilen, gemeinsame Mitte und lesbare Zeitangaben.
   Feste Ausgangsbreiten verhindern, dass vor der JS-Initialisierung ein langer
   Absender die Messung der Spaltenbreiten dominiert. */
.mail-grid { table-layout:fixed; }
.mail-grid .mail-col-ic { width:40px; padding-inline:var(--space-2); }
.mail-grid tbody td { height:38px; padding-block:4px; }
.mail-grid__sender, .mail-grid__subject { display:flex; align-items:center; gap:var(--space-2); min-width:0; min-height:28px; line-height:1.4; }
.mail-grid__sender > a, .mail-grid__subject > a { display:block; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-grid__sender > .mail-mark { flex:0 0 auto; margin-right:0; }
.mail-grid__subject > .mail-action-button { float:none; display:inline-flex; align-items:center; justify-content:center; flex:0 0 28px; width:28px; height:28px; min-width:28px; min-height:28px; padding:0; line-height:1; background:transparent; }
.mail-grid__subject > .mail-action-button:hover { background:var(--color-primary-soft); color:var(--color-primary-ink); }
/* CSS-Mindestbreite bleibt auch bei alten width-Attributen und beim Ziehen
   wirksam; größere gespeicherte/gezogene Breiten bleiben weiterhin möglich. */
.mail-grid col.mail-cg-date, .mail-grid .mail-col-date { min-width:160px; }
.mail-grid .mail-col-date { width:160px; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
@media (max-width:860px), (any-pointer:coarse) {
 .mail-grid__subject > .mail-action-button { flex-basis:44px; width:44px; height:44px; min-width:44px; min-height:44px; }
 .mail-grid tbody td { height:auto; padding-block:var(--space-2); }
}
@media (max-width:1100px) {
 /* Mit Ordnerbaum und globaler Seitenleiste bleibt sonst zu wenig Platz für
    Datum, Absender und einen bedienbaren Betreff. */
 .mail-shell { flex-direction:column; }
 .mail-sidebar { flex-basis:auto; max-width:none; width:100%; position:static; max-height:none; }
 .mail-shell > .mail-main { width:100%; }
}
@media (max-width:860px) {
 /* Auf schmalen Geräten verdrängen gespeicherte Desktop-Breiten den Betreff
    nicht; die vorhandenen Spalten und Aktionen bleiben sichtbar. */
 .mail-grid.is-resizable col.mail-cg-ic, .mail-grid .mail-col-ic { width:32px; }
 .mail-grid.is-resizable col.mail-cg-from { width:25%; }
 .mail-grid.is-resizable col.mail-cg-date { width:160px; }
 .mail-grid th, .mail-grid td { padding-inline:var(--space-2); }
}
@media (max-width:560px) {
 .mail-main__head { flex-wrap:wrap; }
 .mail-grid.is-resizable col.mail-cg-from { width:34%; }
 .mail-grid.is-resizable col.mail-cg-date, .mail-grid col.mail-cg-date { visibility:collapse; width:0; min-width:0; }
 .mail-grid .mail-col-date { display:none; width:0; min-width:0; }
}

/* Mobile Karten ignorieren die gespeicherten Desktop-Spaltenbreiten.
   Der Aktionsknopf bleibt im vorhandenen Betreff-Markup und wird nur optisch
   oben rechts platziert; Klick- und Kontextmenü-Logik bleiben unverändert. */
@media (max-width:640px) {
 .mail-grid, .mail-grid.is-resizable, .mail-grid tbody { display:block; width:100%; table-layout:auto; }
 .mail-grid colgroup, .mail-grid thead { display:none; }
 .mail-grid tbody tr { display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:4px 8px; position:relative; width:100%; padding:12px; border-bottom:1px solid var(--color-border); }
 .mail-grid tbody td { display:block; height:auto; min-width:0; width:auto; padding:0; border:0; overflow:visible; text-overflow:clip; white-space:normal; }
 .mail-grid tbody .mail-col-ic { display:none; }
 .mail-grid tbody .mail-col-from { grid-column:1; grid-row:1; min-height:44px; display:flex; align-items:center; }
 .mail-grid__sender { width:100%; font-weight:var(--font-weight-bold); }
 .mail-grid__sender > a { white-space:normal; overflow-wrap:anywhere; }
 .mail-grid tbody .mail-col-subj { grid-column:1 / -1; grid-row:2; }
 .mail-grid__subject { display:block; }
 .mail-grid__subject > a { white-space:normal; overflow-wrap:anywhere; line-height:1.45; }
 .mail-grid__subject > .mail-action-button { position:absolute; top:12px; right:12px; width:44px; height:44px; min-width:44px; min-height:44px; }
 .mail-grid tbody .mail-col-date { display:block; grid-column:1 / -1; grid-row:3; width:auto; min-width:0; text-align:left; white-space:normal; color:var(--color-text-muted); font-size:0.78rem; }
 .mail-grid tbody td[colspan] { grid-column:1 / -1; }
}
@media (max-width:360px) {
 .fm-list td:nth-child(2) { padding-left:0; }
}

/* Persönlicher Dashboard-Assistent: vorhandene Farben in beiden Designs. */
.app-welcome.dashboard-assistant { padding:var(--space-5); border:1px solid var(--color-border); border-left:4px solid var(--area-main-ink); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-sm); }
.dashboard-assistant__head { display:flex; align-items:flex-start; gap:var(--space-4); }
.dashboard-assistant__icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 48px; height:48px; border-radius:var(--radius); color:var(--area-main-ink); background:var(--area-main-soft); }
.dashboard-assistant__icon .ui-icon { width:26px; height:26px; }
.dashboard-assistant__heading { min-width:0; flex:1; overflow-wrap:anywhere; }
.app-welcome .dashboard-assistant__eyebrow { color:var(--area-main-ink); font-size:13px; font-weight:var(--font-weight-medium); margin-bottom:var(--space-1); }
.dashboard-assistant h2 { margin:0 0 var(--space-2); font-size:clamp(22px,2.5vw,30px); line-height:1.25; }
.dashboard-assistant__heading > p:last-child { font-size:14px; }
.dashboard-assistant__notices { list-style:none; margin:var(--space-5) 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); }
.dashboard-assistant__notices > li { min-width:0; }
.dashboard-notice { display:flex; align-items:center; gap:var(--space-3); min-height:52px; height:100%; padding:var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface-alt); color:var(--color-text); transition:border-color var(--transition), background var(--transition); }
.dashboard-notice:hover { text-decoration:none; border-color:var(--area-ink); background:var(--area-soft); }
.dashboard-notice:hover .dashboard-notice__body > small { color:var(--color-text); }
.dashboard-notice:focus-visible { outline:3px solid var(--color-accent); outline-offset:3px; }
.dashboard-notice__icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 32px; height:32px; border-radius:var(--radius-sm); color:var(--area-ink); background:var(--area-soft); }
.dashboard-notice__icon .ui-icon { width:18px; height:18px; }
.dashboard-notice__body { flex:1; min-width:0; overflow-wrap:anywhere; font-size:14px; font-weight:var(--font-weight-medium); }
.dashboard-notice__body > span, .dashboard-notice__body > small { display:block; }
.dashboard-notice__body > small { margin-top:var(--space-1); color:var(--color-text-muted); font-size:12px; font-weight:var(--font-weight-normal); }
.dashboard-notice > .ui-icon { flex:0 0 16px; width:16px; height:16px; color:var(--color-text-muted); }
.app-welcome .dashboard-assistant__quiet { display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-5); padding:var(--space-3); border-radius:var(--radius-sm); background:var(--area-main-soft); color:var(--color-text); font-size:14px; }
.dashboard-assistant__quiet > .ui-icon { flex:0 0 20px; width:20px; height:20px; color:var(--area-main-ink); }
.dashboard-assistant__quiet > span { min-width:0; overflow-wrap:anywhere; }
.app-welcome .dashboard-assistant__unavailable { background:var(--color-surface-alt); }
@media (max-width:760px) { .dashboard-assistant__notices { grid-template-columns:minmax(0,1fr); } }
@media (max-width:560px) { .app-welcome.dashboard-assistant { padding:var(--space-4); } .dashboard-assistant__head { gap:var(--space-3); } .dashboard-assistant__icon { flex-basis:40px; height:40px; } .dashboard-assistant__icon .ui-icon { width:22px; height:22px; } }
@media (prefers-reduced-motion:reduce) { .dashboard-notice { transition:none; } }

/* Block-Inhalte: gemeinsame Ausgabe auf öffentlichen Seiten und in der Vorschau. */
.rich-content .rc-block:not(.rc-legacy) { margin: 0 0 18px; min-width: 0; }
.rich-content .rc-block:not(.rc-legacy) > :first-child { margin-top: 0; }
.rich-content .rc-block:not(.rc-legacy) > :last-child { margin-bottom: 0; }
.rich-content .rc-image > img { display: inline-block; width: 100%; vertical-align: middle; }
.rich-content .rc-image.rc-width-full > img { max-width: 100%; }
.rich-content .rc-image.rc-width-large > img { max-width: 440px; }
.rich-content .rc-image.rc-width-medium > img { max-width: 280px; }
.rich-content .rc-spacer { margin: 0; font-size: 0; line-height: 0; }
.rich-content .rc-spacer.rc-gap-small { height: 12px; }
.rich-content .rc-spacer.rc-gap-medium { height: 24px; }
.rich-content .rc-spacer.rc-gap-large { height: 40px; }
.rich-content .rc-divider > hr { border: 0; border-top: 1px solid var(--color-border); margin: 12px 0; }
.rich-content table.rc-columns { display: table; width: 100%; table-layout: fixed; border: 0; border-collapse: separate; border-spacing: 0; overflow: visible; }
.rich-content .rc-columns > tbody > tr > td, .rich-content .rc-columns > tr > td { border: 0; padding: 0 8px; vertical-align: top; min-width: 0; }
.rich-content .rc-columns-2 > tbody > tr > td, .rich-content .rc-columns-2 > tr > td { width: 50%; }
.rich-content .rc-columns-3 > tbody > tr > td, .rich-content .rc-columns-3 > tr > td { width: 33.333%; }

/* Gemeinsamer Blockeditor: kein Canvas, keine Geometrie, keine horizontale Werkzeugmatrix. */
.block-editor { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.block-editor .editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; font-weight: 600; border-bottom: 1px solid var(--color-border); }
.block-editor .editor-heading > :first-child { min-width: 0; overflow-wrap: anywhere; }
.block-editor .editor-mode { flex: 0 0 auto; font-size: .8rem; color: var(--color-text-muted); font-weight: 400; }
.block-editor-toolbar, .block-format-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--color-border); }
.block-editor-toolbar { background: var(--color-surface-alt); border-radius: var(--radius) var(--radius) 0 0; }
.block-editor .btn, .block-palette .btn { min-height: 44px; white-space: normal; }
.block-editor-toolbar .btn { flex: 0 1 auto; }
.block-format-toolbar .btn { padding: 6px 10px; }
.block-format-toolbar [aria-pressed="true"] { color: var(--color-primary-ink); background: var(--color-primary-soft); border-color: var(--color-primary); }
.block-format-toolbar [data-cmd="bold"] { font-weight: 700; }
.block-format-toolbar [data-cmd="italic"] { font-style: italic; }
.block-format-select { width: auto; max-width: 100%; min-height: 44px; }
.block-editor-hint { margin: 0; padding: 10px 16px; font-size: .85rem; color: var(--color-text-muted); }
.block-editor .editor-canvas { padding: 16px; background: var(--color-bg); }
.block-editor .editor-area { width: 100%; min-width: 0; min-height: 160px; padding: 0; border: 0; margin: 0; overflow-wrap: anywhere; }
.block-editor .editor-area.is-hidden { display: none; }
.block-editor .editor-source { width: 100%; min-height: 300px; font-family: monospace; }
.block-editor .editor-source.is-hidden { display: none; }
.block-editor .editor-statusbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .8rem; }
.block-editor .editor-status { padding: 8px 16px; margin: 0; }
.block-editor .editor-status:empty { display: none; }
.block-editor > .editor-options { margin: 0; border: 0; border-top: 1px solid var(--color-border); border-radius: 0 0 var(--radius) var(--radius); padding: 12px 16px; }
.block-editor .editor-options .input { max-width: 100%; }
.editor-block { min-width: 0; margin: 0 0 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.editor-block.is-active { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.block-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-alt); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.block-label { flex: 1 1 110px; font-size: .85rem; color: var(--color-primary-ink); }
.block-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.block-action { gap: 5px; font-size: .78rem; }
.block-action-symbol { font-size: 1rem; line-height: 1; }
.block-content { padding: 16px; min-width: 0; }
.block-content > .rc-block:not(.rc-legacy) { margin: 0; }
.block-content [contenteditable] { min-height: 50px; padding: 4px; outline-offset: 3px; }
.block-content [contenteditable="true"]:focus-visible { outline: 2px solid var(--color-primary); border-radius: 4px; }
.block-content [data-placeholder]:has(> p:only-child > br:only-child)::before,
.block-content [data-placeholder]:has(> h2:only-child > br:only-child)::before { content: attr(data-placeholder); display: block; color: var(--color-text-muted); font-size: .9rem; }
.block-settings { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--color-border); }
.block-settings:empty { display: none; }
.block-setting { display: flex; flex-direction: column; gap: 5px; flex: 1 1 180px; min-width: 0; font-size: .8rem; font-weight: 600; }
.block-setting .input { width: 100%; min-height: 44px; font-weight: 400; }
.block-image-empty, .block-empty { color: var(--color-text-muted); text-align: center; padding: 20px; border: 1px dashed var(--color-border); border-radius: var(--radius-sm); }
.block-empty { background: var(--color-surface); }
.block-empty h3 { color: var(--color-text); margin-top: 0; }
.block-legacy-hint { margin: 0; padding: 10px 16px; font-size: .8rem; color: var(--color-text-muted); }
/* Nur die Bearbeitungsansicht führt alte Canvas-Objekte in Lesereihenfolge. Ausgabe-CSS bleibt erhalten. */
.editor-block--legacy .rc-layout { position: static; aspect-ratio: auto; overflow: visible; contain: none; container-type: normal; background: var(--color-surface); color: var(--color-text); }
.editor-block--legacy .rc-layout > .rc-object { position: static; width: auto; height: auto; margin: 12px 0; font-size: 1rem; }
.editor-block--legacy .rc-layout > .rc-picture > img { width: auto; height: auto; max-width: 100%; }
.editor-block .rc-column .editor-block { margin: 0 0 10px; }
.editor-block .rc-column .block-header { padding: 6px; }
.editor-block .rc-column .block-actions { width: 100%; }
.editor-block .rc-column .block-content { padding: 10px; }
.editor-block .rc-column .block-settings { padding: 10px; }
.block-column-add { width: 100%; margin-top: 8px; }
.block-palette-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.block-palette-item { display: flex; align-items: center; gap: 12px; padding: 16px; min-height: 80px; min-width: 0; text-align: left; font: inherit; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; }
.block-palette-item:hover { background: var(--color-primary-soft); border-color: var(--color-primary); }
.block-palette-item > .ui-icon { flex: 0 0 24px; color: var(--color-primary-ink); }
.block-palette-item > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.block-palette-item small { color: var(--color-text-muted); font-size: .8rem; }
.block-palette-item[hidden] { display: none; }
.block-editor :is(button, select, input, textarea, [tabindex]):focus-visible, .block-palette-item:focus-visible { outline: 2px solid var(--color-primary-ink); outline-offset: 3px; }
.block-editor .editor-area.is-dragging-files { outline: 2px dashed var(--color-primary); outline-offset: 4px; }
@media (max-width: 640px) {
    .rich-content table.rc-columns, .rich-content .rc-columns > tbody, .rich-content .rc-columns > tbody > tr, .rich-content .rc-columns > tr, .rich-content .rc-columns > tbody > tr > td, .rich-content .rc-columns > tr > td { display: block; width: 100%; }
    .rich-content .rc-columns > tbody > tr > td, .rich-content .rc-columns > tr > td { padding: 0 0 16px; }
}
@media (max-width: 560px) {
    .block-editor .editor-canvas { padding: 10px; }
    .block-editor-toolbar .btn { flex: 1 1 calc(50% - 6px); }
    .block-header { padding: 8px; }
    .block-actions { width: 100%; }
    .block-actions .btn { flex: 1 1 calc(50% - 4px); padding: 6px; }
    .block-content, .block-settings { padding: 12px; }
    .block-setting { flex-basis: 100%; }
    .block-palette-grid { grid-template-columns: minmax(0, 1fr); }
    .block-editor .editor-statusbar { padding: 10px 12px; }
}

/* Einrichtungs-Assistent: nur auf setup.php, ohne Einfluss auf App-Ansichten. */
.setup-wrap { max-width:760px; width:100%; }
.setup-card { width:100%; max-width:720px; }
.setup-progress { display:flex; flex-wrap:wrap; gap:8px; padding:0; list-style:none; margin:24px 0; counter-reset:setup; }
.setup-progress li { counter-increment:setup; padding:8px 12px; border-radius:var(--radius); background:var(--color-surface-alt); color:var(--color-text-muted); }
.setup-progress li::before { content:counter(setup) ". "; }
.setup-progress .is-current { background:var(--color-primary-soft); color:var(--color-primary-ink); font-weight:var(--font-weight-bold); outline:1px solid var(--color-primary); }
.setup-checks { list-style:none; padding:0; display:grid; gap:10px; }
.setup-checks li { display:flex; gap:12px; padding:10px; border:1px solid var(--color-border); border-radius:var(--radius); }
.setup-checks small { display:block; color:var(--color-text-muted); }
.setup-check-ok > span:first-child { color:var(--color-success, #166534); }
.setup-check-error > span:first-child { color:var(--color-danger, #b91c1c); }
.setup-check-warning > span:first-child { color:var(--color-warning, #92400e); }
.setup-actions { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:24px; }
.setup-actions .btn { min-height:48px; }
.setup-summary dd { margin:0 0 12px; overflow-wrap:anywhere; }
.setup-summary dt { font-weight:var(--font-weight-bold); }
.setup-config { width:100%; min-height:360px; font-family:monospace; }
@media(max-width:560px) { .setup-wrap { padding:12px; }.setup-card { padding:20px 16px; }.setup-actions .btn { width:100%; }.setup-progress { font-size:0.8rem; } }

/* Primärer Bildweg; Bibliothek bleibt als nachrangige Aktion erreichbar. */
.block-editor [data-image-choose] { min-height:44px; background:var(--color-primary); color:var(--color-primary-text); border-color:var(--color-primary); }
.block-editor [data-image-choose]:hover { background:var(--color-primary-hover, var(--color-primary)); }