/*
 * AC Montagen – stili del sito.
 *
 * Regola: ogni stile della nuova home sta sotto la classe .acm-home
 * (blocco Gruppo principale della pagina) o sotto body.acm-page
 * (classe aggiunta da functions.php alle pagine che contengono .acm-home).
 * Le altre pagine (vecchie home, privacy, 404) restano con la grafica di Astra.
 */

/* 0. Font ospitati sul sito (nessuna richiesta a Google) */
@font-face { font-family: "Quicksand"; src: url("../fonts/quicksand-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Quicksand"; src: url("../fonts/quicksand-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Quicksand"; src: url("../fonts/quicksand-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Quicksand"; src: url("../fonts/quicksand-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* 1. Variabili del design (palette e misure ricavate dal portfolio) */
:root {
	--acm-ink: #333333;        /* testi e disegni al tratto */
	--acm-dark: #202020;       /* sfondo scuro della copertina */
	--acm-black: #000000;
	--acm-white: #ffffff;
	--acm-paper: #f2f1eb;      /* bianco caldo */
	--acm-muted: #6b6b6b;      /* testi secondari */

	/* Font provvisorio: da sostituire con quello del portfolio quando il cliente lo conferma */
	--acm-font-sans: "Quicksand", "Helvetica Neue", Arial, sans-serif;
	--acm-tracking-wide: 0.3em; /* lettere spaziate dei testi in maiuscolo */

	--acm-gutter: clamp(16px, 5vw, 64px);
	--acm-space-s: 1rem;
	--acm-space-m: 2rem;
	--acm-space-l: 4rem;
	--acm-space-xl: clamp(4rem, 9vw, 8rem);
	--acm-max-width: 1200px;
	--acm-header-h: 80px;
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* 2. Pagina: font, header fisso e menu */
body.acm-page,
body.acm-page .main-header-menu .menu-link,
body.acm-page .ast-builder-menu-mobile .menu-link {
	font-family: var(--acm-font-sans);
}

body.acm-page #masthead {
	position: sticky;
	top: 0;
	z-index: 100;
}

body.acm-page.admin-bar #masthead { top: 32px; }

/* Le voci puntano a sezioni della stessa pagina: Astra le segna come "correnti" e le colora di blu.
   Qui restano tutte antracite; al passaggio del mouse grigio. Bordo della tendina lingue in antracite. */
body.acm-page .main-header-menu .menu-item > .menu-link,
body.acm-page .main-header-menu .current-menu-item > .menu-link,
body.acm-page .main-header-menu .current-menu-ancestor > .menu-link,
body.acm-page .main-header-menu .current_page_item > .menu-link,
body.acm-page .ast-builder-menu-mobile .menu-item > .menu-link {
	color: var(--acm-ink) !important;
}
body.acm-page .main-header-menu .menu-item:hover > .menu-link,
body.acm-page .main-header-menu .menu-item > .menu-link:focus-visible {
	color: var(--acm-muted) !important;
}
body.acm-page .main-header-menu .sub-menu { border-top-color: var(--acm-ink) !important; }

/* Menu hamburger (smartphone): icona e contorno antracite invece del blu di Astra, pannello bianco uniforme */
body.acm-page .menu-toggle,
body.acm-page .menu-toggle:hover,
body.acm-page .menu-toggle:focus,
body.acm-page .menu-toggle.toggled {
	color: var(--acm-ink) !important;
	background: transparent !important;
	border-color: transparent !important;
}
body.acm-page .menu-toggle .ast-mobile-svg,
body.acm-page .menu-toggle svg { fill: var(--acm-ink) !important; color: var(--acm-ink) !important; }
body.acm-page .menu-toggle:focus-visible { outline: 1px solid var(--acm-ink) !important; outline-offset: 2px; }
body.acm-page .ast-mobile-header-content,
body.acm-page .ast-mobile-header-content .main-header-menu,
body.acm-page .ast-mobile-header-content .menu-item,
body.acm-page .ast-mobile-header-content .sub-menu,
body.acm-page .ast-mobile-header-content .menu-link {
	background: var(--acm-white) !important;
}
body.acm-page .ast-mobile-header-content .menu-item { border-bottom: 1px solid #e6e5df; }
body.acm-page .ast-mobile-header-content .sub-menu .menu-item:last-child { border-bottom: 0; }
body.acm-page .ast-mobile-header-content .menu-link,
body.acm-page .ast-mobile-header-content .ast-menu-toggle { color: var(--acm-ink) !important; }

/* Freccia del selettore lingue: niente riquadro tratteggiato al tocco, alta quanto la riga e centrata */
body.acm-page .ast-mobile-header-content .ast-menu-toggle {
	top: 0 !important;
	right: 0 !important;
	height: 48px !important;
	width: 48px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}
body.acm-page .ast-mobile-header-content .ast-menu-toggle:focus-visible { outline: 1px solid var(--acm-ink) !important; outline-offset: -6px; }
body.acm-page .ast-mobile-header-content .ast-menu-toggle svg { width: 12px; height: 12px; }
body.acm-page .ast-mobile-header-content .menu-item-has-children > .menu-link { min-height: 48px; display: flex; align-items: center; }
/* Lingue nel menu mobile: solo le sigle, senza la freccetta "›" di Astra */
body.acm-page .ast-mobile-header-content .sub-menu .menu-link .icon-arrow { display: none !important; }

body.acm-page .main-header-menu .menu-link {
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--acm-ink);
}

/* Pulsante "torna su" di Astra sopra l'icona delle preferenze cookie di iubenda (stesso angolo) */
#ast-scroll-top.ast-scroll-to-top-right { bottom: 84px; right: 19px; } /* centrato sull'icona iubenda */

/* 2b. Pagina 404 con la grafica del sito */
body.acm-page.error404 { background: var(--acm-white); }
body.acm-page.error404 #primary { margin: 0; padding: 0; }
body.acm-page.error404 .error-404 {
	position: relative;
	overflow: hidden;
	min-height: min(70svh, 720px);
	margin: 0;
	padding: clamp(4rem, 10vw, 8rem) max(var(--acm-gutter), calc((100% - var(--acm-max-width)) / 2)) clamp(12rem, 24vw, 20rem);
	background: var(--acm-white);
	color: var(--acm-ink);
	text-align: left;
	font-family: var(--acm-font-sans);
}
body.acm-page.error404 .error-404 > * { max-width: none; margin: 0; padding: 0; position: relative; z-index: 1; }
body.acm-page.error404 .error-404 .page-header, body.acm-page.error404 .error-404 .page-content { text-align: left; }
body.acm-page.error404 .error-404::after {           /* disegno della copertina, in basso a destra */
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(60%, 760px);
	aspect-ratio: 595.5 / 519;
	background-color: currentColor;
	opacity: 0.35;
	-webkit-mask: url("../img/skyline.svg") no-repeat right bottom / contain;
	mask: url("../img/skyline.svg") no-repeat right bottom / contain;
	pointer-events: none;
}
body.acm-page.error404 .page-title {
	font-family: var(--acm-font-sans);
	font-size: clamp(2.5rem, 7vw, 5.5rem);
	font-weight: 300;
	line-height: 1.05;
	color: inherit;
	margin: 0 0 1.5rem;
}
body.acm-page.error404 .page-title::before { content: "/404 "; display: block; font-size: 0.45em; letter-spacing: 0.2em; margin-bottom: 1rem; }
body.acm-page.error404 .page-sub-title { font-family: var(--acm-font-sans); font-size: 1rem; line-height: 1.75; color: inherit; max-width: 640px; }
body.acm-page.error404 .ast-404-search { max-width: 420px; margin: 2rem 0 0; }
body.acm-page.error404 .ast-404-search .widget { margin: 0; padding: 0; }
body.acm-page.error404 .ast-404-search .search-field { border-radius: 0; border: 1px solid var(--acm-ink); background: var(--acm-white); font-family: var(--acm-font-sans); }
body.acm-page.error404 .acm-404-home { margin: 2.5rem 0 0; }
body.acm-page.error404 .acm-404-home__link {
	display: inline-block;
	padding: 0.95em 2em;
	border: 1px solid currentColor;
	color: inherit;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}
body.acm-page.error404 .acm-404-home__link:hover,
body.acm-page.error404 .acm-404-home__link:focus-visible { background: var(--acm-ink); color: var(--acm-white); }

/* 3. Base della nuova home */

/* Contenitori di Astra senza margini: le sezioni vanno da bordo a bordo */
body.acm-page .site-content > .ast-container { max-width: none; padding: 0; }
body.acm-page #primary { margin: 0; padding: 0; }
body.acm-page .entry-content > .acm-home.alignfull { margin: 0; padding: 0; width: 100%; max-width: none; }

/* Sezioni e stacchi attaccati tra loro: niente spazio automatico tra i blocchi (evita strisce bianche) */
.acm-home.alignfull > * { margin-block: 0; }

.acm-home {
	font-family: var(--acm-font-sans);
	color: var(--acm-ink);
	font-weight: 400;
	line-height: 1.75;
}

.acm-home :where(h1, h2, h3, p) { font-family: var(--acm-font-sans); }

.acm-home :where(section[id]) { scroll-margin-top: var(--acm-header-h); }

.acm-home .acm-section {
	padding: var(--acm-space-xl) var(--acm-gutter);
}

/* Accanto a uno stacco (acm-divider) basta metà margine: lo stacco fa già da separazione */
.acm-home .acm-section:has(+ .acm-divider) { padding-bottom: clamp(2.5rem, 4.5vw, 4rem); }
.acm-home .acm-divider + .acm-section { padding-top: clamp(2.5rem, 4.5vw, 4rem); }

.acm-home .acm-section > * {
	max-width: var(--acm-max-width);
	margin-inline: auto;
}

/* Titoli di sezione "/über uns", "/projekte" ecc. */
.acm-home h2.wp-block-heading {
	font-size: clamp(2.75rem, 8vw, 6.5rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: lowercase;
	color: inherit;
	margin-block: 0 var(--acm-space-l); /* solo sopra/sotto: i lati li gestisce la sezione */
}

.acm-home strong { font-weight: 600; }

/* Pulsante */
.acm-home .acm-btn .wp-block-button__link {
	background: transparent;
	color: inherit;
	border: 1px solid currentColor;
	border-radius: 0;
	padding: 0.95em 2em;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	transition: background-color 0.2s, color 0.2s;
}

.acm-home .acm-btn .wp-block-button__link:hover,
.acm-home .acm-btn .wp-block-button__link:focus-visible {
	background: var(--acm-white);
	color: var(--acm-dark);
}

/* 4. Disegno architettonico (assets/img/skyline.svg) usato come maschera:
 *    prende il colore del testo della sezione. */
.acm-home .acm-skyline,
.acm-home .acm-hero::after,
.acm-home .acm-contact::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(72%, 980px);
	aspect-ratio: 595.5 / 519;
	background-color: currentColor;
	-webkit-mask: url("../img/skyline.svg") no-repeat right bottom / contain;
	mask: url("../img/skyline.svg") no-repeat right bottom / contain;
	pointer-events: none;
}

/* 5. Hero (#home) */
.acm-home .acm-hero {
	position: relative;
	overflow: hidden;
	min-height: min(calc(100svh - var(--acm-header-h)), 960px);
	/* lati allineati alla stessa colonna di 1200px delle altre sezioni */
	padding: clamp(3rem, 8vw, 6rem) max(var(--acm-gutter), calc((100% - var(--acm-max-width)) / 2)) 0;
	background: var(--acm-dark);
	color: var(--acm-white);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	container-type: inline-size; /* rende disponibile "cqw" alla scritta grande */
}

.acm-home .acm-hero::after { opacity: 0.9; }

.acm-home .acm-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
}

.acm-home .acm-hero__title {
	font-size: clamp(1.25rem, 2.6vw, 2.1rem);
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: inherit;
	margin: 0;
	padding-bottom: 1.6rem;
	background: repeating-linear-gradient(90deg, currentColor 0 16px, transparent 16px 21px) left bottom / 100% 2px no-repeat;
}

.acm-home .acm-hero__claim {
	margin: 1.6rem 0 2.2rem;
	font-size: 0.8rem;
	line-height: 1.6;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	max-width: 640px;
}

.acm-home .acm-hero__word {
	position: relative;
	z-index: 1;
	margin: 0;
	/*
	 * Dimensione calcolata dalla larghezza interna dell'hero (100cqw = 100% dello spazio utile,
	 * vedi container-type su .acm-hero), così "/ac montagen" sta su una riga e appare uguale
	 * sul sito, nell'editor e nell'anteprima delle revisioni.
	 * Il divisore (6.8) è la lunghezza della scritta in "em" (+ margine): se il testo cambia
	 * molto di lunghezza, va aggiornato (più lungo il testo, più alto il numero).
	 */
	font-size: min(11rem, calc(100cqw / 6.8));
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.02em;
	white-space: nowrap;
	padding-bottom: clamp(1.25rem, 3vw, 2.75rem); /* la "g" non tocca il bordo inferiore */
	/* Alone scuro (colore dello sfondo) che spegne le linee del disegno vicino alle lettere.
	   In "em": cresce e cala con la scritta (≈ 5–25 px su desktop, 2–7 px su smartphone). */
	text-shadow:
		0 0 0.03em var(--acm-dark),
		0 0 0.06em var(--acm-dark),
		0 0 0.1em var(--acm-dark),
		0 0 0.14em var(--acm-dark);
}

/* 6. Über uns */
.acm-home .acm-about .wp-block-columns { gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.acm-home .acm-about .wp-block-image img { width: 100%; height: auto; filter: grayscale(1); }

/* Ritratto: linee di costruzione che prolungano lo spigolo in alto a destra (come nei disegni) */
.acm-home .acm-about .wp-block-image:not(.acm-signature) { position: relative; overflow: visible; }
.acm-home .acm-about .wp-block-image:not(.acm-signature)::after {
	content: "";
	position: absolute;
	top: -80px;
	right: -80px;
	width: 160px;
	height: 160px;
	background: var(--acm-ink);
	-webkit-mask: url("../img/linee-spigolo.svg") no-repeat center / contain;
	mask: url("../img/linee-spigolo.svg") no-repeat center / contain;
	opacity: 0.7;
	pointer-events: none;
}
@media (max-width: 781px) {
	/* smartphone: linee verso destra corte, per restare dentro lo schermo */
	.acm-home .acm-about .wp-block-image:not(.acm-signature)::after {
		top: -50px;
		right: -14px;
		width: 64px;
		height: 64px;
		-webkit-mask-image: url("../img/linee-spigolo-mobile.svg");
		mask-image: url("../img/linee-spigolo-mobile.svg");
	}
}

/* Firma (blocco Immagine con classe acm-signature, sotto il ritratto): sovrapposta al bordo inferiore della foto */
.acm-home .acm-about .wp-block-image.acm-signature {
	position: relative;
	z-index: 1;
	width: 78%;
	margin: 1.5rem auto 0; /* centrata sotto la foto, staccata di 1.5rem */
	pointer-events: none;
}
.acm-home .acm-about .wp-block-image.acm-signature img { filter: none; }

/*
 * 7. Angebot come nel portfolio: titolo verticale su due righe, testo in colonna stretta,
 *    a destra i servizi (Gruppo "acm-services" con un Gruppo "acm-service" per servizio).
 */
.acm-home .acm-offer { background: var(--acm-paper); }
.acm-home .acm-offer .wp-block-columns { gap: clamp(2rem, 5vw, 4.5rem); }

@media (min-width: 782px) {
	.acm-home .acm-offer .wp-block-columns {
		display: grid;
		grid-template-columns: auto minmax(0, 760px); /* titolo + testo; con una terza colonna (servizi) usare: auto minmax(0, 600px) minmax(0, 1fr) */
		align-items: center;
	}
	.acm-home .acm-offer .wp-block-column { flex: none !important; width: auto !important; margin: 0 !important; }
	.acm-home .acm-offer h2.wp-block-heading {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		margin: 0;
		font-size: clamp(3.5rem, 6.5vw, 6rem);
		line-height: 0.92;
		white-space: nowrap;
	}
}

/*
 * Servizi: cornice con le croci del portfolio su due angoli opposti (alto sinistra, basso destra),
 * trattino corto tra un servizio e l'altro; icona al tratto (assets/img/icons) scelta dalla classe del gruppo.
 */
.acm-home .acm-services {
	--m: 6px; --co: 6px; --ci: 16px; --g: 8px; --d: 44px; --t: 2px;
	--cross: calc(var(--co) + var(--ci));
	--dash-start: calc(var(--m) + var(--ci) + var(--g));
	margin: 0;
	padding: calc(var(--m) + var(--ci) + var(--g));
	background-repeat: no-repeat;
	background-image:
		linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0),
		linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0);
	background-size:
		var(--cross) var(--t), var(--t) var(--cross), var(--d) var(--t), var(--t) var(--d),
		var(--cross) var(--t), var(--t) var(--cross), var(--d) var(--t), var(--t) var(--d);
	background-position:
		/* alto sinistra */
		left calc(var(--m) - var(--co)) top var(--m), left var(--m) top calc(var(--m) - var(--co)),
		left var(--dash-start) top var(--m), left var(--m) top var(--dash-start),
		/* basso destra */
		right calc(var(--m) - var(--co)) bottom var(--m), right var(--m) bottom calc(var(--m) - var(--co)),
		right var(--dash-start) bottom var(--m), right var(--m) bottom var(--dash-start);
}
.acm-home .acm-service { padding: 0; border: 0; margin: 0 !important; }
.acm-home .acm-service + .acm-service { margin-top: 1.75rem !important; }
.acm-home .acm-service:not(:last-child)::after {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	margin-top: 1.75rem;
	background: currentColor;
	opacity: 0.6;
}
.acm-home .acm-service::before {
	content: "";
	display: block;
	width: 52px;
	height: 52px;
	margin-bottom: 0.75rem;
	background-color: currentColor;
	-webkit-mask: var(--acm-icon) no-repeat center / contain;
	mask: var(--acm-icon) no-repeat center / contain;
}
.acm-home .acm-service--montage { --acm-icon: url("../img/icons/montage.svg"); }
.acm-home .acm-service--restaurierung { --acm-icon: url("../img/icons/restaurierung.svg"); }
.acm-home .acm-service--unterhalt { --acm-icon: url("../img/icons/unterhalt.svg"); }
.acm-home .acm-service h3.wp-block-heading {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: inherit;
}
.acm-home .acm-service p { margin: 0; font-size: 0.9rem; line-height: 1.65; }

/*
 * 8a. Segni di taglio come nel portfolio: a ogni angolo una croce "+" con i bracci
 *     verso l'interno più lunghi, e due trattini staccati (orizzontale e verticale). Classe: acm-frame.
 *     --m = posizione della croce dal bordo, --co = braccio esterno, --ci = braccio interno,
 *     --g = stacco tra croce e trattino, --d = lunghezza trattino, --t = spessore.
 */
.acm-home .acm-frame {
	--m: 12px; --co: 10px; --ci: 28px; --g: 14px; --d: 80px; --t: 2px;
	--cross: calc(var(--co) + var(--ci));
	--dash-start: calc(var(--m) + var(--ci) + var(--g));
	position: relative;
	padding: calc(var(--m) + var(--ci) + var(--g));
	background-repeat: no-repeat;
	background-image:
		linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0),
		linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0),
		linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0),
		linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0);
	background-size:
		var(--cross) var(--t), var(--t) var(--cross), var(--d) var(--t), var(--t) var(--d),
		var(--cross) var(--t), var(--t) var(--cross), var(--d) var(--t), var(--t) var(--d),
		var(--cross) var(--t), var(--t) var(--cross), var(--d) var(--t), var(--t) var(--d),
		var(--cross) var(--t), var(--t) var(--cross), var(--d) var(--t), var(--t) var(--d);
	background-position:
		/* alto sinistra: croce (braccio lungo verso destra e verso il basso) + trattino a destra + trattino in basso */
		left calc(var(--m) - var(--co)) top var(--m), left var(--m) top calc(var(--m) - var(--co)),
		left var(--dash-start) top var(--m), left var(--m) top var(--dash-start),
		/* alto destra */
		right calc(var(--m) - var(--co)) top var(--m), right var(--m) top calc(var(--m) - var(--co)),
		right var(--dash-start) top var(--m), right var(--m) top var(--dash-start),
		/* basso sinistra */
		left calc(var(--m) - var(--co)) bottom var(--m), left var(--m) bottom calc(var(--m) - var(--co)),
		left var(--dash-start) bottom var(--m), left var(--m) bottom var(--dash-start),
		/* basso destra */
		right calc(var(--m) - var(--co)) bottom var(--m), right var(--m) bottom calc(var(--m) - var(--co)),
		right var(--dash-start) bottom var(--m), right var(--m) bottom var(--dash-start);
}

