/* ===========================================================================
   Seitenkopf mit Wortmarke (Phase A1)

   Aus der an G0 abgenommenen Gesamtseite (prototypen/seite-d.css), Zahlen
   aus tokens.css. Die Wortmarke folgt der Regel .marke aus
   GESAMTSEITE-SKIZZE.html (Fassung 03.10.2026, 12:16, an G0 bestätigt):
   Zeichen „my“ im Textlauf, Täler auf der Grundlinie, Spitzen auf Höhe des
   „l“, nicht beschnitten; „prop“ 600, „lens“ 500, ohne Lücke, eine Farbe.
   Dieselben Maße stehen in werkzeuge/baue-wortmarke-relaunch.py.

   Im Seitenkopf steht die Marke als Schrift mit eingebettetem Zeichen, nicht
   als <img>: Nur so folgt sie der Schriftfarbe jeder Tageszeit (CLAUDE.md,
   „Marke“). Der Pfad des Zeichens ist eine Abschrift aus
   marke/myproplens-zeichen.svg; ein Test vergleicht beide.
   =========================================================================== */

.kopf {
    position: fixed; z-index: 10; left: 16px; right: 16px; top: calc(12px + env(safe-area-inset-top, 0px));
    display: flex; align-items: center; gap: 16px; padding: 8px 10px 8px 16px; max-width: 1160px; margin-inline: auto;
}
.kopf.glas { border-radius: var(--r-bedien); }

.marke { display: flex; align-items: center; color: var(--text); text-decoration: none; border-radius: var(--r-bedien); -webkit-text-stroke: 0; }
.marke-wort { font: 500 var(--g-marke)/1 var(--f-kopf); letter-spacing: 0; white-space: nowrap; padding-block: 2px 4px; }
.marke-wort b { font-weight: 600; }
.marke-my {
    width: 1.225em; height: 1.1826em; vertical-align: -.4163em; margin-right: .02em; overflow: visible;
    fill: none; stroke: currentColor; stroke-width: 10; stroke-linejoin: miter; stroke-miterlimit: 3.2; stroke-linecap: butt;
}

.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
    color: var(--leise); text-decoration: none; white-space: nowrap; padding: 8px 12px; border-radius: var(--r-bedien);
    font: 500 var(--g-14) var(--f-text);
    transition: color var(--d-ping) var(--ease-aus), background var(--d-ping) var(--ease-aus);
}
.nav a:hover { color: var(--text); background: var(--feld); }

.zeiten { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-bedien); background: var(--feld); border: 1px solid var(--glasrand); }
.zeiten button {
    width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--leise);
    display: grid; place-items: center; cursor: pointer;
    transition: color var(--d-ping) var(--ease-aus), background var(--d-ping) var(--ease-aus);
}
.zeiten button:hover { color: var(--text); }
.zeiten button[aria-pressed="true"] { background: var(--glas-stark); color: var(--akzent); box-shadow: inset 0 1px 0 var(--glanzrand), 0 0 0 1px var(--akzent); }
.zeiten svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:is(.marke, .nav a, .zeiten button):focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* Zwischen Telefon und breitem Bildschirm rücken die Verweise zusammen;
   darunter entfallen sie, und unter 375 px wird der Kopf enger
   (seite-d.css, dort ohne Überstand bei 320 und 768 px gemessen). */
@media (min-width: 761px) and (max-width: 1100px) { .kopf { gap: 10px; } .nav { gap: 0; } .nav a { padding-inline: 8px; } }
@media (max-width: 760px) { .nav { display: none; } .zeiten { margin-left: auto; } }
@media (max-width: 374px) { .kopf { gap: 8px; padding-left: 12px; } .zeiten { gap: 0; } }
@media (prefers-reduced-motion: reduce) { .nav a, .zeiten button { transition: none; } }