/* =========================================
   VARIABLEN
   ========================================= */

:root {

    /* Geschwindigkeit bei Maus-Hover */

    --hover-speed: 3s;

}


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

* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

}


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


/* =========================================
   HAUPTBEREICH
   ========================================= */

.split-screen {

    position: relative;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

}


/* =========================================
   VR-BILD
   ========================================= */

.image-vr {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background-image:
        url("../images/vr.jpg");

    background-size:
        cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;

    z-index: 1;

}


/* =========================================
   FOTOGRAFIE-CONTAINER
   ========================================= */

.photo-container {

    position: absolute;

    top: 0;
    left: 0;

    width: 50%;
    height: 100%;

    overflow: hidden;

    z-index: 2;

    transition:
        width var(--hover-speed)
        cubic-bezier(0.22, 1, 0.36, 1);

}


/*
   Das Foto bleibt immer exakt
   an derselben Position.
*/

.image-photo {

    position: absolute;

    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    background-image:
        url("../images/photography.jpg");

    background-size:
        cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;

}


/* =========================================
   TRENNLINIE
   ========================================= */

.divider {

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 3px;

    background:
        white;

    transform:
        translateX(-50%);

    box-shadow:
        0 0 10px rgba(0, 0, 0, 0.5);

    z-index: 10;

    pointer-events:
        none;

    transition:
        left var(--hover-speed)
        cubic-bezier(0.22, 1, 0.36, 1);

}


/* =========================================
   BESCHRIFTUNGEN
   ========================================= */

.label {

    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    color:
        white;

    font-size:
        clamp(28px, 4vw, 64px);

    font-weight:
        bold;

    letter-spacing:
        4px;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.8);

    pointer-events:
        none;

    z-index:
        20;

}


.label-photo {

    left:
        5%;

}


.label-vr {

    right:
        5%;

}


/* =========================================
   KLICKBEREICHE
   ========================================= */

.click-area {

    position: absolute;

    top: 0;
    bottom: 0;

    width: 50%;

    z-index: 30;

    cursor:
        pointer;

}


.click-photo {

    left:
        0;

}


.click-vr {

    right:
        0;

}


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

.site-footer {

    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;

    min-height: 55px;

    padding:
        12px 25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    z-index:
        9999;

    color:
        white;

    pointer-events:
        auto;


    /*
       Leichte Abdunklung am unteren
       Bildschirmrand.
    */

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.75),
            rgba(0, 0, 0, 0)
        );

}


/* =========================================
   FOOTER-NAVIGATION
   ========================================= */

.site-footer nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        22px;

    flex-shrink:
        0;

}


.site-footer a {

    display:
        block;

    color:
        white;

    text-decoration:
        none;

    font-size:
        14px;

    line-height:
        1.2;

    white-space:
        nowrap;

    text-shadow:
        0 1px 5px rgba(0, 0, 0, 0.9);

    transition:
        opacity 0.2s ease;

}


.site-footer a:hover {

    opacity:
        0.65;

}


/* =========================================
   TRENNER
   ========================================= */

.legal-links a + a::before {

    content:
        "·";

    margin-right:
        22px;

    opacity:
        0.6;

}


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

@media (max-width: 900px) {


    .site-footer {

        padding:
            10px 15px 12px;

        flex-direction:
            column;

        justify-content:
            center;

        gap:
            8px;

    }


    .site-footer nav {

        width:
            100%;

        gap:
            18px;

    }


    .site-footer a {

        font-size:
            13px;

    }

}


/* =========================================
   HANDY
   ========================================= */

@media (max-width: 600px) {


    .label {

        font-size:
            24px;

        letter-spacing:
            2px;

    }


    .label-photo {

        left:
            20px;

    }


    .label-vr {

        right:
            20px;

    }


    .divider {

        width:
            2px;

    }


    /* -----------------------------
       FOOTER
       ----------------------------- */

    .site-footer {

        padding:
            8px 10px 12px;

        gap:
            7px;

    }


    .site-footer nav {

        width:
            100%;

        flex-wrap:
            wrap;

        gap:
            7px 16px;

    }


    .site-footer a {

        font-size:
            12px;

    }


    .legal-links a + a::before {

        margin-right:
            16px;

    }

}


/* =========================================
   SEHR KLEINE HANDYS
   ========================================= */

@media (max-width: 380px) {


    .site-footer {

        padding:
            7px 6px 10px;

        gap:
            5px;

    }


    .site-footer nav {

        gap:
            6px 12px;

    }


    .site-footer a {

        font-size:
            11px;

    }


    .legal-links a + a::before {

        margin-right:
            12px;

    }

}


/* =========================================
   SEHR NIEDRIGES DISPLAY
   ========================================= */

@media (max-height: 600px) {


    .site-footer {

        padding:
            6px 10px;

    }


    .site-footer a {

        font-size:
            11px;

    }

}


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

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


    .photo-container,
    .divider {

        transition:
            none;

    }

}