/* Zusätzliche Layoutregeln für Seiten mit `layout: hero`.
 * Die regulären Inhaltsstile bleiben in style.css geladen. */

.main-layout {
	width: 100%;
}

.main-layout .main-content {
	flex: 1 1 100%;
	width: 100%;
	max-width: 100%;
}

.main-layout .sidebar {
	display: none;
}

:root {
	--ink: #193d29;
	--green: #315f3a;
	--green-2: #557d5c;
	--paper: #f5f5ef;
	--line: rgba(34,74,45,.14);
	--shadow: 0 18px 45px rgba(27,60,37,.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Fließtext-Schriftart */
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Klassischer Serif-Font-Stack für Überschriften (ohne exzellentes Georgia-Ampersand zu verlieren) */
h1, h2, .category span, .feature h2 {
	font-family: Georgia, "Baskerville", "Palatino Linotype", "Book Antiqua", "Garamond", serif;
	font-weight: normal;
}

a { color: inherit; text-decoration: none; }

/* Inkludierungs-Reset: Verhindert ungewollte Innenabstände des übergeordneten Portal-Articles */
#main-content article {
	padding: 0;
	margin: 0;
}

/* HERO SECTION */
.hero {
	min-height: 52vh;
	height: clamp(420px, 58vh, 760px);
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: #f2f2e9 url("images/hero-forest.webp") center right / cover no-repeat;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
	90deg,
	rgba(247,247,240, 0.95) 0%,
	rgba(247,247,240, 0.75) 28%,
	rgba(247,247,240, 0.30) 47%,
	rgba(247,247,240, 0.08) 63%,
	rgba(247,247,240, 0)	70%
	);
}

.hero-copy {
	position: relative;
	z-index: 1;
	width: min(1180px, 88vw);
	max-width: 600px;
	margin: 0;
	padding: 4rem 0 4rem 6%;
}

