/* =====================================================
   SD Maschinenhandel – custom.css (Divi Child)
   Farben, lokale Schriften und Hilfsklassen.
   Hilfsklassen werden in Divi unter
   Erweitert › CSS-ID & Klassen › CSS-Klasse eingetragen.
   ===================================================== */


/* -----------------------------------------------------
   1. LOKALE SCHRIFT: League Spartan 400/600/700 (überall)
   Dateinamen an die Dateien im Ordner /fonts/ anpassen.
   ----------------------------------------------------- */
@font-face {
	font-family: 'League Spartan';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/league-spartan-v15-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'League Spartan';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/league-spartan-v15-latin_latin-ext-600.woff2') format('woff2');
}

@font-face {
	font-family: 'League Spartan';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/league-spartan-v15-latin_latin-ext-700.woff2') format('woff2');
}


/* -----------------------------------------------------
   2. FARBEN (identisch mit der Divi-Palette)
   ----------------------------------------------------- */
:root {
	--sd-orange: #c84a26;
	--sd-orange-hover: #a83c1e;
	--sd-schwarz: #141414;
	--sd-text: #222222;
	--sd-text-2: #666666;
	--sd-flaeche: #f2f2f2;
	--sd-linie: #e3e3e3;
	--sd-weiss: #ffffff;
}


/* -----------------------------------------------------
   3. GRUNDSCHRIFTEN
   Divi-Schriftauswahl auf „Standard“ lassen – die
   Zuordnung erfolgt hier.
   ----------------------------------------------------- */
body,
input,
textarea,
select {
	font-family: 'League Spartan', Arial, sans-serif;
	color: var(--sd-text);
}

/* Fließtext: League Spartan läuft kleiner als Open Sans, daher 18px */
html body {
	font-size: 18px;
	line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.et_pb_button,
.et_pb_menu .et-menu > li > a,
.et_pb_contact_submit {
	font-family: 'League Spartan', Arial, sans-serif;
	letter-spacing: 0.01em;
}

/* !important, weil Divi (Customizer/Module) die Stärke sonst auf normal setzt */
html body h1,
html body h2 { font-weight: 700 !important; }

html body h3,
html body h4,
html body h5,
html body h6,
html body .et_pb_module_header,
html body .et_pb_button,
html body .et_pb_menu .et-menu > li > a,
html body .et_pb_contact_submit { font-weight: 600 !important; }

strong, b { font-weight: 700; }

h2, h3, h4,
.et_pb_button,
.et_pb_menu .et-menu > li > a {
	text-transform: uppercase;
}

h2 { font-size: 34px; line-height: 1.2; }
h3 { font-size: 20px; line-height: 1.3; color: var(--sd-orange); }
h4 { font-size: 17px; line-height: 1.3; }

.et_pb_bg_layout_dark h3 { color: var(--sd-weiss); }

@media (max-width: 980px) {
	h2 { font-size: 30px; }
}

@media (max-width: 767px) {
	h2 { font-size: 26px; }
	h3 { font-size: 19px; }
	h4 { font-size: 16px; }
}


/* -----------------------------------------------------
   4. ÜBERSCHRIFTEN-HILFSKLASSEN
   ----------------------------------------------------- */

/* Unterstrich Orange für H1 und H2 – Klasse: sd-uline (am Text-Modul) */
.sd-uline h1,
.sd-uline h2 {
	display: inline-block;
	position: relative;
	padding-bottom: 8px;
}

/* Linie als eigenes Element, damit sie sich beim Scrollen "zeichnen" kann (Abschnitt 13) */
.sd-uline h1::after,
.sd-uline h2::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: var(--sd-orange);
	transform-origin: left center;
}

/* H1 als kleine Keyword-Zeile im Hero – Klasse: sd-kicker (am Text-Modul) */
.sd-kicker h1 {
	font-family: 'League Spartan', Arial, sans-serif !important;
	font-size: 15px !important;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding-bottom: 6px;
}

/* Großer Claim ohne H-Tag – Klasse: sd-claim (am Text-Modul) */
.sd-claim {
	font-weight: 700;
	letter-spacing: -0.005em;
	font-family: 'League Spartan', Arial, sans-serif;
	font-size: 56px;
	line-height: 1.1;
	text-transform: uppercase;
}

@media (max-width: 980px) {
	.sd-claim { font-size: 44px; }
}

@media (max-width: 767px) {
	.sd-claim { font-size: 34px; }
	.sd-kicker h1 { font-size: 14px !important; }
}


/* -----------------------------------------------------
   4b. BUTTON-VARIANTEN (statt Divi-Presets)
   Standard = oranger Rahmen (kommt aus dem Customizer).
   Klasse am Button-Modul unter Erweitert › CSS-Klasse:
   sd-btn-primaer  = orange gefüllt
   sd-btn-weiss    = weißer Rahmen für dunkle Flächen
   ----------------------------------------------------- */
html body #page-container .et_pb_section .et_pb_button,
html body #page-container .et_pb_section .et_pb_button:hover {
	padding: 14px 26px !important;
	border-width: 2px !important;
	border-style: solid !important;
	border-radius: 2px !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	letter-spacing: 1px !important;
}

/* Standard: oranger Rahmen */
html body #page-container .et_pb_section .et_pb_button {
	background-color: transparent !important;
	border-color: var(--sd-orange) !important;
	color: var(--sd-orange) !important;
}

html body #page-container .et_pb_section .et_pb_button:hover {
	background-color: var(--sd-orange) !important;
	border-color: var(--sd-orange) !important;
	color: var(--sd-weiss) !important;
}

/* Primär: orange gefüllt */
html body #page-container .et_pb_section .et_pb_button.sd-btn-primaer,
html body #page-container .et_pb_section .sd-btn-primaer .et_pb_button {
	background-color: var(--sd-orange) !important;
	border-color: var(--sd-orange) !important;
	color: var(--sd-weiss) !important;
}

html body #page-container .et_pb_section .et_pb_button.sd-btn-primaer:hover,
html body #page-container .et_pb_section .sd-btn-primaer .et_pb_button:hover {
	background-color: var(--sd-orange-hover) !important;
	border-color: var(--sd-orange-hover) !important;
	color: var(--sd-weiss) !important;
}

/* Weiß: für dunkle Flächen */
html body #page-container .et_pb_section .et_pb_button.sd-btn-weiss,
html body #page-container .et_pb_section .sd-btn-weiss .et_pb_button {
	background-color: transparent !important;
	border-color: var(--sd-weiss) !important;
	color: var(--sd-weiss) !important;
}

html body #page-container .et_pb_section .et_pb_button.sd-btn-weiss:hover,
html body #page-container .et_pb_section .sd-btn-weiss .et_pb_button:hover {
	background-color: var(--sd-weiss) !important;
	border-color: var(--sd-weiss) !important;
	color: var(--sd-schwarz) !important;
}

/* Divi-Pfeil-Icon ausblenden */
html body #page-container .et_pb_section .et_pb_button::after,
html body #page-container .et_pb_section .et_pb_button::before {
	display: none !important;
}


/* -----------------------------------------------------
   5. BUTTONS NEBENEINANDER
   Klasse: sd-btn-row (an der Spalte)
   ----------------------------------------------------- */
.sd-btn-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* Text-Module in der Spalte bleiben volle Breite */
.sd-btn-row > .et_pb_module:not(.et_pb_button_module_wrapper) {
	flex: 0 0 100%;
}

.sd-btn-row > .et_pb_button_module_wrapper {
	margin-bottom: 0 !important;
}

@media (max-width: 767px) {
	.sd-btn-row > .et_pb_button_module_wrapper,
	.sd-btn-row .et_pb_button {
		width: 100%;
		text-align: center;
	}

	/* Handy: Button mit Klasse sd-mobil-zuerst als ersten Button zeigen */
	.sd-btn-row > .et_pb_module:not(.et_pb_button_module_wrapper) {
		order: -2;
	}
	.sd-btn-row > .et_pb_button_module_wrapper:has(.sd-mobil-zuerst) {
		order: -1;
	}
}


/* -----------------------------------------------------
   6. KARTEN – Klasse: sd-card (an der Spalte)
   ----------------------------------------------------- */
.sd-card {
	background: var(--sd-weiss);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
	padding: 32px 28px !important;
	display: flex;
	flex-direction: column;
}

/* Karten-Überschrift: sauber trennen statt mitten im Wort umbrechen */
.sd-card h3,
.sd-card .et_pb_module_header {
	font-size: 18px;
	overflow-wrap: normal;
	word-break: normal;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* Karten-Button: volle Breite, einzeilig */
html body #page-container .et_pb_section .sd-card .et_pb_button {
	display: block;
	text-align: center;
	padding: 12px 10px !important;
	white-space: nowrap;
}

/* Button in der Karte nach unten schieben, damit alle Karten bündig sind */
.sd-card > .et_pb_button_module_wrapper {
	margin-top: auto;
	margin-bottom: 0 !important;
}


/* -----------------------------------------------------
   7. HEADER-MENÜ: aktiver Punkt mit orangem Unterstrich
   ----------------------------------------------------- */
