/* ============================================================================
   Fitness Community – Theme "Premium Dark Glow"
   Dunkler Grundton mit Rot→Magenta-Glow, Gradient-Typo, Glas-Karten, Tiefe.
   ============================================================================ */
:root {
  --bg: #0a0a0c;
  --bg-2: #101014;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #f6f6f8;
  --muted: #9698a6;
  /* Chat-Typohierarchie: Name / Nachricht / Meta unterscheiden sich in
     Größe, Gewicht UND Deckkraft – Grautöne mit leichtem Kaltstich. */
  --chat-ink-1: #f2f2f7;
  --chat-ink-2: #dcdce6;
  --chat-ink-3: #8f909e;
  --accent: #ff2d55;
  --accent-2: #ff5e3a;
  --accent-glow: rgba(255, 45, 85, 0.45);
  --accent-soft: rgba(255, 45, 85, 0.12);
  --accent-ink: #ffffff;
  --ok: #35e08a;
  --warn: #ffb020;
  --radius: 16px;
  --radius-lg: 22px;
  /* Spacing-System – Abstände kommen aus dieser Skala, keine Zufallswerte */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --maxw: 1080px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --grad: linear-gradient(120deg, var(--accent), var(--accent-2));
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
/* Ambient glow – die Signatur des Looks */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 60vw at 18% -8%, rgba(255, 45, 85, 0.22), transparent 60%),
    radial-gradient(50vw 50vw at 92% 4%, rgba(255, 94, 58, 0.14), transparent 55%),
    radial-gradient(60vw 40vw at 50% 108%, rgba(255, 45, 85, 0.10), transparent 60%);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: #ff6b88; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* --- Header ---------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 12, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { font-weight: 800; font-size: 21px; letter-spacing: -0.6px; color: var(--text); }
.brand span {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav-actions { display: flex; gap: 10px; align-items: center; }

/* --- Typo ------------------------------------------------------------------ */
h1 {
  font-size: clamp(38px, 9vw, 68px); line-height: 1.02; letter-spacing: -2px; font-weight: 800;
  margin: 0 0 18px;
  background: linear-gradient(180deg, #ffffff 30%, #ffb9c6 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h2 { font-size: clamp(26px, 5vw, 38px); letter-spacing: -1px; font-weight: 800; margin: 0 0 14px; }
h3 { font-size: 20px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.3px; }
.muted { color: var(--muted); }
.lead { font-size: clamp(16px, 3.4vw, 20px); color: var(--muted); max-width: 580px; }
.accent-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 700; font-size: 15px;
  padding: 13px 22px; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; transition: transform .08s ease, box-shadow .2s ease, opacity .2s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary {
  background: var(--grad); color: var(--accent-ink);
  box-shadow: 0 8px 26px -6px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover { box-shadow: 0 12px 34px -6px var(--accent-glow); color: #fff; }
.btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: var(--border-strong); color: #fff; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-lg { padding: 16px 28px; font-size: 16px; }

/* --- Hero (Vollbild-Motiv) ------------------------------------------------- */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%;
  display: block;
  transform: scaleX(-1); /* gespiegelt: Kerem rückt nach rechts & schaut Richtung Text */
}
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(10,10,12,0.95) 0%, rgba(10,10,12,0.72) 34%, rgba(10,10,12,0.25) 66%, rgba(10,10,12,0.5) 100%),
    linear-gradient(0deg, rgba(10,10,12,1) 3%, rgba(10,10,12,0.15) 46%, rgba(10,10,12,0.35) 100%),
    radial-gradient(70vw 40vw at 20% 100%, rgba(255,45,85,0.18), transparent 60%);
}
.hero__content { position: relative; z-index: 2; width: 100%; padding-top: 40px; padding-bottom: 64px; }
.hero__content .lead, .hero__content .hero-cta, .hero__content .hero-stats { max-width: 640px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-soft); color: #ff7b95;
  font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; margin-bottom: 22px;
  border: 1px solid rgba(255, 45, 85, 0.25);
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow); animation: pulse 1.8s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,45,85,.55); }
  70% { box-shadow: 0 0 0 8px rgba(255,45,85,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,45,85,0); }
}
.hero-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 28px; margin-top: 40px; flex-wrap: wrap; }
.hero-stats .stat .n { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.hero-stats .stat .n span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-stats .stat .l { font-size: 13px; color: var(--muted); }

/* --- Sections / Cards ------------------------------------------------------ */
.section { padding: 56px 0; }
.section-head { margin-bottom: 30px; }
.grid { display: grid; gap: 18px; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.card {
  /* Bewusst OHNE backdrop-filter: verursacht über dem fixierten Glow auf
     manchen GPUs/Headless schwarze Flächen. Glas-Look kommt über Transparenz. */
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.8);
  transition: transform .18s ease, border-color .18s ease;
}
.card:hover { border-color: var(--border-strong); }
.card.accent {
  border-color: rgba(255, 45, 85, 0.5);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 45, 85, 0.10), transparent 55%),
    var(--surface);
  box-shadow: 0 24px 60px -28px var(--accent-glow);
}

