/* ========================================
   ZENTRALE DESIGN-VARIABLEN
   ======================================== */

:root {
    /* ===== BASIS-FARBEN ===== */
    --bg-primary: #ffffff;
    --bg-secondary: #f3f4f6;
    --bg-hover: #e5e7eb;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --border-color: #d1d5db;
    --accent-color: #3b82f6;

    /* ===== 1. STATUS-FARBEN ===== */
    /* Success - Grün (Erfolg, Aktiv, Bestätigt) */
    --success: #86efac;
    --success-light: #bbf7d0;
    --success-dark: #166534;

    /* Error - Rot (Fehler, Löschen, Offline) */
    --error: #fca5a5;
    --error-light: #fecaca;
    --error-dark: #b91c1c;

    /* Warning - Gelb (Warnung, Pending) */
    --warning: #fcd34d;
    --warning-light: #fde68a;
    --warning-dark: #92400e;

    /* Info - Blau (Hinweise, Links) */
    --info: #93c5fd;
    --info-light: #bfdbfe;
    --info-dark: #1e40af;

    /* ===== 2. WERBER / KUNDE ===== */
    --color-werber: #713f12;
    --color-werber-light: #d4a574;
    --color-werber-dark: #3d2208;
    --color-kunde: #dc2626;
    --color-kunde-light: #f5a3a3;
    --color-kunde-dark: #7f1d1d;

    /* ===== 3. WERBEGEBIETE / KAMPAGNEN ===== */
    --color-werbegebiet: #38bdf8;
    --color-werbegebiet-light: #bae6fd;
    --color-werbegebiet-dark: #0369a1;
    --color-kampagne: #1e3a8a;
    --color-kampagne-light: #a5b4fc;
    --color-kampagne-dark: #1e1b4b;

    /* ===== 4. MITGLIEDER ===== */
    --color-neumitglied: #228b22;
    --color-neumitglied-light: #90ee90;
    --color-neumitglied-dark: #145214;
    --color-erhoehung: #14b8a6;
    --color-erhoehung-light: #99f6e4;
    --color-erhoehung-dark: #0f766e;
    --color-storno: #fb7185;
    --color-storno-light: #fecdd3;
    --color-storno-dark: #be123c;

    /* ===== 5. WERBER-STUFEN ===== */
    --stufe-sma: #713f12;
    --stufe-ema: #854d0e;
    --stufe-jmm: #a16207;
    --stufe-emm: #ca8a04;
    --stufe-cemm: #eab308;
    --stufe-spb: #facc15;
    --stufe-kad: #eab308;
    --stufe-fue: #f59e0b;

    /* ===== 6. ZAHLUNGSRHYTHMUS ===== */
    --zr-monatlich: #f87171;
    --zr-quartal: #d97706;
    --zr-halbjaehrlich: #fbbf24;
    --zr-jaehrlich: #4ade80;

    /* ===== 8. FOCUS STATE ===== */
    --accent-color-ring: rgba(59, 130, 246, 0.6);

    /* Abstände */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Schriftgrößen */
    --text-klein: 12px;
    --text-normal: 14px;
    --text-ueberschrift-unterabschnitt: 14px;
    --text-ueberschrift-abschnitt: 18px;
    --text-ueberschrift: 20px;

    /* Schriftstärke */
    --fett: 700;
    
    /* Rundungen */
    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 16px;
    --radius-full: 50%;
    
    /* Schatten */
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

    /* Eingabefeld-Höhen */
    --eingabefeld-beschriftung-oben-hoehe: 18px;
    --eingabefeld-hoehe: 36px;
    --eingabefeld-beschriftung-unten-hoehe: 15px;

}

/* ========================================
   DARK MODE
   ======================================== */

[data-theme="dark"] {
    /* ===== BASIS-FARBEN ===== */
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-hover: #252545;
    --text-primary: #eaeaea;
    --text-secondary: #a0a0a0;
    --text-muted: #6b6b8a;
    --border-color: #2a2a4a;
    --accent-color: #60a5fa;

    /* Status-Farben - Dark Mode (hellere Hauptfarben) */
    --success: #4ade80;
    --success-light: rgba(34, 197, 94, 0.2);
    --success-dark: #86efac;

    --error: #f87171;
    --error-light: rgba(239, 68, 68, 0.2);
    --error-dark: #fca5a5;

    --warning: #fbbf24;
    --warning-light: rgba(245, 158, 11, 0.2);
    --warning-dark: #fde68a;

    --info: #60a5fa;
    --info-light: rgba(59, 130, 246, 0.2);
    --info-dark: #93c5fd;

    /* Schatten - stärker im Dark Mode */
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
}

/* ========================================
   FARB-KLASSEN
   ======================================== */

/* === 1. STATUS-FARBEN === */
/* Success */
.color-success { color: var(--success); }
.bg-success { background: var(--success); }
.border-success { border-color: var(--success); }
.badge-success { background: var(--success-light); color: var(--success-dark); }

/* Error */
.color-error { color: var(--error); }
.bg-error { background: var(--error); }
.border-error { border-color: var(--error); }
.badge-error { background: var(--error-light); color: var(--error-dark); }

/* Warning */
.color-warning { color: var(--warning); }
.bg-warning { background: var(--warning); }
.border-warning { border-color: var(--warning); }
.badge-warning { background: var(--warning-light); color: var(--warning-dark); }

/* Info */
.color-info { color: var(--info); }
.bg-info { background: var(--info); }
.border-info { border-color: var(--info); }
.badge-info { background: var(--info-light); color: var(--info-dark); }

/* === 2. WERBER / KUNDE === */
.color-werber { color: var(--color-werber); }
.bg-werber { background: var(--color-werber); }
.border-werber { border-color: var(--color-werber); }

.color-kunde { color: var(--color-kunde); }
.bg-kunde { background: var(--color-kunde); }
.border-kunde { border-color: var(--color-kunde); }

/* === 3. WERBEGEBIETE / KAMPAGNEN === */
.color-werbegebiet { color: var(--color-werbegebiet); }
.bg-werbegebiet { background: var(--color-werbegebiet); }
.border-werbegebiet { border-color: var(--color-werbegebiet); }

.color-kampagne { color: var(--color-kampagne); }
.bg-kampagne { background: var(--color-kampagne); }
.border-kampagne { border-color: var(--color-kampagne); }

/* === 4. MITGLIEDER === */
.color-neumitglied { color: var(--color-neumitglied); }
.bg-neumitglied { background: var(--color-neumitglied); }
.border-neumitglied { border-color: var(--color-neumitglied); }

.color-erhoehung { color: var(--color-erhoehung); }
.bg-erhoehung { background: var(--color-erhoehung); }
.border-erhoehung { border-color: var(--color-erhoehung); }

.color-storno { color: var(--color-storno); }
.bg-storno { background: var(--color-storno); }
.border-storno { border-color: var(--color-storno); }

