/* Sidebar – clean, compact, light grey links, no underlines */
/* (UTF-8, no BOM) */

/* === Vars === */
:root{
  --sb-bg: #000;
  --sb-fg: #c7d0de;     /* hellgrau */
  --sb-fg-hover: #e1e7f2;
  --sb-line: rgba(255,255,255,.08);
  --sb-text: #fff;
}

/* === Container & backdrop === */
.app-sidebar,
.app-sidebar * { box-sizing: border-box; }
.app-sidebar{
  position: fixed; inset: 0 auto 0 0;
  width: 320px; max-width: 90vw; height: 100vh;
  background: var(--sb-bg); color: var(--sb-text);
  transform: translateX(-100%);
  visibility: hidden; pointer-events: none;
  transition: transform .2s ease;
  z-index: 9999;
  display: flex; flex-direction: column;
  font-family: 'News Cycle', sans-serif;
  overflow-y: auto; overflow-x: hidden;    /* kein seitliches Scrollen */
}
/* Öffnen: entweder Body-Class oder alte .is-open-Klasse */
body.sidebar-open .app-sidebar,
.app-sidebar.is-open{
  transform: translateX(0);
  visibility: visible; pointer-events: auto;
}
.sidebar-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9998; }

/* === Header === */
.sidebar-header{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 56px;
  background: var(--sb-bg); color: var(--sb-text);
}
.sidebar-brand{ display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--sb-text); }
.sidebar-logo{ display: block; height: 88px; width: auto; object-fit: contain; }
.sidebar-close{
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  background: none; border: 0; color: var(--sb-text); width: 44px; height: 44px;
  font-size: 28px; line-height: 1; cursor: pointer;
}

/* === Navigation === */
.sidebar-nav{ padding: 8px 0; flex: 1 1 auto; overflow: hidden; }
.sidebar-list{ list-style: none; margin: 0; padding: 0; }
.sidebar-list > li { margin: .2rem 0; }

/* Hauptlinks */
.sidebar-list a{
  display: block;
  width: 100%;
  padding: .45rem .75rem .45rem 1.5rem;  /* Einrückung */
  font-size: .96rem;
  line-height: 1.2;
  color: var(--sb-fg);
  text-decoration: none;                 /* keine Unterstreichung */
  background: transparent;
  border: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* kein X-Scroll */
}
.sidebar-list a:hover,
.sidebar-list a:focus-visible{
  color: var(--sb-fg-hover);
  background: rgba(255,255,255,.04);
  outline: 0;
}

/* Unterpunkte unter „DSC Allendorf“ */
.submenu.submenu-dsc{
  list-style: none;
  margin: .25rem 0 .4rem;
  padding: 0 0 0 .9rem;                  /* Einrückung */
  border-left: 1px solid var(--sb-line);
}
.submenu.submenu-dsc a{
  padding: .32rem .55rem;
  font-size: .92rem;                     /* kleiner */
  color: var(--sb-fg);
  text-decoration: none;
}
.submenu.submenu-dsc a:hover{ color: var(--sb-fg-hover); background: rgba(255,255,255,.04); }

/* Aktiver Link (dezent, ohne Unterstreichung) */
.sidebar-list a.is-active{ background: rgba(255,255,255,.06); color: #eef3fb; }

/* === Footer === */
.sidebar-footer{
  margin-top: auto; padding: 10px 16px; text-align: center; color: var(--sb-fg);
}
.sidebar-imprint{ color: var(--sb-fg); font-size: .9rem; line-height: 1.2; }

/* === Mobile === */
@media (max-width: 480px){
  .app-sidebar{ width: 280px; }
  .sidebar-header{ padding: 12px 48px; }
  .sidebar-logo{ height: 72px; }
  .sidebar-list a{ font-size: .94rem; padding: .4rem .65rem .4rem 1.25rem; }
}

/* (optional) Wenn dein JS die Body-Class setzt, sicherstellen, dass der Backdrop sichtbar ist */
body.sidebar-open #sidebarBackdrop{ display: block; }

/* === Überpunkte (Top-Level) deutlich größer === */
.sidebar-list > li > a {
  font-size: 1.24rem;   /* vorher ~0.96rem */
  font-weight: 700;     /* kräftiger */
  letter-spacing: .015em;
  padding-left: 1.25rem; /* leicht einrücken, wirkt ruhiger */
  color: var(--sb-fg);  /* hellgrau, wie gewünscht */
}

/* Optional: auf sehr kleinen Screens minimal kleiner skalieren */
@media (max-width: 480px){
  .sidebar-list > li > a { font-size: 1.08rem; }
}

/* === Sidebar Scrollbar optisch ausblenden, Funktion bleibt === */
.sidebar-scroll {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge Legacy */
}
.sidebar-scroll::-webkit-scrollbar {
  width: 0px;                     /* Chrome, Safari, Edge */
  height: 0px;
}
.sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: transparent;
}