/* Kopfzeile: Mobile Listening Session (Klappmenü), Plattenregal (großes Klappfeld), Liebeserklärungen */
.kopf nav{align-items:center; flex-wrap:nowrap; white-space:nowrap; gap:4px 20px}
.nav-gruppe{position:relative; display:flex; align-items:center}
.regal-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.nav-gruppe.regal-gruppe{position:static}
.kopf nav .nav-klapp{display:inline-flex; align-items:center; gap:7px; background:none; border:0; padding:0; margin:0; cursor:pointer;
  font:inherit; font-size:1rem; font-weight:700; color:var(--dunkel); white-space:nowrap}
.kopf nav .nav-klapp:hover,.kopf nav .nav-klapp[aria-expanded="true"],.kopf nav .nav-klapp.aktuell{color:var(--rot-text)}
.nav-pfeil{font-size:.66rem; transition:transform .2s ease}
.nav-klapp[aria-expanded="true"] .nav-pfeil{transform:rotate(180deg)}
.nav-platte{width:24px; height:24px; flex:none}
.nav-klapp[aria-expanded="true"] .nav-platte{animation:regal-dreh 1.8s linear infinite}
@keyframes regal-dreh{to{transform:rotate(360deg)}}
.nav-klappe{position:absolute; top:calc(100% + 22px); left:-18px; width:340px; z-index:60; white-space:normal;
  background:var(--creme-hoch); border:1px solid var(--gravur-stark); border-radius:14px;
  box-shadow:0 24px 50px -24px rgba(33,26,20,.5); padding:8px}
.nav-klappe[hidden]{display:none}
.kopf nav .nav-klappe a{display:block; padding:10px 12px; border-radius:9px; text-decoration:none; color:var(--dunkel); font-size:.95rem; border:0}
.kopf nav .nav-klappe a:hover,.kopf nav .nav-klappe a:focus-visible{background:var(--creme)}
.nav-klappe b{display:block; margin-bottom:2px}
.nav-klappe small{display:block; font-weight:400; color:var(--grau); font-size:.8rem; line-height:1.35}
.kopf nav .nav-klappe a[aria-current="page"] b{color:var(--rot-text)}
/* Herz mit Wort, sobald Platz ist */
@media (min-width:1101px){
  .nav-herz-text{position:static; width:auto; height:auto; overflow:visible; clip:auto}
}

/* Das Plattenregal-Feld */
.regal{position:absolute; left:0; right:0; top:100%; z-index:40; background:var(--creme-hoch);
  border-bottom:1px solid var(--gravur-stark); box-shadow:0 30px 60px -30px rgba(33,26,20,.45);
  padding:26px 0 30px; max-height:calc(100vh - 110px); overflow:auto; white-space:normal; text-align:left; font-weight:400}
