/* === base.css === */
/* =============================================================
   BASE — Fonts, CSS-Variablen & Grundlayout
   ============================================================= */

/* Globaler box-sizing-Reset: width/height inkludieren immer
   padding+border. Verhindert dass Elemente mit width:100% + padding
   über den Parent hinauswachsen (klassische Border-Box-Falle).
   Explizite Regeln (z.B. box-sizing:content-box) gewinnen weiterhin. */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Lokale Font-Dateien (kein externer CDN nötig) */
@font-face { font-family: 'Source Sans 3'; font-weight: 300; font-style: normal; font-display: swap; src: url('../fonts/source-sans-3-300.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/source-sans-3-400.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/source-sans-3-500.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/source-sans-3-600.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/source-sans-3-700.woff2') format('woff2'); }

:root {
    /* Konfigurierbare Grundfarben (werden über Einstellungen/DB überschrieben) */
    --dark-bg: #263238;
    --primary-green: #2E7D32;
    --hover-green: #4CAF50;
    --page-bg: #f7f9fc;

    /* Feste Designfarben */
    --text-light: #ECEFF1;
    --text-dark: #37474F;
    --card-bg: #FFFFFF;
    --border-color: #CFD8DC;

    /* Beträge: plus und minus tragen eine Bedeutung und folgen deshalb NICHT
       der Vereinsfarbe. Kontrast auf Weiss mindestens 4,5:1 (Mindestwert für
       normalen Text) - das vorher benutzte --hover-green (#4CAF50) lag bei
       etwa 2,5:1 und war auf helleren Bildschirmen kaum zu lesen. */
    --betrag-positiv: #2E7D32;   /* etwa 5,1:1 */
    --betrag-negativ: #C62828;   /* etwa 5,9:1 */

    /* Automatisch abgeleitete Farbtöne — passen sich an JEDE Primärfarbe an.
       Werden von color-mix() aus --primary-green berechnet. */
    --primary-5:  color-mix(in srgb, var(--primary-green), white 95%);  /* Toolbar/Panel-BG */
    --primary-10: color-mix(in srgb, var(--primary-green), white 90%);  /* Selected/Hover-BG */
    --primary-20: color-mix(in srgb, var(--primary-green), white 80%);  /* Active/Pressed-BG */
    --primary-30: color-mix(in srgb, var(--primary-green), white 70%);  /* Borders */
    --primary-35: color-mix(in srgb, var(--primary-green), white 65%);  /* Dunklere Borders */
    --primary-50: color-mix(in srgb, var(--primary-green), white 50%);  /* Akzent-Borders */

    /* Typografie */
    --font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Navigation */
    --nav-width-collapsed: 56px;
    --nav-width-expanded: 240px;

    /* Z-Index-Hierarchie (Modal-Stacking, in Stufen) */
    --z-wizard: 2000;
    --z-bulk-progress: 3500;
    --z-confirm: 10001;

    /* Status-Farben (global wiederverwendbar in Banner, Badges, Toasts, etc.) */
    --color-warning-bg: #fff3e0;
    --color-warning-fg: #e65100;
    --color-warning-border: #ffcc80;
    --color-danger-bg:  #ffebee;
    --color-danger-fg:  #c62828;
    --color-danger-border: #ef9a9a;
    --color-info-bg:    #e3f2fd;
    --color-info-fg:    #1565c0;
    --color-info-border: #90caf9;
    --color-success-bg: #e8f5e9;
    --color-success-fg: #2e7d32;
    --color-success-border: #a5d6a7;
}

html, body {
    height: 100%;
    overflow-x: hidden;
}

/* Scrollbar-Styling — NICHT auf PowerTable/Tabellen anwenden */
/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-30) transparent;
}
/* Chromium (Edge, Chrome) — nur Haupt-Scrollbar */
html::-webkit-scrollbar { width: 8px; height: 8px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: var(--primary-30); border-radius: 4px; }
html::-webkit-scrollbar-thumb:hover { background: var(--primary-50); }

body {
    font-family: var(--font-family);
    margin: 0;
    background-color: var(--page-bg);
    color: var(--text-dark);
    position: relative;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
}

/* Headings */
h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.75rem; color: var(--text-dark); }
h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; margin: 0 0 0.5rem; color: var(--text-dark); }
h3 { font-size: 1rem; font-weight: 600; line-height: 1.4; margin: 0 0 0.5rem; color: var(--text-dark); }

/* Globale Animationen */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* Staggered Fade-In für Listen/Grids */
.animate-in > * {
    opacity: 0;
    animation: fadeInUp 0.4s ease forwards;
}
.animate-in > *:nth-child(1) { animation-delay: 0.03s; }
.animate-in > *:nth-child(2) { animation-delay: 0.06s; }
.animate-in > *:nth-child(3) { animation-delay: 0.09s; }
.animate-in > *:nth-child(4) { animation-delay: 0.12s; }
.animate-in > *:nth-child(5) { animation-delay: 0.15s; }
.animate-in > *:nth-child(6) { animation-delay: 0.18s; }
.animate-in > *:nth-child(7) { animation-delay: 0.21s; }
.animate-in > *:nth-child(8) { animation-delay: 0.24s; }
.animate-in > *:nth-child(9) { animation-delay: 0.27s; }
.animate-in > *:nth-child(10) { animation-delay: 0.30s; }

/* Globale SVG-Icon-Klassen (Sprite-Sheet: partials/_icon_sprites.html) */
.icon      { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.icon-sm   { width: 0.75em; height: 0.75em; }
.icon-lg   { width: 1.25em; height: 1.25em; }
.icon-xl   { width: 1.5em; height: 1.5em; }
.icon-hero { width: 48px; height: 48px; }

/* Card Entrance Animation */
.card { animation: fadeInUp 0.35s ease both; }

/* === layout.css === */
/* =============================================================
   LAYOUT — Header, Navigation, Container, Footer, Vollbild
   ============================================================= */

/* === Mail-Sandbox-Tag im Header ===
   Dezenter Hinweis in der Mitte des Headers, sichtbar aber nicht aufdringlich.
   Wird nur angezeigt wenn MAIL_SANDBOX_ENABLED aktiv ist. */
.header-sandbox-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    margin: 0 auto;
    border-radius: 4px;
    background: rgba(198, 40, 40, 0.12);
    color: #C62828;
    border: 1px solid rgba(198, 40, 40, 0.4);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    user-select: none;
}
.header-sandbox-tag .header-sandbox-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* === Main Wrapper === */
.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--page-bg);
}

/* === Header === */
/* Header geht über die volle Breite, ÜBER der Sidebar */
.header {
    display: flex;
    align-items: center;
    background-color: var(--primary-green);
    color: var(--text-light);
    padding: 0 1.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    height: 52px;
    box-sizing: border-box;
}

/* === Globaler Ladebalken === */
#global-loading-bar {
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    height: 3px;
    background: #1976D2;
    z-index: 1002;
    width: 0%;
    opacity: 0;
    transition: width 0.3s ease-out, opacity 0.2s ease;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(25, 118, 210, 0.5);
}

/* Hamburger-Menü — nur auf Mobile sichtbar */
.menu-icon { display: none; cursor: pointer; padding: 0.5rem; }
.menu-icon span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-light);
    margin: 5px 0;
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
}

.header-title {
    margin-left: 0.5rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}

.header-logo {
    height: 36px;
    width: auto;
    margin-right: 0.75rem;
}

.app-name {
    font-weight: 700;
    font-size: 1rem;
}

.module-name {
    font-weight: 400;
    font-size: 0.9rem;
    margin-left: 0.75rem;
    padding-left: 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    opacity: 0.9;
}

.header-module-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: inherit;
}

/* Header-Aktionen (E-Mail-Badge etc.) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
    padding-right: 1rem;
}

.header-action-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
    transition: background 0.2s;
}

.header-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.header-action-icon {
    width: 22px;
    height: 22px;
}

.header-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #dc3545;
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-user {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    white-space: nowrap;
    cursor: default;
}
.header-user svg {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}
.header-user-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 600px) {
    .header-user-name { display: none; }
}

/* === Seitliche Navigation (kompakte Sidebar) === */
/* Sidebar sitzt UNTER dem Header und ÜBER dem Footer */
.side-nav {
    position: fixed;
    top: 52px;
    left: 0;
    bottom: 44px;
    width: var(--nav-width-collapsed);
    background-color: var(--dark-bg);
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
    transition: width 0.25s ease;
}

.side-nav:hover,
.side-nav.expanded {
    width: var(--nav-width-expanded);
}

/* Overlay-Schatten beim Aufklappen */
.side-nav:hover::after,
.side-nav.expanded::after {
    content: '';
    position: fixed;
    top: 0;
    left: var(--nav-width-expanded);
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.08);
    pointer-events: none;
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.nav-button {
    padding: 0.6rem 0;
    padding-left: 15px;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    gap: 1rem;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
    margin: 1px 0;
}
/* 3px border + 15px padding + 20px icon + 16px gap = 54px → bei 56px Breite ist der Text komplett verdeckt */

.nav-button:hover {
    background-color: rgba(255,255,255,0.08);
    color: #fff;
    border-left-color: var(--primary-green);
    padding-left: 18px;
}

/* Aktiver Nav-Link (wird per JS gesetzt) */
.nav-button.nav-active {
    background-color: rgba(255,255,255,0.12);
    color: #fff;
    border-left-color: var(--hover-green);
}

.nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: 0.1rem;
    color: inherit;
}

.nav-spacer {
    flex-grow: 1;
    min-height: 1rem;
}

.nav-settings {
    margin-top: 0;
}

.logout-button {
    color: rgba(255,255,255,0.5);
}
.logout-button:hover {
    color: #ef9a9a;
    border-left-color: #ef5350;
}

/* === Sub-Navigation / Tab-Header === */
.tab-header {
    background-color: var(--dark-bg);
    display: flex;
    align-items: center;
    /* Linksbündig als Basis; die Zentrierung übernehmen Auto-Margins auf dem
       ersten/letzten Tab (Regeln unten). Diese kollabieren bei Overflow
       zuverlässig auf 0 -> der Header wird linksbündig + horizontal scrollbar,
       statt überlaufende Tabs abzuschneiden. Robuster als justify-content:
       center (schneidet bei Overflow ab) und als "safe center" (Browser-
       abhängig). */
    justify-content: flex-start;
    padding: 0;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    overflow-x: auto;
    /* Die Tab-Items sind höher als der 36px-Header (Padding + 3px
       Aktiv-Unterstrich) und werden per align-items:center beschnitten -
       ohne explizites hidden zeigte overflow-x:auto für den vertikalen
       Überstand einen dünnen Scrollbalken IM Header (auf jeder Tab-Seite). */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    z-index: 1001;
    height: 36px;
    box-sizing: border-box;
}

/* Auto-Margins zentrieren die Tab-Gruppe, solange Platz ist; bei Overflow
   werden sie zu 0, sodass alle Tabs erreichbar bleiben (von links scrollbar). */
.tab-header > .tab-item:first-child { margin-inline-start: auto; }
.tab-header > .tab-item:last-child { margin-inline-end: auto; }

/* Scrollbar: auf Maus-Geräten (fine pointer) dünn sichtbar, damit überlaufende
   Tabs ohne Touch per Drag erreichbar sind. overflow-x:auto blendet sie nur
   ein, wenn wirklich Overflow vorliegt. */
.tab-header::-webkit-scrollbar {
    height: 6px;
}
.tab-header::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
}
.tab-header { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.25) transparent; }

/* Auf Touch-Geräten (coarse pointer) Scrollbar verstecken - dort wird gewischt. */
@media (pointer: coarse) {
    .tab-header { scrollbar-width: none; }
    .tab-header::-webkit-scrollbar { display: none; }
}

.tab-header .tab-item {
    padding: 0.6rem 1.25rem;
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    border-bottom: 3px solid transparent;
    opacity: 0.7;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tab-header .tab-item .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.tab-header .tab-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

.tab-header .tab-item.active {
    border-bottom: 3px solid var(--primary-green);
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.05);
}

/* Gesperrte Tabs */
.tab-header .tab-item.tab-locked {
    opacity: 0.4;
    cursor: not-allowed;
}
.tab-header .tab-item.tab-locked:hover {
    border-bottom-color: transparent;
    opacity: 0.5;
}

/* Tab-Inhalte */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* === Hauptinhaltsbereich === */
.container {
    flex-grow: 1;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem;
    padding-top: calc(52px + 2rem);
    padding-bottom: calc(44px + 2rem);
    box-sizing: border-box;
}

/* Sidebar vorhanden (eingeloggt): Content nach rechts verschieben.
   Header/Footer bleiben volle Breite. Nur Content und Tab-Header verschieben. */
.side-nav ~ .main-wrapper {
    margin-left: var(--nav-width-collapsed);
}
/* Tab-Header: volle Breite wie Header/Footer */
/* Wenn Tab-Header vorhanden: Sidebar startet darunter */
body:has(.tab-header) .side-nav {
    top: calc(52px + 36px);
}

/* Wenn Tab-Header vorhanden ist */
.tab-header ~ main.container {
    padding-top: calc(52px + 36px + 2rem);
}

/* === Footer === */
/* Footer geht über die volle Breite, ÜBER der Sidebar */
.footer {
    background-color: var(--dark-bg);
    color: #90A4AE;
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    height: 44px;
    box-sizing: border-box;
}

.footer p {
    margin: 0;
    color: #90A4AE;
}

.footer-content {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
}

.footer-content .footer-left {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.footer-content .footer-center {
    flex: 1;
    text-align: center;
    padding: 0 1rem;
}

.footer-content .footer-version {
    font-size: 0.75rem;
    color: #90A4AE;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s;
}

.footer-content .footer-version:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.footer-content .meldung-footer-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.footer a {
    color: #B0BEC5;
    text-decoration: none;
    transition: color 0.2s;
}

.footer a:hover {
    color: var(--hover-green);
}

/* Meldung-Button im Footer */
.meldung-footer-btn {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    background-color: #c62828;
    color: white !important;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: background-color 0.2s, transform 0.1s;
    text-decoration: none !important;
}

.meldung-footer-btn:hover {
    background-color: #b71c1c;
    transform: scale(1.02);
    text-decoration: none !important;
}

/* === Fullwidth Card für Tabellen === */
.card-fullwidth {
    width: 100%;
    max-width: none !important;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .card-fullwidth {
        width: calc(100vw - 20px);
        margin-left: -10px;
        margin-right: -10px;
        padding: 1rem !important;
    }
}

/* === Fullheight Layout (kein Seiten-Scroll) === */
html:has(.page-fullheight),
body:has(.page-fullheight) {
    height: 100vh;
    overflow: hidden;
}

.main-wrapper:has(.page-fullheight) {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.main-wrapper:has(.page-fullheight) > .container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: none;
    padding: 1rem;
    padding-top: calc(52px + 1rem);
    padding-bottom: calc(44px + 1rem);
}

/* Wenn Tab-Header vorhanden: mehr Platz oben für page-fullheight */
.tab-header ~ main.container:has(.page-fullheight) {
    padding-top: calc(52px + 36px + 1rem);
}

/* Tab-Content muss in der Flex-Kette mitmachen bei page-fullheight */
.container:has(.page-fullheight) > .tab-content.active {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Footer bleibt immer sichtbar */

.page-fullheight {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    padding: 1rem 1.5rem !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.page-fullheight .table-container {
    flex: 1;
    min-height: 0;
}

.page-fullheight .view-controls,
.page-fullheight .statistik-leiste,
.page-fullheight .view-management,
.page-fullheight .filter-bar,
.page-fullheight .action-buttons,
.page-fullheight .section-header {
    flex-shrink: 0;
}

/* === Fullheight OHNE Fullwidth (Card bleibt in Container-Breite) === */
html:has(.page-fullheight-contained),
body:has(.page-fullheight-contained) {
    height: 100vh;
    overflow: hidden;
}

.main-wrapper:has(.page-fullheight-contained) {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.main-wrapper:has(.page-fullheight-contained) > .container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 1rem;
    padding-top: calc(52px + 1rem);
    padding-bottom: calc(44px + 1rem);
}

.tab-header ~ main.container:has(.page-fullheight-contained) {
    padding-top: calc(52px + 36px + 1rem);
}

.container:has(.page-fullheight-contained) > .tab-content.active {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Tabs ohne eigene fullheight-Karte (z.B. Dashboard) sollen scrollen können,
   auch wenn andere Tabs in der gleichen Seite page-fullheight-contained nutzen */
.container:has(.page-fullheight-contained) > .tab-content.active:not(:has(.page-fullheight-contained)):not(:has(.page-fullheight)),
.container:has(.page-fullheight) > .tab-content.active:not(:has(.page-fullheight-contained)):not(:has(.page-fullheight)) {
    overflow-y: auto;
}

.page-fullheight-contained {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.page-fullheight-contained .table-container {
    flex: 1;
    min-height: 0;
}

.page-fullheight-contained .section-header,
.page-fullheight-contained .view-controls,
.page-fullheight-contained .filter-bar,
.page-fullheight-contained .action-buttons,
.page-fullheight-contained > [id$="-dashboard"],
.page-fullheight-contained > div[style*="flex-wrap"] {
    flex-shrink: 0;
}

/* === Tab-basierte Seiten (Mitglieder, Veranstaltungen) === */
html:has(#mitglied-tabelle-ansicht.active),
html:has(#veranstaltung-tabelle-ansicht.active),
html:has(#auftrag-tabelle-ansicht.active) {
    height: 100vh;
    overflow: hidden;
}

body:has(#mitglied-tabelle-ansicht.active),
body:has(#veranstaltung-tabelle-ansicht.active),
body:has(#auftrag-tabelle-ansicht.active) {
    height: 100vh;
    overflow: hidden;
}

.main-wrapper:has(#mitglied-tabelle-ansicht.active),
.main-wrapper:has(#veranstaltung-tabelle-ansicht.active),
.main-wrapper:has(#auftrag-tabelle-ansicht.active) {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.main-wrapper:has(#mitglied-tabelle-ansicht.active) > .container,
.main-wrapper:has(#veranstaltung-tabelle-ansicht.active) > .container,
.main-wrapper:has(#auftrag-tabelle-ansicht.active) > .container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: none;
    padding: 1rem;
    padding-top: calc(52px + 36px + 1rem);
    padding-bottom: calc(44px + 1rem);
}

/* Footer bleibt immer sichtbar */

/* Page-Layout-Wrapper muss in der Flex-Chain mitmachen */
.mitglied-page-layout:has(#mitglied-tabelle-ansicht.active) {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

#mitglieder-card:has(#mitglied-tabelle-ansicht.active),
#veranstaltungen-card:has(#veranstaltung-tabelle-ansicht.active),
#auftraege-card:has(#auftrag-tabelle-ansicht.active) {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

#mitglied-tabelle-ansicht.active,
#veranstaltung-tabelle-ansicht.active,
#auftrag-tabelle-ansicht.active {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

#mitglied-tabelle-ansicht .table-container,
#veranstaltung-tabelle-ansicht .table-container,
#auftrag-tabelle-ansicht .table-container {
    flex: 1;
    min-height: 0;
}

#mitglied-tabelle-ansicht .view-management,
#veranstaltung-tabelle-ansicht .view-management,
#auftrag-tabelle-ansicht .view-management {
    flex-shrink: 0;
}

/* Ansichten ein-/ausblenden */
#mitglied-detail-ansicht,
#mitglied-tabelle-ansicht,
#mitglied-felder-ansicht,
#veranstaltung-detail-ansicht,
#veranstaltung-tabelle-ansicht,
#auftrag-detail-ansicht,
#auftrag-tabelle-ansicht,
#auftrag-angebotsvorlagen,
#auftrag-standardwerte {
    display: none;
}

#mitglied-detail-ansicht.active,
#mitglied-felder-ansicht.active,
#veranstaltung-detail-ansicht.active,
#auftrag-detail-ansicht.active {
    display: block;
}

#auftrag-tabelle-ansicht.active,
#auftrag-angebotsvorlagen.active,
#auftrag-standardwerte.active {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

#auftrag-angebotsvorlagen.active,
#auftrag-standardwerte.active {
    overflow: auto;
}

/* Tabellen-Ansichten: display: flex (nicht block!) — sonst bricht die Flex-Kette
   und .table-container kann die Höhe nicht begrenzen → Tabelle wächst endlos */

/* === KI-Assistent-Panel: NUR den Inhaltsbereich nach links verdichten ===
   Header (navheader), Tab-Leiste und Footer bleiben IMMER durchgehend über die
   volle Breite - sie dürfen niemals verschoben werden. Das Panel sitzt im
   mittleren Bereich (beginnt unter Header/Tab-Leiste, endet über dem Footer),
   daher wird ausschließlich der Content (.main-wrapper) sowie der zum Inhalt
   gehörende Ladebalken um die Panel-Breite verdichtet (body.mki-shift).
   Eine CSS-Variable hält die Breite an EINER Stelle (auch das Panel nutzt sie). */
:root { --mki-panel-w: 460px; }
.main-wrapper { transition: margin-right .25s ease; }
#global-loading-bar { transition: right .25s ease; }
/* Nur ab Desktop-Breite verdichten - auf schmalen Viewports bleibt das Panel
   ein Overlay (sonst bliebe für den Inhalt kein Platz). */
@media (min-width: 1024px) {
    body.mki-shift .main-wrapper { margin-right: var(--mki-panel-w); }
    body.mki-shift #global-loading-bar { right: var(--mki-panel-w); }
}
/* Beim Wiederherstellen nach einer Navigation darf nichts reinrucken. */
body.mki-no-anim .main-wrapper,
body.mki-no-anim #global-loading-bar { transition: none; }

/* === Mobile: Sidebar als Overlay, Hamburger sichtbar === */
@media (max-width: 768px) {
    .menu-icon { display: block; }

    .side-nav {
        left: calc(-1 * var(--nav-width-expanded));
        width: var(--nav-width-expanded);
    }
    .side-nav.expanded { left: 0; }
    .side-nav:hover { width: var(--nav-width-expanded); }

    .header,
    .tab-header,
    .footer,
    .container,
    .side-nav ~ .main-wrapper {
        left: 0 !important;
        margin-left: 0 !important;
    }

    .container {
        padding-top: calc(52px + 1.5rem);
    }

    .tab-header ~ main.container {
        padding-top: calc(52px + 36px + 1.5rem);
    }
}

/* === buttons.css === */
/* =============================================================
   WARTUNGSMODUS-BANNER (oben, rot, sichtbar wenn aktiv)
   ============================================================= */
.wartung-banner {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #c62828;
    color: white;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.wartung-banner strong {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* =============================================================
   BUTTONS — Alle Button-Varianten
   ============================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.05rem 0.85rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-light);
    background-color: var(--primary-green);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Sicherheitsnetz: Viele Stellen blenden Schaltflächen mit
   `el.style.display = 'inline-block'` wieder ein. Das überschreibt das
   inline-flex von .btn - und im Flex-Umfeld eines Modal-Fußes wird daraus
   sogar block. Damit verliert die Beschriftung ihre Zentrierung und rutscht
   in die Ecke. Nur dieser eine Fall wird zurückgebogen; ein
   `display: none` zum Verstecken bleibt unangetastet (deshalb kein
   pauschales !important auf .btn). */
.btn[style*="display: inline-block"],
.btn[style*="display:inline-block"] {
    display: inline-flex !important;
}

/* Das hidden-Attribut muss greifen: sonst gewinnt display:inline-flex und ein
   ausgeblendeter Knopf bleibt sichtbar. Gleiche Falle wie bei .notice-banner. */
.btn[hidden] {
    display: none;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-30);
}

.btn:hover {
    background-color: var(--hover-green);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.btn-primary {
    background-color: var(--primary-green);
    color: white;
}

.btn-primary:hover {
    background-color: var(--hover-green);
}

/* Zweitrangige Aktion (Zurück, Abbrechen, Schließen). Früher ein fest
   verdrahtetes Blaugrau (#607D8B) - das blieb bei jeder Vereinsfarbe gleich
   und stand als einziger kalter Farbfleck neben den grünen Hauptaktionen.
   Jetzt eine gedämpfte Variante der Vereinsfarbe: gehört sichtbar zur
   Familie, tritt aber deutlich hinter die gefüllte Hauptaktion zurück. */
.btn-secondary {
    background-color: var(--primary-10);
    color: var(--primary-green);
    border: 1px solid var(--primary-30);
}

.btn-secondary:hover {
    background-color: var(--primary-20);
    color: var(--primary-green);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-dark);
}

.btn-outline:hover {
    background-color: var(--primary-5);
    border-color: var(--primary-green);
    color: var(--primary-green);
}

.btn-danger {
    background-color: #c62828;
    color: white;
}

.btn-danger:hover {
    background-color: #b71c1c;
}

.btn-sm {
    padding: 0.05rem 0.7rem;
    font-size: 0.8rem;
}

/* Globaler Disabled-State für ALLE .btn-Varianten -
   sichtbar ausgegraut, neutralisiert Hover/Active/Focus.
   Wirkt auf .btn, .btn-primary, .btn-secondary, .btn-danger, .btn-outline. */
.btn:disabled,
.btn[disabled] {
    background-color: #cfd2d4 !important;
    color: #8a9095 !important;
    border-color: #cfd2d4 !important;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 1;
}

.btn:disabled:hover,
.btn[disabled]:hover {
    background-color: #cfd2d4 !important;
    color: #8a9095 !important;
    border-color: #cfd2d4 !important;
    transform: none;
    box-shadow: none;
}

.btn:disabled:active,
.btn[disabled]:active {
    transform: none;
    box-shadow: none;
}

.btn:disabled:focus-visible,
.btn[disabled]:focus-visible {
    box-shadow: none;
    outline: none;
}

.btn-responsive {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: auto;
    max-width: 220px;
}

@media (max-width: 768px) {
    .btn-responsive span {
        display: none;
    }
}

/* Icon-Buttons */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background-color: var(--primary-5);
    color: var(--primary-green);
    transform: scale(1.1);
}

.btn-icon:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-icon:disabled:hover {
    background: transparent;
}

.btn-icon svg {
    width: 18px;
    height: 18px;
}

.btn-icon-danger {
    color: #c62828;
}

/* Hover-Hinweis zu Icon-Schaltflächen (siehe js/global-hinweis.js).
   Liegt fest über der Seite, weil scrollende Bereiche wie der Tabellenkörper
   sonst alles abschneiden, was über ihren Rand hinausragt. */
.global-hinweis {
    position: fixed;
    z-index: 9999;
    max-width: 260px;
    padding: 0.3rem 0.55rem;
    border-radius: 5px;
    background: #263238;
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.35;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.global-hinweis.sichtbar {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .global-hinweis { transition: none; }
}

.btn-icon-danger:hover {
    background-color: #ffebee;
    color: #b71c1c;
}

.btn-icon-small {
    padding: 0.25rem;
    width: 24px;
    height: 24px;
}

/* Lade-Zustand für Buttons (universal) */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn-loading::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid #fff;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
    left: calc(50% - 0.5rem);
    top: calc(50% - 0.5rem);
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Aktionen-Zelle in Tabellen */
.aktionen-cell {
    white-space: nowrap;
    text-align: center;
}

.aktionen-cell .btn-icon {
    margin: 0 2px;
}

/* === forms.css === */
/* =============================================================
   FORMS — Formulare, Inputs, Einstellungen, Toggles, Upload
   ============================================================= */

/* === Basis-Formular === */
.form-group {
    margin-bottom: 1rem;
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-control {
    width: 100%;
    padding: 0 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 32px;
    height: 34px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px var(--primary-30);
    outline: none;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.form-actions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.form-hint {
    display: block;
    font-size: 0.8rem;
    color: #888;
    margin-top: 0.25rem;
}

.field-hint {
    font-size: 0.85rem;
    color: #78909C;
    margin: 0.25rem 0 0.75rem 0;
}

/* === Einstellungen-Seite === */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.form-chapter {
    background-color: var(--page-bg);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.form-chapter-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary-green);
    margin: 0 0 1.25rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-10);
}

/* === Autocomplete === */
.autocomplete-results {
    position: absolute;
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    z-index: 2100;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.autocomplete-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

.autocomplete-item:last-child { border-bottom: none; }

.autocomplete-item:hover,
.autocomplete-item.selected,
.autocomplete-item.focused {
    background: #f5f5f5;
}

.autocomplete-item .ort {
    color: #6c757d;
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

.autocomplete-item .mitglied-nr {
    color: var(--primary-green);
    font-weight: 600;
    font-size: 0.85rem;
    margin-right: 0.5rem;
    min-width: 40px;
    display: inline-block;
}

.autocomplete-name  { font-weight: 500; font-size: 0.9rem; }
.autocomplete-email { color: #666; font-size: 0.8rem; }

.autocomplete-source {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    margin-left: auto;
    flex-shrink: 0;
}

.autocomplete-source-bekannt  { background-color: #e3f2fd; color: #1565c0; }
.autocomplete-source-mitglied { background-color: var(--primary-10); color: var(--primary-green); }

.autocomplete-container { position: relative; }

.zahler-search-container {
    position: relative;
    width: 100%;
}

.zahler-search-container input {
    width: 100%;
    box-sizing: border-box;
}

.zahler-search-container .autocomplete-results {
    top: 100%;
    left: 0;
    margin-top: 2px;
}

/* === Multi-Select === */
.multi-select-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.multi-select-container label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--page-bg);
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 500;
}

/* === Toggle (Ein-/Ausschalter) === */
.toggle-label,
.form-group .toggle-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
}

.toggle-label input[type="checkbox"] {
    display: none;
}

.toggle-slider {
    position: relative;
    width: 50px;
    min-width: 50px;
    height: 26px;
    background-color: #ccc;
    border-radius: 13px;
    transition: background-color 0.3s;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background-color: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-label input[type="checkbox"]:checked + .toggle-slider {
    background-color: var(--primary-green);
}

.toggle-label input[type="checkbox"]:checked + .toggle-slider::before {
    transform: translateX(24px);
}

.toggle-text { font-weight: 500; }

/* === Checkbox-Label === */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] { width: 18px; height: 18px; }

/* === Passwort-Feld === */
.password-field {
    position: relative;
    display: flex;
    align-items: center;
}

.password-field input {
    flex: 1;
    padding-right: 45px;
}

.password-toggle {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--text-dark);
    opacity: 0.6;
}

.password-toggle:hover { opacity: 1; }
.eye-icon { font-size: 1.2rem; }

/* === Farbauswahl === */
.color-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.color-input-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.color-input-wrapper input[type="color"] {
    width: 50px;
    height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    padding: 2px;
}

.color-text {
    width: 90px;
    font-family: monospace;
    text-transform: uppercase;
}

.color-preview-box {
    margin-top: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    height: 100px;
    display: flex;
}

.color-preview-box .preview-header {
    flex: 2;
    background-color: var(--primary-green);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.color-preview-box .preview-nav {
    flex: 1;
    background-color: var(--dark-bg);
    color: #90A4AE;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.color-preview-box .preview-content {
    flex: 2;
    background-color: var(--page-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    font-size: 0.85rem;
}

@media (max-width: 600px) {
    .color-picker-grid { grid-template-columns: 1fr; }
}

/* === Logo-Upload === */
.logo-upload-area {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.logo-preview {
    width: 120px;
    height: 120px;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fafafa;
    overflow: hidden;
}

.logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.logo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #90A4AE;
}

.logo-placeholder svg  { width: 40px; height: 40px; }
.logo-placeholder span { font-size: 0.8rem; }

.logo-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.upload-hint {
    font-size: 0.75rem;
    color: #90A4AE;
    margin: 0;
}

@media (max-width: 600px) {
    .logo-upload-area {
        flex-direction: column;
        align-items: center;
    }
}

/* Visuell versteckt aber erreichbar */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* === Upload-Area (Bilanz / Drag & Drop) === */
.upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 3rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #90A4AE;
}

.upload-area:hover,
.upload-area.dragover {
    border-color: var(--primary-green);
    background: rgba(46, 125, 50, 0.05);
}

/* Datei-Upload-Bereich */
.file-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
    background: #fafafa;
}

.file-upload-area:hover,
.file-upload-area.dragover {
    border-color: var(--primary-green);
    background: var(--primary-10);
}

.file-upload-area.has-file {
    border-color: var(--primary-green);
    border-style: solid;
    background: var(--primary-10);
}

.file-upload-icon   { font-size: 2.5rem; margin-bottom: 0.5rem; }
.file-upload-text   { color: #6c757d; margin-bottom: 0.5rem; }
.file-upload-hint   { font-size: 0.85rem; color: #999; }
.file-upload-input  { display: none; }

.file-upload-filename {
    margin-top: 0.5rem;
    font-weight: 500;
    color: var(--primary-green);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.file-upload-remove {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

/* =============================================================
   CUSTOM DROPDOWN (GlobalInputs.buildCustomDropdown)
   Globale Definition — wird überall verwendet.
   ============================================================= */
.custom-select-wrapper {
    position: relative;
    width: auto;
    height: auto !important;
}
.custom-select-trigger {
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dark);
    padding: 0.4rem 2rem 0.4rem 0.75rem;
    min-height: 1.2rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    position: relative;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.custom-select-trigger::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390a4ae' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-size: contain;
    opacity: 0.4;
    pointer-events: none;
}
.custom-select-trigger:hover {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 2px var(--primary-5);
}
.custom-select-trigger:hover::after {
    opacity: 0.7;
}

/* In Container-Kontexten (editable-field, form-group in Modals):
   Trigger unsichtbar — der Container liefert den Rahmen.
   Chevron kommt vom Container (editable-field::after / form-group::after). */
.editable-field .custom-select-wrapper { width: 100%; }

.editable-field .custom-select-trigger,
.gm-body .form-group .custom-select-trigger,
.wizard-content .form-group .custom-select-trigger {
    padding: 0 1.25rem 0 0;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 1rem;
}
.editable-field .custom-select-trigger::after,
.gm-body .form-group .custom-select-trigger::after,
.wizard-content .form-group .custom-select-trigger::after {
    display: none;
}
.editable-field .custom-select-trigger:hover,
.gm-body .form-group .custom-select-trigger:hover,
.wizard-content .form-group .custom-select-trigger:hover {
    border-color: transparent;
    box-shadow: none;
}

/* Dropdown-Panel (an body gerendert) */
.custom-select-dropdown {
    display: none;
    position: fixed;
    background: var(--card-bg);
    border: 1px solid var(--primary-30);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    z-index: 10000;
    max-height: 240px;
    overflow-y: auto;
    padding: 0.25rem 0;
    animation: scaleIn 0.15s ease;
}
.custom-select-dropdown.open { display: block; }
.custom-select-option {
    padding: 0.5rem 0.875rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.1s;
    color: var(--text-dark);
}
.custom-select-option:hover,
.custom-select-option.focused {
    background: var(--primary-5);
}
.custom-select-option.active {
    background: var(--primary-10);
    color: var(--primary-green);
    font-weight: 600;
}
.custom-select-option.active.focused {
    background: var(--primary-15, rgba(46,125,50,0.15));
}

/* === Radio-Group === */
.radio-group {
    display: flex;
    gap: 0.75rem;
}
.radio-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.9rem;
}
.radio-label input[type="radio"] {
    margin: 0;
    accent-color: var(--primary-green);
}

/* === Rechtliches: Vorschau-Box === */
.rechtliches-vorschau {
    margin-top: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    background: #fff;
    max-height: 500px;
    overflow-y: auto;
}
.rechtliches-vorschau h4 {
    margin: 0 0 1rem 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary-green);
}
.rechtliches-inhalt h1, .rechtliches-inhalt h2, .rechtliches-inhalt h3,
.vorschau-inhalt h1, .vorschau-inhalt h2, .vorschau-inhalt h3 {
    margin: 1.2rem 0 0.5rem 0;
}
.rechtliches-inhalt p, .vorschau-inhalt p {
    margin: 0.5rem 0;
    line-height: 1.6;
}
.rechtliches-inhalt ul, .rechtliches-inhalt ol,
.vorschau-inhalt ul, .vorschau-inhalt ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}
.rechtliches-inhalt table, .vorschau-inhalt table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}
.rechtliches-inhalt th, .rechtliches-inhalt td,
.vorschau-inhalt th, .vorschau-inhalt td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    text-align: left;
}

/* === forms-widgets.css === */
/* =============================================================
   FORMS-WIDGETS — Spezial-Inputs, Mapping, Tabs, Currency, Datepicker
   ============================================================= */

/* =============================================================
   .toggle-group — globales Segmented-Control
   Verwendung:
   <div class="toggle-group" data-name="empfindlichkeit" data-value="standard">
       <button type="button" class="toggle-btn" data-value="locker">Locker</button>
       <button type="button" class="toggle-btn active" data-value="standard">Standard</button>
       <button type="button" class="toggle-btn" data-value="streng">Streng</button>
   </div>
   JS-Verkabelung: globaler Click-Handler in global-fields.js (siehe initToggleGroups).
   ============================================================= */
.toggle-group {
    display: inline-flex;
    gap: 2px;
    background: #f0f0f0;
    border-radius: 6px;
    padding: 2px;
}

.toggle-btn {
    flex: 1;
    padding: 6px 14px;
    text-align: center;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    color: #888;
    background: transparent;
    border: none;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}

.toggle-btn:hover { color: #555; }

.toggle-btn.active {
    background: white;
    color: var(--primary-green);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}



/* === Bilanz: Spalten-Mapping === */
.mapping-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.mapping-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mapping-item label { font-size: 0.85rem; }

@media (max-width: 900px) { .mapping-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .mapping-grid { grid-template-columns: 1fr; } }

/* === Kategorien-Tabs (Bilanz) === */
.kategorien-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.tab-btn {
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: #90A4AE;
    border-bottom: 2px solid transparent;
}

.tab-btn:hover { color: var(--text-dark); }
.tab-btn.active { color: var(--primary-green); border-bottom-color: var(--primary-green); }

.kategorien-liste { max-height: 300px; overflow-y: auto; }

.kategorie-item {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.kategorie-item.inactive { opacity: 0.5; }
.kategorie-item .form-control { flex: 1; }

/* Buchung-Details */
.buchung-info {
    background: var(--page-bg);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.buchung-info p { margin: 0.25rem 0; }

/* === Empfänger-Auswahl (Modals) === */
.recipient-list-container {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.recipient-list-container label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
}

.recipient-list-container label:hover {
    background-color: var(--page-bg);
}

.recipient-list-container label input {
    width: 1.1rem;
    height: 1.1rem;
}

/* === E-Mail-Einstellungen: Setup-Tabs === */
.settings-tabs {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 1rem;
}

.settings-tab {
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 0.95rem;
    color: #666;
    transition: all 0.15s;
}

.settings-tab:hover { color: #333; }
.settings-tab.active { color: var(--primary-green); border-bottom-color: var(--primary-green); }

.settings-tab-content         { display: none; }
.settings-tab-content.active  { display: block; }

/* === Flex-Hilfsklasse === */
.flex-grow { flex: 1; }

/* === Currency-Input (Preiseingabe mit Popup) === */
.currency-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}
/* Eingabefeld in currency-wrapper: Platz fuer das EUR-Label, keine Spinner-Pfeile */
.currency-wrapper input[type="number"],
.currency-wrapper input[type="text"] {
    flex: 1;
    padding-right: 2.75rem;
    -moz-appearance: textfield;
    appearance: textfield;
}
.currency-wrapper input[type="number"]::-webkit-inner-spin-button,
.currency-wrapper input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* EUR-Label rechts im Feld (nicht klickbar, stoert Eingabe nicht) */
.currency-symbol {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: #546E7A;
    font-size: 0.85rem;
    font-weight: 500;
    pointer-events: none;
    user-select: none;
}
/* Anzeige-Text (klickbar) */
.currency-display {
    display: block;
    flex: 1;
    width: 100%;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-dark);
    min-height: 24px;
    line-height: 24px;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.15s;
}
.currency-display:hover {
    background-color: #e3f2fd;
}
.currency-display-empty {
    color: #999;
    font-style: italic;
}

/* Generelle Unterdrueckung der Spinner-Pfeile in allen number-Inputs
   (User-Entscheidung: die hasslichen Browser-Default-Pfeile raus) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
/* Eigenständiges Betragsfeld (nicht in form-group/editable-field): eigener Rand */
/* Betragsfeld mit Nummernpad: Das eigentliche Eingabefeld ist hidden, den
   Rahmen trägt der Wrapper. Gilt überall gleich, damit ein Betragsfeld nicht
   je nach Umgebung mal einen Rahmen hat und mal keinen. `currency-standalone`
   ist der alte Name für denselben Fall und bleibt als Alias bestehen. */
.currency-numpad,
.currency-standalone {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    transition: border-color 0.2s;
}
.currency-numpad:hover,
.currency-standalone:hover {
    border-color: var(--primary-30);
}
.currency-numpad:focus-within {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px var(--primary-30);
}

/* === Nummernpad-Popup === */
.numpad-popup {
    display: none;
    position: fixed;
    width: 165px;
    z-index: 10000;
    background: var(--card-bg);
    border: 1px solid var(--primary-30);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    padding: 0.4rem;
    animation: scaleIn 0.15s ease;
}
.numpad-popup.open { display: block; }

/* Anzeige oben im Pad */
.numpad-display {
    text-align: right;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.35rem 0.5rem;
    margin-bottom: 0.3rem;
    background: var(--page-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-dark);
    min-height: 1.5rem;
    font-variant-numeric: tabular-nums;
}

/* 4x3 Grid */
.numpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}
.numpad-key {
    padding: 0.4rem 0;
    font-size: 0.95rem;
    font-family: inherit;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-dark);
    cursor: pointer;
    text-align: center;
    transition: background 0.1s, border-color 0.1s;
    user-select: none;
}
.numpad-key:hover {
    background: var(--primary-5);
    border-color: var(--primary-30);
}
.numpad-key:active {
    background: var(--primary-10);
    transform: scale(0.96);
}
.numpad-key-clear {
    color: #e53935;
    font-weight: 600;
}

/* Untere Reihe: Backspace + OK */
.numpad-bottom {
    display: flex;
    gap: 4px;
}
.numpad-key-back {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.numpad-key-ok {
    flex: 2;
    background: var(--primary-green);
    color: white;
    border-color: var(--primary-green);
    font-weight: 600;
    font-size: 1rem;
}
.numpad-key-ok:hover {
    opacity: 0.9;
    background: var(--primary-green);
    border-color: var(--primary-green);
}

/* === Datepicker === */
/* Nativen Browser-Datepicker-Button verstecken (unser Custom-Button ersetzt ihn) */
.datepicker-wrapper input[type="date"]::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
.datepicker-wrapper input[type="date"]::-webkit-inner-spin-button { display: none; }

.datepicker-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.datepicker-wrapper input[type="date"] {
    padding-right: 2.5rem;
}
.datepicker-btn {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #78909c;
    padding: 0.25rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: all 0.15s;
}
.datepicker-btn:hover {
    color: var(--primary-green);
    background: var(--primary-5);
}

/* Feedback bei ungültiger manueller Eingabe (z.B. "32.13.2024") */
.datepicker-wrapper input.dp-input-invalid,
input.dp-input-invalid {
    border-color: var(--danger-color, #dc3545) !important;
    background: rgba(220, 53, 69, 0.06);
}

/* === IBAN-Validierung === */
/* Border-Color UND box-shadow als Unter-Strich. Letzteres ist wichtig fuer
   editable-field-Inputs, die border:none gesetzt haben (vgl. mitglieder.css);
   dort waere der border-color allein unsichtbar. */
input.iban-input-ok {
    border-color: var(--success-color, #28a745) !important;
    box-shadow: inset 0 -2px 0 var(--success-color, #28a745) !important;
}
input.iban-input-fehler {
    border-color: var(--danger-color, #dc3545) !important;
    background: rgba(220, 53, 69, 0.04);
    box-shadow: inset 0 -2px 0 var(--danger-color, #dc3545) !important;
}
.iban-feedback {
    font-size: 0.78rem;
    margin-top: 0.2rem;
    min-height: 1em;
    line-height: 1.2;
}
.iban-feedback-ok {
    color: var(--success-color, #28a745);
}
.iban-feedback-fehler {
    color: var(--danger-color, #dc3545);
}

/* Datepicker Popup */
.datepicker-popup {
    display: none;
    position: fixed;
    z-index: 10000;
    background: var(--card-bg);
    border: 1px solid var(--primary-30);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
    padding: 0.75rem;
    width: 260px;
    animation: scaleIn 0.15s ease;
    user-select: none;
}
.datepicker-popup.open { display: block; }

.dp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.dp-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-dark);
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
button.dp-title:hover {
    background: var(--primary-5);
    border-color: var(--primary-green);
    color: var(--primary-green);
}
.dp-title.dp-title-static {
    cursor: default;
    background: none;
    border-color: transparent;
}
.dp-nav {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    padding: 0.25rem 0.375rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    transition: all 0.15s;
}
.dp-nav:hover {
    background: var(--primary-5);
    border-color: var(--primary-green);
    color: var(--primary-green);
}

.dp-days-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 0.25rem;
}
.dp-day-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: #90a4ae;
    text-transform: uppercase;
    padding: 0.25rem 0;
}

.dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.dp-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.1s;
    margin: 0 auto;
}
.dp-day:hover:not(.dp-empty) {
    background: var(--primary-5);
    color: var(--primary-green);
}
.dp-day.dp-empty { cursor: default; }
.dp-day.dp-today {
    font-weight: 700;
    border: 1px solid var(--primary-green);
    color: var(--primary-green);
}
.dp-day.dp-selected {
    background: var(--primary-green);
    color: white;
    font-weight: 600;
}
.dp-day.dp-selected.dp-today { border-color: transparent; }

.dp-footer {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
}
.dp-today-btn {
    background: none;
    border: none;
    color: var(--primary-green);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    transition: background 0.15s;
}
.dp-today-btn:hover { background: var(--primary-5); }

/* Monats- und Jahres-Grid (alternative Datepicker-Modi) */
.dp-month-grid, .dp-year-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 0.5rem 0;
}
.dp-year-grid {
    grid-template-columns: repeat(3, 1fr);
}
.dp-month-cell, .dp-year-cell {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.6rem 0.4rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.12s;
    font-family: inherit;
}
.dp-month-cell:hover, .dp-year-cell:hover {
    background: var(--primary-5);
    border-color: var(--primary-green);
    color: var(--primary-green);
}
.dp-month-cell.dp-selected, .dp-year-cell.dp-selected {
    background: var(--primary-green);
    border-color: var(--primary-green);
    color: white;
    font-weight: 600;
}

/* === tables.css === */
/* =============================================================
   TABLES — Alle Tabellen, Filter-Popup, Drag & Drop, Resize
   ============================================================= */

/* === Gemeinsamer Tabellen-Container ===
   Rahmen wird als echter border am border-edge des Containers gezeichnet.
   Dadurch bleibt der rechte/linke Rand auch dann an der sichtbaren Grenze,
   wenn der Container horizontal scrollt (Mobile-Ansicht) — der Inhalt
   scrollt innerhalb, der Border zählt nicht zur Scrollfläche.
   (Das vorherige ::before mit position:absolute/inset:0 lag auf der
   padding-edge = scrollWidth und scrollte daher mit dem Inhalt mit.) */
.table-container {
    overflow: hidden;
    width: 100%;
    position: relative;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--primary-30);
    background-clip: padding-box;
}

/* Schmale Karte: Tabelle scrollen lassen statt Spalten zu quetschen.
   Ohne das teilt der Browser die Breite gleichmäßig auf, der Zellinhalt läuft
   über die Spaltengrenze und legt sich über die Nachbarspalte - in der
   Angebotsliste standen Nummer und Betrag übereinander. */
.table-container.table-scrollt { overflow-x: auto; }
.table-container.table-scrollt > table { min-width: max-content; }

/* Tabelle füllt den verfügbaren Platz, Body scrollt intern */
.table-fill-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 160px); /* Header 52px + Footer 44px + Padding */
}
.table-fill-page .section-header,
.table-fill-page .view-controls { flex-shrink: 0; }
.table-fill-page .pt-toolbar { flex-shrink: 0; }
.table-fill-page .table-container {
    flex: 1;
    min-height: 0;
    overflow: auto;
}
.table-fill-page .pt-pagination { flex-shrink: 0; }
/* Ecken und Ränder anpassen wenn Toolbar/Pagination vorhanden.
   Einzelne Border-Kanten werden selektiv entfernt, damit Toolbar/Pagination
   nahtlos anschließen. */
.pt-toolbar + .table-container { border-radius: 0; margin-top: 0 !important; border-top: none; }
.table-container:has(+ .pt-pagination) { border-radius: 0; border-bottom: none; }
.pt-toolbar + .table-container:has(+ .pt-pagination) { border-top: none; border-bottom: none; border-radius: 0; }
/* Nur table-container allein: alle Ecken rund */
.table-container:not(.pt-toolbar + *):not(:has(+ .pt-pagination)) { border-radius: 6px; }

/* recipient-table: Jetzt PowerTable, altes Styling entfernt */

/* === Spaltenbreite anpassen (Resize-Handle) === */
.resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    z-index: 11;
}

/* === Spalten verschieben (Drag & Drop) === */
.draggable-header,
.header-text {
    cursor: grab;
    display: block;
    padding: 0.2rem 0;
    padding-right: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.draggable-header:active,
.header-text:active {
    cursor: grabbing;
}

.drag-placeholder {
    border-left: 3px solid var(--primary-green);
}

/* === Sortierung === */
.sort-indicator {
    margin-left: 5px;
    opacity: 0.5;
    display: inline-block;
    width: 1em;
}

/* === Filter-Button === */
.filter-button {
    cursor: pointer;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
    width: 16px;
    height: 16px;
}

.filter-button svg { width: 100%; height: 100%; }
.filter-button:hover { opacity: 1; }

.filter-button.active {
    opacity: 1;
    color: #1976D2;
}

.filter-button.active svg {
    stroke: #1976D2;
}

/* === Filter-Popup === */
.filter-popup {
    position: fixed;
    background-color: white;
    border: 1px solid #999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    width: 250px;
    max-height: 350px;
}

.filter-popup-header,
.filter-popup-footer { padding: 0.5rem; }

.filter-popup-header input { width: 100%; box-sizing: border-box; }

.filter-popup-list {
    overflow-y: auto;
    padding: 0.5rem;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.filter-popup-list label { display: block; margin-bottom: 0.3rem; }
.filter-popup-footer { text-align: right; }

/* Höherer Z-Index in Modalen */
#invite-filter-popup,
#wizard-filter-popup,
#custom-filter-popup {
    position: fixed;
    z-index: 10001;
}

/* === Tfoot — Ergebniszeile === */
/* PowerTable-Tabellen: Styling über .pt-summary-td in power-table.css */

.summary-cell {
    cursor: pointer;
}

.summary-cell:hover {
    background-color: #e0e6eb;
}

/* === Einladungs-Tabelle === */
#invite-mitglied-tabelle {
    width: 100%;
    border-collapse: collapse;
}

#invite-mitglied-tabelle th,
#invite-mitglied-tabelle td {
    border: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    text-align: left;
}

#invite-mitglied-tabelle th {
    background-color: var(--page-bg);
    font-weight: 600;
}

/* === Editierbare Tabelle (Bilanz) === */
.editable-table {
    width: 100%;
    border-collapse: collapse;
}

.editable-table th,
.editable-table td {
    border: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    text-align: left;
}

.editable-table th {
    background-color: var(--page-bg);
    font-weight: 600;
}

.editable-table td[contenteditable="true"] {
    cursor: cell;
    background-color: #f7fcff;
    transition: background-color 0.2s;
}

.editable-table td[contenteditable="true"]:focus {
    background-color: #e3f2fd;
    outline: 2px solid var(--primary-green);
}

.editable-table td.saved { background-color: var(--primary-20); }
.editable-table td.error { background-color: #ffcdd2; }

/* === Ansichtsprofile === */
.view-management {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    background-color: #fdfdfd;
}

.view-profiles {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.view-profiles select { max-width: 200px; }
.view-profiles input  { max-width: 200px; }

.column-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.column-toggles label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    font-size: 0.9rem;
}

/* === Deaktivierte Zeile === */
.disabled-row {
    opacity: 0.5;
    background-color: #f5f5f5 !important;
}

.disabled-row select { pointer-events: none; }

/* === Benutzerdefinierte Felder (Veranstaltungen) === */
.custom-fields-modal-content {
    max-width: 960px;
    text-align: left;
}

.custom-fields-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
}

.custom-fields-table th,
.custom-fields-table td {
    border: 1px solid var(--border-color);
    padding: 0.75rem;
    text-align: left;
    vertical-align: top;
}

.custom-fields-table th { background-color: var(--page-bg); }
.custom-fields-table .form-control { width: 95%; }

.options-container {
    padding-top: 1rem;
    padding-left: 0.5rem;
}

.option-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: nowrap;
}
.option-item .option-text {
    flex: 1;
    min-width: 0;
}
.option-preis-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 260px;
}
.option-preis-wrapper .option-preis {
    flex: 1;
    min-width: 50px;
    text-align: right;
}
.option-preis-eur {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary-green);
    flex-shrink: 0;
    white-space: nowrap;
}
/* Option-Item Inputs: gleiche Höhe */
.option-item .form-control {
    height: 34px;
    padding: 0.35rem 0.5rem;
    font-size: 0.9rem;
    box-sizing: border-box;
}
.option-item .delete-option-btn {
    height: 34px;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.delete-option-btn,
.delete-row-btn-custom {
    background: none;
    border: none;
    color: #c62828;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: bold;
}

.toggle-arrow {
    cursor: pointer;
    font-size: 1rem;
    width: 20px;
    display: inline-block;
    text-align: center;
    transition: transform 0.2s ease-in-out;
}

.toggle-arrow.expanded { transform: rotate(90deg); }

.options-row         { display: none; }
.options-row.visible { display: table-row; }

.options-cell {
    background-color: #f7f9fc;
    border-top: 2px solid var(--primary-green) !important;
    padding: 1.5rem !important;
}

/* (Settings-Dropdown entfernt — Profile sind jetzt direkt in der Toolbar) */

/* === power-table.css === */
/* =============================================================
   POWER-TABLE v3.1 — Green Theme
   =============================================================
   Alle .pt-* Klassen für die PowerTable-Komponente
   ============================================================= */

/* Basis — Flex-Layout: thead/tfoot fix, nur tbody scrollt.
   CSS Grid auf tr sorgt für Spaltenausrichtung über alle Sektionen. */
.power-table {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
}
.power-table thead,
.power-table tfoot {
    display: block;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
}
/* Scrollbar in thead/tfoot unsichtbar machen */
.power-table thead::-webkit-scrollbar,
.power-table tfoot::-webkit-scrollbar {
    background: transparent;
}
.power-table thead::-webkit-scrollbar-thumb,
.power-table tfoot::-webkit-scrollbar-thumb {
    background: transparent;
}
.power-table tbody {
    display: block;
    flex: 1;
    overflow-y: auto;
    scrollbar-gutter: stable;
    min-height: 0;
}
.power-table tr:not(.pt-detail-row) {
    display: grid;
    grid-template-columns: var(--pt-cols, repeat(auto-fill, minmax(0, 1fr)));
}
.power-table th, .power-table td { text-align: left; border: none !important; min-width: 0; }

/* Detail-Zeilen: volle Breite, kein Grid */
.pt-detail-row         { display: block; }
.pt-detail-row > td    { display: block; padding: 0; background: #f8fafc; }
.pt-detail-content     { padding: 1.25rem 1.5rem; }
.pt-detail-row.hidden  { display: none; }

/* Lade-/Leer-Zellen: volle Breite über alle Grid-Spalten */
.pt-loading, .pt-empty { grid-column: 1 / -1; }

/* SVG Icons */
.pt-icon       { width: 12px; height: 12px; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.pt-icon-muted { opacity: 0.35; }
.pt-grip-icon  { width: 8px; height: 14px; }

/* Header */
.pt-th {
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1e293b;
    background: linear-gradient(to bottom, var(--primary-5), var(--primary-10));
    box-shadow: inset -1px 0 0 0 var(--primary-30), inset 0 -2px 0 0 var(--primary-50);
    user-select: none;
    white-space: nowrap;
    position: relative;
    overflow: visible;
}
.pt-th:last-child { box-shadow: inset 0 -2px 0 0 var(--primary-50); }

/* Klickbare Links in Zellen */
.pt-link {
    color: var(--primary-green);
    text-decoration: none;
    cursor: pointer;
}
.pt-link:hover { text-decoration: underline; }

.pt-th-content { display: flex; align-items: center; gap: 0.375rem; }
.pt-th-label   { flex: 1; }
.pt-sortable .pt-th-label        { cursor: pointer; }
.pt-sortable .pt-th-label:hover  { color: var(--primary-green); }
/* Checkbox-/Detail-Spalten: exakt 36px breit, box-sizing: border-box damit
 * Padding nicht über die Grid-Trennlinie hinausragt. overflow: hidden kappt
 * eventuelle Content-Überläufe, damit der rechte Rahmen (box-shadow) sauber
 * an der Grid-Kante sitzt. */
.pt-th-select,
.pt-th-detail,
.pt-td-select,
.pt-td-detail {
    box-sizing: border-box;
    width: 36px;
    min-width: 0;
    max-width: 36px;
    text-align: center;
    padding: 0.625rem 0.25rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pt-th-select,
.pt-th-detail {
    background: linear-gradient(to bottom, var(--primary-5), var(--primary-10));
}
.pt-td-select,
.pt-td-detail {
    background: #fff;
}
.power-table tbody tr:nth-child(even):not(.pt-detail-row):not(:hover) .pt-td-select,
.power-table tbody tr:nth-child(even):not(.pt-detail-row):not(:hover) .pt-td-detail {
    background: #fafbfc;
}
.power-table tbody tr:hover .pt-td-select,
.power-table tbody tr:hover .pt-td-detail {
    background: var(--primary-5);
}
.pt-row-selected .pt-td-select,
.pt-row-selected .pt-td-detail {
    background: var(--primary-10);
}

/* Drag Handle */
.pt-drag-handle {
    cursor: grab;
    color: #90a4ae;
    padding: 0.125rem;
    border-radius: 0.125rem;
    display: flex;
    align-items: center;
    transition: color 0.15s;
    flex-shrink: 0;
}
.pt-drag-handle:hover  { color: #546e7a; }
.pt-drag-handle:active { cursor: grabbing; }

/* Sort */
.pt-sort-icon        { color: #90a4ae; display: flex; align-items: center; cursor: pointer; transition: color 0.15s; flex-shrink: 0; }
.pt-sort-icon:hover  { color: #546e7a; }
.pt-sort-icon.active { color: var(--primary-green); }

/* Body */
.pt-td {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: #334155;
    box-shadow: inset -1px 0 0 0 #e8ecef, inset 0 -1px 0 0 #e8ecef;
}
.pt-td:last-child { box-shadow: inset 0 -1px 0 0 #e8ecef; }

.power-table tbody tr                                            { transition: background 0.1s; cursor: default; }
.power-table tbody tr:hover                                      { background: var(--primary-5); }
.power-table tbody tr:nth-child(even):not(.pt-detail-row):not(:hover) { background: #fafbfc; }
.pt-row-selected                                                 { background: var(--primary-10) !important; }
.pt-td-select, .pt-td-detail                                    { padding: 0.5rem 0.25rem; }

/* Detail-Toggle-Button */
.pt-detail-toggle,
.toggle-detail-btn {
    background: none;
    border: 1px solid var(--primary-30);
    border-radius: 0.25rem;
    cursor: pointer;
    color: #546e7a;
    padding: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: all 0.15s;
}

.pt-detail-toggle:hover,
.toggle-detail-btn:hover {
    color: var(--primary-green);
    border-color: var(--primary-green);
    background: var(--primary-10);
}

.pt-detail-toggle.open,
.toggle-detail-btn.open {
    color: var(--primary-green);
    background: var(--primary-10);
    border-color: var(--primary-50);
}

/* Leer & Laden */
.pt-empty   { text-align: center; padding: 2.5rem !important; color: #90a4ae; font-style: italic; }
.pt-loading { text-align: center; padding: 2.5rem !important; color: #546e7a; }

.pt-loading-spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--primary-30);
    border-top-color: var(--primary-green);
    border-radius: 50%;
    animation: pt-spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 0.5rem;
}

@keyframes pt-spin { to { transform: rotate(360deg); } }

/* Resize Handle */
.pt-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s;
}
.pt-resize-handle:hover { background: var(--primary-green); }

/* Drag & Drop Einrast-Markierungen */
.pt-dragging        { opacity: 0.4; }
.pt-drag-over-left  { box-shadow: inset  3px 0 0 0 var(--primary-green) !important; }
.pt-drag-over-right { box-shadow: inset -3px 0 0 0 var(--primary-green) !important; }

/* Filter */
.pt-filter-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0.125rem;
    flex-shrink: 0;
}

.pt-filter-btn {
    padding: 0.125rem;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #90a4ae;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}
.pt-filter-btn:hover  { color: #546e7a; }
.pt-filter-btn.active { color: var(--primary-green); }

.pt-filter-dropdown {
    display: none;
    background: white;
    border: 1px solid var(--primary-30);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 10000;
    min-width: 200px;
    max-height: 300px;
    flex-direction: column;
    overflow: hidden;
}
.pt-filter-dropdown.show { display: flex; }

.pt-filter-search { padding: 0.5rem; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }

.pt-filter-search-input {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--primary-30);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    outline: none;
}
.pt-filter-search-input:focus { border-color: var(--primary-green); box-shadow: 0 0 0 2px rgba(46,125,50,0.15); }

.pt-filter-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    font-size: 0.8125rem;
}
.pt-filter-option:hover { background: var(--primary-5); }

/* Scrollbare Optionsliste im Filter-Dropdown */
.pt-filter-options-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.pt-filter-actions { padding: 0.5rem; border-top: 1px solid #e5e7eb; text-align: right; flex-shrink: 0; }

.pt-filter-apply {
    padding: 0.375rem 1rem;
    background: var(--primary-green);
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.8125rem;
    transition: background 0.15s;
}
.pt-filter-apply:hover { background: var(--hover-green); }

/* Spaltensuche */
.pt-search-row td { padding: 0.25rem 0.5rem; background: var(--primary-5); }

.pt-col-search {
    width: 100%;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--primary-30);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    outline: none;
}
.pt-col-search:focus { border-color: var(--primary-green); }

/* Inline-Edit */
.pt-inline-edit {
    width: 100%;
    padding: 0.25rem 0.5rem;
    border: 2px solid var(--primary-green);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    outline: none;
    background: var(--primary-5);
}

/* Toolbar */
.pt-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.75rem;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    border: 1px solid var(--primary-30);
    background: var(--primary-5);
    border-radius: 6px 6px 0 0;
}

.pt-toolbar-left,
.pt-toolbar-right { display: flex; align-items: center; gap: 0.5rem; }

.pt-search-input {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--primary-30);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    min-width: 200px;
    outline: none;
    background: white;
}
.pt-search-input:focus { border-color: var(--primary-green); box-shadow: 0 0 0 2px rgba(46,125,50,0.15); }

/* Bulk Actions */
.pt-bulk-bar   { display: flex; align-items: center; gap: 0.5rem; }
.pt-bulk-count { font-size: 0.8125rem; font-weight: 600; color: var(--primary-green); }

.pt-bulk-btn {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--primary-30);
    border-radius: 0.375rem;
    background: white;
    cursor: pointer;
    font-size: 0.8125rem;
    transition: background 0.15s;
}
.pt-bulk-btn:hover { background: var(--primary-5); }

/* Pagination */
.pt-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    flex-shrink: 0;
    border: 1px solid var(--primary-30);
    border-top: none;
    background: var(--primary-5);
    font-size: 0.8125rem;
    color: #546e7a;
    border-radius: 0 0 6px 6px;
}

.pt-page-controls { display: flex; align-items: center; gap: 0.25rem; }

.pt-page-btn {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--primary-30);
    border-radius: 0.25rem;
    background: white;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
    transition: background 0.15s;
}
.pt-page-btn:hover:not(:disabled) { background: var(--primary-10); }
.pt-page-btn:disabled              { opacity: 0.3; cursor: default; }

.pt-page-current { padding: 0 0.5rem; font-weight: 500; }

.pt-page-size {
    padding: 0.25rem 1.25rem 0.25rem 0.375rem;
    border: 1px solid var(--primary-30);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    margin-right: 0.5rem;
    cursor: pointer;
    /* Nativen Browser-Pfeil durch das CI-Chevron ersetzen (Konsistenz). */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390a4ae' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.375rem center;
    background-size: 12px;
}

.pt-page-info { font-weight: 500; }

/* Aggregate Bar */
.pt-aggregate-bar {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--primary-30);
    background: var(--primary-5);
    font-size: 0.8125rem;
    color: #334155;
}

/* Summary Row (Ergebniszeile) */
.pt-summary-row  { background: linear-gradient(to bottom, var(--primary-10), var(--primary-5)); }
.pt-summary-td   {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: #1e293b;
    white-space: nowrap;
    background: linear-gradient(to bottom, var(--primary-10), var(--primary-5));
    box-shadow: inset -1px 0 0 0 var(--primary-35), inset 0 2px 0 0 var(--primary-50), inset 0 -1px 0 0 var(--primary-30);
}
.pt-summary-td:last-child { box-shadow: inset 0 2px 0 0 var(--primary-50), inset 0 -1px 0 0 var(--primary-30); }
.pt-summary-label {
    font-size: 0.6875rem;
    color: #546e7a;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.pt-summary-td strong {
    color: var(--primary-green);
    font-weight: 700;
}

/* Kontextmenü & Menü-Elemente */
.pt-context-menu {
    position: fixed; z-index: 9999; background: white;
    border: 1px solid var(--primary-30); border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
    min-width: 200px; max-height: 80vh; overflow-y: auto; padding: 0.375rem 0;
}
.pt-menu-title    { padding: 0.5rem 0.75rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; color: #90a4ae; letter-spacing: 0.05em; }
.pt-menu-item     { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; font-size: 0.8125rem; cursor: pointer; transition: background 0.1s; }
.pt-menu-item:hover   { background: var(--primary-5); }
.pt-menu-checkbox     { cursor: pointer; }
.pt-menu-active       { font-weight: 600; color: var(--primary-green); }
.pt-menu-danger       { color: #dc2626; }
.pt-menu-danger:hover { background: #fef2f2; color: #b91c1c; }
.pt-menu-divider      { height: 1px; background: #e2e8f0; margin: 0.375rem 0; }
.pt-menu-columns-scroll { max-height: calc(5 * 1.85rem); overflow-y: auto; scrollbar-width: thin; }
.pt-menu-columns-scroll::-webkit-scrollbar       { width: 5px; }
.pt-menu-columns-scroll::-webkit-scrollbar-thumb  { background: var(--primary-30); border-radius: 3px; }
.pt-menu-columns-scroll::-webkit-scrollbar-track  { background: transparent; }

/* Toolbar-Buttons (Export) */
.pt-export-btn {
    background: white;
    border: 1px solid var(--primary-30);
    cursor: pointer;
    color: #546e7a;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    white-space: nowrap;
    transition: all 0.15s;
}
.pt-export-btn:hover { color: var(--primary-green); background: var(--primary-5); border-color: var(--primary-50); }

/* Toolbar — Profilverwaltung inline */
.pt-toolbar-profiles {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.pt-toolbar-profile-select {
    min-width: 100px;
}
.pt-toolbar-profile-select .custom-select-wrapper { height: auto !important; }
.pt-toolbar-profile-select .custom-select-trigger {
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--primary-30);
    border-radius: 0.25rem;
    background: white;
    min-height: unset;
    cursor: pointer;
}
.pt-toolbar-profile-select .custom-select-trigger:hover { border-color: var(--primary-50); }
.pt-toolbar-profile-select .custom-select-dropdown {
    left: 0;
    right: auto;
    min-width: 140px;
    font-size: 0.8125rem;
}
.pt-toolbar-profile-select .custom-select-option { padding: 0.375rem 0.625rem; font-size: 0.8125rem; }
.pt-toolbar-btn {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--primary-30);
    border-radius: 0.25rem;
    background: white;
    cursor: pointer;
    color: #546e7a;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    white-space: nowrap;
    transition: all 0.15s;
}
.pt-toolbar-btn:hover { background: var(--primary-5); color: var(--primary-green); border-color: var(--primary-50); }
.pt-toolbar-delete:hover { background: #fef2f2; color: #dc2626; border-color: #fca5a5; }
.pt-toolbar-reset:hover  { color: var(--primary-green); }

/* Toolbar — Trennlinie & Toggle */
.pt-toolbar-sep {
    width: 1px;
    height: 1.25rem;
    background: var(--primary-30);
    flex-shrink: 0;
}
.pt-toolbar-toggle {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    font-size: 0.8125rem;
    color: #546e7a;
    white-space: nowrap;
    user-select: none;
}
.pt-toolbar-toggle input { accent-color: var(--primary-green); }

/* Summary: Klickbare Zellen */
.pt-summary-clickable {
    cursor: pointer;
    transition: background 0.1s;
}
.pt-summary-clickable:hover {
    background: var(--primary-20);
}
.pt-summary-placeholder {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #90a4ae;
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    border: 1px dashed #b0bec5;
    border-radius: 0.25rem;
    transition: all 0.15s;
}
.pt-summary-clickable:hover .pt-summary-placeholder {
    color: var(--primary-green);
    border-color: var(--primary-green);
    background: rgba(46, 125, 50, 0.06);
}

/* Summary: Typ-Auswahl-Menü */
.pt-summary-menu {
    z-index: 10000;
    background: white;
    border: 1px solid var(--primary-30);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 140px;
    padding: 0.25rem 0;
}

.pt-summary-menu-item {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.1s;
}
.pt-summary-menu-item:hover {
    background: var(--primary-5);
}
.pt-summary-menu-item.pt-menu-active {
    font-weight: 600;
    color: var(--primary-green);
}

/* Responsive */
@media (max-width: 768px) {
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .power-table {
        min-width: 700px;
    }
}
@media (max-width: 600px) {
    .pt-th, .pt-td { padding: 0.375rem 0.5rem; font-size: 0.75rem; }
    .pt-pagination  { flex-direction: column; gap: 0.5rem; }
}
/* Zellinhalte vollständig zeigen statt sie am Spaltenrand abzuschneiden.
   Ein halber Empfängername und ein "Re-01-2026, Webhosting, Datensicher…"
   sind für den Zweck einer Tabelle wertlos - man müsste jede Zeile einzeln
   anfassen, um zu erfahren, was drinsteht.

   `anywhere` trennt notfalls mitten im Wort: IBANs, Belegnummern und
   Verwendungszwecke ohne Leerzeichen liefen sonst über die Spalte hinaus.

   Gilt bewusst für JEDE Tabelle - vorher galt es nur für die Zuordnung des
   Bank-Imports, und dieselbe Spalte sah je nach Ansicht anders aus. */
.power-table td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow: visible;
    text-overflow: clip;
}

/* Einzeilig bleibt, was auf einen Blick erfassbar sein muss und ohnehin kurz
   ist: Datum, Beträge, Salden, Zähler, Nummern. Über den Spaltenschlüssel
   erkannt, den die Tabelle für jede Zelle mitgibt - so wirkt die Ausnahme in
   allen Ansichten, ohne dass jede einzeln gepflegt werden muss. */
.power-table td[data-col-key*="datum"],
.power-table td[data-col-key*="betrag"],
.power-table td[data-col-key*="saldo"],
.power-table td[data-col-key*="soll"],
.power-table td[data-col-key*="haben"],
.power-table td[data-col-key*="summe"],
.power-table td[data-col-key*="anzahl"],
.power-table td[data-col-key*="nummer"],
.power-table td[data-col-key*="confidence"] {
    white-space: nowrap;
}

@media (min-width: 900px) {
    .power-table th { text-overflow: ellipsis; white-space: nowrap; }
}

/* === render-bausteine.css === */
/* Bausteine für Tabellenzellen (render-bausteine.js).
 *
 * Statuszellen wurden in Aufträgen, Angeboten und der Auftragsdetailansicht
 * dreimal fast gleich mit fest eingetragenen Farben gebaut. Die Farben stehen
 * jetzt einmal hier als Variablen. */

:root {
    --rb-status-entwurf: #90A4AE;
    --rb-status-angebot: #FFA726;
    --rb-status-aktiv: #66BB6A;
    --rb-status-abrechnung: #42A5F5;
    --rb-status-abgeschlossen: #26A69A;
    --rb-status-storniert: #EF5350;
    --rb-status-abgelehnt: #EF5350;
    --rb-status-abgelaufen: #A1887F;
    --rb-status-ersetzt: #B0BEC5;
    --rb-status-versendet: #42A5F5;
    --rb-status-angenommen: #66BB6A;
}

.rb-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    background: var(--rb-status-entwurf);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.rb-leise {
    color: var(--text-muted, #90A4AE);
}

/* Statusfarben als Klassen, damit der Renderer keine Farbwerte kennt. */
.rb-status-entwurf { background: var(--rb-status-entwurf); }
.rb-status-angebot { background: var(--rb-status-angebot); }
.rb-status-aktiv { background: var(--rb-status-aktiv); }
.rb-status-in-abrechnung { background: var(--rb-status-abrechnung); }
.rb-status-abgeschlossen { background: var(--rb-status-abgeschlossen); }
.rb-status-storniert { background: var(--rb-status-storniert); }
.rb-status-versendet { background: var(--rb-status-versendet); }
.rb-status-angenommen { background: var(--rb-status-angenommen); }
.rb-status-abgelehnt { background: var(--rb-status-abgelehnt); }
.rb-status-abgelaufen { background: var(--rb-status-abgelaufen); }
.rb-status-ersetzt { background: var(--rb-status-ersetzt); }

/* Aktionsspalte in Tabellen: Knöpfe erscheinen ruhig, aber sind immer
 * erreichbar - eine reine Hover-Anzeige wäre auf Touch nicht bedienbar. */
.rb-aktionen {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.rb-aktionen .btn-icon {
    opacity: 0.65;
    transition: opacity 0.15s ease;
}

tr:hover .rb-aktionen .btn-icon,
.rb-aktionen .btn-icon:focus-visible {
    opacity: 1;
}

/* Rechnungsstatus */
.rb-status-offen { background: #42A5F5; }
.rb-status-bezahlt { background: #66BB6A; }
.rb-status-teilbezahlt { background: #FFA726; }
.rb-status-ueberfaellig { background: #EF5350; }

/* Positionsart in der Auftragsdetailansicht */
.auf-pos-art {
    font-weight: 600;
    font-size: 0.8rem;
}
.auf-pos-art-pauschal { color: #1565C0; }
.auf-pos-art-aufwand { color: #E65100; }

/* Stornoliste im Auftragsmodul */
.storno-zeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.storno-gesperrt { opacity: 0.5; }

/* Vorlagenkarten (Angebotsvorlagen-Verwaltung) */
.vorlagen-karte {
    padding: 0.6rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}
.vorlagen-karte.aktiv { border-color: var(--primary-green, #2E7D32); }
.vorlagen-karte-name { font-weight: 600; font-size: 0.9rem; }
.vorlagen-karte-standard { font-size: 0.65rem; color: var(--primary-green, #2E7D32); }
.vorlagen-karte-info { font-size: 0.75rem; color: var(--text-muted, #90A4AE); }
.vorlagen-hinweis {
    color: var(--text-muted, #90A4AE);
    font-size: 0.85rem;
    padding: 0.5rem;
}
.vorlagen-fehler { color: var(--danger, #EF5350); }

/* Rechnungspositionen im Auftragsmodul */
.re-pos-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: center;
}
.re-pos-row .re-pos-beschr { flex: 3; }
.re-pos-row .re-pos-menge { flex: 0.7; text-align: center; }
.re-pos-row .re-pos-preis { flex: 1; text-align: right; }

/* === modals.css === */
/* =============================================================
   MODALS — Overlays, Wizard-Modals, Confirm-Dialog
   ============================================================= */

/* === Basis Modal === */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: var(--z-wizard, 2000);
}

.modal-overlay.active,
.modal-overlay.show {
    display: flex;
}

.modal-overlay-top {
    z-index: 2001;
}

.modal-overlay-topmost {
    z-index: 2002;
}

.modal-content {
    background-color: var(--card-bg);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.2), 0 8px 20px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 800px;
    position: relative;
    max-height: 80vh;
    overflow-y: auto;
    animation: scaleIn 0.2s ease both;
}

/* Modale mit Header/Body/Footer-Struktur */
.modal-content:has(.modal-footer) {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-content.modal-sm   { max-width: 450px; }
.modal-content.modal-small  { max-width: 400px; }
.modal-content.modal-large  { max-width: 900px; width: 95%; }

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-content:has(.modal-footer) .modal-header,
.modal-content:has(.wizard-footer) .modal-header {
    padding: 1.5rem 2rem 0 2rem;
}

.modal-header h2 {
    margin: 0;
    color: var(--text-dark);
}

.modal-close {
    font-size: 2rem;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    border: none;
    background: none;
}

.modal-close:hover {
    color: var(--text-dark);
}

.modal-body {
    margin-top: 1rem;
}

.modal-content:has(.modal-footer) .modal-body {
    padding: 1rem 2rem;
    margin-top: 0;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.modal-body h4 {
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.modal-footer {
    padding: 1rem 2rem;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}

/* === Versand-Fortschritt === */
.sending-progress {
    padding: 1rem;
}

.progress-bar {
    width: 100%;
    height: 20px;
    background: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--hover-green), var(--primary-green));
    transition: width 0.3s ease;
}

.result-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.result-icon.success { color: var(--hover-green); }
.result-icon.error   { color: #f44336; }
.result-icon.warning { color: #FF9800; }

.sending-result .result-details {
    background: #f5f5f5;
    padding: 1rem;
    border-radius: 8px;
    text-align: left;
    margin-top: 1rem;
}

.sending-result .stat-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #ddd;
}

.sending-result .stat-row:last-child { border-bottom: none; }
.sending-result .stat-label          { color: #666; }
.sending-result .stat-value          { font-weight: bold; }
.sending-result .stat-value.success  { color: var(--hover-green); }
.sending-result .stat-value.error    { color: #f44336; }
.sending-result .stat-value.warning  { color: #FF9800; }

/* === Wizard-Modals: volle Höhe === */
#wizard-modal > .gm-box,
#custom-wizard-modal > .gm-box,
#custom-rechnung-modal > .gm-box,
#csv-import-modal > .gm-box,
#rundschreiben-modal > .gm-box,
#abschluss-wizard-modal > .gm-box,
#create-wizard-modal > .gm-box,
#mahnung-modal > .gm-box,
#invite-modal > .gm-box,
#recipient-modal > .gm-box,
#wr-wizard-modal > .gm-box,
#sepa-mandatsanfrage-modal > .gm-box,
#nl-wizard-modal > .gm-box,
#storno-wizard-modal > .gm-box {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    height: 100%;
}

.wizard-footer {
    /* Layout-Kern mit !important festgenagelt: der Footer wird global geregelt,
       inline-style="padding/justify-content/..." im Markup darf das NICHT kippen
       (häufige Fehlausrichtungs-Quelle). Die responsiven Overrides setzen dieselben
       Eigenschaften ebenfalls mit !important, damit Mobile gewinnt.
       WICHTIG: display bewusst OHNE !important - alle Wizards blenden inaktive
       Schritt-Footer per inline style="display:none" bzw. JS (f.style.display) aus;
       ein !important auf display würde dieses Verstecken kaputtmachen und ALLE
       Schritt-Footer gleichzeitig anzeigen. */
    padding: 0.625rem 1.5rem !important;
    border-top: 1px solid var(--border-color);
    background: var(--gm-bg-subtle, #f7f9fc);
    flex-shrink: 0;
    display: flex;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Wizard-Steps im Tab-Header-Design */
.wizard-steps {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    background-color: var(--dark-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    height: 36px;
    overflow-x: auto;
    scrollbar-width: none;
}
.wizard-steps::-webkit-scrollbar { display: none; }

.wizard-step {
    padding: 0 1.25rem;
    color: var(--text-light);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: default;
    border-bottom: 3px solid transparent;
    opacity: 0.5;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: opacity 0.2s, border-color 0.2s;
}
.wizard-step.active {
    border-bottom-color: var(--primary-green);
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.05);
}
.wizard-step.completed {
    opacity: 0.8;
    border-bottom-color: rgba(255, 255, 255, 0.2);
}
.wizard-step .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}
.wizard-step.active .step-number {
    background: var(--primary-green);
    color: #fff;
}
.wizard-step.completed .step-number {
    background: var(--primary-green);
    color: #fff;
}
.wizard-step .step-label {
    font-size: 0.85rem;
}

#wizard-modal .wizard-content,
#custom-wizard-modal .wizard-content,
#custom-rechnung-modal .wizard-content,
#csv-import-modal .wizard-content,
#rundschreiben-modal .wizard-content,
#nl-wizard-modal .wizard-content,
#abschluss-wizard-modal .wizard-content-container,
#create-wizard-modal .wizard-content,
#mahnung-modal .wizard-content,
#invite-modal .wizard-content,
#recipient-modal .wizard-content,
#wr-wizard-modal .wizard-content,
#sepa-mandatsanfrage-modal .wizard-content,
#storno-wizard-modal .wizard-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0.75rem 1.25rem;
}

#wr-wizard-modal .wizard-content {
    padding: 1.25rem;
}

/* Tabellen in Wizard-Modalen: restlichen Platz nutzen */
.wizard-content .table-container,
.gm-body .table-container {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
}

/* Elemente vor/nach der Tabelle: kompakt, nicht schrumpfen */
.wizard-content > .view-controls,
.wizard-content > .wizard-filter-bar,
.wizard-content > .pt-toolbar,
.wizard-content > .pt-pagination {
    flex-shrink: 0;
}

/* Invite Step 2+3 */
#invite-modal #invite-step-2,
#invite-modal #invite-step-3 {
    overflow-y: auto;
}

#wizard-modal .wizard-steps { flex-shrink: 0; }

#wizard-modal .view-controls,
#wizard-modal .column-toggles,
#custom-rechnung-modal .view-controls {
    flex-shrink: 0;
}

/* Step-Indicator (für mehrstufige Formulare) */
.step-indicator {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--border-color);
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
}

.step-indicator.active    { background: var(--primary-green); color: white; }
.step-indicator.completed { background: var(--hover-green); color: white; }

/* === Confirm-Modal === */
.confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-confirm, 10001);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.confirm-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.confirm-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    min-width: 320px;
    max-width: 450px;
    transform: scale(0.9);
    transition: transform 0.2s;
}

.confirm-modal-overlay.show .confirm-modal {
    transform: scale(1);
}

.confirm-modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.confirm-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-dark);
}

.confirm-modal-body {
    padding: 1.5rem;
}

.confirm-modal-body p {
    margin: 0;
    font-size: 0.95rem;
    color: #546E7A;
    line-height: 1.5;
    white-space: pre-wrap;
}

.confirm-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

@media (max-width: 500px) {
    .confirm-modal {
        min-width: auto;
        margin: 1rem;
    }
}

/* === modals-specific.css === */
/* =============================================================
   MODALS-SPECIFIC — Meldung, Sendungsverlauf, Vorschau, PDF, Responsive
   ============================================================= */

/* === Meldungs-Modal === */
.meldung-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 16px;
    border-radius: 20px;
    background-color: #c62828;
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(198, 40, 40, 0.4);
    z-index: 9999;
    font-size: 0.9rem;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.meldung-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(198, 40, 40, 0.5);
    background-color: #b71c1c;
}

.meldung-modal-content {
    max-width: 700px;
}

#meldung-screenshot-container {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    background-color: #f7f9fc;
    text-align: center;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#meldung-screenshot-container img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.meldung-system-info {
    background-color: #f7f9fc;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    font-size: 0.85rem;
}

.meldung-system-info .info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.meldung-system-info .info-item  { display: flex; gap: 0.5rem; }
.meldung-system-info .info-label { color: #90A4AE; font-weight: 500; }
.meldung-system-info .info-value { color: var(--text-dark); }

@media (max-width: 768px) {
    .meldung-btn {
        padding: 8px 14px;
        font-size: 0.85rem;
        bottom: 15px;
        right: 15px;
    }
    .meldung-system-info .info-grid { grid-template-columns: 1fr; }
}

/* === Sendungsverlauf-Modal === */
.sendungsverlauf-modal-content {
    max-width: 700px;
    max-height: 80vh;
}

.sendungsverlauf-liste {
    max-height: 60vh;
    overflow-y: auto;
}

.sendung-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

.sendung-item:hover       { background-color: #f5f5f5; }
.sendung-item:last-child  { border-bottom: none; }

.sendung-info {
    flex: 1;
    min-width: 0;
}

.sendung-betreff {
    font-weight: 500;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sendung-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.sendung-typ {
    background: var(--primary-10);
    color: var(--primary-green);
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.sendung-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: 1rem;
}

.sendung-action-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    color: var(--text-dark);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.sendung-action-btn:hover {
    background-color: var(--primary-green);
    color: white;
    border-color: var(--primary-green);
}

.sendung-no-preview {
    color: #999;
    font-style: italic;
}

/* === E-Mail-Vorschau-Modal === */
.email-vorschau-modal-content {
    width: 900px;
    max-width: 95vw;
}

.email-vorschau-modal-content .modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.email-vorschau-meta {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.email-vorschau-meta p { margin: 0.25rem 0; }

.email-vorschau-inhalt {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    background: white;
    flex: 1;
    min-height: 200px;
}

.email-vorschau-inhalt iframe {
    width: 100%;
    height: 100%;
    min-height: 200px;
    border: none;
    display: block;
}

/* === Anhangleiste (global, window.mountAttachmentBar) ===
 * Eine geschlossene Box in derselben Optik wie die Kopfdaten darüber. Die
 * frühere Lösung - nur eine Trennlinie über der Liste - sah wie ein
 * verrutschter Fußbereich aus, weil sie über die ganze Modal-Breite lief,
 * während der Inhalt darüber in Kästen sitzt. */
.anhang-leiste {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--page-bg, #f7f9fc);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    flex-shrink: 0;
}

/* Die Box bringt Rahmen, Fläche und Abstand selbst mit - die alten Werte
   aus email-compose.css (Trennlinie, eigener Grund, zusätzliches Polster)
   würden sich sonst darüberlegen und wieder wie ein Fußbereich wirken. */
.anhang-leiste .preview-attachments {
    margin: 0;
    padding: 0;
    border-top: none;
    background: none;
}

.anhang-leiste .attachments-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #6c757d;
}

.anhang-leiste .attachments-list {
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Dateivorschau für Bilder und Text (window.dateiVorschau) */
.datei-vorschau-bild {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f3f5;
    border-radius: 6px;
    padding: 0.5rem;
}
.datei-vorschau-bild img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    display: block;
}
.datei-vorschau-text {
    margin: 0;
    max-height: 70vh;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.82rem;
    line-height: 1.5;
    background: #f8f9fa;
    border-radius: 6px;
    padding: 0.75rem;
}
.datei-vorschau-hinweis p { margin: 0 0 0.5rem; }
.datei-vorschau-hinweis p:last-child { margin-bottom: 0; color: #6c757d; }

/* === PDF-Viewer-Modal ===
 * Pattern wie das Rechnung-PDF-Modal (templates/rechnung/_pdf_modal.html):
 * Modal hat fixe Höhe, Body ist Flex-Container, Host bekommt flex:1+min-height:0,
 * .pdfv-root füllt den Host auf height:100%. Damit kann .pdfv-scroll scrollen. */
.pdf-viewer-modal-content {
    width: 95vw;
    max-width: 95vw;
    height: 95vh;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pdf-viewer-body {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.pdf-viewer-body > #pdf-viewer-host,
.pdf-viewer-body > #pdf-viewer-image-container,
.pdf-viewer-body > #pdf-viewer-iframe {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    background: #525659;
    position: relative;
    overflow: hidden;
}

.pdf-viewer-body > #pdf-viewer-host.pdfv-root {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pdf-viewer-body iframe {
    border: none;
}

/* === Bestätigungs-Popup (Veranstaltungen Anmeldung) === */
.confirmation-popup-content {
    text-align: left;
}

.confirmation-popup-content h3 {
    margin-top: 0;
}

.confirmation-popup-list {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    margin-top: 1rem;
    background-color: #f7f9fc;
}

.confirmation-popup-list ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.confirmation-popup-list li {
    padding: 0.25rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.confirmation-popup-list li:last-child { border-bottom: none; }

.confirmation-popup-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* === Validierungsfehler === */
.validation-error {
    color: #c62828;
    font-size: 0.8rem;
    margin-top: 4px;
    display: block;
}

input.invalid {
    border-color: #c62828 !important;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.15) !important;
}

/* =============================================================
   BANK-IMPORT (#csv-import-modal)
   ============================================================= */
:root {
    --imp-spalte-min: 9rem;      /* Mindestbreite je Quellspalte */
    --imp-zelle-max: 14rem;      /* ab hier wird der Zellinhalt gekürzt */
    --imp-konto-breite: 13rem;   /* Gegenkonto-Auswahl in der Zuordnung */
}

/* Schritt 2 - Spaltenzuordnung: die Datei bringt beliebig viele Spalten mit
   (George liefert 23). Ein festes Layout auf 100% Breite presst sie alle in
   das Modal, wodurch Überschriften und Auswahlfelder übereinanderliegen.
   Jede Spalte bekommt deshalb eine Mindestbreite, die Tabelle wächst über
   die Modalbreite hinaus und der Container scrollt waagrecht. */
#csv-import-modal #preview-table {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
}
#csv-import-modal #preview-table th,
#csv-import-modal #preview-table td {
    min-width: var(--imp-spalte-min);
    max-width: var(--imp-zelle-max);
    vertical-align: middle;
}
#csv-import-modal #preview-table thead th {
    white-space: normal;
    overflow-wrap: anywhere;
}
#csv-import-modal #preview-table tbody td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#csv-import-modal #mapping-row th {
    padding: 0.25rem;
}
#csv-import-modal .column-category-select {
    font-size: 0.8rem;
}

/* Schritt 3 - Zuordnung: Kontobezeichnungen wie "2100 Forderungen
   Mitgliedsbeiträge" passen nicht in eine Zeile. Statt sie abzuschneiden
   darf die Auswahl umbrechen; die Zeile wächst mit. */
#assignment-table .assign-konto {
    width: var(--imp-konto-breite);
}
#assignment-table .assign-konto .custom-select-trigger {
    font-size: 0.8rem;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}
#assignment-table tbody td {
    vertical-align: middle;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}
#assignment-table .betrag-zelle {
    white-space: nowrap;
}

/* Der Umbruch der Zellinhalte gilt inzwischen für jede Tabelle und steht
   deshalb in power-table.css - hier stand er zuvor nur für diese eine. */

/* Prüf-Kennzeichnung: bei 280 Zeilen muss auf einen Blick erkennbar sein,
   wo der Anwender selbst entscheiden muss. Der farbige Balken links trägt
   die Aussage, die Flächenfarbe bleibt zurückhaltend genug zum Lesen. */
:root {
    --imp-offen: #c62828;
    --imp-unsicher: #ef6c00;
}
#assignment-table tbody tr.zeile-offen > td:first-child,
#assignment-table tbody tr.zeile-unsicher > td:first-child {
    border-left: 4px solid transparent;
}
#assignment-table tbody tr.zeile-offen > td:first-child {
    border-left-color: var(--imp-offen);
}
#assignment-table tbody tr.zeile-unsicher > td:first-child {
    border-left-color: var(--imp-unsicher);
}
#assignment-table tbody tr.zeile-offen > td {
    background-color: color-mix(in srgb, var(--imp-offen), white 94%);
}
#assignment-table tbody tr.zeile-unsicher > td {
    background-color: color-mix(in srgb, var(--imp-unsicher), white 94%);
}

.zuordnung-marke {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.zuordnung-sicher {
    color: var(--primary-green);
    background: var(--primary-10);
}
.zuordnung-unsicher {
    color: var(--imp-unsicher);
    background: color-mix(in srgb, var(--imp-unsicher), white 88%);
}
.zuordnung-offen {
    color: var(--imp-offen);
    background: color-mix(in srgb, var(--imp-offen), white 88%);
}

.pruef-hinweis {
    font-size: 0.85rem;
}
.pruef-hinweis .pruef-warnung {
    color: var(--imp-offen);
}
.pruef-hinweis .pruef-alles-gut {
    color: var(--primary-green);
}

/* =============================================================
   MOBILE RESPONSIVE - Wizard-Modale und spezifische Modale
   ============================================================= */
@media (max-width: 768px) {
    /* --- Wizard-Content: weniger Padding --- */
    #wizard-modal .wizard-content,
    #custom-wizard-modal .wizard-content,
    #custom-rechnung-modal .wizard-content,
    #csv-import-modal .wizard-content,
    #rundschreiben-modal .wizard-content,
    #nl-wizard-modal .wizard-content,
    #abschluss-wizard-modal .wizard-content-container,
    #create-wizard-modal .wizard-content,
    #mahnung-modal .gm-body,
    #invite-modal .wizard-content,
    #wr-wizard-modal .wizard-content,
    #sepa-mandatsanfrage-modal .wizard-content,
    #storno-wizard-modal .wizard-content {
        padding: 0.75rem;
    }

    /* --- Wizard-Tabellen: niedrigere max-height --- */
    #wizard-modal .table-container,
    #custom-wizard-modal .table-container,
    #custom-rechnung-modal .table-container,
    #mahnung-modal .table-container,
    #invite-modal .table-container,
    #sepa-mandatsanfrage-modal .table-container {
        max-height: 35vh;
        min-height: 150px;
    }

    /* --- Mahnung Wizard: Tabellen-Layout kompakter --- */
    #wizard-modal .wizard-table-container {
        max-height: 35vh;
    }

    /* --- view-controls in Wizards: umbrechen --- */
    .wizard-content .view-controls,
    .gm-body .view-controls {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* --- Zweispaltige Auswahl-Listen (E-Mail/Brief) umbrechen --- */
    #invite-step-1 > div[style*="display: flex"][style*="gap: 2rem"],
    #wizard-step-1 > div[style*="display: flex"][style*="gap: 2rem"],
    #custom-step-1 > div[style*="display: flex"][style*="gap: 2rem"],
    #rs-step-1 > div[style*="display: flex"][style*="gap: 2rem"] {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* --- Versand-Steps: E-Mail/Brief-Split stapeln --- */
    #wizard-step-4 > div[style*="display: flex"],
    #custom-step-5 > div[style*="display: flex"],
    #invite-step-3 > div[style*="display: flex"],
    #rs-step-4 > div[style*="display: flex"],
    #abschluss-step-3 .email-editor-container {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* --- Abschluss-Wizard E-Mail-Editor: einspaltrig --- */
    #abschluss-step-3 .email-editor-container {
        grid-template-columns: 1fr !important;
    }

    /* --- Vorschau-Steps: Sidebar + PDF stapeln --- */
    #wizard-step-2 > div[style*="display: flex"][style*="gap: 1rem"],
    #custom-step-3 > div[style*="display: flex"][style*="gap: 1rem"] {
        flex-direction: column !important;
    }

    /* --- Brief-Text + Platzhalter-Spalte stapeln (Custom-Rechnung) --- */
    /* Hinweis: Invite und Rundschreiben verwenden jetzt die globale BriefStep-Komponente,
       die Responsive-Verhalten in brief-step.css selbst handhabt. */
    #custom-step-4 > div[style*="display: flex"][style*="gap: 1.5rem"] {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* --- Abschluss-Wizard: Vorschau-Navigation kompakter --- */
    #abschluss-step-2 .preview-navigation,
    .preview-navigation {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* --- Upload-Area: weniger Padding --- */
    .upload-area {
        padding: 1.5rem;
    }

    /* --- Empfänger-Auswahl (recipients): compact --- */
    #recipients-selection .form-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* --- Manuelle Anmeldung: Form-Rows stapeln --- */
    #manuelle-anmeldung-modal .form-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* --- Gebuehren-Modal: Felder untereinander (Grid, kein Flex) --- */
    .gebuehr-config-row .gebuehr-felder {
        grid-template-columns: 1fr;
    }

    /* --- PDF-Viewer: volle Höhe --- */
    .pdf-viewer-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    /* --- Custom-Fields-Table: horizontal scrollbar --- */
    .custom-fields-table {
        display: block;
        overflow-x: auto;
    }
}

@media (max-width: 479px) {
    /* --- Wizard-Footer Buttons stapeln --- */
    .wizard-footer {
        flex-direction: column;
        gap: 0.5rem;
    }
    .wizard-footer > *,
    .wizard-footer .btn {
        width: 100%;
        text-align: center;
    }

    /* --- Mahnung Wizard-Footer --- */
    #wizard-modal .gm-footer {
        flex-direction: column;
        gap: 0.5rem;
    }
    #wizard-modal .gm-footer > div {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 0.5rem;
    }
    #wizard-modal .gm-footer .btn {
        flex: 1;
    }

    /* --- Bestätigungsdialog: kompakter --- */
    .confirmation-popup-content {
        margin: 0;
    }

    /* --- Form-Row in Modalen: immer vertikal --- */
    .gm-body .form-row,
    .wizard-content .form-row {
        grid-template-columns: 1fr !important;
    }
}

/* ==================== Split-Modal (Editor + Vorschau) ====================
   Geometrie für Modale, die links einen Editor und rechts eine Vorschau
   zeigen. Vorher stand sie als style-Attribut direkt auf .gm-box und
   .gm-body - genau die Stellen, deren Padding und Höhe dem Container
   gehören und nicht dem Kind. */

.gm-box.gm-full.gm-split-host,
#angebot-modal > .gm-box {
    height: 90vh;
}

#angebot-pdf-view-modal > .gm-box {
    max-width: 900px;
    height: 85vh;
}

.gm-body.gm-split {
    display: flex;
    flex-direction: row;
    padding: 0;
    flex: 1;
    min-height: 0;
}

.gm-body.gm-body-randlos {
    flex: 1;
    min-height: 0;
    padding: 0;
}

.gm-fuellend {
    width: 100%;
    height: 100%;
    background: #fff;
}

.gm-split-editor {
    flex: 2;
    min-width: 0;
    overflow-y: auto;
    padding: 1rem;
    border-right: 1px solid var(--border-color, #E0E0E0);
}

.gm-split-vorschau {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.gm-split-vorschau-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.gm-split-vorschau-status {
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--text-muted, #90A4AE);
}

.gm-split-vorschau-rahmen {
    flex: 1;
    margin: 0 0.5rem 0.5rem;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    overflow: hidden;
    background: #E8E8E8;
}

/* Unter 900px hat die Vorschau neben dem Editor keinen Platz mehr. */
@media (max-width: 900px) {
    .gm-body.gm-split {
        flex-direction: column;
    }

    .gm-split-editor {
        border-right: none;
        border-bottom: 1px solid var(--border-color, #E0E0E0);
    }

    .gm-split-vorschau {
        min-height: 320px;
    }
}

/* === global-modals.css === */
/* =============================================================================
   GLOBAL MODAL SYSTEM (gm-)
   Einheitliches Modal-System für alle Module.
   Prefix gm- vermeidet Konflikte mit bestehenden Klassen.
   ============================================================================= */

/* --- CSS Custom Properties --- */
:root {
    --gm-header-h: 52px;
    --gm-tab-h: 36px;
    --gm-footer-h: 44px;
    --gm-top: calc(var(--gm-header-h) + var(--gm-tab-h));   /* 88px */
    --gm-bottom: var(--gm-footer-h);                          /* 44px */
    --gm-gap: 1.25rem;
    --gm-z: var(--z-wizard, 2000);
    --gm-radius: 10px;
    --gm-anim: 150ms;
    --gm-border: var(--border-color, #e0e0e0);
    --gm-bg-subtle: #f7f9fc;
}

/* =============================================================================
   OVERLAY (Backdrop) — zwischen Tab-Header und Footer
   ============================================================================= */
.gm-overlay {
    position: fixed;
    top: var(--gm-top);
    left: 0;
    right: 0;
    bottom: var(--gm-bottom);
    z-index: var(--gm-z);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gm-gap);
    animation: gm-fade-in var(--gm-anim) ease-out;
}

/* Seiten ohne Tab-Header: Overlay startet direkt unter dem Header */
body:not(:has(.tab-header)) .gm-overlay {
    top: var(--gm-header-h);
}

/* Hidden-Zustand */
.gm-overlay.hidden {
    display: none;
}

/* =============================================================================
   BOX (Container)
   ============================================================================= */
.gm-box {
    background: var(--card-bg, #fff);
    border-radius: var(--gm-radius);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2), 0 8px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    max-height: 100%;
    width: 100%;
    overflow: hidden;
    animation: gm-enter var(--gm-anim) ease-out;
}
/* Forms innerhalb der Box müssen Flex-Layout mitmachen */
.gm-box > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* --- Breitenvarianten --- */
.gm-sm   { max-width: 450px; }
.gm-md   { max-width: 700px; }
.gm-lg   { max-width: 1100px; width: 95%; }
/* gm-xl und gm-full nutzen beide die volle Viewport-Breite minus 2rem Rand.
   Vorher waren xl=1100px und full=calc(100vw-2rem), was auf großen Monitoren
   xl-Modale unnötig schmal hat aussehen lassen. */
.gm-xl   { max-width: calc(100vw - 2rem); width: 100%; }
.gm-full { max-width: calc(100vw - 2rem); width: 100%; }

/* =============================================================================
   HEADER (fix oben im Modal)
   ============================================================================= */
.gm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--gm-border);
    flex-shrink: 0;
    gap: 1rem;
}
.gm-header h2,
.gm-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.4;
    min-width: 0;
}

/* Danger-Header (für Lösch-Bestätigungen etc.) */
.gm-header.gm-danger {
    background: #fef2f2;
    border-bottom-color: #fecaca;
}
.gm-header.gm-danger h2,
.gm-header.gm-danger h3 {
    color: #991b1b;
}

/* =============================================================================
   CLOSE BUTTON
   ============================================================================= */
.gm-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: none;
    color: #90A4AE;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    font-size: 1.4rem;
    line-height: 1;
}
.gm-close:hover {
    color: var(--text-dark);
    background: rgba(0, 0, 0, 0.05);
}
.gm-close::after {
    content: '\00D7';
}
/* Die globale Komponente besitzt das X allein: es kommt ausschließlich aus
   ::after. Versehentlich ins Markup geschriebene Icons/Inhalte (z.B.
   <svg use #icon-x>) werden ausgeblendet, damit NIE ein doppeltes X entstehen
   kann - unabhängig davon, was jemand in den Button schreibt. */
.gm-close > * {
    display: none;
}

/* =============================================================================
   TAB/WIZARD NAVIGATION — im Design des App-Tab-Headers
   ============================================================================= */
.gm-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 1rem;
    background-color: var(--dark-bg, #2c3e50);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    height: 36px;
}
.gm-tabs::-webkit-scrollbar { display: none; }

.gm-tab {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0 1.25rem;
    height: 36px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-bottom: 2px solid transparent;
    position: relative;
}
.gm-tab:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.05);
}
.gm-tab.active {
    color: #fff;
    border-bottom-color: var(--primary-green, #4CAF50);
    background: rgba(255, 255, 255, 0.08);
}

/* Tab im "done"-Zustand (Wizard - Schritt erledigt) */
.gm-tab.done {
    color: rgba(255, 255, 255, 0.8);
}
.gm-tab.done::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-green, #4CAF50);
    margin-right: 0.25rem;
}

/* Wizard-Nummer-Badge im Tab */
.gm-wizard-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}
.gm-tab.active .gm-wizard-num {
    background: var(--primary-green, #4CAF50);
    color: #fff;
}
.gm-tab.done .gm-wizard-num {
    background: var(--primary-green, #4CAF50);
    color: #fff;
}

/* Tab Panels */
.gm-tab-panel {
    display: none;
}
.gm-tab-panel.active {
    display: block;
}

/* Wizard Panels */
.gm-wizard-panel {
    display: none;
}
.gm-wizard-panel.active {
    display: block;
}

/* =============================================================================
   BODY (scrollbarer Inhalt)
   ============================================================================= */
.gm-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.5rem 2rem;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

/* =============================================================================
   FOOTER (fix unten im Modal)
   ============================================================================= */
.gm-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--gm-border);
    background: var(--gm-bg-subtle);
    flex-shrink: 0;
}
.gm-footer-split {
    justify-content: space-between;
}
.gm-footer-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.gm-footer-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* =============================================================================
   BUTTONS (im Modal-Footer)
   ============================================================================= */
.gm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    height: 34px;
    box-sizing: border-box;
}
.gm-btn-primary {
    background: var(--primary-green, #4CAF50);
    color: #fff;
    border-color: var(--primary-green, #4CAF50);
}
.gm-btn-primary:hover {
    opacity: 0.9;
}
.gm-btn-danger {
    background: #e53935;
    color: #fff;
    border-color: #e53935;
}
.gm-btn-danger:hover {
    background: #c62828;
    border-color: #c62828;
}
.gm-btn-secondary {
    background: var(--card-bg, #fff);
    color: var(--text-dark);
    border-color: var(--gm-border);
}
.gm-btn-secondary:hover {
    background: #f5f5f5;
}
.gm-btn-ghost {
    background: none;
    color: #90A4AE;
    border-color: transparent;
}
.gm-btn-ghost:hover {
    color: var(--text-dark);
    background: rgba(0, 0, 0, 0.03);
}
.gm-btn:disabled,
.gm-btn[disabled] {
    background: #cfd2d4 !important;
    color: #8a9095 !important;
    border-color: #cfd2d4 !important;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 1;
}
.gm-btn:disabled:hover,
.gm-btn[disabled]:hover {
    background: #cfd2d4 !important;
    color: #8a9095 !important;
    border-color: #cfd2d4 !important;
    opacity: 1;
}

/* Loading Spinner auf Button */
.gm-btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.gm-btn-loading::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: gm-spin 0.6s linear infinite;
    left: calc(50% - 0.5rem);
    top: calc(50% - 0.5rem);
    color: inherit;
}
.gm-btn-primary.gm-btn-loading::after { color: #fff; }
.gm-btn-danger.gm-btn-loading::after { color: #fff; }
.gm-btn-secondary.gm-btn-loading::after { color: #90A4AE; }

/* =============================================================================
   PROGRESS-BAR
   Globaler Fortschrittsbalken fuer Bulk-Operationen + Mailversand.
   Nutzung:
     <div class="gm-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
         <div class="gm-progress-fill" style="width: 0%;"></div>
         <span class="gm-progress-text"></span>
     </div>
   ============================================================================= */
.gm-progress {
    background: #e9ecef;
    border-radius: 4px;
    height: 24px;
    position: relative;
    overflow: hidden;
}
.gm-progress-fill {
    background: #28a745;
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
    width: 0%;
}
.gm-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85rem;
    font-weight: 600;
    color: #212529;
    pointer-events: none;
}

/* =============================================================================
   ANIMATIONEN
   ============================================================================= */
@keyframes gm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes gm-enter {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
@keyframes gm-spin {
    to { transform: rotate(360deg); }
}

/* === global-modals-forms.css === */
/* =============================================================================
   GLOBAL MODALS — Formularfelder, PDF-Viewer, Mobile Responsive
   ============================================================================= */

/* Abstände zwischen Formular-Kacheln in Modals */
.gm-body > .form-chapter + .form-chapter { margin-top: 1rem; }

/* Kachel-Titel im section-header: kein unterer Rand, der Header macht die Ausrichtung */
.form-chapter .section-header .form-chapter-title,
.detail-column .section-header .form-chapter-title,
.full-width-section .section-header .form-chapter-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.form-chapter .section-header,
.detail-column .section-header,
.full-width-section .section-header {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-10);
}

/* Checkbox-Gruppen: Kein Rahmen, kein Floating-Label */
.gm-body .form-group:has(> label > input[type="checkbox"]),
.wizard-content .form-group:has(> label > input[type="checkbox"]),
.gm-body .form-group:has(> input[type="checkbox"]),
.wizard-content .form-group:has(> input[type="checkbox"]) {
    border: none;
    padding: 0;
    background: transparent;
}
.gm-body .form-group:has(> label > input[type="checkbox"]):hover,
.wizard-content .form-group:has(> label > input[type="checkbox"]):hover,
.gm-body .form-group:has(> input[type="checkbox"]):hover,
.wizard-content .form-group:has(> input[type="checkbox"]):hover {
    border-color: transparent;
    box-shadow: none;
}
.gm-body .form-group:has(> label > input[type="checkbox"]) > label:first-child,
.wizard-content .form-group:has(> label > input[type="checkbox"]) > label:first-child {
    position: static;
    font-size: 0.9rem;
    font-weight: normal;
    color: var(--text-dark);
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

/* Reguläre Formgruppen (NICHT Checkboxen): Rahmen + Floating-Label */
.gm-body .form-group:not(:has(> label > input[type="checkbox"])):not(:has(> input[type="checkbox"])),
.wizard-content .form-group:not(:has(> label > input[type="checkbox"])):not(:has(> input[type="checkbox"])) {
    position: relative;
    border: 1px solid var(--gm-border);
    border-radius: 8px;
    padding: 4px 10px;
    background-color: var(--card-bg, #fff);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.gm-body .form-group:not(:has(> label > input[type="checkbox"])):hover,
.wizard-content .form-group:not(:has(> label > input[type="checkbox"])):hover {
    border-color: var(--primary-30);
    box-shadow: 0 0 0 2px var(--primary-5);
}
.gm-body .form-group:not(:has(> label > input[type="checkbox"])):focus-within,
.wizard-content .form-group:not(:has(> label > input[type="checkbox"])):focus-within {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 2px var(--primary-10);
}

/* Label als Floating-Label im Rahmen (nur für reguläre Felder) */
.gm-body .form-group:not(:has(> label > input[type="checkbox"])) > label:first-child,
.wizard-content .form-group:not(:has(> label > input[type="checkbox"])) > label:first-child {
    position: absolute;
    top: -10px;
    left: 10px;
    max-width: calc(100% - 25px);
    width: fit-content;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-green);
    background-color: var(--card-bg, #fff);
    padding: 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

/* Input/Textarea/Dropdown DIREKT in form-group: kein eigener Border
   (Direct-Child-Selektor, damit nested Inputs in Listen ihre Border behalten) */
.gm-body .form-group > input.form-control,
.wizard-content .form-group > input.form-control,
.gm-body .form-group > select.form-control,
.wizard-content .form-group > select.form-control {
    border: none;
    padding: 0;
    background: transparent;
    box-shadow: none;
    font-size: 1rem;
    outline: none;
    height: 24px;
}
/* Custom-Dropdown: Trigger-Overrides und Chevron in forms.css (global) */
/* Chevron-Pfeil auf dem form-group selbst (wie editable-field[data-type="select"]) */
.gm-body .form-group:has(.custom-select-wrapper)::after,
.wizard-content .form-group:has(.custom-select-wrapper)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390a4ae' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-size: contain;
    opacity: 0.4;
    pointer-events: none;
}
.gm-body .form-group:has(.custom-select-wrapper):hover::after,
.wizard-content .form-group:has(.custom-select-wrapper):hover::after {
    opacity: 0.7;
}
.gm-body .form-group:has(.custom-select-wrapper),
.wizard-content .form-group:has(.custom-select-wrapper) {
    cursor: pointer;
}
.gm-body .form-group > textarea.form-control,
.wizard-content .form-group > textarea.form-control {
    border: none;
    padding: 0;
    background: transparent;
    box-shadow: none;
    font-size: 1rem;
    outline: none;
    height: auto;
    min-height: 3rem;
}

/* Inputs in Tabellen innerhalb von Modalen */
.gm-body table .form-control,
.wizard-content table .form-control {
    height: 34px;
    padding: 0.35rem 0.5rem;
    font-size: 0.9rem;
    box-sizing: border-box;
    border-radius: 6px;
}
.gm-body .form-group > input.form-control:focus,
.wizard-content .form-group > input.form-control:focus,
.gm-body .form-group > textarea.form-control:focus,
.wizard-content .form-group > textarea.form-control:focus {
    box-shadow: none;
    border: none;
}

/* Currency-Wrapper innerhalb form-group */
.gm-body .form-group .currency-wrapper,
.wizard-content .form-group .currency-wrapper {
    width: 100%;
    position: static;
    margin: 0;
}
.gm-body .form-group .currency-display,
.wizard-content .form-group .currency-display {
    font-size: 1rem;
    min-height: 24px;
    line-height: 24px;
}

/* Select innerhalb: Chevron sichtbar. gm-header mitgenommen, damit Selects in
   der Kopfzeile (z.B. Genre-Auswahl im KI-Diff-Modal) nicht nativ gerendert
   werden. Im Header behalten sie ihren form-control-Rahmen (keine border:none-
   Regel oben), nur der native Pfeil wird durch das CI-Chevron ersetzt. */
.gm-body .form-group > select.form-control,
.wizard-content .form-group > select.form-control,
.gm-header .form-group > select.form-control {
    padding-right: 1.5rem;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390a4ae' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 14px;
}
.gm-body .form-group > select.form-control:focus,
.wizard-content .form-group > select.form-control:focus {
    box-shadow: none;
    border: none;
}

/* Buttons in Modalen: gleiche Höhe wie Inputs (aber nicht Icon-Buttons) */
.gm-body .btn:not(.btn-icon),
.wizard-content .btn:not(.btn-icon),
.gm-footer .btn:not(.btn-icon),
.wizard-footer .btn:not(.btn-icon) {
    height: 34px;
    padding: 0.375rem 1rem;
    box-sizing: border-box;
    font-size: 0.875rem;
}

/* Textarea: Mindesthöhe */
.gm-body .form-group > textarea.form-control,
.wizard-content .form-group > textarea.form-control {
    min-height: 3rem;
    resize: vertical;
}

/* form-row in Modalen: Abstand zwischen Feldern */
.gm-body .form-row,
.wizard-content .form-row {
    gap: 1rem;
    margin-bottom: 0;
}

/* =============================================================================
   PDF/VIEWER MODALS — volle verfügbare Höhe
   ============================================================================= */
.gm-box:has(.pdf-viewer-body) {
    height: 100%;
}
.pdf-viewer-body {
    flex: 1;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
}
.pdf-viewer-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* =============================================================================
   MOBILE RESPONSIVE
   ============================================================================= */
@media (max-width: 768px) {
    .gm-overlay {
        padding: 0.25rem;
    }

    .gm-box {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 8px;
    }

    .gm-header h2,
    .gm-header h3 {
        font-size: 1rem;
    }
    .gm-body {
        padding: 0.75rem;
    }
    .gm-header,
    .gm-footer {
        padding: 0.625rem 0.75rem;
    }

    .gm-tabs {
        height: 32px;
    }
    .gm-tab {
        font-size: 0.8rem;
        padding: 0 0.75rem;
        height: 32px;
    }

    .wizard-step .step-label {
        display: none;
    }
    .wizard-step {
        padding: 0 0.75rem;
    }
    .wizard-steps {
        justify-content: center;
    }

    .wizard-content {
        padding: 0.75rem !important;
    }

    .gm-body > div[style*="display: flex"],
    .gm-body > div[style*="display:flex"],
    .wizard-content > div[style*="display: flex"],
    .wizard-content > div[style*="display:flex"],
    .wizard-step-content > div[style*="display: flex"],
    .wizard-step-content > div[style*="display:flex"] {
        flex-wrap: wrap !important;
    }

    .gm-body div[style*="width: 280px"],
    .gm-body div[style*="width:280px"],
    .wizard-content div[style*="width: 280px"],
    .wizard-content div[style*="width:280px"] {
        width: 100% !important;
        flex-shrink: 1 !important;
    }
    .gm-body div[style*="width: 250px"],
    .gm-body div[style*="width:250px"],
    .wizard-content div[style*="width: 250px"],
    .wizard-content div[style*="width:250px"],
    .gm-body div[style*="width: 220px"],
    .gm-body div[style*="width:220px"],
    .wizard-content div[style*="width: 220px"],
    .wizard-content div[style*="width:220px"] {
        width: 100% !important;
    }

    .wizard-content div[style*="min-height: 500px"],
    .wizard-content div[style*="min-height:500px"] {
        min-height: 300px !important;
    }
    .wizard-content iframe[style*="height: 500px"],
    .wizard-content iframe[style*="height:500px"] {
        height: 300px !important;
    }

    .gm-body .email-editor-container,
    .wizard-content .email-editor-container,
    .wizard-step-content .email-editor-container {
        grid-template-columns: 1fr !important;
    }

    .gm-body .form-chapter,
    .wizard-content .form-chapter {
        padding: 0.75rem;
    }

    .wizard-footer {
        padding: 0.625rem 0.75rem !important;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .wizard-navigation {
        flex-wrap: wrap !important;
        gap: 0.5rem;
    }
    .wizard-navigation > div {
        flex: 1 1 auto !important;
        text-align: center;
    }

    .gm-body .table-container,
    .wizard-content .table-container,
    .wizard-step-content .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .versand-stats {
        flex-wrap: wrap !important;
    }

    .sendungsverlauf-modal-content {
        max-width: 100% !important;
    }
    .sendung-meta {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .sendung-actions {
        margin-left: 0;
        margin-top: 0.5rem;
    }
    .sendung-item {
        flex-wrap: wrap;
    }

    .email-vorschau-modal-content {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 479px) {
    .gm-footer {
        flex-wrap: wrap;
    }
    .gm-footer .gm-btn,
    .gm-footer .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    .wizard-footer {
        flex-direction: column;
        gap: 0.5rem;
    }
    .wizard-footer > * {
        width: 100%;
        text-align: center;
    }
    .wizard-footer .btn {
        width: 100%;
    }
    .wizard-footer div[style*="display: flex"],
    .wizard-footer div[style*="display:flex"] {
        flex-wrap: wrap !important;
        width: 100%;
    }
    .wizard-footer div[style*="display: flex"] .btn,
    .wizard-footer div[style*="display:flex"] .btn {
        flex: 1 1 auto;
    }
}

/* =============================================================================
   BODY SCROLL LOCK
   ============================================================================= */
body.gm-scroll-locked {
    overflow: hidden;
}

/* === cards.css === */
/* =============================================================
   CARDS — Karten, Dashboard, Module-Tiles, Status-Messages
   ============================================================= */

/* === Basis-Karte === */
.card {
    background-color: var(--card-bg);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
    text-align: center;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-green);
}

.card h1 {
    color: var(--text-dark);
}

/* === Auswertungs-Kachel === */
.auswertung-card {
    background: linear-gradient(135deg, var(--primary-5) 0%, var(--primary-10) 100%);
    border: 1px solid var(--primary-green);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.auswertung-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.auswertung-header h3 {
    margin: 0;
    color: var(--primary-green);
    font-size: 1.1rem;
}

.auswertung-subtitle {
    margin: 0.25rem 0 0 0;
    color: #666;
    font-size: 0.9rem;
}

.auswertung-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.auswertung-preview-item {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.auswertung-preview-item .name   { font-weight: 500; }
.auswertung-preview-item .badge  {
    background: var(--primary-green);
    color: white;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.auswertung-preview-more {
    background: #f5f5f5;
    border: 1px dashed #ccc;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: #666;
}

/* === Bilanz-Dashboard === */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.dashboard-card {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.dashboard-card.positive  { border-left: 4px solid var(--hover-green); }
.dashboard-card.negative  { border-left: 4px solid #e53935; }
.dashboard-card.warning   { border-left: 4px solid #FF9800; }
.dashboard-card.highlight {
    background: var(--primary-green);
    color: white;
    border: none;
}

.dashboard-card.highlight .dashboard-label { color: rgba(255,255,255,0.8); }

.dashboard-label {
    display: block;
    font-size: 0.8rem;
    color: #90A4AE;
    margin-bottom: 0.5rem;
}

.dashboard-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
}

.dashboard-card .btn-small {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

@media (max-width: 900px) { .dashboard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .dashboard-grid { grid-template-columns: 1fr; } }

/* === Finance Dashboard (Bilanz-Seite) === */

/* Fade-Up Animation */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-up {
    opacity: 0;
    animation: fadeUp 0.5s ease-out forwards;
    animation-delay: var(--delay, 0s);
}

/* Hero-Bereich */
.fin-hero {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary-green), white 92%),
        color-mix(in srgb, var(--primary-green), white 97%)
    );
    border-radius: 14px;
    padding: 2rem 2.5rem;
    border: 1px solid color-mix(in srgb, var(--primary-green), white 80%);
}

.fin-hero-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.fin-hero-left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fin-hero-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--primary-green), black 10%);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fin-hero-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.1;
}

.fin-hero-sub {
    font-size: 0.85rem;
    color: #78909c;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* Was noch aussteht - direkt unter dem Kontostand, weil es zur selben Frage
   gehört: wie viel Geld hat der Verein wirklich. */
.fin-hero-offen {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
    font-size: 0.9rem;
    color: var(--warning-color, #ef6c00);
}

.fin-hero-offen strong {
    color: var(--text-dark);
    font-weight: 600;
}

.fin-hero-edit {
    background: none;
    border: none;
    color: var(--primary-green);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    transition: background 0.15s;
}

.fin-hero-edit:hover {
    background: color-mix(in srgb, var(--primary-green), white 85%);
}

.fin-hero-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
    min-width: 320px;
}

.fin-jahr-select {
    width: auto;
    min-width: 100px;
    font-weight: 600;
    border-color: color-mix(in srgb, var(--primary-green), white 60%);
}

.fin-hero-bar {
    width: 100%;
}

.fin-hero-bar-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
}

.fin-bar-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.fin-bar-label.positive { color: var(--primary-green); }
.fin-bar-label.negative { color: #e53935; }

.fin-hero-bar-track {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: #e0e0e0;
}

.fin-hero-bar-fill {
    height: 100%;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fin-bar-income {
    background: var(--primary-green);
    border-radius: 5px 0 0 5px;
}

.fin-bar-expense {
    background: #e53935;
    border-radius: 0 5px 5px 0;
}

@media (max-width: 768px) {
    .fin-hero-inner { flex-direction: column; align-items: flex-start; }
    .fin-hero-right { min-width: 100%; align-items: flex-start; }
    .fin-hero-value { font-size: 2rem; }
}

/* Die Kennzahlkacheln (früher .fin-kpi*) stehen jetzt im globalen
   Baustein src/static/css/kennzahlen.css. */

/* Ohne jede Bewegung bleibt der Balken leer statt halb grün, halb rot. */
.fin-hero-bar-track.fin-hero-bar-leer {
    background: var(--border-color, #e8e8e8);
}

/* Import-Banner */
.fin-import {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-green) 0%, color-mix(in srgb, var(--primary-green), black 20%) 100%);
    color: white;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-green), transparent 70%);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fin-import:hover {
    transform: scale(1.005);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--primary-green), transparent 50%);
}

.fin-import > svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    opacity: 0.9;
}

.fin-import-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.fin-import-text strong {
    font-size: 1rem;
}

.fin-import-text span {
    font-size: 0.82rem;
    opacity: 0.85;
}

.fin-import-btn {
    background: white;
    color: var(--primary-green);
    border: none;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s, transform 0.1s;
    white-space: nowrap;
}

.fin-import-btn:hover {
    background: #f5f5f5;
    transform: scale(1.02);
}

@media (max-width: 600px) {
    .fin-import { flex-direction: column; text-align: center; }
    .fin-import-btn { width: 100%; }
}

/* Hauptbereich: 2-Spalten Grid.

   align-items: stretch (Vorgabe) statt start - sonst behält die linke Karte
   ihre eigene Höhe, während die Diagrammspalte weiterwächst, und darunter
   klafft eine leere Fläche. Beide Spalten sind jetzt gleich hoch; die Tabelle
   scrollt in sich, statt die Seite zu verlängern. */
.fin-main-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 1rem;
    margin-top: 1rem;
    /* Eine gemeinsame Höhe für beide Spalten. Vorher hatte die Tabelle 75vh
       und die Diagramme wuchsen darüber hinaus - darunter blieb eine leere
       Fläche. Ohne Begrenzung wächst umgekehrt die Tabelle mit ihren Zeilen
       und zieht die Diagramme auf absurde Grössen. */
    grid-auto-rows: clamp(460px, 64vh, 700px);
}

.fin-main-table {
    /* Die Höhe kommt aus dem Grid; innen scrollt die Tabelle. */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.fin-main-table .view-controls {
    flex-shrink: 0;
}

.fin-main-table > .table-container {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Diagrammspalte: Jahresvergleich über die ganze Breite, darunter die beiden
   Ringe nebeneinander. Gestapelt wurden daraus knapp 1000px Höhe - mehr als
   ein Bildschirm, und die Tabelle daneben sah dadurch verloren aus. */
.fin-main-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Jahresvergleich etwas höher als die beiden Ringe darunter. */
    grid-template-rows: 1.15fr 1fr;
    gap: 1rem;
    min-height: 0;
}

.fin-main-charts > .fin-chart-breit {
    grid-column: 1 / -1;
}

/* Die Karten füllen ihre Grid-Zeile, das Diagramm füllt die Karte. Feste
   Pixelhöhen je Diagramm wären hier falsch: sie ergeben zusammen nie genau
   die Höhe der Tabelle daneben. */
.fin-main-charts > .fin-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.fin-main-charts .fin-chart-box {
    flex: 1;
    height: auto;
    min-height: 0;
}

@media (max-width: 1400px) {
    /* Wird die Spalte zu schmal, sind zwei Ringe nebeneinander nicht mehr
       lesbar - dann untereinander, und der Bereich darf höher werden. */
    .fin-main-charts {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
    }
}

@media (max-width: 1200px) {
    /* Einspaltig gestapelt gibt es keine zweite Spalte mehr, an der sich die
       Höhe messen müsste. */
    .fin-main-grid { grid-auto-rows: auto; }
    .fin-main-table { max-height: 70vh; }
    .fin-main-charts { grid-template-rows: none; }
    .fin-main-charts .fin-chart-box { height: 220px; flex: none; }
}

@media (max-width: 1200px) {
    .fin-main-grid { grid-template-columns: 1fr; }
}

/* === Wizard-Steps (Bilanz-Import) === */
/* Statistik-Leiste (über Tabellen) */
.statistik-leiste {
    margin-bottom: 1rem;
}

/* wizard-steps und wizard-step Styles → siehe modals.css */

.wizard-content { min-height: 0; }

/* === Status-Meldungen === */
.status-message {
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.status-message.success {
    background-color: var(--primary-10);
    color: var(--primary-green);
    border: 1px solid var(--primary-50);
}

.status-message.error {
    background-color: #FFEBEE;
    color: #C62828;
    border: 1px solid #EF9A9A;
}

/* === Test-Ergebnis === */
.test-result {
    padding: 1rem;
    border-radius: 6px;
    margin-top: 1rem;
}

.test-result.success {
    background-color: var(--primary-10);
    color: var(--primary-green);
    border: 1px solid var(--primary-50);
}

.test-result.error {
    background-color: #FFEBEE;
    color: #C62828;
    border: 1px solid #EF9A9A;
}

/* === Info-Karte === */
.info-card {
    background-color: #FAFAFA;
}

.info-content h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.info-table th,
.info-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.info-table th { background-color: var(--page-bg); font-weight: 600; }
.info-table tbody tr:hover { background-color: #f5f5f5; }

.info-note {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: #FFF8E1;
    border-left: 4px solid #FFC107;
    border-radius: 0 6px 6px 0;
    font-size: 0.9rem;
}

/* === Modul-Kacheln (Startseite) === */
.module-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.module-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem 1.25rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
}

/* Dezenter Shimmer-Effekt beim Hover */
.module-tile::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, var(--primary-5), transparent);
    transition: left 0.5s ease;
}
.module-tile:hover::before { left: 100%; }

.module-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--primary-30);
    border-color: var(--primary-green);
}

.module-tile-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-green);
    border-radius: 14px;
    margin-bottom: 0.875rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.module-tile:hover .module-tile-icon {
    transform: scale(1.08);
    box-shadow: 0 4px 12px var(--primary-50);
}

.module-tile-icon svg {
    width: 28px;
    height: 28px;
    color: white;
}

.module-tile-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-dark);
    text-align: center;
}

.module-tile-desc {
    font-size: 0.75rem;
    color: #78909c;
    margin-top: 0.25rem;
    text-align: center;
}

.module-tile-settings .module-tile-icon { background: #546E7A; }
.module-tile-settings:hover { border-color: #546E7A; box-shadow: 0 8px 24px rgba(84, 110, 122, 0.2); }

.module-tile-logout .module-tile-icon { background: #78909C; }
.module-tile-logout:hover { border-color: #c62828; box-shadow: 0 8px 24px rgba(198, 40, 40, 0.15); }
.module-tile-logout:hover .module-tile-icon { background: #c62828; }

@media (max-width: 600px) {
    .module-tiles { grid-template-columns: repeat(2, 1fr); }
    .chart-grid { grid-template-columns: 1fr !important; }
}

/* === Dashboard-Grid (Startseite) === */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}
@media (max-width: 1200px) { .dashboard-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px)  { .dashboard-grid { grid-template-columns: 1fr; } }
.dashboard-col { display: flex; flex-direction: column; gap: 1rem; }
.dashboard-card { max-width: none; text-align: left; border-left: none; }

.dashboard-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.dashboard-section-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.1rem;
}
.dashboard-section-header h2 svg { color: var(--primary-green); }

.dashboard-stat-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--primary-5);
    border-radius: 6px;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #546e7a;
}
.dashboard-stat-highlight {
    font-weight: 700;
    color: var(--primary-green);
    font-size: 1rem;
}

.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.dashboard-table th {
    text-align: left;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #90a4ae;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--primary-30);
}
.dashboard-table td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
}
.dashboard-table tr:hover td { background: var(--primary-5); }
.dashboard-table tr.overdue td { color: #c62828; }

.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-fg); padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.badge-info    { background: var(--color-info-bg);    color: var(--color-info-fg);    padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger-fg);  padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.badge-success { background: var(--color-success-bg); color: var(--color-success-fg); padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
/* Fehlte, obwohl benutzt: der Entwurfsstatus im Newsletter stand deshalb als
   nackter Text zwischen lauter Abzeichen. */
.badge-secondary { background: #eceff1; color: #546e7a; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }

.empty-text { color: #90a4ae; font-style: italic; font-size: 0.9rem; padding: 1rem 0; }

/* =============================================================
   .notice-banner — globale Hinweis-/Status-Komponente
   Modifier: --info | --warning | --danger | --success
   Slots: __icon, __content (__title, __body), __actions
   ============================================================= */
/* hidden-Attribut muss greifen - sonst überschreibt display:flex das [hidden]
   und das Banner (z.B. KI-Vorschlag) bleibt sichtbar, obwohl es aus ist. */
.notice-banner[hidden] {
    display: none;
}
.notice-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border-left: 4px solid var(--color-info-fg);
    background: var(--color-info-bg);
    color: var(--color-info-fg);
    margin: 0.75rem 0;
    font-size: 0.9rem;
    line-height: 1.4;
}
.notice-banner--warning { border-left-color: var(--color-warning-fg); background: var(--color-warning-bg); color: var(--color-warning-fg); }
.notice-banner--danger  { border-left-color: var(--color-danger-fg);  background: var(--color-danger-bg);  color: var(--color-danger-fg); }
.notice-banner--success { border-left-color: var(--color-success-fg); background: var(--color-success-bg); color: var(--color-success-fg); }

.notice-banner__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
}
.notice-banner__content { flex: 1; min-width: 0; }
.notice-banner__title {
    font-weight: 600;
    margin-bottom: 0.2rem;
    word-wrap: break-word;
}
.notice-banner__body {
    color: var(--text-dark);
    opacity: 0.92;
    word-wrap: break-word;
}
.notice-banner__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.notice-banner__actions .btn {
    font-size: 0.85rem;
    padding: 0.3rem 0.7rem;
}
@media (max-width: 600px) {
    .notice-banner { flex-wrap: wrap; }
    .notice-banner__actions { width: 100%; margin-top: 0.4rem; }
}

/* Veranstaltungs-Karten auf Dashboard */
.dashboard-events { display: flex; flex-direction: column; gap: 0.75rem; }
a.dashboard-event-card {
    text-decoration: none;
    color: inherit;
    display: block;
}
.dashboard-event-card {
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 3px solid var(--primary-green);
    transition: background 0.15s, box-shadow 0.15s;
}
.dashboard-event-card:hover {
    background: var(--primary-5);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.dashboard-event-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.dashboard-event-header strong { font-size: 0.9rem; color: var(--text-dark); }
.dashboard-event-date { font-size: 0.8rem; color: #546e7a; white-space: nowrap; }
.dashboard-event-meta { font-size: 0.78rem; color: #78909c; margin-bottom: 0.5rem; }

.dashboard-event-stats {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
.dashboard-event-stat {
    flex: 1;
    text-align: center;
    padding: 0.3rem 0.25rem;
    background: white;
    border-radius: 4px;
}
.stat-num  { display: block; font-size: 1.1rem; font-weight: 700; color: #333; }
.stat-label { display: block; font-size: 0.65rem; color: #90a4ae; text-transform: uppercase; letter-spacing: 0.03em; }
.stat-success .stat-num { color: var(--primary-green); }
.stat-danger  .stat-num { color: #c62828; }
.stat-muted   .stat-num { color: #90a4ae; }
.stat-extern  .stat-num { color: #f57c00; }

.dashboard-event-bar {
    display: flex;
    height: 4px;
    border-radius: 2px;
    background: #e0e0e0;
    margin-top: 0.4rem;
    overflow: hidden;
}
.bar-zugesagt { background: var(--primary-green); transition: width 0.3s; }
.bar-abgesagt { background: #ef5350; transition: width 0.3s; }

/* Formularfeld-Auswertung in Veranstaltungs-Karten */
.dashboard-event-fields {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #ddd;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.dashboard-field-group { }
.dashboard-field-question {
    font-size: 0.8rem;
    font-weight: 600;
    color: #37474f;
    margin-bottom: 0.2rem;
}
.dashboard-field-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}
.dashboard-field-name {
    font-size: 0.78rem;
    color: #37474f;
    min-width: 70px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard-field-bar-wrap {
    flex: 1;
    height: 6px;
    background: #e8ecef;
    border-radius: 3px;
    overflow: hidden;
    min-width: 30px;
}
.dashboard-field-bar {
    height: 100%;
    background: var(--primary-green);
    border-radius: 3px;
    transition: width 0.3s;
    min-width: 2px;
}
.dashboard-field-count {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-green);
    min-width: 20px;
    text-align: right;
}

/* === E-Mail-Sektion (Startseite) === */
.email-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.email-section-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.25rem;
}

.email-section-header h2 svg { color: var(--primary-green); }

.email-badge {
    background: #e53935;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    margin-left: 0.25rem;
}

.email-list-home {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.email-item-home {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.email-item-home:hover { background: var(--primary-10); }

.email-item-home.unread {
    background: #fff;
    border-left: 3px solid var(--primary-green);
}

.email-item-home.unread .email-item-subject {
    font-weight: 700;
    color: #000;
}

.email-item-content { flex: 1; min-width: 0; }

.email-item-subject {
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-item-from {
    font-size: 0.8rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-item-date {
    font-size: 0.75rem;
    color: #888;
    margin-left: 1rem;
    white-space: nowrap;
}

.empty-text {
    color: #888;
    text-align: center;
    padding: 1rem;
}

/* ==================== Buchhaltungs-Berichte ====================
   GuV, Bilanz, Saldenliste und Voranmeldung im Bericht-Modal. Die Stile
   standen zuvor als Inline-Attribute im JavaScript (feste Farbwerte wie
   #c62828, "2px solid #333"), wodurch sie weder der Vereinsfarbe folgten
   noch im Druck sinnvoll aussahen. */

.bericht-block + .bericht-block {
    margin-top: var(--spacing-lg, 1.5rem);
}

.bericht-titel {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-sm, 0.5rem) 0;
}

.bericht-tabelle {
    width: 100%;
    border-collapse: collapse;
}

.bericht-tabelle th,
.bericht-tabelle td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.bericht-tabelle th {
    text-align: left;
    font-weight: 600;
    background: var(--bg-subtle, #f7f7f7);
}

.bericht-tabelle .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bericht-tabelle .anteil {
    text-align: right;
    color: var(--text-muted, #777);
    font-size: 0.85em;
    white-space: nowrap;
}

.bericht-tabelle tr.summe td {
    border-top: 2px solid var(--text-color, #333);
    border-bottom: none;
    font-weight: 700;
}

.bericht-leer {
    color: var(--text-muted, #888);
    font-style: italic;
}

.bericht-ergebnis {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacing-md, 1rem);
    margin-top: var(--spacing-lg, 1.5rem);
    padding: var(--spacing-md, 1rem);
    background: var(--bg-subtle, #f5f5f5);
    border-radius: var(--radius-md, 8px);
    font-size: 1.15rem;
}

.bericht-hinweis {
    color: var(--text-muted, #666);
    font-size: 0.9em;
    margin-bottom: var(--spacing-md, 1rem);
}

.bericht-warnung {
    padding: 0.6rem 0.8rem;
    margin-bottom: var(--spacing-md, 1rem);
    border-left: 3px solid var(--warning-color, #ef6c00);
    background: var(--bg-subtle, #fff8e1);
    font-size: 0.9em;
}

.bericht-zweispaltig {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg, 2rem);
}

@media (max-width: 768px) {
    .bericht-zweispaltig { grid-template-columns: 1fr; }
}

/* Der Berichtsinhalt scrollt in sich, damit Kopf und Fußzeile des Modals
   stehen bleiben. Stand vorher als Inline-Style auf der .gm-body - was die
   Druckregel unten nicht mehr aufheben könnte. */
.bericht-body {
    max-height: 70vh;
    overflow-y: auto;
}

/* ===================================================================
   Drucken

   Ein offener Bericht ist der Druckgegenstand - nicht die Seite dahinter.
   Ohne diese Regeln landeten Navigation, Tabs und der abgedunkelte
   Hintergrund des Modals mit auf dem Papier, und der Bericht wurde auf
   die 70vh seines Scrollbereichs abgeschnitten.
   =================================================================== */

@media print {
    .bericht-tabelle th { background: none; }
    .bericht-ergebnis { background: none; border: 1px solid var(--text-dark); }

    /* Alles ausblenden, dann allein den Kasten des offenen Modals
       zurückholen. */
    body:has(.gm-overlay:not(.hidden)) * { visibility: hidden; }

    body:has(.gm-overlay:not(.hidden)) .gm-overlay:not(.hidden) .gm-box,
    body:has(.gm-overlay:not(.hidden)) .gm-overlay:not(.hidden) .gm-box * {
        visibility: visible;
    }

    body:has(.gm-overlay:not(.hidden)) .gm-overlay:not(.hidden) {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: block;
        padding: 0;
        background: none;
        overflow: visible;
    }

    .gm-overlay:not(.hidden) .gm-box {
        max-width: none;
        width: 100%;
        max-height: none;
        box-shadow: none;
        border: none;
    }

    /* Schließen-Kreuz und Schaltflächen gehören nicht auf Papier, und der
       Inhalt darf über mehrere Seiten laufen. */
    .gm-overlay .gm-close,
    .gm-overlay .gm-footer { display: none !important; }

    .gm-body,
    .bericht-body {
        max-height: none;
        overflow: visible;
    }

    /* Eine Tabellenzeile soll nicht über den Seitenumbruch zerfallen. */
    .bericht-tabelle tr { break-inside: avoid; }
    .bericht-block { break-inside: auto; }
}

/* ==================== Berichte-Tab ====================
   Eine Zeile je Bericht mit Zweck und den Ausgabewegen, die es dafür gibt.
   Vorher lagen dieselben Berichte in drei KPI-Kacheln verteilt (CSV, PDF,
   Anzeigen) - Namen tauchten mehrfach auf und die Kachel-Optik liess nicht
   erkennen, was welcher Knopf tut. */

.berichte-jahr {
    color: var(--text-muted, #666);
    font-size: 0.9rem;
}

.berichte-liste {
    display: flex;
    flex-direction: column;
    margin-top: var(--spacing-md, 1rem);
    /* Die Karte zentriert ihren Inhalt - Fliesstext und Bezeichnungen gehören
       aber linksbündig, sonst steht die Überschrift über der Erklärung versetzt. */
    text-align: left;
}

.berichte-abschluss { text-align: left; }

.berichte-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md, 1rem);
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color, #e8e8e8);
}

.berichte-zeile:last-child { border-bottom: none; }

.berichte-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.berichte-text strong { font-weight: 600; }

.berichte-text span {
    color: var(--text-muted, #777);
    font-size: 0.85rem;
}

.berichte-aktionen {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.berichte-abschluss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md, 1rem);
    margin-top: var(--spacing-lg, 1.5rem);
    padding-top: var(--spacing-md, 1rem);
    border-top: 2px solid var(--border-color, #e0e0e0);
}

.berichte-abschluss-kopf h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
}

.berichte-abschluss-aktionen {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .berichte-zeile,
    .berichte-abschluss {
        flex-direction: column;
        align-items: flex-start;
    }
    .berichte-aktionen { width: 100%; }
}

/* ===================================================================
   Budget: Plan-Ist-Vergleich
   Die Farbe trägt hier Bedeutung, deshalb eigene Zustandsklassen statt
   einer einzigen Akzentfarbe: was bei einer Einnahme gut ist (Balken
   voll), ist bei einer Ausgabe genau die Überschreitung.
   =================================================================== */

/* Die Kennzahlkacheln des Budgets stehen im globalen Baustein
   kennzahlen.css (.kennzahl mit .kennzahl-streifen-*). */

/* Einnahmen über Ausgaben statt nebeneinander: sechs Spalten (Konto,
   Bezeichnung, Plan, Ist, Abweichung, Zielerreichung) brauchen die volle
   Breite - nebeneinander wurden Beträge und Balken abgeschnitten. */
.budget-spalten {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg, 1.5rem);
    text-align: left;
}

.budget-spalte { min-width: 0; }

.budget-spalte-titel {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.budget-balken {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
}

.budget-balken-spur {
    flex: 1;
    display: flex;
    height: 8px;
    border-radius: 4px;
    background: var(--border-color, #e8e8e8);
    overflow: hidden;
}

.budget-balken-fuellung {
    height: 100%;
    border-radius: 4px;
    /* Nur transform animieren wäre bei einer Breitenangabe nicht möglich;
       der Balken entsteht einmal beim Rendern und wird nicht nachanimiert. */
    background: var(--text-muted, #777);
}

.budget-balken-fuellung.budget-gut { background: var(--success-color, #28a745); }
.budget-balken-fuellung.budget-neutral { background: var(--warning-color, #ef6c00); }
.budget-balken-fuellung.budget-schwach { background: #b0793a; }
.budget-balken-fuellung.budget-ueber { background: var(--danger-color, #dc3545); }

/* Der noch erwartete Teil: dieselbe Farbe, aber schraffiert und blass - er
   zeigt, was feststeht, aber noch nicht eingegangen ist. Bewusst kein eigener
   Farbton, sonst liest man zwei verschiedene Sachverhalte hinein. */
.budget-balken-erwartet {
    height: 100%;
    opacity: 0.4;
    background-image: repeating-linear-gradient(
        45deg,
        currentColor 0, currentColor 3px,
        transparent 3px, transparent 6px
    );
}

.budget-balken-erwartet.budget-gut { color: var(--success-color, #28a745); }
.budget-balken-erwartet.budget-neutral { color: var(--warning-color, #ef6c00); }
.budget-balken-erwartet.budget-schwach { color: #b0793a; }
.budget-balken-erwartet.budget-ueber { color: var(--danger-color, #dc3545); }

/* Betrag in der Spalte "Noch erwartet". */
.budget-erwartet { color: var(--warning-color, #ef6c00); }

.budget-balken-wert {
    font-size: 0.8rem;
    color: var(--text-muted, #777);
    min-width: 3.2em;
    text-align: right;
}

.budget-ohne-plan {
    color: var(--text-muted, #999);
    font-size: 0.85rem;
}

.budget-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: normal;
}

@media (max-width: 700px) {
    .budget-kennzahl-ist { font-size: 1.25rem; }
    .budget-balken { min-width: 90px; }
}

/* Hinweistext direkt unter einem Eingabefeld im Modal: die .form-group trägt
   den Rahmen, der Hinweis steht deshalb außerhalb - dann aber ohne den
   vollen Absatzabstand. */
.gm-body > .field-hint {
    margin: -0.5rem 0 var(--spacing-md, 1rem);
    font-size: 0.82rem;
}

.gm-body > .budget-checkbox { margin-bottom: var(--spacing-md, 1rem); }

/* ===================================================================
   Jahr-Umschalter: ein Element, das beim Tabwechsel in den Kopf des
   aktiven Tabs wandert (bilanz-jahr.js).
   =================================================================== */

.jahr-umschalter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.jahr-umschalter-label {
    font-size: 0.85rem;
    color: var(--text-muted, #666);
    white-space: nowrap;
}

/* Im Dashboard-Hero steht der Umschalter über dem Einnahmen-/Ausgabenbalken -
   dort erklärt der Zusammenhang sich selbst, die Beschriftung wäre Ballast. */
.fin-hero-right .jahr-umschalter-label { display: none; }
.fin-hero-right .jahr-umschalter { width: 100%; justify-content: flex-end; }

.jahr-anker { display: contents; }

@media (max-width: 700px) {
    .jahr-umschalter-label { display: none; }
}

/* ===================================================================
   Jahressperre: gilt für das ganze Modul, deshalb ein Banner über allen
   Tabs statt einer Statuszeile in den Berichten.
   =================================================================== */

.jahr-sperre {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    margin-bottom: var(--spacing-md, 1rem);
    border-left: 3px solid var(--warning-color, #ef6c00);
    background: var(--bg-subtle, #fff8e1);
    border-radius: 6px;
    text-align: left;
}

.jahr-sperre .icon {
    flex-shrink: 0;
    color: var(--warning-color, #ef6c00);
}

.jahr-sperre-text {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.jahr-sperre-text strong { font-weight: 600; }

.jahr-sperre-text span {
    font-size: 0.85rem;
    color: var(--text-muted, #666);
}

/* Gesperrte Bedienelemente bleiben sichtbar, aber sichtbar unbenutzbar: wer
   sie sucht, soll sie finden und verstehen, warum sie nicht gehen. */
[data-jahr-sperre][disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Statuszeile im Berichte-Tab. Vorher als Inline-Style im JavaScript, damit
   außerhalb jeder Farbumstellung. */
.abschluss-gesperrt {
    color: var(--primary-green);
    font-weight: 600;
}

/* ===================================================================
   Dashboard-Auswertungen: Monatsverlauf und Fälligkeitsstruktur
   =================================================================== */

.fin-auswertungen {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-md, 1rem);
    margin-top: var(--spacing-md, 1rem);
}

/* ===================================================================
   Karten und Diagrammflächen des Finanzmoduls.

   Die Basis-.card ist zentriert, 2rem gepolstert und in der Breite
   begrenzt - für Tabellen und Diagramme passt keines der drei. Vorher
   stand die Korrektur als identischer Inline-Style an acht Karten und
   das Padding kam damit vom Kind statt vom Container.
   =================================================================== */

.card.fin-card {
    text-align: left;
    max-width: none;
    padding: var(--spacing-lg, 1.5rem);
}

/* Karten mit einer Tabelle brauchen seitlich mehr Luft als die Spalte
   der Diagramme. */
.card.fin-card-tabelle { padding: 1.5rem 2rem; }

.fin-card > h3 { margin: 0 0 var(--spacing-md, 1rem) 0; }

/* Überschrift, unter der direkt ein erklärender Satz steht - dort wäre der
   volle Abstand eine Lücke zwischen zwei zusammengehörenden Zeilen. */
.fin-card > h3.fin-card-titel-eng { margin-bottom: 0.25rem; }

/* Kopfzeile und Tabelle sind zwei Blöcke, nicht einer. */
.fin-card > .view-controls + .table-container { margin-top: 0.5rem; }

/* ===================================================================
   Kontenaufstellung: alle Konten mit ihren Salden.

   Aufbau von oben nach unten: die Probe (Soll gleich Haben), dann eine
   Karte je Kontoklasse mit Saldo und Anteilsbalken, dann die vollständige
   Tabelle. Der Blick soll bei der Probe anfangen - stimmt sie nicht, ist
   alles darunter fragwürdig.
   =================================================================== */

/* Die Kennzahlkacheln der Kontenaufstellung stehen im globalen Baustein
   kennzahlen.css (.kennzahl mit .kennzahl-streifen-*). */

/* Klassenkarten. Als Schaltflächen, weil sie die Tabelle filtern - das muss
   auch mit der Tastatur erreichbar sein. */
.konten-klassen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 0.75rem;
    margin-bottom: var(--spacing-md, 1rem);
}

.konten-klasse {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.7rem 0.85rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
}

.konten-klasse:hover {
    border-color: var(--primary-50);
    transform: translateY(-1px);
}

.konten-klasse:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
}

.konten-klasse-aktiv {
    border-color: var(--primary-green);
    background: var(--primary-10);
}

/* Klassen ohne jede Bewegung treten zurück - sie sind Teil des Rahmens, aber
   nicht Teil des Geschehens. */
.konten-klasse-leer { opacity: 0.6; }

.konten-klasse-kopf {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.konten-klasse-nr {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--primary-20);
    font-size: 0.75rem;
    font-weight: 700;
}

.konten-klasse-name {
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.konten-klasse-saldo {
    font-size: 1.05rem;
    font-weight: 600;
}

.konten-klasse-spur {
    height: 4px;
    border-radius: 2px;
    background: var(--border-color);
    overflow: hidden;
}

.konten-klasse-fuellung {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--primary-green);
}

.konten-klasse-detail {
    font-size: 0.75rem;
    color: var(--text-muted, #777);
}

/* Umschalter in der Kopfzeile. */
.konten-schalter {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
}

/* Nullwerte und Zusätze treten zurück, damit die echten Zahlen hervortreten. */
.konten-null { color: var(--text-muted, #999); }

.konten-zusatz {
    color: var(--text-muted, #777);
    font-size: 0.8em;
}

@media (max-width: 700px) {
    .konten-klassen { grid-template-columns: 1fr 1fr; }
    .konten-kennzahl-wert { font-size: 1.15rem; }
}

/* ===================================================================
   Vorschau des Buchungssatzes im Erfassungsdialog.

   Sie zeigt vor dem Speichern, was tatsächlich gebucht wird - der
   wirksamste Schutz davor, Soll und Haben zu vertauschen. Wer nie
   Buchhaltung gelernt hat, erkennt den Fehler am fertigen Satz, nicht an
   zwei Auswahlfeldern.
   =================================================================== */

.buchung-vorschau {
    margin-top: var(--spacing-md, 1rem);
    padding: 0.75rem 1rem;
    background: var(--primary-5);
    border-left: 3px solid var(--primary-green);
    border-radius: 6px;
    font-size: 0.9rem;
}

.buchung-vorschau-leer {
    color: var(--text-muted, #777);
    font-size: 0.85rem;
}

.buchung-vorschau-zeile {
    display: grid;
    grid-template-columns: 3.5rem 1fr auto;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.15rem 0;
}

.buchung-vorschau-seite {
    font-weight: 600;
    color: var(--text-muted, #666);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Kontospalte der Buchungsliste: führt zum Auszug des Kontos. Unterstrichen
   erst beim Überfahren, sonst wirkt die ganze Spalte wie ein Formular. */
.konto-auszug-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--primary-30);
}

.konto-auszug-link:hover,
.konto-auszug-link:focus-visible {
    color: var(--primary-green);
    border-bottom-style: solid;
}

/* Höhe je Diagramm über --chart-h, Standard 220px. position:relative ist
   Pflicht: Chart.js misst daran seine Zeichenfläche - und der Hinweis unten
   legt sich daran aus. */
.fin-chart-box {
    height: var(--chart-h, 220px);
    position: relative;
}

/* Zusatz in der Diagrammüberschrift, wenn der Ring etwas anderes zeigt als
   erwartet (z.B. Vorgeschriebenes statt Geflossenem). */
.chart-titel-zusatz {
    margin-left: 0.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--bg-subtle, #fff8e1);
    color: var(--warning-color, #ef6c00);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

/* Auflage über der Diagrammfläche: benennt den Grund, wenn nichts zu zeichnen
   ist. Das Canvas bleibt darunter erhalten. */
.chart-hinweis {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1rem;
    color: var(--text-muted, #666);
    font-size: 0.9rem;
    background: var(--card-bg);
}

.faelligkeit-liste {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 0.75rem;
}

.faelligkeit-zeile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.faelligkeit-kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.88rem;
}

.faelligkeit-spur {
    height: 6px;
    border-radius: 3px;
    background: var(--border-color, #e8e8e8);
    overflow: hidden;
}

.faelligkeit-fuellung {
    height: 100%;
    border-radius: 3px;
    background: var(--text-muted, #90A4AE);
}

/* Je älter die Forderung, desto dringender - die Farbe sagt das, ohne dass
   man die Beschriftung lesen muss. */
.faelligkeit-nicht_faellig .faelligkeit-fuellung { background: var(--success-color, #28a745); }
.faelligkeit-bis30 .faelligkeit-fuellung { background: #f2b705; }
.faelligkeit-bis90 .faelligkeit-fuellung { background: var(--warning-color, #ef6c00); }
.faelligkeit-ueber90 .faelligkeit-fuellung { background: var(--danger-color, #dc3545); }

.faelligkeit-anzahl {
    font-size: 0.78rem;
    color: var(--text-muted, #90A4AE);
}

.faelligkeit-summe {
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color, #e8e8e8);
    font-size: 0.9rem;
}

@media (max-width: 1100px) {
    .fin-auswertungen { grid-template-columns: 1fr; }
}

/* === kennzahlen.css === */
/* ===================================================================
   Kennzahlkacheln - der globale Baustein für "Zahl mit Beschriftung"

   Wozu es diese Datei gibt: Dieselbe Kachel war fünfmal eigenständig
   gebaut (fin-kpi, ze-kpi, budget-kennzahl, konten-kennzahl, sa-kpi),
   jede mit eigenem Raster, eigenem Radius und eigenem Schatten. Wer
   eine Korrektur brauchte, musste sie fünfmal machen - und die Module
   sahen an derselben Aussage unterschiedlich aus.

   Aufbau:
     <div class="kennzahl-grid">
       <div class="kennzahl">
         <span class="kennzahl-icon kennzahl-icon-gruen"><svg .../></span>
         <span class="kennzahl-label">Offene Rechnungen</span>
         <span class="kennzahl-wert">12.480,00 EUR</span>
         <span class="kennzahl-detail">davon 3 überfällig</span>
       </div>
     </div>

   Varianten (auf dem Raster oder der Kachel):
     .kennzahl-grid-auto     Spalten passen sich der Breite an
     .kennzahl-grid-kompakt  schmale Kacheln nebeneinander
     .kennzahl-icon-links    Icon steht links neben Beschriftung und Wert
     .kennzahl-streifen      farbiger Streifen links statt Icon
     .kennzahl-mitte         Beschriftung und Wert zentriert
   =================================================================== */

.kennzahl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    /* Abstand nach unten gehört dazu: sonst klebt der nächste Bereich an
       den Kacheln, und jedes Modul zieht sich den Abstand selbst nach. */
    margin: 1rem 0 1.25rem;
}

/* Spaltenzahl aus der verfügbaren Breite statt fest vier: für Leisten,
   die je nach Modul drei, fünf oder sieben Werte tragen. */
.kennzahl-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.kennzahl-grid-kompakt {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.kennzahl {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Ausrichtung gehört zur Kachel, nicht zum Umfeld: sonst zieht ein
       zentrierter Bereich (Budget, Kontenaufstellung) die Beträge in die
       Mitte, während dieselbe Kachel anderswo links steht. */
    text-align: left;
    align-items: stretch;
}

.kennzahl:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* --- Icon ---------------------------------------------------------- */

.kennzahl-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
    flex-shrink: 0;
}

.kennzahl-icon svg {
    width: 18px;
    height: 18px;
    color: white;
}

.kennzahl-icon-gruen  { background: var(--primary-green); }
.kennzahl-icon-rot    { background: var(--danger-color, #e53935); }
.kennzahl-icon-orange { background: var(--warning-color, #ff9800); }
.kennzahl-icon-blau   { background: #1976d2; }
.kennzahl-icon-lila   { background: #7b1fa2; }

/* Icon links: Beschriftung und Wert rücken daneben in eine eigene Spalte. */
.kennzahl-icon-links {
    flex-direction: row;
    align-items: center;
    gap: 0.875rem;
}

.kennzahl-icon-links .kennzahl-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin-bottom: 0;
}

.kennzahl-icon-links .kennzahl-icon svg {
    width: 20px;
    height: 20px;
}

.kennzahl-icon-links .kennzahl-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

/* --- Text ---------------------------------------------------------- */

.kennzahl-label {
    font-size: 0.8rem;
    color: var(--text-muted, #90a4ae);
    font-weight: 500;
}

.kennzahl-wert {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.2;
}

.kennzahl-detail {
    font-size: 0.72rem;
    color: var(--text-muted, #90a4ae);
}

/* Der Wert selbst trägt die Farbe, wenn die Zahl eine Bewertung ist
   (fehlgeschlagene Anmeldungen, verdächtige Adressen). Getrennt vom
   Streifen, damit eine Kachel auch nur eines von beidem haben kann. */
.kennzahl-wert-gruen    { color: var(--success-color, #4caf50); }
.kennzahl-wert-orange   { color: var(--warning-color, #ff9800); }
.kennzahl-wert-rot      { color: var(--danger-color, #f44336); }
.kennzahl-wert-kritisch { color: #b71c1c; }

/* Hinweis in einer Kachel, der eine Lücke benennt (z.B. Beiträge ohne
   Rechnung). Auffällig genug, um gelesen zu werden, ohne wie ein Fehler
   auszusehen. */
.kennzahl-warnung {
    margin-top: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--warning-color, #ef6c00);
}

/* Zusatzzeile, die einen noch offenen Teil benennt (vorgeschrieben, aber
   nicht bezahlt). Farbig, aber ohne das Gewicht einer Warnung. */
.kennzahl-hinweis {
    font-size: 0.85rem;
    color: var(--warning-color, #ef6c00);
}

/* Zweite Zahl, die aus der ersten folgt (Prognose, Hochrechnung). */
.kennzahl-nebenwert {
    font-size: 0.95rem;
    font-weight: 600;
}

/* --- Fortschritt --------------------------------------------------- */

.kennzahl-fortschritt {
    height: 5px;
    background: var(--border-color, #e0e0e0);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 0.15rem;
}

.kennzahl-fortschritt-balken {
    height: 100%;
    background: var(--primary-green);
    border-radius: 3px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Farbstreifen statt Icon --------------------------------------- */
/* Die Farbe trägt hier Bedeutung (Plan gehalten, Plan überschritten).
   Der Streifen ordnet zu, ohne die ganze Fläche einzufärben - der
   Betrag bleibt so am besten lesbar. */

.kennzahl-streifen {
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: var(--border-color, #e8e8e8);
}

.kennzahl-streifen-gruen  { border-left-color: var(--success-color, #28a745); }
.kennzahl-streifen-rot    { border-left-color: var(--danger-color, #dc3545); }
.kennzahl-streifen-orange { border-left-color: var(--warning-color, #ef6c00); }
.kennzahl-streifen-blau   { border-left-color: var(--primary-green); }

/* --- Kompakt und zentriert ----------------------------------------- */

.kennzahl-mitte {
    text-align: center;
    align-items: center;
}

.kennzahl-grid-kompakt .kennzahl {
    padding: 0.75rem;
    gap: 0.2rem;
}

.kennzahl-grid-kompakt .kennzahl-label { font-size: 0.75rem; }
.kennzahl-grid-kompakt .kennzahl-wert  { font-size: 1.5rem; }

/* Statistik-Leiste: schmale Kacheln, die sich nach Inhalt bemessen
   statt ein Raster zu füllen. */
.kennzahl-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.kennzahl-leiste .kennzahl {
    padding: 0.6rem 0.9rem;
    gap: 0.15rem;
    min-width: 100px;
    flex: 0 1 auto;
}

.kennzahl-leiste .kennzahl-icon { width: 28px; height: 28px; margin-bottom: 0.1rem; }
.kennzahl-leiste .kennzahl-icon svg { width: 14px; height: 14px; }
.kennzahl-leiste .kennzahl-label { font-size: 0.72rem; }

/* --- Schmale Anzeigen ---------------------------------------------- */

@media (max-width: 900px) {
    .kennzahl-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* === toasts.css === */
/* =============================================================
   TOASTS — Toast-Benachrichtigungen
   ============================================================= */

/* === Globales Toast-System === */
#toast-container {
    position: fixed;
    top: 64px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    max-width: 400px;
    pointer-events: auto;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-left: 4px solid #90A4AE;
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast.hide {
    transform: translateX(100%);
    opacity: 0;
}

.toast-success { border-left-color: var(--hover-green); }
.toast-error   { border-left-color: #f44336; }
.toast-warning { border-left-color: #FF9800; }
.toast-info    { border-left-color: #2196F3; }

.toast-success .toast-icon { color: var(--hover-green); }
.toast-error   .toast-icon { color: #f44336; }
.toast-warning .toast-icon { color: #FF9800; }
.toast-info    .toast-icon { color: #2196F3; }

.toast-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.toast-icon svg { width: 100%; height: 100%; }

.toast-message {
    flex: 1;
    font-size: 0.95rem;
    color: var(--text-dark);
    line-height: 1.4;
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: #90A4AE;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.toast-close:hover { color: var(--text-dark); }

/* Toast-Action-Buttons (z.B. Rueckgaengig nach Move) */
.toast-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.toast-action-btn {
    border: 1px solid var(--border-color);
    background: white;
    color: var(--text-dark);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.toast-action-btn:hover { background: var(--primary-5); border-color: var(--primary-30); }

.toast-action-primary   { border-color: var(--primary-green); color: var(--primary-green); }
.toast-action-primary:hover { background: var(--primary-green); color: white; }

.toast-action-secondary { border-color: var(--border-color); color: var(--text-dark); }

.toast-action-danger    { border-color: var(--color-danger-fg); color: var(--color-danger-fg); }
.toast-action-danger:hover { background: var(--color-danger-fg); color: white; }

@media (max-width: 500px) {
    #toast-container {
        left: 10px;
        right: 10px;
        top: 70px;
    }
    .toast {
        min-width: auto;
        max-width: none;
    }
}

/* === mitglieder.css === */
/* =============================================================
   MITGLIEDER — Detailansicht, editierbare Felder, Navigation
   ============================================================= */

/* === Mitglied-Header-Navigation === */
.mitglied-header-navigation {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.2rem;
    background-color: #f7f9fc;
    transition: background-color 0.2s;
    border-bottom: 2px solid var(--primary-green);
    padding: 0.75rem;
    border-radius: 8px;
}

.nav-arrow {
    background: none;
    border: 1px solid var(--primary-green);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.nav-arrow:hover {
    background-color: var(--primary-green);
    border-color: #90A4AE;
}

.mitglied-header-center {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-grow: 1;
    min-width: 0;
    border-radius: 8px;
}

/* ID-Badges */
#mitglied-id-display,
#veranstaltung-id-display,
#auftrag-id-display {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background-color: var(--primary-green);
    white-space: nowrap;
    border-radius: 14px;
    width: 50px;
    height: 36px;
    align-content: center;
    text-align: center;
}

/* Name-Header */
#mitglied-name-header,
#veranstaltung-name-header,
#auftrag-name-header {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
}

#mitglied-name-header,
#mitglied-name-header .display-value,
#mitglied-name-header input,
#mitglied-name-header .field-input {
    font-size: 1.5rem !important;
    font-weight: 600;
}

#veranstaltung-name-header .field-input {
    font-size: 1.5rem !important;
    font-weight: 600;
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    padding: 0;
    font-family: inherit;
    color: var(--text-dark);
}
#veranstaltung-name-header {
    flex: 1;
    min-width: 0;
}
#veranstaltung-name-header .editable-field {
    flex: 1;
    min-width: 0;
    display: flex !important;
}

#auftrag-name-header .field-input {
    font-size: 1.5rem !important;
    font-weight: 600;
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    padding: 0;
    font-family: inherit;
    color: var(--text-dark);
}
#auftrag-name-header {
    flex: 1;
    min-width: 0;
}
#auftrag-name-header .editable-field {
    min-width: 0;
}

/* Name-Header Row */
.name-header-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.name-header-row .editable-field {
    display: inline-block;
    border: 1px solid transparent !important;
    border-radius: 8px;
    padding: 10px 12px !important;
    margin: 0 !important;
    cursor: pointer;
    position: relative;
    background-color: #f7f9fc;
    min-width: 0;
}

/* Vorname: schrumpft auf Inhaltslänge */
#mitglied-vorname {
    flex: 0 0 auto;
}

#mitglied-vorname input.field-input {
    width: 4ch;
    min-width: 3ch;
    box-sizing: content-box;
}

/* Nachname: bekommt den restlichen Platz */
#mitglied-nachname {
    flex: 1 1 0;
}

.name-header-row .editable-field .display-value,
.name-header-row .editable-field .field-input {
    font-size: 1.6rem;
    font-weight: 600;
}

#mitglied-nachname .field-input {
    width: 100%;
    box-sizing: border-box;
}

.name-header-row .editable-field:hover {
    background-color: rgba(0,0,0,0.05);
    border-radius: 4px;
}

/* Letzte Aktualisierung */
.letzte-aktualisierung {
    font-size: 0.8rem;
    color: #6c757d;
    text-align: right;
    white-space: nowrap;
    margin-left: auto;
}

/* === Detail-Grid === */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Detail-Kacheln: gleicher Style wie .form-chapter */
.detail-column,
.full-width-section {
    background-color: var(--page-bg);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

/* Abstand zwischen Kacheln unterhalb des detail-grid */
.detail-grid + .full-width-section,
.detail-grid + .form-chapter,
.full-width-section + .full-width-section,
.full-width-section + .form-chapter,
.form-chapter + .full-width-section,
.full-width-section + .form-row,
.full-width-section + .detail-actions,
.form-chapter + .form-row,
.form-row + .form-chapter,
.form-row + .full-width-section {
    margin-top: 1rem;
}

/* === Seitenlayout: Hauptcard + Sidebar-Card nebeneinander === */
.mitglied-page-layout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.mitglied-page-layout > #mitglieder-card {
    flex: 1;
    min-width: 0;
}

.mitglied-sidebar-card {
    width: 420px;
    flex-shrink: 0;
    padding: 1rem;
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sidebar-section {
    background-color: var(--page-bg);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.sidebar-section .form-chapter-title {
    margin-bottom: 0.75rem;
}

.sidebar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}
.sidebar-btn .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.sidebar-btn:last-of-type { margin-bottom: 0; }

.sidebar-section .anmerkung-input-container {
    flex-direction: column;
}
.sidebar-section .anmerkung-input-container textarea {
    min-height: 60px;
    font-size: 0.85rem;
}
.sidebar-section .anmerkung-input-container .btn {
    align-self: flex-end;
}
.sidebar-section .anmerkungen-liste {
    max-height: 400px;
    overflow-y: auto;
}

.detail-actions {
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* === Anmerkungen === */
.anmerkung-input-container {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.anmerkung-input-container textarea { flex-grow: 1; height: 40px; }
.anmerkung-input-container .btn     { height: 40px; flex-shrink: 0; }

.anmerkungen-liste {
    max-height: 450px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
}

.anmerkung-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-bottom: 1px solid #f0f0f0;
    gap: 0.5rem;
}

.anmerkung-item:last-child { border-bottom: none; }
.anmerkung-item:hover      { background-color: #f8f9fa; }

.anmerkung-text {
    flex: 1;
    word-break: break-word;
}

.anmerkung-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.2s;
}

.anmerkung-item:hover .anmerkung-actions { opacity: 1; }

/* === Deaktivierter Zustand === */
#mitglied-details-content.is-disabled .editable-field,
#mitglied-details-content.is-disabled .detail-actions {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

#mitglied-details-content.is-disabled #mitglied-name-header {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

#veranstaltung-details-content.is-disabled .editable-field,
#veranstaltung-details-content.is-disabled .display-field,
#veranstaltung-details-content.is-disabled .full-width-section {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

#veranstaltung-details-content.is-disabled #veranstaltung-name-header {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

#auftrag-details-content.is-disabled .editable-field,
#auftrag-details-content.is-disabled .display-field,
#auftrag-details-content.is-disabled .detail-actions,
#auftrag-details-content.is-disabled .full-width-section {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

#auftrag-details-content.is-disabled #auftrag-name-header {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* === Editierbare Felder === */
.editable-field {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 1rem;
    background-color: var(--card-bg);
    cursor: text;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.editable-field:hover {
    border-color: var(--primary-30);
    box-shadow: 0 0 0 2px var(--primary-5);
}

.display-field {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 1rem;
    background-color: var(--page-bg);
}

/* Schwebendes Label über dem Feld */
.editable-field .label-below,
.display-field .label-below {
    position: absolute;
    top: -10px;
    left: 10px;
    max-width: calc(100% - 25px);
    width: fit-content;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-green);
    background-color: var(--card-bg);
    padding: 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Anzeige-Wert (für display-fields und Spezialfelder) */
.editable-field .display-value,
.display-field .display-value {
    font-size: 1rem;
    min-height: 1.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* === Echte Input-Felder (field-input) === */
.editable-field .field-input {
    width: 100%;
    border: none;
    background-color: transparent;
    font-family: inherit;
    font-size: 1rem;
    padding: 0;
    margin: 0;
    outline: none;
    box-sizing: border-box;
    color: var(--text-dark);
}

.editable-field input.field-input {
    height: 24px;
}

/* Native <select> in editable-field: den Browser-eigenen Pfeil durch das
   globale CI-Chevron ersetzen, sonst wird das Feld nativ gerendert (schwarzer
   Pfeil) statt wie die übrigen Dropdowns. */
.editable-field select.field-input {
    height: 24px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 1.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390a4ae' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 14px;
}

.editable-field textarea.field-input {
    height: auto;
    min-height: 4rem;
    resize: vertical;
    white-space: pre-wrap;
}

/* Focus-Indikator: grüner Border */
.editable-field:focus-within {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 2px var(--primary-10);
    background-color: var(--card-bg);
}

/* Select-Felder: Chevron-Indikator */
.editable-field[data-type="select"]::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390a4ae' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-size: contain;
    opacity: 0.4;
    pointer-events: none;
}
.editable-field[data-type="select"]:hover::after { opacity: 0.7; }
.editable-field[data-type="select"] { cursor: pointer; }

/* EUR-Label im Number-Editor */
.editor-currency-label {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-green);
    pointer-events: none;
    opacity: 0.7;
}

/* Custom-Dropdown: Basis-Styles und Container-Overrides in forms.css (global) */

/* Spezielle Hervorhebungen */
.editable-field[data-field="funktionen"],
.display-field[data-field="mitgliedsbeitrag"] {
    border: 1px solid var(--primary-green);
    background-color: var(--primary-10);
}

#open-custom-fields-modal-btn,
#einladung-feld,
.response-details-trigger {
    border: 1px solid var(--primary-green);
    background-color: var(--primary-10);
}

#open-custom-fields-modal-btn:hover,
#einladung-feld:hover,
.response-details-trigger:hover {
    background-color: var(--primary-30);
}

/* Deaktivierte Hervorhebungen */
#veranstaltung-details-content.is-disabled #open-custom-fields-modal-btn,
#veranstaltung-details-content.is-disabled #einladung-feld,
#veranstaltung-details-content.is-disabled .response-details-trigger {
    border: 1px solid var(--primary-green);
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background-color: var(--primary-10);
}

#mitglied-details-content.is-disabled .editable-field[data-field="funktionen"],
#mitglied-details-content.is-disabled .display-field[data-field="mitgliedsbeitrag"] {
    border: 1px solid var(--primary-green);
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background-color: var(--primary-10);
}

/* Feld mit Icon */
.field-with-icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.field-with-icon .display-value,
.field-with-icon .field-input,
.field-with-icon .editor { flex: 1; min-width: 0; }

.icon-button {
    flex-shrink: 0;
    margin-left: 0.75rem;
    color: var(--primary-green);
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.icon-button:hover  { opacity: 1; }
.icon-button.hidden { display: none; }

/* === Erkannte Zweitadresse: Knopf rechts neben dem E-Mail-Feld === */
/* Unterkanten von Feldkasten und Knopf fluchten: den Feld-Abstand trägt
   in dieser Zeile der Zeilencontainer, nicht das Feld selbst. */
.email-zeile                   { align-items: flex-end; margin-bottom: 1rem; }
.email-zeile .editable-field   { margin-bottom: 0; }
.alias-hinweis-platz           { flex-shrink: 0; }

/* Dauerhafter Knopf. Nur wenn Vorschläge offen sind, wechselt er in die
   Warnfarbe und blinkt - sonst ein ruhiger Knopf wie jeder andere. */
.alias-hinweis-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.alias-hinweis-btn.hat-vorschlaege {
    border-color: var(--color-warning-fg, #e65100);
    color: var(--color-warning-fg, #e65100);
    animation: alias-blinken 1.6s ease-in-out infinite;
}

.alias-hinweis-btn.hat-vorschlaege:hover {
    animation-play-state: paused;
    background: var(--color-warning-fg, #e65100);
    color: #fff;
}

/* Nur Deckkraft animieren - Rahmen und Beschriftung bleiben ruhig lesbar. */
@keyframes alias-blinken {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

/* === Fenster: weitere E-Mail-Adressen === */
.alias-block { margin-bottom: 1.25rem; }
.alias-block:last-of-type { margin-bottom: 0.75rem; }

.alias-block h4 {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7a8592;
}

.alias-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    margin-bottom: 0.4rem;
    background: #fff;
}
.alias-zeile.haupt      { background: var(--page-bg, #f7f9fc); }
.alias-zeile.vorschlag  { border-color: var(--color-warning-border, #ffcc80); }

.alias-zeile-info        { min-width: 0; }
.alias-zeile-info strong { display: block; overflow-wrap: anywhere; font-size: 0.9rem; }
.alias-zeile-info span   { font-size: 0.78rem; color: #7a8592; }
.alias-zeile-aktionen    { display: flex; gap: 0.4rem; flex-shrink: 0; }

.alias-leer {
    margin: 0 0 0.5rem;
    font-size: 0.84rem;
    color: #7a8592;
}

.alias-neu {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.alias-neu .form-control { flex: 1; }

.alias-fusstext {
    margin: 0;
    font-size: 0.78rem;
    color: #7a8592;
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
    .alias-hinweis-btn { animation: none; }
}

.alias-kandidaten-hinweis {
    margin: 0 0 1rem;
    color: var(--text-muted, #6c757d);
    font-size: 0.9rem;
}

.alias-kandidat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.alias-kandidat-info        { min-width: 0; }
.alias-kandidat-info strong { display: block; overflow-wrap: anywhere; }
.alias-kandidat-info span   { font-size: 0.82rem; color: var(--text-muted, #6c757d); }
.alias-kandidat-aktionen    { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* Disabled-Zustand: Inputs deaktiviert */
.editable-field input:disabled,
.editable-field textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.editable-field input.form-control {
    padding-top: 10px;
}

/* Custom-Dropdown ersetzt natives <select> */

/* Mitglieder-Link */
.member-link {
    color: var(--primary-green);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}

.member-link:hover {
    color: var(--hover-green);
    text-decoration: underline;
}

/* === Historie-Modal === */
.historie-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.historie-item:last-child { border-bottom: none; }

.historie-meta {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.historie-meta strong { color: var(--text-dark); }

.historie-aenderung {
    font-size: 0.95rem;
    line-height: 1.5;
}

.historie-aenderung .feld-name  { font-weight: 600; color: var(--primary-green); }
.historie-aenderung .alter-wert { text-decoration: line-through; color: #e53935; margin-left: 0.5rem; }
.historie-aenderung .neuer-wert { color: #43a047; margin-left: 0.5rem; }

/* Gruppierte Historie */
.historie-gruppe {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.historie-gruppe:last-child { border-bottom: none; }

.historie-gruppe-header {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.historie-gruppe-header strong { color: var(--text-dark); }

.historie-gruppe-aenderungen {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.historie-einzelaenderung {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--border-color);
    border-radius: 0 4px 4px 0;
}

.historie-einzelaenderung:hover {
    background-color: #f8f9fa;
}

.historie-einzelaenderung .historie-aenderung {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Undo-Button (Hover-sichtbar wie bei Anmerkungen) */
.historie-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.2s;
    margin-left: 0.5rem;
}

.historie-einzelaenderung:hover .historie-actions { opacity: 1; }

/* Neuanlage-Einträge */
.historie-neuanlage {
    background: rgba(67, 160, 71, 0.06);
    border-left: 3px solid #43a047;
}

.historie-neuanlage .historie-gruppe-header { color: #2e7d32; }
.historie-neuanlage .historie-gruppe-header strong { color: #2e7d32; }
.historie-neuanlage .historie-einzelaenderung { border-left-color: rgba(67, 160, 71, 0.3); }

/* Jahr-Badge in der Historie */
.historie-jahr-badge {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary-green);
    background: var(--primary-5);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    margin-left: 0.35rem;
    white-space: nowrap;
}

/* =============================================================
   MOBILE RESPONSIVE
   ============================================================= */
@media (max-width: 1100px) {
    .mitglied-page-layout {
        flex-direction: column;
    }
    .mitglied-sidebar-card {
        width: 100%;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .mitglied-sidebar-card .sidebar-section { flex: 1; min-width: 250px; }
}

@media (max-width: 768px) {
    /* --- Detail-Grid: einspaltrig --- */
    .detail-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .mitglied-sidebar-card {
        flex-direction: column;
    }
    .mitglied-sidebar-card .sidebar-section { min-width: 0; }

    /* --- Mitglied-Header: kompakter --- */
    .mitglied-header-navigation {
        gap: 0.5rem;
        padding: 0.5rem;
    }

    /* --- Name-Header: Schriftgröße reduzieren --- */
    .name-header-row .editable-field .display-value,
    .name-header-row .editable-field .field-input {
        font-size: 1.2rem;
    }

    #mitglied-name-header,
    #mitglied-name-header .display-value,
    #mitglied-name-header input,
    #mitglied-name-header .field-input {
        font-size: 1.2rem !important;
    }

    /* --- Letzte Aktualisierung ausblenden auf Mobil --- */
    .letzte-aktualisierung {
        display: none;
    }

    /* --- Detail-Actions: umbrechen --- */
    .detail-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* --- Nav-Arrows kleiner --- */
    .nav-arrow {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    /* --- ID-Badge kleiner --- */
    #mitglied-id-display,
    #veranstaltung-id-display,
    #auftrag-id-display {
        width: 40px;
        height: 30px;
        font-size: 0.85rem;
    }
}

@media (max-width: 479px) {
    /* --- Name-Header: stapeln --- */
    .name-header-row {
        flex-wrap: wrap;
    }

    .name-header-row .editable-field .display-value,
    .name-header-row .editable-field .field-input {
        font-size: 1rem;
    }
}

/* === email-layout.css === */
/* =============================================================
   EMAIL-LAYOUT — E-Mail-Client Layout, Sidebar, Nachrichten
   ============================================================= */

/* === Vollbild-Wrapper === */
.email-client-wrapper {
    position: fixed;
    top: 52px;
    left: var(--nav-width-collapsed, 0);
    right: 0;
    bottom: 44px;
    background: #f5f5f5;
    z-index: 10;
}

.email-client-layout {
    display: flex;
    height: 100%;
    background: white;
    overflow: hidden;
}

/* === Sidebar / Ordnerliste === */
/* Breite wird über den Griff eingestellt (spalten.js) und im Browser
   gemerkt. Die Grenzen hier müssen zu den Werten dort passen, sonst
   blockiert die Mindestbreite das Schmalziehen. */
.email-sidebar {
    width: 232px;
    min-width: 170px;
    max-width: 420px;
    flex: 0 0 232px;
    background: #f8f9fa;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
}

.email-sidebar-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e0e0e0;
    margin-top: auto;
}

.email-compose-btn {
    width: 100%;
    background: var(--primary-green);
    color: var(--text-light);
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.2s;
}

.email-compose-btn:hover { background: var(--hover-green); }
.email-compose-btn svg   { width: 16px; height: 16px; }

.email-folder-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.email-folder-item {
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
    gap: 0.75rem;
    color: #333;
    text-decoration: none;
}

.email-folder-item:hover  { background: #e9ecef; }
.email-folder-item.active { background: var(--primary-green); color: var(--text-light); }
.email-folder-item.drag-over { background: #d4edda; border: 2px dashed var(--primary-green); }

.email-folder-icon { width: 18px; height: 18px; opacity: 0.7; }
.email-folder-item.active .email-folder-icon { opacity: 1; }

.email-folder-name {
    flex: 1;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-folder-count {
    font-size: 0.8rem;
    background: rgba(0, 0, 0, 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
}

.email-folder-item.active .email-folder-count { background: rgba(255, 255, 255, 0.2); }

/* Folder-Badge, Divider, Section-Title */
.folder-badge {
    font-size: 0.75rem;
    background: var(--primary-green);
    color: var(--text-light);
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.folder-add {
    opacity: 0.7;
    margin-top: 0.5rem;
    border-top: 1px solid #e0e0e0;
    padding-top: 1rem;
}
.folder-add:hover { opacity: 1; }

.folder-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 0.5rem 1rem;
}

.folder-section-title {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    padding: 0.5rem 1rem 0.25rem;
    letter-spacing: 0.05em;
}

/* =============================================================
   Ordnerbaum: beliebig tiefe Unterordner
   Die Einrückung steckt als Zahl (--tiefe) an der Zeile, damit keine
   feste Klasse je Ebene die Verschachtelung begrenzt.
   ============================================================= */
.ordner-gruppe-titel {
    padding: 0.6rem 0.9rem 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #7a8592;
}

/* Festes Raster: so fluchten Symbole und Zahlen über alle Ebenen. */
.ordner-zeile {
    display: grid;
    grid-template-columns: 16px 18px 1fr auto;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.75rem 0.32rem 0;
    padding-left: calc(var(--tiefe, 0) * 14px);
    margin: 1px 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    color: #333;
    transition: background 0.15s, color 0.15s;
}

.ordner-zeile:hover { background: rgba(16, 22, 30, 0.055); }

.ordner-zeile.aktiv {
    background: #e8f2e9;
    color: #1b5e20;
    font-weight: 600;
}

/* Akzentkante statt Vollfläche: markiert den Ordner, ohne die Spalte zu
   dominieren. */
.ordner-zeile.aktiv::before {
    content: "";
    position: absolute;
    left: -0.25rem;
    top: 0.3rem;
    bottom: 0.3rem;
    width: 3px;
    border-radius: 2px;
    background: var(--primary-green);
}

.ordner-klapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: none;
    color: #7a8592;
    cursor: pointer;
    transition: transform 0.15s;
}
.ordner-klapper .icon  { width: 11px; height: 11px; }
.ordner-klapper.leer   { visibility: hidden; }
.ordner-zeile.zu > .ordner-klapper { transform: rotate(-90deg); }

/* Flex statt Inline: ein SVG im Textfluss sitzt sonst auf der Grundlinie
   und steht dadurch leicht versetzt zum Ordnernamen. */
.ordner-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #7a8592;
}
.ordner-symbol .icon { width: 16px; height: 16px; display: block; }
.ordner-zeile.aktiv .ordner-symbol { color: var(--primary-green); }

.ordner-name {
    font-size: 0.86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ordner-zahl {
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    color: #7a8592;
    min-width: 18px;
    text-align: right;
}
.ordner-zahl.ungelesen {
    background: var(--primary-green);
    color: var(--text-light);
    border-radius: 9px;
    padding: 1px 6px;
    font-weight: 600;
}

/* Punkte-Knopf: der einzige sichtbare Weg zu Umbenennen und Löschen.
   In der schmalen Seitenspalte darf er dem Ordnernamen keinen Platz
   wegnehmen, deshalb liegt er außerhalb des Rasters und legt sich beim
   Überfahren über die Zahl. Am Touch-Gerät und am schmalen Bildschirm gibt
   es kein Überfahren - dort steht er dauerhaft in der Zeile, denn dort ist
   die Spalte bildschirmbreit. */
.ordner-aktionen {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: #f8f9fa;
    box-shadow: -6px 0 6px #f8f9fa;
    color: #7a8592;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s, background-color 0.12s;
}
.ordner-aktionen .icon { width: 14px; height: 14px; display: block; }
.ordner-zeile:hover > .ordner-aktionen,
.ordner-aktionen:focus-visible {
    opacity: 1;
    pointer-events: auto;
}
.ordner-aktionen:hover { background: #eef0f2; }

@media (pointer: coarse), (max-width: 900px) {
    .ordner-zeile { grid-template-columns: 16px 18px 1fr auto auto; }
    .ordner-aktionen {
        position: static;
        transform: none;
        opacity: 1;
        pointer-events: auto;
        width: 30px;
        height: 30px;
        background: none;
        box-shadow: none;
    }
    .ordner-aktionen .icon { width: 16px; height: 16px; }
}

/* Ungelesenes im Spam-Ordner will man sehen - dort steht die Zahl in der
   Warnfarbe, damit sie sich von normaler Post unterscheidet. */
.ordner-zeile[data-folder-type="spam"] .ordner-zahl.ungelesen {
    background: var(--color-warning-fg, #e65100);
}

/* Papierkorb und Archiv dagegen nie hervorheben: was dort liegt, ist
   erledigt oder weggeräumt - eine grüne Blase mit 111 lenkt nur ab. */
.ordner-zeile[data-folder-type="trash"] .ordner-zahl,
.ordner-zeile[data-folder-type="archive"] .ordner-zahl {
    background: none;
    color: #7a8592;
    padding: 0;
    font-weight: 400;
}

/* Führungslinie je Ebene - macht die Zugehörigkeit auch bei schmaler
   Spalte sichtbar. */
.ordner-kinder { position: relative; }
.ordner-kinder::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 2px;
    left: calc(20px + (var(--tiefe, 1) - 1) * 14px);
    width: 1px;
    background: #dfe3e8;
}
.ordner-kinder.zu { display: none; }

.ordner-zeile.wird-gezogen { opacity: 0.4; }

/* Mitte der Zeile: hineinlegen (wird Unterordner) */
.ordner-zeile.ziel {
    background: #e8f2e9;
    box-shadow: inset 0 0 0 2px var(--primary-green);
}

/* Oberer und unterer Rand: daneben einsortieren. Der Balken zeigt an, auf
   welcher Ebene der Ordner landet - so kommt er auch wieder herauf. */
.ordner-zeile.ziel-davor,
.ordner-zeile.ziel-danach { position: relative; }
.ordner-zeile.ziel-davor::after,
.ordner-zeile.ziel-danach::after {
    content: "";
    position: absolute;
    left: calc(var(--tiefe, 0) * 14px);
    right: 0.5rem;
    height: 3px;
    border-radius: 2px;
    background: var(--primary-green);
}
.ordner-zeile.ziel-davor::after  { top: -2px; }
.ordner-zeile.ziel-danach::after { bottom: -2px; }

/* =============================================================
   Ziehbare Spaltenbreiten
   Ruhezustand: nur die Trennlinie. Beim Zeigen und Ziehen wird der
   Griff sichtbar - dezent, aber auffindbar.
   ============================================================= */
/* 11 Pixel Trefferfläche: bei 5 Pixeln erwischte man beim Zielen regelmäßig
   die Nachrichtenzeile daneben und startete deren Verschieben statt das
   Ziehen der Spalte. Sichtbar bleibt trotzdem nur die feine Linie. */
.spalten-griff {
    position: relative;
    flex: 0 0 11px;
    margin: 0 -3px;
    cursor: col-resize;
    background: transparent;
    touch-action: none;
    user-select: none;
    z-index: 5;
}
.spalten-griff::before {
    content: "";
    position: absolute;
    inset: 0 5px;
    background: #e0e0e0;
    transition: background 0.15s, transform 0.15s;
}
.spalten-griff:hover::before,
.spalten-griff:focus-visible::before,
.spalten-griff.zieht::before {
    background: var(--primary-green);
    transform: scaleX(1.6);
}
.spalten-griff::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 26px;
    margin: -13px 0 0 -1.5px;
    border-radius: 2px;
    background: #c3c9d0;
    opacity: 0;
    transition: opacity 0.15s;
}
.spalten-griff:hover::after,
.spalten-griff.zieht::after { opacity: 1; }
.spalten-griff:focus-visible { outline: none; }

body.spalte-wird-gezogen {
    cursor: col-resize;
    user-select: none;
}

/* Zweite Hauptaktion der Ordnerspalte: Beschriftung bleibt, Farbfläche
   entfällt - dadurch entsteht eine Rangfolge zur ersten Aktion. */
.email-zweit-btn {
    width: 100%;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #fff;
    color: #1b5e20;
    border: 1px solid #cfd4da;
    font-weight: 600;
}
.email-zweit-btn:hover {
    border-color: var(--primary-green);
    background: #e8f2e9;
}

@media (prefers-reduced-motion: reduce) {
    .ordner-zeile,
    .ordner-klapper,
    .spalten-griff::before,
    .spalten-griff::after { transition: none; }
}

/* === E-Mail Main Area === */
.email-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.email-toolbar {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    gap: 1rem;
}

.email-toolbar-left   { display: flex; align-items: center; gap: 0.5rem; }
.email-toolbar-center { flex: 1; max-width: 400px; }
.email-toolbar-right  { color: #666; font-size: 0.85rem; }

.email-content-area {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* === Nachrichtenliste === */
.email-message-list {
    width: 380px;
    min-width: 240px;
    max-width: 640px;
    flex: 0 0 380px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.email-list-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f8f9fa;
}

.email-search-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
}

.email-list-content { flex: 1; overflow-y: auto; }

/* Nachrichten-Item */
.email-message-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    padding-left: 0.75rem;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}

.email-message-item:hover   { background: #f5f5f5; }
.email-message-item.active  { background: #d0e8ff; border-left: 4px solid #1565c0; }
.email-message-item.unread  { font-weight: 600; }
.email-message-item.dragging { opacity: 0.5; background: #e0e0e0; }

.email-message-item.unread:not(.active) {
    border-left: 3px solid var(--primary-green);
    background: #f1f8e9;
}

.email-message-item.unread .email-message-subject {
    font-weight: 700;
    color: #000;
}

/* Checkbox */
.email-message-checkbox {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}

.email-message-item:hover .email-message-checkbox,
.email-message-item.selected .email-message-checkbox,
.has-selection .email-message-checkbox { opacity: 1; }
.email-message-checkbox:checked        { opacity: 1; }

.email-message-content { flex: 1; min-width: 0; }

.email-message-subject {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-message-sender {
    font-size: 0.8rem;
    font-weight: 400;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-message-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.email-message-date      { font-size: 0.75rem; color: #888; }
.email-message-flags     { display: flex; gap: 0.25rem; }
.email-flag              { font-size: 0.8rem; }

/* Stern */
.email-message-star { color: #ccc; cursor: pointer; font-size: 1rem; transition: color 0.15s; padding: 0.25rem; }
.email-message-star:hover   { color: #ffc107; }
.email-message-star.starred { color: #ffc107; }
.email-attachment-icon      { color: #888; }

/* Spam-Marker neben dem Subject in der Mail-Liste */
.email-message-flag {
    display: inline-flex;
    align-items: center;
    margin-right: 0.35rem;
    vertical-align: -0.15em;
}
.email-message-flag svg {
    width: 14px;
    height: 14px;
}
/* Eigenes Gelb statt --color-warning-fg (#e65100, wirkt rot in kleinen Icons).
   Material Amber 700 ist klar gelb auf weiss lesbar. */
.email-message-flag--warning { color: #f9a825; }
.email-message-flag--danger  { color: var(--color-danger-fg); }

/* Hover: Datum durch Löschen-Button ersetzen */
.email-message-delete-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: #888;
    margin-left: 0.5rem;
    transition: all 0.15s;
}

.email-message-item:hover .email-message-delete-btn { display: flex; }
.email-message-delete-btn:hover                      { background: #ffebee; color: #c62828; }
.email-message-item:hover .email-message-date        { display: none; }

.email-message-meta .email-message-star                              { opacity: 0.5; }
.email-message-item:hover .email-message-meta .email-message-star,
.email-message-meta .email-message-star.starred                      { opacity: 1; }

/* === Fussbereich der Liste: Nachladen === */
.email-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: var(--text-muted, #6c757d);
    border-top: 1px solid var(--border-color, #e0e0e0);
}

/* === Skeleton Loading === */
.email-message-skeleton {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #eee;
}

.skeleton-checkbox,
.skeleton-star,
.skeleton-sender,
.skeleton-subject,
.skeleton-preview,
.skeleton-date {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-checkbox { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.skeleton-star     { width: 18px; height: 18px; flex-shrink: 0; }
.skeleton-content  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.skeleton-sender   { width: 40%; height: 14px; }
.skeleton-subject  { width: 70%; height: 13px; }
.skeleton-preview  { width: 90%; height: 12px; }
.skeleton-date     { width: 60px; height: 12px; flex-shrink: 0; }

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === Vorschau-Panel === */
.email-preview-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.email-preview-header {
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f9fa;
}

.email-preview-subject { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.75rem; color: #333; }

.email-preview-meta {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.email-preview-from  { font-weight: 500; }
.email-preview-to    { color: #666; font-size: 0.9rem; }
.email-preview-date  { margin-left: auto; color: #888; font-size: 0.85rem; white-space: nowrap; }

.email-preview-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
}

.email-action-btn {
    padding: 0.4rem 0.75rem;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.15s;
}
.email-action-btn:hover         { background: #f0f0f0; border-color: #ccc; }
.email-action-btn.danger:hover  { background: #fee; border-color: #dc3545; color: #dc3545; }

.email-preview-body {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    background: white;
}

.email-preview-body iframe { width: 100%; min-height: 300px; border: none; }

.email-preview-attachments {
    padding: 0.75rem 1rem;
    border-top: 1px solid #e0e0e0;
    background: #f8f9fa;
}

.email-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.email-attachment-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}
.email-attachment-item:hover { background: #f0f0f0; border-color: var(--primary-green); }

.email-preview-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #888;
}

.email-preview-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.email-preview-content .preview-header      { flex-shrink: 0; }
.email-preview-content .preview-info        { flex-shrink: 0; }
.email-preview-content .preview-attachments { flex-shrink: 0; }
.email-preview-content .preview-body        { flex: 1; overflow-y: auto; }

/* Preview Placeholder */
.preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}
.preview-placeholder svg { margin-bottom: 1rem; }

/* Spam-Ordner: Archivieren ist nicht erlaubt - Spam wird nur gelöscht.
   Die Klasse wird beim Ordnerwechsel auf <body> gesetzt (folders.js). */
body.email-spam-folder-active #archive-btn,
body.email-spam-folder-active #preview-archive-btn {
    display: none !important;
}

/* === email-extras.css === */
/* =============================================================
   EMAIL-EXTRAS — Folder Mapping, Loading, Context-Menu, Mobile
   ============================================================= */

/* === Folder Mapping (Einstellungen) === */
.folder-mapping { border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; }

.folder-mapping-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e0e0e0;
}
.folder-mapping-item:last-child { border-bottom: none; }
.folder-mapping-icon svg        { width: 16px; height: 16px; }
.folder-mapping-name            { flex: 1; }

.folder-type-badge {
    font-size: 0.75rem;
    background: #e9ecef;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    color: #666;
}

/* Ordner verschieben */
.move-folder-list { max-height: 300px; overflow-y: auto; }

.move-folder-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 4px;
}
.move-folder-item:hover { background: #f0f0f0; }
.move-folder-item svg   { flex-shrink: 0; width: 18px; height: 18px; }

/* === Rotating (Refresh-Button) === */
.rotating svg { animation: rotate 1s linear infinite; }

@keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* === Loading === */
.email-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #888;
}
.email-loading .spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e0e0e0;
    border-top-color: var(--primary-green);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 0.75rem;
}

/* === Externe Bilder geblockt === */
.email-images-blocked-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 4px;
    font-size: 0.82rem;
    color: #666;
    margin-bottom: 4px;
}
.email-images-blocked-banner svg { flex-shrink: 0; color: #f9a825; }

.email-load-images-btn {
    margin-left: auto;
    padding: 0.2rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    color: #333;
    white-space: nowrap;
    transition: background 0.15s;
}
.email-load-images-btn:hover { background: #f0f0f0; }

/* === Spam-Schutz-Banner über dem Mail-Iframe === */
.email-spam-protection-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border);
    border-radius: 4px;
    font-size: 0.82rem;
    color: var(--color-danger-fg);
    margin-bottom: 4px;
    font-weight: 600;
}
.email-spam-protection-banner svg {
    flex-shrink: 0;
    color: var(--color-danger-fg);
    width: 18px;
    height: 18px;
}

/* === Context-Menu === */
.email-context-menu {
    position: fixed;
    z-index: 10000;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.1);
    min-width: 200px;
    padding: 0.5rem 0;
    animation: contextMenuFadeIn 0.15s ease-out;
}

@keyframes contextMenuFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #333;
    transition: background 0.1s;
}
.context-menu-item:hover              { background: #f0f0f0; }
.context-menu-item svg                { flex-shrink: 0; color: #666; }
.context-menu-item.context-menu-danger         { color: #c62828; }
.context-menu-item.context-menu-danger svg     { color: #c62828; }
.context-menu-item.context-menu-danger:hover   { background: #ffebee; }
.context-menu-divider                 { height: 1px; background: #e0e0e0; margin: 0.5rem 0; }

/* Kontextmenü: Untermenü für Filterregeln */
.context-menu-has-submenu {
    position: relative;
}
.context-menu-has-submenu .context-submenu-arrow {
    margin-left: auto;
    color: #999;
}
.context-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -0.5rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.1);
    min-width: 180px;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.5rem 0;
    z-index: 10001;
}
.context-menu-has-submenu:hover .context-submenu {
    display: block;
}
.context-submenu-header {
    padding: 0.4rem 1rem;
    font-size: 0.75rem;
    color: #888;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0.25rem;
    word-break: break-all;
}
.context-submenu-label {
    padding: 0.3rem 1rem;
    font-size: 0.7rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.context-submenu-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: #333;
    transition: background 0.1s;
}
.context-submenu-item:hover {
    background: #e3f2fd;
    color: #1565c0;
}

/* SVG Icons in E-Mail-Client */
.email-folder-icon svg,
.email-compose-btn svg,
.btn svg,
.toolbar-btn svg,
.preview-action-btn svg { vertical-align: middle; flex-shrink: 0; }

.email-sidebar-footer .btn svg { width: 14px; height: 14px; }

/* === Mobile === */
.mobile-back-btn {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    color: var(--primary-green);
    font-size: 0.9rem;
    cursor: pointer;
}
.mobile-back-btn svg { width: 18px; height: 18px; }

.mobile-header {
    display: none;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    gap: 0.75rem;
}

.mobile-header-title {
    flex: 1;
    font-weight: 600;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .email-client-wrapper {
        left: 0;
    }

    .mobile-back-btn { display: flex; }
    .mobile-header   { display: flex; }

    .email-client-layout {
        position: relative;
        height: calc(100vh - 60px);
        overflow: hidden;
    }

    .email-sidebar,
    .email-main,
    .email-message-list,
    .email-preview-panel {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        transition: transform 0.25s ease;
        background: #fff;
        overflow-y: auto;
    }

    /* Auf dem Handy stehen die Bereiche voll­flächig hintereinander, dort
       gibt es nichts zu ziehen - die Griffe verschwinden. */
    .spalten-griff { display: none; }

    .email-sidebar {
        z-index: 10;
        transform: translateX(0);
        border-right: none;
        min-width: 100%; width: 100%; max-width: none;
        flex: 1 1 auto;
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 0; padding-bottom: 70px;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .email-sidebar .email-compose-btn { margin: 1rem; width: calc(100% - 2rem); }
    .email-sidebar .email-folder-list { padding: 0 1rem; }
    .email-sidebar .email-folder-item { margin: 0; }

    .email-client-layout.show-list    .email-sidebar,
    .email-client-layout.show-preview .email-sidebar { transform: translateX(-100%); }

    .email-main { z-index: 20; transform: translateX(100%); display: flex; flex-direction: column; }

    .email-client-layout.show-list    .email-main,
    .email-client-layout.show-preview .email-main { transform: translateX(0); }

    .email-message-list {
        position: relative; z-index: 1; transform: none;
        flex: 1; min-width: 100%; max-width: 100%; border-right: none;
    }

    .email-client-layout.show-preview .email-message-list {
        transform: translateX(-100%);
        position: absolute;
    }

    .email-preview-panel { position: absolute; z-index: 30; transform: translateX(100%); }
    .email-client-layout.show-preview .email-preview-panel { transform: translateX(0); }

    .email-toolbar { flex-wrap: wrap; padding: 0.5rem; }
    .email-toolbar-left,
    .email-toolbar-right { gap: 0.25rem; }

    .email-search-wrapper { order: 3; width: 100%; margin-top: 0.5rem; }
    .email-search-input   { width: 100%; }
    .email-folder-list    { padding: 0.5rem 0; }
    .email-folder-item    { padding: 0.75rem 1rem; margin: 0; }
    .email-message-item   { padding: 0.75rem 1rem; }
    .email-message-preview { display: none; }

    .email-sidebar .email-sidebar-footer {
        position: absolute; bottom: 0; left: 0; right: 0;
        padding: 0.75rem 1rem; border-top: 1px solid #e0e0e0;
        background: #fff; display: flex; justify-content: center; gap: 0.75rem;
    }
    .email-sidebar-footer .btn { flex: 1; max-width: 150px; }
}

@media (max-width: 480px) {
    .email-message-subject { font-size: 0.9rem; }
    .email-message-from    { font-size: 0.8rem; }
    .email-message-date    { font-size: 0.75rem; }
    .preview-actions       { gap: 0.25rem; }
    .preview-action-btn    { padding: 0.4rem; }
    .classic-subject,
    .conversation-subject  { font-size: 1.1rem; }
}

/* Löschen dezenter darstellen - Archivieren ist die Hauptaktion zum Aufräumen.
   Der Lösch-Button bleibt erreichbar, tritt aber optisch zurück. */
.preview-action-btn-subtle,
.email-delete-subtle {
    opacity: 0.5;
}
.preview-action-btn-subtle:hover,
.email-delete-subtle:hover {
    opacity: 1;
}

/* === email-compose.css === */
/* =============================================================
   EMAIL-COMPOSE — Compose-Modal, Attachments, Chat, Signaturen
   ============================================================= */

/* === Compose-Modal === */
.compose-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.compose-modal.active { display: flex; }

.compose-modal-content {
    width: 1200px;
    max-width: 95vw;
    height: 90vh;
    max-height: 90vh;
    background: white;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.compose-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.compose-header {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
}
.compose-header h3 { flex: 1; margin: 0; font-size: 1.1rem; }

.compose-close {
    background: none; border: none; font-size: 1.5rem;
    cursor: pointer; color: #666; padding: 0; line-height: 1;
}
.compose-close:hover { color: #333; }

/* Empfänger-Feld: chip-input + button nebeneinander */
.compose-recipient-field {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex: 1;
    min-width: 0;
    overflow: visible;
}

.compose-recipient-input-wrapper { flex: 1; min-width: 0; position: relative; }
.compose-recipient-input-wrapper .chip-input-container { width: auto; }

.compose-recipient-btn.btn-icon {
    flex-shrink: 0;
    color: var(--primary-green);
}

/* Autocomplete im Compose */
.compose-autocomplete {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--card-bg); border: 1px solid var(--border-color); border-top: none;
    border-radius: 0 0 6px 6px; max-height: 200px; overflow-y: auto;
    z-index: 100; display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.compose-autocomplete.active { display: block; }

.compose-fields {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--border-color);
}

.compose-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}
.compose-field:last-child { border-bottom: none; }
.compose-field > label {
    width: 50px;
    flex-shrink: 0;
    font-weight: 600;
    color: var(--primary-green);
    font-size: 0.85rem;
}
.compose-field input { flex: 1; }

/* Toolbar -> siehe richtext-toolbar.css (.rt-toolbar) */

/* Editor */
.compose-editor {
    flex: 1;
    min-height: 200px;
    padding: 1rem;
    border: 1px solid #e0e0e0; border-radius: 0 0 6px 6px;
    overflow-y: auto; font-size: 0.95rem; line-height: 1.5;
}
.compose-editor:focus      { outline: none; border-color: var(--primary-green); }
.compose-editor.drag-over  { background: #f0fff0; border-color: var(--primary-green); }

/* Footer */
.compose-footer {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #e0e0e0; background: #f8f9fa;
    border-radius: 0 0 8px 8px;
}
.compose-footer .btn { padding: 0.5rem 1rem; }

/* Chip-Input für Empfänger */
.chip-input-container {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    padding: 4px 8px; min-height: 32px; max-height: 90px;
    overflow-y: auto;
    border: 1px solid var(--border-color); border-radius: 6px; background: var(--card-bg);
    cursor: text; width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.chip-input-container:focus-within { border-color: var(--primary-green); box-shadow: 0 0 0 3px var(--primary-30); }
.chip-input-container .email-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; background: var(--primary-5); border: 1px solid var(--primary-20);
    border-radius: 12px; font-size: 0.82rem; white-space: nowrap; max-width: 250px;
}
.chip-input-container .email-chip .chip-name { overflow: hidden; text-overflow: ellipsis; }
.chip-input-container .email-chip .chip-remove {
    cursor: pointer; font-size: 1rem; line-height: 1; color: #666;
    margin-left: 2px; font-weight: 600;
}
.chip-input-container .email-chip .chip-remove:hover { color: #c00; }
.chip-input {
    border: none; outline: none; flex: 1; min-width: 120px;
    font-size: 0.9rem; padding: 2px 0; background: transparent;
}

/* Anhänge im Compose */
.compose-attachments {
    display: none;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 0;
}

.compose-attachment {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 6px;
    font-size: 0.85rem; transition: all 0.15s;
}
.compose-attachment:hover          { background: #fff; border-color: #ccc; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
.compose-attachment.can-preview    { cursor: pointer; }

.attachment-icon  { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }

.attachment-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 0.1rem;
}

.attachment-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.attachment-size { font-size: 0.75rem; color: #888; }

.attachment-actions { display: flex; gap: 0.25rem; margin-left: auto; }

.attachment-preview,
.attachment-remove,
.attachment-remove-btn,
.attachment-preview-btn,
.attachment-download-btn {
    background: none; border: none; cursor: pointer; color: #888;
    padding: 0.25rem; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; line-height: 1;
}

.attachment-preview:hover, .attachment-preview-btn:hover { color: var(--primary-green); background: var(--primary-10); }
.attachment-remove:hover,  .attachment-remove-btn:hover  { color: #dc3545; background: #ffebee; }
.attachment-download-btn:hover                           { color: #2196f3; background: #e3f2fd; }

/* === Preview im alten Stil (Kompat.) === */
.preview-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 1rem; border-bottom: 1px solid #e0e0e0; background: #f8f9fa;
}
.preview-subject { font-size: 1.2rem; font-weight: 600; color: #333; flex: 1; }
.preview-actions { display: flex; gap: 0.25rem; }

.preview-action-btn {
    padding: 0.5rem; background: #f0f0f0; border: none; border-radius: 4px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.preview-action-btn:hover  { background: #e0e0e0; }
.preview-action-btn svg    { width: 16px; height: 16px; }

.preview-info { padding: 1rem; border-bottom: 1px solid #e0e0e0; font-size: 0.9rem; }
.preview-info > div { margin-bottom: 0.25rem; }
.preview-info strong { color: #666; font-weight: 500; }

.preview-body { flex: 1; padding: 1rem; overflow: auto; line-height: 1.6; }
.preview-body pre { white-space: pre-wrap; word-wrap: break-word; font-family: inherit; margin: 0; }

.preview-attachments { padding: 1rem; border-top: 1px solid #e0e0e0; background: #f8f9fa; }

.attachments-header {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.75rem; font-weight: 500; color: #666;
}

.attachments-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.attachment-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.75rem; background: white;
    border: 1px solid #ddd; border-radius: 4px; cursor: pointer; transition: all 0.15s;
}
.attachment-item:hover { background: #e9ecef; border-color: #bbb; }

/* === Zitierter Inhalt === */
.compose-quoted        { margin-top: 0.5rem; border-top: 1px solid #e0e0e0; padding-top: 0.5rem; }

.compose-quoted-toggle,
.preview-quoted-toggle {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.75rem; cursor: pointer;
    color: #666; font-size: 0.85rem; user-select: none; transition: color 0.15s;
}
.compose-quoted-toggle:hover, .preview-quoted-toggle:hover { color: var(--primary-green); }
.compose-quoted-toggle svg, .preview-quoted-toggle svg     { transition: transform 0.2s; }
.compose-quoted-toggle.expanded svg, .preview-quoted-toggle.expanded svg { transform: rotate(180deg); }

.compose-quoted-content {
    padding: 0.75rem 1rem; background: #f8f9fa; border-radius: 6px;
    margin-top: 0.5rem; max-height: 300px; overflow-y: auto;
    font-size: 0.9rem; color: #555; border-left: 3px solid var(--border-color);
}
.compose-quoted-content .email-quote  { border-left: none; padding-left: 0; }
.compose-quoted-content .quote-header { color: #888; margin-bottom: 0.5rem; }

.preview-quoted        { margin-top: 1rem; border-top: 1px solid #e0e0e0; padding-top: 0.75rem; }

.preview-quoted-content {
    padding: 0.75rem 1rem; background: #f8f9fa; border-radius: 6px;
    margin-top: 0.5rem; max-height: 400px; overflow-y: auto;
    font-size: 0.9rem; color: #555; border-left: 3px solid var(--border-color);
}
.preview-quoted-content pre { white-space: pre-wrap; word-break: break-word; margin: 0; font-family: inherit; }

/* Quoted Toggle (Chat / Thread) */
.chat-bubble-quoted    { border-top: 1px solid rgba(0,0,0,0.08); padding-top: 0.5rem; margin-top: 0.5rem; }

.quoted-toggle {
    display: flex; align-items: center; gap: 0.4rem;
    cursor: pointer; font-size: 0.8rem; color: #888;
    padding: 0.25rem 0; user-select: none; transition: color 0.15s;
}
.quoted-toggle:hover           { color: var(--primary-green); }
.quoted-toggle svg             { transition: transform 0.2s; flex-shrink: 0; }
.quoted-toggle.expanded svg    { transform: rotate(180deg); }

.quoted-content { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed rgba(0,0,0,0.1); }

/* === HTML-Vorschau im Compose === */
.compose-html-toggle {
    display: inline-flex; align-items: center; gap: 0.4rem;
    cursor: pointer; font-size: 0.85rem; color: var(--text-secondary);
    user-select: none; margin-right: auto;
}
.compose-html-toggle input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

.compose-editor-row { display: flex; gap: 1rem; flex: 1; min-height: 0; }
.compose-editor-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.compose-modal-wide .modal-content { max-width: 1200px; }

.compose-html-preview {
    flex: 1; display: flex; flex-direction: column; min-width: 0;
    border-left: 1px solid var(--border-color); padding-left: 1rem;
}

.compose-html-preview-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.5rem; font-size: 0.85rem; font-weight: 600;
    color: var(--text-secondary);
}

.compose-preview-iframe {
    width: 100%; flex: 1; min-height: 250px;
    border: 1px solid var(--border-color); border-radius: 6px; background: #fff;
}

.compose-html-preview-loading { display: flex; justify-content: center; padding: 1rem; }

@media (max-width: 768px) {
    .compose-editor-row   { flex-direction: column; }
    .compose-html-preview { border-left: none; border-top: 1px solid var(--border-color); padding-left: 0; padding-top: 0.75rem; }
    .compose-modal-content { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; margin: 0; }
}

/* === Klassische Thread-Ansicht === */
.classic-view { height: 100%; display: flex; flex-direction: column; }

.classic-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 1rem 1.25rem; border-bottom: 1px solid #e0e0e0; background: #fafafa;
}

.classic-subject { font-size: 1.25rem; font-weight: 600; color: #333; flex: 1; margin-right: 1rem; }
.classic-thread  { flex: 1; overflow-y: auto; padding: 0; }

.thread-message        { border-bottom: 1px solid #e8e8e8; }
.thread-message:last-child { border-bottom: none; }

.thread-message-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.75rem 1.25rem; cursor: pointer; transition: background 0.15s;
}
.thread-message-header:hover                    { background: #f5f5f5; }
.thread-message.expanded .thread-message-header { background: var(--primary-5); border-bottom: 1px solid #e0e0e0; }

.thread-message-from { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; }
.thread-message-from .from-name             { font-weight: 600; color: #333; white-space: nowrap; }
.thread-message-from.is-own .from-name      { color: var(--primary-green); }
.thread-message-from .preview-snippet       { color: #888; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

.thread-message-meta { display: flex; align-items: center; gap: 0.5rem; color: #888; font-size: 0.85rem; flex-shrink: 0; }
.thread-message-meta .has-attachment-icon { color: #666; }
.thread-message-meta .expand-icon         { transition: transform 0.2s; }
.thread-message.expanded .expand-icon     { transform: rotate(180deg); }

.thread-message-body  { display: none; padding: 1rem 1.25rem; background: #fff; }
.thread-message.expanded .thread-message-body { display: block; }

.thread-message-details {
    font-size: 0.9rem; color: #555; margin-bottom: 1rem;
    padding-bottom: 0.75rem; border-bottom: 1px solid #eee;
}
.thread-message-details div { margin-bottom: 0.25rem; }

.thread-message-content             { line-height: 1.6; }
.thread-message-content img         { max-width: 100%; height: auto; }
.thread-message-content pre         { white-space: pre-wrap; word-wrap: break-word; font-family: inherit; }

.thread-message-body .chat-bubble-attachments { margin: 0.75rem 0; padding: 0; border-top: none; }

/* === Chat-Bubbles === */
.conversation-header { padding: 1rem 1.5rem; border-bottom: 1px solid #e0e0e0; background: #fafafa; }
.conversation-subject { font-size: 1.25rem; font-weight: 600; color: #333; margin-bottom: 0.25rem; }
.conversation-meta    { font-size: 0.8rem; color: #888; margin-bottom: 0.75rem; }

.conversation-messages {
    padding: 1rem; display: flex; flex-direction: column; gap: 1rem;
    max-height: calc(100vh - 280px); overflow-y: auto;
}

.chat-bubble {
    max-width: 85%; padding: 0.75rem 1rem; border-radius: 12px; position: relative;
}
.chat-bubble-other { align-self: flex-start; background: #f0f0f0; border-bottom-left-radius: 4px; }
.chat-bubble-own   { align-self: flex-end; background: #e3f2fd; border-bottom-right-radius: 4px; }

.chat-bubble-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; gap: 1rem; }
.chat-bubble-cc     { font-size: 0.75rem; color: #888; margin-bottom: 0.35rem; }

.chat-bubble-sender               { font-weight: 600; font-size: 0.85rem; color: #333; }
.chat-bubble-own .chat-bubble-sender { color: #1565c0; }
.chat-bubble-date { font-size: 0.75rem; color: #888; white-space: nowrap; }

.chat-bubble-body              { font-size: 0.9rem; line-height: 1.5; color: #333; word-wrap: break-word; }
.chat-bubble-body .plain-text  { white-space: pre-wrap; font-family: inherit; }
.chat-bubble-body img          { max-width: 100%; height: auto; }
.chat-bubble-body a            { color: #1976d2; }
.chat-bubble-own .chat-bubble-body { color: #1a237e; }

.chat-bubble-attachments { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(0,0,0,0.1); }

.chat-bubble-attachments.compose-attachments {
    background: transparent; padding: 0.75rem 0 0 0; border-top: 1px solid rgba(0,0,0,0.1);
}

.chat-bubble .compose-attachment           { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.1); }
.chat-bubble .compose-attachment:hover     { background: rgba(255,255,255,0.9); border-color: rgba(0,0,0,0.2); }
.chat-bubble-own .chat-bubble-attachments  { border-top-color: rgba(0,0,0,0.08); }
.chat-bubble-own .compose-attachment       { background: rgba(255,255,255,0.5); }
.chat-bubble-own .compose-attachment:hover { background: rgba(255,255,255,0.8); }

/* === Ansichtsmodus-Auswahl === */
.view-mode-toggle { display: flex; gap: 0.75rem; margin-top: 0.5rem; }

.view-mode-option {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1rem; border: 2px solid #e0e0e0; border-radius: 8px;
    cursor: pointer; transition: all 0.2s; flex: 1;
}
.view-mode-option:hover        { border-color: #bbb; background: #f5f5f5; }
.view-mode-option.active       { border-color: var(--primary-green); background: var(--primary-10); }
.view-mode-option input[type="radio"] { display: none; }
.view-mode-option svg          { color: #666; flex-shrink: 0; }
.view-mode-option.active svg   { color: var(--primary-green); }
.view-mode-option span         { font-weight: 500; color: #333; }

/* === Signatur-Verwaltung === */
.signatur-list { display: flex; flex-direction: column; gap: 1rem; }

.signatur-item { border: 1px solid #ddd; border-radius: 6px; padding: 0.75rem; background: #fafafa; }

.signatur-item-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.signatur-item-header .signatur-name { flex: 1; font-weight: 600; }

.signatur-item-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.signatur-standard-label {
    display: flex; align-items: center; gap: 0.25rem;
    font-size: 0.8rem; color: #555; cursor: pointer; white-space: nowrap;
}
.signatur-standard-label input[type="checkbox"] { margin: 0; cursor: pointer; }

.sig-toolbar {
    display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem;
    background: #f0f0f0; border: 1px solid #ddd; border-bottom: none;
    border-radius: 4px 4px 0 0;
}

.sig-toolbar-btn {
    padding: 0.2rem 0.4rem; background: transparent;
    border: 1px solid transparent; border-radius: 3px; cursor: pointer; font-size: 13px; line-height: 1;
}
.sig-toolbar-btn:hover { background: #e0e0e0; }

.sig-color-label { display: flex; align-items: center; gap: 2px; cursor: pointer; font-size: 13px; }
.sig-color-input { width: 20px; height: 20px; border: none; padding: 0; cursor: pointer; background: transparent; }

.signatur-editor {
    min-height: 80px; max-height: 200px; overflow-y: auto;
    padding: 0.5rem; border: 1px solid #ddd; border-radius: 0 0 4px 4px;
    background: white; font-family: Arial, sans-serif; font-size: 13px; line-height: 1.4;
}
.signatur-editor:focus { outline: none; border-color: var(--primary-green); }

/* Signatur/Vorlagen-Dropdown -> siehe richtext-toolbar.css (.rt-dropdown) */

/* === E-Mail-Setup-Wizard === */
.setup-wizard-container {
    max-width: 600px; margin: 2rem auto; padding: 2rem;
    background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.setup-step h2       { margin-bottom: 0.5rem; color: #333; }
.setup-description   { color: #666; margin-bottom: 1.5rem; }

.setup-server-section { margin-bottom: 1.5rem; padding: 1rem; background: #f8f9fa; border-radius: 6px; }
.setup-server-section h3 { margin: 0 0 1rem 0; font-size: 1rem; }

.setup-buttons { display: flex; gap: 0.75rem; margin-top: 1.5rem; justify-content: flex-end; }

.setup-test-result { margin: 1rem 0; padding: 1rem; border-radius: 6px; }
.setup-test-result.testing { background: #fff3cd; border: 1px solid #ffc107; }
.setup-test-result.success { background: #d4edda; border: 1px solid #28a745; }
.setup-test-result.error   { background: #f8d7da; border: 1px solid #dc3545; }
.setup-test-result ul      { margin: 0.5rem 0 0 1.5rem; padding: 0; }

.setup-sync-progress { text-align: center; padding: 2rem; }
.setup-sync-progress .spinner {
    width: 48px; height: 48px;
    border: 4px solid #e0e0e0; border-top-color: var(--primary-green);
    border-radius: 50%; animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

.setup-progress { display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; }

.progress-step {
    width: 32px; height: 32px; border-radius: 50%;
    background: #e0e0e0; color: #666;
    display: flex; align-items: center; justify-content: center; font-weight: 500;
}
.progress-step.active, .progress-step.completed { background: var(--primary-green); color: white; }

.progress-line { width: 40px; height: 2px; background: #e0e0e0; }

/* === Rundschreiben-Tabellen === */
#rs-liste-tabelle,
#rs-empfaenger-tabelle { table-layout: auto; }

#rs-liste-tabelle td,
#rs-empfaenger-tabelle td { white-space: normal; }

/* === richtext-toolbar.css === */
/* =============================================================
   RICHTEXT-TOOLBAR — Dunkle Editor-Toolbar mit gruppierten Buttons
   Basierend auf dem v7-Mockup-Design
   ============================================================= */

/* Toolbar-Container */
.rt-toolbar {
    background: linear-gradient(180deg, #2c3e44 0%, var(--dark-bg) 100%);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    flex-wrap: wrap;
    border-radius: 6px 6px 0 0;
    position: relative;
    z-index: 10;
}

/* Button-Gruppe (Pill) */
.rt-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 3px;
}

/* Standard-Button */
.rt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 7px;
    color: #B0BEC5;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    font-size: 14px;
    position: relative;
    padding: 0;
    line-height: 1;
}
.rt-btn:hover {
    background: rgba(76,175,80,0.2);
    color: #81C784;
    transform: scale(1.08);
}
.rt-btn.active {
    background: rgba(76,175,80,0.3);
    color: #A5D6A7;
}
.rt-btn svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Label-Button (Signatur, Vorlagen) */
.rt-btn-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 9px;
    border: none;
    background: rgba(255,255,255,0.07);
    border-radius: 7px;
    color: #90A4AE;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 11.5px;
    font-family: inherit;
    white-space: nowrap;
    position: relative;
}
.rt-btn-label:hover {
    background: rgba(76,175,80,0.2);
    color: #81C784;
}
.rt-btn-label svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Trennlinie */
.rt-sep {
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,0.1);
    margin: 0 2px;
    flex-shrink: 0;
}

/* Select (Schriftgröße, Schriftart) */
.rt-sel {
    height: 32px;
    padding: 0 22px 0 8px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 7px;
    font-size: 0.78rem;
    font-family: inherit;
    color: #B0BEC5;
    background-color: rgba(255,255,255,0.06);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2390A4AE'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}
.rt-sel:hover {
    border-color: rgba(76,175,80,0.4);
    background-color: rgba(255,255,255,0.1);
}
.rt-sel option {
    background: var(--dark-bg);
    color: #ECEFF1;
}

/* Split-Color-Button (Farbe + Pfeil) */
.rt-color-split {
    display: inline-flex;
    align-items: center;
    border-radius: 7px;
    position: relative;
    height: 32px;
}
.rt-color-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 7px 0 0 7px;
    color: #B0BEC5;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    padding: 0;
}
.rt-color-main:hover {
    background: rgba(76,175,80,0.2);
    color: #81C784;
}
.rt-color-letter {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}
.rt-color-bar {
    position: absolute;
    bottom: 4px;
    left: 5px;
    right: 2px;
    height: 3px;
    border-radius: 2px;
}
.rt-color-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 0 7px 7px 0;
    color: #78909C;
    cursor: pointer;
    padding: 0;
}
.rt-color-arrow:hover {
    background: rgba(76,175,80,0.2);
    color: #81C784;
}
.rt-color-arrow svg {
    width: 9px;
    height: 9px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
}

/* Popup (Farb-Palette, Tabelle, Emoji) */
.rt-popup {
    display: none;
    position: fixed;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    z-index: 9999;
}
.rt-popup.open { display: block; }

.rt-popup-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 8px;
}

/* Farbpalette Grid */
.rt-color-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 3px;
    margin-bottom: 8px;
    width: 200px;
}
.rt-color-swatch {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.1s;
}
.rt-color-swatch:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 1;
    position: relative;
}

.rt-color-custom-row {
    display: flex;
    align-items: center;
    gap: 6px;
    border-top: 1px solid #f0f0f0;
    padding-top: 8px;
}
.rt-color-custom-label {
    font-size: 0.72rem;
    color: #999;
}
.rt-color-custom-input {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
}

/* Tabellen-Einfüge-Grid */
.rt-table-grid {
    display: grid;
    grid-template-columns: repeat(6, 24px);
    gap: 2px;
    margin-bottom: 6px;
}
.rt-table-cell {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
}
.rt-table-cell.hl {
    background: rgba(46,125,50,0.15);
    border-color: var(--primary-green);
}
.rt-table-info {
    font-size: 0.75rem;
    color: #666;
    text-align: center;
}

/* Emoji-Grid */
.rt-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    max-height: 200px;
    overflow-y: auto;
}
.rt-emoji-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rt-emoji-btn:hover {
    background: #e8f5e9;
    transform: scale(1.15);
}

/* Tooltip - hoher z-index damit Modal-Stacking-Contexts nicht clippen */
.rt-toolbar [data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10000;
}

/* Signatur/Vorlagen Dropdown-Menü innerhalb der dunklen Toolbar */
.rt-toolbar .rt-dropdown {
    position: relative;
    display: inline-block;
}
.rt-toolbar .rt-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 4px;
}
.rt-toolbar .rt-dropdown-menu.active { display: block; }

.rt-dropdown-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
    color: var(--text-dark);
}
.rt-dropdown-item:hover { background: #f0f0f0; }

/* === Tabellen im contenteditable Editor === */

/* Tabellen-Wrapper für Hover-Buttons */
.rt-table-wrap {
    position: relative;
    display: inline-block;
}

/* + Buttons an Spaltenrändern (oben) */
.rt-table-col-btns {
    position: absolute;
    top: -22px;
    left: 0;
    right: 0;
    height: 22px;
    display: flex;
    pointer-events: none;
}
.rt-table-col-btn {
    position: absolute;
    top: 0;
    width: 20px;
    height: 20px;
    background: var(--primary-green);
    color: white;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.15s, transform 0.1s;
}
.rt-table-col-btn:hover { transform: scale(1.25); }

/* + Buttons an Zeilenrändern (links) */
.rt-table-row-btns {
    position: absolute;
    left: -24px;
    top: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
}
.rt-table-row-btn {
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    background: var(--primary-green);
    color: white;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.15s, transform 0.1s;
}
.rt-table-row-btn:hover { transform: scale(1.25); }

/* Beim Hover über den Wrapper: alle Buttons sichtbar */
.rt-table-wrap:hover .rt-table-col-btn,
.rt-table-wrap:hover .rt-table-row-btn { opacity: 1; }

/* Rechtsklick-Kontextmenü */
.rt-ctx {
    display: none;
    position: fixed;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 10000;
    padding: 4px 0;
    min-width: 160px;
}
.rt-ctx.open { display: block; }

.rt-ctx-item {
    padding: 6px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-dark);
}
.rt-ctx-item:hover { background: #e8f5e9; }
.rt-ctx-item svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}
.rt-ctx-item.danger { color: #c62828; }
.rt-ctx-item.danger svg { stroke: #c62828; }

.rt-ctx-sep {
    height: 1px;
    background: #f0f0f0;
    margin: 3px 0;
}

/* Tabellen im Editor */
[contenteditable="true"] table {
    border-collapse: collapse;
    margin: 0.75rem 0;
    width: auto;
}
[contenteditable="true"] td,
[contenteditable="true"] th {
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    min-width: 60px;
    vertical-align: top;
}

/* Variablen-Platzhalter im Editor */
[contenteditable="true"] .var {
    color: var(--primary-green);
    font-weight: 600;
    background: #e8f5e9;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.88rem;
    border: 1px solid #c8e6c9;
    white-space: nowrap;
}

/* HR im Editor */
[contenteditable="true"] hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0.75rem 0;
}

/* === global-compose.css === */
/* =============================================================
   GLOBAL-COMPOSE — Gmail-Style Compose-Fenster
   3 Zustände: Mini, Compact, Maximiert
   ============================================================= */

/* === Header: Mail-Gruppe mit Compose-Button === */
.header-mail-group {
    position: relative;
    display: flex;
    align-items: center;
}

.header-compose-btn {
    position: absolute;
    right: -6px;
    bottom: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--dark-bg);
    background: var(--primary-green);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s;
    z-index: 1;
}
.header-compose-btn:hover {
    background: var(--hover-green);
    transform: scale(1.15);
}

.header-compose-icon {
    width: 10px;
    height: 10px;
}

/* === Container (unten rechts, über dem Footer) === */
.gc-tray {
    position: fixed;
    bottom: 44px; /* Höhe des Footers */
    right: 20px;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 12px;
    z-index: 1500;
    pointer-events: none;
}

/* === Fenster-Grundstruktur === */
.gc-window {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
    background: var(--card-bg);
    animation: gc-slideUp 0.22s ease-out;
}
.gc-window--leaving {
    animation: gc-slideDown 0.18s ease-in forwards;
}

@keyframes gc-slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes gc-slideDown {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(100%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .gc-window,
    .gc-window--leaving {
        animation: none;
    }
}

/* === COMPACT === */
.gc-window--compact {
    width: 400px;
    max-height: calc(100vh - 44px - 52px); /* Viewport minus Footer minus Header */
    min-width: 320px;
    min-height: 200px;
    /* Resize per Drag an der linken oberen Ecke */
    resize: none; /* Manuell via JS implementiert */
    position: relative;
}

/* Resize-Handle: linke obere Ecke */
.gc-resize-handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    cursor: nw-resize;
    z-index: 20;
    /* Visueller Indikator */
    border-top: 2px solid rgba(255, 255, 255, 0.4);
    border-left: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px 0 0 0;
}
.gc-resize-handle:hover {
    border-top-color: rgba(255, 255, 255, 0.8);
    border-left-color: rgba(255, 255, 255, 0.8);
}

/* === MINI === */
.gc-window--mini {
    width: 260px;
    cursor: pointer;
    transition: background 0.15s;
}
.gc-window--mini:hover {
    filter: brightness(1.1);
}
.gc-window--mini .gc-body,
.gc-window--mini .gc-footer {
    display: none;
}

/* === MAXIMIZED (Compact wird versteckt) === */
.gc-window--maximized {
    display: none;
}

/* === Titelleiste === */
.gc-titlebar {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: var(--dark-bg);
    border-radius: 10px 10px 0 0;
    gap: 6px;
    flex-shrink: 0;
    user-select: none;
}

.gc-titlebar-title {
    flex: 1;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mini-Indikator (grüner Punkt wenn Inhalt vorhanden) */
.gc-mini-dot {
    width: 6px;
    height: 6px;
    background: var(--primary-green);
    border-radius: 50%;
    flex-shrink: 0;
}

.gc-titlebar-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.gc-titlebar-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
}
.gc-titlebar-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.gc-titlebar-btn svg {
    width: 14px;
    height: 14px;
}

/* === Body === */
.gc-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* compose-fields darf Autocomplete-Dropdown überlappen lassen */
.gc-window--compact .compose-fields {
    overflow: visible;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

/* Editor-Wrap nimmt restlichen Platz und scrollt intern */
.gc-window--compact .compose-editor-row {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
}
.gc-window--compact .compose-editor-col {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* Überschreibt min-height:200px aus email-compose.css */
.gc-window--compact .compose-editor {
    flex: 1;
    min-height: 60px;
    overflow-y: auto;
    padding: 0.75rem 1rem;
}

/* === Empfänger-Felder === */
.gc-fields {
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.gc-field {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-bottom: 1px solid #f0f0f0;
    gap: 6px;
}
.gc-field:last-child {
    border-bottom: none;
}

.gc-field--collapsed {
    display: none !important;
}

.gc-field-label {
    font-size: 0.75rem;
    color: var(--primary-green);
    font-weight: 600;
    width: 34px;
    flex-shrink: 0;
}

.gc-field-input {
    flex: 1;
    min-width: 0;
    position: relative;
}

/* Chip-Input innerhalb Compose: kleinere Variante */
.gc-field-input .chip-input-container {
    min-height: 28px;
    max-height: 80px;
    padding: 3px 6px;
    font-size: 0.82rem;
}
.gc-field-input .chip-input {
    font-size: 0.78rem;
    min-width: 80px;
}
.gc-field-input .email-chip {
    font-size: 0.72rem;
    padding: 1px 6px;
}

/* Empfänger-Auswahl-Button */
.gc-users-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--primary-green);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.15s;
    padding: 0;
}
.gc-users-btn:hover {
    background: var(--primary-5);
}
.gc-users-btn svg {
    width: 15px;
    height: 15px;
}

/* CC/BCC Toggle-Link */
.gc-cc-toggle {
    font-size: 0.7rem;
    color: #999;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.15s;
}
.gc-cc-toggle:hover {
    color: var(--primary-green);
}

/* Betreff-Feld */
.gc-subject-row {
    padding: 5px 10px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.gc-subject-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 2px 0;
    color: var(--text-dark);
    background: transparent;
}
.gc-subject-input::placeholder {
    color: #bbb;
    font-weight: 400;
}

/* === Autocomplete-Dropdown im Compact-Fenster === */
/* Muss über allen anderen Feldern des Compose-Fensters erscheinen */
.gc-window .compose-autocomplete {
    z-index: 200;
}

.gc-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.gc-autocomplete.active {
    display: block;
}
.gc-autocomplete-item {
    padding: 6px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.1s;
}
.gc-autocomplete-item:hover,
.gc-autocomplete-item.focused {
    background: var(--primary-5);
}
.gc-autocomplete-name {
    font-weight: 500;
    color: var(--text-dark);
}
.gc-autocomplete-email {
    color: #888;
    font-size: 0.72rem;
}

/* === Compact-Toolbar === */
.gc-toolbar-compact {
    background: linear-gradient(180deg, #2c3e44 0%, var(--dark-bg) 100%);
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    flex-shrink: 0;
}

.gc-tb-group {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    padding: 2px;
}

.gc-tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: 5px;
    color: #B0BEC5;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
    padding: 0;
    line-height: 1;
    font-family: inherit;
}
.gc-tb-btn:hover {
    background: rgba(76, 175, 80, 0.2);
    color: #81C784;
}
.gc-tb-btn.active {
    background: rgba(76, 175, 80, 0.3);
    color: #A5D6A7;
}
.gc-tb-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gc-tb-sep {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 2px;
    flex-shrink: 0;
}

/* Mehr-Button */
.gc-tb-more {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border: none;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 6px;
    color: #90A4AE;
    cursor: pointer;
    font-size: 0.68rem;
    transition: all 0.15s;
    white-space: nowrap;
    height: 26px;
    font-family: inherit;
}
.gc-tb-more:hover {
    background: rgba(76, 175, 80, 0.2);
    color: #81C784;
}
.gc-tb-more svg {
    width: 8px;
    height: 8px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
}

/* === Editor === */
.gc-editor-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gc-editor {
    flex: 1;
    min-height: 100px;
    max-height: 220px;
    overflow-y: auto;
    padding: 10px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-dark);
    outline: none;
    border: none;
    background: var(--card-bg);
}
.gc-editor:focus {
    background: #fff;
}
.gc-editor.drag-over {
    background: var(--primary-5);
    outline: 2px dashed var(--primary-green);
    outline-offset: -2px;
}

/* === Anhänge === */
.gc-attachments {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
    max-height: 80px;
    overflow-y: auto;
}
.gc-attachments.has-items {
    display: flex;
}

.gc-att-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    font-size: 0.72rem;
    color: #555;
    max-width: 180px;
}
.gc-att-icon {
    flex-shrink: 0;
    color: #888;
}
.gc-att-icon svg {
    width: 12px;
    height: 12px;
}
.gc-att-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.gc-att-size {
    color: #aaa;
    font-size: 0.65rem;
    flex-shrink: 0;
}
.gc-att-remove {
    color: #aaa;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    margin-left: 2px;
    flex-shrink: 0;
    border: none;
    background: none;
    padding: 0;
}
.gc-att-remove:hover {
    color: #c00;
}

/* === Footer === */
.gc-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid var(--border-color);
    background: #fafafa;
    flex-shrink: 0;
}

.gc-send-btn {
    padding: 5px 16px;
    background: var(--primary-green);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
    font-family: inherit;
}
.gc-send-btn:hover {
    background: var(--hover-green);
}
.gc-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.gc-send-btn svg {
    width: 13px;
    height: 13px;
}

.gc-footer-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.gc-footer-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
}
.gc-footer-btn:hover {
    color: var(--text-dark);
    background: #eee;
}
.gc-footer-btn svg {
    width: 15px;
    height: 15px;
}

.gc-footer-spacer {
    flex: 1;
}

.gc-html-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    color: #999;
    cursor: pointer;
    user-select: none;
}
.gc-html-toggle input[type="checkbox"] {
    width: 13px;
    height: 13px;
    cursor: pointer;
}

/* === Header-Buttons im Maximized Modal (Minimieren + Schließen) === */
.gc-modal-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: none;
    color: #90A4AE;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.gc-modal-header-btn:hover {
    color: var(--text-dark);
    background: rgba(0, 0, 0, 0.05);
}
.gc-modal-header-btn svg.icon {
    width: 18px;
    height: 18px;
}

/* === Maximized Modal (innerhalb gm-overlay) === */
/* Das gm-overlay geht von Header+Tabs bis Footer.
   compose-modal-content füllt 100% des verfügbaren Platzes. */
.gm-overlay .compose-modal-content {
    height: 100%;
    max-height: 100%;
}

/* gm-body im Compose-Modal: kein Scroll, Seitenrand beibehalten */
.gm-overlay .compose-modal-content > .gm-body {
    overflow: hidden;
    padding: 0.75rem 1.5rem;
    display: flex;
    flex-direction: column;
}

/* compose-body füllt den gesamten gm-body */
.gm-overlay .compose-modal-content .compose-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* compose-fields darf nicht schrumpfen */
.gm-overlay .compose-modal-content .compose-fields {
    flex-shrink: 0;
}

/* Editor-Row nimmt restlichen Platz */
.gm-overlay .compose-modal-content .compose-editor-row {
    flex: 1;
    min-height: 0;
}

/* Editor und Vorschau füllen die Spalte */
.gm-overlay .compose-modal-content .compose-editor-col {
    min-height: 0;
}
.gm-overlay .compose-modal-content .compose-editor {
    flex: 1;
    min-height: 0;
}
.gm-overlay .compose-modal-content .compose-html-preview {
    min-height: 0;
}
.gm-overlay .compose-modal-content .compose-preview-iframe {
    flex: 1;
    min-height: 0;
}

.gc-max-content {
    width: 1100px;
    max-width: 95vw;
    height: 85vh;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.gc-max-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.gc-max-fields {
    flex-shrink: 0;
}

.gc-max-editor-row {
    display: flex;
    gap: 1rem;
    flex: 1;
    min-height: 0;
}
.gc-max-editor-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.gc-max-editor {
    flex: 1;
    min-height: 200px;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0 0 6px 6px;
    overflow-y: auto;
    font-size: 0.95rem;
    line-height: 1.5;
    outline: none;
}
.gc-max-editor:focus {
    border-color: var(--primary-green);
}
.gc-max-editor.drag-over {
    background: var(--primary-5);
    border-color: var(--primary-green);
}

/* Vorschau-Spalte im Maximized */
.gc-max-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-left: 1px solid var(--border-color);
    padding-left: 1rem;
}
.gc-max-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, #666);
}
.gc-max-preview-iframe {
    width: 100%;
    flex: 1;
    min-height: 250px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #fff;
}

/* Maximized: Empfänger-Felder grö&szlig;er */
.gc-max-fields .gc-field {
    padding: 8px 16px;
}
.gc-max-fields .gc-field-label {
    width: 50px;
    font-size: 0.85rem;
}
.gc-max-fields .gc-field-input .chip-input-container {
    min-height: 32px;
    max-height: 90px;
    padding: 4px 8px;
}
.gc-max-fields .gc-field-input .chip-input {
    font-size: 0.9rem;
}
.gc-max-fields .gc-field-input .email-chip {
    font-size: 0.82rem;
    padding: 2px 8px;
}

/* === Globales Empfänger-Auswahl-Modal === */
#gc-recipient-modal .wizard-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
#gc-recipient-modal .table-container {
    margin-top: 0.75rem;
    flex: 1;
    min-height: 0;
    overflow: auto;
    max-height: 50vh;
}

/* === Responsive === */
@media (max-width: 768px) {
    .gc-tray {
        right: 0;
        gap: 0;
    }
    .gc-window--compact {
        width: 100vw;
        max-height: 70vh;
        border-radius: 10px 10px 0 0;
    }
    .gc-window--mini {
        width: 100vw;
    }
    .gc-max-editor-row {
        flex-direction: column;
    }
    .gc-max-preview {
        border-left: none;
        border-top: 1px solid var(--border-color);
        padding-left: 0;
        padding-top: 0.75rem;
    }
}

/* === veranstaltungen.css === */
/* =============================================================
   VERANSTALTUNGEN — Anmeldeseite, Gast-Felder, Benutzerdefinierte Felder
   ============================================================= */

/* === Anmeldeseite Layout === */
.anmelde-card {
    text-align: left;
    max-width: 960px;
}

.anmelde-gast-felder {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.anmelde-feld-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.anmelde-submit-row {
    text-align: right;
    margin-top: 3rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
}

/* === Benutzerdefinierte Felder auf Anmeldeseite === */
.anmelde-details-sektion {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.custom-field-wrapper {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: #f7f9fc;
    border-radius: 8px;
}

.custom-field-wrapper label {
    font-weight: 600;
    display: block;
    margin-bottom: 0.75rem;
}

.custom-field-wrapper .form-group { margin-bottom: 0.5rem; }

.custom-field-wrapper .option-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: normal;
}

.custom-field-wrapper .anzahl-option-item {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* Aufpreis einer Option, direkt neben ihrem Text. */
.preis-badge {
    background: var(--primary-5, #e8f5e9);
    color: var(--primary-green, #1a5f20);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    margin-left: 0.5rem;
    font-weight: bold;
}

.anzahl-preis-info {
    color: var(--text-muted, #666);
    font-size: 0.85rem;
    font-weight: normal;
}

.anmelde-details-sektion .custom-fields-container { margin-top: 1rem; }
.anmelde-details-sektion .delete-gast-btn { margin-top: 1rem; }

/* Der Knopf steht unter allen Gastabschnitten und braucht Luft nach oben,
   sonst klebt er am "Gast entfernen" des letzten Abschnitts. */
#add-externe-zeile-btn { margin-top: 1.5rem; }

/* === Responsive Anmeldeseite === */
@media (max-width: 640px) {
    .anmelde-card {
        padding: 1.25rem 1rem;
        border-radius: 0;
        box-shadow: none;
        border-left: none;
        border-right: none;
        max-width: 100%;
    }

    .anmelde-card h1 {
        font-size: 1.3rem;
        line-height: 1.3;
    }

    .teilnahmegebuehr-info { font-size: 0.9rem; }

    .anmelde-details-sektion { margin-top: 1.25rem; padding-top: 1rem; }

    .anmelde-feld-row { grid-template-columns: 1fr; }

    .anmelde-card .form-control {
        padding: 12px 14px;
        font-size: 1rem;
        min-height: 48px;
    }

    .anmelde-card input[type="checkbox"] {
        width: 1.5rem !important;
        height: 1.5rem !important;
        min-width: 1.5rem;
    }

    .anmelde-submit-row {
        text-align: center;
        margin-top: 2rem;
        padding-top: 1.25rem;
    }

    .anmelde-submit-row .btn {
        width: 100%;
        padding: 14px 20px;
        font-size: 1.1rem;
    }

    .anmelde-details-sektion .delete-gast-btn {
        width: 100%;
        margin-top: 0.75rem !important;
    }

    #add-externe-zeile-btn {
        width: 100%;
        margin-top: 1rem;
        padding: 12px;
    }

    .custom-field-wrapper { padding: 0.75rem; }

    .custom-field-wrapper .anzahl-option-item {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .custom-field-wrapper .anzahl-option-item input[type="number"] {
        min-height: 44px;
        font-size: 1rem;
    }

    .custom-field-wrapper .option-label {
        padding: 0.5rem 0;
        gap: 0.75rem;
    }

    .custom-field-wrapper .option-label input[type="radio"],
    .custom-field-wrapper .option-label input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
        min-width: 1.25rem;
    }

    .confirmation-popup-content {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 1.25rem !important;
    }

    .confirmation-popup-buttons {
        flex-direction: column-reverse;
        gap: 0.75rem;
    }

    .confirmation-popup-buttons .btn {
        width: 100%;
        padding: 13px;
        text-align: center;
    }

    .anmelde-card .form-chapter-title { font-size: 1rem; }
}

/* === mahnung.css === */
/* =============================================================
   STATISTIK-KACHELN — Rechnungen, Mahnungen etc.
   ============================================================= */

.stat-box {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    text-align: center;
    border: 1px solid var(--border-color);
    min-width: 100px;
    border-top: 3px solid var(--border-color);
}
.stat-box .stat-label {
    display: block;
    font-size: 0.75rem;
    color: #90A4AE;
    margin-bottom: 0.25rem;
}
.stat-box .stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

/* Farbige Akzente (Border oben + Wert-Farbe) */
.stat-accent-blue     { border-top-color: #1976D2; }
.stat-accent-blue .stat-value     { color: #1976D2; }
.stat-accent-orange   { border-top-color: #FF9800; }
.stat-accent-orange .stat-value   { color: #e65100; }
.stat-accent-red      { border-top-color: #e53935; }
.stat-accent-red .stat-value      { color: #e53935; }
.stat-accent-darkred  { border-top-color: #b71c1c; }
.stat-accent-darkred .stat-value  { color: #b71c1c; }
.stat-accent-green    { border-top-color: var(--primary-green); }
.stat-accent-green .stat-value    { color: var(--primary-green); }

/* =============================================================
   MAHNUNG — Modul-spezifische Styles
   ============================================================= */

.badge-faellig {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: #c62828;
    color: white;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.gebuehr-config-row {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #fafafa;
}
.gebuehr-config-row h4 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: #333;
}

/* Die Typ-Spalte nimmt nur ihre eigene Breite, damit die Beschriftungen
   des Umschalters nicht abgeschnitten werden. */
.gebuehr-felder {
    display: grid;
    grid-template-columns: max-content minmax(140px, 1fr) minmax(110px, 1fr);
    gap: 1rem;
    align-items: end;
}
.gebuehr-felder .form-group {
    margin-bottom: 0;
}
.gebuehr-config-row .form-hint {
    margin: 0.5rem 0 0;
}
.gebuehr-jahr {
    max-width: 150px;
}

@media (max-width: 640px) {
    .gebuehr-felder {
        grid-template-columns: 1fr;
    }
    .gebuehr-felder .toggle-group {
        display: flex;
    }
}

.bilanz-summary {
    background: #f5f5f5;
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}
.bilanz-row {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
}
.bilanz-saldo {
    border-top: 1px solid #ddd;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
}

.simple-table {
    width: 100%;
    border-collapse: collapse;
}
.simple-table th, .simple-table td {
    padding: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
}
.simple-table th {
    background: #f5f5f5;
    font-weight: 600;
}

.row-nicht-faellig {
    background-color: #fff8e1;
    opacity: 0.85;
}
.row-nicht-faellig td {
    color: #666;
}
.frist-warnung {
    font-size: 0.75rem;
    font-style: italic;
}

.mahnstufe-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}
.mahnstufe-0 { background: #e0e0e0; color: #666; }
.mahnstufe-1 { background: #fff3e0; color: #e65100; }
.mahnstufe-2 { background: #ffebee; color: #c62828; }
.mahnstufe-3 { background: #c62828; color: white; }

.btn-view-mahnung .mahnung-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: #e65100;
}
.btn-view-mahnung:nth-child(1) .mahnung-badge { background: #ff9800; }
.btn-view-mahnung:nth-child(2) .mahnung-badge { background: #f44336; }
.btn-view-mahnung:nth-child(3) .mahnung-badge { background: #b71c1c; }

/* Eine stornierte Mahnung bleibt sichtbar, tritt aber zurück: das Schreiben
   ist hinausgegangen, seine Gebühr ist zurückgenommen. */
.btn-icon.mahnung-storniert {
    opacity: 0.45;
    text-decoration: line-through;
}
.btn-icon.mahnung-storniert .mahnung-badge {
    background: #9e9e9e;
}

.action-buttons-row {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-wrap: wrap;
}

.aktionen-cell {
    white-space: normal !important;
}

/* === rundschreiben.css === */
/* ============================================================
   Rundschreiben (Mailversand) - Liste, Wizard, Detail-Modal
   Ergänzt utilities.css (rs-progress-bar, rs-detail-actions,
   rs-detail-stats-row, rs-stat-*, rs-nachricht-box,
   rs-row-actions, btn-rs-row, rs-bounce-card.*, rs-spinner,
   rs-versand-banner) um die spezifischen Page- und Wizard-Klassen.
   Ersetzt verstreute Inline-Styles.
   ============================================================ */

/* --- Liste --- */
.rs-page-card { text-align: left; }
.rs-liste-container { margin-top: 1rem; }
/* Aktionen als Icons dicht nebeneinander. Die runden Schaltflächen sind
   32px hoch, in einer Tabellenzeile ist das etwas zu wuchtig - hier bleiben
   sie kleiner, ohne die Trefferfläche unter das Nötige zu drücken. */
.rs-actions-cell {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    white-space: nowrap;
}

.rs-actions-cell .btn-icon {
    width: 28px;
    height: 28px;
}

.rs-actions-cell .btn-icon svg {
    width: 16px;
    height: 16px;
}

/* Betreff: zwei Zeilen genügen zum Wiedererkennen. Vorher wuchsen Zeilen mit
   langem Betreff auf die vierfache Höhe und die Liste zerfiel optisch. */
.rs-betreff-zelle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
    line-height: 1.35;
}

/* Status als Abzeichen, in derselben Form wie die Typ-Kennzeichnung. Farbiger
   Text allein stand ohne Fläche neben den Abzeichen und wirkte wie ein
   vergessener Rest. */
.rs-status-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.rs-status-abgeschlossen { background: var(--primary-5); color: var(--primary-green); }
.rs-status-laeuft { background: #fff8e1; color: #b26a00; }
/* Warteliste: ruht am Stundenlimit, kein Fehlerzustand - deshalb blau
   statt rot, damit niemand sie mit einem Abbruch verwechselt. */
.rs-status-wartet { background: #e3f2fd; color: #0d47a1; }
.rs-status-abgebrochen { background: #fdecea; color: #c62828; }
.rs-status-entwurf { background: #eceff1; color: #546e7a; }

/* Typ-Badges */
.rs-typ-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}
.rs-typ-rundschreiben { background: #e3f2fd; color: #1565c0; }
.rs-typ-rechnung { background: var(--primary-5); color: var(--primary-green); }
.rs-typ-mahnung { background: #fff3e0; color: #e65100; }
.rs-typ-einladung { background: #f3e5f5; color: #7b1fa2; }
.rs-typ-dokument { background: #eceff1; color: #455a64; }
.rs-typ-email-client { background: #e0f7fa; color: #00695c; }
/* Fehlte bisher, weshalb Stornorechnungen als einzige ohne Fläche dastanden. */
.rs-typ-storno { background: #fce4ec; color: #ad1457; }

/* Hervorhebungen in Liste-Zellen */
.rs-offen-warning { color: #dc3545; }

/* --- Detail-Modal --- */
/* Section: einheitliches vertikales Spacing fuer alle Bloecke im Detail-Body */
.rs-detail-section {
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.rs-toggle-btn {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.rs-nachsenden-zeile {
    display: flex;
    gap: 0.5rem;
}
.rs-nachsenden-zeile .form-control { flex: 1; }
.rs-nachsenden-ergebnisse { margin-top: 0.5rem; }
.rs-nachsenden-treffer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
    border-bottom: 1px solid #eee;
}
.rs-nachsenden-treffer small { color: #6c757d; }
.rs-nachsenden-leer { color: #6c757d; }

/* --- Vorschau-Modal --- */
#rs-vorschau-modal > .gm-box { max-width: 850px; }

.rs-vorschau-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.rs-vorschau-counter { font-weight: 600; color: #666; }

.rs-vorschau-info-box {
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
}
.rs-vorschau-info-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

.rs-vorschau-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #666;
}
.rs-vorschau-feld { margin-bottom: 0.5rem; }
.rs-vorschau-betreff {
    padding: 0.4rem 0.75rem;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-weight: 500;
    margin-top: 0.25rem;
}
.rs-vorschau-anhaenge { margin-top: 0.25rem; }
.rs-vorschau-iframe-wrap {
    /* min-height stellt sicher, dass das iframe sichtbar bleibt auch wenn
       die Geschwister-.gm-body alle Flex-Höhe beansprucht. MailPreview
       passt die Höhe per ResizeObserver an den Inhalt an. */
    flex: 0 0 auto;
    min-height: 360px;
    overflow: hidden;
    padding: 0 1.5rem 1rem;
    display: flex;
    flex-direction: column;
}
.rs-vorschau-iframe {
    width: 100%;
    min-height: 360px;
    flex: 1 1 auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #fff;
    display: block;
}
.rs-vorschau-footer { justify-content: space-between; }
.rs-vorschau-footer-info { color: #666; font-size: 0.9rem; }
.rs-vorschau-footer-btns { display: flex; gap: 0.5rem; }

/* --- Wizard --- */
.rs-jahr-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.rs-step1-controls {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.rs-auswahl-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.rs-auswahl-trenner {
    border-left: 1px solid #ddd;
    height: 24px;
    margin: 0 0.5rem;
}

.rs-zaehler-row {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-shrink: 0;
    padding-top: 0.5rem;
}
.rs-zaehler-email {
    font-size: 0.9rem;
    color: var(--primary-green);
}
.rs-zaehler-brief {
    font-size: 0.9rem;
    color: #FF9800;
}

.rs-step-2-editor {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.rs-step-2-anhaenge { flex-shrink: 0; }
.rs-step-2-anhaenge label {
    font-weight: 500;
    font-size: 0.9rem;
}
.rs-anhaenge-liste { margin-top: 0.5rem; }
.rs-file-upload-container { margin-top: 0.5rem; }

.rs-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    color: #6c757d;
}
.rs-upload-area.is-dragover {
    border-color: var(--primary-green);
}
.rs-anhaenge-leer {
    color: #999;
    font-size: 0.85rem;
}
.rs-compose-attachments { display: flex; }

/* Step 3 (Brief) wird komplett von der globalen BriefStep-Komponente
   gerendert - siehe brief-step.css und brief-step.js. */

.rs-step-4-split {
    display: flex;
    gap: 2rem;
}
.rs-step-4-col { flex: 1; }
.rs-step-4-col h4.rs-step-4-titel-email { color: var(--primary-green); }
.rs-step-4-col h4.rs-step-4-titel-brief { color: #FF9800; }
.rs-versand-liste {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0.5rem;
    margin-top: 0.5rem;
}
.rs-versand-zeile { padding: 0.25rem 0; }
.rs-versand-action-btn {
    margin-top: 1rem;
    width: 100%;
}

#rs-progress-container { margin-top: 1.5rem; }
#rs-progress-text {
    margin-top: 0.5rem;
    color: #666;
    text-align: center;
}

#rs-result-container {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #f5f5f5;
    border-radius: 8px;
}
#rs-result-details p.rs-result-error { color: #c62828; }

/* Empfaenger-Listen in Step 1 (versteckt, dient nur als Datenquelle) */
.rs-empf-zeile {
    padding: 0.15rem 0;
    font-size: 0.85rem;
}
.rs-empf-leer { color: #999; }

/* Platzhalter-Tags (Brief-Schritt) - aus Inline-<style> migriert */
.placeholder-tag {
    background: #e8f5e9;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    border: 1px solid #c8e6c9;
    user-select: none;
}
.placeholder-tag:hover {
    background: #c8e6c9;
}

/* Kennzeichnung mitgelieferter Vorlagen im Auswahlfeld des Editors. Sie
   tragen kein Löschkreuz, weil der Server ihr Löschen abweist. */
.vorlage-mitgeliefert {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    color: var(--primary-green);
}

/* === newsletter.css === */
/* =============================================================
   NEWSLETTER — Auswertung, Kampagnenliste, Editor
   Ergänzt die globalen Bausteine, ersetzt sie nicht: Kacheln kommen
   aus cards.css, Tabellen aus power-table.css, Modale aus modals.css.
   ============================================================= */

/* --- Seitengerüst --- */

/* Die Karten tragen linksbündigen Text, die globale Karte zentriert. */
.nl-karte {
    text-align: left;
}

.nl-karte-listen {
    margin-bottom: 1rem;
}

.nl-tabelle {
    margin-top: 1rem;
}

.nl-tabelle-schmal {
    margin-top: 0.5rem;
}

.nl-kopfaktionen {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.nl-kopfhinweis {
    margin: 0;
    font-size: 0.85rem;
    color: #78909C;
}

/* --- Assistent --- */

/* Sichtbarkeit der Schritte über die Klasse 'active' statt über gesetzte
   display-Werte im Markup. Bewusst nur für dieses Modal: die übrigen
   Assistenten im Projekt blenden ihre Schritte weiterhin selbst aus, eine
   globale Regel würde sie alle auf einmal anzeigen. */
#nl-wizard-modal .wizard-content,
#nl-wizard-modal .wizard-footer {
    display: none;
}

#nl-wizard-modal .wizard-content.active {
    display: flex;
}

#nl-wizard-modal .wizard-footer.active {
    display: flex;
}

/* Betreff und Vorschautext nebeneinander: beide entscheiden im Postfach
   darüber, ob die Mail geöffnet wird, und gehören deshalb zusammen. */
.nl-kopffelder {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
    /* Ohne diesen Abstand kleben die Felder am Schrittbalken darüber. */
    margin-top: 0.85rem;
}

.nl-betreff-feld {
    flex: 1;
    min-width: 0;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .nl-kopffelder {
        flex-direction: column;
        gap: 0;
    }
}

.nl-editor-rahmen {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
    margin-top: 1rem;
    /* Kein eigener Rahmen: Palette, Arbeitsfläche und Leiste haben schon
       einen. Zusammen ergab das eine zweite Linie um alles herum. */
}

.nl-empfaenger-kopf {
    flex-shrink: 0;
    margin-bottom: 0.75rem;
}

.nl-chipreihe {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

/* Schritt 3: schmale Zusammenfassung links, breite Vorschau rechts. Beide
   Hälften teilen sich die Höhe, damit die Vorschau nicht über den Rand läuft. */
.nl-senden-spalten {
    display: flex;
    gap: 2rem;
    flex: 1;
    min-height: 0;
}

.nl-senden-links {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nl-senden-rechts {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nl-abschnitt {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
}

.nl-zusammenfassung {
    background: var(--gm-bg-subtle, #f7f9fc);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1rem;
}

.nl-zusammenfassung dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 0.75rem;
}

.nl-zusammenfassung dt {
    color: #78909C;
    font-size: 0.85rem;
}

.nl-zusammenfassung dd {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
}

.nl-vollbreit {
    width: 100%;
}

.nl-anhaenge {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

/* Die Beschriftung wirkt wie eine Schaltfläche und öffnet die Dateiauswahl. */
.nl-anhang-waehlen {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    cursor: pointer;
}

.nl-vorschau-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.nl-vorschau-blaettern {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.nl-vorschau-rahmen {
    flex: 1;
    min-height: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    background: #ECEFF1;
}

.nl-footer-gruppe {
    display: flex;
    gap: 0.5rem;
}

/* Die Kampagnenliste trägt sieben Spalten, sechs davon mit fester Breite.
   Zusammen füllen sie schon eine Fensterbreite von 700 Pixeln vollständig,
   für den Betreff blieben 24 Pixel: ein Zeichen je Zeile, Zeilen mehrere
   hundert Pixel hoch. Unterhalb dieser Schwelle wird deshalb waagrecht
   gescrollt statt unlesbar gestapelt. Gemessen, nicht geschätzt. */
@media (max-width: 1100px) {
    #nl-kampagnen-tabelle {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #nl-kampagnen-tabelle thead,
    #nl-kampagnen-tabelle tbody,
    #nl-kampagnen-tabelle tfoot {
        min-width: 1000px;
    }
}

/* --- Block-Editor --- */

/* Drei Spalten: Bausteine wählen, zusammenstellen, Ergebnis sehen. */
.nl-palette {
    flex: 0 0 clamp(140px, 12%, 190px);
    padding: 0.625rem;
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    background: var(--gm-bg-subtle, #f7f9fc);
}

.nl-palette-titel {
    font-size: 0.72rem;
    font-weight: 600;
    color: #90A4AE;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.nl-palette-eintrag {
    width: 100%;
    padding: 0.375rem 0.5rem;
    margin-bottom: 0.2rem;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.78rem;
    font-family: inherit;
    text-align: left;
    background: var(--card-bg, #fff);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.nl-palette-eintrag:hover,
.nl-palette-eintrag:focus-visible {
    border-color: var(--primary-green);
    background: #e8f5e9;
}

.nl-canvas {
    flex: 1;
    padding: 0.5rem;
    overflow-y: auto;
    background: var(--page-bg, #f7f9fc);
    min-width: 0;
}

.nl-ablagefeld {
    border: 2px dashed var(--border-color);
    background: #f1f8e9;
    text-align: center;
    padding: 0.875rem;
    color: #90A4AE;
    font-size: 0.8rem;
    border-radius: 8px;
    margin-top: 0.375rem;
}

.nl-preview {
    flex: 0 0 clamp(260px, 30%, 420px);
    min-width: 0;
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #fff);
}

.nl-preview-kopf {
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.nl-preview-titel {
    font-weight: 600;
    font-size: 0.78rem;
    color: #90A4AE;
}

.nl-preview-schalter {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.nl-toggle-btn {
    padding: 0.2rem 0.625rem;
    font-size: 0.7rem;
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: var(--card-bg, #fff);
    color: #90A4AE;
}

.nl-toggle-btn + .nl-toggle-btn {
    border-left: 1px solid var(--border-color);
}

.nl-toggle-btn.active {
    background: var(--primary-green);
    color: #fff;
}

.nl-preview-buehne {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: #ECEFF1;
    display: flex;
    justify-content: center;
}

.nl-preview-rahmen {
    width: 100%;
    max-width: 600px;
    border: none;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
    transition: max-width 0.3s ease;
}

.nl-preview-rahmen.nl-mobil {
    max-width: 380px;
}

/* --- Bausteine im Editor --- */

.nl-bl-aktionen {
    display: flex;
    gap: 1px;
    margin-left: auto;
    margin-right: 0.25rem;
}

.be-block-arrow.nl-bl-offen {
    transform: rotate(180deg);
    color: var(--primary-green);
}

.nl-bl-zeile {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    margin-top: 0.5rem;
}

.nl-bl-umbruch {
    flex-wrap: wrap;
}

.nl-bl-zwei {
    display: flex;
    gap: 0.5rem;
}

.nl-bl-haelfte {
    flex: 1;
    min-width: 0;
}

.nl-bl-dehnbar {
    flex: 1;
}

.nl-bl-dehnbar-doppelt {
    flex: 2;
}

.nl-bl-sozialfeld {
    flex: 1;
    min-width: 130px;
}

/* Kurzes Feld neben einem dehnbaren, etwa Datum neben Bezeichnung. */
.nl-bl-schmal {
    flex: 0 0 120px;
    min-width: 0;
}

/* Eine Zeile der mehrzeiligen Bausteine (Termine, Kennzahlen, Fußbereich).
   Der Löschknopf sitzt am Ende und schrumpft nicht mit. */
.nl-listenzeile > .btn-icon {
    flex: 0 0 auto;
}

@media (max-width: 700px) {
    .nl-listenzeile {
        flex-wrap: wrap;
    }

    .nl-bl-schmal {
        flex: 1 1 100px;
    }
}

.nl-bl-mitte {
    text-align: center;
}

.nl-bl-beschriftung {
    font-size: 0.7rem;
    color: #90A4AE;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.nl-bl-vorschaubild {
    max-width: 100%;
    max-height: 120px;
    border-radius: 4px;
}

.nl-bl-ablage {
    width: 100%;
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    border: none;
    border-radius: 4px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    color: var(--primary-green);
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
}

.nl-bl-schreibfeld {
    width: 100%;
    min-height: 100px;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0 0 6px 6px;
    overflow-y: auto;
    font-size: 0.95rem;
    line-height: 1.5;
    font-family: inherit;
    background: #fff;
    outline: none;
}

.nl-bl-schreibfeld:focus-visible {
    border-color: var(--primary-green);
}

.nl-bl-klein {
    min-height: 60px;
    padding: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.4;
    border-radius: 4px;
}

.nl-bl-zitatfeld {
    min-height: 40px;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-green);
    border-radius: 0 4px 4px 0;
    font-style: italic;
    font-size: 0.86rem;
    outline: none;
}

.nl-bl-abstand-oben {
    margin-top: 0.375rem;
}

.nl-bl-variablen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.375rem;
    align-items: center;
}

.nl-var-btn {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.72rem;
    color: var(--primary-green);
    font-family: monospace;
    white-space: nowrap;
}

.nl-bl-farbfeld {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid var(--border-color);
    cursor: pointer;
}

.nl-bl-knopfschau {
    display: inline-block;
    color: #fff;
    padding: 0.625rem 1.75rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
}

.nl-bl-trenner {
    border: none;
    border-top-width: 1px;
    margin: 0.5rem 0;
}

.nl-bl-regler {
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .nl-palette-eintrag,
    .nl-preview-rahmen {
        transition: none;
    }
}

/* --- Auswertung einer Kampagne --- */

/* Fünf Kennzahlen statt der vier aus dem Finanzbereich. */
.nl-stats-kacheln {
    grid-template-columns: repeat(5, 1fr);
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.nl-stats-block {
    margin-bottom: 1.5rem;
}

/* Feste Höhe, damit das Diagramm beim Laden nicht springt. */
.nl-stats-diagramm {
    height: 220px;
}

.nl-stats-block:last-child {
    margin-bottom: 0;
}

.nl-stats-ueberschrift {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
}

/* Verweisliste: Rang, Ziel, Zahl. Das Ziel darf lang sein und wird
   abgeschnitten, die Zahl behält ihren Platz. */
.nl-linkliste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nl-linkliste-zeile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border-color);
}

.nl-linkliste-zeile:last-child {
    border-bottom: none;
}

.nl-linkliste-rang {
    width: 1.5rem;
    flex-shrink: 0;
    font-weight: 600;
    color: #90A4AE;
    font-variant-numeric: tabular-nums;
}

.nl-linkliste-ziel {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nl-linkliste-wert {
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

/* Ja und Nein in Tabellen: das Ja trägt die Aussage, das Nein tritt zurück. */
.nl-ja {
    color: var(--primary-green);
    font-weight: 600;
}

.nl-nein {
    color: #90A4AE;
}

/* --- Vorlagen ---
   Die Karte selbst ist eine `module-tile` wie auf der Startseite. Hier steht
   nur, was eine Vorlagenkachel darüber hinaus braucht: das Kategorie-Etikett,
   die Fusszeile und die Schaltflächen, die erst bei Zuwendung erscheinen. */

.nl-vorlagen-raster {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.nl-vorlage { cursor: pointer; }

.nl-vorlage-kategorie {
    margin-top: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    color: #fff;
    background: #607D8B;
    white-space: nowrap;
}

.nl-kategorie-veranstaltung { background: var(--primary-green); }
.nl-kategorie-beitrag       { background: #1565C0; }
.nl-kategorie-saisonal      { background: #C62828; }

/* Mitgelieferte Vorlagen tragen einen Stern statt eines Blattes im Symbol. */
.nl-vorlage-system .module-tile-icon { background: #546E7A; }

.nl-vorlage-fuss {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: #90A4AE;
    text-align: center;
}

/* Erst bei Zuwendung sichtbar, damit die Kacheln ruhig wirken. Über die
   Tastatur bleiben sie erreichbar, sobald die Kachel den Fokus hat. */
.nl-vorlage-aktionen {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.nl-vorlage:hover .nl-vorlage-aktionen,
.nl-vorlage:focus-within .nl-vorlage-aktionen,
.nl-vorlage:focus-visible .nl-vorlage-aktionen {
    opacity: 1;
}

.nl-leerhinweis {
    text-align: center;
    color: #90A4AE;
    padding: 3rem 1rem;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .nl-vorlage,
    .nl-vorlage-aktionen {
        transition: none;
    }
    .nl-vorlage:hover,
    .nl-vorlage:focus-visible {
        transform: none;
    }
    .nl-vorlage-aktionen {
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .nl-stats-kacheln {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .nl-stats-kacheln {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Listen-Modal
   Vorher stand hier alles als Inline-Stil im JavaScript. Zwei Folgen: die
   Abstände fehlten, und die Beschriftungen der Auswahlfelder legten sich mit
   ihrem weissen Grund über den Text darüber.
   ========================================================================== */

/* Name und Beschreibung: die Beschreibung darf breiter sein. */
.nl-liste-kopf { grid-template-columns: 2fr 3fr; }

/* Der Regelbereich beginnt unter einer Auswahlmarke. Ohne diesen Abstand
   ragen die schwebenden Feldbeschriftungen in die Zeile darüber. */
.nl-regel-box {
    margin-top: 1rem;
}

.nl-regel-reihe {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin-bottom: 0.9rem;
}

.nl-liste-tabellenkopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

@media (max-width: 700px) {
    .nl-liste-kopf { grid-template-columns: 1fr; }
}

/* === block-doc.css === */
/* ==========================================================================
   BlockDoc: Editor für Blockdokumente
   Allgemeiner Teil (bd-*) plus die Newsletter-Arbeitsansicht (nlv-*).
   Farben und Abstände kommen aus base.css, hier stehen nur die Werte,
   die es dort nicht gibt.
   ========================================================================== */

.bd-werkbank {
    --bd-papier: #ffffff;
    --bd-papiertext: #333333;
    --bd-rand: var(--border-color);
    --bd-radius: 8px;
    --bd-radius-s: 5px;
    --bd-dauer: .18s;
    --bd-kurve: cubic-bezier(.16, 1, .3, 1);

    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 260px;
    gap: 14px;
    /* stretch statt start: die Spalten teilen sich die verfügbare Höhe und
       scrollen jede für sich. Mit `start` wuchs die Palette über die
       Werkbank hinaus, und alles darunter war ohne Scrollbalken
       unerreichbar - zuletzt die eigenen Bausteine. */
    align-items: stretch;
    min-height: 0;
}

/* Palette und Eigenschaften scrollen in sich, die Arbeitsfläche bringt
   ihren eigenen Scrollbereich mit (.bd-papierraum). */
.bd-spalte-palette,
.bd-spalte-leiste {
    overflow-y: auto;
}

.bd-spalte {
    background: var(--card-bg, #fff);
    border: 1px solid var(--bd-rand);
    border-radius: var(--bd-radius);
    overflow: hidden;
}

.bd-spalte-mitte {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* --- Palette --- */

.bd-palette-gruppe { padding: 12px 12px 4px; }

.bd-palette-titel {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #78909C);
    padding-left: 3px;
    margin-bottom: 6px;
}

.bd-palette-raster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.bd-stein {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 9px 4px 7px;
    border: 1px solid var(--bd-rand);
    border-radius: var(--bd-radius-s);
    background: var(--card-bg, #fff);
    color: var(--text-dark);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: grab;
    transition: transform var(--bd-dauer) var(--bd-kurve),
                border-color var(--bd-dauer) var(--bd-kurve);
}

.bd-stein:hover {
    transform: translateY(-2px);
    border-color: var(--primary-50);
}

.bd-stein .icon { width: 17px; height: 17px; color: var(--primary-green); }

/* --- Werkzeugleiste --- */

.bd-werkzeugleiste {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--bd-rand);
    background: var(--primary-5);
    flex-wrap: wrap;
}

.bd-luecke { margin-left: auto; }

.bd-geraet {
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--bd-rand);
    border-radius: 20px;
    background: var(--card-bg, #fff);
}

.bd-geraet-knopf {
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 20px;
    color: var(--text-muted, #78909C);
}

.bd-geraet-knopf[aria-pressed="true"] {
    background: var(--primary-green);
    color: #fff;
}

/* --- Arbeitsflaeche --- */

.bd-papierraum {
    padding: 18px;
    background: var(--body-bg, #F7F9FC);
    max-height: 60vh;
    overflow-y: auto;
}

.bd-papier {
    width: 600px;
    max-width: 100%;
    margin: 0 auto;
    background: var(--bd-papier);
    color: var(--bd-papiertext);
    border-radius: 3px;
    box-shadow: 0 6px 24px rgba(38, 50, 56, .12);
    padding: 8px 0;
    min-height: 120px;
}

.bd-papier.bd-schmal { width: 340px; }

.bd-leer,
.bd-leiste-leer {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-muted, #78909C);
    font-size: 0.85rem;
}

/* --- Ein Baustein auf der Flaeche --- */

.bd-baustein {
    position: relative;
    padding: 2px 20px;
    outline: 2px solid transparent;
    outline-offset: -2px;
    border-radius: 2px;
    transition: outline-color var(--bd-dauer) var(--bd-kurve);
}

.bd-baustein:hover { outline-color: var(--primary-30); }

.bd-baustein.bd-gewaehlt { outline-color: var(--primary-green); }

.bd-marke,
.bd-griffe { display: none; }

.bd-baustein.bd-gewaehlt .bd-marke,
.bd-baustein.bd-gewaehlt .bd-griffe { display: flex; }

.bd-marke {
    position: absolute;
    top: -9px;
    left: 12px;
    z-index: 3;
    background: var(--primary-green);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
}

.bd-griffe {
    position: absolute;
    top: -11px;
    right: 10px;
    z-index: 3;
    gap: 3px;
}

.bd-griff {
    width: 21px;
    height: 21px;
    border: 0;
    border-radius: 4px;
    background: var(--primary-green);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.bd-griff .icon { width: 11px; height: 11px; }

.bd-zieht { opacity: 0.4; }

.bd-ziel-oben::before,
.bd-ziel-unten::after {
    content: "";
    display: block;
    height: 3px;
    margin: 4px 12px;
    border-radius: 3px;
    background: var(--primary-green);
}

/* Inline beschreibbare Stellen */

[data-inline]:focus {
    outline: 2px solid var(--primary-50);
    outline-offset: 2px;
    border-radius: 2px;
}

[data-inline]:empty::before {
    content: attr(data-platzhalter);
    color: #b0bec5;
}

/* --- Eigenschaftenleiste --- */

.bd-leiste-kopf {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 13px;
    border-bottom: 1px solid var(--bd-rand);
    background: var(--primary-5);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #78909C);
}

.bd-leiste-koerper { padding: 12px 13px; display: grid; gap: 12px; }

.bd-leiste .form-group { margin-bottom: 0; }

.bd-zeile {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bd-listenzeile { margin-bottom: 5px; }

.bd-dehnbar { flex: 1; min-width: 0; }

.bd-schmal { flex: 0 0 84px; min-width: 0; }

.bd-farbreihe { display: flex; gap: 6px; }

.bd-tupfen {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.bd-tupfen[aria-pressed="true"] { border-color: var(--text-dark); }

.bd-schalter { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }

.bd-bildvorschau {
    display: block;
    width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: cover;
    border-radius: var(--bd-radius-s);
    margin-bottom: 6px;
}

/* ==========================================================================
   Newsletter-Arbeitsansicht
   Näherung für das Arbeiten. Das versendete HTML erzeugt der Server.
   ========================================================================== */

.nlv-ueberschrift {
    margin: 16px 0 6px;
    font-size: 1.55rem;
    line-height: 1.2;
    font-weight: 700;
    color: #1f2a2c;
}

.nlv-ueberschrift.nlv-klein { font-size: 1.15rem; }

.nlv-text { font-size: 0.92rem; line-height: 1.6; margin: 8px 0; }

.nlv-artikel { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0; }

.nlv-artikel.nlv-rechts { flex-direction: row-reverse; }

.nlv-artikel.nlv-oben { flex-direction: column; }

.nlv-artikelbild,
.nlv-artikel .nlv-bildleer {
    width: 150px;
    height: 100px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 4px;
}

.nlv-artikel.nlv-oben .nlv-artikelbild,
.nlv-artikel.nlv-oben .nlv-bildleer { width: 100%; height: 150px; }

.nlv-artikeltext { flex: 1; min-width: 0; }

.nlv-artikeltext h3 { font-size: 1.05rem; margin: 0 0 4px; color: #1f2a2c; }

.nlv-anriss { font-size: 0.85rem; line-height: 1.5; color: #66757a; }

.nlv-verweis {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-green);
}

.nlv-bildleer {
    display: grid;
    place-items: center;
    background: #eceff1;
    color: #90a4ae;
    font-size: 0.75rem;
    border-radius: 4px;
    padding: 16px;
    text-align: center;
}

.nlv-kopfbild,
.nlv-bild img { display: block; width: 100%; height: auto; border-radius: 4px; }

.nlv-termine {
    border: 1px solid #e3e8ea;
    border-radius: 6px;
    overflow: hidden;
    margin: 10px 0;
}

.nlv-termin {
    display: flex;
    gap: 12px;
    padding: 9px 12px;
    font-size: 0.82rem;
    align-items: baseline;
}

.nlv-termin + .nlv-termin { border-top: 1px solid #eef2f3; }

.nlv-termin time { font-weight: 700; color: var(--primary-green); flex: 0 0 82px; }

.nlv-termin small { color: #90a4ae; }

.nlv-zahlen { display: flex; gap: 8px; margin: 10px 0; }

.nlv-zahl {
    flex: 1;
    background: #f2f7f3;
    border-radius: 6px;
    padding: 11px 6px;
    text-align: center;
}

.nlv-zahl b {
    display: block;
    font-size: 1.3rem;
    color: var(--primary-green);
    line-height: 1.2;
}

.nlv-zahl small { font-size: 0.68rem; color: #7b8a8e; }

.nlv-hinweis {
    border-left: 4px solid #1D4ED8;
    background: #EFF6FF;
    padding: 12px 16px;
    border-radius: 0 6px 6px 0;
    margin: 10px 0;
    font-size: 0.85rem;
}

.nlv-hinweis strong { display: block; margin-bottom: 4px; color: #1D4ED8; }

.nlv-ton-achtung { border-left-color: #B45309; background: #FEF3C7; }
.nlv-ton-achtung strong { color: #B45309; }

.nlv-ton-erfolg { border-left-color: var(--primary-green); background: #ECFDF5; }
.nlv-ton-erfolg strong { color: var(--primary-green); }

.nlv-zitat {
    border-left: 4px solid var(--primary-green);
    background: #f5f5f5;
    padding: 12px 16px;
    margin: 10px 0;
    font-style: italic;
    font-size: 0.9rem;
}

.nlv-zitat cite { display: block; margin-top: 8px; font-size: 0.78rem; color: #666; }

.nlv-knopfzeile { margin: 14px 0; }

.nlv-knopf {
    display: inline-block;
    padding: 11px 26px;
    border-radius: 5px;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
}

.nlv-trenner { border: none; border-top: 1px solid #e0e0e0; margin: 14px 0; }

.nlv-bildtext { display: flex; gap: 12px; margin: 10px 0; font-size: 0.9rem; }

.nlv-bildtext.nlv-rechts { flex-direction: row-reverse; }

.nlv-bildtext img,
.nlv-bildtext .nlv-bildleer { width: 40%; flex: 0 0 auto; border-radius: 4px; }

.nlv-spalten { display: flex; gap: 12px; margin: 10px 0; font-size: 0.85rem; }

.nlv-spalte { flex: 1; min-width: 0; }

.nlv-footer {
    background: #f2f5f6;
    padding: 14px 18px;
    margin-top: 16px;
    border-radius: 6px;
    text-align: center;
    font-size: 0.72rem;
    color: #8b989c;
    line-height: 1.6;
}

.nlv-social { text-align: center; font-size: 0.8rem; color: #66757a; margin: 10px 0; }

.nl-echtansicht-rahmen { min-height: 60vh; }

/* --- Ohne Schreibrecht --- */

/* Griffe und Eigenschaften weg, der Entwurf bleibt lesbar. Die Palette und
   der Knopf zum Merken tragen data-requires-write und verschwinden über den
   gemeinsamen Helfer. */
.bd-nur-lesen .bd-griffe,
.bd-nur-lesen .bd-spalte-leiste,
.bd-nur-lesen #nl-bd-zurueck,
.bd-nur-lesen #nl-bd-vor { display: none; }

.bd-nur-lesen .bd-baustein {
    cursor: default;
    /* Ziehen und Auswählen erzeugen sonst Bewegung ohne Wirkung. */
    pointer-events: none;
}

/* --- Schmale Bildschirme --- */

@media (max-width: 1100px) {
    /* Einspaltig stehen Palette, Arbeitsfläche und Leiste untereinander und
       sind zusammen höher als das Modal. Dreispaltig scrollt jede Spalte für
       sich, hier muss die Werkbank selbst scrollen: der Wizard-Inhalt ist
       global `overflow: hidden`, und ohne diese Regel waren 177 Pixel samt
       Aufbau-Bausteinen und Eingabefeld unerreichbar abgeschnitten. */
    .bd-werkbank {
        grid-template-columns: 1fr;
        overflow-y: auto;
        min-height: 0;
    }
    .bd-palette-raster { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    .bd-papierraum { max-height: none; }

    /* Die Palette scrollt in sich, statt die Arbeitsfläche nach unten aus dem
       Bild zu schieben. Ohne das endete sie mitten in einer Kachelreihe und
       sah nach Fehler aus, obwohl der Rest nur weiter unten stand. */
    .bd-spalte-palette {
        max-height: 190px;
        overflow-y: auto;
    }
}

@media (max-width: 640px) {
    .bd-papierraum { padding: 10px; }
    .nlv-artikel,
    .nlv-bildtext,
    .nlv-spalten { flex-direction: column; }
    .nlv-artikelbild,
    .nlv-artikel .nlv-bildleer,
    .nlv-bildtext img,
    .nlv-bildtext .nlv-bildleer { width: 100%; }
}

/* Knopf über die volle Breite der Leiste, etwa "Bild wählen". */
.bd-voll {
    width: 100%;
    justify-content: center;
    margin-bottom: 6px;
}

/* --- Gemerkte Bausteine in der Palette --- */

.bd-palette-liste { display: grid; gap: 4px; margin-bottom: 10px; }

.bd-eigen {
    display: flex;
    align-items: stretch;
    gap: 3px;
}

.bd-eigen-name {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    border: 1px solid var(--bd-rand);
    border-radius: var(--bd-radius-s);
    background: var(--card-bg, #fff);
    color: var(--text-dark);
    font-size: 0.72rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--bd-dauer) var(--bd-kurve);
}

.bd-eigen-name:hover { border-color: var(--primary-50); }

.bd-eigen-name .icon { color: var(--primary-green); flex: 0 0 auto; }

.bd-eigen-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bd-eigen-weg {
    flex: 0 0 auto;
    width: 26px;
    border: 1px solid var(--bd-rand);
    border-radius: var(--bd-radius-s);
    background: var(--card-bg, #fff);
    color: var(--text-muted, #78909C);
    cursor: pointer;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity var(--bd-dauer) var(--bd-kurve),
                color var(--bd-dauer) var(--bd-kurve);
}

.bd-eigen:hover .bd-eigen-weg,
.bd-eigen-weg:focus-visible { opacity: 1; }

.bd-eigen-weg:hover { color: var(--danger, #C62828); }

/* --- Reiter der rechten Spalte --- */

.bd-reiter {
    display: flex;
    border-bottom: 1px solid var(--bd-rand);
    background: var(--primary-5);
}

.bd-reiter button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 8px;
    color: var(--text-muted, #78909C);
    border-bottom: 2px solid transparent;
}

.bd-reiter button[aria-selected="true"] {
    color: var(--primary-green);
    border-bottom-color: var(--primary-green);
}

/* --- Entwurf im Gespräch ---
   Aussehen und Verhalten kommen aus der gemeinsamen Chat-Oberfläche
   (css/ki-chat.css, Klassen mki-*). Hier steht nur, was die Einbettung in
   die schmale Seitenspalte braucht. */

#nl-bd-ki { display: flex; flex-direction: column; max-height: 520px; }

.nl-ki-chat { min-height: 0; }

/* Der Assistent hat eine ganze Seite, hier ist es eine Spalte: enger
   gesetzt, sonst steht die Blase allein in der Mitte. */
.nl-ki-chat .mki-msgs { padding: 12px; gap: 10px; }
.nl-ki-chat .mki-row,
.nl-ki-chat .mki-status,
.nl-ki-chat .mki-activity,
.nl-ki-chat .mki-input { max-width: none; }
.nl-ki-chat .mki-bubble { font-size: 13.5px; padding: 8px 12px; }
.nl-ki-chat .mki-welcome svg { width: 30px; height: 30px; }
.nl-ki-chat .mki-welcome h2 { font-size: 15px; }
.nl-ki-chat .mki-welcome p { font-size: 12.5px; }
.nl-ki-chat .mki-input-wrap { padding: 10px 12px; }
.nl-ki-chat .mki-send { width: 38px; height: 38px; }
.nl-ki-chat .mki-activity-step { white-space: pre-wrap; word-break: break-word; }

.nl-ki-vorschlaege {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 12px 10px;
}

/* === brief-step.css === */
/* === BriefStep Komponente ===
 *
 * Globale wiederverwendbare Brief-Anschreiben-Komponente.
 * Layout angelehnt an den EmailEditor (3 Spalten: Variablen | Editor mit
 * Toolbar | Vorschau), aber mit PDF-Live-Vorschau statt HTML-Vorschau.
 *
 * Wird in invite-modal und rundschreiben-modal verwendet.
 */

/* Der Mount-Container (das <div id="..."> in das die Komponente gerendert wird)
   muss flex-1 sein, damit die Komponente die volle Modal-Höhe nutzt und nicht
   überläuft. JS setzt die Klasse `.brief-step-host` automatisch. */
.brief-step-host {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.brief-step {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
    min-height: 0;
}

.brief-step-hinweis {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

/* --- Toolbar oben: Checkbox + Betreff --- */

.brief-step-toolbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.brief-step-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.brief-step-subject {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 280px;
}

.brief-step-subject-input {
    flex: 1;
}

/* --- Body: 3 Spalten (Variablen | Editor | Vorschau) --- */

.brief-step-body {
    display: flex;
    gap: 1rem;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Linke Spalte: Variablen-Liste (analog email-editor-variables) */

.brief-step-variables {
    width: 160px;
    flex-shrink: 0;
    border-right: 1px solid #e0e0e0;
    padding-right: 1rem;
    display: flex;
    flex-direction: column;
}

.brief-step-variables-title {
    margin: 0 0 0.75rem 0;
    font-size: 0.85rem;
    color: #666;
    font-weight: 500;
}

.brief-step-variable-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    overflow-y: auto;
}

.brief-step-variable-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.35rem 0.5rem;
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--primary-green, #2e7d32);
    font-family: monospace;
    transition: background 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brief-step-variable-btn:hover { background: #c8e6c9; }

.brief-step-variables-hint {
    margin-top: 1rem;
    font-size: 0.7rem;
    color: #999;
    line-height: 1.4;
}

/* Mittlere Spalte: Editor (Toolbar + contenteditable) */

.brief-step-editor {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.brief-step-editor-label {
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0;
}

.brief-step-toolbar-container {
    flex-shrink: 0;
}

.brief-step-content {
    width: 100%;
    flex: 1;
    min-height: 0;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 0 0 6px 6px;
    overflow-y: auto;
    font-size: 0.95rem;
    line-height: 1.5;
    font-family: inherit;
    background: #fff;
    outline: none;
}

.brief-step-content:focus {
    border-color: var(--primary-green, #2e7d32);
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.1);
}

/* Rechte Spalte: PDF-Vorschau */

.brief-step-preview {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #e0e0e0;
    padding-left: 1rem;
}

.brief-step-preview-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0 0.5rem 0;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0.5rem;
}

.brief-step-preview-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    overflow: hidden;
}

.brief-step-preview-counter {
    font-size: 0.8rem;
    color: #666;
    font-weight: 600;
}

.brief-step-preview-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dark, #333);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Wrapper um Frame + Status - bildet eigenen Stacking-Context für absolute Status-Overlay.
   Status liegt damit GENAU über dem PDF-Bereich, nicht über Counter/Pfeile, nicht über
   andere Spalten. */
.brief-step-preview-host {
    flex: 1;
    min-height: 0;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    background: #f7f9fc;
}

.brief-step-preview-frame {
    width: 100%;
    height: 100%;
}

/* "Gleicher Text aktiv": Body komplett ausgeblendet (kein Editor, keine
   Variablen, keine Vorschau). Es gibt schlicht nichts zu zeigen, weil der
   Brief 1:1 den E-Mail-Text verwendet. Der User sieht nur die Checkbox-
   Zeile - Sichtbarkeit kommt zurück sobald die Checkbox abgewählt wird. */

.brief-step.is-inherited .brief-step-body,
.brief-step.is-inherited .brief-step-subject {
    display: none;
}

/* Variablen-Buttons deaktivieren wenn "gleich wie E-Mail" aktiv */
.brief-step.is-inherited .brief-step-variable-list {
    opacity: 0.4;
    pointer-events: none;
}

/* Status-Anzeigen: KEINE deckenden Overlays. Loading wird gar nicht angezeigt
   (PdfViewer hat eigenes Loading-Verhalten). Empty und Error werden als
   einfache Meldung im PDF-Frame angezeigt - ohne flächigen Hintergrund. */

.brief-step-preview-status {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    color: #666;
    gap: 0.5rem;
    pointer-events: none;
}

.brief-step-preview-status .btn {
    pointer-events: auto;
    margin-top: 0.5rem;
}

.brief-step-preview-status[data-state="error"] {
    color: #c62828;
}

/* Responsive: Stack vertikal auf schmalen Bildschirmen */

@media (max-width: 1100px) {
    .brief-step-body {
        flex-direction: column;
        overflow-y: auto;
    }
    .brief-step-variables {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        padding-right: 0;
        padding-bottom: 0.75rem;
    }
    .brief-step-variable-list {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .brief-step-variable-btn {
        width: auto;
    }
    .brief-step-preview {
        border-left: none;
        border-top: 1px solid #e0e0e0;
        padding-left: 0;
        padding-top: 0.75rem;
    }
}

/* === zeiterfassung.css === */
/* =============================================================
   ZEITERFASSUNG — Meine Zeiten, Wochenansicht, Kalender, KPIs
   ============================================================= */

/* === Toolbar (Ansichtwechsel + Navigation) === */
.ze-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    padding: 0.875rem 1.25rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-green);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin-bottom: 1rem;
}

.ze-ansicht-gruppe {
    display: flex;
    background: var(--primary-5);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.ze-ansicht-btn {
    padding: 0.375rem 0.875rem;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ze-ansicht-btn:hover {
    background: var(--primary-10);
}

.ze-ansicht-btn.active {
    background: var(--primary-green);
    color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.ze-nav-gruppe {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ze-nav-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--card-bg);
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.ze-nav-btn:hover {
    border-color: var(--primary-green);
    background: var(--primary-5);
    color: var(--primary-green);
}

.ze-nav-btn svg {
    width: 16px;
    height: 16px;
}

.ze-zeitraum-label {
    font-weight: 600;
    font-size: 0.95rem;
    min-width: 180px;
    text-align: center;
    color: var(--text-dark);
    letter-spacing: -0.01em;
}

.ze-heute-btn {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-dark);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.ze-heute-btn:hover {
    border-color: var(--primary-green);
    background: var(--primary-5);
    color: var(--primary-green);
}

.ze-user-switcher {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--border-color);
}

.ze-user-switcher .custom-select-trigger {
    padding: 0.35rem 2rem 0.35rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    font-size: 0.825rem;
    font-weight: 500;
    min-width: 130px;
    position: relative;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ze-user-switcher .custom-select-trigger::after {
    content: '';
    position: absolute;
    right: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #90A4AE;
    pointer-events: none;
}

.ze-user-switcher .custom-select-trigger:hover {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 2px var(--primary-5);
}

.ze-toolbar-spacer {
    flex: 1;
}

/* Die KPI-Leiste steht jetzt im globalen Baustein kennzahlen.css
   (.kennzahl-grid / .kennzahl mit .kennzahl-icon-links). Hier stand eine
   eigene Fassung mit eigenem Raster, eigenem Radius und eigenen Farben. */

/* === Wochenansicht === */
.ze-wochen-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
}

.ze-wochen-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.ze-wochen-tabelle thead th {
    padding: 0.625rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #90A4AE;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    background: var(--primary-5);
    border-bottom: 2px solid var(--primary-30);
}

.ze-wochen-tabelle thead th:first-child {
    text-align: left;
    padding-left: 1.25rem;
    min-width: 200px;
}

.ze-wochen-tabelle thead th:last-child {
    text-align: right;
    padding-right: 1.25rem;
}

.ze-wochen-tabelle thead th.ze-wt-heute {
    background: var(--primary-20);
    color: var(--primary-green);
    font-weight: 700;
}

.ze-wochen-tabelle tbody td {
    padding: 0.5rem;
    text-align: center;
    border-bottom: 1px solid #f0f2f5;
    transition: background 0.15s;
}

.ze-wochen-tabelle tbody td:first-child {
    text-align: left;
    padding-left: 1.25rem;
    font-weight: 500;
    color: var(--text-dark);
}

.ze-wochen-tabelle tbody td:last-child {
    text-align: right;
    padding-right: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
}

.ze-wochen-tabelle tbody tr:hover td {
    background: var(--primary-5);
}

/* Stunden-Zelle mit Wert */
.ze-stunden-zelle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 28px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.825rem;
}

.ze-stunden-zelle.hat-wert {
    background: var(--primary-10);
    color: var(--primary-green);
}

.ze-stunden-zelle.voll {
    background: var(--primary-green);
    color: white;
}

/* Fußzeile */
.ze-wochen-tabelle tfoot td {
    padding: 0.75rem 0.5rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.875rem;
    background: var(--primary-5);
    border-top: 2px solid var(--primary-30);
    color: var(--text-dark);
}

.ze-wochen-tabelle tfoot td:first-child {
    text-align: left;
    padding-left: 1.25rem;
    color: #90A4AE;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ze-wochen-tabelle tfoot td:last-child {
    text-align: right;
    padding-right: 1.25rem;
    color: var(--primary-green);
    font-size: 1rem;
}

/* Soll-Zeile */
#ze-soll-row td {
    font-weight: 500;
    font-size: 0.8rem;
    color: #78909C;
    background: var(--card-bg);
    border-top: none;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

#ze-soll-row td:first-child {
    color: #90A4AE;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    padding-left: 1.25rem;
}

#ze-soll-row td:last-child {
    text-align: right;
    padding-right: 1.25rem;
}

/* Differenz-Zeile */
#ze-diff-row td {
    font-weight: 700;
    font-size: 0.8rem;
    background: var(--card-bg);
    border-top: 1px dashed var(--border-color);
    padding-top: 0.375rem;
    padding-bottom: 0.5rem;
}

#ze-diff-row td:first-child {
    color: #90A4AE;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    padding-left: 1.25rem;
}

#ze-diff-row td:last-child {
    text-align: right;
    padding-right: 1.25rem;
}

.ze-diff-positiv { color: var(--primary-green); }
.ze-diff-negativ { color: #c62828; }
.ze-diff-null { color: #90A4AE; }

.ze-empty-row td {
    text-align: center !important;
    color: #90A4AE;
    padding: 2.5rem 1rem !important;
    font-style: italic;
}

/* === Monatsansicht (Kalender) === */
.ze-kalender-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
    padding: 1.25rem;
}

.ze-kalender-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.ze-kalender-header {
    text-align: center;
    font-weight: 600;
    font-size: 0.72rem;
    color: #90A4AE;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.5rem 0.25rem;
}

.ze-kalender-tag {
    aspect-ratio: 1;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f8f9fb;
    transition: all 0.2s ease;
    gap: 2px;
    cursor: default;
    position: relative;
}

.ze-kalender-tag:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1;
}

.ze-kalender-tag-nr {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1;
}

.ze-kalender-tag-stunden {
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
}

/* Farb-Abstufungen */
.ze-kalender-tag.leer {
    background: #f8f9fb;
}

.ze-kalender-tag.wenig {
    background: linear-gradient(135deg, #fff9c4, #fff59d);
}

.ze-kalender-tag.wenig .ze-kalender-tag-stunden {
    color: #f57f17;
}

.ze-kalender-tag.normal {
    background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
}

.ze-kalender-tag.normal .ze-kalender-tag-stunden {
    color: var(--primary-green);
}

.ze-kalender-tag.voll {
    background: linear-gradient(135deg, var(--primary-green), color-mix(in srgb, var(--primary-green), black 10%));
}

.ze-kalender-tag.voll .ze-kalender-tag-nr {
    color: white;
}

.ze-kalender-tag.voll .ze-kalender-tag-stunden {
    color: rgba(255,255,255,0.9);
}

.ze-kalender-tag.heute {
    outline: 2px solid var(--primary-green);
    outline-offset: -2px;
}

.ze-kalender-tag.heute .ze-kalender-tag-nr {
    background: var(--primary-green);
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ze-kalender-tag.wochenende {
    opacity: 0.6;
}

.ze-kalender-leer {
    /* Leere Zellen vor dem 1. */
}

/* Monats-Zusammenfassung */
.ze-monat-zusammenfassung {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.ze-monat-stat {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.ze-monat-stat-label {
    color: #90A4AE;
    font-weight: 500;
}

.ze-monat-stat-value {
    font-weight: 700;
    color: var(--text-dark);
}

/* === Tagesansicht === */
.ze-tages-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
    padding: 0;
    overflow: hidden;
}

.ze-tages-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--primary-5);
    border-bottom: 1px solid var(--border-color);
}

.ze-tages-datum {
    font-weight: 600;
    color: var(--text-dark);
}

.ze-tages-summe {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-green);
}

/* === Wochentag-Grid (Arbeitszeitmodell) === */
.ze-wochentag-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.375rem;
    margin-top: 0.375rem;
}

.ze-wochentag-feld {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.ze-wochentag-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #90A4AE;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ze-wochentag-input {
    text-align: center;
    padding: 0.375rem 0.25rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.ze-wochentag-we .ze-wochentag-label {
    color: #c62828;
}

.ze-wochentag-we .ze-wochentag-input {
    background: #fafafa;
    color: #90A4AE;
}

.ze-wochentag-summe {
    text-align: right;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-green);
}

@media (max-width: 500px) {
    .ze-wochentag-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* === Such-Dropdown (Buchungsmodal) === */
.ze-search-dropdown {
    position: relative;
}

.ze-search-input {
    width: 100%;
}

.ze-search-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 280px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.ze-search-results.open {
    display: block;
}

.ze-search-group-label {
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #90A4AE;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--primary-5);
    border-top: 1px solid #f0f0f0;
}

.ze-search-group-label:first-child {
    border-top: none;
}

.ze-search-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-dark);
    transition: background 0.1s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ze-search-item:hover {
    background: var(--primary-10);
}

.ze-search-item-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ze-search-item-badge.auftrag {
    background: var(--primary-10);
    color: var(--primary-green);
}

.ze-search-item-badge.intern {
    background: #e3f2fd;
    color: #1565c0;
}

.ze-search-item-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ze-search-selected {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--primary-5);
    border: 1px solid var(--primary-30);
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dark);
}

.ze-search-selected-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ze-search-clear {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: #90A4AE;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
    transition: color 0.15s;
}

.ze-search-clear:hover {
    color: #c62828;
}

/* === Responsive === */
@media (max-width: 768px) {
    .ze-toolbar {
        padding: 0.75rem;
    }

    .ze-zeitraum-label {
        min-width: 0;
        font-size: 0.85rem;
    }

    .ze-wochen-tabelle {
        font-size: 0.78rem;
    }

    .ze-wochen-tabelle thead th,
    .ze-wochen-tabelle tbody td {
        padding: 0.375rem 0.25rem;
    }

    .ze-wochen-tabelle thead th:first-child,
    .ze-wochen-tabelle tbody td:first-child {
        padding-left: 0.5rem;
    }

    .ze-kalender-tag {
        min-height: 44px;
    }

    .ze-kalender-tag-nr {
        font-size: 0.75rem;
    }
}

@media (max-width: 500px) {
    .ze-ansicht-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }

    .ze-nav-btn {
        width: 28px;
        height: 28px;
    }
}

/* ==================== Anklickbare Wochenzellen ====================
   Die Wochentabelle war reine Anzeige: die groesste Flaeche des Bildschirms
   ohne jede Funktion. Jetzt fuehrt jede Zelle zu ihrer Buchung. */

button.ze-stunden-zelle.ze-zelle-klick {
    border: none;
    font: inherit;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

button.ze-stunden-zelle.ze-zelle-klick:hover,
button.ze-stunden-zelle.ze-zelle-klick:focus-visible {
    transform: scale(1.06);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* ==================== Suchergebnisse im Buchungsmodal ====================
   Nutzt die globalen autocomplete-Klassen, damit Pfeiltasten und Enter
   funktionieren. Gruppenueberschriften kommen hier dazu. */

.autocomplete-gruppe {
    padding: 0.35rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #90A4AE);
    background: #FAFAFA;
    border-bottom: 1px solid #f0f0f0;
}

.autocomplete-leer {
    color: var(--text-muted, #90A4AE);
    cursor: default;
}

/* Sichtbarkeit steuert das Skript über style.display, wie bei jedem
   anderen Autocomplete im Projekt. Eine eigene .open-Klasse wäre still
   gebrochen, sobald der globale Handler bei Escape ein Inline-display setzt. */
#bm-auftrag-results.autocomplete-results {
    display: none;
    max-height: 260px;
}

/* ==================== Spesen ==================== */

.ze-spesen-liste {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ze-spese-zeile {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr 0.7fr 0.7fr 1.6fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-color, #E0E0E0);
    border-radius: 6px;
    background: #FAFAFA;
}

.ze-spese-betrag {
    font-weight: 600;
    text-align: right;
}

.ze-spese-menge,
.ze-spese-satz {
    text-align: right;
    color: var(--text-muted, #607D8B);
}

.ze-spese-text {
    color: var(--text-muted, #607D8B);
    overflow-wrap: anywhere;
}

.ze-monat-fehler {
    grid-column: 1 / -1;
    padding: 1.5rem;
    text-align: center;
    color: var(--danger, #EF5350);
}

@media (max-width: 700px) {
    .ze-spese-zeile {
        grid-template-columns: 1fr auto;
        row-gap: 0.25rem;
    }

    .ze-spese-menge,
    .ze-spese-satz,
    .ze-spese-text {
        text-align: left;
    }
}

/* Auslastungsstufen und Wochensumme als Klassen statt Inline-Farben. */
.ze-last-voll { color: var(--primary-green, #2E7D32); }
.ze-last-mittel { color: #FF9800; }
.ze-last-gering { color: #C62828; }
.ze-wochensumme { color: var(--primary-green, #2E7D32); }

/* === wiki.css === */
/* =============================================================
   WIKI - Übersicht, Artikel, Modal, Suche
   ============================================================= */

/* === Header-Hilfe-Button === */
#header-hilfe-btn {
    width: auto;
    height: 40px;
    border-radius: 20px;
    padding: 0 0.75rem;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.header-hilfe-label {
    color: white;
}

@media (max-width: 600px) {
    .header-hilfe-label { display: none; }
    #header-hilfe-btn { width: 40px; padding: 0; border-radius: 50%; }
}

/* === Suchleiste === */
.wiki-search-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--primary-5);
    border: 1px solid var(--primary-30);
    border-radius: 8px;
    transition: border-color 0.2s;
}

.wiki-search-bar:focus-within {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px var(--primary-10);
}

.wiki-search-bar .icon {
    width: 18px;
    height: 18px;
    color: var(--primary-green);
    flex-shrink: 0;
}

.wiki-search-bar .form-control {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 0.95rem;
    box-shadow: none;
    flex: 1;
}

.wiki-search-bar .form-control:focus {
    outline: none;
    box-shadow: none;
}

/* === Leere Anzeige === */
.wiki-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #90a4ae;
}

.wiki-empty-icon {
    width: 48px;
    height: 48px;
    color: var(--primary-30);
    margin-bottom: 1rem;
}

/* === Kategorie-Sektionen === */
.wiki-category-section {
    margin-bottom: 1.5rem;
}

.wiki-category-section:last-child {
    margin-bottom: 0;
}

.wiki-category-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-green);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-10);
}

.wiki-category-count {
    margin-left: auto;
    background: var(--primary-10);
    color: var(--primary-green);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
}

/* Wiki-Tiles: nutzen die globale .module-tile Klasse, nur margin-top Korrektur */
.wiki-category-section .module-tiles {
    margin-top: 0;
}

/* === Tags === */
.wiki-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    background: var(--primary-5);
    color: var(--primary-green);
    border: 1px solid var(--primary-20, rgba(76, 175, 80, 0.2));
}

.wiki-tag-module {
    background: #e3f2fd;
    color: #1565c0;
    border-color: #bbdefb;
}

.wiki-tag-version {
    background: var(--primary-5);
    color: var(--primary-green);
    border-color: var(--primary-20);
    font-variant-numeric: tabular-nums;
}

/* === Zurück-Link === */
.wiki-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary-green);
    text-decoration: none;
    margin-bottom: 1.25rem;
    transition: gap 0.15s;
}

.wiki-back-link:hover {
    gap: 0.6rem;
    text-decoration: underline;
}

/* === Artikel === */
.wiki-article-title {
    font-size: 1.5rem;
    margin: 0 0 0.75rem;
}

.wiki-article-meta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.wiki-article-date {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: #90a4ae;
    margin-left: auto;
}

/* === Artikel-Modal: Toolbar oben, darunter Inhalt + Meta-Spalte === */
#wiki-seite-modal .gm-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Toolbar: Artikel-Suche + Zugang zu allen Themen */
.wiki-modal-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
    flex-shrink: 0;
}
.wiki-find {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    background: var(--page-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.wiki-find:focus-within { border-color: var(--primary-green); box-shadow: 0 0 0 3px var(--primary-10); }
.wiki-find-ic { width: 16px; height: 16px; color: #90a4ae; flex-shrink: 0; }
.wiki-find-input { flex: 1; border: none; background: transparent; outline: none; font-size: 0.9rem; color: var(--text-dark); min-width: 0; }
.wiki-find-count { font-size: 0.78rem; color: #90a4ae; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wiki-find-all { flex-shrink: 0; white-space: nowrap; }

/* Unterer Bereich: Inhaltsverzeichnis links, Inhalt mitte, Meta rechts */
.wiki-modal-split {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

/* Linke Navigations-Spalte: nur das Inhaltsverzeichnis */
.wiki-modal-nav {
    width: 230px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    padding: 1.5rem 1rem;
    overflow-y: auto;
}
.wiki-nav-label {
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: #90a4ae; margin-bottom: 0.6rem;
}

.wiki-modal-content {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 1.75rem 2rem;
}

.wiki-modal-meta {
    width: 236px;
    flex-shrink: 0;
    border-left: 1px solid var(--border-color);
    padding: 1.5rem 1.35rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Chips (Kategorie + Modul) */
.wiki-meta-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wiki-chip {
    font-size: 0.72rem; font-weight: 600;
    padding: 0.25rem 0.65rem; border-radius: 999px;
    background: var(--primary-10); color: var(--primary-green);
    white-space: nowrap;
}
.wiki-chip-modul { background: #e3f2fd; color: #1565c0; }

.wiki-meta-label {
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: #90a4ae; margin-bottom: 0.55rem;
}

/* Verwandte Themen als Pills */
.wiki-meta-related { display: flex; flex-direction: column; gap: 0.35rem; }
.wiki-related-pill {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.65rem; border-radius: 9px;
    color: var(--text-dark); text-decoration: none; font-size: 0.85rem;
    background: var(--primary-5); cursor: pointer; line-height: 1.3;
    transition: background 0.15s, color 0.15s;
}
.wiki-related-pill:hover { background: var(--primary-10); color: var(--primary-green); }
.wiki-related-ic { width: 14px; height: 14px; color: var(--primary-green); flex-shrink: 0; }

/* Schlagworte */
.wiki-meta-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.wiki-tag-soft {
    font-size: 0.72rem; padding: 0.2rem 0.55rem; border-radius: 6px;
    background: var(--card-bg); color: #607d8b; border: 1px solid var(--border-color);
}

/* Dezente Fußzeile (Version + Datum) */
.wiki-meta-foot {
    margin-top: auto; padding-top: 0.9rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.72rem; color: #90a4ae; font-variant-numeric: tabular-nums;
}

/* Footer-Zurück-Button links ausrichten */
.wiki-footer-back { margin-right: auto; }

/* Inhaltsverzeichnis (Sprungmarken zu den Kapiteln) */
.wiki-toc { display: flex; flex-direction: column; gap: 0.05rem; }
.wiki-toc-link {
    display: block;
    padding: 0.35rem 0.55rem;
    border-left: 2px solid transparent;
    border-radius: 0 5px 5px 0;
    color: var(--text-dark);
    font-size: 0.82rem;
    line-height: 1.35;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.wiki-toc-link:hover {
    background: var(--primary-5);
    border-left-color: var(--primary-green);
    color: var(--primary-green);
}
.wiki-toc-sub {
    padding-left: 1.4rem;
    font-size: 0.78rem;
    opacity: 0.85;
}

/* Treffer der Artikel-Suche */
mark.wiki-find-hit {
    background: #fff3b0;
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
    scroll-margin: 1rem;
}
mark.wiki-find-hit.current {
    background: var(--primary-green);
    color: #fff;
}

/* Verwandte Themen (Vollseite): Karten-Liste unter dem Artikel */
.wiki-verwandt-block {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}
.wiki-verwandt-titel {
    font-size: 1rem;
    color: var(--primary-green);
    margin: 0 0 0.75rem;
}
.wiki-verwandt-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.wiki-verwandt-karte {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.88rem;
    transition: border-color 0.15s, background 0.15s;
}
.wiki-verwandt-karte:hover {
    border-color: var(--primary-green);
    background: var(--primary-5);
}
.wiki-verwandt-karte svg { color: var(--primary-green); }

/* Verwandte Themen (Sidebar): klickbare Artikel-Links */
.wiki-verwandte {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.wiki-verwandt-link {
    color: var(--primary-green);
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    width: fit-content;
}
.wiki-verwandt-link:hover {
    border-bottom-color: var(--primary-green);
}

/* === Markdown-Content === */
.wiki-content { line-height: 1.7; }
/* Kein Leerraum über dem ersten Element (der Titel steht schon im Modal-Kopf). */
.wiki-content > :first-child { margin-top: 0; }

.wiki-content h1 { font-size: 1.5rem; margin: 2rem 0 0.75rem; padding-bottom: 0.3rem; border-bottom: 2px solid var(--primary-10); }
.wiki-content h2 { font-size: 1.25rem; margin: 1.75rem 0 0.5rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--border-color); }
.wiki-content h3 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
.wiki-content h4 { font-size: 0.95rem; margin: 1.25rem 0 0.4rem; color: #546e7a; }

.wiki-content p { margin: 0 0 1rem; }

.wiki-content a { color: var(--primary-green); text-decoration: underline; text-underline-offset: 2px; }
.wiki-content a:hover { color: var(--hover-green); }

.wiki-content ul,
.wiki-content ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.wiki-content li { margin-bottom: 0.3rem; line-height: 1.6; }

.wiki-content code {
    background: var(--primary-5);
    color: #c62828;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85em;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.wiki-content pre {
    background: #263238;
    color: #eceff1;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0 0 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.wiki-content pre code {
    background: none;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

.wiki-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

.wiki-content th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    background: var(--primary-5);
    border-bottom: 2px solid var(--primary-30);
    font-weight: 600;
    font-size: 0.8rem;
}

.wiki-content td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.wiki-content tr:hover td { background: var(--primary-5); }

.wiki-content blockquote {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--primary-green);
    background: var(--primary-5);
    border-radius: 0 6px 6px 0;
    color: #37474f;
}

.wiki-content blockquote p:last-child { margin-bottom: 0; }

.wiki-content hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 2rem 0;
}

.wiki-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.wiki-content mark {
    background: rgba(255, 235, 59, 0.4);
    padding: 0.1rem 0.2rem;
    border-radius: 2px;
}

/* === Wiki-Suche im Modal === */
#wiki-suche-modal .gm-body {
    padding: 1rem 1.5rem;
}

.wiki-suche-ergebnisse {
    max-height: 420px;
    overflow-y: auto;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wiki-suche-item {
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.wiki-suche-item:hover { border-color: var(--primary-green); background: var(--primary-5); }

/* Themen-Verzeichnis (Hilfe-Hauptseite im Such-Fenster) */
.wiki-dir-cat { margin-bottom: 1.1rem; }
.wiki-dir-cat-titel {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--primary-green);
    margin: 0 0 0.5rem; padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border-color);
}
.wiki-dir-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
.wiki-dir-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.6rem; border-radius: 8px;
    color: var(--text-dark); text-decoration: none; font-size: 0.88rem;
    cursor: pointer; transition: background 0.12s, color 0.12s;
}
.wiki-dir-item:hover { background: var(--primary-5); color: var(--primary-green); }
.wiki-dir-ic { width: 15px; height: 15px; color: var(--primary-green); flex-shrink: 0; }
@media (max-width: 600px) { .wiki-dir-list { grid-template-columns: 1fr; } }

.wiki-suche-item-titel {
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wiki-suche-kategorie {
    font-size: 0.7rem;
    font-weight: 600;
    background: #e3f2fd;
    color: #1565c0;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
}

.wiki-suche-snippet {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.25rem;
    line-height: 1.4;
}

.wiki-suche-leer {
    text-align: center;
    padding: 2rem;
    color: #90a4ae;
}

/* Hover-Tooltips wurden entfernt. Verweise im Artikeltext sind normale Links
   (grün, unterstrichen) und öffnen per Klick den Zielartikel. */

/* === Responsive === */
@media (max-width: 900px) {
    .wiki-categories { grid-template-columns: 1fr; }
    /* Meta-Spalte unter den Inhalt stapeln; der untere Bereich scrollt, Toolbar bleibt oben. */
    .wiki-modal-split { flex-direction: column; overflow-y: auto; }
    .wiki-modal-content { overflow: visible; padding: 1.25rem; }
    .wiki-modal-nav {
        width: auto; overflow: visible;
        border-right: none; border-bottom: 1px solid var(--border-color);
    }
    .wiki-modal-meta {
        width: auto; overflow: visible;
        border-left: none; border-bottom: 1px solid var(--border-color);
    }
    .wiki-meta-foot { margin-top: 0; }
}

@media (max-width: 600px) {
    .wiki-search-bar { padding: 0.5rem 0.75rem; }
    .wiki-article-title { font-size: 1.25rem; }
    .wiki-content h1 { font-size: 1.25rem; }
    .wiki-content h2 { font-size: 1.1rem; }
}

/* === mfv-markdown.css === */
/* Darstellung gerenderter Markdown-Antworten (MFV.markdown).
   Bewusst an einer Klasse aufgehängt (.mfv-md), damit dieselbe Typografie
   überall gilt, wo Modell- oder Fremdtext erscheint: Chat-Blase, Vollseite,
   spätere Vorschauen. Alle Werte kommen aus den globalen Design-Variablen. */

.mfv-md {
    --md-luft: 10px;
    line-height: 1.6;
}
.mfv-md > *:first-child { margin-top: 0; }
.mfv-md > *:last-child { margin-bottom: 0; }

/* ---- Fließtext und Überschriften ---- */
.mfv-md p { margin: 0 0 var(--md-luft); }
.mfv-md .mfv-md-h {
    margin: 18px 0 8px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--text-dark);
}
.mfv-md h3.mfv-md-h { font-size: 1.12em; }
.mfv-md h4.mfv-md-h { font-size: 1.04em; }
.mfv-md h5.mfv-md-h,
.mfv-md h6.mfv-md-h {
    font-size: .95em;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .75;
}
.mfv-md .mfv-md-hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 16px 0;
}
.mfv-md .mfv-md-link { color: var(--primary-green); text-decoration: underline; }
.mfv-md .mfv-md-link:hover { text-decoration: none; }
.mfv-md del { opacity: .6; }

/* ---- Listen ---- */
.mfv-md ul,
.mfv-md ol { margin: 0 0 var(--md-luft); padding-left: 22px; }
.mfv-md li { margin: 3px 0; }
.mfv-md li > ul,
.mfv-md li > ol { margin: 3px 0 0; }
.mfv-md ul { list-style: disc; }
.mfv-md ul ul { list-style: circle; }
.mfv-md ul ul ul { list-style: square; }

/* Aufgabenliste: eigene Kästchen statt Aufzählungszeichen. */
.mfv-md li.mfv-md-task { list-style: none; margin-left: -18px; padding-left: 24px; position: relative; }
.mfv-md .mfv-md-check {
    position: absolute;
    left: 0;
    top: .25em;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--border-color);
    border-radius: 3px;
    background: var(--card-bg);
}
.mfv-md .mfv-md-check.erledigt {
    border-color: var(--primary-green);
    background: var(--primary-green);
}
/* Haken als reine CSS-Form - kein Emoji, kein zusätzliches Sprite nötig. */
.mfv-md .mfv-md-check.erledigt::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    rotate: 45deg;
}

/* ---- Tabellen ---- */
/* Breite Tabellen scrollen in ihrem eigenen Kasten, damit die Blase nicht
   auseinandergezogen wird und die Seite nie seitlich scrollt. */
.mfv-md .mfv-md-tablewrap {
    margin: 0 0 var(--md-luft);
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
}
.mfv-md .mfv-md-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95em;
}
.mfv-md .mfv-md-table th {
    text-align: left;
    padding: 8px 11px;
    background: var(--primary-5);
    border-bottom: 1px solid var(--border-color);
    font-size: .82em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-dark);
    white-space: nowrap;
}
.mfv-md .mfv-md-table td {
    padding: 7px 11px;
    border-bottom: 1px solid var(--border-10, rgba(0, 0, 0, .06));
    vertical-align: top;
}
.mfv-md .mfv-md-table tbody tr:last-child td { border-bottom: none; }
.mfv-md .mfv-md-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, .015); }
.mfv-md .mfv-md-table tbody tr:hover { background: var(--primary-10); }
.mfv-md .mfv-md-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Beträge ---- */
/* Farbe trägt hier Bedeutung: rot ist ein Minus, grün ein Plus. Ohne
   Vorzeichen bleibt der Betrag neutral, nur mit Tabellenziffern gesetzt. */
.mfv-md .mfv-betrag { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mfv-md .mfv-betrag-minus { color: var(--color-danger-fg); font-weight: 600; }
.mfv-md .mfv-betrag-plus { color: var(--color-success-fg); font-weight: 600; }

/* ---- Markierung ---- */
.mfv-md .mfv-md-mark {
    background: var(--color-warning-bg);
    color: var(--color-warning-fg);
    padding: 0 3px;
    border-radius: 3px;
}

/* ---- Code ---- */
.mfv-md .mfv-md-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
    background: var(--primary-5);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1px 5px;
}
.mfv-md .mfv-md-pre {
    margin: 0 0 var(--md-luft);
    padding: 11px 13px;
    background: #1f2430;
    color: #e6e9ef;
    border-radius: 8px;
    overflow-x: auto;
    position: relative;
}
.mfv-md .mfv-md-pre code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
    line-height: 1.5;
    white-space: pre;
}
/* Sprachkennung als kleine Fahne oben rechts. */
.mfv-md .mfv-md-pre[data-sprache]::before {
    content: attr(data-sprache);
    position: absolute;
    top: 6px;
    right: 10px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .5;
}

/* ---- Zitate und Hinweiskästen ---- */
.mfv-md .mfv-md-quote {
    margin: 0 0 var(--md-luft);
    padding: 9px 13px;
    border-left: 3px solid var(--border-color);
    border-radius: 0 6px 6px 0;
    background: var(--primary-5);
}
.mfv-md .mfv-md-quote p:last-child { margin: 0; }
.mfv-md .mfv-md-hinweis {
    border-left-color: var(--primary-green);
    background: var(--primary-5);
}
.mfv-md .mfv-md-tipp {
    border-left-color: var(--color-success-fg);
    background: var(--color-success-bg);
    color: var(--color-success-fg);
}
.mfv-md .mfv-md-warnung {
    border-left-color: var(--color-warning-fg);
    background: var(--color-warning-bg);
    color: var(--color-warning-fg);
}
.mfv-md .mfv-md-fehler {
    border-left-color: var(--color-danger-fg);
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
}

/* ---- In der Chat-Blase ---- */
/* Die Blase begrenzt sich sonst auf 86% und lässt Tabellen quetschen. Sobald
   eine Tabelle oder ein Codeblock drin steckt, darf sie die volle Breite. */
.mki-bubble .mfv-md-tablewrap,
.mki-bubble .mfv-md-pre { max-width: 100%; }
.mki-row.assistant .mki-bubble:has(.mfv-md-tablewrap),
.mki-row.assistant .mki-bubble:has(.mfv-md-pre) { max-width: 100%; }

/* === ki-hinweis.css === */
/* =============================================================
   KI-Kennzeichnung - globale Komponente

   Erfüllt § 5 der KI-Nutzungsbedingungen ("KI-generierte Inhalte
   werden in der Software als solche gekennzeichnet") und den
   Transparenzhinweis nach Art. 50 Abs. 1 der KI-Verordnung.

   Drei Erscheinungsformen, ein Farbton:
     .ki-hinweis   Banner über einem befüllten Feld oder Vorschlag.
                   Verschwindet, sobald der Benutzer den Inhalt
                   ändert - danach ist es sein Text, nicht der der KI.
     .ki-marke     Inline-Etikett in Tabellenzellen und Kopfzeilen,
                   wo für ein Banner kein Platz ist.
     .ki-fussnote  Dauerhafter Hinweis unter einem Chat-Eingabefeld.
                   Bleibt stehen, weil dort laufend neu erzeugt wird.

   Eigener Ton statt --color-info-*: der Hinweis darf nicht mit
   Status- und Fehlermeldungen verwechselt werden.
   ============================================================= */
:root {
    --ki-hinweis-bg: #f3e8fd;
    --ki-hinweis-fg: #6a1b9a;
    --ki-hinweis-border: #ce93d8;
}

/* --- Banner ------------------------------------------------- */

.ki-hinweis[hidden] {
    display: none;
}

.ki-hinweis {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    margin: 0 0 0.75rem;
    border-radius: 6px;
    border-left: 4px solid var(--ki-hinweis-border);
    background: var(--ki-hinweis-bg);
    color: var(--ki-hinweis-fg);
    font-size: 0.85rem;
    line-height: 1.45;
}

.ki-hinweis__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.ki-hinweis__content {
    flex: 1;
    min-width: 0;
}

.ki-hinweis__titel {
    font-weight: 600;
    word-wrap: break-word;
}

.ki-hinweis__body {
    opacity: 0.9;
    word-wrap: break-word;
}

/* Aktionen im Banner, z.B. "Verwerfen" beim Mail-Entwurf. */
.ki-hinweis__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.ki-hinweis__actions .btn {
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
}

@media (max-width: 600px) {
    .ki-hinweis {
        flex-wrap: wrap;
    }
    .ki-hinweis__actions {
        width: 100%;
        margin-top: 0.4rem;
    }
}

/* Im Mail-Editor sitzt der Hinweis zwischen Werkzeugleiste und Schreibfläche.
   Dort ist er ein durchgehender Streifen: eigener Radius und unterer Abstand
   würden ihn wie ein hineingelegtes Kästchen wirken lassen, obwohl er zum
   Editor gehört. */
.compose-editor-col > .ki-hinweis {
    border-radius: 0;
    margin-bottom: 0;
}

/* Kompakte Variante für Seitenleiste und Modal-Kopf */
.ki-hinweis--kompakt {
    padding: 0.45rem 0.6rem;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
}

.ki-hinweis--kompakt .ki-hinweis__icon {
    width: 15px;
    height: 15px;
}

/* --- Inline-Etikett ---------------------------------------- */

.ki-marke {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: var(--ki-hinweis-bg);
    color: var(--ki-hinweis-fg);
    border: 1px solid var(--ki-hinweis-border);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    vertical-align: middle;
}

.ki-marke .icon {
    width: 12px;
    height: 12px;
}

/* --- Kopfzeile: offene Pflichten --------------------------- */

/* Der Knopf trägt die Beschriftung "Aufgaben" und ist deshalb - wie Hilfe und
   Assistent - eine Pille statt eines runden 40-Pixel-Knopfes. */
#header-aufgaben-btn {
    width: auto;
    height: 40px;
    border-radius: 20px;
    padding: 0 0.75rem;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.header-aufgaben-label {
    color: white;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .header-aufgaben-label { display: none; }
    #header-aufgaben-btn { width: 40px; padding: 0; border-radius: 50%; }
}

/* Solange etwas offen ist, pulsiert der Knopf, damit er auch dann auffällt,
   wenn der Blick auf dem Seiteninhalt liegt. Animiert wird nur die
   Hintergrundfarbe des Knopfes und die Skalierung des Zählers - beides
   kompositorfreundlich, kein Umbruch des Layouts. */
.header-action-btn.header-aufgaben-offen {
    background: rgba(255, 255, 255, 0.22);
    animation: header-aufgaben-puls 2s ease-in-out infinite;
}

.header-action-btn.header-aufgaben-offen .header-badge {
    animation: header-aufgaben-zaehler 2s ease-in-out infinite;
}

@keyframes header-aufgaben-puls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28); }
}

@keyframes header-aufgaben-zaehler {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

/* Wer reduzierte Bewegung eingestellt hat, bekommt den Hinweis ohne Blinken. */
@media (prefers-reduced-motion: reduce) {
    .header-action-btn.header-aufgaben-offen,
    .header-action-btn.header-aufgaben-offen .header-badge {
        animation: none;
    }
}

/* --- Dauerhafte Fußnote ------------------------------------ */

.ki-fussnote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.5rem auto 0;
    max-width: 780px;
    color: #78909c;
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: center;
}

.ki-fussnote .icon {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
}

@media (max-width: 600px) {
    .ki-fussnote {
        text-align: left;
        align-items: flex-start;
    }
}

/* === ki-kompetenz.css === */
/* =============================================================
   KI-Kompetenz-Schulung

   Gestalterische Richtung: redaktionelle Lehrstrecke, nicht Formular.
   Eine breite Textspalte trägt den Inhalt, die Aufgabenkarte tritt durch
   Schatten und Überlappung nach vorn, und die Rückmeldung erscheint direkt
   unter der gewählten Antwort statt in einem Dialog. Der KI-Ton aus
   ki-hinweis.css bleibt die Leitfarbe, damit Schulung und Kennzeichnung als
   eine Sache erkennbar sind.
   ============================================================= */

/* --- Grundraster: schmale Leiste, breite Arbeitsfläche ---------
   Die Leiste bleibt beim Blättern stehen (sticky), damit der Wechsel
   zwischen den Bereichen immer eine Handbewegung entfernt ist. Unter
   900 Pixeln wandert sie über den Inhalt und die Navigation wird zur
   waagrechten Reihe - eine ausklappbare Schublade wäre für vier Punkte
   zu viel Mechanik. */

.kk-seite {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    text-align: left;
}

.kk-leiste {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.kk-leiste-kopf { padding-bottom: 0.25rem; }

.kk-leiste-titel {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.kk-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.kk-nav-punkt {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #546e7a;
    font-size: 0.92rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.kk-nav-punkt .icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.kk-nav-punkt:hover { background: rgba(0, 0, 0, 0.04); color: var(--text-dark); }

.kk-nav-punkt--aktiv {
    background: var(--ki-hinweis-bg, #f3e5f5);
    color: var(--ki-hinweis-fg, #6a1b9a);
    font-weight: 600;
}

.kk-nav-marke {
    margin-left: auto;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    background: var(--color-danger-fg, #c62828);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.kk-leiste-fuss {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.82rem;
    line-height: 1.55;
    color: #78909c;
}

.kk-leiste-fuss strong { color: var(--text-dark); }

.kk-inhalt { min-width: 0; }

@media (max-width: 900px) {
    .kk-seite {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }
    .kk-leiste { position: static; }
    .kk-nav { flex-direction: row; flex-wrap: wrap; }
    .kk-nav-punkt { width: auto; }
    .kk-leiste-fuss { padding-top: 0.75rem; }
}

.kk-ueberzeile {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ki-hinweis-fg);
}

/* --- Fortschritt: dünne Linie, kein Balkendiagramm --- */

.kk-fortschritt { padding: 1rem 0 0; }

.kk-fortschritt-balken {
    height: 4px;
    border-radius: 2px;
    background: #eceff1;
    overflow: hidden;
}

.kk-fortschritt-fuellung {
    height: 100%;
    width: 0;
    border-radius: 2px;
    background: var(--ki-hinweis-fg);
    /* Nur transform animieren wäre bei einer Breitenänderung aufwendiger als
       der Nutzen; die Leiste ist 4px hoch und ändert sich nur bei Klick. */
    transition: width 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.kk-fortschritt-text {
    display: flex;
    justify-content: space-between;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: #78909c;
}

/* --- Bühne und Karten --- */

.kk-buehne { padding-top: 1.75rem; }

.kk-laden { color: #90a4ae; font-style: italic; padding: 2rem 0; }

.kk-karte {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.75rem;
    box-shadow: 0 8px 28px rgba(38, 50, 56, 0.07);
}

.kk-thema {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #90a4ae;
}

.kk-frage {
    margin: 0 0 1.25rem;
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: 600;
}

/* --- Medienpaare: zwei Spalten, die auf Schmalformat untereinander gehen --- */

.kk-medien {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.kk-medium {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.9rem;
    background: #fafafa;
}

.kk-medium-titel {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
}

.kk-medium audio { width: 100%; }

/* Beide Bilder liegen im Verhältnis 2:1 und exakt gleich groß vor - sonst wäre
   das Format selbst schon ein Hinweis darauf, welches erzeugt wurde. */
.kk-medium img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

/* --- Textvergleich: Original gegen Zusammenfassung --- */

.kk-textpaar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.kk-textblock {
    border-left: 3px solid var(--border-color);
    padding: 0.2rem 0 0.2rem 0.9rem;
    font-size: 0.92rem;
    line-height: 1.6;
}

.kk-textblock--ki { border-left-color: var(--ki-hinweis-border); }

.kk-textblock-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #90a4ae;
    margin-bottom: 0.35rem;
}

/* --- Antwortoptionen: gestaltete Zustände --- */

.kk-optionen {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.kk-option {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    font-size: 0.95rem;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.kk-option:hover:not(:disabled) {
    border-color: var(--ki-hinweis-border);
    transform: translateX(2px);
}

.kk-option:focus-visible {
    outline: 2px solid var(--ki-hinweis-fg);
    outline-offset: 2px;
}

.kk-option:disabled { cursor: default; }

.kk-option-marke {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #78909c;
}

.kk-option-marke .icon { width: 13px; height: 13px; }

.kk-option--richtig {
    border-color: var(--color-success-fg);
    background: var(--color-success-bg);
}

.kk-option--richtig .kk-option-marke {
    border-color: var(--color-success-fg);
    color: var(--color-success-fg);
}

.kk-option--falsch {
    border-color: var(--color-danger-fg);
    background: var(--color-danger-bg);
}

.kk-option--falsch .kk-option-marke {
    border-color: var(--color-danger-fg);
    color: var(--color-danger-fg);
}

.kk-option--einsicht {
    border-color: var(--color-info-fg, #01579b);
    background: var(--color-info-bg, #e1f5fe);
}

.kk-option--einsicht .kk-option-marke {
    border-color: var(--color-info-fg, #01579b);
    color: var(--color-info-fg, #01579b);
}

/* Rückmeldung sitzt direkt unter der gewählten Antwort - dort schaut der
   Blick schon hin. Ein Dialog würde den Zusammenhang zerreißen. */
.kk-rueckmeldung {
    margin: 0.6rem 0 0;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    background: #f5f5f5;
    font-size: 0.9rem;
    line-height: 1.55;
}

.kk-rueckmeldung-titel {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.kk-rueckmeldung--richtig .kk-rueckmeldung-titel { color: var(--color-success-fg); }
.kk-rueckmeldung--falsch .kk-rueckmeldung-titel { color: var(--color-danger-fg); }
/* Einsichtsaufgaben (KI-Bild, geklonte Stimme): weder Lob noch Tadel - das
   Ergebnis der eigenen Einschätzung ist hier nur die Auflösung. */
.kk-rueckmeldung--einsicht .kk-rueckmeldung-titel { color: var(--color-info-fg, #01579b); }

.kk-erkennung {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed #cfd8dc;
    color: #455a64;
}

.kk-erkennung-label {
    font-weight: 600;
    display: block;
    margin-bottom: 0.15rem;
}

/* --- Fußzeile der Karte --- */

.kk-karte-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.kk-karte-fuss-hinweis {
    font-size: 0.82rem;
    color: #90a4ae;
}

.kk-fuss-aktionen {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* --- Einführung und Abschluss --- */

.kk-intro-liste {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.kk-intro-liste li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    line-height: 1.55;
}

.kk-intro-liste .icon {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin-top: 3px;
    color: var(--ki-hinweis-fg);
}

.kk-video {
    width: 100%;
    border-radius: 8px;
    background: #000;
    display: block;
    margin-bottom: 1.25rem;
}

.kk-video-platzhalter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 220px;
    margin-bottom: 1.25rem;
    border: 1px dashed var(--ki-hinweis-border);
    border-radius: 8px;
    background: var(--ki-hinweis-bg);
    color: var(--ki-hinweis-fg);
    font-size: 0.9rem;
    text-align: center;
    padding: 1rem;
}

.kk-video-platzhalter .icon { width: 26px; height: 26px; }

/* Ergebnis: die Zahl trägt die Aussage, deshalb groß. */
.kk-ergebnis-zahl {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.kk-ergebnis-zahl--bestanden { color: var(--color-success-fg); }
.kk-ergebnis-zahl--offen { color: var(--color-warning-fg); }

.kk-ergebnis-kopf {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.kk-ergebnis-detail { color: #607d8b; line-height: 1.55; }

.kk-themenliste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.kk-themenliste li {
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.78rem;
    color: #546e7a;
}

@media (max-width: 700px) {
    .kk-leiste-titel { font-size: 1.2rem; }
    .kk-karte { padding: 1.25rem; }
    .kk-ergebnis-zahl { font-size: 2.5rem; }
}

/* =============================================================
   Startbildschirm, Nachweise, Wissenswertes

   Die Zustandskarte trägt die eine Aussage, auf die es beim Öffnen
   ankommt - offen oder erledigt. Erst darunter kommen Zahlen. Die
   Farbe ist dabei bedeutungstragend und nicht Dekoration: Grün nur,
   wenn wirklich nichts zu tun ist.
   ============================================================= */

.kk-status-karte {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.6rem;
    border: 1px solid var(--border-color);
    border-left: 4px solid #b0bec5;
    border-radius: 12px;
    background: var(--card-bg, #fff);
    box-shadow: 0 2px 10px rgba(38, 50, 56, 0.06);
}

.kk-status--gut { border-left-color: var(--color-success-fg, #2e7d32); }
.kk-status--offen { border-left-color: var(--ki-hinweis-fg, #6a1b9a); }

.kk-status-kopf {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.kk-status-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: #78909c;
}

.kk-status--gut .kk-status-icon { color: var(--color-success-fg, #2e7d32); }
.kk-status--offen .kk-status-icon { color: var(--ki-hinweis-fg, #6a1b9a); }

.kk-status-titel {
    margin: 0 0 0.35rem;
    font-size: 1.3rem;
    letter-spacing: -0.015em;
}

.kk-status-text {
    margin: 0;
    max-width: 62ch;
    color: #607d8b;
    line-height: 1.6;
}

.kk-status-aktion {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.kk-status-fuss {
    font-size: 0.82rem;
    color: #78909c;
}

/* Drei Zahlen nebeneinander - bewusst ohne Rahmenkasten, damit sie der
   Zustandskarte nicht die Aufmerksamkeit nehmen. */
.kk-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

.kk-kachel {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem 1.1rem;
    border-radius: 10px;
    background: rgba(38, 50, 56, 0.035);
}

.kk-kachel-zahl {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.kk-kachel-label {
    font-size: 0.8rem;
    color: #78909c;
}

.kk-karte--flach {
    box-shadow: none;
    border: 1px solid var(--border-color);
    margin-top: 1.25rem;
}

.kk-abschnitt-titel {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

/* --- Meine Nachweise --- */

.kk-nachweisliste {
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.kk-nachweis {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.kk-nachweis-marke .icon {
    width: 20px;
    height: 20px;
    color: var(--color-success-fg, #2e7d32);
}

.kk-nachweis--offen .kk-nachweis-marke .icon { color: #b0bec5; }

.kk-nachweis-text { flex: 1; min-width: 0; }

.kk-nachweis-detail {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: #78909c;
}

/* === ki-sidebar.css === */
/* =============================================================
 * KI-Assistent: Rechte Seitenleiste (analog zur linken .side-nav)
 *
 * Struktur orientiert sich 1:1 an .side-nav aus layout.css:
 * fixed rechts, unter Header (52px), über Footer (44px), gleicher
 * dunkler Hintergrund. Standardmäßig ausgeblendet; wird nur
 * eingeblendet, wenn das E-Mail-Modul einen Vorschlag setzt.
 * ============================================================= */

.ki-sidebar {
    position: fixed;
    top: 52px;
    right: 0;
    bottom: 44px;
    width: 360px;
    background-color: var(--dark-bg);
    color: var(--text-light);
    z-index: 100;
    display: none;
    flex-direction: column;
    box-sizing: border-box;
    overflow-y: auto;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08);
}

/* Wenn ein Tab-Header vorhanden ist, beginnt die Seitenleiste darunter (analog zur linken .side-nav) */
body:has(.tab-header) .ki-sidebar {
    top: calc(52px + 36px);
}

/* Sichtbar machen: Klasse wird per JS gesetzt, wenn ein Vorschlag vorliegt */
.ki-sidebar.visible {
    display: flex;
}

/* Content-Schiebung: wenn Seitenleiste sichtbar, rutscht der Main-Content nach links */
body.ki-sidebar-open .main-wrapper {
    margin-right: 360px;
    transition: margin-right 0.2s ease;
}

/* E-Mail-Client nutzt position:fixed (email-client-wrapper), das margin-right
 * auf .main-wrapper greift dort nicht - deshalb hier zusätzlich right-Offset. */
body.ki-sidebar-open .email-client-wrapper {
    right: 360px;
    transition: right 0.2s ease;
}

/* Schließen-Button rechts im Header */
.ki-sidebar-close {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.ki-sidebar-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
}
.ki-sidebar-close .icon {
    width: 18px;
    height: 18px;
}

/* Header der Seitenleiste (dunkel, analog zur oberen Header-Leiste) */
.ki-sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
}
.ki-sidebar-header .nav-icon {
    color: var(--primary-green);
}

.ki-sidebar-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.75rem;
    background: var(--page-bg);
    color: var(--text-dark);
}

/* Einzelne Operation */
.ki-sidebar .op-row {
    padding: 0.6rem 0;
    border-bottom: 1px dashed var(--border-color);
}
.ki-sidebar .op-row:last-child {
    border-bottom: none;
}
.ki-sidebar .op-row.done {
    opacity: 0.55;
}
.ki-sidebar .op-field {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}
.ki-sidebar .op-values {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}
.ki-sidebar .op-old {
    color: #90a4ae;
    text-decoration: line-through;
}
.ki-sidebar .op-new {
    font-weight: 500;
    color: var(--primary-green);
}
.ki-sidebar .op-zitat {
    font-size: 0.8rem;
    color: #546e7a;
    font-style: italic;
    border-left: 3px solid var(--primary-30);
    padding: 0.2rem 0.5rem;
    margin: 0.25rem 0;
    background: var(--primary-5);
}
.ki-sidebar .op-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}
.ki-sidebar .op-edit-input {
    flex: 1;
    min-width: 140px;
}

@media (max-width: 900px) {
    .ki-sidebar { width: 300px; }
    body.ki-sidebar-open .main-wrapper { margin-right: 300px; }
    body.ki-sidebar-open .email-client-wrapper { right: 300px; }
}

/* =============================================================
 * KI-Chat-Modal (Antwort mit Rückfrage) - Message-Bubbles
 * Der Modal-Rahmen nutzt .gm-overlay/.gm-box/.gm-header/.gm-body/.gm-footer.
 * ============================================================= */
.ki-chat-msg {
    margin-bottom: 0.6rem;
    display: flex;
}
.ki-chat-msg.ki-chat-user {
    justify-content: flex-end;
}
.ki-chat-msg.ki-chat-assistant {
    justify-content: flex-start;
}
.ki-chat-bubble {
    max-width: 85%;
    padding: 0.5rem 0.8rem;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.ki-chat-user .ki-chat-bubble {
    background: var(--primary-green);
    color: #fff;
    border-bottom-right-radius: 3px;
}
.ki-chat-assistant .ki-chat-bubble {
    background: var(--card-bg);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 3px;
}

/* =============================================================
 * Ladeanzeige im Compose-Editor während die KI schreibt
 * ============================================================= */
.ki-editor-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    color: var(--primary-green);
    font-style: italic;
    font-size: 0.9rem;
}
.ki-editor-loading .loading-spinner {
    width: 28px;
    height: 28px;
    border-width: 3px;
    margin: 0;
}

/* Neues Mitglied aus Beitrittserklärung: Feld-Übersicht in der Operationskarte */
.nm-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.2rem 0.75rem;
    margin: 0.4rem 0;
    font-size: 0.85rem;
}
.nm-feld {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.15rem 0;
    border-bottom: 1px dotted #d7e2e8;
}
.nm-feld:last-child {
    border-bottom: none;
}
.nm-key {
    color: #546e7a;
    flex: 0 0 auto;
}
.nm-val {
    color: #1f2d33;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

/* === ki-chat.css === */
/* KI-Chat-Assistent - ChatGPT-artiges Layout (Verlaufs-Sidebar + Chat),
   durchgehend mit den globalen Design-Variablen des Systems. */

/* ============ App-Layout (Sidebar + Chat) ============ */
.mki-app {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}

/* ---- Verlaufs-Sidebar ---- */
.mki-side {
  width: 264px;
  flex-shrink: 0;
  background: var(--primary-5);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mki-side-head { padding: 12px; }
.mki-new-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 12px;
  background: var(--primary-green); color: #fff;
  border: none; border-radius: 8px; cursor: pointer;
  font-size: 14px; font-weight: 600; font-family: var(--font-family);
}
.mki-new-btn:hover { background: var(--hover-green); }
.mki-new-btn svg { width: 16px; height: 16px; }
.mki-side-list { flex: 1; overflow-y: auto; padding: 2px 8px 10px; }
.mki-side-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dark); opacity: .55; padding: 12px 8px 4px;
}
.mki-conv {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer; color: var(--text-dark);
}
.mki-conv:hover { background: var(--primary-10); }
.mki-conv.active { background: var(--primary-20); font-weight: 600; }
.mki-conv-title { flex: 1; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mki-conv-del { border: none; background: transparent; color: var(--text-dark); opacity: 0; cursor: pointer; padding: 2px; display: flex; }
.mki-conv:hover .mki-conv-del { opacity: .45; }
.mki-conv-del:hover { opacity: 1; color: var(--color-danger-fg); }
.mki-conv-del svg { width: 15px; height: 15px; }
.mki-side-empty { color: var(--text-dark); opacity: .55; font-size: 13px; text-align: center; padding: 24px 12px; }

/* ---- Chat-Hauptbereich ---- */
.mki-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mki-msgs { flex: 1; overflow-y: auto; padding: 22px 16px; display: flex; flex-direction: column; gap: 14px; }
.mki-welcome { margin: auto; text-align: center; color: var(--text-dark); opacity: .7; max-width: 380px; }
.mki-welcome svg { width: 42px; height: 42px; color: var(--primary-green); margin-bottom: 12px; }
.mki-welcome h2 { font-size: 19px; margin: 0 0 6px; color: var(--text-dark); }
.mki-welcome p { font-size: 14px; margin: 0; }

.mki-row { display: flex; max-width: 780px; width: 100%; margin: 0 auto; }
.mki-row.user { justify-content: flex-end; }
.mki-bubble { padding: 11px 15px; border-radius: 14px; line-height: 1.55; font-size: 14.5px; max-width: 86%; }
.mki-row.user .mki-bubble { background: var(--primary-green); color: #fff; border-bottom-right-radius: 4px; }
.mki-row.assistant .mki-bubble { background: var(--page-bg); color: var(--text-dark); border: 1px solid var(--border-color); border-bottom-left-radius: 4px; }
.mki-bubble p { margin: 0 0 8px; } .mki-bubble p:last-child { margin: 0; }
.mki-bubble ul { margin: 6px 0; padding-left: 20px; }
.mki-bubble strong { font-weight: 600; }
.mki-bubble.error { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger-fg); }

.mki-status { max-width: 780px; width: 100%; margin: 0 auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dark); opacity: .7; font-style: italic; }
.mki-status .mki-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary-green); animation: mki-pulse 1s infinite ease-in-out; flex-shrink: 0; }
@keyframes mki-pulse { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }

/* ---- Eingabe ---- */
.mki-input-wrap { padding: 14px 16px; border-top: 1px solid var(--border-color); background: var(--card-bg); }
.mki-input { max-width: 780px; margin: 0 auto; display: flex; gap: 10px; align-items: flex-end; }
.mki-input textarea {
  flex: 1; resize: none; border: 1px solid var(--border-color); border-radius: 12px;
  padding: 11px 14px; font-size: 14.5px; font-family: var(--font-family);
  max-height: 150px; outline: none; background: var(--card-bg); color: var(--text-dark); line-height: 1.4;
}
.mki-input textarea:focus { border-color: var(--primary-green); }
.mki-send {
  border: none; background: var(--primary-green); color: #fff; border-radius: 12px;
  width: 44px; height: 44px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mki-send:hover { background: var(--hover-green); }
.mki-send:disabled { opacity: .5; cursor: default; }
.mki-send svg { width: 18px; height: 18px; }

/* ============ Aktivitäts-Protokoll (was der Assistent tut) ============ */
.mki-activity {
  max-width: 780px; width: 100%; margin: 0 auto -4px;
  border: 1px solid var(--border-color); border-radius: 10px;
  background: var(--primary-5); overflow: hidden;
}
.mki-activity-head {
  display: flex; align-items: center; gap: 8px; padding: 7px 11px; cursor: pointer;
  font-size: 13px; color: var(--text-dark);
}
.mki-activity-head svg { width: 15px; height: 15px; opacity: .7; }
.mki-activity-head span { flex: 1; }
.mki-activity-chev { transition: transform .15s ease; }
.mki-activity.open .mki-activity-chev { transform: rotate(180deg); }
.mki-activity-steps { display: none; padding: 0 11px 8px; }
.mki-activity.open .mki-activity-steps { display: block; }
.mki-activity-step { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-dark); opacity: .85; padding: 3px 0; }
.mki-activity-step .mki-step-ic { width: 13px; height: 13px; color: var(--primary-green); flex-shrink: 0; }

/* ============ Kontext-Anzeige (Ring neben dem Senden-Button) ============ */
.mki-context {
  position: relative; flex-shrink: 0; width: 28px; height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.mki-context[hidden] { display: none; }
.mki-context-ring { width: 22px; height: 22px; transform: rotate(-90deg); }
.mki-ring-track { fill: none; stroke: var(--border-color); stroke-width: 3; }
.mki-ring-fill {
  fill: none; stroke: var(--primary-green); stroke-width: 3; stroke-linecap: round;
  transition: stroke-dashoffset .3s ease, stroke .2s ease;
}
.mki-context.warn .mki-ring-fill { stroke: var(--color-danger-fg); }
/* Hover-Label oberhalb des Rings */
.mki-context-tip {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: 5px 9px; border-radius: 7px; font-size: 11.5px;
  background: var(--text-dark); color: var(--card-bg); pointer-events: none;
  opacity: 0; transition: opacity .15s ease; z-index: 5;
}
.mki-context:hover .mki-context-tip { opacity: 1; }

/* Bessere Markdown-Stile in Assistent-Bubbles */
.mki-bubble h3, .mki-bubble h4, .mki-bubble h5 { margin: 6px 0 4px; font-weight: 600; font-size: 15px; }
.mki-bubble ol { margin: 6px 0; padding-left: 20px; }
.mki-bubble code { background: var(--primary-10); border-radius: 4px; padding: 1px 5px; font-size: 13px; }
.mki-bubble em { font-style: italic; }

/* ============ Panel (vom Header-Button geöffnet) ============ */
/* Dockt unter dem Header (52px) und über dem Footer (44px) an - nichts überlappt. */
#mki-panel-root {
  position: fixed; top: 52px; right: 0; bottom: 44px;
  width: var(--mki-panel-w, 460px); max-width: 100vw; z-index: 1000;
  display: flex; flex-direction: column;
  background: var(--card-bg); border-left: 1px solid var(--border-color);
  box-shadow: -10px 0 34px rgba(0, 0, 0, .14);
  transform: translateX(100%); transition: transform .25s ease;
}
#mki-panel-root.open { transform: translateX(0); }
/* Auf der KI-Vollseite ist der Header-Button funktionslos (kein Panel) -> aus. */
body[data-mki-fullpage] #header-assistent-btn { display: none; }
/* Beim Wiederherstellen des Zustands nach einer Navigation: kein Slide-in. */
#mki-panel-root.mki-no-anim { transition: none; }
/* Ist die 36px-Tab-Leiste vorhanden (sitzt fix bei 52px, z-index 1001), muss das
   Panel darunter andocken - sonst verdeckt die Tab-Leiste den Panel-Kopf.
   Gleiche Logik wie bei Sidebar/Content (siehe layout.css body:has(.tab-header)). */
body:has(.tab-header) #mki-panel-root { top: calc(52px + 36px); }
.mki-panel-head { background: var(--dark-bg); color: var(--text-light); padding: 9px 12px; display: flex; align-items: center; gap: 7px; }
.mki-panel-logo { width: 22px; height: 22px; }
.mki-panel-title { flex: 1; font-weight: 600; font-size: 15px; }
.mki-panel-head button { background: transparent; border: none; color: var(--text-light); cursor: pointer; padding: 5px; border-radius: 6px; opacity: .85; display: flex; }
.mki-panel-head button:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
.mki-panel-head button svg { width: 18px; height: 18px; }
#mki-panel-root .mki-app { border: none; border-radius: 0; flex: 1; min-height: 0; }
/* Im schmalen Panel: Verlaufs-Sidebar als Overlay (per Verlauf-Button). */
#mki-panel-root .mki-side { display: none; position: absolute; inset: 0; z-index: 3; width: 100%; }
#mki-panel-root.show-side .mki-side { display: flex; }

/* ============ Header-Button "Assistent" (identisch zum Hilfe-Button) ============ */
/* Ohne diese Regel bliebe der Button rund/40px fix (von .header-action-btn) und
   Icon + Label "Assistent" würden sich darin quetschen. Gleiche Pillen-Form wie Hilfe. */
#header-assistent-btn {
    width: auto;
    height: 40px;
    border-radius: 20px;
    padding: 0 0.75rem;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
}
#header-assistent-btn.active { background: color-mix(in srgb, var(--primary-green), transparent 80%); }

@media (max-width: 600px) {
    #header-assistent-btn { width: 40px; padding: 0; border-radius: 50%; gap: 0; }
}

/* ============ Vollseiten-Wrapper (page-fullheight-contained regelt Footer) ============ */
.mki-page { flex: 1; min-height: 0; display: flex; }

/* ============ Mobile ============ */
@media (max-width: 720px) {
  .mki-side { width: 210px; }
  #mki-panel-root { width: 100vw; }
}

/* ---- Vorschlag des Assistenten, eine Seite zu öffnen ----
   Bewusst als eigene Karte und nicht als Link im Fließtext: der Nutzer soll
   sehen, dass hier etwas passieren WÜRDE, und es selbst auslösen. */
.mki-aktion {
  max-width: 780px; width: 100%; margin: 0 auto;
  border: 1px solid var(--primary-30); border-left: 3px solid var(--primary-green);
  border-radius: 10px; background: var(--primary-5); padding: 12px 14px;
}
.mki-aktion-kopf { display: flex; align-items: center; gap: 8px; }
.mki-aktion-ic { width: 16px; height: 16px; color: var(--primary-green); flex-shrink: 0; }
.mki-aktion-titel { font-weight: 600; font-size: 14.5px; color: var(--text-dark); }
.mki-aktion-grund { margin: 6px 0 0; font-size: 13.5px; color: var(--text-dark); opacity: .8; }
.mki-aktion-ziel {
  margin-top: 8px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text-dark); opacity: .6; word-break: break-all;
}
.mki-aktion-knoepfe { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.mki-aktion.verworfen { opacity: .5; border-left-color: var(--border-color); }

/* ---- Dateianhänge an der Frage ---- */
.mki-anhaenge {
  max-width: 780px; margin: 0 auto 8px; display: flex; flex-wrap: wrap; gap: 6px;
}
.mki-anhang {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 8px; border-radius: 999px;
  background: var(--primary-10); border: 1px solid var(--primary-30);
  font-size: 12.5px; color: var(--text-dark); max-width: 100%;
}
.mki-anhang-ic { width: 13px; height: 13px; flex-shrink: 0; opacity: .7; }
.mki-anhang-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.mki-anhang-status { opacity: .6; font-style: italic; }
.mki-anhang.laedt { opacity: .65; }
.mki-anhang.unlesbar { background: var(--color-warning-bg); border-color: var(--color-warning-border); }
.mki-anhang-weg {
  border: none; background: transparent; padding: 0; display: flex; cursor: pointer;
  color: inherit; opacity: .5;
}
.mki-anhang-weg:hover { opacity: 1; color: var(--color-danger-fg); }
.mki-anhang-weg svg { width: 13px; height: 13px; }

.mki-anhang-btn {
  border: none; background: transparent; cursor: pointer; padding: 6px;
  display: flex; align-items: center; color: var(--text-dark); opacity: .55;
  flex-shrink: 0;
}
.mki-anhang-btn:hover { opacity: 1; color: var(--primary-green); }
.mki-anhang-btn svg { width: 18px; height: 18px; }

/* === ki-compose-diff.css === */
/* =============================================================================
   KI-Compose Diff-Modal
   Side-by-side Vergleich aktueller Editor-Inhalt vs KI-Vorschlag.
   ============================================================================= */

.ki-diff-overlay .gm-box.ki-diff-box {
    max-width: 1100px;
    width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.ki-diff-box .gm-body.ki-diff-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: hidden;
    padding: 1rem 1.5rem;
}

.ki-diff-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ki-diff-genre .form-control {
    min-width: 140px;
}

.ki-diff-subject-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    background: var(--page-bg, #f5f7fa);
    border-radius: 4px;
    border: 1px solid var(--border-color, #e0e0e0);
    flex-wrap: wrap;
}

.ki-diff-subject-label {
    font-weight: 600;
    color: #555;
}

.ki-diff-subject-old {
    color: #999;
    text-decoration: line-through;
}

.ki-diff-arrow {
    color: #999;
    padding: 0 0.25rem;
}

.ki-diff-subject-new {
    color: var(--primary, #2e7d32);
    font-weight: 500;
}

/* Tabs nur auf schmalen Viewports sichtbar */
.ki-diff-tabs {
    display: none;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.ki-diff-tab {
    background: transparent;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #607d8b;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.ki-diff-tab.active {
    color: var(--primary, #2e7d32);
    border-bottom-color: var(--primary, #2e7d32);
}

.ki-diff-panes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 300px;
    overflow: hidden;
}

.ki-diff-pane {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.ki-diff-pane-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #607d8b;
    padding: 0.4rem 0.75rem;
    background: var(--page-bg, #f5f7fa);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.ki-diff-pane-new .ki-diff-pane-label {
    background: #e8f5e9;
    color: var(--primary, #2e7d32);
    font-weight: 600;
}

.ki-diff-preview {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #333;
}

.ki-diff-preview p { margin: 0 0 0.75em 0; }
.ki-diff-preview p:last-child { margin-bottom: 0; }
.ki-diff-preview div { display: block; }
.ki-diff-preview a { color: #1976d2; text-decoration: none; }
.ki-diff-preview .email-signatur,
.ki-diff-preview .email-signatur div {
    color: #666;
    font-size: 0.9em;
}
.ki-diff-preview .email-signatur {
    margin-top: 1em;
}

.ki-diff-placeholder {
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 2rem 1rem;
}

.ki-diff-error {
    color: #c62828;
    padding: 1rem;
    background: #ffebee;
    border-radius: 4px;
}

.ki-diff-status {
    min-height: 1rem;
    font-size: 0.85rem;
    color: #607d8b;
    font-style: italic;
}

/* Mobile: Tab-Switch */
@media (max-width: 899px) {
    .ki-diff-tabs { display: flex; }
    .ki-diff-panes { grid-template-columns: 1fr; }
    .ki-diff-pane-current { display: none; }
    .ki-diff-pane-new { display: flex; }
    .ki-diff-overlay.show-current .ki-diff-pane-current { display: flex; }
    .ki-diff-overlay.show-current .ki-diff-pane-new { display: none; }
    .ki-diff-overlay.show-new .ki-diff-pane-new { display: flex; }
    .ki-diff-overlay.show-new .ki-diff-pane-current { display: none; }
}

/* Screen-Reader-only Label (falls nicht global vorhanden) */
.ki-diff-box .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;
}

/* =============================================================================
   Undo-Toast nach KI-Übernahme
   ============================================================================= */

.ki-undo-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #263238;
    color: #fff;
    padding: 0.75rem 1rem 0.75rem 1.25rem;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 20000;
    min-width: 320px;
    animation: kiUndoIn 0.2s ease-out;
    overflow: hidden;
}

.ki-undo-toast.ki-undo-out {
    animation: kiUndoOut 0.25s ease-in forwards;
}

.ki-undo-msg {
    font-size: 0.9rem;
    flex: 1;
}

.ki-undo-toast .ki-undo-btn {
    color: #81c784;
    border-color: #81c784;
    background: transparent;
}

.ki-undo-toast .ki-undo-btn:hover {
    background: rgba(129, 199, 132, 0.15);
}

.ki-undo-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: #81c784;
    width: 100%;
    animation: kiUndoProgress 10s linear forwards;
}

@keyframes kiUndoIn {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes kiUndoOut {
    to { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

@keyframes kiUndoProgress {
    from { width: 100%; }
    to { width: 0; }
}

/* === utilities.css === */
/* =============================================================
   UTILITIES — Hilfsklassen, Spinner, Animationen
   ============================================================= */

/* === Sichtbarkeit === */
.d-none {
    display: none !important;
}

/* === Farben === */
.positive { color: var(--betrag-positiv); }
.negative { color: var(--betrag-negativ); }

/* Betrag in einer Tabellenzelle: rechts ausgerichtet über die eigene Zeile.
   Ersetzt wiederholte Inline-Styles in den Modul-Skripten. */
.betrag-zelle {
    display: block;
    text-align: right;
}

/* === Spinner / Lade-Animationen === */
@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-green);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 3rem auto;
}

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
    margin-right: 0.5rem;
}

.spinner-small {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Inline-Spinner für ausstehende Empfänger im Versand-Stream
   - gelbe Farbe passend zur "Ausstehend"-Statusfarbe
   - 12px, vor Text */
.rs-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 193, 7, 0.25);
    border-top-color: #ffc107;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    margin-right: 0.4rem;
    vertical-align: -2px;
}

.rs-status-pending {
    color: #ffc107;
    display: inline-flex;
    align-items: center;
}

/* Banner über der Empfänger-Tabelle wenn ein Versand läuft */
.rs-versand-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: #fff8e1;
    border: 1px solid #ffc107;
    border-radius: 6px;
    color: #7a5c00;
    font-size: 0.9rem;
}

.rs-versand-banner .rs-spinner {
    width: 14px;
    height: 14px;
}

/* === Rundschreiben-Seite (Liste) === */

.rs-page-card {
    text-align: left;
}

.rs-liste-container {
    margin-top: 1rem;
}

/* === Rundschreiben-Detail-Modal === */

/* Vorschau-Modal: max-width für eine Stufe größer als gm-md */
#rs-vorschau-modal > .gm-box {
    max-width: 850px;
}

/* Detail-Modal-Body: Flex-Container damit die Empfängertabelle den
   Restraum bekommt. Das Default-gm-body hat overflow-y:auto - hier
   uebernimmt die innere Empfänger-Tabelle das Scrollen. */
#rs-detail-modal .gm-body {
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#rs-detail-modal .gm-body > * {
    flex-shrink: 0;
}

#rs-detail-modal .gm-body #rs-detail-empfaenger {
    font-size: 0.9rem;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Fortschritts-Balken */
.rs-progress-bar {
    background: #e9ecef;
    border-radius: 4px;
    height: 24px;
    position: relative;
}

.rs-progress-bar-fill {
    background: var(--primary-color);
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
    width: 0%;
}

.rs-progress-bar-fill.rs-progress-bounce {
    background: #17a2b8;
}

.rs-progress-bar-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85rem;
    font-weight: 600;
}

/* Aktionen-Reihe */
.rs-detail-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* Stats-Zeile */
.rs-detail-stats-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.rs-stat-ok    { color: #28a745; }
.rs-stat-warn  { color: #ffc107; }
.rs-stat-error { color: #dc3545; }
.rs-stat-muted { color: #6c757d; }

/* Nachrichtentext-Box */
.rs-nachricht-box {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    max-height: 300px;
    overflow-y: auto;
}

/* Action-Button-Gruppe in der Empfänger-Tabelle */
.rs-row-actions {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.btn-rs-row {
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
}

/* Bounce/Autoreply-Ergebnisse */
.rs-bounce-card {
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.rs-bounce-card.is-bounce {
    background: #fff3cd;
    border: 1px solid #ffc107;
}

.rs-bounce-card.is-autoreply {
    background: #d1ecf1;
    border: 1px solid #17a2b8;
}

.rs-bounce-card .rs-bounce-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.rs-bounce-card.is-bounce .rs-bounce-head strong {
    color: #856404;
}

.rs-bounce-card.is-autoreply .rs-bounce-head strong {
    color: #0c5460;
}

.rs-bounce-table {
    width: 100%;
    font-size: 0.85rem;
}

.rs-bounce-table th {
    text-align: left;
    padding: 0.25rem;
    border-bottom: 1px solid #ddd;
}

.rs-bounce-table td {
    padding: 0.25rem;
    border-bottom: 1px solid #eee;
}

.rs-bounce-card.is-bounce .rs-bounce-msg {
    font-size: 0.8rem;
    color: #856404;
}

.rs-bounce-card.is-autoreply .rs-bounce-msg {
    font-size: 0.8rem;
    color: #0c5460;
}

/* Allgemeiner Detail-Section-Abstand (Ersatz für inline margin-bottom) */
.rs-detail-section {
    margin-bottom: 1rem;
}

.rs-toggle-btn {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.rs-nachsenden-zeile {
    display: flex;
    gap: 0.5rem;
}

.rs-nachsenden-zeile input.form-control {
    flex: 1;
}

.rs-nachsenden-ergebnisse {
    margin-top: 0.5rem;
}

/* === Rundschreiben-Vorschau-Modal === */

.rs-vorschau-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.rs-vorschau-counter {
    font-weight: 600;
    color: #666;
}

.rs-vorschau-info-box {
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.rs-vorschau-info-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

.rs-vorschau-feld {
    margin-bottom: 0.5rem;
}

.rs-vorschau-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #666;
}

.rs-vorschau-betreff {
    padding: 0.4rem 0.75rem;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-weight: 500;
}

.rs-vorschau-anhaenge {
    margin-top: 0.25rem;
}

.rs-vorschau-footer {
    justify-content: space-between;
}

.rs-vorschau-footer-info {
    color: #666;
    font-size: 0.9rem;
}

.rs-vorschau-footer-btns {
    display: flex;
    gap: 0.5rem;
}

/* === Empty State === */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #999;
    text-align: center;
}

.empty-state svg {
    margin-bottom: 1rem;
}

/* === Formular-Kapitel-Titel (kompakt, für Detailansicht) === */
.form-chapter-title.compact {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

/* === View-Controls (Such- und Steuerleiste) === */
.view-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Die Schaltflächengruppe rechts in einer Kopfzeile. Stand vorher als
   gleichlautender Inline-Style an jeder einzelnen Gruppe. */
.view-controls-aktionen {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Auswahlfeld in einer Kopfzeile: so breit wie sein Inhalt, aber nie so
   schmal, dass die Beschriftung umbricht. */
.field-input.filter-select {
    width: auto;
    min-width: 180px;
}

.filter-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.filter-bar .form-control {
    width: auto;
    min-width: 120px;
    height: 34px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390a4ae' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 14px;
    padding-right: 2rem;
}
.filter-bar .form-control:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 2px var(--primary-10);
    outline: none;
}

.search-container {
    position: relative;
    flex-grow: 1;
    min-width: 200px;
}

/* === Kippschalter (Mitglieder/Tabelle) === */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 160px;
    height: 38px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-green);
    transition: .4s;
    border-radius: 34px;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
}

.slider::before {
    position: absolute;
    content: "Mitglied";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 78px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    color: var(--primary-green);
    transition: .4s;
    border-radius: 34px;
    z-index: 2;
}

.slider::after {
    position: absolute;
    content: 'Mitglied / Tabelle';
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    z-index: 1;
}

input:checked + .slider:before {
    transform: translateX(78px);
    content: "Tabelle";
}

/* =============================================================
   MOBILE RESPONSIVE
   ============================================================= */
@media (max-width: 768px) {
    /* --- View-Controls: umbrechen auf Mobil --- */
    .view-controls {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    /* --- Statistik-Leiste: umbrechen --- */
    .statistik-leiste {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* --- Toggle-Switch: kleiner --- */
    .toggle-switch {
        width: 140px;
        height: 34px;
    }
    .slider {
        font-size: 0.8rem;
    }
    .slider::before {
        width: 68px;
        height: 28px;
    }
    input:checked + .slider:before {
        transform: translateX(68px);
    }

    /* --- Search-Container: volle Breite --- */
    .search-container {
        min-width: 0;
        width: 100%;
    }
}

/* === tooltip.css === */
/* =============================================================================
   Mitglieder-Tooltip: Globales Hover/Pin-Tooltip für Mitglieder-Infos
   ============================================================================= */

.mt-tooltip {
    position: fixed;
    z-index: 10000;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 0;
    min-width: 240px;
    max-width: 320px;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.15s;
    user-select: none;
}

.mt-tooltip.visible {
    opacity: 1;
}

/* --- Pin-Modus --- */

.mt-tooltip.mt-tooltip-pinned {
    z-index: 2147483647;
    cursor: grab;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    border-color: var(--primary-green, #2E7D32);
}

.mt-tooltip.mt-tooltip-pinned:active {
    cursor: grabbing;
}

/* --- Header --- */

.mt-tooltip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    gap: 0.5rem;
}

.mt-tooltip-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary, #333);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mt-tooltip-close {
    display: none;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #999;
    padding: 0 0.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.mt-tooltip-close:hover {
    color: #333;
}

.mt-tooltip-pinned .mt-tooltip-close {
    display: block;
}

/* --- Body --- */

.mt-tooltip-body {
    padding: 0.5rem 0.75rem;
}

.mt-tooltip-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
    padding: 0.15rem 0;
}

.mt-tooltip-row .icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--text-secondary, #999);
}

.mt-tooltip-row a {
    color: var(--primary-green, #2E7D32);
    text-decoration: none;
}

.mt-tooltip-row a:hover {
    text-decoration: underline;
}

/* Leere Zeilen ausblenden */
.mt-tooltip-row.mt-empty {
    display: none;
}

/* --- Pin-Hinweis --- */

.mt-tooltip-pin-hint {
    text-align: center;
    font-size: 0.65rem;
    color: #bbb;
    padding: 0.15rem 0 0.4rem;
}

.mt-tooltip-pinned .mt-tooltip-pin-hint {
    display: none;
}

/* --- Trigger-Styling --- */

td[data-mitglied-id],
span[data-mitglied-id],
a[data-mitglied-id],
div[data-mitglied-id] {
    cursor: help;
    border-bottom: 1px dotted var(--text-secondary, #999);
}

/* === compliance.css === */
/* =====================================================================
 * Compliance-Abzeichen + Panel (§11 UStG Pflichtfeld-Prüfung)
 * ===================================================================== */

.compliance-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    vertical-align: middle;
}

.compliance-badge .icon {
    width: 0.95em;
    height: 0.95em;
}

.compliance-badge .compliance-count {
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 1rem;
    text-align: center;
}

.compliance-badge.compliance-green {
    background: #e8f5e9;
    color: #1b5e20;
    border-color: #a5d6a7;
}

.compliance-badge.compliance-yellow {
    background: #fff8e1;
    color: #8d6e00;
    border-color: #ffe082;
}

.compliance-badge.compliance-red {
    background: #ffebee;
    color: #b71c1c;
    border-color: #ef9a9a;
}

.compliance-badge[data-rechnung-id]:hover {
    filter: brightness(0.96);
}

/* ---------- Detail-Panel ---------- */

.compliance-panel {
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    padding: 0.8rem 1rem;
    background: var(--card-bg, #fff);
    margin: 0.5rem 0;
}

.compliance-panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.compliance-panel-body .compliance-section {
    margin-bottom: 0.8rem;
}

.compliance-panel-body .compliance-section:last-child {
    margin-bottom: 0;
}

.compliance-section h4 {
    margin: 0 0 0.3rem 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.compliance-section ul {
    margin: 0;
    padding-left: 1.3rem;
    list-style: disc;
    font-size: 0.88rem;
    line-height: 1.5;
}

.compliance-section-error h4 { color: #b71c1c; }
.compliance-section-warning h4 { color: #8d6e00; }
.compliance-section-info h4 { color: #1565c0; }

.compliance-ok {
    color: #1b5e20;
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

.compliance-loading,
.compliance-error {
    font-size: 0.88rem;
    color: var(--text-secondary, #666);
    padding: 0.5rem 0;
}

.compliance-error {
    color: #b71c1c;
}

/* === pdf-viewer.css === */
/* =====================================================================
 * Globaler PDF-Viewer (PDF.js-basiert)
 * ===================================================================== */

.pdfv-root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: #525659;
    color: #fff;
    position: relative;
}

.pdfv-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    background: #323639;
    border-bottom: 1px solid #222;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.pdfv-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.pdfv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #ddd;
    cursor: pointer;
    transition: background 0.15s;
}

.pdfv-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.pdfv-btn:active {
    background: rgba(255, 255, 255, 0.2);
}

.pdfv-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.pdfv-btn .icon {
    width: 1.1em;
    height: 1.1em;
    pointer-events: none;
}

.pdfv-pageinfo {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: #ddd;
    background: #4a4f53;
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
}

.pdfv-page-input {
    width: 2.8rem;
    padding: 0.1rem 0.3rem;
    background: #2a2d30;
    border: 1px solid #555;
    border-radius: 3px;
    color: #fff;
    font-size: 0.85rem;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.pdfv-page-input::-webkit-outer-spin-button,
.pdfv-page-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pdfv-page-sep {
    color: #999;
}

.pdfv-zoom-label {
    min-width: 3.2rem;
    text-align: center;
    font-size: 0.85rem;
    color: #ddd;
}

.pdfv-scroll {
    flex: 1;
    overflow: auto;
    padding: 1rem;
    background: #525659;
}

.pdfv-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.pdfv-page {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    border-radius: 2px;
    overflow: hidden;
    position: relative; /* Anker für den Text-Layer-Overlay */
}

.pdfv-page canvas {
    display: block;
    max-width: 100%;
}

/* Markierbarer Text-Layer (pdf.js) - unsichtbarer, positionsgenauer Text über
   dem Canvas. Zeigt den echten, in der PDF eingebetteten Text (inkl. OCR-Layer
   bei Scans) und macht ihn in der App auswählbar/kopierbar. */
.pdfv-text-layer {
    position: absolute;
    left: 0;
    top: 0;
    text-align: initial;
    overflow: hidden;
    line-height: 1;
    opacity: 1;
    z-index: 2;
    forced-color-adjust: none;
    transform-origin: 0 0;
}

.pdfv-text-layer span,
.pdfv-text-layer br {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
}

.pdfv-text-layer span.markedContent {
    top: 0;
    height: 0;
}

.pdfv-text-layer ::selection {
    background: rgba(0, 90, 200, 0.30);
}

.pdfv-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    background: rgba(50, 54, 57, 0.85);
    color: #fff;
    font-size: 0.9rem;
    z-index: 10;
}

.pdfv-overlay.hidden {
    display: none;
}

.pdfv-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pdfv-spin 0.8s linear infinite;
}

@keyframes pdfv-spin {
    to { transform: rotate(360deg); }
}

/* Mobile */
@media (max-width: 600px) {
    .pdfv-toolbar {
        padding: 0.3rem 0.4rem;
    }
    .pdfv-btn {
        width: 1.9rem;
        height: 1.9rem;
    }
    .pdfv-zoom-label {
        min-width: 2.6rem;
        font-size: 0.75rem;
    }
}

/* Vollbild-Modal: gleiche Standardgrößen wie alle anderen Modale (gm-xl) -
   nur der Inhalt ist auf den PDF-Viewer reduziert. */
#pdfv-fullscreen-modal .gm-box {
    display: flex;
    flex-direction: column;
    height: 85vh;
    max-height: 90vh;
    overflow: hidden;
}
#pdfv-fullscreen-modal .gm-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#pdfv-fullscreen-modal .pdfv-fullscreen-host {
    flex: 1 1 0;
    min-height: 0;
    background: #525659;
}

/* === preflight.css === */
/* =============================================================
   PREFLIGHT — Pre-Flight-Schritt im Rechnungs-/Mahnung-Wizard
   Kombiniert globale Tokens (--color-success/warning/danger/info)
   mit eigenem Layout fuer Stat-Karten und Detail-Sektionen.
   ============================================================= */

/* Wrapper, damit Stat-Grid + Banner + Details zusammenhaengen */
.preflight-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* === Stat-Kacheln (4er-Grid) === */
.preflight-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.preflight-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    text-align: center;
}

.preflight-stat__value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.preflight-stat__label {
    font-size: 0.78rem;
    color: #607d8b;
    font-weight: 500;
}

.preflight-stat--success {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
}
.preflight-stat--success .preflight-stat__value { color: var(--color-success-fg); }

.preflight-stat--warning {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
}
.preflight-stat--warning .preflight-stat__value { color: var(--color-warning-fg); }

.preflight-stat--danger {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
}
.preflight-stat--danger .preflight-stat__value { color: var(--color-danger-fg); }

.preflight-stat--info {
    background: var(--color-info-bg);
    border-color: var(--color-info-border);
}
.preflight-stat--info .preflight-stat__value { color: var(--color-info-fg); }

@media (max-width: 700px) {
    .preflight-stats { grid-template-columns: repeat(2, 1fr); }
}

/* === Buchungs-Vorschau-Card === */
.preflight-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.preflight-card__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.preflight-card__title svg {
    width: 16px;
    height: 16px;
    color: var(--primary-green);
}

.preflight-card__list {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.88rem;
    color: #37474f;
}

.preflight-card__list li { margin: 0.15rem 0; }

/* === Details-Box (Blocker / Warnungen) === */
.preflight-details {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    padding: 0;
    overflow: hidden;
}

.preflight-details > summary {
    cursor: pointer;
    padding: 0.6rem 0.85rem;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}

.preflight-details > summary::-webkit-details-marker { display: none; }

.preflight-details > summary::after {
    content: '\25BE';
    margin-left: auto;
    font-size: 0.85rem;
    opacity: 0.6;
    transition: transform 0.15s ease;
}

.preflight-details[open] > summary::after { transform: rotate(180deg); }

.preflight-details__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.4rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.preflight-details__hint {
    font-weight: 400;
    font-size: 0.82rem;
    color: #607d8b;
}

.preflight-details__list {
    margin: 0;
    padding: 0.5rem 1rem 0.85rem 2.2rem;
    font-size: 0.88rem;
    color: #37474f;
    background: #fafafa;
    border-top: 1px solid var(--border-color);
}

.preflight-details__list li { margin: 0.15rem 0; }

.preflight-details__list li b {
    font-weight: 600;
    color: var(--text-dark);
}

/* Modifier-Faerbung Blocker (rot) und Warnung (orange) */
.preflight-details--danger > summary {
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
    border-left: 4px solid var(--color-danger-fg);
}
.preflight-details--danger .preflight-details__count {
    background: var(--color-danger-fg);
    color: white;
}

.preflight-details--warning > summary {
    background: var(--color-warning-bg);
    color: var(--color-warning-fg);
    border-left: 4px solid var(--color-warning-fg);
}
.preflight-details--warning .preflight-details__count {
    background: var(--color-warning-fg);
    color: white;
}

/* === Override-Card mit Custom-Checkbox === */
.preflight-override {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-left: 4px solid var(--color-warning-fg);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.preflight-override__title {
    font-weight: 600;
    color: var(--color-warning-fg);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.preflight-override__title svg {
    width: 18px;
    height: 18px;
}

.preflight-override__body {
    font-size: 0.9rem;
    color: var(--text-dark);
}

.preflight-override__check {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dark);
    background: white;
    border: 1px solid var(--color-warning-border);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    transition: background 0.15s, border-color 0.15s;
}

.preflight-override__check:hover {
    background: #fffaf0;
    border-color: var(--color-warning-fg);
}

.preflight-override__check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-warning-fg);
    cursor: pointer;
    margin: 0;
}

/* === Lade- und Hinweis-Texte === */
.preflight-loading,
.preflight-hint {
    color: #607d8b;
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

.preflight-error {
    color: var(--color-danger-fg);
    font-weight: 500;
    padding: 0.5rem 0;
}

/* Zusatzzeile unter den Kennzahlen (z.B. Aufteilung Forderung/Gebühren) */
.preflight-zusatz {
    color: #546e7a;
    font-size: 0.9rem;
    margin: -0.25rem 0 0.75rem;
}

/* =============================================================
   Empfängerliste im Versandschritt (js/empfaengerliste.js)
   Fünf Assistenten hatten dafür Inline-Styles - hier steht sie einmal.
   ============================================================= */
.empfaenger-liste {
    font-size: 0.9rem;
}
.empfaenger-zeile {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border-color);
}
.empfaenger-zeile:last-child { border-bottom: none; }
.empfaenger-name { flex: 1; min-width: 0; }
.empfaenger-zusatz { color: #78909c; font-size: 0.85rem; }
.empfaenger-rechts { color: #546e7a; white-space: nowrap; }
.empfaenger-leer { color: #90a4ae; padding: 0.5rem 0; }

/* === cms-admin.css === */
/* CMS-Backend (Website-Verwaltung) - Übersicht, Mediathek, Block-Editor. */

/* Übersicht: Verzahnungs-Liste (nutzt fin-hero aus cards.css und die
   Kennzahlkacheln aus kennzahlen.css) */
.cms-verzahnung { list-style: none; padding: 0; margin: .75rem 0 0; }
.cms-verzahnung li {
    display: flex; align-items: center; gap: 1rem;
    padding: .85rem 0; border-bottom: 1px solid var(--border-color, #eee);
}
.cms-verzahnung li:last-child { border-bottom: none; }
.cms-verzahnung li > div:not(.cms-verzahnung-icon) { flex: 1; display: flex; flex-direction: column; }
.cms-verzahnung li strong { font-size: .95rem; }
.cms-verzahnung li span { font-size: .82rem; color: var(--text-muted, #666); }
.cms-verzahnung-icon {
    width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.cms-verzahnung-icon svg { width: 18px; height: 18px; }

/* Mediathek-Grid */
.cms-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.cms-media-item { cursor: pointer; border: 1px solid var(--border-color, #e0e0e0); border-radius: 8px; overflow: hidden; transition: box-shadow .15s; background: #fff; }
.cms-media-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.cms-media-thumb { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: var(--color-page-bg, #f4f6f9); overflow: hidden; }
.cms-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cms-media-doc { font-size: 2.5rem; color: var(--text-muted, #999); }
.cms-media-name { padding: .4rem .5rem; font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Block-Editor */
.cms-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem; }
@media (max-width: 900px) { .cms-editor-grid { grid-template-columns: 1fr; } }
.cms-block-row {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .8rem; margin-bottom: .5rem;
    background: var(--color-page-bg, #f7f9fc);
    border: 1px solid var(--border-color, #e0e0e0); border-radius: 8px;
}
.cms-block-typ { font-weight: 600; min-width: 90px; }
.cms-block-vorschau { flex: 1; color: var(--text-muted, #666); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-block-tools { display: flex; gap: .25rem; }
.cms-vorschau-box { border: 1px dashed var(--border-color, #ccc); border-radius: 8px; padding: 1rem; min-height: 200px; background: #fff; }

/* Block-Bibliothek (Hinzufügen-Modal) */
.cms-blocklib { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.cms-blocklib-item {
    padding: 1rem; border: 1px solid var(--border-color, #ddd); border-radius: 8px;
    background: #fff; cursor: pointer; font-weight: 600; transition: all .15s;
}
.cms-blocklib-item:hover { border-color: var(--color-primary, #2e7d32); background: var(--color-page-bg, #f4f6f9); }

.cms-medium-pick { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.badge-success { background: var(--color-primary, #2e7d32); color: #fff; }

/* === sysadmin-ki.css === */
/* Sysadmin -> KI-/Werkstatt-Tab: zweispaltiges Card-Raster, Werkstatt-
   Abrechnung (Preis-Uebersicht + Aenderungs-Tabelle) und die Preis-Eingabe im
   Modal. Ausgelagert aus dem Template-<style>-Block. */

/* ---- Zweispaltiges Card-Raster ---- */
.ki-tab-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}
.ki-card {
    text-align: left;
    max-width: none;
    padding: 1.25rem 1.5rem;
    margin: 0;
    /* Ohne min-width:0 behalten Grid-Items ihre min-content-Breite (breite
       Formularzeilen blähen die Spalte auf und ragen aus dem Viewport). */
    min-width: 0;
}
.ki-card-full { grid-column: 1 / -1; }
/* Breite Inhalte in den Cards dürfen scrollen statt das Layout zu sprengen. */
.ki-card .table-container { overflow-x: auto; }
.ki-card .form-row { flex-wrap: wrap; }

@media (max-width: 1100px) {
    .ki-tab-grid { grid-template-columns: 1fr; }
}

/* ---- Werkstatt-Preise: kompakte Uebersichtstabelle (nur Anzeige) ---- */
.ws-uebersicht-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ws-uebersicht-table th {
    text-align: left; padding: 0.5rem 0.75rem; border-bottom: 2px solid var(--border-color, #e2e2e2);
    font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; color: #888; font-weight: 600;
}
.ws-uebersicht-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-10, #f0f0f0); }
.ws-uebersicht-table td.ws-u-name { font-weight: 600; }
.ws-uebersicht-table td.ws-u-preis { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ws-uebersicht-table td.ws-u-inaktiv { color: #999; font-style: italic; }
.ws-uebersicht-grund { font-size: 0.86rem; color: #555; margin: 0.6rem 0 0; }
.ws-uebersicht-aktionen { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.ws-section-title { margin: 1.75rem 0 0.5rem; font-size: 1.05rem; }

/* ---- Ankuendigungen als Tabelle ---- */
.ws-aenderung-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ws-aenderung-table th {
    text-align: left; padding: 0.5rem 0.75rem; border-bottom: 2px solid var(--border-color, #e2e2e2);
    font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; color: #888; font-weight: 600;
}
.ws-aenderung-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border-10, #f0f0f0); vertical-align: middle; }
.ws-aenderung-table td.ws-a-aktion { text-align: right; white-space: nowrap; }
.ws-aenderung-table .btn { margin-left: 0.3rem; }
.ws-frage { font-weight: 600; color: #b00; margin-right: 0.3rem; }

.ws-a-badge {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: 0.74rem; font-weight: 600;
}
.ws-badge-angekuendigt { background: #fff3cd; color: #7a5c00; }
.ws-badge-zugestimmt { background: #d7ede0; color: #1f5c39; }
.ws-badge-vorgemerkt_beendet { background: #fde2e0; color: #a12820; }
.ws-badge-wirksam { background: #2E5D3A; color: #fff; }
.ws-badge-beendet { background: #eee; color: #777; }
.ws-badge-entwurf { background: #eef; color: #445; }

/* ---- Preis-Eingabe im Bearbeiten-/Ankuendigen-Modal ---- */
.ws-edit-table { width: 100%; border-collapse: collapse; }
.ws-edit-table th {
    text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border-color, #e2e2e2);
    font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; color: #888;
}
.ws-edit-table td { padding: 0.5rem 0.6rem; vertical-align: middle; border-bottom: 1px solid var(--border-10, #f0f0f0); }
.ws-edit-table td.ws-dienst-name { font-weight: 600; }
.ws-edit-table .ws-einheit { width: 100%; max-width: 220px; }
.ws-edit-table .ws-preis-zelle .currency-wrapper { max-width: 170px; }
.ws-edit-table .ws-token-felder { display: flex; gap: 1rem; flex-wrap: wrap; }
.ws-edit-table .ws-mini-label {
    display: flex; flex-direction: column; gap: 3px;
    font-size: 0.76rem; color: var(--text-muted, #666); width: 150px;
}
.ws-edit-table .ws-inaktiv { color: #999; font-style: italic; }

.ws-modal-eingaben { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-end; margin-top: 1.25rem; }
.ws-grundbetrag-group { width: 170px; }
/* Der Rahmen des Betragsfelds kommt global aus forms-widgets.css
   (.currency-numpad) - hier bewusst nichts mehr, sonst doppelt. */

/* ---- Preisvergleich (Detail-Modal einer Ankuendigung) ---- */
.ws-v-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 0.2rem 0 0.75rem; }
.ws-v-table th {
    text-align: left; padding: 5px 10px; border-bottom: 1px solid var(--border-color, #e2e2e2);
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #888; font-weight: 600;
}
.ws-v-table td { padding: 5px 10px; border-bottom: 1px solid var(--border-10, #f0f0f0); }
.ws-v-alt { color: #999; }
.ws-v-table tr.ws-v-geaendert td.ws-v-neu { font-weight: 700; color: #2E5D3A; }
.ws-v-table tr.ws-v-geaendert td:first-child { font-weight: 600; }
.ws-v-grund { font-size: 0.86rem; color: #555; margin-bottom: 0.75rem; }
.ws-a-meta { font-size: 0.88rem; color: #555; margin-top: 0.4rem; }
.ws-a-offen { color: #7a5c00; }

/* ---- KI-Modul-Preisanpassung (PowerTable-Zellen) ---- */
.ws-empfaenger { font-size: 0.85em; color: #666; }

/* ---- KI-Nutzung & Abrechnung: Tools, Diagramm, Kosten-Kacheln ---- */
.ki-tools { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.ki-tools .field-input { width: auto; min-width: 150px; }

.ki-chart-wrap { position: relative; height: 260px; margin: 0.25rem 0 0.75rem; }
.ki-chart-cap { font-size: 0.82rem; color: #666; margin: 0 0 1rem; }

.ki-kosten-strip {
    display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch;
    margin: 0 0 1rem;
}
.ki-kosten-kachel {
    flex: 1 1 160px; min-width: 0;
    border: 1px solid var(--border-color, #e0e0e0); border-radius: 8px;
    padding: 0.7rem 0.9rem; display: flex; flex-direction: column; gap: 2px;
    background: #fff;
}
.ki-kosten-wert { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--primary-green); }
.ki-kosten-label { font-size: 0.72rem; color: #777; }
.ki-kosten-gesamt { border-color: var(--primary-green); background: var(--primary-5, #eef5ee); }
.ki-kosten-badge { align-self: center; }

.ki-werkstatt-status { color: #c62828; font-size: 0.875rem; margin-bottom: 0.75rem; }

@media (max-width: 700px) {
    .ki-chart-wrap { height: 220px; }
    .ki-kosten-kachel { flex-basis: 100%; }
}

/* === sysadmin.css === */
/* ============================================================
   Sysadmin-Seite: Layout- und Komponenten-Styles.
   Ersetzt den früheren Inline-<style>-Block + Inline-Styles
   in sysadmin.html. Präfix .sa- = Sysadmin-Layout-Klassen.
   ============================================================ */

/* --- Basis-Karten --------------------------------------------- */
.sa-content-card {
    text-align: left;
    max-width: none;
    padding: 1.5rem 2rem;
}
.sa-filter-card {
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
}
.sa-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}
.sa-filter-row .form-group { margin: 0; }
.sa-w110 { min-width: 110px; }
.sa-w120 { min-width: 120px; }
.sa-w130 { min-width: 130px; }
.sa-w140 { min-width: 140px; }
.sa-w150 { min-width: 150px; }
.sa-muted-right {
    margin-left: auto;
    font-size: 0.75rem;
    color: #9ca3af;
    align-self: center;
}
.sa-loading { color: #9ca3af; font-size: 0.875rem; }
.sa-panel-card { padding: 1rem; }
.sa-panel-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.sa-panel-title-lg {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.sa-panel-text { font-size: 0.875rem; }

/* Die KPI-Karten stehen jetzt im globalen Baustein kennzahlen.css
   (.kennzahl-grid.kennzahl-grid-kompakt mit .kennzahl.kennzahl-mitte). */

/* --- Chart-Raster ---------------------------------------------- */
.sa-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.sa-timeline { display: none; margin-top: 1rem; }

/* --- Security-Sub-Tab ------------------------------------------ */
/* Die Kennzahlkarten dieses Bereichs kommen ebenfalls aus kennzahlen.css
   (.kennzahl-streifen-* für den Rand, .kennzahl-wert-* für die Zahl). */
.sa-warnings { margin-bottom: 1rem; }
.sa-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 900px) {
    .sa-two-col { grid-template-columns: 1fr; }
}
.sa-scroll-box {
    font-size: 0.8rem;
    max-height: 240px;
    overflow-y: auto;
}
.sa-flex-card {
    padding: 1rem;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.sa-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}
.sa-toolbar h4 { font-size: 0.875rem; font-weight: 600; margin: 0; }
.sa-table-flex { flex: 1; min-height: 0; }
.sa-hint-right { margin-left: auto; font-size: 0.7rem; color: #9ca3af; }
.sec-mono { font-family: monospace; font-size: 0.78rem; }
.sec-pfad {
    font-size: 0.75rem;
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* --- Audit-Log ------------------------------------------------- */
.sa-header-actions { display: flex; gap: 0.5rem; align-items: center; }
.sa-content-card .section-header { margin-bottom: 1rem; }
#tab-module .field-hint { margin-bottom: 1.5rem; }
.audit-meta { margin-bottom: 1rem; font-size: 0.9rem; color: #666; }
.audit-diff-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.audit-diff-title { font-size: 0.85rem; color: #999; margin-bottom: 0.5rem; }
.audit-diff-pre {
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.audit-diff-alt { background: #fce4ec; }
.audit-diff-neu { background: #e8f5e9; }

/* --- Dateispeicher --------------------------------------------- */
#ds-dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
}
.ds-stat-card { padding: 1rem; text-align: center; }
.ds-stat-wert { font-size: 1.75rem; font-weight: 700; }
.ds-stat-label { color: #777; font-size: 0.75rem; margin-top: 2px; }
.ds-stat-sub { font-size: 0.68rem; color: #999; margin-top: 6px; }
.ds-stat-gruen { border-left: 4px solid var(--primary-green); }
.ds-stat-gruen .ds-stat-wert { color: var(--primary-green); }
.ds-stat-blau { border-left: 4px solid #1565C0; }
.ds-stat-blau .ds-stat-wert { color: #1565C0; }
.ds-stat-grau { border-left: 4px solid #555; }
.ds-stat-grau .ds-stat-wert { color: #555; }
.ds-stat-rot { border-left: 4px solid #c62828; }
.ds-stat-rot .ds-stat-wert { color: #c62828; }
.ds-bar {
    margin-top: 8px;
    background: #e8e8e8;
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}
.ds-bar-segments { display: flex; height: 100%; }
.ds-bar-fill-blau { background: #1565C0; height: 100%; transition: width 0.3s; }
.ds-legende {
    font-size: 0.62rem;
    color: #999;
    margin-top: 4px;
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}
.ds-einsparung {
    font-size: 0.85rem;
    color: #c62828;
    margin-top: 4px;
    font-weight: 600;
}
#ds-aufraumen-btn { margin-top: 8px; display: none; }
.ds-chip-row {
    display: flex;
    gap: 8px;
    margin-bottom: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.ds-chip-row .ds-chip-warn { margin-left: auto; }
.ds-chip-label { font-size: 0.75rem; color: #888; }

.ds-chip {
    border: 1px solid #ddd;
    background: #f5f5f5;
    color: #555;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 0.73rem;
    cursor: pointer;
    transition: all 0.15s;
}
.ds-chip:hover { background: #e8e8e8; }
.ds-chip.active {
    background: var(--primary-green);
    color: white;
    border-color: var(--primary-green);
}
.ds-chip[data-filter]:not([data-filter="alle"]):not(.ds-chip-warn).active {
    background: var(--chip-color, #555);
    color: white;
    border-color: var(--chip-color, #555);
}
.ds-chip-warn {
    border-color: #ffcc80;
    background: #fff8e1;
    color: #c62828;
}
.ds-chip-warn.active {
    background: #c62828;
    color: white;
    border-color: #c62828;
}
.ds-quelle-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 500;
    white-space: nowrap;
}
.ds-verwaist-row { background: #fff8e1 !important; }
.ds-verwaist-text { color: #c62828; font-style: italic; }

@media (max-width: 900px) {
    #ds-dashboard { grid-template-columns: repeat(2, 1fr); }
}

/* --- Sub-Tabs (Performance) ------------------------------------ */
.sub-tab-header {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color, #e0e0e0);
    margin-bottom: 1rem;
}
.sub-tab-item {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: #666;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.sub-tab-item .icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.sub-tab-item:hover { color: var(--primary-green); }
.sub-tab-item.active {
    color: var(--primary-green);
    border-bottom-color: var(--primary-green);
    font-weight: 600;
}
.sub-tab-content { display: none; }
.sub-tab-content.active { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
/* Sub-Tabs die scrollen dürfen (kein PowerTable) */
#perf-overview.active, #perf-system.active, #perf-security.active { overflow: auto; }
/* Performance-Tab als Flex-Container für Sub-Tabs */
#tab-performance.active { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
#tab-performance .sub-tab-header { flex-shrink: 0; }

/* --- Modul-Freischaltung --------------------------------------- */
#tab-module { overflow-y: auto; }
.module-toggle-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
    gap: 0.75rem;
    align-items: start;
}
@media (max-width: 1000px) {
    .module-toggle-list { grid-template-columns: 1fr; }
}
.module-toggle-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    transition: background-color 0.15s, border-color 0.15s;
}
.module-toggle-row:hover {
    background-color: #f7f9fc;
}
.module-toggle-row.disabled {
    background-color: #f5f5f5;
    opacity: 0.6;
}
.module-toggle-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-green);
    color: white;
    border-radius: 8px;
    flex-shrink: 0;
}
.module-toggle-row.disabled .module-toggle-icon {
    background: #bbb;
}
.module-toggle-icon svg { width: 20px; height: 20px; }
.module-toggle-info { flex: 1; }
.module-toggle-name { font-weight: 600; font-size: 0.95rem; }
.module-toggle-desc { font-size: 0.8rem; color: #888; margin-top: 2px; }
.module-toggle-switch { flex-shrink: 0; }
.module-toggle-spacer { width: 28px; }
.module-toggle-roles { color: #aaa; }
.module-toggle-error { color: #c62828; }
.module-toggle-row .toggle-label,
.module-tab-item .toggle-label { margin: 0; }

/* Aufklapp-Pfeil */
.module-toggle-expand {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
    color: #999;
    transition: background 0.15s, color 0.15s;
}
.module-toggle-expand:hover {
    background: #e8e8e8;
    color: var(--primary-green);
}
.module-toggle-expand .icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

/* Tab-Panel */
.module-tabs-panel {
    margin-top: -0.5rem;
    padding: 0.75rem 1.25rem 0.75rem 4.5rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: #fafbfc;
}
.module-tabs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.module-tab-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    background: #fff;
    font-size: 0.82rem;
}
.module-tab-item.tab-disabled {
    opacity: 0.5;
    background: #f5f5f5;
}
.module-tab-name {
    font-weight: 500;
}
/* Kleiner Toggle-Slider für Tab-Checkboxen */
.toggle-sm .toggle-slider {
    width: 36px !important;
    min-width: 36px !important;
    height: 20px !important;
    border-radius: 10px !important;
    margin-right: 0 !important;
}
.toggle-sm .toggle-slider::before {
    width: 16px !important;
    height: 16px !important;
}
.toggle-sm input:checked + .toggle-slider::before {
    transform: translateX(16px) !important;
}

/* --- Wartung (zweispaltig) ------------------------------------- */
.sa-wartung-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 1100px) {
    .sa-wartung-grid { grid-template-columns: 1fr; }
}
.sa-wartung-grid h2 { margin-top: 0; }
.sa-wartung-grid p { color: #607d8b; }
.sa-setting-card {
    margin-top: 1.5rem;
    padding: 1.5rem;
    text-align: left;
}
.sa-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.sa-toggle-row .toggle-label { margin: 0; }
.sa-toggle-row-status { margin-left: 0.5rem; }
.sa-form-gap { margin-top: 1.5rem; margin-bottom: 0; }
.sa-form-gap .btn { margin-top: 0.75rem; }

/* ==================== Schulungen ==================== */
/* Karten statt Zeilen: eine Schulung ist ein Angebot mit Beschreibung und
   Preis, keine Schalterliste wie bei den Modulen. */
.sa-schulungen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.sa-schulung {
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    padding: 1.25rem;
    background: #fff;
}
.sa-schulung.ist-frei {
    border-color: var(--primary-green);
    background: linear-gradient(180deg, rgba(46,125,50,0.04), transparent 60%);
}
.sa-schulung-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.sa-schulung-kopf h3 {
    margin: 0;
    font-size: 1.05rem;
}
.sa-schulung-grundlage {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted, #78909c);
}
.sa-schulung-text {
    margin: 0.85rem 0 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary, #5b6a72);
}
.sa-schulung-preis { margin: 0; max-width: 190px; }
.sa-schulung-erworben {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--primary-green);
}
.sa-schulung-erworben .icon { width: 18px; height: 18px; }
.sa-schulung-laufzeit,
.sa-schulung-abgelaufen {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.9rem;
    font-size: 0.85rem;
    color: var(--text-muted, #78909c);
}
.sa-schulung-laufzeit .icon,
.sa-schulung-abgelaufen .icon { width: 16px; height: 16px; flex-shrink: 0; }
.sa-schulung-abgelaufen { color: #C2703D; }
.sa-schulung.ist-abgelaufen { border-color: #E0B08A; }

/* === einstellungen.css === */
/* ============================================================
   Admin-Einstellungsseite: Layout-Klassen (Präfix .est-).
   Ersetzt Inline-Styles in den _tab_*.html-Partials.
   ============================================================ */

/* Standard-Karte der Einstellungs-Tabs */
.est-card {
    text-align: left;
    max-width: none;
    padding: 1.5rem 2rem;
}
.est-card + .est-card { margin-top: 1rem; }
.est-hint { margin-bottom: 1rem; }

/* Zweispaltiges Karten-Raster (z.B. Impressum + Datenschutzerklärung) */
.est-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 1100px) {
    .est-two-col { grid-template-columns: 1fr; }
}
.est-two-col > .card { min-width: 0; }
.est-two-col > .card + .card { margin-top: 0; }

/* Vertikale Radio-Gruppe */
.radio-group.radio-group-vertical { flex-direction: column; }
.radio-label .field-hint-inline { margin-left: 0.5rem; }

/* Kleinkram */
.est-btn-gap { margin-top: 0.5rem; }

/* KI & Mail-Automatik: Feature-Abschnitte als adaptives Raster statt
   Full-width-Stapel. Jeder Abschnitt (form-chapter) wird eine Kachel. */
.est-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1rem 1.5rem;
    align-items: start;
}
.est-feature-grid > .form-chapter { min-width: 0; margin: 0; }
.est-feature-wide { grid-column: 1 / -1; }

/* Checkbox-Zeile als editable-field ohne Rahmen/Hintergrund */
.editable-field.checkbox-field {
    background: transparent;
    border-color: transparent;
}

/* Abstände */
.est-hint-sm { margin-bottom: 0.75rem; }
.est-actions-gap { margin-top: 1.5rem; }
.est-actions-row {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Flexible Feld-Zeile (z.B. Spam-Schwellwerte) */
.est-flex-row {
    display: flex;
    gap: 1rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.est-flex-row > .editable-field {
    flex: 1;
    min-width: 180px;
}
.est-result-grow { flex: 1; font-size: 0.9rem; }
.est-result-text { font-size: 0.85rem; }

/* === werkstatt-nutzung.css === */
/* ============================================================
   Werkstatt: Sperr-Zustand + nativer Tab "Nutzung & Kosten".
   Ausgelagert aus dem Inline-<style> in werkstatt/index.html
   (interne Seite -> Styles gehören ins gebündelte CSS).
   ============================================================ */

/* --- Sperr-Zustand (Benutzer ohne Freigabe) --- */
.werkstatt-gesperrt { display: flex; justify-content: center; padding: 40px 16px; }
.wg-karte {
    max-width: 560px; text-align: center; background: #fff;
    border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1); padding: 32px 30px;
}
.wg-icon { width: 40px; height: 40px; color: var(--primary-green); margin-bottom: 8px; }
.wg-karte h2 { margin: 0 0 10px; }
.wg-karte p { color: var(--text-muted); line-height: 1.6; }
.wg-hinweis { font-weight: 600; color: var(--text-dark); margin-top: 14px; }
.wg-karte .btn { margin-top: 6px; }
.wg-status { margin-top: 14px; font-size: .92rem; }

/* --- Nutzung & Kosten (nativer MFV-Tab) --- */
.wk-nutzung { max-width: 960px; margin: 0 auto; padding: 8px 4px 40px; }
.wk-n-kopf {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.wk-n-kopf h2 { margin: 0 0 2px; }
.wk-n-lead { color: var(--text-muted); margin: 0; line-height: 1.55; max-width: 560px; }
.wk-n-zeitraum { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--text-muted); }
.wk-n-zeitraum .field-input { width: auto; min-width: 150px; }

.wk-n-kacheln {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px; margin-bottom: 18px;
}
.wk-n-kachel {
    background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
}
.wk-n-wert { font-size: 1.6rem; font-weight: 650; color: var(--primary-green); font-variant-numeric: tabular-nums; }
.wk-n-label { font-size: .78rem; color: var(--text-muted); }
.wk-n-hinweis {
    background: var(--primary-5, #eef5ee); border-left: 4px solid var(--primary-green);
    border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; line-height: 1.5;
}
.wk-n-chart-wrap { position: relative; height: 260px; margin: 4px 0 20px; }
.wk-n-fuss { color: var(--text-muted); font-size: .8rem; margin-top: 12px; line-height: 1.5; }
.wk-n-leer { color: var(--text-muted); font-style: italic; }
.wk-n-abschnitt { margin: 26px 0 10px; font-size: 1.1rem; }
.wk-n-grund { color: var(--text-muted); font-size: .85rem; margin: 8px 0 0; }

@media (max-width: 700px) {
    .wk-n-chart-wrap { height: 220px; }
}