@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

/* ============================================================
   GaysTreff – Theme "Modern Bear"
   Wird IMMER als letztes Stylesheet geladen und ueberschreibt
   nur Design-Tokens + ein paar Feinheiten (Layout bleibt gleich).
   ============================================================ */

:root{
  /* --- Flaechen: warmes Anthrazit statt Schwarz --- */
  --bg:#0c0a09;
  --bg-2:#141110;
  --panel:#17130f;
  --panel-2:#201a15;
  --line:rgba(255,255,255,.09);
  --text:#f7f3ef;
  --muted:#a89e94;

  /* --- Akzent: Bernstein / Orange --- */
  --accent:#ff8a1f;
  --accent-2:#e0590a;
  --grad:linear-gradient(115deg,#ffb347 0%,#ff8a1f 45%,#e0590a 100%);
  --glow:0 18px 44px -20px rgba(255,138,31,.55);

  --online:#3ddc84;
  --away:#f5b301;
  --offline:#6b6259;
  --radius:16px;

  /* --- Landing/Login (landing.css) --- */
  --g-bg:#0c0a09;
  --g-bg-2:#171310;
  --g-surface:rgba(255,255,255,.05);
  --g-surface-2:rgba(255,255,255,.085);
  --g-border:rgba(255,255,255,.10);
  --g-text:#f7f3ef;
  --g-muted:#b0a49a;
  --g-primary:#ff8a1f;
  --g-primary-2:#e0590a;
  --g-cyan:#ffb347;
  --g-lime:#3ddc84;
  --g-amber:#ffc76b;
  --g-grad:linear-gradient(115deg,#ffb347 0%,#ff8a1f 45%,#e0590a 100%);
  --g-grad-soft:linear-gradient(160deg,rgba(255,138,31,.20),rgba(224,89,10,.12) 55%,rgba(255,199,107,.12));
  --g-radius:20px;
  --g-shadow:0 26px 60px -26px rgba(255,138,31,.45);

  /* Header-Glas */
  --hd-glass:linear-gradient(180deg,rgba(31,23,17,.94),rgba(12,10,9,.80));
  --hd-line:rgba(255,255,255,.10);
}

html,body{
  font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.005em;
}

/* Warmes Grundlicht im Hintergrund */
body{
  background:
    radial-gradient(1100px 620px at 12% -8%,rgba(255,138,31,.16),transparent 62%),
    radial-gradient(900px 520px at 92% 4%,rgba(224,89,10,.13),transparent 60%),
    var(--bg);
  background-attachment:fixed;
}

/* ---------- Karten / Kacheln ---------- */
.card,.clubcard,.panel,.box,.tile{
  border-radius:var(--radius);
}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s ease,box-shadow .22s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,138,31,.55);
  box-shadow:0 22px 50px -24px rgba(255,138,31,.6);
}
.card img{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.card:hover img{transform:scale(1.04)}

/* ---------- Buttons ---------- */
.btn,button,.gbtn{border-radius:999px}
.btn--primary,.gbtn--primary{
  background:var(--grad);border-color:transparent;color:#1a0f05;
  font-weight:800;box-shadow:var(--glow);
}
.btn--primary:hover,.gbtn--primary:hover{filter:brightness(1.07)}

/* ---------- Formulare ---------- */
input,select,textarea{
  border-radius:12px !important;
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
  color:var(--text);
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:rgba(255,138,31,.7);
  box-shadow:0 0 0 3px rgba(255,138,31,.18);
}

/* ---------- Statuspunkte ---------- */
.dot.is-online,.online-dot,.is-online{--dot:var(--online)}

/* ---------- Schlanke, warme Scrollbalken ---------- */
*{scrollbar-width:thin;scrollbar-color:rgba(255,138,31,.45) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:rgba(255,138,31,.42);border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,138,31,.65)}
*::-webkit-scrollbar-track{background:transparent}

/* ---------- Auswahl ---------- */
::selection{background:rgba(255,138,31,.32);color:#fff}

/* =========================================================
   Menü rechts: öffnet exakt wie das Panel "Private Nachrichten"
   ========================================================= */
.menupanel{
  width:var(--gt-panelw) !important;max-width:100vw !important;
  top:var(--gt-headerh);bottom:0;right:0;z-index:70;
  background:var(--bg);border-left:1px solid var(--line);
  padding:0 0 24px;gap:0;
  box-shadow:-24px 0 60px rgba(0,0,0,.45);
  animation:sp-slidein .26s cubic-bezier(.22,.7,.3,1);
}
@keyframes sp-slidein{from{transform:translateX(100%);opacity:.6}to{transform:none;opacity:1}}
.menu[open]::after{z-index:65;background:rgba(0,0,0,.5)}

/* Kopfzeile wie .sp-head */
.menubar{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;border-bottom:1px solid var(--line);background:var(--bg);
  position:sticky;top:0;z-index:2;
}
.menubar h2{font-size:20px;font-weight:700}
.menuback{width:40px;height:40px;border-radius:10px}
.menuback:hover{background:var(--panel-2)}

.menuhead{padding:22px 16px 24px}
.menupanel a{
  padding:14px 22px;border-bottom:1px solid var(--line);
  font-size:16px;font-weight:600;
}
.menupanel hr{display:none}
.menuversion{padding:22px 22px 4px}

@media (max-width:900px){
  .menupanel{width:100vw !important;max-width:100vw !important;box-shadow:none}
}

/* =========================================================
   Neuer Header + Menü, das komplett aufgeht (volle Höhe)
   ========================================================= */
.topbar{
  position:sticky;top:0;z-index:120;
  background:linear-gradient(180deg,rgba(20,13,9,.96),rgba(10,8,7,.88));
  border-bottom:1px solid var(--line);
}
.topbar .iconbtn{border:1px solid transparent}
.topbar .iconbtn:hover{border-color:var(--line)}
.menu > summary{
  border-radius:12px;background:rgba(255,138,31,.14);
  border:1px solid rgba(255,138,31,.35);color:var(--text);
}
.menu[open] > summary{background:var(--grad);color:#fff;border-color:transparent}

/* Panel geht komplett auf: ganze Bildschirmhöhe, über dem Header */
.menupanel{
  top:0 !important;bottom:0 !important;height:100dvh;
  z-index:1000 !important;
  width:var(--gt-panelw) !important;max-width:100vw !important;
  background:var(--bg);border-left:1px solid var(--line);
  padding:0 0 24px;gap:0;overflow-y:auto;
  box-shadow:-28px 0 70px rgba(0,0,0,.55);
  animation:sp-slidein .26s cubic-bezier(.22,.7,.3,1);
}
.menu[open]::after{
  top:0 !important;bottom:0;left:0;right:0;
  z-index:990 !important;background:rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.menubar{position:sticky;top:0;z-index:2;background:var(--bg)}

@media (max-width:900px){
  .menupanel{width:100vw !important;box-shadow:none}
}


/* Mobile: private Nachrichten immer erreichbar (auch im Profil) */
@media (max-width:900px){
  body.page-profile .mobilenav{display:flex}
  .mnav-item{font-size:9.5px}
  .mnav-item svg{width:22px;height:22px}
  .mnav-badge{right:calc(50% - 20px)}
}