/* ==========================================================================
   transformis -- Ansprechpartner + Terminbuchung (Gutenberg Block)
   --------------------------------------------------------------------------
   Kachel links (1/3), Calendly-Kalender rechts (2/3).
   Die Kachel selbst kommt aus blocks/ansprechpartner/style.css – dieser Block
   liefert nur Sektion und Raster.
   ========================================================================== */

.tm-ap-booking {
  margin: 64px 0;
}

/* 1141px = 3 x 359 + 2 x 32 – dasselbe Raster wie die 3-Karten-Variante des
   Ansprechpartner-Blocks. Das Padding wird auf die max-width AUFGESCHLAGEN,
   damit der Inhalt wirklich 1141px breit ist (sonst frisst das Padding die
   Drittelung an: Kachel waere 35 % statt 33 %). */
.tm-ap-booking__inner {
  max-width: calc(1141px + 2 * var(--tm-content-padding, 24px));
  margin: 0 auto;
  padding: 0 var(--tm-content-padding, 24px);
}

/* ── Kopfbereich ── */
.tm-ap-booking__title {
  font-family: var(--tm-font-heading, "Open Sans", sans-serif) !important;
  font-weight: var(--tm-fw-extrabold, 800) !important;
  font-size: clamp(28px, 3.5vw, 40px) !important;
  line-height: 1.3 !important;
  color: var(--tm-blue, #05132C) !important;
  margin: 0 0 18px !important;
}

.tm-ap-booking__intro {
  font-family: var(--tm-font-body, "Open Sans", sans-serif) !important;
  font-weight: var(--tm-fw-regular, 400) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: var(--tm-black, #08080A) !important;
  margin: 0 !important;
  max-width: 720px;
}

/* ── Raster ──
   align-items:start, damit die Kachel oben buendig mit dem Kalender sitzt
   und nicht auf dessen volle Hoehe gestreckt wird. */
.tm-ap-booking__row {
  display: grid;
  /* Echte Drittelung (1fr / 2fr) statt fixer 359px fuer die Kachel: sonst
     verschiebt sich das Verhaeltnis auf schmaleren Desktops Richtung 40/57. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 32px;
  align-items: start;
  margin-top: 48px;
}

.tm-ap-booking__person,
.tm-ap-booking__calendar {
  min-width: 0;
}

/* Die Kachel ist im Schwester-Block ein Flex-Item mit fester Breite; hier
   ist sie normales Grid-Kind und fuellt ihre Spalte. */
.tm-ap-booking__person .tm-ansprechpartner-card {
  width: 100%;
}

/* ── Calendly ──
   Der Kalender bringt eigenen weissen Hintergrund mit; die Umrandung sorgt
   dafuer, dass er auf weissen Sektionen nicht "schwebt". */
.tm-ap-booking__calendar {
  background: var(--tm-white, #ffffff);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
}

.tm-ap-booking__widget {
  /* Hoehe kommt als Inline-Style aus render.php (Block-Einstellung). */
  width: 100%;
}

.tm-ap-booking__widget iframe {
  display: block;
  border: 0;
}

.tm-ap-booking__fallback {
  margin: 0 !important;
  padding: 32px;
}

/* ── Redaktions-Hinweis (nur fuer eingeloggte Bearbeiter) ── */
.tm-ansprechpartner__notice {
  font-family: var(--tm-font-body, "Open Sans", sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #8a6d00 !important;
  background: #fff8e1;
  border-left: 4px solid #ffc107;
  margin: 0 !important;
  padding: 16px 20px !important;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

/* Ab hier waere der Kalender schmaler als Calendlys 320px-Minimum
   plus Kachel – deshalb stapeln. */
@media (max-width: 900px) {
  .tm-ap-booking__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 32px;
  }

  /* Kachel nicht ueber die volle Breite ziehen – wirkt sonst wie ein Banner. */
  .tm-ap-booking__person .tm-ansprechpartner-card {
    max-width: 420px;
  }
}

@media (max-width: 600px) {
  .tm-ap-booking {
    margin: 48px 0;
  }

  .tm-ap-booking__person .tm-ansprechpartner-card {
    max-width: none;
  }

  .tm-ap-booking__intro {
    font-size: 16px !important;
  }
}