/**
 * DT Consent - Banner-Gestaltung.
 *
 * Die wichtigste Regel dieser Datei steht gleich am Anfang: Die beiden
 * Ebene-1-Schaltflächen teilen sich EINE Klasse und werden nirgends
 * unterschieden - kein eigener Modifier für "Akzeptieren", keine
 * Sonderfarbe, keine abweichende Breite.
 *
 * Das ist keine Geschmacksfrage. Die DSK-Orientierungshilfe für Anbieter
 * digitaler Dienste verlangt in Rz. 50 Optionen mit "gleichwertigem
 * Kommunikationseffekt" und wertet in Rz. 60 das Fehlen einer gleich
 * aufwendigen Ablehnung als treuwidrige Einflussnahme im Sinne des Art. 5
 * Abs. 1 lit. a DSGVO. Das Bayerische Landesamt hat 2024 rund 1.000 Websites
 * geprüft; bei etwa einem Drittel war genau das der Mangel.
 *
 * Der End-to-End-Test zu AK-10 liest die berechneten CSS-Werte beider
 * Schaltflächen aus und vergleicht sie. Wer hier eine Sonderregel ergänzt,
 * bricht diesen Test - was der Zweck der Konstruktion ist.
 */

.dtc-banner {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(15, 23, 42, 0.6);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #0f172a;
}

.dtc-banner[hidden] {
	display: none;
}

/*
 * Zweiteilung: oben ein scrollbarer Bereich, unten ein fester Fuß.
 *
 * Der erste Entwurf ließ den gesamten Kasten scrollen. Der Komponententest
 * zu AK-11 fiel damit durch - bei 1280x720 Bildpunkten lagen beide
 * Schaltflächen unterhalb des sichtbaren Bereichs und waren erst nach einer
 * Scrollbewegung erreichbar. Die DSK-Orientierungshilfe Rz. 58 lässt für
 * die Ablehnung keinen "messbaren Mehraufwand" zu; ob der aus einem Klick
 * oder aus einer Scrollbewegung besteht, ist für den Besucher einerlei.
 *
 * "min-height: 0" am Scrollbereich ist dabei kein Schmuck: Ohne diese Angabe
 * weigert sich ein Flex-Element, kleiner als sein Inhalt zu werden - der
 * Kasten wächst dann über die Bildschirmhöhe hinaus, und der Fuß ist
 * wieder unten weg.
 */
.dtc-banner__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 44rem;
	max-height: 90vh;
	overflow: hidden;
	padding: 1.75rem;
	background: #ffffff;
	border-radius: 0.5rem;
	box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, 0.25);
}

/*
 * Der Kasten trägt tabindex="-1" und bekommt beim Öffnen den Fokus (siehe
 * openBanner() in consent.js). Ohne diese Regel zeichnet der Browser einen
 * Fokusrahmen um den gesamten Kasten - was aussieht wie ein Darstellungsfehler
 * und keinerlei Information trägt, weil der Kasten selbst nichts bedient.
 *
 * Die Bedienelemente darin behalten ihren sichtbaren Fokus; genau darauf kommt
 * es bei der Tastaturbedienung an.
 */
.dtc-banner__inner:focus {
	outline: none;
}

.dtc-banner__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.dtc-banner__footer {
	flex: 0 0 auto;
	padding-top: 1rem;
}

.dtc-banner__heading {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
	font-weight: 600;
	color: #0f172a;
}

.dtc-banner__body {
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
	color: #334155;
}

/* Kategorien -------------------------------------------------------------- */

.dtc-categories {
	margin: 0;
	border-top: 1px solid #e2e8f0;
}

.dtc-category {
	padding: 0.875rem 0;
	border-bottom: 1px solid #e2e8f0;
}

