/* =========================================================================
   Engel Immobilien - Design-System
   Aufbau: 1 Tokens - 2 Basis - 3 Header - 4 Hero - 5 Sektionen - 6 Buttons
           7 Karten - 8 Medien - 9 Footer - 10 Motion - 11 Utilities
   ========================================================================= */

/* 0 - SCHRIFTEN =========================================================== */

/* Selbst gehostet statt ueber fonts.googleapis.com: Die Sicherheitsrichtlinie
   der Seite erlaubt nur eigene Quellen (style-src 'self', font-src 'self'),
   die Google-Einbindung wurde daher stets blockiert und die Seite lief in
   Systemschriften. Selbst ausgeliefert entfaellt zugleich der Abruf bei einem
   Drittanbieter. Beide Familien sind variabel - eine Datei je Zeichensatz
   deckt alle Schnitte ab. */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/jakarta-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/jakarta-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* 1 - TOKENS ============================================================== */

:root {
	/* Marke - abgeleitet aus dem Logo, fuer Kontrast auf Weiss nachjustiert. */
	--eng-red:        #E10E0E;
	--eng-red-deep:   #B00A0A;
	--eng-red-soft:   #FDECEC;

	/* Neutrale Skala */
	--eng-ink:         #101828;
	--eng-slate:       #475467;
	--eng-muted:       #667085;
	--eng-line:        #E4E7EC;
	--eng-surface:     #FFFFFF;
	--eng-surface-alt: #F7F8FA;
	--eng-navy:        #0F1B2D;

	/* Typografie - fluid, ohne Media Queries */
	--eng-font-head: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
	--eng-font-body: "Inter", system-ui, -apple-system, sans-serif;

	/* Obergrenze bewusst niedrig: deutsche Komposita wie
	   "Liegenschaftsverwaltung" brechen sonst mitten im Wort um. */
	--eng-fs-hero:  clamp(2.1rem, 1.2rem + 2.9vw, 3.5rem);
	--eng-fs-h2:    clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
	--eng-fs-h3:    clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
	--eng-fs-h4:    clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
	--eng-fs-lead:  clamp(1.05rem, 0.98rem + 0.45vw, 1.25rem);
	--eng-fs-body:  1.0625rem;
	--eng-fs-small: 0.9375rem;

	/* Rhythmus */
	--eng-section-y: clamp(4rem, 2rem + 7vw, 7.5rem);
	--eng-gap:       clamp(1.5rem, 1rem + 1.6vw, 2.5rem);

	/* Form */
	--eng-radius-sm: 10px;
	--eng-radius:    16px;

	--eng-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
	--eng-shadow:    0 4px 16px -4px rgba(16, 24, 40, .09), 0 2px 6px -2px rgba(16, 24, 40, .05);
	--eng-shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, .18);

	--eng-ease: cubic-bezier(.22, .61, .36, 1);
	--eng-dur:  .45s;

	--eng-header-h: 92px;
}

/* 2 - BASIS =============================================================== */

