/* ============================================================
   DMC  fix-messages.css  -  Mitglieder-Kommunikation (E5 Design)
   Notturno di Modena. NUR Tokens aus tokens.css, keine Hardcodes.
   Laedt als LETZTE Seiten-CSS (nach hero-cinematic.css) -> gewinnt
   Kaskade bei Spezifitaets-Gleichstand.

   Deckt den kompletten Klassen-Vertrag (COMMS_CONTRACT.md) ab:
   1. Direktnachrichten (E2): .msg-app .msg-list .msg-conversation
      .msg-thread .msg-thread__scroll .msg-bubble(--mine/--them)
      .msg-composer + Leerzustaende
   2. Clubforum (E3): .board .board-composer .board-post .board-replies
      .board-reply .board-reply-form
   3. Verzeichnis (E4): .directory .directory-search .directory-grid
      .member-card (__avatar/__name/__role/__action)
   4. Ungelesen-Badge: [data-unread-badge] (Kacheln + Nav)
   + geteilte Primitive: Initialen-Monogramm, Leerzustand, Scrollbalken.

   Alle Bewegungen kompositorfreundlich (transform/opacity/paint),
   sichtbare Fokus-Ringe, prefers-reduced-motion respektiert, voll
   responsiv 1440/768/390 ohne horizontalen Overflow.
   ============================================================ */

/* ---------- ICON-MASKEN (Form via mask, Farbe via Token) ---------- */
:root{
  --ico-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  --ico-back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
  --ico-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
}

/* ============================================================
   0 · GETEILTE PRIMITIVE
   ============================================================ */

/* ---- Initialen-Monogramm (Avatar ohne Foto) ----
   Genutzt von Verzeichnis-Karte, Konversationszeile, Thread-Kopf,
   Forum-Beitrag. Elegantes dunkles Verlaufs-Rund mit feinem Ring;
   Initialen in der Display-Schrift. NIE Emojis. */
.comms-monogram,
.member-card__avatar,
.msg-conversation__avatar,
.msg-thread__avatar,
.board-post__avatar,
.board-reply__avatar{
  flex:none;
  display:grid;place-items:center;
  inline-size:2.75rem;aspect-ratio:1;
  border-radius:var(--radius-round);
  background:linear-gradient(155deg,var(--surface-3),var(--surface-2));
  box-shadow:inset 0 0 0 1px var(--hairline-strong),var(--shadow-1);
  color:var(--text);
  font-family:var(--font-display);font-weight:var(--weight-semibold);
  font-size:1rem;line-height:1;letter-spacing:.02em;text-transform:uppercase;
  overflow:hidden;user-select:none;
}

/* ---- Leerzustand (kein Verlauf / keine Konversation / leeres Board) ---- */
.comms-empty,
.msg-thread__empty,
.msg-list__empty,
.board__empty,
.directory__empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--space-4);
  min-height:12rem;
  padding:var(--space-8) var(--space-6);
  text-align:center;color:var(--text-muted);
}
.comms-empty__icon,
.msg-thread__empty::before{
  content:"";
  inline-size:2.75rem;block-size:2.75rem;
  background:var(--text-faint);
  -webkit-mask:var(--ico-chat) center/contain no-repeat;
          mask:var(--ico-chat) center/contain no-repeat;
  opacity:.7;
}
.comms-empty__title,
.msg-thread__empty strong,
.board__empty strong,
.directory__empty strong{
  font-family:var(--font-display);font-weight:var(--weight-semibold);
  font-size:var(--text-h4);color:var(--text);
}
.comms-empty p,
.msg-thread__empty p,
.board__empty p,
.directory__empty p{
  color:var(--text-muted);font-size:var(--text-body);max-width:44ch;margin:0;
}

