/* ============================================================
   COMPONENTS.CSS — Das 5. Element v2
   Navbar · Ticker · Promo-Widget · Footer · Cards · Buttons
   ============================================================ */

/* ============================================================
   0. AGE GATE — Altersverifikation (höchste Priorität)
   ============================================================ */

.age-gate {
  position:         fixed;
  top:              0;
  right:            0;
  bottom:           0;
  left:             0;
  z-index:          10000;
  background-color: var(--bg);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          var(--space-md);
  opacity:          1;
  transition:       opacity 0.5s var(--ease);
}

/* Beim Bestätigen: fade out */
.age-gate--leaving {
  opacity:        0;
  pointer-events: none;
}

.age-gate__box {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            var(--space-md);
  max-width:      480px;
  width:          100%;
}

.age-gate__logo {
  height:  56px;
  width:   auto;
  opacity: 0.85;
}

.age-gate__badge {
  font-family:    var(--font-display);
  font-size:      clamp(80px, 18vw, 140px);
  line-height:    1;
  letter-spacing: 0.02em;
  color:          var(--pink);
  margin-top:     calc(var(--space-sm) * -0.5);
  margin-bottom:  calc(var(--space-sm) * -0.5);
}

.age-gate__heading {
  font-family:    var(--font-display);
  font-size:      clamp(28px, 5vw, 48px);
  line-height:    1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color:          var(--white);
  word-break:     keep-all;
  hyphens:        none;
}

.age-gate__text {
  font-family: var(--font-body);
  font-size:   clamp(15px, 2vw, 18px);
  font-weight: 300;
  color:       var(--white-dim);
  line-height: 1.6;
  max-width:   36ch;
}

.age-gate__actions {
  display:         flex;
  gap:             var(--space-sm);
  flex-wrap:       wrap;
  justify-content: center;
}

/* JA-Button: pink filled (größer als normal) */
.age-gate__actions .btn {
  min-width: 160px;
}

.age-gate__note {
  font-family:    var(--font-mono);
  font-size:      var(--fs-label);
  letter-spacing: 0.08em;
  color:          rgba(255, 255, 255, 0.25);
  line-height:    1.7;
  max-width:      44ch;
}

@media (max-width: 480px) {
  .age-gate__actions {
    flex-direction: column;
    align-items:    stretch;
    width:          100%;
  }

  .age-gate__actions .btn {
    min-width: unset;
    width:     100%;
    justify-content: center;
  }
}

/* ============================================================
   1. NAVBAR (fixed)
   ============================================================ */

.nav {
  position:         sticky;
  top:              0;
  z-index:          var(--z-nav);
  width:            100%;
  height:           52px; /* fest statt var(--nav-height) — verhindert Aufblähen bei früher JS-Messung vor Font-Load */
  background:       rgba(8, 8, 8, 0.92);
  backdrop-filter:  blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom:    1px solid var(--border);
  transition:       border-color var(--dur-mid) var(--ease);
  overflow:         visible;
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  max-width:        100%;
  padding-inline:   var(--container-pad);
  gap:              var(--space-md);
}

.nav.is-scrolled {
  border-bottom-color: var(--pink-border);
}

/* nav__inner: rückwärtskompatibel, falls doch verwendet */
.nav__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          100%;
  width:           100%;
  gap:             var(--space-md);
}

/* Logo */
.nav__logo {
  flex-shrink: 0;
  display:     block;
  line-height: 0;
}

.nav__logo-img {
  height: 30px;
  width:  auto;
}

/* Desktop Nav-Links */
.nav__links {
  display:     flex;
  align-items: center;
  gap:         20px;
  list-style:  none;
}

.nav__link {
  font-family:    var(--font-body);
  font-size:      12px;
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--white-dim);
  position:       relative;
  padding-bottom: 2px;
  transition:     color var(--dur-fast) var(--ease);
}

/* Pink Underline-Effekt — animiert von links */
.nav__link::after {
  content:          '';
  position:         absolute;
  bottom:           -2px;
  left:             0;
  width:            0;
  height:           2px;
  background-color: var(--pink);
  transition:       width var(--dur-mid) var(--ease);
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--white);
}

.nav__link:hover::after,
.nav__link.is-active::after {
  width: 100%;
}

/* ----------------------------------------------------------
   NAV-PROMO (statischer CTA-Link rechts in der Navbar)
   ---------------------------------------------------------- */

