/* Webbaukasten – Kopfbereich (10 Layouts) und mobile Navigation (10 Stile) */

/* ---------- Grundlage ---------- */
header.wp-block-template-part:has(.wbk-hd.is-sticky) { position: sticky; top: 0; z-index: 100; transition: transform .3s ease; }
.admin-bar header.wp-block-template-part:has(.wbk-hd.is-sticky) { top: var(--wp-admin--admin-bar--height, 32px); }
header.wp-block-template-part:has(.wbk-hd.is-hidden) { transform: translateY(-110%); }

.wbk-hd {
	--hd-bg: var(--wp--preset--color--base);
	--hd-fg: var(--wp--preset--color--contrast);
	--hd-accent: var(--wp--preset--color--primary);
	--hd-pad: 16px;
	--hd-line: color-mix(in srgb, var(--hd-fg) 10%, transparent);
	font-size: 1rem;
	line-height: 1.4;
}
.wbk-hd--bg-farbig, .wbk-hd--l6 { --hd-bg: var(--wp--preset--color--primary); --hd-fg: var(--wp--preset--color--on-primary); --hd-accent: var(--wp--preset--color--on-primary); }
.wbk-hd--bg-dunkel { --hd-bg: var(--wp--preset--color--contrast); --hd-fg: var(--wp--preset--color--base); --hd-accent: var(--wp--preset--color--accent); }

.wbk-hd-bar { background: var(--hd-bg); color: var(--hd-fg); border-bottom: 1px solid var(--hd-line); transition: background .3s, box-shadow .3s, border-color .3s; }
.wbk-hd.is-scrolled .wbk-hd-bar { box-shadow: 0 6px 24px rgba(16, 24, 40, .08); }
.wbk-hd-inner {
	max-width: var(--wp--style--global--wide-size, 1200px); margin: 0 auto; box-sizing: border-box;
	padding: var(--hd-pad) clamp(1rem, 4vw, 2rem);
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	transition: padding .25s ease;
}
.wbk-hd.is-shrink.is-scrolled { --hd-pad: 9px; }
.wbk-hd-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-family: var(--hd-font, inherit); font-weight: 700; font-size: 1.3rem; letter-spacing: -.01em; flex-shrink: 0; }
.wbk-hd-logo { display: block; transition: height .25s ease; }
.wbk-hd.is-shrink.is-scrolled .wbk-hd-logo { height: 34px !important; }
.wbk-hd-end, .wbk-hd-start { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.wbk-hd-start { gap: clamp(20px, 3vw, 48px); }

.wbk-hd-menu { display: flex; flex-wrap: wrap; gap: 4px clamp(14px, 1.8vw, 26px); list-style: none; margin: 0; padding: 0; }
.wbk-hd-menu a { position: relative; display: inline-block; padding: 6px 0; color: inherit; text-decoration: none; font-weight: 500; }
.wbk-hd-menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--hd-accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.wbk-hd-menu a:hover::after, .wbk-hd-menu a[aria-current]::after { transform: scaleX(1); }
.wbk-hd-menu a[aria-current] { color: var(--hd-accent); }
.wbk-hd-cta { padding: .6em 1.2em !important; font-size: .95rem !important; text-decoration: none; white-space: nowrap; }
.wbk-hd--bg-farbig .wbk-hd-cta, .wbk-hd--l6 .wbk-hd-cta { background: var(--wp--preset--color--on-primary) !important; color: var(--wp--preset--color--primary) !important; border-color: transparent !important; }

.wbk-hd-toggle { display: none; align-items: center; gap: 10px; background: none; border: 0; color: inherit; cursor: pointer; padding: 8px 4px; font: inherit; font-weight: 600; }
.wbk-hd-toggle:focus-visible, .wbk-mnav-close:focus-visible { outline: 2px solid var(--hd-accent); outline-offset: 3px; border-radius: 6px; }
.wbk-burger { position: relative; width: 24px; height: 18px; display: inline-block; }
.wbk-burger i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s ease, opacity .2s, top .3s ease; }
.wbk-burger i:nth-child(1) { top: 0; }
.wbk-burger i:nth-child(2) { top: 8px; }
.wbk-burger i:nth-child(3) { top: 16px; }
.wbk-nav-open .wbk-burger i:nth-child(1) { top: 8px; transform: rotate(45deg); }
.wbk-nav-open .wbk-burger i:nth-child(2) { opacity: 0; }
.wbk-nav-open .wbk-burger i:nth-child(3) { top: 8px; transform: rotate(-45deg); }