.et_pb_menu .et-menu > li > a {
	border-bottom: 3px solid transparent;
	padding-bottom: 6px !important;
}

.et_pb_menu .et-menu > li.current-menu-item > a,
.et_pb_menu .et-menu > li.current-menu-ancestor > a {
	border-bottom-color: var(--sd-orange);
}

/* Logo im Menü-Modul: feste Höhe */
.et_pb_menu .et_pb_menu__logo-wrap,
.et_pb_menu .et_pb_menu__logo {
	max-width: none !important;
	width: auto !important;
	flex-shrink: 0;
}

.et_pb_menu .et_pb_menu__logo img {
	height: 56px !important;
	width: auto !important;
	max-height: none !important;
}

@media (max-width: 767px) {
	.et_pb_menu .et_pb_menu__logo img {
		height: 44px !important;
	}
}

/* Header-Zeile: Menü und Button vertikal mittig – Klasse: sd-header-row (an der Zeile) */
@media (min-width: 981px) {
	.sd-header-row {
		display: flex;
		align-items: center;
	}

	.sd-header-row > .et_pb_column {
		margin-bottom: 0 !important;
	}

	/* Menü-Spalte nimmt den Rest, Button-Spalte nur so breit wie nötig */
	.sd-header-row > .et_pb_column:first-child {
		flex: 1 1 auto;
		width: auto !important;
		margin-right: 24px !important;
	}

	.sd-header-row > .et_pb_column:last-child {
		flex: 0 0 auto;
		width: auto !important;
		margin-right: 0 !important;
	}

	/* Menüpunkte etwas enger, damit alles in eine Zeile passt */
	.sd-header-row .et_pb_menu .et-menu > li {
		padding-left: 9px !important;
		padding-right: 9px !important;
	}

	.sd-header-row .et_pb_menu .et-menu {
		flex-wrap: nowrap;
	}

	.sd-header-row .et_pb_menu .et_pb_menu__menu {
		flex: 1 1 auto;
		justify-content: flex-end;
	}

	/* Menüpunkte vertikal mittig zu Logo und Button */
	.sd-header-row .et_pb_menu .et_pb_menu__wrap,
	.sd-header-row .et_pb_menu .et-menu-nav,
	.sd-header-row .et_pb_menu .et-menu {
		align-items: center;
	}

	.sd-header-row .et_pb_menu .et-menu > li > a {
		padding-top: 9px !important;
		padding-bottom: 6px !important;
	}

	/* Dropdown-Pfeil auf Höhe des Textes */
	.sd-header-row .et_pb_menu .et-menu > li.menu-item-has-children > a:first-child::after {
		top: 50% !important;
		transform: translateY(-50%);
	}

	.sd-header-row .et_pb_button_module_wrapper {
		margin-bottom: 0 !important;
	}
}

/* Kleine Laptops / Tablet quer (981–1300 px): alles kompakter, damit nichts überlappt */
@media (min-width: 981px) and (max-width: 1300px) {
	.et_pb_row.sd-header-row {
		width: 94% !important;
		max-width: none !important;
	}

	.sd-header-row .et_pb_menu .et_pb_menu__logo img {
		height: 46px !important;
	}

	.sd-header-row > .et_pb_column:first-child {
		margin-right: 14px !important;
	}

	.sd-header-row .et_pb_menu .et-menu > li {
		padding-left: 6px !important;
		padding-right: 6px !important;
	}

	.sd-header-row .et_pb_menu .et-menu > li > a {
		font-size: 13px !important;
		letter-spacing: 0 !important;
	}

	html body #page-container .et_pb_section .sd-header-row .et_pb_button {
		padding: 11px 16px !important;
		font-size: 13px !important;
	}
}


/* -----------------------------------------------------
   7b. FOOTER – Klasse: sd-footer (an beiden Footer-Sektionen)
   ----------------------------------------------------- */
.sd-footer,
.sd-footer p,
.sd-footer li {
	color: #cccccc;
	font-size: 15px;
	line-height: 1.7;
}

/* Trennlinie oben, falls der Seiteninhalt davor auch schwarz ist (Kontakt-CTA) */
.et-l--footer .et_pb_section.sd-footer:first-child {
	border-top: 1px solid #333333;
}

.sd-footer .sd-fh {
	font-family: 'League Spartan', Arial, sans-serif;
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
	color: var(--sd-weiss);
	margin: 0 0 14px;
	padding: 0;
}

.sd-footer ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.sd-footer ul li {
	padding: 3px 0;
}

.sd-footer a {
	color: #cccccc !important;
	text-decoration: none;
}

.sd-footer a:hover,
.sd-footer a:focus-visible {
	color: var(--sd-weiss) !important;
	text-decoration: underline;
}

.sd-footer .sd-fclaim {
	font-family: 'League Spartan', Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--sd-weiss);
	line-height: 1.5;
	margin-top: 18px;
}

.sd-footer-bottom,
.sd-footer-bottom p {
	font-size: 13px !important;
}

/* Tablet + Handy: untere Footer-Zeile zentriert und kompakt */
@media (max-width: 980px) {
	.sd-footer-bottom .et_pb_column {
		margin-bottom: 6px !important;
	}
	.sd-footer-bottom .et_pb_column:last-child {
		margin-bottom: 0 !important;
	}
	.sd-footer-bottom .et_pb_module,
	.sd-footer-bottom .et_pb_text_inner,
	.sd-footer-bottom p {
		text-align: center !important;
	}
}

/* Icon-Liste (Font Awesome, lokal) – Klasse sd-icons an der <ul>,
   Icon-Klasse am <li>, z. B. <li class="sd-i-tel"> */
.sd-icons li {
	position: relative;
	padding: 4px 0 4px 30px !important;
}

.sd-icons li::before {
	position: absolute;
	left: 0;
	top: 7px;
	width: 18px;
	text-align: center;
	font-family: 'Font Awesome 7 Free', 'Font Awesome 6 Free';
	font-weight: 900;
	font-size: 15px;
	line-height: 1;
	color: var(--sd-orange);
	-webkit-font-smoothing: antialiased;
}

.sd-i-ort::before            { content: '\f3c5'; }
.sd-i-tel::before            { content: '\f095'; }
.sd-i-mail::before           { content: '\f0e0'; }
.sd-i-zeit::before           { content: '\f017'; }
.sd-i-kleinanzeigen::before  { content: '\f02b'; }

.sd-icons li.sd-i-wa::before,
.sd-icons li.sd-i-insta::before,
.sd-icons li.sd-i-tiktok::before,
.sd-icons li.sd-i-fb::before {
	font-family: 'Font Awesome 7 Brands', 'Font Awesome 6 Brands';
	font-weight: 400;
}

.sd-i-wa::before     { content: '\f232'; }
.sd-i-insta::before  { content: '\f16d'; }
.sd-i-tiktok::before { content: '\e07b'; }
.sd-i-fb::before     { content: '\f39e'; }


/* -----------------------------------------------------
   8. MOBIL-LEISTE (Theme-Builder-Footer)
   Klasse: sd-mobilbar (an der Sektion)
   ----------------------------------------------------- */
/* Drei Spalten auch auf dem Smartphone nebeneinander */
html body #page-container .et_pb_section.sd-mobilbar {
	padding: 0 !important;
	z-index: 99;
}

html body #page-container .et_pb_section.sd-mobilbar .et_pb_row {
	display: flex !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
}

html body #page-container .et_pb_section.sd-mobilbar .et_pb_column {
	flex: 1 1 0;
	width: auto !important;
	margin: 0 !important;
}

html body #page-container .et_pb_section.sd-mobilbar .et_pb_button_module_wrapper {
	margin: 0 !important;
}

/* Buttons der Leiste: dunkel, weiße Schrift, volle Höhe */
html body #page-container .et_pb_section.sd-mobilbar .et_pb_button,
html body #page-container .et_pb_section.sd-mobilbar .et_pb_button:hover {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 58px;
	padding: 0 6px !important;
	font-size: 14px !important;
	background-color: var(--sd-schwarz) !important;
	color: var(--sd-weiss) !important;
	border-width: 0 1px 0 0 !important;
	border-color: #333333 !important;
	border-radius: 0 !important;
}

/* Icons vor dem Text: 1 Telefon, 2 WhatsApp, 3 Ankauf */
html body #page-container .et_pb_section.sd-mobilbar .et_pb_column .et_pb_button::before {
	display: inline-block !important;
	position: static !important;
	opacity: 1 !important;
	margin: 0 8px 0 0 !important;
	font-size: 16px !important;
	line-height: 1 !important;
	color: inherit !important;
	font-weight: 900;
	font-family: 'Font Awesome 7 Free', 'Font Awesome 6 Free' !important;
}

html body #page-container .et_pb_section.sd-mobilbar .et_pb_column:nth-child(1) .et_pb_button::before {
	content: '\f095' !important;
}