/* ---- Schlanke Scrollbalken (nur in den Scrollflaechen) ---- */
.msg-list,
.msg-thread__scroll{
  scrollbar-width:thin;
  scrollbar-color:var(--hairline-strong) transparent;
  overscroll-behavior:contain;
}
.msg-list::-webkit-scrollbar,
.msg-thread__scroll::-webkit-scrollbar{width:8px;height:8px}
.msg-list::-webkit-scrollbar-thumb,
.msg-thread__scroll::-webkit-scrollbar-thumb{
  background:var(--hairline-strong);border-radius:var(--radius-pill);
  border:2px solid transparent;background-clip:padding-box;
}
.msg-list::-webkit-scrollbar-thumb:hover,
.msg-thread__scroll::-webkit-scrollbar-thumb:hover{background:var(--text-faint)}

/* ============================================================
   1 · DIREKTNACHRICHTEN  (E2)
   Erwartete Struktur:
     .msg-app[data-view]
       .msg-list          -> [.msg-list__head] + .msg-conversation*
       .msg-thread        -> .msg-thread__header + .msg-thread__scroll
                              (.msg-bubble*) + .msg-composer
   ============================================================ */
.msg-app{
  display:grid;
  grid-template-columns:minmax(15rem,21rem) minmax(0,1fr);
  gap:var(--space-5);
  block-size:clamp(34rem,74svh,49rem);
  min-block-size:0;min-inline-size:0;
}
.msg-app>*{min-inline-size:0;min-block-size:0}

/* ---- Konversationsliste ---- */
.msg-list{
  display:flex;flex-direction:column;
  block-size:100%;min-block-size:0;
  overflow-y:auto;
  padding:var(--space-2);
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  box-shadow:var(--edge-catch);
}
.msg-list__head{
  position:sticky;top:0;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-3) var(--space-3) var(--space-4);
  margin:calc(var(--space-2) * -1) calc(var(--space-2) * -1) var(--space-2);
  background:var(--surface);
  border-bottom:1px solid var(--hairline);
}
.msg-list__title{
  font-family:var(--font-sans);font-size:var(--text-caption);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-kicker);text-transform:uppercase;color:var(--accent-hover);
}

/* ---- Konversationszeile (waehlbar) ---- */
.msg-conversation{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:var(--space-3);
  inline-size:100%;text-align:left;
  padding:var(--space-3);
  border-radius:var(--radius-md);
  background:transparent;border:1px solid transparent;
  color:var(--text);cursor:pointer;font:inherit;
  transition:background-color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard);
}
.msg-conversation+.msg-conversation{margin-top:var(--space-1)}
.msg-conversation:hover{background:var(--surface-2)}
.msg-conversation:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.msg-conversation[aria-selected="true"],
.msg-conversation.is-active,
.msg-conversation[data-active]{
  background:var(--surface-2);
  border-color:var(--accent-line);
  box-shadow:inset 2px 0 0 var(--accent);
}
.msg-conversation__body{display:flex;flex-direction:column;gap:.15em;min-inline-size:0}
.msg-conversation__name{
  font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-body);
  color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.msg-conversation__preview{
  color:var(--text-muted);font-size:var(--text-caption);line-height:var(--leading-snug);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.msg-conversation__meta{
  display:flex;flex-direction:column;align-items:flex-end;gap:.4em;flex:none;
}
.msg-conversation__time{
  font-family:var(--font-mono);font-size:var(--text-caption);color:var(--text-faint);
  font-variant-numeric:tabular-nums;
}
/* Ungelesen-Punkt der Zeile: Vorhandensein = Signal, sichtbar solange
   nicht [hidden] (leer ist gewollt, es ist nur ein farbiger Punkt). */
.msg-conversation__unread{
  inline-size:.55rem;block-size:.55rem;border-radius:var(--radius-round);
  background:var(--accent);box-shadow:var(--glow-accent-soft);
}
.msg-conversation__unread[hidden]{display:none}
/* Variante mit Zahl */
.msg-conversation__unread.is-count{
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:auto;min-inline-size:1.3rem;block-size:1.3rem;padding:0 .35rem;
  font-family:var(--font-mono);font-size:.68rem;font-weight:var(--weight-semibold);
  color:var(--accent-contrast);border-radius:var(--radius-pill);
}

/* ---- Thread (Verlauf) ---- */
.msg-thread{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  block-size:100%;min-block-size:0;
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  box-shadow:var(--edge-catch);
  overflow:hidden;
}
.msg-thread__header{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);
  background:var(--surface-2);
  border-bottom:1px solid var(--hairline);
}
.msg-thread__peer{display:flex;flex-direction:column;gap:.1em;min-inline-size:0}
.msg-thread__title{
  font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-h4);
  color:var(--text);line-height:var(--leading-snug);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.msg-thread__role{
  font-family:var(--font-mono);font-size:var(--text-caption);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--accent-hover);
}
/* Zurueck-Steuerung (nur Mobile im Thread sichtbar) */
.msg-app__back{
  display:none;flex:none;align-items:center;justify-content:center;
  inline-size:40px;block-size:40px;
  border:1px solid var(--hairline-strong);border-radius:var(--radius-round);
  background:var(--surface);color:var(--text-muted);cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard);
}
.msg-app__back::before{
  content:"";inline-size:1.15em;block-size:1.15em;background:currentColor;
  -webkit-mask:var(--ico-back) center/contain no-repeat;
          mask:var(--ico-back) center/contain no-repeat;
}
.msg-app__back:hover{color:var(--text);border-color:var(--accent-line);background:var(--accent-soft)}
.msg-app__back:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ---- Scrollbereich mit den Bubbles ---- */
.msg-thread__scroll{
  min-block-size:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-5);
}
.msg-thread__scroll .msg-thread__empty{margin:auto 0}

