/* Ergänzungen zur statischen Kopie von staeblein-bus.de */

/* Megamenü "Gebrauchtfahrzeuge" wie "Isuzu Busse" und "Neufahrzeuge": gleiche Breite
   (Elementor-Standard statt fest 917 px) und transparente Hülle, damit die unten
   abgerundeten Ecken des weißen Kastens sichtbar sind. */
.elementor-861 .elementor-element.elementor-element-1e09e3f {
	/* Die anderen Megamenüs werden durch drei Fahrzeugkarten so breit wie die Kopfzeile;
	   dieses hat weniger Inhalt und braucht die Breite ausdrücklich. */
	width: min(var(--container-max-width, 1140px), calc(100vw - 40px)) !important;
	--content-width: 100% !important;
}
#primary-nav > li.menu-item-653 > .nav-item-children > .lqd-megamenu-rows-wrap {
	background-color: transparent !important;
}

/* Startseite: Hero füllt genau die sichtbare Höhe (svh = bei sichtbarer mobiler Adressleiste),
   abzüglich dessen, was oberhalb des Heros liegt (Header auf Tablet/Handy, misst korrekturen.js).
   min-height statt height: in sehr flachen Fenstern wächst der Hero mit, nichts wird abgeschnitten. */
.elementor-633 .elementor-element.elementor-element-038edfb {
	min-height: calc(100vh - var(--sb-hero-oben, 0px));
	min-height: calc(100svh - var(--sb-hero-oben, 0px));
}

/* Anfrageformulare: alle wie das Formular der Fahrzeugseiten (Vorlage "Vehicle Details page",
   z. B. /isuzu-bus/isuzu-grand-toro/). Die Werte stammen aus dessen berechneten Stilen.
   !important, weil die pro Seite erzeugten Elementor-Regeln sonst stärker sind. */
.elementor-widget-form .elementor-form-fields-wrapper {
	margin-left: -5px !important;
	margin-right: -5px !important;
	margin-bottom: -22px !important;
}
.elementor-widget-form .elementor-field-group {
	padding-left: 5px !important;
	padding-right: 5px !important;
	margin-bottom: 22px !important;
}
/* Firma-Feld so breit wie die anderen */
.elementor-widget-form .elementor-field-group-field_49fdbed {
	width: 100% !important;
	max-width: 100% !important;
}
.elementor-widget-form .elementor-field-textual {
	background-color: #f8f8f8 !important;
	border: 1px solid #f1f1f1 !important;
	border-radius: 3px !important;
	color: #2c2c2c !important;
}
.elementor-widget-form .elementor-button[type="submit"],
.elementor-widget-form .elementor-button[type="submit"]:hover,
.elementor-widget-form .elementor-button[type="submit"]:focus {
	background-color: #204321 !important;
	color: #fff !important;
	border-radius: 4px !important;
}
/* Symbol rechts vom Text wie beim Fahrzeugseiten-Formular */
.elementor-widget-form .elementor-button[type="submit"] .elementor-button-content-wrapper {
	flex-direction: row-reverse !important;
}
.elementor-widget-form .elementor-button[type="submit"] svg,
.elementor-widget-form .elementor-button[type="submit"] svg * {
	fill: #fff !important;
}

/* Startseite "Warum Wir?" und /neue-fahrzeuge/ "Warum Stäblein Bus?": rechte Spalte ("Stäblein", Text, Liste) beginnt auf Höhe der
   Bildoberkante links. 106 px = Dachzeile + Überschrift + Abstand bis zum Bild (feste Werte).
   Nebeneinander stehen die Spalten erst ab 1200 px. */
@media (min-width: 1200px) {
	.elementor-633 .elementor-element.elementor-element-4a664b66,
	.elementor-933 .elementor-element.elementor-element-6d93b69 { /* /neue-fahrzeuge/, "Warum Stäblein Bus?" */
		margin-top: 106px !important;
	}
}

/* Startseite, Kacheln "Das passende Fahrzeug": auf Tablet nur ca. 14 % breit (eigene
   Tablet-Breite in Elementor), Text und Buttons zerbrachen. Volle Breite der Rasterspalte. */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-633 .elementor-element-59c874b6 .elementor-widget-ld_content_box {
		--container-widget-width: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.elementor-633 .elementor-element-59c874b6 .lqd-fb__title {
		hyphens: auto;
		-webkit-hyphens: auto;
		overflow-wrap: break-word;
	}
}

/* Fahrzeugseiten, Vorschaubilder unter dem großen Bild: Hub setzt die Rahmen auf Schwarz.
   Bei transparenten PNGs (z. B. Turquoise) schien das durch, bei JPGs mit weißem Hintergrund
   (z. B. Citiport) nicht. Einheitlich weiß wie das große Bild. */
.lqd-img-gal-thumbs figure {
	background-color: #fff !important;
}

