/* ============================================================
   responsive-tune.css
   Zusätzliche responsive Optimierungen für Forest Rave.
   Wird ALS LETZTES geladen und ergänzt das bestehende Webflow-CSS,
   ohne das Original zu verändern. Schwerpunkt: fließende Typografie
   (Handy -> großer PC-Monitor) und Schutz gegen horizontales Scrollen.
   ============================================================ */

/* ---- 1. Globaler Schutz gegen horizontales Scrollen ---- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
*, *::before, *::after {
  box-sizing: border-box;
}

/* Bilder, Videos & Embeds laufen nie über den Bildschirm hinaus */
img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

/* ---- 2. Fließende Typografie (clamp: min | skaliert | max) ----
   Untergrenze = angenehme Handy-Größe,
   Obergrenze = bisherige Desktop-Größe (Look am PC bleibt erhalten),
   dazwischen skaliert es stufenlos statt in harten Sprüngen.        */

/* Hero-Titel "Forest Rave Open Air" (war fix 100px) */
.home-banner-title {
  font-size: clamp(2.5rem, 9vw, 6.25rem) !important;  /* 40px -> 100px */
  line-height: 1.05em !important;
  max-width: 90vw !important;
}

/* Große Abschnitts-Überschriften h2 (war fix 40px) */
h2 {
  font-size: clamp(1.75rem, 4.5vw, 2.5rem) !important; /* 28px -> 40px */
}

/* h3 (war fix 36px) */
h3 {
  font-size: clamp(1.6rem, 4vw, 2.25rem) !important;   /* 26px -> 36px */
}

/* Sehr große dekorative Überschrift (war fix 140px!) */
.heading-5 {
  font-size: clamp(3.25rem, 13vw, 8.75rem) !important; /* 52px -> 140px */
  line-height: 1.05em !important;
}

/* Countdown-Zahlen Tage/Stunden/Minuten/Sekunden (war 68px/53px) */
.day-number {
  font-size: clamp(2rem, 8.5vw, 4.25rem) !important;   /* 32px -> 68px */
  line-height: 1.1em !important;
}

/* Großer Einleitungs-Absatz (war fix 26px) */
.paragraph-large-40-px {
  font-size: clamp(1.05rem, 2.4vw, 1.625rem) !important; /* 17px -> 26px */
}

/* Zähler-Zahlen "10+ / 3 / 1" im Video-Block */
.number-counter {
  font-size: clamp(2.25rem, 6vw, 4rem) !important;
}

