/* ═══════════════════════════════════════════════════════════════════════════════
 * GLASS-FRAMEWORK.CSS – Modulares Glassmorphism-Design-System
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * Zentrales CSS-Framework für planer.garten-will.de.
 * Wird von beiden Seiten (index.html + erp.html) geteilt.
 * Definiert alle Design-Tokens, Glassmorphism-Komponenten,
 * Typografie, Buttons, Formulare, Modals und responsive Breakpoints.
 *
 * Design: Glassmorphism (backdrop-filter + rgba-Hintergründe)
 * Farbe:  Dunkelgrün #1a3a0a als zentrale Markenfarbe
 * Grid:   Mobile-First, 8px-Spacing
 *
 * VERSION: 2.0.0
 * ═══════════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════════
 * ABSCHNITT 1: LOKALE SCHRIFTARTEN (DSGVO-konform)
 * ─────────────────────────────────────────────────────────────────────────────
 * Alle Fonts werden lokal gehostet. Kein Request an Google Fonts oder
 * andere externe Server. Das ist Pflicht für DSGVO-Konformität.
 *
 * font-display: swap → Text wird sofort mit Fallback-Font angezeigt,
 * dann nahtlos zur geladenen Schrift gewechselt (kein FOIT).
 * ═══════════════════════════════════════════════════════════════════════════════ */
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-variable.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * ABSCHNITT 2: DESIGN-TOKENS (CSS Custom Properties)
 * ─────────────────────────────────────────────────────────────────────────────
 * Zentrale Farben, Abstände, Radien und Übergänge.
 * Änderungen hier wirken sich auf das gesamte System aus.
 * ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Markenfarben: Will Gartengestaltung ──────────────────────────────────
     * Dunkelgrün (#1a3a0a) = Primäre Identität (Logo, Header, Footer)
     * Die Abstufungen 900→50 gehen von dunkel nach hell.
     * 900 = dunkelste Stufe (fast schwarz-grün)
     * 50  = hellste Stufe (fast weiß mit Grünstich)
     * ──────────────────────────────────────────────────────────────────────── */
    --will-green-900: #1a3a0a;
    --will-green-800: #22500e;
    --will-green-700: #2d6b14;
    --will-green-600: #3a8a1c;
    --will-green-500: #4ba226;
    --will-green-400: #66b844;
    --will-green-300: #8dce6f;
    --will-green-200: #b5e09e;
    --will-green-100: #d9f0cd;
    --will-green-50:  #f0f9eb;

    /* ── Erdtöne (für Akzente und Hintergründe) ──────────────────────────── */
    --earth-900: #3d2e1a;
    --earth-700: #6b5234;
    --earth-500: #8c7356;
    --earth-300: #c4ad92;
    --earth-100: #f0e8dd;

    /* ── Neutrale Grautöne ────────────────────────────────────────────────── */
    --neutral-900: #1a1a1a;
    --neutral-800: #2d2d2d;
    --neutral-700: #404040;
    --neutral-600: #555555;
    --neutral-500: #737373;
    --neutral-400: #a0a0a0;
    --neutral-300: #c4c4c4;
    --neutral-200: #e0e0e0;
    --neutral-100: #f0f0f0;
    --neutral-50:  #fafafa;

    /* ── Status-Farben ────────────────────────────────────────────────────── */
    --color-success:     #16a34a;
    --color-success-bg:  #dcfce7;
    --color-warning:     #ca8a04;
    --color-warning-bg:  #fef9c3;
    --color-danger:      #dc2626;
    --color-danger-bg:   #fee2e2;
    --color-info:        #2563eb;
    --color-info-bg:     #dbeafe;

    /* ── Glassmorphism-Kern ───────────────────────────────────────────────────
     * Das Herzstück des Designs. Jede "Glas-Karte" nutzt diese Werte.
     *
     * ERKLÄRUNG FÜR AZUBI:
     *   backdrop-filter: blur(12px) macht den Hintergrund HINTER dem Element
     *   unscharf – wie Milchglas. rgba(255,255,255,0.70) ist ein halbtrans-
     *   parentes Weiß darüber. Zusammen ergibt das den "Glas-Effekt".
     *   Die 1px-Border mit rgba(255,255,255,0.30) simuliert eine Lichtkante
     *   am oberen Rand des Glases.
     * ──────────────────────────────────────────────────────────────────────── */
    --glass-bg:           rgba(255, 255, 255, 0.70);
    --glass-bg-strong:    rgba(255, 255, 255, 0.85);
    --glass-bg-subtle:    rgba(255, 255, 255, 0.50);
    --glass-bg-dark:      rgba(26, 58, 10, 0.92);
    --glass-border:       1px solid rgba(255, 255, 255, 0.30);
    --glass-border-light: 1px solid rgba(255, 255, 255, 0.18);
    --glass-border-dark:  1px solid rgba(255, 255, 255, 0.08);
    --glass-blur:         blur(12px);
    --glass-blur-strong:  blur(20px);
    --glass-shadow:       0 8px 32px rgba(0, 0, 0, 0.08);
    --glass-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.12);
    --glass-shadow-lg:    0 16px 56px rgba(0, 0, 0, 0.10);
    --glass-inset:        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    /* ── Typografie ───────────────────────────────────────────────────────── */
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                    'Helvetica Neue', Arial, sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                    'Helvetica Neue', Arial, sans-serif;
    --font-mono:    'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* ── Schriftgrößen (fluid, clamp-basiert) ─────────────────────────────── */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.8125rem;  /* 13px */
    --text-base: 0.9375rem;  /* 15px – Basis für Mobile */
    --text-md:   1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  clamp(1.75rem, 4vw, 2.25rem);   /* 28–36px */
    --text-4xl:  clamp(2rem, 5vw, 3.25rem);       /* 32–52px */

    /* ── Spacing (8px-Grid) ───────────────────────────────────────────────── */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;
    --space-20:  80px;

    /* ── Radien ───────────────────────────────────────────────────────────── */
    --radius-sm:   8px;
    --radius-md:   14px;
    --radius-lg:   20px;
    --radius-xl:   28px;
    --radius-pill: 999px;

    /* ── Übergänge ────────────────────────────────────────────────────────── */
    --ease-out:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition:     all 0.3s var(--ease-out);
    --transition-fast:all 0.15s ease;
    --transition-slow:all 0.5s var(--ease-out);

    /* ── Z-Index-Schichten ────────────────────────────────────────────────── */
    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   500;
    --z-header:   1000;
    --z-sidebar:  1100;
    --z-overlay:  5000;
    --z-modal:    10000;
    --z-toast:    15000;

    /* ── Safe Areas (iPhone 17 Pro Dynamic Island) ────────────────────────── */
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);

    /* ── Hintergrund-Farbe (wird im Dark-Mode überschrieben) ──────────────── */
    --bg-body:        #f5faf1;
    --bg-card:        var(--glass-bg);
    --bg-sidebar:     var(--glass-bg-strong);
    --bg-header:      var(--glass-bg-dark);
    --text-primary:   var(--neutral-800);
    --text-secondary: var(--neutral-600);
    --border-color:   rgba(0, 0, 0, 0.08);
    --input-bg:       rgba(255, 255, 255, 0.90);
    --input-border:   var(--neutral-200);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * ABSCHNITT 3: DARK-MODE TOKENS
 * ─────────────────────────────────────────────────────────────────────────────
 * Wird aktiviert durch data-theme="dark" auf dem <html>-Element.
 * Überschreibt nur die Tokens die sich ändern müssen.
 * ═══════════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    --bg-body:         #0d1f07;
    --bg-card:         rgba(22, 42, 14, 0.75);
    --bg-sidebar:      rgba(16, 32, 10, 0.88);
    --bg-header:       rgba(8, 20, 4, 0.96);
    --text-primary:    #dff0d0;
    --text-secondary:  #8db870;
    --border-color:    rgba(255, 255, 255, 0.07);
    --input-bg:        rgba(30, 55, 18, 0.80);
    --input-border:    rgba(255, 255, 255, 0.12);

    --glass-bg:           rgba(22, 42, 14, 0.75);
    --glass-bg-strong:    rgba(16, 32, 10, 0.88);
    --glass-bg-subtle:    rgba(22, 42, 14, 0.55);
    --glass-border:       1px solid rgba(255, 255, 255, 0.08);
    --glass-border-light: 1px solid rgba(255, 255, 255, 0.05);
    --glass-shadow:       0 8px 32px rgba(0, 0, 0, 0.25);
    --glass-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.35);
    --glass-inset:        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    --neutral-50:  #1a2e10;
    --neutral-100: #243d18;
    --neutral-200: #2e4d20;
    --neutral-300: #3d6429;
    --will-green-50: #1a2e10;

    --color-success-bg: rgba(22, 163, 74, 0.15);
    --color-warning-bg: rgba(202, 138, 4, 0.15);
    --color-danger-bg:  rgba(220, 38, 38, 0.15);
    --color-info-bg:    rgba(37, 99, 235, 0.15);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * ABSCHNITT 4: CSS-RESET & BASISSTILE
 * ─────────────────────────────────────────────────────────────────────────────
 * Setzt alle Browser-Standardstile zurück und definiert die Grundlage.
 * ═══════════════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Verhindert automatisches Zoomen bei Input-Focus auf iOS */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--bg-body);
    line-height: 1.6;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic Viewport Height für Mobile */
    transition: background 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
}

