/* ROTHEN DB — Karte „Musik“ (Sonos): TabletMusik.razor, SonosSuche, SonosWarteschlange, SonosDurchsage, SonosSymbol.
   Entwurf „Musik – Variante D“ (662×758-Einzelkarte, Suche 1400×876), hier in der Dashboard-Bühne (1920er-Einheiten, Karte ca. 900×1050):
   Masse ca. ×1.3, Touch-Ziele ≥ 56 px. Eigene Klassen .ms-*, Farben über die Variablen --ms-* auf .ms-karte (Akzent = --fd-acc).
   Blätter (Raumwahl, Verbinden, ⋯, Konto, Haus, Durchsage) liegen IN der Karte (absolut, mit Schleier).
   Dunkelmodus am Ende dieser Datei (:is(.tb-wisch, .tb-ueber).dunkel, Variablen --dk-* aus tablet-dunkel.css). */

/* ───────────── Karte, Variablen ───────────── */
.hm-karte.ms-karte { position: relative; padding: 22px 26px 24px; gap: 18px;
    --ms-karte: #FFFFFF; --ms-fl: #F5F6F8; --ms-fl2: #EBEEF2; --ms-rand: #E3E8ED; --ms-text: #15202B; --ms-dez: #5B6875;
    --ms-acc: var(--fd-acc); --ms-accs: var(--fd-acc-soft); --ms-acct: var(--fd-acc); --ms-voll: var(--fd-acc);
    --ms-gruen: #15803D; --ms-warn: #B45309; --ms-warns: #FFF1DC; --ms-rot: #B42318; --ms-rot-bg: #FDE8E4;
    color: var(--ms-text); }
.ms-karte .ms-sym { flex: none; }
.ms-karte button { font-family: inherit; color: inherit; }
.ms-karte button:disabled { cursor: not-allowed; }
.ms-treffer { position: relative; }
.ms-treffer::after { content: ""; position: absolute; inset: -7px -3px; }   /* grösseres Touch-Ziel ohne grössere Fläche */
.ms-hinweis { font-size: 16px; font-weight: 600; color: var(--ms-dez); }
.ms-meldung { flex: none; padding: 10px 16px; border-radius: 16px; background: var(--ms-fl); color: var(--ms-dez); font-size: 17px; font-weight: 600; }
.ms-karte .hm-fehler { flex: none; }
.ms-label { font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-dez); }

/* Kopf: „Musik wählen“ */
.fd .ms-waehlen { height: 56px; padding: 0 20px; margin-left: auto; border-radius: 18px; border: 0; background: var(--ms-accs); color: var(--ms-acct);
                  font-size: 19px; font-weight: 800; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; white-space: nowrap; }
.fd .ms-waehlen:disabled { opacity: .4; }

/* Knöpfe allgemein */
.fd .ms-btn { height: 56px; padding: 0 20px; border-radius: 18px; border: 0; background: var(--ms-fl2); color: var(--ms-text); font-size: 18px; font-weight: 800;
              display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; white-space: nowrap; }
