@font-face {
        font-family: 'Chelsea Market';
        src: url(fonts/ChelseaMarket-Regular.ttf);
    }

    @font-face {
        font-family: 'Mulish';
        src: url(fonts/Mulish-VariableFont_wght.ttf);
    }

    :root {
        /* Farben */
        --color-primary: #060505;
        --color-light: #FBFBFB;

        /* Typographie */
        --font-family-main: 'Mulish', sans-serif;
    }

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


    section {
        display: flex;
        scroll-margin-top: 150px;
    }

    @media screen and (max-width: 1280px) {
        html {
            hyphens: auto;
        }

        section {
            scroll-margin-top: 80px;
        }
    }

    html {
        word-break: break-word;
        scroll-behavior: smooth;
        max-width: 100%;
    }

    body {
        box-sizing: border-box;
        background-color: var(--color-primary);
        color: var(--color-light);
        font-family: var(--font-family-main);
        line-height: calc(1em + 10px);
        font-size: 18px;
        overflow-x: hidden;
    }

    /* Scrollbar */
    ::-webkit-scrollbar {
        width: 8px;
    }

    /* Hintergrund der Scrollbar */
    ::-webkit-scrollbar-track {
        background: transparent;
    }

    /* Der bewegliche Teil */
    ::-webkit-scrollbar-thumb {
        background: #fff;
        border-radius: 0;
    }

    /* Hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #fff;
    }

    #page-wrap {
        max-width: 2100px;
    }

    /* Layout-Raster */
    .row {
        width: 100%;
        position: relative;
        display: flex;
        flex: 0 1 auto;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        margin: 0 auto;
        padding-left: 82px;
        padding-right: 82px;
    }

    .full-width {
        width: 100vw;
        margin: 0;
        padding: 0;
    }


    .justify-start {
      justify-self: start;
    }

    .justify-center {
      justify-self: center;
    }

    .justify-end {
      justify-self: end;
    }

    .justify-stretch {
      justify-self: stretch;
    }

        .align-start {
      align-self: start;
    }

    .align-center {
      align-self: center;
    }

    .align-end {
      align-self: end;
    }

    .align-stretch {
      align-self: stretch;
    }

    .col {
        float: left;
        padding: 0 18px;
    }

    .col-2 {
        width: calc(100% / 12 * 3);
    }

    .col-3 {
        width: calc(100% / 12 * 4);
    }

    .col-4 {
        width: calc(100% / 12 * 5);
    }

    .col-5 {
        width: calc(100% / 12 * 6);
    }

    .col-6 {
        width: calc(100% / 12 * 7);
    }

    .col-7 {
        width: calc(100% / 12 * 8);
    }

    .col-8 {
        width: calc(100% / 12 * 9);
    }

    .col-9 {
        width: calc(100% / 12 * 10);
    }

    .col-10 {
        width: calc(100% / 12 * 11);
    }

    .col-11 {
        width: calc(100% / 12 * 12);
    }

    .col-12 {
        width: calc(100% / 12 * 13);
    }

    .col-start-1 {
        margin-left: 0;
    }

    .col-start-2 {
        margin-left: calc(100% / 12 * 2);
    }

    .col-start-3 {
        margin-left: calc(100% / 12 * 3);
    }

    .col-start-4 {
        margin-left: calc(100% / 12 * 4);
    }

    .col-start-5 {
        margin-left: calc(100% / 12 * 5);
    }

    .col-start-6 {
        margin-left: calc(100% / 12 * 6);
    }

    .col-start-7 {
        margin-left: calc(100% / 12 * 7);
    }

    .col-start-8 {
        margin-left: calc(100% / 12 * 8);
    }

    .col-start-9 {
        margin-left: calc(100% / 12 * 9);
    }

    .col-start-10 {
        margin-left: calc(100% / 12 * 10);
    }

    .col-start-11 {
        margin-left: calc(100% / 12 * 11);
    }

    .col-start-12 {
        margin-left: calc(100% / 12 * 12);
    }

    /* Grundelemente */
    p:not(:last-child) {
        margin-bottom: 36px;
    }

    h1,
    h2,
    h3 {
        font-family: var(--font-family-main);
        color: var(--color-light);
        line-height: calc(1em + 10px);
        text-transform: uppercase;
        font-weight: normal;
        margin-bottom: 36px;
        letter-spacing: 5%;
    }

    span {
        display: block;
        line-height: calc(1em + 10px);
        text-transform: none;
        font-size: 30px;
        font-weight: normal;
        margin-bottom: 12px;
        opacity: .5;
    }

    span.sub-large {
        font-size: 60px;
        line-height: calc(1em + 10px);
    }

    h1 {
        font-size: 100px;
        margin-bottom: 12px;
    }

    h2 {
        font-size: 100px;
    }

    h3 {
        font-size: 80px;
        margin-bottom: 12px;
    }

    a {
        text-decoration: none
    }

    ul {
        list-style: none;
    }

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
    }

    dl dt {
        font-weight: bold;
    }

    video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(0);
        opacity: .3;
    }

    canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    /* Grundstyles */
    .btn {
        display: block;
        background-color: var(--color-light);
        color: var(--color-primary);
        padding: 24px 33px;
        border-radius: 2em;
        border: white solid 1px;
        text-decoration: none;
        letter-spacing: 5%;
        width: fit-content;
        transition: .3s;
        cursor: pointer;
    }

    .btn:hover,
    .btn:focus,
    .btn:active {
        background-color: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(20px);
        border: rgba(255, 255, 255, 0.2) solid 1px;
        color: white;
    }

    /* =========================================================
    Kontakt Button
    ========================================================= */
    .contact-btn {
        position: fixed;
        top: 50px;
        right: 5.5%;
        width: fit-content;
    }

    /* =========================================================
    ORBIT WRAPPER
    ========================================================= */

    .orbit-wrapper {
        position: relative;
        display: inline-flex;
        padding: 1px;
        border-radius: 999px;

        cursor: pointer;
        isolation: isolate;

        transition:
            transform .6s cubic-bezier(.44, 0, .56, 1);
    }


    /* =========================================================
    ORBIT BORDER
    ========================================================= */

    .orbit-border {
        position: absolute;
        inset: 0;

        border-radius: 999px;
        overflow: hidden;

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


    /* =========================================================
    SOFT ORBIT GLOW
    ========================================================= */

    .orbit-border::before {
        content: "";

        position: absolute;

        width: 220%;
        height: 220%;

        left: 50%;
        top: 50%;

        transform:
            translate(-50%, -50%);

        border-radius: 50%;

        background:
            conic-gradient(from 0deg,

                transparent 0deg,
                transparent 250deg,

                rgba(255, 255, 255, .03) 265deg,
                rgba(255, 255, 255, .12) 280deg,
                rgba(255, 255, 255, .35) 300deg,
                rgba(255, 255, 255, .75) 320deg,

                #fff 340deg,
                #fff 355deg,

                transparent 360deg);

        animation:
            orbit-spin 3.3s linear infinite;

        filter:
            blur(3px);
    }


    /* =========================================================
    SHARP ORBIT
    ========================================================= */

    .orbit-border::after {
        content: "";

        position: absolute;

        width: 220%;
        height: 220%;

        left: 50%;
        top: 50%;

        transform:
            translate(-50%, -50%);

        border-radius: 50%;

        background:
            conic-gradient(from 0deg,

                transparent 0deg,
                transparent 330deg,

                rgba(255, 255, 255, .15) 340deg,
                rgba(255, 255, 255, .6) 350deg,

                #fff 357deg,
                #fff 360deg);

        animation:
            orbit-spin 3.3s linear infinite;
    }


    /* =========================================================
    BUTTON
    ========================================================= */

    .orbit-button {
        position: relative;
        z-index: 2;

        display: flex;

        align-items: center;
        justify-content: center;

        padding: 20px 40px;

        min-width: 180px;
        min-height: 70px;

        border: none;
        border-radius: 999px;

        /*
        GLASS
        */

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

        backdrop-filter:
            blur(20px);

        -webkit-backdrop-filter:
            blur(20px);

        /*
        leichter innerer Lichtreflex
        */

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .18),
            inset 0 -1px 0 rgba(255, 255, 255, .05);

        color: #fff;

        white-space: nowrap;

        text-decoration: none;

        cursor: pointer;

        overflow: hidden;

        transition:
            background .45s cubic-bezier(.44, 0, .56, 1),
            color .45s cubic-bezier(.44, 0, .56, 1),
            box-shadow .45s cubic-bezier(.44, 0, .56, 1);
    }


    /* =========================================================
    GLASS EDGE
    ========================================================= */

    .orbit-wrapper::before {
        content: "";

        position: absolute;

        inset: 0;

        border-radius: 999px;

        border:
            1px solid rgba(255, 255, 255, .28);

        pointer-events: none;

        z-index: 3;
    }


    /* =========================================================
    HOVER
    ========================================================= */

    .orbit-wrapper:hover {
        transform:
            scale(1.04);
    }


    /*
    Weiss
    */

    .orbit-wrapper:hover .orbit-button {

        background:
            #fff;

        color:
            #000;

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;

        box-shadow:
            0 0 30px rgba(255, 255, 255, .12);
    }


    /*
    Orbit wird schneller
    */

    .orbit-wrapper:hover .orbit-border::before,
    .orbit-wrapper:hover .orbit-border::after {

        animation-duration:
            2.2s;
    }


    /* =========================================================
    ACTIVE / PRESS
    ========================================================= */

    .orbit-wrapper:active {
        transform:
            scale(.97);
    }


    /* =========================================================
    ORBIT ROTATION
    ========================================================= */

    @keyframes orbit-spin {

        from {
            transform:
                translate(-50%, -50%) rotate(0deg);
        }

        to {
            transform:
                translate(-50%, -50%) rotate(-360deg);
        }

    }


    /* =========================================================
    LABEL
    ========================================================= */

    .orbit-label {
        position: relative;
        z-index: 5;
    }

    .icon {
        padding: 18px 61px 18px 33px;
        position: relative;
    }

    .icon-next:after {
        content: '';
        background: url('images/icons/icon-arrow.svg') no-repeat center / cover;
        filter: invert(1);
        width: 20px;
        height: 20px;
        position: absolute;
        margin-left: 8px;
        margin-top: 4px;
    }

    .icon-next:hover:after,
    .icon-next:focus:after,
    .icon-next:active:after {
        filter: invert(0);
    }

    .bg-image-container {
        position: relative;
        width: 100%;
        padding-top: 150px;
        padding-bottom: 150px;
    }

    @media (max-width: 800px) {
        .bg-image-container {
            padding-top: 80px;
            padding-bottom: 80px;
        }
    }

    .bg-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
    }

    /* Navigation */
    .btt {
        position: fixed;
        right: 50px;
        bottom: 50px;
        outline: var(--base-border);
        outline-color: var(--color-light);
        z-index: 1000;
        height: 50px;
        width: 50px;
        padding: 0;
    }

    .icon-top:after {
        content: '';
        background: url('images/icons/icon-arrow.svg') no-repeat center / cover;
        transform: rotate(-90deg);
        width: 20px;
        height: 20px;
        position: absolute;
        bottom: 15px;
        left: 15px;
    }

    .icon-top:hover:after,
    .icon-top:focus:after,
    .icon-top:active:after {
        filter: invert(1);
    }

    .desktop-nav {
        justify-content: center;
    }

    nav {
        position: sticky !important;
        top: 50px;
        z-index: 1000;
    }

    /* .top-bar {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 12px;
        opacity: .5;
    }

    .top-bar li {
        padding-left: 20px;
    }

    .top-bar li:first-of-type {
        padding-left: 0;
        padding-right: 20px;
        border-right: 1px solid #fbfbfb83;
    }

    .top-bar li a {
        color: var(--color-light);
    } */
    .box {
        padding: 100px 150px;
    }

    .glass {
        background: rgba(80, 80, 80, 0.08);
        backdrop-filter: blur(24px) saturate(140%);
        -webkit-backdrop-filter: blur(24px) saturate(140%);
        border: 1px solid rgba(120, 120, 120, 0.25);
        border-radius: 1em;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.35),
            inset 0 -1px 0 rgba(0, 0, 0, 0.08),
            0 10px 35px rgba(0, 0, 0, 0.12);
        transition:
            color .4s ease,
            border-color .4s ease;
    }

    .glass:before {
        content: "";

        position: absolute;
        inset: 0;

        pointer-events: none;

        background:
            linear-gradient(135deg,
                rgba(255, 255, 255, .18),
                rgba(255, 255, 255, 0) 55%);

        border-radius: inherit;
    }


    ul.navi {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        width: fit-content;
        padding: 20px 30px;
        position: relative;
        overflow: hidden;
        color: #fff;
        gap: 50px;
        font-size: 21px;
        font-weight: 200;
        z-index: 1000;
    }

    ul.navi li a {
        color: var(--color-light);
        padding: 18px 24px;
        border-radius: 1em;
        transition: .2s;
    }

    ul.navi li a:hover,
    ul.navi li a:active {
        text-decoration: underline;
    }

    /* Mobile Navi */
    @media screen and (max-width: 1279px) {
        .desktop-nav {
            display: none;
        }

        .mobile-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--color-light);
            box-shadow: var(--box-shadow);
            padding: 5px 2rem;
        }

        .mobile-nav>a {
            line-height: 1;
        }

        .mobile-nav .logo {
            line-height: 1;
            width: 55px;
        }

        .nav-toggle {
            display: none;
        }

        label.nav-toggle-label {
            display: block;
            width: 2rem;
            height: 2rem;
            cursor: pointer;
            position: relative;
            margin-bottom: 0;
        }

        .nav-toggle-label span,
        .nav-toggle-label span::before,
        .nav-toggle-label span::after {
            display: block;
            background: var(--color-primary);
            height: 2px;
            width: 100%;
            position: absolute;

        }

        .nav-toggle-label span {
            top: 50%;
            transform: translateY(-50%);
        }

        .nav-toggle-label span::before {
            content: '';
            top: -10px;
        }

        .nav-toggle-label span::after {
            content: '';
            top: 10px;
        }

        .nav-overlay {
            display: none;
            position: fixed;
            top: 64px;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            z-index: 500;
        }

        .nav-menu {
            list-style: none;
            padding: 2rem 0;
            margin: 0;
            position: fixed;
            top: 64px;
            right: -400px;
            width: 400px;
            height: 100%;
            background: var(--color-light);
            display: flex;
            flex-direction: column;
            transition: right 0.3s ease;
            z-index: 1000;
        }

        .nav-menu li a {
            display: block;
            color: var(--color-primary);
            text-decoration: none;
            padding: 1rem;
            width: 100%;
            border-bottom: var(--base-border);
            border-color: var(--color-primary);
        }

        .nav-menu li:last-of-type {
            background-color: var(--color-primary);
            padding: 2rem 1rem;
        }

        .nav-menu label.icon-login {
            font-size: 21px;
            padding: 0;
        }

        .nav-menu form {
            padding-top: 2rem;
        }

        .nav-menu input {
            width: 100%;
        }

        .nav-menu label {
            color: var(--color-light);
        }

        .nav-toggle:checked~.nav-menu {
            right: 0;
        }

        .nav-toggle:checked~.nav-overlay {
            display: block;
        }
    }

    @media screen and (min-width: 1279px) {
        .mobile-nav {
            display: none;
        }
    }

    /* Header */
    header {
        position: relative;
        background-color: var(--color-primary);
        top: -80px;
        z-index: 3;
    }

    #header {
        width: 100%;
        height: 1150px;
        object-fit: contain;
        object-position: top;
    }

    #header .bg-image {
        position: absolute;
        top: 0;
        left: unset;
        right: 0;
        height: 100%;
        width: auto;
        height: 1150px;
        max-height: 100vh;
        object-fit: contain;
        z-index: -1;
    }

    #header:after {
        content: '';
        position: absolute;
        inset: 0;
        width: 100%;
        height: 1150px;
        background: linear-gradient(to bottom,
                rgba(255, 255, 255, .1.5) 0%,
                rgba(255, 255, 255, 0) 100%);
    }

    #header .content {
        margin-top: 25%;
    }

    #header span {
        margin-bottom: 36px;
        opacity: 1;
    }

    #header p {
        max-width: 410px;
    }

    /* Main */
    main {
        position: relative;
        top: -80px;
        z-index: 2;

        background-color: var(--color-primary);

        box-shadow:
            0 20px 70px rgba(0, 0, 0, .35);
    }


    /*
  Auch dein Header / Sections bleiben über dem Footer.
*/


    main section {
        padding: 150px 0;
    }

    main ul li:not(:last-of-type):after {
        content: '';
        background: url('images/layout/chalk-brush-horizontal.svg') no-repeat center / cover;
        width: 100%;
        height: 3px;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    main ul li {
        position: relative;
        padding: 1rem 1rem 1rem 28px;
    }

    /* ==================================================
    PARALLAX IMAGE
    ================================================== */

    .parallax-container {
        position: relative;
        height: 100vh;
        overflow: hidden;
        isolation: isolate;
    }

    .parallax-image {
        position: absolute;
        inset: 0;
        z-index: -1;
        overflow: hidden;
        pointer-events: none;
    }

    .parallax-image img {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: -10%;
        object-fit: cover;
        object-position: right;
        display: block;
        will-change: transform;
    }

    /* ==================================================
    CONTENT
    ================================================== */

    .parallax-content {
        position: relative;
        z-index: 2;
    }

    .horizontal-section {
        position: relative;
        width: 100%;
    }

    .horizontal-sticky {
        position: sticky;
        top: 0;

        width: 100%;
        height: 100vh;

        overflow: hidden;
    }

    .horizontal-track {
        display: flex;

        width: max-content;
        height: 100%;

        will-change: transform;
    }

    .panel {
        position: relative;

        width: 100vw;
        height: 100vh;

        flex: 0 0 100vw;

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

        font-size: 15vw;
        color: white;
    }

    .panel:nth-child(1) {
        background: #111;
    }

    .panel:nth-child(2) {
        background: #333;
    }

    .panel:nth-child(3) {
        background: #666;
    }

    .panel:nth-child(4) {
        background: #999;
    }

    .after {
        height: 100vh;
        display: grid;
        place-items: center;
        background: black;
        color: white;
    }

    /*Lebenslauf*/
    /* ======================================================
        EXPERIENCE
        ====================================================== */

    .sun-experience {

        position: relative;

        height: 500vh;
    }


    /* ======================================================
        STICKY STAGE
        ====================================================== */

    .sun-stage {

        position: sticky;

        top: 0;

        width: 100%;
        height: 100vh;

        overflow: hidden;

        background: #fff;
    }


    /* ======================================================
        WHITE BASE
        ====================================================== */

    .white-layer {

        position: absolute;

        inset: 0;

        background: #fff;

        z-index: 1;

        pointer-events: none;
    }


    /* ======================================================
        BLACK BACKGROUND
        ====================================================== */

    .black-layer {

        position: absolute;

        inset: 0;

        background: #000;

        opacity: 0;

        z-index: 2;

        pointer-events: none;
    }


    /* ======================================================
        HERO
        ====================================================== */

    .hero {

        position: absolute;

        inset: 0;

        z-index: 10;

        pointer-events: none;
    }


    /* ======================================================
        RADIAL BLACK BLUR

        Der schwarze Bereich entsteht
        in der Mitte und breitet sich
        nach außen aus.
        ====================================================== */

    .radial-blur {

        position: absolute;

        left: 50%;
        top: 50%;

        width: 100vmax;
        height: 100vmax;

        border-radius: 50%;

        transform:
            translate(-50%, -50%) scale(0);

        background:

            radial-gradient(circle at center,

                rgba(0, 0, 0, 1) 0%,

                rgba(0, 0, 0, 1) 12%,

                rgba(0, 0, 0, .98) 18%,

                rgba(0, 0, 0, .88) 27%,

                rgba(0, 0, 0, .68) 38%,

                rgba(0, 0, 0, .42) 50%,

                rgba(0, 0, 0, .20) 62%,

                rgba(0, 0, 0, .07) 72%,

                rgba(0, 0, 0, 0) 82%);

        z-index: 2;

        pointer-events: none;

        will-change:
            transform,
            opacity;
    }


    /* ======================================================
        HERO CONTENT
        ====================================================== */

    .hero-content {

        position: absolute;

        inset: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        text-align: center;

        z-index: 5;

        pointer-events: none;
    }


    .hero-content h3 {

        margin: 0;

        color: #000;

        font-size:
            clamp(55px,
                9vw,
                150px);

        line-height: .88;

        letter-spacing: -.07em;

        font-weight: 400;

        will-change:
            color,
            opacity;
    }

    .hero-content h3 span {
        letter-spacing: 0px;
    }


    /* ======================================================
        SUN SYSTEM

        Wichtig:

        Das gesamte System sitzt exakt
        in der Mitte des Screens.

        Die Linie und Sonne verwenden
        beide left: 50%.
        ====================================================== */

    .sun-system {

        position: absolute;

        inset: 0;

        z-index: 20;

        overflow: hidden;

        pointer-events: none;
    }


    /* ======================================================
        SUN

        EXAKT ZENTRIERT

        Keine margin-left.

        Keine zusätzliche horizontale
        Positionierung.

        translateX(-50%) sorgt dafür,
        dass die Mitte der Sonne exakt
        auf left: 50% liegt.
        ====================================================== */

    .sun {

        position: absolute;

        left: 50%;

        top: 0;

        width: 82px;
        height: 82px;

        border-radius: 50%;

        background: #fff;

        opacity: 0;

        transform:
            translateX(-50%) translateY(-120px);

        z-index: 5;

        will-change:
            transform,
            opacity;
    }


    /* ======================================================
        SUN LINE

        Ebenfalls exakt bei left: 50%.

        Dadurch läuft die Linie genau
        durch die Mitte der Sonne.
        ====================================================== */

    .sun-line {

        position: absolute;

        left: 50%;

        top: 0;

        width: 1px;

        height: 0;

        transform:
            translateX(-50%);

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

        opacity: 0;

        z-index: 2;

        will-change:
            height,
            opacity;
    }


    /* ======================================================
        DAY CONTENT
        ====================================================== */

    .day-content {

        position: absolute;

        inset: 0;

        z-index: 30;

        pointer-events: none;
    }


    /* ======================================================
        DAY ITEM
        ====================================================== */

    .day-item {

        position: absolute;

        inset: 0;

        display: grid;

        grid-template-columns:
            1fr 1fr;

        align-items: center;

        opacity: 0;

        color: #fff;

        will-change:
            opacity,
            transform;
    }


    /* ======================================================
        LEFT
        ====================================================== */

    .day-left {

        text-align: right;

        padding-right:
            130px;
    }


    /* ======================================================
        RIGHT
        ====================================================== */

    .day-right {

        text-align: left;

        padding-left:
            130px;
    }


    /* ======================================================
        DAY HEADINGS
        ====================================================== */

    .day-left h2 {

        margin:
            0 0 14px;

        font-size:
            clamp(32px,
                4vw,
                68px);

        line-height: .95;

        font-weight: 400;

        letter-spacing: -.05em;
    }


    .day-right h3 {

        margin:
            0 0 14px;

        font-size:
            clamp(25px,
                3vw,
                50px);

        line-height: .95;

        font-weight: 400;

        letter-spacing: -.05em;
    }


    /* ======================================================
        DAY PARAGRAPHS
        ====================================================== */

    .day-left p,
    .day-right p {

        margin: 0;

        max-width:
            300px;

        font-size:
            16px;

        line-height:
            1.5;

        opacity:
            .65;
    }


    .day-left p {

        margin-left:
            auto;
    }


    /* ======================================================
        FINAL SECTION

        KOMPLETT OHNE SONNE
        KOMPLETT OHNE LINIE
        ====================================================== */

    .final-section {

        position: absolute;

        inset: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        text-align: center;

        background: #000;

        color: #fff;

        opacity: 0;

        z-index: 100;

        pointer-events: none;
    }


    .final-section h2 {

        margin: 0;

        padding:
            0 30px;

        font-size:
            clamp(55px,
                9vw,
                150px);

        line-height:
            .88;

        letter-spacing:
            -.07em;

        font-weight:
            400;
    }


    /* ======================================================
        MOBILE
        ====================================================== */

    @media (max-width: 768px) {


        .sun {

            width: 58px;

            height: 58px;

        }


        .day-left {

            padding-right:
                70px;
        }


        .day-right {

            padding-left:
                70px;
        }


        .day-left h2 {

            font-size:
                30px;
        }


        .day-right h3 {

            font-size:
                24px;
        }


        .day-left p,
        .day-right p {

            font-size:
                14px;
        }
    }

    /* ==================================================
            CAROUSEL
            ================================================== */

    .magnetic-carousel {

        width: 100%;
        height: 520px;

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

        gap: 16px;

        position: relative;

        overflow: visible;

        user-select: none;

    }


    /* ==================================================
            ITEMS
            ================================================== */

    .carousel-item {

        flex: none;

        width: 100px;
        height: 340px;

        overflow: hidden;

        position: relative;

        cursor: pointer;

        background-color: #111;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        /*
                * Wichtig:
                *
                * Keine CSS transition für width/height.
                *
                * Die Werte werden direkt über requestAnimationFrame
                * animiert. Dadurch folgt das Carousel schneller
                * und ohne doppelte Animation.
                */

        will-change:
            width,
            height,
            filter,
            opacity;

        transform: translateZ(0);

        z-index: 2;

    }


    /* ==================================================
            OPEN
            ================================================== */

    .carousel-item.open {

        width: 500px !important;
        height: 500px !important;

        z-index: 10;

        transition:
            filter .3s ease,
            opacity .3s ease;

    }


    /* ==================================================
            BLURRED
            ================================================== */

    .carousel-item.blurred {

        filter: blur(2px);

        opacity: .6;

        transition:
            filter .3s ease,
            opacity .3s ease;

    }


    /* ==================================================
            BACKDROP
            ================================================== */

    .carousel-backdrop {

        position: fixed;
        inset: 0;

        z-index: 5;

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        background:
            rgba(0, 0, 0, .35);

        backdrop-filter:
            blur(3px);

        -webkit-backdrop-filter:
            blur(3px);

        transition:
            opacity .3s ease,
            visibility .3s ease;

    }


    .carousel-backdrop.active {

        opacity: 1;
        visibility: visible;

        pointer-events: auto;

    }


    /* ==================================================
            MOBILE
            ================================================== */

    @media (max-width: 900px) {

        .magnetic-carousel {

            height: 420px;
            gap: 8px;

        }


        .carousel-item {

            width: 55px;
            height: 280px;

        }


        .carousel-item.open {

            width: min(80vw, 500px) !important;
            height: min(80vw, 500px) !important;

        }

    }

    .skill-container {
        padding: 200px 0;
        display: flex;
        align-items: flex-start;
        gap: 40px;
    }

    /* Skill-Überschrift */
    .skill-container h2 {
        font-size: 48px;
        line-height: 1;
        font-weight: 700;
        margin: 0;
        padding: 0;
        text-align: center;
        position: sticky;
        top: 250px;
        transform: rotate(-90deg) translate(-36%, 50%);
        text-transform: uppercase;
        flex: 1 1 fit-content;
        height: fit-content;
    }

    /* Skill Container */
    .skills-list {
        flex: 1 1 auto;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* Einzelner Skill */
    .skill-item {
        font-size: clamp(2rem, 8vw, 4rem);
        font-weight: 700;
        line-height: 0.9;
        text-transform: uppercase;
        white-space: nowrap;

        margin: 0;
        padding: 0;

        opacity: 0.3;
        transform: scale(1);

        will-change: transform, opacity;

        transition:
            transform 0.1s ease-in-out,
            opacity 0.1s ease-in-out;
    }

    /* Aktiver Skill */
    .skill-item.active {
        transform: scale(1.02);
        opacity: 1;
    }

    /* Mobile */
    @media (max-width: 768px) {
        .container {
            padding: 200px 20px 100vh;
            gap: 20px;
        }

        .container h1 {
            font-size: 24px;
            top: 80px;
        }

        .skills-list {
            gap: 16px;
        }

        .skill-item {
            font-size: clamp(2rem, 10vw, 4rem);
        }
    }



    /* =========================================================
   WOLF FOOTER — STICKY REVEAL
========================================================= */

    .footer-wolf {
        --wolf-progress: 0;

        position: sticky;
        bottom: 0;

        z-index: 0;

        min-height: 100vh;

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        padding: 35px 4vw 25px;

        background: #fff;
        color: #000;

        overflow: hidden;

        /*
    Der Footer liegt hinter dem eigentlichen Seiteninhalt.
  */
        isolation: isolate;
    }


    /* =========================================================
   SCHATTEN / ÜBERGANG
========================================================= */

    .footer-wolf::before {
        content: "";

        position: absolute;
        inset: 0;

        background: #fff;

        z-index: -1;

        transform:
            translateY(calc((1 - var(--wolf-progress)) * 40px));

        opacity:
            calc(.75 + (var(--wolf-progress) * .25));
    }


    /* =========================================================
   TOP
========================================================= */

    .wolf-top {
        position: relative;
        z-index: 2;

        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        font-size: 13px;
        line-height: 1.2;

        text-transform: uppercase;
        letter-spacing: .08em;
    }


    /* =========================================================
   LINKS
========================================================= */

    .wolf-content {
        position: relative;
        z-index: 2;

        display: grid;
        grid-template-columns: repeat(3, 1fr);

        gap: 40px;

        margin-top: auto;
        margin-bottom: 5vh;
    }


    .wolf-column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 8px;
    }


    .wolf-column>span {
        margin-bottom: 12px;

        opacity: .45;

        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .12em;
    }


    .wolf-column a {
        position: relative;

        color: inherit;
        text-decoration: none;

        font-size: clamp(16px, 1.4vw, 20px);

        transition:
            opacity .3s ease,
            transform .3s ease;
    }


    .wolf-column a::after {
        content: "";

        position: absolute;

        left: 0;
        bottom: -3px;

        width: 100%;
        height: 1px;

        background: currentColor;

        transform: scaleX(0);
        transform-origin: right;

        transition:
            transform .4s cubic-bezier(.77, 0, .18, 1);
    }


    .wolf-column a:hover {
        opacity: .55;

        transform: translateX(6px);
    }


    .wolf-column a:hover::after {
        transform: scaleX(1);
        transform-origin: left;
    }

    /* =========================================================
   BOTTOM
========================================================= */

    .wolf-bottom {
        position: relative;
        z-index: 2;

        display: flex;
        justify-content: space-between;

        padding-top: 20px;
        margin-top: 30px;

        border-top: 1px solid rgba(0, 0, 0, .25);

        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .06em;
    }


    /* =========================================================
   DEIN HAUPTINHALT LIEGT ÜBER DEM FOOTER
========================================================= */

    /*
  Das ist der entscheidende Teil für den Reveal.
*/




    /* =========================================================
   FOOTER REVEAL
========================================================= */

    .footer-wolf.wolf-active .wolf-title {
        transform:
            translateY(calc((1 - var(--wolf-progress)) * 80px));
    }


    /* =========================================================
   MOBILE
========================================================= */

    @media (max-width: 768px) {

        .footer-wolf {
            min-height: 90vh;

            padding:
                25px 20px 20px;
        }


        .wolf-top {
            font-size: 11px;
        }


        .wolf-content {
            grid-template-columns: repeat(2, 1fr);

            gap: 35px 20px;

            margin-bottom: 7vh;
        }


        .wolf-column:last-child {
            grid-column: 1 / -1;
        }


        .wolf-title {
            font-size: 22vw;

            line-height: .76;
        }


        .wolf-title span:last-child {
            margin-left: 8vw;
        }


        .wolf-bottom {
            flex-direction: column;
            gap: 7px;

            font-size: 10px;
        }
    }


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

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

        .footer-wolf,
        .wolf-title,
        .footer-wolf::before {
            transition: none !important;
            transform: none !important;
        }
    }

    /* Collapser */
    .collapser {
        padding-top: 1rem;
        width: 100%;
    }

    .collapser-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .collapser-header {
        display: block;
        position: relative;
        width: -webkit-fill-available;
        text-align: left;
        padding: 18px 33px;
        font-weight: bold;
        background-color: var(--color-primary);
        color: var(--color-light);
        cursor: pointer;
        margin-bottom: 8px;
        transition: .3s;
    }

    .collapser-header:after {
        content: '';
        background: url('images/icons/icon-arrow.svg') no-repeat center / cover;
        transform: rotate(90deg);
        width: 20px;
        height: 20px;
        position: absolute;
        top: 19px;
        right: 33px;
        transition: .3s;
    }

    .collapser-header:hover,
    .collapser-header.active {
        background-color: var(--color-light);
        color: var(--color-primary);
        outline: var(--base-border);
    }

    .collapser-header:hover:after,
    .collapser-header:focus:after {
        filter: invert(1);
    }

    .collapser-header.active:after {
        filter: invert(1);
        transform: rotate(-90deg);
    }

    .collapser-content.open {
        height: fit-content;
        max-height: 1000px;
        width: 100%;
        box-shadow: var(--box-shadow);
        margin-bottom: 8px;
    }

    .card img {
        height: 250px;
        width: 100%;
    }

    /* Lenis */
    html.lenis,
    html.lenis body {
        height: auto;
    }

    .lenis:not(.lenis-autoToggle).lenis-stopped {
        overflow: clip;
    }

    .lenis [data-lenis-prevent],
    .lenis [data-lenis-prevent-wheel],
    .lenis [data-lenis-prevent-touch],
    .lenis [data-lenis-prevent-vertical],
    .lenis [data-lenis-prevent-horizontal] {
        overscroll-behavior: contain;
    }

    .lenis.lenis-smooth iframe {
        pointer-events: none;
    }

    .lenis.lenis-autoToggle {
        transition-property: overflow;
        transition-duration: 1ms;
        transition-behavior: allow-discrete;
    }