:root{
  --bg:oklch(28% 0.08 240);
  --grid:oklch(45% 0.09 210 / 0.3);
  --rule:oklch(45% 0.09 210 / 0.4);
  --text:oklch(88% 0.03 210);
  --text-dim:oklch(85% 0.035 212);
  --head:oklch(95% 0.02 210);
  --label:oklch(80% 0.08 210);
  --accent:oklch(70% 0.19 45);
  --face:oklch(55% 0.09 226 / 0.5);
  --face-edge:oklch(82% 0.1 203);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--text);
  background:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow-x:hidden;
}
a{color:var(--label);text-decoration:none}
a:hover{color:var(--accent)}
img{max-width:100%}
.dot{color:var(--accent)}
.mono{font-family:'IBM Plex Mono',monospace}

.hook{position:absolute;width:22px;height:22px;border-color:oklch(75% 0.1 200);border-style:solid;z-index:6}
.hook-tl{top:clamp(20px,4vw,32px);left:clamp(20px,4vw,32px);border-width:2px 0 0 2px}
.hook-tr{top:clamp(20px,4vw,32px);right:clamp(20px,4vw,32px);border-width:2px 2px 0 0}
.hook-bl{bottom:clamp(20px,4vw,32px);left:clamp(20px,4vw,32px);border-width:0 0 2px 2px}
.hook-br{bottom:clamp(20px,4vw,32px);right:clamp(20px,4vw,32px);border-width:0 2px 2px 0}

/* Würfel */
.pit{perspective:1100px;filter:drop-shadow(0 20px 36px oklch(14% 0.05 245 / 0.6));display:grid;place-items:center;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.cube{position:relative;width:190px;height:190px;transform-style:preserve-3d;will-change:transform;transform:rotateX(-20deg) rotateY(-34deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;border:1px solid var(--face-edge);background:var(--face);border-radius:10px;display:grid;place-content:center;justify-items:center;gap:8px}
.face[aria-current]{border-color:var(--accent)}
.face-name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:20px;color:var(--head)}
.face-sub{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:oklch(90% 0.04 210)}
.f-front{transform:translateZ(95px)}
.f-right{transform:rotateY(90deg) translateZ(95px)}
.f-back{transform:rotateY(180deg) translateZ(95px)}
.f-left{transform:rotateY(-90deg) translateZ(95px)}
.f-top{transform:rotateX(90deg) translateZ(95px);border-color:oklch(74% 0.09 205)}
.f-bottom{transform:rotateX(-90deg) translateZ(95px);border-color:oklch(64% 0.08 208)}
.f-top .face-name,.f-bottom .face-name{font-size:18px;color:oklch(92% 0.02 210)}

/* Startseite */
.home{flex:1;display:flex;flex-direction:column;align-items:center;padding:clamp(56px,9vw,96px) clamp(56px,8vw,76px)}
.hero{text-align:center;margin-top:clamp(40px,7vw,96px)}
.wordmark{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(40px,8vw,64px);line-height:1;margin:0 0 18px;color:var(--head)}
.tagline{font-family:'IBM Plex Mono',monospace;font-size:clamp(11px,2vw,13px);letter-spacing:.14em;text-transform:uppercase;color:var(--label);margin:0}
.stage{display:grid;place-items:center;gap:18px;margin-top:clamp(24px,4vw,56px)}
.stage .pit{width:min(340px,86vw);height:min(320px,80vw)}
.drag-hint{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:oklch(62% 0.06 218);margin:0}

/* Unterseiten */
.sheet{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start;max-width:1180px;width:100%;margin:0 auto;padding:clamp(56px,9vw,96px) clamp(56px,8vw,76px)}
.aside{display:flex;flex-direction:column;align-items:center;position:sticky;top:clamp(40px,6vw,72px)}
.aside .pit{width:190px;height:190px;transform:scale(.62);transform-origin:top center;margin-bottom:-72px}
.back{display:inline-block;margin-bottom:18px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:oklch(62% 0.06 218)}
.content{width:100%;max-width:880px}
.content h1{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(30px,4.6vw,44px);line-height:1.1;margin:0 0 10px;color:var(--head)}
.kicker{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--label);margin:0 0 clamp(34px,4.5vw,52px)}
.content p{margin:0;font-size:16px;line-height:1.6;text-wrap:pretty}
.content p.kicker{margin:0 0 clamp(34px,4.5vw,52px)}
.stack{display:flex;flex-direction:column;gap:clamp(28px,4vw,44px)}
.stack-tight{display:flex;flex-direction:column;gap:clamp(22px,3vw,30px)}
.measure{max-width:50ch}
.label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--label)}
.group{display:flex;flex-direction:column;gap:8px}
.group .body{font-size:15px;line-height:1.7;color:var(--text-dim)}
.features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.features li{display:flex;align-items:baseline;gap:12px;font-size:15px;line-height:1.55;color:var(--text-dim)}
.features li::before{content:"";width:5px;height:5px;flex:none;background:var(--accent);transform:translateY(-3px)}
.link{align-self:flex-start;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;color:var(--accent);border-bottom:1px solid oklch(70% 0.19 45 / .5);padding-bottom:3px}
.plate{margin:0;display:flex;justify-content:center}
.plate img{width:min(756px,100%);height:auto;display:block}
.rule{height:1px;background:var(--rule)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(24px,3vw,36px);border-top:1px solid var(--rule);padding-top:clamp(24px,3vw,32px)}

