/* Meldo Bedienmuster — Rahmen C (ab 1.5.0, Konzept «Design angleichen», Freigabe Manuel 2.11.2026).
 *
 * Alles, was den Look an die Startseite angleicht, steht in dieser einen Datei. Abhängen = eine Zeile
 * in meldo-bedienmuster.php; dann gilt wieder 1.4.1 (Knopfradien und Schiene stehen in tokens.css).
 *
 *   1  B1 Ansichtswechsler als Kapsel mit gleitendem Feld (Apple «Segmented Control»)
 *   2  Kopf der Dashboard-Reiter: Symbolkachel in der Gruppenfarbe, Titel 28 px, ohne Verlaufslinie
 *   3  Flächen auf dem Grund: Radius 24, zweilagiger Schatten, kein Rahmen
 *
 * Ausnahme: Die Landingpage nutzt «.m-wechsel.p5-wahl» (Abo-Seite) und «.m-wechsel.hero-reiter» (Startseite,
 * auf dem Hero-Bild) als Unterstrich-Reiter mit eigenen Regeln – diese Schienen bleiben unberührt (1.5.2/1.5.3).
 * gleiten.js lässt zudem jede Schiene ohne eigenen Grund (transparent) aus.
 *
 * Selektoren: «:not(#m-x)» hebt die Spezifität um eine ID – so schlägt eine Regel hier die Plugin-Regeln
 * (auch «html body .panel.active[data-panel] .x.active»), ohne dass jede Kette nachgebaut werden muss.
 * Meldo Schlank wertet :not()/:is() nicht – diese Regeln bleiben in jeder Kopie (klein).
 */

/* ==========================================================
   1 · B1 — KAPSEL
   ========================================================== */
html body :is(
  .m-wechsel, .meldo-settings-toggle, .meldo-toggle-container, .meldo-drawer-tabs,
  .meldotools-app .nav-tabs, .meldo-lg-subnav, .meldo-lp-tabs, .mg-cm-nav, .mg-pfnav, .meldo-sparten-segs,
  .mcc-tabs, .mcc-tab-nav, .mcc-segmented, .mcc-settings-segmented, .mcc-builder-tabs, .mcc-si-tabs,
  .mcc-style-cat-tabs, .mcc-style-category-tabs, .mcc-diagrams-tabs, .mcc-library-tabs, .mcc-sb-sheet-tabs,
  .mcc-perc-tabs, .mcc-tabs-navigation
):not(#m-x):not(.p5-wahl):not(.hero-reiter){
  border-radius:var(--m-radius-schiene) !important;
  background:var(--m-schiene) !important;
  background-image:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:3px !important;
  gap:2px !important;
  position:relative !important;
  isolation:isolate;
}

/* Die Reiter selbst. */
html body :is(
  .m-reiter, .meldo-toggle-btn, .meldo-settings-toggle-btn, .meldo-drawer-tab, .meldo-lg-subtab, .meldo-lp-tab,
  .meldotools-app .nav-tab, .mg-cm-tab, .mg-ht, .meldo-sparten-segs .meldo-sp-seg,
  .mcc-tab, .mcc-tab-btn, .mcc-segmented-btn, .mcc-mode-btn, .mcc-si-tab, .mcc-song-info-tab, .mcc-style-cat-tab,
  .mcc-diagrams-tab, .mcc-content-tab:not(.mcc-audio-tab), .mcc-builder-tab, .mcc-builder-subtab,
  .mcc-builder-viewtab, .mcc-premium-subtab
):not(#m-x):not(:is(.p5-wahl, .hero-reiter) > *){
  border-radius:var(--m-radius-reiter) !important;
  position:relative;
  z-index:1;
}
html body :is(
  .m-reiter, .meldo-toggle-btn, .meldo-settings-toggle-btn, .meldo-drawer-tab, .meldo-lg-subtab, .meldo-lp-tab,
  .meldotools-app .nav-tab, .mg-cm-tab, .mg-ht, .meldo-sparten-segs .meldo-sp-seg,
  .mcc-tab, .mcc-tab-btn, .mcc-segmented-btn, .mcc-mode-btn, .mcc-si-tab, .mcc-song-info-tab, .mcc-style-cat-tab,
  .mcc-diagrams-tab, .mcc-builder-tab, .mcc-builder-subtab, .mcc-builder-viewtab, .mcc-premium-subtab
):not(#m-x):not(:is(.p5-wahl, .hero-reiter) > *):hover{
  color:var(--m-tinte) !important;
}

/* Aktiv: weiss gehoben, Schrift in Tinte (Frage 2: Türkis bleibt für Handlungen). Das Symbol wird
   türkis, ausser wo die Plugins ihm eine eigene Farbe geben (Leistung, Songübersicht). */
