/* Anker */
.tc h2 {
  border-bottom: 1px solid #bbb;
  color: #555;
  font-size: 15px;
  margin: 0;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  padding-top: .5rem;
  -webkit-transition: .5s all;
  -o-transition: .5s all;
  transition: .5s all; }

.tc a {
  color: #333; }

.tc h3, .tc h4, .tc h5, .tc h6 {
  font-size: 13px;
  margin: 0; }

.tc h3 a, .tc h4 a, .tc h5 a, .tc h6 a {
    color: #555; }

.tc h3 {
  margin-left: 0.5rem; }

.tc h3:before {
    content: ' - '; }

.tc h4 {
  margin-left: 1rem; }
.tc h4:before {
    content: ' - '; }

.tc h5 {
  margin-left: 1.5rem; }
.tc h5:before {
    content: ' - '; }

.tc h6 {
  margin-left: 2rem; }

.tc h6:before {
    content: ' - '; }

.tc h2, .tc h1 {
    font-size:13px;
}
.sidebar-block {
  background: #fff;
  margin-bottom: 1rem;
  padding: 1rem;
  position: fixed;
  width: 16rem;
  border:1px solid #cfcfcf;
}


/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}


.rk { background-color: #FF6D00 !important; }

.spielplan_abfrage { display: block; max-width: 350px; float: right; box-sizing: border-box; background-image: url('/festspiele.de/mam/static/css/opener.jpg'); margin-left: 60px; margin-bottom: 40px; }
.spielplan_abfrage .inner { display: block; background: rgba(0,0,0,0.85); padding: 15px 20px; }
.spielplan_abfrage #af_suche { display: block; margin: 15px 0; }
.spielplan_abfrage { color: #fff; }
.spielplan_abfrage h4 { color: #FBBA00; margin: 0; padding: 0; }
.spielplan_abfrage #kalendersuche { display: block; max-width: 1400px; padding: 0 40px; margin: auto; width: 100%; }
.spielplan_abfrage a { color: #FBBA00; }
.spielplan_abfrage #kalenderuebersicht { display: block; border-collapse: collapse; text-align: center; }
.spielplan_abfrage #kalenderuebersicht td { padding: 3px; font-weight: 900; }
.spielplan_abfrage #kalenderuebersicht span.monat { display: block; width: 38px; height: 18px; background-color: #fff; color: #000; font-size: 10px; line-height: 18px; font-weight: 400; text-transform: uppercase;   }
.spielplan_abfrage #kalenderuebersicht span.tag { display: block; width: 38px; height: 32px; background-color: #fff; color: #000; font-size: 26px; line-height: 32px; font-weight: 400;   }
.spielplan_abfrage #kalenderuebersicht a span.tag { background-color: #FBBA00; display: block; color: #fff; font-size: 26px; font-weight: 900; }
.spielplan_abfrage #kalenderuebersicht a span.monat { background-color: #FBBA00; color: #fff; }
.spielplan_abfrage #kalenderuebersicht a.active { background-color: #FBBA00; }
.spielplan_abfrage .zweiteiler { margin-top: 40px; }
.spielplan_abfrage .button_link, .spielplan_abfrage .button_nolink { margin: 6px 0; display: inline-block; color: #fff; border: 1px solid white; padding: 8px 10px; font-size: 14px; vertical-align: top; font-weight: 900; background-color: #FBBA00; }
.spielplan_abfrage .button_link { background-image: url('/festspiele.de/mam/static/css/tickets_icon.svg '); background-position: left 5px center; background-size: auto 26px; background-repeat: no-repeat; padding-left: 40px; }
.spielplan_abfrage #hinweis { font-weight: 900; max-width: 450px; display: inline-block; }
.spielplan_abfrage .button_link, .spielplan_abfrage .button_nolink { display: inline-block; }
.spielplan_abfrage .button_nolink { opacity: 1; cursor: default; pointer-events: none; text-decoration: line-through; background-color: #000; }
.spielplan_abfrage .timelocation { display: block; font-size: 16px; }
.spielplan_abfrage .event { display: block; font-weight: 700; }
.spielplan_abfrage .button { color: #fff; }
.spielplan_abfrage p { margin-top: 10px; }
.spielplan_abfrage h5 { margin-top: 25px; margin-bottom: 0; }
.spielplan_abfrage .tag_aktiv h3 { font-size: 30px; }
.spielplan_abfrage p.termin span { vertical-align: middle; }
.spielplan_abfrage .uhrzeit, .uhrzeit, .uhrzeit2 { display: inline-block; background-image: url('/festspiele.de/mam/static/css/icon_time.png'); background-position: left center; background-size: 16px auto; background-repeat: no-repeat; padding-left: 20px; font-size: 16px;  box-sizing: border-box; }
.spielplan_abfrage .veranstaltung, .veranstaltung  { display: block; font-size: 16px; box-sizing: border-box; font-weight: 900; }
.spielplan_abfrage .ort, #kalendersuche .ort, .ort2 { display: inline-block; background-image: url('/festspiele.de/mam/static/css/icon_location.png'); background-position: left center; background-size: 16px auto; background-repeat: no-repeat; padding-left: 20px; font-size: 16px; box-sizing: border-box; margin-left: 20px; }


#kalendersuche .ort { margin-left: 6px; }
.ort { margin-left: 0; }
.ort2 {
  background-image: url('/festspiele.de/mam/static/css/icon_location2.png');
}
.uhrzeit2 {
  background-image: url('/festspiele.de/mam/static/css/icon_time2.png');
}
.spielplan_abfrage .uhrzeit, .uhrzeit, .uhrzeit2 {
  display: inline-block;
  background-image: url('/festspiele.de/mam/static/css/icon_time2.png');
  background-position: left center;
  background-size: 16px auto;
  background-repeat: no-repeat;
  padding-left: 20px;
  font-size: 16px;
  box-sizing: border-box;
}
#kalender { position: relative; display: block; max-width: 1400px; margin: 0 auto; margin-top: -80px; z-index: 100; }
#kalender_inner { display: block; padding: 0 10px; overflow: hidden; white-space: nowrap; background-color: white; box-sizing: border-box;  }

.tagestermin { display: inline-block; vertical-align: top; white-space: nowrap; line-height: 80px; height: 80px; padding: 0 4px; }
.tagestermin span { display: inline-block; vertical-align: top; color: #FBBA00; font-size: 16px; font-weight: 900; text-transform: uppercase; margin-top: 3px; padding-left: 15px; }
.tagestermin a { display: inline-block; color: #000; font-size: 26px; font-weight: 700; vertical-align: top; }
.tagestermin a:hover, .tagestermin .tag_aktiv { color: #FBBA00; background-image: url('/festspiele.de/mam/static/css/dreieck.png'); background-position: top center; background-size: 15px auto; background-repeat: no-repeat; }


#back {  display: block; vertical-align: top; float: left; width: 70px; height: 80px; line-height: 80px; display: block; background-color: #fff; font-size: 0; text-align: center; }
#next {  display: block; vertical-align: top; float: right; width: 70px; height: 80px; line-height: 80px; display: block; background-color: #fff; font-size: 0; text-align: center; }

#back:after { content:'\1438'; display: inline-block; font-size: 32px; color: #FBBA00; font-weight: 900;  }
#next:after { content:'\1433'; display: inline-block; font-size: 32px; color: #FBBA00; font-weight: 900; }

#kalender .tagestermine { position: absolute; z-index: 99999; color: #fff; display: none; bottom: 0; left: 0; margin-bottom: 60px; max-width: 1400px; width: 100%; height: auto; padding: 0 0 20px 0;
}

.tagestermine_inner { display: block; padding: 20px; background-color: #FBBA00; line-height: 28px; font-size: 18px;  }
.tagestermine_inner p { border-bottom: 1px dotted #fff; }
.tagestermine_inner h4 { margin: 0; color: #fff; font-size: 26px; line-height: 34px; }
.tagestermine_inner a { display: inline-block; color: #fff; border: 1px solid white; padding: 8px 10px; font-size: 14px; vertical-align: top; font-weight: 900; background-image: url('/festspiele.de/mam/static/css/tickets_icon.svg '); background-position: left 5px center; background-size: auto 26px; background-repeat: no-repeat; padding-left: 40px; }
.tagestermine_inner a:hover { transform: scale(1.05); }
.tagestermine_inner .button_link, .tagestermine_inner .button_nolink { float: right; }
.tagestermine_inner .button_nolink { cursor: default; pointer-events: none; text-decoration: line-through; background-color: #000; }
.tagestermine_inner .timelocation { display: block; font-size: 16px; }
.tagestermine_inner .event { display: block; font-weight: 700; }



#kalender .uhrzeit { display: inline-block; background-image: url('/festspiele.de/mam/static/css/icon_time.png'); background-position: left center; background-size: 16px auto; background-repeat: no-repeat; padding-left: 20px; font-size: 16px;  box-sizing: border-box; }

#kalender .ort { margin-left: 30px; display: inline-block; background-image: url('/festspiele.de/mam/static/css/icon_location.png'); background-position: left center; background-size: 16px auto; background-repeat: no-repeat; padding-left: 20px; font-size: 16px;}

@media screen and (max-width: 639px) {
  #kalender {
    display: none;
  }
}
@media screen and (max-width: 1023px) {
  #kalender {
    margin-top: 0;
  }
}
@media screen and (max-width: 1199px) {
  #kalender {
    max-width: 1024px;
  }
}
@media screen and (max-width: 1279px) {
  #kalender {
    max-width: 1100px;
  }
}
@media screen and (max-width: 1350px) {
  #kalender {
    max-width: 1200px;
  }
}
@media screen and (max-width: 1499px) {
  #kalender {
    max-width: 1280px;
  }
}


        #fluid {
            font-family: Lato, sans-serif;
            display: flex;
            justify-content: center;
            padding: 0;
        }

        #fluid h3 {
            color:#f4b22a;
        }

        .tile-container1 {
            width: 100%;
            max-width: 1200px;
        }

        .tile-link {
            display: block;
            text-decoration: none;
            color: inherit;
            overflow: hidden;
            position: relative;
        }

        .tile-link:hover .tile {
            transform: scale(1.03);
            box-shadow: none;
        }

        .tile {
            position: relative;
            width: 100%;
            padding-top: 25%;
            overflow: hidden;
            background-color: #ddd;
            margin-bottom: 20px;
            transition: transform 0.3s ease;
        }
        .tile .tile-overlay {
        position: absolute;
        top: 0;
        left: 35%; /* Beginn der Transparenz */
        width: 65%; /* Transparenz ab 33% bis zum rechten Rand */
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8); /* Weiße Transparenz mit 60% Deckkraft */
        pointer-events: none; /* Macht die Überlagerung nicht klickbar */
    }

        .tile img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .tile-content1 {
            position: absolute;
            top: 0;
            left: 37%;
            width: 63%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 20px;
            color: white;
            background: rgba(0, 0, 0, 0.0);
        }

        .tile-title {
            font-family: 'Lobster', sans-serif;
            font-size: 1.2em;
            color: #f4b22a; /* Gelber Titel */
            margin-bottom: 10px;
        }

        .tile-subtitle {
            font-family: 'Lato', sans-serif;
            font-size: 1em;
            font-weight: bold;
            color: #3d5140; /* Grüner Untertitel */
            margin-bottom: 10px;
        }

        .tile-description {
            font-family: 'Lato', sans-serif;
            font-size: 1em;
            color: #3d5140;
            margin-bottom: 20px;
        }

        .tile-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #f4b22a;
            color: white;
            font-family: 'Lato', sans-serif;
            font-weight: bold;
            text-decoration: none;
            text-align: center;
        }

        .tile-button:hover {
            background-color: #e6a021;
        }

        /* Media Query für Bildschirme unter 800px */
        @media (max-width: 800px) {
            .tile-description {
                display: none;
            }
        }

        @media (min-width: 800px) and (max-width: 990px) {
            .tile {
                padding-top: 35%; /* Erhöht das Seitenverhältnis, um die Höhe der Kachel anzupassen */
            }

            .tile img {
                object-fit: cover;
                object-position: left;
                width: 100%;
                height: 100%;
            }

            .tile-content1 {
                padding: 15px; /* Reduziert das Padding leicht, um mehr Platz innerhalb der Kachel zu schaffen */
            }

            .tile-title {
                font-size: 1.5em; /* Schriftgröße des Titels anpassen */
            }

            .tile-subtitle {
                font-size: 1.1em; /* Schriftgröße des Untertitels anpassen */
            }

            .tile-button {
                padding: 8px 16px;
                font-size: 1.2em;
            }
        }

        /* Anpassungen für mittlere und größere Bildschirme ab 991px */
        @media (min-width: 991px) {
            .tile-content1 {
                padding: 10px;
            }

            .tile-title {
                font-size: 1.5em;
                margin-bottom: 15px;
            }

            .tile-subtitle {
                font-size: 1.0em;
                margin-bottom: 10px;
            }

            .tile-button {
                padding: 8px 16px;
                font-size: 1.2em;
            }
        }

        @media (min-width: 529px) and (max-width: 800px) {
            .tile {
                padding-top: 35%; /* Anpassung der Höhe der Kachel */
            }

            .tile-content1 {
                padding: 10px; /* Reduziertes Padding innerhalb der Kachel */
            }

            .tile-title {
                font-size: 1.5em; /* Größe bleibt gleich, aber Abstand wird angepasst */
                margin-bottom: 15px; /* Weniger Abstand zum Untertitel */
                text-align: center
            }
            
            .tile img {
                object-fit: cover;
                object-position: left;
                width: 100%;
                height: 100%;
            }

            .tile-subtitle {
                font-size: 1em;
                font-weight: bold;
                margin-bottom: 10px; /* Reduzierter Abstand zum nächsten Element */
                line-height: 1.2; /* Kompakteres Zeilen-Layout für mehrzeilige Untertitel */
                text-align: center
            }

            .tile-button {
                padding: 8px 16px;
                font-size: 0.85em;
                margin-top: 10px; /* Kleinere Margen zur Verbesserung des Layouts */
            }
         

        }

        @media (min-width: 1024px) {
            .tile-title {
                font-size: 2em; /* Schriftgröße für den Titel in der Desktop-Ansicht */
            }

            .tile-button {
                padding: 8px 16px;
                font-size: 1.2em;
            }
        }

        /* Anpassungen für sehr schmale Bildschirme */
        @media (max-width: 528px) {
            .tile {
                width: 100%;
                padding-top: 90%;
            }

            .tile img {
                object-fit: cover;
                object-position: left;
                width: 100%;
                height: 100%;
            }

            .tile-content1 {
                padding: 10px;
                left: 0;
                bottom: 0;
                width: 100%;
                height: auto;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                text-align: center;
            }
            .tile .tile-overlay {
                display: none;
            }  

            .tile-text-background {
                background: rgba(255, 255, 255, 0.8); /* Weiße Schattierung */
                padding: 10px;
                width: 100%;
            }

            .tile-title {
                font-size: 1.5em;
                color: #f4b22a; /* Gelber Titel */
                margin-bottom: 5px;
            }

            .tile-subtitle {
                font-size: 0.9em;
                color: #3d5140; /* Grüner Untertitel */
                font-weight: bold;
                margin-bottom: 0;
            }

            .tile-button {
                display: none !important;
            }
        }

                nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 80px;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background-color: #fff;
            border-bottom: 1px solid #ddd;
            padding: 0 20px;
            box-sizing: border-box;
        }

        /* Hamburger-Menü Container */
        .menu-hamburger-container {
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .menu-hamburger {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: transform 0.3s ease;
        }

        .menu-hamburger span {
            width: 30px;
            height: 3px;
            background-color: #f4b22a;
            margin: 5px 0;
            transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s;
        }

        .menu-hamburger.active span:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }

        .menu-hamburger.active span:nth-child(2) {
            opacity: 0;
        }

        .menu-hamburger.active span:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }

        .menu-hamburger-container:hover .menu-hamburger {
            transform: rotate(90deg);
        }

        .menu-hamburger-text {
            margin-left: 10px;
            font-size: 25px;
            color: #f4b22a;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s;
        }

        .menu-hamburger-text:hover {
            transform: scale(1.1);
        }

        .menu-logo img {
            height: 65px;
        }

        .menu-social-icons a {
            color: #f4b22a;
            font-size: 24px;
            margin: 0 8px;
            transition: color 0.3s;
            text-decoration: none; /* Keine Unterstreichung */
        }

        .menu-social-icons a:hover {
            color: #d4a017;
        }

        .fullscreen-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: auto;
            height: 100vh; /* Füllt die gesamte Höhe des Bildschirms */
            background-color: #fff;
            color: #333;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            padding: 20px;
            z-index: 1000000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s, transform 0.3s ease-in-out;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        }

        .fullscreen-menu.active {
            opacity: 1;
            visibility: visible;
            overflow-y: auto;  /* Ermöglicht das Scrollen */
            background-color: #fff;
        }

        .button-container {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 10px;
        }

        /* Style für den Tickets Button */
        .ticket-button {
            background-color: #FFC107; /* Weißer Hintergrund */
            color: white; /* Schwarzer Text */
            text-align: center;
            padding: 0.6rem 1.2rem;
            text-decoration: none;
            border-radius: 4px;
            transition: background-color 0.3s, color 0.3s; /* Übergang für Hintergrund- und Textfarbe */
            font-size: 1rem;
            font-weight: bold;
            border: 2px solid #FFC107; /* Gelber Rahmen */
            cursor: pointer;
        }

        .ticket-button::before {
            content: "\f3ff";
            font-family: "FontAwesome";
            margin-right: 10px;
        }

        /* Button Hover-Effekt */
        .ticket-button:hover {
            background-color: #FFC107; /* Gelber Hintergrund beim Hover */
            color: white; /* Weißer Text beim Hover */
        }

        /* Überkategorien */
        .menu-categories {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
            list-style: none;
            padding: 0;
            margin: 10px 0 0;
            margin-bottom: 40px; /* Fügt Marge unter der letzten Kategorie hinzu */
        }

        .menu-categories li {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px; /* Kleinerer Abstand zwischen den Hauptkategorien */
            position: relative;
            color: #333;
            padding: 10px;
            border-radius: 5px;
        }

        .menu-categories li a {
            text-decoration: none;
            color: white;
            background-color: #f4b22a; /* Gelber Hintergrund nur für Text */
            padding: 5px 10px;
        }

        .menu-categories li a span {
            background-color: #f4b22a; /* Gelber Hintergrund nur für Text */
            padding: 10px;
            border-radius: 10px;
        }

        /* Unterkategorien */
        .submenu {
            background-color: 'transparent'; /* Entfernt den gelben Hintergrund */
            margin-top: 10px;
            padding-left: 20px;
        }

        .menu-categories li .submenu a {
            font-size: 16px;
            display: block;
            color: #333;
            margin: 5px 0;
            text-decoration: none;
            background-color: transparent; /* Entfernt den gelben Hintergrund */
            transition: color 0.3s;
        }

        .menu-categories li .submenu a:hover {
            color: #f4b22a;
        }

        .submenu.columns {
            display: flex;
            gap: 40px;
        }

        .submenu.columns div {
            display: flex;
            flex-direction: column;
        }

        /* Schließen-Kreuz */
        .close-menu {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 36px;
            color: #333;
            cursor: pointer;
            transition: color 0.3s;
            z-index: 1001; /* Sicherstellt, dass das Kreuz über den Inhalten liegt */
        }

        .close-menu:hover {
            color: #f4b22a;
        }

        /* Responsives Design */
        @media (max-width: 990px) {
            .fullscreen-menu {
                width: auto;
            }
        }
        @media (min-width: 711px) {
        /* Zeige Social Icons im Fullscreen-Menü nicht*/
            .fullscreen-menu .menu-social-icons {
                display: none;
            }
        }
        @media (max-width: 850px) {
            .menu-logo img {
                width: 90px; /* Breite des Bildes */
                height: 40px;
                object-fit: cover; /* Beschneidet das Bild */
                object-position: left; /* Zeigt nur den linken Teil des Bildes */
            }
        }

        @media (max-width: 710px) {
            .fullscreen-menu {
                width: 100%;
                left: 0; /* Nimmt die volle Breite ein */
            }

            .close-menu {
                right: 10px; /* Kreuz bleibt immer am rechten Rand */
                top: 10px; /* Kreuz bleibt immer am oberen Rand */
                position: fixed; /* Fixiere das Kreuz relativ zum Bildschirm */
            }

            .menu-social-icons {
                display: none;
            }

             .menu-logo img {
                width: 60px; /* Breite des Bildes */
                height: 45px;
                object-fit: cover; /* Beschneidet das Bild */
                object-position: left; /* Zeigt nur den linken Teil des Bildes */
            }

            .menu-hamburger-text {
                display: none;
            }

            /* Verstecke Unterkategorien bei Bildschirmen bis 710px */
            .submenu {
                display: none; /* Verstecke die Unterkategorien */
            }

            /* Ausnahme für die "Spielplan und Tickets"-Unterkategorien */
            .menu-categories li.spielplan .submenu {
                display: block; /* Zeigt Unterkategorien für Spielplan und Tickets an */
            }

            .submenu.columns {
                display: none; /* Verstecke die Unterkategorien */
            }

            .menu-categories li.active .submenu {
                display: block; /* Zeige die Unterkategorie, wenn der Eltern-Link aktiv ist */
            }

            /* Zeige Social Icons im Fullscreen-Menü */
            .fullscreen-menu .menu-social-icons {
                display: flex;
                margin-top: 10px;
            }
              .fullscreen-menu .menu-social-icons a {
                margin: 0 10px;
                text-decoration: none; /* Keine Unterstreichung */
            }

            /* Anpassungen für das Logo und den Ticketbutton */
            nav {
                justify-content: space-between;
                align-items: center;
            }
            .menu-logo img {
                order: 1; /* Logo wird zuerst angezeigt */
            }
            .ticket-button {
                order: 2; /* Ticketbutton wird danach angezeigt */
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }
            .menu-hamburger-container {
                order: 3; /* Hamburger-Menü wird zuletzt angezeigt */
            }
        }

           @media (min-width: 711px) {
            .menu-logo {
                display: flex;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }

            .menu-logo img {
                max-width: 100%;
                height: 65px;
            }
            .menu-social-icons {
                display: flex;
            }

        }

        /* Fokus-Stile 
        .menu-hamburger-container:focus,
        .menu-hamburger-container:focus-within,
        .menu-categories li:focus,
        .menu-categories li:focus-within,
        .menu-categories li a:focus,
        .menu-categories li a:focus-within,
        .submenu a:focus,
        .submenu a:focus-within,
        .ticket-button:focus,
        .ticket-button:focus-within,
        .close-menu:focus,
*/
/*  Slider */
    /* Falls keinerlei Banner */
        .space {
          padding-top: 50px;
        }

       .sliderh {
            position: relative;
            width: 100%;
            height: 580px; /* Bannerhöhe */
            max-width: 100%;
            margin: 0 auto;
            overflow: hidden;
            margin-top: 80px;
        }

        .slidesh {
            display: flex;
            transition: transform 0.5s ease-in-out;
            width: 100%;
            height: 100%;
        }

        .slideh {
            flex: 0 0 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .slideh img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .text-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 90%;
            max-width: 600px;
        }

        .text-overlay h1 {
            font-size: 2rem;
            margin-bottom: 20px;
            background-color: #f4b22a;
            padding: 10px;
            font-family: 'Lato', Arial, sans-serif; /* Standard-Schriftart */
            display: inline-block; /* Nur so breit wie der Text im h1 */
            color: white;
        }

        .slide-3 .text-overlay h1 {
            font-family: 'Lobster', Arial, sans-serif; /* Lobster für Slide 3 */
        }

        .text-overlay p {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 10px;
            background-color: white;
            color: black;
            padding: 10px;
            width: fit-content;
        }

        .cta-button {
            background-color: #f4b22a;
            color: white;
            padding: 10px 20px;
            font-size: 1.1rem;
            font-weight: bold;
            text-decoration: none;
            border-radius: 5px;
            cursor: pointer;
            display: inline-block;
            margin-top: 20px;
            text-align: center;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }

        .cta-button:hover {
            background-color: #d69522; /* Etwas dunklerer Farbton */
            color: white;
            transform: scale(1.05); /* Leichte Vergrößerung */
        }

        .prev, .next {
            position: absolute;
            bottom: 10px; /* Positioniert die Pfeile unten im Banner */
            transform: translateY(0);
            background: rgba(255, 255, 255, 0.25);
            color: #f4b22a;
            border: none;
            font-size: 2rem;
            padding: 0.5rem 1rem;
            cursor: pointer;
            z-index: 10;
        }

        .prev {
            left: 10px;
        }

        .next {
            right: 10px;
        }

        .indicators {
            position: absolute;
            top: 15px; /* Abstand vom oberen Rand */
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }

        .indicator {
            width: 60px;
            height: 6px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 5px;
            position: relative;
            overflow: hidden;
        }

        .indicator.active .progress-bar {
            animation: fillProgress 8s linear forwards; /* 5s entspricht der Slide-Dauer */
        }

        .progress-bar {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background: #f4b22a;
            border-radius: 5px;
        }
        .slide-1 img {
                object-position: right; !important/* Sicherstellt, dass der rechte Teil des Bildes sichtbar bleibt */
            }

        @keyframes fillProgress {
            0% {
                width: 0;
            }
            100% {
                width: 100%;
            }
        }

        @media (max-width: 1200px) {
            .sliderh {
                height: 480px;
            }
        }

        @media (max-width: 1000px) {
            .sliderh {
                height: 350px;
            }
        }

        @media (max-width: 768px) {
            .sliderh {
                height: 380px;
            }
            .text-overlay h1 {
                font-size: 1.5rem;
            }
            .text-overlay p {
                font-size: 1rem;
            }
            .cta-button {
                padding: 8px 16px;
                font-size: 1rem;
            }
            #toc{display:none;}
        }

        @media (max-width: 1700px) {
            .slide-3 img {
                object-position: left center;
            }
        }

        @media (max-width: 480px) {
            .sliderh {
                height: 320px;
            }
            .text-overlay h1 {
                font-size: 1.2rem;
            }
            .text-overlay p {
                font-size: 0.9rem;
            }
            .cta-button {
                padding: 6px 12px;
                font-size: 0.9rem;
            }
            #toc{display:none;}
        }
        /* Text im Slide 1: Vollständig links ausgerichtet */
        .slide-1 .text-overlay {
            left: 20px; /* Padding vom linken Rand */
            transform: translateY(-50%);
            text-align: left; !important/* Links ausgerichtet */
            width: auto; /* Textbreite anpassen */
            padding-right: 20px; /* Etwas Platz rechts, damit der Text nicht an den Rand stößt */
        }

        /* Text im Slide 3: Startet ab 2/3 der Breite 
        .slide-3 .text-overlay {
            left: 33.33%; 
            transform: translateY(-50%);
            text-align: center; /
            width: 66.66%; 
            padding-left: 20px;  */
        }
        /* Zentriert den Text in Slide 1 und Slide 3, wenn der Bildschirm kleiner als 600 Pixel ist */
        @media (max-width: 600px) {
            .slide-1 .text-overlay,
            .slide-3 .text-overlay {
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
                width: 90%;
            }
         /* Verkleinert die Indikatoren */
            .indicator {
                width: 40px;
                height: 4px;
            }
            /* Verkleinert die Pfeile */
            .prev, .next {
                font-size: 1.5rem;
                padding: 0.3rem 0.7rem;
            }
        }
       
        /* Verkleinert die Indikatoren weiter, wenn der Bildschirm kleiner als 400 Pixel ist */
        @media (max-width: 400px) {
            .indicator {
                width: 30px;
                height: 3px;
            }
            .prev, .next {
                font-size: 1.2rem;
                padding: 0.1rem 0.5rem;
            }
            .slide-1 img {
                object-position: right; !important/* Sicherstellt, dass der rechte Teil des Bildes sichtbar bleibt */
            }
        }


@keyframes fade{
  from{
    opacity:0.4;
  }
  to{
    opacity:1;
  }
}
@keyframes slide-in {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0%);
    }
  }

