/* ══════════════════════════════════════════════════════════════════════
   EH — Statusleiste und Kopfzeile der Monteur-Seiten
   (Hub eh-monteur.html und die sieben Apps: Track, Layers, Shield, Check,
   Order, Rule, Strang)
   ----------------------------------------------------------------------
   EINE Regel für oben, in allen acht Seiten gleich (seit 10/2026). Bis
   dahin sah jede Seite oben etwas anders aus: drei verschiedene
   Polsterungen (keine, max(), calc()), eine halb durchsichtige Kopfzeile
   in EH-Shield, eine nicht klebende in EH-Track, theme-color in vier
   Farben, und hinter der Statusleiste lag überall der helle Seitengrund.

   Seit 10/2026 auch das MUSTER der Kopfzeile (Regel 5, Vorlage EH-Shield):
   Symbol-Kachel, Name, Projekt, Online-Anzeige, Status-Punkt, Menü und
   Knöpfe sehen in allen acht Seiten gleich aus. Was darin steht (Texte,
   Symbol-SVG, ids, wann etwas ein- oder ausgeblendet wird), bestimmt
   weiter jede Seite; das HTML steht statisch in jeder Seite (offline).
   Keine Seite bringt für diese Bausteine eine eigene Regel mit.
   Diese Datei steht in der Offline-Hülle (GEMEINSAM in sw.js) und wird
   NACH dem <style> der Seite eingebunden: bei gleicher Spezifität gewinnt
   der Rahmen hier.

   Kein viewport-fit=cover, kein theme-color (seit 10/2026, Nacharbeit):
   mit beidem war die Statusleiste auf dem iPhone (iOS 27, installierte
   App) weißlich und verschwommen. Welches von beiden das auslöst — oder
   ob es ein Schleier ist, den iOS selbst über Inhalt unter der
   Statusleiste legt —, ist eine Vermutung, nur am Gerät zu sehen. Ohne
   cover liefert iOS env(safe-area-inset-*) = 0 und rückt die Seite
   selbst ein; dann ist der Streifen (Regel 1) 0 hoch, die Kopfzeile oben
   12 px, und hinter Status- und Home-Leiste liegt der Grund von html.
   Die Regeln mit env() bleiben als Netz stehen: liefert ein Gerät doch
   einen Abstand, greifen sie, sonst tun sie nichts.

   Die Regeln:
   1. Hinter der Statusleiste ist es dunkel — auf JEDEM Bildschirm, auch
      dort, wo es keine Kopfzeile gibt (Anmeldung, „Daten werden geladen“,
      „Bitte über den Hub öffnen“). Dafür ein fester Streifen in Höhe des
      oberen Sicherheitsabstands (body::before) und der Grund hinter der
      Seite (html) in derselben Farbe — der kommt beim Überziehen am
      Seitenanfang zum Vorschein. Der Seiteninhalt behält seinen hellen
      Grund (body). Dasselbe Muster wie der Streifen im Schnellmenü des
      Notizzettels (.ehn-menue::before in css/eh-notes.css).
   2. Die Kopfzeile ist undurchsichtig, ohne Weichzeichner, klebt oben und
      beginnt unter der Statusleiste: oben max(Luft, Sicherheitsabstand)
      wie im Hub und im Notizzettel — ohne Aussparung bleiben es die
      normalen 12 px, mit Aussparung kommt kein zweiter Abstand dazu.
   3. Gleiche Maße: Mindesthöhe aus Luft + Zeile + Luft, links und rechts
      16 px — der Inhalt steht mittig. Im Querformat kommen links und
      rechts die seitlichen Sicherheitsabstände dazu. Die Kopfzeile hält
      keinen Platz für den Notizzettel-Reiter frei: wer ihn nach oben
      zieht, legt ihn über die Kopfzeile (er liegt darüber, z-index 9000),
      wie vor 10/2026. Bis dahin waren rechts 62 px frei, und der Inhalt
      sass 23 px links der Mitte. --rand-seite (62 px) für den
      Seiteninhalt in EH-Strang, EH-Shield und den roten Karten bleibt.
   4. Knöpfe in der Kopfzeile (.hbtn, auch der „Apps“-Knopf) sehen aus wie
      bisher, treffen aber auf mindestens 44 × 44 px (unsichtbare Fläche
      über ::after).
   5. Das Muster (seit 10/2026, Vorlage EH-Shield), von links nach rechts:
        .app-header-icon   Symbol der App (das der Hub-Kachel), 34 × 34,
                           grün, Zeichnung 18 px weiß; im Hub das Apps-Raster
        .app-info          .app-monteur (Name) und darunter .app-projekt
                           (Projekt; im Hub der Untertitel), beide eine
                           Zeile, zu lang mit „…“
        .header-btns       .netz-badge (Online/Offline), dann — nur wenn
                           etwas wartet oder abgelehnt ist — .status-punkt,
                           dann .kopf-menue (nur EH-Track), dann der
                           „Apps“-Knopf; im Hub Glocke und „Abmelden“
      Der App-Name steht nur im Symbol (role="img" mit aria-label), nicht
      als Text. Zusätzliches einer App steht nicht in der Kopfzeile, sondern
      darunter (EH-Strang im Weg: „← Alle Wege“, Wegname, Ring-Chip in
      .weg-leiste — in der Seite). Die Online-Anzeige folgt dem Signal, das
      die Seite ohnehin benutzt (navigator.onLine mit online/offline).

   Z-Index: Kopfzeile 50 wie bisher; der Streifen 8500 — über allem der
   Seiten (die reichen bis 500), unter dem Notizzettel (ab 9000, legt
   seinen Sicherheitsabstand selbst an), der Update-Leiste (9400) und dem
   Vollbild „Update erforderlich“ (9500, js/eh-monteur-update.js).

   Wer hier etwas ändert, ändert es für alle acht Seiten und zählt VERSION
   in sw.js und STAND in js/eh-monteur-update.js hoch
   (sh scripts/sw-version-pruefen.sh --schreiben). Test:
   scripts/browsertest/monteur-kopf.mjs.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --ehk-dunkel:#0a1a0e;
  --ehk-oben:env(safe-area-inset-top,0px);
  --ehk-links:env(safe-area-inset-left,0px);
  --ehk-rechts:env(safe-area-inset-right,0px);
  --ehk-luft:12px;     /* oben (ohne Aussparung) und unten in der Kopfzeile */
  --ehk-zeile:40px;    /* Mindesthöhe der Inhaltszeile */
  --ehk-rand:16px;     /* links und rechts */
  /* Höhe der Kopfzeile, solange ihr Inhalt in eine Zeile passt. Seiten,
     die etwas darunter festkleben (EH-Shield: Plan-Kopf), rechnen damit. */
  --ehk-hoehe:calc(max(var(--ehk-luft), var(--ehk-oben)) + var(--ehk-zeile) + var(--ehk-luft));
}

