@charset "UTF-8";
/* CSS Document */
*{margin: 0; padding: 0; border: 0}


*,
*::before,
*::after {
  box-sizing: border-box;
}


@font-face {
    font-family: 'AgencyFB-Bold';
    src:url('../fonts/AgencyFB-Bold.woff') format('woff'),
        url('../fonts/AgencyFB-Bold.woff2') format('woff2'),
        url('../fonts/AgencyFB-Bold.svg#AgencyFB-Bold') format('svg'),
        url('../fonts/AgencyFB-Bold.eot'),
        url('../fonts/AgencyFB-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AgencyFB-Bold.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Agency-FB-Condensed';
    src:url('../fonts/Agency-FB-Condensed.woff') format('woff'),
        url('../fonts/Agency-FB-Condensed.woff2') format('woff2'),
        url('../fonts/Agency-FB-Condensed.svg#Agency-FB-Condensed') format('svg'),
        url('../fonts/Agency-FB-Condensed.eot'),
        url('../fonts/Agency-FB-Condensed.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Agency-FB-Condensed.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'TitilliumWeb-Regular';
    src:url('../fonts/TitilliumWeb-Regular.woff') format('woff'),
        url('../fonts/TitilliumWeb-Regular.woff2') format('woff2'),
        url('../fonts/TitilliumWeb-Regular.svg#TitilliumWeb-Regular') format('svg'),
        url('../fonts/TitilliumWeb-Regular.eot'),
        url('../fonts/TitilliumWeb-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/TitilliumWeb-Regular.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TitilliumWeb-Bold';
    src:url('../fonts/TitilliumWeb-Bold.woff') format('woff'),
        url('../fonts/TitilliumWeb-Bold.woff2') format('woff2'),
        url('../fonts/TitilliumWeb-Bold.svg#TitilliumWeb-Regular') format('svg'),
        url('../fonts/TitilliumWeb-Bold.eot'),
        url('../fonts/TitilliumWeb-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/TitilliumWeb-Bold.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



:root {
--tuerkis: #009cb4;
--dunkeltuerkis: #004556;
--hellgruen: #c8d419;
--weiss: #fff ;
--schwarz: #000 ;
--transparent: transparent;
}


Html {    width: 100vw;}
html, body {
    height: 100%;
    margin: 0;
  }

  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;


  }

  .page-wrapper {
    flex: 1;
  }

.card {background: transparent !important; border: 0px !important;}

.dark {background: var(--dunkeltuerkis);}
.light {background: #fff;}




body#booking {/* Fallback-Farbe für sehr alte Browser */
  


  /* Optional: „Parallax“-Gefühl. Bei Ruckeln auf Mobilgeräten gern entfernen */

  background-repeat: no-repeat;
  background-size: cover;
background-blend-mode: multiply, normal;

}

#booking .datum-wrapper .wochentag {text-transform: uppercase !important; display:block; width: 45px; font-size: 1.2em !important; float: left; font-family: 'TitilliumWeb-Bold'; }


/* Fallback: nur Verlauf */
body#booking {
  background-image: linear-gradient(180deg, #004556 20%, #009cb4 90%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Nur wenn eine Artist-Klasse existiert → zusätzlich das Bild */
body#booking[class*="artist-"] {
  background-image:
    url('/img/bg-default.jpg'), /* wird per PHP ersetzt */
    linear-gradient(180deg, #004556 0%, #009cb4 100%);
  background-blend-mode: multiply, normal;
 background-position: 50% -10%;

}


.artist-324 .accordion-item:first-child {
    display: none !important;
}

body#booking.artist-324 {
  background-image: url('/img/bg-olaf-schubert.png'),
                    linear-gradient(180deg, #004556 20%, #009cb4 90%);
                 background-position: 50% -10%;

}

body#booking.artist-662 {
  background-image: url('/img/bg-r-zieher.png'),
                     linear-gradient(180deg, #004556 20%, #009cb4 90%);
          
}

body#booking.artist-759 {
  
  background-image: url('/img/bg-titanic-boygroup.png'),
                    linear-gradient(180deg, #004556 20%, #009cb4 90%);
               

}


body#booking.artist-813 {

  background-image: url('/img/bg-guenther-hindrich.png'),
                    linear-gradient(180deg, #004556 20%, #009cb4 90%);
                 

}

body#booking.artist-811 {
  
  background-image: url('/img/bg-seraphina-kalze.png'),
                    linear-gradient(180deg, #004556 20%, #009cb4 90%);
                

}



/*Allgemein*/
body {font-family: TitilliumWeb-Regular, Verdana, Arial, Helvetica, sans-serif; padding-top: 0px !important; font-size: 1em !important; background-color: var(--tuerkis); height: 100vh; color: #fff !Important; }
.imageheader {background-color: var(--dunkeltuerkis) !important; margin-top: 157px}
.custom-col {flex: 0 0 20%;  max-width: 20%;}
.page.container {margin-top: 30px; margin-bottom: 100px}


img { border-width: 0 }
img.responsive {width: 100%; height: auto; }
.padding5 {padding-top: 5px; padding-bottom: 5px; width: 20%}

p  { font-size: 1.5em TitilliumWeb-Regular, Verdana, Arial, Helvetica, sans-serif; margin: 0 0 0px; padding: 0 }
p.rot  { color: red; padding-top: 20px} 
ul    { text-align: left; list-style-type: none }
li     { display: inline }
a  { color: #fff !important; text-decoration: none !important; outline: none medium !important; cursor: pointer !important}
a.nav-link {color: var(--dunkeltuerkis) !important;  font-family: 'AgencyFB-Bold' !important;}
a:hover   { color: #9fc41f !important; text-decoration: none !important; }



h1  {font: 2.5em/1.2em AgencyFB-Bold, Verdana, Arial, Helvetica, sans-serif !important; color: #004556; text-transform: uppercase; margin-top: 50px; padding: 0; padding-bottom: 20px }
h1.va  {font-size: 3em; font-family: AgencyFB-Bold, Verdana, Arial, Helvetica, sans-serif !important; color: #fff; text-transform: uppercase; margin-top: 10px; padding: 0; text-align: left !important;}

h1.start  {font-size: 1.5em !important;}
h1.va.start  {font-size: 1.5em !important; }
h2.va  {font-size: 2.5em !important; font-family: 'Agency-FB-Condensed'; margin-bottom: 20px !important;}


h2.start  {font-size: 1.5em !important; margin-bottom: 0px !important; margin-top: 0px !important;  }
h3.start  {font-size: 1.2em !important; margin-top: 0px!important; margin-bottom: 10px !important; color: #fff !important ; font-family: TitilliumWeb-Regular !important ;   }

h3 a {font-size: 16px}

h3.sub  {font-weight: 700; margin-top: 30px }

p.programmtext {margin-bottom: 10px}
p.gast  {font-weight: 700; margin-bottom: 30px; text-transform: uppercase }
.gast a {width: 200px; display: block;}

.ot_typ {font-family: TitilliumWeb-Bold !important;color: var(--hellgruen) !important; text-transform: uppercase; margin-top: 10px; padding: 0; padding-bottom: 20px; font-size: 22px}
h2  { color: #fff  ; font-size: 1.5em !important; font-family: TitilliumWeb-Bold; margin-top: 0px !important;  line-height: 1.2em; margin-bottom: 15px !important;  padding: 0; text-transform: uppercase; display: block}
h2.mt-20 {margin-top: 20px !Important; }

h2.subline {display: block; text-transform: uppercase !important; margin-bottom: 40px !important; color: var(--hellgruen); font-size: 1.9em !important; margin-top: 60px !important; text-align: center; font-family: AgencyFB-Bold, Arial, Helvetica, sans-serif;}
h2.card-title {display: inline-block; text-transform: uppercase !important; margin: 0px auto 40px auto !important; background-color: var(--hellgruen); color: var(--dunkeltuerkis); font-size: 1.9em !important; text-align: center; font-family: AgencyFB-Bold, Arial, Helvetica, sans-serif; padding: 5px 10px; }


hr {
  
    border-top: 1px solid var(--hellgruen) !important;

}


.card-body {text-align: center !important;}


.monat {background-color: #fff !Important; color: var(--dunkeltuerkis); padding-left: 10px; padding-right: 10px; }

blockquote {text-align: center !important;}


/* Accordion allgemein */
.accordion-item {
    background-color: rgba(255,255,255,0.1) !important;
   
    border-radius: 0 !important;
    overflow: hidden !important;
}

/* Aktiver Button (geöffnet) */
.accordion-button:not(.collapsed) {
    color: #fff !important;
    background-color: var(--dunkeltuerkis);
    font-weight: bold;
Border: 0px;
 Border-bottom: 1px solid var(--tuerkis);
    opacity: 1; /* volle Deckkraft bei aktivem Button */
}

/* Inaktive Buttons */
.accordion-button.collapsed {
    background-color: var(--dunkeltuerkis);
    color: #fff !important;
    transition: background-color 0.3s ease;
Border: 0px;
border-bottom: 1px solid var(--tuerkis);
}


.accordion-item h2 {margin-bottom: 0px !important; font-family: 'AgencyFB-Bold' !important; text-transform: uppercase; }

/* Allgemeiner Button-Stil */
.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.8em;
    font-size: 1.7rem;
    text-align: left;
    border: 1px solid var(--tuerkis);
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.6);
    color: var(--dunkeltuerkis) !important;
    transition: background-color 0.3s ease, opacity 0.3s ease;
text-transform: uppercase;
}


.accordion-button:focus {
  box-shadow: none;
  outline: none;
}


/* Pfeil-Symbol */
.accordion-button::after {
    content: "";
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    margin-left: auto;
    background-image: url('/img/open-close-white.svg');
    background-repeat: no-repeat;
    background-size: 2rem;
    transition: transform 0.3s ease;
}

/* Pfeil nach oben bei aktivem Button */
.accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}

/* Panel-Inhalt */
.accordion-body {
    background-color: rgba(255,255,255,0) !important;
    color: #fff !important;
    padding: 2rem;
    border-top: 0px solid #ddd;
}


.accordion-body .col-md-6 {
        -ms-flex: 0 0 60% !important;
        flex: 0 0 60% !important;
        max-width: 60% !important;
    }



h3  { font-size: 1.5em !important;   font-family: TitilliumWeb-Regular;  line-height: 1.2em; text-transform: uppercase; margin: 0 0 8px; padding: 0; color: #fff !important;  }
h3.rubriken { font-weight: normal !important; font-weight: 0.9em }
h3#rubriken_auswahl {margin: 0px !important; font-size: 1.1em  }
h4  { color: #646464; font-size: 0.8em; line-height: 1em; text-transform: uppercase; margin-top: 0; margin-right: 0; margin-left: 0; padding: 0 0 10px      }
h6 {padding: 0; margin: 0; font-family: TitilliumWeb-Regular, Arial, Helvetica, sans-serif;font-size: 10px; text-transform: uppercase }
.rot{color: red;font-weight: bold;}
.schwarz{color: #000000;}

#wrapper { text-align: left; width: 985px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: inset; border-bottom-style: ridge; border-left-style: ridge; border-top-color: #EEEEEE; border-right-color: #EEEEEE; border-bottom-color: #EEEEEE; border-left-color: #EEEEEE; margin: 15px auto 0; height:100%; }






/*Branding*/
.branding {
    padding: 0;
}

.branding .container {
    display: flex;
    justify-content: space-between; /* Platzierung: links und rechts */
    align-items: center; /* Vertikale Zentrierung */
}

.navbar-brand-logo img, 
.navbar-brand img {
    max-height: 80px; /* Höhe der Logos, anpassbar */
    height: auto;
    width: auto; /* Proportionen beibehalten */
}

.navbar-brand {padding-bottom: 0px !important;}




/*Suchmaske*/

.suchmaske {
    background-color: var(--dunkeltuerkis);
    padding: 20px;
    border-radius: 5px;
    margin: 20px 0;
}

.suchmaske .form-label {
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.suchmaske .form-control {
    padding: 0px 10px 0px 10px !important;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.col-md-2 {
    flex: 0 0 22%; /* 22% Breite */
    max-width: 22%;
}

.col-md-1 {
    flex: 0 0 12%; /* 12% Breite für das Icon */
    max-width: 12%;
}

.btn-icon {
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
background-color: var(--tuerkis);
border: 0px solid;
}




/* Navigation Styles */



.bg-dark {background-color: #004556!important}

.navbar {
    background-color: #fff;

}


.navbar-dark .navbar-toggler {
    color: #fff !important;
background-color: #004556!important;
    border-color: rgba(255,255,255,1) !important;
border: 0px solid transparent !important; padding: 10px 15px !important;
}


.navbar-nav {
    display: flex;
    flex-direction: row; /* Horizontale Anordnung der Links */
    align-items: center;
}

.navbar-nav .nav-item {
    margin-right: 15px; /* Abstand zwischen den einzelnen Navigationspunkten */
}

.navbar-nav .nav-link {
    color: #fff;
    font-size: 16px;
    padding: 10px 15px;
    text-decoration: none;
Text-transform: uppercase !important;
}

.navbar-nav .nav-link:hover {
    color: #ffcc00; /* Beispiel Hover-Farbe */
}

/* Container für Suche und Social Media Icons */
.d-flex {
    display: flex;
    align-items: center;
}

/* Anpassung der Suche */
#suche {
    display: flex;
    align-items: center;
}

.sufield {
    padding: 5px;
    font-size: 14px;
    width: 200px;
}

.subutton {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.subutton i {
    font-size: 18px;
}

/* Social Media Icons */
#fblogo {
    font-size: 18px;
    color: #fff;
}

#fblogo a {
    margin-left: 10px;
    color: #fff;
    text-decoration: none;
}

#fblogo a:hover {
    color: #ffcc00;
}

/* Responsive Anpassungen */
@media (max-width: 991px) {
    .navbar-nav {
        flex-direction: column; /* Vertikale Anordnung der Links auf kleineren Bildschirmen */
        margin-top: 10px;
    }

    #suche {
        margin-top: 10px;
        width: 100%;
    }

    .sufield {
        width: 100%; /* Suche passt sich der Breite des Containers an */
    }
}





.infobox {background-color: #d8e4d6; padding:10px; margin-bottom: 30px; }

.newsbild a {margin: 0 auto !important}



.rubrik-box {margin-top: 40px !important}


.kuenstler_tab h2 {height: 40px}

.kalender {padding-left: 0px !important}

.bggrey {background-color: #eee !important; padding-top: 5px; padding-bottom: 5px}
.column-1 {float: left}

.glossar {width: 813px; margin: 0 auto;}

.col-rubriken {float: left }

.alphabetabstand, .alphabetabstandakt {
    margin-right: 15px !important;
    width: 2% !important;
    display: block !important;
    float: left !important;
}


.mt-9 {margin-top: 200px; height: 400px;}

.glossar {display: block; min-height: 50px}


/* Header fixieren und volle Breite erzwingen */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;     /* alternativ: width: 100%; */
  z-index: 1050; /* über allem */
}

/* Optional: hübscher Schatten, damit es nicht “klebt” */
header {
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

/* Platz unter dem fixed Header schaffen, damit nichts überdeckt wird */
body.has-fixed-header {
  /* Höhe anpassen (siehe JS unten) */
  padding-top: 240px;
}

body { padding-top: 240px; } /* auf deine echte Header-Höhe anpassen */


.newsline  { width: 200px; height: 0px; margin-left: 10px; }
.newsline p  { font-family: "Courier New", Courier, Monaco, monospace; color: #fffb00; font-size: 1em ; padding-top: 13px; padding-left: 15px; }
.newsheader { font-weight: bold ; letter-spacing: 0.1em; margin-right: 6px }
.newsheader a  { color: red; text-decoration: none;  }
#subheader  { width: 985px; height: 60px }
#subheader ul{  }
#subheader li  { display: inline }
#subheader li.cards { margin-left: 30px; }
#subheader li.humorzone { margin-left: 40px;  margin-top: 15px;  border: solid 1px; border-color: black; }
#subheader li.openair { margin-left: 140px;  margin-top: 15px;  border: solid 1px; border-color: black; }
#subheader li.logo { margin-left: 135px; }

#subheader1  { width: 985px; height: 92px; padding-top: 10px; float: left; }
#subheader1 ul{  }
#subheader1 li  { }
#subheader1 li.humorzone { margin-left: 40px; }
#subheader1 li.openair { margin-left: 70px; }
#subheader1 li.newsline { margin-left: 120px; }
#subheader1 li.logo { margin-left: 120px; }

.hover-image-container   { display: inline-block; margin-top: 0; height: 79px; overflow: hidden }
.hover-image-container:hover img   { margin-top: -79px;  }



#navi { width: 983px; height: 24px; float: left; border-right: 1px solid #eee; border-left: 1px solid #eee; }

#menue { width: 804px; float: left; }
#menue ul{ margin-top: 2px; margin-left: 20px; }
#menue li  { color: #b1c800; font-size: 15px; font-family: TitilliumWeb-Regular, Arial, Helvetica, sans-serif; text-transform: uppercase; margin-right: 20px; display: inline; }
#menue li.nl  { font-size: 0.6em; }
#menue li a  { color: #006178; text-decoration: none; outline: none 0  }
#menue li a:hover  { color: #9fc41f; text-decoration: none; outline: none 0  }
#menue li.active a  { color: #9fc41f }
#menue li.active a:hover  { color: #004556}
#suche{ width: 210px; float: left; margin-top: 0px; margin-right: 20px }
#suche input.sufield { color: #888; font-size: 0.9em; width: 170px; padding: 0px 5px 1px 5px; border: solid 1px; height: 35px}
#suche button.subutton          { color: #006178; font-size: 1.3em; background-color: white; letter-spacing: 0.1em; margin-left: 6px; cursor: pointer; outline-style: none; outline-color: white; }

.fa-facebook-square, .fa-instagram-square  { color: #006178; font-size: 1.4em; }
.fa-instagram-square {margin-left: 10px !important; }
#suche input.subutton:hover   { color: #000 }


#aktuell p {}

#newsletter  {  }
#newsletter h1{ margin-bottom: 20px }
#newsletter p{ width: 550px }
.lc  { width: 100px }
.rc  { width: 100px }
.sp      { height: 14px }
#newsletter table  { padding: 10px   }
fieldset         { background-color: #9fc41f; margin-top: 20px; padding-left: 10px; width: 312px }
#newsletter input                    { color: #333; background-color: #fff; letter-spacing: 0.15em; padding: 3px;}
label       { font-size: 0.7em; margin-left: 15px }
#newsletter input.senden                 { color: #fff; background-color: #2e751f; cursor: pointer; margin-top: 20px; width: 160px; height: 30px; margin-bottom: 20px; }
#newsletter input.senden:hover            { color: #fff; background-color: #9fc41f ; }

#sicherheit  {  }
#sicherheit h1{ margin-bottom: 20px }
#sicherheit p{ width: 500px }
.lc  { width: 70px }
.sp      { height: 14px }

.flex-container {
  display:flex !important;
}


.inhalt  { background-color: #f9ebc7; }
#links_mitte  { width: 760px; float: left }
#links { margin-right: 40px; float: left; margin-bottom: 40px;}
#mitte_oben { height: 80px; }
#rechts { float: left; width: 185px; }
#termin_unter { margin-top: 10px; }
.presse_unter { margin-bottom: 10px;   }
.clearer { clear: both }
.drittel_tab { float: left; width: 200px; min-width: 200px; }

.linkabstand { margin-left: 3px; }
.alphabetabstand { margin-right: 15px; }
.alphabetabstandakt { margin-right: 15px; color: #b1c800; font-size: 1.2em; font-weight: bold }
.linkabstand_r { margin-right: 10px; }
.strich_vertikal  { background-image: url(../../../bilder/abteil_strich.gif); background-repeat: no-repeat; float: left }
.strich_horizontal { height: 2px; border-top-color: #dcd1b3; border-top-width: 10px; border-top-style: solid }
.pfeil_strich { margin-right: 5px }
#rechts .news { margin-bottom: 12px }
#inhalt .kuenstler_tab { margin-bottom: 20px; margin-top: 10px }
#inhalt .werbung { margin-bottom: 50px; }

#links_mitte_oben { height: 70px }
#links_mitte_oben .gruen { line-height: 25px }

.abstand_kuenstlerliste { margin-bottom: 10px }
.kuenstler_bild {  margin-bottom: 10px; width: 100%; border: none }
.humorzone_bild {  margin-bottom: 10px; max-width: 325px; border: none }


.alphabetabstand, .alphabetabstandakt {
    margin-right: 15px !important;
    width: 2% !important;
    display: block !important;
    float: left !important;
}

.mb-10 {width: 100% !important; display:block !important;}

.ticket-links {
   
    width: 100% !important;
}


a.nav-link { font-family: 'AgencyFB-Bold';  font-size: 1.5em !important;}

.mehr {  margin-bottom: 20px; margin-top: 20px; font-weight: bold; display: block }
#inhalt table { border-top-color: #98917e; border-right-color: #98917e; border-bottom-color: #98917e; border-left-color: #98917e }

#kalender_box { background-color: #eee; padding: 10px }
#kalender_box table { border-spacing:0; border-collapse:collapse; width: 100%}
#kalender_box td, th { border:solid 1px #006178; text-align:left; vertical-align:bottom; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 2px }
#kalender_box .kalendertabelle p { font-family: TitilliumWeb-Regular, Arial, Helvetica, sans-serif; font-size: 17px; color: #006178; padding: 0; margin: 0; font-style: normal; font-weight: normal; font-variant: normal; line-height: 13px }
#kalender_box p.kal_keinlink { color: #9d9c8f }
#kalender_box p.kal_aktiv { color: #fff }
.kalendertabelle  { margin-bottom: 10px; background-color: #fff }
.kalendertabelle td .kal_aktiv { display:block; width:100%; height:100% }
.kalendertabelle td a { display:block; width:100%; height:100% }
td .kal_keinlink { display:block; width:100%; height:100%; color: #c00 }
.kalender_balken { font-family: TitilliumWeb-Regular, Arial, Helvetica, sans-serif; font-size: 11px; background-color: #006178; letter-spacing: normal; text-align: right; vertical-align: baseline; height: 11px; width: 201px; color: #fff; padding-right: 5px }

#rechts .rubriken { margin-bottom: 12px }
#rubriken_auswahl { }
#auswahl_rubrik  { color: white; background-color: #22742c; margin-bottom: 12px;  margin: 5px auto; z-index: 10; width: 100%; padding: 10px; }
#auswahl_kuenstler  { color: white; background-color: #22742c; background-image: url(../../../bilder/pfeil_rubrik.gif); background-repeat: no-repeat; margin-bottom: 12px; margin-left: -20px; z-index: 10; height: 12px }
#auswahl_termin  { color: white; background-color: #22742c; background-image: url(../../../bilder/pfeil_rubrik.gif); background-repeat: no-repeat; margin-left: -20px; z-index: 10; height: 12px }

.ticket { margin-top: 10px; text-align: left }
.ticket_bild { float: left }
.ticket_text  { float: left; margin-left: 20px; width: 250px }
.ticket_text h4  {  }
.special { color: red }
.fett  { font-family: 'TitilliumWeb-Bold'; }
.booking .pressebox .textlinks li a {color: #fff !important;}
.pressebox { padding: 10px; border-top: 1px solid var(--hellgruen); color: #fff; margin-top: 50px }
.presse { font-family: 'TitilliumWeb-Bold'; display: block; padding-bottom: 10px; }
.spezial  { color: var(--hellgruen); font-family: TitilliumWeb-Bold; text-transform: uppercase; margin-top: 20px }
.spezial_gruen  { color: #0c3; font-weight: bold }
.untertitel {  font-style: italic; margin-top: -5 px; }
.humorzone_special  { color: #c00; font-weight: bold ; padding-top: 5px;}
.humorzone_special_gruen  { color: #0c3; font-weight: bold ; padding-top: 5px;}


.font-size-2 {font-size: 2rem !important;}
.ticket_text td     { } 
.ticket_text h3     { font-size: 0.9em; line-height: 1.4em; text-transform: uppercase; width: 230px } 
.ticket_text h4      { font-size: 0.75em; line-height: 1.5em; letter-spacing: 0.05em; width: 220px   }
.ticket_datum    { margin-top: 3px; margin-left: 20px; width: 450px; float: left }
.ticket_strich { margin-top: 10px }
.ticket_datum_string     { font-size: 1.5em; font-weight: bold; line-height: 1.2em; text-transform: uppercase; margin-top: -1px; margin-bottom: -10px;  font-family: 'TitilliumWeb-Bold';  }
.ticket_datum_string a {font-weight: normal !important; color:  var(--dunkeltuerkis) !important;}
.ticket_ort_string      { font-size: 1.2em; line-height: 1.1;  font-family: 'TitilliumWeb-Regular';  text-transform: uppercase; color:  var(--dunkeltuerkis) !important; letter-spacing:0.5px; margin-top: 10px !important;  }
p.ticket_ort_string      {  }
.ticket_ticketbutton { margin-top: 25px }

iframe { margin-top: 20px }
#bild { background-color: #d43547; float: left }

#toptermingruppe {border: solid 1px #9fc41f; padding-right: 30px; width: 100%;}
#toptermingruppe ul { list-style-type: none; padding-top: 10px; padding-bottom: 5px; padding-left: 30px }
#toptermingruppe ul li { line-height: 1.2em; margin-bottom: 8px ; display: block; }
#toptermingruppe .tag {  }
#toptermingruppe .sicherheitslink { margin-top: 14px ; text-transform: uppercase }
#toptermin .restkarten {}
#toptermin     { margin-top: 30px;  border: solid 1px #9fc41f; font-size: 1em; padding: 20px;  font-family: 'TitilliumWeb-Regular';}
#video {margin-top: 20px; padding-left: 20px; padding-bottom: 20px;   border: solid 1px #becf24; position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio (Verhältnis) */
  overflow: hidden;  }



#video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
Margin-top: 0px !important;
}


#toptermin ul {margin-top: 0px; margin-bottom: 0px; margin-left: 0px; list-style-type: none; }
#toptermin ul li {line-height: 1.5em; margin-bottom: 4px ; display: block; }

#toptermin .tag, #termine .tag { font-size: 1.2em; text-transform: uppercase; display:block !important; text-align: left; margin-right: 10px; width: 100%  }
.booking .einzeltermin .datum-wrapper .tag { font-size: 1.2em !important; text-transform: uppercase; font-family: 'TitilliumWeb-Bold' !important; width: 35px !important; display:block; float: left !important; text-align: right; margin-right: 10px  }


#toptermin, #termine .veranstaltungsseite .ort, #toptermin .veranstaltungsseite .ort     { margin-top: 30px;  border: solid 1px #9fc41f; font-size: 1em; padding: 20px;  font-family: 'TitilliumWeb-Regular';}




#termine .ort, #toptermin .ort  { font-size: 1.2em; text-transform: uppercase; 
word-wrap: break-word;   /* ältere Schreibweise */
  overflow-wrap: break-word; /* moderne Variante */
  white-space: normal;     /* erlaubt Zeilenumbrüche */  }
#termine .programm { font-size: 1.4em; text-transform: uppercase; font-family: 'TitilliumWeb-Bold'; padding-bottom: 10px }
#toptermin .sicherheitslink {margin-top: 14px ; text-transform: uppercase}

#termine .datum-und-programm .programm, #termine .programm {
  white-space: wrap !important;
  overflow: hidden;
  text-overflow: ellipsis !important;
  font-weight: 600; /* falls du es etwas hervorheben willst */
width: 200px
}







#text  {    border-right: 1px dotted #bcbcbc }
#text h1 { color: #646464; font-size: 1.5em; font-weight: normal; line-height: 1.3em; margin-top: 12px; margin-bottom: 8px }
#text h2 { color: #000; font-size: 0.8em; line-height: 1.5em; margin-bottom: 10px; }
#text h4 { color: #9d9c8f; font-size: 0.9em; text-transform: uppercase; margin-top: 0; margin-bottom: 0 }
#text ul { list-style-type: none; margin-left: 0; padding-left: 0 }
ul.andere  { margin-bottom: 0px !important; }
#text ul li { font-size: 0.7em; line-height: 1.4em; text-transform: uppercase; margin-bottom: 3px ; display: block; }
#text .website       { margin-bottom: 8px }

#text p    { font-size: 0.7em; margin-bottom: 13px; padding-right:30px }
#player {}

#textgruppe h1      { color: #646464; font-size: 1.5em; font-weight: normal; line-height: 1.3em; margin-top: 10px; margin-bottom: 12px }
#textgruppe h2      { font-size: 0.9em; margin-top: 0 }
#textgruppe h4      { color: #9d9c8f; font-size: 0.9em; text-transform: uppercase; margin-top: 0; margin-bottom: 0 }
#textgruppe ul      { list-style-type: none; margin-left: 0; padding-left: 0 }
#textgruppe ul li      { font-size: 0.7em; line-height: 1.4em; text-transform: uppercase; margin-bottom: 3px }
#textgruppe .website       { margin-bottom: 8px }
Ul li.website {float: none}
#textgruppe p    { font-size: 0.7em;  line-height: 1.5em; margin-bottom: 13px; padding-right:30px }

#strich   { float: left }
#strich img   { background-repeat: no-repeat }
#termine       { width: 100%; float: left }
#termine h3       { font-size: 1.3em; text-transform: uppercase; margin-top: 0; margin-left: 38px }
#termine ul     { margin-top: 10px; margin-left: 38px; list-style-type: none; width: 100%; padding-top: 20px; border-top: 1px solid #c8d419;  }
#termine ul.programme     { margin-top: 10px; margin-left: 38px; list-style-type: none; width: 100%; padding-top: 0px !important; border-top: 0px solid !important;  }

/*#termine ul li      { font-size: 0.9em; line-height: 1.4em; text-transform: uppercase; margin-bottom: 3px ; display: block }*/

#termine ul li {display:flex !important;}
#termine img    { margin-top: 2px }



#termine li.artgast { font-size: 0.9em; text-transform: capitalize; padding-top: 10px; font-weight: bold; }

.textlinks a {font-size: 1em !important;}


.footerhome {padding-top: 0.9rem !important; padding-bottom: 0.8rem !important; color: #fff !important;}
.footerhome a { color: #fff !important; text-decoration: none !important; outline: none medium !important; font-size: 0.9em !important;}

#footerhome ul   { text-align: left; margin-top: 10px; }
.footerhome li     { color: #fff; font-size:0.9em ; display: inline }
.footerhome li.active a, .footerhome li.active  { text-decoration: underline !important;  font-size: 0.9em  !important;}
#footerhome li.active a:hover  { color: #004556}

.mb-10 {margin-bottom: 10px}

/*Buttons*/

.restkarten {
margin-top: 0px;
}
.karten,
.restkarten {

    margin-right: 10px; /* Abstand nach rechts */
}

.ticket-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.karten:last-child,
.restkarten:last-child {
    margin-right: 0; /* Entfernt den Abstand beim letzten Link */
}

.inkuerze {background-color: #fff !important; padding: 10px; color: #009cb4 !important; line-height: 1 !important; height: 50px; width: 100%; justify-content: center;
    align-items: center; display: flex !important;}

.kuenstlerinfo a, .karten a, .karten.only a {background-color: #004556!important; color: #fff !important;  }
.kuenstlerinfo a {margin-top: 30px;}
.karten a:hover, .kuenstlerinfo a:hover, .karten.only a:hover  { background-color: #c8d419 !important;  color: #004556!important;}

.karten.portal a {padding: 10px; width: 100%; display:flex; height: 50px }
.karten a { height: 50px; width: 100%; justify-content: center;
    align-items: center; display: flex}
.karten.only a {height: 50px; width: 100%; justify-content: center;
    align-items: center; display: flex}
.karten.ausverkauft a {width: 100% }

.uppercase {text-transform: uppercase !important; display: block}


.stage-header {
  width: 100%;
  height: 500px; /* Höhe nach Geschmack */
  background-size: cover;
  background-position: center;
  position: relative;
}

.stage-overlay {
  position: absolute;
  inset: 0;
  
}


.back-link {
 Text-transform: uppercase;
  font-family: 'AgencyFB-Bold' !important; font-size: 1.1em !important;
  text-decoration: none;
Float:right;
    background-color: var(--hellgruen);
    color: var(--dunkeltuerkis) !important;
Padding: 5px 10px;
Display: flex;
}

.back-link:hover {
 
  color: #000  !important;
}



.billet, .nobillet a, .restkarten a, .tooltip-ausverkauft, .button-more a, .kuenstlerinfo a, .karten a  { font-size: 1em !important; text-transform: uppercase !important; letter-spacing: 0.1em; margin-bottom: 2px !important; font-family: 'AgencyFB-Bold' !important; display: block; text-align: center;    }

.restkarten a {background-color: var(--hellgruen) !important; padding: 10px; width: 100%; display:flex; height: 50px; gap: 10px; align-items: center;  }
.restkarten a:hover  { background-color: #000 !important; width: 100% !important; }

.lastbillet           { color: #ff1c00 }
.nobillet           { color: #ff0 }

.lastbillet:hover           { color: #c8d419 !important; }


/*Buttons*/



.button-more a {margin: 0 auto !important;  background-color: var(--hellgruen) !important; color: #fff !important; padding: 5px 10px; margin-top: 30px !important; margin-bottom: 100px !important;  font-size: 1.3em !important; display: inline-block !important; }


.page.container {margin-top: 200px !important}

/*Bookingseite*/
#buchung .button-more a {margin: 0 auto !important;  background-color: var(--hellgruen) !important; color: var(--dunkeltuerkis) !important; padding: 5px 20px;  margin-top: 30px !important; margin-bottom: 100px !important;  font-size: 1.5em !important; }
.einzeltermin .ort { font-size: 1.4em !important;  
word-wrap: break-word;   /* ältere Schreibweise */
  overflow-wrap: break-word; /* moderne Variante */
  white-space: normal;     /* erlaubt Zeilenumbrüche */  }
.booking .karten.portal {border: 1px solid #fff}
.booking .karten a {margin-bottom: 0px !important}
.booking h1 {margin-top: 257px !important; font-size: 48px !important; color: #fff !important;}
.booking .ausverkauft {text-transform: uppercase !important; font-family: 'AgencyFB-Bold' !important; font-size: 1.9em !important;}
.booking-link.read-more {margin-top: 40px; margin-bottom: 40px}
.booking-link {font-size: 1.6em; display: flex; font-family: 'AgencyFB-Bold' !important; text-transform: uppercase; align-items: center }
h1.booking {text-align: left !important; margin-top: 30px !important; font-size: 48px !important; color: #fff !important;}
.booking .intro {text-align: center !important; font-size: 1.5em !important; display: block}
.booking .tooltip-ausverkauft { background-color: #fff !important; padding: 10px; font-size: 0.9em !important; text-transform: uppercase !important; letter-spacing: 0.1em; margin-bottom: 2px !important; font-family: 'AgencyFB-Bold' !important; display: block; text-align: center;    }
.booking h2.title {text-align: center ; font-size: 2.3em !important; font-family: 'AgencyFB-Bold' !important; margin-bottom: 40px !Important; }
.jahresueberschrift {text-align: center ; font-size: 2em !important;  display: block;  font-family: 'AgencyFB-Bold' !important; padding: 20px}
.col-3.tag {width: 20% !important; text-align: right; flex: 0 0 20%}
.booking .monat {text-transform: uppercase; font-size: 1.2em; font-family: 'TitilliumWeb-Bold'; }
.booking .tag .tag {font-size: 1em !important;}
/* Grundlayout */

.einzeltermin {
  display: flex;
  flex-wrap: wrap;
width: 100%; gap: 1rem; border-bottom: 1px solid #ddd; padding-bottom: 12px;
}

.einzeltermin > .col-left {
  flex: 1 1 50%;
  max-width: 50%;
  box-sizing: border-box;
}


.einzeltermin > .col-middle,
.einzeltermin > .col-right {
  flex: 1 1 25%;
  max-width: 25%;
  box-sizing: border-box;
}
.einzeltermin .col-middle { min-width: 0; align-items: flex-start !important;}

.col-left .date-col,
.col-left .programm {
  flex: 1 1 50%;
  max-width: 50%;
  box-sizing: border-box;
}

/* Linke Seite: Datumsblock + schmale Status-Spalte */



.datum-wrapper .wochentag {text-transform: uppercase !important; display:block; width: 45px; font-size: 1.2em !important; float: left; font-family: 'TitilliumWeb-Bold'; }
.einzeltermin .datum-wrapper { white-space: nowrap; /*font-family: 'AgencyFB-Bold' !important;*/ font-size: 1.2em !important;}
.einzeltermin p { margin-bottom: .25rem; }
.pt-6 {padding-top: 6rem !important;}
.pb-6 {padding-bottom: 6rem !important;}
#buchung h2.title {color: var(--dunkeltuerkis) !important;}

/* Status-Badges kompakt */
.status-badge {
  display: inline-block;
  padding: .15rem .4rem;
  border-radius: 0rem;
  font-size: 0.9rem;
  line-height: 1.1;
 Width: 140px;
word-wrap: break-word;   /* ältere Schreibweise */
  overflow-wrap: break-word; /* moderne Variante */
  white-space: normal;     /* erlaubt Zeilenumbrüche */
}
.status-badge.spezial { background:#c8d419; color:var(--dunkeltuerkis); margin-top: 0px}
.status-badge.spezial_gruen { background:#c8d419; color:#006b1b; }

.status-col {
  min-width: 150px; /* Breite nach Bedarf */
  text-align: left;
}

.status-placeholder {
  display: inline-block;
  height: 1em; /* sorgt für Mindesthöhe */
  visibility: hidden; /* unsichtbar, aber nimmt Platz ein */
}


/* Tickets mittig: kein Zeilenbruch, damit rechte Spalte nicht runter rutscht */
.einzeltermin .ticket-row { overflow: hidden; }
.einzeltermin .ticket-links .karten { display: inline-flex; }

/* Responsiv */

/* === Responsive Variante (untereinander) === */
@media (max-width: 768px) {
  .einzeltermin {
    flex-direction: column;
display: flex !important;
justify-content: flex-start !important;
align-items: flex-start !important;
  }

#termine .programm {width: 100% !important; }

.ort {margin-bottom: 20px !important; }

  .einzeltermin > .col-left,
  .einzeltermin > .col-middle,
  .einzeltermin > .col-right {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Innerhalb von col-left sollen date-col und programm auch untereinander laufen */
  .col-left {
    flex-direction: column;
  }

  .col-left .date-col,
  .col-left .programm {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
  }
}



.btn-primary { font-size: 1.5em !important; text-transform: uppercase !important; letter-spacing: 0.1em; margin-bottom: 2px !important; font-family: 'AgencyFB-Bold' !important; display: block; text-align: center; background-color: var(--dunkeltuerkis); border: 0px solid  }


/* Abstand zwischen den Spalten mit gap */
.booking .row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Hier kannst du den Abstand zwischen den Spalten anpassen */
justify-content: stretch;

}

.booking .row.center {
   
justify-content: center !important;

}


.programme .karten.portal {margin-bottom: 20px !important;}



.aktuelle-programme {font-size: 1.2em !important; text-transform: uppercase }

.maske-bild {
    width: 100%;
    height: 0;
    padding-top: 100%; /* Das macht das Bild quadratisch */
    position: relative;
    overflow: hidden;
}

.maske-bild img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover; /* Stellt sicher, dass das Bild immer das Container-Verhältnis ausfüllt */
}

.booking .col-lg-3, .booking .col-md-6, .booking .mb-4 {
    padding: 0; /* Entfernt den inneren Abstand, um die Bilder exakt anzupassen */
Bottom: 0px
}




/* CSS for the tooltip */

#toptermin .tooltip-ausverkauft {
 Margin-top: 20px !important;
}

.programme .tooltip-ausverkauft {
 Margin-bottom: 20px !important;

}

ul.programme {border-bottom: 1px solid #fff}


.tooltip-ausverkauft {
  position: relative !important; 
font-size: 1.5em !important; 
 Display:flex !important; background-color: #fff !important;  font-weight: bold; text-transform: uppercase !important; letter-spacing: 0.1em;padding-left: 9px; margin-bottom: 2px; font-family: 'AgencyFB-Bold' !important; text-align: center !important; color: #ff0000 !important;  height: 50px !important; width: 100%; justify-content: center;
    align-items: center;
}

.tooltip-ausverkauft:hover {}

.tooltip-ausverkauft .tooltiptext {
  visibility: hidden;
font-size: 0.8em !important;
Line-height: 1em !Important;
  width: 220px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  z-index: 1;
top: 125%;
  left: 20%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
text-align: left !important;
    font-family: 'TitilliumWeb-Regular';
}

.tooltip-ausverkauft:hover .tooltiptext {
  visibility: visible;
  opacity: 1;

}



.col-sm-6 {width: 100%;
   
}




.text-left.my-4 .col-sm-6 {width: 50%;
   
    flex-wrap: wrap !important;
	align-items: stretch;

    padding-bottom: 0.5em;
}

/* Dropdown Button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}

/* The search field */
#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

/* The search field when it gets focus/clicked on */
#myInput:focus {outline: 3px solid #ddd;}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}


.back-to-top {
 background:#fff;

 position: fixed;
 bottom:20px;
 right:20px;
 padding:1em;
 z-index: 100;
}
.fa-arrow-up:before {
    color: #006178;



}

.descr {font-family: 'TitilliumWeb-Bold'; text-transform: uppercase; font-size: 14px}

.formcontainer .col-md-4  {padding-left: 0; padding-right: 20px}
.formcontainer .col-md-4 img {margin-right: 20px; margin-bottom: 10px}

.formcontainer {display:flex}

.formular h1 {font-size: 50px !important; margin-top: 70px; margin-bottom: 70px}
.formular .col-md-3 label, .formular .col-md-6 label {padding-left: 0px !important;}
.formular .col-md-12 label {padding-left: 20px}
.formular .col-md-12 .form-control  {margin-left: 15px}
.formular .col-md-3 .form-control  {margin-left: 0px}
 .formular .col-md-6 .form-control  {margin-left: 0px}



.formular select {
-webkit-appearance: none; 
-moz-appearance: none;
appearance: none;

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 0px;

margin-left: 0px;
background-position: 98% center;
background-color: #fff !important;
color: #000000;
border: 1px solid #fff;
padding: 5px;
width: 200px;
}


.lb-number {
  display: none !important;
}


.anmerkung {font-weight: normal !important; font-size: 14px !Important;}


#buchung {text-align: center}
.form-check {margin-top: 30px !Important;}
.formular label {font-size: 16px; margin-left: 0px; margin-top: 30px !Important;}
.formular label.form-check-label {margin-top: 0px !Important;}
.red {color: red; text-transform: uppercase; font-weight: bold}
 a.download {background-color: red; color: #fff !important; display: block; padding: 10px; font-size: 16px; width: 100%; font-weight: 800 }
.required {margin: 20px; display:block}
.formular button {margin-top: 30px; margin-bottom: 80px; background-color: #004556; border: none; text-transform: uppercase; padding: 10px; font-weight: 700}
.formular button:hover {color: #004556; background-color: #fff;}

.formular {
    background-image: url('../img/lisa-eckhart-formular.png');
    background-repeat: no-repeat;
    background-size: auto; /* Falls nötig, um die Bildgröße zu erhalten */
    background-position: right bottom; /* Standard für größere Bildschirme */
    background-blend-mode: multiply;
background-color: var(--tuerkis); 
}





.pressebox { margin-top:2rem; }
.presse.uppercase {font-size: 1rem !important; color: var(--tuerkis); background-color: var(--dunkeltuerkis); padding: 5px 10px; margin-bottom: 30px}
.pressebox .label {text-transform: uppercase !important; font-family: 'TitilliumWeb-Bold'}
.pressegrid { display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 0; padding:0; list-style:none; }
.pressegrid li { width:100%; }
.pressegrid a { display:block; text-decoration:none; }
.pressegrid img {
    display:block;
    width:100%;
    height: auto;
    object-fit:contain;   /* zeigt das komplette Bild in die Box eingepasst */
    object-position:bottom; /* am unteren Rand ausrichten */
    Background:transparent;   /* optional: Hintergrundfarbe, damit "Ränder" nicht weiß-transparent sind */
    border-radius:.5rem;
}
.pressegrid .label { display:block; font-size:.8rem; line-height:1.2; margin-top:.35rem; color:var(--dunkeltuerkis); text-transform: uppercase !important;}
.textlinks .label { display:block; font-size:.8rem; line-height:1.2; margin-top:.35rem; color: #fff; text-transform: uppercase !important;}
ul.textlinks.dunkeltuerkis { margin-top:.5rem; text-transform: uppercase !important; }
.pressebox.dunkeltuerkis a {text-transform: uppercase !important; color:var(--dunkeltuerkis) !important;}





/*Suchmaske*/
.suchmaske input.sufield {height: 36px; padding: 5px}
input.sufield {margin-right: 10px}
.suchmaske select {margin-right: 20px; border: 2px solid #007BFF;
-webkit-appearance: none; 
-moz-appearance: none;
appearance: none;

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 0px;

background-position: 98% center;
background-color: #fff !important;
color: #000000;
border: 1px solid #fff;
padding: 5px

}
select#monat {width: 100%}
.white {color: #fff; margin-right: 10px}


#buchung .dunkeltuerkis {color: var(--dunkeltuerkis); }


a.presselink {margin-top: 2em !important; display:block; font-family: 'TitilliumWeb-Bold'; text-transform: uppercase  } 

.dunkeltuerkis {color: var(--dunkeltuerkis); margin-right: 10px}

h3.dunkeltuerkis {color: var(--dunkeltuerkis) !important; font-size: 3em !important;}

.fa-search:before {
    content: "\f002";
	color: #fff;
}

#suche .fa-search:before {
    content: "\f002";
	color: #006178;
	
} 

.sumoja {float: right;}

a.sulink {color: #fff !important; margin-left: 10px; margin-right: 10px}


/*Slider*/



a{
	color:#fff;
	text-decoration:none;
}

h1{
	text-align:center;
	
}

#container{
	width: 100%;
	margin:40px auto;
	overflow:hidden;
}

#slider{
	width: 100%;
	height:320px;
	position:relative;
	overflow:hidden;
	float:left;
	padding:3px;
	background-image: url('https://www.agentour.org/bilder/bg-slider.jpg');
	border-radius:5px;
	margin-bottom: 50px
}

#slider img{
	width:200px;
	margin-bottom: 20px
}

#slider img.large {
	width: 70%;
	
}

.slide{
	margin: 0 auto;
	width: 90%
}

/*
.slide-copy{
	position:absolute;
	bottom:0;
	left:0;
	padding:20px;
	background:7f7f7f;
	background: rgba(0,0,0,0.5);
}*/

#prev, #next{
	float:left;
	margin-top:130px;
	cursor:pointer;
	position:relative;
	z-index:100;
}

#prev{
	margin-right:-50px;
	position: absolute;
}

#next{
	margin-left:-50px;
	position: absolute;
}

@media (min-width: 360px) and (max-width: 600px) {
select#kuenstler {width: 250px !important}
h1, h1.va { font-size: 2.5em !important; font-family: 'AgencyFB-Bold';}
h2 {font-size: 1.5em !important; line-height: 1.3em !important}


#termine .datum-und-programm .programm, #termine .programm {

  overflow: visible !important;
  
}
}


@media (min-width: 360px) and (max-width: 1024px) {
    .col-md-6 {
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
}


.ticket_datum_string {width: 100%}
}


@media (max-width: 768px) {
    .container, .container-md, .container-sm {
        max-width: 540px !important;

    }

#termine .datum-und-programm .programm, #termine .programm {

  overflow: visible !important;
  
}
 .navbar-brand-logo img, 
    .navbar-brand img {
        max-height: 50px; /* Kleinere Logos auf kleineren Bildschirmen */
    }


.accordion-body .col-md-6 {
    -ms-flex: 0 0 60% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}


.booking h1 {
    margin-top: 150px !important;
   
}


.suchmaske .col-md-2,
    .suchmaske .col-md-1 {
        flex: 0 0 100%; /* Spalten werden gestapelt */
        max-width: 100%;
        margin-bottom: 15px;
    }

    .btn-icon {
        width: 100%; /* Button über gesamte Breite */
        height: auto;

        border-radius: 5px;
    }


.formcontainer {
  Display: block !Important;
}

.formcontainer .col-md-4 {
 Margin-bottom: 20px
}

.formular h1 {
    font-size: 50px !important;
    margin-top: 70px;
    margin-bottom: 30px;
}

.formular {
 background-position: center bottom; /* Standard für größere Bildschirme */
   
}


.custom-col {flex: 0 0 50%;  max-width: 50%;}

h3, ul {margin-left: 0px !Important;	}



h1.va {padding-bottom: 0px; margin-bottom: 0px}
.ot_typ {margin-top: 20px; display: block; padding-bottom: 0px; color: var(--hellgruen) !important; font-family: TitilliumWeb-Bold !important; }


.col-rubriken {
  float: none ;
}

	h1, h2, h2.subline {line-height: 1.2em !important; }
	
	.billet, .nobillet a, .restkarten a, .tooltip-ausverkauft, .button-more a, .kuenstlerinfo a, .karten a, .tooltip-ausverkauft  { font-size:1.3em !important;   }



	select {margin-bottom: 10px !important; }
	
	.sumoja {float: none !important}
	
	.suchmaske {width: 100%}
	
	
	

	.suchmaske input.sufield {margin-bottom: 20px !important;}
	
.glossar {width: 100%}


.padding5 {padding-top: 5px; padding-bottom: 5px; width: 35%}




}







@media only screen and (max-width: 1024px) {
.button-more a {width: 100% !important;}
.mb-10 {width: 100% !important; display:block !important;}

.ticket-links {
   
    width: 100% !important;
}

}


@media only screen and (min-width: 1024px) {


#termine ul, #termine h3  {margin-left: 0px !important}
.humorzone_bild {  margin-bottom: 10px; max-width: 325px !important; border: none }

}