/* Gemeinsam lernen (assets/js/gruppen.js): Lernpartner und Klassen auf der
   Kontoseite. Nur Farben aus den Variablen von stil.css — damit gilt jede
   Farbfassung (hell, dunkel, System) von selbst, und der Kontrast ist der,
   der dort schon geprueft ist. Jeder Knopf und jedes Feld mindestens 44 px
   hoch; nichts darf auf 320 px seitlich hinausragen. */

.gr-tafel { display: grid; gap: 1.25rem; min-width: 0; }
.gr-tafel > * { margin: 0; min-width: 0; }
.gr-platz, .gr-bereich { display: grid; gap: 1.25rem; min-width: 0; }
.gr-bereich > * { margin: 0; min-width: 0; }
.gr-karte { min-width: 0; overflow-wrap: anywhere; }
.gr-abschnitt {
  margin: .75rem 0 0; font-family: var(--schrift-titel); font-size: clamp(1.35rem, 1.15rem + .9vw, 1.8rem);
  color: var(--ink);
}
.gr-titel { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.gr-unter { margin: .25rem 0 0; font-size: 1rem; color: var(--ink); }

.gr-tafel .knopf { min-height: 2.75rem; }
.gr-tafel .knopf-zweit { min-height: 2.75rem; }
.gr-tafel .ks-link { min-height: 2.75rem; }
.gr-gefahr { color: var(--fehler-ink); border-color: var(--fehler-ink); }
.gr-gefahr:hover { color: var(--fehler-ink); }

.gr-form { display: grid; gap: .9rem; margin: 0; min-width: 0; }
.gr-form > * { margin: 0; }
.gr-feld { display: grid; gap: .35rem; min-width: 0; }
.gr-feld label, .gr-themenwahl legend { font-weight: 600; color: var(--ink); }
.gr-feld small { color: var(--ink-2); font-size: .9rem; }
.gr-feld select.ks-eingabe { min-height: 2.9rem; }
.gr-tafel input:focus-visible, .gr-tafel select:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }

.gr-haken { align-items: center; margin: 0; min-height: 2.75rem; }
.gr-haken label { flex: 1 1 auto; min-width: 0; cursor: pointer; padding: .55rem 0; }
.gr-haken input { width: 1.4rem; height: 1.4rem; margin: 0; accent-color: var(--marke); }

.gr-meldung { margin: 0; color: var(--ink); }
.gr-meldung-ok, .gr-meldung-fehler { padding: .7rem .9rem; border-radius: var(--rund-s); }
.gr-meldung-ok { background: var(--ok-weich); color: var(--ok-ink); }
.gr-meldung-fehler { background: var(--fehler-weich); color: var(--fehler-ink); }
.gr-meldung:focus { outline: 2px solid var(--marke); outline-offset: 2px; }

.gr-code {
  margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); font-weight: 700; letter-spacing: .08em;
  color: var(--ink); overflow-wrap: anywhere;
}
.gr-ergebnis, .gr-codeblock { display: grid; gap: .6rem; min-width: 0; }
.gr-ergebnis:empty { display: none; }
.gr-ergebnis > *, .gr-codeblock > * { margin: 0; }
.gr-codeblock { padding: 1rem; border-radius: var(--rund); background: var(--bg-tief); }

/* Partner */
.gr-partnerliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.gr-partner {
  display: grid; gap: .6rem; padding: 1.1rem; min-width: 0;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-l);
}
.gr-partner > * { margin: 0; }
.gr-werte { display: grid; gap: .4rem; margin: 0; }
.gr-werte > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; }
.gr-werte dt { color: var(--ink-2); }
.gr-werte dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.gr-offen { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.gr-offen li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; color: var(--ink-2); }

