/* Sandiel Studio – Neon-Elektrik */
@font-face{font-family:"Manrope";src:url("/fonts/manrope.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/jetbrains-mono.woff2") format("woff2");font-weight:400;font-display:swap}

:root,:root[data-theme="dark"]{
  --bg:#0E0B16;--bg-2:#15111F;--card:#1A1526;--card-2:#211A31;
  --line:#2A2240;--line-2:#3A2F57;
  --text:#F3EEFF;--text-2:#B9B0CF;--text-3:#7F7699;
  --lila:#A855F7;--lila-soft:#C084FC;--lila-bg:rgba(168,85,247,.12);
  --blau:#38BDF8;--blau-soft:#7DD3FC;--blau-bg:rgba(56,189,248,.10);
  --on-lila:#fff;--glow:.55;
  --shadow:0 20px 60px -30px rgba(0,0,0,.8);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#FAF8FF;--bg-2:#F2EEFB;--card:#FFFFFF;--card-2:#F6F2FF;
  --line:#E7E1F5;--line-2:#D6CCEE;
  --text:#1C1428;--text-2:#564C6B;--text-3:#8A819E;
  --lila:#9333EA;--lila-soft:#9333EA;--lila-bg:rgba(147,51,234,.08);
  --blau:#0284C7;--blau-soft:#0284C7;--blau-bg:rgba(2,132,199,.08);
  --on-lila:#fff;--glow:.25;
  --shadow:0 20px 50px -30px rgba(60,30,110,.35);
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}
a{color:inherit}
img,svg{display:block;max-width:100%}
.wrap{width:min(1160px,100% - 32px);margin-inline:auto}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.eyebrow{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--lila-soft)}
.grad{background:linear-gradient(100deg,var(--lila) 0%,var(--blau) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-lila{color:var(--lila-soft)}.t-blau{color:var(--blau)}
:focus-visible{outline:2px solid var(--blau);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Hintergrund-Glow */
.bg-glow{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.bg-glow::before,.bg-glow::after{content:"";position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:calc(var(--glow)*.5)}
.bg-glow::before{background:var(--lila);top:-30vmax;left:-20vmax}
.bg-glow::after{background:var(--blau);bottom:-35vmax;right:-25vmax;opacity:calc(var(--glow)*.35)}

/* Header */
.header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--line)}
.header .wrap{display:flex;align-items:center;gap:24px;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:19px;letter-spacing:-.02em}
.logo .mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--lila),var(--blau));display:grid;place-items:center;color:#fff;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:400;box-shadow:0 0 22px -4px var(--lila)}
.logo .san{color:var(--lila-soft)}.logo .diel{color:var(--blau)}
.logo small{font-weight:500;color:var(--text-2);font-size:15px;margin-left:2px}
.nav{display:flex;gap:28px;margin-left:auto}
.nav a{text-decoration:none;color:var(--text-2);font-size:14px;font-weight:500;transition:color .2s}
.nav a:hover{color:var(--text)}
.actions{display:flex;align-items:center;gap:10px}
.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line-2);background:var(--card);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,transform .15s}
.icon-btn:hover{border-color:var(--lila)}
.icon-btn:active{transform:scale(.95)}
.icon-btn svg{width:18px;height:18px}
.theme-sun{display:none}
:root[data-theme="light"] .theme-sun{display:block}
:root[data-theme="light"] .theme-moon{display:none}
.menu-btn{display:none}

.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;font-weight:600;font-size:14px;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--lila);color:var(--on-lila);box-shadow:0 8px 30px -10px var(--lila)}
.btn-primary:hover{box-shadow:0 10px 36px -8px var(--lila)}
.btn-ghost{border-color:var(--line-2);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--blau)}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}

