/* Basis-Reset */
html,body{margin:0}
[hidden]{display:none!important}
img,svg{max-width:100%}
/* Layout: großformatige Typo-Bühne mit Messingschild und rotierendem Siegelring, danach Leistungen als breite Zeilen, Zeitleiste, Scroll-Zitat */
:root{
  --paper:#F1F2EE; --paper-2:#E6E9E3; --ink:#13241F; --muted:#56655F; --faint:rgba(19,36,31,.18);
  --forest:#1C4A3E; --forest-fg:#EEF2EC; --brass:#A9823A; --brass-hi:#D8BB7B; --brass-lo:#7A5C22;
  --line:rgba(19,36,31,.14); --field:#FFFFFF; --glass:rgba(241,242,238,.82);
  --f-display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --s-1:.8125rem; --s0:1rem; --s1:1.25rem; --s2:1.75rem; --s3:clamp(2rem,4.2vw,3.2rem); --s4:clamp(2.5rem,5.4vw,4.7rem);
  --maxw:76rem; --ease:cubic-bezier(.2,.7,.1,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0E1714; --paper-2:#15211D; --ink:#E5EAE3; --muted:#9AA9A2; --faint:rgba(229,234,227,.2);
  --forest:#183B32; --forest-fg:#E5EAE3; --brass:#C9A55C; --brass-hi:#E2C88E; --brass-lo:#8A6A2C;
  --line:rgba(229,234,227,.14); --field:#15211D; --glass:rgba(14,23,20,.8); color-scheme:dark }}
:root[data-theme="dark"]{
  --paper:#0E1714; --paper-2:#15211D; --ink:#E5EAE3; --muted:#9AA9A2; --faint:rgba(229,234,227,.2);
  --forest:#183B32; --forest-fg:#E5EAE3; --brass:#C9A55C; --brass-hi:#E2C88E; --brass-lo:#8A6A2C;
  --line:rgba(229,234,227,.14); --field:#15211D; --glass:rgba(14,23,20,.8); color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--s0);line-height:1.6;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--paper)}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.04;text-wrap:balance;margin:0;letter-spacing:-.01em}
h2{font-size:var(--s3)}
h2 em,h1 em{font-style:italic;color:var(--brass)}
h3{font-size:var(--s1);font-family:var(--f-body);font-weight:600;line-height:1.3;letter-spacing:0}
p{margin:0}
.eyebrow{font-family:var(--f-mono);font-size:var(--s-1);letter-spacing:.12em;text-transform:uppercase;color:var(--brass);display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:1.6rem;height:1px;background:currentColor}
.lead{font-size:var(--s1);color:var(--muted);max-width:38rem}
section{padding-block:clamp(4rem,9vw,7.5rem)}

/* Seal mark (wiederverwendbar) */
.seal .r1,.seal .r2{fill:none;stroke:currentColor}
.seal .r1{stroke-width:2.4} .seal .r2{stroke-width:.8;stroke-dasharray:1.2 1.6}
.seal .core{fill:var(--brass)}

/* Header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;transition:background .3s,box-shadow .3s}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.1rem;transition:padding .3s var(--ease)}
header.top.scrolled{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
header.top.scrolled .wrap{padding-block:.65rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand svg{width:34px;height:34px;flex:none}
.brand span{font-family:var(--f-display);font-size:1.35rem;font-weight:500;white-space:nowrap}
.brand em{color:var(--brass)}
.brand .r1{stroke-dasharray:107;stroke-dashoffset:107;animation:draw 1.4s var(--ease) .1s forwards}
.brand .r2{animation:spin 40s linear infinite;transform-origin:20px 20px}
.brand .core{transform-origin:20px 20px;animation:pop .7s var(--ease) .9s both}
nav ul{display:flex;gap:1.8rem;list-style:none;margin:0;padding:0}
nav a{text-decoration:none;font-size:.95rem;color:var(--muted);position:relative;padding-block:.3rem}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
nav a:hover{color:var(--ink)} nav a:hover::after{transform:scaleX(1);transform-origin:left}
@media (max-width:900px){nav{display:none}}

.btn{display:inline-flex;align-items:center;gap:.6rem;font:600 .95rem var(--f-body);padding:.85rem 1.35rem;border-radius:100px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:color .35s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--brass);transform:translateY(101%);transition:transform .4s var(--ease);z-index:-1}
.btn:hover::before{transform:translateY(0)}
.btn:hover{border-color:var(--brass);color:#1A1204}
.btn .arr{transition:transform .35s var(--ease)} .btn:hover .arr{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.small{padding:.6rem 1.1rem;font-size:.88rem}

/* Hero */
.hero{position:relative;padding-block:clamp(2.5rem,6vw,5rem) clamp(4rem,8vw,6.5rem);overflow:hidden}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.35fr .8fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.hero .wrap > div{min-width:0}
.hero h1{font-size:var(--s4);margin-block:1.3rem 1.6rem}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln > span{display:inline-block;animation:rise 1s var(--ease) both}
.hero h1 .ln:nth-child(2) > span{animation-delay:.12s}
.hero h1 .ln:nth-child(3) > span{animation-delay:.24s}
.hero .lead,.hero .actions,.hero .eyebrow{animation:fade .9s var(--ease) .45s both}
.hero .actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.2rem}
.hero .meta{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:2.6rem;font-family:var(--f-mono);font-size:.78rem;color:var(--muted);animation:fade .9s var(--ease) .6s both}
.hero .meta span::before{content:"✓ ";color:var(--brass)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}

.stage{position:relative;perspective:900px;animation:fade 1.1s var(--ease) .3s both}
.ring{position:absolute;inset:-22%;width:144%;height:144%;color:var(--faint);pointer-events:none;z-index:0}
.ring g{transform-origin:50% 50%;animation:spin 90s linear infinite}
.plate{--rx:0deg;--ry:0deg;position:relative;z-index:1;aspect-ratio:4/3;max-width:100%;border-radius:4px;padding:12% 10%;
  background:linear-gradient(135deg,var(--brass-hi) 0%,var(--brass) 38%,var(--brass-lo) 62%,var(--brass) 80%,var(--brass-hi) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -2px 0 rgba(0,0,0,.2) inset,0 30px 50px -22px rgba(19,36,31,.6);
  color:#2A1E08;display:flex;flex-direction:column;justify-content:center;gap:.6rem;overflow:hidden;
  transform:rotateX(var(--rx)) rotateY(var(--ry)) rotate(-1.2deg);transition:transform .6s var(--ease)}
.plate .brush{position:absolute;inset:0;opacity:.35;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 3px)}
.plate .sheen{position:absolute;inset:-50% auto -50% 0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-150%) skewX(-12deg);animation:sheen 2.2s var(--ease) 1.2s both}
.stage:hover .sheen{animation:sheen 1.4s var(--ease) both}
.plate .frame{position:absolute;inset:6%;border:1px solid rgba(42,30,8,.35)}
.screw{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#F3E3B8,#8A6A2C 70%);box-shadow:0 1px 2px rgba(0,0,0,.4)}
.screw::after{content:"";position:absolute;left:3px;right:3px;top:6px;height:2px;background:rgba(42,30,8,.6);transform:rotate(35deg)}
.screw.a{top:3%;left:3%}.screw.b{top:3%;right:3%}.screw.c{bottom:3%;left:3%}.screw.d{bottom:3%;right:3%}
.plate .p-name{font-family:var(--f-display);font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.1;position:relative}
.plate .p-sub{font-family:var(--f-mono);font-size:clamp(.6rem,1.1vw,.76rem);letter-spacing:.14em;text-transform:uppercase;position:relative}
.plate .p-rule{height:1px;background:rgba(42,30,8,.45);width:40%;position:relative}
.plate-cap{position:relative;z-index:1;margin-top:1.4rem;font-family:var(--f-mono);font-size:var(--s-1);color:var(--muted);max-width:26rem}

/* Ticker */
.ticker{border-block:1px solid var(--line);overflow:hidden;padding-block:1.1rem;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker .track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker ul{display:flex;gap:3rem;list-style:none;margin:0;padding:0 1.5rem 0 1.5rem;align-items:center}
.ticker li{font-family:var(--f-display);font-size:clamp(1.2rem,2.2vw,1.6rem);white-space:nowrap;display:flex;align-items:center;gap:3rem}
.ticker li::after{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--brass)}

/* Section heads */
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head > *{min-width:0}
.sec-head h2{margin-top:1rem}
@media (max-width:780px){.sec-head{grid-template-columns:1fr}}

/* Leistungen als Zeilen */
.svc-list{border-top:1px solid var(--ink)}
.svc{position:relative;display:grid;grid-template-columns:9rem 1.1fr 1.4fr 1fr 2rem;gap:1.5rem;align-items:baseline;padding:1.7rem 1rem;border-bottom:1px solid var(--line);isolation:isolate}
.svc > *{min-width:0}
.svc::before{content:"";position:absolute;inset:0;background:var(--paper-2);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease);z-index:-1}
.svc:hover::before{transform:scaleY(1)}
.svc .tag{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass)}
.svc h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.15;transition:transform .45s var(--ease)}
.svc:hover h3{transform:translateX(.4rem)}
.svc p{color:var(--muted);font-size:.95rem}
.svc ul{margin:0;padding:0;list-style:none;font-size:.85rem;color:var(--muted);display:flex;flex-direction:column;gap:.15rem}
.svc .go{align-self:center;justify-self:end;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:.9rem;transition:background .3s,color .3s,transform .45s var(--ease)}
.svc:hover .go{background:var(--ink);color:var(--paper);transform:rotate(-45deg)}
@media (max-width:1000px){.svc{grid-template-columns:1fr 1fr;gap:.6rem 1.5rem;padding:1.5rem .5rem}.svc .tag{grid-column:1/-1}.svc .go{display:none}}
@media (max-width:600px){.svc{grid-template-columns:1fr}}

