/* ==========================================================================
   Zwei Farben, sonst nichts.
   Weiss ist echtes #ffffff, Schwarz ist das kalte S/C-Labs-Schwarz #151616.
   Schrift auf Weiss ist genau dieses Schwarz, Schrift auf Schwarz genau
   dieses Weiss. Der rote Badge bleibt in allen Fassungen rot.

   flat.css biegt alle Flächen und Schriftfarben der Seite auf --surface und
   --ink um; hier werden die Werte gesetzt.
   ========================================================================== */

html.t-flat{
  --white:#ffffff;
  --black:#0f1010;
  --white-rgb:255,255,255;
  --black-rgb:15,16,16;

  --surface:var(--white);
  --ink:var(--black);
  --ink-rgb:var(--black-rgb);

  /* Abgestufte Schwarztoene aus der S/C-Labs-Seite. Sie setzen Sektionen
     voneinander ab, ohne dass eine weisse Flaeche den Takt zerschlaegt. */
  /* Neutral, nicht warm: #1b1b19 und #232320 haben R=G>B und stechen
     dadurch ins Braeunliche. Diese hier sind auf allen Kanaelen gleich. */
  /* Die Stufen folgen dem Farbstich der Basis (R etwas unter G und B).
     Neutrale Graustufen wirken daneben braeunlich. */
  --raise-1:#151616;
  --raise-2:#1c1e1e;

  /* das Hero-Feld läuft mit */
  --hero-field:var(--surface);
  --hero-ink:var(--ink);
  --hero-dim:rgba(var(--ink-rgb),.62);
  --hero-dim2:rgba(var(--ink-rgb),.7);
}

html.t-flat, html.t-flat body{background:var(--surface) !important;color:var(--ink) !important}

/* --- Fassung 1: alles weiss ------------------------------------------- */
html.t-white{
  --surface:var(--white); --ink:var(--black); --ink-rgb:var(--black-rgb);
  /* die Tonstufen drehen mit: im Hellen zwei Grauwerte statt zwei Schwarzwerte */
  --raise-1:#f2f2f0;
  --raise-2:#e9e9e6;
}

/* --- Fassung 2: alles schwarz ----------------------------------------- */
html.t-black{ --surface:var(--black); --ink:var(--white); --ink-rgb:var(--white-rgb); }

/* --- Header ------------------------------------------------------------
   Die Seite blendet ihn per Differenz — das ergibt auf reinem Weiss und auf
   Schwarz falsche Werte. Hier fest an die Fassung gebunden. */
html.t-flat header.top{
  background:transparent !important;border-color:transparent !important;
  mix-blend-mode:normal !important;
}
html.t-white header.top,
html.t-white header.top .logo{color:var(--black) !important}
html.t-white header.top .navc a{color:rgba(var(--black-rgb),.62) !important}
html.t-black header.top{color:var(--white) !important}
html.t-black header.top .logo{color:var(--white) !important}
html.t-black header.top .navc a{color:rgba(var(--white-rgb),.7) !important}

/* --- Kundenlogos: immer die Gegenfarbe der Fläche, auf der sie liegen --- */
html.t-white .logo-set img{filter:grayscale(1) brightness(0) !important;opacity:.55 !important}
html.t-black .logo-set img{filter:grayscale(1) brightness(0) invert(1) !important;opacity:.55 !important}

/* --- Kein Verlaufstext mehr -------------------------------------------
   Die Seite wischte diese Absaetze beim Scrollen von hell nach dunkel
   (Verlauf auf background-clip:text). Das las sich wie ein Fehler, nicht
   wie ein Effekt — jetzt stehen sie ruhig wie jeder andere Fliesstext. */
html.t-flat .contactblk .reveal-text,
html.t-flat .studioblk .reveal-text,
html.t-flat .reveal-text{
  background-image:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important;
  color:rgba(var(--ink-rgb),.72) !important;
}

/* --- Work-Liste -------------------------------------------------------- */
html.t-flat .wlist{border-top-color:rgba(var(--ink-rgb),.16) !important}
html.t-flat .wrow{border-bottom-color:rgba(var(--ink-rgb),.16) !important}
html.t-flat .wrow__n,
html.t-flat .wrow__tags{color:rgba(var(--ink-rgb),.55) !important}

