
/* =========================================================
   Rheinland Immobilien – v4.9 Mobile Patch
   NUR bis 760px. Desktop bleibt vollständig auf v4.9.
   ========================================================= */

html, body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}

*, *::before, *::after{
  box-sizing:border-box;
}

/* ---------- Objektseiten: kein horizontaler Versatz ---------- */
body.object-page{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}

body.object-page .topbar{
  width:100% !important;
  max-width:100% !important;
  left:0 !important;
  right:0 !important;
}

body.object-page main,
body.object-page footer{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  overflow-x:hidden !important;
}

/* Hero bleibt optisch wie v4.9, aber nimmt garantiert die volle Displaybreite ein */
body.object-page .ri-object-hero{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  min-height:500px !important;
}

body.object-page .ri-object-hero-content{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:120px 24px 48px !important;
}

body.object-page .ri-object-hero-content h1{
  max-width:100% !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
  hyphens:auto;
}

/* Eckdaten sauber untereinander, ohne künstliche Seitenbreite */
body.object-page .ri-sticky-facts{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:20px 24px 24px !important;
  position:static !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:0 !important;
}

body.object-page .ri-sticky-facts > div{
  width:100% !important;
  min-width:0 !important;
  padding:15px 0 !important;
  border-right:0 !important;
  border-bottom:1px solid rgba(11,31,54,.10) !important;
}

body.object-page .ri-sticky-facts > a{
  width:100% !important;
  display:block !important;
  text-align:center !important;
  margin-top:18px !important;
}

/* Normale Inhalts-Sektionen zentriert und exakt innerhalb des Displays */
body.object-page .section{
  width:calc(100% - 40px) !important;
  max-width:none !important;
  margin-left:20px !important;
  margin-right:20px !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

body.object-page .ri-object-intro,
body.object-page .ri-detail-columns,
body.object-page .ri-location,
body.object-page .ri-enquiry{
  grid-template-columns:1fr !important;
  gap:32px !important;
}

/* Lange Fakten dürfen nichts nach rechts drücken */
body.object-page .ri-facts > div{
  width:100% !important;
  min-width:0 !important;
  gap:15px !important;
}

body.object-page .ri-facts span,
body.object-page .ri-facts strong,
body.object-page .ri-location p,
body.object-page .ri-object-intro p{
  min-width:0 !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
}

/* ---------- Galerie ---------- */
body.object-page .ri-gallery-grid{
  width:100% !important;
  max-width:100% !important;
  grid-template-columns:1fr 1fr !important;
  gap:7px !important;
}

body.object-page .ri-gallery-grid .ri-gallery-item{
  min-width:0 !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:1 / 1 !important;
}

body.object-page .ri-gallery-grid .ri-gallery-item:first-child{
  grid-column:1 / -1 !important;
  grid-row:auto !important;
  height:auto !important;
  aspect-ratio:16 / 10 !important;
}

body.object-page .ri-gallery-grid img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* ---------- Lightbox: X + Pfeile klar getrennt ---------- */
#riLightbox{
  padding:62px 48px 50px !important;
  touch-action:pan-y !important;
}

#riLightbox .ri-lb-stage{
  width:100% !important;
  height:calc(100dvh - 125px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#riLightbox .ri-lb-stage img,
#riLightbox > img{
  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
}

#riLightbox button{
  width:44px !important;
  height:44px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  line-height:1 !important;
  z-index:100002 !important;
  pointer-events:auto !important;
}

#riLightbox .ri-lb-close{
  top:10px !important;
  right:10px !important;
  left:auto !important;
  transform:none !important;
}

#riLightbox .ri-lb-prev{
  top:50% !important;
  left:4px !important;
  right:auto !important;
  transform:translateY(-50%) !important;
}

#riLightbox .ri-lb-next{
  top:50% !important;
  right:4px !important;
  left:auto !important;
  transform:translateY(-50%) !important;
}

#riLightbox .ri-lb-count{
  bottom:14px !important;
}

/* ---------- Kaufen: Filter & Sortieren mobil bedienbar ---------- */
.ri-buy-toolbar{
  width:100% !important;
  max-width:100% !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
  align-items:stretch !important;
}

