/*
 * Geruest des Mitgliederbereichs. Alles Allgemeine steht in
 * ../gemein/grund.css und wird von index.html davor geladen.
 *
 * Anders als das Adminpanel hat der Mitgliederbereich eine Kopfzeile statt
 * einer Seitenleiste: die Bereiche sind wenige und gleichrangig, und auf dem
 * Telefon bleibt so mehr Platz fuer den Inhalt. Unterhalb von 760px wandert
 * die Navigation an den unteren Rand - dorthin, wo der Daumen ist.
 */

/* --- Kopfzeile --- */
.kopfleiste{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--grund) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--kante)}
.kopfleiste-innen{max-width:1180px;margin:0 auto;display:flex;align-items:center;
  gap:18px;padding:11px 20px}
.marke{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px;
  color:var(--text);white-space:nowrap}
.marke:hover{text-decoration:none}
.marke span.zeichen{width:23px;height:23px;border-radius:6px;
  background:linear-gradient(135deg,var(--glut-hell),var(--glut))}

.hauptnav{display:flex;gap:3px;flex:1 1 auto;min-width:0;overflow-x:auto;
  scrollbar-width:none}
.hauptnav::-webkit-scrollbar{display:none}
.navknopf{position:relative;background:none;border:0;color:var(--text-matt);
  font:inherit;font-size:14px;font-weight:600;padding:8px 13px;border-radius:8px;
  cursor:pointer;white-space:nowrap}
.navknopf:hover{background:var(--feld);color:var(--text)}
.navknopf.aktiv{color:var(--text);background:var(--feld)}
.navknopf .zaehler{display:inline-block;min-width:17px;padding:0 5px;margin-left:6px;
  background:var(--glut);color:var(--auf-glut);border-radius:999px;
  font-size:11px;font-weight:800;line-height:17px;text-align:center}

.glocke{position:relative;background:none;border:0;cursor:pointer;font-size:17px;
  padding:6px 8px;border-radius:8px;line-height:1;flex:0 0 auto}
.glocke:hover{background:var(--feld)}
.glocke .zaehler{position:absolute;top:0;right:0;min-width:16px;padding:0 4px;
  background:var(--glut);color:var(--auf-glut);border-radius:999px;
  font-size:10px;font-weight:800;line-height:16px;text-align:center}

.ichknopf{display:flex;align-items:center;gap:8px;background:none;border:0;
  cursor:pointer;color:var(--text);font:inherit;padding:4px;border-radius:9px}
.ichknopf:hover{background:var(--feld)}
.ichknopf img,.ichknopf .platzhalter{width:29px;height:29px;border-radius:8px;
  object-fit:cover;flex:0 0 auto}
.ichknopf .platzhalter{background:var(--feld);border:1px solid var(--kante);
  display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--text-matt)}

/* --- Inhaltsbahn --- */
.bahn{max-width:1180px;margin:0 auto;padding:22px 20px 80px}
.bahn.schmal{max-width:760px}

/* Zwei Spalten: Inhalt und Beiwerk. Faellt unter 980px auf eine zusammen,
   wobei das Beiwerk nach UNTEN rutscht - es ist Beiwerk. */
.zweispalt{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;
  align-items:start}
.beiwerk{position:sticky;top:74px;display:flex;flex-direction:column;gap:14px}

@media (max-width:980px){
  .zweispalt{grid-template-columns:minmax(0,1fr)}
  .beiwerk{position:static;order:2}
}

@media (max-width:760px){
  .kopfleiste-innen{padding:9px 14px;gap:12px}
  .hauptnav{position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--karte);border-top:1px solid var(--kante);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    justify-content:space-around;gap:0}
  .navknopf{flex:1 1 0;padding:8px 4px;font-size:12px;text-align:center;border-radius:9px}
  .navknopf .zaehler{position:absolute;top:2px;right:50%;margin-right:-22px;margin-left:0}
  .bahn{padding:16px 14px 96px}
}

/* --- Chats: zwei Spalten --- */
.chatgitter{display:grid;grid-template-columns:320px minmax(0,1fr);gap:0;
  border:1px solid var(--kante);border-radius:12px;overflow:hidden;
  background:var(--karte);height:calc(100dvh - 132px);min-height:420px}
.chatliste{border-right:1px solid var(--kante);overflow-y:auto;display:flex;
  flex-direction:column}
