/** Singulary Consent styling through the official --cc-* variables (vendor/cookieconsent.css stays untouched); colours and radii from theme.json. */

/* Praesenz: Lib skaliert komplett in em — 17px Basis statt 16px, und die
   Cloud-Leiste darf breiter als die 54em-Vendor-Default. */
html body :where(#cc-main) .cm--cloud { max-width: min( 62em, calc( 100vw - 2.5rem ) ) !important; }

html body :where(#cc-main) {
	font-size: 17px !important;
	--cc-font-family: 'Inter', -apple-system, 'system-ui', 'Segoe UI', Roboto, sans-serif !important;
	--cc-bg: var(--fyh-glass-fill) !important;
	--cc-primary-color: var(--wp--preset--color--ink) !important;
	--cc-secondary-color: var(--wp--preset--color--muted) !important;
	--cc-link-color: var(--wp--preset--color--ink) !important;

	--cc-btn-primary-bg: var(--fyh-glass-fill) !important;
	--cc-btn-primary-color: var(--wp--preset--color--ink) !important;
	--cc-btn-primary-border-color: var(--fyh-glass-stroke) !important;
	--cc-btn-primary-hover-bg: var(--fyh-button-hover) !important;
	--cc-btn-primary-hover-border-color: var(--fyh-glass-stroke) !important;

	--cc-btn-secondary-bg: var(--fyh-glass-fill) !important;
	--cc-btn-secondary-color: var(--wp--preset--color--ink) !important;
	--cc-btn-secondary-border-color: var(--fyh-glass-stroke) !important;
	--cc-btn-secondary-hover-bg: var(--fyh-button-hover) !important;

	--cc-separator-border-color: var(--wp--preset--color--hairline) !important;
	--cc-section-category-border: var(--wp--preset--color--hairline) !important;
	--cc-cookie-category-block-bg: var(--fyh-glass-fill) !important;
	--cc-cookie-category-block-border: var(--wp--preset--color--hairline) !important;
	--cc-cookie-category-block-hover-bg: var(--fyh-button-hover) !important;
	--cc-cookie-category-expanded-block-bg: var(--wp--preset--color--base, #fff) !important;

	--cc-toggle-on-bg: var(--wp--preset--color--ink) !important;
	--cc-toggle-off-bg: #b8bdc6 !important;
	--cc-toggle-on-knob-bg: #fff !important;
	--cc-toggle-off-knob-bg: #fff !important;

	--cc-footer-bg: transparent !important;
	--cc-footer-border-color: var(--wp--preset--color--hairline) !important;
	--cc-footer-color: var(--wp--preset--color--muted) !important;

	--cc-modal-border-radius: 20px !important;
	/* ACHTUNG Vendor-Falle: --cc-btn-border-radius steuert AUCH die Kategorie-
	   Bloecke (.pm__section*) — 999px macht daraus Eier mit Textueberlauf.
	   Deshalb hier Karten-Radius; die echten Buttons bekommen unten ihre eigenen Ecken. */
	--cc-btn-border-radius: 14px !important;
	--cc-pm-toggle-border-radius: 999px !important;
	--cc-modal-margin: 1.25rem !important;
	--cc-overlay-bg: color-mix(in srgb, var(--wp--preset--color--ink-deep) 50%, transparent) !important;
}

/* Elevation + Hairline wie die Site-Karten (CTA-Karte/Exposé-Sprache). */
html body :where(#cc-main) .cm,
html body :where(#cc-main) .pm {
	box-shadow: var(--fyh-glass-lift) !important;
	background: var(--fyh-glass-card-fill) !important;
	-webkit-backdrop-filter: blur(22px) saturate(1.15);
	backdrop-filter: blur(22px) saturate(1.15);
	border: 1px solid var(--fyh-glass-stroke) !important;
}
html body :where(#cc-main) .cm__title,
html body :where(#cc-main) .pm__title {
	font-family: var(--fyh-display, inherit) !important;
	font-weight: 400 !important;
	text-wrap: balance !important;
	letter-spacing: -0.015em !important;
}
html body :where(#cc-main) .cm__btn,
html body :where(#cc-main) .pm__btn {
	font-weight: 500 !important;
	border-radius: 10px !important;
	min-height: 44px !important;
}
html body :where(#cc-main) .cm__btn--close,
html body :where(#cc-main) .pm__close-btn {
	width: 44px !important;
	height: 44px !important;
	border-radius: 999px !important;
}
html body :where(#cc-main) :is(.cm__btn--close, .pm__close-btn) svg {
	stroke-width: 1.1px !important;
}

/* --- Just-in-time-Gate: "Aktivieren"-Card fuer gated Dienste -------------- */
.fyh-consent-gate {
	display: flex; flex-direction: column; align-items: flex-start; gap: .65rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--fyh-glass-stroke) !important;
	border-radius: 16px !important;
	background: var(--wp--preset--color--surface) !important;
}
.fyh-consent-gate__text {
	margin: 0;
	font-size: .88rem; line-height: 1.55 !important;
	color: var(--wp--preset--color--muted);
}
.fyh-consent-gate__btn {
	display: inline-flex; align-items: center;
	padding: .55rem 1.1rem; border: 0; border-radius: 999px;
	font: inherit; font-size: .84rem; font-weight: 500; cursor: pointer;
	color: #fff; background: var(--wp--preset--color--ink);
	transition: transform .18s ease;
}
.fyh-consent-gate__btn:hover { transform: translateY( -1px ); }
.fyh-consent-gate__more {
	padding: 0; border: 0; background: none; cursor: pointer;
	font: inherit; font-size: .76rem; font-weight: 600;
	color: var(--wp--preset--color--muted);
	text-decoration: underline; text-underline-offset: 3px;
}
@media ( prefers-reduced-motion: reduce ) { .fyh-consent-gate__btn { transition: none; } }

/* --- Wall-Modus: Overlay wie unsere Glas-Sprache, zentrale Box praesenter -- */
html body :where(#cc-main) .cm--middle.cm--center { max-width: 34em !important; }
.disable--interaction html body :where(#cc-main) .cm-wrapper::before,
html body :where(#cc-main) .pm-overlay {
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
}