/* WS Form an die CI der Bio-Imkerei Hörster angleichen.
   WS Form ist selbst über CSS-Variablen gebaut — die zu überschreiben ist
   stabiler, als gegen seine Selektoren anzuschreiben. Die Werte kommen aus
   den Design-Token des Themes, damit Formular und Seite zusammenbleiben.
   Die doppelte Klasse hebt die Spezifität über die Vorgaben des Plugins. */
.wsf-form.wsf-form-canvas {
	/* Grundfarben und Schrift */
	--wsf-form-color-primary: var(--wp--preset--color--main);
	--wsf-form-color-base: var(--wp--preset--color--main);
	--wsf-form-color-base-contrast: var(--wp--preset--color--base);
	--wsf-form-color-secondary: var(--wp--preset--color--secondary);
	--wsf-form-color-neutral: var(--wp--preset--color--secondary);
	--wsf-form-color-accent: var(--wp--preset--color--main);
	--wsf-form-font-family: var(--wp--preset--font-family--rubik);
	--wsf-form-font-size: 0.95rem;
	--wsf-form-font-size-small: 0.875rem;
	--wsf-form-font-weight: 300;

	/* Eingabefelder: getönte Fläche, ein Radius für alles */
	--wsf-field-border-radius: var(--wp--custom--border-radius--md);
	--wsf-field-border-color: transparent;
	--wsf-field-border-color-hover: var(--wp--preset--color--border-dark);
	--wsf-field-border-color-focus: var(--wp--preset--color--main);
	--wsf-field-border-width: 1px;
	--wsf-field-color-background: rgba(0, 0, 0, 0.04);
	--wsf-field-color: var(--wp--preset--color--main);
	--wsf-field-padding-horizontal: 0.8em;
	--wsf-field-padding-vertical: 0.55em;
	--wsf-field-box-shadow-width-focus: 3px;
	--wsf-field-box-shadow-color-focus: var(--wp--preset--color--main);

	/* Schaltflächen wie die Buttons im Entwurf */
	--wsf-field-button-color-background: var(--wp--preset--color--main);
	--wsf-field-button-color-background-hover: var(--wp--preset--color--secondary);
	--wsf-field-button-color-background-focus: var(--wp--preset--color--secondary);
	--wsf-field-button-color: var(--wp--preset--color--main-accent);
	--wsf-field-button-color-hover: var(--wp--preset--color--main-accent);
	--wsf-field-button-color-focus: var(--wp--preset--color--main-accent);
	--wsf-field-button-border-color: var(--wp--preset--color--main);
	--wsf-field-button-border-color-hover: var(--wp--preset--color--secondary);
	--wsf-field-button-border-color-focus: var(--wp--preset--color--secondary);
	--wsf-field-button-border-radius: var(--wp--custom--border-radius--md);
}

/* Das Raster von WS Form zieht seine Zeilen mit -10 px aus dem Container
   heraus und verlässt sich darauf, dass außen 10 px Polsterung stehen.
   In Ollie ist die nicht da — die Seite ragt sonst nach rechts hinaus. */
.wsf-form .wsf-grid {
	flex-wrap: wrap;
	margin-left: 0;
	margin-right: 0;
}

/* Flex-Kacheln müssen unter ihre Inhaltsbreite schrumpfen dürfen, sonst
   sprengt eine lange Beschriftung die Zeile. */
.wsf-form .wsf-tile {
	min-width: 0;
}

.wsf-form button,
.wsf-form input[type="submit"] {
	max-width: 100%;
	white-space: normal;
}