/* 1. Hinter der Statusleiste dunkel */
html{
  background-color:var(--ehk-dunkel);
  /* Was per scrollIntoView, Fokus oder Sprungmarke nach oben rückt, landet
     unter der klebenden Kopfzeile statt hinter ihr. */
  scroll-padding-top:var(--ehk-hoehe);
}
/* html body statt body: gewinnt auch gegen ein „html,body{min-height:100%}“
   der Seite. Der helle Grund der Seite (background aus ihrem body) deckt so
   mindestens das Fenster — darunter läge sonst der dunkle Grund. Seitlich
   der Sicherheitsabstand im Querformat (sonst läge Inhalt unter der
   Aussparung); im Hochformat ist er 0.
   flow-root: der obere Rand des ersten Kinds (der Hinweis „Bitte über den
   Hub öffnen“ hat margin:60px auto) bleibt im body, statt durch ihn nach
   oben durchzuschlagen — sonst begänne der helle Grund erst 60 px tiefer,
   und darüber stünde ein dunkler Streifen. Die Lage des Inhalts ändert
   sich dadurch nicht. */
html body{
  display:flow-root;
  min-height:100vh;
  min-height:100dvh;
  padding-left:var(--ehk-links);
  padding-right:var(--ehk-rechts);
  scroll-padding-top:var(--ehk-hoehe);
}
body::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--ehk-oben);
  background:var(--ehk-dunkel);
  z-index:8500;
  pointer-events:none;
}

