/* ==========================================================================
   Die Holzwürmer – Projekt-CSS
   Wird über functions.php mit Priorität 100 geladen, steht also nach Divis
   generiertem CSS in der Kaskade.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design-Tokens
   Referenz für Custom CSS. Die Werte für den Visual Builder werden zusätzlich
   als Divi-5-Design-Variablen angelegt – beides muss übereinstimmen.
   Quelle: src/index.css des Lovable-Projekts, HSL nach Hex umgerechnet.
   -------------------------------------------------------------------------- */
:root {
	/* Flächen */
	--hw-creme:      #F6F3EE; /* Standard-Seitenhintergrund */
	--hw-offwhite:   #FAF8F4; /* Karten, abgesetzte Flächen */
	--hw-sand:       #E8E2D9; /* Ruhige Trennflächen, Tags */

	/* Text und Dunkelflächen – ein einziger Dunkelton (Variante A) */
	--hw-dunkel:     #201C18;

	/* Marke */
	--hw-gold:       #D2A14B; /* Primärer Akzent, Buttons, Icons */
	--hw-holzbraun:  #6C4123; /* Überschriften-Akzent, Links */
	--hw-blaugrau:   #5F7986; /* Küsten-Akzent, sparsam */
	--hw-gruen:      #345F1D; /* Logo-Grün, aus der Logodatei gemessen */

	/* Transparenzen */
	--hw-creme-90:   rgba(246, 243, 238, 0.90);
	--hw-creme-70:   rgba(246, 243, 238, 0.70);
	--hw-creme-12:   rgba(246, 243, 238, 0.12);
	--hw-braun-10:   rgba(108, 65, 35, 0.10);
	--hw-blaugrau-15:rgba(95, 121, 134, 0.15);

	/* Radien */
	--hw-radius-karte:  16px;
	--hw-radius-feld:   12px;
	--hw-radius-pill:   9999px;

	/* Schatten */
	--hw-shadow-soft:     0 2px 12px -4px rgba(32, 28, 24, 0.08);
	--hw-shadow-card:     0 4px 20px -6px rgba(32, 28, 24, 0.12);
	--hw-shadow-warm:     0 10px 40px -12px rgba(108, 65, 35, 0.25);
	--hw-shadow-elevated: 0 20px 60px -20px rgba(108, 65, 35, 0.30);

	/* Abstände */
	--hw-section-y:        112px;
	--hw-section-y-mobil:  80px;
	--hw-section-x:        24px;
	--hw-content-text:     768px;
	--hw-content-raster:   1152px;
}

/* --------------------------------------------------------------------------
   2. Schrift
   Inter wird lokal geladen (assets/css/inter.css) und ist über den Filter
   et_websafe_fonts in der Schriftauswahl des Builders als Familie wählbar.
   Diese Regeln setzen sie zusätzlich als Grundschrift, damit auch Bereiche
   außerhalb des Builders – Formulare, Kommentare, Plugin-Ausgaben – einheitlich
   aussehen. Modul-Einstellungen im Builder überschreiben das.
   -------------------------------------------------------------------------- */
:root {
	--hw-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/*
  Divis eigene Schrift-Variablen auf Inter umbiegen.
  Divi 5 speist Überschriften und Fließtext aus diesen beiden Variablen. Im
  Theme Customizer stehen dort noch die Namen aus Use Any Font
  ('inter-semi-bold', 'inter'), die es nach dem Deaktivieren nicht mehr gibt.

  Der doppelte Selektor ist Absicht und kein Tippfehler: Divi gibt seinen
  :root-Block als Inline-Style AUS, und zwar nach diesem Stylesheet. Bei
  gleicher Spezifität gewinnt die spätere Regel – also braucht es hier eine
  höhere. :root:root meint dasselbe Element, zählt aber doppelt.
*/
:root:root {
	--et_global_heading_font: 'Inter';
	--et_global_body_font: 'Inter';
}

body,
input,
textarea,
select,
button,
.et_pb_module,
h1, h2, h3, h4, h5, h6 {
	font-family: var(--hw-font);
}

/* Typo-Skala laut Spec. Divi-Modul-Einstellungen gehen vor. */
body {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}

h1 { font-size: 36px; font-weight: 600; line-height: 40px; letter-spacing: -0.02em; }
h2 { font-size: 48px; font-weight: 600; line-height: 48px; letter-spacing: -0.02em; }
h3 { font-size: 24px; font-weight: 600; line-height: 32px; }
h4 { font-size: 20px; font-weight: 600; line-height: 28px; }

@media (max-width: 767px) {
	h1 { font-size: 30px; line-height: 36px; }
	h2 { font-size: 32px; line-height: 38px; }
}

/* --------------------------------------------------------------------------
   3. Grundlagen
   -------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

/* Sticky Header darf Ankerziele nicht verdecken. */
:target,
[id] {
	scroll-margin-top: 96px;
}

body {
	background-color: var(--hw-creme);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--hw-gold);
	color: var(--hw-dunkel);
}

/* Sichtbarer Fokus – Divi entfernt ihn an einigen Stellen. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.et_pb_button:focus-visible {
	outline: 2px solid var(--hw-gold);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. Hilfsklassen für den Visual Builder
   Als CSS-Klasse am Modul oder an der Sektion vergeben.
   -------------------------------------------------------------------------- */

/* Dunkle Sektion inklusive Textfarben. */
.hw-section-dark,
.hw-section-dark h1,
.hw-section-dark h2,
.hw-section-dark h3,
.hw-section-dark h4 {
	color: var(--hw-creme);
}

.hw-section-dark {
	background-color: var(--hw-dunkel);
}

.hw-section-dark p,
.hw-section-dark li {
	color: var(--hw-creme-90);
}

/* Karte mit weichem Schatten und Hover-Anhebung. */
.hw-card {
	background-color: var(--hw-offwhite);
	border-radius: var(--hw-radius-karte);
	box-shadow: var(--hw-shadow-soft);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hw-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--hw-shadow-warm);
}

/* Pill-Button in Gold. */
.hw-btn-gold.et_pb_button {
	background-color: var(--hw-gold) !important;
	border: 0 !important;
	border-radius: var(--hw-radius-pill) !important;
	color: var(--hw-dunkel) !important;
	padding: 16px 32px !important;
}

/* Umrissener Button auf dunklem Grund. */
.hw-btn-ghost.et_pb_button {
	background-color: transparent !important;
	border: 2px solid rgba(246, 243, 238, 0.5) !important;
	border-radius: var(--hw-radius-pill) !important;
	color: var(--hw-creme) !important;
	padding: 16px 32px !important;
}

/* Bilder in Rastern gleich hoch halten. */
.hw-media-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--hw-radius-karte);
}

/* --------------------------------------------------------------------------
   5. Theme-Builder-Header
   Divi rendert das Header-Template als <header class="et-l et-l--header">.
   Die Gestaltung liegt bewusst hier und nicht in den Modul-Einstellungen:
   so steht die ganze Kopfzeile an einer Stelle statt über ein Dutzend Felder
   im Builder verteilt.
   -------------------------------------------------------------------------- */
/* Die Kopfzeile liegt ÜBER dem Inhalt, damit sie den Hero nicht nach unten
   schiebt. Der Ausgleich passiert unten: #et-main-area bekommt oben Platz,
   der Hero zieht ihn mit negativem Rand wieder heraus. */
.et-l--header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 500;
	background-color: var(--hw-offwhite);
	box-shadow: var(--hw-shadow-soft);
	transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/* Transparent startet die Leiste NUR, wo ein Hero darunter liegt. Auf Seiten
   ohne Hero stünde weiße Schrift sonst auf weißem Grund. */
body:has(#hw-hero):not(.hw-scrolled):not(.hw-menu-open) .et-l--header {
	background-color: transparent;
	box-shadow: none;
}

/* Leichter Verlauf nach oben, damit weiße Schrift auf hellen Bildstellen
   lesbar bleibt. Verschwindet, sobald die Leiste ihren Hintergrund hat. */
.et-l--header::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(32, 28, 24, 0.55), rgba(32, 28, 24, 0));
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: -1;
}

body:has(#hw-hero):not(.hw-scrolled):not(.hw-menu-open) .et-l--header::after {
	opacity: 1;
}

/* Eingeloggt schiebt WordPress seine Adminleiste über die Seite. Eine feste
   Kopfzeile muss darunter beginnen, sonst verschwindet sie dahinter. */
body.admin-bar .et-l--header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .et-l--header {
		top: 46px;
	}
}

/* Platz für die feste Kopfzeile auf allen Seiten … */
#et-main-area {
	padding-top: 72px;
}

/* … außer dort, wo der Hero bewusst darunter durchlaufen soll. */
#hw-hero {
	margin-top: -72px;
}

