/* Wolke – Musik (musik.js): Seite mit Playlists und eigenen Titeln, Leiste unten rechts, Marke im Kopf. */
.mu-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; max-width: 1200px; }
@media (max-width: 1000px) { .mu-raster { grid-template-columns: 1fr; } }
.mu-zeile { gap: 12px; cursor: default; }
.mu-zeile.spielt { background: var(--salbei-zart); }
.mu-zeile .knopf { padding: 7px 14px; font-size: 13.5px; }
.mu-zeile .knopf svg { width: 16px; height: 16px; }
.mu-quelle { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.mu-quelle svg { width: 22px; height: 22px; }
.mu-quelle.spotify { background: #1db954; }
.mu-quelle.youtube { background: #e62117; border-radius: 9px; }
.mu-nr { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--salbei-zart); color: var(--salbei-dunkel); cursor: pointer; display: grid; place-items: center; padding: 0; font: inherit; font-size: 13px; }
.mu-nr svg { width: 16px; height: 16px; display: none; }
.mu-nr:hover span, .mu-zeile.spielt .mu-nr span { display: none; }
.mu-nr:hover svg, .mu-zeile.spielt .mu-nr svg { display: block; }
.mu-zeile.spielt .mu-nr { background: var(--salbei); color: #fff; }
.mu-ziehen { outline: 2px dashed var(--salbei); outline-offset: -6px; }
.mu-anleitung { display: block; }
.mu-schritte { margin: 6px 0 8px; padding-left: 20px; }
.mu-schritte li { margin: 2px 0; }
.mu-recht { max-width: 860px; margin: 18px 4px 0; }
.mu-erkannt { color: var(--salbei-dunkel); font-weight: 500; }

.musik-dock {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 46; width: min(340px, calc(100vw - 16px));
  background: #fff; border: 1px solid var(--rand-stark); border-radius: var(--radius); box-shadow: 0 10px 34px rgba(30, 45, 40, .18);
  overflow: hidden; transition: transform .25s ease, opacity .25s ease;
}
/* verkleinert: aus dem Bild geschoben, aber nicht entfernt – sonst hörten die eingebetteten Player auf */
.musik-dock.zu { transform: translateY(calc(100% + 40px)); opacity: 0; pointer-events: none; }
.md-kopf { display: flex; align-items: center; gap: 6px; padding: 8px 6px 8px 10px; }
.md-kopf .mu-quelle { width: 26px; height: 26px; }
.md-kopf .mu-quelle svg { width: 18px; height: 18px; }
.md-symbol { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--salbei); color: #fff; display: grid; place-items: center; }
.md-symbol svg { width: 15px; height: 15px; }
.md-titel { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-kopf .icon-knopf { padding: 5px; }
.md-kopf .icon-knopf svg { width: 18px; height: 18px; }
.md-rahmen { display: block; width: 100%; border: 0; }
.md-gesperrt { padding: 4px 14px 14px; display: grid; gap: 10px; justify-items: start; }
.md-zeit { display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.md-zeit input { flex: 1; min-width: 0; accent-color: var(--salbei); }
.md-knoepfe { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px 12px; }
.md-knoepfe .icon-knopf { position: relative; }
.md-knoepfe .icon-knopf.an { color: var(--salbei-dunkel); background: var(--salbei-zart); }
.md-knoepfe .icon-knopf i { position: absolute; right: 1px; bottom: 0; font-style: normal; font-size: 10px; font-weight: 700; }
.md-haupt { width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--salbei); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.md-haupt:hover { background: var(--salbei-dunkel); }
.md-haupt svg { width: 22px; height: 22px; fill: currentColor; }
.md-laut { display: flex; align-items: center; gap: 4px; color: var(--text-2); margin-left: 6px; }
.md-laut svg { width: 18px; height: 18px; flex: none; }
.md-laut input { width: 70px; accent-color: var(--salbei); }
@media (pointer: coarse) { .md-laut { display: none; } }   /* am Handy regeln die Tasten des Geräts die Lautstärke */

.musik-marke { display: inline-flex; align-items: center; gap: 6px; max-width: 190px; border: 1px solid var(--rand-stark); background: #fff; color: var(--text-2);
  border-radius: 999px; padding: 6px 12px 6px 9px; font: inherit; font-size: 13px; cursor: pointer; }
.musik-marke:hover { background: var(--salbei-zart); }
.musik-marke svg { width: 17px; height: 17px; flex: none; }
.musik-marke span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.musik-marke.spielt { color: var(--salbei-dunkel); border-color: var(--salbei); }
.musik-marke.spielt svg { animation: mu-wippen 1.6s ease-in-out infinite; }
@keyframes mu-wippen { 50% { transform: translateY(-2px) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .musik-marke.spielt svg { animation: none; } .musik-dock { transition: none; } }
@media (max-width: 1100px) { .musik-marke span { display: none; } .musik-marke { padding: 8px; } }
@media (max-width: 700px) {
  .musik-dock { right: 8px; left: 8px; width: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .musik-marke { border: 0; background: none; padding: 9px; }
  .mu-zeile .knopf { padding: 9px; }
  .mu-zeile .knopf span { display: none; }
}
/* Platz für eigene Musik (musik_geraet.grenze): Anzeige unter der Titelliste */
[data-mu-platz] .mu-platz { flex: 1; min-width: 0; }
[data-mu-platz] .mu-platz-zeile { display: block; color: var(--text-2); }
[data-mu-platz] .mu-balken { display: block; height: 6px; margin: 5px 0 8px; border-radius: 3px; background: var(--salbei-hell); overflow: hidden; }
[data-mu-platz] .mu-balken i { display: block; height: 100%; background: var(--salbei); }