/* ---- 3. Countdown-Reihe auf kleinen Handys sauber halten ---- */
@media screen and (max-width: 479px) {
  .countdown-row {
    flex-wrap: nowrap !important;
  }
  .number-holder {
    text-align: center;
  }
  .day-number {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* DJ-Karten & Inhalts-Grid sicher untereinander */
  .cart-wrapper {
    grid-template-columns: 1fr !important;
  }
}

/* ---- 4. Tablets / kleine Laptops: DJ-Karten 2-spaltig ---- */
@media screen and (min-width: 480px) and (max-width: 991px) {
  .cart-wrapper {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ---- 5. Komfortable Tap-Flächen auf Touchgeräten ---- */
@media (hover: none) and (pointer: coarse) {
  .nav-link,
  .primary-button,
  .secondary-button-blue,
  .link-tabs,
  .social-icon-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ---- 6. Sehr große Monitore: Inhalt nicht unendlich breit ziehen ---- */
@media screen and (min-width: 1920px) {
  .base-container,
  .nav-container,
  .home-banner-container-copy {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   DJ-Umschalter (Forest Rave <-> Waldfest)
   ============================================================ */
.dj-toggle {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin: 30px 0 10px;
}
.dj-toggle-btn {
  position: relative;
  background-color: transparent;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 50px;
  padding: 13px 46px;
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .3s, color .3s;
}
.dj-toggle-btn:hover { color: #fff; }
.dj-toggle-btn.is-active { border-color: #fff; }

/* Umrandungs-Animation wie bei den Ticket-Tabs */
.dj-toggle .tab-trace {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.dj-toggle .tab-trace rect {
  fill: none; stroke: #fff; stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  opacity: 0;
  transition: stroke-dashoffset .7s ease, opacity .25s ease;
}
.dj-toggle-btn:hover .tab-trace rect { stroke-dashoffset: 0; opacity: 1; }
.dj-toggle-btn.is-active .tab-trace { display: none; }
.dj-group.is-hidden { display: none !important; }

/* ---- DJ-Karte (Front): ruhig, klickbar ---- */
.dj-card { cursor: pointer; }
.dj-card .image-block-cart {
  overflow: hidden;
  border-radius: 10px;
  position: relative;
}
.dj-card .image-cart-home {
  object-position: center top;
  transition: transform .5s ease;
}
.dj-card:hover .image-cart-home {
  transform: scale(1.06);
}
/* dezenter Verlauf + Hinweis unten im Bild */
.dj-card .dj-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 16px;
  background: linear-gradient(to top, rgba(15,6,28,0.55) 0%, rgba(15,6,28,0) 45%);
  opacity: 1;
  transition: opacity .35s ease;
}
.dj-card:hover .dj-card-overlay { opacity: 1; }
.dj-card .dj-card-hint {
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 50px;
  padding: 7px 18px;
  backdrop-filter: blur(2px);
}
.dj-card .dj-name {
  color: #fff;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  margin-top: 14px;
  line-height: 1.2;
}
.dj-card .subtitle-cart { margin-top: 4px; }

/* ============================================================
   DJ-Modal (Vollbild-Ansicht beim Antippen)
   ============================================================ */
.dj-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.dj-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity .35s ease;
}
.dj-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8,3,16,0.86);
  backdrop-filter: blur(6px);
}
.dj-modal-card {
  position: relative;
  width: min(960px, 100%);
  max-height: 90vh;
  display: flex;
  background: #150a24;
  border: 1px solid rgba(110,22,138,0.5);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  transform: scale(.94);
  opacity: 0;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
.dj-modal.is-open .dj-modal-card {
  transform: scale(1);
  opacity: 1;
}
/* Foto-Seite */
.dj-modal-photo {
  flex: 0 0 44%;
  position: relative;
  min-height: 420px;
}
.dj-modal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* Textseite mit unscharfem Foto-Hintergrund für Atmosphäre */
.dj-modal-body {
  flex: 1 1 56%;
  position: relative;
  padding: clamp(24px, 4vw, 48px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: #150a24;
}
.dj-modal-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.dj-modal-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--dj-bg, none);
  background-size: cover;
  background-position: center;
  filter: blur(26px) brightness(.35) saturate(1.2);
  transform: scale(1.2);
  opacity: .35;
  z-index: 0;
}
.dj-modal-body > * { position: relative; z-index: 1; }
.dj-modal-role {
  color: #c79be0;
  font-size: 0.82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.dj-modal-name {
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 18px;
}
.dj-modal-bio {
  color: #ece6f2;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.7;
  margin: 0;
}
.dj-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .25s ease;
}
.dj-modal-close:hover { background: rgba(110,22,138,0.9); }

/* Handy: gestapelt (Foto oben, Text darunter) */
@media screen and (max-width: 767px) {
  .dj-modal { padding: 0; }
  .dj-modal-card {
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
  }
  .dj-modal-photo {
    flex: 0 0 38vh;
    min-height: 38vh;
  }
  .dj-modal-photo::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 90px;
    background: linear-gradient(to top, #150a24, rgba(21,10,36,0));
  }
  .dj-modal-body { flex: 1 1 auto; }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .dj-modal, .dj-modal-card, .dj-card .image-cart-home { transition: none; }
}

/* ============================================================
   Ticket-Tabs: links Hintergrundbild + Text, rechts das Poster
   ============================================================ */
.tab-content.tab-ticket {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  min-height: 500px;
  background: #0c0618;
}
.tab-ticket .ticket-left {
  position: relative;
  flex: 1 1 62%;
  min-height: 500px;
  overflow: hidden;
}
.tab-ticket .ticket-left .hover-tabs {
  position: absolute;
  inset: 0;
  height: 100%;
}
.tab-ticket .ticket-left .image-background-tabs {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.78) saturate(1.08);
}
/* dunkler Verlauf für besseren Textkontrast (links stärker) */
.tab-ticket .ticket-left::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(8,3,16,.85) 0%, rgba(8,3,16,.6) 45%, rgba(8,3,16,.3) 100%);
  pointer-events: none;
}
.tab-ticket .ticket-left .text-content {
  position: relative;
  z-index: 3;
}
.tab-ticket .ticket-right {
  flex: 0 0 34%;
  display: flex;
  background: #0c0618;
}
.tab-ticket .ticket-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media screen and (max-width: 767px) {
  .tab-content.tab-ticket { flex-direction: column; min-height: auto; }
  .tab-ticket .ticket-left { flex: none; width: 100%; min-height: 250px; }
  .tab-ticket .ticket-right { flex: none; width: 100%; height: auto; }
  .tab-ticket .ticket-poster-img { width: 100%; height: auto; display: block; object-fit: contain; }
}

/* ============================================================
   Tab-Menü (Friday / Saturday / Sunday):
   Label bleibt beim Hover sichtbar + Rahmen wird langsam umrundet
   ============================================================ */
.tabs-menu-block .text-menu-tabs:hover { color: #fff !important; }
.tabs-menu-block .tab-link { position: relative; }
.tabs-menu-block .tab-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.tabs-menu-block .tab-trace rect {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  transition: stroke-dashoffset .7s ease, opacity .25s ease;
}
.tabs-menu-block .tab-link:hover .tab-trace rect {
  stroke-dashoffset: 0;
  opacity: 1;
}
/* aktiver Tab hat bereits seinen festen Rahmen */
.tabs-menu-block .tab-link.w--current .tab-trace { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tabs-menu-block .tab-trace rect { transition: opacity .25s ease; }
}


/* ============================================================
   Links beim Hover sichtbar halten (--primary ist transparent)
   ============================================================ */
.nav-link:hover,
.nav-link.purple-hover:hover,
.nav-link.purple-hover-last:hover,
.nav-link.red-hover:hover,
.nav-link.red-hover-last:hover,
.nav-dropdown-link:hover,
.dropdown-nav-link:hover,
.link-tabs:hover,
.link-tabs.purple-color:hover,
.link-tabs.red-hover:hover,
.social-icon-link:hover,
.social-icon-link.purple-color:hover,
.social-icon-link.purple-text-size:hover,
.social-icon-link.red-color:hover,
.social-icon-link.red-text-size:hover,
.information-link:hover,
.information-link.purple-color:hover,
.information-link.red-text:hover,
.information-link.blue-color:hover,
.subscribe-link:hover,
.link-home:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
}

/* ============================================================
   Konsistente, dezente Eckenrundung (wie bei den DJ-Bildern)
   ============================================================ */
.image-gallery-block,
.image-gallery-block img,
.home-video-wrapper,
.background-video,
.image-cart-home,
.image-block-cart {
  border-radius: 10px;
}
.tab-content,
.tab-content.tab-ticket {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
/* Galerie: Container abrunden + abschneiden, Bilder füllen die Zelle */
.image-gallery-block {
  overflow: hidden;
}
.image-gallery-block img {
  width: 100% !important;
  height: auto;
  display: block;
}

/* ============================================================
   DJ-Karten auf dem Handy: 2 Spalten, kompakt, nur Name
   ============================================================ */
@media screen and (max-width: 767px) {
  .cart-wrapper.dj-group:not(.is-hidden) {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
    padding-left: 22px;
    padding-right: 22px;
  }
  .cart-wrapper.dj-group.is-hidden { display: none !important; }
  .cart-wrapper.dj-group .cart-block {
    width: auto !important;
    flex: none !important;
    margin: 0 !important;
  }
  .cart-wrapper.dj-group .image-block-cart {
    aspect-ratio: 3 / 4;
    height: auto !important;
  }
  .cart-wrapper.dj-group .subtitle-cart { display: none !important; }
  .cart-wrapper.dj-group .dj-name {
    font-size: 0.95rem !important;
    margin-top: 8px !important;
    text-align: center;
  }
}

/* ============================================================
   Korrekturen Handy: DJ-Bild zentriert + Nav-Menü schmaler
   ============================================================ */
@media screen and (max-width: 767px) {
  /* DJ-Bild füllt die Zelle (vorher float:left, 220px -> linksbündig) */
  .cart-wrapper.dj-group .image-cart-home {
    float: none !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 auto !important;
    display: block !important;
    position: static !important;
  }
}

/* Mobiles Navigations-Menü: nur so breit wie nötig (statt 3/4 Display) */
@media screen and (max-width: 991px) {
  .nav-menu {
    width: max-content !important;
    max-width: 72vw;
    min-width: 210px;
    padding: 10px 8px 28px;
  }
  .menu-wrap { width: 100%; }
  .nav-link { width: 100% !important; white-space: nowrap; }
  .tablet-menu { width: 100%; }
}

/* Performance: Hero-Bild auf dem Handy als kleinere Variante laden */
@media screen and (max-width: 767px) {
  .home-banner-section {
    background-image: url('../images/Wallpaper-p-800.jpg') !important;
  }
}


/* ============================================================
   1) Blaues Punktmuster beim Video entfernen (.background-video)
   2) Weißen/hellen Rahmen um die Ticket-Box transparent machen
   ============================================================ */
.background-video {
  display: none !important;
  background-image: none !important;
}

.tabs-content-block,
.tabs-content-block .w-tab-pane,
.tab-pane-friday,
.tab-content,
.tab-content.tab-ticket {
  border: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ============================================================
   Galerie: Titel links, mehr Abstand oben als unten,
   mehr Abstand nach unten zur nächsten Sektion
   ============================================================ */
.gallery-grid {
  margin-bottom: 64px;
  padding-top: 0;
}
.gallery-heading {
  align-self: flex-start;
  text-align: left;
  align-items: flex-start;
  max-width: 100%;
  margin-top: 72px;
  margin-bottom: 24px;
}
.gallery-heading h2 {
  text-align: left;
  margin: 0;
}

/* Footer auf allen Geräten flacher (~halbe Höhe) */
.footer {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* Kontakt-Sektion: Lücke zum Footer NUR auf kleinen Geräten verkleinern
   (Desktop behält den ursprünglichen Abstand) */
@media screen and (max-width: 767px) {
  .section.none-top-padding {
    padding-bottom: 12px;
  }
  .footer {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  /* großer Abstand der Social-Links zum Footer verkleinern */
  .social-icon-block {
    margin-bottom: 12px;
  }
}

/* ============================================================
   Festival-Video: echter Player im Vorschaubereich
   ============================================================ */
.home-video-wrapper { cursor: pointer; overflow: hidden; }
.festival-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  background: #000;
  display: none;
  z-index: 6;
}
.home-video-wrapper.is-playing .festival-video {
  display: block;
  z-index: 9;
}
.home-video-wrapper.is-playing .play-button,
.home-video-wrapper.is-playing .play-button-icon,
.home-video-wrapper.is-playing .play-button-hover {
  display: none !important;
}

/* ============================================================
   Play-Dreieck im Button sichtbar machen (war leeres Icon-Font-Element)
   ============================================================ */
.play-button-icon {
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
  margin-left: 6px;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
}

/* DJ-Karten: nur Namen, keine Rolle (auch auf dem Desktop) */
.cart-wrapper.dj-group .subtitle-cart {
  display: none !important;
}

/* ============================================================
   Korrekturen (Batch)
   ============================================================ */
/* 1) Weiße Ecken an der Ticket-Box (Desktop): innere Hälften passend abrunden,
      damit kein heller Rundungs-Artefakt mehr durchscheint */
@media screen and (min-width: 768px) {
  .tab-ticket .ticket-left {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
  }
  .tab-ticket .ticket-right {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    overflow: hidden;
  }
}

/* 3) Video füllt den Rahmen: beim Abspielen kein Cover/Poster mehr sichtbar */
.festival-video {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}
.home-video-wrapper.is-playing {
  background-image: none !important;
  background-color: #000 !important;
}

/* 5) Social-Links (FB - INST - TW): Trennstriche vertikal mittig */
.social-icon-block {
  align-items: center;
}