/* ===============================
   CSS Variablen (Mobile-First)
   =============================== */
:root {
    /* Farben */
    --color-primary: #020c79;
    --color-secondary: #EEEEFF;
    --color-bg: #edecda;
    --color-text: #4657a2;
    --color-info-bg: #c15432;
    --color-info-text: floralwhite;

    /* Schriftgrößen */
    --font-size-h1: 1.4rem;
    --font-size-h2: 1.2rem;
    --font-size-h3: 1.1rem;
    --font-size-h4: 1rem;
    --font-size-h5: 1rem;
    --font-size-base: 1rem;
    --font-size-sm: 0.9rem;
    /* Abstände */
    --padding-base: 1em;
    --padding-sm: 0.5em;
    --margin-base: 0.5em;

    /* Border Radius */
    --border-radius-lg: 2rem;
    --border-radius-sm: 0.2rem;

    /* Grid */
    --grid-columns-mobile: repeat(5, 1fr);
    --grid-columns-tablet: repeat(7, 1fr);
    --grid-columns-desktop: repeat(13, 1fr);
    --grid-gap-mobile: 0.5rem;
    --grid-gap-tablet: 0.7rem;
    --grid-gap-desktop: 1rem;

    /* Box Widths */
    --textbox-width-mobile: 80%;
    --textbox-width-tablet: 100%;
    --textbox-width-desktop: 100%;
    --image-width-mobile: 80vw;
    --image-width-tablet: 80vw;
    --image-width-desktop: 80vw;
    --textbox-max-width: 90%;
    --image-max-width: 90%;

    /* Header/Footer Padding */
    --header-height-desktop: 6.8rem;
    --header-padding-mobile: 1rem;
    --header-padding-tablet: 1rem;
    --header-padding-desktop: 0.6rem;
    --footer-padding-mobile: 0.5rem;
    --footer-padding-tablet: 0.5rem;
    --footer-padding-desktop: 1.5rem;

    /* Header/Footer Border */
    --header-border-bottom-mobile: 0.1rem solid;
    --header-border-bottom-tablet: 0.2rem solid;
    --header-border-bottom-desktop: 0.3rem solid;
    --footer-border-top-mobile: 0.1rem solid;
    --footer-border-top-tablet: 0.2rem solid;
    --footer-border-top-desktop: 0.2rem solid;
}