html body #page-container .et_pb_section.sd-mobilbar .et_pb_column:nth-child(2) .et_pb_button::before {
	content: '\f232' !important;
	font-family: 'Font Awesome 7 Brands', 'Font Awesome 6 Brands' !important;
	font-weight: 400;
}

html body #page-container .et_pb_section.sd-mobilbar .et_pb_column:nth-child(3) .et_pb_button::before {
	content: '\f02b' !important;
}

/* „Anbieten“ orange */
html body #page-container .et_pb_section.sd-mobilbar .et_pb_button.sd-btn-primaer,
html body #page-container .et_pb_section.sd-mobilbar .et_pb_button.sd-btn-primaer:hover {
	background-color: var(--sd-orange) !important;
	border-width: 0 !important;
}

/* Nur auf Smartphone + Tablet sichtbar (Divi-Sichtbarkeit NICHT verwenden) */
@media (min-width: 981px) {
	html body #page-container .et_pb_section.sd-mobilbar {
		display: none !important;
	}
}

/* Auf Smartphone + Tablet fest am unteren Bildschirmrand */
@media (max-width: 980px) {
	html body #page-container .et_pb_section.sd-mobilbar {
		position: fixed !important;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
	}

	/* Platz unten, damit die Leiste keinen Inhalt verdeckt –
	   im dunklen Footer, damit kein weißer Streifen entsteht */
	html,
	body {
		padding-bottom: 0 !important;
		background-color: var(--sd-schwarz) !important;
	}

	#page-container,
	.et-l--footer {
		background-color: var(--sd-schwarz) !important;
	}

	.et-l--footer {
		padding-bottom: 58px !important;
	}
}


/* -----------------------------------------------------
   9. GOOGLE MAPS (Code-Modul) – Klasse: sd-map (am Code-Modul)
   ----------------------------------------------------- */
.sd-map iframe {
	display: block;
	width: 100%;
	height: 450px;
	border: 0;
}

@media (max-width: 767px) {
	.sd-map iframe { height: 320px; }
}


/* -----------------------------------------------------
   10. HÄKCHENLISTE – Klasse: sd-check (am Text-Modul mit Aufzählung)
   ----------------------------------------------------- */
.sd-check ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 8px;
}

.sd-check ul li {
	position: relative;
	padding: 0 0 10px 30px;
}

.sd-check ul li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 6px;
	width: 14px;
	height: 8px;
	border-left: 3px solid var(--sd-orange);
	border-bottom: 3px solid var(--sd-orange);
	transform: rotate(-45deg);
}

/* Auf dunklem oder orangem Hintergrund: weiße Haken */
.et_pb_bg_layout_dark .sd-check ul li::before {
	border-color: var(--sd-weiss);
}


/* -----------------------------------------------------
   11. SCHRITT-NUMMER – Klasse: sd-step (am Text-Modul)
   Im Text-Modul als erste Zeile: <span class="sd-step-n">01</span>
   ----------------------------------------------------- */
.sd-step .sd-step-n {
	display: block;
	font-family: 'League Spartan', Arial, sans-serif;
	font-weight: 700;
	font-size: 46px;
	line-height: 1;
	color: var(--sd-orange);
	margin-bottom: 10px;
}


/* -----------------------------------------------------
   11b. VERTRAUENSLEISTE – Klasse: sd-vertrauen (an der Zeile)
   4 Blurbs: Icon + Text im Textfeld, Titel bleibt leer
   ----------------------------------------------------- */
.sd-vertrauen .et_pb_blurb {
	text-align: center;
}

.sd-vertrauen .et_pb_main_blurb_image {
	margin-bottom: 12px !important;
}

.sd-vertrauen .et-pb-icon {
	color: var(--sd-orange) !important;
	font-size: 34px !important;
}

.sd-vertrauen .et_pb_blurb_description,
.sd-vertrauen .et_pb_blurb_description p {
	font-family: 'League Spartan', Arial, sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--sd-weiss);
}

/* Tablet + Handy: 2 × 2 statt untereinander */
@media (max-width: 980px) {
	html body #page-container .sd-vertrauen.et_pb_row {
		display: flex;
		flex-wrap: wrap;
	}
	html body #page-container .sd-vertrauen .et_pb_column {
		width: 50% !important;
		margin: 0 0 28px 0 !important;
		padding: 0 8px;
	}
	html body #page-container .sd-vertrauen .et_pb_column:nth-last-child(-n+2) {
		margin-bottom: 0 !important;
	}
}

@media (max-width: 767px) {
	.sd-vertrauen .et_pb_blurb_description,
	.sd-vertrauen .et_pb_blurb_description p {
		font-size: 13px;
	}
	.sd-vertrauen .et-pb-icon {
		font-size: 28px !important;
	}
}


/* -----------------------------------------------------
   11c. DUNKLE SEKTION – Klasse: sd-dunkel (an der Sektion)
   Alle Texte hell, ohne „Textfarbe: Hell“ an jedem Modul
   ----------------------------------------------------- */
.sd-dunkel {
	color: #d6d6d6;
}

.sd-dunkel p,
.sd-dunkel li,
.sd-dunkel .et_pb_text {
	color: #d6d6d6;
}

.sd-dunkel h1,
.sd-dunkel h2,
.sd-dunkel h3,
.sd-dunkel h4 {
	color: var(--sd-weiss) !important;
}

.sd-dunkel .et_pb_text a {
	color: var(--sd-weiss);
}

.sd-dunkel .et_pb_text a:hover {
	color: var(--sd-orange);
}

.sd-dunkel .sd-claim,
.sd-dunkel .sd-claim p {
	color: var(--sd-weiss);
}

.sd-dunkel .sd-step p {
	color: #d6d6d6;
}

.sd-dunkel .sd-icons {
	padding-left: 0;
	list-style: none;
	margin: 0 0 8px;
}

.sd-dunkel .sd-icons li {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}

.sd-dunkel .sd-icons li::before {
	top: 9px;
}


/* -----------------------------------------------------
   11d. SPALTEN VERTIKAL ZENTRIEREN – Klasse: sd-vcenter (an der Zeile)
   Nur Desktop; auf Tablet/Handy stehen die Spalten ohnehin untereinander
   ----------------------------------------------------- */
@media (min-width: 981px) {
	.et_pb_row.sd-vcenter {
		display: flex;
		align-items: center;
	}
}


/* -----------------------------------------------------
   11e. KEIN WEISSER ABSTAND ZWISCHEN SEITENINHALT UND FOOTER
   ----------------------------------------------------- */
.et_pb_pagebuilder_layout #main-content article,
.et_pb_pagebuilder_layout #main-content .entry-content,
.et_pb_pagebuilder_layout #main-content .et-l--post {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.et_pb_sticky_placeholder.sd-mobilbar {
	display: none !important;
}


/* -----------------------------------------------------
   12. BARRIEREFREIHEIT: sichtbarer Tastaturfokus
   ----------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.et_pb_button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--sd-orange);
	outline-offset: 2px;
}


/* -----------------------------------------------------
   13. ANIMATIONEN (zusammen mit js/custom.js)
   Greift nur, wenn <html> die Klasse "sd-js" hat:
   nicht im Visual Builder, nicht bei "Bewegung reduzieren".
   ----------------------------------------------------- */

/* Sanftes Einblenden von unten */
html.sd-js .sd-reveal {
	opacity: 0;
	transform: translate3d(0, 30px, 0);
	transition:
		opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--sd-delay, 0ms);
}

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

/* Bilder: Maske öffnet sich von unten, Foto zoomt leicht heraus */
html.sd-js .et_pb_image.sd-reveal {
	opacity: 1;
	transform: none;
}

html.sd-js .et_pb_image.sd-reveal .et_pb_image_wrap {
	overflow: hidden;
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.18, 1);
	transition-delay: var(--sd-delay, 0ms);
}

html.sd-js .et_pb_image.sd-reveal img {
	transform: scale(1.08);
	transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--sd-delay, 0ms);
}

html.sd-js .et_pb_image.sd-reveal.sd-in .et_pb_image_wrap {
	clip-path: inset(0 0 0 0);
}

html.sd-js .et_pb_image.sd-reveal.sd-in img {
	transform: scale(1);
}

/* Orange Linie unter H1/H2 zeichnet sich von links nach rechts */
html.sd-js .sd-uline.sd-reveal h1::after,
html.sd-js .sd-uline.sd-reveal h2::after {
	transform: scaleX(0);
	transition: transform 0.9s cubic-bezier(0.77, 0, 0.18, 1);
	transition-delay: calc(var(--sd-delay, 0ms) + 350ms);
}

html.sd-js .sd-uline.sd-reveal.sd-in h1::after,
html.sd-js .sd-uline.sd-reveal.sd-in h2::after {
	transform: scaleX(1);
}

/* Header beim Scrollen: flacher, mit feinem Schatten */
.et-l--header .et_pb_section,
.et-l--header .sd-header-row,
.et-l--header .et_pb_menu__logo img {
	transition: all 0.35s ease;
}

.sd-scrolled .et-l--header .et_pb_sticky {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
}