/* Zustand: gescrollt oder mobiles Menü offen — Leiste wird deckend. */
/* Über dem Hero steht das Logo weiß, auf der deckenden Leiste im Original. */
.et-l--header .et_pb_menu__logo img {
	transition: filter 0.4s ease;
}

body:has(#hw-hero):not(.hw-scrolled):not(.hw-menu-open) .et-l--header .et_pb_menu__logo img {
	filter: brightness(0) invert(1);
}

.et-l--header .et_pb_section {
	padding: 0;
	background-color: transparent;
}

.et-l--header .et_pb_row {
	width: 100%;
	max-width: var(--hw-content-raster);
	min-height: 72px;
	padding: 0 var(--hw-section-x);
	align-items: center;
	background-color: transparent;
}

/* Logo – 140px entspricht rund 57px Höhe bei diesem Seitenverhältnis.
   Divi begrenzt den Logo-Container und schneidet das Bild sonst rechts ab,
   deshalb Container und Bild ausdrücklich freigeben. */
.et-l--header .et_pb_menu__logo-wrap,
.et-l--header .et_pb_menu__logo {
	width: auto;
	max-width: none;
	overflow: visible;
}

.et-l--header .et_pb_menu__logo img {
	display: block;
	width: 140px;
	max-width: none;
	height: auto;
}

/* Das Menü-Modul bringt einen eigenen weißen Hintergrund mit, der als heller
   Streifen in der Kopfzeile sichtbar wäre. */
.et-l--header .et_pb_menu,
.et-l--header .et_pb_menu_inner_container {
	background-color: transparent !important;
}

/* Luft zwischen Logo und erstem Menüpunkt */
.et-l--header .et_pb_menu__logo-wrap {
	margin-right: 40px;
}

.et-l--header .et_pb_menu .et-menu > li {
	margin-right: 28px;
	padding-left: 0;
	padding-right: 0;
}

.et-l--header .et_pb_menu .et-menu > li:last-child {
	margin-right: 0;
}

/* Menülinks */
/* Über dem Hero cremefarben, auf der deckenden Leiste dunkel. */
.et-l--header .et_pb_menu .et-menu > li > a {
	font-size: 15px;
	font-weight: 500;
	color: var(--hw-dunkel);
	transition: color 0.4s ease, text-shadow 0.4s ease;
}

.et-l--header .et_pb_menu .et-menu > li > a:hover {
	color: var(--hw-holzbraun);
	opacity: 1;
}

body:has(#hw-hero):not(.hw-scrolled):not(.hw-menu-open) .et-l--header .et_pb_menu .et-menu > li > a {
	color: var(--hw-creme);
	text-shadow: 0 1px 4px rgba(32, 28, 24, 0.35);
}

body:has(#hw-hero):not(.hw-scrolled):not(.hw-menu-open) .et-l--header .et_pb_menu .et-menu > li > a:hover {
	color: var(--hw-gold);
}

/* Divis Hamburger-Symbol folgt derselben Logik. */
.et-l--header .mobile_menu_bar::before {
	color: var(--hw-holzbraun);
}

body:has(#hw-hero):not(.hw-scrolled):not(.hw-menu-open) .et-l--header .mobile_menu_bar::before {
	color: var(--hw-creme);
}

/* Telefon-Button in Gold */
.et-l--header .et_pb_button {
	background-color: var(--hw-gold) !important;
	border: 0 !important;
	border-radius: var(--hw-radius-pill) !important;
	color: var(--hw-dunkel) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	padding: 12px 24px !important;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

/* Divi hängt an Buttons einen Pfeil per ::after, der beim Hover einfährt
   und die Breite springen lässt. Hier nicht erwünscht. */
.et-l--header .et_pb_button::after {
	display: none !important;
}

.et-l--header .et_pb_button:hover {
	background-color: #C08F38 !important;
	padding: 12px 24px !important;
}

/* Der Anruf-Eintrag im Menü ist nur für Mobil gedacht: dort ist der
   Telefon-Button aus der Kopfzeile ausgeblendet, damit er das aufgeklappte
   Menü nicht überdeckt. Auf dem Desktop übernimmt der Button. */
.et-l--header .et-menu > li.hw-mobil-anruf {
	display: none;
}

@media (max-width: 980px) {
	/* Logo etwas kleiner, damit neben dem Burger genug Luft bleibt. */
	.et-l--header .et_pb_menu__logo img {
		width: 120px;
	}

	/* Der Button stünde sonst über dem aufgeklappten Menü. */
	.et-l--header .et_pb_button_module_wrapper {
		display: none;
	}

	.et-l--header .et-menu > li.hw-mobil-anruf {
		display: block;
	}

	.et-l--header .et_mobile_menu li.hw-mobil-anruf > a {
		display: inline-block;
		margin: 10px 0 4px;
		padding: 12px 24px;
		background-color: var(--hw-gold);
		border-radius: var(--hw-radius-pill);
		color: var(--hw-dunkel);
		font-weight: 600;
	}

	/* Divis Mobilmenü setzt eine Trennlinie unter jeden Eintrag. */
	.et-l--header .et_mobile_menu li.hw-mobil-anruf {
		border-bottom: 0;
	}
}

/* --------------------------------------------------------------------------
   6. Theme-Builder-Footer
   Das Markup liefert der Shortcode [hw_footer] aus der functions.php.
   -------------------------------------------------------------------------- */
.et-l--footer {
	background-color: var(--hw-dunkel);
}

.et-l--footer .et_pb_section,
.et-l--footer .et_pb_row {
	padding: 0;
	background-color: transparent;
	max-width: none;
	width: 100%;
}

.hw-footer {
	max-width: var(--hw-content-raster);
	margin: 0 auto;
	padding: 80px var(--hw-section-x) 40px;
	color: var(--hw-creme-90);
	font-size: 14px;
	line-height: 1.7;
}

.hw-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--hw-gap-bloecke, 48px);
}

.hw-footer__logo {
	display: block;
	width: 180px;
	height: auto;
	margin-bottom: 24px;
	/* Das Logo ist dunkelgrün und würde auf der dunklen Fläche verschwinden.
	   brightness(0) macht es schwarz, invert(1) daraus reines Weiß. */
	filter: brightness(0) invert(1);
	opacity: 0.9;
}

.hw-footer__brand p {
	color: var(--hw-creme-70);
	margin: 0;
}

.hw-footer__col h3 {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--hw-creme);
	margin: 0 0 16px;
}

.hw-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hw-footer__col li {
	margin-bottom: 9px;
}

.hw-footer a {
	color: var(--hw-creme-90);
	text-decoration: none;
	transition: color 0.2s ease;
}

.hw-footer a:hover {
	color: var(--hw-gold);
}

.hw-footer__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 56px;
	padding-top: 20px;
	border-top: 1px solid var(--hw-creme-12);
	font-size: 12px;
	color: var(--hw-creme-70);
}

.hw-footer__bar p {
	margin: 0;
}

.hw-footer__claim {
	color: var(--hw-gold);
	font-size: 14px;
}

@media (max-width: 980px) {
	.hw-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
}

@media (max-width: 560px) {
	.hw-footer {
		padding-top: var(--hw-section-y-mobil);
	}

	.hw-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   7. Hero
   Sektion trägt die id hw-hero, die Buttons stecken in einer Gruppe mit der
   id hw-hero-cta (beides über Erweitert → Attribute im Builder).
   -------------------------------------------------------------------------- */
#hw-hero {
	position: relative;
	display: flex;
	/* Divi legt Zeilen in dieser Sektion nebeneinander, sobald es mehr als eine
	   gibt. Untereinander und mittig ist hier gemeint. */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* svh statt vh: auf dem Handy zählt die sichtbare Höhe ohne Browserleiste. */
	min-height: 100svh;
	padding: 104px var(--hw-section-x) 88px;
	background-size: cover;
	background-position: center;
}

/* Dunkles Overlay für die Lesbarkeit über dem Werkstattfoto.
   Zwei Schichten: eine flächige Abdunklung für den Text in der Mitte und ein
   Verlauf, der oben und unten nachdunkelt – oben für die transparente
   Kopfleiste, unten für den Übergang zum nächsten Abschnitt. */
#hw-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(20, 17, 14, 0.62);
	background-image: linear-gradient(
		to bottom,
		rgba(20, 17, 14, 0.30) 0%,
		rgba(20, 17, 14, 0) 32%,
		rgba(20, 17, 14, 0) 62%,
		rgba(20, 17, 14, 0.60) 100%
	);
	pointer-events: none;
}

#hw-hero .et_pb_row {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--hw-content-text);
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

