/* music.hiddenkey.eu – neue Oberfläche (Testfassung): dunkel, Farben kommen aus dem Cover des laufenden Albums. */
@font-face { font-family: "Inter"; src: url("fonts/Inter/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@property --c1 { syntax: "<color>"; inherits: true; initial-value: #479cf0; }
@property --c2 { syntax: "<color>"; inherits: true; initial-value: #a855f7; }

:root {
  /* Knöpfe und Hervorhebungen fest in Blau (Nutzerwunsch) – nur Hintergrund-Leuchten, Cover-Schein und Visualizer nehmen die Cover-Farben */
  --knopf: #2563eb; --knopf-ink: #ffffff; --akzent: #8cc4ff; --fort-1: #22d3ee; --fort-2: #2563eb; --z: 1;
  --c1: #479cf0; --c2: #a855f7; --c1-rgb: 71, 156, 240; --c2-rgb: 168, 85, 247; --c1-ink: #0b0d12; --c1-hell: #8cc4ff;
  --v2-bg: #07080c; --v2-flaeche: #12141c; --v2-flaeche-2: #1a1d27; --v2-linie: rgba(255,255,255,.1);
  --v2-text: #f4f5f8; --v2-leise: #a9aebb; --v2-rund: 18px;
  transition: --c1 1.4s ease, --c2 1.4s ease;
}
body.v2 {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  background: var(--v2-bg) !important;
  color: var(--v2-text);
  padding-top: 78px !important;
  padding-bottom: calc(var(--player-h, 80px) + 18px) !important;
  -webkit-font-smoothing: antialiased;
}
body.v2 button, body.v2 input, body.v2 select, body.v2 textarea { font-family: inherit; }
body.v2::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 55% at 12% -5%, color-mix(in srgb, var(--c1) 34%, transparent), transparent 70%),
    radial-gradient(55% 50% at 95% 5%, color-mix(in srgb, var(--c2) 26%, transparent), transparent 70%),
    linear-gradient(180deg, #0b0d14 0%, var(--v2-bg) 60%);
}
body.v2 .ambient-orb { display: none !important; }
body.v2 :focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
body.v2.v2-gesperrt { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
body.v2 svg { flex: none; }
body.v2 button, body.v2 .pill { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.14) !important; color: var(--v2-text) !important; box-shadow: none !important; filter: none !important; }
body.v2 button:hover, body.v2 .pill:hover { background: rgba(255,255,255,.14) !important; }
body.v2 button.active, body.v2 button[aria-pressed="true"], body.v2 .pill.play, body.v2 .pill.primary { background: var(--knopf) !important; color: var(--knopf-ink) !important; border-color: transparent !important; }
body.v2 .page { z-index: auto !important; }

/* ---------------------------------------------------------------- Kopfzeile */
body.v2 header.top {
  z-index: 30 !important; height: 64px; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); gap: 10px; z-index: 30;
  background: rgba(7, 8, 12, .72) !important; backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--v2-linie) !important; box-shadow: none !important;
}
body.v2 header.top .brand { width: 44px; height: 44px; flex: none; }
body.v2 header.top .search { flex: 1; min-width: 0; max-width: 620px; margin-right: auto; }
body.v2 #search {
  width: 100%; height: 44px; border-radius: 999px !important; padding: 0 16px 0 44px !important; font-size: 16px !important;
  background: rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9aebb' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") no-repeat 15px center / 19px !important;
  border: 1px solid var(--v2-linie) !important; color: var(--v2-text) !important; box-shadow: none !important;
}
body.v2 #search::placeholder { color: #8e94a3; }
body.v2 #search:focus { border-color: color-mix(in srgb, var(--knopf) 70%, white) !important; background-color: rgba(255,255,255,.11) !important; outline: none; }
body.v2 header.top .sort-toggle { background: rgba(255,255,255,.06) !important; border: 1px solid var(--v2-linie) !important; border-radius: 999px !important; padding: 3px !important; gap: 2px; box-shadow: none !important; }
body.v2 header.top .sort-toggle-btn { width: 36px !important; height: 36px !important; min-width: 0 !important; border-radius: 999px !important; background: transparent !important; color: var(--v2-leise) !important; border: 0 !important; box-shadow: none !important; }
/* Sortier-Knöpfe immer kreisrund und dicht nebeneinander (alte Regeln: Mindesthöhe 34–36 px, Leiste mindestens 78–92 px breit) */
body.v2 header.top .sort-toggle { display: inline-flex !important; align-items: center; min-width: 0 !important; flex: 0 0 auto; }
body.v2 header.top .sort-toggle-btn { min-height: 0 !important; padding: 0 !important; display: grid !important; place-items: center; flex: 0 0 auto; }
body.v2 header.top .sort-toggle-btn[aria-pressed="true"] { background: var(--knopf) !important; color: var(--knopf-ink) !important; }
body.v2 header.top .goto-playlists, body.v2 header.top .logout-form button {
  width: 42px !important; height: 42px !important; min-width: 0 !important; padding: 0 !important; border-radius: 999px !important;
  background: rgba(255,255,255,.07) !important; border: 1px solid var(--v2-linie) !important; color: var(--v2-text) !important; box-shadow: none !important; display: grid; place-items: center; font-size: 1.3rem;
}
body.v2 header.top .refresh-icon { width: 20px; height: 20px; filter: invert(1) brightness(1.4); opacity: .85; }
@media (max-width: 560px) {
  body.v2 header.top { gap: 7px; padding: 0 10px; }
  body.v2 header.top .brand { width: 40px; height: 40px; }
  /* Aktualisieren bleibt auch am Handy sichtbar */
  body.v2 header.top .goto-playlists, body.v2 header.top .logout-form button { width: 38px !important; height: 38px !important; flex: 0 0 auto; }
  body.v2 header.top .sort-toggle-btn { width: 34px !important; height: 34px !important; }
  body.v2 header.top .search { min-width: 0; }
}
@media (max-width: 380px) {
  body.v2 header.top { gap: 5px; padding: 0 8px; }
  body.v2 header.top .brand { width: 36px; height: 36px; }
  body.v2 header.top .sort-toggle-btn { width: 32px !important; height: 32px !important; }
  body.v2 header.top .goto-playlists, body.v2 header.top .logout-form button { width: 36px !important; height: 36px !important; }
  /* schmale Handys: Lupe näher an den Rand, damit „Suchen“ ganz zu lesen ist */
  body.v2 #search { padding: 0 8px 0 34px !important; background-position: 11px center !important; }
}

/* ---------------------------------------------------------------- Seite, Bereiche */
body.v2 .page { max-width: 1320px; padding: 0 max(20px, env(safe-area-inset-right)) 40px max(20px, env(safe-area-inset-left)); }
@media (max-width: 560px) { body.v2 .page { padding-left: 14px; padding-right: 14px; } }
.v2-start { display: flex; flex-direction: column; gap: 28px; margin: 8px 0 18px; }
.v2-start.bei-suche .v2-weiter, .v2-start.bei-suche .v2-neu { display: none; }
.v2-bereich-kopf { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 12px; }
.v2-bereich-kopf h2 { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; color: var(--v2-text); }
.v2-bereich-kopf span { color: var(--v2-leise); font-size: .88rem; }
.v2-alle-kopf { margin-bottom: -6px; }
.v2-kicker { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--akzent); }
.v2-rund { display: grid; place-items: center; border-radius: 50%; border: 0; cursor: pointer; transition: transform .15s; }
body.v2 .v2-rund, body.v2 .v2-rund:hover { background: var(--knopf) !important; color: var(--knopf-ink) !important; border: 0 !important; box-shadow: 0 10px 24px rgba(0,0,0,.4) !important; }
.v2-rund svg { width: 46%; height: 46%; fill: currentColor; }
.v2-rund:active { transform: scale(.94); }

