.elementor-52520 .elementor-element.elementor-element-88329bf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-52520 .elementor-element.elementor-element-3758ef4{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}/* Start custom CSS *//* =============================================================
   Autohaus Schreiber – Carzilla Styling
   Seiten: /angebote-neu/detailsuche/ + /angebote-neu/detail/
   ============================================================= */

/* ---------- Variablen ---------- */
#mpi-carzilla-script-container {
  --cz-primary: #003984;
  --cz-primary-hover: #002a63;
  --cz-primary-light: rgba(0, 57, 132, 0.08);
  --cz-grey: #99a1b2;
  --cz-grey-light: #e5e8ed;
  --cz-grey-soft: #f4f6f9;
  --cz-text: #1a2233;
  --cz-text-muted: #5b6577;
  --cz-white: #ffffff;
  --cz-radius: 16px;
  --cz-radius-sm: 10px;
  --cz-shadow: 0 2px 12px rgba(0, 57, 132, 0.06);
  --cz-border: 1px solid var(--cz-grey-light);
  --cz-transition: all 0.22s ease;
}

/* =============================================================
   ELEMENTOR-KIT BUTTON RESET
   .elementor-kit-10690 button { background-color: #003984 }
   macht JEDEN button blau. Reset fuer alle im Widget.
   ============================================================= */
#mpi-carzilla-script-container button {
  background-color: transparent !important;
  background-image: none !important;
}

/* =============================================================
   CONTAINED BUTTONS (blau) — Suchen, Treffer, Haendler
   kontaktieren, Anfahrt, Galerie oeffnen
   ============================================================= */
#mpi-carzilla-script-container .MuiButton-contained,
#mpi-carzilla-script-container .MuiButton-containedPrimary {
  background-color: var(--cz-primary) !important;
  color: var(--cz-white) !important;
  border-radius: var(--cz-radius-sm) !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
}
#mpi-carzilla-script-container .MuiButton-contained:hover {
  background-color: var(--cz-primary-hover) !important;
}
/* Small-Size Buttons (z.B. "Galerie oeffnen"): kompakteres Padding,
   damit der Text einzeilig bleibt */
#mpi-carzilla-script-container .MuiButton-contained.MuiButton-sizeSmall,
#mpi-carzilla-script-container .MuiButton-containedSizeSmall {
  padding: 6px 14px !important;
  font-size: 0.85rem !important;
  white-space: nowrap !important;
}
/* Alle Inhalte in contained buttons weiss */
#mpi-carzilla-script-container .MuiButton-contained,
#mpi-carzilla-script-container .MuiButton-contained * {
  color: var(--cz-white) !important;
}
#mpi-carzilla-script-container .MuiButton-contained img,
#mpi-carzilla-script-container .MuiButton-contained .MuiButton-startIcon img,
#mpi-carzilla-script-container .MuiButton-contained .MuiButton-endIcon img {
  filter: brightness(0) invert(1) !important;
}
#mpi-carzilla-script-container .MuiButton-contained svg,
#mpi-carzilla-script-container .MuiButton-contained .MuiSvgIcon-root {
  color: var(--cz-white) !important;
  fill: var(--cz-white) !important;
}
#mpi-carzilla-script-container .MuiButton-contained svg path {
  fill: var(--cz-white) !important;
}

/* =============================================================
   ICON BUTTONS (aktiv = blau)
   ============================================================= */
#mpi-carzilla-script-container .MuiIconButton-colorPrimary {
  background-color: var(--cz-primary) !important;
  color: var(--cz-white) !important;
  border-radius: var(--cz-radius-sm) !important;
}
#mpi-carzilla-script-container .MuiIconButton-colorPrimary img {
  filter: brightness(0) invert(1) !important;
}
#mpi-carzilla-script-container .MuiIconButton-colorPrimary svg {
  color: var(--cz-white) !important;
}

/* =============================================================
   OUTLINED BUTTONS (Expose, Probefahrt etc.)
   ============================================================= */
#mpi-carzilla-script-container .MuiButton-outlined,
#mpi-carzilla-script-container .MuiButton-outlinedPrimary {
  border: 1.5px solid var(--cz-primary) !important;
  color: var(--cz-primary) !important;
  border-radius: var(--cz-radius-sm) !important;
  text-transform: none !important;
  font-weight: 600 !important;
  background: transparent !important;
}
#mpi-carzilla-script-container .MuiButton-outlined * {
  color: var(--cz-primary) !important;
}
#mpi-carzilla-script-container .MuiButton-outlined svg {
  color: var(--cz-primary) !important;
  fill: var(--cz-primary) !important;
}

/* =============================================================
   ZURUECKSETZEN-LINK (Detailsuche oben)
   ============================================================= */
#mpi-carzilla-script-container button.MuiLink-button {
  background: none !important;
  background-color: transparent !important;
  color: var(--cz-primary) !important;
  text-decoration: none !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#mpi-carzilla-script-container button.MuiLink-button * {
  color: var(--cz-primary) !important;
}
#mpi-carzilla-script-container button.MuiLink-button img {
  filter: brightness(0) saturate(100%) invert(13%) sepia(96%)
    saturate(2940%) hue-rotate(212deg) brightness(95%) contrast(102%) !important;
}