/* Optionaler Tages-/Datumstrenner */
.msg-thread__divider{
  align-self:center;
  margin-block:var(--space-2);
  padding:.2em .8em;
  font-family:var(--font-mono);font-size:var(--text-caption);
  letter-spacing:var(--tracking-wide);color:var(--text-faint);
  background:var(--surface-2);border:1px solid var(--hairline-soft);
  border-radius:var(--radius-pill);
}

/* ---- Chat-Bubbles (premium, nicht generisch) ---- */
.msg-bubble{
  max-inline-size:min(72%,46ch);
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-lg);
  font-size:var(--text-body);line-height:var(--leading-snug);
  color:var(--text);
  overflow-wrap:break-word;word-break:break-word;hyphens:auto;
  box-shadow:var(--shadow-1);
}
/* Andere: Flaeche, links, angesetzte untere Ecke links */
.msg-bubble--them{
  align-self:flex-start;margin-inline-end:auto;
  background:var(--surface-2);
  border:1px solid var(--hairline);
  border-bottom-left-radius:var(--radius-xs);
}
/* Ich: akzent-getoent, rechts, angesetzte untere Ecke rechts */
.msg-bubble--mine{
  align-self:flex-end;margin-inline-start:auto;
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  border-bottom-right-radius:var(--radius-xs);
  box-shadow:var(--shadow-1),var(--edge-catch);
}
.msg-bubble__text{display:block;white-space:pre-wrap}
.msg-bubble__time{
  display:block;margin-top:.4em;
  font-family:var(--font-mono);font-size:var(--text-caption);
  color:var(--text-muted);font-variant-numeric:tabular-nums;
}
.msg-bubble--them .msg-bubble__time{text-align:left}
.msg-bubble--mine .msg-bubble__time{text-align:right}

