/* Redweb-Player (05.11.2026): PLAY-Knopf in der Kopfleiste spielt zufaellige
   Songs aus dem Music HUB, die Leiste liegt am unteren Bildschirmrand.
   Verhalten: public/js/rw-player.js, Einbindung: templates/skelet/player/_rw_player.html.twig.
   Namensraum rwp- (Leiste) und rwtn__link--play / rwp-knopf (Knoepfe). */

/* ---------- PLAY-Knopf ---------- */
.rwtn__link--play { cursor: pointer; }
.rwtn__link--play .rwtn__play { margin-left: 6px; font-weight: 700; letter-spacing: .08em; }
.rwtn__link--play.rwp-spielt .rwtn__ico { color: #ff3b1f; }
.rwp-knopf { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; margin-left: auto; margin-right: 12px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: transparent; color: #fff;
  font: 700 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .08em; cursor: pointer; }
.rwp-knopf:hover, .rwp-knopf:focus-visible { border-color: #ff3b1f; background: rgba(255, 59, 31, .12); outline: none; }
.rwp-knopf.rwp-spielt { border-color: #ff3b1f; color: #ff3b1f; }

/* ---------- Leiste unten ---------- */
html.rwp-offen body { padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
.rwp[hidden], .rwp__bar [hidden] { display: none !important; }
.rwp__bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1060; box-sizing: border-box;
  display: flex; align-items: center; gap: 12px; min-height: 68px;
  padding: 10px max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: rgba(12, 12, 14, .97); border-top: 1px solid rgba(255, 59, 31, .5); box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
  color: #fff; font: 14px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; }
.rwp__bar *, .rwp__bar *::before, .rwp__bar *::after { box-sizing: border-box; }
.rwp__fort { position: absolute; left: 0; right: 0; top: -3px; height: 6px; cursor: pointer; background: transparent; }
.rwp__fort::before { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: rgba(255, 255, 255, .12); }
.rwp__fort i { position: absolute; left: 0; top: 2px; height: 2px; width: 0; background: #ff3b1f; }
.rwp__cover { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 6px; object-fit: cover; background: #26262b; display: grid; place-items: center; color: #ff3b1f; font-size: 18px; }
.rwp__info { flex: 1 1 auto; min-width: 0; }
.rwp__titel { display: block; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rwp__kuenstler { display: inline-block; max-width: 100%; color: #c4c4cc; font-size: 13px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
a.rwp__kuenstler:hover, a.rwp__kuenstler:focus-visible { color: #fff; text-decoration: underline; outline: none; }
.rwp__zeit { margin-left: 8px; color: #8b8b93; font-size: 12px; font-variant-numeric: tabular-nums; }
.rwp__steuer, .rwp__wege { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.rwp__btn, .rwp__weg { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; margin: 0;
  border: 1px solid transparent; border-radius: 50%; background: transparent; color: #e4e4e7; font-size: 15px; text-decoration: none; cursor: pointer; }
.rwp__btn:hover, .rwp__btn:focus-visible, .rwp__weg:hover, .rwp__weg:focus-visible { border-color: rgba(255, 59, 31, .7); color: #fff; outline: none; }
.rwp__btn--haupt { width: 46px; height: 46px; background: #ff3b1f; color: #fff; font-size: 17px; }
.rwp__btn--haupt:hover, .rwp__btn--haupt:focus-visible { background: #cc2200; border-color: #fff; }
.rwp__btn:disabled { opacity: .5; cursor: wait; }
.rwp__folgen { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; margin: 0;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: transparent; color: #fff;
  font: 700 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; }
.rwp__folgen[aria-pressed="true"] { background: #ff3b1f; border-color: #ff3b1f; }
.rwp__folgen:hover, .rwp__folgen:focus-visible { border-color: #ff3b1f; outline: none; color: #fff; }
.rwp__folgen:disabled { opacity: .6; cursor: wait; }
.rwp__meldung { position: absolute; right: 14px; bottom: calc(100% + 8px); padding: 7px 12px; border-radius: 8px; background: #1c1c20; border: 1px solid rgba(255, 255, 255, .14); color: #e4e4e7; font-size: 12.5px; }
.rwp__meldung[hidden] { display: none; }
.rwp__zu { width: 36px; height: 36px; font-size: 14px; color: #8b8b93; }

/* ---------- Lasche: Leiste einklappen / einblenden ----------
   Eingeklappt schiebt sich die Leiste nach unten, sichtbar bleiben nur der
   Verlaufsbalken (6px Streifen) und die Lasche darueber. Zustand: rw-player.js einklappen(). */
.rwp__bar { transition: transform .28s ease; }
.rwp__lasche { position: absolute; left: 50%; bottom: 100%; z-index: 1; display: grid; place-items: center;
  width: 58px; height: 22px; margin: 0 0 0 -29px; padding: 0;
  border: 1px solid rgba(255, 59, 31, .5); border-bottom: 0; border-radius: 10px 10px 0 0;
  background: rgba(12, 12, 14, .97); color: #c4c4cc; font-size: 12px; line-height: 1; cursor: pointer;
  box-shadow: 0 -6px 14px rgba(0, 0, 0, .35); }
.rwp__lasche:hover, .rwp__lasche:focus-visible { color: #fff; border-color: #ff3b1f; outline: none; }
.rwp__lasche:focus-visible { box-shadow: 0 0 0 2px #ff3b1f; }
.rwp__bar--eingeklappt { transform: translateY(calc(100% - 6px)); box-shadow: none; }
html.rwp-offen.rwp-eingeklappt body { padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; }

@media (max-width: 760px) {
  .rwp__bar { flex-wrap: wrap; gap: 8px 10px; padding-top: 12px; }
  .rwp__info { flex-basis: calc(100% - 46px - 10px - 36px - 10px); }
  .rwp__zu { order: 2; }
  .rwp__steuer { order: 3; }
  .rwp__wege { order: 4; flex: 1 1 auto; justify-content: flex-end; }
  .rwp__folgen { order: 5; }
  .rwp__zeit { display: none; }
  html.rwp-offen body { padding-bottom: calc(128px + env(safe-area-inset-bottom)) !important; }
  html.rwp-offen.rwp-eingeklappt body { padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 380px) {
  .rwp__btn--zurueck { display: none; }
  .rwp__weg { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .rwp__fort i, .rwp__bar { transition: none; } }