/* Main Stylesheet */

:root {
    --outer-width: 1600px;
    --inner-width: 1400px;
}

@media (max-width: 1440px) {
    :root {
        --inner-width: 1100px;
        --outer-width: 1280px;
    }
}

html,
body {
    background: var(--color-brand-background);
    font-family: var(--font-text);
}

#smooth-content {
    position: relative;
}

#smooth-content::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(#1D1D1BED, #1D1D1BED), url(/app/uploads/2026/04/flakes-white.png);
    background-size: auto, 558px 303px;
    background-position: 0px 0px, 0 0;
    background-repeat: repeat, repeat;
    transform: translateZ(0);
}

main {
    overflow-x: clip;
}


/* Page transitions */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: 400ms ease-in-out slide-to-left;
}
::view-transition-new(root) {
    animation: 400ms ease-in-out slide-from-right;
}

@keyframes slide-to-left {
    to { transform: translateX(-40px); opacity: 0; }
}
@keyframes slide-from-right {
    from { transform: translateX(40px); opacity: 0; }
}

.outer-width {
    max-width: var(--outer-width);
    width: 100%;
    margin-inline: auto;
}

.inner-width {
    max-width: var(--inner-width);
    width: 100%;
    margin-inline: auto;
}
.inner-width > * {
    min-width: 0;
}

/* Prevent margin-collapse from inner sections pushing smooth-content down.
   Without this, a margin-top on the first section collapses through main →
   smooth-content and causes GSAP ScrollSmoother to miscalculate scroll height. */
#smooth-content {
    display: flow-root;
}

/* HAPPY BUTTON */

.happy-button {
    --happy-btn-color: var(--color-brand-primary, #E30613);
    --happy-btn-text: white;

    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 2rem;
    border: none;
    background: none;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-headline);
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.001rem;
    color: var(--happy-btn-text);
    will-change: transform;
    transition: transform 0.2s ease, color 0.2s ease;
}

.happy-button::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--happy-btn-color);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 207 47' preserveAspectRatio='none'%3E%3Cpath d='M7.45533 0.294626C7.45533 0.294626 123.055 0.235047 138.454 0.0558629C153.852 -0.123321 198.854 0.175468 200.453 0.294626C202.052 0.413783 206.853 0.294626 206.853 5.67015C206.853 11.0457 206.053 25.3803 206.453 26.0971C206.852 26.8139 207.453 37.8636 206.453 41.2082C205.809 43.3584 205.829 44.4967 205.923 45.0351C206.006 45.5014 205.321 45.9525 204.084 46.2382C202.511 46.6011 199.728 46.9402 194.853 46.882C184.853 46.7624 138.053 46.7028 136.054 46.8224C134.055 46.942 80.0549 47.1213 67.6543 46.882C55.254 46.6428 31.0547 46.5236 22.0547 46.7028C13.0548 46.882 6.25534 47.0017 5.05538 46.8224C3.85539 46.6432 -0.544073 47.0016 0.0559218 42.9399C0.655916 38.8782 2.8549 18.9297 2.05541 13.9126C1.25591 8.89544 2.6554 6.98401 2.2549 5.96893C1.85441 4.95385 1.05492 0.17502 7.45533 0.294626Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 207 47' preserveAspectRatio='none'%3E%3Cpath d='M7.45533 0.294626C7.45533 0.294626 123.055 0.235047 138.454 0.0558629C153.852 -0.123321 198.854 0.175468 200.453 0.294626C202.052 0.413783 206.853 0.294626 206.853 5.67015C206.853 11.0457 206.053 25.3803 206.453 26.0971C206.852 26.8139 207.453 37.8636 206.453 41.2082C205.809 43.3584 205.829 44.4967 205.923 45.0351C206.006 45.5014 205.321 45.9525 204.084 46.2382C202.511 46.6011 199.728 46.9402 194.853 46.882C184.853 46.7624 138.053 46.7028 136.054 46.8224C134.055 46.942 80.0549 47.1213 67.6543 46.882C55.254 46.6428 31.0547 46.5236 22.0547 46.7028C13.0548 46.882 6.25534 47.0017 5.05538 46.8224C3.85539 46.6432 -0.544073 47.0016 0.0559218 42.9399C0.655916 38.8782 2.8549 18.9297 2.05541 13.9126C1.25591 8.89544 2.6554 6.98401 2.2549 5.96893C1.85441 4.95385 1.05492 0.17502 7.45533 0.294626Z'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    transition: background-color 0.2s ease;
}

