/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Version: 1.1.0
*/

/* Aufklappmenü (Desktop-Untermenüs + mobiles Overlay) an dunklen Header angleichen.
   Core-WP gibt hier sonst per Default einen weissen Hintergrund vor, sobald der
   Navigation-Block selbst keine eigene Hintergrundfarbe gesetzt hat (.has-background
   fehlt) - das sorgt für schlechten Kontrast mit der hellen Menü-Textfarbe. */
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container,
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: var(--wp--preset--color--accent-1);
}


/* ==========================================================================
   Ninja Forms
   --------------------------------------------------------------------------
   Das Plugin liefert im Frontend nur `display-structure.css` aus: Flex-Gerüst
   mit `order`-Werten, sonst nichts. Ohne das Folgende erbt das Formular keinerlei
   Optik vom Theme und steht über die volle Inhaltsbreite (1000px).

   Formsprache übernommen vom bestehenden Login-Formular der Seite
   ([member_login] in functions.php, CSS in theme.json): 2px-Rahmen, 8px-Radien,
   Buttons in accent-2, Farben und Abstände aus den Theme-Presets.

   Dieses Stylesheet wird nach display-structure.css geladen; wo unten die
   Spezifität gleich ist, entscheidet die Reihenfolge zu unseren Gunsten.
   ========================================================================== */

/* Formularkarte und Datenschutzhinweis darunter sollen bündig stehen. Die
   Karte rechnet ohne box-sizing in Inhaltsbreite, der Hinweis in Aussenbreite -
   deshalb hier einmal die fertige Aussenbreite definieren und beide darauf
   verpflichten. */
:root {
	--inps-formular-polster: clamp(1.5rem, 4vw, 2.75rem);
	--inps-formular-breite: calc(40rem + 2 * var(--inps-formular-polster) + 2px);
}

/* Breite einzelner Formulare. Ninja Forms gibt dem Container die ID
   "nf-form-<Formular-ID>-cont"; den Hinweis darunter versieht functions.php mit
   der passenden Klasse, damit beide gleich breit bleiben. Formular 2 ist das
   Beitrittsgesuch: viele Felder, deshalb mehr Platz. Jedes weitere Formular
   erbt den Standardwert oben, bis es hier einen eigenen Eintrag bekommt. */

#nf-form-2-cont,
.inps-datenschutz--formular-2 {
	/* Volle Inhaltsbreite der Seite: die Karte fluchtet damit exakt mit den
	   Absätzen darüber. Der Wert kommt aus theme.json (1000px). */
	--inps-formular-breite: var(--wp--style--global--content-size, 56rem);
}

.nf-form-cont {
	--inps-feld-radius: 8px;
	--inps-linie: color-mix(in srgb, var(--wp--preset--color--accent-1) 30%, transparent);
	--inps-linie-hover: color-mix(in srgb, var(--wp--preset--color--accent-1) 55%, transparent);
	--inps-ring: color-mix(in srgb, var(--wp--preset--color--accent-1) 15%, transparent);
	--inps-fehler: var(--wp--preset--color--accent-3);

	/* Behebt die volle Inhaltsbreite: ein Formular liest sich schmal besser. */
	box-sizing: border-box;
	max-width: var(--inps-formular-breite);
	margin-inline: auto;
	padding: var(--inps-formular-polster);
	background-color: var(--wp--preset--color--custom-pure-white);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent);
	border-radius: 1em;
	box-shadow: 0 1px 2px rgba(41, 46, 51, 0.04), 0 12px 32px -18px rgba(37, 88, 105, 0.35);
	position: relative;
	overflow: hidden;
}

/* Der Spinner sitzt sonst mit 100px Aussenabstand grau im leeren Kasten. */
.nf-form-cont .nf-loading-spinner {
	margin: 3rem auto;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 45%, transparent);
}

.nf-form-cont .nf-form-title h3 {
	margin-block: 0 1.5rem;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
}

/* --- Feldabstände ------------------------------------------------------- */

.nf-form-cont .nf-field-container {
	margin-block-end: 1.75rem;
}

.nf-form-cont .submit-container {
	margin-block: 2rem 0;
}

