/*
 * Obere Leiste (.apphead) beim Scrollen (Fabio 09.11.2026, Variante F „schwebend ohne Unschärfe“).
 * Vorgabe: 3 Seitenbeschreibungen/00_Uebergreifend.md, Abschnitt „Obere Leiste beim Scrollen“, und der
 * Prototyp 2 Prototyp/Kopfleiste_schwebend.html (Block „NEU 09.11.2026“, hier 1:1 übernommen).
 *
 * Nur Handybreite (unter 600 px). Tablet und Desktop bleiben wie heute. Die großen Köpfe, die beim
 * Scrollen einfahren (.hj-kopf: HealthHub, Fahrplan, Coaching, Module), blenden die Leiste ohnehin aus.
 * --kl („Kopfleiste“) läuft stufenlos von 0 (ganz oben) bis 1 (nach 56 px Scrollweg); kopfleiste.js setzt
 * nur --kl. Eigener Name, damit es sich nicht mit --k des einfahrenden Kopfs (.hj-kopf) überschneidet.
 * Die Leiste hat keinen Hintergrund mehr; ganz oben liegt darunter nur die Seitenfarbe, sie sieht also aus
 * wie heute. Titel, Glocke, Zurück, ✕ und Profil werden mit --kl zu Inseln mit Schatten. Kein Schleier,
 * keine Unschärfe (kein backdrop-filter). Insel hell = --card zu 92 %, dunkel = --card2 zu 94 %.
 * Eingebunden als letztes Stylesheet (render.php), damit es .apphead .es-x aus module.css überstimmt.
 */
html { --kl:0; }
@media (max-width: 599.98px) {
  html { --insel:color-mix(in srgb, var(--card) 92%, transparent); --insel-rand:rgb(16 21 95 / .06); --insel-schatten:16 21 95; }
  html[data-theme="dark"] { --insel:color-mix(in srgb, var(--card2) 94%, transparent); --insel-rand:rgb(255 255 255 / .10); --insel-schatten:0 0 0; }
  .apphead { background:transparent; pointer-events:none; }           /* Lücken zwischen den Inseln lassen Tipps zum Inhalt durch */
  .apphead > * { pointer-events:auto; }
  /* Titel wird zur Pille: nur so breit wie der Text, höchstens bis zur Glocke (vorher flex:1). Schrift rückt höchstens 8 px nach rechts.
     titelEinpassen (app.js) misst weiter scrollWidth gegen clientWidth, also gegen diese Breite. */
  .apphead h2 {
    flex:0 1 auto; margin-right:auto;
    padding:calc(var(--kl) * 8px) calc(var(--kl) * 16px);
    margin-left:calc(var(--kl) * -8px);
    border-radius:999px;
    background:color-mix(in srgb, var(--insel) calc(var(--kl) * 100%), transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--insel-rand) calc(var(--kl) * 100%), transparent),
               0 6px 18px rgb(var(--insel-schatten) / calc(var(--kl) * .12));
  }
  .apphead h2.zweizeilig { border-radius:18px; }                       /* zweizeiliger Titel: abgerundetes Rechteck statt Pille */
  /* Glocke, Zurück und ✕: aus der Kachel in Kartenfarbe wird die Insel mit Schatten */
  .apphead .bell, .apphead .back, .apphead .es-x {
    background:color-mix(in srgb, var(--insel) calc(var(--kl) * 100%), var(--card));
    border-color:color-mix(in srgb, var(--insel-rand) calc(var(--kl) * 100%), var(--line));
    box-shadow:0 6px 18px rgb(var(--insel-schatten) / calc(var(--kl) * .12));
  }
  /* Profil-Kreis: bleibt im Markenverlauf, bekommt nur den Schatten */
  .apphead .av { box-shadow:0 6px 18px rgb(var(--insel-schatten) / calc(var(--kl) * .16)); }
  /* Installierte App, falls sie unter die Statusleiste zeichnet: Streifen in Seitenfarbe, damit die Uhrzeit lesbar bleibt.
     Im Browser ist env(safe-area-inset-top) 0, der Streifen entfällt dann. */
  body::before { content:""; position:fixed; left:0; right:0; top:0; height:env(safe-area-inset-top, 0px); background:var(--bg); z-index:21; pointer-events:none; }
}
@media (max-width: 599.98px) and (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { --insel:color-mix(in srgb, var(--card2) 94%, transparent); --insel-rand:rgb(255 255 255 / .10); --insel-schatten:0 0 0; }
}