.engel-theme {
	font-family: var(--eng-font-body);
	font-size: var(--eng-fs-body);
	line-height: 1.7;
	color: var(--eng-slate);
	background: var(--eng-surface);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.engel-theme h1,
.engel-theme h2,
.engel-theme h3,
.engel-theme h4,
.engel-theme h5 {
	font-family: var(--eng-font-head);
	color: var(--eng-ink);
	letter-spacing: -.021em;
	line-height: 1.16;
	text-wrap: balance;
	/* Lange Komposita sauber trennen statt hart umbrechen. */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: auto;
}

.engel-theme h2 { font-size: var(--eng-fs-h2); font-weight: 700; }
.engel-theme h3 { font-size: var(--eng-fs-h3); font-weight: 700; line-height: 1.32; }
.engel-theme h4 { font-size: var(--eng-fs-h4); font-weight: 700; line-height: 1.38; }

.engel-theme p { text-wrap: pretty; }

/* Ankerziele nicht unter den Sticky-Header rutschen lassen. */
.engel-theme [id] { scroll-margin-top: calc(var(--eng-header-h) + 24px); }
html { scroll-behavior: smooth; }

/* Sichtbarer, markenkonformer Fokus - ersetzt den Browser-Default. */
.engel-theme a:focus-visible,
.engel-theme button:focus-visible,
.engel-theme input:focus-visible,
.engel-theme textarea:focus-visible,
.engel-theme select:focus-visible {
	outline: 3px solid var(--eng-red);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection { background: var(--eng-red); color: #fff; }

/* Astra setzt die Linkfarbe auf --ast-global-color-0. Dieser Palettenwert
   ist #fefeff - Textlinks im Inhalt waren damit unsichtbar (weiss auf
   weiss). Hier wird die Markenfarbe gesetzt; die Palette selbst bleibt
   unangetastet, damit die Korrektur jederzeit ruecknehmbar ist. */
.engel-theme .entry-content a:not(.wp-block-button__link):not(.wp-element-button):not(.ast-button) {
	color: var(--eng-red);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .2s var(--eng-ease);
}

.engel-theme .entry-content a:not(.wp-block-button__link):not(.wp-element-button):not(.ast-button):hover {
	color: var(--eng-red-deep);
}

/* Im Hero steht der Text auf dunklem Grund. */
.engel-front .wp-block-cover a:not(.wp-block-button__link) { color: #fff; }

/* Die Inhalte tragen teils fest verdrahtete Farben aus der Altfassung.
   Hier werden sie auf das Token-System zurueckgefuehrt. */
.engel-theme [style*="color:#f10e0e"],
.engel-theme [style*="color: #f10e0e"] { color: var(--eng-ink) !important; }

/* 3 - HEADER ============================================================== */

/* Astra legt den transparenten Header absolut ueber den Hero - er scrollt
   dadurch weg. Fest verankert bleibt die Navigation dauerhaft erreichbar,
   und der Zustandswechsel beim Scrollen wird ueberhaupt erst sichtbar. */
.engel-theme.ast-theme-transparent-header #masthead {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
}

/* Auf Seiten ohne transparenten Header steht die Kopfzeile im Fluss -
   sticky genuegt und verschiebt den Inhalt nicht. */
.engel-theme:not(.ast-theme-transparent-header) #masthead {
	position: sticky;
	top: 0;
	z-index: 99;
}

.engel-theme #masthead {
	transition: background-color var(--eng-dur) var(--eng-ease),
	            box-shadow var(--eng-dur) var(--eng-ease);
}

/* Die alignfull-Bloecke rechnen mit 100vw und damit die Breite der
   Bildlaufleiste mit ein - das erzeugt rund 8px seitlichen Ueberlauf.
   clip statt hidden, damit position:sticky weiter funktioniert. Und auf
   dem Wurzelelement statt auf body: sobald eine Achse nicht mehr visible
   ist, rechnet die andere auf auto - auf dem body wuerde daraus ein
   eigener Scroll-Container, und die Scroll-Ereignisse am window blieben
   aus (Header-Zustand, Scrollspy, Zurueck-nach-oben). */
html { overflow-x: clip; }

/* Astra faerbt .ast-primary-header-bar mit --ast-global-color-0. Seit dieser
   Palettenwert die Markenfarbe traegt, wird der Hintergrund hier ausdruecklich
   gesetzt - sonst entstuende ein roter Header-Balken, sobald der gescrollte
   Zustand nicht greift. */
.engel-theme .ast-primary-header-bar,
.engel-theme:not(.engel-scrolled) .ast-primary-header-bar {
	background-color: transparent;
	transition: padding var(--eng-dur) var(--eng-ease),
	            background-color var(--eng-dur) var(--eng-ease);
}

/* Aus demselben Grund: der Rand der Untermenues wuerde sonst rot. */
.engel-theme .ast-builder-menu-1 .sub-menu,
.engel-theme .ast-builder-menu-1 .inline-on-mobile .sub-menu {
	border-color: var(--eng-line);
}

/* Zustand nach dem Scrollen: Milchglas, Schatten, kompakter. */
.engel-scrolled #masthead .ast-primary-header-bar,
.engel-scrolled #masthead .site-primary-header-wrap {
	background: rgba(255, 255, 255, .88) !important;
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	box-shadow: 0 1px 0 var(--eng-line), var(--eng-shadow-sm);
}

.engel-scrolled #masthead .ast-primary-header-bar { padding-block: .35rem; }

.engel-theme .custom-logo-link img {
	transform-origin: left center;
	transition: transform var(--eng-dur) var(--eng-ease);
}

.engel-scrolled #masthead .custom-logo-link img { transform: scale(.88); }

/* Navigation: Unterstreichung waechst aus der Mitte. */
.engel-theme .main-header-menu > .menu-item > .menu-link {
	position: relative;
	font-family: var(--eng-font-head);
	font-weight: 600;
	font-size: .975rem;
	letter-spacing: -.01em;
}

