/* ============================================================
   Penthouse Games — Enhancement Layer
   Grain, Reveals, Preloader, Countdown, Button-FX, Serif-Akzente
   ============================================================ */

:root {
  --pg-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pg-font: -apple-system, "SF Pro Text", system-ui, "helvetica neue", "calibri light", Roboto, sans-serif;
}

/* Schwarze Grundfarbe überall — keine weißen Blitzer durch Masken,
   Video-Ladezustände oder verschobene Ebenen */
html,
body {
  background-color: #000 !important;
}
.deckblatt .con-kit-organism-background,
.pg-bg-video {
  background-color: #000;
}

/* Nur das Window scrollt — verhindert Doppel-Scroll/Leerraum nach dem Footer (Safari)
   und horizontale Scrollbalken durch überbreite Original-Layouts */
@supports (overflow: clip) {
  html {
    overflow-x: clip;
  }
  body {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
}

/* Eyebrow "Exklusiv für MMS® Kunden:" mittig über dem Logo */
.deckblatt [data-atom="plain-text"],
.deckblatt [data-atom="plain-text"] .con-kit-quark {
  text-align: center !important;
}

/* Hero: das Script-Logo sitzt exakt in der Bildschirmmitte, der Rest
   (Meta, Countdown, CTA) folgt darunter. Das Padding berechnet app.js
   dynamisch über --pg-hero-pad. */
section.deckblatt {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
section.deckblatt [data-atom="line"] {
  display: none !important; /* beide unsichtbaren Pull-down-Füller */
}
section.deckblatt .con-kit-frame {
  padding-top: var(--pg-hero-pad, 12px) !important;
  padding-bottom: 64px !important;
}

/* ---------- Film-Grain + Vignette ---------- */
.pg-grain {
  position: fixed;
  inset: -30px;
  z-index: 99990;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: pg-grain-shift 900ms steps(4) infinite;
}
@keyframes pg-grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-24px, 16px); }
  50% { transform: translate(16px, -24px); }
  75% { transform: translate(-16px, -16px); }
  100% { transform: translate(0, 0); }
}
.pg-vignette {
  position: fixed;
  inset: 0;
  z-index: 99989;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 60%, rgba(0, 0, 0, 0.5) 100%);
}

/* ---------- Deckblatt-Video: weich nach unten auslaufen ----------
   Schwarzer Verlauf ÜBER dem Video statt Transparenz-Maske — es wird
   nichts freigelegt (kein Weiß moeglich), nur Schwarz daruebergelegt. */
.deckblatt .con-kit-organism-background::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 42%,
    rgba(0, 0, 0, 0.13) 56%,
    rgba(0, 0, 0, 0.38) 67%,
    rgba(0, 0, 0, 0.64) 76%,
    rgba(0, 0, 0, 0.84) 84%,
    rgba(0, 0, 0, 0.95) 91%,
    #000 97%
  );
}

