/* Szenario-Formular (Ihre Vorsorge → Online-Szenario) — wird am Ende in bausteine.css zusammengeführt

   Aufbau (tools/szenario-import.php): Elementgruppe .SzenarioRahmen mit
     1. Formular „Szenario“ (form.SzenarioForm, terminal42/contao-mp_forms, 11 Schritte)
     2. Modul „Szenario – Schrittanzeige“ (.SzenarioSchritte, Vorlage nav_szenario_schritte)
   Die Schrittanzeige steht im HTML hinter dem Formular (sonst HTTP 500 durch conditionalformfields,
   siehe Import-Skript) und wird hier per order nach oben gestellt.

   Maße und Farben aus dem Figma-Entwurf HM4 „szenario 2“ (Bild 851 × 1028 an x = 214, Rahmen
   „framebrush“ 16 px #6D234F + 20 % Schwarz = --color_1, Ecken 15 px). Gemessen im Bild:
   Grund #e4e1dc (auf der bisherigen Website als #e5e2dd gesetzt), Kreise 30 px mit 3 px Abstand,
   aktiv Beere, sonst #c8bbbf, Felder 584 px breit ab x = 131, weiß ohne Kontur mit leichter
   Innenschattierung, Beschriftung darüber, Sternchen links vor der Beschriftung in Beere. */

.SzenarioRahmen {
	--szenario_grund: #e5e2dd;
	--szenario_blass: #c8bbbf;
	--szenario_spalte: 587px;

	display: flex;
	flex-direction: column;
	max-width: 851px;
	margin-inline: auto;
	/* + 16 px: dort stand früher der CSS-Rand, der Inhalt bleibt so an derselben Stelle */
	padding: calc(clamp(24px, 3.2vw + 12px, 61px) + 16px) calc(clamp(18px, 8vw - 10px, 99px) + 16px) calc(clamp(32px, 4vw, 60px) + 16px);
	border-radius: 15px;   /* Pinselkontur 16 px in Beere: bausteine.css „Pinselrahmen“ */
	background: var(--szenario_grund);
	color: var(--color_1);
	font-size: var(--schrift_klein);
	line-height: 1.375;


	& > .SzenarioSchritte { order: -1; }
	& > * { width: 100%; max-width: calc(var(--szenario_spalte) + 18px); margin-inline: auto; }
	& .ce_form, & .content-form { margin: 0; }
}

/* ------------------------------------------------------------------ Schrittanzeige */
.SzenarioSchritte {
	margin-bottom: 30px;

	& .SzenarioSchritte-liste {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 3px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	& .SzenarioSchritte-nr {
		display: grid;
		place-items: center;
		width: 30px;
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--szenario_blass);
		color: var(--color_4);
		font-size: var(--schrift_klein);
		line-height: 1;
		text-decoration: none;
		font-variant-numeric: tabular-nums;
	}
	& .current .SzenarioSchritte-nr { background: var(--color_1); }
	& a.SzenarioSchritte-nr { transition: background-color 0.3s ease; }
	& a.SzenarioSchritte-nr:hover { background: var(--color_1); }
}
/* Nach dem Absenden (Bestätigung statt Formular) braucht es keine Schritte mehr */
.SzenarioRahmen:has(.form-confirmation) .SzenarioSchritte { display: none; }

