@font-face{font-family:'Archivo'; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap;
  src:url(/assets/fonts/archivo.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/fonts/plex-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url(/assets/fonts/plex-600.woff2) format('woff2')}

:root{
  color-scheme: light;
  --steel-0:#FCFBF9; --steel-50:#F3F2EE; --steel-100:#E8E6E0; --steel-200:#D8D4CB; --steel-300:#B4AFA3;
  --ink-900:#16130D; --ink-600:#59544A; --ink-400:#8C8578;
  --copper-600:#9E4A17; --copper-500:#B85A1E; --copper-800:#6E3410; --copper-100:#F3E2D4; --copper-200:#E7C9AC;
  --brass-500:#C99A3D; --brass-700:#8F6A22;
  --carbon-900:#1C1A15; --carbon-800:#26231C; --carbon-line:#3A362C; --carbon-txt:#EDEAE3; --carbon-mut:#9B948A;
  --led-g:#2E7D3A; --led-g-tint:#E2EEDF; --led-g-dark:#7FC98B;
  --amber:#A97A14; --amber-tint:#F4E9CF; --amber-dark:#D9A84E;
  --red:#AC3524; --red-tint:#F4DFDA; --red-dark:#E58274;
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --maxw:1240px;
  --e:cubic-bezier(.2,0,0,1);
  --shadow-raise:0 1px 2px rgba(22,19,13,.06), 0 12px 32px -20px rgba(22,19,13,.25);
}
*{box-sizing:border-box; margin:0; padding:0}
body{background:var(--steel-50); color:var(--ink-900); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
select,input,textarea{font-family:var(--sans); font-size:14px; color:var(--ink-900); background:var(--steel-0); border:1px solid var(--steel-200); border-radius:3px; padding:11px 12px; width:100%}
select{font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--ink-600); padding:8px 10px; cursor:pointer; width:auto}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--copper-600)}
::selection{background:var(--copper-600); color:#fff}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.mono{font-family:var(--mono)}
.eyebrow{font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--copper-600)}
.display{font-stretch:125%; font-weight:800; letter-spacing:-.01em}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-size:14.5px; font-weight:600; border-radius:4px; padding:12px 22px; line-height:1.2; transition:background .2s var(--e), border-color .2s var(--e), color .2s var(--e), transform .12s var(--e)}
.btn:active{transform:translateY(1px)}
.btn-pri{background:var(--copper-600); color:#fff}
.btn-pri:hover{background:var(--copper-500)}
.btn-ink{background:var(--ink-900); color:var(--steel-0)}
.btn-ink:hover{background:#2E2A21}
.btn-line{border:1px solid var(--ink-900); color:var(--ink-900); background:transparent}
.btn-line:hover{background:var(--steel-100)}
.btn-line-light{border:1px solid var(--carbon-mut); color:var(--carbon-txt); background:transparent}
.btn-line-light:hover{border-color:var(--carbon-txt)}
.btn[disabled]{opacity:.45; cursor:not-allowed}

.led{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--led-g); box-shadow:0 0 0 3px var(--led-g-tint); flex:none}
.led.pulse{animation:led 2s var(--e) infinite}
@keyframes led{0%,100%{opacity:1}50%{opacity:.45}}
.led.off{background:var(--red); box-shadow:0 0 0 3px var(--red-tint); animation:none}
.plaque{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--brass-700); border:1px solid var(--brass-500); border-radius:2px; padding:5px 11px; background:var(--steel-0)}
.demo-tag{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); border:1px solid var(--steel-200); border-radius:2px; padding:3px 8px}

