/* ===========================================================================
   WELLE 311 - EIN KOPF FÜR ALLE ROUTEN (Darios Mandat 4.8.2026)
   "Das ist die originale Navileiste, die überall so aussehen soll.
    Das ist das Original und darf nicht geändert werden."

   Diese Schicht macht den Original-Kopf autark: die Instrument-Seiten
   (Executive Diagnosis, Life Sciences, Proof, Konsolen) laden kein
   styles.min.css und trugen deshalb eigene Köpfe. Werte 1:1 gemessen
   am Original auf /insights/ (4.8.2026, 1600px):
     Marke     Mono 700 17.28px, Versalien, ls 3.11px, #f8fbff
     Claim 1   Mono 800 12.99px, ls 2.60px, #ffffff
     Claim 2   Mono 750 12px,    ls 2.16px, #d8ac5c
     Nav       Mono 600 11px,    Versalien, ls 1.71px, #f2f7ff
     Knopf     Mono 700 11px,    Versalien, Goldkante, Text #0c1b33
     Schale    top 12px, Kante clamp(10px,2.2vw,26px), Höhe 78px
   Kein Blur, keine Fläche - das Titelbild läuft darunter durch (W311).
   =========================================================================== */

.ka-kopf {
  position: fixed;
  z-index: 40;
  top: 12px;
  left: clamp(10px, 2.2vw, 26px);
  right: clamp(10px, 2.2vw, 26px);
  display: flex;
  align-items: center;
  gap: 8px clamp(14px, 2vw, 28px);
  padding: 5px clamp(12px, 1.6vw, 22px);
  min-height: 68px;
  background: transparent;
  border: 0;
  border-radius: 2px;
  font-family: Archivo, system-ui, -apple-system, sans-serif;
  color: #e9eefb;
}

/* --- Marke ------------------------------------------------------------- */
.ka-kopf__marke {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  border-bottom: 0;
  flex: none;
}
.ka-kopf__zeichen {
  display: block;
  width: 80px;
  height: 66px;          /* gemessen am Original: 80x66, nicht 80x101 */
  object-fit: contain;
  object-position: left center;
  flex: none;
}
.ka-kopf__wort {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.ka-kopf__name {
  display: block;
  font: 700 17.28px/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 3.11px;
  text-transform: uppercase;
  color: #f8fbff;
  white-space: nowrap;
}
.ka-kopf__claim {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  font-style: normal;
}
.ka-kopf__claim1 {
  font: 800 12.99px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 2.6px;
  color: #fff;
  white-space: nowrap;
}
.ka-kopf__claim2 {
  font: 750 12px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 2.16px;
  color: #d8ac5c;
  white-space: nowrap;
}

/* --- Zeitschiene ------------------------------------------------------- */
.ka-kopf__zeit {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  flex: 0 1 auto;
  font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 1.2px;
}
.ka-kopf__zelle {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 0 11px;
  border-right: 1px solid rgba(255, 255, 255, .12);
  white-space: nowrap;
}
.ka-kopf__zelle:last-of-type { border-right: 0; }
.ka-kopf__stadt { color: rgba(232, 238, 245, .40); }
.ka-kopf__uhr { color: rgba(232, 238, 245, .62); font-variant-numeric: tabular-nums; }
.ka-kopf__zelle--jetzt .ka-kopf__stadt { color: #d8ac5c; }
.ka-kopf__zelle--jetzt .ka-kopf__uhr { color: #f8fbff; }
.ka-kopf__datum {
  padding-left: 13px;
  color: rgba(232, 238, 245, .40);
  white-space: nowrap;
}

/* --- Navigation -------------------------------------------------------- */
.ka-kopf__nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 22px);
  margin-left: auto;
  min-width: 0;
}
.ka-kopf__nav a {
  display: inline-flex;
  align-items: center;
  padding: 4px 1.6px;
  font: 600 11px/1.2 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 1.705px;
  text-transform: uppercase;
  color: #f2f7ff;
  text-decoration: none;
  border-bottom: 0;
  white-space: nowrap;
  transition: color .18s ease;
}
.ka-kopf__nav a:hover,
.ka-kopf__nav a:focus-visible { color: #d8ac5c; }
.ka-kopf__nav a[aria-current="page"] { color: #d8ac5c; }

.ka-kopf__sprache {
  font: 600 11px/1.2 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 1.705px;
  text-transform: uppercase;
  color: rgba(232, 238, 245, .62);
  text-decoration: none;
  border-bottom: 0;
}
.ka-kopf__sprache:hover { color: #d8ac5c; }

.ka-kopf__knopf {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 9.28px 13.12px;
  border: 1px solid #d8ac5c;
  border-radius: 2px;
  background: linear-gradient(115deg, #d8ac5c, #c9942f);
  color: #0c1b33;
  font: 700 11px/1.1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .77px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .18s ease;
}
.ka-kopf__knopf:hover,
.ka-kopf__knopf:focus-visible { filter: brightness(1.06); color: #0c1b33; }

/* --- Enge Fenster: die Zeitschiene tritt zuerst ab, nie der Knopf ------- */
@media (max-width: 2100px) { .ka-kopf__datum { display: none; } }
@media (max-width: 1980px) { .ka-kopf__zelle:nth-of-type(4) { display: none; } }
@media (max-width: 1800px) { .ka-kopf__zelle:nth-of-type(3) { display: none; } }
@media (max-width: 1700px) { .ka-kopf__zelle:nth-of-type(2) { display: none; } }
@media (max-width: 1560px) { .ka-kopf__zeit { display: none; } }
/* Die Route-Links treten gestaffelt ab. Der Knopf steht auf JEDER Breite -
   er ist der einzige Ausgang aus dem Kopf (Regie: kein Abgang ohne Übergabe). */
.ka-kopf__nav > a:not(.ka-kopf__knopf):not(.ka-kopf__sprache) { flex: none; }
@media (max-width: 1440px) {
  .ka-kopf__nav > a:not(.ka-kopf__knopf):not(.ka-kopf__sprache):nth-of-type(n+5) { display: none; }
}
@media (max-width: 1240px) {
  .ka-kopf__nav > a:not(.ka-kopf__knopf):not(.ka-kopf__sprache):nth-of-type(n+3) { display: none; }
}
@media (max-width: 1080px) {
  .ka-kopf__nav > a:not(.ka-kopf__knopf):not(.ka-kopf__sprache) { display: none; }
}
@media (max-width: 900px) {
  .ka-kopf { top: 8px; left: 8px; right: 8px; padding-inline: 12px; }
  .ka-kopf__claim { display: none; }
  .ka-kopf__zeichen { width: 58px; height: 48px; }
  .ka-kopf__name { font-size: 14px; letter-spacing: 2.2px; }
}
@media (max-width: 560px) {
  .ka-kopf__sprache { display: none; }
  .ka-kopf__knopf { padding: 8px 10px; letter-spacing: .6px; font-size: 11px; }
  .ka-kopf__name { font-size: 12.5px; letter-spacing: 1.6px; }
  .ka-kopf__zeichen { width: 44px; height: 36px; }
}

/* Der Knopf trägt auf schmalen Fenstern die kurze Fassung - er tritt nie ab. */
.ka-kopf__kurz { display: none; }
@media (max-width: 620px) {
  .ka-kopf__lang { display: none; }
  .ka-kopf__kurz { display: inline; }
}