/* ==========================================================================
   Goldschwung - wiederverwendbare Komponente
   Herausgeloest aus sections/hero.css, damit Unterseiten denselben Bogen
   tragen koennen, ohne die ganze Hero-Datei zu laden. Reine Umlagerung, die
   Regeln stehen unveraendert; ergaenzt ist allein --schwung-grund, damit eine
   Sektion auf grauer Bahn die Flaechenfarbe umstellen kann. Ohne Angabe
   bleibt es --bg-page, also genau das bisherige Verhalten.
   Das Markup (zwei <path> im <svg>) steht dort, wo der Bogen benutzt wird.
   ========================================================================== */
/* Goldschwung unter dem Motiv, nachgemessen am Etikett - Form, Lage des
   tiefsten Punkts und Verjuengung stehen im Markup dokumentiert.
   Die Hoehe laeuft in vw und trifft dabei genau das Seitenverhaeltnis des
   viewBox (90/1440 = 6,25vw). Damit verzerrt preserveAspectRatio none
   nichts: der Bogen sieht auf jeder Breite gleich aus und das Band behaelt
   seine Staerke. Nur oberhalb von rund 1540px greift die Deckelung, dort
   staucht es leicht - lieber das als ein Bogen, der auf einem 2560er
   Schirm 260px hoch wird. */
.hero__edge,
.schwung {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%;
  height: min(6.25vw, 6rem);
  pointer-events: none;
}
.hero__edge svg,
.schwung svg {
  display: block;
  width: 100%; height: 100%;
}
/* Die Flaeche traegt die Farbe der Sektion darunter - die USP-Sektion
   steht auf --bg-page. Weicht das ab, reisst der Uebergang. */
.hero__edge .schwung-flaeche,
.schwung .schwung-flaeche { fill: var(--schwung-grund, var(--bg-page)); }
/* Der Schwung selbst. Reines TOEM-Gold: die Linie traegt keine
   Information, sie trennt zwei Flaechen. Fuer dekorative Grafik gilt die
   3:1-Regel nicht, hier darf das Gold also Gold sein.
   fill, nicht stroke - ein stroke ist ueberall gleich stark und koennte
   sich nicht verjuengen. */
.hero__edge .schwung-band,
.schwung .schwung-band { fill: var(--toem-gold); }