/* CoAgency Lab · Schriften zum Selbsthosten · Entwurf 0.1 · 06.10.2026
   Instrument Sans: Copyright 2022 The Instrument Sans Project Authors (github.com/Instrument/instrument-sans)
   Geist Mono: Copyright 2024 The Geist Project Authors (github.com/vercel/geist-font)
   Beide unter SIL Open Font License 1.1. Variable Schnitte, Teilmengen latin und latin-ext.
   Selbst hosten statt fonts.googleapis.com einbinden (Datenübertragung an Dritte vermeiden).
   Dateien byte-gleich mit 06_Marke/CI/fonts/ im Lab-Repo. */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/_astro/InstrumentSans-latin.BbzFLZTg.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/_astro/InstrumentSans-latin-ext.B5bTHO_g.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_astro/GeistMono-latin.XN7g48iV.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_astro/GeistMono-latin-ext.Bwz-egvJ.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* =========================================================================
   CoAgency Lab · Website · aus Entwurf 6 vom 12.10.2026
   Konzept „Tafeln“: Die Seite besteht aus sieben Tafeln, jede füllt den Bildschirm und rastet beim
   Scrollen ein. Oben zeichnet sich das vollständige Logo aus der CI (Zeichen und Wortmarke); fünf Sätze geben den
   Überblick, vor und zurück per Scrollen, am Ende bleiben die Prinzipien. Der Club wird an seinem Jahr als
   Kreis erklärt, die Stationen laufen beim Scrollen durch. Die Navigation unterstreicht die aktuelle Tafel.
   Clean: wenig Linien, viel Ruhe, eine Akzentfarbe. Kein JavaScript, keine Dienste Dritter.

   Änderungen gegenüber Entwurf 6:
   - keine style-Attribute mehr (CSP ohne 'unsafe-inline'): Zeitleisten der Tafeln und die
     Verzögerungen im Logo stehen jetzt hier
   - bei reduzierter Bewegung laufen auch die scroll-gekoppelten Animationen nicht, Start und Club
     zeigen dann die ruhige Fassung mit allen Sätzen und Stationen
   - Impressum und Datenschutz sind eigene Seiten statt :target-Ansichten
   ========================================================================= */
:root {
  --nacht: #0D1517; --flaeche: #15201F; --kreide: #EEF2F2; --schiefer-hell: #9FB0B1;
  --linie: #263537; --schiefer: #566064; --glut: #FF7A45; --petrol: #4FB3B0;
  --bg: var(--nacht); --surface: var(--flaeche); --text: var(--kreide); --text-2: var(--schiefer-hell);
  --line: var(--linie); --line-2: var(--schiefer); --primary: var(--glut); --accent: var(--petrol); --on-primary: var(--nacht);

  --sans: "Instrument Sans", Arial, Helvetica, sans-serif;
  --mono: "Geist Mono", Consolas, Menlo, monospace;
  --fs-h1: clamp(32px, 3.4vw + 10px, 62px);
  --fs-h2: clamp(30px, 2.6vw + 12px, 54px);
  --fs-h3: clamp(20px, .8vw + 14px, 26px);
  --fs-satz: clamp(20px, 1.1vw + 12px, 30px);
  --fs-body: clamp(16px, .25vw + 15px, 18px);
  --fs-small: 14px; --fs-mono: 13px; --fs-label: 12px;

  --maxw: 1200px; --gutter: clamp(18px, 4vw, 56px);
  --kopf: 72px;
  --takt: 4s;                               /* Dauer eines Satzes in der Überblicksleiste */
  --strich: 3px;
  --dash: repeating-linear-gradient(90deg, var(--primary) 0 6px, transparent 6px 11px);
  --dash-still: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 11px);
  color-scheme: dark;
}

html { scroll-snap-type: y mandatory; }
@media (max-height: 640px), (max-width: 760px) { html { scroll-snap-type: y proximity; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text); }
.seite { timeline-scope: --t-start, --t-lab, --t-ziel, --t-arbeit, --t-club, --t-team, --t-kontakt; font-family: var(--sans); font-size: var(--fs-body); line-height: 1.55; background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
:where(.seite) :where(p, figure, blockquote, dl, dd, h1, h2, h3, h4, ul, ol) { margin: 0; }
:where(.seite) :where(ul, ol) { padding: 0; list-style: none; }
:where(.seite) :where(h1, h2, h3, h4) { font-weight: 600; text-wrap: balance; }
.seite a { color: var(--primary); }
.seite :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zusammen { white-space: nowrap; }
.leise { color: var(--text-2); }

.label { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .09em; text-transform: uppercase; color: var(--primary); line-height: 1.4; }
.label--still { color: var(--text-2); }

.knopf { display: inline-flex; align-items: center; gap: .6em; font: 500 var(--fs-small)/1 var(--sans); padding: 15px 22px;
  background: var(--primary); color: var(--on-primary); text-decoration: none; border: 0; cursor: pointer; }
.seite a.knopf, .seite label.knopf { color: var(--on-primary); }
.knopf:hover { background: var(--text); }
.knopf__pfeil { display: inline-block; transition: transform .25s ease; }
.knopf:hover .knopf__pfeil { transform: translateX(4px); }
.knopf--leer { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.seite a.knopf--leer, .seite label.knopf--leer { color: var(--text); }
.knopf--leer:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--text); }
.textlink { font-weight: 500; text-decoration: none; color: var(--text); padding-bottom: 3px;
  background: linear-gradient(var(--primary), var(--primary)) 0 100% / 100% 2px no-repeat; cursor: pointer; }
