/* =========================================================
   RESET
========================================================= */

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

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   SLIDER
========================================================= */

.slider {
    position: relative;

    width: 100vw;

    height: 100vh;
    height: 100dvh;

    overflow: hidden;

    background: #000;
}


/* =========================================================
   SLIDES
========================================================= */

.slide {
    position: absolute;
    inset: 0;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}


.slide.is-active {
    opacity: 1;
    visibility: visible;

    z-index: 2;
}


.slide img {
    display: block;

    width: 100%;
    height: 100%;

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


/* =========================================================
   LOGO
========================================================= */

.site-logo {
    position: absolute;

    top: clamp(15px, 3vw, 30px);
    left: clamp(15px, 3vw, 30px);

    width: clamp(140px, 20vw, 240px);

    /*
     * Logo liegt über Slider,
     * Overlay und Menü.
     */
    z-index: 110;

    display: block;
}


.site-logo img {
    display: block;

    width: 100%;
    height: auto;
}


/* =========================================================
   SLIDER NAVIGATION
========================================================= */

.slider-navigation {
    position: absolute;

    left: 50%;
    bottom: 30px;

    transform: translateX(-50%);

    z-index: 10;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 10px;
}


/* =========================================================
   BILDCOUNTER
========================================================= */

.slider-counter {
    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;
    font-weight: 400;
    line-height: 1;

    color: #fff;

    text-align: center;

    white-space: nowrap;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.8),
        0 0 6px rgba(0, 0, 0, 0.4);
}


/* =========================================================
   NAVIGATION CONTROLS
========================================================= */

.slider-navigation__controls {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;
}


/* =========================================================
   NAVIGATIONSPFEILE
========================================================= */

.nav-arrow {
    appearance: none;

    width: 30px;
    height: 30px;

    padding: 0;

    border: 0;

    background: transparent;

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

    cursor: pointer;

    color: #fff;

    opacity: 0.8;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.nav-arrow:hover {
    opacity: 1;

    transform: scale(1.12);
}


.nav-arrow::before {
    content: "";

    width: 9px;
    height: 9px;

    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;

    filter:
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9))
        drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
}


.nav-arrow--prev::before {
    transform: rotate(-135deg);
}


.nav-arrow--next::before {
    transform: rotate(45deg);
}


/* =========================================================
   NAVIGATIONSPUNKTE
========================================================= */

.dots {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    min-width: 120px;
}


.dot {
    appearance: none;

    width: 10px;
    height: 10px;

    flex: 0 0 10px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.5
        );

    cursor: pointer;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.8),
        0 0 5px rgba(0, 0, 0, 0.4);

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


.dot:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.8
        );
}


.dot.is-active {
    background: #fff;

    transform: scale(1.2);
}


/* =========================================================
   BURGER MENU
========================================================= */

.menu-toggle {
    position: absolute;

    top: 30px;
    right: 30px;

    z-index: 120;

    width: 40px;
    height: 30px;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

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


/* Burger Balken */

.menu-toggle span {
    display: block;

    width: 100%;
    height: 2px;

    background:
        rgba(
            255,
            255,
            255,
            1
        );

    filter:
        drop-shadow(
            0 1px 2px
            rgba(0, 0, 0, 0.6)
        );

    transition:
        transform 0.4s ease,
        opacity 0.3s ease,
        background 0.3s ease;
}


/* =========================================================
   BURGER → X
========================================================= */

.menu-toggle.is-open span:nth-child(1) {
    transform:
        translateY(14px)
        rotate(45deg);
}


.menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}


.menu-toggle.is-open span:nth-child(3) {
    transform:
        translateY(-14px)
        rotate(-45deg);
}


.menu-toggle.is-open span {
    background: #fff;
}


/* =========================================================
   MENU OVERLAY
========================================================= */

.menu-overlay {
    position: fixed;

    inset: 0;

    width: 100vw;

    height: 100vh;
    height: 100dvh;

    z-index: 90;

    /*
     * Schwarz mit 85 %
     * Deckkraft.
     */
    background:
        rgba(
            0,
            0,
            0,
            0.75
        );

    /*
     * Menü zunächst rechts
     * außerhalb des Bildschirms.
     */
    transform:
        translateX(100%);

    transition:
        transform 0.7s
        cubic-bezier(
            0.77,
            0,
            0.175,
            1
        );

    /*
     * Overlay selbst scrollt nicht.
     */
    overflow: hidden;
}


/* Geöffnet */

.menu-overlay.is-open {
    transform:
        translateX(0);
}


/* =========================================================
   MENU INNER
========================================================= */

.menu-overlay__inner {
    width: 100%;

    height: 100vh;
    height: 100dvh;

    display: flex;

    overflow: hidden;
}


