:root{
    --main-color: rgb(39, 136, 60);
    --font: 'Helvetica';
    --size1: 26px;
    --size2: 36px;
    --height: 32px;
}

body {
    font-family: var(--font);
    font-weight: 400;
    font-size: var(--size1); line-height: var(--height);
    margin:0%;
    overflow: hidden;
    color: black;
    background-color: white;
}

@media (hover: none) {
    body{
    --size1: 60px !important;
    --size2: 80px !important;
    --height: 64px !important;
    overflow-y: scroll !important;
    height: 100% !important;
    }

    .wrapper{
        height: 100% !important;
        display: flex;
        flex-flow: column nowrap;
        overflow-y: hidden !important;
        padding-bottom: 30px;
    }

    .particles{
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        height: 10px !important;
    }

    .name:hover{
        filter: blur(0px) !important;
    }

    .knopf{
        width: fit-content !important;
        height: 60px !important;
        font-size: var(--size1) !important; line-height: var(--height) !important;
        background-color: transparent !important;
        border: none !important;
        /* text-transform: uppercase; */
    }

    .play-button{
        height: 60px !important;
        line-height: 20px !important;
    }

    .knopf:hover{
        font-style: normal !important;
        filter: blur(0px) !important;
    }

    .beschreibung{
        position: fixed !important;
        width: 80vw !important;
    }

    details[open] .bilders{
        width: 95vw !important;
        top: 10vh !important;
    }

    details [open] {
        overflow-y: auto !important;
        height: 100vh !important;
        width: 100vw !important;
        position: fixed !important; 
        left: 0 !important;
        top: 0 !important;
    }

    details [open] body{
        overflow: hidden !important;
    }

    #bestätigung {
        height: 74px !important;
        margin-top: 20px !important;
        border: 1px solid var(--main-color) !important;
    }

    #bestätigung:hover{
        filter: blur(0px) !important;
    }

    .play-button{
        width: 120px !important;
        height: 60px !important;
    }

}

@media (hover: none)  and (orientation: landscape){
    body{
        --size1: 40px !important;
        --size2: 60px !important;
        --height: 44px !important;
        overflow-y: scroll !important;
        }
    
        .wrapper{
            height: 100vh !important;
            display: flex;
            flex-flow: column nowrap;
            overflow-y: hidden !important;
            padding-bottom: 30px;
        }
    
        .particles{
            position: relative !important;
            left: 0 !important;
            top: 0 !important;
            height: 10px !important;
        }
    
        .name:hover{
            filter: blur(0px) !important;
        }
    
        .knopf{
            width: fit-content !important;
            height: 60px !important;
            font-size: var(--size1) !important; line-height: var(--height) !important;
            background-color: transparent !important;
            border: none !important;
            /* text-transform: uppercase; */
        }
    
        .play-button{
            height: 60px !important;
            line-height: 20px !important;
        }
    
        .knopf:hover{
            font-style: normal !important;
            filter: blur(0px) !important;
        }
    
        .beschreibung{
            position: fixed !important;
            width: 80vw !important;
        }
    
        .bilders{
            width: 95vw !important;
            height: auto !important;
            position: absolute !important;
            left: 0.25vw !important;
            top: 16px !important;
        }
    
        details [open] {
            height: 100vh !important;
            overflow: hidden !important;
        }

        details [open] .name {
            display: none !important;
        }

        details [open] .beschreibung {
            display: none !important;
            opacity: 0;
        }
    
        #bestätigung {
            height: 74px !important;
            margin-top: 20px !important;
            border: 1px solid var(--main-color) !important;
        }
    
        #bestätigung:hover{
            filter: blur(0px) !important;
        }
    
        .play-button{
            width: 120px !important;
            height: 60px !important;
        }

}



