/* ============ ABOUT — Desktop nach Figma /about Entwurf 3 · Final (642:2), Mobil nach A-M1 (1198:5), 13.10. ============
   Schriften aus typo.css (Rollen), Maße in Design-Pixeln var(--u). Abschnitte: Titel links (740), Inhalt in zwei Spalten 300 | 300 (x 790 / 1110 bei 1440). */
.seitenkopf{padding-left:var(--rand);padding-right:var(--rand)}

/* Teamfilm 16:9, 80 unter der H1 */
.a-film{padding:calc(80 * var(--u)) var(--rand) 0}
.a-film-start,.a-film-video{display:block;width:100%;aspect-ratio:1380/776;border:0;padding:0;border-radius:var(--radius);overflow:hidden}
.a-film-start{position:relative;background:var(--saum);cursor:pointer}
.a-film-start img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.a-film-start:hover img{transform:scale(1.015)}
.a-film-start:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* „Play film“ (bis zum stummen Loop-Video): weißes Label auf leichtem Verlauf, damit es auf jedem Standbild lesbar bleibt */
.a-film-start::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(to top,rgba(26,26,26,.32),rgba(26,26,26,0));pointer-events:none}
.a-film-tag{position:absolute;z-index:1;left:calc(20 * var(--u));bottom:calc(18 * var(--u));color:#fff}

/* Textblock: Einstieg Lead, danach drei Absätze in Ink 78 %; Spalte x 200, 760 breit */
.a-text{padding:calc(153 * var(--u)) var(--rand) 0 calc(var(--rand) + 170 * var(--u))}
.a-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)}
.a-text .a-lead{font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);color:var(--ink)}
.a-text p + p{margin-top:calc(25 * var(--u))}
.a-text .a-lead + p{margin-top:calc(49 * var(--u))}

/* Foto-Stapel: gemeinsame Komponente FotoStapel (/fotostapel.css, /fotostapel.js) */

/* Abschnitte: Haarlinie, 63 darunter der Titel (Versal), Inhalt rechts daneben */
.a-abschnitt{display:grid;grid-template-columns:minmax(0,740fr) minmax(0,300fr) minmax(0,300fr);column-gap:calc(20 * var(--u));align-items:start;margin:calc(150 * var(--u)) var(--rand) 0;padding:calc(62 * var(--u)) 0 0;border-top:1px solid rgba(26,26,26,.18)}
.a-abschnitt + .a-abschnitt{margin-top:calc(120 * var(--u))}
.a-titel{grid-column:1;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);text-transform:uppercase}