/* ---------- header ---------- */
header{position:sticky; top:0; z-index:90; background:rgba(243,242,238,.97); border-bottom:1px solid var(--steel-200)}
.hrow1{display:flex; align-items:center; gap:18px; height:66px}
.hrow1 .logo img{height:30px; width:auto}
.burger{display:none; width:40px; height:40px; border:1px solid var(--steel-200); border-radius:4px; background:var(--steel-0); align-items:center; justify-content:center; flex:none}
.search{flex:1; display:flex; align-items:center; gap:10px; max-width:560px; border:1px solid var(--steel-200); border-radius:4px; background:var(--steel-0); padding:0 12px; height:42px; transition:border-color .2s var(--e)}
.search:focus-within{border-color:var(--copper-600)}
.search svg{color:var(--ink-400); flex:none}
.search input{flex:1; border:none; outline:none; background:none; padding:0; font-family:var(--mono); font-size:13px}
.search input::placeholder{color:var(--ink-400)}
.nav-right{display:flex; align-items:center; gap:12px; margin-left:auto}
.chip-cur{font-family:var(--mono); font-size:11.5px; color:var(--ink-600); border:1px solid var(--steel-200); border-radius:2px; padding:5px 10px; background:var(--steel-0); white-space:nowrap}
.cart{position:relative; width:40px; height:40px; border:1px solid var(--steel-200); border-radius:4px; background:var(--steel-0); display:flex; align-items:center; justify-content:center; transition:border-color .2s var(--e); color:var(--ink-900); flex:none}
.cart:hover{border-color:var(--ink-900)}
.cart .n{position:absolute; top:-7px; right:-7px; background:var(--copper-600); color:#fff; font-family:var(--mono); font-size:10px; font-weight:600; line-height:1; padding:3px 5px; border-radius:2px}
.cart.pop .n{animation:npop .32s var(--e)}
@keyframes npop{40%{transform:scale(1.35)}}
.hrow2{border-top:1px solid var(--steel-100)}
.hrow2 .wrap{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none}
.hrow2 .wrap::-webkit-scrollbar{display:none}
.hrow2 a{position:relative; font-size:13.5px; font-weight:600; color:var(--ink-600); padding:11px 13px; white-space:nowrap; transition:color .2s}
.hrow2 a::after{content:""; position:absolute; left:13px; right:100%; bottom:0; height:2px; background:var(--copper-600); transition:right .2s var(--e)}
.hrow2 a:hover{color:var(--ink-900)}
.hrow2 a.active{color:var(--ink-900)}
.hrow2 a.active::after{right:13px}

/* ---------- mobile drawer ---------- */
.scrim{position:fixed; inset:0; background:rgba(22,19,13,.5); z-index:120; opacity:0; visibility:hidden; transition:opacity .24s var(--e), visibility .24s}
.scrim.open{opacity:1; visibility:visible}
.drawer{position:fixed; top:0; left:0; bottom:0; width:min(84vw,330px); background:var(--steel-50); border-right:1px solid var(--steel-200); z-index:130; transform:translateX(-102%); transition:transform .28s var(--e); display:flex; flex-direction:column; overflow-y:auto}
.drawer.open{transform:none}
.drawer .dhead{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--steel-200)}
.drawer .dhead img{height:26px; width:auto}
.drawer .dsearch{padding:16px 18px; border-bottom:1px solid var(--steel-200)}
.drawer .dsearch .search{max-width:none; width:100%}
.drawer nav{padding:8px 0}
.drawer nav a{display:flex; align-items:center; justify-content:space-between; padding:13px 18px; font-size:15px; font-weight:600; color:var(--ink-900); border-bottom:1px solid var(--steel-100)}
.drawer nav a:active{background:var(--steel-100)}
.drawer nav a span{font-family:var(--mono); font-size:11px; color:var(--ink-400)}
.drawer .dfoot{margin-top:auto; padding:18px; border-top:1px solid var(--steel-200); display:flex; flex-direction:column; gap:10px}

/* ---------- ticker ---------- */
.ticker{background:var(--carbon-900); border-bottom:1px solid var(--carbon-line)}
.ticker .wrap{display:flex; align-items:center; gap:28px; height:34px; overflow-x:auto; scrollbar-width:none}
.ticker .wrap::-webkit-scrollbar{display:none}
.tick{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11.5px; color:var(--carbon-mut); white-space:nowrap; font-variant-numeric:tabular-nums}
.tick b{color:var(--carbon-txt); font-weight:600; transition:color .12s}
.tick b.flash{color:var(--amber-dark)}
.tick .d{font-size:11px}
.tick .up{color:var(--led-g-dark)} .tick .dn{color:var(--red-dark)}
.live{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.14em; color:var(--copper-200)}
.live .led{width:7px; height:7px; background:var(--copper-500); box-shadow:none}