/* ── Bilder und Medien ────────────────────────────────────────────────────── */
img, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ── Links ────────────────────────────────────────────────────────────────── */
a {
    color: var(--will-green-600);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--will-green-700);
}

/* ── Focus-Styles (Barrierefreiheit) ──────────────────────────────────────── */
:focus-visible {
    outline: 3px solid var(--will-green-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ── Auswahl-Farbe ────────────────────────────────────────────────────────── */
::selection {
    background: var(--will-green-200);
    color: var(--will-green-900);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * ABSCHNITT 5: TYPOGRAFIE
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Überschriften (Playfair Display für Eleganz) ─────────────────────────── */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--will-green-900);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 {
    color: var(--will-green-100);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl);  }

/* ── Fließtext-Überschriften (System-Font für Lesbarkeit) ─────────────────── */
h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
}

h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-sm); }

/* ── Absätze und kleine Texte ─────────────────────────────────────────────── */
p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-4);
}

p:last-child {
    margin-bottom: 0;
}

small, .text-sm {
    font-size: var(--text-sm);
}

.text-xs {
    font-size: var(--text-xs);
}

.text-muted {
    color: var(--neutral-500);
}

.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ── Abschnitts-Titel (z.B. "PROJEKTZUSAMMENFASSUNG") ────────────────────── */
.section-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--will-green-700);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--will-green-100);
    margin-bottom: var(--space-4);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * ABSCHNITT 6: GLASSMORPHISM-KOMPONENTEN
 * ─────────────────────────────────────────────────────────────────────────────
 * Die Kern-Bausteine des Designs. Jede "Karte" auf der Seite nutzt
 * eine dieser Klassen für den Glaseffekt.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Standard Glass-Card ──────────────────────────────────────────────────── */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--glass-shadow), var(--glass-inset);
    transition: var(--transition);
}