/* 8b. Projekte: carosello di schede (blocco Query Loop con classe acm-carousel) */
.acm-home .acm-carousel { position: relative; }

.acm-home .acm-carousel .wp-block-post-template {
	--gap: clamp(1rem, 2.5vw, 2rem);
	display: flex;
	gap: var(--gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;           /* niente barra: si scorre con le frecce o con il dito */
	overscroll-behavior-x: contain;
}
.acm-home .acm-carousel .wp-block-post-template::-webkit-scrollbar { display: none; }

.acm-home .acm-carousel .wp-block-post-template > li {
	flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
	margin: 0;
	scroll-snap-align: start;
}

.acm-home .acm-card { cursor: pointer; height: 100%; }
.acm-home .acm-card:focus-visible { outline: 2px solid var(--acm-ink); outline-offset: 6px; }

.acm-home .acm-card .wp-block-post-featured-image { margin: 0; overflow: hidden; }
.acm-home .acm-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.acm-home .acm-card:hover .wp-block-post-featured-image img { transform: scale(1.03); }

.acm-home .acm-card__title {
	margin: 1.2rem 0 0;
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: var(--acm-tracking-wide);
	text-transform: uppercase;
	color: inherit;
}

/* Il contenuto del progetto (descrizione + galleria) resta nella pagina ma si vede nella mini galleria */
.acm-home .acm-card__content { display: none; }

/* Frecce (aggiunte da assets/js/projekte.js). "button." alza la specificità sopra gli stili pulsante di Astra. */
button.acm-arrow,
button.acm-arrow:focus {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}
.acm-arrow svg { width: 20px; height: 20px; }
button.acm-arrow:hover:not(:disabled),
button.acm-arrow:focus-visible { background: var(--acm-ink); color: var(--acm-white); }
button.acm-arrow:disabled { opacity: 0.25; cursor: default; }

/* Frecce ai lati, nello spazio della cornice, all'altezza del centro delle foto (--acm-arrow-top da projekte.js) */
.acm-home .acm-carousel__nav {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}
.acm-home .acm-carousel__nav button.acm-arrow {
	position: absolute;
	top: var(--acm-arrow-top, 50%);
	translate: 0 -50%;
	pointer-events: auto;
	background: var(--acm-white);
}
.acm-home .acm-carousel__nav button.acm-arrow--prev { left: 3px; }
.acm-home .acm-carousel__nav button.acm-arrow--next { right: 3px; }
.acm-home .acm-carousel__nav button.acm-arrow:hover:not(:disabled),
.acm-home .acm-carousel__nav button.acm-arrow:focus-visible { background: var(--acm-ink); color: var(--acm-white); }
.acm-home .acm-carousel__nav button.acm-arrow:disabled { opacity: 0; }

/* Mini galleria (elemento <dialog> creato da projekte.js) */
html.acm-no-scroll { overflow: hidden; }

/* Desktop: circa 90% dello schermo, massimo 1200×800, con lo sfondo scuro visibile intorno.
   Su smartphone torna a tutto schermo (sezione 11). */
.acm-lightbox {
	width: min(1200px, 90vw);
	max-width: none;
	height: min(800px, 88dvh);
	max-height: none;
	padding: 0;
	border: 0;
	background: var(--acm-dark);
	color: var(--acm-white);
	font-family: var(--acm-font-sans);
}
.acm-lightbox::backdrop { background: rgb(0 0 0 / 0.75); }

.acm-lightbox { overflow: hidden; }

.acm-lightbox__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	grid-template-rows: minmax(0, 1fr);
	height: 100%;
}

