/* AH-BK · Großmenü (Vollbild-Menü) */
/* Burger „Menü“ im Header öffnet ein Vollbild-Menü, Variante „Reiter hell“ (entschieden 16.10.2026). Markup: includes/grossmenue.php.
   Die Gruppen nutzen die Bausteine des Aufklappmenüs (.mega-group, .mega-parent, .mega-child in header.css).
   Archiv aller Varianten: grossmenue-varianten.css (nur /burger-varianten). */
.gm-toggle { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px 0 14px; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--r-pill); background: rgba(255, 255, 255, .035); color: #fff; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; transition: background var(--t-fast) }
.gm-toggle:hover { background: rgba(255, 255, 255, .13) }
.gm-burger { display: grid; gap: 4px; width: 18px }
.gm-burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--t-fast) }
.gm-burger i:nth-child(2) { width: 70% }
.gm-toggle:hover .gm-burger i:nth-child(2) { transform: scaleX(1.43); transform-origin: left }

.gm { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: #fff; color: var(--ink); opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility .24s }
.gm.open { opacity: 1; visibility: visible }
.gm :focus-visible { outline-color: var(--primary) }
.gm-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .9); backdrop-filter: blur(14px); box-shadow: 0 0 0 100vmax rgba(255, 255, 255, .9); clip-path: inset(0 -100vmax) }
.gm-brand img { width: 214px }
.gm-top-actions { display: flex; align-items: center; gap: 10px }
.gm-cta { margin-right: 6px }
.gm-search, .gm-close { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border: 1px solid rgba(39, 54, 95, .18); border-radius: var(--r-pill); background: transparent; color: var(--primary-800); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; transition: background var(--t-fast) }
.gm-search:hover, .gm-close:hover { background: var(--soft-blue) }
.gm-search svg, .gm-close svg { width: 18px; height: 18px }

/* Links die Bereiche als Reiter */
.gm-body { flex: 1; display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: clamp(40px, 5vw, 90px); padding: 44px 0 40px }
.gm-bereiche { display: flex; flex-direction: column; gap: 4px; padding-right: clamp(20px, 3vw, 48px); border-right: 1px solid var(--line) }
.gm-tab { position: relative; display: grid; grid-template-columns: 44px 1fr auto; align-items: baseline; gap: 10px; padding: 18px 16px 18px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--muted); font: inherit; text-align: left; cursor: pointer; transition: color var(--t-fast) }
.gm-nr { font-size: .78rem; font-weight: 800; letter-spacing: .08em; color: var(--accent-text); transition: color var(--t-fast) }
.gm-tab-label { font-size: clamp(1.6rem, 2.3vw, 2.3rem); font-weight: 650; line-height: 1.1; letter-spacing: -.04em }
.gm-tab-arrow { color: var(--accent-strong); opacity: 0; transform: translateX(-8px); transition: opacity var(--t-fast), transform var(--t-fast) }
.gm-tab:hover, .gm-tab[aria-selected="true"] { color: var(--primary-800) }
.gm-tab[aria-selected="true"] .gm-nr { color: var(--accent-strong) }
.gm-tab[aria-selected="true"] .gm-tab-arrow { opacity: 1; transform: none }

/* Rechts der gewählte Bereich */
.gm-panel { animation: gm-panel .32s var(--ease) both }
@keyframes gm-panel { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.gm-panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 30px }
.gm-panel-head h2 { margin: 10px 0 10px; font-size: clamp(2rem, 3vw, 3rem); line-height: 1.05; letter-spacing: -.05em; font-weight: 650; color: var(--primary-800) }
.gm-panel-head p { margin: 0; max-width: 560px; color: var(--text); line-height: 1.6 }
.gm .link-arrow { color: var(--primary); white-space: nowrap }

.gm-programme { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 34px }
.gm-programm { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 16px; border-radius: var(--r-lg); background: var(--soft-blue); transition: background var(--t-fast), transform var(--t) }
.gm-programm:hover, .gm-programm.is-active { background: #e3e8f4 }
.gm-programm:hover { transform: translateY(-3px) }
.gm-programm-img { position: relative; display: block; aspect-ratio: 2 / 1; margin-bottom: 10px; overflow: hidden; border-radius: calc(var(--r-lg) - 6px) }
.gm-programm-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease) }
.gm-programm-img .ki-hinweis { right: 6px; bottom: 6px; padding: 1px 5px; font-size: .52rem }   /* kleine Kacheln */
.gm-programm:hover .gm-programm-img img { transform: scale(1.05) }
.gm-programm-kicker, .gm-programm small, .gm-programm strong { padding-inline: 6px }
.gm-programm-kicker { font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text) }
.gm-programm strong { font-size: 1.12rem; line-height: 1.25; color: var(--primary-800) }
.gm-programm small { font-size: .78rem; color: var(--muted) }

.gm-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px }   /* 2 Gruppen je Bereich (seit 07.10.2026); Gruppen = mega_gruppe() wie im Aufklappmenü */

/* Fußleiste */
.gm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; padding: 22px 0 28px; border-top: 1px solid var(--line) }
.gm-direkt { display: flex; flex-wrap: wrap; gap: 8px }
.gm-direkt a { padding: 7px 13px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: .82rem; font-weight: 700; color: var(--primary-800); transition: background var(--t-fast) }
.gm-direkt a:hover { background: var(--soft-blue) }
.gm-kontakt { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .88rem }
.gm-kontakt a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink) }
.gm-kontakt a:hover { color: var(--primary) }
.gm-kontakt svg { width: 17px; height: 17px; color: var(--accent-strong) }
.gm-aktuell { display: grid; gap: 2px; max-width: 320px; margin-left: auto; padding-left: 18px; border-left: 2px solid var(--accent) }
.gm-aktuell small { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.gm-aktuell strong { font-size: .92rem; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.gm-aktuell:hover strong { text-decoration: underline }

/* Responsive */
/* „Menü“ nur als Symbol, sobald der Platz im Header knapp wird (sonst läuft er bei 1221–1320 px über) */
@media (max-width: 1320px) {
	.gm-toggle-label { display: none } .gm-toggle { padding: 0; width: 42px; justify-content: center }
}
@media (max-width: 1220px) {
	.gm-top .gm-cta, .gm-search span { display: none } .gm-search { padding: 0 13px }
	.gm-programme { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 1020px) {
	.gm-toggle { display: none }
	.gm { display: none }   /* auf Tablet und Handy nicht erreichbar – sonst macht das unsichtbare Desktop-Raster die Seite 4 px zu breit */
}