/* ==========================================
            SCHRIFTEN
            ========================================== */

            @font-face{
                font-family:"Orgon-Regular";
                src:
                    url("../../assets/fonts/Orgon-Regular/c459ef37-dfe6-4796-9501-e912a49b1fbd.woff2")
                    format("woff2"),
                    url("../../assets/fonts/Orgon-Regular/ee9dd76e-600e-4802-a7fe-73706e308a23.woff")
                    format("woff");
                font-display:swap;
            }

            @font-face{
                font-family:"Inter";
                src:local("Inter");
                font-display:swap;
            }


            /* ==========================================
            GRUNDLAGEN
            ========================================== */

            :root{
                --green:#95c11f;
                --white:#ffffff;
                --sand:#f6f4ef; /* Aktuell */  /*evtl. --sand:#f8f7f3; oder --sand:#faf9f6;*/
                --graphite:#1f1f1f;
                --grey:#666666;
                --line:#deded8;
                --ease:cubic-bezier(.22,.61,.36,1);
            }

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

            html{
                width:100%;
                min-height:100%;
                scroll-behavior:auto;
                scrollbar-width:none;
            }

            body{
                width:100%;
                min-height:100%;
                overflow-x:hidden;
                background:var(--white);
                color:var(--graphite);
                font-family:"Inter",Arial,sans-serif;
                font-weight:400;
                -ms-overflow-style:none;
            }

            body::-webkit-scrollbar{
                display:none;
            }

            button,
            a{
                font:inherit;
            }

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

            main{
                width:100%;
            }

            .section-kicker{
                display:block;
                margin-bottom:22px;
                color:var(--green);
                font-size:12px;
                font-weight:500;
                letter-spacing:.17em;
                text-transform:uppercase;
            }


            /* ==========================================
            HEADER
            Erst nach dem Opening sichtbar
            ========================================== */

            .site-header{
                position:fixed;
                top:0;
                left:0;
                z-index:1000;

                width:100%;
                padding:16px 0;

                background:rgba(255,255,255,.93);
                border-bottom:1px solid rgba(31,31,31,.07);
                box-shadow:0 10px 34px rgba(0,0,0,.045);

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

                opacity:0;
                visibility:hidden;
                pointer-events:none;
                transform:translateY(-100%);

                transition:
                    opacity .4s var(--ease),
                    visibility .4s var(--ease),
                    transform .5s var(--ease);
            }

            .site-header.is-visible{
                opacity:1;
                visibility:visible;
                pointer-events:auto;
                transform:translateY(0);
            }

            .site-header__inner{
                width:min(1320px,92%);
                margin:0 auto;

                display:flex;
                align-items:center;
                justify-content:space-between;
                gap:40px;
            }

            .site-header__logo{
                position:relative;

                width:auto;
                height:72px;

                display:flex;
                align-items:center;

                flex:0 0 auto;

                margin:0;
                padding:0;
                border:0;
                background:transparent;
                box-shadow:none;

                appearance:none;
                -webkit-appearance:none;

                cursor:pointer;
            }

            .site-header__logo:hover,
            .site-header__logo:focus,
            .site-header__logo:active{
                border:0;
                background:transparent;
                box-shadow:none;
                outline:none;
            }

            .site-header__logo img{
                position:static;

                display:block;
                width:auto;
                height:72px;
                max-height:none;

                object-fit:contain;
                transform:none;
            }

            .site-header__nav{
                display:flex;
                align-items:center;
                gap:42px;
            }

            .site-header__nav a{
                position:relative;

                color:var(--graphite);
                text-decoration:none;

                font-size:11px;
                font-weight:400;
                letter-spacing:.15em;
                text-transform:uppercase;

                transition:color .3s var(--ease);
            }

            .site-header__nav a::after{
                content:"";

                position:absolute;
                left:0;
                bottom:-7px;

                width:100%;
                height:1px;

                background:var(--green);

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

                transition:transform .3s var(--ease);
            }

            .site-header__nav a:hover{
                color:var(--green);
            }

            .site-header__nav a:hover::after{
                transform:scaleX(1);
            }


            /* ==========================================
            OPENING HERO
            Exaktes Vollbild
            ========================================== */

            .opening{
                position:relative;

                width:100%;
                height:var(--viewport-height, 100vh);
                min-height:var(--viewport-height, 100vh);

                overflow:hidden;

                background:#0d100e;
                color:var(--white);
            }

            .opening__video{
                position:absolute;
                inset:0;

                width:100%;
                height:100%;

                object-fit:cover;
                object-position:center center;

                opacity:1;
                transform:scale(1.035);

                animation:openingVideoDrift 22s ease-in-out infinite alternate;
            }

            @keyframes openingVideoDrift{
                from{
                    transform:scale(1.035);
                }

                to{
                    transform:scale(1.075);
                }
            }

            .opening__overlay{
                position:absolute;
                inset:0;
                z-index:1;

                pointer-events:none;

                background:
                    linear-gradient(
                        180deg,
                        rgba(0,0,0,.24) 0%,
                        rgba(0,0,0,.04) 48%,
                        rgba(0,0,0,.31) 100%
                    ),
                    linear-gradient(
                        90deg,
                        rgba(0,0,0,.12) 0%,
                        rgba(0,0,0,.01) 50%,
                        rgba(0,0,0,.09) 100%
                    );
            }

            .opening__logo{
                position:absolute;
                top:24px;
                left:50%;
                z-index:2;

                width:clamp(175px,15vw,235px);

                pointer-events:none;

                opacity:0;
                transform:translate(-50%,16px);

                animation:openingLogoIn 1s .25s var(--ease) forwards;
            }

            .opening__logo img{
                width:100%;
                height:auto;
                object-fit:contain;
            }

            @keyframes openingLogoIn{
                to{
                    opacity:1;
                    transform:translate(-50%,0);
                }
            }

            .opening__scroll{
                position:absolute;
                left:50%;
                bottom:52px;
                z-index:2;

                display:flex;
                flex-direction:column;
                align-items:center;
                gap:12px;

                color:rgba(255,255,255,.52);
                text-decoration:none;

                opacity:0;
                transform:translate(-50%,16px);

                animation:openingScrollIn .9s .7s var(--ease) forwards;
                transition:color .3s var(--ease);
            }

            @keyframes openingScrollIn{
                to{
                    opacity:1;
                    transform:translate(-50%,0);
                }
            }

            .opening__scroll span{
                font-size:9px;
                font-weight:400;
                line-height:1;

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

            .opening__scroll::after{
                content:"";

                width:1px;
                height:52px;

                background:currentColor;

                transform-origin:top;

                animation:openingScrollLine 1.8s var(--ease) infinite;
            }

            .opening__scroll:hover{
                color:rgba(255,255,255,.9);
            }

            @keyframes openingScrollLine{
                0%,
                100%{
                    transform:scaleY(.32);
                    opacity:.32;
                }

                50%{
                    transform:scaleY(1);
                    opacity:1;
                }
            }


            /* ==========================================
            INTRO / SECTION 1
            ========================================== */

            .intro{
                position:relative;

                width:100%;
                min-height:100vh;

                padding:
                    clamp(175px,14vw,240px)
                    0
                    clamp(145px,12vw,210px);

                background:var(--sand);
            }

            .intro__inner{
                width:min(1160px,88%);
                margin:0 auto;
            }

            .intro__title{
                width:fit-content;
                max-width:920px;

                margin:0;
                transform:translateX(-24px);

                font-family:"Orgon-Regular","Inter",sans-serif;
                font-size:clamp(3.5rem,5.45vw,5.85rem);
                font-weight:400;
                line-height:.98;
                letter-spacing:-.04em;

                color:var(--graphite);
            }

            .intro__title span{
                display:block;
                white-space:nowrap;
            }

            .intro__copy{
                width:min(100%,500px);

                margin-top:clamp(52px,5vw,82px);
                margin-right:clamp(35px,5vw,70px);
                margin-left:auto;
            }

            .intro__copy p{
                margin:0;

                color:var(--grey);

                font-size:clamp(1rem,1.08vw,1.14rem);
                font-weight:400;
                line-height:1.76;
            }

            .intro__copy p + p{
                margin-top:28px;
            }


            /* ==========================================
            INTRO / TABLET
            ========================================== */

            @media(max-width:900px){

                .intro{
                    min-height:auto;

                    padding:
                        150px
                        0
                        135px;
                }

                .intro__inner{
                    width:88%;
                }

                .intro__title{
                    max-width:100%;

                    margin-left:0;

                    font-size:clamp(3.1rem,8vw,5.2rem);
                }

                .intro__copy{
                    width:min(100%,520px);

                    margin-top:64px;
                    margin-right:0;
                    margin-left:auto;
                }
            }


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

            @media(max-width:700px){

                .intro{
                    padding:
                        115px
                        0
                        105px;
                }

                .intro__title{
                width:100%;
                max-width:none;

                margin:0;

                transform:none;

                font-size:clamp(2.65rem,11.5vw,4rem);
                line-height:1;
                letter-spacing:-.035em;
            }

            .intro__title span{
                display:block;
                white-space:normal;
            }

            .intro__copy{
                width:100%;
                max-width:100%;

                margin-top:52px;
                margin-left:0;
                margin-right:0;
            }

                .intro__copy p{
                    font-size:1rem;
                    line-height:1.7;
                }

                .intro__copy p + p{
                    margin-top:24px;
                }
            }


            /* ==========================================
            TEAM
            ========================================== */

            .team{
                padding:170px 0;
                background:var(--white);
            }

            .team__inner{
                width:min(1320px,92%);
                margin:0 auto;
            }

            .team__head{
                max-width:900px;
                margin-bottom:80px;
            }

            .team__head h2{
                font-family:"Orgon-Regular","Inter",sans-serif;
                font-size:clamp(3rem,5.5vw,5.8rem);
                font-weight:400;
                line-height:.98;
                letter-spacing:-.04em;
            }

            .team__layout{
                display:grid;
                grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr);
                gap:clamp(52px,6vw,82px);
                align-items:center;
            }

            .team__image img{
                width:100%;
                height:560px;
                object-fit:cover;
            }

            .team__text{
                width:100%;
                max-width:none;
            }

            .team__people{
                display:grid;
                gap:30px;
            }

            .team__people > div{
                padding-top:22px;
                border-top:1px solid var(--line);
            }

            .team__people strong{
                display:block;
                margin-bottom:7px;

                color:var(--graphite);

                font-size:1rem;
                font-weight:600;
                line-height:1.4;
            }

            .team__people span{
                display:block;
                max-width:390px;

                color:var(--grey);

                font-size:.95rem;
                font-weight:400;
                line-height:1.6;
            }


            /* ==========================================
            KONTAKT
            ========================================== */

            .contact{
                padding:180px 0;
                background:var(--graphite);
                color:var(--white);
            }

            .contact__inner{
                width:min(1320px,92%);
                margin:0 auto;

                display:grid;
                grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr);
                gap:clamp(52px,6vw,82px);
                align-items:center;
            }

            .contact h2{
                font-family:"Orgon-Regular","Inter",sans-serif;
                font-size:clamp(3.5rem,7vw,7.5rem);
                font-weight:400;
                line-height:.94;
                letter-spacing:-.05em;
            }

            .contact__content p{
                margin-top:32px;

                color:rgba(255,255,255,.72);
                font-size:1.08rem;
                line-height:1.7;
            }

            .contact__mail{
                display:inline-flex;
                align-items:center;
                gap:14px;

                margin-top:52px;

                color:var(--white);
                text-decoration:none;

                font-family:"Orgon-Regular","Inter",sans-serif;
                font-size:clamp(1.4rem,2.35vw,2.25rem);
                line-height:1.15;
            }

            .contact__mail:hover{
                color:var(--green);
            }

            .contact__details{
                display:grid;
                gap:32px;
                width:100%;
                max-width:none;
            }

            .contact__details > div{
                padding-top:22px;
                border-top:1px solid rgba(255,255,255,.16);
            }

            .contact__details span{
                display:block;
                margin-bottom:10px;

                color:var(--green);
                font-size:11px;
                letter-spacing:.15em;
                text-transform:uppercase;
            }

            .contact__details a,
            .contact__details p{
                color:rgba(255,255,255,.78);
                text-decoration:none;
                font-size:1rem;
                line-height:1.6;
            }


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

            .footer{
                padding:30px 0;
                background:#111412;
                color:var(--white);
                border-top:1px solid rgba(255,255,255,.07);
            }

            .footer__inner{
                width:min(1320px,92%);
                margin:0 auto;

                display:flex;
                align-items:center;
                justify-content:space-between;
                gap:30px;
            }

            .footer__brand{
                color:rgba(255,255,255,.42);
                font-size:.82rem;
            }

            .footer__nav{
                display:flex;
                gap:30px;
            }

            .footer__nav a{
                color:rgba(255,255,255,.6);
                text-decoration:none;
                font-size:.82rem;
            }

            .footer__nav a:hover{
                color:var(--white);
            }


            /* ==========================================
            TABLET
            ========================================== */

            @media(max-width:900px){

                .site-header__logo{
                    width:auto;
                    height:64px;
                }

                .site-header__logo img{
                    width:auto;
                    height:64px;
                    max-height:none;
                }

                .site-header__nav{
                    gap:24px;
                }

                .site-header__nav a{
                    font-size:10px;
                    letter-spacing:.1em;
                }

                .opening__logo{
                    top:22px;
                    width:clamp(165px,20vw,205px);
                }

                .intro__inner{
                    display:block;
                    width:88%;
                }

                .intro__copy{
                    margin-top:50px;
                    margin-left:auto;
                }

                .workfield--media{
                    grid-template-columns:1fr;
                    gap:44px;
                }

                .workfield--media .workfield__image{
                    order:-1;
                }

                .competencies{
                    grid-template-columns:1fr;
                }

                .team__text{
                    max-width:560px;
                }

                .team__layout,
                .contact__inner{
                    display:grid;
                    grid-template-columns:1fr;
                    gap:60px;
                    align-items:start;
                }

                .team__text,
                .contact__details{
                    width:min(100%,520px);
                    max-width:520px;
                }

                .team__people,
                .contact__details{
                    width:100%;
                }

                .team__people > div,
                .contact__details > div{
                    width:100%;
                }
            }


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

            @media(max-width:700px){

                .site-header__inner{
                    width:90%;
                }

                .site-header__logo{
                    width:auto;
                    height:58px;
                }

                .site-header__logo img{
                    width:auto;
                    height:58px;
                    max-height:none;
                }

                .site-header__nav{
                    display:none;
                }

                .opening__logo{
                    top:20px;
                    width:clamp(160px,45vw,200px);
                }

                .opening__scroll{
                    bottom:max(24px, calc(env(safe-area-inset-bottom) + 12px));
                }

                            .opening__scroll::after{
                                height:44px;
                            }

                            .intro{
                                min-height:auto;
                                padding:110px 0 120px;
                            }

                            .intro__inner{
                    width:100%;
                    padding:0 28px;
                }

                .intro__title{
                    font-size:clamp(2.8rem,13vw,4.5rem);
                }

                .intro__copy{
                    margin-top:42px;
                    margin-left:0;
                }

                .workfields{
                    padding:110px 0;
                }

                .workfield{
                    margin-bottom:110px;
                }

                .workfield__image img,
                .workfield--media .workfield__image img{
                    height:58vh;
                    min-height:390px;
                }

                .workfield__content{
                    margin-top:34px;
                }

                .competency{
                    min-height:auto;
                }

                .competency__number{
                    margin-bottom:45px;
                }

                .project-showcase__intro{
                    padding:120px 0 70px;
                }

                .project-chapter{
                    min-height:82vh;
                }

                .project-chapter__content{
                    padding-bottom:65px;
                }

                .project-chapter--right .project-chapter__content{
                    text-align:left;
                }

                .project-chapter--right .project-chapter__content > p{
                    margin-left:0;
                }

                .team__text{
                    max-width:none;
                }

                .team__people{
                    gap:26px;
                }

                .team,
                .contact{
                    padding:120px 0;
                }

                .team__text,
                .contact__details{
                    width:100%;
                    max-width:none;
                }

                .team__image img{
                    height:430px;
                }

                .contact__mail{
                    font-size:clamp(1.25rem,6.3vw,1.75rem);
                    gap:10px;
                }

                .footer__inner{
                    flex-direction:column;
                }
            }


            /* ==========================================
            REDUZIERTE BEWEGUNG
            ========================================== */

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

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

                .opening__logo,
                .opening__scroll{
                    opacity:1;
                    transform:translate(-50%,0);
                }

                .opening__video{
                    transform:scale(1.035);
                }
            }

            /* ==========================================
   HEADER AUF UNTERSEITEN
========================================== */

