/* ===== Tanzschule Kaechele · Konzept „A-Seite / B-Seite“ ===== */
:root{
  --paper:#F2E8D5;
  --paper-2:#E8DAC0;
  --ink:#1C1A16;
  --ink-2:#4A4438;
  --tomato:#D4442A;
  --tomato-d:#A9311B;
  --petrol:#0E4A57;
  --petrol-d:#093540;
  --mustard:#E2A230;
  --rose:#E7B9A3;
  --display:"Gloock", "Times New Roman", serif;
  --sans:"Archivo", system-ui, sans-serif;
  --gut:clamp(16px, 4.5vw, 56px);
  --max:1280px;
  --dot:radial-gradient(rgba(28,26,22,.13) 1px, transparent 1.3px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 1.0625rem/1.55 var(--sans);font-variation-settings:"wdth" 100;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-color:var(--tomato)}
:focus-visible{outline:3px solid var(--tomato);outline-offset:3px;border-radius:2px}
h1,h2,h3{margin:0;font-weight:400}
button{font:inherit;color:inherit;cursor:pointer}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:.6em 1em;z-index:50}
.skip:focus{left:8px}

/* ---- Typo-Helfer ---- */
.cat, .side__label, .cover__cat, .sleeve__meta, .nav a, .btn, .pitch__label, .pitch__scale, .seg button, .ctrl, .steps__fine, .steps__legend, .credit .since, .foot{
  font-stretch:75%;font-variation-settings:"wdth" 75;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;font-weight:600;
}

/* ===== Header ===== */
.top{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem var(--gut);background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(6px);border-bottom:1px solid rgba(28,26,22,.12);
}
.brand{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:.6rem;text-decoration:none;align-items:center}
.brand__disc{grid-row:1/3;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle,var(--paper) 0 2px,var(--tomato) 2.5px 8px,var(--ink) 8.5px);}
.brand__name{font:1.45rem/1 var(--display)}
.brand__sub{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-variation-settings:"wdth" 75;color:var(--ink-2)}
.nav ul{display:flex;gap:clamp(.8rem,2.4vw,2rem);list-style:none;margin:0;padding:0;align-items:center}
.nav a{text-decoration:none;display:inline-flex;gap:.4em;align-items:baseline;padding:.3em 0}
.nav a span{color:var(--tomato-d)}
.nav a:hover{text-decoration:underline}
.nav__call{border:1.5px solid var(--ink);padding:.55em 1em!important;border-radius:99px}
.nav__call:hover{background:var(--ink);color:var(--paper);text-decoration:none!important}
.menu-btn{display:none;background:none;border:1.5px solid var(--ink);border-radius:99px;padding:.45em 1em;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}

