/* 
    Basis CSS File 
    Author: Monika Herold
    Description: Styles for the Thomas Rühmann Website
    Last Updated: 2025-06-10
*/

/* === FONT ============================================ */
@font-face {
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: normal;
    src: local('Helvetica'), url('/assets/font/Helvetica.woff') format('woff');
}
@font-face {
    font-family: 'caveatbold';
    src: url('/assets/font/caveat-bold-webfont.woff2') format('woff2'),
        url('/assets/font/caveat-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'caveatregular';
    src: url('/assets/font/caveat-regular-webfont.woff2') format('woff2'),
        url('/assets/font/caveat-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



/* === Reset ============================================= */
@viewport {
    /*  iOS Viewport-Anpassung  */
    width: device-width;
    zoom: 1;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-clip: border-box;
}

*:active, *:focus {
    outline: none;
}


html {
    font-size: 100%;
    width:100%;
    height:100%;
    scroll-behavior: smooth;
    overflow: hidden;    /* Verhindert Scrollbars am Body */
}

body {
    font-size: clamp(0.8rem, calc(0.8rem + 1vh), 3rem);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: Arial, Helvetica, sans-serif;
        line-height: 1.5;
        color: var(--textfarbe);
        color: #bfbfbf;
        background-color: var(--bgfarbe);
        /*min-height: 100vh;*/
        min-height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;    /* Verhindert Scrollbars am Body */
}

p,
article.datenschutz {
    overflow-wrap: break-word;
    word-break: normal;
    word-break: break-word;
    hyphens: auto;
    white-space: normal;
}

@media screen and (orientation: landscape) {
    body {
        font-size: clamp(0.8rem, calc(0.8rem + 1vw), 3rem);
        }
}

/* === CUSTOM PROPERTIES ============================================= */
/* === Farben ========================= */
:root {
    --bgfarbe: rgba(0, 0, 0, 1);
    --footerbgfarbe: teal;
    --textfarbe: rgba(191, 191, 191);
    /* #bfbfbf; */
    --lessimportant: rgb(127, 124, 124);
    /*#7f7c7c;*/
    --projektlifarbe: white;
    --musikfarbe: rgb(43, 98, 189);                            /*--musikfarbe: rgb(21, 135, 189);*/
    /* #2b62bd; */
    --theaterfarbe: rgba(151, 109, 208);
    /* #976dd0 */
    --podcastfarbe: rgb(25, 103, 88);                                                    /*--podcastfarbe: rgba(25, 103, 73);*/
    /* #196758 */
    --tvfilmfarbe: rgba(184, 151, 126);
    /* #b8977e */
    --kontaktfarbe: gray;
    --linkfarbe: #976dd0;
    /*--linkfarbe: white;*/
    --linkhoverfarbe: #f1f1f1;
    --linkhoverbgfarbe: #7a7777;
    --activenavifarbe: magenta;
}

body.musik, body.sugarman, body.tomwaits, body.band, body.solo, body.jung, body.rue {
    --linkfarbe: rgb(43, 98, 189); /* = musikfarbe */
}
body.theater, body.theateramrand {
    --linkfarbe: rgb(151, 109, 208); /* = theaterfarbe */
}
body.podcast {
    --linkfarbe: rgba(25, 103, 88); /* = podcastfarbe etwas heller */
}
body.tvfilm {
    --linkfarbe: rgb(184, 151, 126); /* = tvfilmfarbe */
}
body.termine {
    --linkfarbe: rgb(127, 124, 124); /* = lessimportant */
}




/* === Pointer / Scrolling ============*/
.scroll-content * {
    pointer-events: auto;
    touch-action: auto;
}

svg,
.startnavi-linkicon, .linkicon,
.fade-top, .fade-top-sub,
.fade-bottom, .fade-bottom-sub, .fade-bottom-sub-nav,
.fader, .fader-sub,
.ls-fader,
.ls-fade-right-sub,
.faderschlusslinks,
#fixednav, #fixednav-sub,
#faderone, #faderone-sub,
#startgrid li,
#startgrid a.arrows,
#seitennavi.open {
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    pointer-events: none;
    -webkit-touch-action: none;
    -moz-touch-action: none;
    touch-action: none;
}

#startgrid a {
    -webkit-pointer-events: auto;
    -webkit-touch-action: auto;
    -moz-pointer-events: auto;
    -moz-touch-action: auto;
    pointer-events: auto;
    touch-action: auto;
}


/* === SCROLL - ANKER - POSITION ===================================== */
#startinfo {
    scroll-margin-top: 20vh;
}

#musik, #theater, #podcast, #tvfilm {
    scroll-margin-top: -5vh;
}

#projekt1,
#projekt2,
#projekt3,
#projekt4,
#projekt5,
#projekt6,
#termine {
    scroll-margin-top: 22vh;
}

/* === Basics ============================================= */
h1.seitentitel {
    display: block;
    padding: calc(56vh + 10vw) 14vw 3em calc(5vh + 12vw);
    font-size: calc(2vw + 3vh);
    line-height:0.9em;
    text-shadow: 0px 0px 40px rgba(0, 0, 0, 1);
    /*background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0) 50%,
                rgba(0, 0, 0, 0.4) 65%,
                rgba(0, 0, 0, 0.4) 90%,
                rgba(0, 0, 0, 0) 100%);*/
}

body.theater h1.seitentitel {
    padding: calc(66vh + 5vw) 14vw 3em calc(5vh + 12vw);
}
body.sugarman  h1.seitentitel {
     padding: calc(55vh + 4vw) 14vw 3em calc(5vh + 12vw);
 }
body.rue  h1.seitentitel {
    padding: calc(31.5vh + 4vw) 14vw 15em calc(5vh + 12vw);
}
body.solo h1.seitentitel {
    padding: calc(66vh + 5vw) 14vw 15em calc(5vh + 12vw);
}
body.jung h1.seitentitel {
    padding: calc(54vh + 10vw) 14vw 3em calc(5vh + 12vw);
}

@media screen and (orientation:landscape) {
    h1.seitentitel, 
    body.sugarman h1.seitentitel, 
    body.theater h1.seitentitel, 
    body.solo h1.seitentitel,
    body.jung h1.seitentitel {
            padding: calc(80vh - 5vw) 14vw 3em calc(2vh + 15vw);
            line-height: 0.9em;
         }
}

/*h2.startseite {color:white;}*/ 

/* Punkte zwischen "Musiker Schauspieler Theatermacher" sind inline-styles!*/

h2, h2.h2-termine {
    margin-block-end: 1em;
    font-size: clamp(0.8rem, calc(0.8rem + 1.5vh), 3.5rem);
}

.h2-termine {
    margin-top:0em;
    padding-top: 1em;
    padding-bottom: 1em;
    text-align: center;
}

h2>a {
    color: var(--textfarbe);
}

@media screen and (orientation: landscape) {
    h2, h2.h2-termine {
        font-size: clamp(0.8rem, calc(0.8rem + 1.5vw), 3.5rem);
    }
    h2.h2-termine {padding-top:2em;}
}

.titelspan1 {
    color:white;
    margin: 0 0 0 -1em;
    padding:1em 0;
    z-index: 3;
    /*white-space: nowrap;*/
    /*background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0.1) 20%,
                rgba(0, 0, 0, 0.1) 80%,
                rgba(0, 0, 0, 0) 100%);*/
}

.titelspan2 {
    padding: 1em 1em 1em 0;
    z-index: 4;
    /*color: var(--lessimportant);*/
    /*text-shadow:
            -1px -1px 0 rgba(0, 0, 0, 0.2),
            1px -1px 0 rgba(0, 0, 0, 0.2),
            -1px 1px 0 rgba(0, 0, 0, 0.2),
            1px 1px 0 rgba(0, 0, 0, 0.2);
         background: linear-gradient(to bottom,
                        rgba(0, 0, 0, 0) 0%,
                        rgba(0, 0, 0, 0.1) 20%,
                        rgba(0, 0, 0, 0.1) 80%,
                        rgba(0, 0, 0, 0) 100%),
                        linear-gradient(to right,
                                rgba(0, 0, 0, 0) 0%,
                                rgba(0, 0, 0, 0.1) 20%,
                                rgba(0, 0, 0, 0.1) 80%,
                                rgba(0, 0, 0, 0) 100%);*/
}

p {
    padding-bottom:0.7em;
}

a {
    color: var(--linkfarbe);
    text-decoration: none;
}
a:hover {
    color: var(--linkfarbe);
    text-decoration:underline;
}

.weiter-a {
    display: block;
    margin: 0;
        /*padding: 0 14vw 3em calc(3vh + 12vw);*/
        font-size: clamp(1.5rem, calc(1vw + 3vh), 2.5rem);
        font-weight:bold;
        line-height: 1em;
    color: var(--textfarbe);
    text-decoration: none;
    text-align: center;
    
}
@media screen and (orientation: landscape) {
    .weiter-a {
    padding: 0;

    }
}

blockquote {
    font-family: 'caveatregular';
    font-size: 1.43em;
    font-style: normal;
    line-height: 1.1em;
}

blockquote span {
    display: block;
    border-left: 2px solid var(--lessimportant);
    margin-left: 0em;
    padding-left: 0.5em;
    transform: skewX(-3deg);
    clip-path: polygon(10px 0%,
            /* oben links leicht nach rechts versetzt */
            100% 0%,
            /* oben rechts */
            100% 100%,
            /* unten rechts */
            10px 100%,
            /* unten links leicht nach rechts versetzt */
            0% 95%,
            /* Ecke unten links schräge Kante */
            0% 5%
            /* Ecke oben links schräge Kante */
        );
}

cite {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.6em;
    padding-top: 0.5em;
    padding-bottom: 4em;
    /* quick and dirty hack für mehr Platz unter diesem Abschnitt */
}

.next{
    color: var(--textfarbe);
    font-size: 0.8em;
    /*color: var(--lessimportant);
    color: #7f7c7c;
    
    padding-bottom:2vh;*/
}

.upcoming {
    color: var(--textfarbe);
}


@media screen and (orientation: landscape) {
    cite {
            padding-bottom:0;
        }
}

footer {
    margin-top: 3em;
    padding: 1rem;
    background-color: var(--footerbgfarbe);
    text-align: center;
    position: relative;
    bottom: 0;
    width: 100%;
}
/* sitemap */

.sitemapNav ul li a:hover {
    color: var(--textfarbe);
}
.sitemapNav {
    padding-top:2em;
}
a#current {
    /*color: var(--activenavifarbe);*/
    color: var(--textfarbe);
}
.menu {
    list-style-type: none;
    padding: 0;
    background-color: transparent;
} 
.menu li {
    padding-bottom:0.2em;
}
.menu li:has(.sub-menu) {
    padding: 0.5em 0 1em 0;
}
.sub-menu {
    list-style-type: none;
}
.sub-menu li {
    padding-bottom: 0;
}



img,
video,
iframe { /*  Bilder und Medien  */
    max-width: 100%;
    height: auto;
    display: block;
}

audio {
    margin-bottom:1em;
    width:100%;
    max-width:100%;
    /*background-color:white;
    border-radius:4px;*/
}


        body.musik .projektkarte-borders, 
        body.sugarman .projektkarte-borders,
                body.tomwaits .projektkarte-borders,
                body.band .projektkarte-borders,
                body.solo .projektkarte-borders,
                body.jung .projektkarte-borders,
                body.rue .projektkarte-borders {
            border-top: 1vh solid rgba(43, 98, 189, 0.4); /* var(--musikfarbe) */
            border-bottom: 1vh solid rgba(43, 98, 189, 0.4); /* var(--musikfarbe) */
            border-radius: 4px;
            /*background: rgba(43, 98, 189, 0.2);*/
        }
        body.theater .projektkarte-borders, body.theateramrand .projektkarte-borders {
            border-top: 1vh solid rgba(151, 109, 208, 0.4);/* var(--theaterfarbe) */
            border-bottom: 1vh solid rgba(151, 109, 208, 0.4);/* var(--theaterfarbe) */
            border-radius: 4px;
            /*background: rgba(151, 109, 208, 0.2);*/
        }
        body.podcast .projektkarte-borders {
            border-top: 1vh solid rgba(25, 103, 88, 0.5);/* var(--podcastfarbe) */
            border-bottom: 1vh solid rgba(25, 103, 88, 0.5);/* var(--podcastfarbe) */
            border-radius: 4px;
            /*background: rgba(25, 103, 88, 0.3);*/
            
        }
        body.tvfilm .projektkarte-borders {
            border-top: 1vh solid rgba(184, 151, 126, 0.5); /* var(--tvfilmfarbe) */
            border-bottom: 1vh solid rgba(184, 151, 126, 0.5);  /* var(--tvfilmfarbe) */
            border-radius: 4px;
            /*background: rgba(184, 151, 126, 0.4);*/
        }
        body.kontakt .projektkarte-borders {
            border-top: 1vh solid rgba(127, 124, 124, 0.5); /* var(--lessimportant) */
            border-bottom: 1vh solid rgba(127, 124, 124, 0.5);  /* var(--lessimportant) */
            border-radius: 4px;
            /*background: rgba(127, 124, 124, 0.2);*/
        }

        .projektkarte-borders {
            background: rgba(127, 124, 124, 0.2);
        }

.projektkarte-inhalt{
    padding:1em 0.7em;
}

.projektkarte-inhalt a {
    justify-content: left;
}

.projektkarte-videocaption {
    position: relative;
    top: -3em;
    height: 3em;
    margin-bottom: -3em;
    padding: 1em 0 0.7em;
    text-align: center;
    font-size:1.2em;
    font-family: 'caveatregular';
    background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0.3) 30%,
                rgba(0, 0, 0, 0.5) 100%);
    z-index:1;
    /*border: 1px solid yellow;*/
}

.upcomingtitle {    /* ist <span> in der .js */
    font-weight:bold;
    font-size:inherit;
}

#noscriptende-platz, #ende-platz {
    height:70vh;
}

#mehr {
    padding-bottom: calc(19vh + 22vw);
    text-align: center;
}

#schlusstermine {
    /*display:none;*/
    /*height: 68vh;*/
    padding-bottom: calc(43vh - 20vw);
    text-align: center;
}

                #mehr-sub {
                    padding-bottom: 5vh;
                }

                #schlusstermine-sub {
                    /*height: 68vh;*/
                    /*padding-bottom: calc(53vh - 20vw);*/
                    padding-bottom:3em;
                }
#sitemap {
    padding-bottom:5em;
}
body.index #sitemap {
    padding-bottom: 0;
}
@media screen and (orientation: landscape) {
    #mehr {
        display: none;
        padding-bottom: 17vh;
    }
    #schlusstermine {
    display:none;
}
#schlusstermine-sub {
    /*height: 68vh;*/
    padding-bottom: 7em;
}
}


#impressum, #impressum-sub {
    width:100%;
    font-size:0.7em;
    padding:3vw;
    padding-bottom:2vh;
    color: var(--lessimportant);
    background: linear-gradient(to top,
                rgba(0, 0, 0, 0.8) 0%,
                rgba(0, 0, 0, 0.6) 70%,
                rgba(0, 0, 0, 0) 100%);
}
#impressum-sub {text-align: center;
    padding-bottom: 50vh;
}

