/* ==========================================================================
   transformis® · Startseite (Seite 136310) – Seitenspezifische Styles
   --------------------------------------------------------------------------
   Enthaelt NUR Sektionen die einmalig auf der Startseite erscheinen:
   1. Hero-Overrides (Kicker/Subline, 50px Desktop)
   2. Home-Teaser (blau, Rebranding 2026)
   2b. Home-Teaser mit Broschueren-Mockup (Update 2026-08)
   3. Home-Ansatz (weiss, H2-Bloecke + Stats)
   4. Beratungsfelder-Grid
   …
   Am Dateiende zusaetzlich (Content-Update 2026-07):
   - Button-Variante mit Download-Icon
   - Team-Heading einzeilig
   --------------------------------------------------------------------------
   Reusable Sektionen (Hero-Bild, USP, Team, Card-Slider) → eigene Component-CSS.
   ========================================================================== */


/* ==========================================================================
   1. HERO (Override nur auf Startseite, 50px Desktop)
   --------------------------------------------------------------------------
   Seit dem Content-Update 2026-07 steht die Headline ("Zukunft") oben und
   der Satz darunter in der Subline. Die Kicker-Regel bleibt erhalten, falls
   die Variante mit Text ueber der Headline wieder gebraucht wird.
   ========================================================================== */

.tm-startseite .tm-hero-img__kicker {
  font-size: clamp(26px, 3.5vw, 50px);
  line-height: 1.2;
  font-weight: var(--tm-fw-light);
}

/* Subline: uebernimmt die Kicker-Optik, sitzt aber unter der Headline und
   ist linksbuendig zu ihr. Bleibt bis 660px in einer Zeile. */
.tm-startseite .tm-hero-img__subline {
  margin-top: 4px;
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-light);
  font-size: clamp(26px, 3.5vw, 50px);
  line-height: 1.2;
  max-width: none;          /* 860px-Limit aus tm-hero.css aufheben */
  text-wrap: initial;       /* balance aus tm-hero.css wuerde umbrechen */
  white-space: nowrap;
}

/* Ab hier passt der Satz nicht mehr in eine Zeile -> Umbruch erlauben */
@media (max-width: 660px) {
  .tm-startseite .tm-hero-img__subline {
    font-size: clamp(22px, 5vw, 32px);
    white-space: normal;
  }
}


/* ==========================================================================
   2. HOME-TEASER (blauer Hintergrund mit gruenem Pfeil)
   ========================================================================== */

.tm-home-teaser {
  position: relative;
  background: var(--tm-blue);
  padding: clamp(60px, 8vw, 100px) var(--tm-edge-padding);
  overflow: hidden;
}

.tm-home-teaser__inner {
  position: relative;
  z-index: 1;
  max-width: var(--tm-container-narrow);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.tm-home-teaser__text {
  margin: 0;
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-light);
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.5;
  color: var(--tm-white);
}

.tm-home-teaser__text strong {
  font-weight: var(--tm-fw-bold);
}

.tm-home-teaser__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Grüner Pfeil oben rechts (Polygon-66 zeigt nach rechts) */
.tm-home-teaser__arrow {
  position: absolute;
  top: clamp(60px, 8vw, 110px);
  right: clamp(24px, 4vw, 100px);
  width: clamp(70px, 10vw, 150px);
  height: auto;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 1176px) {
  .tm-home-teaser__arrow {
    top: auto;
    bottom: 24px;
    right: 24px;
    width: 50px;
    opacity: 0.85;
  }
}


/* ==========================================================================
   2b. HOME-TEASER MIT BROSCHUEREN-MOCKUP (Update 2026-08)
   --------------------------------------------------------------------------
   Greift nur, wenn dem Template-Part home-teaser-blue eine 'image_url'
   uebergeben wird (dann setzt es .tm-home-teaser--media und schiebt Text +
   Buttons in .tm-home-teaser__content). Ohne Bild bleibt alles wie oben.

   Der 900er-Container wird aufgehoben: Bild- und Textspalte nutzen die volle
   Breite der Sektion (die durch --tm-edge-padding ohnehin bei 1338px gedeckelt
   ist und auf einer Linie mit allen anderen Sektionen liegt).

   Freigehalten wird nur die Lane, die der gruene Deko-Pfeil oben rechts
   tatsaechlich braucht – siehe --tm-teaser-arrow-* weiter unten.
   ========================================================================== */

