/* kopfzeile – schwebende Glas-Pille oben (aus Jubiläum): Name links, runde Knöpfe rechts; bleibt beim Scrollen stehen.
   Mit --kopf-form: flach in css/design.css wird daraus eine randlose Leiste (Style Query, ab Safari 18). */
@layer module {
  .titelzeile {
    position: sticky; top: max(var(--a2), env(safe-area-inset-top)); z-index: 30;
    display: flex; align-items: center; gap: var(--a2);
    inline-size: min(1200px, calc(100% - 2 * var(--rand))); margin: var(--a2) auto 0;
    min-block-size: 56px; padding: 4px 4px 4px var(--a5);
    border-radius: 999px;
  }
  .titelzeile .marke { margin-right: auto; font-weight: 700; font-size: var(--fs-titel3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .titelzeile .marke b { color: var(--akzent-text); }
  .kopf-knopf {
    inline-size: var(--tipp); block-size: var(--tipp); flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--fuellung); color: var(--akzent-text);
  }
  .kopf-knopf svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .kopf-knopf:active { opacity: .6; }
  /* Form aus design.css (--kopf-form: pille | flach); flach = randlose Leiste oben wie die iOS-Navigationsleiste */
  @container style(--kopf-form: flach) {
    .titelzeile {
      top: 0; inline-size: 100%; margin: 0;
      min-block-size: calc(56px + env(safe-area-inset-top));
      padding: calc(4px + env(safe-area-inset-top)) 4px 4px var(--rand);
      border-radius: 0; border-width: 0 0 1px;
    }
  }
  @media (hover: hover) and (pointer: fine) { .kopf-knopf:hover { filter: brightness(1.08); } }
}