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

:root {
  /* ── Farben ── */
  --tm-blue:      #0E325D;
  --tm-orange:    #D38500;
  --tm-white:     #ffffff;
  --tm-black:     #08080A;
  --tm-gray-light:#F5F5F5;
  --tm-gray-border:#E5E5E5;

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

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

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

  /* ── 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;
}

/* ── 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: var(--tm-container-wide);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(24px, 3vw, 48px);
  padding: 0 var(--tm-content-padding);
}

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

.tm-section-heading__title strong,
.tm-section-heading__title b {
  font-weight: var(--tm-fw-bold);
}

.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);
}



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