/* ==========================================================
   FOUNDATION
========================================================== */

:root {

    /* Layout */
    --container-xs: 720px;
    --container-sm: 960px;
    --container-md: 1200px;
    --container-lg: 1440px;
    --container-content: 1440px;
    --container-wide: 1440px;
    --container-hero: 1520px;

    --container-padding: clamp(1rem, 3vw, 2rem);
    --eyebrow-padding: .45rem .95rem;

    /* Radius */
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;
    --radius-xl: 48px;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 8rem;
    --section-gap: clamp(2rem, 4vw, 3rem);
    --hero-space-top: 3rem;
    --hero-space-bottom: 2rem;

    /* Typography */
    --font-hero: clamp(2rem, 3vw, 3rem);
    --font-h1: clamp(1.9rem, 2.5vw, 2.7rem);
    --font-h2: clamp(1.6rem, 2vw, 2.2rem);
    --font-h3: clamp(1.25rem, 1.5vw, 1.6rem);
    --font-body: clamp(1rem, 1.1vw, 1.125rem);

    /* Shadows */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.12);
    --shadow-navigation-menu:
        0 28px 56px -16px rgba(0, 0, 0, .20),
        0 12px 24px -12px rgba(0, 0, 0, .12);
    --shadow-glass:
        0 8px 30px rgba(0, 0, 0, .04),
        0 18px 60px rgba(255, 255, 255, .08);
    --shadow-glass-hover:
        0 12px 36px rgba(0, 0, 0, .10),
        0 18px 70px rgba(255, 255, 255, .12);
    --shadow-card-hover:
        0 18px 42px rgba(0, 0, 0, .12);
    --shadow-button:
        0 8px 20px rgba(242, 154, 58, .22);
    --shadow-button-hover:
        0 14px 34px rgba(242, 154, 58, .35);
    --shadow-button-secondary:
        0 8px 24px rgba(255, 255, 255, .08),
        0 0 24px rgba(255, 255, 255, .05);
    --shadow-button-secondary-hover:
        0 12px 32px rgba(255, 255, 255, .12),
        0 0 40px rgba(255, 255, 255, .08);

    /* Glass */
    --glass-bg: rgba(255, 255, 255, 0.14);
    --glass-bg-strong: rgba(255, 255, 255, 0.24);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-blur: blur(16px);

    /* Motion */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.45s ease;

    /* Layers */
    --z-background: -2;
    --z-overlay: -1;
    --z-base: 1;
    --z-header: 1000;
    --z-modal: 9999;

    /* Content Größe */
    --content-width: 1200px;
    --header-height: 68px;

    /* Semantic Surfaces */
    --surface-header: rgba(255, 255, 255, .06);
    --surface-header-scrolled: rgba(255, 255, 255, .14);
    --surface-footer: rgba(255, 255, 255, .12);

    --surface-card: rgba(255, 255, 255, .84);
    --surface-card-soft: rgba(255, 255, 255, .78);
    --surface-card-hover: rgba(255, 255, 255, .9);

    --surface-chip: rgba(255, 255, 255, .35);
    --surface-social: rgba(255, 255, 255, .16);

    --border-soft: rgba(255, 255, 255, .10);
    --border-card: rgba(255, 255, 255, .75);

    --text-strong: #0f172a;
    --text-soft: rgba(31, 41, 55, .72);
    --text-invert: #ffffff;
    --text-on-hero: rgba(255, 255, 255, .92);

    /* Textmakierung */
    --selection-bg: rgba(242, 154, 58, .25);
    --selection-text: var(--text-strong);

    /* Link-Farbe */
    --link-color: var(--wp--preset--color--primary);
    --link-hover: var(--wp--preset--color--primary-hover);
}

/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    position: relative;

    color: var(--wp--preset--color--text);
    line-height: 1.6;
}

img {
    max-width: 100%;
    display: block;
}

.site-main {
    width: 100%;
    max-width: none;
}

.site-main.is-layout-constrained {
    max-width: none;
}

/* ==========================================================
   TEXTMARKIERUNG
========================================================== */

::selection {
    background: var(--selection-bg);
    color: var(--selection-text);
}

::-moz-selection {
    background: var(--selection-bg);
    color: var(--selection-text);
}