/* === 5. WERBER-STUFEN === */
.stufe-sma { background: var(--stufe-sma); color: var(--bg-primary); }
.stufe-ema { background: var(--stufe-ema); color: var(--bg-primary); }
.stufe-jmm { background: var(--stufe-jmm); color: var(--bg-primary); }
.stufe-emm { background: var(--stufe-emm); color: var(--bg-primary); }
.stufe-cemm { background: var(--stufe-cemm); color: var(--bg-primary); }
.stufe-spb { background: var(--stufe-spb); color: var(--color-werber); }
.stufe-kad { background: linear-gradient(135deg, #fef9c3, #fde047, #eab308); color: var(--color-werber); }
.stufe-fue { background: linear-gradient(135deg, #fffbeb, #fef08a, #fde047, #f59e0b); color: var(--color-werber); }

/* === 6. ZAHLUNGSRHYTHMUS === */
.color-zr-monatlich { color: var(--zr-monatlich); }
.bg-zr-monatlich { background: var(--zr-monatlich); }
.border-zr-monatlich { border-color: var(--zr-monatlich); }

.color-zr-quartal { color: var(--zr-quartal); }
.bg-zr-quartal { background: var(--zr-quartal); }
.border-zr-quartal { border-color: var(--zr-quartal); }

.color-zr-halbjaehrlich { color: var(--zr-halbjaehrlich); }
.bg-zr-halbjaehrlich { background: var(--zr-halbjaehrlich); }
.border-zr-halbjaehrlich { border-color: var(--zr-halbjaehrlich); }

.color-zr-jaehrlich { color: var(--zr-jaehrlich); }
.bg-zr-jaehrlich { background: var(--zr-jaehrlich); }
.border-zr-jaehrlich { border-color: var(--zr-jaehrlich); }

/* === 8. FOCUS STATE === */
/* Input Focus */
.eingabefeld:focus,
.toolbar-search-input:focus,
.toolbar-filter:focus,
.calendar-field input:focus,
.export-filename-input input:focus,
.attendance-notes-input-area textarea:focus,
.setting-input:not(:disabled):focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1.5px var(--accent-color-ring);
}

/* Hover Hintergrund Grau */
.hover-bg-grau:hover,
.anzeigenfeld--card.active,
.achievement-card--active,
.template-card:hover,
.create-new-card:hover,
.preisvorlage-card:hover,
.preisvorlage-card.create-new:hover,
.vorlage-card:hover,
.vorlage-card--new:hover,
.list-item:hover,
.list-group-header:hover,
.autocomplete-item:hover,
.kw-tab:hover,
.page-header-tabs .kw-tab:hover,
.tc-dienst-add:hover,
.toolbar-nav-trigger:hover,
.toolbar-nav-option:hover,
.toolbar-filter:hover,
.calendar-nav-btn:hover,
.calendar-year-btn:hover,
.calendar-today-btn:hover,
.calendar-day:hover,
.user-badge--clickable:hover,
.timeline-horizontal-dot:hover,
.table th.sortable:hover,
.dropdown-btn:hover,
.dropdown-item:hover,
.btn-columns:hover,
.column-item:hover,
.template-item:hover,
.audit-item:hover,
.back-btn:hover,
.tab-btn:hover,
.sidebar .nav-link:hover,
.shell-search-result-item:hover,
.gruppenbild-upload:hover,
.kw-detail-header:hover,
.kw-info-icon:hover,
.kw-wg-chip:hover,
.kw-wg-ma-item:hover,
.header-settings-btn:hover,
.customer-dropdown-trigger:hover,
.customer-dropdown-item:hover,
.achievement-card:hover,
.info-icon:hover,
.template-tab:hover,
.main-tab:hover,
.photo-upload:hover,
.document-upload-box:hover,
.document-file-row:hover,
.symbol-option:hover,
.referral-tree__card--hoverable:hover,
.tab:hover,
.placeholder-copy:hover,
.toolbar-search-wrapper:hover {
    background: var(--bg-hover);
}

/* Hover Hintergrund Blau */
.hover-bg-blau:hover,
.btn.btn-sm.btn-notes:hover,
.datensaetze-page .anzeigenfeld .btn.btn-sm:not(#recordsSelectionBtn):not(#bestandSelectionBtn):hover {
    background: var(--accent-color);
    color: var(--bg-primary);
}

/* Hover Umrandung Blau */
.hover-umrandung-blau:hover,
.eingabefeld:hover,
.campaign-card:hover,
.schrieb-compact:hover,
.anzeigenfeld--card:hover {
    box-shadow: 0 0 0 1.5px var(--accent-color-ring);
}

/* Hover Umrandung Grau */
.hover-umrandung-grau:hover {
    box-shadow: 0 0 0 1.5px var(--text-secondary);
}

/* ========================================
   BASIS-RESET
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-secondary);
    color: var(--text-primary);
    line-height: 1.5;
    height: 100%;
    overflow: auto;
}

/* Shell-Body: Kein Scrolling (Inhalt per iframe) */
body.shell-body {
    overflow: hidden;
}

/* ========================================
   TYPOGRAPHY SYSTEM
   Zentrales Schrift-System für alle Überschriften und Texte

   Text:
   - .text-klein                       → 12px, Sekundärer Text (grau)
   - .text-normal                      → 14px, Standard-Text
   - .text-ueberschrift-unterabschnitt → 14px bold
   - .text-ueberschrift-abschnitt      → 18px bold
   - .text-ueberschrift                → 20px bold
   ======================================== */

.text-normal {
    font-size: var(--text-normal);
    color: var(--text-primary);
}

.text-normal--fett {
    font-weight: var(--fett);
}

.text-klein {
    font-size: var(--text-klein);
    color: var(--text-secondary);
}

.text-klein--fett {
    font-size: var(--text-klein);
    font-weight: var(--fett);
}

.text-ueberschrift-unterabschnitt {
    font-size: var(--text-ueberschrift-unterabschnitt);
    font-weight: var(--fett);
    color: var(--text-primary);
}

.text-ueberschrift-abschnitt {
    font-size: var(--text-ueberschrift-abschnitt);
    font-weight: var(--fett);
    color: var(--text-primary);
}

.text-ueberschrift {
    font-size: var(--text-ueberschrift);
    font-weight: var(--fett);
    color: var(--text-primary);
}

/* ===== EINGABEFELDER ===== */

.eingabefeld {
    width: 100%;
    height: var(--eingabefeld-hoehe);
    padding: 0 8px;
    border: 1px solid var(--bg-hover);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-normal);
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

textarea.eingabefeld {
    height: auto;
    padding: 8px;
    resize: vertical;
}

.eingabefeld:disabled {
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: not-allowed;
}

.eingabefeld::placeholder {
    color: var(--text-muted);
    font-family: inherit;
}

.anzeigenfeld {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm);
    font-size: var(--text-normal);
    color: var(--text-primary);
}

.anzeigenfeld--fett {
    font-weight: var(--fett);
}

.anzeigenfeld--no-padding {
    padding: 0;
}

.anzeigenfeld--no-padding-x {
    padding-left: 0;
    padding-right: 0;
}

.anzeigenfeld--pills {
    gap: 4px;
    flex-wrap: wrap;
    width: auto;
    padding: 0;
}

.anzeigenfeld--card {
    position: relative;
    justify-content: space-between;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin: 8px 0;
    cursor: pointer;
}

.anzeigenfeld--card.active {
    background: rgba(99, 102, 241, 0.05);
}

.anzeigenfeld--card-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.anzeigenfeld--auto {
    width: auto;
    flex-shrink: 0;
}

.anzeigenfeld--hinweis {
    justify-content: center;
    text-align: center;
    font-size: var(--text-klein);
    color: var(--text-secondary);
    padding: var(--spacing-sm);
}

/* Feste Breiten für Toolbar-Bereiche */
.anzeigenfeld--w-280 { width: 280px; flex-shrink: 0; }
.anzeigenfeld--w-300 { width: 300px; flex-shrink: 0; }
.anzeigenfeld--w-320 { width: 320px; flex-shrink: 0; }
.anzeigenfeld--w-350 { width: 350px; flex-shrink: 0; }

.anzeigenfeld--spacer {
    flex: 1;
    min-width: var(--spacing-md);
    padding: 0;
}

/* Vertikaler Trennstrich (als eigenes Anzeigenfeld) */
.anzeigenfeld--divider {
    width: 1px;
    min-width: 1px;
    max-width: 1px;
    height: 20px;
    padding: 0;
    background: var(--border-color);
    align-self: center;
    margin: 0 var(--spacing-xs);
    flex-shrink: 0;
}

/* Vertikaler Trennstrich (inline innerhalb Anzeigenfeld) */
.divider-inline {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    align-self: center;
    margin: 0 var(--spacing-xs);
    flex-shrink: 0;
}

.anzeigenfeld--min-height {
    min-height: 40px;
}

.anzeigenfeld--hidden {
    display: none;
}

.anzeigenfeld--hidden.visible {
    display: flex;
}

.anzeigenfeld--wrap {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: space-between;
}

.anzeigenfeld--col {
    flex-direction: column;
    align-items: flex-start;
}

/* Anzeige-Box: Boxen nebeneinander in einer Reihe */
.anzeige-box-row {
    display: flex;
    margin: 0;
    padding: 0;
}

.anzeige-box-row--wrap {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-sm);
    margin-top: 8px;
}

.anzeige-box {
    flex: 1;
    min-width: 0;
    margin: 8px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.anzeige-box--no-border {
    border: none;
}

.anzeige-box--no-padding {
    padding: 0;
}

.anzeige-box--no-padding-x {
    padding-left: 0;
    padding-right: 0;
}

.anzeige-box--no-margin {
    margin: 8px 0 0 0;
}

.anzeige-box--quarter {
    flex: 0 0 calc(25% - 6px);
}

/* Schriebe-Reihe: 5 gleichbreite Kärtchen */
.anzeigenfeld--schriebe-row {
    display: flex;
    gap: var(--spacing-sm);
    padding: 0;
}

.anzeigenfeld--schriebe-row > * {
    flex: 1;
    min-width: 0;
}

.eingabefeld-beschriftung-oben {
    display: block;
    font-size: var(--text-klein);
    font-weight: var(--fett);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    margin-left: 4px;
    min-height: var(--eingabefeld-beschriftung-oben-hoehe);
}

.eingabefeld-beschriftung-unten {
    display: block;
    font-size: var(--text-klein);
    color: var(--text-secondary);
    margin-top: 3px;
    margin-left: 8px;
    line-height: 1;
    min-height: var(--eingabefeld-beschriftung-unten-hoehe);
}

.eingabefeld-beschriftung-unten--einzeilig {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Eingabefeld-Gruppe (Container) - Flex-System */
.eingabefeld-gruppe {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Flex-Modifier (wachsen mit) */
.eingabefeld-gruppe--flex-0-5 {
    flex: 0 0 auto;
}

.eingabefeld-gruppe--flex-1-5 {
    flex: 1.5;
}

.eingabefeld-gruppe--flex-2 {
    flex: 2;
}

.eingabefeld-gruppe--flex-3 {
    flex: 3;
}

/* Fixed-Modifier (wachsen nicht, Gap-berücksichtigt) */
.eingabefeld-gruppe--fixed-0-5 {
    flex: none;
    width: calc(12.5% - var(--spacing-lg) / 2);
}

.eingabefeld-gruppe--fixed-1 {
    flex: none;
    width: calc(25% - var(--spacing-lg) / 2);
}

.eingabefeld-gruppe--fixed-2 {
    flex: none;
    width: calc(50% - var(--spacing-lg) / 2);
}

.eingabefeld-gruppe--fixed-3 {
    flex: none;
    width: calc(75% - var(--spacing-lg) / 2);
}

.eingabefeld-gruppe--fixed-3-5 {
    flex: none;
    width: calc(87.5% - var(--spacing-lg) / 2);
}

.eingabefeld-gruppe--fixed-4 {
    flex: none;
    width: 100%;
}

/* Auto-Breite (passt sich Inhalt an) */
.eingabefeld-gruppe--auto {
    flex: 0 0 auto;
    width: auto;
}

/* Eingabefeld-Gruppe mit Einheit (z.B. %, €, Wochen) */
.eingabefeld-gruppe--mit-einheit {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--spacing-xs);
}

.eingabefeld-gruppe--mit-einheit .eingabefeld-beschriftung-oben {
    width: 100%;
}

.eingabefeld-gruppe--mit-einheit .eingabefeld {
    flex: 1;
    min-width: 0;
}

.eingabefeld-gruppe--mit-einheit > span {
    color: var(--text-secondary);
    font-size: var(--text-klein);
    white-space: nowrap;
    padding-bottom: 6px;
}

/* Eingabefeld-Gruppe mit Aktion rechts (Toggle, Button, Icon) */
.eingabefeld-gruppe--mit-aktion {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* Eingabefeld mit Einheit (Input + Einheit nebeneinander) */
.eingabefeld-mit-einheit {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.eingabefeld-mit-einheit .eingabefeld {
    flex: 1;
    min-width: 0;
}

.eingabefeld-mit-einheit > span {
    color: var(--text-secondary);
    font-size: var(--text-klein);
    white-space: nowrap;
}

/* ===== EINGABEFELD-CARD (Card-Style statt Input-Border) ===== */

.eingabefeld-card {
    width: 100%;
    height: var(--eingabefeld-hoehe);
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-normal);
    background: var(--bg-secondary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

/* Eingabefeld-Card-Gruppe (Beschriftung oben + Card + Beschriftung unten) */
.eingabefeld-card-gruppe {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* ===== FORM-SYSTEM (Abschnitte & Unterabschnitte) ===== */

/*
 * Hierarchie:
 * - .abschnitt--card (äußere Card, kein Padding)
 *   - .unterabschnitt--card (innere Card, kein Padding)
 *     - .zeile (horizontale Reihe MIT Padding)
 *       - .eingabefeld-gruppe / Überschriften
 *
 * WICHTIG: Padding kommt NUR von .zeile!
 */

/* Abschnitt - Hauptcontainer */
.abschnitt {
    display: flex;
    flex-direction: column;
}

/* Trennlinie zwischen Abschnitten */
.abschnitt + .abschnitt {
    border-top: 1px solid var(--border-color);
    margin-top: var(--spacing-lg);
}

/* Abschnitt als Card (kein Padding - kommt von .zeile) */
.abschnitt--card {
    background: var(--bg-primary);
    border: none;
    border-radius: var(--radius-md);
}

/* Variante: Mit sichtbarem Rand (für Dashboard etc.) */
.abschnitt--card--umrandet {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

/* Variante: Volle Breite ohne Padding (für Tabellen) */
.abschnitt--card--tabelle-volle-breite {
    background: var(--bg-primary);
    border: none;
    border-radius: 0;
    margin-left: calc(-1 * var(--spacing-lg));
    margin-right: calc(-1 * var(--spacing-lg));
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Abstand zwischen Cards */
.abschnitt--card + .abschnitt--card,
.abschnitt--card + .abschnitt--card--tabelle-volle-breite,
.abschnitt--card--umrandet + .abschnitt--card--umrandet {
    margin-top: var(--spacing-lg);
}

/* Unterabschnitt als Card (kleinere innere Card) */
.unterabschnitt--card {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin: var(--spacing-md) 0;
}

.unterabschnitt--card--flex-1 {
    flex: 1;
}

.unterabschnitt--card--no-border {
    border: none;
    background: transparent;
}

/* Abstand zwischen Unterabschnitt-Cards */
.unterabschnitt--card + .unterabschnitt--card {
    margin-top: var(--spacing-md);
}

/* Expandierbare Unterabschnitt-Card */
.unterabschnitt--card--expandable .unterabschnitt--card-details {
    display: none;
}

.unterabschnitt--card--expandable.open .unterabschnitt--card-details {
    display: block;
    padding: 0;
}

.unterabschnitt--card--expandable.open .eingabefeld-beschriftung-unten--einzeilig {
    display: none;
}

.unterabschnitt--card--expandable .expand-icon {
    color: var(--text-muted);
    transition: transform 0.2s;
}

.unterabschnitt--card--expandable.open .expand-icon {
    transform: rotate(180deg);
}

/* Zeile - horizontaler Container MIT Padding */
.zeile {
    display: flex;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
}

.zeile--center {
    align-items: center;
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
}

/* Gleichmäßiger Gap zwischen fixed-width Feldern */
.zeile--spread {
    justify-content: space-between;
}

.zeile--no-padding {
    padding: 0;
}

.zeile--center--no-padding {
    align-items: center;
    padding: 0;
}

/* Shell Toolbar Zeile */
.zeile--shell-toolbar {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    align-items: center;
    padding: 0 var(--spacing-sm);
    height: 52px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    z-index: 500;
    overflow: visible;
}

.zeile--header {
    align-items: center;
    padding: var(--spacing-md) var(--spacing-sm);
}


/* ===== GENERISCHE LIST-KOMPONENTEN ===== */

/* Liste Container */
.list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Einzelnes Listen-Element */
.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.list-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.list-item-name {
    font-size: var(--text-normal);
    font-weight: 500;
    color: var(--text-primary);
}

.list-item-meta {
    font-size: var(--text-klein);
    color: var(--text-secondary);
}

.list-item-actions {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
}

/* Gruppe (einklappbar) */
.list-group {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-top: var(--spacing-sm);
}

.list-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: background 0.2s;
}

.list-group-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.list-group-name {
    font-weight: 600;
    color: var(--text-primary);
}

.list-group-meta {
    font-size: var(--text-klein);
    color: var(--text-secondary);
}

.list-group-content {
    display: none;
    padding: var(--spacing-lg);
    background: var(--bg-primary);
}

/* ===== SPACING UTILITIES ===== */

/* Margin Bottom */
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

/* Margin Top */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

/* Trennlinie */
.trennlinie {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 30px 0;
}

/* ===== AUTOCOMPLETE ===== */
.autocomplete-container {
    position: relative;
}

.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.autocomplete-results.show {
    display: block;
}

.autocomplete-item {
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: var(--text-klein);
}

/* Section Title */
.section-title {
    font-size: var(--text-normal);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

/* ========================================
   BUTTON SYSTEM
   Einheitliches Button-System mit Größen

   Größen:
   - .btn (Standard)  → var(--eingabefeld-hoehe)
   - .btn-sm          → 28px Höhe
   - .btn-lg          → 44px Höhe

   Varianten:
   - .btn-primary     → Blau (Akzentfarbe)
   - .btn-secondary   → Grau (Standard)
   ======================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 60px;
    height: var(--eingabefeld-hoehe);
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--text-klein);
    font-weight: var(--fett);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    overflow: hidden;
}

.btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-secondary);
}

.btn.btn--hover-blau:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-primary);
}

.btn.btn--hover-grau:hover {
    background: var(--bg-hover);
    border-color: var(--text-secondary);
}

.btn svg,
.btn .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Animation für Slide-Effekt */
.btn span,
.btn svg {
    display: inline-block;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn.slide-out span,
.btn.slide-out svg {
    transform: translateY(-100%);
    opacity: 0;
}

.btn.slide-in span,
.btn.slide-in svg {
    transform: translateY(100%);
    opacity: 0;
    transition: none;
}

/* Größen-Varianten */
.btn-sm {
    height: 24px;
    min-width: 60px;
    padding: 0 8px;
    gap: 6px;
    font-size: var(--text-klein);
    font-weight: var(--fett);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
}

.btn-sm svg,
.btn-sm .icon {
    width: calc(var(--text-klein) * 1.25);
    height: calc(var(--text-klein) * 1.25);
}

.btn-sm--hidden {
    display: none;
}

.btn-sm--hidden.visible {
    display: inline-flex;
}

.btn-sm.active {
    background: var(--accent-color);
    color: var(--bg-primary);
}

.btn.btn-danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
}

/* Hover Danger (Rot) */
.btn.btn-danger:hover,
.btn.btn-icon.btn-danger:hover,
.btn.btn-icon:has(.icon--schliessen):hover,
.attendance-notes-modal-close:hover {
    background: var(--error);
    color: var(--text-primary);
    border-color: transparent;
}

.btn.btn-warning {
    background: var(--warning-light);
    color: var(--warning);
    min-width: auto;
}

.btn.btn-card {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: none;
    font-weight: var(--fett);
    min-width: auto;
}

.btn-lg {
    height: 44px;
    min-width: 100px;
    padding: 0 20px;
    font-size: var(--text-medium);
}

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

/* Farb-Varianten */
.btn-primary {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-primary);
}

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

.btn-secondary {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-primary);
}

/* ========================================
   ICON BUTTONS (Close, Remove, Delete)
   Einheitliche Icon-Buttons für Schließen/Löschen

   Struktur: btn btn-icon / btn btn-sm btn-icon
   Modifier: btn-danger (für Löschen)
   ======================================== */

.btn.btn-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
}

.btn.btn-icon:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

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

/* Kleine Icon-Buttons */
.btn.btn-sm.btn-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
}

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

/* Open-Modifier (für Collapse-Icons) */
.btn.btn-icon.open .icon {
    transform: rotate(180deg);
}

.btn.btn-icon .icon {
    transition: transform 0.2s;
}

/* ========================================
   FORM INPUTS
   ======================================== */

.form-group {
    margin-bottom: 6px;
}

.form-label {
    display: block;
    font-size: var(--text-normal);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

/* ========================================
   MODAL
   ======================================== */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

/* Body-Scroll blockieren wenn Modal offen */
body:has(.modal.active) {
    overflow: hidden;
}

/* Page Container Modal Modifier */
.page-container.page-container--modal {
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.modal.active .page-container--modal {
    transform: scale(1);
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-sm);
}


/* ========================================
   MODAL SIZES (XS, S, M, L)
   ======================================== */

/* XS - Extra Small: Bestätigungsdialoge, einfache Popups */
.modal-xs .page-container--modal {
    width: 320px;
    max-width: 90vw;
    max-height: 60vh;
    border-radius: var(--radius-md);
    text-align: center;
}

.modal-xs .modal-body {
    padding: var(--spacing-xl);
}

.modal-xs .page-footer {
    justify-content: center;
    gap: var(--spacing-sm);
}

/* Confirm Dialog Styles (für modal-xs) */
.confirm-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--spacing-lg);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-icon.warning {
    background: var(--warning-light);
    color: var(--warning);
}

.confirm-icon.error {
    background: var(--error-light);
    color: var(--error);
}

.confirm-icon.info {
    background: var(--info-light);
    color: var(--info);
}

.confirm-icon svg {
    width: 28px;
    height: 28px;
}

.confirm-title {
    font-size: var(--text-ueberschrift-abschnitt);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.confirm-message {
    color: var(--text-secondary);
    font-size: var(--text-normal);
    line-height: 1.5;
    white-space: pre-line;
}

/* S - Small: Login, einfache Formulare, Mitglied-Details */
.modal-s .page-container--modal {
    width: 420px;
    max-width: 90vw;
    max-height: 85vh;
    border-radius: var(--radius-md);
}

/* ----------------------------------------
   Mitglied Card Styles (für modal-s)
   ---------------------------------------- */

/* Mitglied Card (kompakt) */
.mitglied-card-large {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.mitglied-card-large-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-sm);
}

.mitglied-card-large-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.mitglied-card-large-eh {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-color);
    background: rgba(59, 130, 246, 0.1);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}

.mitglied-card-large-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: var(--text-secondary);
}

.mitglied-card-large-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mitglied-card-large-row svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.mitglied-card-large-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
    font-size: 11px;
}

.mitglied-card-large-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mitglied-card-large-botschafter {
    color: var(--text-secondary);
}

/* Form Sections im Modal */
.mitglied-form-section {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.mitglied-form-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.mitglied-form-section--no-border {
    border-bottom: none;
}

.mitglied-form-section--compact {
    padding: var(--spacing-md) 16px;
    margin-bottom: 0;
    background: var(--bg-primary);
}

.mitglied-form-section--card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg);
    box-shadow: var(--shadow);
    overflow: visible;
}

.mitglied-form-row {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.mitglied-form-row:last-child {
    margin-bottom: 0;
}

/* Email Buttons (kompakt) */
.mitglied-email-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.btn.btn-email {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn.btn-email:hover {
    border-color: var(--accent-color);
    background: rgba(59, 130, 246, 0.05);
}

.btn.btn-email svg {
    width: 12px;
    height: 12px;
}

.btn.btn-email.btn-email-welcome { color: var(--color-neumitglied); }
.btn.btn-email.btn-email-welcome:hover { border-color: var(--color-neumitglied); background: rgba(34, 139, 34, 0.1); }

.btn.btn-email.btn-email-iban { color: var(--text-primary); }
.btn.btn-email.btn-email-iban:hover { border-color: var(--text-primary); background: var(--bg-hover); }

.btn.btn-email.btn-email-erhoehung { color: var(--color-erhoehung); }
.btn.btn-email.btn-email-erhoehung:hover { border-color: var(--color-erhoehung); background: rgba(20, 184, 166, 0.1); }

.btn.btn-email:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    border-color: var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

/* M - Medium: Mittlere Formulare, Einstellungen */
.modal-m .page-container--modal {
    width: 640px;
    max-width: 90vw;
    max-height: 92vh;
    border-radius: var(--radius-lg);
}

/* L - Large: Große Formulare, Übersichten */
.modal-l .page-container--modal {
    width: 900px;
    max-width: 95vw;
    max-height: 90vh;
    border-radius: var(--radius-lg);
}

.modal-l .modal-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.modal-l .page-content--modal {
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
    min-height: 0;
}

/* XL - Extra Large: Fast Vollbild */
.modal-xl .page-container--modal {
    width: calc(100vw - 48px);
    height: calc(100vh - 48px);
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    border-radius: var(--radius-lg);
}

.modal-xl .modal-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Modal Split-View (Hauptbereich + Sidebar) */
.page-content--modal-split {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.page-content--modal-split-sidebar {
    width: 280px;
    flex-shrink: 0;
    overflow-y: auto;
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
}

/* ========================================
   CAMPAIGN CARDS
   ======================================== */

.campaign-card {
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    box-shadow: var(--shadow);
    border: 2px solid var(--border-color);
    transition: all 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 280px;
}


.campaign-card.status-inactive {
    opacity: 0.7;
}

.campaign-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.3;
}

/* Status-Button Modifier für btn-sm */
.btn-status-active {
    background: var(--success-light);
    color: var(--success-dark);
    border-color: var(--success);
}

.btn-status-planned {
    background: var(--info-light);
    color: var(--info-dark);
    border-color: var(--info);
}

.btn-status-inactive {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.btn-status-warning {
    background: var(--warning-light);
    color: var(--warning-dark);
    border-color: var(--warning);
}

.campaign-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.campaign-kw-area {
    margin-top: auto;
}

.kw-timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    width: 52px;
    border: 1px solid var(--border-color);
    transition: all 0.15s;
}

.kw-timeline-item .kw-num {
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.kw-timeline-item .kw-count {
    color: var(--accent-color);
}

.kw-timeline-item.kw-empty {
    opacity: 0.6;
}

.kw-timeline-item.kw-empty .kw-count {
    color: var(--text-secondary);
}

.kw-timeline-item.kw-current {
    background: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 2px 8px rgba(113, 63, 18, 0.1);
}

.kw-timeline-item.kw-current .kw-num,
.kw-timeline-item.kw-current .kw-count {
    color: var(--bg-primary);
}

/* ========================================
   MEMBER CARDS (Mitglieder-Kärtchen)
   Verwendung: Kampagnen, Audit-Log
   ======================================== */

/* Grid Layout */
.schriebe-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-sm);
}

@media (max-width: 1200px) {
    .schriebe-grid {
grid-template-columns: repeat(4, 1fr);
    }
}

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

/* Member Card (schrieb-compact Design) */
.schrieb-compact {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    transition: all 0.2s;
    cursor: pointer;
    min-height: 95px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Header: Member-Badge links, Meta rechts */
.schrieb-compact-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.schrieb-compact-member {
    flex: 1;
    min-width: 0;
}

.schrieb-compact-member .user-badge {
    margin-bottom: 4px;
}

.schrieb-compact-member .user-badge__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

/* Location: WG Badge + Standort (vertikal) */
.schrieb-compact-location {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    margin-top: 2px;
}

.schrieb-compact-location .user-badge--mini {
    margin-left: 3px;
}

.schrieb-compact-strasse {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 7px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: -0.2px;
    margin-left: 3px;
}

.schrieb-compact-strasse .location-emoji {
    width: 18px;
    text-align: center;
    font-size: 12px;
    line-height: 1;
}

/* Meta: Uhrzeit + EH rechts oben */
.schrieb-compact-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.schrieb-compact-time {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 11px;
}

.schrieb-compact-eh {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-color);
    white-space: nowrap;
}

/* Footer: Status links, Botschafter rechts */
.schrieb-compact-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
    font-size: 10px;
}

.schrieb-compact-status {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Status Icons */
.schrieb-status-icon {
    width: var(--text-0-9);
    height: var(--text-0-9);
}

.schrieb-status-icon.email-sent {
    color: var(--text-muted);
}

.schrieb-status-icon.email-opened {
    color: var(--success);
}

.schrieb-status-icon.email-not-sent {
    color: var(--error);
}

/* ========================================
   BADGES / TAGS
   ======================================== */

/* Pill - Basis */
.pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: var(--text-klein);
    font-weight: var(--fett);
    line-height: 1.25;
    white-space: nowrap;
}

/* Pill - Modifier Werber/Kunde */
.pill--werber { background: var(--color-werber-light); color: var(--color-werber-dark); }
.pill--kunde { background: var(--color-kunde-light); color: var(--color-kunde-dark); }

/* Pill - Modifier Werbegebiet/Kampagne */
.pill--werbegebiet { background: var(--color-werbegebiet-light); color: var(--color-werbegebiet-dark); }
.pill--kampagne { background: var(--color-kampagne-light); color: var(--color-kampagne-dark); }

/* Pill - Modifier Mitglieder */
.pill--neumitglied { background: var(--color-neumitglied-light); color: var(--color-neumitglied-dark); }
.pill--erhoehung { background: var(--color-erhoehung-light); color: var(--color-erhoehung-dark); }
.pill--storno { background: var(--color-storno-light); color: var(--color-storno-dark); }

/* Pill - Modifier Status */
.pill--success { background: var(--success-light); color: var(--success-dark); }
.pill--error { background: var(--error-light); color: var(--error-dark); }
.pill--warning { background: var(--warning-light); color: var(--warning-dark); }
.pill--beide { background: linear-gradient(135deg, var(--success-light) 50%, var(--error-light) 50%); color: var(--text-primary); }
.pill--inaktiv { background: var(--bg-hover); color: var(--text-primary); }

/* Pill - Modifier Rank (Gold) */
.pill--rank { background: linear-gradient(135deg, #ffd700, #b8860b); color: #1a365d; }

/* Pill - Positionierung */
.pill--top-right { position: absolute; top: 8px; right: 8px; }

/* Pill - Online mit animiertem Punkt */
.pill--online::before {
    content: '';
    width: 6px;
    height: 6px;
    margin-right: 5px;
    background: var(--success-dark);
    border-radius: var(--radius-full);
    animation: status-pulse 5s ease-in-out infinite;
}

/* Legacy .badge (für Kompatibilität) */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}


/* ========================================
   STORNO-FARBEN (4 Stufen)
   ======================================== */

.storno-low { color: var(--success); }         /* Grün - <8% */
.storno-medium-low { color: #eab308; }  /* Gelb - 8-10% */
.storno-medium-high { color: var(--warning); } /* Orange - 10-12% */
.storno-high { color: var(--error); }        /* Rot - >12% */

/* ========================================
   TABELLEN
   ======================================== */

.table-container {
    background: var(--bg-primary);
    overflow: hidden;
}

.table-header {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: var(--text-klein);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========================================
   SCROLLBAR - OVERLAY MIT LÄNGEREM FADE-OUT
   ======================================== */

/* Webkit (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-sm);
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

/* ========================================
   STUFEN LABELS (Universal)
   ======================================== */

.stufen-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stufen-label-sma { background: rgba(113, 63, 18, 0.15); color: var(--stufe-sma); }
.stufen-label-ema { background: rgba(133, 77, 14, 0.15); color: var(--stufe-ema); }
.stufen-label-jmm { background: rgba(161, 98, 7, 0.15); color: var(--stufe-jmm); }
.stufen-label-emm { background: rgba(202, 138, 4, 0.15); color: var(--stufe-emm); }
.stufen-label-cemm { background: rgba(234, 179, 8, 0.15); color: var(--stufe-cemm); }
.stufen-label-spb { background: rgba(250, 204, 21, 0.15); color: var(--stufe-spb); }
.stufen-label-kad { background: rgba(234, 179, 8, 0.15); color: var(--stufe-kad); }
.stufen-label-fue { background: rgba(245, 158, 11, 0.15); color: var(--stufe-fue); }

/* ========================================
   KW TABS SYSTEM
   ======================================== */

.kw-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: var(--spacing-md);
    margin-left: var(--spacing-lg);
    margin-right: var(--spacing-lg);
}

.kw-tab {
    padding: 10px 20px;
    font-size: var(--text-klein);
    font-weight: var(--fett);
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.kw-tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.kw-tab svg {
    width: 16px;
    height: 16px;
}

.kw-tab-content {
    display: none;
}

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

/* Tab-Content füllt den Platz (Tabellen, Modals, No-Border) */
.page-container--no-border .kw-tab-content.active,
.page-container--modal .kw-tab-content.active,
.page-content--table .kw-tab-content.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ========================================
   PAGE HEADER SYSTEM
   Zentraler Header für alle iframe-Seiten
   ======================================== */

/* Container */
.page-header {
    flex-shrink: 0;
    padding: 20px 20px 0 20px;
}

/* Zeile 1: Zurück | Links | Mitte | Rechts */
.page-header-row {
    display: flex;
    align-items: center;
    min-height: 36px;
    gap: var(--spacing-md);
    position: relative;
}

/* Links-Bereich (Titel) */
.page-header-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

/* Mitte-Bereich (Info, absolut zentriert) */
.page-header-mitte {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
}

/* Rechts-Bereich (Actions) */
.page-header-rechts {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Zeile 2: Tabs */
.page-header-tabs {
    display: flex;
    gap: 0;
    height: 30px;
    margin-top: 10px;
    border-bottom: 2px solid var(--border-color);
}

.page-header-tabs .kw-tab {
    padding: 0 var(--spacing-sm);
    font-size: var(--text-normal);
    font-weight: var(--fett);
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    position: relative;
    top: 2px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
}

.page-header-tabs .kw-tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}


/* ========================================
   TC DIENSTE DROPDOWN
   ======================================== */

.tc-dienst-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
}

.tc-dienst-faktor {
    width: 60px;
    padding: 6px 8px;
    text-align: center;
    font-weight: 600;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.tc-dienst-select {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 13px;
    background: var(--bg-primary);
}

.tc-dienst-remove {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.tc-dienst-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

.tc-dienst-add {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: none;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    width: 100%;
    transition: all 0.2s;
}

.tc-gesamt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.1));
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-sm);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.tc-gesamt-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.tc-gesamt-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--warning);
}