/* 2. und 3. Die Kopfzeile */
.app-header{
  position:sticky;
  top:0;
  z-index:50;
  box-sizing:border-box;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:6px 10px;
  min-height:var(--ehk-hoehe);
  /* Im Querformat bis an den Rand, über die seitliche Polsterung von body. */
  margin:0 calc(-1 * var(--ehk-rechts)) 0 calc(-1 * var(--ehk-links));
  padding:max(var(--ehk-luft), var(--ehk-oben))
          calc(var(--ehk-rand) + var(--ehk-rechts))
          var(--ehk-luft)
          calc(var(--ehk-rand) + var(--ehk-links));
  background:var(--ehk-dunkel);
  color:#fff;
  opacity:1;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
/* Links Name und Baustelle (.app-info), rechts die Knopfgruppe. Bleiben
   für Name und Baustelle keine 80 px, rutscht die Knopfgruppe in eine
   zweite Zeile (rechtsbündig) — statt den Namen auf „Max …“ zu kürzen oder
   seitlich aus dem Bild zu laufen. Passt die Gruppe auch dort nicht (360 px
   mit 150 % Zoom), brechen die Knöpfe in sich um. 80 statt bis 10/2026
   100 px: links steht seitdem das Symbol (34 px + Abstand), und mit 100 px
   bräche der Hub schon bei 360 px um. */
.app-header .app-info{
  flex:1 1 80px;
  min-width:0;
}
.app-header .header-btns{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  flex:0 1 auto;
  min-width:0;
  margin-left:auto;
}

/* 4. Knöpfe in der Kopfzeile — Aussehen wie bisher (.hbtn aus den Apps,
   zeichengleich), Trefferfläche mindestens 44 × 44 px. */
.app-header .hbtn{
  position:relative;
  padding:7px 12px;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:8px;
  color:rgba(255,255,255,0.7);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.app-header .hbtn:hover,
.app-header .hbtn:active{background:rgba(255,255,255,0.2);}
.app-header .hbtn::after{
  content:'';
  position:absolute;
  top:min(0px, calc(50% - 22px));
  bottom:min(0px, calc(50% - 22px));
  left:min(0px, calc(50% - 22px));
  right:min(0px, calc(50% - 22px));
}

/* 5. Das Muster der Kopfzeile (seit 10/2026, Vorlage EH-Shield). Die Maße
   sind die gemessenen von EH-Shield vor 10/2026: Symbol 34 × 34 mit
   Zeichnung 18 px, Name 14 px, Projekt 11 px, Online-Anzeige 22 px hoch.
   Zeilenhöhen stehen ausdrücklich da (nicht „normal“), damit keine Seite
   über ihr body etwas anderes erbt. Farben fest, nicht über die Variablen
   der Seiten: dieselbe Farbe in allen acht. */
.app-header .app-header-icon{
  flex:0 0 34px;
  box-sizing:border-box;
  width:34px;
  height:34px;
  border-radius:8px;
  background:#1DB954;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.app-header .app-header-icon svg{
  display:block;
  width:18px;
  height:18px;
  flex-shrink:0;
}
.app-header .app-monteur{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:14px;
  font-weight:800;
  line-height:16.8px;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.app-header .app-projekt{
  font-family:'DM Sans',sans-serif;
  font-size:11px;
  font-weight:400;
  line-height:14px;
  color:rgba(255,255,255,0.45);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Projekt antippen nur, wo die App es kann (EH-Shield, EH-Layers). */
.app-header .app-projekt[onclick]{cursor:pointer;}

/* Online-Anzeige: Text in einer Pille, grün bzw. amber — wie EH-Shield. */
.app-header .netz-badge{
  flex:0 0 auto;
  box-sizing:border-box;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:10px;
  font-weight:800;
  line-height:12px;
  padding:5px 10px;
  border-radius:20px;
  white-space:nowrap;
  background:rgba(29,185,84,0.18);
  color:#1DB954;
}
.app-header .netz-badge.offline{
  background:rgba(245,158,11,0.18);
  color:#f59e0b;
}

/* Knopf mit Symbol statt Text (Glocke im Hub, Menü in EH-Track): gleich
   gross, Zeichnung 15 px. */
.app-header .hbtn.kopf-symbol{padding:7px 10px;line-height:0;}

/* Status-Punkt (EH-Track, EH-Strang): rechts neben der Online-Anzeige, nur
   da, wenn ein Eintrag wartet (amber, mit Zahl) oder abgelehnt ist (rot,
   „!“) — das entscheidet die Seite (hidden). Trifft auf 44 × 44 px. */
.app-header .status-punkt{
  position:relative;
  flex:0 0 auto;
  box-sizing:border-box;
  min-width:28px;
  height:28px;
  padding:0 8px;
  border-radius:999px;
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
}
.app-header .status-punkt[hidden]{display:none;}
.app-header .status-punkt .punkt{width:9px;height:9px;border-radius:50%;}
.app-header .status-punkt.wartet{background:#f59e0b;color:#1f1300;}
.app-header .status-punkt.wartet .punkt{background:#1f1300;}
.app-header .status-punkt.fehler{background:#ef4444;color:#fff;}
.app-header .status-punkt.fehler .punkt{background:#fff;}
@keyframes ehk-puls{0%,100%{opacity:1}50%{opacity:.35}}
.app-header .status-punkt[data-laeuft] .punkt{animation:ehk-puls 1s ease-in-out infinite;}
.app-header .status-punkt::after{
  content:'';
  position:absolute;
  top:-8px;
  bottom:-8px;
  left:min(0px, calc(50% - 22px));
  right:min(0px, calc(50% - 22px));
}

/* Menü in der Kopfzeile (EH-Track: Ansicht wechseln, Stammliste
   aktualisieren). Der Knopf ist ein .hbtn.kopf-symbol mit aria-haspopup;
   die Liste liegt fest am Fenster unter dem Knopf (die Seite legt sie hin,
   nie seitlich aus dem Bild) und über dem Seiteninhalt, aber unter dem
   Notizzettel (9000), der Update-Leiste (9400) und dem Vollbild (9500) —
   sie liegt im Stapel der Kopfzeile (50). Einträge treffen auf 44 px,
   Schrift 16 px. */
.app-header .kopf-menue{position:relative;flex:0 0 auto;display:flex;}
.app-header .kopf-menue-liste{
  position:fixed;
  z-index:1;
  box-sizing:border-box;
  min-width:min(220px, calc(100vw - 16px));
  max-width:calc(100vw - 16px);
  padding:6px;
  background:#fff;
  border:1px solid #d4e8db;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(10,26,14,0.28);
  display:flex;
  flex-direction:column;
  gap:2px;
}
.app-header .kopf-menue-liste[hidden]{display:none;}
.app-header .kopf-menue-liste [role="menuitem"]{
  display:flex;
  align-items:center;
  gap:10px;
  box-sizing:border-box;
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border:none;
  border-radius:8px;
  background:none;
  color:#0f1a12;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:16px;
  font-weight:700;
  line-height:20px;
  text-align:left;
  cursor:pointer;
}
.app-header .kopf-menue-liste [role="menuitem"] svg{flex-shrink:0;color:#17a349;}
.app-header .kopf-menue-liste [role="menuitem"]:hover,
.app-header .kopf-menue-liste [role="menuitem"]:focus-visible{background:#e8f8ee;outline:none;}
.app-header .kopf-menue-liste [role="menuitem"]:focus-visible{box-shadow:inset 0 0 0 2px #17a349;}