/* ==========================================================================
   Burst Cookie Consent – Frontend
   --------------------------------------------------------------------------
   Sämtliche Farben und Maße stammen aus CSS Custom Properties, die
   DIGINS_BCC_Styles aus den Backend-Einstellungen erzeugt. Die hier
   hinterlegten Werte hinter dem Komma sind reine Rückfallebenen, falls das
   eigene Styling im Backend abgeschaltet wurde.

   Alle Selektoren beginnen mit .digins-bcc- und liegen innerhalb des
   Plugin-Containers. Dadurch wirkt das Plugin nicht auf Theme- oder
   Elementor-Elemente – und umgekehrt greifen deren globale Button-Regeln
   nicht in den Banner hinein.
   ========================================================================== */

/* Sichtbarkeitssteuerung
   --------------------------------------------------------------------------
   Der Banner ist grundsätzlich verborgen und wird allein über eine Klasse am
   html-Element sichtbar, die das Anti-Flicker-Snippet noch im Kopfbereich
   setzt. Damit steht die Entscheidung fest, bevor der Seiteninhalt gerendert
   wird: Der Banner blitzt weder auf, wenn bereits zugestimmt wurde, noch
   springt er verzögert nach.

   Bewusst nicht über das hidden-Attribut gelöst – das müsste JavaScript im
   Fußbereich entfernen, und genau dann entstünde das verzögerte Aufspringen.

   Ohne JavaScript wird keine der beiden Klassen gesetzt: Banner bleibt
   verborgen, Burst bleibt dauerhaft blockiert.
   ========================================================================== */

.digins-bcc-banner,
.digins-bcc-overlay,
.digins-bcc-float {
	display: none;
}

/* Keine Entscheidung getroffen: Banner zeigen. */
.digins-bcc-undecided .digins-bcc-banner,
.digins-bcc-banner--open {
	display: block;
}

.digins-bcc-undecided .digins-bcc-overlay,
.digins-bcc-overlay--open {
	display: block;
}

/* Entscheidung liegt vor: nur die Schaltfläche zum erneuten Öffnen. */
.digins-bcc-decided .digins-bcc-float {
	display: inline-flex;
}

/* Beim Öffnen über die Schaltfläche wird die Abdunklung mitgeführt und der
   Banner gewinnt gegen die Klasse am html-Element. */
.digins-bcc-banner--closed {
	display: none !important;
}

/* ==========================================================================
   Abdunklung (nur bei zentrierter Darstellung)
   ========================================================================== */

