/* ==========================================================================
   transformis® · Über uns – Seitenspezifische Styles (Entwurf 2026-10)
   --------------------------------------------------------------------------
   Sektionen:
   1. Hero                 (dunkelblau, Outline-Pfeil links, Dreieck an der Kante)
   2. Positionierung       (weiss, 900px-Spalte)
   3. Für wen wir arbeiten (dunkelblau, 6 Kacheln ohne Link)
   4. Unsere Erfahrung     (weiss, Text + 2x2 Kennzahlen)
   5. Warum transformis®   (blau-600, 8 Icon-Kacheln, grosser Outline-Pfeil)
   6. Persönlich sprechen  (grau, Ansprechpartner + Terminbuchung)

   Raster aus dem Entwurf (1600px Artboard):
   - schmale Spalte 900px  (Sektion 1 + 2)
   - breite Spalte 1420px  (Sektion 3–5)
   Kachel-Markup in Sektion 6 kommt aus blocks/ansprechpartner(-calendly)/style.css.
   ========================================================================== */


/* ── Seiten-Wrapper ──
   overflow-x: clip schneidet die Deko-Pfeile am Viewport-Rand ab, ohne
   (wie overflow: hidden) das Dreieck an der Hero-Kante zu kappen. */
.tm-ueber-uns {
  overflow-x: clip;
}

.tm-ub-narrow,
.tm-ub-wide {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 0 var(--tm-content-padding);
}

.tm-ub-narrow {
  max-width: calc(900px + 2 * var(--tm-content-padding));
}

.tm-ub-wide {
  max-width: calc(1420px + 2 * var(--tm-content-padding));
}


/* ── Typografie ── */
.tm-ueber-uns .tm-ub-h2 {
  margin: 0;
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-light);
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.2;
  color: var(--tm-black);
}

.tm-ueber-uns .tm-ub-h2--light {
  color: var(--tm-white-soft);
}

.tm-ueber-uns .tm-ub-lead,
.tm-ueber-uns .tm-ub-copy p {
  margin: 0;
  font-family: var(--tm-font-body);
  font-weight: var(--tm-fw-regular);
  font-size: 18px;
  line-height: 1.4;
  color: inherit;
}

/* Leerzeile zwischen Absaetzen wie im Entwurf (= eine Zeilenhoehe) */
.tm-ueber-uns .tm-ub-copy p + p {
  margin-top: 1.4em;
}

.tm-ueber-uns .tm-ub-copy strong {
  font-weight: var(--tm-fw-bold);
}

.tm-ub-copy--light,
.tm-ub-head .tm-ub-lead {
  color: var(--tm-white-soft);
}

.tm-ub-head {
  position: relative;
  z-index: 1;                  /* Text immer ueber Deko-Pfeilen */
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 900px;
}

.tm-ub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

/* Termin-Buttons sind <button>: Browser-Defaults an .tm-btn angleichen */
.tm-ub-actions button.tm-btn {
  padding: 12px 20px;
  border-radius: 0;
}


/* ==========================================================================
   1. HERO
   ========================================================================== */

.tm-ub-hero {
  position: relative;
  z-index: 2;                  /* Dreieck liegt ueber der Folgesektion */
  background: var(--tm-blue);
  color: var(--tm-white);
  /* Header ist fixed (~105px) */
  padding: calc(105px + clamp(48px, 6vw, 80px)) 0 96px;
}

.tm-ueber-uns .tm-ub-hero__title {
  margin: 0 0 16px;
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-light);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.2;
  color: var(--tm-green);
}

.tm-ub-hero__text {
  color: var(--tm-white);
}

/* Outline-Pfeil links (Polygon-Abschnitt-Warum-transformis.svg, wie die
   Inhalts-Deko der Leistungsseiten). Die Schenkel enden am Viewport-Rand,
   die Spitze (rechter Bildrand, 54.9 % der Hoehe) sitzt 50px vor der
   Textspalte auf Hoehe der Headline-Mitte (3 Zeilen à 1.2em). */
