/**
 * YA Consent — Oberfläche.
 *
 * Alle Farbpaarungen sind gerechnet, nicht geschätzt; die Werte stehen als
 * Kommentar an der jeweiligen Variablen und werden von tools/kontrast.php
 * nachgemessen. Die Markenfarbe #E8432A kommt bewusst NICHT hinter weissen
 * Text: sie erreicht dort nur 3,99:1 und fällt damit durch AA. Sie trägt
 * Linien und den Fokusring, wo 3:1 genügt.
 */

:root {
	--yac-accent: #d22f17;      /* auf Weiss: 5,05:1 — trägt weissen Text */
	--yac-accent-dark: #e8432a; /* nur Linien und Fokus (3,99:1) */
	--yac-radius: 14px;

	--yac-bg: #ffffff;
	--yac-ink: #16110f;         /* auf Weiss: 18,2:1 */
	--yac-ink-soft: #4f4742;    /* auf Weiss:  9,1:1 */
	--yac-line: #d8d1cc;
	--yac-panel: #f7f4f2;
	--yac-btn-ink: #ffffff;     /* auf --yac-accent: 5,05:1 */
	--yac-focus: #16110f;
	--yac-focus-halo: #ffffff;
	--yac-shadow: 0 1.5rem 3rem rgba(22, 17, 15, .28);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-yac-theme="light"]) {
		--yac-accent: #ff6b52;    /* auf #171311: 6,7:1 — trägt dunklen Text */
		--yac-accent-dark: #ff8b76;
		--yac-bg: #171311;
		--yac-ink: #f7f3f1;       /* auf #171311: 16,7:1 */
		--yac-ink-soft: #c6bdb7;  /* auf #171311:  9,9:1 */
		--yac-line: #3d3532;
		--yac-panel: #221c19;
		--yac-btn-ink: #171311;   /* auf --yac-accent: 6,7:1 */
		--yac-focus: #ffffff;
		--yac-focus-halo: #171311;
		--yac-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .55);
	}
}

/*
 * [hidden] muss laut werden: jede der Regeln weiter unten setzt display, und
 * eine display-Regel schlägt das Attribut. Ohne diese Zeile steht der Dialog
 * offen da, obwohl das Skript ihn geschlossen hat — ohne Fehlermeldung.
 */
.yac-root[hidden],
.yac-view[hidden],
[hidden].yac-ph {
	display: none !important;
}

/*
 * Ein Plugin landet in fremden Themes und darf sich auf nichts verlassen, was
 * dort gesetzt ist. Ohne diese Regel rechnet der Browser Innenabstand und Rand
 * ZUSÄTZLICH zur Breite: gemessen 385 px Inhalt in einem 375 px breiten
 * Fenster, sobald die Schrift auf 32 px steht — die Seite liess sich seitwärts
 * schieben. Bis Wurzelschrift 28 px fiel es nicht auf.
 */
.yac-root,
.yac-root *,
.yac-root *::before,
.yac-root *::after,
.yac-ph,
.yac-ph *,
.yac-ph *::before,
.yac-ph *::after,
.yac-revoke,
.yac-policy,
.yac-policy * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- Rahmen */

.yac-root {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--yac-ink);
}

/* Auf Impressum und Datenschutz sperrt nichts — die Seiten sind Pflicht. */
.yac-root.yac-mode-docked {
	position: fixed;
	inset: auto 0 0 0;
	padding: 0;
	align-items: flex-end;
}

/*
 * fixed statt absolute: der Schleier gehört zum Bildschirm, nicht zum Kasten
 * darüber. Als absolute wächst er mit, wenn der Dialog einmal breiter wird,
 * und schiebt dann selbst die Seite seitwärts.
 */
.yac-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(22, 17, 15, .62);
}

html.yac-locked {
	overflow: hidden;
}

