/* ================================
   RouterFox - Base Styles (Dark)
   Mobile-first, responsive
===================================*/

*{box-sizing:border-box;margin:0;padding:0}
:root{color-scheme:dark}

/* =========================================
   GLOBALER HINTERGRUND via :root-Variable
========================================= */
:root{
  /* Design Tokens / Farben */
  --bg:#0b0f1a;
  --panel:#0f1422;
  --panel-2:#0e1320;
  --text:#e8edf5;
  --muted:#9aa3b2;
  --brand:#7c3aed;          /* violett */
  --brand-2:#22d3ee;        /* cyan */
  --ring:rgba(124,58,237,.22);
  --radius:18px;
  --shadow-lg: 0 20px 50px rgba(0,0,0,.35);

  /* Ein Button-Farbsatz (von dir) */
  --brand-contrast:#ffffff;
  --brand-ghost: rgba(109,40,217,.12);
  --brand-hover: #5B21B6;

  /* EINZIGE Stelle, an der der Seiten-Hintergrund definiert wird */
  --bg-gradient:
    radial-gradient(1200px 800px at 0% -10%, #0b1220 0%, transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, #111b2f 0%, transparent 45%),
    linear-gradient(to bottom,#0f172a,#0b1220 30%,#0b1220);
}

/* ====== Body (einheitlich & ohne Balken) ====== */
html,body{height:100%;}
body{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:#e5e7eb;
  line-height:1.6;

  /* GLOBALER HINTERGRUND */
  background-color: var(--bg);
  background-image: var(--bg-gradient);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: -10% -10%, 110% -5%, 0 0; /* links/oben, rechts/oben, Verlauf */
  background-size: 1600px 1200px, 1400px 1000px, auto;
  background-attachment: fixed, fixed, scroll;   /* „klebt“ am Viewport */

  /* Layout */
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

a{color:inherit;text-decoration:none}
ul{list-style:none}

/* Utility */
.container{max-width:1180px;margin:0 auto;padding:0 20px}

/* Verlauf-Button (bestehend) */
.btn{
  background:linear-gradient(90deg,#9333ea,#22d3ee);
  border:none;color:#fff;font-weight:700;
  padding:.55rem 1.1rem;border-radius:12px;cursor:pointer;
  transition:transform .2s, box-shadow .2s; display:inline-flex; align-items:center; gap:.5rem;
}
.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 10px 24px rgba(34,211,238,.25)}

/* ================= Header ================= */
.header{
  position:sticky; top:0; z-index:1000;
  background:rgba(10,10,20,.8); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:12px 20px; border-bottom:1px solid #101826;
}
.logo{display:flex; align-items:center; gap:10px;}
.logo img{height:34px}
.logo h1{font-size:1.25rem; font-weight:800; letter-spacing:.2px}
.nav{display:flex; align-items:center; gap:1rem}
.nav a{color:#e2e8f0; padding:8px 6px; border-radius:8px}
.nav a:hover{background:#0f172a}
.nav__login{margin-left:.5rem}

/* Burger */
.nav-toggle{display:none;width:42px;height:38px;border:1px solid #334155;border-radius:10px;background:#0f172a;justify-content:center;align-items:center;gap:4px}
.nav-toggle__bar{width:20px;height:2px;background:#e2e8f0;display:block}

@media (max-width:900px){
  .nav-toggle{display:flex}
  .nav{
    position:fixed; left:0; right:0; top:64px;
    background:rgba(115, 129, 157, 0.98);
    border-top:1px solid #1f2937;
    display:grid; gap:10px; padding:14px 16px 18px;
    transform:translateY(-16px); opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .nav--open{opacity:1; transform:none; pointer-events:auto}
  .nav .nav__login{width:100%; text-align:center}
  body.no-scroll{overflow:hidden}
}

/* ================= Footer ================= */
.footer{background:#0f172a;padding:28px 18px;margin-top:auto}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1180px;margin:0 auto}
.footer h4{color:#fff;margin-bottom:.75rem}
.footer p,.footer a{color:#94a3b8}
.footer a:hover{color:#22d3ee}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr}}

/* ============== Homepage Sections ============== */
.hero{position:relative;padding:88px 0 52px}
.hero .container{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:1rem}
.hero p{font-size:1.1rem;color:#9aa3b2;max-width:45ch;margin-bottom:1.5rem}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.hero-logo{max-width:min(380px,42vw);height:auto;filter:drop-shadow(0 12px 38px rgba(0,0,0,.45))}
.hero:before{
  content:"";position:absolute;inset:10% auto auto 55%;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(124,58,237,.25), transparent 70%);
  filter:blur(22px);pointer-events:none;opacity:.6;
}
@media (max-width:900px){
  .hero .container{grid-template-columns:1fr;text-align:center}
  .hero .actions{justify-content:center}
  .hero-logo{margin:20px auto 0}
}

/* Buttons – dein Farbsystem */
.btn-solid{
  background: var(--brand);
  color: var(--brand-contrast);
  transition: background .15s ease, transform .05s ease;
}
.btn-solid:hover    { background: var(--brand-hover); }
.btn-solid:active   { transform: translateY(1px); }

.btn-outline {
  background: rgba(255,255,255,.04);
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,.15);
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.btn-outline:hover  {
  background: var(--brand-ghost);
  border-color: var(--brand);
  color: #fff;
}
.btn-outline:active { transform: translateY(1px); }

/* Feature Cards – „Soft Glass“ */
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.card{
  position:relative;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));
  border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:18px 18px 16px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  backdrop-filter:saturate(140%) blur(6px);
  transition:transform .18s ease, box-shadow .18s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(0,0,0,.35);border-color:rgba(124,58,237,.25)}
.card h3,h4{margin:.2rem 0 .4rem}
.card p{color:var(--muted)}
@media (max-width:960px){.feature-grid{grid-template-columns:1fr;gap:12px}}

/* Pricing */
.pricing{padding:44px 0 70px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:14px}
.plan{padding:22px;border-radius:18px;background:linear-gradient(180deg,#121728,#0f1422);border:1px solid #23283a}
.plan .price{font-size:1.6rem;font-weight:800}
.plan .btn{margin-top:10px}
.plan:hover{border-color:#35406b;box-shadow:0 18px 42px rgba(0,0,0,.38)}
@media (max-width:980px){.pricing-grid{grid-template-columns:1fr}}

/* Kicker */
.kicker{display:inline-flex;align-items:center;gap:.5rem;
  font:600 .82rem/1.1 system-ui,Segoe UI,Roboto;
  color:#cdd2ff;letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(90deg, rgba(124,58,237,.18), rgba(34,211,238,.18));
  border:1px solid rgba(124,58,237,.35);padding:.35rem .6rem;border-radius:999px
}

/* Reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}

/* Zweiter Features/Pricing Block (kompatibel gelassen) */
.features{padding:40px 0; text-align:center}
.features h3{font-size:2rem; margin-bottom:20px}
.feature-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.card{ background:rgba(30,41,59,.75); border:1px solid #334155; border-radius:14px; padding:18px;
  box-shadow:0 8px 22px rgba(2,8,23,.35); transition:transform .25s, box-shadow .25s; }
.card:hover{transform:translateY(-6px); box-shadow:0 12px 30px rgba(2,8,23,.5)}
.card h4{margin-bottom:6px}

.pricing{padding:40px 0; text-align:center; background:rgba(15,23,42,.6)}
.pricing h3{font-size:2rem; margin-bottom:20px}
.pricing-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; max-width:1000px; margin:0 auto}
.plan .price{font-size:2rem; font-weight:800; color:#22d3ee; margin:8px 0 14px}
.plan ul{color:#cbd5e1}

/* ============== SALE (shared) ============== */
.page{padding:40px 0}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px}
.sale-card{border:2px solid #22d3ee; position:relative; overflow:hidden; padding-top:44px; background:rgba(30,41,59,.85); border-radius:14px}
.sale-card::before{
  content:attr(data-discount); position:absolute; top:0; left:0; padding:6px 10px; font-weight:800; font-size:.9rem;
  background:linear-gradient(90deg,#9333ea,#22d3ee); color:#fff; border-bottom-right-radius:10px; box-shadow:0 0 10px rgba(34,211,238,.6)
}
.old-price{text-decoration:line-through; color:#f87171}
.new-price{color:#22d3ee; font-weight:800; font-size:1.5rem; margin:.4rem 0 1rem}

/* ============== Games (gs-) ============== */
.gs-page{padding:48px 0}
.gs-container{max-width:1180px;margin:0 auto;padding:0 20px}
.gs-filters{background:rgba(15,23,42,.75); border:1px solid #334155; border-radius:14px; padding:14px; margin-bottom:18px}
.gs-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
#gs-search{flex:1 1 280px; padding:10px 12px; border-radius:10px; border:1px solid #334155; background:rgba(2,6,23,.6); color:#e2e8f0; outline:none}
#gs-search:focus{border-color:#22d3ee; box-shadow:0 0 0 3px rgba(34,211,238,.15)}
.gs-price{display:flex; gap:10px; align-items:center}
.gs-price label{color:#cbd5e1; font-size:.95rem}
#gs-price{width:220px}
.gs-taglist{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.gs-tagcheck{display:inline-flex; align-items:center; gap:6px; cursor:pointer}
.gs-tagcheck input{accent-color:#22d3ee}

/* Grid: max 4 Spalten */
.gs-grid{
  display:grid;
  gap:20px;
  grid-template-columns: 1fr; /* Mobile */
}
@media (min-width:720px){ .gs-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width:980px){ .gs-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width:1280px){ .gs-grid{ grid-template-columns: repeat(4, 1fr); } }

.gs-card{background:rgba(30,41,59,.85); border:1px solid #334155; border-radius:14px; overflow:hidden; position:relative; transition:transform .25s, box-shadow .25s; box-shadow:0 8px 22px rgba(2,8,23,.35)}
.gs-card:hover{transform:translateY(-6px); box-shadow:0 12px 30px rgba(2,8,23,.5)}
.gs-badge{position:absolute; top:10px; left:10px; background:linear-gradient(90deg,#9333ea,#22d3ee); color:#fff; font-size:.78rem; font-weight:700; padding:4px 8px; border-radius:999px}
.gs-thumb{height:140px; overflow:hidden; border-bottom:1px solid #334155}
.gs-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .45s}
.gs-card:hover .gs-thumb img{transform:scale(1.06)}
.gs-thumb--ph{display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(34,211,238,.12), rgba(147,51,234,.12))}
.gs-ph{opacity:.85}
.gs-body{padding:14px; display:grid; gap:8px}
.gs-title{margin:0; font-size:1.1rem}
.gs-tags{display:flex; flex-wrap:wrap; gap:6px}
.gs-pill{background:rgba(34,211,238,.12); border:1px solid rgba(34,211,238,.35); color:#e2e8f0; font-size:.78rem; padding:4px 8px; border-radius:999px}
.gs-bottom{display:flex; align-items:center; justify-content:space-between; gap:10px}
.gs-price-value{color:#22d3ee; font-weight:800}
.gs-pager{display:flex; align-items:center; gap:12px; justify-content:center; margin-top:22px}
#gs-pageinfo{color:#cbd5e1}
#gs-pagesize{background:rgba(15,23,42,.75); color:#e2e8f0; border:1px solid #334155; border-radius:10px; padding:6px 10px}

/* Mobile tweaks */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;text-align:center}
}

/* ===== KVM (kvm-) ===== */
.kvm-infobox {
  background: rgba(34,211,238,0.1);
  border: 1px solid rgba(34,211,238,0.4);
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  color: #e2e8f0;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kvm-infobox i { color: #22d3ee; font-size: 1rem; }
.kvm-page .sub{color:#cbd5e1;margin-bottom:12px}

/* Tabs */
.kvm-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.kvm-tab{
  padding:8px 14px; border:1px solid #334155; background:#0f172a; color:#e2e8f0;
  border-radius:8px; cursor:pointer; transition:.2s background, .2s color;
}
.kvm-tab:hover{ background:#1e293b; }
.kvm-tab.active{ background:#22d3ee; color:#0b1220; font-weight:700; }

/* Listen */
.kvm-list{ display:none; }
.kvm-list.active{ display:grid; }

/* Grid */
.kvm-grid{ gap:18px; grid-template-columns: 1fr; }
@media (min-width:720px){ .kvm-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width:1200px){ .kvm-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Karten */
.kvm-card .kvm-title{ margin-bottom:6px; }
.kvm-card .kvm-price{ color:#22d3ee; font-weight:800; font-size:1.25rem; margin-bottom:10px; }
.kvm-card .kvm-specs{ color:#cbd5e1; display:grid; gap:6px; margin-bottom:12px; }
.kvm-hypervisor { color: #94a3b8; font-size: 0.9rem; margin: 4px 0; }
.kvm-desc { color: #e2e8f0; font-size: 0.95rem; margin: 6px 0 10px; line-height: 1.4; }
.kvm-card{ display:flex; flex-direction:column; justify-content:space-between; height:100%; position:relative; }
.kvm-card .btn{ margin-top:auto; align-self:center; }
.kvm-specs{ list-style:none; padding:0; margin:0 0 10px; }
.kvm-specs li{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:.95rem; color:#e2e8f0; }
.kvm-specs li i{ color:#22d3ee; min-width:20px; text-align:center; }
.kvm-unavailable{ display:inline-block; padding:6px 10px; border-radius:6px; background:#4b5563; color:#f8fafc; font-size:.85rem; margin-top:auto; text-align:center; opacity:.9; }
.kvm-badge-unavail{ position:absolute; top:50px; left:10px; background:#6b7280; color:#0b1220; font-weight:700; padding:4px 8px; border-radius:6px; font-size:.78rem; }
.kvm-card:has(.kvm-badge-unavail){ opacity:.85; }
.kvm-title, .kvm-price, .kvm-unavailable { text-align:center; display:block; }

/* ===== VPN ===== */
.vpn-page .sub{color:#cbd5e1;margin-bottom:12px}
.vpn-locations{margin-bottom:16px}
.vpn-tags{display:flex;flex-wrap:wrap;gap:8px}
.vpn-pill{background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.35);padding:4px 8px;border-radius:999px}
.vpn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.vpn-price{color:#22d3ee;font-weight:800}
.vpn-specs{color:#cbd5e1;display:grid;gap:6px;margin:10px 0 14px}

/* ===== IP Transit ===== */
.ipt-page .sub{color:#cbd5e1;margin-bottom:12px}
.ipt-card{overflow:auto}
.ipt-table{width:100%;border-collapse:collapse}
.ipt-table th,.ipt-table td{border:1px solid #334155;padding:10px;text-align:left}
.ipt-table th{background:#0f172a}

/* ===== Contact ===== */
.contact-form{display:grid;gap:10px}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.contact-form input,.contact-form textarea{
  background:#0f172a;border:1px solid #334155;border-radius:10px;color:#e5e7eb;
  padding:10px 12px; outline:none;
}
.contact-form input:focus,.contact-form textarea:focus{border-color:#22d3ee; box-shadow:0 0 0 3px rgba(34,211,238,.15)}
@media (max-width:700px){ .contact-form .row{grid-template-columns:1fr} }

/* ===== Sale Grid explicit ===== */
.sale-grid{ display:grid; gap:20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (max-width:768px){ .sale-grid{ grid-template-columns:1fr; } }

 /* Android Text-Scaling Fix + Tap-Highlight */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
*{ -webkit-tap-highlight-color:transparent; }

/* Dark selects */
select, option{ background-color:#0f172a; color:#e5e7eb; }

/* ARK overrides */
.ark-hero-right h1{ font-size:clamp(1.4rem, 2.2vw + 0.7rem, 2.1rem) !important; }
.ark-price-value{ font-size:clamp(1.2rem, 2vw + 0.5rem, 1.7rem) !important; }
.ark-card{ border-radius: 10px; overflow:hidden; }
.ark-card .ark-features{ line-height:1.55; }
.ark-price { margin-top: 28px; margin-bottom: 10px; }
.ark-price-value { line-height: 1.2; font-weight: 800; }
.ark-features { list-style:none; margin:12px 0; padding:0; }
.ark-features li{ position:relative; padding-left:22px; margin-bottom:6px; line-height:1.5; }
.ark-features li::before{ content:"✔"; position:absolute; left:0; top:0; color:#22d3ee; font-weight:bold; }

/* Strong sale grid override */
.page .sale-grid{
  display:grid !important;
  grid-auto-rows: auto;
  gap:24px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width:1200px){ .page .sale-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width:720px){ .page .sale-grid{ grid-template-columns: 1fr !important; } }
.sale-card{ width:auto; max-width:100%; }

/* ===== News ===== */
.news-page .sub{color:#cbd5e1;margin-bottom:12px}
.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.news-card{display:grid;gap:10px}
.news-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.news-title{font-size:1.1rem;margin:0}
.news-date{color:#94a3b8;font-size:.9rem}
.news-excerpt{color:#cbd5e1}
.news-note{color:#e5e7eb}
.news-btn{justify-self:start}

/* Cookie Overlay */
.cookie-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); display:none; align-items:center; justify-content:center; z-index:200; }
.cookie-box{
  background:#111522; color:#fff; padding:1.5rem; max-width:420px; width:90%;
  border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.4); text-align:center;
  opacity:0; transform:scale(.9); transition:opacity .4s ease, transform .4s ease;
}
.cookie-box.show{ opacity:1; transform:scale(1); }
.cookie-box button{ margin:.5rem .25rem 0; padding:.5rem 1rem; border:none; border-radius:6px; cursor:pointer; font-weight:600; }
.cookie-accept{background:#22c55e;color:#fff}
.cookie-deny{background:#ef4444;color:#fff}
.cookie-more{background:#374151;color:#fff}

/* Suche (Homepage) */
.search-wrap{ display:flex; justify-content:center; margin:24px auto; padding:0 16px; }
.search-bar{ display:flex; align-items:stretch; width:100%; max-width:600px; opacity:0; animation: fadeSlideIn .8s ease-out forwards; animation-delay:.2s; }
.search-input{
  flex:1; padding:14px 16px; border:1px solid #2b3042; border-right:none; border-radius:12px 0 0 12px;
  background:#0e1320; color:#e8ecf2; font-size:16px; outline:none; transition: box-shadow .2s ease, border-color .2s ease;
}
.search-input::placeholder{ color:#8c94a6; }
.search-input:focus{ border-color:#3a4060; box-shadow:0 0 0 6px rgba(99,102,241,.15); }
.search-btn{ border-radius:0 12px 12px 0; padding:0 20px; display:flex; align-items:center; justify-content:center; white-space:nowrap; }
@media (max-width:520px){
  .search-bar{ flex-direction:column; }
  .search-input{ border-radius:12px; border-right:1px solid #2b3042; }
  .search-btn{ border-radius:12px; margin-top:8px; width:100%; padding:12px; }
}

/* Animation */
@keyframes fadeSlideIn{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion: no-preference){
  :root{ --reveal-distance:20px; --reveal-duration:.7s; --reveal-ease:cubic-bezier(.22,.61,.36,1); }
  .reveal{ opacity:0; transform:translateY(var(--reveal-distance)); transition:opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease); will-change:opacity, transform; }
  .reveal.in{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:0; } .reveal.in{ opacity:1; } }

/* zarter Glow-Rand */
.glow{position:relative}
.glow:before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  background:linear-gradient(135deg, rgba(124,58,237,.5), rgba(34,211,238,.5), rgba(124,58,237,.5));
  filter:blur(12px);opacity:.25;z-index:-1;transition:opacity .25s ease
}
.glow:hover:before{opacity:.45}