.glass-card:hover {
    box-shadow: var(--glass-shadow-hover), var(--glass-inset);
}

/* ── Starke Glass-Card (für Formulare, Zusammenfassungen) ─────────────────── */
.glass-card-strong {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--glass-shadow), var(--glass-inset);
}

/* ── Subtile Glass-Card (für Hintergrund-Elemente) ────────────────────────── */
.glass-card-subtle {
    background: var(--glass-bg-subtle);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--glass-shadow);
}

/* ── Glass-Header (sticky Navigation) ─────────────────────────────────────── */
.glass-header {
    background: var(--bg-header);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border-bottom: var(--glass-border-dark);
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    box-shadow: var(--glass-shadow);
    color: #fff;
}

/* ── Glass-Sidebar (ERP-Navigation) ───────────────────────────────────────── */
.glass-sidebar {
    background: var(--bg-sidebar);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-right: var(--glass-border);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * ABSCHNITT 7: BUTTONS
 * ─────────────────────────────────────────────────────────────────────────────
 * Alle Buttons haben eine Mindesthöhe von 48px (Touch-Target nach WCAG).
 * ═══════════════════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 12px 24px;
    min-height: 48px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

.btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ── Primär-Button (Grüner Gradient) ──────────────────────────────────────── */
.btn-primary {
    background: linear-gradient(135deg, var(--will-green-600), var(--will-green-500));
    color: #fff;
    box-shadow: 0 4px 14px rgba(45, 107, 20, 0.30);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--will-green-700), var(--will-green-600));
    box-shadow: 0 6px 20px rgba(45, 107, 20, 0.40);
    transform: translateY(-1px);
    color: #fff;
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(45, 107, 20, 0.30);
}

