@import "/Stylesheets_general/Stylesheet_Menu.css";
@import "/Stylesheets_general/Stylesheet_BodyNavFooter.css";


/*--------FRBODENSEEFESTIVAL 2025 PAGE         -------------------------------------------------------------------------------------------------------*/
.myIframe{
    position: absolute;
    width: 100%;
    height: 100%;
}

html {
    scroll-behavior: smooth;
}

/*--------Header (Bild & Überschrift & Seitenmenu & Datum -------------------------------------------------------------------------------------------------------*/
.festival_c1 {
    position: relative;
    margin-top: calc(var(--navBar_height) * 1px + 10vh);
    width: 100%;
    z-index: 5;
}

#festival_überschrift {
    position: absolute;
    width: 80%;
    height: auto;
    top: -10%;
    z-index: 2;
    color: #ee9e00;
    font-family: ff-providence-sans-web-pro, sans-serif;
    font-weight: 700;
    font-size: 7vw;
    text-align: left;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: black;
}

#Header_bild_pc {
    display: block;
    margin: 0 auto;
    border-radius: 25px;
    width: 88%;
    height: auto;
}

#Header_bild_mobile {
    display: none;
}

.festival_seiten_menu {
    position: absolute;
    bottom: 5%;
    z-index: 1;
    color: white;
    font-family: ff-providence-sans-web-pro, sans-serif;
}

.el_seiten_menu:nth-child(1) {
    background: url('/Media/Festival 25/bg_seiten_menu_1.png');
    background-size: 100% 100%;
    font-size: 1.8vw;
    padding-top: 0.35em;
    padding-left: 1em;
    padding-right: 1em;
}

.el_seiten_menu:nth-child(2) {
    background: url('/Media/Festival 25/bg_seiten_menu_2.png');
    background-size: 100% 100%;
    font-size: 1.8vw;
    padding-top: 0.35em;
    padding-left: 1em;
    padding-right: 1em;
}

.el_seiten_menu:nth-child(3) {
    background: url('/Media/Festival 25/bg_seiten_menu_3.png');
    background-size: 100% 100%;
    font-size: 1.8vw;
    padding-top: 0.35em;
    padding-left: 1em;
    padding-right: 1em;
}

.el_seiten_menu:hover {
    cursor: url(/Media/cursors/linkCursor_32px.png), pointer;
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.el_seiten_menu a:visited,
.el_seiten_menu a:active {
    color: white;
}

a {
    color:white;
  }


#info,
#tickets,
#about,
#media {
    scroll-margin-top: calc(var(--navBar_height) * 1px + 4vh);
}

#festival_datum {
    Position: absolute;
    right: -2%;
    top: 82%;
    color: #ee9e00;
    font-family: ff-providence-sans-web-pro, sans-serif;
    font-weight: 700;
    font-size: 4.5vw;
    text-align: right;
    padding-bottom: 19%;
    text-shadow: 0px 0px 4px black;
    line-height: 1.0;
}


/*--------Information-(ÜBERSCHRIFT & TEXT)  -------------------------------------------------------------------------------------------------------*/

.festival_c2 {
    position: relative;
    margin-top: 17vh;
    width: 100%;
}

.festival_c2 h1 {
    color: #ee9e00;
    font-family: ff-providence-sans-web-pro, sans-serif;
    font-weight: 700;
    font-size: 4.5vw;
    text-align: center;
    text-shadow: 0px 0px 4px black;
    line-height: 1.0;
}

.festival_c2 p {
    width: 70%;
    padding-left: 15%;
    text-align: center;
    color: #ee9e00;
    font-family: "sunflower", sans-serif;
    font-size: 1.2vw;
}

/*--------Information-(MAP & BUTTONS & INFO-PANEL) -------------------------------------------------------------------------------------------------------*/

.festival_c3 {
    position: relative;
    width: 90%;
    left: 5%;
    z-index: 5;
}

#festival_map {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: auto;
}

