/* AH-BK · Basis & Layout */
*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important }
html { scroll-behavior: smooth }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.62; color: var(--ink); background: #fff; letter-spacing: -.005em; -webkit-font-smoothing: antialiased }
img { max-width: 100%; height: auto; display: block }
a { color: inherit; text-decoration: none }
button, input, select, textarea { font: inherit; color: inherit }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 4px }
/* Auf dunklem Grund: oranger Fokusrahmen (Kontrast > 3 : 1) */
:is(.site-header, .site-footer, .mega-intro, .home-band, .consent-head, .bg-cta, .hero-slider, .search-overlay, .lightbox, .school-feature) :focus-visible { outline-color: var(--accent) }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 }
.skip { position: fixed; z-index: 5000; left: 18px; top: 10px; background: #fff; color: #111; padding: 10px 14px; border-radius: var(--r-sm); transform: translateY(-160%); box-shadow: var(--shadow-sm) }
.skip:focus { transform: none }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.note { font-size: var(--fs-small); color: var(--muted) }


.shell { width: min(calc(100% - 64px), var(--shell)); margin-inline: auto }
.shell-wide { width: min(calc(100% - 64px), var(--shell)); margin-inline: auto }   /* gleiche Breite wie .shell, damit Header, Inhalt, Menü und Footer bündig sind */
.section { padding: var(--s-9) 0 }
.content-layout { display: grid; grid-template-columns: 286px minmax(0, 1fr); gap: 80px; padding: var(--s-8) 0 120px }
.content-layout.no-side { grid-template-columns: minmax(0, 1fr) }
.content-main { overflow-wrap: break-word }
.content-main :is(h1, h2, h3) { hyphens: auto; -webkit-hyphens: auto }
.content-main { min-width: 0; font-size: var(--fs-text) }
/* Inhalt reicht bis zur rechten Kante von Header/Footer (.shell); nur Fließtext bleibt für die Lesbarkeit schmaler */
.page-body > :is(p, ul, ol, h2, h3, h4, blockquote, address), .content-main .lead { max-width: var(--w-content) }
/* Raster für zwei Spalten (V15): breit + schmal 3 : 2 (Standard, gespiegelt bei Bild links), halb + halb 1 : 1 (Bild groß), feste Spalte 240 px + Inhalt */
.content-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-7); align-items: start; margin: 10px 0 12px }
.content-split.bild-links { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) }
.content-split.bild-links > figure { order: -1 }
.content-split.bild-gross { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
@media (max-width: 760px) { .content-split.bild-links, .content-split.bild-gross { grid-template-columns: 1fr } .content-split.bild-links > figure { order: 0 } }
.traeger-badge { display: inline-flex; align-items: center; gap: 18px; margin-top: 10px; padding: 14px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); text-decoration: none; transition: border-color .2s, box-shadow .2s }
.traeger-badge:hover, .traeger-badge:focus-visible { border-color: var(--primary); box-shadow: var(--shadow-sm) }
.traeger-badge small { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; max-width: 9em; line-height: 1.35 }
.traeger-badge img { width: 150px; height: auto; display: block }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: var(--s-5) 0 }

/* Responsive */
@media (max-width: 1220px) {
	.shell { width: min(calc(100% - 46px), var(--shell)) }
}
@media (max-width: 1020px) {
	:root { --header-h: 88px }
	.content-layout { grid-template-columns: 1fr; gap: 28px; padding-top: 40px }
}
@media (max-width: 760px) {
	/* Mobiler Seitenrand, gilt für .shell und .shell-wide (randlose Ausnahmen setzen width: 100% selbst) */
	:root { --header-h: 80px; --rand: 17px }
	.shell { width: min(calc(100% - 2 * var(--rand)), var(--shell)) }
	.shell-wide { width: min(calc(100% - 2 * var(--rand)), var(--shell)) }
	.section { padding: 70px 0 }
	.content-layout { padding-bottom: 70px }
	/* Inhaltsseiten: kleinere Überschriften, engere Abstände */
	:root { --fs-h1: clamp(1.95rem, 8.6vw, 2.4rem); --fs-h2: 1.6rem; --fs-lead: 1.1rem }
	.content-layout { padding-top: 28px }
}
@media (max-width: 480px) {
	:root { --rand: 14px }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important }
}