/* ════════════════════════════════════════════════════════════
   Subpage styles — Leistungen · Team · Kontakt
   Loaded only on the subpages. Uses the same design tokens as
   styles.css, so the charcoal theme reskins everything automatically.
   ════════════════════════════════════════════════════════════ */

/* ─── Shared subpage hero ─── */
.subpage-hero {
  padding-top: clamp(60px, 9vw, 120px);
  padding-bottom: clamp(48px, 6vw, 90px);
}
.subpage-hero .display { font-size: clamp(56px, 9vw, 140px); }
.subpage-eyebrow { margin-bottom: 32px; }
.subpage-title { margin: 24px 0 48px; }
.subpage-lead-grid {
  border-top: 0.5px solid var(--line);
  padding-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
}
.subpage-meta {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.9;
}
@media (max-width: 760px) {
  .subpage-lead-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ─── Leistungen — detail rows ─── */
.leist-detail {
  scroll-margin-top: 112px;
  display: grid;
  grid-template-columns: 120px 1fr 1.4fr;
  gap: 48px;
  padding: 80px 0;
  border-top: 0.5px solid var(--line);
  align-items: start;
}
.leist-index .mono { display: block; }
.leist-index .n { color: var(--accent); margin-bottom: 8px; }
.leist-index .of { color: var(--muted); }
.leist-detail h2 { font-size: clamp(28px, 3.5vw, 48px); margin-bottom: 16px; }
.leist-sub {
  font-family: var(--mono); font-style: normal; font-weight: 500;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 24px;
}
.leist-body { margin-bottom: 32px; max-width: 44ch; }
.leist-col-label { color: var(--muted); display: block; margin-bottom: 18px; }
.leist-bullets { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 12px; }
.leist-bullets li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.leist-bullets .m { color: var(--accent); font-family: var(--mono); font-style: normal; }
.leist-deliverables { display: flex; flex-wrap: wrap; gap: 8px; }
.leist-pill {
  font-size: 12px; padding: 6px 12px;
  border: 0.5px solid var(--line); border-radius: 0;
  color: var(--ink-2); background: var(--bg-soft);
}
@media (max-width: 860px) {
  .leist-detail { grid-template-columns: 1fr; gap: 24px; padding: 56px 0; }
}

/* ─── Leistungen / generic centered CTA ─── */
.cta-center { background: var(--bg-soft); }
.cta-center .shell { text-align: center; max-width: 880px; }
.cta-center .eyebrow { justify-content: center; margin-bottom: 32px; }
.cta-center .lede { margin: 0 auto 40px; color: var(--ink-2); }

/* ─── Team — partner grid ─── */
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.team-card {
  padding: 48px 32px 48px 0;
  border-top: 0.5px solid var(--line);
  display: grid; grid-template-columns: 180px 1fr; gap: 32px; align-items: start;
}
.team-grid > .team-card:nth-child(even) { border-left: 0.5px solid var(--line); padding-left: 48px; }
.team-portrait { aspect-ratio: 3 / 4; width: 100%; }
.team-initials {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: flex-start; padding: 16px;
}
.team-initials span {
  font-family: var(--sans); font-weight: 650; font-style: normal;
  font-size: 52px; color: var(--ink); letter-spacing: -0.05em; line-height: 0.9;
  mix-blend-mode: multiply;
}
/* On dark backgrounds multiply would swallow the light initials — lighten instead */
[data-theme="charcoal"] .team-initials span { mix-blend-mode: screen; }
.team-role { color: var(--accent); display: block; margin-bottom: 12px; }
.team-name { font-family: var(--sans); font-weight: 620; font-size: 27px; letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 8px; }
.team-jobtitle { font-family: var(--mono); font-style: normal; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--muted); margin: 0 0 6px; }
.team-years { color: var(--muted); display: block; margin-bottom: 24px; }
.team-bio { font-size: 14.5px; margin-bottom: 20px; }
.team-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.team-tag { padding: 4px 10px; border: 0.5px solid var(--line); border-radius: 0; color: var(--ink-2); font-size: 10px; }
@media (max-width: 860px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-grid > .team-card,
  .team-grid > .team-card:nth-child(even) {
    grid-template-columns: 120px 1fr; padding-left: 0; border-left: none; gap: 20px;
  }
}

/* ─── Team — philosophy ─── */
.team-philosophy .shell {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 96px);
}
.team-philosophy-head h2 { margin-top: 24px; }
.team-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.team-stat-label { color: var(--muted); display: block; margin-bottom: 8px; }
.team-stat-k { font-family: var(--sans); font-size: 26px; font-weight: 640; letter-spacing: -0.03em; }
.team-stat-note { font-size: 13px; margin-top: 8px; color: var(--muted); }
@media (max-width: 760px) {
  .team-philosophy .shell { grid-template-columns: 1fr; }
}