@media screen and (orientation: landscape) {

    #impressum {
        padding: 8vh;
        padding-left:16vw;
        margin-left: calc(-1 * (55vw - 23vh)); /* negiert padding-left von bgblacktext-schluss: -1 * (55vw - 23vh) PLUS 10vw wie bei ls-terminebotton */
        color: var(--lessimportant);
        background: linear-gradient(to top,
                rgba(0, 0, 0, 0.8) 0%,
                rgba(0, 0, 0, 0.5) 75%,
                rgba(0, 0, 0, 0) 100%);
    }
    #impressum-sub {
        margin:0;
        padding-top:20vh;
        padding-bottom:10vh;
        padding-right: calc(24vw - 2vh);
        padding-left: calc(13vw - 2vh);
        background: linear-gradient(to top,
                    rgba(0, 0, 0, 0.8) 0%,
                    rgba(0, 0, 0, 0.5) 75%,
                    rgba(0, 0, 0, 0) 100%);
    }

}

#impressum a {
    color: var(--lessimportant);
    text-decoration: none;
}

#noscriptschluss {
    margin-bottom:2em;
}
#noscriptschluss li {
    font-size:0.8em;
    text-align: center;
    line-height: 1.2em;
    padding:0.5em;
}

.zentriert {
    text-align: center;
    align-items: center;
    justify-content: center;
}
/*_____________STARTSEITE_____________________________________________________________________________________*/


/* === STARTSEITE FIXED OVERLAYs ===================================== */


#fixedtitel {
    position: fixed;
    top: 0;
    display: block;
    margin: 0;
    /*padding: 3vh 6.8vh;*/
    padding: calc(6vh - 7vw) 6.8vh;
    background: transparent;
    font-size: calc(9vw + 0.3vh);
    font-weight: bold;
    z-index: 5;
    /*text-shadow: 0px 0px 15px rgba(0, 0, 0, 1);*/

}

@media screen and (orientation: landscape) {
    /* Querformat-Stile hier rein */
    #fixedtitel {
            font-size: calc(4vh + 3vw);
            padding-bottom:  5vh;
            padding-top: calc(2vw + 3.5vh);
            padding-left: calc(12.5vw - 2vh);
         }
}

            #thomastitel {
                margin: 0;
                color: #7a7777;
                position: absolute;
                z-index: 3;
                text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.8);
            }

            #ruehmanntitel {
                margin: 0.6em 0 0 0.86em;
                position: absolute;
                z-index: 4;
                text-shadow: 0px 0px 50px rgba(0, 0, 0, 1);
            }

                        body.index #thomastitel, body.index #ruehmanntitel{
                                text-shadow:none;
                            }

    #fixedtitel a {
        color: var(--textfarbe);
        color: #bfbfbf;
    }


/* === START-NAVI ===================================== */

#fixednav {
    position: fixed;
    bottom: 10vh;
    right: calc(18.5vw - 1.1vh);  /* ursprünglich -1vh */
    /*left: 50%;
    transform: translateX(-50%);*/
    z-index: 6;
}

                    #fixednav-sub {
                        position: fixed;
                        bottom: 10vh;
                        right: calc(18.5vw - 1.1vh);
                        z-index: 6;
                        /* Standardzustand (geschlossen) */
                            opacity:0;
                            transition: opacity 0.3s;
                    }

                    #fixednav-sub a{
                        -webkit-pointer-events: none;
                            -moz-pointer-events: none;
                            pointer-events: none;
                            -webkit-touch-action: none;
                            -moz-touch-action: none;
                            touch-action: none;
                    } 
                    
                                        #fixednav-sub.open {
                                            opacity:1;
                                            transform: translateY(0);
                                            transition: opacity 0.8s;
                                        }

                                        #fixednav-sub.open a {
                                            -webkit-pointer-events: all;
                                                -moz-pointer-events: all;
                                                pointer-events: all;
                                                -webkit-touch-action: all;
                                                -moz-touch-action: all;
                                                touch-action: all;
                                        }


                   .menu-button {                       /* __________ nur sub ____________ */
                    width: calc(8vw + 3vh);
                    height: calc(8vw + 3vh);
                        opacity: 1;
                        padding: 2.8vw;
                        position:fixed;
                        top: calc(4vh + 1vw);
                        right: calc(12.5vw - 2vh);
                        /*right: calc(18.5vw - 1.1vh);*/
                        border-radius: 4px;
                        border: none;
                        z-index:999;
                        /*box-shadow: 0px 0px 15px rgba(0, 0, 0, 1);*/
                   }  

                                   .menu-button svg {
                                       width: 100%;
                                       height: 100%;
                                   }

                                   #rect2, #rect3 {             /* die Striche auf dem Nav-Button */
                                    transform: rotate(0deg);
                                    transition: transform 0.8s;
                                    transform-origin: center;
                                   }

                                   #rect1, #rect4 {
                                    opacity:1;
                                    transition: opacity 1.3s;
                                   }

                                   #rect1.open, #rect4.open {
                                    opacity: 0;
                                    transition: opacity 0.3s;
                                    transform-origin: center;
                                    }
                                    #rect2.open {
                                        transform: rotate(45deg);
                                        transition: transform 0.8s;
                                        transform-origin: center;
                                    }
                                    #rect3.open {
                                        transform: rotate(-45deg);
                                        transition: transform 0.8s;
                                        transform-origin: center;
                                    }

                   @media screen and (orientation: landscape) {
                    .menu-button {                       /* __________ nur sub ____________ */
                            width: calc(8vh + 3vw);
                            height: calc(8vh + 3vw);
                            right: 12vw;
                            top: calc(2.8vh + 5vw);
                            padding: 3vh;
                        }

                        .menu-button svg {
                            width: 100%;
                            height: 100%;
                        }
                   }



#startgrid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2vw;
    align-items: center;/* Aligns the <a> element vertically */
    
}

#startgrid>a {
    grid-column: 1;
    justify-self: start;            /* scroll -Wort */
    font-size: clamp(0.9rem, 4vw, 1.3rem);
    text-decoration: none;
    color: var(--textfarbe);
    color: #bfbfbf;
}

#startnavi {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
    margin: 0;
    padding: 0;
    list-style: none;
}

#startnavi li {
    display: flex;
    width: calc(13vw + 4vh);
    height: calc(13vw + 4vh);
    padding: 0;
    justify-content: flex-start;
    align-items: flex-end;
}
#startnavi li a {
    display: flex;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    padding: 1.8vw;
    justify-content: flex-start;
    align-items: flex-end;
    text-align: right;
    color: var(--projektlifarbe);
    text-decoration: none;
    font-size: calc(0.95vh + 1.5vw);  /* ACHTUNG! Betrifft selbe Werte in Animationen! */
    /*3.7vw*/
    font-weight: normal;
    border-radius: 4px;
}

#startnavi a.inactive {
    /* inactive set by Javascript */
    opacity: 0.5;
}

#startnavi a.active,
#startnavi a:active,
#startnavi a:hover {
    /* active set by Javascript */
    opacity: 1;
}


/* ------- nur sub ---------- */
            #startgrid svg, #seitennavbuttons-oben svg {
                width:calc(3vw + 3vh);
                height:calc(3vw + 3vh);
            }

            #seitennavbuttons-oben {
                visibility: hidden;
                    pointer-events: none;
                    touch-action: none;
                position: absolute;
                top:-14vh;
                right:calc(7.3vh - 3vw);
            }

            #seitennavbuttons-oben>a {
                    text-decoration: none;
                    color: var(--lessimportant);
                    margin: 0 0.2em;
                }

            #seitennavbuttons, #seitennavbuttons-oben {
                    line-height:2vh;
                    padding-left:1.5em;
            }
            
            #seitennavbuttons a, #seitennavbuttons-oben a {
                opacity: 0.65;
            }
                        #seitennavbuttons a:active,
                        #seitennavbuttons a:hover,
                        #seitennavbuttons-oben a:active,
                        #seitennavbuttons-oben a:hover {
                            opacity: 1;
                        }
                       

            #startgrid #seitennavbuttons>a {    /* haben inline-styles! sonst floaten sie nicht in landscape */
                visibility:visible;
                    pointer-events: auto;
                    touch-action: auto;
                text-decoration: none;
                color: var(--lessimportant);
            }

            @media screen and (orientation: landscape) {
                #startgrid #seitennavbuttons a {
                        visibility:hidden;
                        pointer-events: none;
                        touch-action: none; }
                #seitennavbuttons-oben a {
                    visibility: visible;     
            }
            }

      

            #seitennavi {
                position: fixed;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                height: 10vh;
                width: calc(15vh + 20vw);

                grid-column: 7;
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                gap: 1vw;
                margin: 0;
                padding: 0;
                list-style: none;
                justify-items: center;
                align-items: center;

                z-index: 9;
            }

            @media screen and (orientation: portrait) {

                body.podcast #seitennavi,
                body.kontakt #seitennavi {
                    grid-column: 4;
                    grid-template-columns: repeat(4, 1fr);
                    width: calc(12vh + 6vw);
                }
                /*body.theater #seitennavi{
                    grid-column: 5;
                    grid-template-columns: repeat(5, 1fr);
                    width: calc(15vh + 8vw);*/
                }
                body.termine #seitennavi {
                    grid-column: 3;
                    grid-template-columns: repeat(3, 1fr);
                    width: calc(10vh + 5vw);
                }
                /*body.theater #seitennavi,*/
                body.kontakt #seitennavi {
                    grid-column: 6;
                    grid-template-columns: repeat(6, 1fr);
                    width: calc(15vh + 10vw);
                }
            }

            .seitennavli {
                display: flex;
                width: calc(1vw + 1.5vh);
                height: calc(1vw + 1.5vh);
                padding: 0;
                justify-content: flex-end;
                align-items: flex-end;
            }

            .seitennavli a {
                display: flex;
                width: 100%;
                height: 100%;
                opacity: 0.6;
                justify-content: center; /* rechts */
                align-items: center;/* unten */
                text-align: center;
                color: var(--projektlifarbe);
                text-decoration: none;
                font-size: calc(0.95vh + 1.5vw);
                font-weight: normal;
                border: 0;
                border-radius: 2.5px;
            }

                        .seitennavli a.podcastbg, .seitennavli a.podcastbg.inactive {
                            opacity: 0.6;
                        }

                        @media screen and (orientation: landscape) {
                            #seitennavi {
                                pointer-events: auto;
                                touch-action: auto;
                                bottom: calc(25vh + 2vw);
                                left: 0;
                                transform: translateX(0) rotate(90deg);
                                /*right: calc(12.5vw - 2vh);*/
                                left: calc(78vw - 8vh);
                                height: 10vh;
                                width: calc(13vh + 18vw);
                                grid-column: 7;
                                display: grid;
                                grid-template-columns: repeat(7, 1fr);
                                gap: 1vh;
                                margin: 0;
                                padding: 0;
                                list-style: none;
                                justify-items: center;
                                align-items: center;
                                z-index: 2;
                            }


                            .seitennavli {
                                display: flex;
                                position: relative;
                                    overflow: visible;
                                width: calc(1vw + 1.5vh);
                                height: calc(1vw + 1.5vh);
                                padding: 0;
                                justify-content: flex-end;
                                align-items: flex-end;
                            }
                        }

            .seitennavli-termine {
                display: flex;
                position: relative;
                overflow: visible;
                margin:0;
                padding: 0;
                justify-content: flex-end;
                align-items: flex-end;
            }


            #seitennavli-termine-svg {
                margin-top: -9%;
                width:150%;height:150%;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                z-index: 2;
            }

            @media screen and (orientation: landscape) {
                .seitennavli-termine {
                        justify-content: flex-end;
                        align-items: flex-end;   }

                #seitennavli-termine-svg {
                        transform: rotate(-90deg);
                        top:-16.7%; left:-35%;
                    }
            }

            .seitennavli a.js-termine {
                overflow:visible;
                padding:0;
                color: rgba(0, 0, 0, 0);
            }


                        .seitennavli a.inactive {
                            /* inactive set by Javascript */
                            opacity: 0.6; 
                            }

                        .seitennavli a.active, .seitennavli a:active, .seitennavli a:hover {  /* active set by Javascript */
                            opacity:1;
                        }


