/* 1. Schriftarten lokal einbinden */
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter_18pt-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter_18pt-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* 2. Zentrale Variablen (Das Design-System) */
:root {
/* ==========FARBEN ============== */
    /* --- BLAUTÖNE --- */
    --blue-very-light: #e1f5fe;
    --blue-light:      #81d4fa;
    --blue-normal:     #0288d1;
    --blue-dark:       #01579b;
    --blue-very-dark:  #002f6c;

    /* --- ROTTÖNE --- */
    --red-very-light:  #ffebee;
    --red-light:       #ef9a9a;
    --red-normal:      #d32f2f;
    --red-dark:        #c62828;
    --red-very-dark:   #8e0000;

    /* --- GRAUTÖNE --- */
    --gray-very-light: #f5f5f5;
    --gray-light:      #bdbdbd;
    --gray-normal:     #757575;
    --gray-dark:       #424242;
    --gray-very-dark:  #212121;

    /* --- GRÜNTÖNE --- */
    --green-light:     #a5d6a7;
    --green-dark:      #2e7d32;

    /* --- TRANSPARENTES SCHWARZ --- */
    --black-80:        rgba(0, 0, 0, 0.8);
    --black-50:        rgba(0, 0, 0, 0.5);

    /* --- WEITERE STANDARDS --- */
    --white:           #ffffff;
    
/* Z-Index Hierarchie (gemäß WeWeb-Standard) */
    --zi-sidebar:      500;
    --zi-overlay:      499;
    --zi-above-side:   501; /* Für Elemente, die über der Sidebar liegen müssen */
    --zi-content-high: 100; /* Erhöhte Ebene im Inhaltsbereich */
    --zi-content-mid:   51; /* Mittlere Ebene */
    --zi-content-low:   50; /* Basis Ebene für schwebende Elemente */

    /* Schriftarten */
    --font-main: 'Inter', sans-serif;

    /* Breakpoints (Deine WeWeb Werte) */
    --bp-mobile: 480px;
    --bp-tablet: 720px;
    --bp-desktop: 960px;

    /* --- SCHRIFTGRÖSSEN VARIABLEN (Pixel-genau nach WeWeb) --- */

    /* Standard / Big (960px+) */
    --fs-h1: 36px; --fs-h2: 32px; --fs-ppp: 24px; --fs-h3: 28px;
    --fs-pp: 20px; --fs-h4: 24px; --fs-p: 18px;   --fs-h5: 20px;
    --fs-ps: 16px; --fs-h6: 18px; --fs-pss: 14px;
}

/* Medium (720px - 959px) */
@media (max-width: 959px) {
    :root {
        --fs-h1: 32px; --fs-h2: 28px; --fs-ppp: 24px; --fs-h3: 24px;
        --fs-pp: 20px; --fs-h4: 20px; --fs-p: 18px;   --fs-h5: 18px;
        --fs-ps: 16px; --fs-h6: 16px; --fs-pss: 14px;
    }
}

/* Small (480px - 719px) */
@media (max-width: 719px) {
    :root {
        --fs-h1: 28px; --fs-h2: 24px; --fs-ppp: 20px; --fs-h3: 20px;
        --fs-pp: 18px; --fs-h4: 18px; --fs-p: 16px;   --fs-h5: 16px;
        --fs-ps: 14px; --fs-h6: 14px; --fs-pss: 12px;
    }
}

/* xsmall (0px - 479px) */
@media (max-width: 479px) {
    :root {
        --fs-h1: 24px; --fs-h2: 20px; --fs-ppp: 20px; --fs-h3: 18px;
        --fs-pp: 18px; --fs-h4: 16px; --fs-p: 16px;   --fs-h5: 14px;
        --fs-ps: 14px; --fs-h6: 12px; --fs-pss: 12px;
    }
}

/* --- KLASSEN-ZUWEISUNG (Für p, div, span & Co) --- */
.h1, h1 { font-size: var(--fs-h1); font-weight: 700; }
.h2, h2 { font-size: var(--fs-h2); font-weight: 700; }
.h3, h3 { font-size: var(--fs-h3); font-weight: 700; }
.h4, h4 { font-size: var(--fs-h4); font-weight: 700; }
.h5, h5 { font-size: var(--fs-h5); font-weight: 700; }
.h6, h6 { font-size: var(--fs-h6); font-weight: 700; }

.ppp { font-size: var(--fs-ppp); }
.pp  { font-size: var(--fs-pp); }
.p, p { font-size: var(--fs-p); }
.ps  { font-size: var(--fs-ps); }
.pss { font-size: var(--fs-pss); }

* {
    box-sizing: border-box; /* Hilft bei der Layout-Berechnung */
    font-family: var(--font-main);
    margin: 0;
    padding:0;
}

/* Grundlegendes Layout */
body {
    margin: 0;
    padding: 0;
    font-size: var(--fs-p);        /* Dein Standard-Text aus WeWeb (18px) */
    color: var(--gray-very-dark);  /* Nutzt deinen dunklen Grauton */
    line-height: 1.3;
    -webkit-font-smoothing: antialiased; /* Macht die Inter auf dem Mac/iPhone schöner */
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Gemeinsame Sidebar-Eigenschaften */
.sidebar {
    width: 250px;
    position: fixed;
    top: 0;
    height: 100%;
    background: #f4f4f4;
    transition: all 0.3s ease;
    z-index: var(--zi-sidebar);
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Spezifische Positionen */
#sidebar-left {
    left: -250px;
}

#sidebar-right {
    right: -250px;
}

/* Aktiv-Zustände (werden per JS geschaltet) */
#sidebar-left.active {
    left: 0;
}

#sidebar-right.active {
    right: 0;
}

/* Overlay Design */
#overlay-black {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--zi-overlay);
    display: none; /* Standardmäßig aus */
    opacity: 0;
    transition: opacity 0.3s ease;
}

#overlay-black.active {
    display: block;
    opacity: 1;
}