/* ══════════════════════════════════════════════════════════════════════
   FKK MONTE CARLO — css/pages/home.css
   Nur Startseite: Hero mit Portalbogen + Tagesmotto-Duo.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── HERO ───────────────────────────────────────────────────────────
   Schichtung ist zwingend (backdrop-filter filtert nur, was VORHER
   gemalt wurde):  0 Video → 1 Grading → 2 Portal → 3 Licht → 4 Inhalt
   ─────────────────────────────────────────────────────────────────── */
.hero{
  /* align-content:end lässt den Inhalt nach OBEN wachsen. Ohne
     reservierten Platz rutschte er dadurch unter die fixierte
     Kopfleiste. --rail-h wird von js/mc-core.js aus der tatsächlichen
     Höhe der Leiste gesetzt und bei Grössenänderung nachgeführt; der
     Wert hier ist nur der Rückfall, falls kein Skript läuft. */
  position:relative; min-height:100svh; display:grid; align-content:end;
  overflow:hidden;
  padding:calc(var(--rail-h,104px) + 1.2rem) calc(var(--rail) + 1.6rem) 0;
}

/* 0 — Video, vollflächig, sehr langsamer Drift */
.hero__media{ position:absolute; inset:0; z-index:0; background:var(--noir); }
.hero__media video, .hero__media img{
  width:100%; height:100%; object-fit:cover;
  animation:mc-drift 42s ease-in-out infinite alternate;
}
@keyframes mc-drift{
  from{ transform:scale(1.02) translate3d(0,0,0); }
  to{ transform:scale(1.11) translate3d(-1.5%,-1%,0); }
}

/* 1 — Grading: Mitte bleibt offen, gedimmt wird nur der Rand */
.hero__grade{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(58% 52% at 50% 44%, transparent, rgba(6,6,10,.34) 62%, rgba(6,6,10,.86) 100%),
    linear-gradient(180deg, rgba(6,6,10,.72), rgba(10,14,24,.14) 34%, rgba(6,6,10,.2) 58%, var(--noir) 99%),
    linear-gradient(96deg, rgba(61,14,28,.34), transparent 46%, rgba(10,14,24,.44));
}

/* 2 — SIGNATUR: Portalbogen. Hebt einen Videoausschnitt heraus,
       statt ihn zuzudecken. Ein Video, ein backdrop-filter. */
