/*
 * Handbuch-Anpassungen.
 *
 * Ziel: der Kopf des Handbuchs sieht aus wie der Kopf der Anwendung. Wer aus
 * der App ins Handbuch wechselt, soll nicht das Gefuehl haben, die Seite
 * gewechselt zu haben.
 *
 * Die Werte stammen aus `projects/shared-lib/src/lib/styles/variables/_themes.scss`
 * (`--bs-headline-background-start` / `-stop`) und dem Verlauf in
 * `shared/header/header.component.scss`. Sie sind hier fest eingetragen statt
 * per Variable: MkDocs kennt die Bootstrap-Variablen der Anwendung nicht.
 * Aendert sich die Kopffarbe der App, gehoert sie hier nachgezogen.
 */

/* Hell — wie die Anwendung im Standard-Theme. */
.md-header,
.md-tabs {
  background-color: #29434e;
  background-image: linear-gradient(45deg, #29434e 0%, #819ca9 100%);
}

/* Der Tab-Streifen sitzt unter dem Kopf. Ohne eigenen Verlauf entstuende dort
   eine harte Kante; mit demselben Verlauf laufen beide als eine Flaeche durch. */
.md-tabs {
  background-image: linear-gradient(45deg, #3d5a66 0%, #93aab5 100%);
}

/* Dunkel — die Anwendung schaltet dort auf einen fast schwarzen Verlauf. */
[data-md-color-scheme='slate'] .md-header {
  background-color: #121212;
  background-image: linear-gradient(45deg, #121212 0%, #383838 100%);
}

[data-md-color-scheme='slate'] .md-tabs {
  background-image: linear-gradient(45deg, #1c1c1c 0%, #444444 100%);
}

/* Die Suchleiste im Kopf hat sonst einen milchigen Kasten, der den Verlauf
   zerschneidet. */
.md-search__form {
  background-color: rgba(255, 255, 255, 0.15);
}

.md-search__form:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

/* Versionsangabe im Kopf, rechts neben dem Theme-Umschalter.
   Bewusst unauffaellig: sie ist Beleg, nicht Botschaft. Auf schmalen Fenstern
   verschwindet sie, dort ist der Platz fuer Suche und Navigation da. */
.handbuch-version {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.65rem;
  line-height: 1.1;
  margin-left: 0.4rem;
  white-space: nowrap;
  align-self: center;
}

@media screen and (max-width: 76.234375em) {
  .handbuch-version {
    display: none;
  }
}

/* Reaktion des Kampfrichter-Tablets als Nebenbild.
   Bewusst klein: es ist Beleg neben dem Hauptbild, nicht der Bildinhalt. Wer
   Einzelheiten braucht, klickt es gross — die Lupe haengt an jedem Bild.

   Der Selektor muss `.md-typeset img` schlagen (Spezifitaet 0,1,1), sonst
   gewinnt dessen `max-width: 100%` und die Begrenzung bleibt wirkungslos. */
.md-typeset img.tablet-reaktion {
  max-width: 22rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.2rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

[data-md-color-scheme='slate'] .md-typeset img.tablet-reaktion {
  border-color: rgba(255, 255, 255, 0.25);
}