:root{
  --bg:#0f1a26;
  --panel:#162835;
  --accent:#00bfff;
  --muted:#9fb0c2;
  --glass: rgba(255,255,255,0.03);
  --radius:12px;
  --maxwidth:calc( 100% - 350px);
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0; height:100%;}

body{
  background: radial-gradient(circle at top, rgba(56, 189, 248, 0.08), transparent 45%), radial-gradient(circle at 20% 20%, rgba(96, 212, 255, 0.08), transparent 35%), var(--bg);
  color:#e7f2f8;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Header */
.header{
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px;
  background:var(--panel);
  border-radius:var(--radius);
  box-shadow:0 8px 20px rgba(2,10,20,0.6);
  margin:0 20px 20px 20px;
}
.header img.logo{
  width:56px;
  height:56px;
  border-radius:8px;
  object-fit:cover;
  border:2px solid rgba(0,191,255,0.12);
}
.header h1{font-size:1.25rem;margin:0;color:var(--accent);}

/* Main Container */
#mainContainer{
  max-width:var(--maxwidth);
  padding:20px 10px;
  transition: all 0.35s ease;
  margin-left: 15px;
}



.with-sidebar #mainContainer{margin-right:260px;}
.no-sidebar #mainContainer{margin-right:20px; margin-left:20px;}

#mainContainer.no-sidebar {
  --maxwidth: calc(100% - 60px) !important;
}

/* Cards */
.card{
  background:var(--panel);
  border-radius:var(--radius);
  padding:18px;
  margin-bottom:20px;
  box-shadow:0 8px 20px rgba(2,10,20,0.6);
}
.card h2{color:var(--accent); font-size:1.1rem; margin-bottom:12px;}

/* Rules */
.rules{display:flex; flex-direction:column; gap:10px;}
.rule{
  background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.02);
}
.rule h3{margin:0 0 6px 0; color:#cfefff; font-size:0.98rem;}
.rule ol{margin:0; padding-left:18px; color:var(--muted);}

/* Sidebar */
.sidebar{
  position:fixed;
  top:calc(20px + 96px); /* Header + Margin */
  bottom:60px; /* Abstand für Footer */
  right:20px;
  width:250px;
  background:rgba(22,40,53,0.95);
  backdrop-filter:blur(6px);
  padding:20px 10px;
  display:flex;
  flex-direction:column;
  z-index:100;
  border-radius:var(--radius);
  box-shadow:0 0 15px rgba(0,0,0,0.3);
  transition: transform 0.35s ease;
}
.sidebar.collapsed{transform:translateX(calc(100% + 20px));}
.sidebar-toggle{
  background:var(--accent);
  border:none;
  color:var(--bg);
  font-size:1.2rem;
  margin-top:auto;
  cursor:pointer;
  border-radius:8px;
  padding:8px 0;
}

#sidebarLinks {
  overflow: auto;
  margin-bottom: 5px;
  padding-right: 5px;
}

/* Sidebar Links */
#sidebarLinks a{
  display:block;
  padding:10px 12px;
  margin:6px 0;
  background:rgba(255,255,255,0.05);
  border-radius:6px;
  color:#e7f2f8;
  text-decoration:none;
  transition:0.2s;
}
#sidebarLinks a:hover{
  background:rgba(0,191,255,0.2);
  color:#00bfff;
}

/* Show Sidebar Button */
.sidebar-show{
  position:fixed;
  top:50%;
  right:0;
  transform:translateY(-50%);
  display:flex;
  z-index:90;
}
.sidebar-show button{
  background:var(--panel);
  border:none;
  color:var(--accent);
  padding:10px 12px;
  border-radius:8px 0 0 8px;
  cursor:pointer;
}

/* Footer */
.body-footer{
  background:var(--panel);
  padding:15px 20px;
  display:flex;
  justify-content:space-between;
  width:100%;
  position:relative;
  margin-top:auto;
  border-top:1px solid rgba(255,255,255,0.05);
}
.body-footer p{margin:0; font-size:0.85rem; color:var(--muted);}
.body-footer .footer-links a{
  color:var(--accent);
  text-decoration:none;
  margin-left:10px;
}

/* Responsive */
@media (max-width:980px){
  #mainContainer{
    --maxwidth: 100% !important;
  }

  .sidebar{
    position: fixed;
    width: 100%;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    border-radius: 0px !important;
  }
  .sidebar-show {
    position: fixed;
  }
}




/* Dark scrollbar theme — variables (an dein Theme anpassen) */
:root {
  --scroll-bg: rgba(35, 52, 68, 0.6);      /* Track background */
  --scroll-inner: rgba(255,255,255,0.02);/* Track inner highlight */
  --scroll-thumb: rgba(40,120,160,0.45); /* Thumb default (accent dunkel) */
  --scroll-thumb-hover: rgba(40,120,160,0.70); /* Thumb on hover */
  --scroll-thumb-active: rgba(40,120,160,0.85);/* Thumb while active/dragging */
  --scroll-corner: transparent;
  --scroll-radius: 10px;
  --scroll-min-height: 28px; /* sichtbare Mindesthöhe für Zugänglichkeit */
}

/* ----------------------------
   WebKit (Chrome, Edge, Safari)
   ---------------------------- */
*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

*::-webkit-scrollbar-track {
  background: var(--scroll-bg);
  border-radius: var(--scroll-radius);
  box-shadow: inset 0 1px 0 var(--scroll-inner);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb);
  border-radius: var(--scroll-radius);
  min-height: var(--scroll-min-height);
  border: 2px solid transparent; /* Abstand, optisch leichter */
  background-clip: padding-box;
}

/* Thumb - hover / active */
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scroll-thumb-hover);
}
*::-webkit-scrollbar-thumb:active {
  background-color: var(--scroll-thumb-active);
}

/* Ecke (bei zwei Scrollbars) */
*::-webkit-scrollbar-corner {
  background: var(--scroll-corner);
}

/* ----------------------------
   Firefox
   ---------------------------- */
/* scrollbar-width: auto | thin | none  */
:root {
  /* Optional: für Firefox etwas schmaler */
  --ff-scrollbar-width: thin;
}
html {
  scrollbar-width: var(--ff-scrollbar-width);
  scrollbar-color: var(--scroll-thumb) var(--scroll-bg);
}