/*
 * Linkseite — dieselbe Kartenblatt-Palette wie Blog, Karte und Statistik.
 * Der Kunde soll nicht merken, dass er zwischen vier Anwendungen wechselt.
 *
 * Bewusst KURZ. Die Statistik bringt 570 Zeilen mit, weil sie Diagramme,
 * Raster und Formulare hat. Hier stehen eine Überschrift, ein Absatz und
 * eine Liste von Kästen — alles Weitere liegt in den beiden Vorlagen.
 *
 * Die Farbwerte unten sind nur die VORGABE. Hat der Kunde eine
 * Hintergrundfarbe gesetzt, überschreibt ein <style>-Block im Kopf die
 * Token; farben.py rechnet Schrift, Linien und Flächen so aus, dass der
 * Kontrast stimmt (siehe services/gemeinsam/farben.py).
 *
 * Schrift selbst gehostet, kein Google-CDN: Diese Seite ist ÖFFENTLICH und
 * wird von den Lesern unserer Kunden aufgerufen. Ein Font-CDN überträgt
 * deren IP an Dritte — genau das sichern wir im AVV § 5 zu, nicht zu tun.
 */

@font-face {
  font-family: "Karla";
  src: url("/static/fonts/karla-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --paper: #f2f4ef;
  --paper-2: #e9ece4;
  --sheet: #fbfcfa;

  --ink: #12180f;
  --dim: #56604f;
  --faint: #7d867a;

  --rule: #ccd3c4;
  --rule-hi: #aab39f;

  --route: #bf3719;
  --route-hi: #a52d12;

  --water: #1b5570;
  --water-hi: #133e52;

  --ok: #2f6b3d;
  --danger: #a52d12;

  /* Weitere Kartenfarben, nur für Diagramme: Wald und Sand ergänzen Route
     und Wasser zu vier unterscheidbaren Segmentfarben. Bewusst gedeckt —
     eine Statistikseite mit fünf Neontönen sieht aus wie ein Baukasten,
     nicht wie eine Karte. */
  --wald: #46683c;
  --sand: #a8803f;

  --font: "Karla", ui-sans-serif, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono",
          Menlo, monospace;

  --maxw: 1000px;
  --pad: clamp(1rem, 4vw, 2.25rem);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--water); }
a:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; }

code {
  font-family: var(--mono);
  font-size: .9em;
  background: var(--paper-2);
  padding: .1em .35em;
}

h1, h2 { text-wrap: balance; }

.huelle { min-height: 60vh; }

.meldung {
  max-width: 34rem;
  margin: 1rem auto 0;
  padding: .6rem .8rem;
  border: 1px solid var(--rule-hi);
  border-left: 3px solid var(--ok);
  background: var(--sheet);
}
.meldung.schlecht { border-left-color: var(--danger); }

.fuss {
  text-align: center;
  padding: 2rem 1rem 3rem;
  color: var(--faint);
  font-size: .85rem;
}