/* Cookie-Hinweis — an Theme (#111, Gold-CTA, btn-mod) angelehnt */

.flexy-cookie-banner {
	--flexy-cookie-bg: #161616;
	--flexy-cookie-border: rgba(255, 255, 255, 0.18);
	/* Hoher Kontrast (WCAG-tauglich auf dunkel) */
	--flexy-cookie-text: #f2f2f2;
	--flexy-cookie-muted: #d6d6d6;
	position: fixed;
	z-index: 200000;
	left: 0;
	right: 0;
	bottom: 0;
	padding: max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-right, 0px))
		max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
	pointer-events: none;
	opacity: 0;
	/* Kein transform hier: verhindert subpixel-Unschärfe / „verzerrten“ Text */
	transition: opacity 0.3s ease;
}

.flexy-cookie-banner.flexy-cookie-banner--visible {
	pointer-events: auto;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.flexy-cookie-banner {
		transition: none;
	}
}

.flexy-cookie-banner__panel {
	max-width: 1140px;
	margin: 0 auto;
	background: var(--flexy-cookie-bg);
	color: var(--flexy-cookie-text);
	border: 1px solid var(--flexy-cookie-border);
	border-radius: 14px;
	box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.35);
	padding: clamp(18px, 3.5vw, 26px) clamp(18px, 3vw, 28px);
	pointer-events: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.flexy-cookie-banner__title {
	margin: 0 0 12px;
	font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.35;
	color: #ffffff;
	text-rendering: optimizeLegibility;
}

.flexy-cookie-banner__text {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--flexy-cookie-muted);
	max-width: 62rem;
}

.flexy-cookie-banner__text a {
	color: #f0d875;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.flexy-cookie-banner__text a:hover,
.flexy-cookie-banner__text a:focus-visible {
	color: #f2d56e;
}

.flexy-cookie-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
	margin-bottom: 12px;
}

/* Primär: Theme-Gold wie .btn-cta */
.flexy-cookie-banner .flexy-cookie__btn-primary.btn-mod {
	color: #1a1305;
	background: linear-gradient(165deg, #e9c85c 0%, #c9a227 42%, #a8861a 100%);
	border-color: transparent;
	box-shadow: 0 2px 10px rgba(169, 132, 28, 0.35);
}

.flexy-cookie-banner .flexy-cookie__btn-primary.btn-mod:hover,
.flexy-cookie-banner .flexy-cookie__btn-primary.btn-mod:focus-visible {
	color: #0f0b03;
	background: linear-gradient(165deg, #f2d56e 0%, #d4af37 45%, #b89220 100%);
	box-shadow: 0 4px 16px rgba(169, 132, 28, 0.45);
	text-decoration: none;
}

/* Sekundär: klarere Kante / Lesbarkeit */
.flexy-cookie-banner .flexy-cookie__btn-secondary.btn-mod {
	color: #ffffff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.48);
	box-shadow: none;
}

.flexy-cookie-banner .flexy-cookie__btn-secondary.btn-mod:hover,
.flexy-cookie-banner .flexy-cookie__btn-secondary.btn-mod:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
}

.flexy-cookie-banner__actions .btn-mod {
	min-height: 44px;
	padding-left: 18px;
	padding-right: 18px;
	font-size: 14px;
	font-weight: 600;
}

.flexy-cookie-banner__footnote {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: #b0b0b0;
}

/* Tablet: zentriert wirkt ruhiger als rechtsbündig bei umbrechenden Buttons */
@media (min-width: 576px) and (max-width: 991.98px) {
	.flexy-cookie-banner__actions {
		justify-content: center;
	}
}

@media (min-width: 992px) {
	.flexy-cookie-banner__actions {
		justify-content: flex-end;
	}
}

@media (max-width: 575.98px) {
	.flexy-cookie-banner__actions {
		flex-direction: column;
	}

	.flexy-cookie-banner__actions .btn-mod {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}

/* Dezentes Dimmen — schließt nicht ohne explizite Entscheidung */
.flexy-cookie-backdrop {
	position: fixed;
	inset: 0;
	z-index: 199999;
	background: rgba(0, 0, 0, 0.35);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.flexy-cookie-backdrop.flexy-cookie-backdrop--visible {
	opacity: 1;
	pointer-events: none;
}