/**
 * Hoehenlinien-Feld
 *
 * Das Signature-Element. Topografische Isolinien, zur Build-Zeit prozedural
 * erzeugt (Simplex-Noise plus Marching Squares), hier nur noch ausgegeben.
 *
 * Der Kniff steckt im Markup: jede Polylinie traegt pathLength="100".
 * Dadurch ist die Laenge aller elf Linien normalisiert und EINE Keyframe
 * genuegt. Kein getTotalLength(), kein JavaScript fuer die Einzeichnung.
 *
 * Rationierung: hoechstens vier Felder pro Seite. Das Element traegt nur,
 * solange es selten ist.
 */

/**
 * Der Widget-Wrapper muss die Sektion ausfuellen.
 *
 * Elementor setzt .elementor-widget auf position:relative. Damit waere das
 * absolut positionierte Feld darin auf die Box des Widgets eingesperrt, und
 * die ist zusammengefallen: das Feld hat keine eigene Hoehe. Sichtbar ist
 * dann gar nichts, ohne Fehlermeldung. Deshalb wird der Wrapper selbst zur
 * Flaeche, die er ueberdecken soll.
 *
 * Die Sektion darueber braucht position:relative und overflow:hidden.
 * Beides liefert .sl-sektion beziehungsweise .sl-medienrahmen.
 */
.elementor-widget-sl-hoehenlinien {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	pointer-events: none;
}

.contour-feld {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.contour-svg,
.contour-canvas-huelle {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.contour-canvas-huelle canvas {
	display: block;
}

/* ------------------------------------------------------------------ *
 * Einzeichnung
 *
 * animation-fill-mode: both ist PFLICHT. Ohne backwards blitzen waehrend
 * der Verzoegerung alle Linien fertig gezeichnet auf.
 * ------------------------------------------------------------------ */

.contour-linien polyline {
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	opacity: 0.4;
	animation: contour-zeichnen 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes contour-zeichnen {
	to {
		stroke-dashoffset: 0;
	}
}

.contour-linien polyline:nth-child(1)  { animation-delay: 0ms; }
.contour-linien polyline:nth-child(2)  { animation-delay: 40ms; }
.contour-linien polyline:nth-child(3)  { animation-delay: 80ms; }
.contour-linien polyline:nth-child(4)  { animation-delay: 120ms; }
.contour-linien polyline:nth-child(5)  { animation-delay: 160ms; }
.contour-linien polyline:nth-child(6)  { animation-delay: 200ms; }
.contour-linien polyline:nth-child(7)  { animation-delay: 240ms; }
.contour-linien polyline:nth-child(8)  { animation-delay: 280ms; }
.contour-linien polyline:nth-child(9)  { animation-delay: 320ms; }
.contour-linien polyline:nth-child(10) { animation-delay: 360ms; }
.contour-linien polyline:nth-child(11) { animation-delay: 400ms; }

/* ------------------------------------------------------------------ *
 * Knoten. Ein Durchlauf, keine Endlosschleife.
 * ------------------------------------------------------------------ */

.contour-knoten circle {
	opacity: 0;
	animation: contour-knoten-an 600ms ease-out both;
}

@keyframes contour-knoten-an {
	to {
		opacity: 1;
	}
}

.contour-knoten circle:nth-child(1) { animation-delay: 1300ms; }
.contour-knoten circle:nth-child(2) { animation-delay: 1600ms; }
.contour-knoten circle:nth-child(3) { animation-delay: 1900ms; }
.contour-knoten circle:nth-child(4) { animation-delay: 2200ms; }
.contour-knoten circle:nth-child(5) { animation-delay: 2500ms; }
.contour-knoten circle:nth-child(6) { animation-delay: 2800ms; }
.contour-knoten circle:nth-child(7) { animation-delay: 3100ms; }
.contour-knoten circle:nth-child(8) { animation-delay: 3400ms; }
.contour-knoten circle:nth-child(9) { animation-delay: 3700ms; }

/* ------------------------------------------------------------------ *
 * Rueckzugsstufen
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.contour-linien polyline {
		stroke-dashoffset: 0;
		animation: none;
	}

	.contour-knoten circle {
		opacity: 1;
		animation: none;
	}

	.contour-canvas-huelle {
		display: none;
	}
}

/* Unter 768px kein Canvas. Das statische SVG bleibt und traegt die Sektion. */
@media (max-width: 767px) {
	.contour-canvas-huelle {
		display: none;
	}
}