.nav-promo {
  flex-shrink:     0;
  border:          1px solid rgba(255, 0, 102, 0.4);
  color:           var(--white);
  font-family:     var(--font-mono);
  font-size:       11px;
  letter-spacing:  0.1em;
  padding:         8px 16px;
  white-space:     nowrap;
  text-decoration: none;
  text-transform:  uppercase;
  transition:      border-color var(--dur-fast) var(--ease),
                   color        var(--dur-fast) var(--ease);
}

.nav-promo:hover {
  border-color: var(--pink);
  color:        var(--pink);
}

/* ----------------------------------------------------------
   HAMBURGER (Mobile ab 768px)
   ---------------------------------------------------------- */

.nav__burger {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             6px;
  width:           40px;
  height:          40px;
  background:      none;
  border:          none;
  padding:         0;
  cursor:          pointer;
}

.nav__burger-line {
  display:          block;
  width:            24px;
  height:           1.5px;
  background-color: var(--white);
  transform-origin: center;
  transition:
    transform  var(--dur-mid) var(--ease),
    opacity    var(--dur-mid) var(--ease);
}

.nav__burger.is-open .nav__burger-line:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.nav__burger.is-open .nav__burger-line:nth-child(2) {
  opacity: 0;
}
.nav__burger.is-open .nav__burger-line:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Mobile Nav Overlay */
.nav__mobile {
  position:         fixed;
  inset:            0;
  z-index:          var(--z-overlay);
  background-color: var(--bg);
  display:          flex;
  flex-direction:   column;
  justify-content:  center;
  align-items:      flex-start;
  padding-inline:   var(--container-pad);
  gap:              var(--space-sm);
  opacity:          0;
  pointer-events:   none;
  transform:        translateX(-100%);
  transition:
    opacity   var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}

.nav__mobile.is-open {
  opacity:        1;
  pointer-events: auto;
  transform:      translateX(0);
}

.nav__mobile-link {
  font-family:    var(--font-display);
  font-size:      clamp(40px, 8vw, 72px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color:          var(--white-dim);
  line-height:    1;
  transition:     color var(--dur-fast) var(--ease);
  word-break:     keep-all;
  hyphens:        none;
}

.nav__mobile-link:hover {
  color: var(--white);
}

.nav__mobile-cta {
  margin-top: var(--space-md);
}

@media (max-width: 1240px) {
  .nav__links { display: none; }
  .nav-promo  { display: none; }
  .nav__burger { display: flex; }
}

@media (max-width: 480px) {
  .nav__logo-img {
    height: 26px;   /* Etwas kleiner — mehr Platz für Burger-Button */
  }
}

/* ============================================================
   2. NEWS-TICKER
   position: sticky — scrollt zunächst mit, klebt dann oben
   ============================================================ */

.ticker {
  position:         sticky;
  top:              0;
  width:            100%;
  height:           18px; /* fest statt var(--ticker-height) — verhindert Aufblähen bei früher JS-Messung vor Font-Load */
  overflow:         hidden;
  background-color: var(--ticker-bg);
  z-index:          var(--z-ticker);
  display:          flex;
  align-items:      center;
}

/* Ticker pausiert bei Hover/Fokus (Accessibility) */
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track {
  animation-play-state: paused;
}

.ticker__track {
  display:    flex;
  align-items: center;
  white-space: nowrap;
  /* translateX von 0 → -50% (zweite Kopie schließt nahtlos an) */
  animation:  tickerScroll 25s linear infinite;
}

@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker__item {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-md);
  padding-inline: var(--space-md);
  font-family:    var(--font-mono);
  font-size:      var(--fs-ticker);          /* 11px */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--white);
  white-space:    nowrap;
}

/* Trenn-Punkt zwischen Items */
.ticker__sep {
  color:        rgba(255, 255, 255, 0.5);
  margin-inline: var(--space-sm);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* ============================================================
   3. IMAGE STRIP (horizontales Scrollen)
   ============================================================ */

.img-strip {
  display:                        grid;
  grid-auto-flow:                 column;
  grid-auto-columns:              70vw;
  gap:                            4px;
  overflow-x:                     scroll;
  overflow-y:                     hidden;
  scroll-snap-type:               x mandatory;
  scrollbar-width:                none;        /* Firefox */
  -ms-overflow-style:             none;        /* IE/Edge */
  cursor:                         grab;
  -webkit-overflow-scrolling:     touch;       /* Momentum-Scroll auf iOS */
  touch-action:                   pan-x;       /* Verhindert Seiten-Navigation beim horizontalen Wischen */
  /* Kein padding — Edge-to-Edge */
}

.img-strip::-webkit-scrollbar {
  display: none;
}

.img-strip.is-dragging {
  cursor: grabbing;
}

.img-strip__item {
  scroll-snap-align:  start;
  position:           relative;
  height:             400px;
  overflow:           hidden;
  flex-shrink:        0;
}

.img-strip__item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform var(--dur-slow) var(--ease);
  pointer-events: none;
  user-select:    none;
  draggable:      false;
}