/* --- Pricing --------------------------------------------------------------- */
.price { font-size: 46px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; }
.price small { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.features { list-style: none; padding: 0; margin: 18px 0 24px; }
.features li { padding: 8px 0 8px 30px; position: relative; color: var(--text); }
.features li::before {
  content: "✓"; position: absolute; left: 0; top: 8px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent); font-weight: 800; font-size: 11px; display: grid; place-items: center;
}
.tier-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* --- Forms ----------------------------------------------------------------- */
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px; border-radius: 12px;
  background: rgba(0,0,0,0.25); border: 1px solid var(--border); color: var(--text);
  font-family: inherit; font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder, .field textarea::placeholder { color: #5f6170; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.auth-card { max-width: 440px; margin: 40px auto; }
.auth-tabs { display: flex; gap: 6px; margin-bottom: 22px; background: rgba(0,0,0,.25); padding: 5px; border-radius: 12px; }
.auth-tabs button {
  flex: 1; padding: 11px; border-radius: 9px; border: none;
  background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; font-family: inherit;
  transition: all .15s ease;
}
.auth-tabs button.active { background: var(--grad); color: #fff; box-shadow: 0 6px 18px -6px var(--accent-glow); }

/* --- Alerts ---------------------------------------------------------------- */
.alert { padding: 12px 15px; border-radius: 11px; font-size: 14px; margin-bottom: 15px; display: none; }
.alert.show { display: block; }
.alert-error { background: rgba(255,45,85,.12); color: #ff8199; border: 1px solid rgba(255,45,85,.3); }
.alert-ok { background: rgba(53,224,138,.12); color: var(--ok); border: 1px solid rgba(53,224,138,.3); }

/* --- Badges / status ------------------------------------------------------- */
.tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.tag-live { background: var(--grad); color: #fff; box-shadow: 0 4px 14px -4px var(--accent-glow); }
.tag-tier { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.tag-ok { background: rgba(53,224,138,.15); color: var(--ok); }
.tag-warn { background: rgba(255,176,32,.15); color: var(--warn); }
.tag-off { background: var(--surface-2); color: var(--muted); }

/* --- Event list ------------------------------------------------------------ */
.event { display: flex; flex-direction: column; gap: 10px; }
.event .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.event .when { font-size: 13px; color: var(--muted); }
.event .locked { color: var(--muted); font-size: 13px; }

/* --- Tables (admin) -------------------------------------------------------- */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }

/* --- Footer ---------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border); margin-top: 70px; padding: 34px 0; color: var(--muted); font-size: 13px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }

/* --- Community-Chat -------------------------------------------------------- */
/* Aufbau:  .chat-shell (Grid)  >  [.chat-nav]  +  .chat-main
   Die linke Spalte für Kanäle ist im CSS fertig, aber noch nicht im Markup.
   Für Schritt 2 reicht es, <aside class="chat-nav"> in die Shell zu hängen und
   der Shell die Klasse .has-nav zu geben – am Layout muss dann nichts mehr
   angefasst werden. Unter 900px liegt der Chat immer allein auf voller Breite.
   Kein backdrop-filter (Regel 3): Glas-Look über Transparenz + Border.        */
.chat-shell {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  /* --chat-vh wird von chat.js aus visualViewport gesetzt, damit beim Öffnen
     der Handy-Tastatur die Eingabe sichtbar bleibt. 100dvh ist der Fallback. */
  height: calc(var(--chat-vh, 100dvh) - 64px - 40px);
  max-height: 860px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.9);
}
@media (min-width: 900px) {
  .chat-shell.has-nav { grid-template-columns: 248px 1fr; }
}

/* Kanalspalte.
   Ab 900px eine echte Gridspalte, darunter ein Drawer, der über den Chat
   fährt und per Scrim/Escape/Kanalwahl wieder zugeht. */
.chat-nav {
  display: none;
  flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-3);
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.4));
  border-right: 1px solid var(--border);
  min-width: 0;
}
.has-nav .chat-nav { display: flex; }
.chat-nav__label {
  font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--chat-ink-3); opacity: .8; padding: var(--sp-2) var(--sp-3) var(--sp-1);
}
.chat-nav__list {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent;
}
.chat-nav__item {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; min-height: 44px; padding: 0 var(--sp-3);
  border: none; border-radius: 12px; background: transparent;
  color: var(--chat-ink-3); font-family: inherit; font-size: 14px; font-weight: 600;
  text-align: left; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.chat-nav__item:hover { background: rgba(255,255,255,.05); color: var(--chat-ink-1); }
.chat-nav__item .hash { opacity: .45; font-weight: 700; }
.chat-nav__item.is-active {
  background: var(--surface-2); color: var(--chat-ink-1);
  box-shadow: inset 2px 0 0 var(--accent);
}
.chat-nav__item.is-active .hash { opacity: .8; color: var(--accent); }
.chat-nav__add {
  flex: none; min-height: 44px; margin-top: var(--sp-2);
  border-radius: 12px; border: 1px dashed var(--border-strong);
  background: transparent; color: var(--chat-ink-3);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.chat-nav__add:hover { color: var(--accent); border-color: rgba(255,45,85,.5); background: var(--accent-soft); }
.chat-nav__new { flex: none; margin-top: var(--sp-2); }
.chat-nav__new input {
  width: 100%; min-height: 44px; padding: 0 var(--sp-3);
  border-radius: 12px; border: 1px solid rgba(255,45,85,.45);
  background: rgba(0,0,0,.3); color: var(--chat-ink-1);
  font-family: inherit; font-size: 15px;
}
.chat-nav__new input:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.chat-nav__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hamburger – nur unter 900px, wo die Spalte ein Drawer ist */
.chat-nav-toggle {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; margin-left: calc(var(--sp-2) * -1);
  border: none; border-radius: 12px; background: transparent;
  color: var(--chat-ink-2); cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.chat-nav-toggle:hover { background: rgba(255,255,255,.06); color: var(--chat-ink-1); }
.chat-nav-toggle svg { width: 20px; height: 20px; }
.chat-scrim {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(6,6,9,.62);
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease);
}

@media (max-width: 899px) {
  .has-nav .chat-nav {
    position: absolute; top: 0; bottom: 0; left: 0; z-index: 30;
    width: min(82%, 300px);
    border-right: 1px solid var(--border-strong);
    box-shadow: 0 24px 60px -20px rgba(0,0,0,.9);
    transform: translateX(-102%);
    transition: transform .2s var(--ease);
  }
  .chat-shell.nav-open .chat-nav { transform: none; }
  .chat-shell.nav-open .chat-scrim { opacity: 1; pointer-events: auto; }
}
@media (min-width: 900px) {
  .chat-nav-toggle, .chat-scrim { display: none; }
}

.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* Kopfzeile */
.chat-top {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
}
.chat-top__title { font-size: 16px; font-weight: 700; letter-spacing: -.2px; color: var(--chat-ink-1); }
.chat-top__sub { font-size: 12px; color: var(--chat-ink-3); }
.chat-top__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none;
  box-shadow: 0 0 10px rgba(53,224,138,.7);
}
/* Poll-Fehler-Banner sitzt zwischen Kopf und Verlauf */
.chat-main > .alert.show { margin: var(--sp-3) var(--sp-4) 0; }

/* Verlauf – .chat-stream trägt den "Nach unten"-Button, damit der beim
   Scrollen stehen bleibt statt mit dem Inhalt wegzuwandern. */
/* Spalte, nicht Zeile: über dem Verlauf sitzt der Pull-to-refresh-Indikator. */
.chat-stream { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-scroll {
  flex: 1; min-width: 0; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  /* Unten großzügiger, damit die Aktionsleiste der letzten Nachricht nicht
     am Rand klebt und der "Nach unten"-Button nichts verdeckt. */
  padding: var(--sp-4) var(--sp-4) var(--sp-6);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent;
  overscroll-behavior: contain;
}
.chat-scroll::-webkit-scrollbar { width: 8px; }
.chat-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 99px; }
.chat-scroll::-webkit-scrollbar-track { background: transparent; }
.chat-empty { margin: auto; text-align: center; color: var(--muted); font-size: 14px; }

/* Datums-Trenner */
.chat-day { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-4); }
.chat-day:first-child { margin-top: var(--sp-1); }
.chat-day::before, .chat-day::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.chat-day span {
  font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  color: var(--chat-ink-3); white-space: nowrap;
  padding: var(--sp-1) var(--sp-3); border-radius: 999px;
  background: rgba(255,255,255,.045); border: 1px solid var(--border);
}

