/* ==========================================================================
   Footer, Wortzeichen und Trennlinien — gilt auf allen Seiten.
   Farbe steht in palette.css, Groessen in type.css, hier nur das Gerüst.
   ========================================================================== */

/* --- Ein Footer fuer alle Seiten ---------------------------------------
   Vorher liefen drei verschiedene Footer nebeneinander: index (.fmeta/.fmark),
   die Unterseiten (.sf-*) und work (.footer-grid). Jetzt gilt ueberall der
   Unterseiten-Footer, weil nur der das gezeichnete Wortzeichen traegt statt
   eines gesetzten "BRAND NW". Die Trennlinien bleiben — sie ordnen die Spalten. */
/* Nur die senkrechten Linien ordnen die Spalten. Alle waagerechten sind
   raus — sie schnitten den Footer in Balken statt ihn zu gliedern. */
html.t-flat footer.site-footer .sf-meta,
html.t-flat footer.site-footer .sf-news,
html.t-flat footer.site-footer .sf-base{
  border-top:0 !important;border-bottom:0 !important;
}
html.t-flat footer.site-footer .sf-col + .sf-col{
  border-left:1px solid rgba(var(--ink-rgb),.16) !important;
}
/* Der Footer dockt direkt unter dem Bild an */
html.t-flat footer.site-footer{padding-top:clamp(34px,4vw,58px) !important}

/* Das gezeichnete Wortzeichen laeuft ueber die Breite, in der einen Farbe */
html.t-flat footer.site-footer .sf-mark svg{width:100%;height:auto;display:block}
html.t-flat footer.site-footer .sf-mark svg path{fill:var(--ink)}

/* ==========================================================================
   Unterseiten auf EINE Aussenlinie.
   Die Bloecke liefen ueber die volle Fensterbreite und standen dadurch
   gequetscht am Rand. Massgeblich ist die Linie der Startseite:
   90vw, max 1500, 25px Innenabstand — bei 1440px also x=97.
   ========================================================================== */
html.t-flat .ed-sec > .ed-in,
html.t-flat .ed-sec > .ed-in.is-compact{
  width:min(90vw,1500px) !important;max-width:none !important;
  margin-inline:auto !important;padding-inline:25px !important;
  box-sizing:border-box !important;
}

/* ==========================================================================
   Studio — im Rhythmus der Startseite.
   Bild oben, dann die Aussage auf der Aussenlinie und der kleine Text
   nach rechts eingerueckt. Nichts laeuft mehr ueber die volle Breite.
   ========================================================================== */

/* Einstieg: Aussage links, kleiner Text rechts — wie im Hero der Startseite */
/* Genau wie der Studio-Block der Startseite: die Aussage laeuft breit auf der
   Aussenlinie, der kleine Text rueckt darunter nach rechts ein — bei 1440px
   beginnt er auf x=522, in zwei Spalten. */
html.t-flat .ed-cohero .ed-costmt{display:block !important;margin-top:clamp(24px,3vw,44px) !important}
html.t-flat .ed-cohero .ed-costmt .stmt{max-width:82.5% !important;width:100% !important}
html.t-flat .ed-cohero .ed-costmt .side{
  margin-left:34.1% !important;width:65.9% !important;max-width:none !important;
  display:grid !important;grid-template-columns:1fr 1fr !important;
  gap:clamp(20px,2.2vw,32px) !important;
  margin-top:clamp(28px,3.4vw,52px) !important;
}
html.t-flat .ed-cohero .studio-since{color:rgba(var(--ink-rgb),.55) !important}

/* "A brand is not how it looks" rueckt nach rechts, die Belege darunter */
html.t-flat .ed-vt{
  display:grid !important;
  grid-template-columns:34.1% repeat(3,1fr) !important;
  column-gap:clamp(20px,2.2vw,32px) !important;
  row-gap:clamp(34px,4.4vw,64px) !important;
}
html.t-flat .ed-vt .vt-stmt{grid-column:2/-1;grid-row:1;margin:0}
html.t-flat .ed-vt .vt-cell{grid-row:2;padding:0;margin:0}
/* die Belege stehen unter der Aussage, nicht daneben */
html.t-flat .ed-vt .vt-cell:nth-of-type(1){grid-column:2}
html.t-flat .ed-vt .vt-cell:nth-of-type(2){grid-column:3}
html.t-flat .ed-vt .vt-cell:nth-of-type(3){grid-column:4}
html.t-flat .ed-vt .vt-cell .k{
  font-family:"Suisse Mono",monospace;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(var(--ink-rgb),.55);margin-bottom:.9em;
}

/* Der Approach-Block liest sich wie das Statement der Startseite */
html.t-flat .studio-say .ed-costmt{display:block !important}
html.t-flat .studio-say .ed-costmt .stmt{max-width:82.5% !important;width:100% !important}
html.t-flat .studio-say .ed-costmt .side{
  margin-left:34.1% !important;width:65.9% !important;max-width:none !important;
  display:grid !important;grid-template-columns:1fr 1fr !important;
  gap:clamp(20px,2.2vw,32px) !important;
  margin-top:clamp(28px,3.4vw,52px) !important;
}

/* Kein Rot — der Akzent gehoert dem roten Punkt */
html.t-flat .studio-facts span:first-child,
html.t-flat .ed-rows .n{color:rgba(var(--ink-rgb),.55) !important}

/* Eckdaten im Informationsblock */
html.t-flat .studio-facts{display:grid;gap:.55em;margin-top:1.6em}
html.t-flat .studio-facts .fact{display:grid;grid-template-columns:9em 1fr;gap:1.2em}
html.t-flat .studio-facts .fact span:last-child{color:var(--ink)}

/* Keine Trennlinien auf den Unterseiten */
html.t-flat .ed-sec,
html.t-flat .ed-in,
html.t-flat .ed-head,
html.t-flat .ed-rows,
html.t-flat .ed-row,
html.t-flat .ed-intro-grid,
html.t-flat .ed-acc-item,
html.t-flat .article .rule,
html.t-flat .article-hero{border-color:transparent !important}

@media(max-width:900px){
  html.t-flat .ed-cohero .ed-costmt .side,
  html.t-flat .studio-say .ed-costmt .side{
    margin-left:0 !important;width:100% !important;grid-template-columns:1fr !important;
  }
  html.t-flat .ed-vt{grid-template-columns:1fr !important}
  html.t-flat .ed-vt .vt-stmt,
  html.t-flat .ed-vt .vt-cell{grid-column:1;grid-row:auto}
}

/* --- Der zweite Footer der Unterseiten (.sf-*) ------------------------- */
html.t-flat footer .sf-meta,
html.t-flat footer .sf-col,
html.t-flat footer .sf-news,
html.t-flat footer .sf-base{border-color:transparent !important;border-width:0 !important}
html.t-flat footer .sf-meta{padding-top:clamp(48px,5vw,86px) !important}

/* --- Restliche Trennlinien der Unterseiten ----------------------------- */
html.t-flat .ed-cohero .meta,
html.t-flat .ed-vt .vt-cell,
html.t-flat .mnum-cards .mcard,
html.t-flat .ed-metarow,
html.t-flat .ed-accordion,
html.t-flat .case-accordion,
html.t-flat .case-info .case-site-link,
html.t-flat .article .faq,
html.t-flat .article .faq > div{border-color:transparent !important}

/* Links behalten ihren Hinweis, zeigen ihn beim Hover */
html.t-flat .ed-textlink,
html.t-flat .article .next a,
html.t-flat .contact-side .cact,
html.t-flat .actions a{border-bottom-color:transparent !important}
html.t-flat .ed-textlink:hover,
html.t-flat .article .next a:hover,
html.t-flat .contact-side .cact:hover,
html.t-flat .actions a:hover{border-bottom-color:currentColor !important}

/* Kein Rot in der Schrift — der Akzent gehoert dem Punkt */
html.t-flat .mcard .num,
html.t-flat .mnum-cards .num,
html.t-flat .ed-rows .n,
html.t-flat .filters a[aria-current],
html.t-flat .ed-mono{color:rgba(var(--ink-rgb),.55) !important}
html.t-flat .mcard .mc-n,
html.t-flat .ed-metarow .m.on,
html.t-flat .lt-label{color:rgba(var(--ink-rgb),.55) !important}
/* der aktive Filter steht heller, nicht rot */
html.t-flat .ed-metarow .m.on{color:var(--ink) !important}

/* ==========================================================================
   Contact — im Aufbau der Projektseiten.
   Zwoelf Spalten wie dort: die Kontaktwege kleben links in Spalte 1-4,
   der Ablauf laeuft rechts ab Spalte 4 daran vorbei. Kein Formular —
   die Wege stehen als Liste, das ist ehrlicher und altert besser.
   ========================================================================== */
html.t-flat .cgrid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:30px;
  padding-inline:25px;
  width:min(90vw,1500px);margin-inline:auto;box-sizing:border-box;
}
html.t-flat .c-hero{padding-block:clamp(150px,20vw,290px) 16px}
html.t-flat .c-hero h1{grid-column:4/13;text-wrap:pretty}
html.t-flat .c-hero h1 > span:first-child{color:rgba(var(--ink-rgb),.42)}
html.t-flat .c-tags{
  grid-column:4/13;display:flex;flex-wrap:wrap;gap:6px;margin-top:22px;
  list-style:none;padding:8px 0 0;
  font-family:"Suisse Mono",monospace;font-size:12px;letter-spacing:.04em;
  color:rgba(var(--ink-rgb),.55);text-transform:uppercase;
}

html.t-flat .c-layout{align-items:start;padding-block:clamp(56px,7vw,110px)}
html.t-flat .c-routes{
  grid-column:1/4;grid-row:1;position:sticky;top:84px;
  display:grid;gap:clamp(22px,2.4vw,34px);
}
html.t-flat .croute{display:grid;gap:.35em}
html.t-flat .croute__k{
  font-family:"Suisse Mono",monospace;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(var(--ink-rgb),.55);
}
html.t-flat .croute a{
  display:block;color:var(--ink);text-decoration:none;
  border-bottom:1px solid transparent;width:fit-content;
}
html.t-flat .croute a:hover{border-bottom-color:currentColor}

html.t-flat .c-story{grid-column:4/13;grid-row:1;display:grid;gap:clamp(46px,5.5vw,90px)}
html.t-flat .cstep{display:grid;grid-template-columns:4em 1fr;gap:clamp(16px,2vw,34px);align-items:start}
html.t-flat .cstep__n{
  font-family:"Suisse Mono",monospace;font-size:12px;letter-spacing:.04em;
  color:rgba(var(--ink-rgb),.55);padding-top:.55em;
}
html.t-flat .cstep__b{display:grid;gap:.7em;max-width:34ch}
html.t-flat .cstatement{max-width:26ch;color:rgba(var(--ink-rgb),.55)}

@media(max-width:900px){
  html.t-flat .c-hero h1,
  html.t-flat .c-tags,
  html.t-flat .c-routes,
  html.t-flat .c-story{grid-column:1/-1}
  html.t-flat .c-routes{position:static;margin-bottom:clamp(40px,6vw,70px)}
  html.t-flat .cstep{grid-template-columns:1fr}
}

/* Der "Next note"-Link am Ende der Journal-Artikel: Hinweis erst beim Hover */
html.t-flat .next a,
html.t-flat section.next .frame > a{border-bottom-color:transparent !important}
html.t-flat .next a:hover,
html.t-flat section.next .frame > a:hover{border-bottom-color:currentColor !important}
/* Der Trennstrich ueber dem "Next note"-Link — der Abstand reicht */
html.t-flat section.next .frame > a{border-top-color:transparent !important;padding-top:clamp(40px,5vw,80px) !important}

/* ==========================================================================
   Der Abschluss steht auf allen Seiten gleich — im Rhythmus des Footers:
   die Frage links auf der Aussenlinie, Antwort und Weg rechts, darunter viel
   Luft, damit der Footer nicht daran klebt.
   ========================================================================== */
html.t-flat section.closing{
  width:min(90vw,1500px) !important;margin-inline:auto !important;
  padding-inline:25px !important;box-sizing:border-box !important;
  display:block !important;
  padding-top:clamp(90px,11vw,190px) !important;
  padding-bottom:clamp(120px,14vw,230px) !important;
  border:0 !important;
}
/* wie der Contact-Block der Startseite: Frage breit auf der Aussenlinie,
   Antwort darunter nach rechts eingerueckt (x=735 bei 1440px) */
html.t-flat section.closing h2{margin:0;width:66% !important}
html.t-flat section.closing > div{
  margin-left:51.2% !important;width:40.3% !important;
  display:grid;gap:1.5em;margin-top:clamp(26px,3vw,46px) !important;
}
html.t-flat section.closing > div a{
  justify-self:start;border-bottom:1px solid transparent;text-decoration:none;
}
html.t-flat section.closing > div a:hover{border-bottom-color:currentColor}
@media(max-width:900px){
  html.t-flat section.closing h2{width:100% !important}
  html.t-flat section.closing > div{margin-left:0 !important;width:100% !important}
}

/* ==========================================================================
   Der rote Punkt — auf der Startseite oeffnet er das Say-Hi-Overlay,
   auf den Unterseiten fuehrt er nach Contact. Gleiche Erscheinung.
   (Diese Regeln waren beim Umbau der Datei verloren gegangen; ohne sie lag
   der Button roh im Textfluss.)
   ========================================================================== */