.img-strip__item:hover img {
  transform: scale(1.03);
}

/* Label unten links auf jedem Bild */
.img-strip__label {
  position:       absolute;
  bottom:         var(--space-sm);
  left:           var(--space-sm);
  font-family:    var(--font-mono);
  font-size:      var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--white-dim);
  padding:        4px 10px;
  background:     rgba(8, 8, 8, 0.6);
  backdrop-filter: blur(4px);
}

@media (max-width: 768px) {
  .img-strip {
    grid-auto-columns: 85vw;
  }

  .img-strip__item {
    height: 260px;
  }
}

/* ============================================================
   4. BENTO GRID (Bereiche-Sektion)
   ============================================================ */

.bento {
  display:               grid;
  grid-template-columns: 55% 45%;
  grid-template-rows:    auto;
  gap:                   2px;
}

.bento-item {
  position:   relative;
  overflow:   hidden;
  display:    block;
  background: var(--surface);
}

/* Linke große Kachel: überspannt 2 Rows */
.bento-item--large {
  grid-row: span 2;
  height: 520px;
}

.bento-item--small {
  height: 260px;
}

.bento-item__img {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  display:         block;
  transition:      transform var(--dur-slow) var(--ease);
}

.bento-item:hover .bento-item__img {
  transform: scale(1.03);
}

/* Pink Border-Inset beim Hover */
.bento-item::after {
  content:          '';
  position:         absolute;
  inset:            0;
  border:           1px solid transparent;
  pointer-events:   none;
  transition:       border-color var(--dur-mid) var(--ease);
  z-index:          2;
}

.bento-item:hover::after {
  border-color: var(--pink-border);
}

.bento-item__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to top,
    rgba(8, 8, 8, 0.85) 0%,
    rgba(8, 8, 8, 0.2)  50%,
    transparent         100%
  );
  z-index:    1;
}

.bento-item__content {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  padding:    var(--space-md);
  z-index:    2;
}

.bento-item__label {
  font-family:    var(--font-mono);
  font-size:      var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--pink);
  display:        block;
  margin-bottom:  6px;
}

.bento-item__title {
  font-family:    var(--font-display);
  font-size:      clamp(28px, 3.5vw, 48px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color:          var(--white);
  line-height:    1;
  word-break:     keep-all;
  hyphens:        none;
}

@media (max-width: 900px) {
  .bento {
    grid-template-columns: 1fr;
  }

  .bento-item--large {
    grid-row: span 1;
    height:   320px;
  }

  .bento-item--small {
    height: 200px;
  }
}

/* ============================================================
   5. PRICE CARDS
   ============================================================ */

.price-cards {
  display:     grid;
  grid-template-columns: repeat(3, 1fr);
  gap:         2px;
  align-items: end;   /* Karten unten ausrichten — Staffel-Effekt */
}

.price-card {
  position:        relative;
  background:      var(--surface);
  border:          1px solid var(--border);
  padding:         var(--space-lg) var(--space-md);
  display:         flex;
  flex-direction:  column;
  gap:             var(--space-sm);
  transition:      border-color var(--dur-mid) var(--ease);
  overflow:        hidden;
}

/* Hintergrundbild — stark gedimmt */
.price-card__bg {
  position:   absolute;
  inset:      0;
  z-index:    0;
  opacity:    0.08;
}

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

.price-card__inner {
  position: relative;
  z-index:  1;
  display:  flex;
  flex-direction: column;
  gap:      var(--space-sm);
  height:   100%;
}

/* Featured Card — Big Gentleman */
.price-card--featured {
  border-color: var(--pink);
}

.price-card--featured:hover {
  border-color: var(--pink);
}

.price-card:not(.price-card--featured):hover {
  border-color: var(--border-strong);
}

/* Badge oben an der Card */
.price-card__badge {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  align-self:     flex-start;
  font-family:    var(--font-mono);
  font-size:      var(--fs-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding:        3px 10px;
  border:         1px solid var(--pink-border);
  color:          var(--pink);
  background:     var(--pink-soft);
  margin-bottom:  var(--space-xs);
}

.price-card__badge--subtle {
  border-color: var(--border-strong);
  color:        var(--white-dim);
  background:   transparent;
}

/* Titel */
.price-card__name {
  font-family:    var(--font-body);
  font-size:      var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--white-dim);
}

/* Preis — Bebas Neue, groß, KEIN Gold */
.price-card__price {
  font-family:    var(--font-display);
  font-size:      80px;
  line-height:    1;
  letter-spacing: 0.01em;
  color:          var(--white);
}

.price-card--featured .price-card__price {
  color: var(--pink);
}

.price-card__price-unit {
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono);
  color:          var(--white-dim);
  letter-spacing: 0.1em;
}