/* Weiterhören */
.v2-weiter {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 58px; align-items: center; gap: 16px; padding: 14px; border-radius: 24px;
  background: linear-gradient(115deg, color-mix(in srgb, var(--c1) 30%, var(--v2-flaeche)) 0%, var(--v2-flaeche) 65%);
  border: 1px solid rgba(255,255,255,.08); box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
.v2-weiter[hidden] { display: none; }
body.v2 .v2-weiter-cover, body.v2 .v2-neu-cover, body.v2 .v2-weiter-cover:hover, body.v2 .v2-neu-cover:hover { background: #1a1d27 !important; border: 0 !important; box-shadow: 0 10px 24px rgba(0,0,0,.45) !important; }
body.v2 .v2-weiter-album, body.v2 .v2-weiter-album:hover { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--v2-leise) !important; }
body.v2 .v2-weiter-album:hover { color: var(--v2-text) !important; }
.v2-weiter-cover { width: 96px; height: 96px; padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: pointer; background: #222; box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.v2-weiter-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-weiter-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v2-weiter-text strong { font-size: 1.12rem; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-weiter-album { align-self: flex-start; max-width: 100%; padding: 0; border: 0; background: none; color: var(--v2-leise); font-size: .9rem; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.v2-weiter-album:hover { color: var(--v2-text); text-decoration: underline; }
.v2-weiter-balken { height: 4px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; margin-top: 8px; }
.v2-weiter-balken i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--fort-1), var(--fort-2)); border-radius: inherit; transition: width .9s linear; }
.v2-weiter-zeit { color: var(--v2-leise); font-size: .78rem; font-variant-numeric: tabular-nums; }
.v2-weiter-play { width: 58px; height: 58px; }
.v2-weiter.laeuft .v2-kicker::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--akzent); vertical-align: 1px; animation: v2-puls 1.2s ease-in-out infinite; }
@keyframes v2-puls { 50% { opacity: .25; } }
@media (max-width: 560px) {
  .v2-weiter { grid-template-columns: 72px minmax(0, 1fr) 50px; gap: 12px; padding: 12px; border-radius: 20px; }
  .v2-weiter-cover { width: 72px; height: 72px; border-radius: 12px; }
  .v2-weiter-play { width: 50px; height: 50px; }
  .v2-weiter-text strong { font-size: 1rem; }
}

