/* ==========================================================================
   variables.css – Globale Design-Variablen
   ==========================================================================
   INHALTSVERZEICHNIS
   --------------------------------------------------------------------------
   1. Farben (Original aus alter Website)
   2. Typografie
   3. Spacing-System
   4. Layout-Größen
   5. Marker-Hintergründe
   ========================================================================== */


/* ==========================================================================
   1. FARBEN – ORIGINAL AUS ALTER STYLE.CSS
   --------------------------------------------------------------------------
   Die originalen Farbnamen werden 1:1 übernommen.
   ========================================================================== */

:root {

    /* --- Farbpalette --- */
    --farbe-mint-dunkel:        #4CA8B1;
    --farbe-mint-mittel:        #91D3D0;
    --farbe-mint-hell:          #C4F0EC;

    --farbe-grün-dunkel:        #89B568;
    --farbe-grün-hell:          #9DCA78;

    --farbe-orange:             #FFA780;
    --farbe-gelb:               #ECC23A;
    --farbe-braun:              #C24B40;
    --farbe-blau:               #6BA1FB;

    --farbe-himmel:             #CFE9FF;  /* Navbar, Sektion "Himmel", Footer */
    --farbe-mint:               #C4F0EC;  /* Mint-Hintergrund, Hero-Verlauf */
    --farbe-mint-kraeftig:      #3CACC2;  /* Buttons, Akzent */
    --farbe-mint-sehr-kraeftig: #91D3D0;  /* Marker-Akzent */
    --farbe-pfirsich:           #FFA780;  /* Sektion "Wer wir sind" */

    /* Textfarben */
    --color-text: #333333;
    --color-text-light: #666666;
    --color-white: #ffffff;

    /* Hintergründe */
    --color-bg: #ffffff;
    --color-bg-light: #f7f7f7;

    /* Panels & Borders */
    --color-panel: #ffffff;
    --color-border: #e0e0e0;
}


/* ==========================================================================
   2. TYPOGRAFIE
   ========================================================================== */

:root {
    --font-family-base: 'Lato', sans-serif;
    --font-family-title: 'Playfair Display', serif;

    --font-size-base: 1rem;
    --font-size-small: 0.9rem;
    --font-size-large: 1.2rem;
    --font-size-title: 2.4rem;
    --font-size-section-title: 2rem;
}


/* ==========================================================================
   3. SPACING SYSTEM
   ========================================================================== */

:root {
    --spacing-xs: 0.4rem;
    --spacing-s: 0.8rem;
    --spacing-m: 1.2rem;
    --spacing-l: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;
}


/* ==========================================================================
   4. LAYOUT-GRÖSSEN
   ========================================================================== */

:root {
    --container-width: 1200px;

    --radius-s: 6px;
    --radius-m: 10px;
    --radius-l: 14px;

    --shadow-soft: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-medium: 0 8px 20px rgba(0,0,0,0.12);
}


/* ==========================================================================
   5. MARKER-HINTERGRÜNDE
   ========================================================================== */

:root {
    --marker-purple: url("../img/marker-bg.png");
    --marker-mint:   url("../img/marker-bg-mint.png");
}