/* =========================================================
   TOABAI LAYOUT FOUNDATION · v1.1
   Verbindliche Quelle für Container, Seitenrhythmus und Heroes.
   Wird nach allen seitenbezogenen Styles geladen.
========================================================= */

:root {
  /* Container */
  --tm-layout-narrow: 820px;
  --tm-layout-content: 1120px;
  --tm-layout-wide: 1280px;
  --tm-layout-gutter: 32px;

  /* Responsiver Seitenstart: ein Wert je Ansicht, für alle Seitentypen */
  --tm-page-start-space: 56px;

  /* Vertikaler Rhythmus */
  --tm-section-space: 96px;
  --tm-section-space-sm: 72px;
  --tm-section-space-lg: 120px;
  --tm-flow-xs: 8px;
  --tm-flow-sm: 16px;
  --tm-flow-md: 24px;
  --tm-flow-lg: 40px;
  --tm-flow-xl: 56px;

  /* Raster */
  --tm-grid-gap: clamp(20px, 2.4vw, 32px);
  --tm-grid-gap-lg: clamp(32px, 4.5vw, 64px);

  /* Hero */
  --tm-hero-space-top: var(--tm-page-start-space);
  --tm-hero-space-bottom: 96px;
  --tm-hero-title-size: clamp(3rem, 5.4vw, 5.6rem);
  --tm-hero-title-line: .96;
  --tm-hero-title-spacing: -.068em;
  --tm-hero-lead-size: clamp(1.05rem, 1.5vw, 1.2rem);
  --tm-hero-lead-line: 1.7;
}

/* Verbindliche Container */
.tm-container,
.tm-page-inner,
.tm-layout-content {
  width: min(calc(100% - (2 * var(--tm-layout-gutter))), var(--tm-layout-content));
  max-width: var(--tm-layout-content);
  margin-inline: auto;
}

.tm-page-inner-narrow,
.tm-layout-narrow {
  width: min(calc(100% - (2 * var(--tm-layout-gutter))), var(--tm-layout-narrow));
  max-width: var(--tm-layout-narrow);
  margin-inline: auto;
}

.tm-page-inner-wide,
.tm-layout-wide {
  width: min(calc(100% - (2 * var(--tm-layout-gutter))), var(--tm-layout-wide));
  max-width: var(--tm-layout-wide);
  margin-inline: auto;
}

/* Verbindlicher Abschnittsrhythmus
   Die body-Präfixe sind bewusst gewählt: Die Foundation wird zuletzt geladen
   und löst damit alte seitenbezogene Padding-Varianten ab. */
body .tm-page-section {
  padding-top: var(--tm-section-space);
  padding-bottom: var(--tm-section-space);
}

body .tm-page-section-sm {
  padding-top: var(--tm-section-space-sm);
  padding-bottom: var(--tm-section-space-sm);
}

body .tm-page-section-lg {
  padding-top: var(--tm-section-space-lg);
  padding-bottom: var(--tm-section-space-lg);
}

/* Kompatibilität für bereits vollständig migrierte Systemsektionen. */
.tm-section {
  padding-block: var(--tm-section-space);
}

.tm-section-head,
.tm-section-head-center,
.tm-section-header,
.tm-section-header-center {
  max-width: 780px;
  margin-bottom: var(--tm-flow-xl);
}

.tm-section-head-center,
.tm-section-header-center {
  margin-inline: auto;
  text-align: center;
}

.tm-section-head > :last-child,
.tm-section-head-center > :last-child,
.tm-section-header > :last-child,
.tm-section-header-center > :last-child {
  margin-bottom: 0;
}

/* Verbindliche Raster */
.tm-grid-2,
.tm-grid-3,
.tm-grid-4 {
  display: grid;
  gap: var(--tm-grid-gap);
}

.tm-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tm-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.tm-grid-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: var(--tm-grid-gap-lg);
  align-items: start;
}

/* =========================================================
   EINHEITLICHES HERO-SYSTEM
   Einzige globale Quelle für Hero-Abstände, Typografie und Responsive.
   Bestehende Seitendateien steuern nur noch Farben und Visuals.
========================================================= */
body .tm-unified-hero {
  padding-top: var(--tm-hero-space-top) !important;
  padding-bottom: var(--tm-hero-space-bottom) !important;
}

body .tm-unified-hero > .tm-unified-hero-inner,
body .tm-unified-hero .tm-unified-hero-inner {
  width: min(calc(100% - (2 * var(--tm-layout-gutter))), var(--tm-layout-wide));
  max-width: var(--tm-layout-wide);
  margin-inline: auto;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body .tm-unified-hero .tm-page-hero-grid,
body .tm-unified-hero .tm-home-hero-grid,
body .tm-unified-hero .tm-care-sites-hero-grid,
body .tm-unified-hero .tm-contact-hero-grid,
body .tm-unified-hero .tm-v200-hero-grid,
body .tm-unified-hero .tm-web-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: var(--tm-grid-gap-lg);
  align-items: center;
}

body .tm-unified-hero .tm-page-hero-content,
body .tm-unified-hero .tm-home-hero-content,
body .tm-unified-hero .tm-care-sites-hero-copy,
body .tm-unified-hero .tm-contact-hero-copy,
body .tm-unified-hero .tm-v200-hero-copy,
body .tm-unified-hero .tm-web-hero-content,
body .tm-unified-hero .tm-wclp-hero-copy {
  max-width: 760px;
}

