/* ══════════════════════════════════════════════════════════════════════
   FKK MONTE CARLO — css/mc-event-popup.css
   Willkommensfenster für Veranstaltungen.

   Setzt auf .ov / .ov__box aus mc-overlays.css auf und ergänzt nur,
   was dieses Fenster eigenes braucht: das Bild oben, die Datenzeile
   und die Folge mehrerer Veranstaltungen.

   Wird ausschließlich von includes/event-popup.php geladen — steht
   kein Fenster an, kommt diese Datei gar nicht erst über die Leitung.
   ══════════════════════════════════════════════════════════════════════ */

.evpop{ z-index:9400; }           /* unter Altersnachweis (9500) */

/* Solange das Skript nicht geöffnet hat, muss die Hülle restlos weg
   sein.

   Das `hidden`-Attribut allein genügt nicht: Die Regel des Browsers
   dafür ist [hidden]{display:none} und verliert gegen .ov{display:flex}
   aus mc-overlays.css — Klassenauswahl schlägt Typauswahl. Die Folge
   wäre eine unsichtbare Platte über der ganzen Seite, die jeden Klick
   schluckt, auch den auf die Cookie-Leiste.

   .evpop[hidden] ist Klasse plus Attribut und gewinnt deshalb ohne
   !important. */
.evpop[hidden]{ display:none; }

.evpop__box{
  --cut:38px;
  width:min(100%,600px);
}

/* Die Platte trägt das Bild randlos — deshalb kein Innenabstand
   auf der Hülle, sondern nur dort, wo Text steht. */
.evpop__box .bevel__in{
  padding:0;
  text-align:left;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201,162,39,.09) 0%, transparent 60%),
    var(--onyx, #0E0E14);
  overflow:hidden;
}

