/* Elitencraft v2: gleiche Gestaltungssprache wie *.phiillow.me (Leiste oben, Mono-Beschriftungen, eckige Karten),
   aber mit Elitencrafts Grün/Pink und dem Nebel-Hintergrund. Alle Klassennamen von ec.css bleiben erhalten. */
:root{
  --green:#00d1a0; --pink:#ff5cf0; --bg:#07070d; --ink:#07070d;
  --glass:rgba(255,255,255,.07); --glass2:rgba(255,255,255,.12); --border:rgba(255,255,255,.16);
  --text:#f3f3fa; --muted:rgba(243,243,250,.74); --dim:#a6a6c0;
  --ease:cubic-bezier(.22,.8,.3,1); --bar:60px; --radius:6px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --grad:linear-gradient(90deg,var(--green),var(--pink));
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 16px);color-scheme:dark}
body{font-family:"Instrument Sans",Inter,"Helvetica Neue",Arial,system-ui,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:clip}
body.bg{background:var(--bg) url('/background.gif') center/cover fixed no-repeat;
  /* WebP ist ca. 8x kleiner (342 KB statt 2,7 MB), gleiche 75 Bilder und Zeiten; Browser ohne image-set behalten das GIF. */
  background-image:image-set(url('/background.webp') type('image/webp'),url('/background.gif') type('image/gif'))}
body.bg::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(0,0,0,.4),rgba(7,7,13,.86));backdrop-filter:blur(2px);z-index:-1}
::selection{background:color-mix(in srgb,var(--green) 40%,transparent)}
a{color:inherit}
.header,.container,footer.site{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding-inline:clamp(16px,4vw,32px)}

/* ---------- Kopfleiste ---------- */
nav.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--bar);padding:0 clamp(16px,4vw,32px);
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
nav.top .brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 1rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
nav.top .brand::after{content:"_";color:var(--green);margin-left:-8px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
nav.top .links{display:flex;gap:4px;counter-reset:nav -1}
nav.top .links a{position:relative;display:flex;align-items:baseline;gap:8px;padding:10px 14px;text-decoration:none;color:var(--dim);font:500 .76rem var(--mono);letter-spacing:.14em;text-transform:uppercase;transition:color .25s var(--ease);counter-increment:nav}
nav.top .links a::before{content:counter(nav,decimal-leading-zero);opacity:.7}
nav.top .links a::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
nav.top .links a:hover{color:var(--text)}
nav.top .links a:hover::after{transform:scaleX(.5)}
nav.top .links a[aria-current]{color:var(--green)}
nav.top .links a[aria-current]::before{color:var(--pink);opacity:1}
nav.top .links a[aria-current]::after{transform:scaleX(1);box-shadow:0 0 10px var(--green)}
nav.top .progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
nav.top .progress i{display:block;height:100%;width:var(--p,0%);background:var(--grad)}
nav.top .burger{display:none;width:40px;height:40px;background:none;border:1px solid var(--border);border-radius:6px;cursor:pointer;position:relative;color:var(--text)}
nav.top .burger span{position:absolute;left:10px;right:10px;height:2px;background:currentColor;transition:transform .3s var(--ease),top .3s var(--ease)}
nav.top .burger span:first-child{top:15px}nav.top .burger span:last-child{top:23px}
nav.top .burger[aria-expanded="true"] span:first-child{top:19px;transform:rotate(45deg)}
nav.top .burger[aria-expanded="true"] span:last-child{top:19px;transform:rotate(-45deg)}

/* ---------- Kopfbereich ---------- */
.header{text-align:left;margin-top:clamp(36px,8vw,96px);margin-bottom:28px}
.header h1{margin:0;font-size:clamp(2.2rem,7vw,4.6rem);letter-spacing:-.03em;line-height:1.04;font-weight:500;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rise .8s var(--ease) both}
.header h1::before{content:"";display:block;width:44px;height:3px;background:var(--grad);margin-bottom:24px;box-shadow:0 0 14px var(--green)}
.header .toggle-protected{position:absolute;top:0;right:clamp(16px,4vw,32px);width:44px;height:44px;display:grid;place-items:center;font-size:1.2rem;cursor:pointer;border-radius:var(--radius);background:var(--glass);border:1px solid var(--border);backdrop-filter:blur(10px);transition:transform .4s var(--ease),background .2s,border-color .2s}
.header .toggle-protected:hover{background:var(--glass2);border-color:var(--green)}
.container{max-width:1000px}
.download-btn,.latest-btn{display:inline-flex;align-items:center;gap:8px;margin:20px 0 4px;padding:13px 22px;border-radius:4px;color:var(--ink);text-decoration:none;font:600 .78rem var(--mono);letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(135deg,var(--green),var(--pink));box-shadow:0 12px 34px -14px var(--pink);transition:transform .25s var(--ease),box-shadow .25s,filter .2s}
.download-btn:hover,.latest-btn:hover{transform:translateY(-3px);filter:brightness(1.08);box-shadow:0 18px 40px -12px var(--green)}

/* ---------- Karten ---------- */
.card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;margin:14px 0;border-radius:var(--radius);background:var(--glass);border:1px solid var(--border);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 14px 40px -18px #000;cursor:pointer;
  transition:transform .35s var(--ease),background .25s,border-color .25s,opacity .4s var(--ease),max-height .4s var(--ease),margin .4s var(--ease),padding .4s var(--ease);animation:rise .6s var(--ease) both}
