:root{
  --brand:#18BBF7;
  --ink:#1E1F1F;
  --paper:#FDFBF8;
  --ease:cubic-bezier(.2,.8,.2,1);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --t-ui: 260ms;
  --t-open: 860ms;

  --cursorC: var(--brand);
}

*{ box-sizing:border-box; border-radius:0 !important; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
::selection{ background: rgba(24,187,247,.25); }

/* noise */
.noise{
  pointer-events:none;
  position:fixed; inset:-25%;
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  transform:rotate(6deg);
  mix-blend-mode:multiply;
  z-index:1;
}

/* =========================
   Topbar / Stepper (sticky)
========================= */
#topbar{
  position:fixed;
  left:0; right:0; top:0;
  z-index:80;
  pointer-events:none;
  transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}
.topbarInner{
  pointer-events:auto;
  display:grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 26px;
  background:linear-gradient(to bottom, rgba(253,251,248,.94), rgba(253,251,248,.74), rgba(253,251,248,0));
  backdrop-filter:saturate(120%) blur(8px);
}

body.isInside #topbar,
body.clientOpen #topbar{
  opacity:0;
  transform: translateY(-10px);
  pointer-events:none;
}

body.isInside main > section:not(#showroom),
body.isInside #cursor,
body.isInside #cursorLabel,
body.isInside #cursorInfo,
body.isInside .noise{
  opacity:0;
  pointer-events:none;
}

.brandLeft{
  display:flex; align-items:center; gap:12px;
  min-width:52px;
}
.brandLeft img{ width:42px; height:42px; object-fit:contain; display:block; }

.stepper{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  padding:0 10px;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.55px;
  font-size:12px;
  opacity:.96;
}
.step{
  position:relative;
  padding:10px 8px;
  transition: color var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease);
  opacity:.72;
  cursor:pointer;
  white-space:nowrap;
  transform: translateZ(0);
}
.step .label{ opacity:.86; }
.step::after{
  content:"";
  position:absolute; left:8px; right:8px; bottom:6px;
  height:2px;
  background:var(--brand);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t-ui) var(--ease);
}
.step:hover{ color:var(--brand); opacity:1; }
.step.isActive{ opacity:1; color:var(--ink); }
.step.isActive::after{ transform:scaleX(1); }

.ctaRight{
  display:flex; align-items:center; gap:14px;
  min-width:220px;
  justify-content:flex-end;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.55px;
  font-size:12px;
  pointer-events:auto;
}
body.showroomInside .ctaRight{
  pointer-events:none;
}
.mail{
  position:relative;
  padding:10px 0;
  transition: color var(--t-ui) var(--ease);
  user-select:text;
}
.mail::after{
  content:"";
  position:absolute; left:0; right:0; bottom:6px;
  height:2px;
  background:var(--brand);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t-ui) var(--ease);
}
.mail:hover{ color:var(--brand); }
.mail:hover::after{ transform:scaleX(1); }

@media (max-width: 980px){
  .topbarInner{ padding:10px 14px; gap:10px; }
  .ctaRight{ display:none; }
  .stepper{ gap:12px; font-size:11px; padding:0 6px; }
  .step .label{ display:none; }
}

@media (min-width: 981px){
  .topbarInner{ position:relative; }
  .stepper{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
  }
}

/* =========================
   Sections
========================= */
main{ position:relative; z-index:5; }
section{ position:relative; scroll-margin-top:92px; }

/* =========================
   HERO
========================= */
#hero{
  min-height:100svh;
  padding:92px 34px 28px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  position:relative;
  overflow:hidden;
}

.heroLines{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  opacity:0;
}
.heroLines path{
  fill:none;
  stroke-linecap:square;
  vector-effect: non-scaling-stroke;
}
.heroLines .base{
  stroke-width:2;
  stroke-opacity:.35;
}
.heroLines .runner{
  stroke-width:3;
  stroke-opacity:.55;
  stroke-dasharray: 120 1600;
  animation: dashMove 8s linear infinite;
  filter:none;
  opacity:.70;
}
.heroLines .runner.d1{ animation-duration:7s; animation-delay:-0.5s; }
.heroLines .runner.d2{ animation-duration:8s; animation-delay:-2s; }
.heroLines .runner.d3{ animation-duration:7.5s; animation-delay:-3.5s; }
.heroLines .runner.d4{ animation-duration:8.5s; animation-delay:-1.5s; }