html.t-flat .badge--link{
  position:fixed !important;left:50% !important;bottom:44px !important;
  transform:translateX(-50%) !important;
  width:clamp(104px,8.5vw,132px) !important;height:clamp(104px,8.5vw,132px) !important;
  display:block !important;z-index:60 !important;text-decoration:none !important;
  padding:0 !important;margin:0 !important;
}
html.t-flat .badge--link .disc{position:absolute;inset:0;border-radius:50%;background:#ff3b1d}
html.t-flat .badge--link .ring{position:absolute;inset:0;animation:mo-badge-spin 18s linear infinite}
html.t-flat .badge--link .ring svg{width:100%;height:100%;display:block}
html.t-flat .badge--link .ctr{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:28px;line-height:1;
}
@keyframes mo-badge-spin{to{transform:rotate(360deg)}}
@media(max-width:640px){
  html.t-flat .badge--link{bottom:24px !important;width:100px !important;height:100px !important}
}
@media(prefers-reduced-motion:reduce){
  html.t-flat .badge--link .ring{animation:none}
}

/* ==========================================================================
   Contact-Formular — ohne Kaesten.
   Formulare sehen fast immer nach Amt aus, weil sie Rahmen tragen. Hier nur
   eine Linie unter jedem Feld, dieselbe Mono-Ebene fuer die Beschriftung.
   Es gibt keinen Server: der Knopf oeffnet eine vorbereitete Mail.
   ========================================================================== */
html.t-flat .cform{display:grid;gap:clamp(26px,3vw,42px);max-width:34rem}
html.t-flat .cfield{display:grid;gap:.6em}
html.t-flat .cfield label{
  font-family:"Suisse Mono",monospace;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(var(--ink-rgb),.55);
}
html.t-flat .cfield input,
html.t-flat .cfield textarea{
  background:transparent;color:var(--ink);
  border:0;border-bottom:1px solid rgba(var(--ink-rgb),.28);
  border-radius:0;padding:0 0 .55em;
  font-family:"Suisse","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(15px,1.05vw,17px);line-height:1.55;
  width:100%;resize:vertical;
  transition:border-color .25s ease;
}
html.t-flat .cfield input:focus,
html.t-flat .cfield textarea:focus{outline:none;border-bottom-color:var(--ink)}
html.t-flat .cform__send{
  justify-self:start;background:transparent;border:0;padding:0;cursor:pointer;
  color:var(--ink);font-family:"Suisse","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(15px,1.05vw,17px);
  border-bottom:1px solid transparent;
}
html.t-flat .cform__send:hover{border-bottom-color:currentColor}
html.t-flat .cform__note{
  font-family:"Suisse Mono",monospace;font-size:12px;letter-spacing:.04em;
  color:rgba(var(--ink-rgb),.55);margin:0;
}

/* Die drei Schritte ruecken unter das Formular und werden ruhiger */
html.t-flat .csteps{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.4vw,36px);
  margin-top:clamp(56px,6vw,96px);
}
html.t-flat .csteps .cstep{display:block}
html.t-flat .csteps .cstep__n{display:block;padding-top:0;margin-bottom:.9em}
html.t-flat .csteps .cstep__b{max-width:none}
@media(max-width:900px){
  html.t-flat .csteps{grid-template-columns:1fr}
}

/* --- Der Header muss immer anklickbar sein ------------------------------
   work.html setzt pointer-events:none auf den Header und nimmt nur .brand
   und .nav aus. Beim Tausch des gesetzten Logos gegen das gezeichnete hiess
   das Element ploetzlich .logo — und war damit tot. */
html.t-flat header.top .logo,
html.t-flat header.top .brand,
html.t-flat header.top nav,
html.t-flat header.top .navc,
html.t-flat header.top a{pointer-events:auto !important}

/* --- Das Logo im Header --------------------------------------------------
   Auf work.html gab es keine Regel dafuer: das SVG stand auf 0x0 und schwarz
   gefuellt — unsichtbar und nicht anklickbar, es fuehrte also kein Weg
   zurueck. Die Masse gehoeren deshalb hierher, nicht in die Seiten. */
html.t-flat header.top .logo{display:block;line-height:0}
html.t-flat header.top .logo svg{
  height:20px !important;width:auto !important;display:block;
  fill:currentColor !important;
}
html.t-flat header.top .logo svg path{fill:currentColor !important}
@media(max-width:640px){
  html.t-flat header.top .logo svg{height:18px !important}
}

/* --- Der rote Punkt in die Ecke -----------------------------------------
   Er stand unten mittig. Seit der Leitsatz im Vollbild unten steht, lag er
   mitten in der Schrift. Unten bleibt er, aber rechts aussen. */
html.t-flat .badge,
html.t-flat .badge--link{
  left:auto !important;right:clamp(24px,3vw,48px) !important;
  bottom:clamp(24px,3vw,44px) !important;
  transform:none !important;
}
html.t-flat .badge.badge--hidden{
  transform:translateY(16px) scale(.92) !important;
}

/* ==========================================================================
   Feststehende Bildbaender.
   Das Bild haengt fest im Fenster, der Ausschnitt wandert daran vorbei —
   derselbe Eindruck wie beim Hero-Film, aber ohne Video.
   Der Trick ist clip-path am Rahmen: dadurch wird position:fixed am Bild
   auf den Rahmen beschnitten statt auf das ganze Fenster.
   ========================================================================== */
html.t-flat .fixband{
  position:relative;
  height:clamp(272px,50vh,528px);
  overflow:hidden;
  clip-path:inset(0);
  background:var(--surface);
}
html.t-flat .fixband__img{
  position:fixed;top:0;left:0;
  width:100vw;height:100vh;
  object-fit:cover;
  z-index:0;
  filter:saturate(.92);
}
html.t-flat .fixband::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(0,0,0,.22);
}
html.t-flat .fixband__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  width:min(90vw,1500px);margin-inline:auto;padding:0 25px clamp(20px,2.4vw,34px);
  box-sizing:border-box;
  display:flex;justify-content:space-between;gap:20px;
  font-family:"Suisse Mono",monospace;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
}
/* Auf Touch-Geraeten ist position:fixed im Scrollcontainer unzuverlaessig —
   dort steht das Bild einfach formatfuellend. */
@media(max-width:860px),(hover:none){
  html.t-flat .fixband{clip-path:none}
  html.t-flat .fixband__img{position:absolute;width:100%;height:100%}
}
@media(prefers-reduced-motion:reduce){
  html.t-flat .fixband{clip-path:none}
  html.t-flat .fixband__img{position:absolute;width:100%;height:100%}
}

/* ==========================================================================
   Practice — nach dem Vorbild von S/C Labs.
   Vier Spalten, durch Haarlinien getrennt. Titel oben, Text darunter,
   die grosse Ziffer sitzt unten auf einer Kante. Die Ziffern sind kein
   Text, sondern Taktschlag — deshalb stark abgedunkelt.
   ========================================================================== */
html.t-flat section.home-caps{padding-block:clamp(70px,8vw,130px)}
html.t-flat .caps-lead{max-width:20ch;margin:clamp(18px,2vw,28px) 0 clamp(56px,6.4vw,110px)}

html.t-flat .caps-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
}
html.t-flat .cap{
  display:flex;flex-direction:column;
  padding:0 clamp(20px,2.6vw,46px);
  min-height:clamp(280px,30vw,400px);
}
html.t-flat .cap:first-child{padding-left:0}
html.t-flat .cap + .cap{border-left:1px solid rgba(var(--ink-rgb),.16)}

/* Der Titel steht zwischen Ueberschrift und Fliesstext — die einzige
   dritte Stufe auf der Seite, sie kommt aus dem Vorbild. */
html.t-flat .cap__t{
  font-family:"Suisse","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(18px,1.5vw,22px);line-height:1.2;letter-spacing:-.015em;
  color:var(--ink);margin-bottom:1.5em;
}
html.t-flat .cap__b{
  margin:0;color:rgba(var(--ink-rgb),.62);max-width:30ch;
}
html.t-flat .cap__n{
  margin-top:auto;
  font-family:"Suisse","Helvetica Neue",Arial,sans-serif;
  font-size:var(--t-head);line-height:1;letter-spacing:-.03em;
  color:rgba(var(--ink-rgb),.34);
}

@media(max-width:900px){
  html.t-flat .caps-grid{grid-template-columns:1fr 1fr}
  html.t-flat .cap:nth-child(3){padding-left:0;border-left:0}
  html.t-flat .cap{min-height:clamp(230px,40vw,300px);margin-bottom:clamp(30px,5vw,50px)}
}
@media(max-width:560px){
  html.t-flat .caps-grid{grid-template-columns:1fr}
  html.t-flat .cap{padding-left:0;border-left:0}
}

/* --- Abstaende am Seitenende -------------------------------------------
   Zwischen Contact und dem letzten Bild und zwischen Bild und Footer stand
   zu viel Luft. Das Bild schliesst den Inhalt ab, der Footer setzt direkt an. */
html.t-flat section.contactblk{padding-bottom:clamp(40px,4.5vw,70px) !important}
html.t-flat .fixband + footer.site-footer{margin-top:0 !important}
html.t-flat section.contactblk + .fixband{margin-top:0 !important}

/* --- Practice etwas flacher -------------------------------------------- */
html.t-flat section.home-caps{padding-block:clamp(56px,6vw,96px) !important}
html.t-flat .cap{min-height:clamp(230px,24vw,320px) !important}
html.t-flat .caps-lead{margin-bottom:clamp(44px,5vw,84px) !important}

/* --- Studio-Block der Startseite: schmaler, weiter rechts, hoeher -------
   Ueberschrift und Fliesstext liefen beide zu breit. Jetzt steht die
   Aussage in einer schmaleren Spalte, der Text rueckt weiter nach rechts
   und laeuft dadurch in die Hoehe statt in die Breite. */
html.t-flat section.studioblk .studio-main{
  max-width:58% !important;
}
html.t-flat section.studioblk .ed-intro-copy{
  margin-left:58% !important;
  width:42% !important;
  grid-template-columns:1fr !important;
  gap:1.4em !important;
  margin-top:0 !important;
}
html.t-flat section.studioblk .ed-intro-copy ~ p{margin-left:58% !important}
@media(max-width:900px){
  html.t-flat section.studioblk .studio-main{max-width:none !important}
  html.t-flat section.studioblk .ed-intro-copy,
  html.t-flat section.studioblk .ed-intro-copy ~ p{
    margin-left:0 !important;width:100% !important;margin-top:1.6em !important;
  }
}

/* ==========================================================================
   Selected work als Laufschrift.
   Sie laeuft nicht von allein, sondern am Scroll — nach rechts, waehrend der
   Wagen darunter nach links wandert. Man muss weiterscrollen, um an die
   hinteren Projekte zu kommen.
   ========================================================================== */
html.t-flat .hw-marq{
  width:100vw;margin-left:calc(50% - 50vw);
  overflow:hidden;white-space:nowrap;
  padding-block:clamp(4px,.6vw,10px);
}
html.t-flat .hw-marq__track{
  display:inline-flex;align-items:baseline;
  will-change:transform;
}
html.t-flat .hw-marq__i{
  flex:0 0 auto;padding-right:.34em;
  font-family:"Suisse","Helvetica Neue",Arial,sans-serif;font-weight:400;
  font-size:clamp(52px,7.4vw,132px);line-height:1.04;letter-spacing:-.04em;
  color:var(--ink);
}
html.t-flat .hw-marq__a{
  font-style:normal;color:rgba(var(--ink-rgb),.34);padding-left:.12em;
}
html.t-flat .hw-note{
  margin:clamp(18px,2vw,30px) 0 0;
  max-width:34ch;color:rgba(var(--ink-rgb),.62);
}
/* Der Wagen wird jetzt gefuehrt, nicht mehr gewischt */
html.t-flat .hwork-rail{scroll-behavior:auto !important}
@media(prefers-reduced-motion:reduce){
  html.t-flat .hw-marq__track{transform:none !important}
  html.t-flat .hw-marq{overflow-x:auto}
}

/* ==========================================================================
   Ein Takt fuer alle Sektionen.
   Oben und unten derselbe Abstand, damit die Typo mittig im Block sitzt.
   Vorher liefen 150/100, 259/200 und 270/65 nebeneinander.
   ========================================================================== */
html.t-flat section.project-strip,
html.t-flat section.studioblk,
html.t-flat section.home-work,
html.t-flat section.home-caps,
html.t-flat section.contactblk{
  padding-top:clamp(90px,10vw,170px) !important;
  padding-bottom:clamp(90px,10vw,170px) !important;
}
/* Die Bildbaender sind Flaeche, kein Textblock */
html.t-flat .fixband{padding:0 !important}

/* --- Footer: Wortzeichen tiefer, Schlusszeile abgesetzt ------------------ */
html.t-flat footer.site-footer .sf-mark{
  margin-top:clamp(74px,7.6vw,130px) !important;
  margin-bottom:clamp(52px,5.4vw,88px) !important;
}
html.t-flat footer.site-footer .sf-base{
  padding-top:clamp(20px,2.2vw,34px) !important;
}

/* ==========================================================================
   Hero-Feld weiss, Schrift schwarz (Probe).
   Das Feld ist die einzige helle Flaeche der Seite. Header, Einstieg und
   Wortzeichen muessen darauf mitdrehen, sonst stehen sie weiss auf weiss.
   Zum Zurueckdrehen: diesen Block loeschen.
   ========================================================================== */
html.t-flat .vhero .vhero-copy{
  background:var(--white) !important;
  color:var(--black) !important;
}
html.t-flat .vhero .ed-costmt .stmt{color:var(--black) !important}
html.t-flat .vhero .ed-costmt .side .ed-body{color:rgba(var(--black-rgb),.66) !important}
html.t-flat .vhero .ed-costmt .side .ed-textlink,
html.t-flat .vhero .ed-costmt .side .ed-textlink:hover{color:var(--black) !important}
html.t-flat .vhero .ed-costmt .side .arr{color:var(--black) !important}

/* Der Header steht auf dem hellen Feld dunkel und wird hell, sobald der
   Film frei liegt. .mo-on-red setzt motion.js, solange das Feld oben steht. */
/* Das Hero-Feld ist nicht mehr weiss — der Header steht auf beiden Seiten
   der Umschaltung hell. Die dunkle Fassung waere jetzt schwarz auf schwarz. */
html.t-flat header.top.mo-on-red,
html.t-flat header.top.mo-on-red .logo,
html.t-flat header.top.mo-on-red .navc a,
html.t-flat header.top.mo-on-red nav a{color:var(--ink) !important}
html.t-flat header.top.mo-on-red .logo svg path{fill:var(--ink) !important}

/* Der Einstieg faehrt in der Farbe des Feldes zurueck, nicht in Schwarz */
html.t-flat.mo-intro::before{background:var(--white) !important}
html.t-flat .mo-boot__red{background:var(--white) !important}

/* Der Leitsatz sitzt unten im Feld. Bei niedrigen Fenstern wuerde er sonst
   nach oben unter den Header laufen — dieser Freiraum verhindert das. */
html.t-flat .vhero .vhero-copy{padding-top:80px !important}

/* ==========================================================================
   Abgesetzte Sektionen.
   Statt Weiss zwei angehobene Schwarztoene (aus der S/C-Labs-Seite). Sie
   trennen die Abschnitte durch eine Tonstufe statt durch einen Bruch —
   die Schrift bleibt ueberall dieselbe helle Farbe.
   ========================================================================== */