@media (min-width: 981px) {
	.sd-scrolled .et-l--header .et_pb_sticky .sd-header-row {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	.sd-scrolled .et-l--header .et_pb_sticky .et_pb_menu__logo img {
		height: 44px !important;
	}
}

/* Karten heben sich beim Überfahren leicht an */
.sd-card {
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.sd-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
}

/* Buttons füllen sich weich statt hart umzuschalten */
html body #page-container .et_pb_section .et_pb_button {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* Sicherheitsnetz: bei "Bewegung reduzieren" alles sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
	html.sd-js .sd-reveal,
	html.sd-js .et_pb_image.sd-reveal .et_pb_image_wrap,
	html.sd-js .et_pb_image.sd-reveal img,
	html.sd-js .sd-uline.sd-reveal h1::after,
	html.sd-js .sd-uline.sd-reveal h2::after {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}

	.sd-card:hover {
		transform: none;
	}
}


/* -----------------------------------------------------
   14. BUTTONS UNTEREINANDER, GLEICH BREIT
   Klasse: sd-btn-gleich (an der Spalte, zusätzlich zu sd-btn-row)
   z. B. Maschinenankauf › Anfrage
   ----------------------------------------------------- */
.sd-btn-gleich > .et_pb_button_module_wrapper {
	width: 100%;
	max-width: 380px;
}

html body #page-container .et_pb_section .sd-btn-gleich .et_pb_button {
	display: block;
	width: 100%;
	text-align: center;
}


/* -----------------------------------------------------
   15. SPALTEN AUF TABLET/HANDY UMDREHEN
   Klasse: sd-mobil-umdrehen (an der Zeile)
   z. B. Maschinenankauf › Anfrage: Text vor dem Formular
   ----------------------------------------------------- */
@media (max-width: 980px) {
	.et_pb_row.sd-mobil-umdrehen {
		display: flex;
		flex-direction: column-reverse;
	}

	.sd-mobil-umdrehen > .et_pb_column {
		margin-bottom: 30px !important;
	}

	.sd-mobil-umdrehen > .et_pb_column:first-child {
		margin-bottom: 0 !important;
	}
}


/* -----------------------------------------------------
   16. ORANGE FLÄCHE – Klasse: sd-orangeflaeche (an der Sektion)
   Hintergrund #C84A26 in Divi setzen; Texte weiß
   ----------------------------------------------------- */
.sd-orangeflaeche,
.sd-orangeflaeche p,
.sd-orangeflaeche li,
.sd-orangeflaeche .et_pb_text,
.sd-orangeflaeche h2,
.sd-orangeflaeche h3 {
	color: var(--sd-weiss) !important;
}

.sd-orangeflaeche .sd-uline h1::after,
.sd-orangeflaeche .sd-uline h2::after {
	background: var(--sd-weiss);
}

/* Button schwarz gefüllt (für orange Flächen) – Klasse: sd-btn-schwarz (am Button-Modul) */
html body #page-container .et_pb_section .et_pb_button.sd-btn-schwarz,
html body #page-container .et_pb_section .sd-btn-schwarz .et_pb_button {
	background-color: var(--sd-schwarz) !important;
	border-color: var(--sd-schwarz) !important;
	color: var(--sd-weiss) !important;
}

html body #page-container .et_pb_section .et_pb_button.sd-btn-schwarz:hover,
html body #page-container .et_pb_section .sd-btn-schwarz .et_pb_button:hover {
	background-color: var(--sd-weiss) !important;
	border-color: var(--sd-weiss) !important;
	color: var(--sd-schwarz) !important;
}


/* -----------------------------------------------------
   17. ZUSTANDSSTUFEN – Klasse: sd-stufe (am Text-Modul)
   Erste Zeile: <p class="sd-stufe-n">Stufe 1</p>
   ----------------------------------------------------- */
.sd-stufe .sd-stufe-n {
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sd-text-2);
	margin-bottom: 6px;
	padding-bottom: 0;
}

.sd-stufe h3 {
	margin-bottom: 10px;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.sd-stufe p:not(.sd-stufe-n) {
	font-size: 15px;
	line-height: 1.55;
	color: var(--sd-text-2);
}

/* Tablet: 2 Spalten statt 5 untereinander */
@media (min-width: 768px) and (max-width: 980px) {
	html body #page-container .et_pb_row:has(> .et_pb_column_1_5) {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}
	html body #page-container .et_pb_row > .et_pb_column_1_5 {
		width: calc(50% - 10px) !important;
		margin: 0 !important;
	}
}


/* -----------------------------------------------------
   18. VORHER-NACHHER – Klasse: sd-ba (an der Spalte)
   Zwei Bild-Module nebeneinander, Text darunter
   ----------------------------------------------------- */
.et_pb_column.sd-ba {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	align-content: start;
}

.sd-ba > .et_pb_image {
	margin-bottom: 0 !important;
}

.sd-ba > .et_pb_image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.sd-ba > .et_pb_text {
	grid-column: 1 / -1;
	margin-top: 6px;
}


/* -----------------------------------------------------
   19. KORREKTUR sd-btn-row: Texte mit Maximalbreite
   Text-Module (z. B. Lead mit max. 760 px) nehmen immer die
   volle Zeile ein, damit kein Button daneben rutscht.
   Die Lesebreite gilt nur für den Text darin.
   ----------------------------------------------------- */
html body #page-container .sd-btn-row > .et_pb_module:not(.et_pb_button_module_wrapper) {
	flex: 0 0 100%;
	max-width: 100% !important;
}

.sd-btn-row > .et_pb_text:not(.sd-claim):not(.sd-kicker) > .et_pb_text_inner {
	max-width: 760px;
}


/* -----------------------------------------------------
   20. KARTE MIT FOTO OBEN (z. B. Kategorien)
   Bild-Modul als erstes Modul in einer sd-card-Spalte läuft
   bis an den Kartenrand (wie im Mockup), Format 3:2
   ----------------------------------------------------- */
html body #page-container .sd-card > .et_pb_image:first-child {
	margin: -32px -28px 20px !important;
	width: calc(100% + 56px) !important;
	max-width: none !important;
	text-align: left;
}

.sd-card > .et_pb_image:first-child .et_pb_image_wrap,
.sd-card > .et_pb_image:first-child img {
	display: block;
	width: 100%;
}

.sd-card > .et_pb_image:first-child img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* ==========================================================
   21. SD-Maschinen-Kacheln auf Orangefläche
   Kacheln behalten ihre eigenen Farben (weiße Karte, dunkle Schrift)
   ========================================================== */
.sd-orangeflaeche .sdm-kachel,
.sd-orangeflaeche .sdm-kachel p,
.sd-orangeflaeche .sdm-kachel h2,
.sd-orangeflaeche .sdm-kachel h3,
.sd-orangeflaeche .sdm-kachel h4,
.sd-orangeflaeche .sdm-kachel strong,
.sd-orangeflaeche .sdm-kachel span {
	color: #141414 !important;
}
.sd-orangeflaeche .sdm-kachel .sdm-kachel-zustand span,
.sd-orangeflaeche .sdm-kachel .sdm-preis-vb {
	color: #6b6b6b !important;
}
.sd-orangeflaeche .sdm-kachel .sdm-preis--anfrage {
	color: #C84A26 !important;
}
.sd-orangeflaeche .sdm-kachel .sdm-badge {
	color: #fff !important;
}
.sd-orangeflaeche .sdm-kachel .sdm-badge--reserviert,
.sd-orangeflaeche .sdm-kachel .sdm-badge--mehrfach {
	color: #141414 !important;
}
/* keine weiße Unterstreichung an Kachel-Titeln */
.sd-orangeflaeche .sdm-kachel h3::after {
	display: none !important;
}


/* -----------------------------------------------------
   22. Überarbeitung nach Feedback Diran (17.10.2026, Fassung 3)
   Gehört zu Startseite v2, Maschinenankauf v3, Gebrauchtmaschinen v2,
   Aktuelle Maschinen v3 – ersetzt alle früheren Fassungen von Abschnitt 22
   ----------------------------------------------------- */

/* 22.1 Sprungziel „Maschinen entdecken“ nicht unter dem Sticky-Header */
#neu-eingetroffen { scroll-margin-top: 110px; }

/* 22.2 Karten ohne Wortumbruch (Zeile: sd-karten-start = Startseite,
   sd-karten-ohne-umbruch = Maschinenankauf „Was wir ankaufen“)
   Lange Wörter wie „Gebrauchtmaschinen“ bleiben in einer Zeile */