@keyframes dashMove{
  from{ stroke-dashoffset: 0; }
  to{ stroke-dashoffset: -2560; }
}

.heroLines g.isHot .base{ stroke-opacity:.95; stroke-width:4; }
.heroLines g.isHot .runner{ stroke-opacity:1; stroke-width:5; }

.heroCopy{
  position:relative;
  z-index:6;
  max-width:min(980px, calc(100vw - 68px));
}
.heroTitle{
  margin:0;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  letter-spacing:-2.2px;
  line-height:.92;
  font-size:clamp(44px, 7.2vw, 122px);
  user-select:none;
}
.heroTitle .b{ color:var(--brand); }

.heroSub{
  margin:18px 0 0;
  max-width:68ch;
  font-size:15px;
  line-height:1.85;
  font-weight:600;
  opacity:.82;
}

.heroVerbsTop{
  position:absolute;
  top:110px;
  right:34px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
  user-select:none;
  z-index:8;
}

.verb{
  --c: var(--brand);
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.55px;
  font-size:15px;
  cursor:pointer;
  padding:10px 2px 16px;
  position:relative;
  opacity:.96;
  transition: color var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease);
  transform: translateZ(0);
  text-decoration: none !important;
}
/* animated underline via ::after */
.verb::after{
  content:"";
  position:absolute;
  left:2px; right:2px; bottom:10px;
  height:2px;
  background: var(--c);
  transform:scaleX(0.3);
  transform-origin:left;
  transition: transform 0.6s cubic-bezier(.22,.61,.36,1);
}
.verb:hover::after{
  transform:scaleX(1);
}
.verb:hover{
  color:var(--c);
  opacity:1;
}

.heroGlow{
  position:absolute;
  inset:-20% -20% auto -20%;
  height:70vh;
  z-index:3;
  pointer-events:none;
  background:
    radial-gradient(60vh 60vh at 18% 72%, rgba(24,187,247,.14), transparent 58%),
    radial-gradient(52vh 52vh at 74% 34%, rgba(175,82,222,.10), transparent 60%),
    radial-gradient(50vh 50vh at 92% 84%, rgba(52,199,89,.10), transparent 58%),
    radial-gradient(42vh 42vh at 44% 20%, rgba(255,59,48,.08), transparent 60%);
  filter: blur(10px);
  opacity:.92;
}

.reveal{ opacity:0; transform: translateY(10px); }
.reveal.isOn{
  opacity:1;
  transform: translateY(0);
  transition: opacity 740ms var(--ease), transform 740ms var(--ease);
}
.reveal.d2.isOn{ transition-delay: 120ms; }
.reveal.d3.isOn{ transition-delay: 220ms; }

@media (max-width: 980px){
  #hero{ padding:86px 18px 22px; }
  .heroVerbsTop{ right:18px; top:92px; }
  .verb{ font-size:14px; }
  .heroCopy{ max-width:calc(100vw - 36px); }
}

/* =========================
   SURFACES
========================= */
#surfaces{ padding: 8vh 0 0; }
.surfaceTrack{ height:190vh; padding:0 34px; }
.surfaceCard{
  position:sticky;
  width:min(1120px, calc(100vw - 68px));
  margin:0 auto;
  border:2px solid rgba(30,31,31,.12);
  box-shadow: 0 18px 54px rgba(30,31,31,.10);
  overflow:hidden;
  background:rgba(30,31,31,.03);
}
.surfaceCard.s1{ top:18vh; background:var(--paper); color:var(--ink); }
.surfaceCard.s2{ top:26vh; background:var(--ink); color:var(--paper); border-color:rgba(255,255,255,.10); box-shadow: 0 18px 54px rgba(0,0,0,.18); }
.surfaceCard.s3{ top:34vh; background:var(--paper); color:var(--ink); }

.surfaceInner{
  padding:26px 22px 30px;
  min-height:50vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:16px;
}
.surfaceK{
  font-family:var(--mono);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.01em;
  font-size:12px;
  opacity:.78;
}
.surfaceT{
  margin:10px 0 0;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  letter-spacing:-1.8px;
  line-height:.95;
  font-size:clamp(28px, 4.2vw, 82px);
  max-width:20ch;
}
.surfaceP{
  margin:12px 0 0;
  max-width:72ch;
  font-size:15px;
  line-height:1.85;
  opacity:.86;
  font-weight:600;
}
.surfaceCTA{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.55px;
  font-size:12px;
  opacity:.94;
}
.surfaceCTA button{
  border:0;
  background:transparent;
  cursor:pointer;
  padding:10px 0;
  position:relative;
  color:inherit;
}
.surfaceCTA button::after{
  content:"";
  position:absolute; left:0; right:0; bottom:6px;
  height:2px;
  background:var(--brand);
  transform:scaleX(0);
  transform-origin:left;
  transition: transform var(--t-ui) var(--ease);
}
.surfaceCTA button:hover{ color:var(--brand); }
.surfaceCTA button:hover::after{ transform:scaleX(1); }

