/*
 * Konto-Abschnitte, Eltern-Zugang, Gruppen - und die Kaesten, die auch die
 * Startseite zeigt (Tagesziel-Ring, Wochenziel, Lob, Abzeichen).
 * Nur was Bootstrap nicht kann; Farben ueber Variablen (hell und dunkel).
 */

/* Kennzahlen als Kacheln (Konto, Eltern) */
.kennzahlen-kacheln .kennzahl {
  height: 100%; padding: .6rem .4rem; border-radius: .9rem; text-align: center;
  background: var(--flaeche-hell);
}
.kennzahlen-kacheln .kennzahl strong { display: block; font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.kennzahlen-kacheln .kennzahl span { display: block; font-size: .8rem; color: var(--bs-secondary-color); }
.konto-schmal { max-width: 22rem; }

/* Tagesziel-Ring (Startseite, abzeichen.php) */
.tagesziel { color: inherit; }
.tagesziel:hover { background: var(--flaeche-hell); }
.tagesziel .ring {
  flex: none; width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--kern-akzent) var(--anteil, 0deg), var(--flaeche-hell) 0);
}
.tagesziel .ring span {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--bs-body-bg); font-weight: 800;
}
.tagesziel.erreicht .ring { background: var(--richtig); }
.tagesziel.erreicht .ring span { color: var(--richtig); }

/* Abzeichen */
.abzeichen-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .5rem; }
.abzeichen-liste li {
  display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center;
  padding: .6rem .3rem; border-radius: .9rem; background: var(--flaeche-hell);
}
.abzeichen-liste li.offen { background: transparent; border: 1px dashed var(--bs-border-color); opacity: .5; filter: grayscale(1); }
.abzeichen-emoji { font-size: 1.8rem; line-height: 1.2; }

/* Lob (Startseite des Kindes, Eltern-Zugang) */
.lob-kasten { background: var(--richtig-hell); }
.lob-text { font-size: 1.15rem; font-weight: 800; }
.lob-vorlagen .btn { white-space: nowrap; }

/* Wochenziel */
.wochenziel-symbol { font-size: 1.8rem; line-height: 1; }
.wochenziel-punkte { letter-spacing: .15em; color: var(--richtig); white-space: nowrap; }
.wochenziel.erreicht { background: var(--richtig-hell); }

/* Eltern: 7-Tage-Verlauf als Saeulen */
.wochenverlauf { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; text-align: center; }
.wochenverlauf .saeule { height: 90px; display: flex; align-items: flex-end; }
.wochenverlauf .gesamt {
  display: flex; align-items: flex-end; width: 100%; min-height: 2px;
  background: var(--falsch-hell); border-radius: .5rem .5rem 0 0; overflow: hidden;
}
.wochenverlauf .richtig { display: block; width: 100%; background: var(--richtig); }
.wochenverlauf small { display: block; color: var(--bs-secondary-color); font-size: .75rem; }
.wochenverlauf small.minuten { color: var(--kern-akzent); }
[data-bs-theme="dark"] .wochenverlauf small.minuten { color: #b79bff; }

/* Eltern: Faecher einer Lektion als schmaler Balken */
.faecher-mini {
  display: flex; height: 1rem; border-radius: .5rem; overflow: hidden; margin: .35rem 0;
  font-size: .7rem; line-height: 1rem; color: #fff; text-align: center; background: var(--bs-secondary-bg);
}
.faecher-mini span.f1 { background: #e5484d; }
.faecher-mini span.f2 { background: #f18f3b; }
.faecher-mini span.f3 { background: #e7b93f; }
.faecher-mini span.f4 { background: #69c06a; }
.faecher-mini span.f5 { background: #2f9e6e; }

/* Noten der Probe-Klassenarbeit */
.probe-note {
  display: inline-grid; place-items: center; min-width: 1.7rem; height: 1.7rem; padding: 0 .3rem;
  border-radius: .5rem; font-weight: 800; background: var(--fast-hell); color: var(--fast);
}
.probe-note.n1, .probe-note.n2 { background: var(--richtig-hell); color: var(--richtig); }
.probe-note.n5, .probe-note.n6 { background: var(--falsch-hell); color: var(--falsch); }

/* Eltern: falsche Eingaben */
.eltern-eingaben .eingabe-falsch, .eltern-eingaben .eingabe-richtig { font-family: ui-monospace, monospace; }
.eltern-eingaben del { color: var(--falsch); }
.eltern-eingaben ins { color: var(--richtig); text-decoration: none; font-weight: 800; }

/* Kind einladen / anfragen */
.kind-formular { padding: 1rem; border-radius: 1rem; background: var(--flaeche-hell); }

/* Gruppen: Lernstand-Tabelle (breit, waagerecht scrollbar) */
.gruppen-tabelle th, .gruppen-tabelle td { white-space: nowrap; }
.gruppen-tabelle .balken-klein {
  display: inline-block; width: 3rem; height: .45rem; vertical-align: middle; margin-right: .3rem;
  border-radius: .3rem; background: var(--bs-secondary-bg); overflow: hidden;
}
.gruppen-tabelle .balken-klein span { display: block; height: 100%; background: var(--richtig); }
.gruppen-link { font-family: ui-monospace, monospace; font-size: .85rem; }