/* ==========================================================================
   transformis® · Broschuere-Landingpage
   --------------------------------------------------------------------------
   Template: page-templates/broschuere-landingpage.php
   Referenz: LandingPageBroschuere-v05.pdf (1600px) + Strategisch-Mobile.pdf (393px)

   Aufbau:
     1. Header (LP-Variante) – Overrides
     2. Hero (blau)
     3. Split – Nutzen + Formularkarte
     4. FAQ – "Gut zu wissen."
     5. Optionaler Gutenberg-Bereich
     6. Ansprechpartner – "Lieber direkt sprechen?"
     7. Responsive
   ========================================================================== */

.tm-lpb {
  /* Container-Breiten aus dem Design */
  --lpb-container-wide:    1146px; /* Split-Sektion            */
  --lpb-container-narrow:   900px; /* Hero-Text, FAQ           */
  --lpb-container-booking: 1146px; /* Kontakt + Terminbuchung  */

  overflow-x: clip;
}


/* ==========================================================================
   1. HEADER – LP-Variante
   --------------------------------------------------------------------------
   Gleiche Overrides wie in kampagnen-landingpage.css. Bewusst dupliziert,
   weil pro Template genau eine Page-CSS geladen wird.
   ========================================================================== */

.tm-header--lp .tm-header__topbar,
.tm-header--lp .tm-header__nav,
.tm-header--lp .tm-header__search,
.tm-header--lp .tm-header__burger,
.tm-header--lp ~ .tm-header__search-overlay,
.tm-header--lp ~ .tm-mobile-nav {
  display: none !important;
}

.tm-header__spacer {
  flex: 1;
}

/* ── Desktop-CTA: blendet beim Scrollen ein (tm-lpb.js) ── */
.tm-lp-header-cta--desktop {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}

.tm-lp-header-cta--desktop.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ── Mobile-CTA (Chat-Icon): auf diesem Template dauerhaft sichtbar ── */
.tm-lp-header-cta--mobile {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--tm-green);
  color: var(--tm-blue);
  text-decoration: none;
  transition: background var(--tm-transition);
}

.tm-lp-header-cta--mobile:hover {
  background: color-mix(in srgb, var(--tm-green), black 10%);
  color: var(--tm-blue);
}

.tm-lp-header-cta--mobile:active,
.tm-lp-header-cta--mobile:focus,
.tm-lp-header-cta--mobile:visited {
  color: var(--tm-blue);
}

.tm-lp-header-cta--mobile svg {
  width: 22px;
  height: 22px;
}


/* ==========================================================================
   2. HERO
   ========================================================================== */

.tm-lpb-hero {
  position: relative;
  background: var(--tm-blue);
  /* Der LP-Header ist position:fixed – er nimmt im Dokumentfluss KEINEN Platz
     ein. Ohne dieses padding-top rutscht der Hero-Inhalt unter den Header
     und wird von ihm verdeckt. 124px = gemessene reale Header-Hoehe (122px)
     plus etwas Luft; die schmaleren Breakpoints unten sind ebenfalls gegen
     die reale Header-Hoehe dort gemessen (nicht nur uebernommen). */
  padding-top: 124px;
  overflow: clip;
}

/* ── Deko-Pfeil links ──
   Das SVG clippt auf seine viewBox: sichtbar ist nur der rechte Teil des
   Pfeils, der Rest laeuft links aus dem Bild. Die vertikale Position setzt
   tm-lpb.js (Desktop: Mitte des H1-Blocks, Mobil: Mitte der gruenen Zeile);
   top/50% ist der Fallback ohne JS. */
.tm-lpb-hero__arrow {
  position: absolute;
  left: 0;
  top: 50%;
  /* Breite so gewaehlt, dass die Spitze ca. 35px vor der Textkante endet –
     sonst laeuft der Pfeil auf mittleren Desktop-Breiten in die H1.
     Der Faktor 0.984 ist der Anteil der Spitze an der SVG-Breite
     (viewBox 0..305, Spitze liegt bei x=300). Bei 1600px ergibt das
     exakt die Design-Werte: 320px breit, Spitze bei 315px. */
  width: clamp(
    40px,
    calc(
      (max(var(--tm-content-padding), (100% - var(--lpb-container-narrow)) / 2) - 35px)
      / 0.984
    ),
    330px
  );
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

.tm-lpb-hero__arrow svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Text- und Bildspalte als Grid-Zeile (statt absoluter Positionierung):
   die Zeilenhoehe – und damit die Hoehe des ganzen Heros – richtet sich
   IMMER nach dem hoeheren der beiden Inhalte, das Bild kann also nie mehr
   ueber seinen Container hinaus nach oben rutschen.
   align-items:start statt center: das Bild ist deutlich hoeher als der
   Text – bei "center" haengt der Text dadurch weit unten in der Mitte
   einer viel zu hohen Zeile, was wie zu viel Abstand zum Header wirkt.
   Mit "start" beginnen Text UND Bild auf gleicher Hoehe direkt nach dem
   (kleinen) oberen Padding. */
.tm-lpb-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(16px, 2vw, 32px) var(--tm-content-padding);
  /* Linke Kante = Kante des 900er-Containers (bei 1600px genau 350px) */
  padding-left: max(var(--tm-content-padding), calc((100% - var(--lpb-container-narrow)) / 2));
}