.map_button {
    position: absolute;
    background-color: rgba(34, 34, 34, 0.8);
    color: #ee9e00;
    border: 2px solid #ee9e00;
    border-radius: 300px;
    padding: 6px 10px;
    font-family: "Sunflower", sans-serif;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.map_button:hover {
    cursor: url(/Media/cursors/linkCursor_32px.png), pointer;
    background-color: rgba(34, 34, 34, 1);
    transform: scale(1.05);
}

#festival_map_animations_fish {
    position: absolute;
    top: 64%; left: 28%;
    width: 112px;                /* Breite eines einzelnen Frames */
    height: 115px;               /* Höhe eines Frames (falls quadratisch) */
    background: url('/Media/Festival 25/map_animations/fish_spritesheet.png') 0 0 no-repeat;
    transform: translate(-50%, -50%);
    /* 1s = Gesamtdauer eines Durchlaufs, steps(10) = 10 Frames */
    pointer-events: none;        /* Klicks durchlassen, falls nicht nötig */
}

.festival_map_animations_fish_animate{
    animation:playSprite_fish 1.5s steps(9) forwards;
    /* 1s = Gesamtdauer eines Durchlaufs, steps(10) = 10 Frames */
}

@keyframes playSprite_fish {
    /* 0 % → erstes Frame (links außen) */
    from { background-position: 0 0; }

    /* 90 % → letztes echtes Frame (bei 8 Frames: -8*frameWidth) */
    90%  { background-position: -1008px 0; }   /* -8 * 112px */

    /* 100 % → gleiche Position wie bei 90 % → Pause */
    to   { background-position: -1008px 0; }
}

#festival_map_animations_smokePizzaofen {
    position: absolute;
    top: 16.4%; left: 39.1%;
    width: 26px;                /* Breite eines einzelnen Frames */
    height: 101px;               /* Höhe eines Frames (falls quadratisch) */
    background: url('/Media/Festival 25/map_animations/smoke_pizzaofen_spritesheet.png') 0 0 no-repeat;
    transform: translate(-50%, -50%);
    /* 1s = Gesamtdauer eines Durchlaufs, steps(10) = 10 Frames */
    pointer-events: none;        /* Klicks durchlassen, falls nicht nötig */
}

.festival_map_animations_smokePizzaofen_animate{
    animation:playSprite_smoke_pizzaofen 3s steps(13) backwards;
    /* 1s = Gesamtdauer eines Durchlaufs, steps(10) = 10 Frames */
}

@keyframes playSprite_smoke_pizzaofen {
    /* 0 % → erstes Frame (links außen) */
    from { background-position: 0 0; }

    /* 90 % → letztes echtes Frame (bei 8 Frames: -8*frameWidth) */
    92.307%  { background-position: -338px 0; } 

    /* 100 % → gleiche Position wie bei 90 % → Pause */
    to   { background-position: -338px 0; }
}

#festival_map_animations_smokeHottub {
    position: absolute;
    top: 50%; left: 82.5%;
    width: 26px;                /* Breite eines einzelnen Frames */
    height: 101px;               /* Höhe eines Frames (falls quadratisch) */
    background: url('/Media/Festival 25/map_animations/smoke_pizzaofen_spritesheet.png') 0 0 no-repeat;
    transform: translate(-50%, -50%) scale(0.8);
    /* 1s = Gesamtdauer eines Durchlaufs, steps(10) = 10 Frames */
    pointer-events: none;        /* Klicks durchlassen, falls nicht nötig */
}

.festival_map_animations_smokeHottub_animate{
    animation:playSprite_smoke_hottub 4s steps(13) backwards;
    /* 1s = Gesamtdauer eines Durchlaufs, steps(10) = 10 Frames */
}

@keyframes playSprite_smoke_hottub {
    /* 0 % → erstes Frame (links außen) */
    from { background-position: 0 0; }

    /* 90 % → letztes echtes Frame (bei 8 Frames: -8*frameWidth) */
    92.307%  { background-position: -338px 0; } 

    /* 100 % → gleiche Position wie bei 90 % → Pause */
    to   { background-position: -338px 0; }
}

#festival_map_animations_vapor {
    position: absolute;
    top: 57%; left: 87.7%;
    width: 109px;                /* Breite eines einzelnen Frames */
    height: 119px;               /* Höhe eines Frames (falls quadratisch) */
    background: url('/Media/Festival 25/map_animations/vapor_spritesheet.png') 0 0 no-repeat;
    transform: translate(-50%, -50%) scale(0.6);
    /* 1s = Gesamtdauer eines Durchlaufs, steps(10) = 10 Frames */
    pointer-events: none;        /* Klicks durchlassen, falls nicht nötig */
    animation:playSprite_vapor 2s steps(5) infinite;
}

