/**
 * LDR Forms — Frontend-Styles.
 * Neutral & barrierefrei, mit dezenten LDR-CI-Akzenten.
 */

.ldr-form {
	--ldr-accent: #76972E;
	--ldr-accent-dark: #5f7a25;
	--ldr-blue: #1F4E79;
	--ldr-light: #EEF2E0;
	--ldr-border: #d6dbc7;
	--ldr-error: #b3261e;
	--ldr-radius: 10px;
	/* Darstellung (v0.19.0) — die Rückfallwerte sind genau das, was bis v0.18
	   fest im Stylesheet stand. Ein Formular ohne eigene Angaben sieht deshalb
	   exakt aus wie vorher; die Eigenschaften setzt der Renderer nur, wenn
	   jemand etwas anderes eingestellt hat. */
	max-width: var( --ldr-max-breite, 720px );
	padding: var( --ldr-innenabstand, 0 );
	margin-left: auto;
	margin-right: auto;
	font-size: 16px;
	line-height: 1.5;
	color: #1d2327;
}

.ldr-form *,
.ldr-form *::before,
.ldr-form *::after {
	box-sizing: border-box;
}

/* Honeypot — visuell + für Screenreader ausgeblendet, aber im DOM. */
.ldr-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Ausrichtung im Abschnitt der Seite. */
.ldr-form--left { margin-left: 0; margin-right: auto; }
.ldr-form--right { margin-left: auto; margin-right: 0; }

/* Felder */
.ldr-field {
	margin: 0 0 var( --ldr-feldabstand, 1.25rem );
}

/* Beschriftung links neben dem Feld statt darüber. Erst ab 640 px — darunter
   bliebe für die Eingabe zu wenig übrig. */
@media ( min-width: 640px ) {
	.ldr-form--label-left .ldr-field__label {
		float: left;
		width: 32%;
		padding-right: 1rem;
		margin-bottom: 0;
		line-height: 2.4;
	}
	.ldr-form--label-left .ldr-field__label + * {
		margin-left: 32%;
	}
	.ldr-form--label-left .ldr-field::after {
		content: "";
		display: table;
		clear: both;
	}
}

.ldr-field.ldr-hidden {
	display: none;
}

/* ------------------------------------------------------------------
 * Feldbreiten — mehrere Felder in einer Reihe
 *
 * Das Raster hat 60 Spalten, weil 60 durch 2, 3, 4 und 5 ohne Rest
 * teilbar ist: Hälfte, Drittel, Viertel und Fünftel gehen alle auf.
 * Begründung ausführlich in includes/class-ldr-forms-breiten.php.
 *
 * Ohne Breitenangabe belegt ein Feld alle 60 Spalten und steht damit
 * genau da, wo es vorher stand. Auch Seitentitel und Navigation laufen
 * über die volle Breite — sie erben das aus der Regel für alle Kinder.
 *
 * Gefüllt wird zeilenweise (`grid-auto-flow: row`, die Vorgabe): Was
 * nicht mehr in die angefangene Reihe passt, rutscht in die nächste.
 * Ein ausgeblendetes Feld ist `display: none` und belegt dadurch keine
 * Spalte — die Reihe schließt sich, statt eine Lücke zu lassen.
 * ------------------------------------------------------------------ */
.ldr-page {
	display: grid;
	grid-template-columns: repeat( 60, 1fr );
	column-gap: var( --ldr-spaltenabstand, 1rem );
	align-items: start;
}

/* Wichtig: `display: grid` aus der Klassenregel schlägt das `display: none`,
   das der Browser einem `hidden`-Attribut mitgibt. Ohne diese Zeile stünden
   in einem mehrseitigen Bogen plötzlich alle Seiten gleichzeitig da. */
.ldr-page[hidden] {
	display: none;
}

.ldr-page > * {
	grid-column: span 60;
	/* Rasterfelder sind von Haus aus mindestens so breit wie ihr Inhalt.
	   Ein langes Wort oder ein breites Feld würde die Reihe sonst sprengen. */
	min-width: 0;
}

.ldr-field--b75 {
	grid-column: span 45;
}

.ldr-field--b66 {
	grid-column: span 40;
}

.ldr-field--b50 {
	grid-column: span 30;
}

.ldr-field--b33 {
	grid-column: span 20;
}

.ldr-field--b25 {
	grid-column: span 15;
}

