/* 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;
    }
}