/* ==========================================================
   BACKGROUND SYSTEM
========================================================== */

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    position: relative;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media (max-width: 900px) {
    body {
        background-attachment: scroll;
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }
}

body::before {
    content: "";
    position: fixed;
    inset: 0;

    background: rgba(255, 255, 255, .18);

    pointer-events: none;
    z-index: 0;
}

@media (max-width:900px) {
    body::before {
        background:
            linear-gradient(rgba(255, 255, 255, .22),
                rgba(255, 255, 255, .22));
        backdrop-filter: blur(1px) saturate(.9);
        -webkit-backdrop-filter: blur(1px) saturate(.9);
    }
}

.wp-site-blocks {
    position: relative;
    z-index: 1;
    overflow: visible;
}

/* ==========================================================
   Sticky Footer
========================================================== */

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
}

.wp-site-blocks {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    padding-top: var(--header-height);
}

/* Nur main soll wachsen */
.wp-site-blocks>main,
.wp-site-blocks>.site-main {
    flex: 1 0 auto;
}

/* Footer nach unten */
.wp-site-blocks>.site-footer {
    margin-top: auto;
}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-top: 0;
}

h1 {
    font-size: var(--font-h1);
}

h2 {
    font-size: var(--font-h2);
}

h3 {
    font-size: var(--font-h3);
}

p {
    font-size: var(--font-body);
}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {

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

.skip-link {
    position: fixed;
    top: .75rem;
    left: .75rem;

    transform: translateY(-150%);

    z-index: 1000000;

    padding: .85rem 1.1rem;

    border-radius: 999px;

    background: var(--wp--preset--color--base);

    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.skip-link:focus-visible {
    transform: translateY(0);

    outline: 3px solid var(--wp--preset--color--primary);
    outline-offset: 4px;

    box-shadow: 0 0 0 6px rgba(242, 154, 58, .22);
}

/* ==========================================================
   Dark Mode
========================================================== */

/*@media (prefers-color-scheme: dark) {

    :root {
        --glass-bg: rgba(20, 20, 20, .35);
        --glass-bg-strong: rgba(30, 30, 30, .55);

        --glass-border: rgba(255, 255, 255, .08);

        --shadow-sm: 0 4px 12px rgba(0, 0, 0, .4);
        --shadow-md: 0 14px 40px rgba(0, 0, 0, .45);
        --shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);

        --shadow-glass:
            0 8px 30px rgba(0, 0, 0, .32),
            0 0 60px rgba(15, 23, 42, .32);
        --shadow-glass-hover:
            0 12px 40px rgba(0, 0, 0, .45),
            0 0 80px rgba(15, 23, 42, .45);
        --shadow-button:
            0 10px 24px rgba(242, 154, 58, .22);
        --shadow-button-hover:
            0 14px 34px rgba(242, 154, 58, .30);

        --surface-header: rgba(15, 23, 42, .50);
        --surface-header-scrolled: rgba(15, 23, 42, .68);
        --surface-footer: rgba(15, 23, 42, .68);

        --surface-card: rgba(15, 23, 42, .72);
        --surface-card-soft: rgba(15, 23, 42, .64);
        --surface-card-hover: rgba(15, 23, 42, .82);

        --surface-chip: rgba(255, 255, 255, .08);
        --surface-social: rgba(255, 255, 255, .08);

        --border-soft: rgba(255, 255, 255, .12);
        --border-card: rgba(255, 255, 255, .12);

        --text-strong: #f8fafc;
        --text-soft: rgba(248, 250, 252, .72);
        --text-invert: #ffffff;
        --text-on-hero: rgba(255, 255, 255, .92);

        --link-color: #FFB866;
        --link-hover: #FFC985;
    }

    body {
        background-color: var(--wp--preset--color--surface-dark);
        color: var(--wp--preset--color--text-dark);
    }

    body::before {
        background:
            rgba(0, 0, 0, .32);
    }

    .site-header,
    .site-footer {
        background: rgba(20, 20, 20, .55);
    }

    .card--solid {
        background: #1f2937;
    }

    .footer-quote {
        color:
            rgba(255, 255, 255, .78);
    }

    .footer-quote::before,
    .footer-quote::after {

        color:
            var(--wp--preset--color--primary);

        opacity: .85;
    }
}*/