.wbk-hd-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; font-size: .9rem; }
.wbk-hd-contact a, .wbk-hd-contact > span { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.wbk-hd-contact svg { opacity: .85; }

/* ---------- Layouts ---------- */
/* 2 Zentriert */
.wbk-hd-stack { flex-direction: column; gap: 10px; }
.wbk-hd--l2 .wbk-hd-toggle { position: absolute; right: clamp(1rem, 4vw, 2rem); }
.wbk-hd--l2 .wbk-hd-inner { position: relative; }
/* 3 Logo Mitte */
.wbk-hd-split { display: grid; grid-template-columns: 1fr auto 1fr; }
.wbk-hd-split .wbk-hd-brand { justify-self: center; }
.wbk-hd-split .wbk-hd-end { justify-self: end; }
/* 4 Infoleiste */
.wbk-hd-top { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); }
.wbk-hd-top .wbk-hd-inner { --hd-pad: 7px; justify-content: flex-end; }
/* 7 Schwebend */
.wbk-hd--l7 { padding: 12px clamp(.75rem, 3vw, 1.5rem) 0; }
.wbk-hd--l7 .wbk-hd-bar { max-width: calc(var(--wp--style--global--wide-size, 1200px) + 2rem); margin: 0 auto; border: 1px solid var(--hd-line); border-radius: max(16px, calc(var(--wbk-radius, 10px) * 2)); box-shadow: 0 10px 30px rgba(16, 24, 40, .10); background: color-mix(in srgb, var(--hd-bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.wbk-hd--l7 .wbk-hd-inner { --hd-pad: 10px; }
header.wp-block-template-part:has(.wbk-hd--l7) { background: transparent; }
/* 8 Minimal */
.wbk-hd.is-minimal .wbk-hd-toggle { display: inline-flex; }
.wbk-hd.is-minimal .wbk-hd-nav { display: none; }
/* 9 Zweizeilig */
.wbk-hd--l9 .wbk-hd-bar { border-bottom: 0; }
.wbk-hd-row2 { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); }
.wbk-hd-row2 .wbk-hd-inner { --hd-pad: 0px; justify-content: flex-start; }
.wbk-hd-row2 .wbk-hd-menu a { padding: 13px 0; }
.wbk-hd-row2 .wbk-hd-menu a::after, .wbk-hd-row2 .wbk-hd-menu a[aria-current] { color: inherit; background: currentColor; }
.wbk-hd--l9 .wbk-hd-contact { font-size: .88rem; color: var(--wp--preset--color--contrast-2); }
/* 10 Transparent */
body:has(.wbk-hd--l10) header.wp-block-template-part { position: fixed !important; top: 0; left: 0; right: 0; z-index: 100; }
.admin-bar:has(.wbk-hd--l10) header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
body:has(.wbk-hd--l10) .wbk-main .wp-block-post-content > :first-child { padding-top: calc(var(--wbk-section, 4rem) + 72px); }
body:has(.wbk-hd--l10) .wbk-main-text { padding-top: calc(clamp(2rem, 5vw, 4rem) + 72px); }
.wbk-hd--l10:not(.is-scrolled) .wbk-hd-bar { background: transparent; border-color: transparent; box-shadow: none; }
body:has(.wbk-main .wp-block-post-content > .wbk-band:first-child) .wbk-hd--l10:not(.is-scrolled) { --hd-fg: var(--wp--preset--color--on-primary); --hd-accent: var(--wp--preset--color--on-primary); }
body:has(.wbk-main .wp-block-post-content > .wbk-band:first-child) .wbk-hd--l10:not(.is-scrolled) .wbk-hd-cta { background: var(--wp--preset--color--on-primary) !important; color: var(--wp--preset--color--primary) !important; }

/* ---------- Mobile Navigation ---------- */
.wbk-mnav { --mn-dur: .38s; --mn-ease: cubic-bezier(.2, .8, .2, 1); position: fixed; inset: 0; z-index: 1000; visibility: hidden; pointer-events: none; transition: visibility 0s linear var(--mn-dur); }
.wbk-mnav.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.wbk-mnav-backdrop { position: absolute; inset: 0; background: rgba(10, 16, 24, .5); opacity: 0; transition: opacity var(--mn-dur) ease; }
.wbk-mnav.is-open .wbk-mnav-backdrop { opacity: 1; }
.wbk-mnav-panel {
	position: absolute; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px;
	background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast);
	padding: 18px 24px 28px; overflow-y: auto; overscroll-behavior: contain;
	transition: transform var(--mn-dur) var(--mn-ease), opacity var(--mn-dur) ease, clip-path calc(var(--mn-dur) * 1.4) var(--mn-ease);
}
.wbk-mnav-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.wbk-mnav-title { font-weight: 700; font-size: 1.1rem; font-family: var(--hd-font, inherit); }
.wbk-mnav-close { background: color-mix(in srgb, currentColor 8%, transparent); border: 0; color: inherit; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.wbk-mnav-menu { list-style: none; margin: 0; padding: 0; }
.wbk-mnav-menu a { display: flex; align-items: center; gap: 12px; padding: 14px 4px; color: inherit; text-decoration: none; font-size: 1.15rem; font-weight: 600; border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent); }
.wbk-mnav-menu a[aria-current] { color: var(--wp--preset--color--primary); }
.wbk-mnav-cta { display: block; text-align: center; padding: .9em 1.2em !important; text-decoration: none; }
.wbk-mnav-contact { display: flex; flex-direction: column; gap: 10px; font-size: .95rem; }
.wbk-mnav-contact a, .wbk-mnav-contact > span { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.wbk-mnav-handle { display: block; width: 44px; height: 5px; border-radius: 5px; background: color-mix(in srgb, currentColor 20%, transparent); margin: -6px auto 0; order: -1; }
html.wbk-nav-open { overflow: hidden; }

/* 1 von rechts */
.wbk-mnav--m1 .wbk-mnav-panel { top: 0; right: 0; bottom: 0; width: min(86vw, 380px); transform: translateX(100%); box-shadow: -20px 0 50px rgba(0, 0, 0, .15); }
/* 2 von links */
.wbk-mnav--m2 .wbk-mnav-panel { top: 0; left: 0; bottom: 0; width: min(86vw, 380px); transform: translateX(-100%); box-shadow: 20px 0 50px rgba(0, 0, 0, .15); }
.wbk-mnav--m1.is-open .wbk-mnav-panel, .wbk-mnav--m2.is-open .wbk-mnav-panel { transform: none; }
/* 3 von oben */
.wbk-mnav--m3 { top: var(--wbk-hd-h, 64px); }
.wbk-mnav--m3 .wbk-mnav-head { display: none; }
.wbk-mnav--m3 .wbk-mnav-panel { top: 0; left: 0; right: 0; max-height: calc(100vh - var(--wbk-hd-h, 64px)); clip-path: inset(0 0 100% 0); box-shadow: 0 20px 40px rgba(0, 0, 0, .12); }
.wbk-mnav--m3.is-open .wbk-mnav-panel { clip-path: inset(0 0 0 0); }
/* 4 Vollbild */
.wbk-mnav--m4 .wbk-mnav-panel, .wbk-mnav--m5 .wbk-mnav-panel, .wbk-mnav--m7 .wbk-mnav-panel, .wbk-mnav--m8 .wbk-mnav-panel { inset: 0; }
.wbk-mnav--m4 .wbk-mnav-panel { opacity: 0; transform: scale(.97); text-align: center; }
.wbk-mnav--m4.is-open .wbk-mnav-panel { opacity: 1; transform: none; }
.wbk-mnav--m4 .wbk-mnav-menu a, .wbk-mnav--m5 .wbk-mnav-menu a, .wbk-mnav--m7 .wbk-mnav-menu a { justify-content: center; border: 0; font-size: clamp(1.4rem, 6vw, 2rem); padding: 12px; }
.wbk-mnav--m4 nav, .wbk-mnav--m5 nav, .wbk-mnav--m7 nav { margin: auto 0; }
.wbk-mnav--m4 .wbk-mnav-contact, .wbk-mnav--m5 .wbk-mnav-contact, .wbk-mnav--m7 .wbk-mnav-contact { align-items: center; }
/* 5 Vollbild farbig, gestaffelt */
.wbk-mnav--m5 .wbk-mnav-panel { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); opacity: 0; text-align: center; }
.wbk-mnav--m5.is-open .wbk-mnav-panel { opacity: 1; }
.wbk-mnav--m5 .wbk-mnav-menu li { opacity: 0; transform: translateY(18px); transition: opacity .4s ease, transform .5s var(--mn-ease); transition-delay: calc(var(--i, 0) * 60ms + 120ms); }
.wbk-mnav--m5.is-open .wbk-mnav-menu li { opacity: 1; transform: none; }
.wbk-mnav--m5 .wbk-mnav-menu a[aria-current], .wbk-mnav--m7 .wbk-mnav-menu a[aria-current] { color: inherit; text-decoration: underline; text-underline-offset: .25em; }
.wbk-mnav--m5 .wbk-mnav-cta, .wbk-mnav--m7 .wbk-mnav-cta { background: var(--wp--preset--color--on-primary) !important; color: var(--wp--preset--color--primary) !important; align-self: center; }
/* 6 + 9 von unten */
.wbk-mnav--m6 .wbk-mnav-panel, .wbk-mnav--m9 .wbk-mnav-panel { left: 0; right: 0; bottom: 0; max-height: 86vh; border-radius: 22px 22px 0 0; transform: translateY(100%); box-shadow: 0 -20px 50px rgba(0, 0, 0, .18); padding-top: 14px; }
.wbk-mnav--m6.is-open .wbk-mnav-panel, .wbk-mnav--m9.is-open .wbk-mnav-panel { transform: none; }
/* 7 Kreis */
.wbk-mnav--m7 .wbk-mnav-backdrop { display: none; }
.wbk-mnav--m7 .wbk-mnav-panel { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); clip-path: circle(0 at var(--cx, 92%) var(--cy, 36px)); text-align: center; }
.wbk-mnav--m7.is-open .wbk-mnav-panel { clip-path: circle(150% at var(--cx, 92%) var(--cy, 36px)); }
/* 8 Kacheln */
.wbk-mnav--m8 .wbk-mnav-panel { opacity: 0; transform: translateY(12px); background: var(--wp--preset--color--base-2); }
.wbk-mnav--m8.is-open .wbk-mnav-panel { opacity: 1; transform: none; }
.wbk-mnav--m8 .wbk-mnav-menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.wbk-mnav--m8 .wbk-mnav-menu a { flex-direction: column; justify-content: center; text-align: center; gap: 10px; border: 0; min-height: 112px; border-radius: var(--wbk-radius, 12px); background: var(--wp--preset--color--base); box-shadow: 0 6px 18px rgba(16, 24, 40, .07); font-size: 1rem; }
.wbk-mnav--m8 .wbk-mi { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--primary); }
.wbk-mnav--m8 .wbk-mnav-menu li { opacity: 0; transform: scale(.94); transition: opacity .3s ease, transform .35s var(--mn-ease); transition-delay: calc(var(--i, 0) * 45ms + 80ms); }
.wbk-mnav--m8.is-open .wbk-mnav-menu li { opacity: 1; transform: none; }
/* 9 Leiste unten */
.wbk-tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: var(--wp--preset--color--base); border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent); box-shadow: 0 -6px 20px rgba(16, 24, 40, .06); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; }
.wbk-tabbar a, .wbk-tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; background: none; border: 0; color: var(--wp--preset--color--contrast-2); text-decoration: none; font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; min-width: 0; }
.wbk-tabbar span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbk-tabbar a[aria-current], .wbk-tabbar a:hover, .wbk-tabbar button:hover { color: var(--wp--preset--color--primary); }
/* 10 Seite verschieben */
.wbk-mnav--m10 .wbk-mnav-panel { top: 0; left: 0; bottom: 0; width: min(80vw, 340px); transform: translateX(-100%); }
.wbk-mnav--m10.is-open .wbk-mnav-panel { transform: none; }
.wbk-mnav--m10 .wbk-mnav-backdrop { background: rgba(10, 16, 24, .25); }
.wp-site-blocks { transition: transform .38s cubic-bezier(.2, .8, .2, 1); }
html.wbk-nav-open.wbk-push .wp-site-blocks { transform: translateX(min(80vw, 340px)); }