/* =============================================================
   BREADCRUMBS (Neue Suche / Suche verfeinern / Trefferliste)
   ============================================================= */
#mpi-carzilla-script-container .MuiBreadcrumbs-root .MuiLink-root {
  color: var(--cz-primary);
  font-weight: 500;
  text-decoration: none !important;
}
#mpi-carzilla-script-container a.MuiLink-root {
  text-decoration: none !important;
}

/* =============================================================
   SEKTIONS-UEBERSCHRIFTEN
   ============================================================= */
#mpi-carzilla-script-container .MuiTypography-h5 {
  color: var(--cz-primary);
  font-weight: 700;
}

/* =============================================================
   TABS (Ausstattung auf Detailsuche + Finanzierung auf Detail)
   ============================================================= */
#mpi-carzilla-script-container .MuiTabs-root {
  border-bottom: 2px solid var(--cz-grey-light);
}
#mpi-carzilla-script-container .MuiTabs-indicator {
  background-color: var(--cz-primary) !important;
  height: 3px !important;
  border-radius: 3px 3px 0 0;
}
/* Inaktiver Tab */
#mpi-carzilla-script-container button.MuiTab-root {
  background-color: var(--cz-grey-soft) !important;
  color: var(--cz-text-muted) !important;
  border: 1px solid var(--cz-grey-light) !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
  text-transform: none !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  padding: 8px 14px !important;
  min-height: 40px !important;
  opacity: 1 !important;
  margin-right: 2px !important;
}
#mpi-carzilla-script-container button.MuiTab-root:hover:not(.Mui-selected) {
  color: var(--cz-primary) !important;
  background-color: var(--cz-primary-light) !important;
}
/* Aktiver Tab */
#mpi-carzilla-script-container button.MuiTab-root.Mui-selected {
  background-color: var(--cz-primary) !important;
  color: var(--cz-white) !important;
  border-color: var(--cz-primary) !important;
}

/* =============================================================
   ACCORDIONS (Detail-Seite: Beschreibung, Technik, Komfort etc.)
   ============================================================= */
#mpi-carzilla-script-container .MuiAccordion-root {
  border-radius: 12px !important;
  border: var(--cz-border);
  box-shadow: none !important;
  margin-bottom: 8px;
}
#mpi-carzilla-script-container .MuiAccordion-root::before {
  display: none;
}
#mpi-carzilla-script-container .MuiAccordionSummary-root {
  padding: 4px 20px;
  min-height: 52px;
  font-weight: 600;
}
#mpi-carzilla-script-container .MuiAccordionSummary-root:hover {
  background-color: var(--cz-grey-soft);
}

/* =============================================================
   FORMFELDER
   ============================================================= */
#mpi-carzilla-script-container .MuiOutlinedInput-root {
  border-radius: var(--cz-radius-sm) !important;
}
#mpi-carzilla-script-container .MuiOutlinedInput-notchedOutline {
  border-color: var(--cz-grey-light) !important;
}
#mpi-carzilla-script-container .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--cz-primary) !important;
  border-width: 2px !important;
}

/* =============================================================
   CHECKBOXEN
   ============================================================= */
#mpi-carzilla-script-container .MuiCheckbox-root {
  color: var(--cz-grey) !important;
}
#mpi-carzilla-script-container .MuiCheckbox-root.Mui-checked {
  color: var(--cz-primary) !important;
}

/* =============================================================
   SLIDER (Preis, km, Erstzulassung, Leistung, Sitze, Finanzierung)
   ============================================================= */
#mpi-carzilla-script-container .MuiSlider-root {
  color: var(--cz-primary) !important;
}
#mpi-carzilla-script-container .MuiSlider-thumb {
  background-color: var(--cz-white) !important;
  border: 3px solid var(--cz-primary) !important;
}
#mpi-carzilla-script-container .MuiSlider-rail {
  background-color: var(--cz-grey-light) !important;
  opacity: 1;
}
#mpi-carzilla-script-container .MuiSlider-track {
  background-color: var(--cz-primary) !important;
}
#mpi-carzilla-script-container .MuiSlider-valueLabel {
  background-color: var(--cz-primary) !important;
}
#mpi-carzilla-script-container .MuiSlider-markLabel {
  color: var(--cz-text-muted);
  font-size: 0.78rem;
}

/* =============================================================
   DETAIL-SEITE: Galerie-Bilder abgerundet
   ============================================================= */
#mpi-carzilla-script-container #mpiVehicleDetail img.MuiBox-root[alt=""] {
  border-radius: 12px;
}

/* =============================================================
   DETAIL-SEITE: Preis-Container rechts (Paper)
   ============================================================= */
#mpi-carzilla-script-container .MuiPaper-root {
  border-radius: 12px !important;
}

/* =============================================================
   DETAIL-SEITE: Chip "sofort verfuegbar"
   ============================================================= */
#mpi-carzilla-script-container .MuiChip-root {
  border-radius: 999px !important;
  font-weight: 600;
}

