/* nj-hoffmann.de · Kopfleiste aller Seiten (PLAN.md Abschnitt 15b, Punkt 4): links der Startseiten-Knopf, der nur aus
   Noahs Namen besteht, rechts Kontakt und Menü (Panel nach L-052 in css/grund.css, js/menue.js). Keine Kapseln,
   keine Wortleiste.
   Schrift des Namens: Mona Sans Expanded (variabel, OFL 1.1, GitHub; fonts/LICENSE-mona-sans.txt). Breite Fassung mit
   125 % Laufweite, „Noah-Joel“ sehr fett, „Hoffmann“ dünn aus derselben variablen Datei: Der Gegensatz aus Breite und
   Strichstärke macht den Namen zum Zeichen statt zur Zeile, und er steht quer gegen die feine Prata der
   Überschriften. Gewählt statt Syne oder Unbounded, weil diese nicht lokal vorliegen (Laden aus dem Netz nur mit
   Freigabe); in der Schriftbibliothek geprüft (Umlaute, ß, €, „“). Lädt nur die Teilmenge latin (98 KB). */

@font-face { font-family: "Mona Sans Expanded"; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap;
  src: url("/fonts/mona-sans-expanded-latin-variable-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Mona Sans Expanded"; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap;
  src: url("/fonts/mona-sans-expanded-latin-ext-variable-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

.kopf .wortmarke, .name-marke { position: relative; display: inline-flex; align-items: baseline; gap: .32em; min-height: 44px; align-self: center; padding: 0;
  border: 0; color: var(--graphit); text-decoration: none; white-space: nowrap; text-transform: uppercase;
  font-family: "Mona Sans Expanded", "Arial Black", sans-serif; font-stretch: 125%; font-size: clamp(14px, 1.2vw, 17px); line-height: 44px; letter-spacing: .01em; }
.nm-a { font-weight: 860; }
.nm-b { font-weight: 260; }
.kopf .wortmarke::after, .name-marke::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--petrol);
  transform: scaleX(.18); transform-origin: left; transition: transform .6s var(--kurve); }
.kopf .wortmarke:focus-visible::after, .name-marke:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .kopf .wortmarke:hover::after, .name-marke:hover::after { transform: scaleX(1); } }
.kopf .wortmarke:focus-visible, .name-marke:focus-visible { outline: 2px solid var(--petrol); outline-offset: 4px; border-radius: 3px; }

/* Menüknopf auf jeder Breite (Noah, 15b: rechts Kontakt und Menü), am Desktop in der Zeile neben Kontakt */
@media (min-width: 1024px) {
  .kopf .menue-knopf { display: grid; place-content: center; gap: 7px; position: relative; right: auto; top: auto; width: 54px; height: 54px; border: 0; border-radius: 50%;
    background: var(--graphit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--grund-hell) 70%, transparent); cursor: pointer; flex: none; z-index: 50; }
  .kopf .menue-knopf span { display: block; width: 22px; height: 2px; background: var(--grund-hell); transition: transform .35s var(--kurve); }
  .kopf .menue-knopf[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .kopf .menue-knopf[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .kopf .menue-knopf:focus-visible { background: var(--petrol); }
  @media (hover: hover) and (pointer: fine) { .kopf .menue-knopf:hover { background: var(--petrol); } }
  .kopf .menue-knopf:focus-visible { outline: 2px solid var(--petrol-hell); outline-offset: 3px; }
  .kopf .kopf-kontakt { margin-left: auto; }
  .kopf { padding-right: 18px; }   /* Menüknopf an den Rand (L-021: höchstens 24 px) */
  .kopf:has(.menue-knopf[aria-expanded="true"]) { z-index: 45; }
  .kopf:has(.menue-knopf[aria-expanded="true"]) > :not(.menue-knopf) { visibility: hidden; }
}
/* Desktop ab 1200 px: kein Burger, vier Wege oben, je zwei links und rechts neben Noahs Kopf (Noah, 18.10.). Die Mitte
   bleibt frei, darunter steht im Film der Kopf. Darunter (Tablet, Handy) bleibt das Menü-Panel. */
.kopf-wege { display: none; }
@media (min-width: 1200px) {
  .kopf .menue-knopf { display: none; }
  .kopf-wege { position: absolute; left: 50%; top: 0; bottom: 0; width: min(880px, 62vw); transform: translateX(-50%); display: grid;
    grid-template-columns: 1fr clamp(170px, 14vw, 240px) 1fr; align-items: center; pointer-events: none; }
  .kopf-wege ul { display: flex; gap: clamp(22px, 2.2vw, 36px); margin: 0; padding: 0; list-style: none; pointer-events: auto; }
  .kopf-wege .kw-links { grid-column: 1; justify-content: flex-end; }
  .kopf-wege .kw-rechts { grid-column: 3; justify-content: flex-start; }
  .kopf-wege a { position: relative; display: inline-block; padding: 0; color: var(--graphit); text-decoration: none; font: 700 15px/38px var(--text-schrift); letter-spacing: .02em; white-space: nowrap; }
  .kopf-wege a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--petrol); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--kurve); }
  .kopf-wege a:focus-visible::after, .kopf-wege a[aria-current]::after { transform: scaleX(1); }
  @media (hover: hover) and (pointer: fine) { .kopf-wege a:hover::after { transform: scaleX(1); } }
  .kopf-wege a:focus-visible { outline: 2px solid var(--petrol); outline-offset: 4px; border-radius: 2px; }
  /* Kontakt-Halt: die Wege liegen teils auf dem hellen Filmstreifen; eine ruhige Graphit-Kapsel statt dreifachem Schein
     (Prüfer 19.10.: 1,3 : 1, wirkte wie ein Schmutzrand) */
  html.am-ende .kopf-wege a { background: rgb(35 33 30 / .88); padding: 0 12px; border-radius: 999px; }
  html.am-ende .kopf-wege a { color: var(--grund-hell); }
  html.am-ende .kopf-wege a::after { background: var(--petrol-hell); left: 12px; right: 12px; bottom: 6px; }
}
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) { .kopf-wege a::after { transition: none; } }
@media (max-width: 380px) { .kopf .wortmarke, .name-marke { font-size: 13px; gap: .26em; } }
@media (prefers-reduced-motion: reduce) { .kopf .wortmarke::after, .name-marke::after { transition: none; } }
html.ruhig .kopf .wortmarke::after { transition: none; }

/* Druck am Knopf (Skill bewegung, Vorprüfung P25): am Handy die einzige Rückmeldung. kopf.css liegt auf jeder Seite
   zuletzt. scale statt transform, ruhige Fassung ohne Druck. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.ruhig) .knopf, html:not(.ruhig) .pille { transition: background-color .4s var(--kurve), scale 160ms cubic-bezier(.16, 1, .3, 1); }
  html:not(.ruhig) .knopf:active, html:not(.ruhig) .pille:active { scale: .97; }
  html:not(.ruhig) .arbeit a img { transition: scale 160ms cubic-bezier(.16, 1, .3, 1); }
  html:not(.ruhig) .arbeit a:active img { scale: .985; }
}