.engel-theme .main-header-menu > .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 50%;
	/* Der Menuelink hat keine Innenabstaende - die Linie muss unter das
	   Textfeld gelegt werden, sonst wirkt sie als Durchstreichung. */
	bottom: -7px;
	width: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--eng-red);
	transform: translateX(-50%);
	transition: width .3s var(--eng-ease);
}

.engel-theme .main-header-menu > .menu-item:hover > .menu-link::after,
.engel-theme .main-header-menu > .menu-item.engel-active > .menu-link::after {
	width: calc(100% - 2.2em);
}

.engel-theme .main-header-menu > .menu-item.engel-active > .menu-link { color: var(--eng-red); }

/* Der transparente Header steht ueber einem dunklen Hero - hell halten. */
.engel-theme.ast-theme-transparent-header:not(.engel-scrolled) .main-header-menu > .menu-item > .menu-link {
	color: #fff;
}

/* Menue auf hellem Grund - also im gescrollten Zustand der Startseite und
   auf allen Seiten ohne transparenten Header.
   Astra faerbt Hover, aktuellen Menuepunkt und Vorfahren mit
   --ast-global-color-0. Dieser Palettenwert ist #fefeff, praktisch Weiss:
   auf dem hellen Milchglas-Header ergibt das weissen Text auf weissem
   Grund - dauerhaft beim aktuellen Punkt, beim Ueberfahren bei jedem.
   Astras Regeln liegen bei vier Klassen, diese hier bei sechs. */
.engel-theme:is(.engel-scrolled, :not(.ast-theme-transparent-header)) .ast-builder-menu .main-header-menu .menu-item > .menu-link,
.engel-theme:is(.engel-scrolled, :not(.ast-theme-transparent-header)) .main-header-menu .menu-item > .menu-link {
	color: var(--eng-ink);
}

.engel-theme:is(.engel-scrolled, :not(.ast-theme-transparent-header)) .ast-builder-menu .main-header-menu .menu-item:hover > .menu-link,
.engel-theme:is(.engel-scrolled, :not(.ast-theme-transparent-header)) .ast-builder-menu .main-header-menu .current-menu-item > .menu-link,
.engel-theme:is(.engel-scrolled, :not(.ast-theme-transparent-header)) .ast-builder-menu .main-header-menu .current-menu-ancestor > .menu-link,
.engel-theme:is(.engel-scrolled, :not(.ast-theme-transparent-header)) .main-header-menu .menu-item:hover > .menu-link,
.engel-theme:is(.engel-scrolled, :not(.ast-theme-transparent-header)) .main-header-menu .current-menu-item > .menu-link,
.engel-theme:is(.engel-scrolled, :not(.ast-theme-transparent-header)) .main-header-menu .menu-item.engel-active > .menu-link {
	color: var(--eng-red);
}

/* Das mobile Menuesymbol ist weiss - ueber dem Hero richtig, auf dem
   hellen Header unsichtbar. */
.engel-theme:is(.engel-scrolled, :not(.ast-theme-transparent-header)) .ast-mobile-menu-trigger-minimal,
.engel-theme:is(.engel-scrolled, :not(.ast-theme-transparent-header)) .ast-mobile-menu-trigger-fill,
.engel-theme:is(.engel-scrolled, :not(.ast-theme-transparent-header)) .ast-mobile-menu-trigger-outline,
.engel-theme:is(.engel-scrolled, :not(.ast-theme-transparent-header)) .menu-toggle {
	color: var(--eng-ink);
}

/* 4 - HERO ================================================================ */

.engel-front .wp-block-cover:first-child {
	min-height: min(88vh, 780px) !important;
	align-items: center;
	isolation: isolate;
}

/* Flacher 60%-Dim wird durch einen gerichteten Verlauf ersetzt:
   links dunkel fuer die Lesbarkeit, rechts offen fuer das Bild. */
.engel-front .wp-block-cover:first-child .wp-block-cover__background {
	background: linear-gradient(100deg,
		rgba(15, 27, 45, .93) 0%,
		rgba(15, 27, 45, .78) 42%,
		rgba(15, 27, 45, .42) 72%,
		rgba(15, 27, 45, .28) 100%) !important;
	opacity: 1 !important;
}