/* L'area foto ha le dimensioni della finestra; la foto (verticale o orizzontale)
   si adatta dentro senza deformarsi e senza allungare la finestra. */
.acm-lightbox__stage {
	position: relative;
	min-height: 0;
	background: #111;
}
.acm-lightbox__stage img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.acm-lightbox__stage button { z-index: 1; }

.acm-lightbox button.acm-arrow {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	color: var(--acm-white);
	background: rgb(0 0 0 / 0.35);
}
.acm-lightbox button.acm-lightbox__prev { left: 1rem; }
.acm-lightbox button.acm-lightbox__next { right: 1rem; }
.acm-lightbox button.acm-arrow:hover:not(:disabled),
.acm-lightbox button.acm-arrow:focus-visible { background: var(--acm-white); color: var(--acm-dark); }
.acm-lightbox.is-single .acm-lightbox__prev,
.acm-lightbox.is-single .acm-lightbox__next { display: none; }

.acm-lightbox__side {
	padding: 4rem 2rem 2rem;
	overflow-y: auto;
	font-size: 0.9rem;
	line-height: 1.75;
}
.acm-lightbox__title {
	margin: 0 0 1.2rem;
	font-family: var(--acm-font-sans);
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: var(--acm-tracking-wide);
	text-transform: uppercase;
	color: inherit;
}
.acm-lightbox__counter { margin-top: 1.5rem; font-size: 0.75rem; letter-spacing: 0.2em; opacity: 0.7; }

