/* Heavened Legal – Cookie-Banner
 * Alle Regeln sind über #hvl-banner / #hvl-revoke / .hvl-placeholder abgesichert und setzen die
 * wichtigsten Eigenschaften mit !important, damit globale Button-/Überschriften-Stile von Theme
 * oder Elementor (Kit-Farben, Typografie) den Banner nicht verändern.
 */
:root {
	--hvl-primary: #1f4fd8;
	--hvl-bg: #ffffff;
	--hvl-text: #1d2327;
	--hvl-heading: #1d2327;
	--hvl-link: #1f4fd8;
	--hvl-border: rgba(127, 127, 127, .3);
	--hvl-toggle: #1f4fd8;
	--hvl-btn1-bg: #1f4fd8;
	--hvl-btn1-text: #ffffff;
	--hvl-btn2-bg: #1f4fd8;
	--hvl-btn2-text: #ffffff;
	--hvl-btn2-border: #1f4fd8;
	--hvl-btn3-bg: transparent;
	--hvl-btn3-text: #1f4fd8;
	--hvl-btn3-border: #1f4fd8;
	--hvl-revoke-bg: #1f4fd8;
	--hvl-revoke-icon: #ffffff;
	--hvl-font: inherit;
	--hvl-title-size: 20px;
	--hvl-radius: 12px;
	--hvl-btn-radius: 8px;
	--hvl-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}

#hvl-banner[hidden], #hvl-revoke[hidden], #hvl-banner .hvl-view[hidden] { display: none !important; }

#hvl-banner, #hvl-banner *, .hvl-placeholder, .hvl-placeholder * { box-sizing: border-box; }

#hvl-banner {
	position: fixed;
	z-index: 2147483000;
	font-family: var(--hvl-font) !important;
	font-size: 15px;
	line-height: 1.5;
	color: var(--hvl-text);
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
}

#hvl-banner .hvl-box {
	position: relative;
	background: var(--hvl-bg) !important;
	color: var(--hvl-text) !important;
	border-radius: var(--hvl-radius);
	box-shadow: var(--hvl-shadow);
	padding: 22px 24px;
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Layouts */
#hvl-banner.hvl-layout-box { left: 16px; bottom: 16px; width: min(460px, calc(100vw - 32px)); }
#hvl-banner.hvl-layout-bar { left: 0; right: 0; bottom: 0; }
#hvl-banner.hvl-layout-bar .hvl-box { border-radius: 0; max-width: none; padding: 20px max(24px, calc((100vw - 1100px) / 2)); }
#hvl-banner.hvl-layout-bar .hvl-view-settings { max-width: 760px; margin: 0 auto; }
#hvl-banner.hvl-layout-modal { inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }
#hvl-banner.hvl-layout-modal .hvl-box { width: min(620px, 100%); }
#hvl-banner .hvl-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); }

/* Typografie – unabhängig von Theme-Überschriften */
#hvl-banner .hvl-title {
	font-family: var(--hvl-font) !important;
	font-size: var(--hvl-title-size) !important;
	line-height: 1.25 !important;
	font-weight: 700 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--hvl-heading) !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}
#hvl-banner .hvl-title:focus { outline: none; }
#hvl-banner .hvl-text, #hvl-banner .hvl-text p {
	font-family: var(--hvl-font) !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: var(--hvl-text) !important;
	margin: 0 0 12px;
}
#hvl-banner p, #hvl-banner li, #hvl-banner dt, #hvl-banner dd, #hvl-banner label, #hvl-banner legend, #hvl-banner summary, #hvl-banner strong {
	color: var(--hvl-text);
	font-family: var(--hvl-font);
}
#hvl-banner a { color: var(--hvl-link) !important; text-decoration: underline !important; text-underline-offset: 2px; background: none !important; }

#hvl-banner .hvl-cat-list { list-style: none !important; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px !important; padding: 0 !important; }
#hvl-banner .hvl-cat-list li { margin: 0 !important; font-size: 12.5px; padding: 3px 10px; border-radius: 99px; background: rgba(127, 127, 127, .14); list-style: none !important; }
#hvl-banner .hvl-cat-list li::before, #hvl-banner .hvl-cat-list li::marker { content: none; }
#hvl-banner .hvl-cat-list span { opacity: .75; }