/* Langsamer Ken-Burns-Zoom gibt dem statischen Bild Leben. */
.engel-front .wp-block-cover:first-child .wp-block-cover__image-background {
	animation: engel-kenburns 22s var(--eng-ease) forwards;
}

@keyframes engel-kenburns {
	from { transform: scale(1.09); }
	to   { transform: scale(1); }
}

.engel-front .wp-block-cover:first-child h1 {
	font-size: var(--eng-fs-hero) !important;
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.035em;
	color: #fff !important;
	margin-bottom: .35em;
}

.engel-front .wp-block-cover:first-child h2 {
	font-size: var(--eng-fs-lead) !important;
	font-weight: 600;
	line-height: 1.4;
	color: rgba(255, 255, 255, .93) !important;
	margin-bottom: .8em;
}

.engel-front .wp-block-cover:first-child p {
	color: rgba(255, 255, 255, .78) !important;
	font-size: 1.0625rem;
	max-width: 54ch;
}

/* Die Bildmarke im Hero: aus dem freischwebenden Kasten wird eine Karte. */
.engel-front .wp-block-cover:first-child .wp-block-media-text__media img {
	border-radius: var(--eng-radius);
	box-shadow: var(--eng-shadow-lg);
	background: #fff;
	padding: 1.25rem 1.5rem;
}

/* 5 - SEKTIONEN =========================================================== */

/* Die Altfassung setzt harte Inline-Abstaende (144px oben, 0px unten). Sie
   werden pauschal auf den fluiden Rhythmus gezogen - ein Abgleich ueber
   Attributselektoren waere unzuverlaessig, weil der Browser die
   Schreibweise des style-Attributs normalisiert. */
.engel-front .entry-content > .wp-block-group.alignfull {
	padding-block: var(--eng-section-y) !important;
}

.engel-front .entry-content .wp-block-columns { margin-top: var(--eng-gap); }

/* "Objekte" traegt ein hartes Grau aus der Altfassung. Weiss, damit der
   Wechsel zur getoenten Sektion "Warum wir" direkt darunter erhalten bleibt. */
.engel-front #reviews { background-color: var(--eng-surface) !important; }

/* Sektionsueberschriften einheitlich: linksbuendig mit Akzentstrich.
   Das constrained-Layout von Gutenberg zentriert Kinder mit max-width -
   deshalb muessen die Aussenabstaende ausdruecklich zurueckgesetzt werden. */
.engel-front .entry-content h2.wp-block-heading {
	position: relative;
	max-width: 22ch;
	margin-inline: 0 auto !important;
	padding-top: 1.25rem;
	margin-bottom: clamp(2rem, 1rem + 2.5vw, 3.25rem) !important;
}

.engel-front .entry-content h2.wp-block-heading::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 4px;
	border-radius: 4px;
	background: var(--eng-red);
}

/* Der Hero traegt eine eigene Typografie und keinen Akzentstrich. */
.engel-front .wp-block-cover h2.wp-block-heading {
	max-width: none;
	padding-top: 0;
	margin-bottom: .8em !important;
}

.engel-front .wp-block-cover h2.wp-block-heading::before { content: none; }

/* Wechselnde Flaechen geben der Seite Takt. */
.engel-front #services,
.engel-front #whyus { background: var(--eng-surface-alt); }

/* 6 - BUTTONS ============================================================= */

.engel-theme .wp-block-button__link,
.engel-theme .ast-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .55em;
	padding: .78em 1.6em;
	border: 0;
	border-radius: 999px;
	font-family: var(--eng-font-head);
	font-weight: 600;
	font-size: .95rem;
	letter-spacing: -.005em;
	background: var(--eng-red);
	color: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
	transition: background-color .28s var(--eng-ease),
	            transform .28s var(--eng-ease),
	            box-shadow .28s var(--eng-ease);
}

.engel-theme .wp-block-button__link:hover,
.engel-theme .ast-button:hover {
	background: var(--eng-red-deep);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -8px rgba(225, 14, 14, .5);
}

.engel-theme .wp-block-button__link:active { transform: translateY(0); }

/* Pfeil, der beim Hover mitgeht - signalisiert Weiterfuehrung. */
.engel-theme .wp-block-button__link::after {
	content: "\2192";
	font-size: 1.05em;
	line-height: 1;
	transition: transform .28s var(--eng-ease);
}

.engel-theme .wp-block-button__link:hover::after { transform: translateX(4px); }

/* 7 - KARTEN ============================================================== */

