:root{--txt:#fff;--mut:rgba(255,255,255,.68);--line:rgba(255,255,255,.14);--panel:rgba(10,10,20,.62);--red:#e63946;--org:#ff9f1c;--green:#25d366;--r:22px;--shadow:0 24px 60px rgba(0,0,0,.55)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#050509;color:#fff;font-family:system-ui,-apple-system,Segoe UI,sans-serif}a{text-decoration:none;color:inherit}.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:radial-gradient(circle at top,#1b1536 0,#070713 48%,#020208 100%)}.bg i{position:absolute;inset:-10%;filter:blur(20px);opacity:.8}.bg i:nth-child(1){background:radial-gradient(circle at 20% 80%,rgba(230,57,70,.25),transparent 45%)}.bg i:nth-child(2){background:radial-gradient(circle at 75% 30%,rgba(255,159,28,.2),transparent 50%)}.bg i:nth-child(3){background:radial-gradient(circle at 55% 55%,rgba(120,90,255,.16),transparent 55%)}header{position:sticky;top:0;z-index:5;display:flex;gap:18px;align-items:center;justify-content:space-between;padding:14px clamp(16px,4vw,42px);background:rgba(5,5,12,.72);border-bottom:1px solid rgba(255,255,255,.09);backdrop-filter:blur(18px)}.brand{display:flex;gap:12px;align-items:center}.brand b{width:42px;height:42px;border-radius:999px;background:linear-gradient(135deg,var(--red),var(--org));display:grid;place-items:center;color:#050509}.brand span{font-weight:900;letter-spacing:.18em}.brand small{display:block;color:var(--mut);font-size:.72rem;text-transform:uppercase}nav{display:flex;gap:8px;flex-wrap:wrap}nav a,.user a{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--mut);padding:8px 9px;border-radius:999px}.user{display:grid;justify-items:end}.user small{color:var(--mut)}main{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:34px 18px 70px}.card{border:1px solid var(--line);background:var(--panel);border-radius:var(--r);box-shadow:var(--shadow);backdrop-filter:blur(16px);padding:20px}.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-bottom:16px}.k{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--org);margin-bottom:8px}h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;margin:0;letter-spacing:.11em;text-transform:uppercase}h2,h3{margin:0 0 12px;text-transform:uppercase;letter-spacing:.09em}p{color:var(--mut);line-height:1.6}.muted{color:var(--mut)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.stat{border:1px solid var(--line);background:rgba(0,0,0,.25);border-radius:18px;padding:14px}.stat strong{font-size:1.4rem;display:block}.avatar{width:42px;height:42px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),var(--org));color:#050509;font-weight:900}.person{display:flex;gap:12px;align-items:center}.dot{width:10px;height:10px;border-radius:999px;background:var(--green);box-shadow:0 0 16px rgba(37,211,102,.8);display:inline-block;margin-right:7px}label{display:block;color:var(--mut);font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;margin:0 0 6px}.row{margin-bottom:12px}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.35);color:#fff;padding:12px;font:inherit}button,.btn{border:0;cursor:pointer;display:inline-flex;border-radius:999px;padding:12px 16px;background:linear-gradient(130deg,var(--red),var(--org));color:#050509;font-weight:900;letter-spacing:.13em;text-transform:uppercase;font-size:.78rem}.outline{background:rgba(0,0,0,.25);color:#fff;border:1px solid var(--line)}.danger{background:linear-gradient(130deg,#b00020,#ff5964);color:#fff}.green{background:linear-gradient(130deg,#25d366,#a3ff6f)}.table{overflow:auto;border:1px solid var(--line);border-radius:18px;background:var(--panel)}table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}th{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--mut)}.badge{border:1px solid var(--line);border-radius:999px;padding:4px 9px;background:rgba(0,0,0,.28);font-size:.72rem;text-transform:uppercase}.open{border-color:rgba(37,211,102,.45);color:#aaffc7}.flash{border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:14px;background:var(--panel)}.success{border-color:rgba(37,211,102,.4)}.error{border-color:rgba(230,57,70,.5)}.login{min-height:100vh;display:grid;place-items:center;position:relative;z-index:1;padding:20px}.login .card{width:min(460px,100%)}.navbtn{display:none}.qrbox{font-size:.8rem;word-break:break-all;background:#fff;color:#000;padding:16px;border-radius:16px}@media(max-width:900px){header{align-items:flex-start;flex-direction:column}.navbtn{display:inline-flex;background:rgba(0,0,0,.25);color:#fff;border:1px solid var(--line)}nav{display:none;flex-direction:column;width:100%}nav.show{display:flex}.user{justify-items:start}.hero,.grid,.grid2,.stats{grid-template-columns:1fr}}
/* ROXX Website Header im Portal */
header{
  position:sticky;
  top:0;
  z-index:20;
  width:100%;
  padding:0;
  background:rgba(5,5,12,.78);
  border-bottom:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(18px);
}

.nav-inner{
  max-width:1180px;
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.logo-image img{
  height:58px;
  width:auto;
  display:block;
}

header nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:18px;
}

header nav li{
  margin:0;
  padding:0;
}

header nav a{
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(255,255,255,.72);
}

.nav-social{
  display:flex;
  align-items:center;
  gap:10px;
}

.social-link{
  width:38px;
  height:38px;
  border-radius:999px;
  display:grid;
  place-items:center;
}

.social-link svg{
  width:20px;
  height:20px;
  fill:#fff;
}

.social-link.facebook{
  background:#1877f2;
}

.social-link.instagram{
  background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4);
}