button.acm-lightbox__close,
button.acm-lightbox__close:hover,
button.acm-lightbox__close:focus {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--acm-white);
	cursor: pointer;
}
.acm-lightbox__close svg { width: 24px; height: 24px; }
button.acm-lightbox__close:focus-visible { outline: 2px solid var(--acm-white); outline-offset: 2px; }

/*
 * 8c. Stacchi tra le sezioni: blocco Spaziatore con classe acm-divider.
 *     Palazzi del portfolio ai due lati (assets/img/street-left.svg e street-right.svg)
 *     e linea di terra che si allunga al centro. acm-divider--mirror lo ribalta.
 */
.acm-home .acm-divider {
	position: relative;
	color: var(--acm-ink);
	margin-block: 0 !important;
}

/* Disegni e linee della strada (come nel portfolio: linea spessa, tratteggiata, sottile) */
.acm-home .acm-divider::after {
	content: "";
	position: absolute;
	inset: 0;
	/* il colore sfuma verso l'alto: i palazzi "emergono" dalla pagina, la strada resta piena */
	background: linear-gradient(to bottom, transparent 0%, currentColor 50%);
	-webkit-mask:
		url("../img/street-left.svg") left bottom / auto 100% no-repeat,
		url("../img/street-right.svg") right bottom / auto 100% no-repeat,
		linear-gradient(#000 0 0) left 0 top 55.1% / 100% 1.5px no-repeat,
		repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 5px) left 0 top 56.2% / 100% 1px no-repeat,
		linear-gradient(#000 0 0) left 0 top 59.1% / 100% 1px no-repeat;
	mask:
		url("../img/street-left.svg") left bottom / auto 100% no-repeat,
		url("../img/street-right.svg") right bottom / auto 100% no-repeat,
		linear-gradient(#000 0 0) left 0 top 55.1% / 100% 1.5px no-repeat,
		repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 5px) left 0 top 56.2% / 100% 1px no-repeat,
		linear-gradient(#000 0 0) left 0 top 59.1% / 100% 1px no-repeat;
}

.acm-home .acm-divider--mirror { transform: scaleX(-1); }

/* Variante scura (classe acm-divider--dark): fascia scura sfumata, disegni bianchi */
.acm-home .acm-divider--dark {
	color: var(--acm-white);
	background: linear-gradient(to bottom, transparent 0%, var(--acm-dark) 38%, var(--acm-dark) 68%, transparent 100%);
}
.acm-home .acm-divider--dark::after {
	background: linear-gradient(to bottom, transparent 5%, currentColor 45%, currentColor 66%, transparent 95%);
}

/* 9. Kontakte: fondo scuro come la quarta di copertina */
.acm-home .acm-contact {
	position: relative;
	overflow: hidden;
	min-height: min(80svh, 760px);
	background: var(--acm-dark);
	color: var(--acm-white);
}

.acm-home .acm-contact::after { opacity: 0.5; width: min(60%, 820px); }

.acm-home .acm-contact > * { position: relative; z-index: 1; }

.acm-home .acm-contact p {
	margin-block: 0 0.6rem;
	font-size: 0.85rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.acm-home .acm-contact a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.acm-home .acm-contact a:hover,
.acm-home .acm-contact a:focus-visible { border-bottom-color: currentColor; }

/* 10. Fascia Kunden (template-parts/kunden-band.php, sopra il footer) */
.acm-kunden {
	background: var(--acm-paper);
	color: var(--acm-ink);
	padding: clamp(3rem, 6vw, 5rem) 0;
	overflow: hidden;
	font-family: var(--acm-font-sans);
	scroll-margin-top: var(--acm-header-h);
}

.acm-kunden__title {
	width: min(var(--acm-max-width), 100% - 2 * var(--acm-gutter));
	margin: 0 auto 2.5rem;
	font-family: var(--acm-font-sans);
	font-size: clamp(2.75rem, 8vw, 6.5rem);
	font-weight: 300;
	line-height: 1;
	color: inherit;
}

.acm-kunden__track { display: flex; width: max-content; }

.acm-kunden__list {
	display: flex;
	align-items: center;
	gap: clamp(3rem, 6vw, 6rem);
	padding: 0 clamp(1.5rem, 3vw, 3rem);
	margin: 0;
	list-style: none;
}

.acm-kunden__list img {
	display: block;
	height: clamp(40px, 5vw, 64px);
	width: auto;
	max-width: 220px;
	object-fit: contain;
}

@media (prefers-reduced-motion: no-preference) {
	.acm-kunden__track { animation: acm-marquee 45s linear infinite; }
	.acm-kunden:hover .acm-kunden__track { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
	.acm-kunden__track { width: auto; justify-content: center; }
	.acm-kunden__list { flex-wrap: wrap; justify-content: center; row-gap: 2rem; }
	.acm-kunden__list[aria-hidden="true"] { display: none; }
}

@keyframes acm-marquee { to { transform: translateX(-50%); } }

/* 11. Smartphone */
@media (max-width: 1024px) {
	.acm-home .acm-carousel .wp-block-post-template > li { flex-basis: calc((100% - var(--gap)) / 2); }
	.acm-lightbox__inner { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
	.acm-lightbox__side { padding: 1.5rem; max-height: 46dvh; }
}

@media (max-width: 781px) {
	.acm-home .acm-frame { --m: 8px; --co: 6px; --ci: 16px; --g: 8px; --d: 40px; }
	.acm-home .acm-carousel__nav button.acm-arrow { width: 40px; height: 40px; }
	.acm-home .acm-carousel__nav button.acm-arrow--prev { left: 0; }
	.acm-home .acm-carousel__nav button.acm-arrow--next { right: 0; }
	.acm-home .acm-carousel .wp-block-post-template > li { flex-basis: 85%; }
	.acm-home .acm-divider { height: clamp(90px, 28vw, 140px) !important; }
	.acm-lightbox { width: 100vw; height: 100dvh; }
	.acm-home .acm-hero::after { width: 100%; opacity: 0.5; }
	.acm-home .acm-contact::after { width: 100%; opacity: 0.3; }
}