/* ── Sekundär-Button (Glaseffekt) ─────────────────────────────────────────── */
.btn-secondary {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--text-primary);
    border: var(--glass-border);
}

.btn-secondary:hover {
    background: var(--glass-bg-strong);
    box-shadow: var(--glass-shadow);
}

/* ── Ghost-Button (transparent) ───────────────────────────────────────────── */
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 2px solid var(--neutral-200);
}

.btn-ghost:hover {
    border-color: var(--neutral-300);
    background: var(--neutral-50);
    color: var(--text-primary);
}

/* ── Erfolgs-Button (für Absenden) ────────────────────────────────────────── */
.btn-success {
    background: linear-gradient(135deg, var(--will-green-700), var(--will-green-600));
    color: #fff;
    box-shadow: 0 4px 14px rgba(45, 107, 20, 0.30);
    font-size: var(--text-md);
    padding: 14px 32px;
}

.btn-success:hover {
    box-shadow: 0 8px 25px rgba(45, 107, 20, 0.45);
    transform: translateY(-2px);
    color: #fff;
}

/* ── Danger-Button (für Löschen) ──────────────────────────────────────────── */
.btn-danger {
    background: linear-gradient(135deg, #c0392b, #e74c3c);
    color: #fff;
}

.btn-danger:hover {
    box-shadow: 0 4px 14px rgba(192, 57, 43, 0.35);
    transform: translateY(-1px);
    color: #fff;
}

/* ── Kleiner Button (für Tabellen-Aktionen) ───────────────────────────────── */
.btn-sm {
    padding: 6px 14px;
    min-height: 36px;
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
}

/* ── Icon-Button (rund, z.B. Dark-Mode-Toggle) ───────────────────────────── */
.btn-icon {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Deaktivierter Button ─────────────────────────────────────────────────── */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* ── Button-Zeile (Zurück/Weiter) ─────────────────────────────────────────── */
.btn-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * ABSCHNITT 8: FORMULAR-ELEMENTE
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Input-Gruppe (Label + Input) ─────────────────────────────────────────── */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.form-group label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

/* ── Pflichtfeld-Stern ────────────────────────────────────────────────────── */
.required {
    color: var(--color-danger);
    margin-left: 2px;
}

/* ── Eingabefelder (Glaseffekt) ───────────────────────────────────────────── */
.glass-input,
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    min-height: 48px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 16px; /* Verhindert iOS-Zoom bei Focus */
    color: var(--text-primary);
    transition: var(--transition);
    outline: none;
}

.glass-input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--will-green-500);
    box-shadow: 0 0 0 4px rgba(74, 162, 38, 0.12);
}

.glass-input::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--neutral-400);
}

