/* ============ EXPERTISE-BEREICHSSEITEN /services/<slug>/ — Vorlage nach Figma Strategy Entwurf 2 (431:6) + S-M1 (1245:5);
   Performance 1252:5 / P-M1 1252:178, Assortment 1252:301 / AS-M1 1252:474. Inhalte aus src/content/expertise/<slug>.json ============ */
/* Ohne JS kein Reveal und offene FAQ (die Klasse .js setzt das Inline-Skript im <head>) */
html:not(.js) .reveal{opacity:1;transform:none}
.seitenkopf{padding-left:var(--rand);padding-right:var(--rand)}

/* Leadbild 1380 × 776, 80 unter der H1 */
.b-leadbild{margin:calc(80 * var(--u)) var(--rand) 0;aspect-ratio:1380/776;border-radius:var(--radius);overflow:hidden}

/* ---------- Text: eine Spalte ab der Kerbe (x 200), 760 breit; Einleitung 163 unter dem Leadbild, Absätze 49 / 25 ---------- */
.b-text{padding:calc(163 * var(--u)) var(--rand) 0 calc(var(--rand) + 170 * var(--u))}
.b-text > p{max-width:calc(760 * var(--u));font-family:var(--font-b);font-weight:400;font-size:var(--fs-text-l);line-height:var(--lh-text-l);letter-spacing:var(--ls-text-l);color:rgba(26,26,26,.78)}
.b-text > .b-lead{font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);color:var(--ink)}
.b-text > p + p{margin-top:calc(25 * var(--u))}
.b-text > .b-lead + p{margin-top:calc(49 * var(--u))}

/* ---------- Results (T-1b): Kopf 121 unter dem Text, Einträge 120 hoch — Datum (+25) · Titel | Wert (+47) · Marke | Vergleichsbasis ---------- */
.b-results{max-width:calc(760 * var(--u));margin-top:calc(121 * var(--u))}
.b-r-kopf{display:flex;align-items:flex-start}
.b-live{flex:none;width:6px;height:6px;margin:calc(3 * var(--u)) calc(8 * var(--u)) 0 calc(18 * var(--u));border-radius:50%;background:var(--rot)}
.b-r-stand{margin-left:auto;color:var(--gedaempft)}
.b-r-liste{list-style:none;margin-top:calc(24 * var(--u))}
.b-r-eintrag{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;column-gap:calc(30 * var(--u));min-height:calc(120 * var(--u));border-top:1px solid rgba(26,26,26,.18)}
.b-r-datum,.b-r-marke{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}
.b-r-datum{grid-column:1 / -1;display:flex;gap:calc(14 * var(--u));margin-top:calc(24 * var(--u));color:var(--gedaempft)}
.b-r-neu{color:var(--ink)}
/* Datumszeile nur bei älteren Einträgen bzw. „New“; ohne sichtbaren Inhalt entfällt sie, der Titel rückt auf die Höhe der Datumszeile */
.b-r-datum:has(> [data-neu][hidden]:only-child){display:none}
.b-r-eintrag:has(> .b-r-datum > [data-neu][hidden]:only-child) > :is(.b-r-titel,.b-r-wert){margin-top:calc(24 * var(--u))}
.b-r-titel,.b-r-wert{grid-row:2;margin-top:calc(8 * var(--u));font-family:var(--font-h);font-weight:500;font-size:var(--fs-zeile);line-height:var(--lh-zeile);letter-spacing:var(--ls-zeile)}
.b-r-titel{grid-column:1}
.b-r-wert{grid-column:2;text-align:right;white-space:nowrap}
.b-r-marke{grid-column:1;grid-row:3;margin-top:calc(9 * var(--u))}
.b-r-basis{grid-column:1 / -1;grid-row:3;justify-self:end;margin-top:calc(5 * var(--u));font-family:var(--font-b);font-weight:400;font-size:var(--fs-text-xs);line-height:var(--lh-text-xs);letter-spacing:var(--ls-text-xs);color:var(--gedaempft);text-align:right}
/* Verlauf über die letzten zwei Einträge wie die Figma-Maske (Creme 0 → 80 % bei 60 % → 100 %), als Deckkraft je Eintrag;
   nur bei Feeds ab 5 Einträgen, kurze Feeds (2–4 KPIs) bleiben voll lesbar */
