/* DJ Uli – www.hilsenitz.de
   Look: deutsches Teenie-Musikheft der 80er (eigenes Masthead "DJ ULI", keine fremden Marken).
   Reines CSS, keine externen Ressourcen (Papier-Rauschen = lokales SVG als data-URI).
   Animationen nur mit transform/opacity, bei prefers-reduced-motion aus. */

/* ---------- Schriften (lokal, OFL, siehe assets/fonts/OFL-*.txt) ---------- */
@font-face{font-family:"Anton";src:url(assets/fonts/anton-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo";src:url(assets/fonts/archivo-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url(assets/fonts/archivo-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url(assets/fonts/archivo-latin-900-normal.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url(assets/fonts/archivo-latin-900-italic.woff2) format("woff2");font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:"Caveat";src:url(assets/fonts/caveat-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"VT323";src:url(assets/fonts/vt323-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  /* Papier & Druckfarben */
  --paper:#F3EBD6;--paper-w:#FBF7EC;--paper-d:#E2D7BB;--ink:#1A1714;--muted:#5A5248;
  --red:#D1000F;--red-t:#C8000E;--yellow:#FFE03A;--cyan:#3CC3EC;--cyan-l:#8FD8F0;--mag:#C4006E;--pink:#FF8FC4;
  --blue:#1F3FA6;--pencil:#6b665d;--green:#0B7A3A;
  --f-display:"Anton",Impact,"Arial Narrow",sans-serif;
  --f-body:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-hand:"Caveat","Comic Sans MS",cursive;
  --f-lcd:"VT323",ui-monospace,Menlo,Consolas,monospace;
  --wrap:1240px;--gut:clamp(16px,4vw,40px);--focus:var(--blue);
  --beat:.5s;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .26 0 0 0 0 .16 0 0 0 -1.1 .62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --dots:radial-gradient(circle,rgba(26,23,20,.13) 1.1px,transparent 1.6px);
  --torn-t:polygon(0.0% 10px,2.08% 4px,4.17% 12px,6.25% 0px,8.33% 2px,10.42% 9px,12.5% 2px,14.58% 10px,16.67% 3px,18.75% 0px,20.83% 9px,22.92% 6px,25.0% 0px,27.08% 2px,29.17% 12px,31.25% 12px,33.33% 2px,35.42% 6px,37.5% 2px,39.58% 9px,41.67% 12px,43.75% 0px,45.83% 3px,47.92% 2px,50.0% 6px,52.08% 3px,54.17% 0px,56.25% 3px,58.33% 3px,60.42% 12px,62.5% 0px,64.58% 6px,66.67% 0px,68.75% 9px,70.83% 4px,72.92% 8px,75.0% 12px,77.08% 4px,79.17% 9px,81.25% 2px,83.33% 3px,85.42% 8px,87.5% 9px,89.58% 4px,91.67% 2px,93.75% 3px,95.83% 3px,97.92% 6px,100.0% 10px,100% 100%,0 100%);
  --torn-b:polygon(0 0,100% 0,100.0% calc(100% - 2px),97.92% calc(100% - 5px),95.83% calc(100% - 3px),93.75% calc(100% - 5px),91.67% calc(100% - 3px),89.58% calc(100% - 10px),87.5% calc(100% - 10px),85.42% calc(100% - 10px),83.33% calc(100% - 3px),81.25% calc(100% - 9px),79.17% calc(100% - 2px),77.08% calc(100% - 0px),75.0% calc(100% - 12px),72.92% calc(100% - 5px),70.83% calc(100% - 4px),68.75% calc(100% - 10px),66.67% calc(100% - 4px),64.58% calc(100% - 12px),62.5% calc(100% - 9px),60.42% calc(100% - 2px),58.33% calc(100% - 2px),56.25% calc(100% - 3px),54.17% calc(100% - 8px),52.08% calc(100% - 5px),50.0% calc(100% - 10px),47.92% calc(100% - 5px),45.83% calc(100% - 9px),43.75% calc(100% - 8px),41.67% calc(100% - 3px),39.58% calc(100% - 2px),37.5% calc(100% - 6px),35.42% calc(100% - 4px),33.33% calc(100% - 6px),31.25% calc(100% - 8px),29.17% calc(100% - 10px),27.08% calc(100% - 5px),25.0% calc(100% - 3px),22.92% calc(100% - 5px),20.83% calc(100% - 10px),18.75% calc(100% - 12px),16.67% calc(100% - 9px),14.58% calc(100% - 5px),12.5% calc(100% - 6px),10.42% calc(100% - 3px),8.33% calc(100% - 0px),6.25% calc(100% - 3px),4.17% calc(100% - 2px),2.08% calc(100% - 9px),0.0% calc(100% - 2px));
  --torn-tb:polygon(0.0% 10px,2.08% 4px,4.17% 12px,6.25% 0px,8.33% 2px,10.42% 9px,12.5% 2px,14.58% 10px,16.67% 3px,18.75% 0px,20.83% 9px,22.92% 6px,25.0% 0px,27.08% 2px,29.17% 12px,31.25% 12px,33.33% 2px,35.42% 6px,37.5% 2px,39.58% 9px,41.67% 12px,43.75% 0px,45.83% 3px,47.92% 2px,50.0% 6px,52.08% 3px,54.17% 0px,56.25% 3px,58.33% 3px,60.42% 12px,62.5% 0px,64.58% 6px,66.67% 0px,68.75% 9px,70.83% 4px,72.92% 8px,75.0% 12px,77.08% 4px,79.17% 9px,81.25% 2px,83.33% 3px,85.42% 8px,87.5% 9px,89.58% 4px,91.67% 2px,93.75% 3px,95.83% 3px,97.92% 6px,100.0% 10px,100.0% calc(100% - 2px),97.92% calc(100% - 5px),95.83% calc(100% - 3px),93.75% calc(100% - 5px),91.67% calc(100% - 3px),89.58% calc(100% - 10px),87.5% calc(100% - 10px),85.42% calc(100% - 10px),83.33% calc(100% - 3px),81.25% calc(100% - 9px),79.17% calc(100% - 2px),77.08% calc(100% - 0px),75.0% calc(100% - 12px),72.92% calc(100% - 5px),70.83% calc(100% - 4px),68.75% calc(100% - 10px),66.67% calc(100% - 4px),64.58% calc(100% - 12px),62.5% calc(100% - 9px),60.42% calc(100% - 2px),58.33% calc(100% - 2px),56.25% calc(100% - 3px),54.17% calc(100% - 8px),52.08% calc(100% - 5px),50.0% calc(100% - 10px),47.92% calc(100% - 5px),45.83% calc(100% - 9px),43.75% calc(100% - 8px),41.67% calc(100% - 3px),39.58% calc(100% - 2px),37.5% calc(100% - 6px),35.42% calc(100% - 4px),33.33% calc(100% - 6px),31.25% calc(100% - 8px),29.17% calc(100% - 10px),27.08% calc(100% - 5px),25.0% calc(100% - 3px),22.92% calc(100% - 5px),20.83% calc(100% - 10px),18.75% calc(100% - 12px),16.67% calc(100% - 9px),14.58% calc(100% - 5px),12.5% calc(100% - 6px),10.42% calc(100% - 3px),8.33% calc(100% - 0px),6.25% calc(100% - 3px),4.17% calc(100% - 2px),2.08% calc(100% - 9px),0.0% calc(100% - 2px));
  --star:polygon(50.0% 0.0%,55.6% 11.4%,64.1% 2.0%,66.2% 14.5%,77.0% 7.9%,75.5% 20.5%,87.8% 17.3%,82.8% 28.9%,95.5% 29.2%,87.4% 39.0%,99.5% 42.9%,89.0% 50.0%,99.5% 57.1%,87.4% 61.0%,95.5% 70.8%,82.8% 71.1%,87.8% 82.7%,75.5% 79.5%,77.0% 92.1%,66.2% 85.5%,64.1% 98.0%,55.6% 88.6%,50.0% 100.0%,44.4% 88.6%,35.9% 98.0%,33.8% 85.5%,23.0% 92.1%,24.5% 79.5%,12.2% 82.7%,17.2% 71.1%,4.5% 70.8%,12.6% 61.0%,0.5% 57.1%,11.0% 50.0%,0.5% 42.9%,12.6% 39.0%,4.5% 29.2%,17.2% 28.9%,12.2% 17.3%,24.5% 20.5%,23.0% 7.9%,33.8% 14.5%,35.9% 2.0%,44.4% 11.4%);
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;color:var(--ink);font:400 1.0625rem/1.65 var(--f-body);overflow-x:hidden;
  background-color:var(--paper);
  background-image:var(--noise),radial-gradient(900px 500px at 90% 10%,rgba(255,255,255,.45),transparent 60%),radial-gradient(700px 700px at 0% 80%,rgba(160,120,60,.08),transparent 60%);
  background-size:220px 220px,auto,auto}
@supports (overflow:clip){body{overflow-x:clip}}
img,svg{max-width:100%;display:block}
a{color:var(--blue);text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{color:var(--red-t)}
h1,h2,h3{line-height:1;margin:0 0 .5em}
h3{font:900 italic 1.2rem/1.15 var(--f-body);text-transform:uppercase;letter-spacing:.01em}
p{margin:0 0 1em}
ul,ol{padding-left:1.2em}
strong,b{font-weight:700}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--yellow);color:var(--ink);padding:.6em 1em;font-weight:900;border:3px solid var(--ink)}
.skip:focus{top:12px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);position:relative}
.narrow{max-width:900px}
.center{text-align:center}
.small{font-size:.875rem}
.lead{font-size:clamp(1.08rem,1.6vw,1.25rem);max-width:40em}

