/* ==========================================================================
   base.css: Farben, Schriften, Grundgeruest
   Hier stehen alle Werte, die auf der ganzen Seite gelten.
   Wenn du eine Farbe aendern willst, aendere sie hier einmal, dann
   aendert sie sich ueberall.
   ========================================================================== */

:root {
  /* ---- Strawberry Matcha Palette ---- */
  --paper:          #f3e9d2;   /* Papier-Hintergrund der ganzen Seite */
  --paper-deep:     #e6d5b0;   /* dunklere Papierkante */
  --cream:          #fffaf0;   /* fast weiss, fuer Textboxen */

  --matcha:         #cbdda8;   /* das gruene grosse Panel */
  --matcha-soft:    #dceac0;   /* helleres Gruen */
  --matcha-deep:    #aec984;   /* Rahmen / Akzent auf Gruen */

  --strawberry:     #fc8586;   /* das kraeftige Rosa der Buttons */
  --strawberry-deep:#ee6b6d;   /* Hover-Zustand */
  --strawberry-soft:#ffd3d3;   /* zarte Fuellung */

  --ink:            #2b3045;   /* Textfarbe, dunkles Blau-Lila */
  --ink-soft:       #565d78;   /* Nebentext */
  --lilac:          #a492aa;   /* aus der Healthbar */

  /* ---- Schrift ----
     Wenn du deine Canva-Schrift "Sego" als Datei hast, leg sie unter
     assets/fonts/ ab und aktiviere den @font-face Block ganz unten.
     Dann brauchst du nur --font-display umzustellen. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-pixel:   "Press Start 2P", "Courier New", monospace;

  /* ---- Abstaende & Formen ---- */
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-pill: 999px;

  --shadow-s: 0 3px 0 rgba(43, 48, 69, 0.10);
  --shadow-m: 0 6px 0 rgba(43, 48, 69, 0.12), 0 12px 24px -12px rgba(43, 48, 69, 0.35);
  --shadow-l: 0 10px 0 rgba(43, 48, 69, 0.10), 0 24px 40px -20px rgba(43, 48, 69, 0.45);

  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --shell: 1180px;   /* maximale Breite des Inhalts */
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(100% 80% at 95% 100%, rgba(203, 221, 168, 0.35) 0%, rgba(203, 221, 168, 0) 60%),
    url("../assets/art/paper.png");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: cover, cover, 380px 380px;
  background-attachment: fixed, fixed, scroll;
  -webkit-font-smoothing: antialiased;
}

/* height:auto ist wichtig: sonst zieht der Browser Bilder in die Länge,
   sobald im HTML width und height stehen und CSS die Breite überschreibt. */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a { color: inherit; }

button { font: inherit; }

/* ---- Ueberschriften ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 40;
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }

p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Sonderfall: kleine Grossbuchstaben-Ueberschrift ueber einem Abschnitt */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.4em;
}

/* nur fuer Screenreader sichtbar */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Wer im Betriebssystem Animationen abgeschaltet hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Eigene Schrift einbinden (optional)
   1. Schriftdatei nach assets/fonts/sego.woff2 legen
   2. die naechsten 6 Zeilen entkommentieren
   3. oben bei --font-display "Sego" an den Anfang setzen
   ==========================================================================
@font-face {
  font-family: "Sego";
  src: url("../assets/fonts/sego.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
*/

/* ==========================================================================
   Kleine Hilfsklassen
   Damit stehen keine style="..." Angaben mehr direkt im HTML. Das ist
   nicht nur sauberer, es ist auch noetig fuer die strengen
   Sicherheitsregeln in der Datei _headers.
   ========================================================================== */
.u-flush      { margin: 0; }
.u-tight      { margin: 0 0 0.3rem; }
.u-gap-after  { margin-bottom: 1.4rem; }
.u-gap-before { margin-top: 1rem; }
.u-lead-in    { font-weight: 700; margin-bottom: 0.4rem; }
.u-small      { font-size: 0.95rem; }
.u-note       { font-size: 0.93rem; color: var(--ink-soft); }
.u-note-after { margin-top: 1rem; font-size: 0.93rem; color: var(--ink-soft); }

/* ==========================================================================
   Matcha World fuer die grossen Ueberschriften (h1 und h2).
   Alles andere bleibt bei Fraunces und Nunito.
   ========================================================================== */
:root {
  --font-head: "Matcha World", "Nunito", system-ui, sans-serif;
}

h1, h2 {
  font-family: var(--font-head);
  font-variation-settings: normal;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.05;
}

h1 { font-size: clamp(2.2rem, 5.4vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }

/* ---- Dock-Ueberschriften ----
   main.js packt jeden Buchstaben von h1 und h2 in ein eigenes <span>.
   Faehrt die Maus ueber die Ueberschrift, heben sich die Buchstaben in
   der Naehe der Maus an und werden etwas groesser, wie die Apps im
   Mac-Dock. Je naeher an der Maus, desto mehr. --lift geht von 0 bis 1,
   --shift schiebt die Nachbarn zur Seite, damit sich nichts ueberlappt. */
.wobble__word { display: inline-block; white-space: nowrap; }

.wobble__char {
  --lift: 0;
  --shift: 0px;
  display: inline-block;
  transform-origin: 50% 100%;
  transform:
    translate(var(--shift), calc(var(--lift) * -0.18em))
    scale(calc(1 + var(--lift) * 0.28));
  transition: transform 0.18s ease-out;
}