html.t-flat .is-light,
html.t-flat section.home-caps{
  background:var(--raise-1) !important;
}
html.t-flat section.closing{
  background:var(--raise-2) !important;
}
html.t-flat .is-light,
html.t-flat section.home-caps,
html.t-flat section.closing{
  color:var(--ink) !important;
}
/* Auf den angehobenen Toenen gelten dieselben Abstufungen wie auf Schwarz */
html.t-flat .is-light .ed-body,
html.t-flat .is-light p,
html.t-flat section.home-caps .cap__b,
html.t-flat section.closing p{color:rgba(var(--ink-rgb),.72) !important}
html.t-flat .is-light .ed-mono,
html.t-flat .is-light .vt-cell .k,
html.t-flat .is-light .lab,
html.t-flat .is-light .mc-n,
html.t-flat section.home-caps .cap__n{color:rgba(var(--ink-rgb),.55) !important}
html.t-flat .is-light .stmt,
html.t-flat .is-light .vt-stmt,
html.t-flat .is-light h1, html.t-flat .is-light h2, html.t-flat .is-light h3,
html.t-flat .is-light a,
html.t-flat section.home-caps .caps-lead,
html.t-flat section.home-caps .cap__t,
html.t-flat section.home-caps .lab,
html.t-flat section.closing h2,
html.t-flat section.closing a{color:var(--ink) !important}
html.t-flat section.home-caps .cap + .cap{border-left-color:rgba(var(--ink-rgb),.16) !important}



/* ==========================================================================
   Work — Einstieg dunkel.
   Die Startseite oeffnet hell, Work oeffnet dunkel. Dadurch unterscheiden
   sich die beiden Einstiege, ohne dass der Aufbau ein anderer waere.
   ========================================================================== */
html.t-flat .work-vhero .vhero-copy{
  background:var(--surface) !important;
  color:var(--ink) !important;
}
html.t-flat .work-vhero .ed-costmt .stmt{color:var(--ink) !important}
html.t-flat .work-vhero .ed-costmt .side .ed-body{color:rgba(var(--ink-rgb),.66) !important}
html.t-flat .work-vhero .ed-costmt .side .ed-textlink,
html.t-flat .work-vhero .ed-costmt .side .arr{color:var(--ink) !important}
/* auf dem dunklen Feld steht der Header wieder hell */
html.t-flat body.work-page header.top.mo-on-red,
html.t-flat body.work-page header.top.mo-on-red .logo,
html.t-flat body.work-page header.top.mo-on-red .navc a,
html.t-flat body.work-page header.top.mo-on-red nav a{color:var(--ink) !important}
html.t-flat body.work-page header.top.mo-on-red .logo svg path{fill:var(--ink) !important}

/* --- Die Liste bekommt ihre Trennlinien zurueck ------------------------- */
html.t-flat .wlist{border-top:1px solid rgba(var(--ink-rgb),.16) !important}
html.t-flat .wrow{border-bottom:1px solid rgba(var(--ink-rgb),.16) !important}

/* ==========================================================================
   2026-08-19: Work/Studio repair pass.
   Diese Regeln stehen absichtlich ganz unten, weil chrome.css viele globale
   Hell/Dunkel-Overrides setzt.
   ========================================================================== */

/* Work: nur Linien zwischen den Eintraegen, nie oben oder unten. */
html.t-flat body.work-page .wlist{
  border-top:0 !important;
  border-bottom:0 !important;
}
html.t-flat body.work-page .wrow{
  border-bottom:0 !important;
  border-top:0 !important;
}
html.t-flat body.work-page .wrow + .wrow{
  border-top:1px solid rgba(var(--ink-rgb),.16) !important;
}
/* Die Farben kommen aus der Fassung, nicht fest verdrahtet — sonst steht
   der Abschluss auf der hellen Seite weiss auf weiss. */
html.t-flat body.work-page main > section.closing{
  margin-top:clamp(70px,8vw,130px) !important;
}
html.t-flat body.work-page main > section.closing p{color:rgba(var(--ink-rgb),.72) !important}
html.t-flat body.work-page main > section.closing h2,
html.t-flat body.work-page main > section.closing a{color:var(--ink) !important}

/* Studio: "What we believe" wie Statement + zwei ruhige Spalten darunter. */
html.t-flat body.tb-dark .ed-vt{
  display:grid !important;
  grid-template-columns:34.1% minmax(0,1fr) minmax(0,1fr) !important;
  column-gap:clamp(24px,3vw,46px) !important;
  row-gap:clamp(38px,4.6vw,72px) !important;
}
html.t-flat body.tb-dark .ed-vt .vt-stmt{
  grid-column:1/-1 !important;
  grid-row:1 !important;
  max-width:82.5% !important;
  margin:0 !important;
}
html.t-flat body.tb-dark .ed-vt .vt-cell{
  grid-row:auto !important;
  grid-column:auto !important;
  padding-top:18px !important;
  border-top:1px solid rgba(var(--ink-rgb),.16) !important;
}
html.t-flat body.tb-dark .ed-vt .vt-cell:nth-of-type(1),
html.t-flat body.tb-dark .ed-vt .vt-cell:nth-of-type(3){
  grid-column:2 !important;
}
html.t-flat body.tb-dark .ed-vt .vt-cell:nth-of-type(2),
html.t-flat body.tb-dark .ed-vt .vt-cell:nth-of-type(4){
  grid-column:3 !important;
}
html.t-flat body.tb-dark .ed-vt .vt-cell p{
  max-width:44ch !important;
}

/* Studio: Capabilities wieder dunkel, ohne helles Karten-Geklebe. */
html.t-flat body.tb-dark .studio-capabilities{
  --surface:var(--black);
  --ink:var(--white);
  --ink-rgb:var(--white-rgb);
  background:var(--black) !important;
  color:var(--white) !important;
}
html.t-flat body.tb-dark .studio-capabilities .ed-statement,
html.t-flat body.tb-dark .studio-capabilities h3{color:var(--white) !important}
html.t-flat body.tb-dark .studio-capabilities .ed-body{color:rgba(var(--white-rgb),.68) !important}
html.t-flat body.tb-dark .studio-capabilities .ed-mono,
html.t-flat body.tb-dark .studio-capabilities .mc-n{color:rgba(var(--white-rgb),.52) !important}
html.t-flat body.tb-dark .studio-capabilities .mnum-ghost{display:none !important}
html.t-flat body.tb-dark .studio-capabilities .ed-mnum{display:block !important}
html.t-flat body.tb-dark .studio-capabilities .mnum-cards{
  margin-left:34.1% !important;
  width:65.9% !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:clamp(34px,4vw,64px) clamp(24px,3vw,46px) !important;
}
html.t-flat body.tb-dark .studio-capabilities .mcard{
  background:transparent !important;
  border:0 !important;
  border-top:1px solid rgba(var(--white-rgb),.16) !important;
  padding:18px 0 0 !important;
}
html.t-flat body.tb-dark .studio-capabilities .mcard h3{
  font-size:clamp(22px,2vw,34px) !important;
  line-height:1.08 !important;
  max-width:16ch !important;
}

/* Studio: zweites Bild maximal halbhoch und ruhig im Scroll. */
html.t-flat body.tb-dark .studio-band-half{
  height:50vh !important;
  min-height:360px !important;
  max-height:560px !important;
  background:#0f0f0e !important;
}
html.t-flat body.tb-dark .studio-band-half .ed-band-media{
  top:0 !important;
  bottom:0 !important;
  transform:none !important;
}
html.t-flat body.tb-dark .studio-band-half img{
  object-fit:cover !important;
  object-position:center !important;
  filter:saturate(.72) contrast(.96) brightness(.74) !important;
}

/* Studio: Closing ebenfalls dunkel, keine weisse Flaeche. */
html.t-flat body.tb-dark .studio-closing{
  --surface:var(--black);
  --ink:var(--white);
  --ink-rgb:var(--white-rgb);
  background:var(--black) !important;
  color:var(--white) !important;
  border:0 !important;
  margin-top:0 !important;
}
html.t-flat body.tb-dark .studio-closing p{color:rgba(var(--white-rgb),.68) !important}
html.t-flat body.tb-dark .studio-closing h2,
html.t-flat body.tb-dark .studio-closing a{color:var(--white) !important}

@media(max-width:900px){
  html.t-flat body.tb-dark .ed-vt{grid-template-columns:1fr !important}
  html.t-flat body.tb-dark .ed-vt .vt-stmt,
  html.t-flat body.tb-dark .ed-vt .vt-cell{
    grid-column:1 !important;
    grid-row:auto !important;
    max-width:100% !important;
  }
  html.t-flat body.tb-dark .studio-capabilities .mnum-cards{
    margin-left:0 !important;
    width:100% !important;
    grid-template-columns:1fr !important;
  }
}

/* --- Der Header steht auf jeder Seite fest ------------------------------
   Auf contact.html war er sticky und nahm dadurch 64px im Fluss ein: ueber
   dem weissen Hero-Feld stand ein schwarzer Streifen, in dem das schwarze
   Logo unsichtbar war. */
html.t-flat header.top{
  position:fixed !important;top:0 !important;left:0 !important;right:0 !important;
  z-index:60 !important;
}

/* --- Alle Bilder stehen fest, man scrollt darueber ---------------------- */
html.t-flat .ed-band{
  position:relative;overflow:hidden;clip-path:inset(0);
  height:clamp(272px,50vh,528px);
}
html.t-flat .ed-band .ed-band-media{position:static}
html.t-flat .ed-band .ed-band-media img{
  position:fixed;top:0;left:0;width:100vw;height:100vh;object-fit:cover;z-index:0;
}
@media(max-width:860px),(hover:none),(prefers-reduced-motion:reduce){
  html.t-flat .ed-band{clip-path:none}
  html.t-flat .ed-band .ed-band-media img{position:absolute;width:100%;height:100%}
}

/* --- Work: Luft zwischen Einstieg und Liste ----------------------------- */
html.t-flat .work-list-sec{padding-top:clamp(90px,10vw,170px) !important}

/* ==========================================================================
   Tonstufen — verbindlich, ganz am Ende.
   Weiter oben in dieser Datei stehen aeltere Regeln, die den Abschluss auf
   Basisschwarz zwingen. Diese hier gelten zuletzt und damit.
   ========================================================================== */
html.t-flat section.closing,
html.t-flat body.work-page main > section.closing,
html.t-flat body.tb-dark .studio-closing,
html.t-flat body .studio-closing{
  background:var(--raise-2) !important;
}
html.t-flat .is-light,
html.t-flat body section.home-caps,
html.t-flat body.tb-dark .studio-capabilities,
html.t-flat body .is-light{
  background:var(--raise-1) !important;
}
/* Die Bildbaender liegen auf der Basisfarbe, nicht auf einem eigenen Schwarz */
html.t-flat body .ed-band,
html.t-flat body.tb-dark .studio-band-half,
html.t-flat body .fixband{background:var(--surface) !important}

/* --- Studio "Know what a brand makes visible" ---------------------------
   Aussage links auf der Aussenlinie, zwei Textspalten weiter rechts. Beide
   Spalten starten auf derselben Oberkante wie die Aussage — vorher hingen
   sie tiefer. */
html.t-flat body .studio-say .ed-costmt{
  display:grid !important;
  grid-template-columns:34.1% minmax(0,1fr) minmax(0,1fr) !important;
  column-gap:clamp(24px,3vw,46px) !important;
  align-items:start !important;
}
html.t-flat body .studio-say .ed-costmt .stmt{
  grid-column:1 !important;grid-row:1 !important;
  max-width:none !important;width:100% !important;margin:0 !important;
}
html.t-flat body .studio-say .ed-costmt .side{
  display:contents !important;
}
html.t-flat body .studio-say .ed-costmt .side .ed-body{
  grid-row:1 !important;margin:0 !important;max-width:none !important;
}
html.t-flat body .studio-say .ed-costmt .side .ed-body:nth-of-type(1){grid-column:2 !important}
html.t-flat body .studio-say .ed-costmt .side .ed-body:nth-of-type(2){grid-column:3 !important}
@media(max-width:900px){
  html.t-flat body .studio-say .ed-costmt{grid-template-columns:1fr !important;row-gap:26px}
  html.t-flat body .studio-say .ed-costmt .stmt,
  html.t-flat body .studio-say .ed-costmt .side .ed-body{grid-column:1 !important;grid-row:auto !important}
}

/* ==========================================================================
   Schluss mit Weiss.
   Die Hero-Felder laufen wieder auf der Grundfarbe, Schrift hell.
   ========================================================================== */
html.t-flat body .vhero .vhero-copy{
  background:var(--surface) !important;
  color:var(--ink) !important;
}
html.t-flat body .vhero .ed-costmt .stmt{color:var(--ink) !important}
html.t-flat body .vhero .ed-costmt .side .ed-body{color:rgba(var(--ink-rgb),.66) !important}
html.t-flat body .vhero .ed-costmt .side .ed-textlink,
html.t-flat body .vhero .ed-costmt .side .arr{color:var(--ink) !important}
/* Header steht damit ueberall hell */
html.t-flat header.top,
html.t-flat header.top .logo,
html.t-flat header.top .navc a,
html.t-flat header.top nav a{color:var(--ink) !important}
html.t-flat header.top .logo svg path{fill:var(--ink) !important}
/* Der Einstieg faehrt wieder in der Grundfarbe zurueck */
html.t-flat.mo-intro::before,
html.t-flat .mo-boot__red{background:var(--surface) !important}

/* ==========================================================================
   Abgesetzte Sektionen laufen bis an den Rand.
   section.closing war auf die Aussenlinie begrenzt — dadurch endete auch
   seine Flaeche dort und der Ton stand als Kasten mitten auf der Seite.
   Jetzt: Flaeche ueber die volle Breite, Inhalt weiter auf der Linie.
   ========================================================================== */
html.t-flat body section.closing{
  width:100% !important;
  max-width:none !important;
  margin-inline:0 !important;
  padding-inline:calc((100vw - min(90vw,1500px)) / 2 + 25px) !important;
  box-sizing:border-box !important;
}

/* --- Der rote Punkt wieder mittig -------------------------------------- */
html.t-flat .badge,
html.t-flat .badge--link{
  left:50% !important;right:auto !important;
  transform:translateX(-50%) !important;
}
html.t-flat .badge.badge--hidden{
  transform:translateX(-50%) translateY(16px) scale(.92) !important;
}

/* --- Bildton kuehler ---------------------------------------------------- */
html.t-flat .hero-band,
html.t-flat .fixband__img,
html.t-flat .ed-band-media img{
  filter:saturate(.66) hue-rotate(-8deg) contrast(1.04) !important;
}