/* ─── Kontakt — layout ─── */
.kontakt-body {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px);
  padding-top: 40px; border-top: 0.5px solid var(--line);
}
@media (max-width: 860px) { .kontakt-body { grid-template-columns: 1fr; } }

/* ─── Kontakt — form ─── */
.contact-form { display: flex; flex-direction: column; gap: 36px; }
.contact-workflow [hidden] { display: none !important; }
.contact-intro, .review-note, .contact-nojs p {
  margin: 0; max-width: 65ch; font-size: 15px; line-height: 1.6; color: var(--ink-2);
}
.form-step { color: var(--muted); display: block; margin-bottom: 24px; }
.choice-group { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
  padding: 10px 22px; border-radius: 0; cursor: pointer;
  border: 0.5px solid var(--line); background: transparent; color: var(--ink);
  font: inherit; font-size: 13.5px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.choice:hover { border-color: var(--ink); }
.choice[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.choice--sm { padding: 9px 16px; font-size: 13px; color: var(--ink-2); }
.form-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.field-full { grid-column: 1 / -1; }
.field .opt { text-transform: none; letter-spacing: 0; color: var(--muted); }
.contact-workflow .field label, .contact-workflow .err, .field-hint {
  font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none; line-height: 1.5;
}
.contact-workflow .field label { font-weight: 500; }
.contact-workflow .field input, .contact-workflow .field textarea {
  min-width: 0; width: 100%; font-size: 16px; caret-color: var(--ink);
}
.field-hint { color: var(--muted); }
.topic-hint { margin: -8px 0 12px; }
.contact-form .choice-group[data-field="topic"] { margin-bottom: 28px; }
.contact-workflow .field .err { position: static; }
.contact-workflow .field .err:empty { display: none; }
.topic-err { display: block; position: static; margin: -16px 0 28px; color: var(--error); }
.form-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  flex-wrap: wrap;
  padding-top: 32px; border-top: 0.5px solid var(--line); margin-top: 8px;
}
.form-note { font-family: var(--sans); font-size: 14px; color: var(--muted); max-width: 40ch; line-height: 1.6; }
.contact-workflow .btn { font-family: var(--sans); max-width: 100%; white-space: normal; }
.contact-workflow .btn:disabled { opacity: 0.6; cursor: wait; }
.contact-workflow .btn:disabled:hover { background: transparent; color: var(--ink); }
@media (max-width: 600px) {
  .form-grid-2 { grid-template-columns: 1fr; }
  .form-footer { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* Review before the visitor sends their email */
.form-review { display: flex; flex-direction: column; gap: 28px; }
.contact-workflow section.form-review { padding: 0; }
.form-review h2, .contact-nojs h2 {
  font-family: var(--sans); font-weight: 640; font-size: clamp(26px, 3.6vw, 40px);
  letter-spacing: -0.035em; line-height: 1.15; margin: 0; text-wrap: balance;
}
.review-details { margin: 0; padding: 20px 0; border-top: 0.5px solid var(--line); border-bottom: 0.5px solid var(--line); }
.review-details > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 16px; font-size: 14px; }
.review-details > div + div { margin-top: 12px; }
.review-details dt { color: var(--muted); }
.review-details dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.form-review .field textarea { padding: 16px; border: 0.5px solid var(--line); background: var(--bg-soft); min-height: 18rem; line-height: 1.6; }
.review-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.copy-status { min-height: 1.6em; margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.contact-nojs h2 { margin-bottom: 20px; }
.contact-nojs a { text-decoration: underline; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
@media (max-width: 400px) {
  .review-details > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ─── Kontakt — direct aside ─── */
.kontakt-direct .label { color: var(--muted); display: block; margin-bottom: 32px; }
.kontakt-direct .marg { margin-bottom: 32px; }
.kontakt-direct .marg:last-of-type { margin-bottom: 48px; }
.kontakt-map {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  width: 100%;
  margin-top: 24px;
  overflow: hidden;
  border: 0.5px solid var(--line);
  background: var(--bg-soft);
}
.kontakt-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Light basemap → readable dark-map look in charcoal mode */
[data-theme="charcoal"] .kontakt-map img { filter: invert(0.9) hue-rotate(180deg) brightness(0.92) contrast(0.95); }
.kontakt-map .map-pin {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -100%);
  z-index: 2; color: var(--accent); pointer-events: none;
}
.kontakt-map .map-cta {
  position: absolute; bottom: 12px; right: 12px; z-index: 2;
  background: var(--bg); color: var(--ink);
  padding: 7px 12px; border: 0.5px solid var(--line);
  display: inline-flex; gap: 8px; align-items: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.kontakt-map:hover .map-cta { background: var(--ink); color: var(--bg); }
.map-attr { color: var(--muted); margin: 8px 0 0; font-size: 10px; }
.map-attr a { color: inherit; text-decoration: underline; }

/* ════════════════════════════════════════════════════════════
   Subpage detail polish (loads after styles.css → wins the cascade)
   ════════════════════════════════════════════════════════════ */

/* Press feedback on the segmented choice chips (transform must be in the
   transition list here, since this .choice rule overrides the one in styles.css) */
.choice { transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.12s ease; }
@media (prefers-reduced-motion: no-preference) {
  .choice:active { transform: scale(0.97); }
}

/* Team cards: background/colour warm-up only — NO lift (shared hairline grid).
   The portrait nudge is self-contained inside its own box, so it breaks no rule. */
@media (hover: hover) {
  .team-card { transition: background-color 0.35s ease; }
  .team-card:hover { background-color: color-mix(in oklab, var(--accent-soft) 45%, transparent); }
  .team-name { transition: color 0.3s ease; }
  .team-card:hover .team-name { color: var(--accent); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .team-portrait { transition: transform 0.4s cubic-bezier(.2, .7, .1, 1); }
  .team-card:hover .team-portrait { transform: scale(1.012); }
}

/* ─── Team monogram panels — an embossed calling card until real portraits exist ─── */
.team-portrait {
  position: relative;
  border: 0.5px solid var(--line);
  background:
    linear-gradient(155deg, color-mix(in oklab, var(--accent-soft) 60%, transparent), transparent 65%),
    var(--bg-soft);
}
.team-portrait::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 0.5px solid var(--line-soft);
  pointer-events: none;
}
.team-initials { align-items: center; justify-content: center; padding: 0; }
.team-initials span { font-size: clamp(56px, 6vw, 84px); color: var(--accent); }

/* ─── Map: pull the cool Positron tiles into the bone warmth (light mode) ─── */
.kontakt-map img { filter: grayscale(0.2) saturate(0.85) contrast(0.98); }

/* ─── Legal pages (Impressum / Datenschutz) ─── */
.legal-main { padding-top: clamp(48px, 7vw, 96px); }
.legal-content { max-width: 72ch; }
.legal-content h1 { margin: 20px 0 40px; }
.legal-content h2 {
  font-size: clamp(20px, 2vw, 26px);
  margin: 48px 0 14px;
  letter-spacing: -0.01em;
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p, .legal-content li { color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.legal-content p { margin: 0 0 14px; }
.legal-content ul { margin: 0 0 14px; padding-left: 20px; }
.legal-content strong { font-weight: 600; color: var(--ink); }
.legal-content a { border-bottom: 0.5px solid currentColor; }
.legal-stand { color: var(--muted); display: block; margin-bottom: 28px; }
/* Open items for the partners — visible, honest, unmissable */
.legal-todo {
  display: block;
  margin: 14px 0;
  padding: 14px 16px;
  border: 0.5px solid var(--line);
  border-left: 2px solid var(--accent);
  background: color-mix(in oklab, var(--accent-soft) 55%, transparent);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.legal-todo .mono { color: var(--accent); display: block; margin-bottom: 6px; }

/* ─── DATEV-Zugänge (datev.html) ─── */
.datev-main { padding: clamp(56px, 8vw, 112px) 0 clamp(72px, 9vw, 140px); }
.datev-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.datev-head .h1 { margin: 20px 0 24px; }
/* Nach dem Bild-Kopf: Einleitung wie bei Kontakt mit feiner Linie darüber */
.datev-head-tail { border-top: 0.5px solid var(--line); padding-top: 40px; }
.datev-list { border-top: 1px solid var(--line); }
.datev-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(0, 1.3fr) minmax(0, 2fr) 132px; /* feste Linkspalte: alle Zeilen fluchten */
  gap: 8px 32px;
  align-items: baseline;
  padding: 28px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: background-color 0.3s ease;
}
a.datev-row:hover, a.datev-row:focus-visible { background-color: var(--accent-soft); }
.datev-for { color: var(--accent); }
.datev-t { font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.datev-d { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.datev-go {
  display: inline-flex; gap: 20px; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.datev-go .ic { margin-left: 4px; vertical-align: -0.12em; transition: transform 0.3s; }
a.datev-row:hover .datev-go { color: var(--accent); }
a.datev-row:hover .datev-go .ic { transform: translate(2px, -2px); }
.datev-go a { color: var(--ink); padding: 12px 0; border-bottom: 1px solid var(--line); }
/* Mehrere Ziele (Windows/Mac) untereinander statt nebeneinander */
.datev-go-stack { flex-direction: column; align-items: stretch; gap: 0; }
.datev-go-stack a { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; }
.datev-go-stack a:first-child { padding-top: 0; }
@media (min-width: 861px) {
  .datev-go { width: 100%; justify-content: space-between; } /* alle Pfeile an derselben rechten Kante */
}
.datev-go a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.datev-notes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;
  margin-top: clamp(40px, 6vw, 72px);
}
.datev-notes .mono { color: var(--muted); display: block; margin-bottom: 10px; }
.datev-notes p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.datev-notes a { color: var(--ink); border-bottom: 1px solid var(--line); }
@media (max-width: 860px) {
  .datev-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 22px 4px; }
  .datev-go { margin-top: 8px; }
  .datev-go-stack { max-width: 200px; } /* auf dem Handy nicht über die ganze Breite ziehen */
}
@media (max-width: 760px) {
  .datev-notes { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ─── Echte Partnerporträts: freigestellt vor der Markenfläche, der Kopf ragt oben heraus ─── */
.team-portrait.has-photo { border: 0; background: none; clip-path: inset(-30% 0 0 0); } /* Seiten = Kanten der Fläche */
.team-portrait.has-photo::after { content: none; }
.team-portrait.has-photo::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 44%; bottom: 0;
  background: var(--brand-panel);
  border-radius: 12px 12px 0 0;
}
.team-portrait.has-photo img {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: auto;
  display: block;
  filter: drop-shadow(0 8px 14px rgb(12 14 34 / 0.22));
}

/* ─── Team: zwei Generationen — beim Ankommen stehen beide Schulter an Schulter auf einer
   gemeinsamen Fläche, dann gleiten sie in ihre Karten und die Angaben erscheinen nacheinander.
   Einmalig per IntersectionObserver (main.js setzt .is-split), kein Scroll-Scrub. Nur Desktop mit
   Bewegung; Handy, „Bewegung reduzieren“ und ohne JS zeigen sofort den ruhigen Endzustand.
   Ralphs Karte ist auf dem Desktop gespiegelt (Porträt außen rechts), damit das Paar genau mittig
   startet und beide gleich weit nach außen gehen: Klaus 50cqw − 180px, Ralph −50cqw + 180px
   (minus 2 px Überlappung gegen eine Haarlinie in der Naht). ─── */
@media (min-width: 861px) {
  .team-grid > .team-card:nth-child(2) { grid-template-columns: 1fr 180px; padding-right: 0; }
  .team-grid > .team-card:nth-child(2) .team-portrait { order: 2; }
}
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  html.anim-ready .team-duo { container-type: inline-size; --duo-k: calc(50cqw - 180px); --duo-r: calc(-50cqw + 178px); }
  html.anim-ready .team-duo > .team-card.reveal { opacity: 1; transform: none; }
  html.anim-ready .team-duo .team-portrait {
    transition: translate 1.25s cubic-bezier(.65, 0, .25, 1) 0.25s, transform 0.4s cubic-bezier(.2, .7, .1, 1);
  }
  html.anim-ready .team-duo .team-portrait::before { transition: border-radius 0.4s ease 0.3s; }
  html.anim-ready .team-duo > .team-card > .team-text > * {
    transition: opacity 0.75s cubic-bezier(.2, .7, .1, 1), translate 0.75s cubic-bezier(.2, .7, .1, 1);
  }
  html.anim-ready .team-duo > .team-card:nth-child(2) {
    transition: border-color 0.7s ease 0.95s, background-color 0.35s ease;
  }

  /* Ausgangslage: ein Paar mittig auf einer Fläche */
  html.anim-ready .team-duo:not(.is-split) > .team-card:nth-child(1) .team-portrait { translate: var(--duo-k) 0; }
  html.anim-ready .team-duo:not(.is-split) > .team-card:nth-child(2) .team-portrait { translate: var(--duo-r) 0; }
  html.anim-ready .team-duo:not(.is-split) > .team-card:nth-child(1) .team-portrait::before { border-top-right-radius: 0; }
  html.anim-ready .team-duo:not(.is-split) > .team-card:nth-child(2) .team-portrait::before { border-top-left-radius: 0; }
  html.anim-ready .team-duo:not(.is-split) > .team-card:nth-child(2) { border-left-color: transparent; }
  html.anim-ready .team-duo:not(.is-split) > .team-card > .team-text > * { opacity: 0; translate: 0 12px; }

  /* Angaben nacheinander, sobald die beiden fast angekommen sind */
  .team-duo.is-split > .team-card > .team-text > :nth-child(1) { transition-delay: 0.85s; }
  .team-duo.is-split > .team-card > .team-text > :nth-child(2) { transition-delay: 0.92s; }
  .team-duo.is-split > .team-card > .team-text > :nth-child(3) { transition-delay: 0.99s; }
  .team-duo.is-split > .team-card > .team-text > :nth-child(4) { transition-delay: 1.06s; }
  .team-duo.is-split > .team-card > .team-text > :nth-child(5) { transition-delay: 1.13s; }
}

/* ─── Team (Handy ≤ 860 px): die Generationenlinie ───
   Unter Klaus' Porträt ist die linke Spalte frei: dort zieht sich eine feine Linie zu Ralph
   (1989 → 2014). Mit Bewegung: Klaus steigt mit dem Karten-Reveal aus seiner Fläche; sobald Ralphs
   Porträt im Bild ist, läuft die Linie (die Jahreszahl zählt mit, main.js), dann steigt Ralph auf.
   Ohne Bewegung / ohne JS: Linie fertig gezeichnet, Porträts stehen. Desktop: ausgeblendet. */
.team-gen { display: none; }
@media (max-width: 860px) {
  .team-duo > .team-card:nth-child(1) { position: relative; }
  .team-gen {
    display: block;
    position: absolute;
    left: 60px;                         /* Mitte der 120-px-Porträtspalte */
    top: calc(48px + 160px + 14px);     /* Kartenpolster + Porträthöhe + Luft */
    bottom: -34px;                      /* bis 14 px über Ralphs Porträt (Polster 48 px) */
    width: 0;
    pointer-events: none;
  }
  .team-gen-line {
    position: absolute;
    left: -0.5px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--accent);
    opacity: 0.55;
    transform-origin: top;
  }
  .team-gen-run { position: absolute; inset: 0; }
  .team-gen-a,
  .team-gen-b { position: absolute; left: -3.5px; display: flex; align-items: center; gap: 9px; }
  .team-gen-a { top: -3.5px; }
  .team-gen-b { bottom: -3.5px; }
  .team-gen i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .team-gen b {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
  }
}
@keyframes team-gen-draw { from { transform: scaleY(0); } }
@keyframes team-gen-run { from { transform: translateY(-100%); } }
@keyframes team-gen-fade { from { opacity: 0; } }
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  /* Porträt steigt aus seiner Fläche: erst wächst die Fläche von unten, dann steigt die Person
     von der Unterkante auf, bis der Kopf oben herausragt (die Unterkante beschneidet ohnehin) */
  html.anim-ready .team-duo .team-portrait.has-photo::before {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.7s cubic-bezier(.2, .7, .1, 1);
  }
  html.anim-ready .team-duo .team-portrait.has-photo img {
    transform: translateY(100%);
    transition: transform 1.1s cubic-bezier(.2, .7, .1, 1) 0.25s;
  }
  html.anim-ready .team-duo > .team-card:nth-child(1).in .team-portrait::before,
  html.anim-ready .team-duo > .team-card:nth-child(2).is-up .team-portrait::before { clip-path: inset(0); }
  html.anim-ready .team-duo > .team-card:nth-child(1).in .team-portrait img,
  html.anim-ready .team-duo > .team-card:nth-child(2).is-up .team-portrait img { transform: none; }

  /* Die Linie: Startpunkt 1989 erscheint, Linie und Läufer ziehen gemeinsam nach unten */
  html.anim-ready .team-gen:not(.is-run) .team-gen-line { transform: scaleY(0); }
  html.anim-ready .team-gen:not(.is-run) :is(.team-gen-a, .team-gen-run) { opacity: 0; }
  html.anim-ready .team-gen:not(.is-run) .team-gen-run { transform: translateY(-100%); }
  html.anim-ready .team-gen.is-run .team-gen-a { animation: team-gen-fade 0.35s ease 0.1s both; }
  html.anim-ready .team-gen.is-run .team-gen-line { animation: team-gen-draw 1.4s cubic-bezier(.65, 0, .35, 1) 0.35s both; }
  html.anim-ready .team-gen.is-run .team-gen-run {
    animation:
      team-gen-run 1.4s cubic-bezier(.65, 0, .35, 1) 0.35s both,
      team-gen-fade 0.3s ease 0.6s both;   /* erst sichtbar, wenn der Läufer die feste „1989“ verlassen hat */
  }
}