@keyframes playSprite_vapor {
    /* 0 % → erstes Frame (links außen) */
    from { background-position: 0 0; }

    /* 90 % → letztes echtes Frame (bei 8 Frames: -8*frameWidth) */
    83.33%  { background-position: -545px 0; } 

    /* 100 % → gleiche Position wie bei 90 % → Pause */
    to   { background-position: -545px 0; }
}

#festival_map_animations_rocket {
    position: absolute;
    top: 32.5%; left: 35.8%;
    width: 129px;                /* Breite eines einzelnen Frames */
    height: 180px;               /* Höhe eines Frames (falls quadratisch) */
    background: url('/Media/Festival 25/map_animations/rocket_spritesheet.png') 0 0 no-repeat;
    transform: translate(-50%, -50%) scale(0.9);
    /* 1s = Gesamtdauer eines Durchlaufs, steps(10) = 10 Frames */
    pointer-events: none;        /* Klicks durchlassen, falls nicht nötig */
}

.festival_map_animations_rocket_animate{
    animation:playSprite_smoke_rocket 1.8s steps(7) backwards;
    /* 1s = Gesamtdauer eines Durchlaufs, steps(10) = 10 Frames */
}

@keyframes playSprite_smoke_rocket {
    /* 0 % → erstes Frame (links außen) */
    from { background-position: 0 0; }

    /* 90 % → letztes echtes Frame (bei 8 Frames: -8*frameWidth) */
    85%  { background-position: -903px 0; } 

    /* 100 % → gleiche Position wie bei 90 % → Pause */
    to   { background-position: -903px 0; }
}

/*--------Button platzierung auf Map--------*/

#Button_Buehne {
    bottom: 45%;
    right: 30%;
}

#Button_Spa {
    bottom: 50%;
    right: 13%;
}

#Button_RocketGame {
    top: 31%;
    left: 27%;
}

#Button_Parking {
    bottom: 30%;
    left: 7%;
}

#Button_Camping {
    top: 14%;
    left: 7%;
}

#Button_Food {
    top: 18%;
    left: 30%;
}

#Button_chill {
    top: 35%;
    left: 48%;
}

#Button_pk {
    bottom: 50%;
    left: 32%;
}

#Button_Hammock {
    bottom: 38%;
    right: 3%;
}

#Button_arrival {
    bottom: 30%;
    left: 48%;
}

#Button_art {
    top: 12%;
    right: 40%;
}

#Button_hygiene {
    top: 70%;
    left: 20%;
}

#Button_awareness {
    top: 20%;
    right: 30%;
}

/*--------Information-(INFO-PANELs) -------------------------------------------------------------------------------------------------------*/
.infoPanel {
    position: fixed;
    right: 40px;
    top: 20%;
    width: 25vw;
    height: 65vh;
    background-color: white;
    border: 0px solid #ee9e00;
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    /* padding: 20px; */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
}

.infoPanel[data-panel="RocketGame"] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: auto;
    height: 90vh;
    aspect-ratio: 18 / 32;
    padding: 0px;
    border: 3px solid #ee9e00;
    z-index: 100;
}
@media screen and (max-width: 868px) {
    .infoPanel[data-panel="RocketGame"] {
        width: 90%;
        height: auto;
        aspect-ratio: 9 / 16;
    }
}
#Button_closePanel_rocket {
    position: absolute;
    top: 2rem;
    right: 2rem;
    z-index: 110;
}

.error {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 50, 50, 0.9);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: sans-serif;
    z-index: 9999;
    display: none;
}

.req-permission {
    position: absolute;
    top: 20px;
    left: 50%;
    height: 200px;
    width: 200px;
    transform: translateX(-50%);
    background: grey;
    color: yellow;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: sans-serif;
    z-index: 8000;
    display: none;
}

/* Panel anzeigen */
.infoPanel.show {
    visibility: visible;
    opacity: 1;
}

/* Bilder anpassen */
.infoPanel img {
    position: absolute;
    width: 100%;
    top: 0%;
}
.infoPanel_content {
    margin: 20px;
}

/* Button für Schließen */
#Button_closePanel {
    position: fixed;
    top: 20%;
    right: 40px;
    /* position: absolute;
    top: 15px;
    right: 15px; */
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    cursor: url(/Media/cursors/linkCursor_32px.png), pointer;
    z-index: 100;
    /* filter: drop-shadow(2px 2px 1.5px #000000); */
}

