/*
 * Cookie-Dialog und Platzhalter für gesperrte Inhalte und Karten.
 * Farben, Abstände, Radien und Schatten nur aus den Tokens des Themes (theme.json, als --wp--preset--* und --wp--custom--*), keine festen Werte.
 * Schrift wird vom Theme (Inter) übernommen. Regeln stehen bewusst mit zwei Klassen, damit Cache-Plugins die Reihenfolge der Stylesheets nicht aushebeln.
 */

.bpp-consent,
.bpp-consent *,
.bpp-consent *::before,
.bpp-consent *::after { box-sizing: border-box; }
.bpp-consent { color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--inter); font-size: 0.9375rem; font-weight: 400; line-height: 1.5; -webkit-text-size-adjust: 100%; }
.bpp-consent [hidden] { display: none; }

/* ------------------------------------------------------------------ Lage des Dialogs */
.bpp-consent.bpp-consent--dialog { position: fixed; z-index: 99999; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg); pointer-events: none; }
.bpp-consent.bpp-consent--unten-links { justify-content: flex-start; }
.bpp-consent.bpp-consent--unten-rechts { justify-content: flex-end; }
.bpp-consent.bpp-consent--mitte { top: 0; align-items: center; padding: var(--wp--preset--spacing--lg); pointer-events: auto; }

.bpp-consent .bpp-consent__blende { position: absolute; inset: 0; background: var(--wp--preset--color--ink-strong); opacity: 0.55; }

.bpp-consent .bpp-consent__dialog { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 46rem; max-height: 85vh; max-height: 85dvh; border: 1px solid var(--wp--preset--color--hairline); border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--surface); box-shadow: var(--wp--preset--shadow--overlay); pointer-events: auto; animation: bpp-consent-ein 200ms ease-out; }
.bpp-consent.bpp-consent--unten-links .bpp-consent__dialog,
.bpp-consent.bpp-consent--unten-rechts .bpp-consent__dialog { max-width: 26rem; }
.bpp-consent.bpp-consent--mitte .bpp-consent__dialog { max-width: 40rem; }
.bpp-consent .bpp-consent__dialog:focus { outline: none; }

@keyframes bpp-consent-ein {
	from { opacity: 0; transform: translateY(0.75rem); }
	to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ Aufbau */
.bpp-consent .bpp-consent__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--wp--preset--spacing--lg); padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl) 0; }
.bpp-consent .bpp-consent__titel { margin: 0; color: var(--wp--preset--color--ink-strong); font-family: inherit; font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.bpp-consent .bpp-consent__inhalt { flex: 1 1 auto; min-height: 0; padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg); overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; }
.bpp-consent .bpp-consent__text { margin: 0; color: var(--wp--preset--color--body); }
.bpp-consent .bpp-consent__text a,
.bpp-consent .bpp-consent__dl a { color: var(--wp--preset--color--orange-700); text-decoration: underline; text-underline-offset: 0.16em; }
.bpp-consent .bpp-consent__text a:hover,
.bpp-consent .bpp-consent__dl a:hover { text-decoration-thickness: 2px; }
.bpp-consent .bpp-consent__vorschau { margin: 0 0 var(--wp--preset--spacing--md); padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md); border: 1px solid var(--wp--preset--color--orange-200); border-radius: var(--wp--custom--radius--sm); background: var(--wp--preset--color--orange-50); color: var(--wp--preset--color--ink); font-weight: 600; }
.bpp-consent .bpp-consent__fuss { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--md); padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl); border-top: 1px solid var(--wp--preset--color--hairline); }