/* Buttons */
#hvl-banner .hvl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
#hvl-banner .hvl-btn, .hvl-placeholder .hvl-btn.hvl-btn {
	appearance: none !important;
	-webkit-appearance: none !important;
	font-family: var(--hvl-font) !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	padding: 11px 16px !important;
	min-height: 44px !important;
	height: auto !important;
	width: auto;
	border-radius: var(--hvl-btn-radius) !important;
	border: 2px solid transparent !important;
	cursor: pointer;
	transition: filter .15s ease;
	flex: 1 1 auto;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-align: center;
}
#hvl-banner .hvl-btn:hover, #hvl-banner .hvl-btn:focus, .hvl-placeholder .hvl-btn.hvl-btn:hover, .hvl-placeholder .hvl-btn.hvl-btn:focus { filter: brightness(.92); }

/* 1 – Alle akzeptieren / Inhalt laden */
#hvl-banner .hvl-btn[data-hvl-action="accept"], #hvl-banner .hvl-btn[data-hvl-action="accept"]:hover, #hvl-banner .hvl-btn[data-hvl-action="accept"]:focus,
.hvl-placeholder .hvl-btn.hvl-btn-primary, .hvl-placeholder .hvl-btn.hvl-btn-primary:hover, .hvl-placeholder .hvl-btn.hvl-btn-primary:focus {
	background: var(--hvl-btn1-bg) !important;
	color: var(--hvl-btn1-text) !important;
	border-color: var(--hvl-btn1-bg) !important;
}
/* 2 – Ablehnen */
#hvl-banner .hvl-btn[data-hvl-action="reject"], #hvl-banner .hvl-btn[data-hvl-action="reject"]:hover, #hvl-banner .hvl-btn[data-hvl-action="reject"]:focus {
	background: var(--hvl-btn2-bg) !important;
	color: var(--hvl-btn2-text) !important;
	border-color: var(--hvl-btn2-border) !important;
}
/* 3 – Auswahl speichern / "immer erlauben" */
#hvl-banner .hvl-btn[data-hvl-action="save"], #hvl-banner .hvl-btn[data-hvl-action="save"]:hover, #hvl-banner .hvl-btn[data-hvl-action="save"]:focus,
.hvl-placeholder .hvl-btn.hvl-btn-secondary, .hvl-placeholder .hvl-btn.hvl-btn-secondary:hover, .hvl-placeholder .hvl-btn.hvl-btn-secondary:focus {
	background: var(--hvl-btn3-bg) !important;
	color: var(--hvl-btn3-text) !important;
	border-color: var(--hvl-btn3-border) !important;
}
/* Einstellungen (Textlink-Optik) */
#hvl-banner .hvl-btn[data-hvl-action="settings"], #hvl-banner .hvl-btn[data-hvl-action="settings"]:hover, #hvl-banner .hvl-btn[data-hvl-action="settings"]:focus {
	background: transparent !important;
	color: var(--hvl-text) !important;
	border-color: transparent !important;
	text-decoration: underline !important;
	flex: 0 1 auto;
}
/* Zurück */
#hvl-banner .hvl-btn-text, #hvl-banner .hvl-btn-text:hover, #hvl-banner .hvl-btn-text:focus {
	appearance: none !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	border-radius: 0 !important;
	font: inherit !important;
	font-size: 13px !important;
	color: var(--hvl-link) !important;
	text-decoration: underline !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer;
}

#hvl-banner .hvl-btn:focus-visible, #hvl-banner .hvl-btn-text:focus-visible, #hvl-banner a:focus-visible, #hvl-banner summary:focus-visible,
#hvl-revoke:focus-visible, #hvl-banner .hvl-switch input:focus-visible + .hvl-switch-ui, #hvl-banner .hvl-svc-head input:focus-visible,
.hvl-placeholder .hvl-btn:focus-visible {
	outline: 3px solid var(--hvl-link) !important;
	outline-offset: 2px !important;
}

#hvl-banner .hvl-legal-links { margin: 6px 0 0 !important; font-size: 13px !important; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Einstellungen */
#hvl-banner .hvl-cats { display: grid; gap: 10px; margin: 6px 0 14px; }
#hvl-banner .hvl-cat { border: 1px solid var(--hvl-border) !important; border-radius: 10px; padding: 12px 14px !important; margin: 0 !important; min-width: 0; background: none !important; }
#hvl-banner .hvl-cat-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 !important; gap: 8px; float: left; border: 0 !important; margin: 0 !important; font-size: 15px !important; }
#hvl-banner .hvl-cat-desc { margin: 6px 0 6px !important; font-size: 13px !important; opacity: .9; clear: both; padding-top: 4px; }
#hvl-banner .hvl-badge { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: rgba(127, 127, 127, .16); white-space: nowrap; color: var(--hvl-text); }

#hvl-banner .hvl-switch { display: inline-flex !important; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; margin: 0 !important; padding: 0 !important; font-size: 15px !important; }
#hvl-banner .hvl-switch input { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; }
#hvl-banner .hvl-switch-ui { position: relative; width: 42px; height: 24px; border-radius: 99px; background: #8c8f94; flex: none; transition: background .15s; }
#hvl-banner .hvl-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
#hvl-banner .hvl-switch input:checked + .hvl-switch-ui { background: var(--hvl-toggle); }
#hvl-banner .hvl-switch input:checked + .hvl-switch-ui::after { transform: translateX(18px); }
#hvl-banner .hvl-switch input:indeterminate + .hvl-switch-ui::after { transform: translateX(9px); }
#hvl-banner .hvl-switch input:disabled + .hvl-switch-ui { opacity: .6; cursor: not-allowed; }

#hvl-banner .hvl-details summary { cursor: pointer; font-size: 13px !important; color: var(--hvl-link) !important; text-decoration: underline; padding: 0 !important; background: none !important; }
#hvl-banner .hvl-svc { border-top: 1px solid var(--hvl-border); margin-top: 10px; padding-top: 10px; }
#hvl-banner .hvl-svc-head { display: flex; gap: 8px; align-items: center; cursor: pointer; font-size: 14px !important; margin: 0 !important; }
#hvl-banner .hvl-svc-head input { width: 18px !important; height: 18px !important; accent-color: var(--hvl-toggle); margin: 0 !important; position: static !important; opacity: 1 !important; }
#hvl-banner .hvl-svc-info { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; font-size: 12.5px !important; margin: 8px 0 0 !important; }
#hvl-banner .hvl-svc-info dt { font-weight: 600; margin: 0 !important; }
#hvl-banner .hvl-svc-info dd { margin: 0 !important; word-break: break-word; }

.hvl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Schwebender Button */
#hvl-revoke {
	position: fixed;
	bottom: 16px;
	z-index: 2147482999;
	width: 46px !important;
	height: 46px !important;
	min-height: 0 !important;
	border-radius: 50% !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: var(--hvl-revoke-bg) !important;
	color: var(--hvl-revoke-icon) !important;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25) !important;
	font-family: var(--hvl-font) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
#hvl-revoke.hvl-revoke-left { left: 16px; }
#hvl-revoke.hvl-revoke-right { right: 16px; }
#hvl-revoke svg, #hvl-revoke .hvl-revoke-img { width: 26px; height: 26px; display: block; flex: none; object-fit: contain; }
#hvl-revoke:hover { filter: brightness(.92); }
#hvl-revoke.hvl-revoke-has-label { width: auto !important; border-radius: 99px !important; padding: 0 16px 0 12px !important; gap: 8px; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; }

/* Content-Blocker */
.hvl-embed { position: relative; width: 100%; min-height: 220px; display: block; }
.hvl-embed.hvl-embed-loaded { min-height: 0; }
.hvl-embed > iframe { max-width: 100%; }
.hvl-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 20px;
	background: #f0f2f5;
	color: #1d2327;
	border: 1px dashed #8c8f94;
	border-radius: 10px;
	font-family: var(--hvl-font);
	font-size: 14px;
	line-height: 1.45;
	overflow: auto;
}
.hvl-placeholder p { margin: 0 !important; max-width: 560px; color: #1d2327 !important; }
.hvl-placeholder a { color: var(--hvl-link) !important; }
.hvl-placeholder .hvl-ph-title { font-size: 16px !important; }
.hvl-placeholder .hvl-ph-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px !important; }
.hvl-placeholder .hvl-ph-actions .hvl-btn.hvl-btn { flex: 0 1 auto; min-height: 40px !important; padding: 8px 14px !important; font-size: 14px !important; }
.hvl-placeholder .hvl-ph-host { font-size: 12px !important; opacity: .7; }

@media (max-width: 600px) {
	#hvl-banner.hvl-layout-box { left: 8px; right: 8px; bottom: 8px; width: auto; }
	#hvl-banner .hvl-box { padding: 18px 16px; }
	#hvl-banner .hvl-actions { flex-direction: column; }
	#hvl-banner .hvl-actions .hvl-btn { width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
	#hvl-banner *, #hvl-revoke { transition: none !important; }
}

@media (forced-colors: active) {
	#hvl-banner .hvl-btn, #hvl-banner .hvl-switch-ui, #hvl-revoke { border: 2px solid ButtonText !important; }
}

/* Vorschau im Backend */
#hvl-banner.hvl-preview { position: relative !important; inset: auto !important; left: auto !important; bottom: auto !important; z-index: 1; width: 100% !important; max-width: 460px; }
#hvl-banner.hvl-preview .hvl-box { max-height: none; }
