/* 04_menu_links.css — vertikale Menue-Sidebar links (NEU v8). Phase 4.
   Sidebar fixed, Hauptinhalt rueckt durch body padding-left auf.
   Mobile <768px: padding weg, Sidebar wird Drawer (slide-in von links). */

body.menutyp-links {
  padding-left: 220px;
}

/* 2026-05-27 BUG B: padding-right fuer menutyp=rechts war vergessen
   (Asymmetrie zu links). Content lief unter die fixe rechte Sidebar. */
body.menutyp-rechts {
  padding-right: 220px;
}

.menu-sidebar {
  position: fixed;
  top: 50px;            /* unter der Steuerleiste */
  left: 0;
  width: 220px;
  height: calc(100vh - 50px);
  background: var(--farbe2);
  color: var(--farbe5);
  z-index: 90;
  overflow-y: auto;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  padding: 1rem 0;
  box-sizing: border-box;
}

body.menutyp-rechts .menu-sidebar {
  left: auto;
  right: 0;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

.menu-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-sidebar > ul > li > a {
  display: block;
  padding: 0.85rem 1.25rem;
  color: var(--farbe5);
  text-decoration: none;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}

.menu-sidebar > ul > li > a:hover,
.menu-sidebar > ul > li > a.active {
  background: rgba(0, 0, 0, 0.1);
  border-left-color: var(--farbe1);
}

.menu-sidebar .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.08);
}

.menu-sidebar .submenu li a {
  display: block;
  padding: 0.55rem 1.25rem 0.55rem 2.5rem;
  color: var(--farbe5);
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.2s;
}

.menu-sidebar .submenu li a:hover {
  background: rgba(0, 0, 0, 0.15);
}

/* ===== Mobile / schmaler Viewport ===== */

body.menutyp-links.is-mobile,
body.menutyp-rechts.is-mobile {
  padding-left: 0;
  padding-right: 0;
}

body.menutyp-links.is-mobile .menu-sidebar,
body.menutyp-rechts.is-mobile .menu-sidebar {
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  width: 80vw;
  max-width: 320px;
}

body.menutyp-rechts.is-mobile .menu-sidebar {
  transform: translateX(100%);
}

body.menutyp-links.is-mobile .menu-sidebar.active,
body.menutyp-rechts.is-mobile .menu-sidebar.active {
  transform: translateX(0);
}

@media (max-width: 768px) {
  body.menutyp-links,
  body.menutyp-rechts {
    padding-left: 0;
    padding-right: 0;
  }
  body.menutyp-links .menu-sidebar,
  body.menutyp-rechts .menu-sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    width: 80vw;
    max-width: 320px;
  }
  body.menutyp-rechts .menu-sidebar {
    transform: translateX(100%);
  }
  body.menutyp-links .menu-sidebar.active,
  body.menutyp-rechts .menu-sidebar.active {
    transform: translateX(0);
  }
}