/* ── Input mit Suffix (z.B. "m²") ────────────────────────────────────────── */
.input-suffix {
    position: relative;
}

.input-suffix input {
    padding-right: 50px;
}

.input-suffix .suffix {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--neutral-400);
    pointer-events: none;
}

/* ── Formular-Grid (2 Spalten auf Desktop) ────────────────────────────────── */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

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

/* ── Fehler-Zustand ───────────────────────────────────────────────────────── */
.field-error {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

.error-text {
    color: var(--color-danger);
    font-size: var(--text-xs);
    font-weight: 500;
    margin-top: var(--space-1);
}

/* ── Checkbox / Datenschutz ───────────────────────────────────────────────── */
.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.checkbox-group input[type="checkbox"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    margin-top: 2px;
    accent-color: var(--will-green-600);
    cursor: pointer;
}

.checkbox-group label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    cursor: pointer;
}

/* ── Range-Slider ─────────────────────────────────────────────────────────── */
.range-slider {
    width: 100%;
    margin-top: var(--space-2);
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: linear-gradient(90deg, var(--will-green-400), var(--will-green-300));
    border-radius: 3px;
    outline: none;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--will-green-600);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
    transition: var(--transition-fast);
}

.range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}

.range-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--will-green-600);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}

/* ── Suchfeld ─────────────────────────────────────────────────────────────── */
.search-input {
    width: 100%;
    max-width: 400px;
    padding: 10px 16px 10px 40px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-pill);
    font-size: var(--text-base);
    color: var(--text-primary);
    transition: var(--transition);
}

.search-input:focus {
    border-color: var(--will-green-500);
    box-shadow: 0 0 0 4px rgba(74, 162, 38, 0.12);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * ABSCHNITT 9: TABELLEN
 * ─────────────────────────────────────────────────────────────────────────────
 * Glassmorphism-Tabellen für das ERP-System.
 * Auf Mobile werden Tabellen durch Karten-Listen ersetzt (in erp.css).
 * ═══════════════════════════════════════════════════════════════════════════════ */
.glass-table {
    width: 100%;
    border-collapse: collapse;
}

.glass-table th {
    background: rgba(74, 162, 38, 0.08);
    color: var(--will-green-800);
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    font-size: var(--text-sm);
    border-bottom: 2px solid var(--will-green-200);
    white-space: nowrap;
}

[data-theme="dark"] .glass-table th {
    background: rgba(74, 162, 38, 0.12);
    color: var(--will-green-300);
    border-bottom-color: rgba(74, 162, 38, 0.25);
}

.glass-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--text-sm);
    vertical-align: middle;
}

.glass-table tbody tr {
    transition: var(--transition-fast);
}

.glass-table tbody tr:hover {
    background: rgba(74, 162, 38, 0.04);
}

[data-theme="dark"] .glass-table tbody tr:hover {
    background: rgba(74, 162, 38, 0.08);
}