:is(.sd-karten-start, .sd-karten-ohne-umbruch) .sd-card {
	padding-left: 22px !important;
	padding-right: 22px !important;
}
:is(.sd-karten-start, .sd-karten-ohne-umbruch) .et_pb_blurb .et_pb_module_header,
:is(.sd-karten-start, .sd-karten-ohne-umbruch) .et_pb_blurb h3 {
	font-size: clamp(17px, calc(1.9vw - 5px), 21px) !important;
	line-height: 1.2 !important;
	-webkit-hyphens: none !important;
	hyphens: none !important;
	overflow-wrap: normal !important;
	word-break: normal !important;
}
:is(.sd-karten-start, .sd-karten-ohne-umbruch) .et_pb_blurb .et_pb_main_blurb_image {
	margin-bottom: 18px !important;
}
/* Symbol orange ohne Kreis – wie auf den Unterseiten (Kreise werden auf dieser Seite nicht dargestellt) */
.sd-karten-start .et_pb_blurb .et-pb-icon {
	color: #C84A26 !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	font-size: 40px !important;
}
/* kleiner Desktop (981–1150 px): 2 × 2 statt 4 nebeneinander */
@media (min-width: 981px) and (max-width: 1150px) {
	:is(.sd-karten-start, .sd-karten-ohne-umbruch) .et_pb_column {
		width: 48.5% !important;
		margin-right: 3% !important;
		margin-bottom: 3% !important;
	}
	:is(.sd-karten-start, .sd-karten-ohne-umbruch) .et_pb_column:nth-child(2n) { margin-right: 0 !important; }
}
/* Tablet: 2 × 2, Handy: untereinander */
@media (max-width: 980px) {
	:is(.sd-karten-start, .sd-karten-ohne-umbruch) .et_pb_blurb .et_pb_module_header,
	:is(.sd-karten-start, .sd-karten-ohne-umbruch) .et_pb_blurb h3 { font-size: 20px !important; }
}
@media (min-width: 600px) and (max-width: 980px) {
	:is(.sd-karten-start, .sd-karten-ohne-umbruch) .et_pb_column {
		width: 48.5% !important;
		margin-right: 3% !important;
		margin-bottom: 3% !important;
	}
	:is(.sd-karten-start, .sd-karten-ohne-umbruch) .et_pb_column:nth-child(2n) { margin-right: 0 !important; }
}

/* 22.3 Bildunterschrift (z. B. unter „Gebraucht kaufen“) */
.sd-bildunterschrift {
	margin-top: 12px !important;
}
.sd-bildunterschrift p {
	font-size: 15px;
	font-style: italic;
	color: #555555;
	padding-left: 12px;
	border-left: 3px solid #C84A26;
}

/* 22.4 Ankauf-Schritte mit Symbolen und Pfeilen (Zeile: sd-steps-pfeile) */
.sd-step .sd-step-icon {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 26px;
	color: #C84A26;
	margin-bottom: 12px;
	line-height: 1;
}
.sd-steps-pfeile .et_pb_column { position: relative; }
/* Pfeil rechts neben Schritt 1–3 (Desktop) */
.sd-steps-pfeile .et_pb_column:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 22px;
	right: -32px;
	width: 14px;
	height: 14px;
	border-top: 3px solid #C84A26;
	border-right: 3px solid #C84A26;
	transform: rotate(45deg);
	pointer-events: none;
}
/* Tablet/Handy: Schritte untereinander, Pfeil nach unten */
@media (max-width: 980px) {
	.sd-steps-pfeile .et_pb_column {
		width: 100% !important;
		margin-right: 0 !important;
		margin-bottom: 44px !important;
	}
	.sd-steps-pfeile .et_pb_column:last-child { margin-bottom: 0 !important; }
	.sd-steps-pfeile .et_pb_column:not(:last-child)::after {
		top: auto;
		bottom: -30px;
		right: auto;
		left: 8px;
		transform: rotate(135deg);
	}
}

/* 22.5 WhatsApp-Logo im Button (Klasse sd-btn-whatsapp)
   Fassung 4: Selektoren mit #page-container, sonst überstimmt
   Abschnitt 4b („Divi-Pfeil-Icon ausblenden“) das Logo */
html body #page-container .et_pb_section .et_pb_button.sd-btn-whatsapp,
html body #page-container .et_pb_section .sd-btn-whatsapp .et_pb_button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
/* in Karten und gleich breiten Button-Spalten weiter volle Breite */
html body #page-container .et_pb_section :is(.sd-card, .sd-btn-gleich) .et_pb_button.sd-btn-whatsapp,
html body #page-container .et_pb_section :is(.sd-card, .sd-btn-gleich) .sd-btn-whatsapp .et_pb_button {
	display: flex !important;
}
html body #page-container .et_pb_section .et_pb_button.sd-btn-whatsapp::before,
html body #page-container .et_pb_section .sd-btn-whatsapp .et_pb_button::before {
	content: "" !important;
	display: inline-block !important;
	position: static !important;
	opacity: 1 !important;
	margin: 0 !important;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2325D366' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Z'/%3E%3Cpath fill='%23fff' d='M17.3 14.5c-.3-.1-1.7-.8-1.9-.9-.3-.1-.5-.1-.7.1l-.9 1.1c-.2.2-.3.2-.6.1a7.6 7.6 0 0 1-3.8-3.3c-.3-.5.3-.5.8-1.6.1-.2 0-.3 0-.5l-.9-2.1c-.2-.6-.5-.5-.7-.5h-.6a1.1 1.1 0 0 0-.8.4 3.4 3.4 0 0 0-1 2.5 5.9 5.9 0 0 0 1.2 3.1 13.4 13.4 0 0 0 5.2 4.6c1.9.8 2.7.9 3.6.7a3 3 0 0 0 2-1.4 2.5 2.5 0 0 0 .2-1.4c-.1-.1-.3-.2-.6-.3Z'/%3E%3C/svg%3E");
}

/* 22.6 Neumaschinen: geteilte Fläche Schwamborn | Norton Clipper (Zeile: sd-marken) */
.sd-marken .sd-marke {
	background: #FFFFFF;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
	padding-bottom: 28px !important;
	overflow: hidden;
}
.sd-marken .sd-marke .et_pb_image:first-child {
	margin-bottom: 0 !important;
}
.sd-marken .sd-marke .et_pb_image:first-child img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
/* Logos in gleich hoher Fläche, damit die Texte darunter auf einer Linie stehen */
.sd-marken .sd-marke-logo {
	margin: 28px 28px 14px !important;
	height: 84px;
	display: flex !important;
	align-items: center;
}
.sd-marken .sd-marke-logo .et_pb_image_wrap { display: block; }
.sd-marken .sd-marke-logo img {
	max-height: 84px;
	max-width: 260px;
	width: auto;
	height: auto;
}
.sd-marken .sd-marke .et_pb_text { margin: 0 28px !important; }
@media (max-width: 980px) {
	.sd-marken .sd-marke { margin-bottom: 24px !important; }
	.sd-marken .sd-marke-logo { height: 70px; }
	.sd-marken .sd-marke-logo img { max-height: 70px; max-width: 220px; }
}

/* 22.7 Maschinenankauf: Schritte in Kästen mit leichtem Anheben (Zeile: sd-steps-kasten) */
.sd-steps-kasten .et_pb_column {
	background: #FFFFFF;
	border-top: 4px solid #C84A26;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
	padding: 28px 24px !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) {
	.sd-steps-kasten .et_pb_column:hover {
		transform: translateY(-6px);
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
	}
}
@media (prefers-reduced-motion: reduce) {
	.sd-steps-kasten .et_pb_column { transition: none; }
	.sd-steps-kasten .et_pb_column:hover { transform: none; }
}
@media (max-width: 980px) {
	.sd-steps-kasten .et_pb_column {
		width: 100% !important;
		margin-right: 0 !important;
		margin-bottom: 20px !important;
	}
	.sd-steps-kasten .et_pb_column:last-child { margin-bottom: 0 !important; }
}

/* 22.8 Hinweiszeile unter Karten */
.sd-hinweis-zeile p {
	font-size: 17px;
	font-weight: 600;
	max-width: 760px;
}

/* 22.9 Info-Symbol mit Erklärung (Code-Modul .sd-info)
   Desktop: beim Darüberfahren · Handy/Klick: beim Antippen des „i“ (reines CSS, Checkbox) */
.sd-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap;
}
.sd-info { position: relative; margin-top: 18px; }
.sd-info-toggle {
	position: absolute;
	opacity: 0;
	width: 1px; height: 1px;
	pointer-events: none;
}
.sd-info-kurz {
	font-size: 15px;
	line-height: 1.5;
	padding-bottom: 0 !important;
}
.sd-info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-left: 6px;
	border-radius: 50%;
	background: #C84A26;
	color: #FFFFFF;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	vertical-align: middle;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.sd-nowrap { white-space: nowrap; }