/* Services: links Strategy + Assortment, rechts Performance + Imagery + Space; Zeilen mit Linie, Pfeil nur bei eigener Seite */
.a-spalte{margin-top:calc(2 * var(--u))}
.a-bereich + .a-bereich{margin-top:calc(48 * var(--u))}
.a-liste{list-style:none;margin-top:calc(14 * var(--u));border-top:1px solid rgba(26,26,26,.18)}
.a-liste li{border-bottom:1px solid rgba(26,26,26,.18)}
.a-liste a,.a-eintrag{display:flex;justify-content:space-between;align-items:center;gap:calc(12 * var(--u));padding:calc(10 * var(--u)) 0 calc(11 * 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:var(--ink)}
/* Zeilenhöhen wie Figma: erste Zeile der oberen Bereiche 42, Space-Zeilen 42, sonst 44 */
.a-bereich:first-child li:first-child > *{padding-top:calc(8 * var(--u))}
.a-bereich.eng li > *{padding-bottom:calc(9 * var(--u))}
.a-pfeil{flex:none;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.a-liste a:hover .a-pfeil{transform:translateX(calc(4 * var(--u)))}
.a-liste a:focus-visible{outline:1.5px solid var(--ink);outline-offset:2px}
/* Bereichslabel als Link zur Bereichsseite, wie auf /facts/ (.fa-bereich): Label mit Pfeil, beim Hover blasser */
.a-bereich-link{transition:opacity .2s ease}
.a-bereich-link:hover{opacity:.6}
.a-bereich-link:focus-visible{outline:1.5px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.a-bereich-link{transition:none}}

/* Agency KPIs 2 × 2: Label, Zahl 64/72, Text */
.a-kpis{grid-column:2 / span 2;display:grid;grid-template-columns:1fr 1fr;column-gap:calc(20 * var(--u));row-gap:calc(65 * var(--u));margin-top:calc(2 * var(--u))}
.a-zahl{margin-top:calc(14 * var(--u));font-family:var(--font-h);font-weight:500;font-size:var(--fs-kennzahl);line-height:var(--lh-kennzahl);letter-spacing:var(--ls-kennzahl)}
.a-kpi-text,.a-intro{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)}
.a-kpi-text{margin-top:calc(16 * var(--u))}

/* Team: Intro rechts neben dem Titel, darunter Zeilen mit Linie — Porträt 160, Name, Rolle, Bio (430) */
.a-intro{grid-column:2 / span 2;margin-top:calc(3 * var(--u))}
.a-team{grid-column:2 / span 2;list-style:none;margin-top:calc(64 * var(--u));border-top:1px solid rgba(26,26,26,.18)}
.a-team li{display:grid;grid-template-columns:calc(160 * var(--u)) minmax(0,1fr);column-gap:calc(30 * var(--u));align-items:start;padding:calc(23 * var(--u)) 0 calc(24 * var(--u));border-bottom:1px solid rgba(26,26,26,.18)}
.a-portraet{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius)}
.a-person{margin-top:calc(1 * var(--u))}
.a-name{font-family:var(--font-h);font-weight:500;font-size:var(--fs-klein-h);line-height:var(--lh-klein-h);letter-spacing:var(--ls-klein-h)}
.a-rolle{margin-top:calc(10 * var(--u));color:var(--gedaempft);text-wrap:balance}
.a-bio{max-width:calc(430 * var(--u));margin-top:calc(13 * 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:rgba(26,26,26,.78)}

/* Gruppenfoto über die volle Breite (5:4), 150 bis zum Footer */
.a-gruppe{padding:calc(150 * var(--u)) var(--rand) calc(150 * var(--u))}
.a-gruppenbild{aspect-ratio:1380/1104;border-radius:var(--radius);overflow:hidden}
.a-gruppenbild img{width:100%;height:100%;object-fit:cover}

/* Tablet (noch nicht designt): Titel über dem Inhalt, Services zweispaltig, Team-Zeilen volle Breite */
@media (max-width:1100px){
  .a-text{padding-left:var(--rand)}
  .a-abschnitt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:40px}
  .a-titel,.a-kpis,.a-intro,.a-team{grid-column:1 / -1}
  .a-spalte,.a-kpis,.a-intro,.a-team{margin-top:0}
}

/* Mobil (A-M1): einspaltig; Abschnitt = Linie (+80), Titel (+32), Inhalt (+40) */
@media (max-width:760px){
  .a-film{padding-top:40px}
  .a-film-tag{left:14px;bottom:12px}
  .a-text{padding-top:80px}
  .a-text p + p{margin-top:20px}
  .a-text .a-lead + p{margin-top:32px}
  .a-abschnitt,.a-abschnitt + .a-abschnitt{display:block;margin-top:80px;padding-top:32px}
  .a-titel + .a-spalte,.a-kpis{margin-top:40px}
  .a-spalte + .a-spalte,.a-bereich + .a-bereich{margin-top:32px}
  .a-services .a-bereich .a-liste li > *{padding:9px 0 11px}
  .a-kpis{column-gap:20px;row-gap:40px}
  .a-zahl,.a-kpi-text{margin-top:8px}
  .a-intro{margin-top:24px}
  .a-team{margin-top:40px}
  .a-team li{grid-template-columns:100px minmax(0,1fr);column-gap:16px;padding:23px 0 24px}
  .a-person{margin-top:0}
  .a-rolle{margin-top:6px}
  .a-bio{max-width:none;margin-top:10px}
  .a-gruppe{padding:80px var(--rand)}
}