/* Divi setzt in Spalten einen row-gap von 30px und lässt Module den freien
   Platz untereinander aufteilen. Beides hier abschalten und die Abstände
   selbst setzen – sonst sind sie nicht vorhersagbar. */
#hw-hero .et_pb_column {
	row-gap: 0;
}

#hw-hero .et_pb_column > * {
	flex: 0 0 auto;
}

/* Das SVG meldet keine echte Pixelgröße, WordPress setzt daher 300px am
   Bild-Modul. Wrapper und Bild ausdrücklich auf die Hero-Breite bringen. */
#hw-hero .et_pb_image,
#hw-hero .et_pb_image .et_pb_image_wrap {
	width: 100%;
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#hw-hero .et_pb_image {
	margin-bottom: 40px;
}

/* Höhe statt Breite begrenzen: der Hero soll auf einen Bildschirm passen, und
   es ist die Logohöhe, die ihn sonst sprengt. */
#hw-hero .et_pb_image img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: clamp(150px, 27svh, 300px);
	height: auto;
	margin: 0 auto;
	filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
}

#hw-hero h1 {
	max-width: 640px;
	margin: 0 auto;
	color: var(--hw-creme);
	text-align: center;
	text-wrap: balance;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Subline unter der Überschrift. */
#hw-hero-sub {
	max-width: 620px;
	margin: 20px auto 0;
}

#hw-hero-sub,
#hw-hero-sub p {
	color: var(--hw-creme-90);
	font-size: 20px;
	line-height: 1.6;
	text-align: center;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

#hw-hero-sub p:last-child {
	margin-bottom: 0;
}

/* Die Gruppe hält die beiden Buttons in einer Reihe. Divi gibt Gruppen von
   Haus aus flex-direction: column und einen Gap von 30px – beides mit der
   nötigen Spezifität überschreiben. */
body #page-container #hw-hero-cta {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px;
	width: 100%;
	margin-top: 40px;
}

body #page-container #hw-hero-cta .et_pb_button_module_wrapper {
	margin: 0;
}

/* Die doppelten IDs im Selektor sind Absicht: Divis eigene Button-Regel
   (body #page-container .et_pb_section .et_pb_button) ist spezifischer als
   eine einzelne ID und würde sonst gewinnen. */
body #page-container #hw-hero .et_pb_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 0 32px;
	border: 2px solid transparent;
	border-radius: var(--hw-radius-pill);
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}

/* Divi hängt an jeden Button ein Pfeil-Icon. Hier nicht gewollt. */
body #page-container #hw-hero .et_pb_button::after,
body #page-container #hw-hero .et_pb_button::before {
	display: none !important;
}

body #page-container #hw-hero a#hw-hero-btn1 {
	background-color: var(--hw-gold);
	border-color: var(--hw-gold);
	color: var(--hw-dunkel);
}

body #page-container #hw-hero a#hw-hero-btn1:hover {
	background-color: #C0913F;
	border-color: #C0913F;
	color: var(--hw-dunkel);
	transform: translateY(-1px);
}

body #page-container #hw-hero a#hw-hero-btn2 {
	background-color: transparent;
	border-color: var(--hw-creme-70);
	color: var(--hw-creme);
}

body #page-container #hw-hero a#hw-hero-btn2:hover {
	background-color: var(--hw-creme);
	border-color: var(--hw-creme);
	color: var(--hw-dunkel);
	transform: translateY(-1px);
}

@media (max-width: 767px) {
	#hw-hero {
		padding: var(--hw-section-y-mobil) var(--hw-section-x);
	}

	#hw-hero .et_pb_image {
		margin-bottom: 32px;
	}

	#hw-hero-sub {
		margin-top: 16px;
	}

	#hw-hero-sub,
	#hw-hero-sub p {
		font-size: 17px;
	}

	/* Auf dem Handy untereinander und über die volle Breite – zwei Pillen
	   nebeneinander werden sonst zu schmal zum Treffen. */
	body #page-container #hw-hero-cta {
		flex-direction: column;
		gap: 12px;
		margin-top: 32px;
	}

	body #page-container #hw-hero-cta .et_pb_button_module_wrapper {
		width: 100%;
		max-width: 340px;
	}

	body #page-container #hw-hero .et_pb_button {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   8. Feste Anruf-Leiste (nur Mobil)
   Markup kommt aus functions.php über wp_footer.
   -------------------------------------------------------------------------- */
.hw-sticky-call {
	display: none;
}

@media (max-width: 980px) {
	.hw-sticky-call {
		display: flex;
		position: fixed;
		left: 16px;
		right: 16px;
		/* Auf iOS liegt unten die Home-Leiste – safe-area schiebt den Balken
		   darüber, ohne auf Android etwas zu verändern. */
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		z-index: 600;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 15px 20px;
		border-radius: var(--hw-radius-pill);
		background-color: var(--hw-holzbraun);
		color: var(--hw-creme);
		font-size: 15px;
		font-weight: 500;
		text-decoration: none;
		box-shadow: var(--hw-shadow-elevated);
	}

	.hw-sticky-call svg {
		flex: 0 0 20px;
		width: 20px;
		height: 20px;
	}

	/* Damit die Leiste nicht das Ende des Footers verdeckt. */
	.et-l--footer {
		padding-bottom: 88px;
	}
}

/* --------------------------------------------------------------------------
   9. Bewegung respektieren
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------------------
   10. Inhaltssektionen der Startseite
   Alle Sektionen tragen die Klasse hw-section plus eine Farbvariante. Die
   Struktur kommt aus Divi-Modulen, das Aussehen komplett von hier – Divi 5
   hat kein CSS-Klassen-Feld mehr, die Haken sitzen in Erweitert → Attribute.
   -------------------------------------------------------------------------- */
.hw-section {
	padding: var(--hw-section-y) var(--hw-section-x);
}

.hw-section--offwhite { background-color: var(--hw-offwhite); }
.hw-section--creme    { background-color: var(--hw-creme); }
.hw-section--dunkel   { background-color: var(--hw-dunkel); color: var(--hw-creme); }

.hw-section > .et_pb_row {
	width: 100%;
	max-width: var(--hw-content-raster);
	margin: 0 auto;
	padding: 0;
}

.hw-section--schmal > .et_pb_row {
	max-width: 896px;
}

/* Divi verteilt in Spalten einen row-gap von 30px und lässt Module den freien
   Platz aufteilen. Beides abschalten, Abstände kommen aus den Regeln unten. */
.hw-section .et_pb_column {
	row-gap: 0;
}

.hw-section .et_pb_column > * {
	flex: 0 0 auto;
}

.hw-section .et_pb_row + .et_pb_row {
	margin-top: 56px;
}

/* Zwei-Spalten-Zeilen: Divi rechnet die Breiten selbst aus, der Abstand
   dazwischen nicht. */
.hw-section .et_pb_row.et_flex_row {
	column-gap: 40px;
	align-items: flex-start;
}

/* Kleine Schreibschrift-Zeile über jeder Überschrift. */
/* Die kleine Zeile über jeder Überschrift. Im Lovable-Entwurf ist das
   schlicht Inter in Gold, 24px, in gemischter Schreibung – die Klasse hieß
   dort font-script, war aber ebenfalls auf Inter abgebildet. */
.hw-eyebrow {
	margin: 0 0 8px;
	color: var(--hw-gold);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}

.hw-eyebrow--gold { color: var(--hw-gold); }

.hw-section h2 {
	max-width: 20ch;
	margin: 0 0 20px;
	color: var(--hw-dunkel);
	font-size: clamp(30px, 3.4vw, 48px);
	font-weight: 600;
	line-height: 1.12;
	text-wrap: balance;
}

.hw-section--dunkel h2,
.hw-section--dunkel h3 { color: var(--hw-creme); }