.sd-info-toggle:focus-visible + .sd-info-kurz .sd-info-icon {
	outline: 3px solid #141414;
	outline-offset: 2px;
}
.sd-info-text {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 20;
	margin-top: 10px;
	padding: 18px 20px;
	background: #FFFFFF;
	border-left: 4px solid #C84A26;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
	font-size: 14px;
	line-height: 1.55;
}
.sd-info-text p { padding-bottom: 10px; }
.sd-info-text p:last-child { padding-bottom: 0; }
.sd-info-text a { color: #C84A26; text-decoration: underline; }
.sd-info-toggle:checked ~ .sd-info-text { display: block; }
@media (hover: hover) {
	.sd-info:hover .sd-info-text { display: block; }
}
/* Handy: Erklärung schiebt den Inhalt nach unten statt darüberzuliegen */
@media (max-width: 980px) {
	.sd-info-text { position: static; margin-top: 12px; }
}

/* 22.10 Kartenüberschriften allgemein ohne Silbentrennung
   (z. B. Gebrauchtmaschinen „Fachgerecht aufbereitet“, „Ehrlich beschrieben“) */
.sd-card .et_pb_module_header,
.sd-card h3 {
	-webkit-hyphens: none !important;
	hyphens: none !important;
	overflow-wrap: normal !important;
	word-break: normal !important;
}

/* 22.11 Startseite „Was wir für dich tun“: Symbole zentriert (Zeile: sd-karten-start) */
.sd-karten-start .et_pb_blurb .et_pb_main_blurb_image {
	display: block !important;
	width: 100%;
	text-align: center !important;
}

.sd-karten-start .et_pb_blurb .et_pb_module_header,
.sd-karten-start .et_pb_blurb h3 {
	text-align: center !important;
}

/* ==========================================================
   22.12 SD-Skala – Karten heben sich beim Darüberfahren
   (nur Geräte mit Maus, nicht bei „Bewegung reduzieren“)
   ========================================================== */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.et_pb_column:has(> .sd-stufe) {
		transition: translate 0.25s ease, box-shadow 0.25s ease !important;
	}
	.et_pb_column:has(> .sd-stufe):hover {
		translate: 0 -6px;
		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14) !important;
	}
}
/* ==========================================================================
   23. Karussell – Divi-Galerie-Modul mit CSS-Klasse „sd-karussell“
   Seite Gebrauchtmaschinen, „Das findest du regelmäßig bei uns“ (21.10.2026)
   Die Regeln greifen erst, wenn custom.js (Abschnitt „Karussell“) die Klasse
   „sd-kar-an“ setzt. Ohne JS bleibt das normale Divi-Raster.
   PC 4 Bilder · Tablet 3 · Handy 1 Bild + Anschnitt des nächsten
   ========================================================================== */

.sd-karussell.sd-kar-an {
	position: relative;
}

/* Divi-Seitennummerierung nicht nötig – alle Bilder liegen im Karussell */
.sd-karussell.sd-kar-an .et_pb_gallery_pagination {
	display: none !important;
}

/* Bildleiste: waagerecht scrollbar, rastet je Bild ein */
.sd-karussell.sd-kar-an .et_pb_gallery_items {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 24px;
	margin: 0 !important;
	padding: 6px 2px 20px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	cursor: grab;
}

.sd-karussell.sd-kar-an .et_pb_gallery_items::-webkit-scrollbar {
	display: none;
}

.sd-karussell.sd-kar-an .et_pb_gallery_items:focus-visible {
	outline: 2px solid #C84A26;
	outline-offset: 4px;
}

/* Während mit der Maus gezogen wird: kein Einrasten, keine Glättung */
.sd-karussell.sd-kar-zieht .et_pb_gallery_items {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
}

/* Karte */
.sd-karussell.sd-kar-an .et_pb_gallery_item {
	display: block !important;          /* auch Bilder, die Divi wegen Seitennummerierung ausblendet */
	flex: 0 0 calc((100% - 72px) / 4);
	width: auto !important;
	margin: 0 !important;
	clear: none !important;
	float: none !important;
	scroll-snap-align: start;
	background: #ffffff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.sd-karussell.sd-kar-an .et_pb_gallery_image {
	border-bottom: 4px solid #C84A26;
}

.sd-karussell.sd-kar-an .et_pb_gallery_image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	-webkit-user-drag: none;
	user-select: none;
}

/* Maschinenname (= Bildtitel aus der Mediathek) */
.sd-karussell.sd-kar-an .et_pb_gallery_title {
	margin: 0 !important;
	padding: 14px 18px 18px !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: #141414 !important;
	text-transform: none !important;
}

.sd-karussell.sd-kar-an .et_pb_gallery_caption {
	display: none;
}