.seite a.textlink, .seite label.textlink { color: var(--text); }
.textlink:hover { color: var(--primary); }
.sprung { position: absolute; left: var(--gutter); top: -120px; z-index: 40; }
.sprung:focus { top: 12px; }

/* ------------------------------------------------------------------ Kopf (schwebt über den Tafeln) */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px);
  background: linear-gradient(color-mix(in srgb, var(--bg) 92%, transparent), color-mix(in srgb, var(--bg) 70%, transparent) 70%, transparent); }
.top__innen { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--kopf); }
.top__logo { display: block; line-height: 0; flex: none; }
.top__logo img { height: 22px; width: auto; }
.top__nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); font-size: 15px; font-weight: 500; }
.seite .top__nav a { color: var(--text); text-decoration: none; padding-block: 8px;
  background: linear-gradient(var(--primary), var(--primary)) 0 calc(100% - 2px) / 0% 2px no-repeat; transition: background-size .3s ease; }
.seite .top__nav a:hover, .seite .top__nav a:focus-visible { background-size: 100% 2px; }
.seite .top__nav a.knopf { padding: 11px 16px; background: var(--primary); color: var(--on-primary); }
.seite .top__nav a.knopf:hover { background: var(--text); }
@media (max-width: 760px) { .top__nav a:not(.knopf) { display: none; } }
/* Scrollspy: der Link der Tafel, die die Bildschirmmitte deckt, ist unterstrichen */
@supports (animation-timeline: scroll()) {
  .seite .top__nav a:not(.knopf) { animation: nav-aktiv linear both; animation-range: entry 50% exit 50%; }
  .seite .top__nav a[href="#lab"] { animation-timeline: --t-lab; }
  .seite .top__nav a[href="#zielbild"] { animation-timeline: --t-ziel; }
  .seite .top__nav a[href="#arbeitsweise"] { animation-timeline: --t-arbeit; }
  .seite .top__nav a[href="#club"] { animation-timeline: --t-club; }
  .seite .top__nav a[href="#team"] { animation-timeline: --t-team; }
  .seite .top__nav a.knopf { animation: nav-knopf linear both; animation-timeline: --t-kontakt; animation-range: entry 50% exit 50%; }
  .seite .top__nav a:not(.knopf):hover, .seite .top__nav a:not(.knopf):focus-visible { animation: none; background-size: 100% 2px; }
}
@keyframes nav-aktiv { 0%, 100% { background-size: 0% 2px; } 0.5%, 99.5% { background-size: 100% 2px; } }
@keyframes nav-knopf { 0%, 100% { box-shadow: none; } 0.5%, 99.5% { box-shadow: inset 0 0 0 2px var(--text); } }