/* ---- Verfassen (unten im Thread verankert) ---- */
.msg-composer{
  position:sticky;bottom:0;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-3);align-items:end;
  padding:var(--space-4);
  background:var(--surface);
  border-top:1px solid var(--hairline);
}
.msg-composer__input,
.msg-composer textarea,
.msg-composer input[type="text"]{
  inline-size:100%;
  min-block-size:2.75rem;max-block-size:9rem;
  padding:.65em .9em;
  background:var(--surface-2);color:var(--text);
  border:1px solid var(--hairline-strong);border-radius:var(--radius-md);
  font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-snug);
  resize:none;field-sizing:content;
  transition:border-color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard);
}
.msg-composer__input::placeholder,
.msg-composer textarea::placeholder,
.msg-composer input[type="text"]::placeholder{color:var(--text-faint)}
.msg-composer__input:focus-visible,
.msg-composer textarea:focus-visible,
.msg-composer input[type="text"]:focus-visible{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}

/* ============================================================
   2 · CLUBFORUM  (E3)
   Erwartete Struktur:
     .board
       .board-composer   -> textarea + Absende-Button (prominent)
       .board-post       -> .board-post__head(__avatar/__author/__time)
                            + .board-post__body
                            + [.board-replies -> .board-reply*]
                            + [.board-reply-form]
   ============================================================ */
.board{display:flex;flex-direction:column;gap:var(--space-6);min-inline-size:0}

/* ---- Neuer Beitrag (hervorgehoben) ---- */
.board-composer{
  display:flex;flex-direction:column;gap:var(--space-4);
  padding:var(--space-6);
  background:linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid var(--hairline-strong);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2),var(--edge-catch);
}
.board-composer__label{
  display:inline-flex;align-items:center;gap:var(--space-3);
  font-family:var(--font-sans);font-size:var(--text-caption);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-kicker);text-transform:uppercase;color:var(--accent-hover);
}
.board-composer__label::before{content:"";inline-size:2rem;block-size:1px;background:var(--accent-line)}
.board-composer__input,
.board-composer textarea{
  inline-size:100%;min-block-size:6rem;max-block-size:18rem;
  padding:.8em 1em;
  background:var(--surface);color:var(--text);
  border:1px solid var(--hairline-strong);border-radius:var(--radius-md);
  font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-normal);
  resize:vertical;field-sizing:content;
  transition:border-color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard);
}
.board-composer__input::placeholder,
.board-composer textarea::placeholder{color:var(--text-faint)}
.board-composer__input:focus-visible,
.board-composer textarea:focus-visible{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.board-composer__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-4)}
.board-composer__hint{margin-right:auto;color:var(--text-faint);font-size:var(--text-caption)}

/* ---- Beitrag ---- */
.board-post{
  display:flex;flex-direction:column;gap:var(--space-4);
  padding:var(--space-6);
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  box-shadow:var(--edge-catch);
  min-inline-size:0;
}
.board-post__head{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.board-post__author{
  font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-lead);
  color:var(--text);line-height:var(--leading-snug);
}
.board-post__role{
  font-family:var(--font-mono);font-size:var(--text-caption);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--accent-hover);
}
.board-post__time{
  margin-left:auto;
  font-family:var(--font-mono);font-size:var(--text-caption);color:var(--text-faint);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.board-post__body{
  color:var(--text);font-size:var(--text-body);line-height:var(--leading-normal);
  white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;
}

/* ---- Antworten (eingerueckt, Haarlinien-Trenner) ---- */
.board-replies{
  display:flex;flex-direction:column;
  margin-top:var(--space-1);
  padding-left:var(--space-5);
  border-left:1px solid var(--hairline);
}
.board-reply{
  display:flex;flex-direction:column;gap:.35em;
  padding-block:var(--space-4);
  min-inline-size:0;
}
.board-reply+.board-reply{border-top:1px solid var(--hairline-soft)}
.board-reply__head{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
.board-reply__author{
  font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-body);
  color:var(--text);
}
.board-reply__time{
  margin-left:auto;
  font-family:var(--font-mono);font-size:var(--text-caption);color:var(--text-faint);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.board-reply__body{
  color:var(--text-muted);font-size:var(--text-body);line-height:var(--leading-normal);
  white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;
}

/* ---- Antwort verfassen (kompakt) ---- */
.board-reply-form{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-3);align-items:end;
  margin-top:var(--space-4);padding-left:var(--space-5);
  border-left:1px solid var(--hairline-soft);
}
.board-reply-form__input,
.board-reply-form input[type="text"],
.board-reply-form textarea{
  inline-size:100%;min-block-size:2.75rem;max-block-size:8rem;
  padding:.6em .85em;
  background:var(--surface-2);color:var(--text);
  border:1px solid var(--hairline-strong);border-radius:var(--radius-md);
  font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-snug);
  resize:none;field-sizing:content;
  transition:border-color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard);
}
.board-reply-form__input::placeholder,
.board-reply-form textarea::placeholder,
.board-reply-form input[type="text"]::placeholder{color:var(--text-faint)}
.board-reply-form__input:focus-visible,
.board-reply-form textarea:focus-visible,
.board-reply-form input[type="text"]:focus-visible{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}

