*{
    box-sizing: border-box;
    scroll-behavior: smooth;
}


.newsHeader{
    background-color: rgb(167, 0, 0);
    color: white;
    width: 100%;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    padding: 1rem;
    font-family: Single Sleeve;
    box-shadow: 3px 3px 25px rgba(0, 0, 0, 0.329);
}
div, img
{
    max-width: 100vw;
} 

@font-face {
    font-family: RotulonaHand;
    src: url(fonts/Rotulona-Hand-FFP-font.ttf);
}
@font-face {
    font-family:Single Sleeve;
    src: url(fonts/sing.ttf);
}

/* Img overview */
#patrik {
    background-image: url(img/patrik.jpg);
}

#roland {
    background-image: url(img/roland.jpg);
}

#Sandra {
    background-image: url(img/sandra.jpg);
}

#youtube {
    /*eingebunden als SVG */
    display: flex;
    align-items: center;
    justify-content: center;
}

#spotify {
    background-image: url(img/spotify.svg);
}

#ApplePodcast {
    background-image: url(img/apple_podcasts.svg);
}

#GooglePodcast {
    background-image: url(img/google_podcasts.svg);
}

#AmazonMusic {
    background-image: url(img/amazon_music.png);
}


/* Generell Instruction */
body {
    font-family: Helvetica, sans-serif;
	margin:0px 0px 0px 0px;
    color:var(--textAntiPrimeColor);
}
	.light {
        --textAntiPrimeColor: rgb(40, 40, 40);
        --backgroundColor: rgb(218, 218, 218);
        --PrimeHighlightColor: #F8B333;
        --SecondHighlightColor: #db9f2e;
        --thirdHighlightColor: #835f1b;
    	}
    .dark {
        --textAntiPrimeColor: rgb(218, 218, 218);
        --backgroundColor: rgb(40,40,40);
        --PrimeHighlightColor: #F8B333;
        --SecondHighlightColor: #db9f2e;
        --thirdHighlightColor: #835f1b;
        }
    .sitewrapper{
                margin: 0px;
                padding: 0px;
                width: 100%;
                max-width: 100vw;
    }
ul {
    list-style:circle;
    color:var(--textAntiPrimeColor);
}
a {
color: var(--PrimeHighlightColor);
text-decoration: none;
font-weight:bolder;
}
/*svgs */
.c{
    fill:var(--textAntiPrimeColor)
}
.downarrow {
    fill: none;
    stroke: var(--textAntiPrimeColor);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}
