/* ---- Design tokens -------------------------------------------------
   Farben: Navy #0B1120 (bg), Panel #131C2E, Accent Amber #FF5C5C,
   Text #E4E9F0, Muted #6B7A99, Success/On-Air #34D399, Fehler #F87171
   Type: 'JetBrains Mono' fürs "Funkgerät"-Feeling (Header, Callsigns,
   Log-Zeitstempel), 'Inter' für Fließtext/Nachrichten.
------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Vereinheitlicht mit der Login-/Startseite: Navy-Grundfläche, Lila+Amber als
     Doppel-Akzent statt der früheren Aubergine/Koralle-Palette — Chat, Forum, Admin-
     Panel etc. sahen bisher spürbar anders aus als die Startseite, obwohl es dieselbe
     App ist. Jetzt überall dieselbe Farbwelt. */
  --bg: #0A0E1C;
  --panel: #131A2E;
  --panel-2: #0E1424;
  --border: #2A3350;
  --accent: #FF6B4A;
  --accent-2: #FFB648;
  --accent-warm: #7C5CFF;
  --accent-dim: #3D3070;
  --gradient: linear-gradient(100deg, #7C5CFF 0%, #FFB648 130%);
  --gradient-soft: linear-gradient(135deg, rgba(124,92,255,0.16), rgba(255,182,72,0.10));
  --text: #F3EFFC;
  --muted: #8C93B4;
  --success: #34D399;
  --error: #FF6B6B;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Outfit', system-ui, sans-serif;
  --display: 'Space Grotesk', var(--sans);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-glow: 0 8px 30px rgba(124,92,255,0.25);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
}
body {
  display: flex;
  flex-direction: column;
  /* Verhindert zuverlässig, dass mobile Browser (v.a. iOS) beim Fokussieren des
     Eingabefelds die GESAMTE Seite nach oben scrollen, um die Tastatur Platz zu
     machen — dadurch verschwand der Header aus dem sichtbaren Bereich. Mit
     position:fixed gibt es rein gar nichts mehr, das auf Body-Ebene scrollen
     könnte; nur die dafür vorgesehenen inneren Bereiche (.log, .sidebar, ...)
     scrollen noch, der Header bleibt garantiert stehen. */
  position: fixed;
  inset: 0;
  width: 100%;
}

.hidden { display: none !important; }

/* ============================================================
   LOGIN — schlicht & einladend: eine ruhige, zentrierte Glass-Card
   auf sanftem Navy→Lila-Verlauf mit Amber als warmem Akzent. Bewusst
   reduziert (kein Bento-Grid, keine Sticker) — die Live-Infos leben
   in einer schmalen, dezenten Leiste unter der Karte.
   ============================================================ */
#login-screen {
  --lg-bg: #0A0E1C;
  --lg-bg-2: #131A2E;
  --lg-purple: #7C5CFF;
  --lg-purple-soft: #A78BFA;
  --lg-amber: #FFB648;
  --lg-text: #F3EFFC;
  --lg-muted: #8C93B4;
  --lg-border: rgba(255,255,255,0.09);
  --lg-font: var(--display);
}

.overlay {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 48px 20px;
  background:
    radial-gradient(ellipse 900px 600px at 18% -6%, rgba(124,92,255,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 800px 650px at 100% 18%, rgba(255,182,72,0.13) 0%, transparent 55%),
    radial-gradient(ellipse 700px 550px at 40% 115%, rgba(124,92,255,0.14) 0%, transparent 55%),
    var(--lg-bg);
  animation: loginGlow 10s ease-in-out infinite alternate;
}
@keyframes loginGlow {
  0% {
    background:
      radial-gradient(ellipse 900px 600px at 18% -6%, rgba(124,92,255,0.20) 0%, transparent 55%),
      radial-gradient(ellipse 800px 650px at 100% 18%, rgba(255,182,72,0.13) 0%, transparent 55%),
      radial-gradient(ellipse 700px 550px at 40% 115%, rgba(124,92,255,0.14) 0%, transparent 55%),
      var(--lg-bg);
  }
  100% {
    background:
      radial-gradient(ellipse 900px 600px at 28% 4%, rgba(124,92,255,0.28) 0%, transparent 55%),
      radial-gradient(ellipse 800px 650px at 90% 28%, rgba(255,182,72,0.19) 0%, transparent 55%),
      radial-gradient(ellipse 700px 550px at 50% 105%, rgba(124,92,255,0.20) 0%, transparent 55%),
      var(--lg-bg);
  }
}
@media (prefers-reduced-motion: reduce) { .overlay { animation: none; } }

.login-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 480px;
  position: relative;
  z-index: 1;
}

/* ---- Landing-Bereich: reine Startseiten-Optik (home-* Klassen), hier nur mit
   gesperrter Menü-Vorschau statt echter Navigation. ---- */
.login-landing {
  width: 100%;
  max-width: 640px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.login-title {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 22px;
  color: var(--lg-text);
}

.on-air-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--success);
  background: rgba(52,211,153,0.10);
  border: 1px solid rgba(52,211,153,0.28);
  border-radius: 999px;
  padding: 5px 12px 5px 9px;
  position: relative;
  z-index: 1;
}
.on-air-badge .dot { width: 6px; height: 6px; }

/* ---- Menü-Vorschau: gesperrte Variante der home-nav-card, mit gestaffeltem
   Eintritt beim Laden — wirkt lebendiger als alles auf einmal starr dazustehen. ---- */
/* ---- Kudos-Ticker: rotierender Ein-Zeiler, weckt Neugier auf die Startseite ---- */
.login-kudos-ticker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--lg-border);
  border-radius: 999px;
  padding: 10px 22px;
  margin: 18px auto;
  max-width: 480px;
  min-height: 20px;
}
.kudos-ticker-icon { font-size: 15px; flex-shrink: 0; animation: kudosBeat 2.2s ease-in-out infinite; }
@keyframes kudosBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.kudos-ticker-text {
  font-size: 12.5px;
  color: var(--lg-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.kudos-ticker-text b { color: var(--lg-amber); font-weight: 700; }
.kudos-ticker-text.fade { animation: kudosFade 0.5s ease; }
@keyframes kudosFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .kudos-ticker-icon { animation: none; }
  .kudos-ticker-text.fade { animation: none; }
}
@media (max-width: 560px) {
  .login-kudos-ticker { padding: 10px 16px; }
  .kudos-ticker-text { font-size: 11.5px; }
}

/* ---- Feature-Showcase: erzählt was drinsteckt statt gesperrte Nav-Buttons zu zeigen,
   die "nein" sagen, wenn man draufklickt. Bewusst andere Optik als home-nav-card (keine
   Button-Anmutung), damit klar ist: das ist Werbung fürs Reinschauen, keine kaputte Navigation. ---- */
.feature-showcase { width: 100%; margin-top: 8px; }
.feature-showcase-title {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--lg-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  margin: 4px 0 16px;
}
.feature-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.feature-card {
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--lg-border);
  border-radius: 16px;
  padding: 16px 12px;
  text-align: center;
  animation: cardRiseIn 0.5s ease backwards;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.feature-card:nth-child(1) { animation-delay: 0.05s; }
.feature-card:nth-child(2) { animation-delay: 0.1s; }
.feature-card:nth-child(3) { animation-delay: 0.15s; }
.feature-card:nth-child(4) { animation-delay: 0.2s; }
.feature-card:nth-child(5) { animation-delay: 0.25s; }
.feature-card:nth-child(6) { animation-delay: 0.3s; }
@keyframes cardRiseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,182,72,0.35);
  background: rgba(255,182,72,0.05);
}
.feature-card-icon { font-size: 24px; margin-bottom: 8px; }
.feature-card-title { font-weight: 700; font-size: 12.5px; color: var(--lg-text); margin-bottom: 4px; }
.feature-card-desc { font-size: 11px; color: var(--lg-muted); line-height: 1.4; }
.feature-showcase-cta { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .feature-card { animation: none; }
}
@media (max-width: 560px) {
  .feature-showcase-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ---- Das echte Logo (Wortmarke + ZA-Symbol) statt eines abstrakten Icons im
   Avatar-Kreis — die Marke soll auf den ersten Blick erkennbar sein. ---- */
.login-full-logo {
  display: block;
  max-width: 220px;
  width: 70%;
  height: auto;
  margin: 0 auto 8px;
  filter: drop-shadow(0 8px 24px rgba(255,182,72,0.25));
  position: relative;
  z-index: 1;
}

/* ---- Ein bisschen Zauber über dem Header: schwebende, funkelnde Sterne ---- */
.login-landing .home-header { position: relative; }
.login-sparkles {
  position: absolute;
  top: -18px;
  left: 50%;
  width: 260px;
  height: 130px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}
.login-sparkles .spark {
  position: absolute;
  color: var(--lg-amber);
  font-size: 14px;
  opacity: 0;
  animation: sparkTwinkle 3.4s ease-in-out infinite;
}
.login-sparkles .s1 { top: 10%;  left: 8%;  color: var(--lg-amber);  animation-delay: 0s; }
.login-sparkles .s2 { top: 55%;  left: 2%;  color: var(--lg-purple-soft); font-size: 10px; animation-delay: 0.7s; }
.login-sparkles .s3 { top: 0%;   left: 88%; color: var(--lg-purple-soft); animation-delay: 1.4s; }
.login-sparkles .s4 { top: 65%;  left: 92%; color: var(--lg-amber); font-size: 11px; animation-delay: 2.1s; }
.login-sparkles .s5 { top: 30%;  left: 48%; color: var(--lg-purple-soft); font-size: 9px; animation-delay: 2.8s; }
@keyframes sparkTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.4) translateY(4px); }
  50% { opacity: 1; transform: scale(1) translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) { .login-sparkles .spark { animation: none; opacity: 0; } }

