/* omento.at – Hauptgestaltung */
@font-face{font-family:'Unbounded';src:url(../fonts/unbounded-latin-wght-normal.woff2) format('woff2');font-weight:200 900;font-display:swap}
@font-face{font-family:'Geist';src:url(../fonts/geist-latin-wght-normal.woff2) format('woff2');font-weight:100 900;font-display:swap}

:root{--ink:#f4f6ec;--mute:rgba(244,246,236,.72);--sun:#ffd84a;--bg:#030805;--card:rgba(6,20,11,.62);--line:rgba(255,255,255,.14);--pad:clamp(20px,4.5vw,64px);--p:0;--sx:50%;
  --ease:cubic-bezier(.2,.8,.2,1)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font:400 1rem/1.6 Geist,system-ui,sans-serif;color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
img,canvas,svg{display:block}
h1,h2,h3,p,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--sun);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--sun);color:#1c1600;padding:10px 16px;border-radius:8px;font-weight:600}
.skip:focus{left:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Hintergrund ---------- */
.sky{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(180deg,#020604 0%,#04110a 18%,#0a2413 32%,#1b4421 41%,#4f7d2a 45.5%,#c9bd47 48.2%,#ffe07a 50%,#b8b446 53%,#3f6a26 60%,#12301a 74%,#06140c 100%)}
.sky-day{position:absolute;inset:0;opacity:calc(var(--p)*.9);
  background:linear-gradient(180deg,#0b3324 0%,#1f6a45 22%,#6fae6a 38%,#d8dc8a 47%,#fff0b0 51%,#cfd27c 56%,#5c9150 68%,#1c4a2c 100%)}
.stars{position:absolute;left:0;top:0;width:1px;height:1px;border-radius:50%;opacity:calc(1 - var(--p)*1.5)}
.sun{position:absolute;left:var(--sx);top:calc(46% - var(--p)*13vh);width:min(110vh,110vw);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,250,214,.95) 0,rgba(255,226,122,.8) 3%,rgba(255,216,74,.42) 8%,rgba(190,210,70,.2) 19%,rgba(90,160,70,.09) 34%,transparent 52%)}
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:1;touch-action:pan-y}
.scrim{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(2,8,4,.82) 0,rgba(2,8,4,.45) 36%,transparent 62%),linear-gradient(0deg,rgba(2,8,4,.82) 0,transparent 30%),linear-gradient(180deg,rgba(2,8,4,.55) 0,transparent 16%)}

/* ---------- Kopf ---------- */
.nav{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px var(--pad);transition:padding .4s var(--ease)}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(3,10,6,.66);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.1);opacity:0;transition:opacity .4s}
.nav.stuck{padding-top:13px;padding-bottom:13px}.nav.stuck::before{opacity:1}
.logo img{height:30px;width:auto}
.nav ul{display:flex;gap:30px;font-size:.92rem;color:var(--mute)}
.nav ul a{transition:color .2s}.nav ul a:hover{color:var(--ink)}
@media (max-width:860px){.nav ul{display:none}}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:600;font-size:.92rem;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:transform .1s ease-out,background .25s,border-color .25s}
.pill:hover{background:rgba(255,255,255,.14)}.pill:active{transform:scale(.97)}
.pill.gold{background:var(--sun);border-color:var(--sun);color:#1c1600}.pill.gold:hover{background:#ffe680}

/* ---------- Allgemeine Abschnitte ---------- */
main{position:relative;z-index:5}
section{padding:clamp(70px,13vh,150px) var(--pad) 0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sun)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sun);box-shadow:0 0 16px var(--sun)}
h2{font:600 clamp(1.75rem,3.8vw,3.75rem)/1.05 Unbounded,sans-serif;letter-spacing:-.04em;max-width:15em;margin:18px 0 40px}
h2 em,h1 em{font-style:normal;color:var(--sun)}
h3{font:600 1.25rem/1.15 Unbounded,sans-serif;letter-spacing:-.03em}
.glass{background:var(--card);border:1px solid var(--line);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);border-radius:24px}
/* Einblenden beim Scrollen */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.rv.in{opacity:1;transform:none}

