/* ==========================================================================
   transformis® · Broschuere Download (Modal) – Gutenberg Block
   --------------------------------------------------------------------------
   Full-Width blau (Breakout wie der Whitepaper-Block), Bild links,
   Ueberschrift + Text + Primary-Button rechts.
   !important nur dort, wo Seiten-CSS (.tm-lp-content__inner h2/p/img)
   sonst Farbe und Abstaende ueberschreibt.
   ========================================================================== */

.tm-brochure-dl {
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin: 64px 0 64px calc(-50vw + 50%);
  padding: clamp(60px, 8vw, 100px) var(--tm-content-padding, 24px);
  background: var(--tm-blue, #05132C);
}

/* Direkt an eine andere farbige Vollflaeche anschliessen (z. B. "Ansprechpartner
   + Terminbuchung" mit grauem Hintergrund): Die Aussenabstaende beider Bloecke
   fallen sonst zu einem weissen Streifen zwischen Blau und Grau zusammen. */
.tm-brochure-dl:has(+ .tm-ap-booking--bg-grey),
.tm-ap-booking--bg-grey:has(+ .tm-brochure-dl) {
  margin-bottom: 0;
}

.tm-ap-booking--bg-grey + .tm-brochure-dl,
.tm-brochure-dl + .tm-ap-booking--bg-grey {
  margin-top: 0;
}

.tm-brochure-dl__inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  max-width: 1000px;
  margin: 0 auto;
}

.tm-brochure-dl--no-image .tm-brochure-dl__inner {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--tm-container-narrow, 900px);
}

/* ── Bild ── */
.tm-brochure-dl .tm-brochure-dl__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 !important;
}

/* ── Ueberschrift: light, weiss ── */
.tm-brochure-dl .tm-brochure-dl__heading {
  font-family: var(--tm-font-heading, "Open Sans", sans-serif) !important;
  font-weight: var(--tm-fw-light, 300) !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  line-height: 1.25 !important;
  color: var(--tm-white, #fff) !important;
  margin: 0 0 16px !important;
}

/* ── Text: body-m, weiss ── */
.tm-brochure-dl .tm-brochure-dl__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-white, #fff) !important;
  margin: 0 !important;
  max-width: 52ch;
}

.tm-brochure-dl .tm-brochure-dl__text strong {
  font-weight: var(--tm-fw-bold, 700) !important;
}

.tm-brochure-dl__actions {
  margin-top: 32px;
}

/* ── Primary-Button mit Download-Icon (wie Startseiten-Teaser) ── */
.tm-brochure-dl__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.tm-brochure-dl__btn::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 11 5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 11 5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ── Responsive: Bild ueber den Text ── */
@media (max-width: 900px) {
  .tm-brochure-dl__inner {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--tm-container-narrow, 900px);
    gap: 32px;
  }

  .tm-brochure-dl__media {
    max-width: 320px;
  }
}

@media (max-width: 600px) {
  .tm-brochure-dl {
    margin: 48px 0 48px calc(-50vw + 50%);
  }

  .tm-brochure-dl .tm-brochure-dl__text {
    font-size: 16px !important;
  }

  .tm-brochure-dl__btn {
    width: 100%;
    justify-content: center;
  }
}