/**
 * Formulare und Einbettungen – Brevo, TidyCal und das SureForms-Kontaktformular.
 *
 * Angelegt am 17.09.2026 fuer den Relaunch. Die Datei greift ausschliesslich
 * die drei Einbettungen ab; alles Weitere bleibt in den bestehenden Dateien.
 * Grundregel wie im uebrigen Projekt: Werte kommen aus den Tokens in
 * 00-tokens.css, hier stehen nur Bezuege darauf.
 */

/* =====================================================================
   Gemeinsamer Rahmen fuer eingebettete Fremdinhalte
   ===================================================================== */

/* Der frueher genutzte gestrichelte Platzhalterrahmen faellt weg, sobald
   echter Inhalt drinsteht – sonst wirkt die fertige Seite unfertig.
   Doppelte Klasse, weil .cz-einbettung in 97-bausteine.css spaeter geladen
   wird und bei gleicher Spezifitaet gewaenne. */
.cz-einbettung.cz-einbettung--gefuellt {
	border: 0;
	padding: 0;
	background: none;
	text-align: left;
}

.cz-einbettung.cz-einbettung--gefuellt .cz-einbettung__titel {
	margin-bottom: 0.9rem;
	font-size: var(--cz-h4);
}

/* =====================================================================
   Brevo-Newsletterformular (Seite „Newsletter")
   ===================================================================== */

/* Helle Karte unter der blauen Vorteilsleiste. */
.cz-brevo {
	/* Das Formular ist innen nur rund 540 px breit, der Rest waere
	   grauer Brevo-Hintergrund. Die Karte bleibt deshalb schmaler als
	   die Vorteilsleiste darueber – das wirkt als bewusste Abstufung
	   statt als Rahmen um leere Flaeche. */
	max-width: 42rem;
	margin: 0 auto 1rem;
	padding: clamp(0.6rem, 2vw, 1rem);
	border-radius: var(--cz-radius-l);
	background: var(--cz-weiss);
	box-shadow: var(--cz-schatten-s);
}

/* Der iframe kommt aus Brevo mit width="540" height="305" – beide Masse
   sind viel zu klein. Das Formular enthaelt Einleitungstext, ein Bild und
   drei Felder. Weil es von einer fremden Domain kommt, kann es seine
   Hoehe nicht selbst melden; sie muss hier fest stehen.

   Gemessen am 19.09.2026 an der Unterkante des tiefsten Elements im
   Formular (nicht am Anmelden-Knopf – darunter liegt noch Innenabstand):

     Viewport   iframe   noetig
     ab 1024     600      1086
        768      547      1110
        560      518      1129
        480      441      1173
        430      393      1232
        360      324      1347

   Die Werte unten liegen rund 30 px darueber. „scrolling=auto" am iframe
   bleibt als Sicherheitsnetz, falls Brevo den Text aendert – dann gehoeren
   diese Zahlen nachgemessen. */
.cz-brevo iframe {
	display: block;
	width: 100%;
	height: 1140px;
	border: 0;
	border-radius: var(--cz-radius-m);
}

@media (min-width: 1024px) {
	.cz-brevo iframe {
		height: 1120px;
	}
}

@media (max-width: 599px) {
	.cz-brevo iframe {
		height: 1200px;
	}
}

@media (max-width: 479px) {
	.cz-brevo iframe {
		height: 1265px;
	}
}

@media (max-width: 429px) {
	.cz-brevo iframe {
		height: 1380px;
	}
}

/* =====================================================================
   TidyCal-Kalender (Seite „Kontakt")
   ===================================================================== */
.cz-einbettung.cz-tidycal {
	min-height: 520px;
}

/* Vor dem Laden ist „.tidycal-embed" ein leeres div, danach ersetzt das
   Skript des Anbieters es durch einen iframe mit derselben Klasse. Beide
   Zustaende muessen in die Spalte passen. */
.cz-tidycal .tidycal-embed {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 520px;
	border: 0;
	border-radius: var(--cz-radius-m);
	overflow: hidden;
}

/* =====================================================================
   Kontaktformular (SureForms)
   ===================================================================== */
.cz-formular .srfm-form-container {
	padding: 0;
	background: none;
}

.cz-formular .srfm-block-label,
.cz-formular label.srfm-cbx {
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
	color: var(--cz-text);
}

.cz-formular .srfm-required {
	color: var(--cz-orange-braun);
}

.cz-formular .srfm-input-common:not([type="checkbox"]) {
	width: 100%;
	padding: 0.75em 1em;
	border: 1px solid var(--cz-linie);
	border-radius: var(--cz-radius-s);
	background: var(--cz-weiss);
	color: var(--cz-text);
	font-family: inherit;
	font-size: var(--cz-text-basis);
	line-height: 1.5;
	transition: border-color var(--cz-dauer-kurz) var(--cz-easing),
		box-shadow var(--cz-dauer-kurz) var(--cz-easing);
}

.cz-formular textarea.srfm-input-common {
	min-height: 9rem;
	resize: vertical;
}

.cz-formular .srfm-input-common:focus {
	outline: none;
	border-color: var(--cz-orange-braun);
	box-shadow: 0 0 0 3px rgba(178, 94, 2, 0.15);
}

.cz-formular .srfm-input-common::placeholder {
	color: var(--cz-warmgrau-hell);
}

/* Datenschutz-Zustimmung: kleiner als die Feldbeschriftungen, der Link
   bleibt erkennbar unterstrichen. */
.cz-formular .srfm-gdpr-block .srfm-block-label {
	font-family: inherit;
	font-weight: 400;
	font-size: var(--cz-text-klein);
	color: var(--cz-warmgrau);
}

.cz-formular .srfm-gdpr-block a {
	color: var(--cz-orange-braun);
	text-decoration: underline;
}

/* Absendeknopf im Stil der uebrigen Buttons – gleiche Form, gleicher
   Verlauf, gleiche Bewegung. */
.cz-formular .srfm-submit-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.9em 2em;
	border: 0;
	border-radius: var(--cz-radius-pill);
	background: var(--cz-verlauf-orange-weich);
	color: var(--cz-weiss);
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	cursor: pointer;
	transition: transform var(--cz-dauer) var(--cz-easing),
		box-shadow var(--cz-dauer) var(--cz-easing);
}

.cz-formular .srfm-submit-button:hover,
.cz-formular .srfm-submit-button:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--cz-schatten-farbig);
	background: linear-gradient(135deg, var(--cz-orange-braun) 0%, #8f4b01 100%);
	color: var(--cz-weiss);
}

/* Erfolgs- und Fehlermeldung in den Farben der Seite. */
.cz-formular .srfm-success-box-description {
	color: var(--cz-text);
}

.cz-formular .srfm-error-message,
.cz-formular .srfm-common-error-message {
	font-size: var(--cz-text-klein);
}

/* Auf schmalen Geraeten darf nichts aus der Spalte laufen. */
@media (max-width: 600px) {
	.cz-formular .srfm-submit-button {
		width: 100%;
	}
}