/* 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}
}