@media (max-width: 980px){
  .surfaceTrack{ padding:0 18px; height:180vh; }
  .surfaceCard{ width:calc(100vw - 36px); }
}

/* =========================
   SHOWROOM
========================= */
#showroom{
  margin-top:7vh;
  background:linear-gradient(to bottom, rgba(30,31,31,.02), rgba(30,31,31,0) 22%);
}
.showStage{
  position:sticky;
  top:0;
  height:100svh;
  height:100dvh;
  min-height:100vh;
  overflow:hidden;
  background:var(--paper);
  border-top:2px solid rgba(30,31,31,.06);
  z-index:10;
}
canvas#webgl{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:1;
  opacity:1;
  pointer-events:auto;
}
.showUI{
  position:relative;
  z-index:2;
}
.showIframe{ display:none; }

.hint{
  position:absolute;
  left:34px; bottom:28px;
  pointer-events:none;
  text-transform:uppercase;
  letter-spacing:.55px;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  font-size:12px;
  opacity:.74;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.kbd{
  padding:10px 12px;
  background:rgba(30,31,31,.06);
  font-size:11px;
  letter-spacing:.55px;
}

.close{
  position:absolute;
  right:34px; bottom:28px;
  border:none;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
  text-transform:uppercase;
  letter-spacing:.55px;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  font-size:12px;
  opacity:0;
  transform:translateY(6px);
  transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
  z-index:50;
}
.close:hover{ color:var(--brand); transform:translateY(4px); }
.close.isOn{ opacity:1; transform:translateY(0); }

.insidePanel{
  position:absolute;
  left:34px;
  top:132px;
  width:min(560px, calc(100vw - 68px));
  pointer-events:none;
  opacity:0;
  transform:translateY(10px);
  transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
  z-index:50;
}
.insidePanel.isOn{ opacity:1; transform:translateY(0); }

.insideTitle{
  margin:0;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  letter-spacing:-.9px;
  line-height:1.02;
  font-size:clamp(22px, 3.1vw, 48px);
}
.insideText{
  margin-top:12px;
  font-size:15px;
  line-height:1.75;
  opacity:.80;
  user-select:text;
}
.insideBlocks{
  margin-top:14px;
  display:grid;
  gap:10px;
  font-family:var(--mono);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.01em;
  font-size:12px;
  opacity:.86;
}
.insideBlock{
  padding:10px 10px;
  border:2px solid rgba(30,31,31,.12);
  background:rgba(253,251,248,.86);
  user-select:text;
}
.insideActions{
  margin-top:12px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.55px;
  font-size:12px;
  opacity:.95;
  pointer-events:auto;
}
.insideActions a{
  position:relative;
  padding:10px 2px;
}
.insideActions a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:6px;
  height:2px;
  background:var(--brand);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t-ui) var(--ease);
}
.insideActions a:hover{ color:var(--brand); }
.insideActions a:hover::after{ transform:scaleX(1); }

.insideMedia{
  position:absolute;
  right:34px;
  top:132px;
  width:min(440px, calc(100vw - 68px));
  pointer-events:none;
  opacity:0;
  transform:translateY(10px);
  transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
  z-index:50;
}
.insideMedia.isOn{ opacity:1; transform:translateY(0); }
.mediaBox{
  border:2px solid rgba(30,31,31,.12);
  background:rgba(30,31,31,.03);
  padding:12px 12px;
}
.mediaK{
  font-family:var(--mono);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.01em;
  font-size:12px;
  opacity:.78;
}
.mediaShot{
  margin-top:10px;
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
  filter:grayscale(1) contrast(1.05);
  border:2px solid rgba(30,31,31,.10);
}

@media (max-width: 980px){
  .hint{ left:18px; bottom:22px; }
  .close{ right:18px; bottom:22px; }
  .insidePanel{ left:18px; width:calc(100vw - 36px); top:122px; }
  .insideMedia{ display:none; }
}