.view{display:none}
.view.active{display:block; animation:viewin .24s var(--e) both}
@keyframes viewin{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ---------- Kino-Bühne ---------- */
.stage{position:relative; background:var(--carbon-900); border-bottom:2px solid var(--copper-600); overflow:hidden}
.stage::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(237,234,227,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(237,234,227,.03) 1px, transparent 1px); background-size:24px 24px; pointer-events:none}
.stage-grid{position:relative; display:grid; grid-template-columns:1fr 1.05fr; gap:24px; align-items:center; min-height:520px; padding-top:34px; padding-bottom:44px}
.stage-txt{position:relative; overflow:hidden; z-index:2}
.slides{display:flex; transition:transform .32s var(--e)}
.slide{flex:0 0 100%; padding-right:12px}
.slide .kick{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--copper-200); margin-bottom:12px}
.slide h2{font-size:clamp(28px,3.2vw,44px); line-height:1.06; text-wrap:balance; margin-bottom:14px; color:var(--carbon-txt)}
.slide p{color:var(--carbon-mut); font-size:15px; max-width:44ch; margin-bottom:24px}
.sdots{display:flex; gap:8px; margin-top:28px}
.sdots button{width:26px; height:4px; border-radius:2px; background:var(--carbon-line); transition:background .2s}
.sdots button.on{background:var(--copper-500)}
.sarrow{position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border:1px solid var(--carbon-line); border-radius:4px; background:var(--carbon-800); color:var(--carbon-mut); display:flex; align-items:center; justify-content:center; z-index:3; transition:border-color .2s, color .2s}
.sarrow:hover{border-color:var(--copper-500); color:var(--carbon-txt)}
.sarrow:active{transform:translateY(calc(-50% + 1px))}
.sarrow.prev{left:14px} .sarrow.next{right:14px}
.stage-3d{position:relative; height:520px; z-index:1; touch-action:pan-y; cursor:grab; user-select:none}
.stage-3d.drag{cursor:grabbing}
.floor3d{position:absolute; left:-30%; right:-30%; bottom:-70px; height:360px; pointer-events:none;
  background-image:linear-gradient(rgba(237,234,227,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(237,234,227,.07) 1px, transparent 1px);
  background-size:42px 42px; transform:perspective(700px) rotateX(74deg);
  -webkit-mask-image:radial-gradient(60% 95% at 50% 0%, #000 25%, transparent 72%);
  mask-image:radial-gradient(60% 95% at 50% 0%, #000 25%, transparent 72%)}
.glow3d{position:absolute; left:50%; top:44%; width:540px; height:540px; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(184,90,30,.30), rgba(184,90,30,.08) 45%, transparent 68%); animation:glowp 5.5s ease-in-out infinite}
@keyframes glowp{0%,100%{opacity:.8}50%{opacity:1}}
#dust{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.objwrap{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; perspective:1100px; pointer-events:none}
.obj3d{position:relative; width:min(76%,400px); transform-style:preserve-3d; will-change:transform}
.obj3d.intro{animation:objin 1.15s cubic-bezier(.2,0,0,1) both}
@keyframes objin{from{opacity:0; transform:translateY(46px) scale(1.15)}to{opacity:1; transform:none}}
.floaty{position:relative; transform-style:preserve-3d}
.floaty.on{animation:floaty 6.5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero-im{width:100%; position:relative; z-index:2; transition:opacity .18s var(--e), transform .18s var(--e)}
.hero-ref{position:absolute; top:99%; left:0; width:100%; transform:scaleY(-1); opacity:.2; z-index:1; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 52%, rgba(0,0,0,.85) 100%);
  mask-image:linear-gradient(to bottom, transparent 52%, rgba(0,0,0,.85) 100%); transition:opacity .18s var(--e)}
.obj3d.swap .hero-im{opacity:0; transform:translateY(14px) scale(.97)}
.obj3d.swap .hero-ref{opacity:0}
.hero-shadow{position:absolute; left:6%; right:6%; bottom:-30px; height:44px; z-index:0; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.6), transparent 70%)}
.hint3d{position:absolute; right:8px; bottom:8px; z-index:2; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--carbon-mut); border:1px solid var(--carbon-line); border-radius:2px; padding:4px 9px; background:rgba(38,35,28,.7); pointer-events:none}

/* ---------- brand tiles ---------- */
.brands{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px}
.btile{background:var(--steel-0); border:1px solid var(--steel-200); border-radius:8px; padding:16px 14px; text-align:center; transition:border-color .2s var(--e), box-shadow .2s var(--e)}
.btile:hover{border-color:var(--ink-900); box-shadow:var(--shadow-raise)}
.btile .bn{font-weight:700; font-size:14.5px; letter-spacing:-.005em}
.btile .bc{font-family:var(--mono); font-size:10.5px; color:var(--ink-400); margin-top:2px}

/* ---------- sections ---------- */
.sec{padding:56px 0}
.sec-head{margin-bottom:24px}
.sec-head .top{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap}
.sec-head h2{font-size:30px; margin-top:6px}
.sec-head a{font-size:14px; font-weight:600; color:var(--copper-600)}
.sec-head a:hover{text-decoration:underline; text-underline-offset:4px}
.measure{position:relative; height:1px; background:var(--steel-200); margin-top:16px}
.measure::before,.measure::after{content:""; position:absolute; top:-3px; width:1px; height:7px; background:var(--steel-300)}
.measure::before{left:0} .measure::after{right:0}

/* ---------- cards ---------- */
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px}
.fil{font-family:var(--mono); font-size:12.5px; font-weight:600; padding:8px 16px; border-radius:2px; border:1px solid var(--steel-200); background:var(--steel-0); color:var(--ink-600); transition:all .2s var(--e)}
.fil:hover{border-color:var(--steel-300); color:var(--ink-900)}
.fil:active{transform:translateY(1px)}
.fil.on{background:var(--copper-100); border-color:var(--copper-600); color:var(--copper-800)}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:14px; perspective:1400px}
.card{position:relative; transform-style:preserve-3d; will-change:transform; background:var(--steel-0); border:1px solid var(--steel-200); border-radius:8px; display:flex; flex-direction:column; overflow:hidden; transition:transform .18s ease-out, border-color .2s var(--e), box-shadow .2s var(--e); cursor:pointer}
.card:hover{border-color:var(--ink-900); box-shadow:var(--shadow-raise)}
.card .glare{position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(340px 220px at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.5), transparent 62%); opacity:0; transition:opacity .2s; mix-blend-mode:soft-light}
.card:hover .glare{opacity:1}
.card .im{position:relative; background:#fff; border-bottom:1px solid var(--steel-100); padding:12px}
.card .im img{width:100%; height:150px; object-fit:contain; transition:transform .2s var(--e)}
.card:hover .im img{transform:translateY(-2px)}
.card .flag{position:absolute; top:8px; left:8px; font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:2px; z-index:3}
.flag-new{background:var(--copper-100); color:var(--copper-800); border:1px solid var(--copper-200)}
.flag-used{background:var(--steel-100); color:var(--ink-600); border:1px solid var(--steel-200)}
.card .body{padding:11px 13px 9px}
.card .brand{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400)}
.card h3{font-size:13.5px; font-weight:700; letter-spacing:-.005em; margin-top:2px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em}
.card .plate{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 13px; border-top:1px solid var(--steel-100); background:var(--steel-50)}
.card .plate .lft{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; font-weight:600; color:var(--ink-600); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden}
.card .plate .led{width:7px; height:7px; box-shadow:none}
.price{font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums}
.card .price{font-size:13.5px; white-space:nowrap}

