/*
 * Haus Fück – Weihnachts-Bestellformulare
 * Farbwelt aus Plakat und Flyer: Dunkelblau, Rot, Gold.
 */

.hfe {
	--hfe-blue: #1c3f7a;
	--hfe-blue-dark: #16305c;
	--hfe-red: #c8102e;
	--hfe-gold: #d19b26;
	--hfe-ink: #1c2b4a;
	--hfe-muted: #5b6b88;
	--hfe-line: #d8dee9;
	--hfe-bg: #f6f8fb;
	--hfe-radius: 10px;

	/*
	 * Basis-Schriftgröße des Formulars. Alle Größen darin sind in em angegeben
	 * und rechnen gegen diesen Wert – NICHT gegen die html-Schriftgröße. Themes
	 * wie Bricks setzen html oft auf 62.5% (= 10px); rem-Angaben wären dort
	 * deutlich zu klein. Zum Anpassen genügt es, diese Variable zu überschreiben:
	 *   .hfe { --hfe-font-size: 17px; }
	 */
	--hfe-font-size: 16px;

	/* Einheitlicher vertikaler Abstand zwischen Feldern und Feldzeilen. */
	--hfe-gap: 18px;

	color: var(--hfe-ink);
	font-size: var(--hfe-font-size);
	line-height: 1.5;
	max-width: 900px;
	margin: 0 auto;
	scroll-margin-top: 100px;
}

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

/* ---------- Kopf ---------- */

.hfe-head {
	border-bottom: 3px solid var(--hfe-blue);
	padding-bottom: 16px;
	margin-bottom: 24px;
}

.hfe-head__title {
	color: var(--hfe-blue);
	font-size: clamp(1.6em, 4vw, 2.4em);
	margin: 0 0 4px;
	line-height: 1.15;
}

.hfe-head__subtitle {
	color: var(--hfe-muted);
	margin: 0 0 12px;
	font-size: 1.05em;
}

.hfe-head__notes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.hfe-head__notes li {
	position: relative;
	padding-left: 20px;
	font-size: 0.92em;
	color: var(--hfe-muted);
}

.hfe-head__notes li::before {
	content: "★";
	position: absolute;
	left: 0;
	color: var(--hfe-gold);
}

/* ---------- Gruppen ---------- */

.hfe-fieldset {
	border: 1px solid var(--hfe-line);
	border-radius: var(--hfe-radius);
	padding: 20px;
	margin: 0 0 24px;
	background: #fff;
	min-width: 0;
}

.hfe-legend {
	font-weight: 700;
	color: var(--hfe-blue);
	font-size: 1.15em;
	padding: 0 8px;
	margin-left: -8px;
}

.hfe-intro {
	margin: 0 0 var(--hfe-gap);
	color: var(--hfe-muted);
	font-size: 0.92em;
}

.hfe-fieldset--dependent {
	border-style: dashed;
}

.hfe-fieldset--dependent.is-locked {
	opacity: 0.55;
	background: var(--hfe-bg);
}

.hfe-dependent-hint {
	background: #fff5f6;
	border-left: 4px solid var(--hfe-red);
	padding: 10px 12px;
	margin: 0 0 var(--hfe-gap);
	font-size: 0.9em;
}

/* ---------- Positionen ---------- */

.hfe-items {
	display: grid;
	gap: 10px;
}

.hfe-item {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border: 1px solid var(--hfe-line);
	border-radius: var(--hfe-radius);
	background: var(--hfe-bg);
	transition: border-color 0.15s ease, background 0.15s ease;
}

.hfe-item.is-selected {
	border-color: var(--hfe-blue);
	background: #fff;
	box-shadow: inset 3px 0 0 var(--hfe-blue);
}

.hfe-item__info {
	display: grid;
	gap: 2px;
	flex: 1 1 260px;
	min-width: 0;
}

.hfe-item__label {
	font-weight: 700;
	color: var(--hfe-blue-dark);
}

.hfe-item__includes {
	font-size: 0.85em;
	color: var(--hfe-muted);
}