.tc-gesamt-value.warning {
    color: var(--error);
}

/* ========================================
   DRK OPTIONEN
   ======================================== */

.drk-option-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.drk-option-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.drk-option-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.drk-option-title svg {
    width: 18px;
    height: 18px;
    color: var(--error-dark);
}

.drk-bereitstellung {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.drk-bereitstellung label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

.drk-kosten-section {
    padding: var(--spacing-sm);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-sm);
}

.drk-kosten-row {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    margin-bottom: 8px;
}

.drk-kosten-row:last-child {
    margin-bottom: 0;
}

.drk-kosten-select {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 12px;
    background: var(--bg-primary);
}

.drk-kosten-input {
    width: 100px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 12px;
    text-align: right;
}

.drk-kosten-label {
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 120px;
}

/* ========================================
   INLINE EDIT MODE
   ======================================== */

.inline-editable {
    position: relative;
}

.inline-editable .edit-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(59, 130, 246, 0.05);
    border: 2px dashed var(--accent-color);
    border-radius: var(--radius-sm);
    pointer-events: none;
}

.inline-editable.editing .edit-overlay {
    display: block;
}

/* Read-only im normalen Modus */
.inline-editable:not(.editing) select,
.inline-editable:not(.editing) input[type="number"],
.inline-editable:not(.editing) input[type="text"] {
    pointer-events: none;
    background: var(--bg-secondary);
    border-color: transparent;
}

/* ========================================
   PAGE CONTAINER - EINHEITLICHES LAYOUT
   ======================================== */

/* ========================================
   ACTION TOOLBAR - EINHEITLICHE TOOLBAR
   ======================================== */

.action-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px var(--spacing-md);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    min-height: 56px;
}

/* Toolbar Searchbar */
.toolbar-search {
    width: 320px;
}

/* ========================================
   TOOLBAR NAVIGATION DROPDOWN (ersetzt Tabs)
   Öffnet auf Hover
   ======================================== */

.toolbar-nav-dropdown {
    position: relative;
    min-width: 140px;
    height: var(--eingabefeld-hoehe);
}

.toolbar-nav-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--text-klein);
    font-weight: var(--fett);
    cursor: pointer;
    transition: all 0.15s ease;
    overflow: hidden;
}

.toolbar-nav-trigger span {
    display: inline-block;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.toolbar-nav-trigger svg {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.toolbar-nav-dropdown:hover .toolbar-nav-trigger svg {
    transform: rotate(180deg);
}

.toolbar-nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: 10000;  /* Sehr hoch - über allem anderen */
}

/* Unsichtbare Brücke um Hover-Lücke zu schließen */
.toolbar-nav-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.toolbar-nav-dropdown:hover .toolbar-nav-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.toolbar-nav-option {
    height: var(--eingabefeld-hoehe);
    padding: 0 8px;
    font-size: var(--text-klein);
    font-weight: var(--fett);
    display: flex;
    align-items: center;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.1s ease;
}

.toolbar-nav-option:first-child {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.toolbar-nav-option:last-child {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.toolbar-nav-option.active {
    background: var(--accent-color);
    color: var(--bg-primary);
}

.toolbar-nav-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* Click-based Dropdown (ohne Hover) */
.toolbar-nav-click:hover .toolbar-nav-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
}

.toolbar-nav-click:hover .toolbar-nav-trigger svg {
    transform: none;
}

.toolbar-nav-click.open .toolbar-nav-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.toolbar-nav-click.open .toolbar-nav-trigger svg {
    transform: rotate(180deg);
}

.toolbar-nav-click .toolbar-nav-trigger {
    cursor: pointer;
}

.toolbar-nav-click {
    min-width: 130px;
}

/* ========================================
   SLIDE UP ANIMATION
   ======================================== */


/* Animated Search Placeholder */
.toolbar-search-wrapper {
    position: relative;
    overflow: hidden;
}

.toolbar-search-placeholder {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--text-klein);
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.toolbar-search-placeholder.slide-out {
    transform: translateY(-150%);
    opacity: 0;
}

.toolbar-search-placeholder.slide-in {
    transform: translateY(150%);
    opacity: 0;
}

.toolbar-search-input:focus + .toolbar-search-placeholder,
.toolbar-search-input:not(:placeholder-shown) + .toolbar-search-placeholder {
    opacity: 0;
}

/* ========================================
   TOOLBAR SUCHFELD
   ======================================== */

.toolbar-search-input {
    width: 100%;
    height: 36px;
    padding: 0 0 0 36px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: var(--text-normal);
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: all 0.15s ease;
}

.toolbar-search-input:focus {
    background: var(--bg-primary);
}

.toolbar-search-input::placeholder {
    color: var(--text-secondary);
}

.toolbar-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    pointer-events: none;
}

/* ========================================
   TOOLBAR FILTER DROPDOWNS
   ======================================== */

.toolbar-filter {
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 13px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 120px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' 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 10px center;
    padding-right: 30px;
}

/* Filter mit Label */
.toolbar-filter-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toolbar-filter-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.toolbar-filter-group .toolbar-filter {
    height: 28px;
    font-size: 12px;
    min-width: 100px;
}

/* Shell-spezifisch: Mindestbreite für Action-Buttons */
#shellToolbarRight {
    display: flex;
    gap: var(--spacing-sm);
}

#shellToolbarRight .btn {
    min-width: 120px;
}

/* ========================================
   TOOLBAR DIVIDER
   ======================================== */


/* ========================================
   TOOLBAR FILTER-ROW (für viele Filter)
   - Position ist bereits oben definiert
   ======================================== */

/* ========================================
   RESPONSIVE TOOLBAR
   ======================================== */

@media (max-width: 1200px) {
    .action-toolbar {
        gap: var(--spacing-sm);
    }

    .toolbar-search {
        width: 280px;
    }

    #shellToolbarRight .btn span {
        display: none;
    }

    #shellToolbarRight .btn {
        padding: 0 10px;
        min-width: auto;
    }
}

@media (max-width: 900px) {
    .zeile--shell-toolbar {
        flex-wrap: wrap;
    }

    .toolbar-search {
        width: 100%;
    }
}

/* ========================================
   TOOLBAR STATS CHIPS
   ======================================== */


/* ========================================
   EINHEITLICHES MODAL-DIALOG-SYSTEM
   ========================================

   WICHTIG: Dieses System ersetzt ALLE nativen Browser-Dialoge!

   Anstatt die hässlichen Chrome/Browser alert(), confirm() und prompt()
   Dialoge zu verwenden, nutze diese einheitlichen, schönen Modals:

   VERWENDUNG:
   -----------

   1. ALERT (Nur Hinweis anzeigen):
      showAlert('Titel', 'Nachricht hier', 'success')

      Typen: 'info', 'success', 'warning', 'error'

   2. CONFIRM (Ja/Nein Bestätigung):
      const result = await showConfirm('Titel', 'Frage hier', 'warning')
      if (result) {
  // Benutzer hat "Ja" geklickt
      }

   3. PROMPT (Eingabe vom Benutzer):
      const input = await showPrompt('Titel', 'Frage', 'Standardwert')
      if (input !== null) {
  // Benutzer hat etwas eingegeben
      }

   NIEMALS mehr verwenden:
   - alert()
   - confirm()
   - prompt()

   Diese Funktionen sind in /base/app.js und modal-system.js definiert.

   ======================================== */

.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10100;  /* Höher als modal-overlay (10001) */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: var(--spacing-md);
}

.custom-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.custom-modal {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg, 24px);
    max-width: 420px;
    width: 100%;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.custom-modal-overlay.active .custom-modal {
    transform: scale(1) translateY(0);
}

.custom-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md, 16px);
}

.custom-modal-icon.info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
    color: var(--info);
}

.custom-modal-icon.success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
    color: var(--success);
}

.custom-modal-icon.warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
    color: var(--warning);
}

.custom-modal-icon.error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
    color: var(--error);
}

.custom-modal-icon.question {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.05) 100%);
    color: var(--color-erhoehung);
}

.custom-modal-icon svg {
    width: 28px;
    height: 28px;
    stroke-width: 2;
}

.custom-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: var(--spacing-sm, 8px);
}

.custom-modal-message {
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.6;
    margin-bottom: var(--spacing-lg, 24px);
    white-space: pre-line;
}

.custom-modal-buttons {
    display: flex;
    gap: var(--spacing-sm, 8px);
    justify-content: center;
}

.custom-modal-btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 160px;
}

.custom-modal-btn:active {
    transform: scale(0.97);
}

.custom-modal-btn.cancel {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.custom-modal-btn.cancel:hover {
    background: var(--bg-hover);
}

.custom-modal-btn.confirm {
    background: var(--accent-color);
    color: var(--bg-primary);
}

.custom-modal-btn.confirm:hover {
    background: var(--accent-color);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.custom-modal-btn.danger {
    background: var(--error);
    color: var(--bg-primary);
}

.custom-modal-btn.danger:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 15px rgba(252, 165, 165, 0.3);
}

.custom-modal-btn.success {
    background: var(--success);
    color: var(--success-dark);
}

.custom-modal-btn.success:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 15px rgba(134, 239, 172, 0.3);
}

/* ========================================
   KALENDER-MODAL (Wiederverwendbar)
   ======================================== */

.calendar-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.calendar-modal.active {
    opacity: 1;
    visibility: visible;
}

.calendar-modal-content {
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    width: 720px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.calendar-modal.active .calendar-modal-content {
    transform: scale(1);
}

.calendar-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.calendar-modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.calendar-modal-body {
    padding: 20px;
}

/* Datum-Eingabefelder */
.calendar-inputs {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.calendar-field {
    flex: 1;
}

.calendar-field label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.calendar-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: var(--text-normal);
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.2s;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
}

.calendar-field input.active {
    border-color: var(--accent-color);
    background: var(--bg-primary);
}

/* Kalender-Container */
.calendar-container {
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* Kalender-Navigation */
.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.calendar-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.15s;
}

.calendar-nav-btn svg {
    width: 16px;
    height: 16px;
}

.calendar-year-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-year-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-secondary);
}

.calendar-year-btn svg {
    width: 14px;
    height: 14px;
}

.calendar-year-display {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 50px;
    text-align: center;
}

/* KW-Picker */
.calendar-kw-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Heute-Button */
.calendar-today-row {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.calendar-today-btn {
    padding: 6px 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

/* Monats-Grid */
.calendar-months-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.calendar-month {
    min-width: 0;
}

.calendar-month-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 8px;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

.calendar-weekday {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    padding: 4px 0;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.1s;
    color: var(--text-primary);
}

.calendar-day.other-month {
    color: var(--text-secondary);
    opacity: 0.5;
    pointer-events: none;
}

.calendar-day.today {
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--accent-color);
}

.calendar-day.selected {
    background: var(--accent-color);
    color: var(--bg-primary);
    font-weight: 600;
}

.calendar-day.in-range {
    background: rgba(59, 130, 246, 0.1);
    border-radius: 0;
}

.calendar-day.range-start {
    background: var(--accent-color);
    color: var(--bg-primary);
    border-radius: 4px 0 0 4px;
}

.calendar-day.range-end {
    background: var(--accent-color);
    color: var(--bg-primary);
    border-radius: 0 4px 4px 0;
}

.calendar-day.range-start.range-end {
    border-radius: var(--radius-sm);
}

.calendar-day.in-range.hover-preview {
    background: rgba(59, 130, 246, 0.15);
}

/* Modal Footer */
.calendar-page-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.calendar-page-footer .btn-cancel {
    padding: 10px 20px;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.calendar-page-footer .btn-cancel:hover {
    background: var(--bg-hover);
}

.calendar-page-footer .btn-apply {
    padding: 10px 20px;
    border: none;
    background: var(--accent-color);
    color: var(--bg-primary);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.calendar-page-footer .btn-apply:hover {
    background: var(--accent-color);
}

/* Responsive */
@media (max-width: 768px) {
    .calendar-modal-content {
width: 95vw;
    }

    .calendar-months-grid {
grid-template-columns: 1fr;
    }

    .calendar-inputs {
flex-direction: column;
    }
}

/* ============================================
   USER BADGE - Avatar + Name + Klassifizierung
   Einheitliche Komponente für alle Listen
   ============================================ */

/* Container */
.user-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* Avatar Kreis */
.user-badge__avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-primary);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
    position: relative;
    overflow: visible;
}

/* Avatar mit Bild */
.user-badge__avatar img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    object-fit: cover;
}

