/*
 * Allemann und Hotz 2 – Gestaltungssystem der Variante 2.
 * Farben: Braun und Weiss aus dem Logo, dazu ein helles Beige. Keine Animationen; einzige Ausnahme ist das Logoband auf Küchenbau.
 * Aufbau: Grundlagen, Kopfzeile, Bausteine (Startseite und Küchenbau), Fusszeile, Handy-Leiste, übrige Seiten,
 * einheitliche Abstände, Seitenkopf der Unterseiten, Logoband.
 */

:root {
	--a2-braun: var(--wp--preset--color--braun);
	--a2-beige: var(--wp--preset--color--beige);
	--a2-linie: var(--wp--preset--color--linie);
	--a2-weiss: var(--wp--preset--color--weiss);
	--a2-radius: 1.25rem;
	--a2-radius-klein: 0.75rem;
	/* Ein Abstand für alle Abschnitte aller Seiten: am Desktop 144px, auf dem Handy 80px. */
	--a2-abstand: clamp(5rem, 10vw, 9rem);
	/* Abstand zwischen Obertitel und Titel, überall gleich wie im Seitenkopf. */
	--a2-zeile-abstand: 1.125rem;
	--a2-spalt: clamp(1.5rem, 3vw, 2.5rem);
	--a2-schatten: 0 1.75rem 3.5rem -2rem rgb(72 57 44 / 0.35);
	--a2-kopf: 5.25rem;
	--aundh-abstand: var(--a2-abstand);
}

/* Keine Animationen: auch das aufklappende Menü von WordPress erscheint ohne Übergang. */
*,
*::before,
*::after {
	animation: none !important;
	transition: none !important;
}

html {
	scroll-behavior: auto;
}

/* ---------- Kopfzeile ---------- */

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--a2-weiss);
	border-bottom: 1px solid var(--a2-linie);
}

.a2-header__zeile {
	gap: 1.5rem;
	min-height: var(--a2-kopf);
}

.a2-header .wp-block-site-logo {
	flex-shrink: 1;
	min-width: 0;
	line-height: 0;
}

.a2-header .wp-block-site-logo a {
	display: block;
}

.a2-header .wp-block-site-logo img {
	width: 250px;
	max-width: 100%;
	height: auto;
}

.a2-header__rechts {
	gap: 1.25rem;
	flex-shrink: 0;
}

.a2-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--titel);
	font-size: 1.0625rem;
	font-weight: 600;
	gap: 0.25rem;
}

.a2-header .wp-block-navigation .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	color: var(--a2-braun);
	text-decoration: none;
	border-radius: 100px;
}

.a2-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.a2-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	background: var(--a2-beige);
}

/* Aktuelle Seite und ihre Unterseiten: beige hinterlegt mit feiner Linie darunter. */
.a2-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.a2-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
.a2-header .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--a2-weiss);
	background: var(--a2-braun);
}

.a2-header__tel {
	margin: 0;
}

.a2-header__tel a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: 0.5rem 1.125rem;
	color: var(--a2-braun);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	border: 2px solid var(--a2-braun);
	border-radius: 100px;
}

.a2-header__tel a::before {
	content: "";
	flex: none;
	width: 1.0625rem;
	height: 1.0625rem;
	background: currentColor;
	-webkit-mask: url(../icons/telefon.svg) center / contain no-repeat;
	mask: url(../icons/telefon.svg) center / contain no-repeat;
}

.a2-header__tel a:hover {
	color: var(--a2-weiss);
	background: var(--a2-braun);
}

.a2-header .wp-block-navigation__responsive-container-open,
.a2-header .wp-block-navigation__responsive-container-close {
	padding: 0.625rem;
	color: var(--a2-braun);
}

.a2-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem);
	background: var(--a2-weiss);
	color: var(--a2-braun);
}

.a2-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.a2-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.a2-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	align-items: stretch;
}

.a2-header .is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}

/* Aufgeklapptes Menü: grosse Tippflächen, feine Linie zwischen den Punkten. */
.a2-header .wp-block-navigation .is-menu-open .wp-block-navigation-item__content {
	display: flex;
	width: 100%;
	min-height: 3.5rem;
	padding: 0.875rem 1rem;
	font-size: 1.375rem;
	border-bottom: 1px solid var(--a2-linie);
	border-radius: 0;
}

/* Bis 1179px Breite bleibt das Menü eingeklappt (WordPress klappt sonst schon ab 600px aus). */
@media (min-width: 600px) and (max-width: 1179px) {
	.a2-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.a2-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 781px) {
	:root {
		--a2-kopf: 4.25rem;
	}

	/* Auf dem Handy übernimmt die feste Leiste unten das Anrufen. */
	.a2-header__tel {
		display: none;
	}

	.a2-header .wp-block-site-logo img {
		width: 200px;
	}
}

/* ---------- Grundlagen der neuen Bausteine ---------- */

.a2-abschnitt {
	margin-block: 0;
	padding-block: var(--a2-abstand);
}

.a2-abschnitt--beige {
	background: var(--a2-beige);
}

.a2-abschnitt--braun {
	color: var(--a2-weiss);
	background: var(--a2-braun);
}

.a2-abschnitt--braun :is(h2, h3),
.aundh-main .a2-abschnitt--braun .a2-zeile {
	color: var(--a2-weiss);
}

.a2-abschnitt--braun a:not(.wp-block-button__link) {
	color: var(--a2-weiss);
}

.a2-abschnitt--eng-oben {
	padding-top: 0;
}

/* Kleine Zeile über jedem Titel. */
.aundh-main .a2-zeile {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	color: var(--a2-braun);
	font-family: var(--wp--preset--font-family--titel);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-transform: uppercase;
	text-wrap: balance;
}

.a2-zeile::before {
	content: "";
	flex: none;
	width: 2rem;
	height: 2px;
	background: currentColor;
}

/* Der Abstand sitzt am Titel, nicht an der Zeile: Diese Regel ist spezifischer als die Bausteine,
   die die Abstände ihrer Kinder zurücksetzen. So ist er in jedem Baustein gleich wie im Seitenkopf. */
.aundh-main .a2-zeile + :is(h1, h2, h3) {
	margin-top: var(--a2-zeile-abstand);
}

.aundh-main .a2-spalten + :is(.a2-spalten, .a2-ueberlappung, .a2-kacheln, .a2-leistungen, .a2-punkte, .aundh-team, .aundh-hersteller, .aundh-galerie, .aundh-projekte) {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.a2-gross {
	font-size: var(--wp--preset--font-size--gross);
}

/* Raster mit zwölf Spalten; die Spaltenbreiten wechseln von Abschnitt zu Abschnitt. */
.a2-spalten {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--a2-spalt);
	row-gap: 1.5rem;
	align-items: start;
}

.aundh-main .a2-spalten > *,
.aundh-main .a2-spalte > :first-child {
	margin-block: 0;
}

