:root{--lime:#dfff32;--ink:#11120e;--paper:#f0f0e9;--line:rgba(17,18,14,.18)}*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,sans-serif;overflow-x:hidden}.noise{position:fixed;inset:0;opacity:.035;pointer-events:none;z-index:9;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}header{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid var(--line);position:absolute;z-index:5;width:100%;color:#fff}.brand{color:inherit;text-decoration:none;font-weight:800;letter-spacing:-.04em}.brand span{display:inline-grid;place-items:center;width:27px;height:27px;margin-right:9px;background:var(--lime);color:var(--ink);border-radius:50%}nav{display:flex;gap:34px}nav a,.mini-cta{color:inherit;text-decoration:none;font:500 11px DM Mono;letter-spacing:.08em;text-transform:uppercase}.mini-cta{border-bottom:1px solid var(--lime);padding:10px 0}.mini-cta span{color:var(--lime)}.hero{min-height:780px;height:100vh;position:relative;padding:190px 7vw 80px;background:var(--ink);color:#fff;overflow:hidden}.hero:before{content:"";position:absolute;width:55vw;height:55vw;right:-11vw;top:-18vw;background:var(--lime);filter:blur(180px);opacity:.09}.eyebrow{font:500 11px DM Mono;letter-spacing:.15em;margin-bottom:28px}.eyebrow i{display:inline-block;width:7px;height:7px;background:var(--lime);border-radius:50%;margin-right:10px}.hero h1,.section-copy h2,.principles h2,.impact h2{font-size:clamp(58px,8.6vw,136px);letter-spacing:-.075em;line-height:.82;margin:0;font-weight:600}.hero h1 em,.section-copy h2 em,.principles h2 em,.impact h2 em{font-family:Georgia,serif;font-weight:400}.hero h1 em{color:var(--lime)}.lead{max-width:530px;font-size:19px;line-height:1.55;color:#aaa;margin:40px 0}.primary{display:inline-flex;gap:45px;align-items:center;background:var(--lime);color:var(--ink);padding:20px 24px;text-decoration:none;font:700 12px DM Mono;letter-spacing:.06em}.primary span{font-size:18px}.scroll-note{position:absolute;bottom:45px;left:7vw;font:10px DM Mono;color:#777;letter-spacing:.15em}.scroll-note span{color:var(--lime);margin-left:12px}.demo-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw;padding:130px 7vw;background:var(--lime)}.eyebrow.dark i{background:var(--ink)}.section-copy h2,.principles h2{font-size:clamp(48px,6vw,88px);line-height:.9}.section-copy>p{font-size:16px;line-height:1.7;max-width:460px;margin:32px 0}.metric{display:flex;align-items:center;gap:16px;border-top:1px solid #9dad20;padding-top:25px;margin-top:55px}.metric strong{font-size:55px;letter-spacing:-.06em}.metric span{font:10px DM Mono;line-height:1.6}.builder{background:var(--paper);padding:24px;box-shadow:14px 14px 0 #111}.builder-top{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:18px;font:10px DM Mono}.status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5aba4b;margin-right:7px}.workflow{padding:25px 0}.step{display:grid;grid-template-columns:48px 1fr 40px;align-items:center;border:1px solid var(--line);padding:20px;transition:.25s;background:#f6f6f0}.step.active{border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}.step-index{font:11px DM Mono}.step small{font:9px DM Mono;color:#777;letter-spacing:.1em}.step h3{margin:6px 0 0;font-size:17px}.change{border:0;background:transparent;font-size:20px;cursor:pointer}.connector{height:28px;margin-left:43px;border-left:1px solid #777;position:relative}.connector i{position:absolute;width:5px;height:5px;background:var(--ink);border-radius:50%;left:-3px;top:11px}.run{width:100%;padding:18px;background:var(--ink);color:#fff;border:0;font:600 11px DM Mono;letter-spacing:.1em;cursor:pointer}.run:hover{background:#292b23}.run.running{background:#5b6237}.principles{padding:140px 7vw;background:var(--ink);color:#fff}.principles h2{max-width:950px}.principles h2 em{color:var(--lime)}.cards{display:grid;grid-template-columns:repeat(3,1fr);margin-top:90px;border-top:1px solid #333}.cards article{padding:35px 35px 35px 0;border-right:1px solid #333;position:relative}.cards article+article{padding-left:35px}.cards article>span{font:10px DM Mono;color:#777}.icon{font-size:40px;color:var(--lime);margin:45px 0}.cards h3{font-size:23px}.cards p{color:#8e8f88;line-height:1.7;max-width:300px}.impact{text-align:center;padding:130px 5vw 60px;overflow:hidden}.impact>p{font:10px DM Mono;letter-spacing:.17em}.impact h2{font-size:clamp(60px,9vw,130px);margin:25px 0 50px}.impact h2 em{background:var(--lime);padding:0 .1em}.impact>a{display:inline-flex;gap:35px;background:var(--ink);color:#fff;padding:18px 22px;text-decoration:none;font:11px DM Mono}.ticker{white-space:nowrap;font:600 68px Manrope;letter-spacing:-.05em;margin-top:130px;transform:rotate(-2deg);color:#bbb}.ticker span:nth-child(2n){color:var(--ink)}footer{background:var(--ink);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:40px 5vw;font:9px DM Mono;letter-spacing:.1em}@media(max-width:850px){header nav{display:none}.hero{padding-top:160px;min-height:720px}.hero h1{font-size:64px}.lead{max-width:400px}.demo-section{grid-template-columns:1fr;padding:90px 6vw}.cards{grid-template-columns:1fr}.cards article,.cards article+article{padding:30px 0;border-right:0;border-bottom:1px solid #333}.principles{padding:100px 6vw}.ticker{font-size:42px}}@media(max-width:480px){.hero h1{font-size:52px}.builder{padding:14px;box-shadow:8px 8px 0 #111}.step{padding:15px 10px;grid-template-columns:35px 1fr 30px}.metric strong{font-size:44px}}

/* ── Demo: sichtbarer Ablauf ─────────────────────────────────────────────
   Der Builder zeigt jetzt den Vorgang, der gerade laeuft: Daten oben,
   Zustand je Schritt, Mitschrift unten. Alles im vorhandenen Farbschema. */

.builder-top .status[data-state="run"] i{background:#e0a53a;animation:blink .9s steps(2) infinite}
.builder-top .status[data-state="stop"] i{background:#c2543f}
.builder-top .status[data-state="ok"] i{background:#5aba4b}
@keyframes blink{50%{opacity:.25}}

.event{border:1px solid var(--line);background:#fff;padding:14px 16px;margin-top:18px;
  border-left:3px solid var(--ink)}
.event[data-verdict="pass"]{border-left-color:#5aba4b}
.event[data-verdict="stop"]{border-left-color:#c2543f}
.event-top{display:flex;justify-content:space-between;font:10px DM Mono;letter-spacing:.1em;color:#777}
.event-top b{color:var(--ink)}
.event-fields{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:12px 0 0}
.event-fields dt{font:9px DM Mono;letter-spacing:.08em;color:#888;text-transform:uppercase}
.event-fields dd{margin:3px 0 0;font:500 12px DM Mono}

/* Letzte Spur haelt sich an die Breite des Knopfes. Eine feste Breite (frueher
   40px) schnitt "AeNDERN" ab und schob den Pfeil aus dem Rahmen heraus. */
.step{grid-template-columns:48px minmax(0,1fr) auto auto;gap:14px}
.step-detail{margin:6px 0 0;font:11px DM Mono;line-height:1.5;color:#6a6b62}
.step-meta{text-align:right;white-space:nowrap}
.pill{display:inline-block;padding:4px 8px;border:1px solid var(--line);border-radius:99px;
  font:9px DM Mono;letter-spacing:.09em;color:#777;background:#fff}
.step-meta .ms{display:block;margin-top:6px;font:9px DM Mono;color:#999}
.step[data-state="run"]{border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.step[data-state="run"] .pill{background:var(--lime);border-color:var(--ink);color:var(--ink)}
.step[data-state="done"] .pill{background:#e8f6e4;border-color:#5aba4b;color:#2f6b26}
.step[data-state="done"] .step-detail{color:var(--ink)}
.step[data-state="stop"]{border-color:#c2543f}
.step[data-state="stop"] .pill{background:#fbe9e5;border-color:#c2543f;color:#8d2f1e}
.step[data-state="skip"]{opacity:.55;border-style:dashed}

/* Der Punkt, der den Vorgang von Schritt zu Schritt traegt. */
.connector .packet{position:absolute;left:-4px;top:0;width:7px;height:7px;border-radius:50%;
  background:var(--lime);border:1px solid var(--ink);opacity:0}
.controls{display:grid;grid-template-columns:1fr auto;gap:8px}
.run.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);padding:18px 20px}
.run.ghost:hover{background:var(--ink);color:#fff}
.run:disabled{cursor:progress;opacity:.75}

.console{margin-top:18px;background:var(--ink);color:#d6d7cc;padding:12px 14px;
  height:168px;overflow-y:auto;font:11px/1.75 DM Mono;scroll-behavior:smooth}
.console .line{display:grid;grid-template-columns:62px 52px minmax(0,1fr);gap:8px;margin:0}
.console .line b{color:#6f7167;font-weight:400}
.console .line em{font-style:normal;letter-spacing:.08em;font-size:9px;padding-top:2px;color:#8d8f83}
.console .line span{word-break:break-word}
.console .muted span{color:#8d8f83}
.console .k-in em{color:#7fb6ff}
.console .k-rule em{color:var(--lime)}
.console .k-out em,.console .k-ok em{color:#5aba4b}
.console .k-ok span{color:#fff}
.console .k-skip em,.console .k-skip span{color:#e08a76}
.console .k-sum em,.console .k-sum span{color:var(--lime)}

/* Fuenf Kennzahlen gehen in keinem Raster glatt auf. Als Flexzeile fuellt die
   letzte Reihe die Breite aus, statt eine leere graue Zelle stehen zu lassen. */
.runstats{display:flex;flex-wrap:wrap;gap:1px;margin-top:1px;background:var(--line)}
.runstats div{flex:1 1 124px;background:var(--paper);padding:14px 10px;text-align:center}
.runstats b{display:block;font-size:20px;letter-spacing:-.03em}
.runstats span{font:9px DM Mono;letter-spacing:.07em;color:#777}

@media(max-width:850px){
  .event-fields{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:480px){
  .step{grid-template-columns:32px 1fr;gap:10px;position:relative}
  .step-body{padding-right:24px}
  .step-meta{grid-column:2;text-align:left;margin-top:8px}
  .step .change{position:absolute;right:8px;top:10px}
  .event-fields{grid-template-columns:repeat(2,1fr)}
  .controls{grid-template-columns:1fr}
  .console{height:200px;font-size:10px}
  .console .line{grid-template-columns:56px minmax(0,1fr)}
  .console .line em{display:none}
}

/* ── Takt: erzaehlter Ablauf statt Sprünge ───────────────────────────────── */

.narrator{margin:16px 0 0;padding:14px 16px;background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--lime);font-size:15px;line-height:1.55;min-height:56px;
  transition:opacity .18s ease}
.narrator.fading{opacity:0}

/* Laufbalken je Schritt: laeuft genau so lange wie die Phase dauert. */
.step{position:relative;overflow:hidden;transition:border-color .4s ease,box-shadow .4s ease,opacity .4s ease}
.step-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent}
.step-progress i{display:block;height:100%;width:100%;background:var(--lime);
  transform:scaleX(0);transform-origin:left}
.step-progress.running i{animation:pace var(--pace-ms,2s) linear forwards}
@keyframes pace{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Weiche Übergaenge statt harter Textwechsel. */
.step-detail,.pill,.step-meta .ms{transition:color .3s ease,background .3s ease,border-color .3s ease,opacity .3s ease}
.event{transition:border-left-color .45s ease}
.console .line{animation:linein .35s ease both}
@keyframes linein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Der Punkt zwischen den Schritten laeuft jetzt weich und sichtbar. */
.connector{height:34px}
.connector.flowing .packet{animation:travel var(--flow-ms,900ms) cubic-bezier(.45,.05,.3,1)}
@keyframes travel{
  0%{top:0;opacity:0;transform:scale(.6)}
  12%{opacity:1;transform:scale(1)}
  88%{opacity:1;transform:scale(1)}
  100%{top:28px;opacity:0;transform:scale(.6)}
}

@media(prefers-reduced-motion:reduce){
  .step-progress.running i,.connector.flowing .packet,.console .line{animation:none}
  .narrator{transition:none}
}

/* ── Hero-Bild (Higgsfield) ──────────────────────────────────────────────
   Ersetzt den frueheren CSS-Orbit. Zwei Zuschnitte: quer fuers Desktop,
   hochkant fuers Handy. Rein dekorativ, liegt hinter dem Text. */

.hero-art{position:absolute;right:3vw;top:50%;transform:translateY(-50%);
  width:min(46vw,700px);pointer-events:none;z-index:0;
  animation:hero-float 9s ease-in-out infinite alternate}
.hero-art img{display:block;width:100%;height:auto;
  -webkit-mask-image:radial-gradient(72% 68% at 50% 50%,#000 38%,transparent 74%);
  mask-image:radial-gradient(72% 68% at 50% 50%,#000 38%,transparent 74%)}
.hero .eyebrow,.hero h1,.hero .lead,.hero .primary{position:relative;z-index:1}
.hero .scroll-note{z-index:1}
@keyframes hero-float{from{transform:translateY(-50%)}to{transform:translateY(-54%)}}

@media(max-width:850px){
  .hero-art{right:-10vw;left:auto;top:auto;bottom:-4vh;transform:none;
    width:min(62vw,300px);opacity:.5;animation:none}
  .hero-art img{-webkit-mask-image:radial-gradient(88% 78% at 50% 46%,#000 46%,transparent 82%);
    mask-image:radial-gradient(88% 78% at 50% 46%,#000 46%,transparent 82%)}
}
@media(prefers-reduced-motion:reduce){.hero-art{animation:none}}

/* Klare Hero-Komposition: Text und Bild teilen sich ein echtes Raster. */
.hero{height:auto;min-height:780px;padding:0 7vw;display:flex;align-items:center}
.hero-grid{width:100%;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);
  align-items:center;gap:clamp(40px,6vw,110px);padding:150px 0 105px}
.hero-copy{position:relative;z-index:1;max-width:900px}
.hero-art{position:relative;inset:auto;transform:none;width:100%;z-index:0;animation:hero-float-grid 9s ease-in-out infinite alternate}
/* Das Bild wird ganz gezeigt. Vorher schnitt aspect-ratio:1.18 zusammen mit
   object-fit:cover rund ein Drittel der Breite ab — die Leuchtspur endete
   deshalb an einer harten Kante. Jetzt gilt das eigene Seitenverhaeltnis. */
.hero-art img{aspect-ratio:auto;object-fit:contain;height:auto}
@keyframes hero-float-grid{to{transform:translateY(-2%)}}

/* Jede Auswahl sitzt in ihrer Karte und ist sichtbar als Bedienfeld gestaltet. */
.change{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;
  padding:8px 11px;border:1px solid var(--ink);background:#fff;color:var(--ink);
  font:600 9px DM Mono;letter-spacing:.08em}
.change b{font-size:15px;transition:transform .2s}.change[aria-expanded="true"]{background:var(--lime)}
.change[aria-expanded="true"] b{transform:rotate(180deg)}
.change:focus-visible,.step-menu button:focus-visible,.run:focus-visible,.tempo input:focus-visible+span,
.primary:focus-visible,.mini-cta:focus-visible,nav a:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 5px var(--ink)}
.step-menu{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  padding-top:14px;border-top:1px solid var(--line);margin-top:4px}
.step-menu[hidden]{display:none}
.step-menu button{min-height:44px;padding:10px;border:1px solid var(--line);background:#fff;
  font:10px/1.35 DM Mono;cursor:pointer;text-align:left}
.step-menu button:hover,.step-menu button.sel{background:var(--lime);border-color:var(--ink)}

.controls{grid-template-columns:1fr auto;align-items:stretch}
.tempo{grid-column:1/-1;margin:2px 0 0;padding:5px;border:1px solid var(--ink);display:grid;
  grid-template-columns:1fr 1fr;gap:4px;min-width:0}
.tempo legend{padding:0 6px;font:9px DM Mono;letter-spacing:.08em}
.tempo label{position:relative;cursor:pointer}.tempo input{position:absolute;opacity:0;pointer-events:none}
.tempo span{display:flex;justify-content:center;align-items:center;min-height:40px;padding:8px;
  font:600 10px DM Mono;letter-spacing:.08em}
.tempo input:checked+span{background:var(--lime);box-shadow:inset 0 0 0 1px var(--ink)}

@media(max-width:850px){
  .hero{min-height:0;padding:0 6vw;display:block}
  .hero-grid{grid-template-columns:1fr;gap:42px;padding:145px 0 88px}
  .hero-copy{max-width:680px}.hero h1{font-size:clamp(54px,13vw,88px)}
  /* Das Handybild ist hochkant angelegt. Ein erzwungenes 16:10 hat davon den
     groessten Teil weggeschnitten — es laeuft jetzt in seinem eigenen Format. */
  .hero-art img{aspect-ratio:auto;object-fit:contain;object-position:center}

  /* Untereinander gestellt liess das hohe Hochformat eine grosse dunkle
     Luecke zwischen Knopf und Bild. Stattdessen steht es jetzt seitlich:
     Augenbrauentext und Ueberschrift ueber die volle Breite, darunter links
     Fliesstext und Knopf, rechts daneben das Bild. `display:contents` loest
     dafuer den Textkasten auf, ohne das HTML umzubauen. */
  .hero-copy{display:contents}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(96px,.5fr);
             column-gap:14px;row-gap:0;align-items:start}
  .hero .eyebrow,.hero h1{grid-column:1/-1}
  .hero .lead,.hero .primary{grid-column:1}
  .hero-art{grid-column:2;grid-row:3/5;align-self:center;justify-self:end;
            width:100%;inset:auto;opacity:1;animation:none}
  .scroll-note{display:none}
}
@media(max-width:480px){
  /* 13,2vw liess "Mehr bewegen." auf dem Handy umbrechen, waehrend
     "Weniger klicken." gerade noch in eine Zeile passte — die zwei Zeilen
     standen dadurch unterschiedlich lang untereinander. 12,1vw haelt beide
     Zeilen von 320px bis 480px einzeilig. */
  /* Das Handybild traegt oben und unten eigene Leerflaeche. Ein zusaetzlicher
     Rasterabstand daneben ergaebe eine doppelte Luecke. */
  .hero-grid{padding:122px 0 48px;gap:6px}.hero h1{font-size:clamp(40px,12.1vw,56px)}
  .lead{font-size:16px;margin:24px 0}
  /* Der Mindestabstand von 45px zwischen Text und Pfeil sprengte die schmale
     linke Spalte, der Knopftext brach in zwei Zeilen. */
  .primary{width:100%;justify-content:space-between;gap:14px;padding:18px 16px}
  .lead{max-width:none}
  .step{grid-template-columns:32px 1fr auto;padding:14px 10px;gap:8px;overflow:visible}
  .step-body{padding-right:0}.step-meta{grid-column:2;text-align:left;margin-top:4px}
  .step .change{position:static;grid-column:3;grid-row:1/3;align-self:center;flex-direction:column;gap:2px;padding:7px;min-width:54px}
  .step-menu{grid-template-columns:1fr;grid-column:1/-1;margin-top:8px;padding-top:10px}
  .controls{grid-template-columns:1fr}.tempo{grid-column:1}
}

/* ── Schliff ──────────────────────────────────────────────────────────────
   Ausrichtung, Anfassbarkeit und sichtbarer Fokus. Keine neuen Bausteine,
   nur das Geradeziehen dessen, was schon da ist. */

/* Die Verbindungslinie sass auf Handybreite 17px neben der Schrittnummer,
   weil sie noch die Spaltenbreite vom Desktop annahm. */
@media(max-width:480px){.connector{margin-left:26px}}

/* Unter 1100px war der Builder in der schmalen rechten Spalte so eng, dass
   Schrittnamen umbrachen und links eine grosse Leerflaeche stehen blieb.
   Ab hier stehen Text und Builder untereinander, beide auf voller Breite. */
@media(max-width:1100px){
  .demo-section{grid-template-columns:1fr;gap:56px}
  .section-copy>p{max-width:640px}
  .metric{margin-top:38px}
}

/* Der Knopf oben rechts blieb auf dem Handy ganz weg. Jetzt bleibt er da,
   nur schmaler — sonst hat die Seite auf dem Handy gar keine Navigation. */
@media(max-width:480px){
  header{padding:0 5vw;gap:12px}
  .mini-cta{font-size:10px;padding:8px 0;white-space:nowrap}
  .mini-cta span{margin-left:4px}
}

/* Fokus muss auf hellem UND dunklem Grund sichtbar sein: heller Kern,
   dunkler Ring aussen herum. Vorher war der weisse Rahmen auf der
   limettengruenen Flaeche praktisch unsichtbar. */
.change:focus-visible,.step-menu button:focus-visible,.run:focus-visible,
.tempo input:focus-visible+span,.primary:focus-visible,.mini-cta:focus-visible,
nav a:focus-visible,.brand:focus-visible,.impact>a:focus-visible{
  outline:2px solid var(--ink);outline-offset:2px;
  box-shadow:0 0 0 5px var(--lime),0 0 0 7px var(--ink)}

/* Anfassbare Flaechen: unter 44px trifft man auf dem Handy daneben. */
.run,.step-menu button,.change,.tempo span{min-height:44px}
.primary,.impact>a{min-height:52px;align-items:center}

/* Zahlen im Ergebnisblock duerfen beim Hochzaehlen nicht springen. */
.metric strong,.runstats b,#saved{font-variant-numeric:tabular-nums}

::selection{background:var(--lime);color:var(--ink)}

/* ── Hero-Bild: ganz sichtbar, weich auslaufend ───────────────────────────
   Die alte Maske war eine Ellipse mit 72%/68% Radius. An der Bildkante lag
   sie noch bei rund 70% ihres Verlaufs, also nicht bei null — die Leuchtspur
   brach dort hart ab, und der dritte Knoten wurde weggeblendet.

   Der Bildrand ist rgb(16,20,9), der Hero-Hintergrund #11120e. Der Unter-
   schied ist so klein, dass ein schmaler Verlauf an den vier Kanten genuegt:
   Motiv bleibt voll deckend, die Kante loest sich auf. Zwei Verlaeufe, per
   intersect verrechnet, ergeben einen Rahmen statt einer Ellipse. */
   Seitlich nur 4%: die aeusseren Symbole sitzen bei rund 88% der Bildbreite
   und wuerden von einem breiteren Verlauf mitten im Icon angeschnitten.
   Oben und unten ist ohnehin nur Leerflaeche, dort darf es weicher sein. */
.hero-art img{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%),
                     linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%),
             linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}

/* Die Bildspalte bekommt mehr Platz, der Abstand zur Ueberschrift wird
   kleiner, und das Bild greift beidseitig etwas ueber seine Spalte hinaus.
   Damit schliesst sich die dunkle Luecke, ohne dass der Seitenrand das Bild
   abschneidet — der weiche Rand laeuft vorher aus. */
@media(min-width:851px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(420px,1.18fr);gap:0}
  .hero-art{width:calc(100% + 15vw);margin-left:-18vw;margin-right:3vw}
}

/* Wer Bewegung abbestellt hat, will auch keinen weich scrollenden Sprung. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── Impact-Abschnitt ─────────────────────────────────────────────────────
   Auf dem Handy passte "Sie fuehlt sich an wie" nicht in eine Zeile. Sie
   brach um, und weil die Zeilenhoehe .82 betraegt, schob sich der limetten-
   gruene Kasten von "mehr Zeit." ueber die Zeile darueber. Kleinere Schrift
   plus etwas mehr Zeilenhoehe loesen beides. */
/* Ein voll deckender Hintergrund auf einem Inline-Element ist so hoch wie
   die Schriftbox — bei Zeilenhoehe .82 ragt er in die Zeile darueber und
   deckte dort die Unterlaengen zu. Als Verlaufsflaeche laesst sich die Hoehe
   genau festlegen: sie umschliesst die Schrift und bleibt in ihrer Zeile. */
.impact h2 em{background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 62%/100% .88em;
  padding:0 .1em}

/* Gestapelt stehen die drei Karten untereinander. Die 300px Textbreite vom
   Dreispalter liessen auf dem Tablet die halbe Zeile leer. */
@media(max-width:850px){.cards p{max-width:48ch}}

@media(max-width:600px){
  .impact h2{font-size:clamp(34px,10vw,60px);line-height:.98;margin:20px 0 38px}
  .impact>p{line-height:1.6}
  .icon{margin:26px 0}
  .cards article,.cards article+article{padding:26px 0}
}

/* Das Laufband stand still. Es laeuft jetzt durch — Farben, Groesse, Neigung
   und der harte Rand bleiben dabei genau wie vorher. */
.ticker span{display:inline-block}
.ticker-track{display:inline-block;white-space:nowrap;
  animation:ticker 26s linear infinite}
@keyframes ticker{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ── Wortmarke ────────────────────────────────────────────────────────────
   Ein Lichtpunkt wandert langsam um das F herum — dasselbe Signal, das im
   Hero zwischen den Knoten laeuft, und dasselbe, was der Ablauf unten in der
   Demo zeigt. Ein Kegelverlauf, ringfoermig ausmaskiert, eine Umdrehung in
   sechs Sekunden. Bewusst nur ein Effekt: alles Weitere waere Unruhe im
   Kopfbereich. */
.brand span{position:relative;isolation:isolate}
.brand span::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;z-index:-1;
  background:conic-gradient(from 0turn,transparent 0 66%,rgba(223,255,50,.3) 86%,var(--lime) 97%,transparent 100%);
  /* closest-side, sonst misst der Verlauf bis zur Ecke des Quadrats und der
     deckende Teil beginnt ausserhalb des Kaestchens — der Ring waere unsichtbar. */
  -webkit-mask:radial-gradient(closest-side circle,transparent 70%,#000 74%);
  mask:radial-gradient(closest-side circle,transparent 70%,#000 74%);
  animation:brand-orbit 6s linear infinite}
@keyframes brand-orbit{to{transform:rotate(1turn)}}

/* Beim Zeigen auf die Marke zieht der Punkt kurz an und der Kreis bekommt
   einen weichen Schein — die Rueckmeldung, dass hier etwas anklickbar ist. */
.brand:hover span::before,.brand:focus-visible span::before{animation-duration:1.6s}
.brand span{transition:box-shadow .35s ease}
.brand:hover span{box-shadow:0 0 18px rgba(223,255,50,.5)}
footer .brand span::before{animation-duration:9s}
@media(prefers-reduced-motion:reduce){.brand span::before{animation:none}}

/* ── Zeichen im Abschnitt "Das Prinzip" ───────────────────────────────────
   Gezeichnet statt getippt: gleiche Strichstaerke, gleicher Schein wie die
   Knoten im Hero. Der Punkt in der Leitung wandert wie in der Demo. */
.icon{font-size:0;line-height:0;color:var(--lime);
  filter:drop-shadow(0 0 12px rgba(223,255,50,.28))}
.icon svg{width:clamp(56px,4.6vw,72px);height:auto;display:block;overflow:visible}
.cards article:hover .icon{filter:drop-shadow(0 0 20px rgba(223,255,50,.5))}
.icon,.cards article:hover .icon{transition:filter .4s ease}
.icon .spark{animation:icon-spark 2.8s ease-in-out infinite}
@keyframes icon-spark{
  0%,100%{transform:translateX(-4px);opacity:.35}
  50%{transform:translateX(4px);opacity:1}}
@media(prefers-reduced-motion:reduce){.icon .spark{animation:none}}

/* ── Einblenden beim Hereinscrollen ───────────────────────────────────────
   Der Ausgangszustand muss im Stylesheet stehen, nicht im Skript: sonst
   zeichnet der Browser den Abschnitt erst fertig und versteckt ihn danach
   wieder — das sichtbare Flackern. Greift nur mit JavaScript (.js), sonst
   bliebe der Inhalt ohne Skript dauerhaft unsichtbar. */
.js .section-copy,.js .builder,.js .cards article{opacity:0;transform:translateY(28px)}
.js .section-copy.is-in,.js .builder.is-in,.js .cards article.is-in{
  opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){
  .js .section-copy,.js .builder,.js .cards article{opacity:1;transform:none}
  .js .section-copy.is-in,.js .builder.is-in,.js .cards article.is-in{transition:none}
}

/* ── Ruhiges Layout waehrend des Ablaufs ──────────────────────────────────
   Erzaehltext und Schrittbeschreibung wechseln staendig ihre Laenge. Ohne
   reservierte Hoehe schiebt jede Phase alles darunter nach oben und unten —
   gemessen ein CLS von 0,83. Die Werte sind die gemessenen Maximalhoehen. */
.narrator{min-height:77px}
.step-detail{min-height:17px}
/* Der Kasten steht leer schon da und haelt seinen Platz. Gedaempft, damit
   klar ist: hier kommt gleich etwas hin, es fehlt nichts. */
.event[data-empty="true"]{border-left-color:#c9cabf}
.event[data-empty="true"] dd,.event[data-empty="true"] .event-top b{color:#a9aa9f}
/* Die Millisekunden-Angabe erscheint erst waehrend des Laufs und machte den
   Schritt dabei 12px hoeher. Der Platz wird jetzt von Anfang an gehalten. */
.step-meta .ms{min-height:12px}
@media(max-width:600px){
  .narrator{min-height:100px}
  .step-detail{min-height:33px}
}

/* ── Fusszeile und Pflichtseiten ──────────────────────────────────────────
   Die Demo laeuft unter eigener Adresse. Damit muss auf jeder Seite stehen,
   wem sie gehoert und wo Impressum und Datenschutz liegen. */
footer{display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:28px 48px;
  align-items:start;padding:48px 5vw 36px}
.foot-note{margin:14px 0 0;max-width:52ch;font:400 13px/1.7 Manrope;
  letter-spacing:0;color:#8e8f88;text-transform:none}
.foot-note a,.foot-links a{color:var(--lime);text-decoration:none;
  border-bottom:1px solid rgba(223,255,50,.35)}
.foot-note a:hover,.foot-links a:hover{border-bottom-color:var(--lime)}
.foot-links{display:flex;flex-direction:column;gap:12px;align-items:flex-end;
  font:500 11px DM Mono;letter-spacing:.08em}
.foot-links a{padding:4px 0}
.foot-copy{grid-column:1/-1;margin:0;padding-top:26px;
  border-top:1px solid #2a2c24;color:#6f7167}
footer .brand{font-size:16px}

@media(max-width:700px){
  footer{grid-template-columns:1fr;gap:22px}
  .foot-links{align-items:flex-start;gap:4px}
  .foot-links a{padding:10px 0}
  .foot-copy{padding-top:20px}
}

/* Pflichtseiten: ruhige Lesespalte im selben Farbklima wie die Demo. */
.legal{background:var(--ink);color:#d6d7cc;padding:150px 7vw 90px;min-height:70vh}
.legal-inner{max-width:74ch;margin:0 auto}
.legal h1{font-size:clamp(42px,6vw,76px);letter-spacing:-.05em;line-height:.95;
  margin:0 0 10px;font-weight:600;color:#fff}
.legal .lede{font-size:16px;line-height:1.7;color:#9a9b93;margin:0 0 52px;max-width:62ch}
.legal h2{font:500 11px DM Mono;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lime);margin:44px 0 12px}
.legal p{margin:0 0 14px;font-size:15px;line-height:1.75}
.legal address{font-style:normal;line-height:1.8;font-size:15px}
.legal a{color:var(--lime);text-decoration:none;border-bottom:1px solid rgba(223,255,50,.35);
  word-break:break-word}
.legal a:hover{border-bottom-color:var(--lime)}
.legal ul{margin:0 0 14px;padding-left:20px}
.legal li{margin:0 0 8px;font-size:15px;line-height:1.75}
.legal .hint{margin-top:52px;padding-top:22px;border-top:1px solid #2a2c24;
  font-size:13px;line-height:1.7;color:#7d7e76}
.legal .back{display:inline-flex;align-items:center;gap:10px;margin-top:44px;
  background:var(--lime);color:var(--ink);padding:16px 22px;
  font:700 12px DM Mono;letter-spacing:.06em;border-bottom:0;min-height:52px}
.legal .back:hover{border-bottom:0}
@media(max-width:480px){.legal{padding:118px 6vw 70px}}