.card:hover{transform:translateY(-3px);background:var(--glass2);border-color:var(--green);box-shadow:0 16px 40px -18px var(--green)}
.card.hidden{opacity:0;transform:translateY(14px);height:0;margin:0;padding:0;border:0;overflow:hidden;pointer-events:none}
.card .left{max-width:78%}
.card h2{margin:0 0 4px;font-size:1.3rem;letter-spacing:-.01em;font-weight:500}
.card .lock{margin-left:6px;font-size:.9rem}
.card .meta,.card p{color:var(--muted);margin:0;font-size:.96rem}
.card .circle{width:46px;height:46px;border-radius:var(--radius);display:grid;place-items:center;font-size:20px;color:var(--ink);background:linear-gradient(135deg,var(--green),var(--pink));transition:transform .3s var(--ease)}
.card:hover .circle{transform:translateY(3px) scale(1.06)}
.container>.card:nth-child(2){animation-delay:.06s}.container>.card:nth-child(3){animation-delay:.12s}.container>.card:nth-child(4){animation-delay:.18s}.container>.card:nth-child(5){animation-delay:.24s}
.container>.card:only-child,.container.single .card{cursor:default;display:block;text-align:left;max-width:560px;margin-left:0}
.container.single .card:hover{transform:none;border-color:var(--border);box-shadow:0 14px 40px -18px #000}
.container.single .card h2{font-size:1.7rem}

/* ---------- Modal, Versionen ---------- */
.modal,.pw-overlay{position:fixed;inset:0;z-index:1002;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(4,4,10,.66);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.modal.show,.pw-overlay.show{opacity:1;visibility:visible}
.modal-inner,.pw-inner{width:100%;max-width:720px;max-height:86vh;overflow:auto;padding:24px;border-radius:8px;background:rgba(18,18,30,.94);border:1px solid var(--border);box-shadow:0 30px 80px -20px #000;transform:translateY(18px) scale(.98);transition:transform .35s var(--ease)}
.pw-inner{max-width:420px}
.modal.show .modal-inner,.pw-overlay.show .pw-inner{transform:none}
.modal h3,.pw-inner h3{margin:0 0 14px;font-weight:500}
.version{display:flex;flex-direction:column;gap:8px;padding:14px;margin:10px 0;border-radius:var(--radius);background:var(--glass);border:1px solid var(--border);opacity:0;transform:translateY(14px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.version.show{opacity:1;transform:none}
.version .row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.version .title{font-weight:700}.version .date{font:500 .78rem var(--mono);letter-spacing:.06em;color:var(--dim)}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.link-btn{display:inline-block;padding:10px 14px;border:0;border-radius:4px;font:600 .74rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#fff;text-decoration:none;cursor:pointer;transition:transform .2s var(--ease),filter .2s}
.link-btn:hover{transform:translateY(-2px);filter:brightness(1.12)}
.link-download{background:linear-gradient(135deg,var(--green),#00a883);color:var(--ink)}
.link-changelog{background:rgba(255,255,255,.14)}
.close-modal,.pw-submit{margin-top:14px;padding:10px 16px;border:0;border-radius:4px;background:rgba(255,255,255,.14);color:#fff;font:600 .74rem var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.pw-submit{background:linear-gradient(135deg,var(--green),var(--pink));color:var(--ink);margin-right:8px}
.close-modal:hover{background:rgba(255,85,100,.7)}
.pw-input{width:100%;padding:11px 14px;border-radius:4px;border:1px solid var(--border);background:rgba(255,255,255,.06);color:#fff;font:inherit;margin:6px 0}
.pw-input:focus{outline:2px solid var(--green);outline-offset:2px}
.log-pre{padding:14px;border-radius:var(--radius);background:rgba(0,0,0,.35);color:#e3e3ee;white-space:pre-wrap;font:.88rem/1.55 var(--mono)}
/* ---------- Hinweis "veraltet" (Hauptseite) ---------- */
.tag{display:inline-block;padding:4px 10px;border:1px solid var(--pink);border-radius:4px;color:var(--pink);font:600 .72rem var(--mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.notice{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px;margin:0 0 20px;border:1px solid color-mix(in srgb,var(--pink) 55%,transparent);border-radius:var(--radius);
  background:color-mix(in srgb,var(--pink) 10%,rgba(7,7,13,.6));backdrop-filter:blur(12px);box-shadow:0 14px 40px -22px var(--pink)}
.notice-text{flex:1 1 280px;display:grid;gap:2px}
.notice-text span{color:var(--muted);font-size:.96rem}
.notice .download-btn{margin:0;white-space:nowrap}
a:focus-visible,button:focus-visible,.toggle-protected:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
footer.site{margin-top:64px;padding-top:26px;padding-bottom:36px;border-top:1px solid var(--border);color:var(--dim);font:500 .74rem var(--mono);letter-spacing:.1em;text-transform:uppercase;text-align:center}
footer.site a{color:var(--muted)}
footer.site .ver{display:block;margin-top:6px;opacity:.75}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media (max-width:760px){
  nav.top .burger{display:block}
  nav.top.has-burger .links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:6px 20px 14px;background:var(--bg);border-bottom:1px solid var(--border)}
  nav.top.has-burger.open .links{display:flex}
  nav.top.has-burger .links a{padding:14px 4px;border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);font-size:.85rem}
  nav.top.has-burger .links a::after{display:none}
  nav.top:not(.has-burger){flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:6px}
}
@media (max-width:640px){.card{flex-direction:column;align-items:flex-start}.card .left{max-width:100%}.card .circle{align-self:flex-end}.header .toggle-protected{top:-6px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}