.downicon{
    width: 100%;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 250ms;
}
.downicon:hover{
    transform:translateY(10px);

}
#downsvg{
    width: 32px;
    height: 32px;
}
    a:hover{
        color: var(--SecondHighlightColor)
    }
    h1
    {
        font-family: RotulonaHand;
        font-size: 5vw;
        margin: 0px;
    }
    h2 {
        font-family: RotulonaHand;
        font-size: 24pt;
        margin: 0px;
    }
    h3 {
        font-size:16pt;
    }
    body{
        background-color: var(--backgroundColor);
    }
    header {
        width: 100%;
        min-height: 100px;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 10px 50px 10px 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    footer{
        width: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        position: fixed;
        bottom: 0px;
        left: 0px;
        position: fixed;
        z-index: 3;
    }
    .footerWrapper {
        width: 100%;
        min-height: 40px;
        background-color: rgba(0, 0, 0, 0.3);
        color: white;
        padding: 10px 20px 10px 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* Audio Player */
    .audioPlayerWrapper{
        width: 100%;
        position: fixed;
        left:0;
        bottom: -300px;
        z-index: 2;
        background-color: #00000099;
        color: #FFF;
        transition: all 300ms ease-in-out;
    }
    .audioTimelineWrapper{
        height: 10px;
        background-color: #55555555;
        cursor: pointer;
        transition: all 200ms ease-in-out;
    }
    .audioTimelineWrapper:hover{
        height: 15px;
        transition: all 50ms linear;
    }
    .audioTimelineProgessbar{
        height: 100%;
        width: 0;
        background-color: var(--SecondHighlightColor);
    }
    .panelWrapper{
        width: 100%;
        min-height: 70px;
        display:flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        position: relative;
    }
        .controlPanel{
            height: 100%;
            width: 20%;
            min-width: 300px;
            display:flex;
            align-items: center;
            justify-content: center;
            padding: 6px;
        }
            .controlButton{
                width: 50px;
                aspect-ratio: 1 / 1;
                border-radius: 100%;
                border: var(--PrimeHighlightColor) solid 2px;
                margin: 4px;
                transition: all 500ms ease-out;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
            }
            .controlSVG{
                fill: var(--PrimeHighlightColor);
                width: 30px;
                height: 30px;
            }
            .controlButton:hover{
                box-shadow: var(--SecondHighlightColor) 0 0 10px,
                            var(--thirdHighlightColor) 0 0 20px;
            }
            #pauseButton{
                display:none;
            }
            .activePlayButton{
                animation: playPulse 2500ms infinite;
            }
            @keyframes playPulse {
                1% {
                    box-shadow: var(--SecondHighlightColor) 0 0 0px,
                                var(--thirdHighlightColor) 0 0 0px;
                }
                50% {
                    box-shadow: var(--SecondHighlightColor) 0 0 10px,
                                var(--thirdHighlightColor) 0 0 20px;
                }
                100% {
                    box-shadow: var(--SecondHighlightColor) 0 0 0px,
                                var(--thirdHighlightColor) 0 0 0px;
                }
            }
        .titelPanel{
            height: 100%;
            width: 40%;
            min-width: 300px;
            display:flex;
            align-items: center;
            justify-content: center;
            padding: 6px;
        }
        .timePanel{
            height: 100%;
            width: 20%;
            min-width: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6px;
        }
        #closePlayer{
            position: absolute;
            top:0;
            right: 0;
            margin: 15px 10px;
            padding: 3px 7px;
            background-color: var(--SecondHighlightColor);
            color: black;
            border-radius: 5px;
            cursor: pointer;
        }
    .darkmode{
        position:fixed;
        top: 10px;
        right: 10px;
        padding: 10px;
    }
    button{
        padding: 7px 15px;
        background-color: var(--PrimeHighlightColor);
        color: var(--textAntiPrimeColor);
        border: none;
        border-radius: 4px;
        font-family: Single Sleeve, Helvetica, sans-serif;
        font-size: 1.2rem;
        color: black;
        box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.384) ;
        transition: transform 150ms ease-in-out;
    }
    button:hover, input[type=submit]:hover {
        transform: scale(1.05);
        box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.25) ;
    }
        .cookie {
            width: 50%;
        }
        nav {
            width: 50%;
            text-align: right;
        }
/* Hero Section */
.herowrapper {
    display: flex;
    padding: 10px;
    justify-content: center;
}
.right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#headline {
    font-size: 5vmax;
    font-family: RotulonaHand, Arial, Helvetica,sans-serif;
    font-weight: 800;

}
#underline {
    font-family: Single Sleeve, Arial, Helvetica, sans-serif;
    font-weight: 200;
}
    .subheadline,
    h3 {
        font-size:18pt;
        font-family: Single Sleeve;
        margin: 0px 0px 10px 0px;
    }
    
    .subheadline,
    h2 {
        font-size:24pt;

    }


/* Host Section */


.hostwrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 100px 0px 100px 0px;
}
    .hosts {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 996px;
    }

        .person {
            padding: 5px;
            display: flex;
            align-items: center;
            padding: 10px 20px 10px 20px;
            max-width: 996px;
            }

        .hostimg {
            max-width: 150px;
            max-height: 150px;
            min-width: 150px;
            min-height: 150px;
            border-radius: 100%;
            margin: 0px 10px 0px 10px;
            background-size: cover;
            background-position: center center;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5),
                        5px 5px 10px rgba(0, 0, 0, 0.2);
        }
        .hostdescription {
            padding: 0px 10px 0px 10px;
        }

#servicefail {
    display: flex;
    flex-direction: column;
}

/* Podcast Link Section */

.linkwrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 0px 20px 0px 20px;
    margin-top: 40px;
}
.sourcewrapper {
    padding: 10px 25px 10px 25px;
    display:flex;
    justify-content: center;
    }
.sourcelink{
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        max-width: 350px;
        transition: transform 150ms ease-in-out;
}
.sourcelink:hover{
    transform: scale(1.05);
}

/* Episoden */


