/* ════════════════════════════════════════════════════════════
   RealBazzi Shell — geteiltes CSS für Sidebar / Topbar / Footer
   Wird via partials/header.ejs in jede EJS-Seite eingebunden.
   Aus public/index2.html / views/index2.ejs extrahiert (2026-04-26).
════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#05060c;--bg1:#0c0e1c;--bg2:#181c30;--bg3:#212541;--bg4:#2a2f52;
  --blu:#4da6ff;--blu2:#74bcff;--blu3:#2d7fd4;
  --gold:#f5c842;--gold2:#ffe066;--gold3:#c99a10;
  --text:#eef0ff;--sub:#6b7194;--sub2:#3a3d58;--border:rgba(255,255,255,.1);
  --orange:#ff6b35;--green:#22c55e;--red:#ef4444;--yellow:#eab308;--twitch:#9146ff;
  --sb-w: 240px;
  --sb-w-collapsed: 82px;
}

html{scroll-behavior:smooth;overflow-x:hidden;scrollbar-gutter:stable}
body{background:var(--bg);color:var(--text);font-family:'Sora','Sora-fallback',sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}

/* ── Orbs (dekorativer Hintergrund) ── */
.orbs-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.32;mix-blend-mode:screen;will-change:transform}
.orb.o1{width:520px;height:520px;top:-160px;left:-120px;background:radial-gradient(circle,rgba(77,166,255,.7),transparent 70%);animation:of1 28s ease-in-out infinite}
.orb.o2{width:460px;height:460px;top:30%;right:-140px;background:radial-gradient(circle,rgba(245,200,66,.5),transparent 70%);animation:of2 34s ease-in-out infinite;animation-delay:-8s}
.orb.o3{width:380px;height:380px;bottom:-120px;left:35%;background:radial-gradient(circle,rgba(145,70,255,.45),transparent 70%);animation:of3 40s ease-in-out infinite;animation-delay:-16s}
@keyframes of1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(120px,80px) scale(1.15)}}
@keyframes of2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-100px,120px) scale(.9)}}
@keyframes of3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,-100px) scale(1.1)}}

/* ── SIDEBAR ── */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sb-w);
  background: rgba(12,14,28,.97);
  border-right: 1px solid rgba(77,166,255,.12);
  backdrop-filter: blur(20px);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  transition: width .3s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;
  overflow: clip;
}
.sidebar.collapsed { width: var(--sb-w-collapsed); }
@media (hover: hover) {
  .sidebar.collapsed:hover { width: var(--sb-w); box-shadow: 8px 0 32px rgba(0,0,0,.5); }
  .sidebar.collapsed:hover .sb-logo-text { opacity: 1; width: auto; }
  .sidebar.collapsed:hover .sb-logo-img { display: block; }
  .sidebar.collapsed:hover .sb-logo-small { display: none; }
  .sidebar.collapsed:hover .sb-section-label { opacity: 1; }
  .sidebar.collapsed:hover .sb-link > span { opacity: 1; width: auto; display: block !important; pointer-events: auto; }
  .sidebar.collapsed:hover .sb-link > span[style*="flex"] { display: flex !important; }
  .sidebar.collapsed:hover .sb-toggle-label { opacity: 1; width: auto; }
  .sidebar.collapsed:hover .sb-toggle-btn { justify-content: flex-start; }
}

.sb-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  min-height: 68px;
  flex-shrink: 0;
  overflow: hidden;
}
.sb-logo-img { height: 59px; width: auto; object-fit: contain; flex-shrink: 0; }
.sb-logo-small { height: 44px; width: 52px; object-fit: contain; flex-shrink: 0; display: none; }
.sidebar.collapsed .sb-logo-img { display: none; }
.sidebar.collapsed .sb-logo-small { display: block; }
.sb-logo-text {
  font-size: 21px; font-weight: 800; color: var(--text);
  white-space: nowrap; overflow: hidden;
  transition: opacity .25s ease, width .25s ease;
}
.sidebar.collapsed .sb-logo-text { opacity: 0; width: 0; }

.sb-nav { flex: 1; overflow-y: auto; overflow-x: clip; padding: 0 20px!important; display: flex; flex-direction: column; gap: 10px !important;}
.sb-nav::-webkit-scrollbar { width: 4px; }
.sb-nav::-webkit-scrollbar-thumb { background: var(--sub2); border-radius: 2px; }

.sb-section-label {
  font-size: 9px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sub2);
  padding: 8px 10px 3px;
  white-space: nowrap; overflow: hidden;
  transition: opacity .25s ease;
  width: 100%; display: block;
  text-align: left;
}
.sidebar.collapsed .sb-section-label { opacity: 0; }

.sb-link {
  display: flex; align-items: center;
  padding: 6px 10px; border-radius: 8px;
  color: var(--sub);
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
  transition: all .15s;
  cursor: pointer;
  position: relative;
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  margin-bottom: 1px;
}
.sb-link i { font-size: 17px; flex-shrink: 0; width: 18px; text-align: center; }
.sb-link span { overflow: hidden; transition: opacity .25s ease, width .25s ease; flex: 1; min-width: 0; margin-left: 11px; }
.sidebar.collapsed .sb-link > span { opacity: 0; width: 0; display: none !important; pointer-events: none; }

.sidebar.collapsed:not(:hover) .sb-nav { padding: 10px 0; align-items: center; }
.sidebar.collapsed:not(:hover) .sb-link {
  width: 46px;
  height: 46px;
  justify-content: center;
}

.sb-link:hover { color: var(--text); background: rgba(77,166,255,.08); }
.sb-link.active { color: var(--text); background: rgba(77,166,255,.12); border: 1px solid rgba(77,166,255,.18); }
.sb-link.active i { color: var(--blu); }

