/* Meldo Dashboard — Startseite.
 *
 * Gestaltung der beiden oberen Karten: weiche Farbwolken, Tageszeit,
 * Kursbild. Das ist keine Bedienelement-Form, sondern die Gestaltung
 * einer bestimmten Karte auf einer bestimmten Seite — darum hier und
 * nicht im Plugin «Meldo Bedienmuster».
 *
 * Keine harten Kanten: alles läuft weich aus. Wo Schrift steht, liegt
 * ein heller Schleier darüber, damit sie ohne Abdunklung lesbar bleibt.
 */

body .meldo-tab-panel.active[data-panel="start"]>.km-vorschlag,
body .meldo-tab-panel.active[data-panel="start"]>.meldo-next-lesson{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
}
body .meldo-weiter-hero{
  position:relative !important;
  overflow:hidden !important;
  border-radius:inherit !important;
}

/* --- Farbwolken statt Linien. Drei radiale Verläufe, die ineinander
       übergehen — kein Rand, keine Kante, nichts zum Festhalten. --- */
body .meldo-tab-panel.active[data-panel="start"]>.km-vorschlag::before,
body .meldo-tab-panel.active[data-panel="start"]>.meldo-next-lesson::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:
    radial-gradient(120% 90% at 100% 15%,  rgba(232,146,79,.30) 0%, rgba(232,146,79,.13) 38%, rgba(232,146,79,0) 72%),
    radial-gradient(110% 95% at 88% 100%,  rgba(61,124,133,.28)  0%, rgba(61,124,133,.11)  42%, rgba(61,124,133,0)  76%),
    radial-gradient(85%  70% at 62% 55%,   rgba(68,139,148,.16)  0%, rgba(68,139,148,0)    68%) !important;
}

/* ==========================================================
   TAGESSTIMMUNG — die Lektionskarte trägt einen Himmel.

   Eine weiche Lichtscheibe wandert über den Tag: morgens tief und
   warm, mittags hoch und klar, abends sinkend und golden, nachts
   ein kühler Mond. Dazu ein Horizontschimmer am unteren Rand.

   Alles aus Verläufen — keine Bilder, keine Kanten, nichts, was
   sich abnutzt. Die Schrift steht links, das Licht rechts.
   ========================================================== */

body .meldo-tab-panel.active[data-panel="start"]>.km-vorschlag,
body .meldo-tab-panel.active[data-panel="start"]>.meldo-next-lesson{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  transition:background 1.2s ease !important;
}

/* Die Lichtscheibe. Position und Farbe kommen von der Tageszeit. */
body .meldo-tab-panel.active[data-panel="start"]>.km-vorschlag::after,
body .meldo-tab-panel.active[data-panel="start"]>.meldo-next-lesson::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at var(--km-sonne-x, 82%) var(--km-sonne-y, 38%),
      var(--km-sonne-a, rgba(255,214,130,.85)) 0%,
      var(--km-sonne-b, rgba(255,214,130,.35)) 14%,
      transparent 46%),
    radial-gradient(140% 70% at 100% 118%,
      var(--km-horizont, rgba(255,190,120,.30)) 0%,
      transparent 62%) !important;
}