.podcastheadline {
    font-size: 48;
    font-family: RotulonaHand, Arial, Helvetica, sans-serif;
}
.episode, .episode_short {
    padding: 20px;
    width: 100%;
    max-width: 400px;
    opacity: 1;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 500ms ease-in-out;
    border-radius: 1rem;
}
.playingEpisode{
    border: var(--PrimeHighlightColor) solid 0.2rem;
    animation: activeThumbAnimation 1s infinite;
}
.episodecontent_short IMG:hover, .episodeThumbnail:hover{
    animation: activeThumbAnimation 1s infinite;
}
@keyframes activeThumbAnimation {
    0% {
        box-shadow: 0 0 10px var(--PrimeHighlightColor);
    }
    50% {
        box-shadow: 0 0 20px var(--PrimeHighlightColor);
    }
    100%  {
         box-shadow: 0 0 10px var(--PrimeHighlightColor);
     }
}
.episodecontent {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 5px;
    margin-bottom: 40px;
}
.episodecontent_short{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 5px;
    gap: 1.4rem;
    margin-bottom: 40px;
}
.episodecontent_short IMG {
    width: 100%;
    border-radius: .2rem;
}
.epHeaderWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
    margin-bottom:15px;
}
.episodeThumbnail{
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
    transition: all ease-in-out 250ms;
    border-radius: 0.2rem;
}
.episodeID{
    display: none;
}
/* Filter */
.filterWrapper{
    margin: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.activeButton, .activeButtonMood {
    background-color: var(--PrimeHighlightColor) !important;
    color: black !important;
}
.filterButton, .filterButtonMood{
    background-color: darkgrey;
    color: grey;
    margin: 3px;
    cursor: pointer;

}
.activeEpisode, .activeEpisodeMood{
    display: flex;
}
.notActiveEpisode, .notActiveEpisodeMood{
    display: none !important;

}
/* About How To Customer */
.aboutcontent{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.contentwrapper {
    display: flex;
    flex-direction: row;
    margin-top:15px;
}
.imgwrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}
.ctawrapper{ 
    width: 80%;
    display:flex;
    flex-direction: row;
    justify-content: center;
}
.zeitgeist, .meinmarketingoffice {
    border:red solid 1px;
    width: 50%;
    padding: 30px;
}
/* Formular Section */

.formWrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: transform 150ms ease-in-out;
}
.buttonback {
    background-color: var(--PrimeHighlightColor);
    color: black;
    border-radius: 10px;
    height: 40px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.buttonback:hover {
        background-color: var(--textAntiPrimeColor);
        color: var(--PrimeHighlightColor);
}
input, textarea, .formdsgvo, .mailcopy {
    border-radius: 10px;
    padding: 10px ;
    margin: 5px 0px 5px 0px;
    font-family: Single Sleeve;
    font-size: large;
}
    @media screen and (max-width: 1280px) {
        input,
        .textinput,
        .formdsgvo,
        .copy {
            width: 80vw;
        }
    }
    
    @media screen and (min-width: 1281px) {
        input,
        .textinput,
        .formdsgvo,
        .copy {
            width: 60vw;
        }
    }
textarea {
 height: 350px;
}
input {
    height: 50px;
    border: 1px solid grey;
}
input[type=checkbox]
{
    height: 20px;
    width: 20px;
    margin-right: 10px;
    }

input[type=submit] {
    background-color: var(--PrimeHighlightColor);
    color: black;
    border: none;
    transition: all 250ms ease-in-out   ;
}

form {
    display: flex;
    flex-direction: column;
    
}
.mailcopy {
    display:flex;
    align-items: center;
    ;
}
.newsletterwrapper {
    padding:  150px 0px 150px 0px;
}
.newsletterwrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60vw;
    flex-direction: column;
}

/* Responsive Elements*/