.tm-lpb-hero__text {
  position: relative;
  z-index: 2;
  max-width: 560px;
}

/* ── H1 ── */
.tm-lpb-hero__title {
  font-family: var(--tm-font-heading) !important;
  font-size: clamp(32px, 3.75vw, 60px) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-wrap: balance;
}

.tm-lpb-hero__title-lead,
.tm-lpb-hero__title-accent {
  display: block;
}

.tm-lpb-hero__title-lead {
  font-weight: var(--tm-fw-extralight);
  color: var(--tm-white);
}

.tm-lpb-hero__title-accent {
  font-weight: var(--tm-fw-extrabold);
  color: var(--tm-green);
  margin-top: 0.13em;
}

/* ── Mockup-Bild + Caption ──
   Bild und Caption stehen normal untereinander im Bild-Grid-Item; die
   Zeile (siehe .tm-lpb-hero__inner) waechst automatisch mit, egal wie
   hoch das Bild im Verhaeltnis zum Text ausfaellt. max-width begrenzt die
   Groesse auf sehr breiten Screens (Design-Zielgroesse bei 1600px). */
.tm-lpb-hero__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 680px;
  justify-self: end;
}

.tm-lpb-hero__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* Desktop: Bild nach oben ziehen, bis es – wie im Design – neben dem Logo
   beginnt (~130px oberhalb der H1). Der negative margin verkuerzt zugleich
   die Hero-Hoehe um denselben Betrag; die Caption unter dem Bild bleibt
   dadurch an ihrer Position. Damit der fixe Header (z-index 1000, opake
   Blauflaeche) die hochgezogene Bildecke nicht abschneidet, legt sich das
   Bild per z-index DRUEBER (Wunsch-Loesung). Der Scroll-CTA im Header wird
   davon nur fluechtig beim Scrollen ueberlappt.
   Nur Desktop: mobil ist der Chat-CTA dauerhaft sichtbar – dort wuerde das
   Bild ihn beim Scrollen verdecken, deshalb greift das hier erst ab 961px. */
@media (min-width: 961px) {
  .tm-lpb-hero__inner {
    /* z-index:2 wuerde einen Stacking-Context bilden und die 1001 des
       Bildes auf 2 deckeln – daher hier aufheben. Arrow (1) und Text (2)
       ordnen sich weiterhin korrekt. */
    z-index: auto;
  }

  .tm-lpb-hero__media {
    position: relative;
    z-index: 1001;
    margin-top: -90px;
  }
}

.tm-lpb-hero__caption {
  font-family: var(--tm-font-body);
  font-weight: var(--tm-fw-regular);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tm-white);
  text-align: center;
  margin: 16px 0 0;
}


/* ==========================================================================
   3. SPLIT – Nutzen + Formularkarte
   ========================================================================== */

.tm-lpb-split {
  background: var(--tm-white);
  padding: clamp(56px, 7vw, 112px) 0;
}

.tm-lpb-split__inner {
  display: grid;
  grid-template-columns: minmax(0, 601px) minmax(0, 486px);
  justify-content: space-between;
  gap: clamp(32px, 4vw, 60px);
  max-width: calc(var(--lpb-container-wide) + 2 * var(--tm-content-padding));
  margin: 0 auto;
  padding: 0 var(--tm-content-padding);
}

/* ── Linke Spalte ── */
.tm-lpb-split__title {
  font-family: var(--tm-font-heading) !important;
  font-weight: var(--tm-fw-extralight) !important;
  font-size: clamp(28px, 2.65vw, 42px) !important;
  line-height: 1.25 !important;
  color: var(--tm-blue) !important;
  margin: 0 0 24px !important;
}

.tm-lpb-split__intro {
  font-family: var(--tm-font-body) !important;
  font-weight: var(--tm-fw-regular) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: var(--tm-black) !important;
  margin: 0 0 32px !important;
  max-width: 520px;
}

.tm-lpb-sup {
  font-size: 0.6em;
  vertical-align: super;
  line-height: 0;
}

/* ── Stichpunkte mit gruenem Pfeil ── */
.tm-lpb-bullets {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tm-lpb-bullets__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 22px !important;
  padding: 0 !important;
}

.tm-lpb-bullets__item::before {
  content: none !important;   /* The7-Listenpunkte unterdruecken */
}

.tm-lpb-bullets__item:last-child {
  margin-bottom: 0 !important;
}

.tm-lpb-bullets__icon {
  flex: 0 0 auto;
  width: 18px !important;
  height: 18px !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  max-width: none !important;
  object-fit: contain;
}

.tm-lpb-bullets__label {
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-bold);
  font-size: 18px;
  line-height: 1.55;
  color: var(--tm-blue);
}

/* ── Rechte Spalte: Formularkarte ── */
.tm-lpb-split__aside {
  min-width: 0;
}

.tm-lpb-formcard {
  background: var(--tm-white);
  box-shadow: 0 2px 24px rgba(5, 19, 44, 0.14);
  padding: 32px;
}

/* The7 setzt auf manchen Elementen display-Regeln, die [hidden] aushebeln –
   der Zustandswechsel Formular/Bestaetigung muss aber sicher greifen. */
.tm-lpb-formcard__state[hidden] {
  display: none !important;
}

.tm-lpb-formcard__note {
  font-family: var(--tm-font-body) !important;
  font-weight: var(--tm-fw-regular) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--tm-black) !important;
  margin: 24px 0 0 !important;
}

.tm-lpb-formcard__note strong {
  font-weight: var(--tm-fw-bold);
}

/* Success-State (ersetzt das Formular nach erfolgreichem Absenden) */
.tm-lpb-formcard__success-title {
  font-family: var(--tm-font-heading) !important;
  font-weight: var(--tm-fw-extrabold) !important;
  font-size: 24px !important;
  line-height: 1.3 !important;
  color: var(--tm-blue) !important;
  margin: 0 0 16px !important;
}

.tm-lpb-formcard__success-text {
  font-family: var(--tm-font-body) !important;
  font-weight: var(--tm-fw-regular) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--tm-black) !important;
  margin: 0 !important;
}


/* ==========================================================================
   4. FAQ – "Gut zu wissen."
   --------------------------------------------------------------------------
   Nutzt Markup + CSS des transformis/accordion-Blocks. Hier nur Sektion,
   Kopfbereich und die Nummern-freie Variante.
   ========================================================================== */

.tm-lpb-faq {
  background: var(--tm-white);
  padding: 0 0 clamp(56px, 7vw, 112px);
}

.tm-lpb-faq__inner {
  max-width: calc(var(--lpb-container-narrow) + 2 * var(--tm-content-padding));
  margin: 0 auto;
  padding: 0 var(--tm-content-padding);
}

.tm-lpb-faq__title {
  font-family: var(--tm-font-heading) !important;
  font-weight: var(--tm-fw-extralight) !important;
  font-size: clamp(28px, 2.65vw, 42px) !important;
  line-height: 1.25 !important;
  color: var(--tm-blue) !important;
  margin: 0 0 24px !important;
}

.tm-lpb-faq__intro {
  font-family: var(--tm-font-body) !important;
  font-weight: var(--tm-fw-regular) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: var(--tm-black) !important;
  margin: 0 !important;
}

/* Variante ohne Nummern (Design-Vorgabe dieser Landingpage) */
.tm-lpb-faq .tm-accordion {
  margin: 40px 0 0;
}

.tm-accordion--plain .tm-accordion__number {
  display: none !important;
}


/* ==========================================================================
   5. OPTIONALER GUTENBERG-BEREICH
   ========================================================================== */

.tm-lpb-extra {
  background: var(--tm-white);
  padding: 0 0 clamp(56px, 7vw, 112px);
}

.tm-lpb-extra__inner {
  max-width: calc(var(--lpb-container-narrow) + 2 * var(--tm-content-padding));
  margin: 0 auto;
  padding: 0 var(--tm-content-padding);
}


/* ==========================================================================
   6. ANSPRECHPARTNER – "Lieber direkt sprechen?"
   --------------------------------------------------------------------------
   Karten + Zentrale kommen aus blocks/ansprechpartner/style.css.
   Hier: Sektion, linksbuendiger Kopfbereich, Design-Abweichungen.
   ========================================================================== */

.tm-lpb-contact {
  background: var(--tm-white-soft);
  padding: clamp(56px, 7vw, 112px) 0;
}

/* Gleiche Breite wie die Split-Sektion "Entdecken Sie unsere Klartext-
   Broschuere" weiter oben (--lpb-container-wide), damit beide Sektionen auf
   einer Linie stehen. Der Kalender diktiert die Breite nicht mehr – er liegt
   im Modal. */
.tm-lpb-contact__inner {
  max-width: calc(var(--lpb-container-booking) + 2 * var(--tm-content-padding));
  margin: 0 auto;
  padding: 0 var(--tm-content-padding);
}

/* Ueberschrift und Copy folgen der Sektion NICHT in die volle Breite –
   1141px lange Textzeilen liessen sich schlecht lesen. */
.tm-lpb-contact__title,
.tm-lpb-contact__intro {
  max-width: 720px;
}

.tm-lpb-contact__title {
  font-family: var(--tm-font-heading) !important;
  font-weight: var(--tm-fw-extralight) !important;
  font-size: clamp(28px, 2.65vw, 42px) !important;
  line-height: 1.25 !important;
  color: var(--tm-blue) !important;
  margin: 0 0 20px !important;
}

.tm-lpb-contact__intro {
  font-family: var(--tm-font-body) !important;
  font-weight: var(--tm-fw-regular) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: var(--tm-black) !important;
  margin: 0 !important;
}

.tm-lpb-contact__hint {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--tm-black) !important;
  margin: 32px 0 0 !important;
}

/* Ansprechpartner + Terminbuchung.
   Raster, Kachel und Kalender kommen aus
   blocks/ansprechpartner-calendly/style.css. Die Namens-/Positions-
   Vergroesserung aus dem Design-PDF entfaellt hier bewusst: sie galt fuer
   zwei 434px-Karten nebeneinander – in der 1/3-Spalte (ca. 290px) wuerde
   ein 28px-Name unschoen umbrechen. Es gelten die Block-Defaults (24/16px). */
.tm-lpb-contact .tm-ansprechpartner__zentrale {
  margin-top: 48px;
}


/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

/* ── Tablet quer / kleiner Desktop ── */
@media (max-width: 1200px) {
  .tm-lpb-hero__text {
    max-width: 440px;
  }

  .tm-lpb-hero__media {
    max-width: 480px;
  }

  .tm-lpb-split__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  }
}

/* ── Tablet ── */
@media (max-width: 960px) {

  .tm-lp-header-cta--desktop {
    display: none !important;
  }

  .tm-lp-header-cta--mobile {
    display: flex;
  }

  /* Hoehe des LP-Headers auf Tablet (real gemessen, siehe .tm-lpb-hero). */
  .tm-lpb-hero {
    padding-top: 96px;
  }

  /* Hero stapelt: Text oben, Bild darunter im vollen Anschnitt */
  .tm-lpb-hero__inner {
    display: block;
    padding: 24px var(--tm-content-padding) 40px;
  }

  .tm-lpb-hero__text {
    max-width: none;
  }

  /* Bild etwas breiter als der Viewport: links ~10vw angeschnitten
     (wie im Mobile-Design), rechte Kante schliesst buendig mit dem
     Viewport ab (-10vw + 110vw = 100vw). Das calc() kompensiert das
     Container-Padding, damit der Anschnitt unabhaengig davon stimmt. */
  .tm-lpb-hero__media {
    max-width: none;
    width: 110vw;
    margin: 12px 0 0 calc(-1 * var(--tm-content-padding) - 10vw);
    /* justify-self:end stammt aus dem Desktop-Grid; Chrome wendet es
       inzwischen auch auf Block-Elemente an und wuerde hier den negativen
       margin-left aushebeln (Bild klebt dann rechts an der Content-Kante). */
    justify-self: auto;
  }

  .tm-lpb-hero__caption {
    margin-top: 6px;
  }

  /* Pfeil: Spitze endet ein paar Pixel VOR der H1 (bei -86% ragte sie
     in den Text hinein: Spitze bei 14% von 60vw ≈ 33px, Text ab 24px). */
  .tm-lpb-hero__arrow {
    width: 60%;
    transform: translate(-92%, -50%);
  }

  /* Split stapelt */
  .tm-lpb-split__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .tm-lpb-split__intro {
    max-width: none;
  }
}

/* ── Mobil ── */
@media (max-width: 600px) {
  /* Header ist mobil real 84px hoch; 84 + 28 = H1 bei ~112px wie im
     Mobile-Design (dort: Header 72px, H1 ab 112px). */
  .tm-lpb-hero {
    padding-top: 84px;
  }

  .tm-lpb-hero__inner {
    padding-top: 28px;
  }

  .tm-lpb-hero__title-accent {
    margin-top: 0.2em;
  }

  .tm-lpb-hero__caption {
    font-size: 15px;
  }

  .tm-lpb-formcard {
    padding: 24px;
  }

  .tm-lpb-bullets__item {
    gap: 10px;
    margin-bottom: 18px !important;
  }

  .tm-lpb-bullets__icon {
    width: 15px !important;
    height: 15px !important;
    margin-top: 3px !important;
  }

  .tm-lpb-bullets__label {
    font-size: 16px;
  }

  .tm-lpb-contact .tm-ansprechpartner__zentrale {
    align-items: flex-start;
  }
}