/* Schriften werden mitgeliefert, nicht von Google geladen. Design-System 11.4 verbietet
   google_fonts fuer die App, weil das "bei jedem Start die IP eines Kindes an Google"
   schickte. Im Browser eines Besuchers gilt dasselbe unmittelbar. */
@font-face { font-family: "Bricolage"; src: url("/schriften/BricolageGrotesque.ttf") format("truetype-variations"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Figtree";   src: url("/schriften/Figtree.ttf")             format("truetype-variations"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "GeistMono"; src: url("/schriften/GeistMono.ttf")           format("truetype-variations"); font-weight: 100 900; font-display: swap; }

/* Farben woertlich aus packages/design-tokens/tokens/tokens.json, modes.light.
   "Tinte und Papier" heisst Tinte AUF Papier: canvas ist #F5F3EE, nicht das Nahschwarz. */
:root {
  --canvas: #F5F3EE;
  --surface: #FFFFFF;
  --surface-raised: #EEEBE3;
  --text: #141A2B;
  --text-muted: #5C6478;
  --border: #DCD8CD;
  --primary: #2C4BFF;

  --radius-small: 8px;
  --radius-card: 22px;
  --mass: 66ch;
}

/* modes.dark aus derselben Datei. */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #141A2B;
    --surface: #1D2438;
    --surface-raised: #262F47;
    --text: #F2F1EC;
    --text-muted: #98A0B5;
    --border: #2E3752;
    --primary: #6884FF;
  }
}

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;          /* type.scale.body, Tor haelt ihn bei mindestens 16 */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.kopf { max-width: var(--mass); margin: 0 auto; padding: 2rem 1.5rem 0; }
.marke {
  font-family: "Bricolage", Georgia, serif;
  font-weight: 800; font-size: 1.375rem; letter-spacing: -0.02em;
  color: var(--text); text-decoration: none;
}

main { max-width: var(--mass); margin: 0 auto; padding: 0 1.5rem 4rem; }

h1, h2 { font-family: "Bricolage", Georgia, serif; }
h1 {                                    /* type.scale.display */
  font-size: clamp(2.25rem, 7vw, 2.5rem); line-height: 1.05;
  font-weight: 800; letter-spacing: -0.8px;
  margin: 3rem 0 1rem;
}
h2 {                                    /* type.scale.headline */
  font-size: clamp(1.5rem, 4.5vw, 1.875rem); line-height: 1.15;
  font-weight: 700; letter-spacing: -0.4px;
  margin: 3rem 0 0.5rem;
}

.vorspann { font-size: 1.1875rem; max-width: 54ch; }

/* Die beiden Saetze aus dem Deck, in denen Eltern und Kind selbst sprechen. Kein
   Zierrat: sie tragen den Abschnitt, deshalb duerfen sie sich vom Fliesstext abheben. */
.stimme {
  font-family: "Bricolage", Georgia, serif;
  font-size: 1.25rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.2px;
  margin: 1.75rem 0 0.5rem;
}
/* Fliesstext bleibt volle Tinte. Gedaempft ist fuer Beiwerk -- Bildunterschriften und
   Fussleiste --, nicht fuer den Inhalt: "Typografie traegt alles" (Design-System 11.3)
   heisst nicht, den Haupttext zurueckzunehmen. */
p { color: var(--text); max-width: 62ch; }

a { color: var(--primary); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 2px; }

/* Keine Schatten. Tiefe entsteht durch Flaechenschichtung (Design-System 11.5). */
.bilderreihe {
  display: grid; gap: 1.5rem; margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.bilderreihe figure { margin: 0; }
.bilderreihe img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface);
}
.bilderreihe figcaption {
  margin-top: 0.625rem; font-size: 0.9375rem; line-height: 1.45;
  color: var(--text-muted);
}

.stand {
  background: var(--surface-raised); border-radius: var(--radius-card);
  padding: 1.5rem; margin-top: 3.5rem;
}
.stand h2 { margin-top: 0; }

/* Rechtsseiten */
.text h1 { margin-top: 2rem; }
.text h2 { font-size: 1.375rem; }
.text table {
  width: 100%; border-collapse: collapse; font-size: 0.9375rem;
  display: block; overflow-x: auto;
}
.text th, .text td {
  border-bottom: 1px solid var(--border); padding: 0.5rem 0.75rem;
  text-align: left; vertical-align: top;
}
.text code {
  font-family: "GeistMono", ui-monospace, monospace; font-size: 0.9em;
  background: var(--surface-raised); border-radius: var(--radius-small);
  padding: 0.1em 0.35em;
}
.text blockquote {
  border-left: 3px solid var(--primary); margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1rem; color: var(--text-muted);
}


.hinweis {
  background: var(--surface-raised); border-radius: var(--radius-card);
  padding: 1.25rem; color: var(--text); max-width: none;
}

.fuss {
  max-width: var(--mass); margin: 0 auto;
  padding: 1.5rem 1.5rem 4rem; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.9375rem;
}
.fuss a { color: var(--text-muted); }
.fuss a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}