/* ═══════════════════════════════════════════════════════════════
   Der Kinderzeichnungs-Look.

   Drei Zutaten, bewusst nach Kosten gestaffelt:

   1. Die Krakeligkeit steckt in den Pfaddaten selbst — von Hand
      unregelmäßig gesetzte Stützpunkte, überschießende Enden,
      nicht ganz geschlossene Ecken. Kostet zur Laufzeit nichts.

   2. Die Füllflächen liegen als eigene, gröbere Pfade UNTER den
      Konturen und sind leicht versetzt. Es sieht aus, als sei mit
      dem Wachsmalstift danebengemalt worden.

   3. Die Wachskörnung ist EINE Schicht über der ganzen Seite,
      kein Filter pro Figur. Ein SVG-Filter auf jede animierte
      Figur zu legen wäre der sichere Weg, die Show auf einem
      Mittelklasse-Handy zum Ruckeln zu bringen. So zahlt die
      Textur einmal und gilt für alles.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Die Körnungsschicht ────────────────────────────────────── */

#koernung {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .38;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)' opacity='.45'/%3E%3C/svg%3E");
  /* Eigene Ebene erzwingen, damit die Schicht beim Animieren
     darunter nicht jedes Mal neu gerastert wird. */
  will-change: opacity;
}

/* ─── Die Kulisse ─────────────────────────────────────────────────
   Sonne, Wolken, Häuschen und Wiese liegen hinter ALLEN Akten und
   bleiben über die ganze Show stehen. Dadurch wirkt es wie ein
   einziges Blatt Papier, auf dem sich vorne die Geschichte
   abspielt — und nicht wie fünf getrennte Bildschirme.           */

#kulisse {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Bewusst NUR position. Sobald hier inset oder width stünde, wäre
   diese Regel mit ihrer ID-Spezifität stärker als jede .k-*-Regel
   in scenes.css — und alle Kulissenteile lägen bildschirmfüllend
   in der Ecke. Jedes Teil positioniert sich selbst. */
#kulisse svg { position: absolute; }

/* ─── Strichführung ──────────────────────────────────────────── */

.zeichnung {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.kontur {
  fill: none;
  stroke: var(--stift);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Kein reines Schwarz und nicht ganz deckend — ein Stift
     drückt nie überall gleich fest auf. */
  opacity: .93;
}

.kontur.duenn  { stroke-width: 3;   opacity: .85; }
.kontur.dick   { stroke-width: 7.5; }
.kontur.zart   { stroke-width: 2.2; opacity: .6;  }

.flaeche {
  stroke: none;
  opacity: .88;
}

/* Die Füllung darf ruhig ein Stück über die Kontur hinauslaufen. */
.flaeche.daneben {
  transform: translate(1.5px, -2px) rotate(.4deg);
  transform-origin: center;
}

/* Weiße Flächen, die die Kulisse dahinter verdecken sollen
   (Augäpfel, Sprechblasen) — die brauchen volle Deckkraft. */
.flaeche.deckt { opacity: 1; fill: #fffdf5; }

/* ─── Sprechblase ────────────────────────────────────────────── */

.sprechblase {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 5.5em;
  padding: .55em 1em .7em;
  font-family: var(--schrift-gross);
  font-size: clamp(1.1rem, 5vw, 1.7rem);
  color: var(--stift);
  background: #fffdf5;
  border: 3px solid var(--stift);
  border-radius: 62% 38% 55% 45% / 55% 45% 58% 42%;
  transform-origin: bottom left;
  z-index: 3;
}

/* Der Zipfel — ein gedrehtes Quadrat mit zwei sichtbaren Kanten,
   damit er zur krakeligen Blase passt und nicht zu sauber wirkt. */
.sprechblase::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 18%;
  width: 20px;
  height: 20px;
  background: #fffdf5;
  border-right: 3px solid var(--stift);
  border-bottom: 3px solid var(--stift);
  transform: rotate(52deg) skew(-8deg);
  border-radius: 0 0 6px 0;
}

/* ─── Comic-Wort („ZACK!") ───────────────────────────────────── */

.knallwort {
  position: absolute;
  font-family: var(--schrift-gross);
  font-size: clamp(3rem, 17vw, 7rem);
  color: var(--akzent);
  letter-spacing: .02em;
  /* Konturschrift ohne Extra-Element: vier versetzte Schatten.
     -webkit-text-stroke allein sieht auf Android zu dünn aus. */
  text-shadow:
     4px  4px 0 var(--stift), -4px  4px 0 var(--stift),
     4px -4px 0 var(--stift), -4px -4px 0 var(--stift),
     0    9px 0 rgba(59, 47, 39, .3);
  pointer-events: none;
  z-index: 6;
}

/* ─── Figuren-Behälter ───────────────────────────────────────────
   Jede Figur sitzt in einem Wrapper. Der Wrapper macht die
   Positionierung, die Figur darin macht die Bewegung — so kommen
   sich Auftritt und Dauerbewegung nie in die Quere.              */

.figur {
  position: relative;
  width: min(78vw, 46dvh);
  max-width: 380px;
}

/* ─── Wischspuren ────────────────────────────────────────────────
   Ein paar schnelle Striche, wie sie beim Ausmalen danebengehen.
   Rein dekorativ, liegen unter allem anderen.                    */

.wischer {
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  opacity: .2;
}