/*
 * Seitenspezifische Styles der Flächen-Detailseite (single-flaeche.php) –
 * wird nur geladen, wenn dieses Template aktiv ist (siehe functions.php).
 * Statischer Entwurf, siehe CLAUDE.md Abschnitt 10 (Phase I) für den Stand
 * und die noch fehlende Live-API-/Rewrite-Anbindung. Layout seit 2026-08-19
 * nach dem Design-Entwurf "ChatGPT Image 18. Aug. 2026, 12_54_20.png"
 * überarbeitet, siehe CLAUDE.md Abschnitt 8.
 */

/* ---------- Kopfbereich / Hero ---------- */
/* .hero-tagline liegt seit der Zweitnutzung (Herzensbaum-Infoseite) in components/hero.css. */

.flaeche-lead {
	max-width: 720px;
	margin-top: 14px;
	font-size: 14px;
	color: var(--muted);
	line-height: 1.6;
}

/* Grundsätzlicher Infotext (Herzenswald/Aufforstung/Allee) über der
   flächenspezifischen Beschreibung in "Über diese Waldfläche". */
.flaeche-intro {
	margin-bottom: 22px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--line);
}

.flaeche-intro .flaeche-lead + .flaeche-lead {
	margin-top: 10px;
}

/* ---------- Kurzfakten-Leiste unterhalb des Hero ---------- */
.fact-strip-wrap {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 24px 32px;
}

.fact-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.fact-strip-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.fact-strip-item svg {
	width: 22px;
	height: 22px;
	color: var(--green);
	flex-shrink: 0;
	margin-top: 2px;
}

.fact-strip-item .label {
	display: block;
	font-size: 12px;
	color: var(--muted);
}

.fact-strip-item strong {
	display: block;
	font-size: 17px;
	color: var(--ink);
	margin: 2px 0;
}

.fact-strip-item .sub {
	display: block;
	font-size: 12px;
	color: var(--muted);
}

/* ---------- Foto-Galerie neben "Über diese Waldfläche" ---------- */
/* Spalte aus Galerie + Hinweiszeile: die Galerie füllt weiterhin die
   Zeilenhöhe des .two-col-Grids, die Hinweiszeile steht darunter. */
.flaeche-gallery-col {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.flaeche-gallery-col .photo-gallery {
	flex: 1;
	height: auto;
}

.flaeche-gallery-note {
	font-size: 13px;
	color: var(--muted);
}

/* ---------- Karten-Platzhalter ---------- */
/* Bewusst keine echte Karte – siehe CLAUDE.md Abschnitt 9 (echtes
   Kartenframework, z. B. Leaflet, weiterhin nicht Teil dieses
   Arbeitspakets). Der Hinweis-Badge markiert die Stelle klar als
   Platzhalter statt eine (noch nicht zutreffende) Kartenanbieter-Signatur
   vorzutäuschen. */
.map-note {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	z-index: 2;
	background: rgba(27, 42, 26, .82);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 8px 14px;
	border-radius: 999px;
	white-space: nowrap;
}

/* ---------- Kenndaten ---------- */
.kenndaten {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.kenndaten > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}

.kenndaten > div:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.kenndaten dt {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--muted);
}

.kenndaten dt svg {
	width: 16px;
	height: 16px;
	color: var(--green);
	flex-shrink: 0;
}

.kenndaten dd {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
	text-align: right;
}

/* ---------- Baumarten-Liste ---------- */
.species-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.species-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 0;
	border-bottom: 1px solid var(--line);
}

.species-row:last-child {
	border-bottom: none;
}

.species-row .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.species-row .dot.laub { background: var(--green); }
.species-row .dot.nadel { background: var(--green-dark); }

.species-row .name {
	flex: 1;
	font-size: 14px;
	color: var(--ink);
}

.species-row .count {
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
}

/* ---------- Grid-Verhältnisse ---------- */
/* .two-col (1fr/1fr) passt nicht für "Zahlen & Fakten"+Karte bzw.
   "Baumarten"+"Aktuelle Updates" – dort ist die linke Spalte bewusst
   schmaler. Bleibt seitenspezifisch (nur hier gebraucht), analog zu
   .neuigkeiten-grid in pages/neuigkeiten.css. */
.flaeche-grid-narrow {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: 24px;
	align-items: start;
}

.flaeche-grid-wide {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 24px;
	align-items: start;
}

/* Container-basiertes Raster (reagiert auf die verfügbare Breite der
   Spalte, nicht auf die Viewport-Breite) für die "Aktuelle Updates"-Karten
   – vermeidet zu schmale Karten, wenn die Spalte selbst schon schmaler als
   die volle Seitenbreite ist. */
.flaeche-updates-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
}


/* Breakpoint 900px – siehe CLAUDE.md Abschnitt 11.3 */
@media (max-width: 900px) {
	.fact-strip {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.flaeche-grid-narrow,
	.flaeche-grid-wide {
		grid-template-columns: 1fr;
	}
}

/* Breakpoint 600px – siehe CLAUDE.md Abschnitt 11.3 */
@media (max-width: 600px) {
	.fact-strip {
		grid-template-columns: 1fr;
	}

	.fact-strip-wrap {
		padding: 20px;
	}
}