/*
 * Einwilligungsbanner für die Statistik. Erscheint nur, wenn eine GA4-Mess-ID eingetragen ist,
 * und nur, bis eine Entscheidung gespeichert wurde. Farben und Schriften aus der DAWV-Palette.
 */
.dawv-consent {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 999;
	background-color: var(--wp--preset--color--main-soft);
	color: var(--wp--preset--color--text-dark);
	border-block-start: 3px solid var(--wp--preset--color--gold);
}

.dawv-consent[hidden] { display: none; }

.dawv-consent__inhalt {
	max-width: 1240px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--28) var(--dawv-rand);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"kicker  aktionen"
		"titel   aktionen"
		"text    aktionen";
	column-gap: var(--wp--preset--spacing--48);
	align-items: center;
}

.dawv-consent__kicker {
	grid-area: kicker;
	margin: 0 0 var(--wp--preset--spacing--6);
	font-family: var(--wp--preset--font-family--ziffer);
	font-size: var(--wp--preset--font-size--kicker);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--wp--preset--color--gold);
}

.dawv-consent__titel {
	grid-area: titel;
	margin: 0 0 var(--wp--preset--spacing--8);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-6);
	font-weight: 780;
	font-variation-settings: 'wdth' 106;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
}

.dawv-consent__text {
	grid-area: text;
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.55;
	max-width: 72ch;
	color: var(--wp--preset--color--text-dark);
}

.dawv-consent__text a {
	color: var(--wp--preset--color--gold);
	text-underline-offset: 3px;
}

.dawv-consent__aktionen {
	grid-area: aktionen;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--12);
}

/*
 * Beide Knöpfe gleich groß, gleich schwer, beide gefüllt — Ablehnen muss genauso leicht
 * fallen wie Zustimmen, sonst gilt die Einwilligung als erschlichen. Nur die Farbe unterscheidet.
 */
.dawv-consent__knopf {
	min-width: 168px;
	min-height: 48px;
	padding: 13px var(--wp--preset--spacing--24);
	border: 2px solid transparent;
	border-radius: var(--dawv-radius-s);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--ui-s);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.dawv-consent__knopf--ja {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--main);
}

.dawv-consent__knopf--nein {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
}

.dawv-consent__knopf--ja:hover { background-color: var(--wp--preset--color--base); }
.dawv-consent__knopf--nein:hover { background-color: var(--wp--preset--color--gold); }

.dawv-consent__knopf:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

@media (max-width: 1199px) {
	.dawv-consent__inhalt {
		grid-template-columns: 1fr;
		grid-template-areas:
			"kicker"
			"titel"
			"text"
			"aktionen";
		row-gap: var(--wp--preset--spacing--12);
		padding-block: var(--wp--preset--spacing--22);
	}

	.dawv-consent__knopf { flex: 1 1 auto; }
}

@media (max-width: 599px) {
	/* Der Banner darf nicht die halbe Bildschirmhöhe belegen. */
	.dawv-consent__inhalt { padding-block: var(--wp--preset--spacing--16); row-gap: var(--wp--preset--spacing--10); }
	.dawv-consent__titel { font-size: var(--wp--preset--font-size--titel-m); margin-bottom: var(--wp--preset--spacing--4); }
	.dawv-consent__kicker { margin-bottom: var(--wp--preset--spacing--4); }
	.dawv-consent__text { font-size: var(--wp--preset--font-size--small); }
	.dawv-consent__knopf { min-height: 44px; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.dawv-consent__knopf { transition: none; }
}