/* Bild-Rahmen in Stufe-Farbe (wenn Avatar Stufe-Klasse hat) */
.user-badge__avatar--sma img { box-shadow: 0 0 0 1.5px var(--stufe-sma); }
.user-badge__avatar--ema img { box-shadow: 0 0 0 1.5px var(--stufe-ema); }
.user-badge__avatar--jmm img { box-shadow: 0 0 0 1.5px var(--stufe-jmm); }
.user-badge__avatar--emm img { box-shadow: 0 0 0 1.5px var(--stufe-emm); }
.user-badge__avatar--cemm img { box-shadow: 0 0 0 1.5px var(--stufe-cemm); }
.user-badge__avatar--spb img { box-shadow: 0 0 0 1.5px var(--stufe-spb); }
.user-badge__avatar--kad img { box-shadow: 0 0 0 1.5px #fde047; }
.user-badge__avatar--fue img { box-shadow: 0 0 0 1.5px #fde047; }

/* Text Container */
.user-badge__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    justify-content: center;
    align-items: flex-start;
}

/* Name */
.user-badge__name {
    font-size: 12px;
    line-height: 1.1;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
}

/* Zusatzinfo unter Name (optional) */


/* Klassifizierungs-Badge */
.user-badge__type {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px 1px 0;
    margin-left: 0;
    border-radius: 0 4px 4px 0;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 600;
    width: fit-content;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

/* ===== KLASSIFIZIERUNGS-FARBEN (nutzen CSS-Variablen aus :root) ===== */

/* Kunde - Rot */
.user-badge--kunde .user-badge__avatar { background: var(--color-kunde); }
.user-badge--kunde .user-badge__type { background: rgba(220, 38, 38, 0.1); color: var(--color-kunde); }

/* Werbegebiet - Blau */
.user-badge--werbegebiet .user-badge__avatar { background: var(--color-werbegebiet); }
.user-badge--werbegebiet .user-badge__type { background: rgba(56, 189, 248, 0.1); color: var(--color-werbegebiet); }

/* Werber - Braun */
.user-badge--werber .user-badge__avatar { background: var(--color-werber); }
.user-badge--werber .user-badge__type { background: rgba(113, 63, 18, 0.1); color: var(--color-werber); }

/* Neumitglied - Grün */
.user-badge--neumitglied .user-badge__avatar { background: var(--color-neumitglied); }
.user-badge--neumitglied .user-badge__type { background: rgba(34, 139, 34, 0.1); color: var(--color-neumitglied); }

/* Positive Beitragsanpassung - Teal */
.user-badge--erhoehung .user-badge__avatar { background: var(--color-erhoehung); }
.user-badge--erhoehung .user-badge__type { background: rgba(20, 184, 166, 0.1); color: var(--color-erhoehung); }

/* Bestandsmitglied - Grau (normale Textfarbe) */
.user-badge--bestandsmitglied .user-badge__avatar { background: var(--text-secondary); }
.user-badge--bestandsmitglied .user-badge__type { background: var(--bg-hover); color: var(--text-primary); }

/* Kampagne - Dunkelblau */
.user-badge--kampagne .user-badge__avatar { background: var(--color-kampagne); }
.user-badge--kampagne .user-badge__type { background: rgba(30, 58, 138, 0.1); color: var(--color-kampagne); }

/* Storno - Rosa */
.user-badge--storno .user-badge__avatar { background: var(--color-storno); }
.user-badge--storno .user-badge__type { background: rgba(251, 113, 133, 0.1); color: var(--color-storno); }

/* ===== SVG SYMBOL-AVATARE ===== */

.user-badge__avatar svg {
    width: 50%;
    height: 50%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
}

/* Größenanpassungen für SVG */
.user-badge--mini .user-badge__avatar svg { stroke-width: 3; }
.user-badge--small .user-badge__avatar svg { stroke-width: 2.5; }
.user-badge--large .user-badge__avatar svg { stroke-width: 2; }
.user-badge--xl .user-badge__avatar svg { stroke-width: 2; }

/* ===== ZUSATZ-BADGES (TC, Q) ===== */

.user-badge__type-row {
    display: flex;
    align-items: center;
    gap: 3px;
}

.user-badge__extra {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    font-size: 9px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.user-badge__extra--tc {
    background: #fef08a;
    color: #a16207;
}

.user-badge__extra--q {
    background: var(--success);
    color: var(--success-dark);
}

/* Größenanpassungen für Extras */
.user-badge--small .user-badge__type-row { gap: 2px; }
.user-badge--small .user-badge__extra { padding: 0 3px; font-size: 7px; border-radius: var(--radius-xs); }

.user-badge--mini .user-badge__type-row { gap: 1px; }
.user-badge--mini .user-badge__extra { padding: 0 2px; font-size: 5px; border-radius: var(--radius-xs); }

.user-badge--large .user-badge__type-row { gap: 3px; }
.user-badge--large .user-badge__extra { padding: 1px 6px; font-size: 11px; border-radius: var(--radius-sm); }

.user-badge--xl .user-badge__type-row { gap: 4px; }
.user-badge--xl .user-badge__extra { padding: 2px 8px; font-size: 14px; border-radius: var(--radius-sm); }

/* ===== KARRIERE-STUFEN (oben rechts am Avatar) ===== */

.user-badge__stufe {
    position: absolute;
    top: -2px;
    right: -2px;
    padding: 0px 3px;
    border-radius: var(--radius-xs);
    font-size: 6px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    line-height: 1.4;
    white-space: nowrap;
}

/* Stufen-Farben */
.user-badge__stufe--sma { background: var(--stufe-sma); color: var(--bg-primary); }
.user-badge__stufe--ema { background: var(--stufe-ema); color: var(--bg-primary); }
.user-badge__stufe--jmm { background: var(--stufe-jmm); color: var(--bg-primary); }
.user-badge__stufe--emm { background: var(--stufe-emm); color: var(--bg-primary); }
.user-badge__stufe--cemm { background: var(--stufe-cemm); color: var(--bg-primary); }
.user-badge__stufe--spb { background: var(--stufe-spb); color: var(--color-werber); }
.user-badge__stufe--kad { background: linear-gradient(135deg, #fef9c3, #fde047, #eab308); color: var(--color-werber); }
.user-badge__stufe--fue { background: linear-gradient(135deg, #fffbeb, #fef08a, #fde047, #f59e0b); color: var(--color-werber); }

/* Größenanpassungen Stufe */
.user-badge--small .user-badge__stufe { font-size: 5px; padding: 0 2px; top: -1px; right: -1px; border-radius: var(--radius-xs); }
.user-badge--mini .user-badge__stufe { font-size: 4px; padding: 0 1px; top: -1px; right: -1px; border-radius: var(--radius-xs); }
.user-badge--large .user-badge__stufe { font-size: 8px; padding: 1px 4px; top: -2px; right: -2px; border-radius: var(--radius-xs); }
.user-badge--xl .user-badge__stufe { font-size: 10px; padding: 1px 5px; top: -3px; right: -3px; border-radius: var(--radius-sm); }

/* ===== GRÖSSEN-VARIANTEN ===== */

/* Small (24px Avatar) */
.user-badge--small { gap: 4px; }
.user-badge--small .user-badge__avatar { width: 24px; height: 24px; font-size: 9px; }
.user-badge--small .user-badge__info { gap: 0px; }
.user-badge--small .user-badge__name { font-size: 9px; }
.user-badge--small .user-badge__type { font-size: 7px; padding: 0 3px 0 0; border-radius: 0 2px 2px 0; }

/* Mini (18px Avatar) */
.user-badge--mini { gap: 3px; }
.user-badge--mini .user-badge__avatar { width: 18px; height: 18px; font-size: 7px; }
.user-badge--mini .user-badge__info { gap: 0; }
.user-badge--mini .user-badge__name { font-size: 7px; }
.user-badge--mini .user-badge__type { font-size: 5px; padding: 0 2px 0 0; border-radius: 0 2px 2px 0; }

/* Large (48px Avatar) */
.user-badge--large { gap: 8px; }
.user-badge--large .user-badge__avatar { width: 48px; height: 48px; font-size: 17px; }
.user-badge--large .user-badge__info { gap: 2px; }
.user-badge--large .user-badge__name { font-size: 18px; font-weight: 600; }
.user-badge--large .user-badge__type { font-size: 11px; padding: 1px 6px 1px 0; border-radius: 0 4px 4px 0; }

/* XL (64px Avatar) */
.user-badge--xl { gap: 10px; }
.user-badge--xl .user-badge__avatar { width: 64px; height: 64px; font-size: 22px; }
.user-badge--xl .user-badge__info { gap: 3px; }
.user-badge--xl .user-badge__name { font-size: 24px; font-weight: 600; }
.user-badge--xl .user-badge__type { font-size: 14px; padding: 2px 8px 2px 0; border-radius: 0 5px 5px 0; }

/* Klickbare Variante (für interaktive Elemente) */
.user-badge--clickable {
    cursor: pointer;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
}
/* Mit Umrandung (nur für Info-Page) */
.user-badge--bordered .user-badge__avatar {
    border: 2px solid rgba(255,255,255,0.9);
}


/* ========== LEGACY MODAL COMPATIBILITY ========== */

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

.edit-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.edit-modal {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    width: calc(100vw - 48px);
    height: calc(100vh - 48px);
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transform: scale(0.95);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.edit-modal-overlay.active .edit-modal {
    transform: scale(1);
}

.edit-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.edit-modal-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.edit-modal-title-group h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.edit-modal-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.edit-modal-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    gap: 0;
}

/* Linke Seite: Formular */
.edit-form-section {
    flex: 1;
    padding: 24px;
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
}

.edit-form-group {
    margin-bottom: 20px;
}

.edit-form-group-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.edit-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.edit-form-row.three-cols {
    grid-template-columns: repeat(3, 1fr);
}

.edit-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.edit-form-field.full-width {
    grid-column: 1 / -1;
}

.edit-form-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Rechte Seite: Historie */
.edit-history-section {
    width: 320px;
    padding: 24px;
    background: var(--bg-secondary);
    overflow-y: auto;
}

.edit-history-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.history-timeline {
    position: relative;
}

.history-timeline:has(.history-item)::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
}

.history-item {
    position: relative;
    padding-left: 36px;
    padding-bottom: 20px;
}

.history-item:last-child {
    padding-bottom: 0;
}

.history-item-dot {
    position: absolute;
    left: 4px;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-item-dot svg {
    width: 10px;
    height: 10px;
}

.history-item.neumitglied .history-item-dot {
    border-color: var(--color-neumitglied);
    color: var(--color-neumitglied);
}

.history-item.erhoehung .history-item-dot {
    border-color: var(--color-erhoehung);
    color: var(--color-erhoehung);
}

.history-item.storno .history-item-dot {
    border-color: var(--color-storno);
    color: var(--color-storno);
}

.history-item.aenderung .history-item-dot {
    border-color: var(--text-muted);
    color: var(--text-muted);
}

.history-item-content {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.history-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.history-item-meta {
    font-size: 11px;
    color: var(--text-secondary);
}

.history-item-detail {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--border-color);
}

/* Timeline Horizontal - Einsatz-Übersicht */
.timeline-horizontal-wrapper {
    padding: 40px 0;
    position: relative;
}

.timeline-horizontal {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}

.timeline-horizontal-label {
    font-size: var(--text-klein);
    font-weight: var(--fett);
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.timeline-horizontal-label--from {
    padding-right: 12px;
}

.timeline-horizontal-label--to {
    padding-left: 12px;
}

.timeline-horizontal-track {
    flex: 1;
    height: 2px;
    background: var(--border-color);
    position: relative;
    display: flex;
    align-items: center;
}

.timeline-horizontal-dot {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    background: var(--bg-primary);
    border: 2px solid var(--color-werber);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    transform: translateX(-50%);
    z-index: 1;
}

.timeline-horizontal-dot--active {
    background: var(--color-werber);
}

/* Tooltip für Einsatz-Details */
.timeline-horizontal-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-primary);
    color: var(--bg-primary);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    z-index: 100;
    pointer-events: none;
}

.timeline-horizontal-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--text-primary);
}

.timeline-horizontal-dot:hover .timeline-horizontal-tooltip {
    opacity: 1;
    visibility: visible;
}

.timeline-horizontal-tooltip-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.timeline-horizontal-tooltip-meta {
    color: var(--text-muted);
    margin-bottom: 6px;
}

.timeline-horizontal-tooltip-stats {
    display: flex;
    gap: 12px;
    padding-top: 6px;
    border-top: 1px solid var(--text-primary);
}

.timeline-horizontal-tooltip-stat {
    text-align: center;
}

.timeline-horizontal-tooltip-stat-value {
    font-weight: var(--fett);
    font-size: var(--text-normal);
}

.timeline-horizontal-tooltip-stat-label {
    font-size: var(--text-klein);
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Empty State für Timeline */
.timeline-horizontal-empty {
    flex: 1;
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--text-klein);
    padding: 8px 0;
}

/* Kärtchen für Einsatzort-Namen */
.timeline-horizontal-card {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: var(--text-klein);
    font-weight: var(--fett);
    color: var(--text-primary);
    white-space: nowrap;
    z-index: 2;
}

.timeline-horizontal-card--top {
    bottom: calc(100% + 8px);
}

.timeline-horizontal-card--bottom {
    top: calc(100% + 8px);
}

.edit-page-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.edit-btn {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
    border: none;
}

.edit-btn-cancel {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.edit-btn-cancel:hover {
    background: var(--border-color);
}

.edit-btn-save {
    background: var(--color-werber);
    color: var(--bg-primary);
}

.edit-btn-save:hover {
    background: var(--color-werber);
}

/* ========================================================================
   TABLE SYSTEM (ehemals table-system.css)
   Zentrales Table-System - wird in benutzer, statistik, datensaetze verwendet
   ======================================================================== */

/* ========== TEST-SPALTEN (zum Testen von horizontalem Scroll) ========== */


/* ========== LAYOUT - Tabelle füllt iframe ========== */
html, body {
    height: 100%;
    margin: 0;
}

/* Standard Container für alle Seiten */
.page-container {
    height: auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    box-sizing: border-box;
}

/* Page Content - scrollbarer Bereich für Inhalt */
.page-content {
    flex: 1;
    overflow: visible;
    padding: 20px 20px 0 20px;
}

/* Modifier: Modal-Seiten (scrollbar) */
.page-content--modal {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
}

/* Modifier: Tabellen-Seiten (kein Padding, Tabelle geht bis zum Rand) */
.page-content--table {
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 0;
}

/* Tabellen-Seiten: Feste Höhe + interner Scroll für sticky thead/tfoot */
.page-container:has(.page-content--table) {
    height: 100vh;
    overflow: hidden;
}

.page-container .page-content--table {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.page-container .page-content--table .table-container {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.page-footer {
    flex-shrink: 0;
    margin-top: 10px;
    padding: var(--spacing-sm) 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.page-container .page-footer {
    position: sticky;
    bottom: 0;
    background: var(--bg-primary);
}

/* Footer für Panel innerhalb Split-Layout (nicht ganzes Modal) */
.page-footer--panel {
    justify-content: flex-start;
    background: var(--bg-primary);
    flex-shrink: 0;
}

.content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    max-width: none;
    margin: 0;
}

.overview-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.category-section {
    flex: 1;
    display: none;
    flex-direction: column;
    min-height: 0;
}

.category-section.active {
    display: flex;
}

/* ========== TABLE WRAPPER ========== */
.table-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-primary);
    position: relative;
}

.table-wrap,
.table-container,
.table {
    border-radius: 0;
}

.table-container {
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
}

/* ========== TABLE ========== */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-klein);
    color: var(--text-primary);
    table-layout: fixed;
    background: var(--bg-hover);
}

/* ========== HEADER ========== */
.table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-hover);
}

.table thead tr {
    background: var(--bg-hover);
}

.table th {
    padding: 10px 12px;
    text-align: center;
    font-size: var(--text-klein);
    font-weight: var(--fett);
    color: var(--text-primary);
    background: var(--bg-hover);
    border: none;
    border-right: 1px solid var(--border-color);
    border-bottom: 3px solid var(--text-muted);
    white-space: nowrap;
    user-select: none;
    box-sizing: border-box;
}

.table th:last-child {
    border-right: none;
}

.table th.sortable {
    cursor: pointer;
    padding-left: 14px;
    padding-right: 14px;
    position: relative;
}

/* ========== SORT ARROWS ========== */
.sort-arrows {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sort-arrows .icon {
    width: calc(1em * 0.90);
    height: calc(1em * 0.90);
    color: var(--border-color);
    transition: color 0.15s;
}

.table th.sort-asc .arrow-up,
.table th.sort-desc .arrow-down {
    color: var(--text-secondary);
}

.table th.sortable:hover .sort-arrows .icon {
    color: var(--text-muted);
}

/* ========== BODY ROWS ========== */
.table tbody tr {
    background: var(--bg-primary);
}

/* ========== CELLS ========== */
/* Zeilenhöhen: Normal 40px, Compact 26px, Child-Row 26px */
.table td {
    height: 40px;
    padding: 4px 12px;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    white-space: nowrap;
    vertical-align: middle;
    text-align: right;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========== COMPACT VARIANT ========== */
.table--compact td {
    height: 30px;
    padding: 1px 12px;
}

.table td:last-child {
    border-right: none;
}

/* ========== TOTALS ROW ========== */
.table .totals-row td {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--bg-hover) !important;
    font-weight: var(--fett);
    font-size: var(--text-klein);
    color: var(--text-primary);
    border-bottom: none;
    border-top: 2px solid var(--text-muted);
    border-right: 1px solid var(--border-color);
    padding: 4px 12px;
}

.table .totals-row td:last-child {
    border-right: none;
}

/* ========== ROW DIVIDER ========== */
/* Dickere Trennlinie über einer Zeile */
.table .row-divider td {
    border-top: 3px solid var(--text-muted);
}

.totals-count {
    font-weight: var(--fett);
    font-size: var(--text-klein);
    color: var(--text-primary);
    margin-left: 6px;
}

/* ========== SPACER COLUMN ========== */
.col-spacer {
    width: auto;
    padding: 0 !important;
    border-right: none !important;
}

.table th.col-spacer {
    background: var(--bg-hover);
    border-bottom: 3px solid var(--text-muted) !important;
    border-right: none !important;
}

.table td.col-spacer {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    border-right: none !important;
}

.table .totals-row td.col-spacer {
    background: var(--bg-hover);
    border-top: 2px solid var(--text-muted);
    border-bottom: none;
    border-right: none !important;
}

/* ========== STICKY COLUMNS ========== */
.checkbox-cell,
.action-cell,
.col-name {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.checkbox-cell {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    text-align: center;
    vertical-align: middle;
    padding: 0 8px !important;
    position: sticky;
    left: 0;
    z-index: 4;
}

.table th.checkbox-cell {
    position: sticky;
    left: 0;
    z-index: 12;
    background: var(--bg-hover);
    border-bottom: 3px solid var(--text-muted) !important;
}

.table td.checkbox-cell {
    background: var(--bg-primary);
}

.table .totals-row td.checkbox-cell {
    background: var(--bg-hover);
    position: sticky;
    left: 0;
    z-index: 6;
}

.checkbox-cell input {
    display: block;
    margin: 0 auto;
}

.row-checkbox {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--accent-color);
    margin: 0;
    vertical-align: middle;
}

/* ========== ACTION CELL ========== */
.action-cell {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    vertical-align: middle;
    padding: 0 !important;
}

.table tbody .action-cell {
    position: sticky;
    left: 40px;
    z-index: 3;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
}

.table .action-cell {
    text-align: center;
}


.table th.action-cell {
    position: sticky;
    left: 40px;
    z-index: 11;
    background: var(--bg-hover);
    border-bottom: 3px solid var(--text-muted) !important;
    border-right: 1px solid var(--border-color);
}

.table .totals-row td.action-cell {
    background: var(--bg-hover) !important;
    position: sticky;
    left: 40px;
    z-index: 6;
    border-right: 1px solid var(--border-color);
}

.table td.action-cell:last-child,
.table th.action-cell:last-child {
    position: sticky;
    right: 0;
    z-index: 3;
    background: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    border-right: none;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
}

.table th.action-cell:last-child {
    z-index: 11;
    background: var(--bg-hover);
}

.table .totals-row td.action-cell:last-child {
    position: sticky;
    right: 0;
    z-index: 6;
    background: var(--bg-hover);
    border-top: 2px solid var(--text-muted);
    border-left: 1px solid var(--border-color);
    border-right: none;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
}

/* ========== SPALTENBREITEN (Generisch) ========== */
/* XS - 40px (Checkboxen, Icons) */
.table .col-xs {
    width: 40px;
    min-width: 40px;
}

/* S - 100px (Kurze Werte: Typ, Status, PLZ, Hausnr, Beträge) */
.table .col-s {
    width: 100px;
    min-width: 100px;
}

/* M - 160px (Mittlere Texte: Datum, Namen, Telefon, Orte) */
.table .col-m {
    width: 160px;
    min-width: 160px;
}

/* L - 220px (Längere Texte: Adressen, Beschreibungen) */
.table .col-l {
    width: 220px;
    min-width: 220px;
}

/* XL - 280px (Lange Texte: E-Mail, IBAN, Notizen) */
.table .col-xl {
    width: 280px;
    min-width: 280px;
}

/* AUTO - Kompakte Spalte 100px, mit Ellipsis */
.table th.col-auto,
.table td.col-auto {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* AUTO-L - Breite Spalte 200px, mit Ellipsis */
.table th.col-auto-l,
.table td.col-auto-l {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========== TEXT-ALIGNMENT (Generisch) ========== */
.table .text-left { text-align: left; }
.table .text-center { text-align: center; }
.table .text-right { text-align: right; }

/* ========== SONDER-SPALTEN ========== */
/* Name-Spalte (sticky, XL-Breite) */
.table .col-name {
    width: 280px;
    min-width: 280px;
}

.table tbody .col-name {
    position: sticky;
    left: 40px;
    z-index: 2;
    background: var(--bg-primary);
}

.table th.col-name {
    position: sticky;
    left: 40px;
    z-index: 10;
    background: var(--bg-hover);
}

.table .totals-row td.col-name {
    background: var(--bg-hover);
    position: sticky;
    left: 40px;
    z-index: 7;
    padding: 4px 12px 4px 36px;
    text-align: left;
}

/* Seiten mit Action-Cell vor Name */
.datensaetze-page .table tbody .col-name,
.datensaetze-page .table th.col-name,
.datensaetze-page .table .totals-row td.col-name,
.statistik-page .table tbody .col-name,
.statistik-page .table th.col-name,
.statistik-page .table .totals-row td.col-name {
    left: 80px;
}

/* ========== NAME CELL ========== */
.name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.name-cell > *:first-child:not(.user-badge) {
    width: 14px;
    min-width: 14px;
    max-width: 14px;
    flex-shrink: 0;
}

.name-cell:has(> .user-badge:first-child)::before {
    content: '';
    width: 14px;
    min-width: 14px;
    flex-shrink: 0;
}

.child-row .name-cell {
    padding-left: 14px;
}

.name-cell .user-badge {
    flex-shrink: 0;
}

@keyframes status-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.3; }
}

/* ========== DROPDOWN ========== */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.15s;
    margin: 0 auto;
}

.dropdown-btn svg {
    width: 16px;
    height: 16px;
}

.dropdown-menu {
    position: fixed;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 160px;
    z-index: 10000;
    display: none;
    padding: 4px 0;
}

.dropdown-menu.open {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: var(--text-klein);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.1s;
}

.dropdown-item:first-child {
    border-radius: 6px 6px 0 0;
}

.dropdown-item:last-child {
    border-radius: 0 0 6px 6px;
}

.dropdown-item svg {
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
}

.dropdown-item.danger {
    color: var(--error);
}

.dropdown-item.danger svg {
    color: var(--error);
}

.dropdown-item.warning {
    color: var(--warning-dark);
}

.dropdown-item.warning svg {
    color: var(--warning-dark);
}

.dropdown-item.success {
    color: var(--success);
}

.dropdown-item.success svg {
    color: var(--success);
}

.dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

.dropdown-label {
    font-size: var(--text-klein);
    color: var(--text-secondary);
    padding: 6px 12px 4px;
    font-weight: var(--fett);
}

/* ========== EXPANDABLE ROWS ========== */
.expandable-row {
    cursor: pointer;
}

.expand-icon {
    color: var(--text-muted);
    transition: transform 0.2s;
    transform: rotate(-90deg);
}

.expandable-row.open .expand-icon {
    transform: rotate(0deg);
}

.child-row {
    display: none;
}

.child-row.visible {
    display: table-row;
}

.child-row td {
    height: 30px;
    padding: 1px 12px;
    font-size: 10px;
    border-bottom: 1px solid var(--border-color);
}

.child-row td:first-child {
    box-shadow: inset 3px 0 0 var(--text-muted);
}

.child-row .user-badge { gap: 4px; }
.child-row .user-badge .user-badge__avatar { width: 24px; height: 24px; font-size: 9px; }
.child-row .user-badge .user-badge__info { gap: 0px; }
.child-row .user-badge .user-badge__name { font-size: 9px; }
.child-row .user-badge .user-badge__type { font-size: 7px; padding: 0 3px 0 0; border-radius: 0 2px 2px 0; }

.child-indent {
    width: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--border-color);
    font-size: 10px;
}

