/**
 * frontend.css — Frontend-Darstellung der Composer-Module (M3).
 * Theme-agnostisch: nutzt Theme-CSS-Variablen, wenn vorhanden, sonst Fallbacks.
 * Alles unter .pvhc-root gescoped.
 */

.pvhc-root {
	--pvhc-gold: var(--pvh-gold, #d69b3e);
	--pvhc-gold-light: var(--pvh-gold-light, #ffe0a0);
	--pvhc-dark: var(--pvh-bg, #04070d);
	--pvhc-fg: var(--pvh-fg, #e9e4d8);
	--pvhc-container: 1200px;
}

.pvhc-root * { box-sizing: border-box; }
.pvhc-root { overflow-wrap: break-word; max-width: 100%; }

/* Ganze-Seite-Modus: voller Inhaltsbereich zwischen Theme-Header/-Footer */
.pvhc-fullpage { width: 100%; }
.pvhc-fullpage > .pvhc-root { width: 100%; }

/* Section */
.pvhc-section { width: 100%; }
.pvhc-section .pvhc-container {
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	width: 100%;
}
.pvhc-bg-dark { background: var(--pvhc-dark); color: var(--pvhc-fg); }
.pvhc-bg-gold { background: var(--pvhc-gold); color: #1d2327; }
.pvhc-py-none .pvhc-container { padding-top: 0; padding-bottom: 0; }
.pvhc-py-sm .pvhc-container { padding-top: 24px; padding-bottom: 24px; }
.pvhc-py-md .pvhc-container { padding-top: 48px; padding-bottom: 48px; }
.pvhc-py-lg .pvhc-container { padding-top: 80px; padding-bottom: 80px; }

/* Columns */
.pvhc-cols { display: grid; }
.pvhc-gap-sm { gap: 12px; }
.pvhc-gap-md { gap: 24px; }
.pvhc-gap-lg { gap: 40px; }
.pvhc-colcell { min-width: 0; }

@media (max-width: 600px) {
	.pvhc-stack-mobile { grid-template-columns: 1fr !important; }
}
@media (max-width: 900px) {
	.pvhc-stack-tablet { grid-template-columns: 1fr !important; }
}

/* Heading */
.pvhc-heading { margin: 0 0 0.5em; line-height: 1.2; }
.pvhc-align-left { text-align: left; }
.pvhc-align-center { text-align: center; }
.pvhc-align-right { text-align: right; }

/* Text */
.pvhc-text { line-height: 1.6; }
.pvhc-text p:first-child { margin-top: 0; }
.pvhc-text p:last-child { margin-bottom: 0; }

/* Image */
.pvhc-figure { margin: 0; }
.pvhc-image { max-width: 100%; height: auto; display: block; }
.pvhc-ratio-16-9 { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.pvhc-ratio-4-3 { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.pvhc-ratio-1-1 { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }

/* Button */
.pvhc-button {
	display: inline-block;
	padding: 12px 26px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	line-height: 1;
	transition: opacity 0.15s ease;
}
.pvhc-button:hover { opacity: 0.9; }
.pvhc-button--primary { background: var(--pvhc-gold); color: #1d2327; }
.pvhc-button--secondary { border: 1px solid var(--pvhc-gold); color: var(--pvhc-gold); background: transparent; }

/* Spacer */
.pvhc-spacer--sm { height: 16px; }
.pvhc-spacer--md { height: 32px; }
.pvhc-spacer--lg { height: 64px; }

/* Divider */
.pvhc-divider { border: 0; border-top: 1px solid currentColor; opacity: 0.3; margin: 0; }
.pvhc-divider--gold { border-top: 2px solid var(--pvhc-gold); opacity: 1; }
.pvhc-divider--dashed { border-top: 1px dashed currentColor; opacity: 0.5; }

/* Dynamische PvH-Module (M5) */
.pvhc-grid { display: grid; gap: 24px; align-items: start; }
@media (max-width: 900px) { .pvhc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { .pvhc-grid { grid-template-columns: 1fr !important; } }

/* Karten im Composer-Grid IMMER vertikal (Bild oben 16:9) – überschreibt die
   horizontale Theme-Variante, die im 3-Spalten-Raster die Bilder verzerrt. */
.pvhc-root .pvhc-grid .project-overview-card,
.pvhc-root .pvhc-grid .download-overview-card {
	display: block;
	min-height: 0;
}
.pvhc-root .pvhc-grid .project-overview-card__image,
.pvhc-root .pvhc-grid .download-overview-card__image {
	display: block;
	width: 100%;
}
.pvhc-root .pvhc-grid .project-overview-card__image img,
.pvhc-root .pvhc-grid .download-overview-card__image img {
	width: 100%;
	height: auto;
	min-height: 0;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.pvhc-statusbox {
	border: 1px solid rgba(214, 155, 62, 0.4);
	border-radius: 10px;
	padding: 18px 20px;
}
.pvhc-statusbox__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.pvhc-statusbox__label { color: var(--pvhc-gold); font-size: 0.85em; }
.pvhc-statusbox__bar { height: 10px; border-radius: 5px; background: rgba(127, 127, 127, 0.25); overflow: hidden; }
.pvhc-statusbox__bar span { display: block; height: 100%; background: var(--pvhc-gold); }
.pvhc-statusbox__pct { margin-top: 6px; font-size: 0.85em; opacity: 0.75; text-align: right; }

.pvhc-hero { text-align: center; padding: 48px 0; }
.pvhc-hero__crest { height: 96px; width: auto; margin: 0 auto 18px; display: block; }
.pvhc-hero__title { margin: 0 0 0.3em; }
.pvhc-hero__sub { margin: 0 0 1.2em; opacity: 0.85; font-size: 1.1em; }

/* Kennzahlen */
.pvhc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; text-align: center; }
.pvhc-stat strong { display: block; font-size: 2em; color: var(--pvhc-gold); line-height: 1.1; }
.pvhc-stat span { display: block; opacity: 0.8; font-size: 0.9em; margin-top: 4px; }
@media (max-width: 700px) { .pvhc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Aktuelles Projekt */
.pvhc-featured { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; align-items: center; border: 1px solid rgba(214, 155, 62, 0.3); border-radius: 14px; padding: 24px; }
.pvhc-featured__eyebrow { text-transform: uppercase; letter-spacing: 1px; font-size: 0.75em; color: var(--pvhc-gold); margin: 0 0 4px; }
.pvhc-featured__img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.pvhc-pill { display: inline-block; padding: 3px 12px; border: 1px solid var(--pvhc-gold); border-radius: 999px; font-size: 0.8em; color: var(--pvhc-gold); margin: 6px 0; }
@media (max-width: 700px) { .pvhc-featured { grid-template-columns: 1fr; } }

/* Leistungen */
.pvhc-service { border: 1px solid rgba(127, 127, 127, 0.25); border-radius: 12px; padding: 18px 20px; }
.pvhc-service h3 { margin: 4px 0 8px; }
.pvhc-service a { text-decoration: none; color: inherit; }

/* News */
.pvhc-newsitem time { font-size: 0.8em; opacity: 0.65; }
.pvhc-newsitem h3 { margin: 4px 0 8px; }
.pvhc-newsitem a { text-decoration: none; color: inherit; }