/* Schiene rechts: wo bin ich (Marker läuft mit dem Scrollen, wo der Browser es kann) */
.schiene { position: fixed; right: clamp(12px, 1.6vw, 24px); top: 50%; transform: translateY(-50%); z-index: 20; display: grid; gap: 14px; }
.schiene a { display: grid; grid-template-columns: auto 10px; align-items: center; gap: 10px; text-decoration: none; color: var(--text-2);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.schiene a span { opacity: 0; transition: opacity .25s ease; text-align: right; }
.schiene:hover a span, .schiene a:focus-visible span { opacity: 1; }
.schiene a i { display: block; width: 8px; height: 8px; border: 1px solid var(--line-2); justify-self: end; }
.schiene a:hover i { border-color: var(--text); }
.schiene__marker { position: absolute; right: 0; top: 0; width: 10px; height: 10px; background: var(--primary); pointer-events: none; }
@supports not (animation-timeline: scroll()) { .schiene__marker { display: none; } }
@media (max-width: 1100px) { .schiene { display: none; } }

/* ------------------------------------------------------------------ Tafeln */
.tafel { position: relative; min-height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; box-sizing: border-box;
  display: grid; align-content: center; padding: calc(var(--kopf) + 24px) 0 48px; }
.tafel__innen { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
#lab { view-timeline-name: --t-lab; }
#zielbild { view-timeline-name: --t-ziel; }
#arbeitsweise { view-timeline-name: --t-arbeit; }
#team { view-timeline-name: --t-team; }
#kontakt { view-timeline-name: --t-kontakt; }
.tafel--flaeche { background: var(--surface); }
.kopfzeile { display: grid; gap: 14px; margin-bottom: clamp(28px, 3.5vw, 48px); }
.kopfzeile h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.028em; max-width: 18ch; }
.kopfzeile p { color: var(--text-2); max-width: 56ch; text-wrap: pretty; }
.kopfzeile--zwei { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 32px; align-items: end; }
.kopfzeile--zwei .label { grid-column: 1 / -1; }
.kopfzeile--zwei h2 { grid-column: 1 / span 7; }
.kopfzeile--zwei p { grid-column: 8 / -1; }
@media (max-width: 920px) { .kopfzeile--zwei h2, .kopfzeile--zwei p { grid-column: 1 / -1; } }

/* ------------------------------------------------------------------ Tafel 1: Start (per Scroll erzählt)
   Die Tafel ist sechs Bildschirme hoch; die Bühne bleibt stehen (sticky), fünf Stopps rasten ein.
   Der Scrollweg treibt die Sätze: Satz 1 bis 5, am Ende bleiben nur die beiden Prinzipien. */
.start { text-align: center; height: auto; min-height: 0; display: block; padding: 0; view-timeline-name: --t-start; }
.start__buehne { position: sticky; top: 0; height: 100svh; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; align-content: center; padding: calc(var(--kopf) + 16px) 0 48px; }
.start__buehne .tafel__innen { display: grid; justify-items: center; gap: clamp(24px, 3.5vh, 44px); }
.stopp { display: block; height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; }
.logo { width: min(100% - 2 * var(--gutter), 920px); height: auto; overflow: visible; display: block; }
.logo .l-rost { fill: var(--primary); }
.logo .l-kreide { fill: var(--text); }
.logo .l-strich { transform-box: fill-box; transform-origin: 0 50%; }
.logo .n0 { --i: 0; } .logo .n1 { --i: 1; } .logo .n2 { --i: 2; } .logo .n3 { --i: 3; }
.logo .m-bogen, .logo .m-balken { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.start__stapel { display: grid; width: 100%; justify-items: center; }
.start__stapel > * { grid-area: 1 / 1; }
.start__satz { display: grid; justify-items: center; gap: clamp(22px, 3.2vh, 40px); width: 100%; }
.start h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.03em; max-width: 20ch; }
.start h1 em { font-style: normal; color: var(--primary); }
.ueberblick { display: grid; gap: 18px; justify-items: center; width: min(100%, 760px); }
.ueberblick__segmente { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 100%; }
.ueberblick__segmente i { display: block; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.ueberblick__segmente i::after { content: ""; position: absolute; inset: 0; background: var(--primary); transform-origin: 0 50%; transform: scaleX(1); }
.ueberblick__saetze { position: relative; width: 100%; min-height: 3.2em; font-size: var(--fs-satz); line-height: 1.3; letter-spacing: -.015em; font-weight: 500; }
.ueberblick__saetze li { position: absolute; inset: 0; opacity: 0; text-wrap: balance; }
.ueberblick__saetze li:first-child { opacity: 1; }
.ueberblick__saetze li b { color: var(--text); font-weight: 500; }
.ueberblick__saetze li span { color: var(--text-2); }
.start__aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; }
.prinzipien { display: grid; gap: 10px; opacity: 0; align-self: center; pointer-events: none; }
.prinzipien p { font-size: clamp(26px, 2.6vw + 10px, 56px); line-height: 1.1; letter-spacing: -.028em; font-weight: 600; }
.prinzipien p + p { color: var(--primary); }
.start__hinweis { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }

/* Scrollweg treibt die Bühne: contain 0 % = Tafelanfang, contain 100 % = letzter Stopp */
@supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) {
  .ueberblick__saetze li { animation: linear both; animation-timeline: --t-start; animation-range: contain; }
  .ueberblick__saetze li:nth-child(1) { animation-name: s-satz1; }
  .ueberblick__saetze li:nth-child(2) { animation-name: s-satz2; }
  .ueberblick__saetze li:nth-child(3) { animation-name: s-satz3; }
  .ueberblick__saetze li:nth-child(4) { animation-name: s-satz4; }
  .ueberblick__saetze li:nth-child(5) { animation-name: s-satz5; }
  .ueberblick__segmente i::after { animation: linear both; animation-timeline: --t-start; animation-range: contain; }
  .ueberblick__segmente i:nth-child(2)::after { animation-name: s-seg2; }
  .ueberblick__segmente i:nth-child(3)::after { animation-name: s-seg3; }
  .ueberblick__segmente i:nth-child(4)::after { animation-name: s-seg4; }
  .ueberblick__segmente i:nth-child(5)::after { animation-name: s-seg5; }
  .start__satz { animation: s-weg linear both; animation-timeline: --t-start; animation-range: contain; }
  .prinzipien { animation: s-prinzipien linear both; animation-timeline: --t-start; animation-range: contain; }
  .start__hinweis { animation: s-hinweis linear both; animation-timeline: --t-start; animation-range: contain; }
} }
/* Ohne Scroll-Driven Animations oder bei reduzierter Bewegung: eine ruhige Tafel mit allen fünf
   Sätzen und den Prinzipien. Zwei gleiche Blöcke, weil sich @supports und @media nicht verodern lassen. */