/* ---- Stat-Karten: kurzer Glow-Flash bei jedem Live-Update (alle 8s) ---- */
.home-stat-card.stat-flash { animation: statFlash 0.6s ease; }
@keyframes statFlash {
  0% { border-color: var(--lg-amber); box-shadow: 0 0 0 0 rgba(255,182,72,0.4); }
  100% { border-color: rgba(139,92,246,0.15); box-shadow: 0 0 0 8px rgba(255,182,72,0); }
}

/* ---- Aktivitäts-Feed: neue Einträge fliegen sanft rein statt hart zu erscheinen ---- */
.home-activity-feed .cp-activity-item { animation: activityIn 0.4s ease backwards; }
.home-activity-feed .cp-activity-item:nth-child(1) { animation-delay: 0.05s; }
.home-activity-feed .cp-activity-item:nth-child(2) { animation-delay: 0.12s; }
.home-activity-feed .cp-activity-item:nth-child(3) { animation-delay: 0.19s; }
.home-activity-feed .cp-activity-item:nth-child(4) { animation-delay: 0.26s; }
@keyframes activityIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }

/* ---- Ecken-Button: kompakter Trigger statt großem CTA mittendrin ---- */
.login-corner-btn {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 3;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  border: 1px solid var(--lg-border);
  color: var(--lg-text);
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.login-corner-btn:hover { background: rgba(255,182,72,0.14); border-color: var(--lg-amber); transform: translateY(-1px); }
.login-corner-btn[aria-expanded="true"] { background: linear-gradient(100deg, var(--lg-purple) 0%, var(--lg-amber) 130%); color: #14101F; border-color: transparent; }
@media (max-width: 560px) {
  .login-corner-btn { top: 14px; right: 14px; padding: 8px 16px; font-size: 11px; }
}

/* ---- Anmelde-Overlay: schwebt zentriert über der Landingpage statt sie
   auseinanderzuschieben — dadurch bleibt auf der Startseite selbst mehr Platz frei. ---- */
.login-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.login-drawer.open { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
.login-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6,8,16,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.login-drawer-inner {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  transform: translateY(16px) scale(0.97);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}
.login-drawer.open .login-drawer-inner { transform: translateY(0) scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .login-drawer, .login-drawer-inner { transition: opacity 0.15s ease; }
  .login-drawer-inner { transform: none; }
}

/* ---- Karte im Overlay ---- */
.login-card {
  width: 100%;
  background: linear-gradient(180deg, rgba(19,26,46,0.95), rgba(13,17,30,0.98));
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--lg-border);
  border-radius: 24px;
  padding: 34px 28px 26px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  position: relative;
}
.login-drawer-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--lg-border);
  color: var(--lg-muted);
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.login-drawer-close:hover { background: rgba(255,107,74,0.15); color: #FF8A8A; }

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--lg-border);
  border-radius: 999px;
  padding: 4px;
  position: relative;
  z-index: 1;
}
.tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--lg-muted);
  font-family: var(--lg-font);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tab-btn.active {
  background: linear-gradient(100deg, var(--lg-purple) 0%, var(--lg-amber) 130%);
  color: #14101F;
  font-weight: 700;
}

.tab-pane { display: none; position: relative; z-index: 1; }
.tab-pane.active { display: block; animation: tabFadeIn 0.2s ease; }
@keyframes tabFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.login-card input {
  width: 100%;
  background: rgba(255,255,255,0.045);
  border: 1.5px solid var(--lg-border);
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--lg-text);
  font-family: var(--sans);
  font-size: 15px;
  margin-bottom: 11px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-card input::placeholder { color: var(--lg-muted); }
.login-card input:focus {
  border-color: var(--lg-purple-soft);
  box-shadow: 0 0 0 4px rgba(124,92,255,0.15);
}

.login-card button:not(.tab-btn):not(.lang-switch-btn):not(.login-drawer-close) {
  width: 100%;
  background: linear-gradient(100deg, var(--lg-purple) 0%, var(--lg-amber) 130%);
  color: #14101F;
  border: none;
  border-radius: 14px;
  padding: 15px;
  font-family: var(--lg-font);
  font-weight: 700;
  letter-spacing: 0.4px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 10px;
  box-shadow: 0 10px 26px rgba(124,92,255,0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.login-card button:not(.tab-btn):not(.lang-switch-btn):not(.login-drawer-close):hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(124,92,255,0.36);
}
.login-card button:not(.tab-btn):not(.lang-switch-btn):not(.login-drawer-close):active { transform: translateY(0) scale(0.98); }

.login-forgot-link {
  display: block;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--lg-muted);
  text-decoration: none;
  position: relative;
  z-index: 1;
}
.login-forgot-link:hover { color: var(--lg-purple-soft); text-decoration: underline; }

.login-hint {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--lg-muted);
  position: relative;
  z-index: 1;
}
.login-hint code {
  background: rgba(255,255,255,0.06);
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--lg-amber);
}

.login-error {
  color: #FF8A8A;
  font-size: 12.5px;
  margin-top: 10px;
  min-height: 14px;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.login-copyright-center {
  margin-top: 22px;
  text-align: center;
  opacity: 0.6;
  font-size: 11px;
  color: var(--lg-muted);
}
.login-copyright-center a { color: var(--lg-muted); }

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .login-card { padding: 36px 24px 28px; border-radius: 22px; }
}
/* ---- App layout ---- */
.app {
  display: grid;
  grid-template-columns: 72px 240px 1fr;
  flex: 1;
  min-height: 0;
}

/* ---- Icon-Leiste ganz links (Discord-artig) — Schnellzugriff, immer sichtbar auf breiten
   Screens. Spiegelt nur die schon vorhandenen echten Buttons (siehe 10-live-features.js
   mirrorSidebarClick), keine eigene Logik. ---- */