@media screen and (orientation: landscape) {
    #fixednav {
            right: 12vw;     /* ACHTUNG right und bottom sehr anders! */                                     /* right 8vw, bottom 8vh Abstände */
                                         /*bottom: calc(18.5vh - 1vw);*/                                       /* jetzt 12vw  11vh*/
            bottom: 11vh;
            z-index: 6;   
        }

                #fixednav-sub {
                    right: 12vw;
                    /* ACHTUNG right und bottom sehr anders! */
                    /* right 8vw, bottom 8vh Abstände */
                    /*bottom: calc(18.5vh - 1vw);*/
                    /* jetzt 12vw  11vh*/
                    bottom: 11vh;
                    z-index: 6;
                }

    #startgrid {
            gap: 2vh;
        }

    #startgrid>a {
            font-size: 4vh;         /* scroll -Wort */
        }

    #startnavi li {                                                                                         /* 13vh + 4vw Größe */
            width: calc(11vh + 3vw);                                                                        /* jetzt 11vh + 3vw */
            height: calc(11vh + 3vw);
}
    #startnavi {
        gap: 2vh;
}
    #startnavi li a {
        padding: 1.8vh;
        font-size: calc(0.6vw + 1.55vh);    /* ACHTUNG! Betrifft selbe Werte in Animationen! Batch-alle ersetzen!*/
                                                  /* Hochkant: calc(0.95vh + 1.5vw); */
    } 
}



            .musikbg {
                background-color: #2b62bd;
                background-color: var(--musikfarbe);
            }
            .musikbg-opacity {
                background-color: rgba(43, 98, 189, 0.2);
            }

            .theaterbg, .theateramrandbg {
                background-color: rgb(151, 109, 208);
                background-color: var(--theaterfarbe);
                background-color: #976dd0;
            }
            .theaterbg-opacity {
                background-color: rgba(151, 109, 208, 0.2);
            }

            .podcastbg {
                background-color: #196758;
                background-color: var(--podcastfarbe);
            }
            .podcastbg-opacity {
                background-color: rgba(25, 103, 88, 0.3);
            }

            .tvfilmbg {
                background-color: rgb(184, 151, 126);
                background-color: var(--tvfilmfarbe);
                background-color: #b8977e;
            }
            .tvfilmbg-opacity {
                background-color: rgb(184, 151, 126, 0.2);
            }

            .terminebg {
                background-color: var(--lessimportant);
                background-color: #7f7c7c;
            }

            .kontaktbg {
                background-color: rgb(191, 191, 191);
                background-color: var(--textfarbe);
                background-color: #bfbfbf;
            }


                        .musikbg.mainmenubutton {
                            background-color: rgba(43,98,189, 0.6); /* selbe wie --musikfarbe mit 0.6 opacity auf schwarz */
                        }
                        .menu-button.musikbg.mainmenubutton:hover, .menu-button.musikbg.mainmenubutton.open {
                            background-color: rgb(43, 98, 189);
                        }
            
                        .theaterbg.mainmenubutton, .theateramrandbg.mainmenubutton {
                            background-color: rgb(91, 65, 125); /* selbe wie --theaterfarbe mit 0.6 opacity auf schwarz */
                        }
                        .menu-button.theaterbg.mainmenubutton:hover, .menu-button.theaterbg.mainmenubutton.open {
                            background-color: rgb(151, 109, 208);
                        }
            
                        .podcastbg.mainmenubutton {
                            background-color: rgba(25, 103, 88, 0.6);
                        }
                        .menu-button.podcastbg.mainmenubutton:hover, .menu-button.podcastbg.mainmenubutton.open {
                            background-color: rgb(25, 103, 88);
                        }
            
                        .tvfilmbg.mainmenubutton {
                            background-color: rgba(184, 151, 126, 0.6);
                        }
                        .menu-button.tvfilmbg.mainmenubutton:hover, .menu-button.tvfilmbg.mainmenubutton.open {
                            background-color: rgb(184, 151, 126);
                        }
            
                        .terminebg.mainmenubutton {
                            background-color: rgba(122, 119, 119, 0.6);
                        }
                        .menu-button.terminebg.mainmenubutton:hover, .menu-button.terminebg.mainmenubutton.open {
                            background-color: rgb(122, 119, 119);
                        }
            
                        .kontaktbg.mainmenubutton {
                            background-color: rgba(191, 191, 191, 0.6);
                        }
                        .menu-button.kontaktbg.mainmenubutton:hover, .menu-button.kontaktbg.mainmenubutton.open {
                            background-color: rgb(191, 191, 191);
                        }


        .musiklili a.active, .musiklili a:active {  /* active set by Javascript */
            animation: 
                activeNavMusik 0.5s ease-out forwards;
        }

        .theaterlili a.active, .theaterlili a:active {  /* active set by Javascript */
            animation: 
                activeNavTheater 0.5s ease-out forwards;
        }

        .podcastlili a.active, .podcastlili a:active {  /* active set by Javascript */
            animation: 
                activeNavPodcast 0.5s ease-out forwards;
        }

        
        .tvfilmlili a.active, .tvfilmlili a:active {  /* active set by Javascript */
            animation: 
                activeNavTvfilm 0.5s ease-out forwards;
        }

        @keyframes activeNavMusik {
            0% {
                opacity: 0.5;
                font-size: calc(0.95vh + 1.5vw);
                color: white;
            }
    
            30% {
                opacity: 0.75;
                font-size: calc(0.95vh + 1.5vw);
                color: #2b62bd; /* Fallback for old systems */
                color: var(--musikfarbe);
                
            }
    
            60% {
                opacity: 0.75;
                font-size: calc(1.9vh + 2vw); /* 5vw */
                color: white;
                justify-content: flex-start;
                align-items: flex-end;
            }
    
            100% {
                opacity: 0.9;
                font-size: calc(2.5vh + 2vw);   /* 7vw */
                color: white;
                font-weight: bold;
                padding-left: 6vw;
                justify-content: flex-start;
                    align-items: flex-end;
            }
        }

        @keyframes activeNavTheater {
            0% {
                opacity: 0.5;
                font-size: calc(0.95vh + 1.5vw);
                color: white;
            }
    
            30% {
                opacity: 0.75;
                font-size: calc(0.95vh + 1.5vw);
                color: var(--theaterfarbe);
                color: #976dd0;
                
            }
    
            60% {
                opacity: 0.75;
                font-size: calc(1.9vh + 2vw);   /* 5vw */
                color: white;
                justify-content: flex-end;
                    align-items: flex-end;
            }
    
            100% {
                opacity: 0.9;
                font-size: calc(2.5vh + 2vw);   /* 7vw */
                color: white;
                font-weight: bold;
                padding-right: 6vw;
                justify-content: flex-end;
                    align-items: flex-end;
            }
        }

        @keyframes activeNavPodcast {
            0% {
                opacity: 0.5;
                font-size: calc(0.95vh + 1.5vw);
                color: white;
            }
    
            30% {
                opacity: 0.75;
                font-size: calc(0.95vh + 1.5vw);
                color: #196758;
                color: var(--podcastfarbe);
                
            }
    
            60% {
                opacity: 0.75;
                font-size: calc(1.9vh + 2vw); /* 5vw */
                color: white;
                justify-content: flex-start;
                    align-items: flex-start;
            }
    
            100% {
                opacity: 0.9;
                font-size: calc(2.5vh + 2vw);   /* 7vw */
                color: white;
                font-weight: bold;
                padding-left: 6vw;
                justify-content: flex-start;
                    align-items: flex-start;
            }
        }

        @keyframes activeNavTvfilm {
            0% {
                opacity: 0.5;
                font-size: calc(0.95vh + 1.5vw);
                color: white;
            }
    
            30% {
                opacity: 0.75;
                font-size: calc(0.95vh + 1.5vw);
                color: var(--tvfilmfarbe);
                color: #b8977e;
                
            }
    
            60% {
                opacity: 0.75;
                font-size: calc(1.9vh + 2vw);  /* 5vw */
                color: white;
                justify-content: flex-end;
                    align-items: flex-start;
            }
    
            100% {
                opacity: 0.9;
                font-size: calc(2.5vh + 2vw);    /* 7vw */
                color: white;
                font-weight: bold;
                padding-right: 6vw;
                justify-content: flex-end;
                    align-items: flex-start;
            }
        }




        /*___________________ Landscape NAVIGATION ANIMATION ___________________________*/
 @media screen and (orientation: landscape) {
                    /* Querformat-Stile für ALLE Geräte */
                
                @keyframes activeNavMusik {
                    0% {
                        opacity: 0.5;
                        font-size: calc(0.6vw + 1.55vh);
                        color: white;
                    }
        
                    30% {
                        opacity: 0.75;
                        font-size: calc(0.6vw + 1.55vh);
                        color: #2b62bd;
                        color: var(--musikfarbe);
        
                    }
        
                    60% {
                        opacity: 0.75;
                        font-size: calc(1vw + 2vh);
                        color: white;
                        justify-content: flex-start;
                        align-items: flex-end;
                    }
        
                    100% {
                        opacity: 0.9;
                        font-size: calc(1.5vw + 2vh);
                        color: white;
                        font-weight: bold;
                        padding-left: 6vh;
                        justify-content: flex-start;
                        align-items: flex-end;
                    }
                }
        
                @keyframes activeNavTheater {
                    0% {
                        opacity: 0.5;
                        font-size: calc(0.6vw + 1.55vh);
                        color: white;
                    }
        
                    30% {
                        opacity: 0.75;
                        font-size: calc(0.6vw + 1.55vh);
                        color: var(--theaterfarbe);
                        color: #976dd0;
        
                    }
        
                    60% {
                        opacity: 0.75;
                        font-size: calc(1vw + 2vh);
                        /* 5vw */
                        color: white;
                        justify-content: flex-end;
                        align-items: flex-end;
                    }
        
                    100% {
                        opacity: 0.9;
                        font-size: calc(1.5vw + 2vh);
                        /* 7vw */
                        color: white;
                        font-weight: bold;
                        padding-right: 6vh;
                        justify-content: flex-end;
                        align-items: flex-end;
                    }
                }
        
                @keyframes activeNavPodcast {
                    0% {
                        opacity: 0.5;
                        font-size: calc(0.6vw + 1.55vh);
                        color: white;
                    }
        
                    30% {
                        opacity: 0.75;
                        font-size: calc(0.6vw + 1.55vh);
                        color: #196758;
                        color: var(--podcastfarbe);
        
                    }
        
                    60% {
                        opacity: 0.75;
                        font-size: calc(1vw + 2vh);
                        /* 5vw */
                        color: white;
                        justify-content: flex-start;
                        align-items: flex-start;
                    }
        
                    100% {
                        opacity: 0.9;
                        font-size: calc(1.5vw + 2vh);
                        /* 7vw */
                        color: white;
                        font-weight: bold;
                        padding-left: 6vh;
                        justify-content: flex-start;
                        align-items: flex-start;
                    }
                }
        
                @keyframes activeNavTvfilm {
                    0% {
                        opacity: 0.5;
                        font-size: calc(0.6vw + 1.55vh);
                        color: white;
                    }
        
                    30% {
                        opacity: 0.75;
                        font-size: calc(0.6vw + 1.55vh);
                        color: var(--tvfilmfarbe);
                        color: #b8977e;
        
                    }
        
                    60% {
                        opacity: 0.75;
                        font-size: calc(1vw + 2vh);
                        /* 5vw */
                        color: white;
                        justify-content: flex-end;
                        align-items: flex-start;
                    }
        
                    100% {
                        opacity: 0.9;
                        font-size: calc(1.5vw + 2vh);
                        /* 7vw */
                        color: white;
                        font-weight: bold;
                        padding-right: 6vh;
                        justify-content: flex-end;
                        align-items: flex-start;
                    }
                }
            }
        /*__________________________ Ende Landscape NAVIGATION ANIMATION ___________________________*/


    #startnavi .musiklili a.inactive { /* inactive set by Javascript */
        opacity: 0.9;
        animation: inactiveNavMusik 0.5s ease-out forwards;
    }

    #startnavi .theaterlili a.inactive { /* inactive set by Javascript */
        opacity: 0.9;
        animation: inactiveNavTheater 0.5s ease-out forwards;
    }

    #startnavi .podcastlili a.inactive { /* inactive set by Javascript */
        opacity: 0.9;
        animation: inactiveNavPodcast 0.5s ease-out forwards;
    }

    #startnavi .tvfilmlili a.inactive { /* inactive set by Javascript */
        opacity: 0.9;
        animation: inactiveNavTvfilm 0.5s ease-out forwards;
    }

    @keyframes inactiveNav {
        0% {
            opacity: 0.9;
            font-size: calc(2.5vh + 2vw);   /* 7vw */
            font-weight: bold;
            /*justify-content: flex-end;
            align-items: flex-end;*/
        }
        100% {
            opacity: 0.5;
            font-size: calc(0.95vh + 1.5vw);
            font-weight: normal;
            /*justify-content: flex-end;
                align-items: flex-end;*/
        }
    }

        @keyframes inactiveNavMusik {
            
            0% {
                    opacity: 0.9;
                    font-size: calc(2.5vh + 2vw);   /* 7vw */
                    color: white;
                    font-weight: bold;
                    padding-left: 6vw;
                    justify-content: flex-start;
                    align-items: flex-end;
                }

            30% {
                opacity: 0.75;
                font-size: calc(1.9vh + 2vw);    /* 5vw */
                color: white;
                justify-content: flex-start;
                align-items: flex-end;
            }

            60% {
                opacity: 0.75;
                font-size: calc(0.95vh + 1.5vw);
                color: #2b62bd;
                color: var(--musikfarbe);
    
            }
            
            100% {
                opacity: 0.5;
                font-size: calc(0.95vh + 1.5vw);
                color: white;
            }
        }


        @keyframes inactiveNavTheater {
            0% {
                    opacity: 0.9;
                    font-size: calc(2.5vh + 2vw);    /* 7vw */
                    color: white;
                    font-weight: bold;
                    padding-right: 6vw;
                    justify-content: flex-end;
                    align-items: flex-end;
                }
            30% {
                opacity: 0.75;
                font-size: calc(1.9vh + 2vw);    /* 5vw */
                color: white;
                justify-content: flex-end;
                    align-items: flex-end;
            }  
            60% {
                opacity: 0.75;
                font-size: calc(0.95vh + 1.5vw);
                color: var(--theaterfarbe);
                color: #976dd0;
                
            }  
                100% {
                opacity: 0.5;
                font-size: calc(0.95vh + 1.5vw);
                color: white;
            }
        }

        @keyframes inactiveNavPodcast {
            0% {
                    opacity: 0.9;
                    font-size: calc(2.5vh + 2vw);/* 7vw */
                    color: white;
                    font-weight: bold;
                    padding-left: 6vw;
                    justify-content: flex-start;
                    align-items: flex-start;
                }
            30% {
                opacity: 0.75;
                font-size: calc(1.9vh + 2vw);    /* 5vw */
                color: white;
                justify-content: flex-start;
                    align-items: flex-start;
            }   
            60% {
                opacity: 0.75;
                font-size: calc(0.95vh + 1.5vw);
                color: #196758;
                color: var(--podcastfarbe);
                
            } 
                100% {
                opacity: 0.5;
                font-size: calc(0.95vh + 1.5vw);
                color: white;
            }
        }

        @keyframes inactiveNavTvfilm {
            0% {
                    opacity: 0.9;
                    font-size: calc(2.5vh + 2vw); /* 7vw */
                    color: white;
                    font-weight: bold;
                    padding-right: 6vw;
                    justify-content: flex-end;
                    align-items: flex-start;
                }
            30% {
                opacity: 0.75;
                font-size: calc(1.9vh + 2vw);    /* 5vw */
                color: white;
                justify-content: flex-end;
                    align-items: flex-start;
            }
            60% {
                opacity: 0.75;
                font-size: calc(0.95vh + 1.5vw);
                color: var(--tvfilmfarbe);
                color: #b8977e;
                
            }
                100% {
                opacity: 0.5;
                font-size: calc(0.95vh + 1.5vw);
                color: white;
            }
        }
/*___________________ Landscape inactive NAVIGATION ANIMATION ___________________________*/
 @media screen and (orientation: landscape) {

    @keyframes inactiveNav {
            0% {
                opacity: 0.9;
                font-size: calc(1.5vw + 2vh);
                /* 7vw */
                font-weight: bold;
                /*justify-content: flex-end;
                align-items: flex-end;*/
            }
    
            100% {
                opacity: 0.5;
                font-size: calc(0.6vw + 1.55vh);
                font-weight: normal;
                /*justify-content: flex-end;
                    align-items: flex-end;*/
            }
        }
    
        @keyframes inactiveNavMusik {
    
            0% {
                opacity: 0.9;
                font-size: calc(1.5vw + 2vh);
                /* 7vw */
                color: white;
                font-weight: bold;
                padding-left: 6vh;
                justify-content: flex-start;
                align-items: flex-end;
            }
    
            30% {
                opacity: 0.75;
                font-size: calc(1vw + 2vh);
                /* 5vw */
                color: white;
                justify-content: flex-start;
                align-items: flex-end;
            }
    
            60% {
                opacity: 0.75;
                font-size: calc(0.6vw + 1.55vh);
                color: #2b62bd;
                color: var(--musikfarbe);
    
            }
    
            100% {
                opacity: 0.5;
                font-size: calc(0.6vw + 1.55vh);
                color: white;
            }
        }
    
    
        @keyframes inactiveNavTheater {
            0% {
                opacity: 0.9;
                font-size: calc(1.5vw + 2vh);
                /* 7vw */
                color: white;
                font-weight: bold;
                padding-right: 6vh;
                justify-content: flex-end;
                align-items: flex-end;
            }
    
            30% {
                opacity: 0.75;
                font-size: calc(1vw + 2vh);
                /* 5vw */
                color: white;
                justify-content: flex-end;
                align-items: flex-end;
            }
    
            60% {
                opacity: 0.75;
                font-size: calc(0.6vw + 1.55vh);
                color: var(--theaterfarbe);
                color: #976dd0;
    
            }
    
            100% {
                opacity: 0.5;
                font-size: calc(0.6vw + 1.55vh);
                color: white;
            }
        }
    
        @keyframes inactiveNavPodcast {
            0% {
                opacity: 0.9;
                font-size: calc(1.5vw + 2vh);
                /* 7vw */
                color: white;
                font-weight: bold;
                padding-left: 6vh;
                justify-content: flex-start;
                align-items: flex-start;
            }
    
            30% {
                opacity: 0.75;
                font-size: calc(1vw + 2vh);
                /* 5vw */
                color: white;
                justify-content: flex-start;
                align-items: flex-start;
            }
    
            60% {
                opacity: 0.75;
                font-size: calc(0.6vw + 1.55vh);
                color: #196758;
                color: var(--podcastfarbe);
    
            }
    
            100% {
                opacity: 0.5;
                font-size: calc(0.6vw + 1.55vh);
                color: white;
            }
        }
    
        @keyframes inactiveNavTvfilm {
            0% {
                opacity: 0.9;
                font-size: calc(1.5vw + 2vh);
                /* 7vw */
                color: white;
                font-weight: bold;
                padding-right: 6vh;
                justify-content: flex-end;
                align-items: flex-start;
            }
    
            30% {
                opacity: 0.75;
                font-size: calc(1vw + 2vh);
                /* 5vw */
                color: white;
                justify-content: flex-end;
                align-items: flex-start;
            }
    
            60% {
                opacity: 0.75;
                font-size: calc(0.6vw + 1.55vh);
                color: var(--tvfilmfarbe);
                color: #b8977e;
    
            }
    
            100% {
                opacity: 0.5;
                font-size: calc(0.6vw + 1.55vh);
                color: white;
            }
        }
 }



 #startnavi a.inactive:hover {
     /* inactive set by Javascript */
     opacity: 1;
 }


