/*
 * Cookie-Richtlinie — die Darstellung des Complianz-Dokuments.
 *
 * ── Warum das Theme das überhaupt anfasst ───────────────────────────────────
 * Das DOKUMENT gehört dem Plugin: die Cookie-Tabelle kommt aus einer
 * gepflegten Datenbank, in drei Sprachen, und die kann diese Base nicht
 * nachbauen (ARCHITECTURE.md §13). Die DARSTELLUNG gehört dagegen uns — und
 * bis zum 2026-08-30 gehörte sie niemandem:
 *
 * Complianz' eigenes `document.css` kodiert helle Flächen fest
 * (rgb(239,239,239), rgb(247,247,247)) und erbt die Textfarbe vom Theme. Im
 * DUNKELMODUS ergab das am laufenden Container gemessen:
 *
 *     Dienstname (.cmplz-service-header)   1,05:1
 *     Cookie-Name / Ablauf / Funktion      1,02:1
 *     Zweck (.purpose)                     1,10:1
 *     Link im Dienst-Text                  2,21:1
 *
 * Die gesamte Cookie-Tabelle war unlesbar — auf der einen Seite, auf die
 * jeder Fussbereich verlinkt. Im Hellmodus fällt es nicht auf, und genau
 * deshalb stand es monatelang da.
 *
 * ── Der Weg dahin ist der des Plugins, kein Trick ───────────────────────────
 * Complianz hat dafür einen eigenen Schalter: „Use document CSS by Complianz"
 * mit dem Hinweis „Disable to let your theme take over." Steht er auf aus,
 * liefert das Plugin nur noch `document-grid.css` — reines Layout, praktisch
 * ohne Farbe — und diese Datei setzt die Farben aus den Semantik-Tokens.
 * Der Schalter ist abgeschaltet; `npm run doctor` meldet, wenn er wieder an
 * ist.
 *
 * Deshalb steht hier auch KEIN `!important` und kein `body`-Präfix: die Datei
 * wird mit `cmplz-document-grid` als Abhängigkeit eingereiht und steht damit
 * immer dahinter. Wo doch eine ID im Selektor steht, ist sie die des Plugins
 * — dort gewinnt sonst dessen eigene Regel über Spezifität, nicht über die
 * Reihenfolge. Die Stellen sind einzeln kommentiert.
 */

/* ── Ein Dienst: Kopfzeile zum Aufklappen, darunter die Beschreibung ──────── */

#cmplz-document .cmplz-dropdown-cookiepolicy {
	border: 1px solid var(--border-base);
	border-radius: var(--radius-md);
	margin-block-end: 0.75rem;
	overflow: hidden;
}

#cmplz-document .cmplz-dropdown-cookiepolicy > summary {
	background: var(--surface-raised);
	padding: 0.75rem 1rem;
}

#cmplz-document .cmplz-dropdown-cookiepolicy > summary:hover {
	background: var(--surface-sunken);
}

#cmplz-document .cmplz-dropdown-cookiepolicy > summary:focus-visible {
	outline: var(--focus-ring);
	outline-offset: -2px;
}

#cmplz-document .cmplz-dropdown-cookiepolicy > summary h3 {
	font-size: 1.0625rem;
	line-height: 1.3;
}

/* Die Kategorie neben dem Namen ist eine Einordnung, keine Aussage. */
#cmplz-document .cmplz-dropdown-cookiepolicy > summary p {
	color: var(--text-muted);
	font-size: 0.875rem;
	margin: 0;
}

/*
 * Der Aufklapp-Pfeil.
 *
 * `document-grid.css` reserviert dafür eine 25px-Spalte (grid-area: chevron),
 * gibt aber KEINEN Inhalt — das Zeichen stand im abgeschalteten document.css.
 * Ohne diese Regel bleibt eine leere Spalte, und dem Kasten sieht niemand an,
 * dass er sich öffnen lässt.
 */
#cmplz-document .cmplz-dropdown-cookiepolicy > summary > div::after {
	content: "";
	inline-size: 0.6em;
	block-size: 0.6em;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg) translate(-0.15em, -0.15em);
	transition: transform var(--motion-fast) var(--motion-ease);
	justify-self: end;
}

#cmplz-document .cmplz-dropdown-cookiepolicy[open] > summary > div::after {
	transform: rotate(225deg) translate(-0.15em, -0.15em);
}

#cmplz-document .cmplz-dropdown-cookiepolicy .cmplz-service-description,
#cmplz-document .cmplz-dropdown-cookiepolicy .cmplz-sharing-data {
	padding: 1rem;
}

