/**
 * Feld-Styling fuer das echte Gravity-Forms-Registrierungsformular -
 * Werte 1:1 aus dem freigegebenen Klickdummy uebernommen (docs/
 * klickdummies/registrierung-webseite-klickdummy.html), aber gegen den
 * TATSAECHLICHEN Ausgabe-Quellcode des Formulars aufgesetzt (Cwicly-
 * Theme + Gravity Forms "gravity-theme"-Framework), nicht gegen
 * generische GF-Annahmen.
 *
 * SCOPING: bewusst auf #reg (die Cwicly-Shortcode-Huelle um dieses
 * EINE Formular) statt auf .gform_wrapper global - andere Gravity-
 * Forms-Formulare auf der Seite (Kontakt, o. Ae.) bleiben unberuehrt.
 * Falls dasselbe Design auf weitere Formulare soll: Selektoren unten
 * zusaetzlich unter der jeweiligen Huelle duplizieren, nicht #reg durch
 * .gform_wrapper ersetzen (sonst site-weite Nebenwirkungen).
 *
 * Kopf/Beschreibungstext (.ct-headline, .ct-text-block) werden bewusst
 * NICHT angefasst - die traegt bereits die globale Typo des Cwicly-
 * Themes, keine Vermischung mit forms-spezifischem CSS.
 *
 * !important nur dort, wo das "gravity-theme"-Framework von Gravity
 * Forms selbst mit hoher Spezifitaet dagegenhaelt (Button-Optik) -
 * ueberall sonst reicht die Scoping-Spezifitaet von #reg aus.
 */

#reg .gform_wrapper {
	margin: 0;
}

#reg .gform_heading {
	margin-bottom: 4px;
}

/* Honeypot-Feld ("URL") ist Anti-Spam, nie fuer Menschen gedacht -
   defensiv ausblenden, falls das Theme das GF-eigene Core-CSS dafuer
   nicht laedt (Cwicly bindet i. d. R. nur das "gravity-theme"-Framework,
   nicht zwingend gravityforms/css/formreset.css). */
#reg .gfield--type-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ============ FELD-ABSTAND ============ */

#reg .gform_fields {
	display: block;
	row-gap: 0;
}

#reg .gfield {
	margin-bottom: 18px;
}

/* ============ LABELS ============ */

#reg .gfield_label,
#reg .gfield_label.gfield_label_before_complex {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: #2b2b2b;
	margin-bottom: 7px;
}

#reg .gfield_required {
	margin-left: 4px;
}

#reg .gfield_required_text {
	color: #d81e5b;
	font-weight: 400;
	font-size: 13px;
}

/* ============ TEXT-/E-MAIL-/PASSWORT-EINGABEN ============ */

#reg .ginput_container input[type="text"],
#reg .ginput_container input[type="email"],
#reg .ginput_container_password input[type="password"] {
	width: 100%;
	min-height: 50px;
	padding: 0 14px;
	font-size: 16px;
	color: #000;
	border: 1.5px solid #e2e2e2;
	border-radius: 10px;
	background: #fff;
	outline: none;
	box-shadow: none;
}

#reg .ginput_container input[type="text"]:focus,
#reg .ginput_container input[type="email"]:focus,
#reg .ginput_container_password input[type="password"]:focus {
	border-color: #173753;
}

/* ============ PASSWORT-FELD: Anzeigen/Verbergen-Button ============ */

/* Das "gravity-theme"-Framework legt auf .ginput_container_password ein
   zweispaltiges Grid (Passwort + Passwort-Bestaetigung). Wir haben nur
   EIN Feld - ohne Abschalten landet der Auge-Button in der leeren
   zweiten Spalte und wirkt dadurch mittig im Feld. display:block macht
   den Container wieder zum simplen Positionskontext fuer den absolut
   platzierten Button. */
#reg .ginput_container_password {
	display: block !important;
	position: relative;
}

#reg .password_input_container {
	display: block !important;
	position: relative;
}

#reg .ginput_container_password input[type="password"],
#reg .ginput_container_password input[type="text"] {
	width: 100%;
	padding-right: 48px;
}

/* BUGFIX 28.08.2026: "right" fehlte bisher das !important - eine
   Oxygen-Global-CSS-Regel (.gform_show_password { right: calc(50% -
   28px) !important; }, site-weit, vermutlich fuer ein anderes Formular
   gedacht) hat dadurch bei jeder Feldbreite gewonnen und das Icon
   rechnerisch mittig statt rechtsbuendig platziert - je breiter das
   Feld, desto sichtbarer der Effekt (bei 800px Feldbreite besonders
   deutlich). #reg hat zwar hoehere Spezifitaet, aber Spezifitaet zaehlt
   erst NACH !important - ohne eigenes !important zieht die
   Oxygen-Regel trotzdem. Die Oxygen-Regel selbst bewusst NICHT
   angefasst, falls sie fuer ein anderes Gravity-Forms-Passwortfeld auf
   der Seite noch gebraucht wird. */
#reg .gform_show_password {
	position: absolute !important;
	right: 2px !important;
	left: auto !important;
	top: 50%;
	transform: translateY(-50%);
	min-width: 44px;
	width: 44px;
	height: 44px;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #595959;
}

#reg .gf_clear_complex {
	display: none;
}

/* ============ EINWILLIGUNG (Consent) ============ */

#reg .gfield--type-consent {
	border: 0;
	padding: 0;
	margin: 4px 0 0;
}

#reg .gfield--type-consent > legend.gfield_label {
	margin-bottom: 10px;
}

#reg .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

#reg .ginput_container_consent input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: #173753;
	flex: none;
}

#reg .gfield_consent_label,
#reg .gform-field-label--type-inline {
	font-size: 14px;
	color: #595959;
	line-height: 1.5;
}

#reg .gfield_consent_label a {
	color: #2c7a86;
}

/* ============ CLOUDFLARE TURNSTILE ============ */

#reg .ginput_container_turnstile {
	margin-top: 4px;
}

/* ============ ABSENDEN-BUTTON ============ */

#reg .gform_footer {
	margin-top: 22px;
	padding: 0;
}

#reg .gform_button.button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	background: #d81e5b !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 10px !important;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	box-shadow: none !important;
}

#reg .gform_button.button:hover,
#reg .gform_button.button:focus {
	background: #c01a52 !important;
}

/* ============ VALIDIERUNGSFEHLER ============ */

#reg .gfield_error input {
	border-color: #c0392b !important;
}

#reg .validation_message,
#reg .gfield_validation_message {
	font-size: 14px;
	color: #a23232;
	margin-top: 6px;
}

#reg .gform_validation_errors {
	background: #fdecec;
	border: 1px solid #f5c7c7;
	border-radius: 12px;
	padding: 12px 14px;
	color: #a23232;
	font-size: 14px;
	margin-bottom: 20px;
}