@font-face {
      font-family: 'BerlinSansFB';
      src: url('BRLNSR.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
}
html {top:0;line-height: 1.15;margin: 0; -webkit-text-size-adjust: 100%; } body {margin: 0;} main {display: block;} h1 {font-size: 2em;margin: 0.67em 0;margin-bottom: 0;} hr {box-sizing: content-box; height: 0; overflow: visible; } pre {font-family: monospace, monospace; font-size: 1em; } a {background-color: transparent;} abbr[title] {border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b,strong {font-weight: bolder;} code,kbd,samp {font-family: monospace, monospace; font-size: 1em; } small {font-size: 80%;} sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;} sub {bottom: -0.25em;} sup {top: -0.5em;} img {border-style: none;} button,input,optgroup,select,textarea {font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button,input {overflow: visible;} button,select {text-transform: none;} button,[type="button"],[type="reset"],[type="submit"] {-webkit-appearance: button;} button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style: none;padding: 0;} button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;} fieldset {padding: 0.35em 0.75em 0.625em;} legend {box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress {vertical-align: baseline;} textarea {overflow: auto;} [type="checkbox"],[type="radio"] {box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {height: auto;} [type="search"] {-webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-decoration {-webkit-appearance: none;} ::-webkit-file-upload-button {-webkit-appearance: button; font: inherit; } details {display: block;} summary {display: list-item;} template {display: none;} [hidden] {display: none;}

html, body {
  padding: 0;
  background: #111;
  color: white;
  font-family: sans-serif;
  position: relative;
  overflow-x: hidden;
  scrollbar-width: none; /* hides scrollbar */
  -ms-overflow-style: none;        /* IE10+ */
}
body {
  font-family: 'BerlinSansFB', sans-serif;
  height: auto;
  top: 0;
  padding-bottom: 3rem;
}

html::-webkit-scrollbar {display: none;}
body::-webkit-scrollbar {display: none;}

body.menu_open {
  overflow: hidden !important;
  /*height: 0px;*/
}

#bg {
  background-image: url('../IMG/1.webp');
  background-size: cover;
  background-position: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0.2;
  pointer-events: none;
  z-index: 1;
  top: 0;
}

/* START HEADER BURGER MENU */

header {
    padding: 3rem 2rem 4rem;
}
.tba {opacity: 0.5;pointer-events: none;}

/* --- Burger base --- */
.burger {
    width: 40px;
    height: 40px;
    position: fixed;
    cursor: pointer;
    z-index: 1002;
}
.burger div {
    background: white;
    height: 6px;
    margin: 6px 0;
    transition: 0.3s ease;
    border-radius: 6px;
    box-shadow: 0px 0px 1px 1px #dcc70d, 0px 0px 0px 1px #dcc70d inset;
}

/* --- Burger to X --- */
.burger.open div:nth-child(1) {
    transform: rotate(45deg) translate(31px, 1px);
    width: 65%;
}
.burger.open div:nth-child(2) {
    rotate: 90deg;
    transform: translate(1px, 0px);
}
.burger.open div:nth-child(3) {
    transform: rotate(-45deg) translate(30px, 1px);
    width: 60%;
}

/* --- Mobile Menu --- */
.mobile-menu {
  position: fixed;
  inset: 0;                      /* replaces top/left/right/bottom: 0 */
  background: #111;
  color: white;
  z-index: 3;
  text-align: center;
  padding: 100px 20px;
  box-sizing: border-box;

  /* start hidden above */
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;              /* if your menu has scrollable content */
}

/* When open */
.mobile-menu.open {
  transform: translateY(0);
}


.mobile-menu ul {
  list-style: none;
  padding: 0;
}
.mobile-menu li {
  margin: 20px 0;
}
.mobile-menu a {
  text-decoration: none;
  color: white;
  font-size: 1.4rem;
}

#mobileMenu img {
    width: 200px;
    position: relative;
    padding-bottom: 1rem;
}

/* END HEADER BURGER MENU */

.hero {
  position: relative;
  z-index: 2;
}
.logo {
    display: flex;
    justify-content: center;
    z-index: 2;
    position: relative;
}
.logo img {
  position: relative;
  width: 380px;
}
.slogan-container {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.slogan-text {
  font-family: 'BerlinSansFB';
  text-align: center;
  color: #ECEBEB;
  font-size: 2rem;
  line-height: 1.25;
  font-weight: 900;
  /* -webkit-text-stroke-width: 26px; */
  /* -webkit-text-fill-color: white; */
  text-shadow: 4px 4px 0 #001843,-4px 4px 0 #001843,4px -4px 0 #001843,-4px -4px 0 #001843,    4px 0px 0 #001843,-4px 0px 0 #001843,0px 4px 0 #001843,0px -4px 0 #001843;
}
.slogan-text a {color:#ECEBEB;}
.red {color: #CD1E36}
.blue {color: #259BCE}
.yellow {color: #DCC70D}
.ticker-container {
  position: relative;
  width: 100%;
  white-space: nowrap;
  margin-top: 4rem;
  z-index: 2;
}
.ticker-text {
  display: inline-block;
  font-family: 'BerlinSansFB';
  font-size: 4rem;
  color: #ECEBEB;
  text-shadow: 4px 4px 0 #414346,-4px 4px 0 #414346,4px -4px 0 #414346,-4px -4px 0 #414346,    4px 0px 0 #414346,-4px 0px 0 #414346,0px 4px 0 #414346,0px -4px 0 #414346;
  font-size: 4rem; /* Bigger font size */
  animation: ticker-left 20s linear infinite;
  will-change: transform;
}
.ticker-text.reverse {
  animation: ticker-right 20s linear infinite;
}
@keyframes ticker-left {
  0% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}
@keyframes ticker-right {
  0% { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}


/* Single Event Page */

.single_event_page .logo img {width: 180px;}

#single_event_wrapper {
    position: relative;
    padding: 3rem 1.5rem;
    display: flex;
    flex-direction: column;
    z-index: 2;
    width: 100vw;
    box-sizing: border-box;
    align-items: center;
    gap: 4rem;
    margin-bottom: 2rem;
}
#single_event_wrapper h1 {
    font-size: 2.5rem;
    text-align:center;
    margin: 0;
}
#single_event_wrapper p {
    font-size: 1.75rem;
    margin: 0;
}

#artist_feature_img {
    box-shadow: 5px 5px 2px 4px #DCC70D, 4px 4px 32px 6px #ffffff;
}


#single_event_wrapper img {
    width: 100%;
    border-radius: 32px;
    max-width: 800px;
}

div#date_place {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
    height: auto;
    justify-content: space-between;
}

#date_time, #artists {
    padding: 2rem;
    background: #ffffff;
    border-radius: 32px;
    color: dimgrey;
    box-sizing: border-box;
    width: calc(50% - 1rem);
    box-shadow: 2px 2px 0px 3px #DCC70D, 2px 2px 12px 6px #ffffff;
}
#date_time h2 {font-weight: 500;}
#artists {width: 100%}
#img_caption_wrapper {
    width: calc(50% - 1rem);
    box-sizing: border-box;
}