/* Die Dienstleistungs- und Modulspalten werden zu echten Karten. */
.engel-front #services .wp-block-column,
.engel-front .engel-cards .wp-block-column {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.25rem, .9rem + .8vw, 1.75rem);
	border: 1px solid var(--eng-line);
	border-radius: var(--eng-radius);
	background: var(--eng-surface);
	box-shadow: var(--eng-shadow-sm);
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--eng-dur) var(--eng-ease),
	            box-shadow var(--eng-dur) var(--eng-ease),
	            border-color var(--eng-dur) var(--eng-ease);
}

/* Roter Balken, der beim Hover von links einlaeuft. */
.engel-front #services .wp-block-column::before,
.engel-front .engel-cards .wp-block-column::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	background: var(--eng-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--eng-dur) var(--eng-ease);
}

.engel-front #services .wp-block-column:hover,
.engel-front .engel-cards .wp-block-column:hover {
	transform: translateY(-6px);
	border-color: transparent;
	box-shadow: var(--eng-shadow-lg);
}

.engel-front #services .wp-block-column:hover::before,
.engel-front .engel-cards .wp-block-column:hover::before { transform: scaleX(1); }

/* Das Symbol fuellt die Flaeche selbst aus - ohne getoente Kachel dahinter.
   Der blaugraue Grund steckt allerdings in den Bilddateien selbst (deckend
   rgb(169,181,190) bis in die Ecken) und traegt dort den langen Schlagschatten
   des Symbols. Per CSS ist er nicht zu entfernen; die abgerundeten Ecken
   lassen ihn wenigstens als gewollte Flaeche wirken. Sauber wird es erst mit
   ausgetauschten Symbolen. */
.engel-front #services .wp-block-image {
	width: 60px;
	height: 60px;
	margin: 0 0 1.25rem !important;
	border-radius: var(--eng-radius-sm);
	overflow: hidden;
}

.engel-front #services .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform var(--eng-dur) var(--eng-ease);
}

.engel-front #services .wp-block-column:hover .wp-block-image img { transform: scale(1.12); }

.engel-front #services .wp-block-column p {
	font-size: var(--eng-fs-small);
	color: var(--eng-muted);
}

/* Die inneren Gruppen sind vertikale Flex-Container mit align-items:flex-start.
   Ohne stretch bemessen sich Ueberschrift und Text nach ihrer Max-Content-Breite
   und laufen aus der Karte heraus. */
.engel-front .wp-block-column .wp-block-group.is-layout-flex.is-vertical {
	align-items: stretch;
	min-width: 0;
	width: 100%;
}

.engel-front .wp-block-column,
.engel-front .wp-block-column > *,
.engel-front .wp-block-column .wp-block-group > * { min-width: 0; }

/* Vier Karten auf 1200px lassen je rund 200px Textbreite. Die langen
   Komposita tragen im Inhalt weiche Trennzeichen (­) - darauf ist
   Verlass, waehrend "hyphens: auto" ein deutsches Trennwoerterbuch im
   Browser voraussetzt. break-word bleibt als Rueckfallebene. */
.engel-front #services .wp-block-column h3,
.engel-front #services .wp-block-column p {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* In der Karte darf die Ueberschrift kleiner ausfallen als im Fliesstext. */
.engel-front #services .wp-block-column h3 {
	font-size: clamp(1.05rem, .95rem + .35vw, 1.2rem);
	margin-top: 0 !important;
	margin-bottom: .5rem;
}

/* Der Button einer Karte sitzt immer buendig am unteren Rand. */
.engel-front #services .wp-block-column .wp-block-buttons {
	margin-top: auto;
	padding-top: 1.25rem;
}

/* Sekundaerer Kartenbutton: dezenter Textlink mit Pfeil. */
.engel-front #services .wp-block-button__link {
	padding: .35em 0;
	background: transparent;
	color: var(--eng-red);
	box-shadow: none;
}

.engel-front #services .wp-block-button__link:hover {
	background: transparent;
	color: var(--eng-red-deep);
	transform: none;
	box-shadow: none;
}

/* 7b - KONTAKT UND FORMULAR =============================================== */

/* Die Angaben links stehen als getoente Karte neben dem Formular. */
.engel-front #kontakt .engel-kontakt > .wp-block-column:first-child {
	align-self: start;
	padding: clamp(1.5rem, 1rem + 1vw, 2rem);
	border: 1px solid var(--eng-line);
	border-radius: var(--eng-radius);
	background: var(--eng-surface-alt);
}

