/* ==========================================================================
   custom.css — Projektkonfiguration: Rechtsanwalt Riepenhoff
   NUR CSS Custom Properties (:root {}).
   Wird ZUERST geladen (vor core.css), damit alle Variablen beim Parsen
   der Stile bereits verfügbar sind.

   Reihenfolge: custom.css → core.css → overrides.css
   ========================================================================== */

:root {

    /* =========================================================================
       PROJEKT-EINSTELLUNGEN — wird pro Projekt angepasst
       ========================================================================= */

    /* --- Primärfarben ------------------------------------------------------ */
    --color-primary:      #3f5366;        /* Hauptfarbe Teal */
    --color-primary-dark: #2f343a;        /* Hover-Dunkelton */
    --color-split:        #3c3c3b;        /* Split-Sektion: linke Hälfte dunkel */
    --color-secondary:    #f5f5f5;
    --color-text:         #333333;        /* Standard-Fließtext */
    --color-border:       #d4d4d4;
    --color-white:        #ffffff;
    --color-gray:         #f1f1f1;        /* Sektion-Hintergrund hell */
    --color-gray-dark:    #808080;
    --color-lightblue:    #d8e0eb;        /* Lichtblauer Hintergrund */
    --color-success:      #2e7d4f;        /* Valid-Zustand Formular */
    --color-gradient:       linear-gradient(to right, #d8e0eb, #ffffff, #d8e0eb);
    --border-base:        1px solid var(--color-border);
    --border-radius:      10px;

    /* --- Schriftarten ------------------------------------------------------ */
    /* Einzige Quelle — config.php liest per Regex für den Font-Load-Link      */
    --font-base: "Outfit", verdana, sans-serif;   /* Fließtext  */
    --font-ui:   "Outfit", serif;             /* Überschriften */

    /* --- Header-Hintergrundbild -------------------------------------------- */
    /* Einzige Quelle — Dateiname in img/ anpassen, Pfad ../img/ beibehalten   */
    --header-image: url('../img/header.jpg');

    /* --- Header-Overlay ---------------------------------------------------- */
    /* Farbe + Deckkraft frei wählbar, z.B. rgba(0,121,153,0.5) für Teal      */
    --header-overlay: rgba(28, 37, 39, 0);

    /* --- Logo -------------------------------------------------------------- */
    --logo-width:        450px;   /* Header Desktop */
    --logo-width-tablet: 420px;   /* Header Tablet (≤980px) */
    --logo-width-mobil:  400px;   /* Header Mobil */
    --logo-width-footer:  50%;   /* Header Mobil */
    /* Footer-Logo: Größe wird durch col-3 im Footer gesteuert */


    /* =========================================================================
       TECHNISCHE EINSTELLUNGEN — selten geändert
       ========================================================================= */

    /* --- Typografische Größen (clamp) -------------------------------------- */
    /*     375px   768px   980px  1440px                                       */
    --line-height:    1.6;
    --lh-sm:          1.5;
    --lh-lg:          1.7;

    --fs-sm:          clamp(0.875rem, 1.5vw, 1rem);               /*  14px    14px    15px    16px  */
    --fs-md:          clamp(1rem, 2vw, 1.125rem);                  /*  16px    16px    18px    18px  */
    --fs-lg:           clamp(1.25rem, 0.6vw + 1.11rem, 1.65rem);  /*  20px    22px    24px    26px  */

--font-size-hero:     clamp(1.3rem, 1.55vw + 0.67rem, 2.08rem);
    --font-size-h1:   clamp(2.1rem, 6vw, 3.6rem);                 /*  34px    46px    59px→  58px  */
    --font-size-h2:   clamp(1.5rem, 1.79vw + 0.77rem, 2.4rem);   /*  24px    26px    30px    38px  */
    --font-size-h3:   clamp(1.25rem, 0.6vw + 1.11rem, 1.65rem);  /*  20px    22px    24px    26px  */
    --font-size-h4:   clamp(1.2rem, 2.4vw, 1.35rem);              /*  19px    19px    22px→  22px  */
    --font-size-h5:   clamp(1.05rem, 1.8vw, 1.2rem);              /*  17px    17px    18px    19px  */
    --font-size-h6:   clamp(0.975rem, 1.5vw, 1.05rem);            /*  16px    16px    17px→  17px  */

    /* --- Überschriften: Zeilenhöhen ---------------------------------------- */
    --lh-h1: 1.3;
    --lh-h2: 1.45;
    --lh-h3: 1.5;
    --lh-h4: 1.55;
    --lh-h5: 1.6;
    --lh-h6: 1.7;

    --h-upper: uppercase;

    /* --- Layout / Container ------------------------------------------------ */
    --container-max:  1320px;
    --container:      1200px;
    --container-wide: 1600px;
    --radius:         12px;

    /* --- Abstände ---------------------------------------------------------- */
    --spacing-xs:  clamp(0.25rem, 0.4vw, 0.375rem);   /*  4– 6 px */
    --spacing-sm:  clamp(0.375rem, 0.75vw, 0.5rem);   /*  6– 8 px */
    --spacing-md:  clamp(0.75rem, 1.5vw, 1rem);       /* 12–16 px */
    --spacing-lg:  clamp(1rem, 2vw, 1.5rem);          /* 16–24 px */
    --spacing-xl:  clamp(1.75rem, 4vw, 3rem);         /* 28–48 px */
    --spacing-2xl: clamp(3rem, 6.5vw, 5rem);          /* 48– 80 px */
    --spacing-3xl: clamp(12.5rem, 21vw, 18.75rem);    /* 200–300 px — Parallax */
    --spacing-4xl: clamp(14rem, 23.8vw, 21.875rem);

    /* --- Section-Abstände (vertikal) --------------------------------------- */
    --section-pad-lg: 140px;
    --section-pad-md:  70px;
    --section-pad-sm:  30px;
    --section-pad-xsm:  10px;

    /* --- Raster-Gap -------------------------------------------------------- */
    --row-gap: clamp(1rem, 1.5vw + 0.65rem, 2rem); /* 375px=16px · 768px=22px · 980px=25px · 1440px=32px */

    /* --- Schatten ---------------------------------------------------------- */
    --shadow-sm: 0 0 8px 0 rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);

    /* --- Button ------------------------------------------------------------ */
    --button-padding-y: 7px;
    --button-padding-x: 16px;

    /* --- Listen-Marker ----------------------------------------------------- */
    --marker-content: "» ";
    --marker-color:   var(--color-text);
    --marker-size:    1em;

    /* --- Navigation -------------------------------------------------------- */
    --nav-height: 48px;

}

/* --- Schriftgrößen Tablet/Mobil (≤ 980 px) -------------------------------- */
@media (max-width: 980px) {
    :root {
        --font-size-h1:   clamp(1.5rem, 4vw, 2.25rem);      /* 24–36 px */
        --font-size-h3:   clamp(1rem, 2vw, 1.25rem);     /* 19.2–28.8 px */
        --font-size-h4:   clamp(1rem, 2vw, 1.25rem);        /* 16–20 px */
        --font-size-h5:   1rem;                             /* 16 px    */
        --font-size-h6:   1rem;                             /* 16 px    */
    }
}