.site-header--subpage{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}


/* ==========================================
   RECHTLICHE SEITEN
========================================== */

.legal{
    width:100%;
    min-height:100vh;

    padding:
        clamp(190px,16vw,250px)
        0
        clamp(115px,10vw,165px);

    background:var(--sand);
}

.legal__inner{
    width:min(920px,88%);
    margin:0 auto;
}

.legal__title{
    max-width:900px;
    margin:0;

    color:var(--graphite);

    font-family:"Orgon-Regular","Inter",sans-serif;
    font-size:clamp(3.7rem,7vw,7rem);
    font-weight:400;
    line-height:.95;
    letter-spacing:-.045em;
}

.legal__content{
    width:min(100%,620px);

    margin-top:clamp(70px,8vw,110px);
    margin-right:0;
    margin-left:auto;
}

.legal__section{
    margin:0;
    padding:30px 0;

    border-top:1px solid var(--line);
}

/*.legal__section:last-child{
    border-bottom:1px solid var(--line);
}*/

.legal__section h2{
    margin:0 0 14px;

    color:var(--graphite);

    font-family:"Inter",Arial,sans-serif;
    font-size:.75rem;
    font-weight:500;
    line-height:1.4;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.legal__section h3{
    margin:26px 0 10px;

    color:var(--graphite);

    font-family:"Inter",Arial,sans-serif;
    font-size:1rem;
    font-weight:600;
    line-height:1.5;
}

.legal__section p{
    margin:0;

    color:var(--grey);

    font-size:1rem;
    line-height:1.75;
}

.legal__section p + p{
    margin-top:17px;
}

.legal__section a{
    color:var(--graphite);

    text-decoration-line:underline;
    text-decoration-thickness:1px;
    text-decoration-color:rgba(31,31,31,.38);
    text-underline-offset:4px;

    transition:
        color .3s var(--ease),
        text-decoration-color .3s var(--ease);
}

.legal__section a:hover{
    color:var(--green);
    text-decoration-color:var(--green);
}

.footer__nav a[aria-current="page"]{
    color:var(--white);
}

@media(max-width:700px){

    .legal{
        padding:
            155px
            0
            95px;
    }

    .legal__inner{
        width:100%;
        padding:0 28px;
    }

    .legal__title{
        font-size:clamp(3rem,15vw,4.5rem);
    }

    .legal__content{
        width:100%;
        margin-top:58px;
        margin-left:0;
    }

    .legal__section{
        padding:25px 0;
    }
}