/* ==========================================================================
   Responsive: Burger-Menü < 900px, Breakpoints 900px & 600px, Grid-Stacking
   ========================================================================== */

/* ---- Tablet: ≤ 900px ---- */
@media (max-width: 900px) {
	.burger {
		display: flex;
	}

	/* backdrop-filter auf .site-header erzeugt einen Containing-Block für
	   position:fixed-Nachfahren und würde das volle Drawer-Menü im Header
	   einsperren – auf Mobile deshalb deaktivieren (opaker Header stattdessen). */
	.site-header {
		backdrop-filter: none;
		background: rgb(250 250 250 / 0.98);
	}

	.main-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(86vw, 380px);
		height: 100vh;
		height: 100dvh;
		background: var(--color-dark);
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		padding: clamp(6rem, 20vh, 8rem) 2rem 2rem;
		transform: translateX(100%);
		transition: transform var(--dur-slow) var(--ease-out);
		z-index: 95;
		overflow-y: auto;
	}
	.main-nav.is-open {
		transform: translateX(0);
	}
	.nav-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		width: 100%;
	}
	.nav-menu li {
		width: 100%;
		border-bottom: 1px solid rgb(255 255 255 / 0.1);
	}
	.nav-menu a {
		display: block;
		width: 100%;
		padding: 1.1rem 0.1rem;
		color: #fff;
		font-size: 1.1rem;
		min-height: 44px;
	}
	.nav-menu a::after {
		display: none;
	}
	.nav-cta {
		margin-top: 1.5rem;
		justify-content: center;
		width: 100%;
	}

	.services__grid,
	.news__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
	.contact-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Mobil: ≤ 600px ---- */
@media (max-width: 600px) {
	.stats__grid {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 2rem;
	}
	.stat-tile:nth-child(3) {
		border-left: 0;
		padding-left: 0;
	}

	.services__grid,
	.news__grid {
		grid-template-columns: 1fr;
	}

	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.section-head--split {
		align-items: flex-start;
	}

	.hero__title {
		font-size: clamp(2.4rem, 2rem + 5vw, 3.4rem);
	}
	.hero__actions .btn {
		width: 100%;
		justify-content: center;
	}

	.matchday__slide {
		width: 84vw;
	}

	.btn {
		min-height: 44px;
	}
	.slider-btn,
	.burger {
		min-height: 44px;
		min-width: 44px;
	}
}

/* Kein horizontales Scrollen als letzte Sicherung. WICHTIG: overflow-x auf body
   NICHT setzen (auch nicht clip/hidden) – jeder nicht-visible overflow-x-Wert
   erzwingt implizit overflow-y:auto auf demselben Element (CSS-Spec-Kopplung)
   und macht body damit zu einem eigenen Scroll-Container. Das bricht
   position:sticky im Header, der dann relativ zu body statt zum Viewport
   „klebt" und mitten auf der Seite hängen bleibt. Nur html clippen. */
html {
	overflow-x: clip;
}