/* ---------- Start ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px var(--pad) 110px}
.col{max-width:min(47vw,740px)}
h1{font:600 clamp(2.25rem,5.3vw,5.75rem)/1.02 Unbounded,sans-serif;letter-spacing:-.045em;margin:22px 0 24px;text-shadow:0 2px 40px rgba(2,8,4,.6)}
h1 .ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
h1 .ln>span{display:block;transform:translateY(112%);transition:transform 1.3s cubic-bezier(.16,1,.3,1);transition-delay:calc(.25s + var(--i,0)*.12s)}
.ready h1 .ln>span{transform:none}
.lede{font-size:clamp(1rem,1.25vw,1.19rem);color:var(--mute);max-width:33em}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.state{position:absolute;right:var(--pad);bottom:clamp(40px,7vh,80px);display:flex;align-items:center;gap:16px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.state ol{display:flex;gap:6px}
.state li{width:26px;height:3px;border-radius:3px;background:rgba(255,255,255,.22);transition:background .5s,width .5s var(--ease)}
.state li.on{background:var(--sun);width:46px}
.state button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.28);font-size:.7rem;display:grid;place-items:center;transition:background .2s}
.state button:hover{background:rgba(255,255,255,.14)}
@media (max-width:900px){.hero{justify-content:flex-end;padding-bottom:60px}.col{max-width:none}.state{position:static;margin-top:28px;flex-wrap:wrap}}

/* ---------- Leistungen ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:1050px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{padding:26px 24px 28px;min-height:230px;display:flex;flex-direction:column;transition:transform .5s var(--ease),border-color .3s,opacity .9s var(--ease)}
.card:hover{transform:translateY(-6px);border-color:rgba(255,216,74,.6)}
.card small{color:var(--sun);font-size:.78rem;letter-spacing:.14em}
.card h3{margin:auto 0 10px;padding-top:40px}
.card p{font-size:.92rem;line-height:1.5;color:var(--mute)}

/* ---------- Arbeitsweise ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);counter-reset:s}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.steps li{position:relative;padding:26px 22px 8px 0;counter-increment:s}
.steps li::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--sun);box-shadow:0 0 14px var(--sun)}
.steps li::after{content:"0" counter(s);display:block;order:-1;font-size:.78rem;letter-spacing:.14em;color:var(--sun)}
.steps li{display:flex;flex-direction:column;gap:8px}
.steps p{font-size:.94rem;color:var(--mute);max-width:22em}
.split{display:flex;height:10px;border-radius:99px;overflow:hidden;margin-top:44px;max-width:720px;background:rgba(255,255,255,.1)}
.split i{display:block;height:100%;width:0;transition:width 1.6s var(--ease) .3s}
.split i:first-child{background:var(--ink)}.split i:last-child{background:var(--sun)}
.split.in i:first-child{width:38%}.split.in i:last-child{width:62%}
.legend{display:flex;justify-content:space-between;max-width:720px;margin-top:12px;font-size:.85rem;color:var(--mute);gap:20px}

.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1050px){.flow{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.flow{grid-template-columns:1fr}}
.flow li{position:relative;padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;min-height:250px}
.flow b{font:600 clamp(3rem,5vw,4.5rem)/1 Unbounded,sans-serif;letter-spacing:-.05em;color:var(--sun)}
.flow h3{margin-top:auto}
.flow p{font-size:.94rem;line-height:1.5;color:var(--mute)}
.flow em{font-style:normal;align-self:flex-start;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:99px;border:1px solid rgba(255,216,74,.45);color:var(--sun)}
@media (min-width:1051px){.flow li:not(:last-child)::after{content:"→";position:absolute;right:-21px;top:38px;z-index:2;width:28px;height:28px;border-radius:50%;background:var(--sun);color:#1c1600;display:grid;place-items:center;font-size:.85rem;font-weight:700}}

/* ---------- Aktuelles Projekt ---------- */
.backend{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:clamp(28px,5vw,80px);align-items:center;margin-top:clamp(50px,9vh,100px)}
@media (max-width:900px){.backend{grid-template-columns:1fr}.phone{max-width:340px;margin:0 auto}}
.phone{border-radius:38px;padding:16px;background:rgba(4,14,8,.85);border:1px solid rgba(255,255,255,.22);box-shadow:0 40px 100px -30px rgba(0,0,0,.9),0 0 90px -30px rgba(255,216,74,.35);display:grid;gap:12px;font-size:.82rem}
.ph-top{text-align:center;color:var(--mute);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 0}
.ph-img{height:130px;border-radius:18px;background:radial-gradient(120% 90% at 75% 15%,#ffe07a,transparent 55%),linear-gradient(140deg,#12301a,#2f7a2f);display:flex;align-items:flex-end;padding:10px}
.ph-img span{font-size:.7rem;padding:4px 9px;border-radius:99px;background:rgba(0,0,0,.5)}
.ph-voice{display:flex;align-items:center;gap:3px;flex-wrap:wrap;padding:12px;border-radius:18px;background:rgba(255,216,74,.12);border:1px solid rgba(255,216,74,.4)}
.ph-voice i{width:3px;height:16px;border-radius:3px;background:var(--sun);animation:wave 1.1s ease-in-out infinite;animation-delay:calc(var(--n,0)*-.09s)}
.ph-voice i:nth-child(2n){--n:3}.ph-voice i:nth-child(3n){--n:7}.ph-voice i:nth-child(5n){--n:11}
.ph-voice span{flex-basis:100%;margin-top:8px;line-height:1.4}
@keyframes wave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1.15)}}
.ph-ai{padding:12px;border-radius:18px;background:rgba(255,255,255,.07);color:var(--mute);line-height:1.4}
.ph-ai b{display:block;color:var(--sun);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.ph-out{display:grid;gap:6px}
.ph-out li{display:flex;justify-content:space-between;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.07)}
.ph-out em{font-style:normal;color:var(--sun)}
.paused .ph-voice i{animation-play-state:paused}
.how{display:grid;gap:22px}
.how li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
.how b{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:600 1rem Unbounded,sans-serif;background:var(--sun);color:#1c1600}
.how h3{font-size:1.05rem;margin:9px 0 6px}
.how p{color:var(--mute);max-width:34em}
.ref{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,70px);align-items:center}
@media (max-width:900px){.ref{grid-template-columns:1fr}}
.shot{display:block;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:#0b0b0b;box-shadow:0 40px 100px -30px rgba(0,0,0,.85),0 0 90px -30px rgba(255,216,74,.3);transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease),border-color .3s,opacity .9s var(--ease)}
.shot:hover{border-color:rgba(255,216,74,.6)}
.shot .bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:rgba(255,255,255,.07);font-size:.75rem;color:var(--mute)}
.shot .bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22)}
.shot .bar span{margin-left:10px}
.shot img{width:100%;height:auto}
.ref h3{font-size:clamp(1.5rem,2.7vw,2.6rem);line-height:1.08;letter-spacing:-.04em;margin:16px 0}
.ref p{color:var(--mute);max-width:30em;margin-bottom:26px}