/* Panels standardmäßig verstecken */
.infoPanel {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.infoPanel.show {
    visibility: visible;
    opacity: 1;
}

.festival_c4 {
    position: relative;
    z-index: 50;
}

.no-scroll {
    overflow: hidden;
}

/* Stilisierung der Elemente innerhalb des Info-Panels ---------- */
.festival_c4 h3 {
    position: relative;
    padding-top: 35%;
    text-align: center;
    color: #ee9e00;
    font-family: ff-providence-sans-web-pro, sans-serif;
    font-size: 5vh;
    z-index: 99;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

.Panel_ueberschrift_div {
    padding: -30px;
    background-color: #ee9e00;
    border-radius: 10px;
}

.festival_c4 h4 {
    position: relative;
    text-align: left;
    color: #ee9e00;
    color: black;
    font-family: ff-providence-sans-web-pro, sans-serif;
    font-size: 4vh;
}

.festival_c4 h5 {
    position: relative;
    text-align: left;
    color: #ee9e00;
    color: black;
    font-family: ff-providence-sans-web-pro, sans-serif;
    font-size: 2.5vh;
}

.festival_c4 p {
    font-family: "Sunflower", sans-serif;
    color: black;
}



/*-------- TICKET - ABSCHNITT --------------------------------------------------------------------------*/

#Ticket_container {
    width: 100%;
    display: flex;
    justify-content: center;
    width: 80%;
    padding-left: 10%;
    color: #ee9e00;
    font-family: "sunflower", sans-serif;
    font-size: 1.2vw;
    margin-bottom: 5%;
}

#Ticket_hl {
    margin-top: -8vh;
}

#scr_ticketCounter {
    position: absolute;
    bottom: 1vw;
    left: 54vw;
    width: 28%;
    height: auto;
}

#scr_ticketCounter path {
    animation-timing-function: linear;
    animation-fill-mode: both;
}

/* @keyframes scribbleAnimation{
    to {
        stroke-dashoffset: 0;
    }
} */

#ticket_button_container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3vw auto;
    margin-top: 5vw;
}

.ticket_link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

.ticket_content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#anmelden26 {
    width: 120%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#anmelden26 path {
    animation-timing-function: linear;
    animation-fill-mode: both;
}

#ticket_button_container p {
    margin: 1vh;
    font-size: 1.8vw;
    font-family: "sunflower", sans-serif;
    position: relative;
    text-align: center;
    color:#ee9e00
}

#ticket_p {
    margin-right: 3%;
}



/*--------ABOUT THE FESTIVAL ABSCHNITT --------------------------------------------------------------------------*/

#aftermovie_div {
    width: 100%;
    display: flex;
    justify-content: center;
}

#aftermovie_div div {
    padding: 5%;
    justify-content: center;
}

#Youtube-1 {
    border-radius: 15px; /* Ecken abrunden */
    overflow: hidden;
    width: 35vw;
    height: 20vw;
}

#Youtube-2 {
    border-radius: 15px; /* Ecken abrunden */
    overflow: hidden;
    width: 35vw;
    height: 20vw;
}


/*-------- Schnanschverein Section -------------------------------------------------------------------------------------------------------*/

.festival_schnanschverein {
    position: relative;
    
    margin-bottom: 17vh;
    width: 100%;
}

.festival_schnanschverein h1 {
    color: #ee9e00;
    font-family: ff-providence-sans-web-pro, sans-serif;
    font-weight: 700;
    font-size: 4.5vw;
    text-align: center;
    text-shadow: 0px 0px 4px black;
    line-height: 1.0;
}

.festival_schnanschverein p {
    width: 70%;
    padding-left: 15%;
    text-align: center;
    color: #ee9e00;
    font-family: "sunflower", sans-serif;
    font-size: 1.2vw;
}

#schnansch_logo {
    display: block;
    margin: 0 auto;
    border-radius: 25px;
    width: 70%;
    height: auto;
    margin-bottom: 5vh;
}

/*--------Reviewbox bzw. Carousel-------------------------------------------------------------------------------------------------------*/

#review_box_hl {
    position: relative;
    font-size: 3.5vw;
    text-align: left;
    z-index: 8;
    font-family: ff-providence-sans-web-pro, sans-serif;
}

.carousel_container {
    padding-left: 5%;
    width: 90%;
    position: relative;
}