/* ============================================================
   3 · MITGLIEDER-VERZEICHNIS  (E4)
   Erwartete Struktur:
     .directory
       [.directory-search] (Input ODER Wrapper mit Input)
       .directory-grid -> .member-card*
                            (__avatar/__name/__role/__action)
   ============================================================ */
.directory{display:flex;flex-direction:column;gap:var(--space-6);min-inline-size:0}
.directory__toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);
}
.directory__count{color:var(--text-muted);font-size:var(--text-caption);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;font-family:var(--font-mono);}

/* ---- Suche (Input mit optionalem Lupen-Glyph) ----
   Deckt beide Markup-Varianten ab:
   (A) .directory-search ist selbst das <input>  -> :not(:has(*))
   (B) .directory-search ist ein Wrapper mit <input> darin -> ::before-Lupe */
.directory-search{position:relative;inline-size:100%;max-inline-size:32rem}
.directory-search:has(input)::before{
  content:"";position:absolute;inset-inline-start:var(--space-4);inset-block-start:50%;
  inline-size:1.15em;block-size:1.15em;transform:translateY(-50%);pointer-events:none;
  background:var(--text-faint);
  -webkit-mask:var(--ico-search) center/contain no-repeat;
          mask:var(--ico-search) center/contain no-repeat;
}
.directory-search:not(:has(*)),
.directory-search__input,
.directory-search input{
  inline-size:100%;min-block-size:2.9rem;
  padding:.7em 1em;
  background:var(--surface);color:var(--text);
  border:1px solid var(--hairline-strong);border-radius:var(--radius-md);
  font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-snug);
  transition:border-color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard);
}
/* Platz fuer die Lupe nur in der Wrapper-Variante */
.directory-search:has(input) input,
.directory-search:has(.directory-search__input) .directory-search__input{
  padding-inline-start:calc(var(--space-4) * 2 + .35em);
}
.directory-search:not(:has(*))::placeholder,
.directory-search__input::placeholder,
.directory-search input::placeholder{color:var(--text-faint)}
.directory-search:not(:has(*)):focus-visible,
.directory-search__input:focus-visible,
.directory-search input:focus-visible{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}

/* ---- Raster ---- */
.directory-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr));
  gap:var(--gutter);
}