.hfe-item__price {
	font-weight: 700;
	color: var(--hfe-red);
	margin-top: 2px;
}

.hfe-item__unit {
	font-weight: 400;
	color: var(--hfe-muted);
	font-size: 0.85em;
}

/* ---------- Mengensteuerung ---------- */

.hfe-stepper {
	display: flex;
	align-items: stretch;
	flex: 0 0 auto;
	/*
	 * Der Rahmen sitzt auf der Gruppe, nicht auf den einzelnen Knöpfen.
	 * So gibt es keine doppelten Kanten, keine Rundungsfehler an den Ecken
	 * und beim Überfahren springt nichts.
	 */
	border: 1px solid var(--hfe-line);
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}

.hfe-stepper__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5em;
	min-height: 2.5em;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--hfe-blue);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.hfe-stepper__btn svg {
	display: block;
	width: 0.85em;
	height: 0.85em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.hfe-stepper__btn:hover {
	background: var(--hfe-blue);
	color: #fff;
}

.hfe-stepper__btn:focus-visible {
	outline: 2px solid var(--hfe-blue);
	outline-offset: -2px;
}

.hfe-stepper__input {
	width: 3.2em;
	align-self: stretch;
	line-height: 1.4;
	text-align: center;
	/* Nur Trennstriche nach links und rechts – oben/unten trägt die Gruppe. */
	border: 0;
	border-left: 1px solid var(--hfe-line);
	border-right: 1px solid var(--hfe-line);
	border-radius: 0;
	font-size: 1em;
	font-family: inherit;
	font-weight: 700;
	color: var(--hfe-ink);
	background: transparent;
	-moz-appearance: textfield;
	appearance: textfield;
}

.hfe-stepper__input:focus {
	outline: 2px solid var(--hfe-blue);
	outline-offset: -2px;
}

.hfe-stepper__input::-webkit-outer-spin-button,
.hfe-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ---------- Auswahlkacheln (Buffet-Termine) ---------- */

.hfe-choice {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px;
	border: 2px solid var(--hfe-line);
	border-radius: var(--hfe-radius);
	background: var(--hfe-bg);
	cursor: pointer;
}

.hfe-choice:has(input:checked) {
	border-color: var(--hfe-blue);
	background: #fff;
}

.hfe-choice input {
	margin-top: 4px;
	flex: 0 0 auto;
}

.hfe-choice__body {
	display: grid;
	gap: 2px;
}

.hfe-choice__title {
	font-weight: 700;
	color: var(--hfe-blue-dark);
}

.hfe-choice__meta {
	font-size: 0.88em;
	color: var(--hfe-muted);
}

/* ---------- Formularfelder ---------- */

.hfe-grid {
	display: grid;
	gap: var(--hfe-gap);
	/*
	 * Auch mehrspaltige Zeilen brauchen einen Abstand nach unten – sonst
	 * ergibt sich der Abstand zum nächsten Feld nur zufällig aus der
	 * Zeilenhöhe des folgenden Labels.
	 */
	margin: 0 0 var(--hfe-gap);
}

/* Letztes Element einer Gruppe: kein doppelter Abstand zum Rahmen. */
.hfe-fieldset > *:last-child {
	margin-bottom: 0;
}

@media (min-width: 620px) {
	.hfe-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.hfe-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.hfe-field {
	margin: 0 0 var(--hfe-gap);
	display: grid;
	gap: 4px;
	/* Zeilen nicht auf Containerhöhe aufblasen. */
	align-content: start;
}

.hfe-field span a {
	color: #1c3f7a;
}

.hfe-grid .hfe-field {
	margin-bottom: 0;
}

/*
 * In mehrspaltigen Zeilen dürfen sich die Felder nicht gegenseitig strecken:
 * sonst schiebt ein Feld mit Hinweistext das Nachbarfeld nach unten.
 * Auswahlkacheln (.hfe-choice) bleiben bewusst gleich hoch.
 */
.hfe-grid > .hfe-field {
	align-self: start;
}

.hfe-field label,
.hfe-label {
	font-weight: 600;
	font-size: 0.92em;
}

.hfe-field abbr {
	color: var(--hfe-red);
	text-decoration: none;
	border: 0;
}

.hfe-optional {
	font-weight: 400;
	color: var(--hfe-muted);
	font-size: 0.85em;
}

.hfe-field input[type="text"],
.hfe-field input[type="email"],
.hfe-field input[type="tel"],
.hfe-field input[type="date"],
.hfe-field input[type="number"],
.hfe-field select,
.hfe-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--hfe-line);
	border-radius: 8px;
	font-size: 1em;
	font-family: inherit;
	/*
	 * Eigene Zeilenhöhe setzen: Bricks & Co. vererben Formularfeldern teils
	 * eine feste line-height (z. B. 40px), wodurch die Felder unnötig hoch werden.
	 */
	line-height: 1.4;
	color: var(--hfe-ink);
	background: #fff;
	min-height: 0;
}

