: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; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  font-weight: 400;
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Ensure consistent heading font */
h1, h2, h3, h4, h5, h6,
.heroTitle, .restTitle, .subH2, .subH3, .cardH, .cardH3 {
  font-family: "Space Grotesk", Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
}
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:20px;
  padding:18px 32px;
  background:linear-gradient(to bottom, rgba(253,251,248,.96), rgba(253,251,248,.8), rgba(253,251,248,0));
  backdrop-filter:saturate(120%) blur(10px);
}

body.isInside #topbar,
body.clientOpen #topbar,
body.roomOpen #topbar{
  opacity:0;
  transform: translateY(-10px);
  pointer-events:none;
}
body.roomOpen #topbar .topbarInner{
  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:48px; height:48px; object-fit:contain; display:block; }

/* Main Navigation */
.mainNav{
  display:flex;
  gap:6px;
  align-items:center;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  letter-spacing:.02em;
  font-size:15px;
}
.navLink{
  position:relative;
  padding:10px 12px;
  transition: color var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease);
  opacity:.85;
  cursor:pointer;
  white-space:nowrap;
  background:none;
  border:none;
  color:inherit;
  font:inherit;
}
.navLink::after{
  content:"";
  position:absolute; left:12px; right:12px; bottom:6px;
  height:2px;
  background:var(--brand);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t-ui) var(--ease);
}
.navLink:hover{ color:var(--brand); opacity:1; }
.navLink:hover::after{ transform:scaleX(1); }
.navArrow{
  display:inline-block;
  margin-left:4px;
  vertical-align:middle;
  transition: transform var(--t-ui) var(--ease);
}
.navDropdownBtn:hover .navArrow,
.navDropdown:hover .navArrow{
  transform: rotate(180deg);
}

/* Dropdown - integrated style */
.navDropdown{ position:relative; }
.navDropdownMenu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:180px;
  padding:8px;
  background:var(--paper);
  border:2px solid rgba(30,31,31,0.1);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);
  opacity:0;
  visibility:hidden;
  transition: opacity var(--t-ui) var(--ease), visibility var(--t-ui) var(--ease);
  z-index:1000;
}
.navDropdown:hover .navDropdownMenu,
.navDropdown:focus-within .navDropdownMenu{
  opacity:1;
  visibility:visible;
}
.navDropdownMenu a{
  display:block;
  padding:10px 14px;
  font-size:13px;
  border-radius:8px;
  transition: color var(--t-ui) var(--ease), background var(--t-ui) var(--ease);
}
.navDropdownMenu a:hover{
  color:var(--brand);
  background:rgba(24,187,247,0.08);
}

/* Burger Button (Checkbox-based) */
.burger{
  display:none;
  width:40px;
  height:40px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  user-select:none;
  cursor:pointer;
  transition:300ms;
  border-radius:10px;
  position:relative;
  z-index:1001;
}
.burger .burgerInput{
  appearance:none;
  transition:300ms;
  position:absolute;
  width:25px;
  height:2px;
  background:var(--ink);
  border-radius:5px;
}
.burger::before,
.burger::after{
  content:"";
  width:25px;
  height:2px;
  display:block;
  background:var(--ink);
  border-radius:5px;
  position:absolute;
  transition:300ms;
  transform-origin:center center;
}
.burger::before{ transform:translateY(-8px); }
.burger::after{ transform:translateY(8px); }

/* Checked state - X animation */
.burger .burgerInput:checked{ width:0; transition-delay:100ms; }
.burger:has(.burgerInput:checked)::before{
  animation:burgerLine1 400ms ease-out forwards;
}
.burger:has(.burgerInput:checked)::after{
  animation:burgerLine2 400ms ease-out forwards;
}
@keyframes burgerLine1{
  0%{ transform:translateY(-8px) rotate(0deg); }
  50%{ transform:translateY(0) rotate(0deg); }
  100%{ transform:translateY(0) rotate(45deg); }
}
@keyframes burgerLine2{
  0%{ transform:translateY(8px) rotate(0deg); }
  50%{ transform:translateY(0) rotate(0deg); }
  100%{ transform:translateY(0) rotate(-45deg); }
}
.burger:active{ transform:scale(0.95); }