/* ===== Hero ===== */
.hero{
  max-width:var(--max);margin:0 auto;padding:clamp(2.5rem,7vw,6rem) var(--gut) clamp(2rem,5vw,4rem);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center;
}
.cat{color:var(--ink-2);margin:0 0 1.4rem}
.hero h1{font:clamp(3.4rem,9.2vw,8.4rem)/.88 var(--display);letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--tomato);position:relative}
.lede{max-width:34rem;font-size:clamp(1.05rem,1.4vw,1.2rem);margin:1.8rem 0 2rem;color:var(--ink-2)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem}
.btn{display:inline-block;text-decoration:none;border:1.5px solid var(--ink);padding:1em 1.4em;border-radius:99px;font-size:.82rem}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--solid{background:var(--tomato);border-color:var(--tomato);color:#fff}
.btn--solid:hover{background:var(--ink);border-color:var(--ink)}

.hero__record{position:relative;aspect-ratio:1/1;width:min(100%,520px);justify-self:start;margin-right:22%}
.vinyl{
  position:absolute;inset:3%;border-radius:50%;
  background:
    radial-gradient(circle, transparent 0 31%, rgba(255,255,255,.06) 31.3% 31.8%, transparent 32%),
    repeating-radial-gradient(circle, #1a1916 0 1.6px, #24221e 1.8px 3.2px),
    #1b1a17;
  transform:translateX(38%);box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.vinyl::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 30deg, transparent 0 10%, rgba(255,255,255,.08) 14%, transparent 20% 60%, rgba(255,255,255,.06) 64%, transparent 70%)}
.vinyl__label{position:absolute;inset:33%;border-radius:50%;background:var(--tomato);display:grid;place-items:center;color:var(--paper);text-align:center}
.vinyl__top{position:absolute;top:18%;font:1.05rem var(--display)}
.vinyl__bottom{position:absolute;bottom:20%;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-variation-settings:"wdth" 75}
.vinyl__hole{width:9%;aspect-ratio:1;border-radius:50%;background:var(--paper)}
.sleeve-hero{
  position:absolute;inset:0;background:var(--petrol);color:var(--paper);overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 8px 14px 0 -2px rgba(28,26,22,.12);
  background-image:var(--dot);background-size:5px 5px;background-color:var(--petrol);
  padding:7%;
}
.sleeve-hero__sun{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:var(--tomato);right:-18%;top:-14%}
.sleeve-hero__sun::after{content:"";position:absolute;inset:22%;border-radius:50%;background:var(--mustard)}
.sleeve-hero__cat{position:relative;font-size:.68rem;letter-spacing:.16em;font-variation-settings:"wdth" 75;font-weight:600}
.sleeve-hero__title{position:absolute;left:5%;bottom:20%;font:clamp(4rem,10vw,8.2rem)/.8 var(--display);letter-spacing:-.03em}
.sleeve-hero__by{position:absolute;left:7%;bottom:8%;font-size:.78rem;line-height:1.35;font-weight:600}
.sleeve-hero__list{position:absolute;right:6%;bottom:8%;width:38%;text-align:right;font-size:.62rem;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;font-variation-settings:"wdth" 70;opacity:.85}

.news{max-width:var(--max);margin:0 auto;padding:1rem var(--gut);border-top:1px solid rgba(28,26,22,.15);border-bottom:1px solid rgba(28,26,22,.15);font-size:.95rem;
  display:block}
.news strong{color:var(--tomato-d)}

/* ===== Seiten-Sektionen ===== */
.side{max-width:var(--max);margin:0 auto;padding:clamp(4rem,10vw,8rem) var(--gut)}
.side__head{display:grid;grid-template-columns:1fr 1fr;gap:1rem 3rem;align-items:end;margin-bottom:clamp(2rem,5vw,3.5rem)}
.side__label{grid-column:1/-1;margin:0;display:flex;gap:.8em;align-items:center;color:var(--ink-2)}
.side__label span{background:var(--ink);color:var(--paper);padding:.35em .7em;border-radius:99px}
.side__label--light{color:var(--paper)}
.side__label--light span{background:var(--tomato)}
.side h2{font:clamp(2.6rem,6.4vw,5.6rem)/.92 var(--display);letter-spacing:-.015em}
.side__intro{margin:0;max-width:30rem;color:var(--ink-2)}

/* ---- Pitch-Fader ---- */
.pitch{display:grid;grid-template-columns:auto 1fr minmax(12rem,auto);gap:1.2rem 2rem;align-items:center;
  background:var(--ink);color:var(--paper);padding:1.4rem clamp(1.2rem,3vw,2.2rem);border-radius:14px;margin-bottom:2.5rem;
  box-shadow:0 12px 24px -16px rgba(0,0,0,.5)}
.pitch__label{color:var(--mustard)}
.pitch__track{position:relative}
.pitch input{width:100%;appearance:none;-webkit-appearance:none;background:transparent;height:44px;margin:0;touch-action:pan-y;cursor:grab}
.pitch input::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:repeating-linear-gradient(90deg, rgba(242,232,213,.5) 0 1px, transparent 1px calc(100%/9)), #3a362e}
.pitch input::-moz-range-track{height:6px;border-radius:3px;background:#3a362e}
.pitch input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:38px;margin-top:-16px;border-radius:4px;
  background:linear-gradient(var(--paper) 0 45%, var(--tomato) 45% 55%, var(--paper) 55%);border:0;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.pitch input::-moz-range-thumb{width:22px;height:38px;border-radius:4px;border:0;
  background:linear-gradient(var(--paper) 0 45%, var(--tomato) 45% 55%, var(--paper) 55%)}
.pitch__scale{display:flex;justify-content:space-between;color:rgba(242,232,213,.6);font-size:.66rem;margin-top:.15rem}
.pitch__out{font:1.25rem/1.15 var(--display)}
.pitch__out small{display:block;font:500 .78rem/1.3 var(--sans);color:rgba(242,232,213,.7);margin-top:.2rem}

/* ---- Plattenkiste ---- */
.crate{overflow-anchor:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2.2rem 1.6rem}
.sleeve{display:flex;flex-direction:column;transition:opacity .4s}
.sleeve.is-far{opacity:.38}
.sleeve.is-far .cover{filter:saturate(.35)}
.cover{position:relative;aspect-ratio:1;overflow:hidden;padding:1rem;display:flex;flex-direction:column;justify-content:space-between;
  background-image:var(--dot);background-size:5px 5px;box-shadow:6px 8px 0 -2px rgba(28,26,22,.12);transition:filter .4s}
.cover h3{position:relative;font:clamp(1.7rem,2.3vw,2.15rem)/.92 var(--display);letter-spacing:-.01em;hyphens:manual;max-width:92%}
.cover__cat{position:relative;align-self:flex-start;font-size:.66rem}
.cover::before,.cover::after{content:"";position:absolute;pointer-events:none}
.c1{background-color:var(--tomato);color:var(--paper)}
.c2{background-color:var(--rose);color:var(--ink)}
.c3{background-color:var(--petrol);color:var(--paper)}
.c4{background-color:var(--mustard);color:var(--ink)}
.c5{background-color:var(--ink);color:var(--paper)}
.c6{background-color:var(--paper-2);color:var(--ink)}
/* Motive */
.m-sun::before{width:62%;aspect-ratio:1;border-radius:50%;right:-12%;top:-12%;background:var(--mc,var(--mustard))}
.m-rings::before{width:110%;aspect-ratio:1;border-radius:50%;right:-50%;top:-30%;
  background:repeating-radial-gradient(circle, var(--mc,var(--mustard)) 0 6px, transparent 6px 14px);opacity:.9}
.m-half::before{width:100%;height:50%;left:0;bottom:0;border-radius:50% 50% 0 0/100% 100% 0 0;background:var(--mc,var(--tomato));opacity:.9;transform:translateY(40%)}
.m-stripes::before{inset:0 0 auto auto;width:45%;height:100%;background:repeating-linear-gradient(0deg, var(--mc,var(--tomato)) 0 8px, transparent 8px 16px)}
.m-bars::before{left:0;right:0;top:32%;height:22%;background:var(--mc,var(--tomato))}
.c1{--mc:var(--mustard)} .c2{--mc:var(--tomato)} .c3{--mc:var(--tomato)}
.c4{--mc:var(--petrol)} .c5{--mc:var(--tomato)} .c6{--mc:var(--petrol)}
.c3.m-sun{--mc:var(--mustard)}

.sleeve__for{margin:1rem 0 .6rem;font-size:.95rem;line-height:1.45}
.tracks{list-style:none;margin:0 0 .8rem;padding:0;font-size:.88rem;counter-reset:t;border-top:1px solid rgba(28,26,22,.2)}
.tracks li{counter-increment:t;padding:.32rem 0;border-bottom:1px solid rgba(28,26,22,.12);display:flex;gap:.6em}
.tracks li::before{content:"A" counter(t);font-variation-settings:"wdth" 70;font-size:.72rem;font-weight:700;color:var(--tomato-d);min-width:1.8em;padding-top:.15em}
.tracks button{background:none;border:0;padding:0;text-decoration:underline;text-decoration-color:var(--tomato);text-underline-offset:.2em;text-align:left}
.tracks button::after{content:"";display:inline-block;width:.7em;height:.95em;margin-left:.35em;vertical-align:-.1em;
  background:var(--tomato);-webkit-mask:var(--foot) center/contain no-repeat;mask:var(--foot) center/contain no-repeat}
.sleeve__meta{margin:auto 0 0;color:var(--ink-2);font-size:.68rem}
.badge{position:absolute;right:.7rem;top:.7rem;z-index:1;background:var(--paper);color:var(--ink);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-variation-settings:"wdth" 75;padding:.35em .65em;border-radius:99px;display:flex;align-items:center;gap:.4em}
.badge::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--tomato)}
:root{--foot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-13 -27 26 54'%3E%3Cpath d='M2-26C9-26 12.5-17 12-7 11.5 1 7 5 7 12 7 20 5 26 0 26-5 26-7 20-6.5 12-6 5-10.5-1-10.5-10-10.5-20-5.5-26 2-26Z'/%3E%3C/svg%3E")}

/* ===== Seite B: Schrittbild ===== */
.side--b{max-width:none;background:var(--petrol);color:var(--paper);
  background-image:var(--dot);background-size:6px 6px}
.side--b > *{max-width:calc(var(--max) - 2*var(--gut));margin-left:auto;margin-right:auto}
.side--b .side__label{color:rgba(242,232,213,.8)}
.side--b .side__label span{background:var(--tomato)}
.side--b .side__intro{color:rgba(242,232,213,.82)}
.steps{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(0,1.6fr) minmax(220px,.9fr);gap:clamp(1.2rem,3vw,2.5rem);align-items:start}
.steps__list{display:flex;flex-direction:column;border-top:1px solid rgba(242,232,213,.3)}
.dance-btn{background:none;border:0;border-bottom:1px solid rgba(242,232,213,.3);padding:.85rem .2rem;text-align:left;display:grid;grid-template-columns:2.4em 1fr;gap:.1rem .6rem;color:var(--paper)}
.dance-btn b{font-weight:700;font-size:.74rem;color:var(--mustard);font-variation-settings:"wdth" 70;padding-top:.35em;grid-row:1/3}
.dance-btn span{font:1.35rem/1.1 var(--display)}
.dance-btn small{font-size:.72rem;opacity:.7;letter-spacing:.04em}
.dance-btn[aria-pressed="true"]{background:rgba(242,232,213,.08);box-shadow:inset 3px 0 0 var(--tomato)}
.dance-btn[aria-pressed="true"] span{color:#fff}

.floor{margin:0;background:var(--paper);color:var(--ink);border-radius:14px;overflow:hidden;box-shadow:0 20px 40px -24px rgba(0,0,0,.6)}
.floor__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;padding:.8rem;border-bottom:1px solid rgba(28,26,22,.12)}
.seg{display:inline-flex;border:1.5px solid var(--ink);border-radius:99px;overflow:hidden}
.seg button{background:none;border:0;padding:.5em .9em;font-size:.7rem}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.floor__stage{position:relative;aspect-ratio:4/3.2;
  background:
    linear-gradient(90deg, rgba(28,26,22,.07) 1px, transparent 1px) 0 0/30px 30px,
    linear-gradient(rgba(28,26,22,.07) 1px, transparent 1px) 0 0/30px 30px,
    var(--paper)}
.floor__stage svg{position:absolute;inset:0;width:100%;height:100%}
.floor__count{position:absolute;left:1rem;top:.6rem;font:clamp(2.4rem,5vw,3.6rem)/1 var(--display);color:var(--tomato)}
.floor__dir{position:absolute;right:1rem;top:1rem;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-variation-settings:"wdth" 75;color:var(--ink-2)}
.floor__ctrl{display:flex;justify-content:center;gap:.6rem;padding:.8rem;border-top:1px solid rgba(28,26,22,.12)}
.ctrl{background:none;border:1.5px solid var(--ink);border-radius:99px;min-width:46px;height:46px;font-size:1.1rem}
.ctrl--play{min-width:8.5rem;font-size:.74rem;background:var(--tomato);border-color:var(--tomato);color:#fff}
.ctrl:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.floor__cap{padding:0 1rem 1rem;font-size:.86rem;color:var(--ink-2);text-align:center}

/* Footprints im SVG */
.fp path{transition:fill .2s, stroke .2s}
.fp--ghost path{fill:rgba(28,26,22,.12);stroke:none}
.fp--free path{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.fp--weight path{fill:var(--ink);stroke:var(--ink);stroke-width:2}
.fp--moving path{fill:var(--tomato);stroke:var(--tomato-d)}
.fp-num{font:700 13px var(--sans);fill:var(--ink-2)}
.fp-num--now{fill:var(--tomato-d);font-size:15px}
.fp-arrow{fill:none;stroke:var(--tomato);stroke-width:2;stroke-dasharray:4 4}
.fp-head{fill:var(--tomato)}
.fp-pulse{fill:none;stroke:var(--tomato);stroke-width:2.5}
.fp-lr{font:700 11px var(--sans);fill:var(--paper);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.fp--free .fp-lr,.fp--ghost .fp-lr{fill:var(--ink)}

.steplist{list-style:none;margin:0;padding:0;border-top:1px solid rgba(242,232,213,.3)}
.steplist li{display:grid;grid-template-columns:3.2em 1fr;padding:.5rem 0;border-bottom:1px solid rgba(242,232,213,.18);color:rgba(242,232,213,.7);transition:color .2s}
.steplist li b{font:1.15rem/1.2 var(--display);color:var(--mustard)}
.steplist li[aria-current="step"]{color:#fff}
.steplist li[aria-current="step"] b{color:var(--tomato);color:#ff7a5c}
.steps__tip{font:1.15rem/1.35 var(--display);margin:1.4rem 0 1rem}
.steps__legend{display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:center;font-size:.64rem;color:rgba(242,232,213,.8)}
.lg{display:inline-block;width:.8rem;height:1.1rem;border-radius:40%;margin-right:-.4rem}
.lg--w{background:var(--paper)} .lg--f{border:1.5px solid var(--paper)} .lg--g{background:rgba(242,232,213,.3)}
.steps__fine{color:rgba(242,232,213,.6);font-size:.64rem;line-height:1.6;text-transform:none;letter-spacing:.03em}

/* ===== Seite C: Liner Notes ===== */
.liner{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.liner__quote{margin:0;position:sticky;top:110px}
.liner__quote p{font:clamp(1.7rem,3vw,2.6rem)/1.12 var(--display);margin:0 0 1rem;text-indent:-.45em}
.liner__quote footer{font-size:.8rem;color:var(--ink-2)}
.liner__tracks{list-style:none;margin:0;padding:0;columns:2;column-gap:2.4rem}
.liner__tracks li{break-inside:avoid;margin-bottom:1.6rem;font-size:.95rem;line-height:1.5}
.liner__tracks p{margin:.3rem 0 0}
.yr{font:1.6rem/1 var(--display);color:var(--tomato-d);display:block;border-bottom:1.5px solid var(--ink);padding-bottom:.35rem}
.liner__next .yr{color:var(--petrol)}
.liner__next p{font-weight:600}

/* ===== Seite D: Besetzung ===== */
.side--d{border-top:1px solid rgba(28,26,22,.15)}
.credits{margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 3rem}
.credit{display:grid;grid-template-columns:1fr auto;gap:.15rem 1rem;padding:1.1rem 0;border-bottom:1px dotted rgba(28,26,22,.45)}
.credit dt{font:clamp(1.35rem,2.2vw,1.75rem)/1.15 var(--display)}
.nick{font:italic 500 .95rem var(--sans);color:var(--tomato-d);margin-left:.3em;white-space:nowrap}
.credit dd{margin:0;grid-column:1}
.credit .role{font-size:.9rem}
.credit .fav{font-size:.84rem;color:var(--ink-2)}
.credit .since{grid-column:2;grid-row:1;align-self:center;color:var(--ink-2);text-align:right}
.credit .since small{display:block;text-transform:none;letter-spacing:0;font-weight:500}
.credit--lead{grid-column:1/-1}
.credit--lead dt{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.credits__note{margin:2rem 0 0;max-width:32rem;font:1.2rem/1.35 var(--display)}

/* ===== Bonus ===== */
.bonus{max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(4rem,9vw,7rem);display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.bonus__item{border-top:4px solid var(--ink);padding-top:1.2rem}
.bonus__item:nth-child(1){border-color:var(--tomato)}
.bonus__item:nth-child(3){border-color:var(--petrol)}
.bonus h2{font:1.7rem/1.05 var(--display);margin-bottom:.6rem}
.bonus p{margin:0 0 .9rem;color:var(--ink-2);font-size:.95rem}
.bonus a{font-weight:700}

/* ===== Kontakt ===== */
.contact{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);padding:clamp(4rem,10vw,8rem) var(--gut)}
.contact__disc{position:absolute;width:min(90vw,820px);aspect-ratio:1;border-radius:50%;right:-28%;top:50%;transform:translateY(-50%);
  background:repeating-radial-gradient(circle,#24221e 0 1.6px,#1c1a16 1.8px 3.4px);opacity:.9}
.contact__disc span{position:absolute;inset:34%;border-radius:50%;background:var(--tomato);opacity:.9}
.contact__body{position:relative;max-width:var(--max);margin:0 auto}
.contact h2{font:clamp(2.8rem,7vw,6rem)/.92 var(--display);margin:1.2rem 0 2.6rem}
.contact__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;max-width:62rem}
.contact h3{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-variation-settings:"wdth" 75;font-weight:700;color:var(--mustard);margin-bottom:.6rem}
.contact address{font-style:normal}
.contact p,.contact address{margin:0;line-height:1.6}
.contact .big{font:1.7rem/1.2 var(--display);text-decoration:none}
.contact .big:hover{color:var(--mustard)}
.park{margin-top:.8rem!important;font-size:.86rem;color:rgba(242,232,213,.72)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:1.4rem var(--gut);background:var(--ink);color:rgba(242,232,213,.65);border-top:1px solid rgba(242,232,213,.15)}
.foot p{margin:0}
.foot nav{display:flex;gap:1.4rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--paper)}

/* ===== Responsive ===== */
@media (max-width:1120px){
  .menu-btn{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid rgba(28,26,22,.15);display:none}
  .nav.is-open{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;padding:.4rem var(--gut) 1.2rem}
  .nav a{padding:.9rem 0;border-bottom:1px solid rgba(28,26,22,.1);font-size:.95rem}
  .nav__call{margin-top:.8rem;justify-content:center}
}
@media (max-width:1060px){
  .steps{grid-template-columns:1fr 1.5fr}
  .steps__notes{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}
  .steps__notes .steplist{grid-row:1/5}
  .contact__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .hero__record{width:min(78vw,420px);margin:1rem 0 0}
  .side__head{grid-template-columns:1fr}
  .pitch{grid-template-columns:1fr;gap:.6rem;padding:1rem 1.1rem}
  .pitch__label{display:none}
  .pitch__out small{display:none}
  .pitch__out{font-size:1.05rem}
  .pitch__scale{font-size:.58rem}
  .liner{grid-template-columns:1fr}
  .liner__quote{position:static}
  .credits{grid-template-columns:1fr}
  .bonus{grid-template-columns:1fr}
}
@media (max-width:700px){
  .steps{grid-template-columns:1fr}
  .steps__list{flex-direction:row;overflow-x:auto;border:0;gap:.5rem;padding-bottom:.4rem;scrollbar-width:thin}
  .dance-btn{flex:0 0 auto;border:1px solid rgba(242,232,213,.35);border-radius:10px;padding:.6rem .8rem;grid-template-columns:auto;}
  .dance-btn b{grid-row:auto;padding:0}
  .dance-btn span{font-size:1.1rem;white-space:nowrap}
  .dance-btn small{display:none}
  .dance-btn[aria-pressed="true"]{box-shadow:none;background:var(--tomato);border-color:var(--tomato)}
  .dance-btn[aria-pressed="true"] b{color:var(--paper)}
  .steps__notes{display:block}
  .floor__stage{aspect-ratio:1/1}
  .liner__tracks{columns:1}
  .crate{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 1rem}
  .cover{padding:.7rem}
  .cover h3{font-size:clamp(1.25rem,6vw,1.7rem)}
  .sleeve__for{font-size:.86rem}
  .tracks{font-size:.8rem}
  .contact__grid{grid-template-columns:1fr}
  .contact__disc{right:-60%;top:20%}
}
@media (max-width:700px){ .sleeve-hero__list{display:none} }
@media (max-width:420px){
  .crate{grid-template-columns:1fr 1fr}
  .tracks li::before{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* =====================================================
   Unterseiten (wird an style.css angehängt)
   ===================================================== */
[id]{scroll-margin-top:84px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--tomato);text-decoration-thickness:2px}
.nav__call[aria-current="page"]{background:var(--ink);color:var(--paper)}
.cover h2{position:relative;font:clamp(1.9rem,3vw,2.8rem)/.92 var(--display);letter-spacing:-.01em;max-width:92%}

.sleeve__link{margin-top:.7rem;align-self:flex-start;font-size:.8rem;font-weight:700;text-decoration:none;border-bottom:2px solid var(--tomato);padding-bottom:.1em}
.sleeve__link::after{content:" →"}
.sleeve__link:hover{color:var(--tomato-d)}

/* Seiten-Kopf */
.phero{max-width:var(--max);margin:0 auto;padding:clamp(3rem,8vw,6.5rem) var(--gut) clamp(2rem,4vw,3rem);display:grid;grid-template-columns:1.2fr .8fr;gap:1.4rem 4rem;align-items:end}
.phero .side__label{grid-column:1/-1}
.phero h1{font:clamp(3rem,8.4vw,7.6rem)/.88 var(--display);letter-spacing:-.02em}
.phero__intro{margin:0;color:var(--ink-2);font-size:clamp(1rem,1.3vw,1.15rem);max-width:30rem}

/* Tracklist-Index */
.tindex{max-width:var(--max);margin:0 auto clamp(2rem,5vw,4rem);padding:0 var(--gut)}
.tindex ol{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink);columns:2;column-gap:3rem}
.tindex li{break-inside:avoid}
.tindex a{display:grid;grid-template-columns:2.6em 1fr auto;gap:.8rem;align-items:center;padding:.8rem 0;border-bottom:1px solid rgba(28,26,22,.18);text-decoration:none}
.tindex b{font-size:.76rem;color:var(--tomato-d);font-variation-settings:"wdth" 70}
.tindex span{font:1.3rem/1.15 var(--display)}
.tindex a:hover span{color:var(--tomato-d)}
.tdots{display:inline-flex;gap:3px;vertical-align:middle}
.tdots i{width:5px;height:12px;border-radius:2px;background:rgba(28,26,22,.15)}
.tdots i.on{background:var(--tomato)}

/* Kurs-Eintrag */
.courses{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.course{display:grid;grid-template-columns:minmax(220px,.75fr) 1.25fr;gap:clamp(1.6rem,5vw,5rem);padding:clamp(2.5rem,6vw,4.5rem) 0;border-top:1px solid rgba(28,26,22,.18)}
.course__side{position:sticky;top:96px;align-self:start}
.course__tempo{display:flex;align-items:center;gap:.7rem;margin:1rem 0 0;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-variation-settings:"wdth" 75;color:var(--ink-2)}
.course__body{max-width:40rem}
.course__body > p{margin:0 0 1rem}
.course__for{font:clamp(1.35rem,2.2vw,1.75rem)/1.2 var(--display);margin:0 0 1.2rem!important}
.course__tracks{margin:1.6rem 0}
.course h3,.svc h3{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-variation-settings:"wdth" 75;font-weight:700;margin:0 0 .6rem;color:var(--ink-2)}
.course__tracks .tracks{columns:2;column-gap:2rem}
.course__tracks .tracks li{break-inside:avoid}
.foot-link{text-decoration:underline;text-decoration-color:var(--tomato)}
.foot-link::after{content:"";display:inline-block;width:.7em;height:.95em;margin-left:.35em;vertical-align:-.1em;background:var(--tomato);-webkit-mask:var(--foot) center/contain no-repeat;mask:var(--foot) center/contain no-repeat}
.course__hint{font-size:.78rem;color:var(--ink-2);margin:.5rem 0 0}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:1.6rem 0;background:rgba(28,26,22,.18);border:1px solid rgba(28,26,22,.18)}
.facts div{background:var(--paper);padding:.8rem .9rem}
.facts dt{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-variation-settings:"wdth" 75;font-weight:700;color:var(--tomato-d)}
.facts dd{margin:.2rem 0 0;font-size:.95rem;line-height:1.35}
.facts--stack{grid-template-columns:1fr}
.prices{margin:1.8rem 0}
.prices table{width:100%;border-collapse:collapse}
.prices th,.prices td{padding:.75rem 0;border-bottom:1px dotted rgba(28,26,22,.45);vertical-align:baseline}
.prices th{text-align:left;font-weight:600}
.prices th small{display:block;font-weight:400;color:var(--ink-2);font-size:.8rem}
.prices td{text-align:right;font:1.5rem/1 var(--display);white-space:nowrap;padding-left:1rem}
.prices__note{font-size:.82rem;color:var(--ink-2);margin:.6rem 0 0}
.book{margin-top:1.8rem;padding:1.3rem;border-radius:14px;background:var(--ink);color:var(--paper)}
.book h3{color:var(--mustard)}
.book p{margin:0 0 1rem;font-size:.95rem}
.book .book__note{margin:.9rem 0 0;font-size:.74rem;color:rgba(242,232,213,.65)}
.book .btn--solid:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.book__frames iframe{display:block;width:100%;height:520px;border:0;border-radius:8px;background:#fff;margin-top:1rem}
.wlist{list-style:none;margin:1.6rem 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}
.wlist li{padding:1rem 0;border-bottom:1px solid rgba(28,26,22,.18)}
.wlist h3{font:1.35rem/1.15 var(--display);text-transform:none;letter-spacing:0;color:var(--ink);margin:0 0 .3rem}
.wlist p{margin:0 0 .5rem;font-size:.92rem;color:var(--ink-2)}
.wlist a,.wlist span{font-size:.78rem;font-weight:700}
.wlist a{text-decoration:none;border-bottom:2px solid var(--tomato)}
.wlist span{color:var(--ink-2);font-weight:500}

.crossnav{max-width:var(--max);margin:0 auto;padding:clamp(3rem,7vw,5rem) var(--gut);border-top:2px solid var(--ink)}
.crossnav ul{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.crossnav a{display:flex;gap:.8rem;align-items:baseline;font:clamp(1.8rem,3.4vw,2.8rem)/1 var(--display);text-decoration:none;padding:1rem 0;border-bottom:1px solid rgba(28,26,22,.2)}
.crossnav b{font:700 .8rem var(--sans);color:var(--tomato-d)}
.crossnav a:hover{color:var(--tomato-d)}

/* Service */
.services{max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(3rem,7vw,5rem)}
.svc{display:grid;grid-template-columns:minmax(220px,.75fr) 1.25fr;gap:clamp(1.6rem,5vw,5rem);padding:clamp(2.5rem,6vw,4rem) 0;border-top:1px solid rgba(28,26,22,.18)}
.svc > .cover{position:sticky;top:96px;align-self:start}
.svc__body{max-width:40rem}
.svc__body > p{margin:0 0 1rem}
.steps-mini{list-style:none;counter-reset:s;margin:1.2rem 0 1.6rem;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.steps-mini li{counter-increment:s;display:flex;gap:.7rem;align-items:baseline;font-size:.92rem;padding:.7rem .8rem;background:var(--paper-2);border-radius:8px}
.steps-mini li::before{content:counter(s);font:1.3rem/1 var(--display);color:var(--tomato-d)}

/* Über uns */
.sub .side--c{padding-top:0}
.adtv{border-top:1px solid rgba(28,26,22,.15)}
.adtv__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:2rem 4rem;align-items:start}
.adtv__grid h2{margin-top:1rem}
.adtv__grid p{margin:0 0 1rem;max-width:38rem}

/* Kontakt */
.kontakt{max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(4rem,9vw,7rem);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.kontakt__card{background:var(--ink);color:var(--paper);border-radius:14px;padding:clamp(1.4rem,3vw,2.4rem)}
.kontakt__row{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid rgba(242,232,213,.15)}
.kontakt__row:last-child{border:0}
.kontakt__row h2{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-variation-settings:"wdth" 75;font-weight:700;color:var(--mustard);padding-top:.5em}
.kontakt__row p,.kontakt address{margin:0;font-style:normal;line-height:1.6}
.kontakt .big{font:clamp(1.6rem,3vw,2.3rem)/1.1 var(--display);text-decoration:none}
.kontakt .big--sm{font-size:clamp(1.25rem,2.2vw,1.6rem)}
.kontakt .big:hover{color:var(--mustard)}
.kontakt__way h2{font:clamp(1.8rem,3vw,2.4rem)/1 var(--display);margin:1rem 0}
.kontakt__way p{margin:0 0 1rem}
.kontakt__way .btn{margin:.3rem .4rem 0 0}
.way-disc{width:84px;height:84px;border-radius:50%;background:repeating-radial-gradient(circle,#1a1916 0 1.6px,#24221e 1.8px 3.2px);display:grid;place-items:center}
.way-disc span{width:46%;height:46%;border-radius:50%;background:var(--tomato);color:#fff;display:grid;place-items:center;font:1.1rem var(--display)}
.way-quote{font:clamp(1.4rem,2.4vw,1.9rem)/1.2 var(--display);color:var(--tomato-d)}

.legal{max-width:var(--max);margin:0 auto;padding:0 var(--gut) 6rem}
.legal__todo{max-width:36rem;padding:1.2rem 1.4rem;border:1.5px dashed var(--ink-2);border-radius:10px;color:var(--ink-2)}

@media (max-width:860px){
  .phero{grid-template-columns:1fr}
  .tindex ol{columns:1}
  .course,.svc{grid-template-columns:1fr}
  .course__side{position:static;max-width:340px}
  .svc > .cover{position:relative;top:auto;max-width:340px}
  .course__side .cover,.svc > .cover{aspect-ratio:16/10}
  .kontakt{grid-template-columns:1fr}
  .adtv__grid{grid-template-columns:1fr}
  .crossnav ul{grid-template-columns:1fr}
}
@media (max-width:560px){
  .facts{grid-template-columns:1fr}
  .wlist{grid-template-columns:1fr}
  .steps-mini{grid-template-columns:1fr}
  .course__tracks .tracks{columns:1}
  .kontakt__row{grid-template-columns:1fr;gap:.2rem}
  .course__side,.svc > .cover{max-width:none}
  .book__frames iframe{height:480px}
}