/* --- Einstieg: nicht mehr rot, sondern die Farbe der Fassung ------------ */
html.t-flat.mo-intro::before{background:var(--surface) !important}
html.t-flat .mo-boot__red{background:var(--surface) !important}

/* --- Header über Farbfeld und über dem Film ----------------------------
   .mo-on-red setzt motion.js, solange das Farbfeld oben steht. Darüber gilt
   die Farbe der Fassung, über dem Film immer hell. */
html.t-flat header.top:not(.mo-on-red),
html.t-flat header.top:not(.mo-on-red) .logo{color:var(--white) !important}
html.t-flat header.top:not(.mo-on-red) .navc a{color:rgba(var(--white-rgb),.72) !important}

/* --- Studio und Contact auf eine Linie und eine Grösse ------------------ */
/* Überschrift des Contact-Blocks stand vier Spalten eingerückt */
section.contactblk .contact-grid .cbig{grid-column:1/9 !important}
/* "New business, worldwide." raus */
section.contactblk .contact-side-label{display:none !important}

/* Die beiden kleinen Absätze im Studio-Block in dieselbe rechte Spalte wie
   der Contact-Text (Spalte 7-12) und enger aneinander */
section.studioblk .ed-intro-copy{
  margin-left:51.2% !important;
  width:40.3% !important;
  max-width:none !important;
}
section.studioblk .ed-intro-copy .ed-body + .ed-body{margin-top:.7em !important}

/* Die zwei Absätze standen nebeneinander (zwei Spalten) — in der schmalen
   rechten Spalte gehören sie untereinander und dicht beisammen */
section.studioblk .ed-intro-copy{
  display:block !important;
}
section.studioblk .ed-intro-copy .ed-body{max-width:none !important}

/* ==========================================================================
   Die Seiten färben vieles über ihre eigenen Variablen (var(--fg), var(--bg),
   var(--ed-ink) …). Feste Farbwerte erwischt flat.css, Variablen nicht —
   deshalb werden sie hier auf dieselben zwei Farben gezogen. Das war die
   Ursache für die unlesbaren Stellen im Footer der weissen Work-Seite.
   ========================================================================== */
html.t-flat{
  --bg:var(--surface);
  --fg:var(--ink);
  --muted:rgba(var(--ink-rgb),.6);
  --soft:rgba(var(--ink-rgb),.72);
  --line:rgba(var(--ink-rgb),.16);
  --ed-bg:var(--surface);
  --ed-white:var(--ink);
  --ed-paper:var(--surface);
  --ed-off:var(--surface);
  --ed-soft:var(--surface);
  --ed-ink:var(--ink);
  --ed-t72:rgba(var(--ink-rgb),.72);
  --ed-t60:rgba(var(--ink-rgb),.6);
  --ed-t52:rgba(var(--ink-rgb),.52);
  --ed-line:rgba(var(--ink-rgb),.16);
  --bn-bg:var(--surface);
  --bn-fg:var(--ink);
  --bn-muted:rgba(var(--ink-rgb),.6);
  --bn-soft:rgba(var(--ink-rgb),.72);
  --bn-line:rgba(var(--ink-rgb),.16);
}
/* Sektionen mit eigener Fassung (gemischt) erben die Variablen mit */
html.t-flat section, html.t-flat footer{
  --bg:var(--surface); --fg:var(--ink);
  --ed-paper:var(--surface); --ed-off:var(--surface); --ed-soft:var(--surface);
  --ed-white:var(--ink);
  --muted:rgba(var(--ink-rgb),.6);
  --soft:rgba(var(--ink-rgb),.72);
  --line:rgba(var(--ink-rgb),.16);
  --ed-ink:var(--ink);
  --ed-t72:rgba(var(--ink-rgb),.72);
  --ed-t60:rgba(var(--ink-rgb),.6);
  --ed-t52:rgba(var(--ink-rgb),.52);
}

/* Mehr Text steht in zwei Spalten auf der rechten Seite (Spalte 5–12),
   der Link darunter, auf derselben Kante */
section.studioblk .ed-intro-copy{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:clamp(20px,2.2vw,32px) !important;
  margin-left:34.1% !important;
  width:65.9% !important;
}
section.studioblk .ed-intro-copy .ed-body + .ed-body{margin-top:0 !important}
section.studioblk .ed-intro-copy ~ p{margin-left:34.1% !important}