/* 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(--marke); 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; }
/* Beim Zeigen dunkler, sonst nichts - dieselbe Bewegung wie .knopf auf den
   Seiten (Marc, 11. September 2026). Vorher passierte hier gar nichts: Der
   Hover setzte dieselbe Farbe noch einmal. */
.mini{ transition:background-color var(--dauer, .16s) ease; }
/* NUR WO ES EINEN ZEIGER GIBT. Auf dem Telefon bleibt ein :hover nach dem
   Antippen haengen, bis man woanders hintippt - der Knopf behielte seinen
   Zeige-Zustand. Seit dem 14. September 2026 steht deshalb jeder Hover in
   dieser Abfrage.
   Der Rueckfallwert steht dort, weil codes.html als einzige Seite kopf.css
   ohne seite.css laedt; seit tokens.css ueberall zuerst geladen wird, greift
   er praktisch nicht mehr - er bleibt als Gurt. */
@media (hover:hover){
  .mini:hover{ background:var(--qraki-tief, #6D28D9); }
}
@media (prefers-reduced-motion:reduce){ .mini{ transition:none; } }
/* Ein Textlink statt eines Burgers: Bei drei Zielen ist ein Menue mehr
   Klick als Hilfe. Impressum und Datenschutz stehen im Fuss. */
.kopf-link{ font-size:14.5px; font-weight:800; color:var(--ink);
  text-decoration:none; padding:10px 4px; white-space:nowrap; }
.kopf-link:hover{ color:var(--accent); }

/* ---- Zweite Ebene im Menue -------------------------------------------
   Marc, 9. September 2026, nach dem externen Audit: elf Eintraege waren der
   groesste Klarheitsverlust der Seite. Oben stehen jetzt vier Wege, alles
   Geschaeftliche klappt unter "Mehr" auf. Derselbe <details>-Mechanismus wie
   ueberall sonst - EIN Mittel, keine Sonderloesung. */
.menue nav .mehr-menue{ margin-top:2px; border-top:1px solid var(--line); padding-top:4px; }
.menue nav .mehr-menue > summary{
  display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:11px;
  cursor:pointer; list-style:none; color:var(--soft); }
.menue nav .mehr-menue > summary::-webkit-details-marker{ display:none; }
.menue nav .mehr-menue > summary > svg{ flex:0 0 19px; color:var(--soft); }
.menue nav .mehr-menue > summary b{ font-size:15px; font-weight:800; letter-spacing:-.01em; }
@media (hover:hover){ .menue nav .mehr-menue > summary:hover{ background:var(--still, rgba(255,255,255,.06)); color:var(--ink); } }
.menue nav .mehr-menue[open] > summary{ color:var(--ink); }
/* Der aufgeklappte Teil rueckt ein: Man sieht, dass er zu "Mehr" gehoert und
   nicht zur Hauptliste. Dieselbe Sprache wie die Aufklapper im Fliesstext. */
.menue nav .mehr-menue > a{ padding-left:24px; }
.menue nav .mehr-menue > a > svg{ opacity:.8; }