.a2-spalten--5-7 > :first-child { grid-column: span 5; }
.a2-spalten--5-7 > :last-child { grid-column: 7 / span 6; }
.a2-spalten--4-8 > :first-child { grid-column: span 4; }
.a2-spalten--4-8 > :last-child { grid-column: 6 / span 7; }
.a2-spalten--7-5 > :first-child { grid-column: span 6; }
.a2-spalten--7-5 > :last-child { grid-column: 8 / span 5; }
.a2-spalten--mitte { align-items: center; }

/* Titelbereich eines Abschnitts: linksbündig an der Inhaltskante, Zeilen nicht zu lang. */
.aundh-main .a2-kopf > * {
	max-width: 46rem;
	margin-block: 0;
}

.aundh-main .a2-kopf > h2 + p {
	margin-top: 1.25rem;
}

@media (max-width: 899px) {
	.a2-spalten > :first-child,
	.a2-spalten > :last-child {
		grid-column: 1 / -1;
	}
}

/* Schaltflächen: gefüllt braun, daneben eine helle Form mit brauner Linie. */
.wp-block-button.a2-knopf-hell > .wp-block-button__link {
	color: var(--a2-braun);
	background: transparent;
	border-color: var(--a2-braun);
}

.wp-block-button.a2-knopf-hell > .wp-block-button__link:hover {
	color: var(--a2-weiss);
	background: var(--a2-braun);
}

.a2-abschnitt--braun .wp-block-button__link,
.a2-feld--braun .wp-block-button__link,
.a2-abschluss__kasten .wp-block-button__link {
	color: var(--a2-braun);
	background: var(--a2-weiss);
	border-color: var(--a2-weiss);
}

.a2-abschnitt--braun .wp-block-button__link:hover,
.a2-feld--braun .wp-block-button__link:hover,
.a2-abschluss__kasten .wp-block-button__link:hover {
	color: var(--a2-braun);
	background: var(--a2-beige);
	border-color: var(--a2-beige);
}

/* ---------- Einstieg: Text links, grosses Bild rechts ---------- */

.a2-hero {
	margin-block: 0;
	padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 4vw, 3.5rem);
	background: var(--a2-beige);
}

.a2-hero__innen {
	display: grid;
	grid-template-columns: minmax(0, 11fr) minmax(0, 12fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: stretch;
	/* Kopfzeile, Einstieg und Leiste haben zusammen in der Höhe des Bildschirms Platz. */
	min-height: clamp(24rem, calc(100vh - var(--a2-kopf) - 12.5rem), 40rem);
}

.a2-hero__text {
	align-self: center;
	padding-block: 0.5rem;
}

.aundh-main .a2-hero__text > * {
	margin-block: 0;
}

.aundh-main .a2-hero__text > h1 + p {
	margin-top: 1.5rem;
	max-width: 36rem;
}

/* Neben dem Bild richtet sich die Titelgrösse nach der Spaltenbreite, damit lange Wörter nicht mitten im Wort umbrechen. */
@media (min-width: 900px) {
	.a2-hero h1 {
		font-size: clamp(2.125rem, 4.3vw, 3.5rem);
	}
}

/* Verlinkte Wörter im Titel (Startseite) ohne Unterstreichung; sie färben sich nur beim Darüberfahren. */
.a2-hero h1 a {
	color: inherit;
	text-decoration: none;
}

.a2-hero h1 a:hover {
	color: var(--wp--preset--color--hellbraun);
}

.aundh-main .a2-hero__text > .wp-block-buttons {
	margin-top: 2rem;
	gap: 0.75rem;
}

.aundh-main .a2-hero__bild {
	position: relative;
	min-height: 18rem;
	margin: 0;
}

.a2-hero__bild img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 52% 35%;
	border-radius: var(--a2-radius);
}

.a2-hero--kueche .a2-hero__bild img {
	object-position: 50% 50%;
}