/* =========================
   SERVICES
========================= */
#services{ padding: 11vh 34px 9vh; }
.svcWrap{
  width:min(1120px, calc(100vw - 68px));
  margin:0 auto;
  border:2px solid rgba(30,31,31,.12);
  overflow:hidden;
  background:rgba(30,31,31,.03);
}
.svcItem{
  --c: var(--brand);
  border-top:2px solid rgba(30,31,31,.12);
  padding:18px 16px 18px;
  position:relative;
  transition: background var(--t-open) var(--ease), color var(--t-open) var(--ease), border-color var(--t-open) var(--ease);
}
.svcItem:first-child{ border-top:0; }
.svcTop{
  display:grid;
  grid-template-columns: 78px 1fr auto;
  align-items:baseline;
  gap:14px;
}
.svcNum{
  font-family:var(--mono);
  font-weight:300;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.01em;
  opacity:.78;
}
.svcTtl{
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  letter-spacing:-1.0px;
  font-size:clamp(20px, 2.4vw, 34px);
  line-height:1.02;
}
.svcBtnWrap{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  min-width:0;
}
.svcBtn{
  border:2px solid rgba(30,31,31,.22);
  background:rgba(253,251,248,.96);
  color:var(--ink);
  cursor:pointer;
  padding:10px 12px;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.55px;
  font-size:12px;
  transition: border-color var(--t-ui) var(--ease), background var(--t-ui) var(--ease);
  user-select:none;
  white-space:nowrap;
}
.svcBtn:hover{ border-color:rgba(30,31,31,.45); }

.svcBody{
  margin-top:12px;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform:translateY(-6px);
  transition:
    max-height var(--t-open) var(--ease),
    opacity var(--t-open) var(--ease),
    transform var(--t-open) var(--ease);
}
.svcBodyInner{
  padding:10px 0 2px;
  font-size:15px;
  line-height:1.85;
  font-weight:600;
  opacity:.92;
  max-width:72ch;
}
.svcLines{
  margin-top:12px;
  display:grid;
  gap:10px;
  font-family:var(--mono);
  font-weight:300;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.01em;
}
.svcLine{
  padding:10px 10px;
  border:2px solid rgba(30,31,31,.12);
  background:rgba(253,251,248,.86);
  color:var(--ink);
}

.svcItem:hover{
  background: color-mix(in srgb, var(--c) 86%, white 14%);
  color:#0b0c0c;
  border-color: color-mix(in srgb, var(--c) 44%, var(--ink) 56%);
}
.svcItem:hover .svcBody{ max-height:460px; opacity:1; transform:translateY(0); }
.svcItem:hover .svcNum{ opacity:.92; }

@media (max-width: 980px){
  #services{ padding:9vh 18px 7vh; }
  .svcWrap{ width:calc(100vw - 36px); }
  .svcTop{ grid-template-columns: 64px 1fr auto; }
  .svcBtn{ padding:10px 10px; }
}

/* =========================
   CORE
========================= */
#core{ height:360vh; background:var(--paper); }
.coreStage{
  position:sticky;
  top:0;
  height:100svh;
  height:100dvh;
  min-height:100vh;
  overflow:hidden;
  border-top:2px solid rgba(30,31,31,.06);
}
canvas#coregl{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
.coreHint{
  position:absolute;
  left:34px; bottom:28px;
  pointer-events:none;
  text-transform:uppercase;
  letter-spacing:.55px;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  font-size:12px;
  opacity:.74;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  z-index:45;
  transition: opacity 0.3s var(--ease);
}
/* Only show first kbd, hide others */
.coreHint .kbd:not(:first-child){
  display:none;
}
/* Hide coreHint when restOverlay is active - using :has() */
.coreStage:has(.restOverlay.isOn) .coreHint{
  opacity:0;
  pointer-events:none;
}

.restOverlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
  transform:perspective(1200px) translateZ(-180px) scale(0.88) rotateX(8deg);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  z-index:60;
}
.restOverlay.isOn{
  opacity:1;
  transform:perspective(1200px) translateZ(0) scale(1) rotateX(0deg);
  pointer-events:auto;
}
.restInner{
  width:min(1120px, calc(100vw - 68px));
  text-align:left;
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
  align-items:start;
  /* no walling - transparent, no border/shadow */
  background:transparent;
  border:none;
  border-radius:0;
  padding:42px 38px;
  box-shadow:none;
}
.restHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding-bottom:6px;
  border-bottom:2px solid rgba(30,31,31,.10);
}
.restTitle{
  margin:0;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  letter-spacing:-1.6px;
  line-height:.95;
  font-size:clamp(30px, 4.2vw, 84px);
}
.restSub{
  margin:10px 0 0;
  max-width:78ch;
  font-size:15px;
  line-height:1.85;
  opacity:.82;
  font-weight:600;
}

