/*
 * DFP Kontaktformular
 *
 * Der Look der Contact-Seite: durchsichtige Felder, weiße Haarlinien,
 * Source Code Pro, gelber Knopf. Jede Farbe und jedes Maß hängt an einer
 * CSS-Variablen – in Bricks lässt sich damit alles am Element überschreiben,
 * ohne diese Datei anzufassen.
 */

.dfp-cf {
	/* Farben */
	--dfp-cf-color: var(--white, #fff);
	--dfp-cf-placeholder: var(--white, #fff);
	--dfp-cf-placeholder-opacity: 1;
	--dfp-cf-line: var(--white, #fff);
	--dfp-cf-line-width: 1px;
	--dfp-cf-accent: var(--bricks-color-primary, #ffd64f);
	--dfp-cf-accent-text: var(--black, #000);
	--dfp-cf-error: var(--dfp-orange, #ff7a45);

	/* Schrift */
	--dfp-cf-font: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, monospace;
	--dfp-cf-size: 20px;
	--dfp-cf-weight: 600;

	/* Maße */
	--dfp-cf-pad-x: 15px;
	--dfp-cf-pad-y: 10px;
	--dfp-cf-min-row: 3.4em;
	--dfp-cf-button-gap: 24px;

	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	color: var(--dfp-cf-color);
	font-family: var(--dfp-cf-font);
	font-size: var(--dfp-cf-size);
	font-weight: var(--dfp-cf-weight);
	line-height: 1.3;
}

/* Rahmen oben und links wie in der Section FORM. */
.dfp-cf--frame {
	border-top: var(--dfp-cf-line-width) solid var(--dfp-cf-line);
	border-left: var(--dfp-cf-line-width) solid var(--dfp-cf-line);
}

.dfp-cf__form {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	margin: 0;
}

/* ── Felder ───────────────────────────────────────────────────────────── */

.dfp-cf__row {
	display: flex;
	flex-direction: column;
	min-height: var(--dfp-cf-min-row);
	min-width: 0;
	/* Das ganze Band ist anklickbar (siehe dfp-contact-form.js). */
	cursor: text;
}

/* Felder füllen die Spalte gleichmäßig aus; die Nachricht bekommt doppelt
   so viel Platz wie eine einzeilige Zeile. */
.dfp-cf--fill .dfp-cf__row {
	flex: 1 1 0;
}

.dfp-cf--fill .dfp-cf__row--message {
	flex-grow: 2;
}

.dfp-cf--lines .dfp-cf__row {
	border-bottom: var(--dfp-cf-line-width) solid var(--dfp-cf-line);
}

.dfp-cf__label {
	padding: var(--dfp-cf-pad-y) var(--dfp-cf-pad-x) 0;
	font-size: 0.7em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.7;
}

/* Vorgabe ist der Look der Contact-Seite: nur Platzhalter, keine
   Beschriftung – die bleibt für Screenreader da. */
.dfp-cf:not(.dfp-cf--labels) .dfp-cf__label {
	position: absolute;
	overflow: hidden;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	white-space: nowrap;
}

/*
 * Einzeilige Felder bleiben oben im Band stehen, so wie im Entwurf: ein
 * hochgezogenes <input> würde seinen Text senkrecht mittig setzen, und das
 * lässt sich an einem Eingabefeld nicht steuern. Der leere Rest des Bandes
 * bleibt trotzdem anklickbar.
 */
.dfp-cf__input {
	flex: 0 0 auto;
	width: 100%;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: var(--dfp-cf-pad-y) var(--dfp-cf-pad-x);
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	-webkit-appearance: none;
	appearance: none;
}

/* Das mehrzeilige Feld füllt sein Band – dort steht der Text von oben. */
.dfp-cf__textarea {
	display: block;
	flex: 1 1 auto;
	overflow: auto;
	resize: none;
}

.dfp-cf__input:focus,
.dfp-cf__input:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Sichtbarer Fokus, ohne den Rahmen des Feldes zu ändern: das Band wird hell. */
.dfp-cf__row:focus-within {
	background: color-mix(in srgb, var(--dfp-cf-line) 8%, transparent);
}

.dfp-cf__input::placeholder {
	color: var(--dfp-cf-placeholder);
	opacity: var(--dfp-cf-placeholder-opacity);
}

/* Autofill von Chrome überschreibt sonst Hintergrund und Schriftfarbe. */
.dfp-cf__input:-webkit-autofill,
.dfp-cf__input:-webkit-autofill:hover,
.dfp-cf__input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--dfp-cf-color);
	caret-color: var(--dfp-cf-color);
	transition: background-color 9999s;
}

/* Feld, das beim Absenden leer war. */
.dfp-cf__row.has-error {
	background: color-mix(in srgb, var(--dfp-cf-error) 18%, transparent);
}

.dfp-cf__req {
	margin-left: 0.2em;
}

/* ── Einwilligung ─────────────────────────────────────────────────────── */

.dfp-cf__row--consent {
	flex: 0 0 auto;
	min-height: 0;
}

.dfp-cf__consent {
	display: flex;
	gap: 0.6em;
	align-items: flex-start;
	padding: var(--dfp-cf-pad-y) var(--dfp-cf-pad-x);
	font-size: 0.6em;
	line-height: 1.4;
	cursor: pointer;
}

.dfp-cf__consent input {
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	margin: 0.15em 0 0;
	accent-color: var(--dfp-cf-accent);
}

.dfp-cf__consent a {
	color: inherit;
	text-underline-offset: 0.2em;
}

/* ── Knopf ────────────────────────────────────────────────────────────── */

.dfp-cf__actions {
	display: flex;
	flex: 0 0 auto;
	justify-content: var(--dfp-cf-button-align, flex-end);
	padding: var(--dfp-cf-button-gap) var(--dfp-cf-pad-x);
}

.dfp-cf__submit {
	display: inline-flex;
	gap: 0.6em;
	align-items: center;
	padding: 0.55em 1.4em;
	border: 0;
	border-radius: 0;
	background: var(--dfp-cf-accent);
	color: var(--dfp-cf-accent-text);
	font-family: inherit;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

/*
 * Bild statt gezeichnetem Knopf: derselbe <button type="submit">, nur ohne
 * Farbe, Polsterung und Schrift. Das Bild bringt seine eigene Form mit.
 */
.dfp-cf__submit--image {
	padding: 0;
	background: none;
	color: inherit;
	line-height: 0;
}

.dfp-cf__submit-img {
	display: block;
	width: var(--dfp-cf-button-image-width, 180px);
	max-width: 100%;
	height: auto;
}

/* ── Bewegung beim Überfahren ─────────────────────────────────────────── */

.dfp-cf__submit:hover,
.dfp-cf--hover-lift .dfp-cf__submit:hover {
	transform: translateY(-2px);
}

.dfp-cf--hover-grow .dfp-cf__submit:hover {
	transform: scale(1.04);
}

.dfp-cf--hover-fade .dfp-cf__submit:hover {
	transform: none;
	opacity: 0.75;
}

.dfp-cf--hover-none .dfp-cf__submit:hover {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.dfp-cf__submit,
	.dfp-cf__submit:hover {
		transform: none;
		transition: none;
	}
}

.dfp-cf__submit:focus-visible {
	outline: 2px solid var(--dfp-cf-color);
	outline-offset: 3px;
}

.dfp-cf.is-sending .dfp-cf__submit {
	opacity: 0.6;
	pointer-events: none;
}

/* Kleiner Punktlauf im Knopf, solange gesendet wird. */
.dfp-cf.is-sending .dfp-cf__submit-text::after {
	content: "…";
}

/* ── Honigtopf ────────────────────────────────────────────────────────── */

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

/* ── Meldung ──────────────────────────────────────────────────────────── */

.dfp-cf__message {
	display: none;
	padding: var(--dfp-cf-pad-y) var(--dfp-cf-pad-x);
	font-size: 0.8em;
	line-height: 1.4;
}

.dfp-cf__message.is-visible {
	display: block;
}

.dfp-cf__message--error {
	color: var(--dfp-cf-error);
}

/* Nach dem Absenden steht die Meldung anstelle des Formulars. */
.dfp-cf.is-done .dfp-cf__form {
	display: none;
}

.dfp-cf.is-done .dfp-cf__message {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	font-size: 1em;
}

/* ── Platz im Bricks-Layout ───────────────────────────────────────────── */

/*
 * In der Section FORM steht das Element als zweite Spalte in einem Container
 * mit `flex-direction: row`. Ohne Breitenangabe schrumpft der Bricks-Wrapper
 * dort auf Inhaltsbreite – dieselbe Falle wie beim Coverflow.
 *
 * `width: 100%` statt `flex: 1`: der Textblock daneben ist ein Bricks-Block
 * und hat selbst `width: 100%`. Zwei Geschwister mit 100% teilen sich die
 * Zeile zu gleichen Teilen – genau die halbe Spalte, die dort vorher stand.
 * Mit `flex: 1 1 0` bliebe für dieses Element nichts übrig. In Bricks lässt
 * sich die Breite am Element überschreiben.
 */
.brxe-dfp-contact-form {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	width: 100%;
	min-width: 0;
}

.brxe-dfp-contact-form > .dfp-cf {
	flex: 1 1 auto;
	min-height: 0;
}

/* ── Handy ────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.dfp-cf {
		--dfp-cf-size: 16px;
		--dfp-cf-min-row: 3em;
		--dfp-cf-button-gap: 20px;
	}

	/* Gleichmäßig verteilen ergibt auf dem Handy riesige leere Bänder. */
	.dfp-cf--fill .dfp-cf__row {
		flex: 0 0 auto;
	}

	/*
	 * Gestapelt steht das Formular über die volle Breite; die senkrechte
	 * Linie links hätte dann nichts mehr, wovon sie trennt.
	 */
	.dfp-cf--frame {
		border-left: 0;
	}

	.dfp-cf--fill .dfp-cf__row--message .dfp-cf__input {
		min-height: 7em;
	}
}