.hfe-field textarea {
	line-height: 1.5;
	min-height: 0;
	resize: vertical;
}

/*
 * Einzeilige Felder exakt gleich hoch: Datumsfelder und Auswahlmenüs rendern
 * nativ 1–2 px höher als Textfelder, was nebeneinander unruhig wirkt.
 * Angabe in em, damit sie mit --hfe-font-size mitwächst.
 */
.hfe-field input[type="text"],
.hfe-field input[type="email"],
.hfe-field input[type="tel"],
.hfe-field input[type="date"],
.hfe-field input[type="number"],
.hfe-field select {
	height: 2.85em;
}

.hfe-field input:focus,
.hfe-field select:focus,
.hfe-field textarea:focus {
	outline: 2px solid var(--hfe-blue);
	outline-offset: 1px;
	border-color: var(--hfe-blue);
}

.hfe-field--error input,
.hfe-field--error select,
.hfe-field--error textarea {
	border-color: var(--hfe-red);
	background: #fff7f8;
}

.hfe-hint {
	font-size: 0.82em;
	color: var(--hfe-muted);
}

.hfe-radio,
.hfe-check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 8px 0;
	font-weight: 400;
	font-size: 0.94em;
	cursor: pointer;
}

.hfe-radio input,
.hfe-check input {
	margin-top: 3px;
	flex: 0 0 auto;
}

/* ---------- Summe ---------- */

.hfe-total {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 4px 16px;
	background: var(--hfe-blue);
	color: #fff;
	padding: 16px 20px;
	border-radius: var(--hfe-radius);
	margin: 24px 0 16px;
	box-shadow: 0 6px 20px rgba(28, 63, 122, 0.25);
}

.hfe-total__label {
	font-weight: 600;
}

.hfe-total__value {
	font-size: 1.6em;
	font-weight: 800;
	color: #ffd97a;
	white-space: nowrap;
}

.hfe-total__hint {
	grid-column: 1 / -1;
	font-size: 0.8em;
	opacity: 0.85;
}

/* ---------- Absenden ---------- */

.hfe-submit {
	display: block;
	width: 100%;
	padding: 14px 24px;
	line-height: 1.3;
	background: var(--hfe-red);
	color: #fff;
	border: 0;
	border-radius: var(--hfe-radius);
	font-size: 1.1em;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
}

.hfe-submit:hover {
	background: #a80d26;
}

.hfe-submit[disabled] {
	background: var(--hfe-muted);
	cursor: not-allowed;
}

.hfe-note {
	font-size: 0.85em;
	color: var(--hfe-muted);
	margin: 12px 0 0;
}

/* ---------- Meldungen ---------- */

.hfe-errors {
	background: #fff5f6;
	border: 1px solid var(--hfe-red);
	border-left-width: 5px;
	border-radius: 8px;
	padding: 14px 16px;
	margin: 0 0 20px;
}

.hfe-errors ul {
	margin: 8px 0 0;
	padding-left: 20px;
}

.hfe-success {
	background: #fff;
	border: 1px solid var(--hfe-line);
	border-top: 5px solid var(--hfe-gold);
	border-radius: var(--hfe-radius);
	padding: 24px;
}

.hfe-success h2 {
	color: var(--hfe-blue);
	margin-top: 0;
}

