html {
        background-image: url('./drp_Empfang.jpeg');
        background-attachment: fixed;
        background-size: cover;
    }

    html,
    body {
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }

    section {
        height: 85vh;
        scroll-snap-align: start;
        scroll-margin: 1em;
        margin: 2em;
        max-width: 70em;
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        background-color: rgba(255, 255, 255, 0.459);
        border-radius: 12px;
        border: 1px solid rgba(209, 213, 219, 0.233);
        color: #46590a;
        font-family: sans-serif;
        font-size: 1.3vh;
    }

    section h3 {
        text-align: center;
        padding-bottom: 6px;
    }

    .text_center {
        text-align: center;
    }

    .section_txt {
        float: inline-start;
        padding-right: 5em;
    }

    .bg_blue {
        background-color: #bbe3f2;
    }

    .timetable {
        width: 80%;
        height: 30vh;
        border-collapse: collapse;
    }

    .timetable td {
        border: solid;
        border-width: 1px;
        padding: 6px;
    }

    .section_txt p {
        margin: 0 0 3px 0;
        padding: 0;
    }

    .section_txt h4 {
        margin: 0;
        padding: 0;
    }

    .hint_blue {
        background-color: #bbe3f2;
        margin-top: 1em;
    }

    .box_gray {
        border: 6px solid grey;
        padding: 6px;
        width: 80%;
        min-height: 50%;
    }

    #navigation {
        position: fixed;
        top: unset;
        left: unset;
        right: 0;
        margin: 0 7em 0 0;
        padding: 0em;
        z-index: 99;
        width: 4vw;
        height: 90vh;
        max-height: 90vh;
        list-style: none;
        font-family: sans-serif;
        font-size: 1.4vh;
    }

    #navigation li {
        float: left;
        height: auto;
        width: 8em;
        margin: 6px;
        padding: 0px;
        border-radius: 0;
        border: 1px solid rgb(255, 255, 255);
        background: rgba(255, 255, 255, 0.836);
    }

    #navigation li a,
    #navigation li a:link,
    #navigation li a:visited {
        text-decoration: none;
        display: block;
        color: #c18283;
        font-weight: bold;
        text-align: center;
        border-radius: 0;
        border: 1px solid rgba(219, 209, 209, 0.829);
        height: 8vh;
        width: 9vh;
    }

    #navigation li a:hover,
    #navigation li a:focus,
    #navigation li a:active {
        border-radius: 0;
        border: 1px solid rgba(219, 209, 209, 0.692);
        height: 8vh;
        width: 9vh;
    }

    #imp {
        font-size: auto;
    }

    #dat {
        font-size: auto;
    }

    section>* {
        margin-left: 1em;
        margin: 0em auto;
    }

    section h2 {
        color: #789c00;
        font-size: 1.5em;
        text-align: center;
        line-height: 2em;
        margin: 10px;
        padding: 10px;
        -webkit-backface-visibility: hidden;
    }

    section p {
        text-align: left;
        -webkit-backface-visibility: hidden;

    }

    /*sections images*/

    #part_1 img {
        float: left;
        height: 40vh;
        margin: 1em;
    }

    #part_2 img,
    #part_3 img,
    #part_4 img,
    #part_5 img {
        float: left;
        margin-right: 1em;
    }

    /*sections*/

    #part_3 {}

    #part_4 {}

    #team_img {
        height: 40%;
        padding: 6px;
    }

    #empfang_img {
        height: 30%;
        padding: 6px;
    }

    #part_6 {}

    .infobox {
        font-size: small;
        border: 6px solid grey;
        overflow: scroll;
        max-height: 80%;
        max-width: 90%;
        padding: 5px;
    }

    /* Glassmorphism card effect */
    .card {
        backdrop-filter: blur(4px) saturate(180%);
        -webkit-backdrop-filter: blur(4px) saturate(180%);
        background-color: rgba(255, 255, 255, 0.753);
        border-radius: 12px;
        border: 1px solid rgba(209, 213, 219, 0.3);
        max-width: 100vh;
        padding-left: 10vw;
        padding-right: 10vw;
        padding-top: 1vh;
        padding-bottom: 0;
        overflow: hidden;
    }

    .osmap {
        width: 90%;
        height: 80%;
        /* Specify the width */
        background-image: url('/images/map_zoom_out_marker.jpg');
        /* Initial background image */
        background-size: cover;
        /* Cover the entire area of the element */
        transition: background-image 0.5s ease-in-out;
        /* Smooth transition */
        background-position: center center;
        background-repeat: no-repeat;
        overflow: hidden;
        /* Keep Center */
    }

    .osmap:hover {
        width: 90%;
        height: 80%;
        /* Specify the width */
        background-image: url('/images/map_zoom_in_marker.jpg');
        /* Initial background image */
        background-size: cover;
        /* Cover the entire area of the element */
        transition: background-image 0.5s ease-in-out;
        /* Smooth transition */
        background-position: center center;
        background-repeat: no-repeat;
        overflow: hidden;
        /* Keep Center */
    }

    #osmap_a {
        text-align: center;
    }

    .fader {
        padding: 5px 5px 10px;
        margin: 0px;
        display: block;
    }

    /*   ***** BREAKPOINT ***********
    Large devices (laptops/desktops, 992px and up) */
    @media only screen and (min-aspect-ratio: 5/4) {
        section {
            height: 65vh;
            max-height: 80vh;
            scroll-snap-align: start;
            scroll-margin: 12vh;
            margin: 2em;
            padding: 2em;
            max-width: 70em;
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            background-color: rgba(255, 255, 255, 0.459);
            border-radius: 12px;
            border: 1px solid rgba(209, 213, 219, 0.233);
            color: #46590a;
            font-family: sans;
            font-size: 2vh;
        }

        /*Large devices*/
        .card {
            backdrop-filter: blur(4px) saturate(180%);
            -webkit-backdrop-filter: blur(4px) saturate(180%);
            background-color: rgba(255, 255, 255, 0.753);
            border-radius: 12px;
            border: 1px solid rgba(209, 213, 219, 0.3);
            max-width: 100vw;
            margin: 25vh 10vw 10vh 10vw;
            padding: 5vh 5vw 15vh 5vw;
            overflow: hidden;
        }


        /*Large devices*/
        .section_txt {
            float: inherit;
            padding: 6px;
        }

        #osmap_a {
            width: 50em;
            text-align: center;
        }

        /*Large devices*/

        #imp {
            font-size: auto;
        }

        /*Large devices*/

        #dat {
            font-size: auto;
        }

        /*Large devices*/

        #navigation {
            position: fixed;
            top: 0px;
            left: 1px;
            display: inline;
            margin: 0 1%;
            padding: 0px;
            z-index: 99;
            width: 100VW;
            height: 8vh;
            list-style: none;
            font-family: sans-serif;
            font-size: 1.2vw;
        }
    }

    /*Large devices*/

    #navigation li {
        float: left;
        height: auto;
        width: 8em;
        margin: 6px;
        padding: 0px;
        border-radius: 0;
        border: 1px solid rgb(255, 255, 255);
        background: rgba(255, 255, 255, 0.836);
    }

    /*Large devices*/

    #navigation li a,
    #navigation li a:link,
    #navigation li a:visited {
        text-decoration: none;
        display: block;
        color: #c18283;
        padding-top: 5%;
        padding-bottom: 5%;
        font-weight: bold;
        text-align: center;
        border-radius: 0;
        border: 1px solid rgba(219, 209, 209, 0.829);
        height: 8vh;
        width: 100%;
    }

    /*Large devices*/

    #navigation li a:hover,
    #navigation li a:focus,
    #navigation li a:active {
        border-radius: 0;
        border: 1px solid rgba(219, 209, 209, 0.692);
        height: 8vh;
        width: 100%;
    }

    /*Large devices*/

    #team_img {
        height: unset;
        width: 30%;
        padding: 6px;
    }

    /*Large devices*/

    .team_txt {
        width: 40em;
    }

    /*Large devices*/

    #empfang_img {
        height: unset;
        width: 60%;
        padding: 6px;
    }