/* 86 – Plattenladen · Holzkisten, Albumcover, Vinyl, Tracklist */
:root {
  --bg: #15100d;
  --bg-2: #1d1612;
  --wood: #8a5a33;
  --wood-l: #a87244;
  --wood-d: #5b381d;
  --cream: #f2e8d6;
  --paper: #efe4cf;
  --mute: #cdbfac;
  --orange: #ff5b2e;
  --mustard: #f2b134;
  --teal: #39a99c;
  --pink: #f19ab8;
  --ink: #1d1714;
  --red-ink: #b2330f;
  --display: 'Bungee', 'Arial Black', Impact, system-ui, sans-serif;
  --sans: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --wrap: 1240px;
  --pad: clamp(16px, 4vw, 48px);
  --grain: repeating-linear-gradient(92deg, rgba(0,0,0,.09) 0 2px, transparent 2px 7px, rgba(255,255,255,.04) 7px 8px, transparent 8px 15px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--cream); font: 400 17px/1.6 var(--sans); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
svg { fill: currentColor; }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--mustard); color: var(--ink); padding: 10px 16px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.02; letter-spacing: .005em; }
h2 { font-size: clamp(32px, 3.9vw, 54px); text-wrap: balance; }
.label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font: 700 13px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--mustard); }
.label::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, var(--bg) 0 2px, var(--mustard) 2.5px 5px, #111 5.5px); box-shadow: 0 0 0 1px rgba(242,177,52,.5); }
.intro { margin-top: 18px; max-width: 58ch; color: var(--mute); font-size: 18px; }

.btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px 14px 14px; border-radius: 999px; font: 400 15px/1 var(--display); letter-spacing: .03em; text-decoration: none; transition: transform .15s, background .15s; }
.btn svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--ink); color: var(--orange); }
.btn--play { background: var(--orange); color: var(--ink); }
.btn--play:hover { background: #ff7a55; transform: translateY(-2px); }
.btn--line { padding-left: 24px; color: var(--cream); box-shadow: inset 0 0 0 2px var(--cream); }
.btn--line:hover { background: var(--cream); color: var(--ink); }

/* ---------- Kopf: Trennkarten ---------- */
.top { position: relative; z-index: 20; background: var(--bg); border-bottom: 10px solid var(--wood); box-shadow: 0 1px 0 var(--wood-l) inset; }
.top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: var(--grain), linear-gradient(180deg, var(--wood-l), var(--wood-d)); }
.top__in { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.logo { display: block; flex: none; padding-block: 8px; }
.logo img { width: 82px; height: auto; aspect-ratio: 1510 / 1300; }
.menu { display: none; }
.nav { display: flex; align-items: flex-end; gap: 28px; flex: 1; justify-content: flex-end; align-self: stretch; }
.dividers { display: flex; align-items: flex-end; gap: 6px; align-self: flex-end; }
.dividers a { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 12px 18px 14px 12px; border-radius: 10px 10px 0 0; background: var(--c, var(--orange)); color: var(--ink); font: 400 14px/1 var(--display); letter-spacing: .03em; text-decoration: none; transform: translateY(var(--y, 6px)); transition: transform .2s; }
.dividers li:nth-child(2) a { --c: var(--mustard); --y: 10px; }
.dividers li:nth-child(3) a { --c: var(--teal); --y: 4px; }
.dividers li:nth-child(4) a { --c: var(--pink); --y: 8px; }
.dividers a span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--c, var(--orange)); font-size: 12px; }
.dividers a:hover, .dividers a:focus-visible { transform: translateY(-4px); }
.dividers a:focus-visible { outline-color: var(--cream); }
.nav__end { display: flex; align-items: center; gap: 16px; align-self: center; }
.tel { font: 600 17px/1 var(--sans); letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.tel:hover { color: var(--mustard); }
.lang { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; text-decoration: none; font: 400 13px/1 var(--display); color: var(--ink);
  background: radial-gradient(circle, var(--bg) 0 3px, var(--mustard) 3.5px 15px, #111 15.5px 16.5px, #1b1b1b 17px 18px, #111 18.5px); box-shadow: 0 0 0 1px #333; }
.lang:hover { transform: rotate(30deg); }

/* ---------- Hero: Plattenspieler ---------- */
.hero { position: relative; overflow: hidden; background:
    radial-gradient(ellipse 60% 70% at 78% 55%, rgba(255,140,60,.13), transparent 70%),
    radial-gradient(ellipse 50% 50% at 10% 10%, rgba(57,169,156,.08), transparent 70%), var(--bg); }
.hero__in { --d: min(500px, 40vw, calc(100vh - 290px)); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 64px); align-items: center; min-height: min(780px, calc(100vh - 94px)); padding-block: clamp(30px, 5vh, 60px); }
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 22px; font: 600 15px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.sticker-tag { display: inline-block; padding: 7px 12px 6px; border-radius: 4px; background: var(--mustard); color: var(--ink); font: 400 12px/1 var(--display); letter-spacing: .04em; transform: rotate(-4deg); box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.hero h1 { font-size: clamp(38px, 4.5vw, 66px); line-height: 1.04; color: var(--cream); text-wrap: balance; }
.lead { margin-top: 24px; max-width: 50ch; color: var(--mute); font-size: 18px; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.avail { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 15px; color: var(--mute); }
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.eq i { width: 4px; height: 100%; background: var(--teal); transform-origin: bottom; animation: eq 1.1s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: -.4s; } .eq i:nth-child(3) { animation-delay: -.8s; } .eq i:nth-child(4) { animation-delay: -.2s; }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

.deck { position: relative; margin-right: calc(-1 * var(--pad) - 60px); }
.plinth { position: relative; width: calc(var(--d) * 1.32); height: calc(var(--d) * 1.1); border-radius: 22px; padding: calc(var(--d) * .05);
  background: var(--grain), linear-gradient(160deg, #b27a49, #8a5a33 45%, #5e3a1f); box-shadow: inset 0 2px 0 rgba(255,255,255,.18), inset 0 -6px 0 rgba(0,0,0,.25), 0 40px 80px rgba(0,0,0,.6); }
.platter { position: relative; width: var(--d); aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(#9aa0a6 0 2deg, #6e747a 2deg 4deg); box-shadow: 0 10px 20px rgba(0,0,0,.5); padding: calc(var(--d) * .015); }
.record { position: relative; width: 100%; height: 100%; border-radius: 50%; animation: spin 3.6s linear infinite;
  background:
    radial-gradient(circle, transparent 0 34%, rgba(255,255,255,.07) 34.5% 35%, transparent 35.5% 52%, rgba(255,255,255,.06) 52.4% 52.9%, transparent 53.3% 68%, rgba(255,255,255,.06) 68.4% 68.9%, transparent 69.3% 82%, rgba(255,255,255,.05) 82.4% 82.9%, transparent 83.3% 96.5%, #1d1d1d 97% 100%),
    repeating-radial-gradient(circle, #0c0c0c 0 1px, #1a1a1a 1.2px 2px, #101010 2.2px 3px), #0b0b0b; }
.record__sheen { position: absolute; inset: calc(var(--d) * .015); border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 20deg, transparent 0deg, rgba(255,255,255,.16) 25deg, transparent 55deg, transparent 180deg, rgba(255,255,255,.12) 205deg, transparent 240deg);
  -webkit-mask: radial-gradient(circle, transparent 0 18.5%, #000 19%); mask: radial-gradient(circle, transparent 0 18.5%, #000 19%); }
@keyframes spin { to { transform: rotate(360deg); } }
.record__label { position: absolute; inset: 31%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%;
  background: radial-gradient(circle, #111 0 3.4%, var(--paper) 3.8% 100%); box-shadow: 0 0 0 calc(var(--d) * .012) var(--orange) inset; color: var(--ink); text-align: center; }
.record__label img { width: 44%; margin-top: -2%; margin-bottom: 9%; }
.record__label::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5%; aspect-ratio: 1; margin: -2.5% 0 0 -2.5%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f5f6f7, #8d939a); }
.record__side { font: 400 calc(var(--d) * .022)/1 var(--display); letter-spacing: .08em; color: var(--red-ink); }
.record__rpm { font: 600 calc(var(--d) * .019)/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.arm { position: absolute; right: calc(var(--d) * .02); top: calc(var(--d) * .02); width: calc(var(--d) * .4); height: auto; filter: drop-shadow(0 12px 10px rgba(0,0,0,.5)); transform-origin: 72.7% 13.9%; transform: rotate(8deg); }
.knob { position: absolute; width: calc(var(--d) * .085); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f5f6f7, #9aa1a7 60%, #5e646a); box-shadow: 0 3px 6px rgba(0,0,0,.5); }
.knob--a { right: calc(var(--d) * .22); bottom: calc(var(--d) * .05); }
.knob--b { right: calc(var(--d) * .1); bottom: calc(var(--d) * .05); }
.plinth__badge { position: absolute; left: calc(var(--d) * .05); bottom: calc(var(--d) * .018); font: 600 calc(var(--d) * .024)/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(29,23,20,.6); }
.hype { position: absolute; left: calc(var(--d) * -.1); bottom: calc(var(--d) * -.04); z-index: 2; display: grid; place-content: center; justify-items: center; width: calc(var(--d) * .32); aspect-ratio: 1; padding: 10px; border-radius: 50%; background: var(--mustard); color: var(--ink); text-align: center; transform: rotate(-12deg); box-shadow: 0 10px 20px rgba(0,0,0,.4); }
.hype b { font: 400 calc(var(--d) * .1)/1 var(--display); }
.hype span { font: 700 13px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .06em; max-width: 9em; }

/* ---------- Schwerpunkt: aufgeklapptes Doppelalbum ---------- */
.focus { padding-block: clamp(80px, 10vw, 150px); background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.gatefold { display: grid; grid-template-columns: 1fr 1fr; border-radius: 6px; overflow: hidden; color: var(--ink); background: var(--paper); box-shadow: 0 40px 80px rgba(0,0,0,.55); }
.panel { position: relative; padding: clamp(28px, 4vw, 60px); }
.panel--notes { box-shadow: inset -40px 0 50px -40px rgba(60,35,10,.45);
  background: radial-gradient(circle at 54% 46%, transparent 0 34%, rgba(120,90,50,.09) 34.5% 35.5%, transparent 36% 100%), linear-gradient(180deg, #f3e9d6, #eadcc2); }
.panel--tracks { box-shadow: inset 40px 0 50px -40px rgba(60,35,10,.45); background: linear-gradient(180deg, #f1e6d1, #e8d9bd); }
.gatefold .label { color: var(--red-ink); }
.gatefold .label::before { background: radial-gradient(circle, var(--paper) 0 2px, var(--red-ink) 2.5px 5px, #111 5.5px); box-shadow: none; }
.panel--notes h2 { font-size: clamp(28px, 3.2vw, 44px); color: var(--ink); }
.notes { margin-top: 22px; font-size: 18px; line-height: 1.65; font-style: italic; color: #3c322b; max-width: 46ch; }
.notes::first-letter { float: left; font: 400 68px/.85 var(--display); font-style: normal; margin: 6px 10px 0 0; color: var(--red-ink); }
.credits { margin-top: 34px; border-top: 2px solid var(--ink); }
.credits > div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px dashed rgba(29,23,20,.4); }
.credits dt { font: 400 30px/1 var(--display); color: var(--ink); white-space: nowrap; }
.credits dd { font-size: 15px; font-weight: 500; color: #3c322b; }
.side { display: flex; align-items: center; gap: 14px; margin: 0 0 6px; font: 400 18px/1 var(--display); color: var(--red-ink); }
.side::after { content: ''; flex: 1; height: 2px; background: var(--ink); }
.tracks + .side { margin-top: 30px; }
.tracks li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(29,23,20,.18); }
.tracks__no { font: 400 18px/1.35 var(--display); color: var(--ink); }
.tracks h4 { font: 700 19px/1.3 var(--sans); margin-bottom: 4px; }
.tracks p { font-size: 15.5px; line-height: 1.5; color: #3c322b; }
.bonus { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; margin: 0; padding: clamp(24px, 3vw, 40px) clamp(28px, 4vw, 60px); background: var(--ink); color: var(--cream); }
.single { width: clamp(110px, 12vw, 160px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, transparent 0 30%, rgba(255,255,255,.07) 30.5% 31%, transparent 31.5% 60%, rgba(255,255,255,.06) 60.5% 61%, transparent 61.5% 96%, #2a2a2a 96.5%), repeating-radial-gradient(circle, #0c0c0c 0 1px, #1b1b1b 1.2px 2px), #0b0b0b; display: grid; place-items: center; box-shadow: 0 0 0 2px #2c2420; animation: spin 5s linear infinite; }
.single__label { width: 40%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--ink) 0 9%, var(--mustard) 10%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22%; font: 400 9px/1 var(--display); color: var(--ink); }
.bonus__cap { font: 700 13px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--mustard); }
.bonus__codes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 12px 0 10px; font: 400 clamp(26px, 3.6vw, 50px)/1.1 var(--display); color: var(--cream); }
.bonus__codes i { position: relative; display: inline-block; width: clamp(22px, 3vw, 46px); height: 3px; margin: 0 clamp(8px, 1vw, 16px); background: var(--orange); }
.bonus__codes i::after { content: ''; position: absolute; right: -2px; top: -5px; border: 6.5px solid transparent; border-left: 9px solid var(--orange); border-right: 0; }
.bonus__text { color: var(--mute); font-size: 16px; }
.bonus__note { margin-top: 6px; font-size: 14.5px; font-style: italic; color: #b4a690; }

/* ---------- Leistungen: Plattenkiste ---------- */
.services { padding-block: clamp(80px, 9vw, 140px) clamp(80px, 9vw, 130px); background: var(--bg-2); }
.services__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.flow-ctrl { display: flex; gap: 10px; }
html:not(.js) .flow-ctrl { display: none; }
.flow-btn { display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%; cursor: pointer; background: var(--cream); color: var(--ink); transition: background .15s; }
.flow-btn svg { width: 24px; height: 24px; }
.flow-btn:hover { background: var(--mustard); }
.crate { position: relative; margin-top: clamp(40px, 5vw, 64px); margin-inline: max(var(--pad), calc((100vw - 1440px) / 2)); border-radius: 10px 10px 6px 6px; padding: 26px 0 0;
  background: radial-gradient(ellipse 80% 70% at 50% 30%, rgba(255,160,80,.07), transparent 70%), linear-gradient(180deg, #120d0a, #1a130f);
  box-shadow: inset 18px 0 0 var(--wood-d), inset -18px 0 0 var(--wood-d), inset 0 10px 0 var(--wood), 0 30px 60px rgba(0,0,0,.5); }
.crate__divider { position: absolute; left: 40px; top: -26px; padding: 10px 18px 30px; border-radius: 12px 12px 0 0; background: var(--orange); color: var(--ink); font: 400 13px/1 var(--display); letter-spacing: .04em; transform: rotate(-3deg); z-index: 0; }
.flow { position: relative; z-index: 1; display: flex; gap: clamp(18px, 2.4vw, 34px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 20px calc(50% - 160px) 34px; overscroll-behavior-x: contain; }
.flow::-webkit-scrollbar { display: none; }
.flow:focus-visible { outline-offset: -6px; }
.lp { flex: 0 0 320px; scroll-snap-align: center; transform-origin: 50% 40%; transition: filter .2s; outline: none; }
.js .lp { filter: brightness(var(--b, 1)); }
.cover { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 3px; box-shadow: 0 2px 0 rgba(255,255,255,.08) inset, 0 20px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4); isolation: isolate; }
.cover::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(circle at 50% 50%, transparent 0 33%, rgba(255,255,255,.08) 33.5% 35%, transparent 35.5%), linear-gradient(120deg, rgba(255,255,255,.14), transparent 40%); mix-blend-mode: screen; }
.cover__cat { position: absolute; right: 14px; top: 14px; z-index: 4; font: 600 11px/1 var(--sans); letter-spacing: .18em; opacity: .85; }
.cover__title { position: absolute; z-index: 4; left: 20px; right: 20px; bottom: 20px; font: 400 26px/1.02 var(--display); hyphens: auto; -webkit-hyphens: auto; }
.lp__info { padding: 18px 4px 0; }
.lp h3 { font: 400 18px/1.15 var(--display); color: var(--cream); margin-bottom: 8px; }
.lp p { font-size: 15.5px; line-height: 1.5; color: var(--mute); }
.lp:focus-visible .cover { outline: 3px solid var(--mustard); outline-offset: 4px; }

/* sechs Cover, sechs Stile */
.cover--1 { background: #f25a2b; color: #fff4e0; }
.c1-sun { position: absolute; width: 78%; aspect-ratio: 1; left: -18%; top: -22%; border-radius: 50%; background: #1d3f8f; box-shadow: 0 0 0 18px #f25a2b, 0 0 0 26px #1d3f8f; }
.c1-path { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.cover--1 .cover__title { font-size: 44px; }
.cover--2 { color: #fff4e0; background: repeating-radial-gradient(circle at 50% 115%, #f2b134 0 18px, #ff5b2e 18px 36px, #c2245b 36px 54px, #5b2a86 54px 72px, #1d3f8f 72px 90px); }
.cover--2 .cover__title { left: 18px; right: 18px; top: 18px; bottom: auto; font-size: 30px; text-shadow: 3px 3px 0 #1d1714; }
.cover--2 .cover__cat { top: auto; bottom: 14px; color: #fff4e0; }
.cover--3 { background: #f5b7a4; color: #1d1714; }
.cover--3 img { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; object-fit: cover; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; }
.cover--3::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 1; background: #1f8f86; mix-blend-mode: screen; opacity: .75; }
.c3-sun { position: absolute; z-index: 2; left: 58%; top: 12%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #ff5b2e; }
.cover--3 .cover__title { top: 20px; bottom: auto; right: 40%; font-size: 24px; }
.cover--4 { background: #101418; color: #f3e9d8; }
.cover--4 svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover--4 .cover__title { text-align: center; font-size: 30px; letter-spacing: .06em; }
.cover--5 { background: #f3ede2; color: #1d1714; }
.c5-grid { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 18%, #1d1714 18% 22%, transparent 22%), linear-gradient(180deg, transparent 0 55%, #c2245b 55% 59%, transparent 59%), linear-gradient(135deg, transparent 0 60%, #1d3f8f 60% 70%, transparent 70%); }
.c5-grid::after { content: ''; position: absolute; right: 12%; top: 16%; width: 30%; aspect-ratio: 1; border-radius: 50%; border: 12px solid #1d1714; }
.cover--5 .cover__title { left: 26%; font-size: 26px; }
.cover--6 { background: #ffd23a radial-gradient(circle, #e8338a 34%, transparent 36%) 0 0 / 14px 14px; color: #1d1714; }
.c6-heads { position: absolute; left: 6%; right: 6%; top: 20%; display: flex; justify-content: space-between; }
.c6-heads i { width: 12%; aspect-ratio: 1 / 2.1; border-radius: 50% 50% 8px 8px / 30% 30% 8px 8px; background: #1d1714; box-shadow: 0 -2px 0 #ffd23a; position: relative; }
.c6-heads i::before { content: ''; position: absolute; left: 10%; right: 10%; top: -32%; aspect-ratio: 1; border-radius: 50%; background: #1d1714; }
.c6-heads i:nth-child(even) { transform: translateY(18%); }
.cover--6 .cover__title { padding: 10px 12px; background: #fff4e0; font-size: 22px; }

.crate__front { position: relative; z-index: 2; height: 74px; margin-top: 4px; border-radius: 0 0 6px 6px; display: flex; align-items: center; justify-content: center; background: var(--grain), linear-gradient(180deg, #b27a49, #8a5a33 60%, #6c4425); box-shadow: inset 0 3px 0 rgba(255,255,255,.18), inset 0 -4px 0 rgba(0,0,0,.25); }
.crate__front::before { content: ''; position: absolute; left: 50%; top: 14px; width: 120px; height: 18px; margin-left: -60px; border-radius: 9px; background: #1a130f; box-shadow: inset 0 3px 4px rgba(0,0,0,.7); }
.crate__front span { margin-top: 26px; font: 400 15px/1 var(--display); letter-spacing: .14em; color: rgba(29,23,20,.62); }
html:not(.js) .flow { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); overflow: visible; padding: 20px 40px 34px; }

/* ---------- Ablauf: Singles ---------- */
.process { padding-block: clamp(80px, 9vw, 140px); background: var(--bg); }
.singles li { position: relative; z-index: 0; }
.singles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: 44px; }
.sleeve { position: relative; width: 78%; aspect-ratio: 1; margin-bottom: 22px; border-radius: 3px; background: linear-gradient(135deg, #d9b98a, #c09a68); box-shadow: 0 16px 24px rgba(0,0,0,.45); }
.sleeve::before { content: ''; position: absolute; top: 4%; left: 30%; width: 92%; aspect-ratio: 1; border-radius: 50%; z-index: -1; background: conic-gradient(from 30deg, transparent 0deg, rgba(255,255,255,.13) 25deg, transparent 55deg, transparent 180deg, rgba(255,255,255,.1) 205deg, transparent 240deg), repeating-radial-gradient(circle, #0c0c0c 0 1px, #1a1a1a 1.2px 2px), #0b0b0b; box-shadow: 0 0 0 1px #3a302a, 0 10px 20px rgba(0,0,0,.5); transition: left .4s cubic-bezier(.3,1.4,.5,1); }
.singles li:hover .sleeve::before { left: 42%; }
.sleeve--2 { background: linear-gradient(135deg, #f4efe6, #dcd3c3); }
.sleeve--3 { background: linear-gradient(135deg, #2c3e8f, #1d2a66); }
.sleeve--4 { background: linear-gradient(135deg, #ff6a3d, #e04a1e); }
.sleeve__disc { position: absolute; inset: 30%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, var(--ink) 0 5%, var(--mustard) 6%); box-shadow: 0 0 0 10px rgba(0,0,0,.18), 0 0 0 12px rgba(255,255,255,.18); }
.sleeve--2 .sleeve__disc { background: radial-gradient(circle, var(--ink) 0 5%, var(--teal) 6%); }
.sleeve--3 .sleeve__disc { background: radial-gradient(circle, var(--ink) 0 5%, var(--pink) 6%); }
.sleeve--4 .sleeve__disc { background: radial-gradient(circle, var(--ink) 0 5%, var(--cream) 6%); }
.sleeve__disc b { font: 400 clamp(26px, 3vw, 40px)/1 var(--display); color: var(--ink); margin-top: -46%; }
.singles h3 { font: 400 20px/1.1 var(--display); margin-bottom: 8px; }
.singles p { color: var(--mute); font-size: 16px; max-width: 30ch; }

/* ---------- Über uns: Albumcover ---------- */
.about { padding-block: clamp(80px, 9vw, 140px); background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.about__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.album { position: relative; margin: 0 14% 0 0; }
.album__sleeve { position: relative; z-index: 1; border-radius: 3px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.6); }
.album__sleeve img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: contrast(1.05) saturate(.9); }
.album__wear { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0 41%, rgba(255,255,255,.16) 41.5% 43%, transparent 43.5%), linear-gradient(135deg, rgba(255,255,255,.12), transparent 30%, transparent 80%, rgba(0,0,0,.25)); mix-blend-mode: screen; }
.album__disc { position: absolute; z-index: 0; top: 3%; right: -24%; width: 94%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0deg, rgba(255,255,255,.14) 25deg, transparent 55deg, transparent 180deg, rgba(255,255,255,.1) 205deg, transparent 240deg), radial-gradient(circle, var(--orange) 0 16%, transparent 16.5% 32%, rgba(255,255,255,.06) 32.5% 33%, transparent 33.5%), repeating-radial-gradient(circle, #0c0c0c 0 1px, #1a1a1a 1.2px 2px), #0b0b0b; box-shadow: 0 0 0 1px #3a302a, 0 20px 40px rgba(0,0,0,.5); }
.album figcaption { position: absolute; z-index: 2; left: -22px; top: -22px; }
.sticker-round { display: grid; place-items: center; width: 128px; aspect-ratio: 1; padding: 16px; border-radius: 50%; background: var(--mustard); color: var(--ink); text-align: center; font: 400 13px/1.2 var(--display); transform: rotate(-14deg); box-shadow: 0 8px 18px rgba(0,0,0,.4); }
.about__txt h2 { margin-bottom: 22px; }
.about__txt > p { color: var(--mute); max-width: 54ch; font-size: 18px; }
.feats { margin-top: 30px; border-top: 2px solid var(--cream); }
.feats li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(242,232,214,.18); font-weight: 600; font-size: 17px; }
.feats li::before { content: ''; flex: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, var(--bg) 0 2px, var(--teal) 2.5px 6px, #111 6.5px); box-shadow: 0 0 0 1px #3a312b; }

/* ---------- Kontakt: Trennkarten ---------- */
.contact { padding-block: clamp(90px, 10vw, 150px); background: var(--bg-2); }
.contact__in { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact__head .btn { margin-top: 30px; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 54px 20px; padding-top: 30px; }
.card { position: relative; padding: 24px 24px 26px; border-radius: 0 12px 12px 12px; background: var(--c); color: var(--ink); box-shadow: 0 20px 40px rgba(0,0,0,.4); min-width: 0; }
.card--a { --c: var(--cream); } .card--b { --c: var(--mustard); } .card--c { --c: var(--teal); } .card--d { --c: var(--pink); }
.card__tab { position: absolute; left: 0; bottom: 100%; padding: 10px 16px 8px; border-radius: 10px 10px 0 0; background: var(--c); font: 400 13px/1 var(--display); letter-spacing: .04em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.card__big { font: 700 22px/1.3 var(--sans); }
.card__small { margin-top: 8px; font-size: 15px; font-weight: 500; color: #2c241f; }
.card__link { font: 700 21px/1.35 var(--sans); overflow-wrap: anywhere; }
.card__link a { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.card__link a:hover { text-decoration-thickness: 4px; }
.card a:focus-visible { outline-color: var(--ink); }

/* ---------- Fuß ---------- */
.foot { position: relative; background: #0f0b09; border-top: 10px solid var(--wood); }
.foot::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; background: var(--grain), linear-gradient(180deg, var(--wood-l), var(--wood-d)); }
.foot__in { display: grid; grid-template-columns: auto 1fr auto; gap: 18px 36px; align-items: center; padding-block: 40px 34px; }
.logo--foot img { width: 90px; }
.foot__brand { font: 400 15px/1.3 var(--display); letter-spacing: .03em; }
.foot__addr p:last-child { margin-top: 6px; font-size: 15px; color: var(--mute); }
.foot__addr a { text-decoration: none; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 8px; }
.foot__nav a { padding: 10px 14px; border-radius: 999px; box-shadow: inset 0 0 0 2px rgba(242,232,214,.4); font-size: 14px; font-weight: 600; text-decoration: none; }
.foot__nav a:hover { background: var(--cream); color: var(--ink); }
.foot__copy { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid rgba(242,232,214,.15); font-size: 14px; color: #b3a593; }

/* ---------- Rechtsseiten: Beiblatt ---------- */
.legal { padding-block: clamp(40px, 6vw, 80px) clamp(90px, 10vw, 140px); background: radial-gradient(ellipse 60% 50% at 80% 0%, rgba(255,140,60,.1), transparent 70%), var(--bg); }
.back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; padding: 10px 18px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--cream); font-weight: 600; text-decoration: none; }
.back:hover { background: var(--cream); color: var(--ink); }
.insert { position: relative; max-width: 940px; padding: clamp(28px, 5vw, 70px); border-radius: 4px; color: var(--ink); background: radial-gradient(circle at 85% 12%, transparent 0 9%, rgba(120,90,50,.1) 9.3% 9.9%, transparent 10.2%), linear-gradient(180deg, #f3e9d6, #eadcc2); box-shadow: 0 30px 60px rgba(0,0,0,.55); }
.insert__head { display: flex; align-items: center; gap: 24px; padding-bottom: 24px; margin-bottom: 30px; border-bottom: 2px solid var(--ink); }
.insert__disc { flex: none; width: 84px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--paper) 0 5%, var(--orange) 6% 30%, transparent 31% 50%, rgba(255,255,255,.07) 50.5% 51.5%, transparent 52%), repeating-radial-gradient(circle, #0c0c0c 0 1px, #1a1a1a 1.2px 2px), #0b0b0b; }
.insert .label { color: var(--red-ink); margin-bottom: 10px; }
.insert .label::before { background: radial-gradient(circle, var(--paper) 0 2px, var(--red-ink) 2.5px 5px, #111 5.5px); box-shadow: none; }
.insert h1 { font-size: clamp(26px, 3.6vw, 46px); overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
.legal-body { max-width: 68ch; font-size: 16.5px; line-height: 1.65; color: #2a221d; }
.legal-body h2 { margin: 38px 0 10px; font: 400 20px/1.25 var(--display); color: var(--ink); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body ul { margin: 0 0 14px; }
.legal-body li { position: relative; padding-left: 26px; margin-bottom: 6px; }
.legal-body li::before { content: ''; position: absolute; left: 2px; top: .38em; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle, var(--paper) 0 1.5px, var(--red-ink) 2px 4px, #111 4.5px); }
.legal-body a { color: var(--red-ink); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-body a:focus-visible { outline-color: var(--ink); }
.legal-body .legal-note { padding: 14px 18px; border-radius: 6px; background: var(--mustard); color: var(--ink); font-weight: 500; }
.legal-body .legal-address { padding: 14px 18px; border-left: 5px solid var(--red-ink); background: rgba(255,255,255,.4); }

/* ---------- Responsiv ---------- */
@media (max-width: 1180px) {
  .tel { display: none; }
  .dividers a { padding: 11px 13px 13px 10px; font-size: 13px; }
  .singles { grid-template-columns: 1fr 1fr; row-gap: 50px; }
}
@media (max-width: 960px) {
  .menu { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding: 12px 16px; border: 0; border-radius: 999px; cursor: pointer; background: var(--orange); color: var(--ink); font: 400 14px/1 var(--display); }
  .menu__ico { position: relative; width: 20px; height: 14px; background: linear-gradient(var(--ink) 0 0) center / 100% 3px no-repeat; }
  .menu__ico::before, .menu__ico::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; background: var(--ink); transition: transform .2s; }
  .menu__ico::before { top: 0; } .menu__ico::after { bottom: 0; }
  .menu[aria-expanded="true"] .menu__ico { background: none; }
  .menu[aria-expanded="true"] .menu__ico::before { transform: translateY(5.5px) rotate(45deg); }
  .menu[aria-expanded="true"] .menu__ico::after { transform: translateY(-5.5px) rotate(-45deg); }
  .js .nav { display: none; }
  .nav { position: absolute; left: 0; right: 0; top: calc(100% + 10px); flex-direction: column; align-items: stretch; gap: 22px; padding: 30px var(--pad) 28px; background: var(--bg); box-shadow: 0 30px 50px rgba(0,0,0,.6); }
  html:not(.js) .nav { position: static; display: flex; }
  .top.open .nav { display: flex; }
  .dividers { flex-direction: column; align-items: stretch; align-self: stretch; gap: 0; }
  .dividers a { --y: 0 !important; padding: 18px 18px; border-radius: 10px 10px 0 0; margin-top: -8px; font-size: 18px; box-shadow: 0 -6px 12px rgba(0,0,0,.3); }
  .dividers a span { width: 30px; height: 30px; font-size: 14px; }
  .nav__end { justify-content: space-between; }
  .tel { display: inline; font-size: 19px; }
  .hero__in { grid-template-columns: 1fr; --d: min(440px, 76vw); min-height: 0; }
  .deck { margin: 10px 0 0 auto; margin-right: calc(-1 * var(--pad) - 40px); }
  .gatefold { grid-template-columns: 1fr; }
  .panel--notes, .panel--tracks { box-shadow: none; }
  .panel--tracks { border-top: 2px dashed rgba(29,23,20,.3); }
  .about__in, .contact__in { grid-template-columns: 1fr; }
  .album { max-width: 480px; }
  .foot__in { grid-template-columns: auto 1fr; }
  .foot__nav { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .top__in { min-height: 72px; }
  .logo img { width: 66px; }
  .hero h1 { font-size: clamp(30px, 8.6vw, 40px); }
  .lead, .intro, .about__txt > p { font-size: 16.5px; }
  .hero__in { --d: 74vw; }
  .deck { margin-right: -30vw; }
  .hype { left: -10px; }
  .hype span { font-size: 10px; }
  .services__head { flex-direction: column; align-items: flex-start; }
  .crate { margin-inline: 8px; }
  .flow { padding-inline: calc(50% - 39vw); }
  .lp { flex-basis: 78vw; }
  .cover__title { font-size: 22px; }
  .cover--1 .cover__title { font-size: 34px; }
  .credits > div { grid-template-columns: 1fr; gap: 4px; }
  .bonus { grid-template-columns: 1fr; }
  .single { width: 96px; }
  .singles { grid-template-columns: 1fr; }
  .sleeve { width: 62%; }
  .cards { grid-template-columns: 1fr; gap: 50px; }
  .crate__front span { font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
  .album figcaption { left: -6px; top: -14px; }
  .sticker-round { width: 100px; font-size: 11px; }
  .foot__in { grid-template-columns: 1fr; }
  .insert__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .insert__disc { width: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .record, .single, .eq i { animation: none; }
  .lp, .sleeve::before, .btn { transition: none; }
}
.cover--3 .cover__cat, .cover--5 .cover__cat { top: auto; bottom: 14px; color: #fff4e0; z-index: 6; }
.cover--5 .cover__cat { color: #1d1714; }
.legal .wrap { max-width: calc(940px + 2 * var(--pad)); }