.portal{
  position:absolute; z-index:2; left:50%; bottom:0; transform:translateX(-50%);
  width:min(84vw,660px); height:min(88svh,860px);
  border-radius:min(42vw,330px) min(42vw,330px) 0 0;
  /* Frueher backdrop-filter:brightness(1.85) saturate(1.18) contrast(1.04).
     Der Filter wirkte auf das laufende Video darunter, musste also bei
     jedem Bild auf bewegten Pixeln neu gerechnet werden — mit Abstand
     der teuerste Posten beim Bildlauf (gemessen rund 15 ms pro Bild,
     auf dem Schreibtisch wie auf dem Handy).

     Der Lichtschein steht jetzt als Farbverlauf. Optisch kaum zu
     unterscheiden, wird aber einmal gezeichnet statt sechzigmal pro
     Sekunde neu berechnet. */
  background:radial-gradient(62% 58% at 50% 56%,
    rgba(255,222,180,.34), rgba(255,200,150,.14) 46%, transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,#000 0 46%,rgba(0,0,0,.55) 74%,transparent 98%);
  mask-image:linear-gradient(180deg,#000 0 46%,rgba(0,0,0,.55) 74%,transparent 98%);
  animation:mc-portal 1.9s var(--ease) .25s both;
}
@keyframes mc-portal{
  from{ clip-path:inset(100% 0 0 0); opacity:0; }
  to{ clip-path:inset(0 0 0 0); opacity:1; }
}
/* Doppelte Goldlinie — Belle-Époque-Türrahmung */
.portal__line, .portal__line2{
  position:absolute; z-index:3; left:50%; bottom:0; transform:translateX(-50%); pointer-events:none;
  border:1px solid rgba(201,162,39,.5); border-bottom:0;
  -webkit-mask-image:linear-gradient(180deg,#000 0 40%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 0 40%,transparent 88%);
}
.portal__line{
  width:min(84vw,660px); height:min(88svh,860px);
  border-radius:min(42vw,330px) min(42vw,330px) 0 0;
  box-shadow:0 0 60px rgba(201,162,39,.14);
}
.portal__line2{
  width:min(78vw,614px); height:min(84svh,822px);
  border-radius:min(39vw,307px) min(39vw,307px) 0 0;
  border-color:rgba(217,224,230,.16);
}

/* 3 — Kronleuchter-Bloom + Lichtstaub */
.bloom{
  position:absolute; z-index:3; left:50%; top:-14%; transform:translateX(-50%);
  width:min(70vw,720px); aspect-ratio:1; pointer-events:none;
  background:radial-gradient(circle, rgba(243,227,179,.16), rgba(201,162,39,.06) 42%, transparent 68%);
  animation:mc-breathe 9s ease-in-out infinite alternate;
}
@keyframes mc-breathe{ from{ opacity:.65 } to{ opacity:1 } }
.motes{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.motes b{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:var(--champagne); opacity:0; filter:blur(.4px);
  animation:mc-mote linear infinite;
}
@keyframes mc-mote{
  0%{ opacity:0; transform:translateY(20px); }
  12%{ opacity:.75 } 88%{ opacity:.4 }
  100%{ opacity:0; transform:translateY(-190px); }
}

/* 4 — Inhalt */
.hero__body{ position:relative; z-index:4; text-align:center; padding-bottom:clamp(2rem,6vh,4rem); }
.wordmark{ margin:1.6rem 0 0; line-height:1; }
/* Originallogo statt Textmarke, damit Kopfleiste, Hero und Fuß dieselbe
   Marke zeigen. Die Breite ist bewusst auf 420px begrenzt: die
   Ausgangsdatei hat nur 145px, darüber würde sie sichtbar unscharf. */
.wordmark__img{
  display:block; width:min(72vw, 420px); height:auto; margin:0 auto;
  filter:drop-shadow(0 8px 40px rgba(6,6,10,.85))
         drop-shadow(0 0 30px rgba(201,162,39,.22));
}
.wordmark .l2{ display:block; font-weight:400; font-style:italic; letter-spacing:-.01em; }
.hero__sub{
  font-family:var(--hl); font-weight:600; font-size:.86rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--champagne); margin-top:1.6rem;
  text-shadow:0 2px 18px rgba(6,6,10,.9);
}
.hero__cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2.4rem; }

.facts{
  position:relative; z-index:4; display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(201,162,39,.2);
  /* Frueher backdrop-filter:blur(2px). Das Band liegt ueber dem
     laufenden Video, der Filter musste also bei jedem Bild auf bewegten
     Pixeln neu gerechnet werden — fuer zwei Pixel Weichzeichnung.
     Ersetzt durch eine leichte Abdunklung. */
  background:linear-gradient(180deg,rgba(6,6,10,.45),rgba(6,6,10,.72));
}
.facts div{ padding:1.4rem 1rem 2.2rem; text-align:center; border-right:1px solid rgba(201,162,39,.12); }
.facts div:last-child{ border-right:0; }
.facts dt{
  font-family:var(--hl); font-weight:600; font-size:.76rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold);
}
.facts dd{
  font-family:var(--hl); font-weight:700; font-size:clamp(1.25rem,3vw,1.75rem);
  margin-top:.55rem; color:var(--champagne); letter-spacing:.01em;
}

/* Ton-Schalter */
.sound{
  position:absolute; z-index:5; right:calc(var(--rail) + 1.6rem); bottom:calc(var(--rail) + 7.5rem);
  display:flex; align-items:center; gap:.55rem; font-family:var(--hl); font-weight:600; font-size:.70rem;
  letter-spacing:0.168em; text-transform:uppercase; color:var(--ash); transition:color .3s;
}
.sound:hover{ color:var(--champagne); }
/* Lautsprecher statt Aussteuerungsbalken. Im Ruhezustand mit
   Durchstreichung — dadurch ist auch ohne Beschriftung erkennbar, dass
   der Ton derzeit aus ist. Beim Einschalten treten die Schallwellen an
   die Stelle des Kreuzes. */
.sound__ico{ width:19px; height:19px; flex:none; color:var(--gold); }
.sound__waves{ opacity:0; transform:translateX(-3px); transition:opacity .3s, transform .35s var(--ease); }
.sound__mute{ opacity:1; transition:opacity .25s; }
.sound.on .sound__ico{ color:var(--champagne); }
.sound.on .sound__waves{ opacity:1; transform:none; }
.sound.on .sound__mute{ opacity:0; }
@keyframes mc-eq{ to{ height:12px } }

/* ─── Tagesmotto-Duo ─────────────────────────────────────────────── */
.today{ display:grid; grid-template-columns:1.05fr .95fr; gap:1.6rem; }
.today__img{ --cut:38px; min-height:460px; }
.today__img .bevel__in{ padding:0; background:var(--onyx-2) center/cover no-repeat; display:flex; align-items:flex-end; }
.today__img .tag{
  width:100%; padding:1.6rem; background:linear-gradient(0deg,rgba(6,6,10,.92),transparent);
  font-family:var(--hl); font-weight:600; font-size:.72rem; letter-spacing:0.21em; text-transform:uppercase; color:var(--gold);
}
.today__box{ --cut:38px; display:flex; }
.today__box .bevel__in{ display:flex; flex-direction:column; justify-content:center; gap:1.1rem; }
/* Tag und Öffnungszeit sind im Aufmacher die harte Information —
   entsprechend kräftiger und heller als der Beschreibungstext. */
.today__day{
  font-family:var(--hl); font-weight:700; font-size:.86rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold);
}
.today__motto{ font-family:var(--hl); font-size:clamp(2rem,4.2vw,3.1rem); line-height:1.05; font-weight:700; }
.today__txt{ font-size:1.05rem; color:var(--text); }
.today__hours{
  margin-top:.6rem; padding-top:1.3rem; border-top:1px solid rgba(201,162,39,.2);
  display:flex; align-items:center; gap:.8rem;
  font-family:var(--hl); font-weight:700; font-size:.98rem; letter-spacing:.04em;
  color:var(--champagne); font-variant-numeric:tabular-nums;
}

