/* Gemeinsame Schriftrollen; nach den Seitendateien laden.
   Die inszenierten Startseiten-Bildbereiche und Werkzeug-Bedienelemente
   behalten ihre eigenen Größen. Änderungen betreffen nur Typografie. */
@media screen {
  :root {
    --wg-type-title: clamp(2.5rem, calc(1.8rem + 3.5vw), 5.0625rem);
    --wg-type-section: clamp(2.375rem, calc(1.6rem + 2.8vw), 4.25rem);
    --wg-type-content: clamp(1.875rem, calc(1.3rem + 1.6vw), 2.75rem);
    --wg-type-body: 1rem;
    --wg-type-intro: 1.125rem;
    --wg-type-label: .75rem;
    --wg-leading-heading: 1.08;
    --wg-leading-copy: 1.8;
  }

  /* Gleichrangige Seitentitel: Leistungen, Referenzen, Bad, Projekte,
     Unternehmen, Kontakt, Raumstudio und Rechtsseiten. */
  .page-intro h1,
  .intro-with-photo h1,
  .bath-intro h1,
  .case-intro h1,
  #room-studio .room-intro h1,
  .legal-intro h1 {
    font-family: var(--sans);
    font-size: var(--wg-type-title);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.055em;
  }
  .page-intro h1 em,
  .intro-with-photo h1 em,
  .bath-intro h1 em,
  .case-intro h1 em,
  #room-studio .room-intro h1 em {
    font-size: 1.14em;
    line-height: 1.08;
    letter-spacing: -.03em;
  }

  .page-intro .intro-text,
  .case-intro .intro-text,
  .bath-intro-copy > p.intro-text,
  #room-studio .room-intro-copy > p {
    font-size: var(--wg-type-intro);
    font-weight: 400;
    line-height: var(--wg-leading-copy);
  }

  /* Abschnittsüberschriften mit derselben inhaltlichen Funktion. */
  .section-heading h2,
  .service-detail h2,
  .planning h2,
  .bath-approach h2,
  .bath-transformations .section-heading h2,
  .journey-heading h2,
  .surface-details-heading h2 {
    font-size: var(--wg-type-section);
    font-weight: 500;
    line-height: var(--wg-leading-heading);
    letter-spacing: -.05em;
  }
  .section-heading h2 em,
  .service-detail h2 em,
  .planning h2 em,
  .bath-approach h2 em,
  .journey-heading h2 em,
  .surface-details-heading h2 em {
    font-size: 1.14em;
    line-height: 1.08;
  }

  /* Kleinere Köpfe für Karten, Formular und Projekttexte. */
  .person-card h2,
  .contact-direct h2,
  .request-panel h2,
  .contact-form-panel h2,
  .case-story > div > h2,
  #room-studio .room-outro h2 {
    font-size: var(--wg-type-content);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.04em;
  }

  .service-detail > div > p:not(.eyebrow),
  .planning p:not(.eyebrow),
  .bath-intro-copy > p:not(.eyebrow, .intro-text),
  .bath-approach p:not(.eyebrow),
  .bath-project-copy > p:not(.eyebrow),
  .bath-comparison-grid > article > p:not(.eyebrow),
  .journey-copy > p:not(.eyebrow),
  .case-story > div > p:not(.eyebrow, .case-step),
  .company-copy > p:not(.lead),
  .timeline p,
  .contact-form-panel > p:not(.eyebrow),
  #room-studio .room-outro p,
  .legal-copy p,
  .legal-copy li,
  .legal-copy address,
  .legal-copy dd,
  .legal-copy dt {
    font-size: var(--wg-type-body);
    line-height: var(--wg-leading-copy);
  }

  main .eyebrow,
  .journey-copy .eyebrow,
  .request-panel > .eyebrow,
  .contact-related > .eyebrow,
  #room-studio .room-intro .eyebrow {
    font-size: var(--wg-type-label);
    font-weight: 550;
    line-height: 1.6;
    letter-spacing: .13em;
  }

  .page-intro > div > .eyebrow,
  .page-intro > .eyebrow,
  .bath-intro-copy > .eyebrow,
  .case-intro > .eyebrow,
  #room-studio .room-intro .eyebrow {
    margin-bottom: 20px;
  }

  .button,
  .form-actions .button {
    font-size: .875rem;
    line-height: 1.5;
    font-weight: 650;
  }

  @media (max-width: 720px) {
    :root { --wg-type-intro: 1.0625rem; }
  }
}