/* Die eine Kopfzeile der Nebenseiten (Paket 127), seit Paket 358 im
   Aussehen der Homepage.

   ZWEI BLAETTER, IN DIESER FOLGE GELADEN:
   - kopfzeile_homepage.css: das Aussehen der Kopf- und der Fusszeile von
     kriegercad.com, Regel fuer Regel aus dem Repo der Homepage (00_KCW),
     geschrieben von werkzeuge/kopfzeile_holen.py. Nie von Hand aendern.
   - dieses Blatt: was das CAD dazulegt. Die Schrift der zwei Leisten (auf
     der Homepage erben sie sie vom Rumpf, hier traegt jede Seite ihre
     eigene), die Groesse des Wortzeichens (die Homepage setzt sie an ihrem
     eigenen Schriftzug, den es hier nicht gibt), Mein Konto und das
     aufklappbare Menue der schmalen Leiste (die Homepage hat keins; ohne es
     waere Hilfe dort nicht erreichbar).

   BEIDE LIEGEN ZWEIMAL im Repo, Byte fuer Byte gleich: unter web/ und unter
   web/start/. Grund und Wache sind dieselben wie beim Favicon (Vertrag 2e):
   die Startseite kommt an web/ nicht heran, und tests/test_nebenseiten.py
   vergleicht die Kopien. */

.seitenkopf,
.fuss {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: normal;
  word-break: normal;
  text-align: left;
  user-select: auto;
}

/* NICHT klebend, anders als auf der Homepage: auf der Hilfeseite klebt
   schon die Leiste mit dem Suchfeld an derselben Stelle, und zwei
   klebende Leisten laegen uebereinander (Paket 127). Die Kopfzeile scrollt
   darum mit. Leer (bis das Modul sie fuellt) haelt sie ihre Hoehe. */
.seitenkopf {
  position: relative !important;
}

.seitenkopf:empty {
  min-height: 49px;
}

/* Das Wortzeichen kriegerCAD (Paket 245) in der Mitte: Groesse und
   Textfarbe der Stelle wie der Schriftzug der Homepage (dort 16, schmal 15
   Pixel); Schrift, Gewichte und das Blau stehen allein in
   schrift/schrift.css. */
.seitenkopf-marke {
  font-size: 16px;
  color: var(--kopf-schrift);
}

.seitenkopf [hidden] {
  display: none !important;
}

/* Paket 388: ein verborgener Punkt im Fuss ("Verträge hier kündigen" bis
   zur Kasse) bleibt verborgen, gleich was ein Blatt den Zeilen gibt. */
.fuss [hidden] {
  display: none !important;
}

/* Mein Konto steht zweimal da: rechts und im Menue der schmalen Leiste.
   Je Breite ist genau einer zu sehen (unten). */
.seitenkopf-nur-menue {
  display: none;
}

/* Der Knopf fuer schmale Bildschirme. Ein Haken traegt den Zustand,
   kein Skript: so klappt das Menue auch auf den Seiten mit fester Kopie
   auf. Der Haken bleibt bedienbar (er ist nicht display:none), er steht
   nur ausserhalb des Bildes. */
.seitenkopf-schalter {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.seitenkopf-knopf {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--linie-subtil, rgba(255, 255, 255, .12));
  border-radius: 6px;
  color: var(--kopf-schrift);
  cursor: pointer;
}

.seitenkopf-knopf:hover {
  color: var(--akzent, #4da3ff);
}

/* Die drei Striche: einer steht da, zwei kommen als Schatten dazu. */
.seitenkopf-balken,
.seitenkopf-balken::before,
.seitenkopf-balken::after {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 2px;
  background: currentColor;
  content: "";
}

.seitenkopf-balken { top: 18px; }
.seitenkopf-balken::before { top: -5px; left: 0; }
.seitenkopf-balken::after { top: 5px; left: 0; }

.seitenkopf-schalter:focus-visible ~ .seitenkopf-rechts .seitenkopf-knopf {
  outline: 2px solid var(--kopf-akzent);
  outline-offset: 2px;
}

/* Schmal wie die Homepage (dort ab 860 Pixeln): die Punkte links fallen
   aus der Zeile. Hier klappt der Knopf sie als Liste unter der Zeile auf,
   mit Tippzielen von gut 40 Pixeln. */
@media (max-width: 860px) {
  .seitenkopf-knopf { display: block; }
  .seitenkopf-schalter:checked ~ .seitenkopf-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    gap: 0;
    padding: 6px 0 4px;
    border-top: 1px solid var(--linie-subtil, rgba(255, 255, 255, .07));
  }
  .seitenkopf-links .seitenkopf-punkt {
    padding: 11px 8px;
    font-size: 15px;
  }
}

/* Ganz schmal: Mein Konto wandert ins Menue. */
@media (max-width: 640px) {
  .seitenkopf-marke { font-size: 15px; }
  .seitenkopf-rechts .seitenkopf-punkt-meinkonto { display: none; }
  .seitenkopf-links .seitenkopf-nur-menue { display: block; }
}