/* =========================
   SzymCraft X — styles.css
   Dark + Edgy, Lila Akzent
   ========================= */

/* ---------- Design Tokens ---------- */
:root{
  --bg-0:#0a0314; 
  --text:#efe7ff; 
  --muted:#cdb7ff;
  --accent:#a876ff; 
  --accent-2:#db95ff;

  --container:1140px;
  --space-1:6px; --space-2:10px; --space-3:16px;
  --space-4:24px; --space-5:36px; --space-6:54px;

  --card-bg:linear-gradient(180deg,rgba(17,3,34,.96),rgba(17,3,34,.86));
  --card-bd:rgba(176,107,255,.28);
  --card-shadow:0 18px 48px rgba(90,0,180,.22);
  --card-shadow-hover:0 28px 68px rgba(120,30,220,.30);

  --btn-grad:linear-gradient(90deg,#a876ff,#db95ff);
  --btn-ring:rgba(176,107,255,.55);
}

/* ---------- CLS-Fix: Scrollbar reservieren ---------- */
html{ scrollbar-gutter: stable both-edges; }
@supports not (scrollbar-gutter: stable){ body{ overflow-y: scroll; } }

/* ---------- Reset + Base ---------- */
html,body{
  margin:0;
  background:var(--bg-0);
  color:var(--text);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}
body{
  overflow-x:hidden; line-height:1.55; font-size:16.5px;
  background:
    radial-gradient(1200px 800px at 15% 5%, rgba(160,80,255,0.14), transparent 60%),
    radial-gradient(900px 700px at 85% 12%, rgba(192,38,211,0.10), transparent 62%),
    linear-gradient(135deg,#070112,#12062a 55%,#180a38);
}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1}
body::before{background:radial-gradient(120% 100% at 50% 10%,rgba(0,0,0,0) 0%,rgba(0,0,0,.26) 100%);mix-blend-mode:multiply}
body::after{background-image:
  radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.18), transparent),
  radial-gradient(1px 1px at 65% 15%, rgba(255,255,255,.14), transparent),
  radial-gradient(1px 1px at 80% 55%, rgba(255,255,255,.16), transparent),
  radial-gradient(1px 1px at 35% 70%, rgba(255,255,255,.12), transparent);opacity:.7}

p{opacity:.92}
.muted{color:var(--muted)!important;opacity:.95}
main, .max-w-5xl, .max-w-4xl{max-width:var(--container)!important}
section{margin-block:var(--space-6)}
.sectionTitle{margin-bottom:var(--space-3)}
.divider{height:2px;margin:var(--space-5) 0;background:linear-gradient(90deg,transparent,rgba(176,107,255,.66),transparent);border:0}

/* ================= Navbar ================= */
nav#navbar{
  position:sticky; top:0; z-index:60;
  background:linear-gradient(180deg, rgba(9,2,18,.96), rgba(9,2,18,.86));
  border-bottom:1px solid rgba(176,107,255,.28);
  box-shadow:0 14px 40px rgba(90,0,180,.22);
  backdrop-filter:saturate(120%);
}
nav#navbar.scrolled{
  box-shadow:0 18px 44px rgba(80,0,160,.28);
  border-bottom-color:rgba(176,107,255,.35);
  backdrop-filter:blur(10px) saturate(120%);
}
#navbarContent{
  max-width:1200px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 20px; position:relative;
}
#logoWrap{display:flex;flex-direction:column;align-items:center;cursor:pointer;text-decoration:none}
#logoImg{
  width:84px;height:84px;border-radius:16px;object-fit:cover;
  box-shadow:0 14px 32px rgba(160,80,255,.28);
  border:1px solid rgba(176,107,255,.25);
  transition:transform .25s, box-shadow .25s, filter .25s;
}
#logoWrap:hover #logoImg{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 46px rgba(176,107,255,.38);filter:saturate(1.05)}
#logoText{margin-top:6px;font-family:"Poppins",sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:.6px;color:#e6d9ff}

/* Tabs-Zeile */
.navRow{
  display:flex; gap:14px; align-items:center; justify-content:center;
  padding-top:10px; width:100%; max-width:640px;
  border-top:1px solid rgba(176,107,255,.14);
  overflow:hidden; contain:layout paint; position:relative;
}
#navIndicator{
  position:absolute; height:44px; border-radius:12px; z-index:0; opacity:.9;
  background:linear-gradient(90deg,#a876ff22,#db95ff22);
  border:1px solid rgba(219,149,255,.35);
  box-shadow:0 10px 26px rgba(176,107,255,.18);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), width .22s ease, opacity .2s ease;
}
.navBtn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; line-height:1; white-space:nowrap;
  border-radius:12px; border:1px solid rgba(176,107,255,.26);
  background:linear-gradient(90deg, rgba(168,118,255,.16), rgba(219,149,255,.10));
  color:#efe7ff; font-weight:700; letter-spacing:.3px;
  will-change:transform; transform:translateZ(0);
  -webkit-font-smoothing:antialiased; font-kerning:none; text-rendering:optimizeSpeed;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.navBtn:hover{ transform:translateY(-3px); border-color:rgba(219,149,255,.55); box-shadow:0 14px 36px rgba(176,107,255,.25) }
.navBtn.active{ border-color:rgba(219,149,255,.8); box-shadow:0 16px 40px rgba(176,107,255,.32) }

/* Pixel-Underline auf ::before (Glow bleibt Buttons vorbehalten) */
.navBtn::before{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px; opacity:0;
  background:linear-gradient(90deg, rgba(219,149,255,.9) 0 0) left/4px 2px repeat-x;
  image-rendering:pixelated; transform:translateY(2px);
  transition:opacity .18s ease, transform .18s ease; pointer-events:none;
}
.navBtn:hover::before, .navBtn.active::before{ opacity:1; transform:none }
.navBtn:focus-visible{ outline:2px solid rgba(219,149,255,.75); outline-offset:2px }

/* Quick Actions */
.navQuick{ display:flex; gap:8px; margin-top:10px }
.gradient-btn.small{ padding:8px 12px!important; font-weight:800!important }

