/* ==========================================================================
   MUNTA — GRUPPEN
   Eigene Datei seit Phase 8b (Architekturregel 4 aus Abschnitt 98b).

   Geladen ueber `$extraStyles` im Basislayout - keine @import-Kaskade. Sie
   betrifft vier Seiten: /gruppen, /gruppe/{slug}, das Gruppenformular und
   die Mitgliederverwaltung.

   Was hier NICHT steht: Buttons, Formfelder, Chips, Karten, Typografie,
   Farben, Abstaende, Radien, Fokus, Feedkarten. Die bleiben zentral in
   `munta.css`. Hier stehen ausschliesslich gruppenspezifische Layouts.

   Nach dem Auslagern des Messenger-CSS in 8a.1 sind versehentlich zentrale
   Regeln mitgewandert - Kopfzeile, Chips, Kacheln fehlten danach auf jeder
   Seite ohne Messenger. Diese Datei ist deshalb von vornherein klein
   gehalten und enthaelt nur Klassen mit den Praefixen `gruppen`, `mitglied`
   und `gefahrenzone`.
   ========================================================================== */

/* ==========================================================================
   1. Die Gruppenliste (/gruppen)
   ========================================================================== */

.gruppenliste {
  list-style: none; margin: var(--space-5) 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden;
}

.gruppenkarte {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
}

.gruppenkarte__zeichen {
  flex: 0 0 auto; width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--surface-soft); color: var(--text);
  border-radius: var(--radius-xs);
}
.gruppenkarte__icon { width: 22px; height: 22px; }

/*
   `min-width: 0` ist noetig, damit lange Namen ohne Leerzeichen die Zeile
   nicht sprengen - ein Flex-Kind ignoriert sonst sein Umbruchverhalten.
   Genau daran lief in 8a.1 die Kopfzeile bei 390px ueber.
*/
.gruppenkarte__text { min-width: 0; flex: 1 1 auto; display: grid; gap: var(--space-1); }

.gruppenkarte__name { margin: 0; font-size: var(--fs-base); font-weight: 700; }
.gruppenkarte__name a { color: inherit; text-decoration: none; }
.gruppenkarte__name a:hover { text-decoration: underline; }

.gruppenkarte__meta,
.gruppenkopf__meta {
  margin: 0; font-size: var(--fs-xs); color: var(--text-muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
}

.gruppenkarte__beschreibung {
  margin: 0; font-size: var(--fs-md); color: var(--text);
  overflow-wrap: anywhere;
}

.gruppenkarte__einlader { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }

/*
   Die Art der Gruppe als kleine Marke.

   Drei Farben fuer drei Bedeutungen - und zwar so, dass der Unterschied
   auch ohne Farbe erkennbar bleibt: Die Beschriftung steht ausgeschrieben
   daneben ("Oeffentlich", "Geschlossen", "Privat"), nicht nur als Punkt.
   Farbe allein waere fuer farbfehlsichtige Menschen keine Auskunft.

   Der Klassenname `--secret` bleibt der technische Wert aus der Datenbank;
   sichtbar heisst die Stufe seit 8b.1 "Privat".
*/
.gruppenkarte__art {
  font-size: var(--fs-tiny); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .12rem .45rem; border-radius: var(--radius-pill);
  background: var(--surface-soft); color: var(--text);
}
.gruppenkarte__art--public { background: var(--forest-soft); color: var(--forest); }
.gruppenkarte__art--closed { background: var(--enzian-soft); color: var(--enzian); }
.gruppenkarte__art--secret { background: var(--surface-soft); color: var(--text-muted); }

.gruppenkarte--einladung { flex-wrap: wrap; }
.gruppenkarte__aktionen {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  margin-left: auto;
}

/* Die Suchleiste ueber der Liste */
.gruppensuche {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end;
  margin-top: var(--space-4);
}
.gruppensuche .field { margin: 0; flex: 1 1 200px; }
.gruppensuche .btn { flex: 0 0 auto; }

/* ==========================================================================
   2. Der Gruppenkopf (/gruppe/{slug})
   ========================================================================== */

.gruppenkopf {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-5) 0 var(--space-4);
  border-bottom: 1px solid var(--border);
}

