/* =========================================================
   TOABAI TYPOGRAPHY SYSTEM
   Rollen statt seitenspezifischer Schriftgrößen.
========================================================= */

:root {
  --tm-type-body: 1rem;
  --tm-type-body-lg: 1.125rem;
  --tm-type-small: 0.875rem;
  --tm-type-eyebrow: 0.78rem;

  --tm-type-page-title: clamp(2.75rem, 5.1vw, 5.5rem);
  --tm-type-section-title: clamp(2.15rem, 3.35vw, 3.5rem);
  --tm-type-content-title: clamp(1.8rem, 2.55vw, 2.65rem);
  --tm-type-component-title: clamp(1.3rem, 1.55vw, 1.65rem);
  --tm-type-small-title: clamp(1.08rem, 1.15vw, 1.25rem);

  --tm-type-line-body: 1.72;
  --tm-type-line-lead: 1.68;
  --tm-type-line-display: 1.04;
  --tm-type-line-heading: 1.12;
  --tm-type-line-component: 1.22;
  --tm-type-tracking-display: -0.05em;
  --tm-type-tracking-heading: -0.035em;
  --tm-type-measure: 68ch;
  --tm-type-measure-lead: 58ch;
}

body {
  font-family: var(--tm-font-family);
  font-size: var(--tm-type-body);
  line-height: var(--tm-type-line-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body main h1,
body main h2,
body main h3,
body main h4,
body main h5,
body main h6 {
  margin-top: 0;
  color: var(--tm-color-text);
  text-wrap: balance;
}

/* Semantische Fallbacks für noch nicht migrierte Templates. */
body main h1 {
  font-size: var(--tm-type-page-title);
  font-weight: 800;
  line-height: var(--tm-type-line-display);
  letter-spacing: var(--tm-type-tracking-display);
}
body main h2 {
  font-size: var(--tm-type-section-title);
  font-weight: 800;
  line-height: var(--tm-type-line-display);
  letter-spacing: var(--tm-type-tracking-display);
}
body main h3 {
  font-size: var(--tm-type-component-title);
  font-weight: 800;
  line-height: var(--tm-type-line-component);
  letter-spacing: var(--tm-type-tracking-heading);
}
body main h4 {
  font-size: var(--tm-type-small-title);
  font-weight: 750;
  line-height: 1.28;
  letter-spacing: -0.02em;
}

/* Verbindliche Typografierollen. */
body main .tm-type-page-title {
  font-size: var(--tm-type-page-title);
  font-weight: 800;
  line-height: var(--tm-type-line-display);
  letter-spacing: var(--tm-type-tracking-display);
}
body main .tm-type-section-title {
  margin-bottom: 0;
  font-size: var(--tm-type-section-title);
  font-weight: 800;
  line-height: var(--tm-type-line-display);
  letter-spacing: var(--tm-type-tracking-display);
}
body main .tm-type-component-title {
  font-size: var(--tm-type-component-title);
  font-weight: 800;
  line-height: var(--tm-type-line-component);
  letter-spacing: var(--tm-type-tracking-heading);
}

body main p,
body main li { line-height: var(--tm-type-line-body); }
body main p { color: var(--tm-color-muted); }

.tm-lead,
.tm-page-hero-lead,
.tm-maint-lead,
.tm-web-lead,
.tm-care-sites-lead,
.tm-error-lead {
  max-width: var(--tm-type-measure-lead);
  color: var(--tm-color-muted);
  font-size: var(--tm-type-body-lg);
  line-height: var(--tm-type-line-lead);
}

/* Abschnittsköpfe: gleiche Rolle, gleiche Proportionen. */
.tm-section-head h2,
.tm-section-head-center h2,
.tm-section-header h2,
.tm-section-header-center h2,
.tm-maint-head h2,
.tm-web-head h2,
.tm-contact-section-head h2,
.tm-care-sites-section-head h2 {
  margin-bottom: 0;
  font-size: var(--tm-type-section-title);
  line-height: var(--tm-type-line-display);
  letter-spacing: var(--tm-type-tracking-display);
}

.tm-section-head p,
.tm-section-head-center p,
.tm-section-header p,
.tm-section-header-center p,
.tm-maint-head p,
.tm-web-head p,
.tm-contact-section-head p,
.tm-care-sites-section-head p {
  max-width: var(--tm-type-measure-lead);
  margin-top: 1.25rem;
  font-size: var(--tm-type-body-lg);
  line-height: var(--tm-type-line-lead);
}
.tm-section-head-center p,
.tm-section-header-center p,
.tm-maint-head-center p,
.tm-web-head-center p { margin-inline: auto; }

.tm-eyebrow,
.tm-unified-eyebrow,
.tm-care-sites-eyebrow,
.tm-contact-eyebrow,
.tm-legal-eyebrow,
.tm-report-cta-eyebrow {
  display: block;
  margin: 0 0 1.125rem;
  color: var(--tm-color-primary);
  font-size: var(--tm-type-eyebrow);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Redaktionelle Inhalte besitzen bewusst eine kompaktere H2-Rolle. */
.entry-content,
.tm-article-content,
.tm-wissen-article-body,
.tm-legal-content {
  font-size: var(--tm-type-body);
  line-height: var(--tm-type-line-body);
}
.entry-content > p,
.tm-article-content > p,
.tm-wissen-article-body > p,
.tm-legal-content > p { max-width: var(--tm-type-measure); }
.entry-content h2,
.tm-article-content h2,
.tm-wissen-article-body h2,
.tm-legal-content h2 {
  margin-top: 2.6em;
  margin-bottom: 0.7em;
  font-size: var(--tm-type-content-title);
  line-height: var(--tm-type-line-heading);
  letter-spacing: -0.045em;
}
.entry-content h3,
.tm-article-content h3,
.tm-wissen-article-body h3,
.tm-legal-content h3 {
  margin-top: 2.1em;
  margin-bottom: 0.65em;
}
.entry-content a,
.tm-article-content a,
.tm-wissen-article-body a,
.tm-legal-content a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
}

/* Kompatibilitätsrollen für bestehende Templates.
   Ersetzen die frühere zweite Typografie-Datei ohne globale Überschreibungen. */
.tm-display-lg {
  font-size: var(--tm-type-page-title);
  font-weight: 800;
  line-height: var(--tm-type-line-display);
  letter-spacing: var(--tm-type-tracking-display);
}

.tm-maint-copy,
.tm-web-copy,
.tm-web-hero-content {
  max-width: 48.75rem;
}

.tm-maint-copy h2,
.tm-maint-final h2,
.tm-web-copy h2,
.tm-web-info-box h2,
.tm-web-final h2 {
  margin: 1rem 0 0;
  font-size: var(--tm-type-section-title);
  line-height: var(--tm-type-line-display);
  letter-spacing: var(--tm-type-tracking-display);
}

.tm-maint-copy p,
.tm-maint-final p,
.tm-web-copy p,
.tm-web-info-box p,
.tm-web-final p {
  max-width: var(--tm-type-measure-lead);
  margin: 1.5rem 0 0;
  font-size: var(--tm-type-body-lg);
  line-height: var(--tm-type-line-lead);
}

.tm-maint-copy .tm-btn,
.tm-web-care-panel .tm-btn {
  margin-top: 2rem;
}

.tm-maint-tags,
.tm-web-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-top: 1.5rem;
}

.tm-maint-tags span,
.tm-web-tags span,
.tm-web-reference-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 2.125rem;
  padding: 0 .8125rem;
  border: 1px solid var(--tm-color-border);
  border-radius: 999px;
  background: var(--tm-color-surface);
  color: var(--tm-color-muted);
  font-size: .76rem;
  font-weight: 800;
}

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --tm-type-page-title: clamp(2.65rem, 6.6vw, 4.55rem);
    --tm-type-section-title: clamp(2.05rem, 4.7vw, 3.1rem);
    --tm-type-content-title: clamp(1.75rem, 3.4vw, 2.4rem);
  }
}

