/* ============================================================================
   KIDZ.ME — Papier und Wasserzeichen-Motive (seit 2026-10-09)

   1. PAPIER statt Sand. Der Grundton ist ein warmes, helles Papierweiß
      (--sand in tokens.css), darüber feines Korn und eine grobe
      Papierstruktur — beides als SVG-Rauschen, keine Bilddatei. Die flache
      Sandfläche wirkte billig; Papier setzt das Material des Hero fort
      (Aquarell auf Papier), ohne mit ihm zu konkurrieren.
   2. MOTIVE. Ein gemeinsamer Satz großer, blasser Federzeichnungen (Feder,
      Buch, Teddy, Bauklötze, Mond, Drachen, Fahrrad, Ball, Papierschiff,
      Schultüte, Torte, Rucksack), jede in einem leisen Pastellverlauf, läuft hinter dem Inhalt die Seite hinunter,
      abwechselnd links und rechts, über den Rand hinaus. motive.js verteilt
      sie; die Reihenfolge ist je Seite anders und immer dieselbe.

   Diese Datei wird NACH der seiteneigenen CSS geladen: sie setzt den
   Hintergrund des body neu.
   ============================================================================ */
:root {
  /* Hintergrund seit 2026-10-12 (Maurice): ein sehr helles Flieder-Weiß
     (--sand in tokens.css) mit einem kaum sichtbaren Muster aus kleinen
     Linienmotiven — Stern, Herz, Wolke, Mond, Feder, Bauklotz. Ersetzt das
     warme Papierkorn, das auf dem kühlen Grund schmutzig wirkte. Nur zu sehen,
     wenn man darauf achtet: Linien mit 5 % Deckkraft. */
  --muster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cpath d='M46.0 43.0 L48.2 48.9 L54.6 49.2 L49.6 53.2 L51.3 59.3 L46.0 55.8 L40.7 59.3 L42.4 53.2 L37.4 49.2 L43.8 48.9Z M206 50 c-6-5-11-9-11-14 a5 5 0 0 1 11-2 a5 5 0 0 1 11 2 c0 5-5 9-11 14z M104 160 c-7 0-7-10 0-10 c0-8 11-10 14-3 c3-6 13-4 12 3 c7 0 7 10 0 10z M276 158 a13 13 0 1 0 10 20 a10 10 0 1 1-10-20z M58 268 c8-14 16-26 30-34 c-4 12-12 24-24 30 M64 262 l-8 12 M214 262 l16-4 l4 16 l-16 4z M150.0 281.0 L151.3 284.2 L154.8 284.5 L152.1 286.7 L152.9 290.0 L150.0 288.2 L147.1 290.0 L147.9 286.7 L145.2 284.5 L148.7 284.2Z M300.0 87.5 L301.2 90.4 L304.3 90.6 L301.9 92.6 L302.6 95.6 L300.0 94.0 L297.4 95.6 L298.1 92.6 L295.7 90.6 L298.8 90.4Z' fill='none' stroke='%237560AF' stroke-opacity='.05' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg fill='%237560AF' fill-opacity='.045'%3E%3Ccircle cx='170' cy='96' r='1.6'/%3E%3Ccircle cx='26' cy='190' r='1.4'/%3E%3Ccircle cx='262' cy='228' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}
body {
  background-color: var(--sand);
  background-image: var(--muster);
  /* Eigener Stapelkontext: die Motivebene (z-index -1) liegt so über dem
     Papier, aber unter jedem Inhalt. */
  isolation: isolate;
}

.motiv-ebene {
  position: absolute; left: 0; top: 0; width: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.motiv {
  position: absolute;
  height: auto;
  opacity: .075;          /* blass genug für Text darüber, deutlich genug als Zeichnung */
  user-select: none;
  -webkit-user-drag: none;
}
/* Farbig (motive.js setzt die Klasse, sobald der Pastellverlauf steht):
   Pastell ist heller als die Tinte und braucht mehr Deckkraft, um gleich
   leise zu wirken. Ohne JavaScript-Farbe bleibt es bei Tinte und .075. */
.motiv.farbig { opacity: .28; }
/* Die kleinen Begleiter (img/motive/klein/) halb so stark: sie sollen
   streuen, nicht mit den großen konkurrieren. */
.motiv.klein { opacity: .05; }
.motiv.klein.farbig { opacity: .14; }
@media print { .motiv-ebene { display: none; } }

/* Startseite: der Inhalt unter dem ersten Bildschirm (.weiter) hat eine
   eigene, deckende Fläche — sie bekommt dasselbe Papier, sonst stünde dort
   ein glattes Rechteck im körnigen Papier. Die Kartenreihe des Hero (.cards)
   ist dagegen durchsichtig (Maurice, 2026-10-09): ihr Papieruntergrund
   verdeckte die Motive dahinter. */
.weiter { background-color: var(--sand); background-image: var(--muster); }
.cards { background: none; }