/* WL Consent – Frontend. Farben/Größen kommen aus CSS-Variablen (--wlc-*), gesetzt aus Theme oder Einstellungen. */

.wlc,
.wlc *,
.wlc-placeholder,
.wlc-declaration { box-sizing: border-box; }

.wlc {
	--wlc-shadow: 0 10px 40px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08);
	position: fixed;
	z-index: 2147483000;
	inset: 0;
	pointer-events: none;
	font-family: var(--wlc-font, inherit);
	font-size: var(--wlc-size, 15px);
	line-height: 1.5;
	color: var(--wlc-text, #1d1d1f);
}
.wlc[hidden] { display: none !important; }

.wlc-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity .2s ease;
	display: none;
}
.wlc--overlay .wlc-backdrop { display: block; pointer-events: auto; }
.wlc.is-visible .wlc-backdrop { opacity: 1; }

.wlc-dialog {
	position: absolute;
	pointer-events: auto;
	background: var(--wlc-bg, #fff);
	color: var(--wlc-text, #1d1d1f);
	border: 1px solid var(--wlc-border, #e3e3e6);
	border-radius: var(--wlc-radius, 12px);
	box-shadow: var(--wlc-shadow);
	padding: 1.4em 1.5em 1.2em;
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .2s ease, transform .2s ease;
	outline: none;
}
.wlc.is-visible .wlc-dialog { opacity: 1; transform: none; }

/* Layouts */
.wlc--box-left .wlc-dialog,
.wlc--box-right .wlc-dialog { bottom: 16px; width: min(var(--wlc-max-width, 460px), calc(100vw - 32px)); }
.wlc--box-left .wlc-dialog { left: 16px; }
.wlc--box-right .wlc-dialog { right: 16px; }

.wlc--bar-bottom .wlc-dialog,
.wlc--bar-top .wlc-dialog { left: 0; right: 0; border-radius: 0; border-left: 0; border-right: 0; padding-inline: max(1.5em, calc((100vw - 1100px) / 2)); }
.wlc--bar-bottom .wlc-dialog { bottom: 0; }
.wlc--bar-top .wlc-dialog { top: 0; transform: translateY(-12px); }

.wlc--modal .wlc-dialog {
	top: 50%; left: 50%;
	width: min(560px, calc(100vw - 32px));
	transform: translate(-50%, calc(-50% + 12px));
}
.wlc--modal.is-visible .wlc-dialog { transform: translate(-50%, -50%); }

@media (min-width: 900px) {
	.wlc--bar-bottom [data-wlc-view="main"],
	.wlc--bar-top [data-wlc-view="main"] {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas: "title actions" "msg actions" "links actions";
		column-gap: 2em;
		align-items: center;
	}
	.wlc--bar-bottom [data-wlc-view="main"][hidden],
	.wlc--bar-top [data-wlc-view="main"][hidden] { display: none; }
	.wlc--bar-bottom .wlc-title, .wlc--bar-top .wlc-title { grid-area: title; }
	.wlc--bar-bottom .wlc-message, .wlc--bar-top .wlc-message { grid-area: msg; }
	.wlc--bar-bottom .wlc-links, .wlc--bar-top .wlc-links { grid-area: links; }
	.wlc--bar-bottom [data-wlc-view="main"] .wlc-actions,
	.wlc--bar-top [data-wlc-view="main"] .wlc-actions { grid-area: actions; flex-direction: column; margin: 0; }
	.wlc--bar-bottom .wlc-logo, .wlc--bar-top .wlc-logo { display: none; }
}

/* Inhalt */
.wlc-logo { display: block; max-height: 36px; width: auto; margin: 0 0 .8em; }
.wlc .wlc-title {
	font-family: inherit;
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 .5em;
	padding: 0;
	color: inherit;
	letter-spacing: 0;
	text-transform: none;
}
.wlc-message p { margin: 0 0 .6em; font-size: .95em; }
.wlc-links { margin: 0 0 .4em; font-size: .85em; display: flex; gap: 1.2em; flex-wrap: wrap; }
.wlc a { color: var(--wlc-primary, #1f6feb); text-decoration: underline; text-underline-offset: 2px; }

.wlc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	margin-top: 1em;
}
.wlc-actions .wlc-btn { flex: 1 1 auto; }
.wlc-actions .wlc-btn--link { flex: 0 0 auto; margin-right: auto; }

/* Buttons (auch für Platzhalter & Erklärung) */
.wlc-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.6em;
	padding: .55em 1.1em;
	font: inherit;
	font-size: .92em;
	font-weight: 600;
	line-height: 1.2;
	border-radius: var(--wlc-btn-radius, 8px);
	border: 2px solid var(--wlc-primary, #1f6feb);
	cursor: pointer;
	text-decoration: none !important;
	transition: filter .15s ease, background-color .15s ease;
	white-space: nowrap;
	box-shadow: none;
	text-transform: none;
	letter-spacing: 0;
}
.wlc-btn--primary { background: var(--wlc-primary, #1f6feb); color: var(--wlc-primary-text, #fff) !important; }
.wlc-btn--secondary { background: transparent; color: var(--wlc-primary, #1f6feb) !important; }
.wlc-btn--link { background: transparent; border-color: transparent; color: var(--wlc-text, #1d1d1f) !important; text-decoration: underline !important; padding-inline: .3em; font-weight: 500; }
.wlc-btn:hover { filter: brightness(.92); }
.wlc-btn:focus-visible,
.wlc-cat-toggle:focus-visible,
.wlc-back:focus-visible,
.wlc-switch input:focus-visible + .wlc-switch-ui,
.wlc-float:focus-visible { outline: 3px solid var(--wlc-primary, #1f6feb); outline-offset: 2px; }

/* Gleichwertige Buttons: „Nur notwendige“ wie „Alle akzeptieren“ */
.wlc--equal [data-wlc-action="reject"] { background: var(--wlc-primary, #1f6feb); color: var(--wlc-primary-text, #fff) !important; }

/* Details-Ansicht */
.wlc-back {
	appearance: none; background: none; border: 0; padding: 0; margin: 0 0 .6em;
	font: inherit; font-size: .85em; color: var(--wlc-muted, #6b6b70); cursor: pointer;
}
.wlc-categories { border-top: 1px solid var(--wlc-border, #e3e3e6); }
.wlc-cat { border-bottom: 1px solid var(--wlc-border, #e3e3e6); }
.wlc-cat-head { display: flex; align-items: center; gap: .8em; padding: .7em 0; }
.wlc-cat-toggle {
	appearance: none; background: none; border: 0; padding: 0; margin: 0;
	flex: 1; display: flex; align-items: center; gap: .5em; text-align: left;
	font: inherit; font-weight: 600; color: inherit; cursor: pointer;
}
.wlc-cat-toggle::before {
	content: ""; width: .5em; height: .5em; flex: none;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(-45deg); transition: transform .15s ease; margin-right: .2em;
}
.wlc-cat-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
.wlc-cat-count {
	font-size: .75em; font-weight: 600; min-width: 1.6em; padding: .1em .45em; border-radius: 99px; text-align: center;
	background: var(--wlc-border, #e3e3e6); color: var(--wlc-text, #1d1d1f);
}
.wlc-cat-body { padding: 0 0 .8em 1.2em; font-size: .88em; color: var(--wlc-muted, #6b6b70); }
.wlc-cat-body p { margin: 0 0 .5em; }
.wlc-services { list-style: none; margin: 0; padding: 0; }
.wlc-services li { padding: .4em 0; border-top: 1px dashed var(--wlc-border, #e3e3e6); color: var(--wlc-text, #1d1d1f); }
.wlc-services small { color: var(--wlc-muted, #6b6b70); }

/* Schalter */
.wlc-switch { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.wlc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: inherit; }
.wlc-switch-ui {
	width: 2.6em; height: 1.5em; border-radius: 99px; background: var(--wlc-border, #ccc);
	position: relative; transition: background-color .15s ease;
}
.wlc-switch-ui::after {
	content: ""; position: absolute; top: .2em; left: .2em; width: 1.1em; height: 1.1em; border-radius: 50%;
	background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s ease;
}
.wlc-switch input:checked + .wlc-switch-ui { background: var(--wlc-primary, #1f6feb); }
.wlc-switch input:checked + .wlc-switch-ui::after { transform: translateX(1.1em); }
.wlc-switch input:disabled + .wlc-switch-ui { opacity: .55; }
.wlc-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wlc-powered { margin-top: .9em; font-size: .72em; text-align: right; color: var(--wlc-muted, #6b6b70); }
.wlc-powered a { color: inherit; }

/* Schwebender Button */
.wlc-float {
	position: fixed; bottom: 16px; z-index: 2147482999;
	width: 44px; height: 44px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--wlc-bg, #fff); color: var(--wlc-primary, #1f6feb);
	border: 1px solid var(--wlc-border, #e3e3e6); box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
	cursor: pointer; padding: 0; transition: transform .15s ease;
}
.wlc-float:hover { transform: scale(1.08); }
.wlc-float--left { left: 16px; }
.wlc-float--right { right: 16px; }
.wlc-float[hidden] { display: none; }

/* Mobil */
@media (max-width: 600px) {
	.wlc--box-left .wlc-dialog,
	.wlc--box-right .wlc-dialog { left: 8px; right: 8px; bottom: 8px; width: auto; }
	.wlc-dialog { padding: 1.1em 1.1em 1em; }
	.wlc-actions { flex-direction: column-reverse; }
	.wlc-actions .wlc-btn { width: 100%; }
	.wlc-actions .wlc-btn--link { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.wlc-dialog, .wlc-backdrop, .wlc-switch-ui, .wlc-switch-ui::after { transition: none; }
}

/* Platzhalter für blockierte Inhalte */
.wlc-placeholder {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8em;
	width: 100%; min-height: 220px; aspect-ratio: 16 / 9; padding: 1.5em; text-align: center;
	background: repeating-linear-gradient(45deg, rgba(127, 127, 127, .06) 0 12px, rgba(127, 127, 127, .1) 12px 24px), var(--wlc-bg, #f6f6f7);
	border: 1px solid var(--wlc-border, #e3e3e6); border-radius: var(--wlc-radius, 12px);
	font-family: var(--wlc-font, inherit); font-size: var(--wlc-size, 15px); color: var(--wlc-text, #1d1d1f);
}
.wlc-placeholder p { margin: 0; max-width: 34em; font-size: .9em; }
.wlc-placeholder-actions { display: flex; flex-wrap: wrap; gap: .5em; justify-content: center; }

/* Cookie-Erklärung */
.wlc-declaration { --wlc-gap: 1.5em; }
.wlc-decl-status {
	padding: 1em 1.2em; margin: 0 0 var(--wlc-gap);
	border: 1px solid var(--wlc-border, #e3e3e6); border-left: 4px solid var(--wlc-primary, #1f6feb);
	border-radius: var(--wlc-radius, 12px);
}
.wlc-decl-status h3 { margin-top: 0; }
.wlc-decl-status [data-wlc-status-text] { word-break: break-all; font-size: .92em; }
.wlc-decl-buttons { display: flex; flex-wrap: wrap; gap: .5em; margin-bottom: 0; }
.wlc-decl-meta { font-size: .88em; opacity: .75; }
.wlc-decl-cat { margin: 0 0 var(--wlc-gap); }
.wlc-decl-count { font-weight: 400; opacity: .6; }
.wlc-decl-service { margin: 0 0 1.2em; padding: 0 0 0 1em; border-left: 2px solid var(--wlc-border, #e3e3e6); }
.wlc-decl-service h4 { margin: 0 0 .3em; }
.wlc-decl-service h4 small { font-weight: 400; opacity: .7; }
.wlc-table-wrap { overflow-x: auto; }
.wlc-table { width: 100%; border-collapse: collapse; font-size: .88em; margin: .5em 0 0; }
.wlc-table th, .wlc-table td { padding: .5em .7em; text-align: left; vertical-align: top; border-bottom: 1px solid var(--wlc-border, #e3e3e6); }
.wlc-table th { font-weight: 600; background: rgba(127, 127, 127, .07); }
.wlc-table code { font-size: .95em; white-space: nowrap; }
@media (max-width: 600px) {
	.wlc-table thead { display: none; }
	.wlc-table tr { display: block; padding: .5em 0; border-bottom: 1px solid var(--wlc-border, #e3e3e6); }
	.wlc-table td { display: flex; gap: 1em; border: 0; padding: .2em 0; }
	.wlc-table td::before { content: attr(data-label); font-weight: 600; min-width: 8em; }
}
.wlc-settings-link { cursor: pointer; }

/* Browser-Audit-Hinweis (nur Admin) */
.wlc-audit-bar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 2147483001;
	padding: .6em 1em; background: #b45309; color: #fff; font: 600 13px/1.4 system-ui, sans-serif; text-align: center;
}