/* ==========================================================================
   glas.css - Liquid Glass (Hausstil seit 2026-09-13) für das, was SCHWEBT.
   Eingebunden NACH animations.css. Rückbau = diesen <link> in index.html
   entfernen; styles.css/animations.css bleiben unverändert.

   Regeln (brain-core/global/design/DESIGN.md):
   - Glas nur für Schwebendes: Kopfleiste beim Scrollen, Handy-Menü,
     Chat-Knopf, Bedienknöpfe der Lightbox. Inhaltsflächen bleiben matt.
   - Saum als inset-Schatten statt border; Werte im backdrop-filter wörtlich.
   - Marke bleibt: Proxima Nova, Weiß, Tinte #0A0A0A, Blush-Akzent.
   - Zwei backdrop-filter dürfen nicht ineinander stecken: das Handy-Menü
     sitzt IN .nav - deshalb trägt die Leiste ihr Glas auf .nav::before
     (Geschwister des Menüs), nicht auf .nav selbst.
   ========================================================================== */

/* ---------- Kopfleiste: Glas auf ::before, blendet beim Scrollen ein ---------- */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(10, 10, 10, 0.06),
    0 10px 30px -18px rgba(10, 10, 10, 0.22);
  opacity: 0;
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav.scrolled::before,
.nav.solid::before { opacity: 1; }

/* Die alte, fast deckende Fläche + harte Linie weicht dem Glas darüber.
   Kein backdrop-filter mehr auf .nav selbst (sonst wäre sie Backdrop-Wurzel
   für das Menü darin und das Menü sähe nur die leere Leiste). */
.nav,
.nav.scrolled,
.nav.solid {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Sprachumschalter: inaktive Sprache war #828282 (3,8:1 schon auf Weiß).
   Auf Glas über dem schwarzen Laufband braucht sie mehr Tinte. */
.nav .lang-switch,
.nav .lang-switch button { color: #4D4D4D; }
.nav .lang-switch button.active,
.nav .lang-switch button:hover { color: var(--fg); }

/* Menüknopf: Druck-Rückmeldung (Emil: sofort, nur transform) */
.nav__menu-toggle {
  transition: background 200ms, color 200ms, border-color 200ms,
              transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__menu-toggle:active { transform: scale(0.94); }

/* ---------- Handy-/Tablet-Menü: Glasblatt statt weißer Karte ---------- */
@media (max-width: 1100px) {
  .nav.menu-open .nav__pill {
    background-color: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    backdrop-filter: blur(24px) saturate(1.8);
    border-color: transparent;
    border-radius: 24px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 0 0 1px rgba(255, 255, 255, 0.55),
      inset 0 -1px 0 rgba(10, 10, 10, 0.05),
      0 28px 64px -24px rgba(10, 10, 10, 0.32);
    transform-origin: top right;
    animation: glasMenuIn 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes glasMenuIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  /* aktiver Eintrag: getönte Fläche reicht - der Unterstrich stand als
     verirrter Strich mittig unter dem Eintrag */
  .nav.menu-open .nav__link.active { background: rgba(10, 10, 10, 0.06); }
  .nav.menu-open .nav__link::after { display: none; }
  .nav.menu-open .nav__link:active { background: rgba(10, 10, 10, 0.08); }
}

/* ---------- Chat-Knopf (Liv): dunkles Glas statt schwarzem Block ---------- */
.chat-bubble {
  background-color: rgba(14, 14, 14, 0.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 24px 60px -14px rgba(10, 10, 10, 0.42);
}
.chat-bubble:hover { background-color: rgba(26, 26, 26, 0.84); }
.chat-bubble:active { transform: translateY(0) scale(0.97); transition-duration: 120ms; }
.chat-bubble .chat-bubble__avatar::after { border-color: #2A2A2A; }

/* ---------- Lightbox: Knöpfe als Glas über dem Bild ---------- */
.lightbox__close,
.lightbox__nav {
  background-color: rgba(18, 18, 18, 0.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.lightbox__close:hover,
.lightbox__nav:hover { background-color: #FFFFFF; color: var(--fg); }

/* ---------- Ruhe für bewegungsempfindliche Menschen ---------- */
@media (prefers-reduced-motion: reduce) {
  .nav.menu-open .nav__pill { animation: none; }
  .nav::before { transition: none; }
  .nav__menu-toggle:active,
  .chat-bubble:active { transform: none; }
}