.slides {
    display: flex;
    width: 100%;
    transition: transform 0.5s ease-in-out;
    background-image: url('/Media/Festival 25/rezession_bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px;
    border: 3px solid #ee9e00;
    margin-top: -3.6%;
}

.slide {
    /* top: 0; */
    width: 30%;
    height: auto;
    padding-right: 5%;
}

#pfeil_div {
    margin-top: -7%;
    height: 10vw;
}

.pfeil_1 {
    margin-top: 2vw;
    z-index: 6;
    position: relative;
    width: 4vw;
    height: auto;
    left: 25vw;
    transition: 0.3s;
}

.pfeil_2 {
    margin-top: 2vw;
    z-index: 6;
    position: absolute;
    width: 4vw;
    height: auto;
    right: 25vw;
    transition: 0.3s;
}

.pfeil_1:hover,
.pfeil_2:hover {
    cursor: url(/Media/cursors/linkCursor_32px.png), pointer;
    width: 4.5vw;
}


.infoPanel {
    scrollbar-width: none; /* Für Firefox */
    -ms-overflow-style: none; /* Für Internet Explorer & Edge */
}

.infoPanel::-webkit-scrollbar {
    display: none; /* Für Webkit-Browser (Chrome, Safari) */
}



#outdated {
    margin-top: calc(var(--navBar_height) * 1px + 10vh);
}

/*--------FOOTER-------------------------------------------------------------------------------------------------------*/
#footer-trenner {
    margin-top: 10vw;
}

/* html {
  filter: url(#pixelate);
}

.pixelate_background {
  position: absolute;
  height: 0;
} */


/* ------------------MOBILE-Stuffs-------------------------------------------------------------------------- */
@media screen and (max-width: 868px) {

    /*-------- Header_mobile -------*/
    .festival_c1 {
        margin-top: calc(var(--navBar_height) * 1px + 15vh);
    }

    #festival_überschrift {
        width: 100%;
        top: -4%;
        left: -10%;
    }

    #Header_bild_pc {
        display: none;
    }

    #Header_bild_mobile {
        display: block;
        margin: 0 auto;
        height: auto;
        transform: translateX(-5%);
        border-radius: 15px;
        width: 110%;
    }

    .festival_seiten_menu {
        position: absolute;
        bottom: 5%;
        z-index: 1;
        color: white;
        font-family: ff-providence-sans-web-pro, sans-serif;
    }

    #festival_datum {
        right: -8%;
        top: 90%;
        font-weight: 700;
        font-size: 8vw;
        padding-bottom: 0%;
    }

    .festival_seiten_menu {
        bottom: 20%;
        left: -10%;
    }

    .el_seiten_menu:nth-child(1) {
        padding-top: 2%;
        padding: 3%;
        font-size: 4.5vw;
    }

    .el_seiten_menu:nth-child(2) {
        padding-top: 2%;
        padding: 3%;
        font-size: 4.5vw;
    }

    .el_seiten_menu:nth-child(3) {
        padding-top: 2%;
        padding: 3%;
        font-size: 4.5vw;
    }

    .el_seiten_menu:nth-child(1),
.el_seiten_menu:nth-child(2),
.el_seiten_menu:nth-child(3) {
    padding: 0.35em 0.8em;
}

    /*-------- information_mobile -------*/
    .festival_c2 {
        margin-top: 13vh;
    }

    .festival_c2 h1 {
        font-size: 8.5vw;
    }

    .festival_c2 p {
        width: 110%;
        transform: translateX(-16%);
        font-size: 3.2vw;
    }

    /*-------- Map_mobile -------*/

    .festival_c3 {        
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        /* transform: translateX(-10%); */
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 97%, rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 97%, rgba(0, 0, 0, 0) 100%);
    }

    .festival_c3_scaleable {
        position: relative;
        width: 240%;
        /* display: block; */
        margin: 0 auto;
        height: auto;
    }

    #festival_map {
        width: 100%;
    }

    .map_button {
        position: absolute;
        background-color: rgba(34, 34, 34, 0.8);
        color: #ee9e00;
        border: 1px solid #ee9e00;
        border-radius: 300px;
        padding: 4px 6px;
        font-family: "Sunflower", sans-serif;
        font-size: 10px;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.3s;
    }