@media (max-width: 899px) {
	.a2-hero__innen {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	/* Tablet und Handy: Das Bild steht zuerst, auf allen Seiten gleich wie auf der Startseite. */
	.aundh-main .a2-hero__bild {
		order: -1;
		min-height: 0;
		aspect-ratio: 2 / 1;
	}

	.a2-hero__innen {
		gap: 1.75rem;
	}
}

@media (max-width: 520px) {
	.aundh-main .a2-hero__bild {
		aspect-ratio: 16 / 10;
	}

	.a2-hero__text > .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.a2-hero__text > .wp-block-buttons .wp-block-button,
	.a2-hero__text > .wp-block-buttons .wp-block-button__link {
		width: 100%;
	}
}

/* ---------- Schmale Leiste mit Vertrauenspunkten: liegt halb auf dem Einstieg ---------- */

.a2-vertrauen {
	margin-block: 0;
	background: linear-gradient(var(--a2-beige) 0 50%, var(--a2-weiss) 50%);
}

/* Fünf Punkte in einer Zeile ab 1280px Breite (gemessen: zusammen 994px bei 17px Schrift). */
.aundh-main .a2-vertrauen__liste {
	display: grid;
	grid-template-columns: repeat(5, auto);
	justify-content: space-between;
	gap: 0.5rem 1.25rem;
	margin-block: 0;
	padding: 1.375rem clamp(1.25rem, 3vw, 2.5rem);
	color: var(--a2-weiss);
	font-family: var(--wp--preset--font-family--titel);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	list-style: none;
	background: var(--a2-braun);
	border-radius: var(--a2-radius);
}

.a2-vertrauen__liste li {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.a2-vertrauen__liste li::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background: currentColor;
	-webkit-mask: url(../icons/haken-linie.svg) center / contain no-repeat;
	mask: url(../icons/haken-linie.svg) center / contain no-repeat;
}

@media (max-width: 1279px) {
	.aundh-main .a2-vertrauen__liste {
		grid-template-columns: repeat(3, auto);
		gap: 0.875rem 1.5rem;
	}
}

@media (max-width: 1099px) {
	.aundh-main .a2-vertrauen__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.aundh-main .a2-vertrauen__liste {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Bild mit überlappender Karte ---------- */

.a2-ueberlappung {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: end;
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.aundh-main .a2-ueberlappung + .a2-ueberlappung {
	margin-top: clamp(3.5rem, 8vw, 7rem);
}

.aundh-main .a2-ueberlappung > * {
	grid-row: 1;
	margin-block: 0;
}

.aundh-main .a2-ueberlappung__bild {
	grid-column: 1 / span 8;
	margin: 0;
}

.a2-ueberlappung__bild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--a2-radius);
}

.a2-karte {
	position: relative;
	z-index: 1;
	grid-column: 7 / span 6;
	box-sizing: border-box;
	margin-bottom: calc(clamp(2rem, 4vw, 3.5rem) * -1) !important;
	padding: clamp(1.75rem, 3.5vw, 3rem);
	background: var(--a2-weiss);
	border-radius: var(--a2-radius);
	box-shadow: var(--a2-schatten);
}

.aundh-main .a2-karte > * {
	margin-block: 0;
}

.aundh-main .a2-karte > * + p,
.aundh-main .a2-karte > p + p {
	margin-top: 1rem;
}

.aundh-main .a2-karte > .wp-block-buttons {
	margin-top: 1.75rem;
}

.a2-karte :is(h2, h3) {
	font-size: var(--wp--preset--font-size--titel-mittel);
}

/* Gespiegelt und mit anderer Aufteilung: Karte links, Bild rechts. */
.aundh-main .a2-ueberlappung--links .a2-ueberlappung__bild {
	grid-column: 6 / span 7;
}

.a2-ueberlappung--links .a2-karte {
	grid-column: 1 / span 6;
}

.a2-ueberlappung--links .a2-ueberlappung__bild img {
	aspect-ratio: 4 / 3;
}

/* Grosses Bild über die ganze Breite, die Karte liegt unten rechts darauf. */
.aundh-main .a2-ueberlappung--gross .a2-ueberlappung__bild {
	grid-column: 1 / -1;
}

.a2-ueberlappung--gross .a2-ueberlappung__bild img {
	aspect-ratio: 16 / 9;
	max-height: 42rem;
}

.a2-ueberlappung--gross .a2-karte {
	grid-column: 6 / span 7;
	margin-right: clamp(1rem, 3vw, 2.5rem);
}

.a2-karte--braun {
	color: var(--a2-weiss);
	background: var(--a2-braun);
}

.a2-karte--braun :is(h2, h3),
.a2-karte--braun .a2-zeile {
	color: var(--a2-weiss);
}

@media (max-width: 899px) {
	.a2-ueberlappung {
		display: block;
		padding-bottom: 0;
	}

	.a2-ueberlappung .a2-karte,
	.a2-ueberlappung--gross .a2-karte {
		margin: -2.5rem 1rem 0 !important;
	}

	.a2-ueberlappung--gross .a2-ueberlappung__bild img {
		aspect-ratio: 3 / 2;
	}
}

@media (max-width: 520px) {
	.a2-ueberlappung .a2-karte,
	.a2-ueberlappung--gross .a2-karte {
		margin: -2rem 0.625rem 0 !important;
	}

	.a2-ueberlappung__bild img,
	.a2-ueberlappung--links .a2-ueberlappung__bild img {
		aspect-ratio: 5 / 4;
	}
}

/* ---------- Die 10 Punkte: ruhiges Raster mit gleich hohen Feldern ---------- */

.aundh-main .a2-punkte {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 1rem;
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

.aundh-main .a2-punkt {
	box-sizing: border-box;
	margin: 0;
	padding: 1.5rem 1.25rem 1.625rem;
	background: var(--a2-weiss);
	border-radius: var(--a2-radius-klein);
}

.aundh-main .a2-punkt > * {
	margin-block: 0;
}

.a2-punkt h3 {
	font-size: 1.1875rem;
	hyphens: manual;
}

.aundh-main .a2-punkt h3 + p {
	margin-top: 0.5rem;
	font-size: 1rem;
	line-height: 1.55;
}

.a2-punkt.wp-block-group[class*="is-style-symbol-"]::before {
	width: 3rem;
	height: 3rem;
	margin-bottom: 1.125rem;
	background-color: var(--a2-beige);
	background-size: 2rem;
	border: 0;
	border-radius: 50%;
}

@media (max-width: 1199px) {
	.aundh-main .a2-punkte {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.aundh-main .a2-punkte {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
	}

	/* Handy: Symbol links, Titel und Text rechts. So bleiben die Felder niedrig. */
	.aundh-main .a2-punkt {
		display: grid;
		grid-template-columns: 3rem minmax(0, 1fr);
		column-gap: 1rem;
		align-items: start;
	}

	.a2-punkt.wp-block-group[class*="is-style-symbol-"]::before {
		grid-row: 1 / span 2;
		margin-bottom: 0;
	}
}

/* ---------- Bild mit kleinem Merkkasten, der über die Bildkante ragt ---------- */

.a2-bildstapel {
	position: relative;
	padding-bottom: 3.5rem;
}

.aundh-main .a2-bildstapel > .wp-block-image {
	margin: 0;
}

.a2-bildstapel > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: var(--a2-radius);
}

.aundh-main .a2-merk {
	position: absolute;
	bottom: 0;
	left: clamp(-4rem, -4vw, -1.5rem);
	box-sizing: border-box;
	width: min(25rem, 82%);
	margin: 0;
	padding: 1.5rem 1.75rem;
	color: var(--a2-weiss);
	background: var(--a2-braun);
	border-radius: var(--a2-radius-klein);
	box-shadow: var(--a2-schatten);
}

.aundh-main .a2-merk > * {
	margin-block: 0;
}

.aundh-main .a2-merk__titel {
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--titel);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.25;
}

.a2-merk p:not(.a2-merk__titel) {
	font-size: 1rem;
	line-height: 1.55;
}

.aundh-main .a2-spalte > * + * {
	margin-top: 1.25rem;
}

@media (max-width: 899px) {
	.a2-bildstapel {
		padding-bottom: 0;
	}

	.aundh-main .a2-merk {
		position: relative;
		left: auto;
		width: auto;
		margin: -2.5rem 1rem 0;
	}
}

/* ---------- Zwei Bilder mit Text, in der Höhe versetzt ---------- */

.a2-versatz {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--a2-spalt);
	row-gap: 3.5rem;
	align-items: start;
}

.aundh-main .a2-versatz > * {
	margin-block: 0;
}

.aundh-main .a2-versatz > :first-child {
	grid-column: 1 / span 5;
}

.aundh-main .a2-versatz > :last-child {
	grid-column: 7 / span 6;
	margin-top: clamp(3rem, 9vw, 8rem);
}

.aundh-main .a2-bildtext > * {
	margin-block: 0;
}

.aundh-main .a2-bildtext > .wp-block-image {
	margin: 0 0 1.75rem;
}

.a2-bildtext > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--a2-radius);
}

.a2-bildtext--hoch > .wp-block-image img {
	aspect-ratio: 4 / 5;
	object-position: 50% 30%;
}

.a2-bildtext :is(h2, h3) {
	font-size: var(--wp--preset--font-size--titel-mittel);
}

.aundh-main .a2-bildtext > :is(h2, h3) + p,
.aundh-main .a2-bildtext > p + p:not(.a2-zeile) {
	margin-top: 1rem;
}

@media (max-width: 781px) {
	.aundh-main .a2-versatz > :first-child,
	.aundh-main .a2-versatz > :last-child {
		grid-column: 1 / -1;
		margin-top: 0;
	}

	.a2-bildtext--hoch > .wp-block-image img {
		aspect-ratio: 1 / 1;
	}
}

/* ---------- Zwei Felder nebeneinander, ungleich breit ---------- */

.a2-zwei {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--a2-spalt);
	align-items: stretch;
}