.menu-toggle{
  display:none;
}

.mobile-menu{
  display:none;
}

/* Footer */
.site-footer{
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:60px auto 0;
  padding:28px 18px;
  color:#fff;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(10,10,20,.48);
  border-radius:26px;
  padding:24px;
  backdrop-filter:blur(16px);
}

.footer-logo-mark{
  font-weight:900;
  letter-spacing:.18em;
}

.footer-logo-sub,
.footer-note{
  color:rgba(255,255,255,.65);
}

.footer-links{
  display:flex;
  gap:16px;
}

.footer-bottom{
  text-align:center;
  color:rgba(255,255,255,.55);
  margin-top:18px;
  font-size:.85rem;
}

/* Mobile */
@media(max-width:900px){
  header nav{
    display:none;
  }

  .nav-social{
    display:none;
  }

  .menu-toggle{
    display:flex;
    flex-direction:column;
    gap:5px;
    background:transparent;
    border:1px solid rgba(255,255,255,.18);
    padding:10px;
    border-radius:12px;
  }

  .menu-toggle span{
    width:24px;
    height:2px;
    background:#fff;
    display:block;
  }

  .mobile-menu{
    display:none;
    position:absolute;
    left:18px;
    right:18px;
    top:86px;
    padding:16px;
    border-radius:20px;
    background:rgba(10,10,20,.95);
    border:1px solid rgba(255,255,255,.14);
  }

  .mobile-menu.is-open{
    display:grid;
    gap:12px;
  }

  .footer-inner{
    flex-direction:column;
    text-align:center;
  }
    }