/* Pfeile */
.sd-kar-pfeil {
	position: absolute;
	top: 30%; /* genaue Höhe (Bildmitte) setzt custom.js */
	z-index: 3;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 2px solid #dcdcdc;
	border-radius: 50%;
	background: #ffffff;
	color: #141414;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.sd-kar-pfeil:hover,
.sd-kar-pfeil:focus-visible {
	background: #C84A26;
	border-color: #C84A26;
	color: #ffffff;
	outline: none;
}

.sd-kar-pfeil svg {
	width: 20px;
	height: 20px;
}

.sd-kar-zurueck {
	left: -24px;
}

.sd-kar-weiter {
	right: -24px;
}

/* Punkte */
.sd-kar-punkte {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}

.sd-kar-punkte button {
	width: 8px;
	height: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: #c8c8c8;
	cursor: pointer;
	transition: width 0.25s, background-color 0.25s;
}

.sd-kar-punkte button.ist-aktiv {
	width: 24px;
	background: #C84A26;
}

.sd-kar-punkte button:focus-visible {
	outline: 2px solid #C84A26;
	outline-offset: 3px;
}

/* Tablet: 3 Bilder */
@media (max-width: 980px) {
	.sd-karussell.sd-kar-an .et_pb_gallery_item {
		flex-basis: calc((100% - 48px) / 3);
	}

	.sd-kar-zurueck {
		left: -12px;
	}

	.sd-kar-weiter {
		right: -12px;
	}
}

/* Handy: 1 Bild + Anschnitt, Wischen statt Pfeile, keine Punkte (22 wären zu viele) */
@media (max-width: 767px) {
	.sd-karussell.sd-kar-an .et_pb_gallery_items {
		gap: 16px;
	}

	.sd-karussell.sd-kar-an .et_pb_gallery_item {
		flex-basis: 82%;
	}

	.sd-kar-pfeil,
	.sd-kar-punkte {
		display: none !important;
	}
}

/* Bewegung reduzieren: kein weiches Scrollen (Autoplay ist im JS dann aus) */
@media (prefers-reduced-motion: reduce) {
	.sd-karussell.sd-kar-an .et_pb_gallery_items {
		scroll-behavior: auto;
	}

	.sd-kar-punkte button {
		transition: none;
	}
}

/* ==========================================================================
   24. Header 981–1199 px: Hamburger statt volles Menü
   (Logo + 6 Menüpunkte passen nicht in die 2/3-Spalte, Button bleibt sichtbar)
   ========================================================================== */
@media (min-width: 981px) and (max-width: 1199px) {
	.sd-header-row .et_pb_menu .et_pb_menu__menu {
		display: none !important;
	}
	.sd-header-row .et_pb_menu .et_pb_menu__wrap {
		justify-content: flex-end !important;
	}
	.sd-header-row .et_pb_menu .et_mobile_nav_menu {
		display: flex !important;
		align-items: center;
		margin-left: auto;
	}
	.sd-header-row .et_pb_menu .et_mobile_menu {
		top: 100%;
		list-style: none !important;
		padding: 5% !important;
	}
	.sd-header-row .et_pb_menu .et_mobile_menu li {
		list-style: none !important;
	}
	.sd-header-row .et_pb_menu .et_mobile_menu li::before {
		display: none !important;
	}
	.sd-header-row .et_pb_menu .et_mobile_menu .sub-menu {
		padding-left: 20px !important;
	}
}

/* ==========================================================================
   25. Header Handy/Tablet: leere Button-Spalte ausblenden
   (Button „Maschine anbieten“ ist dort per Divi ausgeblendet, die Spalte blieb stehen)
   ========================================================================== */
@media (max-width: 980px) {
	.sd-header-row > .et_pb_column:last-child {
		display: none !important;
	}
	.sd-header-row > .et_pb_column:first-child {
		margin-bottom: 0 !important;
	}
}

/* ==========================================================================
   26. Buttons in zweispaltigen Zeilen unten bündig – Zeile mit Klasse „sd-btn-unten“
   (Divi-Zeile: „Gleiche Spaltenhöhe“ an). Nur PC, am Handy untereinander wie gehabt.
   ========================================================================== */
@media (min-width: 981px) {
	.sd-btn-unten > .et_pb_column {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
	}
	.sd-btn-unten > .et_pb_column > * {
		width: 100% !important;
		flex: 0 0 auto !important;
	}
	.sd-btn-unten > .et_pb_column > .et_pb_text + .et_pb_button_module_wrapper {
		margin-top: auto !important;
	}
}
/* ==========================================================================
   27. FAQ (Sektion #faq): Fragen in normaler Groß-/Kleinschreibung (Wunsch Diran)
   ========================================================================== */
#faq .et_pb_toggle_title {
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* ==========================================================================
   28. Marken-Karten: Bildunterschrift am Kartenende mit Abstand
   ========================================================================== */
.sd-marke .sd-bildunterschrift {
	margin-top: 18px !important;
	margin-bottom: 0 !important;
}
/* =========================================================
   29. Newsletter-Streifen (MailPoet-Formular id 1)
   Zeile mit CSS-Klasse sd-newsletter-box (Startseite, unter „Neu eingetroffen“)
   ========================================================= */
.et_pb_row.sd-newsletter-box {
	background-color: #C84A26;
	padding: 44px 48px !important;
	margin-top: 48px;
	align-items: center;
}
@media (min-width: 981px) {
	.et_pb_row.sd-newsletter-box {
		display: flex;
	}
}
.sd-newsletter-box h3 {
	color: #ffffff !important;
	font-size: 26px;
	line-height: 1.25;
	text-transform: uppercase;
	padding-bottom: 12px;
}
.sd-newsletter-box p,
.sd-newsletter-box .et_pb_text {
	color: #ffffff;
}
.sd-newsletter-box .et_pb_column:last-child {
	margin-bottom: 0 !important;
}

/* Formular: MailPoet-Grundstile neutralisieren */
.sd-newsletter-box .mailpoet_form,
.sd-newsletter-box .mailpoet_form form {
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	font-family: inherit !important;
}
.sd-newsletter-box .mailpoet_paragraph {
	margin-bottom: 12px !important;
	line-height: 1.5;
}

/* E-Mail-Feld */
.sd-newsletter-box .mailpoet_form input.mailpoet_text {
	width: 100% !important;
	height: 54px;
	padding: 0 16px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #ffffff !important;
	color: #141414 !important;
	font-family: inherit !important;
	font-size: 16px !important; /* 16 px: kein Zoom auf dem iPhone */
	box-sizing: border-box;
}
.sd-newsletter-box .mailpoet_form input.mailpoet_text::placeholder {
	color: #666666;
	opacity: 1;
}

/* Button */
.sd-newsletter-box .mailpoet_form input.mailpoet_submit {
	width: 100% !important;
	height: 54px;
	padding: 0 20px !important;
	border: 2px solid #141414 !important;
	border-radius: 0 !important;
	background: #141414 !important;
	color: #ffffff !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}
.sd-newsletter-box .mailpoet_form input.mailpoet_submit:hover {
	background: #ffffff !important;
	color: #141414 !important;
}
.sd-newsletter-box .mailpoet_form input:focus-visible {
	outline: 3px solid #141414 !important;
	outline-offset: 2px;
}

/* Hinweistext Datenschutz */
.sd-newsletter-box .mailpoet_form p,
.sd-newsletter-box .mailpoet_form .mailpoet_form_paragraph {
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	margin: 4px 0 0 !important;
	font-family: inherit !important;
}
.sd-newsletter-box .mailpoet_form a {
	color: #ffffff !important;
	text-decoration: underline !important;
}

/* Meldungen (Erfolg / Fehler) */
.sd-newsletter-box .mailpoet_message p,
.sd-newsletter-box .mailpoet_validate_success,
.sd-newsletter-box .mailpoet_validate_error {
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 600;
}
.sd-newsletter-box .parsley-errors-list {
	margin: 6px 0 0 !important;
	padding: 6px 10px !important;
	background: #141414;
	list-style: none !important;
}
.sd-newsletter-box .parsley-errors-list li,
.sd-newsletter-box .parsley-required,
.sd-newsletter-box .parsley-type {
	color: #ffffff !important;
	font-size: 13px !important;
}

/* Tablet / Handy */
@media (max-width: 980px) {
	.et_pb_row.sd-newsletter-box {
		padding: 32px 24px !important;
	}
	.sd-newsletter-box h3 {
		font-size: 22px;
	}
}

/* ---------------------------------------------------------
   29b. Newsletter-Streifen: CAPTCHA + Meldung nach dem Absenden
   (direkt unter Abschnitt 29 einfügen)
   --------------------------------------------------------- */
.sd-newsletter-box .mailpoet_form,
.sd-newsletter-box .mailpoet_form form,
.sd-newsletter-box .mailpoet_form > div,
.sd-newsletter-box .mailpoet_form form > div {
	width: 100% !important;
	max-width: none !important;
	text-align: left !important;
}
/* alle Texte im Formular weiß und linksbündig */
.sd-newsletter-box .mailpoet_form,
.sd-newsletter-box .mailpoet_form label,
.sd-newsletter-box .mailpoet_form p,
.sd-newsletter-box .mailpoet_form span {
	color: #ffffff !important;
	text-align: left !important;
	font-family: inherit !important;
}
/* CAPTCHA-Bild und Symbole links */
.sd-newsletter-box .mailpoet_form img {
	display: block;
	margin: 6px 0 8px !important;
	max-width: 100%;
	height: auto;
}
.sd-newsletter-box .mailpoet_form button,
.sd-newsletter-box .mailpoet_form [class*="captcha"] button {
	background: transparent !important;
	border: 0 !important;
	color: #ffffff !important;
	padding: 0 8px 0 0 !important;
	cursor: pointer;
}
.sd-newsletter-box .mailpoet_form button svg,
.sd-newsletter-box .mailpoet_form button path {
	fill: #ffffff !important;
}
/* CAPTCHA-Eingabefeld wie das E-Mail-Feld */
.sd-newsletter-box .mailpoet_form input[type="text"] {
	width: 100% !important;
	height: 54px;
	padding: 0 16px !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline-offset: 2px;
	background: #ffffff !important;
	color: #141414 !important;
	font-family: inherit !important;
	font-size: 16px !important;
	box-sizing: border-box;
}
/* Meldung nach dem Absenden */
.sd-newsletter-box .mailpoet_message,
.sd-newsletter-box .mailpoet_message p,
.sd-newsletter-box .mailpoet_validate_success {
	text-align: left !important;
	font-size: 17px !important;
	line-height: 1.5 !important;
	font-weight: 600 !important;
	max-width: none !important;
	width: 100% !important;
}

/* ---------------------------------------------------------
   29c. Newsletter-Streifen: CAPTCHA-Feld volle Breite, Symbole weiß
   (direkt unter Abschnitt 29b einfügen)
   --------------------------------------------------------- */
.sd-newsletter-box .mailpoet_form input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
	width: 100% !important;
	max-width: none !important;
	height: 54px;
	padding: 0 16px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #ffffff !important;
	color: #141414 !important;
	font-size: 16px !important;
	box-sizing: border-box;
}
/* Neu-laden- und Vorlese-Symbol neben dem CAPTCHA weiß (Bild selbst bleibt) */
.sd-newsletter-box .mailpoet_form button,
.sd-newsletter-box .mailpoet_form a:has(svg),
.sd-newsletter-box .mailpoet_form a:has(img:not([src*="captcha"])) {
	filter: invert(1);
}

/* ==========================================================
   30. Bildunterschrift auf dunklem Hintergrund (sd-dunkel)
   ========================================================== */
html body #page-container .sd-dunkel .sd-bildunterschrift,
html body #page-container .sd-dunkel .sd-bildunterschrift p {
  color: #d9d9d9 !important;
}

/* ==========================================================
   31. Buttons in den Marken-Karten (sd-marke)
   Fassung 2: Abstand + Buttons unten bündig (ab 981 px)
   ========================================================== */
html body #page-container .sd-marke .et_pb_button_module_wrapper {
  margin: 12px 28px 28px !important;
}
@media (min-width: 981px) {
  html body #page-container .et_pb_row.sd-marken > .et_pb_column.sd-marke {
    display: flex;
    flex-direction: column;
  }
  html body #page-container .sd-marke .et_pb_button_module_wrapper {
    margin-top: auto !important;
  }
}

/* 32 – Diagonales Band „Bald verfügbar“ (Hero Reparatur, Klasse sd-bald) */
.sd-bald { position: relative; overflow: hidden; }
.sd-bald::after {
  content: "Bald verfügbar";
  position: absolute; z-index: 20;
  left: -15%; right: -15%; top: 18px;
  transform: rotate(-4deg);
  background: rgba(227, 6, 19, .65);
  color: rgba(255, 255, 255, .95);
  text-align: center; font-weight: 800; text-transform: uppercase;
  letter-spacing: .14em; line-height: 1;
  font-size: clamp(24px, 3.6vw, 52px);
  padding: .32em 0;
  border-top: 2px solid rgba(255, 255, 255, .35);
  border-bottom: 2px solid rgba(255, 255, 255, .35);
  pointer-events: none;
}
@media (max-width: 767px) {
  .sd-bald::after { top: 10px; transform: rotate(-7deg); font-size: 24px; }
}

/* ==========================================================
   32. Band „Bald verfügbar“ quer über das ganze Hero-Bild
   (Reparatur, Klasse sd-bald an der Sektion) – Fassung 2
   ========================================================== */
html body #page-container .et_pb_section.sd-bald {
  position: relative;
  overflow: hidden;
}
html body #page-container .et_pb_section.sd-bald::after {
  content: "Bald verfügbar";
  position: absolute;
  z-index: 20;
  top: 50%;
  left: 50%;
  width: 160%;
  transform: translate(-50%, -50%) rotate(-12deg);
  background: rgba(200, 74, 38, .88);
  color: #fff;
  font-family: 'League Spartan', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: .14em;
  line-height: 1;
  font-size: clamp(26px, 4vw, 60px);
  padding: .4em 0;
  border-top: 3px solid rgba(255, 255, 255, .5);
  border-bottom: 3px solid rgba(255, 255, 255, .5);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  pointer-events: none;
}
@media (max-width: 767px) {
  html body #page-container .et_pb_section.sd-bald::after {
    font-size: 24px;
    transform: translate(-50%, -50%) rotate(-15deg);
  }
}

