/* Music archive: shared WaggUp reading controls */
.music-tools{position:relative;top:auto;right:auto;margin-left:auto;flex-shrink:0;z-index:2;display:flex;align-items:flex-start;gap:8px;font-family:Arial,Helvetica,sans-serif;font-size:14px}
.music-language{display:flex;align-items:center;background:#fff;border:1px solid #c7d6e6;border-radius:24px;padding:3px;box-shadow:0 2px 8px #10243b12}
.music-language button{border:0;background:transparent;color:#264260;padding:8px 10px;min-height:36px;min-width:38px;border-radius:20px;font-weight:700;cursor:pointer}
.music-language button[aria-pressed=true]{background:#0876d9;color:#fff}
.music-tools .reading-trigger{position:relative;font-size:14px}.music-tools .reading-trigger[hidden]{display:none}
.music-tools .reading-settings{position:relative;padding:0;margin:0;border:0;background:transparent}
.music-tools .reading-settings>summary{display:flex;align-items:center;gap:6px;cursor:pointer;min-height:44px;padding:9px 12px;border:1px solid #0876d9;border-radius:24px;background:#fff;color:#075eae;font-weight:600;list-style:none;box-shadow:0 2px 8px #10243b12}
.music-tools .reading-settings>summary::-webkit-details-marker{display:none}
.music-tools .reading-panel{position:absolute;right:0;top:calc(100% + 8px);display:grid;gap:8px;width:350px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 90px);overflow:auto;padding:18px;background:#fff;color:#101c35;border:1px solid #c7d6e6;border-radius:16px;box-shadow:0 12px 30px #101c3530;font-size:16px;line-height:1.4}
.music-tools .reading-settings:not([open])>.reading-panel{display:none}
.music-tools .reading-panel-heading,.music-tools .reading-size,.music-tools .reading-footer{display:flex;justify-content:space-between;align-items:center;gap:10px}
.music-tools .reading-panel select{width:100%;padding:9px;border:1px solid #a9bbd0;border-radius:8px;background:#fff;color:#101c35}
.music-tools .reading-panel fieldset{margin:0;padding:8px;border:1px solid #c7d6e6;border-radius:8px}
.music-tools .reading-panel button{min-height:40px;border:1px solid #9ab4d0;border-radius:8px;padding:7px 12px;background:#f3f8ff;color:#153b66;cursor:pointer}
.music-tools .reading-panel .reading-close{border:0;background:transparent;font-size:24px}
.music-tools .small-note{font-size:13px;color:#52647b;margin:3px 0}
.music-tools .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.music-tools :is(button,summary,select):focus-visible,body :is(a,button,input,select,textarea):focus-visible{outline:3px solid #0876d9;outline-offset:3px}
html[data-reading-size="125"]{font-size:125%}html[data-reading-size="150"]{font-size:150%}html[data-reading-size="175"]{font-size:175%}html[data-reading-size="200"]{font-size:200%}
html[data-reading-spacing="wide"] body{line-height:1.85;word-spacing:.18em;letter-spacing:.025em}
html[data-reading-font="arial"] body{font-family:Arial,Helvetica,sans-serif!important}
html[data-reading-theme="dark"] body{background:#111827!important;color:#f3f7ff!important}
html[data-reading-theme="dark"] :is(.container,main,.content,.topbar,.topnav,.login-container,.card,.box,section,article,form,table,td,th){background-color:#1c293c!important;color:#f3f7ff!important;border-color:#65748b!important}
html[data-reading-theme="dark"] :is(a,h1,h2,h3,p,label,span,li){color:#f3f7ff}
html[data-reading-theme="contrast"] body{background:#000!important;color:#ff0!important}
html[data-reading-theme="contrast"] :is(.container,main,.content,.topbar,.topnav,.login-container,.card,.box,section,article,form,table,td,th){background:#000!important;color:#ff0!important;border-color:#ff0!important}
html[data-reading-theme="contrast"] :is(a,h1,h2,h3,p,label,span,li){color:#ff0!important}
html:is([data-reading-theme="dark"],[data-reading-theme="contrast"]) :is(input,textarea,select){background:#101827!important;color:#fff!important;border:1px solid #ffdb70!important}
html:is([data-reading-theme="dark"],[data-reading-theme="contrast"]) .music-tools :is(.reading-panel,.reading-settings>summary,.music-language){background:#17243b!important;color:#fff!important;border-color:#9cc9ff!important}
html[data-reading-theme="contrast"] .music-tools :is(.reading-panel,.reading-settings>summary,.music-language){background:#000!important;color:#ff0!important;border-color:#ff0!important}
html:is([data-reading-theme="dark"],[data-reading-theme="contrast"]) .music-tools :is(button,select,legend,label,strong,p,output){color:inherit}
@media(max-width:700px){.music-tools{gap:4px}.music-tools .reading-settings>summary{padding:8px;font-size:13px}.music-tools .reading-panel{right:0}.topbar{padding-right:8px!important;gap:6px!important}.music-language button{min-width:34px;padding:7px 8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Controls remain part of the toolbar and scroll away with it. */
.topbar .music-tools{align-self:center}
@media(max-width:380px){.music-tools .reading-settings>summary{font-size:0}.music-tools .reading-settings>summary span{font-size:16px}.music-language button{min-width:32px;padding:6px}}

/* 2026-10-19: Leseansicht auf kleinen Bildschirmen viewport-zentriert.
   Unabhaengig vom Login-Flexlayout und der Position der Toolbar. */
.music-tools .reading-settings[open] { z-index: 100000; }
.music-tools .reading-settings[open] > .reading-panel {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  box-sizing: border-box !important;
  width: min(420px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  z-index: 100001 !important;
}
.music-tools .reading-panel *, .music-tools .reading-panel *::before,
.music-tools .reading-panel *::after { box-sizing: border-box; }
.music-tools .reading-panel select { min-width: 0; max-width: 100%; }
.music-tools .reading-panel button { width: auto; flex: 1 1 0; min-width: 0; }
.music-tools .reading-panel .reading-close { flex: 0 0 auto; width: 40px; }
.music-tools .reading-panel .reading-size output { flex: 0 0 auto; white-space: nowrap; text-align: center; }
.music-tools .reading-panel .reading-panel-heading { min-width: 0; }
.music-tools .reading-panel .reading-footer { flex-wrap: wrap; }
.music-tools .reading-panel .reading-footer button { flex: 1 1 120px; }
@media (max-width: 420px) {
 .music-tools .reading-settings[open] > .reading-panel { padding: 14px !important; gap: 8px; }
 .music-tools .reading-panel .reading-size { gap: 8px; }
 .music-tools .reading-panel .reading-size button { padding: 8px 6px; }
}