.tm-ub-hero__deco {
  position: absolute;
  left: 0;
  top: calc(105px + clamp(48px, 6vw, 80px) + 1.8 * clamp(36px, 5vw, 64px));
  width: calc(50% - 500px);
  height: auto;
  transform: translateY(-54.9%);
  pointer-events: none;
  z-index: 0;
}

/* Gefuellter Pfeil (Polygon-66.svg, wie Leistungsseiten) rechts unten,
   halb in der Folgesektion */
.tm-ub-hero__triangle {
  position: absolute;
  bottom: 0;
  left: calc(50% + min(524px, 50% - 190px));
  width: clamp(96px, 10.7vw, 171px);
  height: auto;
  transform: translateY(50%);
  pointer-events: none;
  z-index: 3;
}

@media (max-width: 1279px) {
  .tm-ub-hero__deco { display: none; }
}

@media (max-width: 900px) {
  .tm-ub-hero {
    padding: calc(90px + 56px) 0 72px;
  }
}

@media (max-width: 640px) {
  .tm-ub-hero {
    padding: calc(60px + 48px) 0 64px;
  }
  .tm-ub-hero__triangle {
    left: auto;
    right: var(--tm-content-padding);
    width: 72px;
  }
}


/* ==========================================================================
   2. POSITIONIERUNG
   ========================================================================== */

.tm-ub-intro {
  padding: clamp(80px, 9vw, 128px) 0 clamp(48px, 6vw, 88px);
  background: var(--tm-white);
  color: var(--tm-blue);
}

.tm-ub-intro__block {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.tm-ub-intro__block--sub {
  gap: 24px;
  margin-top: 64px;
  max-width: 810px;
  color: var(--tm-black);
}

.tm-ueber-uns .tm-ub-intro__title {
  margin: 0;
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-light);
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.3;
  color: var(--tm-blue);
}

.tm-ueber-uns .tm-ub-intro__title--sub {
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  color: var(--tm-black);
}


/* ==========================================================================
   3. FÜR WEN WIR ARBEITEN
   ========================================================================== */

.tm-ub-zielgruppen {
  position: relative;
  padding: clamp(64px, 7vw, 96px) 0;
  background: var(--tm-blue);
  color: var(--tm-white);
  overflow: hidden;
}

.tm-ueber-uns .tm-ub-zielgruppen__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.tm-ueber-uns .tm-ub-zielgruppen__card {
  display: flex;
  align-items: flex-start;
  min-height: 200px;
  margin: 0;
  padding: 48px 32px;
  background: var(--tm-blue);
  border: 1px solid var(--tm-disabled-text);
}

.tm-ueber-uns .tm-ub-zielgruppen__card::before {
  content: none;               /* globale Listen-Pfeile ausschliessen */
}

.tm-ueber-uns .tm-ub-zielgruppen__title {
  margin: 0;
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-extrabold);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  color: var(--tm-green);
  hyphens: manual;
  overflow-wrap: break-word;
}

.tm-ueber-uns .tm-ub-zielgruppen__outro {
  max-width: 941px;
  margin: 48px 0 0;
  font-family: var(--tm-font-body);
  font-size: 18px;
  line-height: 1.4;
  color: var(--tm-white);
}

/* Deko unten rechts: dieselbe Pfeil-Gruppe wie oben rechts auf den
   Leistungsseiten (.tm-leistung-atf__arrow-lg/-sm, gleiche Abstaende).
   Die Spitze des Outline-Pfeils liegt hinter der letzten Kachel, der
   gefuellte Pfeil sitzt darunter neben dem Abschlusstext. */
.tm-ub-zielgruppen__deco {
  position: absolute;
  right: 0;
  bottom: 24px;
  width: 300px;
  height: 290px;
  pointer-events: none;
  z-index: 0;
}

