/* mobile-fix-uebersicht.css — nur Mobile (max-width:1024px), Desktop unverändert
   Gilt nur für /baumaschinenleih/ (Mieten) und /baumaschinenkauf/ (Kaufen). */

@media (max-width: 1024px) {

  /* ---------- 1. Hero (erster Abschnitt) ---------- */
  /* H1 auf beiden Seiten gleich groß (Kaufen war 35px / 5 Zeilen) */
  section.layout [data-atom="header"] .con-kit-quark {
    font-size: 30px !important;
    line-height: 1.18 !important;
  }
  /* Einleitungstext: 20px war zu wuchtig */
  section.layout [data-atom="plain-text"] .con-kit-quark {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }
  section.layout [data-atom="person"] span {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }

  /* Marken-Logos: eine saubere Reihe statt 2+1 schief verteilt */
  section.layout [data-atom="gallery"] .con-kit-component-grid-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: center;
    width: 100%;
  }
  section.layout [data-atom="gallery"] .con-kit-component-grid-list-item {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
  }
  section.layout [data-atom="gallery"] .bmx-herologo-box { width: 100%; }
  /* Logo-Dateien sind quadratisch (Logo als Band in der Mitte) -> Seitenverhältnis wie im Original (~2.3:1) */
  section.layout [data-atom="gallery"] .con-kit-component-resizer { padding-bottom: 44% !important; }

  /* Video (Mieten): grauer 24px-Rahmen weg, abgerundet wie auf „Kaufen“ */
  section.layout .con-kit-component-video-preview:has(> video) {
    padding: 0 !important;
    background: transparent !important;
    border-radius: 12px;
    overflow: hidden;
  }
  section.layout .con-kit-component-video-preview > video { border-radius: 12px; }
  /* Hochkant-Video auf Tablet nicht bildschirmfüllend (war 768x1370px) */
  section.layout [data-atom="video"] .con-kit-atom-video { width: 100% !important; max-width: 420px !important; margin: 0 auto !important; }

  /* ---------- 2. Rentware-Widget (Mieten) ---------- */
  /* Solange das Widget nicht geladen ist: keine 600px-Leerfläche mit Spinner */
  rtr-search:not(.hydrated) { min-height: 260px !important; }

  /* ---------- 3. Marken-Ansicht ---------- */
  .bmx-wrap { padding: 0 20px; }
  .bmx-brands__head h2 { font-size: 26px; }
  .bmx-brands__head p { font-size: 15px; }
  .bmx-promo__title { font-size: 24px; }
  .bmx-promo p { font-size: 15px; line-height: 1.65; }
  .bmx-field select { font-size: 16px; } /* 16px: kein Auto-Zoom auf iOS */
}

@media (max-width: 599px) {
  .bmx-brandnav__item { min-height: 68px; }
  .bmx-brandnav__item small { font-size: 13px; white-space: nowrap; }
  .bmx-brand { padding: 32px 0; }
  .bmx-brand__head { gap: 12px; margin-bottom: 20px; }
  .bmx-plate { height: 68px; }
  .bmx-field select { padding-left: 12px; }
  /* Filter untereinander: „Teleskoplader (2)“ / „Preis aufsteigend“ passten nebeneinander nicht (abgeschnitten) */
  .bmx-brand__tools { grid-template-columns: 1fr; gap: 10px; }
  .bmx-field { flex-direction: row; align-items: center; gap: 12px; }
  .bmx-field > span { flex: 0 0 112px; }
  .bmx-field select { flex: 1 1 auto; height: 46px; }

  /* Karten: einheitliche Höhe, Bild füllt die linke Spalte ohne die Karte zu strecken */
  .bmx-card { min-height: 156px; }
  .bmx-card__img { position: relative; flex: 0 0 42%; min-height: 0; }
  .bmx-card__img img { position: absolute; inset: 0; }
  .bmx-card__body { justify-content: flex-start; padding: 14px 14px 14px 16px; }
  .bmx-card__title { overflow-wrap: anywhere; }
  .bmx-card__btn { min-height: 44px; padding: 10px 16px; }
  .bmx-promo { padding: 14px; }
}

@media (max-width: 1024px) {
  /* ---------- 4. Kategorie-Slider (Mieten: Radlader / Häcksler) ---------- */
  section[class~="products-mobil"] .con-kit-component-header .con-kit-quark { font-size: 26px !important; }
  section[class~="products-mobil"] .con-kit-component-slider-item .con-kit-quark-paragraph,
  section[class~="products-mobil"] .con-kit-component-slider-item .con-kit-quark-highlight { font-size: 22px !important; line-height: 1.3 !important; }

  /* ---------- 5. Vorteile ---------- */
  section[class~="4-gründe-mobil"] .con-kit-component-header .con-kit-quark,
  section[class~="4-gründe"] .con-kit-component-header .con-kit-quark {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }
  section[class~="4-gründe-mobil"] .con-kit-component-list-item__head .con-kit-quark,
  section[class~="4-gründe"] .con-kit-component-list-item__head .con-kit-quark {
    font-size: 20px !important;
    line-height: 1.22 !important;
  }
  section[class~="4-gründe-mobil"] .con-kit-component-list-item__body .con-kit-quark,
  section[class~="4-gründe"] .con-kit-component-list-item__body .con-kit-quark {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #555 !important;
  }
  /* Mieten: Karten-Innenabstand kleiner -> Text bekommt mehr Breite */
  section[class~="4-gründe-mobil"] .con-kit-component-list-item { padding: 20px 18px !important; }
  section[class~="4-gründe-mobil"] .con-kit-component-list-item__media,
  section[class~="4-gründe"] .con-kit-component-list-item__media {
    width: 60px !important; min-width: 60px !important; flex: 0 0 60px !important;
  }
  section[class~="4-gründe"] .con-kit-component-list-item__content { padding-right: 4px; }

  /* ---------- 6. CTA ---------- */
  section.cta .con-kit-component-header .con-kit-quark,
  section[class~="cta-mobil"] .con-kit-component-header .con-kit-quark {
    font-size: 26px !important;
    line-height: 1.22 !important;
  }
  section.cta .con-kit-frame { padding-top: 64px !important; padding-bottom: 72px !important; }
  section.cta [data-atom="header"] { --a-indent-lg: 32px !important; }

  /* ---------- 7. Kontakt / Karte ---------- */
  section.kontakt .con-kit-frame { padding-top: 136px !important; } /* ~80px liegen unter der CTA-Schräge */
  section.kontakt .con-kit-component-header .con-kit-quark { font-size: 26px !important; line-height: 1.25 !important; }
  section.kontakt iframe[src*="google.com/maps"],
  section.fußzeile iframe[src*="google.com/maps"] {
    display: block;
    width: 100% !important;
    height: 260px !important;
    border-radius: 12px;
    background: #ececec;
  }
}