/* ---- Mitglieder-Karte ---- */
.member-card{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-3);
  text-align:center;
  padding:var(--space-6) var(--space-5);
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  box-shadow:var(--edge-catch);
  min-inline-size:0;
  transition:transform var(--dur-normal) var(--ease-out-quint),
             border-color var(--dur-normal) var(--ease-standard),
             box-shadow var(--dur-normal) var(--ease-standard),
             background-color var(--dur-normal) var(--ease-standard);
}
.member-card:hover{
  transform:translateY(-4px);
  border-color:var(--accent-line);
  background:var(--surface-2);
  box-shadow:var(--shadow-3);
}
/* groesseres Monogramm mit dezentem Kupfer-Ring (Prestige) */
.member-card__avatar{
  inline-size:3.5rem;font-size:1.2rem;
  box-shadow:inset 0 0 0 1px var(--rame-soft),var(--shadow-1);
  transition:box-shadow var(--dur-normal) var(--ease-standard);
}
.member-card:hover .member-card__avatar{box-shadow:inset 0 0 0 1px var(--rame),var(--glow-rame)}
.member-card__name{
  font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-lead);
  color:var(--text);line-height:var(--leading-snug);text-wrap:balance;
}
.member-card__role{
  font-family:var(--font-mono);font-size:var(--text-caption);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--accent-hover);
}
.member-card__action{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  align-self:stretch;margin-top:auto;
  min-block-size:44px;padding:.6em 1.2em;
  border:1px solid var(--hairline-strong);border-radius:var(--radius-pill);
  background:var(--surface-2);color:var(--text);
  font-family:var(--font-sans);font-size:var(--text-caption);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out-quint),
             background-color var(--dur-normal) var(--ease-standard),
             border-color var(--dur-normal) var(--ease-standard),
             color var(--dur-normal) var(--ease-standard),
             box-shadow var(--dur-normal) var(--ease-standard);
}
.member-card__action:hover{
  background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);
  transform:translateY(-1px);box-shadow:var(--shadow-2),var(--glow-accent-soft);
}
.member-card__action:active{transform:translateY(0) scale(.985)}
.member-card__action:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ============================================================
   4 · GETEILTER ABSENDE-BUTTON  (Composer / Board / Antwort)
   Als eigenstaendiges Control gestylt, damit auch ein blanker
   <button> ohne .btn-Klasse premium wirkt.
   ============================================================ */
.msg-composer__send,
.msg-composer button,
.board-composer__submit,
.board-composer button,
.board-reply-form__submit,
.board-reply-form button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-block-size:2.75rem;padding:0 1.35em;
  background:var(--accent);color:var(--accent-contrast);
  border:1px solid transparent;border-radius:var(--radius-md);
  font-family:var(--font-sans);font-size:var(--text-body);font-weight:var(--weight-semibold);
  line-height:1;letter-spacing:.01em;white-space:nowrap;cursor:pointer;text-decoration:none;
  box-shadow:var(--shadow-1),var(--edge-catch);
  transition:transform var(--dur-fast) var(--ease-out-quint),
             background-color var(--dur-normal) var(--ease-standard),
             box-shadow var(--dur-normal) var(--ease-standard);
}
.msg-composer__send:hover,
.msg-composer button:hover,
.board-composer__submit:hover,
.board-composer button:hover,
.board-reply-form__submit:hover,
.board-reply-form button:hover{
  background:var(--accent-hover);transform:translateY(-1px);
  box-shadow:var(--shadow-2),var(--glow-accent-soft);
}
.msg-composer__send:active,
.msg-composer button:active,
.board-composer__submit:active,
.board-composer button:active,
.board-reply-form__submit:active,
.board-reply-form button:active{background:var(--accent-strong);transform:translateY(0) scale(.98)}
.msg-composer__send:focus-visible,
.msg-composer button:focus-visible,
.board-composer__submit:focus-visible,
.board-composer button:focus-visible,
.board-reply-form__submit:focus-visible,
.board-reply-form button:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.msg-composer__send[disabled],
.msg-composer button[disabled],
.board-composer button[disabled],
.board-reply-form button[disabled],
[aria-disabled="true"].member-card__action{opacity:.45;pointer-events:none}
/* Antwort-Button etwas kompakter */
.board-reply-form__submit,
.board-reply-form button{min-block-size:2.75rem;padding:0 1.1em;font-size:var(--text-caption);text-transform:uppercase;letter-spacing:var(--tracking-wide)}

/* ============================================================
   5 · UNGELESEN-BADGE  [data-unread-badge]  (Kacheln + Nav)
   ============================================================ */
