/* Meldo Bedienmuster — die Arten.
 *
 * Je Art ein Block: zuerst der kanonische Name, danach alle Altnamen
 * aus den Meldo-Plugins, die diese Art meinen. Ein Altname steht in
 * GENAU EINER Art — steht er in zweien, ist das ein Fehler und das
 * Prüfskript meldet ihn.
 *
 * Werte kommen aus tokens.css. Wer eine Form ändern will, ändert sie
 * DORT, nicht hier.
 *
 * «html body» und «!important», weil manche Plugin-Stylesheets per
 * Preload nachgeladen werden und die Reihenfolge nicht feststeht.
 *
 * AUSSERHALB des Systems: Haupttabs (.meldo-tab-btn), Toolbar
 * (.meldo-settings-icon, .meldo-help-icon, .meldo-header-scanner,
 * .meldo-action-btn, .meldo-scanner-btn) und die Bottom-Nav.
 * Spielflächen (Klaviatur, Griffbrett, Sequencer) folgen eigenen
 * Gesetzen — mit einer Auflage: Zustandsfarben aus der Palette.
 *
 * Neue Arbeit benutzt die kanonischen Namen (m-tun, m-reiter, …).
 * Die Altnamen sterben von selbst aus, ohne Stichtag.
 */

/* ==========================================================
   A · HANDLUNGEN
   ========================================================== */

/* --- A2 · Nebenaktion (Grundform aller Knöpfe) --- */
body .m-tun,
body .mq-switch,
body .mq-themen,
body .meldo-lernwelt-btn,
body .meldo-all-extra,
body .meldo-ka-oeffnen,
body .mka-wahl-btn,
body .mka-ueber-btn,
body .mka-gl-btn,
body .mka-save,
body .km-btn,
body .meldo-btn,
body .meldo-btn-secondary,
body .meldo-btn-outline,
body .meldo-section-btn,
body .meldo-paths-btn,
body .meldo-sticky-btn,
body .meldo-sticky-btn-new,
body .meldo-sticky-help,
body .meldo-drawer-action,
body .meldo-drawer-import-btn,
body .meldo-drawer-export,
body .meldo-add-lesson-btn,
body .meldo-insert-section-btn,
body .meldo-duplicate-preset,
body .meldo-edit-path,
body .meldo-export-path,
body .meldo-onb-btn,
body .meldo-tour-btn,
body .km-ende,
body .km-pop-e{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:44px !important;
  height:auto !important;
  width:auto !important;
  padding:0 1.1rem !important;
  border:1.5px solid var(--m-linie) !important;
  border-radius:10px !important;
  background:var(--m-weiss) !important;
  background-image:none !important;
  color:var(--m-tinte) !important;
  font-family:'Akko',sans-serif !important;
  font-weight:700 !important;
  font-size:.92rem !important;
  line-height:1 !important;
  text-decoration:none !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:var(--m-uebergang) !important;
  animation:none !important;
}
body .m-tun:hover,
body .mq-switch:hover,
body .mq-themen:hover,
body .meldo-lernwelt-btn:hover,
body .meldo-all-extra:hover,
body .meldo-ka-oeffnen:hover,
body .mka-wahl-btn:hover,
body .mka-ueber-btn:hover,
body .mka-gl-btn:hover,
body .mka-save:hover,
body .km-btn:hover,
body .meldo-btn:hover,
body .meldo-btn-secondary:hover,
body .meldo-btn-outline:hover,
body .meldo-section-btn:hover,
body .meldo-paths-btn:hover,
body .meldo-sticky-btn:hover,
body .meldo-sticky-btn-new:hover,
body .meldo-sticky-help:hover,
body .meldo-drawer-action:hover,
body .meldo-drawer-import-btn:hover,
body .meldo-drawer-export:hover,
body .meldo-add-lesson-btn:hover,
body .meldo-insert-section-btn:hover,
body .meldo-duplicate-preset:hover,
body .meldo-edit-path:hover,
body .meldo-export-path:hover,
body .meldo-onb-btn:hover,
body .meldo-tour-btn:hover,
body .km-ende:hover,
body .km-pop-e:hover:hover{
  border-color:var(--m-teal) !important;
  color:var(--m-teal) !important;
  background:var(--m-weiss) !important;
  transform:translateY(-1px) !important;
  box-shadow:none !important;
}
body .m-tun:active,
body .mq-switch:active,
body .meldo-lernwelt-btn:active,
body .meldo-btn:active{ transform:translateY(0) !important; }

body .m-tun:focus-visible,
body .mq-switch:focus-visible,
body .meldo-lernwelt-btn:focus-visible,
body .meldo-btn:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(61,124,133,.25) !important;
}

body .m-tun[disabled],
body .meldo-btn[disabled],
body .meldo-btn-secondary[disabled],
body .meldo-sticky-btn[disabled]{
  opacity:.45 !important; cursor:default !important;
  box-shadow:none !important; transform:none !important;
  border-color:var(--m-linie) !important; color:var(--m-tinte) !important;
}

/* --- A1 · Hauptaktion. Höchstens eine je Ansicht. --- */
body .m-tun--haupt,
body .mre-cta,
body .meldo-beta-go,
body .meldo-settings-save,
body .meldo-onb-btn-primary,
body .meldo-gate-btn,
body .meldo-access-open,
body .meldo-access-banner button,
body .meldo-pending-btn,
body .meldo-confirm-btn,
body .meldo-tour-btn-primary,
body .meldo-tour-btn-go,
body .meldo-songs-all-btn,
body .meldo-btn-primary,
body .meldo-sticky-btn-save,
body .meldo-drawer-new-btn,
body .meldo-tour-next,
body .meldo-lp-cta,
body .meldo-first-class-cta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:44px !important;
  height:auto !important;
  padding:0 1.1rem !important;
  border:1.5px solid var(--m-teal) !important;
  border-radius:10px !important;
  background:var(--m-teal) !important;
  background-image:none !important;
  color:var(--m-weiss) !important;
  font-family:'Akko',sans-serif !important;
  font-weight:700 !important;
  font-size:.92rem !important;
  line-height:1 !important;
  text-decoration:none !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:var(--m-uebergang) !important;
  animation:none !important;
}
body .m-tun--haupt:hover,
body .mre-cta:hover,
body .meldo-beta-go:hover,
body .meldo-settings-save:hover,
body .meldo-onb-btn-primary:hover,
body .meldo-gate-btn:hover,
body .meldo-access-open:hover,
body .meldo-access-banner button:hover,
body .meldo-pending-btn:hover,
body .meldo-confirm-btn:hover,
body .meldo-tour-btn-primary:hover,
body .meldo-tour-btn-go:hover,
body .meldo-songs-all-btn:hover,
body .meldo-btn-primary:hover,
body .meldo-sticky-btn-save:hover,
body .meldo-drawer-new-btn:hover,
body .meldo-tour-next:hover,
body .meldo-lp-cta:hover,
body .meldo-first-class-cta:hover{
  background:var(--m-teal-d) !important;
  border-color:var(--m-teal-d) !important;
  color:var(--m-weiss) !important;
  transform:translateY(-1px) !important;
  box-shadow:none !important;
}
body .m-tun--haupt[disabled],
body .meldo-gate-btn:disabled,
body .meldo-btn-primary:disabled{
  background:var(--m-teal) !important; border-color:var(--m-teal) !important;
  color:var(--m-weiss) !important; opacity:.45 !important;
  transform:none !important; box-shadow:none !important; cursor:default !important;
}

/* --- A3 · Stille Aktion --- */
body .m-tun--still,
body .meldo-beta-no,
body .mts-zu,
body .mslp-alle,
body .meldo-gate-later,
body .meldo-onb-btn-secondary,
body .meldo-tour-btn-skip,
body .meldo-tour-btn-ghost,
body .meldo-tour-prev,
body .meldo-tour-skip,
body .mwh-cta-btn,
body .meldo-all-close,
body .meldo-smart-search-more-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:44px !important;
  padding:0 .9rem !important;
  border:1.5px solid transparent !important;
  border-radius:10px !important;
  background:none !important;
  background-image:none !important;
  color:var(--m-schwach) !important;
  font-family:'Akko',sans-serif !important;
  font-weight:700 !important;
  font-size:.92rem !important;
  line-height:1 !important;
  text-decoration:none !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:var(--m-uebergang) !important;
}
body .m-tun--still:hover,
body .meldo-beta-no:hover,
body .mts-zu:hover,
body .mslp-alle:hover,
body .meldo-gate-later:hover,
body .meldo-onb-btn-secondary:hover,
body .meldo-tour-btn-skip:hover,
body .meldo-tour-btn-ghost:hover,
body .meldo-tour-prev:hover,
body .meldo-tour-skip:hover,
body .mwh-cta-btn:hover,
body .meldo-all-close:hover,
body .meldo-smart-search-more-btn:hover{
  background:none !important;
  border-color:transparent !important;
  color:var(--m-teal) !important;
  transform:none !important;
  text-decoration:none !important;
}

/* --- A4 · Symbolaktion. Quadratisch, sonst wie A2. --- */
body .m-tun--symbol,
body .meldo-banner-close,
body .meldo-settings-close,
body .meldo-pending-close,
body .meldo-smart-search-close,
body .mka-zu,
body .meldo-drawer-close,
body .meldo-import-dialog-close,
body .meldo-btn-icon,
body .meldo-btn-icon-edit,
body .meldo-btn-icon-export,
body .meldo-move-up,
body .meldo-move-down,
body .meldo-lesson-expand,
body .meldo-image-remove,
body .meldo-tour-sound-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:44px !important;
  min-height:44px !important;
  max-height:44px !important;
  padding:0 !important;
  flex:0 0 auto !important;
  border:1.5px solid var(--m-linie) !important;
  border-radius:10px !important;
  background:var(--m-weiss) !important;
  background-image:none !important;
  color:var(--m-tinte) !important;
  line-height:1 !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:var(--m-uebergang) !important;
  transform:none !important;
}
body .m-tun--symbol:hover,
body .meldo-banner-close:hover,
body .meldo-settings-close:hover,
body .meldo-pending-close:hover,
body .meldo-smart-search-close:hover,
body .mka-zu:hover,
body .meldo-drawer-close:hover,
body .meldo-import-dialog-close:hover,
body .meldo-btn-icon:hover,
body .meldo-btn-icon-edit:hover,
body .meldo-btn-icon-export:hover,
body .meldo-move-up:hover,
body .meldo-move-down:hover,
body .meldo-lesson-expand:hover,
body .meldo-image-remove:hover,
body .meldo-tour-sound-btn:hover{
  border-color:var(--m-teal) !important;
  color:var(--m-teal) !important;
  background:var(--m-weiss) !important;
  transform:translateY(-1px) !important;
}
body .m-tun--symbol svg,
body .meldo-settings-close svg,
body .meldo-smart-search-close svg,
body .meldo-btn-icon svg,
body .meldo-drawer-close svg{
  width:18px !important; height:18px !important;
  stroke:currentColor !important; display:block !important;
}

/* --- A4/Gefahr · einzige zugelassene Farbabweichung. Nur Löschen. --- */
body .m-tun--gefahr,
body .meldo-btn-icon-delete,
body .meldo-btn-danger,
body .meldo-section-remove,
body .meldo-lesson-remove,
body .meldo-delete-path,
body .meldo-delete-personal-path,
body .meldo-drawer-delete{
  border-color:var(--m-linie) !important;
  color:var(--m-gefahr) !important;
  background:var(--m-weiss) !important;
  background-image:none !important;
}
body .m-tun--gefahr:hover,
body .meldo-btn-icon-delete:hover,
body .meldo-btn-danger:hover,
body .meldo-section-remove:hover,
body .meldo-lesson-remove:hover,
body .meldo-delete-path:hover,
body .meldo-delete-personal-path:hover,
body .meldo-drawer-delete:hover{
  border-color:var(--m-gefahr) !important;
  background:var(--m-gefahr) !important;
  color:var(--m-weiss) !important;
}

/* --- A5 · Öffner. Volle Breite, Text links, Chevron rechts. --- */
/* A5 · «display» steht hier NICHT: .meldo-tt-bar ist am Schreibtisch
   ausgeblendet und erscheint erst in der Mobil-Abfrage. Wer das
   erzwingt, holt sie auf jeden Bildschirm. Darum nur für die
   Öffner, die immer sichtbar sind. */