.logout-link{
  color:#050509 !important;
  background:linear-gradient(130deg,#e63946,#ff9f1c);
  padding:9px 13px;
  border-radius:999px;
  font-weight:900;
}
header nav a.logout-link{
  color:#050509 !important;
  background:linear-gradient(130deg,#e63946,#ff9f1c);
  padding:9px 14px;
  border-radius:999px;
  font-weight:900;
}
/* === ROXX CHECK-IN LOGIN UPGRADE === */
.checkin-login-page{min-height:100vh;overflow-x:hidden;background:#050509}
.login-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(circle at 50% 0%,rgba(28,24,58,.9),transparent 42%),radial-gradient(circle at 50% 100%,#050509,#050509)}
.login-bg-stars{position:absolute;inset:0;opacity:.55;background:radial-gradient(circle at 12% 20%,rgba(255,255,255,.16) 0 1px,transparent 2px),radial-gradient(circle at 38% 34%,rgba(255,255,255,.10) 0 1px,transparent 2px),radial-gradient(circle at 74% 26%,rgba(255,255,255,.14) 0 1px,transparent 2px),radial-gradient(circle at 88% 68%,rgba(255,255,255,.09) 0 1px,transparent 2px);background-size:220px 220px;animation:loginStars 18s linear infinite}
@keyframes loginStars{from{transform:translateY(0)}to{transform:translateY(-120px)}}
.login-bg-beam{position:absolute;width:42vw;height:130vh;top:-15vh;opacity:.28;filter:blur(18px);transform-origin:top center;background:linear-gradient(to bottom,rgba(255,159,28,.34),rgba(230,57,70,.10),transparent 72%)}
.beam-one{left:10%;transform:rotate(22deg);animation:beamMoveOne 7s ease-in-out infinite alternate}
.beam-two{right:8%;transform:rotate(-18deg);background:linear-gradient(to bottom,rgba(230,57,70,.30),rgba(255,159,28,.12),transparent 72%);animation:beamMoveTwo 8s ease-in-out infinite alternate}
@keyframes beamMoveOne{from{transform:rotate(18deg) translateX(-2vw)}to{transform:rotate(26deg) translateX(2vw)}}
@keyframes beamMoveTwo{from{transform:rotate(-14deg) translateX(2vw)}to{transform:rotate(-24deg) translateX(-2vw)}}
.login-bg-glow{position:absolute;width:42vw;height:42vw;border-radius:50%;filter:blur(36px);opacity:.32}
.glow-one{left:-12vw;bottom:-12vw;background:#e63946;animation:glowPulse 5s ease-in-out infinite alternate}
.glow-two{right:-12vw;top:-10vw;background:#ff9f1c;animation:glowPulse 6s ease-in-out infinite alternate-reverse}
@keyframes glowPulse{from{transform:scale(.92);opacity:.20}to{transform:scale(1.08);opacity:.38}}
.checkin-login-wrap{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:34px 18px}
.checkin-login-card{width:min(520px,100%);border:1px solid rgba(255,255,255,.16);background:rgba(10,10,20,.62);border-radius:34px;padding:34px 28px 26px;box-shadow:0 34px 90px rgba(0,0,0,.62),0 0 50px rgba(230,57,70,.13),0 0 50px rgba(255,159,28,.10);backdrop-filter:blur(20px) saturate(125%);text-align:center;animation:loginCardIn .65s ease both}
@keyframes loginCardIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.checkin-brand{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;margin-bottom:16px}
.checkin-logo{width:min(210px,70vw);height:auto;display:block;filter:drop-shadow(0 18px 34px rgba(0,0,0,.55))}
.checkin-badge{display:inline-flex;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);border-radius:999px;padding:7px 12px;font-size:.72rem;letter-spacing:.20em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.checkin-kicker{color:#ff9f1c;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;font-weight:900}
.checkin-login-card h1{margin:8px 0 10px;font-size:clamp(2.4rem,9vw,4.4rem);line-height:.95;letter-spacing:.14em;text-transform:uppercase}
.checkin-copy{max-width:390px;margin:0 auto 18px;color:rgba(255,255,255,.72);line-height:1.55}
.checkin-error{margin:0 0 16px;border:1px solid rgba(230,57,70,.46);background:rgba(230,57,70,.10);color:#fff;border-radius:16px;padding:12px 14px}
.checkin-form{text-align:left}.field-label{display:block;margin:14px 0 7px;color:rgba(255,255,255,.68);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.checkin-field{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.30);border-radius:18px;padding:0 12px;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.checkin-field:focus-within{border-color:rgba(255,159,28,.65);box-shadow:0 0 0 4px rgba(255,159,28,.10);background:rgba(0,0,0,.42)}
.field-icon{color:#ff9f1c;font-weight:900}.checkin-field input{width:100%;border:0!important;background:transparent!important;color:#fff;padding:14px 0;outline:0}.checkin-field input::placeholder{color:rgba(255,255,255,.38)}
.password-toggle{border:0;background:transparent;color:rgba(255,255,255,.75);padding:6px;cursor:pointer;box-shadow:none}
.remember-row{display:flex;align-items:center;gap:10px;margin:14px 0 18px;color:rgba(255,255,255,.68);font-size:.9rem}.remember-row input{width:auto}
.checkin-submit{width:100%;justify-content:center;border:0;border-radius:999px;padding:15px 18px;color:#050509;background:linear-gradient(130deg,#e63946,#ff9f1c);font-weight:1000;letter-spacing:.18em;text-transform:uppercase;box-shadow:0 18px 36px rgba(0,0,0,.45),0 0 38px rgba(230,57,70,.22);transition:transform .18s ease,box-shadow .18s ease}
.checkin-submit:hover{transform:translateY(-2px);box-shadow:0 24px 46px rgba(0,0,0,.55),0 0 48px rgba(255,159,28,.28)}
.checkin-features{margin-top:20px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.checkin-features span{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);border-radius:999px;padding:7px 10px;color:rgba(255,255,255,.68);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase}
.checkin-footer-note{margin-top:18px;color:rgba(255,255,255,.48);font-size:.82rem}
@media(max-width:560px){.checkin-login-card{padding:28px 18px 22px;border-radius:28px}.checkin-logo{width:min(180px,72vw)}.checkin-features{flex-direction:column}}

