/* ==========================================================================
   PLAYNOW — Gaming Center
   Gestaltungsprinzip: Anzeigetafel. Große kondensierte Typo, Zeiten und
   Preise in Mono, Haarlinien als einziges Strukturelement. Keine Kacheln.
   ========================================================================== */

:root{
  --ink:#070A0A;
  --ink-2:#0B0F0F;
  --jade:#4FD3A4;        /* Hauptton des Logos */
  --mint:#9DEFCF;        /* Lichtkante der Logo-Facetten */
  --deep:#0E4A38;
  --paper:#ECF2EF;
  --grey:#7D8A85;
  --hair:rgba(236,242,239,.11);
  --hair-strong:rgba(236,242,239,.22);
  --sp:clamp(76px,9vw,132px);
  --ease:cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:"Archivo",system-ui,sans-serif;font-size:17px;line-height:1.62;
  overflow-x:hidden;font-feature-settings:"ss01";
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--jade);color:#04120C}
:focus-visible{outline:2px solid var(--jade);outline-offset:3px}

/* ---------------------------------------------------------------- Typo */
.d{
  font-family:"Big Shoulders Display","Archivo",system-ui,sans-serif;
  font-weight:800;text-transform:uppercase;line-height:.86;letter-spacing:.005em;
  margin:0;
}
.d-xl{font-size:clamp(64px,15vw,220px)}
.d-l {font-size:clamp(46px,8.4vw,116px)}
.d-m {font-size:clamp(34px,5.2vw,68px)}
.d-s {font-size:clamp(24px,3.2vw,38px)}

.mono{
  font-family:"Chivo Mono",ui-monospace,monospace;font-weight:500;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
}
.label{color:var(--jade)}
.lead{font-size:clamp(18px,2.1vw,23px);line-height:1.5;color:var(--paper);max-width:30ch}
.muted{color:var(--grey)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- Layout */
.wrap{width:min(100% - 44px,1280px);margin-inline:auto}
.sec{padding:var(--sp) 0}
.sec-tight{padding:calc(var(--sp)*.55) 0}
.hair-top{border-top:1px solid var(--hair)}

.head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end}
.head .mono{display:block;margin-bottom:22px}
.head p{color:var(--grey);max-width:44ch;font-size:17.5px}
@media (max-width:900px){.head{grid-template-columns:1fr;gap:24px;align-items:start}}

/* ---------------------------------------------------------------- Intro */
.intro{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:grid;place-items:center;
}
.intro::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(79,211,164,.10),transparent 70%);
}
.intro-grp{
  /* --k skaliert die Gruppe. Die Proportionen entsprechen exakt der Marke in
     der Navigation (Logo 40px, Abstand 12px, Schrift 19px) — dadurch landet
     die Animation punktgenau auf ihrer Position. */
  --k:5;
  display:flex;align-items:center;gap:calc(12px * var(--k));
  transform-origin:top left;will-change:transform;
}
.intro-grp img{width:calc(40px * var(--k));height:calc(40px * var(--k));opacity:0;transform:scale(.86)}
.intro-word{
  font-family:"Big Shoulders Display","Archivo",sans-serif;font-weight:800;text-transform:uppercase;
  font-size:calc(19px * var(--k));line-height:1;letter-spacing:.005em;white-space:nowrap;
  display:flex;
}
@media (max-width:1100px){.intro-grp{--k:3.6}}
@media (max-width:700px){.intro-grp{--k:2.4}}
.intro-word span{opacity:0;transform:translateY(.22em)}
.intro.run img{animation:introLogo .8s var(--ease) forwards}
.intro.run .intro-word span{animation:introChar .55s var(--ease) forwards}
@keyframes introLogo{to{opacity:1;transform:none}}
@keyframes introChar{to{opacity:1;transform:none}}
.intro.fly .intro-grp{transition:transform 1s var(--ease)}
.intro.done{opacity:0;transition:opacity .45s ease .35s;pointer-events:none}
.intro-hide{visibility:hidden}
body.locked{overflow:hidden}