@media (max-width:1024px){
  .today{ grid-template-columns:1fr; }
  .today__img{ min-height:320px; }
  .sound{ bottom:calc(var(--rail) + 9rem); }
}
@media (max-width:680px){
  .portal, .portal__line{ width:92vw; height:70svh; border-radius:46vw 46vw 0 0; }
  .portal__line2{ width:86vw; height:66svh; border-radius:43vw 43vw 0 0; }
  .facts{ grid-template-columns:1fr; }
  .facts div{ border-right:0; border-bottom:1px solid rgba(201,162,39,.12); padding:1.1rem; }
  /* Der Ton-Schalter war hier auf display:none — auf dem Handy also gar
     nicht bedienbar, obwohl das Hero-Video Ton hat.

     Mit Beschriftung lief er über den darunter liegenden Text. Deshalb
     jetzt nur der Lautsprecher als quadratische Schaltfläche, links
     abgesetzt. Der Text bleibt im Markup und wird für Screenreader
     ausgelesen, ist aber optisch ausgeblendet. */
  .sound{
    left:calc(var(--rail) + .8rem); right:auto;
    bottom:calc(var(--rail) + 1.2rem);
    width:44px; height:44px; padding:0; gap:0;
    justify-content:center; color:var(--champagne);
    border:1px solid rgba(201,162,39,.45); background:rgba(6,6,10,.8);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  }
  .sound__t{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .sound__ico{ width:21px; height:21px; }
  /* Die Zeile "Nachtclub · Wellness · Baden-Baden" bricht auf schmalen
     Schirmen zweizeilig um und drängt sich unter die Kopfleiste. Der
     Inhalt steht ohnehin im Logo und im Untertitel. */
  .hero .eyebrow--c{ display:none; }
  .wordmark{ margin-top:.4rem; }
  .wordmark__img{ width:min(82vw, 340px); }
  .hero__sub{ font-size:.78rem; letter-spacing:.22em; }
  .today__box .bevel__in{ padding:1.6rem; }
}
@media (hover: none), (pointer: coarse) {
  /* Der Tagesmotto-Aufmacher bekommt die Glanzkante beim Scrollen */
  .today__img.is-near, .today__box.is-near{ filter:drop-shadow(0 0 26px rgba(201,162,39,.2)); }
  .sound{ color:var(--platin); }

}

@media (prefers-reduced-motion:reduce){
  .hero__media video, .hero__media img{ transform:scale(1.04); }
  .motes{ display:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   FKK MONTE CARLO — Bereich „Demnächst" unter dem Hero
   
   Der Übergang vom Video zum Inhalt ist die heikelste Stelle der Seite.
   Deshalb keine harte Kante: eine Goldlinie mit Lichtpunkt in der Mitte
   trennt die beiden Bereiche und nimmt die Bogenform des Hero auf.
   ══════════════════════════════════════════════════════════════════════ */

.spots{
  position:relative;
  padding:clamp(3.5rem,8vh,6rem) 0 clamp(4rem,10vh,7rem);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(61,14,28,.22), transparent 62%),
    linear-gradient(180deg, var(--noir), rgba(10,10,16,.4) 40%, var(--noir));
}

/* Trennlinie mit Lichtpunkt — der Nachhall des Portalbogens */
.spots__rule{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(92vw, var(--maxw)); height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,162,39,.5) 30%,
             var(--champagne) 50%, rgba(201,162,39,.5) 70%, transparent);
}
.spots__rule::after{
  content:''; position:absolute; left:50%; top:50%;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  background:var(--champagne);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  box-shadow:0 0 16px 3px rgba(243,227,179,.5);
}