/* --- Morgen: tiefe, warme Sonne über dem Horizont --- */
body .meldo-tz-morgen .meldo-tab-panel.active[data-panel="start"]>.km-vorschlag,
body .meldo-tz-morgen .meldo-tab-panel.active[data-panel="start"]>.meldo-next-lesson{
  background:linear-gradient(112deg,#FFFBF2 0%,#FFF6E2 42%,#FEEFD3 100%) !important;
  --km-sonne-x:80%; --km-sonne-y:66%;
  --km-sonne-a:rgba(255,196,92,.90);
  --km-sonne-b:rgba(255,206,120,.40);
  --km-horizont:rgba(255,178,96,.34);
}
/* --- Tag: hoch stehende, klare Sonne, kühlere Fläche --- */
body .meldo-tz-tag .meldo-tab-panel.active[data-panel="start"]>.km-vorschlag,
body .meldo-tz-tag .meldo-tab-panel.active[data-panel="start"]>.meldo-next-lesson{
  background:linear-gradient(112deg,#FAFCFC 0%,#F3F7F7 46%,#E4F4F1 100%) !important;
  --km-sonne-x:84%; --km-sonne-y:22%;
  --km-sonne-a:rgba(255,236,170,.85);
  --km-sonne-b:rgba(190,232,222,.45);
  --km-horizont:rgba(61,124,133,.16);
}
/* --- Abend: sinkende, goldene Sonne --- */
body .meldo-tz-abend .meldo-tab-panel.active[data-panel="start"]>.km-vorschlag,
body .meldo-tz-abend .meldo-tab-panel.active[data-panel="start"]>.meldo-next-lesson{
  background:linear-gradient(112deg,#FFF8F0 0%,#FDEEDD 44%,#F6DFD0 100%) !important;
  --km-sonne-x:88%; --km-sonne-y:78%;
  --km-sonne-a:rgba(250,166,88,.85);
  --km-sonne-b:rgba(240,150,110,.38);
  --km-horizont:rgba(214,110,86,.30);
}
/* --- Nacht: kühler Mond, ruhige Fläche --- */
body .meldo-tz-nacht .meldo-tab-panel.active[data-panel="start"]>.km-vorschlag,
body .meldo-tz-nacht .meldo-tab-panel.active[data-panel="start"]>.meldo-next-lesson{
  background:linear-gradient(112deg,#F4F7FA 0%,#EBF1F6 46%,#E2EAF2 100%) !important;
  --km-sonne-x:86%; --km-sonne-y:26%;
  --km-sonne-a:rgba(226,236,250,.95);
  --km-sonne-b:rgba(168,190,220,.42);
  --km-horizont:rgba(90,120,160,.22);
}

/* Das Symbolplättchen färbt sich mit — es ist die Uhr, also darf es
   die Tageszeit tragen. */
body .meldo-tz-morgen .km-vorschlag .km-v-ic{ color:#E8921F !important; }
body .meldo-tz-tag    .km-vorschlag .km-v-ic{ color:var(--m-teal) !important; }
body .meldo-tz-abend  .km-vorschlag .km-v-ic{ color:#D2691E !important; }
body .meldo-tz-nacht  .km-vorschlag .km-v-ic{ color:#5A78A0 !important; }
body .km-vorschlag .km-v-ic svg circle[fill],
body .km-vorschlag .km-v-ic svg path[fill]{ fill:currentColor !important; }

/* Der Kicker nimmt den Ton auf, damit die Karte einen Klang hat. */
body .meldo-tz-morgen .km-vorschlag .km-v-kicker{ color:#C87C12 !important; }
body .meldo-tz-abend  .km-vorschlag .km-v-kicker{ color:#B5551A !important; }
body .meldo-tz-nacht  .km-vorschlag .km-v-kicker{ color:#4C6A93 !important; }

@media (prefers-reduced-motion:reduce){
  body .meldo-tab-panel.active[data-panel="start"]>.km-vorschlag,
  body .meldo-tab-panel.active[data-panel="start"]>.meldo-next-lesson{ transition:none !important; }
}

/* Das Kursbild setzt dashboard-main.js direkt als Hintergrund der
   Karte — samt hellem Schleier darüber. Hier steht nur, was davon
   unabhängig gilt. */
body .meldo-weiter-hero{
  background-color:transparent !important;
  border-radius:inherit !important;
}

/* Wo ein Bild liegt, treten die Farbwolken zurück. */
body .meldo-weiter-hero.hat-bild::before{ opacity:.25 !important; }

@media (max-width:900px){
  /* Schmale Karte: Text und Bild rücken zusammen, also mehr Schleier. */
  body .meldo-tab-panel.active[data-panel="start"]>.km-vorschlag::before,
  body .meldo-tab-panel.active[data-panel="start"]>.meldo-next-lesson::before{ opacity:.8 !important; }
  body .meldo-weiter-hero.hat-bild::before{ opacity:.18 !important; }
}

/* v2.7.6: Das Bild passt sich der Kartenhöhe an, statt beschnitten zu
   werden. Die Karte hält ihre Höhe von Anfang an, damit beim Laden
   nichts springt. */
body .meldo-weiter-hero.hat-bild{
  background-size:auto, auto 100% !important;
  background-position:center, right center !important;
  background-repeat:no-repeat, no-repeat !important;
  min-height:112px !important;
}
@media (max-width:900px){
  body .meldo-weiter-hero.hat-bild{ min-height:96px !important; }
}

/* ==========================================================
   v2.7.8 — Das Kursbild, bündig und weich eingebunden.

   «.mwh-bg» ist das erste Kind der Karte und liegt unter dem
   Inhalt. Es greift grosszügig über den Rand hinaus; beschnitten
   wird von der Karte, nicht vom Hero — so füllt das Bild die
   volle Höhe, unabhängig davon, wie viel Innenabstand Karte und
   Hero gerade haben.

   «cover» statt «auto 100%»: sonst endet das Bild an seiner
   eigenen Breite mit einer harten Kante. Den Übergang macht
   allein der Schleier, der links deckend beginnt und nach rechts
   auf null läuft.
   ========================================================== */

/* Beschnitten wird von der Karte. */
body .meldo-tab-panel.active[data-panel="start"]>.meldo-start-row-cq{
  overflow:hidden !important;
}
body .meldo-weiter-hero{
  position:relative !important;
  overflow:visible !important;
}

body .meldo-weiter-hero .mwh-bg{
  position:absolute !important;
  top:-120px !important;
  bottom:-120px !important;
  right:-120px !important;
  left:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background-position:center right !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}
body .meldo-weiter-hero .mwh-bg::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(90deg,
    #fff 0%,
    #fff 26%,
    rgba(255,255,255,.88) 42%,
    rgba(255,255,255,.58) 58%,
    rgba(255,255,255,.26) 76%,
    rgba(255,255,255,0)   100%) !important;
}

/* Alles Übrige liegt darüber. */
body .meldo-weiter-hero > *:not(.mwh-bg){
  position:relative !important;
  z-index:1 !important;
}
/* Der Deko-Kreis der Zeile lag über den Kindern — mit Bild stört er. */
body .meldo-tab-panel.active[data-panel="start"] .meldo-start-row:has(.hat-bild)::after{
  display:none !important;
}
body .meldo-weiter-hero.hat-bild{ min-height:112px !important; }

@media (max-width:900px){
  body .meldo-weiter-hero.hat-bild{ min-height:96px !important; }
  /* Schmale Karte: Text und Bild rücken zusammen, also mehr Weiss. */
  body .meldo-weiter-hero .mwh-bg::after{
    background:linear-gradient(90deg,
      #fff 0%,
      #fff 38%,
      rgba(255,255,255,.90) 56%,
      rgba(255,255,255,.62) 76%,
      rgba(255,255,255,.35) 100%) !important;
  }
}

/* ==========================================================
   v2.8.1 — Die beiden oberen Karten sprechen dieselbe Sprache.

   Vorher: links Titel ohne Kicker und ein Knopf im Feld,
   rechts Kicker, Fortschritt und die ganze Karte als Knopf.
   Zwei Karten nebeneinander, die dasselbe Muster zeigen —
   «hier geht's weiter» — sollen es auch gleich zeigen.

   Aufbau beider Karten:
     [Symbol]  KICKER
               Titel
               Metazeile                        [Winkel]
   ========================================================== */

body .meldo-tab-panel.active[data-panel="start"]>.km-vorschlag{
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  border-left:4px solid var(--m-teal) !important;
  cursor:default !important;
}
body .meldo-tab-panel.active[data-panel="start"]>.km-vorschlag.ist-klickbar{
  cursor:pointer !important;
}

/* Symbol wie der Fortschrittsring gegenüber */
body .km-vorschlag .km-v-ic{
  width:44px !important; height:44px !important;
  flex:0 0 44px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  opacity:1 !important;
}
body .km-vorschlag .km-v-ic svg{ width:30px !important; height:30px !important; }

body .km-vorschlag .km-v-tx{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:2px !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}
body .km-vorschlag .km-v-kicker{
  font-family:var(--m-schrift-titel) !important;
  font-weight:700 !important;
  font-size:11.5px !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  color:var(--m-teal) !important;
}
body .km-vorschlag .km-v-tx b{
  font-family:var(--m-schrift-titel) !important;
  font-weight:700 !important;
  font-size:1.12rem !important;
  line-height:1.2 !important;
  color:var(--m-tinte) !important;
}
body .km-vorschlag .km-v-tx small{
  font-family:var(--m-schrift-text) !important;
  font-size:.84rem !important;
  color:var(--m-gedaempft) !important;
  text-decoration:none !important;
}

/* «Klassenmodus starten» ist die Nebenaktion in einer klickbaren
   Karte — still, unterstrichen, ohne Fläche. */
body .km-vorschlag .km-v-cta{
  align-self:flex-start !important;
  margin:8px 0 0 !important;
  padding:0 !important;
  min-height:0 !important;
  border:none !important;
  border-radius:0 !important;
  background:none !important;
  color:var(--m-gedaempft) !important;
  font-family:var(--m-schrift-titel) !important;
  font-weight:600 !important;
  font-size:.86rem !important;
  box-shadow:none !important;
  text-decoration:underline !important;
  text-underline-offset:3px !important;
  text-decoration-color:rgba(0,0,0,.2) !important;
  cursor:pointer !important;
}
body .km-vorschlag .km-v-cta:hover{
  color:var(--m-teal) !important;
  background:none !important;
  text-decoration-color:var(--m-teal) !important;
  transform:none !important;
}

/* Der Winkel wie in der Lernpfad-Karte. */
body .km-vorschlag .km-v-chev{
  flex:0 0 auto !important;
  margin-left:auto !important;
  color:#9BAAAA !important;
  display:flex !important;
  align-items:center !important;
  transition:var(--m-uebergang) !important;
}
body .km-vorschlag:not(.ist-klickbar) .km-v-chev{ display:none !important; }
body .km-vorschlag.ist-klickbar:hover .km-v-chev{
  color:var(--m-teal) !important;
  transform:translateX(3px) !important;
}

@media (max-width:900px){
  body .km-vorschlag .km-v-ic{ width:38px !important; height:38px !important; flex:0 0 38px !important; }
  body .km-vorschlag .km-v-tx b{ font-size:1.02rem !important; }
}

/* Die Metazeile bekommt etwas Luft zum Titel. */
body .km-vorschlag .km-v-tx small{ margin-top:1px !important; }

/* v2.8.3: Die Karte zeigt nur noch die nächste Lektion — der
   Klassenmodus steht jetzt bei «Für Lehrpersonen». */
body .km-vorschlag .km-v-cta{ display:none !important; }

/* v2.9.5: Mobil beschnitt der Hero das Bild selbst, statt es der Karte
   zu überlassen — dadurch blieb rundum ein weisser Rand, und das Bild
   sah aus wie ein eigener Kasten in der Karte. Dieselbe Ordnung wie am
   Schreibtisch: die Karte beschneidet, der Hero lässt durch. */
@media (max-width:900px){
  body .meldo-tab-panel.active[data-panel="start"]>.meldo-start-row-cq{
    overflow:hidden !important;
    border-radius:var(--m-radius-karte) !important;
  }
  body .meldo-tab-panel.active[data-panel="start"] .meldo-start-row{
    overflow:visible !important;
  }
  body .meldo-weiter-hero{
    overflow:visible !important;
    border-radius:0 !important;
  }
  body .meldo-weiter-hero .mwh-bg{
    top:-200px !important;
    bottom:-200px !important;
    right:-200px !important;
    left:0 !important;
    border-radius:0 !important;
  }
}

/* ==========================================================
   v2.9.6 — Die Lehrpersonen-Werkzeuge bekommen Farbe.

   Dezent: sehr helle Töne aus der Meldo-Palette, reihum. Die
   Fläche trägt den Ton, das Symbol führt ihn kräftiger aus.
   Sieben Töne, damit auch eine zweite Reihe nicht wiederholt.
   ========================================================== */
body .meldo-tt-grid .meldo-tt-tile{
  transition:background .18s cubic-bezier(.4,0,.2,1),
             box-shadow .18s cubic-bezier(.4,0,.2,1),
             transform .18s cubic-bezier(.4,0,.2,1) !important;
}

body .meldo-tt-grid .meldo-tt-tile:nth-child(7n+1){ background:#EFF2F3 !important; }
body .meldo-tt-grid .meldo-tt-tile:nth-child(7n+1) .meldo-tt-tic{ color:#3D7C85 !important; }

body .meldo-tt-grid .meldo-tt-tile:nth-child(7n+2){ background:#EEF6E4 !important; }
body .meldo-tt-grid .meldo-tt-tile:nth-child(7n+2) .meldo-tt-tic{ color:#DC7910 !important; }

body .meldo-tt-grid .meldo-tt-tile:nth-child(7n+3){ background:#E7F1F8 !important; }
body .meldo-tt-grid .meldo-tt-tile:nth-child(7n+3) .meldo-tt-tic{ color:#3C8FC7 !important; }

body .meldo-tt-grid .meldo-tt-tile:nth-child(7n+4){ background:#F5ECF4 !important; }
body .meldo-tt-grid .meldo-tt-tile:nth-child(7n+4) .meldo-tt-tic{ color:#A9569F !important; }

body .meldo-tt-grid .meldo-tt-tile:nth-child(7n+5){ background:#E9F4F1 !important; }
body .meldo-tt-grid .meldo-tt-tile:nth-child(7n+5) .meldo-tt-tic{ color:#629394 !important; }

body .meldo-tt-grid .meldo-tt-tile:nth-child(7n+6){ background:#FBF2E4 !important; }
body .meldo-tt-grid .meldo-tt-tile:nth-child(7n+6) .meldo-tt-tic{ color:#C08A2A !important; }

body .meldo-tt-grid .meldo-tt-tile:nth-child(7n+7){ background:#EDEFF6 !important; }
body .meldo-tt-grid .meldo-tt-tile:nth-child(7n+7) .meldo-tt-tic{ color:#5A6BA0 !important; }

/* Beim Darüberfahren wird der Ton eine Spur kräftiger, statt zu
   verschwinden — die Kachel behält ihre Farbe. */
body .meldo-tt-grid .meldo-tt-tile:hover{
  filter:saturate(1.35) brightness(.985) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 3px 10px rgba(26,52,56,.08) !important;
}

/* --- Der Klassenmodus ist kein Werkzeug wie die anderen: er
       verändert, was die Klasse sieht. Ein grüner Punkt hebt ihn
       hervor — dasselbe Zeichen wie überall in Meldo, und er lässt
       sich in einer Zeile wieder entfernen. --- */
body .meldo-tt-grid .km-tt-tile{
  position:relative !important;
  background:#EAF6EE !important;
}
body .meldo-tt-grid .km-tt-tile .meldo-tt-tic{ color:#0E8F5C !important; }
body .meldo-tt-grid .km-tt-tile::after{
  content:"" !important;
  position:absolute !important;
  top:8px !important; right:10px !important;
  width:8px !important; height:8px !important;
  border-radius:50% !important;
  background:var(--m-lime) !important;
  box-shadow:0 0 0 3px rgba(232,146,79,.22) !important;
}

/* ==========================================================
   v2.9.7 — Die Werkzeugkacheln fassen ihre Wörter.

   Bisher waren sie auf 96 px festgelegt; «Klassenverwaltung» und
   «Aufgabenwerkstatt» ragten heraus. Jetzt wächst die Kachel mit
   dem Wort, der Text bricht um und wird bei Bedarf getrennt —
   nach spätestens zwei Zeilen mit Auslassungspunkten.

   (Die Grundform der Kachel steht im Bedienmuster; die Masse
   gehören zu dieser Seite, darum hier.)
   ========================================================== */
body .meldo-tt-grid .meldo-tt-tile{
  width:auto !important;
  min-width:96px !important;
  max-width:140px !important;
  padding:12px 10px !important;
  box-sizing:border-box !important;
}
body .meldo-tt-grid .meldo-tt-tile .meldo-tt-nm{
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  hyphens:auto !important;
  -webkit-hyphens:auto !important;
  line-height:1.18 !important;
  font-size:12px !important;
  text-align:center !important;
  max-width:100% !important;
}

@media (max-width:900px){
  /* Auf dem Handy schiebt sich die Reihe seitlich — die Kacheln
     müssen dafür ihre Breite behalten dürfen. */
  body .meldo-tt-grid{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    gap:10px !important;
    scrollbar-width:none;
    padding-bottom:2px !important;
  }
  body .meldo-tt-grid::-webkit-scrollbar{ display:none; }
  body .meldo-tt-grid .meldo-tt-tile{
    flex:0 0 auto !important;
    min-width:104px !important;
    max-width:132px !important;
  }
}

/* v2.9.8: Der Bereichsfilter gehört unter die Reiterschiene, nie
   daneben. Auf breiten Schirmen rutschte er sonst auf dieselbe
   Höhe und wirkte gleichrangig. */
body .meldo-tab-panel.active[data-panel="start"] .meldo-sparten-segs,

/* v2.9.10: «#meldoSpartenGallery» ist die KACHELGALERIE, nicht der
   Filter — sie stand hier versehentlich mit drin und wurde dadurch
   auf «display:block» gezwungen. Darum lagen die Kurse untereinander
   statt im Raster. Hier bleibt nur der Filter, und sein «display»
   wird nicht angetastet, damit das Aufklappen funktioniert. */
body .meldo-tab-panel.active[data-panel="start"] .meldo-fdd,
body .meldo-tab-panel.active[data-panel="start"] .meldo-fdd-wrap{
  position:relative !important;
  flex-basis:100% !important;
  width:100% !important;
  margin-top:12px !important;
}

/* ==========================================================
   v2.9.9 — Die Bereichsreiter sehen mobil aus wie am Schreibtisch.

   «meldo-mobile-start.css» bringt eigene Sparten-Regeln mit —
   farbige Kachel für den aktiven Bereich, graue für die übrigen.
   Deren Selektoren sind spezifischer als die Definition im
   Bedienmuster, darum hier mit vollem Kontext dagegen.
   ========================================================== */
html body .meldo-tab-panel.active[data-panel="start"] .meldo-sparten-segs{
  display:inline-flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !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;
  margin-bottom:0 !important;
  scrollbar-width:none;
}
html body .meldo-tab-panel.active[data-panel="start"] .meldo-sparten-segs::-webkit-scrollbar{ display:none; }

html body .meldo-tab-panel.active[data-panel="start"] .meldo-sp-seg,
html body .meldo-tab-panel.active[data-panel="start"] .meldo-sp-seg:not(.on){
  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 14px !important;
  border:none !important;
  border-radius:var(--m-radius-reiter) !important;
  background:none !important;
  background-image:none !important;
  color:var(--m-gedaempft) !important;
  box-shadow:none !important;
  transform:none !important;
}
html body .meldo-tab-panel.active[data-panel="start"] .meldo-sp-seg.on{
  background:var(--m-weiss) !important;
  background-image:none !important;
  color:var(--m-teal) !important;
  box-shadow:var(--m-karte) !important;
}
html body .meldo-tab-panel.active[data-panel="start"] .meldo-sp-seg .nm{
  order:1 !important;
  font-family:var(--m-schrift-titel) !important;
  font-size:var(--m-groesse-reiter) !important;
  font-weight:700 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  color:inherit !important;
}
html body .meldo-tab-panel.active[data-panel="start"] .meldo-sp-seg.on .nm,
html body .meldo-tab-panel.active[data-panel="start"] .meldo-sp-seg.on .cnt{
  color:var(--m-teal) !important;
}
html body .meldo-tab-panel.active[data-panel="start"] .meldo-sp-seg .cnt{
  order:2 !important;
  position:static !important;
  background:#e3e9e9 !important;
  color:var(--m-gedaempft) !important;
  border-radius:var(--m-radius-rund) !important;
  padding:1px 7px !important;
  font-size:11px !important;
  font-weight:600 !important;
  opacity:1 !important;
  box-shadow:none !important;
}
html body .meldo-tab-panel.active[data-panel="start"] .meldo-sp-seg.on .cnt{
  background:var(--m-teal-l) !important;
}
html body .meldo-tab-panel.active[data-panel="start"] .meldo-sp-seg .ic,
html body .meldo-tab-panel.active[data-panel="start"] .meldo-sp-seg .ic-img{
  display:none !important;
}

@media (max-width:600px){
  html body .meldo-tab-panel.active[data-panel="start"] .meldo-sp-seg{ padding:0 12px !important; }
  html body .meldo-tab-panel.active[data-panel="start"] .meldo-sp-seg .nm{ font-size:13px !important; }
}

/* ==========================================================
   v2.9.12 — Die Haupttab-Leiste.

   Sie trug einen eigenen Verlauf (#FAF8F3 → #e9ecef) und hob
   sich dadurch vom übrigen Grund ab. Jetzt durchsichtig: der
   Hintergrund kommt von einer Stelle, nicht von dreien.

   Ausserdem beschnitt sie die Schatten ihrer Kacheln. Statt den
   Beschnitt aufzuheben und grosse Schatten überlaufen zu lassen,
   bekommen die Kacheln einen kleinen, der ohnehin passt.

   (Die Tabs selbst — Farben, Form, Anordnung — bleiben unberührt.)
   ========================================================== */
html body .meldo-tab-navigation,
html body #meldoTabNav{
  background:none !important;
  background-image:none !important;
  background-color:transparent !important;
  border:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}
html body .meldo-tab-navigation{
  padding-top:10px !important;
  padding-bottom:12px !important;
}

/* Kleiner Schatten, der innerhalb der Leiste bleibt. */
html body #meldoTabNav .meldo-tab-btn{
  box-shadow:0 1px 3px rgba(26,52,56,.12) !important;
}
html body #meldoTabNav .meldo-tab-btn.active{
  box-shadow:0 2px 6px rgba(26,52,56,.18) !important;
}
html body #meldoTabNav .meldo-tab-btn:hover{
  box-shadow:0 3px 8px rgba(26,52,56,.16) !important;
}

/* Die Trennlinie unter der Leiste bleibt — sie ordnet, ohne zu färben. */
html body .meldo-tabs-container{
  overflow:visible !important;
}

/* ==========================================================
   v2.9.18 — Weitermachen ohne «Nächste Lektion».

   Die Zeile ist für zwei Karten gebaut: links der Hero, rechts die
   nächste Lektion. Solange keine Lektion geladen ist, steht rechts
   ein leerer Platzhalter («.is-skeleton»). Mobil wird er seit je
   ausgeblendet — am Schreibtisch blieb er stehen. Der Hero hört
   darum in der Mitte auf, und ringsum sieht man den hellen Grund
   der Zeile: der weisse Rahmen, der wie ein Fehler aussieht.

   Gleiche Entscheidung wie mobil: kein Platzhalter. Der Hero füllt
   die Zeile, seine Trennlinie nach rechts entfällt.
   ========================================================== */
body .meldo-start-row .meldo-next-lesson:not(.meldo-nl-ready) {
    display: none !important;
}
body .meldo-start-row .meldo-weiter-hero {
    flex: 1 1 auto !important;
}
body .meldo-start-row .meldo-weiter-hero:last-child,
body .meldo-start-row .meldo-weiter-hero:only-of-type {
    border-right: none !important;
}

/* v2.9.19: Der Aussenabstand der Zeile lag INNERHALB der weissen
   Karte — die Karte wurde dadurch um 22 bis 38 px hoeher als ihr
   Inhalt, und unter dem Hero blieb eine leere weisse Flaeche. Den
   Abstand traegt die Karte selbst, nicht die Zeile darin. */
body .meldo-start-row-cq > .meldo-start-row {
    margin-bottom: 0 !important;
}

/* ==========================================================
   v2.9.20 — Die Weitermachen-Zeile traegt am Schreibtisch keine
   Karte.

   Die weisse Karte um «.meldo-start-row-cq» ist im Plugin an drei
   Stellen definiert, jedes Mal in «@media (max-width:780px)». Am
   Schreibtisch war sie trotzdem zu sehen. Dasselbe Muster steht
   schon in dashboard-main.css beschrieben: verflachtes
   Perfmatters-Used-CSS verliert die Medienabfrage, und die
   Mobilregel schlaegt oben durch.

   Darum hier die Gegenregel, ausdruecklich fuer breite Fenster:
   keine Flaeche, kein Rahmen, kein Schatten, keine Polsterung und
   keine reservierte Mindesthoehe. Der Hero traegt seine Karte
   selbst.
   ========================================================== */
@media (min-width: 781px) {
    body .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq {
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        min-height: 0 !important;
    }
    body .meldo-start-row-cq > .meldo-start-row {
        margin-bottom: 0 !important;
    }
}

/* ==========================================================
   v2.9.39 — Lernende sehen dieselbe Startzeile wie Lehrpersonen.

   WAS VORHER WAR
   Am Schreibtisch standen bei Lernenden zwei Dinge untereinander:
   oben die Terminkarte, nackt — ohne Flaeche, ohne Rahmen, ohne
   Radius, ohne Schatten —, darunter die Lernpfad-Zeile mit ihrem
   hellgruenen Verlauf. Bei Lehrpersonen dagegen zwei gleich
   gebaute Karten nebeneinander.

   WARUM
   Die Lehrpersonen-Fassung kommt vollstaendig aus
   «class-klassenmodus.php»: Dort wird die Vorschlagskarte
   «.km-vorschlag» gebaut, die Lernpfad-Zeile gebaendigt und ab
   1100 px die Zweispaltigkeit gesetzt. Dieser ganze Block wird
   aber nur ausgegeben, wenn «Meldo_Klassenansicht_UI::hier_noetig()»
   zutrifft — also nur fuer Lehrpersonen. Lernende bekamen kein
   einziges dieser Regelwerke zu sehen. Die Terminkarte selbst ist
   in der Grundform absichtlich flach: Sie war bis v1.48.0 ein
   Abschnitt INNERHALB der Lernpfad-Zeile und hat ihre Kartenform
   beim Herausloesen nie bekommen.

   WARUM NICHT EINFACH VERSCHOBEN
   Naheliegend waere, die Regeln aus «class-klassenmodus.php» hierher
   zu holen — eine Quelle statt zwei. Dagegen spricht genau das, was
   in v2.9.20 weiter oben steht: Perfmatters verflacht verlinktes
   CSS und verliert dabei Medienabfragen. Einen Block im Fussbereich
   der Seite fasst es nicht an. Die Regeln dort sind also nicht nur
   aus Bequemlichkeit inline — sie sind dort sicher. Darum hier ein
   Gegenstueck statt eines Umzugs, und «:not(:has(> .km-vorschlag))»
   als Riegel: Wo die Vorschlagskarte steht, greift ausschliesslich
   der Block aus «class-klassenmodus.php». Die Ansicht der
   Lehrperson bleibt damit Pixel fuer Pixel, wie sie war.

   Wer eine der beiden Seiten aendert, aendert die andere mit.
   ========================================================== */
@media (min-width: 781px) {

    /* ── Die Terminkarte wird eine Karte ──────────────────────
       Masse, Rahmen und Radius sind dieselben Zahlen wie in
       «class-klassenmodus.php» — bewusst als Zahl und nicht als
       Variable, damit die beiden Karten nicht ueber zwei
       verschiedene Wege zu zwei verschiedenen Werten kommen. */
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-next-lesson {
        border: 1px solid #E6ECEC !important;
        border-left: 4px solid var(--m-teal, #3D7C85) !important;
        border-radius: 16px !important;
        /* Links 76 px: dort steht das Uhrenplaettchen, siehe unten. */
        padding: 12px 42px 12px 76px !important;
        gap: 2px !important;
        margin: 0 0 18px !important;
        min-height: 0 !important;
        box-shadow: none !important;
    }
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-next-lesson:hover {
        background-color: transparent !important;
    }

    /* Der leere Platzhalter waere jetzt eine leere weisse Karte —
       auffaelliger als gar nichts. Gleiche Entscheidung wie in
       «class-klassenmodus.php» und wie mobil: nicht zeigen.
       (Die Regel in v2.9.18 weiter oben zielt auf
       «.meldo-start-row .meldo-next-lesson» und greift seit
       v1.48.0 nicht mehr — die Karte steht seither nicht mehr in
       der Zeile, sondern daneben.) */
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-next-lesson:not(.meldo-nl-ready) {
        display: none !important;
    }

    /* Schrift wie in der Karte der Lehrperson: Kicker, Titel,
       Metazeile — dieselben Groessen, dasselbe Gewicht. */
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-next-lesson .mnl-k {
        font-size: 11.5px !important;
        font-weight: 700 !important;
        letter-spacing: .1em !important;
        color: var(--m-teal, #3D7C85) !important;
    }
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-next-lesson .mnl-t {
        font-size: 1.12rem !important;
        line-height: 1.2 !important;
        color: var(--m-tinte, #111416) !important;
    }
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-next-lesson .mnl-sub {
        font-size: .84rem !important;
        color: var(--m-gedaempft, #6E7A79) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
    /* Der Hinweis auf Hausaufgaben bleibt — er steht nur bei
       Lernenden und ist der einzige Unterschied im Inhalt. Knapper
       gesetzt, damit er die Zeilenhoehe nicht treibt. */
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-next-lesson .mnl-hw {
        margin-top: 4px !important;
        padding: 2px 8px !important;
        font-size: 10.5px !important;
    }

    /* Der gefuellte Kreis wird zum Winkel — daneben steht bei der
       Lehrperson derselbe. Zwei Karten nebeneinander, von denen
       eine einen kraeftigen Knopf traegt und die andere einen
       zarten Pfeil, sehen nicht gleich aus. */
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-next-lesson .mnl-go {
        right: 14px !important;
        width: 18px !important;
        height: 18px !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        color: #9BAAAA !important;
    }
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-next-lesson .mnl-go svg {
        width: 18px !important;
        height: 18px !important;
    }
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-next-lesson:hover .mnl-go {
        color: var(--m-teal, #3D7C85) !important;
        transform: translateY(-50%) translateX(3px) !important;
        box-shadow: none !important;
    }

    /* -- Das Uhrenplaettchen ---------------------------------
       Die Karte der Lehrperson traegt links ein 44 px grosses
       Symbol; der Text beginnt daneben. Die Terminkarte hat
       dieselbe Uhr schon im Markup - sie steht nur klein neben
       dem Kicker. Statt das Template zu aendern, wird sie hier
       herausgeloest und an dieselbe Stelle gesetzt. Damit sehen
       die beiden Karten gleich aus, ohne dass zwei Vorlagen
       gepflegt werden muessen.

       «position:absolute» braucht einen Bezug - den hat die Karte
       weiter oben («position:relative» im Himmel-Block). */
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-next-lesson .mnl-k {
        gap: 0 !important;   /* die Uhr steht nicht mehr in der Zeile */
    }
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-next-lesson .mnl-k svg {
        position: absolute !important;
        left: 18px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 30px !important;
        height: 30px !important;
    }

    /* Die Uhr traegt die Tageszeit - wie das Plaettchen gegenueber.
       Gleiche Toene wie oben bei «.km-v-ic» und «.km-v-kicker». */
    body .meldo-tz-morgen body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-next-lesson .mnl-k{ color:#C87C12 !important; }
    body .meldo-tz-abend  body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-next-lesson .mnl-k{ color:#B5551A !important; }
    body .meldo-tz-nacht  body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-next-lesson .mnl-k{ color:#4C6A93 !important; }
    body .meldo-tz-morgen body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-next-lesson .mnl-k svg{ color:#E8921F !important; }
    body .meldo-tz-abend  body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-next-lesson .mnl-k svg{ color:#D2691E !important; }
    body .meldo-tz-nacht  body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-next-lesson .mnl-k svg{ color:#5A78A0 !important; }

    /* ── Die Lernpfad-Zeile wird gebaendigt ───────────────────
       Wortgleich zum Block in «class-klassenmodus.php». Ohne das
       steht neben der neuen Karte weiterhin der gruene Verlauf mit
       Radius 20 und Schlagschatten — eine Karte in einer Karte. */
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-start-row-cq,
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-start-row-cq .meldo-weiter-hero {
        background: #fff !important;
        background-image: none !important;
    }
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-start-row-cq {
        border: 1px solid #E6ECEC !important;
        border-left: 4px solid #E8924F !important;
        border-radius: 16px !important;
        display: flex !important;
        align-items: center !important;
        padding: 12px 16px !important;
        min-height: 0 !important;
        box-shadow: none !important;
    }
    /* «.meldo-start-row» ist in der Grundform selbst eine Karte —
       Verlauf, Radius 20, Schatten und ein Zierkreis. Hintergrund
       allein zurueckzusetzen genuegt nicht. */
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-start-row-cq .meldo-start-row {
        width: 100% !important;
        background: none !important;
        background-image: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        display: block !important;
    }
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-start-row-cq .meldo-start-row::after,
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-start-row-cq .meldo-start-row::before {
        content: none !important;
        display: none !important;
    }
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-start-row-cq .meldo-weiter-hero {
        border: 0 !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
    }

    /* Knopf NEBEN den Inhalt statt darunter — sonst braucht die
       Kachel eine dritte Zeile, obwohl rechts Platz frei ist. */
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-start-row-cq .mwh-mid {
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr auto;
        grid-template-areas: "beschriftung tat" "titel tat" "balken tat";
        align-items: center;
        column-gap: 16px;
        row-gap: 4px;
    }
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-start-row-cq .mwh-label {
        grid-area: beschriftung; margin: 0 !important;
        white-space: nowrap;   /* «WEITER IM LERNPFAD» nie umbrechen */
    }
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-start-row-cq .mwh-title {
        grid-area: titel; margin: 2px 0 0 !important;
        min-width: 0; overflow: hidden;
    }
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-start-row-cq .mwh-barwrap {
        grid-area: balken; margin: 0 !important; min-width: 0;
    }
    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-start-row-cq .mwh-cta {
        grid-area: tat; margin: 0 !important;
        white-space: nowrap; align-self: center;
    }

    body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-welcome-bar {
        margin-bottom: 22px !important;
    }

    /* ── Ab 1100 px nebeneinander ─────────────────────────────
       Erst hier wird die zweite Spalte breiter als ihr Inhalt;
       darunter bricht der Kurstitel Zeichen fuer Zeichen um.
       Bedingung ist die FERTIGE Karte: Ist gar keine Lektion da,
       blendet «nlApply(null)» sie aus — eine leere erste Spalte
       waere dann ein Loch neben dem Lernpfad. */
    @media (min-width: 1100px) {

        body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)):has(> .meldo-next-lesson.meldo-nl-ready) {
            display: grid !important;
            grid-template-columns: 38fr 62fr;
            column-gap: 16px;
            align-items: stretch;
        }
        /* Alles andere laeuft weiterhin ueber die volle Breite. */
        body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)):has(> .meldo-next-lesson.meldo-nl-ready) > * {
            grid-column: 1 / -1;
        }
        /* Zeile AUSDRUECKLICH zuweisen: Die automatische Platzierung
           zaehlt auch verborgene und leere Geschwister mit, weshalb
           die beiden Karten sonst versetzt landen. */
        body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)):has(> .meldo-next-lesson.meldo-nl-ready) > .meldo-welcome-bar {
            grid-row: 1;
            grid-column: 1 / -1;
        }
        body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)):has(> .meldo-next-lesson.meldo-nl-ready) > .meldo-next-lesson {
            grid-row: 2;
            grid-column: 1;
            margin-bottom: 0 !important;
        }
        body .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)):has(> .meldo-next-lesson.meldo-nl-ready) > .meldo-start-row-cq {
            grid-row: 2;
            grid-column: 2;
            /* Ohne diesen Nullwert bleibt der Aussenabstand unten
               stehen — die Kachel wird dadurch niedriger als ihre
               Nachbarin, obwohl das Raster beide gleich hoch
               ausrichtet. */
            margin: 0 !important;
        }
    }
}

/* =====================================================================
   v2.9.40 — Ankunft nach dem Sprung aus dem Leerzustand.

   Der Knopf in «Weiter im Lernpfad» wechselt nicht mehr den Reiter,
   sondern laeuft zur Schnellübersicht weiter unten auf derselben Seite
   (siehe dashboard-main.js). Ein weicher Lauf ueber eine lange Seite
   endet aber ohne Quittung: Man ist da und merkt es nicht. Der Ring
   leuchtet darum zweimal auf und verschwindet wieder — kein bleibender
   Rahmen, der spaeter stoert.

   Kein eigener Radius hier: Der Schatten folgt dem Radius des Ziels,
   und der ist je nach Abschnitt ein anderer.
   ===================================================================== */

.meldo-ziel-blitz {
    animation: meldo-ziel-blitz 1.1s ease-out 2;
}
@keyframes meldo-ziel-blitz {
    0%   { box-shadow: 0 0 0 0 rgba(232, 146, 79, .55); }
    100% { box-shadow: 0 0 0 16px rgba(232, 146, 79, 0); }
}

/* Die klebende Kopfzeile darf das Ziel nicht anschneiden. */
.meldo-quick,
#meldoSpartenGallery,
#meldoStartCourseList {
    scroll-margin-top: 90px;
}

/* Wer Bewegung abgestellt hat, bekommt statt des Pulses einen kurzen
   Rand — die Quittung bleibt, das Zappeln entfaellt. */
@media (prefers-reduced-motion: reduce) {
    .meldo-ziel-blitz {
        animation: none;
        outline: 2px solid var(--m-teal, #3D7C85);
        outline-offset: 4px;
    }
}

/* v2.10.42: Symbole der Werkzeugkacheln «Für Lehrpersonen» grösser – vorher 15 px in einer 30-px-Fläche (halb),
   jetzt 22 px in 36 px (knapp zwei Drittel, wie bei Apple). */
body .meldo-tt-grid .meldo-tt-tile .meldo-tt-tic{ width:36px !important; height:36px !important; border-radius:11px !important; }
body .meldo-tt-grid .meldo-tt-tile .meldo-tt-msk,
body .meldo-tt-grid .meldo-tt-tile .meldo-tt-tic svg{ width:22px !important; height:22px !important; }

/* =====================================================================
   v2.10.61 — Feinschliff der Startseite, oberer Teil
   (Vorlage «Meldo Dashboard neu – Vorschau», Seite «Feinschliff»,
   freigegeben von Manuel 2.11.2026).

   Aufbau und Inhalt bleiben, nur Gestaltung und Bedienung:
   · keine Symbole links von Titeln (Emblem vor «Hallo», Abspielkreis
     vor «Weiter im Lernpfad», i-Knopf oben rechts),
   · Begrüssung gross in Tinte, rechts zwei Pillen (Level, Diese Woche),
     ohne Verlaufslinie,
   · «Weiter im Lernpfad» und «Nächste Lektion» auf EINER Zeile (60 : 40,
     gleich hoch), ohne Lektion «Weiter» über die volle Breite,
   · «Für Lehrpersonen» als schlanke Leiste unter der Schnellübersicht.

   Steht absichtlich am Ende und mit höherer Spezifität als der Block
   im Klassenmodus (inline im Seitenfuss): «.meldo-dashboard-wrapper»
   davor gibt eine Klasse mehr, damit gewinnt diese Datei, obwohl sie
   früher geladen wird. Werte als Zahl mit Rückfall, wie im Rest der
   Datei (siehe CLAUDE.md im Plugin).
   ===================================================================== */

/* ---------- Begrüssung ---------- */
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-welcome-bar{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-areas:"gruss stufe woche" "unter stufe woche";
  align-items:center;
  column-gap:12px;
  row-gap:4px;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:2px 2px 0 !important;
  margin:0 0 22px !important;
  min-height:0 !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-welcome-bar::before,
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-welcome-bar::after{
  content:none !important;
  display:none !important;
}
/* Linke und rechte Gruppe lösen sich auf: Gruss, Level und Woche werden
   Zellen desselben Rasters. Die Klicks (Profil-Eingang der Gamification)
   laufen weiter über das Element, display:contents ändert nur das Bild. */
body .meldo-dashboard-wrapper .meldo-welcome-bar > .meldo-welcome-left,
body .meldo-dashboard-wrapper .meldo-welcome-bar > .meldo-welcome-left > div:not(.meldo-welcome-avatar),
body .meldo-dashboard-wrapper .meldo-welcome-bar > .meldo-welcome-right{
  display:contents !important;
}
body .meldo-dashboard-wrapper .meldo-welcome-bar .meldo-welcome-avatar,
body .meldo-dashboard-wrapper .meldo-welcome-bar .mg-wb-go{
  display:none !important;
}
body .meldo-dashboard-wrapper .meldo-welcome-bar .meldo-welcome-greeting{
  grid-area:gruss;
  align-self:end;
  margin:0 !important;
  font-family:Akko,system-ui,sans-serif !important;
  font-weight:700 !important;
  font-size:34px !important;
  line-height:1.1 !important;
  letter-spacing:-.02em !important;
  color:#111416 !important;
  -webkit-text-fill-color:#111416 !important;
  background:none !important;
}
body .meldo-dashboard-wrapper .meldo-welcome-bar .meldo-welcome-sub{
  grid-area:unter;
  align-self:start;
  margin:0 !important;
  font-size:17px !important;
  line-height:1.35 !important;
  color:#4A5658 !important;
}
body .meldo-dashboard-wrapper .meldo-welcome-bar .meldo-toggle-container{ grid-area:unter; }

/* Level-Pille (Gamification) */
body .meldo-dashboard-wrapper .meldo-welcome-bar .mg-wb{
  grid-area:stufe;
  margin:0 !important;
  padding:0 !important;
}
body .meldo-dashboard-wrapper .meldo-welcome-bar .mg-wc{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-height:60px !important;
  padding:8px 16px 8px 10px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#111416 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(26,52,56,.06) !important;
  cursor:pointer;
  transition:box-shadow .2s, transform .2s;
}
body .meldo-dashboard-wrapper .meldo-welcome-bar .mg-wc:hover{
  transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(0,0,0,.05),0 8px 20px rgba(26,52,56,.10) !important;
}
body .meldo-dashboard-wrapper .meldo-welcome-bar .mg-wc-ring{
  width:44px !important; height:44px !important; flex:0 0 44px !important;
}
body .meldo-dashboard-wrapper .meldo-welcome-bar .mg-wc-ring svg{ width:44px !important; height:44px !important; }
body .meldo-dashboard-wrapper .meldo-welcome-bar .mg-wc-zahl{
  font-family:Akko,system-ui,sans-serif !important; font-weight:700 !important; font-size:16px !important; color:#111416 !important;
}
body .meldo-dashboard-wrapper .meldo-welcome-bar .mg-wc-txt b{
  display:block; font-family:Akko,system-ui,sans-serif !important; font-weight:700 !important; font-size:15px !important; line-height:1.25 !important; color:#111416 !important;
}
body .meldo-dashboard-wrapper .meldo-welcome-bar .mg-wc-txt small{
  display:block; font-size:13px !important; line-height:1.3 !important; color:#4A5658 !important;
}
body .meldo-dashboard-wrapper .meldo-welcome-bar .mg-wc-pfeil{ color:#8A8A8A !important; }

/* «Diese Woche» */
body .meldo-dashboard-wrapper .meldo-welcome-bar .meldo-week{
  grid-area:woche;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  min-height:60px !important;
  box-sizing:border-box !important;
  padding:8px 20px !important;
  margin:0 !important;
  border-radius:999px !important;
  background:#fff !important;
  border:0 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(26,52,56,.06) !important;
}
body .meldo-dashboard-wrapper .meldo-welcome-bar .meldo-week .mw-l{
  font-size:11px !important; font-weight:600 !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:#4A5658 !important;
}
body .meldo-dashboard-wrapper .meldo-welcome-bar .meldo-week .mw-dots{ display:flex !important; gap:6px !important; }
body .meldo-dashboard-wrapper .meldo-welcome-bar .meldo-week .mw-dots i{
  width:10px !important; height:10px !important; border-radius:50% !important; background:#EEF2F2 !important; box-shadow:none !important; border:0 !important;
}
body .meldo-dashboard-wrapper .meldo-welcome-bar .meldo-week .mw-dots i.on{ background:#E8924F !important; }
body .meldo-dashboard-wrapper .meldo-welcome-bar .meldo-week .mw-dots i.today:not(.on){ box-shadow:inset 0 0 0 2px #E8924F !important; background:#fff !important; }
body .meldo-dashboard-wrapper .meldo-welcome-bar .meldo-week .mw-c{
  font-family:Akko,system-ui,sans-serif !important; font-weight:700 !important; font-size:15px !important; color:#111416 !important; font-variant-numeric:tabular-nums;
}

/* i-Knopf «Diesen Bereich erklären» auf dem Startreiter weg – die Tour
   bleibt über das Fragezeichen oben erreichbar.
   v2.10.105: über data-tab des Knopfs statt «.meldo-tab-content:has(> .meldo-tab-panel.active…)» – dieses :has
   liess jedes Setzen von «active» irgendwo auf der Seite alle Stile neu berechnen (~60 ms, Wiedergabe stockte). */
body .meldo-dashboard-wrapper .meldo-tab-content > .meldo-tabhelp-beacon[data-tab="start"]{
  display:none !important;
}

/* ---------- Startzeile: Weiter im Lernpfad ---------- */
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq{
  display:flex !important;
  align-items:stretch !important;
  min-height:132px !important;
  box-sizing:border-box !important;
  padding:0 !important;
  margin:0 0 20px !important;
  border:0 !important;
  border-radius:26px !important;
  overflow:hidden !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(26,52,56,.08) !important;
}
/* Nichts zu zeigen (kein Lernpfad, Leerzustand übernimmt): keine leere Karte. */
/* v2.10.105: data-weiter statt «:not(:has(.meldo-weiter-hero[style*="flex"]))» (siehe dashboard.php) */
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq:not([data-weiter="1"]){
  display:none !important;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .meldo-start-row{
  display:flex !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .meldo-start-row::before,
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .meldo-start-row::after{
  content:none !important; display:none !important;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .meldo-weiter-hero{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:20px !important;
  width:100% !important;
  box-sizing:border-box !important;
  min-height:132px !important;
  padding:20px 24px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:#fff !important;
  background-image:none !important;
  overflow:hidden !important;
  cursor:pointer;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .meldo-weiter-hero[style*="none"]{
  display:none !important;
}
/* Kursbild rechts, läuft nach links weich ins Weiss aus. */
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-bg{
  position:absolute !important;
  top:0 !important; bottom:0 !important; right:0 !important; left:auto !important;
  width:58% !important; height:auto !important;
  z-index:0 !important;
  opacity:1 !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 30%, #000 72%) !important;
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 30%, #000 72%) !important;
  transform:none !important;
  filter:none !important;
  border-radius:0 !important;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-play{
  display:none !important;
}
/* Frühere Schleier und Winkel auf Karte und Bild: Das Bild läuft jetzt über
   die Maske aus, ein zusätzlicher weisser Verlauf gäbe eine Kante. */
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .meldo-weiter-hero::before,
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .meldo-weiter-hero::after,
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-bg::before,
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-bg::after{
  content:none !important; display:none !important;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-mid{
  position:relative !important;
  z-index:1 !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-areas:"beschriftung tat" "titel tat" "balken tat" !important;
  align-items:center !important;
  column-gap:20px !important;
  row-gap:0 !important;
  padding:0 !important;
  margin:0 !important;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-label{
  grid-area:beschriftung;
  margin:0 0 8px !important;
  font-family:"Akko",system-ui,sans-serif !important;
  font-size:11px !important; font-weight:600 !important; letter-spacing:.1em !important; text-transform:uppercase !important;
  color:#1F737A !important;
  white-space:nowrap;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-title{
  grid-area:titel;
  margin:0 !important;
  max-width:560px;
  font-family:Akko,system-ui,sans-serif !important;
  font-weight:700 !important; font-size:22px !important; line-height:1.2 !important; letter-spacing:-.01em !important;
  color:#111416 !important;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-barwrap{
  grid-area:balken;
  margin:10px 0 0 !important;
  max-width:260px;
  gap:10px !important;
  align-items:center !important;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-bar{
  height:5px !important; border-radius:5px !important; background:#EEF2F2 !important; flex:1 1 auto;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-bar i{
  border-radius:5px !important; background:#3D7C85 !important;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-pct{
  font-size:13px !important; font-weight:600 !important; color:#1F737A !important;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-cta{
  grid-area:tat; display:block !important; margin:0 !important; align-self:center !important;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-cta-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  width:auto !important;
  min-height:50px !important;
  box-sizing:border-box !important;
  padding:0 24px 0 18px !important;
  border:0 !important;
  border-radius:999px !important;
  background:#3D7C85 !important;
  color:#fff !important;
  font-family:Akko,system-ui,sans-serif !important;
  font-weight:700 !important; font-size:15px !important; line-height:1 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  box-shadow:0 6px 16px rgba(0,0,0,.14) !important;
  transition:background .18s;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .meldo-weiter-hero:hover .mwh-cta-btn{
  background:#1F737A !important;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-cta-btn svg{
  width:18px !important; height:18px !important; flex:0 0 auto;
}

/* ---------- Startzeile: Nächste Lektion ---------- */
/* Lehrpersonen: Karte aus dem Klassenmodus («Nächste Lektion» bzw.
   «Deine Klasse»). Lernende: Terminkarte aus meldo/v1/next-lesson. */
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag,
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson.meldo-nl-ready{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  align-items:stretch !important;
  gap:8px !important;
  min-height:132px !important;
  box-sizing:border-box !important;
  padding:16px 20px 16px 22px !important;
  margin:0 0 20px !important;
  border:0 !important;
  border-radius:26px !important;
  background:#fff !important;
  background-image:none !important;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(26,52,56,.08) !important;
  color:#111416 !important;
  text-decoration:none !important;
  overflow:hidden !important;
  cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag:hover,
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson.meldo-nl-ready:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(0,0,0,.05),0 14px 34px rgba(26,52,56,.11) !important;
}
/* Farbwolken und Tageshimmel der früheren Karte: weg, die Karte ist weiss. */
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag::before,
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag::after,
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson.meldo-nl-ready::before,
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson.meldo-nl-ready::after{
  content:none !important; display:none !important;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag .km-v-ic,
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson .mnl-k svg{
  display:none !important;
}
/* Kopfzeile: Beschriftung links, Tag/Zeit als Pille rechts; darunter der Titel. */
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag .km-v-tx{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"kicker zeit" "titel titel" "unter unter";
  align-items:center;
  column-gap:12px;
  row-gap:6px;
  flex:0 0 auto !important;
  min-width:0;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag .km-v-kicker,
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson .mnl-k{
  grid-area:kicker;
  display:block !important;
  margin:0 !important;
  font-family:"Akko",system-ui,sans-serif !important;
  font-size:11px !important; font-weight:600 !important; letter-spacing:.1em !important; text-transform:uppercase !important;
  color:#6A3FB0 !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag .km-v-tx b{
  grid-area:titel;
  margin:2px 0 0 !important;
  font-family:Akko,system-ui,sans-serif !important;
  font-weight:700 !important; font-size:19px !important; line-height:1.2 !important;
  color:#111416 !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag .km-v-tx small{
  grid-area:unter;
  margin:0 !important;
  font-size:14px !important; line-height:1.35 !important;
  color:#4A5658 !important;
  text-decoration:none !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag .km-v-tx small.km-v-termin,
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson .mnl-t{
  grid-area:zeit;
  justify-self:end;
  display:inline-flex !important;
  align-items:center;
  margin:0 !important;
  padding:5px 11px !important;
  border-radius:999px !important;
  background:#F1ECF8 !important;
  color:#5B3596 !important;
  font-family:Akko,system-ui,sans-serif !important;
  font-weight:700 !important; font-size:13px !important; line-height:1.2 !important;
  font-variant-numeric:tabular-nums;
  text-decoration:none !important;
  white-space:nowrap;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag .km-v-tx small.km-v-termin::after{
  content:none !important;
}
/* Runder Pfeil unten rechts */
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag .km-v-chev,
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson .mnl-go{
  position:static !important;
  align-self:flex-end !important;
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:40px !important; height:40px !important;
  margin:0 !important;
  border-radius:50% !important;
  background:#EEF2F2 !important;
  color:#111416 !important;
  transform:none !important;
  opacity:1 !important;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag .km-v-chev svg,
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson .mnl-go svg{
  width:18px !important; height:18px !important;
}
/* Lernende: dieselbe Ordnung über ein Raster der Karte selbst. */
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson.meldo-nl-ready{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto 1fr auto;
  grid-template-areas:"kicker zeit" "unter unter" "hw go";
  column-gap:12px;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson .mnl-skel{ display:none !important; }
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson .mnl-sub{
  grid-area:unter; align-self:center;
  margin:0 !important;
  font-family:Akko,system-ui,sans-serif !important;
  font-weight:700 !important; font-size:19px !important; line-height:1.2 !important;
  color:#111416 !important;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson .mnl-hw{
  grid-area:hw; align-self:center;
  display:inline-flex; align-items:center; gap:7px;
  margin:0 !important;
  font-size:13px !important; color:#4A5658 !important;
}
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson .mnl-hw svg{ width:15px !important; height:15px !important; }
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson .mnl-go{ grid-area:go; }
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson.meldo-next-lesson--live .mnl-t{
  background:#FCF3E9 !important; color:#B27214 !important;
}

/* ---------- Beide nebeneinander ab 1100 px ---------- */
@media (min-width:1100px){
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"]:is(:has(> .km-vorschlag), :has(> .meldo-next-lesson.meldo-nl-ready), .mds-zwei){
    display:grid !important;
    grid-template-columns:minmax(0,3fr) minmax(0,2fr) !important;
    column-gap:20px !important;
    row-gap:0 !important;
    align-items:stretch !important;
  }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"]:is(:has(> .km-vorschlag), :has(> .meldo-next-lesson.meldo-nl-ready), .mds-zwei) > *{
    grid-column:1 / -1 !important;
  }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"]:is(:has(> .km-vorschlag), :has(> .meldo-next-lesson.meldo-nl-ready), .mds-zwei) > .meldo-welcome-bar{
    grid-row:1 !important;
  }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"]:is(:has(> .km-vorschlag), :has(> .meldo-next-lesson.meldo-nl-ready), .mds-zwei) > .meldo-start-row-cq{
    grid-row:2 !important; grid-column:1 !important;
  }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"]:has(> .km-vorschlag) > .km-vorschlag,
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"]:not(:has(> .km-vorschlag)) > .meldo-next-lesson.meldo-nl-ready{
    grid-row:2 !important; grid-column:2 !important;
  }
  /* Ohne Lernpfad-Karte (Leerzustand, per Klassenansicht aus): die Terminkarte
     nimmt die ganze Breite statt einer leeren linken Spalte. */
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"]:not(:has(> .meldo-start-row-cq[data-weiter="1"])) > .km-vorschlag,
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"]:not(:has(> .meldo-start-row-cq[data-weiter="1"])) > .meldo-next-lesson.meldo-nl-ready{
    grid-column:1 / -1 !important;
  }
}

/* ---------- Für Lehrpersonen: schlanke Leiste ---------- */
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-tt{
  margin:6px 0 24px !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-tt .meldo-tt-bar{ display:none !important; }
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-tt .meldo-tt-head{
  display:block !important;
  margin:0 0 10px !important;
  padding:0 0 0 4px !important;
  font-family:"Akko",system-ui,sans-serif !important;
  font-size:11px !important; font-weight:600 !important; letter-spacing:.1em !important; text-transform:uppercase !important;
  color:#6A3FB0 !important;
  background:none !important; border:0 !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-tt .meldo-tt-head svg{ display:none !important; }
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-tt .meldo-tt-grid,
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-tt.tt-collapsed .meldo-tt-grid{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:4px !important;
  padding:6px !important;
  margin:0 !important;
  border-radius:999px !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(26,52,56,.06) !important;
  overflow-x:auto !important;
  scrollbar-width:none;
  grid-template-columns:none !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-tt .meldo-tt-grid::-webkit-scrollbar{ display:none; }
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-tt .meldo-tt-tile{
  flex:1 0 auto !important;
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:46px !important;
  height:auto !important;
  width:auto !important;
  box-sizing:border-box !important;
  min-width:0 !important;
  max-width:none !important;
  padding:0 10px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#111416 !important;
  text-decoration:none !important;
  transform:none !important;
  transition:background .18s, color .18s;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-tt .meldo-tt-tile:hover,
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-tt .meldo-tt-tile:focus-visible{
  background:#EEF3F4 !important;
  color:#1F737A !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-tt .meldo-tt-tic{
  width:20px !important; height:20px !important; flex:0 0 20px !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  margin:0 !important; padding:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  color:#3D7C85 !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-tt .meldo-tt-tic svg,
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-tt .meldo-tt-tic .meldo-tt-msk{
  width:20px !important; height:20px !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-tt .meldo-tt-tic .meldo-tt-msk{
  display:block !important; background-color:currentColor !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-tt .meldo-tt-nm{
  margin:0 !important;
  font-family:Akko,system-ui,sans-serif !important;
  font-weight:700 !important; font-size:13px !important; line-height:1.2 !important;
  color:inherit !important;
  display:inline !important;
  width:auto !important;
  max-width:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  text-align:left !important;
  -webkit-line-clamp:unset !important;
}

/* ---------- Handy (bis 780 px) ---------- */
@media (max-width:780px){
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-welcome-bar{
    column-gap:8px;
    margin:0 0 14px !important;
    padding:4px 0 0 4px !important;
  }
  body .meldo-dashboard-wrapper .meldo-welcome-bar .meldo-welcome-greeting{ font-size:26px !important; }
  body .meldo-dashboard-wrapper .meldo-welcome-bar .meldo-welcome-sub{ font-size:14px !important; }
  /* Level als runder Knopf: nur der Ring. Die Gamification blendet die Pille
     am Handy aus – hier bleibt sie als Ring stehen (Vorlage). */
  body .meldo-dashboard-wrapper .meldo-welcome-bar .mg-wb{ display:block !important; }
  body .meldo-dashboard-wrapper .meldo-welcome-bar .mg-wc{
    width:44px !important; height:44px !important; min-height:44px !important;
    padding:0 !important; gap:0 !important; justify-content:center !important;
    box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(26,52,56,.08) !important;
  }
  body .meldo-dashboard-wrapper .meldo-welcome-bar .mg-wc-txt,
  body .meldo-dashboard-wrapper .meldo-welcome-bar .mg-wc-pfeil{
    position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important;
  }
  body .meldo-dashboard-wrapper .meldo-welcome-bar .meldo-week{
    min-height:44px !important; padding:0 12px !important; gap:7px !important;
    box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(26,52,56,.08) !important;
  }
  body .meldo-dashboard-wrapper .meldo-welcome-bar .meldo-week .mw-l{
    position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important;
  }
  body .meldo-dashboard-wrapper .meldo-welcome-bar .meldo-week .mw-dots{ gap:3px !important; }
  body .meldo-dashboard-wrapper .meldo-welcome-bar .meldo-week .mw-dots i{ width:6px !important; height:6px !important; }
  body .meldo-dashboard-wrapper .meldo-welcome-bar .meldo-week .mw-c{ font-size:13px !important; }

  /* Weiter: kompakt, runder Abspielknopf */
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq{
    min-height:80px !important; border-radius:22px !important; margin:0 0 10px !important;
    box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 26px rgba(26,52,56,.08) !important;
  }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .meldo-weiter-hero{
    min-height:80px !important; padding:12px 12px 12px 16px !important; gap:12px !important;
  }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-bg{ width:60% !important; }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-mid{
    grid-template-areas:"beschriftung tat" "titel tat" !important; column-gap:12px !important;
  }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-label{ font-size:10px !important; margin:0 0 3px !important; }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-title{ font-size:16px !important; line-height:1.25 !important; }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-barwrap{ display:none !important; }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-cta-btn{
    width:48px !important; height:48px !important; min-height:48px !important; padding:0 !important; gap:0 !important;
    justify-content:center !important; border-radius:50% !important; font-size:0 !important;
    box-shadow:0 6px 14px rgba(0,0,0,.14) !important;
  }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-cta-btn svg{ width:20px !important; height:20px !important; }

  /* Nächste Lektion: einzeilig */
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag,
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson.meldo-nl-ready{
    flex-direction:row !important;
    align-items:center !important;
    gap:12px !important;
    min-height:66px !important;
    padding:10px 12px 10px 16px !important;
    margin:0 0 10px !important;
    border-radius:22px !important;
    box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 26px rgba(26,52,56,.08) !important;
  }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag .km-v-tx{
    flex:1 1 auto !important;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"kicker zeit" "titel titel";
    justify-items:start;
    column-gap:8px; row-gap:3px;
  }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag .km-v-tx small:not(.km-v-termin){ display:none !important; }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag .km-v-kicker,
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson .mnl-k{ font-size:10px !important; }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag .km-v-tx small.km-v-termin,
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson .mnl-t{
    justify-self:start; padding:2px 8px !important; font-size:11px !important;
  }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag .km-v-tx b,
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson .mnl-sub{
    font-size:15px !important; margin:0 !important; -webkit-line-clamp:1;
  }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag .km-v-chev,
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson .mnl-go{
    align-self:center !important; flex:0 0 40px;
  }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson.meldo-nl-ready{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    grid-template-areas:"kicker zeit go" "unter unter go";
    justify-items:start;
    row-gap:3px; column-gap:8px;
  }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson .mnl-hw{ display:none !important; }

  /* Für Lehrpersonen: Wischreihe einzelner Pillen */
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-tt .meldo-tt-head{ padding-left:4px !important; margin-bottom:8px !important; }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-tt .meldo-tt-grid,
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-tt.tt-collapsed .meldo-tt-grid{
    gap:8px !important; padding:2px 2px 8px !important; border-radius:0 !important; background:none !important; box-shadow:none !important;
  }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-tt .meldo-tt-tile{
    flex:0 0 auto !important; min-height:44px !important; padding:0 16px 0 12px !important; gap:8px !important;
    background:#fff !important;
    box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(26,52,56,.06) !important;
  }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-tt .meldo-tt-nm{ font-size:13px !important; }
}

@media (prefers-reduced-motion:reduce){
  body .meldo-dashboard-wrapper .meldo-welcome-bar .mg-wc,
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag,
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson{ transition:none !important; }
}

/* =====================================================================
   v2.10.62 — Feinschliff, Etappe 2: Schnellübersicht und «Alle Kurse»
   (Vorlage «Feinschliff», Manuel 2.11.2026). Hintergründe der Kacheln
   bleiben 1:1 (Wunsch Manuel), nur Form, Pille und Kürzel ändern sich.
   ===================================================================== */

/* ---------- Schnellübersicht: Karte und Kopf ---------- */
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick{
  padding:22px 26px 26px !important;
  border:0 !important;
  border-radius:28px !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(26,52,56,.06) !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-head{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  gap:16px !important;
  margin:0 0 18px !important;
  padding:0 !important;
  flex-wrap:nowrap !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-meta{ flex:1 1 auto !important; min-width:0; margin:0 !important; }
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-k{
  margin:0 0 6px !important;
  font-family:"Akko",system-ui,sans-serif !important;
  font-size:11px !important; font-weight:600 !important; letter-spacing:.1em !important; text-transform:uppercase !important;
  color:#1F737A !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-t{
  margin:0 !important;
  font-family:Akko,system-ui,sans-serif !important;
  font-weight:700 !important; font-size:26px !important; line-height:1.15 !important; letter-spacing:-.01em !important;
  color:#111416 !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-themen,
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-switch{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  flex:0 0 auto !important;
  width:auto !important;
  min-height:44px !important;
  box-sizing:border-box !important;
  padding:0 18px !important;
  margin:0 !important;
  border-radius:999px !important;
  border:1.5px solid #E4E6E6 !important;
  border-style:solid !important;
  background:#fff !important;
  color:#111416 !important;
  font-family:Akko,system-ui,sans-serif !important;
  font-weight:700 !important; font-size:14px !important; line-height:1 !important;
  white-space:nowrap !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:background .18s, border-color .18s, color .18s;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-themen:hover{
  background:#EEF3F4 !important; border-color:#EEF3F4 !important; color:#1F737A !important;
}
/* «Andere Stufe» tritt zurück: ohne Rahmen, gedämpft, Pfeil dahinter. */
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-switch{
  border-color:transparent !important;
  color:#4A5658 !important;
  padding:0 12px !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-switch:hover{
  background:#EEF2F2 !important; color:#111416 !important;
}

/* ---------- Schnellübersicht: Kacheln ---------- */
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-grid{
  display:grid !important;
  grid-template-columns:repeat(6, minmax(0,1fr)) !important;
  gap:14px !important;
  margin:0 !important;
  padding:0 !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-tile{
  position:relative !important;
  display:block !important;
  height:160px !important;
  min-height:0 !important;
  width:auto !important;
  aspect-ratio:auto !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:22px !important;
  overflow:hidden !important;
  isolation:isolate;
  color:#fff !important;
  text-decoration:none !important;
  box-shadow:0 6px 16px rgba(0,0,0,.12) !important;
  transform:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-tile:hover,
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-tile:focus-visible{
  transform:translateY(-4px) scale(1.015) !important;
  box-shadow:0 18px 36px rgba(0,0,0,.22) !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-bg{
  position:absolute !important; inset:0 !important;
  background-size:cover !important; background-position:center !important;
  border-radius:0 !important;
  transform:none;
  transition:transform .6s cubic-bezier(.2,.8,.2,1) !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-tile:hover .mq-bg{
  transform:scale(1.06) !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-scrim{
  position:absolute !important; inset:0 !important;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.38) 100%) !important;
  opacity:1 !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-ico{
  position:absolute !important;
  top:16px !important; left:16px !important; right:auto !important; bottom:auto !important;
  width:30px !important; height:30px !important;
  display:flex !important; align-items:center; justify-content:center;
  color:#fff !important;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));
  z-index:2;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-ico svg{
  width:30px !important; height:30px !important; margin:0 !important;
}
/* «Neu» bzw. «2 %» als Milchglas-Pille oben rechts (auch «Bald»/Beta). */
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-ring,
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-beta-chip{
  position:absolute !important;
  top:14px !important; right:14px !important; left:auto !important; bottom:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  width:auto !important; height:auto !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  padding:5px 10px !important;
  border:0 !important;
  border-radius:999px !important;
  /* Etwas dunkler als in der Vorlage: auf hellen Fotos (Musik aktiv) war
     weisse Schrift auf weisslichem Glas kaum lesbar. */
  background:rgba(0,0,0,.24) !important;
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  color:#fff !important;
  font-family:Akko,system-ui,sans-serif !important;
  font-weight:700 !important; font-size:12px !important; line-height:1.2 !important;
  box-shadow:none !important;
  z-index:2;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-ring:has(.mq-pille-ring){ padding:4px 10px 4px 5px !important; }
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-ring::before,
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-ring::after{ content:none !important; display:none !important; }
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-ring > span{
  position:static !important; inset:auto !important;
  display:inline !important;
  width:auto !important; height:auto !important;
  padding:0 !important; margin:0 !important;
  background:none !important; border-radius:0 !important;
  color:#fff !important;
  font:inherit !important;
  font-variant-numeric:tabular-nums;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-pille-ring{
  display:block;
  width:16px; height:16px; flex:0 0 16px;
  border-radius:50%;
  background:conic-gradient(#fff var(--p, 0deg), rgba(255,255,255,.35) 0);
  -webkit-mask:radial-gradient(circle, transparent 5px, #000 5.5px);
          mask:radial-gradient(circle, transparent 5px, #000 5.5px);
}
/* Name unten, Kürzel als weisser Kreis in Kursfarbe dahinter. */
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-nm{
  position:absolute !important;
  left:16px !important; right:12px !important; bottom:14px !important; top:auto !important;
  width:auto !important; height:auto !important;
  margin:0 !important; padding:0 !important;
  font-family:Akko,system-ui,sans-serif !important;
  font-weight:700 !important; font-size:17px !important; line-height:1.15 !important;
  color:#fff !important;
  text-shadow:0 1px 8px rgba(0,0,0,.25);
  white-space:normal !important;
  /* «Klassenmusizieren» passt nicht in 150 px – trennen statt abschneiden. */
  -webkit-hyphens:auto; hyphens:auto;
  overflow-wrap:break-word;
  z-index:2;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-kz{
  display:inline-flex !important;
  align-items:center !important; justify-content:center !important;
  width:21px !important; height:21px !important; min-width:21px !important;
  margin:0 0 0 7px !important; padding:0 !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.92) !important;
  color:#3D7C85 !important;
  font-family:Akko,system-ui,sans-serif !important;
  font-weight:700 !important; font-size:11px !important; line-height:1 !important;
  text-shadow:none !important;
  vertical-align:2px !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-kz[data-kz="N"]{ color:#3A8A53 !important; }
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-kz[data-kz="R"]{ color:#2C7A8C !important; }
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-kz[data-kz="M"]{ color:#864EA1 !important; }
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-kz[data-kz="H"]{ color:#933268 !important; }
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-kz[data-kz="F"]{ color:#265D94 !important; }

/* Schmaler als 1100 px: Wischreihe statt sechs gequetschter Spalten. */
@media (max-width:1099px){
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-grid{
    display:flex !important;
    gap:12px !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    margin:0 -26px !important;
    padding:4px 26px 14px !important;
    scroll-padding:0 26px;
  }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-grid::-webkit-scrollbar{ display:none; }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-tile{
    flex:0 0 150px !important;
    scroll-snap-align:start;
  }
}

/* ---------- Alle Kurse ---------- */
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-kurse-ic{ display:none !important; }
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-kurse-header{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  gap:16px !important;
  padding:0 4px !important;
  margin:8px 0 16px !important;
  background:none !important; border:0 !important; box-shadow:none !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-kurse-tx{
  display:flex !important; flex-direction:column !important; gap:6px !important; margin:0 !important; padding:0 !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-kurse-sub{
  margin:0 !important;
  font-family:"Akko",system-ui,sans-serif !important;
  font-size:11px !important; font-weight:600 !important; letter-spacing:.1em !important; text-transform:uppercase !important;
  color:#1F737A !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-kurse-title{
  margin:0 !important;
  font-family:Akko,system-ui,sans-serif !important;
  font-weight:700 !important; font-size:26px !important; line-height:1.15 !important; letter-spacing:-.01em !important;
  color:#111416 !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-lernwelt-btn{
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  min-height:44px !important; box-sizing:border-box !important;
  padding:0 18px !important; margin:0 !important;
  border-radius:999px !important;
  border:1.5px solid #E4E6E6 !important;
  background:#fff !important;
  color:#111416 !important;
  font-family:Akko,system-ui,sans-serif !important;
  font-weight:700 !important; font-size:14px !important;
  text-decoration:none !important;
  box-shadow:none !important;
  transition:background .18s, border-color .18s, color .18s;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-lernwelt-btn:hover{
  background:#EEF3F4 !important; border-color:#EEF3F4 !important; color:#1F737A !important;
}
/* Bereichsreiter wie das Bedienmuster m-wechsel: helle Schiene, aktiver
   Reiter weiss, Zahl leise dahinter, ohne Symbol und Kursfarbe. */
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-sparten-segs{
  display:inline-flex !important;
  flex-wrap:nowrap !important;
  gap:2px !important;
  max-width:100%;
  box-sizing:border-box;
  padding:3px !important;
  margin:0 0 14px !important;
  border-radius:12px !important;
  background:#EEF2F2 !important;
  border:0 !important;
  box-shadow:none !important;
  overflow-x:auto;
  scrollbar-width:none;
  grid-template-columns:none !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-sparten-segs[style*="none"]{ display:none !important; }
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-sparten-segs::-webkit-scrollbar{ display:none; }
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-sp-seg{
  position:relative !important;
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:6px !important;
  flex:0 0 auto !important;
  min-height:40px !important; height:auto !important;
  box-sizing:border-box !important;
  padding:0 14px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:9px !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  color:#4A5658 !important;
  cursor:pointer;
  transform:none !important;
  transition:background .18s, color .18s;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-sp-seg:hover{ color:#111416 !important; }
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-sp-seg.on{
  background:#fff !important;
  background-image:none !important;
  color:#111416 !important;
  box-shadow:0 1px 4px rgba(0,0,0,.12) !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-sp-seg .ic{ display:none !important; }
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-sp-seg .nm{
  order:1;
  margin:0 !important; padding:0 !important;
  font-family:Akko,system-ui,sans-serif !important;
  font-weight:700 !important; font-size:14px !important; line-height:1.2 !important;
  color:inherit !important;
  white-space:nowrap !important;
  text-shadow:none !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-sp-seg .cnt{
  order:2;
  position:static !important; inset:auto !important;
  width:auto !important; height:auto !important; min-width:0 !important;
  margin:0 !important; padding:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  color:#8A8A8A !important;
  font-family:"Akko",system-ui,sans-serif !important;
  font-weight:600 !important; font-size:13px !important;
}
/* Filter neben den Reitern als ruhige Pille */
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-fdd-trigger{
  min-height:44px !important;
  border-radius:999px !important;
  border:1.5px solid #E4E6E6 !important;
  background:#fff !important;
  box-shadow:none !important;
  color:#111416 !important;
  font-family:Akko,system-ui,sans-serif !important;
  font-weight:700 !important;
}
/* Bereichsreiter links, Filter rechts auf derselben Zeile (Vorlage). */
@media (min-width:781px){
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    column-gap:16px !important;
  }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion > *{ flex:1 1 100%; min-width:0; }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion > .meldo-sparten-segs{ flex:0 1 auto !important; width:auto !important; }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion > .meldo-sparten-chips{
    flex:0 0 auto !important; width:auto !important; margin:0 0 14px auto !important; position:relative;
  }
}
/* Kurskarten */
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-sparten-gallery{
  gap:22px !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:24px !important;
  background:#fff !important;
  color:#111416 !important;
  text-decoration:none !important;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(26,52,56,.07) !important;
  transform:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc:hover,
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc:focus-visible{
  transform:translateY(-4px) !important;
  box-shadow:0 2px 4px rgba(0,0,0,.05),0 22px 44px rgba(26,52,56,.14) !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc .cover{
  position:relative !important;
  height:196px !important;
  aspect-ratio:auto !important;
  border-radius:0 !important;
  background-size:cover !important;
  background-position:center !important;
  transition:background-size .6s cubic-bezier(.2,.8,.2,1);
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc .cover .badge{
  position:absolute !important;
  top:14px !important; left:14px !important; right:auto !important; bottom:auto !important;
  padding:5px 11px !important;
  border:0 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.78) !important;
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  color:#1F737A !important;
  font-family:"Akko",system-ui,sans-serif !important;
  font-size:11px !important; font-weight:600 !important; letter-spacing:.06em !important; text-transform:uppercase !important;
  box-shadow:none !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc .body{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:10px;
  row-gap:6px;
  flex:1 1 auto;
  align-content:start;
  padding:18px 20px 20px !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc .body > *{ grid-column:1 / -1; }
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc .meta{
  margin:0 !important; font-size:13px !important; color:#4A5658 !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc .ti{
  margin:0 !important;
  font-family:Akko,system-ui,sans-serif !important;
  font-weight:700 !important; font-size:19px !important; line-height:1.25 !important;
  color:#111416 !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc .pbar{
  grid-column:1 !important;
  height:6px !important; margin:6px 0 0 !important;
  border-radius:6px !important;
  background:#EEF2F2 !important;
  overflow:hidden;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc .pbar i{
  display:block; height:100%; border-radius:6px !important; background:#3D7C85 !important;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc .pl{
  margin:6px 0 0 !important; font-size:13px !important; font-weight:600 !important; color:#1F737A;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc .pbar + .pl{ grid-column:2 !important; }
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc .act{
  display:flex !important;
  align-items:center !important; justify-content:center !important;
  min-height:46px !important; height:auto !important;
  box-sizing:border-box !important;
  margin:12px 0 0 !important;
  padding:0 16px !important;
  border:0 !important;
  border-radius:999px !important;
  background:#EEF3F4 !important;
  color:#1F737A !important;
  font-family:Akko,system-ui,sans-serif !important;
  font-weight:700 !important; font-size:15px !important;
  box-shadow:none !important;
  transition:background .18s;
}
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc:hover .act:not(.ghost){ background:#E0E9E9 !important; }
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc .act.ghost{
  background:#fff !important;
  border:1.5px solid #E4E6E6 !important;
  color:#111416 !important;
}

/* ---------- Handy (bis 780 px) ---------- */
@media (max-width:780px){
  /* Schnellübersicht ohne eigene Karte, Kacheln laufen bis an den Rand. */
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick{
    padding:0 !important;
    margin:18px 0 6px !important;
    border-radius:0 !important;
    background:none !important;
    box-shadow:none !important;
  }
  /* Titel über die ganze Breite, die beiden Links darunter – nebeneinander
     wurde der Titel auf ein Drittel gequetscht. */
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-head{
    flex-wrap:wrap !important; align-items:center !important; justify-content:flex-start !important;
    column-gap:4px !important; row-gap:2px !important; margin:0 0 8px !important; padding:0 4px !important;
  }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-meta{ flex:1 1 100% !important; }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-themen{ margin-left:-6px !important; }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-k{ margin:0 0 4px !important; }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-t{ font-size:21px !important; }
  /* Kopf-Knöpfe als leise Textlinks mit 44 px Trefferfläche. */
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-themen,
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-switch{
    min-height:44px !important; padding:0 6px !important; gap:5px !important;
    border:0 !important; background:none !important;
    color:#1F737A !important; font-size:14px !important;
  }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-themen svg{ display:none !important; }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-grid{
    margin:0 -16px !important;
    padding:4px 16px 14px !important;
    scroll-padding:0 16px;
  }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-tile{
    flex:0 0 134px !important;
    height:164px !important;
  }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-ico{ top:14px !important; left:14px !important; width:28px !important; height:28px !important; }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-ico svg{ width:28px !important; height:28px !important; }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-ring,
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-beta-chip{ top:12px !important; right:12px !important; padding:4px 9px !important; font-size:11px !important; }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-nm{
    left:14px !important; right:10px !important; bottom:14px !important; font-size:16px !important;
  }

  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-kurse-header{ margin:16px 0 12px !important; flex-wrap:nowrap !important; }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-kurse-tx{ flex:1 1 auto !important; min-width:0 !important; }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-lernwelt-wrapper{ flex:0 0 auto !important; margin:0 !important; width:auto !important; }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-kurse-title{ font-size:21px !important; }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-lernwelt-btn{
    border:0 !important; background:none !important; padding:0 6px !important; color:#1F737A !important;
  }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-lernwelt-btn i{ display:none !important; }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-sparten-gallery{ gap:14px !important; }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc{ border-radius:22px !important; }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc .cover{ height:170px !important; }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc .body{ padding:14px 16px 16px !important; }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc .ti{ font-size:17px !important; }
}

@media (prefers-reduced-motion:reduce){
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-tile,
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-bg,
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc{ transition:none !important; }
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-tile:hover,
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-quick .mq-tile:hover .mq-bg,
  body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] .meldo-kurse-sektion .meldo-cc:hover{ transform:none !important; }
}

/* =====================================================================
   v2.10.63 — Feinschliff, Etappe 3: Reiterleiste und untere Handy-Leiste
   (Vorlage «Feinschliff», Manuel 2.11.2026). Gruppen und Reihenfolge wie
   bisher. Weisse Kacheln, Symbol in der Gruppenfarbe, Name in Tinte; nur der
   aktive Reiter ist gefüllt. Gruppennamen als feine Versalzeile ohne Pille.
   ===================================================================== */
body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn{ --mds-gruppe:#3D7C85; }
body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn--lernen{ --mds-gruppe:#D68916; }
body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn--training{ --mds-gruppe:#B07D12; }
body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn--tools{ --mds-gruppe:#0E8A96; }
body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn--persoenlich{ --mds-gruppe:#7A4FB0; }

@media (min-width:781px){
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn{
    min-height:72px !important;
    border-radius:18px !important;
    transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .2s !important;
  }
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn:not(.active){
    background:#fff !important;
    background-image:none !important;
    box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(26,52,56,.06) !important;
    color:var(--mds-gruppe) !important;
  }
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn:not(.active):hover{
    transform:translateY(-3px) !important;
    box-shadow:0 10px 24px rgba(26,52,56,.12) !important;
  }
  /* Name in Tinte – auch wenn ihm noch ein Neu-Punkt folgt («Unterricht»). */
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn:not(.active) > span:not(.meldo-tab-icon){
    color:#111416 !important;
  }
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn:not(.active) .meldo-tab-icon svg path,
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn:not(.active) .meldo-tab-icon svg circle,
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn:not(.active) .meldo-tab-icon svg ellipse,
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn:not(.active) .meldo-tab-icon svg rect,
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn:not(.active) .meldo-tab-icon svg polygon,
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn:not(.active) .meldo-tab-icon svg line,
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn:not(.active) .meldo-tab-icon svg .icon-primary,
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn:not(.active) .meldo-tab-icon svg .icon-accent{
    fill:var(--mds-gruppe) !important;
    stroke:var(--mds-gruppe) !important;
  }
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn:not(.active) .meldo-tab-icon svg .icon-primary,
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn:not(.active) .meldo-tab-icon svg .icon-accent{ stroke:none !important; }
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn:not(.active) .meldo-tab-icon svg [fill="none"],
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn:not(.active) .meldo-tab-icon svg .icon-stroke,
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn:not(.active) .meldo-tab-icon svg .icon-stroke-accent{ fill:none !important; }
  /* Strich-Elemente (Notenhals, Wellen): auf Weiss sind 0,6 px zu blass. */
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn:not(.active) .meldo-tab-icon svg .icon-stroke,
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn:not(.active) .meldo-tab-icon svg .icon-stroke-accent,
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn:not(.active) .meldo-tab-icon svg [fill="none"][stroke]{
    stroke:var(--mds-gruppe) !important;
    stroke-width:1.8px !important;
  }
  /* Masken-Symbole (Meldo-Set) folgen der Textfarbe. */
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn:not(.active) .meldo-tab-icon i,
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-btn:not(.active) .meldo-tab-icon [style*="mask"]{ background-color:var(--mds-gruppe) !important; }

  /* Gruppennamen: feine Versalzeile in der Gruppenfarbe, keine Pille. */
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-group-label{
    background:none !important;
    padding:0 2px !important;
    border-radius:0 !important;
    font-family:"Akko",system-ui,sans-serif !important;
    font-size:11px !important; font-weight:600 !important; letter-spacing:.1em !important;
  }
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-group[data-group="inhalt"] .meldo-tab-group-label{ color:#1F737A !important; }
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-group[data-group="lernen"] .meldo-tab-group-label{ color:#B27214 !important; }
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-group[data-group="training"] .meldo-tab-group-label{ color:#8A5A00 !important; }
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-group[data-group="tools"] .meldo-tab-group-label{ color:#0B6E78 !important; }
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-group[data-group="persoenlich"] .meldo-tab-group-label{ color:#6A3FB0 !important; }
  /* Ohne Trennstriche zwischen den Gruppen – der Abstand ordnet. */
  body .meldo-dashboard-wrapper #meldoTabNav .meldo-tab-group + .meldo-tab-group{
    border-left:0 !important;
  }
  /* «Alle» hellgrau statt dunkelgrau gefüllt. */
  body .meldo-dashboard-wrapper #meldoTabNav #meldoAllTrigger{
    border-radius:18px !important;
    background:#EEF2F2 !important;
    background-image:none !important;
    color:#4A5658 !important;
    box-shadow:none !important;
  }
  body .meldo-dashboard-wrapper #meldoTabNav #meldoAllTrigger *{ color:#4A5658 !important; }
  body .meldo-dashboard-wrapper #meldoTabNav #meldoAllTrigger:hover{ background:#E4E9E9 !important; }
}

/* Scanner, Klassenmodus, Einstellungen und Hilfe als kleine Rundknöpfe über
   «Alle» statt in einer eigenen Zeile über der Leiste (spart ~40 px, damit die
   Schnellübersicht im ersten Bild bleibt). */
@media (min-width:1100px){
  /* Bleibt im Fluss (Banner darüber verschieben sie mit), nimmt aber keinen
     Platz ein: Höhe 40 px, gleich viel negativer Abstand nach unten. */
  body .meldo-dashboard-wrapper > .meldo-container > .meldo-toolbar{
    position:relative !important;
    z-index:6;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:2px !important;
    height:40px !important; min-height:0 !important;
    margin:12px 0 -52px !important;
    padding:0 !important;
    background:none !important; border:0 !important; box-shadow:none !important;
    pointer-events:none;
  }
  body .meldo-dashboard-wrapper > .meldo-container > .meldo-toolbar > *{ pointer-events:auto; }
  body .meldo-dashboard-wrapper > .meldo-container > .meldo-toolbar > .meldo-toolbar-spacer{ display:none !important; }
  body .meldo-dashboard-wrapper > .meldo-container > .meldo-toolbar ~ .meldo-tabs-container #meldoTabNav{
    padding-top:30px !important;
  }
  body .meldo-dashboard-wrapper #meldoTabNav #meldoAllTrigger{ align-self:flex-end !important; }
}

/* ---------- Untere Leiste am Handy: schwebend, Milchglas ---------- */
@media (max-width:780px){
  body .meldo-bottom-nav,
  body .meldo-gbn{
    left:12px !important; right:12px !important;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    height:68px !important;
    padding:0 6px !important;
    border-radius:26px !important;
    border:1px solid rgba(228,230,230,.9) !important;
    background:rgba(255,255,255,.88) !important;
    -webkit-backdrop-filter:saturate(1.6) blur(20px);
            backdrop-filter:saturate(1.6) blur(20px);
    box-shadow:0 12px 34px rgba(17,35,37,.16) !important;
    box-sizing:border-box !important;
  }
}

/* =====================================================================
   v2.10.65 — Korrekturen nach Rückmeldung Manuel (2.11.2026)
   ===================================================================== */
/* 1) «Nächste Lektion» stand bei Lehrpersonen doppelt: Trägt die Klassenmodus-
   Karte den Termin, setzt das Skript «meldo-termin-in-karte» auf <body>, und die
   Terminkarte (.meldo-next-lesson) muss weg. Die Regel im Klassenmodus-Block war
   schwächer als die Gestaltungsregel aus 2.10.61 und griff nicht mehr. Ebenso
   bleibt eine vom Skript per display:none versteckte Karte versteckt. */
body.meldo-termin-in-karte:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson,
body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson.meldo-nl-ready[style*="none"]{
  display:none !important;
}

/* 2) Fenster «Alle Bereiche» in der Sprache der neuen Reiterleiste: weisse
   Kacheln auf hellgrauem Grund, Symbol und Gruppenname in der Gruppenfarbe,
   Name in Tinte. Gilt auf der Dashboard-Seite und auf allen anderen Seiten
   (startseite.css lädt überall; die Inline-Stile im Seitenfuss sind schwächer). */
body #meldoAllOverlay .meldo-all-card[data-sec]{ --mds-gruppe:#3D7C85; --mds-gruppe-d:#1F737A; }
body #meldoAllOverlay .meldo-all-card[data-sec="lernen"]{ --mds-gruppe:#D68916; --mds-gruppe-d:#B27214; }
body #meldoAllOverlay .meldo-all-card[data-sec="training"]{ --mds-gruppe:#B07D12; --mds-gruppe-d:#8A5A00; }
body #meldoAllOverlay .meldo-all-card[data-sec="tools"]{ --mds-gruppe:#0E8A96; --mds-gruppe-d:#0B6E78; }
body #meldoAllOverlay .meldo-all-card[data-sec="persoenlich"]{ --mds-gruppe:#7A4FB0; --mds-gruppe-d:#6A3FB0; }
body #meldoAllOverlay .meldo-all-panel{
  background:#F1F4F4 !important;
  border-radius:28px !important;
}
body #meldoAllOverlay .meldo-all-title{
  font-size:22px !important; letter-spacing:-.01em;
}
body #meldoAllOverlay .meldo-all-close{
  min-height:40px !important;
  padding:0 16px !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#4A5658 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(26,52,56,.06) !important;
}
body #meldoAllOverlay .meldo-all-card[data-sec]{
  background:#fff !important;
  background-image:none !important;
  color:#111416 !important;
  border:0 !important;
  border-radius:18px !important;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(26,52,56,.06) !important;
}
body #meldoAllOverlay .meldo-all-card[data-sec]:hover,
body #meldoAllOverlay .meldo-all-card[data-sec]:focus-visible{
  transform:translateY(-3px) !important;
  box-shadow:0 10px 24px rgba(26,52,56,.12) !important;
}
body #meldoAllOverlay .meldo-all-card[data-sec] .ag{
  color:var(--mds-gruppe-d) !important;
  opacity:1 !important;
  font-family:"Akko",system-ui,sans-serif !important;
  font-size:11px !important; font-weight:600 !important; letter-spacing:.1em !important;
}
body #meldoAllOverlay .meldo-all-card[data-sec] .al{ color:#111416 !important; }
body #meldoAllOverlay .meldo-all-card[data-sec] .ai{ color:var(--mds-gruppe) !important; }
body #meldoAllOverlay .meldo-all-card[data-sec] .ai svg path,
body #meldoAllOverlay .meldo-all-card[data-sec] .ai svg circle,
body #meldoAllOverlay .meldo-all-card[data-sec] .ai svg ellipse,
body #meldoAllOverlay .meldo-all-card[data-sec] .ai svg rect,
body #meldoAllOverlay .meldo-all-card[data-sec] .ai svg polygon,
body #meldoAllOverlay .meldo-all-card[data-sec] .ai svg line,
body #meldoAllOverlay .meldo-all-card[data-sec] .ai svg .icon-primary,
body #meldoAllOverlay .meldo-all-card[data-sec] .ai svg .icon-accent{
  fill:var(--mds-gruppe) !important;
  stroke:var(--mds-gruppe) !important;
}
body #meldoAllOverlay .meldo-all-card[data-sec] .ai svg .icon-primary,
body #meldoAllOverlay .meldo-all-card[data-sec] .ai svg .icon-accent{ stroke:none !important; }
body #meldoAllOverlay .meldo-all-card[data-sec] .ai svg [fill="none"]{ fill:none !important; }
body #meldoAllOverlay .meldo-all-card[data-sec] .ai svg [stroke="none"]{ stroke:none !important; }
body #meldoAllOverlay .meldo-all-card[data-sec] .ai svg .icon-stroke,
body #meldoAllOverlay .meldo-all-card[data-sec] .ai svg .icon-stroke-accent,
body #meldoAllOverlay .meldo-all-card[data-sec] .ai svg [fill="none"][stroke]{
  fill:none !important;
  stroke:var(--mds-gruppe) !important;
  stroke-width:1.8px !important;
}
body #meldoAllOverlay .meldo-all-card[data-sec] .ai [style*="mask"],
body #meldoAllOverlay .meldo-all-card[data-sec] .ai i{ background-color:var(--mds-gruppe) !important; }
body #meldoAllOverlay .meldo-all-card[data-sec] .ai img{ filter:none !important; }


/* =====================================================================
   v2.10.69 — Kleinere Laptop-Bildschirme (Meldung Manuel 2.11., bei einem Lernenden)
   ===================================================================== */
/* 1) Die Rundknöpfe (Scanner, Klassenmodus, Einstellungen, Hilfe) lagen bei
   1100–1500 px über dem Gruppennamen «PERSÖNLICH». 2.10.70: Die Knöpfe bleiben
   an ihrem Platz (2.10.69 hob sie 10 px an – dann schnitt der feste Kopf sie oben
   ab), dafür stehen die Gruppennamen 18 px tiefer (Knöpfe 95–133, Namen ab 138,
   Kopf endet bei 92; gemessen 1280–1920 px). */
@media (min-width:1100px){
  body .meldo-dashboard-wrapper > .meldo-container > .meldo-toolbar ~ .meldo-tabs-container #meldoTabNav{
    padding-top:48px !important;
  }
}
/* 2) «Weiter im Lernpfad» und «Nächste Lektion» etwas niedriger: Höhe 132 → 116 px,
   Titel 22 → 20 px, Innenabstand 20 → 16 px. */
@media (min-width:781px){
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq,
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .meldo-weiter-hero,
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .km-vorschlag,
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-next-lesson.meldo-nl-ready{
    min-height:116px !important;
  }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .meldo-weiter-hero{
    padding:16px 24px !important;
  }
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-start-row-cq .mwh-title{
    font-size:20px !important;
  }
}
/* Nebeneinander (ab 1100 px) beide Karten ohne Aussenabstand: Die Terminkarte
   hatte 20 px, die Lernpfad-Karte 0 – in derselben Rasterzeile war sie darum
   20 px kürzer. :is(…) hebt die Gewichtung über die älteren Regeln. */
@media (min-width:1100px){
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"]:is(:has(> .km-vorschlag), :has(> .meldo-next-lesson.meldo-nl-ready), .mds-zwei) > .meldo-start-row-cq,
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"]:is(:has(> .km-vorschlag), :has(> .meldo-next-lesson.meldo-nl-ready), .mds-zwei) > .km-vorschlag,
  body:not(.meldo-km) .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"]:is(:has(> .km-vorschlag), :has(> .meldo-next-lesson.meldo-nl-ready), .mds-zwei) > .meldo-next-lesson.meldo-nl-ready{
    margin-bottom:0 !important;
  }
}

/* =====================================================================
   v2.10.77 — Begrüssung und Pillen bei wenig Platz (Meldung Manuel 2.11.)
   Das Raster «Gruss | Level | Woche» liess den Gruss bei schmalem Inhalt
   (Laptop mit offenem Panel) auf 0 schrumpfen – die Pillen lagen über
   «Hallo …». Jetzt entscheidet die Breite des Start-Reiters selbst
   (Container-Abfrage, egal ob das Panel offen oder zu ist): Reicht sie
   nicht, stehen die Pillen in einer eigenen Zeile darunter, links bündig.
   Am Handy (bis 780 px) gilt weiter die kompakte Zeile mit dem Ring.
   Platz: Gruss bis ~400 px + Level ~240 + Woche ~260 + Abstände → 1020.
   ===================================================================== */
body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"]{ container:meldo-start / inline-size; }
@media (min-width:781px){
  @container meldo-start (max-width:1020px){
    body .meldo-dashboard-wrapper .meldo-tab-panel.active[data-panel="start"] > .meldo-welcome-bar{
      grid-template-columns:auto minmax(0,1fr);
      grid-template-areas:"gruss gruss" "unter unter" "stufe woche";
    }
    body .meldo-dashboard-wrapper .meldo-welcome-bar .mg-wb,
    body .meldo-dashboard-wrapper .meldo-welcome-bar .meldo-week{ margin-top:12px !important; }
    body .meldo-dashboard-wrapper .meldo-welcome-bar .meldo-week{ justify-self:start !important; }
    body .meldo-dashboard-wrapper .meldo-welcome-bar .meldo-welcome-greeting{ overflow-wrap:anywhere; }
    body .meldo-dashboard-wrapper .meldo-welcome-bar:not(:has(.mg-wb)) .meldo-week{ grid-column:1 / -1; }
  }
}

/* =====================================================================
   v2.10.80 — «Alle Kurse» am Handy (Meldung Manuel 2.11.: «sieht noch nicht schön
   aus, sicherlich nicht à la Apple»). Wie die freigegebene Vorlage «Feinschliff
   Handy»: Karten einspaltig, Bereiche als Pillen mit Rand links, Abzeichen klein.
   ===================================================================== */
@media (max-width:780px){
  /* Kopf: Titel und «Zur Lernwelt» auf einer Linie, ohne Vorzeile. */
  body .meldo-dashboard-wrapper .meldo-kurse-sektion .meldo-kurse-header{ align-items:center !important; }
  body .meldo-dashboard-wrapper .meldo-kurse-sektion .meldo-kurse-sub{ display:none !important; }
  body .meldo-dashboard-wrapper .meldo-kurse-sektion .meldo-kurse-title{ font-size:22px !important; line-height:1.2 !important; }

  /* Bereiche: Die Leiste rastete am ersten Reiter ein und schluckte dabei den
     linken Rand (scroll-snap ohne scroll-padding → scrollLeft 16). Rechts blendet
     sie weich aus, damit man sieht, dass es weitergeht. */
  body .meldo-dashboard-wrapper #meldoSpartenSegs{
    scroll-padding-inline:16px !important;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
  }
  body .meldo-dashboard-wrapper #meldoSpartenSegs .meldo-sp-seg{
    min-height:38px !important; height:auto !important;
    padding:0 14px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.6) !important;
    box-shadow:inset 0 0 0 1px rgba(17,34,37,.07) !important;
  }
  body .meldo-dashboard-wrapper #meldoSpartenSegs .meldo-sp-seg.on{
    background:#3D7C85 !important;
    box-shadow:none !important;
  }
  body .meldo-dashboard-wrapper #meldoSpartenSegs .meldo-sp-seg.on .nm,
  body .meldo-dashboard-wrapper #meldoSpartenSegs .meldo-sp-seg.on .cnt{ color:#fff !important; }
  body .meldo-dashboard-wrapper #meldoSpartenSegs .meldo-sp-seg.on .cnt{ opacity:.7; }

  /* Kurskarten: eine pro Zeile (zwei Spalten à 172 px waren zu eng). */
  body .meldo-dashboard-wrapper #meldoSpartenGallery{
    grid-template-columns:minmax(0,1fr) !important;
    gap:14px !important;
  }
  body .meldo-dashboard-wrapper #meldoSpartenGallery .meldo-cc .cover{ height:180px !important; }
  body .meldo-dashboard-wrapper #meldoSpartenGallery .meldo-cc .badge{
    top:12px !important; left:12px !important;
    padding:4px 10px !important;
    font-size:10px !important; letter-spacing:.06em !important;
  }
}