/* AH-BK · Header, Hauptnavigation, Mega-Menü, mobiles Menü */
.site-header { position: sticky; top: 0; z-index: 500; color: #fff; background: var(--grad-header); transition: box-shadow var(--t), color var(--t), top var(--t) }
/* Desktop: Kopfzeile (34 px + Linie) fährt weg, sobald „Nach oben“ erscheint (Klasse aus nach-oben.js) – wie am Handy */
/* --utility-weg: alles, was unter dem Header klebt (Brotkrumen-Leiste, Seitenleiste), rückt mit nach oben */
@media (min-width: 1021px) { .weit-gescrollt { --utility-weg: 35px } .weit-gescrollt .site-header { top: -35px } }
.site-header.scrolled { box-shadow: 0 10px 36px rgba(13, 24, 48, .22) }
/* Oben hell, beim Scrollen dunkel (Klasse .scrolled aus js/module/header.js). Auf der Startseite über einer dunklen Slide (body.hero-dunkel, aus js/module/startseite.js) bleibt die Schrift weiß */
:where(body:not(.hero-dunkel)) .site-header:not(.scrolled) { background: rgba(255, 255, 255, .96); color: var(--primary-800); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(12px) }
:where(body:not(.hero-dunkel)) .site-header:not(.scrolled) :focus-visible { outline-color: var(--primary) }
:where(body:not(.hero-dunkel)) .site-header:not(.scrolled) .header-utility { background: #e7ebf3; border-bottom-color: var(--line-strong) }   /* eine Spur dunkler als --soft-blue, Linie etwas kräftiger */
:where(body:not(.hero-dunkel)) .site-header:not(.scrolled) .utility-inner { color: var(--muted) }
:where(body:not(.hero-dunkel)) .site-header:not(.scrolled) .utility-links a:hover { color: var(--primary) }
:where(body:not(.hero-dunkel)) .site-header:not(.scrolled) .nav-trigger { color: var(--primary-800) }
:where(body:not(.hero-dunkel)) .site-header:not(.scrolled) .nav-trigger:hover, :where(body:not(.hero-dunkel)) .site-header:not(.scrolled) .nav-trigger[aria-expanded="true"] { background: rgba(66, 84, 149, .06) }
:where(body:not(.hero-dunkel)) .site-header:not(.scrolled) .nav-item.is-current .nav-chev { color: var(--accent-strong) }
:where(body:not(.hero-dunkel)) .site-header:not(.scrolled) :is(.round-action, .mobile-toggle, .gm-toggle) { border-color: rgba(39, 54, 95, .18); background: transparent; color: var(--primary-800) }
:where(body:not(.hero-dunkel)) .site-header:not(.scrolled) :is(.round-action, .mobile-toggle, .gm-toggle):hover { background: var(--soft-blue) }
.brand .logo-hell, :where(body:not(.hero-dunkel)) .site-header:not(.scrolled) .brand .logo-dunkel { display: block }
.brand .logo-dunkel, :where(body:not(.hero-dunkel)) .site-header:not(.scrolled) .brand .logo-hell { display: none }
/* Startseite: Header liegt transparent mit leichter Unschärfe auf dem Titelbild */
.home .site-header:not(.scrolled) { background: transparent; box-shadow: none; backdrop-filter: none }
/* Tönung + Unschärfe laufen ohne Kante nach unten ins Titelbild aus */
.home .site-header:not(.scrolled)::before { content: ""; position: absolute; inset: 0 0 -64px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0)); backdrop-filter: blur(6px) saturate(1.1); mask-image: linear-gradient(180deg, #000 50%, transparent) }
.home .site-header:not(.scrolled) .header-utility { background: rgba(255, 255, 255, .72); border-bottom-color: transparent; backdrop-filter: blur(12px) }
/* Offenes Aufklappmenü soll unter dem Header hervorkommen (Desktop):
   – weicher Schatten als eigene Ebene (::after, z-index 2) direkt unter dem Header, liegt über dem Menü – ohne Linie, sonst wirkt sie wie ein Rand des Menüs
   – Startseite mit transparentem Header: zusätzlich eine feine Linie als box-shadow; die liegt unter dem Menü und ist nur links und rechts davon auf dem Hero zu sehen */
@media (min-width: 1021px) {
	.site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; z-index: 2; height: 14px; background: linear-gradient(180deg, rgba(13, 24, 48, .13), rgba(13, 24, 48, 0)); pointer-events: none; opacity: 0; transition: opacity var(--t) }
	.site-header:has(.nav-item:is(:hover, :focus-within, .open))::after { opacity: 1 }
	.home .site-header:not(.scrolled):has(.nav-item:is(:hover, :focus-within, .open)) { box-shadow: 0 1px 0 rgba(26, 39, 73, .16), 0 10px 30px rgba(13, 24, 48, .12) }
}
.home.hero-dunkel .site-header:not(.scrolled)::before { background: linear-gradient(180deg, rgba(12, 22, 45, .16), rgba(12, 22, 45, 0)) }
.home.hero-dunkel .site-header:not(.scrolled) .header-utility { background: rgba(10, 20, 42, .55) }
.header-utility { background: rgba(10, 20, 42, .18); border-bottom: 1px solid rgba(255, 255, 255, .1) }
.utility-inner { height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: .84rem; color: #dbe1f4; transition: font-size .25s ease }
.site-header.scrolled .utility-inner { font-size: .74rem }
.utility-links { display: flex; align-items: center; gap: 21px }
.utility-links a:hover { color: #fff }
.utility-icon { display: none }
.utility-tel { order: 99 }   /* Telefonnummer immer ganz rechts */
.header-main { height: 96px; display: flex; align-items: center; gap: 28px }
.brand { display: flex; align-items: center; flex: none }
.brand img { width: 214px }
.desktop-nav { display: flex; align-items: stretch; align-self: stretch; gap: 2px; margin-left: auto }
.nav-item { position: relative; display: flex; align-items: stretch }
.nav-trigger { position: relative; height: 100%; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: #fff; padding: 0 15px; font-size: .95rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background var(--t-fast) }
.nav-trigger::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 20px; height: 3px; border-radius: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s }
.nav-trigger:hover, .nav-trigger[aria-expanded="true"] { background: rgba(255, 255, 255, .045) }
.nav-trigger:hover::after, .nav-trigger[aria-expanded="true"]::after, .nav-item.is-current > .nav-trigger::after { transform: scaleX(1) }
.nav-item.is-current > .nav-trigger::after { background: var(--accent-strong) }
.nav-chev { font-size: .75rem; opacity: .75; transition: transform .2s }
.nav-item.is-current .nav-chev { color: var(--accent); opacity: 1 }
.nav-trigger[aria-expanded="true"] .nav-chev { transform: rotate(180deg) }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: 6px }
.round-action, .mobile-toggle { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .035); color: #fff; cursor: pointer; transition: background var(--t-fast) }
.round-action:hover, .mobile-toggle:hover { background: rgba(255, 255, 255, .13) }
.round-action svg, .mobile-toggle svg { width: 19px; height: 19px }
.mobile-toggle { display: none }

/* Mega-Menü: links Bereichskarte (randlos), rechts Gruppen */
.mega { position: fixed; left: 50%; top: calc(131px - var(--utility-weg, 0px));   /* direkt unter dem Header (34 px Kopfzeile + 1 px Linie + 96 px); rückt mit nach oben, wenn die Kopfzeile wegfährt */ transform: translate(-50%, 12px); width: min(calc(100vw - 64px), 1200px); display: grid; grid-template-columns: 255px 1fr; gap: 36px; padding: 0 36px 0 0; background: #fff; color: var(--ink); border-radius: 0 0 var(--r-lg) var(--r-lg); border: 1px solid rgba(221, 226, 236, .9); border-top: 0; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden; transition: opacity .16s ease, transform .16s ease, top var(--t) }
.nav-item.open .mega, .nav-item:hover .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) }
.mega-intro { position: relative; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; isolation: isolate; padding: 34px 30px 32px; background: linear-gradient(150deg, var(--primary-800), var(--primary)); color: #fff; border-radius: 0 0 0 var(--r-lg) }
.mega-intro::before { content: ""; position: absolute; right: -70px; bottom: -70px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 163, 89, .22); z-index: -1 }
.mega-intro::after { content: ""; position: absolute; right: 30px; bottom: 34px; width: 70px; height: 70px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .12); z-index: -1 }
.mega-intro .kicker { margin-bottom: 12px }
.mega-intro strong { display: block; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.04em; margin-bottom: 12px }
.mega-intro p { margin: 0 0 20px; color: rgba(255, 255, 255, .78); font-size: .86rem; line-height: 1.6 }
.mega-intro > a { margin-top: auto }
.mega-intro-buttons { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: auto }   /* Online-Anmeldung über „Bereich öffnen“ */
.mega-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; padding: 34px 0 36px }
.mega-columns:has(> .mega-group:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)) }   /* Bereich mit zwei Gruppen (seit 07.10.2026 alle) */
.mega-group { min-width: 0 }
.mega-parent { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 12px; margin-bottom: 4px; border-bottom: 2px solid #edf0f5; font-size: 1.08rem; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mega-parent span { color: var(--accent-strong) }
.mega-parent:hover { color: var(--primary) }
.mega-children { display: grid }
.mega-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; min-height: 39px; padding: 9px 4px 9px 1px; border-bottom: 1px solid #edf0f4; font-size: .98rem; color: #4d586f; transition: color var(--t-fast) }
.mega-child > span:first-child { transition: transform var(--t-fast) }
.mega-child:hover { color: var(--primary) }
.mega-child:hover > span:first-child { transform: translateX(4px) }
.mega-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mini-arrow { flex: none; color: var(--accent-strong); font-weight: 800 }
.mega-child.is-active { color: var(--primary-800); font-weight: 800; padding-left: 10px; border-radius: var(--r-sm) 0 0 var(--r-sm); background: linear-gradient(90deg, var(--accent-soft), transparent) }
.mega-child.is-active .mega-label::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-strong); margin-right: 8px; vertical-align: middle; transform: translateY(-1px) }