/* ---------- Maschinenraum ---------- */
.mroom{background:var(--carbon-900); padding:64px 0; border-block:1px solid var(--carbon-line)}
.mroom-head{margin-bottom:32px}
.mroom-head .eyebrow{color:var(--copper-200)}
.mroom-head h2{font-size:30px; color:var(--carbon-txt); margin-top:8px}
.bento{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:138px; gap:12px}
.cell{position:relative; background:var(--carbon-800); border:1px solid var(--carbon-line); border-radius:8px; padding:18px 20px; overflow:hidden; transition:border-color .2s var(--e)}
.cell:hover{border-color:#57534A}
.cell .k{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--carbon-mut)}
.cell .v{font-family:var(--mono); font-weight:600; color:var(--carbon-txt); font-variant-numeric:tabular-nums}
.c-spark{grid-column:span 2; grid-row:span 2}
.c-spark canvas{position:absolute; left:0; right:0; bottom:0; width:100%; height:58%}
.c-spark .v{font-size:34px; margin-top:6px}
.c-spark .v small{font-size:13px; color:var(--carbon-mut); font-weight:400}
.c-ring{grid-row:span 2; display:flex; flex-direction:column}
.c-ring svg{margin:auto}
.c-ring .rv{font-family:var(--mono); font-weight:600; font-size:19px; fill:var(--carbon-txt)}
.c-clock .v{font-size:22px; margin-top:6px; display:flex; align-items:center; gap:9px}
.c-clock .led{box-shadow:none}
.c-star .v{margin-top:8px; display:flex; gap:3px}
.c-star svg{color:var(--brass-500)}
.c-ddp .v{font-size:16px; margin-top:6px}
.c-ddp .route{position:absolute; right:-8px; bottom:-12px; opacity:.55}
.c-ddp .route path{stroke-dasharray:5 7; animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-12}}

