/* ==========================================================================
   transformis® · Design-Tokens & Global Base
   --------------------------------------------------------------------------
   Einzige Stelle fuer Farben, Fonts, Spacing.
   Bei Rebranding: NUR diese Datei aendern.
   ========================================================================== */

:root {
  /* ── Farben (Rebranding 2026) ── */
  --tm-blue:       #05132C;
  --tm-green:      #ABFF00;
  --tm-white:      #ffffff;
  --tm-black:      #08080A;
  --tm-blue-600:   #1E2B41;
  --tm-white-soft:  #FAFCFC;
  --tm-gray-light: #F5F5F5;
  --tm-gray-border:#E5E5E5;
  --tm-disabled-bg:  #E6E7EA;
  --tm-disabled-text:#697180;

  /* ── Fonts (alles Open Sans, lokal via OMGF) ── */
  --tm-font-heading: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --tm-font-body:    "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* ── Font-Weights ── */
  --tm-fw-extralight: 200;
  --tm-fw-light:      300;
  --tm-fw-regular:    400;
  --tm-fw-bold:       700;
  --tm-fw-extrabold:  800;

  /* ── Layout ── */
  --tm-section-py:       clamp(3rem, 8vw, 128px);
  --tm-container-narrow: 900px;
  --tm-container-max:    1200px;
  --tm-container-wide:   1450px;
  --tm-content-padding:  clamp(24px, 4vw, 56px);

  /* ── Dynamisches Edge-Padding ──
     Auf schmalen Screens = --tm-content-padding.
     Auf breiten Screens (>1450px) = gleicher Abstand wie zentrierter Container.
     → Alle Sektionen (Hero, Split, CTA, Headings) landen auf einer Linie. */
  --tm-edge-padding: max(
    var(--tm-content-padding),
    calc((100vw - var(--tm-container-wide)) / 2 + var(--tm-content-padding))
  );

  /* ── Transitions ── */
  --tm-transition:      0.2s ease;
  --tm-transition-slow: 0.35s ease;
}

/* ── Globales Box-Sizing & Antialiasing fuer .tm-* Elemente ── */
[class*="tm-"],
[class*="tm-"] *,
[class*="tm-"] *::before,
[class*="tm-"] *::after {
  box-sizing: border-box;
}

[class*="tm-"] {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-transform: none;
}

/* ==========================================================================
   Typografie-System (Rebranding 2026)
   --------------------------------------------------------------------------
   Klassen fuer konsistente Schriftgroessen seitenweit.
   Jede Klasse = Font-Family + Weight + Size + Line-Height.
   ========================================================================== */

/* ── Headlines ── */
.tm-head-xl {
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-extrabold);
  font-size: 52px;
  line-height: 1.2;
}

.tm-head-xl-light {
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-extralight);
  font-size: 40px;
  line-height: 1.2;
}

.tm-head-l {
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-extrabold);
  font-size: 40px;
  line-height: 1.3;
}

.tm-head-l-regular {
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-regular);
  font-size: 32px;
  line-height: 1.4;
}

.tm-head-m {
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-extrabold);
  font-size: 28px;
  line-height: 1.3;
}

.tm-head-sm {
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-extrabold);
  font-size: 20px;
  line-height: 1.3;
}

/* ── Body ── */
.tm-body-l {
  font-family: var(--tm-font-body);
  font-weight: var(--tm-fw-regular);
  font-size: 24px;
  line-height: 1.5;
}

.tm-body-m {
  font-family: var(--tm-font-body);
  font-weight: var(--tm-fw-regular);
  font-size: 18px;
  line-height: 1.6;
}

.tm-body-m-bold {
  font-family: var(--tm-font-body);
  font-weight: var(--tm-fw-bold);
  font-size: 18px;
  line-height: 1.6;
}


/* ── Container Helper ── */
.tm-container {
  width: 100%;
  max-width: var(--tm-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--tm-content-padding);
  padding-right: var(--tm-content-padding);
}

.tm-container--wide {
  max-width: var(--tm-container-wide);
}

/* ── Section Wrapper ── */
.tm-section {
  width: 100%;
  padding-top: var(--tm-section-py);
  padding-bottom: var(--tm-section-py);
}

/* ── Section Heading (reusable) ── */
.tm-section-heading {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: clamp(24px, 3vw, 48px);
  padding: 0 var(--tm-edge-padding);
}

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