.hw-section h3 {
	margin: 0 0 12px;
	color: var(--hw-dunkel);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.hw-intro p,
.hw-fliesstext p {
	color: rgba(32, 28, 24, 0.78);
	font-size: 18px;
	line-height: 1.7;
}

.hw-fliesstext p + p { margin-top: 20px; }
.hw-intro p { max-width: 62ch; }

.hw-kopf { margin-bottom: 64px; }
#hw-projekte-kopf { margin-bottom: 40px; }
.hw-kopf--zentriert { text-align: center; }
.hw-kopf--zentriert h2 { margin-inline: auto; }
.hw-kopf--zentriert .hw-intro p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   11. Raster
   Ein Grid statt Divi-Spalten: acht Leistungen in vier Divi-Spalten zu
   verteilen hieße acht Module von Hand umzuhängen, sobald eine dazukommt.
   -------------------------------------------------------------------------- */
.hw-grid {
	display: grid;
	gap: 20px;
	width: 100%;
}

.hw-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hw-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hw-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1100px) {
	.hw-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hw-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	.hw-grid--4,
	.hw-grid--3,
	.hw-grid--2 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   12. Karten
   -------------------------------------------------------------------------- */
.hw-karte,
.hw-section .hw-karte {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 1px solid rgba(108, 65, 35, 0.12);
	border-radius: var(--hw-radius-karte);
	background-color: var(--hw-offwhite);
	box-shadow: var(--hw-shadow-card);
}

.hw-section--creme .hw-karte { background-color: var(--hw-offwhite); }

.hw-karte-dunkel,
.hw-section .hw-karte-dunkel {
	display: flex;
	flex-direction: column;
	padding: 32px;
	border-radius: var(--hw-radius-karte);
	background-color: var(--hw-dunkel);
	color: var(--hw-creme);
	box-shadow: var(--hw-shadow-elevated);
}

.hw-karte-dunkel h3 { color: var(--hw-creme); }
.hw-karte-dunkel a { color: var(--hw-creme); text-decoration: none; }
.hw-karte-dunkel a:hover { color: var(--hw-gold); }
.hw-karte-dunkel__intro,
.hw-karte-dunkel__text { color: var(--hw-creme-70); font-size: 15px; line-height: 1.6; }
.hw-karte-dunkel__fuss { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hw-creme-12); }

/* Leistungskarten */
.hw-karte:hover {
	box-shadow: var(--hw-shadow-warm);
	transform: translateY(-2px);
}

.hw-karte { transition: box-shadow .4s ease, transform .4s ease; }

.hw-karte__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 20px;
	border-radius: var(--hw-radius-feld);
	background-color: var(--hw-braun-10);
	color: var(--hw-holzbraun);
	transition: background-color .4s ease, color .4s ease;
}

.hw-karte:hover .hw-karte__icon {
	background-color: var(--hw-holzbraun);
	color: var(--hw-creme);
}

.hw-karte__text p {
	margin: 0;
	color: rgba(32, 28, 24, 0.7);
	font-size: 15px;
	line-height: 1.65;
}

.hw-icon { width: 28px; height: 28px; }

/* Zahlenkarte in "Über uns" */
.hw-zahlen { margin: 0; }

.hw-zahlen__zeile {
	padding-bottom: 20px;
	border-bottom: 1px solid var(--hw-creme-12);
}

.hw-zahlen__zeile + .hw-zahlen__zeile { padding-top: 20px; }
.hw-zahlen__zeile:last-child { padding-bottom: 0; border-bottom: 0; }

.hw-zahlen dt {
	color: var(--hw-gold);
	font-size: clamp(32px, 3vw, 44px);
	font-weight: 600;
	line-height: 1.1;
}

.hw-zahlen dd {
	margin: 4px 0 0;
	color: var(--hw-creme-70);
	font-size: 14px;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   13. Prozess
   -------------------------------------------------------------------------- */
.hw-schritt { text-align: center; }

.hw-schritt__kreis {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	margin-bottom: 24px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--hw-holzbraun), #4A2C17);
	color: var(--hw-creme);
	box-shadow: var(--hw-shadow-warm);
}

.hw-schritt__kreis .hw-icon { width: 34px; height: 34px; }

.hw-schritt__nummer {
	position: absolute;
	top: -6px;
	right: -6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: var(--hw-gold);
	color: var(--hw-dunkel);
	font-size: 14px;
	font-weight: 700;
	box-shadow: var(--hw-shadow-card);
}

.hw-schritt__text p {
	margin: 0;
	color: rgba(32, 28, 24, 0.7);
	font-size: 15px;
	line-height: 1.65;
}

/* Verbindungslinie: je ein Strich pro Schritt, von der Mitte des eigenen
   Kreises bis kurz vor die Mitte des nächsten. Eine durchgehende Linie über
   das ganze Raster trifft die Kreismitten nicht, sobald ein Gap dazwischen
   liegt – deshalb wird hier mit der Zellbreite gerechnet. */
.hw-grid--linie {
	--hw-schritt-gap: 40px;
	gap: var(--hw-schritt-gap);
}

.hw-schritt { position: relative; }

/* --------------------------------------------------------------------------
   14. Projekte
   -------------------------------------------------------------------------- */
#hw-projekte-grid { grid-auto-rows: auto; }

.hw-projekt {
	position: relative;
	overflow: hidden;
	border-radius: var(--hw-radius-karte);
	box-shadow: var(--hw-shadow-card);
	transition: box-shadow .5s ease, transform .5s ease;
}

.hw-projekt:hover {
	box-shadow: var(--hw-shadow-elevated);
	transform: translateY(-3px);
}

.hw-projekt .et_pb_image,
.hw-projekt .et_pb_image_wrap {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

.hw-projekt img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .7s ease;
}

.hw-projekt--hoch img { aspect-ratio: 4 / 5; }

.hw-projekt:hover img { transform: scale(1.05); }

/* Bildunterschrift über dem Bild, mit Verlauf für die Lesbarkeit. */
.hw-projekt__text {
	position: absolute;
	inset: auto 0 0 0;
	padding: 20px;
	background-image: linear-gradient(to top, rgba(20, 17, 14, 0.88), rgba(20, 17, 14, 0.15) 65%, rgba(20, 17, 14, 0));
	pointer-events: none;
}

.hw-projekt__ort {
	margin: 0 0 4px;
	color: var(--hw-gold);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.hw-projekt__titel {
	margin: 0;
	color: var(--hw-creme);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

/* --------------------------------------------------------------------------
   15. Einsatzgebiet
   -------------------------------------------------------------------------- */
.hw-gebiete {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	margin-bottom: 24px;
}

@media (max-width: 700px) {
	.hw-gebiete { grid-template-columns: minmax(0, 1fr); }
}

.hw-gebiete__titel { margin: 0 0 16px; font-size: 18px; font-weight: 600; }

.hw-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

.hw-pill {
	display: inline-block;
	padding: 6px 12px;
	border-radius: var(--hw-radius-pill);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
}

.hw-pill--braun { background-color: var(--hw-braun-10); color: var(--hw-holzbraun); }
.hw-pill--blau  { background-color: var(--hw-blaugrau-15); color: var(--hw-blaugrau); }

/* Icon-Listen in den dunklen Karten */
.hw-liste { margin: 0; padding: 0; list-style: none; }

.hw-liste li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	line-height: 1.5;
}

.hw-liste li + li { margin-top: 18px; }

.hw-liste__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--hw-gold);
}

.hw-liste__label {
	display: block;
	color: var(--hw-creme-70);
	font-size: 12px;
	letter-spacing: 0.04em;
}

.hw-liste--gross .hw-liste__icon {
	width: 44px;
	height: 44px;
	padding: 11px;
	margin-top: 0;
	border-radius: var(--hw-radius-feld);
	background-color: var(--hw-gold);
	color: var(--hw-dunkel);
}

.hw-liste--gross li + li { margin-top: 22px; }

/* Karte erst auf Klick nachladen – vorher geht nichts an Google. */
.hw-karte-embed {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid rgba(108, 65, 35, 0.12);
	border-radius: var(--hw-radius-karte);
	background-color: var(--hw-sand);
	box-shadow: var(--hw-shadow-card);
	text-align: center;
}

.hw-karte-embed__inhalt { padding: 24px; }
.hw-karte-embed__icon { width: 32px; height: 32px; color: var(--hw-holzbraun); }
.hw-karte-embed__titel { margin: 12px 0 4px; font-weight: 600; color: var(--hw-dunkel); }
.hw-karte-embed__hinweis { margin: 0 0 16px; font-size: 13px; color: rgba(32, 28, 24, 0.65); }

.hw-karte-embed__btn {
	padding: 10px 22px;
	border: 0;
	border-radius: var(--hw-radius-pill);
	background-color: var(--hw-holzbraun);
	color: var(--hw-creme);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .25s ease;
}

.hw-karte-embed__btn:hover { background-color: #55321B; }

.hw-karte-embed iframe { width: 100%; height: 100%; border: 0; }
.hw-karte-embed.is-geladen { display: block; }

/* --------------------------------------------------------------------------
   16. Kundenstimmen
   -------------------------------------------------------------------------- */
.hw-stimme {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 1px solid var(--hw-creme-12);
	border-radius: var(--hw-radius-karte);
	background-color: rgba(246, 243, 238, 0.05);
	transition: background-color .3s ease;
}

.hw-stimme:hover { background-color: rgba(246, 243, 238, 0.09); }

.hw-stimme__quote { display: block; margin-bottom: 18px; color: var(--hw-gold); }
.hw-stimme__quote .hw-icon { width: 32px; height: 32px; }

.hw-stimme__text { margin: 0; padding: 0; border: 0; }

.hw-stimme__text p {
	margin: 0;
	color: var(--hw-creme-90);
	font-size: 16px;
	line-height: 1.7;
}

.hw-stimme__fusswrap { margin-top: auto; }

.hw-stimme__fuss {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 24px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--hw-creme-12);
}

