/* =========================================================================
   CoinFlow Finance – Modulband  ·  v1.1.0

   Alle Regeln hängen an .cff-modband. Es gibt keine Regel für body, html,
   main oder eine Lektionswurzel. Baut man das Plugin aus, bleibt nichts
   zurück.

   Die Farben entsprechen dem CFF-Design: dunkles Navy, ein Grün als
   einziger Akzent, Grau für alles Inaktive. Kein zweiter Akzent.
   ========================================================================= */

.cff-modband{
  --mb-em:#34D399;
  --mb-tx:#E8EDEA;
  --mb-tx2:#A6B1AA;
  --mb-tx3:#6B776F;
  --mb-ln:rgba(232,237,234,.09);
  --mb-ln2:rgba(232,237,234,.14);
  --mb-l1:rgba(232,237,234,.022);
  --mb-mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;

  /* Das Band sitzt innerhalb der Lektion, ganz oben. Die Lesebreite
     entspricht der der Lektionen, damit es bündig mit deren Inhalt steht. */
  display:block;
  width:min(100%, 1240px);
  margin:0 auto;
  padding:clamp(1.5rem,3vw,2.25rem) clamp(1.25rem,3.4vw,3.5rem) 0;
  box-sizing:border-box;
  position:relative;
  z-index:1;
}

.cff-modband *{ box-sizing:border-box; }

.cff-modband__in{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--mb-ln);
  border:1px solid var(--mb-ln);
  border-radius:10px;
  overflow:hidden;
}

.cff-modband__cell{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  padding:clamp(.9rem,2vw,1.15rem) clamp(1rem,2.2vw,1.4rem);
  background:#070B09;
}

.cff-modband__cell.is-on{ background:var(--mb-l1); }

.cff-modband__head{
  display:flex;
  align-items:baseline;
  gap:.65rem;
  flex-wrap:wrap;
}

.cff-modband__label{
  font-family:var(--mb-mono);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mb-tx3);
  white-space:nowrap;
}

.cff-modband__cell.is-on .cff-modband__label{ color:var(--mb-em); }

.cff-modband__name{
  font-size:13px;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--mb-tx3);
  line-height:1.2;
}

.cff-modband__cell.is-on .cff-modband__name{ color:var(--mb-tx); }

/* Fortschritt als Segmente — eines je Lektion */
.cff-modband__bar{
  display:flex;
  gap:3px;
  height:4px;
}

.cff-modband__seg{
  flex:1 1 0;
  min-width:0;
  border-radius:2px;
  background:var(--mb-ln2);
}

.cff-modband__seg.is-done{ background:rgba(52,211,153,.42); }

.cff-modband__seg.is-here{
  background:var(--mb-em);
  box-shadow:0 0 0 1px rgba(52,211,153,.28);
}

.cff-modband__pos{
  font-family:var(--mb-mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mb-tx2);
}

/* Schmale Fenster: untereinander, aber weiterhin vollständig lesbar */
@media (max-width:760px){
  .cff-modband__in{ grid-template-columns:1fr; }
  .cff-modband__cell{ flex-direction:row; align-items:center; gap:.9rem; }
  .cff-modband__head{ flex:1 1 auto; flex-direction:column; gap:.15rem; align-items:flex-start; }
  .cff-modband__bar{ flex:0 0 96px; }
  .cff-modband__pos{ display:none; }
  .cff-modband__cell.is-on .cff-modband__pos{ display:block; flex:0 0 auto; }
}

/* Helles Umfeld: das Band bleibt lesbar, falls Dark UI einmal aus ist */
@media (prefers-color-scheme:light){
  .cff-modband__cell{ background:#0B0F0D; }
}