/* Hero */
.hero{padding:96px 0 40px}
.hero h1{font-size:clamp(42px,7.4vw,92px);line-height:1.02;letter-spacing:-.045em;font-weight:600;margin:22px 0 26px;max-width:12ch}
.hero p.lead{font-size:clamp(17px,1.6vw,20px);color:var(--text-2);max-width:56ch;margin:0 0 34px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-visual{margin-top:64px;position:relative;border-radius:28px;border:1px solid var(--line);background:radial-gradient(120% 140% at 15% 0%,var(--lila-bg),transparent 55%),radial-gradient(120% 140% at 100% 100%,var(--blau-bg),transparent 55%),var(--card);min-height:420px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;box-shadow:var(--shadow)}
.code-bg{position:absolute;inset:0 0 38% 0;padding:30px 34px;font-family:"JetBrains Mono",monospace;font-size:12.5px;line-height:1.9;color:var(--text-3);opacity:.55;white-space:pre;overflow:hidden;mask-image:linear-gradient(90deg,#000 30%,transparent 75%);-webkit-mask-image:linear-gradient(90deg,#000 30%,transparent 75%)}
.code-bg .k{color:var(--lila-soft)}.code-bg .s{color:var(--blau)}
.hero-tag{position:relative;padding:40px;align-self:end}
.hero-tag .eyebrow{color:var(--blau)}
.hero-tag h2{font-size:clamp(26px,3vw,38px);margin:10px 0 0;letter-spacing:-.03em;font-weight:600}
.phones{position:relative;height:100%;min-height:420px}
.phone{position:absolute;width:190px;height:390px;border-radius:34px;border:1px solid var(--line-2);background:linear-gradient(160deg,color-mix(in srgb,var(--card-2) 90%,transparent),color-mix(in srgb,var(--bg) 70%,transparent));backdrop-filter:blur(10px);padding:14px;box-shadow:0 30px 80px -30px var(--lila),inset 0 1px 0 rgba(255,255,255,.08)}
.phone::before{content:"";position:absolute;top:10px;left:50%;translate:-50% 0;width:60px;height:16px;border-radius:10px;background:var(--bg)}
.phone.p1{right:200px;top:50px;rotate:-8deg}
.phone.p2{right:44px;top:20px;rotate:6deg;box-shadow:0 30px 80px -30px var(--blau),inset 0 1px 0 rgba(255,255,255,.08)}
.screen{margin-top:26px;display:grid;gap:9px}
.bar{height:10px;border-radius:6px;background:var(--line-2)}
.bar.l{background:var(--lila);width:60%}.bar.b{background:var(--blau);width:45%}
.tile{height:64px;border-radius:14px;background:var(--lila-bg);border:1px solid var(--line)}
.tile.b{background:var(--blau-bg)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:9px}

/* Sections */
section{padding:110px 0}
.sec-head{display:grid;grid-template-columns:260px 1fr;gap:40px;margin-bottom:54px;align-items:start}
.sec-head h2{font-size:clamp(30px,4vw,50px);line-height:1.1;letter-spacing:-.035em;margin:0;font-weight:600;max-width:20ch}
.sec-head p{color:var(--text-2);margin:16px 0 0;max-width:58ch}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px;transition:border-color .25s,transform .25s,box-shadow .25s;position:relative}
.card:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:var(--shadow)}
.card .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:56px}
.card .num{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--text-3)}
.card .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--lila-bg);color:var(--lila-soft)}
.card:nth-child(2) .ico{background:var(--blau-bg);color:var(--blau)}
.card .ico svg{width:20px;height:20px}
.card h3{font-size:21px;margin:0 0 8px;letter-spacing:-.02em;font-weight:600}
.card p{margin:0;color:var(--text-2);font-size:15px}

