/* mila-community.css — gemeinsame Oberflaeche der zehn Community-Seiten.
 *
 * KONTEXT: Community ist voller App-Kontext. Die Seiten laden mila-ui.js und
 * bekommen damit data-shell="app", Sidebar, Bottom-Navigation und Skins —
 * anders als Public (4D) und Auth (4C). Das bleibt so.
 *
 * Alle Regeln haengen an body.co, damit keine einzige Regel auf App-Seiten
 * ausserhalb dieses Blocks wirken kann. Es entsteht keine neue Designsprache:
 * Kartenanatomie, Radien, Badges und Sheets folgen mila-theme.css und den
 * Mustern aus Phase 2/3.
 *
 * Diese Datei aendert ausschliesslich Darstellung. Kein Skript, kein Request,
 * kein Redirect, keine Rolle, keine Rechtepruefung.
 */

/* ---- Einstieg (community.html) --------------------------------------------
   Bento statt gleichfoermigem Kachelraster: die drei Bereiche Menschen,
   Lerngruppen und Teilen sind unterschiedlich schwer, und das darf man sehen.
   Es werden ausschliesslich bereits vorhandene Seiten verlinkt. */
body.co .co-sec{margin:26px 0 0}
body.co .co-sec-h{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;
  font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:var(--m-text-2,var(--muted))}
body.co .co-sec-h::after{content:"";flex:1 1 auto;height:1px;background:var(--card-border)}