/* ---------- Bewertungen + FAQ ---------- */
.revs{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px}
.rev{background:var(--steel-0); border:1px solid var(--steel-200); border-radius:8px; padding:20px}
.rev .rs{display:flex; gap:2px; color:var(--brass-500); margin-bottom:10px}
.rev p{font-size:14px; color:var(--ink-600); margin-bottom:14px}
.rev .who{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-400); border-top:1px solid var(--steel-100); padding-top:12px}
.rev .who b{color:var(--ink-900); font-size:13px}
.rev .vf{display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:#1F5A2A; margin-left:auto}
.faqs{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start}
details.faq{background:var(--steel-0); border:1px solid var(--steel-200); border-radius:8px; overflow:hidden}
details.faq summary{list-style:none; cursor:pointer; padding:15px 18px; font-size:14.5px; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:12px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; font-family:var(--mono); font-size:17px; color:var(--copper-600); transition:transform .2s var(--e)}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq summary:hover{background:var(--steel-50)}
details.faq .fa{padding:0 18px 16px; font-size:14px; color:var(--ink-600)}

/* ---------- hosting band ---------- */
.band{border-radius:10px; background:var(--carbon-900); border:1px solid var(--carbon-line); border-top:2px solid var(--copper-600); color:var(--carbon-txt); padding:40px 44px; display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:center; margin:0 0 56px}
.band .eyebrow{color:var(--copper-200)}
.band h2{font-size:26px; margin:10px 0 10px; text-wrap:balance}
.band p{color:var(--carbon-mut); font-size:15px; max-width:52ch}
.band .kpis{display:flex; gap:28px; margin-top:20px; flex-wrap:wrap}
.band .kpis .v{font-family:var(--mono); font-size:21px; font-weight:600; font-variant-numeric:tabular-nums}
.band .kpis .k{font-size:12px; color:var(--carbon-mut)}
.band .side{display:flex; flex-direction:column; gap:12px; align-items:flex-start}

/* ---------- shop ---------- */
.shop-layout{display:grid; grid-template-columns:230px 1fr; gap:28px; align-items:start}
.sidebar{position:sticky; top:130px; display:flex; flex-direction:column; gap:22px}
.side-box{background:var(--steel-0); border:1px solid var(--steel-200); border-radius:8px; overflow:hidden}
.side-box h4{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:11px 14px; border-bottom:1px solid var(--steel-200); background:var(--steel-100)}
.scat{display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; font-size:13.5px; font-weight:500; color:var(--ink-600); padding:10px 14px; border-bottom:1px solid var(--steel-100); transition:background .15s, color .15s}
.scat:last-child{border-bottom:none}
.scat:hover{background:var(--steel-50); color:var(--ink-900)}
.scat.on{color:var(--copper-800); background:var(--copper-100); font-weight:600}
.scat .c{font-family:var(--mono); font-size:11px; color:var(--ink-400)}
.scat.on .c{color:var(--copper-800)}
.stockrow{display:flex; align-items:center; gap:10px; padding:11px 14px; font-size:13.5px; color:var(--ink-600); cursor:pointer; user-select:none}
.stockrow .box{width:15px; height:15px; border:1px solid var(--steel-300); border-radius:2px; background:var(--steel-0); display:flex; align-items:center; justify-content:center; color:#fff; transition:all .15s}
.stockrow.on .box{background:var(--copper-600); border-color:var(--copper-600)}
.toolbar{display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.toolbar .count{font-family:var(--mono); font-size:12px; color:var(--ink-400)}
.toolbar .spacer{flex:1}
.schip{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; font-weight:600; background:var(--copper-100); color:var(--copper-800); border:1px solid var(--copper-600); border-radius:2px; padding:5px 10px}
.schip button{font-size:13px; line-height:1; color:var(--copper-800)}
.pagi{display:flex; gap:6px; margin-top:26px}
.pagi button{font-family:var(--mono); font-size:12.5px; font-weight:600; min-width:34px; height:34px; padding:0 8px; border:1px solid var(--steel-200); border-radius:2px; background:var(--steel-0); color:var(--ink-600)}
.pagi button.on{background:var(--ink-900); border-color:var(--ink-900); color:var(--steel-0)}
.pagi button:not(.on):hover{border-color:var(--steel-300)}

/* ---------- Produktseite ---------- */
.crumb{font-family:var(--mono); font-size:11.5px; color:var(--ink-400); margin:26px 0 18px}
.crumb b{color:var(--ink-600); font-weight:600}
.pd{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; margin-bottom:64px}
.pd-media{position:sticky; top:150px}
.pd-stage{position:relative; background:var(--carbon-900); border:1px solid var(--carbon-line); border-top:2px solid var(--copper-600); border-radius:10px; overflow:hidden; height:430px; display:flex; align-items:center; justify-content:center; perspective:1100px}
.pd-stage::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(237,234,227,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(237,234,227,.035) 1px, transparent 1px); background-size:26px 26px}
.pd-glow{position:absolute; left:50%; top:48%; width:420px; height:420px; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(184,90,30,.26), rgba(184,90,30,.06) 46%, transparent 68%)}
.pd-floor{position:absolute; left:-25%; right:-25%; bottom:-56px; height:250px; pointer-events:none;
  background-image:linear-gradient(rgba(237,234,227,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(237,234,227,.07) 1px, transparent 1px);
  background-size:38px 38px; transform:perspective(600px) rotateX(75deg);
  -webkit-mask-image:radial-gradient(58% 92% at 50% 0%, #000 22%, transparent 70%);
  mask-image:radial-gradient(58% 92% at 50% 0%, #000 22%, transparent 70%)}
.pd-obj{position:relative; z-index:2; transform-style:preserve-3d; will-change:transform; max-width:76%}
.pd-obj img.main{max-height:330px; width:auto; max-width:100%; object-fit:contain; transition:opacity .18s var(--e), transform .18s var(--e)}
.pd-obj img.mref{position:absolute; top:99%; left:0; width:100%; transform:scaleY(-1); opacity:.18; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.8) 100%);
  mask-image:linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.8) 100%)}
.pd-obj.swap img.main{opacity:0; transform:translateY(10px) scale(.98)}
.pd-obj.swap img.mref{opacity:0}
.pd-thumbs{display:flex; gap:10px; margin-top:12px}
.pd-thumbs button{width:74px; height:74px; border:1px solid var(--steel-200); border-radius:6px; background:var(--carbon-800); overflow:hidden; padding:5px; transition:border-color .2s var(--e)}
.pd-thumbs button:hover{border-color:var(--ink-900)}
.pd-thumbs button.on{border-color:var(--copper-600); box-shadow:0 0 0 1px var(--copper-600)}
.pd-thumbs img{width:100%; height:100%; object-fit:contain}
.pd-info .brand{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400)}
.pd-info h1{font-size:clamp(26px,2.8vw,34px); line-height:1.1; margin:8px 0 10px; text-wrap:balance}
.stars{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-600); margin-bottom:18px; flex-wrap:wrap}
.stars .st-row{display:flex; gap:2px; color:var(--brass-500)}
.stock{display:inline-flex; align-items:center; gap:7px; font-weight:600; color:#1F5A2A; font-size:13px}
.pd-price{font-family:var(--mono); font-size:30px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.pd-price small{font-size:13px; color:var(--ink-600); font-weight:400; font-family:var(--sans)}
.opt-label{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); margin:22px 0 8px}
.opts{display:flex; gap:8px; flex-wrap:wrap}
.opt{font-family:var(--mono); font-size:13px; font-weight:600; padding:10px 16px; border-radius:2px; border:1px solid var(--steel-200); background:var(--steel-0); transition:all .2s var(--e); font-variant-numeric:tabular-nums}
.opt:hover{border-color:var(--steel-300)}
.opt:active{transform:translateY(1px)}
.opt.on{background:var(--copper-100); border-color:var(--copper-600); color:var(--copper-800)}
.pd-cta{display:flex; gap:12px; margin:26px 0 16px}
.pd-cta .btn{flex:1; padding:15px 20px}
#addCart.stamped{background:var(--led-g); transition:background .12s}
.assure{display:flex; flex-direction:column; gap:9px; border:1px solid var(--steel-200); border-radius:4px; padding:15px 17px; background:var(--steel-0)}
.assure div{display:flex; gap:10px; align-items:center; font-size:13.5px; color:var(--ink-600)}
.assure svg{color:var(--led-g); flex:none}
.pays{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap}
.pay{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.05em; color:var(--ink-600); border:1px solid var(--steel-200); border-radius:2px; padding:5px 10px; background:var(--steel-0)}
.pd-lower{display:grid; grid-template-columns:1.2fr .8fr; gap:22px; margin-bottom:56px}
.spec{border:1px solid var(--steel-200); border-radius:8px; overflow:hidden; background:var(--steel-0)}
.spec h3{font-size:13px; font-weight:700; padding:12px 18px; border-bottom:1px solid var(--steel-200); background:var(--steel-100); font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase}
.spec table{width:100%; border-collapse:collapse; font-size:13.5px}
.spec td{padding:10px 18px}
.spec tr:nth-child(even) td{background:var(--steel-50)}
.spec td:first-child{color:var(--ink-600); width:44%}
.spec td:last-child{font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; text-align:right}
.calc-hint{border:1px solid var(--copper-200); border-radius:8px; padding:18px 20px; background:var(--copper-100)}
.calc-hint .t{font-weight:700; font-size:14.5px; color:var(--copper-800); margin-bottom:6px}
.calc-hint p{font-size:13.5px; color:var(--copper-800)}
.calc-hint a{font-weight:700; text-decoration:underline; text-underline-offset:3px}

/* ---------- Warenkorb + Kasse ---------- */
.cart-layout{display:grid; grid-template-columns:1fr 340px; gap:26px; align-items:start; margin-bottom:64px}
.cart-list{background:var(--steel-0); border:1px solid var(--steel-200); border-radius:8px; overflow:hidden}
.crow{display:grid; grid-template-columns:82px 1fr auto auto; gap:16px; align-items:center; padding:16px; border-bottom:1px solid var(--steel-100)}
.crow:last-child{border-bottom:none}
.crow .ci{background:#fff; border:1px solid var(--steel-100); border-radius:4px; padding:6px; height:74px}
.crow .ci img{width:100%; height:100%; object-fit:contain}
.crow h4{font-size:14.5px; font-weight:700; line-height:1.35}
.crow .cv{font-family:var(--mono); font-size:11.5px; color:var(--ink-400); margin-top:3px}
.crow .rm{font-family:var(--mono); font-size:11px; color:var(--ink-400); margin-top:6px; text-decoration:underline; text-underline-offset:3px}
.crow .rm:hover{color:var(--red)}
.qty{display:inline-flex; align-items:center; border:1px solid var(--steel-200); border-radius:3px; overflow:hidden}
.qty button{width:30px; height:32px; font-family:var(--mono); font-size:15px; color:var(--ink-600); background:var(--steel-50)}
.qty button:hover{background:var(--steel-100); color:var(--ink-900)}
.qty span{min-width:36px; text-align:center; font-family:var(--mono); font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums}
.crow .lp{font-family:var(--mono); font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; min-width:96px}
.summary{background:var(--steel-0); border:1px solid var(--steel-200); border-radius:8px; padding:20px; position:sticky; top:150px}
.summary h3{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); margin-bottom:14px}
.srow{display:flex; justify-content:space-between; gap:12px; font-size:14px; color:var(--ink-600); padding:7px 0}
.srow b{font-family:var(--mono); font-weight:600; color:var(--ink-900); font-variant-numeric:tabular-nums}
.srow.tot{border-top:1px solid var(--steel-200); margin-top:10px; padding-top:14px; font-size:16px; color:var(--ink-900); font-weight:700}
.srow.tot b{font-size:21px}
.summary .btn{width:100%; margin-top:16px}
.empty{padding:56px 20px; text-align:center; color:var(--ink-600)}
.empty .btn{margin-top:16px}
.stepper{display:flex; gap:0; margin:28px 0 26px; border:1px solid var(--steel-200); border-radius:6px; overflow:hidden; background:var(--steel-0)}
.stepper div{flex:1; display:flex; align-items:center; justify-content:center; gap:9px; padding:13px 10px; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--ink-400); border-right:1px solid var(--steel-200)}
.stepper div:last-child{border-right:none}
.stepper div.on{background:var(--copper-100); color:var(--copper-800)}
.stepper div.done{color:var(--led-g)}
.stepper .num{width:20px; height:20px; border-radius:2px; border:1px solid currentColor; display:flex; align-items:center; justify-content:center; font-size:11px}
.ckstep{display:none}
.ckstep.on{display:block; animation:viewin .24s var(--e) both}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field{display:flex; flex-direction:column; gap:6px}
.field.full{grid-column:1 / -1}
.field label{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400)}
.field select{width:100%; font-family:var(--sans); font-size:14px; font-weight:400; color:var(--ink-900); padding:11px 12px}
.paylist{display:grid; gap:10px}
.payopt{display:flex; align-items:center; gap:13px; border:1px solid var(--steel-200); border-radius:6px; padding:15px 17px; background:var(--steel-0); cursor:pointer; transition:border-color .2s var(--e), background .2s var(--e); text-align:left; width:100%}
.payopt:hover{border-color:var(--steel-300)}
.payopt.on{border-color:var(--copper-600); background:var(--copper-100)}
.payopt .radio{width:17px; height:17px; border-radius:50%; border:1px solid var(--steel-300); flex:none; display:flex; align-items:center; justify-content:center; background:#fff}
.payopt.on .radio{border-color:var(--copper-600)}
.payopt.on .radio::after{content:""; width:9px; height:9px; border-radius:50%; background:var(--copper-600)}
.payopt .pt{font-weight:700; font-size:14.5px}
.payopt .ps{font-size:12.5px; color:var(--ink-600)}
.payopt .badge2{margin-left:auto; font-family:var(--mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--brass-700); border:1px solid var(--brass-500); border-radius:2px; padding:3px 8px}
.ckbox{background:var(--steel-0); border:1px solid var(--steel-200); border-radius:8px; padding:22px}
.ckbox h3{font-size:16px; font-weight:700; margin-bottom:16px}
.ckrev{display:flex; justify-content:space-between; gap:14px; font-size:14px; padding:9px 0; border-bottom:1px solid var(--steel-100)}
.ckrev:last-of-type{border-bottom:none}
.ckrev .k{color:var(--ink-600)}
.ckrev .v{font-family:var(--mono); font-weight:600; text-align:right}
.ckactions{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}
.done-panel{text-align:center; padding:56px 24px; background:var(--steel-0); border:1px solid var(--steel-200); border-top:2px solid var(--led-g); border-radius:8px; margin-bottom:64px}
.done-panel .ok{width:56px; height:56px; border-radius:50%; background:var(--led-g-tint); color:var(--led-g); display:flex; align-items:center; justify-content:center; margin:0 auto 18px}
.done-panel h2{font-size:26px; margin-bottom:10px}
.done-panel p{color:var(--ink-600); max-width:46ch; margin:0 auto 8px}
.done-panel .onum{font-family:var(--mono); font-size:15px; font-weight:600; background:var(--steel-100); border:1px solid var(--steel-200); border-radius:3px; padding:8px 14px; display:inline-block; margin:14px 0 20px}

/* ---------- hosting ---------- */
.host-head{max-width:660px; margin:56px auto 32px; text-align:center}
.host-head h1{font-size:clamp(30px,3.6vw,44px); line-height:1.06; margin:12px 0 12px; text-wrap:balance}
.host-head h1 .acc{color:var(--copper-600)}
.host-head p{color:var(--ink-600)}
.hcalc{border-radius:10px; background:var(--carbon-900); border:1px solid var(--carbon-line); border-top:2px solid var(--copper-600); padding:34px; max-width:860px; margin:0 auto 56px; color:var(--carbon-txt)}
.switch{display:inline-flex; position:relative; border:1px solid var(--carbon-line); border-radius:4px; background:var(--carbon-800); margin-bottom:28px; overflow:hidden}
.switch .knob{position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px); background:var(--steel-0); border-radius:2px; transition:transform .2s var(--e)}
.switch.gpu .knob{transform:translateX(100%)}
.switch button{position:relative; z-index:1; font-family:var(--mono); font-size:12.5px; font-weight:600; padding:10px 20px; color:var(--carbon-mut); transition:color .2s}
.switch button.on{color:var(--ink-900)}
.slider-row{display:grid; grid-template-columns:170px 1fr 120px; gap:18px; align-items:center; margin-bottom:20px}
.slider-row label{font-size:14px; color:var(--carbon-mut)}
.slider-row output{font-family:var(--mono); font-size:15px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; color:var(--carbon-txt)}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:22px; background:transparent; outline:none; border:none; padding:0}
input[type=range]::-webkit-slider-runnable-track{height:4px; border-radius:2px;
  background:linear-gradient(90deg,var(--copper-500) var(--fill,50%), var(--carbon-line) var(--fill,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:20px; margin-top:-8px; border-radius:2px; background:var(--steel-0); border:1px solid var(--carbon-line); box-shadow:inset 0 0 0 1.5px var(--copper-500); cursor:grab}
input[type=range]::-moz-range-track{height:4px; border-radius:2px; background:var(--carbon-line)}
input[type=range]::-moz-range-progress{height:4px; border-radius:2px; background:var(--copper-500)}
input[type=range]::-moz-range-thumb{width:12px; height:18px; border-radius:2px; background:var(--steel-0); border:1px solid var(--carbon-line); box-shadow:inset 0 0 0 1.5px var(--copper-500); cursor:grab}
.rail{position:relative; height:8px; margin:-14px 2px 0; background-image:repeating-linear-gradient(90deg, var(--carbon-line) 0 1px, transparent 1px 10%); opacity:.7}
.hout{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:26px}
.hout > div{background:var(--carbon-800); border:1px solid var(--carbon-line); border-radius:8px; padding:15px 17px}
.hout .k{font-size:12px; color:var(--carbon-mut)}
.hout .v{font-family:var(--mono); font-size:25px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--carbon-txt); margin-top:2px}
.hout .v small{font-size:12px; color:var(--carbon-mut); font-weight:400}
.hnote{font-size:12px; color:var(--carbon-mut); margin-top:14px}
.hfeat{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin-bottom:56px}
.hfeat .f{border:1px solid var(--steel-200); border-radius:8px; background:var(--steel-0); padding:22px; transition:border-color .2s var(--e)}
.hfeat .f:hover{border-color:var(--ink-900)}
.hfeat .ic{width:38px; height:38px; border-radius:4px; background:var(--copper-100); color:var(--copper-600); display:flex; align-items:center; justify-content:center; margin-bottom:13px}
.hfeat h3{font-size:15px; font-weight:700; margin-bottom:5px}
.hfeat p{font-size:13.5px; color:var(--ink-600)}

/* ---------- odometer ---------- */
.odo{display:inline-flex; height:1em; line-height:1; overflow:hidden; vertical-align:-.08em}
.odc{width:1ch; overflow:hidden}
.ods{display:flex; flex-direction:column; transition:transform .32s var(--e); will-change:transform}
.ods b{display:block; height:1em; font-weight:inherit}
.odx{display:block}

/* ---------- footer ---------- */
footer{position:relative; border-top:1px solid var(--steel-200); background:var(--steel-0); overflow:hidden; margin-top:20px}
.fcols{position:relative; display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:30px; padding:44px 24px 34px; max-width:var(--maxw); margin:0 auto}
.fcols h5{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); margin-bottom:14px}
.fcols a, .fcols p{display:block; font-size:13.5px; color:var(--ink-600); margin-bottom:9px}
.fcols a:hover{color:var(--copper-600)}
.fcols .fbrand img{height:30px; width:auto; margin-bottom:14px}
.fcols .fbrand p{font-size:13px; max-width:34ch}
.fcontact a{display:flex; align-items:center; gap:9px}
.fcontact svg{color:var(--copper-600); flex:none}
.fbar{position:relative; border-top:1px solid var(--steel-100); background:var(--steel-50); overflow:hidden}
.fbar .wrap{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px; flex-wrap:wrap}
.fbar .col{font-size:12.5px; color:var(--ink-400)}
.fbar .pays{margin:0}
.fbar .wm{position:absolute; left:50%; bottom:-34px; transform:translateX(-50%); font-stretch:125%; font-weight:800; font-size:clamp(70px,10vw,150px); letter-spacing:.02em; color:transparent; -webkit-text-stroke:1px var(--steel-200); pointer-events:none; white-space:nowrap; line-height:1; z-index:0; opacity:.75}
.proto-note{position:relative; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-400); text-align:center; padding:0 24px 22px; background:var(--steel-50)}

