:root{--bg:#000;--fg:#fff;--muted:rgba(255,255,255,.72);--ring:rgba(255,255,255,.12);
--glass:rgba(255,255,255,.05);--accent:#d946ef;--accent2:#6366f1}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;color:var(--fg);background:#000;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
background:radial-gradient(60vmax 60vmax at 50% 50%, rgba(217,70,239,.10), transparent 60%),
radial-gradient(40vmax 40vmax at 10% 10%, rgba(99,102,241,.08), transparent 60%),#000}
a{text-decoration:none;color:inherit}.container{max-width:1200px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:16px;border:1px solid var(--ring);
background:linear-gradient(180deg, rgba(217,70,239,.9), rgba(217,70,239,.8));color:#fff;font-weight:600;
box-shadow:0 10px 30px rgba(217,70,239,.25)}.btn.secondary{background:var(--glass)}
header{position:fixed;inset:0 0 auto 0;height:64px;backdrop-filter:blur(10px);background:rgba(0,0,0,.35);
border-bottom:1px solid var(--ring);z-index:50}header .row{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{height:32px;width:32px;border-radius:10px;border:1px solid var(--ring)}nav a{opacity:.85;margin-left:18px}nav a:hover{opacity:1}
.hero{position:relative;min-height:92vh;display:grid;place-items:center;padding-top:96px;background:linear-gradient(#000,#0b0b0b);overflow:hidden}
h1{font-size:clamp(34px,5vw,64px);margin:0 0 10px;font-weight:700;letter-spacing:-.02em}
.lead{font-size:clamp(16px,2.2vw,22px);color:var(--muted)}.badge{background:rgba(255,255,255,.06);border:1px solid var(--ring);
border-radius:999px;padding:6px 10px;font-size:12px}.badges{display:flex;justify-content:center;gap:8px;position:absolute;bottom:28px;left:0;right:0;opacity:.85}
section{padding:80px 0}.kicker{text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.6);font-size:12px;margin-bottom:8px;font-weight:700}
h2{font-size:clamp(28px,4vw,48px);margin:0 0 12px}p.sub{color:var(--muted);max-width:720px;margin:8px auto 0}
.card{background:rgba(255,255,255,.04);border:1px solid var(--ring);border-radius:24px;padding:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media (max-width:900px){.grid-3{grid-template-columns:1fr}.grid-2,.row{grid-template-columns:1fr}}
/* Logos marquee (seamless triple sequence) */
.logos{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);
mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent)}
.marquee{display:inline-flex;gap:44px;white-space:nowrap;animation:marquee 28s linear infinite;align-items:center}
.marquee img{height:42px;opacity:.9;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.marquee .logo-text{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 14px;border-radius:12px;
border:1px solid var(--ring);background:rgba(255,255,255,.06);font-weight:600;color:#eee}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
.map{height:300px;width:100%;border-radius:24px;overflow:hidden;border:1px solid var(--ring)}
.footer{border-top:1px solid var(--ring);padding:32px 0;color:rgba(255,255,255,.65)}
#bg3d{position:absolute;inset:0;z-index:0}.hero .inner{position:relative;z-index:1}.btns{margin-top:24px;display:inline-flex;gap:12px}
.dropzone{text-align:center;padding:24px;border:2px dashed var(--ring);border-radius:24px;background:rgba(255,255,255,.05)}
.file{display:flex;gap:10px;padding:8px 10px;background:rgba(0,0,0,.4);border:1px solid var(--ring);border-radius:12px;font-size:14px}
.list{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:60}
.lightbox.open{display:flex}.lightbox img{max-width:92vw;max-height:86vh;border-radius:16px;border:1px solid var(--ring);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lightbox .cap{color:#ddd;margin-top:10px;text-align:center}.closebtn{position:absolute;top:16px;right:16px;background:rgba(217,70,239,.20);border:1px solid var(--accent);border-radius:12px;padding:10px 12px;cursor:pointer;color:#fff}


/* === Fullscreen Lightbox + 3D Zoom Guard === */
.lightbox{align-items:stretch;justify-content:stretch;padding:0}
.lightbox > div{width:100vw;height:100vh;display:flex;align-items:stretch;justify-content:center}
#lbmv{width:100vw;height:100vh;border-radius:0 !important;display:block}
.lightbox img{max-width:100vw;max-height:100vh;border-radius:0}


/* Prominent close button styling */
.closebtn{
  position:fixed;
  top:16px; right:16px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border:1px solid var(--accent);
  color:#fff;
  font-weight:700;
  padding:14px 18px;
  border-radius:16px;
  cursor:pointer;
  z-index: 200;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 3px rgba(217,70,239,.25) inset;
}
.closebtn:hover{ filter:brightness(1.05); transform:translateY(-1px) }


/* Labels under reference tiles */
.thumb-label{
  text-align:center;
  color:#e5e5e5;
  font-weight:600;
  font-size:14px;
  letter-spacing:.2px;
}

/* --- Lightbox Loader Overlay --- */
.loader{
  position:fixed; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  background: rgba(0,0,0,0.35); z-index: 150;
}
.loader .spinner{
  width:44px; height:44px; border-radius:50%;
  border:4px solid rgba(255,255,255,0.25);
  border-top-color: #fff; animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader .bar{ width:56vw; max-width:520px; height:8px; border-radius:999px;
  background: rgba(255,255,255,0.15); overflow:hidden; border:1px solid var(--ring);
}
.loader .bar .fill{ height:100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.loader .label{ color:#fff; font-weight:600; letter-spacing:.2px; }

/* === 3D CTA Badge on reference tiles === */
#referenzen .fig-3d{ position:relative; cursor:pointer }
#referenzen .fig-3d .badge-3d{
  position:absolute; top:10px; left:10px;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; font-weight:700; font-size:12px; letter-spacing:.2px;
  color:#fff; background: linear-gradient(135deg, var(--accent), var(--accent2));
  border:1px solid var(--accent); border-radius:999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 2px rgba(217,70,239,.25) inset;
}
#referenzen .fig-3d .badge-3d:hover{ filter:brightness(1.05) }
#referenzen .fig-3d:hover .badge-3d{ transform: translateY(-1px) }
#referenzen .badge-cube{
  display:inline-block; width:12px; height:12px;
  background:
    conic-gradient(from 45deg at 50% 50%, rgba(255,255,255,.95) 0 33%, rgba(255,255,255,.85) 0 66%, rgba(255,255,255,.75) 0 100%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* === Gradient CI titles in About === */
#about .card > strong{
  display:inline-block;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Center 4th reference card on a new row */
#referenzen .grid-3 > figure:nth-child(4){ grid-column: 2; }