/* ---------- Preloader mit Übergabe ins Hero-Logo ---------- */
#pg-preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 700ms var(--pg-ease), visibility 700ms, background-color 900ms var(--pg-ease);
}
#pg-preloader.pg-done {
  opacity: 0;
  visibility: hidden;
}
/* Übergabe-Phase: Hintergrund gibt die Seite frei, Logo fliegt zur Hero-Position */
#pg-preloader.pg-handover {
  background-color: transparent;
  pointer-events: none;
}
#pg-preloader img {
  width: min(64vw, 560px);
  height: auto;
  transition: transform 950ms var(--pg-ease);
  will-change: transform;
  -webkit-mask-image: linear-gradient(105deg, #000 42%, transparent 58%);
  mask-image: linear-gradient(105deg, #000 42%, transparent 58%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  animation: pg-writeon 1300ms var(--pg-ease) 150ms forwards;
}
/* Hero-Logo bleibt verborgen, bis der Preloader übergeben hat —
   danach sichtbar ohne erneutes Write-on */
html.pg-js:not(.pg-handover-done) .deckblatt [data-atom="image"] img {
  visibility: hidden;
}
html.pg-js.pg-handover-done .deckblatt [data-atom="image"] img {
  visibility: visible;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  animation: none !important;
}
@keyframes pg-writeon {
  to {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
}

/* ---------- Scroll-Reveals ---------- */
html.pg-js [data-pg-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 600ms var(--pg-ease),
    transform 600ms var(--pg-ease);
  transition-delay: var(--pg-delay, 0ms);
  will-change: opacity, transform;
}
html.pg-js [data-pg-reveal].pg-in {
  opacity: 1;
  transform: none;
}
/* Header nie verstecken */
html.pg-js .kopfzeile [data-pg-reveal] {
  opacity: 1;
  transform: none;
}

/* Write-on für das große Script-Logo im Deckblatt */
html.pg-js .deckblatt [data-atom="image"] img {
  -webkit-mask-image: linear-gradient(105deg, #000 42%, transparent 58%);
  mask-image: linear-gradient(105deg, #000 42%, transparent 58%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}
html.pg-js .deckblatt [data-atom="image"].pg-in img {
  animation: pg-writeon 1600ms var(--pg-ease) 250ms forwards;
}

/* ---------- Fold-Info + Countdown (Deckblatt) ---------- */
.pg-fold {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-top: 42px;
  text-align: center;
  font-family: -apple-system, "SF Pro Text", system-ui, "helvetica neue", "calibri light", Roboto, sans-serif;
}
.pg-fold__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pg-fold__meta .pg-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}
.pg-fold__seats {
  /* exakt wie die Eyebrow-Zeile "Exklusiv für MMS® Kunden:" */
  font-family: var(--pg-font);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 24px;
  text-transform: none;
  color: #fff;
}
.pg-countdown {
  display: flex;
  gap: 28px;
  justify-content: center;
}
.pg-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 58px;
}
.pg-countdown__num {
  font-family: var(--pg-font);
  font-size: 30px;
  font-weight: 500;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pg-countdown__label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.pg-fold__cta {
  display: inline-block;
  margin-top: 6px;
  padding: 16px 38px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background-color 350ms var(--pg-ease), color 350ms var(--pg-ease);
}
.pg-fold__cta:hover {
  background: #fff;
  color: #000;
}

/* ---------- Award-Link: dezenter Textlink statt Button ---------- */
a.pg-award-textlink,
.pg-award-textlink.con-kit-component-button,
.pg-award-textlink .con-kit-component-button {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.pg-award-textlink .con-kit-component-button__label {
  font-size: 15px;
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 5px;
  transition: opacity 300ms var(--pg-ease);
}
.pg-award-textlink:hover .con-kit-component-button__label {
  opacity: 1;
}
.pg-award-textlink::after {
  display: none !important; /* kein Glint-Sweep auf dem Textlink */
}

/* ---------- Button-Glint (bestehende CTAs) ---------- */
.con-kit-component-button,
.pg-fold__cta {
  position: relative;
  overflow: hidden;
}
.con-kit-component-button::after,
.pg-fold__cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-18deg);
  transition: left 700ms var(--pg-ease);
  pointer-events: none;
}
.con-kit-component-button:hover::after,
.pg-fold__cta:hover::after {
  left: 130%;
}
.con-kit-component-button {
  transition: transform 300ms var(--pg-ease);
}

/* ---------- Masonry / Galerie Hover ---------- */
.con-kit-component-masonry img,
.con-kit-component-marquee img {
  transition: transform 800ms var(--pg-ease), filter 800ms var(--pg-ease);
}
.con-kit-component-masonry .con-kit-fade-box {
  overflow: hidden;
}
.con-kit-component-masonry .con-kit-fade-box:hover img {
  transform: scale(1.04);
  filter: brightness(1.12);
}

/* ---------- FAQ Feinschliff ---------- */
.con-kit-component-list-item-accordion {
  transition: border-color 400ms var(--pg-ease), background-color 400ms var(--pg-ease);
}
.con-kit-component-list-item-accordion:hover {
  background-color: rgba(255, 255, 255, 0.025);
}

/* ---------- Timeline Progress ---------- */
.pg-timeline-line {
  position: absolute;
  top: var(--pg-line-top, 0px);
  left: 50%;
  width: 2px;
  height: calc(var(--pg-progress, 0) * var(--pg-line-max, 100%));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.25));
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0; /* hinter den Icon-Boxen */
}
/* Icon-Boxen liegen über der Linie */
section.timeline .con-kit-component-icon__border {
  z-index: 1;
}

/* ---------- Timeline mobil: einspaltig, Linie links ----------
   Das zweiseitige Center-Layout braucht das Onepage-Runtime; ohne
   kollabiert die Textspalte. Ab 640px stellen wir auf klassische
   linksbündige Timeline um. */
@media (max-width: 640px) {
  .con-kit-component-grid-timeline__item {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    padding: 0 0 56px !important;
    left: 0 !important; /* hebt den ±25%-Versatz des zweiseitigen Layouts auf */
  }
  .con-kit-component-grid-timeline__item > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 20px;
    width: 100% !important;
    min-width: 0 !important;
  }
  .con-kit-component-grid-timeline__icon {
    position: static !important;
    flex: 0 0 auto;
    margin: 0 !important;
  }
  .con-kit-component-grid-timeline__item .con-kit-molecule-textBlock {
    flex: 1 1 auto;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .con-kit-component-grid-timeline__item .con-kit-component-atom-list,
  .con-kit-component-grid-timeline__item .con-kit-animation__atom {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .pg-timeline-line {
    left: 28px !important;
  }
}

/* ---------- Logo-Marquee: nahtloser Loop (Onepage-Runtime fehlt) ----------
   app.js klont den Logosatz, bis die Laufbahn gefüllt ist, und verschiebt
   pro Zyklus exakt eine Satzbreite — dadurch läuft es endlos durch. */
@keyframes pg-marquee {
  to { transform: translateX(var(--pg-mq-shift, -100%)); }
}
.pg-marquee-loop {
  display: flex !important;
  width: max-content !important;
  animation: pg-marquee var(--pg-mq-dauer, 20s) linear infinite !important;
}
.pg-marquee-loop .con-kit-component-marquee__repeat {
  display: none !important; /* leeres Runtime-Duplikat */
}

/* ---------- Mobile: einheitliche Abstände ---------- */
@media (max-width: 640px) {
  /* "MMS® always wins.": Rooftop-Bild mobil ausblenden,
     Founders-Foto (Malik & Jakob) nach oben */
  .pg-hide-mobile {
    display: none !important;
  }
  .pg-first-mobile {
    order: -1;
  }
  /* Kachel-Atome nicht auf Desktop-Höhen strecken */
  section.hero .con-kit-molecule-textBlock .con-kit-animation__atom {
    height: auto !important;
    min-height: 0 !important;
  }
  /* Desktop-Ausrichtungs-Spacer mobil kappen (sonst 180px+ Löcher) */
  .con-kit-component-spacer,
  .con-kit-component-spacer__handler {
    max-height: 64px !important;
  }
  /* Kachel-Rhythmus vereinheitlichen (64px zwischen den Blöcken) —
     Nahtstellen der Kachel-Rotation ausgleichen */
  section.hero [data-id^="e2443c07"] {
    margin-top: 30px !important; /* vor "MMS® Club Preise": 34 -> 64 */
  }
  section.hero [data-id^="9971eeae"] {
    margin-top: 54px !important; /* vor "MMS® Awardzeremonie": 10 -> 64 */
  }
  section.hero [data-id^="8e6b1eeb"] .con-kit-component-spacer,
  section.hero [data-id^="8e6b1eeb"] .con-kit-component-spacer__handler {
    max-height: 40px !important; /* nach "Award beantragen": 88 -> 64 */
  }
  section.hero [data-id^="b70aa9aa"] .con-kit-component-spacer,
  section.hero [data-id^="b70aa9aa"] .con-kit-component-spacer__handler {
    max-height: 8px !important; /* nach dem Abend-CTA: 105 -> ~64 */
  }
  /* Sektions-Paddings mobil kompakter und einheitlich */
  section[data-kit-organism-padding="xxl"] .con-kit-frame {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }
  section[data-kit-organism-padding="l"] .con-kit-frame {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  section[data-kit-organism-padding="m"] .con-kit-frame {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.pg-js [data-pg-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .pg-grain {
    animation: none;
  }
  #pg-preloader img,
  html.pg-js .deckblatt [data-atom="image"] img {
    animation: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

/* Header "always wins" ragt mobil über den Rand (Original-Bug) — zurückschieben.
   `translate` statt `transform`, damit das Reveal-CSS (transform:none) nicht kollidiert.
   Logo zusätzlich kappen, damit es nicht mit "always wins" kollidiert. */
@media (max-width: 640px) {
  .kopfzeile [data-atom="link-group"] {
    translate: -32px 0;
  }
  .kopfzeile .con-kit-component-logo__image {
    width: min(48vw, 190px) !important;
  }
}

@media (max-width: 640px) {
  .pg-countdown {
    gap: 18px;
  }
  .pg-countdown__num {
    font-size: 24px;
  }
  .pg-fold__meta {
    font-size: 12px;
    gap: 10px;
  }
}

/* ---------- Footer: Lila-Flacker-GIF ---------- */
.pg-footer-gif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.pg-footer-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0, 0, 0, 0.82) 30%,
    rgba(0, 0, 0, 0.55) 60%,
    rgba(0, 0, 0, 0.35) 100%
  );
}

/* Sektions-Intro-Texte im einheitlichen Grau (nicht Vollweiss) */
[data-block-key="gjYO4KHQYD"],
[data-block-key="gjYO4KHQYD"] span,
[data-block-key="vqHiZpUg5D"],
[data-block-key="vqHiZpUg5D"] span {
  color: rgba(255, 255, 255, 0.68) !important;
}

/* Inline-Link in FAQ-Antworten */
.pg-faq-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pg-faq-link:hover {
  color: #fff;
}