.tm-home-teaser--media {
  /* Geometrie des Deko-Pfeils, gespiegelt aus .tm-home-teaser__arrow (oben).
     Bei Aenderungen dort hier mitziehen. */
  --tm-teaser-arrow-right: clamp(24px, 4vw, 100px);
  --tm-teaser-arrow-width: clamp(70px, 10vw, 150px);
  /* Mindestabstand zwischen Textkante und Pfeilspitze. */
  --tm-teaser-arrow-gap: 24px;
}

.tm-home-teaser--media .tm-home-teaser__inner {
  display: grid;
  grid-template-columns: minmax(0, clamp(240px, 30vw, 440px)) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 3.5vw, 56px);
  max-width: none;
  margin-inline: 0;
}

/* Text + Buttons behalten den vertikalen Rhythmus des bisherigen Inners.

   padding-right haelt die Pfeil-Lane frei: Der Pfeil ist absolut zur Sektion
   positioniert, sein linker Rand liegt (arrow-right + arrow-width) vom rechten
   Sektionsrand entfernt. Die Textspalte endet dagegen beim Edge-Padding. Nur
   die Differenz muss freibleiben – auf breiten Screens waechst das Edge-Padding
   ueber den Pfeil hinaus und der Wert wird 0, der Text bekommt dann die volle
   Spaltenbreite. */
.tm-home-teaser--media .tm-home-teaser__content {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-right: max(
    0px,
    var(--tm-teaser-arrow-right) + var(--tm-teaser-arrow-width)
      + var(--tm-teaser-arrow-gap) - var(--tm-edge-padding)
  );
}

/* Ab hier sitzt der Pfeil unten rechts (Breakpoint s. o.) – die Lane wird
   nicht mehr gebraucht. */
@media (max-width: 1176px) {
  .tm-home-teaser--media .tm-home-teaser__content {
    padding-right: 0;
  }
}

/* Auf breiten Screens ragt das Mockup nach links in das Edge-Padding hinein
   und wirkt dadurch deutlich groesser, ohne der Textspalte Breite wegzunehmen.

   Der Ueberhang nutzt nur den Teil des Edge-Paddings, der ueber die regulaeren
   56px Seitenabstand hinausgeht (--tm-content-padding waechst bis 1450px auf
   diese 56px, darueber waechst --tm-edge-padding mit dem Viewport):
     bis 1450px  -> 0 (Bild bleibt in der Spalte, 56px Luft nach links)
     ab  1450px  -> Ueberhang waechst stufenlos mit, gedeckelt bei 180px
   Dadurch kein Sprung beim Resize und das Bild laeuft nie aus dem Viewport. */
.tm-home-teaser--media .tm-home-teaser__media {
  min-width: 0;
  margin-left: calc(-1 * min(max(0px, var(--tm-edge-padding) - 56px), 180px));
}

.tm-home-teaser--media .tm-home-teaser__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* Ab hier wird die Textspalte zu schmal -> Mockup ueber den Text.
   (Der Pfeil sitzt unterhalb von 1176px ohnehin schon unten rechts.) */
@media (max-width: 900px) {
  .tm-home-teaser--media .tm-home-teaser__inner {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--tm-container-narrow);
    margin-inline: auto;
    gap: 32px;
  }

  .tm-home-teaser--media .tm-home-teaser__media {
    max-width: 320px;
    margin-left: 0;
  }
}


/* ==========================================================================
   3. HOME-ANSATZ (weisse Sektion, zwei H2-Bloecke + Stats)
   ========================================================================== */

.tm-home-ansatz {
  position: relative;
  background: var(--tm-white);
  padding: clamp(60px, 8vw, 100px) var(--tm-edge-padding);
}

