/* ==========================================================================
   Der neue Bestattertag — Seitentechnik
   Regeln, die NICHT im Backend zur Auswahl stehen sollen: Menüs, Terminliste,
   Referenten-Auswahl (per Skript), Formular, Maßeinheit --px. Die wählbaren
   Klassen stehen ohne Kommentare in bausteine.css und animationen.css (dort
   würde jeder Kommentar zu einer Kategorie im Auswahlfeld); ihre Erklärungen
   stehen in klassen-beschreibung.json.
   ========================================================================== */
/* Kinder der Startbühne: Raster der Inhaltsspalte aufheben (ohne Spezifität, damit die Spaltenregeln gewinnen) */
:where(main .mod_article.Startbühne) > * { width: auto; max-width: none; margin: 0; padding-inline: 0; }
/* Menü auf der Startseite: 40 px fett, weiß, zentriert */
.MenüStartseite {
	& ul { list-style: none; margin: 0; padding: 0; }
	& li { line-height: 1; }
	& li + li { margin-top: clamp(14px, 4.07vh, 44px); }
	& a, & strong {
		display: inline-block;
		font-size: var(--schrift_menue);
		font-weight: 700;
		line-height: 1;
		color: #fff;
		text-decoration: none;
	}
}
/* Impressum | Datenschutz (Startseite und Fußzeile): 20 px, durch „|“ getrennt */
.MenüRechtliches {
	& ul { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
	& li + li::before { content: "|"; margin-inline: 0.3em; }
	& a, & strong { font-size: var(--schrift_klein); font-weight: 600; color: #fff; text-decoration: none; }
	& a:hover { text-decoration: underline; text-decoration-color: var(--color_1); }
}
/* ==========================================================================
   Unterseiten (Entwurf 1920 px). Werte als vw, damit das Verhältnis bis
   1920 px gleich bleibt; darüber gedeckelt.
   ========================================================================== */
:root {
	--px: min(1px, 100vw / 1920);   /* 1 Entwurfspixel */
}
/* Terminliste (Vorlage templates/event_termin.html.twig) */
.Terminliste {
	& .Termin__titel { font-size: var(--schrift_titel); font-weight: 800; line-height: 1.2; color: #fff; }
	& .Termin__angaben { margin-top: calc(26 * var(--px)); }
	& .Termin__anmelden { font-weight: 700; text-decoration: underline; text-decoration-color: var(--color_1); text-underline-offset: 0.2em; }
	& .Termin__anmelden:hover { color: var(--color_1); }
	& .Terminliste__zwischentitel { margin-top: calc(84 * var(--px)); font-size: var(--schrift_zwischen); font-weight: 700; line-height: 1.2; }
	& .Terminliste__zwischentitel + .Termin--spaeter { margin-top: calc(9 * var(--px)); }
	& .Termin--spaeter + .Termin--spaeter { margin-top: calc(30 * var(--px)); }
	& .empty { font-size: var(--schrift_zwischen); font-weight: 700; }
}
/* ------------------------------------------------------------------ Anmeldung */
main .mod_article.Seitentitel .Textbreite1050 { margin-top: calc(85 * var(--px)); }
/* Auswahlleiste (wird per Skript erzeugt) */
.Referentenwahl {
	grid-column: 1;
	grid-row: 2;
	align-self: start;
	display: grid;
	grid-template-columns: repeat(2, calc(300 * var(--px)));
	gap: calc(36 * var(--px)) calc(39 * var(--px));
	margin: calc(167 * var(--px)) 0 0 calc(235 * var(--px));
	padding: 0;
	list-style: none;
	& button {
		display: block;
		width: 100%;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		aspect-ratio: 1;
		overflow: hidden;
		outline-offset: 4px;
	}
	& img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.15); transition: transform 0.6s ease, filter 0.4s ease, opacity 0.4s ease; }
	& button:hover img, & button:focus-visible img { transform: scale(1.05); filter: none; }
	& button[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--color_1); }
	& button[aria-pressed="false"] img { opacity: 0.75; }
	@media (max-width: 1023px) {
		grid-row: auto;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 10px;
		margin: 30px var(--rand) 30px;
	}
	@media (max-width: 520px) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Nur mit Skript: die gewählte Person steht rechts, die übrigen sind ausgeblendet */
.Referentenauswahl--aktiv .Referent {
	grid-column: 2;
	grid-row: 1 / 4;
	border-radius: var(--flaechen_radius) 0 0 0;
	margin-top: 0;
	&:not(.ist-gewählt) { display: none; }
	&.ist-gewählt { animation: referentEinblenden 0.5s ease both; }
	@media (max-width: 1023px) { grid-column: 1; grid-row: auto; margin-inline: 20px 0; }
}
@keyframes referentEinblenden { from { opacity: 0; transform: translateY(14px); } }
/* Ohne Skript: alle Personen untereinander in der rechten Spalte */
.Referentenauswahl:not(.Referentenauswahl--aktiv) .Referent { grid-column: 2; & + .Referent { margin-top: 40px; } }
@keyframes laufband { to { transform: translateX(calc(-50% - 12px)); } }
/* ------------------------------------------------------------------ Anmeldeformular
   Felder 67 px hoch, weiß, Ecken 15 px, Beschriftung 24 fett Grau IM Feld (wie im
   Entwurf). Beim Ausfüllen rückt sie klein an den oberen Rand (script.js setzt
   „hatWert“). Zeilen: PLZ 296 + Ort 766, Name 665 + Position 395 (Summe 1076 px). */
.Anmeldeformular {
	--feld-hoehe: clamp(52px, 3.49vw, 67px);
	--feld-abstand: clamp(10px, 0.73vw, 14px);
	--feld-grau: #707070;
	color: var(--color_5);
	font-weight: 700;
	& .formbody {
		display: grid;
		grid-template-columns: minmax(0, 296px) minmax(0, 780px) minmax(0, 1fr);
		gap: var(--feld-abstand) 0;
		@media (max-width: 700px) { grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) 0; }
	}
	& .formbody > * { grid-column: 1 / 3; }
	& .widget { position: relative; margin: 0; }
	& .widget.FeldPLZ { grid-column: 1 / 2; }
	& .widget.FeldOrt { grid-column: 2 / 3; margin-left: clamp(10px, 0.73vw, 14px); }
	& fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
	& .Personenzeile {
		display: flex;
		gap: clamp(10px, 0.83vw, 16px);
		& legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
		& .widget.FeldName { flex: 665 1 0; }
		& .widget.FeldPosition { flex: 395 1 0; }
		@media (max-width: 600px) { flex-direction: column; }
	}
	/* Abstände zwischen den Blöcken wie im Entwurf */
	& .widget-select:first-of-type, & .widget-select { margin-top: clamp(24px, 3.5vw, 66px); }
	& .widget-textarea, & .Personenzeile + .widget { margin-top: 6px; }
	& .Pflichthinweis { margin-top: clamp(24px, 3vw, 50px); padding-left: 25px; }
	& .Einverständnis { margin-top: clamp(14px, 1.6vw, 30px); }

	& :is(input.text, textarea, select) {
		display: block;
		width: 100%;
		height: var(--feld-hoehe);
		padding: 0.9em 25px 0.3em;
		border: 2px solid transparent;
		border-radius: 15px;
		background: #fff;
		color: var(--color_5);
		font-size: var(--font_size);
		font-weight: 700;
		transition: border-color 0.25s ease, box-shadow 0.25s ease;
		&:focus { outline: none; border-color: var(--color_3); box-shadow: 0 0 0 4px rgb(255 255 255 / 0.35); }
	}
	& textarea { height: auto; min-height: clamp(180px, 14.5vw, 278px); padding-top: 1.4em; }
	& select.select {
		appearance: none;
		padding: 0 70px 0 25px;
		background: #d6d0d0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M0 0h24L12 20z' fill='%232d3c1b'/%3E%3C/svg%3E") no-repeat right 40px center / 24px 20px;
		color: var(--feld-grau);
		cursor: pointer;
	}

	/* Beschriftung im Feld (Text- und Mehrzeilenfelder) */
	& :is(.widget-text, .widget-textarea) > label {
		position: absolute;
		left: 25px;
		top: calc(var(--feld-hoehe) / 2);
		z-index: 1;
		max-width: calc(100% - 50px);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: var(--feld-grau);
		font-size: var(--font_size);
		line-height: 1.2;
		pointer-events: none;
		translate: 0 -50%;
		transition: top 0.25s ease, font-size 0.25s ease, padding 0.25s ease, background-color 0.25s ease, color 0.25s ease;
	}
	& .widget-textarea > label { top: 1.1em; translate: 0 0; }
	& :is(.widget-text, .widget-textarea):is(:focus-within, .hatWert) > label {
		top: 0;
		padding: 2px 10px;
		margin-left: -10px;
		border-radius: 999px;
		background: #fff;
		color: var(--color_3);
		font-size: 13px;
		translate: 0 -50%;
	}
	& .mandatory > .mandatory, & label .mandatory { color: inherit; }
	/* Beschriftung über Auswahlfeldern */
	& .widget-select > label { display: block; margin: 0 0 8px 25px; }

	/* Einverständnis: weißes Kästchen 25 × 25 */
	& .checkbox_container legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	& .checkbox_container > span { display: flex; align-items: center; gap: 17px; }
	& input.checkbox {
		appearance: none;
		flex: 0 0 25px;
		width: 25px;
		height: 25px;
		margin: 0;
		border-radius: 5px;
		background: #fff;
		cursor: pointer;
		display: grid;
		place-items: center;
		&:checked::after { content: ""; width: 7px; height: 13px; margin-top: -3px; border: solid var(--color_3); border-width: 0 3px 3px 0; rotate: 45deg; }
	}

	/* Schaltfläche „Anmelden“: 500 × 76, Blaugrau, rechtsbündig */
	& .formbody > .widget-submit { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin-top: clamp(14px, 1.6vw, 30px); }
	& button.submit {
		width: min(500px, 100%);
		height: clamp(56px, 3.96vw, 76px);
		border: 0;
		border-radius: 15px;
		background: var(--color_3);
		color: #fff;
		font-size: var(--schrift_zwischen);
		font-weight: 700;
		cursor: pointer;
		transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
		&:hover, &:focus-visible { background: var(--color_2); transform: translateY(-2px); box-shadow: 0 10px 24px rgb(16 42 67 / 0.3); }
	}
	/* Fehlermeldungen */
	& p.error { margin: 6px 0 0 25px; color: #fff; font-size: 0.8em; }
	& .widget.error :is(input.text, textarea, select) { border-color: var(--color_2); }
}
/* Texte in der Fläche: wie die Feldbeschriftungen 25 px eingerückt */
main .mod_article.FlächeBreit > :is(.content-headline, .content-text) { padding-left: 25px; }
.FlächeBreit .content-form .formbody > .widget-explanation p { margin: 0; }
/* Bestätigung nach dem Absenden (Ajax) */
.FlächeBreit .form-confirmation, .FlächeBreit .form-confirmation p { font-size: var(--schrift_zwischen); font-weight: 700; color: #fff; }

/* ==========================================================================
   Animationen, die nicht im Backend wählbar sind (Startseiten-Auftakt, Menü,
   Seitenwechsel, Video-Pause, „Bewegung reduzieren“). Die wählbaren
   Einblend-Klassen (sanftVonUnten …) stehen in animationen.css. Grundsätze:
   jedes Element blendet nur EINMAL ein (Klasse „wivp“ des inViewport-Bundles),
   kurze Wege, weiche Kurven; bei „Bewegung reduzieren“ erscheint alles sofort.
   ========================================================================== */
/* ------------------------------------------------------------------ Startseite: Auftakt
   Logo, Menüpunkte und Einladung erscheinen nacheinander, sobald die Seite geladen
   ist (die preload-Klasse hält die Animation bis dahin an). */
@keyframes auftaktVonOben { from { opacity: 0; translate: 0 -18px; } }
@keyframes auftaktVonUnten { from { opacity: 0; translate: 0 18px; } }
@keyframes auftaktVonRechts { from { opacity: 0; translate: 60px 0; } }
@keyframes auftaktFläche { from { opacity: 0; } }

.Startbühne {
	& .StartSpalteMitte { animation: auftaktFläche 0.8s ease-out both; }
	& .StartSpalteMitte .Logo { animation: auftaktVonOben 0.9s var(--einblenden-kurve) 0.2s both; }
	& .MenüStartseite li { animation: auftaktVonUnten 0.7s var(--einblenden-kurve) both; }
	& .MenüStartseite li:nth-child(1) { animation-delay: 0.45s; }
	& .MenüStartseite li:nth-child(2) { animation-delay: 0.55s; }
	& .MenüStartseite li:nth-child(3) { animation-delay: 0.65s; }
	& .MenüStartseite li:nth-child(4) { animation-delay: 0.75s; }
	& .MenüStartseite li:nth-child(n+5) { animation-delay: 0.85s; }
	& .MenüRechtliches { animation: auftaktFläche 0.8s ease-out 1s both; }
	& .StartSpalteRechts { animation: auftaktVonRechts 1.1s var(--einblenden-kurve) 0.5s both; }
}
/* Auf schmalen Bildschirmen keine seitliche Bewegung */
@media (max-width: 1023px) {
	.Startbühne .StartSpalteRechts { animation-name: auftaktVonUnten; }
}

/* Menüpunkte: Unterstrich wächst von der Mitte (Startseite und Menü) */
.MenüStartseite :is(a, strong) {
	background-image: linear-gradient(var(--color_1), var(--color_1));
	background-size: 0 3px;
	background-position: 50% 100%;
	background-repeat: no-repeat;
	padding-bottom: 0.12em;
	transition: background-size 0.35s ease;
}
.MenüStartseite :is(a:hover, a:focus-visible, strong) { background-size: 100% 3px; }

/* Geöffnetes Menü: Punkte folgen nacheinander */
header .navigation-main.is-active ul.level_1 > li { animation: auftaktVonUnten 0.55s var(--einblenden-kurve) both; }
header .navigation-main.is-active ul.level_1 > li:nth-child(2) { animation-delay: 0.06s; }
header .navigation-main.is-active ul.level_1 > li:nth-child(3) { animation-delay: 0.12s; }
header .navigation-main.is-active ul.level_1 > li:nth-child(4) { animation-delay: 0.18s; }
header .navigation-main.is-active ul.level_1 > li:nth-child(n+5) { animation-delay: 0.24s; }

/* Logo bleibt beim Seitenwechsel stehen bzw. gleitet von der Startseiten-Spalte in die
   Kopfzeile (View Transitions; Browser ohne Unterstützung blenden normal über) */
.Startbühne .StartSpalteMitte .Logo img,
.Kopfzeile .Logo img { view-transition-name: logo; }
::view-transition-group(logo) { animation-duration: 0.55s; animation-timing-function: var(--einblenden-kurve); }

/* Hintergrundvideo: Standbild weich in das laufende Video übergehen lassen */
.content-player video { transition: opacity 0.6s ease; }

/* Pausen-Schaltfläche der Hintergrundvideos (script.js): unten rechts, dezent */
.VideoPause {
	position: absolute;
	right: clamp(12px, 1.5vw, 28px);
	bottom: clamp(12px, 1.5vw, 28px);
	z-index: 3;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid rgb(255 255 255 / 0.7);
	border-radius: 50%;
	background: rgb(16 42 67 / 0.45);
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.3s ease, background-color 0.3s ease;
	&::before, &::after {
		content: "";
		position: absolute;
		top: 13px;
		width: 4px;
		height: 14px;
		border-radius: 2px;
		background: #fff;
	}
	&::before { left: 14px; }
	&::after { right: 14px; }
	&:hover, &:focus-visible { opacity: 1; background: rgb(16 42 67 / 0.8); }
}
.angehalten > .VideoPause {
	&::before { left: 16px; top: 12px; width: 0; height: 0; border-radius: 0; background: none;
		border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }
	&::after { display: none; }
}
.nurStandbild .VideoPause { display: none; }

/* ------------------------------------------------------------------ Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	body.ivp_active .ivp:not(.wivp) { opacity: 1 !important; translate: none !important; scale: none !important; }
	::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
	.Laufband ul { flex-wrap: wrap !important; animation: none !important; }
}

/* Startseite: rechts liegen die Spalten über dem Video → Pausen-Schaltfläche unten links */
.Startbühne .VideoPause { left: clamp(12px, 1.5vw, 28px); right: auto; }

/* Lange Wörter (E-Mail-Adressen, Internetadressen) brechen auf schmalen Bildschirmen um,
   statt aus Flächen und Kästen herauszuragen */
main :is(.rte, .Termin__angaben, .ReferentText, .content-text) { overflow-wrap: anywhere; }
@media (max-width: 767px) { .Rückfragen br { display: none; } }

/* Sehr schmale Bildschirme: Formularfläche breiter, Beschriftungen im Feld etwas kleiner,
   damit auch „Telefonnummer für Rückfragen*“ samt Sternchen ganz zu sehen ist */
@media (max-width: 420px) {
	main .mod_article.FlächeBreit { margin-left: 12px; max-width: calc(100% - 12px); padding: 40px 14px 34px 16px; }
	.Anmeldeformular :is(.widget-text, .widget-textarea) > label { left: 18px; max-width: calc(100% - 30px); font-size: 15px; }
	.Anmeldeformular :is(input.text, textarea, select.select) { padding-left: 18px; }
}