/* Meldo Bedienmuster — Flächen.
 *
 * Drei Ebenen, drei Töne: Seite grau, Karte weiss mit Tiefe, Inhalt
 * getönt ohne Rahmen. Davor waren Karte und Inhalt beide weiss —
 * darum lag alles gleich weit vorn.
 *
 * Dazu die Titelköpfe: Symbolquadrat mit Verlauf, Akko-Titel,
 * Welle als Abtrennung. Übernommen aus meldo-audiotools
 * (class-shortcode.php, .meldo-tool-header), damit die Werkzeuge und
 * die Tabs denselben Kopf tragen.
 *
 * ACHTUNG: Dieser Teil ist auf das Dashboard zugeschnitten
 * (Panelgründe je data-panel). Er lässt sich in meldo-bedienmuster.php
 * in einer Zeile abhängen, ohne die Arten zu verlieren.
 */

/* ==========================================================
   FLÄCHEN — drei Ebenen, drei Töne.
   Seite grau, Karte weiss mit Tiefe, Inhalt getönt ohne Rahmen.
   Vorher waren Karte und Inhalt beide weiss mit Rahmen; darum
   lag alles gleich weit vorn.
   ========================================================== */

/* --- A2 · Einstiegskachel. Ein Verzeichnis, keine Handlung:
       getönter Grund, kein Rahmen, kein Schatten. --- */
body .m-kachel,
body .meldo-tt-tile{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  min-height:44px !important;
  height:auto !important;
  padding:0 16px 0 8px !important;
  border:1px solid transparent !important;
  border-radius:12px !important;
  background:#F4F6F6 !important;
  background-image:none !important;
  color:var(--m-tinte) !important;
  font-family:'Akko',sans-serif !important;
  font-weight:600 !important;
  font-size:.92rem !important;
  line-height:1 !important;
  text-decoration:none !important;
  box-shadow:none !important;
  transition:var(--m-uebergang) !important;
}
body .m-kachel:hover,
body .meldo-tt-tile:hover{
  background:var(--m-teal-l) !important;
  border-color:transparent !important;
  color:var(--m-tinte) !important;
  transform:none !important;
  box-shadow:none !important;
}
body .meldo-tt-tile .meldo-tt-tic{
  width:30px !important; height:30px !important;
  border-radius:9px !important;
  background:var(--m-weiss) !important;
  color:var(--m-teal) !important;
  flex:0 0 auto !important;
}
body .meldo-tt-tile:hover .meldo-tt-tic{ background:var(--m-weiss) !important; }
body .meldo-tt-tile .meldo-tt-nm{ font-weight:600 !important; font-size:.92rem !important; }

/* --- Die Karten der Startseite tragen die Tiefe, nicht die Linie. --- */
body .meldo-tab-panel.active[data-panel="start"]>.meldo-quick,
body .meldo-tab-panel.active[data-panel="start"]>.meldo-kurse-sektion,
body .meldo-tab-panel.active[data-panel="start"]>.meldo-start-lp,
body .meldo-tab-panel.active[data-panel="start"]>#meldoTeacherTools{
  border-color:#EDF2F2 !important;
  box-shadow:0 2px 12px rgba(26,52,56,.055) !important;
}

/* --- Fix: themen-sheet.css schlug die Schicht über die Spezifität.
       Damit standen wieder zwei gefüllte Knöpfe auf einer Seite. --- */
body .meldo-quick .mq-head .mq-themen,
body .meldo-quick .mq-head .mq-themen--fremd{
  background:var(--m-weiss) !important;
  background-image:none !important;
  border:1.5px solid var(--m-linie) !important;
  color:var(--m-tinte) !important;
  box-shadow:none !important;
}
body .meldo-quick .mq-head .mq-themen:hover,
body .meldo-quick .mq-head .mq-themen:focus-visible,
body .meldo-quick .mq-head .mq-themen--fremd:hover,
body .meldo-quick .mq-head .mq-themen--fremd:focus-visible{
  background:var(--m-weiss) !important;
  border-color:var(--m-teal) !important;
  color:var(--m-teal) !important;
}

/* ==========================================================
   MOBIL — dieselben Formen, nur enger.
   meldo-mobile-start.css setzt eigene Höhen und Radien mit
   höherer Spezifität; hier werden sie wieder eingefangen.
   ========================================================== */
@media (max-width:900px){

  /* A2 · «Zur Lernwelt» war mobil eine Pille, «Alle Themen» daneben
     eckig — zwei Formen für dieselbe Art. */
  body .meldo-tab-panel.active[data-panel="start"] .meldo-lernwelt-btn{
    min-height:44px !important;
    padding:0 1rem !important;
    border-radius:10px !important;
    border:1.5px solid var(--m-linie) !important;
    background:var(--m-weiss) !important;
    color:var(--m-tinte) !important;
    font-size:.92rem !important;
  }
  body .meldo-tab-panel.active[data-panel="start"] .meldo-lernwelt-btn svg{
    width:18px !important; height:18px !important;
  }

  /* A4 · «andere Stufe» war ein 34-px-Kreis neben einem 44-px-Knopf.
     Als Symbolaktion trägt sie dieselbe Form wie ihr Nachbar. */
  body .meldo-tab-panel.active[data-panel="start"] .meldo-quick .mq-switch{
    width:44px !important; min-width:44px !important;
    height:44px !important; min-height:44px !important;
    border-radius:10px !important;
    border:1.5px solid var(--m-linie) !important;
    background:var(--m-weiss) !important;
    color:var(--m-teal) !important;
    box-shadow:none !important;
    padding:0 !important;
  }
  body .meldo-tab-panel.active[data-panel="start"] .meldo-quick .mq-switch:active{
    border-color:var(--m-teal) !important; background:var(--m-teal-l) !important;
  }
  body .meldo-tab-panel.active[data-panel="start"] .meldo-quick .mq-switch svg{
    width:18px !important; height:18px !important;
  }

  /* Auf schmalem Schirm steht die Aktion unter dem Text, nicht daneben:
     nebeneinander bleibt für den Text zu wenig übrig. */
}

/* meldo-mobile-start.css schiebt die Lehrerwerkzeuge mobil ans Ende
   («order:10»). Am Schreibtisch stehen sie unter der Weiter-Karte —
   eine Seite, zwei Reihenfolgen. Hier gilt wieder die Markup-Folge.
   Rückgängig: diese eine Regel löschen. */
@media (max-width:900px){
  body .meldo-tab-panel.active[data-panel="start"]>#meldoTeacherTools{
    order:0 !important;
  }
}