/* --- Die Logoleiste -----------------------------------------------------
   Die Seitenverhaeltnisse der Logos laufen von 1,41 (SW, quadratisch) bis
   7,99 (Mercedes-Benz Fashion Week, langer Schriftzug) — Faktor 5,7. Bei
   EINER gemeinsamen Regel wird immer die Haelfte falsch: gleiche Hoehe
   macht die breiten Schriftzuege riesig, gleicher Kasten macht sie duenn
   und schwach. Deshalb bekommt jedes Logo seine eigene Hoehe, von Hand
   gesetzt, damit alle optisch gleich schwer wiegen. Die Breite folgt.
   Reihenfolge = Reihenfolge im Markup, gilt fuer beide Saetze.
   ------------------------------------------------------------------------ */
html.t-flat body section.project-strip{
  display:block !important;
  padding-block:clamp(120px,13vw,210px) !important;
}
/* Der Kopf ueber den Logos: erst das Mono-Label, dann die Aussage, dann
   viel Luft bis zur Reihe. Ohne ihn sind die Logos Dekoration. */
html.t-flat body section.project-strip .strip-head{
  text-align:center;
  padding-inline:calc((100vw - min(90vw,1500px)) / 2 + 25px);
  margin-bottom:clamp(90px,11vw,170px);
}
html.t-flat body section.project-strip .strip-kicker{
  display:block;
  font-family:"Suisse Mono",monospace;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(var(--ink-rgb),.55);
}
html.t-flat body section.project-strip .strip-stmt{
  margin:clamp(34px,4vw,64px) auto 0;max-width:24ch;
  color:var(--ink);text-wrap:balance;
}
@media(max-width:640px){
  html.t-flat body section.project-strip .strip-head{margin-bottom:clamp(56px,12vw,90px)}
}
html.t-flat body section.project-strip .logo-set{
  gap:clamp(52px,5.6vw,88px) !important;
  padding-right:clamp(52px,5.6vw,88px) !important;
}
html.t-flat body section.project-strip .logo-set img{
  --lh:clamp(24px,2.5vw,36px);
  flex:0 0 auto !important;
  height:calc(var(--lh) * var(--k,1)) !important;
  width:auto !important;
  max-width:none !important;
  object-fit:contain !important;
  opacity:.72 !important;
}
/* 1 Wella  2 Universal  3 AOK  4 GG  5 GMK  6 SW  7 Montblanc  8 HC  9 MBFW */
html.t-flat body section.project-strip .logo-set img:nth-child(1){--k:.95}
html.t-flat body section.project-strip .logo-set img:nth-child(2){--k:1}
html.t-flat body section.project-strip .logo-set img:nth-child(3){--k:.84}
html.t-flat body section.project-strip .logo-set img:nth-child(4){--k:.62}
html.t-flat body section.project-strip .logo-set img:nth-child(5){--k:.80}
html.t-flat body section.project-strip .logo-set img:nth-child(6){--k:1.08}
html.t-flat body section.project-strip .logo-set img:nth-child(7){--k:.95}
html.t-flat body section.project-strip .logo-set img:nth-child(8){--k:.82}
html.t-flat body section.project-strip .logo-set img:nth-child(9){--k:.66}
@media(max-width:640px){
  html.t-flat body section.project-strip{padding-block:clamp(80px,16vw,120px) !important}
  html.t-flat body section.project-strip .logo-set{gap:46px !important;padding-right:46px !important}
  html.t-flat body section.project-strip .logo-set img{--lh:30px}
}

/* ==========================================================================
   News als Kacheln.
   Drei Spalten, Bild oben, darunter Nummer, Titel und Datum. Kein Rahmen —
   das Bild setzt die Kachel ab.
   ========================================================================== */
html.t-flat .ngrid{
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:clamp(20px,2.4vw,38px);
  row-gap:clamp(44px,5vw,80px);
  margin-top:clamp(34px,4vw,64px);
}
html.t-flat .ncard{display:grid;gap:.5em;text-decoration:none;color:var(--ink)}
html.t-flat .ncard__media{
  display:block;position:relative;overflow:hidden;
  aspect-ratio:4/3;background:var(--raise-1);margin-bottom:.9em;
}
html.t-flat .ncard__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.19,1,.22,1);
}
html.t-flat .ncard:hover .ncard__media img{transform:scale(1.04)}
html.t-flat .ncard__n{
  font-family:"Suisse Mono",monospace;font-size:12px;letter-spacing:.04em;
  color:rgba(var(--ink-rgb),.55);
}
html.t-flat .ncard__t{
  font-size:clamp(18px,1.5vw,22px);line-height:1.2;letter-spacing:-.015em;
  color:var(--ink);
}
html.t-flat .ncard__m{
  font-family:"Suisse Mono",monospace;font-size:12px;letter-spacing:.04em;
  color:rgba(var(--ink-rgb),.55);
}
@media(max-width:900px){html.t-flat .ngrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){html.t-flat .ngrid{grid-template-columns:1fr}}

/* ==========================================================================
   Ein Raster fuer alle Textblöcke der Unterseiten.
   Aus den Referenzen: schmale Label-Spalte links, Aussage und Text rechts,
   darueber eine Haarlinie. Jeder Block sitzt damit auf denselben Kanten.

   Spalten: 1 Label · 2 Aussage · 3-4 Text
   ========================================================================== */
html.t-flat body .studio-say .ed-costmt,
html.t-flat body .ed-vt{
  display:grid !important;
  grid-template-columns:14% minmax(0,1.9fr) minmax(0,1fr) minmax(0,1fr) !important;
  column-gap:clamp(20px,2.4vw,40px) !important;
  row-gap:clamp(26px,3vw,44px) !important;
  align-items:start !important;
  padding-top:clamp(26px,3vw,44px) !important;
  border-top:1px solid rgba(var(--ink-rgb),.16) !important;
}
html.t-flat body .blocklabel,
html.t-flat body .ed-vt > .vt-label{
  grid-column:1 !important;grid-row:1 !important;
  font-family:"Suisse Mono",monospace !important;font-size:12px !important;
  letter-spacing:.04em !important;text-transform:uppercase !important;
  color:rgba(var(--ink-rgb),.55) !important;margin:0 !important;
  padding-top:.35em !important;
}
html.t-flat body .studio-say .ed-costmt .stmt,
html.t-flat body .ed-vt .vt-stmt{
  grid-column:2 !important;grid-row:1 !important;
  max-width:none !important;width:100% !important;margin:0 !important;
}
html.t-flat body .studio-say .ed-costmt .side{display:contents !important}
html.t-flat body .studio-say .ed-costmt .side .ed-body{
  grid-row:1 !important;margin:0 !important;max-width:none !important;
}
html.t-flat body .studio-say .ed-costmt .side .ed-body:nth-of-type(1){grid-column:3 !important}
html.t-flat body .studio-say .ed-costmt .side .ed-body:nth-of-type(2){grid-column:4 !important}
html.t-flat body .ed-vt .vt-cell{grid-row:2 !important;margin:0 !important;padding:0 !important}
html.t-flat body .ed-vt .vt-cell:nth-of-type(1){grid-column:2 !important}
html.t-flat body .ed-vt .vt-cell:nth-of-type(2){grid-column:3 !important}
html.t-flat body .ed-vt .vt-cell:nth-of-type(3){grid-column:4 !important}

@media(max-width:900px){
  html.t-flat body .studio-say .ed-costmt,
  html.t-flat body .ed-vt{grid-template-columns:1fr !important}
  html.t-flat body .blocklabel,
  html.t-flat body .studio-say .ed-costmt .stmt,
  html.t-flat body .studio-say .ed-costmt .side .ed-body,
  html.t-flat body .ed-vt .vt-stmt,
  html.t-flat body .ed-vt .vt-cell{grid-column:1 !important;grid-row:auto !important}
}

/* --- Korrekturen ---------------------------------------------------------
   1. Der Bildfilter hatte hue-rotate und kippte dunkle Bilder ins Blaeuliche.
      Nur noch entsaettigen, kein Farbdreh.
   2. Die Haarlinien ueber den Studio-Bloecken waren aus der Referenz
      uebernommen, stehen hier aber im Weg — raus.
   3. Das zweite Studio-Bild lag auf absolut und lief dadurch mit; eine
      aeltere Regel mit .studio-band-half hat die feste Lage ueberschrieben.
   ========================================================================== */
html.t-flat .hero-band,
html.t-flat .fixband__img,
html.t-flat .ed-band-media img{
  filter:saturate(.72) !important;
}
html.t-flat body .studio-say .ed-costmt,
html.t-flat body .ed-vt{
  border-top:0 !important;
  padding-top:0 !important;
}
html.t-flat body.tb-dark .studio-band-half,
html.t-flat body .ed-band.studio-band-half{
  position:relative !important;overflow:hidden !important;clip-path:inset(0) !important;
  height:clamp(272px,50vh,528px) !important;
}
html.t-flat body.tb-dark .studio-band-half .ed-band-media,
html.t-flat body .ed-band.studio-band-half .ed-band-media{
  position:static !important;inset:auto !important;
}
html.t-flat body.tb-dark .studio-band-half .ed-band-media img,
html.t-flat body .ed-band.studio-band-half img{
  position:fixed !important;top:0 !important;left:0 !important;
  width:100vw !important;height:100vh !important;object-fit:cover !important;
}
@media(max-width:860px),(hover:none),(prefers-reduced-motion:reduce){
  html.t-flat body .ed-band.studio-band-half{clip-path:none !important}
  html.t-flat body .ed-band.studio-band-half img{
    position:absolute !important;width:100% !important;height:100% !important;
  }
}

/* ==========================================================================
   Osten-Muster (Studio).
   Schmales Label ganz links, alles andere rechts in EINER breiten Spalte.
   Die Aussage laeuft ueber die volle Inhaltsbreite, Belege stehen darunter
   als zwei ruhige Felder mit eigener kleiner Ueberschrift.
   Keine Linien — die Ordnung kommt aus der Label-Spalte.
   ========================================================================== */
html.t-flat body .oblock{
  display:grid !important;
  grid-template-columns:12% minmax(0,1fr) !important;
  column-gap:clamp(24px,3vw,56px) !important;
  align-items:start !important;
}
html.t-flat body .oblock__label{
  font-family:"Suisse Mono",monospace !important;font-size:12px !important;
  letter-spacing:.04em !important;text-transform:uppercase !important;
  color:rgba(var(--ink-rgb),.55) !important;
  padding-top:.45em !important;
}
html.t-flat body .oblock__body{display:grid;gap:clamp(38px,4.4vw,72px)}
html.t-flat body .oblock__body .stmt{
  max-width:20ch !important;width:100% !important;margin:0 !important;
}
/* Eine breite Textspalte, nicht zwei */
html.t-flat body .owide{
  max-width:62ch !important;margin:0 !important;
}
/* Belege: zwei Felder nebeneinander, jedes mit kleiner Ueberschrift */
html.t-flat body .ofields{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(24px,3vw,56px);row-gap:clamp(26px,3vw,42px);
  max-width:76%;
}
html.t-flat body .ofield{display:grid;gap:.7em}
html.t-flat body .ofield__k{
  font-family:"Suisse",Arial,sans-serif !important;
  font-size:clamp(15px,1.05vw,17px) !important;line-height:1.4 !important;
  color:var(--ink) !important;
}
html.t-flat body .ofield p{margin:0 !important;color:rgba(var(--ink-rgb),.72) !important}

@media(max-width:900px){
  html.t-flat body .oblock{grid-template-columns:1fr !important;row-gap:18px}
  html.t-flat body .ofields{grid-template-columns:1fr;max-width:none}
  html.t-flat body .owide{max-width:none !important}
}

/* ==========================================================================
   REFERENZ 1 — Guseva: Practice als Zeilen statt Spalten.
   Nummer aussen links, Titel in der Mitte, Beschreibung rechts, Haarlinie
   zwischen den Zeilen. Traegt mehr Text und liest sich ruhiger.
   ========================================================================== */
html.t-flat body .caps-grid{
  display:grid !important;grid-template-columns:1fr !important;
  gap:0 !important;
}
html.t-flat body .cap{
  display:grid !important;
  grid-template-columns:8% minmax(0,1.1fr) minmax(0,1.5fr) !important;
  column-gap:clamp(24px,3vw,56px) !important;
  align-items:start !important;
  padding:clamp(26px,3vw,44px) 0 !important;
  min-height:0 !important;border-left:0 !important;
  border-top:1px solid rgba(var(--ink-rgb),.16) !important;
}
html.t-flat body .cap:last-child{border-bottom:1px solid rgba(var(--ink-rgb),.16) !important}
html.t-flat body .cap__n{
  grid-column:1 !important;margin:0 !important;
  font-size:12px !important;font-family:"Suisse Mono",monospace !important;
  letter-spacing:.04em !important;color:rgba(var(--ink-rgb),.55) !important;
  padding-top:.35em !important;
}
html.t-flat body .cap__t{
  grid-column:2 !important;margin:0 !important;
  font-size:clamp(18px,1.5vw,22px) !important;line-height:1.25 !important;
}
html.t-flat body .cap__b{grid-column:3 !important;margin:0 !important;max-width:52ch !important}

/* ==========================================================================
   REFERENZ 3 — Balkan Bros: die drei Schritte auf Contact.
   Punkt, gepunktete Linie, Titel, Text. Kein Kasten, kein Rahmen.
   ========================================================================== */