/* Trennlinie */
.price-card__divider {
  width:            100%;
  height:           1px;
  background-color: var(--border);
  margin-block:     var(--space-xs);
}

/* Feature-Liste */
.price-card__features {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  flex:           1;
}

.price-card__feature {
  display:     flex;
  align-items: flex-start;
  gap:         8px;
  font-size:   var(--fs-body-sm);
  font-weight: 300;
  color:       var(--white-dim);
  line-height: 1.4;
}

.price-card__feature-dot {
  color:       var(--pink);
  flex-shrink: 0;
  margin-top:  2px;
  font-size:   18px;
  line-height: 1;
}

/* Hinweis-Text (z.B. "+10€ nach 2h") */
.price-card__note {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 0.1em;
  color:          var(--white-dim);
  opacity:        0.6;
  margin-top:     auto;
}

@media (max-width: 900px) {
  .price-cards {
    grid-template-columns: 1fr;
    gap:                   var(--space-sm);
    align-items:           stretch;
  }

  .price-card__price {
    font-size: 64px;
  }
}

/* ----------------------------------------------------------
   Fehlende Price-Card-Klassen (Bug 4 + 5)
   HTML nutzt andere Klassenbezeichnungen als urspr. CSS
   ---------------------------------------------------------- */

/* Label über dem Namen ("All Inclusive · 2 Stunden") */
.price-card__top {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.price-card__label {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--pink);
}

/* Preis-Zeile: Zahl + € + Hinweis nebeneinander */
.price-card__price-wrap {
  display:     flex;
  align-items: baseline;
  gap:         2px;
  flex-wrap:   wrap;
}

/* Große Preiszahl (alias für .price-card__price) */
.price-card__amount {
  font-family:    var(--font-display);
  font-size:      80px;
  line-height:    1;
  letter-spacing: 0.01em;
  color:          var(--white);
}

.price-card--featured .price-card__amount {
  color: var(--pink);
}

/* €-Zeichen */
.price-card__currency {
  font-family: var(--font-display);
  font-size:   40px;
  line-height: 1;
  color:       var(--white);
  opacity:     0.75;
}

.price-card--featured .price-card__currency {
  color:   var(--pink);
  opacity: 1;
}

/* SVG-Häkchen-Icon neben Feature-Text (Bug 5) */
.price-card__feature-icon {
  width:       14px;
  height:      14px;
  flex-shrink: 0;
  margin-top:  2px;
  display:     block;
  stroke:      var(--pink);
  color:       var(--pink);
}

/* CTA-Bereich am Karten-Ende */
.price-card__cta {
  margin-top:  auto;
  padding-top: var(--space-sm);
}

/* Badge-Variante "outline" (alias für badge--subtle) */
.price-card__badge--outline {
  border-color: var(--border-strong);
  color:        var(--white-dim);
  background:   transparent;
}

@media (max-width: 900px) {
  .price-card__amount { font-size: 64px; }
  .price-card__currency { font-size: 32px; }
}

/* ============================================================
   STEPS — 3-Schritte-Prozess (Bug 6)
   Nebeneinander auf Desktop, untereinander auf Mobile
   ============================================================ */

.steps {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   2px;
  margin-top:            var(--space-lg);
}

.step {
  background:     var(--surface-2);
  padding:        var(--space-lg) var(--space-md);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
  position:       relative;
  border-left:    2px solid var(--border);
  transition:     border-color var(--dur-mid) var(--ease);
}

.step:hover {
  border-left-color: var(--pink);
}

.step__number {
  font-family:    var(--font-display);
  font-size:      48px;
  line-height:    1;
  color:          var(--pink);
  opacity:        0.4;
}

.step__icon {
  font-size:   28px;
  line-height: 1;
  display:     block;
}

.step__title {
  font-family:    var(--font-body);
  font-size:      clamp(18px, 2vw, 24px);
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--white);
}

.step__text {
  font-size:   var(--fs-body-sm);
  font-weight: 300;
  color:       var(--white-dim);
  line-height: 1.65;
}