/* Inhaltsverzeichnis */

        ol{
            list-style-type: none;
            margin: 0%;
            padding: 0%;
        }

        li{
            margin: 0%;
            padding: 0%;
        }

        .name:hover{
            cursor: crosshair;
            filter: blur(3px);
        }

        .name{
            position: relative;
            display: block;
            color: var(--main-color);
            text-align: center;
            line-height: 0px;
            z-index: 999;
            text-transform: uppercase;
        }

        .bilders{
            display: none;
        }

        details{
            display: flex;
            flex-direction: column;
        }


        details[open]{
            height: 100vh;
            width: 100vw;
            position: fixed; 
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            color:black;
            z-index: 998;
            animation: fade 1s;
            overflow: hidden;
        }

        details[open] body{
            height: 100vh;
            overflow: hidden;
        }

        details[open] .name{
            position: absolute;
            display: block;
            top: -6px;
            text-align: left;
            margin-left: 1%;
            color:var(--main-color);
            font-size: var(--size2);
            animation: fade 1s;
        }

        details[open] .name:hover{
            filter: blur(0px);
        }

        
        details[open] #closeDetail:hover{
            filter: blur(3px);
        }

        summary{
            list-style: none;
            list-style-type: none;
        }

        details > summary {
            list-style: none;
          }
        details > summary::-webkit-details-marker {
            display: none;
          }

        details[open] .bilders{
            display: block;
            width: 70%;
            min-width: 600px;
            height: auto;
            position: absolute;
            top: 12%;
            left: 50%;
            transform: translate(-50%, 0);
            align-self: center;
            margin: auto;
            animation: fade 1s;
            cursor: crosshair;
        }

        .beschreibung{
            position: absolute;
            display: block;
            bottom: 16px;
            left: 16px;
            margin: 2px;
            width: 70%;
            min-width: 320px;
            margin-left: 1%;
            z-index: 999;
        }

        .play-button{
            display: block;
            position: fixed;
            bottom: 16px;
            right: 16px;
            margin: 2px;
            padding: 0%;
            color: white;
            background-color:var(--main-color);
            border: 1px solid var(--main-color);
            width: 80px;
            height: 32px;
            text-align: center;
            font-family: var(--font);
            font-size: var(--size1); line-height: var(--height);
            z-index: 1;
        }

        .play-button:hover{
            filter: blur(3px);
            cursor: pointer;
        }

        details[open] .particles{
            position:initial;
            width: 100%;
            height: 100%;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        .particles {
            position: absolute;
            z-index: 2;
            list-style-type: none;
            list-style-position: outside;
            width: fit-content;
            height: 40px;
        }

        /* #vögel li.current {
            animation: shake 0.5s;
            animation-iteration-count: 12;
            transition: 0.5s;
        } */

        #vögel li.current:not(details[open] ~ li.current) {
            animation: shake 0.5s;
            animation-iteration-count: 12;
            transition: 0.5s;
        }

        @keyframes shake {
            0% { transform: translate(1px, 1px) rotate(0deg); }
            10% { transform: translate(-1px, -2px) rotate(-1deg); }
            20% { transform: translate(-3px, 0px) rotate(1deg); }
            30% { transform: translate(3px, 2px) rotate(0deg); }
            40% { transform: translate(1px, -1px) rotate(1deg); }
            50% { transform: translate(-1px, 2px) rotate(-1deg); }
            60% { transform: translate(-3px, 1px) rotate(0deg); }
            70% { transform: translate(3px, 1px) rotate(-1deg); }
            80% { transform: translate(-1px, -1px) rotate(1deg); }
            90% { transform: translate(1px, 2px) rotate(0deg); }
            100% { transform: translate(1px, -2px) rotate(-1deg); }
          }

          li{
            transition:1s;
          }

          details[open] .current {
            transform: scale(200%, 200%);
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        @keyframes fade {
            0% {opacity: 0;}
            100% {opacity: 1;}
        }

/* Knöpfe*/
    .knopf{
        display: block;
        position: relative;
        margin: 2px;
        padding: 0%;
        color: black;
        width: fit-content;
        padding-left: 6px;
        padding-right: 6px;
        height: 32px;
        text-align: center;
        font-family: var(--font);
        font-size: var(--size1); line-height: var(--height);
        z-index: 3;
        background-color: white;
        border: 1px solid var(--main-color);
        /* text-transform: uppercase; */
    }

    .menü{
        position: fixed;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-end;
        width: 100px;
        z-index: 10;
        bottom: 16px;
        right: 16px;
    }


    .knopf:hover{
        filter: blur(3px);
        cursor: pointer;
    }

    #infodialog{
        overflow-y: auto;
        display: none;
        height: 100vh;
        width: 100vw;
        position: fixed; 
        left: 0;
        top: 0;
        background-color: white;
        color:black;
        z-index: 999;
        animation: fade 0.5s;
        
    }

    h2{
        margin: 0%;
        padding: 0%;
        display: block;
        text-align: left;
        margin-top: 16px;
        color:var(--main-color);
        font-size: var(--size2);
        line-height: 52px;
        animation: fade 1s;
        text-transform: uppercase;
        font-weight: 400;
    }

    .infotext{
        display: block;
        margin: 2px;
        bottom: 16px;
        width: 80%;
        margin-left: 1%;
    }

    .impressumZu, .infoschliessen, #closeDetail{
        display: block;
        position: fixed;
        z-index: 999;
        top: 16px;
        right: 16px;
        margin: 2px;
        padding: 0%;
        color: var(--main-color);
        width: 80px;
        height: 32px;
        text-align: right;
        font-family:  var(--font);
        font-size: var(--size2); line-height: 32px;
        z-index: 3;
        background-color: transparent;
        text-transform: uppercase;
        border: none;
        cursor: pointer;
        text-transform: uppercase;
    }

    .infoschliessen:hover {
     filter: blur(3px);
    }

    .impressumSummary{
        position: fixed;
        z-index: 999;
        bottom: 4px;
        left: 16px;
        display: block;
        margin: 2px;
        padding: 0%;
        color:  rgba(0, 0, 0, 0.699);
        width: auto;
        height: 40px;
        text-align: left;
        font-family:  var(--font);
        font-size: 16px; line-height: var(--height);
        z-index: 3;
        cursor: pointer;
    }

    .impressumtext{
        display: block;
        margin: 2px;
        bottom: 16px;
        width: 50%;
        margin-left: 1%;
        font-size: 16px;
        line-height: 20px;
    }

    #impressumtitel{
        font-size: var(--size1);
    }

    span{
        font-style: italic;
    }

    .impressumZu{
        display: none;
    }

    .impressumZu:hover {
        filter: blur(3px);
       }

    details[open] .impressumZu{
        display: block;
    }

/* Overlay */
        #bestätigung {
            display: block;
            width: auto;
            height: 40px;
            margin: auto;
            margin-top: -20px;
            text-align: center;
            color: var(--main-color);
            background-color: white;
            font-family:  var(--font);
            font-size: var(--size1); line-height: var(--height);
            text-transform: uppercase;
            border: 1px solid var(--main-color);
        }

        #bestätigung:hover{
            filter: blur(3px);
            cursor: pointer;
        }


        #textoverlay {
            color: black;
            display: block;
            width: auto;
            height: 30px;
            margin-top: 20%;
            text-align: center;
            font-family:  var(--font);
            font-size: var(--size1); line-height: var(--height);
        }

        #boxoverlay { 
                height: 100vh;
                width: 100vw;
                position: fixed; 
                left: 0;
                top: 0;
                background-color: white;
                color: var(--main-color);
                overflow: hidden; 
                transition: 0.5s; 
                z-index: 999;
        }