/* ============================================================
   Hero-Auftakt: Schnipsel, Stempel, Naht, Marker (js/hero-intro.js)
   ============================================================ */
.intro-papier {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}
.intro-stueck {
  --hub: 0;
  position: absolute;
  filter: drop-shadow(0 calc(3px + var(--hub) * 26px) calc(4px + var(--hub) * 30px) rgba(61, 50, 41, calc(0.35 - var(--hub) * 0.12)));
}
.intro-kante { position: absolute; inset: 0; filter: url(#intro-riss); }
.intro-flaeche { position: absolute; inset: 0; }
.intro-korn { position: absolute; inset: 0; filter: url(#intro-koernung); mix-blend-mode: multiply; }

/* Stempelabdruck: liegt auf jedem Schnipsel, am selben Ort, im Schnipsel-Umriss */
.intro-druck {
  position: absolute;
  inset: 0;
  visibility: hidden;
  mix-blend-mode: multiply;
}
.intro-druck svg {
  position: absolute;
  max-width: none;
  opacity: 0.92;
  filter: url(#intro-tinte);
}

/* Stempel in Draufsicht: Holzklotz mit rotem Griff */
.intro-stempel {
  --schatten: 0;
  position: absolute;
  z-index: 50;
  border-radius: 26px;
  border: 5px solid var(--tinte);
  background:
    repeating-linear-gradient(100deg, rgba(120, 80, 40, 0.10) 0 3px, transparent 3px 19px),
    linear-gradient(150deg, #dcbb8a 0%, #c9a06b 55%, #b98a5a 100%);
  box-shadow: inset 0 0 0 9px rgba(255, 253, 248, 0.22), inset 0 -10px 0 rgba(61, 50, 41, 0.12);
  filter: drop-shadow(0 calc(8px + var(--schatten) * 46px) calc(10px + var(--schatten) * 40px) rgba(61, 50, 41, calc(0.42 - var(--schatten) * 0.14)));
  display: grid;
  place-items: center;
}
.intro-stempel-griff {
  border-radius: 50%;
  border: 5px solid var(--tinte);
  background: radial-gradient(circle at 34% 30%, #ffb1a7 0%, #f26d5f 42%, #c43d33 100%);
  box-shadow: 0 8px 0 rgba(61, 50, 41, 0.25), inset 0 -6px 0 rgba(61, 50, 41, 0.18);
}

/* Naht unter „Basteln." */
.intro-naht-wort { position: relative; display: inline-block; }
.intro-naht {
  position: absolute;
  left: 0;
  bottom: -0.12em;
  width: 100%;
  height: 34px;
  overflow: visible;
  pointer-events: none;
}
.intro-faden { fill: none; stroke: var(--koralle); stroke-width: 4; stroke-linecap: round; }
.intro-nadel { opacity: 0; }

/* Marker unter „Fördern." */
.hero.intro-laeuft:not(.intro-marker) h1 .markiert::after { transform: rotate(-1.5deg) scaleX(0); transform-origin: left center; }
.hero.intro-marker h1 .markiert::after {
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.3, 1.3, 0.5, 1);
}

/* Marker in eigene Ebene holen, sonst liegt der Schleier über dem Basteltisch darüber */
.hero h1 { position: relative; z-index: 0; }