/* ==========================================================================
   WNA Vision 2 — Zielgruppen „Für wen wir so arbeiten“ (Sprint 0C.2)
   template-parts/zielgruppen.php. Dieselbe helle, redaktionelle Welt wie der
   Proof-Bereich; Gewicht über Typografie und Weißraum statt über Karten.
   Primär: Hausverwaltungen, Eigentümer & Bestandshalter. Sekundär: Gewerbe,
   GU / Projektpartner. Keine Animation.
   ========================================================================== */

.wna2-zielgruppen {
	--zg-einzug: clamp(20px, 3vw, 40px);
	--zg-links: max(var(--wna2-gutter), (100% - var(--wna2-max)) / 2);
	position: relative;
	background: var(--wna2-w-50);
	color: var(--wna2-g-900);
	padding: clamp(48px, 6vw, 88px) 0 clamp(96px, 12vw, 176px);
	overflow: clip;
}

/* Übergang aus dem Proof: die WNA-Linie führt ruhig in den Abschnitt (statisch). */
.wna2-zg__faden {
	position: absolute; top: 0; left: var(--zg-links); width: 2px;
	height: calc(clamp(48px, 6vw, 88px) + 0.6em + 8px);
	background: linear-gradient(180deg, rgba(255, 145, 77, 0), var(--wna2-o-500));
}
.wna2-zg__kopf { position: relative; padding-left: var(--zg-einzug); max-width: 60rem; }
.wna2-zg__marke { position: relative; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--wna2-g-500); }
.wna2-zg__marke::before {
	content: ""; position: absolute; top: 50%; left: calc(-1 * var(--zg-einzug) + 1px); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
	border-radius: 50%; background: var(--wna2-o-500); box-shadow: 0 0 0 4px rgba(255, 145, 77, 0.18);
}
.wna2-zg__titel { margin-top: 0.75rem; font-size: clamp(2.5rem, 1.3rem + 4.8vw, 5.5rem); line-height: 1; letter-spacing: -0.03em; font-weight: 700; }
.wna2-zg__intro { margin-top: 1.5rem; max-width: 40ch; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4rem); line-height: 1.5; color: var(--wna2-g-600); }

/* --- Gemeinsame Bausteine ------------------------------------------------- */
.wna2-zg__nr { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); line-height: 1; letter-spacing: -0.02em; color: var(--wna2-g-300); font-variant-numeric: tabular-nums; }
.wna2-zg__label { margin-top: 0.6rem; font-weight: 700; letter-spacing: -0.028em; line-height: 1.02; }
.wna2-zg__kern { margin-top: 1rem; font-weight: 500; line-height: 1.3; color: var(--wna2-g-800); }
.wna2-zg__situation { margin-top: 0.9rem; max-width: 48ch; font-size: 1.0625rem; line-height: 1.55; color: var(--wna2-g-600); }
.wna2-zg__weiter { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.wna2-zg__mehr { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; /* 0D.1 FREEZE EXCEPTION – Responsive: Touch-Ziel */ text-decoration-color: var(--wna2-o-500); text-decoration-thickness: 2px; }

/* --- Primär: Hausverwaltungen, Eigentümer & Bestandshalter ---------------- */
.wna2-zg__primaer { display: grid; gap: clamp(96px, 12vw, 184px); margin-top: clamp(64px, 8vw, 128px); }
.wna2-zg--primaer { display: grid; gap: 28px; }
.wna2-zg--primaer .wna2-zg__inhalt { padding-left: var(--zg-einzug); }
.wna2-zg--primaer .wna2-zg__label { font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4.25rem); }
.wna2-zg--primaer .wna2-zg__kern { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); max-width: 30ch; }
.wna2-zg__bild { position: relative; margin: 0; }
.wna2-zg__bild img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--wna2-radius); }
.wna2-zg__bild figcaption { margin-top: 10px; font-size: 0.9375rem; color: var(--wna2-g-700); }
.wna2-zg__bild figcaption span { display: block; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--wna2-g-500); }
.wna2-zg__bild figcaption a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-color: var(--wna2-o-500); } /* 0D.1 FREEZE EXCEPTION – Responsive: Touch-Ziel */

