/* ============================================================
   Der Saum — der Fuß des Heros (14.09., ersetzt den Reißverschluss)
   Der helle Hero-Stoff endet als echter, umgeschlagener Saum und liegt
   auf dem dunklen Zuschneidetisch der Seite. Was einen Saum ausmacht:
   die Kante ist leicht wellig (Stoff liegt nie schnurgerade), der
   Umschlag fängt Licht (helle Kante), darüber liegt eine Doppel-
   Steppnaht, und der Stoff wirft einen weichen Schatten auf den
   Tisch. Kein Scroll-Hijacking mehr: die Seite scrollt normal, der
   Stoff hebt sich beim Scrollen minimal vom Tisch (saum.js).

   Die Wellenkante steht an ZWEI Stellen — als clip-path auf #stage
   (dort endet das Foto) und als Pfad im SVG .hero__saum (Kante,
   Naht, Schatten). Beide stammen aus derselben Kurve; wer die eine
   ändert, muss die andere mitziehen (Generator: saum_geo).
   ============================================================ */

.hero {
  /* Der Schatten des Saums fällt ÜBER die Hero-Kante hinaus auf die
     Seite — dafür darf der Hero nicht mehr abschneiden und muss über
     <main> liegen. */
  overflow: visible;
  z-index: 1;
  /* Der Fallback-Grund liegt jetzt auf #stage (wird mitgeschnitten);
     hier nichts mehr, sonst schiene er unter der Wellenkante hervor. */
  background: none;
  will-change: transform;
}
#stage {
  background-color: var(--seide-hell, #594534);
  clip-path: polygon(0 0, 100% 0, 100.00% calc(100% - 1.8px), 96.67% calc(100% - 0.9px), 93.33% calc(100% - 0.1px), 90.00% calc(100% - 0px), 86.67% calc(100% - 0.7px), 83.33% calc(100% - 2.1px), 80.00% calc(100% - 3.9px), 76.67% calc(100% - 5.6px), 73.33% calc(100% - 6.6px), 70.00% calc(100% - 6.9px), 66.67% calc(100% - 6.4px), 63.33% calc(100% - 5.7px), 60.00% calc(100% - 5.2px), 56.67% calc(100% - 5.3px), 53.33% calc(100% - 5.8px), 50.00% calc(100% - 6.7px), 46.67% calc(100% - 7.4px), 43.33% calc(100% - 7.5px), 40.00% calc(100% - 6.8px), 36.67% calc(100% - 5.3px), 33.33% calc(100% - 3.5px), 30.00% calc(100% - 1.8px), 26.67% calc(100% - 0.8px), 23.33% calc(100% - 0.7px), 20.00% calc(100% - 1.1px), 16.67% calc(100% - 1.9px), 13.33% calc(100% - 2.4px), 10.00% calc(100% - 2.3px), 6.67% calc(100% - 1.7px), 3.33% calc(100% - 0.9px), 0.00% calc(100% - 0.2px));
}
/* Die frühere Gewebe-Textur über dem Hero-Fuß ist überflüssig: das
   Foto bleibt bis zur Kante Foto. */
.hero::after { display: none; }

.hero__saum {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -100px;         /* viewBox-y 60 = Hero-Unterkante */
  height: 160px;
  width: 100%;
  z-index: 1;             /* über dem Foto, unter dem Textblock (2) */
  pointer-events: none;
  overflow: visible;
}
.hero__saum path { vector-effect: non-scaling-stroke; }
/* Schatten des Stoffs auf dem Tisch: ein enger, dunkler Kern und ein
   weiter, weicher Auslauf */
.saum__schatten-nah  { fill: url(#saum-schatten-nah); }
.saum__schatten-weit { fill: url(#saum-schatten-weit); }
/* Die Falte: wo der Stoff umschlägt, sackt das Licht kurz ab */
.saum__falte { fill: none; stroke: rgba(46, 32, 20, 0.22); stroke-width: 7; }
/* Die Umschlagkante fängt das Licht */
.saum__kante { fill: none; stroke: rgba(255, 250, 240, 0.72); stroke-width: 1.6; }
/* Doppel-Steppnaht: derselbe Faden wie die Stickerei */
.saum__naht {
  fill: none;
  stroke: rgba(74, 44, 24, 0.78);
  stroke-width: 1.7;
  stroke-dasharray: 6.5 4.2;
  stroke-linecap: round;
}
.saum__naht--2 { stroke-dashoffset: 5; stroke: rgba(74, 44, 24, 0.66); }
/* Nahtschatten: der Faden liegt auf, nicht im Stoff */
.saum__naht-schatten {
  fill: none;
  stroke: rgba(255, 252, 245, 0.55);
  stroke-width: 1.7;
  stroke-dasharray: 6.5 4.2;
  stroke-linecap: round;
}

@media (max-width: 859px) {
  .saum__naht--2 { display: none; }   /* auf dem Handy reicht eine Naht */
}
@media (prefers-reduced-motion: reduce) {
  .hero { will-change: auto; }
}