@media (max-width: 768px) {
  .steps {
    grid-template-columns: 1fr;
    gap:                   var(--space-sm);
  }

  .step {
    border-left:  none;
    border-top:   2px solid var(--border);
    padding:      var(--space-md);
  }

  .step:hover {
    border-top-color: var(--pink);
    border-left-color: transparent;
  }
}

/* Modifier: 4 bzw. 5 Schritte statt 3 */
.steps--four { grid-template-columns: repeat(4, 1fr); }
.steps--five { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1100px) {
  .steps--four,
  .steps--five {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .steps--four,
  .steps--five {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ICON-GRID — Inklusivleistungen (Bug 7)
   4×2 Kacheln, Emoji + Label
   ============================================================ */

.icon-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   2px;
}

.icon-item {
  background:     var(--white-ghost);
  padding:        var(--space-md) var(--space-sm);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-sm);
  text-align:     center;
  transition:     background var(--dur-mid) var(--ease);
}

.icon-item:hover {
  background: var(--pink-soft);
}

.icon-item__symbol {
  font-size:   28px;
  line-height: 1;
  display:     block;
}

.icon-item__label {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--white-dim);
  line-height:    1.4;
}

@media (max-width: 768px) {
  .icon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   6. INKLUSIV-GRID (8 Kacheln)
   ============================================================ */

.inklusiv-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   2px;
}

.inklusiv-item {
  background:      var(--white-ghost);
  padding:         var(--space-md) var(--space-sm);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-sm);
  text-align:      center;
  transition:      background var(--dur-mid) var(--ease);
}

.inklusiv-item:hover {
  background: var(--pink-soft);
}

.inklusiv-item__icon {
  width:  36px;
  height: 36px;
  color:  var(--white);
}

.inklusiv-item__label {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--white-dim);
  line-height:    1.4;
}

@media (max-width: 768px) {
  .inklusiv-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   7. MASONRY / COLLAGE GRID
   ============================================================ */

.masonry {
  display:               grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows:        80px;
  gap:                   4px;
}

.masonry-item {
  overflow: hidden;
  position: relative;
}

.masonry-item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform var(--dur-slow) var(--ease);
}

.masonry-item:hover img {
  transform: scale(1.04);
}

/* Vordefinierte Größen-Klassen */
.masonry-item--tall   { grid-column: span 3; grid-row: span 6; }
.masonry-item--wide   { grid-column: span 9; grid-row: span 3; }
.masonry-item--medium { grid-column: span 5; grid-row: span 5; }
.masonry-item--small  { grid-column: span 4; grid-row: span 2; }
.masonry-item--square { grid-column: span 3; grid-row: span 3; }

@media (max-width: 900px) {
  .masonry {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows:        200px;
    gap:                   4px;
  }

  .masonry-item--tall,
  .masonry-item--wide,
  .masonry-item--medium,
  .masonry-item--small,
  .masonry-item--square {
    grid-column: span 1;
    grid-row:    span 1;
  }

  .masonry-item:first-child {
    grid-column: span 2;
    grid-row:    span 2;
  }
}

/* ============================================================
   8. SECTION HEADER KOMPONENTE
   ============================================================ */

.section-header {
  margin-bottom: var(--space-lg);
}

.section-header__eyebrow {
  display:        block;
  font-family:    var(--font-mono);
  font-size:      var(--fs-label);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color:          var(--pink);
  margin-bottom:  var(--space-sm);
}

.section-header__title {
  font-family:    var(--font-display);
  font-size:      var(--fs-h2);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color:          var(--white);
  line-height:    0.95;
  word-break:     keep-all;
  hyphens:        none;
}

.section-header__sub {
  font-size:   var(--fs-body);
  font-weight: 300;
  color:       var(--white-dim);
  margin-top:  var(--space-sm);
  max-width:   60ch;
}

/* Zentrierter Header-Block (z.B. Inklusiv-Section in eintritt.html) */
.section-header--center .section-header__sub {
  margin-inline: auto;
  text-align:    center;
}

/* ============================================================
   9. CONTACT FORM
   ============================================================ */

.contact-form {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-md);
}

.form-row {
  display: grid;
  gap:     var(--space-md);
}

.form-row--2 {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
  .form-row--2 { grid-template-columns: 1fr; }
}

.form-field {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xs);
}

.form-label {
  font-family:    var(--font-mono);
  font-size:      var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--white-dim);
}