.yac-dialog {
	position: relative;
	background: var(--yac-bg);
	border-radius: var(--yac-radius);
	box-shadow: var(--yac-shadow);
	width: min(42rem, 100%);
	/*
	 * Ohne min-width:0 gilt für ein Flex-Item min-width:auto — es schrumpft
	 * dann nie unter die Breite seines längsten Wortes, was width:100%
	 * stillschweigend aushebelt. Gemessen: bei Wurzelschrift 40 px verlangte
	 * der Dialog 463 px in einem 375-px-Fenster, allein wegen des Wortes
	 * "Datenschutzerklärung".
	 */
	min-width: 0;
	max-height: min(88vh, 52rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
	border: 1px solid var(--yac-line);
}

/*
 * Und das Gegenstück dazu: schrumpfen darf der Kasten jetzt, der Text muss
 * mitmachen. break-word genügt hier NICHT — es senkt die min-content-Breite
 * nicht, nur anywhere tut das. Zusammen mit hyphens bricht es an sinnvollen
 * Stellen und erst im Notfall mitten im Wort.
 */
.yac-title,
.yac-group-name,
.yac-group-desc,
.yac-svc-name,
.yac-legal,
.yac-legal a,
.yac-tag {
	overflow-wrap: anywhere;
	hyphens: auto;
}

.yac-mode-docked .yac-dialog {
	width: 100%;
	max-width: none;
	border-radius: var(--yac-radius) var(--yac-radius) 0 0;
	max-height: 70vh;
	border-bottom: 0;
}

/* ----------------------------------------------------------------- Text */

.yac-title {
	margin: 0 0 .6rem;
	font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
	line-height: 1.25;
	font-weight: 700;
	color: var(--yac-ink);
}

.yac-title:focus-visible {
	outline: 3px solid var(--yac-focus);
	outline-offset: 4px;
}

.yac-body {
	margin: 0 0 1.1rem;
	color: var(--yac-ink-soft);
	font-size: 1rem;
	/*
	 * break-word senkt die min-content-Breite nicht — nur anywhere tut das.
	 * Ohne diese Zeile schiebt eine lange Adresse den Dialog seitwärts, sobald
	 * die Schrift vergrössert wird.
	 */
	overflow-wrap: anywhere;
}

.yac-legal {
	margin: 1rem 0 0;
	font-size: .9375rem;
	color: var(--yac-ink-soft);
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .5rem;
}

.yac-legal a {
	color: var(--yac-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --------------------------------------------------------------- Knöpfe */

/*
 * Die beiden Hauptknöpfe sind absichtlich identisch: gleiche Fläche, gleiche
 * Farbe, gleiche Schrift. Ein optisch schwächeres "Ablehnen" ist der am
 * häufigsten beanstandete Mangel an Einwilligungsdialogen — die Gleichheit
 * kostet hier nichts und nimmt die Diskussion vorweg.
 */
.yac-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
	gap: .625rem;
	margin: 1.1rem 0 .5rem;
}

.yac-btn {
	appearance: none;
	font: inherit;
	font-weight: 650;
	line-height: 1.3;
	min-height: 2.75rem;      /* 44 px Zielfläche */
	padding: .7rem 1.1rem;
	border-radius: calc(var(--yac-radius) - 6px);
	border: 2px solid transparent;
	cursor: pointer;
	text-align: center;
	/* nowrap wäre hier falsch: bei grosser Schrift muss die Beschriftung
	   umbrechen dürfen, statt aus dem Knopf zu laufen. */
	white-space: normal;
}

.yac-btn-primary {
	background: var(--yac-accent);
	color: var(--yac-btn-ink);
}

.yac-btn-primary:hover {
	filter: brightness(.93);
}

.yac-btn-ghost {
	background: transparent;
	color: var(--yac-ink);
	border-color: var(--yac-ink-soft);
}

.yac-textbtn {
	appearance: none;
	background: none;
	border: 0;
	font: inherit;
	color: var(--yac-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	padding: .55rem .25rem;
	min-height: 2.75rem;
}

.yac-revoke {
	appearance: none;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	padding: .25rem 0;
}

/*
 * Der Fokusring ist zweifarbig, und darauf kommt es an: der box-shadow füllt
 * 0–6 px ab der Kante, die outline liegt mit 2 px Versatz darüber. Sichtbar
 * ist damit Halo · Ring · Halo — der innere Ring ist eingefasst und bleibt
 * auch dann erkennbar, wenn er auf die Signalfarbe trifft (weiss auf #FF6B52
 * misst allein nur 2,81:1). Ein einfarbiger Ring verschwindet genau dort, wo
 * er die Farbe seines Untergrunds trifft.
 *
 * Der Ring ragt 6 px über den Knopf hinaus. Der Abstand der Knöpfe
 * untereinander (--yac-gap) muss deshalb grösser als 6 px bleiben, sonst
 * läuft er in den Nachbarknopf.
 */
.yac-root :focus-visible,
.yac-revoke:focus-visible,
.yac-ph :focus-visible {
	outline: 3px solid var(--yac-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--yac-focus-halo);
	border-radius: 4px;
}

/* --------------------------------------------------------------- Gruppen */

.yac-groups {
	margin: 1rem 0;
	display: grid;
	gap: .75rem;
}

.yac-group {
	border: 1px solid var(--yac-line);
	border-radius: calc(var(--yac-radius) - 4px);
	padding: .85rem 1rem;
	background: var(--yac-panel);
}

.yac-group-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
}

.yac-check {
	inline-size: 1.35rem;
	block-size: 1.35rem;
	accent-color: var(--yac-accent);
	flex: 0 0 auto;
	margin: 0;
}

.yac-group-name {
	font-weight: 650;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
}

.yac-tag {
	font-size: .8125rem;
	font-weight: 500;
	color: var(--yac-ink-soft);
	border: 1px solid var(--yac-line);
	border-radius: 999px;
	padding: .05rem .5rem;
	background: var(--yac-bg);
}

.yac-group-desc {
	margin: .45rem 0 0;
	color: var(--yac-ink-soft);
	font-size: .9375rem;
}

.yac-svc-list {
	list-style: none;
	margin: .75rem 0 0;
	padding: 0;
	display: grid;
	gap: .6rem;
}

.yac-svc {
	border-top: 1px solid var(--yac-line);
	padding-top: .6rem;
}

.yac-svc-name {
	margin: 0;
	font-weight: 600;
	font-size: .9375rem;
}

.yac-svc-purpose,
.yac-svc-meta {
	margin: .2rem 0 0;
	font-size: .875rem;
	color: var(--yac-ink-soft);
	overflow-wrap: anywhere;
}

.yac-svc-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem .7rem;
}

.yac-svc-meta a {
	color: var(--yac-ink);
}

/* Der Hinweis auf den Drittstaat trägt ein Zeichen, nicht nur eine Farbe. */
.yac-flag::before,
.yac-ph-flag::before {
	content: "△ ";
	font-weight: 700;
}

.yac-flag,
.yac-ph-flag {
	color: var(--yac-ink-soft);
	font-weight: 600;
}

/* ---------------------------------------------------------- Platzhalter */

.yac-ph {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: var(--yac-ratio, 16 / 9);
	inline-size: 100%;
	min-inline-size: 0;
	max-inline-size: 100%;
	background: var(--yac-panel);
	border: 2px dashed var(--yac-line);
	border-radius: calc(var(--yac-radius) - 4px);
	color: var(--yac-ink);
	font-size: 1rem;
	line-height: 1.5;
	container-type: inline-size;
}

/*
 * Sobald der Inhalt höher wird als der Kasten — grosse Schrift, schmales
 * Fenster —, gibt das Seitenverhältnis nach. Sonst läge der Knopf ausserhalb.
 *
 * min-inline-size:0 aus demselben Grund wie beim Dialog: ein Grid-Item hat
 * min-width:auto und wird sonst so breit wie sein längstes Wort. Gemessen:
 * 318 px in einem 247 px breiten Elternteil bei Wurzelschrift 32 px.
 */
.yac-ph-inner {
	padding: clamp(.75rem, .5rem + 1.5cqi, 1.5rem);
	max-inline-size: 34rem;
	min-inline-size: 0;
	text-align: center;
	display: grid;
	gap: .5rem;
	justify-items: center;
}

.yac-ph-title,
.yac-ph-meta,
.yac-ph-meta a,
.yac-btn,
.yac-textbtn {
	overflow-wrap: anywhere;
	hyphens: auto;
}

.yac-ph:has(.yac-ph-inner) {
	min-block-size: max-content;
	aspect-ratio: auto;
}

@supports (aspect-ratio: 16/9) {
	.yac-ph {
		min-block-size: min(var(--yac-ph-min, 9rem), 60vh);
	}
}

.yac-ph-title {
	margin: 0;
	font-weight: 700;
	font-size: 1.0625rem;
}

.yac-ph-icon {
	display: inline-grid;
	place-items: center;
	inline-size: 1.6rem;
	block-size: 1.6rem;
	border-radius: 50%;
	background: var(--yac-accent);
	color: var(--yac-btn-ink);
	font-size: .8rem;
	vertical-align: -.3rem;
}

.yac-ph-text {
	margin: 0;
	color: var(--yac-ink-soft);
	font-size: .9375rem;
	overflow-wrap: anywhere;
}

.yac-ph-meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .3rem .8rem;
	font-size: .875rem;
	color: var(--yac-ink-soft);
}

