@font-face {
    font-family: "KH Teka";
    src: url(../fonts/KHTeka-Regular.woff2) format("woff2"),
    url(../fonts/KHTeka-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "KH Teka";
    src: url(../fonts/KHTeka-Medium.woff2) format("woff2"),
    url(../fonts/KHTeka-Medium.woff) format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "KH Teka";
    src: url(../fonts/KHTeka-Bold.woff2) format("woff2"),
    url(../fonts/KHTeka-Bold.woff) format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --fuchsOrange: rgb(255, 51, 9);
    --fuchsDarkRed: rgb(193, 0, 12);
    --fuchsPink: rgb(240, 4, 127);

    --job-text: #111;
    --job-muted: #575a70;
    --space-xs: 0.5rem;
    --space-s: 1rem;
    --space-m: 2rem;
    --space-l: 3rem;
    --space-xl: 5rem;

    --lottie-size: 60px;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}


body {
    width: 100vw;
    font-size: 16px;
    overflow-x: hidden;
}

/* Standard: Seite ist da! */
body {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* 1. Wir starten nicht bei 0, sondern bei 0.85 */
/* Das ist für Lighthouse fast "fertig", aber unterdrückt das erste Blitzen */
@keyframes fadeInPage {
    from { opacity: 0.85; }
    to { opacity: 1; }
}

/* 2. Wir machen die Animation EXTREM kurz */
body:not(.loaded) {
    animation: fadeInPage 0.15s ease-out forwards;
}

/* 3. Sicherheitsnetz: Falls JS geladen ist, sofort auf 1 */
body.loaded {
    opacity: 1 !important;
}



/* H E A D E R */

.navbar {
    top: 0;
    width: 100%;
    height: 7vh;
    position: fixed;
    transition: all 0.3s ease;
    z-index: 1001;
    background-color: transparent;
}

.navbar-active {
    background: rgb(255,255,255);
    /*background: -moz-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);*/
    height: 8vh;
}

.navbar-active a {
    color: #333 !important;
}

.navbar-active a:hover {
    color: var(--fuchsPink) !important;
}

.navbar-active .burger div {
    background-color: #333;
}

.navbar-active-black {
    background: rgba(0,0,0, 0.9);
}

/* Standard: Helles Logo sichtbar, dunkles versteckt */
.logo img.logo-light {
    display: block;
    width: 240px;
    height: auto;
    margin-top: 20px;
}

.logo img.logo-dark {
    display: none;
}

/* Bei aktiver Navigation: Dunkles Logo sichtbar, helles versteckt */
.navbar-active .logo img.logo-light {
    display: none;
}

.navbar-active .logo img.logo-dark {
    display: block;
    width: 240px;
    height: auto;
    margin-top: 20px;
}

.logo h1 {
    text-indent: -99999px;
}

nav .nav-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-style: normal;
    z-index: 1000;
    height: 8vh;
    margin: 0 auto;
}

nav .nav-inner ul {
    padding-left: 5rem;
    margin-top: 10px;
}

.nav-links {
    display: flex;
    justify-content: center;
    margin-top: -20px;
    width:60%;
    gap: 1rem;
    /*z-index: 3000;*/
}

.nav-links li {
    list-style: none;
}

.nav-links li a {
    color: #fff;
    text-decoration: none;
    letter-spacing: 1px;
    font-size: 0.7rem;
    font-family: "KH Teka", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
}

.nav-links li a .extra {
    color: var(--fuchsPink);
    font-weight: 700;
}

.nav-links li a.black {
    color: #111;
}

.nav-links li a:hover {
    color: var(--fuchsPink);
}

.nav-links li a.active,
.navbar-active .nav-links li a.active {
    color: var(--fuchsPink) !important;
}

.icons {
    display: flex;
    margin-top: 10px;
}
.burger {
    display: none;
    cursor: pointer;
}
.burger div {
    width: 25px;
    height: 2px;
    background-color: rgb(236, 236, 236);
    margin: 5px 5px 5px 2rem;
    transition: all 0.3s ease;
}

.burger div.black {
    background-color: #111;
}

.search {
    color: #fff;
    font-size: 22px;
    margin-left: 1.5rem;
    padding-top: 8px;
}

.search.black {
    color: #111;
}

.more-btn {
    margin-left: 1.5rem;
    padding-top: 4px;
    display: flex;
    align-items: center;
}

.more-btn a {
    color: #fff;
    text-decoration: none;
    font-size: 1.6rem;
    letter-spacing: 3px;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

.more-btn a:hover {
    color: var(--fuchsPink);
}

/* Farbe anpassen wenn navbar-active (weißer Hintergrund) */
.navbar-active .more-btn a {
    color: #333;
}

.navbar-active .more-btn a:hover {
    color: var(--fuchsPink);
}


/* T Y P O G R A P H I E */

h1 {
    font-size: clamp(0.75rem, 1vw, 1.15rem);   /* klein, dezent */
    font-weight: 00;
    font-family: "KH Teka", sans-serif;
    font-style: normal;
    letter-spacing: 10px;
    text-transform: uppercase;
}

h1.indent {
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: none;;
}

/* Basissystem für h2 */
h2 {
    font-family: "KH Teka", sans-serif;
    font-weight: 700;
    line-height: 1;
    font-size: clamp(2rem, 3vw, 4rem);
}

/* hero h2 */
.h2--hero {
    font-size: clamp(2.625rem, 5vw, 7rem);
}

.h2--small-no-anime {
    font-family: "KH Teka", sans-serif;
    font-size: clamp(1.4rem, 2vw, 2.2rem);
    font-weight: 500;
    font-style: normal;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: none;
    white-space: normal;
}

h2 span {
    font-family: "KH Teka", sans-serif;
    font-weight: 400;
    text-transform: lowercase;
    font-size: 1.5rem;
    display: inline-block;
}

ul li {
    font-family: "KH Teka", sans-serif;
    font-weight: 400;
    line-height: 1.75;
    font-size: 1rem;
}

ul li a {
    color: var(--fuchsPink);
    opacity: 1;
    transition: all 0.3s ease;
}

ul li a:hover {
    color: var(--fuchsOrange)
}

h3 a {
    display: inline-flex;
    align-items: center;
    color: var(--fuchsPink);
    font-weight: 400;
    opacity: 1;
}

h3 a::before {
    content: "\27F6";
    padding-right: 5px;
    line-height: 1;
    transform: translateY(-0.15em);

}

h3 a:hover {
    opacity: 0.7;
}



/* =========================================
   BASIS: h2 – Typografie + Sichtbarkeit
   ========================================= */

.h2--small {
    font-family: "KH Teka", sans-serif;
    font-size: clamp(1.4rem, 2vw, 2.2rem);
    font-weight: 700;
    font-style: normal;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: none;
    white-space: normal;

    font-optical-sizing: auto;
    font-variation-settings: inherit;
    font-feature-settings: inherit;

    background-image: var(--grad, linear-gradient(45deg, #f64600, #f600cd));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}



/* =========================================
   ANIMATION – nur opt-in
   ========================================= */

[data-animate] .h2--small .word {
    display: inline-block;
    will-change: transform, opacity;

    background-image: var(--grad, linear-gradient(45deg, #f64600, #f600cd));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}


/* Zeilen-Animation */
[data-animate="lines"] .h2--small .line {
    display: block;
    overflow: hidden;
}

[data-animate="lines"] .h2--small .line-inner {
    display: inline-block;
    will-change: transform, opacity;

    /* Typo erben */
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}


/* =========================================
   BLOCK-GRADIENTE
   ========================================= */

.container--colored-text-green {
    --grad: linear-gradient(
            45deg,
            rgba(146,247,93,1) 0%,
            rgba(7,134,172,1) 100%
    );
}

.container--colored-text-lila {
    --grad: linear-gradient(
            45deg,
            rgba(151,127,245,1) 0%,
            rgba(227,73,218,1) 46%,
            rgba(192,6,233,1) 100%
    );
    padding-top: 3rem;
}

[data-animate="lines"] .h2--small .line{
    display: block;
    overflow: hidden;

    font: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;

    margin: 0;
    padding: 0;
}

[data-animate="lines"] .h2--small .line-inner{
    display: inline-block;
    will-change: transform, opacity;

    font: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}



/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {
    [data-animate] .h2--small .word,
    [data-animate="lines"] .h2--small .line-inner {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Case & Caps garantiert normal – auch in der animierten Version */
.h2--small,
.h2--small .word,
.h2--small .line,
.h2--small .line-inner {
    text-transform: none !important;
    font-variant-caps: normal !important;
    font-variant: normal !important;
    font-feature-settings: normal !important;
}


h3 {
    font-family: "KH Teka", sans-serif;
    font-weight: 500;
    font-size: clamp(1.2rem, 2vw, 2.2rem);
}


h4 {
    font-family: "KH Teka", sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 0.25rem;
}

p.white {
    padding-top: 3rem;
    font-size: 1.25rem;
}

p.black {
    padding-top: 3rem;
    width: 50vw;
    text-align: center;
    font-size: 1.25rem;
    color: #313030;
}

p {
    font-size: 1rem;
    font-family: "KH Teka", sans-serif;
    font-weight: 400;
    line-height: 1.5;
}

/* ----- Content ----- */
.sprung {
    visibility: hidden;
    height: 0 !important;
    position: absolute;
    margin-top: -17vh;

}

main {
    width: 96%;
    margin: 2% auto 5px auto;
}

/*========== SIDEBAR ICONS ==========*/

.help {
    position: fixed;
    display: flex;
    align-items: center;
    width: 180px;
    height: 70px;
    background-color: var(--fuchsOrange); /* Aus deinem Code */
    opacity: 1;
    z-index: 1000;
    padding-left: 15px;

    /* WICHTIG: Erlaubt den flüssigen Hover-Effekt nach der Animation */
    border-radius: 35px 0 0 35px;
    transition: transform 0.5s ease-in-out;

    /* NEU: Temporäre Startposition für die Keyframe-Animation */
    /* Die Keyframe-Animation überschreibt dies sofort beim Laden */
    transform: translateX(100%);
}

@media screen and (max-width: 768px) {
    .help {
        width: 180px;
        transform: translateX(80%);
    }
}



.help.contact:hover,
.help.adt3:hover {
    transform: translateX(0px);
    opacity: 0.8;
}

.help.contact {
    top: 20%;
    right: 0;
    animation: slideInBounce 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s none;
}


.help.adt3 {
    top: 25%;
    right: 0;
    background-color: var(--fuchsPink);
    animation: slideInBounce 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s none;
}

@media screen and (max-width: 480px) {
    .help.adt3 {
        top: 28%;
    }
}

.help.animation-done {
    transform: translateX(100px);
}

a.main__contact i {
    font-size: 24px;
    color: #fff;
    opacity: 1;
    /* Reduziere das Padding auf einen angemessenen Abstand */
    padding-right: 40px;
}

a.main__contact {
    font-family: "KH Teka", sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    letter-spacing: 3px;

}

@keyframes slideInBounce {
    0% {
        /* Start: Komplett außerhalb des Viewports (170px Breite) */
        transform: translateX(100%);
    }

    75% {
        /* Federeffekt: Schießt kurz über das Ziel (100px) hinaus,
           z.B. bis zur 90px-Position. */
        transform: translateX(90px);
    }

    100% {
        /* Ziel: Die sichtbare 100px-Vorschau-Position */
        transform: translateX(100px);
    }
}


/* S E C T I O N  */

.section--copy {
    padding-block: clamp(2rem, 3vh, 7rem);
    padding-inline: clamp(1rem, 3vw, 3rem);
}

/* optional für mehr Bühnenwirkung */
.section--copy .container--colored {
    min-height: clamp(420px, 60vh, 780px);
}

.section--copy .button-group {
    margin-top: clamp(1.25rem, 2vw, 2.5rem);
    gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

.section--copy .container--colored-text h2,
.section--copy .container--colored-text-green h2,
.section--copy .container--colored-text-purple h2 {
    line-height: 1.25;
    max-width: 70ch;
    margin-inline: auto;
}

.section--copy .container--colored-text-green {
    --grad: linear-gradient(
            45deg,
            rgba(146,247,93,1) 0%,
            rgba(7,134,172,1) 100%
    );
}

.container--colored {
    display: flex;
    flex-direction: column;
    padding-top: clamp(2.5rem, 6vh, 5rem);
    padding-bottom: clamp(3rem, 8vh, 7rem);
    justify-content: flex-start;
    align-items: center;
    padding-inline: 1rem;
}

@media screen and (max-width: 768px) {
    .container--colored {
        padding: 0;
    }

}

.container--colored-inner {
    width: min(1400px, calc(100% - 2rem));
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    margin-top: clamp(2rem, 6vh, 5rem);
    gap: clamp(3rem, 2vw, 2.5rem);
}

.container--colored-inner img {
    width: clamp(140px, 12vw, 191px);
    flex: 0 0 auto;

    /* explizit oben ausrichten (Sicherheit) */
    align-self: flex-start;
}

@media (max-width: 768px) {
    .container--colored-inner {
        flex-direction: column;
        text-align: left;
        margin-top: clamp(1.5rem, 4vh, 3rem);
    }

    .container--colored-inner img {
        width: clamp(120px, 40vw, 180px);
    }
}


.container.onTop {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: -3rem;
}

.container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 1px;
}

.container-50 {
    display: flex;
    flex-direction: row;
    position: relative;
    gap: 2%; /* <--- sorgt dafür, dass alle Spalten die gleiche Höhe haben */
}

.container-50-one {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1;
}

.container-image {
    position: relative;
    overflow: hidden;
    transform-origin: center center; /* Oder 'top center', je nach Design */
    will-change: transform; /* Performance-Boost für flüssiges Scrollen */
    background-color: #fff;
}

.container-text {
    will-change: transform; /* Performance-Boost für flüssiges Scrollen */
}

/*.container-image::after {
    content: '';
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; !* Verhindert, dass das Overlay Klicks abfängt *!
    z-index: 2;
}*/

.media-layer {
    position: relative;
    width: 100%;
    height: 100%;
    will-change: transform;
}

.media-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-layer.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.7); /* dein Lesbarkeits-Layer */
    pointer-events: none;
}

.container-image img,
.container-image video {
    filter: brightness(0.9);
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.container-image.no-overlay img {
    filter: brightness(1);
}

.container-image .overlay {
    position: absolute;
    mix-blend-mode: overlay;
}

@media (max-width: 768px) {
    .container-image .overlay {
        display: none;
    }
}

.container-text,
.container-50-text.center {
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    bottom: 0;
}


.container-text.center.onTopTwo {
    top: 25rem;
}


.container-50-copy-text {
    padding: 4rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto; /* macht den Text-Block flexibel, füllt die Spalte und gleicht Höhen aus */
    justify-content: space-between; /* Inhalt oben und Button am unteren Rand */
}

/* Sicherstellen, dass die Button-Gruppe innerhalb des Copy-Blocks am unteren Rand sitzt */
.container-50-copy-text .button-group {
    margin-top: auto;
}

/* Mehr Abstand zwischen <p> und Button in den container-50 Spalten */
.container-50-copy-text p {
    margin-bottom: 2.5rem; /* mehr Platz vor dem Button */
    text-align: left;
}

.apple-toggle-btn {
    all: unset;
    position: relative;
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 50px;   /* geschlossen: Kreis */
    height: 50px;

    border-radius: 999px;
    background: var(--fuchsPink);
    cursor: pointer;
    overflow: hidden;

    transition:
            width 0.45s cubic-bezier(.25,.1,.25,1),
            background-color 0.45s cubic-bezier(.25,.1,.25,1),
            border-color 0.45s cubic-bezier(.25,.1,.25,1);
}


.apple-toggle-btn__closed,
.apple-toggle-btn__open {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 4px;
    line-height: 0;
}


.apple-toggle-btn__closed {
    font-size: 32px;
    color: #ffffff;
    line-height: 1;
    opacity: 1;
    transition: opacity 0.25s ease;
    padding-bottom: 4px;
}


.apple-toggle-btn__open {
    gap: 8px;
    opacity: 0;
    transition: opacity 0.25s ease 0.1s;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    system-ui, "Helvetica Neue", sans-serif;
    font-size: 18px;
    line-height: 1;
    color: #ffffff;
}

.apple-toggle-btn__icon {
    font-size: 32px;
    line-height: 1;
    display: flex;
    align-items: center;
    padding-bottom: 4px;

}


.apple-toggle-btn:hover,
.apple-toggle-btn:focus-visible {
    width: 180px; /* Breite des geöffneten Zustands */
    background: var(--fuchsOrange);
}

.apple-toggle-btn:hover .apple-toggle-btn__closed,
.apple-toggle-btn:focus-visible .apple-toggle-btn__closed {
    opacity: 0;
}

.apple-toggle-btn:hover .apple-toggle-btn__open,
.apple-toggle-btn:focus-visible .apple-toggle-btn__open {
    opacity: 1;
}

/* Tastatur-Fokus */
.apple-toggle-btn:focus-visible {
    outline: 2px solid rgba(0,0,0,0.6);
    outline-offset: 3px;
}

.apple-toggle-btn a {
    color: #ffffff;

}


.container-50-copy-text.brown p {
    font-size: 1.25rem;
    text-align: left;
    font-weight: 500;
    background: rgb(246,70,0);
    background: -moz-linear-gradient(45deg, rgb(177, 178, 173) 0%, rgb(127, 78, 58) 37%, rgb(84, 42, 29) 100%);
    background: -webkit-linear-gradient(45deg, rgb(177, 178, 173) 0%, rgb(127, 78, 58) 37%, rgb(84, 42, 29) 100%);
    background: linear-gradient(45deg, rgb(177, 178, 173) 0%, rgb(127, 78, 58) 37%, rgb(84, 42, 29) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f64600",endColorstr="#f600cd",GradientType=1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.container-text h1,
.container-50-text h1 {
    text-align: left;
}

.container-text h4,
.container-50-text h4 {
    color: #fff;
    text-align: right;
}

.container--colored-text {
    color: #fff;
    /*background: rgb(246,70,0);
    background: -moz-linear-gradient(45deg, rgba(246,70,0,1) 0%, rgba(246,36,100,1) 37%, rgba(246,0,205,1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(246,70,0,1) 0%, rgba(246,36,100,1) 37%, rgba(246,0,205,1) 100%);
    background: linear-gradient(45deg, rgba(246,70,0,1) 0%, rgba(246,36,100,1) 37%, rgba(246,0,205,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f64600",endColorstr="#f600cd",GradientType=1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
}


.container--colored-text-purple {
    background: rgb(123,10,254);
    background: -moz-linear-gradient(45deg, rgba(123,10,254,1) 0%, rgba(246,0,205,1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(123,10,254,1) 0%, rgba(246,0,205,1) 100%);
    background: linear-gradient(45deg, rgba(123,10,254,1) 0%, rgba(246,0,205,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7b0afe",endColorstr="#f600cd",GradientType=1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.container--colored-text-green {
    color: #fff;
    background: rgb(146,247,93);
    background: -moz-linear-gradient(45deg, rgba(146,247,93,1) 0%, rgba(7,134,172,1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(146,247,93,1) 0%, rgba(7,134,172,1) 100%);
    background: linear-gradient(45deg, rgba(146,247,93,1) 0%, rgba(7,134,172,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#92f75d",endColorstr="#0786ac",GradientType=1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.container--colored-text-lila {
    color: #fff;
    background: rgb(151,127,245);
    background: -moz-linear-gradient(45deg, rgba(151,127,245,1) 0%, rgba(227,73,218,1) 46%, rgba(192,6,233,1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(151,127,245,1) 0%, rgba(227,73,218,1) 46%, rgba(192,6,233,1) 100%);
    background: linear-gradient(45deg, rgba(151,127,245,1) 0%, rgba(227,73,218,1) 46%, rgba(192,6,233,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#977ff5",endColorstr="#c006e9",GradientType=1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-top: 3rem;
}

.grid-grey {
    background-color: #f5f5f5;
}

.pb-xl {
    padding-bottom: var(--space-xl);
}

.pb-l{
    padding-bottom: var(--space-l);
}

.pb-m {
    padding-bottom: var(--space-m);
}

.pb-s {
    padding-bottom: var(--space-s);
}

.pb-xs {
    padding-bottom: var(--space-xs);
}

.grid--1 {
    display: block;
    width: 60vw;
    margin: 0 auto;
    text-align: center;
}

.grid--1-1 {
    text-align: center;
    color: #111;
    padding-top: 1rem;
    padding-bottom: 12rem;
}


/* Maus unten zentriert */
dotlottie-wc.scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 100px;
    transform: translateX(-50%);
    width: var(--lottie-size);
    height: var(--lottie-size);
    cursor: pointer;
    outline: none;
}

dotlottie-wc.scroll-indicator:focus-visible {
    outline: 2px solid #9ae6ff;
    border-radius: 50%;
}

dotlottie-wc.scroll-indicator {
    filter: invert(1) brightness(2);
}

/* Stellt sicher, dass das Lottie-Element über allen anderen Containern liegt */
.scroll-indicator-container {
    /* Verwenden Sie entweder die Klasse Ihrer aktuellen Sektion ODER fügen Sie eine neue Klasse hinzu,
       um den übergeordneten Anker-Tag zu stylen. */
}

/* Wenden Sie die Regel direkt auf den Anker-Tag an, der die Animation enthält */
.container.onTop a[href="#next"] {
    position: relative; /* Oder absolute/fixed, je nach Layout */
    z-index: 1000; /* Sehr hoher Wert, um alle anderen Elemente zu überdecken */
}


/* ========================================================= */
/* 1. HAUPT-GRID-CONTAINER FÜR 2 SPALTEN */
/* ========================================================= */
.grid--2 {
    display: grid;
    /* Definiert 3 gleich breite Spalten */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;

    /* Passen Sie diese Maße an Ihr gewünschtes Layout an */
    width: min(1200px, calc(100% - 2rem));
    margin: 0.5rem auto 5rem;
    padding-block: clamp(2rem, 6vh, 5rem);
}

/*.grid--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 60vw;
    height: auto;
    margin: 0.5rem auto 0.75rem auto;
    gap: 2rem;
    align-items: start;
}*/



/* ========================================================= */
/* 2. FLEX-ITEM (Der Container, der die Elemente vertikal steuert) */
/* ========================================================= */
.grid--2-1 {
    text-align: left;
    line-height: 1.2;
    color: #111;
    letter-spacing: 1px;
    padding-top: 1rem;
    min-height: 80px;

    /* WICHTIG: Flex-Container für die Ausrichtung der Elemente */
    display: flex;
    flex-direction: column;
}

/* ========================================================= */
/* 3. HEADER WRAPPER (Fixierte Mindesthöhe) */
/* ========================================================= */
.grid--2 .grid--2-1 .grid-header-wrapper {
    /* WICHTIG: Ersetzt flex-grow: 1 durch fixe Höhe */
    /* Nehmen Sie den Wert, der für die längsten Titel in diesem Kontext benötigt wird (z.B. 120px) */
    min-height: 80px;

    /* Definiert den gleichmäßigen Abstand ZUM p-Text */
    padding-bottom: 2.5rem;

    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Stellt h4 und h2 nach unten, falls min-height größer ist als der Inhalt */

    /* flex-grow: 1 MUSS HIER ENTFERNT WERDEN */
}

/* ========================================================= */
/* 4. P-ELEMENT (Muss oben beginnen und neutralisiert werden) */
/* ========================================================= */
.grid--2-1 p {

    line-height: 1.75;
    text-align: left;
    color: #111;
}



/* ========================================================= */
/* 1. HAUPT-GRID-CONTAINER FÜR 3 SPALTEN */
/* ========================================================= */
.grid--3 {
    display: grid;
    /* Definiert 3 gleich breite Spalten */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;

    /* Passen Sie diese Maße an Ihr gewünschtes Layout an */
    width: min(1400px, calc(100% - 2rem));
    margin: 0.5rem auto 5rem;
    padding-block: clamp(2rem, 6vh, 5rem);
}

/* Tablet: 2 Spalten (Optional: Falls benötigt) */
@media (max-width: 1100px) {
    .grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile: 1 Spalte (Optional: Falls benötigt) */
@media (max-width: 640px) {
    .grid--3 {
        grid-template-columns: 1fr;
    }
}


.grid--3-1.contact {
    box-shadow: rgba(0,0,0,0.1) 0 -8px 8px;
    border-radius: 8px;
    border-top: 1px solid var(--fuchsPink);
    margin-bottom: 5rem;
}


/* ========================================================= */
/* 2. FLEX-ITEM (Der Container, der die Elemente vertikal steuert) */
/* ========================================================= */
.grid--3-1 {
    text-align: left;
    line-height: 1.2;
    color: #111;
    letter-spacing: 1px;
    padding-top: 1rem;
    min-height: 80px;

    /* WICHTIG: Flex-Container für die Ausrichtung der Elemente */
    display: flex;
    flex-direction: column;
}

/* ========================================================= */
/* 3. HEADER WRAPPER (Fixierte Mindesthöhe) */
/* ========================================================= */
.grid--3 .grid--3-1 .grid-header-wrapper {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* ========================================================= */
/* 4. P-ELEMENT (Muss oben beginnen und neutralisiert werden) */
/* ========================================================= */
.grid--3-1 p {

    line-height: 1.75;
    text-align: left;
    color: #111;
}




.grid--4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem;
    width: min(1400px, calc(100% - 2rem));
    margin: 0.5rem auto 5rem;
    grid-auto-rows: 1fr;
}

.grid--4-1 {
    display: flex;
    flex-direction: column;
    height: 100%; /* WICHTIG: Volle Höhe der Grid-Zelle */
    text-align: left;
    line-height: 1.2;
    color: #111;
    letter-spacing: 1px;
    padding-top: 1rem;
    min-height: 80px;
}

.grid--4 .grid--4-1 .grid-header-wrapper {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.grid--4-1 p {
    line-height: 1.75;
    text-align: left;
    color: #111;
}

.grid--4-1.contact p {
    padding: 2rem;
    text-align: center;
}

.grid--4-1 h2 span {
    text-transform: uppercase;
    font-weight: lighter;
    font-size: 16px;
}

.grid--4-1 h3 {
    padding-top: 0.5rem;
    font-weight: 600;
    line-height: 1.1;
}

.grid--4-1 h2.legal {
    font-weight: 500;
    padding-top: 1.5rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    font-size: clamp(1.2rem, 3vw, 1.75rem);
}

.grid--4-1 h3.legal {
    font-weight: 500;
    padding-top: 1.5rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    font-size: clamp(1rem,4vw, 1.25rem);
}

.grid--4-1 p.legal {
    padding: 1rem 0.5rem 3rem 0.5rem;
}

.grid--4-1 a.legal {
    color: #111;
    text-decoration: underline;
    opacity: 1;
}

.grid--4-1 a.legal:hover {
    opacity: 0.5;
}

.grid--4-1.contact {
    box-shadow: rgba(0,0,0,0.1) 0 -8px 8px;
    border-radius: 8px;
    border-top: 1px solid var(--fuchsPink);
}



/* ========================================================= */
/* 1. HAUPT-GRID-CONTAINER */
/* HINWEIS: Dieses Grid hält nun ALLE Blöcke (Folienprodukte, Display, etc.) */
/* direkt und sorgt für die korrekte Ausrichtung der Zeilen. */
/* ========================================================= */
.grid--4-list {
    display: grid;
    /* Definiert 4 gleich breite Spalten */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* 3 Zeilen: h3, p, ul – Höhe jeweils durch den längsten Inhalt bestimmt */
    grid-template-rows: auto auto 1fr;
    /* Abstand zwischen allen Blöcken (horizontal und vertikal) */
    gap: 1rem 2.5rem;

    width: min(1400px, calc(100% - 2rem));
    margin: clamp(2rem, 5vh, 4rem) auto;
}

.grid-list-block {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
}

.grid--4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem;
    width: min(1400px, calc(100% - 2rem));
    margin: clamp(2rem, 5vh, 4rem) auto;
    grid-auto-rows: 1fr;
}

/* ========================================================= */
/* MEDIA QUERIES (Bleiben unverändert, da sie das Haupt-Grid steuern) */
/* ========================================================= */

/* Tablet: 2 Spalten */
@media (max-width: 1100px) {
    .grid--4-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }
}

/* Mobile: 1 Spalte */
@media (max-width: 640px) {
    .grid--4-list {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}


/* ========================================================= */
/* 2. BLOCK- UND INHALTSSTYLING */
/* ========================================================= */

/* Da der .grid--4-list-col-Container entfernt wurde, müssen diese
   Regeln aus den älteren, nicht mehr benötigten Selektoren entfernt werden.
   Alle h3-Regeln werden zusammengeführt. */

.grid--4-list h3 {
    line-height: 1.2;
    min-height: 3em;
    display: flex;
    align-items: flex-start;
    margin: 0 0 0.75rem;
}

/* ========================================================= */
/* 3. LISTEN-STYLING (Bleibt unverändert) */
/* ========================================================= */

.grid-list {
    width: 100%;
}

.grid-list li {
    font-family: "KH Teka", sans-serif;
    font-weight: 400;
    display: block;
    width: 100%;
    line-height: 1.45;
    padding: 0.35rem 0;
    color: #111;
    position: relative;
}

span.bold {
    font-weight: 600;
}

/* Linie über volle Spaltenbreite */
.grid-list li::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0,0,0,0.08);
    margin-top: 0.35rem;
}

/* ========================================================= */
/* GRID 8: 2 Zeilen à 4 Spalten (Basis-Layout) */
/* ========================================================= */
.grid--8 {
    display: grid;
    /* Definiert 4 gleich breite Spalten */
    grid-template-columns: repeat(4, minmax(0, 1fr));

    /* Abstand: Vertikal (Zeile zu Zeile) und Horizontal (Spalte zu Spalte) */
    gap: 1.5rem 2.5rem;

    width: min(1400px, calc(100% - 2rem));
    margin: 0.5rem auto 5rem;
    padding-block: clamp(2rem, 6vh, 5rem);
}

/* Responsivität für Grid 8 */
@media (min-width: 1101px) {
    .grid--8 > *:nth-child(n+5) {
        margin-top: 2rem;
    }
}

@media (max-width: 1100px) {
    .grid--8 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .grid--8 {
        grid-template-columns: 1fr;
    }
}

/* ========================================================= */
/* SPALTEN & FLEX-STEUERUNG (Synchronization) */
/* ========================================================= */

.grid--8 .grid--8-1 {
    display: flex;
    flex-direction: column;
    /* Wichtig: Nutzt die volle Höhe der Grid-Zelle */
    height: 100%;
    padding-bottom: 5rem;
}

/* Header-Wrapper: Fixiert die Höhe des oberen Bereichs */
.grid--8 .grid-header-wrapper {
    /* WICHTIG: Fixiert den Startpunkt des <p>-Elements */
    min-height: 100px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Titel starten oben */
    position: relative; /* Für die ::after Linie */
    border-bottom: none;

    /* Abstandskontrolle zum P-Text */
    margin-bottom: 1.5rem;
    padding: 20px 20px 1rem 20px;
    background-color: #f5f5f5;
    border-radius: 8px 8px 0 0;
}

.grid--8 .grid-header-wrapper img {
    width: 100%;
}

.grid--8 .grid--8-1 a {
    color: var(--fuchsPink);
    opacity: 1;
    transition: all 0.3s ease;
    font-family: "KH Teka Regular", sans-serif;
    text-align: left;
    padding-top: 1rem;
}

.grid--8 .grid--8-1 a:hover {
    opacity: 0.7;
}


/* ========================================================= */
/* TITEL (Transformierbarkeit und Margins) */
/* ========================================================= */

.grid--8 .grid-header-wrapper h3 {
    /* WICHTIG für Transform: Erzwingt den Block-Status */
    display: block;
    /* Neutralisiert Margins */
    margin: 0 !important;

    /* Ermöglicht die flüssige Bewegung */
    transition: transform 0.3s ease;
}

/* ========================================================= */
/* PARAGRAPH (Neutralisierung) */
/* ========================================================= */
.grid--8 .grid--8-1 p {
    /* WICHTIG: Neutralisiert alle Standard-Margins */
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.75;
}

/* ========================================================= */
/* ANIMATION UND HOVER EFFEKTE */
/* ========================================================= */

/* Hover-Effekt: Bewegung des Titels (h3) */
.grid--8 .grid--8-1:hover .grid-header-wrapper h3 {
    transform: translateX(5px) !important;
}

/* Hover-Effekt: Linie (wird beim Hovern dicker und farbig) */
.grid--8 .grid--8-1:hover .grid-header-wrapper::after {
    /* Setzen Sie hier Ihre Branding-Farbe oder einen Hex-Code */
    background: #cc3366 !important;
    height: 1.5px !important;
    transition: all 0.3s ease;
}

/* Animation der Trennlinie (growLine muss im übergeordneten Stylesheet definiert sein) */
.grid--8 .grid-header-wrapper::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* Startet bei 0 */
    height: 1px;
    background: rgba(0, 0, 0, 0.1);

    /* Animation wird hier gestartet */
    animation: growLine 1.2s ease-out forwards;
    animation-delay: 0.5s;
}


/* ========================================================= */
/* GRID 6: 2 Zeilen à 3 Spalten */
/* ========================================================= */
.grid--6 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 0.25rem;
    width: min(1400px, calc(100% - 2rem));
    margin: 0.5rem auto 5rem;
    padding-block: clamp(2rem, 6vh, 5rem);
}

/* Responsivität für das 6er Grid */
@media (max-width: 1024px) {
    .grid--6 { grid-template-columns: repeat(2, 1fr); } /* 3 Zeilen à 2 Spalten */
}
@media (max-width: 640px) {
    .grid--6 { grid-template-columns: 1fr; } /* 6 Zeilen à 1 Spalte */
}


.grid--6-1 {
    display: flex;
    flex-direction: column;
    height: 100%;

}

.grid--6-1 > .grid-header-wrapper {
    /* flex: 1 sorgt dafür, dass dieser Bereich wächst und den Button nach unten drückt */
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px;
    height: 100%;
}

.grid--6 .grid-header-wrapper.long {
    min-height: 860px;
}

@media (max-width: 640px) {
    .grid--6 .grid-header-wrapper.long {
        min-height: auto;
    }
}


/* P-Element Neutralisierung NUR für Grid 6 */
.grid--6 .grid--6-1 p {
    line-height: 1.75;
    padding-bottom: 3rem;
    overflow-y: hidden;
    flex-grow: 1;
}

.grid--6-1 .button-group {
    /* Optional: Ein fester Abstand zum unteren Rand der Card */
    margin-top: auto;
    padding-bottom: 10px;
}

.grid--6-1 img.pb-m:not([src*="icons/"]) {
    width: 100%;
    height: auto;
    aspect-ratio: 1080 / 768;
    display: block;
}

/* Animation definieren */
@keyframes growLine {
    from { width: 0; opacity: 0; }
    to { width: 100%; opacity: 1; }
}

.grid--6 .grid-header-wrapper {
    position: relative;
    border-bottom: none; /* Wir entfernen den Standard-Border... */
}

/* ...und nutzen stattdessen ein Pseudo-Element für die Animation */
.grid--6 .grid-header-wrapper::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);

    /* Hier wird die Animation gestartet */
    animation: growLine 1.2s ease-out forwards;
    animation-delay: 0.5s; /* Wartet kurz, bis das fade-up vom AOS fertig ist */
}

.grid--6 .grid--6-1:hover .grid-header-wrapper::after {
    background: var(--fuchsPink); /* Linie wird dunkler beim Hover */
    height: 2px;    /* Optional: wird minimal dicker */
    transition: all 0.3s ease;
}

.grid--6 .grid--6-1:hover h2 {
    transform: translateX(5px); /* Titel rückt minimal nach rechts */
    transition: transform 0.3s ease;
}

.logo-grid {
    width: min(1400px, calc(100% - 2rem));
    display: grid;
    /* Erstellt so viele Spalten wie möglich, mind. 150px breit */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.25rem;
    align-items: center;
    justify-items: center;
    padding: 20px;
    margin: 2rem auto 5rem auto;
}

.logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2; /* Gibt allen Logo-Boxen das gleiche Format */
    border-bottom: 1px solid var(--fuchsPink);

}

.logo-item img {
    width: 100%;
    height: auto;
    max-width: 120px; /* Begrenzt die maximale Größe der Logos */
    filter: grayscale(100%); /* Optional: Logos einheitlich grau */
    transition: filter 0.3s ease;
    opacity: 0.6;
}

.logo-item img:hover {
    filter: grayscale(0%); /* Farbig bei Hover */
    opacity: 1;
}


.subhead {
    width: min(1400px, calc(100% - 2rem));
    margin: 0 auto;
    padding-block: clamp(1.5rem, 4vw + 1rem, 8rem);
}




.subhead-grid {
    width: min(1400px, calc(100% - 2rem));
    margin: 2rem auto 1rem;
    padding-block: 2rem;
}

.subhead h2 {
    width: 100%;
}

.flow {
    width: 100%;
    animation-name: flow;
    animation-duration: 8s;
    position: relative;
    animation-iteration-count: 2;
}

@keyframes flow {
    0% {left: 100%;}
    100% {left: 0;}
}

h1.aside {
    text-align: left;
    opacity: 1;
    color: var(--fuchsOrange);
}



.white{
    color: #fff;
}

.black {
    color: #111
}

.left {
    text-align: left;
}

.button-group {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.button-group.center {
    text-align: center;
    padding-bottom: 3rem;
}

a.button {
    display: inline-block;
    padding: 0.425rem 2.25rem;
    border: none;
    outline: none;
    cursor: pointer;
    text-align: center;
    border-radius: 20px;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    min-width: 180px;
    margin-bottom: 5rem;
    transition: all 0.3s ease;
    font-family: "KH Teka", sans-serif;
}

a.button:hover {
    transform: translateY(-2px);
    opacity: 0.8;
}

a.button.pink {
    background-color: var(--fuchsPink);
}

button.pink:hover {
    background-color: var(--fuchsOrange);
}

a.button.darkred {
    background-color: var(--fuchsDarkRed);
}

button.darkred:hover {
    background-color: var(--fuchsOrange);
}



.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 12%;
    left: calc(50% - 25px);
    width: 35px;
    height: 35px;
    cursor: pointer;
    background-repeat: no-repeat;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-property: background-color, color;
    outline: none;
    border: 1px solid #fff;
    border-radius: 50%;
}

.btn span {
    color: #fff;
    cursor: pointer;
}

.btn span:hover {
    color: #c8007f;;
}

.btn a:hover {
    background: #fff;
    color: #fff;
}

.nav-active {
    transform: translateX(0%);
}

/* Tabellen */

table {
    width: 100%;
    padding: 2rem 0 4rem 0;
    font-family: "KH Teka", sans-serif;
    font-weight: 500;
    border-collapse: separate;
    font-size: 0.9rem;
    line-height: 1.5;
    border-spacing: 0 0;
}

table tr {
    border-bottom: 1px solid #000;
}

table tr td {
    font-weight: 500;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    vertical-align: top;
}

table tr td:hover {
    background: #efefef;
}

.split-section {
    display: flex;
    gap: 2%; /* optional */
    align-items: stretch; /* wichtig: macht beide Spalten gleich hoch */
    margin-bottom: 2%;
}

/* beide Spalten gleich behandeln */
.split-section > .text-section,
.split-section > .video-section {
    flex: 1 1 50%;
    min-width: 0; /* verhindert Überlauf bei langen Inhalten */
    box-sizing: border-box;
}

.text-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex: 1 1 calc(50% - 2%);
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    flex-direction: column;
    padding: 0 5rem;
    background: #f3f3f6;
}

.text-section-inner {
    padding: 2rem; /* anpassen */
}

.text-section p {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    font-weight: 500;
    background: rgb(246, 70, 0);
    background: -moz-linear-gradient(45deg, rgb(177, 178, 173) 0%, rgb(127, 78, 58) 37%, rgb(84, 42, 29) 100%);
    background: -webkit-linear-gradient(45deg, rgb(177, 178, 173) 0%, rgb(127, 78, 58) 37%, rgb(84, 42, 29) 100%);
    background: linear-gradient(45deg, rgb(177, 178, 173) 0%, rgb(127, 78, 58) 37%, rgb(84, 42, 29) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f64600",endColorstr="#f600cd",GradientType=1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Video-Spalte: zentrieren */
.video-section {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* falls object-fit: cover verwendet wird */
}

.video-center {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    flex-direction: column;
    padding-inline: 1rem;
    width: 80%;
}

/* Video so hoch wie die Text-Spalte */
.video-section .myVideo {
    height: 100%;
    width: 100%; /* oder 'auto' je nach gewünschtem Verhalten */
    object-fit: cover; /* use 'contain' wenn das ganze Video sichtbar sein soll */
    display: block;
}

video {
    width: 100%;
    height: auto;
    display: block;
}

.myVideo {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}


.video-mobile {
    display: none;
}

/* Fallback für alle Browser */
main {
    padding-bottom: clamp(3rem, 6vw, 8rem);
}


/* Additiv nur, wenn env() unterstützt wird (iOS Notch/Home-Indicator etc.) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    main {
        padding-bottom: calc(clamp(3rem, 6vw, 8rem) + env(safe-area-inset-bottom));
    }
}



@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

.toggle .line1 {
    transform: rotate(-45deg) translate(-4px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-4px, -6px);
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

.container--colored-inner img {
    width: clamp(140px, 12vw, 191px);
    flex: 0 0 auto;
    align-self: flex-start;
}