:root{
  --primary:#18E0E8;
  --accent:#FFA31A;
  --bg:#0b1324; /* dark navy */
  --card:rgba(21,26,34,0.55);
  --border:rgba(255,255,255,0.10);
  --text:#ffffff;
  --muted:#9aa4af;
  --shadow:rgba(24,224,232,0.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",Inter,system-ui,-apple-system,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 50% 0%, rgba(26,38,64,0.85), rgba(7,13,26,1)),
    radial-gradient(700px 500px at 20% 30%, rgba(24,224,232,0.08), transparent 60%),
    radial-gradient(700px 500px at 80% 55%, rgba(255,163,26,0.06), transparent 60%);
  background-color:var(--bg);
}

body.loading{overflow:hidden}

/* LOADER */
#loader{
  position:fixed; inset:0;
  z-index:99999;
  background: radial-gradient(circle, #1a2640, #070d1a);
  display:flex;
  opacity:1; visibility:visible;
  transition: opacity 1s ease, visibility 1s ease;
}
#loader.hidden{opacity:0; visibility:hidden}
.loader-content{position:absolute; inset:0; display:grid; place-items:center;}
.loader-inner{display:flex; flex-direction:column; align-items:center; gap:16px; width:320px; text-align:center;}
.loader-inner img{
  width:120px; height:auto;
  filter: drop-shadow(0 0 20px rgba(24,224,232,0.65)) drop-shadow(0 0 40px rgba(255,163,26,0.35));
  animation:pulse 2s infinite ease-in-out;
}
#loading-text{height:1.4em; line-height:1.4em; white-space:nowrap; overflow:hidden; font-size:14px; letter-spacing:.6px; color:var(--muted); opacity:.95;}
@keyframes pulse{0%,100%{transform:scale(1); opacity:.9}50%{transform:scale(1.06); opacity:1}}

/* Paw background */
#paw-background{position:fixed; inset:0; z-index:1; pointer-events:auto; overflow:hidden;}
.paw-bg{position:absolute; font-size:22px; opacity:.10; cursor:pointer; transition: transform .25s ease, filter .25s ease, opacity .25s ease; will-change:transform;}
.paw-bg:hover{
  opacity:.55;
  transform:scale(1.5) rotate(10deg);
  filter: drop-shadow(0 0 8px var(--primary)) drop-shadow(0 0 18px var(--accent)) drop-shadow(0 0 32px var(--primary));
}

/* Orbs */
.orbs{position:fixed; inset:0; z-index:0; pointer-events:none}
.orb{position:absolute; border-radius:999px; filter:blur(60px); opacity:.65}
.orb-1{width:420px;height:420px;left:40px;top:60px;background:rgba(24,224,232,0.10)}
.orb-2{width:360px;height:360px;right:-60px;top:45%;background:rgba(255,163,26,0.08)}
.orb-3{width:320px;height:320px;left:33%;bottom:40px;background:rgba(24,224,232,0.06)}

/* Layering */
body > *:not(#loader):not(#paw-background):not(.orbs){position:relative; z-index:2}

/* Layout */
.section{padding:90px 18px}
.container{max-width:1100px; margin:0 auto}
.section-alt{background: linear-gradient(180deg, transparent, rgba(26,38,64,0.25), transparent);}
.section-head{text-align:center; margin-bottom:40px}
.section-head .h2{
  margin:0 0 10px;
  font-size:clamp(28px,4vw,44px);
  letter-spacing:-0.02em;
  text-align:center;
  line-height:1.1;
  color: var(--text) !important;
  text-shadow: none !important;
}
.section-head .h2 span{
  color: var(--primary) !important;
  text-shadow: 0 0 14px rgba(24,224,232,0.28) !important;
}
.section:nth-of-type(even) .section-head .h2 span{
  color: var(--accent) !important;
  text-shadow: 0 0 14px rgba(255,163,26,0.26) !important;
}

.muted{color:var(--muted)}
.small{font-size:13px}

.grid{display:grid; gap:18px}
.grid-2{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1024px){
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Hero */
.hero{min-height:100vh; display:flex; align-items:center}
.hero-inner{width:100%; text-align:center}
.hero-logo img{
  width:128px; height:128px; max-width:48vw;
  filter: drop-shadow(0 0 30px rgba(24,224,232,0.55)) drop-shadow(0 0 50px rgba(255,163,26,0.25));
}
.hero-title{
  margin:10px 0 0;
  font-size:clamp(64px,12vw,120px);
  font-weight:900;
  letter-spacing:-0.04em;
  line-height:0.95;

  color:transparent;
  background-image: linear-gradient(
    90deg,
    var(--primary) 0%,
    var(--primary) 15%,
    var(--accent) 50%,
    var(--primary) 85%,
    var(--primary) 100%
  );

  -webkit-background-clip:text;
  background-clip:text;
}

.hero-subtitle{margin-top:8px; text-transform:uppercase; letter-spacing:.35em; font-weight:300; color:var(--muted);}
.hero-tagline{margin:22px auto 0; max-width:720px; font-size:clamp(16px,2.2vw,19px); line-height:1.6; color:rgba(255,255,255,0.82);}

.hero-tagline p {
  margin-top: 1.2rem;
  line-height: 1.6;
  opacity: 0.9;
}

.hero-highlight {
  margin-top: 2rem;
  font-weight: 700;        /* fett */
  font-size: 1.4rem;       /* größer */
  line-height: 1.5;
}



.gradient-animate{background-size:220% 220%; animation: gradientMove 6s ease infinite}
@keyframes gradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.animate-float{animation: float 3.2s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* Base card */
.glass-card{
  background:var(--card);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  border-radius:22px;
  padding:22px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.glass-card:hover{
  transform: translateY(-6px);
  border-color: rgba(24,224,232,0.22);
  box-shadow: 0 0 34px rgba(24,224,232,0.14);
}

/* ✅ Servers (previous screenshot style) */
.server-card{
  padding:24px 26px;
}
.server-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.server-left{
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-width:0;
}
.server-ico{
  width:52px;height:52px;
  border-radius:16px;
  background: rgba(24,224,232,0.08);
  display:grid; place-items:center;
  flex:0 0 auto;
  font-size:22px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.server-title{
  min-width:0;
}
.server-name{
  margin:0;
  font-size:22px;
  font-weight:900;
  letter-spacing:-0.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.server-sub{
  margin:4px 0 0;
  font-size:15px;
  color:rgba(154,164,175,0.95);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.server-status{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(154,164,175,0.95);
  font-size:15px;
  white-space:nowrap;
  padding-top:2px;
}
.dot{
  width:10px;height:10px;border-radius:999px;
}
.status-online{background:var(--primary); box-shadow:0 0 12px rgba(24,224,232,0.55)}
.status-offline{background:#6b7280}
.status-away{background:var(--accent); box-shadow:0 0 12px rgba(255,163,26,0.45)}

/* Micro-Animation: Pulsing dot for Online/In-Game */
.dot-pulse{
  position: relative;
}
.dot-pulse::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  background: currentColor;
  opacity: 0.0;
  transform: scale(0.55);
  animation: dotPulse 1.35s ease-out infinite;
}
/* Use the same color as the dot */
.status-online.dot-pulse{ color: var(--primary); }
.status-away.dot-pulse{ color: var(--accent); }

@keyframes dotPulse{
  0%{ opacity: .18; transform: scale(0.55); }
  70%{ opacity: 0; transform: scale(1.35); }
  100%{ opacity: 0; transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce){
  .dot-pulse::after{ animation: none; }
}

/* info row like screenshot */
.server-info{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:15px;
}
.server-info-left{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(154,164,175,0.95);
}
.server-info-left .paw{opacity:0.8}
.server-link{
  color:var(--primary);
  text-decoration:none;
  font-weight:800;
}
.server-link:hover{
  text-decoration:underline;
}

/* Partners (keep your wide cards) */
.partner-card{border-radius: 32px; padding: 64px 72px; min-height: 280px; display:flex; justify-content:center; align-items:center;}
.partner-card img{max-width:240px; max-height:660px; object-fit:contain; opacity:.78; filter:grayscale(100%); transition: opacity .3s ease, filter .3s ease, transform .3s ease;}
.partner-card:hover img{opacity:1; filter:grayscale(0%); transform:scale(1.1)}
@media (max-width:768px){.partner-card{padding:48px 32px; min-height:240px;}}

/* Games */
.games-grid{display:grid; gap:22px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width:1100px; margin:0 auto;}
@media (min-width:1024px){.games-grid{grid-template-columns: repeat(3, minmax(0, 1fr));}}
.game-card{display:block; text-decoration:none; color:inherit; border-radius:18px; overflow:hidden; background: linear-gradient(180deg, rgba(20,25,34,0.92), rgba(15,19,26,0.92)); border:1px solid rgba(255,255,255,0.035); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;}
.game-card:hover{transform: translateY(-8px) scale(1.02); box-shadow: 0 0 28px rgba(24,224,232,0.18); border-color: rgba(24,224,232,0.18);}
.game-cover{width:100%; aspect-ratio:16/9; object-fit:cover; display:block;}
.game-meta{padding:14px 16px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.game-name{font-weight:700}
.game-tag{font-size:12px; color:var(--accent); opacity:.9; white-space:nowrap}

/* Footer */
.footer{padding:44px 18px; border-top:1px solid rgba(255,255,255,0.08); background:rgba(0,0,0,0.18);}
.footer-inner{display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:space-between;}
@media (min-width:768px){.footer-inner{flex-direction:row}}
.made-with{display:flex; align-items:center; gap:8px; color:var(--muted)}
.heart{color:#ff4d6d; font-weight:900; animation: heartPulse 1.2s infinite ease-in-out}
@keyframes heartPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.footer-links{display:flex; gap:18px}
.hover-primary:hover{color:var(--primary)}


/* ================= Team (from members.json) ================= */
/* 3D Flip Card */
.team-card{
  position: relative;
  padding: 0;
  text-decoration: none;
  color: inherit;
  perspective: 1100px;
  overflow: hidden;
}

.team-card-inner{
  position: relative;
  width: 100%;
  min-height: 184px;
  transform-style: preserve-3d;
  transition: transform .65s ease;
}

.team-card-face{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px;
  overflow: hidden;
}

.team-card-front{
  transform: rotateY(0deg);
}

.team-card-back{
  transform: rotateY(180deg);
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

@media (hover:hover) and (pointer:fine){
  .team-card:hover .team-card-inner{
    transform: rotateY(180deg);
  }
}

.team-card:focus-visible{
  outline: none;
}

.team-card:focus-visible .team-card-inner,
.team-card:focus-within .team-card-inner{
  transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce){
  .team-card-inner{ transition: none; }
}

/* Name immer weiß, nie unterstrichen */
.team-name{
  color: #ffffff !important;
  text-decoration: none !important;
}

/* auch beim Hover / Focus */
.team-card:hover .team-name,
.team-card:focus .team-name{
  color: #ffffff !important;
  text-decoration: none !important;
}

/* falls Browser visited-Styles setzt */
.team-card:visited .team-name{
  color: #ffffff !important;
}

/* ===== TEAM: kleinere Profilbilder in den Kacheln ===== */

.team-mini-wrap{
  flex: 0 0 auto;
  width: 86px;
  height: 86px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  box-shadow: none;
  overflow: visible;
}

/* Profilbild */
.team-mini-wrap img,
.team-mini-wrap iframe{
  width: 72px;
  height: 72px;
  border-radius: 14px;
  object-fit: cover;

  box-shadow: none;
  background: transparent;
}

/* Steam iframe fix */
.team-mini{
  border: none;
}

/* Textbereich */
.team-meta{
  flex: 1;
  min-width: 0;
}

/* Name */
.team-name{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rolle + Status */
.team-sub{
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Pills */
.role-pill,
.status-pill{
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Status Dot */
.status-pill .dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Hover – nur leicht */
.team-card:hover{
  transform: translateY(-3px);
  border-color: rgba(24,224,232,0.35);
}

.team-mini{
  width: 200px;
  height: 76px;
  border: 0;
  display:block;
  background:#0b0f14;
  pointer-events:none; /* click goes to the card */
}

.team-meta{
  flex:1;
  min-width:0;
}
.team-name{
  margin:0;
  font-size:16px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.team-sub{
  margin:4px 0 0;
  font-size:12px;
  color:var(--muted);
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.role-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:11px;
}
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border-radius:999px;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  font-size:11px;
  color:rgba(154,164,175,0.98);
}
.status-pill .dot{width:8px;height:8px}

/* === Back side content === */
.team-back-top{display:flex; flex-direction:column; gap:2px;}
.team-back-title{font-weight:900; font-size:16px; color:#fff;}
.team-back-sub{font-size:12px; opacity:.85;}

.team-back-list{display:flex; flex-direction:column; gap:8px; width:100%;}
.team-back-row{display:flex; align-items:center; justify-content:space-between; gap:14px;}
.team-back-key{font-size:11px; color:rgba(154,164,175,0.95);}
.team-back-val{font-size:11px; color:#fff; font-weight:800; max-width:60%; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.team-back-link{color:var(--primary);}

.team-back-cta{margin-top:auto; display:flex; justify-content:flex-end; width:100%;}
.team-back-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(24,224,232,0.10);
  border: 1px solid rgba(24,224,232,0.24);
  color: #eafcff;
  font-weight:900;
  font-size:12px;
  box-shadow: 0 0 22px rgba(24,224,232,0.12);
}

.team-card:hover{transform: translateY(-3px); border-color: rgba(24,224,232,0.35);} 

/* ================= EASTER EGG ================= */
.easter{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(30px);
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(15,19,26,0.82);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
  box-shadow: 0 0 26px rgba(24,224,232,0.18);
  z-index: 9999;
}

.easter.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

body.cat-mode .glass-card{
  box-shadow: 0 0 34px rgba(24,224,232,0.18);
}

body.cat-mode .paw-bg{
  opacity: .18;
}

/* ================= LEGAL PAGES ================= */

.legal-page{
  max-width: 720px;
}

.legal-title{
  font-size: clamp(32px, 5vw, 44px);
  margin-bottom: 24px;
  text-align: center;
  color: var(--primary);
  text-shadow: 0 0 14px rgba(24,224,232,0.35);
}

.legal-page h2{
  margin-top: 28px;
  margin-bottom: 10px;
  font-size: 20px;
}

.legal-page p,
.legal-page li{
  color: var(--muted);
  line-height: 1.7;
}

.legal-page a{
  color: var(--primary);
  text-decoration: none;
}

.legal-page a:hover{
  text-decoration: underline;
}

.legal-note{
  margin-top: 24px;
  font-size: 13px;
  opacity: 0.8;
}