/*__________________ SCROLL ICON SVG ______________________________*/
        
        
                .arrows {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin: 0;
                    padding-left: calc(3.5vh - 3.5vw);
                    padding-right: calc(2vh - 0.5vw);
                    gap: 0.5rem;
                    stroke: var(--lessimportant);
                }

                .arrows2 {display:none;}
        
                .arrows svg {
                    width: calc(2vw + 3vh);
                    height: calc(2vw + 3vh);
                    transition: transform 0.3s ease;
                }

                .ls-terminebutton {
                    opacity:0;          /* wichtig für noscript */
                    -webkit-pointer-events: none;
                        -moz-pointer-events: none;
                        pointer-events: none;
                        -webkit-touch-action: none;
                        -moz-touch-action: none;
                        touch-action: none;
                }

    @media screen and (orientation: landscape) {
                    .arrows {display: none;}

                    .landscapearrows {
                        position:fixed;
                        /* top: 20vh;
                            right: calc(13vh + 4vw + 8vw - 2.5vh); */
                        /* FIXEDNAV li = width: calc(13vh + 4vw);  Rand: 8vw */

                        left: calc(10vw + 10vh);
                        top: calc(25vh + 2vw);
                            stroke: var(--lessimportant);
                    }

                    .landscapearrows>a {
                        color: var(--textfarbe);
                        font-size: calc(3vh + 0.2vw);         /* scroll -Wort */
                    }
                
                    .arrows2 {
                        display: block;
                            /*padding-left: calc(3.5vh - 3.5vw);
                            padding-right: calc(2vh - 0.5vw);*/
                        }

                    .ls-terminebutton {
                        position: fixed;
                        top: 49vh;
                        left: 13vw;
                        pointer-events:auto;
                        font-size:0.9em;
                        z-index:2;
                        opacity:0;
                        transition: opacity 0.8s;
                        -webkit-pointer-events: none;
                            -moz-pointer-events: none;
                            pointer-events: none;
                            -webkit-touch-action: none;
                            -moz-touch-action: none; touch-action: none;
                    }
                    .ls-terminebutton.open {
                        opacity: 1;
                        transition: opacity 0.8s;
                        -webkit-pointer-events: auto;
                            -moz-pointer-events: auto;
                            pointer-events: auto;
                            -webkit-touch-action: auto;
                            -moz-touch-action: auto; touch-action: auto;
                    }
}
        
/*__________________ ENDE SCROLL ICON SVG _________________________*/
        
/*__________________ LINK ICON SVG ________________________________*/
        
                .relative {
                    position: relative;
                }
        
                .linkicon {
                    /*position: absolute;
                    top: 0em;
                    left: -7vw;*/
                    /* width: calc(6vw + 4vh);
                    height: calc(6vw + 4vh); */
                    float: left;
                    width: 8vh;
                    height:8vh;
                    min-width: 8vh;
                    min-height: 8vh;
                    max-width: 8vh;
                    max-height: 8vh;
                    margin:-1.8em -0.8em -0.5em  -0.5em;
                    border-radius: 4px;
                    opacity: 1;
                    z-index:1;
                    /*box-shadow: 0 0 10px 3vw rgba(0, 0, 0, 0.4);*/
                    /* Quadratfarbe */
                    /* Farbe bei svgbg auch einstellen 
                        background-color: var(--lessimportant);
                        background-color: #7a7777;*/
                }

                @media screen and (orientation: landscape) {
                    .linkicon {
                            float: left;
                            width: 8vw;
                            height: 8vw;
                            min-width: 8vw;
                            min-height: 8vw;
                            max-width: 8vw;
                            max-height:8vw;
                    }
                }

                .startnavi-linkicon {
                        margin: -1.8em -0.8em -0.5em -0.5em;
                        border-radius: 4px;
                        z-index: 1;
                        opacity:0;
                }
                               
                               
        
                .linkicon path, .startnavi-linkicon path, .videoplay-icon path {
                    stroke: black;
                }
        

                                    */
                .linkicon .svgbgtermine{
                    fill: var(--lessimportant);
                    fill: #7f7c7c;
                }
        
                .linkicon:hover {
                    opacity: 1;
                }
        
                .allelink {         /* ist span text im a */
                    display: block;
                    padding: 10vw 3vw 10vw 3vw;
                    /*font-size:0.8em;*/
                    font-size:0.7em;
                    font-weight: bold;
                    /*border: 1px solid yellow;*/
                }

                .mehr-button {
                    display: inline-flex;
                        width: 100%;
                        min-width: 0;
                    padding:0.5em; /* linkicon entgegengesetzt */
                    border-radius:4px;
                    color: var(--textfarbe);
                    text-align: left;
                    font-size:0.95em;
                    font-weight: bold;
                    opacity:0.6;
                    margin:0.5em 0;
                    justify-content: center;
                }

                .videoplay .mehr-button {
                    opacity:1;
                }

                .videoplay a, 
                .loadvideo a, 
                .loadvideo2 a,
                .loadvideo3 a,
                .loadvideo4 a,
                .loadvideo5 a,
                .loadvideo6 a {
                    opacity: 0.8;
                }

                body.index .mehr-button{justify-content: center;}

                .mehr-button:hover, .videoplay a:hover, 
                .loadvideo a:hover, 
                .loadvideo2 a:hover,
                .loadvideo3 a:hover,
                .loadvideo4 a:hover,
                .loadvideo5 a:hover,
                .loadvideo6 a:hover {
                    opacity: 1;
                    text-decoration: none;
                }

                .mehr-button span {
                    color:white;
                    z-index:3;
                    display:block;
                }

                .extern {
                    display:inline;
                    width:1.5em;
                    height:1.5em;
                    margin-right:0.5em;
                }

                .extern-p {
                    display:inline;
                    width:1em;
                    height:1em;
                    margin-right:0;
                    margin-bottom:-0.2em;
                }

                @media screen and (orientation: landscape) {

                    .linkicon {
                        bottom: 0em;
                        left: 0;
                        width: 8vw;
                        height: 8vw;
                    }

                    .allelink {         /* ist span text im a */
                        display: block;
                        padding: 9vh 3vh 10vh 3vh;
                        font-size:0.7em;
                        font-weight: bold;
                        /*border: 1px solid yellow;*/
                    }
                    
                }


/* === STARTSEITE SCROLLCONTAINER ===================================== */

.scroll-wrapper {
    position: relative;
    top:0;
    /*height: 100vh;*/
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    margin:0;padding:0;
    overflow-anchor: none;
}

.scroll-content {
    /*height: 100vh;*/
    height: calc(var(--vh, 1vh) * 100);
    overflow-y: scroll;
    padding: 1rem;
    position: relative;
    z-index: 1;
    margin:0;padding:0;
    scroll-behavior: smooth;
}





/* Transparenz-Overlays */
.fade-top, .fade-top-sub,
.fade-bottom, .fade-bottom-sub, .fade-bottom-sub-nav {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
}

.fade-top {
    top: -17vh;
    height: 40vh;
    background: linear-gradient(to bottom,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 1) 80%,  /*75*/
                rgba(0, 0, 0, 0) 100%);
}

.fade-bottom {
    bottom: 0;
    height: 44vh;
    background: linear-gradient(to top,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 1) 75%,
                rgba(0, 0, 0, 0) 100%);
}

                .fade-top-sub {
                    top: -17vh;
                    height: 40vh;
                    background: linear-gradient(to bottom,
                            rgba(0, 0, 0, 1) 0%,
                            rgba(0, 0, 0, 1) 80%,
                            rgba(0, 0, 0, 0) 100%);
                }

                .fade-bottom-sub, .fade-bottom-sub-nav {
                    bottom: 0;
                    height: 15vh;
                    background: linear-gradient(to top,
                            rgba(0, 0, 0, 1) 0%,
                            rgba(0, 0, 0, 1) 65%,
                            rgba(0, 0, 0, 0) 100%);
                    transition: height 0.5s;
                }

                .fade-bottom-sub-nav {
                    height:0vh;
                    opacity: 0.95;
                }

                .fade-bottom-sub-nav.open {
                    height: calc(28vh + 30vw);
                    background: linear-gradient(to top,
                                rgba(0, 0, 0, 1) 0%,
                                rgba(0, 0, 0, 1) 87%,
                                rgba(0, 0, 0, 0) 100%);
                    transition: height 0.3s;
                }



                .ls-fade-right-sub {
                    visibility:hidden;
                }

                @media screen and (orientation: landscape) {
                                .ls-fade-right-sub {
                                    visibility: visible;
                                    content: "";
                                    z-index: 4;
                                    position: fixed;
                                    top: 0;
                                    right: -1vw;
                                    width: 1vw;
                                    height: 100vh;
                                    background: linear-gradient(to left,
                                        rgba(0, 0, 0, 1) 0%,
                                        rgba(0, 0, 0, 1) 90%,         
                                        rgba(0, 0, 0, 0) 100%);
                                    transition: width 0.5s;
                                    opacity:0.95;
                                }
                
                                .ls-fade-right-sub.open {
                                    width:calc(36vw + 24vh);
                                    transition: width 0.3s;
                                }

                            }


@media screen and (orientation: landscape) {
    .fade-top {
        top: -10vh;
        height: calc(25vh + 14vw);
    }

    .fade-bottom {
        bottom: 0;
        /*height: calc(15vh + 0.5vw);*/
        height: 15vh;
        background: linear-gradient(to top,
                    rgba(0, 0, 0, 1) 0%,
                    rgba(0, 0, 0, 1) 55%,
                    rgba(0, 0, 0, 0) 100%);
    }
    .fade-bottom-sub-nav.open {
        height: 0vh;
    }
}

/* === STARTSEITE FADER / BLACKNESS ===================================== */

#faderone {
    position: relative;
    width: 100%;
    height: 150vh;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 00%,
            rgba(0, 0, 0, 0) 70%,
            rgba(0, 0, 0, 0.8) 100%);
}

#faderone-sub {
    position: relative;
    width: 100%;
    height: 60vh;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 00%,
            rgba(0, 0, 0, 1) 100%);
}

@media screen and (orientation: landscape) {
    #faderone {
            height: 200vh;
            background: linear-gradient(to bottom,
                    rgba(0, 0, 0, 0) 00%,
                    rgba(0, 0, 0, 0.8) 65%,
                    rgba(0, 0, 0, 1) 100%);
        }
}



.fader {
    position: relative;
    width: 100%;
    /*height: 50vh;*/
    height: 70vh;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0) 30%,
            rgba(0, 0, 0, 0) 85%,
            rgba(0, 0, 0, 0.8) 100%);
}
.project-podcast .fader {
    height: 73vh;
}
@media screen and (orientation: landscape) {
    .project-podcast .fader {
            height: 77vh;   }
}


.fader-sub {
    position: relative;
    width: 100vw;
    height: 80vh;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 20%,
            rgba(0, 0, 0, 0) 60%,
            rgba(0, 0, 0, 0.8) 100%);
}

/*.videoplay {
    position: relative;
    width: 100vw;
    height: 60vh;
}*/

.videoplay {
    display:flex;
    position: relative;
    width: 100%;
    padding-top: 25%;
    padding-bottom:22%;
    aspect-ratio: 768 / 501;
    align-items: center;
    justify-content: center;
    background-repeat:no-repeat;
    background-size: cover;
    overflow:hidden; /* wichtig, da sonst die videocaption videoplay etwas höher macht und damit neben Bildern in der Galerie zu hoch */
}

.videoplay a {z-index: 3;}

.videoplay .linkicon {
   /* width: 5vh;
    height: 5vh;
    min-width: 5vh;
    min-height: 5vh;
    max-width: 5vh;
    max-height: 5vh;*/
    width:20%; height:20%;
    min-width:20%;max-width:20%;
    min-height:20%;max-height:20%;
    margin: 0 0 0 40%;
}

/*.videoplay-fade-overlay {
    position: relative;
    margin-top:-60vh;
    width: 100vw;
    height: 60vh;
    background: linear-gradient(to bottom,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 0) 18%,
                rgba(0, 0, 0, 0) 85%,
                rgba(0, 0, 0, 1) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}*/




.ls-fader {
    display:none;
    z-index: 8;
}

.faderschlusslinks {
    display:none;
}

@media screen and (orientation: landscape) {

    .ls-fader {
    display:block;
    position: absolute;
    width:90vw;
    height: 100vh;
    background: linear-gradient(to bottom,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 1) 60%,
                rgba(0, 0, 0, 1) 80%,
                rgba(0, 0, 0, 0) 100%);
    z-index: -1;
    }

    .faderschlusslinks {
        display:block;
        height:100vh;
        width: 46.6vw;
        position:relative;
        margin-top:-100vh;
        background: linear-gradient(to bottom,
                    rgba(0, 0, 0, 0) 0%,
                    rgba(0, 0, 0, 1) 20%,
                    rgba(0, 0, 0, 1) 50%,
                    rgba(0, 0, 0, 1) 100%);
    }
}

#faderlast {
    height: 30vh;
}

#faderbottom {
    position: relative;
    width: 100%;
    height: 55vh;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0) 30%,
            rgba(0, 0, 0, 0) 100%);
}

.blackbgtext, .blackbgtext-aktuelles, .blackbgtext-aktuelles-sub {
    display: block;
    /*border: 1px solid rgba(0, 0, 0, 0.5);  wichtig, da bug! Sonst background nicht voll ausgefüllt */
    padding: 0 14vw 3em 15.5vw;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 1));
}

.blackbgtext-aktuelles {
    text-align: center;
}

.blackbgtext-one-sub {
    display: block;
    padding: 0 14vw 3em 15.5vw;
    background-color:black;
    border: 1px solid black; /* wichtig, da bug: sonst background nicht voll ausgefüllt */
}


.grid-blackbgtext {
    background: black;
}


@media screen and (orientation: landscape) {
    .blackbgtext {
            padding-right: calc(29vw + 19vh);
            padding-top:0;
            padding-bottom: 3em;
            padding-left: calc(13.5vw - 3vh);
            }
    .blackbgtext-aktuelles {    
        /*padding-top: 0;*/
        padding-top: 1em;
        padding-left: calc(12vw - 2vh);
        padding-bottom: 3em;
        padding-right: calc(12vw - 2vh);
        text-align: center;
    }
    
                        .blackbgtext-aktuelles-sub {
                            /*padding-top: 0;*/
                            padding-left: calc(13vw - 2vh);
                            padding-top: 1em;
                            padding-bottom: 3em;
                            padding-right: calc(24vw - 2vh);
                            text-align: left;
                            
                        }
                        .blackbgtext-one-sub {
                            /*display: block;*/
                            padding: 0 calc(24vw - 2vh) 3em calc(13vw - 2vh);
                           /* background:black;*/
                        }

                        .ls-blackbgtext,
                        .grid-blackbgtext {
                            background: black;
                        }
}



.blackbgtext-projekt {
    
    display: block;
    padding: 18vw 14vw 3vw 15.5vw;
    background: linear-gradient(to bottom, 
                    rgba(0, 0, 0, 1) 0%, 
                    rgba(0, 0, 0, 0.8) 30%,
                    rgba(0, 0, 0, 0.4) 70%,
                    rgba(0, 0, 0, 0)100%);
}