.orduri-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,56px);align-items:start}
.orduri-col{display:flex;flex-direction:column;gap:clamp(26px,3.5vw,38px);min-width:0}
.orduri-shot{width:clamp(180px,22vw,232px);height:auto;display:block;border-radius:26px;border:1px solid oklch(45% 0.09 210 / .5)}
.store{display:flex;align-items:center;gap:20px;border-top:1px solid var(--rule);padding-top:clamp(22px,3vw,28px)}
.app-icon{position:relative;width:88px;height:88px;flex:none;display:block}
.app-icon img{width:100%;height:100%;object-fit:contain;display:block}
.badge-link{flex:none;width:172px;display:block}
.badge{width:172px;max-width:none;height:auto;display:block}
.qr{width:88px;height:88px;display:block;border-radius:6px;margin-left:auto}

.mail-big{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(26px,4vw,40px);line-height:1.1;color:var(--accent);align-self:flex-start;border-bottom:2px solid oklch(70% 0.19 45 / .4);padding-bottom:8px}
.hours{font-size:13px;line-height:1.6;color:oklch(70% 0.05 218)}

.legal{display:flex;flex-direction:column;gap:clamp(30px,4vw,42px);max-width:62ch}
.legal p{font-size:15px;line-height:1.7;color:var(--text-dim)}
.legal h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(22px,3vw,30px);line-height:1.15;margin:0;color:var(--head);scroll-margin-top:32px}

footer{border-top:1px solid var(--rule);padding:clamp(20px,4vw,28px) clamp(56px,8vw,76px) clamp(48px,7vw,64px);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:'IBM Plex Mono',monospace;font-size:11px}
footer .copy{color:oklch(60% 0.06 220)}
footer nav{display:flex;gap:18px}

@media (max-width:860px){
  .sheet{grid-template-columns:1fr;gap:clamp(20px,5vw,32px);padding-left:clamp(20px,6vw,32px);padding-right:clamp(20px,6vw,32px)}
  .aside{position:static;align-items:flex-start}
  .aside .pit{transform:scale(.5);transform-origin:top left;margin-bottom:-96px;margin-left:-8px}
  .home{padding-left:clamp(20px,6vw,32px);padding-right:clamp(20px,6vw,32px)}
  .orduri-grid{grid-template-columns:1fr}
  .orduri-shot{width:min(220px,60vw)}
  .store{flex-wrap:wrap;gap:16px}
  .qr{margin-left:0}
}

.langsw{position:absolute;z-index:7;top:clamp(30px,5vw,48px);right:calc(clamp(20px,4vw,32px) + 62px);display:flex;align-items:center;gap:11px;font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:.16em;text-transform:uppercase}
.langsw a{color:oklch(62% 0.06 218)}
.langsw a:hover{color:var(--accent)}
.langsw .on{color:var(--head)}
.langsw .sep{color:oklch(48% 0.05 218)}

.faq{display:flex;flex-direction:column;gap:clamp(26px,3.5vw,36px);max-width:62ch}
.faq-item{display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--rule);padding-top:clamp(20px,2.6vw,26px)}
.faq-item:first-child{border-top:0;padding-top:0}
.content .faq-q{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px;line-height:1.3;color:var(--head);margin:0}
.content .faq-a{font-size:15px;line-height:1.7;color:var(--text-dim)}
.legal .features li,.faq .features li{color:var(--text-dim)}
.stamp{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:oklch(66% 0.05 218)}
.applinks{display:flex;flex-wrap:wrap;gap:18px;border-top:1px solid var(--rule);padding-top:clamp(18px,2.4vw,24px);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase}