/* EHNES Flyout — schwebende Quick-Access-Leiste + Lightboxen.
   Hexagon-Buttons im Stil der Slider-Steuerung (Größe + weißer 2px-Rahmen).
   Hexagon-Form/-Verhältnis aus den Theme-Tokens (mit Fallback). */
.ehf {
	--ehf-hex: var(--ws-hex, polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%));
	--ehf-ratio: var(--ws-hex-ratio, 0.866);
	--ehf-size: 52px;
	--ehf-blue: #0B55A0;
	--ehf-blue-dark: #08427B;
	--ehf-border: #FFFFFF;
	--ehf-icon: #FFFFFF;
	--ehf-right: 12px;
	--ehf-accent: #0B55A0;
	--ehf-highlight: #1C2530;
	--ehf-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---- Schwebende Leiste ---- */
.ehf-bar {
	position: fixed;
	right: var(--ehf-right, 12px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 9000;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ehf-trigger {
	position: relative;
	width: var(--ehf-size, 52px);
	aspect-ratio: var(--ehf-ratio, 0.866);
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	color: var(--ehf-icon, #fff);
	font-size: calc(var(--ehf-size, 52px) * 0.36);
	line-height: 1;
}
/* weißer 2px-Rahmen: weißes Hexagon hinten, farbiges 2px kleiner davor */
.ehf-trigger::before {
	content: ""; position: absolute; inset: 0;
	background: var(--ehf-border, #fff); clip-path: var(--ehf-hex); z-index: 0;
}
.ehf-trigger::after {
	content: ""; position: absolute; inset: 2px;
	background: var(--ehf-blue, #0B55A0); clip-path: var(--ehf-hex); z-index: 1;
	transition: background .2s var(--ehf-ease);
}
.ehf-trigger:hover::after,
.ehf-trigger:focus-visible::after { background: var(--ehf-blue-dark, #08427B); }
.ehf-trigger > svg,
.ehf-trigger > i { position: relative; z-index: 2; color: var(--ehf-icon, #fff); }
.ehf-trigger > svg { width: 1em; height: 1em; fill: currentColor; }
.ehf-trigger:focus-visible { outline: none; }
.ehf-trigger:focus-visible::before { background: var(--ehf-accent, #0B55A0); }

/* ---- Lightbox ---- */
.ehf-modal {
	position: fixed; inset: 0; z-index: 10000;
	display: none; align-items: center; justify-content: center; padding: 20px;
}
.ehf-modal.is-open { display: flex; }
.ehf-modal__backdrop {
	position: absolute; inset: 0;
	/* Einheitlicher Milchglas-Backdrop (Token aus dem Child-Theme), mit Fallbacks. */
	background: var(--ws-glass-bg, rgba(248, 250, 252, 0.40));
	-webkit-backdrop-filter: var(--ws-glass-blur, blur(24px) saturate(180%));
	        backdrop-filter: var(--ws-glass-blur, blur(24px) saturate(180%));
	animation: ehf-fade .2s var(--ehf-ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ehf-modal__backdrop { background: var(--ws-glass-solid, rgba(244, 247, 250, 0.80)); }
}
.ehf-box {
	position: relative; z-index: 1;
	width: 100%; max-width: var(--ehf-box-w, 760px);
	background: #fff;
	padding: 64px 60px 56px;
	border-radius: var(--ws-radius, 6px);
	box-shadow: 0 30px 80px rgba(8, 31, 56, 0.35);
	text-align: center;
	font-family: var(--ws-font, "Roboto", Helvetica, Arial, sans-serif);
	animation: ehf-pop .25s var(--ehf-ease);
}
.ehf-box__icon {
	display: flex; align-items: center; justify-content: center;
	width: 100px; aspect-ratio: var(--ehf-ratio, 0.866); height: auto;
	margin: 0 auto 26px;
	background: var(--ehf-accent, #0B55A0); clip-path: var(--ehf-hex);
	color: #fff; font-size: 36px;
}
.ehf-box__icon > svg { width: 1em; height: 1em; fill: currentColor; }
.ehf-box__title {
	margin: 0 0 14px;
	font-size: .95rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--ehf-accent, #0B55A0);
}
.ehf-box__text {
	margin: 0 0 26px;
	font-size: 1.1rem; line-height: 1.55; color: #5a6675;
}
.ehf-box__highlight {
	display: block; margin: 0 0 10px;
	font-size: 2.8rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em;
	color: var(--ehf-highlight, #1C2530); text-decoration: none; word-break: break-word;
}
a.ehf-box__highlight:hover { color: var(--ehf-accent, #0B55A0); }
.ehf-box__btn {
	display: inline-flex; align-items: center; justify-content: center;
	margin-top: 12px; padding: 15px 34px;
	background: var(--ehf-accent, #0B55A0); color: #fff; text-decoration: none;
	font-size: 1rem; font-weight: 600; letter-spacing: .01em;
	border: 2px solid var(--ehf-accent, #0B55A0); border-radius: 0;
	transition: background .2s var(--ehf-ease), border-color .2s var(--ehf-ease);
}
.ehf-box__btn:hover { background: #1565c0; border-color: #1565c0; }
.ehf-box__close {
	position: absolute; top: 12px; right: 16px;
	border: 0; background: transparent; cursor: pointer;
	font-size: 30px; line-height: 1; color: #9aa4ad; padding: 4px 8px;
	transition: color .15s var(--ehf-ease), transform .2s var(--ehf-ease);
}
.ehf-box__close:hover { color: var(--ehf-accent, #0B55A0); transform: rotate(90deg); }

body.ehf-lock { overflow: hidden; }

@keyframes ehf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ehf-pop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
	.ehf-bar { --ehf-right: 8px; gap: 10px; }
	.ehf-box { padding: 38px 24px 30px; }
	.ehf-box__highlight { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.ehf-modal__backdrop, .ehf-box { animation: none; }
	.ehf-trigger::after, .ehf-box__btn, .ehf-box__close { transition: none; }
}