.engel-front #kontakt .engel-kontakt h3 {
	margin-top: 1.5rem;
	margin-bottom: .35rem;
}

/* Eigenes Kontaktformular (inc/kontaktformular.php) - kein Plugin, kein
   Fremdskript, keine Speicherung. */

.engel-theme .engel-form__field { margin: 0 0 1.1rem; }

.engel-theme .engel-form label {
	display: block;
	margin-bottom: .35rem;
	font-family: var(--eng-font-head);
	font-weight: 600;
	font-size: .9375rem;
	color: var(--eng-ink);
}

.engel-theme .engel-form input[type="text"],
.engel-theme .engel-form input[type="email"],
.engel-theme .engel-form textarea {
	width: 100%;
	padding: .72em .9em;
	border: 1px solid var(--eng-line);
	border-radius: var(--eng-radius-sm);
	background: var(--eng-surface);
	font-family: var(--eng-font-body);
	font-size: 1rem;
	color: var(--eng-ink);
	transition: border-color .2s var(--eng-ease), box-shadow .2s var(--eng-ease);
}

.engel-theme .engel-form textarea { resize: vertical; min-height: 8rem; }

.engel-theme .engel-form input:focus,
.engel-theme .engel-form textarea:focus {
	border-color: var(--eng-red);
	box-shadow: 0 0 0 3px var(--eng-red-soft);
	outline: none;
}

/* :user-invalid statt :invalid - letzteres faerbte jedes leere Pflichtfeld
   schon beim Laden rot. :user-invalid greift erst, nachdem die Person das
   Feld bearbeitet oder abgeschickt hat. Browser ohne Unterstuetzung zeigen
   schlicht keine Faerbung; die Pruefung selbst laeuft ohnehin serverseitig. */
.engel-theme .engel-form input:user-invalid,
.engel-theme .engel-form textarea:user-invalid {
	border-color: var(--eng-red-deep);
}

/* Honigtopf: fuer Menschen unsichtbar, aber nicht per display:none, weil
   manche Bots genau darauf pruefen. */
.engel-theme .engel-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.engel-theme .engel-form__hinweis {
	margin: 0 0 1.25rem;
	font-size: var(--eng-fs-small);
	color: var(--eng-muted);
}

.engel-theme .engel-form__actions { margin: 0; }

.engel-theme .engel-form__submit {
	display: inline-flex;
	align-items: center;
	padding: .78em 1.8em;
	border: 0;
	border-radius: 999px;
	background: var(--eng-red);
	color: #fff;
	font-family: var(--eng-font-head);
	font-weight: 600;
	font-size: .95rem;
	cursor: pointer;
	transition: background-color .28s var(--eng-ease),
	            transform .28s var(--eng-ease),
	            box-shadow .28s var(--eng-ease);
}

.engel-theme .engel-form__submit:hover:not(:disabled) {
	background: var(--eng-red-deep);
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -8px rgba(225, 14, 14, .5);
}

.engel-theme .engel-form__submit:disabled { opacity: .6; cursor: progress; }

.engel-theme .engel-form__status {
	margin: 1rem 0 0;
	padding: .8em 1em;
	border-radius: var(--eng-radius-sm);
	font-size: var(--eng-fs-small);
}

.engel-theme .engel-form__status[hidden] { display: none; }

.engel-theme .engel-form__status--ok {
	background: #ECFDF3;
	border: 1px solid #ABEFC6;
	color: #085D3A;
}

.engel-theme .engel-form__status--fehler {
	background: var(--eng-red-soft);
	border: 1px solid #FCCFCF;
	color: var(--eng-red-deep);
}

@media (max-width: 921px) {
	.engel-front #kontakt .engel-kontakt > .wp-block-column:first-child {
		margin-bottom: var(--eng-gap);
	}
}

/* 8 - MEDIEN ============================================================== */

.engel-theme .wp-block-media-text__media img,
.engel-theme .entry-content .wp-block-image img { border-radius: var(--eng-radius); }

/* 9 - FOOTER ============================================================== */

/* Achtung: die sichtbare Flaeche ist nicht das <footer>-Element, sondern
   .site-below-footer-wrap aus Astras Footer-Builder. Dieser Wrapper bringt
   einen eigenen hellen Grauton (#eee) mit und verdeckt jede Farbe, die auf
   dem aeusseren Element gesetzt wird. Fruehere weisse Linkfarben lagen
   dadurch auf Hellgrau - rund 1,1:1 Kontrast und praktisch unlesbar.
   Die Textfarben richten sich deshalb nach dem hellen Grund. */