.reveal{opacity:0; transform:translateY(8px); transition:opacity .24s var(--e), transform .24s var(--e)}
.reveal.in{opacity:1; transform:none}
.d1{transition-delay:.04s} .d2{transition-delay:.08s} .d3{transition-delay:.12s} .d4{transition-delay:.16s} .d5{transition-delay:.2s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important}
  .reveal{opacity:1; transform:none}
}
@media (max-width: 960px){
  .burger{display:flex}
  .hrow1 > .search{display:none}
  .hrow2{display:none}
  .stage-grid{grid-template-columns:1fr; min-height:0; padding-top:28px; padding-bottom:36px; gap:8px}
  .stage-3d{height:320px; order:-1}
  .obj3d{width:min(56%,230px)}
  .glow3d{width:360px; height:360px}
  .sarrow{display:none}
  .sec{padding:40px 0}
  .mroom{padding:40px 0}
  .bento{grid-template-columns:1fr 1fr}
  .band{grid-template-columns:1fr; padding:28px; margin-bottom:40px}
  .faqs{grid-template-columns:1fr}
  .shop-layout{grid-template-columns:1fr}
  .sidebar{position:static}
  .pd,.pd-lower{grid-template-columns:1fr; margin-bottom:40px}
  .pd-media{position:static}
  .pd-stage{height:330px}
  .pd-obj img.main{max-height:250px}
  .cart-layout{grid-template-columns:1fr}
  .summary{position:static}
  .crow{grid-template-columns:64px 1fr; gap:12px}
  .crow .qty{grid-column:2}
  .crow .lp{grid-column:2; text-align:left; min-width:0}
  .form-grid{grid-template-columns:1fr}
  .stepper div{font-size:11px; padding:11px 6px; gap:6px}
  .hout{grid-template-columns:1fr}
  .slider-row{grid-template-columns:1fr; gap:8px}
  .slider-row output{text-align:left}
  .host-head{margin-top:40px}
  .hcalc{margin-bottom:40px; padding:24px}
  .hfeat{margin-bottom:40px}
  .fcols{grid-template-columns:1fr 1fr; gap:24px}
  footer .wm{display:none}
}
@media (max-width: 560px){
  .fcols{grid-template-columns:1fr}
}