/* Scrollbänder im Leistungen-Block (STUDIOSZENEN2, 25.09.2026, Aufbau wie A2Y, Jascha 25.09.).
   Standbild für alle, die Bildfolgen legt szenen.js auf die Leinwand. Darunter die Texte wie bisher. */
.szene-band{grid-column:1/-1;position:relative;margin:0 0 6px;aspect-ratio:16/9;background:#1d1e1b;overflow:hidden;border-radius:4px}
.szene-band video,.szene-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0;border-radius:0;aspect-ratio:auto}
.szene-band video{opacity:0;transition:opacity .4s}
.szene-band.is-live video{opacity:1}
.szene-band.is-live picture{opacity:0}
.szene-band.is-motion{clip-path:inset(calc((1 - var(--auf,1)) * 8%) calc((1 - var(--auf,1)) * 6%) round 4px)}

/* Band je Leistung: über die ganze Breite, breit wie der Film bei A2Y */
.service-detail.mit-band{row-gap:clamp(28px,3.4vw,48px)}
.leistung-band{aspect-ratio:21/9;margin:0}
.leistung-band img{object-position:50% 30%}

/* Hochformat wie A2Y schon unter 900 px (Jascha 26.09.: Tablet angleichen) */
@media (max-width:899px){
  .szene-band,.leistung-band{aspect-ratio:4/5}
  .leistung-band img{object-position:50% 50%}
}

/* Spartenflächen wie A2Y (Jascha 25.09.2026): jede Sparte auf einer Fläche in ihrer Farbe (Orange Foto/Film/Drohne,
   Grün Websites, Gelb KI-Systeme, ENT-143), Kopf, Band, dann die Texte wie bisher. Schrift dunkel, Knöpfe dunkel. */