.fd .ms-btn.voll { background: var(--ms-voll); color: #fff; }
.fd .ms-btn.acc { background: var(--ms-accs); color: var(--ms-acct); }
.fd .ms-btn.rot { color: var(--ms-rot); }
.fd .ms-btn.rot.voll { background: var(--ms-rot); color: #fff; }
.fd .ms-btn:disabled { opacity: .4; }
.fd .ms-btn.rund { width: 56px; padding: 0; border-radius: 50%; }
.fd .ms-textknopf { height: 48px; padding: 0 4px; border: 0; background: transparent; color: var(--ms-acct); font-size: 18px; font-weight: 800;
                    display: inline-flex; align-items: center; gap: 3px; cursor: pointer; white-space: nowrap; }
.fd .ms-textknopf:disabled { opacity: .4; }

/* Avatar (Kürzel) */
.ms-av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
         font-size: 12px; font-weight: 800; letter-spacing: 0; background: #E9E1FB; color: #5B21B6; }
.ms-av.gross { width: 44px; height: 44px; font-size: 15px; }
.ms-av.klein { width: 26px; height: 26px; font-size: 11px; }

/* ───────────── Raum-Zeile: [+] [Raum ▾] [spielende Räume] ───────────── */
.ms-raumzeile-rahmen { position: relative; flex: none; }
.ms-ueber { position: relative; z-index: 6; }
.ms-raumzeile { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fd .ms-plus { width: 62px; height: 62px; flex: none; border-radius: 20px; border: 1.5px dashed var(--ms-dez); background: transparent; color: var(--ms-text);
               display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.fd .ms-plus.an { border: 2px solid var(--ms-acc); background: var(--ms-accs); color: var(--ms-acct); }
.fd .ms-raum { height: 62px; max-width: 46%; flex: none; padding: 0 14px 0 18px; border-radius: 20px; border: 2px solid var(--ms-acc); background: var(--ms-accs);
               color: var(--ms-acct); font-size: 24px; font-weight: 800; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; white-space: nowrap; min-width: 0; }
.fd .ms-raum.an { box-shadow: 0 0 0 3px var(--ms-karte), 0 0 0 5px var(--ms-acc); }
.ms-raum-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ms-schlafmarke { display: inline-flex; align-items: center; gap: 3px; height: 28px; padding: 0 9px; border-radius: 14px; background: var(--ms-karte);
                  color: var(--ms-acct); font-size: 15px; font-weight: 800; flex: none; }
.ms-wisch { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
            scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent);
            padding-right: 40px; }
.ms-wisch::-webkit-scrollbar { display: none; }
.fd .ms-pill { height: 56px; flex: none; padding: 0 18px; border-radius: 28px; border: 1.5px solid var(--ms-rand); background: var(--ms-karte); color: var(--ms-text);
               font-size: 18px; font-weight: 700; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; white-space: nowrap; }
.ms-pill .ms-schlafmarke { background: var(--ms-fl2); height: 26px; font-size: 14px; }
.ms-still-text { font-size: 17px; font-weight: 600; color: var(--ms-dez); white-space: nowrap; padding-left: 6px; }

/* ───────────── Jetzt läuft ───────────── */
.ms-jetzt { position: relative; flex: none; border: 1.5px solid var(--ms-rand); border-radius: 26px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.fd .ms-mehr-knopf { position: absolute; top: 12px; right: 12px; width: 56px; height: 56px; border-radius: 18px; border: 1.5px solid var(--ms-rand); background: var(--ms-karte);
                     color: var(--ms-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.fd .ms-mehr-knopf.an { border: 2px solid var(--ms-acc); background: var(--ms-accs); color: var(--ms-acct); }
.ms-jetzt-oben { display: flex; gap: 18px; align-items: center; }
.ms-cover { width: 120px; height: 120px; flex: none; border-radius: 18px; background: var(--ms-accs); color: var(--ms-acc); overflow: hidden;
            display: flex; align-items: center; justify-content: center; }
.ms-cover img, .ms-th img, .ms-kachel-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-jetzt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-right: 64px; }
.ms-titelzeile { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ms-titel { font-size: 29px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ms-interpret { font-size: 19px; font-weight: 600; color: var(--ms-dez); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 60px; }
.ms-quelle { font-size: 17px; font-weight: 600; color: var(--ms-dez); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-zeitzeile { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.ms-zeit { font-size: 15px; font-weight: 700; color: var(--ms-dez); font-variant-numeric: tabular-nums; min-width: 42px; }
.ms-zeit:last-child { text-align: right; }

/* Konto-Knopf „[CR] Spotify · Christof ▾“ */
.ms-konto-rahmen { position: relative; align-self: flex-start; display: inline-flex; }
.fd .ms-konto { height: 46px; padding: 0 12px 0 6px; border-radius: 23px; border: 1.5px solid var(--ms-rand); background: var(--ms-karte); color: var(--ms-text);
                font-size: 17px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
.fd .ms-konto.gross { height: 56px; border-radius: 20px; padding: 0 14px 0 8px; font-size: 18px; font-weight: 800; }
.fd .ms-konto.an { border: 2px solid var(--ms-acc); background: var(--ms-accs); color: var(--ms-acct); }
.fd .ms-konto:disabled { opacity: .45; }
.ms-konto small { font-size: inherit; font-weight: 700; color: var(--ms-dez); }

/* Fortschritt (Spulen) und Lautstärke: eigene, dünne Regler mit grossem Griff */
.ms-karte input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; margin: 0; height: 44px; touch-action: none; min-width: 0; cursor: pointer; }
.ms-karte input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ms-acc) var(--wert, 0%), var(--ms-fl2) var(--wert, 0%)); }
.ms-karte input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--ms-acc); border: 0; }
.ms-karte input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--ms-fl2); }
.ms-karte input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ms-acc); }
.ms-karte input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--ms-acc); border: 0; }
.ms-karte input[type=range]:disabled { opacity: .45; cursor: not-allowed; }
.ms-fortschritt { flex: 1; }

