/* Leisten am oberen Rand (src/core/leiste.js). Bauvertrag v3, 6.2.

   Nur Token aus tokens.css; kein eigener Farbwert. Wird in jeder Oberflaeche
   NACH tokens.css und mandant-vhv.css geladen. Weil Fahrerportal, Wandportal
   und Abholschild components.css nicht laden, stehen hier eigene Regeln fuer
   den Knopf in der Leiste (.leiste .knopf, .statusleiste .knopf).

   Der Behaelter klebt oben (sticky), damit die Leiste beim Blaettern sichtbar
   bleibt; er liegt im Fluss, verdeckt also nichts. Im Wandportal (body
   overflow hidden) drueckt er den Inhalt um seine Hoehe nach unten - dort
   erscheint er nur bei Offline oder Ablauf.

   KONTRASTE, gerechnet 15.09.2026 (node, WCAG-2-Formel, Farbpaare aus
   tokens.css und mandant-vhv.css; im Browser mit getComputedStyle
   nachgemessen, Zahlen im Protokoll der Gruppe E1). Reihenfolge je Zeile:
   limou hell / limou dunkel / VHV hell / VHV dunkel. Grenze 4.5:1 fuer Text,
   3:1 fuer Linien, Punkte und Fokus.

   Meldungsleisten, Text auf der eigenen Flaeche:
     vorfuehrung  --info-schrift auf --info-flaeche       6.40 /  8.08 / 8.62 /  7.83
     offline      --warn-schrift auf --warn-flaeche       6.33 /  8.25 / 5.55 /  7.61
     anmeldung    --warn-schrift auf --warn-flaeche       wie offline
     gewechselt   --gefahr-schrift auf --gefahr-flaeche   6.50 /  8.51 / 7.35 /  8.04
     gesperrt     --gefahr-schrift auf --gefahr-flaeche   wie gewechselt
     hinweis      --neutral-schrift auf --neutral-flaeche 5.91 /  6.99 / 4.95 /  5.45
   Knopf in der Leiste: eigene Flaeche --flaeche-karte, Text wie unten.

   Statusleiste auf --flaeche-karte:
     Unternehmen  --schrift-stark   16.26 / 13.84 / 8.14 / 11.23
     Text, Knopf  --schrift-normal  10.78 / 10.67 / 5.76 /  8.61
     leise        --schrift-leise    7.29 /  7.42 / 5.76 /  6.53
     Punkt gut    --gut-schrift      6.52 /  9.25 / 6.84 /  7.54
     Punkt warn   --warn-schrift     7.30 /  8.55 / 6.30 /  5.97
     Punkt gefahr --gefahr-schrift   7.72 /  8.58 / 8.63 /  6.05
     Knopf Hover  --schrift-normal auf --flaeche-vertieft 10.19 / 11.35 / 5.56 / 9.93
     Fokus        --fokus gegen Karte 7.83 / 13.84 / 4.32 /  5.97
     Rand Knopf und Rolle --linie-stark gegen Karte 1.98 / 2.20 / 1.86 / 1.77:
       nur Trennung wie .knopf in components.css; Knopf und Rolle sind durch
       Flaeche und Beschriftung erkennbar, nicht durch den Rand.
     Linie unten  --linie gegen Karte: nur Trennung, keine Bedeutung. */

.leisten {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  font-family: var(--schriftfamilie);
  font-size: var(--grad-3);
  line-height: var(--zeile-normal);
  -webkit-font-smoothing: antialiased;
}

/* --- Meldungsleiste --- */

.leiste {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-3);
  padding: var(--raum-2) var(--raum-4);
  border-bottom: 1px solid var(--neutral-linie);
  background: var(--neutral-flaeche);
  color: var(--neutral-schrift);
  font-weight: var(--fett-mittel);
}

.leiste-zeichen { width: 18px; height: 18px; flex: none; }
.leiste-text { flex: 1 1 240px; min-width: 0; }
.leiste-aktion { display: inline-flex; flex: none; }
.leiste-aktion[hidden] { display: none; }

.leiste-vorfuehrung { background: var(--info-flaeche); border-color: var(--info-linie); color: var(--info-schrift); }
.leiste-offline,
.leiste-anmeldung { background: var(--warn-flaeche); border-color: var(--warn-linie); color: var(--warn-schrift); }
.leiste-gewechselt,
.leiste-gesperrt { background: var(--gefahr-flaeche); border-color: var(--gefahr-linie); color: var(--gefahr-schrift); }
.leiste-hinweis { background: var(--neutral-flaeche); border-color: var(--neutral-linie); color: var(--neutral-schrift); }