.services .sparte{background:var(--sparte);color:var(--ink);border:0;border-radius:18px;margin:0 calc(22px - var(--gutter)) 25px;padding:65px max(24px,calc(var(--gutter) - 22px));--muted:#2b2c28}
#studio-leistungen.sparte{--sparte:var(--orange)}
#website-leistungen.sparte{--sparte:var(--green)}
#systems.sparte{--sparte:var(--yellow)}
#studio-leistungen.sparte,#website-leistungen.sparte,#systems.sparte{--action-bg:var(--ink);--action-ink:#fff;--link-accent:var(--ink)}
.sparte-kopf{grid-column:1/-1}
#studio-leistungen .sparte-kopf .eyebrow,#website-leistungen .sparte-kopf .eyebrow,#systems .sparte-kopf .eyebrow{display:inline-flex;padding:5px 9px;border-radius:5px;background:var(--ink);color:#fff;margin:0 0 18px}
.sparte-kopf h3{font-size:clamp(42px,5.8vw,88px);line-height:1.03;letter-spacing:-.035em;margin:0} /* so groß wie #a2y-title */
.sparte .service-intro>p:not(.eyebrow){color:var(--ink);font-size:clamp(16px,1.25vw,18px);line-height:1.5}
.sparte .service-list,.sparte .scrollfilm-proof{--muted:#686a62}
.sparte .service-list{background:var(--paper)}
.sparte .ki-scope-note{color:var(--muted)}
.sparte .scrollfilm-proof{background:var(--paper)}
.sparte .ki-capabilities>div{border-bottom-color:#1d1e1b33}

/* Arbeiten: vier Websites als Handy-Bild, nicht scrollbar, darunter der Weg zu allen */
.web-shots{gap:26px;justify-items:start}
.web-shots-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px);width:100%}
.web-shots-liste a{display:block;color:inherit;text-decoration:none}
.web-shots-liste img{display:block;width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top;background:#e7e9e2;border:5px solid #fff;border-radius:22px;box-shadow:0 18px 35px #1d1e1b14;transition:transform .5s var(--ease)}
.web-shots-liste a:hover img{transform:translateY(-6px)}
.web-shots-liste p{margin:16px 0 6px;color:var(--muted);font-size:10px}
.web-shots-liste h3{font-size:clamp(20px,1.8vw,26px);margin:0 0 6px}
.web-shots-liste em{display:block;color:var(--muted);font-size:13px;line-height:1.45}
.web-shots-alle{margin-top:6px}

@media (max-width:760px){
  .services .sparte{margin:0 -12px 20px;padding:35px 20px}
  .sparte-kopf h3{font-size:44px}
  .web-shots-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .web-shots-liste img{border-width:4px;border-radius:16px}
  .web-shots-liste em{font-size:12px}
}

/* Karten wie die A2Y-Angebote (Jascha 26.09.: „Karten wie A2Y“). Einleitung über die ganze Breite, darunter je Leistung
   eine helle Karte mit großer Nummer in Spartenfarbe. Ohne Skript und bei reduzierter Bewegung: Karten untereinander.
   Mit szenen.js (.is-karten) haften sie und schieben sich übereinander (--stick setzt szenen.js). */
.sparte .service-intro{grid-column:1/-1}
.sparte .service-intro>p:not(.eyebrow){max-width:62ch}
.sparte .ki-scope-note{grid-column:1/-1;margin:0}
.sparte-karten{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;gap:26px}
.sparte-karten.website-references{grid-template-columns:1fr;gap:26px}
.sparte-karte{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:clamp(20px,3vw,48px);align-items:center;background:var(--paper);color:var(--ink);padding:clamp(24px,2.6vw,40px);border-radius:3px;box-shadow:0 -10px 40px #1d1e1b30;transform-origin:50% 0;scroll-margin-top:120px;--muted:#686a62}
.sparte-karte-nummer{display:block;font-family:var(--display);font-size:clamp(60px,7vw,110px);line-height:.85;color:var(--ink);margin-bottom:14px} /* dunkel: Grün und Gelb wären auf der hellen Karte kaum lesbar (Jascha 26.09.) */
.sparte-karte h4{font-size:clamp(28px,2.6vw,40px);line-height:1.04;letter-spacing:-.03em;margin:0}
/* Farbbalken in Spartenfarbe in der Karte (außen wäre er auf der gleichfarbigen Fläche unsichtbar) */
.sparte-karte-kopf::before{content:"";display:block;width:64px;height:10px;border-radius:2px;background:var(--sparte);margin-bottom:18px}
.sparte-karte>p{margin:0;font-size:clamp(15px,1.2vw,18px);line-height:1.5;max-width:52ch}
.sparte-karte-referenz>figure{margin:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(18px,2.4vw,36px);align-items:center}
.sparte-karte-referenz>.proof-links{margin:0}
.sparte-karte-referenz .website-reference-visual img{border:0}
.sparte.is-karten .sparte-karten{gap:0}
.sparte.is-karten .sparte-karte{position:sticky;top:var(--stick,120px);min-height:min(46vh,420px)}
.sparte.is-karten .sparte-karte:not(:last-child){margin-bottom:var(--sparte-ruhe,48vh)}
@media (max-width:899px){
  .sparte{--sparte-ruhe:30vh}
  .sparte-karte,.sparte-karte-referenz>figure{grid-template-columns:1fr;gap:14px}
  .sparte.is-karten .sparte-karte{min-height:0}
}
@media (max-width:760px){
  .sparte-karte{padding:20px 20px 22px}
  .sparte-karte-kopf{display:grid;grid-template-columns:auto 1fr;gap:0 14px;align-items:end}
  .sparte-karte-nummer{font-size:46px;margin:0}
  .sparte-karte-kopf::before{grid-column:1/-1;width:48px;height:8px;margin-bottom:12px}
  .sparte-karte h4{font-size:27px}
  .sparte-karte>p{font-size:14.5px;line-height:1.45}
}

/* Fußzeile am Ende wie A2Y (Jascha 26.09.): Knopf rechts, Hinweis links; Knopf in der Farbe der Fläche mit Rand wie der
   A2Y-Knopf, Schrift und Rand dunkel statt weiß, weil Weiß auf Grün und Gelb nicht lesbar wäre. */
.sparte-footer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:40px;margin-top:44px;--action-bg:var(--sparte);--action-ink:var(--ink)}
.sparte-footer:not(:has(>p)){justify-content:flex-end}
.sparte-footer p{font-size:12px;max-width:58ch;margin:0;color:var(--ink)}
.sparte-footer .button{flex:none;border:1px solid #1d1e1b80}
.sparte-footer .actions{justify-content:flex-end}
@media (max-width:760px){
  .sparte-footer{display:block;margin-top:44px}
  .sparte-footer .button{margin-top:20px}
  .sparte-footer:not(:has(>p)) .button,.sparte-footer .actions{margin-top:0}
  .sparte-footer .actions{justify-content:flex-start}
}

/* Inhalt wie A2Y (STUDIOSZENEN3, Jascha 26.09.: „Inhalt wie A2Y ergänzen“). Werte aus a2y.css übernommen:
   Einstieg zweispaltig (.a2y-lead), Karten dreispaltig mit Unterzeile, zwei Fakten und Zetteln (.a2y-offer),
   drei Schritte (.a2y-steps). Abweichend: Schrift und Schritte dunkel statt weiß (helle Flächen), Kasten auf Gelb hell. */
.sparte .sparte-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 60px;align-items:start}
.sparte .sparte-lead>p:not(.eyebrow){margin:0;max-width:46ch;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--ink)}
.sparte .sparte-lead>p.sparte-situation{grid-row:span 2;font-family:var(--display);font-weight:700;font-size:clamp(24px,2.3vw,34px);line-height:1.15;letter-spacing:-.02em;max-width:24ch}
.sparte .sparte-lead:has(>p:nth-child(5))>p.sparte-situation{grid-row:span 3}
.sparte .sparte-lead>p.sparte-result{padding:14px 18px;background:var(--sparte-kasten,var(--yellow));border-radius:3px;font-weight:650;max-width:44ch}
.sparte .sparte-lead>p.sparte-audience{font-size:14px;color:#1d1e1bcc}
#systems.sparte{--sparte-kasten:var(--paper)} /* Gelb auf Gelb wäre unsichtbar */

.sparte-karte{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);align-items:normal;align-content:center}
.sparte-karte h4{margin:0 0 8px}
.sparte-karte-zeile{margin:0;font-size:17px;font-weight:600;color:var(--ink)}
.sparte-fakten{margin:0;display:grid;gap:14px;align-content:start}
.sparte-fakten dt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.sparte-fakten dd{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.sparte-zettel{list-style:none;margin:0;padding:0;display:grid;gap:14px;align-content:start}
.sparte-zettel li{padding:14px 16px;background:var(--yellow);border-radius:2px}
.sparte-zettel li:nth-child(odd){transform:rotate(-2deg)}
.sparte-zettel li:nth-child(even){transform:rotate(1.5deg)}
.sparte-zettel span{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#1d1e1bb3;margin-bottom:6px}
.sparte-zettel p{margin:0;font-weight:650;font-size:15px;line-height:1.4}
.sparte-referenz{display:grid;gap:16px;align-content:start;justify-items:start}
.sparte-referenz .website-reference-visual{width:100%}
.sparte-referenz .website-reference-visual img{border:0;border-radius:0;height:100%;width:100%;object-fit:cover;aspect-ratio:auto}
.sparte.is-karten .sparte-karte{min-height:min(62vh,520px)}

.sparte-schritte{grid-column:1/-1;list-style:none;margin:56px 0 0;padding:28px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative;border-top:1px solid #1d1e1b40}
.sparte-schritte::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--ink);transform:scaleX(var(--linie,1));transform-origin:0 50%}
.sparte-schritte li{color:var(--ink)}
.sparte-schritte span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;margin-bottom:14px}
.sparte-schritte h4{font-size:19px;margin:0 0 6px}
.sparte-schritte p{margin:0;font-size:14px;line-height:1.5;color:#1d1e1bd9;max-width:32ch}

@media (max-width:899px){
  .sparte .sparte-lead{grid-template-columns:1fr;gap:16px}
  .sparte .sparte-lead>p.sparte-situation,.sparte .sparte-lead:has(>p:nth-child(5))>p.sparte-situation{grid-row:auto}
  .sparte .sparte-lead>p:not(.eyebrow,.sparte-situation,.sparte-audience){font-size:16px}
  .sparte-karte{grid-template-columns:1fr;gap:20px}
  .sparte.is-karten .sparte-karte{min-height:0}
  .sparte-schritte{grid-template-columns:1fr;gap:22px;margin-top:40px}
}
@media (max-width:760px){
  .sparte-karte{gap:14px}
  .sparte-karte-nummer{grid-row:span 2}
  .sparte-karte h4{margin-bottom:4px}
  .sparte-karte-zeile{font-size:15px}
  .sparte-fakten{gap:10px}
  .sparte-fakten dd{font-size:14.5px;line-height:1.45}
  .sparte-zettel{gap:10px}
  .sparte-zettel li{padding:11px 13px}
  .sparte-zettel p{font-size:14px}
}