/* Initialen-Avatar – Farbton (--h) kommt deterministisch aus api.js,
   Sättigung und Helligkeit sind hier fixiert, damit nichts grell werden kann.
   Wird von Chat und Profil gemeinsam benutzt. */
.avatar-initials {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 12.5px; font-weight: 800; letter-spacing: .2px;
  color: hsl(var(--h) 62% 76%);
  background: linear-gradient(155deg, hsl(var(--h) 38% 26%), hsl(var(--h) 42% 16%));
  box-shadow: inset 0 0 0 1px hsl(var(--h) 50% 62% / .30), 0 4px 12px -6px hsl(var(--h) 50% 10% / .9);
  user-select: none;
}
.avatar-initials--lg {
  width: 72px; height: 72px; font-size: 25px; letter-spacing: -.5px;
  box-shadow: inset 0 0 0 1px hsl(var(--h) 50% 62% / .32), 0 14px 34px -16px hsl(var(--h) 50% 10% / .95);
}

/* Nachrichtenzeile */
.chat-row { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-1); }
.chat-row.is-first { margin-top: var(--sp-6); }
.chat-row.is-first:first-child { margin-top: 0; }
/* Avatar sitzt auf der ersten Textzeile der Bubble, nicht am unteren Rand –
   sonst rutscht er bei einer mehrzeiligen Nachricht neben die letzte Zeile.
   Versatz = Bubble-Innenabstand (10px) minus halbe Differenz zwischen
   Zeilenhöhe (22px) und Avatar (34px); bei fremden Nachrichten kommt die
   Namenszeile (20px + 4px Abstand) obendrauf. */