html.t-flat body .csteps .cstep{
  display:grid !important;gap:.9em !important;
  grid-template-columns:1fr !important;
}
html.t-flat body .csteps .cstep__n{
  display:flex !important;align-items:center !important;gap:10px !important;
  padding:0 !important;margin:0 0 .4em !important;
}
html.t-flat body .csteps .cstep__n::before{
  content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;
  background:var(--accent,#ff3b1d);
}
html.t-flat body .csteps .cstep__n::after{
  content:"";flex:1 1 auto;height:0;
  border-top:1px dotted rgba(var(--ink-rgb),.34);
}
html.t-flat body .csteps .cstep__b h2{margin:0 0 .5em !important}

/* ==========================================================================
   REFERENZ 5 — Fashion-Editorial: kleinerer Header.
   Er nimmt weniger Hoehe und tritt hinter den Inhalt zurueck.
   ========================================================================== */
html.t-flat header.top .frame,
html.t-flat header.top .shell{height:48px !important}
html.t-flat header.top .logo svg{height:16px !important}
html.t-flat header.top .navc a,
html.t-flat header.top nav a{font-size:11px !important}

/* ==========================================================================
   News — Hochformat, versetzt.
   Die Kacheln stehen hochkant wie die Karten auf der alten Work-Seite und
   sitzen spaltenweise versetzt. Beim Hereinkommen laufen sie nach oben auf,
   die mittlere Spalte spaeter als die aeussere — dadurch baut sich das
   Raster auf, statt als Block zu erscheinen.
   ========================================================================== */
html.t-flat body .ngrid{
  grid-template-columns:repeat(3,1fr) !important;
  column-gap:clamp(20px,2.4vw,38px) !important;
  row-gap:clamp(56px,6vw,104px) !important;
  align-items:start !important;
}
html.t-flat body .ncard__media{aspect-ratio:3/4 !important}
/* Kein Versatz: die Kacheln stehen buendig nebeneinander. Die Bewegung
   macht den Aufbau, nicht die Position. */
html.t-flat body .ncard{margin-top:0 !important}

/* Auflauf nach oben, spaltenweise verzoegert */
/* Der Auslöser ist ausschliesslich das Raster. Haengt er auch an der
   Sektion, traegt die schon beim Laden .tb-in und der Startzustand wird
   nie sichtbar — dann erscheinen die Kacheln einfach, statt aufzulaufen. */
/* Startzustand ohne Uebergang, Uebergang nur auf dem Weg ins Bild.
   Dazu laeuft das Bild selbst von unten auf wie die Karten der Startseite. */
html.t-flat body .ncard.rise:not(.is-in){opacity:0 !important;transform:translateY(56px) !important}
html.t-flat body .ncard.rise .ncard__media{clip-path:inset(100% 0 0 0)}
html.t-flat body .ncard.rise .ncard__media img{transform:translateY(12%) scale(1.04)}
html.t-flat body .ncard.is-in{
  opacity:1 !important;transform:none !important;
  transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1) !important;
}
html.t-flat body .ncard.is-in .ncard__media{clip-path:inset(0);transition:clip-path .9s cubic-bezier(.16,1,.3,1)}
html.t-flat body .ncard.is-in:not(:hover) .ncard__media img{transform:none;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:reduce){
  html.t-flat body .ncard.rise:not(.is-in){opacity:1 !important;transform:none !important;transition:none !important}
}
@media(max-width:900px){
  html.t-flat body .ngrid{grid-template-columns:1fr 1fr !important}
}
@media(max-width:560px){
  html.t-flat body .ngrid{grid-template-columns:1fr !important}
}

/* ==========================================================================
   REFERENZ 5 — Fashion-Editorial: Kopf der Projektseiten.
   Grosse Aussage links, Eckdaten rechts als Tabelle mit Haarlinien.
   ========================================================================== */
/* Beide Abschnitte laufen auf demselben Zwoelfer-Raster und mit demselben
   Seitenabstand — nur so steht die Ueberschrift wirklich auf der Bildkante.
   Links die feste Textspalte (1 bis 3), rechts Ueberschrift und Bilder (4 bis 12). */
html.t-flat body .case-hero{
  display:grid !important;
  grid-template-columns:repeat(12,minmax(0,1fr)) !important;
  column-gap:var(--gap,24px) !important;
  align-items:start !important;
}
html.t-flat body .case-hero h1{margin:0 !important}
@media(min-width:1024px){
  html.t-flat body .case-hero h1{grid-column:4 / 13 !important}
  html.t-flat body .case-layout .case-info{grid-column:1 / 4 !important;grid-row:1 !important}
  html.t-flat body .case-layout .case-gallery{grid-column:4 / 13 !important;grid-row:1 !important}
}
@media(max-width:1023px){
  html.t-flat body .case-hero h1{grid-column:1 / -1 !important}
}

/* ==========================================================================
   Projektseiten.
   Oben etwas Luft, dann die Ueberschrift in zwei Toenen: der Name gedimmt,
   die Aussage hell — das Muster der ganzen Site.
   Darunter der zweispaltige Block: links die Bilder im Takt breit / zwei
   hoch / breit, rechts das Overview. Es beginnt auf Hoehe des ersten
   Bildes und setzt sich beim Scrollen fest.
   WICHTIG zum Ruhepunkt: eine feste Spalte wandert immer ein Stueck mit,
   bis sie ihren Abstand von oben erreicht hat. Je hoeher sie kleben soll,
   desto laenger wandert sie. Darum sitzt sie hier bei rund einem Drittel
   der Fensterhoehe statt dicht unter der Kopfleiste — kurzer Weg, dann steht sie.
   ========================================================================== */
html.t-flat body section.case-hero{
  padding-top:clamp(110px,11vw,170px) !important;
  padding-bottom:clamp(8px,1vw,16px) !important;
}
html.t-flat body .case-hero h1{max-width:26ch}
/* gedimmter Auftakt, dann die Aussage */
html.t-flat body .case-hero h1 span{
  color:rgba(var(--ink-rgb),.46) !important;
}
html.t-flat body section.case-layout{
  /* eng an die Ueberschrift: das hebt die Bilder UND die feste Spalte an,
     ohne den Haltepunkt anzufassen — der Weg bis zum Stehen bleibt null */
  padding-top:16px !important;
  padding-bottom:clamp(110px,12vw,190px) !important;
}
html.t-flat body .case-info{
  top:clamp(150px,30vh,300px) !important;   /* Notnagel; den echten Wert misst motion.js */
  align-self:start !important;
  overflow-y:auto;
  scrollbar-width:thin;
  overscroll-behavior:contain;
}
html.t-flat body .case-info::-webkit-scrollbar{width:0}
/* Die erste Zeile muss auf der Bildkante sitzen, nicht darunter. Der Knopf
   bringt oben 15px Polsterung und die Trennlinie 1px mit — beides faellt beim
   ersten Eintrag weg, sonst haengt "Overview" sichtbar tiefer als das Bild. */
html.t-flat body .case-info .case-accordion:first-of-type{
  border-top:0 !important;
}
html.t-flat body .case-info .case-accordion:first-of-type > button{
  padding-top:0 !important;
}

/* ==========================================================================
   Projektseiten, einspaltig (Versuch an Fusion House).
   Kein Text mehr neben einem Bild — damit gibt es nichts, was sich beim
   Ziehen des Fensters gegeneinander verschieben koennte. Alles laeuft auf
   der Inhaltsbreite der Site. Im Textblock steht das Label links in einer
   FESTEN Breite (nicht als Rasteranteil), sonst wandert es wieder mit.
   ========================================================================== */
html.t-flat body.case-page-1 section.case-hero,
html.t-flat body.case-page-1 section.case-layout{
  padding-inline:calc((100vw - min(90vw,1500px)) / 2 + 25px) !important;
}
html.t-flat body.case-page-1 section.case-hero{
  display:block !important;
  padding-top:clamp(110px,11vw,170px) !important;
  padding-bottom:clamp(28px,3vw,48px) !important;
}
html.t-flat body.case-page-1 .case-hero h1{max-width:26ch}
html.t-flat body.case-page-1 .case-gallery{grid-column:1 / -1 !important}
html.t-flat body.case-page-1 .case-text{
  grid-column:1 / -1;
  display:grid;gap:clamp(26px,2.6vw,40px);
  padding-block:clamp(70px,7.5vw,120px);
}
html.t-flat body.case-page-1 .ct__row{
  display:grid;grid-template-columns:150px minmax(0,1fr);
  column-gap:clamp(24px,3vw,56px);align-items:start;
}
html.t-flat body.case-page-1 .ct__k{
  font-family:"Suisse Mono",monospace;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(var(--ink-rgb),.55);padding-top:.35em;
}
html.t-flat body.case-page-1 .ct__row p{margin:0;max-width:62ch;line-height:1.7}
html.t-flat body.case-page-1 .ct__row ul{margin:0;padding:0;list-style:none;line-height:1.7;max-width:62ch}
html.t-flat body.case-page-1 .case-site-link{margin:0}
@media(max-width:760px){
  html.t-flat body.case-page-1 .ct__row{grid-template-columns:1fr;row-gap:10px}
  html.t-flat body.case-page-1 .ct__k{padding-top:0}
}

/* ==========================================================================
   Rechtstexte (Imprint, Datenschutz).
   Eine Spalte auf der Inhaltsbreite der Site, Lesebreite begrenzt.
   Kein Kopfbild, keine Bewegung — die Seiten sollen schnell und schlicht sein.
   ========================================================================== */
html.t-flat body.legal-page section.legal{
  position:relative;z-index:2;background:var(--surface);
  padding-inline:calc((100vw - min(90vw,1500px)) / 2 + 25px);
  padding-block:clamp(120px,12vw,190px) clamp(110px,12vw,180px);
}
html.t-flat body.legal-page .legal__k{
  margin:0 0 clamp(26px,3vw,44px);
  font-family:"Suisse Mono",monospace;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(var(--ink-rgb),.55);
}
html.t-flat body.legal-page .legal__t{margin:0 0 clamp(50px,6vw,90px);max-width:20ch}
html.t-flat body.legal-page .legal__body{max-width:78ch}
html.t-flat body.legal-page .legal__body h2{
  margin:clamp(56px,6vw,92px) 0 clamp(18px,2vw,28px);
  font-size:clamp(19px,1.6vw,24px);line-height:1.3;letter-spacing:-.015em;color:var(--ink);
}
html.t-flat body.legal-page .legal__body h3{
  margin:clamp(30px,3.2vw,46px) 0 clamp(10px,1.1vw,16px);
  /* type.css setzt h1-h6 mit !important auf Suisse — hier muss Mono gewinnen */
  font-family:"Suisse Mono",monospace !important;font-size:12px !important;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(var(--ink-rgb),.62);line-height:1.5;
}
html.t-flat body.legal-page .legal__body p{
  margin:0 0 1.15em;line-height:1.75;color:rgba(var(--ink-rgb),.82);
  font-size:clamp(15px,1.05vw,17px);   /* dieselbe Stufe wie der Fliesstext der Site */
}
html.t-flat body.legal-page .legal__body ul{margin:0 0 1.15em;padding-left:1.1em;line-height:1.75;color:rgba(var(--ink-rgb),.82);font-size:clamp(15px,1.05vw,17px)}
html.t-flat body.legal-page .legal__body li{margin-bottom:.5em}
html.t-flat body.legal-page .legal__body a{color:var(--ink);border-bottom:1px solid rgba(var(--ink-rgb),.3)}
html.t-flat body.legal-page .legal__body a:hover{border-color:var(--ink)}
/* der Grossbuchstaben-Absatz aus Art. 21 tritt zurueck */
html.t-flat body.legal-page .legal__caps{
  font-size:.92em;color:rgba(var(--ink-rgb),.62) !important;
}
html.t-flat body.legal-page .legal__src{
  margin-top:clamp(46px,5vw,72px);font-size:.92em;color:rgba(var(--ink-rgb),.5) !important;
}

/* ==========================================================================
   Startseite — Vollbild mit Riesenzeile.
   Kein halbes Farbfeld mehr: der Film fuellt das Fenster, die Aussage liegt
   darauf, so gross wie das Wortzeichen im Footer. Ein Verlauf von unten
   traegt die Schrift, damit sie im Bild steht statt darauf zu schwimmen.
   ========================================================================== */
html.t-flat body section.vhero--over{
  height:100svh !important;min-height:0 !important;overflow:hidden !important;
}
html.t-flat body .vhero--over .vhero-pin{
  position:relative !important;height:100svh !important;overflow:hidden !important;
}
html.t-flat body .vhero--over .vhero-copy{
  position:absolute !important;inset:0 !important;height:auto !important;
  background:transparent !important;
  display:flex !important;flex-direction:column !important;
  justify-content:flex-end !important;
  padding:0 0 clamp(30px,4vw,64px) !important;
  transform:none !important;z-index:4 !important;
}
html.t-flat body .vhero--over .vhero-stage::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(0,0,0,.74) 0%, rgba(0,0,0,.40) 34%, rgba(0,0,0,.06) 62%, rgba(0,0,0,.30) 100%) !important;
}