/* ------------------------------------------------------------------ Knöpfe: Akzeptieren und Ablehnen sind immer gleich */
.bpp-consent .bpp-consent__knopf { appearance: none; -webkit-appearance: none; flex: 1 1 10rem; display: inline-flex; align-items: center; justify-content: center; min-height: var(--wp--custom--touch); margin: 0; padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl); border: 0; border-radius: var(--wp--custom--radius--md); font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.bpp-consent .bpp-consent__knopf--wahl { background: var(--wp--preset--color--orange-500); color: var(--wp--preset--color--ink-strong); }
.bpp-consent .bpp-consent__knopf--wahl:hover { background: var(--wp--preset--color--orange-600); }
.bpp-consent .bpp-consent__knopf--zweit { background: transparent; color: var(--wp--preset--color--ink); box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink); }
.bpp-consent .bpp-consent__knopf--zweit:hover { background: var(--wp--preset--color--canvas-soft); }
.bpp-consent .bpp-consent__zu { appearance: none; -webkit-appearance: none; flex: 0 0 auto; min-height: 2.25rem; margin: 0; padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md); border: 1px solid var(--wp--preset--color--muted); border-radius: var(--wp--custom--radius--pill); background: transparent; color: var(--wp--preset--color--ink); font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.25; cursor: pointer; transition: background-color 150ms ease; }
.bpp-consent .bpp-consent__zu:hover { background: var(--wp--preset--color--canvas-soft); }

.bpp-consent :is(.bpp-consent__knopf, .bpp-consent__zu, .bpp-consent__mehr, a):focus-visible,
.bpp-consent .bpp-consent__schalter:focus-visible + .bpp-consent__regler { outline: 3px solid var(--wp--preset--color--ink-strong); outline-offset: 2px; }

/* ------------------------------------------------------------------ Kategorien und Dienste */
.bpp-consent .bpp-consent__kat { margin-top: var(--wp--preset--spacing--lg); padding-top: var(--wp--preset--spacing--lg); border-top: 1px solid var(--wp--preset--color--hairline); }
.bpp-consent .bpp-consent__kat-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--lg); }
.bpp-consent .bpp-consent__kat-titel { margin: 0; color: var(--wp--preset--color--ink-strong); font-family: inherit; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.bpp-consent .bpp-consent__immer { flex: 0 0 auto; padding: 2px var(--wp--preset--spacing--md); border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--canvas-soft); color: var(--wp--preset--color--ink); font-size: 0.8125rem; font-weight: 600; }
.bpp-consent .bpp-consent__kat-text { margin: var(--wp--preset--spacing--sm) 0 0; color: var(--wp--preset--color--body); }
.bpp-consent .bpp-consent__dienst { margin-top: var(--wp--preset--spacing--md); padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg); border: 1px solid var(--wp--preset--color--hairline); border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--canvas-soft); }
.bpp-consent .bpp-consent__zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--lg); }
.bpp-consent .bpp-consent__name { min-width: 0; color: var(--wp--preset--color--ink-strong); font-weight: 700; cursor: pointer; }

/* Schalter: das Eingabefeld liegt unsichtbar über dem Regler, bleibt aber bedienbar */
.bpp-consent .bpp-consent__sw { position: relative; flex: 0 0 auto; display: inline-block; width: 2.75rem; height: 1.5rem; }
.bpp-consent .bpp-consent__schalter { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bpp-consent .bpp-consent__regler { position: absolute; inset: 0; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--muted); transition: background-color 150ms ease; pointer-events: none; }
.bpp-consent .bpp-consent__regler::before { content: ""; position: absolute; top: 3px; left: 3px; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--wp--preset--color--surface); transition: transform 150ms ease; }
.bpp-consent .bpp-consent__schalter:checked + .bpp-consent__regler { background: var(--wp--preset--color--ink-strong); }
.bpp-consent .bpp-consent__schalter:checked + .bpp-consent__regler::before { transform: translateX(1.25rem); }