body .m-oeffner,
body .meldo-cdd-trigger{ display:flex !important; }

body .m-oeffner,
body .meldo-tt-bar,
body .meldo-cdd-trigger{
  align-items:center !important;
  gap:11px !important;
  width:100% !important;
  min-height:52px !important;
  height:auto !important;
  padding:10px 14px !important;
  border:1.5px solid var(--m-linie) !important;
  border-radius:14px !important;
  background:var(--m-weiss) !important;
  background-image:none !important;
  color:var(--m-tinte) !important;
  font-family:'Akko',sans-serif !important;
  font-weight:700 !important;
  font-size:.92rem !important;
  line-height:1.25 !important;
  text-align:left !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:var(--m-uebergang) !important;
  -webkit-appearance:none !important; appearance:none !important;
}
body .m-oeffner:hover,
body .meldo-tt-bar:hover,
body .meldo-cdd-trigger:hover{
  border-color:var(--m-teal) !important;
  background:var(--m-weiss) !important;
  color:var(--m-tinte) !important;
  transform:none !important;
}
body .m-oeffner:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(61,124,133,.2) !important;
}

/* ==========================================================
   B1 · ANSICHTSWECHSLER — nie türkis gefüllt, nie Verlauf
   ========================================================== */
body .m-wechsel,
body .meldo-settings-toggle,
body .meldo-toggle-container,
body .meldo-drawer-tabs{
  display:inline-flex !important;
  gap:3px !important;
  padding:3px !important;
  background:var(--m-schiene) !important;
  background-image:none !important;
  border-radius:12px !important;
}
body .m-reiter,
body .meldo-toggle-btn,
body .meldo-settings-toggle-btn,
body .meldo-drawer-tab,
body .meldo-lg-subtab,
body .meldo-lp-tab{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  min-height:40px !important;
  padding:0 14px !important;
  border:none !important;
  border-radius:9px !important;
  background:none !important;
  background-image:none !important;
  color:var(--m-gedaempft) !important;
  font-family:'Akko',sans-serif !important;
  font-weight:700 !important;
  font-size:14px !important;
  line-height:1 !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:var(--m-uebergang) !important;
  transform:none !important;
}
body .m-reiter:hover,
body .meldo-toggle-btn:hover,
body .meldo-settings-toggle-btn:hover,
body .meldo-drawer-tab:hover,
body .meldo-lg-subtab:hover,
body .meldo-lp-tab:hover{
  background:none !important; color:var(--m-teal) !important; transform:none !important;
}
body .m-reiter.is-aktiv,
body .meldo-toggle-btn.active,
body .meldo-settings-toggle-btn.active,
body .meldo-drawer-tab.active,
body .meldo-lg-subtab.active,
body .meldo-lp-tab.active{
  background:var(--m-weiss) !important;
  background-image:none !important;
  color:var(--m-teal) !important;
  box-shadow:var(--m-karte) !important;
}
/* Der gleitende Verlauf-Slider entfällt — der aktive Reiter trägt die Form. */
body .meldo-toggle-slider{ display:none !important; }

/* ==========================================================
   C1 · WERTREIHE — Pillen, gewählter Wert türkis gefüllt
   ========================================================== */
body .m-reihe{ display:flex !important; flex-wrap:wrap !important; gap:6px !important; }

body .m-wert{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.45rem !important;
  min-height:44px !important;
  height:auto !important;
  width:auto !important;
  padding:0 .95rem !important;
  border:1.5px solid var(--m-linie) !important;
  border-radius:999px !important;
  background:var(--m-weiss) !important;
  background-image:none !important;
  color:var(--m-tinte) !important;
  font-family:'Akko',sans-serif !important;
  font-weight:700 !important;
  font-size:.9rem !important;
  line-height:1 !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:var(--m-uebergang) !important;
  transform:none !important;
}
body .m-wert:hover{
  border-color:var(--m-teal) !important; color:var(--m-teal) !important;
  transform:none !important; background:var(--m-weiss) !important;
}
body .m-wert.is-gewaehlt{
  background:var(--m-teal) !important;
  background-image:none !important;
  border-color:var(--m-teal) !important;
  color:var(--m-weiss) !important;
  box-shadow:none !important;
}

/* ==========================================================
   C2 · FELD
   ========================================================== */
body .m-feldblock{ display:flex !important; flex-direction:column !important; gap:.35rem !important; min-width:150px !important; }
body .m-etikett{
  font-family:'Akko',sans-serif !important; font-weight:600 !important;
  font-size:.68rem !important; letter-spacing:.06em !important;
  text-transform:uppercase !important; color:var(--m-gedaempft) !important;
}
body .m-feld,
body .meldo-settings-select,
body .meldo-select,
body .meldo-input,
body .meldo-textarea,
body .meldo-section-input,
body .meldo-due-date-input,
body .meldo-sticky-title-input{
  min-height:44px !important;
  padding:0 .75rem !important;
  border:1.5px solid var(--m-linie) !important;
  border-radius:10px !important;
  background-color:var(--m-weiss) !important;
  color:var(--m-tinte) !important;
  font-family:'Akko',sans-serif !important;
  font-weight:400 !important;
  font-size:.92rem !important;
  transition:var(--m-uebergang) !important;
  box-shadow:none !important;
}
body .meldo-textarea{ padding:.7rem .75rem !important; }
body .m-feld,
body .meldo-settings-select,
body .meldo-select{
  -webkit-appearance:none !important; appearance:none !important;
  cursor:pointer !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a5658' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right .7rem center !important;
  padding-right:2.1rem !important;
}
body .m-feld:hover,
body .meldo-settings-select:hover,
body .meldo-select:hover{ border-color:var(--m-teal) !important; }
body .m-feld:focus,
body .meldo-settings-select:focus,
body .meldo-select:focus,
body .meldo-input:focus,
body .meldo-textarea:focus,
body .meldo-section-input:focus,
body .meldo-due-date-input:focus,
body .meldo-sticky-title-input:focus{
  outline:none !important;
  border-color:var(--m-teal) !important;
  box-shadow:0 0 0 3px rgba(61,124,133,.13) !important;
}

/* ==========================================================
   C3 · SCHALTER
   ========================================================== */
/* v1.2.9: ohne Rahmen und ohne Fläche. Die Bahn zeigt den Zustand,
   der Text steht daneben — eine Pille darum lässt den Schalter wie
   einen Knopf aussehen, und genau das soll er nicht. */
body .m-schalter{
  display:inline-flex !important; align-items:center !important; gap:.6rem !important;
  min-height:44px !important; padding:0 !important;
  border:none !important; border-radius:0 !important;
  background:none !important; color:var(--m-gedaempft) !important;
  font-family:'Akko',sans-serif !important; font-weight:700 !important;
  font-size:.88rem !important; line-height:1 !important;
  cursor:pointer !important; transition:var(--m-uebergang) !important;
}
body .m-schalter .bahn{
  width:34px; height:20px; border-radius:999px; background:#d7dcdc;
  flex:0 0 auto; position:relative; transition:var(--m-uebergang);
}
body .m-schalter .bahn::after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:var(--m-weiss);
  box-shadow:0 1px 3px rgba(0,0,0,.2); transition:var(--m-uebergang);
}
body .m-schalter:hover{ border-color:var(--m-teal) !important; color:var(--m-teal) !important; }
body .m-schalter.is-an{ color:var(--m-tinte) !important; }
body .m-schalter.is-an .bahn{ background:var(--m-teal); }
body .m-schalter.is-an .bahn::after{ left:16px; }

/* ==========================================================
   D1 · WERTANZEIGE — nicht bedienbar
   ========================================================== */
body .m-anzeige{
  display:inline-flex !important; align-items:center !important; gap:.4rem !important;
  padding:.32rem .75rem .32rem .6rem !important;
  background:var(--m-weiss) !important; border:1px solid var(--m-linie) !important;
  border-radius:999px !important; cursor:default !important;
}
body .m-anzeige .kreis{
  width:24px; height:24px; border-radius:50%;
  background:var(--m-teal-l); color:var(--m-teal);
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
}
body .m-anzeige .kreis svg{ width:14px; height:14px; }
body .m-anzeige .zahl{
  font-family:'Akko',sans-serif; font-weight:700; font-size:1.1rem;
  font-variant-numeric:tabular-nums;
}
body .m-anzeige .wort{ font-size:.78rem; color:var(--m-gedaempft); }
body .m-anzeige--gruen .kreis{ background:var(--m-lime-l); color:var(--m-lime-d); }

/* ==========================================================
   KARTEN — in einer klickbaren Karte gibt es keine Hauptaktion.
   ========================================================== */

/* --- D1 · Pfeilkreis in der Karte: Anzeige, kein Knopf --- */
body .meldo-next-lesson .mnl-go,
body .mwh-pb span{
  background:var(--m-weiss) !important;
  background-image:none !important;
  border:1.5px solid var(--m-linie) !important;
  color:var(--m-teal) !important;
  box-shadow:none !important;
}
body .meldo-next-lesson:hover .mnl-go{
  border-color:var(--m-teal) !important;
  box-shadow:none !important;
  transform:translateY(-50%) !important;
}
/* --- A2 · Kartenaktion: trägt die Nebenaktionsform --- */
body .meldo-cc .act,
body .mslp-cta{
  border:1.5px solid var(--m-linie) !important;
  border-radius:10px !important;
  background:var(--m-weiss) !important;
  background-image:none !important;
  color:var(--m-tinte) !important;
  font-family:'Akko',sans-serif !important;
  font-weight:700 !important;
  font-size:.92rem !important;
  min-height:44px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  box-shadow:none !important;
}
body .meldo-cc:hover .act,
body .mslp-cta:hover{
  background:var(--m-weiss) !important;
  border-color:var(--m-teal) !important;
  color:var(--m-teal) !important;
}

/* ==========================================================
   SYMBOLE — SVG folgt der Schriftfarbe, Grösse am Element
   ========================================================== */
body .m-tun svg,
body .mq-switch svg,
body .meldo-lernwelt-btn svg,
body .meldo-btn svg,
body .mslp-cta svg,
body .meldo-beta-go svg,
body .mre-cta svg{
  width:18px !important; height:18px !important; flex:0 0 auto !important;
}
body .m-reiter svg,
body .meldo-drawer-tab svg,
body .meldo-settings-toggle-btn svg{ width:17px !important; height:17px !important; }

/* «neu / macht Spass» — ein grüner Punkt, überall derselbe.
   Ersetzt die fünf verschiedenen Farbverläufe. */
body .m-punkt{
  width:8px !important; height:8px !important; border-radius:50% !important;
  background:var(--m-lime) !important; flex:0 0 auto !important; display:inline-block !important;
}

@media (prefers-reduced-motion:reduce){
  body .m-tun, body .m-wert, body .m-reiter, body .m-oeffner{ transition:none !important; }
}


/* ==========================================================
   GAMIFICATION (Leistung-Tab) — Altnamen in die Arten.
   Nur eindeutige Namen; alles, was ich nicht sicher zuordnen
   konnte, bleibt vorerst aussen vor.
   ========================================================== */

/* A1 */
body .mg-rw-save,
body .mg-msg-send,
body .mg-lb-csend{
  min-height:44px !important; padding:0 1.1rem !important;
  border:1.5px solid var(--m-teal) !important; border-radius:10px !important;
  background:var(--m-teal) !important; background-image:none !important;
  color:var(--m-weiss) !important;
  font-family:'Akko',sans-serif !important; font-weight:700 !important; font-size:.92rem !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
  box-shadow:none !important; cursor:pointer !important; transition:var(--m-uebergang) !important;
}
body .mg-rw-save:hover,
body .mg-msg-send:hover,
body .mg-lb-csend:hover{
  background:var(--m-teal-d) !important; border-color:var(--m-teal-d) !important; color:var(--m-weiss) !important;
}