.wna2-zg__fakten { margin: 32px 0 0; border-top: 1px solid var(--wna2-g-200); max-width: 44rem; }
.wna2-zg__fakten > div { display: grid; gap: 6px; padding: 16px 0 18px; border-bottom: 1px solid var(--wna2-g-200); }
.wna2-zg__fakten dt { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--wna2-g-500); }
.wna2-zg__fakten dd { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--wna2-g-800); }
.wna2-zg__nutzen { list-style: none; display: grid; gap: 6px; }
.wna2-zg__nutzen li { position: relative; padding-left: 20px; font-weight: 600; color: var(--wna2-g-900); }
.wna2-zg__nutzen li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 10px; height: 2px; background: var(--wna2-o-500); }

/* --- Sekundär: Unternehmen & Gewerbe, GU / Projektpartner ----------------- */
.wna2-zg__sekundaer { margin-top: clamp(112px, 13vw, 200px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--wna2-g-200); }
.wna2-zg__ebenso { padding-left: var(--zg-einzug); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--wna2-g-500); }
.wna2-zg__zweier { display: grid; gap: 64px; margin-top: 32px; }
.wna2-zg--sekundaer { padding-left: var(--zg-einzug); }
.wna2-zg--sekundaer .wna2-zg__nr { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); }
.wna2-zg--sekundaer .wna2-zg__label { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.wna2-zg--sekundaer .wna2-zg__kern { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); max-width: 34ch; }
.wna2-zg__zeile { margin-top: 18px; max-width: 46ch; font-size: 1rem; line-height: 1.55; color: var(--wna2-g-800); }
.wna2-zg__zeile span { display: block; margin-bottom: 4px; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--wna2-g-500); }
.wna2-zg__zeile--nutzen { margin-top: 12px; padding-left: 20px; position: relative; font-weight: 600; color: var(--wna2-g-900); }
.wna2-zg__zeile--nutzen::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 10px; height: 2px; background: var(--wna2-o-500); }
.wna2-zg--sekundaer .wna2-zg__weiter { margin-top: 24px; }

/* --- Brücke zum nächsten Block (Anfrage folgt in eigenem Sprint) ---------- */
.wna2-zg__bruecke {
	position: relative; margin-top: clamp(112px, 13vw, 200px); padding: 0 0 0 var(--zg-einzug);
	font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem); line-height: 1.05; letter-spacing: -0.028em; font-weight: 700; max-width: 18ch;
}
.wna2-zg__bruecke::before {
	content: ""; position: absolute; left: 0; top: 0.15em; bottom: 0.1em; width: 2px; background: var(--wna2-o-500);
}

/* --- Breakpoints ---------------------------------------------------------- */
@media (min-width: 768px) {
	.wna2-zg__fakten > div { grid-template-columns: 11rem minmax(0, 1fr); gap: 20px; align-items: baseline; }
	.wna2-zg__zweier { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 5vw, 80px); }
}
@media (min-width: 1024px) {
	.wna2-zg--primaer { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
	.wna2-zg--primaer .wna2-zg__bild { grid-column: 1 / span 4; grid-row: 1; margin-top: 8px; }
	.wna2-zg--primaer .wna2-zg__bild img { aspect-ratio: auto; }
	.wna2-zg--primaer .wna2-zg__inhalt { grid-column: 6 / span 7; grid-row: 1; }
	/* zweite Zielgruppe gespiegelt: Bild rechts */
	.wna2-zg--primaer:nth-child(even) .wna2-zg__bild { grid-column: 9 / span 4; }
	.wna2-zg--primaer:nth-child(even) .wna2-zg__inhalt { grid-column: 1 / span 7; }
}