/* Kontaktformular im Look der alten Site: Felder nur mit Unterlinie,
   Labels in gesperrten Versalien, umrandeter Knopf. Gehört zum Modul
   inc/formulare.php; deploy.sh rollt es aus.

   Breakdance rendert seine Felder über eigene CSS-Variablen (--bde-form-*),
   die seine form.css konsumiert. Eigene Regeln für dieselben Eigenschaften
   verlieren gegen die per-Instanz-Regeln oder überdecken die Steuerung
   ganz (Skill wp-breakdance-site, breakdance-mcp.md, Fallstrick 1c).
   Deshalb hier die VARIABLEN, wo es welche gibt. */
.breakdance-form {
	--bde-form-input-background-color: transparent;
	--bde-form-input-focused-background-color: transparent;
	--bde-form-input-padding-top: 10px;
	--bde-form-input-padding-bottom: 10px;
	--bde-form-input-padding-left: 0;
	--bde-form-input-padding-right: 0;
	--bde-form-text-color: #ffffff;
	--bde-form-label-color: #8A8A8A;
	/* Breakdances Stern-Rot erreicht auf Schwarz keine 4,5:1. */
	--bde-form-label-required-color: #3D74FF;
	--bde-form-checkbox-selected-color: #3D74FF;
	--bde-form-after-label: 6px;
	--bde-form-gap: 28px;
}

/* Nur die Unterlinie. Die Rand-Variablen von Breakdance greifen hier
   nicht (gemessen: Rand blieb #d1d5db rundum), deshalb direkt und mit
   `form.` eine Stufe spezifischer als form.css. */
form.breakdance-form .breakdance-form-field__input {
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: #767676;
	border-radius: 0;
	box-shadow: none;
}

/* Fokus als 2-px-Linie: 1 px Rand plus 1 px Schatten darunter. */
form.breakdance-form .breakdance-form-field__input:focus {
	border-color: #3D74FF;
	box-shadow: 0 1px 0 0 #3D74FF;
	outline: none;
}

/* Breakdance legt das Formular als 12-Spalten-Raster an, jedes Feld mit
   `span 12`. Die Breiten aus set-element-form (`width: 6`) kommen im
   Markup nicht an; Name/Firma und E-Mail/Telefon stehen deshalb hier
   paarweise. */
.breakdance-form .breakdance-form-field:has(#name),
.breakdance-form .breakdance-form-field:has(#firma),
.breakdance-form .breakdance-form-field:has(#email),
.breakdance-form .breakdance-form-field:has(#telefon) {
	grid-column-start: span 6;
}

@media (max-width: 767px) {
	.breakdance-form .breakdance-form-field:has(#name),
	.breakdance-form .breakdance-form-field:has(#firma),
	.breakdance-form .breakdance-form-field:has(#email),
	.breakdance-form .breakdance-form-field:has(#telefon) {
		grid-column-start: span 12;
	}
}

.breakdance-form .breakdance-form-field__label {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* Schriftfamilie und -grösse: dafür gibt es keine Breakdance-Variable.
   16px verhindert das Zoomen beim Antippen auf iOS. */
.breakdance-form .breakdance-form-field__input {
	font-family: inherit;
	font-size: 16px;
}

.breakdance-form textarea.breakdance-form-field__input {
	min-height: 140px;
}

.breakdance-form .breakdance-form-radio {
	min-height: 44px;
	gap: 12px;
}

.breakdance-form .breakdance-form-radio__text {
	color: #ffffff;
	font-size: 16px;
}

/* Honigtopf: für Menschen und Screenreader weg, für Bots im DOM.
   clip-path statt display:none, weil manche Bots display:none prüfen. */
.breakdance-form-field:has(#kp_hp) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	pointer-events: none;
}

/* Der Knopf trägt die Optik von .kpg-knopf. Element-qualifiziert, weil
   Breakdance seine Vorgabe ebenfalls über button.<klasse> setzt; der
   Text liegt in einem eigenen <span> und braucht die Farbe extra. */
button.breakdance-form-button {
	min-height: 48px;
	padding: 14px 32px;
	border: 1px solid #ffffff;
	border-radius: 0;
	background: transparent;
	color: #ffffff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

button.breakdance-form-button .button-atom__text {
	color: inherit;
}

button.breakdance-form-button:hover {
	background: #ffffff;
	color: #000000;
}

button.breakdance-form-button:focus-visible {
	outline: 2px solid #3D74FF;
	outline-offset: 3px;
}

@media (max-width: 767px) {
	button.breakdance-form-button {
		width: 100%;
	}
}