.flexCenter{
    display: flex;
    align-items: center;
    justify-content: Center;
}
    @media screen and (max-width: 996px) {
        .flexflip {
            flex-direction: column;
        }
    .sourcewrapper {
        width: 80vw;
        padding: 4vw;
    }
        .heroimg {
            max-width: 80vw;
        }
        .sourcelink {
            width: 60vw;
            height: 15vw;
        }
        .zeitgeistTextWrapper, .companyZeitgeistImg {
            width: 100% !important;
        }
        .companyZeitgeistWrapper{
            padding: min(2vw,2rem)!important;
        }
    } 
    @media screen and (min-width: 996px) {
        .flexflip {
            flex-direction: row!important;
        }
        .sourcewrapper {
            width: 15vw;
            padding: 20px;
             }
        .heroimg {
            max-width: 80vw;
        }
        .sourcelink {
            width: 13vw;
            height: 3.75vw;
    }
        .zeitgeistTextWrapper, .companyZeitgeistImg {
            width: 50% !important;

        }
}
    @media screen and (max-width: 1280px) {
        .flexflipbig {
            flex-direction: column!important;
        }
        .fullsection {
            min-height: 100vh;
            width: 100vw;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0vh 5vw 0vh 5vw;
        }

        .breaker {
            min-height: 20vh;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 5vh 5vw 5vh 5vw;
        }

        .left {
            max-width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .right {
            max-width: 100vw;
        }

    }
    @media screen and (min-width: 1281px) {
        .flexflipbig {
            flex-direction: row!important;
        }
        .fullsection {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0vh 10vw 0vh 10vw;
        }

        .breaker {
            min-height: 20vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 10vh 10vw 10vh 10vw;
        }

        .left {
            min-width: 40vw;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .right {
            min-width: 40vw;
        }
        .episode {
            max-width: 20vw;
        }
    }
    @media screen and (max-width: 800px) {
        .flexflipsmall {
            flex-direction: column!important;
        }
        .mrjacksTextWrapper {
            color: white !important;
            width: 100% !important;
            justify-content: center;
        }
               
    }
    
    @media screen and (min-width: 800px)
     {
        .flexflipsmall {
            flex-direction: row!important;
        }
        .mrjacksTextWrapper {
            color: white !important;
            width: 65%;
            padding-right: 10vw;
            justify-content: center;
        }
    } 
    /* Ad Section */

        .companyMrjacksWrapper, .companyZeitgeistWrapper {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        position: relative;
    }
    .companyMrjacksWrapper{
        background-image: url("img/banner_pw_web.jpg");
            background-position: top right;
            background-size: cover;
            padding: 5rem;
            width: 100%;
            max-width: 1280px;
            color: White;
            box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4);
            border-radius: 0 0 1rem 1rem;
        }
    .companyZeitgeistWrapper{
        color: #555555;
        background-color: white;
        padding: 2rem 0rem 2rem 2rem;
        flex-wrap: wrap;
    }
        .companyZeitgeistWrapper Button{
            color:white;
            background-color: #005981;
        }
        .zeitgeistTextWrapper{
            padding: 3rem!important;
        }
        .whiteBackground{
            background-color: white;
        }
        .backgroundMrJacks{
            background-image: url("img/banner_pw_web.jpg");
            background-position: center center;
            background-size: cover;
            box-shadow: 1rem 1rem 1.2rem rgba(0, 0, 0, 0.603);
        }
        .backgroundBlur{
            backdrop-filter: blur(6px);
            width: 100%;
            height: 100%;
        }
    .companyZeitgeistImg{
        background-image: url("img/ZeitgeistImg.webp");
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            width: 50%;
            aspect-ratio: 4/3;
            box-shadow: -5px 5px 7px rgba(0, 0, 0, 0.603);
    }
        .zeitgeistFarbenWrapper{
            background: white;
            width: 100%;
            height: 0.7rem;
            display: flex;
            gap: 0.5rem;
            box-shadow:1rem 1rem 1.2rem rgba(0, 0, 0, 0.603);
        }
        .zeitgeistBlau{
            background-color:#00557C;
            width: 50%;
            height: 0.7rem;
        }
        .zeitgeistGelb {
            background-color: #F9B233;
            width: 50%;
            height: 0.7rem;
        }
    .companyEntryWrapper{
        width: 100%;
        max-width: 1280px;
    }
    .companyWrapper{
        width: 100%;
        display: flex;
        justify-content: Center;
        align-items: Center;
    }
    .companyHeadline{
        width: 100%;
        padding: 1rem;
        text-align: center;
    }
    #mrJacksWrapper{
        justify-content: center;
        background-color: #111111CC;
        padding: 2rem 0;
        min-height: min(40rem, 60vh);
    }
    #logoMrjacks{
        width: 10rem;
        height: 10rem;
        fill: white;
        transform: rotate(-3deg);
        transition: all 300ms linear;
    }
        #logoMrjacks:hover {
            transform: rotate(0deg);
            transform: scale(105%);
        }

    .companyTextWrapper{
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        width: 50%;
    }
       .companyMrjacksWrapper Button{
        background-color: #BA181b;
        background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.40));
        color: white;
        transition: all 250ms ease-in-out
       }
                .companyMrjacksWrapper Button:hover{
                    background-color: #e5383b;
                }
    .companyName{
        font-size: 3.6rem;
        font-family: Single Sleeve;
    }
    .companySlogan{
        font-size: 1.4rem;
        font-style: oblique;
        margin-top: -0.6rem;
        font-family: RotulonaHand;
    }
    .companyCTAbutton{
        padding: 0.5rem 1.6rem;
        width: 40%;
    }
    .companyCTAText{
        font-size: 1.6rem;
        font-weight: bold;
        font-family: Single Sleeve;
    }
        .companyCTAWrapper{
            margin-top: 1.2rem;
        }
                .companyHeadline{
                    background-color: var(--SecondHighlightColor);
                    color :rgb(40, 40, 40);
                }