/* Deko-Pfeil (V-Form, grün, outline) — bleedet nach oben in die blaue Teaser-Sektion.
   Spitze zeigt mittig auf das Wort "Unser Ansatz" (Tip-Alignment via translate). */
.tm-home-ansatz--deco { overflow: visible; }

.tm-home-ansatz__deco {
  position: absolute;
  /* Linke V-Enden sitzen exakt am Viewport-Rand (Stroke darf via overflow:visible
     minimal überlaufen). */
  left: 0;
  /* Tip vertikal: Padding-Top + 0.6 * Title-Font-Size (= Mitte der ersten Zeile) */
  top: calc(clamp(60px, 8vw, 100px) + 0.6 * clamp(32px, 4vw, 52px));
  /* viewBox ist auf Polyline-Bounds getrimmt (30 30 640 540) →
     Tip liegt bei 100% der Box-Breite, linke V-Enden bei 0%.
     Breite = Abstand zwischen Viewport-Rand und Tip-Ziel (= 10px vor Unser Ansatz). */
  width: calc(50% - 460px);
  height: auto;
  aspect-ratio: 640 / 540;
  color: var(--tm-green);
  overflow: visible;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 1200px) {
  .tm-home-ansatz__deco { display: none; }
}

.tm-home-ansatz__inner {
  max-width: var(--tm-container-narrow);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 52px;
}

.tm-home-ansatz__block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tm-home-ansatz__title {
  margin: 0;
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-light);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.2;
  color: var(--tm-blue);
}

.tm-home-ansatz__text {
  margin: 0;
  font-family: var(--tm-font-body);
  font-weight: var(--tm-fw-regular);
  font-size: 18px;
  line-height: 1.6;
  color: var(--tm-blue);
}

.tm-home-ansatz__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 16px; /* zusammen mit 16px Block-Gap = 32px unter dem Text */
}

.tm-home-ansatz__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
  row-gap: 32px;
}

.tm-home-ansatz__stat {
  display: flex;
  flex-direction: column;
}

.tm-home-ansatz__stat-value {
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-light);
  font-size: clamp(56px, 8vw, 92px);
  line-height: 1.2;
  color: var(--tm-blue);
}

.tm-home-ansatz__stat-label {
  font-family: var(--tm-font-body);
  font-weight: var(--tm-fw-regular);
  font-size: 18px;
  line-height: 1.6;
  color: var(--tm-blue);
}

@media (max-width: 700px) {
  .tm-home-ansatz__stats {
    gap: 32px;
  }
  .tm-home-ansatz__actions {
    gap: 16px;
  }
}


/* ==========================================================================
   4. HOME-EINFLUGSCHNEISEN (dunkelblau, 5 Karten, Deko-Pfeile)
   ========================================================================== */

.tm-home-dim {
  position: relative;
  background: var(--tm-blue);
  padding: clamp(72px, 10vw, 128px) var(--tm-edge-padding);
  overflow: hidden;
  isolation: isolate;
}

.tm-home-dim__inner {
  position: relative;
  z-index: 2;
  max-width: var(--tm-container-narrow);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* ── Header (linksbündig, wie „Unser Ansatz") ── */
.tm-home-dim__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tm-home-dim__title {
  margin: 0;
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-light);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.2;
  color: var(--tm-white);
}

.tm-home-dim__intro {
  margin: 0;
  font-family: var(--tm-font-body);
  font-weight: var(--tm-fw-regular);
  font-size: 18px;
  line-height: 1.6;
  color: var(--tm-white);
  max-width: var(--tm-container-narrow);
}

/* ── Karten-Grid (3 + 2 linksbündig) ── */
.tm-home-dim__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tm-home-dim__item {
  display: flex;
}

.tm-home-dim__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-height: 251px;
  padding: 24px 16px;
  background: var(--tm-blue);
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--tm-transition), background var(--tm-transition), transform var(--tm-transition);
}

.tm-home-dim__card:hover,
.tm-home-dim__card:focus-visible {
  border-color: var(--tm-green);
  background: var(--tm-blue-600);
  outline: none;
}

.tm-home-dim__card:focus-visible {
  box-shadow: 0 0 0 2px var(--tm-green);
}

/* ── Icon oben ── */
.tm-home-dim__icon {
  width: 56px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.tm-home-dim__icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

/* ── Titel + Text ── */
.tm-home-dim__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}

.tm-home-dim__card-title {
  margin: 0;
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-light);
  font-size: 28px;
  line-height: 1.4;
  color: var(--tm-green);
}

.tm-home-dim__card-text {
  margin: 0;
  font-family: var(--tm-font-body);
  font-weight: var(--tm-fw-regular);
  font-size: 16px;
  line-height: 1.4;
  color: var(--tm-white);
}

/* ── Pfeil unten links ── */
.tm-home-dim__card-arrow {
  align-self: flex-start;
  display: inline-flex;
  color: var(--tm-green);
  transition: transform var(--tm-transition);
}

.tm-home-dim__card:hover .tm-home-dim__card-arrow,
.tm-home-dim__card:focus-visible .tm-home-dim__card-arrow {
  transform: translateX(4px);
}

/* ── Dekorative Pfeile (Desktop) ── */
.tm-home-dim__deco {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

/* Großer Outline-Pfeil: kommt hinter der "Personell"-Karte hervor,
   unten angeschnitten am Section-Rand (overflow: hidden).
   Wir steuern die HÖHE (nicht Breite), damit der Pfeil sicher hoch genug
   beginnt um hinter die Personell-Karte zu reichen. */
.tm-home-dim__deco--lg {
  right: clamp(24px, 2.5vw, 56px);
  bottom: clamp(-180px, -8vw, -80px);
  height: clamp(440px, 48vw, 720px);
  width: auto;
  aspect-ratio: 700 / 600;
  color: var(--tm-green);
  z-index: 1;
}

/* Kleiner gefüllter Pfeil: zeigt mittig auf das Wort "Fünf" (erste Zeile des Titels).
   Positionierung relativ zum 900px-Inner-Container → Abstand zum Text bleibt konstant.
   Tip ~40px vor "Fünf" (= 50% + 450px inner-edge + 40px gap). */
.tm-home-dim__deco--sm {
  right: calc(50% + 490px);
  left: auto;
  top: clamp(78px, 8vw, 90px);
  width: clamp(60px, 7.5vw, 120px);
  height: auto;
}

/* Deko-Pfeile unter 1200px: kein Platz mehr daneben → in den Flow nehmen,
   beide links-bündig mit dem Inner-Content. sm über Titel, lg unter Grid
   (darf in den linken Rand überlaufen). */
@media (max-width: 1200px) {
  .tm-home-dim {
    isolation: auto;
  }
  .tm-home-dim__deco--sm {
    position: static;
    display: block;
    margin: 0 0 clamp(20px, 3vw, 32px) 0;
    width: clamp(56px, 9vw, 96px);
    height: auto;
  }
  .tm-home-dim__deco--lg {
    position: static;
    display: block;
    /* Negatives left-margin → Pfeil rutscht in den linken Rand / über Section-Kante hinaus */
    margin: clamp(40px, 6vw, 72px) 0 0 calc(-1 * var(--tm-edge-padding) - 5vw);
    width: clamp(240px, 62vw, 460px);
    height: auto;
    aspect-ratio: 700 / 600;
    color: var(--tm-green);
    right: auto;
    bottom: auto;
  }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .tm-home-dim__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .tm-home-dim__grid {
    grid-template-columns: 1fr;
  }
  .tm-home-dim__card {
    min-height: 0;
  }
}

/* Screenreader-only (falls global nicht vorhanden) */
.tm-home-dim .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   4. BERATUNGSFELDER-GRID (Rebranding 2026: orange → gruen)
   --------------------------------------------------------------------------
   Konsolidiert aus ~300 Zeilen mit 12+ doppelten Media-Queries.
   Finale berechnete Werte pro Breakpoint, kein !important noetig.
   ========================================================================== */

.tm-bf {
  width: 100%;
}

/* ── Basis: Einzelne Karte ── */
.tm-bf__card {
  position: relative;
  background: #FAFCFC;
  min-height: 341px;
  display: flex;
  align-items: center;
  padding: clamp(24px, 5vw, 48px);
  gap: 36px;
  text-decoration: none;
}

/* ── Icon ── */
.tm-bf__icon {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  color: var(--tm-blue);
}

.tm-bf__icon img,
.tm-bf__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.tm-bf__icon svg * {
  transition: fill 0.25s ease, stroke 0.25s ease;
}

/* SVG-Icons: Inline-SVG → CSS ueberschreibt interne <style>-Klassen.
   SVGs nutzen .cls-1 { fill: #d38500 } intern, daher direkt auf Shapes zielen. */
.tm-bf__icon svg path,
.tm-bf__icon svg circle,
.tm-bf__icon svg rect,
.tm-bf__icon svg polygon {
  fill: var(--tm-blue);
  stroke: var(--tm-blue);
}

/* ── Karteninhalt (Titel + Button) ── */
.tm-bf__content {
  display: grid;
  align-content: center;
  gap: 12px;
}

/* ── Kartentitel ── */
.tm-bf__label {
  margin: 0;
  color: var(--tm-blue);
  text-align: left;
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-regular);
  font-size: 35px;
  line-height: 55px;
  margin-top: -10px;
  hyphens: manual;
}

