/* ============ EXPERTISE-HUB /services/ (Figma 311:2 · Stapel 311:180 + Spez 311:251 · FAQ 314:2 ff.) ============ */
/* Ohne JS kein Reveal: Kopf und FAQ sofort sichtbar (die Klasse .js setzt das Inline-Skript im <head>) */
html:not(.js) .reveal{opacity:1;transform:none}
/* Seitenkopf ist ein <header>, bekommt den Rand daher hier statt über section (wie /work) */
.seitenkopf{padding-left:var(--rand);padding-right:var(--rand)}

/* ---------- Bereichskarten: 1380×581 bei 1440, Weiß, Radius 5, 30 Abstand im Fluss ----------
   Oberkante 80 unter dem H1-Ende (+0,36, weil die dreizeilige H1 aus sub.css bei 1440 3 × 0,12 px kürzer läuft als in Figma → Karte .001 exakt auf y=478) */
.s-stapel{display:flex;flex-direction:column;gap:calc(30 * var(--u));margin-top:calc(80.36 * var(--u))}

/* Spalten ab Kartenrand: 30 Rand · Nummer 140 (Titel damit auf der Kerbe x=200) · links 520 · Lücke 70 · rechts 590 · 30 Rand.
   Höhe 581 = 38 oben + Titel 48 + 40 + Bild 330 + 78 + 47 unten; die rechte Spalte endet mit der Liste 47 über der Kante */
.s-karte{display:grid;grid-template-columns:calc(140 * var(--u)) minmax(0,520fr) minmax(0,70fr) minmax(0,590fr);align-items:start;padding:calc(38 * var(--u)) var(--rand) calc(47 * var(--u));border-radius:var(--radius);background:var(--weiss);transition:box-shadow .3s ease}
.s-nr{grid-column:1;margin-top:calc(10 * 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);color:var(--gedaempft)}
.s-links{grid-column:2;padding-bottom:calc(78 * var(--u))}
.s-titel{font-family:var(--font-h);font-weight:500;font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
.s-titel a{transition:opacity .2s ease}
.s-titel a:hover{opacity:.65}
.s-bild{margin-top:calc(40 * var(--u));aspect-ratio:520/330;border-radius:var(--radius);overflow:hidden}
.s-rechts{grid-column:4;padding-top:calc(10 * var(--u))}
.s-rechts .label{color:var(--gedaempft)}
.s-text{margin-top:calc(21 * var(--u));max-width:calc(560 * 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)}
/* Inter läuft im Browser minimal schmaler als in Figma: Zeile 3 der Karte .004 wäre mit „the“ 558,6 breit, Figma bricht davor */
#imagery .s-text{max-width:calc(558 * var(--u))}
.s-label{margin-top:calc(36 * var(--u))}
/* Text-Link unter dem Bereichstext (Figma V1, 2014:6): ohne Unterstrich wie die Leistungsliste darunter (Artur 15.10.), Pfeil rückt beim Hover;
   Box und Abstände wie Figma (24 + 7 px), 22 zum Text, bis „Services“ bleiben die 36 von .s-label */
.s-mehr{display:flex;width:fit-content;margin-top:calc(22 * var(--u))}
.s-mehr.link-l.primary::after{display:none}

/* Leistungsliste: Zeile 60 hoch (Linie Ink 18 % + 14 + 30 + 15), Archivo 22/30; Pfeil grau, 2 vor dem Spaltenende, nur bei Einträgen mit eigener Seite */
.s-liste{list-style:none;margin-top:calc(20 * var(--u));border-bottom:1px solid rgba(26,26,26,.18)}
.s-liste li{border-top:1px solid rgba(26,26,26,.18)}
.s-liste a,.s-eintrag{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(20 * var(--u));padding:calc(14 * var(--u)) 0 calc(15 * 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)}
.s-pfeil{flex:none;margin-right:calc(2 * var(--u));color:var(--gedaempft);transition:transform .25s ease}
.s-liste a:hover .s-pfeil{transform:translateX(calc(6 * var(--u)))}
.s-liste a:focus-visible,.s-titel a:focus-visible{outline:calc(2 * var(--u)) solid var(--ink);outline-offset:calc(4 * var(--u));border-radius:calc(2 * var(--u))}

/* ---------- Stapel (311:251): jede Karte klebt bei 110 + 16 × Index, die nächste schiebt sich darüber, 16-px-Streifen bleibt.
   Nur ab 1100 breit und ohne reduzierte Bewegung; dazu muss jede überdeckte Karte ganz in den Viewport passen (Klebe-Top + Kartenhöhe ≤ Fensterhöhe,
   die Karte wächst mit der Breite) → Klasse .stapel-an aus services.js. Der Stapel bleibt in .s-stapel, endet also vor dem FAQ */
/* --klebe als echte Länge registriert: services.js liest den berechneten Pixelwert (sonst käme die Formel „calc(…)“ als Text zurück) */
@property --klebe{syntax:"<length>";inherits:false;initial-value:0px}
.s-karte{--klebe:calc(110 * var(--u));scroll-margin-top:calc(110 * var(--u))} /* Sprungziele (#space) landen unter der 90-px-Nav, im Fluss wie Karte .001 */
.s-karte:nth-child(2){--klebe:calc(126 * var(--u))}
.s-karte:nth-child(3){--klebe:calc(142 * var(--u))}
.s-karte:nth-child(4){--klebe:calc(158 * var(--u))}
.s-karte:nth-child(5){--klebe:calc(174 * var(--u))}
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .s-stapel.stapel-an .s-karte{position:sticky;top:var(--klebe);scroll-margin-top:var(--klebe)}
  /* weicher Schatten an der Oberkante der oberen Karten, sobald .001 klebt (Zustand 311:180; Umschalten: services.js) */
  .s-stapel.stapel-an.gestapelt .s-karte + .s-karte{box-shadow:0 -10px calc(28 * var(--u)) rgba(0,0,0,.07)}
}