.hw-stimme__autor { font-weight: 600; color: var(--hw-creme); }
.hw-sterne { display: inline-flex; gap: 2px; color: var(--hw-gold); }
.hw-sterne .hw-icon { width: 16px; height: 16px; fill: currentColor; }

/* --------------------------------------------------------------------------
   17. FAQ
   Bewusst <details>/<summary> statt eines Akkordeon-Moduls: das funktioniert
   ohne JavaScript, ist von Haus aus bedienbar und lässt sich durchsuchen.
   -------------------------------------------------------------------------- */
.hw-faq { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.hw-faq__item {
	border: 1px solid rgba(108, 65, 35, 0.14);
	border-radius: var(--hw-radius-feld);
	background-color: var(--hw-offwhite);
	box-shadow: var(--hw-shadow-soft);
}

.hw-faq__frage {
	position: relative;
	padding: 20px 56px 20px 24px;
	color: var(--hw-dunkel);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

.hw-faq__frage::-webkit-details-marker { display: none; }

.hw-faq__frage::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 24px;
	width: 10px;
	height: 10px;
	margin-top: -7px;
	border-right: 2px solid var(--hw-holzbraun);
	border-bottom: 2px solid var(--hw-holzbraun);
	transform: rotate(45deg);
	transition: transform .25s ease;
}

.hw-faq__item[open] .hw-faq__frage::after {
	margin-top: -2px;
	transform: rotate(225deg);
}

.hw-faq__antwort { padding: 0 24px 22px; }

.hw-faq__antwort p {
	margin: 0;
	color: rgba(32, 28, 24, 0.78);
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   18. Kontaktformular
   -------------------------------------------------------------------------- */
.hw-formular { padding: 32px; }

.hw-formular .et_pb_contact_form { display: flex; flex-wrap: wrap; gap: 16px; }
.hw-formular .et_pb_contact_field { padding: 0; margin: 0; }

.hw-formular .et_pb_contact_field_half { width: calc(50% - 8px); }
.hw-formular .et_pb_contact_field { width: 100%; }
.hw-formular .et_pb_contact_field.et_pb_contact_field_half { width: calc(50% - 8px); }

.hw-formular .et_pb_contact_form_label {
	display: block;
	margin-bottom: 6px;
	color: var(--hw-dunkel);
	font-size: 14px;
	font-weight: 600;
}

.hw-formular input[type="text"],
.hw-formular input[type="email"],
.hw-formular textarea,
.hw-formular select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(108, 65, 35, 0.2);
	border-radius: var(--hw-radius-feld);
	background-color: #fff;
	color: var(--hw-dunkel);
	font-family: var(--hw-font);
	font-size: 16px;
	line-height: 1.4;
}

.hw-formular textarea { min-height: 140px; resize: vertical; }

.hw-formular input:focus,
.hw-formular textarea:focus,
.hw-formular select:focus {
	outline: 2px solid var(--hw-gold);
	outline-offset: 1px;
	border-color: var(--hw-gold);
}

body #page-container #kontakt .et_pb_contact_submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 0 32px;
	border: 2px solid var(--hw-gold);
	border-radius: var(--hw-radius-pill);
	background-color: var(--hw-gold);
	color: var(--hw-dunkel);
	font-family: var(--hw-font);
	font-size: 16px;
	font-weight: 600;
	transition: background-color .25s ease, border-color .25s ease;
}

body #page-container #kontakt .et_pb_contact_submit::after { display: none !important; }

body #page-container #kontakt .et_pb_contact_submit:hover {
	background-color: #C0913F;
	border-color: #C0913F;
	color: var(--hw-dunkel);
}

.hw-formular__hinweis {
	margin: 16px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(32, 28, 24, 0.65);
}

/* Goldener Button in dunklen Karten */
body #page-container .hw-btn-gold {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 26px;
	border: 2px solid var(--hw-gold);
	border-radius: var(--hw-radius-pill);
	background-color: var(--hw-gold);
	color: var(--hw-dunkel);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .25s ease, border-color .25s ease;
}

body #page-container .hw-btn-gold::after,
body #page-container .hw-btn-gold::before { display: none !important; }

body #page-container .hw-btn-gold:hover {
	background-color: #C0913F;
	border-color: #C0913F;
	color: var(--hw-dunkel);
}

.hw-btn-breit { width: 100%; margin-top: 20px; }

/* --------------------------------------------------------------------------
   19. Zweispaltige Zeilen auf schmalen Schirmen
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
	.hw-section .et_pb_row.et_flex_row {
		flex-wrap: wrap;
		row-gap: 32px;
	}

	.hw-section .et_pb_row.et_flex_row > .et_pb_column {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}
}

@media (max-width: 767px) {
	.hw-section { padding: var(--hw-section-y-mobil) var(--hw-section-x); }
	.hw-kopf { margin-bottom: 40px; }
	.hw-section .et_pb_row + .et_pb_row { margin-top: 40px; }
	.hw-karte, .hw-section .hw-karte { padding: 22px; }
	.hw-karte-dunkel, .hw-section .hw-karte-dunkel { padding: 24px; }
	.hw-formular { padding: 22px; }
	.hw-formular .et_pb_contact_field.et_pb_contact_field_half { width: 100%; }
	.hw-intro p, .hw-fliesstext p { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   20. Nacharbeiten
   -------------------------------------------------------------------------- */

/* Gruppen sind bei Divi ebenfalls Flex-Container mit 30px row-gap und lassen
   ihre Module den freien Platz aufteilen. In allen eigenen Bausteinen zählen
   stattdessen die Abstände, die oben gesetzt sind. */
/* Ausgenommen sind die Container, die ihren Zeilenabstand selbst mitbringen —
   sonst nimmt dieser Reset den Rastern die Lücken zwischen den Zeilen. */
.hw-section .et_pb_group:not(.hw-grid):not(.hw-faq):not(.hw-gebiete) {
	row-gap: 0;
}

.hw-section .et_pb_group > * {
	flex: 0 0 auto;
}

/* Spaltenbreiten der zweispaltigen Zeilen. Divi leitet aus dem Spaltenschema
   keine ungleichen Breiten ab, wenn die Zeile über Flex läuft. */
@media (min-width: 981px) {
	#ueber-uns .et_flex_row > .et_pb_column:first-child { flex: 0 0 58%; max-width: 58%; }
	#ueber-uns .et_flex_row > .et_pb_column:last-child  { flex: 0 0 calc(42% - 40px); max-width: calc(42% - 40px); }

	#einsatzgebiet .et_flex_row:last-child > .et_pb_column:first-child { flex: 0 0 40%; max-width: 40%; }
	#einsatzgebiet .et_flex_row:last-child > .et_pb_column:last-child  { flex: 0 0 calc(60% - 40px); max-width: calc(60% - 40px); }

	#kontakt .et_flex_row:last-child > .et_pb_column:first-child { flex: 0 0 60%; max-width: 60%; }
	#kontakt .et_flex_row:last-child > .et_pb_column:last-child  { flex: 0 0 calc(40% - 40px); max-width: calc(40% - 40px); }
}

/* Die dunkle Karte soll die volle Spaltenhöhe füllen, damit sie neben dem
   längeren Nachbarn nicht abgeschnitten wirkt. */
#einsatzgebiet .hw-karte-dunkel,
#kontakt .hw-karte-dunkel {
	height: 100%;
}

#einsatzgebiet .et_flex_row:last-child > .et_pb_column,
#kontakt .et_flex_row:last-child > .et_pb_column {
	align-self: stretch;
}

#hw-werkstatt-karte .hw-karte-dunkel__fuss { margin-top: auto; }

/* Kein margin-top:auto am Kartentext. Es schob den Text an den Kartenboden
   und machte den Abstand zwischen Titel und Text von der Titellänge abhängig. */

/* --------------------------------------------------------------------------
   21. Feinschliff
   -------------------------------------------------------------------------- */

/* Überschriften dürfen breiter laufen. 15em wächst mit der Schriftgröße mit
   und entspricht bei 48px rund 720px – der Textbreite aus dem Entwurf. */
.hw-section h2 { max-width: 15em; }

/* Die Ortslisten stehen in einer Karte, sollen aber zweispaltig sein.
   .hw-karte setzt display:flex, deshalb hier der spezifischere Selektor. */
.hw-section .hw-karte.hw-gebiete {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	align-content: start;
}

@media (max-width: 700px) {
	.hw-section .hw-karte.hw-gebiete { grid-template-columns: minmax(0, 1fr); }
}

