/* EHNES Ansprechpartner – Personen-Karten + Unternehmens-Adresskarte.
   CI: Roboto, Blau #0B55A0 / Ink #1C2530, eckig (border-radius: 0), Hexagon-Motiv.
   Die per Elementor gesetzten Variablen (--epn-card-bg, --epn-line, --epn-ink,
   --epn-muted, --epn-link, --epn-link-hover, --epn-co-bg, --epn-gap) landen auf
   {{WRAPPER}} und werden hier NUR mit Fallback benutzt — nie auf .epn erneut
   deklariert, sonst würde die lokale Deklaration den Editor-Wert überschreiben. */
.epn {
	--epn-font: var(--ws-font, "Roboto", system-ui, sans-serif);
	--epn-hex: var(--ws-hex, polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%));
	--epn-ease: var(--ws-ease, cubic-bezier(.4, 0, .2, 1));
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	/* Sprungziele nicht unter den 120px hohen Sticky-Header laufen lassen */
	scroll-margin-top: 140px;
	font-family: var(--epn-font);
	box-sizing: border-box;
}
.epn *, .epn *::before, .epn *::after { box-sizing: border-box; }

/* nur für Screenreader */
.epn-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- Einleitung + Raster ---- */
.epn__intro {
	margin: 0 0 var(--epn-gap, 32px);
	max-width: 68ch;
	color: var(--epn-muted, #5B6770);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.65;
}
.epn__grid {
	display: grid;
	/* minmax(0, …) statt blankem fr: sonst sprengt eine lange, nicht umbrechbare
	   Zeile (z. B. eine lange E-Mail-Adresse) die Spalte auf. */
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--epn-gap, 32px);
	align-items: start;
}
.epn__grid--solo { grid-template-columns: minmax(0, 1fr); }
.epn__people {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--epn-gap, 32px);
	align-items: stretch;
}

/* ---- Personen-Karte ---- */
.epn-person {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--epn-card-bg, #FFFFFF);
	border: 1px solid var(--epn-line, #E5E9ED);
	border-radius: 0;
}
.epn-person__media { position: relative; }
.epn-person__media img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
}
/* Platzhalter aus shared.css quadratisch fahren */
.epn-person__media .ehp-ph { --ehp-ph-ratio: 1 / 1; }

.epn-person__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 22px;
}
.epn-person__name {
	margin: 0;
	color: var(--epn-ink, #1C2530);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}
.epn-person__role {
	margin: 6px 0 0;
	color: var(--epn-muted, #5B6770);
	font-size: 14px;
	/* CI (DESIGN.md §4): Eyebrow-Labels sind Roboto 700 — wie .eb-card__cat, .pf__rcat, .tl__decade */
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.35;
}

/* ---- Kontaktzeilen Person ---- */
.epn-person__contact {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.epn-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--epn-link, #0B55A0);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	transition: color .18s var(--epn-ease);
}
/* Nur echte Links reagieren — .epn-link--plain ist ein <span> ohne Ziel und
   darf beim Hover nicht wie ein Link aussehen. */
a.epn-link:hover,
a.epn-link:focus-visible { color: var(--epn-link-hover, #08427B); text-decoration: underline; }
.epn-link--plain { color: var(--epn-muted, #5B6770); cursor: default; }
.epn-link__ic { flex: none; display: inline-flex; width: 16px; height: 16px; }
.epn-link__ic svg { width: 100%; height: 100%; display: block; }

.epn-person__note {
	margin: 14px 0 0;
	color: var(--epn-muted, #5B6770);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.55;
}

/* ---- Adresskarte (blau) — Invertier-Regel: alles weiß ---- */
.epn-co {
	position: relative;
	overflow: hidden;
	padding: 32px;
	background: var(--epn-co-bg, #0B55A0);
	color: #FFFFFF;
	border-radius: 0;
}
.epn-co__body { position: relative; z-index: 1; }
.epn-co__name {
	margin: 0 0 16px;
	color: #FFFFFF;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}
.epn-co__row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
}
.epn-co__row--addr {
	align-items: flex-start;
	font-size: 18px;
	line-height: 1.65;
}
.epn-co__row--addr .epn-co__ic { margin-top: 3px; }
.epn-co__ic { flex: none; display: inline-flex; width: 18px; height: 18px; color: #FFFFFF; }
.epn-co__ic svg { width: 100%; height: 100%; display: block; }
.epn-co__lbl { display: inline-block; min-width: 3.4em; font-weight: 500; }
.epn-co__rows {
	list-style: none;
	margin: 20px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .3);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.epn-co a {
	color: #FFFFFF;
	text-decoration: none;
	transition: opacity .18s var(--epn-ease);
}
.epn-co a:hover,
.epn-co a:focus-visible { text-decoration: underline; }

/* Hexagon-Wasserzeichen: liegt hinter dem Text (z-index 0) und sitzt in der
   unteren rechten Ecke teils außerhalb des Kastens — läuft nie über den Text. */
.epn-co__deco {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.epn-co__deco::after {
	content: "";
	position: absolute;
	right: -58px;
	bottom: -58px;
	width: 220px;
	aspect-ratio: var(--ws-hex-ratio, 0.866);
	background: #FFFFFF;
	opacity: .10;
	clip-path: var(--epn-hex);
}

/* ---- Fokus: sichtbar lassen (nicht unterdrücken) ---- */
.epn a:focus-visible {
	outline: 2px solid var(--epn-link, #0B55A0);
	outline-offset: 3px;
}
.epn-co a:focus-visible { outline-color: #FFFFFF; }

/* ---- Responsiv ---- */
@media (max-width: 1024px) {
	.epn__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.epn__people { grid-template-columns: minmax(0, 1fr); }
	.epn__intro { font-size: 16px; }
	.epn-co { padding: 26px 22px; }
	.epn-co__row--addr { font-size: 16px; }
}

/* ---- Bewegung reduzieren ---- */
@media (prefers-reduced-motion: reduce) {
	.epn *, .epn *::before, .epn *::after {
		transition: none !important;
		animation: none !important;
	}
}