/* Sichtbarkeits-Check */
.check-sec{padding-top:0}
.check-box{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);padding:clamp(1.5rem,4vw,3rem);border:1px solid var(--line);border-radius:6px;background:var(--paper-2)}
.check-box > *{min-width:0}
@media (max-width:860px){.check-box{grid-template-columns:1fr}}
.check-box h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-block:1rem}
.qs{display:flex;flex-direction:column;gap:.2rem;margin:0;padding:0;list-style:none}
.qs label{display:flex;gap:.8rem;align-items:flex-start;padding:.75rem .2rem;border-bottom:1px dashed var(--line);cursor:pointer;font-size:.97rem}
.qs input{appearance:none;-webkit-appearance:none;flex:none;width:1.25rem;height:1.25rem;margin-top:.15rem;border:1.5px solid var(--muted);border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:border-color .2s}
.qs input::after{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--brass);transform:scale(0);transition:transform .3s var(--ease)}
.qs input:checked{border-color:var(--brass)} .qs input:checked::after{transform:scale(1)}
.score{display:flex;flex-direction:column;gap:1rem;justify-content:center}
.gauge{position:relative;width:min(220px,100%);aspect-ratio:1;max-width:100%}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge .bg{fill:none;stroke:var(--line);stroke-width:6}
.gauge .fg{fill:none;stroke:var(--brass);stroke-width:6;stroke-linecap:round;stroke-dasharray:283;transition:stroke-dashoffset .8s var(--ease)}
.gauge .val{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:var(--f-display);font-size:3rem;line-height:1}
.gauge .val small{display:block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;color:var(--muted);margin-top:.3rem}
.verdict{font-size:1.05rem;max-width:26rem}