.spots__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.6rem; margin-bottom:2.6rem;
}
.spots__head .title{ margin-top:1rem; }
.spots__all{ margin:2.4rem 0 0; text-align:center; }

/* ─── Raster ─────────────────────────────────────────────────────────
   Bei einer einzelnen Veranstaltung wird die Kachel breit und quer
   gestellt — eine einsame schmale Karte wirkt sonst verloren. */
.spots__grid{ display:grid; gap:1.4rem; grid-template-columns:repeat(3,1fr); }
.spots__grid--2{ grid-template-columns:repeat(2,1fr); }
.spots__grid--1{ grid-template-columns:1fr; }

.spots__grid--1 .spot .bevel__in{ display:grid; grid-template-columns:minmax(280px,42%) 1fr; }
.spots__grid--1 .spot__media{ aspect-ratio:auto; min-height:280px; }
.spots__grid--1 .spot__veil{ background:linear-gradient(90deg, transparent 45%, var(--onyx)); }
.spots__grid--1 .spot__body{ padding:clamp(1.8rem,3.4vw,2.8rem); }
.spots__grid--1 .spot__ttl{ font-size:clamp(1.7rem,3.4vw,2.4rem); }

/* ─── Kachel ─────────────────────────────────────────────────────── */
.spot{ --cut:28px; }
.spot .bevel__in{ padding:0; height:100%; display:flex; flex-direction:column; }
.spot__link{ display:block; height:100%; color:inherit; }

