/* News (Artikel 22) – Hell & Dunkel, Stand 08.10.2026
   Aufbau:  news-oben.html (Abendrot-Hero + Einleitung)  →  bisheriges Teaser-Modul (unverändert)
   Neue Datei – wird vom Template automatisch nur auf Artikel 22 geladen. */

/* ---------- Farben ---------- */
.nw, .mainInner .pagination {
	--nw-bg:#161515; --nw-panel:#1e1d1c; --nw-line:#2c2a28;
	--nw-h:#ffffff; --nw-t:#dedad5; --nw-m:#a9a5a0;
	--nw-acc:#8b63ff; --nw-acc-2:#cbb8ff; --nw-btn:#5b3fc4; --nw-btn-h:#6d52d6;
}
@media (prefers-color-scheme: light) {
	.nw, .mainInner .pagination {
		--nw-bg:#f6f4f1; --nw-panel:#ebe7e2; --nw-line:#d9d3cc;
		--nw-h:#1b1918; --nw-t:#3b3835; --nw-m:#6b6661;
		--nw-acc:#6a45e0; --nw-acc-2:#6a45e0;
	}
}

/* ---------- Template-Rahmen: Hero direkt unter den Header ---------- */
.mainInner { padding-top:0; }
.mainInner > :first-child, .mainInner > :first-child > .nw:first-child { margin-top:0; }
html, body { overflow-x:clip; }

/* ---------- Grundgerüst (volle Breite) ---------- */
.nw {
	width:100vw; max-width:100vw;
	margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
	color:var(--nw-t);
	font-family:Roboto, sans-serif; letter-spacing:.01em;
	-webkit-text-size-adjust:100%; text-size-adjust:100%; -webkit-font-smoothing:antialiased;
}
.nw * { box-sizing:border-box; }
.nw .nw-wrap { max-width:1180px; margin:0 auto; padding:0 24px; }   /* bündig mit dem Teaser-Raster */
.nw .nw-stack { display:flex; flex-direction:column; gap:14px; }

/* ---------- Typografie ---------- */
.nw .nw-eyebrow { margin:0; font-size:15px; font-weight:500; letter-spacing:.18em; color:#ffd9b8; }
.nw .nw-eyebrow-acc { color:var(--nw-acc); }
.nw .nw-h1 { margin:0; max-width:900px; font-size:clamp(42px,5.2vw,76px); line-height:1.04; font-weight:700; letter-spacing:-.02em; color:#fff; text-transform:none; }
.nw .nw-h2 { margin:0; font-size:clamp(28px,2.8vw,40px); line-height:1.15; font-weight:700; color:var(--nw-h); text-transform:none; }
.nw .nw-lead { margin:0; max-width:620px; font-size:clamp(20px,2vw,24px); line-height:1.45; font-weight:300; color:#f6ece4; }
.nw .nw-text { margin:0; max-width:560px; font-size:19px; line-height:1.7; font-weight:300; color:var(--nw-t); }

/* ---------- Hero: Abendrot (bleibt in beiden Modi dunkel) ---------- */
.nw .nw-hero { position:relative; overflow:hidden; height:70vh; min-height:500px; max-height:780px; display:flex; align-items:flex-end; background:#141019; }
.nw .nw-hero-img { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:60% 55%; display:block; }
.mainInner .nw .nw-hero-img { height:100%; }   /* gegen .mainInner img{height:auto} */
.nw .nw-hero-shade { position:absolute; inset:0; background:
	linear-gradient(180deg, rgba(10,9,14,0) 50%, rgba(10,9,14,.28) 75%, rgba(10,9,14,.70) 100%),
	linear-gradient(90deg, rgba(10,9,14,.20) 0%, rgba(10,9,14,0) 50%); }   /* heller: Verlauf nur noch unten hinter dem Text */
.nw .nw-hero-text { position:relative; width:100%; padding-bottom:64px; display:flex; flex-direction:column; gap:18px; }
.nw .nw-hero .nw-h1, .nw .nw-hero .nw-lead, .nw .nw-hero .nw-eyebrow { text-shadow:0 2px 18px rgba(0,0,0,.5); }

/* ---------- Einleitung über den Teasern ---------- */
.nw .nw-intro { padding:64px 0 8px; }
.nw .nw-intro-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(380px,100%),1fr)); gap:20px 72px; align-items:end; }

/* ---------- Seitenzahlen (gehören zum Teaser-Modul, nur optisch angepasst) ---------- */
.mainInner .pagination { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:40px 0 64px; padding:0; list-style:none; font-size:15px; }
.mainInner .pagination li { margin:0; padding:0; list-style:none; }
.mainInner .pagination a { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; width:44px; height:44px; margin:0; padding:0; border:1px solid var(--nw-line); border-radius:50%; background:transparent; color:var(--nw-h); font-family:Roboto, sans-serif; font-size:15px; font-weight:500; line-height:1; text-decoration:none; transition:background-color .15s, border-color .15s, color .15s; }
.mainInner .pagination a:hover, .mainInner .pagination a:focus-visible { border-color:var(--nw-acc); color:var(--nw-acc-2); }
.mainInner .pagination a.active { background:var(--nw-btn); border-color:var(--nw-btn); color:#fff; }

/* ---------- Mobil (bis 767px) ---------- */
@media (max-width:767px) {
	.nw .nw-wrap { padding:0 20px; }
	.nw .nw-hero { height:72svh; min-height:460px; }
	.nw .nw-hero-img { object-position:92% 55%; }   /* Wegkreuz bleibt im Bild */
	.nw .nw-hero-text { padding-bottom:40px; gap:14px; }
	.nw .nw-h1 { font-size:40px; }
	.nw .nw-h2 { font-size:28px; }
	.nw .nw-lead { font-size:19px; font-weight:400; }
	.nw .nw-text { font-size:17px; font-weight:400; }
	.nw .nw-intro { padding:40px 0 0; }
	.mainInner .pagination { margin:28px 0 40px; gap:6px; }
	.mainInner .pagination a { width:40px; height:40px; font-size:15px; }
}