/* ── Karten-Button (Outline, blau auf weiss) – gleiche Masse wie .tm-btn ── */
.tm-bf__link {
  display: inline-block;
  justify-self: start;
  padding: 12px 17px;
  text-align: center;
  border: 1px solid var(--tm-blue);
  background: var(--tm-white);
  color: var(--tm-blue);
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-bold);
  font-size: 18px;
  line-height: 24px;
  text-transform: none;
  text-decoration: none;
  transition: color var(--tm-transition), border-color var(--tm-transition),
              background var(--tm-transition), transform var(--tm-transition);
}

/* ── Hover-Effekt (ganze Karte): BG wird gruen, Text+Icon bleiben blau ── */
.tm-bf__card--hover {
  transition: background 0.25s ease;
  outline: none;
}

.tm-bf__card--hover:hover,
.tm-bf__card--hover:focus-visible {
  background: var(--tm-green);
}

/* Label + Icon bleiben blau beim Hover (kein Farbwechsel noetig, schon blau) */

/* Button wird bei gruenem Karten-BG voll blau mit weissem Text */
.tm-bf__card--hover:hover .tm-bf__link,
.tm-bf__card--hover:focus-visible .tm-bf__link {
  background: var(--tm-blue);
  border-color: var(--tm-blue);
  color: var(--tm-white);
}

.tm-bf__card--hover:focus-visible {
  box-shadow: 0 0 0 3px rgba(5, 19, 44, 0.35);
  border-radius: 4px;
}

/* ── Headline-Karte (Reihe 1, links) ── */
.tm-bf__heading {
  justify-content: center;
  text-align: center;
}

.tm-bf__headline {
  margin: 0;
  line-height: 1.3;
  font-size: clamp(36px, 4vw, 52px);
  color: var(--tm-blue);
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-extrabold);
}

.tm-bf__headline-light,
.tm-bf__headline-bold {
  font-weight: inherit;
}

/* ── Grid: Reihe 1 (55.52% | 44.48%) ── */
.tm-bf__row--r1 {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 55.52% 44.48%;
}

/* ── Grid: Reihe 2 (40.68% | 29.69% | 29.63%) ── */
.tm-bf__row--r2 {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 40.677% 29.688% 29.635%;
}

/* ── Grid: Reihe 3 (40.68% | Rest) ── */
.tm-bf__row--r3 {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 40.677% 1fr;
}