.blackbgtext-schluss {

    /*height:100vh;*/
    height: calc(var(--vh, 1vh) * 100);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin:0;
    /*padding-top: 14vh;
        padding-right: 14vw;
        padding-bottom: 0;
        padding-left: 14vw;*/
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.8) 25%,
            rgba(0, 0, 0, 0.2) 50%,
            rgba(0, 0, 0, 0)100%);
}

.blackbgtext-schluss-sub {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height:auto;
    /*padding-top: 3em;*/
    padding-bottom: 5em;
    padding: 0 14vw 3em 15.5vw;
    background: linear-gradient(to bottom,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 0.8) 80%,
                rgba(0, 0, 0, 0)100%);
}


@media screen and (orientation: landscape) {
    .blackbgtext-schluss {
        height: calc(var(--vh, 1vh) * 115);
        padding-left: calc(51vw - 23vh);
    }

    .blackbgtext-schluss-sub {
        padding-left: calc(13vw - 2vh);
            /*padding-bottom: 70vh;*/
            padding-right: calc(24vw - 2vh);
    }
}



/*.platzmacher {
    height: 10vh;
    width: 100vw;
}*/

/*.mehrbgfade {
    display: block;
    padding: 0 10vw 20vh 10vw;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 1) 0%,                kann weg
            rgba(0, 0, 0, 0.8) 30%,
            rgba(0, 0, 0, 0.3) 70%,
            rgba(0, 0, 0, 0)100%);
}*/


/* Geisterborder-Hacks */
/*background-origin: padding-box;
    background-clip: padding-box;
        border: none;
        outline:none;
        box-shadow: none;
        margin: 0;*/
/*transform: translate3d(0, 0, 0);*/
/* Alternative zu translateZ(0) - Rendering hack */
/*will-change: transform;*/
/* Optimiert Repaint */

/* ========================================== NOSCRIPT ANIMATIONEN ========================================================= */

/*_____ ANIMATION TITEL ____________________________________*/
.moveup-title {
    transform: translateY(calc(59vh - 27vw)); 
    animation: moveToTop 1s ease-out 2s forwards;
}

@media screen and (orientation: landscape) {
    .moveup-title {
        transform: translateY(calc(57vh + 2vw));
    }   
    
}

@keyframes moveToTop {
    to {
        transform: translateY(0);
    }
}

/*_____ ANIMATION NAVISTART nach unten ____________________________*/
.movedown-navistart { 
    transform: translateY(calc(-7vh + 5vw));
    animation: moveToBottom 1s ease-out 2s forwards;                             /* raus, sobald es Javascript gibt */
}

@keyframes moveToBottom {
    to {
        transform: translateY(0);
    }
}

/*_____ ANIMATION FADER-START ____________________________________*/
.fadetop {
    opacity: 0;
    animation: 
        fadeIn 2s ease-out 2s forwards,
        fadeGrow 2s ease-out 2s forwards;  
    /*fadeOut 1s ease-out 20s forwards;*/
}

.fadebottom {
    opacity: 0;
    animation:
        fadeIn 1s ease-out 2s forwards,
        fadeShrink 1s ease-out 1s forwards;
        /*fadeOut 1s ease-out 20s forwards;*/
}

.fade-scrollcontent {
    opacity: 0;
    animation: fadeIn 1s ease-out 2.5s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.fade-arrows {
    opacity: 0;
    animation: fadeIn 1s ease-out forwards,
        fadeOut 2.5s ease-out 3s forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}

/*_____ ANIMATION PROJEKT-QUADRATE-ÖFFNEN incl FADES_____________________________*/

@keyframes fadeGrow {
    to {
        transform: translateY(10vh);
    }
}


@keyframes fadeShrink {
    to {
        transform: translateY(21vh);
    }
}


@media screen and (orientation: landscape) {
    @keyframes fadeGrow {
        to {
            transform: translateY(calc(-12vh - 2vw));
        }
    }
    
    @keyframes fadeShrink {
        to {
            transform: translateY(0vh);
        }
    }
}


.musikli {
    animation: musikMove 2s ease-out 3s forwards;
}

.theaterli {
    animation: theaterMove 2s ease-out 3s forwards;
}

.podcastli {
    animation: podcastMove 2s ease-out 3s forwards;
}

.tvfilmli {
    animation: tvfilmMove 2s ease-out 3s forwards;
}

@keyframes musikMove {
    to {
        transform:
            translateX(calc(-1 * (43.5vw - 7vh)))
            /* -1* (weil es nach links rutschen soll)
                                                            43.5vw (100vw - 18.5vw Abstand der fixednav von rechts
                                                                          - 28 vw Breite der fixednav-li incl. gap
                                                                          = 53.5 müsste es nach links um auf 0 zu stehen
                                                                          + 10vw die es jetzt von links Abstand haben soll)
                                                            - 7vh  (- 8vh aus der Breite der fixednav-li (2*4vh)
                                                                    + 1vh aus dem Abstand der fixednav von rechts, der in die andere Richtung ging)
                                                            = so steht das li jetzt genau bei 10vw von links */
            translateY(calc(-1 * (65vh - 28vw)));
        /* -1* (weil es nach oben rutschen soll)
                                                            65vh (100vh - 17vh die es jetzt von oben Abstand haben soll
                                                                        - 10vh Abstand der fixednav vom bottom
                                                                        -  8vh, aus der Höhe der fixednav (2x 4vh, pro startnavi li)
                                                          - 28vw (2x13vw + 2vw gap) aus Höhe der fixednav 
                                                          = so steht das li jetzt genau bei 20vh vom top*/
        justify-content: flex-start;
        align-items: flex-start;
    }

    0% {
        color: rgba(255, 255, 255, 1);
    }

    45% {
        color: rgba(255, 255, 255, 0);
    }

    55% {
        color: rgba(255, 255, 255, 0);
    }

    100% {
        color: rgba(255, 255, 255, 1);
    }
}

@keyframes theaterMove {
    to {
        transform:
            translateX(calc(8.5vw - 1vh))
            /*   - 1vh wieder zurücknehmen aus dem Abstand der fixednav von rechts (eigentlich plus aber jetzt in andere Richtung)
                                                18.5vw Abstand der fixednav sind 8.5 zu viel um auf 10vw zu kommen
                                                = so steht das li jetzt genau bei 10vw von links */
            translateY(calc(-1 * (65vh - 28vw)));
        /* -1* (weil es nach oben rutschen soll)
                                                            65vh (100vh - 10vh Abstand der fixednav vom bottom 
                                                                        - 17vh die es jetzt von oben Abstand haben soll
                                                                        -  8vh, aus der Höhe der fixednav (2x 4vh, pro startnavi li)
                                                          - 28vw (2x13vw + 2vw gap) aus Höhe der fixednav 
                                                          = so steht das li jetzt genau bei 20vh vom top*/
        justify-content: flex-end;
        align-items: flex-start;
    }

    0% {
        color: rgba(255, 255, 255, 1);
    }

    45% {
        color: rgba(255, 255, 255, 0);
    }

    55% {
        color: rgba(255, 255, 255, 0);
    }

    100% {
        color: rgba(255, 255, 255, 1);
    }
}


@keyframes podcastMove {
    to {
        transform:
            translateX(calc(-1 * (43.5vw - 7vh)))
            /* -1* (weil es nach links rutschen soll)
                                                            43.5vw (100vw - 18.5vw Abstand der fixednav von rechts
                                                                          - 28 vw Breite der fixednav-li incl. gap
                                                                          = 53.5 müsste es nach links um auf 0 zu stehen
                                                                          + 10vw die es jetzt von links Abstand haben soll)
                                                            - 7vh  (- 8vh aus der Breite der fixednav-li (2*4vh)
                                                                    + 1vh aus dem Abstand der fixednav von rechts, der in die andere Richtung ging)
                                                            = so steht das li jetzt genau bei 10vw von links */
            translateY(3vh);
        /* weil unten 10vh Abstand sind und es nur noch 7vh sein sollen */

        justify-content: flex-start;
        align-items: flex-end;
    }

    0% {
        color: rgba(255, 255, 255, 1);
    }

    45% {
        color: rgba(255, 255, 255, 0);
    }

    55% {
        color: rgba(255, 255, 255, 0);
    }

    100% {
        color: rgba(255, 255, 255, 1);
    }
}

@keyframes tvfilmMove {
    to {
        transform:
            translateX(calc(8.5vw - 1vh))
            /*   - 1vh wieder zurücknehmen aus dem Abstand der fixednav von rechts (eigentlich plus aber jetzt in andere Richtung)
                                                18.5vw Abstand der fixednav sind 8.5 zu viel um auf 10vw zu kommen
                                                = so steht das li jetzt genau bei 10vw von links */
            translateY(3vh);
        /* weil unten 10vh Abstand sind und es nur noch 7vh sein sollen */

        justify-content: flex-end;
        align-items: flex-end;
    }

    0% {
        color: rgba(255, 255, 255, 1);
    }

    45% {
        color: rgba(255, 255, 255, 0);
    }

    55% {
        color: rgba(255, 255, 255, 0);
    }

    100% {
        color: rgba(255, 255, 255, 1);
    }
}


/* ___________________ Landscape NAVIGATION ANIMATION ___________________________*/
@media screen and (orientation: landscape) {
    @keyframes musikMove {
        to {
            transform:
                translateX(calc(-1 * (38vw - 27vh))) /* eigentlich 35vw - 22vh, aber es soll sich dynamisch weiter nach links anpassen, je breiter viewport */
                /*translateX(calc(-1 * (43.5vw - 7vh)))*/
                /* -1* (weil es nach links rutschen soll)                                                                   = 35 vw
                                                                43.5vw (100vw - 18.5vw Abstand der fixednav von rechts              100vw - 12vw
                                                                            - 28 vw Breite der fixednav-li incl. gap                -8 width: calc(11vh + 3vw); gap 2vw
                                                                            = 53.5 müsste es nach links um auf 0 zu stehen          = 80 vw
                                                                            + 10vw die es jetzt von links Abstand haben soll)       - 45 vw
                                                                - 7vh  (- 8vh aus der Breite der fixednav-li (2*4vh)        - 22vh (2x 11vh)
                                                                        + 1vh aus dem Abstand der fixednav von rechts, der in die andere Richtung ging)
                                                                = so steht das li jetzt genau bei 10vw von links */
                translateY(calc(-1 * (61vh - 8.5vw)));
            /*translateY(calc(-1 * (65vh - 28vw)));*/
            /* -1* (weil es nach oben rutschen soll)                                                                            = 61 vh
                                                                65vh (100vh - 17vh die es jetzt von oben Abstand haben soll         100vh 
                                                                            - 10vh Abstand der fixednav vom bottom                        - 11vh
                                                                            -  8vh, aus der Höhe der fixednav (2x 4vh, pro startnavi li)  - 22vh  (2x11)
                                                                                                                                          - 6vh, die es jetzt von oben Abstand haben soll
                                                            - 28vw (2x13vw + 2vw gap) aus Höhe der fixednav                     - 8vw // aber hier 8.5 vh, um es dynamisch neben Titel zu positionieren
                                                            = so steht das li jetzt genau bei 20vh vom top*/
            justify-content: flex-start;
            align-items: flex-start;
        }

        0% {
            color: rgba(255, 255, 255, 1);
        }

        45% {
            color: rgba(255, 255, 255, 0);
        }

        55% {
            color: rgba(255, 255, 255, 0);
        }

        100% {
            color: rgba(255, 255, 255, 1);
        }
    }

    @keyframes theaterMove {
        to {
            transform:
                translateX(7vw)
                /* 12vw würde es auf 0 vom Rand setzen - 5vw, die es jetzt Abstand von rechts haben soll) */
                translateY(calc(-1 * (61vh - 8.5vw)));
            /* genau wie bei musikMove nach oben */
            justify-content: flex-end;
            align-items: flex-start;
        }

        0% {
            color: rgba(255, 255, 255, 1);
        }

        45% {
            color: rgba(255, 255, 255, 0);
        }

        55% {
            color: rgba(255, 255, 255, 0);
        }

        100% {
            color: rgba(255, 255, 255, 1);
        }
    }

        @keyframes podcastMove {
            to {
                transform:
                translateX(calc(-1 * (38vw - 27vh))) /* nach links genau wie musikMove */
                    /* -1* (weil es nach links rutschen soll)
                                                                    43.5vw (100vw - 18.5vw Abstand der fixednav von rechts
                                                                                  - 28 vw Breite der fixednav-li incl. gap
                                                                                  = 53.5 müsste es nach links um auf 0 zu stehen
                                                                                  + 10vw die es jetzt von links Abstand haben soll)
                                                                    - 7vh  (- 8vh aus der Breite der fixednav-li (2*4vh)
                                                                            + 1vh aus dem Abstand der fixednav von rechts, der in die andere Richtung ging)
                                                                    = so steht das li jetzt genau bei 10vw von links */
                    translateY(4vh);
                /* weil unten 11vh Abstand sind und es nur noch 7vh sein sollen */
    
                justify-content: flex-start;
                align-items: flex-end;
            }
    
            0% {
                color: rgba(255, 255, 255, 1);
            }
    
            45% {
                color: rgba(255, 255, 255, 0);
            }
    
            55% {
                color: rgba(255, 255, 255, 0);
            }
    
            100% {
                color: rgba(255, 255, 255, 1);
            }
        }
    
        @keyframes tvfilmMove {
            to {
                transform:
                translateX(7vw)  /* genau wie theaterMove nach rechts */
                    translateY(4vh);
    
                justify-content: flex-end;
                align-items: flex-end;
            }
    
            0% {
                color: rgba(255, 255, 255, 1);
            }
    
            45% {
                color: rgba(255, 255, 255, 0);
            }
    
            55% {
                color: rgba(255, 255, 255, 0);
            }
    
            100% {
                color: rgba(255, 255, 255, 1);
            }   }
}

/*_____ ENDE ANIMATION PROJEKT-QUADRATE-ÖFFNEN ________________________*/


/* @keyframes musikMoveEnde {
    to {
        transform:
        translateX(calc(-1 * (17.5vw - 3vh))) */       /* -1* (weil es nach links rutschen soll - ACHTUNG: VOM URSPRUNGSWERT, NICHT von der Position der 1. Animation!
                                                            die Mitte der Navi lag ursprünglich bei 13vw + 4vh (eine li-Breite) + 1vw (1/2 gap)
                                                            plus 18,5vw - 1vh Abstand von rechts
                                                            = alte Mitte bei 32,5vw + 3vh. Das Ganze soll auf 50vw verschoben werden, also
                                                            50vw - (32,5 + 3 vh)
                                                            = 17,5vw - 3vh
                                                            */ 
/*       translateY(calc(-45vh + 14vw)); 
        justify-content: flex-start;
        align-items: flex-end;
    }

    0% {
        color: rgba(255, 255, 255, 1);
    }

    45% {
        color: rgba(255, 255, 255, 0);
    }

    55% {
        color: rgba(255, 255, 255, 0);
    }

    100% {
        color: rgba(255, 255, 255, 1);
    }
}

@keyframes theaterMoveEnde {
    to {
        transform:
            translateX(calc(-1 * (17.5vw - 3vh)))
            translateY(calc(-45vh + 14vw));
        justify-content: flex-start;
        align-items: flex-end;
    }

    0% {
        color: rgba(255, 255, 255, 1);
    }

    45% {
        color: rgba(255, 255, 255, 0);
    }

    55% {
        color: rgba(255, 255, 255, 0);
    }

    100% {
        color: rgba(255, 255, 255, 1);
    }
}

@keyframes podcastMoveEnde {
    to {
        transform:
            translateX(calc(-1 * (17.5vw - 3vh)))
            translateY(calc(-45vh + 14vw));
        justify-content: flex-start;
        align-items: flex-end;
    }

    0% {
        color: rgba(255, 255, 255, 1);
    }

    45% {
        color: rgba(255, 255, 255, 0);
    }

    55% {
        color: rgba(255, 255, 255, 0);
    }

    100% {
        color: rgba(255, 255, 255, 1);
    }
}

@keyframes tvfilmMoveEnde {
    to {
        transform:
            translateX(calc(-1 * (17.5vw - 3vh)))
            translateY(calc(-45vh + 14vw));
        justify-content: flex-start;
        align-items: flex-end;
    }

    0% {
        color: rgba(255, 255, 255, 1);
    }

    45% {
        color: rgba(255, 255, 255, 0);
    }

    55% {
        color: rgba(255, 255, 255, 0);
    }

    100% {
        color: rgba(255, 255, 255, 1);
    }
}
    */








/*_______________________________________________________________________________*/
/*_______________________________________________________________________________*/


/* BARRIEREFREIHEIT________________________ */
/* für Tastatur-Navigation */
/*:focus {                           alle Fokussierungen, z.B. ohne Mausbedienung */
:focus-visible {
    /* nur sichtbare Fokussierungen, z.B. bei Tastaturbedienung */
    outline: 2px solid blueviolet;
}

.skip-link {
    position: absolute;
    top: -70px;
    left: 0;
    background: #000;
    color: var(--linkfarbe);
    padding: 8px;
    z-index: 10;
}

.skip-link:focus {
    /* nur sichtbar, wenn fokussiert */
    top: 0;
}


/* TERMINSEITE_______________________ */
#alle-termine {
    margin-top: 3em;
}

