/* ═══════════════════════════════════════════════════════════════════
   Gemeinsamer Modulkopf des AusdauerLabs (Stand 09.08.2026)

   Zwei Ebenen:
   1. schwarze, klebende Modulleiste mit allen neun Modulen
   2. weisser Kopf im Stil von sportunterricht.eu

   Wird von assets/js/modulkopf.js eingesetzt. Die Datei ist bewusst
   eigenstaendig: eigene Farb- und Schriftvariablen, damit sie in jedem
   Modul gleich aussieht, egal welches Farbschema das Modul selbst hat.
   ═══════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap;
  src: url('/dreikampf/schriften/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap;
  src: url('/dreikampf/schriften/barlow-condensed-700.woff2') format('woff2'); }
@font-face { font-family: 'Plex Mono'; font-weight: 600; font-display: swap;
  src: url('/dreikampf/schriften/plex-mono-600.woff2') format('woff2'); }

.mk-wurzel {
  --mk-tinte: #16181a;
  --mk-weiss: #fff;
  --mk-linie: #d8d3c8;
  --mk-kondens: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --mk-mono: 'Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --mk-modul: #b23a1f;
}

/* Beide Ebenen stecken in EINER fest positionierten Huelle. Das ist
   entscheidend: Mehrere Module zentrieren ihren Inhalt mit
   `body { display:flex }` — ein normaler Kopf wuerde dort zum Flex-Element
   NEBEN dem Inhalt und die Seite seitlich aufreissen (so geschehen in
   Modul 02). Fest positioniert ist der Kopf aus dem Fluss heraus und
   damit unabhaengig davon, wie das Modul sein Layout baut.
   Den Platz schafft ein Innenabstand am body; die Hoehe misst
   modulkopf.js und legt sie in --mk-hoehe ab. */
.mk-huelle { position: fixed; top: 0; left: 0; right: 0; z-index: 400; }

/* Abschottung: Die Module bringen eigene Regeln fuer nav/header/a/button/span
   mit (Aussenabstaende, Zeilenhoehen, Rahmen). Ohne diesen Riegel wandern sie
   in den gemeinsamen Kopf und machen ihn in jedem Modul unterschiedlich hoch
   (in Modul 07 waren es 169 statt 129 px). */
.mk-huelle, .mk-huelle * {
  margin: 0;
  box-sizing: border-box;
  line-height: normal;
  text-shadow: none;
  float: none;
  position: static;
}
.mk-huelle a, .mk-huelle button { border-radius: 0; box-shadow: none; }
/* die Huelle selbst bleibt fest positioniert (der Riegel oben setzt * auf static) */
.mk-huelle { position: fixed; }
html.hat-modulkopf body { padding-top: var(--mk-hoehe, 129px) !important; }

/* ---------- Ebene 1: Modulleiste ---------- */
.mk-leiste { background: var(--mk-tinte); }
.mk-leiste-innen {
  max-width: 1290px; margin: 0 auto; padding: 8px 16px;
  display: flex; gap: 8px; overflow-x: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent;
}
.mk-leiste-innen::-webkit-scrollbar { height: 6px; }
.mk-leiste-innen::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); }

.mk-chip {
  flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center;
  min-width: 78px; min-height: 48px; padding: 5px 12px;
  text-decoration: none; color: #f4f2ee;
  border: 2px solid rgba(255,255,255,.22); background: transparent;
  font-family: var(--mk-kondens); letter-spacing: .06em; text-transform: uppercase;
}
.mk-chip .mk-nr { font-family: var(--mk-mono); font-weight: 600; font-size: 15px; color: var(--mk-chip, #bbb); }
.mk-chip .mk-wort { font-size: 13px; line-height: 1.15; opacity: .86; }
.mk-chip:hover { border-color: var(--mk-chip, #fff); background: rgba(255,255,255,.07); }
/* Schriftfarbe im gefuellten Chip kommt aus modulkopf.js: dunkel bei hellen
   Modulfarben (Neongelb, Orange, Gruen, Tuerkis), sonst weiss. */
.mk-chip[aria-current="page"] { background: var(--mk-chip); border-color: var(--mk-chip); color: var(--mk-chip-schrift, #fff); }
.mk-chip[aria-current="page"] .mk-nr,
.mk-chip[aria-current="page"] .mk-wort { color: var(--mk-chip-schrift, #fff); opacity: 1; }

/* ---------- Ebene 2: Kopf im Stil von sportunterricht.eu ---------- */
.mk-kopf { background: var(--mk-weiss); border-bottom: 1px solid var(--mk-linie); }
.mk-kopf-innen {
  width: min(1290px, calc(100% - 32px)); margin: 0 auto; min-height: 64px;
  display: flex; align-items: center; gap: clamp(12px, 1.6vw, 28px);
}
.mk-marke { display: inline-flex; align-items: center; line-height: 0; flex: 0 0 auto; }
.mk-marke img { width: 34px; height: 34px; border-radius: 9px; display: block; }
.mk-titel {
  font-family: var(--mk-kondens); font-weight: 700; font-size: 15px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mk-tinte); white-space: nowrap;
}
.mk-titel span { color: var(--mk-modul); }

.mk-links {
  margin-left: auto; display: flex; align-items: center; gap: clamp(10px, 1.4vw, 22px);
  font-size: 12px; font-weight: 700; line-height: 1.3; text-transform: uppercase;
}
.mk-links a { color: var(--mk-tinte); text-decoration: none; white-space: nowrap; }
.mk-links a:hover, .mk-links a:focus-visible { color: var(--mk-modul); }

/* Uebernommene Knoepfe des Moduls (Info, Hintergrund, Hell/Dunkel …) */
.mk-links .mk-uebernommen {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 12px;
  background: transparent; color: var(--mk-tinte);
  border: 2px solid var(--mk-linie); border-radius: 0;
  font-family: var(--mk-kondens); font-weight: 700; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
.mk-links .mk-uebernommen:hover { border-color: var(--mk-modul); color: var(--mk-modul); }

@media (max-width: 700px) {
  .mk-titel span { display: none; }
  .mk-links { gap: 10px; font-size: 11px; }
  .mk-links a.mk-optional { display: none; }
}