/* Abstände in den dunklen Karten */
.hw-listenwrap { margin-top: 24px; }
.hw-karte-dunkel__introwrap { margin-bottom: 0; }

/* --- Kontaktformular ---------------------------------------------------- */

/* Divi vergibt für halbe Felder die Klasse et_flex_column_12_24. Die Breite
   daran festmachen statt an eigenen Klassen – dann stimmt sie auch, wenn im
   Builder ein Feld auf halbe Breite umgestellt wird. */
.hw-formular .et_pb_contact_field { flex: 1 1 100%; width: auto; }
.hw-formular .et_flex_column_12_24 { flex: 1 1 calc(50% - 8px); }

@media (max-width: 767px) {
	.hw-formular .et_flex_column_12_24 { flex: 1 1 100%; }
}

/* Divi setzt als Platzhalter denselben Text wie ins Label. Doppelt gemoppelt –
   das Label bleibt sichtbar, der Platzhalter verschwindet. */
.hw-formular ::placeholder { color: transparent; }

.hw-formular select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C4123' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px 18px;
}

/* Captcha und Absendeknopf stehen in einer gemeinsamen Leiste. */
.hw-formular .et_contact_bottom_container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	width: 100%;
	margin-top: 4px;
}

.hw-formular .et_pb_contact_right p { margin: 0; }

.hw-formular .et_pb_contact_captcha_question {
	font-weight: 600;
	color: var(--hw-dunkel);
}

.hw-formular input.et_pb_contact_captcha {
	width: 64px;
	margin-left: 6px;
	padding: 8px 10px;
	text-align: center;
}

.hw-formular .et_pb_button_wrapper { margin: 0; }

/* Erfolgs- und Fehlermeldungen im Markenlook */
.hw-formular .et-pb-contact-message {
	margin: 0 0 16px;
	padding: 16px 18px;
	border-radius: var(--hw-radius-feld);
	background-color: var(--hw-braun-10);
	color: var(--hw-dunkel);
}

.hw-formular .et-pb-contact-message ul { margin: 0; padding-left: 18px; }

/* --------------------------------------------------------------------------
   22. Formular: Divis eigene Feldgestaltung überschreiben
   Divi stylt Felder über .et_pb_contact_form .input – das ist spezifischer als
   ein Elementselektor. Deshalb hier dieselbe Klasse mitnehmen.
   -------------------------------------------------------------------------- */
.hw-formular .et_pb_contact_form .input,
.hw-formular .et_pb_contact_form .input[type="text"],
.hw-formular .et_pb_contact_form .input[type="email"],
.hw-formular .et_pb_contact_form textarea.input,
.hw-formular .et_pb_contact_form select.input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(108, 65, 35, 0.2);
	border-radius: var(--hw-radius-feld);
	background-color: #fff;
	color: var(--hw-dunkel);
	font-family: var(--hw-font);
	font-size: 16px;
	line-height: 1.4;
}

.hw-formular .et_pb_contact_form textarea.input {
	min-height: 150px;
	resize: vertical;
}

.hw-formular .et_pb_contact_form select.input {
	padding-right: 42px;
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px 18px;
}

/* Divi zeichnet über einem Auswahlfeld ein eigenes Dreieck aus Rahmen.
   Es sitzt außerhalb des Feldes und stört – der Pfeil steckt jetzt im Feld. */
.hw-formular .et_pb_contact_field::after {
	display: none !important;
}

/* Captcha und Knopf nebeneinander statt untereinander. */
.hw-formular .et_pb_contact_right {
	flex: 0 0 auto;
	width: auto;
	padding: 0;
}

.hw-formular .et_pb_button_wrapper {
	flex: 0 0 auto;
	width: auto;
}

.hw-formular .et_contact_bottom_container {
	flex-direction: row-reverse;
	justify-content: flex-end;
}

/* Divi hält oben im Formular einen leeren Meldungsblock bereit. Ohne Inhalt
   soll er auch keinen Platz und keine Farbe bekommen. */
.hw-formular .et-pb-contact-message:empty { display: none; }

/* Label und Feld gehören zusammen – Divis 30px Modulabstand ist hier zu viel. */
.hw-formular .et_pb_contact_field {
	display: flex;
	flex-direction: column;
	row-gap: 6px;
}

.hw-formular .et_pb_contact_form_label { margin-bottom: 0; }

/* Die Rechenaufgabe des Spamschutzes steht in einer Zeile mit ihrem Feld. */
.hw-formular .et_pb_contact_right .et_pb_contact_field {
	flex-direction: row;
	align-items: center;
}

.hw-formular .et_pb_contact_right label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   23. Buttons: Breite beim Überfahren festhalten
   Divi ändert bei :hover die Innenabstände, um Platz für sein Pfeil-Icon zu
   schaffen – und zwar mit !important. Da der Pfeil hier abgeschaltet ist,
   sieht man davon nur, dass der Knopf springt. Also beide Zustände gleich
   und ebenfalls mit !important festlegen.
   -------------------------------------------------------------------------- */
body #page-container #hw-hero .et_pb_button,
body #page-container #hw-hero .et_pb_button:hover,
body #page-container .hw-btn-gold,
body #page-container .hw-btn-gold:hover,
body #page-container #kontakt .et_pb_contact_submit,
body #page-container #kontakt .et_pb_contact_submit:hover {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 32px !important;
	padding-right: 32px !important;
}

body #page-container .hw-btn-gold,
body #page-container .hw-btn-gold:hover {
	padding-left: 26px !important;
	padding-right: 26px !important;
}

@media (max-width: 767px) {
	body #page-container #hw-hero .et_pb_button,
	body #page-container #hw-hero .et_pb_button:hover {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* Der Kopfleisten-Button hat seine eigenen Maße (12px/24px) und braucht sie
   in beiden Zuständen – die Hover-Regel dafür steht schon in Abschnitt 5. */
body #page-container .et-l--header .et_pb_button,
body #page-container .et-l--header .et_pb_button:hover {
	padding: 12px 24px !important;
}

/* --------------------------------------------------------------------------
   24. Zentrierung, Prozesslinie und Galerieraster
   -------------------------------------------------------------------------- */

/* Divi setzt in jedem Text-Modul ein eigenes text-align: start. Damit erbt
   die Ausrichtung des Elternteils NICHT – deshalb standen die Eyebrow-Zeile
   und die Prozess-Kreise links, obwohl der Block zentriert war. */
.hw-kopf--zentriert .et_pb_text,
.hw-kopf--zentriert .et_pb_text_inner,
.hw-kopf--zentriert .et_pb_heading,
.hw-schritt .et_pb_text,
.hw-schritt .et_pb_text_inner,
.hw-schritt .et_pb_heading {
	text-align: center;
}

/* Der Strich läuft von der Mitte des einen Kreises zur Mitte des nächsten.
   Kreis 80px, also 40px Radius plus 8px Luft = 48px Abstand zur Mitte.
   Die nächste Kreismitte liegt eine Zellbreite plus den Gap weiter. */
@media (min-width: 1101px) {
	.hw-schritt:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 40px;
		left: calc(50% + 48px);
		width: calc(100% + var(--hw-schritt-gap) - 96px);
		height: 1px;
		background-color: rgba(108, 65, 35, 0.18);
	}
}

/* Galerie wie im Entwurf: jede fünfte Kachel ist hoch und nimmt zwei
   Rasterzeilen ein, der Rest bleibt im Verhältnis 4:3. */
@media (min-width: 1101px) {
	.hw-projekt--hoch {
		grid-row: span 2;
	}

	.hw-projekt--hoch img {
		aspect-ratio: auto;
		height: 100%;
	}

	/* Das Bildmodul muss die Höhe der Kachel füllen dürfen – die allgemeine
	   Regel für Gruppenkinder verbietet das Wachsen sonst. */
	.hw-projekt--hoch .et_pb_image {
		flex: 1 1 auto;
		min-height: 0;
	}
}

/* --------------------------------------------------------------------------
   25. Rechtstexte (Impressum, Datenschutz)
   -------------------------------------------------------------------------- */
.hw-recht {
	padding-top: 160px;
}

.hw-recht h1 {
	margin: 0 0 40px;
	color: var(--hw-dunkel);
	font-size: clamp(34px, 4vw, 48px);
	font-weight: 600;
	line-height: 1.1;
}

/* Divi hängt die Klasse an den Modul-Wrapper, nicht an das h2 selbst.
   Der Selektor muss deshalb ins Modul hineinreichen – und spezifischer sein
   als .hw-section h2, sonst gewinnt dort die große Sektionsüberschrift. */
.hw-section.hw-recht .hw-recht__titel h2 {
	max-width: none;
	margin: 40px 0 8px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
}

