/* EHNES – gemeinsame Bausteine (Bild-Platzhalter).
   CI: Roboto, eckig (kein Radius), Blau/Ink. Siehe DESIGN.md.
   Markup-Vertrag (identisch in allen Widgets zu verwenden):

   <div class="ehp-ph" role="img" aria-label="Bild noch auszuwählen">
       <span class="ehp-ph__icon">…inline-SVG…</span>
       <span class="ehp-ph__label">Bild noch auszuwählen</span>
   </div>

   Modifier:
   --ehp-ph-ratio  … Seitenverhältnis (Default 4/3)
   .ehp-ph--fill   … füllt die Höhe des Elternelements statt fester Ratio
   .ehp-ph--invert … auf blauem/dunklem Grund (Invertier-Regel DESIGN.md §4)
*/
.ehp-ph {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	aspect-ratio: var(--ehp-ph-ratio, 4 / 3);
	padding: 16px;
	background: #DFE4E9;
	border: 1px dashed #B4BFC9;
	border-radius: 0;
	color: #5B6770;
	font-family: "Roboto", system-ui, sans-serif;
	text-align: center;
	box-sizing: border-box;
}
.ehp-ph * { box-sizing: border-box; }
.ehp-ph__icon { width: 34px; height: 34px; opacity: .55; }
.ehp-ph__icon svg { width: 100%; height: 100%; display: block; }
.ehp-ph__label { font-size: 14px; font-weight: 500; letter-spacing: .02em; line-height: 1.35; }

.ehp-ph--fill { aspect-ratio: auto; height: 100%; min-height: 220px; }

.ehp-ph--invert {
	background: rgba(255, 255, 255, .10);
	border-color: rgba(255, 255, 255, .38);
	color: rgba(255, 255, 255, .88);
}

@media (max-width: 760px) {
	.ehp-ph--fill { min-height: 180px; }
}