/* Smartphone */
@media (max-width: 760px) {
  :root {
    --tm-type-body: 1rem;
    --tm-type-body-lg: 1.0625rem;
    --tm-type-page-title: clamp(2.4rem, 10vw, 3.55rem);
    --tm-type-section-title: clamp(2rem, 7.8vw, 2.75rem);
    --tm-type-content-title: clamp(1.7rem, 6.4vw, 2.25rem);
    --tm-type-component-title: clamp(1.28rem, 5vw, 1.55rem);
    --tm-type-line-body: 1.68;
    --tm-type-line-lead: 1.62;
    --tm-type-line-display: 1.03;
  }
  .tm-section-head p,
  .tm-section-head-center p,
  .tm-section-header p,
  .tm-section-header-center p,
  .tm-maint-head p,
  .tm-web-head p,
  .tm-contact-section-head p,
  .tm-care-sites-section-head p { margin-top: 1rem; }
}

/* Große Monitore / TV: Proportionen wachsen kontrolliert, Zeilen bleiben lesbar. */
@media (min-width: 1600px) {
  :root {
    --tm-type-page-title: 5.5rem;
    --tm-type-section-title: 3.5rem;
    --tm-type-content-title: 2.65rem;
    --tm-type-body-lg: 1.1875rem;
  }
}