/* A2 */
body .mg-more-btn,
body .mg-tsub-btn,
body .mg-link-btn,
body .mg-pf-edit,
body .mg-pfedit-btn,
body .mg-avedit,
body .mg-pfp-avedit,
body .mg-reveal-btn,
body .mg-hint-btn,
body .mg-actprev-all,
body .mg-awsheet-all,
body .mg-awsheet-adjust,
body .mg-aw-histtoggle,
body .mg-aw-undo,
body .mg-lb-cbtn,
body .mg-gp-all,
body .mg-gp-none,
body .mg-cm-back{
  min-height:44px !important; padding:0 1.1rem !important;
  border:1.5px solid var(--m-linie) !important; border-radius:10px !important;
  background:var(--m-weiss) !important; background-image:none !important;
  color:var(--m-tinte) !important;
  font-family:'Akko',sans-serif !important; font-weight:700 !important; font-size:.92rem !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
  box-shadow:none !important; cursor:pointer !important; transition:var(--m-uebergang) !important;
  text-decoration:none !important;
}
body .mg-more-btn:hover,
body .mg-tsub-btn:hover,
body .mg-link-btn:hover,
body .mg-pf-edit:hover,
body .mg-pfedit-btn:hover,
body .mg-avedit:hover,
body .mg-pfp-avedit:hover,
body .mg-reveal-btn:hover,
body .mg-hint-btn:hover,
body .mg-actprev-all:hover,
body .mg-awsheet-all:hover,
body .mg-awsheet-adjust:hover,
body .mg-aw-histtoggle:hover,
body .mg-aw-undo:hover,
body .mg-lb-cbtn:hover,
body .mg-gp-all:hover,
body .mg-gp-none:hover,
body .mg-cm-back:hover{
  border-color:var(--m-teal) !important; color:var(--m-teal) !important; background:var(--m-weiss) !important;
}

/* A3 */
body .mg-msg-cancel,
body .mg-linkinline{
  min-height:44px !important; padding:0 .9rem !important;
  border:1.5px solid transparent !important; border-radius:10px !important;
  background:none !important; background-image:none !important;
  color:var(--m-schwach) !important;
  font-family:'Akko',sans-serif !important; font-weight:700 !important; font-size:.92rem !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  box-shadow:none !important; cursor:pointer !important;
}
body .mg-msg-cancel:hover,
body .mg-linkinline:hover{ color:var(--m-teal) !important; background:none !important; }

/* A4 */
body .mg-modal-x,
body .mg-lb-x,
body .mg-doc-x,
body .mg-awsheet-x,
body .mg-lb-prev,
body .mg-lb-next{
  width:44px !important; min-width:44px !important; height:44px !important; min-height:44px !important;
  padding:0 !important; flex:0 0 auto !important;
  border:1.5px solid var(--m-linie) !important; border-radius:10px !important;
  background:var(--m-weiss) !important; background-image:none !important;
  color:var(--m-tinte) !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  box-shadow:none !important; cursor:pointer !important; transition:var(--m-uebergang) !important;
}
body .mg-modal-x:hover,
body .mg-lb-x:hover,
body .mg-doc-x:hover,
body .mg-awsheet-x:hover,
body .mg-lb-prev:hover,
body .mg-lb-next:hover{ border-color:var(--m-teal) !important; color:var(--m-teal) !important; }

/* A4 · Gefahr */
body .mg-rw-del{
  border-color:var(--m-linie) !important; color:var(--m-gefahr) !important;
  background:var(--m-weiss) !important; background-image:none !important;
}
body .mg-rw-del:hover{
  border-color:var(--m-gefahr) !important; background:var(--m-gefahr) !important; color:var(--m-weiss) !important;
}

/* B1 · Reiter */
body .mg-cm-tab,
body .mg-ht{
  min-height:40px !important; padding:0 14px !important;
  border:none !important; border-radius:9px !important;
  background:none !important; background-image:none !important;
  color:var(--m-gedaempft) !important;
  font-family:'Akko',sans-serif !important; font-weight:700 !important; font-size:14px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px !important;
  box-shadow:none !important; cursor:pointer !important;
}
body .mg-cm-tab.active,
body .mg-ht.active{
  background:var(--m-weiss) !important; background-image:none !important;
  color:var(--m-teal) !important; box-shadow:var(--m-karte) !important;
}

/* C1 · Wertreihe */
body .mg-chip,
body .mg-awsheet-chip{
  min-height:44px !important; padding:0 .95rem !important;
  border:1.5px solid var(--m-linie) !important; border-radius:999px !important;
  background:var(--m-weiss) !important; background-image:none !important;
  color:var(--m-tinte) !important;
  font-family:'Akko',sans-serif !important; font-weight:700 !important; font-size:.9rem !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:.45rem !important;
  box-shadow:none !important; cursor:pointer !important;
}
body .mg-chip.on,
body .mg-chip.active,
body .mg-awsheet-chip.on{
  background:var(--m-teal) !important; border-color:var(--m-teal) !important; color:var(--m-weiss) !important;
}

/* C2 · Feld */
body .mg-dir-q,
body .mg-dir-sort,
body .mg-gp-search{
  min-height:44px !important; padding:0 .75rem !important;
  border:1.5px solid var(--m-linie) !important; border-radius:10px !important;
  background-color:var(--m-weiss) !important;
  color:var(--m-tinte) !important;
  font-family:'Akko',sans-serif !important; font-size:.92rem !important;
  box-shadow:none !important;
}
body .mg-dir-q:focus,
body .mg-dir-sort:focus,
body .mg-gp-search:focus{
  outline:none !important; border-color:var(--m-teal) !important;
  box-shadow:0 0 0 3px rgba(61,124,133,.13) !important;
}

/* Das Lernpfad-Symbol zeichnet mit «stroke», nicht mit «fill» — «color»
   allein reicht nicht, wenn das Plugin den Strich direkt setzt. */
body .meldo-heading-ic .meldo-heading-icon,
body .meldo-heading-ic .meldo-heading-icon *{
  color:#fff !important;
  stroke:#fff !important;
}

/* Die Gamification-Reiter tragen jetzt SVG statt Emoji. Sie stehen als
   B1-Schiene weiter oben; hier nur die Symbolgrösse. */
body .meldo-lg-subtab svg{ width:17px !important; height:17px !important; flex:0 0 auto !important; }
body .meldo-lg-subnav{ flex-wrap:wrap !important; gap:3px !important; }

/* lernpfad-icons.js tauscht das Kopfsymbol gegen ein Meldo-SVG aus, dessen
   Pfade ein fest eingebautes fill="#3D7C85" tragen. CSS schlägt solche
   Präsentationsattribute — darum hier fill UND stroke, sonst bleibt das
   Symbol türkis auf türkisem Grund. */
body .meldo-heading-ic svg,
body .meldo-heading-ic svg g,
body .meldo-heading-ic svg path,
body .meldo-heading-ic svg circle,
body .meldo-heading-ic svg rect,
body .meldo-heading-ic svg polygon,
body .meldo-heading-ic svg polyline,
body .meldo-heading-ic svg line{
  fill:#fff !important;
  stroke:#fff !important;
  color:#fff !important;
}
/* Das Strichsymbol aus dem Plugin ist ungefüllt — es darf nicht zulaufen. */
body .meldo-heading-ic svg.meldo-heading-icon,
body .meldo-heading-ic svg.meldo-heading-icon *{
  fill:none !important;
  stroke:#fff !important;
}
body .meldo-heading-ic svg{
  width:1.45rem !important; height:1.45rem !important;
  max-width:1.45rem !important; max-height:1.45rem !important;
  display:block !important;
}

/* Pinnwand, Profil und das «Heute»-Widget wurden von spezifischeren
   Bestandsregeln geschlagen (.meldo-tab-panel h2 bzw. widget.css mit
   28 px in Türkis). Hier dieselben Werte wie im Werkzeugkopf, mit
   genug Spezifität, damit sie auch wirklich gelten. */
html body .meldo-tab-panel .meldo-tab-header .meldo-tab-header-title,
html body .meldo-tab-panel .meldo-tab-header h2,
html body .meldo-widget-header .meldo-widget-title,
html body .meldo-widget-header h2.meldo-widget-title{
  font-family:Akko,'Akko',system-ui,sans-serif !important;
  font-size:1.35rem !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  letter-spacing:-.02em !important;
  color:#111416 !important;
  margin:0 !important;
}
html body .meldo-tab-panel .meldo-tab-header .meldo-tab-header-desc,
html body .meldo-widget-header .meldo-widget-subtitle{
  font-family:'Akko',system-ui,sans-serif !important;
  font-size:.82rem !important;
  font-weight:400 !important;
  line-height:1.4 !important;
  color:#8a8a8a !important;
}

@media (max-width:768px){
  html body .meldo-tab-panel .meldo-tab-header .meldo-tab-header-title,
  html body .meldo-tab-panel .meldo-tab-header h2,
  html body .meldo-widget-header .meldo-widget-title{
    font-size:1.08rem !important;
  }
}

/* ==========================================================
   B1 · Musiktools-Reiter (Tools · Instrumente · Games)
   Waren drei gleich grosse Knöpfe mit Verlauf auf dem aktiven —
   ein Reiter ist keine Handlung. Jetzt graue Schiene, der aktive
   Reiter als weisse Karte, wie überall.
   ========================================================== */
html body .meldotools-app .nav-tabs{
  display:inline-flex !important;
  gap:3px !important;
  padding:3px !important;
  margin:0 auto !important;
  max-width:100% !important;
  background:var(--m-schiene) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:none !important;
  border-bottom:none !important;
  border-radius:12px !important;
  box-shadow:none !important;
  position:static !important;
  overflow-x:auto !important;
}
/* B1 · Die Schiene stand mittig in einer eigenen, seitenbreiten Leiste. */
html body .meldotools-app .nav-tabs-wrap,
html body .meldotools-app > .nav-tabs{ text-align:center !important; }

html body .meldotools-app .nav-tab{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  min-height:40px !important;
  padding:0 16px !important;
  border:none !important;
  border-radius:9px !important;
  background:none !important;
  background-image:none !important;
  color:var(--m-gedaempft) !important;
  font-family:'Akko',sans-serif !important;
  font-weight:700 !important;
  font-size:14px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-shadow:none !important;
  transform:none !important;
  transition:var(--m-uebergang) !important;
}
html body .meldotools-app .nav-tab:hover{
  background:none !important;
  color:var(--m-teal) !important;
  transform:none !important;
  box-shadow:none !important;
}
html body .meldotools-app .nav-tab.active{
  background:var(--m-weiss) !important;
  background-image:none !important;
  color:var(--m-teal) !important;
  box-shadow:var(--m-karte) !important;
  transform:none !important;
}
html body .meldotools-app .nav-tab svg,
html body .meldotools-app .nav-tab img{
  width:17px !important; height:17px !important; flex:0 0 auto !important;
}
html body .meldotools-app .nav-tab.active svg{ color:var(--m-teal) !important; }

@media (max-width:600px){
  html body .meldotools-app .nav-tab{ padding:0 12px !important; font-size:13px !important; }
}

/* B1 · Die Symbolfarben der Leistungs-Reiter stehen im Template, damit sie
   nicht von der allgemeinen B1-Regel eingefärbt werden. */
html body .meldo-lg-subnav .meldo-lg-subtab.active{
  background:var(--m-weiss) !important;
  color:var(--m-tinte) !important;
  box-shadow:var(--m-karte) !important;
}
html body .meldo-lg-subnav{
  background:var(--m-schiene) !important;
  border-radius:12px !important;
  padding:3px !important;
  gap:3px !important;
}

/* ==========================================================
   B1 · EINE SCHIENE FÜR ALLE.
   Musiktools, Leistung und Lernpfad hatten drei Fassungen
   derselben Sache: andere Schienenfarbe, anderer Innenabstand,
   andere Rundung, anderer Schatten, einmal türkise und einmal
   dunkle Schrift im aktiven Reiter. Hier stehen die Werte einmal.
   ========================================================== */
