/* ==========================================================================
   Anfrage-Box (T41)
   Ausgabe: includes/anfrage-box.php (Elementor-Baustein „HAC Anfrage-Box"
   bzw. Shortcode [hac_anfrage_box]).
   Hof gruen, Elektro blau – gesteuert ueber die Strecke, nicht ueber die Seite.
   Keine :root-Variablen setzen – nur auf der Box selbst, sonst faerbt es die
   ganze Seite.
   Breite: Container-Abfrage auf die Box, nicht auf das Fenster. So passt sie
   sich an, egal in welcher Spalte sie steht.
   ========================================================================== */

.hac-anfrage-box {
	--hac-ab-knopf:       var(--hac-farbe-gruen-dunkel, #667d4f); /* Weiss darauf 4,6:1 */
	--hac-ab-knopf-hover: var(--hac-farbe-gruen-tief, #4d5f3b);   /* Weiss darauf >6:1 */
	--hac-ab-akzent:      var(--hac-farbe-gruen-tief, #4d5f3b);   /* Haken, Zweitlink */
	--hac-ab-unterstrich: var(--hac-farbe-gruen, #bac6ae);
	container-type: inline-size;
	margin: 0;
	padding: 28px 32px;
	background: var(--hac-farbe-gruen-hell, #f4f6f2);
	border: 1px solid #dcdfd6;
	border-radius: 8px;
	color: var(--hac-farbe-text, #333333);
	text-align: left;
}

/* Abstand zum naechsten Baustein in derselben Spalte (z. B. KI-Leiste).
   Die Spalten der Leistungsseiten haben „Abstand zwischen Widgets: 0";
   deshalb sitzt der Abstand an der Box selbst, nicht am Elementor-Rahmen. */
.elementor-widget-hac-anfrage-box:not(:last-child) .hac-anfrage-box {
	margin-bottom: 24px;
}

/* Elektro: Knopf Blau mit weisser Schrift – bewusste Ausnahme (Tim, 24.09.2026). */
.hac-anfrage-box--elektro {
	--hac-ab-knopf:       var(--hac-farbe-blau, #1d89f6);
	--hac-ab-knopf-hover: var(--hac-farbe-blau-dunkel, #0363c3);
	--hac-ab-akzent:      var(--hac-farbe-blau-dunkel, #0363c3);
	--hac-ab-unterstrich: var(--hac-farbe-blau, #1d89f6);
}

/* Breit: Text links, Knopf rechts. Schmal: alles untereinander (unten). */
.hac-anfrage-box {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 20px 40px;
}

.hac-anfrage-box .hac-anfrage-box__titel {
	margin: 0 0 8px;
	padding: 0;
	color: var(--hac-farbe-text-dunkel, #1a1a1a);
	font-family: inherit;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
}

.hac-anfrage-box__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

/* Stichpunkte mit Haken. Theme-Listen (Punkte, Abstaende) gezielt zuruecksetzen. */
.hac-anfrage-box ul.hac-anfrage-box__punkte {
	display: grid;
	gap: 6px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.hac-anfrage-box ul.hac-anfrage-box__punkte li {
	position: relative;
	margin: 0;
	padding: 0 0 0 28px;
	font-size: 16px;
	line-height: 1.5;
	list-style: none;
}

.hac-anfrage-box ul.hac-anfrage-box__punkte li::before {
	content: "";
	position: absolute;
	top: 0.38em;
	left: 3px;
	width: 12px;
	height: 6px;
	border-left: 2px solid var(--hac-ab-akzent);
	border-bottom: 2px solid var(--hac-ab-akzent);
	background: none;
	transform: rotate(-45deg);
}

.hac-anfrage-box__aktion {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.hac-anfrage-box a.hac-anfrage-box__knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 26px;
	background: var(--hac-ab-knopf);
	border: 0;
	border-radius: 8px;
	color: #ffffff !important;
	font-size: 17px;
	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-anfrage-box a.hac-anfrage-box__knopf:hover,
.hac-anfrage-box a.hac-anfrage-box__knopf:focus-visible {
	background: var(--hac-ab-knopf-hover);
	color: #ffffff !important;
}

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

.hac-anfrage-box a.hac-anfrage-box__knopf:hover .hac-anfrage-box__pfeil {
	transform: translateX(3px);
}

/* Zweitlink: ruhiger Textlink, Tippziel trotzdem 44 px hoch. */
.hac-anfrage-box a.hac-anfrage-box__zweitlink {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	color: var(--hac-ab-akzent) !important;
	font-size: 16px;
	line-height: 1.3;
	text-decoration: underline !important;
	text-decoration-color: var(--hac-ab-unterstrich) !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 4px !important;
	text-shadow: none !important;
}

.hac-anfrage-box a.hac-anfrage-box__zweitlink:hover {
	color: var(--hac-farbe-text-dunkel, #1a1a1a) !important;
	text-decoration-color: currentColor !important;
}

.hac-anfrage-box a.hac-anfrage-box__knopf:focus-visible,
.hac-anfrage-box a.hac-anfrage-box__zweitlink:focus-visible {
	outline: 2px solid var(--hac-farbe-text-dunkel, #1a1a1a);
	outline-offset: 3px;
}

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

	.hac-anfrage-box .hac-anfrage-box__titel {
		font-size: 21px;
	}

	.hac-anfrage-box__aktion {
		align-items: stretch;
	}

	.hac-anfrage-box a.hac-anfrage-box__knopf {
		white-space: normal;
		text-align: center;
	}

	.hac-anfrage-box a.hac-anfrage-box__zweitlink {
		justify-content: center;
	}
}

/* Eine Container-Abfrage greift nicht auf das Element selbst, nur auf seine
   Kinder. Fuer Rand und Spalten der Box deshalb zusaetzlich das Fenster. */
@media (max-width: 640px) {
	.hac-anfrage-box {
		grid-template-columns: minmax(0, 1fr);
		padding: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hac-anfrage-box a.hac-anfrage-box__knopf,
	.hac-anfrage-box__pfeil {
		transition: none;
	}

	.hac-anfrage-box a.hac-anfrage-box__knopf:hover .hac-anfrage-box__pfeil {
		transform: none;
	}
}

/* Nur im Elementor-Editor sichtbar, wenn keine Strecke passt. */
.hac-anfrage-box__hinweis {
	padding: 16px;
	border: 1px dashed #dcdfd6;
	border-radius: 8px;
	color: var(--hac-farbe-text-leise, #6b6b6b);
	font-size: 14px;
}