/* ========== TABLE HEADER BAR ========== */
.table-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

.table-header-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-header-group--hidden {
    display: none;
}

.table-header-group--hidden.visible {
    display: flex;
}

.table-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.table-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.btn-columns {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
}

.btn-columns svg {
    width: 14px;
    height: 14px;
}

/* ========== EMPTY STATE ========== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px;
    color: var(--text-secondary);
    text-align: center;
    gap: var(--spacing-sm);
}

.page-content--empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state svg {
    width: 64px;
    height: 64px;
    margin-bottom: var(--spacing-md);
    color: var(--border-color);
}

.empty-state h3 {
    font-weight: 600;
    margin-bottom: 8px;
}

.empty-state p {
    color: var(--text-secondary);
}

/* Empty State für Tabellen */
.empty-row td {
    background: var(--bg-primary);
}

.empty-state-cell {
    padding: var(--spacing-xl) var(--spacing-md);
    text-align: center;
    color: var(--text-secondary);
}

/* ========== VALUE COLORS ========== */


/* ========== COLUMN MODAL ========== */
.columns-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.column-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: grab;
    transition: all 0.15s;
}

.column-item.dragging {
    opacity: 0.5;
    background: rgba(113, 63, 18, 0.1);
    border-color: var(--color-werber);
}

.column-item-drag {
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

.column-item-drag svg {
    width: 16px;
    height: 16px;
}

.column-item-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.column-item-label {
    font-size: 13px;
    color: var(--text-primary);
    flex: 1;
}


.template-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--bg-hover);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.template-item.active {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.template-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.template-name {
    font-size: 12px;
    color: var(--text-primary);
}


/* ========== COMPACT TABLE VARIANT ========== */


/* ========== AUDIT SYSTEM ========== */
.audit-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 10001;
    align-items: center;
    justify-content: center;
}

.audit-modal-overlay.open {
    display: flex;
}

.audit-modal {
    position: relative;
    width: 560px;
    max-width: 90vw;
    max-height: 80vh;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.audit-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--bg-hover);
}

.audit-modal-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.audit-modal-title svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.audit-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.audit-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.audit-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bg-hover);
    transition: background 0.1s;
}

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

.audit-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.audit-icon svg {
    width: 16px;
    height: 16px;
}

.audit-icon--add {
    background: var(--success-light);
    color: var(--success-dark);
}

.audit-icon--delete {
    background: var(--error-light);
    color: var(--error-dark);
}

.audit-icon--edit {
    background: var(--info-light);
    color: var(--info-dark);
}

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

.audit-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.audit-title strong {
    font-weight: 600;
}

.audit-meta {
    font-size: 10px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.audit-meta svg {
    width: 12px;
    height: 12px;
}

.audit-user {
    display: flex;
    align-items: center;
    gap: 4px;
}

.audit-time {
    display: flex;
    align-items: center;
    gap: 4px;
}

.audit-item--grouped {
    cursor: pointer;
}

.audit-item--grouped .audit-expand-icon {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.audit-item--grouped.open .audit-expand-icon {
    transform: rotate(90deg);
}

.audit-details {
    display: none;
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: 11px;
}

.audit-item--grouped.open .audit-details {
    display: block;
}

.audit-details-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.audit-details-list li {
    padding: 4px 0;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--bg-hover);
}

.audit-details-list li:last-child {
    border-bottom: none;
}

.audit-changes {
    margin-top: 6px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 11px;
}

.audit-change-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    color: var(--text-secondary);
}

.audit-change-field {
    font-weight: 500;
    color: var(--text-primary);
}

/* Audit-Farben: grau, rot, grün, orange */

/* Grau - für alte Werte und Pfeile */
.audit-color-grau {
    color: var(--text-muted);
}

.audit-color-grau-durchgestrichen {
    color: var(--text-muted);
    text-decoration: line-through;
}

/* Grün - für hinzugefügt */
.audit-color-gruen {
    color: var(--success-dark);
}

/* Rot - für gelöscht */
.audit-color-rot {
    color: var(--error-dark);
}

.audit-color-rot-durchgestrichen {
    color: var(--error-dark);
    text-decoration: line-through;
}

/* Orange - für bearbeitet */
.audit-color-orange {
    color: var(--warning-dark);
}

.audit-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--text-secondary);
}

.audit-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    color: var(--border-color);
}

.audit-empty p {
    font-size: 13px;
}

.audit-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.audit-action-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.15s;
}

.audit-action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.audit-action-btn svg {
    width: 14px;
    height: 14px;
}

.audit-action-btn.btn-undo:hover {
    background: var(--warning-light);
    color: var(--warning-dark);
}

.audit-action-btn.btn-undo.confirming {
    background: var(--error-light);
    color: var(--error-dark);
    animation: pulse-confirm 1s infinite;
}

@keyframes pulse-confirm {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.audit-confirm-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--error-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    z-index: 10;
}

.audit-confirm-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-storno);
}

.audit-confirm-actions {
    display: flex;
    gap: 8px;
}

.audit-confirm-btn {
    padding: 6px 12px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.audit-confirm-btn.btn-cancel {
    background: var(--bg-primary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.audit-confirm-btn.btn-cancel:hover {
    background: var(--bg-secondary);
}

.audit-confirm-btn.btn-confirm {
    background: var(--error-dark);
    color: var(--bg-primary);
}

.audit-confirm-btn.btn-confirm:hover {
    background: var(--color-storno);
}

/* ========================================================================
   DATENSÄTZE PAGE STYLES (ehemals datensaetze.css)
   ======================================================================== */

/* ========== TAB NAVIGATION ========== */
.tabs-container {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

.back-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.15s;
}

.back-btn::before {
    content: '';
    width: 18px;
    height: 18px;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E") center/contain no-repeat;
}

.context-badge {
    margin-right: 24px;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
}

.tab-btn.active {
    background: var(--accent-color);
    color: var(--bg-primary);
}

.tab-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.2);
    font-weight: 600;
}

.tab-btn:not(.active) .tab-badge {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

/* ========== TAB CONTENT ========== */
.tab-content {
    display: none;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

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

/* ========== FILTER BUTTONS ========== */
.filter-buttons {
    display: flex;
    gap: 2px;
    margin-left: 12px;
}

/* ========== HEADER ACTIONS ========== */
.header-actions {
    display: none;
    align-items: center;
    gap: 4px;
}

.header-actions.visible {
    display: flex;
}

.header-divider {
    width: 1px;
    height: 16px;
    background: var(--border-color);
    margin: 0 4px;
}


/* ========== IMPORT MODAL STYLES ========== */
.import-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: auto;
    margin-right: 40px;
}

.import-step {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.import-step.active {
    opacity: 1;
}

.import-step.completed {
    opacity: 0.7;
}

.import-step-number {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--border-color);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.import-step.active .import-step-number {
    background: var(--accent-color);
    color: var(--bg-primary);
}

.import-step.completed .import-step-number {
    background: var(--color-neumitglied);
    color: var(--bg-primary);
}

.import-step-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.import-step.active .import-step-label {
    color: var(--text-primary);
}

.import-step-line {
    width: 30px;
    height: 2px;
    background: var(--border-color);
    margin: 0 8px;
}

/* Import Mapping */
.import-mapping-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.import-mapping-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.import-mapping-section-warning {
    border-color: var(--warning);
    background: var(--warning-light);
}

.import-mapping-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.import-mapping-section-warning .import-mapping-section-header {
    background: var(--warning-light);
    border-color: var(--warning);
}

.import-mapping-section-header svg {
    width: 18px;
    height: 18px;
    color: var(--color-neumitglied);
}

.import-mapping-section-warning .import-mapping-section-header svg {
    color: var(--warning);
}

.import-mapping-count {
    margin-left: auto;
    background: var(--color-neumitglied);
    color: var(--bg-primary);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-lg);
}

.import-mapping-count.warning {
    background: var(--warning);
}

.import-mapping-list {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}


/* Import File Field */
.import-file-field {
    position: relative;
}

.import-file-field input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.import-file-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    cursor: pointer;
    font-size: var(--text-klein);
    color: var(--text-secondary);
    transition: all 0.2s;
    height: var(--eingabefeld-hoehe);
    box-sizing: border-box;
}

.import-file-btn:hover {
    border-color: var(--info);
    color: var(--info);
}

.import-file-btn--success {
    border: 1px solid var(--success);
    background: var(--success-light);
    color: var(--success-dark);
}

/* Import Mapping Wrap */
.import-mapping-wrap {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: auto;
    max-height: calc(100vh - 280px);
}

/* Simple Table (auto width) */
.table-simple {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-klein);
}

.table-simple th,
.table-simple td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.table-simple th {
    background: var(--bg-hover);
    font-weight: 600;
    color: var(--text-secondary);
    position: sticky;
    top: 0;
    z-index: 1;
}

.table-simple td {
    background: var(--bg-primary);
}

.table-simple tr:last-child td {
    border-bottom: none;
}

.table-simple tr.import-row--mapped td {
    background: var(--success-light);
}

.table-simple tr.import-row--ignored td {
    opacity: 0.6;
}

.table-simple code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
}

/* Legacy Import Drop Zone (für andere Modals) */
.import-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    height: 220px;
    box-sizing: border-box;
}

.import-drop-zone:hover,
.import-drop-zone.drag-over {
    border-color: var(--info);
    background: var(--info-light);
}

.import-drop-zone svg {
    width: 48px;
    height: 48px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.import-drop-zone:hover svg,
.import-drop-zone.drag-over svg {
    color: var(--info);
}

.import-drop-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.import-drop-hint {
    font-size: 12px;
    color: var(--text-secondary);
}

.import-drop-zone input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Import File Info */
.import-file-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 30px;
    height: 220px;
    box-sizing: border-box;
    background: var(--success-light);
    border: 2px solid var(--success);
    border-radius: var(--radius-lg);
    position: relative;
}

.import-file-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--success-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--success-dark);
}

.import-file-icon svg {
    width: 28px;
    height: 28px;
}

.import-file-details {
    text-align: center;
}

.import-file-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--success-dark);
    margin-bottom: 4px;
}

.import-file-size {
    font-size: 12px;
    color: var(--success);
}

.import-file-remove {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.import-file-remove:hover {
    background: var(--error-light);
    color: var(--error);
}

.import-file-remove svg {
    width: 18px;
    height: 18px;
}

/* Import Formats */
.import-formats {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.import-formats-label {
    font-size: 11px;
    color: var(--text-secondary);
}

.import-format-badge {
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    background: var(--border-color);
    color: var(--text-secondary);
}

/* Import Preview */
.import-preview-info {
    padding: 12px 16px;
    background: var(--success-light);
    border: 1px solid var(--success);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--success-dark);
    font-weight: 500;
}

/* Import IDs Liste */
.import-ids-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 8px;
}

.import-id-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
}

.import-id-item:hover {
    border-color: var(--color-werber);
    background: var(--bg-hover);
}

.import-id-name {
    font-size: var(--text-klein);
    font-weight: var(--fett);
    color: var(--text-primary);
    flex: 1;
}

.import-id-value {
    font-size: 10px;
    font-family: monospace;
    color: var(--text-secondary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.import-id-copy {
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity 0.15s;
}

.import-id-item:hover .import-id-copy {
    opacity: 1;
}

.import-preview-table-container {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: auto;
    max-height: 450px;
    max-width: 100%;
}

.import-preview-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.import-preview-table th {
    background: var(--bg-secondary);
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
    min-width: 80px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.import-preview-table th:last-child {
    border-right: none;
}

.import-preview-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--bg-secondary);
    border-right: 1px solid var(--bg-secondary);
    color: var(--text-primary);
    white-space: nowrap;
    min-width: 80px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.import-preview-table td:last-child {
    border-right: none;
}

.import-preview-table tr:last-child td {
    border-bottom: none;
}

.import-preview-table tr:hover td {
    background: var(--bg-secondary);
}

/* Editierbare Import-Zellen */
.import-cell-editable {
    cursor: pointer;
    transition: background 0.15s;
}

.import-cell-editable:hover {
    background: var(--bg-tertiary) !important;
}

.import-cell-editable .eingabefeld {
    margin: -4px -8px;
    width: calc(100% + 16px) !important;
    min-width: 80px;
}

/* Export Section */
.export-info-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 20px;
}

.export-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.export-info-row:not(:last-child) {
    border-bottom: 1px dashed var(--border-color);
}

.export-info-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.export-info-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.export-info-highlight {
    color: var(--success-dark);
    font-weight: 600;
}

.export-form-group {
    margin-bottom: 20px;
}

.export-form-group:last-child {
    margin-bottom: 0;
}

.export-form-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.export-format-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.export-format-option {
    cursor: pointer;
}

.export-format-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.export-format-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    transition: all 0.15s;
}

.export-format-option:hover .export-format-box {
    border-color: var(--border-color);
    background: var(--bg-secondary);
}

.export-format-option input:checked + .export-format-box {
    border-color: var(--info);
    background: var(--info-light);
}

.export-format-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.export-format-option input:checked + .export-format-box .export-format-icon {
    color: var(--info);
}

.export-format-icon svg {
    width: 28px;
    height: 28px;
}

.export-format-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.export-format-desc {
    font-size: 10px;
    color: var(--text-muted);
}

.export-format-option input:checked + .export-format-box .export-format-name {
    color: var(--info-dark);
}

.export-filename-input {
    display: flex;
    align-items: stretch;
}

.export-filename-input input {
    flex: 1;
    padding: 10px 12px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: 6px 0 0 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.15s;
}

.export-filename-ext {
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 6px 6px 0;
}

/* Import/Export Button Styles */
.import-export-btn {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
    border: none;
}