/* Berufsrecht */
.law{background:var(--forest);color:var(--forest-fg);position:relative;overflow:hidden}
.law .para{position:absolute;right:-2rem;top:-4rem;font-family:var(--f-display);font-size:clamp(16rem,34vw,30rem);line-height:1;color:color-mix(in srgb,var(--forest-fg) 5%,transparent);pointer-events:none;user-select:none}
.law .wrap{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,5rem)}
.law .wrap > *{min-width:0}
@media (max-width:860px){.law .wrap{grid-template-columns:1fr}}
.law .eyebrow{color:var(--brass-hi)}
.law h2{margin-block:1rem 1.2rem}
.law h2 em{color:var(--brass-hi)}
.law .lead{color:color-mix(in srgb,var(--forest-fg) 75%,transparent)}
.norm{display:grid;grid-template-columns:8.5rem 1fr;gap:1.2rem;padding:1.3rem .8rem;border-top:1px solid color-mix(in srgb,var(--forest-fg) 20%,transparent);transition:background .3s}
.norm:last-of-type{border-bottom:1px solid color-mix(in srgb,var(--forest-fg) 20%,transparent)}
.norm:hover{background:color-mix(in srgb,var(--forest-fg) 6%,transparent)}
.norm code{font-family:var(--f-mono);font-size:.9rem;color:var(--brass-hi)}
.norm p{color:color-mix(in srgb,var(--forest-fg) 82%,transparent)}
.norm strong{color:var(--forest-fg);font-weight:600;display:block;margin-bottom:.2rem}
@media (max-width:480px){.norm{grid-template-columns:1fr;gap:.3rem}}
.law small{display:block;margin-top:1.5rem;font-size:.8rem;color:color-mix(in srgb,var(--forest-fg) 60%,transparent)}

