/* ---------------------------------------------------------------------
   Kopfzeile fuer die Unterprojekte von zahl1.de

   Eigenstaendig und abgeschottet: alle Klassen tragen das Praefix "z1k",
   es gibt keine Regel auf einem Element- oder Fremdselektor. Die Schrift
   heisst hier "Inter z1", damit sie nicht mit einer Inter-Einbindung der
   jeweiligen Seite kollidiert. Bootstrap und die eigenen Stylesheets der
   Unterprojekte bleiben unberuehrt.

   Die Zeile steht im normalen Fluss (nicht sticky), damit sie auf keiner
   Seite Inhalt verdeckt.
   --------------------------------------------------------------------- */

/* Einzige Regel auf einem fremden Selektor, und eine bewusste:
   der Rollbalken bekommt seinen Platz immer reserviert, damit die
   Kopfzeile auf kurzen und langen Seiten gleich steht. */
html { scrollbar-gutter: stable; }

@font-face {
  font-family: 'Inter z1';
  src: url('/assets/fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

.z1k {
  --z1k-papier: #ffffff;
  --z1k-tinte:  #000000;
  --z1k-grau:   #000000;
  --z1k-linie:  rgba(0, 0, 0, 0.12);

  box-sizing: border-box;
  /* Fest am Fenster, nicht im Textfluss der Seite. Die Unterprojekte
     bringen ganz unterschiedliche Raender mit -- Bootstrap 0, der
     Browser-Standard 8 px, einige Skizzen 12 px Innenabstand. Im Fluss
     saesse die Zeile dadurch auf jeder Seite woanders. Fest am Fenster
     steht sie ueberall exakt auf 0/0, wie die Kopfzeile der Startseite. */
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2147483000;
  display: block;
  margin: 0;
  padding: 0;
  background: var(--z1k-papier);
  border-bottom: 1px solid var(--z1k-linie);
  font-family: 'Inter z1', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  line-height: 1.5;
  text-align: left;
}


.z1k * { box-sizing: border-box; }

/* Haelt im Fluss genau die Hoehe frei, die die feste Kopfzeile einnimmt. */
.z1k-platz { height: 4.75rem; margin-bottom: 1.5rem; }

.z1k__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.75rem;
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.6rem + 3vw, 4.5rem);
}

.z1k__marke {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--z1k-tinte);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}
.z1k__marke:hover, .z1k__marke:focus { color: var(--z1k-tinte); text-decoration: none; }
.z1k__marke em { font-style: normal; color: var(--z1k-grau); }

.z1k__logo { width: clamp(44px, 11vw, 56px); height: auto; flex: 0 0 auto; border: 0; }

.z1k__nav { display: flex; gap: clamp(0.9rem, 2.4vw, 1.9rem); }
.z1k__nav a {
  color: var(--z1k-grau);
  font-size: 0.8125rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: color 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.z1k__nav a:hover, .z1k__nav a:focus { color: var(--z1k-tinte); text-decoration: none; }