/* ── Wrapper fuer Reihen 2+3 (Tablet: display:contents) ── */
.tm-bf__wrap {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

/* ── CTA-Kachel (Ganzheitliche Transformation) – Rebranding: dunkelblau ── */
.tm-bf__cta {
  background: var(--tm-blue);
  justify-content: flex-start;
}

.tm-bf__cta-content {
  text-align: left;
  display: grid;
  gap: 18px;
  justify-items: start;
}

.tm-bf__cta-title {
  margin: 0;
  color: var(--tm-white);
  font-family: var(--tm-font-heading);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.3;
  font-weight: var(--tm-fw-extrabold);
}

.tm-bf__cta-title .light,
.tm-bf__cta-title .bold {
  font-weight: inherit;
}

/* CTA-Button nutzt jetzt globale .tm-btn Komponente (siehe tm-btn.css) */

/* ── Letzte Karte (Fuehrung): kein Bottom-Border ── */
.tm-bf__row--r3 .tm-bf__card:first-child {
  border-bottom: 0;
}


/* ---------- DESKTOP (≥1521px): Gruene Trennlinien + 106px Padding ---------- */

@media (min-width: 1521px) {
  /* 106px linkes Padding fuer Inhaltskarten */
  .tm-bf__row--r1 > :last-child,
  .tm-bf__row--r2 .tm-bf__card,
  .tm-bf__row--r3 .tm-bf__card {
    padding-left: 106px;
  }

  /* Horizontale Trennlinien */
  .tm-bf__row--r1 > .tm-bf__card,
  .tm-bf__row--r2 .tm-bf__card,
  .tm-bf__row--r3 .tm-bf__card {
    border-bottom: 1px solid var(--tm-blue);
  }

  /* Vertikale Trennlinien */
  .tm-bf__row--r1 > :last-child {
    border-left: 1px solid var(--tm-blue);
  }

  .tm-bf__row--r2 > :nth-child(2),
  .tm-bf__row--r2 > :nth-child(3) {
    border-left: 1px solid var(--tm-blue);
  }

  .tm-bf__row--r3 > :last-child {
    border-left: 1px solid var(--tm-blue);
  }

  /* Fuehrung: kein Bottom-Border */
  .tm-bf__row--r3 > :first-child {
    border-bottom: 0;
  }
}


/* ---------- TABLET (901px – 1520px): 2-Spalten Reflow ---------- */

@media (max-width: 1520px) and (min-width: 901px) {
  .tm-bf__row--r1 {
    grid-template-columns: 1fr 1fr;
  }

  /* Wrapper → 2 Spalten, innere Grids aufloesen */
  .tm-bf__wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .tm-bf__wrap > .tm-bf__row--r2,
  .tm-bf__wrap > .tm-bf__row--r3 {
    display: contents;
  }

  /* Titel + Abstands-Anpassung */
  .tm-bf__label {
    font-size: 33px;
    line-height: 44px;
    margin-top: 0;
  }

  .tm-bf__cta-title {
    font-size: 33px;
    line-height: 44px;
  }

  .tm-bf__headline {
    font-size: 42px;
  }

  /* Padding normalisieren */
  .tm-bf__card {
    padding-left: clamp(24px, 5vw, 48px);
  }

  /* Trennlinien */
  .tm-bf__wrap .tm-bf__card {
    border-bottom: 1px solid var(--tm-blue);
  }

  .tm-bf__wrap .tm-bf__card:nth-of-type(2n) {
    border-left: 1px solid var(--tm-blue);
  }

  .tm-bf__row--r1 > .tm-bf__card {
    border-bottom: 1px solid var(--tm-blue);
  }

  .tm-bf__row--r1 > :nth-child(2) {
    border-left: 1px solid var(--tm-blue);
  }

  /* CTA-Kachel ueber volle Breite */
  .tm-bf__cta {
    grid-column: 1 / -1;
    border-left: 0;
  }
}


/* ---------- MOBILE (≤900px): Einspaltig ---------- */

@media (max-width: 900px) {
  .tm-bf__row--r1,
  .tm-bf__row--r2,
  .tm-bf__row--r3 {
    grid-template-columns: 1fr;
  }

  .tm-bf__card {
    min-height: 220px;
    padding: 22px 18px;
    gap: 26px;
  }

  .tm-bf__icon {
    width: 80px;
    height: 80px;
  }

  .tm-bf__label {
    font-size: 25px;
    line-height: 34px;
    margin-top: 0;
  }

  .tm-bf__headline {
    font-size: 28px;
    line-height: 1.2;
  }

  .tm-bf__cta-title {
    font-size: 25px;
    line-height: 34px;
  }

  .tm-bf__content {
    gap: 12px;
  }

  /* Nur horizontale Trennlinien */
  .tm-bf__card {
    border-left: 0;
    border-bottom: 1px solid var(--tm-blue);
  }

  .tm-bf__row--r3 > :first-child {
    border-bottom: 0;
  }
}


/* ---------- SMALL MOBILE (≤560px) ---------- */

@media (max-width: 560px) {
  .tm-bf__card {
    min-height: 180px;
  }

  .tm-bf__link {
    width: auto;
    height: auto;
    padding: 8px 16px;
    font-size: 16px;
    line-height: 1.6;
  }
}


/* ==========================================================================
   5. REFERENZEN-SECTION (Hintergrund + Heading)
   ========================================================================== */

.tm-referenzen-wrap {
  background: #E1E3E3;
  padding-top: var(--tm-section-py);
  padding-bottom: var(--tm-section-py);
  overflow: hidden;
}

/* Intro-Block über dem Slider.
   Etwas breiter als Home-Ansatz (1040px), damit der Titel auf zwei Zeilen
   am <br> umbricht ("70 % … scheitern." / "Für alle anderen gibt es uns."). */
.tm-referenzen-intro {
  box-sizing: content-box;
  max-width: 1040px;
  margin: 0 auto calc(var(--tm-section-py) * 0.6);
  padding: 0 var(--tm-edge-padding);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tm-referenzen-intro__title {
  margin: 0;
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-light);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.2;
  color: var(--tm-blue);
}

.tm-referenzen-intro__text {
  margin: 0;
  font-family: var(--tm-font-body);
  font-weight: var(--tm-fw-regular);
  font-size: 18px;
  line-height: 1.6;
  color: var(--tm-blue);
}

/* Referenzen-Karten: kompaktere Logo-Darstellung */
.tm-referenzen-wrap .tm-slider__img--contain,
.tm-referenzen-wrap .tm-slider__img--contain-sm {
  padding: 24px 60px;
}

.tm-referenzen-wrap .tm-slider__img--contain-sm {
  padding: 36px 80px;
}

/* Referenzen-Karten: weniger Weissraum in der Textbox */
.tm-referenzen-wrap .tm-slider__body {
  padding: 24px 30px;
  gap: 0;
}

.tm-referenzen-wrap .tm-slider__title {
  margin-bottom: 8px;
  min-height: 0;
}

.tm-referenzen-wrap .tm-slider__copy {
  margin-bottom: 16px;
}

/* Referenzen-Karten Mobil: Logo + Textbox kompakter */
@media (max-width: 900px) {
  .tm-referenzen-wrap .tm-slider {
    --tm-slider-img-h: 140px;
    --tm-slider-text-h: 220px;
  }
  /* contain (normale Logos) */
  .tm-referenzen-wrap .tm-slider__img--contain {
    padding: 32px 48px;
    height: 140px;
  }

  /* contain-sm (groessere Logos wie "Arbeit und Leben") – weniger Padding */
  .tm-referenzen-wrap .tm-slider__img--contain-sm {
    padding: 24px 36px;
    height: 140px;
  }

  .tm-referenzen-wrap .tm-slider__img--contain img,
  .tm-referenzen-wrap .tm-slider__img--contain-sm img {
    max-height: 100%;
    object-fit: contain;
  }

  .tm-referenzen-wrap .tm-slider__body {
    padding: 16px 20px;
    height: 220px;
  }

  .tm-referenzen-wrap .tm-slider__title {
    margin-bottom: 6px;
    font-size: 22px;
    line-height: 1.3;
  }

  .tm-referenzen-wrap .tm-slider__copy {
    margin-bottom: 12px;
    font-size: 16px;
  }

  .tm-referenzen-wrap .tm-slider__body .tm-btn {
    margin-top: auto;
  }
}


/* ==========================================================================
   6. USP-SECTION – Wrapper mit Heading + Hintergrundfarbe
   ========================================================================== */

.tm-usp-wrap {
  background: #FAFCFC;
  padding-top: var(--tm-section-py);
  overflow: hidden;
}

/* USP-Section braucht kein eigenes padding-top mehr (Wrapper liefert es) */
.tm-usp-wrap .tm-usp {
  padding-top: 0;
}


/* ==========================================================================
   7. AKTUELLE BEITRAEGE-SECTION
   --------------------------------------------------------------------------
   Hintergrundbild mit dunklem Overlay.
   Vertikaler gruener Trenner zur vorherigen Sektion.
   ========================================================================== */

.tm-beitraege-wrap {
  position: relative;
  padding-top: var(--tm-section-py);
  padding-bottom: var(--tm-section-py);
  overflow-x: hidden;
  overflow-y: visible;
}

/* Hintergrundbild */
.tm-beitraege-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("https://www.transformis-consulting.de/wp-content/uploads/2026/03/Dunkles-Wasser-scaled.jpg")
    center / cover no-repeat;
  z-index: 0;
}