/* Mobile Menu - slide from top */
.mobileMenu{
  position:fixed;
  inset:0;
  background:var(--paper);
  padding:80px 32px 32px;
  display:flex;
  flex-direction:column;
  transform:translateY(-100%);
  opacity:0;
  visibility:hidden;
  transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .45s ease, visibility .45s;
  z-index:998;
}
.mobileMenu.isOpen{ transform:translateY(0); opacity:1; visibility:visible; z-index: 9; transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .35s ease, visibility .4s; }

.mobileMenuMain{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.mobileMenuMain > a{
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  font-size:clamp(22px, 5vw, 28px);
  padding:12px 0;
  border-bottom:1px solid rgba(30,31,31,.08);
}
.mobileMenuMain > a:hover{ color:var(--brand); }

.mobileMenuGroup{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px 0;
  border-bottom:1px solid rgba(30,31,31,.08);
}
.mobileMenuLabel{
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  font-size:clamp(22px, 5vw, 28px);
  padding:12px 0 8px;
}
.mobileMenuSub{
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:500;
  font-size:clamp(16px, 4vw, 20px);
  padding:8px 0 8px 24px;
  color:var(--ink);
  opacity:.9;
  transition:opacity .2s;
}
.mobileMenuSub:hover{ opacity:1; color:var(--brand); }

.mobileMenuFooter{
  display:flex;
  gap:24px;
  padding-top:24px;
  border-top:1px solid rgba(30,31,31,.08);
}
.mobileMenuFooter a{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.02em;
  opacity:.5;
  transition:opacity .2s;
}
.mobileMenuFooter a:hover{ opacity:1; }

@media (max-width: 980px){
  .topbarInner{ 
    padding:10px 14px; 
    gap:8px;
    grid-template-columns: auto 1fr auto;
  }
  .mainNav{ display:none; }
  .burger{ display:flex; margin-left:auto; }
}

@media (min-width: 981px){
  .topbarInner{ position:relative; }
  .mainNav{
    position:absolute;
    right:24px;
  }
  .burger{ display:none; }
}

/* =========================
   Sections
========================= */
main{ position:relative; }
section{ position:relative; scroll-margin-top:92px; }
#kontakt{ scroll-margin-top:0; }
#showroom{ scroll-margin-top:0; }
#contactForm{ scroll-margin-top:100px; }

/* =========================
   HERO
========================= */
#hero{
  min-height:100vh;
  min-height:100svh;
  padding:80px 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  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(820px, calc(100vw - 68px));
  margin:0 auto;
  text-align:center;
}
.heroTagline{
  margin:0 0 16px;
  font-family:var(--mono);
  font-weight:300;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.7;
  text-align:center;
}
.heroTitle{
  margin:0;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  letter-spacing:-2.2px;
  line-height:1.02;
  font-size:clamp(42px, 6.5vw, 96px);
  user-select:none;
}
.heroHighlight{
  color:var(--brand);
  display:inline-block;
}

.heroSub{
  margin:24px auto 0;
  max-width:52ch;
  font-size:17px;
  line-height:1.7;
  font-weight:400;
  opacity:.85;
  text-align:center;
}