/* ---------- FAQ: 150 nach der letzten Karte, Label in der Kerbe auf Höhe der ersten Frage, Zeilen 72 hoch (Linie + 20 + 30 + 21) ---------- */
.s-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(150 * var(--u))}
.s-faq .label.kerbe{float:none;width:auto;margin-top:calc(28 * 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(21 * 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(20 * 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:-21px;height:calc(21 * 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))}
/* „+“ Archivo 24/30, 16 breit, bündig rechts (x=1394–1410); offen „−“. Ohne JS kein Icon (Antworten stehen offen) */
.s-icon{flex:none;width:calc(16 * var(--u));font-size:calc(24 * var(--u));line-height:var(--lh-zeile)}
.js .s-icon::before{content:"+"}
.js .s-faq-zeile.offen .s-icon::before{content:"\2212"}
/* Antwort Inter 16/26, Ink 78 %, 760 breit; Höhe animiert (services.js), zu = 0 hoch und unsichtbar */
.s-antwort p{max-width:calc(760 * var(--u));padding-top:calc(12 * var(--u));padding-bottom:calc(9 * 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)}

/* Bewegung reduziert: FAQ sofort, kein Schatten-Übergang, Pfeil bleibt stehen */
@media (prefers-reduced-motion:reduce){
  .js .s-antwort,.js .s-faq-zeile.offen .s-antwort{transition:none}
  .s-karte,.s-pfeil,.s-titel a{transition:none}
  .s-liste a:hover .s-pfeil{transform:none}
}

/* ---------- Einfaches Fallback unter 1100px — kein Stapel, Karten einspaltig, Bild über der Liste, FAQ volle Breite (Mobile ist noch nicht designt) ---------- */
@media (max-width:1100px){
  .s-stapel{gap:calc(20 * var(--u));margin-top:calc(56 * var(--u))}
  .s-karte{grid-template-columns:minmax(0,1fr);padding:calc(24 * var(--u)) calc(20 * var(--u)) calc(30 * var(--u))}
  .s-nr,.s-links,.s-rechts{grid-column:1}
  .s-nr{margin-top:0}
  .s-links{padding-bottom:0;margin-top:calc(16 * var(--u))}
  .s-bild{margin-top:calc(24 * var(--u))}
  .s-rechts{padding-top:0;margin-top:calc(30 * var(--u))}
  .s-text{max-width:none}
  .s-label{margin-top:calc(30 * var(--u))}
  /* mobil wie Figma V1 mobil: 18/22, 20 zum Text; bis „Services“ die 30 von .s-label */
  .s-mehr{margin-top:calc(20 * var(--u));font-size:18px;line-height:22px}
  .s-liste a,.s-eintrag{padding:calc(12 * var(--u)) 0 calc(13 * var(--u))}
  .s-faq{grid-template-columns:minmax(0,1fr);padding-top:calc(100 * var(--u));padding-bottom:calc(100 * var(--u))}
  .s-faq .label.kerbe{margin:0 0 calc(24 * var(--u))}
  .s-frage button{gap:calc(20 * var(--u))}
  .s-antwort p{max-width:none}
}