.hw-recht .et_pb_heading:first-of-type .hw-recht__titel,
.hw-recht__text + .hw-recht__titel {
	margin-top: 40px;
}

.hw-recht__text p {
	margin: 0 0 14px;
	color: rgba(32, 28, 24, 0.85);
	font-size: 17px;
	line-height: 1.75;
}

.hw-recht__text p:last-child { margin-bottom: 0; }

.hw-recht__text a {
	color: var(--hw-holzbraun);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hw-recht__text a:hover { color: var(--hw-dunkel); }

.hw-recht__zurueckwrap { margin-top: 48px; }

.hw-recht__zurueck a {
	color: var(--hw-holzbraun);
	font-weight: 600;
	text-decoration: none;
}

.hw-recht__zurueck a:hover { text-decoration: underline; }

@media (max-width: 767px) {
	.hw-recht { padding-top: 120px; }
	.hw-recht h1 { margin-bottom: 28px; }
	.hw-recht__titel { margin-top: 32px; }
}

/* --------------------------------------------------------------------------
   26. Landingpages Lübeck und Travemünde
   -------------------------------------------------------------------------- */

/* Brotkrümelnavigation direkt unter der Kopfleiste. */
.hw-brotkrume {
	padding: 104px var(--hw-section-x) 0;
	background-color: var(--hw-offwhite);
}

.hw-brotkrume > .et_pb_row {
	width: 100%;
	max-width: var(--hw-content-raster);
	margin: 0 auto;
	padding: 0;
}

.hw-brotkrume__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: rgba(32, 28, 24, 0.6);
}

.hw-brotkrume__liste li + li::before {
	content: "›";
	margin-right: 8px;
	color: rgba(32, 28, 24, 0.4);
}

.hw-brotkrume__liste a { color: inherit; text-decoration: none; }
.hw-brotkrume__liste a:hover { color: var(--hw-holzbraun); text-decoration: underline; }
.hw-brotkrume__liste [aria-current] { color: var(--hw-dunkel); font-weight: 600; }

/* Hero der Landingpages: Bild mit dunklem Verlauf von links. */
.hw-lp-hero {
	position: relative;
	padding: 96px var(--hw-section-x);
	background-size: cover;
	background-position: center;
}

.hw-lp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to right,
		rgba(20, 17, 14, 0.90) 0%,
		rgba(20, 17, 14, 0.72) 45%,
		rgba(20, 17, 14, 0.45) 100%
	);
	pointer-events: none;
}

.hw-lp-hero > .et_pb_row {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--hw-content-raster);
	margin: 0 auto;
	padding: 0;
}

.hw-lp-hero .et_pb_column { row-gap: 0; }
.hw-lp-hero .et_pb_column > * { flex: 0 0 auto; }

.hw-lp-hero__badge {
	display: inline-block;
	margin: 0 0 24px;
	padding: 7px 16px;
	border-radius: var(--hw-radius-pill);
	background-color: var(--hw-gold);
	color: var(--hw-dunkel);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hw-lp-hero h1 {
	max-width: 18ch;
	margin: 0 0 24px;
	color: var(--hw-creme);
	font-size: clamp(34px, 4.6vw, 60px);
	font-weight: 600;
	line-height: 1.08;
	text-wrap: balance;
}

.hw-lp-hero__text { max-width: 60ch; margin-bottom: 32px; }

.hw-lp-hero__text p {
	margin: 0;
	color: var(--hw-creme-90);
	font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.6;
}

/* Bild-Text-Blöcke der Leistungen, im Wechsel gespiegelt. */
.hw-lp-leistung {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	align-items: center;
	margin-bottom: 64px;
}

.hw-lp-leistung:last-child { margin-bottom: 0; }

.hw-lp-leistung--gedreht .hw-lp-leistung__bild { order: 2; }

.hw-lp-leistung__bild img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--hw-radius-karte);
	box-shadow: var(--hw-shadow-card);
}

.hw-section .hw-lp-leistung__titel h3 {
	margin: 0 0 16px;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.2;
}

.hw-lp-leistung__text p {
	margin: 0;
	color: rgba(32, 28, 24, 0.75);
	font-size: 17px;
	line-height: 1.7;
}

@media (max-width: 980px) {
	.hw-lp-leistung {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		margin-bottom: 48px;
	}

	.hw-lp-leistung--gedreht .hw-lp-leistung__bild { order: 0; }
}

/* Spezialkarte für Ferienhausvermieter */
.hw-lp-spezial { padding: 48px; }
.hw-lp-spezial .hw-karte-dunkel__text { font-size: 17px; }

@media (max-width: 767px) {
	.hw-lp-spezial { padding: 28px; }
}

/* Größere Ortspillen auf den Landingpages */
.hw-pills--gross { gap: 10px; }

.hw-pills--gross .hw-pill {
	padding: 9px 18px;
	font-size: 14px;
}

.hw-pillwrap { margin-bottom: 32px; }
.hw-karte-embed-wrap { width: 100%; }

.hw-lp-hinweis {
	margin: 32px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(32, 28, 24, 0.6);
}

.hw-lp-hinweis a { color: var(--hw-holzbraun); text-decoration: underline; }

/* Vertrauensblock auf der Lübeck-Seite */
.hw-lp-vertrauen__text p {
	max-width: 62ch;
	margin: 0 auto;
	color: var(--hw-creme-90);
	font-size: 17px;
	line-height: 1.75;
}

.hw-lp-signatur {
	margin-top: 28px;
	font-size: 28px;
}

.hw-lp-querlink { margin-top: 32px; }

