/*
 * Ortshorizont (Styleguide-Baustein): Die Goldpunkte sind der Himmel, die
 * Ortssilhouette aus dem Fußlogo ist die Unterkante. Punkte enden über den Dächern.
 * Nur auf den PDF-Karten (Downloads, Beitritt) – also bei herunterladbaren Dokumenten –
 * und im Ortskopf (Seitentitel über der Skyline, unten), Chris 04.10.2026.
 * Nicht in Teasern wie Newsletter oder Kalender-Abo (Chris, 04.10.2026: „galt wirklich
 * nur für diese downloadbaren PDF-Dinger“).
 *
 * Überall gleich: Gold #C9A84C, Strich 2,5 px, Höhe höchstens 3,25 rem. Schmaler als
 * 7,2 × Höhe schrumpft der ganze Ort mit (13,9 % der Breite); breiter steht er rechts
 * und die Grundlinie läuft nach links weiter – nie gekachelt.
 * Gold fest im SVG, weil ein Hintergrundbild keine Token kennt.
 * Gebrauch: Fläche bekommt container-type, ::after = Ort, ::before = Punkte (siehe unten).
 */
:root {
	--wir-ortshorizont-bild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 317.8 2770.3 384.7'%3E%3Cpath fill='none' stroke='%23C9A84C' stroke-width='2.5' vector-effect='non-scaling-stroke' stroke-linejoin='round' stroke-linecap='round' d='M0 617.5 L481.0 617.5 L566.1 641.8 L566.1 469.6 L594.5 453.4 L639.1 327.8 L683.6 453.4 L712.0 471.6 L712.0 645.9 L821.4 645.9 L821.4 564.8 L973.3 564.8 L973.3 538.5 L1001.7 538.5 L1001.7 564.8 L1076.6 564.8 L1076.6 656.0 L1271.1 560.8 L1327.8 625.6 L1327.8 469.6 L1392.7 354.1 L1457.5 469.6 L1457.5 656.0 L1520.3 656.0 L1575.0 605.3 L1787.7 605.3 L1858.6 546.6 C1980.2 631.7 2182.8 692.5 2425.9 672.2 C2506.9 662.1 2551.5 645.9 2563.6 601.3 C2571.7 560.8 2527.2 556.7 2519.1 591.2 C2510.9 631.7 2567.7 656.0 2648.7 654.0 L2770.3 649.9'/%3E%3C/svg%3E");
	/* cqw gilt im ::before/::after der Fläche, die container-type trägt */
	--wir-ortshorizont-hoehe: min(13.9cqw, 3.25rem);
	/* Ort rechts, links die Grundlinie auf Höhe des Pfadanfangs (22,1 % über der Unterkante) */
	--wir-ortshorizont:
		var(--wir-ortshorizont-bild) right bottom / auto 100% no-repeat,
		linear-gradient(#C9A84C, #C9A84C) left bottom 22.1% / calc(100% - var(--wir-ortshorizont-hoehe) * 7.2) 2.5px no-repeat;
	/* Punkte von unten gesetzt: letzte Reihe überall gleich weit über den Dächern */
	--wir-ortshorizont-punkte: radial-gradient(circle, var(--wp--preset--color--gold) 2.2px, transparent 2.8px) left 12px bottom 12px / 24px 24px; /* slop-ok: radial-hof Punktraster aus harten Punkten, kein Verlauf ins Leere */
}

/* Eine Quelle für die Silhouette: Die PDF-Karte in gestaltung.css liest --wir-ort-bild. */
.wir-karte--pdf { --wir-ort-bild: var(--wir-ortshorizont-bild); }

/* Die Flächen */
:is(.wir-ortshorizont, .wir-downloads--karten .wir-karte--pdf, .wir-beitritt-teaser.wir-karte--pdf) { container-type: inline-size; }
:is(.wir-ortshorizont, .wir-downloads--karten .wir-karte--pdf, .wir-beitritt-teaser.wir-karte--pdf)::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	z-index: -1;
	height: var(--wir-ortshorizont-hoehe);
	background: var(--wir-ortshorizont);
	pointer-events: none;
}

/* PDF-Karte auf Wald: Ort an der Kartenkante über die ganze Breite (statt klein unter dem Heft),
   die Punkte der ganzen Karte enden darüber. */
