@font-face{font-family:Quicksand;src:url(/musik-dateien/fonts/quicksand-500-latin.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Quicksand;src:url(/musik-dateien/fonts/quicksand-700-latin.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Quicksand;src:url(/musik-dateien/fonts/quicksand-700-latin-ext.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0100-024F}
@font-face{font-family:Roboto;src:url(/musik-dateien/fonts/roboto-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Roboto;src:url(/musik-dateien/fonts/roboto-400-latin-ext.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-024F}

/* Damit der Hintergrund weich in die nächste Cover-Farbe übergeht */
@property --farbe{syntax:"<color>";inherits:true;initial-value:rgb(139 230 216)}
:root{
  --navy:#0c3b64; --mint:#8be6d8; --lime:#e0fd2c; --pink:#ff58e9; --soft:#ffa5da;
  --papier:#f2f1ec; --tinte:#0c3b64; --leise:rgba(12,59,100,.55);
  --cd:clamp(260px, min(38vw, 64vh), 580px); --ueber:.24;
  /* Eine Bewegungssprache für alles: schnell los, lang und weich auslaufen */
  --zug:cubic-bezier(.22,.8,.24,1);
}
*{box-sizing:border-box}
html,body{margin:0}
body{transition:--farbe 1.2s ease;background:var(--papier);color:var(--tinte);font:400 16px/1.5 Roboto,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit}

/* Kopf */
.kopf{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(16px,3vw,40px);pointer-events:none}
.kopf>*{pointer-events:auto}
/* Über dunklen Teilen (Diskografie, Footer) wird der Kopf hell */
.kopf{transition:color .4s}
.kopf.dunkel{color:#fff}
.marke{font:700 20px/1 Quicksand,sans-serif;text-decoration:none;letter-spacing:-.01em}
.marke b{font-weight:700}
/* Stern oben nach StellaStar, Lime mit Navy-Kontur */
.marke::after{content:"★";display:inline-block;margin-left:.24em;font-size:.34em;animation:funkeln 4.5s ease-in-out infinite;line-height:1;vertical-align:1.55em;color:currentColor}
/* Der Stern bleibt still und leuchtet nur ab und zu kurz auf */
@keyframes funkeln{0%,60%,100%{filter:drop-shadow(0 0 0 rgba(139,230,216,0))}
  72%{filter:drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 8px rgba(139,230,216,.9))}
  86%{filter:drop-shadow(0 0 0 rgba(139,230,216,0))}}
::selection{background:var(--lime);color:var(--navy)}
.kopf-links{display:flex;gap:22px;font-size:14px}
.kopf-links a{text-decoration:none;opacity:.75}
.kopf-links a:hover,.kopf-links a:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:4px}

/* Galerie */
.galerie{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:84px 0 56px}
/* Farbiges Licht hinter der CD in der Mitte, in der Grundfarbe ihres Covers */
.licht{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38vw 30vw at 56% 46%,color-mix(in srgb,var(--farbe) 42%,transparent),transparent 72%),
    radial-gradient(70vw 30vw at 50% 112%,rgba(12,59,100,.10),transparent 70%)}
.licht::after{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .23 0 0 0 0 .39 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Grosse Jahreszahl hinter den CDs: so breit, dass sie links und rechts der mittleren CD hervorschaut */
.geist{position:absolute;z-index:-1;left:50%;top:var(--geist-y,38%);transform:translate(-50%,-50%);margin:0;pointer-events:none;user-select:none;white-space:nowrap;
  font:700 clamp(150px,34vw,620px)/.8 Quicksand,sans-serif;letter-spacing:.06em;padding-left:.06em;
  color:transparent;background:linear-gradient(100deg,rgba(139,230,216,.42),rgba(224,253,44,.34) 45%,color-mix(in srgb,var(--farbe) 30%,transparent) 70%,rgba(255,88,233,.26));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:1.25px color-mix(in srgb,var(--navy) 42%,transparent)}
.zaehler{position:absolute;top:84px;left:clamp(16px,3vw,40px);margin:0;display:flex;align-items:center;gap:12px;font:700 13px/1 Quicksand,sans-serif;letter-spacing:.14em;color:var(--leise)}
.zaehler [data-zaehler]{color:var(--navy)}
/* Fortschritt: wie weit man in der Sammlung ist */
.balken{position:relative;width:clamp(80px,9vw,140px);height:3px;border-radius:3px;background:rgba(12,59,100,.15);overflow:hidden}
.balken::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--mint),var(--lime));box-shadow:inset 0 0 0 1px rgba(12,59,100,.12);transform-origin:left;transform:scaleX(var(--fortschritt,0));transition:transform .8s cubic-bezier(.25,.6,.25,1)}
.band{display:flex;align-items:center;gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:4vh calc(50vw - var(--cd) / 2 + var(--cd) * var(--ueber)) 12vh;margin-bottom:-9vh;cursor:grab;outline:none;overscroll-behavior-x:contain;perspective:1400px}
.band::-webkit-scrollbar{display:none}
.band.zieht{cursor:grabbing;scroll-snap-type:none}
.band:focus-visible .platz.aktiv .cd{outline:3px solid var(--lime);outline-offset:8px}

.platz{flex:0 0 var(--cd);height:var(--cd);scroll-snap-align:center;display:grid;place-items:center;margin:0 calc(var(--cd) * var(--ueber) * -1);transform-style:preserve-3d}
/* Jede Veröffentlichung als CD, die schräg im Raum liegt (wie auf einem Tisch, leicht gekippt).
   Die CDs steigen von links unten nach rechts oben an; die in der Mitte richtet sich etwas auf.
   Auf der Scheibe liegt das ganze Cover (nichts abgeschnitten), der Rand ist eine weiche Fläche
   aus den Farben des Covers (vorgerechnet von daten/scheiben.mjs). Schatten: drop-shadow folgt der runden Form samt Loch. */
.cd{all:unset;cursor:pointer;position:relative;display:block;width:100%;aspect-ratio:1;border-radius:50%;
  --kipp:52deg;
  transform:translateY(calc(var(--d,0) * -9% + var(--heben,0%))) rotateX(var(--kipp)) rotateZ(-22deg) scale(var(--s,1));
  opacity:var(--o,1);transition:transform .9s var(--zug), opacity .6s ease-out, filter .9s;
  filter:saturate(var(--sat,1)) drop-shadow(0 30px 24px rgba(7,31,54,.35))}
/* Weit weg von der Mitte: kein Schatten, spart Rechenzeit */
.platz.fern .cd{filter:saturate(var(--sat,1))}
.platz.aktiv .cd{--kipp:40deg}
/* Schatten unter der CD: liegt in derselben Ebene wie die Scheibe, etwas nach unten versetzt und weich, wie auf einem Tisch.
   Dazu ein schmaler, silbern glänzender Rand knapp unter der Scheibe, damit sie etwas Dicke bekommt. */
.cd::before{content:"";position:absolute;inset:-4%;border-radius:50%;pointer-events:none;
  transform:translate(-5%,13%);background:radial-gradient(closest-side,rgba(7,31,54,.55),rgba(7,31,54,.28) 62%,transparent)}
.cd::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  transform:translate(-.15%,.55%);background:conic-gradient(from 20deg,#f4f7fa,#a9b4bf 12%,#ffffff 22%,#8e9aa6 38%,#dfe5ea 52%,#7d8995 66%,#f8fafb 78%,#a3aeb9 90%,#f4f7fa);z-index:-1;
  -webkit-mask:radial-gradient(circle,transparent 0 9.5%,#000 calc(9.5% + .5px));mask:radial-gradient(circle,transparent 0 9.5%,#000 calc(9.5% + .5px))}
.cd{isolation:isolate}
.cd::before{z-index:-2}
.scheibe{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#0c3b64;
  -webkit-mask:radial-gradient(circle,transparent 0 9.5%,#000 calc(9.5% + .5px));mask:radial-gradient(circle,transparent 0 9.5%,#000 calc(9.5% + .5px))}
.scheibe img{width:100%;height:100%;display:block;pointer-events:none;user-select:none}
.scheibe::before{content:"";position:absolute;z-index:2;inset:0;border-radius:50%;
  background:
    radial-gradient(circle,transparent 0 9.5%,rgba(255,255,255,.85) 9.6% 10.4%,rgba(210,215,222,.95) 10.5% 15.5%,rgba(255,255,255,.6) 15.6% 16.2%,transparent 16.3% 96.6%,rgba(255,255,255,.75) 96.8% 100%),
    conic-gradient(from 210deg,transparent 0 8%,rgba(255,255,255,.28) 12%,transparent 18% 50%,rgba(139,230,216,.22) 56%,rgba(255,88,233,.18) 60%,rgba(224,253,44,.18) 64%,transparent 70%);
  mix-blend-mode:screen;pointer-events:none}
.scheibe::after{content:"";position:absolute;z-index:2;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(12,59,100,.18);pointer-events:none}
.cd.spielt .scheibe{animation:drehen 9s linear infinite}
@keyframes drehen{to{transform:rotate(360deg)}}

.info{text-align:center;padding:0 16px;min-height:150px}
.titel{margin:0 auto;max-width:18ch;font:700 clamp(30px,4.2vw,64px)/1.02 Quicksand,sans-serif;letter-spacing:-.02em;text-wrap:balance}
.details{margin:10px 0 18px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--leise)}
.hoeren{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:14px 26px 14px 20px;background:var(--lime);color:var(--navy);box-shadow:0 10px 24px -12px rgba(12,59,100,.6),inset 0 0 0 1.5px var(--navy);font:700 15px/1 Quicksand,sans-serif;cursor:pointer;transition:background .2s,color .2s}
.hoeren:hover,.hoeren:focus-visible{background:var(--navy);color:var(--lime);outline:none}
.video-knopf{margin-left:8px;padding-left:18px;background:var(--pink);color:#fff;box-shadow:0 10px 24px -12px rgba(12,59,100,.6)}
.video-knopf[hidden]{display:none}
.hoeren-icon{width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.hoeren.laeuft .hoeren-icon{width:11px;height:13px;border:0;background:linear-gradient(90deg,currentColor 0 35%,transparent 35% 65%,currentColor 65%)}

.pfeile{position:absolute;right:clamp(16px,3vw,40px);bottom:56px;display:flex;gap:8px}
.pfeile button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(12,59,100,.25);background:transparent;cursor:pointer;font-size:18px}
.pfeile button:hover,.pfeile button:focus-visible{background:var(--lime);border-color:var(--navy);color:var(--navy);outline:none}

/* Hinweis unten links: weiter zur Übersicht nach Jahr */
.weiter{position:absolute;left:clamp(16px,3vw,40px);bottom:56px;display:inline-flex;align-items:center;gap:10px;font:700 14px/1 Quicksand,sans-serif;text-decoration:none;color:var(--navy)}
.weiter span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--lime);color:var(--navy);font-size:18px;-webkit-text-stroke:1.2px currentColor;box-shadow:0 0 0 1.5px var(--navy);animation:runter 2.4s ease-in-out infinite}
.weiter:hover span,.weiter:focus-visible span{background:var(--navy);color:var(--lime)}
@keyframes runter{50%{transform:translateY(5px)}}
body.mit-player .weiter{bottom:130px}

/* Auftakt: beim Start links neben der ersten CD, grosse Zahlen in Quicksand, Lime als Markierung */
.auftakt{position:absolute;z-index:5;left:clamp(16px,4vw,64px);top:50%;transform:translateY(-58%);max-width:min(30vw,420px);pointer-events:none;
  transition:opacity .6s ease,transform .8s cubic-bezier(.25,.6,.25,1)}
body:not(.am-anfang) .auftakt{opacity:0;transform:translate(-30px,-58%)}
.auftakt-label{margin:0 0 22px;font:700 12px/1 Quicksand,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--leise)}
.auftakt-label::before{content:"";display:inline-block;width:28px;height:3px;margin-right:12px;border-radius:3px;background:var(--lime);box-shadow:0 0 0 1px rgba(12,59,100,.25);vertical-align:3px}
.auftakt-zahl{margin:0;font:700 clamp(18px,1.5vw,22px)/1.1 Quicksand,sans-serif;color:var(--navy)}
.auftakt-zahl b{display:block;font-size:clamp(72px,8.5vw,140px);line-height:.9;letter-spacing:-.04em}
.auftakt-zahl + .auftakt-zahl{margin-top:18px}
.auftakt-tipp{margin:28px 0 0;font-size:15px;line-height:1.5;color:var(--leise)}

/* Einstieg: die ersten CDs fliegen nacheinander von rechts herein, Jahreszahl und Titel tauchen auf */
.platz{animation:einfliegen 1.1s cubic-bezier(.16,.8,.24,1) both;animation-delay:calc(.15s + var(--n,8) * .09s)}
@keyframes einfliegen{from{opacity:0;translate:38vw 6vh}}
/* Am Anfang stehen links die Zahlen; die Jahreszahl kommt erst, wenn man wischt (Übergabe statt Überlagerung) */
.geist{transition:opacity .7s ease}
body.am-anfang .geist{opacity:0}
body:not(.am-anfang) .geist{animation:auftauchen 1.2s cubic-bezier(.16,.8,.24,1) both}
@keyframes auftauchen{from{opacity:0;letter-spacing:.2em}}
.info{animation:aufsteigen .9s cubic-bezier(.16,.8,.24,1) .7s both}
.auftakt{animation:aufsteigen .9s cubic-bezier(.16,.8,.24,1) .45s both}
@keyframes aufsteigen{from{opacity:0;translate:0 24px}}

/* Player */
.player{position:fixed;left:50%;bottom:16px;z-index:30;width:min(560px,calc(100vw - 32px));transform:translateX(-50%);
  border-radius:16px;background:#fff;box-shadow:0 20px 50px -15px rgba(12,59,100,.45);padding:8px 8px 4px}
.player[hidden]{display:none}
.player-innen{border-radius:12px;overflow:hidden;min-height:80px}
.player-innen iframe{display:block}
.player-innen [hidden]{display:none}
.yt{height:126px;aspect-ratio:16/9;margin:0 auto}
.yt iframe{width:100%;height:100%;border:0}
.bandcamp iframe{width:100%;height:42px;border:0}
.player[data-quelle="bandcamp"] .player-innen{min-height:42px}
.player.hinweis{animation:hinweis 1.6s ease-out 2}
@keyframes hinweis{0%{box-shadow:0 0 0 0 rgba(224,253,44,.95),0 20px 50px -15px rgba(12,59,100,.45)}100%{box-shadow:0 0 0 18px rgba(224,253,44,0),0 20px 50px -15px rgba(12,59,100,.45)}}
/* Bandcamp: Hinweis mit Pfeil direkt über dem Play-Knopf, wippt; der Play-Knopf selbst pulsiert in Lime. Verschwindet, sobald die Musik läuft. */
.player[data-quelle="bandcamp"]::before{content:"Hier auf ▶ drücken";position:absolute;left:28px;top:-40px;padding:7px 14px;border-radius:999px;background:var(--lime);color:var(--navy);font:700 13px/1 Quicksand,sans-serif;box-shadow:0 0 0 1.5px var(--navy),0 8px 18px -8px rgba(12,59,100,.6);animation:wippen 1.1s ease-in-out infinite}
.player[data-quelle="bandcamp"]::after{content:"";position:absolute;left:64px;top:-13px;width:12px;height:12px;background:var(--lime);transform:rotate(45deg);box-shadow:1.5px 1.5px 0 0 var(--navy);animation:wippen-pfeil 1.1s ease-in-out infinite}
@keyframes wippen{50%{transform:translateY(-5px)}}
@keyframes wippen-pfeil{50%{transform:translateY(-5px) rotate(45deg)}0%,100%{transform:rotate(45deg)}}
.player[data-quelle="bandcamp"] .player-innen{overflow:visible}
.bandcamp{position:relative}
.player[data-quelle="bandcamp"]:not(.gestartet) .bandcamp::after{content:"";position:absolute;left:42px;top:0;width:42px;height:42px;border-radius:50%;pointer-events:none;animation:puls 1.4s ease-out infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(224,253,44,1),0 0 0 2px var(--lime)}100%{box-shadow:0 0 0 18px rgba(224,253,44,0),0 0 0 2px var(--lime)}}
.player.gestartet::before,.player.gestartet::after{display:none}
.hoeren.aus,.hoeren.aus:hover,.hoeren.aus:focus-visible{background:#dfe3e7;color:rgba(12,59,100,.42);box-shadow:inset 0 0 0 1.5px rgba(12,59,100,.18);cursor:default}
.player[data-quelle="youtube"]{width:auto;padding:6px}
.player[data-quelle="youtube"] .player-innen{min-height:0}
.player-zu{position:absolute;top:-12px;right:-12px;width:32px;height:32px;border-radius:50%;border:0;background:var(--lime);color:var(--navy);box-shadow:0 0 0 2px var(--navy);font-size:18px;line-height:1;cursor:pointer}

body.mit-player{--cd:clamp(240px, 36vw, 540px)}
body.mit-player .galerie{padding-bottom:130px}
body.mit-player .pfeile{bottom:130px}

/* Seitenfeld: Name und Veröffentlichung der CD, die gerade läuft */
.seite{position:absolute;z-index:150;top:110px;left:clamp(16px,3vw,40px);width:min(340px,27vw);padding:22px 24px 24px;border-radius:18px;
  background:rgba(242,241,236,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 18px 40px -22px rgba(12,59,100,.45);animation:herein .5s ease-out both}
.seite[hidden]{display:none}
@keyframes herein{from{opacity:0;transform:translateX(-16px)}}
.seite-label{margin:0 0 10px;font:500 12px/1 Quicksand,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--leise)}
.seite-label::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 2px var(--navy);vertical-align:1px}
.seite-titel{margin:0 0 22px;font:700 clamp(30px,3vw,44px)/1.04 Quicksand,sans-serif;letter-spacing:-.02em;text-wrap:balance}
.seite-liste{margin:0 0 20px}
.seite-liste div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid rgba(12,59,100,.22)}
.seite-liste dt{font:500 11px/1.6 Quicksand,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--leise)}
.seite-liste dd{margin:0;font-size:15px;text-align:right}
.seite-songs{list-style:none;margin:0 0 18px;padding:0;max-height:min(34vh,300px);overflow-y:auto;counter-reset:song;scrollbar-width:thin}
.seite-songs[hidden]{display:none}
.seite-songs button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:10px;width:100%;padding:7px 6px;border-radius:8px;font-size:14px;line-height:1.3}
.seite-songs button::before{counter-increment:song;content:counter(song,decimal-leading-zero);font:500 11px/1.7 Quicksand,sans-serif;color:var(--leise);min-width:20px}
.seite-songs button span{flex:1}
.seite-songs button small{color:var(--leise);font-size:12px}
.seite-songs button:hover,.seite-songs button:focus-visible{background:rgba(12,59,100,.07)}
.seite-songs button[aria-current="true"]{background:var(--navy);color:#fff}
.seite-songs button[aria-current="true"]::before,.seite-songs button[aria-current="true"] small{color:var(--lime)}
.seite-songs em{font:700 11px/1.7 Quicksand,sans-serif;font-style:normal;color:var(--navy);background:var(--lime);border-radius:99px;padding:0 7px;align-self:center}
.seite-tipp{margin:-8px 0 16px;font-size:14px;color:var(--leise)}
.seite-tipp::before{content:"↓ "}
.seite-video{display:flex;align-items:center;gap:8px;margin:0 0 18px;border:0;border-radius:999px;padding:10px 18px;background:var(--pink);color:#fff;font:700 14px/1 Quicksand,sans-serif;cursor:pointer}
.seite-video[hidden]{display:none}
.seite-video:hover,.seite-video:focus-visible{background:var(--navy);outline:none}
.seite-link{font:700 14px/1 Quicksand,sans-serif;text-decoration:none;border-bottom:2px solid var(--lime);padding-bottom:3px}
.seite-link:hover,.seite-link:focus-visible{border-color:var(--navy);outline:none}
/* Solange das Seitenfeld offen ist, steht der Name dort und nicht noch einmal unter der CD. */
body.mit-seite .info .titel,body.mit-seite .info .details{visibility:hidden}

/* Diskografie */
/* Diskografie in Navy: die Cover leuchten auf dem dunklen Grund, Mint und Lime als Akzente */
.disko{padding:clamp(56px,8vw,120px) clamp(16px,3vw,40px);background:var(--navy);color:#fff;position:relative;--tinte:#fff;--leise:rgba(255,255,255,.62)}
.disko::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--mint),var(--lime) 50%,var(--pink))}
.disko-kopf{display:grid;grid-template-columns:1.2fr 1fr;gap:16px 48px;align-items:end;margin-bottom:clamp(32px,5vw,64px)}
.disko-kopf h2{margin:0;font:700 clamp(40px,6vw,92px)/.95 Quicksand,sans-serif;letter-spacing:-.035em}
.disko-kopf h2 em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--lime)}
.disko-kopf p{margin:0;max-width:40ch;color:var(--leise)}
.filter{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px}
.filter button{border:1px solid rgba(255,255,255,.3);color:#fff;background:transparent;border-radius:999px;padding:9px 18px;font:700 14px/1 Quicksand,sans-serif;cursor:pointer}
.filter button[hidden]{display:none}
.filter button[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--navy)}
.filter button:hover,.filter button:focus-visible{border-color:var(--mint);outline:none}
.disko-jahr{display:grid;grid-template-columns:clamp(90px,12vw,180px) 1fr;gap:24px;padding:28px 0;border-top:1px solid rgba(139,230,216,.22)}
.disko-jahr[hidden]{display:none}
.disko-jahr h3{margin:0;position:sticky;top:80px;align-self:start;display:grid;gap:6px}
.disko-jahr h3 span{font:700 clamp(36px,4vw,60px)/1 Quicksand,sans-serif;letter-spacing:-.03em;color:var(--mint)}
.disko-jahr h3 small{font:500 11px/1.3 Quicksand,sans-serif;letter-spacing:.06em;-webkit-hyphens:auto;hyphens:auto;text-transform:uppercase;color:var(--leise)}
.disko-jahr ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:28px 20px}
.disko-jahr li[hidden]{display:none}
.disko-jahr button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:4px;width:100%;border-radius:12px}
.disko-jahr button:focus-visible{outline:3px solid var(--lime);outline-offset:6px}
.mini{position:relative;display:block;aspect-ratio:1;margin-bottom:10px;width:90%}
/* Silberne Scheibe hinter der Hülle, kommt beim Darüberfahren heraus */
.mini::before{content:"";position:absolute;z-index:0;top:6%;left:6%;width:88%;height:88%;border-radius:50%;transition:left .45s cubic-bezier(.2,.8,.2,1);
  background:radial-gradient(circle,transparent 0 9%,#e9edf1 9.5% 15%,transparent 15.5%),conic-gradient(from 200deg,#cfd6dd,#f7f9fb,#b9c3cc,#eef2f5,#c5ced6,#cfd6dd);
  -webkit-mask:radial-gradient(circle,transparent 0 9%,#000 9.5%);mask:radial-gradient(circle,transparent 0 9%,#000 9.5%)}
.disko-jahr button{filter:drop-shadow(0 12px 16px rgba(0,0,0,.4))}
.mini img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;border-radius:3px}
.mini::after{content:"";position:absolute;z-index:2;inset:0;border-radius:3px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.35) 0 1%,rgba(0,0,0,.2) 1% 2.5%,transparent 2.5%),linear-gradient(118deg,rgba(255,255,255,.18),rgba(255,255,255,.04) 34%,transparent 34.5%)}
.disko-jahr button:hover .mini::before,.disko-jahr button:focus-visible .mini::before{left:22%}
.disko-titel{font:700 16px/1.2 Quicksand,sans-serif}
.disko-jahr li{position:relative}
.disko-jahr .disko-video{all:revert;box-sizing:border-box;position:absolute;z-index:3;top:8px;left:8px;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;
  background:var(--pink);color:#fff;cursor:pointer;box-shadow:0 3px 8px -3px rgba(0,0,0,.6),0 0 0 1.5px var(--navy)}
.disko-jahr .disko-video span{font-size:9px;line-height:1;margin-left:2px}
.disko-jahr .disko-video:hover,.disko-jahr .disko-video:focus-visible{background:var(--lime);color:var(--navy);outline:none}
.disko-jahr button:hover .disko-titel{color:var(--lime)}
.disko-mehr{font-size:13px;color:var(--leise)}

/* Video gross */
.kino{width:min(1100px,calc(100vw - 32px));padding:0;border:0;border-radius:20px;background:#071f36;color:#fff;overflow:hidden;box-shadow:0 40px 100px -20px rgba(0,0,0,.6)}
.kino::backdrop{background:rgba(7,31,54,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.kino-kopf{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px}
.kino-kopf h2{margin:0;font:700 20px/1.2 Quicksand,sans-serif}
.kino-kopf form{margin:0}
.kino-kopf button{width:36px;height:36px;border-radius:50%;border:0;background:var(--lime);color:var(--navy);font-size:20px;cursor:pointer}
.kino-bild{aspect-ratio:16/9;background:#000}
.kino-bild iframe{width:100%;height:100%;border:0;display:block}

/* Footer */
.fuss{position:relative;overflow:hidden;background:#071f36;color:#fff;padding:clamp(48px,7vw,96px) clamp(16px,3vw,40px) 0;min-height:88svh;display:flex;flex-direction:column}
.fuss-licht{position:absolute;inset:-20%;filter:blur(70px) saturate(1.2);opacity:.8;pointer-events:none}
.fuss-licht i{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:schweben 18s ease-in-out infinite alternate}
.fuss-licht i:nth-child(1){width:46vw;height:46vw;left:40%;top:5%;background:radial-gradient(circle,rgba(139,230,216,.75),transparent 65%)}
.fuss-licht i:nth-child(2){width:38vw;height:38vw;left:62%;top:30%;background:radial-gradient(circle,rgba(255,88,233,.55),transparent 65%);animation-duration:22s}
.fuss-licht i:nth-child(3){width:34vw;height:34vw;left:15%;top:45%;background:radial-gradient(circle,rgba(224,253,44,.45),transparent 65%);animation-duration:26s}
.fuss-licht i:nth-child(4){width:50vw;height:30vw;left:50%;top:60%;background:radial-gradient(circle,rgba(139,230,216,.45),transparent 65%);animation-duration:30s}
@keyframes schweben{to{transform:translate(-12%,8%) scale(1.15)}}
/* Wasser (wasser.js): die Leinwand füllt den Footer, zeichnet Rauch und Schriftzug selbst; Texte und Links liegen darüber */
.wasser{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;pointer-events:none}
.fuss-oben,.fuss-klein{z-index:2}
.fuss.mit-wasser .wortmarke{opacity:0}
.fuss.mit-wasser .fuss-licht{display:none}
.fuss-oben{position:relative;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px}
.fuss-satz{margin:0;font:700 clamp(36px,5.6vw,84px)/.98 Quicksand,sans-serif;letter-spacing:-.03em;text-transform:uppercase}
.fuss-spalte{list-style:none;margin:0;padding:0;display:grid;gap:14px;align-content:start;font-size:clamp(17px,1.6vw,22px)}
.fuss-spalte a{text-decoration:none}
.fuss-spalte a:hover,.fuss-spalte a:focus-visible{text-decoration:underline;text-underline-offset:5px;outline:none}
.fuss-klein{position:relative;display:flex;flex-wrap:wrap;gap:8px 28px;margin:32px 0 0;font:500 12px/1.4 Quicksand,sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.wortmarke{position:relative;display:block;width:100%;height:auto;margin-top:auto;padding-top:24px;overflow:visible}
.wm{font:700 230px/1 Quicksand,sans-serif;letter-spacing:-8px}
.wm-weiss{fill:#fff}
/* Stern nach StellaStar im Footer, wie oben im Kopf: weiss, funkelt; liegt über dem Wasser, Lage rechnet app.js */
.fuss-stern{position:absolute;z-index:3;left:0;top:0;line-height:1;color:#fff;pointer-events:none;opacity:0;transform-origin:50% 55%;animation:funkeln 4.5s ease-in-out 1.2s infinite}
.fuss-stern.da{opacity:1}

/* Hörraum: Sobald eine CD im Player liegt, geht das Licht aus. Der Raum wird dunkel in der Farbe des Covers,
   die CD hebt sich aus der Reihe und richtet sich auf, ein Lichtring läuft um sie, solange die Musik spielt.
   Schliesst man den Player, geht das Licht wieder an. */
.galerie::before{content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;opacity:0;transition:opacity 1.4s var(--zug);
  background:radial-gradient(70vw 55vw at 52% 44%,color-mix(in srgb,var(--farbe) 34%,#0a2c4b),#05182b 78%)}
body.im-klang .galerie::before{opacity:1}
body.im-klang .galerie{color:#fff;--leise:rgba(255,255,255,.62)}
.galerie .titel,.galerie .details,.zaehler,.weiter,.pfeile button,.geist{transition:color 1.2s var(--zug),border-color 1.2s,-webkit-text-stroke-color 1.2s}
body.im-klang .zaehler [data-zaehler]{color:#fff}
body.im-klang .balken{background:rgba(255,255,255,.18)}
body.im-klang .weiter{color:#fff}
body.im-klang .pfeile button{border-color:rgba(255,255,255,.3)}
body.im-klang .geist{-webkit-text-stroke-color:rgba(255,255,255,.22);opacity:.35}
body.im-klang .hoeren:not(.aus):hover,body.im-klang .hoeren:not(.aus):focus-visible{background:#fff;color:var(--navy)}
/* Das Licht hinter der CD atmet langsam, solange sie spielt */
body.laeuft .licht{animation:atmen 5s ease-in-out infinite}
@keyframes atmen{50%{opacity:.6}}
/* Die CD im Player: richtet sich auf, hebt sich, leuchtet von unten in ihrer Farbe */
.platz.aktiv .cd.drin{--kipp:30deg;--heben:-2%}
/* Aufgerichtet braucht die CD mehr Höhe: im Hörraum etwas kleiner, damit Ring, Titel und Player Platz haben */
body.im-klang{--cd:clamp(220px, min(32vw, 50vh), 500px)}
body.im-klang .band{padding-top:7vh;margin-top:-3vh}
body.im-klang .cd::before{background:radial-gradient(closest-side,rgba(0,8,16,.6),rgba(0,8,16,.3) 62%,transparent)}
body.im-klang .cd.drin::before{transform:translate(-3%,9%);background:radial-gradient(closest-side,color-mix(in srgb,var(--farbe) 70%,transparent),color-mix(in srgb,var(--farbe) 25%,transparent) 60%,transparent)}
/* Die anderen CDs treten zurück */
body.im-klang .platz:not(.aktiv) .cd{opacity:calc(var(--o,1) * .5)}
/* Lichtring um die laufende CD: eine helle Spur in Coverfarbe und Lime auf einer feinen Bahn */
.ring{position:absolute;inset:-6.5%;border-radius:50%;pointer-events:none;z-index:-1;opacity:0;transition:opacity 1s var(--zug);
  background:conic-gradient(from 0deg,transparent 0 50%,color-mix(in srgb,var(--farbe) 65%,#fff) 78%,var(--lime) 93%,#fff 96%,transparent 96.5%),rgba(255,255,255,.13);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px))}
.cd.drin .ring{opacity:1}
.cd.spielt .ring{animation:drehen 3.6s linear infinite}
/* Seitenfeld im dunklen Raum: dunkles Glas */
.seite{transition:background 1.2s var(--zug)}
body.im-klang .seite{background:rgba(5,24,43,.55);box-shadow:0 18px 40px -22px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08)}
body.im-klang .seite-liste div{border-top-color:rgba(255,255,255,.16)}
body.im-klang .seite-songs button:hover,body.im-klang .seite-songs button:focus-visible{background:rgba(255,255,255,.08)}
body.im-klang .seite-songs button[aria-current="true"]{background:var(--lime);color:var(--navy)}
body.im-klang .seite-songs button[aria-current="true"]::before,body.im-klang .seite-songs button[aria-current="true"] small{color:var(--navy)}
body.im-klang .seite-video:hover,body.im-klang .seite-video:focus-visible{background:#fff;color:var(--navy)}

@media (max-width:760px){
  .geist{font-size:34vw;letter-spacing:.06em;padding-left:.06em}
      :root{--cd:min(70vw,340px); --ueber:.2}
  .kopf-links{gap:14px;font-size:13px}
  .pfeile{display:none}
  .auftakt{display:none}
  .weiter{position:static;margin:18px auto 0;display:flex;justify-content:center}
  .seite{position:relative;top:auto;left:auto;width:auto;margin:0 16px;padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .seite-titel{font-size:30px;margin-bottom:12px}
  .seite-liste{margin-bottom:12px}
  .seite-liste div{padding:7px 0}
  body.mit-seite .info .titel,body.mit-seite .info .details,body.mit-seite .zaehler{display:none}
  .fuss-oben{grid-template-columns:1fr 1fr}
  .fuss-satz{grid-column:1 / -1}
  .galerie{padding-bottom:40px}
  .kopf-links a:not(.kopf-alle){display:none}
  .disko-kopf{grid-template-columns:1fr}
  .disko-jahr{grid-template-columns:1fr;gap:14px}
  .disko-jahr h3{position:static;grid-auto-flow:column;justify-content:start;align-items:baseline;gap:12px}
  .disko-jahr ul{grid-template-columns:repeat(2,1fr);gap:22px 16px}
  .geist{top:40%}
}
@media (prefers-reduced-motion:reduce){
  .cd,.fuss-licht i,.mini,body,.weiter span,.player::before,.player::after,.bandcamp::after,.platz,.geist,.info,.auftakt,.marke::after,.fuss-stern,.ring,.licht,.galerie::before{transition:none;animation:none}
  .cd.spielt .scheibe{animation:none}
}
@media (max-width:760px){body.im-klang .seite{background:none;box-shadow:none}}