.app-rail {
  display: flex;
  width: 72px;
  background: #0a0f1a;
  border-right: 1px solid var(--border);
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 8px;
}
.app-rail-brand { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.app-rail-brand img { width: 28px; height: 28px; object-fit: contain; }
.app-rail-divider { width: 32px; height: 1px; background: var(--border); margin: 4px 0 8px; }
.app-rail-btn {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-radius 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.app-rail-btn:hover { border-radius: 30%; background: var(--gradient); color: #fff; }
.app-rail-btn.app-rail-danger:hover { background: var(--error); color: #2a0808; }
.app-rail-avatar {
  width: 100%; height: 100%; border-radius: inherit;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: 15px;
  background: var(--panel-2); color: var(--accent);
}
.app-rail-spacer { flex: 1; }

/* Ticker liegt jetzt außerhalb von .app, über die volle Bildschirmbreite */
.news-ticker { flex-shrink: 0; width: 100%; }

.sidebar {
  background: var(--panel-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-dim) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 3px; }

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.brand {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 3px;
  font-size: 13px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.dot.on-air {
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(52,211,153,0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.5); }
  70% { box-shadow: 0 0 0 6px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

.sidebar-section {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sidebar-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  padding: 0 6px;
}
.sidebar-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sidebar-label-row .sidebar-label { margin-bottom: 0; }
.sidebar-add-room-btn {
  background: var(--gradient);
  color: #14101F;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sidebar-add-room-btn:hover { transform: scale(1.12); box-shadow: 0 4px 12px rgba(124,92,255,0.4); }

/* ---- Raum wechseln/erstellen-Overlay ---- */
.room-picker-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.room-picker-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease;
}
.room-picker-item:hover { border-color: var(--accent-warm); }
.room-picker-item .count { font-family: var(--mono); color: var(--muted); font-size: 11px; }

.room-list, .presence-list { display: flex; flex-direction: column; gap: 2px; }

/* ---- Kanalliste im Discord-Stil: dezent, mit Akzentbalken bei aktivem Raum ---- */
.room-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--muted);
  position: relative;
  transition: background 0.12s ease, color 0.12s ease;
}
.room-item-label { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-hash { color: var(--muted); font-weight: 700; opacity: 0.7; }
.room-item:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.room-item.active {
  background: rgba(255,107,74,0.14);
  color: var(--accent);
  font-weight: 600;
}
.room-item.active .room-hash { color: var(--accent); opacity: 1; }
.room-item.active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}
.room-item .count {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  background: rgba(255,255,255,0.06);
  padding: 1px 6px;
  border-radius: 8px;
  flex-shrink: 0;
}
.room-item.active .count { background: rgba(255,107,74,0.18); color: var(--accent); }

/* ---- Mini-Avatare (Initialen-Kreise) — Presence, Freunde ---- */
.mini-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  border: 1px solid;
  border-radius: 50%;
  flex-shrink: 0;
}
.mini-avatar-sm { width: 22px; height: 22px; font-size: 9px; }

.presence-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.presence-item:hover { background: rgba(255,107,74,0.1); }
.presence-item .away-tag {
  font-size: 10px;
  color: var(--muted);
  font-family: var(--mono);
}

/* ---- Freunde-Widget ---- */
.friend-widget-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.friend-widget-row:hover { background: rgba(255,255,255,0.05); }
.friend-widget-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.friend-dot-on { background: var(--success); box-shadow: 0 0 6px rgba(52,211,153,0.6); }
.friend-dot-off { background: var(--muted); opacity: 0.5; }

/* ---- Discord-artiger "Self"-Footer, unten in der Sidebar fixiert ---- */
.sidebar-self-footer {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--panel);
  border-top: 1px solid var(--border);
}
.sidebar-self-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.sidebar-self-info { flex: 1; min-width: 0; }
.sidebar-self-name {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-self-role {
  font-size: 10px;
  color: var(--muted);
  font-family: var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-self-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sidebar-self-icon-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.sidebar-self-icon-btn.danger:hover { background: rgba(248,113,113,0.15); color: var(--error); }

.role-tag {
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.5px;
}

.line.whois-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 14px;
  margin: 6px 0;
  display: block;
}
.line.whois-card .whois-body { font-size: 13px; line-height: 1.7; color: var(--text); }
/* Alle Detail-Zeilen (egal ob online/offline) garantiert exakt gleich eingerückt/bündig,
   statt sich auf Standard-Div-Abstände zu verlassen. */
.line.whois-card .whois-body > div { margin: 0; padding: 0; }
.line.whois-card .whois-title {
  font-family: var(--mono);
  color: #ffffff;
  font-size: 14px;
  margin-bottom: 4px;
}
.line.whois-card .whois-name { font-weight: 700; }
/* "online seit / derzeit nicht online" bewusst OHNE eigene Formatierung — reiner
   Fließtext wie der Rest der Karte (kein Weiß-Override, keine Fettung mehr). */
/* Rang in der /w-Karte: gelb wie überall (.role-tag-Grundfarbe), aber ohne den
   Schriftart-Bruch (Arial) der Grundregel — soll wie normaler Fließtext wirken, nur
   fett + gelb, kein abgesetztes Badge. */
/* Rang-Badge (Admin/SuperUser/...) an /w-Karte und Raumliste angleichen: dieselbe
   Schriftart/-größe/-abstand wie der Rest des Textes, nur fett + gelb — kein Arial-Bruch,
   keine abweichende Größe mehr (vorher 12px vs. 13px Umgebungstext = "verrutscht"). */
.line.whois-card .role-tag,
.line.room-overview .role-tag {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
}

.line.room-overview {
  display: block;
  color: var(--text);
  padding: 4px 0;
}
.line.room-overview > div { margin: 2px 0; }

.sidebar-footer {
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
}
.self-name { display: block; color: var(--accent); font-weight: 700; }
.self-room { color: var(--muted); }

.community-buttons { display: flex; flex-direction: column; gap: 6px; }
.community-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--sans);
  font-size: 12px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.community-btn:hover { border-color: var(--accent); color: var(--accent); }

.logout-btn {
  margin-top: 10px;
  width: 100%;
  background: rgba(248,113,113,0.12);
  border: 1px solid var(--error);
  color: var(--error);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
}
.logout-btn:hover { background: rgba(248,113,113,0.22); }

/* ---- Modal ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-card {
  width: min(480px, 92vw);
  max-height: 80vh;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent);
}
.modal-header button {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
}
.modal-header button:hover { color: var(--text); }
.modal-body { padding: 16px 18px; overflow-y: auto; font-size: 13px; }

.member-list, .gb-list { display: flex; flex-direction: column; gap: 8px; }

/* ---- Team-Übersicht: nach Rang gruppiert mit Aufgabenbeschreibung ---- */
.team-group { margin-bottom: 20px; }
.team-group:last-child { margin-bottom: 0; }
.team-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}
.team-group-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 10px;
}
.member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  background: var(--panel-2);
}
.member-row:hover { outline: 1px solid var(--accent); }
.member-name { flex: 1; }
.member-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.swatch.big { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }

.profile-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.profile-name { font-weight: 700; font-size: 15px; }
.profile-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.profile-bio { margin-bottom: 16px; color: var(--text); }
.profile-danger-zone {
  margin-top: 20px;
  padding: 14px;
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: var(--radius-sm);
  background: rgba(248,113,113,0.05);
}
.profile-danger-title { font-weight: 700; color: var(--error); font-size: 13px; margin-bottom: 6px; }
.profile-danger-text { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0 0 10px; }

/* ---- Konto & Sicherheit (Profil-Editor) ---- */
.profile-security-zone {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-top: 16px;
}
.profile-security-zone input { width: 100%; margin-bottom: 8px; }
.profile-security-zone .admin-btn { width: 100%; }

/* ---- Feedback & Vorschläge ---- */
.feedback-list { display: flex; flex-direction: column; gap: 10px; }
.feedback-item { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.feedback-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.feedback-cat { font-size: 11px; font-weight: 700; color: var(--muted); }
.feedback-status { font-size: 10px; font-family: var(--mono); padding: 2px 8px; border-radius: 999px; }
.feedback-status-neu { background: rgba(255,182,72,0.15); color: #FFB648; }
.feedback-status-in_bearbeitung { background: rgba(124,92,255,0.15); color: #A78BFA; }
.feedback-status-erledigt { background: rgba(52,211,153,0.15); color: #34D399; }
.feedback-text { font-size: 13px; color: var(--text); margin-bottom: 8px; }
.feedback-item-footer { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--muted); }
.feedback-vote-btn {
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: 3px 10px; font-size: 11px; cursor: pointer;
}
.feedback-vote-btn:hover { border-color: var(--accent); }

.profile-edit { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.profile-edit textarea {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 8px;
  font-family: var(--sans);
  font-size: 13px;
  resize: vertical;
  min-height: 60px;
}
.profile-edit input, .gb-form input, .pin-form input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 8px;
  font-family: var(--sans);
  font-size: 13px;
}
.profile-edit button, .gb-form button {
  background: var(--gradient);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 8px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
}

/* ---- Avatar-Upload im Profil-Editor ---- */
.avatar-upload-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}
.avatar-upload-preview {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--border);
}
.avatar-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
.avatar-upload-controls { flex: 1; min-width: 0; }
.avatar-upload-btn {
  display: inline-block;
  cursor: pointer;
  margin: 0 0 4px;
  width: auto !important;
}
.avatar-upload-hint { font-size: 10.5px; color: var(--muted); }
.avatar-upload-status { font-size: 11px; color: var(--accent); margin-top: 4px; min-height: 14px; }

.gb-header { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--muted); margin: 6px 0 8px; text-transform: uppercase; }
.gb-entry { background: var(--panel-2); border-radius: 4px; padding: 8px 10px; position: relative; }
.gb-author { font-weight: 700; margin-right: 8px; }
.gb-date { font-size: 10px; color: var(--muted); font-family: var(--mono); }
.gb-entry .pin-delete-btn, .gb-entry .gb-delete-btn {
  float: right; padding: 2px 8px; font-size: 12px; line-height: 1.4;
}
.forum-row-mod-actions { display: flex; gap: 6px; align-items: center; margin-left: 8px; }
.forum-row-mod-actions .admin-btn { padding: 3px 8px; font-size: 12px; }
.forum-post-meta .post-delete-btn { margin-left: 10px; padding: 1px 8px; font-size: 11px; vertical-align: middle; }
.gb-text { margin-top: 4px; }
.gb-form { display: flex; gap: 8px; margin-top: 12px; }
.gb-form input { flex: 1; }