.eyebrow { font-size: .78rem; letter-spacing: .19em; text-transform: uppercase; font-weight: 600; color: #5a765e; margin: 0 0 1rem; }

h1 {
	font-size: clamp(3rem, 6vw, 6.8rem);
	line-height: .93;
	letter-spacing: -.045em;
	margin: 0;
	color: #1f4b31;
}

/* Der längere Zusatz im h1 */
h1 span {
	font-size: 0.52em;
	line-height: 1.15;
	display: block;
	margin-top: 0.25em;
	color: #315a3a;
	letter-spacing: normal;
}

.lead { font-size: clamp(1rem, 1.6vw, 1.35rem); color: #426148; margin: 1.45rem 0 2rem; max-width: 680px; }

.cta { display: inline-flex; align-items: center; gap: .8rem; background: #4d7b51; color: #fff; padding: .85rem 1.25rem; border-radius: 10px; font-weight: 600; box-shadow: 0 10px 25px rgba(52,91,57,.18); transition: .25s ease; }
.cta:hover { transform: translateY(-2px); background: #3e6943; }
.cta span { font-size: 1.25rem; }

.scroll-hint { position: absolute; bottom: 1.5rem; left: 6%; font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: #527058; display: flex; align-items: center; gap: .7rem; }
.scroll-hint span { width: 34px; height: 1px; background: #527058; }

/* GRID & CARDS */
.category { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; min-width: 0; color: #315a3a; position: relative; padding: 1rem .5rem; transition: .2s; }
.category:after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 0; height: 3px; background: #4f7d53; transform: scaleX(0); transition: .2s; }
.category:hover, .category.active { background: #eef2e9; }
.category:hover:after, .category.active:after { transform: scaleX(1); }

.feature-art { display: grid; place-items: center; overflow: hidden; border-radius: 15px; }
.feature-art img { object-fit: cover; object-position: center; border-radius: 15px; filter: saturate(.78); transition: .3s; }
.category:hover img { transform: scale(1.06); filter: saturate(1); }
.category span { font-size: clamp(1rem, 1.5vw, 1.35rem); }

.feature-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; background: #dfe7db; }

/* Jede Kachel als vertikale Flexbox definieren */
.feature {
	display: flex;
	flex-direction: column;
	height: 100%;		/* Zwingt die Kachel, die volle Grid-Zeilenhöhe einzunehmen */
	min-height: 360px;	/* Verhindert, dass sie zu klein wird */
	background: #f7f5ed;
	border-right: 1px solid rgba(33,69,41,.12);
	position: relative;
	overflow: hidden;
}
.feature:last-child { border-right: 0; }

.feature:last-child { border-right: 0; }
.feature-text {
	display: flex;
	flex-direction: column;
	flex-grow: 1;		/* Ersetzt das starre height: 45% und füllt den Restraum */
	padding: 1.35rem 1.25rem 1.6rem;
	background: #f7f5ed;
}
.feature-text span { font-size: .75rem; letter-spacing: .14em; color: #719072; }
.feature h2 { font-size: clamp(1.35rem, 2vw, 2rem); margin: .25rem 0 .45rem; }
.feature p { margin: 0; color: #5b6c5d; font-size: 1.0rem; line-height: 1.55; }

footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 5.5%; background: #244a2f; color: #dfe9dc; font-size: .75rem; letter-spacing: .04em; }

/* SEO- & Philosophie-Einführungsblock (Dezent & Kompakt) */
.portal-intro {
	background: #f7f5ed;
	padding: 3.5rem 1.5rem; /* Etwas weniger Padding, damit es kompakter wirkt */
	border-top: 1px solid rgba(34, 74, 45, 0.12);
}

.intro-container {
	max-width: 780px;
	margin: 0 auto;
}

.portal-intro h2 {
	font-size: clamp(1.3rem, 1.8vw, 1.7rem); /* Etwas kleinere Überschrift */
	color: #1f4b31;
	margin: 0 0 0.75rem 0;
	line-height: 1.25;
}

.portal-intro p {
	color: #526c56; /* Einen Tick gedämpfterer Ton */
	font-size: 1.0rem; /* Bewusst kleiner gewählt für den Sekundär-Charakter */
	line-height: 1.3;
	margin: 0;
}

/* Minimalistischer Intro-Teaser unter den Kacheln */
.home-intro-teaser {
	background: #f7f5ed;
	text-align: center;
	padding: 2.2rem 1.5rem;
	border-top: 1px solid rgba(34, 74, 45, 0.12);
}

.home-intro-teaser p {
	margin: 0;
	font-size: 0.95rem;
	color: #426148;
	letter-spacing: 0.02em;
}

.home-intro-teaser a {
	color: #1f4b31;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.home-intro-teaser a:hover {
	color: #315f3a;
}

/* MEDIA QUERIES */
@media (max-width: 900px) {
	.hero { height: 62vh; min-height: 520px; background-position: 62% center; }
	.hero-overlay { background: linear-gradient(90deg, rgba(247,247,240, 0.95) 0%, rgba(247,247,240, 0.85) 30%, rgba(247,247,240, 0.18) 100%); }
	.hero-copy { width: 86vw; }
	.category span { font-size: .9rem; }
	.feature-grid { grid-template-columns: repeat(2, 1fr); }
	.feature { min-height: 410px; }
	.feature:nth-child(2n) { border-right: 0; }
	footer { flex-direction: column; }
}

@media (max-width: 560px) {
	.hero { height: 72vh; min-height: 580px; background-position: 67% center; }
	.hero-copy { padding-top: 1rem; }
	.eyebrow { font-size: .68rem; }
	h1 { font-size: clamp(2.7rem, 14vw, 4.4rem); }
	.lead { font-size: 1rem; max-width: 300px; }
	.category { min-width: 112px; padding: .9rem .5rem; }
	.feature-grid { grid-template-columns: 1fr; }
	.feature, .feature:nth-child(2n) { border-right: 0; }
	.feature { min-height: 430px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.cta, .category img, .feature-art img { transition: none; }
}