/* ============================================================
   Gemeinsame Responsive-Basis für alle 1:1-Mockup-Ports.
   Wird ZUSÄTZLICH zur Seiten-CSS geladen (danach), site-weit.
   Mockups sind fix 1440 px designt → hier: kein Horizontal-Overflow,
   fluide Medien, mobiler Nav-Hamburger (CSS-only, ohne JS).
   Seiten-spezifisches Sektions-Stacking steht in der jeweiligen <slug>.css.
   ============================================================ */

/* Kein horizontaler Overflow aus fixbreiten Sektionen */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, iframe { max-width: 100%; }

/* Volle Seitenbreite statt fixem 1440-Canvas (Jakob 14.07.):
   die Mockups setzen body{width:1440px;margin:0 auto} → hier aufgehoben. */
body { width: 100%; }

/* Hamburger-Steuerung: auf Desktop unsichtbar */
.bury-navtoggle, .bury-burger { display: none; }

/* ── Desktop-Header wie Figma: volle Breite, Logo links · Pille mittig · CTA rechts ──
   Der Mockup-Header ist position:absolute mit max-width:1440 an Viewport-links → bei
   breiteren Screens links versetzt. Hier: volle Breite + 3-Spalten-Grid, Pille echt
   zentriert, etwas mehr Abstand nach oben. Hero-Bild randlos. */
@media (min-width: 901px) {
	.nav {
		max-width: 100%;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: 16px;
		padding-top: 38px;
	}
	.nav > .nav-logo  { justify-self: start; }
	.nav > .nav-links { justify-self: center; }
	.nav > .nav-cta   { justify-self: end; }
	/* Hero-Bild über die volle Breite (randlos) */
	.hero, .page-hero { padding-left: 0; padding-right: 0; }
}

/* ── Tablet/Mobil: Nav wird Hamburger-Panel ── */
@media (max-width: 900px) {
	.nav { flex-wrap: wrap; gap: 12px; padding-left: 20px; padding-right: 20px; }

	.bury-burger {
		display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
		width: 46px; height: 46px; padding: 12px; cursor: pointer; order: 3; margin-left: auto;
		background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); border-radius: 999px;
	}
	.bury-burger span { display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s; }

	.nav-cta { order: 4; }

	.nav-links {
		display: none; position: absolute; top: calc(100% + 8px); left: 16px; right: 16px;
		flex-direction: column; align-items: stretch; gap: 4px;
		background: rgba(20,19,17,0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
		padding: 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.15);
		box-shadow: 0 24px 60px rgba(0,0,0,0.45); white-space: normal;
	}
	.nav-links li { width: 100%; }
	.nav-links a { display: block; padding: 12px 16px; border-radius: 12px; font-size: 16px; color: rgba(255,255,255,0.85); }
	.nav-links a:hover, .nav-links a.active { background: rgba(255,255,255,0.08); color: #fff; }

	.bury-navtoggle:checked ~ .nav-links { display: flex; }
	.bury-navtoggle:checked ~ .bury-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.bury-navtoggle:checked ~ .bury-burger span:nth-child(2) { opacity: 0; }
	.bury-navtoggle:checked ~ .bury-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 640px) {
	.nav-logo img { height: 34px; }
}

/* Sichtbarer Fokus (BFSG/WCAG 2.4.7) — Seiten-CSS ersetzt den globalen style.css-Fokus */
:where(a, button, input, select, textarea, summary, label, [tabindex]):focus-visible {
	outline: 2px solid #E67508; outline-offset: 2px; border-radius: 3px;
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}