.heroTrust{
  display:flex;
  gap:48px;
  margin-top:36px;
  padding-top:28px;
  border-top:1px solid rgba(30,31,31,.12);
  justify-content:center;
}
.heroTrustItem{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.heroTrustNum{
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  font-size:28px;
  letter-spacing:-.02em;
  color:var(--brand);
}
.heroTrustLabel{
  font-family:var(--mono);
  font-weight:300;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.02em;
  opacity:.6;
}

/* Hero CTA Buttons - same style as kontaktCTA */
.heroCTA{
  display:flex;
  gap:16px;
  margin-top:32px;
  flex-wrap:wrap;
  justify-content:center;
}
.heroBtn{
  padding:14px 36px;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  font-size:14px;
  letter-spacing:.02em;
  border:2px solid rgba(30,31,31,.2);
  border-radius:26px;
  transition: background var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.heroBtn:hover{
  border-color:var(--brand);
  color:var(--brand);
}
.heroBtn.primary{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.heroBtn.primary:hover{
  background:transparent;
  color:var(--brand);
}

.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:0;
}

.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; }

.reveal.d4.isOn{ transition-delay: 320ms; }

@media (max-width: 980px){
  #hero{ padding:86px 18px 22px; }
  .heroVerbsTop{ right:18px; top:92px; }
  .verb{ font-size:14px; }
  .heroCopy{ max-width:calc(100vw - 36px); padding-left:0; }
  .heroTagline{ font-size:12px; margin-bottom:12px; }
  .heroTitle{ font-size:clamp(44px, 8vw, 64px); }
  .heroSub{ font-size:15px; max-width:100%; }
  .heroTrust{ gap:24px; margin-top:28px; padding-top:20px; flex-wrap:wrap; }
  .heroTrustNum{ font-size:22px; }
  .heroTrustLabel{ font-size:10px; }
  .heroBtn{ padding:10px 20px; font-size:13px; }
}

/* =========================
   SURFACES
========================= */
#surfaces{ margin-top: -10vh; padding: 0; position: relative; z-index: 2; }
.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);
  border-radius: 24px;
}
.surfaceCard.s1{ top:18vh; background:var(--paper); color:var(--ink); }
.surfaceCard.s2{ top:25vh; 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:32vh; 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:200;
}
.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:0;
  padding-top:7vh;
  background:var(--paper);
}
.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: 1fr auto;
  align-items:baseline;
  gap:14px;
}
.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);
  border-radius:6px;
  cursor:pointer;
  padding:10px 14px;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  letter-spacing:.02em;
  font-size:13px;
  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,.22); }

.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;
  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 and isOpen states */
.svcItem:hover,
.svcItem.isOpen{
  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,
.svcItem.isOpen .svcBody{ max-height:460px; opacity:1; transform:translateY(0); }

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

/* =========================
   ABLAUF - 3 Cards
========================= */
#ablauf{
  padding:12vh 34px;
  background:var(--paper);
  border-top:2px solid rgba(30,31,31,.06);
}
.ablaufWrap{
  max-width:1120px;
  margin:0 auto;
}
.ablaufK{
  font-family:var(--mono);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.01em;
  font-size:12px;
  opacity:.78;
  margin-bottom:8px;
}
.ablaufH2{
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  letter-spacing:-1.5px;
  line-height:1.1;
  font-size:clamp(28px, 4vw, 56px);
  margin-bottom:48px;
}
.ablaufCards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.ablaufCard{
  padding:28px 24px;
  background:var(--paper);
  border:2px solid rgba(30,31,31,.1);
  border-radius:12px;
  transition: border-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease), transform 0.6s var(--ease);
}
.ablaufCard:nth-child(2){ transition-delay: 0.15s; }
.ablaufCard:nth-child(3){ transition-delay: 0.3s; }

.ablaufCard:hover{
  border-color:var(--brand);
  box-shadow:0 8px 32px rgba(24,187,247,.12);
  transform:translateY(-4px);
}
.ablaufNum{
  font-family:var(--mono);
  font-weight:300;
  font-size:12px;
  opacity:.6;
  margin-bottom:12px;
}
.ablaufTitle{
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  font-size:clamp(18px, 2vw, 24px);
  margin-bottom:12px;
}
.ablaufText{
  font-size:15px;
  line-height:1.7;
  opacity:.85;
}
.ablaufText strong{ font-weight:600; }

@media (max-width: 980px){
  #ablauf{ padding:8vh 18px; }
  .ablaufCards{ grid-template-columns:1fr; gap:16px; }
  .ablaufCard{ padding:20px 18px; }
}

/* =========================
   KONTAKT
========================= */
#kontakt{
  padding:12vh 34px 8vh;
  background:var(--ink);
  color:var(--paper);
}
.kontaktWrap{
  max-width:1120px;
  margin:0 auto;
}