/* Dunkles Overlay */
.tm-beitraege-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

/* Inhalt ueber das Overlay heben */
.tm-beitraege-wrap > * {
  position: relative;
  z-index: 2;
}

/* Intro-Block für Aktuelles (zentriert, gleiche Einrückung) */
.tm-beitraege-intro {
  box-sizing: content-box;
  max-width: var(--tm-container-narrow);
  margin: 0 auto calc(var(--tm-section-py) * 0.6);
  padding: 0 var(--tm-edge-padding);
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

.tm-beitraege-intro__title {
  margin: 0;
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-light);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.2;
  color: var(--tm-white);
}

.tm-beitraege-intro__text {
  margin: 0;
  font-family: var(--tm-font-body);
  font-weight: var(--tm-fw-regular);
  font-size: 18px;
  line-height: 1.6;
  color: var(--tm-white);
}

/* Team-Section: Styles jetzt direkt in tm-team.css */

/* Startseite-Override: Team-Heading als head-xl-light (52px, light) */
.tm-startseite .tm-team__heading,
.tm-startseite .tm-team__heading strong {
  font-weight: var(--tm-fw-light);
}


/* ==========================================================================
   BUTTON MIT DOWNLOAD-ICON (Content-Update 2026-07)
   --------------------------------------------------------------------------
   Icon als CSS-Mask, damit es die Textfarbe des Buttons erbt (funktioniert
   dadurch auf gruenem UND auf outline/blauem Button). Der Broschueren-Modal-
   Trigger wird als <button> gerendert – deshalb hier zusaetzlich die
   Flex-Ausrichtung, die der <a>-Variante entspricht.
   ========================================================================== */

.tm-startseite {
  --tm-icon-download: 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");
}

.tm-startseite .tm-btn--icon-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.tm-startseite .tm-btn--icon-download::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--tm-icon-download) no-repeat center / contain;
          mask: var(--tm-icon-download) no-repeat center / contain;
}


/* ==========================================================================
   TEAM-HEADING EINZEILIG ("Ihre Zukunft beginnt hier.")
   --------------------------------------------------------------------------
   Im zweispaltigen Layout steht dem Heading nur die halbe Seitenbreite zur
   Verfuegung. Der rechte Innenabstand wird verkleinert und die Schriftgroesse
   an die Spaltenbreite gekoppelt (statt reinem vw), damit der Satz von 963px
   bis Desktop in einer Zeile bleibt – ab ca. 1550px in voller Groesse (52px).
   Einspaltig (<= 962px) gilt wieder das Standardverhalten aus tm-team.css.
   ========================================================================== */

@media (min-width: 963px) {
  .tm-startseite .tm-team__text {
    padding-right: 48px;
  }

  .tm-startseite .tm-team__heading {
    font-size: min(52px, calc(4.2vw - 12px));
    white-space: nowrap;
  }
}