#cmplz-document .cmplz-dropdown-cookiepolicy h4 {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-block-end: 0.25rem;
}

/* ── Die Cookie-Tabelle ───────────────────────────────────────────────────── */

#cmplz-document .cookies-per-purpose {
	border-block-start: 1px solid var(--border-base);
	padding: 1rem;
	gap: 0.25rem 1rem;
	align-items: baseline;
}

#cmplz-document .cookies-per-purpose .purpose {
	border-block-end: 1px solid var(--border-base);
	margin-block-end: 0.5rem;
	padding-block-end: 0.5rem;
}

#cmplz-document .cookies-per-purpose .purpose h4 {
	margin: 0;
}

#cmplz-document .cookies-per-purpose h5 {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0;
}

#cmplz-document .cookies-per-purpose .name {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875rem;
	overflow-wrap: anywhere;
}

#cmplz-document .cookies-per-purpose .retention,
#cmplz-document .cookies-per-purpose .function {
	font-size: 0.9375rem;
}

/*
 * Ein Cookie-Block beginnt an der Namensspalte. Bei drei Spalten trennt eine
 * Linie die Einträge; darunter (eine Spalte) wäre sie Lärm.
 */
@media (width >= 600px) {
	#cmplz-document .cookies-per-purpose .name-header {
		border-block-start: 1px solid var(--border-base);
		margin-block-start: 0.5rem;
		padding-block-start: 0.75rem;
	}

	#cmplz-document .cookies-per-purpose .retention-header,
	#cmplz-document .cookies-per-purpose .function-header {
		border-block-start: 1px solid var(--border-base);
		margin-block-start: 0.5rem;
		padding-block-start: 0.75rem;
	}
}

/*
 * Der erste Eintrag braucht keine Trennlinie — darüber steht schon die des
 * Zwecks. `:first-of-type` hilft hier nicht: die Zellen sind alle `div`, und
 * das erste ist `.purpose`. Der Geschwister-Kombinator trifft es genau.
 */
#cmplz-document .cookies-per-purpose .purpose + .name-header,
#cmplz-document .cookies-per-purpose .purpose + .name-header + .name {
	border-block-start: 0;
	margin-block-start: 0;
	padding-block-start: 0;
}

/*
 * Unter 600px legt document-grid.css auf zwei Spalten um (100px 1fr) und
 * stellt Beschriftung und Wert nebeneinander. Am 390px-Fenster nachgemessen
 * reichen die 100px für „Ablaufdatum" — die Spaltenbreite bleibt deshalb, wie
 * das Plugin sie setzt. Nur die Trennlinie muss mitwandern: sie liegt dort
 * nicht mehr über den Beschriftungen, sondern vor jedem Eintrag.
 */
@media (width < 1024px) {
	#cmplz-document .cmplz-dropdown-cookiepolicy .cmplz-service-description,
	#cmplz-document .cmplz-dropdown-cookiepolicy .cmplz-sharing-data {
		padding-block-end: 0;
	}
}

@media (width < 600px) {
	#cmplz-document .cookies-per-purpose .name-header,
	#cmplz-document .cookies-per-purpose .name {
		border-block-start: 1px solid var(--border-base);
		margin-block-start: 0.5rem;
		padding-block-start: 0.75rem;
	}
}

/* ── Der Einwilligungs-Kasten am Ende der Seite ───────────────────────────── */

/*
 * Hier steht die ID im Selektor, weil document-grid.css seine eigenen Regeln
 * mit `#cmplz-manage-consent-container.cmplz-manage-consent-container` schreibt.
 * Gegen diese Spezifität hilft die Reihenfolge nicht.
 */
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category {
	background-color: var(--surface-raised);
	border: 1px solid var(--border-base);
	border-radius: var(--radius-md);
}

#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header {
	background-color: transparent;
	border-block-end: 1px solid var(--border-base);
}

/*
 * „Immer aktiv" kam in einem fest kodierten `green` — auf der hellen Fläche
 * 4,47:1 und damit knapp unter AA. `--state-success` steht in theme.json und
 * wird von check:contrast in beiden Modi mitgeprüft.
 */
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active {
	color: var(--state-success);
	font-size: 0.8125rem;
}

#cmplz-document .cmplz-alert.cmplz-error {
	background-color: var(--state-error-soft);
	color: var(--text-primary);
}

#cmplz-document .cmplz-alert.cmplz-success {
	background-color: var(--state-success-soft);
	color: var(--text-primary);
}