/* Ablauf als Zeitleiste */
.timeline{position:relative}
.timeline .rail{position:absolute;left:0;right:0;top:.7rem;height:1px;background:var(--line)}
.timeline .rail i{position:absolute;inset:0;background:var(--brass);transform-origin:left;transform:scaleX(1)}
.steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem;list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:flex;flex-direction:column;gap:.5rem;padding-top:2.4rem;position:relative}
.steps li::before{content:"";position:absolute;top:0;left:0;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink);box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 10px var(--brass)}
.steps li::after{content:"Schritt " counter(s);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);order:-1}
.steps h3{font-family:var(--f-display);font-weight:400;font-size:1.5rem}
.steps p{color:var(--muted);font-size:.95rem}
.steps .dur{font-family:var(--f-mono);font-size:.78rem;color:var(--ink);margin-top:.4rem;padding:.25rem .6rem;border:1px solid var(--line);border-radius:100px;align-self:flex-start}
@media (max-width:1000px){
  .timeline .rail{left:.7rem;right:auto;top:0;bottom:0;width:1px;height:auto}
  .timeline .rail i{transform-origin:top}
  .steps{grid-template-columns:1fr;gap:2rem}
  .steps li{padding-top:0;padding-left:2.8rem}
}

/* Beispiele */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media (max-width:900px){.cases{grid-template-columns:1fr}}
.case{position:relative;background:var(--paper-2);padding:2rem 1.8rem;display:flex;flex-direction:column;gap:.8rem;border-radius:6px;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.case:hover{transform:translateY(-6px);box-shadow:0 24px 40px -28px rgba(19,36,31,.5)}
.case .mark{position:absolute;right:-2.2rem;top:-2.2rem;width:8rem;height:8rem;color:var(--faint);transition:transform 1.2s var(--ease)}
.case:hover .mark{transform:rotate(90deg)}
.case .who{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.case h3{font-family:var(--f-display);font-weight:400;font-size:1.6rem;line-height:1.15;max-width:16rem}
.case p{color:var(--muted);font-size:.95rem}
.case dl{margin:auto 0 0;display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;font-size:.85rem;padding-top:1rem;border-top:1px solid var(--line)}
.case dt{color:var(--muted)} .case dd{margin:0;font-weight:500}
.note{margin-top:1.2rem;font-size:.82rem;color:var(--muted)}

/* Über uns: Scroll-Zitat */
.stance .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.stance .wrap > *{min-width:0}
@media (max-width:860px){.stance .wrap{grid-template-columns:1fr}}
.quote{font-family:var(--f-display);font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.14;margin-top:1.2rem}
.quote .hl{--p:100%;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--faint),var(--faint));
  background-repeat:no-repeat;background-size:var(--p) 100%,100% 100%}