/* --- Beschriftungen ------------------------------------------------------
   Abstand am Wrapper, nicht am <label>: display-structure setzt für
   `.label-above .nf-field-label` bereits 10px, die sich sonst addieren. */

.nf-form-cont .nf-field-label {
	margin-block-end: 0.55rem;
}

.nf-form-cont .nf-field-label label {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
}

.nf-form-cont .ninja-forms-req-symbol {
	margin-inline-start: 0.15em;
	color: var(--inps-fehler);
	font-weight: 700;
}

/* Die Beschreibung steht per `order: 10` zwischen Beschriftung und Feld. */
.nf-form-cont .nf-field-description {
	margin-block-end: 0.6rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--accent-4);
}

/* --- Eingabefelder ------------------------------------------------------ */

.nf-form-cont .nf-element[type="text"],
.nf-form-cont .nf-element[type="email"],
.nf-form-cont .nf-element[type="tel"],
.nf-form-cont .nf-element[type="url"],
.nf-form-cont .nf-element[type="number"],
.nf-form-cont .nf-element[type="password"],
.nf-form-cont .nf-element[type="date"],
.nf-form-cont textarea.nf-element,
.nf-form-cont select.nf-element {
	box-sizing: border-box;
	width: 100%;
	min-height: 3.375rem;
	padding: 0.95rem 1.1rem;
	font-family: inherit;
	font-size: 1.0625rem;
	line-height: 1.45;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--custom-pure-white);
	border: 2px solid var(--inps-linie);
	border-radius: var(--inps-feld-radius);
	outline: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.nf-form-cont .nf-element::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--accent-4) 75%, transparent);
}

.nf-form-cont .nf-element:hover:not(:focus) {
	border-color: var(--inps-linie-hover);
}

.nf-form-cont .nf-element:focus {
	border-color: var(--wp--preset--color--accent-1);
	box-shadow: 0 0 0 4px var(--inps-ring);
}

/* `height: 200px` aus display-structure abräumen, sonst greift min-height nicht. */
.nf-form-cont textarea.nf-element {
	height: auto;
	min-height: 11rem;
	resize: vertical;
}

/* Auswahlfeld: eigener Pfeil, weil `appearance: none` den System-Pfeil entfernt.
   Inline-SVG (URL-kodiert) in accent-1, damit keine zusätzliche Datei nötig ist. */
.nf-form-cont select.nf-element {
	padding-inline-end: 3rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23255869' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.15rem center;
	cursor: pointer;
}

.nf-form-cont select.nf-element::-ms-expand {
	display: none;
}

/* Solange die leere Platzhalter-Option gewählt ist ("Bitte wählen"), soll das
   Feld wie ein Platzhalter aussehen und nicht wie eine getroffene Auswahl.
   Greift nur, wenn im Feld eine Option mit leerem Wert existiert. */
.nf-form-cont select.nf-element:has(option[value=""]:checked) {
	color: color-mix(in srgb, var(--wp--preset--color--accent-4) 75%, transparent);
}

.nf-form-cont select.nf-element option {
	color: var(--wp--preset--color--contrast);
}

/* Ankreuzfelder und Auswahllisten */
.nf-form-cont .nf-field-element input[type="checkbox"],
.nf-form-cont .nf-field-element input[type="radio"] {
	width: 1.15rem !important;
	height: 1.15rem;
	margin-block-start: 0.3em;
	accent-color: var(--wp--preset--color--accent-1);
}

.nf-form-cont .listcheckbox-wrap li,
.nf-form-cont .listradio-wrap li {
	margin-block-end: 0.6rem !important;
}

/* --- Absendeknopf ------------------------------------------------------- */

.nf-form-cont .submit-container input[type="button"],
.nf-form-cont .submit-container input[type="submit"],
.nf-form-cont .submit-container button {
	width: 100%;
	min-height: 3.375rem;
	padding: 1rem 2.25rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--custom-pure-white);
	background-color: var(--wp--preset--color--accent-2);
	border: 0;
	border-radius: var(--inps-feld-radius);
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.nf-form-cont .submit-container input[type="button"]:hover,
.nf-form-cont .submit-container input[type="submit"]:hover,
.nf-form-cont .submit-container button:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 85%, transparent);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px -12px rgba(41, 46, 51, 0.55);
}

