*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#0a0a0a;--card:#1a1a1a;--border:#2a2a2a;
  --border-gold:#c8a84b44;--gold:#c8a84b;--gold-light:#e4c96d;
  --gold-dim:#c8a84b66;--text:#e8e8e8;--muted:#888;--radius:10px;
}
/* ── BASE: Mobile-first, scrollbar immer aktiv ──────────────────── */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--black)}
body{min-height:100vh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;font-family:'Inter',sans-serif;background:var(--black);color:var(--text)}
#bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.bg-overlay{position:fixed;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 0%,#c8a84b08 0%,transparent 60%),linear-gradient(180deg,#0a0a0aaa 0%,#0a0a0a88 50%,#0a0a0acc 100%);pointer-events:none}

/* Mobile: flex-column, Karten stapeln sich, alles scrollbar */
#app{position:relative;z-index:2;width:100%;min-height:100vh;display:flex;flex-direction:column;padding:12px 14px 20px;gap:10px;max-width:1400px;margin:0 auto;box-sizing:border-box}
.main-grid{display:flex;flex-direction:column;gap:10px}
.card-download{order:1}
.card-roadmap{order:2}
.card-merch{order:3}
.card-partner{order:4}
.card-legal{order:5}
.card{min-height:auto}
.card-download{min-height:auto}

/* ── DESKTOP (≥900px): cinematisches Grid, body BLEIBT scrollbar ── */
@media(min-width:900px){
  #app{height:100vh;min-height:unset;display:grid;grid-template-rows:auto 1fr auto;padding:14px 20px 8px}
  .main-grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;min-height:0}
  .card-download{grid-column:1;grid-row:1/3;order:unset;min-height:unset}
  .card-roadmap{grid-column:2;grid-row:1;order:unset}
  .card-partner{grid-column:2;grid-row:2;order:unset}
  .card-merch{grid-column:3;grid-row:1;order:unset}
  .card-legal{grid-column:3;grid-row:2;order:unset}
  .card{min-height:unset}
}

/* Fix 2 – Logo größer */
.logo-img{height:90px;width:auto;max-width:280px;mix-blend-mode:screen;filter:drop-shadow(0 0 14px rgba(200,168,75,0.4));transition:filter .3s}
@media(min-width:900px){.logo-img{height:70px;max-width:240px}}
header{display:flex;align-items:center;justify-content:center;position:relative;padding:4px 0}
.logo-wrap{display:flex;flex-direction:column;align-items:center;gap:2px}


