/* Gemeinsame Kopfleiste mit Menue - auf allen Seiten dieselbe, damit die Factory
   von ueberall aus einen Klick entfernt ist. Liegt als eigene Datei, damit sie
   nicht auf vier Seiten auseinanderlaeuft. */
.kopf{ position:sticky; top:0; z-index:60;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); }
.kopf-innen{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  height:58px; }
.marke{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); }
.marke svg{ width:25px; height:27px; color:var(--accent); }
.marke b{ font-size:18px; font-weight:800; letter-spacing:-.03em; }
.kopf-rechts{ display:flex; align-items:center; gap:9px; }
.mini{ background:var(--accent); color:var(--auf); text-decoration:none; font-size:14px;
  font-weight:800; padding:10px 17px; border-radius:13px; white-space:nowrap; border:none;
  cursor:pointer; }
.mini:hover{ background:var(--accent-satt); }
/* Der Burger ist ein echter Knopf mit Zustand - Screenreader muessen wissen,
   ob das Menue offen ist. */
.burger{ width:42px; height:42px; border:1px solid var(--line); border-radius:12px;
  background:none; cursor:pointer; display:flex; flex-direction:column; gap:4px;
  align-items:center; justify-content:center; padding:0; }
.burger:hover{ border-color:var(--accent); }
.burger i{ display:block; width:17px; height:2px; border-radius:2px; background:var(--ink); }
.menue{ position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.84);
  display:flex; align-items:flex-start; justify-content:center; padding:74px 20px 20px; }
.menue[hidden]{ display:none; }
.menue-blatt{ width:100%; max-width:380px; background:var(--card); border-radius:20px;
  box-shadow:0 3px 0 var(--line); padding:12px; }
.menue-blatt a, .menue-blatt button{ display:block; width:100%; text-align:left;
  padding:15px 16px; border-radius:14px; text-decoration:none; color:var(--ink);
  font:inherit; font-size:16px; font-weight:800; letter-spacing:-.02em;
  background:none; border:none; cursor:pointer; }
.menue-blatt a:hover{ background:var(--still); color:var(--accent); }
.menue-blatt a.jetzt{ color:var(--accent); }
.menue-blatt hr{ border:none; border-top:1px solid var(--line); margin:8px 12px; }
.menue-blatt .leiser{ font-size:14px; font-weight:700; color:var(--soft); }
.menue-zu{ text-align:center !important; color:var(--soft) !important; font-size:14px !important; }