@supports not (animation-timeline: scroll()) {
  .start__buehne { position: static; height: auto; min-height: 100svh; }
  .stopp { display: none; }
  .start__stapel { gap: 28px; }
  .start__stapel > * { grid-area: auto; }
  .ueberblick__segmente { display: none; }
  .ueberblick__saetze { min-height: 0; display: grid; gap: 10px; }
  .ueberblick__saetze li { position: static; opacity: 1; }
  .prinzipien { opacity: 1; }
  .start__hinweis { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .start__buehne { position: static; height: auto; min-height: 100svh; }
  .stopp { display: none; }
  .start__stapel { gap: 28px; }
  .start__stapel > * { grid-area: auto; }
  .ueberblick__segmente { display: none; }
  .ueberblick__saetze { min-height: 0; display: grid; gap: 10px; }
  .ueberblick__saetze li { position: static; opacity: 1; }
  .prinzipien { opacity: 1; }
  .start__hinweis { display: none; }
}
@keyframes s-satz1 { 0%, 4% { opacity: 1; } 10%, 100% { opacity: 0; } }
@keyframes s-satz2 { 0%, 10% { opacity: 0; } 16%, 24% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes s-satz3 { 0%, 30% { opacity: 0; } 36%, 44% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes s-satz4 { 0%, 50% { opacity: 0; } 56%, 64% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes s-satz5 { 0%, 70% { opacity: 0; } 76%, 84% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes s-seg2 { 0%, 12% { transform: scaleX(0); } 18%, 100% { transform: scaleX(1); } }
@keyframes s-seg3 { 0%, 32% { transform: scaleX(0); } 38%, 100% { transform: scaleX(1); } }
@keyframes s-seg4 { 0%, 52% { transform: scaleX(0); } 58%, 100% { transform: scaleX(1); } }
@keyframes s-seg5 { 0%, 72% { transform: scaleX(0); } 78%, 100% { transform: scaleX(1); } }
@keyframes s-weg { 0%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes s-prinzipien { 0%, 90% { opacity: 0; transform: translateY(12px); } 98%, 100% { opacity: 1; transform: none; } }
@keyframes s-hinweis { 0%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* ------------------------------------------------------------------ Tafel 2: Lab */
.lab { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 32px; align-items: center; }
.lab__text { grid-column: 1 / span 6; display: grid; gap: 22px; }
.lab__text h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.028em; max-width: 14ch; }
.lab__text p { color: var(--text-2); max-width: 50ch; text-wrap: pretty; }
.lab__text p:first-of-type { color: var(--text); font-size: clamp(17px, .4vw + 15px, 20px); }
.zwei { grid-column: 7 / -1; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.zwei article { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 22px; align-items: start; padding: clamp(20px, 2.4vw, 32px); background: var(--bg); transition: background .3s ease; }
.zwei article:hover { background: var(--surface); }
.zwei svg { grid-row: 1 / span 3; width: 96px; height: auto; overflow: visible; margin-top: 6px; }
.zwei h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.015em; }
.zwei p { color: var(--text-2); font-size: var(--fs-small); line-height: 1.5; max-width: 40ch; }
.i-dash { stroke: var(--primary); stroke-width: 3; stroke-dasharray: 6 5; fill: none; }
.i-solid { stroke: var(--primary); stroke-width: 3; fill: none; stroke-linejoin: round; }
.i-weiss-dash { stroke: var(--text); stroke-width: 3; stroke-dasharray: 6 5; fill: none; }
.i-knoten { fill: var(--primary); }
.i-zieh { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s cubic-bezier(.4, 0, .2, 1); }
.zwei article:hover .i-zieh { stroke-dashoffset: 0; }
@media (max-width: 920px) { .lab__text, .zwei { grid-column: 1 / -1; } }
@media (max-width: 520px) { .zwei article { grid-template-columns: 1fr; } .zwei svg { grid-row: auto; } }

/* ------------------------------------------------------------------ Tafel 3: Zielbild (ohne JavaScript) */
.uebergabe { display: grid; gap: clamp(20px, 3vh, 32px); }
.u-spur { display: grid; grid-template-columns: 24px repeat(3, minmax(0, 1fr)); align-items: center; padding-right: 12px; }
.u-spur li { position: relative; height: 24px; }
.u-knoten { position: absolute; left: 0; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); background: var(--bg); border: 2px solid var(--line-2); transition: border-color .35s ease, background .35s ease; z-index: 1; }
.tafel--flaeche .u-knoten { background: var(--surface); }
.u-seg .u-knoten { left: auto; right: -8px; }
.u-strich { position: absolute; left: 0; right: 8px; top: 50%; height: var(--strich); transform: translateY(-50%); background: var(--dash-still) 0 50% / 100% 1px no-repeat; }
.u-strich::after { content: ""; position: absolute; inset: 0; background: var(--primary); transform: scaleX(0); transform-origin: 0 50%; transition: transform .65s cubic-bezier(.4, 0, .2, 1); }
.u-start .u-knoten { border-color: var(--primary); background: var(--primary); }
.uebergabe:has(#u1:checked) .u-seg[data-i="1"] .u-strich::after,
.uebergabe:has(#u2:checked) :is(.u-seg[data-i="1"], .u-seg[data-i="2"]) .u-strich::after,
.uebergabe:has(#u3:checked) .u-seg .u-strich::after { transform: scaleX(1); }
.uebergabe:has(#u1:checked) .u-seg[data-i="1"] .u-knoten,
.uebergabe:has(#u2:checked) :is(.u-seg[data-i="1"], .u-seg[data-i="2"]) .u-knoten,
.uebergabe:has(#u3:checked) .u-seg .u-knoten { border-color: var(--primary); background: var(--primary); transition-delay: .5s; }
.uebergabe:has(#u0:checked) .u-seg[data-i="1"] .u-knoten, .uebergabe:has(#u1:checked) .u-seg[data-i="2"] .u-knoten, .uebergabe:has(#u2:checked) .u-seg[data-i="3"] .u-knoten { border-color: var(--primary); }
.u-schritt { display: none; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px 32px; align-items: stretch; }
.uebergabe:has(#u0:checked) .u-schritt[data-i="0"], .uebergabe:has(#u1:checked) .u-schritt[data-i="1"],
.uebergabe:has(#u2:checked) .u-schritt[data-i="2"], .uebergabe:has(#u3:checked) .u-schritt[data-i="3"] { display: grid; }
.u-agent { grid-column: 1 / span 5; display: grid; gap: 12px; align-content: start; padding: clamp(18px, 2.4vw, 28px); background: var(--bg); border: 1px solid var(--line); }
.u-agent h3, .u-mensch h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.012em; }
.u-agent ul { display: grid; gap: 7px; }
.u-agent li { position: relative; padding-left: 20px; color: var(--text-2); font-size: var(--fs-small); line-height: 1.5; }
.u-agent li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--text); }
.u-mensch { grid-column: 7 / -1; display: grid; gap: 14px; align-content: start; padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--primary); background: var(--bg); }
.u-mensch .label::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--primary); margin-right: 10px; vertical-align: -1px; }
.u-mensch p { color: var(--text-2); max-width: 40ch; }
.u-mensch p.u-frage { color: var(--text); font-size: var(--fs-satz); line-height: 1.15; letter-spacing: -.02em; font-weight: 600; max-width: 18ch; }
.u-aktionen { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 4px; }
.u-antwort { display: none; gap: 8px; padding-top: 14px; border-top: 1px dashed var(--line-2); font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); }
.u-antwort b { font-family: var(--mono); font-weight: 400; font-size: var(--fs-mono); color: var(--accent); }
.uebergabe:has(#f0:checked) [data-i="0"] .u-antwort, .uebergabe:has(#f1:checked) [data-i="1"] .u-antwort, .uebergabe:has(#f2:checked) [data-i="2"] .u-antwort { display: grid; }
.uebergabe:has(#f0:checked) label[for="f0"], .uebergabe:has(#f1:checked) label[for="f1"], .uebergabe:has(#f2:checked) label[for="f2"] { color: var(--text-2); background-image: var(--dash-still); }
.uebergabe:has(#u1:focus-visible) label[for="u1"], .uebergabe:has(#u2:focus-visible) label[for="u2"], .uebergabe:has(#u3:focus-visible) label[for="u3"], .uebergabe:has(#u0:focus-visible) label[for="u0"],
.uebergabe:has(#f0:focus-visible) label[for="f0"], .uebergabe:has(#f1:focus-visible) label[for="f1"], .uebergabe:has(#f2:focus-visible) label[for="f2"] { outline: 2px solid var(--accent); outline-offset: 3px; }
.u-fertig .u-ergebnis { grid-column: 1 / span 7; display: grid; gap: 14px; }
.u-fertig h3 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.025em; max-width: 16ch; }
.u-fertig .u-weiter { grid-column: 8 / -1; display: grid; gap: 14px; padding-top: 8px; }
.u-fertig .u-weiter p { color: var(--text-2); max-width: 36ch; }
.u-zaehler { display: flex; gap: 28px; flex-wrap: wrap; font-family: var(--mono); font-size: var(--fs-mono); color: var(--text-2); }
.u-zaehler b { display: block; font-family: var(--sans); font-size: clamp(32px, 2vw + 16px, 48px); line-height: 1; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.u-zaehler li { display: grid; gap: 6px; }
.marke { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .04em; padding: 4px 9px; background: var(--accent); color: var(--nacht); }
.marke--offen { background: transparent; color: var(--text-2); border: 1px dashed var(--line-2); }
@media (max-width: 860px) { .u-agent, .u-mensch, .u-fertig .u-ergebnis, .u-fertig .u-weiter { grid-column: 1 / -1; } }

/* ------------------------------------------------------------------ Tafel 4: Arbeitsweise */
.schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.schritt { position: relative; display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line-2); }
.schritt::before { content: ""; position: absolute; left: 0; top: -1px; width: 28px; height: var(--strich); background: var(--primary); }
.schritt__nr { font-family: var(--mono); font-size: var(--fs-mono); color: var(--text-2); }
.schritt h3 { font-size: var(--fs-h3); line-height: 1.2; }
.schritt p { color: var(--text-2); font-size: var(--fs-small); line-height: 1.5; max-width: 30ch; }
@media (max-width: 900px) { .schritte { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .schritte { grid-template-columns: 1fr; gap: 18px; } }
.skala { margin-top: clamp(36px, 6vh, 64px); display: grid; gap: 20px; }
.skala__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.skala__kopf h3 { font-size: var(--fs-h3); line-height: 1.2; }
.skala__kopf p { color: var(--text-2); font-size: var(--fs-small); }
.stufen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stufe { position: relative; display: grid; gap: 6px; align-content: start; padding: 26px 18px 0 0; }
.stufe::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: var(--strich); }
.stufe[data-stand="belegt"]::before { background: var(--primary); }
.stufe[data-stand="offen"]::before { background: var(--dash) 0 50% / 100% 1px no-repeat; }
.stufe::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 19px; background: var(--text); }
.stufe__name { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.stufe__text { font-size: var(--fs-small); line-height: 1.45; color: var(--text-2); max-width: 24ch; }
@media (max-width: 760px) {
  .stufen { grid-template-columns: 1fr 1fr; row-gap: 18px; }
}

/* ------------------------------------------------------------------ Tafel 5: Club, das Jahr als Kreis (per Scroll erzählt)
   Fünf Bildschirme hoch, die Bühne bleibt stehen. Der Scrollweg läuft die Stationen ab:
   Start, Update Call, Build Day, Hackathon, Abschluss. Der Bogen im Ring füllt sich mit. */
.club { height: auto; min-height: 0; display: block; padding: 0; view-timeline-name: --t-club; }
.club__buehne { position: sticky; top: 0; height: 100svh; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; align-content: center; padding: calc(var(--kopf) + 12px) 0 40px; background: var(--surface); }
.club__kopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 32px; align-items: end; margin-bottom: clamp(16px, 3vh, 32px); }
.club__logo { grid-column: 1 / span 7; display: grid; gap: 12px; }
.club__logo h2 { line-height: 0; }
.club__logo img { height: clamp(44px, 3.6vw + 18px, 76px); width: auto; max-width: 100%; }
.club__motto { grid-column: 8 / -1; display: grid; gap: 6px; }
.club__motto p { font-size: var(--fs-satz); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.club__motto p span { color: var(--primary); }
.club__motto small { font-family: var(--mono); font-size: var(--fs-mono); color: var(--text-2); }
@media (max-width: 920px) { .club__logo, .club__motto { grid-column: 1 / -1; } .club__motto { display: none; } }

.jahr { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 64px); align-items: center; }
.ring { display: block; width: 100%; max-width: min(440px, 52vh); height: auto; margin-inline: auto; overflow: visible; }
.r-kreis { stroke: var(--line); stroke-width: 1.5; fill: none; }
.r-bogen { stroke: var(--primary); stroke-width: 3; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 200px 200px; }
.r-tick { stroke: var(--line-2); stroke-width: 1; }
.r-start { stroke: var(--text); stroke-width: 3; }
.r-call { fill: var(--surface); stroke: var(--accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.r-build { fill: var(--primary); transform-box: fill-box; transform-origin: center; }
.r-hack { fill: transparent; stroke: var(--primary); stroke-width: 1.5; stroke-dasharray: 3 2; transform-box: fill-box; transform-origin: center; }
.r-monat { font-family: var(--mono); font-size: 13px; fill: var(--text-2); }
.r-jahr { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; fill: var(--primary); }
.r-mitte-k { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; fill: var(--text-2); }
.r-mitte { font-family: var(--sans); font-size: 34px; font-weight: 600; letter-spacing: -.02em; fill: var(--text); }
.r-mitte-u { font-family: var(--mono); font-size: 12px; fill: var(--text-2); }

.stationen { display: grid; gap: 18px; }
.stationen__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.stationen__tabs a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid var(--line-2); font: 500 var(--fs-small)/1 var(--sans); color: var(--text); text-decoration: none; transition: border-color .25s ease, background .25s ease; }
.seite .stationen__tabs a { color: var(--text); }
.stationen__tabs a:hover { border-color: var(--text); }
.stationen__tabs a i { display: inline-block; width: 10px; height: 10px; flex: none; }
.stationen__tabs a small { font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.s-start i, .s-ende i { width: 2px; height: 14px; background: var(--text); }
.s-call i { border-radius: 50%; border: 2px solid var(--accent); width: 8px; height: 8px; }
.s-build i { background: var(--primary); }
.s-hack i { border: 1.5px dashed var(--primary); box-sizing: border-box; width: 11px; height: 11px; }
.stationen__panels { display: grid; }
.panel { grid-area: 1 / 1; display: grid; gap: 12px; opacity: 0; padding-top: 18px; border-top: 1px solid var(--line); }
.panel:first-child { opacity: 1; }
.panel h3 { font-size: var(--fs-satz); line-height: 1.12; letter-spacing: -.02em; max-width: 24ch; }
.panel p { color: var(--text-2); max-width: 56ch; text-wrap: pretty; }
.panel .z-nutzen { display: grid; gap: 6px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); margin-top: 4px; }
.panel .z-nutzen p { font-size: var(--fs-small); line-height: 1.5; max-width: 54ch; }
.club__stopp { display: block; height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; }
@media (max-width: 860px) {
  .jahr { grid-template-columns: 1fr; gap: 14px; }
  .ring { max-width: min(300px, 36vh); }
  .stationen__tabs a small { display: none; }
  .panel p { font-size: var(--fs-small); }
  .panel .z-nutzen { display: none; }
}

@supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) {
  .panel { animation: linear both; animation-timeline: --t-club; animation-range: contain; }
  .panel:nth-child(1) { animation-name: c-panel1; }
  .panel:nth-child(2) { animation-name: c-panel2; }
  .panel:nth-child(3) { animation-name: c-panel3; }
  .panel:nth-child(4) { animation-name: c-panel4; }
  .panel:nth-child(5) { animation-name: c-panel5; }
  .stationen__tabs a { animation: linear both; animation-timeline: --t-club; animation-range: contain; }
  .stationen__tabs a:nth-child(1) { animation-name: c-tab1; }
  .stationen__tabs a:nth-child(2) { animation-name: c-tab2; }
  .stationen__tabs a:nth-child(3) { animation-name: c-tab3; }
  .stationen__tabs a:nth-child(4) { animation-name: c-tab4; }
  .stationen__tabs a:nth-child(5) { animation-name: c-tab5; }
  .r-bogen { animation: c-bogen linear both; animation-timeline: --t-club; animation-range: contain; }
  .r-start { animation: c-start linear both; animation-timeline: --t-club; animation-range: contain; }
  .r-call { animation: c-call linear both; animation-timeline: --t-club; animation-range: contain; }
  .r-build { animation: c-build linear both; animation-timeline: --t-club; animation-range: contain; }
  .r-hack { animation: c-hack linear both; animation-timeline: --t-club; animation-range: contain; }
} }
/* Ohne Scroll-Driven Animations oder bei reduzierter Bewegung: alle Stationen untereinander */
@supports not (animation-timeline: scroll()) {
  .club__buehne { position: static; height: auto; min-height: 100svh; }
  .club__stopp { display: none; }
  .stationen__panels { gap: 18px; }
  .panel { grid-area: auto; opacity: 1; }
  .r-bogen { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .club__buehne { position: static; height: auto; min-height: 100svh; }
  .club__stopp { display: none; }
  .stationen__panels { gap: 18px; }
  .panel { grid-area: auto; opacity: 1; }
  .r-bogen { stroke-dashoffset: 0; }
}
/* Fenster der Stationen: 0–12,5 · 12,5–37,5 · 37,5–62,5 · 62,5–87,5 · 87,5–100 */
@keyframes c-panel1 { 0%, 9% { opacity: 1; } 15%, 100% { opacity: 0; } }
@keyframes c-panel2 { 0%, 15% { opacity: 0; } 21%, 34% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes c-panel3 { 0%, 40% { opacity: 0; } 46%, 59% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes c-panel4 { 0%, 65% { opacity: 0; } 71%, 84% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes c-panel5 { 0%, 90% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes c-tab1 { 0%, 12% { border-color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); } 13%, 100% { border-color: var(--line-2); background: transparent; } }
@keyframes c-tab2 { 0%, 12% { border-color: var(--line-2); background: transparent; } 13%, 37% { border-color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); } 38%, 100% { border-color: var(--line-2); background: transparent; } }
@keyframes c-tab3 { 0%, 37% { border-color: var(--line-2); background: transparent; } 38%, 62% { border-color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); } 63%, 100% { border-color: var(--line-2); background: transparent; } }
@keyframes c-tab4 { 0%, 62% { border-color: var(--line-2); background: transparent; } 63%, 87% { border-color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); } 88%, 100% { border-color: var(--line-2); background: transparent; } }
@keyframes c-tab5 { 0%, 87% { border-color: var(--line-2); background: transparent; } 88%, 100% { border-color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); } }
@keyframes c-bogen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes c-start { 0%, 12% { stroke: var(--primary); } 13%, 100% { stroke: var(--text); } }
@keyframes c-call { 0%, 12% { fill: var(--surface); transform: scale(1); } 18%, 32% { fill: var(--accent); transform: scale(1.35); } 38%, 100% { fill: var(--surface); transform: scale(1); } }
@keyframes c-build { 0%, 38% { transform: scale(1); } 44%, 57% { transform: scale(1.45); } 63%, 100% { transform: scale(1); } }
@keyframes c-hack { 0%, 63% { fill: transparent; transform: scale(1); } 69%, 82% { fill: color-mix(in srgb, var(--primary) 35%, transparent); transform: scale(1.35); } 88%, 100% { fill: transparent; transform: scale(1); } }

/* ------------------------------------------------------------------ Tafel 6: Team und Wissenschaft */
.team { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 32px; align-items: start; }
.team__forschung { grid-column: 1 / span 6; display: grid; gap: 16px; }
.team__forschung h3 { font-size: var(--fs-satz); line-height: 1.1; letter-spacing: -.02em; max-width: 16ch; }
.team__forschung p { color: var(--text-2); max-width: 50ch; text-wrap: pretty; }
.team__haw { padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.team__haw p { color: var(--text); font-weight: 600; }
.menschen { grid-column: 8 / -1; display: grid; gap: 28px; }
.mensch { display: grid; gap: 8px; padding-top: 18px; border-top: var(--strich) solid var(--text); }
.mensch h3 { font-size: var(--fs-satz); letter-spacing: -.022em; line-height: 1.06; }
@media (max-width: 920px) { .team__forschung, .menschen { grid-column: 1 / -1; } }

/* ------------------------------------------------------------------ Tafel 7: Kontakt */
.kontakt { display: grid; gap: clamp(32px, 6vh, 64px); }
.kontakt dl { border-top: 1px solid var(--line); }
.kontakt__zeile { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px 32px; padding-block: 22px; border-bottom: 1px solid var(--line); align-items: baseline; }
.kontakt__zeile dt { grid-column: 1 / span 4; }
.kontakt__zeile dd { grid-column: 5 / -1; font-size: clamp(20px, 1.3vw + 13px, 34px); letter-spacing: -.012em; line-height: 1.2; overflow-wrap: anywhere; }
.seite .kontakt__zeile a { color: var(--text); text-decoration: none; background: linear-gradient(var(--primary), var(--primary)) 0 100% / 100% 2px no-repeat; }
.seite .kontakt__zeile a:hover { color: var(--primary); }
@media (max-width: 640px) { .kontakt__zeile dt, .kontakt__zeile dd { grid-column: 1 / -1; } }
.fuss { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 32px; align-items: start; padding-top: 24px; border-top: 1px solid var(--line); }
.fuss__logo { grid-column: 1 / span 4; line-height: 0; }
.fuss__logo img { height: 20px; width: auto; }
.fuss__angaben { grid-column: 5 / -1; display: grid; gap: 10px; font-size: var(--fs-small); color: var(--text-2); }
.pflicht { display: flex; flex-wrap: wrap; gap: 4px 0; font-family: var(--mono); font-size: var(--fs-label); }
.pflicht li { white-space: nowrap; }
.pflicht li + li::before { content: "·"; margin-inline: 10px; }
.fuss__zeile { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; }
.seite .fuss__zeile a { color: var(--text); }
@media (max-width: 760px) { .fuss__logo, .fuss__angaben { grid-column: 1 / -1; } }

/* Rechtstexte: eigene Seiten /impressum/ und /datenschutz/ */
.recht { min-height: 100svh; background: var(--bg); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.recht__kopf { position: sticky; top: 0; z-index: 1; background: var(--bg); border-bottom: 1px solid var(--line); }
.recht__kopf a:first-child { line-height: 0; }
.recht > .tafel__innen { padding-bottom: 48px; }
.recht__kopf .tafel__innen { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; }
.recht__kopf img { height: 20px; width: auto; }
.recht .inhalt { width: min(100% - 2 * var(--gutter), 760px); margin-inline: auto; padding-block: clamp(40px, 6vw, 88px); display: grid; gap: 20px; }
.recht h1 { font-size: clamp(34px, 2.4vw + 18px, 52px); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 8px; }
.recht h2 { font-size: var(--fs-h3); line-height: 1.25; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.recht p, .recht li, .recht dd { color: var(--text-2); max-width: 64ch; }
.recht ul { padding-left: 1.2em; list-style: disc; display: grid; gap: 8px; }
.recht dl { display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr); gap: 8px 22px; }
.recht dt { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); padding-top: .45em; }
.recht dd { overflow-wrap: anywhere; }
.recht strong { color: var(--text); }
.recht .offen { font-family: var(--mono); font-size: .86em; color: var(--primary); border: 1px dashed currentColor; padding: 0 4px; }
.recht .inhalt > p:not(.stand) a { color: var(--text); }
.recht .stand { font-family: var(--mono); font-size: var(--fs-mono); color: var(--text-2); }
@media (max-width: 560px) { .recht dl { grid-template-columns: 1fr; } }

/* Vorschau-Banner, nur außerhalb des Freigabe-Builds */
.vorschau-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--glut); color: var(--nacht);
  font: 500 12px/1.4 var(--mono); letter-spacing: .04em; text-align: center; padding: 6px 16px; }

/* ------------------------------------------------------------------ Bewegung
   1. Das Logo zeichnet sich einmal: Zulauf, der gestrichelte Teil des C, das C mit dem Querstrich durch
      das A, der Auslauf, dann die Wortmarke „CoAgency Lab“.
   2. Die Überblicksleiste folgt dem Scrollweg: ein Stopp je Satz, vor und zurück.
   3. Der Marker der Schiene läuft mit dem Scrollen.
   Bei reduzierter Bewegung steht alles still: Logo fertig, alle fünf Sätze und die Prinzipien
   untereinander, der Club mit allen Stationen. */
@media (prefers-reduced-motion: no-preference) {
  .logo .l-zulauf .l-strich { animation: strich .14s linear both; animation-delay: calc(.2s + var(--i) * 70ms); }
  .logo .l-bogenstrich { animation: auftauchen .16s ease-out both; animation-delay: calc(.62s + var(--i) * 120ms); }
  .logo .m-bogen { animation: zeichnen .72s cubic-bezier(.45, .05, .35, 1) .96s both; }
  .logo .m-balken { animation: zeichnen .4s cubic-bezier(.3, 0, .2, 1) 1.68s both; }
  .logo .l-a { animation: auftauchen .7s ease-out .3s both; }
  .logo .l-auslauf .l-strich { animation: strich .14s linear both; animation-delay: calc(2.1s + var(--i) * 70ms); }
  .logo .l-wort { animation: wischen .9s cubic-bezier(.3, .6, .2, 1) 2.3s both; }
  /* Ohne Scroll-Timelines nur einblenden: s-weg liefe dort zeitgesteuert mit 0 s und ließe den
     Satz sofort verschwinden. */
  .start__satz { animation: einblenden .8s ease-out 2.4s both; }
  @supports (animation-timeline: scroll()) {
    .start__satz { animation: einblenden .8s ease-out 2.4s both, s-weg linear both; animation-timeline: auto, --t-start; animation-range: normal, contain; }
    .schiene__marker { animation: schiene linear both; animation-timeline: scroll(root block); }
  }
}
@keyframes strich { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes auftauchen { from { opacity: 0; } to { opacity: 1; } }
@keyframes zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes wischen { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% -2% -10% 0); } }
@keyframes einblenden { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes schiene { from { top: 0; } to { top: calc(100% - 10px); } }