.bpp-consent .bpp-consent__mehr { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--sm); margin: var(--wp--preset--spacing--sm) 0 0; padding: var(--wp--preset--spacing--xs) 0; border: 0; background: transparent; color: var(--wp--preset--color--orange-700); font: inherit; font-size: 0.875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 0.16em; cursor: pointer; }
.bpp-consent .bpp-consent__mehr:hover { text-decoration-thickness: 2px; }
.bpp-consent .bpp-consent__mehr::after { content: ""; width: 0.4375rem; height: 0.4375rem; margin-top: -0.25rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 150ms ease; }
.bpp-consent .bpp-consent__mehr[aria-expanded="true"]::after { margin-top: 0.125rem; transform: rotate(-135deg); }
.bpp-consent .bpp-consent__details { margin-top: var(--wp--preset--spacing--sm); }
.bpp-consent .bpp-consent__dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 0; margin: 0; color: var(--wp--preset--color--body); }
.bpp-consent .bpp-consent__dl dt { margin-top: var(--wp--preset--spacing--sm); color: var(--wp--preset--color--ink-strong); font-size: 0.8125rem; font-weight: 700; }
.bpp-consent .bpp-consent__dl dd { margin: 0; min-width: 0; }
.bpp-consent .bpp-consent__id { margin: var(--wp--preset--spacing--lg) 0 0; color: var(--wp--preset--color--muted); font-size: 0.8125rem; }
.bpp-consent .bpp-consent__id code { font-family: inherit; font-weight: 600; color: var(--wp--preset--color--ink); word-break: break-all; }

/* ------------------------------------------------------------------ Platzhalter für gesperrte Inhalte und Karten */
.bpp-consent.bpp-consent--platzhalter { display: grid; gap: var(--wp--preset--spacing--lg); align-content: center; width: 100%; padding: var(--wp--preset--spacing--xl); border: 1px solid var(--wp--preset--color--hairline); border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--canvas-soft); }
.bpp-consent.bpp-consent--platzhalter .bpp-consent__platzhalter-text,
.bpp-consent.bpp-consent--platzhalter .bpp-consent__aus { margin: 0; color: var(--wp--preset--color--body); font-size: 1rem; }
.bpp-consent.bpp-consent--platzhalter .bpp-consent__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl); }
.bpp-consent.bpp-consent--platzhalter .bpp-consent__sz { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--md); min-height: var(--wp--custom--touch); color: var(--wp--preset--color--ink-strong); font-weight: 600; cursor: pointer; }
.bpp-consent.bpp-consent--platzhalter .bpp-consent__knopf { flex: 0 1 auto; min-height: 2.5rem; padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg); font-size: 0.9375rem; }
/* Karte in der Containerhöhe von GeoDirectory: Der Platzhalter füllt die Fläche und scrollt nicht seitlich */
.bpp-consent.bpp-consent--karte { min-height: 14rem; height: 100%; }

/* ------------------------------------------------------------------ Handy: volle Breite unten */
@media (max-width: 639px) {
	.bpp-consent.bpp-consent--dialog,
	.bpp-consent.bpp-consent--mitte { align-items: flex-end; padding: 0; }
	.bpp-consent.bpp-consent--dialog .bpp-consent__dialog { max-width: none; max-height: 78vh; max-height: 78dvh; border-radius: var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0 0; border-bottom: 0; }
	.bpp-consent .bpp-consent__kopf { padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg) 0; }
	.bpp-consent .bpp-consent__inhalt { padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg); }
	.bpp-consent .bpp-consent__fuss { padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg); }
	.bpp-consent .bpp-consent__knopf { flex: 1 1 100%; }
	.bpp-consent.bpp-consent--platzhalter { padding: var(--wp--preset--spacing--lg); }
	.bpp-consent.bpp-consent--platzhalter .bpp-consent__knopf { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.bpp-consent .bpp-consent__dialog { animation: none; }
	.bpp-consent .bpp-consent__knopf,
	.bpp-consent .bpp-consent__zu,
	.bpp-consent .bpp-consent__regler,
	.bpp-consent .bpp-consent__regler::before,
	.bpp-consent .bpp-consent__mehr::after { transition: none; }
}