/* ============================================================
   FARB-KONFIGURATION
   Ändere die Werte hier, um das Farbschema der gesamten
   Website anzupassen. Alle Farben werden automatisch überall
   übernommen.
   ============================================================ */

:root {
    /* === EURE 4 HAUPTFARBEN === */
    --hellblau:     rgb(146, 170, 195);
    --hellgelb:     rgb(243, 224, 105);
    --salbei:       rgb(116, 144, 121);
    --koralle:      rgb(241, 101, 55);

    /* === ABGELEITETE FARBEN (automatisch aus den Hauptfarben) === */

    /* Hintergründe */
    --bg-page:              rgb(254, 251, 240);           /* Seitenhintergrund – warmes Creme */
    --bg-card:              #fff;                          /* Karten / Boxen */
    --bg-nav:               rgb(254, 251, 240);    /* Navigation beim Scrollen – Hellblau */
    --bg-nav-mobile:        rgb(254, 251, 240);    /* Mobile Menü */
    --bg-footer:            rgb(116, 144, 121);               /* Footer – dunkles Salbei */
    --bg-witness-card:      rgba(146, 170, 195, 0.25);    /* Trauzeugen-Karten – Hellblau (wie Navbar) */

    /* Textfarben */
    --text-dark:            #3b3b3b;                       /* Haupttext */
    --text-medium:          #6b6b6b;                       /* Sekundärtext */
    --text-light:           #999;                          /* Labels / dezenter Text */
    --text-white:           #fff;                          /* Text auf dunklem Hintergrund */
    --text-footer:          #ddd;                          /* Footer-Text */

    /* Akzentfarben */
    --accent:               rgb(116, 144, 121);            /* Salbei – Hauptakzent */
    --accent-hover:         rgb(241, 101, 55);             /* Koralle – Hover / Highlights */
    --accent-border:        rgb(254, 251, 240);     /* Dezenter Salbei-Rahmen */

    /* Schatten */
    --shadow-soft:          0 2px 20px rgba(0,0,0,0.06);
    --shadow-medium:        0 4px 15px rgba(0,0,0,0.1);
    --shadow-nav:           0 2px 20px rgba(0,0,0,0.08);

    /* Hero Overlay */
    --hero-overlay-top:     rgba(0, 0, 0, 0.35);
    --hero-overlay-mid:     rgba(0, 0, 0, 0.25);
    --hero-overlay-bottom:  rgba(0, 0, 0, 0.5);
}