/* ------------------------------------------------------------------ Formular */
.SzenarioForm {
	/* Platz links für das Pflichtfeld-Sternchen */
	padding-left: 18px;

	& fieldset {
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
	}
	/* Der Entwurf zeigt eine Spalte; die Quelle (contao57) hatte zweispaltige Gruppen */
	& .Spalten2 { display: block; }

	/* Abschnittstitel (Erklärungstexte „GRUNDSÄTZLICHES“, „DOKUMENTE“ …) */
	& .widget-explanation :is(h3, h4) {
		margin: 0 0 4px;
		box-shadow: none;
		color: var(--color_1);
		font-size: var(--font_size);
		font-weight: 500;
		line-height: var(--line_height);
		text-transform: uppercase;
	}
	& .widget-explanation p { margin: 0; }
	/* Zwischentitel in Großbuchstaben (z. B. „VERSENDEN VON TRAUER-/DANKESKARTEN“) */
	& .widget-explanation:not(:has(h3, h4)) p:only-child { margin-top: 10px; }

	& .widget,
	& fieldset > fieldset,
	& .widget + fieldset,
	& fieldset + .widget { margin-top: 20px; }
	& .formbody > :first-child,
	& fieldset > :first-child { margin-top: 0; }
	& .formbody > .widget-explanation + fieldset { margin-top: 20px; }
	/* Themenblöcke eines Schritts (Ort, Personenkreis, Sarg und Urne …) deutlicher trennen */
	& .formbody > fieldset > fieldset:not([data-cff-condition]) + fieldset:not([data-cff-condition]) { margin-top: 32px; }

	/* Beschriftung über dem Feld, Sternchen links davor */
	& .widget > label,
	& .radio_container > legend,
	& .checkbox_container > legend {
		position: relative;
		display: block;
		margin: 0 0 6px;
		padding: 0;
		color: var(--color_1);
		font-weight: 500;
	}
	& :is(label, legend) > span.mandatory {
		position: absolute;
		top: 0;
		left: -18px;
		color: var(--color_1);
	}

	/* Felder: weiß, ohne Kontur, leichte Innenschattierung wie im Entwurf */
	& :is(input.text, input[type="text"], input[type="email"], input[type="date"], textarea) {
		padding: 5px 9px;
		border: 0;
		border-radius: 0;
		background: var(--color_4);
		box-shadow: inset 1px 2px 2px rgb(0 0 0 / 0.2);
		color: var(--schwarz);
		font-size: var(--schrift_klein);
		line-height: 1.25;
	}
	& textarea { min-height: 6em; }

	/* Auswahlfelder untereinander, „nebeneinander“ (Anrede, Farbe) in einer Zeile */
	& :is(.radio_container, .checkbox_container) {
		& > span {
			display: flex;
			gap: 8px;
			align-items: baseline;
			margin-top: 4px;
		}
		& input { flex: none; accent-color: var(--color_1); }
		& label { margin: 0; }
	}
	& .nebeneinander.radio_container {
		display: flex;
		flex-wrap: wrap;
		column-gap: 24px;
		& > legend { flex-basis: 100%; }
	}
	/* Einwilligungstexte sind lang — als Fließtext setzen */
	& .widget-checkbox label { line-height: 1.375; }

	/* Bedingte Detailfelder (conditionalformfields) eingerückt unter der gewählten Option */
	& fieldset[data-cff-condition] {
		margin-top: 12px;
		padding-left: 26px;
		border-left: 2px solid var(--szenario_blass);
	}

	& p.error {
		margin: 0 0 6px;
		color: var(--color_3);
		font-weight: 600;
	}
	& .error :is(input, textarea) { box-shadow: inset 0 0 0 2px var(--color_3); }

	/* Weiter-Schaltfläche (mp_form_pageswitch); Zurück über die Schrittanzeige */
	& .widget-mp_form_pageswitch,
	& .widget-pagebreak {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		margin-top: 36px;
	}
	& button[type="submit"] { font-size: var(--font_size); }

	/* Zusammenfassung im letzten Schritt: Beschriftung + Angabe, leere Angaben ausblenden */
	& .widget-placeholder {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		gap: 6px 20px;
		@media (max-width: 599px) { grid-template-columns: 1fr; gap: 0; }

		& .label { font-weight: 600; }
		& .value { margin-bottom: 4px; overflow-wrap: anywhere; }
		& .label:has(+ .value:empty),
		& .value:empty { display: none; }
	}
}

/* ------------------------------------------------------------------ Drucken
   Auf der Zusammenfassung lässt sich die Seite drucken bzw. als PDF sichern (Quelle: print.scss in contao57). */
@media print {
	body:has(.SzenarioForm .widget-placeholder) {
		& :is(header, footer, nav, .mod_article:not(:has(.SzenarioRahmen))) { display: none !important; }
		& .mod_article:has(.SzenarioRahmen) > :not(:has(.SzenarioRahmen)):not(.SzenarioRahmen) { display: none; }
		& .SzenarioRahmen { max-width: none; padding: 0; border: 0; background: none; color: #000; }
		& .SzenarioSchritte,
		& .SzenarioForm :is(.widget-mp_form_pageswitch, .widget-pagebreak, .widget-altcha) { display: none; }
		& .widget-placeholder .label { color: #000; }
	}
}