.termin {
    /* to be found in termine-loader.js */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}









/* Termin Filter */
/* This section styles the filter buttons for the events page */

#alle-anzeigen-container,
#kategorien-container,
#projekte-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.5em;
}

button {
    border:none;
    margin:0; padding:0; padding-block:0; padding-inline:0;
}

.filter-button {
    margin:0.3em 0.6em 0.3em 0;
    padding: 1em;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0.7;
    font-size:0.8em;
    color: white;
}
.filter-button.tvfilmbg {
    background-color: rgba(184, 151, 126,0.75); /* --tvfilmfarbe */
}
.filter-button:hover {
    opacity: 1;
    font-weight: bold;
}
.filter-button.active {
    color: var(--textfarbe);
    font-weight: bold;
    opacity: 1;
}

#alle-anzeigen-container .filter-button {
    background-color: rgba(127, 124, 124, 0.8); /* --lessimportant */
}


#projekte-container .filter-button {
    background-color: lightskyblue;
}



.termin-element { /* <li> des <ul> ...-termine, z.B. .musik-termine */
    margin-bottom: 1em;
    list-style: none;
    border-radius: 4px;
    padding: 0.8em;
}

/* Alternierende Hintergrundfarbe für Listeneinträge der Terminliste */
/*.termin-element:nth-child(even) {
    background-color: var(--musikfarbe);
    background-color: rgba(43, 98, 189, 0.4);
}
.termin-element:nth-child(odd) {
    background-color: var(--lessimportant);
    background-color: rgba(122, 119, 119, 0.4);
}*/

.termin-element a {
    color: var(--textfarbe);
}

.ticketgrid {
    width: 100%;
    display: grid;
    /*grid-template-columns: calc(44vw - 7vh) calc(18vw + 4vh);*/
    grid-template-columns: 68% 32%;
    gap: 1vw;
}

.tickets {
    /*background-color: var(--musikfarbe);
    background-color: rgba(43, 98, 189, 0.5);*/
    color: white !important;
    font-weight: bold;
    border-radius: 4px;
    margin:0.2em 0.8em 0.8em 0.2em;
    
    display: block;
    text-align: center;
    opacity:0.6;
    /*overflow-wrap: break-word;
        word-break: break-all;*/
        padding: 2vh 0.2em;
        font-size: calc(1vh + 1.3vw);
}

.tickets img {/* zusätzlich zu .extern */
    margin-bottom: -0.6em;
    padding:0.2em;
    display: inline;
        width: 1.8em;
        height: 1.8em;
}
body.kontakt img, #impressum-sub img,
.sitemapNav img {
    /* zusätzlich zu .extern */
    margin: 0 0 -0.6em -0.4em;
    padding: 0.2em;
    display: inline;
    width: 1.8em;
    height: 1.8em;
}


.tickets:hover {
    opacity:1;
    color: black !important;
}

/*#musik-termine,
#theater-termine,
#podcast-termine,
#tvfilm-termine {
    padding:0 0 2em 0;
    text-align: center;
}*/


/*  NEUE TERMIN-IDS und KLASSEN ____________*/
/* 
🔹 IDs: 
    musik-termin,
    theater-termin,
    podcast-termin,
    tvfilm-termin → für Startseiten-Kategoriekacheln 

    filter-container → Container für die Filterbuttons 
    alle-termine → Liste mit allen gefilterten Terminen 
    
    musik-termine,
    theater-termine,
    podcast-termine,
    tvfilm-termine → Container auf Kategorie-Einzelseiten 

🔹 Klassen: 
    .termin-element → Wrapper für jeden Termin 
    .termin → Termin-Artikel selbst 
    .filter-button → Jede Schaltfläche im Filter 
    .active → Wird beim Klick auf einen Filterbutton gesetzt (und wieder entfernt) 
    
🔹 Neu von mir eingeführt (jetzt in der Datei drin): 
    id="active-kategorie" → Wenn ein Kategorie-Filter aktiv ist 
    id="active-projekt" → Wenn ein Projekt-Filter aktiv ist 
    id="active-all" → Wenn „Alle anzeigen“ aktiv ist */





/* =====================================   SUB-SEITEN GRID   ========== */
.grid-container-margins {
    /* muss gleiche Breite und paddings haben wie blackbgtext-sub padding: 0 14vw 3em 15.5vw; */
    background: black;
    margin: 0 ;
    padding: 0 14vw 3em 15.5vw;
}

@media screen and (orientation: landscape) {
    .grid-container-margins {
        margin: 0;
        padding: 0 calc(24vw - 2vh) 0 calc(13vw - 2vh);
    }
}

.grid-container-sub {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11em, 1fr)); /* Spaltenanzahl Umbruchwert hier */
    gap: 2.5rem;
    width: 100%;
    margin: 0 auto;

    background: black;
}

.grid-box {
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
    /* ggf. padding/margin anpassen */
}
/* =====================================   STARTSEITE HINTERGRUNDBILDER   ==================================================================== */