.nf-form-cont .submit-container input[type="button"]:focus-visible,
.nf-form-cont .submit-container button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-4);
	outline-offset: 2px;
}

.nf-form-cont .submit-container input[type="button"]:active {
	transform: translateY(0);
}

/* Während des Absendens setzt Ninja Forms `disabled`. */
.nf-form-cont .nf-element[disabled],
.nf-form-cont .submit-container input[disabled] {
	opacity: 0.55;
	cursor: progress;
	transform: none;
	box-shadow: none;
}

/* --- Pflichtfeld-Hinweis ------------------------------------------------ */

.nf-form-cont .nf-form-fields-required {
	margin-block-end: 1.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-4);
}

/* --- Fehler --------------------------------------------------------------
   Die Fehlermeldung liegt in `.nf-after-field` bzw. in `.field-wrap`; im
   Flex-Kontext von `.field-wrap` fehlt ihr eine `order`, sie stünde sonst
   noch vor der Beschriftung. */

.nf-form-cont .field-wrap .nf-error-wrap {
	order: 20;
	width: 100%;
}

.nf-form-cont .nf-error .nf-element,
.nf-form-cont .nf-element.nf-error {
	border-color: var(--inps-fehler);
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-3) 5%, var(--wp--preset--color--custom-pure-white));
}

.nf-form-cont .nf-error .nf-element:focus {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--accent-3) 18%, transparent);
}

.nf-form-cont .nf-error-msg {
	margin-block-start: 0.45rem;
	padding-inline-start: 0.7rem;
	border-inline-start: 3px solid var(--inps-fehler);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	color: color-mix(in srgb, var(--wp--preset--color--accent-3) 80%, var(--wp--preset--color--contrast));
}

.nf-form-cont .nf-form-errors {
	margin-block-end: 1.25rem;
}

.nf-form-cont .nf-form-errors .nf-error-msg {
	margin-block-start: 0;
	padding: 0.85rem 1rem;
	border-inline-start-width: 4px;
	border-radius: 0 var(--inps-feld-radius) var(--inps-feld-radius) 0;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-3) 9%, transparent);
	font-size: 1rem;
}

/* --- Bestätigung nach dem Absenden -------------------------------------- */

.nf-form-cont .nf-response-msg {
	padding: 1.5rem 1.65rem;
	border-inline-start: 4px solid var(--wp--preset--color--accent-2);
	border-radius: 0 var(--inps-feld-radius) var(--inps-feld-radius) 0;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-2) 10%, transparent);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

.nf-form-cont .nf-response-msg p:last-child {
	margin-block-end: 0;
}

/* --- Auftritt ------------------------------------------------------------
   Ninja Forms baut das Formular per JavaScript nachträglich ein; die Felder
   erscheinen sonst schlagartig. Je nach Version hängt `.nf-field-container`
   direkt unter `.nf-form-content` oder in einem `<nf-field>` - deshalb unten
   jeweils beide Varianten. */

@media (prefers-reduced-motion: no-preference) {
	.nf-form-cont .nf-field-container,
	.nf-form-cont .nf-response-msg {
		animation: inps-feld-auf 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
	}

	.nf-form-cont .nf-form-content > :nth-child(2) .nf-field-container,
	.nf-form-cont .nf-form-content > .nf-field-container:nth-child(2) {
		animation-delay: 0.06s;
	}

	.nf-form-cont .nf-form-content > :nth-child(3) .nf-field-container,
	.nf-form-cont .nf-form-content > .nf-field-container:nth-child(3) {
		animation-delay: 0.12s;
	}

	.nf-form-cont .nf-form-content > :nth-child(4) .nf-field-container,
	.nf-form-cont .nf-form-content > .nf-field-container:nth-child(4) {
		animation-delay: 0.18s;
	}

	.nf-form-cont .nf-form-content > :nth-child(n + 5) .nf-field-container,
	.nf-form-cont .nf-form-content > .nf-field-container:nth-child(n + 5) {
		animation-delay: 0.24s;
	}
}

