/* ==========================================================================
   Gestaltungsvariablen
   --------------------------------------------------------------------------
   Alle Farben, Abstaende und Schatten der Website an einer Stelle.
   Wer das Erscheinungsbild anpassen moechte, aendert hier – sonst nirgends.
   Die Farben stammen aus dem Wappen des Kulturbereichs (Rot) und dem
   Logo der Stiftungsfamilie BSW & EWH (Rot / Orange).
   ========================================================================== */

:root {
    /* --- Markenfarben ------------------------------------------------- */
    --rot:              #e10916;   /* BSW-Rot, Hauptakzent          */
    --rot-dunkel:       #b3060f;
    --rot-hell:         #fdecec;
    --orange:           #ef7e04;   /* BSW-Orange, Zweitakzent       */
    --orange-hell:      #fff4e4;

    /* --- Neutrale Farben ---------------------------------------------- */
    --anthrazit:        #1f262e;   /* Kopf- und Fusszeile           */
    --anthrazit-hell:   #2c3540;
    --schiefer:         #4a5563;
    --grau:             #6d7885;
    --grau-hell:        #dfe3e8;
    --papier:           #f6f4f1;   /* warmer Seitenhintergrund      */
    --papier-dunkel:    #eceae5;
    --weiss:            #ffffff;

    /* --- Text ---------------------------------------------------------- */
    --text:             #22282f;
    --text-leise:       #5b6572;
    --text-invers:      #f2f4f6;

    /* --- Schrift ------------------------------------------------------- */
    --schrift: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --schrift-titel: "Segoe UI Semibold", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    /* --- Abstaende ----------------------------------------------------- */
    --abstand-xs:  .35rem;
    --abstand-s:   .75rem;
    --abstand-m:   1.25rem;
    --abstand-l:   2rem;
    --abstand-xl:  3.25rem;
    --abstand-xxl: 5rem;

    /* --- Formen -------------------------------------------------------- */
    --radius-s:  6px;
    --radius-m:  12px;
    --radius-l:  20px;

    /* --- Schatten ------------------------------------------------------ */
    --schatten-klein:  0 1px 2px rgba(31, 38, 46, .08), 0 2px 8px rgba(31, 38, 46, .06);
    --schatten-mittel: 0 4px 12px rgba(31, 38, 46, .10), 0 12px 28px rgba(31, 38, 46, .08);
    --schatten-gross:  0 12px 24px rgba(31, 38, 46, .12), 0 28px 60px rgba(31, 38, 46, .14);

    /* --- Bewegung ------------------------------------------------------ */
    --uebergang: 180ms cubic-bezier(.4, 0, .2, 1);

    /* --- Bootstrap-Anpassungen ---------------------------------------- */
    --bs-primary:      #e10916;
    --bs-primary-rgb:  225, 9, 22;
    --bs-body-color:   #22282f;
    --bs-body-font-family: var(--schrift);
    --bs-link-color:   #b3060f;
    --bs-link-color-rgb: 179, 6, 15;
    --bs-link-hover-color: #e10916;
    --bs-border-radius: var(--radius-m);
}

/* Nutzerinnen und Nutzer, die weniger Bewegung wuenschen, bekommen keine. */
@media (prefers-reduced-motion: reduce) {
    :root { --uebergang: 1ms; }

    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}