/* ==========================================================================
   transformis® · Termin-Modal (Calendly)
   --------------------------------------------------------------------------
   Markup wird von Transformis_Ansprechpartner::render_modals() im Footer
   ausgegeben – deshalb global geladen und nicht ueber block.json.
   Chrome (Backdrop, Dialog, Close) bewusst analog zum Broschueren-Modal.
   ========================================================================== */

/* Verstecken ueber visibility statt display:none.
   Grund: Das Widget wird nach dem Seitenaufbau vorgeladen (tm-booking-modal.js).
   Bei display:none haette der Dialog die Breite 0 – Calendly wuerde dann sein
   Mobil-Layout initialisieren. Mit visibility behaelt er seine echten Masse.
   pointer-events:none verhindert, dass das unsichtbare Overlay Klicks abfaengt. */
.tm-booking-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.tm-booking-modal[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 200ms ease, visibility 0s;
}

.tm-booking-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 19, 44, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Breite so, dass Calendly sein zweispaltiges Layout zeigt (ab ca. 1000px).
   Im Modal ist das unproblematisch: Der weisse Rand, der inline gestoert
   hat, faellt hier mit dem weissen Dialog zusammen. */
.tm-booking-modal__dialog {
  position: relative;
  width: min(1100px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  background: var(--tm-white, #fff);
  /* Knapp gehalten: Calendly bringt im iframe eigene Innenabstaende mit.
     Oben/unten bewusst kleiner als seitlich – seitlich braucht der Kalender
     bei ausgewaehltem Tag jeden Pixel fuer die Uhrzeiten-Spalte. */
  padding: 8px 12px 4px;
  box-sizing: border-box;
  overflow-y: auto;
  animation: tmBookingFadeIn 220ms ease-out both;
}

@keyframes tmBookingFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tm-booking-modal__close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--tm-blue, #05132C);
  line-height: 0;
  z-index: 1;
}

.tm-booking-modal__close:hover,
.tm-booking-modal__close:focus-visible {
  color: #000;
  outline: none;
}


.tm-booking-modal__widget {
  width: 100%;
}

.tm-booking-modal__fallback {
  font-family: var(--tm-font-body, "Open Sans", sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 0 4px !important;
  text-align: center;
}

.tm-booking-modal__fallback a {
  color: var(--tm-blue, #05132C);
  text-decoration: underline;
}

/* Calendly konnte nicht geladen werden (Consent-Tool, Netz): Widget-Flaeche
   einklappen, damit nur noch der Link darunter steht. */
.tm-booking-modal__widget.is-unavailable {
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
}

/* Seite hinter dem offenen Modal nicht mitscrollen */
body.tm-booking-modal-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .tm-booking-modal__dialog {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    padding: 8px;
  }
}