/*
 * Grundlage: Farbwerte, Schriftfamilien, Grundtypografie.
 * Die Werte stammen unveraendert aus dem abgenommenen Prototyp.
 * Abschnittsspezifische Gestaltung folgt in Aufgabe 4.
 */

:root {
  --papier: #f4f6f4;
  --karte: #fff;
  --tinte: #0c1412;
  --gedaempft: #5c6b66;
  --haar: #d5ded9;
  --gruen: #0b4f3f;
  --gruen-hell: #d9efe4;
  --signal: #f4511e;
  --sand: #f0e9dc;

  /*
   * Textfarben auf den Akzentflaechen. Die Akzentfarben selbst bleiben
   * unveraendert wie im Prototyp, nur die Schrift darauf wechselt, damit
   * WCAG 2.2 AA in beiden Modi eingehalten wird. Werte und gemessene
   * Verhaeltnisse stehen in docs/pruefung.md.
   */
  --auf-signal: #0c1412;
  --auf-gruen: #fff;
  --auf-gruen-leise: #cfe7dc;
  --auf-gruen-akzent: #9be7c8;
  --auf-gruen-hover: #ffc6ae;

  /* Signal als Schriftfarbe auf hellem Grund, dunkler als die Flaechenfassung. */
  --signal-text: #bc3e15;

  --serif: "Instrument Serif", georgia, "times new roman", serif;
  --sans: "Public Sans", system-ui, -apple-system, "segoe ui", roboto, sans-serif;

  --mass: 1180px;
  --rand: 32px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #0a100e;
    --karte: #111917;
    --tinte: #edf2ef;
    --gedaempft: #94a49e;
    --haar: #1f2b27;
    --gruen: #4fc79f;
    --gruen-hell: #12261f;
    --signal: #ff7a4d;
    --sand: #1a211c;

    /*
     * Im Dunkelmodus sind Gruen und Signal helle Farben. Als Flaeche tragen
     * sie deshalb dunkle statt weisser Schrift, sonst bleiben 2.1 zu 1.
     */
    --auf-signal: #0a100e;
    --auf-gruen: #0a100e;
    --auf-gruen-leise: #10312a;
    --auf-gruen-akzent: #0b4f3f;
    --auf-gruen-hover: #3d1805;

    --signal-text: #ff7a4d;
  }
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

/* Sichtbarer Fokus, Voraussetzung fuer WCAG 2.2 AA. */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/*
 * Wer reduzierte Bewegung eingestellt hat, bekommt keine.
 * Bewusst ohne Ausnahme, auch nicht fuer das weiche Scrollen.
 */
@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;
  }
}

/* Sprungmarke zum Inhalt, nur sichtbar wenn angesteuert. */

/*
 * Sprungmarke. Ausserhalb des Fokus optisch nicht vorhanden, aber im Baum
 * und in der Tabulatorreihenfolge. Ueber clip-path statt einer Verschiebung
 * um 9999 Pixel, das beeinflusst die Breite der Seite nicht.
 */
.sprungmarke {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--tinte);
  color: var(--papier);
  padding: 12px 18px;
  text-decoration: none;
}

.sprungmarke:focus {
  width: auto;
  height: auto;
  clip-path: none;
}

.mass {
  max-width: var(--mass);
  margin-inline: auto;
  padding-inline: var(--rand);
}

@media (width <= 700px) {
  .mass {
    --rand: 20px;
  }
}