.engel-theme .site-footer,
.engel-theme .site-below-footer-wrap,
.engel-theme .ast-small-footer {
	background-color: var(--eng-surface-alt);
	border-top: 1px solid var(--eng-line);
}

.engel-theme .site-footer,
.engel-theme .site-footer .ast-footer-copyright,
.engel-theme .site-footer .ast-footer-copyright p {
	color: var(--eng-slate);
	font-size: var(--eng-fs-small);
}

.engel-theme .site-footer h2,
.engel-theme .site-footer h3,
.engel-theme .site-footer h4 { color: var(--eng-ink); }

/* Das tiefere Rot statt der hellen Markenfarbe: bei 15px Schriftgroesse
   waeren die 4,6:1 des hellen Rots zu knapp an der Grenze von 4,5.
   Das tiefe Rot kommt auf rund 7:1. Die Unterstreichung macht die
   Verweise zusaetzlich als solche kenntlich. */
.engel-theme .site-footer a {
	color: var(--eng-red-deep);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .2s var(--eng-ease);
}

.engel-theme .site-footer a:hover,
.engel-theme .site-footer a:focus-visible { color: var(--eng-red); }

/* 10 - MOTION ============================================================= */

/* Reveal beim Scrollen. Nur aktiv, wenn JS laeuft - sonst bleibt alles sichtbar. */
.engel-js .engel-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s var(--eng-ease), transform .7s var(--eng-ease);
	transition-delay: var(--engel-delay, 0ms);
	/* Kein will-change: die Reveal-Elemente sind zahlreich und wuerden sonst
	   dauerhaft je eine eigene Compositing-Ebene belegen. */
}

.engel-js .engel-reveal.engel-in {
	opacity: 1;
	transform: none;
}

/* 11 - UTILITIES ========================================================== */

/* Zurueck nach oben: Astras eigener Button (#ast-scroll-top), an das
   Design angepasst. Ein zweiter, eigener Button lag frueher deckungsgleich
   darueber - Astra bringt Sichtbarkeitslogik und Customizer-Option bereits
   mit, daher bleibt dieser hier der einzige. */
/* Kein display-Wert hier: Astra schaltet den Button per Inline-Stil zwischen
   "none" und "block" um - ein eigener Wert wuerde entweder ueberschrieben
   oder wuerde das Ausblenden verhindern. Zentriert wird daher ueber
   line-height statt ueber Grid. */
.engel-theme #ast-scroll-top {
	width: 46px;
	height: 46px;
	padding: 0;
	line-height: 46px;
	text-align: center;
	border-radius: 50%;
	background: var(--eng-navy);
	color: #fff;
	box-shadow: var(--eng-shadow);
	transition: background-color .25s var(--eng-ease),
	            transform .25s var(--eng-ease);
}

.engel-theme #ast-scroll-top:hover {
	background: var(--eng-red);
	transform: translateY(-3px);
}

.engel-theme #ast-scroll-top .ast-icon {
	display: inline-block;
	vertical-align: middle;
	line-height: 0;
}

/* Nur die Farbe wird gesetzt. Groesse und Lage regelt Astra selbst ueber
   #ast-scroll-top .ast-icon.icon-arrow svg - und dessen transform enthaelt
   ein rotate(180deg), weil das Pfeil-SVG im Original nach unten zeigt.
   Ein eigenes transform hier wuerde die Drehung ersetzen und den Pfeil
   umkehren. */
.engel-theme #ast-scroll-top svg { fill: currentColor; }

/* Lightbox - vom Skript zur Laufzeit eingehaengt. */
.engel-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(15, 27, 45, .92);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: engel-fade .25s var(--eng-ease);
	cursor: zoom-out;
}

.engel-lightbox img {
	max-width: min(1100px, 100%);
	max-height: 88vh;
	border-radius: var(--eng-radius);
	box-shadow: var(--eng-shadow-lg);
	animation: engel-pop .3s var(--eng-ease);
}

.engel-lightbox__close {
	position: absolute;
	top: clamp(.75rem, 2vw, 1.5rem);
	right: clamp(.75rem, 2vw, 1.5rem);
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s var(--eng-ease);
}

.engel-lightbox__close:hover { background: rgba(255, 255, 255, .28); }