/* Beschriftungen wie die Kleinlabels im Entwurf */
.wsf-form.wsf-form-canvas label,
.wsf-form.wsf-form-canvas legend {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

/* Schaltflächen tragen dieselbe Versalsetzung wie die Buttons der Seite.
   WS Form rendert je nach Feldtyp button, input oder a — daher alle drei. */
.wsf-form.wsf-form-canvas button,
.wsf-form.wsf-form-canvas input[type="submit"],
.wsf-form.wsf-form-canvas input[type="button"],
.wsf-form.wsf-form-canvas a.wsf-button,
.wsf-form.wsf-form-canvas .wsf-button {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}

/* Summen rechtsbündig und ohne Feldoptik — sie sind Ausgabe, keine Eingabe */
.wsf-form input.hoerster-summe {
	text-align: right;
}

/* Reiter der beiden Schritte */
.wsf-form .wsf-tabs a {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}

.wsf-form .wsf-tabs .wsf-tab-active a {
	color: var(--wp--preset--color--main);
}

/* Sichtbarer Tastaturfokus. WS Form setzt hier nur einen sehr blassen
   Schatten — für die Bedienung ohne Maus reicht das nicht (WCAG 2.4.7).
   Die doppelte Klasse hebt die Regel über die Vorgaben des Plugins. */
.wsf-form.wsf-form-canvas input:focus-visible,
.wsf-form.wsf-form-canvas select:focus-visible,
.wsf-form.wsf-form-canvas textarea:focus-visible,
.wsf-form.wsf-form-canvas button:focus-visible,
.wsf-form.wsf-form-canvas a:focus-visible,
.wsf-form.wsf-form-canvas [tabindex]:focus-visible {
	/* WS Form setzt den Rahmen mit hoeherem Gewicht zurueck. Beim Fokus ist
	   das keine Geschmacksfrage, deshalb hier ausnahmsweise !important. */
	outline: 3px solid var(--wp--preset--color--main) !important;
	outline-offset: 2px !important;
}

/* Auf dunklen Schaltflächen braucht der Rahmen Abstand zur Fläche,
   sonst verschwindet er im Schwarz. */
.wsf-form.wsf-form-canvas button:focus-visible,
.wsf-form.wsf-form-canvas .wsf-button:focus-visible {
	outline-offset: 3px !important;
}

/* Produktzeile: Bild, Name und Preis stehen zusammen, damit Menge und
   Summe daneben schmal bleiben können. */
.wsf-form .hoerster-produkt {
	align-items: center;
	display: flex;
	gap: 1rem;
}

.wsf-form .hoerster-produktbild {
	border-radius: var(--wp--custom--border-radius--md);
	flex: none;
	/* 128 px, damit das Etikett lesbar bleibt */
	height: 8rem;
	object-fit: cover;
	width: 8rem;
}

.wsf-form .hoerster-produktname {
	display: block;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	line-height: 1.3;
}

.wsf-form .hoerster-produktpreis {
	color: var(--wp--preset--color--secondary);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.15em;
}

/* Menge und Summe auf gleicher Höhe wie die Produktzeile */
.wsf-form .wsf-field-wrapper {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}

.wsf-form .wsf-field-wrapper > * {
	width: 100%;
}

/* Das Formular braucht nicht die volle Inhaltsbreite — schmaler liest es sich
   ruhiger und die Zeilen bleiben überschaubar. */
.wsf-form.wsf-form-canvas {
	max-width: 75%;
}

@media (max-width: 781.98px) {
	.wsf-form.wsf-form-canvas {
		max-width: 100%;
	}
}

/* Summen sind Ausgabe, keine Eingabe: als Text setzen, nicht als Feld.
   Die Klasse kommt aus den Feldeinstellungen, WS Form vergibt von sich aus
   keine typbezogene Klasse am Wrapper. */
.wsf-form input.hoerster-summe {
	/* Ueber die Variablen statt ueber Eigenschaften: WS Form liest sie in
	   eigenen, spezifischeren Regeln aus — so gewinnt die Reihenfolge nicht. */
	--wsf-field-border-color: transparent;
	--wsf-field-border-width: 0;
	--wsf-field-color-background: transparent;
	--wsf-field-padding-horizontal: 0;
	font-weight: 500;
}

/* Zeilen im Sortiment enger stellen */
.wsf-form .hoerster-produkt {
	gap: 1.25rem;
}

/* --- Luft zwischen den Zeilen --- */
/* Die Felder einer Produktzeile liegen auf derselben Flex-Zeile, der
   Zeilenabstand trennt also genau die Produkte voneinander — und auf
   schmalen Schirmen zusaetzlich Bild von Menge. */
.wsf-form .wsf-grid.wsf-fields {
	row-gap: 1.75rem;
}

/* Und Abstand zwischen Sortiment, Kundendaten und Uebersicht */
.wsf-form .wsf-section {
	margin-bottom: 3rem;
}

.wsf-form .wsf-section:last-child {
	margin-bottom: 0;
}

/* Die Abschnittsueberschrift bekommt Platz nach unten */
.wsf-form .wsf-section > legend {
	margin-bottom: 1rem;
}

/* --- Schrittnavigation --- */
/* Links zurueck als Umriss, rechts weiter gefuellt. Die Klasse kommt aus den
   Feldeinstellungen; ueber die Variablen gesetzt, damit die Spezifitaet der
   Plugin-Regeln egal bleibt. */
.wsf-form button.hoerster-zurueck {
	--wsf-field-button-border-color: var(--wp--preset--color--border-dark);
	--wsf-field-button-border-color-focus: var(--wp--preset--color--main);
	--wsf-field-button-border-color-hover: var(--wp--preset--color--main);
	--wsf-field-button-border-width: 1px;
	--wsf-field-button-color: var(--wp--preset--color--main);
	--wsf-field-button-color-background: transparent;
	--wsf-field-button-color-background-focus: transparent;
	--wsf-field-button-color-background-hover: transparent;
	--wsf-field-button-color-focus: var(--wp--preset--color--main);
	--wsf-field-button-color-hover: var(--wp--preset--color--main);
}

/* --- Lightbox der Produktbilder --- */
.wsf-form .hoerster-produktbild[role="button"] {
	cursor: zoom-in;
}

.wsf-form .hoerster-produktbild:focus-visible {
	outline: 3px solid var(--wp--preset--color--main);
	outline-offset: 3px;
}

.hoerster-lightbox {
	align-items: center;
	background-color: rgba(0, 0, 0, 0.85);
	display: flex;
	inset: 0;
	justify-content: center;
	padding: var(--wp--preset--spacing--large);
	position: fixed;
	z-index: 100000;
}

.hoerster-lightbox__bild {
	border-radius: var(--wp--custom--border-radius--md);
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.hoerster-lightbox__zu {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	inset-block-start: var(--wp--preset--spacing--medium);
	inset-inline-end: var(--wp--preset--spacing--medium);
	line-height: 0;
	padding: 0.5rem;
	position: absolute;
}

.hoerster-lightbox__zu:focus-visible {
	outline: 3px solid var(--wp--preset--color--base);
	outline-offset: 3px;
}