.regal[hidden]{display:none}
.regal-raster{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:22px}
.regal-suche{grid-column:1/-1; position:relative; margin:0}
.regal-suche input{width:100%; padding:15px 20px 15px 52px; font:500 1.05rem var(--sans, Poppins, sans-serif); border:2px solid var(--dunkel);
  border-radius:14px; background:#fffdf8; color:var(--dunkel)}
.regal-suche input:focus{outline:3px solid rgba(227,69,84,.35); outline-offset:2px}
.regal-suche svg{position:absolute; left:18px; top:16px; width:22px; height:22px; pointer-events:none}
.regal-treffer{list-style:none; margin:8px 0 0; padding:6px; background:#fffdf8; border:1px solid var(--gravur-stark); border-radius:14px; max-height:340px; overflow:auto}
.regal-treffer[hidden]{display:none}
.kopf nav .regal-treffer a{display:flex; gap:12px; align-items:center; padding:7px 10px; border-radius:9px; text-decoration:none; color:var(--dunkel)}
.kopf nav .regal-treffer a:hover,.kopf nav .regal-treffer a:focus-visible{background:var(--creme)}
.regal-treffer img,.regal-treffer .ini{width:42px; height:42px; border-radius:6px; object-fit:cover; flex:none; background:var(--sand, #E8D4AB)}
.regal-treffer .ini{border-radius:50%; display:grid; place-items:center; font-weight:700; color:var(--rot-text)}
.regal-treffer strong{display:block; font-size:.95rem; line-height:1.2}
.regal-treffer small{font-weight:400; color:var(--grau); font-size:.8rem}
.regal-treffer .art{margin-left:auto; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--grau); white-space:nowrap}
.regal-treffer .art.p{color:#fff; background:var(--rot-flae); border-radius:99px; padding:2px 8px}
.regal-treffer .leer{padding:10px; color:var(--grau); font-size:.9rem}
.kopf nav .regal-kachel{position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:150px 20px 20px; border-radius:16px;
  text-decoration:none; color:var(--dunkel); background:var(--creme); border:1px solid var(--gravur); overflow:hidden; transition:transform .15s ease, box-shadow .15s ease}
.kopf nav .regal-kachel:hover{transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(33,26,20,.6)}
.regal-kachel h3{margin:0; font-size:1.3rem; line-height:1.15}
.regal-kachel p{font-weight:400; margin:.35em 0 0; font-size:.86rem; color:var(--grau); line-height:1.4}
.regal-kachel .mehr{margin-top:.7em; font-weight:700; font-size:.86rem; color:var(--rot-text)}
.regal-facher{position:absolute; top:18px; left:20px; right:20px; height:110px}
.regal-facher img{position:absolute; width:96px; height:96px; border-radius:8px; object-fit:cover; background:var(--sand, #E8D4AB);
  box-shadow:0 10px 20px -12px rgba(33,26,20,.8); transition:transform .3s ease}
.regal-facher img:nth-child(1){left:0; transform:rotate(-9deg)}
.regal-facher img:nth-child(2){left:18%; top:4px; transform:rotate(-3deg)}
.regal-facher img:nth-child(3){left:36%; transform:rotate(3deg)}
.regal-facher img:nth-child(4){left:54%; top:6px; transform:rotate(8deg)}
.regal-kachel:hover .regal-facher img:nth-child(1){transform:rotate(-14deg) translate(-6px,-4px)}
.regal-kachel:hover .regal-facher img:nth-child(4){transform:rotate(13deg) translate(6px,-2px)}
.regal-abc{position:absolute; top:18px; left:20px; right:20px; display:grid; grid-template-columns:repeat(9,1fr); gap:4px}
.regal-abc span{aspect-ratio:1; display:grid; place-items:center; border:1px solid var(--gravur-stark); border-radius:6px; font-weight:700; font-size:.8rem; background:var(--creme-hoch)}
.regal-abc span.p{background:var(--dunkel); color:var(--creme); border-color:var(--dunkel)}
.kopf nav .regal-kachel.jukebox{background:var(--dunkel); color:var(--creme); border-color:var(--dunkel)}
.regal-kachel.jukebox p{color:rgba(242,227,196,.75)}
.regal-kachel.jukebox .mehr{color:#F6A3AA}
.regal-mini-box{position:absolute; top:16px; left:20px; width:100px; height:122px; border-radius:50px 50px 10px 10px;
  background:linear-gradient(180deg,#E34554,#9E1223); box-shadow:inset 0 0 0 4px #F2E3C4, 0 10px 22px -10px #000}
.regal-mini-box::before{content:""; position:absolute; left:18px; right:18px; top:18px; height:50px; border-radius:30px 30px 6px 6px;
  background:repeating-radial-gradient(circle at 50% 100%, #111 0 2px, #222 2px 3px); box-shadow:inset 0 0 0 3px #F2E3C4}
.regal-mini-box::after{content:""; position:absolute; left:20px; right:20px; bottom:16px; height:26px; border-radius:4px;
  background:repeating-linear-gradient(90deg,#F2E3C4 0 8px,#E8D4AB 8px 10px)}
.regal-kachel.jukebox:hover .regal-mini-box{animation:regal-wackel .5s ease}
@keyframes regal-wackel{30%{transform:rotate(-3deg)}70%{transform:rotate(3deg)}}
.regal-neu{grid-column:1/-1; display:flex; align-items:center; gap:14px; flex-wrap:wrap; border-top:1px solid var(--gravur); padding-top:16px}
.regal-neu .schild{margin:0}
.kopf nav .regal-neu a{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--dunkel); font-size:.82rem; font-weight:700; line-height:1.2}
.regal-neu a img{width:38px; height:38px; border-radius:5px; object-fit:cover; background:var(--sand, #E8D4AB)}
.regal-neu a small{font-weight:400; display:block; font-weight:400; color:var(--grau)}

@media (max-width:1100px) and (min-width:940px){ .kopf nav{gap:4px 16px} .kopf nav .nav-klapp{font-size:.95rem} }
@media (max-width:939px){
  .kopf nav{white-space:normal; align-items:stretch}
  .kopf nav .nav-klapp{width:100%; padding:15px 2px; border-top:1px solid var(--gravur); font-size:1.05rem}
  .nav-gruppe{width:100%}
  .nav-klappe{position:static; width:auto; box-shadow:none; border:0; background:transparent; padding:0 0 8px 8px}
  .kopf nav .nav-klappe a{padding:9px 8px; border-top:0}
  .regal{position:static; box-shadow:none; border:0; background:transparent; padding:4px 0 18px; max-height:none; width:100%}
  .regal .huelle{padding:0}
  body:not(.menue-offen) .regal{display:none}
  .regal-raster{grid-template-columns:1fr 1fr; gap:12px}
  .kopf nav .regal-kachel{padding:118px 14px 14px; border-top:1px solid var(--gravur)}
  .kopf nav .regal-kachel.jukebox{grid-column:1/-1; padding:18px 14px 18px 140px; min-height:150px; justify-content:center}
  .regal-facher img{width:70px; height:70px}
  .regal-abc{grid-template-columns:repeat(5,1fr); left:14px; right:14px}
  .regal-abc span:nth-child(n+11){display:none}
  .regal-neu{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nav-klapp[aria-expanded="true"] .nav-platte,.regal-kachel.jukebox:hover .regal-mini-box{animation:none}
}

/* Plattenregal, Fassung 2: oben Künstler und Jukebox, darunter alle Alben als Cover-Wand */
.regal-raster{grid-template-columns:1fr 1fr; gap:16px}
.kopf nav .regal-kachel.quer{flex-direction:row; align-items:center; justify-content:flex-start; gap:18px; padding:14px 18px; min-height:0}
.regal-kachel.quer .regal-abc{position:static; flex:none; width:190px; grid-template-columns:repeat(6,1fr); gap:3px}
.regal-kachel.quer .regal-abc span{font-size:.7rem}
.regal-kachel.quer .regal-abc span:nth-child(n+13){display:none}
.regal-kachel.quer .regal-mini-box{position:relative; top:auto; left:auto; flex:none; width:64px; height:80px; border-radius:32px 32px 7px 7px}
.regal-kachel.quer .regal-mini-box::before{left:11px; right:11px; top:11px; height:32px}
.regal-kachel.quer .regal-mini-box::after{left:13px; right:13px; bottom:10px; height:16px}
.regal-kachel.quer h3{font-size:1.1rem}
.regal-kachel.quer p{margin-top:.2em}
.regal-kachel.quer .mehr{margin-top:.4em}
.regal-alle{grid-column:1/-1}
.regal-alle-kopf{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin:4px 0 10px}
.regal-alle-kopf h3{margin:0; font-size:1.1rem}
.kopf nav .regal-alle-kopf a{font-size:.86rem; font-weight:700; color:var(--rot-text); padding:0; border:0}
.regal-cover{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:14px 12px}
.regal-cover li[hidden]{display:none}
.kopf nav .regal-cover a{display:block; position:relative; padding:0; border:0; text-decoration:none; color:var(--dunkel); font-weight:700; font-size:.74rem; line-height:1.25}
.regal-cover img{display:block; width:100%; aspect-ratio:1; height:auto; object-fit:cover; border-radius:6px; background:var(--sand, #E8D4AB);
  box-shadow:0 8px 16px -10px rgba(33,26,20,.7); transition:transform .15s ease}
.regal-cover a:hover img,.regal-cover a:focus-visible img{transform:translateY(-3px) rotate(-1.5deg)}
.regal-cover span{display:block; margin-top:6px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.regal-cover small{display:block; font-weight:400; color:var(--grau); font-size:.7rem}
.regal-cover .neu{position:absolute; top:6px; left:6px; padding:1px 6px; border-radius:99px; background:var(--rot-flae); color:#fff; font-style:normal;
  font-size:.6rem; letter-spacing:.08em; text-transform:uppercase}
.regal-leer{margin:8px 0 0; color:var(--grau); font-size:.9rem}
.regal-treffer:empty{display:none}
@media (max-width:939px){
  .regal-raster{grid-template-columns:1fr}
  .kopf nav .regal-kachel.quer{padding:12px 14px; border-top:1px solid var(--gravur)}
  .kopf nav .regal-kachel.jukebox.quer{grid-column:auto; padding:12px 14px; min-height:0}
  .regal-kachel.quer .regal-abc{width:120px; grid-template-columns:repeat(4,1fr)}
  .regal-kachel.quer .regal-abc span:nth-child(n+9){display:none}
  .regal-cover{grid-template-columns:repeat(3,1fr); max-height:62vh; overflow:auto; padding-right:4px}
}
/* Im Bereich Alben, Künstler und Jukebox läuft die Platte im Menü ständig mit */
.nav-klapp.aktuell .nav-platte{animation:regal-dreh 3.2s linear infinite}
@media (prefers-reduced-motion:reduce){ .nav-klapp.aktuell .nav-platte{animation:none} }
@media (max-width:939px){
  .nav-gruppe{flex-wrap:wrap}
  .nav-gruppe > .regal,.nav-gruppe > .nav-klappe{flex:0 0 100%}
}
/* Bewegung beim Überfahren: Platte dreht sich, Herz schlägt */
.regal-knopf:hover .nav-platte,.regal-knopf:focus-visible .nav-platte{animation:regal-dreh 1.4s linear infinite}
.kopf nav a.nav-herz:hover svg,.kopf nav a.nav-herz:focus-visible svg{animation:regal-herz .9s ease-in-out infinite}
@keyframes regal-herz{0%,100%{transform:scale(1)} 15%{transform:scale(1.22) rotate(-6deg)} 30%{transform:scale(1.02)} 45%{transform:scale(1.16) rotate(-3deg)} 60%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){ .regal-knopf:hover .nav-platte,.kopf nav a.nav-herz:hover svg{animation:none} }