#ticket_prices {margin-top: 3rem;}
img#place {
    width: 100%;
    min-width: auto;
    cursor: pointer;
    max-width: unset;
    box-shadow: 2px 2px 0px 3px #DCC70D, 2px 2px 12px 6px #ffffff;
}

#other_parties {
    cursor: pointer;
    border-bottom: 4px solid white;
    padding-bottom: 3px;
}

#artists h2 {text-align: center;font-size: 2rem;}
.artist_bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
#artists p {
    margin-bottom: 1rem;
    text-align: justify;
}
#artists img {
    height: auto;
    width: 150px;
}
.category {font-weight: 900;}
#special_features ul {padding: 0;}
#special_features li {
  list-style: none;
  margin-bottom: 12px;
  font-size: 1.25rem;
  position: relative;
  padding-left: 2em; /* Space for emoji */
}


#special_features li::before {
    content: '👉🏽';
    position: absolute;
    left: 0;
    top: -8px;
    font-size: 1.5rem;
}
#reserve-btn {
    padding: 2rem 3rem;
    font-size: 1.75rem;
    border-radius: 32px;
    transition: all 0.3s ease;
    box-shadow: 0px 0px 10px 7px #dcc70d, 0px 0px 10px 7px #dcc70d inset;
    border: 2px solid white;
    background: transparent;
    color: white;
    cursor: pointer;
    color: #f3e97f;
}
#reserve-btn:hover {
  box-shadow: 0px 0px 6px 5px #dcc70d, 0px 0px 6px 5px #dcc70d inset;
  color: #e5dfae;
}

.footer-links {
    position: relative;
    bottom: 20px;
    padding-right: 30px;
    font-size: 1rem;
    opacity: 0.6;
    float: right;
    z-index: 2;
}
.footer-links a {
  color: white;
  text-decoration: none;
  margin-left: 20px;
  transition: opacity 0.2s;
}
.footer-links a:hover {
  opacity: 1;
}



/* Optional: for smaller screens */
@media (max-width: 600px) {
  .ticker-text {
    font-size: 26vw;
  }
  .logo {
    font-size: 4vw;
  }
  .logo img {width: 260px;}
  .footer-links {
    font-size: 0.8rem;
    right: 15px;
  }
  .slogan-text {font-size: 1.8rem;}
  #other_parties {font-size: 1.5rem !important;}
}
@media (max-width: 1080px) {
  div#date_place {flex-direction: column;}
  #date_time, #artists, #img_caption_wrapper {width: 100%;}
}
@media (max-width: 1336px) {
  #date_place {align-items: center;}
}

.smaller_text {font-size: 1rem !important;}

@media (min-width: 800px) {
  .logo img {width: 300px;}
  #artists {
    display: flex;
    flex-direction: column;
  }
  .artist_bubble {flex-direction: row;padding: 4rem;margin-bottom: 0 !important;}
}


/* IMPRESSUM & DS*/

#impressum_wrapper, #privacy_wrapper {
    padding-left: 2rem;
    z-index: 2;
    position: relative;
}
#impressum_wrapper a, #privacy_wrapper a {color: #CD1E36; font-weight: 800;}




/* SWAL POPUPS */

div:where(.swal2-container) .swal2-html-container {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1rem;
}


div:where(.swal2-container).swal2-center>.swal2-popup {
    grid-column: 2;
    grid-row: 2;
    place-self: center center;
    width: 90% !important;
}

div:where(.swal2-container).swal2-center>.swal2-popup a {
  color: #4a90e2;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel {
  background-color: #959595 !important;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
  background-color: #4a90e2 !important;
}


div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel:focus {

}


div:where(.swal2-container) input:where(.swal2-input), div:where(.swal2-container) input:where(.swal2-file), div:where(.swal2-container) textarea:where(.swal2-textarea), div:where(.swal2-container) select:where(.swal2-select), div:where(.swal2-container) div:where(.swal2-radio), div:where(.swal2-container) label:where(.swal2-checkbox) {
  margin: 0 !important;
}