body .tm-unified-hero .tm-eyebrow,
body .tm-unified-hero .tm-unified-eyebrow,
body .tm-unified-hero .tm-care-sites-eyebrow,
body .tm-unified-hero .tm-contact-eyebrow {
  display: block !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  transform: none !important;
  color: var(--tm-color-primary) !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  letter-spacing: .145em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

body .tm-unified-hero.tm-about-hero .tm-eyebrow,
body .tm-unified-hero.tm-about-hero .tm-unified-eyebrow {
  color: #60a5fa !important;
}

body .tm-unified-hero h1,
body .tm-unified-hero .tm-page-hero-title,
body .tm-unified-hero .tm-web-hero-title {
  max-width: 820px;
  margin: 0;
  font-size: var(--tm-hero-title-size) !important;
  line-height: var(--tm-hero-title-line) !important;
  letter-spacing: var(--tm-hero-title-spacing) !important;
  text-wrap: balance;
}

body .tm-unified-hero .tm-page-hero-lead,
body .tm-unified-hero .tm-lead,
body .tm-unified-hero .tm-care-sites-lead,
body .tm-unified-hero .tm-wclp-lead,
body .tm-unified-hero .tm-contact-hero-copy > p:not(.tm-eyebrow):not(.tm-contact-eyebrow) {
  max-width: 680px;
  margin: 24px 0 0 !important;
  font-size: var(--tm-hero-lead-size) !important;
  line-height: var(--tm-hero-lead-line) !important;
}

body .tm-unified-hero .tm-page-hero-actions,
body .tm-unified-hero .tm-home-hero-actions,
body .tm-unified-hero .tm-hero-mockup-actions,
body .tm-unified-hero .tm-care-sites-actions,
body .tm-unified-hero .tm-contact-hero-actions,
body .tm-unified-hero .tm-maint-actions,
body .tm-unified-hero .tm-web-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center;
  justify-content: flex-start;
  gap: 14px !important;
  margin-top: 32px !important;
}

body .tm-home-hero-question .tm-hero-mockup-actions > a,
body .tm-home-hero-question .tm-home-hero-actions > a,
body .tm-home-hero-question .tm-hero-text-link {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}

@media (max-width: 980px) {
  body .tm-unified-hero .tm-page-hero-grid,
  body .tm-unified-hero .tm-home-hero-grid,
  body .tm-unified-hero .tm-care-sites-hero-grid,
  body .tm-unified-hero .tm-contact-hero-grid,
  body .tm-unified-hero .tm-v200-hero-grid,
  body .tm-unified-hero .tm-web-hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .tm-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  :root {
    --tm-layout-gutter: 16px;
    --tm-page-start-space: 28px;
    --tm-section-space: 72px;
    --tm-section-space-sm: 56px;
    --tm-section-space-lg: 88px;
    --tm-flow-xl: 36px;
    --tm-hero-space-top: var(--tm-page-start-space);
    --tm-hero-space-bottom: 58px;
    --tm-hero-title-size: clamp(2.6rem, 10.4vw, 3.7rem);
    --tm-hero-title-line: 1.01;
    --tm-hero-title-spacing: -.065em;
    --tm-hero-lead-size: 1.02rem;
    --tm-hero-lead-line: 1.68;
  }

  .tm-grid-2,
  .tm-grid-3,
  .tm-grid-4,
  .tm-grid-sidebar {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  body .tm-unified-hero .tm-page-hero-grid,
  body .tm-unified-hero .tm-home-hero-grid,
  body .tm-unified-hero .tm-care-sites-hero-grid,
  body .tm-unified-hero .tm-contact-hero-grid,
  body .tm-unified-hero .tm-v200-hero-grid,
  body .tm-unified-hero .tm-web-hero-grid {
    gap: 36px;
  }

  body .tm-unified-hero.tm-home-hero-question h1 {
    font-size: clamp(2.65rem, 10.8vw, 3.8rem) !important;
  }

  body .tm-unified-hero h1 br,
  body .tm-unified-hero .tm-page-hero-title br,
  body .tm-unified-hero .tm-web-hero-title br {
    display: none !important;
  }

  body .tm-unified-hero h1 span,
  body .tm-unified-hero .tm-web-hero-title span {
    display: inline !important;
  }

  body .tm-unified-hero .tm-page-hero-actions,
  body .tm-unified-hero .tm-home-hero-actions,
  body .tm-unified-hero .tm-hero-mockup-actions,
  body .tm-unified-hero .tm-care-sites-actions,
  body .tm-unified-hero .tm-contact-hero-actions,
  body .tm-unified-hero .tm-maint-actions,
  body .tm-unified-hero .tm-web-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: stretch;
    margin-top: 28px !important;
  }

  body .tm-unified-hero .tm-btn,
  body .tm-unified-hero .tm-hero-text-link {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* =========================================================
   GLOBALER RESPONSIVER SEITENSTART
   Alle öffentlichen Seitentypen nutzen .tm-page-start.
   Der Abstand wird je Ansichtsbereich zentral festgelegt und bleibt
   innerhalb derselben Ansicht auf jeder Seite identisch.
   PDF-/Druckansichten verwenden diese Klasse bewusst nicht.
========================================================= */
body:not(.tm-pdf-document-body):not(.login) .tm-page-start {
  padding-top: var(--tm-page-start-space) !important;
}

/* Tablet */
@media (min-width: 761px) and (max-width: 1024px) {
  :root {
    --tm-layout-gutter: 24px;
    --tm-page-start-space: 40px;
    --tm-section-space: 80px;
    --tm-section-space-sm: 64px;
    --tm-section-space-lg: 104px;
    --tm-hero-space-bottom: 80px;
  }
}

/* Große Desktop- und TV-Ansichten: großzügiger, aber klar begrenzt */
@media (min-width: 1440px) {
  :root {
    --tm-layout-gutter: 40px;
    --tm-page-start-space: 64px;
    --tm-section-space: 104px;
    --tm-section-space-sm: 80px;
    --tm-section-space-lg: 128px;
    --tm-hero-space-bottom: 104px;
  }
}