/* 15.10.2026 Gruppenanruf wie WhatsApp (gruppen_anruf.py, gruppenanruf.js, gruppenanruf_seite.js). Klingeln = .an-eingang aus
   chat_reiter.css (dasselbe Vollbild wie beim 1:1-Anruf); hier nur, was der Gruppenanruf dazu braucht. */

/* «Laufender Anruf – beitreten» (Gruppe, Chats) */
.ga-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; padding: 10px 14px; border-radius: var(--radius);
  background: rgba(31,191,106,.14); border: 1px solid rgba(31,191,106,.45); color: var(--milch) }
.ga-banner b { flex: 1 1 12em }
.ga-banner .knopf { background: #1fbf6a; color: #fff; border: 0 }
button.ga-marke.ga-marke { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 9px; border-radius: 999px; border: 0; cursor: pointer;
  background: #1fbf6a; color: #fff; font: inherit; font-size: .8rem; font-weight: 700; white-space: nowrap }
.ga-kopf-knoepfe { display: inline-flex; gap: 8px; margin-left: auto }
.ga-kopf-knoepfe button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linie); background: var(--pflaume-hell); color: var(--milch);
  font-size: 1.15rem; cursor: pointer; display: grid; place-items: center; padding: 0 }
.ga-kopf-knoepfe button:focus-visible, .ga-marke:focus-visible { outline: 3px solid var(--violett); outline-offset: 2px }

/* Anrufliste: Gruppenanrufe */
.ga-liste-titel { margin-top: 1.2em }
.ga-leute { color: var(--nebel) }

/* Anrufseite */
.ga-seite { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #0d0612; color: #fff }
.ga-kopf { display: flex; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 8px }
.ga-kopf h1 { font-size: 1.15rem; margin: 0; color: #fff; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ga-kopf small { color: #d9c9e6 }
.ga-status { text-align: center; color: #d9c9e6; margin: 0 16px 6px }
.ga-raster { flex: 1; min-height: 0; display: grid; gap: 6px; padding: 6px; grid-template-columns: 1fr; grid-auto-rows: 1fr }
.ga-raster.n2 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .ga-raster.n2 { grid-template-columns: 1fr 1fr } }
.ga-raster.n4 { grid-template-columns: 1fr 1fr }
.ga-raster.n6 { grid-template-columns: 1fr 1fr }
@media (min-width: 700px) { .ga-raster.n6 { grid-template-columns: repeat(3, 1fr) } }
.ga-raster.n9 { grid-template-columns: repeat(3, 1fr) }
.ga-raster.n12 { grid-template-columns: repeat(3, 1fr) }
@media (min-width: 900px) { .ga-raster.n12 { grid-template-columns: repeat(4, 1fr) } }
.ga-raster.mit-buehne { grid-template-columns: 1fr; grid-template-rows: 3fr; grid-auto-rows: 1fr }
.ga-kachel { position: relative; min-height: 0; border-radius: 12px; overflow: hidden; background: #221230; display: grid; place-items: center;
  outline: 3px solid transparent; transition: outline-color .15s }
.ga-kachel.spricht { outline-color: #1fbf6a }
.ga-kachel.buehne { grid-column: 1 / -1 }
.ga-kachel video { width: 100%; height: 100%; object-fit: cover; background: #000 }
.ga-kachel.bildschirm video { object-fit: contain }
.ga-kachel.ich video { transform: scaleX(-1) }
.ga-kachel.ich.hinten video { transform: none }
.ga-initiale { width: min(96px, 40%); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 2.2rem; font-weight: 800;
  background: var(--verlauf); color: #fff; overflow: hidden }
.ga-initiale img { width: 100%; height: 100%; object-fit: cover }
.ga-name { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.55); font-size: .85rem;
  max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ga-stumm-zeichen { margin-left: 4px }
.ga-leiste { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; padding: 12px 16px calc(18px + env(safe-area-inset-bottom, 0px)) }
.ga-leiste .an-rund { width: 58px; height: 58px; font-size: 1.4rem }
.ga-ende { text-align: center; padding: 16px }
.ga-fehler { margin: 8px 16px; text-align: center }

/* «➕ Person hinzufügen» — ueber der Anrufseite (z 60) und dem Klingeln (z 200) */
.ga-waehler { z-index: 250 }
.ga-waehler .ga-suche { width: 100%; margin: 4px 0 10px }
.ga-wahl { display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer }
.ga-wahl input { width: 20px; height: 20px; flex: none }