/* ===========================
   Global Variables from XD
   =========================== */
:root {
  /* Colors */
  --color-dark: #0F1E23;

  /* Font Families */
  --font-anton: 'Anton', sans-serif;
  --font-lato: 'Lato', sans-serif;

  /* Font Sizes */
  --font-size-sm: 20px;
  --font-size-lg: 30px;

  /* Line Heights */
  --line-height-sm: 25px;
  --line-height-xl: 108px;

  /* Letter Spacing */
  --letter-spacing-none: 0px;

  /* Text Transform */
  --text-uppercase: uppercase;
}

/* ===========================
   2. Base Styles
   =========================== */
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-lato);
  color: var(--color-dark);
  background-color: white;
  overflow-x: hidden;
  position: relative;
}

/* Beispiel media query für responsive Schriftgröße */
@media (max-width: 768px) {
  body {
    font-size: 14px; /* kleiner auf kleinen Bildschirmen */
  }
}


/* ===========================
   3. Background Elements
   =========================== */
.background-pattern {
  position: absolute;
  top: -338.51px;
  left: -1650.04px;
  width: 4124px;
  height: 5120px;
  background: url('img/background-pattern.png') no-repeat;
  background-size: cover;
  z-index: 0;
  opacity: 1;
}

/* ===========================
   4. Layout: Header/Menu Bar
   =========================== */