/* Hamburger / Offcanvas */
.navToggle{
  display:none; position:absolute; right:16px; top:14px;
  width:40px; height:34px; border:1px solid rgba(176,107,255,.28);
  border-radius:10px; background:linear-gradient(180deg,rgba(168,118,255,.16),rgba(219,149,255,.10));
}
.navToggle span{ display:block; width:20px; height:2px; margin:6px auto; background:#e9ddff; transition:.2s }
.navToggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.navToggle[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.navToggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

.navSheet{
  position:fixed; inset:auto 0 0 auto; top:0; width:290px; height:100vh; z-index:80;
  background:linear-gradient(180deg,rgba(15,3,30,.98),rgba(11,2,23,.92));
  border-left:1px solid rgba(176,107,255,.28);
  box-shadow:-24px 0 60px rgba(80,0,160,.28);
  transform:translateX(100%); transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.navSheet.open{ transform:none }
.sheetNav{ display:flex; flex-direction:column; gap:8px; padding:16px }
.sheetLink{
  display:block; padding:12px 14px; border-radius:12px; text-decoration:none; color:#efe7ff;
  border:1px solid rgba(176,107,255,.22);
  background:linear-gradient(90deg,rgba(168,118,255,.12),rgba(219,149,255,.08));
}
.sheetLink:hover{ border-color:rgba(219,149,255,.55) }

@media (max-width:820px){
  .navToggle{ display:block }
  .navQuick{ display:none } /* Quick-Actions Desktop-only */
}

/* ================= Hero ================= */
.hero{
  height:86vh; min-height:520px; position:relative; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  background:url('images/minecraft-bg.jpg') center 40%/cover fixed;
  border-bottom:1px solid rgba(176,107,255,.18);
}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(8,0,18,.65), rgba(8,0,18,.85) 60%, rgba(8,0,18,.92))}
.heroContent{position:relative;z-index:2;max-width:1100px;padding:24px}
.kicker{font-family:"Poppins",sans-serif;color:var(--muted);letter-spacing:.2em;text-transform:uppercase;font-weight:700;opacity:.9}
.heroTitle{font-family:"Poppins",sans-serif;font-weight:800;letter-spacing:.6px;font-size:clamp(2rem,4.6vw,3.8rem);color:#efe7ff;text-shadow:0 10px 40px rgba(176,107,255,.18);margin:.25rem 0 .35rem}
.sublead{color:#e8e0ff;opacity:.95;font-size:1.05rem}

/* ================= Cards, Buttons, Links ================= */
.card{
  background:var(--card-bg)!important;border:1px solid var(--card-bd)!important;border-radius:16px!important;padding:var(--space-4)!important;
  box-shadow:var(--card-shadow)!important;backdrop-filter:saturate(120%) blur(2px);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, translate .2s ease;
}
.card:hover{box-shadow:var(--card-shadow-hover)!important;border-color:rgba(219,149,255,.55)!important;transform:translateY(-6px)}
.badge{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(90deg, rgba(168,118,255,.18), rgba(219,149,255,.12));
  border:1px solid rgba(176,107,255,.30);border-radius:999px;padding:6px 12px;font-weight:700}

.gradient-btn{
  position:relative;isolation:isolate;background:var(--btn-grad)!important;color:#fff!important;font-weight:800!important;letter-spacing:.3px;
  padding:12px 18px!important;border-radius:12px!important;border:1px solid rgba(176,107,255,.32)!important;box-shadow:0 10px 28px rgba(176,107,255,.26)!important;
  transform:translateZ(0);transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.gradient-btn::after{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;box-shadow:0 0 0 0 var(--btn-ring);transition:box-shadow .25s ease}
.gradient-btn:hover{transform:translateY(-4px) scale(1.015);box-shadow:0 16px 46px rgba(176,107,255,.34)!important;filter:saturate(1.03) contrast(1.02)}
.gradient-btn:hover::after{box-shadow:0 0 24px 8px rgba(176,107,255,.18)}

.sectionTitle{font-family:"Poppins",sans-serif;font-weight:800;letter-spacing:.5px;color:#e9ddff;font-size:1.7rem;display:inline-flex;gap:10px}
h1,.heroTitle{letter-spacing:.6px;text-shadow:0 12px 44px rgba(176,107,255,.18)}
h3{font-weight:800;margin:0 0 var(--space-2) 0}

/* ================= Pixel SVG Icons ================= */
.i-px { width: 1.15em; height: 1.15em; vertical-align: -0.18em; color: currentColor; display:inline-block; }
.i-px, .i-px * { image-rendering: pixelated; shape-rendering: crispEdges; }
.navBtn .i-px { margin-right: 8px; }
.sectionTitle .i-px { margin-right: 10px; }
.icon-accent { color: #dab8ff; }

/* ================= Utilities & Media ================= */
.reveal-up{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease}
.reveal-show{opacity:1;transform:none}

.code-row{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.06);padding:10px 12px;border-radius:10px;margin:8px 0}
a.link,a[href^="http"]:not(.navBtn):not(.gradient-btn){
  color:#eaddff;text-decoration:none;border-bottom:1px dashed rgba(219,149,255,.45);transition:border-color .2s ease,color .2s ease}
a.link:hover,a[href^="http"]:hover{color:#fff;border-bottom-color:rgba(219,149,255,.9)}

.sshot-row{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0}
.sshot{position:relative;width:130px;aspect-ratio:16/10;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 16px rgba(30,0,60,.25);transform:translateZ(0);transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;cursor:zoom-in;will-change:transform;z-index:0}
.sshot img{width:100%;height:100%;object-fit:cover;display:block}
.sshot:hover{transform:scale(1.5);z-index:5;box-shadow:0 18px 48px rgba(150,70,240,.35);filter:saturate(1.04) contrast(1.03)}

.statusbar{position:relative;overflow:hidden;border-radius:10px;height:10px;background:rgba(255,255,255,.06);border:1px solid rgba(176,107,255,.2)}
.statusbar>span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#34d399,#a7f3d0);transition:width .45s ease}

/* ================= Cursor ================= */
/* Passe die Pfade an deine Dateien an */
html, body, * { cursor: url('images/cursor/vanilla_diamond_cursor_idle_32.png') 1 1, auto !important; }
a, button, .navBtn, .gradient-btn { cursor: url('images/cursor/vanilla_diamond_cursor_hover_32.png') 1 1, pointer !important; }
a:hover, button:hover, .navBtn:hover, .gradient-btn:hover { cursor: url('images/cursor/vanilla_diamond_cursor_hover_32.png') 1 1, pointer !important; }
a:active, button:active, .navBtn:active, .gradient-btn:active { cursor: url('images/cursor/vanilla_diamond_cursor_attack_32.png') 1 1, pointer !important; }

/* ================= Map (shared) ================= */
#serverMap{border-radius:16px;overflow:hidden;border:1px solid rgba(176,107,255,.28);box-shadow:0 16px 50px rgba(120,20,220,.30)}

/* ================= Changelog / Roadmap / Stats / CTA / Trailer ================= */
.changelog{display:grid;gap:16px;margin-top:12px}
.log-head{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.log-head time{font-variant-numeric:tabular-nums;color:#cdb7ff;opacity:.9}
.log h3{margin:0;font-family:"Poppins",sans-serif}
.log-list{margin:8px 0 0 16px}
.log-meta{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

.roadmap-progress{display:flex;align-items:center;gap:10px;margin:10px 0 16px}
.rp-track{flex:1;height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(176,107,255,.2)}
.rp-track>span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#a876ff,#db95ff);transition:width .45s ease}
.rp-text{opacity:.85}
.roadmap-list{list-style:none;margin:12px 0 0 0;padding:0;display:grid;gap:16px}
.rm.card{ /* nutze .card-Styling, erlaub Zusatz-Highlights */ }
.rm-head{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-bottom:6px}
.rm-icon{width:1.4rem;height:1.4rem;display:grid;place-items:center;border-radius:6px;border:1px solid rgba(176,107,255,.28);background:linear-gradient(180deg,rgba(168,118,255,.18),rgba(219,149,255,.12))}
.rm-badge{font-weight:800;padding:6px 10px;border-radius:999px;border:1px solid rgba(176,107,255,.30);background:linear-gradient(90deg,rgba(168,118,255,.18),rgba(219,149,255,.12))}
.rm-points{margin:8px 0 0 16px}
.rm[data-status="in-progress"]{border-color:rgba(219,149,255,.55)!important;box-shadow:0 18px 48px rgba(176,107,255,.30)!important}
.rm[data-status="done"]{opacity:.88;position:relative}
.rm[data-status="done"]::after{content:"✔ erledigt"; position:absolute; top:10px; right:14px; font-weight:800; color:#9affb8; text-shadow:0 0 10px rgba(0,0,0,.25);}

.stat .stat-head{display:flex;align-items:center;gap:8px;font-weight:800;color:#e9ddff;margin-bottom:6px}
.stat .stat-value{font-family:"Poppins",sans-serif;font-weight:800;font-size:2rem;letter-spacing:.3px}
.stat .stat-sub{margin-top:6px;color:#cdb7ff;opacity:.9}
.stat-bar{margin-top:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(176,107,255,.2)}
.stat-bar>span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#a876ff,#db95ff);transition:width .6s ease}
.spark{width:100%;height:56px;margin-top:6px;display:block;filter:contrast(1.2) saturate(1.05)}
.spark path{vector-effect:non-scaling-stroke;fill:none;stroke:#dab8ff;stroke-width:1.5;shape-rendering:crispEdges}
.spark .area{fill:#a876ff33;stroke:none}

.cta-stripe{display:flex; align-items:center; justify-content:space-between; gap:16px; margin:54px auto 24px; max-width:var(--container); background:linear-gradient(180deg, rgba(17,3,34,.96), rgba(17,3,34,.86)); border:1px solid rgba(176,107,255,.28); border-radius:16px; padding:18px 20px; box-shadow:0 18px 48px rgba(90,0,180,.22)}
.cta-wrap h3{font-family:"Poppins",sans-serif;font-weight:800;margin:0}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:720px){ .cta-stripe{flex-direction:column;align-items:flex-start} }

.trailer-wrap{ margin-top:20px; }
.trailer-thumb{ position:relative; border-radius:16px; overflow:hidden; background:#000; border:1px solid rgba(176,107,255,.32); box-shadow:0 14px 40px rgba(120,20,220,.28); aspect-ratio:16/9; transition:box-shadow .25s ease, transform .25s ease; }
.trailer-thumb:hover{ transform:translateY(-4px); box-shadow:0 20px 60px rgba(176,107,255,.45); }
.trailer-thumb video{ width:100%; height:100%; object-fit:cover; display:block; filter:brightness(0.92) contrast(1.03); }
.trailer-play{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:82px; height:82px; border-radius:16px; border:1px solid rgba(219,149,255,.45); background:linear-gradient(180deg, rgba(168,118,255,.18), rgba(219,149,255,.12)); backdrop-filter:saturate(130%) blur(3px); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 10px 26px rgba(176,107,255,.32); transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease; }
.trailer-play:hover{ transform:translate(-50%, -50%) scale(1.06); box-shadow:0 16px 40px rgba(176,107,255,.42); }
.trailer-play svg{ width:36px; height:36px; }
.trailer-thumb.playing .trailer-play{ opacity:0; pointer-events:none; transform:translate(-50%, -50%) scale(.8); }

/* ================= Scroll Progress & Footer ================= */
#scrollProgress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,#a876ff,#db95ff); z-index:100; pointer-events:none;
}
.site-footer{ text-align:center; padding:24px; color:#cfc2ff; opacity:.9; border-top:1px solid rgba(176,107,255,.18); }

/* ================= Responsive Tweaks ================= */
@media (max-width:720px){
  #logoImg{width:64px;height:64px}
  .hero{height:74vh;background-position:center 48%}
}

/* ================= Reduced Motion ================= */
@media (prefers-reduced-motion: reduce){
  #navIndicator, .navBtn, .gradient-btn, .trailer-thumb, .card { transition:none !important; }
}
/* Reveal-Fallback: ohne JS trotzdem sichtbar */
.reveal-up { opacity: 1; transform: none; }
html.js .reveal-up { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
html.js .reveal-up.reveal-show { opacity: 1; transform: none; }
/* ===== Serverinfo Polish ===== */
.feature-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.feature-list li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  background:linear-gradient(90deg, rgba(168,118,255,.18), rgba(219,149,255,.12));
  border:1px solid rgba(176,107,255,.30);
  font-weight:800; white-space:nowrap;
}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pill{
  padding:6px 10px;border-radius:8px;font-weight:700;
  background:rgba(255,255,255,.05);border:1px solid rgba(176,107,255,.2)
}

.kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}
.kpi{padding:10px;border:1px solid rgba(176,107,255,.22);border-radius:12px;background:rgba(20,5,34,.5)}
.kpi-label{color:#cdb7ff;font-size:.9rem}
.kpi-value{font-family:Poppins,sans-serif;font-weight:900;font-size:1.4rem;margin-top:2px}

.spec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.spec-grid dt{color:#cdb7ff;font-size:.9rem}
.spec-grid dd{margin:0;font-weight:700}

.join-card .join-row{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:8px 0 10px;flex-wrap:wrap}
.join-card .ip-block{display:flex;flex-direction:column;gap:4px}
.join-card .ip-line code{font-weight:800}
.quick-steps{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.qs{display:flex;align-items:center;gap:8px;border:1px solid rgba(176,107,255,.28);border-radius:10px;padding:8px 10px;background:rgba(20,5,34,.5)}
.qs-num{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-weight:900;background:linear-gradient(180deg,rgba(168,118,255,.28),rgba(219,149,255,.16));border:1px solid rgba(176,107,255,.35)}

.micro .micro-head{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.micro h3{margin:0}
.micro-list{margin:8px 0 0 16px}

@media (max-width:720px){
  .spec-grid{grid-template-columns:1fr}
}
/* FIX: Indicator darf NIE wie ein Button aussehen */
#navIndicator {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  display: block;
  pointer-events: none;
  height: 2px;
  background: linear-gradient(90deg, #a876ff, #db95ff);
  border-radius: 2px;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  transform: translateX(0);
  transition: transform .25s ease, width .25s ease;
  z-index: 0;
}
/* ===== Premium Polish Pack ===== */

/* 2.1 Section-Titles: Pixel-Underline + dezenter Shine */
.sectionTitle{
  position:relative; isolation:isolate;
}
.sectionTitle::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px;
  background:linear-gradient(90deg, rgba(219,149,255,.95) 0 0) left/6px 2px repeat-x;
  image-rendering:pixelated; opacity:.75;
}
.sectionTitle::before{
  content:""; position:absolute; inset:auto 0 -10px; height:18px;
  background:linear-gradient(90deg, transparent, rgba(219,149,255,.08), transparent);
  filter:blur(6px); pointer-events:none;
}

/* 2.2 Hero: Sterne + Orbs + Pixelzeile */
.fx-stars{
  position:absolute; inset:0; background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(1px 1px at 82% 65%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(1px 1px at 35% 78%, rgba(255,255,255,.12), transparent 60%);
  opacity:.7; pointer-events:none; z-index:1;
}
.fx-orb{
  position:absolute; width:46vmin; height:46vmin; border-radius:50%;
  filter:blur(40px); opacity:.25; pointer-events:none; z-index:1;
  background:radial-gradient(circle at 30% 30%, #db95ff, rgba(219,149,255,0) 55%);
  mix-blend-mode:screen;
}
.orb-a{ top:10%; left:8%; }
.orb-b{ bottom:6%; right:10%; }

.hero-pixels{
  height:2px; margin:18px auto 0; width:min(520px, 70vw);
  background:linear-gradient(90deg, rgba(219,149,255,.95) 0 0) left/8px 2px repeat-x;
  image-rendering:pixelated; opacity:.9; filter:drop-shadow(0 0 8px rgba(176,107,255,.25));
}

/* 2.3 3D-Hover für Cards (dezent, performant) */
.premium-3d{
  transform-style:preserve-3d; perspective:1000px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.premium-3d:hover{
  transform:translateY(-8px) rotateX(2deg) rotateY(-2deg);
  box-shadow:0 28px 72px rgba(120,30,220,.36);
  border-color:rgba(219,149,255,.6)!important;
}

/* 2.4 Buttons: sanfter Neon-Ring beim Hover & Active-Press */
.gradient-btn{ transform:translateZ(0); }
.gradient-btn:active{ transform:translateY(1px) scale(.99); filter:saturate(.98) }
.gradient-btn:hover::after{ box-shadow:0 0 26px 10px rgba(176,107,255,.22) }

/* 2.5 Sparkline Glow subtil erhöhen */
.spark path{ stroke:#e6d8ff; }
.spark .area{ fill:#b890ff3a; }

/* 2.6 Reveal Stagger (wenn .js gesetzt ist) */
html.js .reveal-up{ will-change:transform, opacity; }
html.js .reveal-up.reveal-show{ animation:revealRise .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes revealRise{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}

/* 2.7 Parallax-Targets: kleine „lift“-Illusion */
[data-parallax]{
  will-change:transform; transition:transform .12s ease;
}

/* 2.8 Noch etwas Tiefe für Map-Frame */
#serverMap{ position:relative; }
#serverMap::after{
  content:""; position:absolute; inset:-1px; border-radius:16px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(219,149,255,.16), 0 22px 60px rgba(120,20,220,.22);
}
/* ===== Tutorial Premium Add-on ===== */

/* Page-Hero (Tutorial) */
.page-hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid rgba(176,107,255,.18);
  background: radial-gradient(1200px 800px at 15% 5%, rgba(160,80,255,.10), transparent 60%), linear-gradient(135deg,#0a0314,#12062a 60%,#1a0c3c);
}
.page-hero__inner{
  max-width:var(--container); margin:0 auto; padding:36px 20px 22px;
  text-align:center; position:relative; z-index:2;
}
.page-hero .crumbs{justify-content:center;margin:0 0 8px}
.t-progress{margin:16px auto 0; max-width:900px}
.tp-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.tp-title{font-weight:900; font-family:Poppins, sans-serif; letter-spacing:.4px}
.tp-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(176,107,255,.2);min-width:260px}
.tp-bar>span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#a876ff,#db95ff);transition:width .4s ease}
.tp-chips{display:flex;gap:8px;flex-wrap:wrap}
.tp-chips .pill.active{border-color:rgba(219,149,255,.75);box-shadow:0 0 0 1px rgba(219,149,255,.25), 0 10px 26px rgba(176,107,255,.22)}

/* ToC Premium */
.page-wrap{display:grid;grid-template-columns:260px 1fr;gap:24px}
.toc{position:sticky;top:86px;align-self:start}
.toc-title{margin:0 0 8px;font-family:Poppins,sans-serif}
.toc a{display:block;padding:8px 10px;border-radius:8px;text-decoration:none;color:#eae2ff;border:1px dashed transparent}
.toc a:hover{background:rgba(168,118,255,.12);border-color:rgba(176,107,255,.28)}
.toc a.active{background:linear-gradient(180deg,rgba(168,118,255,.18),rgba(219,149,255,.12));border-color:rgba(176,107,255,.35);font-weight:700}

/* Steps Polish */
.step-card{display:flex;gap:18px;margin:6px 0 6px;align-items:flex-start}
.step-card .num{font-size:44px;font-weight:900;color:#b77cff;opacity:.42;line-height:1;min-width:44px;text-align:right}
.chk{display:inline-flex;gap:8px;align-items:center;opacity:.9;margin-top:6px}
.mini-gallery img{width:140px;aspect-ratio:16/10;object-fit:cover;border-radius:8px;border:1px solid rgba(176,107,255,.28);box-shadow:0 6px 16px rgba(30,0,60,.22);transition:.22s ease;cursor:zoom-in}
.mini-gallery img:hover{transform:scale(1.14) translateY(-4px);box-shadow:0 16px 36px rgba(150,70,240,.32)}
.do-dont{display:flex;gap:16px;margin:12px 0 6px;flex-wrap:wrap}
.do-dont > div{flex:1;min-width:260px;padding:14px;border-radius:12px;background:rgba(20,5,34,.55);border:1px solid rgba(176,107,255,.25)}
.do h4,.dont h4{margin:0 0 8px;font-family:Poppins,sans-serif}
.do li{color:#c8ffc8}.dont li{color:#ffb8b8}

@media (max-width:1024px){ .page-wrap{grid-template-columns:1fr} }
/* ===== Premium Scrollbar (global) ===== */

/* Variablen (kannst du oben in :root übernehmen, hier inline für Drop-in) */
:root{
  --sb-size: 12px;
  --sb-track: linear-gradient(180deg, rgba(17,3,34,.8), rgba(17,3,34,.6));
  --sb-thumb: linear-gradient(180deg, #a876ff, #db95ff);
  --sb-thumb-border: rgba(176,107,255,.35);
  --sb-thumb-hover: linear-gradient(180deg, #b489ff, #e5b0ff);
  --sb-glow: rgba(176,107,255,.28);
}

/* Firefox */
html{
  scrollbar-width: thin;                          /* auto | thin | none */
  scrollbar-color: #ba8cff transparent;           /* thumb | track */
}

/* WebKit (Chrome/Edge/Safari) – global */
::-webkit-scrollbar{
  width: var(--sb-size);
  height: var(--sb-size);
}

::-webkit-scrollbar-track{
  background: var(--sb-track);
  border-left: 1px solid rgba(176,107,255,.22);
  box-shadow: inset 0 0 12px rgba(0,0,0,.25);
}

::-webkit-scrollbar-thumb{
  background: var(--sb-thumb);
  border-radius: 12px;
  /* „Inset“-Look: transparenter Rand + Outline */
  background-clip: padding-box;
  border: 3px solid transparent;
  box-shadow:
    inset 0 0 0 1px var(--sb-thumb-border),
    0 6px 16px var(--sb-glow);
}

::-webkit-scrollbar-thumb:hover{
  background: var(--sb-thumb-hover);
  box-shadow:
    inset 0 0 0 1px rgba(219,149,255,.55),
    0 10px 24px rgba(176,107,255,.38);
}

::-webkit-scrollbar-thumb:active{
  filter: saturate(1.05) contrast(1.03);
  box-shadow:
    inset 0 0 0 1px rgba(219,149,255,.75),
    0 6px 18px rgba(176,107,255,.34);
}

::-webkit-scrollbar-corner{
  background: transparent;
}

/* ===== Kompakte Variante für kleinere Container =====
   Nutze class="scrollbar-compact" auf beliebigen Scroll-Boxen */
.scrollbar-compact{
  scrollbar-width: thin;
}
.scrollbar-compact::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
.scrollbar-compact::-webkit-scrollbar-thumb{
  border-width: 2px;
  border-radius: 10px;
}

/* ===== Pixeliger Track für retro Vibes (optional)
   class="scrollbar-px" auf Container setzen */
.scrollbar-px::-webkit-scrollbar-track{
  background:
    linear-gradient(180deg, rgba(17,3,34,.9), rgba(17,3,34,.7)),
    repeating-linear-gradient(180deg,
      rgba(219,149,255,.09) 0 6px,
      transparent 6px 12px);
  image-rendering: pixelated;
}
.scrollbar-px::-webkit-scrollbar-thumb{
  box-shadow:
    inset 0 0 0 1px rgba(219,149,255,.55),
    0 8px 18px rgba(176,107,255,.30);
}

/* ===== Empfohlene Ziel-Elemente: gezielt stylen, ohne alles „fett“ zu machen ===== */
.toc .card,
#serverMap,
.changelog,
.roadmap-list,
.mini-gallery{
  /* schlanke Scrollbars in diesen Bereichen */
  scrollbar-width: thin;
}
.toc .card::-webkit-scrollbar,
#serverMap::-webkit-scrollbar,
.changelog::-webkit-scrollbar,
.roadmap-list::-webkit-scrollbar,
.mini-gallery::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
/* ============================================
   PIXEL ART SCROLLBAR — SZYMCRAFT X EDITION
   ============================================ */

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #b277ff #0a0217; /* thumb | track */
}

/* Chrome / Edge / Safari */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
}

/* TRACK (Hintergrund) */
::-webkit-scrollbar-track {
  background:
    repeating-linear-gradient(
      180deg,
      #0a0217 0px,
      #0a0217 4px,
      #130427 4px,
      #130427 8px
    );
  border-left: 2px solid #321052;
  image-rendering: pixelated;
}

/* THUMB (Pixel-Schieber) */
::-webkit-scrollbar-thumb {
  background:
    repeating-linear-gradient(
      180deg,
      #b277ff 0px,
      #b277ff 4px,
      #c68bff 4px,
      #c68bff 8px
    );
  border: 2px solid #321052;
  box-shadow:
    inset 0 0 0 2px #00000066,
    0 0 0 2px #00000066;
  image-rendering: pixelated;
}

/* Hover: etwas heller */
::-webkit-scrollbar-thumb:hover {
  background:
    repeating-linear-gradient(
      180deg,
      #c68bff 0px,
      #c68bff 4px,
      #d89cff 4px,
      #d89cff 8px
    );
}

/* Active: crispy dark outline */
::-webkit-scrollbar-thumb:active {
  box-shadow:
    inset 0 0 0 2px #000,
    0 0 0 2px #000;
  background:
    repeating-linear-gradient(
      180deg,
      #a866ff 0px,
      #a866ff 4px,
      #ba7bff 4px,
      #ba7bff 8px
    );
}
/* ===== Download-Center Add-on ===== */
.dl-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 14px}
.dl-tab.active{border-color:rgba(219,149,255,.8);box-shadow:0 16px 40px rgba(176,107,255,.32)}

.dl-actions{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.gradient-btn.outline{
  background:linear-gradient(90deg, rgba(168,118,255,.12), rgba(219,149,255,.08)) !important;
  color:#efe7ff !important; border-color:rgba(176,107,255,.35) !important;
}

.dl-legacy{margin:8px 0 0 16px}
.dropzone{
  display:grid;place-items:center;height:140px;border:2px dashed rgba(176,107,255,.35);
  border-radius:14px;background:rgba(20,5,34,.5);transition:.2s;cursor:pointer;text-align:center
}
.dropzone.hover{border-color:rgba(219,149,255,.75);box-shadow:0 10px 32px rgba(176,107,255,.22)}
.dropzone.ok{border-color:#34d399}
.dropzone.bad{border-color:#ef4444}

.cmp{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.cmp-input{
  padding:10px 12px;border-radius:10px;background:rgba(20,5,34,.55);
  border:1px solid rgba(176,107,255,.28);color:#efe7ff
}
.cmp-result{margin-top:8px;font-weight:700}
.cmp-result.ok{color:#34d399}
.cmp-result.bad{color:#ef4444}
/* ===== Hero Epic Pack ===== */
.hero { position: relative; overflow: hidden; }
.fx-layer,
.fx-aurora,
.fx-scanlines { position:absolute; inset:0; pointer-events:none; z-index:1; }

/* Particles Canvas setzt sich unter heroContent */
#fxParticles { z-index: 1; }

/* Aurora: sanfter lila Nebel mit Noise */
.fx-aurora {
  z-index: 2;
  background:
    radial-gradient(60vmax 60vmax at 20% 10%, rgba(168,118,255,.18), transparent 60%),
    radial-gradient(50vmax 50vmax at 80% 25%, rgba(219,149,255,.14), transparent 60%),
    radial-gradient(40vmax 40vmax at 60% 70%, rgba(140,80,255,.12), transparent 60%);
  mix-blend-mode: screen;
  filter: saturate(110%) contrast(105%);
  animation: auroraShift 22s ease-in-out infinite alternate;
}
@keyframes auroraShift {
  0%   { transform: translate3d(0,0,0) scale(1);   filter: hue-rotate(0deg); }
  100% { transform: translate3d(-2%, -2%, 0) scale(1.04); filter: hue-rotate(8deg); }
}

/* Scanlines (ganz subtil, CRT-Touch) */
.fx-scanlines {
  z-index: 3;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.05) 0px,
      rgba(255,255,255,.05) 1px,
      transparent 1px,
      transparent 3px
    );
  opacity: .06;
  mix-blend-mode: soft-light;
}

/* Scroll Cue am unteren Rand */
.scroll-cue {
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  z-index: 4; opacity:.9;
}
.cue-chevron {
  display:inline-block; width: 12px; height: 12px; border-bottom:2px solid #e9ddff; border-right:2px solid #e9ddff;
  transform: rotate(45deg);
  animation: cueBounce 1.8s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(176,107,255,.35));
}
@keyframes cueBounce {
  0%,100% { transform: translateY(0) rotate(45deg); opacity:.7; }
  50%     { transform: translateY(6px) rotate(45deg); opacity:1; }
}

/* heroContent über allen FX */
.hero .heroContent { position: relative; z-index: 5; }

/* Premium Parallax-Targets (falls noch nicht gesetzt) */
[data-parallax]{ will-change: transform; transition: transform .12s ease; }

/* Reduced motion: alles ruhig */
@media (prefers-reduced-motion: reduce){
  .fx-aurora, .cue-chevron { animation: none !important; }
  .fx-scanlines { opacity: .03; }
}
/* ===== Trailer EPIC Pack ===== */
.trailer-cinematic{ margin-top:16px; }
.trailer-cinematic:hover{ transform:translateY(-6px) }
.trailer-cinematic .px-bezel{
  position:relative; height:18px; border:1px solid rgba(176,107,255,.35);
  border-bottom:none; border-radius:14px 14px 0 0;
  background:
    linear-gradient(180deg, rgba(168,118,255,.22), rgba(219,149,255,.12));
  box-shadow: inset 0 0 0 1px rgba(219,149,255,.22), 0 14px 40px rgba(120,20,220,.25);
}
.trailer-frame{
  position:relative; overflow:hidden; border:1px solid rgba(176,107,255,.32);
  border-radius:0 0 16px 16px; aspect-ratio:16/9; background:#000;
  box-shadow:0 18px 48px rgba(120,20,220,.30);
}
.trailer-frame video{ width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.95) contrast(1.04); }

.tr-gradient{
  position:absolute; inset:auto 0 0 0; height:36%;
  background:linear-gradient(180deg, transparent, rgba(10,2,20,.75));
  pointer-events:none;
}

.tr-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:90px; height:90px; border-radius:18px; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(168,118,255,.22), rgba(219,149,255,.14));
  border:1px solid rgba(219,149,255,.45);
  box-shadow:0 12px 34px rgba(176,107,255,.35);
  cursor:pointer; z-index:3;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.tr-play .ring{
  position:absolute; inset:-8px; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 0 rgba(176,107,255,.25);
  transition: box-shadow .3s ease;
}
.tr-play:hover{ transform:translate(-50%,-50%) scale(1.06); box-shadow:0 18px 50px rgba(176,107,255,.45) }
.tr-play:hover .ring{ box-shadow:0 0 24px 8px rgba(176,107,255,.22) }
.trailer-frame.playing .tr-play{ opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.85) }

.tr-controls{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; gap:10px; padding:10px 12px;
}
.tr-left,.tr-right{ display:flex; align-items:center; gap:8px; }
.tr-ctrl{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 10px; border-radius:10px;
  background:linear-gradient(180deg, rgba(168,118,255,.16), rgba(219,149,255,.10));
  border:1px solid rgba(176,107,255,.32); color:#efe7ff; font-weight:800; cursor:pointer;
}
.tr-ctrl:hover{ border-color:rgba(219,149,255,.55) }
.tr-right .time{ font-variant-numeric:tabular-nums; opacity:.9 }

.tr-progress{
  position:relative; flex:1; height:10px; border-radius:8px;
  background:rgba(255,255,255,.08); border:1px solid rgba(176,107,255,.22);
  overflow:hidden; cursor:pointer;
}
.tr-progress .buffer{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg, rgba(200,180,255,.25), rgba(200,180,255,.10));
}
.tr-progress .bar{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg,#a876ff,#db95ff);
  box-shadow:0 6px 16px rgba(176,107,255,.35);
}

.trailer-frame:focus-within{ outline:2px solid rgba(219,149,255,.6); outline-offset:2px }

/* Optional: sanfter Tilt */
#trailerCine:hover .trailer-frame{ transform:perspective(1000px) rotateX(1.2deg) rotateY(-1.2deg); transition:transform .2s ease }
#trailerCine .trailer-frame{ transition:transform .2s ease }

/* Reduced motion: ruhiger */
@media (prefers-reduced-motion: reduce){
  #trailerCine .trailer-frame{ transform:none !important }
}
/* ===== Roadmap Premium ===== */
.rm-headbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-bottom:12px;
}
.rm-progress{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.rp-track{ width:260px; max-width:60vw; height:10px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(176,107,255,.2); overflow:hidden }
.rp-track>span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,#a876ff,#db95ff); transition:width .45s ease }
.rp-text{ opacity:.9 }

.rm-filters{ display:flex; gap:8px; flex-wrap:wrap }

.rm-wrap{ padding:0 }
.rm-timeline{
  position:relative; overflow-x:auto; overflow-y:hidden; padding:22px 18px;
  display:grid; grid-auto-flow:column; grid-auto-columns: min(420px, 88vw);
  gap:16px; scroll-snap-type:x mandatory;
}
.rm-timeline::-webkit-scrollbar{ height:10px }
.rm-item{ position:relative; scroll-snap-align:start; }
.rm-item .rm-node{
  position:absolute; left:8px; top:-6px; width:12px; height:12px;
  background:#a876ff; border:2px solid #321052; image-rendering:pixelated; z-index:2;
  box-shadow:0 0 0 2px #0a0314, 0 8px 18px rgba(176,107,255,.28);
}
.rm-item[data-status="planned"]  .rm-node{ background:#7a5fff }
.rm-item[data-status="in-progress"] .rm-node{ background:#b98bff }
.rm-item[data-status="done"]     .rm-node{ background:#7dffa3; border-color:#0e3b2b }

.rm-card{
  margin-left:24px; position:relative;
  border:1px solid rgba(176,107,255,.28); border-radius:12px; padding:14px;
  background:linear-gradient(180deg, rgba(17,3,34,.96), rgba(17,3,34,.86));
  box-shadow:0 14px 40px rgba(90,0,180,.22);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rm-card header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px }
.rm-badge{
  font-weight:800; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(176,107,255,.30);
  background:linear-gradient(90deg, rgba(168,118,255,.18), rgba(219,149,255,.12));
}
.rm-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }
.rm-chip{
  padding:6px 10px; border-radius:8px; font-weight:700;
  background:rgba(255,255,255,.05); border:1px solid rgba(176,107,255,.2)
}
.rm-chip.rm-ok{ border-color:#38d29b; background:rgba(56,210,155,.08) }

.rm-card:hover{ transform:translateY(-6px); box-shadow:0 20px 60px rgba(120,20,220,.28); border-color:rgba(219,149,255,.45) }
.rm-item[data-status="in-progress"] .rm-card{ border-color:rgba(219,149,255,.55) }
.rm-item[data-status="done"] .rm-card{ opacity:.92 }

.rm-legend{ display:flex; align-items:center; gap:10px; margin-top:10px }
.rm-legend .dot{
  display:inline-block; width:10px; height:10px; border:2px solid #321052; image-rendering:pixelated;
}
.rm-legend .planned{ background:#7a5fff }
.rm-legend .progress{ background:#b98bff }
.rm-legend .done{ background:#7dffa3; border-color:#0e3b2b }
.rm-legend .sep{ opacity:.5; margin:0 6px }

/* Tooltip (leicht) */
.rm-card[data-tip]:hover::after{
  content:attr(data-tip); position:absolute; left:14px; right:14px; bottom:100%; margin-bottom:8px;
  padding:8px 10px; border-radius:10px; font-size:.95rem;
  background:rgba(15,3,30,.96); border:1px solid rgba(176,107,255,.32);
  box-shadow:0 12px 30px rgba(120,20,220,.28);
}

/* Mobile Tweaks */
@media (max-width:720px){
  .rp-track{ width:200px }
  .rm-item .rm-node{ left:6px }
  .rm-card{ margin-left:22px }
}
/* Shader-BG im Hero */
.hero { position: relative; overflow: hidden; }
#shaderBG.fx-layer{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  /* falls WebGL nicht lädt, bleibt dein Bild sichtbar */
  opacity:1; transition:opacity .25s ease;
}
/* Content liegt über dem Canvas */
.hero .heroContent{ position:relative; z-index:5 }

/* Reduced Motion: weiche auf statischen Hintergrund aus */
@media (prefers-reduced-motion: reduce){
  #shaderBG{ display:none !important; }
}
/* ===== Shrink-on-Scroll Navbar ===== */
:root{
  --navH: 116px;         /* Ausgangshöhe */
  --navH-compact: 72px;  /* kompakte Höhe */
}

/* Basis */
#navbar{
  transition: padding .25s ease, background .25s ease, border-color .25s ease;
}
#navbar #navbarContent{
  padding: 16px 20px;             /* Standard */
  transition: padding .25s ease;
}

/* Logo + Name */
#logoImg{
  width: 80px; height: 80px;
  transition: transform .25s ease, width .25s ease, height .25s ease, filter .25s ease;
}
#logoText{
  font-size: 1.3rem;
  transition: font-size .25s ease, opacity .25s ease, letter-spacing .25s ease;
}

/* Nav-Row Spacing */
.navRow{
  padding-top: 10px;
  transition: padding .25s ease, gap .25s ease;
}

/* Kompaktzustand */
#navbar.compact #navbarContent{
  padding: 8px 16px;
}
#navbar.compact #logoImg{
  width: 56px; height: 56px;        /* kleineres Logo */
  filter: drop-shadow(0 6px 18px rgba(160,80,255,.20));
}
#navbar.compact #logoText{
  font-size: 1.05rem;
  letter-spacing: .4px;
  opacity: .95;
}
#navbar.compact .navRow{
  padding-top: 6px;
  gap: 10px;
}

/* dezenter kompakter Hintergrund */
#navbar.compact{
  background: linear-gradient(180deg, rgba(9,2,18,.96), rgba(9,2,18,.88));
  border-bottom-color: rgba(176,107,255,.26);
  box-shadow: 0 10px 30px rgba(90,0,180,.20);
}

/* ToC am Navbar-Rand ausrichten: 1x die alte fixe top ersetzen! */
.toc{ top: var(--navH); transition: top .25s ease; }
#navbar.compact ~ main .toc{ top: var(--navH-compact); }

/* Mobile: schon kompakter starten */
@media (max-width: 720px){
  :root{ --navH: 96px; --navH-compact: 64px; }
}
/* ===== Tutorial Stepper + Accordion + Pixel Codebox ===== */

/* Vertikaler Stepper */
.stepper{position:relative;margin:18px 0 0;padding-left:28px}
.stepper::before{
  content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,rgba(176,107,255,.35),rgba(176,107,255,.12));
  image-rendering:pixelated
}

/* Step-Card */
.step{
  position:relative;margin:14px 0 0;border:1px solid rgba(176,107,255,.28);
  border-radius:14px;background:linear-gradient(180deg,rgba(17,3,34,.96),rgba(17,3,34,.86));
  box-shadow:0 14px 40px rgba(90,0,180,.22);overflow:hidden;transition:transform .18s, box-shadow .18s, border-color .18s
}
.step:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(120,20,220,.28);border-color:rgba(219,149,255,.45)}
.step .dot{
  position:absolute;left:4px;top:18px;width:12px;height:12px;border:2px solid #321052;background:#7a5fff;image-rendering:pixelated;
  box-shadow:0 0 0 2px #0a0314,0 8px 18px rgba(176,107,255,.28)
}
.step.done .dot{background:#7dffa3;border-color:#0e3b2b}
.step.active .dot{background:#b98bff}

/* Header = Accordion-Button */
.step-h{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:14px 16px 12px 16px;cursor:pointer;background:transparent;border:0;color:inherit
}
.step-h:focus-visible{outline:2px solid rgba(219,149,255,.6);outline-offset:2px}
.step-ico{width:18px;height:18px;display:inline-block;image-rendering:pixelated}
.step-num{font-weight:900;font-family:Poppins,sans-serif;opacity:.7}
.step-title{font-weight:800;font-family:Poppins,sans-serif;letter-spacing:.3px}
.step-kicker{margin-left:auto;opacity:.8;font-size:.95rem}

/* Inhalt (collapsible) */
.step-body{padding:0 16px 14px 16px;display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.step[aria-expanded="true"] .step-body{grid-template-rows:1fr}
.step-inner{overflow:hidden}
.step p{margin:8px 0}

/* Pixel-Codebox */
.codebox-px{
  display:flex;align-items:center;gap:10px;margin:10px 0;padding:10px 12px;border-radius:10px;
  background:repeating-linear-gradient(90deg,#120623 0 8px,#15092a 8px 16px);
  border:2px solid #321052;image-rendering:pixelated;box-shadow:inset 0 0 0 1px rgba(219,149,255,.22),0 6px 16px rgba(30,0,60,.25)
}
.codebox-px code{white-space:nowrap}
.codebox-px .copy{margin-left:auto}

/* Mini-Galerie tighter */
.step .mini-gallery{margin-top:8px}

/* OS-Block in Cards hübsch einrücken */
.os-block .step{margin-top:10px}

/* Kleinere Abstände insgesamt */
.sectionTitle{margin-bottom:10px}
/* ========== PRESET A: COMPACT LINE STEPPER ========== */
.tut--compact.stepper { padding-left:22px; }
.tut--compact.stepper::before { left:8px; width:1px; opacity:.55; }
.tut--compact .step { border-radius:12px; box-shadow:none; background:rgba(14,4,26,.85); }
.tut--compact .step:hover { transform:none; box-shadow:none; border-color:rgba(176,107,255,.35); }
.tut--compact .step .dot { left:-2px; top:18px; width:8px; height:8px; border-width:1px; box-shadow:none; }
.tut--compact .step-h { padding:12px 14px; }
.tut--compact .step-title { font-weight:800; letter-spacing:.2px; }
.tut--compact .step-kicker { opacity:.65; font-size:.9rem; }
.tut--compact .step-body { padding:0 14px 12px 14px; }
.tut--compact .codebox-px { border-width:1px; box-shadow:none; background:#120624; }
.tut--compact .mini-gallery img { border-radius:8px; }
/* ========== PRESET B: MINIMAL CARDS ========== */
.tut--minimal.stepper { padding-left:0; }
.tut--minimal.stepper::before { display:none; }
.tut--minimal .step { border-radius:14px; margin-top:12px; }
.tut--minimal .step .dot { display:none; }
.tut--minimal .step-h { padding:14px 16px; gap:12px; }
.tut--minimal .step-num {
  display:inline-flex; width:26px; height:26px; align-items:center; justify-content:center;
  border-radius:6px; font-weight:900;
  background:linear-gradient(180deg, rgba(168,118,255,.18), rgba(219,149,255,.12));
  border:1px solid rgba(176,107,255,.3);
}
.tut--minimal .step-ico { width:16px; height:16px; opacity:.9; }
.tut--minimal .step-body { padding:0 16px 14px 16px; }
.tut--minimal .codebox-px { background:#130628; border-color:#3b145f; }
/* ========== PRESET C: CHECKLIST TILES ========== */
.tut--tiles.stepper { padding-left:0; }
.tut--tiles.stepper::before { display:none; }
.tut--tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (max-width:900px){ .tut--tiles { grid-template-columns:1fr; } }
.tut--tiles .step { margin:0; border-radius:12px; }
.tut--tiles .step .dot { display:none; }
.tut--tiles .step-h { padding:12px 12px; }
.tut--tiles .step-body { padding:0 12px 12px 12px; }
.tut--tiles .step-kicker { display:none; }
.tut--tiles .codebox-px { margin-top:8px; }
/* Thumbnails schmaler & weniger Zoom */
.sshot, .mini-gallery img { box-shadow:none; transform:none; }
.sshot:hover { transform:scale(1.12); }
/* ===== Premium Polish für Tutorial ===== */

/* 2.1 Gesamthintergrund dezenter strukturierter */
body:before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(1200px 800px at 10% 0%, rgba(160,80,255,.10), transparent 60%),
    radial-gradient(900px 700px at 95% 15%, rgba(219,149,255,.08), transparent 62%),
    linear-gradient(135deg,#070112,#100425 55%,#160835);
  mix-blend-mode:normal; opacity:.9;
}

/* 2.2 „Premium“-Karte: feiner Rand, Glow, subtile Textur */
.card, .step{
  position:relative;
  background:linear-gradient(180deg, rgba(14,4,26,.92), rgba(14,4,26,.84));
  border:1px solid rgba(176,107,255,.28);
  box-shadow:0 14px 40px rgba(90,0,180,.22);
}
.card:before, .step:before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(219,149,255,.14), rgba(168,118,255,.08)) border-box;
  -webkit-mask: 
    linear-gradient(#000 0 0) padding-box, 
    linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor; mask-composite: exclude;
  border:1px solid transparent;
  opacity:.55;
}

/* 2.3 Abschnittstitel mit Pixel-Underline */
.sectionTitle{
  position:relative; display:inline-block; padding-bottom:6px;
}
.sectionTitle:after{
  content:""; position:absolute; left:2px; right:2px; bottom:0; height:2px;
  background:linear-gradient(90deg, rgba(219,149,255,.85) 0 0) left/6px 2px repeat-x;
  image-rendering:pixelated; opacity:.85;
}

/* 2.4 Tutorial-Intro */
.tut-intro{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.intro-right{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  padding:6px 10px; border-radius:999px; font-weight:800;
  background:linear-gradient(90deg, rgba(168,118,255,.16), rgba(219,149,255,.12));
  border:1px solid rgba(176,107,255,.28);
}

/* 2.5 Step-Header: dezente Achse & Akzentstreifen */
.stepper{ padding-left:24px; }
.stepper::before{
  left:10px; width:1px;
  background:linear-gradient(180deg, rgba(176,107,255,.35), rgba(176,107,255,.10));
}
.step .dot{ left:-1px; top:18px; width:9px; height:9px; border-width:1px; }
.step-h{ gap:12px; }
.step-num{
  width:28px; height:28px; border-radius:6px;
  background:linear-gradient(180deg, rgba(168,118,255,.22), rgba(219,149,255,.12));
  border:1px solid rgba(176,107,255,.34);
  font-weight:900;
}
.step-title{ letter-spacing:.35px; }
.step[aria-expanded="true"] .step-h{ background:linear-gradient(180deg, rgba(168,118,255,.08), rgba(219,149,255,.06)); }

/* 2.6 Pixel-Codebox aufgeräumter */
.codebox{
  background:
    linear-gradient(180deg, rgba(18,6,35,.92), rgba(18,6,35,.86)),
    repeating-linear-gradient(90deg,#120623 0 10px,#15092a 10px 20px);
  border:1px solid rgba(176,107,255,.35);
  box-shadow: inset 0 0 0 1px rgba(219,149,255,.18), 0 6px 16px rgba(30,0,60,.22);
}
.codebox code{ opacity:.95; }

/* 2.7 Thumbs: Pixel-Bezel & Glow */
.mini-gallery img{
  border:1px solid rgba(176,107,255,.18);
  box-shadow:0 8px 20px rgba(120,20,220,.18);
  image-rendering:auto;
}
.mini-gallery img:hover{
  box-shadow:0 16px 40px rgba(176,107,255,.32);
}

/* 2.8 Sticky Fortschritt (oben unter Navbar) */
.tut-progress{
  position:sticky; top:var(--navH); z-index:40; height:10px; margin:0 0 10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(176,107,255,.22);
  border-left:none; border-right:none; display:block;
}
#navbar.compact ~ .tut-progress{ top:var(--navH-compact); }
.tut-progress .bar{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#a876ff,#db95ff);
  box-shadow:0 6px 16px rgba(176,107,255,.35);
  transition:width .35s ease;
}
.tut-progress .dot{
  position:absolute; top:50%; transform:translate(-50%,-50%); width:12px; height:12px; border-radius:3px;
  background:#e9ddff; box-shadow:0 0 0 2px rgba(168,118,255,.45), 0 8px 18px rgba(176,107,255,.30);
  left:0%;
  transition:left .35s ease;
}

/* 2.9 Callouts (optional in Texten nutzbar) */
.call{
  border:1px solid rgba(176,107,255,.32); border-radius:12px; padding:10px 12px; margin:10px 0;
  background:linear-gradient(180deg, rgba(20,6,36,.85), rgba(20,6,36,.78));
}
.call.ok{ border-color:#38d29b66; background:linear-gradient(180deg, #0c2019cc, #0a1a15cc); }
.call.warn{ border-color:#f59e0b66; background:linear-gradient(180deg, #2a1705cc, #231204cc); }

/* 2.10 Feinheiten */
.toc a{ font-weight:700; letter-spacing:.2px; }
.toc a.active{ box-shadow:0 8px 20px rgba(176,107,255,.22); }
.tut-progress{
  position: sticky;
  top: var(--navH);
  z-index: 40;
  height: 10px;
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(176,107,255,.22);
  border-left: none; border-right: none;
}
#navbar.compact ~ .tut-progress{ top: var(--navH-compact); }
.tut-progress .bar{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg,#a876ff,#db95ff);
  box-shadow: 0 6px 16px rgba(176,107,255,.35);
  transition: width .25s ease;
}
.tut-progress .dot{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:12px; height:12px; border-radius:3px; left:0%;
  background:#e9ddff; box-shadow:0 0 0 2px rgba(168,118,255,.45), 0 8px 18px rgba(176,107,255,.30);
  transition: left .25s ease;
}
/* ===== Serverinfo – Minimal ===== */
.serverinfo-min{ padding:16px; }
.serverinfo-min .sv-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;
}
.serverinfo-min .sv-head h3{
  margin:0; font-family:Poppins,sans-serif; font-weight:800; letter-spacing:.3px;
}
.serverinfo-min .sv-status{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  background:linear-gradient(90deg, rgba(168,118,255,.14), rgba(219,149,255,.10));
  border:1px solid rgba(176,107,255,.28); font-weight:700; color:#e9ddff;
}
.serverinfo-min .sv-status i{
  width:10px; height:10px; border-radius:50%; background:#34d399; box-shadow:0 0 10px #34d399aa;
  display:inline-block;
}

.serverinfo-min .sv-ip{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0 6px;
}
.serverinfo-min .sv-ip code{
  padding:8px 10px; border-radius:10px; border:1px solid rgba(176,107,255,.28);
  background:rgba(18,6,35,.6); font-weight:800; letter-spacing:.3px;
}

.serverinfo-min .sv-metrics{
  display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 2px;
}
.serverinfo-min .chip{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:12px;
  background:linear-gradient(180deg, rgba(18,6,35,.9), rgba(18,6,35,.82));
  border:1px solid rgba(176,107,255,.28); min-width:140px; flex:0 1 auto;
}
.serverinfo-min .chip span{ font-size:.82rem; color:#cdb7ff; opacity:.9; }
.serverinfo-min .chip strong{ font-size:1.02rem; letter-spacing:.2px; }

.serverinfo-min .sv-actions{
  display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 4px;
}

.serverinfo-min .sv-more{
  width:100%; text-align:center; margin-top:6px;
  background:transparent; color:#e6d9ff; border:1px dashed rgba(176,107,255,.35);
  padding:10px 12px; border-radius:10px; font-weight:800;
}
.serverinfo-min .sv-more:hover{ border-style:solid; }

.serverinfo-min .sv-panel{ margin-top:10px; }
.serverinfo-min .sv-list{ margin:0; padding-left:18px; opacity:.95; }
.serverinfo-min .sv-list li{ margin:6px 0; }

/* Kleiner auf Mobile */
@media (max-width:720px){
  .serverinfo-min .chip{ min-width:calc(50% - 5px); }
  .serverinfo-min .hide-sm{ display:none; }
}
/* ===== SzymCraft X – Launch Timer ===== */
.launch-card{
  margin-top: 24px;
  padding: 20px 20px 18px;
  position: relative;
  overflow: hidden;
}

.launch-card::before{
  content:"";
  position:absolute; inset:-20%; pointer-events:none; z-index:-1;
  background:
    radial-gradient(60% 60% at 0% 0%, rgba(168,118,255,.20), transparent 60%),
    radial-gradient(70% 70% at 100% 0%, rgba(219,149,255,.18), transparent 70%),
    radial-gradient(80% 80% at 50% 120%, rgba(80,20,160,.35), transparent 70%);
  opacity:.75;
  filter: blur(18px);
}

.launch-head{ margin-bottom: 14px; }
.launch-head .sectionTitle{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom: 4px;
}
.launch-badge{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  padding:4px 10px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(168,118,255,.22), rgba(219,149,255,.14));
  border:1px solid rgba(176,107,255,.45);
}

/* Zahlen-Grid */
.launch-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
  margin-top: 8px;
}

.launch-unit{
  padding:12px 10px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(16,4,32,.96), rgba(10,2,22,.9));
  border:1px solid rgba(176,107,255,.40);
  box-shadow:
    0 10px 26px rgba(80,10,150,.45),
    0 0 30px rgba(120,40,220,.30) inset;
  text-align:center;
}

.launch-value{
  display:block;
  font-family:"Poppins",sans-serif;
  font-weight:900;
  font-size:1.8rem;
  letter-spacing:.12em;
  color:#f4e9ff;
  text-shadow:0 0 16px rgba(219,149,255,.65);
}

.launch-label{
  display:block;
  margin-top:4px;
  font-size:.82rem;
  color:#cdb7ff;
  text-transform:uppercase;
  letter-spacing:.18em;
  opacity:.95;
}

.launch-footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:16px;
}
.launch-footer .gradient-btn{
  padding-inline: 18px;
}
#lt-status{
  font-size:.9rem;
}

/* Wenn fertig: Status-Farbe */
.launch-card.launch-live #lt-status{
  color:#6ef7b3;
}
.launch-card.launch-live .launch-value{
  text-shadow:0 0 22px rgba(110,247,179,.9);
}

/* Responsive */
@media (max-width:720px){
  .launch-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
.serverinfo-card {
    padding: 20px;
}

.server-status-line {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    font-size: 1.05rem;
}

.server-status-line .label {
    opacity: .8;
}

.pill {
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
}

.status-online {
    background: rgba(95, 255, 170, 0.18);
    border: 1px solid rgba(95, 255, 170, .45);
    color: #b4ffe0;
}

.status-offline {
    background: rgba(255, 95, 95, 0.18);
    border: 1px solid rgba(255, 95, 95, .45);
    color: #ffc7c7;
}
/* ===== Playerlist Tooltip ===== */
.pill.pill-ghost{
  background: linear-gradient(90deg, rgba(168,118,255,.12), rgba(219,149,255,.08));
  border: 1px solid rgba(176,107,255,.45);
  color: #e6ddff;
  font-size: .8rem;
  cursor:pointer;
}

.serverinfo-card{
  position:relative; /* damit Panel sich daran ausrichten kann */
}

/* Panel */
.playerlist-panel{
  position:absolute;
  right:16px;
  top: 52px;
  width: 230px;
  max-height: 260px;
  padding: 10px 10px 8px;
  border-radius: 12px;
  background: radial-gradient(circle at top, rgba(40,10,90,.9), rgba(10,2,24,.96));
  border:1px solid rgba(176,107,255,.65);
  box-shadow:0 18px 40px rgba(90,0,180,.55);
  display:none;
  z-index:15;
}

.playerlist-panel.open{
  display:block;
}

.playerlist-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
  font-size:.86rem;
  font-weight:700;
  color:#f2e9ff;
}

.playerlist-head button{
  background:transparent;
  border:0;
  color:#cdb7ff;
  font-size:1rem;
  cursor:pointer;
}

.playerlist-panel ul{
  list-style:none;
  margin:0;
  padding:0;
  max-height:200px;
  overflow:auto;
  font-size:.86rem;
}

.playerlist-panel li{
  padding:3px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:#e8e0ff;
}

.playerlist-panel li:last-child{
  border-bottom:none;
}

/* Scrollbar leicht anpassen */
.playerlist-panel ul::-webkit-scrollbar{
  width:6px;
}
.playerlist-panel ul::-webkit-scrollbar-track{
  background:rgba(10,2,24,.9);
}
.playerlist-panel ul::-webkit-scrollbar-thumb{
  background:rgba(176,107,255,.7);
  border-radius:3px;
}
/* ===== Seite sperren, wenn Modal offen ist ===== */
body.modal-open{
  overflow: hidden;        /* kein Scrollen */
}

/* ===== SzymCraft X – Warn-Popup (Modal) ===== */
.sz-modal-backdrop{
  position:fixed;
  inset:0;
  background:radial-gradient(circle at 20% 0%, rgba(168,118,255,.30), transparent 60%),
             radial-gradient(circle at 80% 100%, rgba(40,10,80,.88), rgba(0,0,0,.98));
  backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:120;
  pointer-events:auto;
  opacity:0;
  transform:scale(1.02);
  transition: opacity .22s ease, transform .22s ease;
}

.sz-modal-backdrop[aria-hidden="true"]{
  opacity:0;
  pointer-events:none;
}

.sz-modal-backdrop.open{
  opacity:1;
  transform:scale(1);
}

.sz-modal{
  max-width:560px;
  width:100%;
  margin:0 16px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(12,2,26,.98), rgba(4,0,12,.98));
  border:1px solid rgba(255,90,120,.65);
  box-shadow:
    0 24px 70px rgba(0,0,0,.9),
    0 0 40px rgba(255,110,140,.55);
  padding:16px 18px 14px;
  position:relative;
}

.sz-modal-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}

.sz-modal-icon{
  width:32px;
  height:32px;
  border-radius:8px;
  background:linear-gradient(135deg, #ff3860, #ff9a76);
  box-shadow:0 0 16px rgba(255,80,120,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-family:Poppins,sans-serif;
  color:#fff;
}

.sz-modal-head h2{
  font-family:Poppins,sans-serif;
  font-size:1.25rem;
  font-weight:800;
  margin:0 0 4px;
}

.sz-modal-sub{
  font-size:.9rem;
}

.sz-modal-close{
  margin-left:auto;
  background:transparent;
  border:0;
  color:#f5d4ff;
  font-size:1.4rem;
  cursor:pointer;
}

.sz-modal-body{
  font-size:.95rem;
  line-height:1.55;
  margin-top:4px;
}

.sz-modlist{
  list-style:none;
  margin:8px 0 0;
  padding:0;
}

.sz-modlist li{
  padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.sz-modlist li:last-child{
  border-bottom:none;
}

.sz-modlist code{
  background:rgba(0,0,0,.35);
  border-radius:6px;
  padding:3px 6px;
  border:1px solid rgba(255,255,255,.08);
  font-size:.9rem;
}

.sz-modal-footer{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}

@media (max-width:540px){
  .sz-modal{
    padding:14px 12px 12px;
  }
}