@keyframes engel-fade { from { opacity: 0; } to { opacity: 1; } }

@keyframes engel-pop {
	from { opacity: 0; transform: scale(.96); }
	to   { opacity: 1; transform: none; }
}

/* Bewegungsreduktion respektieren - Pflicht, nicht Kuer. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	.engel-js .engel-reveal { opacity: 1; transform: none; transition: none; }

	.engel-front .wp-block-cover:first-child .wp-block-cover__image-background { animation: none; }

	.engel-theme *,
	.engel-theme *::before,
	.engel-theme *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* 12 - INHALTSSEITEN ====================================================== */

/* Astra setzt Beitragstitel auf 20px. Auf einer Inhaltsseite ist die
   Hauptueberschrift damit kleiner als jede Zwischenueberschrift - auf dem
   Impressum stand ein 32px-Titel ueber 48px-Zwischentiteln. Hier wird die
   Hierarchie wiederhergestellt: Titel gross, h2 deutlich darunter. */
.engel-theme:not(.engel-front) .entry-title {
	position: relative;
	padding-top: 1.25rem;
	margin-bottom: .8em;
	font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem) !important;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.03em;
}

.engel-theme:not(.engel-front) .entry-title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 4px;
	border-radius: 4px;
	background: var(--eng-red);
}

/* Fliesstext braucht eine lesbare Zeilenlaenge; 1200px sind rund doppelt
   so breit wie sinnvoll. Breite Bloecke bleiben ausgenommen. */
.engel-theme:not(.engel-front) .entry-header,
.engel-theme:not(.engel-front) .entry-content > *:not(.alignfull):not(.alignwide) {
	/* 56ch entsprechen bei dieser Schriftgroesse rund 70 Zeichen je Zeile. */
	max-width: 56ch;
	/* Ohne diese Zeile zentriert das Layout jedes Element einzeln. Da sich
	   die ch-Breite nach der jeweiligen Schriftgroesse richtet, ergaeben
	   sich fuer Titel, Zwischentitel und Fliesstext drei verschiedene
	   Einzuege. Linksbuendig steht alles auf einer Kante. */
	margin-inline-start: 0;
	margin-inline-end: auto;
}

.engel-theme:not(.engel-front) .entry-content h2 {
	margin-top: 2.4em;
	margin-bottom: .55em;
	padding-bottom: .35em;
	border-bottom: 1px solid var(--eng-line);
	font-size: clamp(1.3rem, 1.15rem + .55vw, 1.55rem);
	font-weight: 700;
	letter-spacing: -.015em;
}

.engel-theme:not(.engel-front) .entry-content > h2:first-child { margin-top: 0; }

.engel-theme:not(.engel-front) .entry-content h3 {
	margin-top: 2em;
	margin-bottom: .4em;
	font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem);
}

.engel-theme:not(.engel-front) .entry-content p { margin-bottom: 1.15em; }

.engel-theme:not(.engel-front) .entry-content ul,
.engel-theme:not(.engel-front) .entry-content ol {
	margin-bottom: 1.15em;
	padding-left: 1.35em;
}

.engel-theme:not(.engel-front) .entry-content li { margin-bottom: .4em; }

/* 13 - RESPONSIVE ========================================================= */

@media (max-width: 921px) {
	:root { --eng-header-h: 72px; }

	.engel-front .wp-block-cover:first-child { min-height: min(82vh, 640px) !important; }

	.engel-front .wp-block-cover:first-child .wp-block-cover__background {
		background: linear-gradient(180deg,
			rgba(15, 27, 45, .82) 0%,
			rgba(15, 27, 45, .9) 100%) !important;
	}

	/* Auf Mobil wirkt die Bildmarke im Hero doppelt - das Logo steht bereits oben. */
	.engel-front .wp-block-cover:first-child .wp-block-media-text__media { display: none; }

	/* Das aufgeklappte Menue darf den festen Header nicht ueber den
	   Bildschirmrand hinauswachsen lassen. */
	.engel-theme.ast-theme-transparent-header #masthead {
		max-height: 100dvh;
		overflow-y: auto;
	}

	.engel-front #services .wp-block-column,
	.engel-front .engel-cards .wp-block-column { padding: 1.5rem; }
}

@media (max-width: 544px) {
	.engel-theme { font-size: 1rem; }
	.engel-front .wp-block-group.alignfull > .wp-block-heading:first-child { max-width: none; }
}