:root{--site-bg:#050b13;--site-bg2:#071522;--site-card:rgba(15,31,48,.88);--site-line:rgba(255,255,255,.12);--site-text:#f7fbff;--site-muted:#a9bbcc;--site-cyan:#55e2ff;--site-green:#8df7a5;--site-violet:#a98cff;--site-radius:24px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 10% 0,rgba(85,226,255,.18),transparent 32rem),radial-gradient(circle at 90% 10%,rgba(169,140,255,.15),transparent 30rem),linear-gradient(150deg,var(--site-bg),var(--site-bg2) 55%,#050810);color:var(--site-text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6}.site-wrap{width:min(1180px,calc(100% - 32px));margin:auto}.site-header{position:sticky;top:0;z-index:50;background:rgba(5,11,19,.86);backdrop-filter:blur(18px);border-bottom:1px solid var(--site-line)}.site-nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}.site-brand{color:#fff;text-decoration:none;font-weight:950;font-size:1.08rem}.site-brand span{color:var(--site-violet)}.site-nav nav{display:flex;gap:8px;flex-wrap:wrap}.site-nav nav a{color:var(--site-muted);text-decoration:none;font-weight:800;padding:10px 12px;border-radius:12px}.site-nav nav a:hover,.site-nav nav a.active{color:#fff;background:rgba(255,255,255,.07)}.site-hero{padding:76px 0 34px}.site-kicker{color:var(--site-cyan);font-weight:950;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}.site-hero h1{font-size:clamp(40px,7vw,76px);line-height:1.02;letter-spacing:-.045em;margin:14px 0}.site-hero h1 span{background:linear-gradient(90deg,var(--site-cyan),var(--site-green));-webkit-background-clip:text;color:transparent}.site-hero p{max-width:850px;color:var(--site-muted);font-size:1.15rem}.site-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:20px 0}.site-section-head h2{margin:4px 0;font-size:clamp(28px,4vw,44px)}.site-footer{border-top:1px solid var(--site-line);padding:35px 0;color:var(--site-muted);background:rgba(0,0,0,.16)}@media(max-width:820px){.site-nav nav{display:none}.site-hero{padding-top:50px}}

/* =========================================================
   VargaTech Palworld – einheitliches Premium-Designsystem
   Kompaktes Branding statt Werbebanner im Navigationskopf
   ========================================================= */
:root{
  --site-header-h:78px;
  --site-container:1240px;
  --site-panel:rgba(12,27,42,.82);
  --site-panel-strong:rgba(13,31,49,.96);
  --site-cyan:#55e2ff;
  --site-green:#8df7a5;
  --site-violet:#9b87ff;
  --site-text:#f7fbff;
  --site-muted:#a9bbcc;
  --site-line:rgba(255,255,255,.11);
}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap,.site-wrap{width:min(var(--site-container),calc(100% - 40px));margin-inline:auto}
.header,.top,.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(4,11,19,.82)!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 10px 35px rgba(0,0,0,.18);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
}
.nav,.site-nav{
  min-height:var(--site-header-h)!important;
  display:flex;align-items:center;justify-content:space-between;
  gap:28px!important;padding-block:10px!important;
}
.brand,.site-brand{
  display:inline-flex!important;align-items:center;gap:12px!important;
  min-width:max-content;text-decoration:none!important;color:#fff!important;
  flex:0 0 auto;
}
.brand-emblem{
  width:48px;height:48px;display:grid;place-items:center;flex:0 0 48px;
  border-radius:15px;padding:3px;
  background:linear-gradient(135deg,rgba(85,226,255,.18),rgba(155,135,255,.22));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 10px 30px rgba(0,0,0,.32),0 0 28px rgba(85,226,255,.09);
}
.brand-emblem img{display:block;width:100%;height:100%;border-radius:12px}
.site-brand-copy{display:flex!important;flex-direction:column;justify-content:center;line-height:1.02;min-width:0}
.site-brand-copy strong{
  color:#fff!important;font-size:1.02rem!important;font-weight:950!important;
  letter-spacing:-.025em;white-space:nowrap;
}
.site-brand-copy strong span{color:var(--site-cyan)!important}
.site-brand-copy small{
  margin-top:5px;color:var(--site-muted)!important;font-size:.66rem!important;
  font-weight:750;letter-spacing:.035em;white-space:nowrap;
}
.navlinks,.site-nav nav{display:flex;align-items:center;justify-content:flex-end;gap:4px!important;flex-wrap:nowrap!important;min-width:0}
.navlinks a,.site-nav nav a{
  min-height:42px;display:inline-flex;align-items:center;justify-content:center;
  padding:9px 10px!important;border-radius:11px!important;
  color:#afc0d0!important;font-size:.78rem!important;font-weight:800!important;
  line-height:1.1;text-decoration:none;white-space:nowrap;
  transition:color .2s ease,background .2s ease,transform .2s ease;
}
.navlinks a:hover,.site-nav nav a:hover,.navlinks a.active,.site-nav nav a.active{
  color:#fff!important;background:rgba(255,255,255,.075)!important;transform:translateY(-1px)
}
.navlinks .btn,.site-nav nav .btn{padding-inline:15px!important}
.mobile-toggle{flex:0 0 auto}

/* Das breite Motiv bleibt Werbebanner/Hero-Asset, nicht Navigationslogo. */
.site-logo-img{display:none!important}
.server-ad-banner,.brand-promo-banner{
  display:block;width:min(468px,100%);height:auto;aspect-ratio:7.8/1;
  object-fit:cover;margin:22px auto;border-radius:12px;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 18px 48px rgba(0,0,0,.34)
}

/* Globale Feinarbeit */
.card,.poll-card,.metric,.box,.vote-card{
  box-shadow:0 20px 65px rgba(0,0,0,.22);
}
button,.btn,a{outline-offset:3px}
button:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(85,226,255,.7)!important;
}
img{max-width:100%}

@media (max-width:1220px){
  .nav,.site-nav{gap:16px!important}
  .navlinks a,.site-nav nav a{padding-inline:8px!important;font-size:.74rem!important}
  .site-brand-copy small{display:none}
}
@media (max-width:1040px){
  .site-brand-copy strong{font-size:.95rem!important}
  .navlinks,.site-nav nav{gap:2px!important}
}
@media (max-width:920px){
  .navlinks:not(.open),.site-nav nav{display:none!important}
  .navlinks.open{
    display:flex!important;position:absolute;left:20px;right:20px;top:calc(100% + 8px);
    flex-direction:column;align-items:stretch;padding:14px;
    border:1px solid var(--site-line);border-radius:18px;
    background:rgba(6,16,27,.98);box-shadow:0 24px 70px rgba(0,0,0,.48)
  }
  .navlinks.open a{width:100%;justify-content:flex-start!important;font-size:.9rem!important;padding:13px 14px!important}
  .site-nav nav{display:none!important}
}
@media (max-width:560px){
  :root{--site-header-h:70px}
  .wrap,.site-wrap{width:min(100% - 24px,var(--site-container))}
  .brand-emblem{width:43px;height:43px;flex-basis:43px;border-radius:13px}
  .site-brand-copy strong{font-size:.9rem!important}
  .site-brand-copy small{display:block;font-size:.58rem!important}
  .nav,.site-nav{padding-block:8px!important}
}