.import-export-btn-cancel {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.import-export-btn-cancel:hover {
    background: var(--border-color);
}

.import-export-btn-confirm {
    background: var(--accent-color);
    color: var(--bg-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.import-export-btn-confirm:hover {
    background: var(--accent-color);
}

.import-export-btn-confirm:disabled {
    background: var(--info);
    cursor: not-allowed;
}

.import-export-btn-confirm svg {
    width: 16px;
    height: 16px;
}

.import-export-btn-back {
    background: var(--bg-secondary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
}

.import-export-btn-back:hover {
    background: var(--border-color);
}

.import-export-btn-back svg {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   SHELL / SIDEBAR STYLES
   ========================================================================== */

/* Layout Grid */
.app-container {
    display: grid;
    /* Collapsed Sidebar: 52px (gerade Zahl für Subpixel-Zentrierung) */
    grid-template-columns: 52px 1fr;
    grid-template-rows: 52px 1fr;
    height: 100vh;
    transition: grid-template-columns 0.3s ease;
}

.app-container.expanded {
    grid-template-columns: 240px 1fr;
}


/* Sidebar */
.sidebar {
    grid-column: 1;
    grid-row: 1 / -1;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* Sidebar Toggle Button */
#sidebarToggle {
    border-bottom: 1px solid var(--border-color);
}

/* Sidebar Navigation - basiert auf .zeile System */
.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Scrollbar styling für sidebar-nav */
.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}
.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-xs);
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Nav-Link für Sidebar */
.sidebar .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--spacing-sm);
    gap: var(--spacing-sm);
    margin: 0;
    border-radius: 0;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, width 0.3s;
    overflow: hidden;
    flex-shrink: 0;
    /* Collapsed: quadratisch 52px */
    width: 52px;
    height: 52px;
}

/* Collapsed: anzeigenfeld für Text-Platzierung */
.sidebar .nav-link .anzeigenfeld {
    padding-left: 44px;
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    gap: 0;
}

/* Expanded: volle Breite */
.app-container.expanded .sidebar .nav-link {
    width: 100%;
}

.app-container.expanded .sidebar .nav-link .anzeigenfeld {
    gap: var(--spacing-lg);
}

/* Icon in Sidebar - absolute positioniert */
.sidebar .nav-link .icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Text - collapsed: versteckt, expanded: sichtbar */
.sidebar .nav-text {
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    opacity: 0;
    transition: width 0.3s, opacity 0.2s;
}

/* Expanded State - Text erscheint */
.app-container.expanded .sidebar .nav-text {
    width: auto;
    opacity: 1;
}

/* Hover & Active States */
.sidebar .nav-link.active {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Toggle Button - kein Active Effekt */
#sidebarToggle:active,
#sidebarToggle.active {
    background: transparent;
}

/* Einstellungen Button - Hover ja, Active nein */
.sidebar-footer .nav-link.active {
    background: transparent;
    color: var(--text-secondary);
}

/* Variante: Blaue Icons */
.sidebar .nav-link--blau .icon {
    color: #3b82f6;
}

/* Variante: Dimmed (für Ideen/Inaktive) */
.sidebar .nav-link--dimmed {
    opacity: 0.6;
}

/* Nav Badge */
.nav-badge {
    background: var(--error);
    color: var(--bg-primary);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-lg);
    min-width: 18px;
    text-align: center;
    margin-left: auto;
}

/* Badge versteckt wenn collapsed */
.app-container:not(.expanded) .nav-badge {
    display: none;
}

/* Nav Tag (IDEE etc.) */
.nav-tag {
    font-size: 9px;
    background: var(--warning);
    color: var(--warning-dark);
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: auto;
}

/* Tag versteckt wenn collapsed */
.app-container:not(.expanded) .nav-tag {
    display: none;
}

/* Pinned Items - über Footer */
.sidebar-pinned {
    margin-top: auto;
    padding: 0;
}

/* Bottom Section - Admin/System Links */
.sidebar-footer {
    border-top: 1px solid var(--border-color);
    padding: 0;
}

/* Main Content Area */
.content-area {
    grid-column: 2;
    grid-row: 2;
    overflow: hidden;
    padding: 0;
    background: var(--bg-secondary);
    min-width: 0;
    width: 100%;
    position: relative;
    z-index: 1;
}

.content-frame {
    background: var(--bg-primary);
    width: 100%;
    height: 100%;
    border: none;
    min-width: 0;
}

.content-frame iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    min-width: 0;
    transition: none;
}

.content-area, .content-frame, .content-frame iframe {
    flex: 1;
    max-width: 100%;
}

.content-frame.no-iframe {
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* Shell Search Dropdown */
.shell-search-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    display: none;
    max-height: 320px;
    overflow-y: auto;
    margin-top: 4px;
}

.shell-search-dropdown.active {
    display: block;
}

.shell-search-dropdown-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shell-search-result-item {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.shell-search-result-item:last-child {
    border-bottom: none;
}

.shell-search-no-results {
    padding: 20px 14px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

/* Shell Responsive */
@media (max-width: 1024px) {
    .app-container {
        grid-template-columns: 60px 1fr;
    }

    .sidebar {
        padding: 16px 4px;
    }

    .logo {
        font-size: 16px;
        text-align: center;
        padding: 0;
    }

    /* Sidebar Nav-Text im mobilen Modus verstecken */
    .sidebar .nav-text {
        display: none;
    }

    .account-info {
        display: none;
    }
}

/* ========================================
   KAMPAGNEN SEITE
   ======================================== */

/* Container für Container Queries */
.page-content {
    container-type: inline-size;
}

.campaign-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    width: 100%;
    min-width: 0;
}

/* Container Queries - reagieren auf tatsächliche Container-Breite */
@container (max-width: 1100px) {
    .campaign-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container (max-width: 700px) {
    .campaign-grid {
        grid-template-columns: 1fr;
    }
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.konditionen-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.konditionen-grid label {
    font-size: var(--text-klein);
    font-weight: 600;
    text-align: center;
    display: block;
    margin-bottom: 4px;
}

.konditionen-grid input {
    text-align: center;
    padding: 6px 4px;
    font-size: var(--text-normal);
}

.konditionen-section {
    margin-bottom: var(--spacing-lg);
}

.toggle-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    min-height: 36px;
}

.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    align-self: center;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    transition: 0.3s;
    border-radius: var(--radius-lg);
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--bg-primary);
    transition: 0.3s;
    border-radius: var(--radius-full);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--accent-color);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.toggle-slider:hover {
    box-shadow: 0 0 0 1.5px var(--accent-color-ring);
}

.storno-rules {
    background: var(--bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-sm);
}

.storno-rule {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    font-size: var(--text-normal);
}

.storno-rule:last-child {
    margin-bottom: 0;
}

/* Gruppenbild Upload */
.gruppenbild-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--spacing-lg);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.2s;
    min-height: 120px;
}

.gruppenbild-upload.has-photo {
    border-style: solid;
    border-color: var(--success);
}

.gruppenbild-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.gruppenbild-preview {
    max-width: 100%;
    max-height: 150px;
    border-radius: var(--radius-md);
    display: none;
}

.gruppenbild-preview.visible {
    display: block;
}

.storno-rule input {
    width: 60px;
    text-align: center;
    padding: 4px;
}


/* Team Übersicht Cards */

/* KW-Cards (unterabschnitt--card--expandable mit Modifiern) */
.unterabschnitt--card--expandable.current-week {
    border-color: var(--accent-color);
}

.unterabschnitt--card--expandable.has-tc {
    border-color: var(--warning);
}

.kw-detail-header {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    cursor: pointer;
    gap: 6px;
    border-radius: var(--radius-sm);
}

/* Zeile 1: KW + Datum | Team-Namen | Personenanzahl */
.kw-header-row1 {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
}

/* Zeile 2: Werbegebiete (links) | Einwohner (rechts) */
.kw-header-row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 6px;
}

.kw-header-wg-list {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Trennlinie zwischen WG-Badges */
.kw-header-wg-list .user-badge {
    position: relative;
}

.kw-header-wg-list .user-badge + .user-badge::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: var(--border-color);
}

.kw-header-wg {
    font-size: 10px;
    color: var(--color-werbegebiet);
    background: rgba(56, 189, 248, 0.1);
    padding: 2px 8px;
    border-radius: var(--radius-lg);
    white-space: nowrap;
}

.kw-header-einwohner {
    font-size: var(--text-klein);
    font-weight: var(--fett);
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Hide row2 and divider when open */
.unterabschnitt--card--expandable.open .kw-header-row2,
.unterabschnitt--card--expandable.open .kw-header-divider {
    display: none;
}

/* Trennlinie zwischen Team und WG (eingeklappt) */
.kw-header-divider {
    width: 100%;
    height: 1px;
    background: var(--border-color);
    margin: 8px 0;
}

.kw-detail-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 140px;
    flex-shrink: 0;
}

.kw-detail-title strong {
    font-size: 15px;
    color: var(--text-primary);
}

.kw-detail-date {
    font-size: 12px;
    color: var(--text-secondary);
}


/* Team Pills im Header (eingeklappt) - scrollbar versteckt, scrollen möglich */
.kw-header-team {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 15px 0; /* Extra padding unten */
    margin-bottom: -15px; /* Versteckt Scrollbar */
    clip-path: inset(0 0 11px 0); /* Schneidet Scrollbar ab */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.kw-header-team::-webkit-scrollbar {
    height: 0;
    display: none;
}

/* Badges dürfen nicht schrumpfen oder überlappen */
.kw-header-team .user-badge {
    flex-shrink: 0;
}

/* Trennlinie zwischen Badges */
.kw-header-team .user-badge + .user-badge::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: var(--border-color);
}

.kw-header-team .user-badge {
    position: relative;
}


/* Info Icon mit Tooltip */
.kw-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    cursor: help;
    position: relative;
    flex-shrink: 0;
}

.kw-info-tooltip {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    width: 240px;
    z-index: 1000;
    display: none;
    font-size: 11px;
    font-weight: 400;
    text-align: left;
    color: var(--text-primary);
}

.kw-info-icon:hover .kw-info-tooltip {
    display: block;
}

/* Tooltip nach unten öffnen (statt oben) */
.kw-info-tooltip--bottom {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 8px;
}

.kw-info-tooltip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.kw-info-tooltip-row:last-child {
    margin-bottom: 0;
}

.kw-info-tooltip-pill {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.kw-info-tooltip-pill.yellow { background: var(--warning); }
.kw-info-tooltip-pill.green { background: var(--success); }
.kw-info-tooltip-pill.red { background: var(--error); }
.kw-info-tooltip-pill.white { background: var(--border-color); border: 1px solid var(--border-color); }

.badge-zaehler {
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.kw-header-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0; /* Bleibt fest rechts */
}

/* Quality Ribbon Badge - Schleifen-Abzeichen mit Q */


/* ============================================
   KW DETAIL - ZUSÄTZLICHE STYLES
   ============================================ */

.kw-challenges-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kw-challenge-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-primary);
    border: 1px solid var(--success);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
}

.kw-challenge-item.completed {
    background: var(--success-light);
    border-color: var(--success);
}

.kw-challenge-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kw-challenge-type {
    font-size: 11px;
    font-weight: 600;
    color: var(--warning-dark);
}

.kw-challenge-goal {
    font-size: 10px;
    color: var(--text-secondary);
}

.kw-challenge-reward {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kw-challenge-amount {
    font-size: 12px;
    font-weight: 700;
    color: var(--success-dark);
}

.kw-challenge-empty {
    font-size: 11px;
    color: var(--warning-dark);
    text-align: center;
    padding: 8px;
    margin: 0;
}

.kw-challenge-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    color: var(--warning-dark);
    margin-top: 8px;
    margin-bottom: 0;
}

.kw-challenge-no-qm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    color: var(--warning-dark);
}

.kw-challenge-no-qm p {
    margin: 8px 0 4px 0;
    font-weight: 600;
    font-size: 12px;
}

.kw-challenge-no-qm span {
    font-size: 10px;
    opacity: 0.8;
}

.kw-tc-behaelt {
    font-weight: 700;
    color: var(--warning);
    background: var(--warning-light);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
}

.kw-dienste-list {
    margin-top: 0;
}

.kw-dienst-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    font-size: 12px;
    height: 32px;
}

.kw-dienst-item-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.kw-dienst-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.kw-dienst-name {
    font-weight: 600;
    color: var(--text-primary);
}

.kw-dienst-werber {
    color: var(--text-secondary);
}

.kw-dienst-faktor {
    font-weight: 700;
    color: var(--warning);
    background: var(--warning-light);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.kw-team-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: none;
    overflow-y: visible;
    width: 100%;
}

.kw-team-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 13px;
    min-height: 44px;
    width: 100%;
}

.kw-team-member-left {
    flex: 0 0 auto;
}

.kw-team-member-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    justify-content: flex-end;
}


.kw-member-label {
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.kw-member-label.neuanreise {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.kw-member-label.abreise {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
}

.kw-member-label.beide {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 50%, rgba(239, 68, 68, 0.15) 50%);
    color: var(--text-primary);
}

/* Anwesenheits-Tracker */
.kw-attendance-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.btn-toggle-group {
    display: flex;
    gap: 3px;
}

.btn.btn-toggle {
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-klein);
    font-weight: var(--fett);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    border: none;
    color: var(--bg-primary);
    padding: 0;
}

.btn.btn-toggle.present {
    background: var(--success);
}

.btn.btn-toggle.present:hover {
    background: var(--success-dark);
}

.btn.btn-toggle.absent {
    background: var(--error);
}

.btn.btn-toggle.absent:hover {
    background: var(--error-dark);
}

.btn.btn-toggle.neutral {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn.btn-toggle.neutral:hover {
    background: var(--accent-color);
    color: var(--bg-primary);
}

.btn.btn-toggle.active {
    background: var(--accent-color);
}

.btn.btn-toggle.active:hover {
    background: var(--info-dark);
}

.btn.btn-sm.btn-notes {
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: 4px;
    padding: 0;
}

.btn.btn-sm.btn-notes.has-notes {
    background: var(--warning-light);
    border-color: var(--warning);
}

.btn.btn-sm.btn-notes svg {
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
}

.btn.btn-sm.btn-notes.has-notes svg {
    color: var(--warning-dark);
}

.btn.btn-sm.btn-notes.active {
    background: var(--success-light);
    border-color: var(--success);
}

.btn.btn-sm.btn-notes.active .icon {
    color: var(--success-dark);
}

/* Notizen Modal */
.attendance-notes-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.attendance-notes-modal.active {
    opacity: 1;
    visibility: visible;
}

.attendance-notes-modal-content {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    width: 90%;
    max-width: 450px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.2s ease;
}

.attendance-notes-modal.active .attendance-notes-modal-content {
    transform: scale(1);
}

.attendance-notes-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.attendance-notes-modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.attendance-notes-modal-header .badge-zaehler {
    background: var(--primary);
    color: var(--bg-primary);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
}

.attendance-notes-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
}

.attendance-notes-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    max-height: 300px;
}

.attendance-notes-empty {
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    padding: 20px;
}

.attendance-note-item {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 8px;
}

.attendance-note-item:last-child {
    margin-bottom: 0;
}

.attendance-note-timestamp {
    font-size: 10px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.attendance-note-text {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
    white-space: pre-wrap;
}

.attendance-notes-input-area {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}

.attendance-notes-input-area textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 13px;
    resize: none;
    min-height: 70px;
    font-family: inherit;
}

.attendance-notes-input-area .btn-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.attendance-notes-input-area .btn {
    padding: 8px 16px;
    font-size: 13px;
}

/* WG Container - Chips mit Akkordeon darunter */
.kw-wg-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

/* Wrapper für Chip + Akkordeon */
.kw-wg-wrapper {
    display: flex;
    flex-direction: column;
}

.anzeige-box.selected {
    order: -1; /* Ausgewählte nach links */
}

.kw-wg-chip {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    width: 100%;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.kw-wg-chip > .text-klein {
    width: 100%;
    text-align: center;
}

.anzeige-box.selected .kw-wg-chip {
    background: rgba(56, 189, 248, 0.1);
    border-color: var(--color-werbegebiet);
    color: var(--color-werbegebiet);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.kw-wg-chip svg {
    width: 14px;
    height: 14px;
}

.kw-wg-chip .chip-ew {
    font-size: var(--text-klein);
    font-weight: var(--fett);
    color: var(--text-secondary);
}

.kw-wg-chip .chip-ma {
    font-size: 10px;
    background: rgba(56, 189, 248, 0.1);
    color: var(--color-werbegebiet);
    padding: 1px 6px;
    border-radius: var(--radius-lg);
    font-weight: 600;
}

/* Akkordeon direkt unter dem Chip */
.kw-wg-accordion {
    background: var(--bg-primary);
    border: 2px solid var(--color-werbegebiet);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    overflow: hidden;
    width: 100%;
}

.kw-wg-accordion-body {
    padding: 8px;
    max-height: 210px; /* ca. 6 Mitarbeiter */
    overflow-y: auto;
}

.kw-wg-ma-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kw-wg-ma-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--bg-secondary);
    border: 2px solid transparent;
}

/* MA in anderem WG → verblasst */
.kw-wg-ma-item.in-other-wg {
    opacity: 0.5;
}

/* MA ausgewählt → grüne Umrandung */
.kw-wg-ma-item.checked {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--success);
    opacity: 1;
}

.kw-wg-ma-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--success);
    cursor: pointer;
}

/* Leere Nachricht */


/* Member Cards: siehe css/styles.css (.schrieb-compact, .schriebe-grid) */

/* ===================== WERBEGEBIETE & PROVISIONEN TAB ===================== */

/* Kostenübernahmen */
.kosten-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kosten-item {
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
}


/* Small Toggle Switch */
.toggle-switch.small {
    width: 36px;
    height: 20px;
}

.toggle-switch.small .toggle-slider:before {
    width: 14px;
    height: 14px;
    bottom: 3px;
    left: 3px;
}

.toggle-switch.small input:checked + .toggle-slider:before {
    transform: translateX(16px);
}



/* Sonderposten */
.sonderposten-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sonderposten-empty {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    padding: 10px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
}

.sonderposten-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
}

.sonderposten-item input[type="text"] {
    flex: 1;
    min-width: 100px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 12px;
}

.sonderposten-item input[type="number"] {
    width: 70px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 12px;
}

.sonderposten-item select {
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 11px;
}



/* Fallback für alte Liste (falls benötigt) */


.schrieb-status {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--spacing-sm);
}


/* Neue kompakte Kampagnen-Info Styles */


.btn-sm {
    padding: 6px 12px;
    font-size: var(--text-klein);
}

select.btn-sm {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 24px;
}

.view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}


