/* ==========================================================================
   Bewerbung (T60)
   Ausgabe: mu-plugins/hac-bewerbung.php
   1. Link-Modul [hac_bewerbung] bzw. Elementor-Baustein „HAC Bewerbung"
   2. Kopf der Seite /team/bewerbung/
   3. Zusaetze im Formular (Teamkarten, ausgeblendete Zusatzfragen)
   Grundgestaltung des Formulars kommt aus hac-formulare/formulare.css.
   Keine :root-Variablen setzen – nur am Modul selbst.
   ========================================================================== */

/* ── 1. LINK-MODUL ──────────────────────────────────────────────────────── */

.hac-bewerbung {
	--hac-bw-grund:       var(--hac-flaeche, var(--hac-farbe-gruen-hell, #f4f6f2));
	--hac-bw-rand:        var(--hac-linie, #dcdfd6);
	--hac-bw-text:        var(--hac-schrift, var(--hac-farbe-text, #333333));
	--hac-bw-titel:       var(--hac-schrift-stark, var(--hac-farbe-text-dunkel, #1a1a1a));
	--hac-bw-leise:       var(--hac-schrift-leise, var(--hac-farbe-text-leise, #6b6b6b));
	--hac-bw-akzent:      var(--hac-schrift-gruen, var(--hac-farbe-gruen-tief, #4d5f3b));
	--hac-bw-knopf:       var(--hac-farbe-gruen-dunkel, #667d4f); /* Weiss darauf 4,6:1 */
	--hac-bw-knopf-hover: var(--hac-farbe-gruen-tief, #4d5f3b);
	--hac-bw-knopf-text:  #ffffff; /* fest: Weiss auf Knopf */
	--hac-bw-karte:       var(--hac-flaeche-erhoeht, #ffffff);
	--hac-bw-karte-rand:  var(--hac-linie, #dcdfd6);
	container-type: inline-size;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px 48px;
	margin: 0;
	padding: 36px 40px;
	background: var(--hac-bw-grund);
	border: 1px solid var(--hac-bw-rand);
	border-left: 6px solid var(--hac-farbe-gruen, #bac6ae);
	border-radius: 8px;
	color: var(--hac-bw-text);
	text-align: left;
}

/* Elektro: Knopf Blau mit weisser Schrift – bewusste Ausnahme (Tim, 24.09.2026). */
.hac-bewerbung--elektro {
	--hac-bw-akzent:      var(--hac-schrift-blau, var(--hac-farbe-blau-dunkel, #0363c3));
	--hac-bw-knopf:       var(--hac-farbe-blau, #1d89f6);
	--hac-bw-knopf-hover: var(--hac-farbe-blau-dunkel, #0363c3);
	border-left-color: var(--hac-farbe-blau, #1d89f6);
}

/* Stil „gruen" (Standard, Tim 14.10.2026): Flaeche Salbeigruen #BAC6AE, Schrift
   schwarz (#1A1A1A darauf 9,1:1), Knopf schwarz mit weisser Schrift. Nie Weiss
   auf Gruen (1,8:1). */
.hac-bewerbung--gruen {
	--hac-bw-grund:       var(--hac-farbe-gruen, #bac6ae);
	--hac-bw-rand:        var(--hac-farbe-gruen, #bac6ae);
	--hac-bw-text:        var(--hac-farbe-text-dunkel, #1a1a1a);
	--hac-bw-titel:       var(--hac-farbe-text-dunkel, #1a1a1a);
	--hac-bw-leise:       var(--hac-farbe-text, #333333);
	--hac-bw-akzent:      var(--hac-farbe-text-dunkel, #1a1a1a);
	--hac-bw-knopf:       var(--hac-farbe-text-dunkel, #1a1a1a);
	--hac-bw-knopf-hover: var(--hac-farbe-text, #333333);
	--hac-bw-knopf-text:  #ffffff; /* fest */
	--hac-bw-karte:       rgba(255, 255, 255, 0.55); /* fest: auf Gruen */
	--hac-bw-karte-rand:  rgba(26, 26, 26, 0.14); /* fest */
	border-left-color: var(--hac-farbe-gruen, #bac6ae);
}

/* Elektro kraeftig: Blau #1D89F6 mit schwarzer Schrift (5,1:1), Knopf schwarz. */
.hac-bewerbung--gruen.hac-bewerbung--elektro {
	--hac-bw-grund:       var(--hac-farbe-blau, #1d89f6);
	--hac-bw-rand:        var(--hac-farbe-blau, #1d89f6);
	--hac-bw-knopf:       var(--hac-farbe-text-dunkel, #1a1a1a);
	--hac-bw-knopf-hover: var(--hac-farbe-text, #333333);
	border-left-color: var(--hac-farbe-blau, #1d89f6);
}

/* Abstand zum naechsten Baustein in derselben Elementor-Spalte. */
.elementor-widget-hac-bewerbung:not(:last-child) .hac-bewerbung {
	margin-bottom: 24px;
}

.hac-bewerbung .hac-bewerbung__marke {
	margin: 0 0 6px;
	padding: 0;
	color: var(--hac-bw-akzent);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hac-bewerbung .hac-bewerbung__titel {
	margin: 0 0 10px;
	padding: 0;
	color: var(--hac-bw-titel);
	font-family: inherit;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}

.hac-bewerbung__text {
	margin: 0;
	color: var(--hac-bw-text);
	font-size: 17px;
	line-height: 1.6;
}

/* Drei Teams als kleine Karten mit Link in die Strecke (Team vorgewaehlt). */
.hac-bewerbung ul.hac-bewerbung__teams {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.hac-bewerbung ul.hac-bewerbung__teams li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hac-bewerbung ul.hac-bewerbung__teams li::before {
	content: none;
}

.hac-bewerbung .hac-bewerbung__teams a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	height: 100%;
	padding: 12px 14px;
	background: var(--hac-bw-karte);
	border: 1px solid var(--hac-bw-karte-rand);
	border-radius: 8px;
	color: var(--hac-bw-text) !important;
	text-decoration: none !important;
	text-shadow: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hac-bewerbung .hac-bewerbung__teams a strong {
	color: var(--hac-bw-titel);
	font-size: 16px;
	line-height: 1.3;
}

.hac-bewerbung .hac-bewerbung__teams a span {
	color: var(--hac-bw-leise);
	font-size: 14px;
	line-height: 1.4;
}

.hac-bewerbung .hac-bewerbung__teams a:hover,
.hac-bewerbung .hac-bewerbung__teams a:focus-visible {
	border-color: var(--hac-bw-akzent);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.hac-bewerbung__aktion {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.hac-bewerbung a.hac-bewerbung__knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 14px 30px;
	background: var(--hac-bw-knopf);
	border: 0;
	border-radius: 8px;
	color: var(--hac-bw-knopf-text) !important;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;
	text-shadow: none !important;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

.hac-bewerbung a.hac-bewerbung__knopf:hover,
.hac-bewerbung a.hac-bewerbung__knopf:focus-visible {
	background: var(--hac-bw-knopf-hover);
	color: var(--hac-bw-knopf-text) !important;
}

.hac-bewerbung__pfeil {
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}

.hac-bewerbung a.hac-bewerbung__knopf:hover .hac-bewerbung__pfeil {
	transform: translateX(3px);
}

.hac-bewerbung__hinweis {
	color: var(--hac-bw-leise);
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}

.hac-bewerbung a:focus-visible {
	outline: 2px solid var(--hac-bw-titel);
	outline-offset: 3px;
}

/* Schmal (Handy, schmale Spalte): untereinander, Knopf volle Breite. */
@container (max-width: 720px) {
	.hac-bewerbung__inhalt,
	.hac-bewerbung__aktion {
		grid-column: 1 / -1;
	}

	.hac-bewerbung .hac-bewerbung__titel {
		font-size: 24px;
	}

	.hac-bewerbung ul.hac-bewerbung__teams {
		grid-template-columns: minmax(0, 1fr);
	}

	.hac-bewerbung__aktion {
		align-items: stretch;
	}

	.hac-bewerbung a.hac-bewerbung__knopf {
		white-space: normal;
		text-align: center;
	}
}

/* Container-Abfragen greifen nicht auf das Element selbst – fuer Spalten
   und Innenabstand der Box zusaetzlich das Fenster. */
@media (max-width: 720px) {
	.hac-bewerbung {
		grid-template-columns: minmax(0, 1fr);
		padding: 24px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hac-bewerbung a.hac-bewerbung__knopf,
	.hac-bewerbung__pfeil,
	.hac-bewerbung .hac-bewerbung__teams a {
		transition: none;
	}

	.hac-bewerbung a.hac-bewerbung__knopf:hover .hac-bewerbung__pfeil {
		transform: none;
	}
}

/* ── 2. KOPF DER SEITE /team/bewerbung/ ─────────────────────────────────── */

.hac-bw-kopf {
	max-width: 760px;
	margin: 48px auto 36px;
	text-align: center;
}

.hac-bw-kopf .hac-bw-kopf__marke {
	margin: 0 0 8px;
	color: var(--hac-schrift-gruen, var(--hac-farbe-gruen-tief, #4d5f3b));
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hac-bw-kopf h1.hac-bw-kopf__titel {
	margin: 0 0 14px;
	color: var(--hac-schrift-stark, var(--hac-farbe-text-dunkel, #1a1a1a));
	font-family: inherit;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}

.hac-bw-kopf__text {
	color: var(--hac-schrift, var(--hac-farbe-text, #333333));
	font-size: 17px;
	line-height: 1.65;
}

.hac-bw-kopf__text a {
	color: var(--hac-schrift-gruen, var(--hac-farbe-gruen-tief, #4d5f3b)) !important;
	text-decoration: underline !important;
	text-decoration-color: var(--hac-farbe-gruen, #bac6ae) !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px;
}

@media (max-width: 640px) {
	.hac-bw-kopf {
		margin-top: 28px;
		text-align: left;
	}

	.hac-bw-kopf h1.hac-bw-kopf__titel {
		font-size: 28px;
	}
}

/* ── 3. ZUSAETZE IM FORMULAR ────────────────────────────────────────────── */

/* Teamkarten: zwei Spalten, Name fett, Unterzeile leise. */
.wpcf7 .wpcf7-form.wpcf7-form .hac-bw-teams .wpcf7-radio {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wpcf7 .wpcf7-form.wpcf7-form .hac-bw-teams .wpcf7-list-item-label strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
}

.wpcf7 .wpcf7-form.wpcf7-form .hac-bw-teams .wpcf7-list-item-label small {
	display: block;
	margin-top: 2px;
	color: var(--hcf-muted, #6b6b6b);
	font-size: 14px;
	font-weight: 400;
}

/* Zusatzfragen mit laengeren Texten: breitere Kacheln. */
.wpcf7 .wpcf7-form.wpcf7-form .hac-bewerbung-form .hpgroup.c2 .wpcf7-checkbox {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Talentpool: freiwilliges Kaestchen, als Ankreuzfeld erkennbar (Tim, 14.10.2026).
   Das Grund-CSS blendet das native Feld aus und zeigt nur eine Kachel – hier
   kommt links ein sichtbares Kaestchen mit Haken dazu. */
.wpcf7 .wpcf7-form.wpcf7-form .hac-bw-freiwillig {
	color: var(--hcf-muted, #6b6b6b);
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

.wpcf7 .wpcf7-form.wpcf7-form .hac-bw-talentpool {
	margin-bottom: var(--hcf-gap, 16px);
}

.wpcf7 .wpcf7-form.wpcf7-form .hac-bw-talentpool .wpcf7-list-item > label .wpcf7-list-item-label {
	position: relative;
	padding-left: 52px;
}

.wpcf7 .wpcf7-form.wpcf7-form .hac-bw-talentpool .wpcf7-list-item > label .wpcf7-list-item-label::before {
	content: "";
	position: absolute;
	top: 13px;
	left: 16px;
	width: 22px;
	height: 22px;
	box-sizing: border-box;
	background: var(--hac-feld-grund, #ffffff);
	border: 2px solid var(--hac-feld-rand, var(--hcf-muted, #6b6b6b));
	border-radius: 4px;
}

.wpcf7 .wpcf7-form.wpcf7-form .hac-bw-talentpool .wpcf7-list-item > label input:checked + .wpcf7-list-item-label::before {
	background: var(--hcf-blue, #1d89f6);
	border-color: var(--hcf-blue, #1d89f6);
}

.wpcf7 .wpcf7-form.wpcf7-form .hac-bw-talentpool .wpcf7-list-item > label input:checked + .wpcf7-list-item-label::after {
	content: "";
	position: absolute;
	top: 18px;
	left: 23px;
	width: 7px;
	height: 12px;
	border-right: 2.5px solid #ffffff; /* fest: Haken auf Blau */
	border-bottom: 2.5px solid #ffffff; /* fest */
	transform: rotate(45deg);
}

/* Ausgeblendete Zusatzfragen (Skript setzt hidden). Das Theme darf das nicht
   mit eigenem display ueberstimmen. */
.wpcf7 .hac-bw-nur[hidden] {
	display: none !important;
}

.wpcf7 .wpcf7-form.wpcf7-form select[name="bw-stelle"]:disabled {
	color: var(--hcf-muted, #6b6b6b);
	background-color: var(--hcf-soft, #faf9f6);
	cursor: not-allowed;
}

@media (max-width: 640px) {
	.wpcf7 .wpcf7-form.wpcf7-form .hac-bw-teams .wpcf7-radio {
		grid-template-columns: minmax(0, 1fr);
	}
}