.sb-tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--bg2);
  border: 1px solid rgba(77,166,255,.3);
  color: var(--text);
  font-family: 'Sora',sans-serif;
  font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0,0,0,.6);
  opacity: 0;
  transition: opacity .12s;
}
.sb-tooltip.show { opacity: 1; }

.sb-toggle-btn {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 10px;
  padding: 12px 12px;
  border-top: 1px solid var(--border);
  color: var(--sub);
  font-size: 12px; font-weight: 600;
  transition: all .15s;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.sidebar.collapsed .sb-toggle-btn { justify-content: center; }
.sb-toggle-btn:hover { color: var(--text); background: rgba(255,255,255,.04); }
.sb-toggle-btn i { font-size: 14px; transition: transform .25s; flex-shrink: 0; }
.sidebar.collapsed .sb-toggle-btn i { transform: rotate(180deg); }
.sb-toggle-label { transition: opacity .25s ease, width .25s ease; }
.sidebar.collapsed .sb-toggle-label { opacity: 0; width: 0; overflow: hidden; }

.sb-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.65); z-index: 9999;
  backdrop-filter: blur(4px);
}
.sb-overlay.open { display: block; }

/* ── MAIN LAYOUT ── */
.layout-wrap {
  margin-left: var(--sb-w);
  transition: margin-left .3s cubic-bezier(.4,0,.2,1);
  min-height: 100vh;
  position: relative; z-index: 1;
}
body.sb-collapsed .layout-wrap { margin-left: var(--sb-w-collapsed); }

.mobile-header {
  display: none;
  height: 56px;
  background: rgba(12,14,28,.97);
  border-bottom: 1px solid rgba(77,166,255,.12);
  align-items: center;
  padding: 0 16px; gap: 12px;
  position: sticky; top: 0; z-index: 150;
}
.mobile-header img { height: 36px; width: auto; }
.mobile-menu-btn {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--sub); font-size: 15px;
  transition: all .15s;
}
.mobile-menu-btn:hover { color: var(--text); border-color: rgba(77,166,255,.3); }

/* ── TOPBAR ── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
  padding: 0 clamp(20px, 3vw, 36px);
  background: rgba(8, 10, 22, .82);
  border-bottom: 1px solid rgba(77,166,255,.1);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 250;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }

.tb-btn-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  font-family: 'Sora', sans-serif;
  font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: all .15s;
}
.tb-btn-ghost:hover { background: rgba(255,255,255,.04); border-color: rgba(77,166,255,.4); }
.tb-btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px; border-radius: 8px;
  background: linear-gradient(135deg, var(--blu3), var(--blu));
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 13px; font-weight: 700;
  border: none;
  cursor: pointer; text-decoration: none;
  transition: all .15s;
  box-shadow: 0 4px 14px rgba(77,166,255,.25);
}
.tb-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(77,166,255,.4); }
.tb-btn-primary i { font-size: 11px; }

/* Slot reserviert Platz, damit JS-Inject (Bell, Daily-Btn, User-Wrap) keinen CLS auslöst.
   min-height matched die größte injizierte Komponente (Bell 42px), min-width grob
   für Bell + Daily-Btn (~140px). */
.topbar [data-sora-header] { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; min-width: 140px; }
.mobile-header [data-sora-header] { min-height: 42px; min-width: 100px; }

/* ── FOOTER ── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 32px clamp(20px,4vw,56px);
  margin-top: 32px;
  text-align: center;
  font-size: 11px;
  color: var(--sub2);
  line-height: 1.8;
  position: relative;
  z-index: 2;
}
.site-footer a { color: var(--sub); text-decoration: none; transition: color .15s; }
.site-footer a:hover { color: var(--text); }
.site-footer-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 18px;
  margin-bottom: 14px;
  font-size: 12px;
}
.site-footer-links a { font-weight: 600; }
.site-footer-sep { color: var(--sub2); opacity: .5; }
.site-footer-disclaimer {
  max-width: 720px;
  margin: 0 auto;
  font-size: 11px;
  font-style: italic;
  color: var(--sub2);
  opacity: .85;
}
.site-footer-bottom {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 14px;
  font-size: 11px;
  color: var(--sub2);
}
.site-footer-bottom .age-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--red);
  color: var(--red);
  font-size: 9px; font-weight: 800;
  letter-spacing: -.02em;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); width: var(--sb-w) !important; transition: transform .25s ease; }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar.collapsed .sb-link > span,
  .sidebar.collapsed .sb-logo-text,
  .sidebar.collapsed .sb-section-label,
  .sidebar.collapsed .sb-toggle-label { opacity: 1 !important; width: auto !important; display: inline !important; }
  .sidebar.collapsed .sb-link > span { display: block !important; }
  .sidebar.collapsed .sb-link > span[style*="flex"] { display: flex !important; }
  .sidebar.collapsed .sb-logo-img { display: block !important; }
  .sidebar.collapsed .sb-logo-small { display: none !important; }
  .sidebar.collapsed .sb-link { width: 100% !important; height: auto !important; padding: 6px 10px !important; justify-content: flex-start !important; }
  .sidebar.collapsed .sb-nav { padding: 10px 8px !important; align-items: stretch !important; }
  .sidebar.collapsed .sb-toggle-btn { justify-content: flex-start !important; }
  .sidebar.collapsed .sb-toggle-btn i { transform: none !important; }
  .sb-toggle-btn { display: none; }
  .layout-wrap { margin-left: 0 !important; }
  .mobile-header { display: flex; }
  .topbar { display: none; }
  .site-footer { padding: 20px 16px; font-size: 10px; }
  .site-footer-links { gap: 4px 12px; font-size: 11px; }
}