[data-unread-badge]{
  display:inline-flex;align-items:center;justify-content:center;
  min-inline-size:1.35rem;block-size:1.35rem;padding:0 .4rem;
  background:var(--accent);color:var(--accent-contrast);
  border-radius:var(--radius-pill);box-shadow:var(--glow-accent-soft);
  font-family:var(--font-mono);font-size:var(--text-caption);font-weight:var(--weight-semibold);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:0;
  vertical-align:middle;pointer-events:none;
}
/* Zahl-Badge: verbergen bei [hidden], Attributwert "0" oder ohne Textinhalt.
   Der Zaehler steht im Textinhalt, daher NICHT ueber leeren Attributwert
   verbergen (data-unread-badge kann ein reiner Marker mit Text sein). */
[data-unread-badge][hidden],
[data-unread-badge="0"],
[data-unread-badge]:empty:not(.is-dot){display:none}
/* Punkt-Variante (ohne Zahl), z. B. am Nav-Eintrag */
[data-unread-badge].is-dot{
  min-inline-size:0;inline-size:.6rem;block-size:.6rem;padding:0;
}
[data-unread-badge].is-dot:empty{display:inline-block}
/* Auf einer Dashboard-Kachel oben rechts positionieren (.tile ist relativ) */
.tile [data-unread-badge]{position:absolute;inset-block-start:var(--space-4);inset-inline-end:var(--space-4);z-index:3}

/* ============================================================
   6 · RESPONSIVE
   ============================================================ */

/* ---- Tablet: Bubbles duerfen breiter werden ---- */
@media (max-width:1023px){
  .msg-bubble{max-inline-size:min(80%,46ch)}
}

/* ---- Mobil (<768): DM einspaltig (Master/Detail) ---- */
@media (max-width:767.98px){
  .msg-app{
    grid-template-columns:1fr;
    block-size:auto;
    gap:var(--space-4);
  }
  .msg-list{block-size:auto;max-block-size:44svh}
  .msg-thread{block-size:min(78svh,40rem)}
  .msg-app__back{display:inline-flex}
  /* Master/Detail-Umschaltung ueber data-view; ohne Attribut bleibt
     beides sichtbar (funktionaler Fallback). */
  .msg-app[data-view="thread"] .msg-list{display:none}
  .msg-app[data-view="list"] .msg-thread{display:none}

  .board-post,.board-composer{padding:var(--space-5)}
  .board-replies,.board-reply-form{padding-left:var(--space-4)}
  .board-reply-form{grid-template-columns:1fr}
  .board-composer__actions{flex-wrap:wrap}
  .board-composer__hint{margin-right:0;flex-basis:100%}

  .directory-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr))}
}

/* ---- Sehr schmal (<=430): Verzeichnis einspaltig, engere Bubbles ----
   Karte bleibt vertikal-zentriert (robust ohne zusaetzlichen __body-Wrapper,
   der nicht Teil des Vertrags ist) und nur etwas kompakter. */
@media (max-width:430px){
  .msg-bubble{max-inline-size:86%}
  .msg-thread__header,.msg-thread__scroll{padding-inline:var(--space-4)}
  .msg-composer{padding:var(--space-3)}
  .directory-grid{grid-template-columns:1fr}
  .member-card{padding:var(--space-5)}
}

/* ============================================================
   7 · MOTION (Bubble-Eingang) + REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .msg-bubble{animation:msgRise var(--dur-normal) var(--ease-out-quint) both}
  @keyframes msgRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .msg-conversation,
  .member-card,
  .member-card__avatar,
  .member-card__action,
  .msg-app__back,
  .msg-composer__send,.msg-composer button,
  .board-composer button,.board-composer__submit,
  .board-reply-form button,.board-reply-form__submit{transition:none}
  .member-card:hover,
  .member-card__action:hover,
  .msg-composer__send:hover,.board-composer button:hover{transform:none}
  .msg-bubble{animation:none}
}