/* ==========================================================
   33. Button weiß mit oranger Schrift – Klasse: sd-btn-weiss-orange
   (z. B. Über uns › „Häufige Fragen“)
   ========================================================== */
html body #page-container .et_pb_section .et_pb_button.sd-btn-weiss-orange,
html body #page-container .et_pb_section .sd-btn-weiss-orange .et_pb_button {
  background-color: var(--sd-weiss) !important;
  border-color: var(--sd-weiss) !important;
  color: var(--sd-orange) !important;
}
html body #page-container .et_pb_section .et_pb_button.sd-btn-weiss-orange:hover,
html body #page-container .et_pb_section .sd-btn-weiss-orange .et_pb_button:hover {
  background-color: var(--sd-orange) !important;
  border-color: var(--sd-orange) !important;
  color: var(--sd-weiss) !important;
}

/* ==========================================================
   34. Hinweis-Kästchen – Klasse: sd-hinweis (am Text-Modul)
   (z. B. Neumaschinen › Zubehör- und Verschleißteile)
   ========================================================== */
.sd-hinweis {
  background: var(--sd-weiss);
  border-left: 4px solid var(--sd-orange);
  padding: 14px 18px !important;
  box-shadow: 0 2px 10px rgba(20, 20, 20, .08);
}
.sd-hinweis p {
  font-weight: 600;
  padding-bottom: 0;
}
.sd-hinweis i {
  color: var(--sd-orange);
  margin-right: 8px;
}

/* ==========================================================
   35. Forminator-Formulare im SD-Stil
   (Klasse sd-form am Code-Modul, z. B. Ankauf)
   ========================================================== */
.sd-form .forminator-ui.forminator-custom-form,
.sd-form .forminator-ui.forminator-custom-form * {
  font-family: 'League Spartan', Arial, sans-serif !important;
}
.sd-form .forminator-ui.forminator-custom-form .forminator-row {
  margin-bottom: 18px !important;
}

/* Zwischenüberschriften (Deine Maschine / Deine Kontaktdaten) */
.sd-form .forminator-ui .forminator-title {
  display: inline-block;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  color: var(--sd-schwarz) !important;
  margin: 16px 0 4px !important;
  padding-bottom: 8px !important;
  border-bottom: 3px solid var(--sd-orange) !important;
}

/* Labels */
.sd-form .forminator-ui .forminator-label {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #222 !important;
  margin-bottom: 6px !important;
}
.sd-form .forminator-ui .forminator-required {
  color: var(--sd-orange) !important;
}
.sd-form .forminator-ui .forminator-description {
  font-size: 14px !important;
  color: #666 !important;
}

/* Eingabefelder (16px verhindert Zoom auf dem iPhone) */
.sd-form .forminator-ui .forminator-input,
.sd-form .forminator-ui .forminator-textarea {
  font-size: 16px !important;
  color: #222 !important;
  background: #fafafa !important;
  border: 1px solid #dcdcdc !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
}
.sd-form .forminator-ui .forminator-input:focus,
.sd-form .forminator-ui .forminator-textarea:focus {
  border-color: var(--sd-orange) !important;
  background: #fff !important;
  outline: none !important;
}

/* Pfeile in Zahlenfeldern ausblenden */
.sd-form input[type="number"] {
  -moz-appearance: textfield;
}
.sd-form input[type="number"]::-webkit-inner-spin-button,
.sd-form input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Radio und Checkbox */
.sd-form .forminator-ui .forminator-radio,
.sd-form .forminator-ui .forminator-checkbox {
  font-size: 16px !important;
  margin-bottom: 8px !important;
}
.sd-form .forminator-ui .forminator-radio input:checked + .forminator-radio-bullet {
  border-color: var(--sd-orange) !important;
}
.sd-form .forminator-ui .forminator-radio input:checked + .forminator-radio-bullet::before {
  background-color: var(--sd-orange) !important;
}
.sd-form .forminator-ui .forminator-checkbox input:checked + .forminator-checkbox-box {
  background-color: var(--sd-orange) !important;
  border-color: var(--sd-orange) !important;
  color: #fff !important;
}

/* Foto-Upload */
.sd-form .forminator-ui .forminator-multi-upload {
  border: 2px dashed #c9c9c9 !important;
  background: #fafafa !important;
  border-radius: 0 !important;
}
.sd-form .forminator-ui .forminator-multi-upload a,
.sd-form .forminator-ui .forminator-multi-upload .forminator-multi-upload-message p a {
  color: var(--sd-orange) !important;
}

/* Absende-Button */
.sd-form .forminator-ui .forminator-button-submit {
  width: 100% !important;
  background: var(--sd-orange) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 18px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.sd-form .forminator-ui .forminator-button-submit:hover {
  background: var(--sd-schwarz) !important;
}

/* Fehlermeldungen */
.sd-form .forminator-ui .forminator-error-message {
  color: var(--sd-orange) !important;
  font-size: 14px !important;
}

/* Feldpaare ab Tablet nebeneinander, auf dem Handy mit Abstand */
html body #page-container .sd-form .forminator-ui .forminator-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 18px 16px;
}
html body #page-container .sd-form .forminator-ui .forminator-row > .forminator-col {
  flex: 1 1 220px !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* Überflüssiges Label „Datenschutz“ ausblenden */
html body #page-container .sd-form .forminator-ui .forminator-field-gdprcheckbox .forminator-label {
  display: none !important;
}

/* Hero mit Foto-Hintergrund: mobil fast ganz abdecken */
@media (max-width: 980px) {
  .sd-hero-foto::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(242, 242, 242, 0.88);
    z-index: 0;
  }
  .sd-hero-foto > .et_pb_row { position: relative; z-index: 1; }
}

/* 33 – Preise in den Maschinen-Kacheln größer (27.10.) – „VB“ wächst mit (.7em) */
.sdm .sdm-kachel-preis .sdm-preis:not(.sdm-preis--anfrage) { font-size: 27px; }
.sdm .sdm-raster--4 .sdm-kachel-preis .sdm-preis:not(.sdm-preis--anfrage) { font-size: 25px; }
@media (max-width: 599px) {
  .sdm .sdm-kachel-preis .sdm-preis:not(.sdm-preis--anfrage),
  .sdm .sdm-raster--4 .sdm-kachel-preis .sdm-preis:not(.sdm-preis--anfrage) { font-size: 20px; }
}

/* 34 – Mobiles Menü: oranger Pfeil ↳ vor Unterpunkten (27.10.) */
.et_mobile_menu .sub-menu > li > a {
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.et_mobile_menu .sub-menu > li > a::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-color: #C84A26;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1.5v7.5a2 2 0 0 0 2 2h7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.5 8l3 3-3 3' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1.5v7.5a2 2 0 0 0 2 2h7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.5 8l3 3-3 3' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Hero mit festem Seitenverhältnis – Bildausschnitt bleibt gleich */
.sd-hero-fix {
  aspect-ratio: 16 / 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-position: 50% 50% !important;
}
@media (max-width: 980px) {
  .sd-hero-fix { aspect-ratio: 4 / 3; }
}
@media (max-width: 767px) {
  .sd-hero-fix { aspect-ratio: 4 / 5; }
}

/* Einheitliches 4:3-Format für Bildpaare */
.sd-bild-4x3 .et_pb_image_wrap { display: block; }
.sd-bild-4x3 img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* 34 – Scroll-Animation abschalten (Impressum, Datenschutz, lange Texte) (28.10.) */
.sd-keine-animation .sd-reveal,
.sd-keine-animation .sd-reveal * {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
	transition: none !important;
	animation: none !important;
}
/* Header: Überlappung Menü/Button bei mittleren Breiten (29.10.2026) */
@media (min-width: 981px) and (max-width: 1400px) {
  .et-l--header .et_pb_menu .et-menu > li {
    padding-left: 8px;
    padding-right: 8px;
  }
  .et-l--header .et_pb_menu .et-menu > li > a {
    font-size: 13px;
    letter-spacing: 0.02em;
  }
  .et-l--header .et_pb_button {
    font-size: 13px !important;
    padding: 0.7em 1.2em !important;
  }
}

/* Erste Sektion jeder Seite ohne Einblend-Animation (LCP, 29.10.2026).
   Die orange Unterstreichung bleibt animiert. */
html.sd-js .et-l--post .et_pb_section_0 .sd-reveal {
	opacity: 1;
	transform: none;
	transition: none;
}
html.sd-js .et-l--post .et_pb_section_0 .et_pb_image.sd-reveal .et_pb_image_wrap {
	clip-path: none;
	transition: none;
}
html.sd-js .et-l--post .et_pb_section_0 .et_pb_image.sd-reveal img {
	transform: none;
	transition: none;
}