/* Minimalistisch — nur border-bottom, kein box */
.form-input,
.form-textarea {
  width:            100%;
  background:       transparent;
  border:           none;
  border-bottom:    1px solid var(--border-strong);
  color:            var(--white);
  padding:          12px 0;
  font-family:      var(--font-body);
  font-size:        var(--fs-body);
  font-weight:      300;
  transition:       border-color var(--dur-fast) var(--ease);
  border-radius:    0;
}

.form-input:focus,
.form-textarea:focus {
  border-bottom-color: var(--pink);
  outline: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--white-dim);
}

.form-textarea {
  resize:      vertical;
  min-height:  120px;
  line-height: 1.6;
}

/* ============================================================
   10. FOOTER
   ============================================================ */

.footer {
  background-color: var(--surface);
  border-top:       1px solid var(--pink-border);
  padding-block:    var(--space-xl) var(--space-lg);
}

.footer__inner {
  max-width:      var(--container-max);
  margin-inline:  auto;
  padding-inline: var(--container-pad);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-lg);
}

/* Oberer Teil: Logo + Info + Links */
.footer__top {
  display:               grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap:                   var(--space-lg);
  align-items:           start;
}

.footer__logo-img {
  height: 52px;
  width:  auto;
  margin-bottom: var(--space-md);
}

.footer__address {
  font-family:  var(--font-mono);
  font-size:    var(--fs-mono);
  color:        var(--white-dim);
  line-height:  1.9;
  font-style:   normal;
  letter-spacing: 0.03em;
}

.footer__address a {
  color:      var(--white-dim);
  transition: color var(--dur-fast) var(--ease);
}

.footer__address a:hover {
  color: var(--white);
}

.footer__social {
  display:     flex;
  align-items: center;
  gap:         var(--space-sm);
  margin-top:  var(--space-md);
}

.footer__social-link {
  font-family:    var(--font-mono);
  font-size:      var(--fs-label);
  letter-spacing: 0.15em;
  color:          var(--white-dim);
  padding:        6px 10px;
  border:         1px solid var(--border-strong);
  transition:
    color        var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.footer__social-link:hover {
  color:        var(--white);
  border-color: var(--white);
}

/* SEO-Links (diskrete Footer-Verlinkung) */
.footer__seo-links {
  margin-top:   24px;
  padding-top:  16px;
  border-top:   1px solid var(--border);
  font-family:  var(--font-mono);
  font-size:    10px;
  color:        var(--white-dim);
  display:      flex;
  flex-wrap:    wrap;
  gap:          12px;
}

.footer__seo-label {
  color:          var(--white-dim);
  opacity:        0.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer__seo-links a {
  color:       var(--white-dim);
  text-decoration: none;
  opacity:     0.4;
  transition:  opacity var(--dur-fast) var(--ease),
               color   var(--dur-fast) var(--ease);
}

.footer__seo-links a:hover {
  opacity: 1;
  color:   var(--pink);
}

/* Öffnungszeiten-Spalte */
.footer__col-title {
  font-family:    var(--font-mono);
  font-size:      var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--white-dim);
  display:        block;
  margin-bottom:  var(--space-md);
}

.footer__hours {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xs);
}

.footer__hours-row {
  display:     flex;
  justify-content: space-between;
  gap:         var(--space-sm);
  font-family: var(--font-mono);
  font-size:   var(--fs-mono);
  color:       var(--white-dim);
}

.footer__hours-day {
  color: var(--white);
}

/* Nav-Spalte */
.footer__links {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.footer__link {
  font-size:   var(--fs-body-sm);
  font-weight: 300;
  color:       var(--white-dim);
  transition:  color var(--dur-fast) var(--ease);
}

.footer__link:hover {
  color: var(--white);
}

/* Unterer Teil: Copyright + Legal */
.footer__bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--space-sm);
  padding-top:     var(--space-md);
  border-top:      1px solid var(--border);
}

.footer__copy {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 0.1em;
  color:          var(--white-dim);
  opacity:        0.5;
}

.footer__legal {
  display:     flex;
  align-items: center;
  gap:         var(--space-md);
}

.footer__legal-link {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--white-dim);
  transition:     color var(--dur-fast) var(--ease);
}

.footer__legal-link:hover {
  color: var(--white);
}

/* Zusätzliche Footer-Gruppe mit Abstand oben (z.B. Tickets-Block) */
.footer__extra {
  margin-top: var(--space-md);
}

@media (max-width: 1100px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .footer__top {
    grid-template-columns: 1fr;
    gap:                   var(--space-lg);
  }
}