/* =========================================================
   LINKE MENU CONTENT BOX
   SCROLLBAR
========================================================= */

.menu-content {
    width: 70%;
    height: 100%;

    padding:
        150px
        6vw
        50px
        30px;

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

    color: #fff;

    /*
     * Nur die linke Seite
     * scrollt.
     */
    overflow-x: hidden;
    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}


/* Scrollbar ausblenden */

.menu-content::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   MENU CONTENT H1
========================================================= */

.menu-content h1 {
    margin:
        0
        0
        30px
        0;

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

    font-size:
        clamp(
            30px,
            6vw,
            60px
        );

    line-height: 1;

    font-weight: 400;

    color: #fff;
}


/* =========================================================
   MENU CONTENT H2
========================================================= */

.menu-content h2 {
    max-width: 700px;

    margin:
        0
        0
        30px
        0;

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

    font-size:
        clamp(
            18px,
            2.2vw,
            28px
        );

    line-height: 1.15;

    font-weight: 400;

    color: #fff;
}


/* =========================================================
   MENU FLIESSTEXT
========================================================= */

.menu-content p {
    max-width: 700px;

    margin:
        0
        0
        20px
        0;

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

    font-size: 16px;

    line-height: 1.7;

    font-weight: 400;

    color:
        rgba(
            255,
            255,
            255,
            0.75
        );
}


/* =========================================================
   RECHTE MENU NAVIGATION
   BLEIBT FEST STEHEN
========================================================= */

.menu-navigation {
    width: 30%;
    height: 100%;

    padding:
        150px
        30px
        50px
        30px;

    display: flex;
    flex-direction: column;

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

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

    color: #fff;

    /*
     * Navigation scrollt nicht.
     */
    overflow: hidden;
}


/* =========================================================
   LISTEN RESET
========================================================= */

.menu-navigation ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.menu-navigation li {
    margin: 0;
    padding: 0;
}


/* =========================================================
   HAUPTMENU
========================================================= */

.menu-navigation__main {
    display: flex;
    flex-direction: column;

    gap: 12px;
}


.menu-navigation__main a {
    position: relative;

    display: inline-block;

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

    font-size:
        clamp(
            12px,
            3.0vw,
            40px
        );

    line-height: 1.1;

    font-weight: 400;

    color: #fff;

    text-decoration: none;

    transition:
        opacity 0.25s ease;
}


.menu-navigation__main a:hover {
    color: #98CB00;
}


/* =========================================================
   DATENSCHUTZ / IMPRESSUM
========================================================= */