/* ---------------------------------------------------------------- Navigation */
.nav{position:fixed;inset:0 0 auto;z-index:96;transition:background .45s var(--ease),border-color .45s}
.nav::after{content:"";position:absolute;inset:0;border-bottom:1px solid transparent;transition:border-color .45s;pointer-events:none}
.nav.stuck{background:rgba(7,10,10,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav.stuck::after{border-bottom-color:var(--hair)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:96px;transition:height .45s var(--ease)}
.nav.stuck .nav-in{height:74px}

.brand{display:flex;align-items:center;gap:12px}
.brand img{width:40px;height:40px}
.brand span{
  font-family:"Big Shoulders Display","Archivo",sans-serif;font-weight:800;text-transform:uppercase;
  font-size:19px;line-height:1;letter-spacing:.005em;
}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{
  font-family:"Chivo Mono",ui-monospace,monospace;font-weight:500;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
  padding:8px 0;position:relative;transition:color .3s
}
.nav-links a::after{content:"";position:absolute;left:0;bottom:2px;height:1px;width:0;background:var(--jade);transition:width .4s var(--ease)}
.nav-links a:hover{color:var(--paper)}
.nav-links a:hover::after,.nav-links a.on::after{width:100%}
.nav-links a.on{color:var(--jade)}

.burger{display:none;width:46px;height:46px;place-items:center;margin-right:-10px}
.burger i{width:22px;height:1.5px;background:var(--paper);display:block;position:relative;transition:.35s var(--ease)}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:var(--paper);transition:.35s var(--ease)}
.burger i::before{top:-7px}.burger i::after{top:7px}
.burger.x i{background:transparent}
.burger.x i::before{top:0;transform:rotate(45deg);background:var(--jade)}
.burger.x i::after{top:0;transform:rotate(-45deg);background:var(--jade)}

.sheet{
  position:fixed;inset:0;z-index:95;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;padding:0 22px;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s
}
.sheet.open{opacity:1;visibility:visible}
.sheet a.m{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:18px 0;border-bottom:1px solid var(--hair);
  font-family:"Big Shoulders Display","Archivo",sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(32px,10vw,52px);line-height:1;
  opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .25s
}
.sheet.open a.m{opacity:1;transform:none}
.sheet a.m em{font-family:"Chivo Mono",monospace;font-size:11px;font-style:normal;letter-spacing:.16em;color:var(--grey)}
.sheet a.m.on{color:var(--jade)}
.sheet .sheet-foot{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}

/* ---------------------------------------------------------------- Buttons */
.cta{
  display:inline-flex;align-items:center;gap:12px;
  font-family:"Chivo Mono",ui-monospace,monospace;font-weight:500;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;
  padding:16px 26px;background:var(--jade);color:#04120C;
  transition:background .3s,color .3s,gap .3s var(--ease)
}
.cta:hover{background:var(--mint);gap:18px}
.cta-line{
  display:inline-flex;align-items:center;gap:10px;padding:16px 0;
  font-family:"Chivo Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper);border-bottom:1px solid var(--hair-strong);
  transition:color .3s,border-color .3s,gap .3s var(--ease)
}
.cta-line:hover{color:var(--jade);border-color:var(--jade);gap:14px}
.cta svg,.cta-line svg{flex:0 0 auto}

/* ---------------------------------------------------------------- Hero */
.hero{position:relative;padding:170px 0 0}
.hero-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
.hero-word{font-size:clamp(64px,15vw,240px);line-height:.82;white-space:nowrap}
.hero-sub{margin-top:26px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px}
.hero-sub .claim{font-family:"Big Shoulders Display","Archivo",sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(20px,2.6vw,32px);line-height:1}
.hero-sub .claim b{color:var(--jade);font-weight:800}
.hero-logo{width:min(30vw,210px);filter:drop-shadow(0 0 40px rgba(79,211,164,.22))}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;margin-top:40px}
.hero-foot{
  margin-top:clamp(48px,7vw,88px);border-top:1px solid var(--hair);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.hero-foot div{padding:24px 0 30px;padding-right:24px}
.hero-foot div + div{border-left:1px solid var(--hair);padding-left:28px}
.hero-foot dt{font-family:"Chivo Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin-bottom:8px}
.hero-foot dd{margin:0;font-family:"Chivo Mono",monospace;font-size:15px;letter-spacing:.04em;color:var(--paper)}
.hero-foot dd b{color:var(--jade);font-weight:500}
@media (max-width:900px){
  .hero{padding-top:130px}
  .hero-top{grid-template-columns:1fr;gap:24px}
  .hero-logo{width:120px;height:auto;order:-1}
  .hero-foot{grid-template-columns:1fr}
  .hero-foot div + div{border-left:0;border-top:1px solid var(--hair);padding-left:0}
}

/* ---------------------------------------------------------------- Seitenkopf */
.phead{padding:170px 0 0;position:relative}
.phead .crumb{font-family:"Chivo Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.phead .crumb a:hover{color:var(--jade)}
.phead h1{margin:18px 0 0}
.phead .lead{margin-top:26px;color:var(--grey)}
.phead-line{margin-top:calc(var(--sp)*.6);border-top:1px solid var(--hair)}

/* ---------------------------------------------------------------- Zeilen */
.rows{border-top:1px solid var(--hair)}
.row{
  display:grid;grid-template-columns:minmax(150px,20%) minmax(0,1fr) auto;gap:28px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--hair);
}
.row dt,.row .k{font-family:"Chivo Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.row dd,.row .v{margin:0;font-size:18px;color:var(--paper)}
.row .v small{display:block;color:var(--grey);font-size:15px;margin-top:4px}
.row .t{font-family:"Chivo Mono",monospace;font-size:17px;letter-spacing:.04em;color:var(--paper);white-space:nowrap}
.row.now .k,.row.now .t,.row.now .v{color:var(--jade)}
.row .tag{font-family:"Chivo Mono",monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#04120C;background:var(--jade);padding:3px 8px;margin-left:12px;vertical-align:2px}
.ph{color:#FFC24D;font-family:"Chivo Mono",monospace;font-size:15px;letter-spacing:.04em}
@media (max-width:760px){
  .row{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .row .t{font-size:20px}
}

/* Große Navigationszeilen (Startseite) */
.index-row{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr) auto;gap:28px;align-items:center;
  padding:34px 0;border-bottom:1px solid var(--hair);position:relative;transition:padding .5s var(--ease)
}
.index-row .t2{font-size:clamp(30px,4.6vw,60px)}
.index-row p{color:var(--grey);margin:0;font-size:16.5px;max-width:38ch}
.index-row .arw{color:var(--grey);transition:transform .5s var(--ease),color .3s}
.index-row:hover .arw{transform:translateX(10px);color:var(--jade)}
.index-row:hover .t2{color:var(--jade)}
.index-row .t2{transition:color .35s}
.index-row::before{
  content:"";position:absolute;left:-24px;right:-24px;top:0;bottom:0;z-index:-1;
  background:linear-gradient(90deg,rgba(79,211,164,.07),transparent 70%);
  opacity:0;transition:opacity .45s var(--ease)
}
.index-row:hover::before{opacity:1}
@media (max-width:760px){
  .index-row{grid-template-columns:1fr auto;gap:10px 18px;padding:26px 0}
  .index-row p{grid-column:1/-1}
}

/* ---------------------------------------------------------------- Statement */
.statement{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}
.statement p{color:var(--grey);font-size:17.5px}
.statement .mono{display:block;margin-bottom:20px}
@media (max-width:900px){.statement{grid-template-columns:1fr;gap:28px}}

/* ---------------------------------------------------------------- Preis */
.price-lead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,6vw,80px);align-items:center}
.price-num{
  font-family:"Big Shoulders Display","Archivo",sans-serif;font-weight:800;line-height:.78;
  font-size:clamp(150px,26vw,340px);color:var(--jade);
  text-shadow:0 0 60px rgba(79,211,164,.28);
}
.price-num sup{font-size:.22em;vertical-align:top;line-height:1;margin-left:.06em;text-shadow:none}
.price-unit{font-family:"Chivo Mono",monospace;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-top:10px}
.price-alt{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--hair);padding-top:28px;margin-top:calc(var(--sp)*.5)
}
.price-alt .num{font-family:"Big Shoulders Display","Archivo",sans-serif;font-weight:800;font-size:clamp(44px,6vw,78px);line-height:1}
@media (max-width:760px){.price-lead{grid-template-columns:1fr;gap:12px}}

/* ---------------------------------------------------------------- Rig-Grafik */
.rig{position:relative;display:grid;grid-template-columns:1fr 22%;gap:6%;align-items:end;padding-bottom:26px}
.rig-mon{display:flex;flex-direction:column;align-items:center;width:100%}
.rig-screen{
  width:100%;aspect-ratio:16/9;background:linear-gradient(168deg,#0C1312,#050807);
  border:1px solid var(--hair);display:flex;align-items:flex-end;gap:5px;padding:18px;
}
.rig-screen b{display:block;flex:1;background:linear-gradient(180deg,var(--mint),var(--jade));opacity:.55;animation:eq 1.5s ease-in-out infinite alternate}
@keyframes eq{from{height:8%}to{height:82%}}
.rig-stand{width:10%;height:24px;background:#141A19}
.rig-foot{width:34%;height:6px;background:#141A19}
.rig-case{position:relative;width:100%;aspect-ratio:.44;background:linear-gradient(160deg,#111716,#070A0A);border:1px solid var(--hair)}
.rig-case .lightbar{position:absolute;left:16%;top:8%;bottom:8%;width:8%;background:linear-gradient(180deg,var(--mint),var(--jade));opacity:.7;filter:blur(1px)}
.rig-fans{position:absolute;right:12%;top:10%;bottom:10%;width:44%;display:flex;flex-direction:column;justify-content:space-around;align-items:center}
.rig-fans i{width:74%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(79,211,164,.3);position:relative}
.rig-fans i::after{content:"";position:absolute;inset:16%;border-radius:50%;border-top:1.5px solid var(--jade);animation:spin 3.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.rig-base{position:absolute;left:4%;right:4%;bottom:0;height:1px;background:var(--hair)}

/* ---------------------------------------------------------------- Streifen */
.strip{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 26px;padding:26px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.strip span{font-family:"Chivo Mono",monospace;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper)}
.strip span + span::before{content:"/";color:var(--jade);margin-right:26px}

/* ---------------------------------------------------------------- Status */
.status{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 26px}
.state .dot{width:.26em;height:.26em;margin-right:.3em}
.status .state{font-family:"Big Shoulders Display","Archivo",sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(28px,4.6vw,58px);line-height:1}
.status .state.open{color:var(--jade)}
.status .state.shut{color:#FF6B6B}
.status .note{font-family:"Chivo Mono",monospace;font-size:13px;letter-spacing:.1em;color:var(--grey)}
.status .clock{font-family:"Chivo Mono",monospace;font-size:13px;letter-spacing:.12em;color:var(--paper);margin-left:auto}
.dot{width:9px;height:9px;border-radius:50%;background:var(--jade);display:inline-block;margin-right:10px;vertical-align:.08em}
.dot.shut{background:#FF6B6B}

/* ---------------------------------------------------------------- Nächste Seite */
.next a{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:52px 0;border-top:1px solid var(--hair)}
.next .lbl{font-family:"Chivo Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--jade);display:block;margin-bottom:12px}
.next .ttl{transition:color .35s}
.next a:hover .ttl{color:var(--jade)}
.next .arw{color:var(--grey);transition:transform .5s var(--ease),color .3s}
.next a:hover .arw{transform:translateX(10px);color:var(--jade)}

/* ---------------------------------------------------------------- Footer */
footer{border-top:1px solid var(--hair);padding:64px 0 40px}
.f-grid{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr));gap:40px}
.f-brand img{width:52px;margin-bottom:16px}
.f-brand .d{font-size:30px}
.f-brand p{margin-top:10px;font-family:"Chivo Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
footer h4{font-family:"Chivo Mono",monospace;font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--jade);margin:0 0 16px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer li{color:var(--grey);font-size:15px}
footer li .t{font-family:"Chivo Mono",monospace;font-size:14px;color:var(--paper)}
footer a:hover{color:var(--jade)}
.f-end{margin-top:52px;padding-top:22px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.f-end span{font-family:"Chivo Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
@media (max-width:900px){.f-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:560px){.f-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- Rechtstexte */
.legal h2{font-family:"Chivo Mono",monospace;font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--jade);margin:44px 0 12px}
.legal h2:first-child{margin-top:0}
.legal p{color:#BAC7C2;max-width:70ch}

/* ---------------------------------------------------------------- Reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

@media (max-width:900px){
  .nav-links{display:none}
  .burger{display:grid}
  .nav-right .cta{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}