/* ===================================================================
   Styling fuer EXT:form-Formulare (TYPO3 Formular-Framework).
   Das Website-Theme stylt nur Powermail-Formulare (.tx-powermail) und
   setzt Eingabefelder per Reset zurueck - daher hier eigene Regeln,
   passend zum Website-Design (Lato, Aquaroc-Blau).
   Greift nur auf Formular-Inhaltselemente (.frame-type-form_formframework).
   =================================================================== */
/* aquaroc_sitepackage, 01.11.2026: Jede Regel endet auf
     :where(:not(.tx-powermail, .tx-powermail *))
   Sie gilt damit nicht im Kontaktformular (/kontakt/, kontakt.form.yaml), das powermail-Markup ausgibt
   (div.tx-powermail) und wie bisher von style.css gestaltet wird. :where() hat keine Spezifität, für alle
   anderen Formulare (Seite 40 Bewerbung Ellzee) bleibt die Kaskade unverändert.
   Siehe docs/FORM-KONTAKT-2026-11-01.md. */
/* Schriftart erzwingen: Labels, Hilfetexte und Checkbox-Text erben sonst
   die Serif-Standardschrift des Browsers (das Theme setzt fuer <label>
   keine Schrift). Lato ist die Schrift der Website. */
.frame-type-form_formframework,
.frame-type-form_formframework *:where(:not(.tx-powermail, .tx-powermail *)) {
	font-family: "Lato", Arial, Helvetica, sans-serif;
}

.frame-type-form_formframework form:where(:not(.tx-powermail, .tx-powermail *)) { max-width: 620px; }

.frame-type-form_formframework fieldset:where(:not(.tx-powermail, .tx-powermail *)) {
	border: 0; margin: 0; padding: 0; min-width: 0;
}
.frame-type-form_formframework legend:where(:not(.tx-powermail, .tx-powermail *)) { display: none; }

.frame-type-form_formframework .form-group:where(:not(.tx-powermail, .tx-powermail *)),
.frame-type-form_formframework .form-element:where(:not(.tx-powermail, .tx-powermail *)) { margin-bottom: 20px; }

.frame-type-form_formframework label:where(:not(.tx-powermail, .tx-powermail *)),
.frame-type-form_formframework .form-label:where(:not(.tx-powermail, .tx-powermail *)) {
	display: block; font-weight: 700; font-size: 1rem;
	margin-bottom: 6px; color: #262626;
}

.frame-type-form_formframework input[type="text"]:where(:not(.tx-powermail, .tx-powermail *)),
.frame-type-form_formframework input[type="email"]:where(:not(.tx-powermail, .tx-powermail *)),
.frame-type-form_formframework input[type="tel"]:where(:not(.tx-powermail, .tx-powermail *)),
.frame-type-form_formframework input[type="number"]:where(:not(.tx-powermail, .tx-powermail *)),
.frame-type-form_formframework textarea:where(:not(.tx-powermail, .tx-powermail *)) {
	display: block; width: 100%; box-sizing: border-box;
	padding: 11px 14px;
	border: 1px solid #b5b5b5; border-radius: 5px;
	background: #fff; color: #333;
	font: 400 1rem/1.45 "Lato", sans-serif;
	-webkit-appearance: none; appearance: none;
}
.frame-type-form_formframework textarea:where(:not(.tx-powermail, .tx-powermail *)) {
	min-height: 120px; resize: vertical;
}
.frame-type-form_formframework input:focus:where(:not(.tx-powermail, .tx-powermail *)),
.frame-type-form_formframework textarea:focus:where(:not(.tx-powermail, .tx-powermail *)) {
	border-color: #00779f;
	box-shadow: 0 0 0 1px #00779f;
}

/* Pflichtfeld-Stern */
.frame-type-form_formframework .required:where(:not(.tx-powermail, .tx-powermail *)) { color: #0092C3; margin-left: 2px; }

/* Feldbeschreibung / Hilfetext */
.frame-type-form_formframework .form-text:where(:not(.tx-powermail, .tx-powermail *)),
.frame-type-form_formframework .help-block:where(:not(.tx-powermail, .tx-powermail *)),
.frame-type-form_formframework .help-text:where(:not(.tx-powermail, .tx-powermail *)) {
	font-size: 0.85rem; color: #777; margin-top: 5px;
}

/* DSGVO-Checkbox: Checkbox + Text liegen im <label> */
.frame-type-form_formframework .form-check:where(:not(.tx-powermail, .tx-powermail *)) { margin: 22px 0; }
.frame-type-form_formframework .form-check-label:where(:not(.tx-powermail, .tx-powermail *)),
.frame-type-form_formframework .form-check label:where(:not(.tx-powermail, .tx-powermail *)) {
	display: flex; gap: 11px; align-items: flex-start;
	font-weight: 400; font-size: 0.95rem; line-height: 1.5;
	margin: 0; color: #262626; cursor: pointer;
}
/* aquaroc_sitepackage, EXT:form 14: Checkbox steht vor dem <label> in div.form-check-wrapping-label
   (bis TYPO3 12 lag sie im <label>). Gleiche Anordnung wie zuvor. */
.frame-type-form_formframework .form-check-wrapping-label:where(:not(.tx-powermail, .tx-powermail *)) {
	display: flex; gap: 11px; align-items: flex-start; margin: 22px 0;
}
.frame-type-form_formframework input[type="checkbox"]:where(:not(.tx-powermail, .tx-powermail *)) {
	width: 20px; height: 20px; flex: none; margin: 1px 0 0;
	accent-color: #0092C3;
}

/* Absende-Button */
.frame-type-form_formframework button:where(:not(.tx-powermail, .tx-powermail *)),
.frame-type-form_formframework input[type="submit"]:where(:not(.tx-powermail, .tx-powermail *)) {
	display: inline-block; cursor: pointer;
	padding: 14px 34px;
	border: 2px solid #0092C3; border-radius: 5px;
	background: #0092C3; color: #fff;
	font: 700 1rem/1.2 "Lato", sans-serif;
	text-transform: uppercase; letter-spacing: 0.03em;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.frame-type-form_formframework button:hover:where(:not(.tx-powermail, .tx-powermail *)),
.frame-type-form_formframework input[type="submit"]:hover:where(:not(.tx-powermail, .tx-powermail *)) {
	background: #fff; color: #0092C3;
}
.frame-type-form_formframework .actions:where(:not(.tx-powermail, .tx-powermail *)) { margin-top: 6px; }

/* Validierungsfehler */
.frame-type-form_formframework .has-error input:where(:not(.tx-powermail, .tx-powermail *)),
.frame-type-form_formframework .has-error textarea:where(:not(.tx-powermail, .tx-powermail *)) { border-color: #c0392b; }
.frame-type-form_formframework .error:where(:not(.tx-powermail, .tx-powermail *)),
.frame-type-form_formframework .help-block.error:where(:not(.tx-powermail, .tx-powermail *)),
.frame-type-form_formframework ul[class*="error"]:where(:not(.tx-powermail, .tx-powermail *)) {
	color: #c0392b; font-size: 0.86rem;
	list-style: none; margin: 6px 0 0; padding: 0;
}

/* Bestaetigungsmeldung nach dem Absenden */
.frame-type-form_formframework div[id^="bewerbung-ellzee"]:not(:has(form)):where(:not(.tx-powermail, .tx-powermail *)) {
	font-size: 1.1rem; line-height: 1.6; color: #262626;
}