/* Mobiles Menü */
.mobile-menu { position: fixed; inset: 0; z-index: 1000; background: rgba(8, 16, 33, .72); backdrop-filter: blur(5px); opacity: 0; visibility: hidden; pointer-events: none; transition: .22s }
.mobile-menu.open { opacity: 1; visibility: visible; pointer-events: auto }
.mobile-menu-panel { width: min(94vw, 540px); height: 100%; margin-left: auto; background: linear-gradient(155deg, #17223f, #314679); color: #fff; padding: 24px 28px 34px; overflow: auto; transform: translateX(100%); transition: transform var(--t) ease }
.mobile-menu.open .mobile-menu-panel { transform: none }
.mobile-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, .15) }
.mobile-head img { width: 188px }
.mobile-close, .search-close { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); border-radius: 50%; color: #fff; cursor: pointer }
.mobile-close svg, .search-close svg { width: 20px; height: 20px }
.mobile-nav-label { margin-top: 24px; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: #aeb8d2; font-weight: 800 }
.mobile-level-1, .mobile-level-2 { border-bottom: 1px solid rgba(255, 255, 255, .13) }
.mobile-sub > .mobile-level-2:last-child { border-bottom: 0 }   /* letzte Gruppe ohne Linie – sonst Doppellinie mit dem Bereich darunter */
.mobile-level-1 > summary, .mobile-level-2 > summary, .mobile-nested > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer }
.mobile-level-1 > summary::-webkit-details-marker, .mobile-level-2 > summary::-webkit-details-marker, .mobile-nested > summary::-webkit-details-marker { display: none }
.mobile-level-1 > summary { padding: 17px 0; font-size: 1.08rem; font-weight: 700 }
.mobile-level-2 > summary { padding: 11px 0; font-size: 1.02rem; font-weight: 700; color: #edf0fb }
.chev { color: var(--accent); transition: transform .2s }
details[open] > summary > .chev { transform: rotate(45deg) }
.mobile-sub { padding: 0 0 10px 12px }
.mobile-level-3 { display: grid; padding: 0 0 8px 11px; border-left: 1px solid rgba(255, 255, 255, .16) }
.mobile-link, .mobile-direct a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; color: #d1d8eb; font-size: 1rem }
.mobile-link:hover, .mobile-direct a:hover { color: #fff }
.mobile-link.is-current { color: #fff; font-weight: 700 }
.mobile-link.is-current > span:last-child { color: var(--accent) }
.mobile-nested { border-bottom: 1px solid rgba(255, 255, 255, .08) }
.mobile-nested > summary { padding: 9px 0; color: #e7ebf6; font-size: .9rem; font-weight: 700 }
.mobile-nested-body { margin-left: 8px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .17) }
.mobile-direct { display: grid; margin-top: 16px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .14) }
.mobile-cta { width: 100%; margin-top: 24px }

/* Responsive */
@media (max-width: 1220px) {
	.mega { width: min(calc(100vw - 36px), 1120px); grid-template-columns: 225px 1fr; gap: 28px; padding-right: 30px }
	.mega-columns { gap: 20px }
}
@media (max-width: 1320px) {
	.header-main { gap: 16px }
	.brand img { width: 190px }
	.nav-trigger { padding-inline: 10px; font-size: .82rem }
}
/* knapp über der Tablet-Grenze (1021–1100 px): Header noch etwas enger, damit nichts überläuft */
@media (max-width: 1100px) {
	.header-main { gap: 10px }
	.brand img { width: 160px }
	.nav-trigger { padding-inline: 7px }
	.header-actions { gap: 8px; margin-left: 0 }
}
@media (max-width: 1020px) {
	.desktop-nav, .round-action, .header-cta { display: none }
	/* Kopfzeile auf Tablet und Handy: nur Telefon, Krankmeldung, Sitemap – sie scrollt weg, Logo und Menü bleiben stehen (Kopf klebt 31 px tiefer) */
	.site-header { top: -31px }
	.utility-inner { height: 30px; font-size: .8rem }
	.utility-claim, .utility-links .nur-desktop { display: none }
	.utility-links { flex: 1; justify-content: flex-start; gap: 18px }   /* Krankmeldung und Sitemap links, Telefon rechts */
	.utility-tel { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 700 }
	.utility-icon { display: inline-flex; font-size: .95rem }
	.header-main { height: 88px }
	.brand img { width: 198px }
	.header-actions { margin-left: auto }
	.mobile-toggle { display: grid }
	.mega { display: none }
}
@media (max-width: 760px) {
	/* Startseite: Titelbild steht unter dem Header (startseite.css), daher Header wie auf den Inhaltsseiten */
	.home .site-header:not(.scrolled) { background: rgba(255, 255, 255, .96); box-shadow: 0 1px 0 var(--line) }
	.home.hero-dunkel .site-header:not(.scrolled) { background: var(--grad-header) }
	.home .site-header:not(.scrolled)::before { display: none }
	:where(body:not(.hero-dunkel)).home .site-header:not(.scrolled) .header-utility { background: #e7ebf3; border-bottom-color: var(--line-strong); backdrop-filter: none }   /* Kopfzeile wie auf den Inhaltsseiten */
	.header-main { height: 80px }
	.brand img { width: 174px }
	.mobile-menu-panel { width: 100%; padding: 20px 22px 32px }
}
@media (max-width: 480px) {
}