html body .meldotools-app .nav-tabs,
html body .meldo-lg-subnav,
html body .meldo-lp-tabs,
html body .mg-cm-nav,
html body .mg-pfnav{
  display:inline-flex !important;
  flex-wrap:wrap !important;
  gap:3px !important;
  padding:3px !important;
  background:var(--m-schiene) !important;
  border:none !important;
  border-radius:12px !important;
  box-shadow:none !important;
  max-width:100% !important;
}
html body .meldotools-app .nav-tabs .nav-tab,
html body .meldo-lg-subnav .meldo-lg-subtab,
html body .meldo-lp-tabs .meldo-lp-tab,
html body .mg-cm-nav .mg-cm-tab{
  flex:0 0 auto !important;
  min-width:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  min-height:40px !important;
  padding:0 16px !important;
  border:none !important;
  border-radius:9px !important;
  background:none !important;
  background-image:none !important;
  color:var(--m-gedaempft) !important;
  font-family:'Akko',sans-serif !important;
  font-weight:700 !important;
  font-size:14px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-shadow:none !important;
  transform:none !important;
  transition:var(--m-uebergang) !important;
}
html body .meldotools-app .nav-tabs .nav-tab:hover,
html body .meldo-lg-subnav .meldo-lg-subtab:hover,
html body .meldo-lp-tabs .meldo-lp-tab:hover,
html body .mg-cm-nav .mg-cm-tab:hover{
  background:none !important;
  color:var(--m-teal) !important;
  transform:none !important;
}
html body .meldotools-app .nav-tabs .nav-tab.active,
html body .meldo-lg-subnav .meldo-lg-subtab.active,
html body .meldo-lp-tabs .meldo-lp-tab.active,
html body .mg-cm-nav .mg-cm-tab.active{
  background:var(--m-weiss) !important;
  background-image:none !important;
  color:var(--m-teal) !important;
  box-shadow:var(--m-karte) !important;
  transform:none !important;
}
/* Die Zähler bleiben, aber ruhiger — sie sind Anzeige, nicht Handlung. */
html body .meldo-lp-tabs .meldo-lp-tab .meldo-lp-tab-count{
  background:#e3e9e9 !important;
  color:var(--m-gedaempft) !important;
  border-radius:999px !important;
  padding:1px 8px !important;
  font-size:11px !important;
  font-variant-numeric:tabular-nums !important;
}
html body .meldo-lp-tabs .meldo-lp-tab.active .meldo-lp-tab-count{
  background:var(--m-teal-l) !important;
  color:var(--m-teal) !important;
}
/* B1 · Zähler an Reitern (Lernpfad, Community). Anzeige, nicht Handlung. */
html body .mg-cm-nav .mg-cm-tab .mg-cm-badge{
  background:#e3e9e9 !important;
  color:var(--m-gedaempft) !important;
  border-radius:var(--m-radius-rund) !important;
  padding:1px 8px !important;
  font-size:11px !important;
  font-variant-numeric:tabular-nums !important;
}
html body .mg-cm-nav .mg-cm-tab.active .mg-cm-badge{
  background:var(--m-teal-l) !important;
  color:var(--m-teal) !important;
}

/* ==========================================================
   NACHTRAG v1.0.2 — was beim Umzug in den Plugins stand und
   hier eine höhere Spezifität braucht als «body .klasse».
   ========================================================== */

/* A1 · «Weiterlernen» im Lernpfad. Das Plugin setzt
   «.meldo-learning-path-display .meldo-lp-cta» mit Verlauf und
   !important — das schlägt «body .meldo-lp-cta». */
html body .meldo-learning-path-display .meldo-lp-cta,
html body .meldo-lp-display-wrapper .meldo-lp-cta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:var(--m-hoehe) !important;
  height:auto !important;
  padding:0 1.1rem !important;
  border:var(--m-rand) solid var(--m-teal) !important;
  border-radius:var(--m-radius) !important;
  background:var(--m-teal) !important;
  background-image:none !important;
  color:var(--m-weiss) !important;
  font-family:var(--m-schrift-titel) !important;
  font-weight:700 !important;
  font-size:var(--m-groesse-knopf) !important;
  line-height:1 !important;
  text-decoration:none !important;
  box-shadow:none !important;
  transition:var(--m-uebergang) !important;
}
html body .meldo-learning-path-display .meldo-lp-cta:hover,
html body .meldo-lp-display-wrapper .meldo-lp-cta:hover{
  background:var(--m-teal-d) !important;
  border-color:var(--m-teal-d) !important;
  color:var(--m-weiss) !important;
  transform:translateY(-1px) !important;
  box-shadow:none !important;
}
html body .meldo-lp-cta .meldo-lp-cta-ic{
  display:inline-flex !important; align-items:center !important; font-size:0 !important;
}
html body .meldo-lp-cta .meldo-lp-cta-ic svg{ width:14px !important; height:14px !important; }

/* A1 · «Zum Schulplaner» im Unterricht-Widget. */
html body .meldo-widget-planner-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:var(--m-hoehe) !important;
  padding:0 1.1rem !important;
  border:var(--m-rand) solid var(--m-teal) !important;
  border-radius:var(--m-radius) !important;
  background:var(--m-teal) !important;
  background-image:none !important;
  color:var(--m-weiss) !important;
  font-family:var(--m-schrift-titel) !important;
  font-weight:700 !important;
  font-size:var(--m-groesse-knopf) !important;
  line-height:1 !important;
  text-decoration:none !important;
  box-shadow:none !important;
  transition:var(--m-uebergang) !important;
}
html body .meldo-widget-planner-btn:hover{
  background:var(--m-teal-d) !important;
  border-color:var(--m-teal-d) !important;
  color:var(--m-weiss) !important;
  transform:translateY(-1px) !important;
}
html body .meldo-widget-planner-btn svg{ width:18px !important; height:18px !important; }

/* ==========================================================
   B1 · BEREICHSFILTER «Alle Kurse».

   Standen bisher als C1-Wertreihe da — Pillen mit türkis
   gefülltem Wert. Nach der Definition sind sie aber Reiter:
   nach einem Klick sieht man einen ANDEREN Bereich, nicht
   dieselbe Liste mit anderem Inhalt. Darum dieselbe Schiene
   wie in Musiktools, Leistung, Lernpfad und Profil.
   ========================================================== */
html body .meldo-sparten-segs{
  display:inline-flex !important;
  flex-wrap:wrap !important;
  gap:3px !important;
  padding:3px !important;
  background:var(--m-schiene) !important;
  border:none !important;
  border-radius:var(--m-radius-schiene) !important;
  box-shadow:none !important;
  max-width:100% !important;
}
html body .meldo-sparten-segs .meldo-sp-seg{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  min-height:var(--m-hoehe-reiter) !important;
  height:auto !important;
  width:auto !important;
  padding:0 16px !important;
  border:none !important;
  border-radius:var(--m-radius-reiter) !important;
  background:none !important;
  background-image:none !important;
  color:var(--m-gedaempft) !important;
  font-family:var(--m-schrift-titel) !important;
  font-weight:700 !important;
  font-size:var(--m-groesse-reiter) !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-shadow:none !important;
  transform:none !important;
  transition:var(--m-uebergang) !important;
}
html body .meldo-sparten-segs .meldo-sp-seg:hover{
  background:none !important;
  color:var(--m-teal) !important;
  transform:none !important;
}
html body .meldo-sparten-segs .meldo-sp-seg.on{
  background:var(--m-weiss) !important;
  background-image:none !important;
  color:var(--m-teal) !important;
  box-shadow:var(--m-karte) !important;
}
/* Der Zähler ist Anzeige, nicht Handlung. */
html body .meldo-sparten-segs .meldo-sp-seg .cnt{
  position:static !important;
  background:#e3e9e9 !important;
  color:var(--m-gedaempft) !important;
  border-radius:var(--m-radius-rund) !important;
  padding:1px 8px !important;
  font-size:11px !important;
  font-weight:600 !important;
  font-variant-numeric:tabular-nums !important;
  box-shadow:none !important;
  opacity:1 !important;
}
html body .meldo-sparten-segs .meldo-sp-seg.on .cnt{
  background:var(--m-teal-l) !important;
  color:var(--m-teal) !important;
}
html body .meldo-sparten-segs .meldo-sp-seg .nm{
  font-size:var(--m-groesse-reiter) !important;
  font-weight:700 !important;
  margin:0 !important;
  color:inherit !important;
}
html body .meldo-sparten-segs .meldo-sp-seg .ic,
html body .meldo-sparten-segs .meldo-sp-seg .ic-img{ display:none !important; }

@media (max-width:600px){
  html body .meldo-sparten-segs,
    html body .meldo-sparten-segs::-webkit-scrollbar,
    html body .meldo-sparten-segs .meldo-sp-seg,
  }

/* ==========================================================
   C2 · FILTER — eine Ebene unter den Reitern.

   Ein Reiter sagt, WELCHEN Bereich man sieht. Ein Filter sagt,
   WAS davon gezeigt wird. Das sind zwei Ebenen, keine
   Geschwister — darum ist der Filter leiser: etwas niedriger,
   kleinere Schrift, Rahmen statt Fläche, kein Schatten.

   Und er steht IMMER auf einer eigenen Zeile unter der Schiene.
   Rutscht er daneben, wirken beide gleichrangig.
   ========================================================== */
/* «display» bleibt unangetastet — das Aufklappmenü hängt daran. */
html body .meldo-fdd,
html body .meldo-fdd-wrap{
  position:relative !important;
  flex-basis:100% !important;
  width:100% !important;
  margin-top:12px !important;
}
html body .meldo-fdd-trigger{
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  width:auto !important;
  min-height:38px !important;
  height:auto !important;
  padding:0 .85rem !important;
  border:var(--m-rand) solid var(--m-linie) !important;
  border-radius:var(--m-radius) !important;
  background:var(--m-weiss) !important;
  background-image:none !important;
  color:var(--m-gedaempft) !important;
  font-family:var(--m-schrift-titel) !important;
  font-weight:600 !important;
  font-size:.86rem !important;
  line-height:1 !important;
  text-align:left !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transition:var(--m-uebergang) !important;
}
html body .meldo-fdd-trigger:hover{
  border-color:var(--m-teal) !important;
  color:var(--m-teal) !important;
  background:var(--m-weiss) !important;
  transform:none !important;
}
html body .meldo-fdd-trigger:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(61,124,133,.2) !important;
}
html body .meldo-fdd-trigger .meldo-fdd-ic{
  width:16px !important; height:16px !important;
  flex:0 0 auto !important;
  color:var(--m-teal) !important;
  opacity:.85 !important;
}
/* Der Winkel sitzt rechts und dreht beim Öffnen. */
html body .meldo-fdd-trigger svg:last-child{
  width:15px !important; height:15px !important;
  margin-left:2px !important;
  transition:var(--m-uebergang) !important;
}
html body .meldo-fdd-trigger[aria-expanded="true"] svg:last-child{
  transform:rotate(180deg) !important;
}

/* ==========================================================
   C2 · «.meldo-sparten-chips» ist der FILTER, nicht die Schiene.

   Die Reiter sind «.meldo-sparten-segs». Der Filter-Container
   hiess nur ähnlich — und weil er kurz als Schiene galt, bekam
   er «overflow-x:auto». Damit war sein Aufklappmenü abgeschnitten
   und der Filter liess sich scheinbar nicht öffnen.
   ========================================================== */