/* Technische Daten der Isuzu-Seiten (Dynamic Content Repeater-Tabelle): auf schmalen
   Bildschirmen breiter als der Inhalt, Text wurde rechts abgeschnitten. */
.dce-acf-repeater-table {
	width: 100% !important;
	max-width: 100%;
}
/* nur die Werte dürfen umbrechen, die Beschriftungen bleiben ganze Wörter */
.dce-acf-repeater-table td:not(:first-child) {
	overflow-wrap: anywhere;
}

/* Handy: lange Wörter in Hauptüberschriften (z. B. "Gebrauchtfahrzeug") ragten über den Rand */
@media (max-width: 767px) {
	h1 {
		hyphens: auto;
		-webkit-hyphens: auto;
		overflow-wrap: break-word;
	}
}

/* Spamschutz-Feld der Anfrageformulare (für Menschen unsichtbar) */
.sb-hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Datenschutz-Hinweis unter dem Absende-Button */
.sb-form-hint p {
	margin: 0.5em 0 0;
	font-size: 12px;
	line-height: 1.5;
	opacity: 0.75;
}
.sb-form-hint a {
	text-decoration: underline;
}

/* Hauptmenü: per Escape geschlossenes Untermenü bleibt zu, obwohl der Hauptlink den Fokus hat */
#primary-nav > li.sb-zu > .nav-item-children {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Megamenüs (Desktop): unsichtbare Brücke über die 11 px Lücke zwischen Menüpunkt und Panel,
   damit Hub das Menü beim langsamen Wechsel nach unten nicht schließt (mouseleave am li).
   24 px Höhe deckt auch die 10 px Verschiebung während der Einblend-Animation ab.
   Geschlossen erbt die Brücke pointer-events: none vom Panel und blockiert nichts. */
@media (min-width: 1200px) {
	#primary-nav > li.megamenu > .nav-item-children::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 24px;
		background: transparent;
	}
}

/* Fahrzeugtitel in den Loop-Karten: H1 -> H2, Schriftstärke wie zuvor als H1 */
.elementor-element-8c9cc04 h2.elementor-heading-title {
	font-weight: 600;
}

/* Link statt eingebetteter Google-Maps-Karte (/contact/) */
.sb-maps-link {
	padding: 40px 0;
	text-align: center;
}
/* Werte wie der Header-Button "Anfragen" */
.sb-maps-link .btn,
.sb-maps-link .btn:hover,
.sb-maps-link .btn:focus {
	background-color: #23381a;
	color: #e5e5e5;
	border-radius: 5px;
	font-size: 13px;
	font-weight: 500;
	padding: 10px 20px;
}
.sb-maps-link .btn:hover {
	opacity: 0.9;
}

/* Einheitliche Rundung (10 px wie Hero, Megamenüs und Karussellbilder) für Karten, Kästen
   und Bilder, die bisher eckig oder nur minimal (3–8 px) gerundet waren.
   Formularfelder und Buttons behalten ihre kleinen Rundungen. */
.elementor-widget-wrap:has(> .elementor-widget-form),               /* Formular-Karte */
.elementor-widget-ld_fancy_image figure,                            /* Bilder mit Rahmen, z. B. Ansprechpartner, Über uns */
.elementor-widget-ld_fancy_image figure img,
.lqd-fb,                                                            /* Kacheln Startseite */
.lqd-img-gal-imgs figure,                                           /* Galerie Fahrzeugseiten */
.lqd-img-gal-imgs figure img,
.elementor-1106 .elementor-widget-wrap.elementor-element-populated { /* Kästen Über uns */
	border-radius: 10px !important;
}
.lqd-fb,
.lqd-img-gal-imgs figure {
	overflow: hidden;
}
/* Fahrzeugkarten (Vorlage "Vehicle Loop") in Listen und Megamenüs */
.elementor-835 .elementor-element.elementor-element-ac4a9f3 {
	border-radius: 10px !important;
	overflow: hidden;
}
/* Vorschaubilder der Galerie */
.lqd-img-gal-thumbs figure {
	border-radius: 8px !important;
	overflow: hidden;
}

/* Neufahrzeuge (Megamenü und /neue-fahrzeuge/): nach Entfernen des MAN TGE 3.160 nur noch zwei
   Fahrzeuge. Im dreispaltigen Desktop-Raster gleiche Kartenbreite, mittig statt Lücke rechts. */
@media (min-width: 1025px) {
	.elementor-841 .elementor-element-4499bb2 .elementor-loop-container,
	.elementor-933 .elementor-element-1b37d7d .elementor-loop-container {
		grid-template-columns: repeat(2, calc((100% - 60px) / 3)) !important;
		justify-content: center;
	}
}

/* Lange URLs in Rechtstexten (z. B. Data-Privacy-Framework-Link) brechen auf dem Handy um */
#lqd-contents-wrap p a[href^="http"] {
	overflow-wrap: anywhere;
}