/* Solange 'gewechselt' steht, ist der Rest der Seite inert (leiste.js setzt
   das Attribut). Die Daempfung zeigt es; sie versteckt nichts. */
:root[data-gesperrt="ja"] body > [inert] { opacity: 0.55; }

/* --- Statusleiste --- */

.statusleiste {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-4);
  min-height: 40px;
  padding: var(--raum-1) var(--raum-4);
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche-karte);
  color: var(--schrift-normal);
  font-size: var(--grad-2);
}

.statusleiste > [hidden] { display: none; }

.statusleiste-unternehmen {
  color: var(--schrift-stark);
  font-weight: var(--fett-halb);
  font-size: var(--grad-3);
}

.statusleiste-rolle {
  padding: 0 var(--raum-2);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-2); /* keine Pille, DESIGN.md 8 */
  color: var(--schrift-leise);
  font-size: var(--grad-1);
  line-height: 20px;
}

.statusleiste-abgleich {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  color: var(--schrift-normal);
}

/* Der Punkt traegt die Bedeutung als Farbe, der Text daneben als Wort -
   beides zusammen, nie nur die Farbe. */
.statusleiste-punkt {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: var(--rund-voll);
  background: var(--schrift-leise);
}
.statusleiste-abgleich[data-ton="gut"] .statusleiste-punkt { background: var(--gut-schrift); }
.statusleiste-abgleich[data-ton="warn"] .statusleiste-punkt { background: var(--warn-schrift); }
.statusleiste-abgleich[data-ton="gefahr"] .statusleiste-punkt { background: var(--gefahr-schrift); }
.statusleiste-abgleich[data-ton="gefahr"] .statusleiste-abgleich-text { color: var(--gefahr-schrift); font-weight: var(--fett-mittel); }
.statusleiste-abgleich[data-ton="warn"] .statusleiste-abgleich-text { color: var(--warn-schrift); font-weight: var(--fett-mittel); }

.statusleiste-kontingent { color: var(--schrift-leise); font-variant-numeric: tabular-nums; }
.statusleiste-kontingent[data-voll="ja"] { color: var(--warn-schrift); font-weight: var(--fett-mittel); }

.statusleiste-rest { flex: 1 1 auto; }

.statusleiste-email {
  color: var(--schrift-leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40vw;
}

/* --- Knopf in Leiste und Statusleiste (eigenstaendig, siehe Kopf) --- */

.leiste .knopf,
.statusleiste .knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  height: 28px;
  padding: 0 var(--raum-3);
  border-radius: var(--rund-2);
  border: 1px solid var(--linie-stark);
  background: var(--flaeche-karte);
  color: var(--schrift-normal);
  font: inherit;
  font-size: var(--grad-2);
  font-weight: var(--fett-mittel);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.leiste .knopf:hover,
.statusleiste .knopf:hover { background: var(--flaeche-vertieft); }
.leiste .knopf:focus-visible,
.statusleiste .knopf:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.leiste .knopf-klein,
.statusleiste .knopf-klein { height: 28px; }
/* Der Knopf einer Meldungsleiste und "Abmelden" ruecken nicht zusammen. */
.leiste-knopf,
.statusleiste-abmelden { flex: none; }
.leiste .knopf svg,
.statusleiste .knopf svg { width: 14px; height: 14px; flex: none; }

@media (max-width: 640px) {
  .leiste { padding: var(--raum-2) var(--raum-3); }
  .statusleiste { padding: var(--raum-1) var(--raum-3); gap: var(--raum-1) var(--raum-3); }
  .statusleiste-email { display: none; }
}

/* Handy als App (24.09.2026, Figma "6 Handy-App", Prinzip 1): unter 640px
   gibt es keinen Statusbalken. Unternehmen, Rolle, Abgleich und Abmelden
   stehen am Arbeitsplatz unter "Mehr", im Fahrerportal im Kopf und unter
   "Ich". Die Leisten fuer Offline, Anmeldung und Sperre bleiben. */
@media (max-width: 639.98px) {
  .statusleiste { display: none; }
}

@media print {
  .leisten { display: none; }
}