@media (prefers-reduced-motion: reduce) {
	.wbk-mnav, .wbk-mnav *, .wbk-hd *, .wp-site-blocks, header.wp-block-template-part { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* Untermenüs (übernommene Navigationen, Relaunch) */
.wbk-hd-menu > li { position: relative; display: flex; align-items: center; gap: 2px; }
.wbk-sub-toggle { background: none; border: 0; color: inherit; padding: 4px; margin: 0; cursor: pointer; display: inline-grid; place-items: center; border-radius: 6px; line-height: 0; }
.wbk-sub-toggle svg { transition: transform .2s ease; }
.wbk-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.wbk-hd-menu .wbk-sub { list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; left: -12px; min-width: 220px; z-index: 50;
	background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); border-radius: var(--wbk-radius, 10px);
	box-shadow: 0 18px 40px rgba(16, 24, 40, .14); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility 0s .18s; }
.wbk-hd-menu > li:hover > .wbk-sub, .wbk-hd-menu > li:focus-within > .wbk-sub, .wbk-hd-menu > li.is-sub-open > .wbk-sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.wbk-hd-menu .wbk-sub a { display: block; padding: 9px 12px; border-radius: 6px; font-weight: 500; white-space: nowrap; }
.wbk-hd-menu .wbk-sub a::after { display: none; }
.wbk-hd-menu .wbk-sub a:hover, .wbk-hd-menu .wbk-sub a[aria-current] { background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--primary); }
.wbk-hd-menu > li.is-current-parent > a { color: var(--hd-accent); }
.wbk-mnav-menu > li.has-sub { display: flex; flex-wrap: wrap; align-items: center; }
.wbk-mnav-menu > li.has-sub > a { flex: 1; }
.wbk-mnav-menu .wbk-sub-toggle { width: 44px; height: 44px; }
.wbk-mnav-menu .wbk-sub { list-style: none; margin: 0 0 8px; padding: 0 0 0 14px; flex-basis: 100%; display: none; }
.wbk-mnav-menu li.is-sub-open > .wbk-sub, .wbk-mnav-menu li.is-current-parent > .wbk-sub { display: block; }
.wbk-mnav-menu .wbk-sub a { font-size: 1rem; font-weight: 500; padding: 10px 4px; border-bottom: 0; }
.wbk-mnav--m8 .wbk-mnav-menu > li.has-sub { display: block; }
.wbk-mnav--m8 .wbk-mnav-menu .wbk-sub-toggle { display: none; }
.wbk-mnav--m8 .wbk-mnav-menu .wbk-sub { display: none; }