.view-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.info-box {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.info-box.highlight {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.info-box.bordered {
    border: 1px solid var(--border-color);
}

.info-box-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.info-box-header svg {
    width: 20px;
    height: 20px;
    color: var(--color-erhoehung);
}

.info-box-header h3 {
    font-size: var(--text-normal);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.info-box.with-action {
    position: relative;
}

.info-box-action {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
}

/* Section Header mit Button rechts */
.section-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Campaign Settings Grid */
.campaign-settings-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.setting-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setting-row-inline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.setting-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setting-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.setting-input {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.15s;
}

.setting-input:disabled {
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: default;
    border-color: transparent;
}

.setting-input:not(:disabled) {
    background: var(--bg-primary);
    border-color: var(--accent-color);
}

/* Settings Gear Button */
.header-settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-secondary);
}
.header-settings-btn svg {
    width: 18px;
    height: 18px;
}

/* Tooltip Info Icon */
.info-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    cursor: help;
}
.info-tooltip svg {
    width: 12px;
    height: 12px;
    color: var(--text-secondary);
}
.info-tooltip:hover svg {
    color: var(--accent-color);
}
.info-tooltip .tooltip-text {
    visibility: hidden;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: var(--shadow);
    margin-bottom: 4px;
}
.info-tooltip:hover .tooltip-text {
    visibility: visible;
}

/* Customer Multi-Select Dropdown */
.customer-dropdown {
    position: relative;
}
.customer-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    min-height: 38px;
}
.customer-dropdown-trigger.disabled {
    cursor: default;
    background: var(--bg-primary);
    border-color: transparent;
}
.customer-dropdown-trigger.disabled:hover {
    border-color: transparent;
}
.customer-dropdown-trigger svg {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    transition: transform 0.2s;
}
.customer-dropdown.open .customer-dropdown-trigger svg {
    transform: rotate(180deg);
}

.customer-dropdown.open 
.customer-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.customer-dropdown-item.selected {
    background: rgba(34, 197, 94, 0.1);
}
.customer-dropdown-item .check-icon {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.customer-dropdown-item.selected .check-icon {
    background: var(--success);
    border-color: var(--success);
}
.customer-dropdown-item.selected .check-icon svg {
    display: block;
}
.customer-dropdown-item .check-icon svg {
    display: none;
    width: 12px;
    height: 12px;
    color: var(--bg-primary);
}
.customer-dropdown-item span {
    font-size: 14px;
}

.selected-customer-tag {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
}


.info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.konditionen-display {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-sm);
    text-align: center;
}

.konditionen-year {
    background: var(--bg-primary);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.konditionen-year-label {
    font-size: var(--text-klein);
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.konditionen-year-value {
    font-size: var(--text-ueberschrift-abschnitt);
    font-weight: 600;
    color: var(--accent-color);
}

.einsatzgebiet-view {
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    overflow: hidden;
}

.einsatzgebiet-view-header {
    background: rgba(56, 189, 248, 0.1);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.einsatzgebiet-view-title {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.einsatzgebiet-view-title svg {
    color: var(--color-werbegebiet);
}

.einsatzgebiet-view-body {
    padding: var(--spacing-lg);
}

.badge-row {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-top: var(--spacing-sm);
}

.badge-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.info-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-klein);
    font-weight: 500;
}

.info-badge.green {
    background: var(--success-light);
    color: var(--success-dark);
}

.info-badge.blue {
    background: var(--info-light);
    color: var(--info-dark);
}

.info-badge.purple {
    background: rgba(20, 184, 166, 0.1);
    color: var(--color-erhoehung);
}

.info-badge.gray {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.info-badge.orange {
    background: rgba(56, 189, 248, 0.1);
    color: var(--color-werbegebiet);
}

/* Einsatzgebiet Options Section */
.einsatzgebiet-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.einsatzgebiet-option-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.einsatzgebiet-option-label {
    font-size: var(--text-klein);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.konditionen-section-view {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.konditionen-section-view-title {
    font-size: var(--text-normal);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

/* KW Blocks (vertical) */


/* Unified Campaign Card */


.kondition-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--text-klein);
    font-weight: 500;
    background: rgba(20, 184, 166, 0.1);
    color: var(--color-erhoehung);
}

.kondition-badge.no-kondition {
    background: var(--error-light);
    color: var(--error-dark);
}

/* ============================================
   POPUP / TOAST NOTIFICATIONS
   ============================================ */
.toast-container {
    position: fixed;
    top: 8px;
    right: 8px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.toast {
    border-radius: var(--radius-md);
    padding: 8px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 200px;
    max-width: 280px;
    animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    background: var(--bg-primary);
}

.toast.success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.4) 0%, var(--bg-primary) 100%);
}

.toast.error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.4) 0%, var(--bg-primary) 100%);
}

.toast.warning,
.toast.info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.4) 0%, var(--bg-primary) 100%);
}

.toast-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.toast.success .toast-icon { color: var(--success); }
.toast.error .toast-icon { color: var(--error); }
.toast.warning .toast-icon,
.toast.info .toast-icon { color: var(--info); }

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

.toast-title {
    color: var(--text-primary);
}

.toast-message {
    line-height: 1.3;
}

.toast-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-tertiary);
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
    margin-left: auto;
}

.toast-close:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

@keyframes toastSlideIn {
    from {
        transform: translateX(100%) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    to {
        transform: translateX(100%) scale(0.95);
        opacity: 0;
    }
}

/* Confirm Modal - muss über anderen Modals liegen */
.confirm-modal {
    z-index: 2000;
}

.confirm-modal .page-container--modal {
    max-width: 420px;
    text-align: center;
}

.confirm-modal .modal-body {
    padding: var(--spacing-xl);
}

.confirm-modal .page-footer {
    justify-content: center;
    gap: var(--spacing-sm);
}

/* Mitglied Modal - nur z-index lokal */
.mitglied-modal {
    z-index: 1500;
}

/* Attendance Notes Modal - über campaignViewModal */
#attendanceNotesModal {
    z-index: 1500;
}

/* Member Cards Styles: siehe css/member-cards.css */

/* ========================================
   STATISTIK SEITE
   ======================================== */
body {
    background: var(--bg-secondary);
}

/* Highlight-Animation für Suchergebnis */


@keyframes highlight-pulse {
    0% { background-color: rgba(99, 102, 241, 0.3); }
    100% { background-color: transparent; }
}

.section-title svg {
    width: 18px;
    height: 18px;
    color: var(--accent-color);
}

.section-badge {
    font-size: var(--text-klein);
    padding: 2px 8px;
    background: var(--accent-color);
    color: var(--bg-primary);
    border-radius: var(--radius-lg);
    font-weight: 500;
}


/* Name Cell */
.name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.import-zone:hover,
.import-zone.dragover {
    border-color: var(--accent-color);
    background: rgba(99, 102, 241, 0.05);
}


/* ========================================
   STATISTIK DASHBOARD
   ======================================== */

.dashboard-container {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header */
.dashboard-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.header-info h1 {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.header-info .period {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Tabs */
.tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-primary);
    padding: 4px;
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
}

.tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.15s;
}

.tab.active {
    background: var(--accent-color);
    color: var(--bg-primary);
}

.tab-content {
    display: none;
}

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

/* Dashboard Section */
.dashboard-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 16px;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.stat-item {
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    text-align: center;
}

.stat-item .value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.stat-item .label {
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* Achievements */
.achievement-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
}

.achievement-card {
    width: 100%;
    min-width: 0;
    height: 120px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    transition: border-color 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

.achievement-card--empty {
    opacity: 0.5;
}

.achievement-card--empty .achievement-score {
    color: var(--text-secondary);
}

.achievement-name {
    font-size: var(--text-normal);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
    word-wrap: break-word;
}

.achievement-meta {
    font-size: var(--text-klein);
    color: var(--text-secondary);
    margin-bottom: auto;
    line-height: 1.4;
    word-wrap: break-word;
}

.achievement-score {
    font-size: var(--text-ueberschrift);
    font-weight: 700;
    color: var(--color-werber);
    margin-top: var(--spacing-sm);
    flex-shrink: 0;
}

/* Charts */


.chart-container {
    height: 200px;
}

/* Rekorde */
.rekorde-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.rekorde-filter {
    display: flex;
    gap: 4px;
}

.rekorde-filter-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.rekorde-filter-btn.active {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--bg-primary);
}


/* Storno Popup */
.storno-trigger {
    position: relative;
    cursor: pointer;
}

.storno-popup {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 100;
    min-width: 160px;
}

/* Responsive */
@media (max-width: 1200px) {
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
    
}

@media (max-width: 768px) {
    .tabs { flex-wrap: wrap; }
    .tab { flex: none; width: calc(33.33% - 4px); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ========================================
   VORLAGEN SEITE
   ======================================== */

.page-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Info Icon Tooltip */
.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: help;
    margin-left: 6px;
    position: relative;
    transition: all 0.2s;
}

.info-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    min-width: 280px;
    max-width: 400px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 1000;
    display: none;
    text-align: left;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
}

.info-icon:hover .info-tooltip {
    display: block;
}

.info-tooltip h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.info-tooltip p {
    margin: 0;
    color: var(--text-secondary);
}

/* Template Tabs */
.template-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-primary);
    padding: 4px;
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
}

.template-tab {
    flex: 1;
    padding: 12px 20px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.template-tab.active {
    background: var(--accent-color);
    color: var(--bg-primary);
}

.template-tab svg {
    width: 18px;
    height: 18px;
}

.tab-badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.2);
}

.template-tab:not(.active) .tab-badge {
    background: var(--bg-hover);
}

/* Template Content */
.template-content {
    display: none;
}

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

/* Template Grid */
.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-lg);
}

.template-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.2s;
}


.template-preview {
    height: 200px;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-hover) 100%);
    position: relative;
    overflow: hidden;
    padding: var(--spacing-md);
}

.template-preview-content {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    height: 100%;
    padding: var(--spacing-md);
    font-size: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.template-preview-header {
    background: #e01e26;
    color: var(--bg-primary);
    padding: 8px;
    margin: -12px -12px 8px -12px;
    font-weight: 600;
    font-size: 11px;
}

.template-info {
    padding: var(--spacing-lg);
}

.template-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

.template-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.template-meta {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.template-meta-item {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.template-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: var(--radius-lg);
    font-size: 11px;
    font-weight: 500;
}

.template-badge.auto {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-neumitglied);
}

.template-badge.manual {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.template-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Placeholders Section */
.placeholders-section {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.placeholders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-sm);
}

.placeholder-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: 13px;
}

.placeholder-code {
    font-family: monospace;
    color: var(--accent-color);
}

.placeholder-copy {
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

/* Editor Modal */
.editor-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    height: 500px;
}

.editor-panel {
    display: flex;
    flex-direction: column;
}

.editor-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.editor-textarea {
    flex: 1;
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: monospace;
    font-size: 13px;
    resize: none;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.preview-panel {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-primary);
}

.preview-header {
    background: var(--bg-secondary);
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-secondary);
}

.preview-content {
    padding: var(--spacing-md);
    height: calc(100% - 40px);
    overflow-y: auto;
}

/* Status Pills */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 500;
}

.status-pill.active {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-neumitglied);
}

.status-pill.inactive {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-secondary);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: currentColor;
}

/* Locked Section */
.locked-section {
    text-align: center;
    padding: 80px 40px;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--border-color);
}

.locked-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.locked-icon svg {
    width: 40px;
    height: 40px;
    color: var(--text-secondary);
}

.locked-section h3 {
    font-weight: 600;
    margin-bottom: 8px;
}

.locked-section p {
    color: var(--text-secondary);
    margin: 0;
}

.locked-detail {
    margin-top: 16px !important;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Individual Templates Header */
.individual-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
}

.individual-info h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.individual-info p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* Create New Card */
.create-new-card {
    border: 2px dashed var(--border-color);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.create-new-content {
    text-align: center;
    color: var(--text-secondary);
}

.create-new-content svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
}

.create-new-content span {
    display: block;
    font-size: 14px;
    font-weight: 500;
}

.create-new-card:hover .create-new-content {
    color: var(--accent-color);
}

/* Locked Tab Indicator */
.template-tab.locked {
    opacity: 0.6;
}

.template-tab.locked::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--text-secondary);
    border-radius: var(--radius-full);
    margin-left: 6px;
}

/* ============================================== */
/* HAUPT-TABS (Preisvorlagen / Emails) */
/* ============================================== */


.main-tab {
    flex: 1;
    padding: 14px 24px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.main-tab.active {
    background: var(--accent-color);
    color: var(--bg-primary);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.main-tab svg {
    width: 20px;
    height: 20px;
}

.main-tab-content {
    display: none;
}

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

/* ============================================== */
/* PREISVORLAGEN STYLES */
/* ============================================== */


.preisvorlagen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-lg);
}

.preisvorlage-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all 0.2s;
}


.preisvorlage-card.create-new {
    border: 2px dashed var(--border-color);
    background: transparent;
    cursor: pointer;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preisvorlage-card.create-new .create-new-content {
    text-align: center;
    color: var(--text-secondary);
}

.preisvorlage-card.create-new:hover .create-new-content {
    color: var(--accent-color);
}

.preisvorlage-card.create-new svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
}

.preisvorlage-card.create-new span {
    display: block;
    font-size: 14px;
    font-weight: 500;
}

.preisvorlage-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.preisvorlage-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.preisvorlage-card-icon svg {
    width: 24px;
    height: 24px;
}

.preisvorlage-card-icon.standard {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-neumitglied);
}

.preisvorlage-card-icon.premium {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.preisvorlage-badge {
    padding: 4px 10px;
    border-radius: var(--radius-lg);
    font-size: 11px;
    font-weight: 600;
}

.preisvorlage-badge.default {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-neumitglied);
}

.preisvorlage-badge.premium {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.preisvorlage-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.preisvorlage-card-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.preisvorlage-card-details {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
}

.detail-row:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

.detail-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.detail-value {
    color: var(--text-primary);
}

.preisvorlage-card-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Emails Header */


/* ========================================
   PHOTO UPLOAD
   ======================================== */
.photo-upload {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    border: 2px dashed var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-secondary);
    overflow: hidden;
    position: relative;
}

.photo-upload.has-image {
    border-style: solid;
    border-color: var(--accent-color);
}

.photo-upload-icon {
    width: 22px;
    height: 22px;
    color: var(--text-secondary);
}

.photo-upload.has-image .photo-upload-icon {
    display: none;
}

.photo-upload-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.photo-upload.has-image .photo-upload-preview {
    display: block;
}

.photo-upload-box {
    position: relative;
}

.photo-upload-label {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    font-size: var(--text-klein);
    color: var(--text-secondary);
    font-weight: 500;
    text-align: center;
}

/* Photo-Upload Rahmen in Stufe-Farbe */
.photo-upload.photo-upload--sma.has-image { border-color: var(--stufe-sma); }
.photo-upload.photo-upload--ema.has-image { border-color: var(--stufe-ema); }
.photo-upload.photo-upload--jmm.has-image { border-color: var(--stufe-jmm); }
.photo-upload.photo-upload--emm.has-image { border-color: var(--stufe-emm); }
.photo-upload.photo-upload--cemm.has-image { border-color: var(--stufe-cemm); }
.photo-upload.photo-upload--spb.has-image { border-color: var(--stufe-spb); }
.photo-upload.photo-upload--kad.has-image { border-color: #fde047; }
.photo-upload.photo-upload--fue.has-image { border-color: #fde047; }

/* ========================================
   DOCUMENT UPLOAD
   ======================================== */

.document-upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.document-upload-gruppe {
    display: flex;
    flex-direction: column;
}

.document-upload-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
}

.document-upload-item h4 {
    font-weight: 600;
    margin: 0 0 var(--spacing-sm) 0;
}

.document-header,
.contract-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.document-upload-box {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-primary);
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.document-upload-box.has-file {
    border-style: solid;
    border-color: var(--success);
    background: var(--success-light);
}

.document-upload-icon {
    width: 32px;
    height: 32px;
    color: var(--text-secondary);
}

.document-upload-box:hover {
    box-shadow: 0 0 0 1.5px var(--accent-color-ring);
}

.document-upload-box:hover .document-upload-icon {
    color: var(--accent-color);
}

.document-upload-box.has-file .document-upload-icon {
    color: var(--success);
}

.document-upload-text {
    font-size: var(--text-klein);
    color: var(--text-secondary);
}

.document-upload-name {
    font-size: var(--text-klein);
    font-weight: 500;
    color: var(--text-primary);
    word-break: break-all;
}

.document-upload-box.has-file .document-upload-text {
    display: none;
}

/* Dateiliste unter Upload-Box */
.document-file-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

.document-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: var(--text-normal);
}

.document-file-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-secondary);
    margin-right: var(--spacing-xs);
}

