/* ══ Redesign "Design perfekt" – Liquid Glass fuer die Handy-Leiste unten ═══════
   Nachtauftrag Leandro 11.10.2026: untere Navigation wie Apple "Liquid Glass".
   Bewusste Ausnahme zu "kein Glas" – gilt NUR fuer .bottom-nav.
   Aufbau (Apple-Material): schwebende, runde Leiste; Unschaerfe + Saettigung;
   helle Innenkante oben; Lichtreflexion in der oberen Haelfte; weicher Schatten;
   aktiver Punkt als Glas-Pille. Rueckfaelle: ohne backdrop-filter und bei
   "Transparenz reduzieren" eine feste Karte; bei "Bewegung reduzieren" keine
   Bewegung. Nur in app.html geladen (nach icons.css), Farben aus base.css. */

.bottom-nav {
  left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
  padding: 6px; border-radius: 30px; border: none; isolation: isolate;
  background: linear-gradient(180deg, var(--lg-top), var(--lg-bottom));
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--lg-edge),          /* Licht faengt sich an der Oberkante */
    inset 0 -1px 0 var(--lg-edge-low),
    inset 0 0 0 1px var(--lg-rim),
    0 2px 6px hsl(var(--shadow-color) / .12),
    0 14px 34px -10px hsl(var(--shadow-color) / .32);
}
/* Lichtreflexion: weicher Glanz oben, schraeg auslaufend */
.bottom-nav::before {
  content: ""; position: absolute; inset: 1px 1px 50% 1px; border-radius: 29px 29px 14px 14px;
  background: linear-gradient(180deg, var(--lg-shine), transparent 85%);
  opacity: .7; pointer-events: none; z-index: -1;
}
.bottom-nav-item { position: relative; border-radius: 24px; padding: 6px 0 5px; z-index: 0; -webkit-tap-highlight-color: transparent; }
/* Glas-Pille hinter dem aktiven Punkt */
.bottom-nav-item::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: linear-gradient(180deg, var(--lg-pill-top), var(--lg-pill-bottom));
  box-shadow: inset 0 1px 0 var(--lg-edge), inset 0 0 0 1px var(--lg-rim), 0 2px 8px -2px hsl(var(--shadow-color) / .22);
  opacity: 0; transform: scale(.86);
}
.bottom-nav-item.active::before { opacity: 1; transform: none; }
.bottom-nav-item.active span { font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .bottom-nav-item::before { transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-spring); }
  .bottom-nav-item { transition: transform 100ms var(--ease-out); }
  .bottom-nav-item:active { transform: scale(.94); } /* Rueckmeldung schon beim Druecken */
}

/* Rueckfall: Browser ohne backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bottom-nav { background: var(--tone-card); }
}
/* "Transparenz reduzieren": feste Flaeche, kein Glanz */
@media (prefers-reduced-transparency: reduce) {
  .bottom-nav { background: var(--tone-card); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bottom-nav::before { display: none; }
  .bottom-nav-item::before { background: var(--tone-inset); }
}