body {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.parallax, .parallax-sub {
    background-size:contain;
    background-position: center top calc(29vh - 12vw);
    background-repeat: no-repeat;
}

@media screen and (orientation: landscape) {
    .parallax {
            background-attachment: scroll;
            background-size: 100% auto;
            background-position: center top calc(23vh - 12vw);
            background-repeat: no-repeat;   }
    .parallax-sub {
    background-position: center top calc(10vh - 20vw);
}
}

.parallaktuelles, .parallaktuelles-sub {
    height: auto;
}

.musik-termin-container,
.theater-termin-container,
.podcast-termin-container,
.tvfilm-termin-container {
    padding: 0;
}

@media screen and (orientation: landscape) {
    .parallaktuelles {
        width: 48vw;
        margin-left: calc(46vw + 0.69vh);
        box-sizing: border-box;
        overflow-x: hidden;
    }
        .parallaktuelles-sub {
            width: 100vw;
            margin-left: 0;
            box-sizing: border-box;
            overflow-x: hidden;
        }
}




/* ______________________________________   BODY HINTERGRUNDBILDER für Responsive    ___________________________ */

/* _________ STATISCHE - BACKGROUNDS STARTSEITE ____________________________________ */

/* _________ 2560 ____________________________________ */
@media screen and (orientation: portrait) and (min-height: 1920px) {
    body {
        background-image: url('/assets/images/startseite/bg1-p-2560-thomas-ruehmann.jpg');
    }
    body.musik {
        background-image: url('/assets/images/musik/2560-musik-thomas-ruehmann-bg-ls.jpg');
    }
    body.theater {
        background-image: url('/assets/images/theater/2560-theater-thomas-ruehmann-bg-ls.jpg');
    }
    body.podcast {
        background-image: url('/assets/images/podcast/2560-podcast-thomas-ruehmann-bg-ls.jpg');
    }
    body.tvfilm {
        background-image: url('/assets/images/tvfilm/2560-in-aller-freundschaft-thomas-ruehmann-bg-ls.jpg');
    }
    body.termine {
        background-image: url('/assets/images/termine/2560-termine-thomas-ruehmann-bg-ls.jpg');
    }
    body.theateramrand {
        background-image: url('/assets/images/theateramrand/2560-theateramrand-thomas-ruehmann-bg-ls.jpg');
    }
    body.sugarman {
        background-image: url('/assets/images/sugar-man-sixto-rodriguez-tribute-thomas-ruehmann/2560-sugar-man-thomas-ruehmann-bg-ls.jpg');
    }
    body.jung {
        background-image: url('/assets/images/gundermann-neil-young-navid-kermani/2560-neil-young-thomas-ruehmann-bg-ls.jpg');
    }
    body.tomwaits {
        background-image: url('/assets/images/tom-waits-chuck-berry-thomas-ruehmann/2560-tom-waits-thomas-ruehmann-bg-p.jpg');
    }
    body.solo {
        background-image: url('/assets/images/solo-lebenslieder-thomas-ruehmann/2560-0-bild-solo-thomas-ruehmann.jpg');
    }
    body.rue {
        background-image: url('/assets/images/martin-ruehmann-bruder-band/2560-martin-ruehmann-thomas-ruehmann-bg-ls.jpg');
    }
    body.band {
        background-image: url('/assets/images/band-thomas-ruehmann-lieder-lebensreise/2560-band-thomas-ruehmann-bg-ls.jpg');
    }


    .parall2, .parall2noscript {
        background-image: url('/assets/images/startseite/bg2-p-2560-thomas-ruehmann.jpg');
        height: auto;
    }
    .parall3, .parall3noscript {/*Schlussbild*/
        background-image: url('/assets/images/startseite/bg3-p-2560-thomas-ruehmann.jpg');
        height: auto;
    }
}

@media screen and (orientation: landscape) and (min-width: 1920px) {
    body {
        background-image: url('/assets/images/startseite/bg1-ls-2560-thomas-ruehmann.jpg');
    }
    body.musik {
        background-image: url('/assets/images/musik/2560-musik-thomas-ruehmann-bg-ls.jpg');
    }
    body.theater {
        background-image: url('/assets/images/theater/2560-theater-thomas-ruehmann-bg-ls.jpg');
    }
    body.podcast {
        background-image: url('/assets/images/podcast/2560-podcast-thomas-ruehmann-bg-ls.jpg');
    }
    body.tvfilm {
        background-image: url('/assets/images/tvfilm/2560-in-aller-freundschaft-thomas-ruehmann-bg-ls.jpg');
    }
    body.termine {
        background-image: url('/assets/images/termine/2560-termine-thomas-ruehmann-bg-ls.jpg');
    }   
    body.theateramrand {
        background-image: url('/assets/images/theateramrand/2560-theateramrand-thomas-ruehmann-bg-ls.jpg');
    }
    body.sugarman {
        background-image: url('/assets/images/sugar-man-sixto-rodriguez-tribute-thomas-ruehmann/2560-sugar-man-thomas-ruehmann-bg-ls.jpg');
    }
    body.jung {
        background-image: url('/assets/images/gundermann-neil-young-navid-kermani/2560-neil-young-thomas-ruehmann-bg-ls.jpg');
    }
    body.tomwaits {
        background-image: url('/assets/images/tom-waits-chuck-berry-thomas-ruehmann/2560-0-bild-tom-waits-thomas-ruehmann.jpg');
    }
    body.solo {
        background-image: url('/assets/images/solo-lebenslieder-thomas-ruehmann/2560-0-bild-solo-thomas-ruehmann.jpg');
    }
    body.rue {
        background-image: url('/assets/images/martin-ruehmann-bruder-band/2560-martin-ruehmann-thomas-ruehmann-bg-ls.jpg');
    }
    body.band {
        background-image: url('/assets/images/band-thomas-ruehmann-lieder-lebensreise/2560-band-thomas-ruehmann-bg-ls.jpg');
    }

    .parall2, .parall2noscript {
        background-image: url('/assets/images/startseite/bg2-ls-2560-thomas-ruehmann.jpg');
    }
    .parall3, .parall3noscript {
        background-image: url('/assets/images/startseite/bg3-ls-2560-thomas-ruehmann.jpg');
    }
}

/* _________ 1920 ____________________________________ */

@media screen and (orientation: portrait) and (max-height: 1920px) {
    body {
        background-image: url('/assets/images/startseite/bg1-p-1920-thomas-ruehmann.jpg');
    }
    body.musik {
        background-image: url('/assets/images/musik/1920-musik-thomas-ruehmann-bg-ls.jpg');
    }
    body.theater {
        background-image: url('/assets/images/theater/1920-theater-thomas-ruehmann-bg-ls.jpg');
    }
    body.podcast {
        background-image: url('/assets/images/podcast/1920-podcast-thomas-ruehmann-bg-ls.jpg');
    }
    body.tvfilm {
        background-image: url('/assets/images/tvfilm/1920-in-aller-freundschaft-thomas-ruehmann-bg-ls.jpg');
    }
    body.termine {
        background-image: url('/assets/images/termine/1920-termine-thomas-ruehmann-bg-ls.jpg');
    }
    body.theateramrand {
        background-image: url('/assets/images/theateramrand/1920-theateramrand-thomas-ruehmann-bg-ls.jpg');
    }
    body.sugarman {
        background-image: url('/assets/images/sugar-man-sixto-rodriguez-tribute-thomas-ruehmann/1920-sugar-man-thomas-ruehmann-bg-ls.jpg');
    }
    body.jung {
        background-image: url('/assets/images/gundermann-neil-young-navid-kermani/1920-neil-young-thomas-ruehmann-bg-ls.jpg');
    }
    body.tomwaits {
        background-image: url('/assets/images/tom-waits-chuck-berry-thomas-ruehmann/1920-tom-waits-thomas-ruehmann-bg-p.jpg');
    }
    body.solo {
        background-image: url('/assets/images/solo-lebenslieder-thomas-ruehmann/1920-0-bild-solo-thomas-ruehmann.jpg');
    }
    body.rue {
        background-image: url('/assets/images/martin-ruehmann-bruder-band/1920-martin-ruehmann-thomas-ruehmann-bg-ls.jpg');
    }
    body.band {
        background-image: url('/assets/images/band-thomas-ruehmann-lieder-lebensreise/1920-band-thomas-ruehmann-bg-ls.jpg');
    }

        

    .parall2,
    .parall2noscript {
        background-image: url('/assets/images/startseite/bg2-p-1920-thomas-ruehmann.jpg');
        height: auto;
    }

    .parall3,
    .parall3noscript {
        /*Schlussbild*/
        background-image: url('/assets/images/startseite/bg3-p-1920-thomas-ruehmann.jpg');
        height: auto;
    }
}

@media screen and (orientation: landscape) and (max-width: 1920px) {
    body {
        background-image: url('/assets/images/startseite/bg1-ls-1920-thomas-ruehmann.jpg');
    }
    body.musik {
        background-image: url('/assets/images/musik/1920-musik-thomas-ruehmann-bg-ls.jpg');
    }
    body.theater {
        background-image: url('/assets/images/theater/1920-theater-thomas-ruehmann-bg-ls.jpg');
    }
    body.podcast {
        background-image: url('/assets/images/podcast/1920-podcast-thomas-ruehmann-bg-ls.jpg');
    }
    body.tvfilm {
        background-image: url('/assets/images/tvfilm/1920-in-aller-freundschaft-thomas-ruehmann-bg-ls.jpg');
    }
    body.termine {
        background-image: url('/assets/images/termine/1920-termine-thomas-ruehmann-bg-ls.jpg');
    }
    body.theateramrand {
        background-image: url('/assets/images/theateramrand/1920-theateramrand-thomas-ruehmann-bg-ls.jpg');
    }
    body.sugarman {
        background-image: url('/assets/images/sugar-man-sixto-rodriguez-tribute-thomas-ruehmann/1920-sugar-man-thomas-ruehmann-bg-ls.jpg');
    }
    body.jung {
        background-image: url('/assets/images/gundermann-neil-young-navid-kermani/1920-neil-young-thomas-ruehmann-bg-ls.jpg');
    }
    body.tomwaits {
        background-image: url('/assets/images/tom-waits-chuck-berry-thomas-ruehmann/1920-0-bild-tom-waits-thomas-ruehmann.jpg');
    }
    body.solo {
        background-image: url('/assets/images/solo-lebenslieder-thomas-ruehmann/1920-0-bild-solo-thomas-ruehmann.jpg');
    }
    body.rue {
        background-image: url('/assets/images/martin-ruehmann-bruder-band/1920-martin-ruehmann-thomas-ruehmann-bg-ls.jpg');
    }
    body.band {
        background-image: url('/assets/images/band-thomas-ruehmann-lieder-lebensreise/1920-band-thomas-ruehmann-bg-ls.jpg');
    }

    .parall2,
    .parall2noscript {
        background-image: url('/assets/images/startseite/bg2-ls-1920-thomas-ruehmann.jpg');
    }

    .parall3,
    .parall3noscript {
        background-image: url('/assets/images/startseite/bg3-ls-1920-thomas-ruehmann.jpg');
    }
}

/* _________ 1024 ____________________________________ */

/*@media screen and (orientation: portrait) and (max-height: 1024px) {
    body {
        background-image: url('/assets/images/startseite/bg1-p-1024-thomas-ruehmann.jpg');
    }
    body.musik {
        background-image: url('/assets/images/musik/1024-musik-thomas-ruehmann-bg-ls.jpg');
    }
    body.theater {
        background-image: url('/assets/images/theater/1024-theater-thomas-ruehmann-bg-ls.jpg');
    }
    body.podcast {
        background-image: url('/assets/images/podcast/1024-podcast-thomas-ruehmann-bg-ls.jpg');
    }
    body.tvfilm {
        background-image: url('/assets/images/tvfilm/1024-in-aller-freundschaft-thomas-ruehmann-bg-ls.jpg');
    }
    body.termine {
        background-image: url('/assets/images/termine/1024-termine-thomas-ruehmann-bg-ls.jpg');
    }
    body.theateramrand {
        background-image: url('/assets/images/theateramrand/1024-theateramrand-thomas-ruehmann-bg-ls.jpg');
    }
    body.sugarman {
        background-image: url('/assets/images/sugar-man-sixto-rodriguez-tribute-thomas-ruehmann/1024-sugar-man-sixto-rodriguez-tribute-thomas-ruehmann-tribute-thomas-ruehmann-bg-ls.jpg');
    }
    body.jung {
        background-image: url('/assets/images/gundermann-neil-young-navid-kermani/1024-neil-young-thomas-ruehmann-bg-ls.jpg');
    }
    body.tomwaits {
        background-image: url('/assets/images/tom-waits-chuck-berry-thomas-ruehmann/1024-tom-waits-thomas-ruehmann-bg-p.jpg');
    }
    body.solo {
        background-image: url('/assets/images/solo-lebenslieder-thomas-ruehmann/1024-0-bild-solo-thomas-ruehmann.jpg');
    }
    body.rue {
        background-image: url('/assets/images/martin-ruehmann-bruder-band/1024-martin-ruehmann-thomas-ruehmann-bg-ls.jpg');
    }
    body.band {
        background-image: url('/assets/images/band-thomas-ruehmann-lieder-lebensreise/1024-band-thomas-ruehmann-bg-ls.jpg');
    }

    .parall2,
    .parall2noscript {
        background-image: url('/assets/images/startseite/bg2-p-1024-thomas-ruehmann.jpg');
        height: auto;
    }

    .parall3,
    .parall3noscript {
        background-image: url('/assets/images/startseite/bg3-p-1024-thomas-ruehmann.jpg');
        height: auto;
    }
}

@media screen and (orientation: landscape) and (max-width: 1024px) {
    body {
        background-image: url('/assets/images/startseite/bg1-ls-1024-thomas-ruehmann.jpg');
    }
    body.musik {
        background-image: url('/assets/images/musik/1024-musik-thomas-ruehmann-bg-ls.jpg');
    }
    body.theater {
        background-image: url('/assets/images/theater/1024-theater-thomas-ruehmann-bg-ls.jpg');
    }
    body.podcast {
        background-image: url('/assets/images/podcast/1024-podcast-thomas-ruehmann-bg-ls.jpg');
    }
    body.tvfilm {
        background-image: url('/assets/images/tvfilm/1024-in-aller-freundschaft-thomas-ruehmann-bg-ls.jpg');
    }
    body.termine {
        background-image: url('/assets/images/termine/1024-termine-thomas-ruehmann-bg-ls.jpg');
    }
    body.theateramrand {
        background-image: url('/assets/images/theateramrand/1024-theateramrand-thomas-ruehmann-bg-ls.jpg');
    }
    body.sugarman {
        background-image: url('/assets/images/sugar-man-sixto-rodriguez-tribute-thomas-ruehmann/1024-sugar-man-sixto-rodriguez-tribute-thomas-ruehmann-tribute-thomas-ruehmann-bg-ls.jpg');
    }
    body.jung {
        background-image: url('/assets/images/gundermann-neil-young-navid-kermani/1024-neil-young-thomas-ruehmann-bg-ls.jpg');
    }
    body.tomwaits {
        background-image: url('/assets/images/tom-waits-chuck-berry-thomas-ruehmann/1024-0-bild-tom-waits-thomas-ruehmann.jpg');
    }
    body.solo {
        background-image: url('/assets/images/solo-lebenslieder-thomas-ruehmann/1024-0-bild-solo-thomas-ruehmann.jpg');
    }
    body.rue {
        background-image: url('/assets/images/martin-ruehmann-bruder-band/1024-martin-ruehmann-thomas-ruehmann-bg-ls.jpg');
    }
    body.band {
        background-image: url('/assets/images/band-thomas-ruehmann-lieder-lebensreise/1024-band-thomas-ruehmann-bg-ls.jpg');
    }

    .parall2,
    .parall2noscript {
        background-image: url('/assets/images/startseite/bg2-ls-1024-thomas-ruehmann.jpg');
    }

    .parall3,
    .parall3noscript {
        background-image: url('/assets/images/startseite/bg3-ls-1024-thomas-ruehmann.jpg');
    }
}*/

/* _________ 768 ____________________________________ */

/*@media screen and (orientation: portrait) and (max-height: 768px) {
    body {
        background-image: url('/assets/images/startseite/bg1-p-768-thomas-ruehmann.jpg');
    }
    body.musik {
        background-image: url('/assets/images/musik/768-musik-thomas-ruehmann-bg-ls.jpg');
    }
    body.theater {
        background-image: url('/assets/images/theater/768-theater-thomas-ruehmann-bg-ls.jpg');
    }
    body.podcast {
        background-image: url('/assets/images/podcast/768-podcast-thomas-ruehmann-bg-ls.jpg');
    }
    body.tvfilm {
        background-image: url('/assets/images/tvfilm/768-in-aller-freundschaft-thomas-ruehmann-bg-ls.jpg');
    }
    body.termine {
        background-image: url('/assets/images/termine/768-termine-thomas-ruehmann-bg-ls.jpg');
    }
    body.theateramrand {
        background-image: url('/assets/images/theateramrand/768-theateramrand-thomas-ruehmann-bg-ls.jpg');
    }
    body.sugarman {
        background-image: url('/assets/images/sugar-man-sixto-rodriguez-tribute-thomas-ruehmann/768-sugar-man-sixto-rodriguez-tribute-thomas-ruehmann-tribute-thomas-ruehmann-bg-ls.jpg');
    }
    body.jung {
        background-image: url('/assets/images/gundermann-neil-young-navid-kermani/768-neil-young-thomas-ruehmann-bg-ls.jpg');
    }
    body.tomwaits {
        background-image: url('/assets/images/tom-waits-chuck-berry-thomas-ruehmann/768-tom-waits-thomas-ruehmann-bg-p.jpg');
    }
    body.solo {
        background-image: url('/assets/images/solo-lebenslieder-thomas-ruehmann/768-0-bild-solo-thomas-ruehmann.jpg');
    }
    body.rue {
        background-image: url('/assets/images/martin-ruehmann-bruder-band/768-martin-ruehmann-thomas-ruehmann-bg-ls.jpg');
    }
    body.band {
        background-image: url('/assets/images/band-thomas-ruehmann-lieder-lebensreise/768-band-thomas-ruehmann-bg-ls.jpg');
    }

    .parall2,
    .parall2noscript {
        background-image: url('/assets/images/startseite/bg2-p-768-thomas-ruehmann.jpg');
        height: auto;
    }

    .parall3,
    .parall3noscript {
        background-image: url('/assets/images/startseite/bg3-p-768-thomas-ruehmann.jpg');
        height: auto;
    }
}

@media screen and (orientation: landscape) and (max-width: 768px) {
    body {
        background-image: url('/assets/images/startseite/bg1-ls-768-thomas-ruehmann.jpg');
    }
    body.musik {
        background-image: url('/assets/images/musik/768-musik-thomas-ruehmann-bg-ls.jpg');
    }
    body.theater {
        background-image: url('/assets/images/theater/768-theater-thomas-ruehmann-bg-ls.jpg');
    }
    body.podcast {
        background-image: url('/assets/images/podcast/768-podcast-thomas-ruehmann-bg-ls.jpg');
    }
    body.tvfilm {
        background-image: url('/assets/images/tvfilm/768-in-aller-freundschaft-thomas-ruehmann-bg-ls.jpg');
    }
    body.termine {
        background-image: url('/assets/images/termine/768-termine-thomas-ruehmann-bg-ls.jpg');
    }
    body.theateramrand {
        background-image: url('/assets/images/theateramrand/768-theateramrand-thomas-ruehmann-bg-ls.jpg');
    }
    body.sugarman {
        background-image: url('/assets/images/sugar-man-sixto-rodriguez-tribute-thomas-ruehmann/768-sugar-man-sixto-rodriguez-tribute-thomas-ruehmann-tribute-thomas-ruehmann-bg-ls.jpg');
    }
    body.jung {
        background-image: url('/assets/images/gundermann-neil-young-navid-kermani/768-neil-young-thomas-ruehmann-bg-ls.jpg');
    }
    body.tomwaits {
        background-image: url('/assets/images/tom-waits-chuck-berry-thomas-ruehmann/768-0-bild-tom-waits-thomas-ruehmann.jpg');
    }
    body.solo {
        background-image: url('/assets/images/solo-lebenslieder-thomas-ruehmann/768-0-bild-solo-thomas-ruehmann.jpg');
    }
    body.rue {
        background-image: url('/assets/images/martin-ruehmann-bruder-band/768-martin-ruehmann-thomas-ruehmann-bg-ls.jpg');
    }
    body.band {
        background-image: url('/assets/images/band-thomas-ruehmann-lieder-lebensreise/768-band-thomas-ruehmann-bg-ls.jpg');
    }

    .parall2,
    .parall2noscript {
        background-image: url('/assets/images/startseite/bg2-ls-768-thomas-ruehmann.jpg');
    }

    .parall3,
    .parall3noscript {
        background-image: url('/assets/images/startseite/bg3-ls-768-thomas-ruehmann.jpg');
    }
}*/


/* _________ STATISCHE - BACKGROUNDS ANDERE SEITEN ____________________________________ */
.podcast .videoplay {
    background-image: url(/assets/images/podcast/768-0-bild-podcast-thomas-ruehmann.jpg);
}
.sugarman .videoplay {
    background-image: url(/assets/images/sugar-man-sixto-rodriguez-tribute-thomas-ruehmann/768-presse-sugar-man-sixto-rodriguez-thomas-ruehmann.jpg);
}
.jung .videoplay {
    background-image: url(/assets/images/gundermann-neil-young-navid-kermani/768-0-bild-neil-young-thomas-ruehmann.jpg);
}
.tomwaits .videoplay {
    background-image: url(/assets/images/tom-waits-chuck-berry-thomas-ruehmann/768-presse-bild-tom-waits-thomas-ruehmann.jpg);
}
.solo .videoplay {
    background-image: url(/assets/images/solo-lebenslieder-thomas-ruehmann/768-0-bild-solo-thomas-ruehmann.jpg);
}
.rue .videoplay {
    background-image: url(/assets/images/martin-ruehmann-bruder-band/768-1-bild-martin-thomas-ruehmann.jpg);
}
/* _____ BAND VIDEOPLAYER-HINTERGRUNDBILDER ______ */
.band .videoplay.trailer {
    background-image: url(/assets/images/band-thomas-ruehmann-lieder-lebensreise/768-presse-bild-band-thomas-ruehmann.jpg);
}
.band .videoplay.niemandsland {
    background-image: url(/assets/images/band-thomas-ruehmann-lieder-lebensreise/768-video-niemandsland-thumb-bild-band-thomas-ruehmann.jpg);
}
.band .videoplay.wenndufehlst {
    background-image: url(/assets/images/band-thomas-ruehmann-lieder-lebensreise/768-video-wenndufehlst-thumb-bild-band-thomas-ruehmann.jpg);
}
.band .videoplay.ballade {
    background-image: url(/assets/images/band-thomas-ruehmann-lieder-lebensreise/768-video-heimkehrballade-thumb-bild-band-thomas-ruehmann.jpg);
}
.band .videoplay.volkslied {
    background-image: url(/assets/images/band-thomas-ruehmann-lieder-lebensreise/768-video-fasteinvolkslied-thumb-bild-band-thomas-ruehmann.jpg);
}



/* _________ DYNAMISCHE - BACKGROUNDS STARTSEITE ____________________________________ */



/* DEFAULT u FALLBACK noscript Backgrounds -  STARTSEITE */

@media screen and (min-height: 1920px) {
        .project-defaultmusik {
            background-image: url('/assets/images/terminedefaults/2560-def-musik-thomas-ruehmann-bg-p.jpg');}
        .project-defaulttheater {
            background-image: url('/assets/images/terminedefaults/2560-def-theater-thomas-ruehmann-bg-p.jpg');}
        .project-defaultpodcast, .podcast-termin-container {
            background-image: url('/assets/images/terminedefaults/2560-def-podcast-thomas-ruehmann-bg-p.jpg');}
        .project-defaulttvfilm, .tvfilm-termin-container {
            background-image: url('/assets/images/terminedefaults/2560-def-tvfilm-thomas-ruehmann-bg-p.jpg');   }
}
/* @media screen and (orientation: landscape) and (min-width: 1920px) {
        .project-defaultmusik {
            background-image: url('/assets/images/terminedefaults/2560-def-musik-thomas-ruehmann-bg-p.jpg');}
        .project-defaulttheater {
            background-image: url('/assets/images/terminedefaults/deftheater-ls-2560-thomas-ruehmann.jpg');}
        .project-defaultpodcast, .podcast-termin-container {
            background-image: url('/assets/images/terminedefaults/defpodcast-ls-2560-thomas-ruehmann.jpg');}
        .project-defaulttvfilm, .tvfilm-termin-container {
            background-image: url('/assets/images/terminedefaults/deftvfilm-ls-2560-thomas-ruehmann.jpg');}
    }*/
@media screen and (max-height: 1920px) {
        .project-defaultmusik {
            background-image: url('/assets/images/terminedefaults/1920-def-musik-thomas-ruehmann-bg-p.jpg');}
        .project-defaulttheater {
            background-image: url('/assets/images/terminedefaults/1920-def-theater-thomas-ruehmann-bg-p.jpg');}
        .project-defaultpodcast, .podcast-termin-container {
            background-image: url('/assets/images/terminedefaults/1920-def-podcast-thomas-ruehmann-bg-p.jpg');}
        .project-defaulttvfilm, .tvfilm-termin-container {
            background-image: url('/assets/images/terminedefaults/1920-def-tvfilm-thomas-ruehmann-bg-p.jpg');}
    }
/*@media screen and (orientation: landscape) and (max-width: 1920px) {
        .project-defaultmusik {
            background-image: url('/assets/images/terminedefaults/1920-def-musik-thomas-ruehmann-bg-p.jpg');}
        .project-defaulttheater {
            background-image: url('/assets/images/terminedefaults/deftheater-ls-1920-thomas-ruehmann.jpg');}
        .project-defaultpodcast, .podcast-termin-container {
            background-image: url('/assets/images/terminedefaults/defpodcast-ls-1920-thomas-ruehmann.jpg');}
        .project-defaulttvfilm, .tvfilm-termin-container {
            background-image: url('/assets/images/terminedefaults/deftvfilm-ls-1920-thomas-ruehmann.jpg');}
    }*/
@media screen and (max-height: 1024px) {
        .project-defaultmusik {
            background-image: url('/assets/images/terminedefaults/1024-def-musik-thomas-ruehmann-bg-p.jpg');}
        .project-defaulttheater {
            background-image: url('/assets/images/terminedefaults/1024-def-theater-thomas-ruehmann-bg-p.jpg');}
        .project-defaultpodcast, .podcast-termin-container {
            background-image: url('/assets/images/terminedefaults/1024-def-podcast-thomas-ruehmann-bg-p.jpg');}
        .project-defaulttvfilm, .tvfilm-termin-container {
            background-image: url('/assets/images/terminedefaults/1024-def-tvfilm-thomas-ruehmann-bg-p.jpg');}
    }
/*@media screen and (orientation: landscape) and (max-width: 1024px) {
        .project-defaultmusik {
            background-image: url('/assets/images/terminedefaults/1024-def-musik-thomas-ruehmann-bg-p.jpg');}
        .project-defaulttheater {
            background-image: url('/assets/images/terminedefaults/deftheater-ls-1024-thomas-ruehmann.jpg');}
        .project-defaultpodcast, .podcast-termin-container {
            background-image: url('/assets/images/terminedefaults/defpodcast-ls-1024-thomas-ruehmann.jpg');}
        .project-defaulttvfilm, .tvfilm-termin-container {
            background-image: url('/assets/images/terminedefaults/deftvfilm-ls-1024-thomas-ruehmann.jpg');}
    }*/
@media screen and (max-height: 768px) {
        .project-defaultmusik {
            background-image: url('/assets/images/terminedefaults/768-def-musik-thomas-ruehmann-bg-p.jpg');}
        .project-defaulttheater {
            background-image: url('/assets/images/terminedefaults/768-def-theater-thomas-ruehmann-bg-p.jpg');}
        .project-defaultpodcast, .podcast-termin-container {
            background-image: url('/assets/images/terminedefaults/768-def-podcast-thomas-ruehmann-bg-p.jpg');}
        .project-defaulttvfilm, .tvfilm-termin-container {
            background-image: url('/assets/images/terminedefaults/768-def-tvfilm-thomas-ruehmann-bg-p.jpg');}
    }
/*@media screen and (orientation: landscape) and (max-width: 768px) {
        .project-defaultmusik {
            background-image: url('/assets/images/terminedefaults/768-def-musik-thomas-ruehmann-bg-p.jpg');}
        .project-defaulttheater {
            background-image: url('/assets/images/terminedefaults/deftheater-ls-768-thomas-ruehmann.jpg');}
        .project-defaultpodcast, .podcast-termin-container {
            background-image: url('/assets/images/terminedefaults/defpodcast-ls-768-thomas-ruehmann.jpg');}
        .project-defaulttvfilm, .tvfilm-termin-container {
            background-image: url('/assets/images/terminedefaults/deftvfilm-ls-768-thomas-ruehmann.jpg');}
    }*/





/* DYNAMISCHE Backgrounds - STARTSEITE */


/* _______ DYNAMISCHE BACKGROUNDS MUSIK-PROJEKTE ___________ */
.project-sugarman {
    background-image: url('/assets/images/termineproject/m-sugarman/1920-project-sugarman-thomas-ruehmann-bg-p.jpg');
}
.project-band {
    background-image: url('/assets/images/terminedefaults/1920-def-musik-thomas-ruehmann-bg-p.jpg');
}
.project-solo {
    background-image: url('/assets/images/termineproject/m-solo/1920-project-solo-thomas-ruehmann-bg-p.jpg');
}
.project-jung {
    background-image: url('/assets/images/termineproject/m-jung/1920-project-jung-thomas-ruehmann-bg-p.jpg');
}
.project-rue {
    background-image: url('/assets/images/termineproject/m-rue/1920-project-rue-thomas-ruehmann-bg-p.jpg');
}
.project-tomwaits {
    background-image: url('/assets/images/termineproject/m-tomwaits/1920-project-tomwaits-thomas-ruehmann-bg-p.jpg');
}
.project-musik {
    background-image: url('/assets/images/terminedefaults/1920-def-musik-thomas-ruehmann-bg-p.jpg');
}

/* _______ DYNAMISCHE BACKGROUNDS THEATER-PROJEKTE ___________ */

.project-schneesturm {
    background-image: url('/assets/images/termineproject/t-schneesturm/1920-project-schneesturm-thomas-ruehmann-bg-p.jpg');
}
.project-glut {
    background-image: url('/assets/images/termineproject/t-glut/1920-project-glut-thomas-ruehmann-bg-p.jpg');
}
.project-nieoderjetzt {
    background-image: url('/assets/images/termineproject/t-nieoderjetzt/1920-project-nieoderjetzt-thomas-ruehmann-bg-p.jpg');
}
.project-dugong {
    background-image: url('/assets/images/termineproject/t-dugong/1920-project-dugong-thomas-ruehmann-bg-p.jpg');
}
.project-liebehass {
    background-image: url('/assets/images/termineproject/t-liebehass/1920-project-liebehass-thomas-ruehmann-bg-p.jpg');
}
.project-fiesefabeln {
    background-image: url('/assets/images/termineproject/t-fiesefabeln/1920-project-fiesefabeln-thomas-ruehmann-bg-p.jpg');
}
.project-boesemaerchen {
    background-image: url('/assets/images/termineproject/t-boesemaerchen/1920-project-boesemaerchen-thomas-ruehmann-bg-p.jpg');
}
.project-glueck {
    background-image: url('/assets/images/termineproject/t-glueck/1920-project-glueck-thomas-ruehmann-bg-p.jpg');
}
.project-theater {
    background-image: url('/assets/images/terminedefaults/1024-def-theater-thomas-ruehmann-bg-p.jpg');
}

/* _______ DYNAMISCHE BACKGROUNDS PODCAST UND TV/FILM-PROJEKTE  - Fallback muss bleiben - hier ändern, falls mal spezifisches Bild rein soll___________ */
.project-podcast {
    background-image: url('/assets/images/terminedefaults/768-def-podcast-thomas-ruehmann-bg-p.jpg');
}
.project-tvfilm {
    background-image: url('/assets/images/terminedefaults/768-def-tvfilm-thomas-ruehmann-bg-p.jpg');
}


/* hier noch media query für alle Hintergrundbilder für Mobile einfügen */


/* ========================= BILDERGALERIE UND FS-LIGHTBOX ================================================ */

#fs-caption {
    display:none; 
    position:fixed; 
    /*bottom:calc(40vh - 29vw); */
    bottom: 2vh;
    width:100%;
    font-size: clamp(1rem, 3vh, 1.2rem);
    text-align:center;
    padding:1em 2em 0 2em;
    z-index:9999999999999;
    background: linear-gradient(to top,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 0.7) 70%,
                rgba(0, 0, 0, 0) 100%);
}
#fs-caption a {
    opacity: 0.6;
}