.hw-lp-querlink a {
	color: var(--hw-gold);
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hw-lp-querlink a:hover { color: var(--hw-creme); }

.hw-lp-zusatz { margin-top: 48px; }

@media (max-width: 767px) {
	.hw-brotkrume { padding-top: 96px; }
	.hw-lp-hero { padding: 72px var(--hw-section-x); }
	.hw-lp-hero h1 { max-width: none; }
}

/* Divi formatiert ol-Listen im Textmodul mit Ziffern und Einzug. Die
   Brotkrume ist zwar semantisch eine geordnete Liste, soll aber keine
   Nummern zeigen. */
.hw-brotkrume .et_pb_text ol.hw-brotkrume__liste,
.hw-brotkrume ol.hw-brotkrume__liste {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.hw-brotkrume .et_pb_text ol.hw-brotkrume__liste li,
.hw-brotkrume ol.hw-brotkrume__liste li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hw-pillwrap { margin-top: 8px; }

/* --------------------------------------------------------------------------
   27. Abstände nachgezogen und Spezialkarte nach Vorlage
   -------------------------------------------------------------------------- */

/* Der Einleitungstext braucht Luft nach unten. In Kopfblöcken nicht – dort
   regelt .hw-kopf den Abstand zum nächsten Baustein. */
.hw-intro { margin-bottom: 32px; }
.hw-kopf .hw-intro { margin-bottom: 0; }

.hw-pillwrap { margin: 0 0 40px; }

/* Die Leistungen-Sektion hat ihren Kopf nicht in einem .hw-kopf-Block, der
   Abstand zum Raster muss deshalb hier stehen (32 aus .hw-intro plus 32). */
#hw-leistungen-grid { margin-top: 32px; }

/* Hero-Knopf der Landingpages entspricht der Größe "xl" aus dem Entwurf. */
body #page-container .hw-lp-hero .hw-btn-gold,
body #page-container .hw-lp-hero .hw-btn-gold:hover {
	min-height: 58px;
	padding-left: 34px !important;
	padding-right: 34px !important;
	font-size: 17px;
}

.hw-lp-hero__text { max-width: 720px; }

/* Spezialkarte: im Entwurf blaugrau (accent) mit angedeuteten Wellen unten
   rechts, nicht im dunklen Markenton. */
.hw-lp-spezial {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 48px;
	border-radius: var(--hw-radius-karte);
	background-color: var(--hw-blaugrau);
	color: var(--hw-creme);
	box-shadow: var(--hw-shadow-elevated);
}

.hw-lp-spezial::after {
	content: "";
	position: absolute;
	right: -24px;
	bottom: -24px;
	width: 200px;
	height: 200px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6F3EE' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12q2.5 2 5 0t5 0 5 0 5 0'/%3E%3Cpath d='M2 19q2.5 2 5 0t5 0 5 0 5 0'/%3E%3Cpath d='M2 5q2.5 2 5 0t5 0 5 0 5 0'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.14;
	pointer-events: none;
}

.hw-section .hw-lp-spezial h2 {
	position: relative;
	max-width: 20ch;
	margin: 0 0 20px;
	color: var(--hw-creme);
}

.hw-lp-spezial .hw-karte-dunkel__text {
	position: relative;
	max-width: 62ch;
	color: var(--hw-creme-90);
	font-size: 17px;
	line-height: 1.7;
}

.hw-lp-spezial .hw-eyebrow { position: relative; }

@media (max-width: 767px) {
	.hw-lp-spezial { padding: 28px; }
	.hw-lp-spezial::after { width: 140px; height: 140px; }
}

/* --------------------------------------------------------------------------
   28. Modulabstände gegen Divis Flex-Reset durchsetzen
   Divi setzt mit
       body #page-container .et_pb_section .et_pb_row .et_flex_column > .et_pb_module, body #page-container .et_pb_section .et_pb_row .et_flex_group > .et_pb_module { margin-bottom: 0 }
   den Außenabstand ALLER Module auf null. Diese Regel ist mit zwei Klassen
   spezifischer als eine einzelne eigene Klasse – sämtliche Modulabstände aus
   den Abschnitten oben liefen deshalb ins Leere. Hier stehen sie in derselben
   Form noch einmal und gewinnen, weil dieses Stylesheet später geladen wird.
   Die Regel steht dort mit SECHS Selektoren; der greifende ist
       .et_pb_section .et_pb_row .et_flex_column > .et_pb_module
   und liegt bei (0,4,0). Divis Stylesheet wird außerdem NACH diesem geladen,
   Gleichstand verliert also. Deshalb der Vorsatz
       body #page-container .et_pb_section .et_pb_row
   der auf (1,5,0) kommt.
   MERKE: Jeder neue Abstand AN EINEM MODUL gehört in dieses Schema.
   -------------------------------------------------------------------------- */

body #page-container .et_pb_section .et_pb_row .et_flex_column > .hw-kopf,
body #page-container .et_pb_section .et_pb_row .et_flex_group > .hw-kopf { margin-bottom: 64px; }

body #page-container .et_pb_section .et_pb_row .et_flex_column > #hw-projekte-kopf { margin-bottom: 40px; }

body #page-container .et_pb_section .et_pb_row .et_flex_column > .hw-intro,
body #page-container .et_pb_section .et_pb_row .et_flex_group > .hw-intro { margin-bottom: 32px; }

.hw-kopf > .hw-intro { margin-bottom: 0; }

body #page-container .et_pb_section .et_pb_row .et_flex_column > .hw-pillwrap,
body #page-container .et_pb_section .et_pb_row .et_flex_group > .hw-pillwrap { margin-bottom: 40px; }

body #page-container .et_pb_section .et_pb_row .et_flex_column > #hw-leistungen-grid { margin-top: 32px; }

body #page-container .et_pb_section .et_pb_row .et_flex_column > .hw-lp-leistung,
body #page-container .et_pb_section .et_pb_row .et_flex_group > .hw-lp-leistung { margin-bottom: 64px; }

body #page-container .et_pb_section .et_pb_row .et_flex_column > .hw-lp-leistung:last-child,
body #page-container .et_pb_section .et_pb_row .et_flex_group > .hw-lp-leistung:last-child { margin-bottom: 0; }

body #page-container .et_pb_section .et_pb_row .et_flex_column > .hw-lp-hero__text,
body #page-container .et_pb_section .et_pb_row .et_flex_group > .hw-lp-hero__text { margin-bottom: 32px; }

body #page-container .et_pb_section .et_pb_row .et_flex_column > .hw-lp-hinweiswrap,
body #page-container .et_pb_section .et_pb_row .et_flex_group > .hw-lp-hinweiswrap { margin-top: 32px; }

body #page-container .et_pb_section .et_pb_row .et_flex_column > .hw-lp-zusatz,
body #page-container .et_pb_section .et_pb_row .et_flex_group > .hw-lp-zusatz { margin-top: 48px; }

body #page-container .et_pb_section .et_pb_row .et_flex_column > .hw-listenwrap,
body #page-container .et_pb_section .et_pb_row .et_flex_group > .hw-listenwrap { margin-top: 24px; }

body #page-container .et_pb_section .et_pb_row .et_flex_group > .hw-karte-dunkel__fuss { margin-top: auto; padding-top: 24px; }

body #page-container .et_pb_section .et_pb_row .et_flex_group > .hw-btn-breit { margin-top: 20px; }

body #page-container .et_pb_section .et_pb_row .et_flex_column > .hw-gebiete,
body #page-container .et_pb_section .et_pb_row .et_flex_group > .hw-gebiete { margin-bottom: 24px; }

body #page-container .et_pb_section .et_pb_row .et_flex_group > .hw-stimme__fusswrap { margin-top: auto; }

body #page-container .et_pb_section .et_pb_row .et_flex_column > .hw-recht__titel { margin-top: 40px; margin-bottom: 8px; }

body #page-container .et_pb_section .et_pb_row .et_flex_column > .hw-recht__zurueckwrap { margin-top: 48px; }

body #page-container .et_pb_section .et_pb_row .et_flex_column > .hw-formular__hinweiswrap,
body #page-container .et_pb_section .et_pb_row .et_flex_group > .hw-formular__hinweiswrap { margin-top: 16px; }

@media (max-width: 767px) {
	body #page-container .et_pb_section .et_pb_row .et_flex_column > .hw-kopf,
	body #page-container .et_pb_section .et_pb_row .et_flex_group > .hw-kopf { margin-bottom: 40px; }

	body #page-container .et_pb_section .et_pb_row .et_flex_column > .hw-lp-leistung,
	body #page-container .et_pb_section .et_pb_row .et_flex_group > .hw-lp-leistung { margin-bottom: 48px; }

	body #page-container .et_pb_section .et_pb_row .et_flex_column > .hw-recht__titel { margin-top: 32px; }
}

/* ── Kopfzeile: zwei Rufnummern, Umbruch bei 1080 ──────────────── */
.hw-header-tel { margin-left: auto; }
.hw-header-tel .et_pb_text_inner { display: flex; flex-direction: column; gap: 2px; }
.hw-header-tel .et_pb_text_inner p { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hw-header-tel a { display: grid; grid-template-columns: 92px auto; gap: 10px;
	align-items: baseline; text-decoration: none; white-space: nowrap;
	color: var(--hw-dunkel); line-height: 1.4; }
.hw-header-tel .hw-ort { font-size: 13px; font-weight: 500; opacity: .7; }
.hw-header-tel .hw-nr { font-size: 15px; font-weight: 600; }
.hw-header-tel a:hover .hw-nr { color: var(--hw-gold); }
.hw-header-tel a:focus-visible { outline: 2px solid var(--hw-gold); outline-offset: 3px; }

body:has(#hw-hero):not(.hw-scrolled):not(.hw-menu-open) .hw-header-tel a { color: var(--hw-creme); }

@media (max-width: 1080px) {
	.et-l--header .et_pb_menu__menu { display: none !important; }
	.et-l--header .et_mobile_nav_menu { display: block !important; }
	.hw-header-tel { display: none !important; }
	.et-l--header .et-menu > li.hw-mobil-anruf { display: block; }
}

/* ── Kopfzeile: Feinschliff Rufnummern und Umbruch ─────────────── */
.hw-header-tel { align-self: center; }
.hw-header-tel .et_pb_text_inner { display: block; }
.hw-header-tel .et_pb_text_inner p {
	display: grid;
	grid-template-columns: auto auto;
	column-gap: 14px;
	row-gap: 3px;
	justify-content: end;
	align-content: center;
	margin: 0;
	line-height: 1.25;
}
.hw-header-tel a { display: contents; }
.hw-header-tel .hw-ort { font-size: 12px; font-weight: 500; opacity: .6; letter-spacing: .02em; }
.hw-header-tel .hw-nr { font-size: 15px; font-weight: 600; text-align: right; }
.hw-header-tel a:focus-visible .hw-nr { outline: 2px solid var(--hw-gold); outline-offset: 3px; }

@media (max-width: 1080px) {
	.et-l--header .et_pb_column_1_tb_header { display: none !important; }
	.et-l--header .et_pb_column_0_tb_header {
		width: 100% !important; max-width: 100% !important; flex-basis: 100% !important;
	}
	.et-l--header .et_pb_menu_inner_container { justify-content: space-between; }
	.et-l--header .et_pb_menu__wrap { justify-content: flex-end !important; }
}

.hw-header-tel br { display: none; }

/* ── Brotkrume: Freiraum unter der festen Leiste kommt von #et-main-area ── */
.hw-brotkrume { padding-top: 32px; }
@media (max-width: 767px) { .hw-brotkrume { padding-top: 24px; } }

/* Kopfzeile zurück auf 72px Höhe */
.hw-header-tel .et_pb_text_inner p { row-gap: 2px; }
.hw-header-tel .hw-ort, .hw-header-tel .hw-nr { line-height: 1.2; }