:is(.wir-downloads--karten .wir-karte--pdf, .wir-beitritt-teaser.wir-karte--pdf) {
	padding-bottom: calc(var(--wp--custom--box--innen) + 3.25rem);
}
:is(.wir-downloads--karten .wir-karte--pdf, .wir-beitritt-teaser.wir-karte--pdf)::after { inset: auto var(--wp--custom--box--innen) var(--wp--custom--box--innen); }
:is(.wir-downloads--karten .wir-karte--pdf, .wir-beitritt-teaser.wir-karte--pdf)::before {
	inset: 0 0 calc(var(--wp--custom--box--innen) + var(--wir-ortshorizont-hoehe) + .2rem);
	background: var(--wir-ortshorizont-punkte);
}

/* Allgemein als Klasse, z. B. im Styleguide: Fläche mit Punkten und Ort */
.wir-ortshorizont { position: relative; isolation: isolate; }
.wir-ortshorizont::before {
	content: "";
	position: absolute;
	inset: 0 0 calc(var(--wir-ortshorizont-hoehe) + .2rem);
	z-index: -1;
	background: var(--wir-ortshorizont-punkte);
	opacity: .55;
	pointer-events: none;
}

/*
 * Ortskopf (Vorlage „Ortskopf“, templates/page-ortskopf.html): Seitentitel im Waldband über der
 * Ortssilhouette – statt Bildband, wenn kein gutes Foto da ist (Chris, 04.10.2026, „Das sind WIR“:
 * „diese coole filigrane Skyline stylisch mit reinnehmen“). Gleiche Maße wie das Bildband
 * (Rasterbreite, Kachelradius, Abstand unter dem Kopf). Hier darf der Ort größer stehen als 3,25 rem:
 * er füllt die Bandbreite (13,9 %) bis 9 rem Höhe, der Strich bleibt 2,5 px – je größer, desto feiner.
 */
.wir-ortskopf {
	--wir-ortskopf-unten: clamp(1.25rem, 3vw, 2rem);
	position: relative;
	isolation: isolate;
	container-type: inline-size;
	margin-block: var(--wp--preset--spacing--m) 0;
	padding: clamp(1.5rem, 3.5vw, 3rem) clamp(1.5rem, 4vw, 3.5rem) calc(min(13.9%, 9rem) + var(--wir-ortskopf-unten) + clamp(1rem, 3vw, 2.5rem));
	border-radius: var(--wp--custom--radius--kachel);
	background: var(--wp--custom--verlauf--wald) var(--wp--preset--color--wald);
	overflow: hidden;
}
.wir-ortskopf::after {
	--wir-ortshorizont-hoehe: min(13.9cqw, 9rem);
	content: "";
	position: absolute;
	inset: auto 0 var(--wir-ortskopf-unten);
	z-index: -1;
	height: var(--wir-ortshorizont-hoehe);
	/* --wir-ortshorizont rechnet mit der kleinen Höhe von :root, darum hier mit der eigenen */
	background:
		var(--wir-ortshorizont-bild) right bottom / auto 100% no-repeat,
		linear-gradient(#C9A84C, #C9A84C) left bottom calc(var(--wir-ortshorizont-hoehe) * .221 - 1.25px) / calc(100% - var(--wir-ortshorizont-hoehe) * 7.2 + 1px) 2.5px no-repeat; /* Mitte des Strichs auf dem Pfadanfang */
	pointer-events: none;
}
/* Himmel: Punkte nur rechts, nach links ausgeblendet, damit der Titel frei steht; sie enden über den Dächern */
.wir-ortskopf::before {
	content: none; /* schmal stünden die Punkte hinter dem Titel */
	position: absolute;
	inset: 0 0 calc(min(13.9cqw, 9rem) + var(--wir-ortskopf-unten) + .4rem);
	z-index: -1;
	background: var(--wir-ortshorizont-punkte);
	opacity: .4;
	-webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 85%);
	        mask-image: linear-gradient(100deg, transparent 35%, #000 85%);
	pointer-events: none;
}
@media (min-width: 48em) { .wir-ortskopf::before { content: ""; } }
.wir-ortskopf .wp-block-post-title { margin: 0; max-width: 18ch; color: var(--wp--preset--color--flaeche); text-wrap: balance; }
.seite > .wir-ortskopf:first-child { margin-block-start: var(--wp--preset--spacing--m); } /* sonst setzt der Constrained-Layout-Satz für das erste Kind 0 */
.seite > .wir-ortskopf + .wp-block-post-content { margin-block-start: var(--wp--preset--spacing--l); }