.ldr-field--b20 {
	grid-column: span 12;
}

/* --------------------------------------------------------------------
 * Felder einer Reihe auf einer Linie (ab v0.20.0)
 *
 * Stehen vier Ja/Nein-Fragen nebeneinander und ist eine davon einzeilig
 * beschriftet, die anderen zweizeilig, dann steht die kurze höher als ihre
 * Nachbarn. Die Beschriftung nimmt deshalb die überschüssige Höhe auf —
 * damit beginnen die Eingaben auf derselben Linie.
 *
 * **Nur Felder mit eigener Breitenstufe.** Nur die können sich eine Reihe
 * teilen; ein vollbreites Feld steht ohnehin allein. Dadurch ändert sich an
 * einem Formular ohne Breitenangaben — also an jedem Formular von vor
 * v0.16 — kein einziges Pixel.
 *
 * `label-left` ist ausgenommen: Dort schwimmt die Beschriftung neben dem Feld
 * (`float`), und in einem Flex-Container gibt es kein Float.
 * ----------------------------------------------------------------- */
.ldr-form:not( .ldr-form--label-left ):not( .ldr-form--reihe-oben ) .ldr-page > .ldr-field--b75,
.ldr-form:not( .ldr-form--label-left ):not( .ldr-form--reihe-oben ) .ldr-page > .ldr-field--b66,
.ldr-form:not( .ldr-form--label-left ):not( .ldr-form--reihe-oben ) .ldr-page > .ldr-field--b50,
.ldr-form:not( .ldr-form--label-left ):not( .ldr-form--reihe-oben ) .ldr-page > .ldr-field--b33,
.ldr-form:not( .ldr-form--label-left ):not( .ldr-form--reihe-oben ) .ldr-page > .ldr-field--b25,
.ldr-form:not( .ldr-form--label-left ):not( .ldr-form--reihe-oben ) .ldr-page > .ldr-field--b20 {
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

/* Vorgabe: die Beschriftung wächst, die Eingabe rückt auf die gemeinsame Linie. */
.ldr-form:not( .ldr-form--label-left ):not( .ldr-form--reihe-oben ):not( .ldr-form--reihe-unten ) .ldr-page > .ldr-field--b75 > .ldr-field__label,
.ldr-form:not( .ldr-form--label-left ):not( .ldr-form--reihe-oben ):not( .ldr-form--reihe-unten ) .ldr-page > .ldr-field--b66 > .ldr-field__label,
.ldr-form:not( .ldr-form--label-left ):not( .ldr-form--reihe-oben ):not( .ldr-form--reihe-unten ) .ldr-page > .ldr-field--b50 > .ldr-field__label,
.ldr-form:not( .ldr-form--label-left ):not( .ldr-form--reihe-oben ):not( .ldr-form--reihe-unten ) .ldr-page > .ldr-field--b33 > .ldr-field__label,
.ldr-form:not( .ldr-form--label-left ):not( .ldr-form--reihe-oben ):not( .ldr-form--reihe-unten ) .ldr-page > .ldr-field--b25 > .ldr-field__label,
.ldr-form:not( .ldr-form--label-left ):not( .ldr-form--reihe-oben ):not( .ldr-form--reihe-unten ) .ldr-page > .ldr-field--b20 > .ldr-field__label {
	flex: 1 0 auto;
}

/* „Unten bündig": der ganze Feldinhalt sitzt am Fuß der Reihe. */
.ldr-form--reihe-unten .ldr-page > .ldr-field--b75,
.ldr-form--reihe-unten .ldr-page > .ldr-field--b66,
.ldr-form--reihe-unten .ldr-page > .ldr-field--b50,
.ldr-form--reihe-unten .ldr-page > .ldr-field--b33,
.ldr-form--reihe-unten .ldr-page > .ldr-field--b25,
.ldr-form--reihe-unten .ldr-page > .ldr-field--b20 {
	justify-content: flex-end;
}

.ldr-field__label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
	color: var(--ldr-blue);
}

.ldr-required {
	color: var(--ldr-error);
}

.ldr-input,
.ldr-form select,
.ldr-form textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--ldr-border);
	border-radius: var(--ldr-radius);
	font: inherit;
	color: inherit;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ldr-input:focus,
.ldr-form select:focus,
.ldr-form textarea:focus {
	outline: none;
	border-color: var(--ldr-accent);
	box-shadow: 0 0 0 3px rgba( 118, 151, 46, 0.18 );
}