/* ---- Kudos (Profil-Tab) ---- */
.kudos-list { display: flex; flex-direction: column; gap: 8px; }
.kudos-item {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.kudos-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.kudos-from { font-weight: 700; font-size: 12.5px; }
.kudos-date { font-size: 10px; color: var(--muted); font-family: var(--mono); }
.kudos-message { font-size: 13px; color: var(--text); font-style: italic; }

.empty { color: var(--muted); font-style: italic; font-size: 12px; }

/* ---- Main ---- */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.topbar {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-shrink: 0;
}
.topbar-room {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
}
.topbar-room .hash { color: var(--accent); margin-right: 2px; }
.topbar-topic { color: var(--muted); font-size: 13px; }

.log {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Scrollbar unsichtbar, aber Scrollen/Wischen bleibt normal möglich */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* alte Edge/IE */
}
.log::-webkit-scrollbar { display: none; } /* Chrome, Safari, WebView */

.line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  animation: fadeIn 0.15s ease-out;
  transition: background 0.1s ease;
}
.line:hover { background: rgba(255,255,255,0.025); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

.line .mini-avatar-sm { margin-top: 1px; }

.line .ts {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
  padding-top: 2px;
  width: 40px;
}
.line .name { font-weight: 600; flex-shrink: 0; }
.line .text { flex: 1; word-break: break-word; }
.chat-image-link { display: block; margin-top: 4px; }
.chat-image-preview {
  max-width: 240px;
  max-height: 240px;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: block;
  cursor: pointer;
  transition: filter 0.1s ease;
}
.chat-image-preview:hover { filter: brightness(1.05); }

/* ---- Link-Vorschau-Karte (kommt asynchron nach dem Absenden dazu) ---- */
.link-preview-card {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  max-width: 420px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
  animation: linkPreviewIn 0.3s ease;
}
.link-preview-card:hover { border-color: var(--accent-warm); transform: translateY(-1px); }
@keyframes linkPreviewIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.link-preview-image { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.link-preview-body { min-width: 0; }
.link-preview-site { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; font-family: var(--mono); margin-bottom: 2px; }
.link-preview-title { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.link-preview-desc { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }


/* ---- Nachrichtenverlauf: Trenner zwischen geladenem Verlauf und neuen Nachrichten ---- */
.history-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.history-divider::before, .history-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ---- Bearbeitet-Tag ---- */
.edited-tag { font-size: 10px; color: var(--muted); font-style: italic; margin-left: 6px; flex-shrink: 0; }

/* ---- Nachrichten-Aktionen (Bearbeiten/Löschen/Anpinnen) — nur bei Hover sichtbar ---- */
.message-actions {
  display: inline-flex;
  gap: 2px;
  margin-left: 6px;
  opacity: 0;
  transition: opacity 0.12s ease;
  flex-shrink: 0;
}
.line:hover .message-actions { opacity: 1; }
.message-action-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  padding: 2px 5px;
  cursor: pointer;
  line-height: 1.4;
}
.message-action-btn:hover { border-color: var(--accent-warm); }
.edit-input {
  flex: 1;
  background: var(--panel-2);
  border: 1px solid var(--accent-warm);
  border-radius: 4px;
  color: var(--text);
  padding: 2px 8px;
  font-family: var(--sans);
  font-size: 13px;
}

/* ---- Pins-Button in der Topbar + Pins-Liste im Modal ---- */
.topbar-pins-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}
.topbar-pins-btn:hover { border-color: #FFB648; color: #FFB648; }
.pin-list { display: flex; flex-direction: column; gap: 10px; }
.pin-item { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.pin-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pin-item-meta { font-size: 10px; color: var(--muted); font-family: var(--mono); flex: 1; }
.pin-item-text { font-size: 13px; color: var(--text); }

/* Systemzeilen (Beitritt/Verlassen etc.) haben keinen Avatar — Zeitstempel-Spalte etwas
   einrücken, damit der Text trotzdem in derselben Spalte wie normale Nachrichten startet. */
.line.system .ts, .line.system-italic .ts, .line.system-roomchange .ts, .line.system-error .ts { margin-left: 32px; }

/* Allgemeine Systemnachrichten (Mod-Aktionen wie "X knebelt Y", Ernennungen etc.):
   fett, NICHT kursiv — kursiv bleibt exklusiv Raum-/Chatwechsel vorbehalten. */
.line.system { font-family: Arial, sans-serif; color: #ffffff; font-size: 12px; font-style: italic; font-weight: 700; }
.line.system .ts { visibility: hidden; }

/* Chat betreten/verlassen: nur kursiv, nicht fett. */
.line.system-italic { font-family: Arial, sans-serif; color: #ffffff; font-size: 12px; font-style: italic; font-weight: 400; }
.line.system-italic .ts { visibility: hidden; }

/* Raumwechsel: nur kursiv, Raumname darin fett (siehe appendLine). */
.line.system-roomchange { font-family: Arial, sans-serif; color: #ffffff; font-size: 12px; font-style: italic; font-weight: 400; }
.line.system-roomchange .ts { visibility: hidden; }
.line.system-roomchange b { font-weight: 700; }

/* Fehlermeldungen ("Sorry, aber ...") — rein clientseitig, nie gespeichert. Deutlich
   abgehoben: größer, eigene Akzentfarbe, damit man sie nicht mit normalen Systemmeldungen
   verwechselt. */
.line.system-error {
  font-family: Arial, sans-serif;
  color: #ff6b6b;
  font-size: 13px;
  font-style: italic;
  font-weight: 700;
  background: rgba(248,113,113,0.08);
  border-left: 3px solid var(--error);
  padding: 6px 10px;
  border-radius: 4px;
  margin: 2px 0;
}
.line.system-error .ts { visibility: hidden; }

.line.action .text { font-style: italic; font-weight: 700; }
.line.action .name { display: none; }

.line.shout .text { font-weight: 700; letter-spacing: 0.5px; }

.line.whisper { background: rgba(255,107,74,0.06); border-left: 2px solid var(--accent); padding-left: 10px; border-radius: 2px; }
.line.whisper .text { color: var(--accent); }

.typing-indicator {
  height: 20px;
  padding: 0 20px;
  font-size: 12px;
  color: var(--muted);
  font-family: var(--mono);
  flex-shrink: 0;
}

.composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--panel-2);
}
.composer-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 10px 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.composer-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,107,74,0.12);
}
.composer-prompt {
  font-family: var(--mono);
  color: var(--accent);
  font-weight: 700;
}
.composer input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 15px;
  outline: none;
  font-family: var(--sans);
}
.composer input::placeholder { color: var(--muted); }
.composer-send-btn {
  background: var(--gradient);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, filter 0.1s ease;
  box-shadow: 0 2px 10px rgba(255,107,74,0.3);
}
.composer-send-btn:hover { filter: brightness(1.08); }
.composer-send-btn:active { transform: scale(0.92); }

/* Scrollbars */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ---- Responsive ---- */
.mobile-menu-btn {
  display: none;
  background: var(--gradient);
  border: none;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(255,107,74,0.35);
}
.mobile-menu-btn:hover { filter: brightness(1.08); }
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 299;
}