/* 
    #Button_Buehne {
        bottom: 45%;
        right: -45%;
    }

    #Button_Spa {
        bottom: 47%;
        right: -84%;
    }
    
    #Button_RocketGame {
        top: 38%;
        left: 66%;
    }
    
    #Button_Parking {
        bottom: 30%;
        left: 4%;
    }
    
    #Button_Camping {
        top: 13%;
        left: 4%;
    }
    
    #Button_Food {
        top: 22%;
        left: 40%;
    }
    
    #Button_chill {
        top: 37%;
        left: 98%;
    }

    
    #Button_pk {
        bottom: 45%;
        left: 60%;
    }
    
    #Button_Hammock {
        bottom: 30%;
        right: -95%;
    }
    
    #Button_arrival {
        bottom: 26%;
        left: 95%;
    }
    
    #Button_art {
        top: 12%;
        right: -15%;
    }
    
    #Button_hygiene {
        top: 70%;
        left: 43%;
    }

    #Button_awareness {
        top: 18%;
        right: -50%;
    } */

    /* animations --------------------------------- */

    #festival_map_animations_fish {
        transform: translate(-50%, -50%) scale(0.75);
    }

    #festival_map_animations_vapor {
        transform: translate(-50%, -50%) scale(0.4);
    }

    #festival_map_animations_smokePizzaofen {
        transform: translate(-50%, -50%) scale(0.75);
    }

    #festival_map_animations_smokeHottub {
        transform: translate(-50%, -50%) scale(0.75);
    }

    #festival_map_animations_rocket {
        transform: translate(-50%, -50%) scale(0.7);
    }

    .infoPanel {
        width: 70vw;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    #Button_closePanel {
        top: 5%;
        right: 14px;
    }

    #Ticket_container {
        display: block;
        transform: translateX(-5%);
        text-align: center;
        width: 110%;
        padding-left: 0;
        color: #ee9e00;
        font-family: "sunflower", sans-serif;
        font-size: 3.2vw;
    }

    /* -------- TICKET BUTTON------------------------------------ */
    #ticket_button_container {
        padding-top: 10%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 3vw auto;
    }
    
    /* SVG-Rahmen */
    #anmelden26 {
        width: 125%;
    }
    
    /* Ticket-Text zentrieren */
    #ticket_button_container p {
        font-size: 3.8vw;
    }


    #scr_ticketCounter {
        bottom: -1vw;
        top: 20vw;
        left: 40vw;
        width: 40vw;
        height: auto;
    }

    #about{
        padding-top: 12vw;
    }

    #review_box_hl {
        font-size: 8.5vw;
        text-align: center;

    }

    .carousel_container {
        justify-content: center;
        padding-left: 0;
        width: 100%;
    }
    
    .slides {
        display: flex;
        width: 120%;
        transform: translateX(-10%);
        transition: transform 0.5s ease-in-out;
        background-image: url('/Media/Festival 25/rezession_bg.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 20px;
        border: 3px solid #ee9e00;
        margin-top: -3.6%;
    }


    #aftermovie_div {
        width: 100%;
        display: flex; /* Flexbox aktivieren */
        justify-content: center; /* Zentriert die Kinder (die iframes) auf der X-Achse */
        flex-direction: column; /* Ändert die Flexbox-Ausrichtung auf vertikal */
        align-items: center; /* Zentriert die Kinder auch auf der Y-Achse */
        gap: 20px; /* Optional: Abstand zwischen den iframes */
    }
    
    #aftermovie_div div {
        display: flex;
        justify-content: center; /* Zentriert das iframe im inneren div */
    }
    
    #Youtube-1 {
        margin-top: 10%;
        border-radius: 10px; /* Ecken abrunden */
        width: 80vw;
        height: auto;
        border: none; /* Keine Rahmen um das Video */
    }
    #Youtube-2 {
        display: none;
    }

    #review_box_hl {
        display: none;
    }



    .festival_schnanschverein {
        margin-top: 5vh;
    }

    .festival_schnanschverein h1 {
        font-size: 8.5vw;
    }

    .festival_schnanschverein p {
        width: 110%;
        transform: translateX(-16%);
        font-size: 3.2vw;
    }

    #schnansch_logo {
        display: block;
        margin: 0 auto;
        height: auto;
        transform: translateX(-5%);
        border-radius: 15px;
        width: 110%;
    }


    
    .carousel_container {
        display: none;
    }

}