@keyframes inps-feld-auf {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* --- Schmale Bildschirme ------------------------------------------------ */

@media (max-width: 600px) {
	.nf-form-cont {
		border-radius: 0.75em;
	}

	.nf-form-cont .nf-field-container {
		margin-block-end: 1.35rem;
	}
}

/* --- Ankreuzfelder -------------------------------------------------------
   Ninja Forms richtet Kästchen und Beschriftung je nach eingestellter
   Label-Position unterschiedlich aus; bei langem Text rutscht die Beschriftung
   unter das Kästchen. Hier wird die Anordnung für alle Ankreuzfelder
   vereinheitlicht: Kästchen links, Text daneben, oben bündig. */

.nf-form-cont .checkbox-wrap .field-wrap {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 0.75rem;
}

.nf-form-cont .checkbox-wrap .nf-field-element {
	order: 5;
	flex: none;
	width: auto;
	margin: 0;
}

.nf-form-cont .checkbox-wrap .nf-field-label {
	order: 10;
	flex: 1;
	width: auto;
	margin: 0;
}

/* Fliesstext statt Fettschrift: diese Beschriftungen sind ganze Sätze. */
.nf-form-cont .checkbox-wrap .nf-field-label label {
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.45;
	cursor: pointer;
}

/* Grösse und Farbe des Kästchens stehen weiter oben bei "Ankreuzfelder und
   Auswahllisten" - hier nur, was für einzelne Ankreuzfelder dazukommt. */
.nf-form-cont .checkbox-wrap input[type="checkbox"] {
	cursor: pointer;
}

.nf-form-cont .checkbox-wrap input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

/* Ankreuzfelder gehören enger zusammen als Eingabefelder. */
.nf-form-cont .checkbox-wrap.nf-field-container {
	margin-block-end: 0.9rem;
}

/* --- Datenschutzhinweis unter dem Formular -------------------------------
   Steht als eigener Block direkt unter der Formularkarte (siehe functions.php,
   Abschnitt 1c) und übernimmt deren Breite, damit beides als eine Einheit
   gelesen wird. Bewusst zurückhaltend: der Hinweis soll auffindbar sein, aber
   dem Formular nicht die Aufmerksamkeit nehmen. */

.inps-datenschutz {
	box-sizing: border-box;
	max-width: var(--inps-formular-breite);
	margin: 1.75rem auto 0;
	padding: 1.15rem 1.4rem;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 5%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent);
	border-radius: 0.75em;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 80%, transparent);
}

.inps-datenschutz p {
	margin: 0;
}

.inps-datenschutz a {
	color: var(--wp--preset--color--accent-1);
	text-underline-offset: 0.2em;
}

/* Aufklapper: der Pfeil des Browsers wird ersetzt, damit er zur Optik der
   Auswahlfelder passt (gleiches Chevron, gleiche Farbe). */

.inps-datenschutz__mehr {
	margin-block-start: 0.7rem;
}

.inps-datenschutz__mehr summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--accent-1);
}

.inps-datenschutz__mehr summary::-webkit-details-marker {
	display: none;
}

.inps-datenschutz__mehr summary::before {
	content: "";
	flex: none;
	width: 0.7rem;
	height: 0.45rem;
	background-color: currentColor;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transition: transform 0.2s ease;
}

.inps-datenschutz__mehr[open] summary::before {
	transform: rotate(-180deg);
}

.inps-datenschutz__mehr summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 3px;
	border-radius: 3px;
}

.inps-datenschutz__text {
	display: grid;
	gap: 0.85rem;
	margin-block-start: 0.85rem;
	padding-block-start: 0.85rem;
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1) 15%, transparent);
}

.inps-datenschutz__text strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
	.inps-datenschutz__mehr[open] .inps-datenschutz__text {
		animation: inps-feld-auf 0.3s cubic-bezier(0.2, 0.7, 0.3, 1) both;
	}
}

@media (max-width: 600px) {
	.inps-datenschutz {
		border-radius: 0.6em;
		padding: 1rem 1.1rem;
	}
}