@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; }
  .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; }

  /* ---- Login-Screen: mobile-first, "sofort anmelden" statt erst scrollen müssen ----
     Feinschliff für sehr schmale Displays. */
  .login-card input { padding: 12px; margin-bottom: 8px; font-size: 16px; } /* 16px verhindert Zoom beim Fokus auf iOS */
  .home-avatar-ring { width: 60px; height: 60px; }

  /* App-Rail (Icon-Leiste) startet unsichtbar links, schiebt sich zusammen mit der Sidebar
     rein — die Sidebar schiebt dann um die Breite der Rail versetzt daneben ein. */
  .app-rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 60px;
    padding: 10px 0;
    gap: 6px;
    z-index: 301;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
  }
  .app-rail.sidebar-open { transform: translateX(0); }

  /* Sidebar wird auf dem Handy zur ausklappbaren Schublade statt komplett zu verschwinden —
     Räume, Chatter und Freunde müssen erreichbar bleiben. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 82vw;
    max-width: 300px;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 8px 0 30px rgba(0,0,0,0.5);
  }
  .sidebar.sidebar-open { transform: translateX(60px); }
  .sidebar-backdrop.visible { display: block; }

  /* Navbar-Dropdowns: auf schmalen Screens volle Breite, damit Text nicht abgeschnitten wird */
  .chat-navbar { padding: 5px 14px; gap: 8px; min-height: 0; }
  .mobile-menu-btn { width: 32px; height: 32px; font-size: 15px; }
  .brand { font-size: 11px; }
  .chat-navbar-links { gap: 10px; }
  .chat-navbar .nav-dropdown-menu { min-width: 220px; left: 0; right: auto; }
  .chat-navbar-right { gap: 6px; }
  .chat-navbar-right .self-room { display: none; } /* spart Platz, Name reicht auf schmalen Screens */
  .logout-btn { padding: 5px 8px; font-size: 10px; }

  .composer { padding: 10px 14px; }
  .topbar { padding: 10px 16px; flex-wrap: wrap; gap: 4px; }
  .log { padding: 10px 16px; }
  .news-ticker { padding: 6px 16px; }

  /* Forum & Neuigkeiten (Modal): dieselbe Erweiterung wie beim Chat oben — vorher zu
     knapp am Rand auf schmalen Screens. */
  .forum-header { padding: 12px 16px; }
  .forum-body { padding: 16px; }
  .modal-header { padding: 12px 16px; }
  .modal-body { padding: 14px 16px; }
}

@media (max-width: 480px) {
  .chat-navbar-right .self-name { display: none; } /* auf sehr schmalen Screens auch den Namen ausblenden */
  .line .ts { width: 38px; font-size: 10px; }
}


.community-preview::after,
.home-stat-card::after,
.sidebar-widget::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 12px;
  width: 16px;
  height: 16px;
  background-image: url('assets/icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.12;
  pointer-events: none;
}
.home-stat-card, .sidebar-widget { position: relative; }
.cp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.cp-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: var(--text);
}
.cp-summary {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 14px;
}
.cp-summary b { color: var(--accent); }
.cp-rooms { display: flex; flex-direction: column; gap: 6px; }

.cp-activity { display: flex; flex-direction: column; gap: 8px; }
.cp-activity-item { font-size: 12px; color: var(--text); padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.cp-activity-item:last-child { border-bottom: none; padding-bottom: 0; }
.cp-activity-item .muted { color: var(--muted); }

.cp-team { display: flex; flex-direction: column; gap: 8px; }
.cp-team-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cp-team-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.cp-team-dot.online { background: var(--success); box-shadow: 0 0 6px var(--success); }
.cp-team-name { font-weight: 600; }
.cp-team-meta { color: var(--muted); font-size: 11px; margin-left: auto; }
.cp-room-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--panel-2);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  border: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.cp-room-row:hover { border-color: rgba(255,107,74,0.3); }
.cp-room-row .cp-room-name { font-family: var(--mono); }
.cp-room-row .cp-room-count { font-family: var(--mono); color: var(--muted); }
.cp-empty { color: var(--muted); font-size: 12px; font-style: italic; }



.forum-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  display: flex;
  flex-direction: column;
}
.forum-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.forum-breadcrumb {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}
.forum-breadcrumb .crumb {
  color: var(--accent);
  cursor: pointer;
}
.forum-breadcrumb .crumb:hover { text-decoration: underline; }
.forum-breadcrumb .sep { margin: 0 6px; color: var(--border); }
#forum-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}
#forum-close:hover { color: var(--error); border-color: var(--error); }

.forum-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.forum-category { margin-bottom: 24px; }
.forum-category-title {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent);
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.forum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 8px;
  cursor: pointer;
}
.forum-row:hover { border-color: var(--accent); }
.forum-row-main { flex: 1; min-width: 0; }
.forum-row-title { font-weight: 600; font-size: 14px; }
.forum-row-desc { color: var(--muted); font-size: 12px; margin-top: 2px; }
.forum-row-stats {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  flex-shrink: 0;
  min-width: 90px;
}
.forum-row-lastpost {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  flex-shrink: 0;
  min-width: 160px;
  display: none;
}
@media (min-width: 640px) { .forum-row-lastpost { display: block; } }

.topic-row { align-items: flex-start; }
.topic-row .pin-tag {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(255,107,74,0.15);
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 6px;
}
.topic-row .lock-tag { margin-right: 4px; }

.forum-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.forum-new-btn {
  background: var(--gradient);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 8px 14px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
}

.forum-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 12px;
}
.forum-pagination button {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.forum-pagination button:disabled { opacity: 0.4; cursor: default; }
.forum-pagination .page-info { color: var(--muted); padding: 5px 0; }

.forum-post {
  display: flex;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 10px;
}
.forum-post-author {
  width: 100px;
  flex-shrink: 0;
  text-align: center;
}
.forum-post-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin: 0 auto 6px;
  display: block;
  object-fit: cover;
  background: var(--panel-2);
}
.forum-post-name { font-weight: 700; font-size: 12px; word-break: break-word; }
.forum-post-body {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.forum-post-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 8px;
}

.forum-reply-form {
  margin-top: 16px;
}
.forum-reply-form textarea {
  width: 100%;
  min-height: 100px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 12px;
  font-family: var(--sans);
  font-size: 14px;
  resize: vertical;
  box-sizing: border-box;
}
.forum-reply-form button {
  margin-top: 8px;
  background: var(--gradient);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 10px 18px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.forum-locked-notice {
  color: var(--error);
  font-size: 12px;
  font-family: var(--mono);
  margin-top: 12px;
}

.forum-newtopic-form input, .forum-newtopic-form textarea {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 14px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.forum-newtopic-form textarea { min-height: 140px; resize: vertical; }

/* ---- Admin-Panel ---- */
.admin-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.admin-tab-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.admin-tab-btn.active { background: var(--accent); color: #ffffff; border-color: var(--accent); }

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.admin-stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  text-align: center;
}
.admin-stat-value { font-family: var(--mono); font-size: 28px; font-weight: 700; color: var(--accent); }
.admin-stat-label { font-size: 11px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }

/* ---- Admin-Tabellen: horizontal wischbar auf schmalen Screens (Handy) statt
   gequetscht/abgeschnitten — vorher gab's dafür gar keinen Scroll-Container. ---- */
.admin-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}
.admin-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.admin-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.admin-table tr:hover td { background: var(--panel-2); }
.admin-online-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
  margin-right: 6px;
}
.admin-online-dot.on { background: var(--success); }

.admin-table select, .admin-inline-form input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 5px 8px;
  font-family: var(--sans);
  font-size: 12px;
}
.admin-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 5px 10px;
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
  margin-left: 4px;
}
.admin-btn:hover { border-color: var(--accent); color: var(--accent); }
.admin-btn.danger:hover { border-color: var(--error); color: var(--error); }

.admin-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.admin-section-title {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
}

.admin-inline-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 20px;
}
.admin-inline-form label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  display: block;
  margin-bottom: 3px;
}
.admin-inline-form .field { display: flex; flex-direction: column; }
.admin-checkbox-field { flex-direction: row; align-items: center; gap: 6px; }

/* ---- Memo-Badge ---- */
.memo-badge {
  background: var(--error);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 6px;
}

/* ---- User-Kontextmenü ---- */
.presence-name { cursor: pointer; }
.presence-name:hover { color: var(--accent); text-decoration: underline; }

.user-menu {
  position: fixed;
  z-index: 300;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  min-width: 200px;
  overflow: hidden;
}
.user-menu-header {
  padding: 10px 14px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
}
.user-menu-item {
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}
.user-menu-item:hover { background: var(--panel-2); color: var(--accent); }
.user-menu-item.danger:hover { color: var(--error); }
.user-menu-empty { padding: 10px 14px; font-size: 12px; color: var(--muted); font-style: italic; }

/* ---- @Erwähnung ---- */
.line.mention {
  background: rgba(255,107,74,0.08);
  border-left: 2px solid var(--accent);
  padding-left: 8px;
  border-radius: 2px;
}

/* ---- Ungelesen-Punkt bei Räumen ---- */
.unread-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
}

