/* ============================================================================
   CONTACT FORM  v1.0.0  (assets/css/contact-form.css)
   Styling für das Plugin "Clean and Simple Contact Form" (cscf) auf der
   Seite /contact — geladen NUR dort via functions.php (Shortcode-Erkennung
   [cscf-contact-form]).

   Kontext: In den Plugin-Optionen ist Bootstrap-CSS deaktiviert und
   "Theme Native" aktiviert. Das Markup behält aber die Bootstrap-3-
   Klassennamen (.form-group, .form-control, .btn, .help-block, .has-error)
   — nur ohne zugehöriges CSS. Ergebnis: browser-native Mini-Inputs.
   Diese Datei liefert das fehlende Styling, optisch abgestimmt auf
   wp-email-form.css (gleiche Grautöne, Radius 6px, Focus in country-teal,
   Submit in link-blue).

   Selektoren bewusst defensiv: Wo möglich Element-Selektoren unterhalb
   von #cscf, damit exakte Plugin-Klassennamen (versionsabhängig) keine
   Rolle spielen.
   ============================================================================ */

/* ── Wrapper ─────────────────────────────────────────────────────────────────
   Fund (Juli 2026): Direkte Kinder von .is-layout-constrained erhalten von
   WP-Core margin-left/right:auto !important → ein 600px-Block würde in der
   ~800px-Content-Spalte ZENTRIERT statt links am Textfluss ausgerichtet.
   Daher margin-left/right:0 !important als gezielter Gegen-Override. */
#cscf {
	width: 100%;
	max-width: 600px;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Fieldset/Legend: Browser-Defaults (Rahmen, Einzug) neutralisieren */
#cscf fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0; /* Fieldset-Eigenheit: verhindert Overflow in Flex/Grid-Kontexten */
}

#cscf legend {
	padding: 0;
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600; /* Theme-Standard (Semibold) statt Browser-bold 700 */
	line-height: 1.3;
}

/* ── Feldgruppen ── */
#cscf .form-group {
	margin: 0 0 1rem;
}

#cscf label {
	display: block;
	margin: 0 0 0.15rem;
	font-weight: 600;
}

/* ── Eingabefelder ──
   font-size ≥ 16px (1rem) verhindert den automatischen Zoom-auf-Fokus
   in iOS Safari. width:100% + box-sizing egalisiert size=""-Attribute. */
#cscf input[type="text"],
#cscf input[type="email"],
#cscf input[type="tel"],
#cscf select,
#cscf textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.45rem 0.6rem;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	background-color: #fff;
	color: #374151;
	font-family: inherit;
	font-size: 1rem; /* ≥16px: verhindert iOS-Zoom-auf-Fokus */
	line-height: 1.4;
}

#cscf input[type="text"]:focus,
#cscf input[type="email"]:focus,
#cscf input[type="tel"]:focus,
#cscf select:focus,
#cscf textarea:focus {
	outline: 2px solid var(--wp--preset--color--country-teal);
	outline-offset: 1px;
	border-color: #9ca3af;
}

#cscf textarea {
	min-height: 180px;
	resize: vertical; /* horizontales Aufziehen würde das Layout sprengen */
}

/* ── Absende-Button ── (Optik identisch zum WP-EMail-Submit) */
#cscf input[type="submit"],
#cscf button[type="submit"] {
	display: inline-block;
	width: auto;
	padding: 0.55rem 1.4rem;
	border: none;
	border-radius: 6px;
	background-color: var(--wp--preset--color--link-blue);
	background-image: none;
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

#cscf input[type="submit"]:hover,
#cscf button[type="submit"]:hover {
	opacity: 0.88;
}

#cscf input[type="submit"]:focus-visible,
#cscf button[type="submit"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--country-teal);
	outline-offset: 2px;
}

#cscf input[type="submit"]:disabled,
#cscf button[type="submit"]:disabled {
	opacity: 0.5;
	cursor: default;
}

/* ── Validierung / Fehlermeldungen ──
   Serverseitig rendert cscf Fehler als .help-block innerhalb der
   .form-group (Bootstrap-3-Muster, Gruppe erhält .has-error);
   clientseitig (jQuery Validate) als <label class="error">. Beide
   Varianten abgedeckt. */
#cscf .help-block,
#cscf label.error {
	display: block;
	margin: 0.15rem 0 0;
	color: var(--wp--preset--color--culture-red);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400; /* Fehlertext nicht fett — Label darüber ist bereits 600 */
}

#cscf .has-error input,
#cscf .has-error textarea,
#cscf input.error,
#cscf textarea.error {
	border-color: var(--wp--preset--color--culture-red);
}

/* ── Statusmeldungen (gesendet / nicht gesendet) ──
   cscf nutzt Bootstrap-Alert-Klassen im Bestätigungs-Markup. */
#cscf .alert {
	box-sizing: border-box;
	margin: 0 0 1rem;
	padding: 0.65rem 0.9rem;
	border: 1px solid transparent;
	border-radius: 6px;
}

#cscf .alert-success {
	border-color: #b7dfb9;
	background-color: #edf7ee;
	color: var(--wp--preset--color--vacation-green);
}

#cscf .alert-danger,
#cscf .alert-error {
	border-color: #e7b3b3;
	background-color: #fbeeee;
	color: var(--wp--preset--color--culture-red);
}

/* ── reCAPTCHA (falls aktiviert): Abstand zum Submit ── */
#cscf .g-recaptcha {
	margin: 0 0 1rem;
}