.yac-ph-meta a {
	color: var(--yac-ink);
}

.yac-ph-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin-top: .25rem;
}

/* ----------------------------------------------------- Cookie-Richtlinie */

.yac-policy-scroll {
	overflow-x: auto;
}

.yac-policy-table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: .9375rem;
}

.yac-policy-table th,
.yac-policy-table td {
	text-align: start;
	vertical-align: top;
	padding: .55rem .65rem;
	border-bottom: 1px solid var(--yac-line);
}

.yac-policy-table thead th {
	border-bottom-width: 2px;
	font-weight: 700;
}

/* ------------------------------------------------------------- Sonstiges */

.yac-sr {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.yac-root *,
	.yac-ph * {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

@media (prefers-contrast: more) {
	.yac-dialog,
	.yac-group,
	.yac-ph {
		border-width: 2px;
		border-color: var(--yac-ink);
	}
}

/* ------------------------------------------------ Widerruf-Link im Footer */

/*
 * Der Link erbt bewusst Schrift und Farbe seiner Umgebung: er landet per
 * JavaScript in der Linkleiste des Themes und soll dort nicht auffallen wie
 * ein Fremdkoerper. Nur wenn er allein steht (kein Ziel gefunden), bekommt er
 * eigenen Abstand.
 */
.yac-footerlink {
	font: inherit;
	color: inherit;
}

.yac-footerlink:not([data-yac-eingehaengt]) {
	text-align: center;
	padding: 1rem;
	font-size: .9375rem;
}

.yac-footerlink .yac-revoke {
	font: inherit;
	color: inherit;
}

/*
 * Wenn der Knopf die Nachbarlinks nachahmt, verliert er womoeglich ihre
 * Unterstreichung — dann ist er von gewoehnlichem Text kaum zu unterscheiden.
 * Bei Hover und Tastaturfokus kommt sie zurueck: das macht ihn erkennbar,
 * ohne das Erscheinungsbild des Footers zu stoeren.
 */
.yac-revoke:hover,
.yac-revoke:focus-visible {
	text-decoration-line: underline !important;
	text-underline-offset: 3px;
}

/*
 * Angeglichen oder nicht — anfassbar muss er bleiben.
 *
 * Die Klickflaeche liegt bewusst in einem Pseudo-Element und NICHT in
 * Polsterung oder Mindesthoehe des Knopfes selbst. Beides macht den Knopf
 * hoeher als die Links daneben, und in einem Flex-Footer (der Normalfall)
 * beginnt sein Text dann genau um die Polsterung tiefer — gemessen 4 px auf
 * ya-media.net. Der Knopf sieht dann verrutscht aus, obwohl Schrift, Farbe
 * und Groesse stimmen.
 *
 * So ist er im Layout ein Textstueck wie ein <a>, sitzt also auf derselben
 * Grundlinie, und hat trotzdem ein groesseres Ziel als zuvor (21 px Text
 * plus zweimal 8 px = 37 px statt 29 px).
 */
.footer-links .yac-revoke,
.yac-footerlink .yac-revoke {
	position: relative;
	padding: 0;
	min-height: 0;
	cursor: pointer;
}

.footer-links .yac-revoke::before,
.yac-footerlink .yac-revoke::before {
	content: '';
	position: absolute;
	inset: -0.5rem -0.25rem;
}