body.co .co-grid{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
body.co .co-tile{display:flex;flex-direction:column;gap:6px;min-width:0;
  background:var(--card);border:1px solid var(--card-border);border-radius:14px;
  padding:18px;text-decoration:none;color:var(--text);
  transition:border-color .15s,transform .1s}
body.co .co-tile:hover{border-color:var(--blue);transform:translateY(-2px);text-decoration:none}
body.co .co-tile:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
body.co .co-tile .ci{font-size:1.55rem;line-height:1;margin-bottom:4px}
body.co .co-tile h2{margin:0;font-size:1.05rem;color:var(--text-strong);
  overflow-wrap:break-word;line-height:1.3}
body.co .co-tile p{margin:0;font-size:.86rem;color:var(--muted);line-height:1.5;
  overflow-wrap:break-word}
/* Der erste Bereich traegt die taeglich benutzten Wege und darf breiter stehen. */
@media(min-width:900px){
  body.co .co-sec.co-weit .co-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.co .co-sec.co-weit .co-tile{padding:22px}
}
@media(prefers-reduced-motion:reduce){
  body.co .co-tile:hover{transform:none}
}

/* ---- Community-Hub (C-5a) -------------------------------------------------
   Zwei Ebenen auf einer Seite: die persoenlichen Werkzeuge, die es laengst
   gibt, und die neun Oberwelten. Damit nicht beides gleichzeitig um
   Aufmerksamkeit ringt, sind die Werkzeuge zu kompakten Wegen geschrumpft und
   die Welten tragen das Gewicht. Es entsteht keine neue Designsprache:
   Radien, Farben und Karten kommen aus mila-theme.css. */

/* Suche ganz oben — ohne gewaehlten Bereich sucht sie ueber alles. */
body.co .co-suche{margin:18px 0 4px}
body.co .co-suche input{width:100%;box-sizing:border-box;padding:12px 14px;
  border-radius:12px;border:1px solid var(--card-border);background:var(--card);
  color:var(--text);font-size:.95rem}
body.co .co-suche input:focus-visible{outline:2px solid var(--blue);outline-offset:1px}

/* Meine Community: sieben Wege, klein gehalten. Kein Link entfaellt, die
   ausfuehrlichen Beschreibungen stehen als title-Attribut daran. */
body.co .co-quick{display:flex;flex-wrap:wrap;gap:8px}
body.co .co-q{display:inline-flex;align-items:center;gap:8px;min-height:40px;
  padding:8px 13px;border-radius:11px;background:var(--card);
  border:1px solid var(--card-border);color:var(--text);text-decoration:none;
  font-size:.9rem;transition:border-color .15s}
body.co .co-q:hover{border-color:var(--blue);text-decoration:none}
body.co .co-q:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
body.co .co-q .ci{font-size:1.1rem;line-height:1}

/* Die neun Welten. Auf schmalen Geraeten zwei Spalten — neun winzige Karten
   nebeneinander waeren auf keinem Geraet lesbar. */
body.co .co-welten{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
body.co .co-welt{display:flex;flex-direction:column;gap:4px;min-width:0;
  text-align:left;background:var(--card);border:1px solid var(--card-border);
  border-radius:14px;padding:16px;color:var(--text);cursor:pointer;font:inherit;
  transition:border-color .15s,transform .1s}
body.co .co-welt:hover{border-color:var(--blue);transform:translateY(-2px)}
body.co .co-welt:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
body.co .co-welt .ci{font-size:1.5rem;line-height:1;margin-bottom:2px}
body.co .co-welt-t{font-size:1.02rem;font-weight:600;color:var(--text-strong);
  line-height:1.3}
body.co .co-welt-d{font-size:.84rem;color:var(--muted);line-height:1.45}

/* Ein geoeffneter Bereich. */
body.co .co-zurueck{margin:0 0 10px}
body.co .co-bereich-h{display:flex;align-items:center;gap:9px;margin:0 0 2px;
  font-size:1.25rem;color:var(--text-strong);min-width:0}
body.co .co-bereich-h .ci{font-size:1.4rem;line-height:1}
body.co .co-filterzeile{display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;margin:14px 0 0}
body.co .co-filter{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 0;
  padding:12px;border:1px solid var(--card-border);border-radius:12px;
  background:var(--card)}
body.co .co-f{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 190px}
body.co .co-f select{padding:8px 10px;border-radius:9px;
  border:1px solid var(--card-border);background:var(--card);color:var(--text)}

/* Gefundene Gruppen. Vorschaukarten — fuer Nichtmitglieder ohne Verweis,
   weil es dahinter fuer sie nichts zu oeffnen gibt. */
body.co .co-gruppen{display:grid;gap:12px;margin:14px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}
body.co .co-g{display:flex;flex-direction:column;gap:6px;min-width:0}
body.co .co-g h3{margin:2px 0 0;font-size:1.04rem;color:var(--text-strong);
  line-height:1.3}
body.co .co-g-d{margin:2px 0 0;font-size:.87rem;color:var(--muted);
  line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
body.co .co-g-meta{margin-top:auto;padding-top:8px;font-size:.82rem;
  color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 12px}
body.co .co-marken{display:flex;flex-wrap:wrap;gap:6px}
/* Die moegliche Handlung sitzt unten an der Karte — erkennbar, aber ruhig.
   Kein dominanter Knopf: Entdecken ist kein Verkaufsregal. */
body.co .co-g-aktion{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;
  align-items:center;min-height:34px}
body.co .co-g-aktion .btn[disabled]{opacity:.6;cursor:default}

/* Das Zurückziehen einer laufenden Anfrage (C-5g). Bewusst kein `.btn`:
   Der Hauptzustand der Karte bleibt „Anfrage läuft"; dies ist der leise
   Nebenweg daneben, kein zweiter Aufruf zum Handeln. Ein echter Knopf ist
   es trotzdem — wegen Tastatur und Vorlesehilfen. */
body.co .co-g-weg{background:none;border:0;padding:2px 0;margin:0;
  font:inherit;font-size:13px;color:var(--muted);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
body.co .co-g-weg:hover{color:var(--text)}
body.co .co-g-weg:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px;border-radius:4px}
body.co .co-g-weg[disabled]{opacity:.6;cursor:default;text-decoration:none}
body.co a.co-g{text-decoration:none;color:var(--text)}
body.co a.co-g:hover{text-decoration:none}
body.co .co-mehr{display:flex;justify-content:center;margin:16px 0 0}

@media(prefers-reduced-motion:reduce){
  body.co .co-welt:hover{transform:none}
}
@media(max-width:520px){
  body.co .co-welten{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body.co .co-welt{padding:13px}
  body.co .co-welt-d{font-size:.79rem}
}

/* ===========================================================================
   COMMUNITY EXPERIENCE V1 — vom Gruppenverzeichnis zum Campus
   ===========================================================================
   Die Startseite zeigt jetzt zuerst Inhalte und Handlungen, danach erst
   Navigation und Verwaltung. Es entsteht keine neue Designsprache: Karten,
   Radien, Badges und Sheets kommen weiterhin aus mila-theme.css. Neu sind nur
   die Bausteine, die es vorher nicht gab — Schnellaktionen, Inhaltskarten,
   Composer.

   Alle Regeln haengen weiterhin an body.co. */

body.co .cx-sec{margin:26px 0 0}
/* Der Abschnittskopf traegt rechts gelegentlich einen leisen Verweis
   („Alle ansehen"). Das ::after-Lineal aus .co-sec-h laesst dafuer Platz. */
body.co .cx-sec-mehr{font-size:.76rem;font-weight:700;color:var(--muted);
  text-decoration:none;letter-spacing:.02em;text-transform:none}
body.co .cx-sec-mehr:hover{color:var(--blue)}

/* ---- Was moechtest du machen? ---------------------------------------------
   Vier gleichwertige Handlungen: Beitrag, Frage, Event, Gruppe. Sie duerfen
   umbrechen und muessen auf 320px noch zu treffen sein — deshalb Grid statt
   Flex-Zeile. */
body.co .cx-akt{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
body.co .cx-a{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  min-width:0;min-height:76px;text-align:left;padding:14px;border-radius:13px;
  background:var(--card);border:1px solid var(--card-border);color:var(--text);
  cursor:pointer;font:inherit;transition:border-color .15s,transform .1s}
body.co .cx-a:hover{border-color:var(--blue);transform:translateY(-2px)}
body.co .cx-a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
body.co .cx-a .ci{font-size:1.4rem;line-height:1}
body.co .cx-a-t{font-size:.94rem;font-weight:600;color:var(--text-strong);
  line-height:1.25}

/* ---- Kopf einer geoeffneten Welt ------------------------------------------ */
body.co .cx-welt-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin:12px 0 0}
body.co .cx-welt-cta .btn{min-height:40px}
/* Ehrliche Einordnung („keine amtliche Mitteilung", „kein Wohnungsportal").
   Sie darf nicht wie Zierrat aussehen und nicht wie eine Fehlermeldung. */
body.co .cx-hinweis{flex:1 1 260px;margin:0;font-size:.84rem;line-height:1.45;
  color:var(--muted)}
body.co .cx-hinweis a{color:var(--blue)}

/* ---- Filterzeile ueber dem Stream -----------------------------------------
   Links die Typfilter, rechts „Meine Beitraege". Das steht bewusst hier und
   nicht bei den Aktionen: Es legt nichts an, es schraenkt den Stream ein.
   Auf schmalen Geraeten rutscht es unter die Filter statt sie zu quetschen. */
body.co .cx-filterzeile{display:flex;flex-wrap:wrap;gap:10px;
  align-items:center;justify-content:space-between;margin:0 0 14px}
body.co .cx-filterzeile .cx-filter{flex:1 1 auto;margin:0}
body.co .cx-filter{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
body.co .cx-fb{padding:7px 13px;min-height:34px;border-radius:999px;font:inherit;
  font-size:.86rem;background:transparent;border:1px solid var(--card-border);
  color:var(--muted);cursor:pointer;transition:border-color .15s,color .15s}
body.co .cx-fb:hover{color:var(--text-strong);border-color:var(--blue)}
body.co .cx-fb:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
body.co .cx-fb.an{background:var(--card);border-color:var(--blue);
  color:var(--text-strong);font-weight:600}

/* ---- Der Campus-Stream ----------------------------------------------------
   Eine Spalte auf schmalen Geraeten, zwei ab Tablet. Bewusst KEIN
   Masonry und keine wachsende Spaltenzahl: Ein Stream soll lesbar sein,
   nicht ein Regal. */
body.co .cx-stream{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
body.co .cx-k{display:flex;flex-direction:column;gap:7px;min-width:0}
body.co .cx-k h3{margin:2px 0 0;font-size:1.05rem;color:var(--text-strong);
  line-height:1.3}
body.co .cx-text{margin:0;font-size:.89rem;color:var(--muted);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden}

/* Die eine Zeile, auf die es beim jeweiligen Typ ankommt. */
body.co .cx-preis{font-size:1.3rem;font-weight:700;color:var(--text-strong);
  line-height:1.2}
body.co .cx-termin{font-size:.9rem;color:var(--soft-text,var(--text));
  font-weight:600;line-height:1.35}
body.co .cx-plaetze{font-size:.83rem;color:var(--green,#3fb950)}

/* Ein Bild an einer Anzeige. Feste Hoehe, damit der Stream beim Nachladen
   nicht springt — und `object-fit`, damit ein Hochformat nicht verzerrt. */
body.co .cx-bild{display:block;width:100%;aspect-ratio:4/3;max-height:320px;
  object-fit:cover;border-radius:10px;background:var(--card-2,var(--card));
  margin:2px 0 0}

body.co .cx-fuss{margin-top:auto;padding-top:8px;font-size:.8rem;
  color:var(--muted);display:flex;flex-wrap:wrap;gap:6px}

/* ---- Gültigkeit einer Anzeige ---------------------------------------------
   „bis 30.09." oder, wenn es knapp wird, „noch 3 Tage". Kein Countdown, keine
   Animation — eine Anzeige ist kein Sonderangebot mit Verfallsuhr. */
body.co .cx-frist{font-size:.8rem;color:var(--muted)}
/* Unter einer Woche wird es eine Information, die man beachten soll. */
body.co .cx-frist.knapp{color:var(--amber,#e0a52a);font-weight:600}
body.co .cx-frist.vorbei{color:var(--muted)}

/* Der Hinweis am Datumsfeld: bis wann es überhaupt gehen kann. */
body.co .cx-grenze{margin:5px 0 0;font-size:.8rem;color:var(--muted);line-height:1.35}
body.co .cx-grenze:empty{display:none}

/* ---- Anhänge im Composer --------------------------------------------------
   Auswählen, sehen was drin ist, einzeln wieder rausnehmen. */
body.co .cx-upl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
body.co .cx-upl .btn{min-height:38px}
/* Die Speicheranzeige steht daneben, nicht darunter: Sie gehört zur
   Entscheidung „lade ich das hoch", nicht ins Kleingedruckte. */
body.co .cx-speicher{flex:1 1 160px;min-width:0;font-size:.8rem;color:var(--muted);
  text-align:right}
body.co .cx-speicher.voll{color:var(--red)}

body.co .cx-dateien{display:flex;flex-direction:column;gap:7px;margin:10px 0 0}
body.co .cx-datei{display:flex;align-items:center;gap:10px;min-width:0;
  padding:8px 10px;border-radius:10px;background:var(--card-2,var(--card));
  border:1px solid var(--card-border)}
body.co .cx-datei-vor{flex:0 0 auto;width:38px;height:38px;border-radius:7px;
  object-fit:cover;background:var(--card)}
body.co .cx-datei-ic{flex:0 0 auto;width:38px;height:38px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;
  background:var(--card);border:1px solid var(--card-border)}
body.co .cx-datei-t{flex:1 1 auto;min-width:0}
body.co .cx-datei-n{font-size:.87rem;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
body.co .cx-datei-m{font-size:.75rem;color:var(--muted)}
body.co .cx-datei-x{flex:0 0 auto;background:none;border:0;padding:4px 6px;
  font:inherit;font-size:1rem;color:var(--muted);cursor:pointer;border-radius:6px}
body.co .cx-datei-x:hover{color:var(--red)}
body.co .cx-datei-x:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Der Policy-Hinweis. Kurz, lesbar, keine Wand aus Kleingedrucktem. */
body.co .cx-policy{margin:9px 0 0;font-size:.79rem;color:var(--muted);
  line-height:1.45}
body.co .cx-policy a{color:var(--blue)}
/* Der Satz direkt über „Veröffentlichen" — er sagt, wer das gleich sieht. */
body.co .cx-vor-publish{margin:0 0 10px;padding:9px 11px;border-radius:9px;
  background:var(--card-2,var(--card));border:1px solid var(--card-border);
  font-size:.81rem;color:var(--muted);line-height:1.45}

/* ---- Anhänge an einer Karte -----------------------------------------------
   Ein Marktplatz lebt von Bildern: das erste groß, der Rest als Streifen.
   Dokumente stehen darunter als Karten — ein PDF ist kein Foto. */
body.co .cx-galerie{display:flex;flex-direction:column;gap:6px;margin:2px 0 0}
/* Das Hauptbild waechst mit der Kartenbreite statt auf einer festen Hoehe zu
   stehen — und ist nach oben gedeckelt. Eine feste Hoehe erzeugte auf breiten
   Karten einen unnoetig hohen Block, und wenn ein Bild nicht laedt, blieb
   genau dieser Block leer stehen. `aspect-ratio` haelt das Verhaeltnis,
   `object-fit: cover` schneidet zu statt zu verzerren. */
body.co .cx-hero{display:block;width:100%;aspect-ratio:4/3;max-height:320px;
  object-fit:cover;border-radius:10px;background:var(--card-2,var(--card));
  cursor:zoom-in}
body.co .cx-mini{display:flex;flex-wrap:wrap;gap:6px}
body.co .cx-mini img{width:60px;height:60px;object-fit:cover;border-radius:8px;
  background:var(--card-2,var(--card));cursor:zoom-in}

/* Ohne Bild steht hier kein leerer Kasten, sondern eine kleine, ruhige
   Flaeche — gerade so viel, dass die Karte nicht nackt wirkt. */
body.co .cx-kein-bild{display:flex;align-items:center;gap:9px;padding:11px 13px;
  border-radius:10px;border:1px dashed var(--card-border);color:var(--muted);
  font-size:.83rem;background:transparent}
body.co .cx-kein-bild .ci{font-size:1.2rem;line-height:1}
body.co .cx-anh{display:flex;flex-direction:column;gap:6px;margin:2px 0 0}
body.co .cx-anh-k{display:flex;align-items:center;gap:9px;min-width:0;
  padding:7px 9px;border-radius:9px;background:var(--card-2,var(--card));
  border:1px solid var(--card-border);color:var(--text);text-decoration:none;
  transition:border-color .15s}
body.co .cx-anh-k:hover{border-color:var(--blue);text-decoration:none}
body.co .cx-anh-k:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Bild groß ansehen. Ein Overlay, kein Lightbox-Framework. */
body.co .cx-lupe{position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.82);overscroll-behavior:contain}
body.co .cx-lupe.open{display:flex}
body.co .cx-lupe img{max-width:100%;max-height:100%;border-radius:10px}
body.co .cx-lupe-x{position:absolute;top:14px;right:16px;background:none;
  border:0;color:#fff;font-size:2rem;line-height:1;cursor:pointer;padding:4px 10px}

@media(max-width:560px){
  body.co .cx-hero{max-height:230px}
  body.co .cx-bild{max-height:230px}
  body.co .cx-speicher{text-align:left;flex-basis:100%}
}

/* ---- Antworten ------------------------------------------------------------
   Eine Ebene, chronologisch, direkt an der Karte. Kein Thread-Baum, keine
   Sortierung nach Zustimmung — wer diskutieren will, hat den Chat. */
body.co .cx-antworten{margin-top:10px;padding-top:10px;
  border-top:1px solid var(--card-border);display:flex;flex-direction:column;gap:9px}
body.co .cx-antwort{font-size:.87rem;line-height:1.45}
body.co .cx-antwort-k{font-size:.76rem;color:var(--muted);margin-bottom:2px}
body.co .cx-antwort-neu{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
body.co .cx-antwort-neu textarea{flex:1 1 200px;min-width:0;padding:8px 10px;
  border-radius:9px;border:1px solid var(--card-border);background:var(--card);
  color:var(--text);font:inherit;font-size:.87rem;resize:vertical}
body.co .cx-antwort-neu textarea:focus-visible{outline:2px solid var(--blue);
  outline-offset:1px}

/* Handlungen an der Karte. Kein Herzchen, kein Zaehler, kein Ranking —
   nur das, was hier wirklich weiterhilft. */
body.co .cx-aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:4px;padding-top:9px;border-top:1px solid var(--card-border)}
body.co .cx-link{background:none;border:0;padding:3px 0;margin:0;font:inherit;
  font-size:.84rem;color:var(--muted);cursor:pointer}
body.co .cx-link:hover{color:var(--text-strong)}
body.co .cx-link:focus-visible{outline:2px solid var(--blue);outline-offset:2px;
  border-radius:4px}
/* „Melden" gehoert ans Ende und bleibt leise: Es ist die Ausnahme. */
body.co .cx-melden{margin-left:auto}

/* ---- Meine Gruppen (Startseite) -------------------------------------------
   Kompakte Zeilen, keine zweite Gruppenverwaltung. Wer mehr will, geht
   ueber „Alle ansehen" nach lerngruppen.html. */
body.co .cx-gruppen{display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
body.co .cx-gk{display:flex;align-items:center;gap:10px;min-width:0;
  padding:11px 13px;border-radius:11px;background:var(--card);
  border:1px solid var(--card-border);color:var(--text);text-decoration:none;
  transition:border-color .15s}
body.co .cx-gk:hover{border-color:var(--blue);text-decoration:none}
body.co .cx-gk:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
body.co .cx-gk .ci{font-size:1.1rem;line-height:1;flex:0 0 auto}
body.co .cx-gk-t{flex:1 1 auto;min-width:0;font-size:.92rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.co .cx-gk-m{flex:0 0 auto;font-size:.8rem;color:var(--muted)}

/* ---- Composer -------------------------------------------------------------
   Ein Dialog fuer fuenf Inhaltsarten. Auf schmalen Geraeten fuellt er den
   Bildschirm: ein winziges Desktop-Modal auf dem Handy ist keine Bedienung
   (Auftrag 54). */
body.co .cx-2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
body.co .cx-label{font-size:.86rem;font-weight:600;color:var(--soft-text)}
/* Suche oder Biete — zwei gleichwertige Knoepfe statt eines Auswahlfeldes
   mit technisch klingenden Werten. */
body.co .cx-wahl{display:flex;flex-wrap:wrap;gap:8px}
body.co .cx-wahl-b{flex:1 1 140px;min-height:42px;padding:10px 14px;
  border-radius:11px;font:inherit;font-size:.92rem;cursor:pointer;
  background:transparent;border:1px solid var(--card-border);color:var(--muted)}
body.co .cx-wahl-b:hover{border-color:var(--blue);color:var(--text-strong)}
body.co .cx-wahl-b:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
body.co .cx-wahl-b.an{background:var(--card);border-color:var(--blue);
  color:var(--text-strong);font-weight:600}

@media(max-width:560px){
  body.co .cx-2{grid-template-columns:1fr}
  /* Der Composer wird zum Vollbild-Blatt. Die Fusszeile klebt unten, damit
     „Veröffentlichen" nie ausserhalb des Bildes liegt. */
  body.co .cx-composer .box{max-width:none;width:100%;height:100%;
    max-height:100%;border-radius:0;border-left:0;border-right:0}
  body.co .cx-akt{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.co .cx-a{min-height:70px;padding:12px}
  body.co .cx-filterzeile{gap:8px}
  body.co .cx-filterzeile > .btn{flex:1 1 auto;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  body.co .cx-a:hover{transform:none}
}

/* ---- Listen ---------------------------------------------------------------
   Gruppen, Kontakte, Einladungen, Freigaben, Postfach und Dateien benutzen
   alle .litem. Auf schmalen Geraeten schieben die Aktionsknoepfe die Zeile
   aus dem Bild — sie duerfen umbrechen, ohne dass eine Aktion entfaellt.
   Gleiche Korrektur wie in material.html (Pre-Phase-4-Fix-Pass). */
body.co .litem{flex-wrap:wrap;min-width:0}
body.co .litem>.meta{flex:1 1 180px;min-width:0}
body.co .litem .t,body.co .litem .s{overflow-wrap:anywhere}

/* Lange Gruppen-, Datei- und Nutzernamen duerfen nichts aufspannen.
   Flaechendeckend im Inhaltsbereich: ein einzelnes ununterbrechbares Wort
   malt sonst aus seinem Block heraus, OHNE dass ein Element breiter wird —
   die Seite scrollt dann, obwohl kein Kasten zu gross ist. Genau dieser Fall
   trat mit sehr langen Uebersetzungen auf. */
body.co main.wrap *{overflow-wrap:break-word}
body.co .badge{white-space:normal}

/* ---- Zustaende ------------------------------------------------------------
   Leer, laedt, Fehler: bisher sahen die zehn Seiten hier unterschiedlich aus.
   Eine Anatomie fuer alle drei, ohne dass ein Text erfunden wird. */
body.co .empty{padding:38px 20px;border:1px dashed var(--card-border-2,var(--card-border));
  border-radius:14px;background:transparent}
body.co .empty .ic{font-size:1.9rem;display:block;margin-bottom:8px;opacity:.75}

/* ---- Zeilen mit Aktionen --------------------------------------------------
   Zielflaechen auf Mobilgeraeten gross genug, Abstand zwischen harmlosen und
   loeschenden Knoepfen wird NICHT verringert. */
body.co .row.between{flex-wrap:wrap;gap:8px}
body.co .btn-sm{min-height:34px}
@media(max-width:520px){
  body.co .litem{gap:10px;padding:13px 2px}
  body.co .litem .btn{min-height:38px}
  /* Loeschknoepfe bleiben am Zeilenende und bekommen etwas Luft nach links,
     damit sie nicht neben einer harmlosen Aktion klebt. */
  body.co .litem .btn-danger{margin-left:auto}
}

/* ---- Reiter ---------------------------------------------------------------
   Einladungen, Freigaben und Gruppendetail haben Reiter; auf schmalen
   Geraeten liefen sie bisher aus dem Bild. */
body.co .tabs{display:flex;flex-wrap:wrap;gap:2px;overflow-x:auto;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
body.co .tab{white-space:nowrap}

/* ---- Karten ---------------------------------------------------------------
   Etwas ruhiger als in der Lernflaeche: hier wird gelesen und entschieden,
   nicht geuebt. */
body.co .card{min-width:0}
body.co .card>h3{overflow-wrap:break-word}

/* ---- Inhaltsbereich -------------------------------------------------------
   Ohne min-width:0 bestimmt die MIN-CONTENT-Breite des Inhalts die Breite des
   Bereichs — dieselbe Falle wie in material.html. Bei sehr langen
   Uebersetzungen schob das die Seite aus dem Bild. */
body.co main.wrap{min-width:0}
body.co h1{min-width:0;overflow-wrap:break-word}
body.co b,body.co strong{overflow-wrap:anywhere}

/* Rasterkinder duerfen schrumpfen. Eine 1fr-Spur ist minmax(auto,1fr), und
   der auto-Boden ist die min-content-Breite des Kindes — bei .cols hat das
   eine 474px-Spur in einem 310px-Container erzeugt. min-width:0 am KIND
   nimmt der Spur diesen Boden, ohne eine einzige Spaltendefinition zu
   veraendern. Gleiche Ursache wie in material.html und bei .grid-2. */
body.co .cols>*,body.co .grid>*,body.co .stats>*{min-width:0}

/* Flex-Zeilen: Kinder duerfen schrumpfen, die Zeile darf umbrechen. Ohne das
   bleibt ein Titel mit langem Namen (chat.html: <h1>…<b>Name</b></h1>) auf
   seiner min-content-Breite stehen und schiebt die Seite. */
body.co .row{flex-wrap:wrap}
body.co .row>*{min-width:0}

/* Tabellen (Freigaben, Dateien) scrollen in einem eigenen Container statt
   die Seite zu sprengen. Der Container, nicht die Tabelle — display:block
   auf <table> zerlegt sonst die Spaltenausrichtung. */
body.co .tbl-wrap,body.co .tblbox{overflow-x:auto;max-width:100%}
body.co table{max-width:100%}
body.co .tbl{display:block;overflow-x:auto;max-width:100%;white-space:nowrap}
body.co .tbl th,body.co .tbl td{white-space:normal}

/* ---- Ueberschriften mit Zaehler -------------------------------------------
   Mehrere Seiten setzen "<h2><span>Titel</span> <span class="note">n</span></h2>".
   Bei langen Uebersetzungen spannte diese Zeile den Container auf. */
body.co h2{min-width:0}
body.co h2>span{min-width:0;overflow-wrap:break-word}

/* Eingabefelder duerfen ihren Container nie ueberschreiten. */
body.co input,body.co select,body.co textarea{max-width:100%}

@media(max-width:400px){
  body.co .co-grid{gap:11px}
  body.co .co-tile{padding:15px}
  /* Das Suchfeld in netzwerk.html traegt ein inline gesetztes
     min-width:200px. Auf 320px bleiben dem Feld weniger als 200px, und die
     Zeile lief aus dem Bild. Nur hier, nur unterhalb 400px, und nur deshalb
     mit !important — anders ist ein Inline-Style nicht erreichbar. */
  body.co #pSearch{min-width:0 !important}
}

/* ---- Gruppe erstellen (C-5e) ----------------------------------------------
   Ein einziger Aufruf ueber beiden Abschnitten, damit er auch bei geoeffnetem
   Bereich erreichbar bleibt. */
body.co .co-cta{display:flex;justify-content:flex-end;margin:0 0 14px}
body.co .co-cta .btn{min-height:38px}

/* Zwei Felder nebeneinander, solange Platz ist. Unter 560px untereinander —
   nebeneinander wuerden beide Auswahlfelder ihre Beschriftung abschneiden. */
body.co .co-ng-2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media(max-width:560px){
  body.co .co-ng-2{grid-template-columns:1fr}
  body.co .co-cta{justify-content:stretch}
  body.co .co-cta .btn{width:100%}
}

/* Die Erklaerung unter einer Auswahl. Sie traegt das, was sonst ein
   technischer Feldname sagen muesste — und darf deshalb nicht wegfallen. */
body.co .co-ng-hilfe{margin:5px 0 0;line-height:1.35}
body.co .co-ng-hilfe:empty{display:none}

/* Progressive Offenlegung: alles, was die meisten nie brauchen. */
body.co .co-ng-mehr{margin:4px 0 12px;border-top:1px solid var(--line);padding-top:10px}
body.co .co-ng-mehr>summary{cursor:pointer;font-size:14px;color:var(--muted);
  padding:4px 0;list-style:revert}
body.co .co-ng-mehr>summary:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px;border-radius:6px}
body.co .co-ng-mehr[open]>summary{margin-bottom:6px}

body.co .co-ng-msg{margin:0 0 10px;color:var(--red);min-height:0}
body.co .co-ng-msg:empty{display:none}

/* ---- Gruppe bearbeiten (C-5f) ---------------------------------------------
   Derselbe Dialog-Baukasten wie beim Anlegen, nur im Arbeitsraum. Die
   Erklaerung unter einer Auswahl traegt hier, was sonst ein technischer
   Feldname sagen muesste — sie darf deshalb nicht wegfallen. */
body.co .lg-e-hilfe{margin:5px 0 0;line-height:1.35;color:var(--muted)}
body.co .lg-e-hilfe:empty{display:none}

/* Der Hinweis vor dem Umschalten auf „Nur auf Einladung": Er kuendigt eine
   Folge an, die sich nicht zuruecknehmen laesst, und faellt deshalb auf. */
body.co .lg-e-warn{margin:6px 0 0;line-height:1.35;color:var(--amber,#e0a52a)}
body.co .lg-e-warn:empty{display:none}

body.co .lg-e-mehr{margin:4px 0 12px;border-top:1px solid var(--line);padding-top:10px}
body.co .lg-e-mehr>summary{cursor:pointer;font-size:14px;color:var(--muted);
  padding:4px 0;list-style:revert}
body.co .lg-e-mehr>summary:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px;border-radius:6px}
body.co .lg-e-mehr[open]>summary{margin-bottom:6px}

body.co .lg-e-msg{margin:0 0 10px;color:var(--red)}
body.co .lg-e-msg:empty{display:none}

/* Die Aktionszeile traegt auf schmalen Geraeten jetzt vier Knoepfe. */
@media(max-width:560px){
  body.co #g-actions{flex-wrap:wrap;gap:8px}
  body.co #g-actions .btn{flex:1 1 auto}
}

/* ---- Rollen und Gefahrenbereich (Community V1) -----------------------------
   Das Rollenmenü sitzt in der Mitgliederzeile und soll dort nicht dominieren. */
body.co .lg-rolle{font-size:13px;padding:4px 8px;min-height:32px;max-width:150px}
body.co .lg-rolle[disabled]{opacity:.6;cursor:default}

/* Beenden, archivieren, löschen. Abgesetzt, damit niemand hier aus Versehen
   landet — aber ohne Alarmfarbe: Beenden ist ein normaler Vorgang. */
body.co .lg-gefahr{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
body.co .lg-gefahr-h{font-size:15px;margin:0 0 12px;color:var(--muted)}
body.co .lg-gefahr-zeile{display:flex;flex-wrap:wrap;align-items:center;
  gap:10px;margin-bottom:10px}
body.co .lg-gefahr-zeile .btn{min-width:190px;justify-content:center}
body.co .lg-gefahr-hint{color:var(--muted);flex:1 1 240px;line-height:1.35}
body.co .lg-gefahr-loeschen{display:flex;flex-wrap:wrap;align-items:center;
  gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
body.co .lg-gefahr-loeschen .btn{min-width:190px;justify-content:center}

@media(max-width:560px){
  body.co .lg-gefahr-zeile .btn,
  body.co .lg-gefahr-loeschen .btn{width:100%;min-width:0}
  body.co .lg-rolle{max-width:100%}
}