.hfe-summary {
	background: var(--hfe-bg);
	border-radius: var(--hfe-radius);
	padding: 16px;
	margin: 20px 0;
}

.hfe-summary h3 {
	margin: 0 0 4px;
	color: var(--hfe-blue);
}

.hfe-summary__meta {
	margin: 0 0 12px;
	color: var(--hfe-muted);
}

.hfe-table {
	width: 100%;
	border-collapse: collapse;
}

.hfe-table td,
.hfe-table th {
	padding: 6px 4px;
	border-bottom: 1px solid var(--hfe-line);
	text-align: left;
	vertical-align: top;
}

.hfe-table__price {
	text-align: right;
	white-space: nowrap;
}

.hfe-table tfoot th {
	border-bottom: 0;
	border-top: 2px solid var(--hfe-blue);
	font-size: 1.05em;
}

.hfe-contactline {
	color: var(--hfe-muted);
	font-size: 0.9em;
}

/* ---------- Ausgebucht und geschlossene Formulare ---------- */

.hfe-badge {
	display: inline-block;
	align-self: start;
	margin: 2px 0;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background: var(--hfe-red);
	color: #fff;
}

.hfe-badge--past {
	background: var(--hfe-muted);
}

.hfe-badge--closed {
	font-size: 0.85em;
}

.hfe-choice--soldout {
	opacity: 0.65;
	cursor: not-allowed;
	background: var(--hfe-bg);
	border-style: dashed;
}

.hfe-choice--soldout .hfe-choice__title {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.hfe-choice--soldout input {
	cursor: not-allowed;
}

.hfe-closed {
	border: 1px solid var(--hfe-line);
	border-left: 5px solid var(--hfe-red);
	border-radius: var(--hfe-radius);
	background: #fff;
	padding: 20px;
}

.hfe-closed p {
	margin: 10px 0 0;
}

/* ---------- Entscheidungsseite (bestätigen / ablehnen) ---------- */

.hfe-badge--ok {
	background: #1a7f37;
	font-size: 0.85em;
}

.hfe-decide {
	margin-top: 20px;
}

.hfe-decide__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 4px;
}

.hfe-decide__actions .hfe-submit {
	width: auto;
	flex: 1 1 200px;
}

.hfe-submit--ok {
	background: #1a7f37;
}

.hfe-submit--ok:hover {
	background: #14672c;
}

.hfe-submit--no {
	background: #fff;
	color: var(--hfe-red);
	border: 1px solid var(--hfe-red);
}

.hfe-submit--no:hover {
	background: var(--hfe-red);
	color: #fff;
}

/* ---------- Verweis auf ein anderes Formular ---------- */

.hfe-linkcard {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border: 1px solid var(--hfe-line);
	border-left: 5px solid var(--hfe-gold);
	border-radius: var(--hfe-radius);
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hfe-linkcard:hover,
.hfe-linkcard:focus-visible {
	border-color: var(--hfe-blue);
	border-left-color: var(--hfe-blue);
	box-shadow: 0 4px 14px rgba(28, 63, 122, 0.12);
}

.hfe-linkcard__body {
	display: grid;
	gap: 2px;
	flex: 1 1 260px;
	min-width: 0;
}

.hfe-linkcard__title {
	font-weight: 700;
	font-size: 1.1em;
	color: var(--hfe-blue);
}

.hfe-linkcard__text {
	font-size: 0.9em;
	color: var(--hfe-muted);
}

.hfe-linkcard__price {
	font-weight: 700;
	color: var(--hfe-red);
	margin-top: 2px;
}

.hfe-linkcard__action,
.hfe-linkbutton {
	display: inline-block;
	flex: 0 0 auto;
	padding: 11px 20px;
	border-radius: 8px;
	background: var(--hfe-red);
	color: #fff;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

.hfe-linkcard:hover .hfe-linkcard__action,
.hfe-linkbutton:hover {
	background: #a80d26;
	color: #fff;
}

.hfe-textlink {
	font-weight: 600;
	color: #1c3f7a;
}

/* ---------- Honeypot ---------- */

.hfe-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}