.tm-ub-zielgruppen__deco-lg,
.tm-ub-zielgruppen__deco-sm {
  position: absolute;
  height: auto;
}

.tm-ub-zielgruppen__deco-lg {
  top: 0;
  right: 0;
  width: 300px;
}

.tm-ub-zielgruppen__deco-sm {
  top: 125px;
  right: 160px;
  width: 140px;
}

/* Darunter kollidiert der gefuellte Pfeil mit dem Abschlusstext */
@media (max-width: 1299px) {
  .tm-ub-zielgruppen__deco { display: none; }
}

@media (max-width: 1024px) {
  .tm-ueber-uns .tm-ub-zielgruppen__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .tm-ueber-uns .tm-ub-zielgruppen__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .tm-ueber-uns .tm-ub-zielgruppen__card {
    min-height: 0;
    padding: 32px 24px;
  }
}


/* ==========================================================================
   4. UNSERE ERFAHRUNG
   ========================================================================== */

.tm-ub-erfahrung {
  padding: clamp(64px, 7vw, 96px) 0;
  background: var(--tm-white);
  color: var(--tm-black);
}

.tm-ub-erfahrung__layout {
  display: flex;
  align-items: center;
  gap: clamp(48px, 6vw, 96px);
}

.tm-ub-erfahrung__text {
  flex: 0 1 800px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.tm-ub-erfahrung__text .tm-ub-actions {
  margin-top: 0;
}

.tm-ueber-uns .tm-ub-erfahrung__claim {
  margin: 0;
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-extrabold);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  color: var(--tm-blue);
}

.tm-ueber-uns .tm-ub-facts {
  flex: 1 1 524px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tm-ueber-uns .tm-ub-facts__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 200px;
  margin: 0;
  padding: 32px 16px;
  background: var(--tm-white);
  border: 1px solid #CDD0D5;
  text-align: center;
}

.tm-ueber-uns .tm-ub-facts__item::before {
  content: none;
}

.tm-ub-facts__value {
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-extrabold);
  font-size: clamp(56px, 5.5vw, 80px);
  line-height: 1;
  color: var(--tm-black);
}

.tm-ub-facts__label {
  font-family: var(--tm-font-body);
  font-size: 18px;
  line-height: 1.4;
  color: var(--tm-black);
}

@media (max-width: 1100px) {
  .tm-ub-erfahrung__layout {
    flex-direction: column;
    align-items: stretch;
  }
  .tm-ub-erfahrung__text,
  .tm-ueber-uns .tm-ub-facts {
    flex: 0 0 auto;
  }
  .tm-ueber-uns .tm-ub-facts {
    max-width: 640px;
  }
}

@media (max-width: 480px) {
  .tm-ueber-uns .tm-ub-facts__item {
    min-height: 150px;
    padding: 24px 12px;
  }
}


/* ==========================================================================
   5. WARUM TRANSFORMIS®
   ========================================================================== */

.tm-ub-warum {
  position: relative;
  padding: clamp(64px, 7vw, 96px) 0;
  background: var(--tm-blue-600);
  color: var(--tm-white-soft);
  overflow: hidden;
}

.tm-ueber-uns .tm-ub-warum__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  background: var(--tm-blue-600); /* deckt den Pfeil auch in den Fugen ab */
}

.tm-ueber-uns .tm-ub-warum__card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 236px;
  margin: 0;
  padding: 32px;
  background: var(--tm-blue);
}

.tm-ueber-uns .tm-ub-warum__card::before {
  content: none;
}

.tm-ub-warum__icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 96px;
  height: 90px;
  color: var(--tm-green);
}

.tm-ub-warum__icon img,
.tm-ub-warum__icon svg {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: 0;
}

.tm-ub-warum__icon svg {
  width: 100%;
  height: 100%;
}

.tm-ueber-uns .tm-ub-warum__title {
  margin: 0;
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-bold);
  font-size: 18px;
  line-height: 1.4;
  color: var(--tm-white);
}

