/* =========================================================================
   base.css — Design-Tokens, Reset und Element-Grundstile
   Colors and typography come from layout frames 56–59.
   Four color worlds, separated by the ribbed wave of the Maupe body.
   ========================================================================= */

/* ---------- Color worlds ------------------------------------------------- */
/*  --bg      Fill color of the world
    --accent  Signal color for graphics (logo, notes, lines) — never for text
    --ink     Headings, links, highlights (contrast ≥ 4.5:1 on --bg)
    --deep    Body copy (contrast ≥ 7.5:1 on --bg)                          */

.world--cream  { --bg:#FFECF0; --accent:#FDA2BC; --ink:#B23A61; --deep:#65404B; }
.world--sky    { --bg:#E0F4FF; --accent:#67C5F9; --ink:#1C6FA3; --deep:#294E63; }
.world--meadow { --bg:#F6FFEC; --accent:#B3D25B; --ink:#5C7F1D; --deep:#475424; }
.world--rose   { --bg:#FFF3D9; --accent:#FAB826; --ink:#9A6407; --deep:#64490F; }

:root {
  --yellow:#FAB826;  --yellow-ink:#9A6407;
  --blue:#67C5F9;    --blue-ink:#1C6FA3;
  /* --green-ink beschriftet die Explosionszeichnung auf der Rosé-Welt.
     Auf #FFF3D9 kam der Meadow-Ton #5C7F1D nur auf 4.23:1 — zu wenig. */
  --green:#B3D25B;   --green-ink:#547419;
  --pink:#FDA2BC;    --pink-ink:#B23A61;
  --purple:#B58BE8;  --purple-ink:#6B3FA0;
  --red:#F4705B;     --red-ink:#B8351D;
  --foliage:#009055;
  --cloud:#FFF7E8;

  --track-width: 1180px;
  --space-y: clamp(3rem, 7vw, 6rem);      /* vertical gap between worlds  */
  --space-x: clamp(1.25rem, 5vw, 3rem);   /* side margin                 */
  --wave-height: clamp(40px, 5vw, 80px);

  --heading-weight: 500;
}

/* ---------- Fonts ---------------------------------------------------------- */
/* Self-hosted statt Google Fonts CDN: sonst würde bei jedem Seitenaufruf die
   IP-Adresse an Google übertragen, ohne Einwilligung (siehe LG München I,
   Urt. v. 20.01.2022, Az. 3 O 17493/20). */

@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-variable.woff2") format("woff2-variations"),
       url("../fonts/fredoka-variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Base ---------------------------------------------------------- */

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

/* Muss die klebende Kopfleiste überragen, sonst rutscht das Sprungziel
   dahinter. Die Leiste misst 69px (breit) bzw. 55px (schmal, mit
   Hamburger) — der Rest ist Luft über der Überschrift. */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

@media (max-width: 48rem) {
  html { scroll-padding-top: 4rem; }
}

body {
  margin: 0;
  font-family: "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
  line-height: 1.65;
  color: var(--deep);
  background: #FFECF0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2 { font-weight: var(--heading-weight); line-height: 1; margin: 0; }

p { margin: 0 0 1.15em; max-width: 46ch; }
p:last-child { margin-bottom: 0; }

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

figure { margin: 0; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 0; top: 0; z-index: 200;
  padding: .75rem 1.25rem;
  background: #FFECF0; color: #65404B;
  font-weight: 500; text-decoration: none;
  transform: translateY(-120%);
}
.skip-link:focus { transform: translateY(0); }