/* exp-stufe0 / E0b: Hinweisbalken oben, nur mit start.mjs --experimentell. Keine Verläufe, Farben aus den Variablen der Zentrale (Fallback: Werte von stabsfunk.css).
   Der Balken ist fest (position: fixed) und schiebt die Oberkante des gesamten Layouts um seine Höhe nach unten (--exp-h, von experimentell.js gemessen). */
body.sf-exp { --exp-h: calc(max(0px, env(safe-area-inset-top)) + 52px); }
body.sf-aktiv.sf-exp { --z-oben: var(--exp-h); }
body.sf-z.sf-exp #sf { --sz-oben: calc(var(--exp-h) + 8px); }

.sf-exp-balken {
  position: fixed; left: 0; right: 0; top: 0; z-index: 9; box-sizing: border-box;
  padding: max(0px, env(safe-area-inset-top)) 8px 0 12px; pointer-events: auto;
  background: var(--sz-natrium, var(--natrium, #ff6c29)); color: var(--sz-nacht, var(--tinte, #14100c));
  border-bottom: 1px solid var(--sz-nacht, var(--tinte, #14100c));
}
.sf-exp-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; min-height: 44px; padding: 4px 0; }
.sf-exp-text { min-width: 0; display: flex; flex-direction: column; }
.sf-exp-titel { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 800; font-size: 14px; line-height: 16px; letter-spacing: 0.04em; text-transform: uppercase; }
.sf-exp-klein { font-family: Inter, system-ui, sans-serif; font-weight: 500; font-size: 12px; line-height: 14px; }
.sf-exp-link {
  display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; box-sizing: border-box;
  font-family: Inter, system-ui, sans-serif; font-weight: 700; font-size: 14px; text-decoration: none;
  color: var(--sz-kreide, #ece7d9); background: var(--sz-nacht, var(--tinte, #14100c));
}
.sf-exp-link:focus-visible, .sf-exp-zu:focus-visible { outline: 2px solid var(--sz-kreide, #ece7d9); outline-offset: 2px; }
.sf-exp-hinweis { display: flex; align-items: center; gap: 8px; padding: 4px 0 6px; border-top: 1px solid rgba(20, 16, 12, 0.4); }
.sf-exp-hinweis p { margin: 0; flex: 1 1 auto; min-width: 0; font-family: Inter, system-ui, sans-serif; font-size: 12px; line-height: 16px; }
.sf-exp-zu {
  flex: none; min-height: 44px; min-width: 44px; padding: 0 12px; box-sizing: border-box; cursor: pointer;
  font-family: Inter, system-ui, sans-serif; font-weight: 700; font-size: 14px;
  color: var(--sz-kreide, #ece7d9); background: var(--sz-nacht, var(--tinte, #14100c)); border: 0;
}

/* Start- und Endkarte (Vollfläche) beginnen unter dem Balken */
body.sf-exp .sf-start { padding-top: calc(var(--exp-h) + 12px); }
body.sf-exp .sf-start-karte { max-height: calc(100dvh - var(--exp-h) - 24px); }