/* mobile-fix-global.css — nur Mobile (max-width:1024px), Desktop unverändert
 *
 * Seitenübergreifendes Mobile-Designsystem für Baumaschinen Andersch:
 *   1. Typografie (Rubik-Dirt-Headlines, Montserrat-Fließtext)
 *   2. Buttons
 *   3. Sektions-Ränder und vertikale Abstände
 *   4. Formularfelder (iOS-Auto-Zoom verhindern)
 *   5. Embeds (Google Maps, Video)
 *   6. Footer
 *   7. Cookie-Banner
 *
 * Markenwerte: Orange rgb(242,126,0) = #F27E00 (Button --color-bg), Schwarz/Weiß.
 * Selektoren bewusst generisch gehalten — seitenspezifische Dateien
 * (mobile-fix-home/-uebersicht/-detail/-seiten.css) werden danach geladen
 * und dürfen überschreiben.
 */

/* ===================================================================
   1. TYPOGRAFIE
   Onepage rechnet Header-Größen fluid aus (--font-kit-size-max +
   (size - max) * (100vw - 450px) / 318). Das ergab mobil ein unruhiges
   Nebeneinander von 24 / 29 / 31 / 32 / 35 px für gleichrangige
   Headlines. Hier gedeckelt: max. 28px (xxl 30, m 25, s 22, xs 18).
   =================================================================== */
@media (max-width: 768px) {
  /* Nur DECKELN (min mit Onepage-Formel) — kleinere Titel, z.B. in schmalen
     Listen-Spalten, bleiben unverändert. */
  .con-kit-component-header.con-kit-component-header .con-kit-quark-paragraph[data-font-kit-type] {
    font-size: min(28px, 7.2vw, calc(var(--font-kit-size-max) * 1px + (var(--font-kit-size) - var(--font-kit-size-max)) * ((100vw - 450px) / 318))) !important;
  }
  .con-kit-component-header.con-kit-component-header .con-kit-quark-paragraph[data-font-kit-type="xxl"] {
    font-size: min(30px, 7.7vw, calc(var(--font-kit-size-max) * 1px + (var(--font-kit-size) - var(--font-kit-size-max)) * ((100vw - 450px) / 318))) !important;
  }
  .con-kit-component-header.con-kit-component-header .con-kit-quark-paragraph[data-font-kit-type="m"] {
    font-size: min(25px, 6.4vw, calc(var(--font-kit-size-max) * 1px + (var(--font-kit-size) - var(--font-kit-size-max)) * ((100vw - 450px) / 318))) !important;
  }
  .con-kit-component-header.con-kit-component-header .con-kit-quark-paragraph[data-font-kit-type="s"] {
    font-size: min(22px, 5.6vw, calc(var(--font-kit-size-max) * 1px + (var(--font-kit-size) - var(--font-kit-size-max)) * ((100vw - 450px) / 318))) !important;
  }
  .con-kit-component-header.con-kit-component-header .con-kit-quark-paragraph[data-font-kit-type="xs"] {
    font-size: min(18px, calc(var(--font-kit-size-max) * 1px + (var(--font-kit-size) - var(--font-kit-size-max)) * ((100vw - 450px) / 318))) !important;
  }
}