.b-r-liste:has(> .b-r-eintrag:nth-child(5)) > .b-r-eintrag:nth-last-child(2){-webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.333));mask-image:linear-gradient(#000,rgba(0,0,0,.333))}
.b-r-liste:has(> .b-r-eintrag:nth-child(5)) > .b-r-eintrag:last-child{-webkit-mask-image:linear-gradient(rgba(0,0,0,.333),rgba(0,0,0,.2) 20%,transparent);mask-image:linear-gradient(rgba(0,0,0,.333),rgba(0,0,0,.2) 20%,transparent)}

/* ---------- Services: 160 unter dem Feed, Label in der Kerbe auf Höhe der ersten Zeile, Zeilen 96 hoch (Linie + 30 + 35 + 30) ---------- */
.b-services{display:grid;grid-template-columns:calc(170 * var(--u)) minmax(0,1fr);align-items:start;padding-top:calc(160 * var(--u))}
.b-services .label.kerbe{float:none;width:auto;margin-top:calc(41 * var(--u))}
.b-s-liste{list-style:none;border-bottom:1px solid rgba(26,26,26,.18)}
.b-s-liste li{border-top:1px solid rgba(26,26,26,.18)}
.b-s-liste a,.b-s-eintrag{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(30 * var(--u));padding:calc(30 * var(--u)) 0;font-family:var(--font-h);font-weight:500;font-size:var(--fs-titel-m);line-height:var(--lh-titel-m);letter-spacing:var(--ls-titel-m)}
.b-s-pfeil{flex:none;letter-spacing:0;transition:transform .25s ease}
.b-s-liste a:hover .b-s-pfeil{transform:translateX(calc(6 * var(--u)))}
.b-s-liste a:focus-visible{outline:calc(2 * var(--u)) solid var(--ink);outline-offset:calc(4 * var(--u));border-radius:calc(2 * var(--u))}
.b-s-text{display:flex;align-items:flex-start;min-width:0}
/* Label „New“ hinter dem Namen (AI content), grau 60 %: 28 Abstand, auf Zeilenmitte */
.b-s-neu{flex:none;margin:calc(11 * var(--u)) 0 0 calc(28 * 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;color:var(--gedaempft);opacity:.6}
/* Bild-Variante (Imagery V-3), nur Desktop: Liste 833 (Linien enden 70 vor dem Bild), Bild 4:5 307 × 384 ganz rechts = Listenhöhe;
   aktive Zeile Ink + Pfeil direkt hinter dem Namen (27), die anderen 35 %; Hover wechselt Zeile + Bild (bereich.js), letzter Zustand bleibt */
@media (min-width:1101px){
  .b-services--bild{grid-template-columns:calc(170 * var(--u)) minmax(0,833fr) calc(70 * var(--u)) minmax(0,307fr)}
  .b-services--bild .b-s-liste{grid-column:2}
  .b-services--bild .b-s-liste a,.b-services--bild .b-s-eintrag{justify-content:flex-start;gap:calc(27 * var(--u))}
  .b-services--bild .b-s-name{transition:opacity .25s ease}
  .b-services--bild li:not(.aktiv) .b-s-name{opacity:.35}
  .b-services--bild .b-s-pfeil{transition:opacity .25s ease,transform .25s ease}
  .b-services--bild li:not(.aktiv) .b-s-pfeil{opacity:0}
  .b-s-bild{grid-column:4;grid-row:1;position:relative;aspect-ratio:307/384;border-radius:var(--radius);overflow:hidden;isolation:isolate}
  .b-s-bild img{position:absolute;inset:0;opacity:0;transition:opacity .4s ease}
  .b-s-bild img.aktiv{opacity:1}
}
@media (max-width:1100px){.b-s-bild{display:none}}

/* ---------- Featured work: Label 161 unter der letzten Linie, Karten 54 darunter (Work-Kartenstil) ----------
   3 Cases: links groß 900 (Bild 900 × 570, Titel 520) + „View all work“ unten bündig, rechts zwei kleine 450 (Bild 450 × 317), 60 Abstand
   2 Cases: zwei nebeneinander 675 (Bild 675 × 427), „View all work“ 36 unter der linken Karte */
.b-featured{padding-top:calc(161 * var(--u))}
.b-featured > .label{margin-bottom:calc(40 * var(--u))}
.b-f-raster{display:grid;grid-template-columns:minmax(0,900fr) minmax(0,450fr);column-gap:var(--rand)}
.b-featured--2 .b-f-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.b-f-spalte{display:flex;flex-direction:column;align-items:flex-start}
.b-f-spalte + .b-f-spalte{gap:calc(60 * var(--u))}
.b-f-karte{display:block;width:100%}
.b-f-bild{aspect-ratio:450/317;border-radius:var(--radius);overflow:hidden;isolation:isolate}
.b-f-gross .b-f-bild{aspect-ratio:900/570}
.b-featured--2 .b-f-bild{aspect-ratio:675/427}
.b-f-bild img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.b-f-karte:hover .b-f-bild img{transform:scale(1.04)}
.b-f-meta{display:flex;justify-content:space-between;gap:calc(20 * var(--u));margin-top:calc(25 * 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}
.b-f-typ{color:var(--gedaempft)}
.b-f-titel{max-width:calc(450 * var(--u));margin-top:calc(14 * var(--u));font-family:var(--font-h);font-weight:500;font-size:var(--fs-kachel);line-height:var(--lh-kachel);letter-spacing:var(--ls-kachel)}
.b-featured--3 .b-f-gross .b-f-titel{max-width:calc(520 * var(--u))}
.b-f-alle{margin-top:auto}
.b-featured--2 .b-f-alle{margin-top:calc(36 * var(--u))}
/* ab 4 Projekten: versetztes Raster wie Work/Startseite (Spuren 450 | 420 | 450): groß-klein, klein-groß, groß-klein; „View all work“ 58 darunter */
.b-featured--raster .b-f-raster{display:grid;grid-template-columns:minmax(0,450fr) minmax(0,420fr) minmax(0,450fr);column-gap:var(--rand);row-gap:calc(90 * var(--u));align-items:start}
.b-featured--raster .b-f-karte:nth-child(6n+1),.b-featured--raster .b-f-karte:nth-child(6n+5){grid-column:1 / 3}
.b-featured--raster .b-f-karte:nth-child(6n+2),.b-featured--raster .b-f-karte:nth-child(6n){grid-column:3}
.b-featured--raster .b-f-karte:nth-child(6n+3){grid-column:1}
.b-featured--raster .b-f-karte:nth-child(6n+4){grid-column:2 / 4}
.b-featured--raster .b-f-gross .b-f-titel{max-width:calc(520 * var(--u))}
.b-featured--raster .b-f-alle{margin-top:calc(58 * var(--u))}
.b-f-karte:focus-visible{outline:calc(2 * var(--u)) solid var(--ink);outline-offset:calc(4 * var(--u));border-radius:calc(2 * var(--u))}

/* ---------- FAQ: 150 unter den Karten, Label in der Kerbe (+29), Zeilen 72 hoch (Linie + 22 + 26 + 23), „+“ Archivo 24/30 rechtsbündig ---------- */
.b-faq{display:grid;grid-template-columns:calc(170 * var(--u)) minmax(0,1fr);align-items:start;padding-top:calc(150 * var(--u));padding-bottom:calc(144 * var(--u))}
.b-faq .label.kerbe{float:none;width:auto;margin-top:calc(29 * var(--u))}
.s-faq-liste{border-bottom:1px solid rgba(26,26,26,.18)}
.s-faq-zeile{border-top:1px solid rgba(26,26,26,.18);padding-bottom:calc(23 * var(--u))}
.s-frage{font:inherit}
.s-frage button{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:calc(30 * var(--u));width:100%;padding:calc(22 * var(--u)) 0 0;border:0;background:none;color:var(--ink);text-align:left;font-family:var(--font-h);font-weight:500;font-size:var(--fs-zeile);line-height:var(--lh-zeile);letter-spacing:var(--ls-zeile);cursor:pointer}
.s-frage button > span:first-child{max-width:calc(1100 * var(--u))}
/* Klickfläche reicht bis zur nächsten Linie (geschlossen) */
.s-frage button::after{content:"";position:absolute;left:0;right:0;bottom:calc(-23 * var(--u));height:calc(23 * var(--u))}
.s-frage button[aria-expanded="true"]::after{display:none}
.s-frage button:focus-visible{outline:calc(2 * var(--u)) solid var(--ink);outline-offset:calc(4 * var(--u));border-radius:calc(2 * var(--u))}
.s-icon{flex:none;width:calc(16 * var(--u));margin:calc(-2 * var(--u)) 0;font-size:calc(24 * var(--u));line-height:calc(30 * var(--u));letter-spacing:0;text-align:right} /* 30 hoch, aber nur 26 Zeilenhöhe wirksam */
.js .s-icon::before{content:"+"}
.js .s-faq-zeile.offen .s-icon::before{content:"\2212"}
/* Antwort Inter 16/22, Ink 78 %, 760 breit, 14 unter der Frage; Höhe animiert (bereich.js), zu = 0 hoch und unsichtbar */
.s-antwort p{max-width:calc(760 * var(--u));padding-top:calc(14 * var(--u));font-family:var(--font-b);font-weight:400;font-size:var(--fs-text);line-height:var(--lh-text);letter-spacing:var(--ls-text);color:rgba(26,26,26,.78)}
.js .s-antwort{height:0;overflow:hidden;visibility:hidden;transition:height .4s cubic-bezier(.22,1,.36,1),visibility 0s linear .4s}
.js .s-faq-zeile.offen .s-antwort{visibility:visible;transition:height .4s cubic-bezier(.22,1,.36,1)}

@media (prefers-reduced-motion:reduce){
  .js .s-antwort,.js .s-faq-zeile.offen .s-antwort{transition:none}
  .b-s-pfeil,.b-f-bild img{transition:none}
  .b-s-liste a:hover .b-s-pfeil,.b-f-karte:hover .b-f-bild img{transform:none}
}

/* ---------- Tablet (noch nicht designt): Labels über dem Inhalt, Text ab dem Rand ---------- */
@media (max-width:1100px){
  .b-text{padding-left:var(--rand);padding-right:var(--rand)}
  .b-services,.b-faq{display:block}
  .b-services .label.kerbe,.b-faq .label.kerbe{margin:0 0 24px}
  .b-services{padding-top:100px}
  .b-featured{padding-top:100px}
  .b-featured > .label{margin-bottom:24px}
  .b-faq{padding-top:100px;padding-bottom:100px}
  /* Cases: große Karte volle Breite, kleine paarweise darunter, „View all work“ zuletzt (sonst werden die kleinen Karten zu schmal) */
  .b-f-raster{display:flex;flex-wrap:wrap;gap:40px var(--rand)}
  .b-f-spalte{display:contents}
  .b-f-karte{flex:1 1 calc(50% - var(--rand) / 2);width:auto;min-width:0}
  .b-featured--3 .b-f-gross{flex-basis:100%}
  .b-f-alle,.b-featured--2 .b-f-alle{order:1;margin-top:0}
  .b-featured--raster .b-f-raster{display:flex;flex-wrap:wrap;gap:40px var(--rand)}
  .b-featured--raster .b-f-karte{flex:1 1 calc(50% - var(--rand) / 2)}
  .b-featured--raster .b-f-gross .b-f-bild{aspect-ratio:450/317}
  .b-featured--raster .b-f-alle{margin-top:40px}
}

/* ---------- Mobil (S-M1): einspaltig; Feed 6 Einträge (5 + 6 verblassen), Services 22/24, Karten untereinander, FAQ 18/22 ---------- */
@media (max-width:760px){
  .b-leadbild{margin-top:40px;aspect-ratio:350/197}
  .b-text{padding-top:80px}
  .b-text > p + p{margin-top:20px}
  .b-text > .b-lead + p{margin-top:32px}
  .b-results{margin-top:64px}
  .b-live{margin:3px 7px 0 16px}
  .b-r-liste{margin-top:22px}
  .b-r-eintrag{grid-template-columns:minmax(0,230px) minmax(0,1fr);column-gap:0;min-height:0;padding-bottom:18px}
  .b-r-datum{margin-top:19px;gap:12px}
  .b-r-eintrag:has(> .b-r-datum > [data-neu][hidden]:only-child) > :is(.b-r-titel,.b-r-wert){margin-top:19px}
  .b-r-marke{margin-top:6px}
  .b-r-basis{margin-top:3px}
  .b-r-eintrag:nth-child(n+7){display:none}
  .b-r-eintrag:nth-child(-n+4){-webkit-mask-image:none;mask-image:none}
  .b-r-eintrag:nth-child(5){-webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.333));mask-image:linear-gradient(#000,rgba(0,0,0,.333))}
  .b-r-eintrag:nth-child(6){-webkit-mask-image:linear-gradient(rgba(0,0,0,.333),rgba(0,0,0,.2) 20%,transparent);mask-image:linear-gradient(rgba(0,0,0,.333),rgba(0,0,0,.2) 20%,transparent)}
  .b-services{padding-top:62px}
  .b-services .label.kerbe{margin:0 0 32px}
  .b-s-liste a,.b-s-eintrag{padding:19px 0 20px;gap:20px}
  .b-featured{padding-top:80px}
  .b-featured > .label{margin-bottom:32px}
  .b-f-raster,.b-featured--raster .b-f-raster{display:flex;flex-direction:column;flex-wrap:nowrap;gap:64px}
  .b-f-karte,.b-featured--raster .b-f-karte{flex:none;width:100%}
  .b-featured--raster .b-f-gross .b-f-bild{aspect-ratio:350/221}
  .b-featured--raster .b-f-gross .b-f-titel{max-width:none}
  .b-featured--raster .b-f-alle{margin-top:48px}
  .b-text:not(:has(.b-results)) + .b-services{padding-top:80px}
  .b-s-neu{margin:6px 0 0 12px}
  .b-f-alle{order:1;margin-top:-16px}
  .b-featured--2 .b-f-alle{margin-top:-16px}
  .b-f-bild,.b-f-gross .b-f-bild,.b-featured--2 .b-f-bild{aspect-ratio:350/221}
  .b-f-meta{margin-top:12px}
  .b-f-titel,.b-featured--3 .b-f-gross .b-f-titel{max-width:none;margin-top:8px}
  .b-faq{padding-top:77px;padding-bottom:80px}
  .b-faq .label.kerbe{margin:0 0 32px}
  .s-faq-zeile{padding-bottom:18px}
  .s-frage button{padding-top:17px;gap:20px}
  .s-frage button > span:first-child{max-width:300px}
  .s-frage button::after{bottom:-18px;height:18px}
  .s-icon{width:auto;margin:0;font-size:20px;line-height:22px}
  .s-antwort p{padding-top:10px}
}