/* =========================================================
   Mobile Fix: Termin-/Buchungsbox (Brevo Meet / iframe)
   Ziel: keine horizontale Scrollbar, volle Breite,
   angenehme Höhe (kein "Scroll-Falle" Gefühl)
   ========================================================= */

/* 1) Safety: niemals horizontales Scrollen durch Embeds */
html, body{
  overflow-x: hidden;
}

/* 2) Wrapper um den Embed (wenn du ihn noch nicht hast: siehe Anleitung unten) */
.booking-embed{
  width: 100%;
  max-width: 100%;
  margin: 0;
}

/* 3) Iframe responsiv */
.booking-embed iframe,
iframe[src*="meet.brevo.com"],
iframe[src*="brevo.com"]{
  display:block;
  width: 100% !important;
  max-width: 100% !important;
  border: 0;
}

/* 4) Mobile: Höhe so, dass der Kalender nutzbar ist
      (ohne dass die Seite selbst "komisch" scrollt) */
@media (max-width: 768px){
  .booking-embed{
    margin-left: calc(var(--pad) * -1);
    margin-right: calc(var(--pad) * -1);
    padding-left: var(--pad);
    padding-right: var(--pad);
  }

  .booking-embed iframe,
  iframe[src*="meet.brevo.com"],
  iframe[src*="brevo.com"]{
    /* Dynamische Viewport-Höhe (iOS/Android); fallback auf vh */
    height: min(840px, calc(100dvh - 170px));
    min-height: 720px;
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(12,34,56,.10);
    background: #fff;
  }
}

/* 5) Sehr kleine Geräte */
@media (max-width: 390px){
  .booking-embed iframe,
  iframe[src*="meet.brevo.com"],
  iframe[src*="brevo.com"]{
    min-height: 680px;
    height: min(820px, calc(100dvh - 160px));
  }
}

/* =========================================================
   Anleitung (HTML):
   Wrappe deinen Brevo-Termincode so:

   <div class="booking-embed">
     ... dein Brevo embed code / iframe ...
   </div>

   Das ist der sauberste Weg, ohne Desktop zu verändern.
   ========================================================= */