@media (max-width: 1024px) {
  /* Lange deutsche Komposita („Baumaschinenbranche“) sauber trennen statt
     mitten im Wort hart umbrechen; ausgewogene Zeilen bei zentrierten Titeln */
  .con-kit-component-header,
  .con-kit-component-header .con-kit-quark-paragraph {
    line-height: 1.2;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 14 6 6; /* „Baumaschinen“ (12) nie trennen, lange Komposita schon */
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  /* Fließtext: Onepage-Kontrast 2 → xl 20 / l 18 / m 16 / s 14 px.
     Mobil Kontrast 1 → xl 18 / l 17 / m 16 / s 15 px (ruhiger, nie < 15px). */
  .con-kit-component-text {
    --font-kit-contrast: 1;
  }
  .con-kit-component-text .con-kit-quark-paragraph[data-font-kit-type="xs"],
  .con-kit-component-text[data-font-kit-type="xs"] {
    --font-kit-scale: -1;
  }
  .con-kit-component-text,
  .con-kit-component-text .con-kit-quark-paragraph {
    line-height: 1.55;
    overflow-wrap: break-word;
  }
}

/* ===================================================================
   2. BUTTONS
   Vorher: 36 / 48 / 56 / 61 px hoch, 14–17 px Schrift. Jetzt einheitlich
   mind. 48px hoch, 16px Schrift, Text darf umbrechen statt abgeschnitten
   zu werden. Form (Pill/eckig) und Breite bleiben Sache der Seiten.
   =================================================================== */
@media (max-width: 1024px) {
  .con-kit-component-button--title:not(.con-kit-component-button--type-transparent) {
    min-height: 48px;
    max-width: 100%;
    font-size: 16px !important;
    line-height: 1.25;
    text-align: center;
    justify-content: center;
    align-items: center;
  }
  .con-kit-component-button--title:not(.con-kit-component-button--type-transparent) .con-kit-component-button__label {
    font-size: inherit !important;
    white-space: normal;
  }
  /* Icon-/Kontakt-Links (transparente Buttons, z.B. Telefon im Footer): Tap-Target */
  .con-kit-component-button--type-transparent {
    min-height: 44px;
    align-items: center;
  }
  /* Button-Gruppen: sauberer Abstand bei Umbruch */
  .con-kit-component-link-group {
    row-gap: 12px;
  }
}

/* ===================================================================
   3. SEKTIONS-RÄNDER UND ABSTÄNDE
   Onepage setzt mobil (≤768) --one-kit-outside-padding: 24px !important.
   Einheitlich 20px. Vertikal: Onepage halbiert die Desktop-Paddings
   (85/50/60 px) — wirkt mobil noch luftig; auf 80 % und max. 56/48 px.
   =================================================================== */
@media (max-width: 768px) {
  .con-kit-section .con-kit-layer.con-kit-layer {
    --one-kit-outside-padding: 20px !important;
  }
  .con-kit-frame.con-kit-frame {
    --layout-padding-top: min(calc((var(--section-padding-top, 0px) * 0.4) + var(--section-gap-top, 0px)), 56px);
    --layout-padding-bottom: min(calc(var(--section-padding-bottom, 0px) * 0.4), 48px);
  }
}

/* ===================================================================
   4. FORMULARFELDER — iOS zoomt bei Fokus in Felder < 16px hinein
   (Viewport-Zoomsperre wurde entfernt). Gilt auch für Onepage-Felder.
   =================================================================== */
@media (max-width: 1024px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
  select,
  textarea,
  .con-kit-component-input,
  .con-kit-component-textarea,
  .con-kit-component-select {
    font-size: max(16px, 1em) !important;
  }
}

/* ===================================================================
   5. EMBEDS — Google-Maps-iframes kommen mit width="300"/"600";
   immer auf Containerbreite, neutraler Platzhalter-Hintergrund
   (statt weißer Fläche, solange die Karte lädt).
   =================================================================== */
@media (max-width: 1024px) {
  iframe[src*="google.com/maps"],
  iframe[src*="maps.google"] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    border: 0;
    border-radius: var(--one-kit-radius, 4px);
    background: #eceae6;
  }
  .con-kit-section iframe:not([src*="google.com/maps"]) {
    max-width: 100%;
  }
}

/* ===================================================================
   6. FOOTER (Sektion „fußzeile“ auf allen Seiten außer Impressum/Datenschutz)
   =================================================================== */
@media (max-width: 1024px) {
  /* Grauer Text (weiß, --alpha-text:0.5) auf Schwarz war zu kontrastarm.
     Nur helle Schrift anheben (Kontakt-Seite hat das Formular in derselben Sektion). */
  .con-kit-section.fußzeile [style*="--color-text:255,255,255;--alpha-text:0.5"] {
    --alpha-text: 0.78 !important;
  }
  .con-kit-section.fußzeile .con-kit-component-text .con-kit-quark-paragraph {
    line-height: 1.5;
  }
  /* Footer-Navigation: volle Zeilenhöhe als Tap-Fläche */
  .con-kit-section.fußzeile .con-kit-atom-menu-v2-item-inside {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* Kontakt-Icons + Text bündig, zwei gut tappbare Zeilen */
  .con-kit-section.fußzeile .con-kit-component-contacts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
  }
  .con-kit-section.fußzeile .con-kit-component-contacts .con-kit-component-button {
    min-height: 44px;
    max-width: 100%;
  }
  /* Credit-Zeile („made by …“) nicht am Bildschirmrand kleben lassen */
  .con-kit-section.fußzeile .con-kit-frame {
    padding-bottom: max(var(--layout-padding-bottom, 0px), 24px, env(safe-area-inset-bottom));
  }
}

/* ===================================================================
   7. COOKIE-BANNER
   Vorher (≤767px): Text (187px) und Buttons (119px) nebeneinander → Text
   lief über 430px Höhe; Schalter-Leiste .__list--row war 512px breit und
   ragte rechts aus dem Viewport („Performance“/„Marketing“ abgeschnitten).
   Jetzt: gestapelt Text → Schalter (2×2) → Buttons, max. ~78 % Höhe.
   =================================================================== */