.happy-button::after {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: -2;
    background-color: var(--happy-btn-color);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 207 47' preserveAspectRatio='none'%3E%3Cpath d='M7.45533 0.294626C7.45533 0.294626 123.055 0.235047 138.454 0.0558629C153.852 -0.123321 198.854 0.175468 200.453 0.294626C202.052 0.413783 206.853 0.294626 206.853 5.67015C206.853 11.0457 206.053 25.3803 206.453 26.0971C206.852 26.8139 207.453 37.8636 206.453 41.2082C205.809 43.3584 205.829 44.4967 205.923 45.0351C206.006 45.5014 205.321 45.9525 204.084 46.2382C202.511 46.6011 199.728 46.9402 194.853 46.882C184.853 46.7624 138.053 46.7028 136.054 46.8224C134.055 46.942 80.0549 47.1213 67.6543 46.882C55.254 46.6428 31.0547 46.5236 22.0547 46.7028C13.0548 46.882 6.25534 47.0017 5.05538 46.8224C3.85539 46.6432 -0.544073 47.0016 0.0559218 42.9399C0.655916 38.8782 2.8549 18.9297 2.05541 13.9126C1.25591 8.89544 2.6554 6.98401 2.2549 5.96893C1.85441 4.95385 1.05492 0.17502 7.45533 0.294626Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 207 47' preserveAspectRatio='none'%3E%3Cpath d='M7.45533 0.294626C7.45533 0.294626 123.055 0.235047 138.454 0.0558629C153.852 -0.123321 198.854 0.175468 200.453 0.294626C202.052 0.413783 206.853 0.294626 206.853 5.67015C206.853 11.0457 206.053 25.3803 206.453 26.0971C206.852 26.8139 207.453 37.8636 206.453 41.2082C205.809 43.3584 205.829 44.4967 205.923 45.0351C206.006 45.5014 205.321 45.9525 204.084 46.2382C202.511 46.6011 199.728 46.9402 194.853 46.882C184.853 46.7624 138.053 46.7028 136.054 46.8224C134.055 46.942 80.0549 47.1213 67.6543 46.882C55.254 46.6428 31.0547 46.5236 22.0547 46.7028C13.0548 46.882 6.25534 47.0017 5.05538 46.8224C3.85539 46.6432 -0.544073 47.0016 0.0559218 42.9399C0.655916 38.8782 2.8549 18.9297 2.05541 13.9126C1.25591 8.89544 2.6554 6.98401 2.2549 5.96893C1.85441 4.95385 1.05492 0.17502 7.45533 0.294626Z'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.happy-button:hover::after {
    opacity: 1;
}