.chat-row__gutter { width: 34px; flex: none; margin-top: var(--sp-1); }
.chat-row.is-first:not(.is-mine) .chat-row__gutter { margin-top: calc(var(--sp-6) + var(--sp-1)); }
.chat-row__main { min-width: 0; max-width: min(78%, 520px); display: flex; flex-direction: column; }
.chat-row__head { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-1); padding: 0 var(--sp-1); }
.chat-row__name { font-size: 13px; font-weight: 700; letter-spacing: -.1px; color: var(--chat-ink-1); opacity: .92; }

.chat-bubble {
  padding: 10px var(--sp-3);
  /* Mindestbreite: sonst rutscht die mitlaufende Uhrzeit bei sehr kurzen
     Texten ("Ok", "d") in eine zweite Zeile. */
  min-width: 96px;
  border-radius: 18px;
  font-size: 15px; line-height: 1.5; color: var(--chat-ink-2);
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.032));
  border: 1px solid rgba(255,255,255,.085);
  box-shadow: 0 10px 28px -22px rgba(0,0,0,.95);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.chat-bubble__time {
  float: right; margin: 6px 0 0 var(--sp-3);
  font-size: 11px; font-weight: 600; color: var(--chat-ink-3); opacity: .75;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.chat-bubble::after { content: ""; display: block; clear: both; }

/* Gruppierung: alle gruppeninternen Ecken zur eigenen Seite hin sind
   abgeflacht (6px). Nur die äußere obere Ecke der ersten Bubble bleibt voll
   gerundet. Dadurch lesen sich auch zwei sehr kurze Nachrichten als ein
   zusammenhängender Stapel statt als zwei lose Pillen. */
.chat-row:not(.is-mine) .chat-bubble { border-bottom-left-radius: 6px; }
.chat-row:not(.is-mine).is-cont .chat-bubble { border-top-left-radius: 6px; }
.chat-row.is-mine .chat-bubble { border-bottom-right-radius: 6px; }
.chat-row.is-mine.is-cont .chat-bubble { border-top-right-radius: 6px; }

/* Eigene Nachricht: rechts, dezent rosé getönt. Der Akzent bleibt eine
   Tönung – voll gesättigt ist er nur auf dem Senden-Button. */
.chat-row.is-mine { flex-direction: row-reverse; }
.chat-row.is-mine .chat-bubble {
  color: #fff;
  background: linear-gradient(160deg, rgba(255,45,85,.26), rgba(255,94,58,.13));
  border-color: rgba(255,45,85,.34);
  box-shadow: 0 12px 30px -24px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.07);
}
.chat-row.is-mine .chat-bubble__time { color: #ffd4dd; opacity: .8; }
.chat-row.is-mine .chat-row__head { display: none; }
/* Handy: eigene Nachrichten ohne Avatar – der Platz gehört dem Text.
   Ab 900px (dort wo auch die Kanalspalte steht) bekommen sie einen Avatar.
   Die Abweichung zwischen den Breakpoints ist bewusst. */
.chat-row.is-mine .chat-row__gutter { display: none; }
@media (min-width: 900px) {
  .chat-row.is-mine .chat-row__gutter { display: block; }
}

/* Neue Nachricht sanft einblenden */
@keyframes chat-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.chat-row.is-new { animation: chat-msg-in .18s var(--ease) both; }

/* "Nach unten"-Button */
.chat-jump {
  position: absolute; right: var(--sp-4); bottom: var(--sp-4); z-index: 5;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-4); border-radius: 999px;
  border: 1px solid rgba(255,45,85,.35);
  background: linear-gradient(180deg, rgba(28,20,24,.97), rgba(16,14,18,.97));
  color: var(--chat-ink-1); font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; box-shadow: 0 18px 40px -18px rgba(0,0,0,.85);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
}
.chat-jump.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.chat-jump:hover { border-color: rgba(255,45,85,.6); }
.chat-jump svg { width: 14px; height: 14px; }
.chat-jump__count {
  display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--grad); color: #fff;
  font-size: 11px; font-weight: 800; box-shadow: 0 4px 12px -4px var(--accent-glow);
}
.chat-jump__count:empty { display: none; }