.gruppenkopf__zeichen {
  flex: 0 0 auto; width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--dark); color: var(--text-invert);
  border-radius: var(--radius-sm);
}
.gruppenkopf__icon { width: 30px; height: 30px; }

.gruppenkopf__text { min-width: 0; flex: 1 1 auto; display: grid; gap: var(--space-2); }

/*
   Die Regel der Gruppe steht direkt unter dem Namen - nicht in einer
   Fussnote. Wer eine Gruppe oeffnet, soll ohne Suchen wissen, wer hier
   mitliest und wie man hineinkommt.
*/
.gruppenkopf__regel { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

.gruppenkopf__beschreibung {
  margin: 0; overflow-wrap: anywhere;
}

.gruppenaktionen {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: center;
  margin: var(--space-4) 0;
}
.gruppenaktionen form { margin: 0; }

/* ==========================================================================
   3. Schreiben in der Gruppe
   ========================================================================== */

.gruppencomposer {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  display: grid; gap: var(--space-3);
}
.gruppencomposer .field { margin: 0; }

/*
   16px Schriftgroesse im Eingabefeld ist keine Geschmacksfrage: Alles
   darunter laesst iOS beim Antippen in die Seite zoomen - dieselbe
   Feststellung wie beim Messenger-Composer in 8a.
*/
.gruppencomposer textarea { font-size: 16px; }

/* ==========================================================================
   4. Mitgliederliste
   ========================================================================== */

.mitgliederliste {
  list-style: none; margin: var(--space-3) 0 var(--space-5); padding: 0;
  display: grid; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden;
}

.mitglied {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  min-height: 56px;
}

.mitglied__text { min-width: 0; flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.mitglied__name { font-weight: 650; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.mitglied__name:hover { text-decoration: underline; }

.mitglied__rolle {
  font-size: var(--fs-tiny); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--orange-dark);
}

/*
   Die Handgriffe der Gruppenleitung.

   Auf schmalen Geraeten rutschen sie unter den Namen statt daneben - drei
   Knoepfe und ein Auswahlfeld passen bei 390px nicht in eine Zeile. Sie
   bleiben trotzdem alle sichtbar; ein Menue dahinter waere ein Klick mehr
   fuer etwas, das die Leitung oft braucht.
*/
.mitglied__aktionen {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  margin-left: auto;
}
.mitglied__aktionen form { display: flex; gap: var(--space-2); align-items: center; margin: 0; }
.mitglied__aktionen select { min-height: 40px; }

.mitgliederliste--kurz { margin-bottom: var(--space-4); }

.einladenform {
  display: grid; gap: var(--space-3);
  margin-bottom: var(--space-5);
  max-width: 30rem;
}
.einladenform .field { margin: 0; }
.einladenform .btn { justify-self: start; }

/* ==========================================================================
   5. Die Gefahrenzone
   ==========================================================================
   Das Loeschen steht getrennt vom uebrigen Formular und ganz unten - nicht,
   weil es versteckt gehoert, sondern damit niemand versehentlich dorthin
   greift, waehrend er den Namen aendert. Der Haken davor ist Pflicht.
   ========================================================================== */

.gefahrenzone {
  margin-top: var(--space-7);
  padding: var(--space-4);
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: grid; gap: var(--space-3);
}
.gefahrenzone .section-title { margin: 0; color: var(--danger); }
.gefahrenzone p { margin: 0; font-size: var(--fs-md); }
.gefahrenzone form { display: grid; gap: var(--space-3); justify-items: start; }

/* ==========================================================================
   6. Schmale Geraete
   ==========================================================================
   Gemessen bei 390 / 430 / 768 / 1440 px - kein horizontaler Ueberlauf.
   ========================================================================== */

@media (max-width: 560px) {
  .gruppenkopf { gap: var(--space-3); }
  .gruppenkopf__zeichen { width: 44px; height: 44px; }
  .gruppenkopf__icon { width: 24px; height: 24px; }

  /* Die Knoepfe stehen untereinander und werden voll breit - drei
     nebeneinander waeren bei 390px je 110px schmal und kaum zu treffen. */
  .gruppenaktionen { display: grid; gap: var(--space-2); }
  .gruppenaktionen > .btn,
  .gruppenaktionen form,
  .gruppenaktionen form .btn { width: 100%; }

  .gruppenkarte__aktionen { width: 100%; margin-left: 0; }
  .gruppenkarte__aktionen form,
  .gruppenkarte__aktionen .btn { flex: 1 1 auto; }

  .mitglied__aktionen { width: 100%; margin-left: 0; }
  .gruppensuche .btn { width: 100%; }
}

/* ==========================================================================
   7. Rollenliste (8b.1)
   ==========================================================================
   Was die vier Rollen bedeuten, steht neben der Mitgliederverwaltung -
   nicht in einer Hilfeseite. „Verwaltung" und „Moderation" sind sonst zwei
   Woerter, die dasselbe zu heissen scheinen.
   ========================================================================== */

.rollenliste {
  margin: var(--space-3) 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: grid; gap: var(--space-2);
}

.rollenliste__zeile { display: grid; gap: .1rem; }

.rollenliste dt {
  font-size: var(--fs-tiny); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange-dark);
}
.rollenliste dd { margin: 0; font-size: var(--fs-sm); color: var(--text); }

@media (min-width: 640px) {
  /* Ab hier passt Name und Beschreibung nebeneinander. */
  .rollenliste__zeile {
    grid-template-columns: 10rem 1fr; gap: var(--space-3); align-items: baseline;
  }
}

/* ==========================================================================
   8. Das Gruppenbild (8c)
   ==========================================================================
   Ein einziges Bild, kein Titelbild-Album. Es steht dort, wo sonst das
   Symbol steht - gleiche Groesse, gleicher Platz, damit die Kopfzeile nicht
   springt, je nachdem ob eine Gruppe ein Bild hat.
   ========================================================================== */

.gruppenkopf__bild {
  flex: 0 0 auto; width: 56px; height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.gruppenbildbox {
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: grid; gap: var(--space-3);
}

.gruppenbild--vorschau {
  max-width: 220px; width: 100%; height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* ==========================================================================
   9. Gruppenchat (8c)
   ==========================================================================
   Der Chat laedt `messenger.css` mit und benutzt dessen Blasen, Composer
   und Verlauf unveraendert. Hier steht NUR, was der Gruppenfall zusaetzlich
   braucht - vor allem der Name des Absenders, den ein Zweiergespraech nicht
   noetig hat.
   ========================================================================== */

.msg__absender {
  margin: 0 0 .15rem;
  font-size: var(--fs-tiny); font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--orange-dark);
}
.msg--eigen .msg__absender { display: none; }

.konvokopf__unterzeile {
  margin: 0; font-size: var(--fs-tiny); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}

/* „Aeltere Nachrichten laden" - oben ueber dem Verlauf, nicht unten. */
.verlauf__mehr { margin: var(--space-3) 0 0; text-align: center; }

@media (max-width: 560px) {
  .gruppenkopf__bild { width: 44px; height: 44px; }
}

/* ==========================================================================
   10. Trefferflaechen in der Mitgliederverwaltung (8c)
   ==========================================================================
   `.btn--small` ist zentral 40px hoch - fuer einen gelegentlichen Knopf in
   einer Verwaltungsansicht am Schreibtisch reicht das. In der
   Mitgliederliste wird aber wiederholt getippt, oft auf dem Telefon und oft
   direkt neben einem anderen Knopf mit gegenteiliger Wirkung ("Entfernen"
   neben "Ausschliessen").

   Hier gilt deshalb 44px. Die zentrale Klasse bleibt unveraendert - sie
   steht an dreizehn anderen Stellen, an denen niemand um eine Aenderung
   gebeten hat.
   ========================================================================== */

.mitglied__aktionen .btn,
.mitglied__aktionen select { min-height: 44px; }

/*
   Das Rollenfeld steht in einer Flex-Zeile und nicht in einem `.field` -
   dort wuerde ein Grid-Container die Knopfreihe zerreissen. Es braucht die
   Formatierung deshalb hier: 16px, sonst zoomt iOS beim Antippen in die
   Seite.
*/
.mitglied__aktionen select {
  font: inherit; font-size: 16px;
  padding: .4rem .6rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}

/* Das Grundfeld beim Moderieren im Chat - es steht in einem `.field`,
   braucht in der schmalen Blase aber die volle Breite. */
.msg__zurueck .field { margin: 0 0 var(--space-2); }
.msg__zurueck .field input { width: 100%; }