/* ---- Slash-Befehl-Autovervollständigung ---- */
.cmd-autocomplete {
  border-top: 1px solid var(--border);
  background: var(--panel-2);
  max-height: 180px;
  overflow-y: auto;
}
.cmd-autocomplete-item {
  padding: 8px 20px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  gap: 10px;
}
.cmd-autocomplete-item:hover, .cmd-autocomplete-item.active { background: var(--panel); }
.cmd-autocomplete-item .cmd-name { font-family: var(--mono); color: var(--accent); font-weight: 700; flex-shrink: 0; }
.cmd-autocomplete-item .cmd-desc { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Live-Umfragen (/poll) ---- */
.line.poll-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 8px 0;
}
.poll-question { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.poll-meta { font-size: 11px; color: var(--muted); font-family: var(--mono); margin-bottom: 10px; }
.poll-options { display: flex; flex-direction: column; gap: 6px; }
.poll-option {
  position: relative;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.poll-option:hover { border-color: var(--accent); }
.poll-option.chosen { border-color: var(--accent); }
.poll-option-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: rgba(255,107,74,0.12);
  transition: width 0.3s ease;
}
.poll-option-label { position: relative; z-index: 1; font-size: 13px; }
.poll-option-count { position: relative; z-index: 1; font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ============================================================
   GLASSMORPHISM-REDESIGN — abgerundete, transluzente Karten
   mit dezentem Blur, angelehnt an Smart-Home-Dashboard-Optik
   ============================================================ */

:root {
  --glass-bg: rgba(34, 23, 32, 0.6);
  --glass-bg-strong: rgba(34, 23, 32, 0.82);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.05);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

html, body {
  background:
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(124,92,255, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 900px 600px at 90% 10%, rgba(255,182,72, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 1000px 700px at 50% 110%, rgba(139,92,246, 0.05) 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

/* ---- Sidebar-Elemente ---- */
/* .room-item/.presence-item bewusst NICHT hier drin — die haben ihren eigenen, flachen
   Discord-artigen Stil weiter oben (kein Glass-Card-Look, nur Hover-Highlight). */
.community-btn {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
}

/* ---- Modals & Overlays ---- */
.modal-card {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(0,0,0,0.5), inset 0 1px 0 var(--glass-highlight);
}
.modal-header { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

/* ---- Karten-Reihen überall: Mitglieder, Foren, Gästebuch, Rangliste, Räume ---- */
.member-row, .forum-row, .gb-entry, .admin-stat-card, .poll-card,
.line.whois-card, .line.room-overview, .cp-room-row {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
}
.member-row:hover { outline: none; border-color: rgba(255,107,74,0.35) !important; }
.forum-row:hover { border-color: rgba(255,107,74,0.35); }

/* ---- Buttons durchgängig abgerundet ---- */
.login-card button:not(.login-drawer-close), .community-btn, .admin-btn, .forum-new-btn, .gb-form button,
.profile-edit button, .admin-inline-form button, #forum-close, #admin-close,
#login-btn, #register-btn, .composer button:not(.composer-send-btn), .tab-btn {
  border-radius: var(--radius-sm) !important;
}
.tabs { border-radius: var(--radius-sm); }

/* ---- Composer & Topbar leicht transparent ---- */
.composer, .topbar, .sidebar-header, .sidebar-footer, .admin-tabs, .forum-header {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.sidebar { background: rgba(19,28,46,0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.app { background: transparent; }

/* ---- Forum & Admin: eigener, klar abgehobener Bereich ----
   Vorher war .forum-overlay transparent, wodurch der Chat durchschien und das Forum
   optisch nicht als eigener Bereich erkennbar war. Jetzt: deckender, anders getönter
   Hintergrund mit farbigem Rand oben, damit sofort klar ist "ich bin woanders". */
.forum-overlay {
  background:
    radial-gradient(ellipse 1000px 600px at 15% -10%, rgba(96,165,250,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 900px 500px at 90% 5%, rgba(167,139,250,0.08) 0%, transparent 55%),
    #0E1728;
  border-top: 3px solid var(--accent);
}
#admin-overlay {
  background:
    radial-gradient(ellipse 1000px 600px at 15% -10%, rgba(248,113,113,0.10) 0%, transparent 60%),
    #14101A;
  border-top: 3px solid var(--error);
}

/* Bildschirmweiter Hintergrund unter der App, damit die Transparenz was zum Zeigen hat */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 700px 500px at 10% 0%, rgba(255,107,74,0.05), transparent 60%),
    radial-gradient(ellipse 800px 600px at 100% 100%, rgba(96,165,250,0.05), transparent 60%);
}

/* ---- Profil-Redesign ---- */
.profile-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px 20px;
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  border: 1px solid var(--glass-border);
}
.profile-avatar-ring {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.profile-avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 26px;
}
.profile-name-big {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 8px;
}
.profile-badges { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.level-pill {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
  text-transform: uppercase;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.profile-stat {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  text-align: center;
}
.profile-stat-value { font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--accent); }
.profile-stat-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; }

/* ============================================================
   STARTSEITE — eigene Farbpalette: Orange (Überschriften),
   Grün (Akzent/Werte), Weiß (Fließtext)
   ============================================================ */
.home-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  background:
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(255,107,74,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 900px 600px at 90% 10%, rgba(139,92,246,0.06) 0%, transparent 55%),
    var(--bg);
  animation: homeGlow 12s ease-in-out infinite alternate;
}
@keyframes homeGlow {
  0% {
    background:
      radial-gradient(ellipse 900px 500px at 15% -5%, rgba(255,107,74,0.10) 0%, transparent 60%),
      radial-gradient(ellipse 900px 600px at 90% 10%, rgba(139,92,246,0.06) 0%, transparent 55%),
      var(--bg);
  }
  100% {
    background:
      radial-gradient(ellipse 900px 500px at 25% 5%, rgba(255,107,74,0.14) 0%, transparent 60%),
      radial-gradient(ellipse 900px 600px at 80% 20%, rgba(139,92,246,0.09) 0%, transparent 55%),
      var(--bg);
  }
}
.home-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 20px 60px;
}
.home-header { text-align: center; margin-bottom: 28px; }
.home-avatar-ring {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px #FFB648, 0 0 26px 4px rgba(255,107,74,0.4);
  overflow: hidden;
}
.home-avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,107,74,0.15);
  color: #FFB648;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 24px;
}
.home-avatar-ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.home-greeting {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 26px;
  color: #FFB648;
  letter-spacing: 1px;
}
.home-level-pill {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  border: 1px solid rgba(139,92,246,0.4);
  color: #7C5CFF;
  background: rgba(139,92,246,0.08);
}
.home-sub { color: #ffffff; font-size: 13px; margin-top: 8px; opacity: 0.85; }
.login-slogan-primary {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  opacity: 1;
  background: linear-gradient(100deg, #FFB648, #FF6B4A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.login-slogan-sub {
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.6;
  font-family: var(--mono);
  letter-spacing: 0.5px;
}

.home-activity-feed {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-top: 24px;
  margin-bottom: 20px;
}
.home-activity-feed-title { font-family: var(--mono); font-size: 11px; color: #7C5CFF; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.home-activity-item { padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12px; color: #fff; }
.home-activity-item:last-child { border-bottom: none; }
.home-activity-item .muted { color: var(--muted); }

.home-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.home-stat-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(139,92,246,0.15);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
}
.home-stat-value { font-family: var(--mono); font-weight: 700; font-size: 24px; color: #7C5CFF; text-shadow: 0 0 12px rgba(139,92,246,0.35); }
.home-stat-label { color: #ffffff; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; opacity: 0.8; }

.home-chat-btn {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, #FFB648, #7C5CFF);
  color: #1a0d00;
  border: none;
  border-radius: var(--radius-md);
  padding: 18px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 2px;
  cursor: pointer;
  margin-bottom: 28px;
  box-shadow: 0 8px 28px rgba(255,107,74,0.35);
  transition: transform 0.15s ease;
}
.home-chat-btn:hover { transform: translateY(-2px); }

/* ---- Tages-Challenges auf der Startseite ---- */
.home-challenges { margin-bottom: 24px; }
.home-challenges-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.home-challenges-list { display: flex; flex-direction: column; gap: 8px; }
.challenge-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.challenge-card:hover { border-color: rgba(255,182,72,0.35); transform: translateY(-1px); }
.challenge-card.done { border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.06); }
.challenge-card-icon { font-size: 20px; flex-shrink: 0; width: 26px; text-align: center; }
.challenge-card-body { flex: 1; min-width: 0; }
.challenge-card-label { font-size: 12.5px; color: #ffffff; margin-bottom: 6px; }
.challenge-card.done .challenge-card-label { color: #7CE8CC; text-decoration: line-through; opacity: 0.8; }
.challenge-card-bar { height: 5px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.challenge-card-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFB648, #FF6B4A);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.challenge-card.done .challenge-card-bar-fill { background: linear-gradient(90deg, #34D399, #1FAE96); }
.challenge-card-points {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  color: #FFB648;
  flex-shrink: 0;
}
.challenge-card.done .challenge-card-points { color: #34D399; }

/* ---- Wochen-Recap auf der Startseite ---- */
.home-recap { margin-bottom: 24px; }
.home-recap-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.home-recap-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.recap-card {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: 16px 14px;
  text-align: center;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.recap-card:hover { transform: translateY(-2px); border-color: rgba(255,182,72,0.3); }
.recap-card-icon { font-size: 22px; margin-bottom: 6px; }
.recap-card-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
.recap-card-value { font-weight: 700; font-size: 15px; color: #ffffff; margin-bottom: 2px; }
.recap-card-sub { font-size: 11px; color: var(--muted); font-family: var(--mono); }
@media (max-width: 420px) { .home-recap-cards { grid-template-columns: 1fr; } }

.home-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.home-nav-card {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: 18px 12px;
  color: #ffffff;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: border-color 0.15s ease, transform 0.15s ease;
  position: relative;
}
.home-nav-card:hover { border-color: #7C5CFF; transform: translateY(-2px); }
.home-nav-icon { font-size: 24px; }

/* ---- Badge mit Zahl auf den Menü-Kacheln — zeigt auf einen Blick, wo's was Neues gibt ---- */
.home-nav-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--gradient);
  color: #14101F;
  border-radius: 999px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(124,92,255,0.4);
  animation: navBadgeIn 0.3s ease;
}
@keyframes navBadgeIn { from { transform: scale(0); } to { transform: scale(1); } }

.home-logout {
  display: block;
  margin: 0 auto;
  background: rgba(248,113,113,0.12);
  border: 1px solid var(--error);
  color: var(--error);
  opacity: 1;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.home-logout:hover { background: rgba(248,113,113,0.22); }

.sidebar-home-btn {
  margin-left: auto;
  background: rgba(255,107,74,0.12);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 16px;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sidebar-home-btn:hover { background: rgba(255,107,74,0.22); }

/* ---- Profil-Tabs & Erfolge ---- */
.profile-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  background: var(--panel-2);
  border-radius: var(--radius-sm);
  padding: 3px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.profile-tab-btn {
  flex: 1 0 auto;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.profile-tab-btn.active { background: var(--panel); color: var(--accent); }

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.achievement-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 14px 10px;
  text-align: center;
  opacity: 0.35;
  filter: grayscale(1);
}
.achievement-card.unlocked { opacity: 1; filter: none; border-color: rgba(255,107,74,0.3); }
.achievement-icon { font-size: 26px; margin-bottom: 6px; }
.achievement-title { font-weight: 700; font-size: 12px; }
.achievement-desc { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* ---- Logo/Icon ---- */
.login-logo {
  display: block;
  max-width: 220px;
  width: 100%;
  height: auto;
  margin: 0 auto 10px;
  filter: drop-shadow(0 8px 24px rgba(124,92,255,0.35));
}
.sidebar-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 4px;
}
.home-logo {
  display: block;
  max-width: 220px;
  height: auto;
  margin: 0 auto 16px;
}

/* ---- ChatEngine-Zeile & Copyright ---- */
.topbar-engine {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  opacity: 0.7;
  white-space: nowrap;
  margin-left: auto;
  padding-left: 16px;
}
.page-copyright {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  opacity: 0.6;
  margin-top: 24px;
  line-height: 1.6;
}

/* Fixierte Copyright-Ecke unten links — bleibt immer sichtbar, ohne im Hauptinhalt
   Platz wegzunehmen oder erst nach dem Scrollen aufzutauchen. */
.page-copyright-corner {
  position: fixed;
  left: 16px;
  bottom: 12px;
  z-index: 20;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
  opacity: 0.55;
  line-height: 1.5;
  max-width: 220px;
  pointer-events: auto;
}
.page-copyright-corner a { color: var(--muted); }
.page-copyright-corner:hover { opacity: 0.9; }
@media (max-width: 720px) {
  .page-copyright-corner { position: static; margin: 16px auto 0; text-align: center; max-width: none; }
}

/* ---- Nachrichten-Reaktionen ---- */
.reaction-bar {
  display: flex;
  gap: 4px;
  margin-top: 3px;
  margin-left: 60px;
  flex-wrap: wrap;
}
.reaction-pill {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1px 8px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1.6;
}
.reaction-pill:hover { border-color: var(--accent); }
.reaction-add-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1px 7px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.line.chat:hover .reaction-add-btn { opacity: 1; }
.reaction-add-btn:hover { border-color: var(--accent); color: var(--accent); }

.reaction-picker {
  position: fixed;
  z-index: 400;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 10px;
  display: flex;
  gap: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.reaction-picker span { cursor: pointer; font-size: 18px; }
.reaction-picker span:hover { transform: scale(1.2); display: inline-block; }

/* ---- Termine ---- */
.home-next-event {
  background: var(--glass-bg);
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.home-next-event-label { font-size: 10px; text-transform: uppercase; color: #7C5CFF; font-family: var(--mono); letter-spacing: 0.5px; }
.home-next-event-title { color: #fff; font-weight: 600; font-size: 14px; }
.home-next-event-time { color: var(--muted); font-size: 12px; font-family: var(--mono); }

.event-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.event-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.event-time { font-family: var(--mono); font-size: 12px; color: var(--accent); margin-bottom: 6px; }
.event-desc { font-size: 13px; color: var(--text); margin-bottom: 8px; }
.event-footer { display: flex; justify-content: space-between; align-items: center; }
.event-rsvp-btn.going { background: var(--success); color: #06281c; border-color: var(--success); }

/* ---- (Info)-Link bei /w ---- */
.info-link {
  color: var(--accent);
  cursor: pointer;
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  text-decoration: underline;
}
.info-link:hover { color: #fff; }

/* ---- Uboot-Nickpage-Details: Motto, Besucherzähler ---- */
.profile-motto {
  font-style: italic;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  margin-bottom: 8px;
}
.profile-views {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  margin-top: 8px;
}

.profile-visitors {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  max-width: 280px;
}
.profile-visitors .info-link { text-decoration: none; font-weight: 600; }

/* ---- Skeleton-Loader (Ladezustand statt reinem "Lädt …"-Text) ---- */
.skeleton-line {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--border) 50%, var(--panel-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  margin-bottom: 8px;
}
.skeleton-line:last-child { margin-bottom: 0; }
.skeleton-block { padding: 16px 4px; }

/* ---- Reconnect-Banner ---- */
.reconnect-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255,107,74,0.15);
  border-bottom: 1px solid var(--accent-dim);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.reconnect-spinner {
  width: 10px;
  height: 10px;
  border: 2px solid var(--accent-dim);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: reconnect-spin 0.7s linear infinite;
}
@keyframes reconnect-spin { to { transform: rotate(360deg); } }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-80 { width: 80%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.skeleton-row:last-child { margin-bottom: 0; }
.skeleton-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--panel-2); flex-shrink: 0; background: linear-gradient(90deg, var(--panel-2) 25%, var(--border) 50%, var(--panel-2) 75%); background-size: 200% 100%; animation: skeleton-pulse 1.4s ease-in-out infinite; }
@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.sidebar-nav-links { border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); padding-bottom: 10px; margin-bottom: 6px; }
.sidebar-group { margin-bottom: 4px; }
.sidebar-group summary {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-group-icon { font-size: 13px; flex-shrink: 0; }
.sidebar-group summary::-webkit-details-marker { display: none; }
.sidebar-group summary::after {
  content: '▸';
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  transition: transform 0.15s ease;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,107,74,0.12);
  border-radius: 5px;
}
.sidebar-group[open] > summary::after { transform: rotate(90deg); }
.sidebar-group summary:hover { background: rgba(255,255,255,0.05); color: var(--accent); }
.sidebar-group summary:hover .sidebar-group-icon { filter: none; }
.sidebar-group[open] > summary { color: var(--accent); }
.sidebar-group .community-btn {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 6px 10px 6px 20px;
  margin: 1px 0;
  font-size: 13px;
  transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-group .community-btn:hover { background: rgba(255,255,255,0.05); color: var(--accent); }
.sidebar-item-icon { font-size: 13px; opacity: 0.85; flex-shrink: 0; }

/* ---- Moderations-Befehls-Panel ---- */
.mod-cmd-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  flex-wrap: wrap;
}
.mod-cmd-row:last-child { border-bottom: none; }
.mod-cmd {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  background: var(--panel-2);
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.mod-cmd:hover { background: var(--accent); color: #ffffff; }
.mod-cmd-desc { color: var(--muted); flex: 1; min-width: 160px; }
.mod-cmd-row.locked { opacity: 0.45; }
.mod-cmd-row.locked .mod-cmd { cursor: default; }
.mod-cmd-row.locked .mod-cmd:hover { background: var(--panel-2); color: var(--accent); }
.mod-cmd-tier { font-family: var(--mono); font-size: 10px; color: var(--error); }

/* ---- Rauswurf-Hinweis auf der Startseite ---- */
.home-kick-notice {
  background: rgba(248,113,113,0.12);
  border: 1px solid rgba(248,113,113,0.5);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 20px;
  color: #ffb4b4;
  font-size: 13px;
  line-height: 1.6;
}

/* ---- Newsticker (Laufband oben im Chat) ---- */
.news-ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
/* Kurzer Glow-Flash, wenn wirklich neuer Inhalt reinkommt — macht "live" sichtbar statt
   dass sich der Ticker unbemerkt im Hintergrund austauscht. */
.news-ticker.news-ticker-flash { animation: newsTickerFlash 1.1s ease; }
@keyframes newsTickerFlash {
  0% { background: rgba(255,182,72,0.18); box-shadow: inset 0 0 0 1px rgba(255,182,72,0.4); }
  100% { background: var(--panel-2); box-shadow: none; }
}
.news-ticker-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
  background: var(--accent);
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.news-ticker-label .dot.on-air { width: 6px; height: 6px; }
.news-ticker-viewport { flex: 1; overflow: hidden; min-width: 0; }
.news-ticker-track {
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  color: #FFB648;
  animation: tickerScroll 45s linear infinite;
  will-change: transform;
}
.news-ticker-track:hover { animation-play-state: paused; }
.news-ticker-track b { color: var(--text); }
.news-ticker-track a { color: #7C5CFF; text-decoration: none; }
.news-ticker-track a:hover { text-decoration: underline; }
.news-ticker-sep { color: var(--accent); margin: 0 14px; }
@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- Theme-Auswahl im Admin-Panel ---- */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.theme-option {
  display: block;
  cursor: pointer;
  border: 2px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  transition: border-color 0.15s ease;
}
.theme-option:hover { border-color: var(--accent-dim); }
.theme-option.active { border-color: var(--accent); }
.theme-option input { width: auto; }
.theme-swatch {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.15);
}

/* ---- Bereichs-Kennzeichnung (Forum / Admin) ---- */
.area-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #ffffff;
  background: var(--accent);
  padding: 4px 10px;
  border-radius: 4px;
  flex-shrink: 0;
}
.area-badge-admin { background: var(--error); color: #2a0a0a; }
.forum-header { gap: 14px; align-items: center; }
.forum-header .forum-breadcrumb { flex: 1; min-width: 0; }

/* ---- Forum-Inhalte deutlicher vom Chat abheben ---- */
.forum-overlay .forum-category-title {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.forum-overlay .forum-row {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.forum-overlay .forum-row:hover {
  border-left-color: var(--accent);
  border-color: var(--glass-border);
  transform: translateX(2px);
}
.forum-newtopic-form {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 18px;
}

/* ---- Benachrichtigungs-Glocke ---- */
.notif-bell-wrap { position: relative; margin-left: auto; }
.notif-bell-btn {
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  padding: 4px;
  line-height: 1;
}
.notif-bell-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--error);
  color: #fff;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.notif-dropdown {
  position: fixed;
  width: 320px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  z-index: 300;
}
.notif-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.notif-dropdown-header button {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 11px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.notif-item {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text);
  text-decoration: none;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--panel-2); }
.notif-item.unread { background: rgba(255,107,74,0.06); border-left: 2px solid var(--accent); }
.notif-item-time { color: var(--muted); font-size: 10px; margin-top: 2px; }

/* ---- Toast-Overlay: taucht kurz oben rechts auf ---- */
.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast-card {
  pointer-events: auto;
  width: 300px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  cursor: pointer;
  animation: toastIn 0.25s ease-out;
}
.toast-card.toast-out { animation: toastOut 0.25s ease-in forwards; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(30px); }
}
.toast-title { font-size: 12px; font-weight: 700; margin-bottom: 3px; }
.toast-text { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* ---- Chat-Suchergebnisse ---- */
.search-result-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.search-result-row:last-child { border-bottom: none; }
.search-result-meta { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.search-result-text { font-size: 13px; }
.search-result-text mark { background: rgba(255,107,74,0.35); color: var(--text); border-radius: 2px; padding: 0 2px; }

/* ---- Feature-Liste auf dem Login-Screen ---- */
.features-card {
  border: 1px solid var(--accent);
  box-shadow: 0 0 24px rgba(255,107,74,0.08);
}
.features-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.features-list li {
  display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text);
  line-height: 1.4; background: var(--panel-2); border: 1px solid transparent;
  border-radius: var(--radius-sm); padding: 8px 10px; transition: border-color 0.15s ease, transform 0.15s ease;
}
.features-list li:hover { border-color: rgba(255,107,74,0.3); transform: translateX(2px); }
.features-icon {
  flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  background: var(--gradient-soft); border-radius: 8px; font-size: 13px;
}

/* ---- Chat-Top-Navbar (ersetzt die alten Community/Hilfe/Moderation-Gruppen in der Sidebar) ---- */
.chat-navbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 6px 20px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  /* Kein position:sticky mehr hier — hat sich mit der Leiste darunter überlappt.
     body ist jetzt komplett fixiert (siehe html,body weiter oben), dadurch kann die
     Seite ohnehin nicht mehr auf Seitenebene scrollen, der Header bleibt so schon
     zuverlässig sichtbar, ganz ohne eigene sticky/z-index-Klimmzüge. */
  flex-shrink: 0;
  flex-wrap: wrap;
}
.chat-navbar-brand { display: flex; align-items: center; gap: 8px; }
.chat-navbar-icon { width: 24px; height: 24px; object-fit: contain; }
.chat-navbar-links {
  /* Community/Hilfe/Moderation stehen jetzt in der linken Seitenleiste (Sidebar) —
     hier ausgeblendet, damit sie nicht doppelt vorkommen. Buttons bleiben im DOM,
     die Sidebar-Buttons lösen bei Klick weiterhin einfach deren Original-Klick aus. */
  display: none;
}
.chat-navbar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.chat-navbar-right .self-name { font-weight: 600; }
.chat-navbar-right .self-room { color: var(--muted); font-size: 12px; }

.chat-navbar .nav-dropdown { position: relative; }
.chat-navbar .nav-dropdown-label {
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  padding: 6px 0;
  display: inline-block;
}
.chat-navbar .nav-dropdown-label:hover,
.chat-navbar .nav-dropdown-label:focus { color: var(--text); }
.chat-navbar .nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0;
  padding: 10px 6px 6px 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 200px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  z-index: 250;
  flex-direction: column;
}
.chat-navbar .nav-dropdown:hover .nav-dropdown-menu,
.chat-navbar .nav-dropdown:focus-within .nav-dropdown-menu,
.chat-navbar .nav-dropdown.dropdown-open .nav-dropdown-menu { display: flex; }
.chat-navbar .nav-dropdown-menu .community-btn {
  background: transparent;
  border: none;
  color: var(--text);
  text-align: left;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  display: block;
}
.chat-navbar .nav-dropdown-menu .community-btn:hover { background: var(--panel-2); color: var(--accent); }

/* Sidebar jetzt schlank: nur noch Räume + Chatter */
.sidebar { padding-top: 4px; }

/* ---- Freunde-Widget in der Sidebar ---- */
.friend-widget-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.friend-widget-row:hover { background: var(--panel-2); }
.friend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.friend-dot-on { background: var(--success); box-shadow: 0 0 5px rgba(52,211,153,0.6); }
.friend-dot-off { background: #ff4444; opacity: 0.7; }

/* ---- Sprachwahl (Login-Screen + Chat-Navbar) ---- */
.lang-switch {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin: 10px 0;
}
.lang-switch-btn {
  width: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  font-family: var(--mono);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.5px;
  margin-top: 0;
  box-shadow: none;
}
.lang-switch-btn:hover { color: var(--text); border-color: var(--accent); filter: none; transform: none; }
#login-screen .lang-switch-btn.active { background: linear-gradient(100deg, var(--lg-purple) 0%, var(--lg-amber) 130%); border-color: transparent; color: #14101F; }
.lang-switch-btn.active { background: var(--gradient); border-color: transparent; color: #1A0F14; }
.lang-switch-compact { margin: 0; }