.tm-ub-warum__outro {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-top: 48px;
}

/* Grosser Outline-Pfeil: oberer Schenkel kommt vom linken Viewport-Rand
   und laeuft hinter die Kacheln, die Spitze liegt rechts unterhalb des
   Grids, der untere Schenkel wird am Sektionsende abgeschnitten.
   Bild: Polygon-Abschnitt-Warum-transformis.svg (wie Hero). Geometrie aus
   dem Entwurf: Spitze bei x = Viewport-Mitte + 456px, der obere Schenkel
   trifft den linken Rand ~64px oberhalb des Grids. Darum
   haengt der Pfeil am Grid-Wrapper und nicht an der Sektion – so bleibt
   die Lage unabhaengig von der Laenge des Intro-Texts. */
.tm-ub-warum__body {
  position: relative;
}

.tm-ub-warum__deco {
  position: absolute;
  /* zurueck bis an den Viewport-Rand (Containerversatz) */
  left: calc(-1 * max(var(--tm-content-padding), (100vw - 1420px) / 2));
  /* Spitze (97.5 % der Bildbreite) auf Viewport-Mitte + 456px */
  width: calc((50vw + 456px) / 0.975);
  height: auto;
  /* oberer Schenkel trifft den Viewport-Rand bei 7 % der Bildhoehe,
     das soll 64px oberhalb des Grids sein */
  top: calc(-64px - 0.084 * (50vw + 456px));
  pointer-events: none;
  z-index: 0;
}

/* Die Spitze liegt bei Grid-Oberkante + 199px + 28.87vw. Auf breiten
   Bildschirmen waechst der Pfeil schneller als der Inhalt – damit die
   Spitze nicht unter der Sektionskante verschwindet, waechst das untere
   Padding mit (Grid ~490px + Abschlusstext ~120px, Spitze + 50px Luft). */
@media (min-width: 1200px) {
  .tm-ub-warum {
    padding-bottom: max(clamp(64px, 7vw, 96px), calc(28.87vw - 360px));
  }
}

@media (max-width: 1199px) {
  .tm-ub-warum__deco { display: none; }
  .tm-ueber-uns .tm-ub-warum__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .tm-ueber-uns .tm-ub-warum__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .tm-ueber-uns .tm-ub-warum__card {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 24px;
  }
  .tm-ub-warum__icon {
    flex: 0 0 64px;
    width: 64px;
    height: 60px;
  }
}


/* ==========================================================================
   6. LASSEN SIE UNS PERSÖNLICH SPRECHEN
   ========================================================================== */

.tm-ub-kontakt {
  padding: clamp(64px, 7vw, 96px) var(--tm-content-padding);
  background: #F4F4F4;
  color: var(--tm-black);
}

.tm-ub-kontakt__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

/* Zwei gleich breite Kacheln (2 x 384px + 32px), gleiche Hoehe.
   Selektor bewusst spezifischer als .tm-ap-booking__row aus dem Block-CSS,
   das nach diesem Stylesheet geladen wird. */
.tm-ueber-uns .tm-ub-kontakt .tm-ap-booking__row {
  grid-template-columns: repeat(2, minmax(0, 384px));
  justify-content: center;
  align-items: stretch;
  gap: 32px;
  margin: 64px auto 0;
}

.tm-ueber-uns .tm-ub-kontakt .tm-ap-booking__person {
  display: flex;
}

.tm-ueber-uns .tm-ub-kontakt .tm-ansprechpartner-card {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  box-shadow: none;
}

.tm-ueber-uns .tm-ub-kontakt .tm-ap-booking__cta {
  padding: 32px;
}

@media (max-width: 760px) {
  .tm-ueber-uns .tm-ub-kontakt .tm-ap-booking__row {
    grid-template-columns: minmax(0, 420px);
    gap: 24px;
    margin-top: 40px;
  }
}