*{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; background:#F4F4F6; }
  body{ background:transparent; color:#B6B6BB; font-family:'Archivo',system-ui,sans-serif; line-height:1.7; overflow-x:hidden; }
  ::selection{ background:#CA2B2F; color:#fff; }
  a{ color:#E06A6E; text-decoration:none; }
  a:hover{ color:#fff; }

  /* top nav */
  .shopbtn{ display:inline-flex; align-items:center; gap:8px; background:#CA2B2F; color:#fff; font-size:13.5px; font-weight:700; padding:10px 18px; border-radius:100px; transition:background .25s, transform .25s; }
  .shopbtn:hover{ background:#E03A3E; color:#fff; transform:translateY(-1px); }

  /* shards */
  .bgshard{ position:fixed; pointer-events:none; z-index:-1; background:url('/assets/brand/pattern-dark.svg') center/contain no-repeat; }
  .bgshard.s1{ width:min(56vw,560px); height:min(39vw,388px); left:-12%; bottom:-6%; opacity:.28; -webkit-mask-image:radial-gradient(120% 130% at 14% 86%,#000 18%,transparent 62%); mask-image:radial-gradient(120% 130% at 14% 86%,#000 18%,transparent 62%); }

  /* hero */
  .hero{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:130px clamp(20px,5vw,64px) 64px; border-bottom:1px solid rgba(255,255,255,.08); background:#0B0B0D; }
  .hero .shard{ position:absolute; top:-20%; right:-7%; width:min(82vw,900px); aspect-ratio:4800/3330; opacity:.5; z-index:1; pointer-events:none; -webkit-mask-image:radial-gradient(120% 130% at 84% 26%, #000 32%, rgba(0,0,0,0) 72%); mask-image:radial-gradient(120% 130% at 84% 26%, #000 32%, rgba(0,0,0,0) 72%); }
  .hero .shard img{ width:100%; height:100%; object-fit:contain; object-position:top right; filter:saturate(1.08); }
  .hero-wash{ position:absolute; inset:0; background:linear-gradient(115deg, rgba(202,43,47,.10) 0%, rgba(110,39,51,.22) 52%, rgba(11,11,13,0) 100%); pointer-events:none; }
  .hero-glow{ position:absolute; inset:0; background:radial-gradient(120% 105% at 82% 20%, rgba(202,43,47,.20), rgba(11,11,13,0) 58%); pointer-events:none; }
  .hero-fade{ position:absolute; inset:0; z-index:2; background:linear-gradient(90deg, rgba(11,11,13,.92) 0%, rgba(11,11,13,.58) 40%, rgba(11,11,13,.08) 100%); pointer-events:none; }
  .hero-inner{ position:relative; z-index:3; max-width:1180px; margin:0 auto; width:100%; }
  .eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.22em; color:#E06A6E; text-transform:uppercase; margin-bottom:20px; }
  .hero h1{ font-family:'Ethnocentric','Archivo',sans-serif; font-weight:400; font-size:clamp(34px,6.4vw,72px); line-height:1.06; letter-spacing:0; color:#fff; text-transform:uppercase; }
  .hero .lede{ margin-top:24px; font-size:clamp(16px,2vw,19px); color:#A8A8AC; max-width:600px; line-height:1.6; }

  /* guide */
  .guide{ margin-top:36px; display:grid; grid-template-columns:minmax(0,580px); gap:20px; }

  /* ── player ───────────────────────────────────────── */
  .aplayer{ background:#101013; border:1px solid rgba(255,255,255,.09); border-radius:18px; padding:18px 20px 20px; }

  /* minimap: klickbare MARCH-Übersicht */
  .ap-map{ display:flex; gap:6px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid rgba(255,255,255,.08); }
  .mm{ flex:1 1 0; min-width:0; border:1px solid rgba(255,255,255,.14); background:transparent; color:#8A8A8E; border-radius:10px; padding:9px 0 8px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; transition:border-color .2s, background .2s, color .2s; }
  .mm .g{ font-family:'Ethnocentric','Archivo',sans-serif; font-size:13px; line-height:1; }
  .mm .w{ font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.06em; text-transform:uppercase; opacity:.7; }
  .mm:hover{ border-color:rgba(202,43,47,.6); color:#fff; }
  .mm.done{ border-color:rgba(202,43,47,.4); background:rgba(202,43,47,.10); color:#E0888B; }
  .mm.active{ background:#CA2B2F; border-color:#CA2B2F; color:#fff; box-shadow:0 0 0 3px rgba(202,43,47,.18); }
  .mm:focus-visible{ outline:2px solid #E06A6E; outline-offset:2px; }

  .ap-top{ display:flex; align-items:center; gap:14px; }
  .ap-play{ flex:0 0 auto; width:56px; height:56px; border-radius:50%; border:0; background:#CA2B2F; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s, transform .2s; }
  .ap-play:hover{ background:#E03A3E; transform:scale(1.05); }
  .ap-play svg{ width:21px; height:21px; }
  .ap-now{ flex:1; min-width:0; }
  .ap-title{ font-size:15px; color:#E8E8EC; display:flex; align-items:center; gap:8px; }
  .ap-title .eq{ display:none; align-items:flex-end; gap:2px; height:12px; }
  .ap-title .eq i{ width:3px; background:#E0454A; border-radius:2px; animation:eq 1s ease-in-out infinite; }
  .ap-title .eq i:nth-child(1){ height:60%; animation-delay:0s; }
  .ap-title .eq i:nth-child(2){ height:100%; animation-delay:.2s; }
  .ap-title .eq i:nth-child(3){ height:45%; animation-delay:.4s; }
  @keyframes eq{ 0%,100%{ transform:scaleY(.4);} 50%{ transform:scaleY(1);} }
  body.playing .ap-title .eq{ display:flex; }
  .ap-title span{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.08em; color:#F0989B; }
  .ap-title b{ color:#fff; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ap-sub{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#76767B; margin-top:4px; min-height:14px; }
  .ap-sub em{ font-style:normal; color:#E0888B; }
  .ap-sub strong{ color:#fff; font-weight:700; }
  .ap-ctrl{ display:flex; gap:8px; flex:0 0 auto; }
  .cbtn{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.16); background:transparent; color:#C2C2C6; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .2s, color .2s, background .2s; }
  .cbtn:hover{ border-color:rgba(202,43,47,.7); color:#fff; }
  .cbtn svg{ width:17px; height:17px; }
  .cbtn .n{ position:absolute; font-family:'JetBrains Mono',monospace; font-size:6.5px; font-weight:700; margin-top:1px; }
  .ap-bar{ position:relative; height:8px; border-radius:8px; background:rgba(255,255,255,.1); margin-top:14px; cursor:pointer; }
  .ap-bar:hover .ap-bar-fill::after{ opacity:1; }
  .ap-bar-fill{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:8px; background:linear-gradient(90deg,#CA2B2F,#E0454A); }
  .ap-bar-fill::after{ content:''; position:absolute; right:-6px; top:50%; transform:translateY(-50%); width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.5); opacity:0; transition:opacity .2s; }
  .ap-time{ display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:11px; color:#8A8A8E; margin-top:7px; }
  .ap-loop{ display:none; align-items:center; gap:8px; margin-top:12px; padding:9px 12px; border-radius:10px; background:rgba(202,43,47,.12); border:1px solid rgba(202,43,47,.35); font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; color:#F0989B; }
  .ap-loop.on{ display:flex; }
  .ap-loop .dot{ width:8px; height:8px; border-radius:50%; background:#E0454A; animation:blink 1.2s infinite; }
  @keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

  /* ── MARCH-Baum ───────────────────────────────────── */
  .tree{ display:flex; flex-direction:column; align-items:stretch; gap:10px; }
  .node{ position:relative; display:flex; align-items:center; gap:14px; width:100%; text-align:left; border-radius:14px; cursor:pointer; transition:background .25s, border-color .25s, color .25s, box-shadow .25s, transform .25s, opacity .25s; font-family:'Archivo',sans-serif; background:#121215; border:1px solid rgba(255,255,255,.10); color:#A8A8AC; padding:14px 16px; }
  .node:hover{ border-color:rgba(202,43,47,.55); color:#E8E8EC; transform:translateX(2px); }
  .node:focus-visible{ outline:2px solid #E06A6E; outline-offset:2px; }
  .node .tag{ font-family:'Ethnocentric','Archivo',sans-serif; font-size:15px; line-height:1; width:34px; height:34px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid rgba(202,43,47,.5); color:#E06A6E; transition:background .25s, color .25s, border-color .25s; }
  .node .tag.mono{ font-family:'JetBrains Mono',monospace; font-size:12px; }
  .node .lbl{ flex:1; min-width:0; }
  .node .lbl b{ display:block; font-size:15px; font-weight:800; letter-spacing:.01em; color:#E8E8EC; transition:color .25s; }
  .node .lbl small{ display:block; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:#76767B; margin-top:2px; transition:color .25s; }
  .node .st{ flex:0 0 auto; display:none; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }

  /* aktiv = spielt gerade */
  .node.active{ background:linear-gradient(135deg,#CA2B2F,#A81F23); border-color:#CA2B2F; box-shadow:0 8px 28px rgba(202,43,47,.35), 0 0 0 4px rgba(202,43,47,.18); }
  .node.active .tag{ background:rgba(255,255,255,.16); border-color:transparent; color:#fff; }
  .node.active .lbl b{ color:#fff; }
  .node.active .lbl small{ color:rgba(255,255,255,.75); }
  .node.active .st{ display:flex; color:#fff; }
  .node.active .st .eqs{ display:flex; align-items:flex-end; gap:2px; height:11px; }
  .node.active .st .eqs i{ width:3px; background:#fff; border-radius:2px; animation:eq 1s ease-in-out infinite; }
  .node.active .st .eqs i:nth-child(2){ animation-delay:.2s; }
  .node.active .st .eqs i:nth-child(3){ animation-delay:.4s; }

  /* empfohlen = nächster Schritt */
  @keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(202,43,47,0); } 50%{ box-shadow:0 0 0 7px rgba(202,43,47,.30); } }
  .node.next{ border-color:#CA2B2F; animation:pulse 1.5s ease-in-out infinite; }
  .node.next .lbl b{ color:#fff; }
  .node.next .st{ display:flex; color:#E06A6E; }

  /* gehört = ausgegraut + Wiederholen */
  .node.done{ background:#0E0E10; border-color:rgba(255,255,255,.06); opacity:.72; }
  .node.done:hover{ opacity:1; border-color:rgba(202,43,47,.5); }
  .node.done .tag{ border-color:rgba(255,255,255,.14); color:#6E6E73; }
  .node.done .lbl b{ color:#8A8A8E; }
  .node.done .st{ display:flex; color:#8A8A8E; border:1px solid rgba(255,255,255,.14); border-radius:100px; padding:5px 10px; }
  .node.done:hover .st{ color:#fff; border-color:rgba(202,43,47,.6); }
  .node.done .st svg{ width:12px; height:12px; }

  /* Unterpunkte: eingerückt, Bezugsstriche, zugeklappt bis der Oberpunkt dran ist */
  .subs{ position:relative; margin-left:34px; padding-left:24px; display:flex; flex-direction:column; gap:8px; max-height:0; opacity:0; overflow:hidden; transition:max-height .6s cubic-bezier(.22,.61,.36,1), opacity .5s, margin .4s; margin-top:-10px; margin-bottom:0; pointer-events:none; border-left:2px solid rgba(202,43,47,.45); }
  .subs.open{ max-height:600px; opacity:1; margin-top:0; pointer-events:auto; overflow:visible; }
  /* Stummel nach oben zum Oberpunkt */
  .subs::before{ content:''; position:absolute; left:-2px; top:-11px; width:2px; height:11px; background:rgba(202,43,47,.45); opacity:0; transition:opacity .4s; }
  .subs.open::before{ opacity:1; }
  .subs .leaf{ position:relative; opacity:0; transform:translateX(-10px); transition:opacity .45s, transform .45s, background .25s, border-color .25s, color .25s, box-shadow .25s; }
  .subs.open > .leaf{ opacity:1; transform:none; }
  .subs.open > .leaf:nth-child(1){ transition-delay:.08s; }
  .subs.open > .leaf:nth-child(2){ transition-delay:.2s; }
  .subs.open > .leaf:nth-child(3){ transition-delay:.32s; }
  /* horizontaler Bezugsstrich pro Unterpunkt */
  .subs > .leaf::before{ content:''; position:absolute; left:-24px; top:50%; width:24px; height:2px; margin-top:-1px; background:rgba(202,43,47,.45); }
  .subs > .subs{ margin-left:22px; margin-top:-8px; }
  .subs > .subs.open{ margin-top:0; }
  .node.sub{ padding:11px 14px; background:#15151A; }
  .node.sub .lbl b{ font-size:14px; }
  .node.sub .tag{ width:28px; height:28px; border-radius:8px; }
  .node.sub .tag svg{ width:13px; height:13px; }

  /* attribution */
  .credit{ display:flex; align-items:center; gap:14px; margin-top:6px; }
  .credit .chip{ background:#fff; border-radius:12px; padding:8px 12px; display:flex; align-items:center; }
  .credit .chip img{ height:34px; width:auto; display:block; }
  .credit p{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#8A8A8E; line-height:1.6; }

  /* layout */
  .wrap{ max-width:1180px; margin:0 auto; padding:clamp(40px,5vw,72px) clamp(20px,5vw,64px) 40px; }

  /* card image */
  .cardshow{ margin-top:clamp(10px,2vw,24px); display:grid; grid-template-columns:minmax(0,360px) 1fr; gap:clamp(28px,4vw,56px); align-items:center; }
  .cardframe{ display:flex; justify-content:center; padding:clamp(18px,3vw,32px); background:radial-gradient(120% 100% at 50% 0%, rgba(202,43,47,.14), rgba(11,11,13,0) 70%); border:1px solid rgba(255,255,255,.08); border-radius:22px; }
  .cardframe img{ width:100%; max-width:320px; height:auto; display:block; filter:drop-shadow(0 24px 48px rgba(0,0,0,.6)); }
  .cardtext h3{ font-size:clamp(22px,2.6vw,30px); font-weight:900; color:#fff; text-transform:uppercase; letter-spacing:-0.01em; line-height:1.1; }
  .cardtext p{ font-size:15.5px; color:#A8A8AC; line-height:1.7; margin-top:16px; max-width:520px; }
  .cardtext p strong{ color:#fff; font-weight:600; }
  .cardtext .scan{ display:inline-flex; align-items:center; gap:10px; margin-top:22px; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#76767B; }
  .cardtext .scan .qr{ width:34px; height:34px; border-radius:8px; border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; color:#9A9A9E; }

  .disclaimer{ margin:clamp(40px,5vw,64px) 0 0; font-size:13.5px; color:#7A7A7E; line-height:1.7; max-width:760px; padding:20px 22px; border-left:2px solid rgba(255,255,255,.14); }

  /* reveal */
  [data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); }
  [data-reveal].in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){
    [data-reveal]{ opacity:1; transform:none; transition:none; }
    .node.next{ animation:none; box-shadow:0 0 0 4px rgba(202,43,47,.30); }
    .subs, .subs .leaf{ transition:none; }
    .ap-title .eq i, .node.active .st .eqs i{ animation:none; }
  }

  /* footer */

  @media (max-width:760px){
    .shopbtn{ font-size:12.5px; padding:9px 15px; }
    .aplayer{ padding:14px 14px 16px; }
    .cardshow{ grid-template-columns:1fr; gap:28px; }
    .cardframe{ order:-1; }
    .ap-top{ gap:10px; }
    .ap-play{ width:48px; height:48px; }
    .ap-ctrl{ gap:6px; }
    .cbtn{ width:34px; height:34px; }
    .cbtn svg{ width:15px; height:15px; }
    .ap-title b{ font-size:14px; }
    .mm .w{ display:none; }
    .mm{ padding:8px 0; }
    .node .st .stw{ display:none; }
    .node.done .st{ padding:5px 7px; }
    .subs{ margin-left:18px; padding-left:16px; }
    .subs > .leaf::before{ left:-16px; width:16px; }
    .subs > .subs{ margin-left:12px; }
  }