/* =============================================================
   DETAIL-SEITE: Fahrzeugkarten (Aehnliche Fahrzeuge)
   ============================================================= */
#mpi-carzilla-script-container .mpi-vehicle-card-template3 {
  border-radius: var(--cz-radius) !important;
  border: var(--cz-border);
  box-shadow: var(--cz-shadow);
  background: var(--cz-white);
  transition: var(--cz-transition);
}
#mpi-carzilla-script-container .mpi-vehicle-card-template3:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 57, 132, 0.12);
  border-color: var(--cz-primary);
}
#mpi-carzilla-script-container .mpi-vehicle-card-template3 .MuiTypography-h1 {
  color: var(--cz-primary);
  font-weight: 700;
}

/* =============================================================
   DIVIDERS
   ============================================================= */
#mpi-carzilla-script-container .MuiDivider-root {
  border-color: var(--cz-grey-light);
}

/* =============================================================
   DISABLED BUTTONS
   ============================================================= */
#mpi-carzilla-script-container .MuiButton-root.Mui-disabled,
#mpi-carzilla-script-container .MuiIconButton-root.Mui-disabled {
  background-color: transparent !important;
  color: var(--cz-grey) !important;
  opacity: 0.5;
}

/* =============================================================
   FOOTER
   ============================================================= */
#mpi-carzilla-script-container #footer {
  margin-top: 24px;
  opacity: 0.6;
  font-size: 0.78rem;
}

/* =============================================================
   LEICHT BLAEULICHE HINTERLEGUNG
   fuer Sidebar-Filter-Bereich, Header-Bar, Detail-Info-Panels
   ============================================================= */
#mpi-carzilla-script-container .MuiPaper-root.css-102r86w,
#mpi-carzilla-script-container .MuiPaper-root.css-157qbnu,
#mpi-carzilla-script-container .MuiPaper-root.css-gjvb6w {
  background-color: var(--cz-grey-soft) !important;
  border: var(--cz-border);
}
/* Sidebar-Accordion-Wrapper: leichter Hintergrund */
#mpi-carzilla-script-container .css-khsgwu {
  background-color: var(--cz-grey-soft);
  border-radius: var(--cz-radius-sm);
  padding: 8px;
}

/* =============================================================
   DETAIL-SEITE: Rechte Sidebar (Preis, Teilen, Expose)
   -------------------------------------------------------------
   Carzilla legt Teilen + Expose in eine MuiGrid-grid-xs-1 Spalte
   (~8% Breite), was sie unleserlich klein macht. Wir packen sie
   raus und stellen sie als gleichgrosse Buttons NEBENEINANDER
   ueber den Preis. CO2-Werte bleiben unberuehrt.
   ============================================================= */

/* Der schmale Container, der Teilen+Expose enthaelt: volle Breite */
#mpi-carzilla-script-container .css-gjvb6w .MuiGrid-item.MuiGrid-grid-xs-1,
#mpi-carzilla-script-container .css-gjvb6w .MuiGrid-item.MuiGrid-grid-sm-2,
#mpi-carzilla-script-container .css-gjvb6w .MuiGrid-item.MuiGrid-grid-md-3 {
  flex-basis: 100% !important;
  max-width: 100% !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  margin-top: 8px;
}

/* Die clickable-Wrapper innerhalb: gleiche Breite je 50% */
#mpi-carzilla-script-container .css-gjvb6w .MuiGrid-item.MuiGrid-grid-xs-1 > .clickable,
#mpi-carzilla-script-container .css-gjvb6w .MuiGrid-item.MuiGrid-grid-sm-2 > .clickable,
#mpi-carzilla-script-container .css-gjvb6w .MuiGrid-item.MuiGrid-grid-md-3 > .clickable {
  flex: 1 1 50% !important;
  min-width: 0 !important;
}

/* Teilen + Expose Buttons: einheitliches Aussehen, volle Breite */
#mpi-carzilla-script-container .css-gjvb6w .clickable > button,
#mpi-carzilla-script-container .css-gjvb6w .clickable > a {
  width: 100% !important;
  padding: 10px 12px !important;
  font-size: 0.88rem !important;
  min-width: 0 !important;
  margin-top: 0 !important;
  white-space: nowrap;
  justify-content: center;
}

/* Chip "sofort verfuegbar" darueber soll auch volle Breite haben */
#mpi-carzilla-script-container .css-gjvb6w .MuiGrid-item.MuiGrid-grid-xs-11 {
  flex-basis: 100% !important;
  max-width: 100% !important;
}
#mpi-carzilla-script-container .css-gjvb6w .MuiChip-root {
  display: inline-flex;
}

/* Preis gross und prominent */
#mpi-carzilla-script-container .MuiTypography-h2 {
  color: var(--cz-primary);
  font-weight: 700;
}

/* "Haendler kontaktieren" volle Breite, prominent */
#mpi-carzilla-script-container .MuiButton-contained.MuiButton-fullWidth {
  padding: 12px 22px !important;
  font-size: 1rem !important;
}/* End custom CSS */