/* tab-leiste – Jubiläum „Variante A“ (30.10.2026): iPhone volle Breite, tief knapp über dem Home-Balken;
   ab 768 px wandert sie als Pille unter die Kopfzeile, Symbol und Text nebeneinander. Form über --tab-form in css/design.css */
@layer module {
  .tab-leiste {
    position: fixed; z-index: 30;
    inset-inline: calc(10px + env(safe-area-inset-left)) calc(10px + env(safe-area-inset-right));
    bottom: max(var(--a2), calc(env(safe-area-inset-bottom) - 14px));
    display: flex; padding: 4px;
    border-radius: 999px;
  }
  .tab {
    flex: 1 1 0; min-inline-size: 0; min-block-size: 52px; padding: 4px 2px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border-radius: 999px;
    color: var(--text-2);
    text-decoration: none;
    font-size: var(--fs-tab); font-weight: 600;
    transition: background-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve);
  }
  .tab svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .tab[aria-current="page"] { color: var(--akzent-text); background: var(--aktiv-hg); box-shadow: 0 1px 6px rgb(0 0 0 / .10); }
  .tab:active { opacity: .6; }

  @media (min-width: 768px) {
    .tab-leiste {
      position: sticky; top: calc(max(var(--a2), env(safe-area-inset-top)) + 66px); bottom: auto; z-index: 29;
      inline-size: max-content; margin: 10px auto 0; gap: 2px;
    }
    .tab { flex: 0 0 auto; flex-direction: row; gap: var(--a2); min-block-size: var(--tipp); padding: 0 var(--a5); font-size: var(--fs-klein); }
    .tab svg { inline-size: 20px; block-size: 20px; }
  }
  @media (hover: hover) and (pointer: fine) { .tab:hover { background: var(--fuellung); } }

  /* Form aus design.css (--tab-form: pille | leiste); leiste = volle Breite ohne Rundung, unten bis über den Home-Balken */
  @container style(--tab-form: leiste) {
    .tab-leiste {
      inset-inline: 0; bottom: 0; border-radius: 0; border-width: 1px 0 0;
      padding: 4px calc(4px + env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) calc(4px + env(safe-area-inset-left));
    }
    @media (min-width: 768px) {
      .tab-leiste { inline-size: 100%; margin-top: 0; justify-content: center; border-width: 0 0 1px; }
    }
  }
  /* Unter einer flachen Kopfzeile schließt die Leiste direkt an (ab 768 px) */
  @container style(--kopf-form: flach) {
    @media (min-width: 768px) { .tab-leiste { top: calc(env(safe-area-inset-top) + 56px); } }
  }
}