/* ============ WORK-ÜBERSICHT (WP-1 Raster · WP-2 Index-Liste) ============ */
/* Seitenkopf ist ein <header>, bekommt den Rand daher hier statt über section */
.seitenkopf{padding-left:var(--rand);padding-right:var(--rand)}

.w-werke{padding-bottom:calc(110 * var(--u))}
.w-werke [hidden]{display:none}
/* Ansicht/Filter aus URL oder Speicher, bevor work.js läuft (Inline-Skript in WorkSeite.astro): Liste statt Raster, nur passende Zeilen.
   Das Raster filtert erst work.js, weil sich dort mit dem Filter auch das Muster ändert */
html[data-w-ansicht="index"] .w-raster{display:none}
html[data-w-ansicht="index"] .w-liste{display:block}
html[data-w-filter="case-studies"] .w-zeile:not([data-typ="case-studies"]),html[data-w-filter="imagery"] .w-zeile:not([data-typ="imagery"]){display:none}

/* Leiste: Filter ab der Kerbe-Spalte (x=200), Umschalter V-2 bündig rechts; 24 hoch = Umschalter inkl. Unterstrich.
   Abstand 80 zur H1 (+1, weil die H1 aus sub.css bei 1440 0,7 px kürzer läuft als in Figma → Leiste exakt auf y=478) */
.w-leiste{display:flex;justify-content:space-between;align-items:flex-start;height:calc(24 * var(--u));margin-top:calc(80 * var(--u));padding-left:calc(170 * var(--u))}
.w-leiste button{background:none;border:0;padding:0;font:inherit;color:var(--gedaempft);cursor:pointer;transition:color .15s}
.w-leiste button:hover,.w-leiste button[aria-pressed="true"]{color:var(--ink)}
.w-leiste button:focus-visible{outline:1.5px solid var(--ink);outline-offset:calc(4 * var(--u));border-radius:calc(2 * var(--u))}

/* Filter: Label 12/15 Versal 8 %, Zähler 10/12 hochgestellt (4 px höher, 4 px Abstand), aktiv unterstrichen */
.w-filter{display:flex;gap:calc(40 * var(--u));margin-top:calc(1 * var(--u))}
.w-filter button{display:inline-flex;align-items:flex-start;font-family:var(--font-b);font-weight:600;font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase}
.w-filter button[aria-pressed="true"] .w-fname{text-decoration:underline;text-decoration-thickness:1.25px;text-underline-offset:calc(2 * var(--u))}
.w-fzahl{font:600 calc(10 * var(--u))/calc(12 * var(--u)) var(--font-b);letter-spacing:0;color:var(--gedaempft);margin-left:calc(4 * var(--u));position:relative;top:-4px}

/* Ansichts-Umschalter: 16-px-Icons ohne Container, 20 px Abstand; Klickfläche je 4 px breiter, daher Lücke 12 und Ausgleich rechts */
.w-ansichten{display:flex;gap:calc(12 * var(--u));margin-right:-4px}
.w-leiste .w-ansicht{position:relative;display:flex;align-items:flex-start;height:calc(24 * var(--u));padding:0 calc(4 * var(--u))}
.w-ansicht svg{display:block}
.w-ansicht::after{content:"";position:absolute;left:calc(4 * var(--u));top:calc(21 * var(--u));width:calc(16 * var(--u));height:1.5px;background:currentColor;opacity:0}
.w-ansicht[aria-pressed="true"]::after{opacity:1}

/* Bühne: Wechsel von Ansicht/Filter als kurze Überblendung (2 × 120 ms) */
.w-buehne{transition:opacity .12s ease}
.w-buehne.blende{opacity:0}
.w-buehne.blende .reveal{transition:none}
@media (prefers-reduced-motion:reduce){.w-buehne{transition:none}}

/* ---------- Ansicht 1: versetztes Raster — 3 Spuren 450/420/450, groß = 900×570, klein = 450×317 ---------- */
.w-raster{display:grid;grid-template-columns:450fr 420fr 450fr;column-gap:var(--rand);row-gap:calc(90 * var(--u));align-items:start;margin-top:calc(39 * var(--u))}
.w-case{display:block}
.w-case.gross.links{grid-column:1 / 3}
.w-case.klein.rechts{grid-column:3}
.w-case.klein.links{grid-column:1}
.w-case.gross.rechts{grid-column:2 / 4}
.w-bild{border-radius:var(--radius);overflow:hidden;isolation:isolate;aspect-ratio:900/570}
.w-case.klein .w-bild{aspect-ratio:450/317}
.w-bild img,.w-zbild img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.w-case:hover .w-bild img{transform:scale(1.04)}
.w-meta{display:flex;justify-content:space-between;gap:calc(20 * var(--u));margin-top:calc(24 * var(--u));font-family:var(--font-b);font-weight:600;font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase}
.w-meta .w-typ{color:var(--gedaempft)}
/* Titel: die Sperrung nach dem letzten Zeichen einer Zeile darf überhängen (Figma rechnet sie beim Umbruch nicht mit).
   Obergrenze 520 für groß und klein wie auf der Startseite; klein ist bei 1440 ohnehin nur 450 breit */