@media (max-width: 767px) {
  .con-kit-component-cookie-banner {
    --gdpr-padding: 16px;
    --gdpr-text-font-size: 14px;
    padding: 8px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
  .con-kit-component-cookie-banner__wrapper {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.35) !important;
  }
  /* Erste Sektion auflösen, damit Text / Schalter / Buttons umsortiert werden können */
  .con-kit-component-cookie-banner__wrapper > .con-kit-component-cookie-banner__section:first-child {
    display: contents;
  }
  .con-kit-component-cookie-banner__wrapper > .con-kit-component-cookie-banner__section:first-child > .con-kit-component-cookie-banner__section-content {
    order: 1;
    padding: var(--gdpr-padding) var(--gdpr-padding) 12px;
    max-width: 100%;
    flex: 0 0 auto;
  }
  .con-kit-component-cookie-banner__wrapper > .con-kit-component-cookie-banner__section:not(:first-child) {
    order: 2;
  }
  .con-kit-component-cookie-banner__wrapper > .con-kit-component-cookie-banner__section:first-child > .con-kit-component-cookie-banner__section-left {
    order: 3;
    padding: 4px var(--gdpr-padding) var(--gdpr-padding);
    flex: 0 0 auto;
  }
  .con-kit-component-cookie-banner__title {
    font-size: 17px;
    margin: 0;
    line-height: 1.3;
  }
  /* Langer Rechtstext: begrenzte Höhe, scrollbar (nicht bildschirmfüllend) */
  .con-kit-component-cookie-banner__description {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    max-height: min(26vh, 190px);
    overflow-y: auto;
    padding-right: 4px;
    padding-bottom: 12px;
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
    mask-image: linear-gradient(to bottom, #000 80%, transparent);
  }
  /* Schalter + Datenschutz-Link untereinander, Schalter 2×2 */
  .con-kit-component-cookie-banner__section-content--row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px var(--gdpr-padding) !important;
  }
  .con-kit-component-cookie-banner__list--row {
    flex-wrap: wrap;
    flex: 1 1 auto;
    width: 100%;
    column-gap: 12px;
    row-gap: 0;
  }
  .con-kit-component-cookie-banner__list--row .con-kit-component-switch {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .con-kit-component-cookie-banner__list .con-kit-component-switch > span {
    font-size: 14px;
    margin-left: 10px;
  }
  .con-kit-component-cookie-banner__policy {
    min-height: 32px;
    align-items: center;
  }
  .con-kit-component-cookie-banner__link {
    font-size: 14px;
  }
  /* Buttons: „Alle akzeptieren“ voll breit, darunter Ablehnen | Auswahl speichern */
  .con-kit-component-cookie-banner .con-kit-component-cookie-banner__button-group {
    flex-direction: row !important;
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
  }
  .con-kit-component-cookie-banner__button-group .con-kit-component-button {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 48px;
    margin: 0 !important;
    font-size: 15px !important;
    padding: 8px 12px !important;
  }
  .con-kit-component-cookie-banner__button-group .con-kit-component-button:first-child {
    flex-basis: 100% !important;
  }
  .con-kit-component-cookie-banner__button-group .con-kit-component-button .con-kit-component-button__label {
    font-size: inherit !important;
    white-space: normal;
    line-height: 1.2;
  }
}

/* ===================================================================
   8. SCHWEBENDER RENTWARE-WARENKORB (rtr-checkout, Shadow-DOM)
   Der 60px-Button sitzt per .GlobalButtonPosition bei bottom/right 20px
   und überdeckt mobil voll breite Buttons (z.B. Hero-CTA „Über uns“).
   Rentware liest die Position aus geerbten Custom Properties —
   mobil enger in die Ecke rücken (+ iPhone-Home-Indikator).
   Größe ist nicht per Variable steuerbar.
   =================================================================== */
@media (max-width: 1024px) {
  rtr-checkout {
    --rentware-cart-view-position-bottom: max(12px, env(safe-area-inset-bottom));
    --rentware-cart-view-position-right: 12px;
  }
}

/* ---------- Videos: echter Player statt Fremd-Vorschaubild ----------
   Die Handy-Variante zeigte ein Thumbnail eines ANDEREN Videos in einem grauen
   24px-Rahmen; jetzt steckt der Player direkt in der Vorschau (wie auf Mieten).
   Rahmen-Regel gilt auch auf Desktop: Onepage gibt der Vorschau 40px Innenabstand
   (nur für den Play-Button gedacht) – das <video> saß sonst in einem hellen Rahmen. */
.con-kit-component-video-preview:has(> video) {
  padding: 0 !important;
  background: transparent !important;
  border-radius: 12px;
  overflow: hidden;
}
.con-kit-component-video-preview > video { border-radius: 12px; background: #000; }
@media (max-width: 1024px) {
  [data-atom="video"] .con-kit-atom-video { width: 100% !important; max-width: 420px !important; margin: 0 auto !important; }
}