/* ---------- Über ---------- */
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,80px);align-items:end}
@media (max-width:900px){.about{grid-template-columns:1fr}}
.about p{font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.55;color:var(--mute);max-width:32em}
.about p+p{margin-top:1em}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.facts div{padding:22px}
.facts b{display:block;font:600 clamp(1.6rem,2.6vw,2.4rem)/1 Unbounded,sans-serif;letter-spacing:-.04em;color:var(--sun);margin-bottom:8px}
.facts span{font-size:.9rem;color:var(--mute)}

/* ---------- Kontakt ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,60px);align-items:start;max-width:1180px}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
form{padding:clamp(22px,3vw,36px);display:grid;gap:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0}
.chips legend{font-size:.85rem;color:var(--mute);margin-bottom:10px;padding:0}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.22);font-size:.9rem;transition:background .2s,color .2s,border-color .2s,transform .1s}
.chips span:active{transform:scale(.97)}
.chips input:checked+span{background:var(--sun);border-color:var(--sun);color:#1c1600;font-weight:600}
.chips input:focus-visible+span{outline:2px solid var(--sun);outline-offset:3px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.field{position:relative}
.field input,.field textarea{width:100%;padding:26px 16px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);outline:none;transition:border-color .2s,background .2s;font-size:1rem}
.field textarea{min-height:150px;resize:vertical;line-height:1.5}
.field label{position:absolute;left:17px;top:18px;color:var(--mute);pointer-events:none;transform-origin:0 0;transition:transform .2s var(--ease),color .2s}
.field input:focus,.field textarea:focus{border-color:var(--sun);background:rgba(255,255,255,.08)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{transform:translateY(-11px) scale(.76);color:var(--sun)}
.field.bad input,.field.bad textarea{border-color:#ff8a7a}
.field .err{display:none;font-size:.82rem;color:#ffb0a4;margin:6px 4px 0}
.field.bad .err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.send{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.send small{font-size:.82rem;color:var(--mute);flex:1;min-width:14em}
.send small a{text-decoration:underline;text-underline-offset:.2em}
.send button{min-width:190px}
.send button[disabled]{opacity:.6;cursor:progress}
.msg{display:none;padding:14px 16px;border-radius:14px;font-size:.95rem}
.msg.ok{display:block;background:rgba(255,216,74,.14);border:1px solid rgba(255,216,74,.5)}
.msg.fail{display:block;background:rgba(255,120,100,.12);border:1px solid rgba(255,138,122,.5)}
form.done>:not(.msg){display:none}
.direct{padding:clamp(22px,3vw,32px);display:grid;gap:20px}
.direct dl{display:grid;gap:14px}
.direct dt{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sun);margin-bottom:2px}
.direct dd a:hover{color:var(--sun)}
.direct .pill{width:100%}
.direct small{font-size:.82rem;color:var(--mute)}

/* ---------- Fuß ---------- */
footer{position:relative;z-index:5;margin-top:clamp(70px,12vh,130px);padding:28px var(--pad) 34px;border-top:1px solid var(--line);background:rgba(2,8,4,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;font-size:.88rem;color:var(--mute)}
footer img{height:22px;width:auto;opacity:.9}
footer nav{display:flex;gap:22px;margin-left:auto}
footer a:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .ph-voice i{animation:none}
  html{scroll-behavior:auto}
  .rv,h1 .ln>span{transition-duration:.01s;transition-delay:0s}
}
.no-webgl #gl{display:none}
.flow li:nth-child(1){z-index:4}.flow li:nth-child(2){z-index:3}.flow li:nth-child(3){z-index:2}
/* Vom Browser automatisch ausgefüllte Felder: dunkel bleiben, damit die gelbe Beschriftung lesbar ist */
.field input:-webkit-autofill,.field input:-webkit-autofill:hover,.field input:-webkit-autofill:focus,.field textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #12261a inset;box-shadow:0 0 0 1000px #12261a inset;-webkit-text-fill-color:#f4f6ec;caret-color:#f4f6ec;border-color:rgba(255,255,255,.28);transition:background-color 9999s ease-out 0s}
.field input:autofill{box-shadow:0 0 0 1000px #12261a inset;-webkit-text-fill-color:#f4f6ec}
footer .li{display:inline-flex;align-items:center;gap:8px}footer .li:hover{color:var(--sun)}
.ohne-skript .rv{opacity:1;transform:none}.ohne-skript h1 .ln>span{transform:none}