:root{--acid:#5FE3A8;--acid2:#B8FF5C}

/* ================= Seite ================= */
body.ph95{background:#040606}
/* Kopf: Laser-Faecher aus der Decke, die langsam schwenken */
body.ph95 .s6-cover{isolation:isolate;overflow:hidden;background:
  radial-gradient(55% 60% at 72% 30%,rgba(95,227,168,.10),rgba(95,227,168,0) 70%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 80px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 80px),#040606}
body.ph95 .s6-cover::before,body.ph95 .s6-cover::after{content:"";position:absolute;top:-30%;width:70vw;height:160%;pointer-events:none;z-index:-1;
  background:conic-gradient(from 168deg at 50% 0,transparent 0deg,rgba(95,227,168,.22) 2deg,transparent 4deg,transparent 9deg,rgba(95,227,168,.16) 10.5deg,transparent 12deg,transparent 17deg,rgba(201,166,255,.16) 18.5deg,transparent 20deg,transparent 360deg);
  transform-origin:50% 0;animation:ph95schwenk 9s ease-in-out infinite alternate;mix-blend-mode:screen}
body.ph95 .s6-cover::before{left:-12vw}
body.ph95 .s6-cover::after{right:-18vw;animation-duration:11s;animation-delay:-4s;filter:hue-rotate(40deg)}
@keyframes ph95schwenk{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
body.ph95 .s6-titel span{display:inline-block;animation:ph95glitch 6s steps(1) infinite}
@keyframes ph95glitch{0%,92%,97%,100%{transform:none;clip-path:none;filter:none}93%{transform:translateX(-9px) skewX(-6deg);clip-path:inset(10% 0 60% 0);filter:drop-shadow(5px 0 0 #5FE3A8)}94%{transform:translateX(7px);clip-path:inset(55% 0 15% 0);filter:drop-shadow(-5px 0 0 #C9A6FF)}95%{transform:translateX(-4px);clip-path:inset(30% 0 40% 0);filter:drop-shadow(4px 0 0 #5FE3A8)}96%{transform:translateX(2px);clip-path:inset(0 0 80% 0)}}
/* Kauf in Saeuregruen */
body.ph95 .s5-btn,body.ph95 .s6-leiste__kauf a,body.ph95 .s6-kasse .s5-btn{background:var(--acid);color:#03110a;box-shadow:0 0 0 1px var(--acid),0 10px 40px -10px rgba(95,227,168,.7)}
body.ph95 .s5-btn:hover,body.ph95 .s6-leiste__kauf a:hover{background:var(--acid2)}
body.ph95 .s6-preisbox{background:var(--acid);color:#03110a;box-shadow:0 0 60px -10px rgba(95,227,168,.6)}
body.ph95 .s6-preisbox small{color:#0b2a1c}
/* Ueberschriften: Versal, dicht, hart */
body.ph95 .s6-sec h2{text-transform:uppercase;letter-spacing:-.01em;line-height:.98}
body.ph95 .s5-eyebrow{color:var(--acid)}
body.ph95 .s6-kapitel{background:repeating-linear-gradient(90deg,rgba(95,227,168,.02) 0 1px,transparent 1px 120px)}
body.ph95 .s6-kap__nr{color:transparent;-webkit-text-stroke:1.5px rgba(95,227,168,.4);text-shadow:0 0 40px rgba(95,227,168,.18)}
body.ph95 .s6-kap small{color:var(--acid)}
body.ph95 .s6-kap h3{position:relative;padding-left:18px;text-transform:uppercase;letter-spacing:-.005em}
body.ph95 .s6-kap h3::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:4px;background:var(--acid);box-shadow:0 0 18px rgba(95,227,168,.8)}
body.ph95 .s6-rahmen__tag{color:var(--acid)}
body.ph95 .s6-kap{border-color:rgba(95,227,168,.14)}
@media (prefers-reduced-motion:reduce){body.ph95 .s6-titel span,body.ph95 .s6-cover::before,body.ph95 .s6-cover::after{animation:none}}

/* ================= Laufbaender ================= */
.p95-bandhalter{overflow:hidden;padding:12px 0;margin:4px 0 10px}
.p95-band{position:relative;overflow:hidden;background:var(--acid);color:#03110a;transform:rotate(-1.2deg) scale(1.03);box-shadow:0 0 60px -14px rgba(95,227,168,.8);z-index:2}
.p95-band--dunkel{background:#070b0a;color:var(--acid);transform:rotate(1deg) scale(1.02);border-top:2px solid var(--acid);border-bottom:2px solid var(--acid);box-shadow:none}
.p95-band__lauf{display:flex;width:max-content;animation:p95band 30s linear infinite}
.p95-band--dunkel .p95-band__lauf{animation-direction:reverse;animation-duration:36s}
.p95-band__lauf span{padding:14px 0;font-family:var(--mono);font-size:clamp(13px,1.3vw,17px);font-weight:700;letter-spacing:.28em;text-transform:uppercase;white-space:nowrap}
.p95-band__lauf span i{font-style:normal;margin:0 1.2em;opacity:.6}
@keyframes p95band{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.p95-band__lauf{animation:none}}

/* ================= Abschnitt ================= */
.p95-sec{position:relative;background:radial-gradient(70% 50% at 50% 0,rgba(95,227,168,.08),rgba(95,227,168,0) 70%)}
.p95-kopf h2{margin:.3em 0 .25em}
.p95-intro{margin:0;font-size:17px;color:var(--dim)}
.p95-live{display:inline-block;width:8px;height:8px;margin-right:10px;background:var(--acid);box-shadow:0 0 10px var(--acid);animation:p95live 1.75s steps(1) infinite;vertical-align:1px}
@keyframes p95live{50%{opacity:.15}}
.p95-rein{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:18px}
.p95-rein__marke{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--acid);font-weight:700}
.p95-rein__marke i{display:grid;place-items:center;width:20px;height:20px;background:var(--acid);color:#03110a}
.p95-rein ul{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.p95-rein li{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding:4px 8px;border:1px solid var(--line)}
.p95-rein li s{text-decoration-color:var(--acid);text-decoration-thickness:1.5px}
.p95-rein small{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#56665f}

/* ================= Rig ================= */
.p95{margin-top:clamp(22px,3vw,34px);border:1px solid #1b2a26;background:#060909;position:relative;box-shadow:0 40px 140px -40px rgba(95,227,168,.25)}
.p95::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:4px;background:repeating-linear-gradient(90deg,var(--acid) 0 18px,transparent 18px 26px);z-index:2}
.p95-scope{position:relative;height:clamp(230px,30vw,400px);overflow:hidden;border-bottom:1px solid #1b2a26}
.p95-scope>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.p95-hud{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#7f948d;pointer-events:none}
.p95-hud b{color:#E6EEF2;font-weight:600}
.p95-hud__r{display:flex;gap:14px;align-items:center}
.p95-beats{display:flex;gap:5px}
.p95-beats i{width:9px;height:9px;border:1px solid #2c3d38;background:#0b100f}
.p95-beats i.an{background:var(--acid);border-color:var(--acid);box-shadow:0 0 10px var(--acid)}
.p95-beats i.an:first-child{background:#fff;border-color:#fff;box-shadow:0 0 12px #fff}
.p95-gross{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 36px;border:1px solid rgba(95,227,168,.7);background:rgba(4,9,7,.78);color:var(--acid);cursor:pointer;font:inherit;transition:background .2s,opacity .3s,transform .3s}
.p95-gross b{font-family:var(--mono);font-size:14px;letter-spacing:.34em;text-transform:uppercase;color:#fff}
.p95-gross:hover{background:rgba(18,53,38,.9)}
.p95-gross__ring{position:absolute;inset:-10px;border:1px solid rgba(95,227,168,.4);animation:p95ring 2.2s ease-out infinite;pointer-events:none}
@keyframes p95ring{0%{opacity:.9;transform:scale(.96)}100%{opacity:0;transform:scale(1.14)}}
.p95--laeuft .p95-gross,.p95--laedt .p95-gross{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.94)}
.p95--laedt .p95-scope::after{content:"LOADING";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:12px;letter-spacing:.4em;color:var(--acid);animation:p95live .5s steps(1) infinite}
.p95-strip{position:absolute;left:0;right:0;bottom:0;height:44px;cursor:pointer;background:linear-gradient(180deg,rgba(5,7,7,0),rgba(5,7,7,.85) 40%)}
.p95-strip canvas{width:100%;height:100%;display:block}

.p95-leiste{display:flex;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid #1b2a26;background:#080d0c}
.p95-start{display:flex;align-items:center;gap:12px;padding:12px 20px;border:0;background:var(--acid);color:#03110a;font:inherit;font-family:var(--mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;font-weight:700;cursor:pointer;flex:none}
.p95-start i{width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.p95-start[aria-pressed=true]{background:#E6EEF2}
.p95-start[aria-pressed=true] i{width:10px;height:10px;border:0;background:currentColor}
.p95-zeit{font-family:var(--mono);font-size:12px;color:#7f948d;width:38px;flex:none}
.p95-jetzt{flex:1;min-width:0;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#E6EEF2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p95-tasten{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#56665f;white-space:nowrap}
.p95-tasten kbd{font-family:inherit;padding:1px 5px;border:1px solid #26332f;color:#7f948d}

/* Kanalzuege: Pad | Fader | Schritte */
.p95-kopfzeile,.p95-zeile{display:grid;grid-template-columns:minmax(170px,230px) minmax(200px,280px) minmax(0,1fr);align-items:center;gap:18px}
.p95-kopfzeile{padding:10px 16px 6px;font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#56665f}
.p95-schritte{display:grid;grid-template-columns:repeat(4,1fr)}
.p95-schritte i{font-style:normal}
.p95-spuren{display:flex;flex-direction:column;padding:4px 8px 10px}
.p95-zeile{padding:6px 8px;border-left:3px solid transparent;transition:background .15s,border-color .15s}
.p95-zeile--loop{border-left-color:rgba(230,238,242,.6);background:rgba(255,255,255,.02);margin-bottom:6px}
.p95-pad{display:flex;align-items:center;gap:12px;min-width:0;padding:0;border:0;background:none;color:var(--dim);font:inherit;text-align:left;cursor:pointer}
.p95-pad--loop{cursor:default;color:var(--fg)}
.p95-pad:hover{color:var(--fg)}
.p95-taste{display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid #26332f;font-family:var(--mono);font-size:12px;color:#7f948d;background:#0a0f0e;transition:background .15s,box-shadow .15s}
.p95-pad:hover .p95-taste{border-color:var(--c);color:var(--c)}
.p95-pad--loop .p95-taste{color:#E6EEF2;border-color:#3a4a46}
.p95-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.p95-name b{font-size:15px;font-weight:600;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p95-name small{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--c);opacity:.85}
.p95-zeile--an{border-left-color:var(--c);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 13%,transparent),transparent 65%)}
.p95-zeile--an .p95-pad{color:#fff}
.p95-zeile--an .p95-taste{background:var(--c);border-color:var(--c);color:#03110a;box-shadow:0 0 18px -2px var(--c)}
.p95-zeile--soll:not(.p95-zeile--an) .p95-taste{border-color:var(--c);color:var(--c);animation:p95live .44s steps(1) infinite}
.p95-zeile--laedt .p95-name small::after{content:" · loading";color:#7f948d}
.p95-zeile--fehler{opacity:.4}
.p95-zeile--stumm .p95-name b{text-decoration:line-through;opacity:.5}

/* Fader wie am Mischpult */
.p95-zug{display:grid;grid-template-columns:minmax(0,1fr) 46px;grid-template-rows:auto 4px;column-gap:10px;row-gap:3px;align-items:center}
.p95-fader{-webkit-appearance:none;appearance:none;width:100%;height:26px;margin:0;background:none;cursor:pointer;--f:.8}
.p95-zeile .p95-fader{--fl:calc(var(--f,0.8) * 100%)}
.p95-fader::-webkit-slider-runnable-track{height:6px;border:1px solid #26332f;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 55%,#0b100f) 0 var(--fl),#0b100f var(--fl));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.p95-fader::-moz-range-track{height:6px;border:1px solid #26332f;background:#0b100f}
.p95-fader::-moz-range-progress{height:6px;background:color-mix(in srgb,var(--c) 55%,#0b100f)}
.p95-fader::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:24px;margin-top:-10px;border:1px solid #9aa9a3;
  background:linear-gradient(90deg,#3b4643,#d6dedb 45%,#fff 50%,#d6dedb 55%,#3b4643);box-shadow:0 2px 6px rgba(0,0,0,.7)}
.p95-fader::-moz-range-thumb{width:12px;height:22px;border:1px solid #9aa9a3;border-radius:0;background:linear-gradient(90deg,#3b4643,#d6dedb 45%,#fff 50%,#d6dedb 55%,#3b4643)}
.p95-fader:focus-visible{outline:1px solid var(--c);outline-offset:3px}
.p95-pegel{grid-column:1;height:4px;background:#0d1312;overflow:hidden;position:relative}
.p95-pegel::after{content:"";position:absolute;left:80%;top:0;bottom:0;width:1px;background:rgba(230,238,242,.35)}
.p95-pegel i{display:block;height:100%;background:var(--c);transform-origin:0 50%;transform:scaleX(0);transition:transform .08s linear;box-shadow:0 0 8px var(--c)}
.p95-db{grid-row:1/3;grid-column:2;font-family:var(--mono);font-size:11px;color:#7f948d;text-align:right}
.p95-zeile--an .p95-db,.p95-zeile--loop .p95-db{color:#E6EEF2}

/* Schritte: echte Treffer aus der Aufnahme */
.p95-zellen{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:3px}
.p95-zellen i{height:18px;background:#0d1312;border:1px solid #17201e}
.p95-zellen i:nth-child(4n+1){border-left-color:#2a3833}
.p95-zellen i.e{background:color-mix(in srgb,var(--c) 14%,#0d1312)}
.p95-zellen i.h{background:color-mix(in srgb,var(--c) 32%,#0d1312);border-color:color-mix(in srgb,var(--c) 40%,#17201e)}
.p95-zellen i.k{outline:1px solid rgba(230,238,242,.55);outline-offset:-1px}
.p95-zeile--an .p95-zellen i.h,.p95-zeile--loop .p95-zellen i.h{background:var(--c);border-color:var(--c)}
.p95-zeile--an .p95-zellen i.h.k,.p95-zeile--loop .p95-zellen i.h.k{box-shadow:0 0 14px var(--c)}
.p95-zeile--an .p95-zellen i.e{background:color-mix(in srgb,var(--c) 30%,#0d1312)}
.p95-fuss{padding:11px 16px;border-top:1px solid #1b2a26;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#56665f}

/* Knopf im Kopf */
.p95-hoer{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid rgba(95,227,168,.6);color:var(--acid);font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;transition:background .2s}
.p95-hoer:hover{background:rgba(95,227,168,.1)}
.p95-hoer i{width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}

/* ================= Handy ================= */
@media (max-width:900px){
  .p95-kopfzeile,.p95-tasten{display:none}
  .p95-zeile{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:8px 12px;padding:8px 8px 9px}
  .p95-zellen{grid-column:1/-1}
  .p95-zellen i{height:9px}
  /* nur Drums und das laufende Preset zeigen ihre Schritte - spart Hoehe */
  .p95-zeile:not(.p95-zeile--loop):not(.p95-zeile--an):not(.p95-zeile--soll) .p95-zellen{display:none}
  .p95-taste{width:30px;height:30px}
  .p95-name b{font-size:14px}
  .p95-zug{grid-template-columns:minmax(0,1fr) 34px;column-gap:6px}
  .p95-db{font-size:10px}
  .p95-fader{height:30px}
  .p95-fader::-webkit-slider-thumb{width:18px;height:28px;margin-top:-12px}
  .p95-hud{font-size:10px;letter-spacing:.16em;padding:10px 12px}
  .p95-leiste{gap:12px;padding:10px 12px}
}
@media (max-width:520px){.p95-hud__x{display:none}.p95-gross{padding:20px 24px}.p95-gross b{font-size:12px;letter-spacing:.26em}.p95-fuss{display:none}
  .p95-band__lauf span{padding:11px 0}}
@media (prefers-reduced-motion:reduce){.p95-live,.p95-gross__ring,.p95-zeile--soll .p95-taste{animation:none}}
body.ph95 .s6-kap__nr span{color:var(--acid);text-shadow:0 0 50px rgba(95,227,168,.45)}