@media (max-width: 640px) {
  .footer__bottom {
    flex-direction: column;
    align-items:    flex-start;
  }
}

/* ============================================================
   11. HINWEIS-BOX (Kondompflicht, Rechtliches)
   ============================================================ */

.hinweis-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-md);
}

.hinweis-row--three {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .hinweis-row,
  .hinweis-row--three {
    grid-template-columns: 1fr;
  }
}

.hinweis-box {
  border-left:     2px solid var(--pink);
  padding:         var(--space-md) var(--space-lg);
  background:      var(--white-ghost);
  font-size:       var(--fs-body-sm);
  font-weight:     300;
  color:           var(--white-dim);
  line-height:     1.7;
}

.hinweis-box__title {
  font-family:    var(--font-mono);
  font-size:      var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--white);
  display:        block;
  margin-bottom:  var(--space-xs);
}

/* ============================================================
   12b. FEATURE SPLIT — Bild + Text, seitenverkehrbar
   (Guthaben-Prinzip, Mitgliedschaft, u.a.)
   ============================================================ */

.feature-split {
  display:               grid;
  grid-template-columns: 42% 1fr;
  gap:                   var(--space-xl);
  align-items:           center;
}

.feature-split--reverse {
  grid-template-columns: 1fr 42%;
}

.feature-split--reverse .feature-split__content {
  order: 1;
}

.feature-split--reverse .feature-split__img-wrap {
  order: 2;
}

.feature-split__img-wrap {
  position:     relative;
  aspect-ratio: 4 / 5;
}

.feature-split__img-wrap img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.feature-split__content p {
  color:         var(--white-dim);
  font-weight:   300;
  margin-bottom: var(--space-sm);
}

.feature-split__content p:last-of-type {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .feature-split,
  .feature-split--reverse {
    grid-template-columns: 1fr;
    gap:                   var(--space-lg);
  }

  .feature-split--reverse .feature-split__content {
    order: 2;
  }

  .feature-split--reverse .feature-split__img-wrap {
    order: 1;
  }

  .feature-split__img-wrap {
    aspect-ratio: 16 / 10;
  }

  .feature-split__img-wrap.clip-left,
  .feature-split__img-wrap.clip-right {
    clip-path: none;
  }
}

/* ============================================================
   12c. PAGE HEADER — Bild + Kicker + Title + Tags + Sub
   (wiederverwendet auf allen Unterseiten)
   ============================================================ */

.page-header-section {
  position:    relative;
  height:      52vh;
  min-height:  400px;
  max-height:  620px;
  display:     flex;
  align-items: center;
  overflow:    hidden;
}

.page-header__bg {
  position: absolute;
  inset:    0;
}

.page-header__bg img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center 40%;
  display:    block;
  filter:     brightness(0.35);
}

.page-header__content {
  position:               relative;
  z-index:                2;
  display:                grid;
  grid-template-columns:  1fr 1fr;
  align-items:            end;
  gap:                    var(--space-lg);
  padding-bottom:         var(--space-lg);
}

.page-header__title {
  font-family:    var(--font-display);
  font-size:      clamp(64px, 10vw, 140px);
  line-height:    0.88;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color:          var(--white);
  margin-top:     var(--space-sm);
}

.page-header__right {
  padding-bottom: var(--space-xs);
}

.page-header__tags {
  display:       flex;
  gap:           var(--space-sm);
  flex-wrap:     wrap;
  margin-bottom: var(--space-md);
}

.page-header__tag {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--pink);
  border:         1px solid var(--pink-border);
  padding:        5px 12px;
}

.page-header__sub {
  font-size:   15px;
  font-weight: 300;
  color:       var(--white-dim);
  line-height: 1.65;
  max-width:   380px;
}

/* Diagonaler Clip unten */
.page-header__clip {
  position:       absolute;
  bottom:         -1px;
  left:           0;
  right:          0;
  height:         64px;
  background:     var(--bg);
  clip-path:      polygon(0 100%, 100% 0, 100% 100%);
  z-index:        3;
  pointer-events: none;
}

@media (max-width: 768px) {
  .page-header-section {
    height:         auto;
    min-height:     unset;
    padding-top:    var(--space-lg);
    padding-bottom: var(--space-md);
    align-items:    flex-start;
  }

  .page-header__content {
    grid-template-columns: 1fr;
    gap:                   var(--space-md);
    padding-bottom:        0;
    align-items:           start;
  }

  .page-header__title {
    font-size: clamp(48px, 14vw, 80px);
  }

  .page-header__clip {
    height: 40px;
  }
}

