/* ══════════════════════════════════════════════════════════════════════
   FKK MONTE CARLO — Schnellzugriff am unteren Rand

   Nur auf Mobilgeräten. Fährt nach dem ersten Scrollen ein, damit sie
   im Hero nicht mit den Schaltflächen konkurriert.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --bnav-h:56px;    /* über den empfohlenen 44 px für Tippziele, ohne zu
                       viel Bildschirm zu kosten */
}

.bnav{
  position:fixed; left:0; right:0; bottom:0; z-index:8100;
  display:none;
  grid-template-columns:repeat(5, 1fr);
  height:calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom:env(safe-area-inset-bottom, 0px);

  background:rgba(8,8,13,.97);
  border-top:1px solid rgba(201,162,39,.28);

  /* Ausgefahren, bis das Skript sie einblendet */
  transform:translateY(100%);
  visibility:hidden;
  pointer-events:none;
  transition:transform .35s var(--ease), visibility .35s;
}

/* Feine Goldlinie oben — nimmt die Sprache der Kopfleiste auf */
.bnav::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,162,39,.5) 30%,
             var(--champagne) 50%, rgba(201,162,39,.5) 70%, transparent);
}

.bnav.is-in{
  transform:none;
  visibility:visible;
  pointer-events:auto;
}

/* ─── Einträge ───────────────────────────────────────────────────── */
.bnav__item{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.22rem; min-width:0; height:var(--bnav-h);
  color:var(--ash); text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:color .25s var(--ease);
}
.bnav__item i{ font-size:1.05rem; line-height:1; }
.bnav__label{
  font-family:var(--mono); font-size:.5rem; letter-spacing:.14em;
  text-transform:uppercase; line-height:1;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Balken oben — das zweite Merkmal neben der Farbe. Nur über den Farbton
   wäre der aktive Eintrag bei Farbsehschwäche nicht erkennbar. */
.bnav__bar{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:0; height:2px;
  background:linear-gradient(90deg, var(--gold), var(--champagne));
  transition:width .3s var(--ease);
}

.bnav__item.is-active{ color:var(--champagne); }
.bnav__item.is-active .bnav__bar{ width:38%; }
.bnav__item:active{ color:var(--gold); }

/* ─── Platz für die Leiste ───────────────────────────────────────────
   Erst wenn sie sichtbar ist — sonst klafft im Hero eine leere Fläche. */
body.has-bottom-nav{
  padding-bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px));
}

/* ─── Andere fixierte Elemente hochsetzen ───────────────────────────
   Der Chat-Knopf setzt seine Position mit !important und z-index
   2147483647. Gegen den z-index ist nichts auszurichten — muss es auch
   nicht, er SOLL obenauf liegen. Nur die Position muss hoch.

   "body #ncb-fab" ist spezifischer als "#ncb-fab" (Element + ID gegen
   ID allein) und gewinnt deshalb trotz des fremden !important. */
body.has-bottom-nav #ncb-fab{
  bottom:calc(var(--bnav-h) + 16px + env(safe-area-inset-bottom, 0px)) !important;
}
body.has-bottom-nav .chat-gate{
  bottom:calc(var(--bnav-h) + 12px + env(safe-area-inset-bottom, 0px));
}
body.has-bottom-nav .cookie{
  bottom:calc(var(--bnav-h) + var(--rail) + env(safe-area-inset-bottom, 0px));
}
body.has-bottom-nav .language-toggle,
body.has-bottom-nav .language-menu{
  margin-bottom:calc(var(--bnav-h) / 2);
}

/* ─── Wann sie sichtbar ist ──────────────────────────────────────── */
@media (max-width:860px){
  .bnav{ display:grid; }
}

/* Ab 861 px ist die Kopfnavigation vollständig da */
@media (min-width:861px){
  .bnav{ display:none !important; }
  body.has-bottom-nav{ padding-bottom:0; }
}

/* Querformat auf dem Telefon: dort zählt jeder Pixel */
@media (max-height:460px) and (orientation:landscape){
  .bnav{ display:none !important; }
  body.has-bottom-nav{ padding-bottom:0; }
  body.has-bottom-nav #ncb-fab{ bottom:20px !important; }
}

/* ─── Wann sie weichen muss ──────────────────────────────────────── */

/* Das Schubfach liegt bei z-index 8200, die Leiste bei 8100 — sie läge
   also darunter. Trotzdem ausblenden: Sie würde durch den Hintergrund
   schimmern und den Eindruck stören. */
body.nav-open .bnav{
  transform:translateY(100%);
  visibility:hidden;
  pointer-events:none;
}

/* Altersnachweis: Eine sichtbare Navigation würde einen Weg daran
   vorbei suggerieren. */
body.ov-age .bnav,
body.ov-open .bnav{
  transform:translateY(100%);
  visibility:hidden;
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  .bnav, .bnav__bar{ transition:none; }
}