.evpop__x{
  top:.9rem; right:.9rem;
  background:rgba(6,6,10,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-radius:0;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  cursor:pointer;
}
.evpop__x::before,.evpop__x::after{ background:var(--champagne, #F3E3B3); }

/* ─── Folge mehrerer Veranstaltungen ──────────────────────────────
   Alle Folien liegen übereinander, nur die aktive ist sichtbar.
   position:absolute würde die Höhe der Platte auf null setzen —
   deshalb bleibt die aktive Folie im Fluss und die übrigen werden
   darüber gelegt. */
.evpop__stage{ position:relative; }

/* Wichtig: Die aktive Folie bekommt KEIN visibility:visible.

   Sonst zieht sie sich aus dem verborgenen Zustand der Hülle heraus —
   .ov ohne .open steht auf visibility:hidden, und ein Kind darf das
   überschreiben. Genau daran lag der unsichtbare Klickfänger. Nur die
   inaktiven Folien werden ausgeblendet; die aktive erbt den Zustand
   ihres Elternknotens. */
.evpop__slide{
  transition:opacity .4s var(--ease, cubic-bezier(.2,.8,.2,1));
}
.evpop__slide:not(.is-on){
  opacity:0; visibility:hidden;
  position:absolute; inset:0; pointer-events:none;
}
.evpop__slide.is-on{ opacity:1; position:relative; }

/* ─── Bild ───────────────────────────────────────────────────────── */

/* Kein festes Seitenverhältnis.

   Die Bilder sind hier meist fertig gestaltete Plakate mit Text —
   Preis, Zeitraum, Leistungen. Ein 16:9-Rahmen mit object-fit:cover
   schneidet davon oben und unten weg, und genau dort steht die
   Information. Deshalb behält das Bild sein eigenes Verhältnis und
   wird nur in der Höhe gedeckelt; ein Foto im Querformat sieht
   genauso richtig aus wie ein Plakat im Hochformat. */
.evpop__media{
  position:relative;
  overflow:hidden;
  background:var(--noir, #06060A);
}
.evpop__img{
  position:relative; z-index:1;
  display:block;
  width:100%; height:auto;
  max-height:min(48vh, 420px);
  object-fit:contain;
  /* Leichte Abdunklung, damit die Schrift darunter nicht gegen ein
     grelles Bild antreten muss. */
  filter:saturate(.92) contrast(1.04);
}

/* Füllt die Ränder, die ein hochformatiges Plakat links und rechts
   frei lässt. Über scale hinausgezogen, damit der weiche Rand des
   Weichzeichners nicht als heller Saum sichtbar wird. */
.evpop__bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.25);
  filter:blur(26px) saturate(1.25) brightness(.5);
  pointer-events:none;
}
.evpop__veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,6,10,.15) 0%, rgba(6,6,10,0) 38%,
    rgba(14,14,20,.72) 82%, var(--onyx, #0E0E14) 100%);
}

/* Hinweis auf die Nähe des Termins.

   Unten statt oben: Oben steht auf fast jedem Plakat das Logo, und
   eine Kennzeichnung quer darüber sieht nach Versehen aus. Unten
   liegt der Verlauf ohnehin dunkel — dort liest sich der Chip
   sauber, egal was für ein Bild dahinter steckt. */
.evpop__soon{
  position:absolute; left:0; bottom:1rem; z-index:3;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.4rem .9rem .4rem 1.2rem;
  font-family:var(--mono, monospace);
  font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--noir, #06060A);
  background:linear-gradient(100deg, var(--gold, #C9A227), var(--champagne, #F3E3B3));
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.evpop__soon--loop{
  color:var(--champagne, #F3E3B3);
  background:rgba(6,6,10,.72);
  border:1px solid rgba(201,162,39,.45);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}

/* ─── Text ───────────────────────────────────────────────────────── */

.evpop__body{ padding:clamp(1.4rem,3.4vw,2.1rem); }

.evpop__kicker{
  font-family:var(--mono, monospace);
  font-size:.58rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold, #C9A227);
  margin:0 0 .7rem;
}

.evpop .evpop__ttl{
  font-family:var(--display, Georgia, serif);
  font-weight:500;
  font-size:clamp(1.45rem,4.2vw,2rem);
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0 0 .5rem;
  background:linear-gradient(104deg,
    var(--champagne, #F3E3B3) 0%, var(--gold, #C9A227) 32%,
    var(--platin, #D9E0E6) 62%, var(--champagne, #F3E3B3) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.evpop__sub{
  font-size:.92rem; line-height:1.5;
  color:var(--ash, #A6ACB6);
  margin:0 0 1.2rem;
}

/* Datenzeile. Grid statt Flex, damit die Spalten auch dann
   untereinander stehen, wenn ein Wert ungewöhnlich lang ist. */
.evpop__meta{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  list-style:none; margin:0 0 1.2rem; padding:0;
  background:rgba(255,255,255,.07);
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.evpop__meta li{
  padding:.7rem .2rem;
  background:var(--onyx, #0E0E14);
}
.evpop__mk{
  display:block;
  font-family:var(--mono, monospace);
  font-size:.52rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ash-2, #8E949E);
  margin-bottom:.25rem;
}
.evpop__mv{
  display:block;
  font-size:.92rem; font-weight:500;
  color:var(--text, #C3C9D1);
}

.evpop .evpop__text{
  font-size:.9rem; line-height:1.62;
  color:var(--ash, #A6ACB6);
  margin:0 0 1.5rem;
}

.evpop__row{
  display:flex; gap:.7rem; flex-wrap:wrap; align-items:center;
}

/* ─── Punktnavigation ────────────────────────────────────────────── */

.evpop__nav{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  padding:0 clamp(1.4rem,3.4vw,2.1rem) .3rem;
}

.evpop__arrow{
  width:30px; height:30px; flex:none;
  background:none; border:1px solid rgba(201,162,39,.3);
  cursor:pointer; position:relative;
  transition:border-color .3s, background .3s;
}
.evpop__arrow:hover{ border-color:var(--gold, #C9A227); background:rgba(201,162,39,.1); }
.evpop__arrow span{
  position:absolute; top:50%; left:50%;
  width:7px; height:7px;
  border-top:1px solid var(--ash, #A6ACB6);
  border-right:1px solid var(--ash, #A6ACB6);
}
.evpop__arrow--next span{ transform:translate(-62%,-50%) rotate(45deg); }
.evpop__arrow--prev span{ transform:translate(-38%,-50%) rotate(-135deg); }
.evpop__arrow:hover span{ border-color:var(--champagne, #F3E3B3); }

.evpop__dots{ display:flex; gap:.5rem; }
.evpop__dot{
  width:22px; height:2px; padding:0;
  background:rgba(255,255,255,.18); border:0; cursor:pointer;
  transition:background .3s, transform .3s;
}
.evpop__dot:hover{ background:rgba(201,162,39,.55); }
.evpop__dot.is-on{
  background:linear-gradient(90deg, var(--gold, #C9A227), var(--champagne, #F3E3B3));
  transform:scaleY(2);
}

/* ─── „Heute nicht mehr anzeigen“ ────────────────────────────────── */

.evpop__mute{
  display:flex; align-items:center; gap:.6rem;
  padding:.9rem clamp(1.4rem,3.4vw,2.1rem) 1.3rem;
  cursor:pointer;
  font-family:var(--mono, monospace);
  font-size:.56rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ash-2, #8E949E);
  transition:color .3s;
}
.evpop__mute:hover{ color:var(--ash, #A6ACB6); }
.evpop__mute input{ position:absolute; opacity:0; width:0; height:0; }

.evpop__mutebox{
  width:14px; height:14px; flex:none;
  border:1px solid rgba(201,162,39,.4);
  position:relative; transition:border-color .3s, background .3s;
}
.evpop__mute input:focus-visible + .evpop__mutebox{ outline:2px solid var(--gold, #C9A227); outline-offset:2px; }
.evpop__mute input:checked + .evpop__mutebox{
  background:var(--gold, #C9A227); border-color:var(--gold, #C9A227);
}
.evpop__mute input:checked + .evpop__mutebox::after{
  content:''; position:absolute; left:4px; top:1px;
  width:4px; height:8px;
  border:solid var(--noir, #06060A);
  border-width:0 1.5px 1.5px 0;
  transform:rotate(42deg);
}

/* ─── Kleine Bildschirme ─────────────────────────────────────────── */

@media (max-width:620px){
  .evpop{ padding:1rem; align-items:flex-start; }
  .evpop__box{ --cut:26px; margin:auto 0; }
  .evpop__img{ max-height:min(36vh, 300px); }
  .evpop__row .btn{ flex:1 1 auto; justify-content:center; }
  .evpop__meta{ grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); }
}

/* Querformat auf dem Handy: Das Bild frisst sonst den ganzen Schirm
   und die Schaltflächen liegen unter der Falz. */
@media (max-height:520px) and (orientation:landscape){
  .evpop__media{ display:none; }
  .evpop__box .bevel__in{ padding-top:.6rem; }
}

@media (prefers-reduced-motion:reduce){
  .evpop__slide{ transition:none; }
  .evpop__dot{ transition:none; }
}