/* Persönlicher Bereich - neues Layout */
.kontaktPersonal{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:48px;
  align-items:start;
  margin-bottom:48px;
}
.kontaktLeft{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}
.kontaktPhoto{
  width:280px;
  height:280px;
  border-radius:16px;
  overflow:hidden;
  position:relative;
  background:rgba(255,255,255,.08);
  border:2px solid rgba(255,255,255,.15);
  flex-shrink:0;
}
.kontaktPhoto img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.kontaktPhotoFallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Space Grotesk", system-ui;
  font-weight:600;
  font-size:48px;
  color:rgba(255,255,255,.4);
  letter-spacing:-1px;
}
.kontaktPhoto img:not([style*="display: none"]) + .kontaktPhotoFallback{
  display:none;
}
.kontaktName{
  font-family:"Space Grotesk", system-ui;
  font-weight:600;
  font-size:18px;
  letter-spacing:-0.5px;
  opacity:.9;
}
.kontaktDetails{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.kontaktDetail{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:400;
  opacity:.75;
  transition:opacity var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.kontaktDetail:hover{
  opacity:1;
  color:var(--brand);
}
.kontaktDetailIcon{
  width:18px;
  height:18px;
  opacity:.8;
  flex-shrink:0;
}
.kontaktDetailIcon svg{
  width:100%;
  height:100%;
  fill:currentColor;
}
.kontaktInfo{
  min-width:0;
}

/* Index: Header zentriert */
.kontaktHeader{
  text-align:center;
  margin-bottom:6rem;
}
.kontaktHeader .kontaktInfo{
  max-width:1000px;
  margin:0 auto;
}

/* Index: Formular + Kontakt nebeneinander */
.kontaktFormRow{
  display:flex;
  gap:42px;
  align-items:start;
  margin-bottom: 6rem;
}
.kontaktFormRow .kontaktForm{
  flex:1;
  margin-top:0;
  padding-top:0;
  border-top:none;
}
.kontaktFormRow .kontaktLeft{
  flex-shrink:0;
  position:sticky;
  top:120px;
}
@media (max-width:900px){
  .kontaktFormRow{
    flex-direction:column;
    gap:32px;
    display: block;
  }
  .kontaktFormRow .kontaktLeft{
    position:static;
    order:-1;
    margin-bottom: 4rem;
  }
}

.kontaktBadges{
  display:flex;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
}
.kontaktBadge{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  font-size:13px;
  font-weight:500;
  color:var(--paper);
  text-decoration:none;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.kontaktBadge:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);
}
.kontaktBadge svg{
  flex-shrink:0;
}
.kontaktCopy{
  text-align:center;
  margin-top:24px;
  font-size:13px;
  opacity:0.5;
}
.kontaktMain{
  text-align:center;
  margin-bottom:80px;
}
.kontaktK{
  font-family:var(--mono);
  font-weight:300;
  letter-spacing:.01em;
  font-size:12px;
  opacity:.6;
  margin-bottom:8px;
}
.kontaktH2{
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  letter-spacing:-2px;
  line-height:1;
  font-size:clamp(42px, 8vw, 96px);
  margin-bottom:16px;
  margin-top: 0rem;
}
.kontaktLead{
  font-size:18px;
  line-height:1.6;
  font-weight:200;
  opacity:.88;
  max-width:48ch;
  margin:0 auto;
  text-align:center;
}
.kontaktCTA{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:28px;
}
.kontaktBtn{
  display:inline-block;
  padding:14px 36px;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  font-size:14px;
  letter-spacing:.02em;
  border:2px solid rgba(255,255,255,.3);
  border-radius:26px;
  text-decoration:none;
  cursor:pointer;
  transition: background var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.kontaktBtn:hover{
  border-color:var(--brand);
  color:var(--brand);
}
.kontaktBtn.primary{
  background:var(--brand);
  border-color:var(--brand);
  color:var(--ink);
}
.kontaktBtn.primary:hover{
  background:transparent;
  color:var(--brand);
}

/* Kontaktformular */
.kontaktForm{
  margin-top:56px;
  padding-top:48px;
  border-top:1px solid rgba(255,255,255,.1);
}
.kontaktFormGrid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
  margin-bottom:24px;
}
.kontaktFormField{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.kontaktFormField label{
  font-family:var(--mono);
  font-weight:300;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.02em;
  opacity:.7;
}
.kontaktFormField input,
.kontaktFormField select,
.kontaktFormField textarea{
  padding:14px 16px;
  font-family:"Space Grotesk", Inter, system-ui;
  font-size:15px;
  font-weight:500;
  background:rgba(255,255,255,.08);
  border:2px solid rgba(255,255,255,.15);
  border-radius:8px;
  color:var(--paper);
  transition: border-color var(--t-ui) var(--ease), background var(--t-ui) var(--ease);
}
.kontaktFormField input::placeholder,
.kontaktFormField textarea::placeholder{
  color:rgba(255,255,255,.4);
}
.kontaktFormField input:focus,
.kontaktFormField select:focus,
.kontaktFormField textarea:focus{
  outline:none;
  border-color:var(--brand);
  background:rgba(255,255,255,.12);
}
.kontaktFormField select{
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
}
.kontaktFormField select option{
  background:var(--ink);
  color:var(--paper);
}
.kontaktFormField textarea{
  resize:vertical;
  min-height:120px;
}
.kontaktFormFieldFull{
  grid-column:1 / -1;
}
.kontaktFormActions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:24px;
}
.kontaktFormSuccess{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:20px;
  padding:16px 20px;
  background:rgba(52,199,89,.15);
  border:2px solid rgba(52,199,89,.3);
  border-radius:8px;
  color:#34C759;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  font-size:14px;
}
.kontaktFormError{
  margin-top:20px;
  padding:16px 20px;
  background:rgba(255,59,48,.15);
  border:2px solid rgba(255,59,48,.3);
  border-radius:8px;
  color:#FF3B30;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  font-size:14px;
}

.kontaktFooter{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px;
  padding-top:48px;
  margin-top:48px;
  border-top:1px solid rgba(255,255,255,.1);
}
.kontaktCol{ min-width:0; }
.kontaktColK{
  font-family:var(--mono);
  font-weight:300;
  letter-spacing:.01em;
  font-size:11px;
  opacity:.5;
  margin-bottom:12px;
}
.kontaktLinks{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.kontaktLinks button{
  background:none;
  border:none;
  color:inherit;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  font-size:13px;
  letter-spacing:.02em;
  cursor:pointer;
  text-align:left;
  padding:0;
  opacity:0.7;
  transition: opacity var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.kontaktLinks button:hover{
  opacity:1;
  color:var(--brand);
}
.kontaktLinks a{
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  font-size:13px;
  letter-spacing:.02em;
  opacity:.7;
  transition: opacity var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.kontaktLinks a:hover{
  opacity:1;
  color:var(--brand);
}
.kontaktDeepBtn{
  padding:12px 20px;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  font-size:13px;
  letter-spacing:.02em;
  background:transparent;
  border:1px solid rgba(255,255,255,.2);
  color:inherit;
  cursor:pointer;
  transition: border-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.kontaktDeepBtn:hover{
  border-color:var(--brand);
  color:var(--brand);
}

@media (max-width: 980px){
  #kontakt{ padding:8vh 18px 6vh; }
  .kontaktPersonal{ grid-template-columns:1fr; gap:32px; text-align:center; }
  .kontaktLeft{ align-items:center; }
  .kontaktPhoto{ margin:0 auto; width:140px; height:140px; }
  .kontaktName{ text-align:center; }
  .kontaktDetails{ align-items:center; }
  .kontaktInfo{ text-align:center; }
  .kontaktLead{ text-align:center; margin:0 auto; }
  .kontaktCTA{ justify-content:center; }
  .kontaktMain{ margin-bottom:48px; }
  .kontaktFormGrid{ grid-template-columns:1fr; }
  .kontaktFormActions{ justify-content:center; }
  .kontaktFooter{ grid-template-columns:1fr; gap:24px; }
  .kontaktCol{ text-align:left; }
  .kontaktLinks{ align-items:flex-start; }
}

.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;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.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{
  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);
  color:var(--ink);
  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:var(--brand); color:var(--brand); }
.portalTab.isOn{
  border-color:var(--brand);
  background:rgba(24,187,247,.08);
  color:var(--brand);
}
.portalPane{
  display:none;
  border:2px solid rgba(24,187,247,.18);
  background:rgba(24,187,247,.03);
  padding:14px 14px;
}
.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;
  font-size:16px; /* Prevent iOS zoom on focus */
  -webkit-appearance:none;
  appearance:none;
  border-radius:0;
  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);
  color:var(--ink);
  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{ bottom:22px; }
  .restOverlay{ place-items:start center; padding:20px 0 60px; }
  .restInner{ width:calc(100vw - 2rem); padding:40px 0 20px; }
  .restCols{ grid-template-columns: 1fr 1fr; gap:12px; }
  .restCol{ padding:12px; }
  .restCol:first-child{ grid-column: 1 / -1; }
  .restList{ gap:6px; }
  .restList a{ padding:8px 2px; font-size:11px; }
  .restK{ font-size:11px; }
}

@media (max-width: 480px){
  .restCols{ grid-template-columns: 1fr; }
  .restCol:first-child{ grid-column: auto; }
}

/* =========================
   Cursor + Info box
========================= */
#cursor{
  position:fixed;
  left:0; top:0;
  width:22px; height:22px;
  border:2px solid rgba(30,31,31,.55);
  border-radius:50%;
  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(-50%, -50%);
  pointer-events:none;
  z-index:201;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.55px;
  font-size:10px;
  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), border-color .18s var(--ease);
  width:min(260px, calc(100vw - 40px));
  border:2px solid color-mix(in srgb, var(--cursorC) 50%, rgba(30,31,31,.12) 50%);
  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(-50%, -50%);
}
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 var(--brand);
  background:rgba(24,187,247,0.08);
  padding:12px 18px;
  color:var(--brand);
  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:var(--brand);
  background:var(--brand);
  color:#fff;
}