.ri-buy-filter-wrap,
.ri-buy-sort{
  width:100% !important;
  min-width:0 !important;
}

.ri-buy-filter{
  width:100% !important;
  justify-content:center !important;
}

.ri-buy-filter-panel{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  width:100% !important;
  min-width:0 !important;
  margin-top:8px !important;
  z-index:20 !important;
}

.ri-buy-sort{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:7px !important;
}

.ri-buy-sort select{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}

/* allgemeine Immobilien-Filterleiste */
.ri-filterbar{
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}

.ri-filterbar button{
  flex:1 1 calc(50% - 8px) !important;
  min-width:0 !important;
}

/* Kontakt-Dock darf niemals Seitenbreite erzeugen */
.contact-dock{
  max-width:calc(100vw - 20px) !important;
}





/* ---------- FINAL 2: Schnellkontakt-Icons pixelgenau zentrieren ---------- */
@media (max-width:760px){
  .contact-dock a{
    position:relative !important;
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:50% !important;
    overflow:hidden !important;
    line-height:0 !important;
  }

  /* Textlabels mobil komplett ausblenden */
  .contact-dock a > span{
    display:none !important;
  }

  /* SVG wirklich geometrisch in die Kreismitte setzen */
  .contact-dock a > svg{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    width:21px !important;
    height:21px !important;
    max-width:21px !important;
    max-height:21px !important;
    overflow:visible !important;
  }

  /* optische Korrektur: Telefonpfad wirkt sonst minimal zu hoch */
  .contact-dock .dock-phone > svg{
    transform:translate(-50%,-48%) !important;
  }

  /* WhatsApp minimal größer für bessere Erkennbarkeit */
  .contact-dock .dock-whatsapp > svg{
    width:23px !important;
    height:23px !important;
    max-width:23px !important;
    max-height:23px !important;
    transform:translate(-50%,-50%) !important;
  }

  .contact-dock .dock-mail > svg{
    width:22px !important;
    height:22px !important;
    max-width:22px !important;
    max-height:22px !important;
    transform:translate(-50%,-50%) !important;
  }
}


/* =========================================================
   FINAL GLOBAL MOBILE CONSISTENCY
   Applies only <= 760px and is loaded on every page.
   ========================================================= */
@media (max-width:760px){

  /* Unified page width protection */
  html, body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  /* Header/menu never widens the viewport */
  .topbar,
  .nav,
  .header-actions{
    max-width:100vw !important;
  }

  /* Contact dock: identical on every subpage */
  .contact-dock{
    position:fixed !important;
    right:12px !important;
    bottom:12px !important;
    z-index:9990 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    width:auto !important;
    max-width:calc(100vw - 24px) !important;
    margin:0 !important;
    padding:0 !important;
  }

  .contact-dock a{
    position:relative !important;
    display:block !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    max-width:44px !important;
    max-height:44px !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:50% !important;
    overflow:hidden !important;
    line-height:0 !important;
    flex:0 0 44px !important;
  }

  .contact-dock a:hover{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    border-radius:50% !important;
    transform:none !important;
  }

  /* Remove all legacy pseudo-icons on mobile */
  .contact-dock .dock-phone::before,
  .contact-dock .dock-whatsapp::before,
  .contact-dock .dock-mail::before{
    content:none !important;
    display:none !important;
  }

  /* No labels inside circles on mobile */
  .contact-dock a > span{
    display:none !important;
  }

  /* Exact geometric centering of all three icons */
  .contact-dock a > svg{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    fill:currentColor !important;
    transform:translate(-50%,-50%) !important;
    transform-origin:center center !important;
  }

  .contact-dock .dock-phone > svg{
    width:20px !important;
    height:20px !important;
  }

  .contact-dock .dock-whatsapp > svg{
    width:23px !important;
    height:23px !important;
  }

  .contact-dock .dock-mail > svg{
    width:21px !important;
    height:21px !important;
  }

  /* Mobile forms/controls should never exceed the display */
  input, select, textarea, button{
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* Images/media stay within their containers */
  img, video{
    max-width:100%;
  }
}