.chatverlauf{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.nachrichtenspur{flex:1 1 auto;overflow-y:auto;padding:16px 18px;display:flex;
  flex-direction:column;gap:3px}

.chateintrag{display:flex;gap:11px;align-items:center;width:100%;padding:11px 14px;
  background:none;border:0;border-bottom:1px solid var(--kante);cursor:pointer;
  color:var(--text);font:inherit;text-align:left}
.chateintrag:hover{background:var(--feld)}
.chateintrag.aktiv{background:var(--feld);box-shadow:inset 3px 0 0 var(--glut)}
.chateintrag .zaehler{flex:0 0 auto;min-width:20px;padding:0 6px;background:var(--glut);
  color:var(--auf-glut);border-radius:999px;font-size:11px;font-weight:800;
  line-height:20px;text-align:center}

.blase{max-width:min(74%,560px);align-self:flex-start;background:var(--feld);
  border:1px solid var(--kante);border-radius:13px 13px 13px 4px;padding:8px 12px 6px;
  font-size:14.5px}
.blase.meine{align-self:flex-end;background:color-mix(in srgb,var(--glut) 17%,var(--feld));
  border-color:color-mix(in srgb,var(--glut) 32%,transparent);border-radius:13px 13px 4px 13px}
.blase .zeit{font-size:10.5px;color:var(--text-blass);text-align:right;margin-top:2px}
.tagtrenner{align-self:center;font-size:12px;color:var(--text-blass);margin:14px 0 8px;
  letter-spacing:.03em}
.zurueckknopf{display:none}

@media (max-width:860px){
  .chatgitter{grid-template-columns:minmax(0,1fr);height:calc(100dvh - 168px)}
  /* Auf schmalem Schirm ist immer nur eine Spalte zu sehen - wie in der App. */
  .chatgitter .chatverlauf{display:none}
  .chatgitter.verlauf-offen .chatliste{display:none}
  .chatgitter.verlauf-offen .chatverlauf{display:flex}
  .zurueckknopf{display:inline-flex}
  .blase{max-width:86%}
}

/* Knöpfe an einer Nachricht.

   FRÜHER: opacity:0 und nur bei .blase:hover sichtbar, 19x19 Pixel gross.
   Auf einem Zeigergerät ist das aufgeräumt - auf Handy und Tablet im Browser
   gibt es kein Überfahren. Dort war der Knopf damit unsichtbar UND winzig,
   also fehlte an jeder Nachricht faktisch jede Bedienung. Niemand hätte das
   gemeldet, weil nichts kaputt aussah; es war schlicht nichts da.

   JETZT: Auf Zeigergeräten bleibt das dezente Verhalten (Media Query unten),
   überall sonst stehen die Knöpfe dauerhaft und mit Fingergrösse da. */
.blase{position:relative}
.blasenknopf{position:absolute;top:-9px;right:-9px;
  min-width:34px;min-height:34px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;border:1px solid var(--kante);background:var(--karte);
  color:var(--text-matt);font:inherit;font-size:15px;line-height:1;cursor:pointer;
  opacity:1;transition:opacity .12s,background .12s}
.blasenknopf:hover{background:var(--ziegel);color:#fff;border-color:var(--ziegel)}

/* Nur wo es einen echten Zeiger gibt, der überfahren kann: dezent halten.
   `hover: hover` trifft Maus und Trackpad, aber nicht Finger und nicht Stift
   ohne Schwebeerkennung. */
@media (hover: hover) and (pointer: fine) {
  .blasenknopf{opacity:0;min-width:22px;min-height:22px;top:-7px;right:-7px;font-size:13px}
  .blase:hover .blasenknopf,.blasenknopf:focus-visible{opacity:1}
}

/* --- Antworten und Reaktionen --- */
.bezug{border-left:2px solid var(--glut);padding-left:8px;margin-bottom:5px;opacity:.85}
.bezugvon{color:var(--glut-hell);font-size:11.5px;font-weight:700}
.bezugbalken{display:flex;gap:9px;align-items:center;margin:9px 14px 0;padding:7px 10px;
  border-radius:8px;background:var(--feld);border-left:3px solid var(--glut)}

.reakt{display:flex;gap:4px;margin-top:5px;flex-wrap:wrap}
/* Mindestens 30 Pixel hoch: eine 17-Pixel-Zeile trifft man mit dem Finger
   nicht zuverlässig, und Reaktionen sind der häufigste Griff im Chat. */
.reaktknopf{background:var(--feld);border:1px solid var(--kante);border-radius:999px;
  padding:4px 10px;min-height:30px;font:inherit;font-size:12px;font-weight:700;
  color:var(--text-matt);cursor:pointer;line-height:20px;
  display:inline-flex;align-items:center;gap:4px}
.reaktknopf.meine{border-color:var(--glut);color:var(--text)}
.reaktknopf:hover{background:var(--kante)}

.reaktwahl{position:absolute;bottom:100%;right:0;margin-bottom:5px;display:flex;gap:4px;
  background:var(--karte);border:1px solid var(--kante);border-radius:9px;padding:5px;
  box-shadow:0 8px 22px rgba(0,0,0,.5);z-index:5;white-space:nowrap}

/* Die drei Knöpfe an der Blase nebeneinander statt übereinander. */
.blasenknopf.antworten{right:16px}
.blasenknopf.reagieren{right:39px}

/* --- Sortierleiste über dem Beitragsstrom --- */
.sortierleiste{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.sortknopf{background:transparent;border:1px solid var(--kante);border-radius:999px;
  padding:5px 12px;min-height:32px;font:inherit;font-size:12.5px;font-weight:600;
  color:var(--text-matt);cursor:pointer;transition:border-color .12s,color .12s}
.sortknopf:hover{border-color:var(--linie-stark);color:var(--text)}
.sortknopf.aktiv{border-color:var(--glut);color:var(--glut-hell);font-weight:800;
  background:color-mix(in srgb, var(--glut) 12%, transparent)}

/* --- Textauszeichnungen: dieselben sechs wie in der App --- */
.codestueck{font-family:var(--mono);font-size:.88em;background:rgba(0,0,0,.34);
  color:var(--glut-hell);padding:1px 5px;border-radius:var(--r-mini)}
.codeblock{font-family:var(--mono);font-size:13px;line-height:1.5;margin:6px 0;
  padding:9px 11px;background:rgba(0,0,0,.4);border:1px solid var(--kante);
  border-radius:var(--r-klein);white-space:pre-wrap;word-break:break-word;
  overflow-x:auto;color:var(--glut-hell)}
.erwaehnung{color:var(--glut);font-weight:600}
/* Zugeklappt in Textfarbe auf Textfarbe: markieren und kopieren geht weiter,
   wer nur hinsieht, liest ihn nicht - mehr soll ein Spoiler nicht. */
.spoiler{background:var(--text-blass);color:transparent;border-radius:var(--r-mini);
  cursor:pointer;transition:color var(--dauer-kurz),background var(--dauer-kurz)}
.spoiler.offen{background:var(--feld);color:var(--text)}
.spoiler *{color:inherit}

/* --- Kanalleiste über dem Verlauf --- */
.kanalleiste{display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  padding:8px 14px;border-bottom:1px solid var(--kante);overflow-x:auto}
.kanalleiste-leer{display:none}
.kanalknopf{display:inline-flex;align-items:center;gap:5px;background:transparent;
  border:1px solid var(--kante);border-radius:var(--r-pille);padding:4px 11px;
  min-height:30px;font:inherit;font-size:12.5px;font-weight:600;
  color:var(--text-matt);cursor:pointer;white-space:nowrap}
.kanalknopf:hover{border-color:var(--linie-stark);color:var(--text)}
.kanalknopf.aktiv{border-color:var(--glut);color:var(--glut);font-weight:800;
  background:var(--glut-schleier)}
.kanalzahl{color:var(--text-blass);font-size:11px;font-weight:600}

/* --- Nebenstrang --- */
.strangzeile{display:inline-flex;align-items:center;gap:5px;margin-top:6px;
  background:var(--feld);border:1px solid var(--kante);border-radius:var(--r-pille);
  padding:3px 10px;min-height:28px;font:inherit;font-size:11.5px;font-weight:700;
  color:var(--glut-hell);cursor:pointer}
.strangzeile:hover{border-color:var(--glut-rand)}
.strangschleier{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.62);
  display:flex;align-items:center;justify-content:center;padding:16px}
.strangkasten{background:var(--karte);border:1px solid var(--kante);
  border-radius:var(--r-gross);box-shadow:var(--schatten);
  width:min(620px,100%);max-height:min(760px,90vh);display:flex;flex-direction:column}
.strangkopf{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 15px;border-bottom:1px solid var(--kante)}
.strangwurzel{padding:11px 15px;border-left:3px solid var(--glut);
  background:var(--feld);margin:12px 15px 0;border-radius:var(--r-klein)}
.strangspur{flex:1 1 auto;overflow-y:auto;padding:12px 15px;display:flex;
  flex-direction:column;gap:11px;min-height:120px}
.strangeintrag{border-bottom:1px solid var(--kante-weich);padding-bottom:9px}
.strangeintrag:last-child{border-bottom:0;padding-bottom:0}
.strangfuss{display:flex;gap:9px;align-items:flex-end;padding:12px 15px;
  border-top:1px solid var(--kante)}
.strangfuss .feld{flex:1 1 auto}