.logo-img:hover{filter:drop-shadow(0 0 22px rgba(200,168,75,0.6))}
.logo-tagline{font-family:'Rajdhani',sans-serif;font-size:10px;font-weight:500;letter-spacing:4px;color:var(--gold);text-transform:uppercase;opacity:.85}
.header-badge{position:absolute;right:0;top:50%;transform:translateY(-50%);background:linear-gradient(135deg,#c8a84b22,#c8a84b11);border:1px solid var(--border-gold);border-radius:20px;padding:4px 12px;font-size:10px;font-weight:600;color:var(--gold);letter-spacing:2px;text-transform:uppercase}
.header-social{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;gap:10px}
.social-icon{color:var(--muted);transition:color .2s;text-decoration:none;display:flex}
.social-icon:hover{color:var(--gold)}
.social-icon svg{width:18px;height:18px;fill:currentColor}
.card{background:linear-gradient(145deg,#1e1e1e,#141414);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#c8a84b08 0%,transparent 50%);pointer-events:none}
.card:hover{border-color:var(--border-gold);box-shadow:0 0 20px #c8a84b11}
.card-label{font-family:'Rajdhani',sans-serif;font-size:9px;font-weight:700;letter-spacing:3px;color:var(--gold);text-transform:uppercase;margin-bottom:6px}
.card-title{font-family:'Rajdhani',sans-serif;font-size:18px;font-weight:700;color:var(--text);line-height:1.1;margin-bottom:8px}
.card-title.small{font-size:15px}
.card-title.center{text-align:center}
.card-sub{font-size:11px;color:var(--muted);line-height:1.5}
.card-sub.center{text-align:center}
.card-sub.mb10{margin-bottom:10px}
.card-download{border-color:#c8a84b33;justify-content:space-between}
@keyframes glint{0%{transform:translateX(-100%) skewX(-20deg)}100%{transform:translateX(300%) skewX(-20deg)}}
.card-download::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#c8a84b0a,transparent);animation:glint 4s ease-in-out 2s infinite;pointer-events:none}
.download-hero{flex:0 0 auto;margin:10px 0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px}
.download-icon{width:52px;height:52px;background:linear-gradient(135deg,var(--gold),#a87c20);border-radius:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px #c8a84b44}
.download-icon svg{width:26px;height:26px;fill:#0a0a0a}
.download-title{font-family:'Rajdhani',sans-serif;font-size:26px;font-weight:700;line-height:1;background:linear-gradient(135deg,var(--gold-light),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.counter-wrap{background:#111;border:1px solid var(--border-gold);border-radius:8px;padding:10px 18px;width:100%;text-align:center}
.counter-label{font-size:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase}
.counter-bar-outer{height:4px;background:#2a2a2a;border-radius:2px;margin:6px 0;overflow:hidden}
.counter-bar-inner{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold-light));transition:width 1.5s ease}
.counter-num{font-family:'Rajdhani',sans-serif;font-size:22px;font-weight:700;color:var(--gold)}
.counter-max{font-size:11px;color:var(--muted)}
.btn-download{width:100%;padding:12px;margin-bottom:12px;background:linear-gradient(135deg,var(--gold),#a87c20);border:none;border-radius:8px;cursor:pointer;font-family:'Rajdhani',sans-serif;font-size:15px;font-weight:700;color:#0a0a0a;letter-spacing:2px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:8px;transition:box-shadow .3s,transform .15s;box-shadow:0 4px 20px #c8a84b44;margin-top:10px}
.btn-download:hover{box-shadow:0 6px 30px #c8a84b77;transform:translateY(-1px)}
.btn-download:active{transform:translateY(0)}
.os-icons{display:flex;gap:8px;margin-top:6px;justify-content:center}
.os-pill{background:#111;border:1px solid var(--border);border-radius:20px;padding:4px 12px;font-size:10px;color:var(--muted);letter-spacing:1px}
.phase-tabs{display:flex;gap:4px;margin-bottom:10px;flex-wrap:wrap;justify-content:center}
.phase-tab{flex:1;min-width:30%;padding:5px 2px;background:#111;border:1px solid var(--border);border-radius:6px;cursor:pointer;text-align:center;font-family:'Rajdhani',sans-serif;font-size:10px;font-weight:600;color:var(--muted);letter-spacing:1px;transition:all .2s}
.phase-tab.active{background:linear-gradient(135deg,#c8a84b22,#c8a84b11);border-color:var(--border-gold);color:var(--gold)}
.phase-content{flex:1}
.phase-panel{display:none}
.phase-panel.active{display:flex;flex-direction:column;gap:6px}
.phase-item{display:flex;align-items:flex-start;gap:8px;background:#111;border:1px solid var(--border);border-radius:6px;padding:7px 10px}
.phase-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0;margin-top:4px}
.phase-dot.dim{background:#888}
.phase-dot.darker{background:#555}
.phase-item-text{font-size:11px;color:var(--text);line-height:1.4}
.phase-status{margin-top:auto;padding-top:8px;display:flex;align-items:center;gap:6px}
.status-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade8077;animation:pulse 2s infinite}
.status-dot.pending{background:var(--gold);box-shadow:0 0 8px #c8a84b77;animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.status-text{font-size:10px;color:var(--muted)}
.partner-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1}
.partner-slot{background:#111;border:1px solid var(--border);border-radius:8px;padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:60px;transition:border-color .3s,box-shadow .3s}
.partner-slot.dashed{border-style:dashed;opacity:.5}
.partner-slot-link{text-decoration:none;cursor:pointer}
.partner-slot-link:hover{border-color:var(--border-gold);box-shadow:0 0 18px #c8a84b22}
.partner-logo-img{width:56px;height:56px;object-fit:contain;border-radius:50%;filter:drop-shadow(0 0 6px rgba(200,168,75,0.3));transition:filter .3s,transform .3s}
.partner-slot-link:hover .partner-logo-img{filter:drop-shadow(0 0 14px rgba(200,168,75,0.7));transform:scale(1.06)}
.partner-name-text{font-size:8px;color:var(--muted);text-align:center;letter-spacing:1px;line-height:1.3}
.partner-badge{font-size:8px;background:#c8a84b22;border:1px solid var(--border-gold);color:var(--gold);padding:2px 6px;border-radius:10px;letter-spacing:1px}
.partner-add{font-family:'Rajdhani',sans-serif;font-size:11px;color:var(--muted)}
.partner-sub{font-size:8px;color:#555;letter-spacing:1px}
.merch-preview{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.merch-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#2a2a2a,#1a1a1a);border:1px solid var(--border-gold);display:flex;align-items:center;justify-content:center}
.merch-icon svg{width:22px;height:22px;fill:var(--gold-dim)}
.merch-label{font-size:10px;color:var(--muted);text-align:center;letter-spacing:1px}
.btn-soon{width:100%;padding:9px;background:transparent;border:1px solid var(--border-gold);border-radius:7px;cursor:default;font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:600;color:var(--gold-dim);letter-spacing:2px;text-transform:uppercase;text-align:center}
.printful-note{font-size:9px;color:#444;text-align:center;margin-top:4px;letter-spacing:1px}
.legal-links{display:flex;gap:8px;flex-wrap:wrap}
.legal-link{font-size:10px;color:var(--muted);cursor:pointer;border-bottom:1px solid #333;padding-bottom:1px;transition:color .2s,border-color .2s;letter-spacing:1px}
.legal-link:hover{color:var(--gold);border-color:var(--gold)}
.legal-copy{font-size:9px;color:#3a3a3a;margin-top:auto;line-height:1.6;letter-spacing:.5px}
footer{display:flex;align-items:center;justify-content:center;gap:6px;padding:4px 0}
.footer-sep{width:1px;height:10px;background:var(--border)}
.footer-text{font-size:9px;color:#333;letter-spacing:2px;text-transform:uppercase}
.modal-overlay{display:none;position:fixed;inset:0;z-index:100;background:#000000cc;backdrop-filter:blur(8px);align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:var(--card);border:1px solid var(--border-gold);border-radius:14px;padding:28px;max-width:440px;width:90%;position:relative;max-height:90vh;overflow-y:auto}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:20px;line-height:1;transition:color .2s}
.modal-close:hover{color:var(--text)}
.modal-title{font-family:'Rajdhani',sans-serif;font-size:22px;font-weight:700;color:var(--gold);margin-bottom:6px;letter-spacing:1px}
.modal-sub{font-size:12px;color:var(--muted);margin-bottom:18px;line-height:1.5}
.form-label{font-size:11px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;display:block}
.form-select{width:100%;padding:10px 14px;background:#111;border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;font-family:'Inter',sans-serif;appearance:none;cursor:pointer;outline:none;transition:border-color .2s}
.form-select:focus{border-color:var(--gold)}
.select-wrap{position:relative;margin-bottom:16px}
.btn-confirm{width:100%;padding:12px;background:linear-gradient(135deg,var(--gold),#a87c20);border:none;border-radius:8px;cursor:pointer;font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:700;color:#0a0a0a;letter-spacing:1px;text-transform:uppercase;transition:box-shadow .3s,transform .15s;box-shadow:0 4px 20px #c8a84b33}
.btn-confirm:hover{box-shadow:0 6px 28px #c8a84b55;transform:translateY(-1px)}
.btn-confirm:disabled{opacity:.5;cursor:not-allowed;transform:none}
.dl-steps{display:none}
.dl-steps.show{display:block}
.dl-step{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border)}
.dl-step:last-child{border-bottom:none}
.dl-num{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#a87c20);display:flex;align-items:center;justify-content:center;font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;color:#0a0a0a;flex-shrink:0}
.dl-text{font-size:12px;color:var(--text);line-height:1.5}
.dl-text a{color:var(--gold)}
.dl-platform-tabs{display:flex;gap:4px;margin:14px 0}
.dl-tab{flex:1;padding:7px;background:#111;border:1px solid var(--border);border-radius:6px;cursor:pointer;text-align:center;font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:1px;transition:all .2s}
.dl-tab.active{background:#c8a84b22;border-color:var(--border-gold);color:var(--gold)}
.dl-platform-content{display:none}
.dl-platform-content.active{display:block}
.legal-content{font-size:12px;color:var(--muted);line-height:1.8}
.legal-content h3{font-family:'Rajdhani',sans-serif;color:var(--gold);margin:14px 0 4px}
.hint{margin-top:12px;font-size:10px;color:#555}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:#111}
::-webkit-scrollbar-thumb{background:var(--border-gold);border-radius:2px}
.webapp-link{text-align:center;font-size:11px;color:var(--gold-dim);letter-spacing:2px;margin-top:4px;font-family:'Rajdhani',sans-serif}
.os-pill-web{color:var(--gold)!important;border-color:var(--border-gold)!important}
.btn-launch{display:block;width:100%;margin-top:16px;padding:11px;background:linear-gradient(135deg,var(--gold),#a87c20);border:none;border-radius:8px;cursor:pointer;font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:700;color:#0a0a0a;letter-spacing:2px;text-transform:uppercase;text-align:center;text-decoration:none;transition:box-shadow .3s,transform .15s;box-shadow:0 4px 20px #c8a84b33}
.btn-launch:hover{box-shadow:0 6px 28px #c8a84b66;transform:translateY(-1px)}

/* Disabled Button State for 100+ Counter */
.btn-download:disabled, .btn-launch.disabled-btn, .disabled-btn { background: #333 !important; color: #888 !important; cursor: not-allowed !important; box-shadow: none !important; transform: none !important; border: 1px solid #444 !important; pointer-events: none; }





/* === DESKTOP SAFETY OVERRIDES === */
@media(min-width:900px){
  .card{min-height:unset}
  .card-download{min-height:unset}
  .download-hero{flex:1;margin:0}
  .phase-tabs{flex-wrap:nowrap}
}