.spot__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--onyx-2); }
.spot__ph{
  position:absolute; inset:0; background:center/cover no-repeat;
  filter:grayscale(.7) contrast(1.06) brightness(.68);
  transform:scale(1.03);
  transition:filter .8s var(--ease), transform .9s var(--ease);
}
.spot:hover .spot__ph{ filter:grayscale(0) contrast(1) brightness(.9); transform:scale(1.08); }
.spot__veil{
  position:absolute; inset:0;
  background:linear-gradient(0deg, var(--onyx) 2%, transparent 62%);
}

/* Dringlichkeitsangabe */
.spot__soon{
  position:absolute; z-index:2; top:1rem; left:1rem;
  display:flex; align-items:center; gap:.45rem;
  padding:.38rem .8rem; font-family:var(--mono); font-size:.54rem;
  letter-spacing:.24em; text-transform:uppercase; font-weight:500; color:var(--noir);
  background:linear-gradient(120deg, var(--gold), var(--champagne));
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.spot__soon--loop{
  color:var(--champagne);
  background:rgba(10,10,16,.88);
  border:1px solid rgba(201,162,39,.5);
}
.spot__ring{
  width:9px; height:9px; border:1px solid var(--gold); border-right-color:transparent;
  border-radius:50%; animation:mc-spot-loop 3.4s linear infinite;
}
@keyframes mc-spot-loop{ to{ transform:rotate(360deg) } }

/* ─── Text ───────────────────────────────────────────────────────── */
.spot__body{
  padding:1.5rem 1.4rem 1.4rem;
  display:flex; flex-direction:column; gap:.5rem; flex:1;
}
.spot__date{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold); margin:0;
}
.spot__ttl{
  font-family:var(--display); font-size:clamp(1.3rem,2.4vw,1.7rem);
  line-height:1.1; color:var(--platin); margin:.1rem 0 0;
  transition:color .35s var(--ease);
}
.spot:hover .spot__ttl{ color:var(--champagne); }
.spot__sub{
  font-family:var(--display); font-style:italic; font-size:1rem;
  color:#9AA0A9; margin:0;
}

.spot__foot{
  margin:auto 0 0; padding-top:1.1rem;
  border-top:1px solid rgba(217,224,230,.1);
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
}
.spot__price{ font-family:var(--display); font-size:1.5rem; font-weight:600; line-height:1; }
.spot__badge{
  font-family:var(--mono); font-size:.54rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(201,162,39,.4); padding:.28rem .6rem;
}
.spot__more{
  display:flex; align-items:center; gap:.5rem; margin-left:auto;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ash);
  transition:color .35s var(--ease);
}
.spot:hover .spot__more{ color:var(--champagne); }
.spot__arrow{
  width:14px; height:1px; background:currentColor; position:relative;
  transition:width .35s var(--ease);
}
.spot__arrow::after{
  content:''; position:absolute; right:0; top:-2px;
  width:5px; height:5px; border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.spot:hover .spot__arrow{ width:22px; }

/* ─── Kleine Geräte ──────────────────────────────────────────────── */
@media (max-width:960px){
  .spots__grid, .spots__grid--2{ grid-template-columns:repeat(2,1fr); }
  .spots__grid--1 .spot .bevel__in{ grid-template-columns:1fr; }
  .spots__grid--1 .spot__media{ aspect-ratio:16/9; min-height:0; }
  .spots__grid--1 .spot__veil{ background:linear-gradient(0deg, var(--onyx) 2%, transparent 62%); }
}
@media (max-width:640px){
  .spots__grid, .spots__grid--2, .spots__grid--1{ grid-template-columns:1fr; }
  .spot{ --cut:20px; }
  .spot__media{ aspect-ratio:16/9; }
  .spots{ padding-top:2.8rem; }
}

@media (prefers-reduced-motion:reduce){
  .spot__ph{ transform:none; }
  .spot:hover .spot__ph{ transform:none; }
}