.menu-bar {
  position: relative;
  width: 100vw;
  height: 143px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px;
  box-sizing: border-box;
  z-index: 1;

  background-image: url('img/menu-bg.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* ===========================
   5. Logo
   =========================== */
.logo {
  width: 150px;
  height: 169px;
  background: transparent url('img/TheaterTurbine_Logo_NEU.png') no-repeat center center;
  background-size: contain;
  margin-top: 30px;
  opacity: 1;
}

.logo:hover {
  cursor: pointer;
  transform: scale(1.1);          /* leicht vergrößern */
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);

}

/* ===========================
   6. Burger Menu Button
   =========================== */
.burger {
  width: 30px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.burger span {
  display: block;
  height: 4px;
  background: black;
  border-radius: 2px;
}

/* ===========================
   6.1 Menü-Textfelder
   =========================== */
.menu-item {
  position: absolute;
  top: 52px;
  font-family: 'Anton', sans-serif;
  font-size: 24px;
  line-height: 36px;
  color: #0F1E23;
  text-align: left;
  opacity: 1;
}

.menu-item.spielplan {
  left: 426px;
  width: 115px;
}
.menu-item.spielplan:hover {
  cursor: pointer;
  transform: scale(1.1);          /* leicht vergrößern */
  background: linear-gradient(to top, #FFEC00 50%, transparent 50%);
}


.menu-item.buchen {
  left: 600px;
  width: 187px;
}
.menu-item.buchen:hover {
  cursor: pointer;
  transform: scale(1.1);          /* leicht vergrößern */
  background: linear-gradient(to top, #FFEC00 50%, transparent 50%);
}
.menu-item.workshops {
  left: 823px;
  width: 137px;
}
.menu-item.workshops:hover {
  cursor: pointer;
  transform: scale(1.1);          /* leicht vergrößern */
  background: linear-gradient(to top, #FFEC00 50%, transparent 50%);
}
/* =================================================
   📱 Responsive Header/Menu für kleinere Screens
   ================================================= */
@media (max-width: 768px) {
  .menu-bar {
    flex-direction: row;
    justify-content: space-between;
    height: auto;
    padding: 20px;
    background-size: cover;
  }

  .logo {
    width: 69px;
    height: 78px;
    margin-top: 0;
  }

  .burger {
    display: flex;
  }

  .menu-item.spielplan {
  display: block;       /* sichtbar */
  position: static;     /* aus dem Flow, keine absolute Position */
  width: auto;          /* optional */
  margin: 10px 0;       /* optional Abstand */
}

    .menu-item.buchen,
    .menu-item.workshops {
      display: none;
    }

    /* Spielplan soll sichtbar bleiben */
    .menu-item.spielplan {
      display: flex; /* oder flex, falls du Flex benutzt */
    }

  /* Optional: mobile Menüführung (z.B. Overlay-Menü) */
  .mobile-menu {
    position: absolute;
    top: 143px;
    left: 0;
    width: 100%;
    background-color: #fff;
    display: none; /* per JS toggelbar */
    flex-direction: column;
    padding: 20px;
    z-index: 10;
  }

  .mobile-menu .menu-item {
    display: block;
    position: static;
    margin: 10px 0;
    font-size: 20px;
  }
}


/* ===========================
   carousel
   =========================== */

.carousel-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1774px;
  height: auto;
  margin: 0 auto;
  box-sizing: border-box;
}

.carousel-content {
  flex: 1;
  background-color: #f4f4f400;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 100px 80px;
  box-sizing: border-box;
}

.slide {
  display: none;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.slide.active {
  display: flex;
}

.slide-subheading {
  font-family: var(--font-anton);
  font-size: 20px;
  line-height: 108px;
  color: var(--color-dark);
  margin: 0;
}

.slide-row {
  display: flex;
  align-items: baseline;
  gap: 30px;
}

.slide-meta {
  font-family: var(--font-anton);
  font-size: 20px;
  line-height: 26px;
  color: var(--color-dark);
  letter-spacing: 0.38px;
  margin: 0;
}

.slide-title {
  font-family: var(--font-anton);
  font-size: 50px;
  line-height: 108px;
  color: var(--color-dark);
  letter-spacing: 1px;
  margin: 20px 0;
  transform: scaleX(0.95);
}

.slide-description {
  font-family: var(--font-lato);
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0.4px;
  color: var(--color-dark);
  max-width: 785px;
  margin-top: 20px;
  margin-bottom: 0;
}

.carousel-controls {
  width: 541px;
  height: auto;
  background-color: #0F1E23;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40px 20px;
  box-sizing: border-box;
}

.slide-button {
  height: 40px;
  width: 170px;
  margin-top: 20px;
  font-family: var(--font-anton);
  font-size: var(--font-size-sm);
  line-height: normal;
  color: white;
  text-align: center;
  text-decoration: none;
  background-color: var(--color-dark);
  padding: 8px 16px;
  border-radius: 4px;
  border: 2px solid var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.slide-button:hover {
  background-color: white;
  color: var(--color-dark);
  border: 2px solid var(--color-dark);
  transform: scale(1.05);
}

.slide-image,
.slide-video {
  position: absolute;
  top: 10px;
  left: 850px;
  width: 514px;
  height: 597px;
  background-size: cover;
  z-index: 2;
}

.slide-image {
  background: transparent url('img/slides01.jpg') no-repeat center center;
  opacity: 1;
}

.slide-video {
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
}

.dots {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ffffff55;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dot.active {
  background-color: #ffffff;
}

/* ------------------------- */
/* 📱 RESPONSIVE: MOBILE     */
/* ------------------------- */

@media (max-width: 768px) {
  .carousel-wrapper {
    flex-direction: column;
    height: auto;
    max-width: 100%;
  }

  .carousel-content {
    padding: 40px 20px;
    align-items: flex-start;
  }

  .slide-title {
    font-size: 36px;
    line-height: 56px;
  }

  .slide-subheading,
  .slide-meta,
  .slide-description {
    font-size: 16px;
    line-height: 24px;
  }

  .carousel-controls {
    width: 100%;
    height: auto;
    flex-direction: row;
    justify-content: space-around;
    padding: 20px;
  }

  .slide-image,
  .slide-video {
    position: static;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin-top: 20px;
  }

  .slide-button {
    width: 100%;
    max-width: 200px;
    font-size: 16px;
  }

  .dots {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
  }
}


/* ===========================
   Spielplan Banner
   =========================== */

   .gif-container {
  position: relative;
  width: 100%;         /* oder feste Breite, z.B. 800px */
  height: 175px;
  overflow: hidden;    /* versteckt das GIF, wenn es außerhalb des Containers ist */
  opacity: 0.4;
  }

  .walking-gif {
    position: absolute;
    width: 325px;   /* gleiche Breite wie im img-Tag */
    height: 175px;
    animation: walk-across 15s linear infinite;
  }

  @keyframes walk-across {
    0% {
      left: -650px;   /* Start ganz links außerhalb */
    }
    100% {
      left: 100%;     /* Ziel ganz rechts außerhalb */
    }
  }


.stretch-container {
  display: flex;
  width: 100%;
  height: 192px;
  align-items: center;         /* vertikal zentriert */
  justify-content: center;     /* optional, zentriert Mitte-GIF horizontal */
  opacity: 0.35;
}

.side-image {
  flex: 1;
  height: 100%;
  width: 100%;           /* wird vom Flexcontainer gesteuert */
  object-fit: fill;      /* dehnt Bild auf Höhe und Breite, ohne Seitenverhältnis zu halten */
}

.center-gif {
  width: 256px;
  height: 192px;
}


.cta-banner {
  width: 100%;
  height: 175px;
  background: #FC3EA4;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.cta-text {
  font-family: 'Anton', sans-serif;
  font-size: 75px;
  line-height: 108px;
  color: var(--color-dark);
  letter-spacing: 0px;
  text-align: center;
}

.cta-banner-yellow {
  width: 100%;
  height: 175px;
  background: #FFEC00;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.cta-text-yellow {
  font-family: 'Anton', sans-serif;
  font-size: 50px;
  line-height: 108px;
  color: var(--color-dark);
  letter-spacing: 0px;
  text-align: center;
}

/* ===========================
   Termine
   =========================== */

.termine {
  max-width: 1718px;
  margin: 0 auto;
  padding-top: 80px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.monatstitel {
  font-family: var(--font-anton);
  font-weight: normal;
  font-size: 40px;
  line-height: 1.2;
  color: var(--color-dark);
  text-align: left;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.burger-divider {
  width: 100%;
  max-width: 1628px;
  height: 1px;
  margin: 0 auto;
  background-color: #0F1E23;
  opacity: 1;
}

.termin {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  max-width: 100%;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.termin-tag {
  font-family: var(--font-anton);
  font-size: 30px;
  text-transform: uppercase;
  color: var(--color-dark);
}

.termin-datum {
  font-family: var(--font-anton);
  font-size: 60px;
  text-transform: uppercase;
  color: var(--color-dark);
  margin-left: 10px;
}

.termin-details {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
  flex-grow: 1;
  max-width: 669px;
}

.termin-zeit {
  font-family: var(--font-lato);
  font-size: 20px;
  line-height: 25px;
  color: var(--color-dark);
  margin-bottom: 5px;
  width: 100%;
  max-width: 485px;
}

.termin-titel {
  font-family: var(--font-anton);
  font-size: 30px;
  line-height: 45px;
  color: var(--color-dark);
  text-align: left;
  text-transform: none;
  width: 100%;
  max-width: 669px;

  display: inline-block; /* macht die Breite nur so groß wie den Text */
  background: linear-gradient(to top, #FFEC00 50%, transparent 50%);
  transition: transform 0.2s ease, background-size 0.3s ease;
  cursor: pointer; /* wenn es wie ein Button wirken soll */
}

.termin-titel:hover {
  transform: scale(1.05); /* beim Hover leicht größer */
}

.termin-titel a {
  color: #FFFFFF;
  transition: color 0.3s ease, transform 0.3s ease;
}

.termin-titel a:hover {
  color: #FFEC00;
  transform: scale(1.05);
}

.termin-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;  /* geändert von flex-start auf flex-end */
  margin-left: auto;
  margin-top: -5px;
}

.termin-ticket-button {
  font-family: var(--font-anton);
  font-size: 30px;
  color: var(--color-dark);
  background: linear-gradient(to top, #FFEC00 50%, transparent 50%);
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  height: 45px;
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;

  background-size: 100% 200%;
  background-position: top;
  transition: background-position 0.3s ease, transform 0.2s ease;
}

.termin-ticket-button:hover {
  background-position: bottom;
  transform: scale(1.1);
}

.termin-venue {
  font-family: var(--font-lato);
  font-size: 20px;
  line-height: 25px;
  color: var(--color-dark);
  opacity: 1;
  margin-bottom: 2px;
}


/* --------------------------------------- */
/* 📱 RESPONSIVE MOBIL-VERSION             */
/* --------------------------------------- */
@media (max-width: 768px) {
  .termin {
    padding-left: 20px;
    padding-right: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .termin-tag {
    font-size: 18px;
  }

  .termin-datum {
    font-size: 36px;
    margin-left: 0;
  }

  .termin-details {
    margin-left: 0;
    max-width: 100%;
  }

  .termin-zeit,
  .termin-titel {
    font-size: 16px;
    line-height: 22px;
    width: 100%;
  }

  .termin-titel {
    font-size: 20px;
    line-height: 28px;
  }

  .termin-action {
    margin-left: 0;
    align-items: flex-start;
  }

  .termin-ticket-button {
    font-size: 18px;
    width: auto;
    padding: 8px 12px;
    height: auto;
  }

  .burger-divider {
    width: 100%;
  }

  .monatstitel {
    padding-left: 20px;
    font-size: 28px;
  }

  .termin-venue {
    font-size: 16px;
    line-height: 22px;
  }
}



/* ===========================
   7. Buchen Sie uns! Call To Action
   =========================== */
.cta-section {
  width: 100%;
  height: 550px;
  background-color: #0F1E23;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  box-sizing: border-box;
}

.cta-content {
  max-width: 1080px;
  color: #FFFFFF;
  opacity: 1;
}

.cta-description {
  font-family: var(--font-lato);
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.4px;
  margin-bottom: 30px;
  color: #FFFFFF;
}

.cta-title {
  font-family: var(--font-anton);
  font-size: 75px;
  line-height: 108px;
  margin: 0;
  color: #FFFFFF;
}

.cta-button {
  font-family: var(--font-anton);
  font-size: 20px;
  line-height: 54px;
  letter-spacing: 0px;
  color: #0F1E23;
  background-color: #FFEC00;
  border: none;
  padding: 5px 20px;
  margin-top: 20px;
  cursor: pointer;
  text-transform: uppercase;
  opacity: 1;
  transition: background 0.3s, color 0.3s;
}

.cta-button:hover {
  background-color: #e6d700;
}

/* -------------------------------------------- */
/* 📱 MOBILE-FREUNDLICH (für schmale Displays)  */
/* -------------------------------------------- */
@media (max-width: 768px) {
  .cta-section {
    height: auto;
    padding: 60px 20px;
  }

  .cta-title {
    font-size: 38px;
    line-height: 48px;
  }

  .cta-description {
    font-size: 16px;
    line-height: 1.4;
  }

  .cta-button {
    font-size: 16px;
    line-height: 40px;
    padding: 8px 16px;
  }
}


/* ===========================
   7. Buchen Sie uns! Call To Action
   =========================== */

.cta-section-small {
  width: 100%;
  height: 250px;
  background-color: #0F1E23;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  box-sizing: border-box;
}

.cta-content-small {
  max-width: 1080px;
  color: #FFFFFF;
  opacity: 1;
}

/* ===========================
   7. aktuelles
   =========================== */

.aktuelles-section {
  text-align: center;
  padding: 100px 20px;
  box-sizing: border-box;
}

.aktuelles-titel {
  font-family: var(--font-anton);
  font-size: 40px;
  line-height: 108px;
  color: #0F1E23;
  margin-bottom: 40px;
}

.aktuelles-bild {
  width: 100%;
  max-width: 1080px;
  height: auto;
  aspect-ratio: 1080 / 545;
  object-fit: cover;
  opacity: 1;
  margin: 0 auto;
  display: block;
}

.aktuelles-subtitel {
  font-family: var(--font-anton);
  font-size: 30px;
  line-height: 1.2;
  text-transform: uppercase;
  color: #0F1E23;
  margin-top: 40px;
  margin-bottom: 10px;
}

.aktuelles-text {
  font-family: "Segoe UI", sans-serif;
  font-size: 20px;
  line-height: 27px;
  color: #707070;
  max-width: 990px;
  margin: 0 auto;
  opacity: 1;
}

/* -------------------------------------------- */
/* 📱 Mobile-Version für schmale Bildschirme   */
/* -------------------------------------------- */
@media (max-width: 768px) {
  .aktuelles-titel {
    font-size: 38px;
    line-height: 48px;
  }

  .aktuelles-bild {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .aktuelles-subtitel {
    font-size: 20px;
    line-height: 1.4;
    margin-top: 30px;
  }

  .aktuelles-text {
    font-size: 16px;
    line-height: 24px;
    padding: 0 10px;
  }
}


/* ===========================
   7. Footer
   =========================== */

.footer,
.footeryellow {
  width: 100%;
  height: auto; /* besser als feste Höhe */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  box-sizing: border-box;
}

.footer {
  background: #0F1E23;
}

.footeryellow {
  background: #FFEC00;
}

.footer-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 1600px;
  width: 100%;
  gap: 60px;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-logo img {
  width: 209px;
  height: 234px;
  object-fit: contain;
}

.footer-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 280px;
}

.footer-title,
.footer-titleblack {
  font-family: var(--font-anton);
  font-size: 40px;
  line-height: 1.2;
  margin-bottom: 10px;
  text-align: left;
}

.footer-title {
  color: #FFFFFF;
}

.footer-titleblack {
  color: #000000;
}

.footer-input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.footer-input {
  height: 51px;
  background: #FFFFFF;
  border: 1px solid #707070;
  padding: 0 10px;
  font-size: 16px;
  font-family: "Anton", sans-serif;
  box-sizing: border-box;
}

.footer-input.email {
  width: 100%;
  max-width: 530px;
}

.footer-input:not(.email) {
  width: 100%;
  max-width: 258px;
}

.footer-icon {
  width: 51px;
  height: 51px;
  padding-left: 40px;
  padding-right: 20px;
  object-fit: contain;
  cursor: pointer;
}

.footer-icon:hover {
  cursor: pointer;
  transform: scale(1.1);          /* leicht vergrößern */
  background: linear-gradient(to top, #FFEC00 50%, transparent 50%);
}

.footer-submit,
.footer-submitwhite {
  width: 250px;
  height: 31px;
  font-family: 'Anton', sans-serif;
  font-size: 20px;
  line-height: 31px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
}

.footer-submit {
  background: #FFEC00;
  color: #0F1E23;
}

.footer-submitwhite {
  background: #ffffff;
  color: #0F1E23;
}

/* -------------------------------------------- */
/* 📱 Responsive: Mobile-Optimierung            */
/* -------------------------------------------- */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .footer-logo img {
    width: 160px;
    height: auto;
  }

  .footer-title,
  .footer-titleblack {
    font-size: 28px;
    text-align: center;
  }

  .footer-input-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .footer-input.email,
  .footer-input:not(.email),
  .footer-submit,
  .footer-submitwhite {
    width: 100%;
    max-width: 100%;
  }

  .footer-icon {
    display: none; /* Optional: Ausblenden auf Mobile */
  }
}

/* ===========================
   7. footer bottom weiss
   =========================== */

.footer-bottom {
  width: 100%;
  min-height: 64px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center; /* zentriert Inhalte auf kleinen Geräten */
  padding: 0 20px;
  box-sizing: border-box;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin: 0 auto;
  justify-content: center;
}

.footer-link {
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  line-height: 27px;
  color: #0F1E23;
  text-decoration: none;
  transition: opacity 0.2s;
}

.footer-link:hover {
  opacity: 0.7;
}

/* -------------------------------------------- */
/* 📱 Mobile: links zentriert und umgebrochen   */
/* -------------------------------------------- */
@media (max-width: 768px) {
  .footer-links {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
  }

  .footer-link {
    font-size: 16px;
  }
}


/* ===========================
   7. background gradient
   =========================== */
.background-section-top {
  position: absolute;
  top: 144px;
  left: 146px;
  width: 1774px;
  height: 864px;
  opacity: 1;
  background: transparent;
  pointer-events: none;
  z-index: -1;
}

.background-yellow-glow {
  position: absolute;
  top: 2622px;
  left: -792px;
  width: 2272px;
  height: 2160px;
  background: radial-gradient(
    closest-side at 50% 50%,
    #FFEC008C 0%,
    #FFF24E61 53%,
    #FFFFFF00 100%
  );
  mix-blend-mode: normal;
  opacity: 1;
  pointer-events: none;
  z-index: -1;
}

.background-blue-glow {
  position: absolute;
  top: 1505px;
  left: 86px;
  width: 1880px;
  height: 1787px;
  background: radial-gradient(
    closest-side at 50% 50%,
    #9BDFFF8F 0%,
    #9BDFFF00 100%
  );
  mix-blend-mode: normal;
  opacity: 1;
  pointer-events: none;
  z-index: -2;
}

/* ----------------------------------------------- */
/* 📱 Mobile-Optimierung der Backgrounds */
/* ----------------------------------------------- */
@media (max-width: 768px) {
  .background-section-top {
    top: 80px;
    left: 0;
    width: 100%;
    height: 400px;
    background-size: cover;
  }

  .background-yellow-glow {
    top: 2000px;
    left: -1200px;
    width: 1800px;
    height: 1600px;
  }

  .background-blue-glow {
    top: 1000px;
    left: -300px;
    width: 1500px;
    height: 1400px;
  }
}




/* ===========================
   7. Burger Overlay
   =========================== */
/* Vollbild-Overlay */
/* Overlay */
.burger-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #0F1E23;
  z-index: 1000;
  display: none;
  overflow-y: auto; /* macht Overlay scrollbar */
}

/* Schließen-Button (weißes X) */
.burger-close {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 48px;
  color: #FFFFFF;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
}

/* Logo */
.burger-logo {
  position: absolute;
  top: 19px;
  left: 120px;
  width: 200px;
  height: 223px;
  background: transparent url('img/TheaterTurbine_Logo_NEU.png') no-repeat center center;
  background-size: contain;
  opacity: 1;
}

/* Navigation */
.burger-nav {
  position: relative;
  margin-top: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding-bottom: 100px;
}

/* Links */
.burger-nav a {
  font-family: 'Anton', sans-serif;
  font-size: 50px;
  color: #FFFFFF;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.3s ease;
}

.burger-nav a {
  color: #FFFFFF;
  transition: color 0.3s ease, transform 0.3s ease;
}

.burger-nav a:hover {
  color: #FFEC00;
  transform: scale(1.05);
}




/* ===========================
   Text Styles
   =========================== */

/* Equivalent to unnamed-character-style-1 */
.body-text {
  font-family: var(--font-lato);
  font-style: normal;
  font-weight: normal;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-none);
  color: var(--color-dark);
}

/* Equivalent to unnamed-character-style-2 */
.heading {
  font-family: var(--font-anton);
  font-style: normal;
  font-weight: normal;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-xl);
  letter-spacing: var(--letter-spacing-none);
  color: var(--color-dark);
  text-transform: var(--text-uppercase);
}
/* ===========================
   buchenseite
   =========================== */

.buchenseite-titel {
  font-family: var(--font-anton);
  font-weight: normal;
  font-size: 100px;
  line-height: 108px;
  letter-spacing: 0;
  color: #0F1E23;
  text-align: center;
  margin: 0 auto;
  width: 1562px;
  height: auto;
}

.buchen--fliesstext {
  width: 1629px;
  margin: 40px auto 0 auto;
  font-family: 'Segoe UI', sans-serif;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.4px;
  color: #0F1E23;
  text-align: center;
  opacity: 1;
}

.buchen--cta-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

.buchen--cta-button {
  width: 292px;
  height: 31px;
  background-color: #FFEC00;
  border: none;
  font-family: 'Anton', sans-serif;
  font-weight: normal;
  font-size: 20px;
  line-height: 31px;
  letter-spacing: 0px;
  text-align: center;
  color: #0F1E23;
  opacity: 1;

  padding: 0;
}

.buchen--subtitle {
  font-family: 'Anton', sans-serif;
  font-weight: normal;
  font-size: 24px;
  line-height: 108px;
  letter-spacing: 0px;
  color: #0F1E23;
  text-align: center;
  width: 258px;
  height: 36px;
  margin: 0 auto;
  opacity: 1;
}

/* ----------------------------- */
/* Mobile Responsive Anpassungen */
/* ----------------------------- */
@media (max-width: 768px) {
  .buchenseite-titel {
    font-size: 48px;
    line-height: 54px;
    width: 90%;
    padding: 0 20px;
  }

  .buchen--fliesstext {
    width: 90%;
    font-size: 16px;
    line-height: 24px;
    margin: 30px auto 0 auto;
    padding: 0 20px;
  }

  .buchen--cta-wrapper {
    margin-top: 40px;
    padding: 0 20px;
  }

  .buchen--cta-button {
    width: 100%;
    max-width: 280px;
    height: 40px;
    font-size: 18px;
    line-height: 40px;
  }

  .buchen--subtitle {
    font-size: 18px;
    line-height: 36px;
    width: auto;
    padding: 0 20px;
  }
}



/* ===========================
   workshops
   =========================== */


.workshops-titel {
  font-family: var(--font-anton, 'Anton', sans-serif);
  font-weight: normal;
  font-size: 100px;
  line-height: 1.1;
  letter-spacing: 0;
  color: #0F1E23;
  text-align: left;
  margin: 145px 0 20px 146px; /* nur top + Abstand unten */
  width: 977px;
}

.workshops-text {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.4px;
  color: #0F1E23;
  text-align: left;
  width: 1080px;
  margin: 0 0 0 146px; /* nur left */
}

.leitung-box {
  position: absolute;
  top: 129px;
  left: 1281px;
  width: 496px;
  height: 441px;
  background-image: url('img/background.jpg');  /* Dein GIF */
  background-size: 100% 100%;                    /* exakt auf Boxgröße strecken */
  background-repeat: no-repeat;                  /* kein Kacheln */
  transform: matrix(1, -0.03, 0.03, 1, 0, 0);
  padding: 30px;
  box-sizing: border-box;
  opacity: 1;
}

.leitung-bild {
  float: right; /* Bild rechts im Container */
  width: 156px;
  height: 196px;
  margin-left: 20px; /* Abstand zwischen Bild und Text */
  margin-bottom: 10px; /* etwas Abstand unten */
  transform: matrix(1, -0.05, 0.05, 1, 0, 0);
  object-fit: cover;
}

.leitung-titel {
  font-family: 'Anton', sans-serif;
  font-size: 24px;
  line-height: 30px;
  color: #0F1E23;
  margin: 70px 0 10px 0;
  transform: matrix(1, -0.03, 0.03, 1, 0, 0);
}

.leitung-text {
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  line-height: 32px;
  color: #0F1E23;
  transform: matrix(1, -0.03, 0.03, 1, 0, 0);
}


@media (max-width: 768px) {
  .workshops-titel {
    font-size: 36px;
    line-height: 1.2;
    margin: 60px 1rem 20px 1rem;
    width: auto;
    text-align: left;
  }

  .workshops-text {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 1rem 1rem 1rem;
    width: auto;
    text-align: left;
  }

  .leitung-box {
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% - 2rem);
    height: auto;
    margin: 2rem 1rem;
    background-size: cover;
    padding: 1.5rem;
    transform: none;
  }

  .leitung-bild {
    float: none;
    display: block;
    margin: 0 auto 1rem auto;
    width: 120px;
    height: auto;
    transform: none;
  }

  .leitung-titel {
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    margin: 0 0 0.5rem 0;
    transform: none;
  }

  .leitung-text {
    font-size: 16px;
    line-height: 26px;
    text-align: center;
    transform: none;
  }
}

/* --- Workshop Toggle Abschnitt (Responsiv) --- */

/* --- Workshop Toggle Abschnitt (Responsiv mit fixiertem Button) --- */

/* Der Hauptcontainer für den Workshop-Bereich (blauer Rahmen) */
.workshop-container {
    position: relative; /* WICHTIG: Setzt den Bezugspunkt für den absolut positionierten Button */
    /* Positionierung und Größe flexibel gestalten */
    width: 90%;
    max-width: 1200px;
    margin: 50px auto;

    min-height: 164px;
    height: auto;
    border: 5px solid #69D9FC;
    background-color: #FFFFFF;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    opacity: 1;
    overflow: hidden;
    transition: min-height 0.5s ease-in-out;
    box-sizing: border-box;

    /* Kein `display: flex` mehr direkt auf dem Container für die Hauptausrichtung.
       Der Teaser-Inhalt und der erweiterte Inhalt werden im Standard-Fluss bleiben.
       Der Button wird absolut positioniert.
       Wir müssen hier sicherstellen, dass der Teaser genug Platz hat und der Button ihn nicht überlappt. */
    padding: 1.5em; /* Grund-Padding für den Inhalt */
    padding-right: calc(1.5em + 28px + 15px); /* Genug Platz rechts für den Button + Abstand */
    /* (1.5em Padding + 28px Button-Breite + 15px extra Abstand) */
}

/* Stil für den Teaser-Inhalt (optional, im geschlossenen Zustand sichtbar) */
.workshop-teaser-content {
    /* flex-grow: 1; Nicht mehr nötig ohne Flexbox für die Hauptanordnung */
    /* padding-right: 20px; Auch nicht mehr nötig, da der Container padding-right hat */
    margin-bottom: 1em; /* Abstand zum erweiterten Inhalt, wenn er aufgeklappt wird */
    color: #333;
}
/* --- Lato Font Unterüberschrift --- */
.workshop-lato-subheading {
    /* Die XD-Werte top: 679px; left: 549px; werden in relative Einheiten umgewandelt. */
    margin-top: 0.0; /* Abstand nach oben, anpassen nach Bedarf */
    margin-bottom: 0.0; /* Abstand nach unten zur Anton-Überschrift */
    margin-left: auto; /* Horizontal zentrieren */
    margin-right: auto; /* Horizontal zentrieren */
    width: 90%; /* Nimmt 90% der Breite des Elternelements ein */
    max-width: 822px; /* Begrenzt die Maximalbreite wie in XD */
    height: auto; /* Höhe passt sich dem Inhalt an */
    min-height: 36px; /* Mindesthöhe wie in XD */

    /* UI Properties */
    font-family: "Lato", sans-serif; /* Schriftart Lato */
    font-size: 1.875rem; /* 30px / 16px (Standard-Browser-Fontsize) = 1.875rem */
    line-height: 3.6; /* 108px / 30px (font-size) = 3.6 - Das ist eine sehr hohe Zeilenhöhe! */
    letter-spacing: 0px;
    color: #0F1E23;
    text-align: center;
    opacity: 1;

    /* Für kleinere Bildschirme können wir die Schriftgröße anpassen */
    @media (max-width: 768px) {
        font-size: 1.25rem; /* Kleinere Schriftgröße auf Mobilgeräten (z.B. 20px) */
        line-height: 1.8; /* Zeilenhöhe für Mobil anpassen */
        min-height: auto; /* Mindesthöhe flexibler machen */
        width: 95%; /* Etwas breiter auf kleinen Bildschirmen */
    }
}
/* --- Anton Font Textblock --- */
.workshop-anton-heading {
    /* Die XD-Werte top: 727px; left: 549px; werden hier in relative Einheiten umgewandelt. */
    /* Da der Text in den normalen Fluss gehört, nutzen wir margin für den Abstand. */
    margin-top: 0.0; /* Beispiel: Abstand nach oben, anpassen nach Bedarf */
    margin-bottom: 0.0; /* Beispiel: Abstand nach unten */
    margin-left: auto; /* Horizontal zentrieren */
    margin-right: auto; /* Horizontal zentrieren */
    width: 90%; /* Nimmt 90% der Breite des Elternelements ein */
    max-width: 822px; /* Begrenzt die Maximalbreite wie in XD */
    height: auto; /* Höhe passt sich dem Inhalt an, da Text variabel sein kann */
    min-height: 113px; /* Mindesthöhe wie in XD */

    /* UI Properties */
    font-family: "Anton", sans-serif; /* Schriftart Anton */
    font-size: 2.5rem; /* 40px / 16px (Standard-Browser-Fontsize) = 2.5rem */
    line-height: 1.25; /* 50px / 40px (font-size) = 1.25 */
    letter-spacing: 0px;
    color: #0F1E23;
    text-align: center;
    text-transform: uppercase; /* Alle Buchstaben in Großbuchstaben */
    opacity: 1;

    /* Für kleinere Bildschirme können wir die Schriftgröße anpassen */
    @media (max-width: 768px) {
        font-size: 1.8rem; /* Kleinere Schriftgröße auf Mobilgeräten */
        line-height: 1.2;
        min-height: auto; /* Mindesthöhe flexibler machen */
        width: 95%; /* Etwas breiter auf kleinen Bildschirmen */
    }
}

/* Das Pluszeichen (Button zum Auf- und Zuklappen) */
.workshop-toggle-button {
    position: absolute; /* Jetzt absolut positioniert relativ zum `.workshop-container` */
    top: 1.5em; /* Abstand vom oberen Rand des Containers (entspricht Padding) */
    right: 1.5em; /* Abstand vom rechten Rand des Containers (entspricht Padding) */

    flex-shrink: 0; /* Beibehalten, falls es im HTML noch eine Flex-Umgebung gibt */
    width: 28px;
    height: 28px;
    border: 5px solid #0F1E23;
    background-color: transparent;
    color: #0F1E23;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
    transition: transform 0.3s ease-in-out;
}

/* Drehung des Pluszeichens, wenn der Container aufgeklappt ist (wird zu einem "X") */
.workshop-toggle-button.active {
    transform: rotate(45deg); /* Nur die Drehung */
}

/* Der Bereich mit dem erweiterten Inhalt (standardmäßig versteckt) */
.workshop-expanded-content {
    max-height: 0;
    opacity: 0;
    padding: 0 1.5em; /* Passt zum Container-Padding */
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in;
    box-sizing: border-box;
    overflow: hidden;
}

/* Zustand des Containers, wenn er aufgeklappt ist */
.workshop-container.expanded {
    min-height: 825px; /* Neue Mindesthöhe beim Aufklappen */
    width: 100%;          /* volle Breite */
    /* Die Flexbox-Regeln für flex-direction etc. sind hier nicht mehr nötig,
       da der Button absolut positioniert ist und der Inhalt im normalen Fluss bleibt. */
}

/* Sichtbarkeit und Höhe des Inhalts, wenn der Container expanded ist */
.workshop-container.expanded .workshop-expanded-content {
    max-height: 1000px; /* Eine ausreichend große Max-Höhe, um den Inhalt anzuzeigen */
    opacity: 1;
    padding-top: 1em; /* Zusätzlicher Abstand, wenn aufgeklappt */
    width: 100%; /* Nimmt die volle Breite im Container ein */
}



/* Optional: Media Query für kleinere Bildschirme */
@media (max-width: 768px) {
    .workshop-container {
        width: 95%;
        padding: 1em; /* Weniger Padding */
        padding-right: calc(1em + 28px + 10px); /* Platz für den Button anpassen */
    }

    .workshop-toggle-button {
        top: 1em; /* Abstand zum oberen Rand anpassen */
        right: 1em; /* Abstand zum rechten Rand anpassen */
    }
    .workshop-container.expanded .workshop-expanded-content {
        max-height: 1500px;   /* evtl. größer als Desktop, falls mehr Inhalt */
        padding: 1em;         /* großzügiger Abstand innen für Touch */
        font-size: 13px;      /* lesbarer Text auf kleinen Bildschirmen */
        line-height: 1.5;     /* bessere Lesbarkeit */
        width: 100%;          /* volle Breite */
        box-sizing: border-box; /* Padding wird zur Gesamtbreite gezählt */
    }

}

/* --- Blaue Fläche im aufgeklappten Container --- */
.workshop-blue-area {
    /* Statt absoluter Positionierung (top, left) nutzen wir responsive Eigenschaften */
    width: 90%; /* Nimmt 90% der Breite des Elternelements ein */
    max-width: 1354px; /* Begrenzt die maximale Breite wie in XD */
    height: 346px; /* Feste Höhe, wie von Ihnen angegeben */
    background: #69D9FC33; /* Ihre Farbe mit Transparenz */
    margin: 2em auto; /* Vertikaler Abstand und horizontal zentriert */
    padding: 2em; /* Innenabstand für den Text */
    box-sizing: border-box; /* Stellt sicher, dass Padding zur Gesamtgröße gehört */
    display: flex; /* Für die Zentrierung des Textes im Inneren */
    align-items: center; /* Vertikal zentrieren */
    justify-content: center; /* Horizontal zentrieren */
}

/* Anpassungen für kleinere Bildschirme, damit es auch auf Mobilgeräten gut aussieht */
@media (max-width: 768px) {
    .workshop-blue-area {
        width: 98%; /* Etwas breiter auf kleineren Bildschirmen */
        height: auto; /* Höhe passt sich flexibel dem Inhalt an */
        padding: 1em; /* Weniger Padding */
        margin-top: 1em; /* Angepasster vertikaler Abstand */
    }
}

.workshop-blue-area-text {
  /* ... andere Eigenschaften ... */
  text-align: center;
  font-family: "Lato", sans-serif;
  font-size: 25px;
  /* ... weitere Eigenschaften ... */
}

/* Mobile-Anpassungen */
@media (max-width: 768px) {
  .workshop-blue-area-text {
    font-size: 13px;        /* kleinere Schriftgröße für Smartphones/Tablets */
    line-height: 1.4;       /* bessere Lesbarkeit */
    padding: 0 1rem;        /* etwas Innenabstand links/rechts */
    width: 95%;             /* fast volle Breite */
    margin: 0 auto;         /* zentriert im Container */
  }
}


/* --- Bereich für die geviertelte Breite (Vier Spalten) --- */
.workshop-four-columns {
    display: flex; /* Macht den Container zu einem Flexbox-Container */
    flex-wrap: wrap; /* Ermöglicht das Umbrechen der Spalten auf kleineren Bildschirmen */
    justify-content: space-around; /* Verteilt die Spalten gleichmäßig mit etwas Abstand */
    gap: 20px; /* Abstand zwischen den Spalten (flex-gap) */
    width: 90%; /* Nimmt 90% der Breite des Elternelements ein */
    max-width: 1200px; /* Begrenzt die Maximalbreite */
    margin: 3em auto; /* Vertikaler Abstand zum darüberliegenden Inhalt, horizontal zentriert */
    padding: 0 1.5em; /* Horizontaler Innenabstand */
    box-sizing: border-box;
}

.workshop-column {
    flex: 1 1 calc(25% - 20px); /* Jede Spalte nimmt 25% der Breite abzüglich des Gaps ein */
    min-width: 200px; /* Mindestbreite, damit Spalten auf Mobil nicht zu klein werden */
    /* Optional: Ein Rahmen oder Hintergrund, um die Spalten sichtbar zu machen */
    /* border: 1px solid #ddd; */
    /* padding: 1em; */
    box-sizing: border-box;
    text-align: center; /* Zentriert Inhalte innerhalb der Spalte */
}

.workshop-column-3rd {
    flex: 1 1 calc(33% - 20px); /* Jede Spalte nimmt 25% der Breite abzüglich des Gaps ein */
    min-width: 200px; /* Mindestbreite, damit Spalten auf Mobil nicht zu klein werden */
    /* Optional: Ein Rahmen oder Hintergrund, um die Spalten sichtbar zu machen */
    /* border: 1px solid #ddd; */
    /* padding: 1em; */
    box-sizing: border-box;
    text-align: center; /* Zentriert Inhalte innerhalb der Spalte */
}

/* --- Erstes Textelement in der Spalte (Lato 20px) --- */
.workshop-column-lato-text {
    /* XD-Werte: top: 1243px; left: 420px; width: 266px; height: 24px; */
    font-family: "Lato", sans-serif;
    font-size: 1.25rem; /* 20px / 16px = 1.25rem */
    line-height: 1.2; /* Anpassung der Zeilenhöhe für bessere Lesbarkeit */
    /* (Ihre XD-Angabe 108px bei 20px Schriftgröße wäre 5.4, was sehr groß wäre) */
    letter-spacing: 0px;
    color: #0F1E23;
    text-align: center; /* Text innerhalb dieser Box zentrieren */
    width: 100%; /* Nimmt die volle Breite der Spalte ein */
    max-width: 266px; /* Die angegebene maximale Breite */
    margin: 0 auto; /* Horizontal zentrieren innerhalb der Spalte, kein vertikaler Außenabstand */
    min-height: 24px; /* Mindesthöhe */
    opacity: 1;
}

.workshop-column-lato-text-white {
    /* XD-Werte: top: 1243px; left: 420px; width: 266px; height: 24px; */
    font-family: "Lato", sans-serif;
    font-size: 1.25rem; /* 20px / 16px = 1.25rem */
    line-height: 1.2; /* Anpassung der Zeilenhöhe für bessere Lesbarkeit */
    /* (Ihre XD-Angabe 108px bei 20px Schriftgröße wäre 5.4, was sehr groß wäre) */
    letter-spacing: 0px;
    color: #ffffff;
    text-align: center; /* Text innerhalb dieser Box zentrieren */
    width: 100%; /* Nimmt die volle Breite der Spalte ein */
    max-width: 266px; /* Die angegebene maximale Breite */
    margin: 0 auto; /* Horizontal zentrieren innerhalb der Spalte, kein vertikaler Außenabstand */
    min-height: 24px; /* Mindesthöhe */
    opacity: 1;
}

/* --- Zweites Textelement in der Spalte (Anton 24px) --- */
.workshop-column-anton-text {
    /* XD-Werte: top: 1277px; left: 420px; width: 258px; height: 36px; */
    font-family: "Anton", sans-serif;
    font-size: 1.5rem; /* 24px / 16px = 1.5rem */
    line-height: 1.2; /* Anpassung der Zeilenhöhe (Ihre XD-Angabe 108px wäre 4.5) */
    letter-spacing: 0px;
    color: #0F1E23;
    text-align: center;
    text-transform: uppercase; /* Alle Buchstaben in Großbuchstaben */
    width: 100%; /* Nimmt die volle Breite der Spalte ein */
    max-width: 258px; /* Die angegebene maximale Breite */
    margin: 0.5em auto 0 auto; /* Etwas Abstand zum oberen Text, horizontal zentriert */
    min-height: 36px; /* Mindesthöhe */
    opacity: 1;
}
.workshop-column-anton-text-white {
    /* XD-Werte: top: 1277px; left: 420px; width: 258px; height: 36px; */
    font-family: "Anton", sans-serif;
    font-size: 1.5rem; /* 24px / 16px = 1.5rem */
    line-height: 1.2; /* Anpassung der Zeilenhöhe (Ihre XD-Angabe 108px wäre 4.5) */
    letter-spacing: 0px;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase; /* Alle Buchstaben in Großbuchstaben */
    width: 100%; /* Nimmt die volle Breite der Spalte ein */
    max-width: 258px; /* Die angegebene maximale Breite */
    margin: 0.5em auto 0 auto; /* Etwas Abstand zum oberen Text, horizontal zentriert */
    min-height: 36px; /* Mindesthöhe */
    opacity: 1;
}

/* Optional: Media Query für kleinere Bildschirme */
@media (max-width: 768px) {
    .workshop-four-columns {
        flex-direction: column; /* Spalten untereinander auf Mobilgeräten */
        gap: 1em; /* Anpassung des Gaps */
        padding: 0 1em;
    }

    .workshop-column {
        flex: 1 1 100%; /* Jede Spalte nimmt die volle Breite ein */
        max-width: 100%; /* Sicherstellen, dass sie nicht überlaufen */
    }

    /* Kleinere Schriftgrößen für die Texte in den Spalten auf Mobilgeräten */
    .workshop-column-lato-text {
        font-size: 1rem; /* 16px */
        line-height: 1.4;
        max-width: none; /* Keine fixe Max-Breite mehr auf Mobil, passt sich an */
    }

    .workshop-column-anton-text {
        font-size: 1.2rem; /* ca. 19.2px */
        line-height: 1.4;
        max-width: none; /* Keine fixe Max-Breite mehr auf Mobil */
    }
    /* Kleinere Schriftgrößen für die Texte in den Spalten auf Mobilgeräten */
    .workshop-column-lato-text-white {
        font-size: 1rem; /* 16px */
        line-height: 1.4;
        max-width: none; /* Keine fixe Max-Breite mehr auf Mobil, passt sich an */
    }

    .workshop-column-anton-text-white {
        font-size: 1.2rem; /* ca. 19.2px */
        line-height: 1.4;
        max-width: none; /* Keine fixe Max-Breite mehr auf Mobil */
    }
}



/* ===========================
   ensemble
   =========================== */


.ensemble-background {
  position: absolute;
  top: -465px;
  left: 283px;
  width: 1880px;
  height: 1787px;
  background: radial-gradient(closest-side at 50% 50%, #9BDFFF8F 0%, #9BDFFF00 100%);
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-clip: padding-box;
  mix-blend-mode: normal;
  opacity: 1;
  pointer-events: none; /* macht das Element nicht klickbar */
  z-index: 0;           /* ganz weit hinten */
}

.ensemble-highlight {
  position: absolute;
  top: 452px;
  left: -619px;
  width: 2272px;
  height: 2160px;
  background: radial-gradient(
    closest-side at 50% 50%,
    #FFEC008C 0%,
    #FFF24E61 53%,
    #FFFFFF00 100%
  );
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-clip: padding-box;
  mix-blend-mode: normal;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}



/* Grid für 3 Karten pro Reihe */
.ensemble-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px; /* Abstand zwischen Karten */
  justify-content: center;
  padding: 50px;
}

/* Einzelne Karte */
.ensemble-card {
  width: 532px;
  height: 462px;
  background: #ffffff;
  box-shadow: 0px 3px 6px #00000029;
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  position: relative;
}

/* Bildbereich mit Rahmenbegrenzung */
.ensemble-image-wrapper {
  width: 100%;
  height: 393px;
  overflow: hidden;
  position: relative;
}

/* Bild selbst mit Hover-Zoom */
.ensemble-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.ensemble-image-wrapper:hover .ensemble-image {
  transform: scale(1.1);
}

/* Name unter dem Bild */
.ensemble-name {
  height: 60px;
  font-family: 'Anton', sans-serif;
  font-size: 40px;
  line-height: 60px;
  color: #0F1E23;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  padding: 0 20px;
}

.ensemble-title-1 {
  display: inline-block; /* macht Breite = Text */
  font-family: 'Anton', sans-serif;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: 0;
  color: #0F1E23;
  text-align: center;
  margin: 40px auto;
  background: linear-gradient(to top, #FFEC00 50%, transparent 50%);
  z-index: 1;
}
.ensemble-title-2 {
  display: block;
  font-family: 'Anton', sans-serif;
  font-size: 90px;
  line-height: 108px;
  letter-spacing: 0;
  color: #0F1E23;
  text-align: center;
  text-transform: uppercase;
  opacity: 1;
  margin: 60px auto;
  max-width: 90%;
  word-wrap: break-word;
  z-index: 1;


}

.ensemble-text {
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  line-height: 35px;
  letter-spacing: 0;
  color: #0F1E23;
  text-align: left;
  opacity: 1;
  max-width: 1566px;
  margin: 80px auto;
  padding: 0 20px;
  z-index: 1;

}

.ensemble-banner {
  width: 100%;          /* passt sich der Breite des Containers an */
  max-width: 1628px;    /* maximale Breite wie im Original */
  height: auto;         /* Höhe proportional zur Breite */
  display: block;       /* entfernt eventuelle Inline-Abstände */
  margin: 0 auto 40px;  /* zentriert horizontal + Abstand unten */
  object-fit: cover;    /* Video füllt den Bereich, kann je nach Wunsch angepasst werden */
  z-index: 1000;

}


@media (max-width: 768px) {

  .ensemble-background,
  .ensemble-highlight {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: cover;
  }

  .ensemble-title-1 {
    font-size: 18px;
    margin: 30px auto;
    text-align: center;
  }

  .ensemble-title-2 {
    font-size: 48px;
    line-height: 1.2;
    margin: 30px auto;
  }

  .ensemble-text {
    font-size: 16px;
    line-height: 28px;
    margin: 40px auto;
    padding: 0 15px;
  }

  .ensemble-grid {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
  }

  .ensemble-card {
    width: 100%;
    max-width: 95vw;
    height: auto;
  }

  .ensemble-image-wrapper {
    height: 250px;
  }

  .ensemble-name {
    font-size: 24px;
    line-height: 36px;
    padding: 0 10px;
  }

  .ensemble-banner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 20px;
  }

}


.gallery-background {
  width: 100%;
  min-height: 100vh; /* mindestens volle Fensterhöhe */
  background-color: #0F1E23;
  opacity: 1;
}
.gallery-title {
  font-family: 'Anton', sans-serif;
  font-size: 40px;
  line-height: 158px;
  letter-spacing: 0;
  color: #FFFFFF;
  text-align: center;
  opacity: 1;
  margin: 40px auto;
  max-width: 90%;
  word-wrap: break-word;
  display: block;
}

.gallery-small {
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  line-height: 18px; /* wie angegeben */
  letter-spacing: 0;
  color: #0F1E23;
  text-align: center;
  opacity: 1;
  max-width: 532px;
  margin: 40px auto 0; /* zentriert und mit etwas Abstand oben */
}

.gallery-smallwhite {
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  line-height: 18px; /* wie angegeben */
  letter-spacing: 0;
  color: #ffffff;
  text-align: center;
  opacity: 1;
  max-width: 532px;
  margin: 40px auto 0; /* zentriert und mit etwas Abstand oben */
}

@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

.checkbox-container {
  display: flex;
  gap: 3rem;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  flex-wrap: wrap;
}

.checkbox-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-family: 'Anton', sans-serif;
  font-size: 30px;
  text-transform: uppercase;
}

.checkbox-item input {
  display: none;
}

.custom-checkbox {
  width: 45px;
  height: 45px;
  background-color: #fff;
  border: 1px solid;
  display: inline-block;
  position: relative;
  margin-right: 15px;
}

.checkbox-item.pink .custom-checkbox {
  border-color: #FC3EA4;
}

.checkbox-item.yellow .custom-checkbox {
  border-color: #FFEC00;
}

.checkbox-item.pink .checkbox-label {
  color: #FC3EA4;
}

.checkbox-item.yellow .checkbox-label {
  color: #FFEC00;
}

/* Das Kreuz bei aktivierter Checkbox */
input:checked + .custom-checkbox::after {
  content: "✕"; /* Kreuzsymbol */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  font-weight: bold;
}

.checkbox-item.pink input:checked + .custom-checkbox::after {
  color: #FC3EA4;
}

.checkbox-item.yellow input:checked + .custom-checkbox::after {
  color: #FFEC00;
}
.rectangle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  flex-direction: column;
}



.rect-group {
  display: none;
}

.rect-group.active {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 Spalten */
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto; /* zentriert horizontal */
}

/* Für mobile Geräte */
@media (max-width: 768px) {
  .rect-group.active {
    grid-template-columns: 1fr; /* 1 Spalte untereinander */
    margin-left: 0; /* optional, um zentriert zu sein */
    max-width: 100%; /* volle Breite */
  }
}

.rectangle {
  width: 258px;
  height: 63px;
  background-color: #FFEC00;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Anton', sans-serif;
  font-size: 30px;
  color: #0F1E23;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  user-select: none;
}

/* Hover-Effekt */
.rectangle:hover {
  background-color: #fce000;
  transform: scale(1.03);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Aktiver Zustand (per JavaScript gesetzt) */
.rectangle.active {
  background-color: #e0cf00;
  border-color: #0F1E23;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3) inset;
  transform: scale(0.98);
}

.rectangleworkshop {
  width: 100%;
  height: 63px;
  background-color: #FFEC00;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Anton', sans-serif;
  font-size: 30px;
  color: #0F1E23;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  user-select: none;
}

/* Hover-Effekt */
.rectangleworkshop:hover {
  background-color: #fce000;
  transform: scale(1.03);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Aktiver Zustand (per JavaScript gesetzt) */
.rectangleworkshop.active {
  background-color: #e0cf00;
  border-color: #0F1E23;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3) inset;
  transform: scale(0.98);
}

/* show-offer-container */

.show-offer-container {
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  margin-top: 80px;
  margin-bottom: 80px;
  padding: 0 1rem;
}

.show-offer-container.hidden {
  display: none !important;
  pointer-events: none;
  visibility: hidden;
}

.show-offer-box {
  display: flex;
  gap: 2rem;
  background-color: #0F1E23;
  border: 1px solid #707070;
  padding: 2rem;
  box-sizing: border-box;
  width: 100%;
  max-width: 1628px;
}

.show-offer-image-wrapper {
  position: relative;
  flex: 0 0 609px;
  height: 393px;
  overflow: hidden;
}

.show-offer-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.show-offer-label {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Anton', sans-serif;
  font-size: 40px;
  line-height: 108px;
  color: #FFEC00;
  text-transform: uppercase;
  opacity: 1;
  pointer-events: none;
}

.show-offer-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.show-offer-title {
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  line-height: 60px;
  color: #FFFFFF;
  margin: 0;
}

.show-offer-heading {
  font-family: 'Anton', sans-serif;
  font-size: 40px;
  line-height: 60px;
  text-transform: uppercase;
  color: #FFEC00;
  margin: 0.5rem 0;
}

.show-offer-text {
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  line-height: 25px;
  color: #FFFFFF;
  margin-top: 0.1rem;
}
.show-offer-button {
  display: inline-block;
  background-color: #FFEC00;
  color: #0F1E23;
  padding: 0.75rem 1.5rem;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  width: fit-content; /* ⬅️ Verhindert Breitenstreckung */
  margin-top: 1.5rem;
}


.show-offer-button:hover {
  background-color: #e6d500;
}

.gallery-background-2 {
  width: 100%;
  background-color: #0F1E23;
  opacity: 1;
  padding: 80px 20px; /* optionaler Abstand oben/unten */
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .show-offer-container {
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 0 1rem;
  }

  .show-offer-box {
    flex-direction: column;
    padding: 1rem;
    max-width: 100%;
  }

  .show-offer-image-wrapper {
    flex: none;
    width: 100%;
    height: 200px;
  }

  .show-offer-label {
    font-size: 28px;
    line-height: 48px;
    bottom: 0.5rem;
    left: 0.5rem;
  }

  .show-offer-content {
    padding-top: 1rem;
  }

  .show-offer-title {
    font-size: 16px;
    line-height: 24px;
  }

  .show-offer-heading {
    font-size: 28px;
    line-height: 36px;
  }

  .show-offer-text {
    font-size: 16px;
    line-height: 22px;
  }

  .show-offer-button {
    width: 100%;
    max-width: none;
    font-size: 14px;
    padding: 0.5rem 1rem;
  }
}






.image-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* für mobile stacking */
  gap: 1rem; /* Abstand zwischen Bildern */
  padding: 1rem;
  box-sizing: border-box;
}

.responsive-image {
  width: calc(25% - 0.75rem); /* vier Bilder mit Abstand */
  height: 300px;
  object-fit: cover;
  display: block;
  background-color: transparent;
  opacity: 1;
}
@media (max-width: 768px) {
  .responsive-image {
    width: 100%; /* Stapeln auf Mobile */
  }
}



/* Carousel 2 */

.carousel2 {
  max-width: 1080px;
  margin: 2rem auto;
  overflow: hidden;
  position: relative;
  padding: 0 2rem;
}

.carousel2-track {
  display: flex;
  transition: transform 0.4s ease;
}

.carousel2-slide {
  min-width: 100%;
  font-family: 'Anton', sans-serif;
  font-size: 30px;
  line-height: 50px;
  color: #0F1E23;
  text-align: center;
  padding: 2rem 1rem;
  box-sizing: border-box;
  opacity: 1;
}

.carousel2-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}

.carousel2-prev,
.carousel2-next {
  background: none;
  border: none;
  font-size: 2rem;
  color: #0F1E23;
  cursor: pointer;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .carousel2-slide {
    font-size: 20px;
    line-height: 36px;
    padding: 1.5rem 1rem;
  }
}



.showdetailpage-form-container {
  background-color: #FFFFFF;
  border: 1px solid #707070;
  padding: 2rem;
  max-width: 1354px;
  margin: 4rem auto;
  box-sizing: border-box;
}

.showdetailpage-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.form-input {
  flex: 1;
  min-width: 280px;
  height: 65px;
  padding: 0 1rem;
  border: 1px solid #707070;
  background-color: #FFFFFF;
  font-size: 16px;
  box-sizing: border-box;
}

.form-textarea {
  width: 100%;
  height: 101px;
  padding: 1rem;
  border: 1px solid #707070;
  background-color: #FFFFFF;
  font-size: 16px;
  resize: vertical;
  box-sizing: border-box;
}

/* ✅ Responsive Anpassungen für Mobile */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
  }

  .form-input {
    width: 100%;
  }
}

.container-gutscheine {
  width: 100%;
  max-width: 1920px;
  background: #0F1E23 no-repeat padding-box;
  opacity: 1;
  margin: 0 auto;
  padding: 120px 20px 100px 20px; /* oben und unten Abstand statt fester Höhe */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.gutscheine-title {
  max-width: 1562px;
  font-family: 'Anton', sans-serif;
  font-size: 100px;
  line-height: 60px;
  letter-spacing: 0;
  text-align: center;
  color: #FFFFFF;
  text-transform: uppercase;
  margin: 0 0 40px 0; /* kein Abstand oben, aber Abstand zum Text unten */
}

.gutscheine-text {
  max-width: 1628px;
  font-family: 'Anton', sans-serif;
  font-size: 40px;
  line-height: 68px;
  text-align: center;
  color: #FFFFFF;
  text-transform: uppercase;
  opacity: 1;
  padding: 0 20px;
}

/* Mobile Anpassung */
@media (max-width: 768px) {
   .container-gutscheine {
    padding-top: 80px;
    padding-bottom: 60px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .gutscheine-title {
    font-size: 48px;
    line-height: 56px;
    margin-bottom: 24px;
  }

  .gutscheine-text {
    font-size: 24px;
    line-height: 36px;
    padding: 0 10px;
  }
}

.gutscheine-bilder {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px; /* Abstand zwischen den Bildern */
  margin-top: 120px; /* statt top: 750px, realistischer Abstand im Flow */
  padding: 0 20px;
}

.bild-link {
  display: block;
  width: 325px;
  height: 354px;
  background: transparent;
  flex-shrink: 0;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.bild-link:hover {
  transform: scale(1.05);
}

.bild-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* Mobile: Bilder untereinander */
@media (max-width: 768px) {
  .gutscheine-bilder {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 60px;
  }

  .bild-link {
    width: 90%;
    height: auto;
  }

  .bild-link img {
    height: auto;
  }
}
.gutscheine-description {
  max-width: 1628px;
  margin: 60px auto 0 auto; /* Abstand nach oben, zentriert */
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  line-height: 25px;
  text-align: center;
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Mobile Optimierung */
@media (max-width: 768px) {
  .gutscheine-description {
    font-size: 16px;
    line-height: 22px;
    margin-top: 40px;
    padding: 0 16px;
  }
}

.datenschutz-description {
  max-width: 1628px;
  margin: 60px auto 0 auto; /* Abstand nach oben, zentriert */
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  line-height: 25px;
  text-align: center;
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Mobile Optimierung */
@media (max-width: 768px) {
  .datenschutz-description {
    font-size: 16px;
    line-height: 22px;
    margin-top: 40px;
    padding: 0 16px;
  }
}





.aktuelles-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  width: 100%;
  max-width: 1628px;
  background: #FFFFFF no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 8px;
  opacity: 1;
  margin: 100px auto; /* Abstand nach oben/unten */
  padding: 40px;
  box-sizing: border-box;
}

.aktuelles-image {
  flex: 1 1 617px;
  max-width: 617px;
  height: auto;
}

.aktuelles-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}

.aktuelles-content {
  flex: 1 1 806px;
  max-width: 806px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.aktuelles-text {
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  line-height: 30px;
  color: #0F1E23;
  margin-bottom: 24px;
  text-align: left;
}

.aktuelles-button {
  display: inline-block;
  font-family: 'Anton', sans-serif;
  font-size: 20px;
  line-height: 28px;
  text-transform: uppercase;
  color: #0F1E23;
  text-decoration: none;
  padding: 10px 20px;
  border: 2px solid #0F1E23;
  border-radius: 4px;
  transition: background 0.3s ease;
  width: fit-content;
}

.aktuelles-button:hover {
  background: #0F1E23;
  color: #FFFFFF;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .aktuelles-card {
    flex-direction: column;
    padding: 24px;
    gap: 24px;
  }

  .aktuelles-image,
  .aktuelles-content {
    max-width: 100%;
    flex: 1 1 100%;
  }

  .aktuelles-text {
    font-size: 18px;
    line-height: 26px;
    text-align: center;
  }

  .aktuelles-button {
    margin: 0 auto;
  }
}


.purple-bar {
  width: 184px;
  height: 7px;
  background: #FC3EA4 no-repeat padding-box;
  opacity: 1;
  margin: 20px auto 20px auto; /* Abstand nach oben, zentriert */
  border-radius: 4px;
}

/* Optional: mobile Zentrierung bleibt bestehen */
@media (max-width: 768px) {
  .purple-bar {
    width: 120px;
    height: 6px;
    margin-top: 16px;
    margin-bottom: 16px;
  }
}