.happy-button--primary   { --happy-btn-color: var(--color-brand-primary,    #E30613); }
.happy-button--secondary { --happy-btn-color: var(--color-brand-secondary,  #87A2D7); }
.happy-button--tertiary  { --happy-btn-color: var(--color-brand-tertiary,   #FCBC0C); }
.happy-button--dark      { --happy-btn-color: var(--color-brand-background, #1D1D1B); }
.happy-button--white     { --happy-btn-color: #ffffff; --happy-btn-text: var(--color-brand-primary, #E30613); }

.happy-button:hover {
    transform: scale(1.04);
    color: var(--happy-btn-color);
}

.happy-button:hover::before {
    background-color: var(--happy-btn-text);
}

@media (min-width: 1024px) {
    .happy-button { font-size: 1.5rem; }
}

@media (min-width: 1280px) {
    .happy-button { font-size: 1.6rem; }
}

/* SORTIMENT */

.happy-smile {
    position: absolute;
    right: 2rem;
    top: unset;
    bottom: -4rem;
    width: 130px;
    
    @media (min-width: 750px) {
        top: -4rem;
        width: unset;
    }
}


/* @layer base { */
    h1, h2, h3, h4, h5, h6 {
        line-height: 0.95;
        margin: 0;
        /* font-size: inherit; */
    }
/* } */

.oxy-text.text-xl {
    line-height: 1.6;
}


/* FLUENT FORMS — global styling (footer overrides with higher specificity) */

.ff-el-input--content:not(:has(.ff-el-hcaptcha)) {
    position: relative;
    isolation: isolate;
}

.ff-el-input--content:not(:has(.ff-el-hcaptcha))::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: #ffffff;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 207 47' preserveAspectRatio='none'%3E%3Cpath d='M7.45533 0.294626C7.45533 0.294626 123.055 0.235047 138.454 0.0558629C153.852 -0.123321 198.854 0.175468 200.453 0.294626C202.052 0.413783 206.853 0.294626 206.853 5.67015C206.853 11.0457 206.053 25.3803 206.453 26.0971C206.852 26.8139 207.453 37.8636 206.453 41.2082C205.809 43.3584 205.829 44.4967 205.923 45.0351C206.006 45.5014 205.321 45.9525 204.084 46.2382C202.511 46.6011 199.728 46.9402 194.853 46.882C184.853 46.7624 138.053 46.7028 136.054 46.8224C134.055 46.942 80.0549 47.1213 67.6543 46.882C55.254 46.6428 31.0547 46.5236 22.0547 46.7028C13.0548 46.882 6.25534 47.0017 5.05538 46.8224C3.85539 46.6432 -0.544073 47.0016 0.0559218 42.9399C0.655916 38.8782 2.8549 18.9297 2.05541 13.9126C1.25591 8.89544 2.6554 6.98401 2.2549 5.96893C1.85441 4.95385 1.05492 0.17502 7.45533 0.294626Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 207 47' preserveAspectRatio='none'%3E%3Cpath d='M7.45533 0.294626C7.45533 0.294626 123.055 0.235047 138.454 0.0558629C153.852 -0.123321 198.854 0.175468 200.453 0.294626C202.052 0.413783 206.853 0.294626 206.853 5.67015C206.853 11.0457 206.053 25.3803 206.453 26.0971C206.852 26.8139 207.453 37.8636 206.453 41.2082C205.809 43.3584 205.829 44.4967 205.923 45.0351C206.006 45.5014 205.321 45.9525 204.084 46.2382C202.511 46.6011 199.728 46.9402 194.853 46.882C184.853 46.7624 138.053 46.7028 136.054 46.8224C134.055 46.942 80.0549 47.1213 67.6543 46.882C55.254 46.6428 31.0547 46.5236 22.0547 46.7028C13.0548 46.882 6.25534 47.0017 5.05538 46.8224C3.85539 46.6432 -0.544073 47.0016 0.0559218 42.9399C0.655916 38.8782 2.8549 18.9297 2.05541 13.9126C1.25591 8.89544 2.6554 6.98401 2.2549 5.96893C1.85441 4.95385 1.05492 0.17502 7.45533 0.294626Z'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
}

.fluentform .ff-el-form-control {
    border: none;
    padding: 1rem 1.5rem;
    background: transparent !important;
    outline: none;
    box-shadow: none;
    font-family: var(--font-text);
    color: #333333;
}

.frm-fluent-form .ff-t-container {
    gap: 2rem;
}

.fluentform .ff-el-form-control::placeholder {
    color: #999999;
}

.fluentform .ff-btn-submit {
    --happy-btn-color: var(--color-brand-primary, #E30613);
    --happy-btn-text: white;

    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 0;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none;
    cursor: pointer;
    font-family: var(--font-headline);
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.001rem;
    line-height: normal;
    color: var(--happy-btn-text);
    will-change: transform;
    transition: transform 0.2s ease, color 0.2s ease;
}

.fluentform .ff-btn-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--happy-btn-color);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 207 47' preserveAspectRatio='none'%3E%3Cpath d='M7.45533 0.294626C7.45533 0.294626 123.055 0.235047 138.454 0.0558629C153.852 -0.123321 198.854 0.175468 200.453 0.294626C202.052 0.413783 206.853 0.294626 206.853 5.67015C206.853 11.0457 206.053 25.3803 206.453 26.0971C206.852 26.8139 207.453 37.8636 206.453 41.2082C205.809 43.3584 205.829 44.4967 205.923 45.0351C206.006 45.5014 205.321 45.9525 204.084 46.2382C202.511 46.6011 199.728 46.9402 194.853 46.882C184.853 46.7624 138.053 46.7028 136.054 46.8224C134.055 46.942 80.0549 47.1213 67.6543 46.882C55.254 46.6428 31.0547 46.5236 22.0547 46.7028C13.0548 46.882 6.25534 47.0017 5.05538 46.8224C3.85539 46.6432 -0.544073 47.0016 0.0559218 42.9399C0.655916 38.8782 2.8549 18.9297 2.05541 13.9126C1.25591 8.89544 2.6554 6.98401 2.2549 5.96893C1.85441 4.95385 1.05492 0.17502 7.45533 0.294626Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 207 47' preserveAspectRatio='none'%3E%3Cpath d='M7.45533 0.294626C7.45533 0.294626 123.055 0.235047 138.454 0.0558629C153.852 -0.123321 198.854 0.175468 200.453 0.294626C202.052 0.413783 206.853 0.294626 206.853 5.67015C206.853 11.0457 206.053 25.3803 206.453 26.0971C206.852 26.8139 207.453 37.8636 206.453 41.2082C205.809 43.3584 205.829 44.4967 205.923 45.0351C206.006 45.5014 205.321 45.9525 204.084 46.2382C202.511 46.6011 199.728 46.9402 194.853 46.882C184.853 46.7624 138.053 46.7028 136.054 46.8224C134.055 46.942 80.0549 47.1213 67.6543 46.882C55.254 46.6428 31.0547 46.5236 22.0547 46.7028C13.0548 46.882 6.25534 47.0017 5.05538 46.8224C3.85539 46.6432 -0.544073 47.0016 0.0559218 42.9399C0.655916 38.8782 2.8549 18.9297 2.05541 13.9126C1.25591 8.89544 2.6554 6.98401 2.2549 5.96893C1.85441 4.95385 1.05492 0.17502 7.45533 0.294626Z'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    transition: background-color 0.2s ease;
}

.fluentform .ff-btn-submit::after {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: -2;
    background-color: var(--happy-btn-color);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 207 47' preserveAspectRatio='none'%3E%3Cpath d='M7.45533 0.294626C7.45533 0.294626 123.055 0.235047 138.454 0.0558629C153.852 -0.123321 198.854 0.175468 200.453 0.294626C202.052 0.413783 206.853 0.294626 206.853 5.67015C206.853 11.0457 206.053 25.3803 206.453 26.0971C206.852 26.8139 207.453 37.8636 206.453 41.2082C205.809 43.3584 205.829 44.4967 205.923 45.0351C206.006 45.5014 205.321 45.9525 204.084 46.2382C202.511 46.6011 199.728 46.9402 194.853 46.882C184.853 46.7624 138.053 46.7028 136.054 46.8224C134.055 46.942 80.0549 47.1213 67.6543 46.882C55.254 46.6428 31.0547 46.5236 22.0547 46.7028C13.0548 46.882 6.25534 47.0017 5.05538 46.8224C3.85539 46.6432 -0.544073 47.0016 0.0559218 42.9399C0.655916 38.8782 2.8549 18.9297 2.05541 13.9126C1.25591 8.89544 2.6554 6.98401 2.2549 5.96893C1.85441 4.95385 1.05492 0.17502 7.45533 0.294626Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 207 47' preserveAspectRatio='none'%3E%3Cpath d='M7.45533 0.294626C7.45533 0.294626 123.055 0.235047 138.454 0.0558629C153.852 -0.123321 198.854 0.175468 200.453 0.294626C202.052 0.413783 206.853 0.294626 206.853 5.67015C206.853 11.0457 206.053 25.3803 206.453 26.0971C206.852 26.8139 207.453 37.8636 206.453 41.2082C205.809 43.3584 205.829 44.4967 205.923 45.0351C206.006 45.5014 205.321 45.9525 204.084 46.2382C202.511 46.6011 199.728 46.9402 194.853 46.882C184.853 46.7624 138.053 46.7028 136.054 46.8224C134.055 46.942 80.0549 47.1213 67.6543 46.882C55.254 46.6428 31.0547 46.5236 22.0547 46.7028C13.0548 46.882 6.25534 47.0017 5.05538 46.8224C3.85539 46.6432 -0.544073 47.0016 0.0559218 42.9399C0.655916 38.8782 2.8549 18.9297 2.05541 13.9126C1.25591 8.89544 2.6554 6.98401 2.2549 5.96893C1.85441 4.95385 1.05492 0.17502 7.45533 0.294626Z'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.fluentform .ff-btn-submit:hover {
    transform: scale(1.04);
    opacity: 1;
}

@media (min-width: 1024px) {
    .fluentform .ff-btn-submit { font-size: 1.5rem; }
}

@media (min-width: 1280px) {
    .fluentform .ff-btn-submit { font-size: 1.6rem; }
}

form[data-form_id="2"] .ff-btn-submit {
    --happy-btn-color: var(--color-brand-background, #1D1D1B);
}

/* RICHTEXT */

.richtext p {
    margin-bottom: 1rem;
}

.richtext h2,
.richtext h3,
.richtext h4,
.richtext h5 {
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.richtext h2,
.richtext h3 {
    font-family: var(--font-headline);
}

.richtext h2 { font-size: 2.5rem; text-transform: uppercase; }
.richtext h3 { font-size: 2rem; }
.richtext h4 { font-size: 1.25rem; }
.richtext h5 { font-size: 1.1rem; }

.richtext strong {
    font-weight: 700;
}

/* Decouple font variables from Oxygen's managed custom fonts and point them at the
   plugin's self-hosted @font-face families (see fonts.css). Keeps typography working
   independently of Oxygen's Custom Fonts and consent state:
   - headline: garage-gothic (Adobe, consent-gated) with local 'Bebas Neue' fallback
   - text: local 'Bricolage Grotesque' (same-origin, no CORS/consent issue) */
:root, body {
    --font-headline: "garage-gothic", 'Bebas Neue', sans-serif;
    --font-text: 'Bricolage Grotesque', sans-serif;
}