/* Startseite: das goldene L im Startbild zeichnet sich beim Laden (Strichzeichnung).
   Das Icon-Widget mit der Klasse lhp-l-zeichnen gibt das SVG inline aus, der Pfad hat pathLength="1".
   Ohne diese Datei ist das L vollständig sichtbar. */
.lhp-l-zeichnen svg path {
	fill: none !important;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: lhp-l-zeichnen 2.8s cubic-bezier(.22, .61, .36, 1) .3s forwards;
}
@keyframes lhp-l-zeichnen {
	to { stroke-dashoffset: 0; }
}
.lhp-l-zeichnen svg {
	filter: drop-shadow(0 6px 10px rgba(46, 10, 14, .55));
}

/* Goldlinien an den Schwung-Kanten, Schleifen vor den Kapiteln und der Faden unter dem Bildpaar:
   Die Linien sind Icon-Widgets mit inline ausgegebenem SVG (Pfad mit pathLength="1").
   Das Zeichnen gilt nur, wenn assets/startseite.js die Klasse lhp-js gesetzt hat. Ohne Skript sind alle Linien fertig gezeichnet. */
.lhp-linie svg path,
.lhp-schleife svg path,
.lhp-faden svg path {
	fill: none !important;
}
.lhp-js .lhp-linie svg path,
.lhp-js .lhp-schleife svg path,
.lhp-js .lhp-faden svg path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}
.lhp-js .lhp-linie svg path { transition: stroke-dashoffset 2.2s cubic-bezier(.22, .61, .36, 1); }
.lhp-js .lhp-schleife svg path { transition: stroke-dashoffset 1.6s cubic-bezier(.22, .61, .36, 1) .15s; }
.lhp-js .lhp-faden svg path { transition: stroke-dashoffset 1.8s cubic-bezier(.22, .61, .36, 1); }
.lhp-js .ist-gezeichnet svg path { stroke-dashoffset: 0; }

/* Damals und Heute: beide Aufnahmen liegen im Tab-Feld übereinander, das Skript blendet über.
   Ohne Skript stehen beide Aufnahmen untereinander. */
.lhp-js .lhp-bildpaar {
	position: relative;
	aspect-ratio: 16 / 10;
}
@media (max-width: 767px) {
	.lhp-js .lhp-bildpaar { aspect-ratio: 4 / 3; }
}
.lhp-js .lhp-bildpaar .elementor-widget-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	transition: opacity 1.1s cubic-bezier(.22, .61, .36, 1), transform 1.4s cubic-bezier(.22, .61, .36, 1);
}
.lhp-js .lhp-bildpaar .elementor-widget-image img {
	height: 100% !important;
	aspect-ratio: auto !important;
}
.lhp-js .lhp-bild-heute { opacity: 0; transform: scale(1.03); }
.lhp-js .lhp-bildpaar[data-zeit="heute"] .lhp-bild-heute { opacity: 1; transform: scale(1); }
.lhp-js .lhp-bildpaar[data-zeit="heute"] .lhp-bild-damals { opacity: 0; transform: scale(1.03); }

/* Gutscheinkarte im Umschlag (wie Entwurf C). Ohne Skript steht die Karte sichtbar draußen. */
.lhp-umschlag-karte {
	outline: 1px solid rgba(193, 163, 96, .8);
	outline-offset: -8px;
	transform: translateY(-36%);
	transition: transform 1.1s cubic-bezier(.16, .84, .24, 1);
}
.lhp-umschlag-js .lhp-umschlag .lhp-umschlag-karte { transform: translateY(8%); }
.lhp-umschlag-js .lhp-umschlag.is-out .lhp-umschlag-karte { transform: translateY(-36%); }

@media (prefers-reduced-motion: reduce) {
	.lhp-l-zeichnen svg path {
		animation: none;
		stroke-dashoffset: 0;
	}
	.lhp-js .lhp-linie svg path,
	.lhp-js .lhp-schleife svg path,
	.lhp-js .lhp-faden svg path,
	.lhp-js .lhp-bildpaar .elementor-widget-image,
	.lhp-umschlag-karte {
		transition: none !important;
	}
}