/* =========================
   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:1rem; 
    align-items:flex-start;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  #client .restStage{ width:calc(100vw - 2rem); }
  .portal{ width:100%; }
  .portalPane{ width:100%; box-sizing:border-box; }
  .portalInput, .portalTextarea{ width:100%; box-sizing:border-box; }
}

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:6px;
  height:6px;
  margin:-3px 0 0 -3px;
  border-radius:50%;
  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 (direct canvas, no iframe) === */
#showroom{
  position: relative;
  background: var(--paper);
  /* Height for scroll-based rig rotation: 100vh + (cards * 80vh) */
  min-height: calc(100vh + 320vh);
}

/* Showroom Heading with slide-in animation */
.showroomHeading{
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 32px 40px 0;
  pointer-events: none;
  text-align: center;
}
.showroomTitle{
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 auto;
  margin-top: 4rem;
  padding: 10px 20px;
  color: var(--ink);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  background: rgba(253,251,248,0.85);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  border: 1px solid rgba(30,31,31,0.08);
  display: inline-block;
}
.showroomTitle .accent{
  color: var(--brand);
}
.showroomHeading.isVisible .showroomTitle{
  opacity: 1;
  transform: translateY(0);
}
.showroomHeading.isHidden .showroomTitle{
  opacity: 0;
  transform: translateY(-30px);
}