.menu-navigation__meta {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.menu-navigation__meta a {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    line-height: 1.3;

    font-weight: 400;

    color:
        rgba(
            255,
            255,
            255,
           1.0
        );

    text-decoration: none;

    transition:
        color 0.25s ease;
}


.menu-navigation__meta a:hover {
	color: #98CB00;
}


/* =========================
   SOCIAL ICON MENU
========================= */

.menu-navigation__social {


    gap: 7px;
}


.menu-navigation__social a {
    color:
        rgba(
            255,
            255,
            255,
            0.99
        );

    font-size: 33px;
    line-height: 1.3;

    text-decoration: none;

    transition:
        color 0.25s ease;
}


.menu-navigation__social a:hover {
    color: #98CB00;
}

@media (max-width: 801px) {
.menu-navigation__social a {

    font-size: 22px;
}

.menu-navigation__social {
    gap: 4px;
}
}



/* =========================================================
   HOCHKANT-HINWEIS
========================================================= */

.rotate-device {
    display: none;
}


/*
 * Unter 790 Pixel im Hochformat
 * wird der Slider ausgeblendet und
 * der Dreh-Hinweis angezeigt.
 */

@media
(max-width: 789px)
and
(orientation: portrait) {

    .slider {
        display: none;
    }


    .rotate-device {
        position: fixed;

        inset: 0;

        z-index: 9999;

        width: 100vw;

        height: 100vh;
        height: 100dvh;

        padding: 30px;

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

        background: #000;

        color: #fff;

        text-align: center;
    }


    .rotate-device__content {
        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 25px;
    }


    .rotate-device__icon {
        font-size: 40px;

        line-height: 1;
    }


    .rotate-device p {
        margin: 0;

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

        font-size: 14px;

        line-height: 1.4;

        font-weight: 400;

        color: #fff;
    }
}


/* =========================================================
   MOBILE / TABLET
   UNTER 790 PIXEL
========================================================= */

@media (max-width: 789px) {

    /* -----------------------------------------------------
       LOGO
    ----------------------------------------------------- */

    .site-logo {
        top: 15px;
        left: 15px;

        width:
            clamp(
                110px,
                20vw,
                160px
            );
    }


    /* -----------------------------------------------------
       BURGER
    ----------------------------------------------------- */

    .menu-toggle {
        top: 15px;
        right: 15px;

        width: 30px;
        height: 22px;
    }


    .menu-toggle span {
        height: 2px;
    }


    .menu-toggle.is-open span:nth-child(1) {
        transform:
            translateY(10px)
            rotate(45deg);
    }


    .menu-toggle.is-open span:nth-child(3) {
        transform:
            translateY(-10px)
            rotate(-45deg);
    }


    /* -----------------------------------------------------
       SLIDER NAVIGATION
    ----------------------------------------------------- */

    .slider-navigation {
        bottom: 15px;

        gap: 7px;
    }


    /*
     * Mobile Punkte:
     * 5px Durchmesser
     */

    .dot {
        width: 5px;
        height: 5px;

        flex:
            0
            0
            5px;
    }


    .dots {
        gap: 8px;

        min-width: auto;
    }


    .slider-navigation__controls {
        gap: 10px;
    }


    .slider-counter {
        font-size: 10px;
    }


    /* -----------------------------------------------------
       NAVIGATIONSPFEILE
    ----------------------------------------------------- */

    .nav-arrow {
        width: 24px;
        height: 24px;
    }


    .nav-arrow::before {
        width: 7px;
        height: 7px;
    }


    /* -----------------------------------------------------
       MENU CONTENT MOBILE
    ----------------------------------------------------- */

    .menu-content {
        width: 65%;

        /*
         * Kleinerer Abstand oben,
         * da Smartphone im Querformat
         * wenig Höhe besitzt.
         */
        padding:
            70px
            30px
            30px
            15px;
    }


    /* H1 MOBILE */

    .menu-content h1 {
        margin-bottom: 12px;

        font-size:
            clamp(
                24px,
                5vw,
                42px
            );

        line-height: 1;

        font-weight: 400;
    }


    /* H2 MOBILE */

    .menu-content h2 {
        margin-bottom: 12px;

        font-size:
            clamp(
                14px,
                2.5vw,
                20px
            );

        line-height: 1.15;

        font-weight: 400;
    }


    /* FLIESSTEXT MOBILE */

    .menu-content p {
        margin-bottom: 12px;

        font-size: 11px;

        line-height: 1.4;
    }


    /* -----------------------------------------------------
       RECHTE NAVIGATION MOBILE
    ----------------------------------------------------- */

    .menu-navigation {
        width: 35%;

        padding:
            70px
            15px
            25px
            15px;
    }


    .menu-navigation__main {
        gap: 6px;
    }


    .menu-navigation__main a {
        font-size:
            clamp(
                18px,
                3.5vw,
                28px
            );

        line-height: 1.05;
    }


    .menu-navigation__meta {
        gap: 4px;
    }


    .menu-navigation__meta a {
        font-size: 9px;
    }
}


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

@media
(max-width: 789px)
and
(orientation: landscape) {

    /*
     * Navigation möglichst nah
     * am unteren Bildschirmrand.
     */

    .slider-navigation {
        bottom: 15px;

        gap: 7px;
    }


    /*
     * Linke Textbox kann scrollen.
     */

    .menu-content {
        overflow-y: auto;

        -webkit-overflow-scrolling: touch;
    }


    /*
     * Rechte Navigation bleibt
     * vollständig stehen.
     */

    .menu-navigation {
        overflow: hidden;
    }
}


/* =========================================================
   SEHR KLEINE MOBILE HÖHEN
========================================================= */

/*
 * Besonders relevant bei Smartphones
 * im Querformat, wenn durch Browserleisten
 * nur wenig Höhe zur Verfügung steht.
 */

@media
(max-height: 500px)
and
(orientation: landscape) {

    .site-logo {
        top: 15px;
        left: 15px;

        width:
            clamp(
                100px,
                17vw,
                145px
            );
    }


    .menu-content {
        padding-top: 60px;
        padding-bottom: 20px;
    }


    .menu-navigation {
        padding-top: 60px;
        padding-bottom: 20px;
    }


    .menu-content h1 {
        margin-bottom: 10px;

        font-size:
            clamp(
                22px,
                4vw,
                34px
            );
    }


    .menu-content h2 {
        margin-bottom: 10px;

        font-size:
            clamp(
                13px,
                2.2vw,
                18px
            );
    }


    .menu-content p {
        margin-bottom: 10px;

        font-size: 10px;

        line-height: 1.35;
    }


    .menu-navigation__main {
        gap: 5px;
    }


    .menu-navigation__main a {
        font-size:
            clamp(
                17px,
                3.4vw,
                25px
            );
    }


    .menu-navigation__meta a {
        font-size: 9px;
    }
}


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

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

    .slide,
    .dot,
    .nav-arrow,
    .menu-toggle span,
    .menu-overlay {
        transition: none;
    }
}