.quote b{font-weight:400;font-style:italic;-webkit-text-fill-color:var(--brass)}
.values{display:flex;flex-direction:column;gap:1.8rem;padding-top:1rem}
.values div{display:grid;grid-template-columns:2.4rem 1fr;gap:1rem}
.values svg{width:2.4rem;height:2.4rem;color:var(--ink)}
.values p{color:var(--muted)}
.values strong{color:var(--ink)}

/* Kontakt */
.contact{background:var(--ink);color:var(--paper)}
.contact .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,5rem)}
.contact .wrap > *{min-width:0}
@media (max-width:860px){.contact .wrap{grid-template-columns:1fr}}
.contact .eyebrow{color:var(--brass-hi)}
.contact h2{margin-block:1rem 1.2rem}
.contact h2 em{color:var(--brass-hi)}
.contact .lead{color:color-mix(in srgb,var(--paper) 70%,transparent)}
.addr{margin-top:2.2rem;display:flex;flex-direction:column;gap:.35rem;font-size:.95rem}
.addr .mono{font-family:var(--f-mono);font-size:.9rem;user-select:all;color:var(--brass-hi)}
form{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 1.2rem}
form .full{grid-column:1/-1}
@media (max-width:540px){form{grid-template-columns:1fr}}
.fl{position:relative;display:block}
.fl input,.fl select,.fl textarea{font:inherit;font-size:1rem;width:100%;padding:1.35rem 0 .5rem;border:0;border-bottom:1px solid color-mix(in srgb,var(--paper) 30%,transparent);background:transparent;color:var(--paper);border-radius:0;outline:none}
.fl select option{color:#13241F;background:#F1F2EE}
.fl textarea{min-height:6.5rem;resize:vertical}
.fl span{position:absolute;left:0;top:1.3rem;font-size:1rem;color:color-mix(in srgb,var(--paper) 60%,transparent);pointer-events:none;transition:transform .3s var(--ease),color .3s;transform-origin:left top}
.fl input:focus + span,.fl input:not(:placeholder-shown) + span,.fl textarea:focus + span,.fl textarea:not(:placeholder-shown) + span,.fl.fixed span{transform:translateY(-1.15rem) scale(.78);color:var(--brass-hi)}
.fl::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass-hi);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.fl:focus-within::after{transform:scaleX(1)}
.ck{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:color-mix(in srgb,var(--paper) 70%,transparent)}
.ck input{margin-top:.25rem;accent-color:var(--brass)}
.contact .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.sent{grid-column:1/-1;padding:1rem;border-left:2px solid var(--brass-hi);background:color-mix(in srgb,var(--paper) 8%,transparent)}

footer{padding-block:2.5rem;font-size:.85rem;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
footer ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0}

/* Keyframes */
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sheen{to{transform:translateX(380%) skewX(-12deg)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes reveal{from{opacity:.25;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fillY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes hl{from{--p:0%}to{--p:100%}}
@property --p{syntax:"<percentage>";inherits:true;initial-value:100%}

/* Scroll-getriebene Effekte nur, wo der Browser sie kann; sonst bleibt alles sichtbar */
@supports (animation-timeline: view()){
  .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  .timeline .rail i{animation:fill linear both;animation-timeline:view();animation-range:entry 30% cover 60%}
  .quote .hl{animation:hl linear both;animation-timeline:view();animation-range:entry 40% cover 55%}
  @media (max-width:1000px){.timeline .rail i{animation-name:fillY}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .brand .r1{stroke-dashoffset:0}
  .ticker .track{transform:none}
}