/* Klassen */
.gr-klassen { display: grid; gap: 1rem; min-width: 0; }
.gr-lehrklasse { gap: 0; padding: 0; }
.gr-summary {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem;
  min-height: 2.75rem; padding: 1rem 1.25rem; cursor: pointer; list-style-position: inside;
}
.gr-summary .gr-titel { display: inline; }
.gr-summary:focus-visible { outline: 2px solid var(--marke); outline-offset: -2px; border-radius: var(--rund-l); }
.gr-innen { display: grid; gap: 1rem; padding: 0 1.25rem 1.25rem; min-width: 0; }
.gr-innen > * { margin: 0; }
.gr-summary-klein { padding: .5rem 0; font-weight: 600; color: var(--marke-ink); }
.gr-neue-aufgabe { border-top: 1px solid var(--linie); padding-top: .5rem; }
.gr-neue-aufgabe[open] > .gr-form { margin-top: .75rem; }
.gr-themenwahl { border: 1px solid var(--linie); border-radius: var(--rund); padding: .75rem 1rem; margin: 0; min-width: 0;
  max-height: 24rem; overflow-y: auto; }
.gr-themengruppe { display: grid; gap: 0; margin-top: .5rem; }
.gr-bereichsname { margin: .5rem 0 .1rem; font-weight: 600; }

.gr-aufgaben { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.gr-aufgabe { display: grid; gap: .35rem; padding: .85rem 1rem; border-radius: var(--rund); background: var(--bg-tief); min-width: 0; }
.gr-aufgabe > * { margin: 0; }
.gr-aufgabe-kopf { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline; font-weight: 600; color: var(--ink); }
.gr-faellig { color: var(--ink); }
.gr-aufgabe-stand { color: var(--ink-2); font-weight: 500; }
.gr-themen { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.gr-themen li { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .75rem; }
.gr-marke {
  display: inline-block; padding: .1rem .55rem; border-radius: var(--rund-voll);
  font-size: .85rem; font-weight: 600; background: var(--marke-weich); color: var(--ink);
}
.gr-marke-ok { background: var(--ok-weich); color: var(--ok-ink); }
.gr-blatt { font-size: .95rem; }

.gr-tabellenhuelle { min-width: 0; overflow-x: auto; }
.gr-tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.gr-tabelle th, .gr-tabelle td { padding: .55rem .6rem; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: middle; color: var(--ink); }
.gr-tabelle thead th { font-size: .9rem; color: var(--ink-2); font-weight: 600; }
.gr-tabelle tbody th { font-weight: 600; }
.gr-tabelle tbody th .ks-klein { font-weight: 400; }
.gr-spalte-knopf { text-align: right; }
.gr-klein.knopf { padding: .45rem .9rem; font-size: .9rem; }
.gr-ende { display: grid; gap: .5rem; border-top: 1px solid var(--linie); padding-top: 1rem; }
.gr-ende > * { margin: 0; }
.gr-schule { max-width: 46rem; }
.gr-ohne { margin-top: 1.5rem; }

/* Auf dem Telefon wird jede Zeile der Tabelle eine kleine Karte: Die
   Spaltenkoepfe stehen dann vor jedem Wert (data-kopf). */
@media (max-width: 640px) {
  .gr-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gr-tabelle, .gr-tabelle tbody, .gr-tabelle tr, .gr-tabelle th, .gr-tabelle td { display: block; width: 100%; box-sizing: border-box; }
  .gr-tabelle tr { border: 1px solid var(--linie); border-radius: var(--rund); padding: .5rem .75rem; margin-bottom: .75rem; }
  .gr-tabelle th, .gr-tabelle td { border: 0; padding: .3rem 0; }
  .gr-tabelle td[data-kopf] { display: flex; justify-content: space-between; gap: 1rem; }
  .gr-tabelle td[data-kopf]::before { content: attr(data-kopf); color: var(--ink-2); }
  .gr-tabelle tbody th { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; }
  .gr-spalte-knopf { text-align: left; }
  .gr-summary, .gr-innen { padding-left: 1rem; padding-right: 1rem; }
  .gr-karte.ks-karte { padding: 1.1rem; }
  .gr-lehrklasse.ks-karte { padding: 0; }
}

/* Erklaersaetze in der Breite des Lesemasses: auf dem breiten Schirm lief
   ein Absatz sonst ueber die ganze Karte (layout_pruefen, /fr/compte.html). */
.gr-tafel p, .gr-bereich p, .gr-platz p { max-width: var(--lesebreite, 39rem); }