html body :is(
  .m-reiter.is-aktiv, .meldo-toggle-btn.active, .meldo-settings-toggle-btn.active, .meldo-drawer-tab.active,
  .meldo-lg-subtab.active, .meldo-lp-tab.active, .meldotools-app .nav-tab.active, .mg-cm-tab.active, .mg-ht.active,
  .meldo-sparten-segs .meldo-sp-seg.active, .meldo-sparten-segs .meldo-sp-seg.is-active,
  .mcc-tab.active, .mcc-tab[aria-selected="true"], .mcc-tab-btn.active, .mcc-tab-btn[aria-selected="true"],
  .mcc-segmented-btn.active, .mcc-mode-btn.active, .mcc-si-tab.active, .mcc-song-info-tab.active,
  .mcc-style-cat-tab.active, .mcc-diagrams-tab.active, .mcc-content-tab.active:not(.mcc-audio-tab),
  .mcc-builder-tab.active, .mcc-builder-subtab.active, .mcc-builder-viewtab.active, .mcc-premium-subtab.active
):not(#m-x):not(:is(.p5-wahl, .hero-reiter) > *){
  background:var(--m-weiss) !important;
  background-image:none !important;
  color:var(--m-tinte) !important;
  box-shadow:var(--m-schatten-daumen) !important;
}
html body :is(.m-reiter.is-aktiv, .meldo-lp-tab.active, .meldotools-app .nav-tab.active, .mg-cm-tab.active,
  .meldo-toggle-btn.active, .meldo-settings-toggle-btn.active, .mcc-segmented-btn.active):not(#m-x):not(:is(.p5-wahl, .hero-reiter) > *) svg{
  color:var(--m-teal) !important;
}

/* Gleitendes Feld (assets/js/gleiten.js setzt data-m-gleit und die Masse). Ohne Skript bleibt der aktive
   Reiter selbst weiss – nichts fehlt. */