/* ── Tabellen-Wrapper (horizontales Scrollen auf Mobile) ──────────────────── */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * ABSCHNITT 10: BADGES (Status-Anzeigen)
 * ═══════════════════════════════════════════════════════════════════════════════ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.badge-success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.badge-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.badge-danger {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.badge-info {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.badge-neutral {
    background: var(--neutral-100);
    color: var(--neutral-600);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * ABSCHNITT 11: MODAL (Glass-Overlay)
 * ─────────────────────────────────────────────────────────────────────────────
 * Zentriertes Modal mit Glaseffekt-Hintergrund.
 * Wird für CRUD-Dialoge im ERP verwendet.
 * ═══════════════════════════════════════════════════════════════════════════════ */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.modal-overlay.show {
    display: flex;
    animation: modalFadeIn 0.25s ease;
}

.modal-box {
    background: var(--bg-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--glass-shadow-lg), var(--glass-inset);
    animation: modalSlideIn 0.3s var(--ease-spring);
}

.modal-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--will-green-700);
    margin-bottom: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

[data-theme="dark"] .modal-title {
    color: var(--will-green-300);
}

.modal-body {
    margin-bottom: var(--space-6);
}

.modal-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * ABSCHNITT 12: TOAST-BENACHRICHTIGUNGEN
 * ─────────────────────────────────────────────────────────────────────────────
 * Kleine Popup-Meldungen am oberen Bildschirmrand.
 * Erscheinen bei Erfolg/Fehler und verschwinden nach 3 Sekunden.
 * ═══════════════════════════════════════════════════════════════════════════════ */
.toast-container {
    position: fixed;
    top: calc(var(--space-4) + var(--safe-top));
    right: var(--space-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
}

.toast {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    box-shadow: var(--glass-shadow-lg);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
    pointer-events: auto;
    animation: toastSlideIn 0.3s var(--ease-spring);
    max-width: 380px;
}

.toast-success {
    border-left: 4px solid var(--color-success);
}

.toast-error {
    border-left: 4px solid var(--color-danger);
}

.toast-warning {
    border-left: 4px solid var(--color-warning);
}

.toast-info {
    border-left: 4px solid var(--color-info);
}

.toast.hiding {
    animation: toastSlideOut 0.3s ease forwards;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * ABSCHNITT 13: SKELETON-SCREENS (Ladezustände)
 * ─────────────────────────────────────────────────────────────────────────────
 * Animierte Platzhalter während Daten laden.
 * Zeigen die ungefähre Form des Inhalts als pulsierende Blöcke.
 * ═══════════════════════════════════════════════════════════════════════════════ */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--neutral-200) 25%,
        var(--neutral-100) 50%,
        var(--neutral-200) 75%
    );
    background-size: 200% 100%;
    animation: skeletonPulse 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

[data-theme="dark"] .skeleton {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.06) 25%,
        rgba(255,255,255,0.10) 50%,
        rgba(255,255,255,0.06) 75%
    );
    background-size: 200% 100%;
}

/* ── Vordefinierte Skeleton-Größen ────────────────────────────────────────── */
.skeleton-text {
    height: 16px;
    margin-bottom: var(--space-2);
    width: 80%;
}

.skeleton-text-short {
    height: 16px;
    margin-bottom: var(--space-2);
    width: 40%;
}

.skeleton-title {
    height: 28px;
    margin-bottom: var(--space-3);
    width: 60%;
}

.skeleton-row {
    height: 52px;
    margin-bottom: var(--space-2);
}

.skeleton-card {
    height: 120px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
}

.skeleton-stat {
    height: 100px;
    border-radius: var(--radius-md);
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * ABSCHNITT 14: UTILITY-KLASSEN
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Flexbox-Helfer ───────────────────────────────────────────────────────── */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }

/* ── Grid-Helfer ──────────────────────────────────────────────────────────── */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ── Spacing-Helfer ───────────────────────────────────────────────────────── */
.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.p-4   { padding: var(--space-4); }
.p-6   { padding: var(--space-6); }
.p-8   { padding: var(--space-8); }

/* ── Sichtbarkeit ─────────────────────────────────────────────────────────── */
.hidden     { display: none !important; }
.sr-only    {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Overflow ─────────────────────────────────────────────────────────────── */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* ── Trennlinie ───────────────────────────────────────────────────────────── */
.divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: var(--space-6) 0;
}

.divider-dashed {
    border: none;
    border-top: 2px dashed var(--neutral-200);
    margin: var(--space-5) 0;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * ABSCHNITT 15: ANIMATIONEN
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Skeleton-Puls (Lade-Animation) ───────────────────────────────────────── */
@keyframes skeletonPulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Einblenden von unten ─────────────────────────────────────────────────── */
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Einblenden (nur Opacity) ─────────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Modal-Einblenden ─────────────────────────────────────────────────────── */
@keyframes modalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: scale(0.88) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Toast-Animationen ────────────────────────────────────────────────────── */
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(100px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(100px); }
}

/* ── Schütteln (Fehler-Feedback) ──────────────────────────────────────────── */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
    20%, 40%, 60%, 80% { transform: translateX(6px); }
}