/* Die Riesenzeile — dieselbe Stufe wie das Wortzeichen im Footer */
html.t-flat body .hero-giant{
  font-family:"Suisse","Helvetica Neue",Arial,sans-serif !important;
  font-weight:400 !important;
  font-size:clamp(64px,15.5vw,260px) !important;
  line-height:.86 !important;
  letter-spacing:-.055em !important;
  color:#fff !important;
  max-width:none !important;margin:0 0 clamp(20px,2.4vw,38px) !important;
  text-wrap:balance;
}
html.t-flat body .vhero--over .ed-costmt,
html.t-flat body .vhero--over .frame{display:block !important;height:auto !important}
html.t-flat body .vhero--over .side{
  display:grid !important;gap:.9em !important;
  max-width:46ch !important;margin:0 !important;
}
html.t-flat body .vhero--over .vhero-note{color:rgba(255,255,255,.80) !important}
html.t-flat body .vhero--over .ed-textlink,
html.t-flat body .vhero--over .arr{color:#fff !important}
@media(max-width:640px){
  html.t-flat body .hero-giant{font-size:clamp(46px,17vw,96px) !important}
}

/* --- Kennzahlen auf der Startseite ------------------------------------- */
html.t-flat body .home-metrics{
  background:var(--raise-1) !important;
  width:100% !important;max-width:none !important;margin-inline:0 !important;
  padding:clamp(56px,6vw,104px) calc((100vw - min(90vw,1500px)) / 2 + 25px) !important;
}
/* --- Label-Spalte im Studio-Block der Startseite ------------------------ */
html.t-flat body .homelabel{
  display:block;margin:0 0 clamp(14px,1.6vw,24px);
  font-family:"Suisse Mono",monospace;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(var(--ink-rgb),.55);
}

/* ==========================================================================
   Selected work — nur noch ein Label auf der Mono-Ebene.
   Die Laufschrift war lauter als die Arbeit darunter.
   ========================================================================== */
html.t-flat body .hw-label{
  display:block;
  font-family:"Suisse Mono",monospace;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(var(--ink-rgb),.55);
  margin:0 0 clamp(24px,3vw,44px);
}

/* ==========================================================================
   Practice zum Ausklappen.
   Zugeklappt: Nummer, Titel, kurze Zeile. Aufgeklappt: der ganze Absatz.
   Ohne Skript — das macht <details> von sich aus.
   ========================================================================== */
html.t-flat body details.cap{
  display:block !important;padding:0 !important;
  border-top:1px solid rgba(var(--ink-rgb),.16) !important;
}
html.t-flat body details.cap:last-of-type{
  border-bottom:1px solid rgba(var(--ink-rgb),.16) !important;
}
html.t-flat body details.cap > summary{
  display:grid !important;
  grid-template-columns:8% minmax(0,1.1fr) minmax(0,1.5fr) 40px !important;
  column-gap:clamp(24px,3vw,56px) !important;
  align-items:start !important;
  padding:clamp(26px,3vw,44px) 0 !important;
  cursor:pointer;list-style:none;
}
html.t-flat body details.cap > summary::-webkit-details-marker{display:none}
html.t-flat body details.cap .cap__x{
  grid-column:4;justify-self:end;align-self:start;
  position:relative;width:14px;height:14px;margin-top:.4em;
}
html.t-flat body details.cap .cap__x::before,
html.t-flat body details.cap .cap__x::after{
  content:"";position:absolute;inset:0;margin:auto;
  background:rgba(var(--ink-rgb),.62);
}
html.t-flat body details.cap .cap__x::before{width:14px;height:1px}
html.t-flat body details.cap .cap__x::after{
  width:1px;height:14px;transition:transform .35s var(--mo-ease,cubic-bezier(.19,1,.22,1));
}
html.t-flat body details.cap[open] .cap__x::after{transform:scaleY(0)}
html.t-flat body details.cap .cap__more{
  grid-column:3;margin:0 0 clamp(26px,3vw,44px) !important;
  max-width:52ch;color:rgba(var(--ink-rgb),.72) !important;
  padding-left:calc(8% + clamp(24px,3vw,56px) + 1.1fr);
}
/* der ausgeklappte Absatz sitzt unter der kurzen Zeile, auf derselben Kante */
html.t-flat body details.cap{position:relative}
html.t-flat body details.cap .cap__more{
  margin-left:calc(8% + 1.1 * ((100% - 8% - 40px - 2 * clamp(24px,3vw,56px)) / 2.6) + 2 * clamp(24px,3vw,56px)) !important;
  padding-left:0;
}
@media(max-width:900px){
  html.t-flat body details.cap > summary{grid-template-columns:1fr 40px !important;row-gap:.6em}
  html.t-flat body details.cap .cap__n,
  html.t-flat body details.cap .cap__t,
  html.t-flat body details.cap .cap__b{grid-column:1 !important}
  html.t-flat body details.cap .cap__x{grid-column:2;grid-row:1}
  html.t-flat body details.cap .cap__more{margin-left:0 !important}
}

/* ==========================================================================
   Versalien fuer alle Ueberschriften.
   Fliesstext bleibt gemischt — Versalien im Absatz sind nicht mehr lesbar,
   das waere kein Stil, sondern ein Fehler.
   ========================================================================== */
html.t-flat .stmt, html.t-flat .hero-claim, html.t-flat .hero-giant,
html.t-flat .studio-main, html.t-flat .cbig, html.t-flat .hw-title,
html.t-flat .caps-lead, html.t-flat .cap__t, html.t-flat .ed-display,
html.t-flat .ed-statement, html.t-flat .vt-stmt, html.t-flat .ed-lhead,
html.t-flat .sa-title, html.t-flat .wrow__name, html.t-flat .work-hero h1,
html.t-flat .article-hero h1, html.t-flat .case-hero h1,
html.t-flat section.closing h2, html.t-flat .ncard__t,
html.t-flat .metric__v, html.t-flat .ofield__k{
  text-transform:uppercase !important;
  letter-spacing:-.012em !important;
}

/* ==========================================================================
   Laufbaender am Scrollweg.
   Runter = nach rechts, hoch = nach links. Das Verhalten der Logoleiste,
   jetzt auch fuer Schrift. Die Bewegung kommt aus motion.js (drift()).
   ========================================================================== */
html.t-flat body .hw-drift{
  width:100vw;margin-left:calc(50% - 50vw);
  overflow:hidden;white-space:nowrap;
  margin-bottom:clamp(24px,3vw,44px);
}
html.t-flat body .drift__track{display:inline-flex;align-items:baseline;will-change:transform}
html.t-flat body .drift__i,
html.t-flat body .drift__d{
  flex:0 0 auto;
  font-family:"Suisse Mono",monospace;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(var(--ink-rgb),.55);
  line-height:1;padding-right:.9em;
}
html.t-flat body .drift__d{color:rgba(var(--ink-rgb),.5);padding-right:.9em}

/* ==========================================================================
   Versalien nur dort, wo sie tragen.
   Die Riesenzeile und die Mono-Ebene stehen gross. Die Aussagen der
   Sektionen stehen wieder gemischt — durchgehend gross war zu laut.
   ========================================================================== */
html.t-flat .stmt, html.t-flat .hero-claim,
html.t-flat .studio-main, html.t-flat .cbig, html.t-flat .hw-title,
html.t-flat .caps-lead, html.t-flat .cap__t, html.t-flat .ed-display,
html.t-flat .ed-statement, html.t-flat .vt-stmt, html.t-flat .ed-lhead,
html.t-flat .sa-title, html.t-flat .wrow__name, html.t-flat .work-hero h1,
html.t-flat .article-hero h1, html.t-flat .case-hero h1,
html.t-flat section.closing h2, html.t-flat .ncard__t,
html.t-flat .ofield__k{
  text-transform:none !important;
  letter-spacing:-.025em !important;
}
/* gross bleiben: die Riesenzeile und die Zahlen */
html.t-flat .hero-giant,
html.t-flat .metric__v{
  text-transform:uppercase !important;letter-spacing:-.045em !important;
}

/* ==========================================================================
   Eine Haarlinie ueber jedem Inhaltsabschnitt.
   Practice hatte sie, die anderen nicht — jetzt alle gleich.
   ========================================================================== */
/* Keine Trennlinien zwischen den Abschnitten — die Tonstufe trennt. */
html.t-flat body section.studioblk,
html.t-flat body section.home-work,
html.t-flat body section.home-caps,
html.t-flat body section.contactblk,
html.t-flat body section.project-strip{border-top:0 !important}

/* --- Work: der Einstieg traegt nur noch die Aussage, dafuer groesser ----- */
html.t-flat body .work-vhero .ed-costmt{display:block !important}
html.t-flat body .work-vhero .ed-costmt .stmt{
  font-size:clamp(40px,5.6vw,96px) !important;
  line-height:1.02 !important;letter-spacing:-.035em !important;
  max-width:20ch !important;
}

/* --- Weiches Ausklappen: die Huelle traegt die Hoehenbewegung ----------- */
html.t-flat body details.cap .cap__wrap{
  overflow:hidden;
  transition:height .5s var(--mo-ease,cubic-bezier(.19,1,.22,1));
}
html.t-flat body details.cap .cap__more{margin-top:0 !important}

/* --- Schrift, die beim Scrollen mitgeht --------------------------------- */
html.t-flat body .stmt,
html.t-flat body .hw-title,
html.t-flat body .cbig,
html.t-flat body .studio-main,
html.t-flat body .caps-lead,
html.t-flat body .ncard__t,
html.t-flat body .hero-giant{
  will-change:transform;
}
@media(prefers-reduced-motion:reduce){
  html.t-flat body .stmt,
  html.t-flat body .hero-giant{transform:none !important}
  html.t-flat body details.cap .cap__wrap{transition:none}
}

/* ==========================================================================
   Der Film steht fest, der Inhalt schiebt sich darueber.
   Bisher lief der Hero mit nach oben weg — das war der Grund, warum sich das
   Scrollen falsch angefuehlt hat. Jetzt ist die Buehne fest im Fenster
   verankert, die Sektion darunter ist nur noch der Platzhalter fuer ihre
   Hoehe, und alles Folgende liegt mit eigener Flaeche darueber.
   ========================================================================== */
html.t-flat body section.vhero--over{
  position:relative !important;
  height:100svh !important;
  z-index:0 !important;
  background:var(--surface) !important;
  overflow:visible !important;
}
html.t-flat body section.vhero--over .vhero-pin{
  position:fixed !important;
  top:0 !important;left:0 !important;right:0 !important;
  height:100svh !important;
  z-index:0 !important;
  overflow:hidden !important;
}
/* Alles nach dem Hero traegt eine eigene Flaeche und liegt darueber */
html.t-flat body section.vhero--over ~ section,
html.t-flat body section.vhero--over ~ footer{
  position:relative !important;
  z-index:2 !important;
  background:var(--surface);
}
/* die abgesetzten Toene behalten ihren eigenen Wert */
html.t-flat body section.vhero--over ~ section.home-caps{background:var(--raise-1) !important}
html.t-flat body section.vhero--over ~ section.closing{background:var(--raise-2) !important}
/* die Bildbaender bleiben durchsichtig fuer ihr eigenes festes Bild */
html.t-flat body section.vhero--over ~ section.fixband{background:var(--surface) !important}

@media(prefers-reduced-motion:reduce){
  html.t-flat body section.vhero--over .vhero-pin{position:relative !important}
}

/* --- Der Film steht nackt ------------------------------------------------
   Ohne Schrift braucht er keinen Verlauf mehr, der sie traegt. Es bleibt
   nur eine leichte Abdunklung oben, damit der Header sicher lesbar ist. */
html.t-flat body .vhero--over .vhero-stage::after{
  background:linear-gradient(to bottom,
    rgba(0,0,0,.42) 0%, rgba(0,0,0,.14) 16%, rgba(0,0,0,0) 34%) !important;
}

/* ==========================================================================
   VARIANTEN der Startseite (eigene Dateien, Bestand unberuehrt).
   v-ueber : der Inhalt startet ein Drittel ueber dem Film
   v-weiss : der Inhalt steht hell
   ========================================================================== */

/* --- ein Drittel drueber ------------------------------------------------
   Der Film bleibt Vollbild und fest; nur der Platzhalter der Hero-Sektion
   wird kuerzer, dadurch deckt der Inhalt beim Laden das untere Drittel. */
html.t-flat body.v-ueber section.vhero--over{height:67svh !important}

/* --- helle Fassung ------------------------------------------------------
   Nur der Inhalt nach dem Film dreht, der Film selbst bleibt wie er ist. */
html.t-flat body.v-weiss section.vhero--over ~ section,
html.t-flat body.v-weiss section.vhero--over ~ footer{
  --surface:var(--white);
  --ink:var(--black);
  --ink-rgb:var(--black-rgb);
  background:var(--white) !important;
  color:var(--black) !important;
}
html.t-flat body.v-weiss section.vhero--over ~ section.home-caps{background:#f2f2f0 !important}
html.t-flat body.v-weiss section.vhero--over ~ section.closing{background:#e9e9e6 !important}
/* die Bildbaender behalten ihr Bild, brauchen aber die helle Flaeche darunter */
html.t-flat body.v-weiss section.vhero--over ~ section.fixband{background:var(--white) !important}
/* Kundenlogos drehen auf dunkel */
html.t-flat body.v-weiss .logo-set img{filter:grayscale(1) brightness(0) !important;opacity:.5 !important}
/* der Header steht ueber dem Film weiterhin hell */
html.t-flat body.v-weiss header.top,
html.t-flat body.v-weiss header.top .logo,
html.t-flat body.v-weiss header.top .navc a,
html.t-flat body.v-weiss header.top nav a{color:#fff !important}
html.t-flat body.v-weiss header.top .logo svg path{fill:#fff !important}

/* ==========================================================================
   Alle Seiten starten gleich.
   Das Bild haengt fest im Fenster, die erste Sektion deckt beim Laden genau
   die Haelfte. Scrollt man weiter, schiebt sich alles darueber; scrollt man
   zurueck, liegt das Bild wieder frei.
   ========================================================================== */
html.t-flat body section.vhero--over{
  position:relative !important;
  height:50svh !important;
  z-index:0 !important;
  background:var(--surface) !important;
  overflow:visible !important;
}
html.t-flat body section.vhero--over .vhero-pin{
  position:fixed !important;top:0 !important;left:0 !important;right:0 !important;
  height:100svh !important;z-index:0 !important;overflow:hidden !important;
}
html.t-flat body section.vhero--over ~ section,
html.t-flat body section.vhero--over ~ footer,
html.t-flat body section.vhero--over ~ main{
  position:relative !important;z-index:2 !important;background:var(--surface);
}
html.t-flat body section.vhero--over ~ main > section{background:var(--surface)}
html.t-flat body main > section.vhero--over ~ section{position:relative;z-index:2;background:var(--surface)}

/* Der Kopf der Unterseiten sitzt in der ersten Sektion, im Muster des
   Startseiten-Statements: Aussage links, Einordnung rechts. */
html.t-flat body .seitenkopf{
  display:grid !important;
  grid-template-columns:1.5fr 1fr !important;
  column-gap:clamp(24px,4vw,58px) !important;
  align-items:end !important;
  padding-bottom:clamp(48px,6vw,96px) !important;
}
html.t-flat body .seitenkopf .side{display:grid;gap:1.1em;align-content:end}
@media(max-width:900px){
  html.t-flat body .seitenkopf{grid-template-columns:1fr !important;row-gap:26px}
}

/* Das Steinband am Ende darf hoeher stehen */
html.t-flat body .fixband:last-of-type{height:clamp(360px,66vh,720px) !important}

/* ==========================================================================
   Korrekturen nach dem Umbau auf den gemeinsamen Einstieg.
   Ganz am Ende der Datei — diese Regeln gelten verbindlich.
   ========================================================================== */

/* 1 — Der Hero ist wieder volle Hoehe. Die halbe Ueberdeckung kommt aus der
       Startposition (motion.js), nicht aus einem verkuerzten Platzhalter.
       Dadurch laesst sich das Bild nach oben ganz freiscrollen. */
html.t-flat body section.vhero--over{height:100svh !important}

/* 2 — Der Footer lag hinter dem festen Bild: er ist auf den Unterseiten kein
       Geschwister des Heros und bekam deshalb keine Ebene. Jetzt immer. */
html.t-flat body footer.site-footer{position:relative !important;z-index:2 !important}
html.t-flat body main{position:relative;z-index:auto}

/* 3 — Der Seitenkopf stand ohne Aussenlinie am Rand und rutschte auf
       Contact als Rasterzelle in die Spalten. Eigenstaendig gesetzt: */
html.t-flat body .seitenkopf{
  grid-column:1/-1 !important;
  width:min(90vw,1500px) !important;
  margin-inline:auto !important;
  padding-inline:25px !important;
  box-sizing:border-box !important;
  padding-top:clamp(70px,8vw,130px) !important;
}

/* 4 — Logoleiste und Selected Work auf der helleren Stufe, als Baender */
html.t-flat body section.project-strip,
html.t-flat body section.home-work{background:var(--raise-1) !important}
html.t-flat body .hw-drift{
  padding-block:clamp(18px,2.4vw,36px);
}

/* 5 — Der Auflauf der Kacheln riss ab: die Uebergangsregel hing am
       Startzustand und fiel mit ihm weg. Sie gehoert auf die Kachel selbst. */
/* Kein Dauer-Uebergang mehr auf der Kachel — der liess sie beim Setzen des
   Startzustands sichtbar ausfaden. Der Uebergang sitzt jetzt auf .is-in. */
html.t-flat body .ncard{transition:none !important}

/* 6 — Jedes Bildband steht fest, ohne Ausnahme */
html.t-flat body .ed-band{
  position:relative !important;overflow:hidden !important;clip-path:inset(0) !important;
  height:clamp(272px,50vh,528px) !important;
}
html.t-flat body .ed-band .ed-band-media{position:static !important;inset:auto !important}
html.t-flat body .ed-band .ed-band-media img{
  position:fixed !important;top:0 !important;left:0 !important;
  width:100vw !important;height:100vh !important;object-fit:cover !important;z-index:0 !important;
}
@media(max-width:860px),(hover:none),(prefers-reduced-motion:reduce){
  html.t-flat body .ed-band{clip-path:none !important}
  html.t-flat body .ed-band .ed-band-media img{position:absolute !important;width:100% !important;height:100% !important}
}

/* 7 — Work: Luft unter der Liste */
html.t-flat body .work-list-sec{padding-bottom:clamp(90px,10vw,170px) !important}

/* ==========================================================================
   Split — halbe Seite Bild, halbe Seite Text.
   Das Bild laeuft buendig bis zum Fensterrand, der Text sitzt auf der
   Aussenlinie der anderen Haelfte. .split--links = Bild links,
   .split--rechts = Bild rechts; im Wechsel gesetzt.
   ========================================================================== */
html.t-flat body .split{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  align-items:stretch !important;
  position:relative;z-index:2;background:var(--surface);
  min-height:clamp(460px,86vh,820px);
}
html.t-flat body .split__media{position:relative;overflow:hidden}
html.t-flat body .split__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.72);
}
html.t-flat body .split__body{
  display:grid;align-content:center;gap:clamp(18px,2vw,30px);
  padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(56px,7vw,110px);
}
/* Text sitzt auf der Aussenlinie: innen normaler Spaltenabstand,
   aussen exakt die Kante der 90vw-Linie */
html.t-flat body .split--links .split__body{
  padding-left:clamp(34px,4vw,72px);
  padding-right:calc((100vw - min(90vw,1500px)) / 2 + 25px);
}
html.t-flat body .split--rechts .split__body{
  padding-right:clamp(34px,4vw,72px);
  padding-left:calc((100vw - min(90vw,1500px)) / 2 + 25px);
}
/* Bild rechts: die Spaltenreihenfolge dreht, das Markup bleibt gleich */
html.t-flat body .split--rechts .split__media{order:2}
html.t-flat body .split--rechts .split__body{order:1}
html.t-flat body .split .stmt{margin:0 !important;max-width:none !important}
html.t-flat body .split .ed-body{margin:0 !important;max-width:44ch !important}
@media(max-width:860px){
  html.t-flat body .split{grid-template-columns:1fr !important;min-height:0}
  html.t-flat body .split__media{aspect-ratio:4/3;order:1 !important}
  html.t-flat body .split__body{order:2 !important;
    padding-inline:calc((100vw - 90vw)/2 + 0px) !important}
}

/* --- Contact: der Kopf gehoert in Zeile 1 --------------------------------
   Kontaktwege und Ablauf waren fest auf Rasterzeile 1 gesetzt; der neue
   Kopf fiel dadurch automatisch UNTER den Inhalt. Jetzt: Kopf Zeile 1,
   Inhalt Zeile 2. */
html.t-flat body .c-layout .seitenkopf{grid-row:1 !important}
html.t-flat body .c-layout .c-routes{grid-row:2 !important;top:84px}
html.t-flat body .c-layout .c-story{grid-row:2 !important}

/* --- Sektionen nach dem festen Hero laufen bis zum Rand ------------------
   .cgrid begrenzte die SEKTION auf die Innenlinie — links und rechts davon
   schien das feste Hero-Bild durch. Die Flaeche gehoert auf volle Breite,
   die Begrenzung in den Innenabstand. */
html.t-flat body section.c-layout.cgrid{
  width:100% !important;max-width:none !important;margin-inline:0 !important;
  padding-inline:calc((100vw - min(90vw,1500px)) / 2 + 25px) !important;
  box-sizing:border-box !important;
  padding-bottom:clamp(90px,10vw,170px) !important;
}
/* der Seitenkopf im Grid braucht dadurch keinen eigenen Rand mehr */
html.t-flat body .c-layout .seitenkopf{
  width:100% !important;padding-inline:0 !important;
}

/* --- Kein durchsichtiger Aussenabstand zwischen Sektionen ----------------
   Der Abstand ueber dem Abschluss war ein margin — Margins haben keine
   Flaeche, dahinter schien das feste Hero-Bild durch. Der Abstand kommt
   jetzt aus dem Innenabstand der Sektion davor. */
html.t-flat body.work-page main > section.closing{margin-top:0 !important}
html.t-flat body section.closing{margin-top:0 !important}

/* ==========================================================================
   Overview (Projektseiten) — sitzt UNTER der Galerie, vor Related.
   Links der Overview-Absatz mit dem Site-Link, rechts gestapelt:
   Outcome, Scope, Credits. Kein Sector (steht schon in den Tags oben).
   ========================================================================== */
html.t-flat body .overview{
  position:relative;z-index:2;background:var(--surface);
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(40px,5vw,90px);row-gap:clamp(40px,4.6vw,72px);
  padding-block:clamp(90px,11vw,180px);
  padding-inline:calc((100vw - min(90vw,1500px)) / 2 + 25px);
}
html.t-flat body .ov__k{
  display:block;margin-bottom:.9em;
  font-family:"Suisse Mono",monospace;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(var(--ink-rgb),.55);
}
html.t-flat body .ov__text{
  margin:0;font-size:clamp(17px,1.35vw,21px);line-height:1.55;
  color:var(--ink);max-width:52ch;
}
html.t-flat body .ov__lead .case-site-link{margin-top:34px;color:var(--ink)}
html.t-flat body .ov__meta{
  display:grid;gap:clamp(32px,3.4vw,54px);align-content:start;
}
html.t-flat body .ov__meta p{margin:0;color:rgba(var(--ink-rgb),.85);line-height:1.7;max-width:52ch}
html.t-flat body .ov__credits{
  list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(24px,3vw,48px);
  color:rgba(var(--ink-rgb),.85);line-height:1.7;
}
@media(max-width:860px){
  html.t-flat body .overview{grid-template-columns:1fr}
  html.t-flat body .ov__credits{columns:1}
}


/* ==========================================================================
   Review-Runde: Startseite, Studio, Contact, Journal.
   ========================================================================== */

/* --- "Selected work" laeuft in Ueberschriftgroesse ------------------------
   Das Laufband stand in der Mono-Stufe (12px) und wirkte neben allem anderen
   winzig. Jetzt dieselbe Groesse wie jede Ueberschrift der Site. */
html.t-flat body .drift__i,
html.t-flat body .drift__d{
  font-family:"Suisse","Helvetica Neue",Arial,sans-serif !important;
  font-size:var(--t-head) !important;line-height:1.05 !important;
  letter-spacing:var(--t-head-ls) !important;text-transform:none !important;
  color:var(--ink) !important;padding-right:.55em !important;
}
html.t-flat body .drift__d{color:rgba(var(--ink-rgb),.38) !important}
html.t-flat body .hw-drift{padding-block:clamp(10px,1.2vw,18px) !important}

/* --- Practice: zwei Drittel breit, rechts, nur Titel und Plus ------------
   Nummer und Kurztext sind aus der Zeile raus; der Kurztext steht jetzt im
   Aufklappteil. Das Plus ist groesser, duenner und mittig zur Zeile. */
html.t-flat body .caps-grid{width:66% !important;margin-left:auto !important}
html.t-flat body details.cap{display:block !important;padding:0 !important}
html.t-flat body details.cap > summary{
  display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;column-gap:24px !important;
  padding:clamp(22px,2.4vw,36px) 0 !important;
  cursor:pointer;list-style:none;
}
html.t-flat body details.cap .cap__n,
html.t-flat body details.cap > summary .cap__b{display:none !important}
html.t-flat body details.cap .cap__t{grid-column:1 !important;margin:0 !important}
html.t-flat body details.cap .cap__x{
  grid-column:2 !important;grid-row:1 !important;align-self:center !important;justify-self:end !important;
  width:22px !important;height:22px !important;margin:0 !important;
}
html.t-flat body details.cap .cap__x::before{width:22px !important;height:1px !important;background:rgba(var(--ink-rgb),.5) !important}
html.t-flat body details.cap .cap__x::after{width:1px !important;height:22px !important;background:rgba(var(--ink-rgb),.5) !important}
html.t-flat body details.cap .cap__more{
  margin:0 0 clamp(26px,3vw,44px) !important;padding:0 !important;
  max-width:52ch !important;display:grid;gap:1em;
}
html.t-flat body details.cap .cap__more .cap__b{display:block !important;margin:0 !important;color:var(--ink) !important;max-width:none !important}
html.t-flat body details.cap .cap__more p{margin:0}
@media(max-width:900px){
  html.t-flat body .caps-grid{width:100% !important}
}

/* --- Studio: Quality und Decision auf der Linie von "Work with us" -------
   Dieselbe Spaltenteilung wie der Seitenkopf (1.5fr / 1fr, gleicher Abstand),
   die Felder stehen in der rechten Spalte — damit liegt ihre Kante auf der
   des Textlinks darueber, bei jeder Fensterbreite. */
html.t-flat body .ofields-row{
  display:grid;grid-template-columns:1.5fr 1fr;
  column-gap:clamp(24px,4vw,58px);
  margin-top:clamp(46px,5.2vw,84px);
}
html.t-flat body .ofields-row .ofields{
  grid-column:2;max-width:none !important;
  grid-template-columns:1fr !important;row-gap:clamp(30px,3.4vw,50px) !important;
}
@media(max-width:900px){
  html.t-flat body .ofields-row{grid-template-columns:1fr}
  html.t-flat body .ofields-row .ofields{grid-column:1}
}

/* --- Kleine Zeile ueber dem Abschluss ------------------------------------ */
html.t-flat body section.closing .closing__k{
  display:block;margin:0 0 clamp(26px,3vw,44px);
  font-family:"Suisse Mono",monospace;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(var(--ink-rgb),.55);
}

/* --- Contact: eigener Ton, mehr Luft, breiteres Formular ----------------- */
html.t-flat body section.c-layout{background:var(--raise-1) !important}
html.t-flat body section.c-layout.cgrid{padding-bottom:clamp(130px,14vw,220px) !important}
html.t-flat body .c-story{gap:clamp(70px,8vw,120px) !important}
html.t-flat body .cform{max-width:46rem !important;gap:clamp(36px,4.2vw,60px) !important}
html.t-flat body .cfield{gap:.9em !important}
html.t-flat body .cfield input,
html.t-flat body .cfield textarea{padding-block:.7em !important;font-size:clamp(17px,1.3vw,21px) !important}
html.t-flat body .csteps{margin-top:clamp(70px,8vw,120px) !important}

/* --- Journal: Bilder statt grauer Platzhalter, Next note mittig ---------- */
html.t-flat body .jstrip-wrap{padding:clamp(20px,2.4vw,40px) 0 0}
html.t-flat body .jstrip{
  height:auto !important;min-height:0 !important;aspect-ratio:21/9;
  background:var(--raise-1) !important;border-radius:0 !important;overflow:hidden;
}
html.t-flat body .jstrip img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.66) hue-rotate(-8deg) contrast(1.04)}
html.t-flat body section.next{padding:clamp(60px,7vw,120px) 0 clamp(120px,14vw,220px) !important}
html.t-flat body section.next .frame{text-align:center}
html.t-flat body section.next .frame > a{
  display:inline-block !important;border:0 !important;padding:0 !important;
  max-width:22ch;text-wrap:balance;
}


/* ==========================================================================
   Review-Runde 2.
   ========================================================================== */

/* --- Practice: alles rechts, auch Label und Aussage ---------------------- */
html.t-flat section.home-caps .frame{
  display:grid !important;grid-template-columns:1fr 2fr !important;
  column-gap:clamp(24px,3vw,56px) !important;
}
html.t-flat section.home-caps .frame > *{grid-column:2}
html.t-flat body .caps-grid{width:100% !important;margin-left:0 !important}
html.t-flat section.home-caps .caps-lead{max-width:22ch !important}
@media(max-width:900px){
  html.t-flat section.home-caps .frame{grid-template-columns:1fr !important}
  html.t-flat section.home-caps .frame > *{grid-column:1}
}

/* --- Seitenkopf: beide Spalten oben buendig ------------------------------ */
html.t-flat body .seitenkopf{align-items:start !important}
html.t-flat body .seitenkopf .side{align-content:start !important}

/* --- "halbrechts": Inhalt beginnt auf der Seitenmitte --------------------
   Wie die Antwort im Abschluss (New business). Nutzen Studio fuer Quality /
   Decision und den Method-Absatz. */
html.t-flat body .halbrechts{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(24px,4vw,58px);
  margin-top:clamp(46px,5.2vw,84px);
}
html.t-flat body .halbrechts > :last-child{grid-column:2}
html.t-flat body .halbrechts .ofields{
  max-width:none !important;grid-template-columns:1fr !important;
  row-gap:clamp(30px,3.4vw,50px) !important;
}
html.t-flat body .halbrechts .owide{max-width:none !important;margin:0 !important}
@media(max-width:900px){
  html.t-flat body .halbrechts{grid-template-columns:1fr}
  html.t-flat body .halbrechts > :last-child{grid-column:1}
}

/* --- Approach (Split): Label links wie in jedem anderen Block ------------ */
html.t-flat body .split__body{
  grid-template-columns:12% minmax(0,1fr) !important;
  column-gap:clamp(24px,3vw,56px) !important;
  row-gap:clamp(18px,2vw,30px) !important;
}
html.t-flat body .split__body > .oblock__label{grid-column:1;grid-row:1}
html.t-flat body .split__body > .stmt,
html.t-flat body .split__body > .ed-body{grid-column:2}
@media(max-width:900px){
  html.t-flat body .split__body{grid-template-columns:1fr !important}
  html.t-flat body .split__body > *{grid-column:1 !important}
}

/* --- Gedimmter Auftakt in den Ueberschriften ----------------------------- */
html.t-flat .dim{color:rgba(var(--ink-rgb),.46) !important}

/* --- Contact: Seitentext groesser und weiter links, Luft, Formular als Feld */
html.t-flat body .c-layout .seitenkopf{
  grid-template-columns:1.2fr 1fr !important;
  padding-bottom:clamp(90px,10vw,160px) !important;
}
html.t-flat body .c-layout .seitenkopf .side .ed-body{
  font-size:clamp(17px,1.3vw,21px) !important;line-height:1.5 !important;
}
html.t-flat body .cform{
  background:var(--raise-2);
  padding:clamp(28px,3.4vw,56px) !important;box-sizing:border-box;
  max-width:52rem !important;
}

/* --- News: kein heller Kasten hinter dem noch verdeckten Bild ------------ */
html.t-flat .ncard__media{background:transparent !important}


/* ==========================================================================
   Review-Runde 3.
   ========================================================================== */

/* --- Practice: Label und Aussage links, Liste rechts ---------------------- */
html.t-flat section.home-caps .frame > .lab,
html.t-flat section.home-caps .frame > .caps-lead{grid-column:1 !important}
html.t-flat section.home-caps .frame > .caps-grid{grid-column:2 !important;grid-row:1 / span 2 !important}
html.t-flat section.home-caps .caps-lead{max-width:16ch !important;margin-bottom:0 !important}
@media(max-width:900px){
  html.t-flat section.home-caps .frame > *{grid-column:1 !important;grid-row:auto !important}
}

/* --- Blocklabels: IMMER ueber der Ueberschrift, Menuegroesse, eingerueckt --
   Bisher stand das Label mal links daneben (Beliefs, Method), mal darueber
   (Approach). Jetzt ueberall darueber, 11px wie das Menue, auf derselben
   Kante wie die Ueberschrift. */
html.t-flat body .oblock{
  grid-template-columns:1fr !important;
  padding-left:calc(12% + clamp(24px,3vw,56px));   /* die gewohnte Einrueckung bleibt */
}
html.t-flat body .oblock__label{margin-bottom:clamp(18px,2vw,28px) !important}
html.t-flat body .split__body{grid-template-columns:1fr !important}
html.t-flat body .split__body > .oblock__label,
html.t-flat body .split__body > .stmt,
html.t-flat body .split__body > .ed-body{grid-column:1 !important;grid-row:auto !important}
html.t-flat body .halbrechts{margin-left:calc(12% + clamp(24px,3vw,56px))}
html.t-flat body .halbrechts > :last-child{grid-column:2}
html.t-flat body .oblock__label,
html.t-flat body .closing__k,
html.t-flat body .strip-kicker,
html.t-flat body .lab,
html.t-flat body .kopf__k,
html.t-flat body .legal__k,
html.t-flat body .seitenkopf .ed-mono{
  font-family:"Suisse Mono",monospace !important;font-size:11px !important;
  letter-spacing:.06em !important;text-transform:uppercase !important;
  color:rgba(var(--ink-rgb),.55) !important;
}
@media(max-width:900px){
  html.t-flat body .oblock,html.t-flat body .halbrechts{padding-left:0;margin-left:0}
}

/* --- Abschluss: weniger Masse -------------------------------------------- */
html.t-flat body section.closing{
  padding-top:clamp(80px,9vw,150px) !important;
  padding-bottom:clamp(96px,11vw,180px) !important;
}
html.t-flat section.closing h2{width:52% !important}

/* --- Seitenkopf mit Zeile darueber (News, Contact) ------------------------ */
html.t-flat body .kopf__k{display:block;margin:0 0 clamp(18px,2vw,28px)}

/* --- Contact: gestapelt und eingerueckt, ganze Sektion abgesetzt ---------- */
html.t-flat body section.c-layout{background:var(--raise-2) !important}
html.t-flat body .c-layout .seitenkopf{display:block !important;padding-bottom:clamp(100px,11vw,180px) !important}
html.t-flat body .c-layout .seitenkopf .kopf__k,
html.t-flat body .c-layout .seitenkopf .stmt{margin-left:33.33% !important;max-width:none !important}
html.t-flat body .c-layout .seitenkopf .stmt{width:60% !important}
html.t-flat body .c-layout .seitenkopf .side{
  margin-left:50% !important;width:45% !important;
  margin-top:clamp(40px,5vw,72px) !important;
}
html.t-flat body .cform{background:transparent !important;padding:0 !important;max-width:46rem !important}
html.t-flat body .c-layout .c-routes{top:120px}
@media(max-width:900px){
  html.t-flat body .c-layout .seitenkopf .kopf__k,
  html.t-flat body .c-layout .seitenkopf .stmt,
  html.t-flat body .c-layout .seitenkopf .side{margin-left:0 !important;width:100% !important}
}

/* --- News-Kopf: eine Aussage, keine zwei Spalten -------------------------- */
html.t-flat body .kopf--einzeln{display:block !important}
html.t-flat body .kopf--einzeln .stmt{max-width:22ch}

/* --- Studio: erster Block sitzt direkt unter dem Bild ---------------------- */
html.t-flat body .ed-sec.is-light > .ed-in:first-child{padding-top:clamp(120px,13vw,200px)}


/* ==========================================================================
   Review-Runde 4 — EIN Spaltensystem.
   Zwei Positionen, ueberall gleich:
     Kante A = Innenlinie der Site (x=97 bei 1440): Ueberschriften, Labels.
     Spalte B = ein Drittel rein (x=541 bei 1440): Fliesstext.
   Das ist die "Practice-Spalte", die Enrico als richtig benannt hat. Rezept
   ueberall identisch: Raster 1fr 2fr mit demselben Spaltenabstand, Text in
   Spalte 2. Contact hat sein eigenes Zwoelferraster — dort gilt: Kopf auf
   der Linie des Formulars (Spalte 4), Antwort auf Spalte 7.
   ========================================================================== */

/* Studio: .ed-in war 25px breiter als die Innenlinie — deshalb lag dort alles
   neben dem Rest der Site. Jetzt dieselbe Kante. */
html.t-flat body .ed-in{padding-left:25px !important;padding-right:25px !important}

/* Ueberschriften und Labels auf Kante A, nicht mehr eingerueckt */
html.t-flat body .oblock{padding-left:0 !important}
html.t-flat body .oblock__body .stmt{max-width:22ch !important}

/* Fliesstext in Spalte B, breit bis zur rechten Kante */
html.t-flat body .halbrechts{
  grid-template-columns:1fr 2fr !important;
  column-gap:clamp(24px,3vw,56px) !important;
  margin-left:0 !important;
}
html.t-flat body .halbrechts .ofields p,
html.t-flat body .halbrechts .owide{max-width:64ch !important}

/* Startseite, Studio-Block: Aussage auf Kante A, Text in Spalte B, tiefer */
html.t-flat body section.studioblk .frame{
  display:grid !important;grid-template-columns:1fr 2fr !important;
  column-gap:clamp(24px,3vw,56px) !important;
}
html.t-flat body section.studioblk .frame > .ed-mono,
html.t-flat body section.studioblk .frame > .studio-main{grid-column:1 / -1 !important}
html.t-flat body section.studioblk .frame > .ed-intro-copy,
html.t-flat body section.studioblk .frame > p:last-child{grid-column:2 !important}
html.t-flat body section.studioblk .ed-intro-copy{
  margin-left:0 !important;max-width:64ch !important;
  margin-top:clamp(64px,7vw,110px) !important;
}
html.t-flat body section.studioblk .frame > p:last-child{margin-top:clamp(26px,3vw,44px) !important}

/* Contact: Kopf auf der Linie des Formulars, Antwort auf der Antwortspalte */
html.t-flat body .c-layout .seitenkopf{
  display:grid !important;grid-template-columns:repeat(12,minmax(0,1fr)) !important;
  column-gap:30px !important;row-gap:0 !important;
}
html.t-flat body .c-layout .seitenkopf .kopf__k,
html.t-flat body .c-layout .seitenkopf .stmt{grid-column:4 / 13 !important;margin-left:0 !important;width:auto !important}
html.t-flat body .c-layout .seitenkopf .stmt{max-width:22ch !important}
html.t-flat body .c-layout .seitenkopf .side{
  grid-column:7 / 13 !important;margin-left:0 !important;width:auto !important;
  margin-top:clamp(40px,5vw,72px) !important;
}
html.t-flat .cform__send{font-size:clamp(18px,1.4vw,22px) !important}

/* Abschluss: die Frage eine Stufe kleiner — ausdruecklich gewuenscht, die
   einzige Ausnahme von der einen Ueberschriftgroesse */
html.t-flat section.closing h2{
  font-size:clamp(26px,2.4vw,36px) !important;line-height:1.2 !important;
  width:44% !important;
}

@media(max-width:900px){
  html.t-flat body .halbrechts,
  html.t-flat body section.studioblk .frame{grid-template-columns:1fr !important}
  html.t-flat body section.studioblk .frame > *{grid-column:1 !important}
  html.t-flat body .c-layout .seitenkopf{display:block !important}
  html.t-flat section.closing h2{width:100% !important}
}

/* Der Studio-Block der Startseite hatte aus einer frueheren Runde noch eine
   feste Breite und einen 58%-Einzug fuer den Link — beides kollidiert mit
   dem Spaltensystem. Hier endgueltig aufgehoben. */
html.t-flat body section.studioblk .ed-intro-copy,
html.t-flat body section.studioblk .ed-intro-copy ~ p{
  width:auto !important;max-width:64ch !important;
  margin-left:0 !important;margin-right:0 !important;
}
html.t-flat body section.studioblk .ed-intro-copy .ed-body{max-width:none !important;width:auto !important}


/* ==========================================================================
   Review-Runde 5.
   ========================================================================== */

/* --- Practice: Aussage OBEN ueber die volle Breite, Liste darunter --------
   Vorher stand die Ueberschrift links neben der Liste und lief schmal in
   vier Zeilen. Jetzt: Label, darunter die Aussage breit, darunter erst die
   Liste in Spalte B. */
html.t-flat body section.home-caps .frame{
  display:grid !important;grid-template-columns:1fr 2fr !important;
  column-gap:clamp(24px,3vw,56px) !important;
}
html.t-flat body section.home-caps .frame > .lab{grid-column:1 / -1 !important;grid-row:1 !important}
html.t-flat body section.home-caps .frame > .caps-lead{
  grid-column:1 / -1 !important;grid-row:2 !important;
  max-width:26ch !important;margin:clamp(18px,2vw,28px) 0 clamp(70px,8vw,130px) !important;
}
html.t-flat body section.home-caps .frame > .caps-grid{grid-column:2 !important;grid-row:3 !important}

/* Im aufgeklappten Feld standen Kurzzeile und Absatz nebeneinander: .cap__b
   trug noch grid-column:3 aus der alten Zeilenfassung. Jetzt untereinander. */
html.t-flat body details.cap .cap__more .cap__b{
  grid-column:auto !important;grid-row:auto !important;
  max-width:52ch !important;
}

/* --- Mono-Zeilen wirklich auf 11px -------------------------------------
   type.css setzt "section.closing p" und die Feldlabels auf die Fliesstext-
   stufe und gewinnt mit einem Element mehr. Deshalb hier gleichgezogen. */
html.t-flat body section.closing p.closing__k,
html.t-flat body .ofields .ofield span.ofield__k,
html.t-flat body .caps-grid details.cap span.cap__n{
  font-family:"Suisse Mono",monospace !important;font-size:11px !important;
  letter-spacing:.06em !important;text-transform:uppercase !important;
  color:rgba(var(--ink-rgb),.55) !important;line-height:1.5 !important;
}

/* --- Studio: Beliefs als Klappliste wie Practice ------------------------ */
html.t-flat body .oblock__body > .caps-grid{margin-top:clamp(50px,6vw,90px)}

/* --- Notes: mehr Luft ---------------------------------------------------- */
html.t-flat body .ngrid{
  column-gap:clamp(24px,3vw,48px) !important;
  row-gap:clamp(74px,9vw,150px) !important;
  margin-top:clamp(50px,6vw,96px) !important;
}
html.t-flat body .ncard__media{margin-bottom:clamp(18px,2vw,30px) !important}
html.t-flat body .ncard{gap:.62em !important}


/* ==========================================================================
   Review-Runde 6.
   ========================================================================== */

/* --- Kein Schleier ueber den Bildbaendern --------------------------------
   Auf .fixband lagen zwei Daempfer: eine schwarze Flaeche mit 22 % und eine
   Entsaettigung. Beides raus, das Bild steht jetzt in voller Staerke. */
html.t-flat body .fixband::after{background:transparent !important}
html.t-flat body .fixband{filter:none !important}
html.t-flat body .fixband__img{filter:none !important}

/* --- Contact-Kopfbild: das Motiv sitzt bei 55 % Hoehe --------------------
   Die Seite startet auf halber Hoehe, sichtbar ist also nur der obere
   Bildbereich. Bei zentriertem Ausschnitt faellt das Motiv genau darunter.
   85 % schiebt den Ausschnitt so weit nach unten, dass es oben steht. */
html.t-flat body.kontakt-seite .vhero--over .hero-band{
  /* 3:4-Hochformat in einem 16:10-Fenster: es bleiben rund 47 % der Bild-
     hoehe sichtbar, und weil die Seite auf halber Hoehe startet, sieht man
     davon nur die obere Haelfte. 45 % legt die Figur genau dort hinein. */
  object-position:50% 45% !important;
}

/* --- Contact: dunklere Stufe, der helle Ton wirkte braun ----------------- */
html.t-flat body section.c-layout{background:var(--raise-1) !important}

/* --- Studio: die Klappliste sitzt rechts, wie auf der Startseite --------- */
/* Die Liste liegt neben .oblock, nicht darin — deshalb hier ueber .ed-in. */
html.t-flat body .ed-in > .caps-grid{
  width:66.6% !important;margin-left:auto !important;
  margin-top:clamp(50px,6vw,90px) !important;
}
@media(max-width:900px){
  html.t-flat body .ed-in > .caps-grid{width:100% !important}
}


/* --- Der rote Punkt steht immer, auf jeder Seite, von Anfang an ---------- */
html.t-flat body .badge{opacity:1 !important;visibility:visible !important}
html.t-flat body .badge.badge--hidden{
  transform:translateX(-50%) !important;opacity:1 !important;
}