@media screen and (orientation: landscape) {
    #fs-caption {
        bottom:2vh;
    }
}

@media screen and (orientation: portrait){
.fslightbox-source p {
    margin-top: calc(-18vh + 15vw);
    padding:0 calc(10vw + 3vh) 1em;
}
}


    .bildergalerie { /* der Button auf den Bildern */
    font-size: 1em;
    margin: -1.2em 0.2em 0 0;
    padding: 0 0.2em;
    color: black;
    width: 1em;
    line-height: 1em;
    border-radius: 4px;
    position: absolute;
    right: 0;
    opacity: 0.4;
}

body.podcast .bildergalerie {
    background-color: #196758;
    background: var(--podcastfarbe);
    opacity:0.6;
}
body.musik .bildergalerie,
body.sugarman .bildergalerie,
body.tomwaits .bildergalerie,
body.band .bildergalerie,
body.solo .bildergalerie,
body.jung .bildergalerie,
body.rue .bildergalerie {
    background-color: #2b62bd;
    background: var(--musikfarbe);
}
body.theater .bildergalerie {
    background: var(--theaterfarbe);
    opacity: 0.6;
}
body.tvfilm .bildergalerie {
    background: var(--tvfilmfarbe);
   /* margin: -0.3em 0.2em 0 0;*/
}

.bildergalerie:hover, body.podcast .bildergalerie:hover, body.theater .bildergalerie:hover {
    opacity: 1;
}

img.fslightbox-source {
    width: auto !important;
    height: auto !important;
    max-width: 90vw !important;
    max-height: 90vh !important; 
border: 1px solid #151515;
margin:0; padding:0;
}


.fslightbox-container {
    font-family: Arial, Helvetica, sans-serif !important;
    background: linear-gradient(rgba(0, 0, 0, .9), #000 1810%) !important;
}

.fslightbox-container .loadvideo,
.fslightbox-container .loadvideo2,
.fslightbox-container .loadvideo3,
.fslightbox-container .loadvideo4,
.fslightbox-container .loadvideo5,
.fslightbox-container .loadvideo6 {
    padding: 1em 0 10em 0; /*10em bottom wichtig, sonst ist das leere showvideo drüber und blockeiert den Button */
    background: black;
    margin-top:-20vh;
} 
@media screen and (orientation: landscape) and (max-width: 768px) {
    .fslightbox-container .loadvideo,
    .fslightbox-container .loadvideo2,
    .fslightbox-container .loadvideo3,
    .fslightbox-container .loadvideo4,
    .fslightbox-container .loadvideo5,
    .fslightbox-container .loadvideo6 {
            display: flex;
            align-items: center;
            gap:2vw;    
        } 
}

.fslightbox-fade-in-strong {
    animation: fslightbox-fade-in-strong .3s cubic-bezier(0, 0, .7, 1);
}
.fslightboxsn {
    margin:1.5em !important;
}
.fslightbox-toolbar-button, .fslightbox-slide-btn {
    width: 6vh; height:6vh;
    opacity: 0.5;
    border-radius: 4px;
}
.fslightbox-toolbar-button {
        margin: 2em 1.5em 0 0;
    }
.fslightbox-slide-btn {
    margin: 2em 1em 0 1em;
    }

body.musik .fslightbox-toolbar-button, 
body.musik .fslightbox-slide-btn,
body.sugarman .fslightbox-toolbar-button,
body.tomwaits .fslightbox-toolbar-button,
body.band .fslightbox-toolbar-button,
body.solo .fslightbox-toolbar-button,
body.jung .fslightbox-toolbar-button,
body.rue .fslightbox-toolbar-button,
body.sugarman .fslightbox-slide-btn,
body.tomwaits .fslightbox-slide-btn,
body.band .fslightbox-slide-btn,
body.solo .fslightbox-slide-btn,
body.jung .fslightbox-slide-btn,
body.rue .fslightbox-slide-btn
{
    background-color: #2b62bd;
    background-color: var(--musikfarbe);
}
body.theater .fslightbox-toolbar-button,
body.theater .fslightbox-slide-btn {
    background-color: var(--theaterfarbe);
}
body.podcast .fslightbox-toolbar-button,
body.podcast .fslightbox-slide-btn {
    background-color: #196758;
    background-color: var(--podcastfarbe);
}
body.tvfilm .fslightbox-toolbar-button,
body.tvfilm .fslightbox-slide-btn {
    background-color: var(--tvfilmfarbe);
}
.fslightbox-toolbar-button:hover,
.fslightbox-slide-btn:hover,
body.musik .fslightbox-toolbar-button:hover,
body.musik .fslightbox-slide-btn:hover,
    body.sugarman .fslightbox-toolbar-button:hover,
    body.tomwaits .fslightbox-toolbar-button:hover,
    body.band .fslightbox-toolbar-button:hover,
    body.solo .fslightbox-toolbar-button:hover,
    body.jung .fslightbox-toolbar-button:hover,
    body.rue .fslightbox-toolbar-button:hover,
    body.sugarman .fslightbox-slide-btn:hover,
    body.tomwaits .fslightbox-slide-btn:hover,
    body.band .fslightbox-slide-btn:hover,
    body.solo .fslightbox-slide-btn:hover,
    body.jung .fslightbox-slide-btn:hover,
    body.rue .fslightbox-slide-btn:hover,
body.theater .fslightbox-toolbar-button:hover,
body.theater .fslightbox-slide-btn:hover,
body.podcast .fslightbox-toolbar-button:hover,
body.podcast .fslightbox-slide-btn:hover,
body.tvfilm .fslightbox-toolbar-button:hover,
body.tvfilm .fslightbox-slide-btn:hover {
    opacity:1;
}

#yt-consent-box,
#yt-consent-box2,
#yt-consent-box3,
#yt-consent-box4,
#yt-consent-box5,
#yt-consent-box6 {
    display:block;
    margin-left:-1000vw;
    height:0;
    overflow:visible;
}

#yt-consent-wrapper,
#yt-consent-wrapper2,
#yt-consent-wrapper3,
#yt-consent-wrapper4,
#yt-consent-wrapper5,
#yt-consent-wrapper6,
.fslightbox-source {  /* yt-consent-wrapper ist die source für fslightbox, dort aber nicht nochmal benannt! Also wird zu .fslightbox-source in der lightbox */
    max-width:800px;
    margin:auto;
    padding: 0 1em;
    height:30vh;
}

.showvideo, .showvideo2, .showvideo3, .showvideo4, .showvideo5, .showvideo6 {
    width:90vw;
    max-height:85vh;
    margin:0;
    padding: 0;
    /*aspect-ratio: 16 / 9;*/
    aspect-ratio: 768 / 501;
    position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

}

iframe {
    margin:0;padding:0; width:100%; height:100%;
}