.ldr-field--invalid .ldr-input,
.ldr-field--invalid select,
.ldr-field--invalid textarea {
	border-color: var(--ldr-error);
}

.ldr-field__desc {
	margin: 0.35rem 0 0;
	font-size: 0.875rem;
	color: #646970;
}

/* Berechnetes Feld: Ergebnis und Einordnung. */
.ldr-calc {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.55rem 0.75rem;
	background: #f6f7f2;
	border-left: 3px solid var(--ldr-accent, #76972E);
	border-radius: 3px;
}
.ldr-calc__wert {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
}
.ldr-calc__wert:empty::before {
	content: '—';
	opacity: 0.45;
	font-weight: 400;
}
.ldr-calc__stufe {
	font-size: 0.9375rem;
	color: #4b5340;
}
.ldr-calc__stufe:empty {
	display: none;
}

.ldr-field__error {
	margin: 0.35rem 0 0;
	font-size: 0.875rem;
	color: var(--ldr-error);
	font-weight: 600;
}

/* Auswahlfelder */
.ldr-choices {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.ldr-choice {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	cursor: pointer;
}

.ldr-choice input {
	margin-top: 0.2rem;
}

/* Auswahlmöglichkeiten nebeneinander (ab v0.20.0).
   `minmax( 0, 1fr )` statt `1fr`: Eine lange Option würde ihre Spalte sonst
   aufblähen und die Aufteilung schief ziehen. Zeilenweise gefüllt, damit die
   Lesereihenfolge der Reihenfolge im Baukasten entspricht — bei „Ja / Nein /
   Weiß nicht" darf nicht spaltenweise umgebrochen werden. */
.ldr-choices--cols-2,
.ldr-choices--cols-3 {
	display: grid;
	grid-auto-flow: row;
	column-gap: 1rem;
}

.ldr-choices--cols-2 {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.ldr-choices--cols-3 {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

/* Teilfelder (Name / Adresse) */
.ldr-subfields {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ldr-subfield {
	flex: 1 1 100%;
}

.ldr-subfield--third {
	flex: 1 1 30%;
}

.ldr-subfield--two-thirds {
	flex: 1 1 60%;
}

/* Consent — Kästchen zuerst, der vollständige Hinweis daneben. */
.ldr-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.75rem 1rem;
	background: var(--ldr-light);
	border-radius: var(--ldr-radius);
}

.ldr-consent__box {
	flex: 0 0 auto;
	margin: 0.25rem 0 0;
}

.ldr-consent__text {
	flex: 1 1 auto;
	cursor: pointer;
	line-height: 1.5;
}

/* Ein Link im Hinweis bleibt ein Link — er soll nicht wie Fließtext wirken. */
.ldr-consent__text a {
	text-decoration: underline;
}

/* Dateiupload */
.ldr-file__hint {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.8rem;
	color: #646970;
}

/* Repeater */
.ldr-repeater__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: flex-end;
	padding: 0.75rem;
	border: 1px dashed var(--ldr-border);
	border-radius: var(--ldr-radius);
	margin-bottom: 0.5rem;
}

.ldr-repeater__cell {
	flex: 1 1 140px;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.ldr-repeater__label {
	font-size: 0.8rem;
	color: #646970;
}

.ldr-repeater__remove {
	flex: 0 0 auto;
	background: transparent;
	border: none;
	color: var(--ldr-error);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.3rem 0.5rem;
}

/* Abschnitte */
.ldr-section {
	margin: 1.5rem 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--ldr-light);
}

.ldr-section__title {
	margin: 0 0 0.25rem;
	color: var(--ldr-blue);
}

/* Fortschritt */
.ldr-progress {
	margin-bottom: 1.5rem;
}

.ldr-progress__bar {
	height: 8px;
	background: var(--ldr-light);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 0.75rem;
}

.ldr-progress__fill {
	display: block;
	height: 100%;
	background: linear-gradient( 90deg, var(--ldr-accent), var(--ldr-accent-dark) );
	border-radius: 999px;
	transition: width 0.35s ease;
}

.ldr-progress__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.ldr-progress__step {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
	color: #8a8f94;
}

.ldr-progress__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--ldr-light);
	color: var(--ldr-accent-dark);
	font-weight: 700;
	font-size: 0.8rem;
}

.ldr-progress__step.is-active {
	color: var(--ldr-blue);
	font-weight: 600;
}

.ldr-progress__step.is-active .ldr-progress__num {
	background: var(--ldr-accent);
	color: #fff;
}

.ldr-progress__step.is-done .ldr-progress__num {
	background: var(--ldr-accent-dark);
	color: #fff;
}

/* Navigation & Buttons */
.ldr-page__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-top: 1rem;
}