#slider2{
  margin:0 auto;
  width:100%;
  overflow:hidden;
}

.slides2{
  overflow:hidden;
  animation-name:fade;
  animation-duration:3s;
  display:none;
}

img{
  width:100%;
}

#slider2 #dot{
  margin:0 auto;
  margin-top: -50px;
  text-align:center;
}
#slider2 .dot{
  display:inline-block;
  border-radius:50%;
  background:#d3d3d3;
  padding:8px;
  margin:10px 5px;
}

.na {
    display: inline-block;
    z-index: 20000;
}

.prev2, .next2 {
            position: absolute;
            bottom: 10px; /* Positioniert die Pfeile unten im Banner */
            transform: translateY(0);
            background: rgba(255, 255, 255, 0.25);
            color: #f4b22a;
            border: none;
            font-size: 2rem;
            padding: 0.5rem 1rem;
            cursor: pointer;
            z-index: 10;
        }

        .prev2 {
            left: 10px;
        }

        .next2 {
            right: 10px;
        }


#slider2 .active{
  background:black;
}

@media (max-width:567px){
  #slider2{
    width:100%;

  }
}

.textoverlay2 {
    position: relative;
    color:black;
    z-index: 1000;
    margin:10px;
    padding:5px;
    bottom:80px;

}
.textoverlay {
    position: relative;
    background: rgba(255, 255, 255, 0.5);
    color:black;
    z-index: 1000;
    margin:10px;
    padding:5px;
    bottom:80px;

}

/* Safari anpassungen */
@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {

    .menu-logo img {
        max-width: 231px;
        height: 65px;
    }
    .sliderh {

    }
    @media (max-width: 768px) {
        .sliderh {
            margin-top: 80px;
            height: 420px;
      }
    }
    @media (max-width: 480px) {
        .sliderh {
            height: 320px;
        }
    }
    @media (max-width: 710px) {
      .menu-logo img {
        width: 60px;
        height: 45px;
        object-fit: cover;
        object-position: left;
      }
    }
}