.dtc-category__head {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.dtc-category__toggle {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	flex: 0 0 auto;
	accent-color: #1e293b;
}

.dtc-category__label {
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
}

/* Die Kennzeichnung der Pflichtkategorie ist bewusst zurückhaltend, aber
   nicht versteckt: Der Besucher soll erkennen können, WARUM dieser Schalter
   nicht bedienbar ist, statt ihn für defekt zu halten. */
.dtc-category__hint {
	margin-left: 0.375rem;
	font-weight: 400;
	font-size: 0.8125rem;
	color: #64748b;
}

.dtc-category__description {
	margin: 0.375rem 0 0 1.75rem;
	font-size: 0.875rem;
	color: #475569;
}

.dtc-services {
	margin: 0.5rem 0 0 0;
	padding: 0;
	list-style: none;
}

.dtc-service {
	margin-bottom: 0.375rem;
	font-size: 0.8125rem;
	color: #64748b;
}

.dtc-service__name {
	display: block;
	font-weight: 600;
	color: #334155;
}

/*
 * Die Aufzaehlung der Dienste einer Kategorie - Namen und Anbieter, ohne
 * Interaktion sichtbar. Eine Zeile statt einer Liste aus Bloecken.
 */
.dtc-category__services {
	margin: 0.25rem 0 0 1.75rem;
	font-size: 0.8125rem;
	color: #64748b;
}

/*
 * Das aufklappende Element. Der Zeiger und der sichtbare Fokusring sind hier
 * Pflicht, nicht Geschmack: Wer die Seite mit der Tastatur bedient, muss
 * sehen, wo er steht (WCAG 2.1, 2.4.7), und der Standardring mancher Browser
 * verschwindet auf hellem Grund.
 */
.dtc-category__details {
	margin-left: 1.75rem;
}

.dtc-category__summary {
	cursor: pointer;
	list-style: none;
	font-size: 0.8125rem;
}

.dtc-category__summary::-webkit-details-marker {
	display: none;
}

.dtc-category__summary::after {
	content: " \25B8";
	color: #475569;
}

.dtc-category__details[open] > .dtc-category__summary::after {
	content: " \25BE";
}

/*
 * Der Hinweistext steht als echtes Markup in der Zusammenfassung, nicht als
 * CSS-Inhalt: Was per content: erzeugt wird, lässt sich nicht übersetzen und
 * wird von vorlesenden Hilfsmitteln uneinheitlich behandelt.
 */
.dtc-category__more {
	color: #475569;
	text-decoration: underline;
}

.dtc-category__details[open] .dtc-category__more {
	display: none;
}

.dtc-category__summary:focus-visible {
	outline: 2px solid #1d4ed8;
	outline-offset: 2px;
	border-radius: 2px;
}

.dtc-service__facts {
	margin: 0.25rem 0 0.5rem 0;
	padding: 0;
}

.dtc-service__label {
	font-weight: 600;
	color: #475569;
}

.dtc-service__value {
	margin: 0 0 0.25rem 0;
	color: #64748b;
}

/*
 * Wer Bewegung im Betriebssystem abgestellt hat, bekommt hier keine - das
 * Aufklappen springt dann einfach (WCAG 2.1, 2.3.3).
 */
@media (prefers-reduced-motion: reduce) {
	.dtc-category__details {
		transition: none;
	}
}

/* Schaltflächen ---------------------------------------------------------- */

.dtc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.dtc-actions--secondary {
	margin-top: 0.75rem;
}

/*
 * Eine Klasse für beide Ebene-1-Schaltflächen. Alle Eigenschaften sind
 * ausgeschrieben statt geerbt, damit ein Theme mit eigenen button-Regeln die
 * beiden nicht unterschiedlich einfärbt - Vererbung kann je nach
 * Selektorspezifität nur eine der beiden treffen.
 */
.dtc-button {
	flex: 1 1 12rem;
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: 0.6875rem 1.25rem;
	margin: 0;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	color: #ffffff;
	background: #1e293b;
	background-image: none;
	border: 1px solid #1e293b;
	border-radius: 0.375rem;
	box-shadow: none;
	cursor: pointer;
	text-decoration: none;
	opacity: 1;
}

.dtc-button:hover,
.dtc-button:focus-visible {
	background: #0f172a;
	border-color: #0f172a;
	color: #ffffff;
}

.dtc-button:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/*
 * "Auswahl speichern" steht auf einer zweiten Zeile und ist zurückhaltender
 * gestaltet. Das ist zulässig: Die Gleichwertigkeitsanforderung gilt dem
 * Verhältnis von Zustimmung und Ablehnung, nicht jeder denkbaren
 * Schaltfläche. Der Speichern-Button ist keine dritte Alternative zu diesen
 * beiden, sondern die Bestätigung einer bereits getroffenen Auswahl.
 */
.dtc-button--quiet {
	flex: 0 1 auto;
	color: #1e293b;
	background: #ffffff;
	border-color: #cbd5e1;
	font-weight: 500;
}

.dtc-button--quiet:hover,
.dtc-button--quiet:focus-visible {
	background: #f1f5f9;
	border-color: #94a3b8;
	color: #1e293b;
}

/* Rechtliche Links -------------------------------------------------------- */

.dtc-legal {
	display: flex;
	gap: 1rem;
	margin: 0 0 0.875rem;
	font-size: 0.8125rem;
}

.dtc-legal__link {
	color: #1d4ed8;
	text-decoration: underline;
}

/* Widerrufs-Einstieg ------------------------------------------------------ */

.dtc-revoke {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 999998;
	padding: 0.5rem 0.875rem;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 0.8125rem;
	color: #1e293b;
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 999px;
	box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.15);
	cursor: pointer;
}

.dtc-revoke:hover,
.dtc-revoke:focus-visible {
	background: #f1f5f9;
}

.dtc-inline-link {
	padding: 0;
	font: inherit;
	color: #1d4ed8;
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}

/* Platzhalter für blockierte Einbettungen -------------------------------- */

.dtc-embed {
	position: relative;
	min-height: 12rem;
	background: #f1f5f9;
	border: 1px solid #cbd5e1;
	border-radius: 0.375rem;
	overflow: hidden;
}

.dtc-embed__notice {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1.5rem;
	text-align: center;
}

.dtc-embed--released .dtc-embed__notice {
	display: none;
}

.dtc-embed__text {
	margin: 0;
	max-width: 32rem;
	font-size: 0.875rem;
	color: #475569;
}

.dtc-embed__button {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #ffffff;
	background: #1e293b;
	border: 1px solid #1e293b;
	border-radius: 0.375rem;
	cursor: pointer;
}

/*
 * Das iframe im Platzhalter ist versteckt, solange keine Einwilligung
 * vorliegt. Es hat in diesem Zustand ohnehin kein src-Attribut und lädt
 * nichts - das display:none verhindert nur, dass ein leerer Rahmen unter dem
 * Hinweistext steht.
 */
.dtc-embed iframe {
	display: none;
	width: 100%;
	min-height: 12rem;
	border: 0;
}

.dtc-embed--released iframe {
	display: block;
}

@media (max-width: 30rem) {
	.dtc-banner__inner {
		padding: 1.25rem;
	}

	.dtc-button {
		flex: 1 1 100%;
	}
}