/* ── Check-Pop (Auswahl-Bestätigung) ──────────────────────────────────────── */
@keyframes checkPop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ── Spinner (Lade-Rotation) ──────────────────────────────────────────────── */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Pulse (Aufmerksamkeit) ───────────────────────────────────────────────── */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* ── Animations-Klassen ───────────────────────────────────────────────────── */
.animate-fade-in    { animation: fadeSlideIn 0.4s var(--ease-out); }
.animate-fade       { animation: fadeIn 0.3s ease; }
.animate-shake      { animation: shake 0.45s ease; }
.animate-spin       { animation: spin 1s linear infinite; }
.animate-pulse      { animation: pulse 2s ease-in-out infinite; }


/* ═══════════════════════════════════════════════════════════════════════════════
 * ABSCHNITT 16: RESPONSIVE BREAKPOINTS (Mobile-First)
 * ─────────────────────────────────────────────────────────────────────────────
 * Basis = Mobile (iPhone 17 Pro: 402x874 Viewport)
 * Dann schrittweise für größere Bildschirme erweitern.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Ab 480px: Große Smartphones / Landscape ──────────────────────────────── */
@media (min-width: 480px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Ab 768px: Tablets ────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    :root {
        --text-base: 1rem; /* 16px auf Tablets+ */
    }

    .glass-card {
        padding: var(--space-8);
    }

    .modal-box {
        padding: var(--space-8);
    }

    /* Tabellen statt Karten auf Tablets */
    .mobile-only  { display: none !important; }
    .desktop-only { display: block !important; }
}

/* ── Ab 1024px: Desktop ───────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .glass-card {
        padding: var(--space-8);
    }

    .btn-row {
        flex-direction: row;
    }
}

/* ── Ab 1440px: Große Monitore ────────────────────────────────────────────── */
@media (min-width: 1440px) {
    :root {
        --text-base: 1rem;
    }
}

/* ── Unter 768px: Mobile-spezifisch ───────────────────────────────────────── */
@media (max-width: 767px) {
    .mobile-only  { display: block !important; }
    .desktop-only { display: none !important; }

    /* Buttons auf Mobile: volle Breite */
    .btn-row {
        flex-direction: column-reverse;
    }

    .btn-row .btn {
        width: 100%;
    }

    /* Toast auf Mobile: volle Breite */
    .toast-container {
        left: var(--space-4);
        right: var(--space-4);
    }

    .toast {
        max-width: 100%;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * ABSCHNITT 17: BARRIEREFREIHEIT (Reduced Motion)
 * ─────────────────────────────────────────────────────────────────────────────
 * Respektiert die Systemeinstellung "Bewegung reduzieren".
 * Nutzer mit Gleichgewichtsstörungen oder Epilepsie können
 * in ihren Systemeinstellungen Animationen deaktivieren.
 * ═══════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * ABSCHNITT 18: DRUCK-STILE
 * ─────────────────────────────────────────────────────────────────────────────
 * Optimiert die Ausgabe für Drucker und PDF-Export.
 * Versteckt Navigation, Buttons und interaktive Elemente.
 * ═══════════════════════════════════════════════════════════════════════════════ */
@media print {
    /* Navigation und interaktive Elemente ausblenden */
    .glass-header,
    .glass-sidebar,
    .btn-row,
    .btn,
    .toast-container,
    .modal-overlay,
    footer {
        display: none !important;
    }

    /* Hintergrund und Schatten entfernen (spart Tinte) */
    body {
        background: white !important;
        color: black !important;
    }

    .glass-card,
    .glass-card-strong {
        background: white !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }

    /* Schriftgröße für Druck optimieren */
    body {
        font-size: 12pt;
        line-height: 1.5;
    }

    h1 { font-size: 24pt; }
    h2 { font-size: 20pt; }
    h3 { font-size: 16pt; }

    /* Links als URL anzeigen */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
    }
}