/* SSC Design System - generiert aus den Bricks-Variablen. Nicht von Hand editieren. */

:root {
    --primary: #BD9E46;
    --secondary: #21BEBC;
    --tertiary: #3A3A3A;
    --text-body: #4B4F58;
    --text-emphasised: #228380;
    --text-inverse: #FFFFFF;
    --surface-page: #FFFFFF;
    --surface-raised: #F3EEE3;
    --surface-muted: #F2F4F5;
    --error: #B3261E;
    --primary-soft: color-mix(in oklab, var(--primary), white 35%);
    --primary-strong: color-mix(in oklab, var(--primary), black 25%);
    --primary-a20: color-mix(in srgb, var(--primary) 20%, transparent);
    --primary-a40: color-mix(in srgb, var(--primary) 40%, transparent);
    --secondary-soft: color-mix(in oklab, var(--secondary), white 35%);
    --secondary-strong: color-mix(in oklab, var(--secondary), black 25%);
    --secondary-a20: color-mix(in srgb, var(--secondary) 20%, transparent);
    --secondary-a40: color-mix(in srgb, var(--secondary) 40%, transparent);
    --tertiary-soft: color-mix(in oklab, var(--tertiary), white 35%);
    --tertiary-strong: color-mix(in oklab, var(--tertiary), black 25%);
    --tertiary-a20: color-mix(in srgb, var(--tertiary) 20%, transparent);
    --tertiary-a40: color-mix(in srgb, var(--tertiary) 40%, transparent);
    --border-subtle: color-mix(in srgb, var(--tertiary) 15%, transparent);
    --font-display: 'Satisfy', cursive;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Google Sans', sans-serif;
    --font-quote: Georgia, 'Times New Roman', serif;
    --fs-display: clamp(2.625rem, 3.2vw, 5rem);
    --fs-section-heading: clamp(2.125rem, 5vw, 3.5rem);
    --fs-subheading: clamp(1rem, 1.6vw, 2rem);
    --fs-body: clamp(1rem, 1.6vw, 1.3rem);
    --fs-eyebrow: clamp(1rem, 1vw, 1.3rem);
    --fs-button: clamp(1.125rem, calc(0.25vw + 1.075rem), 1.3rem);
    --text-xs: clamp(0.694rem, calc(0.05vw + 0.684rem), 0.732rem);
    --text-s: clamp(0.833rem, calc(0.2vw + 0.793rem), 0.975rem);
    --text-m: clamp(1rem, calc(0.43vw + 0.914rem), 1.3rem);
    --text-l: clamp(1.2rem, calc(0.76vw + 1.048rem), 1.733rem);
    --text-xl: clamp(1.44rem, calc(1.24vw + 1.191rem), 2.31rem);
    --text-2xl: clamp(1.728rem, calc(1.93vw + 1.342rem), 3.079rem);
    --text-3xl: clamp(2.074rem, calc(2.9vw + 1.493rem), 4.105rem);
    --text-4xl: clamp(2.488rem, calc(4.26vw + 1.636rem), 5.471rem);
    --space-section: clamp(3rem, 8vw, 6rem);
    --space-inner-lg: clamp(2rem, 5vw, 4rem);
    --space-inner-md: clamp(1.25rem, 3vw, 2.5rem);
    --space-inner-sm: clamp(0.75rem, 2vw, 1.5rem);
    --card-gap: clamp(1rem, 3vw, 2rem);
    --space-3xs: clamp(0.41rem, calc(0.13vw + 0.384rem), 0.5rem);
    --space-2xs: clamp(0.512rem, calc(0.28vw + 0.456rem), 0.707rem);
    --space-xs: clamp(0.64rem, calc(0.51vw + 0.537rem), 1rem);
    --space-s: clamp(0.8rem, calc(0.88vw + 0.624rem), 1.414rem);
    --space-m: clamp(1rem, calc(1.43vw + 0.714rem), 2rem);
    --space-l: clamp(1.25rem, calc(2.25vw + 0.799rem), 2.828rem);
    --space-xl: clamp(1.563rem, calc(3.48vw + 0.866rem), 3.999rem);
    --space-2xl: clamp(1.953rem, calc(5.29vw + 0.896rem), 5.654rem);
    --space-3xl: clamp(2.441rem, calc(7.93vw + 0.855rem), 7.995rem);
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 20px;
    --radius-card: 25px;
    --radius-full: 999px;
    --shadow-s: 0 1.5px 3px color-mix(in srgb, var(--tertiary) 18%, transparent);
    --shadow-m: 0 2px 6px color-mix(in srgb, var(--tertiary) 18%, transparent);
    --shadow-l: 0 3px 12px color-mix(in srgb, var(--tertiary) 18%, transparent);
}

/* Schriftzuordnung */
body { font-family: var(--font-body); color: var(--text-body); font-size: 1rem; line-height: 1.857; }
h1 { font-family: var(--font-display); font-weight: 400; text-transform: none; }
h2 { font-family: var(--font-heading); text-transform: none; }
h3, h4, h5, h6 { font-family: var(--font-body); }

/* Zitat-Serife: Offcanvas, Testimonials, Zitatblock */
.font-quote { font-family: var(--font-quote); }

/* Hero: full-width, daher bezieht sich vw auf den echten Viewport statt auf den Container */
.ssc-hero-wrap {
    --fs-display: clamp(2.625rem, 3.2vw, 5rem);
    --fs-eyebrow: clamp(1rem, 1vw, 1.25rem);
    --fs-subheading: clamp(1.125rem, 1.8vw, 1.75rem);
}

/* Metallischer Button-Glanz. Werte sind komponenteneigen und bewusst keine Tokens. */
.btn-shine {
    background-image: linear-gradient(105deg,
        var(--primary) 0%, var(--primary) 35%,
        var(--primary-soft) 50%,
        var(--primary) 65%, var(--primary) 100%);
    background-size: 300% 100%;
    background-position: 100% center;
    transition: background-position .6s ease, transform .5s ease;
    will-change: transform;
}
.btn-shine:hover { background-position: 0% center; transform: scale(1.05); }
.btn-shine--subtle:hover { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
    .btn-shine { transition: none; }
    .btn-shine:hover, .btn-shine--subtle:hover { transform: none; }
}