/* ===================================================================
   Modern visual skin — Alevitische Gemeinde Bayern (added 2026-08-19)
   Loaded LAST, after screen.css and responsive.css.

   Scope: visual refresh only (typography, color, spacing, shadows,
   card/button styling, nav polish). Does NOT touch layout width,
   breakpoints, IDs/classes, or any element the TypoScript menu / the
   s3Slider plugin / responsive-nav.js rely on — structure stays
   exactly as before, per "don't break the structure".

   Sources consulted (2026 nonprofit/association web design trends):
   minimalism & reduced clutter, mobile-first, simplified navigation,
   clear labeled action buttons, fast/lightweight pages.
   =================================================================== */

:root {
	--brand-red: #D81D1D;
	--brand-red-dark: #b81616;
	--ink: #3a3a3a;
	--ink-soft: #6b6b6b;
	--line: #e6e5e3;
	--surface: #ffffff;
	--surface-soft: #f7f6f5;
	--radius: 10px;
	--shadow-sm: 0 1px 3px rgba(20,20,20,.06), 0 1px 2px rgba(20,20,20,.08);
	--shadow-md: 0 6px 20px rgba(20,20,20,.09);
	--transition: 180ms ease;
}

/* ---- Typography ---- */
* {
	font-family: 'Inter', 'Segoe UI', Verdana, Arial, sans-serif;
	color: var(--ink);
}
body { background-color: var(--surface-soft); }

/* Main nav menu keeps the original's Verdana — at the same declared
   12px font-size, Inter renders visibly narrower/more compact than
   Verdana (confirmed by direct measurement: "Startseite" rendered
   86.6px wide in Verdana vs 82.0px in Inter), which read as the menu
   looking smaller than the original even though every other metric
   (font-size, padding, letter-spacing, bar height) was identical. */
ul.menu, ul.menu * {
	font-family: Verdana, Arial, sans-serif;
}
h1 { letter-spacing: -0.01em; }
h2 { letter-spacing: -0.01em; color: var(--brand-red); }

a:link, a:visited { color: var(--brand-red); transition: color var(--transition); }
a:hover { color: var(--brand-red-dark); }

/* ---- Page shell ---- */
#border {
	box-shadow: var(--shadow-md);
	border-radius: 0 0 var(--radius) var(--radius);
	overflow: hidden;
}

/* ---- Header ---- */
#header { background: var(--surface); }
#language_menue img { border-radius: 3px; box-shadow: var(--shadow-sm); transition: transform var(--transition); }
#language_menue a:hover img { transform: translateY(-1px); }

ul.servicenavi a:link, ul.servicenavi a:visited { color: var(--ink-soft); }
ul.servicenavi a:hover { color: var(--brand-red); }

/* ---- Main nav ---- */
#navigation { background-color: #2f2f2f; }
ul.menu li a:link, ul.menu li a:visited {
	transition: background-color var(--transition), color var(--transition);
}
ul.menu li a:hover, ul.menu a.active {
	background-color: var(--brand-red) !important;
	border-radius: 3px;
}
ul.menu ul { border-radius: 0 0 8px 8px; box-shadow: var(--shadow-md); }

#nav-toggle { box-shadow: var(--shadow-sm); transition: background-color var(--transition); }
#nav-toggle:hover { background-color: var(--brand-red); }

/* ---- Hero / slider ---- */
#slider1 { border-radius: var(--radius); overflow: hidden; }
.slider1Image span.right, .slider1Image span.left {
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.75) 100%) !important;
}
#root_menue {
	border-radius: 6px;
	background-color: var(--surface-soft) !important;
	color: var(--ink-soft) !important;
}
#root_menue a { background-color: transparent !important; color: var(--ink-soft) !important; }

/* ---- "mehr" / call-to-action links become real buttons ---- */
#main_content a[href*="mehr"], #main_content p a:last-child:has(+ :not(a)) {}
.news-latest-container a[style*="D81D1D"] {
	display: inline-block;
	margin-top: 6px;
	padding: 6px 14px;
	background: var(--brand-red);
	color: #fff !important;
	border-radius: 999px;
	font-size: 12px !important;
	transition: background-color var(--transition), transform var(--transition);
}
.news-latest-container a[style*="D81D1D"]:hover {
	background: var(--brand-red-dark);
	transform: translateY(-1px);
}

/* ---- News / teaser cards ----
   Uses the ORIGINAL site's own classes/pixel sizes (.news-latest-container
   width:900px, .news-latest-item width:280px/float:left/margin:0 5px/
   border-right divider — all defined in screen.css, untouched here).
   Only two things are added on top: (1) height:auto to fix the original's
   own height:315px/350px bug (see log section 29.3 — caused content to
   overflow into the footer), and (2) a subtle modern card treatment. */
.news-latest-container, .news-latest-item { height: auto !important; }
.news-latest-item {
	background: var(--surface);
	border-radius: 6px;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition), transform var(--transition);
}
.news-latest-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.news-latest-item img { border-radius: 4px; }

/* ---- Generic content images / galleries ---- */
#main_content img, #vereinsuebersicht img { border-radius: 6px; }

/* ---- Footer ---- */
#footer { background-color: #2f2f2f !important; border-top: none !important; color: #d8d8d8; }
#footer, #footer * { color: #d8d8d8 !important; }

/* ---- Focus visibility (accessibility) ---- */
a:focus-visible, button:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }