/* FRANK DOPF — Markenwelt-Hub v4 „Die Stadt" · Nacht-Campus aus CSS-3D-Gebäuden, kein Framework */
@font-face{font-family:"Inter";font-weight:400 700;font-display:swap;src:url("hub-inter.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:500 700;font-display:swap;src:url("hub-space-grotesk.woff2") format("woff2")}
:root{
  --night:#06080B;--night-2:#0B0F13;--white:#F4F7F2;--grey:#9AA69B;--grey-2:#6B746B;
  --neon:#6DFF4F;--green:#5AA830;--gold:#C9A96A;--warm:rgba(255,214,140,.9);
  --fd:"Space Grotesk",system-ui,sans-serif;--fb:"Inter",system-ui,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-pop:cubic-bezier(.34,1.4,.44,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip}
body{font-family:var(--fb);background:var(--night);color:var(--white);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100svh}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--neon);color:#052400}
a:focus-visible{outline:2px solid var(--neon);outline-offset:4px;border-radius:8px}

/* Himmel: Abendrot am Horizont, Nacht oben, Sterne */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,#05070A 0%,#0A1018 30%,#1A161E 44%,#4A2A24 54%,#9A5232 61%,#D27A3C 66%,#5A3426 72%,#0B0F13 82%,#06080B 100%)}
.sky .stars{position:absolute;inset:0;opacity:.8;
  background-image:radial-gradient(1px 1px at 12% 18%,#fff 60%,transparent),radial-gradient(1px 1px at 28% 8%,#fff 60%,transparent),
   radial-gradient(1.5px 1.5px at 44% 24%,#fff 60%,transparent),radial-gradient(1px 1px at 61% 12%,#fff 60%,transparent),
   radial-gradient(1px 1px at 73% 30%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 86% 9%,#fff 60%,transparent),
   radial-gradient(1px 1px at 93% 22%,#fff 60%,transparent),radial-gradient(1px 1px at 52% 5%,#fff 60%,transparent),
   radial-gradient(1px 1px at 6% 34%,#fff 60%,transparent),radial-gradient(1px 1px at 37% 36%,#fff 60%,transparent),
   radial-gradient(1px 1px at 80% 40%,#fff 60%,transparent),radial-gradient(1px 1px at 20% 44%,#fff 60%,transparent);
  animation:twinkle 6s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.45}}
.sky .horizon{position:absolute;left:0;right:0;bottom:0;height:40%;
  background:linear-gradient(180deg,transparent,rgba(6,8,11,.9) 45%,var(--night) 100%)}

.world{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;
  padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-right))}

/* Titel-Schild */
.title{text-align:center;margin-top:6px}
h1{font-family:var(--fd);font-weight:700;letter-spacing:-.02em;line-height:1;display:inline-flex;flex-direction:column;align-items:center;gap:2px}
h1 .t1{font-size:clamp(1.9rem,5vw,3.6rem);color:#fff;text-shadow:0 0 24px rgba(109,255,79,.35),0 0 60px rgba(109,255,79,.18)}
h1 .t2{font-size:clamp(.7rem,1.3vw,.95rem);letter-spacing:.5em;text-transform:uppercase;color:var(--neon);margin-left:.5em}
.sel{margin-top:10px;font-family:var(--fd);font-size:clamp(.95rem,1.5vw,1.15rem);color:var(--grey);letter-spacing:.02em}

/* Stadt */
.city{position:relative;flex:1;min-height:520px;perspective:1300px;perspective-origin:50% 30%;overflow:visible}
.ground{position:absolute;left:-40%;right:-40%;top:34%;height:120%;transform-origin:50% 0;transform:rotateX(74deg);pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,180,100,.0),rgba(255,160,80,.04) 30%,transparent 70%),
    repeating-linear-gradient(90deg,rgba(109,255,79,.10) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(0deg,rgba(109,255,79,.10) 0 1px,transparent 1px 72px),
    radial-gradient(60% 40% at 50% 0,rgba(109,255,79,.12),transparent 70%),#07090C;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 60%,transparent 100%);
  animation:groundIn 1.4s var(--ease-out) both}
@keyframes groundIn{from{opacity:0;transform:rotateX(74deg) translateY(60px)}}
.road{position:absolute;left:0;right:0;height:26px;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.6));border-block:1px solid rgba(255,255,255,.06)}
.road::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 40px,transparent 40px 80px)}
.road-1{top:26%}.road-2{top:58%}
.car{position:absolute;top:4px;width:38px;height:7px;border-radius:4px;background:linear-gradient(90deg,transparent,#fff6d8);box-shadow:0 0 14px 4px rgba(255,240,200,.55);animation:drive 7s linear infinite}
.car:nth-child(2){animation-delay:-3s;top:14px}
.car.back{top:14px;background:linear-gradient(90deg,#ff3b2f,transparent);box-shadow:0 0 14px 4px rgba(255,60,40,.5);animation-name:driveBack;animation-duration:9s;animation-delay:-5s}
@keyframes drive{from{left:-6%}to{left:106%}}
@keyframes driveBack{from{left:106%}to{left:-6%}}

/* Karlsruhe-Skyline (dekorativ, nie klickbar) */
.skyline{position:absolute;left:0;right:0;top:3%;height:46%;pointer-events:none;z-index:1;opacity:0;animation:skyIn 1.6s var(--ease-out) .2s forwards}
@keyframes skyIn{to{opacity:1}}
.skyline svg{width:100%;height:100%;display:block}
.skyline .w{fill:rgba(255,231,176,.8);animation:skblink 5s steps(1) infinite}
.skyline .w:nth-child(3n){animation-delay:1.3s}.skyline .w:nth-child(3n+1){animation-delay:2.6s}.skyline .w:nth-child(5n){animation-delay:.7s}
@keyframes skblink{0%,100%{opacity:1}35%{opacity:.35}60%{opacity:.9}85%{opacity:.5}}
.skyline .lantern{filter:drop-shadow(0 0 6px #FFE7B0);animation:lantern 2.5s ease-in-out infinite}
@keyframes lantern{50%{opacity:.5}}
.skyline .faecher{fill:none;stroke:rgba(109,255,79,.22);stroke-width:1;stroke-dasharray:3 7;animation:flow 3s linear infinite}
.skyline .sk-label{font-family:var(--fd);font-size:9px;letter-spacing:.22em;text-transform:uppercase;fill:rgba(154,166,155,.75)}
.skyline .bahn{animation:flow 2s linear infinite}
.lamp{position:absolute;width:6px;height:6px;border-radius:50%;background:#FFE7B0;box-shadow:0 0 18px 6px rgba(255,231,176,.45);animation:lantern 3s ease-in-out infinite}
.lamp:nth-child(odd){animation-delay:1.2s}

/* Verbindungslinien vom Schloss zu den Gebäuden */
.links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.links path{fill:none;stroke:rgba(109,255,79,.42);stroke-width:1.2;stroke-dasharray:6 10;animation:flow 2.4s linear infinite;filter:drop-shadow(0 0 4px rgba(109,255,79,.6))}
@keyframes flow{to{stroke-dashoffset:-32}}

.scene{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out;z-index:2}

/* Gecko: Herz der Stadt */
.gecko{position:absolute;left:50%;top:12%;height:clamp(200px,40svh,380px);width:auto;transform:translateX(-50%);z-index:3;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(109,255,79,.25));animation:float 5.5s ease-in-out infinite;transform-origin:50% 100%;transition:transform .6s var(--ease-out)}
@keyframes float{50%{transform:translateX(-50%) translateY(-10px) rotate(-2deg)}}

/* Gebäude (CSS-3D-Box: Front + Seite + Dach) */
.bld{position:absolute;display:block;width:var(--w);--d:72px;transform-style:preserve-3d;z-index:6;
  opacity:0;transform:translateY(40px) scaleY(.2);transform-origin:50% 100%;
  animation:rise 1.1s var(--ease-pop) forwards;animation-delay:var(--delay,.3s)}
@keyframes rise{to{opacity:1;transform:none}}
.bld .box{position:relative;display:block;width:100%;height:var(--h);transform-style:preserve-3d;transform:rotateY(var(--ay,0deg));transition:transform .5s var(--ease-out)}
.face{position:absolute;display:block;backface-visibility:hidden}
.face.front{inset:0;background:
    linear-gradient(180deg,#0E1216 0,#121820 60%,#0A0D10 100%);border:1px solid rgba(255,255,255,.08);border-radius:4px;overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.02)}
.face.side{top:0;bottom:0;width:var(--d);left:100%;transform-origin:left center;transform:rotateY(-90deg);
  background:linear-gradient(90deg,#070A0D,#0C1116);border:1px solid rgba(255,255,255,.05);border-left:0;
  background-image:repeating-linear-gradient(0deg,transparent 0 14px,rgba(255,200,120,.06) 14px 22px),linear-gradient(90deg,#070A0D,#0C1116)}
.b-ak .face.side,.b-ro .face.side{left:auto;right:100%;transform-origin:right center;transform:rotateY(90deg);border-left:1px solid rgba(255,255,255,.05);border-right:0}
.face.top{left:0;right:0;top:0;height:var(--d);transform-origin:center top;transform:rotateX(90deg);background:#0A0D11;border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 2px rgba(109,255,79,.08)}
.face.top::after{content:"";position:absolute;inset:8px;border:1px dashed rgba(109,255,79,.25)}
.sign{position:absolute;left:6%;right:6%;top:8%;height:42%;display:flex;align-items:center;justify-content:center;padding:7px 12px;
  background:#FFFFFF;border:1px solid rgba(255,255,255,.7);border-radius:4px;box-shadow:0 0 24px rgba(255,255,255,.28),0 0 0 1px rgba(0,0,0,.5);
  animation:signGlow 4s ease-in-out infinite}
.sign img{max-height:100%;width:auto;max-width:100%;object-fit:contain}
.sign-vip{box-shadow:0 0 24px rgba(201,169,106,.45),0 0 0 1px rgba(0,0,0,.5);border-color:rgba(201,169,106,.6);animation-name:signGlowGold}
@keyframes signGlow{50%{box-shadow:0 0 38px rgba(255,255,255,.42),0 0 0 1px rgba(0,0,0,.5)}}
@keyframes signGlowGold{50%{box-shadow:0 0 38px rgba(201,169,106,.65),0 0 0 1px rgba(0,0,0,.5)}}
.win{position:absolute;left:7%;right:7%;top:54%;bottom:16%;background:rgba(255,214,140,.14);
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 14px,transparent 14px 22px),repeating-linear-gradient(0deg,#000 0 11px,transparent 11px 19px);
  -webkit-mask-composite:source-in;mask-image:repeating-linear-gradient(90deg,#000 0 14px,transparent 14px 22px),repeating-linear-gradient(0deg,#000 0 11px,transparent 11px 19px);mask-composite:intersect}
.win::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(10px 8px at 18% 22%,rgba(255,230,170,.9),transparent 70%),radial-gradient(10px 8px at 52% 62%,rgba(255,230,170,.8),transparent 70%),
    radial-gradient(10px 8px at 80% 30%,rgba(255,230,170,.85),transparent 70%),radial-gradient(10px 8px at 34% 80%,rgba(255,230,170,.7),transparent 70%),
    radial-gradient(10px 8px at 68% 88%,rgba(255,230,170,.75),transparent 70%);
  animation:blink 5s steps(1) infinite;animation-delay:var(--delay,0s)}
@keyframes blink{0%,100%{opacity:.9}30%{opacity:.5}55%{opacity:1}80%{opacity:.6}}
.win-vip{background:rgba(201,169,106,.16);-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 26px,transparent 26px 34px);mask-image:repeating-linear-gradient(90deg,#000 0 26px,transparent 26px 34px);-webkit-mask-composite:source-over;mask-composite:add}
.door{position:absolute;left:50%;bottom:0;width:18%;height:14%;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,214,140,.5),rgba(255,214,140,.15));border-radius:3px 3px 0 0;box-shadow:0 -6px 24px rgba(255,214,140,.25)}
.label{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;font-family:var(--fd);font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
  padding:5px 10px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(6,8,11,.7);transition:color .2s,border-color .2s}
.label-gold{color:var(--gold)}
.bld:hover{z-index:7}
.bld:hover .box{transform:rotateY(var(--ay,0deg)) translateY(-8px) scale(1.03)}
.bld:hover .sign{box-shadow:0 0 48px rgba(255,255,255,.55),0 0 0 1px rgba(0,0,0,.5)}
.bld:hover .sign-vip{box-shadow:0 0 48px rgba(201,169,106,.75),0 0 0 1px rgba(0,0,0,.5)}
.bld:hover .label{color:var(--white);border-color:rgba(109,255,79,.5)}
.bld:active .box{transform:rotateY(var(--ay,0deg)) scale(.98)}

/* Desktop-Positionen (Prozent der Stadtfläche) */
.b-fd{--w:clamp(190px,18vw,250px);--h:clamp(140px,15vw,200px);--ay:-16deg;left:5%;top:26%;--delay:.35s}
.b-ak{--w:clamp(190px,18vw,250px);--h:clamp(140px,15vw,200px);--ay:16deg;right:5%;top:26%;--delay:.5s}
.b-fl{--w:clamp(200px,19vw,260px);--h:clamp(120px,12vw,160px);--ay:-14deg;left:11%;top:62%;--delay:.65s}
.b-ro{--w:clamp(200px,19vw,260px);--h:clamp(120px,12vw,160px);--ay:14deg;right:11%;top:62%;--delay:.8s}
.b-vip{--w:clamp(260px,26vw,380px);--h:clamp(120px,12vw,165px);--ay:0deg;left:50%;top:68%;transform-origin:50% 100%;--delay:.95s;
  animation-name:riseC;transform:translateX(-50%) translateY(40px) scaleY(.2)}
@keyframes riseC{to{opacity:1;transform:translateX(-50%)}}
@media (min-width:1500px){.b-fd,.b-fl{left:12%}.b-ak,.b-ro{right:12%}}

/* Footer */
.foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:14px;padding-top:12px;font-size:.8rem;color:var(--grey);border-top:1px solid rgba(255,255,255,.08)}
.foot a:hover{color:var(--neon)}
.foot .credit{font-size:.7rem;color:var(--grey-2);opacity:.75;margin-left:10px}
.foot .credit a{font-weight:600}

/* Load-Choreografie (Titel, Gecko, Footer) */
.hl{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1)}
body.loaded .hl{opacity:1;transform:none}
body.loaded .hl[data-hl="1"]{transition-delay:.15s}
body.loaded .hl[data-hl="2"]{transition-delay:.25s}
body.loaded .hl[data-hl="3"]{transition-delay:1.2s}
.gecko.hl{transform:translateX(-50%) translateY(20px)}
body.loaded .gecko.hl{transform:translateX(-50%)}

/* Mobile/Tablet: Stadt als Straßenzug untereinander */
@media (max-width:999px){
  .city{perspective:none;min-height:0;margin-top:8px}
  .ground{display:none}.links{display:none}
  .skyline{position:relative;top:auto;height:150px;grid-column:1/-1;order:-1;margin-bottom:-10px}
  .scene{position:relative;inset:auto;transform:none!important;display:grid;grid-template-columns:1fr 1fr;gap:38px 14px;padding-top:0;padding-bottom:10px}
  .city{display:flex;flex-direction:column}
  .gecko{position:static;grid-column:1/-1;justify-self:center;height:auto;width:min(56vw,230px);transform:none;margin:4px 0 6px}
  .gecko.hl{transform:translateY(20px)}body.loaded .gecko.hl{transform:none}
  @keyframes float{50%{transform:translateY(-8px) rotate(-2deg)}}
  .bld{position:relative;left:auto!important;right:auto!important;top:auto!important;width:100%!important;--w:100%;--ay:0deg;--d:34px;margin-bottom:22px}
  .b-fd{--h:150px}.b-ak{--h:150px}.b-fl{--h:132px}.b-ro{--h:132px}.b-vip{--h:138px;grid-column:1/-1;max-width:460px;justify-self:center;transform:none;animation-name:rise}
  .bld .box{transform:none!important}
  .face.side{display:none}
  .face.top{height:var(--d)}
  .label{font-size:.6rem;white-space:normal;text-align:center;width:max-content;max-width:100%}
}
@media (max-width:380px){.scene{gap:38px 10px}.label{letter-spacing:.14em}.sign{left:5%;right:5%}}

/* Grain */
body::after{content:"";position:fixed;inset:-50%;z-index:200;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hl,.bld{opacity:1;transform:none}
  .b-vip{transform:translateX(-50%)}
  .gecko,.gecko.hl{transform:translateX(-50%)}
  @media (max-width:999px){.b-vip,.gecko,.gecko.hl{transform:none}}
  body::after{display:none}
}

/* Launch-Modus: gesperrte Marken sichtbar, aber nicht klickbar */
.bld.soon{cursor:default}
.bld.soon .face.front{filter:saturate(.75) brightness(.85)}
.bld.soon:hover .box{transform:rotateY(var(--ay,0deg))}
.bld.soon:hover .sign,.bld.soon:hover .sign-vip{box-shadow:0 0 24px rgba(255,255,255,.28),0 0 0 1px rgba(0,0,0,.5)}
.bld.soon:hover .label{color:var(--grey);border-color:rgba(255,255,255,.1)}
.soon-badge{position:absolute;left:50%;top:-12px;transform:translateX(-50%) rotate(-3deg);z-index:8;white-space:nowrap;
  font-family:var(--fd);font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#062100;background:var(--neon);
  padding:5px 11px;border-radius:999px;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.soon-badge.soon-gold{background:var(--gold)}
@media (max-width:999px){.soon-badge{top:-10px}}