.showroomStage{
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--paper);
}

#showroomCanvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
}

/* Room Overlay - Underwater feeling: slow, dampened, wave-like */
.roomOverlay{
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.9s;
  overflow-y: auto;
}
.roomOverlay.isOpen{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* roomTop - fixed header with high z-index */
.roomTop{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(253,251,248,0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(30,31,31,0.06);
  z-index: 1002;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.7s 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), 
              transform 0.7s 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.roomOverlay.isOpen .roomTop{
  opacity: 1;
  transform: translateY(0);
}
.roomTitle{
  margin: 0;
  font: 600 clamp(40px, 1.8vw, 18px)/1.2 "Space Grotesk", system-ui;
  letter-spacing: -0.01em;
  color: var(--ink);
}
@media (max-width: 420px) {
  .roomTitle{
    font: 600 clamp(20px, 1.8vw, 18px)/1.2 "Space Grotesk", system-ui;
  }
}
.roomClose{
  width: 36px;
  height: 36px;
  aspect-ratio: 1;
  flex-shrink: 0;
  border: 1.5px solid rgba(30,31,31,0.12);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, transform 0.3s;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 10;
  padding: 0;
  line-height: 1;
}
.roomClose::before,
.roomClose::after{
  content: '';
  position: absolute;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}
.roomClose::before{ transform: rotate(45deg); }
.roomClose::after{ transform: rotate(-45deg); }
.roomClose:hover{
  border-color: var(--brand);
  color: var(--brand);
  transform: scale(1.05);
}

/* Room content - two column layout */
.roomContent{
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 32px;
  width: min(1200px, calc(100vw - 80px));
  margin: 0 auto;
  padding: 90px 0 48px;
  align-items: start;
}
.roomContent *{
  border-radius: 12px;
}

/* Card wrapper with staggered animation */
.roomCard{
  background: var(--paper);
  border: 1.5px solid rgba(30,31,31,0.08);
  padding: 20px;
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 0.8s 0.15s cubic-bezier(0.22, 0.61, 0.36, 1), 
              transform 0.8s 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);
  border-radius: 18px !important;
}
.roomOverlay.isOpen .roomCard{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Media inside card */
.roomMedia{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: rgba(30,31,31,0.02);
  border-radius: 6px;
  overflow: hidden;
  border-radius: 12px !important;
}
.roomImage, .roomVideo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.roomVideo{
  opacity: 0;
}
.roomMedia.videoReady .roomVideo{
  opacity: 1;
}
.roomMedia.videoReady .roomImage{
  opacity: 0;
}

/* Play button after video ends */
.roomPlayBtn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 72px;
  height: 72px;
  border: none;
  border-radius: 50%;
  background: rgba(24, 187, 247, 0.95);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10;
}
.roomPlayBtn svg{
  width: 32px;
  height: 32px;
}
.roomPlayBtn.isVisible{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.roomPlayBtn:hover{
  background: rgba(24, 187, 247, 1);
  transform: translate(-50%, -50%) scale(1.08);
}

/* Sidebar with link - staggered animation */
.roomSidebar{
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.7s 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), 
              transform 0.7s 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.roomOverlay.isOpen .roomSidebar{
  opacity: 1;
  transform: translateX(0);
}
.roomLink{
  font: 600 15px/1 "Space Grotesk", Inter, system-ui;
  letter-spacing: 0.02em;
  color: #fff;
  padding: 14px 28px;
  background: var(--brand);
  border: 2px solid var(--brand);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  text-decoration: none;
  text-align: center;
}
.roomLink:hover{
  background: transparent;
  color: var(--brand);
}
.roomSidebarInfo{
  font: 500 13px/1.6 Inter, system-ui;
  color: rgba(30,31,31,0.6);
  padding: 12px 0;
  border-top: 1px solid rgba(30,31,31,0.08);
}

/* roomMeta - 3 columns with staggered animation */
.roomMeta{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding-top: 20px;
}
.roomMetaCol{
  border: 1.5px solid rgba(30,31,31,0.1);
  background: rgba(30,31,31,0.02);
  padding: 14px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1), 
              transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.roomOverlay.isOpen .roomMetaCol:nth-child(1){ transition-delay: 0.6s; opacity: 1; transform: translateY(0); }
.roomOverlay.isOpen .roomMetaCol:nth-child(2){ transition-delay: 0.8s; opacity: 1; transform: translateY(0); }
.roomOverlay.isOpen .roomMetaCol:nth-child(3){ transition-delay: 1.0s; opacity: 1; transform: translateY(0); }

.roomMetaLabel{
  font: 300 11px/1.2 var(--mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(30,31,31,0.6);
  margin-bottom: 8px;
}
.roomMetaText{
  font: 600 14px/1.5 "Space Grotesk", system-ui;
  color: rgba(30,31,31,0.88);
}

@media (max-width: 720px){
  .roomTop{ padding: 12px 16px; }
  .roomContent{ 
    grid-template-columns: 1fr; 
    padding: 76px 0 32px; 
    width: calc(100vw - 32px);
    gap: 16px;
  }
  .roomCard{ padding: 14px; }
  .roomSidebar{ 
    flex-direction: column; 
    transform: translateY(20px);
  }
  .roomOverlay.isOpen .roomSidebar{ transform: translateY(0); }
  .roomMeta{ grid-template-columns: 1fr; gap: 12px; }
}

/* Showroom Scroll Hint */
.showroomHint{
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(30,31,31,0.5);
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.showroomHint.isVisible{
  opacity: 1;
}
.showroomHint .kbd,
.coreHint .kbd{
  border: 1.5px solid rgba(30,31,31,0.2);
  border-radius: 20px;
  padding: 6px 12px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(253,251,248,0.6);
}
.showroomHint .hintArrow,
.coreHint .hintArrow{
  animation: hintBob 2s ease-in-out infinite;
}
@keyframes hintBob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(6px); }
}

/* =========================
   Cookie Consent Banner
========================= */
.consentBanner{
  position: fixed;
  bottom: 24px;
  right: 24px;
  left: auto;
  width: 40%;
  max-width: 480px;
  min-width: 320px;
  z-index: 9999;
  padding: 24px;
  background: rgba(253,251,248,0.98);
  border: 2px solid rgba(30,31,31,0.1);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease;
}
.consentClose{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.consentClose:hover{
  opacity: 1;
  transform: scale(1.1);
}
.consentBanner.isVisible{
  transform: translateY(0);
  opacity: 1;
}
@media (max-width: 768px){
  .consentBanner{
    bottom: 16px;
    right: 16px;
    left: 16px;
    width: auto;
    min-width: 0;
  }
}
.consentInner{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.consentText{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}
.consentTitle{
  font-family: "Space Grotesk", Inter, system-ui;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.02em;
}
.consentDesc{
  font-size: 13px;
  opacity: 0.78;
  line-height: 1.5;
}
.consentLink{
  color: var(--brand, #18BBF7);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consentBtns{
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.consentBtn{
  font-family: var(--mono);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 16px;
  border: 2px solid rgba(30,31,31,0.2);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.consentBtn:hover{
  border-color: rgba(30,31,31,0.5);
}
.consentAccept{
  background: var(--brand, #18BBF7);
  border-color: var(--brand, #18BBF7);
  color: #fff;
}
.consentAccept:hover{
  background: color-mix(in srgb, var(--brand, #18BBF7) 85%, #000 15%);
  border-color: color-mix(in srgb, var(--brand, #18BBF7) 85%, #000 15%);
}
@media (max-width: 640px){
  .consentInner{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .consentBtns{
    width: 100%;
  }
  .consentBtn{
    flex: 1;
    text-align: center;
  }
}

/* Domain Result Display */
.domainResult{
  margin-top: 20px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(24,187,247,0.08) 0%, rgba(24,187,247,0.02) 100%);
  border: 2px solid rgba(24,187,247,0.3);
  text-align: center;
  animation: fadeUp 0.4s ease-out;
}
.domainResultLabel{
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(30,31,31,0.6);
  margin-bottom: 12px;
}
.domainResultLink{
  display: block;
  font: 600 20px/1.3 "Space Grotesk", system-ui;
  color: #18BBF7;
  text-decoration: none;
  transition: color 0.2s;
}
.domainResultLink:hover{
  color: #0099d6;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Portal Textarea */
.portalTextarea{
  resize: vertical;
  min-height: 80px;
  font-family: Inter, system-ui;
  font-size: 16px; /* Prevent iOS zoom on focus */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}