.hero footer{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--stone)}
nav{display:flex;flex-wrap:wrap;gap:8px clamp(14px,2vw,28px)}
nav a,.contact a{color:var(--ink);text-decoration:none;font-weight:300;position:relative}
nav a::after,.contact a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;background:currentColor;transition:right .35s}
nav a:hover::after,.contact a:hover::after{right:0}
.down{position:absolute;left:50%;transform:translateX(-50%);animation:bob 2.4s ease-in-out infinite;color:var(--ink)}
@keyframes bob{50%{transform:translate(-50%,6px)}}
/* ---------- Automatisierung: Dark ---------- */
  :root{--ink:#F3F1EC;--grey:#A9A7B0;--stone:#6E6C75;--line:rgba(255,255,255,.12)}
html,body{background:#050507}
body{color:var(--ink)}
.page{padding:clamp(18px,3vw,36px) 0 0}
main{display:block;padding:0;text-align:left}
.intro{text-align:center}
.page>header{position:fixed;top:0;left:0;right:0;z-index:30;padding:clamp(18px,3vw,36px) clamp(18px,4vw,56px);
    background:linear-gradient(180deg,rgba(5,5,7,.85),rgba(5,5,7,0));pointer-events:none}
.page>header>*{pointer-events:auto}
.burger i{background:var(--ink)}
.menu-panel{background:rgba(18,18,24,.88);border-color:rgba(255,255,255,.1);box-shadow:0 30px 60px -24px rgba(0,0,0,.8)}
.menu-panel a:hover{background:rgba(255,255,255,.07)}
.intro{min-height:70vh;display:grid;place-content:center;text-align:center;padding:clamp(110px,14vh,160px) clamp(18px,4vw,56px) clamp(24px,4vh,48px)}
.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);font-weight:400}
.intro h1{margin-top:16px;font-weight:300;letter-spacing:-.04em;line-height:.92;font-size:clamp(3.2rem,11vw,12.5rem)}
.intro h1 em{font-family:var(--serif);font-style:normal;font-weight:400;letter-spacing:-.02em}
.intro h1 .grad{background:linear-gradient(90deg,#2B6BFF,#F400D8 45%,#FF2D6A 70%,#FF6A00);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro p{margin:clamp(20px,2.4vw,32px) auto 0;max-width:48ch;font-size:clamp(1rem,1.3vw,1.22rem);line-height:1.6;color:var(--grey)}
/* Bild, das aufgeht: sticky Buehne, clip-path oeffnet von Karte zu Vollbild */
  .reveal{position:relative;height:260vh}
.reveal .stick{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.reveal .frame{position:absolute;inset:0;will-change:clip-path;
    clip-path:inset(var(--it,32%) var(--is,30%) var(--it,32%) var(--is,30%) round var(--r,28px))}
.reveal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;transform:scale(var(--sc,1.25));will-change:transform}
.reveal .shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 40%,rgba(5,5,7,.55) 100%),linear-gradient(180deg,rgba(5,5,7,.55) 0%,transparent 30%,transparent 70%,rgba(5,5,7,.7) 100%);opacity:var(--sh,0)}
.reveal .cap{position:absolute;left:0;right:0;bottom:clamp(40px,10vh,110px);text-align:center;padding:0 clamp(18px,4vw,56px);opacity:var(--co,0);transform:translateY(calc((1 - var(--co,0)) * 24px))}
.reveal .cap h2{font-weight:300;letter-spacing:-.035em;line-height:1;font-size:clamp(2rem,5.4vw,5.6rem)}
.reveal .cap h2 em{font-family:var(--serif);font-style:normal;font-weight:400}
.reveal .cap p{margin-top:14px;font-size:clamp(.95rem,1.2vw,1.1rem);color:var(--grey)}
.ki{position:absolute;right:14px;top:14px;z-index:2;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.15);padding:5px 9px;border-radius:999px;backdrop-filter:blur(6px)}
.reveal .frame .ki{top:auto;bottom:calc(var(--it,32%) + 14px);right:calc(var(--is,30%) + 14px)}
/* Drei Schritte */
  .steps{max-width:1200px;margin:0 auto;padding:clamp(80px,12vw,160px) clamp(18px,4vw,56px) clamp(60px,8vw,110px)}
.steps .head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.steps h2{font-weight:300;letter-spacing:-.035em;line-height:.98;font-size:clamp(2.4rem,5.6vw,5.8rem)}
.steps h2 em{font-family:var(--serif);font-style:normal;font-weight:400}
.steps ol{list-style:none;margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.steps li{padding:clamp(24px,3vw,40px) clamp(0px,2vw,32px) 0 0;border-right:1px solid var(--line);margin-right:clamp(0px,2vw,32px)}
.steps li:last-child{border-right:0;margin-right:0}
.steps .n{font-family:var(--serif);font-size:clamp(3rem,5vw,4.8rem);line-height:1}
.steps li:nth-child(1) .n{color:#4F7DFF}
.steps li:nth-child(2) .n{color:#F400D8}
.steps li:nth-child(3) .n{color:#FF6A00}
.steps h3{margin-top:14px;font-weight:400;font-size:1.3rem;letter-spacing:-.02em}
.steps li p{margin-top:10px;font-size:1rem;line-height:1.6;color:var(--grey);max-width:34ch}
.cta{display:inline-flex;align-items:center;gap:10px;font-size:.92rem;font-weight:400;color:#050507;background:var(--ink);border-radius:999px;padding:14px 26px;text-decoration:none;transition:transform .3s,background .3s,color .3s}
.cta:hover{transform:translateY(-2px);background:#FF2D6A;color:#fff}
.page>footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:.8rem;color:var(--stone);padding:24px clamp(18px,4vw,56px) clamp(24px,3vw,36px);border-top:1px solid var(--line)}
.page>footer nav{display:flex;flex-wrap:wrap;gap:8px clamp(14px,2vw,28px)}
.page>footer a{color:var(--ink);text-decoration:none}
@media (max-width:820px){.steps ol{grid-template-columns:1fr}.steps li{border-right:0;margin-right:0;border-bottom:1px solid var(--line);padding-bottom:28px}.steps li:last-child{border-bottom:0}}
@media (prefers-reduced-motion:reduce){.reveal{height:auto}.reveal .stick{position:relative}.reveal .frame{clip-path:none}.reveal img{transform:none}}