/* ==========================================================================
   Eine Größe für alle Überschriften, eine für alle Fließtexte — über die
   ganze Site. Maßgeblich ist der Hero der Startseite: "We make companies"
   für die Überschrift, der Text daneben für den Fließtext.

   Ausgenommen sind bewusst:
   - das große Wortzeichen im Footer (.fmark) — das ist Grafik, keine Überschrift
   - Mono-Labels, Zähler, Navigation — die haben ihre eigene, kleinere Stufe
   ========================================================================== */

html.t-flat{
  --t-head:clamp(30px,3.4vw,58px);
  --t-head-lh:1.12;
  --t-head-ls:-.025em;
  --t-body:clamp(15px,1.05vw,17px);
  --t-body-lh:1.55;
}

/* --- Überschriften ----------------------------------------------------- */
html.t-flat .vhero .ed-costmt .stmt,
html.t-flat .oblock .stmt,
html.t-flat .seitenkopf .stmt,
html.t-flat .strip-stmt,
html.t-flat .split .stmt,
html.t-flat section.home-work .hw-title,
html.t-flat section.home-caps .caps-lead,
html.t-flat section.studioblk .studio-main,
html.t-flat section.contactblk .contact-grid .cbig,
html.t-flat .work-hero h1,
html.t-flat .intro h1,
html.t-flat .touch a,
html.t-flat .hero h1,
html.t-flat .feature-copy h2,
html.t-flat .post h3,
html.t-flat .qline .frame,
html.t-flat .ways .act,
html.t-flat .statement h2,
html.t-flat .case-hero h1,
html.t-flat .legal__t,
html.t-flat .manifesto .line,
html.t-flat .sec-title,
html.t-flat .wrow__name,
/* die Unterseiten laufen über das editorial-System */
html.t-flat .ed-display,
html.t-flat .ed-display-statement,
html.t-flat .ed-lhead,
html.t-flat .ed-cohero h1,
html.t-flat .ed-thero h1,
html.t-flat .ed-thero .big,
html.t-flat .sa-title,
html.t-flat .article-hero h1,
html.t-flat .next a,
html.t-flat .ed-statement,
html.t-flat .vt-stmt,
html.t-flat .lt-big,
html.t-flat .article .body h2,
html.t-flat .actions a,
html.t-flat section.closing h2,
html.t-flat .ed-acc-item > button > span,
html.t-flat .mcard h3,
html.t-flat .c-hero h1,
html.t-flat .cstatement{
  font-size:var(--t-head) !important;
  line-height:var(--t-head-lh) !important;
  letter-spacing:var(--t-head-ls) !important;
}

/* --- Fließtexte -------------------------------------------------------- */
html.t-flat .ed-body,
html.t-flat .vhero .ed-costmt .side .ed-body,
html.t-flat section.studioblk .ed-intro-copy .ed-body,
html.t-flat section.contactblk .contact-side p,
html.t-flat .intro .lead,
html.t-flat .lead,
html.t-flat .post p,
html.t-flat .feature-copy p,
html.t-flat .ways p,
html.t-flat .case-intro p,
html.t-flat .studio-side,
html.t-flat .contact-side p,
html.t-flat .dek,
html.t-flat .sa-intro,
html.t-flat .article .body p,
html.t-flat .ed-intro-copy p,
html.t-flat .ed-lead,
html.t-flat .faq h3,
html.t-flat .cstep__b h2,
html.t-flat .cstep__b p,
html.t-flat .cap__b,
html.t-flat .seitenkopf .side .ed-body,
html.t-flat .split .ed-body,
html.t-flat .hw-note,
html.t-flat .croute a,
html.t-flat .croute span:last-child,
html.t-flat .sa-lbl,
html.t-flat .sa-row span,
html.t-flat .vt-cell p,
html.t-flat .case-panel p,
html.t-flat .case-panel li,
html.t-flat .case-related-grid a strong,
html.t-flat .case-related-grid a span,
html.t-flat .work-meta h2,
html.t-flat .ed-wcard h3,
html.t-flat .ed-jcard h3,
html.t-flat .cact,
html.t-flat section.closing p,
html.t-flat section.closing div a{
  font-size:var(--t-body) !important;
  line-height:var(--t-body-lh) !important;
}

/* Auf schmalen Schirmen eine Stufe kleiner — sonst bricht die Überschrift
   in zu viele Zeilen */
@media(max-width:640px){
  html.t-flat{--t-head:clamp(24px,5.6vw,34px)}
}

/* Das Wortzeichen im Footer bleibt gross */
html.t-flat .fmark{font-size:clamp(96px,20vw,310px) !important;line-height:.86 !important}

/* Der Pfeil in "Selected work" fiel auf Arial zurueck */
html.t-flat .hw-arrow{font-family:"Suisse","Helvetica Neue",Arial,sans-serif !important}

/* ==========================================================================
   Ein Schnitt fuer alles.
   Geladen ist nur Suisse Book (400-500); "Suisse Medium" faellt im Stack
   darauf zurueck. Nackte h1-h6 standen dadurch auf 700 und wurden vom
   Browser kuenstlich gefettet — genau der Unterschied, der auf Contact
   dicker aussah als auf der Startseite.
   ========================================================================== */
html.t-flat h1, html.t-flat h2, html.t-flat h3,
html.t-flat h4, html.t-flat h5, html.t-flat h6,
html.t-flat strong, html.t-flat b,
/* die als <p> gesetzten Ueberschriften liefen auf "Suisse Medium" —
   ein echter, schwererer Schnitt. Dadurch war der Hero dicker als
   "Selected work". Alles laeuft jetzt auf Book. */
html.t-flat .stmt, html.t-flat .strip-stmt, html.t-flat .hero-claim, html.t-flat .studio-main,
html.t-flat .cbig, html.t-flat .hw-title, html.t-flat .sa-title,
html.t-flat .ed-display, html.t-flat .ed-statement, html.t-flat .vt-stmt,
html.t-flat .lt-big, html.t-flat .ed-lhead, html.t-flat .ed-display-statement,
html.t-flat .wrow__name, html.t-flat .legal__t, html.t-flat .work-hero h1{
  font-weight:400 !important;
  font-family:"Suisse","Helvetica Neue",Arial,sans-serif !important;
}
/* die Mono-Ebene behaelt ihren eigenen Schnitt */
html.t-flat .ed-mono, html.t-flat .mono, html.t-flat .croute__k,
html.t-flat .cstep__n, html.t-flat .c-tags, html.t-flat .sf-meta{
  font-family:"Suisse Mono",monospace !important;
}