html body [data-m-gleit]:not(#m-x)::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important; top:0 !important;
  width:var(--m-gw,0px) !important; height:var(--m-gh,0px) !important;
  transform:translate(var(--m-gx,0px),var(--m-gy,0px)) !important;
  border-radius:var(--m-radius-reiter) !important;
  background:var(--m-weiss) !important;
  box-shadow:var(--m-schatten-daumen) !important;
  z-index:0 !important;
  pointer-events:none !important;
  display:block !important;
  transition:transform var(--m-gleiten), width var(--m-gleiten), height var(--m-gleiten) !important;
}
html body [data-m-gleit][data-m-ruhe]:not(#m-x)::before{ transition:none !important; }
html body [data-m-gleit]:not(#m-x) > :is(.is-aktiv,.active,.is-active,[aria-selected="true"]):not(#m-y){
  background:transparent !important;
  box-shadow:none !important;
}
@media (prefers-reduced-motion:reduce){
  html body [data-m-gleit]:not(#m-x)::before{ transition:none !important; }
}

/* Handy: Kapseln brechen nicht um, sie lassen sich wischen. */
@media (max-width:768px){
  html body :is(
    .m-wechsel, .meldo-toggle-container, .meldo-drawer-tabs, .meldotools-app .nav-tabs, .meldo-lg-subnav,
    .meldo-lp-tabs, .mg-cm-nav, .mg-pfnav, .meldo-sparten-segs, .mcc-tabs-navigation, .mcc-style-cat-tabs
  ):not(#m-x):not(.p5-wahl):not(.hero-reiter){
    flex-wrap:nowrap !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  html body :is(
    .m-wechsel, .meldo-toggle-container, .meldo-drawer-tabs, .meldotools-app .nav-tabs, .meldo-lg-subnav,
    .meldo-lp-tabs, .mg-cm-nav, .mg-pfnav, .meldo-sparten-segs, .mcc-tabs-navigation, .mcc-style-cat-tabs
  ):not(#m-x)::-webkit-scrollbar{ display:none; }
}

/* ==========================================================
   2 · KOPF DER DASHBOARD-REITER
   Symbolkachel bleibt (das «App-Icon» des Bereichs), jetzt in der Gruppenfarbe der Reiterleiste statt
   im Markenverlauf. Die grüne Verlaufslinie fällt weg: Der Markenverlauf gehört Logo und Werbung.
   ========================================================== */
html body :is(.meldo-tab-header-card, .meldo-tab-header, .meldo-widget-header,
  .meldo-lp-display-wrapper > .meldo-card:first-of-type):not(#m-x)::after{
  display:none !important;
}
html body :is(.meldo-tab-header-card, .meldo-tab-header, .meldo-widget-header):not(#m-x){
  padding-bottom:0 !important;
  margin-bottom:20px !important;
  column-gap:14px !important;
}
html body :is(.meldo-tab-header-icon, .meldo-lp-display-wrapper .meldo-heading-ic):not(#m-x),
html body .meldo-tab-header:not(#m-x)::before,
html body .meldo-widget-header:not(#m-x)::before{
  width:46px !important; height:46px !important; flex:0 0 auto !important;
  border-radius:14px !important;
  background:var(--m-kopf-farbe, var(--m-gruppe-inhalt)) !important;
  background-image:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 8px rgba(26,52,56,.10) !important;
}
html body .meldo-tab-header-icon:not(#m-x) :is(svg,img){ width:24px !important; height:24px !important; }
html body :is(.meldo-tab-header-title, .meldo-lp-display-wrapper .meldo-heading):not(#m-x){
  font-size:1.75rem !important;
  line-height:1.15 !important;
  letter-spacing:-.01em !important;
  color:var(--m-tinte) !important;
}
html body :is(.meldo-tab-header-desc, .meldo-widget-subtitle):not(#m-x){
  font-size:.9rem !important;
  color:var(--m-gedaempft) !important;
  margin-top:3px !important;
}
/* Der Kopf des Unterricht-Widgets («Heute») ist eine Stufe unter dem Reiter-Kopf. */
html body .meldo-widget-header:not(#m-x)::before{ width:40px !important; height:40px !important; border-radius:12px !important; }
html body .meldo-widget-header:not(#m-x){ margin-bottom:14px !important; }

/* Gruppenfarbe je Reiter – dieselbe wie das Symbol in der Reiterleiste. */
html body .meldo-tab-panel:is([data-panel="start"],[data-panel="songs"],[data-panel="liederbuch"]){ --m-kopf-farbe:var(--m-gruppe-inhalt); }
html body .meldo-tab-panel:is([data-panel="lernpfad"],[data-panel="leistung"],[data-panel="instrumental"]){ --m-kopf-farbe:var(--m-gruppe-lernen); }
html body .meldo-tab-panel[data-panel="ueben"]{ --m-kopf-farbe:var(--m-gruppe-training); }
html body .meldo-tab-panel[data-panel="musiktools"]{ --m-kopf-farbe:var(--m-gruppe-tools); }
html body .meldo-tab-panel:is([data-panel="profil"],[data-panel="pinnwand"],[data-panel="unterricht"],[data-panel="notizen"]){ --m-kopf-farbe:var(--m-gruppe-persoenlich); }

@media (max-width:768px){
  html body :is(.meldo-tab-header-icon, .meldo-lp-display-wrapper .meldo-heading-ic):not(#m-x),
  html body .meldo-tab-header:not(#m-x)::before,
  html body .meldo-widget-header:not(#m-x)::before{
    width:40px !important; height:40px !important; border-radius:12px !important;
  }
  html body .meldo-tab-header-icon:not(#m-x) :is(svg,img){ width:21px !important; height:21px !important; }
  html body :is(.meldo-tab-header-title, .meldo-lp-display-wrapper .meldo-heading):not(#m-x){
    font-size:1.3rem !important;
  }
  html body :is(.meldo-tab-header-card, .meldo-tab-header, .meldo-widget-header):not(#m-x){ margin-bottom:14px !important; }
}

/* ==========================================================
   3 · FLÄCHEN AUF DEM GRUND
   Was flaechen.css als Karte je Panel-Kind zeichnet, wird eine Fläche wie auf der Startseite.
   ========================================================== */
html body .meldo-tab-panel.active:is([data-panel="liederbuch"],[data-panel="pinnwand"],[data-panel="notizen"],[data-panel="musiktools"])
  > :not(.meldo-tab-header-card):not(.meldo-tab-header):not(script):not(style):not(template):not([hidden]):not(.meldo-modal):not(.meldo-overlay):not(.meldo-sheet):not(.mts-sheet):not(.meldo-bottom-sheet){
  border-radius:var(--m-radius-flaeche) !important;
  box-shadow:var(--m-schatten-flaeche) !important;
  border:none !important;
}
/* 1.5.1 · Musiktools: Das Dashboard setzt «.meldotools-app { all: initial }» – damit ist die Fläche ein
   Inline-Element, und Radius und Schatten wurden zeilenweise als Streifen hinter der Kapsel gezeichnet
   (Meldung Manuel 2.11.). Die Werkzeugkacheln stehen dort wie bisher direkt auf dem Grund. */
html body .meldo-tab-panel.active[data-panel="musiktools"] > .meldotools-app:not(#m-x){
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

html body .meldo-tab-panel.active :is(.meldo-card, .mg-card):not(#m-x):not(.meldo-lp-display-wrapper > .meldo-card:first-of-type){
  border-radius:var(--m-radius-flaeche) !important;
  border-color:transparent !important;
  box-shadow:var(--m-schatten-flaeche) !important;
}
@media (max-width:900px){
  html body .meldo-tab-panel.active:is([data-panel="liederbuch"],[data-panel="pinnwand"],[data-panel="notizen"],[data-panel="musiktools"])
    > :not(.meldo-tab-header-card):not(.meldo-tab-header):not(script):not(style){
    border-radius:20px !important;
  }
}

/* 1.5.5 · Gemeinsamer Kopf «Unterricht · Notizen» (Dashboard, [data-meldo-unt-kopf]) ist keine Fläche. Im Reiter
   «Notizen» machte die Regel «jedes Panel-Kind wird eine Fläche» (oben und flaechen.css) daraus einen Kasten mit
   Schatten um Titel und Umschalter; im Reiter «Unterricht» greift sie nicht (Meldung Manuel 3.11.). */
html body .meldo-tab-panel.active > [data-meldo-unt-kopf]:not(#m-x){
  background:none !important;
  box-shadow:none !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 !important;
}