/* Bedienreihe */
.ms-bedien { display: flex; align-items: center; gap: 6px; }
.fd .ms-st { width: 60px; height: 60px; flex: none; border-radius: 50%; border: 0; background: transparent; color: var(--ms-text); padding: 0;
             display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.fd .ms-st.mod { color: var(--ms-dez); }
.fd .ms-st.mod.an { color: var(--ms-acc); }
.ms-st.mod.an::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--ms-acc); }
.fd .ms-st:disabled { opacity: .35; }
.fd .ms-pp { width: 80px; height: 80px; flex: none; border-radius: 50%; border: 0; background: var(--ms-voll); color: #fff; padding: 0;
             display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.fd .ms-pp:disabled { opacity: .35; }
.ms-trenner { width: 1.5px; height: 32px; background: var(--ms-rand); flex: none; margin: 0 8px; }
.ms-laut-ico { color: var(--ms-dez); }
.ms-laut { flex: 1; }
.ms-laut-wert { width: 38px; flex: none; text-align: right; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Status-Pillen (nur wenn aktiv) */
.ms-status { display: flex; gap: 8px; flex-wrap: wrap; }
.fd .ms-spill { height: 42px; padding: 0 14px; border-radius: 21px; border: 0; background: var(--ms-accs); color: var(--ms-acct); font-size: 17px; font-weight: 800;
                display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; }
.fd .ms-spill.warn { background: var(--ms-warns); color: var(--ms-warn); }

/* ───────────── Als Nächstes ───────────── */
.ms-naechstes { position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.fd .ms-mehr { align-self: flex-start; padding-left: 14px; color: var(--ms-dez); }
.ms-abschnitt { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.ms-abschnitt b { font-size: 21px; font-weight: 800; }
.ms-abschnitt > span { flex: 1; font-size: 17px; font-weight: 600; color: var(--ms-dez); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd .ms-zeile { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 6px 10px 6px 6px; border-radius: 18px; border: 0; background: transparent;
                color: var(--ms-text); text-align: left; cursor: pointer; width: 100%; }
.fd .ms-zeile:disabled { cursor: default; }
.ms-zeile.jetzt, .ms-wz-zeile.jetzt { background: var(--ms-accs); }
.ms-th { width: 52px; height: 52px; flex: none; border-radius: 10px; overflow: hidden; background: var(--ms-fl2); color: var(--ms-dez);
         display: flex; align-items: center; justify-content: center; }
.ms-zt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ms-zt b { font-size: 19px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-zt span { font-size: 16px; font-weight: 600; color: var(--ms-dez); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-dauer { flex: none; font-size: 17px; font-weight: 700; color: var(--ms-dez); font-variant-numeric: tabular-nums; }
.ms-mini { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 800; color: var(--ms-dez); flex: none; }

/* ───────────── Stiller Raum gewählt ───────────── */
.ms-leer { flex: none; border: 1.5px dashed var(--ms-rand); border-radius: 26px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.ms-leer-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ms-leer-kopf > b { font-size: 25px; font-weight: 800; margin-right: auto; }
.fd .ms-start { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 12px 18px; border-radius: 20px; border: 0; background: var(--ms-fl);
                color: var(--ms-text); text-align: left; cursor: pointer; }
.fd .ms-start:disabled { opacity: .45; }
.ms-start-ico { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex: none; background: var(--ms-fl2); color: var(--ms-text); }
.ms-start-ico.voll { background: var(--ms-voll); color: #fff; }
.ms-start-ico.acc { background: var(--ms-accs); color: var(--ms-acc); }
.ms-start-text { flex: 1; min-width: 0; }
.ms-start-text b { display: block; font-size: 21px; font-weight: 800; }
.ms-start-text span { display: block; font-size: 17px; font-weight: 600; color: var(--ms-dez); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-start > .ms-sym:last-child { color: var(--ms-dez); }
.ms-favs4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

/* Kacheln (Favoriten, Alben, Playlists) */
.fd .ms-kachel { display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: transparent; color: var(--ms-text); text-align: left; cursor: pointer; min-width: 0; }
.fd .ms-kachel:disabled { opacity: .45; }
.ms-rk-rahmen { position: relative; display: flex; min-width: 0; }
.ms-rk-rahmen > .ms-rk { flex: 1; min-width: 0; padding-right: 108px; }
.fd .ms-rk-dazu { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); height: 48px; padding: 0 14px 0 10px; border-radius: 14px;
                  border: 1.5px solid var(--ms-acc); background: var(--ms-karte); color: var(--ms-acct); font-size: 16px; font-weight: 800;
                  display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.fd .ms-rk-dazu:disabled { opacity: .4; cursor: default; }
.ms-rl-liste { display: flex; flex-direction: column; gap: 6px; }
.ms-rl-zeile { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 0 6px; border-bottom: 1px solid var(--ms-rand); }
.ms-rl-zeile:last-child { border-bottom: 0; }
.ms-rl-zeile > b:first-child { width: 220px; flex: none; font-size: 20px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-rl-zeile .ms-laut { flex: 1; min-width: 0; }
.ms-ziel-gruppe > span.ms-radioquelle { font-size: 19px; letter-spacing: 0; text-transform: none; padding-left: 14px; }
.ms-kachel-rahmen { position: relative; min-width: 0; display: flex; }
.ms-kachel-rahmen > .ms-kachel { flex: 1; }
.fd .ms-stern { position: absolute; top: 8px; right: 8px; width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0;
                background: rgba(255, 255, 255, .92); color: var(--ms-dez); display: flex; align-items: center; justify-content: center;
                box-shadow: 0 2px 8px rgba(21, 32, 43, .18); cursor: pointer; }
.fd .ms-stern.an { color: #D99A00; }
.fd .ms-stern.weg { color: #A8322A; }
.fd .ms-kachel-neu .ms-kachel-bild { background: transparent; border: 2px dashed var(--ms-rand); color: var(--ms-dez); }
.ms-kacheln.ms-fav-kacheln { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ms-fav-kacheln .ms-kachel b { font-size: 16px; }
.ms-fav-kacheln .ms-kachel-sub { font-size: 13px; }
.ms-fav-kacheln .ms-kachel-bild { border-radius: 14px; }
.ms-fav-kacheln .ms-stern { width: 44px; height: 44px; top: 6px; right: 6px; }
.ms-radioleiste .ms-fav-kacheln { overflow: hidden; }
span.ms-konto.ms-radioquelle.fest { display: inline-flex; align-items: center; cursor: default; opacity: .6; color: var(--ms-dez); }
.fd .ms-st.ms-laut-pm { width: 52px; height: 52px; background: var(--ms-fl); }
.fd .ms-kachel.an .ms-kachel-bild { box-shadow: 0 0 0 3px var(--ms-karte), 0 0 0 5px var(--ms-acc); }
.fd .ms-kachel.an:disabled { opacity: 1; }
.ms-fav-inhalt { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; display: flex; flex-direction: column; gap: 12px; }
.fd .ms-konto.ms-radioquelle { gap: 10px; color: var(--ms-acct); }
span.ms-konto.ms-radioquelle { display: inline-flex; align-items: center; cursor: default; }
.ms-kachel-bild { aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--ms-accs); color: var(--ms-acc); display: flex; align-items: center; justify-content: center; }
.ms-kachel-bild.rund { border-radius: 50%; }
.ms-kachel b { font-size: 16px; font-weight: 800; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ms-kachel span.ms-kachel-sub { font-size: 15px; font-weight: 600; color: var(--ms-dez); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ───────────── Haus-Leiste / Nachtsperre-Band ───────────── */
.ms-haus { flex: none; margin-top: auto; display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 24px; background: var(--ms-fl); }
.fd .ms-haus-knopf { height: 56px; padding: 0 14px 0 16px; border-radius: 17px; border: 0; background: var(--ms-karte); color: var(--ms-text); font-size: 19px; font-weight: 800;
                     display: inline-flex; align-items: center; gap: 9px; cursor: pointer; white-space: nowrap; box-shadow: 0 1px 2px rgba(21,32,43,.06); }
.ms-haus-luecke { flex: 1; }
.fd .ms-hi { width: 62px; height: 56px; flex: none; border-radius: 17px; border: 0; background: transparent; color: var(--ms-text); padding: 0;
             display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.fd .ms-hi:active { background: var(--ms-karte); }
.fd .ms-sperrpill { height: 56px; padding: 0 14px; border-radius: 17px; border: 0; background: var(--ms-warns); color: var(--ms-warn); font-size: 18px; font-weight: 800;
                    display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; }
.ms-nachtband { flex: none; margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 24px; background: #2E1A38; color: #F6EEFA; }
.ms-nachtband b { display: inline-flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 800; white-space: nowrap; }
.ms-nachtband span { flex: 1; font-size: 17px; font-weight: 600; opacity: .85; }
.fd .ms-nachtband .ms-nacht-ico { width: 56px; height: 56px; flex: none; padding: 0; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .1); color: #F6EEFA;
                                   display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
/* Pegel „spielt“: Balken bewegen sich */
@keyframes ms-eq { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.35); } }
.ms-sym .ms-eq1, .ms-sym .ms-eq2, .ms-sym .ms-eq3 { transform-box: fill-box; transform-origin: 50% 100%; animation: ms-eq 1s ease-in-out infinite; }
.ms-sym .ms-eq2 { animation-duration: .8s; animation-delay: -.3s; }
.ms-sym .ms-eq3 { animation-duration: 1.2s; animation-delay: -.6s; }
@media (prefers-reduced-motion: reduce) { .ms-sym .ms-eq1, .ms-sym .ms-eq2, .ms-sym .ms-eq3 { animation: none; } }
.fd .ms-nachtband button { height: 56px; padding: 0 18px; border-radius: 17px; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 18px; font-weight: 800; cursor: pointer; white-space: nowrap; }

/* ───────────── Blätter ───────────── */
.ms-schleier { position: absolute; inset: 0; z-index: 5; background: rgba(15,20,26,.38); }
.ms-blatt { position: absolute; z-index: 6; background: var(--ms-karte); color: var(--ms-text); box-shadow: 0 24px 64px rgba(0,0,0,.25);
            display: flex; flex-direction: column; gap: 18px; padding: 18px 22px 22px; border-radius: 28px; overflow-y: auto; overscroll-behavior-y: contain; }
.ms-blatt.unter { left: 0; right: 0; top: calc(100% + 8px); max-height: 790px; }
.ms-blatt.konto { left: 0; top: calc(100% + 8px); width: 580px; gap: 8px; padding: 16px 18px 18px; max-height: 700px; }
.ms-blatt.gross { left: 0; right: 0; bottom: 0; top: 84px; border-radius: 30px 30px 26px 26px; padding: 14px 26px 24px; }
.ms-griffchen { width: 56px; height: 6px; border-radius: 3px; background: var(--ms-rand); align-self: center; flex: none; }
.ms-blatt-kopf { display: flex; align-items: center; gap: 14px; }
.ms-blatt-kopf .fd-k-ico { flex: none; }
.ms-blatt-titel { flex: 1; min-width: 0; }
.ms-blatt-titel b { display: block; font-size: 25px; font-weight: 800; }
.ms-blatt-titel span { display: block; font-size: 17px; font-weight: 600; color: var(--ms-dez); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-linie { height: 1.5px; background: var(--ms-rand); flex: none; }
.ms-fuss { display: flex; align-items: center; gap: 10px; }
.ms-fuss > span { flex: 1; font-size: 16px; font-weight: 600; color: var(--ms-dez); }
.ms-gruppe { display: flex; flex-direction: column; gap: 10px; }
.ms-gruppe-kopf { display: flex; align-items: center; gap: 10px; }
.ms-gruppe-kopf b { flex: 1; font-size: 20px; font-weight: 800; }
.ms-gruppe-kopf > span { font-size: 18px; font-weight: 800; color: var(--ms-dez); white-space: nowrap; }
.ms-gruppe-kopf > span.acc { color: var(--ms-acct); }
.ms-gruppe-kopf > span.warn { color: var(--ms-warn); }

/* Segment (Sleep, Tasten) */
.ms-seg { display: flex; gap: 8px; }
.fd .ms-seg button { flex: 1; min-width: 0; height: 56px; border-radius: 16px; border: 2px solid var(--ms-rand); background: var(--ms-karte); color: var(--ms-text);
                     font-size: 19px; font-weight: 800; cursor: pointer; white-space: nowrap; padding: 0 6px; }
.fd .ms-seg button.an { border-color: var(--ms-acc); background: var(--ms-accs); color: var(--ms-acct); }
.fd .ms-seg button:disabled { opacity: .45; }

/* Auswahl-Chips (Mehrfachwahl) */
.ms-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fd .ms-wahl { height: 52px; padding: 0 16px; border-radius: 26px; border: 2px solid var(--ms-rand); background: var(--ms-karte); color: var(--ms-text); font-size: 18px; font-weight: 700;
               display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; }
.fd .ms-wahl.an { border-color: var(--ms-acc); background: var(--ms-accs); color: var(--ms-acct); }
.fd .ms-wahl.gestrichelt { border-style: dashed; color: var(--ms-dez); }
.fd .ms-wahl:disabled { opacity: .45; }

/* Raumwahl nach Stock */
.ms-etg { display: flex; flex-direction: column; gap: 10px; }
.ms-etg + .ms-etg { border-top: 1.5px solid var(--ms-rand); padding-top: 16px; }
.ms-etg-kopf { display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 800; }
.ms-etg-kopf span { font-size: 16px; font-weight: 700; color: var(--ms-dez); }
.ms-rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fd .ms-rk { display: flex; align-items: center; gap: 9px; min-height: 66px; padding: 6px 14px; border-radius: 17px; border: 2px solid transparent; background: var(--ms-fl);
             color: var(--ms-text); text-align: left; cursor: pointer; min-width: 0; }
.ms-rk-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ms-rk-text b { font-size: 19px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-rk-text span { font-size: 15px; font-weight: 700; color: var(--ms-dez); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-rk.still .ms-rk-text b { font-weight: 700; color: var(--ms-dez); }
.fd .ms-rk.spielt { background: var(--ms-karte); border-color: var(--ms-rand); }
.fd .ms-rk.an { border-color: var(--ms-acc); background: var(--ms-accs); }
.ms-rk.an .ms-rk-text b { color: var(--ms-acct); }
.ms-rk > .ms-sym:last-child { color: var(--ms-dez); }
.ms-rk-konto { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 14px; font-weight: 700; color: var(--ms-dez); }

/* Verbinden: Zeilen der spielenden Räume */
.ms-vz { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 18px; background: var(--ms-fl); }
.ms-vz .ms-btn { height: 56px; padding: 0 16px; font-size: 17px; background: var(--ms-karte); }

/* Konto-Liste */
.ms-konto-kopf { display: flex; align-items: baseline; gap: 10px; padding: 0 4px 6px; }
.ms-konto-kopf b { flex: 1; font-size: 21px; font-weight: 800; }
.ms-konto-kopf span { font-size: 15px; font-weight: 600; color: var(--ms-dez); }
.fd .ms-kz { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 10px 14px;
             border-radius: 18px; border: 2px solid transparent; background: var(--ms-fl); color: var(--ms-text); text-align: left; cursor: pointer; }
.fd .ms-kz.an { border-color: var(--ms-acc); background: var(--ms-accs); }
.fd .ms-kz:disabled { opacity: .45; }
.ms-kz b { display: block; font-size: 20px; font-weight: 800; }
.ms-kz span span { font-size: 16px; font-weight: 600; color: var(--ms-dez); }
.ms-kz span span.warn { color: var(--ms-warn); font-weight: 700; }
.ms-kz > .ms-sym { color: var(--ms-acct); }
.ms-konto-fuss { font-size: 15px; font-weight: 600; color: var(--ms-dez); padding: 6px 4px 0; }

/* Wecker-Zeilen im ⋯-Blatt */
.ms-wz { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 18px; background: var(--ms-fl); }
.ms-wz > b { font-size: 29px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ms-wz.aus > b, .ms-wz.aus .ms-zt b { color: var(--ms-dez); }
.fd .ms-sw { position: relative; width: 72px; height: 44px; flex: none; border-radius: 999px; border: 0; background: var(--ms-rand); cursor: pointer; padding: 0; }
.ms-sw span { position: absolute; top: 5px; left: 5px; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.fd .ms-sw.an { background: var(--ms-voll); }
.ms-sw.an span { left: 33px; }

/* Haus-Blatt */
.ms-ha-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ms-ha { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 16px 18px; border-radius: 20px; border: 0; background: var(--ms-fl);
         color: var(--ms-text); text-align: left; min-width: 0; }
.fd button.ms-ha { cursor: pointer; }
.fd button.ms-ha:disabled { opacity: .45; }
.ms-ha.breit { grid-column: span 2; }
.ms-ha > .ms-sym { color: var(--ms-acc); margin-bottom: 2px; }
.ms-ha b { font-size: 20px; font-weight: 800; }
.ms-ha > span { font-size: 16px; font-weight: 600; color: var(--ms-dez); }
.ms-ha-knoepfe { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.fd .ms-ha-knoepfe button { height: 52px; padding: 0 16px; border-radius: 14px; border: 0; background: var(--ms-karte); color: var(--ms-text); font-size: 17px; font-weight: 800; cursor: pointer; }
.fd .ms-ha-knoepfe button:disabled { opacity: .45; }
.ms-laeuft { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--ms-fl); }
.fd .ms-laeuft.ms-zeile { background: var(--ms-fl); padding: 8px 14px; }
.ms-leer-kopf .ms-blatt.konto { left: auto; right: 0; }

/* Durchsage */
.fd .ms-text { resize: none; width: 100%; border: 0; border-radius: 20px; background: var(--ms-fl); color: var(--ms-text); font: inherit; font-size: 24px; font-weight: 700;
               padding: 14px 18px; line-height: 1.35; outline-color: var(--ms-acc); }
.ms-stock-zeile { display: flex; gap: 12px; align-items: baseline; }
.ms-stock-zeile > span { width: 70px; flex: none; font-size: 15px; font-weight: 800; color: var(--ms-dez); }
.ms-stock-zeile .ms-chips { flex: 1; }
.ms-regler-zeile { display: flex; align-items: center; gap: 12px; }
.ms-regler-zeile input { flex: 1; }
.ms-regler-zeile b { width: 36px; text-align: right; font-size: 20px; font-weight: 800; }

/* ───────────── Ganze Seite (Suche, Warteschlange) ───────────── */
.hm-raster:has(> .ms-voll) > .hm-karte:not(.ms-karte) { display: none; }
.hm-karte.ms-karte.ms-voll { grid-column: 1 / -1; }
.hm-karte.ms-karte.ms-suche-seite { background: transparent; box-shadow: none; padding: 0; }

/* Suche */
.ms-suche { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.ms-suche-kopf { flex: none; display: flex; align-items: center; gap: 16px; }
.fd .ms-zurueck { height: 64px; padding: 0 20px 0 12px; border-radius: 20px; border: 0; background: transparent; color: var(--ms-text); font-size: 22px; font-weight: 800;
                  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ms-sf { flex: 1; display: flex; align-items: center; gap: 14px; height: 72px; padding: 0 10px 0 22px; border-radius: 22px; background: var(--ms-karte);
         box-shadow: 0 1px 2px rgba(21,32,43,.06); color: var(--ms-dez); }
.fd .ms-sf input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font: inherit; font-size: 28px; font-weight: 700; color: var(--ms-text); }
.ms-sf input::-webkit-search-cancel-button { display: none; }
.ms-ziel { flex: none; display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-radius: 22px; background: var(--ms-accs); position: relative; }
.ms-ziel-gruppe { display: flex; flex-direction: column; gap: 4px; position: relative; }
.ms-ziel-gruppe > span { font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-acct); padding-left: 2px; }
.ms-ziel-raum { display: flex; gap: 8px; }
.ms-ziel-raum .ms-plus { width: 56px; height: 56px; background: var(--ms-karte); }
.ms-ziel-raum .ms-raum { height: 56px; font-size: 21px; background: var(--ms-karte); max-width: 420px; }
.ms-ziel-trenner { width: 1.5px; align-self: stretch; background: color-mix(in srgb, var(--ms-acc) 22%, transparent); margin: 0 4px; }
.ms-ziel-cover { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex: none; background: var(--ms-karte); color: var(--ms-acc); display: flex; align-items: center; justify-content: center; }
.ms-ziel-text { flex: 1; min-width: 0; }
.ms-ziel-text b { display: block; font-size: 19px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-ziel-text span { display: block; font-size: 16px; font-weight: 600; color: var(--ms-dez); }
.ms-ziel .ms-blatt.unter { right: auto; width: 1120px; }
.ms-treffer-feld { flex: 1; min-height: 0; background: var(--ms-karte); border-radius: 26px; padding: 6px 30px 24px; display: flex; flex-direction: column; gap: 18px;
                   box-shadow: 0 1px 2px rgba(21,32,43,.05); }
.ms-reiter { flex: none; display: flex; gap: 28px; border-bottom: 1.5px solid var(--ms-rand); overflow-x: auto; scrollbar-width: none; }
.fd .ms-reiter button { height: 58px; padding: 0; border: 0; border-bottom: 3px solid transparent; background: transparent; font-size: 19px; font-weight: 700; color: var(--ms-dez);
                        cursor: pointer; white-space: nowrap; }
.fd .ms-reiter button.an { color: var(--ms-acct); border-bottom-color: var(--ms-acc); }
.ms-ergebnis { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
.ms-ergebnis-zwei { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.ms-spalte { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ms-bester { display: flex; align-items: center; gap: 20px; }
.ms-bester-bild { width: 112px; height: 112px; flex: none; border-radius: 50%; overflow: hidden; background: var(--ms-accs); color: var(--ms-acc); display: flex; align-items: center; justify-content: center; }
.ms-bester-bild.eckig { border-radius: 16px; }
.ms-bester-bild img { width: 100%; height: 100%; object-fit: cover; }
.ms-bester-text { flex: 1; min-width: 0; }
.ms-bester-text b { display: block; font-size: 32px; font-weight: 800; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ms-tz { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 8px 6px; border-bottom: 1.5px solid var(--ms-rand); }
.ms-tz:last-child { border-bottom: 0; }
.ms-tz .ms-th { width: 56px; height: 56px; }
.ms-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ms-kacheln.breit { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.ms-leer-naechstes { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 18px; background: var(--ms-fl); font-size: 17px; color: var(--ms-dez); }
.ms-leer-naechstes > span { flex: 1; }
.ms-leerhinweis { padding: 30px 0; text-align: center; font-size: 19px; font-weight: 600; color: var(--ms-dez); }

/* Warteschlange (Karte ganz) */
.ms-wz-mini { flex: none; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 22px; border: 1.5px solid var(--ms-rand); }
.ms-wz-mini .ms-th { width: 72px; height: 72px; border-radius: 14px; }
.ms-wz-mini .ms-pp { width: 68px; height: 68px; }
.ms-wz-kopf { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ms-wz-kopf .ms-blatt-titel { min-width: 260px; }
.ms-wz-liste { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; display: flex; flex-direction: column; gap: 2px; }
.ms-wz-zeile { display: flex; align-items: center; gap: 12px; border-radius: 18px; padding-right: 4px; }
.ms-wz-zeile.gespielt { opacity: .55; }
.ms-wz-zeile .ms-zeile { flex: 1; min-width: 0; }
.fd .ms-griff { width: 52px; height: 60px; flex: none; border: 0; background: transparent; color: var(--ms-dez); padding: 0;
                display: flex; align-items: center; justify-content: center; touch-action: none; cursor: grab; }
.fd .ms-griff:disabled { opacity: .3; cursor: default; }
.ms-wz-zeile.zieht { position: relative; z-index: 2; background: var(--ms-karte, #fff); box-shadow: 0 10px 28px rgba(21, 32, 43, .22); transition: none; }
.ms-wz-zeile.zieht .ms-griff { color: var(--ms-acc); cursor: grabbing; }
.ms-wz-liste.zieht-aktiv .ms-wz-zeile:not(.zieht) { transition: transform .15s; }
.ms-wz-aktionen { display: flex; gap: 8px; padding: 0 0 8px 72px; flex-wrap: wrap; }
.ms-wz-aktionen .ms-btn { height: 52px; font-size: 17px; }
.ms-wz-fuss { flex: none; display: flex; gap: 10px; }
.ms-wz-fuss .ms-btn { flex: 1; }
.ms-wz-fuss .ms-btn.rot { flex: none; }
.ms-frage { left: 60px; right: 60px; bottom: 110px; }
.ms-frage-kopf { display: flex; gap: 14px; align-items: flex-start; }
.ms-frage-ico { width: 56px; height: 56px; border-radius: 16px; background: var(--ms-rot-bg); color: var(--ms-rot); display: flex; align-items: center; justify-content: center; flex: none; }
.ms-frage-kopf b { display: block; font-size: 24px; font-weight: 800; }
.ms-frage-kopf span { display: block; font-size: 17px; font-weight: 600; color: var(--ms-dez); }
.fd .ms-feld { width: 100%; height: 60px; padding: 0 18px; border-radius: 16px; border: 1.5px solid var(--ms-rand); background: var(--ms-karte); color: var(--ms-text);
               font: inherit; font-size: 21px; font-weight: 700; outline-color: var(--ms-acc); }

/* ═════════════ Dunkelmodus ═════════════ */
:is(.tb-wisch, .tb-ueber).dunkel .hm-karte.ms-karte {
    --ms-karte: var(--dk-karte); --ms-fl: var(--dk-flaeche); --ms-fl2: var(--dk-flaeche2); --ms-rand: #2C3640; --ms-text: var(--dk-text); --ms-dez: #9DAAB6;
    --ms-acc: #C9A0DC; --ms-accs: #3A2647; --ms-acct: #EBD8F5; --ms-voll: var(--dk-voll);
    --ms-gruen: #6FD39A; --ms-warn: #F2B45A; --ms-warns: #3A2A12; --ms-rot: var(--dk-fehler); --ms-rot-bg: var(--dk-fehler-bg); }
:is(.tb-wisch, .tb-ueber).dunkel .ms-karte .fd-k-ico.musik { background: var(--ms-accs); color: var(--ms-acc); }
:is(.tb-wisch, .tb-ueber).dunkel .ms-karte input[type=range] { color-scheme: dark; }
:is(.tb-wisch, .tb-ueber).dunkel .ms-schleier { background: rgba(0,0,0,.5); }
:is(.tb-wisch, .tb-ueber).dunkel .ms-blatt { box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07); }
:is(.tb-wisch, .tb-ueber).dunkel .fd .ms-btn.voll, :is(.tb-wisch, .tb-ueber).dunkel .fd .ms-pp { color: #fff; }
:is(.tb-wisch, .tb-ueber).dunkel .fd .ms-haus-knopf { box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
:is(.tb-wisch, .tb-ueber).dunkel .ms-nachtband { background: #2A1834; box-shadow: 0 0 0 1px rgba(201,160,220,.18); }
:is(.tb-wisch, .tb-ueber).dunkel .fd .ms-text, :is(.tb-wisch, .tb-ueber).dunkel .fd .ms-feld { color-scheme: dark; }
:is(.tb-wisch, .tb-ueber).dunkel .fd-karte.ms-karte.ms-suche-seite { background: transparent; box-shadow: none; }
:is(.tb-wisch, .tb-ueber).dunkel .ms-sf, :is(.tb-wisch, .tb-ueber).dunkel .ms-treffer-feld { box-shadow: var(--dk-ring); }
:is(.tb-wisch, .tb-ueber).dunkel .ms-av { filter: saturate(.85) brightness(.95); }