/* Neu-Reihe */
.v2-neu[hidden] { display: none; }
.v2-neu-reihe { display: grid; grid-auto-flow: column; grid-auto-columns: 156px; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; margin: 0 -2px; scrollbar-width: none; }
.v2-neu-reihe::-webkit-scrollbar { display: none; }
.v2-neu-karte { position: relative; display: flex; flex-direction: column; gap: 3px; scroll-snap-align: start; min-width: 0; }
.v2-neu-cover { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: pointer; background: #1a1d27; box-shadow: 0 14px 28px rgba(0,0,0,.45); margin-bottom: 7px; }
.v2-neu-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
body.v2 .v2-neu-marke { color: var(--knopf-ink) !important; background: var(--knopf) !important; }
.v2-neu-marke { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 999px; background: var(--knopf); color: var(--knopf-ink); font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.v2-neu-play { position: absolute; width: 40px; height: 40px; right: 8px; top: calc(156px - 48px); }
.v2-neu-karte strong { font-size: .92rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-neu-karte span { font-size: .8rem; color: var(--v2-leise); }
@media (hover: hover) { .v2-neu-cover:hover img { transform: scale(1.05); } }
@media (max-width: 560px) { .v2-neu-reihe { grid-auto-columns: 132px; gap: 12px; } .v2-neu-play { top: calc(132px - 46px); width: 38px; height: 38px; } }

/* ---------------------------------------------------------------- Album-Raster */
body.v2 .albums-section { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
body.v2 #albumsArea.album-grid, body.v2 #albumsArea {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important; gap: 26px 18px !important;
  padding: 18px 0 0 !important; margin: 0 !important; max-height: none !important; overflow: visible !important;
}
@media (min-width: 1400px) { body.v2 #albumsArea { grid-template-columns: repeat(auto-fill, minmax(182px, 1fr)) !important; } }
/* Handy: immer zwei Spalten (gleiche Gewichtung wie die Regel darüber, sonst greift sie bei .album-grid nicht) */
@media (max-width: 560px) { body.v2 #albumsArea, body.v2 #albumsArea.album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 12px !important; } }
body.v2 .album-card {
  position: relative; display: flex !important; flex-direction: column; gap: 10px; padding: 0 !important; margin: 0 !important; min-height: 0 !important; height: auto !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; cursor: pointer; overflow: visible !important;
}
body.v2 .album-card::before, body.v2 .album-card::after { display: none !important; }
body.v2 .album-card .album-media {
  position: relative; width: 100% !important; aspect-ratio: 1; height: auto !important; margin: 0 !important; padding: 0 !important; border-radius: 16px; overflow: hidden;
  background: #1a1d27 !important; box-shadow: 0 14px 30px rgba(0,0,0,.45) !important; border: 0 !important; transition: box-shadow .3s, transform .3s;
}
body.v2 .album-card .album-media img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
body.v2 .album-card .album-cover-play {
  position: absolute !important; right: 10px; bottom: 10px; width: 50px !important; height: 50px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
  display: grid !important; place-items: center; border-radius: 50% !important; border: 0 !important; cursor: pointer;
  background: var(--knopf) !important; color: var(--knopf-ink) !important; box-shadow: 0 10px 24px rgba(0,0,0,.5) !important;
  opacity: 0; transform: translateY(8px) scale(.92); transition: opacity .2s, transform .2s; z-index: 3 !important;
}
body.v2 .album-card .album-media img { position: relative; z-index: 0 !important; }
body.v2 .album-card .album-now-badge { z-index: 2; }
body.v2 .v2-neu-play { z-index: 2; }
body.v2 .album-card .album-cover-play svg { width: 22px; height: 22px; fill: currentColor; margin-left: 2px; }
body.v2 .album-card:focus-within .album-cover-play { opacity: 1; transform: none; }
@media (hover: hover) {
  body.v2 .album-card:hover .album-media img { transform: scale(1.05); }
  body.v2 .album-card:hover .album-cover-play { opacity: 1; transform: none; }
  body.v2 .album-card:hover .album-media { box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12) !important; }
}
@media (hover: none) {
  body.v2 .album-card .album-cover-play { opacity: 1; transform: none; width: 42px !important; height: 42px !important; right: 8px; bottom: 8px; }
  body.v2 .album-card .album-cover-play svg { width: 19px; height: 19px; }
}
body.v2 .album-info { display: flex; align-items: flex-start; gap: 4px; min-width: 0; padding: 0 2px; }
body.v2 .album-info-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
body.v2 .album-name { font-size: .95rem; font-weight: 650; line-height: 1.25; color: var(--v2-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
body.v2 .album-meta { font-size: .8rem; color: var(--v2-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.v2 .album-more-btn { width: 34px; height: 34px; flex: none; margin: -4px -4px 0 0; display: grid; place-items: center; border-radius: 50%; border: 0; background: transparent; color: var(--v2-leise); cursor: pointer; }
body.v2 .album-more-btn svg { width: 20px; height: 20px; fill: currentColor; }
body.v2 .album-more-btn { background: transparent !important; border: 0 !important; color: var(--v2-leise) !important; }
body.v2 .album-more-btn:hover, body.v2 .album-more-btn[aria-expanded="true"] { background: rgba(255,255,255,.1) !important; color: var(--v2-text) !important; }
/* läuft gerade */
body.v2 .album-card.v2-laeuft .album-media { box-shadow: 0 0 0 2px var(--knopf), 0 14px 34px color-mix(in srgb, var(--knopf) 40%, transparent) !important; }
body.v2 .album-card.v2-laeuft .album-name { color: var(--akzent); }
.album-now-badge { display: none; position: absolute; top: 9px; left: 9px; height: 26px; padding: 0 8px; gap: 3px; align-items: flex-end; justify-content: center; border-radius: 999px; background: rgba(7,8,12,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding-bottom: 7px; }
.album-now-badge i { display: block; width: 3px; height: 12px; border-radius: 2px; background: var(--akzent); transform-origin: bottom; transform: scaleY(.35); }
body.v2 .album-card.v2-laeuft .album-now-badge { display: inline-flex; }
body.v2.v2-spielt .album-now-badge i, body.v2.v2-spielt .v2-aktuell .track-number::after { animation: v2-eq .9s ease-in-out infinite; }
.album-now-badge i:nth-child(2) { animation-delay: -.3s !important; }
.album-now-badge i:nth-child(3) { animation-delay: -.6s !important; }
@keyframes v2-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
body.v2 .album-grid .empty { grid-column: 1 / -1; color: var(--v2-leise); text-align: center; padding: 40px 0; }

/* ---------------------------------------------------------------- ⋯-Menü und Schlaf-Menü */
.v2-menue { position: fixed; z-index: 95; min-width: 220px; padding: 6px; border-radius: 16px; background: rgba(22, 24, 33, .97); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 24px 60px rgba(0,0,0,.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.v2-menue[hidden] { display: none; }
.v2-menue button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--v2-text); font-size: .95rem; font-weight: 550; cursor: pointer; text-align: left; }
.v2-menue button svg { width: 20px; height: 20px; color: var(--akzent); }
.v2-menue button svg path[d^="M8 5.3"] { fill: currentColor; }
body.v2 .v2-menue button { background: none !important; border: 0 !important; color: var(--v2-text) !important; }
body.v2 .v2-menue button:hover, body.v2 .v2-menue button:focus-visible { background: rgba(255,255,255,.08) !important; outline: none; }
.v2-menue-titel { padding: 10px 14px 6px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-leise); }
.v2-schlaf-aus span { color: #ffb4a8; }

/* ---------------------------------------------------------------- Album als eigene Seite */
body.v2 #albumDetailSection { display: none !important; }
body.v2 #albumDetailSection::before, body.v2 #albumDetailSection::after { display: none !important; }
body.v2 #albumDetailSection:focus { outline: none; }
body.v2.v2-album-offen #albumDetailSection {
  display: block !important; position: fixed !important; inset: 0 !important; z-index: 45 !important; margin: 0 !important; max-width: none !important; width: auto !important; border-radius: 0 !important; border: 0 !important;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 0 0 calc(var(--player-h, 80px) + 16px) !important; box-shadow: none !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 46%, #07080c) 0, color-mix(in srgb, var(--c1) 12%, #0a0b10) 420px, #07080c 760px) !important;
  animation: v2-rein .28s cubic-bezier(.2,.9,.3,1);
}
@keyframes v2-rein { from { transform: translateY(24px); } }
body.v2 #albumDetailSection > * { max-width: 1000px; margin-left: auto !important; margin-right: auto !important; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.v2-held { position: relative; padding-top: max(18px, env(safe-area-inset-top)) !important; }
/* kleines × statt „Zurück“-Pille – nimmt keinen eigenen Platz weg */
body.v2 .v2-album-zu, body.v2 .v2-album-zu:hover { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); z-index: 2; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 0 !important; background: rgba(0,0,0,.32) !important; color: #fff !important; cursor: pointer; }
.v2-album-zu svg { width: 20px; height: 20px; }
.v2-held-inhalt { display: flex; align-items: center; gap: 22px; margin: 6px 0 18px; padding-right: 44px; }
.v2-held-cover { width: 200px; height: 200px; flex: none; border-radius: 18px; object-fit: cover; box-shadow: 0 24px 60px rgba(0,0,0,.55); background: #1a1d27; }
.v2-held-text { min-width: 0; }
.v2-held-text h2 { margin: 4px 0 6px; font-size: clamp(1.45rem, 4.6vw, 2.8rem); line-height: 1.08; font-weight: 850; letter-spacing: -.02em; overflow-wrap: anywhere; color: #fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.v2-held-text p { margin: 0; color: rgba(255,255,255,.78); font-size: .95rem; }
@media (max-width: 640px) {
  .v2-held-inhalt { gap: 14px; margin: 2px 0 14px; }
  .v2-held-cover { width: 108px; height: 108px; border-radius: 14px; }
  .v2-held-text .v2-kicker { font-size: .7rem; }
  .v2-held-text p { font-size: .84rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
body.v2 #albumDetailSection .detail-header { display: block !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-bottom: 18px !important; background: none !important; border: 0 !important; }
body.v2 #albumDetailSection .detail-header > div:first-child { display: none !important; }
body.v2 #albumDetailSection .detail-actions { display: flex !important; flex-wrap: nowrap; gap: 10px; justify-content: flex-start; align-items: center; }
body.v2 #albumDetailSection .detail-actions .pill {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; height: 46px; min-width: 0 !important; width: auto !important; flex: none !important; padding: 0 20px !important;
  border-radius: 999px !important; border: 1px solid rgba(255,255,255,.18) !important; background: rgba(255,255,255,.08) !important; color: #fff !important; font-size: .95rem !important; font-weight: 650 !important; box-shadow: none !important; letter-spacing: 0 !important; text-transform: none !important;
}
body.v2 #albumDetailSection .detail-actions .pill svg { width: 19px; height: 19px; }
body.v2 #albumDetailSection .detail-actions #playAlbumBtn { background: var(--knopf) !important; color: var(--knopf-ink) !important; border-color: transparent !important; padding: 0 26px !important; }
body.v2 #albumDetailSection .detail-actions #playAlbumBtn svg { fill: currentColor; }
body.v2 #albumDetailSection .detail-actions #downloadAlbumBtn { width: 46px !important; padding: 0 !important; }
@media (max-width: 640px) {
  /* einzeilig: Abspielen mit Text, der Rest als runde Symbole */
  body.v2 #albumDetailSection .detail-actions #playAlbumBtn { flex: 1 1 auto !important; }
  body.v2 #albumDetailSection .detail-actions .v2-zufall, body.v2 #albumDetailSection .detail-actions #queueAlbumBtn { width: 46px !important; padding: 0 !important; }
  body.v2 #albumDetailSection .detail-actions .v2-zufall span, body.v2 #albumDetailSection .detail-actions #queueAlbumBtn span { display: none; }
}
body.v2 #albumDetailSection .v2-zufall[hidden] { display: none !important; }
/* Titelliste */
body.v2 #trackContainer { padding-bottom: 10px; }
body.v2 #trackContainer .track-card-list { display: flex !important; flex-direction: column; gap: 2px !important; }
body.v2 #trackContainer .track-card {
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; box-shadow: none !important; transform: none !important; min-height: 0 !important; cursor: pointer;
}
body.v2 #trackContainer .track-card::before, body.v2 #trackContainer .track-card::after { display: none !important; }
body.v2 #trackContainer .track-card-top { display: grid !important; grid-template-columns: 34px minmax(0, 1fr) auto 40px; align-items: center; gap: 10px; padding: 9px 6px 9px 10px !important; min-height: 56px; background: none !important; border: 0 !important; box-shadow: none !important; }
body.v2 #trackContainer .track-number { position: relative; width: auto !important; height: auto !important; background: none !important; border: 0 !important; box-shadow: none !important; color: var(--v2-leise) !important; font-size: .9rem !important; font-variant-numeric: tabular-nums; text-align: center; }
body.v2 #trackContainer .track-title { color: var(--v2-text) !important; font-size: 1rem !important; font-weight: 550 !important; line-height: 1.3; white-space: normal !important; overflow-wrap: anywhere; }
/* Kapitelname oben, Hörbuchname klein darunter – nie nebeneinander, sonst wird der Titel buchstabenweise umgebrochen */
body.v2 #trackContainer .track-info { display: block !important; overflow: hidden; }
body.v2 #trackContainer .track-title { display: flex !important; flex-direction: column; align-items: stretch; gap: 2px; overflow-wrap: break-word; word-break: normal; hyphens: auto; }
body.v2 #trackContainer .track-title-main { display: block; min-width: 0; }
/* Punkte immer in der letzten Spalte – auch wenn die Dauer auf dem Handy ausgeblendet ist */
body.v2 #trackContainer .track-card.album-detail .track-card-menu-trigger { grid-column: 4; grid-row: 1; justify-self: end; }
body.v2 #trackContainer .track-title-suffix { display: block; margin: 0 !important; min-width: 0; font-size: .82rem !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.3; color: var(--v2-leise) !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
body.v2 #trackContainer .track-duration { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; color: var(--v2-leise) !important; font-size: .85rem !important; font-weight: 500 !important; font-variant-numeric: tabular-nums; }
body.v2 #trackContainer .track-card-menu-trigger { width: 38px !important; height: 38px !important; min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: 0 !important; background: transparent !important; color: var(--v2-leise) !important; box-shadow: none !important; display: grid; place-items: center; }
body.v2 #trackContainer .track-card-menu-trigger .dots { font-size: 13px; letter-spacing: 1px; color: inherit !important; }
body.v2 #trackContainer .track-card-menu-trigger:hover { background: rgba(255,255,255,.1) !important; color: #fff !important; }
@media (hover: hover) { body.v2 #trackContainer .track-card:hover { background: rgba(255,255,255,.06) !important; } }
body.v2 #trackContainer .track-card.v2-aktuell { background: color-mix(in srgb, var(--knopf) 16%, transparent) !important; }
body.v2 #trackContainer .track-card.v2-aktuell .track-title { color: var(--akzent) !important; font-weight: 700 !important; }
body.v2 #trackContainer .track-card.v2-aktuell .track-number { color: transparent !important; }
body.v2 #trackContainer .track-card.v2-aktuell .track-number::after { content: ""; position: absolute; inset: 0; margin: auto; width: 4px; height: 16px; border-radius: 2px; background: var(--akzent); box-shadow: -7px 0 0 var(--akzent), 7px 0 0 var(--akzent); transform-origin: center; transform: scaleY(.5); }

/* ---------------------------------------------------------------- Player-Leiste */
body.v2 .player {
  position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 50 !important; width: auto !important; max-width: none !important; margin: 0 !important; height: auto !important; min-height: 0 !important;
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr); align-items: center; gap: 18px;
  padding: 10px max(18px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)) !important;
  border-radius: 0 !important; border: 0 !important; border-top: 1px solid var(--v2-linie) !important;
  background: rgba(10, 11, 16, .86) !important; backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); box-shadow: 0 -10px 30px rgba(0,0,0,.35) !important;
}
body.v2 .player::before, body.v2 .player::after { display: none !important; }
body.v2 .player .player-utility-stack { display: none !important; }
body.v2 .player .np { grid-column: 1; display: flex !important; align-items: center; gap: 12px; min-width: 0; cursor: pointer; }
body.v2 .player .np .cover { width: 54px !important; height: 54px !important; flex: none; border-radius: 10px !important; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,.45) !important; border: 0 !important; background: #1a1d27 !important; }
body.v2 .player .np .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.v2 .player .np-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.v2 .player .np .title, body.v2 .player .np .sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; }
body.v2 .player .np .title { font-size: .98rem !important; font-weight: 700 !important; color: var(--v2-text) !important; }
body.v2 .player .np .sub { font-size: .84rem !important; color: var(--v2-leise) !important; }
/* doppelte Lauftexte: nur ein Titel, sauber gekürzt */
body.v2 .np-title-marquee, body.v2 .np-sub-marquee { display: block !important; animation: none !important; transform: none !important; width: auto !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.v2 .np-title-marquee span, body.v2 .np-sub-marquee span { display: inline !important; padding: 0 !important; animation: none !important; }
body.v2 .np-title-marquee span[aria-hidden="true"], body.v2 .np-sub-marquee span[aria-hidden="true"] { display: none !important; }
body.v2 .player .player-center { grid-column: 2; display: flex !important; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; width: 100%; margin: 0 !important; opacity: 1 !important; visibility: visible !important; height: auto !important; max-height: none !important; overflow: visible !important; transform: none !important; pointer-events: auto !important; }
body.v2 .player .controls { display: flex !important; justify-content: center; align-items: center; gap: 12px; }
body.v2 .player .ctrl, body.v2 .cover-meta-player .ctrl {
  width: 40px !important; height: 40px !important; min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: 0 !important;
  background: transparent !important; color: var(--v2-text) !important; box-shadow: none !important; display: grid !important; place-items: center;
}
body.v2 .player .ctrl:hover, body.v2 .cover-meta-player .ctrl:hover { background: rgba(255,255,255,.08) !important; }
body.v2 .player .ctrl.active, body.v2 .cover-meta-player .ctrl.active { color: var(--akzent) !important; }
body.v2 .player .ctrl.primary { width: 46px !important; height: 46px !important; background: #fff !important; color: #0b0d12 !important; }
body.v2 .player .ctrl svg, body.v2 .cover-meta-player .ctrl svg { width: 20px; height: 20px; }
body.v2 .player .progress, body.v2 .cover-meta-player .progress { display: flex !important; align-items: center; gap: 10px; }
body.v2 .player .progress span, body.v2 .cover-meta-player .progress span { font-size: .75rem !important; color: var(--v2-leise) !important; font-variant-numeric: tabular-nums; min-width: 36px; text-align: center; }
body.v2 .player .range-wrap, body.v2 .cover-meta-player .range-wrap { flex: 1; position: relative; }
body.v2 .range-glow { display: none !important; }
body.v2 .player input.range, body.v2 .cover-meta-player input.range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; margin: 0; cursor: pointer; box-shadow: none !important; border: 0 !important; }
body.v2 .player input.range::-webkit-slider-thumb, body.v2 .cover-meta-player input.range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--knopf) 35%, transparent); }
body.v2 .player input.range::-moz-range-thumb, body.v2 .cover-meta-player input.range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; }
/* Drawer-Player am Handy/Tablet (≤900 px, wie bisher): schmale Leiste – Tipp oder nach oben wischen klappt aus */
.v2-griff, .v2-mini-play, .v2-mini-fort, .v2-schublade-extras { display: none; }
@media (max-width: 900px) {
  body.v2 .player {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "np mini" "center center" "extras extras"; gap: 0 10px;
    padding-top: 16px !important; cursor: pointer; transition: box-shadow .3s, border-radius .3s;
    /* unten nur wenig Abstand – vom Sicherheitsabstand des Browsers (Home-Balken) bleibt nur ein kleiner Rest */
    padding-bottom: max(8px, calc(env(safe-area-inset-bottom, 0px) - 18px)) !important;
    /* gegen Nachziehen beim Scrollen (Safari/Chrome mobil): fester Hintergrund statt Unschärfe, eigene Ebene */
    background: #0c0d13 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: translateZ(0); will-change: transform;
  }
  body.v2 header.top { background: rgba(7, 8, 12, .97) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: translateZ(0); }
  body.v2 .player .np { grid-area: np; }
  body.v2 .player .np .cover { width: 48px !important; height: 48px !important; }
  .v2-griff { display: block; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 999px; background: rgba(255,255,255,.3); pointer-events: none; }
  .v2-mini-fort { display: block; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255,255,255,.1); overflow: hidden; pointer-events: none; }
  .v2-mini-fort i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--fort-1), var(--fort-2)); transition: width .3s linear; }
  body.v2 .v2-mini-play { display: grid; grid-area: mini; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 0 !important; background: #fff !important; color: #0b0d12 !important; cursor: pointer; }
  body.v2 .v2-mini-play svg { width: 22px; height: 22px; fill: currentColor; }
  body.v2 .player .player-center {
    grid-area: center; margin: 0 !important; max-height: 0 !important; opacity: 0 !important; overflow: hidden !important; pointer-events: none !important;
    transition: max-height .34s cubic-bezier(.2,.9,.3,1), opacity .22s, margin .3s;
  }
  body.v2 .player .controls { justify-content: space-between; gap: 4px; padding: 0 2px; }
  body.v2 .player .ctrl { width: 46px !important; height: 46px !important; }
  body.v2 .player .ctrl svg { width: 22px; height: 22px; }
  body.v2 .player .ctrl.primary { width: 60px !important; height: 60px !important; }
  body.v2 .player .ctrl.primary svg { width: 26px; height: 26px; }
  .v2-schublade-extras { display: flex; grid-area: extras; flex-wrap: nowrap; gap: 8px; justify-content: center; max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: max-height .34s cubic-bezier(.2,.9,.3,1), opacity .22s, margin .3s; }
  body.v2 .v2-schublade-extras button { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--v2-linie) !important; background: rgba(255,255,255,.07) !important; color: var(--v2-text) !important; font-size: .88rem; font-weight: 650; cursor: pointer; }
  body.v2 .v2-schublade-extras button svg { width: 18px; height: 18px; }
  body.v2 .v2-schublade-extras button span { font-size: .85rem; }
  /* ausgeklappt */
  body.v2 .player.player-expanded { border-radius: 22px 22px 0 0 !important; box-shadow: 0 -24px 60px rgba(0,0,0,.6) !important; cursor: default; }
  body.v2 .player.player-expanded .np .cover { width: 58px !important; height: 58px !important; }
  body.v2 .player.player-expanded .np .title { font-size: 1.05rem !important; }
  body.v2 .player.player-expanded .player-center { max-height: 220px !important; opacity: 1 !important; overflow: visible !important; pointer-events: auto !important; margin-top: 16px !important; }
  body.v2 .player.player-expanded .v2-schublade-extras { max-height: 120px; opacity: 1; pointer-events: auto; margin-top: 16px; }
  body.v2 .player.player-expanded .v2-mini-play, body.v2 .player.player-expanded .v2-mini-fort { display: none; }
  .v2-drawer-titel { grid-area: titel; display: block; max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: max-height .34s cubic-bezier(.2,.9,.3,1), opacity .22s, margin .3s; }
  body.v2 .player { grid-template-areas: "np mini" "center center" "titel titel" "extras extras"; }
  body.v2 .player.player-expanded .v2-drawer-titel { max-height: min(34vh, 300px); opacity: 1; overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; margin-top: 14px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--v2-linie); }
  .v2-drawer-kopf { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 14px 8px; background: #11131a; }
  .v2-drawer-kopf strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .v2-drawer-kopf span { color: var(--v2-leise); font-size: .8rem; flex: none; }
  body.v2 .v2-drawer-zeile { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 14px; border: 0 !important; border-radius: 0; background: transparent !important; color: var(--v2-text) !important; text-align: left; cursor: pointer; }
  body.v2 .v2-drawer-zeile:hover { background: rgba(255,255,255,.06) !important; }
  .v2-dz-nr { color: var(--v2-leise); font-size: .8rem; text-align: center; font-variant-numeric: tabular-nums; }
  .v2-dz-titel { font-size: .92rem; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .v2-dz-zeit { color: var(--v2-leise); font-size: .78rem; font-variant-numeric: tabular-nums; }
  body.v2 .v2-drawer-zeile.aktuell { background: color-mix(in srgb, var(--knopf) 18%, transparent) !important; }
  body.v2 .v2-drawer-zeile.aktuell .v2-dz-titel { color: var(--akzent); font-weight: 700; }
  body.v2 .v2-drawer-zeile.aktuell .v2-dz-nr { color: var(--akzent); }
}
@media (max-width: 900px) and (max-height: 760px) {
  /* niedrige Bildschirme: Drawer kompakter, damit oben noch Alben zu sehen sind */
  body.v2 .player.player-expanded .v2-drawer-titel { max-height: 20vh; margin-top: 10px; }
  body.v2 .player.player-expanded .player-center { margin-top: 10px !important; }
  body.v2 .player.player-expanded .v2-schublade-extras { margin-top: 10px; }
  body.v2 .player.player-expanded .np .cover { width: 48px !important; height: 48px !important; }
  body.v2 .player .ctrl.primary { width: 54px !important; height: 54px !important; }
}
@media (min-width: 901px) { .v2-drawer-titel { display: none; } }
@media (max-width: 350px) { body.v2 .v2-schublade-extras button span { display: none; } }

/* ---------------------------------------------------------------- Großer Player */
body.v2 .cover-meta-modal:not(.hidden) { position: fixed !important; inset: 0 !important; z-index: 70 !important; display: block !important; padding: 0 !important; background: #07080c !important; }
body.v2 .cover-meta-backdrop { display: none !important; }
body.v2 .cover-meta-card {
  position: relative !important; inset: auto !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; border: 0 !important; transform: none !important;
  overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important;
  padding: max(14px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) calc(36px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important;
  display: flex !important; flex-direction: column; gap: 0 !important; align-items: stretch;
  animation: v2-hoch .32s cubic-bezier(.2,.9,.3,1);
}
body.v2 .cover-meta-card > * { width: 100%; max-width: 460px; margin-left: auto !important; margin-right: auto !important; flex: none !important; }
@keyframes v2-hoch { from { transform: translateY(36px); } }
body.v2 .cover-meta-card::before {
  content: "" !important; position: fixed !important; inset: -10% !important; z-index: -2 !important; pointer-events: none;
  background: var(--v2-cover, none) center / cover no-repeat !important; filter: blur(70px) saturate(1.6) brightness(.55) !important; transform: scale(1.2) !important; opacity: .9;
}
body.v2 .cover-meta-card::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(80% 60% at 50% 20%, color-mix(in srgb, var(--c1) 24%, transparent), transparent 70%), linear-gradient(180deg, rgba(7,8,12,.25), rgba(7,8,12,.78) 65%, #07080c) !important;
}
body.v2 .cover-meta-header { display: flex !important; align-items: center; gap: 10px; margin-top: 0 !important; margin-bottom: 18px !important; padding: 0 !important; background: none !important; border: 0 !important; }
body.v2 .cover-meta-header > div:first-child { flex: 1; text-align: center; order: 1; }
body.v2 .cover-meta-header .panel-label { font-size: .78rem !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase; color: rgba(255,255,255,.78) !important; }
body.v2 #coverMetaClose { order: 0; width: 44px !important; height: 44px !important; min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: 0 !important; background: rgba(255,255,255,.1) !important; color: #fff !important; display: grid !important; place-items: center; box-shadow: none !important; }
body.v2 #coverMetaClose svg { width: 24px; height: 24px; }
.v2-schlaf-knopf { order: 2; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: .86rem; font-weight: 650; cursor: pointer; font-variant-numeric: tabular-nums; }
.v2-schlaf-knopf svg { width: 18px; height: 18px; }
body.v2 .v2-schlaf-knopf { background: rgba(255,255,255,.12) !important; border: 0 !important; color: #fff !important; }
body.v2.v2-schlaf-an .v2-schlaf-knopf { background: var(--knopf) !important; color: var(--knopf-ink) !important; }
@media (max-width: 420px) { body.v2:not(.v2-schlaf-an) .v2-schlaf-knopf span { display: none; } .v2-schlaf-knopf { padding: 0; width: 44px; justify-content: center; } body.v2.v2-schlaf-an .v2-schlaf-knopf { width: auto; padding: 0 12px; } }
body.v2 .cover-meta-card > .cover-meta-cover-wrap { width: min(100%, 46vh, 420px) !important; height: min(calc(100vw - 40px), 46vh, 420px) !important; aspect-ratio: auto; margin: 4px auto 0 !important; padding: 0 !important; border: 0 !important; border-radius: 22px !important; overflow: visible !important; background: none !important; box-shadow: none !important; }
body.v2 .cover-meta-cover { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; border-radius: 22px !important; box-shadow: 0 34px 80px rgba(0,0,0,.6), 0 0 90px color-mix(in srgb, var(--c1) 32%, transparent) !important; border: 0 !important; transition: transform .4s; }
body.v2:not(.v2-spielt) .cover-meta-cover { transform: scale(.94); }
.v2-vis { display: block; width: min(100%, 46vh, 420px); height: 54px; margin: 18px auto 0; }
.v2-gross-titel { margin: 14px 0 6px; min-width: 0; }
body.v2 .v2-gross-titel .cover-meta-title-wrap { overflow: visible !important; }
body.v2 #coverMetaTitle { padding: 0 !important; min-width: 0 !important; margin: 0 !important; font-size: clamp(1.4rem, 4.5vw, 1.8rem) !important; font-weight: 800 !important; line-height: 1.15; letter-spacing: -.015em; color: #fff !important; white-space: normal !important; animation: none !important; transform: none !important; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.v2 #coverMetaSub { margin-top: 4px; font-size: 1rem !important; color: rgba(255,255,255,.75) !important; }
body.v2 .cover-meta-fields-wrap:empty { display: none !important; }
body.v2 .cover-meta-player { display: flex !important; flex-direction: column; gap: 14px; margin-top: 10px !important; margin-bottom: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
body.v2 .cover-meta-player .progress { order: 0; width: 100%; }
body.v2 .cover-meta-player .progress .range-wrap { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0; }
body.v2 .cover-meta-player .controls { order: 1; display: flex !important; justify-content: space-between; align-items: center; gap: 4px; }
body.v2 .cover-meta-player .ctrl { width: 52px !important; height: 52px !important; }
body.v2 .cover-meta-player .ctrl svg { width: 24px; height: 24px; }
body.v2 .cover-meta-player .ctrl.primary { width: 74px !important; height: 74px !important; background: #fff !important; color: #0b0d12 !important; box-shadow: 0 14px 34px rgba(0,0,0,.45) !important; }
body.v2 .cover-meta-player .ctrl.primary svg { width: 30px; height: 30px; }
body.v2 .cover-meta-player .player-right { order: 2; display: flex !important; align-items: center; gap: 10px; color: var(--v2-leise); font-size: .8rem; }
body.v2 .cover-meta-player .player-right > span { display: none; }
@media (hover: none) { body.v2 .cover-meta-player .player-right { display: none !important; } }
body.v2 .cover-meta-queue { margin-top: 30px !important; padding: 16px !important; border-radius: 20px !important; background: rgba(7,8,12,.45) !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: none !important; }
body.v2 .cover-meta-queue-head { display: flex !important; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
body.v2 .cover-meta-queue-head strong { font-size: 1.05rem; color: #fff; }
body.v2 .cover-meta-queue-head span { color: var(--v2-leise); font-size: .85rem; }
body.v2 .cover-meta-queue-list { max-height: none !important; display: flex; flex-direction: column; gap: 2px; }
body.v2 .cover-meta-queue-item { display: grid !important; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; padding: 9px 8px !important; border-radius: 10px !important; border: 0 !important; background: transparent !important; color: var(--v2-text) !important; text-align: left; box-shadow: none !important; cursor: pointer; }
body.v2 .cover-meta-queue-item:hover { background: rgba(255,255,255,.07) !important; }
body.v2 .cover-meta-queue-item.current { background: color-mix(in srgb, var(--knopf) 20%, transparent) !important; box-shadow: none !important; }
body.v2 .cover-meta-queue-item.current strong { color: var(--akzent) !important; }
body.v2 .cover-meta-queue-index { color: var(--v2-leise); font-size: .85rem; text-align: center; font-variant-numeric: tabular-nums; background: none !important; border: 0 !important; }
body.v2 .cover-meta-queue-copy { min-width: 0; display: flex; flex-direction: column; }
body.v2 .cover-meta-queue-copy strong { font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.v2 .cover-meta-queue-copy span { font-size: .8rem; color: var(--v2-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1059px), (orientation: portrait) {
  body.v2 .cover-meta-card > .cover-meta-cover-wrap { width: min(62vw, 30vh, 320px) !important; height: min(62vw, 30vh, 320px) !important; }
  body.v2 .cover-meta-card > .v2-vis { width: min(100%, 420px); height: 44px; margin-top: 12px; }
  body.v2 .v2-gross-titel { margin: 10px 0 2px; }
  body.v2 #coverMetaTitle { font-size: clamp(1.25rem, 4.6vw, 1.6rem) !important; -webkit-line-clamp: 1; }
  body.v2 .cover-meta-header { margin-bottom: 10px !important; }
  body.v2 .cover-meta-player { gap: 8px; margin-top: 6px !important; }
  body.v2 .cover-meta-player .ctrl.primary { width: 64px !important; height: 64px !important; }
  body.v2 .cover-meta-queue { margin-top: 14px !important; padding: 10px !important; }
  body.v2 .cover-meta-card > .cover-meta-queue { flex: 1 1 auto !important; min-height: 220px; display: flex !important; flex-direction: column; }
  body.v2 .cover-meta-queue-list { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow-y: auto !important; overscroll-behavior: contain; }
}
/* niedrige Bildschirme (z. B. iPhone mit Browserleisten): alles enger, damit die Titel sichtbar bleiben */
@media (max-width: 1059px) and (max-height: 780px) {
  body.v2 .cover-meta-card > .cover-meta-cover-wrap { width: min(56vw, 25vh, 260px) !important; height: min(56vw, 25vh, 260px) !important; margin-top: 0 !important; }
  body.v2 .cover-meta-card > .v2-vis { height: 34px; margin-top: 8px; }
  body.v2 .cover-meta-header { margin-bottom: 6px !important; }
  body.v2 #coverMetaClose, body.v2 .v2-schlaf-knopf { height: 40px !important; }
  body.v2 #coverMetaClose { width: 40px !important; }
  body.v2 .v2-gross-titel { margin: 6px 0 0; }
  body.v2 #coverMetaTitle { font-size: 1.2rem !important; }
  body.v2 #coverMetaSub { font-size: .9rem !important; margin-top: 2px; }
  body.v2 .cover-meta-player { gap: 4px; margin-top: 4px !important; }
  body.v2 .cover-meta-player .ctrl { width: 46px !important; height: 46px !important; }
  body.v2 .cover-meta-player .ctrl.primary { width: 58px !important; height: 58px !important; }
  body.v2 .cover-meta-queue { margin-top: 10px !important; }
}
@media (min-width: 1060px) and (orientation: landscape) {
  body.v2 .cover-meta-card { display: grid !important; grid-template-columns: 460px 420px; column-gap: 70px !important; justify-content: center; align-content: center; grid-template-rows: auto auto auto auto auto auto 1fr; }
  body.v2 .cover-meta-card > * { grid-column: 1; max-width: none; }
  body.v2 .cover-meta-card > .cover-meta-header { grid-column: 1 / -1; grid-row: 1; }
  body.v2 .cover-meta-card > .cover-meta-cover-wrap { grid-row: 2; width: min(460px, 44vh) !important; height: min(460px, 44vh) !important; }
  body.v2 .cover-meta-card > .v2-vis { grid-row: 3; }
  body.v2 .cover-meta-card > .v2-gross-titel { grid-row: 4; }
  body.v2 .cover-meta-card > .cover-meta-fields-wrap { grid-row: 5; }
  body.v2 .cover-meta-card > .cover-meta-player { grid-row: 6; }
  body.v2 .cover-meta-card > .cover-meta-queue { grid-column: 2; grid-row: 2 / span 6; align-self: start; margin-top: 4px !important; max-height: calc(100vh - 140px); overflow-y: auto; }
}

/* ---------------------------------------------------------------- Kleinkram */
body.v2 .v2-hoch, body.v2 .v2-hoch:hover { background: rgba(26,29,39,.92) !important; color: #fff !important; border: 1px solid var(--v2-linie) !important; }
.v2-hoch { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(var(--player-h, 80px) + 16px); z-index: 45; width: 46px; height: 46px; background: rgba(26,29,39,.92); color: #fff; border: 1px solid var(--v2-linie); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s, transform .2s; }
.v2-hoch svg { fill: none; width: 24px; height: 24px; }
.v2-hoch.zeigen { opacity: 1; pointer-events: auto; transform: none; }
body.v2.v2-album-offen .v2-hoch, body.v2.v2-gross-offen .v2-hoch { display: none; }
body.v2 .notify-pill, body.v2 .notification-pill { text-transform: capitalize; }
body.v2 .global-toast { font-family: inherit; }
/* Seitenmenü: ruhiger, gleiche Farbwelt */
body.v2 .side-menu-panel { background: rgba(13, 15, 21, .97) !important; border-right: 1px solid var(--v2-linie) !important; }
body.v2 .side-menu-item { background: rgba(255,255,255,.05) !important; border: 1px solid var(--v2-linie) !important; box-shadow: none !important; color: var(--v2-text) !important; }
body.v2 .side-menu-item[aria-expanded="true"] { border-color: color-mix(in srgb, var(--knopf) 60%, transparent) !important; background: color-mix(in srgb, var(--knopf) 14%, transparent) !important; }
body.v2 .side-menu-item-meta { color: var(--v2-leise) !important; letter-spacing: .04em !important; }
body.v2 .side-menu-item-badge { background: color-mix(in srgb, var(--knopf) 30%, transparent) !important; color: #fff !important; border: 0 !important; }
body.v2 .side-menu-close { background: rgba(255,255,255,.08) !important; border: 1px solid var(--v2-linie) !important; box-shadow: none !important; width: 44px !important; min-width: 0 !important; padding: 0 !important; }

body.v2 .side-menu-playlist-card { background: rgba(255,255,255,.05) !important; border: 1px solid var(--v2-linie) !important; box-shadow: none !important; color: var(--v2-text) !important; }
body.v2 .side-menu-playlist-card:hover { background: rgba(255,255,255,.1) !important; }
body.v2 .side-menu-playlist-card.active { background: color-mix(in srgb, var(--knopf) 20%, transparent) !important; border-color: color-mix(in srgb, var(--knopf) 60%, transparent) !important; }
body.v2 .side-menu-album-meta, body.v2 .side-menu-playlist-card small { color: var(--v2-leise) !important; letter-spacing: .02em !important; text-transform: none !important; }
/* Suchfenster */
body.v2 .search-results-panel { background: rgba(18, 20, 28, .97) !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: 0 30px 70px rgba(0,0,0,.6) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 22px !important; }
body.v2 .search-section-label { color: var(--akzent) !important; letter-spacing: .08em !important; }
body.v2 .search-album-card { background: rgba(255,255,255,.05) !important; border: 1px solid var(--v2-linie) !important; box-shadow: none !important; border-radius: 16px !important; }
body.v2 .search-album-card:hover { background: rgba(255,255,255,.1) !important; }
body.v2 .search-album-card-title { color: var(--v2-text) !important; font-weight: 650 !important; }
body.v2 .search-album-card-meta { color: var(--v2-leise) !important; font-weight: 500 !important; }
body.v2 .search-album-card-open { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--v2-leise) !important; }
body.v2 .search-results-panel .track-card.search-result { background: rgba(255,255,255,.04) !important; border: 1px solid var(--v2-linie) !important; box-shadow: none !important; }
body.v2 .search-results-close { background: rgba(255,255,255,.1) !important; border: 0 !important; }

/* ---------------------------------------------------------------- Anmeldung */
body.v2-login { background: #07080c !important; font-family: "Inter", system-ui, sans-serif !important; }
/* Anmeldung: unscharfes Hintergrundbild hinter der Karte wie in der alten Fassung (Nutzerwunsch 22.10.), darüber das Farbleuchten */
body.v2-login::before {
  background:
    radial-gradient(60% 45% at 15% 10%, rgba(255, 79, 179, .22), transparent 70%),
    radial-gradient(55% 45% at 90% 15%, rgba(93, 140, 255, .24), transparent 70%),
    linear-gradient(rgba(7, 8, 12, .08), rgba(7, 8, 12, .42)),
    url("../mrty-eu-app.webp") center / cover no-repeat,
    #07080c !important;
  inset: -38px; filter: blur(12px) saturate(.85) brightness(.9); transform: scale(1.035);
}
body.v2-login .login-box { background: rgba(18, 20, 28, .82) !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 28px !important; box-shadow: 0 30px 80px rgba(0,0,0,.55) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); position: relative; z-index: 1; }
body.v2-login .login-tab { letter-spacing: .02em !important; text-transform: none !important; font-weight: 700 !important; font-size: 1rem !important; }
body.v2-login .login-tab.active { background: linear-gradient(135deg, #c01f80, #4a55d6) !important; color: #fff !important; box-shadow: 0 10px 26px rgba(109, 125, 255, .35) !important; }
body.v2-login .login-heading { text-transform: none !important; letter-spacing: -.01em !important; font-size: 1.25rem !important; }
body.v2-login .login-input { font-size: 16px !important; }
body.v2-login .login-button { text-transform: none !important; letter-spacing: .01em !important; font-size: 1.05rem !important; font-weight: 750 !important; background: linear-gradient(135deg, #c01f80, #4a55d6) !important; color: #fff !important; box-shadow: 0 14px 30px rgba(109, 125, 255, .35) !important; }
@media (prefers-reduced-motion: reduce) { body.v2 *, body.v2 *::before { animation-duration: .01s !important; transition-duration: .01s !important; } }

/* ---------------------------------------------------------------- Große Tablets: alles größer, trotzdem mehr Spalten */
@media (pointer: coarse) and (min-width: 800px) and (min-height: 800px) { :root { --z: 1.12; } }
@media (pointer: coarse) and (min-width: 1000px) and (min-height: 1000px) { :root { --z: 1.25; } }
@media (pointer: coarse) and (min-width: 1150px) and (min-height: 1150px) { :root { --z: 1.35; } }
@media (pointer: coarse) and (min-width: 800px) and (min-height: 800px) {
  html { font-size: calc(16px * var(--z)) !important; }
  body.v2 { padding-top: calc(78px * var(--z)) !important; }
  body.v2 header.top { height: calc(64px * var(--z)) !important; gap: calc(10px * var(--z)); }
  body.v2 header.top .brand { width: calc(44px * var(--z)); height: calc(44px * var(--z)); }
  body.v2 header.top .search { max-width: calc(620px * var(--z)); }
  body.v2 #search { height: calc(44px * var(--z)); font-size: calc(16px * var(--z)) !important; padding-left: calc(44px * var(--z)) !important; background-size: calc(19px * var(--z)) !important; background-position: calc(15px * var(--z)) center !important; }
  body.v2 header.top .sort-toggle-btn { width: calc(36px * var(--z)) !important; height: calc(36px * var(--z)) !important; }
  body.v2 header.top .goto-playlists, body.v2 header.top .logout-form button { width: calc(42px * var(--z)) !important; height: calc(42px * var(--z)) !important; }
  body.v2 .page { max-width: calc(1320px * var(--z)); }
  body.v2 #albumsArea, body.v2 #albumsArea.album-grid { grid-template-columns: repeat(auto-fill, minmax(calc(168px * var(--z)), 1fr)) !important; gap: calc(26px * var(--z)) calc(18px * var(--z)) !important; }
  body.v2 .album-card .album-cover-play { width: calc(46px * var(--z)) !important; height: calc(46px * var(--z)) !important; right: calc(9px * var(--z)); bottom: calc(9px * var(--z)); }
  body.v2 .album-card .album-cover-play svg { width: calc(20px * var(--z)); height: calc(20px * var(--z)); }
  body.v2 .album-more-btn { width: calc(38px * var(--z)); height: calc(38px * var(--z)); }
  body.v2 .album-more-btn svg { width: calc(20px * var(--z)); height: calc(20px * var(--z)); }
  .album-media, body.v2 .album-card .album-media, .v2-neu-cover { border-radius: calc(16px * var(--z)) !important; }
  .v2-weiter { grid-template-columns: calc(96px * var(--z)) minmax(0, 1fr) calc(58px * var(--z)); padding: calc(14px * var(--z)); gap: calc(16px * var(--z)); border-radius: calc(24px * var(--z)); }
  .v2-weiter-cover { width: calc(96px * var(--z)); height: calc(96px * var(--z)); }
  .v2-weiter-play { width: calc(58px * var(--z)); height: calc(58px * var(--z)); }
  .v2-neu-reihe { grid-auto-columns: calc(156px * var(--z)); gap: calc(16px * var(--z)); }
  .v2-neu-play { width: calc(42px * var(--z)); height: calc(42px * var(--z)); top: calc(156px * var(--z) - 50px * var(--z)); }
  .v2-menue { min-width: calc(220px * var(--z)); }
  .v2-menue button { min-height: calc(46px * var(--z)); }
  .v2-menue button svg { width: calc(20px * var(--z)); height: calc(20px * var(--z)); }
  /* Player-Leiste */
  body.v2 .player .np .cover { width: calc(54px * var(--z)) !important; height: calc(54px * var(--z)) !important; }
  body.v2 .player .ctrl { width: calc(42px * var(--z)) !important; height: calc(42px * var(--z)) !important; }
  body.v2 .player .ctrl.primary { width: calc(50px * var(--z)) !important; height: calc(50px * var(--z)) !important; }
  body.v2 .player .ctrl svg { width: calc(21px * var(--z)); height: calc(21px * var(--z)); }
  /* Album-Seite */
  body.v2 #albumDetailSection > * { max-width: calc(1000px * var(--z)); }
  .v2-held-cover { width: calc(200px * var(--z)); height: calc(200px * var(--z)); }
  body.v2 .v2-album-zu { width: calc(40px * var(--z)); height: calc(40px * var(--z)); }
  body.v2 #albumDetailSection .detail-actions .pill { height: calc(46px * var(--z)) !important; padding: 0 calc(20px * var(--z)) !important; }
  body.v2 #albumDetailSection .detail-actions #downloadAlbumBtn { width: calc(46px * var(--z)) !important; }
  body.v2 #albumDetailSection .detail-actions .pill svg { width: calc(19px * var(--z)); height: calc(19px * var(--z)); }
  body.v2 #trackContainer .track-card-top { min-height: calc(56px * var(--z)); grid-template-columns: calc(34px * var(--z)) minmax(0, 1fr) auto calc(40px * var(--z)); }
  body.v2 #trackContainer .track-card-menu-trigger { width: calc(40px * var(--z)) !important; height: calc(40px * var(--z)) !important; }
  /* großer Player */
  body.v2 .cover-meta-card > * { max-width: calc(460px * var(--z)); }
  body.v2 #coverMetaClose { width: calc(44px * var(--z)) !important; height: calc(44px * var(--z)) !important; }
  .v2-schlaf-knopf { height: calc(44px * var(--z)); }
  body.v2 .cover-meta-player .ctrl { width: calc(52px * var(--z)) !important; height: calc(52px * var(--z)) !important; }
  body.v2 .cover-meta-player .ctrl svg { width: calc(24px * var(--z)); height: calc(24px * var(--z)); }
  body.v2 .cover-meta-player .ctrl.primary { width: calc(70px * var(--z)) !important; height: calc(70px * var(--z)) !important; }
  body.v2 .cover-meta-player .ctrl.primary svg { width: calc(30px * var(--z)); height: calc(30px * var(--z)); }
  .v2-vis { height: calc(54px * var(--z)); }
  /* Drawer (Tablets bis 900 px Breite) */
  body.v2 .v2-mini-play { width: calc(48px * var(--z)); height: calc(48px * var(--z)); }
  body.v2 .v2-schublade-extras button { height: calc(42px * var(--z)); }
  body.v2 .v2-drawer-zeile { min-height: calc(46px * var(--z)); }
}
@media (pointer: coarse) and (min-width: 800px) and (min-height: 800px) and (orientation: portrait) {
  /* Hochformat: großes Cover im großen Player, Titelliste darunter */
  body.v2 .cover-meta-card > .cover-meta-cover-wrap { width: min(62vw, 34vh, calc(400px * var(--z))) !important; height: min(62vw, 34vh, calc(400px * var(--z))) !important; }
  body.v2 .cover-meta-card > .v2-vis { width: min(100%, calc(460px * var(--z))); }

}
@media (pointer: coarse) and (min-width: 1060px) and (orientation: landscape) and (min-height: 800px) {
  body.v2 .cover-meta-card { grid-template-columns: calc(460px * var(--z)) calc(420px * var(--z)); column-gap: calc(60px * var(--z)) !important; }
  body.v2 .cover-meta-card > * { max-width: none; }
  body.v2 .cover-meta-card > .cover-meta-cover-wrap { width: min(calc(460px * var(--z)), 42vh) !important; height: min(calc(460px * var(--z)), 42vh) !important; }
}
@media (pointer: coarse) and (orientation: portrait) and (min-width: 901px) {
  /* Hochformat-Tablet: Steuerung rechts, damit der Songtitel in der Leiste Platz hat */
  body.v2 .player { grid-template-columns: minmax(0, 1fr) auto !important; }
  body.v2 .player .player-center { width: min(52vw, calc(480px * var(--z))); }
}
@media (pointer: coarse) and (min-width: 901px) and (min-height: 800px) and (orientation: landscape) {
  body.v2 .player { grid-template-columns: minmax(200px, 1fr) minmax(0, min(calc(560px * var(--z)), 56vw)) minmax(0, 1fr); }
}

/* ================================================================ Gebürstetes Metall (alle Knöpfe)
   Blau eloxiert (Farbknöpfe), Aluminium (weiße Play/Pause), Graphit (alle übrigen). Blau bleibt dunkel genug für weiße Symbole (≥ 4,5:1). */
:root {
  /* Dreh-Metall für runde Knöpfe: feine kreisförmige Schleifspuren + Lichtreflexe */
  --metall-blau-rund:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.22), transparent 55%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.07) 1px 2px),
    conic-gradient(from 25deg, #1d4ab8, #3a6be0, #1a3f9e, #3466dc, #1d4ab8, #3a6be0, #1a3f9e, #3466dc, #1d4ab8);
  --metall-silber-rund:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.7), transparent 55%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.28) 0 1px, rgba(0,0,0,.05) 1px 2px),
    conic-gradient(from 25deg, #e6eaef, #b4bcc7, #f6f8fa, #c0c7d1, #e6eaef, #b4bcc7, #f6f8fa, #c0c7d1, #e6eaef);
  --metall-graphit-rund:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.12), transparent 55%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.035) 0 1px, rgba(0,0,0,.08) 1px 2px),
    conic-gradient(from 25deg, #2b303b, #474e5c, #232731, #3e4552, #2b303b, #474e5c, #232731, #3e4552, #2b303b);
  /* längs gebürstet für rechteckige Knöpfe */
  /* waagerechte, unregelmäßige Bürstspuren + schräger Glanzstreifen */
  --metall-blau-flach:
    linear-gradient(100deg, transparent 22%, rgba(255,255,255,.13) 42%, rgba(255,255,255,.03) 52%, transparent 66%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.07) 0 1px, transparent 1px 2px, rgba(0,0,0,.07) 2px 3px, transparent 3px 5px, rgba(255,255,255,.04) 5px 6px, transparent 6px 9px),
    linear-gradient(180deg, #3a6be0 0%, #2a5ad4 44%, #1d47b0 56%, #2b5cd6 100%);
  --metall-graphit-flach:
    linear-gradient(100deg, transparent 22%, rgba(255,255,255,.08) 42%, rgba(255,255,255,.02) 52%, transparent 66%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 1px, transparent 1px 2px, rgba(0,0,0,.09) 2px 3px, transparent 3px 5px, rgba(255,255,255,.03) 5px 6px, transparent 6px 9px),
    linear-gradient(180deg, #454c5a 0%, #2f3440 44%, #23272f 56%, #343a46 100%);
  --metall-kante: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 1px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.1);
  --metall-schatten: 0 6px 16px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.5);
}

/* blau eloxiert, rund: Play auf den Covern, Weiterhören, Neu-Reihe */
body.v2 .album-card .album-cover-play, body.v2 .album-card .album-cover-play:hover,
body.v2 .v2-rund, body.v2 .v2-rund:hover {
  background-color: #2a5ad4 !important; background-image: var(--metall-blau-rund) !important; color: #fff !important;
  border: 0 !important; box-shadow: var(--metall-kante), 0 0 0 1px rgba(8,18,48,.7), var(--metall-schatten) !important;
}
body.v2 .album-card .album-cover-play svg, body.v2 .v2-rund svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,.55)); }
/* blau gebürstet, rechteckig: Abspielen, aktive Schalter, Schlaf-Timer an, „Neu“ */
body.v2 #albumDetailSection .detail-actions #playAlbumBtn,
body.v2 button.active, body.v2 button[aria-pressed="true"], body.v2 .pill.play, body.v2 .pill.primary,
body.v2 header.top .sort-toggle-btn[aria-pressed="true"], body.v2.v2-schlaf-an .v2-schlaf-knopf, body.v2 .v2-neu-marke {
  background-color: #2a5ad4 !important; background-image: var(--metall-blau-flach) !important; color: #fff !important;
  border-color: transparent !important; box-shadow: var(--metall-kante), 0 0 0 1px rgba(8,18,48,.6), 0 4px 12px rgba(0,0,0,.35) !important; text-shadow: 0 1px 1px rgba(0,0,0,.45);
}
body.v2 header.top .sort-toggle-btn[aria-pressed="true"] { border-radius: 999px !important; }
/* Aluminium, rund: weiße Play/Pause in Leiste, Drawer und großem Player */
body.v2 .player .ctrl.primary, body.v2 .cover-meta-player .ctrl.primary, body.v2 .v2-mini-play,
body.v2 .player .ctrl.primary:hover, body.v2 .cover-meta-player .ctrl.primary:hover, body.v2 .v2-mini-play:hover {
  background-color: #d5dbe3 !important; background-image: var(--metall-silber-rund) !important; color: #0b0d12 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 3px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.35), var(--metall-schatten) !important;
}
/* Graphit, rund: Steuerung, ×, Schließen, Nach oben, Kopfzeile */
body.v2 .player .ctrl:not(.primary), body.v2 .cover-meta-player .ctrl:not(.primary),
body.v2 .v2-album-zu, body.v2 #coverMetaClose, body.v2 .v2-hoch, body.v2 .side-menu-close, body.v2 .search-results-close,
body.v2 header.top .goto-playlists, body.v2 header.top .logout-form button {
  background-color: #2f3440 !important; background-image: var(--metall-graphit-rund) !important;
  border: 0 !important; box-shadow: var(--metall-kante), 0 0 0 1px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.4) !important;
}
body.v2 .player .ctrl.active, body.v2 .cover-meta-player .ctrl.active { color: var(--akzent) !important; box-shadow: var(--metall-kante), 0 0 0 1px rgba(140,196,255,.55), 0 0 14px rgba(37,99,235,.45) !important; }
/* Graphit, gebürstet: übrige Knöpfe der Album-Seite, Schlaf-Timer, Drawer-Knöpfe, Sortier-Leiste */
body.v2 #albumDetailSection .detail-actions .pill:not(#playAlbumBtn),
body.v2 .v2-schlaf-knopf, body.v2 .v2-schublade-extras button,
body.v2 header.top .sort-toggle-btn:not([aria-pressed="true"]) {
  background-color: #2f3440 !important; background-image: var(--metall-graphit-flach) !important;
  border-color: rgba(0,0,0,.4) !important; box-shadow: var(--metall-kante), 0 3px 8px rgba(0,0,0,.35) !important; color: #f4f5f8 !important;
}
body.v2 header.top .sort-toggle { background: rgba(0,0,0,.25) !important; box-shadow: inset 0 1px 3px rgba(0,0,0,.5) !important; }
/* gedrückt / Maus darüber */
@media (hover: hover) {
  body.v2 .album-card .album-cover-play:hover, body.v2 .v2-rund:hover, body.v2 #playAlbumBtn:hover,
  body.v2 .player .ctrl:hover, body.v2 .cover-meta-player .ctrl:hover, body.v2 .v2-mini-play:hover,
  body.v2 #albumDetailSection .detail-actions .pill:hover, body.v2 .v2-schublade-extras button:hover { filter: brightness(1.1) !important; }
}
body.v2 .album-card .album-cover-play:active, body.v2 .v2-rund:active, body.v2 .pill:active, body.v2 .ctrl:active, body.v2 .v2-mini-play:active, body.v2 .v2-schublade-extras button:active {
  filter: brightness(.92) !important; transform: scale(.96);
}

/* „Zur Playlist hinzufügen“: dunkle Karte wie die übrigen Fenster, gut lesbare Zeilen (23.10.) –
   vorher helle Zeilen vom alten Design mit weißer Schrift und ein weißes Eingabefeld mit weißer Schrift */
body.v2 #playlistPicker .playlist-picker-card {
  background: var(--v2-flaeche) !important; border: 1px solid var(--v2-linie) !important; border-radius: 22px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.6) !important; padding: 18px !important;
}
body.v2 #playlistPicker .picker-header strong { font-size: 1.12rem; color: var(--v2-text) !important; }
body.v2 #playlistPicker .picker-sub { margin-top: 2px; color: var(--v2-leise) !important; }
body.v2 #playlistPicker .picker-close {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50% !important;
  font-size: 1.3rem; color: var(--v2-text) !important;
}
body.v2 #playlistPicker .picker-list { gap: 8px; margin: 14px 0; max-height: min(340px, 50vh); }
body.v2 #playlistPicker .picker-item {
  background: var(--v2-flaeche-2) !important; border: 1px solid var(--v2-linie); box-shadow: none !important;
  border-radius: 14px; padding: 10px 10px 10px 14px; gap: 12px;
}
body.v2 #playlistPicker .picker-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.v2 #playlistPicker .picker-item-text strong { color: var(--v2-text) !important; font-weight: 650; overflow-wrap: anywhere; }
body.v2 #playlistPicker .picker-item-text small { color: var(--v2-leise) !important; font-size: .82rem; }
body.v2 #playlistPicker .picker-item button {
  width: auto !important; flex: none; min-height: 40px; padding: 0 16px !important; border-radius: 999px !important;
  background-color: #2a5ad4 !important; background-image: var(--metall-blau-flach) !important; color: #fff !important;
  border: 0 !important; box-shadow: var(--metall-kante), 0 0 0 1px rgba(8,18,48,.6), 0 4px 12px rgba(0,0,0,.35) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.45); font-weight: 700;
}
body.v2 #playlistPicker .picker-list .empty { color: var(--v2-leise) !important; padding: 8px 2px; }
body.v2 #playlistPicker .picker-footer { gap: 8px; flex-wrap: wrap; }
body.v2 #playlistPicker .picker-footer input {
  flex: 1 1 180px; min-height: 46px; background: rgba(255,255,255,.08) !important; border: 1px solid var(--v2-linie) !important;
  color: var(--v2-text) !important; border-radius: 999px; padding: 0 16px; font-size: 16px;
}
body.v2 #playlistPicker .picker-footer input::placeholder { color: #8e94a3 !important; }
body.v2 #playlistPicker .picker-footer input:focus { outline: none; border-color: color-mix(in srgb, var(--knopf) 70%, white) !important; background: rgba(255,255,255,.11) !important; }
body.v2 #playlistPicker .picker-footer .pill.primary { flex: 1 1 auto; min-height: 46px; border-radius: 999px !important; font-weight: 700; }