/* ===========================================================================
   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
   Flaeche rgba(6,12,21,.56) + blur(22px) nach dem Guss - das Titelbild
   laeuft weiterhin darunter durch, nur gefiltert (W317, 5.8.2026).
   =========================================================================== */

.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: rgba(6,12,21,.56);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 2px;
  box-shadow: 0 18px 44px -30px rgba(0,0,0,.85);
  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,
.ka-kopf__nav .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,
.ka-kopf__nav .ka-kopf__knopf:hover,
.ka-kopf__nav .ka-kopf__knopf:focus-visible { filter: brightness(1.06); color: #0c1b33; }

/* --- Freiraum unter dem schwebenden Kopf --------------------------------
   Der Kopf schwebt: Unterkante 90 px, unter 900 px 76 px.
   wave169-system.css setzt fuer jede Bahn in main
   padding-block: calc(--ka-step * 12 | * 7) !important  =  96 px / 56 px.
   Bei 390 px liegen also 56 px Freiraum unter einem Kopf, der bis 76 px
   reicht: die erste Zeile lief gemessen 20 px UNTER den Kopf (und vor
   dieser Welle mit der Kennzeile des Instruments 7 px darunter).
   Die erste Bahn setzt ihren Abstand deshalb selbst. !important ist hier
   noetig, weil wave169 selbst !important schreibt; steht auf der Liste
   fuer den !important-Abbau (B2).
   Reichweite: genau eine Seite - /industries/life-sciences/. Die fuenf
   anderen Seiten mit diesem Kopf beginnen nicht mit einer trust-hero-Bahn
   (geprueft) und ihre Luft ist mit +63 / +67 px gemessen in Ordnung. */
main > .trust-hero:first-child { padding-block-start: 124px !important; }
@media (max-width: 900px) {
  main > .trust-hero:first-child { padding-block-start: 106px !important; }
}

/* --- 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; }
}

/* WELLE322B-BUEHNE-INSTRUMENT */
body{background-image:linear-gradient(180deg,rgba(4,10,20,.9) 0%,rgba(4,10,20,.955) 46%,rgba(3,8,16,.975) 100%),url("/assets/bg/w311-hero-duo-1920.webp")!important;background-size:cover,cover!important;background-position:center top,center 18%!important;background-attachment:fixed,fixed!important;background-repeat:no-repeat,no-repeat!important}
@media (max-width:900px){body{background-attachment:scroll,scroll!important}}