/* ===================================================================
   Responsive overrides for Alevitische Gemeinde Bayern (added 2026-08-19,
   revised same day after user feedback: the 768-970px zone rendered as
   a shrunk copy of the desktop bar — squeezed logo/menu, no hamburger.
   Loaded AFTER screen.css.

   Design: ONE clean breakpoint at 900px.
   - Above 900px: completely untouched, pixel-identical to the original
     fixed-970px desktop design (no fluid shrinking at all).
   - At or below 900px: real mobile/tablet layout — hamburger nav,
     stacked columns, fluid images. No in-between "squeezed desktop"
     state.
   =================================================================== */

img { max-width: 100%; height: auto; }

/* hamburger button: hidden above the breakpoint */
#nav-toggle { display: none; }

/* #header has a hard-coded fixed height:182px in screen.css, but its
   actual content (logo/lang-switcher + service nav + main menu) needs
   a few more pixels than that — confirmed by direct measurement: with
   the section 38 menu font revert (Verdana, which renders slightly
   taller line-height than Inter at the same font-size), the content
   grew to ~205px while the box stayed fixed at 182px, so the bottom of
   the menu overflowed past #header's own box and the slider (which is
   positioned right after #header closes) started 20+px too high,
   overlapping the menu. auto lets the box size to its real content —
   it can never be "too short" again regardless of which font is used. */
#header { height: auto !important; }

/* ===================================================================
   Slider width: pure CSS percentage cascade (always active, not just
   under the mobile breakpoint below).
   screen.css gives every level of the slider its own fixed pixel width
   (#slider1, #slider_image, .slider1Image all 970px; #slider1Content
   926px). Under the fluid `zoom` scaling in responsive-nav.js, relying
   on that zoom to cascade these fixed values in sync with #header
   proved unreliable in real-world browsers (confirmed by direct
   testing — a right-side gap appeared next to the slider even though
   the CSS math says it shouldn't). Each level here is instead set to
   100% of its own actual (already correctly zoomed) parent — a plain
   percentage can never mismatch its parent, by definition, so this
   needs no JS measurement or zoom compensation at all. Height is left
   alone; zoom scales it in lock-step with the (now-matching) width,
   preserving the image's proportions automatically. */
#slider_image, #slider1, #slider1Content, .slider1Image {
	width: 100% !important;
}
.slider1Image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ===================================================================
   Mobile & tablet (<=900px) — single breakpoint, no squeezed middle zone
   =================================================================== */
@media (max-width: 969px) {
	#border, #header, #header_top, #servicenavi, #subheader, #navigation,
	#slider_image, #slider1, #slider1Content, #root_menue, #content, #footer {
		width: 100% !important;
		max-width: 970px;
		min-width: 0;
		box-sizing: border-box;
	}
	#main_content { width: 100% !important; max-width: 800px; box-sizing: border-box; }
	#vereinsuebersicht { width: 100% !important; max-width: 865px; box-sizing: border-box; }

	/* slider keeps its 970:420 aspect ratio instead of a fixed pixel height,
	   so it scales down cleanly and never depends on JS/layout timing */
	#slider1, #slider_image, .slider1Image {
		height: auto !important;
		aspect-ratio: 970 / 420;
	}
	.slider1Image span { height: 100% !important; }

	#header { height: auto !important; padding-bottom: 10px; }

	#logo { float: none; width: 100%; text-align: center; margin-top: 10px; }
	#logo img { max-width: 260px; }
	#language_menue { float: none; width: 100%; text-align: center; height: auto; margin-top: 8px; }

	#servicenavi { text-align: center; font-size: 11px; }

	/* ---- Hamburger nav ---- */
	#nav-toggle {
		display: block;
		width: 44px;
		height: 40px;
		margin: 8px auto;
		background: #535151;
		border: none;
		border-radius: 3px;
		position: relative;
		cursor: pointer;
	}
	#nav-toggle span, #nav-toggle span::before, #nav-toggle span::after {
		content: "";
		position: absolute;
		left: 10px;
		right: 10px;
		height: 3px;
		background: #fff;
		border-radius: 2px;
	}
	#nav-toggle span { top: 19px; }
	#nav-toggle span::before { top: -9px; }
	#nav-toggle span::after { top: 9px; }

	#navigation { height: auto !important; }
	ul.menu {
		display: none;
		text-align: left;
		width: 100%;
	}
	ul.menu.nav-open { display: block; }
	ul.menu li {
		float: none !important;
		width: 100%;
		height: auto;
	}
	ul.menu li a {
		height: auto;
		padding: 12px 14px;
		font-size: 13px;
	}
	ul.menu ul, ul.menu ul.hover {
		display: none;
		position: static;
		width: 100% !important;
		min-width: 0;
	}
	ul.menu ul.submenu-open { display: block !important; }
	ul.menu ul li { width: 100%; }

	#root_menue { height: auto !important; padding: 8px 10px; font-size: 12px; margin-bottom: 20px; }

	#main_content { padding: 0 15px 20px !important; }
	#vereinsuebersicht { padding: 0 15px 20px !important; }

	/* stack anything that used floats/percent columns for a 2-col layout */
	.news-latest-container > div { max-width: 100% !important; flex-basis: 100% !important; }
	.news-latest-container > div[style*="border-right"] { border-right: none !important; border-bottom: 1px solid #DDDEDF; padding-bottom: 20px !important; margin-bottom: 20px; }
	.ce-left .ce-gallery, .ce-right .ce-gallery, .ce-column, #map, #servicepoints {
		float: none !important;
		width: 100% !important;
	}

	/* AABF-style side-by-side photo rows: stack on mobile */
	#main_content div[style*="display:flex"] { flex-wrap: wrap !important; }
	#main_content div[style*="display:flex"] > div { flex-basis: 100% !important; max-width: 100% !important; }

	#footer { width: 100% !important; text-align: center; font-size: 11px; padding: 15px 10px; }

	table { width: 100% !important; display: block; overflow-x: auto; }
}

@media (max-width: 420px) {
	h1 { font-size: 16px !important; }
	#logo img { max-width: 210px; }
}