/* ==========================================================================
   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.
   ========================================================================== */

/* Vertikaler Rhythmus wie beim Ansprechpartner-Modul der Leistungsseiten
   (.tm-experten in leistung.css: Sektions-Padding --tm-section-py,
   Kacheln 64px unter dem Intro). Ohne Hintergrund wird daraus Aussenabstand. */
.tm-ap-booking {
  margin: calc(var(--tm-section-py, 96px) / 2) 0;
}

/* ── Hintergrund Grau ──
   Der Block bleibt in seiner Content-Spalte (Inhaltsbreite unveraendert),
   nur die Flaeche laeuft ueber die volle Seitenbreite: ein Schatten ohne
   Unschaerfe malt das Grau seitlich nach aussen, clip-path schneidet ihn
   oben und unten auf die Blockhoehe zu. Die Seitencontainer kappen den
   Ueberstand (overflow-x: clip) – kein horizontales Scrollen. */
.tm-ap-booking--bg-grey {
  padding: var(--tm-section-py, 96px) 0;
  background: #F3F3F3; /* = .tm-experten */
  box-shadow: 0 0 0 100vmax #F3F3F3;
  clip-path: inset(0 -100vmax);
}

/* Letzter Block vor dem Footer: kein weisser Streifen unter der Flaeche */
.tm-ap-booking--bg-grey:last-child {
  margin-bottom: 0;
}

/* 1141px = 3 x 359 + 2 x 32 – dasselbe Raster wie die 3-Karten-Variante des
   Ansprechpartner-Blocks.

   Kein seitliches Padding: Die Content-Wrapper der Templates
   (.tm-lp-content, .tm-leistung__content-inner, .tm-standard__content-inner)
   haben bereits --tm-content-padding. Ein zweites Padding hier rueckte den
   Block gegenueber den uebrigen Gutenberg-Elementen nach innen. */
.tm-ap-booking__inner {
  max-width: 1146px;
  margin: 0 auto;
}

/* ── 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;
  /* Kachel auf nativer Breite, Kalenderspalte auf 820px gedeckelt.
     Warum der Deckel: Calendly rendert IM iframe eine Karte mit fester
     Maximalbreite (~800px) und zentriert sie. Ein breiterer iframe macht
     die Karte nicht groesser, sondern legt nur mehr von Calendlys weissem
     Seitenhintergrund daneben. 820px = Karte + minimale Luft. */
  grid-template-columns: minmax(0, 359px) minmax(0, 1fr);
  justify-content: start;
  gap: 32px;
  align-items: start;
  margin-top: 48px;
}

/* Im Block: 64px wie die Kacheln im Ansprechpartner-Modul. Die
   Broschuere-Landingpage nutzt __row ohne __inner und bleibt bei 48px. */
.tm-ap-booking__inner > .tm-ap-booking__row {
  margin-top: 64px;
}

/* Ohne Ueberschrift und Intro kein Abstand nach oben */
.tm-ap-booking__inner > .tm-ap-booking__row:first-child {
  margin-top: 0;
}

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

/* ── Gruenes Terminbuchungs-Panel (rechte Spalte) ──
   Ersetzt den frueheren Inline-Kalender: Calendly aenderte seine Breite je
   nach Zustand, was inline nie ohne weisse Raender oder Beschnitt passte.
   Der Kalender liegt jetzt im Modal (tm-booking-modal.css). */
.tm-ap-booking__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--tm-green, #ABFF00);
  color: var(--tm-blue, #05132C);
  padding: 40px;
  min-width: 0;
}

.tm-ap-booking__cta--empty {
  background: none;
  padding: 0;
}

.tm-ap-booking__cta-icon {
  display: block;
  color: var(--tm-blue, #05132C);
  margin-bottom: 28px;
  line-height: 0;
}

.tm-ap-booking__cta-icon svg {
  display: block;
  width: 56px;
  height: 56px;
}

.tm-ap-booking__cta-title {
  font-family: var(--tm-font-heading, "Open Sans", sans-serif) !important;
  font-weight: var(--tm-fw-extrabold, 800) !important;
  font-size: 28px !important;
  line-height: 1.3 !important;
  color: var(--tm-blue, #05132C) !important;
  margin: 0 0 14px !important;
}

.tm-ap-booking__cta-text {
  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-blue, #05132C) !important;
  margin: 0 0 28px !important;
  max-width: 42ch;
}

/* Haken-Liste. Das Haekchen kommt aus ::before, damit im Markup kein
   dekoratives Zeichen steht, das Screenreader mitlesen.

   Die Selektoren tragen bewusst .tm-ap-booking__cta davor: Seiten-CSS wie
   `.tm-lp-content__inner ul li::before` (Kampagnen-Landingpage) ist sonst
   spezifischer und ersetzt den Haken durch einen gruenen Pfeil – auf dem
   gruenen Panel unsichtbar – und setzt die Schrift auf 21px. */
.tm-ap-booking__cta .tm-ap-booking__cta-list {
  list-style: none !important;
  margin: 0 0 32px !important;
  padding: 0 !important;
}

.tm-ap-booking__cta .tm-ap-booking__cta-list li {
  position: relative;
  font-family: var(--tm-font-body, "Open Sans", sans-serif);
  font-weight: var(--tm-fw-regular, 400);
  font-size: 18px;
  line-height: 1.5;
  color: var(--tm-blue, #05132C);
  margin: 0 0 10px !important;
  padding-left: 28px;
}

.tm-ap-booking__cta .tm-ap-booking__cta-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  border: 0;
  background: none;
  color: var(--tm-blue, #05132C);
  font-weight: var(--tm-fw-bold, 700);
}

.tm-ap-booking__cta .tm-ap-booking__cta-list li:last-child {
  margin-bottom: 0 !important;
}

/* Button: dunkelblau auf Gruen (Umkehrung von .tm-btn) */
.tm-ap-booking__cta-btn {
  margin-top: auto;
  width: 100%;
  display: inline-block;
  padding: 16px 24px;
  background: var(--tm-blue, #05132C);
  color: var(--tm-white, #fff);
  border: 1px solid var(--tm-blue, #05132C);
  font-family: var(--tm-font-body, "Open Sans", sans-serif);
  font-weight: var(--tm-fw-bold, 700);
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
  text-transform: none !important;
  cursor: pointer;
  transition: background var(--tm-transition, 0.2s ease),
              color var(--tm-transition, 0.2s ease);
}

.tm-ap-booking__cta-btn:hover {
  background: #0b2450;
  color: var(--tm-white, #fff);
}

.tm-ap-booking__cta-btn:focus-visible {
  outline: 2px solid var(--tm-blue, #05132C);
  outline-offset: 3px;
}


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

/* Ab hier stapeln: darunter wird die Kachel schmaler als ihr Portraitbild
   vertraegt. Der Kalender spielt fuer den Umbruch keine Rolle mehr – er
   liegt jetzt im Modal, nicht in der Spalte. */
@media (max-width: 900px) {
  .tm-ap-booking__row,
  .tm-ap-booking__inner > .tm-ap-booking__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 32px;
  }

  .tm-ap-booking__inner > .tm-ap-booking__row:first-child {
    margin-top: 0;
  }

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

  .tm-ap-booking__cta {
    padding: 32px 24px;
  }
}

@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;
  }
}