/* Die Überschrift stand auf 78px — jetzt exakt die Werte der Startseite
   (.ed-costmt .stmt), damit beide Seiten dieselbe Stimme haben. */
.work-hero h1{
  font-size:clamp(30px,3.4vw,58px) !important;
  line-height:1.12 !important;
  letter-spacing:-.025em !important;
  font-family:"Suisse Medium","Suisse","Helvetica Neue",Arial,sans-serif !important;
  max-width:26ch;
}

/* ==========================================================================
   Work-Übersicht auf der Work-Seite: grosse Liste.
   Beim Überfahren einer Zeile läuft das Projektbild am Cursor mit (motion.js).
   Farben laufen über die Seitenvariablen, damit hell und dunkel automatisch
   stimmen.
   ========================================================================== */
/* Die Liste sitzt im .shell der Work-Seite und folgt deren Aussenlinie —
   die Seite hat ihr eigenes Raster (32px), nicht das .frame der Startseite. */
.wlist{
  width:100%;box-sizing:border-box;
  margin-top:clamp(26px,3.4vw,48px);
  border-top:0;
  border-bottom:0;
}
.wrow{
  display:grid;grid-template-columns:56px minmax(0,1fr) auto;
  align-items:baseline;gap:clamp(14px,2.4vw,40px);
  padding:clamp(16px,2vw,28px) 0;
  border-bottom:0;
  color:inherit;text-decoration:none;
  transition:padding-left .55s cubic-bezier(.19,1,.22,1),opacity .4s ease;
}
.wrow + .wrow{border-top:1px solid var(--line,rgba(244,244,242,.18))}
.wrow__n{
  font-family:"Suisse Mono",monospace;font-size:12px;line-height:1;
  letter-spacing:.04em;color:var(--muted,rgba(244,244,242,.55));
}
.wrow__name{
  font-size:clamp(30px,3.4vw,58px);line-height:1.12;letter-spacing:-.025em;
  font-family:"Suisse Medium","Suisse","Helvetica Neue",Arial,sans-serif;
}
.wrow__tags{
  font-family:"Suisse Mono",monospace;font-size:12px;line-height:1.5;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  text-align:right;white-space:nowrap;
}
/* Nur die überfahrene Zeile bleibt voll da — der Rest tritt zurück */
.wlist:hover .wrow{opacity:.4}
.wlist:hover .wrow:hover{opacity:1;padding-left:clamp(10px,1.4vw,22px)}

@media(max-width:860px){
  .wrow{grid-template-columns:44px minmax(0,1fr);gap:12px}
  .wrow__tags{grid-column:2;text-align:left;white-space:normal;padding-top:6px}
  .wlist:hover .wrow{opacity:1}
}

/* ==========================================================================
   Trennlinien nur zwischen den Arbeiten.
   Keine Linie oben, keine Linie unten: nur die Zeilen trennen sich.
   ========================================================================== */
html.t-flat .wlist{border-top:0 !important;border-bottom:0 !important}
html.t-flat .wrow{border-bottom:0 !important}
html.t-flat .wrow + .wrow{border-top:1px solid rgba(var(--ink-rgb),.16) !important}
html.t-flat nav.filters a{border-color:transparent !important;border-width:0 !important}
/* Die Zeilen brauchen jetzt ihren Abstand selbst, sonst kleben sie */
html.t-flat .wrow{padding-top:clamp(18px,1.7vw,26px) !important;padding-bottom:clamp(18px,1.7vw,26px) !important}
/* Der aktive Filter war unterstrichen — jetzt steht er einfach heller */
html.t-flat nav.filters a{opacity:.45}
html.t-flat nav.filters a:hover,
html.t-flat nav.filters a[aria-current],
html.t-flat nav.filters a:first-child{opacity:1}
/* Der Abschluss-Block bekommt wieder Luft und bleibt dunkel. */
/* 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}
/* Der Link behaelt seinen Hinweis, zeigt ihn aber erst beim Hover */
html.t-flat main > section.closing div a{border-bottom-color:transparent !important}
html.t-flat main > section.closing div a:hover{border-bottom-color:currentColor !important}

/* Dieselbe Liste traegt auch die News-Uebersicht */
html.t-flat .wlist{margin-top:clamp(24px,3vw,44px)}


/* ==========================================================================
   Work als Kacheln: zwei nebeneinander, Bild oben, Name und Felder darunter.
   Sie laufen von unten auf wie die Karten der Startseite (Skript: riseCards).
   Breite und Kante wie der Seitenkopf darueber.
   ========================================================================== */