.digins-bcc-overlay {
	position: fixed;
	inset: 0;
	z-index: 999998;
	background: var(--digins-bcc-overlay, #000000);
	opacity: var(--digins-bcc-overlay-opacity, 0.5);
}

/* ==========================================================================
   Banner
   ========================================================================== */

.digins-bcc-banner {
	position: fixed;
	z-index: 999999;
	box-sizing: border-box;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	background: var(--digins-bcc-background, #ffffff);
	color: var(--digins-bcc-text, #333333);
	border: var(--digins-bcc-border-width, 1px) solid var(--digins-bcc-border, #dddddd);
	border-radius: var(--digins-bcc-radius-banner, 0.5rem);
	box-shadow: var(--digins-bcc-shadow, 0 4px 16px rgba(0, 0, 0, 0.15));
	font-family: var(--digins-bcc-font, inherit);
	font-size: var(--digins-bcc-text-size, 0.9375rem);
	line-height: var(--digins-bcc-line-height, 1.5);
	text-align: left;
}

.digins-bcc-banner * {
	box-sizing: border-box;
}

.digins-bcc-banner__inner {
	position: relative;
	padding: var(--digins-bcc-padding, 1.5rem);
}

/* Position: untere Leiste */
.digins-bcc-banner--bottom {
	right: 1rem;
	bottom: 1rem;
	left: 1rem;
	width: auto;
	max-width: var(--digins-bcc-max-width, 64rem);
	margin: 0 auto;
}

/* Position: zentriert */
.digins-bcc-banner--center {
	top: 50%;
	left: 50%;
	width: calc(100% - 2rem);
	max-width: var(--digins-bcc-max-width, 64rem);
	transform: translate(-50%, -50%);
}

/* Position: Ecke unten rechts */
.digins-bcc-banner--corner {
	right: 1rem;
	bottom: 1rem;
	width: calc(100% - 2rem);
	max-width: 26rem;
}

/* ==========================================================================
   Typografie im Banner
   ========================================================================== */

.digins-bcc-banner__heading {
	margin: 0 0 0.5rem;
	color: var(--digins-bcc-heading, #111111);
	font-family: inherit;
	font-size: var(--digins-bcc-heading-size, 1.25rem);
	font-weight: var(--digins-bcc-heading-weight, 600);
	line-height: 1.3;
}

.digins-bcc-banner__description {
	margin: 0 0 var(--digins-bcc-gap, 1rem);
	color: var(--digins-bcc-text, #333333);
}

.digins-bcc-banner__description p {
	margin: 0 0 0.5rem;
	font-size: inherit;
	line-height: inherit;
}

.digins-bcc-banner__description p:last-child {
	margin-bottom: 0;
}

.digins-bcc-banner__policy {
	margin-top: 0.5rem;
}

.digins-bcc-link,
.digins-bcc-banner__description a {
	color: var(--digins-bcc-link, #6e6654);
	text-decoration: underline;
}

.digins-bcc-link:hover,
.digins-bcc-banner__description a:hover {
	color: var(--digins-bcc-link-hover, #5b5445);
	text-decoration: none;
}

/* ==========================================================================
   Schaltflächen
   --------------------------------------------------------------------------
   Zustimmen und Ablehnen sind bewusst gleich gestaltet: gleiche Größe,
   gleiches Gewicht, gleiche Erreichbarkeit. Kein hervorgehobenes Zustimmen.

   Die Selektoren sind ausreichend spezifisch, damit globale Button-Regeln aus
   Theme oder Elementor nicht durchschlagen. !important wird nur dort gesetzt,
   wo genau das erfahrungsgemäß passiert.
   ========================================================================== */

.digins-bcc-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	align-items: center;
	margin-top: var(--digins-bcc-gap, 1rem);
}

/* Zustandsabhängige Sichtbarkeit der Aktionen.
   --------------------------------------------------------------------------
   „Auswahl speichern" erscheint nur im aufgeklappten Zustand, „Einstellungen"
   nur im zugeklappten. Dadurch bleibt der Button-Bereich in beiden Zuständen
   aufgeräumt und zeigt keine widersprüchlichen Aktionen nebeneinander.

   Die Selektoren nennen bewusst zusätzlich .digins-bcc-button: Die allgemeine
   Button-Regel setzt display auf inline-flex und hat zwei Klassen. Nur mit
   gleicher oder höherer Spezifität setzt sich das Verstecken durch. */
.digins-bcc-banner .digins-bcc-button.digins-bcc-only-details {
	display: none;
}

.digins-bcc-banner--details-open .digins-bcc-button.digins-bcc-only-details {
	display: inline-flex;
}

.digins-bcc-banner--details-open .digins-bcc-button.digins-bcc-only-collapsed {
	display: none;
}

/* „Statistik zulassen" ist in jedem Zustand die markante Hauptaktion. Alle übrigen
   Schaltflächen – Ablehnen, Einstellungen, Auswahl speichern – bleiben bewusst
   leichter, damit die Zustimmung klar heraussticht. */

.digins-bcc-banner .digins-bcc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem; /* Mindestgröße für sichere Bedienung per Finger. */
	margin: 0;
	padding: var(--digins-bcc-button-padding-y, 0.75rem) var(--digins-bcc-button-padding-x, 1.25rem);
	border: 0;
	border-radius: var(--digins-bcc-radius-button, 0.375rem);
	font-family: inherit;
	font-size: var(--digins-bcc-button-size, 0.9375rem);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease;
}

.digins-bcc-banner .digins-bcc-button:active {
	transform: translateY(1px);
}

.digins-bcc-banner .digins-bcc-button--primary {
	background: var(--digins-bcc-primary, #6e6654) !important;
	color: var(--digins-bcc-primary-text, #ffffff) !important;
}

.digins-bcc-banner .digins-bcc-button--primary:hover {
	background: var(--digins-bcc-primary-hover, #5b5445) !important;
}

.digins-bcc-banner .digins-bcc-button--secondary {
	background: var(--digins-bcc-secondary, #f2f1ee) !important;
	color: var(--digins-bcc-secondary-text, #333333) !important;
	font-weight: 500; /* Leichter als die markante Hauptaktion. */
}

.digins-bcc-banner .digins-bcc-button--secondary:hover {
	background: var(--digins-bcc-secondary-hover, #e5e3dd) !important;
}

/* Zurückhaltende Schaltfläche für "Einstellungen" – bleibt ein Button, kein Link. */
.digins-bcc-banner .digins-bcc-button--quiet {
	min-width: 0; /* Nicht auf Buttonbreite ziehen – sie soll zurückhaltend wirken. */
	padding-right: 0.5rem;
	padding-left: 0.5rem;
	background: transparent !important;
	color: var(--digins-bcc-link, #6e6654) !important;
	font-weight: 500;
	text-decoration: underline;
}

.digins-bcc-banner .digins-bcc-button--quiet:hover {
	text-decoration: none;
}

/* Schließen-Symbol */
.digins-bcc-banner__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--digins-bcc-radius-button, 0.375rem);
	color: var(--digins-bcc-muted, #666666);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

/* ==========================================================================
   Kategorien
   ========================================================================== */

.digins-bcc-banner__details {
	margin: 0 0 var(--digins-bcc-gap, 1rem);
	padding-top: var(--digins-bcc-gap, 1rem);
	border-top: var(--digins-bcc-border-width, 1px) solid var(--digins-bcc-border, #dddddd);
}

.digins-bcc-category + .digins-bcc-category {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: var(--digins-bcc-border-width, 1px) solid var(--digins-bcc-border, #dddddd);
}

.digins-bcc-category__header {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}

.digins-bcc-category__title {
	color: var(--digins-bcc-heading, #111111);
	font-weight: var(--digins-bcc-heading-weight, 600);
}

label.digins-bcc-category__title {
	cursor: pointer;
}

.digins-bcc-category__always {
	color: var(--digins-bcc-muted, #666666);
	font-size: 0.875em;
}

.digins-bcc-category__description {
	margin: 0.25rem 0 0;
	color: var(--digins-bcc-muted, #666666);
	font-size: 0.9375em;
}

/* ==========================================================================
   Umschalter
   --------------------------------------------------------------------------
   Die Checkbox bleibt bedienbar und für Screenreader vorhanden, wird aber
   optisch durch die Spur ersetzt. Sie ist bewusst nicht display:none, sonst
   wäre sie nicht mehr fokussierbar.
   ========================================================================== */

.digins-bcc-toggle {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	width: 2.75rem;
	height: 1.5rem;
}

.digins-bcc-toggle__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.digins-bcc-toggle__track {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--digins-bcc-toggle-off, #c4c4c4);
	border-radius: 1rem;
	pointer-events: none;
	transition: background-color 0.15s ease;
}

.digins-bcc-toggle__knob {
	display: block;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.1875rem;
	background: var(--digins-bcc-toggle-knob, #ffffff);
	border-radius: 50%;
	transition: transform 0.15s ease;
}

.digins-bcc-toggle__input:checked ~ .digins-bcc-toggle__track {
	background: var(--digins-bcc-toggle-on, #6e6654);
}

.digins-bcc-toggle__input:checked ~ .digins-bcc-toggle__track .digins-bcc-toggle__knob {
	transform: translateX(1.25rem);
}

/* ==========================================================================
   Erneut öffnen
   ========================================================================== */

.digins-bcc-float {
	/* Der Button steht außerhalb des Banner-Containers. Damit Theme- und Elementor-Stile
	   für button nicht durchschlagen (Rahmenfarbe, native Optik), sind die entscheidenden
	   Angaben mit !important abgesichert – sonst erbt der Button z. B. die Akzentfarbe des
	   Themes als Rahmen. */
	position: fixed !important;
	bottom: 1rem;
	left: 1rem;
	z-index: 999997;
	box-sizing: border-box !important;
	/* Sichtbar wird der Button über .digins-bcc-decided als inline-flex. Damit der Text
	   darin mittig sitzt, sind align-items und justify-content zwingend – ohne sie stellt
	   Flexbox den Text oben-links. */
	align-items: center !important;
	justify-content: center !important;
	min-height: 2.75rem;
	width: auto !important;
	margin: 0 !important;
	padding: 0.5rem 1rem !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	background: var(--digins-bcc-secondary, #f2f1ee) !important;
	color: var(--digins-bcc-secondary-text, #333333) !important;
	border: var(--digins-bcc-border-width, 1px) solid var(--digins-bcc-border, #dddddd) !important;
	border-radius: var(--digins-bcc-radius-button, 0.375rem) !important;
	box-shadow: var(--digins-bcc-shadow, 0 4px 16px rgba(0, 0, 0, 0.15)) !important;
	font-family: var(--digins-bcc-font, inherit);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer;
}

/* ==========================================================================
   Fokus
   --------------------------------------------------------------------------
   Sichtbarer Fokus auf allen Bedienelementen. :focus-visible zeigt ihn nur bei
   Tastaturbedienung; die :focus-Regel davor ist die Rückfallebene für ältere
   Browser.
   ========================================================================== */

.digins-bcc-banner :focus,
.digins-bcc-float:focus {
	outline: 2px solid var(--digins-bcc-focus, #1d4ed8);
	outline-offset: 2px;
}

.digins-bcc-banner :focus:not(:focus-visible),
.digins-bcc-float:focus:not(:focus-visible) {
	outline: none;
}

.digins-bcc-banner :focus-visible,
.digins-bcc-float:focus-visible {
	outline: 2px solid var(--digins-bcc-focus, #1d4ed8);
	outline-offset: 2px;
}

/* Der Umschalter zeigt den Fokus an der sichtbaren Spur, nicht an der
   transparenten Checkbox darüber. */
.digins-bcc-toggle__input:focus-visible ~ .digins-bcc-toggle__track {
	outline: 2px solid var(--digins-bcc-focus, #1d4ed8);
	outline-offset: 2px;
}

.digins-bcc-toggle__input:focus {
	outline: none;
}

/* ==========================================================================
   Mobilgeräte
   ========================================================================== */

@media (max-width: 600px) {
	.digins-bcc-banner {
		max-height: calc(100vh - 1rem);
	}

	.digins-bcc-banner--bottom,
	.digins-bcc-banner--corner {
		right: 0.5rem;
		bottom: 0.5rem;
		left: 0.5rem;
		width: auto;
		max-width: none;
	}

	.digins-bcc-banner--center {
		width: calc(100% - 1rem);
	}

	.digins-bcc-banner__heading {
		font-size: var(--digins-bcc-heading-size-mobile, 1.125rem);
	}

	/* Schaltflächen über die volle Breite, wenn im Backend so eingestellt. */
	.digins-bcc-banner__actions--full-mobile {
		flex-direction: column;
		align-items: stretch;
	}

	.digins-bcc-banner__actions--full-mobile .digins-bcc-button {
		width: 100%;
	}
}

/* ==========================================================================
   Shortcodes
   ========================================================================== */

/* Schaltfläche aus [digins_burst_cookie_settings]. Sie liegt außerhalb des
   Banner-Containers, deshalb werden die Grundregeln hier wiederholt. */
.digins-bcc-shortcode-button {
	/* Der Button steht außerhalb des Banner-Containers, deshalb greifen dessen
	   Reset-Regeln hier nicht. Bewusst inline-block statt Flexbox: Einzeiliger Text
	   wird durch symmetrischen Innenabstand und die Zeilenhöhe von selbst zentriert –
	   das lässt sich durch Theme- oder Elementor-Regeln nicht verschieben. Deshalb
	   auch kein min-height, das sonst zusätzlichen Raum unter den Text legen würde. */
	box-sizing: border-box !important;
	display: inline-block !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0.7rem 1.25rem !important;
	background: var(--digins-bcc-secondary, #f2f1ee) !important;
	color: var(--digins-bcc-secondary-text, #333333) !important;
	border: 0 !important;
	border-radius: var(--digins-bcc-radius-button, 0.375rem) !important;
	font-family: var(--digins-bcc-font, inherit) !important;
	font-size: var(--digins-bcc-button-size, 0.9375rem) !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	vertical-align: middle !important;
	float: none !important;
	cursor: pointer;
}

.digins-bcc-shortcode-button:hover {
	background: var(--digins-bcc-secondary-hover, #e5e3dd) !important;
}

.digins-bcc-shortcode-button:focus-visible {
	outline: 2px solid var(--digins-bcc-focus, #1d4ed8);
	outline-offset: 2px;
}

/* Textlink-Variante des Shortcodes: [digins_burst_cookie_settings] als schlichter Link,
   der sich in ein Menü oder eine Fußzeile einfügt.
   --------------------------------------------------------------------------------------
   „font: inherit" übernimmt Größe, Familie und Gewicht vom umgebenden Menü, damit sich der
   Link nahtlos einreiht. Die Farbe kommt aus der Design-Einstellung „Links". Alle nativen
   Button-Eigenschaften werden entfernt, damit von einem <button> optisch nichts übrig
   bleibt – der Link ist trotzdem ein echtes, per Tastatur bedienbares Bedienelement. */
.digins-bcc-shortcode-link {
	display: inline !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--digins-bcc-link, #6e6654) !important;
	font: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: underline;
	cursor: pointer;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.digins-bcc-shortcode-link:hover {
	color: var(--digins-bcc-link-hover, #5b5445) !important;
	text-decoration: none;
}

.digins-bcc-shortcode-link--no-underline {
	text-decoration: none;
}

.digins-bcc-shortcode-link--no-underline:hover {
	text-decoration: underline;
}

.digins-bcc-shortcode-link:focus-visible {
	outline: 2px solid var(--digins-bcc-focus, #1d4ed8);
	outline-offset: 2px;
}

/* Cookie-Tabelle aus [digins_burst_cookie_policy].
   Der Container scrollt waagerecht, damit auf schmalen Bildschirmen nicht die
   ganze Seite verschoben wird. */
.digins-bcc-policy {
	overflow-x: auto;
	max-width: 100%;
}

.digins-bcc-policy__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--digins-bcc-text-size, 0.9375rem);
	line-height: var(--digins-bcc-line-height, 1.5);
}

.digins-bcc-policy__table th,
.digins-bcc-policy__table td {
	padding: 0.625rem 0.75rem;
	border-bottom: var(--digins-bcc-border-width, 1px) solid var(--digins-bcc-border, #dddddd);
	text-align: left;
	vertical-align: top;
}

.digins-bcc-policy__table th {
	color: var(--digins-bcc-heading, #111111);
	font-weight: var(--digins-bcc-heading-weight, 600);
	white-space: nowrap;
}

.digins-bcc-policy__table code {
	font-size: 0.9375em;
	word-break: break-all;
}

/* Auf schmalen Bildschirmen wird jede Zeile zu einem eigenen Block mit
   vorangestellter Spaltenbezeichnung. */
@media (max-width: 600px) {
	.digins-bcc-policy__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.digins-bcc-policy__table tr {
		display: block;
		margin-bottom: 1rem;
		border: var(--digins-bcc-border-width, 1px) solid var(--digins-bcc-border, #dddddd);
		border-radius: var(--digins-bcc-radius-banner, 0.5rem);
	}

	.digins-bcc-policy__table td {
		display: block;
		border-bottom: 0;
	}

	.digins-bcc-policy__table td::before {
		display: block;
		content: attr(data-label);
		color: var(--digins-bcc-muted, #666666);
		font-size: 0.8125em;
		font-weight: 600;
	}
}

/* ==========================================================================
   Bewegungsreduzierung
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.digins-bcc-banner .digins-bcc-button,
	.digins-bcc-toggle__track,
	.digins-bcc-toggle__knob {
		transition: none;
	}
}