.ldr-btn-primary,
.ldr-btn-secondary {
	appearance: none;
	border: none;
	border-radius: var(--ldr-radius);
	padding: 0.65rem 1.5rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.05s ease;
}

.ldr-btn-primary {
	background: var(--ldr-accent);
	color: #fff;
}

.ldr-btn-primary:hover {
	background: var(--ldr-accent-dark);
}

.ldr-btn-secondary {
	background: var(--ldr-light);
	color: var(--ldr-accent-dark);
}

.ldr-btn-primary:active,
.ldr-btn-secondary:active {
	transform: translateY( 1px );
}

.ldr-btn-primary:disabled,
.ldr-btn-secondary:disabled {
	opacity: 0.6;
	cursor: default;
}

.ldr-btn-link {
	background: none;
	border: none;
	color: var(--ldr-blue);
	text-decoration: underline;
	cursor: pointer;
	font: inherit;
	padding: 0.4rem;
}

/* Meldungen */
.ldr-form__messages:empty {
	display: none;
}

.ldr-msg {
	padding: 0.85rem 1.1rem;
	border-radius: var(--ldr-radius);
	margin-top: 1rem;
	font-weight: 500;
}

.ldr-msg--info {
	background: #eef4fb;
	color: var(--ldr-blue);
}

.ldr-msg--success {
	background: var(--ldr-light);
	color: var(--ldr-accent-dark);
	border-left: 4px solid var(--ldr-accent);
}

.ldr-msg--error {
	background: #fbeae9;
	color: var(--ldr-error);
	border-left: 4px solid var(--ldr-error);
}

.ldr-confirmation {
	font-size: 1.05rem;
	text-align: center;
	padding: 1.5rem;
}

/* Nur für Vorlesesoftware — sichtbar ist hier nichts. */
.ldr-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Zwei Haltepunkte statt einem. Der Anspruch ist „mobil zuerst"; bisher
 * betraf die einzige Regel nur Adress- und Namensfelder. Ein Fragebogen, den
 * ganze Belegschaften am Telefon ausfüllen, braucht mehr als das.
 */
@media ( max-width: 780px ) {
	.ldr-progress__steps {
		gap: 0.35rem;
	}
	.ldr-progress__label {
		display: none;
	}
	.ldr-progress--steps .ldr-progress__step.is-active .ldr-progress__label {
		display: inline;
	}
	.ldr-page__nav {
		flex-wrap: wrap;
		gap: 0.5rem;
	}
	.ldr-calc {
		width: 100%;
	}
	/* Auf dem Telefon steht jedes Feld wieder allein: Ein Drittel einer
	   Handybreite ist für ein Eingabefeld keine Breite mehr.

	   Die Ausnahme `:not(.ldr-form--umbruch-eigen)` gehört zur Einstellung
	   „Einspaltig ab": Wer einen eigenen Haltepunkt setzt, bekommt diese Klasse,
	   und die Vorgabe greift dann gar nicht erst — statt sie später mühsam
	   zurückzunehmen. Siehe LDR_Forms_Darstellung::medienregel(). */
	.ldr-form:not( .ldr-form--umbruch-eigen ) .ldr-page > .ldr-field {
		grid-column: span 60;
	}
}

@media ( max-width: 600px ) {
	.ldr-subfield--third,
	.ldr-subfield--two-thirds {
		flex: 1 1 100%;
	}
	/* Mobil immer einspaltig — auch bei eingestellter Spaltigkeit. Zwei
	   Spalten auf Handybreite lassen für die Beschriftung zu wenig übrig,
	   und die Ankreuzfläche fiele unter die 44 px von weiter unten. */
	.ldr-choices,
	.ldr-choices--cols-2,
	.ldr-choices--cols-3 {
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
	}
	/* Ankreuzflächen unter dem Daumen: mindestens 44 px hoch. */
	.ldr-choice {
		min-height: 44px;
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}
	.ldr-page__nav button {
		flex: 1 1 100%;
		min-height: 44px;
	}
}