/* Hintergrundstrukturen je Bereich (Chris 25.10.2026, Look-Datei 05 LOOK chris-sound Hintergrundstrukturen).
   Event Lochblech animiert, Hochzeit Schallwellen, Ueber mich Schallplatte, der Rest Soundwave als Basis.
   Die Seite traegt die Klasse st-loch, st-wellen, st-platte oder st-basis am body, die Abschnitte das Attribut data-struktur.
   assets/strukturen.js legt die Flaeche selbst hinein und setzt die Maske, damit der Text nie auf vollem Muster steht.
   Nie in einen Abschnitt mit Foto. */
:root { --st-cu: #C66D39; --st-ink: #17191F; --st-a: .34; }
:root[data-theme="dark"] { --st-cu: #E19970; --st-ink: #EFE8DC; --st-a: .5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --st-cu: #E19970; --st-ink: #EFE8DC; --st-a: .5; } }

.st-sec { position: relative; overflow: hidden; overflow: clip; isolation: isolate; }
.st-sec > .wrap { position: relative; z-index: 1; }
.st-flaeche { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.st-flaeche canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Soundwave Basis: nur ein schmales Band am unteren Rand, der Abschnitt bekommt dafuer unten Luft */
.st-basis .st-flaeche { top: auto; height: 120px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }

/* Schallplatte: Rillen aus der Ecke unten rechts, ein Lichtreflex, das Etikett in Petrol */
.st-platte .st-rillen, .st-platte .st-glanz { position: absolute; inset: 0; }
.st-platte .st-rillen { opacity: var(--st-a);
  background: repeating-radial-gradient(circle at 100% 100%, transparent 0 6px, var(--st-cu) 6px 6.8px, transparent 6.8px 9px, var(--st-cu) 9px 9.5px, transparent 9.5px 14px);
  -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 0 30%, transparent 78%); mask-image: radial-gradient(circle at 100% 100%, #000 0 30%, transparent 78%); }
.st-platte .st-glanz { background: conic-gradient(from var(--st-w, 0deg) at 100% 100%, transparent 0 20deg, color-mix(in srgb, var(--st-ink) 16%, transparent) 30deg, transparent 42deg, transparent 200deg, color-mix(in srgb, var(--st-ink) 10%, transparent) 210deg, transparent 222deg);
  -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 0 30%, transparent 70%); mask-image: radial-gradient(circle at 100% 100%, #000 0 30%, transparent 70%); }
.st-platte .st-etikett { position: absolute; right: -60px; bottom: -60px; width: 150px; height: 150px; border-radius: 50%; background: var(--petrol); opacity: .85; }
@media (max-width: 767px) { .st-platte .st-etikett { right: -50px; bottom: -50px; width: 120px; height: 120px; } }