.restCols{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:18px;
  padding-top:10px;
}
.restCol{
  border:2px solid rgba(30,31,31,.12);
  background:rgba(30,31,31,.03);
  padding:14px 14px;
}
.restK{
  font-family:var(--mono);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.01em;
  font-size:12px;
  opacity:.78;
}
.restList{
  margin-top:10px;
  display:grid;
  gap:10px;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.55px;
  font-size:12px;
}
.restList a{
  --c: var(--brand);
  position:relative;
  padding:10px 2px;
  width:max-content;
  color:inherit;
}
.restList a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:6px;
  height:2px;
  background:var(--c);
  transform:scaleX(0);
  transform-origin:left;
  transition: transform var(--t-ui) var(--ease);
}
.restList a:hover{
  color:var(--c);
}
.restList a:hover::after{
  transform:scaleX(1);
}

/* Kundenbereich UI */
.portal{
  margin-top:10px;
  display:grid;
  gap:12px;
}
.portalTabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.55px;
  font-size:11px;
}
.portalTab{
  border:2px solid rgba(30,31,31,.14);
  background:rgba(253,251,248,.86);
  padding:9px 10px;
  cursor:pointer;
  transition: border-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease), background var(--t-ui) var(--ease);
  user-select:none;
}
.portalTab:hover{ border-color:rgba(30,31,31,.30); }
.portalTab.isOn{
  border-color:rgba(30,31,31,.44);
  background:rgba(253,251,248,.98);
  color:var(--ink);
}
.portalPane{
  display:none;
  border:2px solid rgba(30,31,31,.12);
  background:rgba(253,251,248,.86);
  padding:12px 12px;
}
.portalPane.isOn{ display:block; }
.portalP{
  margin:0;
  font-size:12px;
  line-height:1.65;
  font-weight:600;
  opacity:.82;
}
.portalForm{
  margin-top:10px;
  display:grid;
  gap:10px;
}
.portalRow{
  display:grid;
  gap:6px;
}
.portalLabel{
  font-family:var(--mono);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.01em;
  font-size:11px;
  opacity:.72;
}
.portalInput{
  border:2px solid rgba(30,31,31,.14);
  background:rgba(253,251,248,.98);
  padding:10px 10px;
  outline:none;
  font-weight:600;
  font-size:13px;
}
.portalInput:focus{ border-color:rgba(24,187,247,.65); }
.portalBtn{
  border:2px solid rgba(30,31,31,.22);
  background:rgba(253,251,248,.98);
  padding:10px 10px;
  cursor:pointer;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.55px;
  font-size:11px;
  justify-self:start;
  transition: border-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.portalBtn:hover{ border-color:rgba(30,31,31,.45); color:var(--brand); }
.portalOut{
  margin-top:10px;
  font-family:var(--mono);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.01em;
  font-size:11px;
  opacity:.78;
  word-break:break-word;
}

@media (max-width: 980px){
  .coreHint{ left:18px; bottom:22px; }
  .restInner{ width:calc(100vw - 36px); }
  .restCols{ grid-template-columns: 1fr; }
}

/* =========================
   Cursor + Info box
========================= */
#cursor{
  position:fixed;
  left:0; top:0;
  width:22px; height:22px;
  border:2px solid rgba(30,31,31,.55);
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:200;
  transition: width .18s var(--ease), height .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), opacity .12s var(--ease);
  mix-blend-mode:multiply;
  background:rgba(253,251,248,.0);
  opacity:0;
}
#cursorLabel{
  position:fixed;
  left:0; top:0;
  transform:translate(12px, 14px);
  pointer-events:none;
  z-index:200;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.55px;
  font-size:11px;
  opacity:0;
  transition: opacity .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
  color:var(--ink);
  mix-blend-mode:multiply;
  white-space:nowrap;
}