.tm-section-heading__sep {
  display: inline-block;
  width: 80px;
  height: auto;
}


/* ==========================================================================
   The7-Overrides fuer transformis Custom Templates
   --------------------------------------------------------------------------
   Scoped auf body.tm-template → greift NUR auf unseren Seiten.
   ========================================================================== */

/* ── Full-Width: NUR #main Container – Footer/Header bleiben unangetastet ── */
/* The7 setzt #main>.wf-wrap { width:1300px } – ID-Selektor erfordert !important */
body.tm-template #main,
body.tm-template #main .tm-main {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

body.tm-template #main > .wf-wrap,
body.tm-template #main .wf-container-main {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

/* ── The7 Page-Title-Leiste ausblenden (CSS-Fallback) ── */
body.tm-template .page-title {
  display: none !important;
}

/* ── Headings: Kein Uppercase, kein Italic (The7 Override) ── */
/* Farbe wird NICHT global gesetzt – jede Komponente steuert ihre eigene Farbe */
body.tm-template h1,
body.tm-template h2,
body.tm-template h3,
body.tm-template h4,
body.tm-template h5,
body.tm-template h6 {
  text-transform: none !important;
  font-style: normal !important;
}

/* The7 setzt --the7-h2-color etc. → auf unseren Seiten ueberschreiben */
body.tm-template {
  --the7-h2-color: var(--tm-blue);
  --the7-h3-color: var(--tm-blue);
  --the7-h4-color: var(--tm-blue);
}



/* ==========================================================================
   Ungeordnete Listen – Globale CD-Styles
   --------------------------------------------------------------------------
   Grüner Pfeil statt Bullet. Gilt im Gutenberg-Content-Bereich
   auf unseren Custom-Template-Seiten.
   ========================================================================== */

/* Ausschluss: Block-eigene Listen (haben eigene Pfeil-Icons per <img>) */
body.tm-template .entry-content ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list),
body.tm-template .tm-leistung__content ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list),
body.tm-template .tm-standard__content-inner ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) {
  list-style: none !important;
  margin: 24px 0 !important;
  padding: 0 !important;
}

body.tm-template .entry-content ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) > li,
body.tm-template .tm-leistung__content ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) > li,
body.tm-template .tm-standard__content-inner ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) > li {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  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-blue, #05132C) !important;
}

body.tm-template .entry-content ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) > li + li,
body.tm-template .tm-leistung__content ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) > li + li,
body.tm-template .tm-standard__content-inner ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) > li + li {
  margin-top: 16px !important;
}

body.tm-template .entry-content ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) > li::before,
body.tm-template .tm-leistung__content ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) > li::before,
body.tm-template .tm-standard__content-inner ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) > li::before {
  content: "" !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  width: 24px !important;
  height: 24px !important;
  margin-top: 3px !important;
  background: url("https://www.transformis-consulting.de/wp-content/uploads/2026/03/PfeilRechtsGruen.svg") center / contain no-repeat !important;
}

/* ── Verschachtelte Listen ── */
body.tm-template .entry-content ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) ul,
body.tm-template .tm-leistung__content ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) ul,
body.tm-template .tm-standard__content-inner ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) ul {
  margin: 12px 0 0 !important;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  body.tm-template .entry-content ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) > li,
  body.tm-template .tm-leistung__content ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) > li,
  body.tm-template .tm-standard__content-inner ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) > li {
    font-size: 16px !important;
    gap: 12px !important;
  }

  body.tm-template .entry-content ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) > li::before,
  body.tm-template .tm-leistung__content ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) > li::before,
  body.tm-template .tm-standard__content-inner ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) > li::before {
    width: 20px !important;
    height: 20px !important;
  }

  body.tm-template .entry-content ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) > li + li,
  body.tm-template .tm-leistung__content ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) > li + li,
  body.tm-template .tm-standard__content-inner ul:not(.tm-grey-bullets__list):not(.tm-green-bullets__list):not(.tm-numbered-accordion__bullets):not(.tm-blue-questions__list) > li + li {
    margin-top: 12px !important;
  }
}


/* ── Zugaenglichkeit ── */
@media (prefers-reduced-motion: reduce) {
  [class*="tm-"],
  [class*="tm-"] * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}