/* Styles der Startseite: Hero, Zahlenleiste, Claim-Band, Teaser
   Wird nur von index.php geladen (mit Cache-Buster ueber filemtime). */

.main-skw {
	padding-top: 120px;
}

/* --- Hero: Spendenaufruf im Bild --- */
.skw-hero {
	border-radius: 8px 8px 0 0;
	background-image: linear-gradient(rgba(15, 26, 8, 0.45), rgba(15, 26, 8, 0.55)), url(/assets/img/landing/hainbuche_01.jpg);
	background-size: cover;
	background-position: center;
	padding: 90px 30px 100px;
	text-align: center;
	color: #fff;
}
.skw-hero .skw-eyebrow {
	display: block;
	font-size: 15px;
	letter-spacing: 4px;
	text-transform: uppercase;
	margin-bottom: 28px;
	opacity: 0.92;
}
.skw-hero h1 {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.2;
	margin: 0 auto 16px;
	max-width: 22ch;
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
@media (min-width: 768px) {
	.skw-hero h1 {
		font-size: 52px;
	}
}
.skw-hero .skw-fuer-immer {
	color: #b9e88a;
}
.skw-hero .skw-sub {
	font-size: 18px;
	max-width: 52ch;
	margin: 0 auto 36px;
	opacity: 0.95;
}
.skw-hero-buttons {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}
.skw-btn {
	display: inline-block;
	font-weight: 700;
	font-size: 17px;
	padding: 14px 34px;
	border-radius: 50px;
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.skw-btn-solid {
	background: #72c02c;
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.skw-btn-solid:hover {
	background: #5da123;
	color: #fff;
	text-decoration: none;
}
.skw-btn-ghost {
	border: 2px solid rgba(255, 255, 255, 0.85);
	color: #fff;
}
.skw-btn-ghost:hover {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	text-decoration: none;
}

/* --- Zahlenleiste unter dem Hero (Kacheln sind Links) --- */
.skw-statbar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: #fff;
	border-top: 4px solid #72c02c;
	border-radius: 0 0 8px 8px;
	overflow: hidden;
}
.skw-statbar a {
	padding: 20px 12px 22px;
	text-align: center;
	border-left: 1px solid #e5e8e0;
	text-decoration: none;
	color: inherit;
}
.skw-statbar a:first-child {
	border-left: none;
}
.skw-statbar a:hover {
	background: #f2f7ec;
	text-decoration: none;
}
.skw-statbar .skw-num {
	display: block;
	font-size: 26px;
	font-weight: 800;
	color: #5da123;
	line-height: 1.2;
}
.skw-statbar .skw-lbl {
	font-size: 14px;
	color: #777;
}
@media (max-width: 767px) {
	.skw-statbar {
		grid-template-columns: repeat(2, 1fr);
	}
	.skw-statbar a {
		border-top: 1px solid #e5e8e0;
	}
	.skw-statbar a:nth-child(-n+2) {
		border-top: none;
	}
	.skw-statbar a:nth-child(3) {
		border-left: none;
	}
}

/* --- Claim-Band --- */
.skw-claim {
	text-align: center;
	padding-top: 50px;
}
.skw-claim h2 {
	font-size: 30px;
	font-weight: 300;
	margin-bottom: 14px;
}
.skw-claim h2 strong {
	font-weight: 800;
	color: #5da123;
}
.skw-claim h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	background: #72c02c;
	margin: 16px auto 0;
}
.skw-claim p {
	max-width: 58ch;
	margin: 0 auto;
	color: #666;
}

/* --- Teaser-Karten: Bruecke zu den Unterseiten --- */
.skw-teasers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
@media (max-width: 820px) {
	.skw-teasers {
		grid-template-columns: 1fr;
	}
}
.skw-teaser {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e5e8e0;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.skw-teaser:hover {
	text-decoration: none;
	color: inherit;
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}
.skw-teaser .skw-photo {
	height: 170px;
	background-size: cover;
	background-position: center;
}
.skw-teaser .skw-body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
.skw-teaser .skw-kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #5da123;
}
.skw-teaser h3 {
	font-size: 18px;
	margin: 0;
	line-height: 1.35;
}
.skw-teaser p {
	margin: 0;
	font-size: 14px;
	color: #777;
	flex: 1;
}
.skw-teaser .skw-more {
	font-weight: 700;
	color: #5da123;
	font-size: 14px;
}