/* ============================================================
   SENZAVI · Design Tokens
   ------------------------------------------------------------
   Layer 1: Roh-Skalen (unsemantisch, reine Werte)
   Layer 2: Semantik-Tokens (Intent, aliasiert Layer 1)
   ------------------------------------------------------------
   Konvention: --sen_<kategorie>-<name>
   ============================================================ */

:root {

    /* ============================================================
       TYPOGRAPHY · Heading Sizes
       ------------------------------------------------------------
       Werte gespiegelt von Elementor Kit (post-5.css):
         .elementor-kit-5 h1…h6
       Breakpoints (gleich wie Elementor):
         Default  > 1024px
         Tablet   ≤ 1024px
         Mobile   ≤ 767px
       h4 nutzt Browser-Default (Kit setzt keine Größe).
       ------------------------------------------------------------
       WICHTIG: Wenn Kit-Werte in Elementor geändert werden,
       hier nachziehen — sonst driften die sen_heading-Klassen
       vom nativen H-Tag weg.
       ============================================================ */

    --sen_fs-h1: 64px;
    --sen_fs-h2: 48px;
    --sen_fs-h3: 32px;
    --sen_fs-h4: 24px;  /* tmp · Kit setzt keinen h4-Wert — sinnvoller Zwischenstep h3↔h5 */
    --sen_fs-h5: 20px;
    --sen_fs-h6: 16px;


    /* ============================================================
       LAYER 2 · SPACING / LAYOUT
       ============================================================ */

    --sen_padding-tablet: 32px;
    --sen_padding-mobil:  16px;


    /* ============================================================
       LAYER 2 · EFFECTS
       ============================================================ */

    --sen_box-shadow: rgba(145, 158, 171, 0.16) 0px 8px 16px 0px;

}


/* ============================================================
   Responsive Heading Sizes — gleiche Breakpoints wie Elementor
   ============================================================ */

@media (max-width: 1024px) {
    :root {
        --sen_fs-h1: 52px;
        --sen_fs-h2: 44px;
        --sen_fs-h3: 30px;
        --sen_fs-h4: 22px;  /* tmp */
    }
}

@media (max-width: 767px) {
    :root {
        --sen_fs-h1: 40px;
        --sen_fs-h2: 32px;
        --sen_fs-h3: 26px;
        --sen_fs-h4: 20px;  /* tmp */
    }
}