/* =====================================================================
   css/gruppe-persoenlich.css — Lerngruppe, Persönliches sichtbar
   (a1014 G3, js/gruppe-persoenlich.js). Nur --pp-Tokens (hell/dunkel).
   ===================================================================== */
.gp-abschnitt { margin-top: 18px; }
.gp-abschnitt[hidden] { display: none; }
.gp-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gp-kopf .gp-filter { margin-left: auto; }
.gp-satz { margin: 2px 0 8px; }
.gp-zeile { cursor: pointer; }
.gp-zeile .gp-kopie { flex: 0 0 auto; }
.gp-sym { display: inline-block; min-width: 1.2em; color: var(--pp-text-2); }
.gp-von { min-width: 0; }
.gp-fremd-kopf .gp-von { display: inline-flex; align-items: center; gap: 6px; }
.gp-name { font-weight: 500; }
.gp-aus { margin: 6px 0 0; }
.gp-marke { display: inline-block; margin-left: 8px; padding: 0 6px; border: 1px solid var(--pp-line); border-radius: 999px;
  font-size: var(--pp-fs-mini); line-height: 18px; color: var(--pp-text-2); vertical-align: middle; white-space: nowrap; }
.gp-ort-veranstaltung { margin-top: 10px; }
.gp-va-zeile .pp-va-akt { flex: 0 0 auto; }
/* Am Finger: die Zeile umbricht, der Knopf behält 44 px Höhe. */
@media (pointer: coarse) {
  .gp-zeile .gp-kopie { min-height: 44px; }
}
@media (max-width: 380px) {
  .pp-row.gp-zeile { flex-wrap: wrap; }
  .pp-row.gp-zeile .grow { flex: 1 1 100%; min-width: 0; }
}

/* Die fremde Seite (Reiter der Arbeitsumgebung oder Dialog): Kopf + Inhalt, nur lesend. */
.vl-pb.vl-fremd-seite { display: block; overflow: auto; padding: 0; }
.gp-fremd { display: flex; flex-direction: column; min-height: 100%; width: 100%; }
.gp-fremd-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--pp-line);
  background: var(--pp-surface); position: sticky; top: 0; z-index: 1; }
.gp-fremd-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.gp-fremd-kopf .gp-sp { flex: 1 1 auto; }
.gp-fremd-inhalt { padding: 12px 16px 24px; min-width: 0; }
.gp-notiz { max-width: 820px; overflow-wrap: anywhere; white-space: normal; }
.gp-flaeche-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.gp-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.gp-karte { border: 1px solid var(--pp-line); border-radius: 8px; background: #ffffff; overflow: hidden; }
.gp-karte img { display: block; width: 100%; height: auto; }
.gp-weg { padding: 16px; }
.gp-fremd-dialog { min-height: 200px; }
.pp-nt-eingebettet .pp-nt-blatt { max-width: 100%; }

/* Die eigene Meldung, wenn keine Arbeitsumgebung offen ist. */
.gp-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none;
  background: var(--pp-surface); color: var(--pp-text); border: 1px solid var(--pp-line); border-radius: 10px; padding: 10px 14px;
  box-shadow: var(--pp-lift); z-index: 1000; max-width: calc(100vw - 32px); transition: opacity .2s, transform .2s; }
.gp-toast.auf { opacity: 1; transform: translateX(-50%) translateY(0); }