html body .meldo-sparten-chips{
  display:block !important;
  position:relative !important;
  overflow:visible !important;
  background:none !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin-top:12px !important;
  z-index:40 !important;
}
html body .meldo-sparten-chips .meldo-fdd-menu{
  z-index:120 !important;
  min-width:240px !important;
  right:auto !important;
  border-radius:var(--m-radius) !important;
}
html body .meldo-fdd-opt{
  display:block !important;
  width:100% !important;
  min-height:40px !important;
  padding:0 12px !important;
  border:none !important;
  border-radius:8px !important;
  background:none !important;
  color:var(--m-tinte) !important;
  font-family:var(--m-schrift-titel) !important;
  font-weight:600 !important;
  font-size:.88rem !important;
  text-align:left !important;
  cursor:pointer !important;
  box-shadow:none !important;
}
html body .meldo-fdd-opt:hover{ background:#F5F6F7 !important; color:var(--m-teal) !important; }
html body .meldo-fdd-opt.on{ background:var(--m-teal-l) !important; color:var(--m-teal) !important; }

/* ==========================================================
   MELDO CHORD COLLECTION — Schritt 1: Knöpfe und Reiter.

   Das MCC bringt 365 Klassen an Bedienelementen mit. Hier steht
   die erste Hälfte: die Knopffamilie, die Reiter, die Schliess-
   kreuze und die Aktionen in Listen und Karten.

   NICHT enthalten (bewusst): Abspieler, Play-Along, Stems,
   Metronom und Wellenform. Das sind Spielflächen mit eigenen
   Gesetzen — sie folgen später und nur mit der Auflage, dass
   ihre Zustandsfarben aus der Palette kommen.
   ========================================================== */

/* --- A1 · Hauptaktion --- */
html body .mcc-btn-primary,
html body .mcc-btn-unlock,
html body .mcc-btn-preview-buy,
html body .mcc-btn-preview-abo,
html body .mcc-btn-membership,
html body .mcc-btn-view-premium,
html body .mcc-btn-upload,
html body .mcc-stems-create-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:var(--m-hoehe) !important;
  height:auto !important;
  padding:0 1.1rem !important;
  border:var(--m-rand) solid var(--m-teal) !important;
  border-radius:var(--m-radius) !important;
  background:var(--m-teal) !important;
  background-image:none !important;
  color:var(--m-weiss) !important;
  font-family:var(--m-schrift-titel) !important;
  font-weight:700 !important;
  font-size:var(--m-groesse-knopf) !important;
  line-height:1 !important;
  text-decoration:none !important;
  text-transform:none !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transition:var(--m-uebergang) !important;
  animation:none !important;
}
html body .mcc-btn-primary:hover,
html body .mcc-btn-unlock:hover,
html body .mcc-btn-preview-buy:hover,
html body .mcc-btn-preview-abo:hover,
html body .mcc-btn-membership:hover,
html body .mcc-btn-view-premium:hover,
html body .mcc-btn-upload:hover,
html body .mcc-stems-create-btn:hover{
  background:var(--m-teal-d) !important;
  border-color:var(--m-teal-d) !important;
  color:var(--m-weiss) !important;
  transform:translateY(-1px) !important;
  box-shadow:none !important;
}

/* --- A2 · Nebenaktion (Grundform) --- */
html body .mcc-btn,
html body .mcc-btn-secondary,
html body .mcc-btn-action,
html body .mcc-btn-large,
html body .mcc-btn-sm,
html body .mcc-btn-small,
html body .mcc-btn-print,
html body .mcc-btn-newtab,
html body .mcc-btn-download,
html body .mcc-btn-download-xml,
html body .mcc-btn-switch-viewer,
html body .mcc-btn-try-anyway,
html body .mcc-btn-load-more-ug,
html body .mcc-instrument-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:var(--m-hoehe) !important;
  height:auto !important;
  width:auto !important;
  padding:0 1.1rem !important;
  border:var(--m-rand) solid var(--m-linie) !important;
  border-radius:var(--m-radius) !important;
  background:var(--m-weiss) !important;
  background-image:none !important;
  color:var(--m-tinte) !important;
  font-family:var(--m-schrift-titel) !important;
  font-weight:700 !important;
  font-size:var(--m-groesse-knopf) !important;
  line-height:1 !important;
  text-decoration:none !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transition:var(--m-uebergang) !important;
  animation:none !important;
}
html body .mcc-btn:hover,
html body .mcc-btn-secondary:hover,
html body .mcc-btn-action:hover,
html body .mcc-btn-large:hover,
html body .mcc-btn-sm:hover,
html body .mcc-btn-small:hover,
html body .mcc-btn-print:hover,
html body .mcc-btn-newtab:hover,
html body .mcc-btn-download:hover,
html body .mcc-btn-download-xml:hover,
html body .mcc-btn-switch-viewer:hover,
html body .mcc-btn-try-anyway:hover,
html body .mcc-btn-load-more-ug:hover,
html body .mcc-instrument-btn:hover{
  border-color:var(--m-teal) !important;
  color:var(--m-teal) !important;
  background:var(--m-weiss) !important;
  transform:translateY(-1px) !important;
}

/* --- A3 · Stille Aktion --- */
html body .mcc-btn-cancel,
html body .mcc-toast-action-link{
  min-height:var(--m-hoehe) !important;
  padding:0 .9rem !important;
  border:var(--m-rand) solid transparent !important;
  border-radius:var(--m-radius) !important;
  background:none !important;
  color:var(--m-schwach) !important;
  font-family:var(--m-schrift-titel) !important;
  font-weight:700 !important;
  font-size:var(--m-groesse-knopf) !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
html body .mcc-btn-cancel:hover,
html body .mcc-toast-action-link:hover{
  color:var(--m-teal) !important; background:none !important;
}

/* --- A4 · Symbolaktion: alle Schliesskreuze und Symbolknöpfe --- */
html body .mcc-btn-icon,
html body .mcc-modal-close,
html body .mcc-popup-close,
html body .mcc-preview-close,
html body .mcc-print-close,
html body .mcc-share-close,
html body .mcc-selection-close,
html body .mcc-terms-close,
html body .mcc-library-close,
html body .mcc-discovery-close,
html body .mcc-nav-close,
html body .mcc-bundle-nav-close,
html body .mcc-builder-picker-close,
html body .mcc-edit-upload-close,
html body .mcc-membership-modal-close,
html body .mcc-playlist-modal-close,
html body .mcc-song-info-close,
html body .mcc-notes-close-btn,
html body .mcc-xml-player-close,
html body .mcc-waterfall-notation-close,
html body .mcc-queue-overlay-close{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:var(--m-hoehe) !important;
  min-width:var(--m-hoehe) !important;
  height:var(--m-hoehe) !important;
  min-height:var(--m-hoehe) !important;
  padding:0 !important;
  flex:0 0 auto !important;
  border:var(--m-rand) solid var(--m-linie) !important;
  border-radius:var(--m-radius) !important;
  background:var(--m-weiss) !important;
  background-image:none !important;
  color:var(--m-tinte) !important;
  line-height:1 !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transition:var(--m-uebergang) !important;
}
html body .mcc-btn-icon:hover,
html body .mcc-modal-close:hover,
html body .mcc-popup-close:hover,
html body .mcc-preview-close:hover,
html body .mcc-print-close:hover,
html body .mcc-share-close:hover,
html body .mcc-selection-close:hover,
html body .mcc-terms-close:hover,
html body .mcc-library-close:hover,
html body .mcc-discovery-close:hover,
html body .mcc-nav-close:hover,
html body .mcc-bundle-nav-close:hover,
html body .mcc-builder-picker-close:hover,
html body .mcc-edit-upload-close:hover,
html body .mcc-membership-modal-close:hover,
html body .mcc-playlist-modal-close:hover,
html body .mcc-song-info-close:hover,
html body .mcc-notes-close-btn:hover{
  border-color:var(--m-teal) !important;
  color:var(--m-teal) !important;
  background:var(--m-weiss) !important;
}

/* --- B1 · Reiter. Nie gefüllt, nie mit Verlauf. --- */
html body .mcc-tabs,
html body .mcc-tab-nav,
html body .mcc-segmented,
html body .mcc-builder-tabs,
html body .mcc-si-tabs,
html body .mcc-style-cat-tabs,
html body .mcc-diagrams-tabs{
  display:inline-flex !important;
  flex-wrap:wrap !important;
  gap:3px !important;
  padding:3px !important;
  background:var(--m-schiene) !important;
  border:none !important;
  border-radius:var(--m-radius-schiene) !important;
  box-shadow:none !important;
  max-width:100% !important;
}
html body .mcc-tab,
html body .mcc-tab-btn,
html body .mcc-nav-btn,
html body .mcc-segmented-btn,
html body .mcc-mode-btn,
html body .mcc-si-tab,
html body .mcc-song-info-tab,
html body .mcc-style-cat-tab,
html body .mcc-diagrams-tab,
html body .mcc-content-tab,
html body .mcc-audio-tab,
html body .mcc-builder-tab,
html body .mcc-builder-subtab,
html body .mcc-builder-viewtab,
html body .mcc-premium-subtab{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  min-height:var(--m-hoehe-reiter) !important;
  height:auto !important;
  padding:0 16px !important;
  border:none !important;
  border-radius:var(--m-radius-reiter) !important;
  background:none !important;
  background-image:none !important;
  color:var(--m-gedaempft) !important;
  font-family:var(--m-schrift-titel) !important;
  font-weight:700 !important;
  font-size:var(--m-groesse-reiter) !important;
  line-height:1 !important;
  white-space:nowrap !important;
  text-transform:none !important;
  box-shadow:none !important;
  transform:none !important;
  cursor:pointer !important;
  transition:var(--m-uebergang) !important;
}
html body .mcc-tab:hover,
html body .mcc-tab-btn:hover,
html body .mcc-nav-btn:hover,
html body .mcc-segmented-btn:hover,
html body .mcc-mode-btn:hover,
html body .mcc-si-tab:hover,
html body .mcc-song-info-tab:hover,
html body .mcc-style-cat-tab:hover,
html body .mcc-diagrams-tab:hover,
html body .mcc-content-tab:hover,
html body .mcc-audio-tab:hover,
html body .mcc-builder-tab:hover,
html body .mcc-builder-subtab:hover,
html body .mcc-builder-viewtab:hover,
html body .mcc-premium-subtab:hover{
  background:none !important;
  color:var(--m-teal) !important;
  transform:none !important;
}
html body .mcc-tab.active,
html body .mcc-tab-btn.active,
html body .mcc-nav-btn.active,
html body .mcc-segmented-btn.active,
html body .mcc-mode-btn.active,
html body .mcc-si-tab.active,
html body .mcc-song-info-tab.active,
html body .mcc-style-cat-tab.active,
html body .mcc-diagrams-tab.active,
html body .mcc-content-tab.active,
html body .mcc-audio-tab.active,
html body .mcc-builder-tab.active,
html body .mcc-builder-subtab.active,
html body .mcc-builder-viewtab.active,
html body .mcc-premium-subtab.active,
html body .mcc-tab[aria-selected="true"],
html body .mcc-tab-btn[aria-selected="true"]{
  background:var(--m-weiss) !important;
  background-image:none !important;
  color:var(--m-teal) !important;
  box-shadow:var(--m-karte) !important;
  transform:none !important;
}

/* Symbole in MCC-Bedienelementen folgen der Schriftfarbe. */
html body .mcc-btn svg,
html body .mcc-btn-primary svg,
html body .mcc-btn-secondary svg,
html body .mcc-tab svg,
html body .mcc-tab-btn svg,
html body .mcc-segmented-btn svg{
  width:18px !important; height:18px !important; flex:0 0 auto !important;
}
html body .mcc-tab svg,
html body .mcc-tab-btn svg,
html body .mcc-segmented-btn svg{ width:17px !important; height:17px !important; }

/* --- C3 · Der Zusatzmaterial-Filter.
       «Nur mit Zusatzmaterial» hat genau zwei Zustände. Als Knopf
       sah man ihm nicht an, ob er einen Zustand anzeigt oder eine
       Aktion auslöst — als Kippschalter ist es eindeutig. --- */
html body .mzm-nav-fbtn{
  display:inline-flex !important;
  align-items:center !important;
  gap:.6rem !important;
  min-height:var(--m-hoehe) !important;
  padding:0 .95rem 0 .6rem !important;
  border:var(--m-rand) solid var(--m-linie) !important;
  border-radius:var(--m-radius-rund) !important;
  background:var(--m-weiss) !important;
  background-image:none !important;
  color:var(--m-gedaempft) !important;
  font-family:var(--m-schrift-titel) !important;
  font-weight:700 !important;
  font-size:.88rem !important;
  line-height:1 !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transition:var(--m-uebergang) !important;
}
html body .mzm-nav-fbtn .bahn{
  width:34px !important; height:20px !important;
  border-radius:var(--m-radius-rund) !important;
  background:#d7dcdc !important;
  flex:0 0 auto !important;
  position:relative !important;
  transition:var(--m-uebergang) !important;
}
html body .mzm-nav-fbtn .bahn::after{
  content:"" !important;
  position:absolute !important;
  top:2px !important; left:2px !important;
  width:16px !important; height:16px !important;
  border-radius:50% !important;
  background:var(--m-weiss) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.2) !important;
  transition:var(--m-uebergang) !important;
}
html body .mzm-nav-fbtn:hover{
  border-color:var(--m-teal) !important;
  color:var(--m-teal) !important;
  background:var(--m-weiss) !important;
}
html body .mzm-nav-fbtn.is-an{
  border-color:var(--m-teal) !important;
  color:var(--m-tinte) !important;
}
html body .mzm-nav-fbtn.is-an .bahn{ background:var(--m-teal) !important; }
html body .mzm-nav-fbtn.is-an .bahn::after{ left:16px !important; }
html body .mzm-nav-fbtn .mzm-nav-count{
  background:#e3e9e9 !important;
  color:var(--m-gedaempft) !important;
  border-radius:var(--m-radius-rund) !important;
  padding:1px 8px !important;
  font-size:11px !important;
  font-style:normal !important;
  font-variant-numeric:tabular-nums !important;
}
html body .mzm-nav-fbtn.is-an .mzm-nav-count{
  background:var(--m-teal-l) !important;
  color:var(--m-teal) !important;
}
html body .mzm-nav-fbtn .mzm-nav-fico{ display:none !important; }