.aundh-main .a2-feld {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	margin: 0;
	padding: clamp(1.75rem, 4vw, 3.25rem);
	background: var(--a2-weiss);
	border-radius: var(--a2-radius);
}

.aundh-main .a2-feld > * {
	margin-block: 0;
}

.aundh-main .a2-feld > :is(h2, h3) + p {
	margin-top: 1rem;
}

.aundh-main .a2-feld > .wp-block-buttons {
	margin-top: auto;
	padding-top: 1.75rem;
}

.a2-feld :is(h2, h3) {
	font-size: var(--wp--preset--font-size--titel-mittel);
}

.a2-feld--braun {
	color: var(--a2-weiss);
	background: var(--a2-braun) !important;
}

.a2-feld--braun :is(h2, h3),
.a2-feld--braun .a2-zeile {
	color: var(--a2-weiss);
}

@media (max-width: 899px) {
	.a2-zwei {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Was unsere Kunden sagen ---------- */

.a2-bewertungen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"kopf knopf"
		"liste liste";
	column-gap: var(--a2-spalt);
	align-items: end;
}

.aundh-main .a2-bewertungen > * {
	margin-block: 0;
}

.a2-bewertungen > .a2-kopf { grid-area: kopf; }
.a2-bewertungen > .wp-block-buttons { grid-area: knopf; }

.aundh-main .a2-bewertungen > .a2-stimmen {
	grid-area: liste;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

.aundh-main .a2-stimme {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	margin: 0;
	padding: clamp(1.75rem, 3vw, 2.75rem);
	background: var(--a2-beige);
	border-radius: var(--a2-radius);
}

.aundh-main .a2-stimme > * {
	margin-block: 0;
}

/* Fünf Sterne als Bild; der Text «5 von 5 Sternen» bleibt für Vorlesegeräte erhalten. */
.a2-stimme__sterne {
	width: 8rem;
	height: 1.25rem;
	overflow: hidden;
	color: transparent;
	font-size: 0;
	background: var(--a2-braun);
	-webkit-mask: url(../icons/stern.svg) left center / 1.6rem 1.25rem repeat-x;
	mask: url(../icons/stern.svg) left center / 1.6rem 1.25rem repeat-x;
}

.aundh-main .a2-stimme__text {
	flex: 1;
	margin-top: 1.25rem;
	font-size: var(--wp--preset--font-size--gross);
	line-height: 1.55;
}

.aundh-main .a2-stimme h3 {
	margin-top: 1.5rem;
	padding-top: 1.125rem;
	font-size: 1.125rem;
	border-top: 1px solid var(--a2-linie);
}

@media (max-width: 1099px) {
	.aundh-main .a2-bewertungen > .a2-stimmen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 699px) {
	.a2-bewertungen {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"kopf"
			"liste"
			"knopf";
	}

	.aundh-main .a2-bewertungen > .a2-stimmen {
		grid-template-columns: minmax(0, 1fr);
	}

	.aundh-main .a2-bewertungen > .wp-block-buttons {
		margin-top: 2rem;
	}

	.a2-bewertungen > .wp-block-buttons .wp-block-button,
	.a2-bewertungen > .wp-block-buttons .wp-block-button__link {
		width: 100%;
	}
}

/* ---------- Abschluss: brauner Kasten mit Aufruf ---------- */

.a2-abschluss {
	margin-block: 0;
	padding-block: 0 var(--a2-abstand);
}

.a2-abschluss--beige {
	padding-top: var(--a2-abstand);
	background: var(--a2-beige);
}

.a2-abschluss__kasten {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--a2-spalt);
	align-items: center;
	box-sizing: border-box;
	padding: clamp(2.25rem, 6vw, 5rem);
	color: var(--a2-weiss);
	background: var(--a2-braun);
	border-radius: calc(var(--a2-radius) * 1.4);
}

.aundh-main .a2-abschluss__kasten > * {
	grid-column: 1;
	margin-block: 0;
}

.a2-abschluss__kasten h2,
.a2-abschluss__kasten .a2-zeile {
	color: var(--a2-weiss);
}

.aundh-main .a2-abschluss__kasten > h2 + p {
	max-width: 44rem;
	margin-top: 1rem;
	font-size: var(--wp--preset--font-size--gross);
}

.aundh-main .a2-abschluss__kasten > .wp-block-buttons {
	grid-column: 2;
	grid-row: 1 / span 3;
}

@media (max-width: 899px) {
	.a2-abschluss__kasten {
		grid-template-columns: minmax(0, 1fr);
	}

	.aundh-main .a2-abschluss__kasten > .wp-block-buttons {
		grid-column: 1;
		grid-row: auto;
		margin-top: 1.75rem;
	}
}

@media (max-width: 520px) {
	.a2-abschluss__kasten .wp-block-button,
	.a2-abschluss__kasten .wp-block-button__link {
		width: 100%;
	}
}

/* ---------- Küchenbau: sechs Kacheln auf Braun ---------- */

.aundh-main .a2-kacheln {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

.aundh-main .a2-kachel {
	box-sizing: border-box;
	margin: 0;
	padding: clamp(1.5rem, 2.5vw, 2.25rem);
	border: 1px solid rgb(255 255 255 / 0.3);
	border-radius: var(--a2-radius-klein);
}

.aundh-main .a2-kachel > * {
	margin-block: 0;
}

.a2-kachel h3 {
	font-size: 1.3125rem;
}

.aundh-main .a2-kachel h3 + p {
	margin-top: 0.875rem;
}

.aundh-main .a2-kachel p + p {
	margin-top: 0.75rem;
}

.a2-kachel p {
	font-size: 1rem;
	line-height: 1.6;
}

/* Schachbrett: jede zweite Kachel ist weiss gefüllt (bei drei Spalten und auf dem Handy die 1., 3., 5. …). */
.aundh-main .a2-kacheln > .a2-kachel:nth-child(odd) {
	color: var(--wp--preset--color--text);
	background: var(--a2-weiss);
	border-color: var(--a2-weiss);
}

.a2-kacheln > .a2-kachel:nth-child(odd) h3 {
	color: var(--a2-braun);
}

.a2-kacheln > .a2-kachel:nth-child(odd) a {
	color: var(--a2-braun);
}

/* Vier Kacheln: zwei pro Reihe. */
.aundh-main .a2-kacheln--vier {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1099px) {
	.aundh-main .a2-kacheln {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Bei zwei Spalten wechselt die Farbe von Reihe zu Reihe: weiss sind die 1., 4., 5., 8. … */
@media (min-width: 700px) and (max-width: 1099px) {
	.aundh-main .a2-kacheln > .a2-kachel:nth-child(4n + 3) {
		color: inherit;
		background: transparent;
		border-color: rgb(255 255 255 / 0.3);
	}

	.a2-kacheln > .a2-kachel:nth-child(4n + 3) :is(h3, a) {
		color: var(--a2-weiss);
	}

	.aundh-main .a2-kacheln > .a2-kachel:nth-child(4n) {
		color: var(--wp--preset--color--text);
		background: var(--a2-weiss);
		border-color: var(--a2-weiss);
	}

	.a2-kacheln > .a2-kachel:nth-child(4n) :is(h3, a) {
		color: var(--a2-braun);
	}
}

@media (min-width: 1100px) {
	.aundh-main .a2-kacheln--vier > .a2-kachel:nth-child(4n + 3) {
		color: inherit;
		background: transparent;
		border-color: rgb(255 255 255 / 0.3);
	}

	.a2-kacheln--vier > .a2-kachel:nth-child(4n + 3) :is(h3, a) {
		color: var(--a2-weiss);
	}

	.aundh-main .a2-kacheln--vier > .a2-kachel:nth-child(4n) {
		color: var(--wp--preset--color--text);
		background: var(--a2-weiss);
		border-color: var(--a2-weiss);
	}

	.a2-kacheln--vier > .a2-kachel:nth-child(4n) :is(h3, a) {
		color: var(--a2-braun);
	}
}

@media (max-width: 699px) {
	.aundh-main .a2-kacheln {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Leistungen als Bildkarten, beide Spalten auf gleicher Höhe ---------- */

.aundh-main .a2-leistungen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2.5rem, 5vw, 4rem) var(--a2-spalt);
	margin-top: clamp(3.5rem, 8vw, 7rem);
}

/* Ohne den Abstand, den WordPress jedem folgenden Block gibt: Sonst stünden alle Karten ausser der ersten tiefer. */
.aundh-main .a2-leistungen > * {
	margin-block: 0;
}

/* Drei Bildkarten nebeneinander (Schreinerei: für wen wir arbeiten). */
.aundh-main .a2-leistungen--drei {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 781px) {
	.aundh-main .a2-leistungen {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Küchenbau: die 6 Schritte als nummerierter Ablauf ---------- */

.aundh-main .a2-schritte {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(2.5rem, 5vw, 4rem) 0;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* Eine durchgehende Linie verbindet die Schritte; auf ihr sitzt bei jedem Schritt ein Punkt. */
.aundh-main .a2-schritt {
	position: relative;
	box-sizing: border-box;
	margin: 0;
	padding: 2rem var(--a2-spalt) 0 0;
	border-top: 2px solid var(--a2-braun);
}

.a2-schritt::before {
	content: "";
	position: absolute;
	top: -0.4375rem;
	left: 0;
	width: 0.75rem;
	height: 0.75rem;
	background: var(--a2-braun);
	border-radius: 50%;
}

.aundh-main .a2-schritt > * {
	margin-block: 0;
}

.aundh-main .a2-schritt__zahl {
	color: var(--a2-braun);
	font-family: var(--wp--preset--font-family--titel);
	font-size: clamp(2.75rem, 2rem + 2.4vw, 3.75rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
}

.aundh-main .a2-schritt h3 {
	margin-top: 1rem;
	font-size: 1.3125rem;
}

.aundh-main .a2-schritt h3 + p {
	margin-top: 0.75rem;
	font-size: 1rem;
	line-height: 1.6;
}

@media (max-width: 1099px) {
	.aundh-main .a2-schritte {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Handy: Zahl links, die Linie läuft senkrecht von Schritt zu Schritt. */
@media (max-width: 699px) {
	.aundh-main .a2-schritte {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.aundh-main .a2-schritt {
		display: grid;
		grid-template-columns: 4rem minmax(0, 1fr);
		column-gap: 1rem;
		padding: 0 0 2.25rem 1.5rem;
		border-top: 0;
		border-left: 2px solid var(--a2-braun);
	}

	.aundh-main .a2-schritt:last-child {
		padding-bottom: 0;
	}

	.a2-schritt::before {
		top: 0.5rem;
		left: -0.4375rem;
	}

	.aundh-main .a2-schritt__zahl {
		grid-row: 1 / span 2;
		font-size: 2.5rem;
	}

	.aundh-main .a2-schritt h3 {
		margin-top: 0.25rem;
	}
}

/* ---------- Küchenbau: Häufige Fragen ---------- */

.aundh-main .a2-faq > * {
	margin-block: 0;
}

.a2-faq details {
	border-top: 1px solid var(--a2-linie);
}

.a2-faq details:last-child {
	border-bottom: 1px solid var(--a2-linie);
}

.a2-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 2.75rem;
	padding-block: 1.25rem;
	color: var(--a2-braun);
	font-family: var(--wp--preset--font-family--titel);
	font-size: 1.3125rem;
	font-weight: 600;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

.a2-faq summary::-webkit-details-marker {
	display: none;
}

.a2-faq summary::after {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
}

.a2-faq details[open] > summary::after {
	background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

.aundh-main .a2-faq details > p {
	max-width: 44rem;
	margin: 0 0 1.5rem;
}

/* ---------- Fusszeile ---------- */

.a2-footer {
	padding-block: clamp(3rem, 6vw, 5rem) 2rem;
	color: var(--a2-weiss);
	background: var(--a2-braun);
}

.a2-footer a {
	color: var(--a2-weiss);
	text-decoration: none;
}

.a2-footer a:hover {
	text-decoration: underline;
}

.a2-footer :where(a):focus-visible {
	outline-color: var(--a2-weiss);
}

.a2-footer p {
	margin-block: 0;
}

.a2-footer__kopf {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.5rem clamp(2rem, 6vw, 5rem);
	align-items: center;
	padding-bottom: clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid rgb(255 255 255 / 0.25);
}

.a2-footer .a2-footer__logo {
	margin: 0;
	line-height: 0;
}

.a2-footer__satz {
	max-width: 34rem;
	margin-left: auto !important;
	font-family: var(--wp--preset--font-family--titel);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
	line-height: 1.35;
}

.a2-footer .a2-footer__spalten {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.5rem var(--a2-spalt);
	margin-top: clamp(2rem, 4vw, 3rem);
}

.a2-footer .a2-footer__spalte {
	margin: 0;
}

.a2-footer__titel {
	margin-bottom: 0.75rem !important;
	font-family: var(--wp--preset--font-family--titel);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.a2-footer__titel--zweiter {
	margin-top: 1.75rem !important;
}

.a2-footer__spalte p + p:not(.a2-footer__titel) {
	margin-top: 0.625rem;
}

.a2-footer__spalte p a,
.a2-footer__links a {
	display: inline-block;
	padding-block: 0.5rem;
}

.a2-footer .a2-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.a2-footer .a2-footer__sozial {
	gap: 0.25rem;
	margin: 0.5rem 0 0 -0.375rem;
}

.a2-footer .a2-footer__symbol {
	margin: 0;
	line-height: 0;
}

.a2-footer .a2-footer__symbol a {
	display: inline-block;
	padding: 0.375rem;
}

/* Partnerlogos: eine Reihe, alle gleich hoch. Logos mit dunkler Schrift stehen auf weissem Grund. */
.a2-footer .a2-partner {
	align-items: center;
	gap: 1.75rem 2.5rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 2.5rem;
	border-top: 1px solid rgb(255 255 255 / 0.25);
}

.a2-footer .a2-partner__logo {
	box-sizing: border-box;
	height: 5rem;
	margin: 0;
	line-height: 0;
}

.a2-footer .a2-partner__logo a {
	display: block;
	height: 100%;
}

.a2-footer .a2-partner__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
}

.a2-footer .a2-partner__logo--hell {
	padding: 0.625rem 0.875rem;
	background: var(--a2-weiss);
	border-radius: var(--a2-radius-klein);
}

.a2-footer .a2-footer__abschluss {
	align-items: baseline;
	gap: 0.25rem 2rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgb(255 255 255 / 0.25);
}

.a2-footer .a2-footer__abschluss p {
	font-size: 1rem;
}

.a2-footer .a2-footer__webdesign a {
	display: inline-block;
	padding-block: 0.5rem;
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

/* Platz rechts, damit die Schaltfläche «Nach oben» den Hinweis «Webdesign» nicht verdeckt. */
@media (min-width: 782px) and (max-width: 1479px) {
	.a2-footer .a2-footer__abschluss {
		padding-right: 5.5rem;
	}
}

@media (max-width: 1023px) {
	.a2-footer .a2-footer__spalten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.a2-footer__kopf {
		grid-template-columns: minmax(0, 1fr);
	}

	.a2-footer__satz {
		margin-left: 0 !important;
	}
}

@media (max-width: 781px) {
	.a2-footer .a2-partner {
		justify-content: flex-start;
		gap: 1.25rem 1.5rem;
	}

	.a2-footer .a2-partner__logo {
		height: 4rem;
	}

	.a2-footer .a2-footer__abschluss {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 520px) {
	.a2-footer .a2-footer__spalten {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.a2-footer .a2-partner__logo {
		height: 3.5rem;
	}

	.a2-footer .a2-partner__logo--hell {
		padding: 0.5rem 0.625rem;
	}
}

/* ---------- Handy: feste Leiste unten mit «Anrufen» und «Kontakt» ---------- */

.a2-handyleiste {
	display: none;
}

@media (max-width: 781px) {
	.a2-handyleiste {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 60;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.625rem;
		padding: 0.625rem 0.875rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
		background: var(--a2-weiss);
		border-top: 1px solid var(--a2-linie);
		box-shadow: 0 -0.5rem 1.5rem -1rem rgb(72 57 44 / 0.4);
	}

	.a2-handyleiste a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		box-sizing: border-box;
		min-height: 3rem;
		padding: 0.5rem 0.75rem;
		font-size: 1.0625rem;
		font-weight: 700;
		line-height: 1.2;
		text-decoration: none;
		border: 2px solid var(--a2-braun);
		border-radius: 100px;
	}

	.a2-handyleiste a::before {
		content: "";
		flex: none;
		width: 1.125rem;
		height: 1.125rem;
		background: currentColor;
		-webkit-mask: var(--a2-symbol) center / contain no-repeat;
		mask: var(--a2-symbol) center / contain no-repeat;
	}

	.a2-handyleiste__anrufen {
		--a2-symbol: url(../icons/telefon.svg);
		color: var(--a2-weiss);
		background: var(--a2-braun);
	}

	.a2-handyleiste__kontakt {
		--a2-symbol: url(../icons/brief.svg);
		color: var(--a2-braun);
		background: var(--a2-weiss);
	}

	/* Platz am Seitenende, damit die Leiste nichts vom Footer verdeckt. */
	.a2-footer {
		padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
	}

	.aundh-nach-oben {
		bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/* =====================================================================
   Übrige Seiten: gleicher Inhalt und Aufbau, aber Farben, Schriften und Formen des neuen Themes
   ===================================================================== */

.aundh-nach-oben {
	background: rgb(72 57 44 / 0.9);
}

.aundh-kachel {
	border: 1px solid rgb(255 255 255 / 0.35);
	border-radius: var(--a2-radius-klein);
}

.aundh-kacheln > .aundh-kachel:nth-child(odd) {
	box-shadow: none;
}

.aundh-stimme,
.aundh-wissen__karte,
.aundh-kontakt__daten,
.aundh-werte > .aundh-wert,
.aundh-karte__flaeche,
.aundh-schritt,
.aundh-merkkasten,
.aundh-einstieg__kasten {
	border-radius: var(--a2-radius-klein);
}

.aundh-merkkasten,
.aundh-formular__meldung {
	border-left: 0;
}

.aundh-teiler .aundh-teiler__bild img,
.aundh-fokus .aundh-fokus__bild img,
.aundh-galerie > .wp-block-image img,
.aundh-projekt .wp-block-image img,
.aundh-wissen__karte .wp-block-image img,
.aundh-person .wp-block-image img {
	border-radius: var(--a2-radius-klein);
}

.aundh-formular input[type="text"],
.aundh-formular input[type="email"],
.aundh-formular input[type="tel"],
.aundh-formular select,
.aundh-formular textarea {
	border-radius: 0.5rem;
}

.aundh-stimme__sterne {
	background: var(--a2-braun);
	-webkit-mask: url(../icons/stern.svg) left center / 1.9rem 1.25rem repeat-x;
	mask: url(../icons/stern.svg) left center / 1.9rem 1.25rem repeat-x;
}

.aundh-schritt .aundh-schritt__zahl {
	color: var(--a2-braun);
	font-weight: 600;
	font-size: 4.5rem;
}

.aundh-punkt h3,
.aundh-wert h3,
.aundh-kontakt__daten h3,
.aundh-themen__titel,
.aundh-merkkasten__titel {
	letter-spacing: 0.04em;
}

.wp-block-button.aundh-knopf-gross > .wp-block-button__link {
	letter-spacing: 0.04em;
}

@media (max-width: 520px) {
	.aundh-schritt .aundh-schritt__zahl {
		font-size: 3rem;
	}
}

/* =====================================================================
   Einheitliche Abstände zwischen den Abschnitten (alle Seiten)
   ===================================================================== */

/* Jeder Abschnitt hat oben und unten denselben Abstand. */
.aundh-main :is(.a2-abschnitt, .aundh-abschnitt, .a2-abschluss, .aundh-abschluss) {
	padding-block: var(--a2-abstand);
}

.aundh-main .aundh-bildkasten {
	padding-block: 0 var(--a2-abstand);
}

/* Folgt ein Abschnitt mit derselben Hintergrundfarbe, entfällt sein Abstand oben.
   So liegt zwischen zwei Inhalten immer genau ein Abstand, nie zwei übereinander. */
.aundh-main :is(.a2-abschnitt, .aundh-abschnitt, .aundh-bildkasten):not(.a2-abschnitt--beige, .a2-abschnitt--braun, .aundh-abschnitt--beige, .aundh-abschnitt--braun, .aundh-abschnitt--hellbraun)
	+ :is(.a2-abschnitt, .aundh-abschnitt, .a2-abschluss):not(.a2-abschnitt--beige, .a2-abschnitt--braun, .aundh-abschnitt--beige, .aundh-abschnitt--braun, .aundh-abschnitt--hellbraun, .a2-abschluss--beige),
.aundh-main :is(.a2-abschnitt--beige, .aundh-abschnitt--beige, .a2-abschluss--beige)
	+ :is(.a2-abschnitt--beige, .aundh-abschnitt--beige, .a2-abschluss--beige, .aundh-abschluss),
.aundh-main :is(.a2-abschnitt--braun, .aundh-abschnitt--braun) + :is(.a2-abschnitt--braun, .aundh-abschnitt--braun),
.aundh-main .a2-abschnitt--eng-oben {
	padding-top: 0;
}

/* =====================================================================
   Seitenkopf der Unterseiten: Aufbau wie Küchenbau, nie Text im Bild
   ===================================================================== */

/* Der Textblock beginnt oben auf Höhe des Bildes. Weil der Obertitel überall zwei Zeilen hat,
   stehen Obertitel, Titel und Bild auf allen Unterseiten auf derselben Höhe. */
.aundh-main .a2-hero--seite .a2-hero__text {
	align-self: start;
	padding-block: 0;
}

/* Mindesthöhe so, dass auch der längste Text (Schreinerei) neben das Bild passt. So bestimmt nie der Text
   die Höhe, Bild und Leiste stehen auch auf niedrigen Bildschirmen auf allen Unterseiten gleich. */
@media (min-width: 900px) {
	.a2-hero--seite .a2-hero__innen {
		min-height: clamp(39rem, calc(100vh - var(--a2-kopf) - 12.5rem), 40rem);
	}
}

/* Obertitel mit zwei Zeilen: Der Strich steht auf Höhe der ersten Zeile. */
.aundh-main .a2-hero--seite .a2-zeile {
	align-items: flex-start;
	text-wrap: wrap;
}

.a2-hero--seite .a2-zeile::before {
	margin-top: 0.6em;
}

/* Kontakt: «Zum Formular» springt so weit, dass die feste Kopfzeile das Formular nicht verdeckt. */
#formular {
	scroll-margin-top: calc(var(--a2-kopf) + 1rem);
}

/* Bildausschnitt je Seite: Das Hauptmotiv bleibt auch im schmalen Ausschnitt sichtbar. */
.a2-hero--schreinerei .a2-hero__bild img { object-position: 50% 60%; }
.a2-hero--ueber-uns .a2-hero__bild img { object-position: 50% 30%; }
.a2-hero--kontakt .a2-hero__bild img { object-position: 0% 50%; }

/* =====================================================================
   Referenzen: Projektkarten zwei pro Reihe (vier Karten: zwei oben, zwei unten)
   ===================================================================== */

.aundh-main .aundh-projekte {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 599px) {
	.aundh-main .aundh-projekte {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =====================================================================
   Küchenbau: Logoband der Hersteller direkt vor der Fusszeile
   ===================================================================== */

.a2-logos {
	margin-block: 0;
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
	overflow: hidden;
	background: var(--a2-weiss);
	/* Die Logos tauchen an den Rändern weich auf und verschwinden weich. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.aundh-main .a2-logos > .a2-logos__band {
	display: flex;
	align-items: center;
	width: max-content;
	max-width: none;
	margin: 0;
}

/* Abstand als Rand je Logo statt als Lücke: So sind beide Hälften des Bands genau gleich breit
   und der Übergang am Ende der Runde ist nicht zu sehen. */
.aundh-main .a2-logos__band > .a2-logos__logo {
	flex: none;
	width: 11rem;
	height: 4rem;
	margin: 0 1.75rem;
	line-height: 0;
}

.a2-logos__logo a {
	display: block;
	height: 100%;
}

.a2-logos__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0.8;
}

.a2-logos__logo a:hover img,
.a2-logos__logo a:focus-visible img {
	opacity: 1;
}

.a2-logos__logo a:focus-visible {
	outline-offset: 4px;
}

/* Das Skript verdoppelt die Logos und setzt dann «ist-bereit»; erst dann läuft das Band.
   Ausnahme von der Regel «keine Animationen» oben. */
.a2-logos.ist-bereit .a2-logos__band {
	animation: a2-logos-lauf var(--a2-logos-dauer, 120s) linear infinite !important;
	will-change: transform;
}

.a2-logos.ist-bereit:hover .a2-logos__band,
.a2-logos.ist-bereit:focus-within .a2-logos__band {
	animation-play-state: paused !important;
}

@keyframes a2-logos-lauf {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@media (max-width: 599px) {
	.aundh-main .a2-logos__band > .a2-logos__logo {
		width: 8.75rem;
		height: 3.25rem;
		margin: 0 1.25rem;
	}
}

/* «Bewegung reduzieren» im Gerät: Das Band steht still und lässt sich von Hand seitlich schieben. */
@media (prefers-reduced-motion: reduce) {
	.a2-logos.ist-bereit .a2-logos__band {
		animation: none !important;
	}

	.a2-logos {
		overflow-x: auto;
	}

	.a2-logos__band > [aria-hidden="true"] {
		display: none;
	}
}

/* =====================================================================
   Gleicher Aufbau auf allen Seiten (16.10.2026): Schreinerei, Referenzen, Wissenswertes mit Unterseiten,
   Über uns und Kontakt nutzen die Bausteine von Küchenbau. Hier stehen nur die Ergänzungen dafür.
   ===================================================================== */

/* Abschluss mit zwei Absätzen (Wissenswertes): der zweite wie der erste. Die Schaltfläche steht rechts daneben. */
.aundh-main .a2-abschluss__kasten > p + p {
	max-width: 44rem;
	margin-top: 1rem;
	font-size: var(--wp--preset--font-size--gross);
}

.aundh-main .a2-abschluss__kasten > .wp-block-buttons {
	grid-row: 1 / span 6;
}

@media (max-width: 899px) {
	.aundh-main .a2-abschluss__kasten > .wp-block-buttons {
		grid-row: auto;
	}
}

/* Über uns, «Dafür stehen wir»: vier Felder wie die Punkte der Startseite, darunter der Leitsatz. */
.aundh-main .a2-punkte--vier {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.aundh-main .a2-punkte + p {
	margin-top: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 1199px) {
	.aundh-main .a2-punkte--vier {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.aundh-main .a2-punkte--vier {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Über uns, Team: an der Inhaltskante; zwei Personen nebeneinander bis zum Handy. */
.aundh-main .a2-abschnitt .aundh-team {
	max-width: var(--wp--style--global--content-size);
}

@media (min-width: 700px) and (max-width: 1023px) {
	.aundh-main .a2-abschnitt .aundh-team {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.aundh-main .a2-abschnitt .aundh-team > .aundh-person + .aundh-person {
		margin-top: 0;
	}
}

/* Über uns, Hersteller: alle sechs Logos in einer Reihe an der Inhaltskante. */
.aundh-main .a2-abschnitt .aundh-hersteller {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	max-width: var(--wp--style--global--content-size);
}

@media (max-width: 1023px) {
	.aundh-main .a2-abschnitt .aundh-hersteller {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.aundh-main .a2-abschnitt .aundh-hersteller {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Wissenswertes, Unterseiten: Links zu den anderen Themen linksbündig. */
.a2-abschnitt .aundh-themen ul {
	justify-content: flex-start;
}

/* Kontakt: «Route in Google Maps öffnen» mit Abstand zur Karte darüber. */
.aundh-main .a2-abschnitt .aundh-karte + .wp-block-buttons {
	margin-top: 2rem;
}

/* Über uns, Hersteller mit Katalog: Die ganze Kachel ist der Link (die Klickfläche des Links liegt über der Kachel).
   Beim Darüberfahren hebt sich die Kachel leicht mit weichem Schatten und braunem Rahmen. Elbau ohne Katalog bleibt ruhig.
   Ausnahme von der Regel «keine Animationen» oben: ein sanfter Übergang von 0,2 Sekunden. */
.aundh-main .a2-abschnitt .aundh-hersteller > * {
	position: relative;
}

.aundh-main .aundh-hersteller .wp-block-image a::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
}

.aundh-main .aundh-hersteller > .wp-block-image:has(a) {
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.aundh-main .aundh-hersteller > .wp-block-image:has(a):is(:hover, :focus-within) {
	border-color: var(--a2-braun);
	box-shadow: 0 0.875rem 1.75rem -0.875rem rgb(72 57 44 / 0.4);
	transform: translateY(-3px);
}

/* Das Logo selbst wird nicht blasser; die Kachel zeigt den Zustand. */
.aundh-main .aundh-hersteller .wp-block-image a:hover {
	opacity: 1;
}

.aundh-main .aundh-hersteller .wp-block-image a:focus-visible {
	outline: none;
}

.aundh-main .aundh-hersteller .wp-block-image a:focus-visible::after {
	outline: 2px solid var(--a2-braun);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.aundh-main .aundh-hersteller > .wp-block-image:has(a) {
		transition: none !important;
	}

	.aundh-main .aundh-hersteller > .wp-block-image:has(a):is(:hover, :focus-within) {
		transform: none;
	}
}

/* =====================================================================
   AGB: Seitenkopf ohne Bild und Rechtstext mit gut lesbarer Zeilenbreite (16.10.2026)
   ===================================================================== */

/* Seitenkopf wie die übrigen Unterseiten (Obertitel, Titel, Text), aber ohne Bild: eine Spalte, keine Mindesthöhe. */
.aundh-main .a2-hero--text .a2-hero__innen {
	grid-template-columns: minmax(0, 1fr);
	min-height: 0;
}

.aundh-main .a2-hero--text {
	padding-block: clamp(3rem, 6vw, 5rem);
}

.aundh-main .a2-hero--text .a2-hero__text > :not(h1) {
	max-width: 46rem;
}

@media (min-width: 900px) {
	.a2-hero--text h1 {
		font-size: clamp(2.25rem, 3.6vw, 3.25rem);
	}
}

/* Text an der Inhaltskante, Zeilen höchstens etwa 75 Zeichen lang. */
.aundh-main .a2-rechtstext__inhalt > * {
	max-width: 46rem;
	margin-block: 0;
}

.aundh-main .a2-rechtstext__inhalt > * + * {
	margin-top: 0.875rem;
}

.aundh-main .a2-rechtstext__inhalt > h2 {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	font-size: var(--wp--preset--font-size--titel-mittel);
}

.aundh-main .a2-rechtstext__inhalt > h2:first-child {
	margin-top: 0;
}

.aundh-main .a2-rechtstext__inhalt > h3 {
	margin-top: 1.75rem;
	font-size: 1.25rem;
}

.aundh-main .a2-rechtstext__inhalt > h2 + h3 {
	margin-top: 1.25rem;
}

.aundh-main .a2-rechtstext__inhalt > :is(h2, h3) + * {
	margin-top: 0.625rem;
}

.aundh-main .a2-rechtstext__inhalt > ul,
.aundh-main .a2-rechtstext__inhalt > ol {
	padding-left: 1.5rem;
}

.aundh-main .a2-rechtstext__inhalt li + li {
	margin-top: 0.375rem;
}

/* Listen mit ■ (vereinbart) und □ (Option): das Zeichen steht im Text, darum kein zusätzlicher Punkt. */
.aundh-main .a2-rechtstext__inhalt > ul.a2-liste-kaestchen {
	padding-left: 0;
	list-style: none;
}

.a2-liste-kaestchen li {
	padding-left: 1.5em;
	text-indent: -1.5em;
}

/* Zweiter Teil (Schreiner- und Innenausbauarbeiten): eigener Anfang mit Linie und grösserem Titel. */
.aundh-main .a2-rechtstext--teil .a2-rechtstext__inhalt {
	padding-top: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--a2-linie);
}

.aundh-main .a2-rechtstext__inhalt > .a2-rechtstext__teiltitel {
	font-size: var(--wp--preset--font-size--titel-2, clamp(1.875rem, 1.25rem + 2vw, 2.5rem));
}

.aundh-main .a2-rechtstext__inhalt > .a2-rechtstext__firma {
	margin-top: 0.5rem;
	color: var(--a2-braun);
	font-weight: 600;
}

.aundh-main .a2-rechtstext__inhalt > .a2-rechtstext__firma + * {
	margin-top: 2rem;
}

/* ---------- Hinweis Betriebsferien (inc/betriebsferien.php) ---------- */

.a2-hinweis {
	box-sizing: border-box;
	width: min(32rem, calc(100% - 2rem));
	max-height: calc(100% - 2rem);
	margin: auto;
	padding: 0;
	overflow: auto;
	color: var(--wp--preset--color--text);
	background: var(--a2-weiss);
	border: 1px solid var(--a2-linie);
	border-top: 6px solid var(--a2-braun);
	border-radius: var(--a2-radius);
	box-shadow: var(--a2-schatten);
}

.a2-hinweis::backdrop {
	background: rgb(43 34 26 / 0.45);
}

.a2-hinweis__innen {
	padding: clamp(1.5rem, 5vw, 2.25rem);
}

.a2-hinweis__titel {
	margin: 0 0 0.875rem;
	color: var(--a2-braun);
	font-family: var(--wp--preset--font-family--titel);
	font-size: var(--wp--preset--font-size--titel-mittel);
	font-weight: 600;
	line-height: 1.15;
}

.a2-hinweis__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--normal);
	line-height: 1.6;
}

.a2-hinweis__aktion {
	margin: 1.5rem 0 0;
}

.a2-hinweis__knopf {
	cursor: pointer;
}

@media (max-width: 480px) {
	.a2-hinweis__knopf {
		width: 100%;
	}
}