html.t-flat .wgrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(20px,2.4vw,38px);row-gap:clamp(56px,6vw,96px);
  width:min(90vw,1500px);margin:clamp(34px,4vw,64px) auto 0;
  padding-inline:25px;box-sizing:border-box;
}
html.t-flat .wtile{display:block;color:var(--ink);text-decoration:none}
html.t-flat .wtile__media{
  position:relative;aspect-ratio:3/4;overflow:hidden;margin:0;   /* hochkant wie die Kacheln auf Notes */
  background:transparent;
}
html.t-flat .wtile__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.78) contrast(.98) brightness(.96);
  transition:transform .8s cubic-bezier(.19,1,.22,1);
}
html.t-flat .wtile:hover .wtile__media img{transform:scale(1.03)}
html.t-flat .wtile__meta{
  /* Nebeneinander brauchte "Fusion House" + Felder 393px bei 392px Kachel —
     der Name brach um. Untereinander passt es bei jeder Kachelbreite. */
  display:grid;gap:5px;padding-top:16px;
}
html.t-flat .wtile__meta h2{
  margin:0;font-weight:400;
  font-size:clamp(18px,1.5vw,22px) !important;line-height:1.2 !important;letter-spacing:-.015em !important;
}
html.t-flat .wtile__meta p{
  margin:0;font-family:"Suisse Mono",monospace;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(var(--ink-rgb),.55);text-align:left;
}
/* Auflauf: Karte hebt sich, Bild wird von unten freigegeben */
html.t-flat .wtile.rise:not(.is-in){opacity:0;transform:translateY(56px)}
html.t-flat .wtile.rise .wtile__media{clip-path:inset(100% 0 0 0)}
html.t-flat .wtile.rise .wtile__media img{transform:translateY(12%) scale(1.04)}
html.t-flat .wtile.is-in{opacity:1;transform:none;transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1)}
html.t-flat .wtile.is-in .wtile__media{clip-path:inset(0);transition:clip-path .9s cubic-bezier(.16,1,.3,1)}
html.t-flat .wtile.is-in:not(:hover) .wtile__media img{transform:none;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
@media(max-width:900px){html.t-flat .wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  html.t-flat .wgrid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html.t-flat .wtile.rise:not(.is-in){opacity:1;transform:none}
  html.t-flat .wtile.rise .wtile__media{clip-path:none}
  html.t-flat .wtile.rise .wtile__media img{transform:none}
}

/* ==========================================================================
   Die letzte Reihe.
   Sieben Arbeiten in drei Spalten lassen unten eine Kachel allein stehen,
   daneben zwei Luecken — es liest sich wie ein Fehler, nicht wie ein Ende.
   Bleibt eine einzelne uebrig, laeuft sie ueber die volle Breite und wird
   damit zum Abschluss. Die Regel greift nur in genau diesem Fall: kommt eine
   achte Arbeit dazu, ordnet sich das Raster von selbst wieder.
   ========================================================================== */
html.t-flat .wgrid > .wtile:last-child:nth-child(3n+1){
  grid-column:1 / -1;
}
html.t-flat .wgrid > .wtile:last-child:nth-child(3n+1) .wtile__media{
  aspect-ratio:16 / 7;
}
html.t-flat .wgrid > .wtile:last-child:nth-child(3n+1) .wtile__meta{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:baseline;
}
@media(max-width:900px){
  /* Zwei Spalten: dieselbe Ueberlegung, andere Rechnung. */
  html.t-flat .wgrid > .wtile:last-child:nth-child(3n+1){grid-column:auto}
  html.t-flat .wgrid > .wtile:last-child:nth-child(2n+1){grid-column:1 / -1}
  html.t-flat .wgrid > .wtile:last-child:nth-child(2n+1) .wtile__media{aspect-ratio:16 / 8}
}
@media(max-width:640px){
  html.t-flat .wgrid > .wtile:last-child{grid-column:auto}
  html.t-flat .wgrid > .wtile:last-child .wtile__media{aspect-ratio:3 / 4}
  /* Genauer schreiben als die Grundregel darueber, sonst behaelt die
     letzte Kachel ihre zwei Meta-Spalten und "Identity - Digital - Motion"
     rutscht auf dem Telefon in die Mitte. */
  html.t-flat .wgrid > .wtile:last-child:nth-child(3n+1) .wtile__meta,
  html.t-flat .wgrid > .wtile:last-child:nth-child(2n+1) .wtile__meta,
  html.t-flat .wgrid > .wtile:last-child .wtile__meta{grid-template-columns:1fr !important}
}