.document-file-name {
    color: var(--text-primary);
    font-size: var(--text-klein);
    flex: 1;
    margin-right: var(--spacing-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

.document-file-name:hover {
    color: var(--primary);
}

.document-file-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

/* ========================================
   LEVEL BADGES (Karrierestufen)
   ======================================== */

/* Basis Level-Badge */
.level-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    position: relative;
    margin: 0 auto;
}

.level-badge--sm {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.level-badge--md {
    width: 60px;
    height: 60px;
    border-radius: 12px;
}

.level-badge--lg {
    width: 80px;
    height: 80px;
    border-radius: 16px;
}

.level-badge--xl {
    width: 100px;
    height: 100px;
    border-radius: 20px;
}

/* Level-Badge Code (SMA, EMA, etc.) */
.level-badge-code {
    font-weight: 700;
    color: var(--bg-primary);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.level-badge--sm .level-badge-code { font-size: 12px; }
.level-badge--md .level-badge-code { font-size: 16px; }
.level-badge--lg .level-badge-code { font-size: 20px; }
.level-badge--xl .level-badge-code { font-size: 28px; }

/* Level-Badge Stufe (I, II, III, etc.) */
.level-badge-stufe {
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}

.level-badge--sm .level-badge-stufe { font-size: 8px; margin-top: 1px; }
.level-badge--md .level-badge-stufe { font-size: 10px; margin-top: 2px; }
.level-badge--lg .level-badge-stufe { font-size: 11px; margin-top: 2px; }
.level-badge--xl .level-badge-stufe { font-size: 12px; margin-top: 2px; }

/* Level Sterne */
.level-stars {
    display: flex;
    gap: 2px;
    margin-top: 4px;
}

.level-star {
    fill: var(--stufe-spb);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.level-badge--sm .level-star { width: 8px; height: 8px; }
.level-badge--md .level-star { width: 10px; height: 10px; }
.level-badge--lg .level-star { width: 12px; height: 12px; }
.level-badge--xl .level-star { width: 16px; height: 16px; }

.level-star.empty {
    fill: rgba(255,255,255,0.3);
}

/* Level-spezifische Farben */
.level-badge--sma { background: var(--stufe-sma); }
.level-badge--ema { background: var(--stufe-ema); }
.level-badge--jmm { background: var(--stufe-jmm); }
.level-badge--emm { background: var(--stufe-emm); }
.level-badge--cemm { background: var(--stufe-cemm); }
.level-badge--spb { background: var(--stufe-spb); }
.level-badge--kad { background: linear-gradient(135deg, #fef9c3, #fde047, #eab308); }
.level-badge--fue { background: linear-gradient(135deg, #fffbeb, #fef08a, #fde047, #f59e0b); }

/* Glow-Effekte für höhere Stufen */
.level-badge--glow-1 { box-shadow: 0 0 15px currentColor; }
.level-badge--glow-2 { box-shadow: 0 0 20px currentColor; }
.level-badge--glow-3 { box-shadow: 0 0 25px currentColor; }
.level-badge--glow-4 { box-shadow: 0 0 30px currentColor; }
.level-badge--glow-5 { box-shadow: 0 0 40px currentColor, 0 0 60px currentColor; }

/* Glow mit Level-Farben */
.level-badge--emm.level-badge--glow { box-shadow: 0 0 15px var(--stufe-emm); }
.level-badge--cemm.level-badge--glow { box-shadow: 0 0 20px var(--stufe-cemm); }
.level-badge--spb.level-badge--glow { box-shadow: 0 0 25px var(--stufe-spb); }
.level-badge--kad.level-badge--glow { box-shadow: 0 0 30px var(--stufe-kad); }
.level-badge--fue.level-badge--glow { box-shadow: 0 0 40px var(--stufe-fue), 0 0 60px var(--stufe-fue); }

/* Platzhalter-Badge (keine Stufe ausgewählt) */
.level-badge--placeholder {
    background: var(--border-color);
}

.level-badge--placeholder .level-badge-code,
.level-badge--placeholder .level-badge-stufe {
    color: rgba(255,255,255,0.7);
}

.level-badge--placeholder .level-star {
    fill: rgba(255,255,255,0.5);
    filter: none;
}

/* Level-Name unter Badge */
.level-name {
    display: block;
    width: fit-content;
    margin: var(--spacing-xs) auto 0;
    font-weight: 600;
    color: var(--text-primary);
}

/* Profile Header - 3-Spalten Layout */
.profile-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--spacing-md);
}

.profile-header-left {
    justify-self: start;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.profile-header-center {
    justify-self: center;
    text-align: center;
}

.profile-header-right {
    justify-self: end;
    display: flex;
    gap: var(--spacing-md);
}

/* ========================================
   VORLAGEN-SEITE STYLES
   ======================================== */

/* Locked Section */
.locked-section {
    text-align: center;
    padding: 80px 40px;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--border-color);
}

.locked-section .locked-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: var(--bg-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.locked-section .locked-icon svg {
    width: 40px;
    height: 40px;
    color: var(--text-secondary);
}

.locked-section h3 {
    font-weight: 600;
    margin-bottom: 8px;
}

.locked-section p {
    color: var(--text-secondary);
    margin: 0;
}

/* Vorlage Grid */
.vorlage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-lg);
}

/* Vorlage Card */
.vorlage-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    min-height: 250px;
}


.vorlage-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.vorlage-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vorlage-card-icon svg {
    width: 24px;
    height: 24px;
}

.vorlage-card-icon.standard {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.vorlage-card-icon.premium {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.vorlage-card-icon.individual {
    background: rgba(113, 63, 18, 0.1);
    color: var(--color-werber);
}

.vorlage-badge {
    padding: 4px 10px;
    border-radius: var(--radius-lg);
    font-size: 11px;
    font-weight: 600;
}

.vorlage-badge.default {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.vorlage-badge.premium {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.vorlage-badge.individual {
    background: rgba(113, 63, 18, 0.1);
    color: var(--color-werber);
}

.vorlage-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.vorlage-card-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

/* Preis-Anzeige auf Karten */
.vorlage-card-prices {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.price-item {
    flex: 1;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    text-align: center;
}

.price-label {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.price-value {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.price-sub {
    display: block;
    font-size: 10px;
    color: var(--text-secondary);
}

.vorlage-card-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: auto;
}

/* Neue Vorlage Card */
.vorlage-card--new {
    border: 2px dashed var(--border-color);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vorlage-card-new-content {
    text-align: center;
    color: var(--text-secondary);
}

.vorlage-card--new:hover .vorlage-card-new-content {
    color: var(--accent-color);
}

.vorlage-card-new-content svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-sm);
}

.vorlage-card-new-content span {
    display: block;
    font-size: 14px;
    font-weight: 500;
}

/* Preisvorlage Modal Styles */
.symbol-picker {
    display: flex;
    gap: var(--spacing-sm);
}

.symbol-option {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.symbol-option svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.symbol-option.active {
    border-color: var(--accent-color);
    background: rgba(59, 130, 246, 0.1);
}

.symbol-option.active svg {
    color: var(--accent-color);
}

/* Beitrag Grid (3-Spalten) */
.beitrag-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.beitrag-grid-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.beitrag-grid-row .form-group {
    margin-bottom: 0;
}

/* Form Helpers */
.form-label--sm {
    font-size: 11px;
    margin-bottom: 4px;
}

.form-hint {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* ========================================
   STATS TABLE SYSTEM
   ======================================== */

.stats-table-wrap {
    position: relative;
    overflow: hidden;
}

.stats-table-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--bg-primary));
    pointer-events: none;
    z-index: 3;
}

.stats-table-scroll {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.stats-table-scroll::-webkit-scrollbar {
    display: none;
}

.stats-table {
    width: max-content;
    min-width: 1200px;
    border-collapse: collapse;
    font-size: 12px;
}

.stats-table th,
.stats-table td {
    padding: 10px 12px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.stats-table th:last-child,
.stats-table td:last-child {
    border-right: none;
}

.stats-table th {
    font-weight: var(--fett);
    color: var(--text-secondary);
    font-size: var(--text-klein);
    background: var(--bg-hover);
}

.stats-table td {
    color: var(--text-primary);
    font-size: var(--text-klein);
}

.stats-table th:first-child,
.stats-table td:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 200px;
    font-size: var(--text-klein);
    font-weight: var(--fett);
    background: var(--bg-primary);
    box-shadow: 16px 0 16px -8px rgba(0, 0, 0, 0.08);
}

.stats-table th:first-child {
    background: var(--bg-hover);
}

.stats-table tbody tr:hover td {
    background: var(--bg-hover);
}

.stats-table tbody tr:hover td:first-child {
    background: var(--bg-hover);
}

/* Stats-Table: Expandable/Child Rows */
.stats-table .expandable-row td:first-child .icon {
    display: inline-block;
    margin-right: 8px;
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    vertical-align: middle;
    background-color: var(--text-muted);
}

.stats-table .child-row td:first-child {
    font-size: var(--text-klein);
    font-weight: var(--fett);
    box-shadow: inset 3px 0 0 var(--text-muted);
    padding-left: 26px;
}

.stats-table .child-row .child-indent {
    display: inline-block;
    width: 14px;
    margin-right: 8px;
    color: var(--border-color);
    font-size: var(--text-klein);
}

/* ============================================
   STACKED BAR (Zahlungsrhythmus etc.)
   ============================================ */

.stacked-bar {
    display: flex;
    width: 100%;
    min-width: 120px;
    height: 20px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-hover);
}

.stacked-bar__segment {
    height: 100%;
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.stacked-bar__segment:hover {
    opacity: 0.85;
}

/* Zahlungsrhythmus-Farben */
.stacked-bar__segment--m { background: var(--zr-monatlich); }
.stacked-bar__segment--qt { background: var(--zr-quartal); }
.stacked-bar__segment--hj { background: var(--zr-halbjaehrlich); }
.stacked-bar__segment--j { background: var(--zr-jaehrlich); }

/* Tooltip - global positioniert */
.stacked-bar-tooltip {
    position: fixed;
    background: var(--text-primary);
    color: var(--bg-primary);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-klein);
    white-space: nowrap;
    z-index: 9999;
    pointer-events: none;
    transform: translate(-50%, -100%);
    margin-top: -8px;
}

/* ============================================
   REFERRAL TREE (Recruiting/Empfehlung)
   ============================================ */

.referral-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
}

.referral-tree__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;
}

/* Vertikale Linie vom Parent zur Children-Leiste */
.referral-tree__node::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: var(--spacing-md);
    background: var(--border-color);
}

/* Root-Node und Nodes ohne Kinder: keine Linie nach unten */
.referral-tree > .referral-tree__node::after,
.referral-tree__node:not(:has(.referral-tree__children))::after {
    display: none;
}

.referral-tree__children {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-md);
    position: relative;
}

/* Horizontale Verbindungslinie über den Kindern */
.referral-tree__children::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--spacing-lg);
    right: var(--spacing-lg);
    height: 2px;
    background: var(--border-color);
}

/* Vertikale Linie von jedem Kind zur horizontalen Leiste */
.referral-tree__children > .referral-tree__node::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--spacing-md));
    left: 50%;
    width: 2px;
    height: var(--spacing-md);
    background: var(--border-color);
}

/* Person Card - kompakt und rechteckig */
.referral-tree__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--bg-hover);
    border-radius: var(--radius-sm);
    width: 140px;
    min-height: 48px;
    position: relative;
    z-index: 1;
    text-align: center;
}

.referral-tree__card--root {
    background: var(--primary-50);
    border-color: var(--primary-200);
}

.referral-tree__card--hoverable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.referral-tree__name {
    font-size: var(--text-klein);
    font-weight: var(--fett);
    color: var(--text-primary);
    line-height: 1.3;
    text-align: center;
}

.referral-tree__date {
    font-size: var(--text-klein);
    color: var(--text-secondary);
    line-height: 1.2;
    text-align: center;
}

/* Tooltip */
.referral-tree__tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-primary);
    color: var(--bg-primary);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    white-space: nowrap;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
}

.referral-tree__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--text-primary);
}

.referral-tree__card--hoverable:hover .referral-tree__tooltip {
    opacity: 1;
    visibility: visible;
}

.referral-tree__tooltip-stats {
    display: flex;
    gap: var(--spacing-md);
}

.referral-tree__tooltip-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.referral-tree__tooltip-stat-value {
    font-weight: var(--fett);
    font-size: var(--text-klein);
}

.referral-tree__tooltip-stat-label {
    font-size: var(--text-klein);
    font-weight: var(--fett);
    color: var(--text-muted);
    text-transform: uppercase;
}

/* ========================================
   ZENTRALES ICON-SYSTEM
   ========================================

   Verwendung:
   <span class="icon icon--dokument"></span>

   Mit Größen-Modifikatoren:
   <span class="icon icon--sm icon--kalender"></span>
   <span class="icon icon--lg icon--plus"></span>

   Mit Farb-Modifikatoren:
   <span class="icon icon--success icon--haken"></span>
   <span class="icon icon--error icon--schliessen"></span>

   ======================================== */

/* Basis Icon-Klasse - Standard 17.5px, mit Text 1.25em */
.icon {
    display: inline-block;
    width: 17.5px;
    height: 17.5px;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Icon neben Text - passt sich Textgröße an */
.icon--text {
    width: calc(1em * 1.25);
    height: calc(1em * 1.25);
}

/* Icon neben Text - kleiner */
.icon--text--kleiner {
    width: calc(1em * 0.75);
    height: calc(1em * 0.75);
}

/* Farb-Modifikatoren */
.icon--success {
    color: var(--success);
}

.icon--error {
    color: var(--error);
}

.icon--warning {
    color: var(--warning);
}

.icon--info {
    color: var(--info);
}

.icon--muted {
    color: var(--text-muted);
}


/* ===== FEATHER ICONS ===== */
/* Alle Icons: https://feathericons.com/ */
/* stroke-width: 2, viewBox: 0 0 24 24 */

/* x */
.icon--schliessen {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* minus */
.icon--minus {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

/* plus */
.icon--plus {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

/* check */
.icon--haken,
.icon--check {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* mail */
.icon--email {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}

/* file-text */
.icon--dokument,
.icon--dokument-liste {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E");
}

/* calendar */
.icon--kalender {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

/* edit-2 */
.icon--bearbeiten,
.icon--stift {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E");
}

/* trash-2 */
.icon--papierkorb,
.icon--loeschen {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
}

/* archive */
.icon--archiv {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'/%3E%3Crect x='1' y='3' width='22' height='5'/%3E%3Cline x1='10' y1='12' x2='14' y2='12'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'/%3E%3Crect x='1' y='3' width='22' height='5'/%3E%3Cline x1='10' y1='12' x2='14' y2='12'/%3E%3C/svg%3E");
}

/* settings */
.icon--einstellungen {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}

/* trending-up */
.icon--trend {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E");
}

/* credit-card */
.icon--kreditkarte {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E");
}

/* image */
.icon--bild {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
}

/* alert-triangle */
.icon--warnung {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* star */
.icon--stern {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}

/* check-circle */
.icon--check-kreis {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}

/* clipboard */
.icon--clipboard,
.icon--clipboard-leer {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3C/svg%3E");
}

/* zap */
.icon--blitz {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
}

/* info */
.icon--info,
.icon--info-kreis {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}

/* users */
.icon--team,
.icon--personen {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

/* user */
.icon--person,
.icon--benutzer-placeholder {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* briefcase (für Gebäude/Firma) */
.icon--gebaeude {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
}

/* map-pin */
.icon--standort,
.icon--werbegebiet {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* heart */
.icon--herz {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}

/* credit-card (ID) */
.icon--ausweis {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E");
}

/* home */
.icon--haus,
.icon--dashboard {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
}

/* bar-chart-2 */
.icon--statistik {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E");
}

/* droplet (Farbpalette) */
.icon--farbpalette {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E");
}

/* clock */
.icon--uhr {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

/* dollar-sign */
.icon--geld,
.icon--geldscheine,
.icon--geld-kreis {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
}

/* sun (Glühbirne/Idee) */
.icon--gluehbirne {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
}

/* arrow-right */
.icon--pfeil-rechts {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}

/* unlock */
.icon--schloss-offen {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'/%3E%3C/svg%3E");
}

/* refresh-cw */
.icon--aktualisieren {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E");
}

/* file (Zeitung) */
.icon--zeitung {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpolyline points='13 2 13 9 20 9'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpolyline points='13 2 13 9 20 9'/%3E%3C/svg%3E");
}

/* euro-Zeichen (custom basierend auf dollar-sign) */
.icon--euro {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6c-3.5-3-9-2-11 2s-1.5 10 3 12c2.5 1 5.5.5 8-2'/%3E%3Cline x1='4' y1='10' x2='14' y2='10'/%3E%3Cline x1='4' y1='14' x2='14' y2='14'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6c-3.5-3-9-2-11 2s-1.5 10 3 12c2.5 1 5.5.5 8-2'/%3E%3Cline x1='4' y1='10' x2='14' y2='10'/%3E%3Cline x1='4' y1='14' x2='14' y2='14'/%3E%3C/svg%3E");
}

/* gift */
.icon--geschenk {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E");
}

/* chevron-down */
.icon--pfeil-unten {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* chevron-up */
.icon--pfeil-auf {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E");
}

/* chevron-down */
.icon--pfeil-ab {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* search */
.icon--suche {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

/* menu */
.icon--menu {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
}

/* chevron-left */
.icon--pfeil-links {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}

/* arrow-left */
.icon--zurueck {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E");
}

/* download */
.icon--download {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}

/* upload */
.icon--upload {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
}

/* upload-cloud */
.icon--cloud-upload {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 16 12 12 8 16'/%3E%3Cline x1='12' y1='12' x2='12' y2='21'/%3E%3Cpath d='M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3'/%3E%3Cpolyline points='16 16 12 12 8 16'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 16 12 12 8 16'/%3E%3Cline x1='12' y1='12' x2='12' y2='21'/%3E%3Cpath d='M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3'/%3E%3Cpolyline points='16 16 12 12 8 16'/%3E%3C/svg%3E");
}

/* lock */
.icon--schloss {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

/* slash (Storno) */
.icon--storno {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='4.93' y1='4.93' x2='19.07' y2='19.07'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='4.93' y1='4.93' x2='19.07' y2='19.07'/%3E%3C/svg%3E");
}

/* columns */
.icon--spalten {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18'/%3E%3C/svg%3E");
}

/* activity (Labor) */
.icon--labor {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'/%3E%3C/svg%3E");
}

/* more-vertical */
.icon--mehr-vertikal {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='12' cy='5' r='1'/%3E%3Ccircle cx='12' cy='19' r='1'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='12' cy='5' r='1'/%3E%3Ccircle cx='12' cy='19' r='1'/%3E%3C/svg%3E");
}

/* folder */
.icon--ordner {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

/* ========== ABRECHNUNG CARDS ========== */
.abrechnung-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    overflow: hidden;
    flex-shrink: 0;
}

.abrechnung-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.abrechnung-card__header:hover {
    background: var(--bg-tertiary);
}

.abrechnung-card__name {
    font-weight: 600;
    font-size: var(--text-normal);
}

.abrechnung-card__meta {
    font-size: var(--text-klein);
    color: var(--text-secondary);
}

.abrechnung-card__amount {
    font-weight: 700;
    font-size: var(--text-gross);
    color: var(--success);
}

.abrechnung-card__body {
    padding: var(--spacing-lg);
    display: none;
}

.abrechnung-card.expanded .abrechnung-card__body {
    display: block;
}

.abrechnung-card__row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: var(--text-klein);
}

.abrechnung-card__row--negative {
    color: var(--error);
}

.abrechnung-card__row--positive {
    color: #16a34a;
}

.abrechnung-card__row--total {
    border-top: 2px solid var(--border-color);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-md);
    font-weight: 700;
    font-size: var(--text-normal);
}

.abrechnung-card__input {
    width: 100px;
    text-align: right;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: var(--text-normal);
}

/* ========== VERSAND PLANEN ========== */
.versand-planen {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-lg);
}

.versand-planen .form-label {
    margin-bottom: 0;
}

/* ========== CONFIRMATION / SUCCESS ========== */
.confirmation-box {
    text-align: center;
    padding: var(--spacing-xl);
}

.confirmation-box__icon {
    font-size: 48px;
    margin-bottom: var(--spacing-lg);
}

.confirmation-box__title {
    font-size: var(--text-gross);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.confirmation-box__text {
    color: var(--text-secondary);
    margin-top: var(--spacing-sm);
}

.confirmation-box__link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-lg);
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
}

.confirmation-box__link:hover {
    text-decoration: underline;
}

/* ========== FLEX UTILITIES ========== */
.flex-row {
    display: flex;
    align-items: center;
}

.flex-row--gap-sm {
    gap: var(--spacing-sm);
}

.flex-row--gap-md {
    gap: var(--spacing-md);
}