/* --- B1 · Die Reitersymbole im MCC.
       Im aktiven Reiter war das Symbol weiss und damit unsichtbar,
       sobald der Reiter selbst weiss wurde. Jede Reiterart bekommt
       ausserdem ihre eigene Symbolfarbe — sie bleibt in jedem
       Zustand gleich, damit man den Reiter am Farbton wiedererkennt. --- */
html body .mcc-tab.active svg,
html body .mcc-tab-btn.active svg,
html body .mcc-nav-btn.active svg,
html body .mcc-segmented-btn.active svg,
html body .mcc-si-tab.active svg{
  opacity:1 !important;
}
html body .mcc-tabs .mcc-tab:nth-child(6n+1),
html body .mcc-tab-nav .mcc-tab-btn:nth-child(6n+1){ --mcc-ton:#3D7C85; }
html body .mcc-tabs .mcc-tab:nth-child(6n+2),
html body .mcc-tab-nav .mcc-tab-btn:nth-child(6n+2){ --mcc-ton:#3C8FC7; }
html body .mcc-tabs .mcc-tab:nth-child(6n+3),
html body .mcc-tab-nav .mcc-tab-btn:nth-child(6n+3){ --mcc-ton:#D9A441; }
html body .mcc-tabs .mcc-tab:nth-child(6n+4),
html body .mcc-tab-nav .mcc-tab-btn:nth-child(6n+4){ --mcc-ton:#B05CA8; }
html body .mcc-tabs .mcc-tab:nth-child(6n+5),
html body .mcc-tab-nav .mcc-tab-btn:nth-child(6n+5){ --mcc-ton:#DC7910; }
html body .mcc-tabs .mcc-tab:nth-child(6n+6),
html body .mcc-tab-nav .mcc-tab-btn:nth-child(6n+6){ --mcc-ton:#629394; }
html body .mcc-tabs .mcc-tab svg,
html body .mcc-tab-nav .mcc-tab-btn svg{
  color:var(--mcc-ton, var(--m-teal)) !important;
  stroke:var(--mcc-ton, var(--m-teal)) !important;
}

/* --- B1 · MCC-Reitersymbole, richtiggestellt.

   Die Symbole im MCC sind FLÄCHEN, keine Strichzeichnungen: Sie
   tragen «fill="currentColor"» und feine Konturen als gefüllte
   Pfade. Ein «fill:none» macht sie fast unsichtbar — genau das
   war in v1.2.1 passiert. Sie folgen also der Schriftfarbe über
   «fill», nicht über «stroke». --- */
html body .mcc-tab svg,
html body .mcc-tab-btn svg,
html body .mcc-nav-btn svg,
html body .mcc-segmented-btn svg,
html body .mcc-si-tab svg,
html body .mcc-song-info-tab svg,
html body .mcc-style-cat-tab svg{
  width:17px !important;
  height:17px !important;
  flex:0 0 auto !important;
  opacity:1 !important;
}

/* Sechs Töne reihum — unabhängig vom Behälter, weil die Reiter
   im MCC in sehr verschiedenen Leisten sitzen. Die Farbe bleibt
   in jedem Zustand gleich, damit man den Reiter wiedererkennt. */
html body .mcc-tab:nth-of-type(6n+1) svg,
html body .mcc-tab-btn:nth-of-type(6n+1) svg{ color:#3D7C85 !important; }
html body .mcc-tab:nth-of-type(6n+2) svg,
html body .mcc-tab-btn:nth-of-type(6n+2) svg{ color:#3C8FC7 !important; }
html body .mcc-tab:nth-of-type(6n+3) svg,
html body .mcc-tab-btn:nth-of-type(6n+3) svg{ color:#D9A441 !important; }
html body .mcc-tab:nth-of-type(6n+4) svg,
html body .mcc-tab-btn:nth-of-type(6n+4) svg{ color:#B05CA8 !important; }
html body .mcc-tab:nth-of-type(6n+5) svg,
html body .mcc-tab-btn:nth-of-type(6n+5) svg{ color:#DC7910 !important; }
html body .mcc-tab:nth-of-type(6n+6) svg,
html body .mcc-tab-btn:nth-of-type(6n+6) svg{ color:#629394 !important; }

/* Weitere Reiterleisten im MCC als Schiene. */
html body .mcc-library-tabs,
html body .mcc-style-category-tabs,
html body .mcc-sb-sheet-tabs,
html body .mcc-perc-tabs{
  display:inline-flex !important;
  flex-wrap:wrap !important;
  gap:3px !important;
  padding:3px !important;
  background:var(--m-schiene) !important;
  border:none !important;
  border-radius:var(--m-radius-schiene) !important;
  box-shadow:none !important;
  max-width:100% !important;
}

/* --- Die Ansichtsreiter über dem Chordsheet (Premium · Akkorde ·
       Noten+). «Premium» bleibt hervorgehoben — es ist ein Angebot,
       kein gleichrangiger Bereich: goldener Rand und goldenes
       Symbol, Fläche wie bei den übrigen Reitern. --- */
html body .mcc-style-cat-tab{
  min-height:var(--m-hoehe-reiter) !important;
  padding:0 16px !important;
  border:none !important;
  border-radius:var(--m-radius-reiter) !important;
  background:none !important;
  background-image:none !important;
  color:var(--m-gedaempft) !important;
  font-family:var(--m-schrift-titel) !important;
  font-weight:700 !important;
  font-size:var(--m-groesse-reiter) !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
}
html body .mcc-style-cat-tab.active{
  background:var(--m-weiss) !important;
  color:var(--m-teal) !important;
  box-shadow:var(--m-karte) !important;
}

/* --- Menüeinträge sind keine Knöpfe.
       Im Dreipunktmenü stand um jede Zeile ein Rahmen, weil
       «.mcc-mehr-item» bei den Nebenaktionen einsortiert war. Ein
       Menüeintrag ist eine Zeile: volle Breite, keine Fläche, keine
       Kante — nur beim Darüberfahren getönt. --- */
html body .mcc-mehr-item,
html body .mcc-menu-item,
html body .mcc-dropdown-item{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  min-height:var(--m-hoehe) !important;
  padding:0 12px !important;
  border:none !important;
  border-radius:8px !important;
  background:none !important;
  background-image:none !important;
  color:var(--m-tinte) !important;
  font-family:var(--m-schrift-titel) !important;
  font-weight:600 !important;
  font-size:.92rem !important;
  line-height:1.2 !important;
  text-align:left !important;
  text-decoration:none !important;
  box-shadow:none !important;
  transform:none !important;
  cursor:pointer !important;
  transition:var(--m-uebergang) !important;
}
html body .mcc-mehr-item:hover,
html body .mcc-menu-item:hover,
html body .mcc-dropdown-item:hover,
html body .mcc-mehr-item:focus-visible{
  background:#F5F6F7 !important;
  border:none !important;
  color:var(--m-teal) !important;
  transform:none !important;
  outline:none !important;
}
html body .mcc-mehr-item svg{
  width:18px !important; height:18px !important;
  flex:0 0 auto !important;
  color:var(--m-teal) !important;
}

/* --- C3 · Der Zusatzmaterial-Schalter, ohne Pille drumherum.

   «.mzm-nav-filter .mzm-nav-fbtn» aus nav.css ist spezifischer als
   die allgemeine Regel und setzte im eingeschalteten Zustand
   «color:#fff» — darum verschwand die Schrift auf weissem Grund.
   Ein Schalter braucht auch keinen Rahmen: die Bahn zeigt den
   Zustand, der Text steht daneben. --- */
html body .mzm-nav-filter .mzm-nav-fbtn,
html body .mzm-nav-filter.is-on .mzm-nav-fbtn,
html body .mzm-nav-filter .mzm-nav-fbtn:hover,
html body .mzm-nav-fbtn{
  border:none !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  padding:4px 2px !important;
  border-radius:0 !important;
  min-height:var(--m-hoehe) !important;
  color:var(--m-gedaempft) !important;
  transform:none !important;
  font-size:.9rem !important;
}
html body .mzm-nav-filter .mzm-nav-fbtn .mzm-nav-flabel,
html body .mzm-nav-filter.is-on .mzm-nav-fbtn .mzm-nav-flabel,
html body .mzm-nav-fbtn .mzm-nav-flabel{
  color:var(--m-gedaempft) !important;
  font-family:var(--m-schrift-titel) !important;
  font-weight:700 !important;
}
html body .mzm-nav-filter .mzm-nav-fbtn:hover .mzm-nav-flabel{
  color:var(--m-teal) !important;
}
html body .mzm-nav-fbtn.is-an .mzm-nav-flabel,
html body .mzm-nav-filter.is-on .mzm-nav-fbtn .mzm-nav-flabel{
  color:var(--m-tinte) !important;
}
/* Die Bahn bleibt sichtbar, auch wenn nav.css den Knopf einfärbt. */
html body .mzm-nav-filter .mzm-nav-fbtn .bahn{
  width:34px !important; height:20px !important;
  border-radius:var(--m-radius-rund) !important;
  background:#d7dcdc !important;
  flex:0 0 auto !important;
  position:relative !important;
}
html body .mzm-nav-fbtn.is-an .bahn,
html body .mzm-nav-filter.is-on .mzm-nav-fbtn .bahn{
  background:var(--m-teal) !important;
}
html body .mzm-nav-fbtn.is-an .bahn::after,
html body .mzm-nav-filter.is-on .mzm-nav-fbtn .bahn::after{
  left:16px !important;
}

/* ==========================================================
   B1 · Die Ansichtsreiter über dem Chordsheet
   («#mcc-content-tabs» mit «.mcc-content-tab»):
   Premium · Akkorde · Noten+

   Sie standen als einzelne helle Knöpfe da, die Symbole waren
   kaum zu erkennen. Jetzt eine Schiene wie überall — und nur
   HIER bekommt Premium eine Hervorhebung, weil es dort ein
   Angebot ist und kein gleichrangiger Bereich. In der Übersicht
   («Home · Alle Songs · Premium …») ist Premium dagegen ein
   Bereich wie jeder andere und bleibt schlicht.
   ========================================================== */
html body .mcc-content-tab{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  min-height:var(--m-hoehe-reiter) !important;
  padding:0 16px !important;
  border:none !important;
  border-radius:var(--m-radius-reiter) !important;
  background:none !important;
  background-image:none !important;
  color:var(--m-gedaempft) !important;
  font-family:var(--m-schrift-titel) !important;
  font-weight:700 !important;
  font-size:var(--m-groesse-reiter) !important;
  box-shadow:none !important;
  transform:none !important;
}
html body .mcc-content-tab.active{
  background:var(--m-weiss) !important;
  color:var(--m-teal) !important;
  box-shadow:var(--m-karte) !important;
}
/* Die Symbole waren blass und dünn — hier deutlich und in der
   Schriftfarbe. */
/* Nur die Farbe setzen, nicht fill oder stroke: Die MCC-Symbole
   mischen gefüllte und gestrichene Pfade. Wer das erzwingt, macht
   aus feinen Zeichnungen Klumpen — oder lässt sie verschwinden. */
html body .mcc-content-tab svg{
  width:18px !important; height:18px !important;
  opacity:1 !important;
}
html body .mcc-content-tab.active svg{ color:var(--m-teal) !important; }

/* v1.3.5: Premium trägt keine eigene Farbe mehr. In einer Schiene
   heisst «anders eingefärbt» für das Auge «anderer Zustand», nicht
   «besseres Angebot». Es unterscheidet sich durch den Stern.
   Zurücknehmen: die beiden Zeilen mit «C9992F» wieder auf Gold. */

/* «Abspielen» steht rechts. Seit die Ansichtsreiter eine kompakte
   Schiene sind, füllen sie die Zeile nicht mehr aus — der Knopf
   rutschte nach links nach. */
/* «Abspielen» steht ganz rechts. «margin-right:auto» an der Schiene
   schiebt alles Folgende an den Rand — unabhängig davon, wie viele
   Geschwister danach kommen. Das vorherige «+ *» traf nur das erste
   und griff nicht, wenn dazwischen noch etwas steht. */


/* ==========================================================
   Die drei Ansichtssymbole über dem Chordsheet.

   Die mitgelieferten Zeichnungen sind sehr filigran — bei 18 px
   bleibt vom Griffbrett ein Punktmuster und von der Note ein
   Strich. Statt an Grösse und Kontur zu drehen, werden sie hier
   durch klare Symbole im Meldo-Strich ersetzt: als Maske, also
   ohne Eingriff ins Markup des Plugins.
   ========================================================== */
html body .mcc-content-tab > svg,
html body .mcc-content-tab > img{ display:none !important; }

html body .mcc-content-tab::before{
  content:"" !important;
  width:19px !important;
  height:19px !important;
  flex:0 0 auto !important;
  background:currentColor !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
}
/* Premium — Stern */
html body .mcc-content-tab[data-tab="premium"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 2.7a.6.6 0 0 1 1 0l2.4 5 5.4.8c.5.1.7.7.3 1l-3.9 3.8.9 5.4a.6.6 0 0 1-.8.6L12 16.8l-4.8 2.5a.6.6 0 0 1-.8-.6l.9-5.4-3.9-3.8a.6.6 0 0 1 .3-1l5.4-.8Z'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 2.7a.6.6 0 0 1 1 0l2.4 5 5.4.8c.5.1.7.7.3 1l-3.9 3.8.9 5.4a.6.6 0 0 1-.8.6L12 16.8l-4.8 2.5a.6.6 0 0 1-.8-.6l.9-5.4-3.9-3.8a.6.6 0 0 1 .3-1l5.4-.8Z'/%3E%3C/svg%3E") !important;
}
/* Akkorde — Griffbrett */
html body .mcc-content-tab[data-tab="chords"]::before,
html body .mcc-content-tab[data-tab="akkorde"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M9 3v18M15 3v18M4 9h16M4 15h16'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M9 3v18M15 3v18M4 9h16M4 15h16'/%3E%3C/svg%3E") !important;
}
/* Noten+ — Notenblatt */
html body .mcc-content-tab[data-tab="noten"]::before,
html body .mcc-content-tab[data-tab="notenplus"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M14 2v5h5'/%3E%3Cpath d='M11 17V10l4-1v6'/%3E%3Ccircle cx='9.6' cy='17' r='1.5'/%3E%3Ccircle cx='13.6' cy='15.8' r='1.5'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M14 2v5h5'/%3E%3Cpath d='M11 17V10l4-1v6'/%3E%3Ccircle cx='9.6' cy='17' r='1.5'/%3E%3Ccircle cx='13.6' cy='15.8' r='1.5'/%3E%3C/svg%3E") !important;
}

/* ==========================================================
   B1 · Die Ansichtsreiter über dem Chordsheet — einzelne Reiter.

   Der Behälter «#mcc-content-tabs» enthält nicht nur die drei
   Reiter, sondern auch einen «.mcc-tabs-spacer» und danach die
   Aktionen bis hin zu «Abspielen». Er darf darum NICHT zur
   kompakten Schiene werden — sonst verliert der Spacer seine
   Wirkung und «Abspielen» rutscht nach links.

   v1.3.6: Darum tragen die Reiter selbst gar keinen Grund. Was
   den Zustand zeigt, ist allein das weisse Plättchen am aktiven
   Reiter — dieselbe Erscheinung wie in der Leistungsübersicht,
   nur ohne sichtbare Schiene darunter.
   ========================================================== */
/* v1.3.7: Die Leiste steht auf dem Panelgrund, nicht auf dem Weiss
   der Songkarte. Sonst liegt ein weisses Plättchen auf weissem
   Grund — der aktive Reiter verschwindet. Die obere Rundung nimmt
   die der Karte auf, weil die Leiste deren erste Zeile ist. */
html body #mcc-content-tabs{
  display:flex !important;
  align-items:center !important;
  background:var(--m-grund) !important;
  background-image:none !important;
  border-radius:var(--m-radius-karte) var(--m-radius-karte) 0 0 !important;
  box-shadow:none !important;
  padding:10px 12px !important;
  gap:6px !important;
}
html body #mcc-content-tabs .mcc-tabs-spacer{
  flex:1 1 auto !important;
  min-width:12px !important;
}
/* «display» NICHT setzen: Das MCC blendet Favorit, Playlist, Teilen
   und Info auf dem Schreibtisch bewusst aus — sie stehen dort im
   Dreipunktmenü. Wer hier «display:flex» erzwingt, holt sie zurück. */
html body #mcc-content-tabs .mcc-tabs-actions{
  align-items:center !important;
  gap:8px !important;
  flex:0 0 auto !important;
}

html body .mcc-content-tab{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  min-height:var(--m-hoehe-reiter) !important;
  padding:0 16px !important;
  border:none !important;
  border-radius:var(--m-radius-reiter) !important;
  background:none !important;
  background-image:none !important;
  color:var(--m-gedaempft) !important;
  font-family:var(--m-schrift-titel) !important;
  font-weight:700 !important;
  font-size:var(--m-groesse-reiter) !important;
  box-shadow:none !important;
  transform:none !important;
  transition:var(--m-uebergang) !important;
}
html body .mcc-content-tab:hover{
  background:none !important;
  color:var(--m-teal) !important;
}
html body .mcc-content-tab.active{
  background:var(--m-weiss) !important;
  color:var(--m-teal) !important;
  box-shadow:var(--m-karte) !important;
}

/* Auch der Behälter des Zusatzmaterial-Schalters trägt keine Form. */
html body .mzm-nav-filter{
  border:none !important;
  background:none !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
}
html body .mzm-nav-filter .mzm-nav-fbtn,
html body .mzm-nav-filter.is-on .mzm-nav-fbtn,
html body .mzm-nav-filter .mzm-nav-fbtn:hover{
  border:none !important;
  border-color:transparent !important;
  background:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  transform:none !important;
}

/* --- B1 · Das Symbol im aktiven Reiter.

   «.mcc-library-tabs .mcc-tab.active svg { fill:#fff }» war richtig,
   solange der aktive Reiter türkis gefüllt war. Seit er weiss ist,
   verschwindet das Symbol darin. Hier folgt es wieder der
   Schriftfarbe — und behält damit auch seinen Farbton aus der
   Reihe. --- */
html body .mcc-library-tabs .mcc-tab.active svg,
html body .mcc-tab.active svg,
html body .mcc-tab-btn.active svg,
html body .mcc-nav-btn.active svg,
html body .mcc-si-tab.active svg{
  fill:currentColor !important;
}

/* --- B1 · Die Reitersymbole der Songübersicht.

   Sie sitzen in «.mcc-tab-icon» und werden über «stroke» gefärbt.
   Im aktiven Reiter stand «stroke:white» — richtig, solange der
   Reiter türkis gefüllt war, unsichtbar seit er weiss ist.

   Jetzt folgt der Strich der Schriftfarbe, damit jedes Symbol
   seinen Ton behält: die vom Plugin gesetzten Farben für Favoriten
   und Premium bleiben, alle übrigen türkis. --- */
html body .mcc-tab-btn.active .mcc-tab-icon svg,
html body .mcc-tab-btn.active .mcc-tab-icon svg *{
  stroke:currentColor !important;
  fill:none !important;
}
html body .mcc-tab-btn.active .mcc-tab-icon{ color:var(--m-teal) !important; }
html body .mcc-tab-btn.active .mcc-tab-icon--fav{ color:#E74C3C !important; }
html body .mcc-tab-btn.active .mcc-tab-icon--premium{ color:#D4910A !important; }

/* Auch im Ruhezustand behält jedes Symbol seinen Ton — die Regel
   «.mcc-tab-icon svg { stroke:#3D7C85 }» färbt sonst alle gleich. */
html body .mcc-tabs-navigation .mcc-tab-btn:nth-of-type(2) .mcc-tab-icon svg{ stroke:#3C8FC7 !important; }
html body .mcc-tabs-navigation .mcc-tab-btn:nth-of-type(4) .mcc-tab-icon svg{ stroke:#B05CA8 !important; }
html body .mcc-tabs-navigation .mcc-tab-btn:nth-of-type(5) .mcc-tab-icon svg{ stroke:#629394 !important; }
html body .mcc-tabs-navigation .mcc-tab-btn:nth-of-type(2).active .mcc-tab-icon{ color:#3C8FC7 !important; }
html body .mcc-tabs-navigation .mcc-tab-btn:nth-of-type(4).active .mcc-tab-icon{ color:#B05CA8 !important; }
html body .mcc-tabs-navigation .mcc-tab-btn:nth-of-type(5).active .mcc-tab-icon{ color:#629394 !important; }

/* Die Reiterleiste der Songübersicht ebenfalls als Schiene. */
html body .mcc-tabs-navigation{
  display:inline-flex !important;
  flex-wrap:wrap !important;
  gap:3px !important;
  padding:3px !important;
  background:var(--m-schiene) !important;
  border:none !important;
  border-radius:var(--m-radius-schiene) !important;
  box-shadow:none !important;
  max-width:100% !important;
}

/* --- A4 · «.mcc-nav-btn» in der Kopfzeile ist KEIN Reiter.

   Der Name legt es nahe, aber im «.mcc-nav-more-wrapper» ist es der
   Dreipunktknopf. Als Reiter bekam er 40 px Höhe und breiten
   Innenabstand — damit passte die Kopfzeile nicht mehr in eine
   Zeile und er rutschte auf die nächste. --- */
html body .mcc-header-nav{
  flex-wrap:nowrap !important;
}
html body .mcc-nav-more-wrapper{
  flex:0 0 auto !important;
}
html body .mcc-nav-more-wrapper .mcc-nav-btn,
html body .mcc-header-nav .mcc-nav-more-wrapper > .mcc-nav-btn{
  width:36px !important;
  min-width:36px !important;
  max-width:36px !important;
  height:36px !important;
  min-height:36px !important;
  padding:0 !important;
  gap:0 !important;
  border:none !important;
  border-radius:var(--m-radius) !important;
  background:none !important;
  color:var(--m-gedaempft) !important;
  box-shadow:none !important;
  flex:0 0 auto !important;
}
html body .mcc-nav-more-wrapper .mcc-nav-btn:hover{
  background:var(--m-schiene) !important;
  color:var(--m-teal) !important;
}

/* ==========================================================
   v1.2.13 — Der Dreipunkt rutschte auf dem Handy in die
   zweite Zeile. Das lag nicht an den Bedienmustern:

     .mcc-header-content > .mcc-header-special-btns { flex:1 1 auto }
     .mcc-header-special-btns .mcc-header-special-btn { flex:1 1 0 }

   «Meine Musik» und «Audioplayer» wachsen damit, bis die Zeile
   voll ist — für «.mcc-header-nav» bleibt nichts übrig, und der
   Behälter hat «flex-wrap:wrap». Also bricht er um.

   Hier wachsen die beiden nur noch bis zu ihrer natürlichen
   Breite, und der Dreipunkt behält seinen Platz.
   ========================================================== */
@media (max-width:768px){
  html body .mcc-header-content > .mcc-header-special-btns{
    flex:0 1 auto !important;
    min-width:0 !important;
  }
  html body .mcc-header-special-btns .mcc-header-special-btn{
    flex:0 1 auto !important;
    min-width:0 !important;
  }
  html body .mcc-header-content > .mcc-header-nav{
    flex:0 0 auto !important;
    margin-left:6px !important;
  }
  /* Wird es doch einmal eng, verkürzen sich die Beschriftungen,
     statt dass eine Zeile umbricht. */
  html body .mcc-header-special-btns .mcc-special-btn-label{
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
}

/* ==========================================================
   v1.2.14 — Die Kopfzeile in der Übersicht bleibt einzeilig.

   Das MCC zeigt «Meine Musik» und «Audioplayer» ausserhalb der
   Übersicht als 40-px-Symbolknöpfe und IN der Übersicht als
   Pillen mit Text («.mcc-on-overview»). Die Klasse setzt das JS
   nachträglich — daher das kurze Aufblitzen der kleinen Knöpfe.

   Mit Text sind die Pillen zu breit, der Dreipunkt rutschte in
   die zweite Zeile. Jetzt dürfen sie schrumpfen, und auf sehr
   schmalen Schirmen zeigen sie nur noch das Symbol — dieselbe
   Lösung, die das MCC ausserhalb der Übersicht ohnehin wählt.
   ========================================================== */
@media (max-width:768px){
  html body .mcc-on-overview .mcc-header-special-btn{
    min-width:0 !important;
    max-width:none !important;
    overflow:hidden !important;
    padding:0 10px !important;
  }
  html body .mcc-on-overview .mcc-special-btn-label{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
}
@media (max-width:520px){
  /* Zu eng für Text: nur noch die Symbole, wie ausserhalb der
     Übersicht auch. So bleibt die Zeile in jedem Fall geschlossen. */
  html body .mcc-on-overview .mcc-header-special-btn{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    padding:0 !important;
    justify-content:center !important;
  }
  html body .mcc-on-overview .mcc-special-btn-label{
    display:none !important;
  }
}

/* --- Die Einträge im Aktions-Sheet sind Zeilen, keine Knöpfe.

   Im Original: «display:flex; width:100%; padding:14px 20px;
   background:transparent» — eine Liste. Weil «.mcc-sheet-action»
   bei den Nebenaktionen stand, bekam jeder Eintrag einen Rahmen
   und die Liste zerfiel in Kacheln. --- */
html body .mcc-sheet-actions{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
}
html body .mcc-sheet-action{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:16px !important;
  width:100% !important;
  min-height:52px !important;
  padding:14px 20px !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  color:var(--m-tinte) !important;
  font-family:var(--m-schrift-titel) !important;
  font-weight:600 !important;
  font-size:.95rem !important;
  text-align:left !important;
  box-shadow:none !important;
  transform:none !important;
}
html body .mcc-sheet-action:hover,
html body .mcc-sheet-action:active{
  background:#F5F6F7 !important;
  border:none !important;
  color:var(--m-teal) !important;
  transform:none !important;
}
html body .mcc-sheet-action svg{
  width:20px !important; height:20px !important;
  flex:0 0 auto !important;
  color:var(--m-gedaempft) !important;
}
html body .mcc-sheet-action:hover svg{ color:var(--m-teal) !important; }

/* ==========================================================
   v1.2.16 — Richtigstellung nach Prüfung im Original-CSS.

   Diese Klassen standen bei den Nebenaktionen, weil ihr Name
   danach klang. Ein Blick in frontend.css zeigt, was sie sind:
     .mcc-action-btn         40×40  → Symbolaktion
     .mcc-discovery-action   44×44, rund → Symbolaktion
     .mcc-tb-btn             36×36  → Symbolaktion
     .mcc-material-btn       40×40  → Symbolaktion
     .mcc-home-more-btn      ohne Fläche, türkis → stille Aktion
     .mcc-instrument-btn     6×10 px, 0.75rem → Wertreihe

   Lehre: erst ins Markup und ins Original-CSS schauen, dann
   einordnen. Nach Namen zu sortieren erwischt Menüzeilen,
   Symbolknöpfe und Chips gleichermassen falsch.
   ========================================================== */

/* A4 · Symbolaktionen */
html body .mcc-action-btn,
html body .mcc-tb-btn,
html body .mcc-material-btn,
html body .mcc-material-btn-preview,
html body .mcc-material-btn-download{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:40px !important; min-width:40px !important; max-width:40px !important;
  height:40px !important; min-height:40px !important;
  padding:0 !important;
  gap:0 !important;
  flex:0 0 auto !important;
  border:var(--m-rand) solid var(--m-linie) !important;
  border-radius:var(--m-radius) !important;
  background:var(--m-weiss) !important;
  background-image:none !important;
  color:var(--m-tinte) !important;
  box-shadow:none !important;
  transition:var(--m-uebergang) !important;
}
html body .mcc-action-btn:hover,
html body .mcc-tb-btn:hover,
html body .mcc-material-btn:hover{
  border-color:var(--m-teal) !important;
  color:var(--m-teal) !important;
  background:var(--m-weiss) !important;
}
/* Rund, wie im Original. */
html body .mcc-discovery-action{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:44px !important; min-width:44px !important; max-width:44px !important;
  height:44px !important;
  padding:0 !important;
  flex:0 0 auto !important;
  border:var(--m-rand) solid var(--m-linie) !important;
  border-radius:50% !important;
  background:var(--m-weiss) !important;
  color:var(--m-tinte) !important;
  box-shadow:none !important;
}
html body .mcc-discovery-action:hover{
  border-color:var(--m-teal) !important; color:var(--m-teal) !important;
}

/* A3 · stille Aktion */
html body .mcc-home-more-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  min-height:var(--m-hoehe) !important;
  padding:0 .6rem !important;
  border:none !important;
  border-radius:var(--m-radius) !important;
  background:none !important;
  color:var(--m-teal) !important;
  font-family:var(--m-schrift-titel) !important;
  font-weight:600 !important;
  font-size:.88rem !important;
  box-shadow:none !important;
}
html body .mcc-home-more-btn:hover{
  background:var(--m-teal-l) !important;
  color:var(--m-teal-d) !important;
  transform:none !important;
}

/* C1 · Wertreihe */
html body .mcc-instrument-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  min-height:32px !important;
  height:auto !important;
  width:auto !important;
  padding:0 .7rem !important;
  border:1px solid var(--m-linie) !important;
  border-radius:var(--m-radius-rund) !important;
  background:var(--m-weiss) !important;
  color:var(--m-gedaempft) !important;
  font-family:var(--m-schrift-titel) !important;
  font-weight:600 !important;
  font-size:.78rem !important;
  box-shadow:none !important;
}
html body .mcc-instrument-btn.active,
html body .mcc-instrument-btn.on{
  background:var(--m-teal) !important;
  border-color:var(--m-teal) !important;
  color:var(--m-weiss) !important;
}
html body .mcc-instrument-btn svg{ width:14px !important; height:14px !important; }

/* ==========================================================
   v1.3.2 — «Abspielen» ist kein Reiter, aber mobil ein
   Symbolknopf.

   Im Markup trägt er «mcc-content-tab mcc-audio-tab» und sitzt
   in derselben Leiste wie Premium, Akkorde und Noten+. Als
   Segment wurde er grau, und mit «.active» weiss auf weiss —
   er verschwand.

   Auf dem Handy ist er im MCC bewusst anders gebaut:
     @media (max-width:768px) .mcc-audio-split { display:none }
     @media (max-width:768px) .mcc-audio-tab  { width:40px; height:40px }
   also ein 40-px-Symbolknopf ohne Pfeilmenü. In v1.3.1 hatte
   ich das überschrieben und damit die mobile Darstellung
   ausgehebelt.

   Darum gilt alles Folgende NUR ab 769 px. Darunter bleibt der
   Bestand unangetastet.
   ========================================================== */
@media (min-width:769px){
  html body .mcc-content-tab.mcc-audio-tab,
  html body .mcc-content-tab.mcc-audio-tab.active,
  html body #mcc-tabs-audio-btn,
  html body #mcc-tabs-audio-btn.active{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    min-height:var(--m-hoehe) !important;
    padding:0 1.1rem !important;
    margin-left:10px !important;
    border:none !important;
    border-radius:var(--m-radius) !important;
    color:var(--m-weiss) !important;
    font-family:var(--m-schrift-titel) !important;
    font-weight:700 !important;
    font-size:var(--m-groesse-knopf) !important;
    box-shadow:none !important;
  }
  html body .mcc-content-tab.mcc-audio-tab .mcc-tab-text,
  html body #mcc-tabs-audio-btn .mcc-tab-text{
    color:var(--m-weiss) !important;
  }
}

/* Der Segment-Grund darf ihn in keiner Breite treffen — er ist
   die Hauptaktion, kein Reiter. Farbe und Verlauf kommen vom
   MCC selbst. */
html body .mcc-content-tab.mcc-audio-tab,
html body .mcc-content-tab.mcc-audio-tab.active{
  background-color:transparent !important;
}
html body #mcc-content-tabs .mcc-audio-tab::before{ display:none !important; }
html body #mcc-content-tabs .mcc-audio-tab:first-of-type,
html body #mcc-content-tabs .mcc-audio-tab:nth-of-type(3){
  border-radius:var(--m-radius) !important;
}

/* ==========================================================
   v1.3.3 — «Abspielen» bleibt sichtbar, in jedem Zustand.

   Im MCC steht:
     .mcc-audio-tab span, #mcc-tabs-audio-btn span {
       display:none !important; visibility:hidden !important;
     }
   Jedes <span> im Knopf wird ausgeblendet — gedacht für den
   mobilen Symbolknopf, der nur das Zeichen zeigen soll. Sitzt
   das Zeichen selbst in einem <span> oder wird nach dem Klick
   eines eingesetzt, bleibt der Knopf leer: klickbar, aber
   unsichtbar.

   Darum hier eine Absicherung, unabhängig davon, welche Klasse
   der Klick setzt: Fläche, Farbe und Zeichen bleiben.
   ========================================================== */
html body #mcc-tabs-audio-btn,
html body .mcc-content-tab.mcc-audio-tab{
  opacity:1 !important;
  visibility:visible !important;
  min-width:40px !important;
  min-height:40px !important;
  overflow:visible !important;
}
/* Das Zeichen im Knopf bleibt, auch wenn es in einem <span> sitzt. */
html body #mcc-tabs-audio-btn svg,
html body .mcc-content-tab.mcc-audio-tab svg,
html body #mcc-tabs-audio-btn > span:has(svg),
html body .mcc-content-tab.mcc-audio-tab > span:has(svg){
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
}
html body #mcc-tabs-audio-btn svg,
html body .mcc-content-tab.mcc-audio-tab svg{
  width:18px !important;
  height:18px !important;
  fill:currentColor !important;
  color:var(--m-weiss) !important;
}
/* Ab Tabletbreite auch die Beschriftung. */
@media (min-width:769px){
  html body #mcc-tabs-audio-btn .mcc-tab-text,
  html body .mcc-content-tab.mcc-audio-tab .mcc-tab-text{
    display:inline !important;
    visibility:visible !important;
    width:auto !important;
    height:auto !important;
    overflow:visible !important;
    color:var(--m-weiss) !important;
  }
}

/* ==========================================================
   v1.3.4 — Der mobile Abspiel-Knopf.

   «<button class="mcc-tb-btn mcc-mobile-play">» trägt die Klasse
   der Symbolknöpfe — und die habe ich in v1.3.0 auf weisse
   Fläche mit dunklem Zeichen gesetzt. Das MCC setzt zugleich
   «.mcc-mobile-play svg { fill:#fff }». Weisses Zeichen auf
   weisser Fläche: unsichtbar, aber klickbar.

   Er ist die Hauptaktion und behält seinen Verlauf. Dieselbe
   Falle wie bei «Abspielen» am Schreibtisch — eine Klasse, zwei
   Rollen.
   ========================================================== */
html body .mcc-tb-btn.mcc-mobile-play,
html body #mcc-mobile-play{
  background:linear-gradient(135deg,#3D7C85,#E8924F) !important;
  background-color:transparent !important;
  border:none !important;
  color:var(--m-weiss) !important;
  box-shadow:none !important;
}
html body .mcc-tb-btn.mcc-mobile-play svg,
html body #mcc-mobile-play svg{
  fill:var(--m-weiss) !important;
  stroke:none !important;
  color:var(--m-weiss) !important;
  opacity:1 !important;
  visibility:visible !important;
}
html body .mcc-tb-btn.mcc-mobile-play:hover,
html body #mcc-mobile-play:hover{
  background:linear-gradient(135deg,#1F737A,#E47E29) !important;
  border:none !important;
  color:var(--m-weiss) !important;
}