.w-titel{font-family:var(--font-h);font-weight:500;font-size:var(--fs-kachel);line-height:var(--lh-kachel);letter-spacing:var(--ls-kachel);margin-top:calc(14 * var(--u));max-width:calc(520 * var(--u))}

/* ---------- Ansicht 2: Index-Liste — Zeile 140 hoch, Linie Ink 18 %, Spalten Bild · Text (x=200) · Typ (x=1080) · Pfeil ---------- */
.w-liste{margin-top:calc(31 * var(--u));margin-bottom:-1px;border-bottom:1px solid rgba(26,26,26,.18)}
.w-zeile{display:grid;grid-template-columns:calc(170 * var(--u)) 880fr 302fr calc(28 * var(--u));align-items:start;min-height:calc(140 * var(--u));padding:calc(19 * var(--u)) 0 calc(20 * var(--u));border-top:1px solid rgba(26,26,26,.18)}
.w-zbild{width:calc(160 * var(--u));height:calc(100 * var(--u));border-radius:var(--radius);overflow:hidden;isolation:isolate}
.w-zeile:hover .w-zbild img{transform:scale(1.04)}
.w-zmarke,.w-ztyp{display:block;font-family:var(--font-b);font-weight:600;font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase;padding-top:calc(3 * var(--u))}
.w-ztyp{color:var(--gedaempft)}
/* Titel 760 breit (bei 1440 bleiben 120 bis zum Typ); schrumpft die Spalte unter 1440, hält er mindestens 30 Abstand zum Typ */
.w-ztitel{font-family:var(--font-h);font-weight:500;font-size:var(--fs-zeile);line-height:var(--lh-zeile);letter-spacing:var(--ls-zeile);margin-top:calc(11 * var(--u));max-width:min(calc(760 * var(--u)), calc(100% - calc(30 * var(--u))))}
.w-pfeil{justify-self:end;font-family:var(--font-h);font-weight:500;font-size:calc(28 * var(--u));line-height:calc(32 * var(--u));transition:transform .25s ease}
.w-zeile:hover .w-pfeil{transform:translateX(calc(6 * var(--u)))}

/* Grobes Fallback unter 1100px — Mobile ist noch nicht designt */
@media (max-width:1100px){
  .w-leiste{padding-left:0;margin-top:calc(56 * var(--u))}
  .w-filter{gap:calc(24 * var(--u))}
  .w-raster{grid-template-columns:1fr;row-gap:calc(60 * var(--u))}
  .w-raster .w-case.gross,.w-raster .w-case.klein{grid-column:1 / -1}
  .w-case .w-titel{max-width:none}
  .w-zeile{grid-template-columns:calc(120 * var(--u)) 1fr calc(28 * var(--u));column-gap:calc(16 * var(--u))}
  .w-zbild{width:calc(120 * var(--u));height:calc(75 * var(--u))}
  .w-ztyp{grid-column:2;grid-row:2;padding-top:calc(8 * var(--u))}
  .w-pfeil{grid-column:3;grid-row:1}
  .w-ztitel{max-width:calc(760 * var(--u))}
}

/* ---------- Mobil (Figma W-M1 Raster / W-M2 Index, 13.10.) ---------- */
@media (max-width:760px){
  /* Leiste 40 unter der H1 (Umschalter 1 höher als die Filter), Inhalt 32 darunter */
  .w-leiste{margin-top:39px}
  .w-fzahl{margin-left:5px}
  /* Trefferflächen der Filter (B8, Optik unverändert): unsichtbare Fläche ::before, 44 hoch (Raster 32 darunter), die 24er-Lücke je zur Hälfte */
  .w-filter button{position:relative}
  .w-filter button::before{content:"";position:absolute;inset:-15.5px -12px}
  .w-werke{padding-bottom:80px}
  /* W-M1: alle Arbeiten untereinander im Desktop-Format (groß 900:570, klein 450:317; Artur 13.10.: quadratisch funktioniert auf der Übersicht nicht),
     Marke + Art 12 darunter, Titel 18/21 nach 8, 64 bis zur nächsten Kachel */
  .w-raster{margin-top:32px;row-gap:64px}
  .w-meta{margin-top:12px}
  .w-titel{margin-top:8px}
  /* W-M2: Zeile mit Linie, Bild 96 × 60, daneben Marke (Art rechtsbündig in derselben Zeile), Titel 18/22 nach 6; Pfeil entfällt */
  .w-liste{margin-top:32px}
  .w-zeile{grid-template-columns:96px minmax(0,1fr) auto;column-gap:12px;min-height:0;padding:15px 0 16px}
  .w-zbild{grid-column:1;grid-row:1;width:96px;height:60px}
  .w-zbild + div{grid-column:2 / 4;grid-row:1}
  .w-ztyp{grid-column:3;grid-row:1;justify-self:end;padding-top:0}
  .w-zmarke{padding-top:0;padding-right:80px}
  .w-ztitel{margin-top:6px;max-width:none}
  .w-pfeil{display:none}
}