/* Startseite (DE und EN). Übernommen aus directions/plakat.html; ohne Vorschau-Werkzeug und ohne Theme-Knopf,
   die Farben folgen nur noch der Einstellung des Geräts. */
@font-face{font-family:"Archivo";src:url(/fonts/archivo-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Martian Mono";src:url(/fonts/martian-normal.woff2) format("woff2");font-weight:100 800;font-stretch:75% 112.5%;font-style:normal;font-display:swap}

:root{
  --bg:#EDEDE9; --ink:#151515; --ink-2:#56565B; --accent:#5B4FE5; --on-accent:#F4F4F0; --mark-t:#5B4FE5; --green:#3FAE66; --red:#D33A2F; --purple:#9B2FE8; --line:1.5px;
  --gutter:max(24px,calc((100% - 1392px) / 2));
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#101010; --ink:#E8E8E4; --ink-2:#A6A6AB; --accent:#8F87FF; --on-accent:#101010; --mark-t:#8F87FF; --green:#9AE6AE; --red:#FF9A91; --purple:#C77DFF; color-scheme:dark}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 "Archivo",system-ui,sans-serif;font-stretch:100%;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent);color:var(--on-accent)}
.caps{font-family:"Martian Mono",ui-monospace,Consolas,monospace;font-stretch:87.5%;font-size:11.5px;line-height:1.5;letter-spacing:.07em;text-transform:uppercase}
.display{font-family:"Archivo",sans-serif;font-stretch:112%;font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:.9;margin:0}
/* Inhalt bleibt auch auf großen Bildschirmen bei max. 1392 px Breite, Hintergründe laufen trotzdem durch */
.pad{padding-inline:var(--gutter)}
.poster{background:var(--bg)}
.lg-ink{fill:var(--ink)}
.lg-acc{fill:var(--mark-t)}
.u{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:4px}
.btn{display:inline-flex;align-items:center;height:46px;padding:0 18px;border:var(--line) solid var(--ink);background:none;color:var(--ink);text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-accent:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn:disabled{opacity:.6;cursor:progress}
.section-label{display:block;margin-bottom:22px;color:var(--ink-2)}

/* Einstieg */
.hero{position:relative;min-height:100svh;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto}
.bar{position:relative;z-index:2;display:flex;align-items:center;gap:28px;height:66px}
.logo{height:44px;width:auto;display:block}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a,.bar .lang a{text-decoration:none}
.nav a:hover{color:var(--accent)}
.lang{color:var(--ink-2)}
.lang [aria-current]{color:var(--ink);font-weight:600}
.cta{display:inline-flex;align-items:center;height:34px;padding:0 12px;background:var(--ink);color:var(--bg);text-decoration:none;transition:background-color .2s,color .2s}
.cta:hover{background:var(--accent);color:var(--on-accent)}
/* Das ganze Logo, ohne Anschnitt, so groß wie möglich: rechts bis fast an den Bildschirmrand (--lr) statt nur bis zur
   Inhaltskante, höchstens 80 % der Bildschirmhöhe, und nie breiter als der Platz rechts von „Smart.“ (Textbreite =
   4,30 × Schriftgröße, gemessen, plus Abstand), sonst liegt der Flügel im Text. */
.giant{--lr:max(24px,min(4vw,(100vw - 1392px) / 2));position:absolute;z-index:0;height:min(80vh,calc((100vw - var(--lr) - max(24px,(100vw - 1392px) / 2) - 4.66 * min(13vw,190px)) / .9503));right:var(--lr);top:13vh;pointer-events:none}
.giant svg{display:block;height:100%;width:auto}
/* Drei Logo-Teile als eigene Ebenen übereinander, damit jedes Teil quer über den Bildschirm fliegen kann */
.g-set{position:relative;height:100%}
.g-l,.g-r,.g-ghost{position:absolute;left:0;top:0}
.g-ghost{opacity:0}
.g-ghost-a{--ink:var(--accent);--mark-t:var(--accent)}
.g-ghost-b{--ink:var(--green);--mark-t:var(--green)}
.h1-big .w{display:inline-block;transform-origin:0 100%}
/* „Lazy.“ hängt leicht schief, passend zum Faul-Sein (Drehpunkt unten links) */
.h1-big .w2{transform:rotate(-3.5deg)}
.hero h1{position:relative;z-index:1;align-self:center;margin:0}
.h1-big{display:block;font-size:clamp(64px,13vw,190px);margin-left:-.04em}
.h1-sub{display:block;margin-top:22px;font-weight:600;font-size:clamp(17px,1.5vw,22px);line-height:1.3;letter-spacing:-.005em;max-width:30ch}
.hero-foot{position:relative;z-index:1;padding-bottom:86px}
.hero-foot p{max-width:46ch;font-size:18px;line-height:1.55}
.hero-foot b{font-weight:650}

/* Haltung */
.mindset{padding-top:14vh;padding-bottom:14vh;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end}
.mindset h2{font-size:clamp(36px,6.4vw,108px)}
.strike{position:relative;white-space:nowrap}
/* Handgezogenes X. Gleichmäßig skaliert (kein Verzerren), weil das Wort immer ca. 7 × so breit wie hoch ist. */
.scribble{position:absolute;left:-.06em;top:0;width:calc(100% + .12em);height:auto;overflow:visible;fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.mindset .text p{font-size:19px;line-height:1.55;max-width:40ch}
.mindset .text p+p{margin-top:14px}

/* Leistungen */
.words{padding-top:12vh;padding-bottom:12vh}
.words .intro{display:flex;justify-content:space-between;align-items:end;gap:16px 32px;flex-wrap:wrap;margin-bottom:26px}
.words .intro h2{margin:0}
.words .intro p{max-width:42ch;color:var(--ink-2)}
.word{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42ch);align-items:end;column-gap:40px;padding:18px 0 20px;border-top:var(--line) solid var(--ink)}
.word:last-child{border-bottom:var(--line) solid var(--ink)}
.word h3{font-size:clamp(28px,5.4vw,92px);transition:color .25s}
.word:hover h3{color:var(--accent)}
.word p{font-size:16.5px;line-height:1.55}
.word .ex{margin-top:8px;font-size:15px;color:var(--ink-2)}

/* Arbeitsweise: links Überschrift (bleibt stehen), rechts die Schritte */
.block{background:var(--accent);color:var(--on-accent);padding:12vh max(24px,calc((100% - 1240px) / 2))}
.block-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.block-head{position:sticky;top:12vh}
.block h2{font-size:clamp(34px,4.4vw,72px);margin-bottom:26px}
.block-head p{font-size:18px;line-height:1.6;max-width:36ch}
.steps{list-style:none;margin:0;padding:0}
.steps li{padding:22px 0 24px;border-top:var(--line) solid color-mix(in srgb,var(--on-accent) 45%,transparent)}
.steps li:last-child{border-bottom:var(--line) solid color-mix(in srgb,var(--on-accent) 45%,transparent)}
.step-head{display:flex;align-items:baseline;gap:18px;margin-bottom:8px}
.steps .n{opacity:.75;min-width:22px}
.steps h3{margin:0;font-weight:700;font-stretch:108%;font-size:clamp(20px,1.7vw,25px);line-height:1.2;letter-spacing:-.012em}
.steps p{font-size:17px;line-height:1.6;max-width:54ch;padding-left:40px}

/* Projekt */
.project{padding-top:14vh;padding-bottom:14vh}
.project h2{font-size:clamp(34px,6vw,100px);margin-bottom:6vh}
.project-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,5vw,72px);align-items:start}
.preview{margin:0}
.preview img{display:block;width:100%;height:auto;border:var(--line) solid var(--ink);box-shadow:12px 12px 0 var(--accent)}
.preview figcaption{margin-top:22px;color:var(--ink-2)}
.pair{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:10px}
.pair .logo{height:42px}
.pair .x{font-size:14px;color:var(--ink-2)}
.op-logo{height:50px;width:auto;display:block}
.op-dark{display:none}
.pair-cap{color:var(--ink-2);margin-bottom:28px}
.project .lead{font-size:clamp(20px,1.8vw,25px);line-height:1.35;font-weight:600;letter-spacing:-.01em;margin-bottom:16px}
.project .copy p+p{margin-top:14px}
.project .copy .btn{margin-top:26px}

/* Über mich */
.me{padding-top:14vh;padding-bottom:14vh}
.me-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:end;margin-bottom:10vh}
.me-top .num{font-size:clamp(88px,12.5vw,210px);letter-spacing:-.05em;line-height:.82;color:var(--green);white-space:nowrap;font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.num-cap{display:block;margin-top:14px}
.me-lead{font-weight:700;font-stretch:108%;font-size:clamp(22px,2.2vw,32px);line-height:1.2;letter-spacing:-.015em;margin-bottom:14px}
.me-text p:not(.me-lead){font-size:18px;line-height:1.6;max-width:48ch}
.traits{border-top:var(--line) solid var(--ink)}
.trait{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:40px;padding:26px 0 30px;border-bottom:var(--line) solid var(--ink)}
.trait h3{margin:0;font-family:"Archivo",sans-serif;font-stretch:112%;font-weight:800;font-size:clamp(20px,2vw,28px);line-height:1.1;letter-spacing:-.02em;text-transform:uppercase}
.trait p{font-size:17px;line-height:1.6;max-width:60ch}
.founder{margin:10vh 0 0;display:grid;grid-template-columns:minmax(0,1fr);max-width:62rem}
.founder blockquote{margin:0;padding-left:28px;border-left:4px solid var(--accent)}
.founder-label{color:var(--ink-2);margin-bottom:18px}
.founder blockquote p{font-weight:500;font-size:clamp(19px,1.75vw,26px);line-height:1.45;letter-spacing:-.01em;max-width:56ch}
.founder blockquote p+p{margin-top:.8em}
.founder figcaption{margin-top:18px;padding-left:32px;color:var(--ink-2)}

/* Kontakt */
.contact{padding-top:14vh;padding-bottom:10vh;border-top:var(--line) solid var(--ink)}
.contact h2{font-size:clamp(40px,8vw,136px);margin-bottom:6vh}
.contact-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px}
.contact-grid .copy p{max-width:40ch;font-size:18px;line-height:1.55}
.contact-grid .copy p+p{margin-top:16px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:24px 24px}
.form label{display:grid;gap:6px}
.form .full{grid-column:1/-1}
.form input,.form textarea{font:400 17px/1.5 "Archivo",sans-serif;color:var(--ink);background:transparent;border:0;border-bottom:var(--line) solid var(--ink);border-radius:0;padding:6px 0 8px;width:100%}
.form textarea{min-height:110px;resize:vertical}
.form input:focus,.form textarea:focus{outline:0;border-bottom-color:var(--accent);box-shadow:0 1.5px 0 var(--accent)}
/* Falle für Spam-Programme: Menschen sehen und erreichen das Feld nicht, Bots füllen es aus */
.form .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hint{color:var(--ink-2);font-size:14.5px}
.send{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.note{font-size:14px;color:var(--ink-2);max-width:46ch}
.status{min-height:1.5em;color:var(--accent);font-weight:600}

.foot{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;min-height:48px;padding-top:12px;padding-bottom:12px;border-top:var(--line) solid var(--ink)}
.foot nav{display:flex;gap:22px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--accent)}

/* Faul-Modus */
.autopilot{position:fixed;left:16px;bottom:16px;z-index:10;display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 14px;border:var(--line) solid var(--ink);background:var(--ink);color:var(--bg);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,opacity .3s,transform .3s}
.autopilot i{width:9px;height:9px;background:var(--accent)}
.autopilot:hover,body.ap-on .autopilot{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.autopilot:hover i,body.ap-on .autopilot i{background:var(--on-accent)}
/* Die Einladung gehört zum Einstieg. Wer schon selbst liest, bekommt den Knopf nicht über den Text gelegt.
   Ausnahme: Im Ziel bleibt er mit der Rundenzeit stehen, bis man selbst wieder scrollt. */
body.past-hero:not(.ap-on):not(.ap-done) .autopilot{opacity:0;transform:translateY(10px);pointer-events:none}
body.ap-done .autopilot{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
body.ap-done .autopilot i{background:var(--on-accent)}
.ap-time{font-weight:700;font-variant-numeric:tabular-nums}
.ap-time:empty{display:none}
.ap-bar{position:fixed;left:0;right:0;top:0;height:4px;z-index:11;background:var(--accent);transform:scaleX(0);transform-origin:left;opacity:0;transition:opacity .3s}
body.ap-on .ap-bar{opacity:1}

@media (prefers-color-scheme:dark){.op-light{display:none}.op-dark{display:block}}

@media (prefers-reduced-motion:reduce){.word h3,.btn,.cta,.autopilot{transition:none}}

/* Arbeitsschritte: die Nummer des Schritts, den man gerade liest, ist hell hinterlegt (kein Bewegungseffekt, gilt daher immer) */
.steps li.now .n{opacity:1;background:var(--on-accent);color:var(--accent);box-shadow:0 0 0 4px var(--on-accent)}

/* Bewegung. Jede Animation endet im normalen Zustand: Ohne JS oder mit „Bewegung reduzieren“ steht die Seite einfach fertig da.
   Die Klasse .js setzt das Skript erst, wenn das Einblenden sicher läuft (nach dem IntersectionObserver). Ist das Skript
   blockiert oder stürzt vorher ab, fehlt .js, und alle Überschriften, Logos und die 0,05 bleiben sichtbar. */
@media (prefers-reduced-motion:no-preference){
  /* 1: Die Flügel kommen von ganz links und ganz rechts (Abstand zum Bildschirmrand misst /js/logo.js direkt
     nach dem Logo: --fl/--fr), der Kopf erscheint an Ort und Stelle. Alles ruckelt wie ein kaputtes Videosignal
     und wird dabei von einem dünnen Strich zur vollen Dicke, das Bild reißt in Streifen (Filter #tear).
     Wenn alles sitzt: kurzer Farb-Glitch. */
  .g-c{transform-origin:50% 14%;animation:g-c 1.3s steps(1,end) both,tear 1.3s steps(1,end) both}
  .g-l{--far:var(--fl,-100vw);transform-origin:25% 60%;animation:g-w 1.3s steps(1,end) both,tear 1.3s steps(1,end) both}
  .g-r{--far:var(--fr,100vw);transform-origin:75% 55%;animation:g-w 1.3s steps(1,end) .05s both,tear 1.3s steps(1,end) both}
  @keyframes g-w{
    0%{transform:translateX(calc(var(--far)*1.1)) scale(1.5,.03);opacity:0}
    6%{transform:translateX(calc(var(--far)*.86)) scale(1.5,.04);opacity:1}
    12%{transform:translateX(calc(var(--far)*.91)) scale(1.5,.02);opacity:.4}
    18%{transform:translateX(calc(var(--far)*.68)) scale(1.4,.09) skewX(24deg);opacity:1}
    24%{transform:translateX(calc(var(--far)*.72)) scale(1.35,.05)}
    30%{transform:translateX(calc(var(--far)*.5)) scale(1.3,.18)}
    36%{transform:translateX(calc(var(--far)*.54)) scale(1.25,.12) skewX(-20deg);opacity:.3}
    42%{transform:translateX(calc(var(--far)*.34)) scale(1.2,.32);opacity:1}
    48%{transform:translateX(calc(var(--far)*.37)) scale(1.15,.24)}
    54%{transform:translateX(calc(var(--far)*.2)) scale(1.1,.5) skewX(14deg)}
    60%{transform:translateX(calc(var(--far)*.23)) scale(1.08,.4);opacity:.5}
    66%{transform:translateX(calc(var(--far)*.1)) scale(1.05,.68);opacity:1}
    72%{transform:translateX(calc(var(--far)*.12)) scale(1.03,.58)}
    78%{transform:translateX(calc(var(--far)*.04)) scale(1,.86) skewX(-9deg)}
    84%{transform:translateX(calc(var(--far)*.05)) scale(1,.76);opacity:.6}
    90%{transform:translateX(calc(var(--far)*-.012)) scale(1,1.08);opacity:1}
    95%{transform:translateX(calc(var(--far)*.006)) scale(1,.96)}
    100%{transform:none}
  }
  @keyframes g-c{
    0%{opacity:0}
    36%{transform:scale(1.35,.04);opacity:1}
    42%{transform:translateX(5%) scale(1.3,.1)}
    48%{transform:scale(1.25,.06);opacity:.4}
    54%{transform:translateX(-4%) scale(1.2,.24) skewX(-18deg);opacity:1}
    60%{transform:scale(1.15,.16)}
    66%{transform:translateX(3%) scale(1.1,.5) skewX(14deg)}
    72%{transform:scale(1.05,.4);opacity:.5}
    78%{transform:scale(1,.76);opacity:1}
    84%{transform:translateX(-2%) scale(1,.66)}
    90%{transform:scale(1,1.1)}
    95%{transform:scale(1,.95)}
    100%{transform:none}
  }
  @keyframes tear{0%{filter:url(#tear)}100%{filter:none}}
  .g-set{animation:g-jit .45s steps(1,end) 1.35s both}
  .g-ghost-a{animation:g-ga .45s steps(1,end) 1.35s both}
  .g-ghost-b{animation:g-gb .45s steps(1,end) 1.35s both}
  @keyframes g-jit{0%{transform:none}8%{transform:translateX(-1.5%) skewX(-6deg)}18%{transform:translateX(2%)}30%{transform:translateX(-.6%);opacity:.55}42%{transform:none;opacity:1}56%{transform:translateX(1%) skewX(4deg)}66%,100%{transform:none}}
  @keyframes g-ga{0%{opacity:0}8%{opacity:1;clip-path:inset(12% 0 70% 0);transform:translateX(-5%)}20%{clip-path:inset(55% 0 22% 0);transform:translateX(3%)}32%{clip-path:inset(30% 0 52% 0);transform:translateX(-2%)}44%{clip-path:inset(76% 0 6% 0);transform:translateX(6%)}56%{clip-path:inset(4% 0 86% 0);transform:translateX(-3%)}66%,100%{opacity:0}}
  @keyframes g-gb{0%{opacity:0}8%{opacity:1;clip-path:inset(40% 0 44% 0);transform:translateX(4%)}20%{clip-path:inset(18% 0 66% 0);transform:translateX(-4%)}32%{clip-path:inset(62% 0 12% 0);transform:translateX(2.5%)}44%{clip-path:inset(8% 0 78% 0);transform:translateX(-6%)}56%{clip-path:inset(48% 0 38% 0);transform:translateX(3%)}66%,100%{opacity:0}}

  /* 2: „Smart.“ ist sofort da, „Lazy.“ kommt als Letztes: schlendert rein, bleibt kurz vorher stehen, plumpst dann an seinen Platz */
  .h1-big .w1{animation:rise .55s cubic-bezier(.16,1,.3,1) .3s both}
  /* 2: „Lazy.“ fällt gleich beim Laden von oben rein, parallel zum Logo, (beschleunigt wie echte Schwerkraft), prallt fünfmal vom Boden ab, jedes Mal niedriger,
     und bleibt beim letzten Aufsetzen schief stecken. Drehpunkt unten links = die Ecke, die auf dem Boden landet. */
  .h1-big .w2{animation:drop 3.02s both}
  @keyframes drop{
    0%{transform:translateY(-97vh);opacity:0;animation-timing-function:cubic-bezier(.47,0,.9,.5)}
    3%{opacity:1}
    41.1%{transform:none;animation-timing-function:cubic-bezier(.33,1,.68,1)}
    50.6%{transform:translateY(-0.42em) rotate(-2deg);animation-timing-function:cubic-bezier(.32,0,.67,0)}
    60.0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.33,1,.68,1)}
    67.5%{transform:translateY(-0.26em) rotate(-4.5deg);animation-timing-function:cubic-bezier(.32,0,.67,0)}
    74.9%{transform:rotate(-1deg);animation-timing-function:cubic-bezier(.33,1,.68,1)}
    80.6%{transform:translateY(-0.15em) rotate(-2.5deg);animation-timing-function:cubic-bezier(.32,0,.67,0)}
    86.3%{transform:rotate(-2deg);animation-timing-function:cubic-bezier(.33,1,.68,1)}
    90.4%{transform:translateY(-0.08em) rotate(-4deg);animation-timing-function:cubic-bezier(.32,0,.67,0)}
    94.5%{transform:rotate(-3deg);animation-timing-function:cubic-bezier(.33,1,.68,1)}
    97.3%{transform:translateY(-0.035em) rotate(-3deg);animation-timing-function:cubic-bezier(.32,0,.67,0)}
    100%{transform:rotate(-3.5deg)}
  }
  .h1-sub,.hero-foot p{animation:rise .6s cubic-bezier(.16,1,.3,1) .8s both}
  @keyframes rise{from{transform:translateY(.4em);opacity:0}}

  /* 7: Überschriften deckt ein Block auf (in Textfarbe, auf dem lila Plakat also hell) */
  .rv{position:relative;width:fit-content}
  .js .rv::after{content:"";position:absolute;inset:-.02em -.05em;background:currentColor;clip-path:inset(0 100% 0 0);pointer-events:none}
  .js .rv>.rv-t{opacity:0}
  .js .rv.in::after{animation:wipe .9s cubic-bezier(.7,0,.3,1) both}
  .js .rv.in>.rv-t{animation:show .9s steps(1,end) both}
  @keyframes wipe{0%{clip-path:inset(0 100% 0 0)}50%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}
  @keyframes show{0%{opacity:0}50%,100%{opacity:1}}

  /* 3: Das X über „Unmöglich“ wird wie mit einem Stift gezogen, nachdem die Überschrift steht: erst der eine Strich, dann der andere */
  .js .scribble path{stroke-dasharray:1;stroke-dashoffset:1}
  .js .rv.in .scribble path{animation:draw .42s cubic-bezier(.55,0,.3,1) 1s both}
  .js .rv.in .scribble path+path{animation-delay:1.55s}
  @keyframes draw{to{stroke-dashoffset:0}}

  /* 4: Rundenzeit-Delta (Skript): startet rot im Plus (langsamer als die Bestzeit), wird grün, sobald es ins Minus kippt, endet bei −0,05 = neue Bestzeit */
  .js .num:not(.ahead){color:var(--red)}
  /* Bestzeit: blinkt kurz knallig lila wie ein lila Sektor auf dem Zeitmonitor, bleibt danach grün */
  .num.best{animation:best .9s steps(1,end)}
  @keyframes best{0%{color:var(--purple)}20%{color:var(--purple);opacity:.2}40%{color:var(--purple);opacity:1}60%{color:var(--purple);opacity:.2}80%{color:var(--purple);opacity:1}100%{color:var(--green)}}

  /* 5: sanfter Übergang der Markierung */
  .steps .n{transition:background-color .3s,color .3s,box-shadow .3s}

  /* 6: Die zwei Logos fahren aufeinander zu und bremsen ein */
  .js .pair:not(.in)>*{opacity:0}
  .pair.in>.logo{animation:drive-l 1s cubic-bezier(.2,.9,.25,1) both}
  .pair.in>.op-logo{animation:drive-r 1s cubic-bezier(.2,.9,.25,1) both}
  .pair.in>.x{animation:rise .35s .8s both}
  @keyframes drive-l{0%{transform:translateX(-45vw) skewX(-20deg);opacity:0}12%{opacity:1}72%{transform:translateX(10px) skewX(8deg)}100%{transform:none}}
  @keyframes drive-r{0%{transform:translateX(45vw) skewX(20deg);opacity:0}12%{opacity:1}72%{transform:translateX(-10px) skewX(-8deg)}100%{transform:none}}

  /* 8: Plakatwand, aber nur an drei Stellen, damit es nicht bei jedem Scrollen dasselbe ist (Skript setzt .wall und die Höhe --h):
     Ein Plakat mit .stick bleibt stehen, sobald sein unteres Ende im Bild ist, das nächste schiebt sich darüber und dunkelt es
     ab (--cover). Alle Plakate sind positioniert, damit spätere über dem stehenden liegen; z-index:0 hält die Ebenen im Einstieg
     in ihrem Plakat. */
  .wall .poster{position:relative;z-index:0}
  .wall .poster.stick{position:sticky;top:min(0px,calc(100svh - var(--h,100svh)))}
  .wall .poster::after{content:"";position:absolute;inset:0;z-index:3;background:#000;opacity:var(--cover,0);pointer-events:none}
  /* Der Einstieg steht bis zum Seitenende als unterstes Plakat im Bild; die Fußzeile muss darüber liegen */
  .wall .foot{position:relative;z-index:0;background:var(--bg)}
}

@media (max-width:1100px){
  .nav{display:none}
  .bar .lang{margin-left:auto}
  .mindset,.block-grid,.project-grid,.contact-grid{grid-template-columns:1fr}
  .block-head{position:static}
}
@media (max-width:760px){
  :root{--gutter:16px}
  .block{padding-inline:16px}
  body{font-size:16px}
  .bar{gap:12px;height:58px}
  .logo{height:36px}
  .bar .lang{display:none}
  .cta{margin-left:auto}
  .giant{height:36vh;right:auto;left:50%;transform:translateX(-50%);top:10vh}
  .hero h1{align-self:end;margin-bottom:20px}
  .h1-big{font-size:clamp(60px,19vw,110px)}
  .hero-foot{padding-bottom:84px}
  .hero-foot p{font-size:16.5px}
  .word{grid-template-columns:1fr;row-gap:10px}
  .steps p{padding-left:0}
  .me-top{grid-template-columns:1fr}
  .trait{grid-template-columns:1fr;row-gap:10px}
  .pair .logo{height:34px}
  .op-logo{height:40px}
  .founder blockquote{padding-left:18px}
  .founder figcaption{padding-left:22px}
  .form{grid-template-columns:1fr}
  .foot{padding-bottom:72px}
}