/* Eingabe */
.chat-composer {
  display: flex; align-items: flex-end; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.03));
}
.chat-composer textarea {
  flex: 1; min-width: 0; resize: none;
  min-height: 44px; max-height: 132px; padding: 11px var(--sp-4);
  border-radius: 22px; border: 1px solid var(--border);
  background: rgba(0,0,0,.3); color: var(--chat-ink-1);
  font-family: inherit; font-size: 16px; line-height: 1.4; /* 16px verhindert iOS-Zoom */
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.chat-composer textarea::placeholder { color: #62636f; }
.chat-composer textarea:focus {
  outline: none; border-color: rgba(255,45,85,.55); box-shadow: 0 0 0 3px var(--accent-soft);
}
.chat-send {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: none;
  display: grid; place-items: center; cursor: pointer;
  background: var(--grad); color: #fff;
  box-shadow: 0 8px 22px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease);
}
.chat-send:hover:not(:disabled) { box-shadow: 0 12px 28px -8px var(--accent-glow); }
.chat-send:active:not(:disabled) { transform: scale(.94); }
.chat-send:disabled { opacity: .45; cursor: not-allowed; }
.chat-send svg { width: 18px; height: 18px; }

/* --- Anklickbares Profil (Name/Avatar in der Nachricht) -------------------- */
.chat-profile {
  border: none; background: none; padding: 0; font: inherit; color: inherit;
  cursor: pointer; transition: opacity .15s var(--ease);
}
.chat-profile:hover { opacity: .75; text-decoration: underline; }
.avatar-initials.chat-profile:hover { text-decoration: none; }

/* --- Aktionsleiste (Reaktionen + Antworten) --------------------------------
   Am Desktop beim Überfahren, am Handy durch Antippen der Bubble (.is-open) --
   Touch-Geräte haben kein Hover. */
.chat-actions {
  display: flex; gap: 2px; margin-top: var(--sp-1);
  padding: var(--sp-1); border-radius: 999px;
  background: linear-gradient(180deg, rgba(28,28,34,.98), rgba(18,18,23,.98));
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px -16px rgba(0,0,0,.9);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .15s var(--ease), transform .15s var(--ease);
  align-self: flex-start;
}
.chat-row.is-mine .chat-actions { align-self: flex-end; }
.chat-row:hover .chat-actions, .chat-row.is-open .chat-actions {
  opacity: 1; transform: none; pointer-events: auto;
}
.chat-actions__btn {
  display: grid; place-items: center;
  width: 32px; height: 32px; border: none; border-radius: 50%;
  background: transparent; color: var(--chat-ink-2);
  font-size: 16px; line-height: 1; cursor: pointer;
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.chat-actions__btn:hover { background: rgba(255,255,255,.09); transform: scale(1.12); }
.chat-actions__reply svg { width: 15px; height: 15px; }
/* Am Handy sind 32px zu klein zum sicheren Treffen: 46px plus echter
   Zwischenraum, damit nicht versehentlich das Nachbar-Emoji erwischt wird. */
@media (max-width: 899px) {
  .chat-actions { gap: 6px; padding: 6px; }
  .chat-actions__btn { width: 46px; height: 46px; font-size: 20px; }
}

/* --- Reaktions-Badges ------------------------------------------------------ */
.chat-reactions { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.chat-reactions:not(:empty) { margin-top: var(--sp-1); }
.chat-row.is-mine .chat-reactions { justify-content: flex-end; }
.chat-reaction {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 26px; padding: 0 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--chat-ink-2); font-family: inherit; font-size: 13px; line-height: 1;
  cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease);
}
.chat-reaction span { font-size: 11px; font-weight: 700; color: var(--chat-ink-3); }
.chat-reaction:hover { border-color: var(--border-strong); }
.chat-reaction.is-mine {
  background: var(--accent-soft); border-color: rgba(255,45,85,.45);
}
.chat-reaction.is-mine span { color: #ff8199; }

/* --- Zitat in der Bubble --------------------------------------------------- */
.chat-quote {
  display: flex; flex-direction: column; gap: 1px; width: 100%;
  margin: 0 0 var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: none; border-left: 3px solid var(--accent);
  border-radius: 8px; background: rgba(0,0,0,.28);
  font-family: inherit; text-align: left; cursor: pointer;
  transition: background .15s var(--ease);
}
.chat-quote:hover { background: rgba(0,0,0,.4); }
.chat-quote__name { font-size: 12px; font-weight: 700; color: #ff8199; }
.chat-quote__text {
  font-size: 13px; color: var(--chat-ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.chat-row.is-mine .chat-quote { border-left-color: rgba(255,255,255,.5); }
.chat-row.is-mine .chat-quote__name { color: #ffd4dd; }

/* Ziel eines Zitat-Sprungs kurz hervorheben */
@keyframes chat-highlight {
  0%, 60% { background: var(--accent-soft); }
  100% { background: transparent; }
}
.chat-row.is-highlight { animation: chat-highlight 1.4s var(--ease); border-radius: var(--radius); }

/* --- Zitat-Leiste über der Eingabe ----------------------------------------- */
.chat-replybar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  margin: 0 var(--sp-3); border-radius: 12px 12px 0 0;
  background: rgba(0,0,0,.3); border: 1px solid var(--border); border-bottom: none;
}
.chat-replybar__body { min-width: 0; display: flex; flex-direction: column; }
.chat-replybar__label { font-size: 12px; font-weight: 700; color: #ff8199; }
.chat-replybar__text {
  font-size: 13px; color: var(--chat-ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-replybar__x {
  flex: none; width: 32px; height: 32px; margin-left: auto;
  border: none; border-radius: 50%; background: transparent;
  color: var(--chat-ink-3); font-size: 14px; cursor: pointer;
}
.chat-replybar__x:hover { background: rgba(255,255,255,.08); color: var(--text); }

/* --- Modal (Profil-Panel) -------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: var(--sp-4);
  background: rgba(6,6,9,.72);
}
.modal__card {
  position: relative; width: 100%; max-width: 360px;
  padding: var(--sp-6);
  background: linear-gradient(180deg, #17171d, #101014);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.95);
}
.modal__x {
  position: absolute; top: var(--sp-2); right: var(--sp-2);
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: transparent; color: var(--chat-ink-3); font-size: 15px; cursor: pointer;
}
.modal__x:hover { background: rgba(255,255,255,.08); color: var(--text); }
.profile-panel__head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.profile-panel__name { font-size: 20px; font-weight: 800; letter-spacing: -.4px; }

/* --- Nachrichten-Seite (DMs) ----------------------------------------------- */
.dm-item {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; padding: var(--sp-2) var(--sp-3); border: none; border-radius: 12px;
  background: transparent; color: var(--chat-ink-2);
  font-family: inherit; text-align: left; cursor: pointer;
  transition: background .18s var(--ease);
}
.dm-item:hover { background: rgba(255,255,255,.05); }
.dm-item.is-active { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.dm-item__body { min-width: 0; flex: 1; }
.dm-item__top { display: flex; align-items: baseline; gap: var(--sp-2); }
.dm-item__name {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--chat-ink-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-item__time { font-size: 11px; color: var(--chat-ink-3); white-space: nowrap; }
.dm-item__preview {
  font-size: 13px; color: var(--chat-ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-empty { padding: var(--sp-4) var(--sp-3); font-size: 14px; color: var(--chat-ink-2); line-height: 1.5; }

/* Handy: Liste ODER Verlauf, nicht beides. Ab 900px nebeneinander. */
.dm-shell .dm-back { display: grid; }
@media (max-width: 899px) {
  .dm-shell .dm-list {
    position: static; transform: none; width: auto; box-shadow: none;
    border-right: none; z-index: auto;
  }
  .dm-shell:not(.show-thread) .chat-main { display: none; }
  .dm-shell.show-thread .dm-list { display: none; }
  /* Der Verlauf schiebt sich kurz von rechts herein -- "reingehen" statt
     hartem Umschalten. Nur am Handy, wo tatsächlich umgeschaltet wird. */
  .dm-shell.show-thread .chat-main { animation: dm-slide-in .22s var(--ease) both; }
}
@keyframes dm-slide-in {
  from { opacity: .4; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 900px) {
  .dm-shell .dm-back { display: none; }
}

/* --- Pull-to-refresh ------------------------------------------------------- */
.chat-pull {
  height: 0; overflow: hidden; flex: none;
  display: grid; place-items: center;
  color: var(--chat-ink-3); font-size: 18px;
  transition: height .18s var(--ease);
}
.chat-pull__icon { display: block; transition: transform .18s var(--ease); }
.chat-pull.is-ready .chat-pull__icon { transform: rotate(180deg); color: var(--accent); }
.chat-pull.is-busy .chat-pull__icon {
  animation: chat-spin .7s linear infinite;
  border: 2px solid var(--border-strong); border-top-color: var(--accent);
  border-radius: 50%; width: 18px; height: 18px; color: transparent;
}
@keyframes chat-spin { to { transform: rotate(360deg); } }

/* --- Ungelesen-Badge an der Navigation ------------------------------------- */
.nav-actions a { position: relative; }
.nav-badge {
  display: none;
  position: absolute; top: -5px; right: -5px;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--grad); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
  box-shadow: 0 4px 12px -3px var(--accent-glow);
}
.nav-badge.is-on { display: block; }

/* --- In-App-Toast ---------------------------------------------------------- */
.toast-host {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: calc(var(--sp-3) + env(safe-area-inset-top, 0px)) var(--sp-3) 0;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; max-width: 420px; padding: var(--sp-3) var(--sp-4);
  border-radius: 14px; border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, #1b1b22, #131318);
  box-shadow: 0 20px 44px -18px rgba(0,0,0,.95);
  color: var(--chat-ink-1); font-family: inherit; text-align: left;
  cursor: pointer; pointer-events: auto;
  opacity: 0; transform: translateY(-14px);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.toast.is-on { opacity: 1; transform: none; }
.toast__dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent-glow);
}
.toast__body { min-width: 0; display: flex; flex-direction: column; }
.toast__title { font-size: 14px; font-weight: 700; }
.toast__text {
  font-size: 12px; color: var(--chat-ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .chat-row.is-new { animation: none; }
  .has-nav .chat-nav, .chat-scrim, .chat-jump, .chat-actions { transition: none; }
  .chat-row.is-highlight { animation: none; }
  .dm-shell.show-thread .chat-main { animation: none; }
  .toast { transition: none; }
}

/* --- Profil ---------------------------------------------------------------- */
.profile-grid { display: grid; gap: 18px; }
@media (min-width: 760px) { .profile-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--muted); font-size: 14px; }
.kv .v { font-weight: 600; text-align: right; }
/* Profil-Kopf: Avatar, Name, Abo-Badges, Mitglied seit */
.profile-head { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.profile-head__body { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.profile-head__name { font-size: clamp(20px, 5vw, 26px); font-weight: 800; letter-spacing: -.6px; line-height: 1.1; }
.profile-head__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.profile-head__since { margin-top: var(--sp-1); }
.tag-premium {
  background: var(--grad); color: #fff;
  box-shadow: 0 4px 14px -4px var(--accent-glow);
}
.tag-basic { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); }

/* --- Utility --------------------------------------------------------------- */
.stack > * + * { margin-top: 18px; }
.center { text-align: center; }
.hidden { display: none !important; }
.spacer { height: 24px; }
.small { font-size: 13px; }
.pointer { cursor: pointer; }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 8px 0; }