/* Heft-Typo */
.headline{font:400 clamp(2.3rem,5.6vw,4.1rem)/.95 var(--f-display);text-transform:uppercase;letter-spacing:.01em;color:var(--ink);
  text-shadow:3px 3px 0 rgba(196,0,110,.55),-2px -1px 0 rgba(60,195,236,.75)}
.headline.xl{font-size:clamp(2.6rem,8vw,5.6rem);overflow-wrap:break-word;hyphens:manual}
.rubrik{display:inline-block;margin:0 0 .9rem;padding:.25em .7em;background:var(--red);color:#fff;font:900 italic .82rem/1.2 var(--f-body);text-transform:uppercase;letter-spacing:.12em;transform:skewX(-10deg);box-shadow:3px 3px 0 var(--ink)}
.kicker-box{display:inline-block;font:900 italic clamp(1.4rem,2.6vw,2rem)/1.1 var(--f-body);text-transform:uppercase;background:var(--ink);color:var(--yellow);padding:.2em .5em;rotate:-1.5deg;margin:0 0 .8rem}

/* Kennzeichnung Beispieldaten */
.ex-note{display:inline-flex;gap:.5em;align-items:center;border:2px dashed var(--ink);background:var(--paper-w);color:var(--ink);font-weight:900;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;padding:.35em .8em;margin:0;rotate:1deg}
.tag-ex{display:inline-block;font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);background:var(--ink);padding:.15em .55em;white-space:nowrap}
.ex-inline{color:var(--red-t);font-weight:900;font-size:.92rem}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:48px;padding:.7em 1.3em;font:900 italic 1rem/1.1 var(--f-body);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .18s cubic-bezier(.3,1.6,.5,1);cursor:pointer}
.btn:hover{transform:translate(-2px,-2px) rotate(-1.2deg)}
.btn:active{transform:translate(2px,2px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{color:#fff}
.btn-ink{background:var(--ink);color:var(--paper-w);box-shadow:4px 4px 0 var(--red)}
.btn-ink:hover{color:var(--yellow)}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-yellow:hover{color:var(--ink)}
.btn-sm{min-height:44px;padding:.5em .9em;font-size:.85rem;box-shadow:3px 3px 0 var(--red)}
.btn-lg{font-size:1.12rem;padding:.85em 1.5em}
.btn-disabled{background:transparent;color:var(--muted);border-style:dashed;box-shadow:none;cursor:not-allowed}
.btn-disabled:hover{transform:none}
.btn .small{font-size:.75em;font-weight:700;font-style:normal;text-transform:none;letter-spacing:0}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin:0 0 1rem}

/* ---------- Header ---------- */
.site-header{position:sticky;top:-30px;z-index:50;background-color:var(--paper);background-image:var(--noise);background-size:220px;border-bottom:3px solid var(--ink)}
.issue-strip{background:var(--ink);color:var(--paper);height:30px;font:700 .74rem/30px var(--f-body);text-transform:uppercase;letter-spacing:.12em;overflow:hidden}
.issue-in{display:flex;justify-content:space-between;gap:1rem;white-space:nowrap}
.is-mid{font-style:italic;font-weight:900;color:var(--yellow)}
@media (max-width:640px){.is-rub{display:none}}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;color:var(--red)}
.brand-dj{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--ink);color:var(--yellow);font:900 italic .9rem/1 var(--f-body);rotate:-12deg}
.brand-name{font:400 2.4rem/1 var(--f-display);letter-spacing:.02em;transform:skewX(-9deg);text-shadow:2px 2px 0 var(--ink),-1px -1px 0 var(--cyan)}
.brand-logo{display:block;height:58px;width:auto;max-width:none;filter:drop-shadow(1px 2px 0 rgba(26,23,20,.55));transition:transform .2s}
.brand:hover .brand-logo,.brand:focus-visible .brand-logo{transform:rotate(-3deg) scale(1.04)}
@media (max-width:640px){.brand-logo{height:42px}}
.menu{list-style:none;margin:0;padding:0;display:flex;gap:.3rem}
.menu a{display:block;padding:.5rem .75rem;color:var(--ink);text-decoration:none;font:900 italic .95rem/1.2 var(--f-body);text-transform:uppercase;letter-spacing:.03em;transition:transform .2s}
.menu a:hover{color:var(--red-t);transform:rotate(-3deg) scale(1.05)}
.menu a[aria-current="page"]{background:var(--yellow);box-shadow:3px 3px 0 var(--ink);rotate:-2deg}
.burger{display:none;width:48px;height:48px;border:3px solid var(--ink);background:var(--yellow);box-shadow:3px 3px 0 var(--ink);cursor:pointer;padding:0;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger span{display:block;width:22px;height:3px;background:var(--ink);transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media (max-width:899px){
  .burger{display:flex}
  .menu-wrap{position:absolute;left:0;right:0;top:100%;background:var(--paper-w);border-bottom:3px solid var(--ink);box-shadow:0 12px 20px rgba(0,0,0,.15);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility 0s .2s}
  .menu-wrap.open{visibility:visible;opacity:1;transform:none;transition:opacity .2s,transform .2s}
  .menu{flex-direction:column;padding:.6rem var(--gut) 1rem}
  .menu a{padding:.8rem .6rem;font-size:1.15rem}
  .menu a[aria-current="page"]{display:inline-block}
  .js .menu-wrap:not(.open){pointer-events:none}
}
html:not(.js) .burger{display:none}
@media (max-width:899px){html:not(.js) .menu-wrap{position:static;visibility:visible;opacity:1;transform:none}html:not(.js) .nav{flex-wrap:wrap}}

/* ---------- Seiten-Flächen ---------- */
.page{position:relative;padding:clamp(3.2rem,7vw,6rem) 0;overflow:hidden}
.pg-yellow{background-color:var(--yellow);background-image:var(--noise),radial-gradient(ellipse 40% 30% at 82% 18%,rgba(255,255,255,.38),transparent 70%),radial-gradient(circle,rgba(209,0,15,.14) 1.2px,transparent 1.7px);background-size:220px 220px,auto,7px 7px}
.pg-cyan{background-color:var(--cyan-l);background-image:var(--noise),radial-gradient(ellipse 35% 30% at 12% 75%,rgba(255,255,255,.35),transparent 70%),radial-gradient(circle,rgba(26,23,20,.12) 1.1px,transparent 1.6px);background-size:220px 220px,auto,6px 6px}
.pg-pink{background-color:var(--pink);background-image:var(--noise),radial-gradient(ellipse 35% 30% at 85% 70%,rgba(255,255,255,.3),transparent 70%),radial-gradient(circle,rgba(196,0,110,.18) 1.2px,transparent 1.7px);background-size:220px 220px,auto,7px 7px}
.pg-mag{background-color:var(--mag);color:#fff;background-image:var(--noise),radial-gradient(circle,rgba(0,0,0,.14) 1.3px,transparent 1.8px);background-size:220px 220px,8px 8px;--focus:var(--yellow)}
.pg-mag .headline{color:#fff;text-shadow:4px 4px 0 var(--ink),-2px -2px 0 rgba(60,195,236,.8)}
.pg-mag a:not(.btn){color:#fff}
.torn-t{clip-path:var(--torn-t);margin-top:-6px}
.torn-b{clip-path:var(--torn-b)}
.torn-t.torn-b{clip-path:var(--torn-tb)}
.torn-t{padding-top:clamp(4rem,8vw,6.5rem)}
.torn-b{padding-bottom:clamp(4rem,8vw,6.5rem)}

/* Flecken, Kritzeleien, Klebeband */
.stain{position:absolute;z-index:0;width:190px;height:190px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,transparent 56%,rgba(120,72,30,.22) 59%,rgba(120,72,30,.1) 62%,transparent 66%),radial-gradient(circle at 42% 46%,rgba(120,72,30,.07),transparent 58%)}
.stain::after{content:"";position:absolute;left:62%;top:-18%;width:46%;height:46%;border-radius:50%;background:radial-gradient(circle,transparent 52%,rgba(120,72,30,.16) 57%,transparent 64%)}
.st-cover{left:-60px;bottom:40px}
.st-toc{right:-50px;top:-40px;width:230px;height:230px}
.st-mix{right:6%;bottom:-70px;filter:hue-rotate(-20deg)}
.st-cta{right:4%;top:20px;width:150px;height:150px}
.st-ph{left:-70px;bottom:-60px}
.st-chart{left:-60px;top:30%}
.st-gigs{right:-70px;top:40%}
.st-story{right:-80px;top:-50px;width:240px;height:240px}
.st-book{left:46%;bottom:-90px}
.wrap,.cover-grid{z-index:1}
.scrib{font:700 1.9rem/1 var(--f-hand);color:var(--blue);display:inline-block;rotate:-6deg;pointer-events:none}
.pencil-heart{width:58px;color:var(--pencil);rotate:12deg;pointer-events:none}
.pen-arrow{width:110px;color:var(--blue);pointer-events:none}
.tape-strip{position:absolute;z-index:3;left:50%;top:-15px;width:118px;height:32px;translate:-50% 0;rotate:-4deg;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,0) 30%,rgba(255,255,255,.2) 70%,rgba(255,255,255,0)),rgba(250,240,190,.72);
  box-shadow:0 1px 2px rgba(0,0,0,.18);
  clip-path:polygon(0 8%,4% 0,8% 10%,12% 0,100% 0,96% 12%,100% 25%,96% 40%,100% 55%,96% 70%,100% 85%,97% 100%,0 100%,4% 85%,0 70%,4% 55%,0 40%,4% 25%)}

/* Eselsohr (statisch, clip-path) */
.sheet{position:relative;background-color:var(--paper-w);background-image:var(--noise);background-size:220px;border:2px solid var(--ink);padding:clamp(1.2rem,3vw,2rem)}
.dogear{--de:38px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--de)),calc(100% - var(--de)) 100%,0 100%)}
.dogear::after{content:"";position:absolute;right:0;bottom:0;width:var(--de);height:var(--de);pointer-events:none;
  background:linear-gradient(to top left,transparent 50%,#cfc3a2 50%,#efe6cc 75%,#ddd1b2)}
/* Ecke hebt sich beim Hover (nur transform) */
.peel{--page:var(--paper)}
.pg-yellow .peel{--page:var(--yellow)}
.pg-cyan .peel{--page:var(--cyan-l)}
.peel::before,.peel::after{content:"";position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;z-index:4;pointer-events:none;transform-origin:100% 100%;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.peel::before{background:linear-gradient(to top left,var(--page) 50%,transparent 50%)}
.peel::after{background:linear-gradient(to top left,transparent 50%,#d6cbac 50%,#f6efdc 80%,#e3d8bb);box-shadow:-2px -2px 3px rgba(0,0,0,.12)}
.peel:hover::before,.peel:hover::after,.peel:focus-visible::before,.peel:focus-visible::after{transform:scale(1.9)}

/* Starburst-Sticker */
.burst{position:absolute;z-index:6;display:grid;place-items:center;width:var(--s,124px);aspect-ratio:1;clip-path:var(--star);background:var(--yellow);color:var(--red);pointer-events:none;animation:pulse 2.4s ease-in-out infinite}
.burst::before{content:"";position:absolute;inset:7px;clip-path:var(--star);background:var(--red)}
.burst span{position:relative;font:900 italic calc(var(--s,124px) * .16)/1 var(--f-body);text-transform:uppercase;text-align:center;color:var(--yellow);rotate:-12deg;max-width:70%}
@keyframes pulse{50%{transform:scale(1.07) rotate(4deg)}}
.b-neu{--s:118px;left:-18px;top:-24px}
.b-exkl{--s:140px;right:-26px;top:34%;animation-delay:-.8s}
.b-exkl{background:var(--ink)}.b-exkl::before{background:var(--yellow)}.b-exkl span{color:var(--ink);font-size:15px}
.b-poster{--s:124px;right:-8px;top:-30px;animation-delay:-1.6s}
.b-poster{background:var(--red)}.b-poster::before{background:var(--cyan)}.b-poster span{color:var(--ink);font-size:16px}
.b-chart{--s:120px;right:0;top:-20px;position:absolute}
@media (max-width:979px){.cover .cover-visual{margin-top:6.6rem}.b-neu{--s:96px;left:-8px;top:-40px}.b-poster{--s:100px;right:-6px;top:-50px}.b-exkl{--s:108px;top:-96px;left:calc(50% - 54px);right:auto}.b-exkl span,.b-poster span{font-size:13px}}

/* ---------- Titelseite (Cover) ---------- */
.cover{position:relative;overflow:hidden;padding:clamp(1.4rem,3vw,2.4rem) 0 2rem;border-bottom:3px solid var(--ink)}
.cover-dots{position:absolute;right:-12vw;top:-14vw;width:70vw;max-width:900px;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,224,58,.9) 2.2px,transparent 2.8px) 0 0/11px 11px;
  -webkit-mask:radial-gradient(circle,#000 0 30%,transparent 70%);mask:radial-gradient(circle,#000 0 30%,transparent 70%)}
.cover-grid{display:grid;gap:1.6rem 2.5rem;align-items:start}
@media (min-width:980px){.cover-grid{grid-template-columns:1fr 1.02fr}.cover-head,.cover-lines{grid-column:1}.cover-visual{grid-column:2;grid-row:1/span 2;align-self:center}}
.issue-line{display:inline-flex;flex-wrap:wrap;gap:.1em .5em;margin:0 0 .4rem;padding:.3em .8em;background:var(--ink);color:var(--paper-w);font:900 italic clamp(.82rem,1.6vw,1.05rem)/1.3 var(--f-body);text-transform:uppercase;letter-spacing:.06em;transform:skewX(-8deg)}
.issue-line span:last-child{color:var(--yellow)}
.masthead{display:flex;align-items:center;gap:.06em;margin:0;line-height:.8;font-weight:400}
.mh-dj{display:grid;place-items:center;width:1.85em;height:1.85em;border-radius:50%;background:var(--ink);color:var(--yellow);font:900 italic clamp(1.3rem,4.2vw,3rem)/1 var(--f-body);rotate:-14deg;box-shadow:5px 5px 0 var(--red);flex:none;align-self:flex-start;margin:.2em .5em 0 0;position:relative;z-index:1}
.mh-uli{font:400 clamp(7rem,40vw,17.5rem)/.82 var(--f-display);letter-spacing:-.01em;color:var(--red);transform:skewX(-10deg);
  text-shadow:-5px -4px 0 rgba(60,195,236,.85),8px 8px 0 var(--ink),14px 14px 0 rgba(255,224,58,.95);padding-right:.18em}
.mh-logo{position:relative;display:block;width:min(100%,600px);rotate:-3deg;transform-origin:30% 70%;margin:.3rem 0 .6rem .4rem;
  filter:drop-shadow(5px 6px 0 rgba(26,23,20,.88)) drop-shadow(10px 14px 10px rgba(26,23,20,.28))}
.mh-img{display:block;width:100%;height:auto}
.mh-logo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%) 160% 0/250% 100% no-repeat;
  -webkit-mask:url(assets/logo-dj-uli.png) center/100% 100% no-repeat;mask:url(assets/logo-dj-uli.png) center/100% 100% no-repeat;
  mix-blend-mode:soft-light;animation:mh-shimmer 5.5s ease-in-out 1s infinite}
@keyframes mh-shimmer{0%{background-position:160% 0}45%,100%{background-position:-60% 0}}
@media (prefers-reduced-motion:reduce){.mh-logo::after{animation:none;display:none}.brand-logo{transition:none}}
.cover-lines{position:relative;display:grid;gap:.85rem;justify-items:start}
.hl{margin:0;font:900 italic clamp(1.35rem,3vw,2.15rem)/1.12 var(--f-body);text-transform:uppercase;letter-spacing:-.01em;max-width:22ch}
.hl span{padding:.08em .35em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hl-red span{background:var(--red);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.hl-yellow span{background:var(--yellow);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.hl-cyan span{background:var(--cyan);color:var(--ink);box-shadow:4px 4px 0 var(--mag)}
.hl-red{rotate:-2.5deg}.hl-yellow{rotate:1.2deg;margin-left:1.2rem}.hl-cyan{rotate:-1deg}
.hero-sub{background:var(--paper-w);border:2px solid var(--ink);padding:.9rem 1.1rem;max-width:34em;margin:.4rem 0 .3rem;box-shadow:5px 5px 0 rgba(26,23,20,.18)}
.sc-cover{position:absolute;right:-1rem;bottom:-1.2rem;font-size:2rem}
@media (min-width:980px){.cover-lines{padding-bottom:4.2rem}}
.ar-cover{position:absolute;right:-6.5rem;bottom:1rem;rotate:-12deg}
@media (max-width:979px){.sc-cover,.ar-cover{display:none}}
.cover-visual{position:relative;width:100%;max-width:600px;margin:1.2rem auto 0}
.fun-note{font-size:.82rem;color:var(--muted);margin:1.6rem auto 0;font-style:italic}

/* ---------- Plattenspieler (als ausgeschnittenes Foto) ---------- */
.deck-wrap{position:relative;rotate:-2.5deg;margin:0 10px}
.deck-wrap .t1{left:12%;top:-12px;rotate:-24deg}
.deck-wrap .t2{left:auto;right:-26px;top:auto;bottom:16px;translate:0 0;rotate:-58deg}
.deck{position:relative}
.plinth{position:relative;aspect-ratio:5/4;border-radius:10px;
  background:linear-gradient(145deg,#4a4540 0%,#2c2925 24%,#1e1c19 62%,#151311 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -5px 0 rgba(0,0,0,.5),0 0 0 10px var(--paper-w),0 0 0 12px rgba(26,23,20,.15),0 22px 34px rgba(26,23,20,.4)}
.plinth::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 4px)}
.plinth-screw{position:absolute;width:2%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#bbb,#333)}
.p1{left:2%;top:2.5%}.p2{right:2%;top:2.5%}.p3{left:2%;bottom:2.5%}.p4{right:2%;bottom:2.5%}
.well{position:absolute;left:5%;top:6.25%;width:70%;aspect-ratio:1;border-radius:50%;background:#0b0a09;box-shadow:inset 0 6px 14px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.1)}
.spinner{position:absolute;inset:1.2%;border-radius:50%;will-change:transform;touch-action:none;cursor:grab}
.spinner.grab{cursor:grabbing}
.platter{position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#e1ddd3 0 1.2deg,#5d5850 1.2deg 3.6deg);
  -webkit-mask:radial-gradient(circle,transparent 0 47.6%,#000 47.8%);mask:radial-gradient(circle,transparent 0 47.6%,#000 47.8%);box-shadow:inset 0 0 0 2px #888}
.vinyl{position:absolute;inset:2.6%;border-radius:50%;outline-offset:6px;
  background:radial-gradient(circle,transparent 0 30%,rgba(255,255,255,.07) 30.4%,transparent 31.2%),repeating-radial-gradient(circle,#0e0d0c 0 1.1px,#1b1916 1.6px 2.3px,#100f0d 2.8px),#0f0e0c;
  box-shadow:0 0 0 2px #050505,inset 0 0 0 3px #24211d,inset 0 0 0 9px #0d0c0b,0 6px 14px rgba(0,0,0,.6)}
.vinyl:focus-visible{outline:4px solid var(--yellow);box-shadow:0 0 0 2px #050505,0 0 0 10px var(--blue)}
.vinyl::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 40deg,rgba(209,0,15,.08) 60deg,transparent 80deg 220deg,rgba(60,195,236,.07) 240deg,transparent 260deg)}
.vlabel{position:absolute;left:31%;top:31%;width:38%;height:38%;border-radius:50%}
.lbl-ring{font:700 7.4px var(--f-body);letter-spacing:.9px;fill:#FFF6D8}
.lbl-mono{font:400 24px var(--f-display);letter-spacing:.5px;fill:#FFE03A}
.lbl-small{font:700 4.6px var(--f-body);letter-spacing:.6px;fill:#FFF0F0}
.glare{position:absolute;inset:3.8%;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:conic-gradient(from -30deg,transparent 0 18deg,rgba(255,255,255,.22) 32deg,rgba(255,255,255,.05) 46deg,transparent 60deg 180deg,rgba(255,255,255,.16) 212deg,rgba(255,255,255,.03) 226deg,transparent 240deg);
  -webkit-mask:radial-gradient(circle,transparent 0 31%,#000 32% 98%,transparent 99%);mask:radial-gradient(circle,transparent 0 31%,#000 32% 98%,transparent 99%)}
.spindle{position:absolute;left:48.4%;top:48.4%;width:3.2%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#a7a39a 40%,#3f3b35);box-shadow:0 2px 3px rgba(0,0,0,.7);pointer-events:none}
.tonearm{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(6px 10px 6px rgba(0,0,0,.55))}
.arm-rest{transform-box:view-box;transform-origin:430px 62px;transition:transform 1.1s cubic-bezier(.5,0,.2,1)}
.arm-wob{transform-box:view-box;transform-origin:430px 62px}
.deck.is-off .arm-rest{transform:rotate(-26deg)}
.plinth-deco{position:absolute;right:4.5%;top:38%;bottom:7%;width:10%;display:flex;flex-direction:column;align-items:center;gap:6%}
.strobe-led{width:34%;aspect-ratio:1;border-radius:50%;background:#ff3b3b;box-shadow:0 0 10px 3px rgba(255,59,59,.6)}
.deck.is-off .strobe-led{background:#4a1515;box-shadow:none}
.pitch-track{position:relative;flex:1;width:26%;border-radius:4px;background:#0b0a09;box-shadow:inset 0 2px 4px #000,0 1px 0 rgba(255,255,255,.1)}
.pitch-knob{position:absolute;left:-137%;top:45%;width:374%;height:9%;min-height:10px;border-radius:3px;background:linear-gradient(180deg,#efebe2,#85807a 50%,#d0ccc2);box-shadow:0 3px 5px rgba(0,0,0,.7);transition:transform .2s}
.deco-txt{font-size:clamp(.45rem,1vw,.6rem);letter-spacing:.15em;color:#b3ada2}
.plinth-brand{position:absolute;left:4%;bottom:1.5%;font-size:clamp(.42rem,1.1vw,.62rem);letter-spacing:.18em;color:#b3ada2;white-space:nowrap}
.deck-panel{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;margin:1.9rem auto 0;padding:.8rem;background:var(--yellow);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);rotate:.8deg}
.dk-btn{min-height:44px;min-width:44px;padding:.4em .9em;border:2px solid var(--ink);background:var(--paper-w);color:var(--ink);font:900 italic .8rem/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5em;box-shadow:3px 3px 0 var(--ink)}
.dk-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.dk-btn[aria-pressed="true"]{background:var(--ink);color:var(--yellow)}
.dk-sound[aria-pressed="true"]{background:var(--red);color:#fff}
.dk-led{width:9px;height:9px;border-radius:50%;background:#b9b1a0;border:1px solid var(--ink)}
[aria-pressed="true"]>.dk-led{background:currentColor}
.dk-pitch{display:inline-flex;align-items:center;gap:.5em;font-size:.75rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.dk-pitch input{width:96px;accent-color:var(--red);height:44px}
.dk-rpm{font:400 1.6rem/1 var(--f-lcd);color:#7CFFB2;background:#06140c;border:2px solid var(--ink);padding:.25em .5em;min-width:5.6em;text-align:right}
.dk-rpm small{font-size:.65em;margin-left:.3em;color:#5fd994}
.deck-hint{position:relative;font-size:.9rem;text-align:left;margin:1.1rem auto 0;max-width:36em;padding:.8rem 1rem;background:var(--paper-w);border:2px solid var(--ink);rotate:-.8deg}
.deck-hint strong{color:var(--red-t);text-transform:uppercase;font-style:italic;font-weight:900}

/* ---------- Newsticker ---------- */
.ticker{display:flex;align-items:stretch;background:var(--ink);border-block:3px solid var(--ink);position:relative;z-index:2}
.ticker-tag{flex:none;display:flex;align-items:center;padding:0 .9rem;font:900 italic .95rem var(--f-body);text-transform:uppercase;color:#fff;background:var(--red);letter-spacing:.04em}
.ticker-screen{flex:1;min-width:0;overflow:hidden}
.ticker-track{display:flex;width:max-content;animation:tick 42s linear infinite}
.ticker-track span{font:900 italic 1.05rem/2.6 var(--f-body);color:var(--yellow);white-space:nowrap;padding-left:1rem;text-transform:uppercase;letter-spacing:.02em}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- Inhaltsverzeichnis & Leistungen ---------- */
.toc-grid{display:grid;gap:2.6rem;align-items:start}
@media (min-width:900px){.toc-grid{grid-template-columns:.85fr 1.15fr}}
.toc-box{rotate:-1.2deg}
.toc-box::before{content:"";position:absolute;left:0;right:0;top:52%;height:2px;background:linear-gradient(90deg,transparent,rgba(26,23,20,.09) 15%,rgba(255,255,255,.7) 50%,rgba(26,23,20,.09) 85%,transparent);pointer-events:none}
.toc{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.toc a{display:flex;align-items:center;gap:.9rem;padding:.55rem .3rem;text-decoration:none;color:var(--ink);border-bottom:2px dotted rgba(26,23,20,.3)}
.toc a:hover{color:var(--ink);background:rgba(255,224,58,.55)}
.toc b{display:block;font:900 italic 1.08rem/1.2 var(--f-body);text-transform:uppercase;color:var(--red-t)}
.toc-n{flex:none;display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:50%;background:var(--ink);color:var(--yellow);font:400 1.3rem/1 var(--f-display)}
.feature-list{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:1rem}
@media (min-width:600px){.feature-list{grid-template-columns:1fr 1fr}}
.feature-list li{background:var(--paper-w);border:2px solid var(--ink);padding:.85rem 1rem;box-shadow:4px 4px 0 var(--cyan)}
.feature-list li:nth-child(2n){rotate:1deg;box-shadow:4px 4px 0 var(--pink)}
.feature-list li:nth-child(2n+1){rotate:-.8deg}
.feature-list b{display:block;font:900 italic 1.05rem/1.2 var(--f-body);text-transform:uppercase}
.bb-spot{position:relative;margin:2.6rem auto 0;max-width:500px}
.sc-bb{position:absolute;right:.5rem;top:-2.3rem;rotate:8deg;font-size:2.2rem;color:var(--red-t)}

/* ---------- Abschnitte ---------- */
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;margin-bottom:2.2rem}
.section-head .headline{margin:0}
.section-head.on-dark .small{color:#fff}
.grid-2,.grid-3,.grid-4{display:grid;gap:2.2rem 1.8rem}
@media (min-width:760px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}
.split{display:grid;gap:2.6rem;align-items:center}
@media (min-width:900px){.split{grid-template-columns:1.1fr .9fr}.split-rev .split-visual{order:-1}}
.split-visual{position:relative;display:grid;place-items:center}
.page-hero{padding-top:clamp(2.4rem,5vw,4rem)}
.page-hero-inner{display:grid;gap:2.4rem;align-items:center}
@media (min-width:900px){.page-hero-inner{grid-template-columns:1.25fr .75fr}}
.ph-visual{position:relative;display:grid;place-items:center;padding:1rem 0}
.ph-copy .lead{background:var(--paper-w);border:2px solid var(--ink);padding:.8rem 1rem;box-shadow:5px 5px 0 rgba(26,23,20,.2)}
.note-line{margin-top:2.2rem}
.grid-3+.center,.grid-4+.center{margin-top:2.8rem}

/* ---------- Karten / Sticker ---------- */
.card{position:relative;background-color:var(--paper-w);background-image:var(--noise);background-size:220px;border:2px solid var(--ink);padding:1.4rem 1.3rem 1.5rem;box-shadow:6px 6px 0 rgba(26,23,20,.22);outline-offset:5px}
.card h3{margin:1.2rem 0 .3rem}
.card .meta{color:var(--red-t);font-size:.82rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem}
.row-actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin:0}
.stickers>.card:nth-child(4n+1),.grid-3>.card:nth-child(3n+1){rotate:-1.4deg}
.stickers>.card:nth-child(4n+2),.grid-3>.card:nth-child(3n+2){rotate:1.1deg;margin-top:.8rem}
.stickers>.card:nth-child(4n+3),.grid-3>.card:nth-child(3n){rotate:-.6deg}
.stickers>.card:nth-child(4n){rotate:1.8deg;margin-top:.4rem}
.card:hover,.sticker:hover,.chips li:hover{animation:wobble .6s ease-in-out}
@keyframes wobble{25%{transform:rotate(1.6deg) scale(1.01)}55%{transform:rotate(-1.4deg) scale(1.01)}80%{transform:rotate(.6deg)}}
.sticker{position:relative}

/* Kassette */
.cassette{position:relative;aspect-ratio:1.58;border-radius:7%/11%;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 45%,#2a2724),#1a1816 72%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),inset 0 2px 0 rgba(255,255,255,.25),0 0 0 5px var(--paper-w),0 0 0 7px var(--ink)}
.c-label{position:absolute;left:6%;right:6%;top:7%;height:62%;border-radius:4%/7%;background:linear-gradient(180deg,#FBF7EC 0 26%,var(--c) 26% 31%,#FBF7EC 31%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.c-title{position:absolute;left:9%;right:6%;top:2%;font:700 clamp(1rem,2.4vw,1.35rem)/1.1 var(--f-hand);color:var(--blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:rotate(-1.5deg)}
.c-side{position:absolute;left:2.5%;top:3%;font:900 .8rem var(--f-body);color:var(--ink)}
.c-window{position:absolute;left:18%;right:18%;top:40%;height:48%;border-radius:40px;background:linear-gradient(180deg,#2e2b27,#151311);box-shadow:inset 0 0 0 2px #0a0a0a;display:flex;align-items:center;justify-content:space-between;padding:0 6%}
.c-window .tape{position:absolute;left:30%;right:30%;top:22%;bottom:22%;background:rgba(80,46,30,.75);border-radius:4px;z-index:0}
.reel{position:relative;z-index:1;width:30%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#151311 0 22%,transparent 23%),repeating-conic-gradient(#f4f1ea 0 18deg,#a6a196 18deg 60deg);
  box-shadow:0 0 0 3px #3d2316,0 0 0 6px #5a3420;animation:spin 1.6s linear infinite;animation-play-state:paused}
.reel.r{box-shadow:0 0 0 2px #3d2316}
.cassette-card:hover .reel,.cassette-card:focus-visible .reel,.cassette-card:focus-within .reel{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.c-bottom{position:absolute;left:20%;right:20%;bottom:0;height:20%;background:linear-gradient(180deg,#2e2b27,#1c1a17);clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);display:flex;justify-content:space-around;align-items:center;padding:0 16%}
.c-bottom i{width:9%;aspect-ratio:1;border-radius:50%;background:#050505}
.screw{position:absolute;width:3.2%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ddd,#555)}
.s1{left:2.5%;top:4%}.s2{right:2.5%;top:4%}.s3{left:2.5%;bottom:5%}.s4{right:2.5%;bottom:5%}

/* CD im Jewel Case */
.cd-stage{position:relative;width:72%;aspect-ratio:1;margin:.4rem 0 .4rem 2%}
.disc{position:absolute;inset:3%;border-radius:50%;transition:transform .7s cubic-bezier(.2,.8,.2,1);
  background:radial-gradient(circle,#1A1714 0 7%,#d2cdc2 7.5% 15%,rgba(255,255,255,.25) 15.5% 17%,transparent 17.5%),conic-gradient(from 0deg,#eef0f6,#ffc3e1,#bff6ff,#fff1a8,#e0d0ff,#b6ffe6,#ffc3e1,#eef0f6);
  box-shadow:0 0 0 1px rgba(0,0,0,.3),0 8px 16px rgba(0,0,0,.3)}
.disc-sheen{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,.12) 0 1px,transparent 1px 3px),conic-gradient(from 90deg,transparent,rgba(255,255,255,.5) 20deg,transparent 50deg 180deg,rgba(255,255,255,.4) 200deg,transparent 230deg);mix-blend-mode:overlay;-webkit-mask:radial-gradient(circle,transparent 0 17%,#000 18%);mask:radial-gradient(circle,transparent 0 17%,#000 18%)}
.jewel{position:absolute;inset:0;border-radius:3px;box-shadow:0 0 0 2px var(--ink),6px 8px 0 rgba(26,23,20,.25);overflow:hidden}
.art{position:absolute;inset:0 0 0 8%;display:flex;align-items:flex-end;padding:8%}
.art span{font:900 italic clamp(.95rem,2vw,1.2rem)/1.05 var(--f-body);text-transform:uppercase;color:#fff;background:var(--ink);padding:.15em .35em}
.art1{background:radial-gradient(circle at 70% 30%,var(--yellow) 0 14%,transparent 15%),repeating-linear-gradient(180deg,var(--red) 0 8px,#8a0010 8px 14px)}
.art2{background:linear-gradient(180deg,var(--yellow),var(--mag) 45%,var(--ink) 45%)}
.art2::before{content:"";position:absolute;left:0;right:0;top:45%;bottom:0;background:linear-gradient(rgba(60,195,236,.8) 2px,transparent 2px) 0 0/100% 14px,linear-gradient(90deg,rgba(60,195,236,.8) 2px,transparent 2px) 0 0/18px 100%,var(--ink)}
.art2 span{position:relative}
.art3{background:radial-gradient(circle,rgba(26,23,20,.35) 1.5px,transparent 2px) 0 0/8px 8px,conic-gradient(from 45deg at 30% 70%,var(--cyan),var(--yellow),var(--pink),var(--cyan))}
.hinge{position:absolute;left:0;top:0;bottom:0;width:8%;background:repeating-linear-gradient(180deg,rgba(255,255,255,.5) 0 2px,rgba(160,160,170,.4) 2px 5px);box-shadow:inset -2px 0 0 rgba(255,255,255,.4)}
.gloss{position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.35) 0 18%,transparent 30% 62%,rgba(255,255,255,.12) 70%,transparent 80%);pointer-events:none}
.cd-card:hover .disc,.cd-card:focus-visible .disc,.cd-card:focus-within .disc{transform:translateX(36%) rotate(160deg)}

/* Vinyl-Hülle */
.sleeve-stage{position:relative;width:72%;aspect-ratio:1;margin:.4rem 0 .4rem 2%}
.lp{position:absolute;inset:2%;border-radius:50%;transform:translateX(9%) rotate(0);transition:transform .8s cubic-bezier(.2,.8,.2,1);
  background:radial-gradient(circle,transparent 0 31%,rgba(255,255,255,.06) 31.5%,transparent 32.5%),repeating-radial-gradient(circle,#0e0d0c 0 1px,#1c1a17 1.5px 2.2px),#0f0e0c;box-shadow:0 0 0 2px #050505,0 8px 14px rgba(0,0,0,.4)}
.lp::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 30deg,rgba(255,255,255,.14) 45deg,transparent 60deg 210deg,rgba(255,255,255,.1) 225deg,transparent 240deg)}
.lp-label{position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle,#1A1714 0 8%,var(--yellow) 9% 60%,var(--red) 61%)}
.sleeve{position:absolute;inset:0;border-radius:2px;display:flex;align-items:flex-end;padding:9%;box-shadow:0 0 0 2px var(--ink),6px 8px 0 rgba(26,23,20,.25)}
.sleeve span{font:900 italic clamp(.95rem,2vw,1.2rem)/1.05 var(--f-body);text-transform:uppercase;color:#fff;background:var(--ink);padding:.2em .4em}
.sl1{background:repeating-linear-gradient(90deg,var(--yellow) 0 12%,var(--red) 12% 24%,var(--cyan) 24% 36%,var(--ink) 36% 48%)}
.sl2{background:radial-gradient(circle at 50% 110%,var(--red) 0 30%,var(--mag) 31% 45%,var(--ink) 46%)}
.sl3{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9) 0 3%,transparent 4%),repeating-conic-gradient(from 0deg at 50% 50%,var(--cyan) 0 10deg,var(--paper-w) 10deg 20deg)}
.sleeve-card:hover .lp,.sleeve-card:focus-visible .lp,.sleeve-card:focus-within .lp{transform:translateX(40%) rotate(220deg)}

/* Boombox (aufgeklebter Ausschnitt) */
.boombox{position:relative;width:min(100%,520px);padding-top:13%;rotate:-2deg}
.boombox>.tape-strip{top:8%;left:12%;rotate:-28deg}
.bb-handle{position:absolute;left:22%;right:22%;top:0;height:16%;border:clamp(8px,1.8vw,12px) solid #8c877d;border-bottom:0;border-radius:30px 30px 0 0}
.bb-antenna{position:absolute;right:9%;top:-14%;width:3px;height:30%;background:linear-gradient(#fff,#777);transform:rotate(18deg);transform-origin:bottom}
.bb-body{position:relative;border-radius:18px;padding:4% 4% 5%;background:linear-gradient(180deg,#e2ddd2 0%,#b3ada2 6%,#2e2b27 7%,#1e1c19 60%,#151311 100%);box-shadow:inset 0 0 0 2px #514b43,0 0 0 8px var(--paper-w),0 0 0 10px rgba(26,23,20,.2),0 18px 28px rgba(26,23,20,.35)}
.bb-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin:2% 1% 3%}
.bb-brand{font:400 clamp(.9rem,2.2vw,1.2rem) var(--f-lcd);letter-spacing:.12em;color:var(--yellow);white-space:nowrap}
.bb-keys{display:flex;gap:4px}
.bb-keys i{width:clamp(12px,3vw,24px);height:12px;border-radius:2px;background:linear-gradient(#efebe2,#8d887d);box-shadow:0 2px 0 #333}
.bb-keys i.on{background:linear-gradient(#ff6b6b,var(--red));transform:translateY(2px)}
.bb-main{display:grid;grid-template-columns:1fr 1.05fr 1fr;gap:3%;align-items:center}
.bb-woofer{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle,#2e2b27 0 2px,#171513 2px 5px);box-shadow:inset 0 0 0 4px #49443d,0 0 0 3px #0b0a09,0 0 0 6px #77716a}
.cone{display:block;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#555 0 12%,#1d1b18 13% 40%,#2e2b27 41% 60%,#141210 61%);animation:thump var(--beat) ease-out infinite}
@keyframes thump{12%{transform:scale(1.06)}}
.bb-center{display:grid;gap:8px;min-width:0}
.vu-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.vu{position:relative;aspect-ratio:1.5;border-radius:6px;overflow:hidden;background:linear-gradient(180deg,#fff2c2,#f3d27a);box-shadow:inset 0 0 0 2px #333}
.vu::before{content:"";position:absolute;left:12%;right:12%;top:22%;height:60%;border-radius:50% 50% 0 0;border-top:2px solid #333}
.vu::after{content:"";position:absolute;right:12%;top:22%;width:28%;height:30%;border-top:3px solid var(--red);border-radius:0 60% 0 0}
.vu span{position:absolute;left:8%;bottom:4%;font:700 .6rem var(--f-body);color:#333}
.needle{position:absolute;left:50%;bottom:-6%;width:2px;height:82%;background:#111;transform-origin:50% 100%;transform:rotate(-40deg);animation:vu var(--beat) ease-out infinite}
.needle.n2{animation-duration:calc(var(--beat) * 1.02);animation-delay:-.08s}
@keyframes vu{0%{transform:rotate(28deg)}20%{transform:rotate(14deg)}55%{transform:rotate(-18deg)}100%{transform:rotate(-34deg)}}
.bb-deck{position:relative;display:flex;justify-content:space-around;align-items:center;aspect-ratio:2.2;border-radius:8px;background:linear-gradient(180deg,#100f0d,#2a2724);box-shadow:inset 0 0 0 2px #514b43;padding:0 10% 8%}
.bb-deck .reel{width:26%;animation-play-state:running}
.bb-deck span{position:absolute;left:0;right:0;bottom:4%;text-align:center;font:400 clamp(.55rem,1.4vw,.8rem) var(--f-lcd);color:var(--cyan);white-space:nowrap}
.bb-lcd{text-align:center;font:400 clamp(.75rem,2vw,1.15rem)/1.6 var(--f-lcd);color:#7CFFB2;background:#06140c;border-radius:6px;box-shadow:inset 0 0 0 1px #1d4b31;white-space:nowrap}

/* ---------- Termine ---------- */
.gigs{list-style:none;padding:0;margin:0 0 1.6rem;display:grid;gap:1rem}
.gig{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.1rem;align-items:center;padding:.9rem 1rem;background:var(--paper-w);border:2px solid var(--ink);box-shadow:4px 4px 0 rgba(26,23,20,.2);transition:transform .25s}
.gig:nth-child(odd){rotate:-.5deg}.gig:nth-child(even){rotate:.4deg}
.gig:hover{transform:translateX(6px) rotate(-.6deg)}
.gig-date{display:grid;justify-items:center;min-width:4.6rem;padding:.35rem .5rem;background:var(--red);color:#fff;border:2px solid var(--ink);rotate:-3deg}
.gd{font:400 2.1rem/1 var(--f-display)}
.gm{font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem}
.gy{font-size:.72rem;font-weight:700}
.gig-info h3{margin:0 0 .15rem;font-size:1.06rem}
.gig-info p{margin:0;color:var(--muted);font-size:.95rem}
.gig-side{grid-column:1/-1;display:flex;gap:.5rem;flex-wrap:wrap}
@media (min-width:640px){.gig{grid-template-columns:auto 1fr auto}.gig-side{grid-column:auto;flex-direction:column;align-items:flex-end}}
.pill{font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:.2em .7em;border:2px solid var(--ink)}
.pill-open{background:var(--cyan);color:var(--ink)}
.pill-closed{background:var(--paper);color:var(--ink);border-style:dashed}
.past{margin:1rem 0 2.4rem;border:2px dashed var(--ink);padding:.3rem 1rem;background:rgba(251,247,236,.6)}
.past summary{cursor:pointer;font:900 italic 1rem/1.2 var(--f-body);text-transform:uppercase;padding:.8rem 0;min-height:44px}
.past .gigs{margin-top:.6rem}
.gigs-past .gig{opacity:.8}
.note-box{margin-top:1rem;rotate:.6deg}
.note-box h3{font-size:1.4rem;color:var(--red-t)}
.ph-gigs{position:absolute;right:var(--gut);top:-1.6rem;width:64px}

/* Gameboy */
.gameboy{width:min(100%,290px);border-radius:12px 12px 46px 12px;padding:7% 7% 0;background:linear-gradient(160deg,#e4e0d4,#c5c0b2 60%,#b0ab9d);color:#0f380f;rotate:3deg;
  box-shadow:inset 0 2px 0 #fff,inset 0 -4px 0 rgba(0,0,0,.18),0 0 0 8px var(--paper-w),0 0 0 10px rgba(26,23,20,.2),0 20px 30px rgba(26,23,20,.35)}
.gb-screen-wrap{position:relative;border-radius:10px 10px 30px 10px;background:#5b5d72;padding:9% 10%;box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.gb-power{position:absolute;left:3.5%;top:40%;width:6px;height:6px;border-radius:50%;background:#ff2a2a}
.gb-screen{min-height:190px;background:#9bbc0f;border-radius:3px;padding:8% 7%;display:flex;flex-direction:column;justify-content:space-between;gap:.5rem;box-shadow:inset 0 0 0 2px #8bac0f,inset 3px 3px 0 rgba(15,56,15,.15)}
.gb-screen p{margin:0;font-family:var(--f-lcd);color:#0f380f;line-height:1}
.gb-h{font-size:1.5rem;letter-spacing:.12em;border-bottom:2px solid #306230;padding-bottom:.2em}
.gb-count{font-size:1.65rem;letter-spacing:.02em;white-space:nowrap}
.gb-count small{font-size:.6em;margin-left:1px}
.gb-venue{font-size:1.1rem;line-height:1.1!important}
.gb-ex{font-size:.95rem;background:#0f380f;color:#9bbc0f!important;align-self:flex-start;padding:.1em .3em}
.gb-brand{margin:.7rem 0 0;font:900 italic .9rem var(--f-body);color:#23237a;letter-spacing:.04em}
.gb-controls{position:relative;height:120px}
.dpad{position:absolute;left:4%;top:20%;width:28%;aspect-ratio:1;background:linear-gradient(#2a2a2a,#2a2a2a) center/34% 100% no-repeat,linear-gradient(#2a2a2a,#2a2a2a) center/100% 34% no-repeat}
.ab{position:absolute;width:15%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d9437a,#8b1a49);box-shadow:0 3px 0 rgba(0,0,0,.3)}
.ab.a{right:6%;top:6%}.ab.b{right:25%;top:22%}
.gb-speaker{position:absolute;right:6%;bottom:4%;width:18%;height:12%;background:repeating-linear-gradient(115deg,transparent 0 6px,rgba(0,0,0,.35) 6px 9px)}
.ph-gb{position:absolute;left:8%;bottom:-10px;width:62px}
@media (max-width:899px){.ph-gb{left:2%}}

/* ---------- Poster-Mittelseite ---------- */
.poster-row{display:grid;gap:2.6rem;align-items:center}
@media (min-width:900px){.poster-row{grid-template-columns:1.55fr .6fr}}
.poster{position:relative;margin:0;aspect-ratio:4/3;background:var(--yellow);border:10px solid var(--paper-w);box-shadow:0 0 0 2px var(--ink),12px 14px 0 rgba(0,0,0,.35);overflow:hidden;rotate:-.8deg}
@media (max-width:600px){.poster{aspect-ratio:3/4}}
.poster::before,.poster::after{content:"";position:absolute;z-index:3;pointer-events:none}
.poster::before{top:0;bottom:0;left:calc(50% - 6px);width:12px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.18) 45%,rgba(255,255,255,.55) 55%,transparent)}
.poster::after{left:0;right:0;top:calc(50% - 5px);height:10px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.12) 45%,rgba(255,255,255,.45) 55%,transparent)}
.staple{position:absolute;z-index:4;left:calc(50% - 4px);width:8px;height:46px;border-radius:2px;background:linear-gradient(180deg,#3d3d3d 0 4px,transparent 4px calc(100% - 4px),#3d3d3d calc(100% - 4px)),linear-gradient(90deg,#6f6f6f,#f4f4f4 45%,#7a7a7a);box-shadow:1px 2px 3px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.35)}
.s-top{top:18%}.s-bot{bottom:18%}
.poster-art{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.pa-rays{position:absolute;inset:-30%;background:repeating-conic-gradient(from 0deg,var(--red) 0 9deg,var(--yellow) 9deg 18deg);animation:rays 60s linear infinite}
@keyframes rays{to{transform:rotate(360deg)}}
.pa-disc{position:absolute;width:62%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#0e0d0c 0 2px,#24211d 2.5px 4px);box-shadow:0 0 0 6px var(--ink),0 0 0 14px var(--paper-w)}
.pa-disc i{position:absolute;inset:36%;border-radius:50%;background:radial-gradient(circle,#1A1714 0 8%,var(--cyan) 9% 100%)}
.pa-name{position:relative;margin:0;font:400 clamp(4.5rem,15vw,11rem)/.8 var(--f-display);color:#fff;transform:skewX(-10deg) rotate(-6deg);text-shadow:6px 6px 0 var(--ink),-3px -3px 0 var(--mag)}
.pa-name span{font:900 italic .3em/1 var(--f-body);display:block;color:var(--yellow);text-shadow:3px 3px 0 var(--ink)}
.pa-tag{position:absolute;bottom:7%;left:50%;translate:-50% 0;margin:0;white-space:nowrap;background:var(--ink);color:var(--yellow);font:900 italic clamp(.7rem,1.6vw,1rem)/1 var(--f-body);text-transform:uppercase;padding:.5em .8em;rotate:2deg}
.autogramm{justify-self:center;width:min(100%,280px);background:var(--paper-w);color:var(--ink);padding:2.2rem 1.2rem 1.6rem;border:2px solid var(--ink);box-shadow:8px 8px 0 rgba(0,0,0,.3);rotate:4deg;text-align:center}
.ag-kicker{font:900 italic .82rem var(--f-body);text-transform:uppercase;letter-spacing:.14em;background:var(--red);color:#fff;display:inline-block;padding:.2em .6em;margin-bottom:.9rem}
.ag-photo{width:62%;margin:0 auto .6rem;border-radius:50%;box-shadow:0 0 0 5px var(--yellow),0 0 0 7px var(--ink)}
.ag-name{font:400 2.2rem/1 var(--f-display);margin:.8rem 0 .2rem;text-transform:uppercase}
.ag-sign{font:700 1.75rem/1.05 var(--f-hand);color:var(--blue);rotate:-5deg;margin:.4rem 0 0}

/* ---------- Booking-Coupon / Notizblock ---------- */
.cta-inner{display:grid;gap:1.6rem;align-items:center}
@media (min-width:900px){.cta-inner{grid-template-columns:1.5fr .5fr}}
.coupon{position:relative;background-color:#fff;background-image:var(--noise);background-size:220px;border:3px dashed var(--ink);padding:clamp(1.3rem,3vw,2.2rem);outline:8px solid var(--paper-w);rotate:-.6deg}
.coupon .scissors{position:absolute;left:1.4rem;top:-1.4rem;font-size:2.2rem;line-height:1;background:var(--paper);padding:0 .3rem;rotate:0deg}
.sc-cta{justify-self:center;font-size:2.3rem;rotate:-8deg}
.check-list{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.55rem}
.check-list li{position:relative;padding-left:2.2rem}
.check-list li::before{content:"";position:absolute;left:0;top:.15em;width:1.25rem;height:1.25rem;border:2px solid var(--ink);background:#fff}
.check-list li::after{content:"✓";position:absolute;left:.2rem;top:-.3em;font:700 1.6rem/1 var(--f-hand);color:var(--blue)}
.notebook{position:relative;padding:1.6rem 1.4rem 1.6rem 3.4rem;border:2px solid var(--ink);box-shadow:6px 6px 0 rgba(26,23,20,.2);rotate:.8deg;line-height:2rem;
  background:linear-gradient(90deg,transparent 2.3rem,rgba(209,0,15,.55) 2.3rem 2.45rem,transparent 2.45rem),repeating-linear-gradient(180deg,transparent 0 calc(2rem - 1px),rgba(31,63,166,.22) calc(2rem - 1px) 2rem),#fffdf4}
.notebook::before{content:"";position:absolute;left:.7rem;top:1rem;bottom:1rem;width:.8rem;background:radial-gradient(circle,var(--paper) 0 .3rem,transparent .34rem) 0 0/.8rem 2rem repeat-y}
.notebook .headline{line-height:1;margin-bottom:.6rem}
.notebook .ex-inline{margin:0}
.spec-list{list-style:none;padding:0;margin:0 0 1.2rem}
.spec-list li{padding:0 0 0 1.2rem;position:relative}
.spec-list li::before{content:"→";position:absolute;left:0;color:var(--red-t);font-weight:900}
.notebook .spec-list{margin:0}
.sc-rider{display:block;margin:.4rem 0 0 auto;width:max-content;max-width:100%;text-align:right;font-size:1.7rem;rotate:-4deg}
.media-stack{position:relative;width:min(100%,360px);aspect-ratio:1.1}
.media-stack.solo{display:grid;place-items:center}
.floppy{position:absolute;left:0;top:0;width:68%;aspect-ratio:1;border-radius:4px 14px 4px 4px;background:linear-gradient(160deg,#2e2b27,#171513);box-shadow:inset 0 0 0 2px #514b43,0 0 0 6px var(--paper-w),0 0 0 8px rgba(26,23,20,.2),0 16px 24px rgba(26,23,20,.35);transform:rotate(-8deg);animation:float 6s ease-in-out infinite}
.floppy.big{position:relative;width:min(80%,300px);margin:auto}
.fl-shutter{position:absolute;left:24%;right:24%;top:0;height:30%;background:linear-gradient(90deg,#c9c6bd,#f4f2ec 50%,#aaa69c);border-radius:0 0 3px 3px}
.fl-shutter::after{content:"";position:absolute;right:16%;top:16%;width:22%;height:66%;background:#171513;border-radius:2px}
.fl-label{position:absolute;left:12%;right:12%;bottom:6%;height:52%;background:linear-gradient(180deg,var(--red) 0 14%,var(--paper-w) 14%);border-radius:3px;padding:20% 6% 0;font:700 clamp(.95rem,2.6vw,1.3rem)/1 var(--f-hand);color:var(--blue);overflow:hidden;word-break:break-all}
.minidisc{position:absolute;right:0;bottom:0;width:52%;aspect-ratio:.94;border-radius:8px;background:linear-gradient(160deg,var(--cyan),#0a7a90 70%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 0 0 6px var(--paper-w),0 0 0 8px rgba(26,23,20,.2),0 16px 24px rgba(26,23,20,.35);transform:rotate(7deg);animation:float 6s ease-in-out -3s infinite}
.md-window{position:absolute;left:14%;right:14%;top:8%;height:40%;border-radius:4px;background:linear-gradient(90deg,#c9c6bd,#fff 50%,#aaa69c)}
.md-label{position:absolute;left:12%;right:12%;bottom:10%;font:400 1.15rem var(--f-lcd);color:var(--ink);background:var(--paper-w);padding:.2em .4em;border-radius:3px}
@keyframes float{50%{translate:0 -10px}}

/* Walkman */
.walkman{position:relative;width:min(100%,270px);padding-top:30%;rotate:4deg}
.phones{position:absolute;left:4%;top:0;width:92%;z-index:0}
.wm-body{position:relative;z-index:1;border-radius:14px;padding:12% 10%;background:linear-gradient(160deg,#2d6fd8,#1a3f9a 60%,#132c70);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 0 0 3px #c9c6bd,0 0 0 8px var(--paper-w),0 0 0 10px rgba(26,23,20,.2),0 18px 28px rgba(26,23,20,.35)}
.wm-window{display:flex;justify-content:space-around;align-items:center;aspect-ratio:1.6;border-radius:8px;background:linear-gradient(180deg,rgba(10,10,10,.85),rgba(40,40,50,.85));box-shadow:inset 0 0 0 3px #c9c6bd;padding:0 14%}
.wm-window .reel{width:28%;animation-play-state:running;animation-duration:2.4s}
.wm-brand{display:block;margin-top:10%;font:900 italic 1rem var(--f-body);letter-spacing:.25em;color:#fff}
.wm-keys{display:flex;gap:6%;margin-top:8%}
.wm-keys i{flex:1;height:14px;border-radius:3px;background:linear-gradient(#f3f3f7,#9ea3b8)}
.wm-keys i.play{background:linear-gradient(#ffe36b,var(--yellow))}
.sc-wm{position:absolute;right:0;top:-.6rem;rotate:10deg;font-size:2rem}

/* ---------- Top 10 ---------- */
.chart-wrap{display:grid;gap:2.2rem;align-items:start}
@media (min-width:900px){.chart-wrap{grid-template-columns:.8fr 1.2fr}}
.chart-head{position:relative;padding-right:7rem}
@media (max-width:560px){.chart-head{padding-right:0}.b-chart{--s:96px;top:-46px;right:-6px}}
.chart{list-style:none;margin:0;padding:.6rem 1rem 1.4rem;rotate:.8deg}
.ch-row{display:grid;grid-template-columns:3rem 2.6rem 1fr;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:2px dotted rgba(26,23,20,.28)}
.ch-row:nth-child(-n+3) .ch-rank{background:var(--red);color:#fff}
.ch-rank{display:grid;place-items:center;width:2.6rem;height:2.6rem;font:400 1.6rem/1 var(--f-display);background:var(--ink);color:var(--yellow)}
.ch-mv{font-weight:900;font-size:1rem;text-align:center}
.ch-up .ch-mv{color:var(--green)}.ch-down .ch-mv{color:var(--red-t)}.ch-same .ch-mv{color:var(--muted)}
.ch-new .ch-mv{font:900 italic .72rem/1 var(--f-body);background:var(--yellow);border:2px solid var(--ink);padding:.25em .2em;rotate:-8deg}
.ch-t b{display:block;font:900 italic 1.06rem/1.2 var(--f-body);text-transform:uppercase}
.ch-t span{font-size:.88rem;color:var(--muted)}

/* ---------- Über: Starschnitt, Foto-Story, Leserpost ---------- */
.starschnitt{position:relative;margin:0;width:min(100%,300px);padding:14px;border:3px dashed var(--ink);background:transparent;rotate:-3deg}
.starschnitt .scissors{position:absolute;left:-1.3rem;top:38%;font-size:2.3rem;line-height:1;rotate:90deg;background:var(--pink);padding:.1rem}
.starschnitt img,.photo-ph{width:100%;aspect-ratio:4/5;object-fit:cover;border:8px solid var(--paper-w);box-shadow:0 0 0 2px var(--ink)}
.photo-ph{display:grid;place-items:center;padding:12%;background:radial-gradient(circle,rgba(26,23,20,.16) 1.4px,transparent 1.9px) 0 0/8px 8px,var(--yellow)}
.starschnitt figcaption{margin-top:.6rem;font-size:.9rem;text-align:center}
.starschnitt figcaption b{display:inline-block;background:var(--ink);color:var(--yellow);font-style:italic;font-weight:900;text-transform:uppercase;padding:.1em .45em;margin-right:.3em}
.ph-star{position:absolute;right:4%;top:-6px;width:62px;color:var(--ink)}
.story{list-style:none;margin:0;padding:0;display:grid;gap:2rem 1.8rem}
@media (min-width:760px){.story{grid-template-columns:1fr 1fr}}
.panel{position:relative;background:#fff;border:4px solid var(--ink);box-shadow:8px 8px 0 rgba(26,23,20,.25);display:flex;flex-direction:column}
.panel:nth-child(odd){rotate:-.8deg}.panel:nth-child(even){rotate:.9deg}
.panel-art{position:relative;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1rem 1rem .6rem;flex:1;background:radial-gradient(circle,rgba(209,0,15,.22) 1.6px,transparent 2.1px) 0 0/9px 9px,#FFF4C2}
.p2 .panel-art,.p4 .panel-art{background:radial-gradient(circle,rgba(31,63,166,.2) 1.6px,transparent 2.1px) 0 0/9px 9px,#DDF3FB}
.panel-art svg{width:min(100%,280px);height:auto}
.bubble{position:relative;align-self:flex-start;max-width:85%;margin:0 0 .9rem;background:#fff;border:3px solid var(--ink);border-radius:50% / 46%;padding:.9rem 1.3rem;font:900 .95rem/1.25 var(--f-body);text-transform:uppercase;text-align:center}
.bubble::after{content:"";position:absolute;left:24%;bottom:-17px;width:22px;height:18px;background:var(--ink);clip-path:polygon(0 0,100% 0,10% 100%)}
.bubble::before{content:"";position:absolute;z-index:1;left:calc(24% + 3px);bottom:-10px;width:15px;height:13px;background:#fff;clip-path:polygon(0 0,100% 0,8% 100%)}
.bubble-r{align-self:flex-end}
.bubble-r::after{left:auto;right:24%;clip-path:polygon(0 0,100% 0,90% 100%)}
.bubble-r::before{left:auto;right:calc(24% + 3px);clip-path:polygon(0 0,100% 0,92% 100%)}
.caption{margin:0;padding:.85rem 1rem .9rem;background:var(--yellow);border-top:4px solid var(--ink);font-size:1rem}
.cap-n{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;margin-right:.55rem;background:var(--ink);color:var(--yellow);font:400 1rem/1 var(--f-display);vertical-align:.1em}
.story-note{margin-top:1.6rem;color:var(--muted)}
.chips{list-style:none;padding:0;margin:0 0 1.8rem;display:flex;flex-wrap:wrap;gap:.9rem}
.chips li{padding:.45em 1em;border:2px solid var(--ink);border-radius:999px;font:900 italic 1rem/1.2 var(--f-body);text-transform:uppercase;background:var(--paper-w);box-shadow:3px 3px 0 var(--ink)}
.chips li:nth-child(4n+1){background:var(--red);color:#fff;rotate:-3deg}
.chips li:nth-child(4n+2){background:var(--cyan);rotate:2deg}
.chips li:nth-child(4n+3){rotate:-1deg}
.chips li:nth-child(4n){background:var(--mag);color:#fff;rotate:3deg}
.letters{display:grid;gap:1.8rem;margin-bottom:2rem}
@media (min-width:900px){.letters{grid-template-columns:repeat(3,1fr)}}
.letter{position:relative;margin:0;background-color:#fff;background-image:var(--noise);background-size:220px;border:2px solid var(--ink);padding:1.3rem 1.3rem 1.4rem;box-shadow:6px 6px 0 rgba(26,23,20,.25)}
.letter:nth-child(odd){rotate:-1deg}.letter:nth-child(even){rotate:1.1deg}
.letter h3{color:var(--red-t);font-size:1.15rem}
.l-from{font-size:.88rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.l-answer{margin:0;border-top:2px dotted rgba(26,23,20,.3);padding-top:.8rem}
.l-answer b{color:var(--blue)}
.quote blockquote{margin:0 0 1rem;font:700 1.35rem/1.25 var(--f-hand);color:var(--blue)}
.quote figcaption{font-size:.9rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}

/* ---------- Rechtliches ---------- */
.legal{padding-top:2.5rem}
.legal-sheet h2{font:900 italic 1.25rem/1.2 var(--f-body);text-transform:uppercase;margin:2rem 0 .6rem;color:var(--red-t)}
.legal-sheet .headline{margin-bottom:1.2rem}
.hinweis{background:var(--yellow);border:2px solid var(--ink);padding:1rem 1.2rem}

/* ---------- Footer (Rückseite) ---------- */
.site-footer{--focus:var(--yellow);position:relative;background:var(--ink);color:var(--paper);padding:3.4rem 0 1.6rem;border-top:6px solid var(--red)}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:-6px;height:6px;background:repeating-linear-gradient(90deg,var(--red) 0 40px,var(--yellow) 40px 80px,var(--cyan) 80px 120px,var(--mag) 120px 160px)}
.site-footer a{color:var(--paper)}
.site-footer a:hover{color:var(--yellow)}
.site-footer .btn-yellow{color:var(--ink)}
.foot-grid{display:grid;gap:2rem}
@media (min-width:800px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-brand{display:inline-block;font:400 2.6rem/1 var(--f-display);color:var(--red)!important;text-decoration:none;transform:skewX(-9deg);text-shadow:2px 2px 0 var(--yellow);margin-bottom:.8rem}
.foot-h{font:900 italic 1rem/1.2 var(--f-body);text-transform:uppercase;letter-spacing:.1em;color:var(--yellow);margin:0 0 .8rem}
.flist{list-style:none;padding:0;margin:0;display:grid;gap:.15rem}
.flist a{display:inline-block;padding:.35rem 0;min-height:44px}
.legal-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid rgba(243,235,214,.25);font-size:.9rem}
.legal-row ul{list-style:none;display:flex;gap:1.4rem;margin:0;padding:0}
.legal-row a{display:inline-block;padding:.5rem 0}

/* ---------- Umblätter-Effekt beim Reinscrollen (nur mit JS) ---------- */
.fx .flip{transition:transform .8s cubic-bezier(.2,.75,.25,1),opacity .55s ease;transform-origin:0 50%}
.fx .flip:not(.in){opacity:0;transform:perspective(1400px) rotateY(-32deg) translateX(-14px)}
.fx .flip.in{transition-delay:var(--d,0s)}

/* Offscreen: CSS-Animationen pausieren */
.anim-zone.is-off *,.anim-zone.is-off::before,.anim-zone.is-off::after{animation-play-state:paused!important}

/* Bewegung reduzieren: alle Animationen aus */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ticker-track{width:auto}
  .ticker-track span+span{display:none}
  .ticker-track span{white-space:normal;line-height:1.5;padding:.5rem 1rem}
}
@media (forced-colors:active){.headline,.mh-uli,.brand-name{text-shadow:none}.mh-logo,.brand-logo{filter:none}.burst,.stain,.tape-strip{display:none}}