/* Projekte */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.project{background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s,transform .25s,box-shadow .25s}
.project:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow)}
.p-visual{height:230px;position:relative;overflow:hidden;display:grid;place-items:center}
.p-visual.v1{background:radial-gradient(80% 90% at 30% 20%,rgba(168,85,247,.45),transparent 60%),radial-gradient(80% 90% at 80% 90%,rgba(56,189,248,.35),transparent 60%),#120D1E}
.p-visual.v2{background:radial-gradient(80% 90% at 70% 10%,rgba(56,189,248,.4),transparent 60%),radial-gradient(70% 80% at 20% 90%,rgba(168,85,247,.3),transparent 60%),#0D1220}
.p-visual.v3{background:radial-gradient(90% 90% at 50% 0%,rgba(192,132,252,.4),transparent 60%),radial-gradient(70% 80% at 90% 100%,rgba(56,189,248,.3),transparent 60%),#140F20}
.mini{width:118px;height:200px;border-radius:24px;border:1px solid rgba(255,255,255,.14);background:rgba(14,11,22,.55);backdrop-filter:blur(6px);padding:12px;translate:0 26px;box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
.mini .h{height:8px;width:55%;border-radius:4px;background:rgba(255,255,255,.35);margin-bottom:10px}
.mini .it{height:30px;border-radius:9px;background:rgba(255,255,255,.07);margin-bottom:7px;display:flex;align-items:center;gap:7px;padding:0 7px}
.mini .av{width:16px;height:16px;border-radius:50%;flex:none}
.mini .ln{height:5px;border-radius:3px;background:rgba(255,255,255,.25);flex:1}
.mini .live{width:22px;height:8px;border-radius:3px;background:#A855F7}
.p-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.p-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.p-meta .mono{font-size:12px;color:var(--blau)}
.badge{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--lila-bg);color:var(--lila-soft);border:1px solid color-mix(in srgb,var(--lila) 35%,transparent);white-space:nowrap}
.badge.dev{background:var(--blau-bg);color:var(--blau);border-color:color-mix(in srgb,var(--blau) 35%,transparent)}
.project h3{font-size:24px;margin:0 0 8px;letter-spacing:-.025em;font-weight:600}
.project p{margin:0 0 18px;color:var(--text-2);font-size:15px}
.p-link{margin-top:auto;font-size:13.5px;color:var(--text-2);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.p-link:hover{color:var(--blau)}

/* Prozess */
.process-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:48px;align-items:start}
.process-grid h2{font-size:clamp(34px,4.4vw,56px);line-height:1.05;letter-spacing:-.04em;margin:14px 0 0;font-weight:600}
.steps{background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.step{display:grid;grid-template-columns:56px 1fr 1.2fr;gap:16px;padding:26px 30px;border-bottom:1px solid var(--line);align-items:center;transition:background .2s}
.step:last-child{border-bottom:0}
.step:hover{background:var(--card-2)}
.step .mono{color:var(--blau);font-size:12px}
.step h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-.015em}
.step p{margin:0;color:var(--text-2);font-size:14.5px}

/* Anfrage */
.inquiry{display:grid;grid-template-columns:1fr 1.5fr;gap:48px;align-items:start}
.inquiry h2{font-size:clamp(30px,3.6vw,44px);line-height:1.1;letter-spacing:-.035em;margin:14px 0 16px;font-weight:600}
.inquiry .intro{color:var(--text-2);margin:0;max-width:40ch}
.wizard{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:34px;min-height:440px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.w-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}
.w-top .mono{font-size:12px;letter-spacing:.14em;color:var(--text-3)}
.progress{width:140px;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.progress span{display:block;height:100%;width:20%;background:linear-gradient(90deg,var(--lila),var(--blau));transition:width .35s}
.w-step{display:none;flex:1;animation:fade .35s ease}
.w-step.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.w-step h3{font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;margin:0 0 24px;font-weight:600;line-height:1.15}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{text-align:left;padding:15px 18px;border-radius:14px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text);font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:border-color .2s,background .2s}
.opt:hover{border-color:var(--blau)}
.opt[aria-pressed="true"]{border-color:var(--lila);background:var(--lila-bg);box-shadow:0 0 0 1px var(--lila) inset}
.fields{display:grid;gap:14px}
.fields .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label.f{display:grid;gap:6px;font-size:13px;color:var(--text-2);font-weight:500}
.f input,.f textarea{font-family:inherit;font-size:15px;color:var(--text);background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;transition:border-color .2s}
.f textarea{min-height:110px;resize:vertical}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--lila)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text-2)}
.consent input{margin-top:3px;accent-color:var(--lila)}
.hp{position:absolute;left:-9999px}
.err{color:#F87171;font-size:13px;min-height:20px;margin-top:12px}
.w-nav{display:flex;justify-content:space-between;align-items:center;margin-top:26px}
.w-back{background:none;border:0;color:var(--text-2);font-family:inherit;font-size:14px;cursor:pointer;padding:8px 0}
.w-back:hover{color:var(--text)}
.w-back[hidden]{visibility:hidden;display:block}
.done{text-align:center;padding:30px 0}
.done .ok{width:64px;height:64px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;background:linear-gradient(135deg,var(--lila),var(--blau));color:#fff}
.done p{color:var(--text-2)}

/* Footer */
.footer{border-top:1px solid var(--line);padding:56px 0 40px;margin-top:40px}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.f-grid p{color:var(--text-2);font-size:14.5px;max-width:34ch;margin:12px 0 0}
.f-col h4{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.16em;color:var(--text-3);font-weight:400;margin:0 0 14px}
.f-col a{display:block;text-decoration:none;color:var(--text-2);font-size:14.5px;margin-bottom:9px}
.f-col a:hover{color:var(--blau)}
.f-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.12em;color:var(--text-3)}

/* Rechtstexte */
.legal{padding:70px 0 40px}
.legal .wrap{max-width:780px}
.legal h1{font-size:clamp(34px,5vw,52px);letter-spacing:-.04em;margin:14px 0 10px;font-weight:600}
.legal h2{font-size:21px;margin:42px 0 10px;letter-spacing:-.02em;font-weight:600}
.legal h3{font-size:16.5px;margin:24px 0 6px}
.legal p,.legal li{color:var(--text-2)}
.legal a{color:var(--blau)}
.legal .note{background:var(--lila-bg);border:1px solid var(--line-2);border-radius:14px;padding:14px 18px;font-size:14px}

/* Reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}*{animation:none!important}}

/* Responsive */
@media (max-width:960px){
  .cards,.projects{grid-template-columns:1fr 1fr}
  .sec-head,.process-grid,.inquiry{grid-template-columns:1fr;gap:20px}
  .hero-visual{grid-template-columns:1fr}
  .phones{min-height:360px}
  .phone.p1{right:auto;left:calc(50% - 190px)}
  .phone.p2{right:calc(50% - 200px)}
  .hero-tag{padding:30px}
}
@media (max-width:760px){
  .nav{position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 16px 16px;display:none}
  .nav.open{display:flex}
  .nav a{padding:13px 4px;font-size:16px;border-bottom:1px solid var(--line)}
  .menu-btn{display:grid}
  .actions .btn{display:none}
  .actions{margin-left:auto}
  .cards,.projects,.opts,.fields .two,.f-grid{grid-template-columns:1fr}
  section{padding:76px 0}
  .hero{padding-top:60px}
  .card .top{margin-bottom:32px}
  .step{grid-template-columns:40px 1fr;padding:20px}
  .step p{grid-column:2}
  .wizard{padding:24px;min-height:0}
  .phone{width:150px;height:310px}
  .phone.p1{left:calc(50% - 150px)}
  .phone.p2{right:calc(50% - 155px)}
  .phones{min-height:330px}
  .code-bg{font-size:11px}
}