/* ==========================================================
   PROTOTYP — eine Karten-Grammatik für die Startseite.

   Jede Karte: weiss, radius 20, kein Rahmen, weiche Tiefe.
   Jeder Kartenkopf: Symbol im getönten Quadrat (46 px),
   Titel in Akko 17, Untertitel grau 13, Aktion rechts.
   Der Eindruck im Entwurf entsteht aus der Wiederholung
   dieser Form, nicht aus den Farben.
   ========================================================== */
@media (max-width:900px){

  /* --- Die Karten selbst --- */
  body .meldo-tab-panel.active[data-panel="start"]>.meldo-start-row-cq,
  body .meldo-tab-panel.active[data-panel="start"]>#meldoTeacherTools,
  body .meldo-tab-panel.active[data-panel="start"]>.meldo-quick,
  body .meldo-tab-panel.active[data-panel="start"]>.meldo-kurse-sektion,
  body .meldo-tab-panel.active[data-panel="start"]>.meldo-start-lp,
  body .meldo-tab-panel.active[data-panel="start"]>.km-vorschlag{
    background:var(--m-weiss) !important;
    background-image:none !important;
    border:none !important;
    border-radius:20px !important;
    box-shadow:0 2px 14px rgba(26,52,56,.06) !important;
    padding:16px !important;
    margin:0 0 14px !important;
  }
  body .meldo-tab-panel.active[data-panel="start"]{ gap:0 !important; }

  /* Die Abschnitte hatten Trennlinien und negative Ränder, um die
     Kartenkanten zu überspielen. Mit echten Karten braucht es das nicht. */
  body .meldo-tab-panel.active[data-panel="start"]>.meldo-quick,
  body .meldo-tab-panel.active[data-panel="start"]>.meldo-kurse-sektion,
  body .meldo-tab-panel.active[data-panel="start"]>#meldoTeacherTools{
    border-top:none !important;
    margin-left:0 !important; margin-right:0 !important;
    padding-top:16px !important;
    padding-left:16px !important; padding-right:16px !important;
  }

  /* --- Der Kartenkopf: überall dasselbe Symbolquadrat --- */
  body .meldo-tt-ic,
  body .meldo-kurse-ic,
  body .meldo-start-lp .mslp-ic{
    width:46px !important; height:46px !important;
    min-width:46px !important;
    border-radius:14px !important;
    background:var(--m-teal-l) !important;
    color:var(--m-teal) !important;
    flex:0 0 auto !important;
  }
  body .meldo-tt-ic svg,
  body .meldo-kurse-ic svg,
  body .meldo-start-lp .mslp-ic svg{ width:23px !important; height:23px !important; }

  body .meldo-tab-panel.active[data-panel="start"] .meldo-quick .mq-emblem{
    width:46px !important; height:46px !important;
    border-radius:14px !important;
    background:var(--m-teal-l) !important;
    padding:6px !important;
    object-fit:contain !important;
  }

  /* Titel und Untertitel in jedem Kopf gleich */
  body .meldo-tab-panel.active[data-panel="start"] .meldo-quick .mq-k,
  body .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-title,
  body .meldo-tt-t{
    font-family:'Akko',sans-serif !important;
    font-weight:700 !important;
    font-size:17px !important;
    color:var(--m-tinte) !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    line-height:1.25 !important;
    margin:0 !important;
  }
  body .meldo-tab-panel.active[data-panel="start"] .meldo-quick .mq-t,
  body .meldo-tt-sub{
    font-family:'Akko',sans-serif !important;
    font-weight:400 !important;
    font-size:13px !important;
    color:var(--m-gedaempft) !important;
    margin:2px 0 0 !important;
  }
  body .meldo-tt-bar{
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
    min-height:46px !important;
    background:none !important;
  }
  body .meldo-tt-chev{ margin-left:auto !important; }

  /* --- Die Werkzeugkacheln: Symbol oben, Wort darunter --- */
  body .meldo-tt-grid{ gap:10px !important; margin-top:14px !important; padding-bottom:2px !important; }
  body .meldo-tt-tile{
    flex-direction:column !important;
    justify-content:center !important;
    gap:7px !important;
    width:96px !important; min-width:96px !important;
    height:auto !important; min-height:92px !important;
    padding:12px 6px !important;
    border-radius:16px !important;
    background:var(--m-weiss) !important;
    box-shadow:0 2px 10px rgba(26,52,56,.07) !important;
    text-align:center !important;
  }
  body .meldo-tt-tile:hover,
  body .meldo-tt-tile:active{
    background:var(--m-weiss) !important;
    box-shadow:0 4px 14px rgba(26,52,56,.12) !important;
  }
  body .meldo-tt-tile .meldo-tt-tic{
    width:30px !important; height:30px !important;
    background:none !important;
  }
  body .meldo-tt-tile .meldo-tt-tic svg{ width:26px !important; height:26px !important; }
  body .meldo-tt-tile .meldo-tt-nm{
    white-space:normal !important;
    line-height:1.2 !important;
    font-size:12.5px !important;
    font-weight:600 !important;
  }
  /* Die Symbole tragen die Abwechslung, nicht die Kacheln.
     Reihum aus der Palette, damit die Reihe nicht monoton wird. */
  body .meldo-tt-tile:nth-child(5n+1) .meldo-tt-tic{ color:var(--m-teal) !important; }
  body .meldo-tt-tile:nth-child(5n+2) .meldo-tt-tic{ color:#629394 !important; }
  body .meldo-tt-tile:nth-child(5n+3) .meldo-tt-tic{ color:#3C8FC7 !important; }
  body .meldo-tt-tile:nth-child(5n+4) .meldo-tt-tic{ color:var(--m-lime-d) !important; }
  body .meldo-tt-tile:nth-child(5n+5) .meldo-tt-tic{ color:#B05CA8 !important; }
  body .meldo-tt-tile .meldo-tt-msk{ background:currentColor !important; }

  /* --- «Alle Themen» als Pille mit türkisem Rand, wie im Entwurf --- */
  body .meldo-quick .mq-head .mq-themen{
    border-radius:999px !important;
    border-color:#D2DCDD !important;
    color:var(--m-teal) !important;
  }
  body .meldo-tab-panel.active[data-panel="start"] .meldo-lernwelt-btn{
    border-radius:999px !important;
    border-color:#D2DCDD !important;
    color:var(--m-teal) !important;
  }

  /* --- Der Gruss: der Untertitel gehört dazu, er trägt die Stimmung --- */
  body .meldo-tab-panel.active[data-panel="start"] .meldo-welcome-sub{
    display:block !important;
    font-size:13px !important;
    color:var(--m-gedaempft) !important;
    margin:2px 0 0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  body .meldo-tab-panel.active[data-panel="start"] .meldo-welcome-greeting{
    font-size:22px !important;
  }
}

/* ==========================================================
   DIE DREI KARTEN DER STARTSEITE — Rangfolge im Inhalt
   ========================================================== */

/* Die Gestaltung der Klassenmodus-Karte steht ab v1.0.8 im
   Dashboard-Plugin (assets/css/startseite.css). Sie betrifft eine
   bestimmte Karte auf einer bestimmten Seite und ist kein
   Bedienmuster — die alte Fassung hier machte die Terminzeile zum
   Knopf und kämpfte gegen das neue Layout. */

/* --- Lernpfad-Karte: kompakt. «Weitermachen» entfällt — die ganze
       Karte ist der Knopf. Ein Winkel rechts zeigt das an. --- */
body .meldo-weiter-hero .mwh-cta{ display:none !important; }
body .meldo-weiter-hero{
  position:relative !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  padding-right:34px !important;
}
body .meldo-weiter-hero::after{
  content:'' !important;
  position:absolute !important;
  right:6px !important; top:50% !important;
  width:18px !important; height:18px !important;
  margin-top:-9px !important;
  display:block !important;
  background:#9BAAAA !important;
  transition:var(--m-uebergang) !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
body .meldo-weiter-hero:hover::after{ background:var(--m-teal) !important; right:3px !important; }

@media (max-width:900px){
  /* Die Karte hielt Platz für den entfallenen Knopf frei. */
  body .meldo-tab-panel.active[data-panel="start"]>.meldo-start-row-cq{
    min-height:0 !important;
    padding:12px 14px !important;
  }
  body .meldo-weiter-hero{ padding:6px 30px 6px 0 !important; gap:12px !important; }
  body .meldo-weiter-hero .mwh-barwrap{ margin:6px 0 0 !important; }

  /* --- Kartenkopf: Titel und Aktionen gerieten übereinander.
         Der Titel bekommt seine eigene Zeile, die Aktionen folgen. --- */
  body .meldo-tab-panel.active[data-panel="start"] .meldo-quick .mq-head,
  body .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-header{
    flex-wrap:wrap !important;
    row-gap:12px !important;
    align-items:center !important;
  }
  body .meldo-tab-panel.active[data-panel="start"] .meldo-quick .mq-meta,
  body .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-tx{
    flex:1 1 calc(100% - 58px) !important;
    min-width:0 !important;
  }
  body .meldo-tab-panel.active[data-panel="start"] .meldo-quick .mq-themen,
  body .meldo-tab-panel.active[data-panel="start"] .meldo-quick .mq-switch,
  body .meldo-tab-panel.active[data-panel="start"] .meldo-lernwelt-wrapper{
    margin-left:0 !important;
  }
  body .meldo-tab-panel.active[data-panel="start"] .meldo-quick .mq-themen{ flex:1 1 auto !important; }
}

/* --- C3 · «.mka-sch» ist der Schalter selbst, keine Nebenaktion.
       Er trägt seine Form aus class-klassenansicht-ui.php; hier steht
       er nur, damit die Prüfung ihn zuordnen kann. --- */
body .mka-sch{ box-sizing:border-box !important; }

/* ==========================================================
   KURSLISTE — die Kacheln sind die Karten, nicht der Abschnitt.
   Weiss auf Weiss hatte keine Kante; darum wirkte alles flach.
   Der Abschnitt gibt seinen Grund ab, die Kacheln bekommen Tiefe.
   ========================================================== */
body .meldo-tab-panel.active[data-panel="start"]>.meldo-kurse-sektion{
  background:none !important;
  box-shadow:none !important;
  border:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
body .meldo-cc{
  background:var(--m-weiss) !important;
  border:1px solid #EEF2F2 !important;
  border-radius:18px !important;
  box-shadow:0 2px 12px rgba(26,52,56,.07) !important;
  overflow:hidden !important;
  transition:box-shadow .18s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.4,0,.2,1) !important;
}
body .meldo-cc:hover{
  box-shadow:0 8px 24px rgba(26,52,56,.13) !important;
  transform:translateY(-2px) !important;
  border-color:#E2EBEB !important;
}
/* Der Filterkopf steht jetzt auf dem Seitengrund und braucht keinen
   eigenen Kasten mehr. */
body .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-header{
  padding-left:2px !important;
  padding-right:2px !important;
}

/* ==========================================================
   TAB-TITEL — übernommen aus meldo-audiotools, class-shortcode.php
   (.meldo-tool-header). Gleiche Werte, gleiche Welle, damit die
   21 Werkzeuge und die Tabs denselben Kopf tragen.

   Der Kasten entfällt: der Titel ist eine Zeile, kein Feld.
   Das Markup bleibt, wie es ist — «display:contents» hebt die
   Zwischenebene auf, damit Titel und Untertitel neben dem
   Symbol stehen statt darunter.
   ========================================================== */
body .meldo-tab-header-card{
  display:grid !important;
  grid-template-columns:auto 1fr !important;
  column-gap:.8rem !important;
  align-items:center !important;
  padding:0 0 .6rem !important;
  margin:0 0 .9rem !important;
  background:none !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  position:relative !important;
}
body .meldo-tab-header-top{ display:contents !important; }

/* Die Welle: zwei Bögen in Teal und Lime, wie im Meldo-Zeichen.
   Sie ersetzt die harte Trennlinie. */
body .meldo-tab-header-card::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important; right:0 !important; bottom:0 !important;
  height:2px !important;
  border-radius:2px !important;
  background:linear-gradient(90deg,#3D7C85 0%,#3D7C85 22%,#E8924F 45%,rgba(232,146,79,.25) 75%,rgba(232,146,79,0) 100%) !important;
}

body .meldo-tab-header-icon{
  grid-column:1 !important;
  grid-row:1 / 3 !important;
  flex-shrink:0 !important;
  width:2.6rem !important; height:2.6rem !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:13px !important;
  background:linear-gradient(135deg,#3D7C85 0%,#448B94 60%,#E8924F 160%) !important;
  color:#fff !important;
  box-shadow:0 3px 10px rgba(61,124,133,.25) !important;
  padding:0 !important;
}
body .meldo-tab-header-icon svg,
body .meldo-tab-header-icon img{
  width:1.45rem !important; height:1.45rem !important;
  fill:currentColor !important;
}

body .meldo-tab-header-title{
  grid-column:2 !important; grid-row:1 !important;
  margin:0 !important;
  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;
}
body .meldo-tab-header-desc{
  grid-column:2 !important; grid-row:2 !important;
  margin:.1rem 0 0 !important;
  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){
  body .meldo-tab-header-card{
    column-gap:.65rem !important;
    padding:0 0 .55rem !important;
    margin:0 0 .7rem !important;
  }
  body .meldo-tab-header-icon{
    width:2.2rem !important; height:2.2rem !important;
    border-radius:11px !important;
  }
  body .meldo-tab-header-icon svg,
  body .meldo-tab-header-icon img{ width:1.2rem !important; height:1.2rem !important; }
  body .meldo-tab-header-title{ font-size:1.08rem !important; }
  /* Wie im Werkzeugkopf: auf dem Handy trägt der Untertitel nichts bei,
     was den Platz wert wäre — der Titel sagt bereits, worum es geht. */
  body .meldo-tab-header-desc{ display:none !important; }
}

/* --- Pinnwand und Profil tragen «.meldo-tab-header» ohne Karte und
       ohne Symbol im HTML. Gleiche Form, Symbol aus CSS. --- */
body .meldo-tab-header{
  display:grid !important;
  grid-template-columns:auto 1fr !important;
  column-gap:.8rem !important;
  align-items:center !important;
  padding:0 0 .6rem !important;
  margin:0 0 .9rem !important;
  background:none !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  position:relative !important;
}
body .meldo-tab-header::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important; right:0 !important; bottom:0 !important;
  height:2px !important; border-radius:2px !important;
  background:linear-gradient(90deg,#3D7C85 0%,#3D7C85 22%,#E8924F 45%,rgba(232,146,79,.25) 75%,rgba(232,146,79,0) 100%) !important;
}
body .meldo-tab-header::before{
  content:"" !important;
  grid-column:1 !important; grid-row:1 / 3 !important;
  width:2.6rem !important; height:2.6rem !important;
  border-radius:13px !important;
  background:linear-gradient(135deg,#3D7C85 0%,#448B94 60%,#E8924F 160%) !important;
  box-shadow:0 3px 10px rgba(61,124,133,.25) !important;
}
body [data-panel="pinnwand"] .meldo-tab-header::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center/1.45rem no-repeat,linear-gradient(#000,#000);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center/1.45rem no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
body [data-panel="profil"] .meldo-tab-header::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/1.45rem no-repeat,linear-gradient(#000,#000);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/1.45rem no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
body .meldo-tab-header .meldo-tab-header-title{ grid-column:2 !important; grid-row:1 !important; }
body .meldo-tab-header .meldo-tab-header-desc{ grid-column:2 !important; grid-row:2 !important; }

/* --- Lernpfad: eigene Struktur aus meldo-learning-paths.
       Die Kopfkarte gibt ihre Fläche ab, das Überschrift-SVG wird
       selbst zum Symbolquadrat. --- */
body .meldo-lp-display-wrapper>.meldo-card:first-of-type,
body .meldo-learning-path-display>.meldo-card:first-of-type{
  background:none !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 0 .6rem !important;
  margin:0 0 .9rem !important;
  position:relative !important;
}
body .meldo-lp-display-wrapper>.meldo-card:first-of-type::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important; right:0 !important; bottom:0 !important;
  height:2px !important; border-radius:2px !important;
  background:linear-gradient(90deg,#3D7C85 0%,#3D7C85 22%,#E8924F 45%,rgba(232,146,79,.25) 75%,rgba(232,146,79,0) 100%) !important;
}
body .meldo-lp-display-wrapper .meldo-heading{
  display:flex !important;
  align-items:center !important;
  gap:.8rem !important;
  margin:0 !important;
  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;
}
body .meldo-lp-display-wrapper .meldo-heading-ic{
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
  width:2.6rem !important; height:2.6rem !important;
  border-radius:13px !important;
  background:linear-gradient(135deg,#3D7C85 0%,#448B94 60%,#E8924F 160%) !important;
  color:#fff !important;
  box-shadow:0 3px 10px rgba(61,124,133,.25) !important;
}
body .meldo-lp-display-wrapper>.meldo-card:first-of-type .meldo-text{
  margin:.1rem 0 0 calc(2.6rem + .8rem) !important;
  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){
  body .meldo-tab-header{ column-gap:.65rem !important; padding:0 0 .55rem !important; margin:0 0 .7rem !important; }
  body .meldo-tab-header::before{ width:2.2rem !important; height:2.2rem !important; border-radius:11px !important; }
  body .meldo-tab-header .meldo-tab-header-desc{ display:none !important; }

  body .meldo-lp-display-wrapper .meldo-heading{ font-size:1.08rem !important; gap:.65rem !important; }
  body .meldo-lp-display-wrapper .meldo-heading-ic{
    width:2.2rem !important; height:2.2rem !important; border-radius:11px !important;
  }
  body .meldo-lp-display-wrapper .meldo-heading-ic .meldo-heading-icon{
    width:1.2rem !important; height:1.2rem !important;
  }
  body .meldo-lp-display-wrapper>.meldo-card:first-of-type .meldo-text{ display:none !important; }
}

/* Das SVG sitzt jetzt in «.meldo-heading-ic» — ein <svg> mit
   Hintergrund und Innenabstand verhält sich je nach Browser anders. */
body .meldo-lp-display-wrapper .meldo-heading-ic .meldo-heading-icon{
  width:1.45rem !important; height:1.45rem !important;
  color:#fff !important;
  margin:0 !important; top:0 !important;
}

/* --- Schulplaner-Widget im Unterricht-Tab: «Heute» trägt denselben
       Kopf. Titel links, Datum und Uhr rechts, Symbol aus CSS. --- */
body .meldo-widget-header{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  column-gap:.8rem !important;
  align-items:center !important;
  padding:0 0 .6rem !important;
  margin:0 0 .9rem !important;
  background:none !important;
  border:none !important;
  border-bottom:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  position:relative !important;
}
body .meldo-widget-header::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important; right:0 !important; bottom:0 !important;
  height:2px !important; border-radius:2px !important;
  background:linear-gradient(90deg,#3D7C85 0%,#3D7C85 22%,#E8924F 45%,rgba(232,146,79,.25) 75%,rgba(232,146,79,0) 100%) !important;
}
body .meldo-widget-header::before{
  content:"" !important;
  width:2.6rem !important; height:2.6rem !important;
  border-radius:13px !important;
  background:linear-gradient(135deg,#3D7C85 0%,#448B94 60%,#E8924F 160%) !important;
  box-shadow:0 3px 10px rgba(61,124,133,.25) !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center/1.45rem no-repeat,linear-gradient(#000,#000);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center/1.45rem no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
body .meldo-widget-title{
  margin:0 !important;
  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;
}
body .meldo-widget-header-right{ align-items:flex-end !important; }
body .meldo-widget-subtitle{
  font-family:'Akko',system-ui,sans-serif !important;
  font-size:.82rem !important;
  font-weight:400 !important;
  color:#8a8a8a !important;
}

/* ==========================================================
   FLÄCHEN AM SCHREIBTISCH — dieselbe Ordnung wie auf dem Handy.

   Bisher war das ganze Panel weiss, und die Karten darin waren
   ebenfalls weiss: drei Ebenen, zwei davon gleich. Jetzt trägt
   das Panel den hellen Grund und die Karten heben sich ab.

   Nur für Tabs mit Kartenstruktur. Songs und Liederbuch haben
   keine Sektionen — dort stünde der Inhalt nackt auf Grau.
   ========================================================== */
@media (min-width:901px){

  body .meldo-tab-panel.active[data-panel="start"],
  body .meldo-tab-panel.active[data-panel="leistung"]{
    background:transparent !important;
    margin:-28px -32px !important;
    padding:26px 32px 32px !important;
    border-radius:0 !important;
  }

  /* Die Sektionen werden zu Karten — dieselben Werte wie mobil. */
  body .meldo-tab-panel.active[data-panel="start"]>.meldo-start-row-cq,
  body .meldo-tab-panel.active[data-panel="start"]>#meldoTeacherTools,
  body .meldo-tab-panel.active[data-panel="start"]>.meldo-quick,
  body .meldo-tab-panel.active[data-panel="start"]>.meldo-start-lp,
  body .meldo-tab-panel.active[data-panel="start"]>.km-vorschlag{
    background:var(--m-weiss) !important;
    background-image:none !important;
    border:none !important;
    border-radius:20px !important;
    box-shadow:0 2px 14px rgba(26,52,56,.06) !important;
    padding:18px !important;
    margin:0 0 16px !important;
  }
  /* Die Kursliste bleibt ein Kachelregal ohne eigene Fläche. */
  body .meldo-tab-panel.active[data-panel="start"]>.meldo-kurse-sektion{
    background:none !important;
    box-shadow:none !important;
    border:none !important;
    padding:4px 0 0 !important;
  }

  /* Leistung: die mg-Karten tragen jetzt Tiefe statt nur einer Linie. */
  body .meldo-tab-panel.active[data-panel="leistung"] .mg-card{
    border-color:#EDF2F2 !important;
    box-shadow:0 2px 12px rgba(26,52,56,.06) !important;
  }

  /* Der Titelkopf gehört über den hellen Grund, nicht auf eine Karte. */
  body .meldo-tab-panel.active[data-panel="start"]>.meldo-tab-header-card,
  body .meldo-tab-panel.active[data-panel="leistung"]>.meldo-tab-header-card{
    margin-bottom:18px !important;
  }
}

/* ==========================================================
   FLÄCHEN — die übrigen Tabs.

   Diese Panels werden per AJAX gefüllt; ihre Kinder stehen nicht
   im Template. Darum keine Liste von Klassen, sondern die Regel:
   jedes direkte Kind wird eine Karte. Ein einziger Inhaltsblock
   ergibt eine grosse Karte wie bisher, mehrere Blöcke ergeben
   mehrere — in beiden Fällen richtig.

   Ausgenommen: Titelkopf, Überlagerungen, Skripte.
   ========================================================== */
body .meldo-tab-panel.active[data-panel="lernpfad"],
body .meldo-tab-panel.active[data-panel="liederbuch"],
body .meldo-tab-panel.active[data-panel="pinnwand"],
body .meldo-tab-panel.active[data-panel="notizen"],
body .meldo-tab-panel.active[data-panel="profil"],
body .meldo-tab-panel.active[data-panel="songs"],
body .meldo-tab-panel.active[data-panel="musiktools"],
body .meldo-tab-panel.active[data-panel="instrumental"]{
  background:transparent !important;
  margin:-28px -32px !important;
  padding:26px 32px 32px !important;
  border-radius:0 !important;
}

body .meldo-tab-panel.active[data-panel="liederbuch"]>*,
body .meldo-tab-panel.active[data-panel="pinnwand"]>*,
body .meldo-tab-panel.active[data-panel="notizen"]>*,
body .meldo-tab-panel.active[data-panel="musiktools"]>*{
  background:var(--m-weiss);
  background-image:none;
  border:none;
  border-radius:20px;
  box-shadow:0 2px 14px rgba(26,52,56,.06);
  padding:18px;
  margin:0 0 16px;
}

/* Kein Kasten um Titel, Überlagerungen und Unsichtbares. */
body .meldo-tab-panel.active>.meldo-tab-header-card,
body .meldo-tab-panel.active>.meldo-tab-header,
body .meldo-tab-panel.active>script,
body .meldo-tab-panel.active>style,
body .meldo-tab-panel.active>template,
body .meldo-tab-panel.active>[hidden],
body .meldo-tab-panel.active>.meldo-modal,
body .meldo-tab-panel.active>.meldo-overlay,
body .meldo-tab-panel.active>.meldo-sheet,
body .meldo-tab-panel.active>.mts-sheet,
body .meldo-tab-panel.active>.meldo-bottom-sheet{
  background:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
}
body .meldo-tab-panel.active>.meldo-tab-header-card{ padding:0 0 .6rem !important; }
body .meldo-tab-panel.active>.meldo-tab-header{ padding:0 0 .6rem !important; }

/* Karten im Inhalt tragen schon eigene Flächen — sie dürfen sich nicht
   in einer zweiten weissen Karte wiederfinden. */
body .meldo-tab-panel.active .meldo-card,
body .meldo-tab-panel.active .mg-card{
  border-color:#EDF2F2;
  box-shadow:0 2px 12px rgba(26,52,56,.06);
}

@media (max-width:900px){
  body .meldo-tab-panel.active[data-panel="lernpfad"],
  body .meldo-tab-panel.active[data-panel="liederbuch"],
  body .meldo-tab-panel.active[data-panel="pinnwand"],
  body .meldo-tab-panel.active[data-panel="notizen"],
  body .meldo-tab-panel.active[data-panel="profil"],
  body .meldo-tab-panel.active[data-panel="songs"],
  body .meldo-tab-panel.active[data-panel="musiktools"],
  body .meldo-tab-panel.active[data-panel="instrumental"]{
    margin:-16px !important;
    padding:14px !important;
  }
  body .meldo-tab-panel.active[data-panel="liederbuch"]>*,
  body .meldo-tab-panel.active[data-panel="pinnwand"]>*,
  body .meldo-tab-panel.active[data-panel="notizen"]>*,
  body .meldo-tab-panel.active[data-panel="musiktools"]>*{
    padding:14px;
    border-radius:16px;
    margin:0 0 12px;
  }
}

/* Songs: der Chord-Collection-Shortcode bringt eigene Flächen mit. Eine
   Karte darum ergäbe Kasten im Kasten — hier trägt nur das Panel den
   hellen Grund, die Kacheln im Inhalt heben sich von selbst ab. */
body .meldo-tab-panel.active[data-panel="songs"]>.meldo-tab-header-card{
  background:none !important; box-shadow:none !important;
  border-radius:0 !important; padding:0 0 .6rem !important;
  margin:0 0 16px !important;
}

/* Die Kopfsymbole sind Strichzeichnungen. «fill:currentColor» füllte sie
   weiss aus — bei geschlossenen Pfaden wird daraus ein Klumpen. */
body .meldo-tab-header-icon svg,
body .meldo-tab-header-icon svg *{
  fill:none !important;
  stroke:currentColor !important;
}

/* ==========================================================
   LERNPFAD — der Inhalt ist ein einziges Kind, also wurde eine
   grosse Karte daraus. Hier gibt der Wrapper seine Fläche ab und
   die Blöcke darin werden zu Kacheln.
   ========================================================== */
body .meldo-tab-panel.active[data-panel="lernpfad"]>*{
  background:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
}
body .meldo-tab-panel.active[data-panel="lernpfad"] .meldo-lp-display-wrapper>.meldo-card,
body .meldo-tab-panel.active[data-panel="lernpfad"] .meldo-learning-path-display>.meldo-card,
body .meldo-tab-panel.active[data-panel="lernpfad"] .meldo-lp-builder>.meldo-card{
  background:var(--m-weiss) !important;
  border:none !important;
  border-radius:20px !important;
  box-shadow:0 2px 12px rgba(26,52,56,.06) !important;
  padding:18px !important;
  margin:0 0 16px !important;
}
/* Der Titelkopf bleibt ohne Fläche — er steht über dem Grund. */
body .meldo-tab-panel.active[data-panel="lernpfad"] .meldo-lp-display-wrapper>.meldo-card:first-of-type{
  background:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 0 .6rem !important;
  margin:0 0 18px !important;
}
/* Die Pfadkarten im Inhalt heben sich vom hellen Grund ab. */
body .meldo-tab-panel.active[data-panel="lernpfad"] .meldo-path-card,
body .meldo-tab-panel.active[data-panel="lernpfad"] .meldo-lesson-card,
body .meldo-tab-panel.active[data-panel="lernpfad"] .meldo-section-card{
  background:var(--m-weiss) !important;
  border-color:#EDF2F2 !important;
  box-shadow:0 2px 12px rgba(26,52,56,.06) !important;
}

@media (max-width:900px){
  body .meldo-tab-panel.active[data-panel="lernpfad"] .meldo-lp-display-wrapper>.meldo-card,
  body .meldo-tab-panel.active[data-panel="lernpfad"] .meldo-learning-path-display>.meldo-card{
    padding:14px !important; border-radius:16px !important; margin:0 0 12px !important;
  }
}

/* --- Pinnwand: der Untertitel wurde ausgeblendet, und der Inhalt kam
       nicht auf Panelbreite. --- */
body .meldo-tab-panel.active[data-panel="pinnwand"] .meldo-tab-header-desc{
  display:block !important;
}
body .meldo-tab-panel.active[data-panel="pinnwand"]>*{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* --- Unterricht: der Kopf sass in der Karte statt darüber. Jetzt trägt
       der Widget-Rahmen keine Fläche mehr, die Blöcke darin sind die
       Karten — dieselbe Ordnung wie in den übrigen Tabs. --- */
body .meldo-tab-panel.active[data-panel="instrumental"]>*{
  background:none !important;
  box-shadow:none !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
}
body .meldo-tab-panel.active[data-panel="instrumental"] .meldo-widget-empty,
body .meldo-tab-panel.active[data-panel="instrumental"] .meldo-widget-card-link,
body .meldo-tab-panel.active[data-panel="instrumental"] .meldo-widget-past,
body .meldo-tab-panel.active[data-panel="instrumental"] .meldo-widget-footer,
body .meldo-widget-empty,
body .meldo-widget-past{
  background:var(--m-weiss) !important;
  border:none !important;
  border-radius:20px !important;
  box-shadow:0 2px 14px rgba(26,52,56,.06) !important;
  padding:18px !important;
  margin:0 0 16px !important;
}
body .meldo-widget-footer{
  background:none !important;
  box-shadow:none !important;
  padding:0 !important;
  border-top:none !important;
}

/* --- Startseite: die Begrüssung wird zum Titel des Tabs. Gleiche
       Abtrennung durch die Welle, damit sie als Kopf gelesen wird
       und nicht als erste Karte. --- */
body .meldo-tab-panel.active[data-panel="start"] .meldo-welcome-bar{
  position:relative !important;
  background:none !important;
  box-shadow:none !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 0 .8rem !important;
  margin:0 0 20px !important;
}
body .meldo-tab-panel.active[data-panel="start"] .meldo-welcome-bar::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important; right:0 !important; bottom:0 !important;
  height:2px !important; border-radius:2px !important;
  background:linear-gradient(90deg,#3D7C85 0%,#3D7C85 22%,#E8924F 45%,rgba(232,146,79,.25) 75%,rgba(232,146,79,0) 100%) !important;
}

/* B1 · Leistung trägt dieselbe Schiene wie die Musiktools: grauer Grund,
   aktiver Reiter als weisse Karte. (Die Umkehrung aus v2.6.12 ist raus —
   zwei Schienenarten sind eine zu viel.) */
html body .meldo-tab-panel.active[data-panel="leistung"] .meldo-lg-subnav{
  background:var(--m-schiene) !important;
  box-shadow:none !important;
}
html body .meldo-tab-panel.active[data-panel="leistung"] .meldo-lg-subtab.active{
  background:var(--m-weiss) !important;
  color:var(--m-tinte) !important;
  box-shadow:var(--m-karte) !important;
}

/* --- Unterricht: die weisse Fläche kommt aus dashboard-main.css
       («#meldoInstrumentalTab .meldo-dashboard-content»). Sie umschliesst
       auch den Kopf — darum steht der Titel im Kasten statt darüber. --- */
html body #meldoInstrumentalTab .meldo-dashboard-content,
html body #meldoInstrumentalTab .meldo-widget,
html body #meldoInstrumentalTab > div{
  background:none !important;
  background-color:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
/* Die Blöcke darin sind die Karten. */
html body #meldoInstrumentalTab .meldo-widget-empty,
html body #meldoInstrumentalTab .meldo-widget-past,
html body #meldoInstrumentalTab .meldo-widget-card-link,
html body #meldoInstrumentalTab .meldo-dashboard-card{
  background:var(--m-weiss) !important;
  border:none !important;
  border-radius:20px !important;
  box-shadow:0 2px 14px rgba(26,52,56,.06) !important;
  padding:18px !important;
  margin:0 0 16px !important;
}
html body #meldoInstrumentalTab .meldo-widget-footer{
  background:none !important;
  box-shadow:none !important;
  border-top:none !important;
  padding:0 !important;
}



/* Die Reiterschiene sass im Lernpfad in der Karte, bei Musiktools und
   Leistung steht sie auf dem Grund. Die Karte, die die Schiene enthält,
   gibt darum ihre Fläche ab — die Blöcke darin tragen ihre eigene. */
html body .meldo-tab-panel.active[data-panel="lernpfad"] .meldo-card:has(> .meldo-lp-tabs),
html body .meldo-tab-panel.active[data-panel="lernpfad"] .meldo-card:has(> .meldo-lp-tab-content-wrapper){
  background:none !important;
  box-shadow:none !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
}
html body .meldo-tab-panel.active[data-panel="lernpfad"] .meldo-lp-tabs{
  margin-bottom:18px !important;
}
/* Der Reiterinhalt bleibt flächenlos — die Pfadkarten darin tragen die
   Fläche. Sonst steht Rahmen in Rahmen. */
html body .meldo-tab-panel.active[data-panel="lernpfad"] .meldo-lp-tab-content.active{
  background:none !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* --- Profil: der Gami-Shortcode ist ein einziges Kind, also wurde eine
       grosse Karte daraus. Er gibt seine Fläche ab; die Profilkarte, die
       Bereichskarten und die Mitgliederkacheln tragen sie. --- */
html body .meldo-tab-panel.active[data-panel="profil"]>*{
  background:none !important;
  box-shadow:none !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
}
html body .meldo-tab-panel.active[data-panel="profil"] .mg-pfp,
html body .meldo-tab-panel.active[data-panel="profil"] .mg-card,
html body .meldo-tab-panel.active[data-panel="profil"] .mg-pfoverview>*,
html body .meldo-tab-panel.active[data-panel="profil"] .mg-cm-body>*{
  background:var(--m-weiss) !important;
  border:none !important;
  border-radius:20px !important;
  box-shadow:0 2px 12px rgba(26,52,56,.06) !important;
}
/* Die Mitgliederkacheln heben sich einzeln ab, nicht als Block. */
html body .meldo-tab-panel.active[data-panel="profil"] .mg-dir-grid>*{
  background:var(--m-weiss) !important;
  border:1px solid #EEF2F2 !important;
  border-radius:16px !important;
  box-shadow:0 2px 10px rgba(26,52,56,.06) !important;
  transition:var(--m-uebergang) !important;
}
html body .meldo-tab-panel.active[data-panel="profil"] .mg-dir-grid>*:hover{
  box-shadow:0 6px 18px rgba(26,52,56,.12) !important;
  transform:translateY(-2px) !important;
}
/* Die Reiterschiene und die Filterzeile stehen auf dem Grund. */
html body .meldo-tab-panel.active[data-panel="profil"] .mg-cm-nav,
html body .meldo-tab-panel.active[data-panel="profil"] .mg-pfnav{
  margin:0 0 16px !important;
}

/* Der Titelkopf braucht seinen Abstand zurück: die Regeln, die den
   Panel-Kindern ihre Fläche nehmen, haben ihm auch den Rand genommen —
   darum klebte die erste Kachel an der Welle. */
html body .meldo-tab-panel.active>.meldo-tab-header,
html body .meldo-tab-panel.active>.meldo-tab-header-card{
  margin:0 0 22px !important;
  padding:0 0 .6rem !important;
}
@media (max-width:900px){
  html body .meldo-tab-panel.active>.meldo-tab-header,
  html body .meldo-tab-panel.active>.meldo-tab-header-card{
    margin:0 0 16px !important;
  }
}

/* --- Profil: zwischen Panel und Kacheln liegen mehrere Hüllen, die je
       eine weisse Fläche tragen können. Sie alle geben sie ab — nur die
       Kacheln selbst bleiben weiss, dazwischen zeigt sich der Grund. --- */
html body .meldo-tab-panel.active[data-panel="profil"] .meldo-gami,
html body .meldo-tab-panel.active[data-panel="profil"] .meldo-gami-profile,
html body .meldo-tab-panel.active[data-panel="profil"] #mgProfileSlot,
html body .meldo-tab-panel.active[data-panel="profil"] .mg-profile,
html body .meldo-tab-panel.active[data-panel="profil"] .mg-pf,
html body .meldo-tab-panel.active[data-panel="profil"] .mg-pfwrap,
html body .meldo-tab-panel.active[data-panel="profil"] .mg-pfoverview,
html body .meldo-tab-panel.active[data-panel="profil"] .mg-cm,
html body .meldo-tab-panel.active[data-panel="profil"] .mg-cm-body,
html body .meldo-tab-panel.active[data-panel="profil"] .mg-cm-wrap,
html body .meldo-tab-panel.active[data-panel="profil"] .mg-dir,
html body .meldo-tab-panel.active[data-panel="profil"] .mg-dir-wrap{
  background:none !important;
  background-color:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
/* Die Kacheln behalten ihre Fläche — hier nochmals, damit die Regel
   oben sie nicht miterwischt, wenn eine Hülle zugleich Kachel ist. */
html body .meldo-tab-panel.active[data-panel="profil"] .mg-pfp,
html body .meldo-tab-panel.active[data-panel="profil"] .mg-card{
  background:var(--m-weiss) !important;
  border-radius:20px !important;
  box-shadow:0 2px 14px rgba(26,52,56,.06) !important;
  padding:18px !important;
  margin:0 0 16px !important;
}
@media (max-width:900px){
  html body .meldo-tab-panel.active[data-panel="profil"] .mg-pfp,
  html body .meldo-tab-panel.active[data-panel="profil"] .mg-card{
    padding:14px !important; border-radius:16px !important; margin:0 0 12px !important;
  }
}

/* --- NACHTRAG v1.0.2 · Das Schulplaner-Widget.
       Der Rahmen gibt seine Fläche ab, damit der Kopf über dem
       Grund steht und nicht in der Karte. Die Blöcke darin sind
       die Karten. Stand vorher in widget.css des Schulplaners. --- */
html body .meldo-widget{
  background:none !important;
  background-color:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
html body .meldo-widget .meldo-widget-empty,
html body .meldo-widget .meldo-widget-past{
  background:var(--m-weiss) !important;
  border:none !important;
  border-radius:var(--m-radius-karte) !important;
  box-shadow:var(--m-karte-tief) !important;
  padding:18px !important;
  margin:0 0 16px !important;
}
html body .meldo-widget .meldo-widget-footer{
  background:none !important;
  border-top:none !important;
  box-shadow:none !important;
  padding:0 !important;
}
@media (max-width:900px){
  html body .meldo-widget .meldo-widget-empty,
  html body .meldo-widget .meldo-widget-past{
    padding:14px !important; border-radius:16px !important; margin:0 0 12px !important;
  }
}

/* --- NACHTRAG v1.0.4 · Der Unterricht-Tab heisst «unterricht», nicht
       «instrumental» — das ist der Instrumental-Tab. Darum lief bisher
       jede Regel dafür ins Leere und der Kopf sass in der weissen
       Fläche des Tab-Containers. --- */
body .meldo-tab-panel.active[data-panel="unterricht"]{
  background:transparent !important;
  margin:-28px -32px !important;
  padding:26px 32px 32px !important;
  border-radius:0 !important;
}
/* Die Hüllen geben ihre Fläche ab; die Blöcke im Widget tragen sie.
   (Die .meldo-widget-Regeln stehen weiter oben und gelten global.) */
body .meldo-tab-panel.active[data-panel="unterricht"]>*{
  background:none !important;
  box-shadow:none !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
}
body .meldo-tab-panel.active[data-panel="unterricht"]>.meldo-tab-header,
body .meldo-tab-panel.active[data-panel="unterricht"]>.meldo-tab-header-card{
  margin:0 0 22px !important;
  padding:0 0 .6rem !important;
}
@media (max-width:900px){
  body .meldo-tab-panel.active[data-panel="unterricht"]{
    margin:-16px !important;
    padding:14px !important;
  }
}

/* Die Gestaltung der beiden oberen Startkarten (Wellenmotiv,
   Tageszeit, Kursbild) ist ab v1.0.7 im Dashboard-Plugin:
   assets/css/startseite.css. Sie betrifft eine bestimmte Karte
   auf einer bestimmten Seite und ist damit kein Bedienmuster. */

/* ==========================================================
   v1.1.2 — Der Tab-Container gibt seine weisse Fläche ab.

   Bisher umschloss «.meldo-tabs-container» Navigation und Inhalt
   als eine grosse weisse Karte mit Rundung und Schatten. Mobil
   gab es diesen Rahmen nicht — dort lief der Panelgrund bis an
   den Rand. Jetzt überall gleich: keine Karte um alles, die
   Fläche gehört dem Panel.
   ========================================================== */
html body .meldo-tabs-container{
  background:none !important;
  background-color:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
/* Die Reiterleiste behält ihren eigenen Grund — sie ist die
   Navigation und soll sich vom Inhalt absetzen. */
html body .meldo-tabs-container>.meldo-tabs,
html body .meldo-tabs-container>.meldo-tab-nav{
  border-radius:var(--m-radius-karte) !important;
}
/* Ohne umschliessende Karte braucht der Inhalt keinen eigenen
   Innenabstand mehr — den tragen die Panels. */
html body .meldo-tab-content{
  overflow:visible !important;
}

/* --- Aufklappmenüs dürfen nicht hinter den Kacheln verschwinden.
       Der Filter liegt in einem Abschnitt, dessen Nachbarn eigene
       Stapelkontexte aufmachen. --- */
html body .meldo-fdd,
html body .meldo-fdd-wrap{ z-index:40 !important; }
html body .meldo-fdd-menu,
html body .meldo-fdd-list,
html body .meldo-fdd-pop{
  z-index:120 !important;
  position:absolute !important;
}
/* Der Abschnitt mit dem Filter darf nicht beschneiden. */
html body .meldo-tab-panel.active .meldo-kurse-sektion,
html body .meldo-tab-panel.active .meldo-kurse-header{
  overflow:visible !important;
}

/* v1.1.3: Die Panels sind durchsichtig — der Hintergrund kommt von
   BuddyBoss, nicht von uns. Vorher lag eine eigene helle Fläche
   darüber, die sich je nach Theme-Einstellung leicht unterschied.
   Die Karten heben sich weiterhin ab, weil sie weiss sind. */

/* ==========================================================
   v1.1.4 — Die Ränder um das Dashboard.

   Der weisse Streifen links und rechts ist der Inhaltsbereich
   von BuddyBoss, der das Dashboard umschliesst. Er liegt ÜBER
   dem Seitenhintergrund, darum endet die Dashboard-Fläche an
   seiner Kante.

   Auf Seiten mit dem Dashboard geben diese Behälter ihre Fläche
   ab — dann läuft der eingestellte Hintergrund durch. Andere
   Seiten bleiben unberührt, weil «:has()» nur greift, wo der
   Dashboard-Wrapper tatsächlich vorkommt.
   ========================================================== */
html body:has(.meldo-dashboard-wrapper) #content,
html body:has(.meldo-dashboard-wrapper) #primary,
html body:has(.meldo-dashboard-wrapper) .site-content,
html body:has(.meldo-dashboard-wrapper) .site-content-grid,
html body:has(.meldo-dashboard-wrapper) .entry-content,
html body:has(.meldo-dashboard-wrapper) .page-content,
html body:has(.meldo-dashboard-wrapper) .bb-grid,
html body:has(.meldo-dashboard-wrapper) .bb-single-page,
html body:has(.meldo-dashboard-wrapper) article.page,
html body:has(.meldo-dashboard-wrapper) .type-page{
  background:none !important;
  background-color:transparent !important;
  box-shadow:none !important;
  border:none !important;
}

/* Der Wrapper selbst läuft über die volle Breite, damit auch der
   Innenabstand des Themes keinen Rand hinterlässt. */
html body .meldo-dashboard-wrapper{
  background:none !important;
  background-color:transparent !important;
}

/* ==========================================================
   v1.1.5 — Die feine Linie um alle Tabs ausser Start.

   In dashboard-rest.css steht:
     .meldo-tab-panel.active:not([data-panel="start"]) {
       background:#fff; border:1px solid #E6ECEC;
       border-radius:16px; padding:24px; box-shadow:…
     }
   Eine weisse Karte um jeden Tabinhalt — genau das, was wir
   aufgelöst haben. Der Start-Tab war ausgenommen, darum fiel
   es dort nicht auf.
   ========================================================== */
html body .meldo-tab-panel.active:not([data-panel="start"]){
  background:none !important;
  background-color:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}