/* ============================================================
   12d. PAGE CTA — abschließender Call-to-Action (Unterseiten)
   ============================================================ */

.page-cta-title {
  font-family:    var(--font-display);
  font-size:      clamp(48px, 8vw, 96px);
  line-height:    0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color:          var(--white);
}

.page-cta-actions {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-md);
  flex-wrap:       wrap;
  margin-top:      var(--space-md);
}

@media (max-width: 480px) {
  .page-cta-actions {
    flex-direction: column;
    align-items:    center;
  }
}

/* ============================================================
   12e. SPECIAL CARD — Event-/Format-Karten
   (Friends Day, Aqua Noir, Mask Noir — Homepage & Events-Seite)
   ============================================================ */

.specials-header {
  max-width:     640px;
  margin-bottom: var(--space-xl);
}

.specials-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-sm);
}

.special-card {
  position:       relative;
  background:     var(--surface);
  border:         1px solid var(--border);
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  transition:     border-color var(--dur-mid) var(--ease),
                  transform    var(--dur-mid) var(--ease);
}

.special-card:hover {
  border-color: var(--pink);
  transform:    translateY(-4px);
}

.special-card__img-wrap {
  position:     relative;
  aspect-ratio: 3 / 2;
  overflow:     hidden;
  flex-shrink:  0;
}

.special-card__img-wrap img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.7s var(--ease);
  filter:     brightness(0.6);
}

.special-card:hover .special-card__img-wrap img {
  transform: scale(1.05);
  filter:    brightness(0.72);
}

/* "In Kürze" / Status-Flag über dem Bild */
.special-card__flag {
  position:        absolute;
  top:             var(--space-sm);
  left:            var(--space-sm);
  z-index:         2;
  font-family:     var(--font-mono);
  font-size:       var(--fs-label);
  letter-spacing:  0.15em;
  text-transform:  uppercase;
  padding:         4px 10px;
  border:          1px solid var(--pink-border);
  color:           var(--pink);
  background:      rgba(8, 8, 8, 0.7);
  backdrop-filter: blur(4px);
}

.special-card__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(8, 8, 8, 0.65) 100%
  );
  pointer-events: none;
}

.special-card__body {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xs);
  padding:        var(--space-md);
  flex:           1;
  border-top:     1px solid rgba(255, 0, 102, 0.15);
  transition:     border-top-color var(--dur-mid) var(--ease);
}

.special-card:hover .special-card__body {
  border-top-color: var(--pink);
}

.special-card__label {
  font-family:    var(--font-mono);
  font-size:      var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--pink);
  margin-bottom:  2px;
}

.special-card__title {
  font-family:    var(--font-display);
  font-size:      clamp(28px, 3vw, 40px);
  line-height:    1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color:          var(--white);
  word-break:     keep-all;
  hyphens:        none;
}

.special-card__sub {
  font-family: var(--font-body);
  font-size:   var(--fs-body-sm);
  font-weight: 300;
  color:       var(--white-dim);
  line-height: 1.55;
  margin-top:  var(--space-xs);
}

.special-card__highlight {
  font-family:    var(--font-mono);
  font-size:      var(--fs-label);
  letter-spacing: 0.12em;
  color:          var(--white);
  opacity:        0.5;
  margin-top:     auto;
  padding-top:    var(--space-sm);
  border-top:     1px solid var(--border);
}

.special-card__cta {
  margin-top: var(--space-sm);
  align-self: flex-start;
}

@media (max-width: 1024px) {
  .specials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .specials-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   12. HERO BASISSTILE
   ============================================================ */

.hero {
  position:    relative;
  overflow:    hidden;
  width:       100%;
}

.hero--full {
  height:     100svh;
  min-height: 560px;
}

.hero--half {
  height:     50svh;
  min-height: 360px;
}

.hero--large {
  height:     80svh;
  min-height: 480px;
}

.hero__media {
  position:   absolute;
  inset:      0;
}

.hero__media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.hero__content {
  position:       relative;
  z-index:        2;
  height:         100%;
  display:        flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom:  var(--space-xl);
  max-width:       var(--container-max);
  margin-inline:   auto;
  padding-inline:  var(--container-pad);
}

/* ============================================================
   MOBILE — Ticker + Nav fixed, angepasste Höhen
   ============================================================ */

@media (max-width: 768px) {
  .ticker {
    height: 28px;
  }
  .ticker__item {
    font-size:      10px;
    line-height:    28px;
    padding-inline: var(--space-sm);
  }
  .ticker__track {
    line-height: 28px;
  }
}