/* ============================================================
   Feste Leiste unten — nur am Telefon (bis --bp-md = 767 px).
   Am Desktop bleibt die Klapp-Navigation oben unverändert.
   ============================================================ */
.bnav { display: none; }

@media (max-width: 767px) {
  .bnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    /* Spaltenzahl richtet sich nach den Zielen, nicht nach einer festen Vier.
       Mit der Driver Academy sind es seit dem 28.08.2026 fuenf — als
       `repeat(4, 1fr)` fiel das fuenfte Ziel in eine zweite Zeile (nachgemessen
       bei 360 px: Profil sass 56 px tiefer als die anderen). */
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: rgba(8, 10, 18, 0.94); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    /* Android legt seine Gestenleiste über den unteren Rand. */
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bnav__i {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: 56px; color: var(--text-faint);
    font-family: var(--font-ui); font-size: var(--text-xs);
    /* Bei fuenf Zielen bleiben auf einem 360-px-Handy nur 72 px je Spalte.
       Ohne die engere Laufweite und den Umbruchschutz zerreisst es
       „Nordschleife" auf zwei Zeilen und die Leiste wird ungleich hoch. */
    letter-spacing: 0.5px; text-transform: uppercase;
    white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    transition: color 0.22s, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .bnav__i:active { transform: scale(0.94); }
  .bnav__i svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .bnav__i.is-on { color: var(--cyan); }
  .bnav__i.is-on svg { transform: translateY(-2px) scale(1.12); }
  .bnav__ind { position: absolute; top: 0; left: 0; height: 2px; pointer-events: none;
    background: var(--grad-cyan); box-shadow: 0 0 12px var(--cyan); }
  .bnav__ind::after { content: ''; position: absolute; left: 50%; top: 0; width: 60%; height: 46px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at top, rgba(0, 229, 255, 0.22), transparent 70%); }

  /* --- Bereichs-Menü über der Leiste ------------------------
     Die Unterseiten des Lizenzserver-Bereichs sind sonst am Handy gar nicht
     erreichbar; hier stehen genau dieselben Einträge wie im Klappmenü oben. */
  .bnav-back { position: fixed; inset: 0; z-index: 81; background: rgba(0, 0, 0, 0.6); }
  .bnav-menu {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 82;
    max-height: 76vh; overflow-y: auto;
    padding: var(--space-2) var(--space-3) calc(72px + env(safe-area-inset-bottom));
    background: #0d1120; border-top: 1px solid var(--line-strong);
    border-radius: 18px 18px 0 0; box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.66);
  }
  .bnav-menu__grip { width: 42px; height: 4px; border-radius: 99px; background: var(--line-strong);
    margin: var(--space-1) auto var(--space-3); }
  .bnav-menu__t { font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: 2px;
    text-transform: uppercase; color: var(--text-faint); margin: 0 var(--space-2) var(--space-2); }
  .bnav-menu__a {
    display: flex; align-items: center; min-height: var(--tap);
    padding: 0 var(--space-3); border-radius: var(--radius-sm);
    font-family: var(--font-ui); font-weight: 600; font-size: var(--text-md);
    letter-spacing: 0.5px; color: var(--text-dim);
  }
  .bnav-menu__a.is-on { color: #05060a; background: var(--grad-main); }
  .bnav-menu__a:active { background: rgba(255, 255, 255, 0.06); }
  .bnav-menu__a.is-on:active { filter: brightness(1.1); }
}

/* `hidden` braucht bei gesetztem display-Wert eine eigene Zeile. */
.bnav-menu[hidden], .bnav-back[hidden] { display: none; }