/* Q4 Taxi — App-Schale: untere Tab-Leiste und ihre Tokens
   (UX-Vollausbau, Foundation — KONTRAKT_UX §1.3)

   Wird von app/_seite.php NACH assets/style.css und VOR app/kunde.css geladen,
   damit sowohl die Kundenstrecke als auch das Praxis-Portal sie erben und beide
   sie ueberschreiben koennen.

   Drei harte Regeln aus den Vorbildern (q4gastro bo2.css):
     · Touchziel mindestens 44 px (--tap)
     · unten immer die Safe-Area reservieren (--safe-b) — Android edge-to-edge
       und das iPhone-Homeindikator-Band verschlucken sonst den letzten Tab
     · ab 900 px verschwindet die Leiste: dort traegt die Kopf-Navigation,
       die ohnehin schon da ist. Kein zweites Layout, nur ein display:none. */

:root {
  --nav-h:  60px;
  --tap:    44px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* ── Untere Tab-Leiste ───────────────────────────────────────────────────── */

.tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  display: flex;
  background: var(--karte, #fff);
  border-top: 1px solid var(--linie);
  padding-bottom: var(--safe-b);
}

/* Getoente Glasflaeche, sobald die Token-Schicht geladen ist (Kundenstrecke
   und Portal). Das Backoffice kennt --karte nicht und behaelt die Deckfarbe
   aus der Zeile darueber. */
@supports (backdrop-filter: blur(1px)) {
  .tabs {
    background: color-mix(in srgb, var(--karte, #fff) 92%, transparent);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
  }
}

.tabs a {
  flex: 1 1 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--nav-h);
  padding: 6px 2px;
  color: var(--text-leise);
  font-size: .72rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.tabs a:hover { color: var(--text); }

/* Aktiv: die Schrift traegt den KONTRAST (Ink), der Balken traegt die MARKE.
   Frueher trug die Schrift hier die Akzentfarbe — mit einem hellen Partner-Gelb
   war das Label damit unlesbar (1,4:1) und der Indikator unsichtbar. Der
   Akzent darf nur noch Flaeche sein. */
.tabs a[aria-current="page"] {
  color: var(--text);
  font-weight: 700;
  box-shadow: none;
}

.tabs a[aria-current="page"]::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 34px; height: 3px;
  border-radius: 0 0 999px 999px;
  background: var(--akzent);
}

.tabs a[aria-current="page"] svg { stroke-width: 2.1; }

.tabs svg { width: 22px; height: 22px; display: block; }
/* min-width:0 statt der automatischen Mindestbreite: bei 200 % Zoom passt
   „Meine Fahrten" sonst nicht mehr in ein Drittel der Leiste. */
.tabs a { min-width: 0; }
.tabs a > span { display: block; max-width: 100%; }

/* Platz fuer die Leiste. Ohne das steht der letzte Absatz jeder Seite
   dauerhaft hinter den Tabs. */
body.hat-tabs main { padding-bottom: calc(var(--nav-h) + var(--safe-b) + 24px); }

@media (min-width: 900px) {
  .tabs { display: none; }
  body.hat-tabs main { padding-bottom: 0; }
}

/* ── Kopf-Navigation bei gesetzten Tabs ──────────────────────────────────── */
/* Auf dem Handy traegt die Leiste unten; die Links oben zu wiederholen waere
   nur Gedraenge. Sie werden deshalb VERSTECKT statt weggelassen — ab 900 px,
   wenn die Tab-Leiste verschwindet, kommen sie zurueck und tragen die
   Navigation weiter. (Vorher hatte eine Seite mit Tabs am Schreibtisch
   ueberhaupt keine Navigation mehr; das Portal hat sich mit einer eigenen
   Gegenregel beholfen, die jetzt entfallen kann.)

   `:not(.tel)` ist die Ausnahme, die zaehlt: die Telefonnummer steht in JEDER
   Breite im Kopf — wer die Oberflaeche nicht bedienen kann, muss anrufen
   koennen (Kontrakt §6.9). Der Aktionsslot haengt nicht an dieser Regel, er
   ist kein `a`. */

.nav.nur-breit a:not(.tel) { display: none; }

/* Gleiche Spezifitaet wie die Regel darueber (`:not()` zaehlt sein Argument
   mit) — sonst gewinnt sie auch ab 900 px und die Seite haette am
   Schreibtisch ueberhaupt keine Navigation mehr: die Tab-Leiste ist dort
   ausgeblendet. */
@media (min-width: 900px) {
  .nav.nur-breit a:not(.tel) { display: inline-flex; }
}

/* ── Aktionsslot im Kopf ─────────────────────────────────────────────────── */
/* Rechts neben der Telefonnummer; auf kleinen Schirmen rutscht er mit um. */

.kopf-aktion { display: inline-flex; align-items: center; gap: 6px; }
.kopf-aktion .knopf { min-height: var(--tap); }

/* ── Eingaben nie unter 16 px ────────────────────────────────────────────── */
/* Kleiner, und iOS zoomt beim Antippen in das Feld hinein — danach ist die
   Seite verschoben und der Nutzer sucht den Absenden-Knopf. */

input, select, textarea { font-size: max(16px, 1rem); }