/* Grundstil aller Seiten: Farben, Schrift, Kopfzeile, Fuss, Fokusring.
 *
 * Was hier drin ist, gilt ueberall. Seitenspezifisches gehoert in eine eigene
 * Datei daneben (stil/schritt.css und so weiter).
 *
 * Keine Fremdinhalte: keine Webfonts, kein @import, keine Adresse nach
 * draussen. Die Schrift kommt aus dem System.
 *
 * Farben aus dem Logo der TH Koeln, Studiengang Code & Context. Kein Blau und
 * kein Gruen, damit sich keine Bedienfarbe mit einer Kabelfarbe auf den Fotos
 * verwechseln laesst.
 */

/* Alle Kontrastzahlen sind auf Weiss (#ffffff) gemessen, nach WCAG 2.1:
 * relative Leuchtdichte mit dem Schwellwert 0,03928 und dem Gamma 2,4,
 * Verhaeltnis (L_hell + 0,05) / (L_dunkel + 0,05).
 *
 * Nachgerechnet, nicht abgeschrieben. Das Verfahren trifft die drei Werte des
 * Plans auf die zweite Nachkommastelle (5,70 / 3,50 / 5,73); die Zahl fuer
 * --tinte stand dort mit 16,9:1 falsch. */
:root {
  --rot: #CA1C11;      /* Aktion, Weiter-Taste, Fokusring        5,70:1 */
  --orange: #EA5B0F;   /* Erledigtes, Aufklapper                 3,50:1 */
  --magenta: #B92585;  /* Pruefpunkte, Lernstoff                 5,73:1 */
  --tinte: #1A1614;    /* Text, aktuelles Feld der Leiste       17,97:1 */

  --papier: #ffffff;
  --grau: #6b625d;     /* Nebentext, z. B. die Pin-Angabe        5,95:1 */
  --linie: #ddd6d2;

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --breite: 46rem;
}

/* Orange traegt auf Weiss nur 3,50:1. Es ist damit ab 24 px oder ab 19 px
 * fett erlaubt und sonst nicht. Fuer Fliesstext gibt es die abgedunkelte
 * Fassung. */
:root {
  --orange-text: #A33F09;  /* 6,42:1 — Orange fuer kleine Schrift */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* --- Fokus ---------------------------------------------------------------
 *
 * Ein sichtbarer Ring ist Abnahmekriterium: Durchgang 2 der Abnahme geht die
 * ganze Anleitung nur mit der Tastatur durch. `outline: none` ist deshalb
 * nirgends erlaubt — auch nicht "nur kurz zum Ausprobieren".
 */
:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Der eine Fall, in dem der Ring wegbleibt — und warum das die Regel darueber
 * nicht aufweicht.
 *
 * Der Auftraggeber am 8. September 2026 ueber die Lupe: "macht jetzt ne
 * haessliche rote Box um das Bild […] und bleibt da". Was er sieht, ist
 * dieser Ring an einem Element, das ihn mit der Maus bekommen hat. Wer
 * klickt, weiss, wo er geklickt hat; die Auskunft ist fuer ihn keine.
 *
 * Der ausdrueckliche Weg dafuer ist `HTMLElement.focus({ focusVisible })`,
 * und `js/lupe.js` geht ihn (siehe `setzeFokus` dort). Diese Klasse ist nur
 * der Rueckfall fuer Browser, die die Fahne ueberlesen. Sie wird
 * ausschliesslich aus einem Skript gesetzt, ausschliesslich an ein Element,
 * das den Fokus gerade durch Maus oder Finger bekommen hat, und sie geht beim
 * naechsten Tastendruck oder beim naechsten Fokuswechsel wieder ab. Kein
 * Element traegt sie im ausgelieferten HTML, und ohne JavaScript gibt es sie
 * nicht.
 *
 * Deshalb steht hier `outline-color` und nicht `outline: none`: Wer die Regel
 * aus Versehen an einem Element stehen laesst, nimmt ihm die Farbe, nicht den
 * Platz — der Ring bleibt gerechnet, und die Zeile faellt beim Nachmessen
 * auf, statt spurlos zu wirken. */
.fokus-ohne-ring:focus-visible {
  outline-color: transparent;
}

/* --- Fliesstext ---------------------------------------------------------- */

h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: 1.75rem;
}

h2 {
  font-size: 1.3rem;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--rot);
}

a:hover {
  text-decoration-thickness: 2px;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

/* --- Aufbau --------------------------------------------------------------- */

.seite {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 1rem;
}

main {
  padding-bottom: 3rem;
}

/* --- Kopfzeile ------------------------------------------------------------ */

.kopf {
  border-bottom: 1px solid var(--linie);
}

.kopf > .seite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tinte);
  font-weight: 700;
  text-decoration: none;
}

.marke .winkel {
  width: 2rem;
  height: 1.5rem;
  flex: none;
}

.segmente {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.segmente a {
  display: inline-block;
  padding: 0.25rem 0;
  color: var(--tinte);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.segmente a:hover {
  border-bottom-color: var(--linie);
}

.segmente a[aria-current="page"] {
  color: var(--rot);
  font-weight: 700;
  border-bottom-color: var(--rot);
}

/* --- Fuss ----------------------------------------------------------------- */

.fuss {
  border-top: 1px solid var(--linie);
  padding-top: 1rem;
  padding-bottom: 2rem;
  color: var(--grau);
  font-size: 0.9375rem;
}

.fuss a {
  color: var(--grau);
}

/* --- Nur fuer Vorlesegeraete ---------------------------------------------- */

.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Der Sprung in den Inhalt ist der erste Halt der Tastaturbedienung. Er darf
 * sich nicht verstecken, sobald er den Fokus hat. */
.sprungmarke:focus {
  position: static;
  width: auto;
  height: auto;
  clip-path: none;
  display: inline-block;
  margin: 0.5rem 1rem;
}

/* --- Bewegung ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}