#cursorInfo{
  position:fixed;
  left:0; top:0;
  transform:translate(12px, 34px);
  pointer-events:none;
  z-index:200;
  opacity:0;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  width:min(260px, calc(100vw - 40px));
  border:2px solid rgba(30,31,31,.12);
  background:rgba(253,251,248,.94);
  box-shadow: 0 22px 60px rgba(30,31,31,.14);
  padding:10px 10px;
  font-size:12px;
  line-height:1.55;
  font-weight:600;
  color:rgba(30,31,31,.84);
  backdrop-filter: blur(8px) saturate(120%);
}
.cursorOn #cursor{
  opacity:1;
  width:56px; height:56px;
  border-color: color-mix(in srgb, var(--cursorC) 86%, black 14%);
  background: color-mix(in srgb, var(--cursorC) 16%, transparent 84%);
}
.cursorOn #cursorLabel{ opacity:1; }

.cursorInfoOn #cursorInfo{
  opacity:1;
  transform:translate(12px, 36px);
}

body.cursorLeft #cursorLabel{
  transform:translate(-100%, 14px);
}
body.cursorLeft #cursorInfo{
  transform:translate(-100%, 34px);
}
body.cursorLeft.cursorInfoOn #cursorInfo{
  transform:translate(-100%, 36px);
}

@media (max-width: 980px){
  #cursor, #cursorLabel, #cursorInfo{ display:none; }
}

/* =========================
   REST stage (overlay content)
========================= */
.restStage{
  max-width:1120px;
  margin:0 auto;
}
.restDeep{
  margin: 0 auto;
  margin-top:28px;
}
.restDeepBtn{
  border:2px solid rgba(30,31,31,.22);
  background:rgba(253,251,248,.98);
  padding:10px 12px;
  cursor:pointer;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.55px;
  font-size:11px;
  justify-self:start;
  transition: border-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease), background var(--t-ui) var(--ease);
}
.restDeepBtn:hover{
  border-color:rgba(30,31,31,.45);
  color:var(--brand);
}

/* =========================
   CLIENT overlay (deeper Kundenbereich)
========================= */
#client{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 34px;
  background:rgba(253,251,248,0.98);
  z-index:120;
  opacity:0;
  pointer-events:none;
  transform:scale(.96);
  transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}
#client .restStage{
  max-width:1120px;
  margin:0 auto;
}
#client.isOn{
  opacity:1;
  pointer-events:auto;
  transform:scale(1);
}

@media (max-width: 980px){
  #client{ padding:0 18px; }
}

body.clientOpen{
  overflow:hidden;
}

.workshopGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
  margin:20px 0;
}
.workshopCard{
  background:rgba(30,31,31,0.03);
  border:2px solid rgba(30,31,31,0.10);
  border-radius:8px;
  padding:18px;
  transition:all .24s var(--ease);
}
.workshopCard:hover{
  background:rgba(30,31,31,0.05);
  border-color:rgba(24,187,247,0.3);
  transform:translateY(-2px);
}
.workshopCardHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}
.workshopCardTitle{
  font:600 18px var(--gro);
  color:rgba(30,31,31,0.92);
  letter-spacing:-.02em;
}
.workshopCardStatus{
  font:600 11px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(24,187,247,0.9);
  background:rgba(24,187,247,0.08);
  padding:4px 8px;
  border-radius:4px;
  white-space:nowrap;
}
.workshopCardBody{
  font:400 15px/1.5 var(--sys);
  color:rgba(30,31,31,0.76);
  margin-bottom:14px;
}
.workshopCardTags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.workshopTag{
  font:600 10px var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(30,31,31,0.62);
  background:rgba(30,31,31,0.06);
  padding:4px 8px;
  border-radius:4px;
}

/* =========================
   Click FX squares
========================= */
#clickFx{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:150;
  overflow:hidden;
}
.clickSq{
  position:absolute;
  width:10px;
  height:10px;
  margin:-5px 0 0 -5px;
  background: color-mix(in srgb, var(--cursorC) 70%, white 30%);
  opacity:0;
  transform:translate3d(0,0,0) scale(1);
  transition: transform 460ms var(--ease), opacity 460ms var(--ease);
  will-change: transform, opacity;
}

/* === Showroom iframe pinned scroll === */
#showroom{
  position: relative;
}

/* Scroll-Länge: wird per JS dynamisch gesetzt (Fallback: 8 Viewports) */
#showroomScroll{
  --srLen: 8;
  min-height: calc(var(--srLen) * 100vh);
}

/* iframe bleibt während der Scroll-Länge sticky stehen */
.showroomSticky{
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* iframe vollflächig */
#showroomFrame{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}