.cs-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: min(320px, 85vw);
  background: var(--cs-flaeche);
  transform: translateX(-100%);
  transition: transform .2s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 2px 0 12px rgba(0,0,0,.15);
}
.cs-nav[data-offen="true"] { transform: translateX(0); }

.cs-nav__schirm {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(0,0,0,.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.cs-nav__schirm[data-offen="true"] { opacity: 1; visibility: visible; }

.cs-nav__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-abstand-2);
  padding: var(--cs-abstand-3);
  border-bottom: 1px solid var(--cs-linie);
}
.cs-nav__kopf strong { font-size: 15px; }
.cs-nav__schliessen {
  width: var(--cs-ziel);
  height: var(--cs-ziel);
  border: 0;
  border-radius: var(--cs-radius);
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.cs-nav__gruppe {
  margin: 0;
  padding: var(--cs-abstand-4) var(--cs-abstand-3) var(--cs-abstand-1);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cs-text-leise);
}

.cs-nav a {
  display: flex;
  align-items: center;
  min-height: var(--cs-ziel);
  padding: var(--cs-abstand-2) var(--cs-abstand-3) var(--cs-abstand-2) var(--cs-abstand-5);
  border-bottom: 1px solid #f4f4f4;
  color: var(--cs-text);
  text-decoration: none;
}
.cs-nav a:hover { background: #f7f9f4; }
.cs-nav a[aria-current="page"] {
  background: #f3f8ee;
  color: #2f7a25;
  font-weight: 600;
}

/* Ab 1025px wird aus dem Offcanvas eine feste Seitenleiste.
   Das ersetzt den bisherigen JS-resize-Handler durch CSS. */
@media (min-width: 1025px) {
  .cs-nav {
    position: sticky;
    top: var(--cs-kopf-hoehe);
    height: calc(100dvh - var(--cs-kopf-hoehe));
    transform: none;
    box-shadow: none;
    border-right: 1px solid var(--cs-linie);
    flex: none;
    width: 260px;
  }
  .cs-nav__schirm, .cs-nav__kopf, .cs-kopf__menue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-nav, .cs-nav__schirm { transition: none; }
}

/* Seitengeruest: Navigation neben Inhalt statt CSS-Tabelle. */
.cs-huelle { display: block; }
@media (min-width: 1025px) {
  .cs-huelle { display: flex; align-items: flex-start; }
  .cs-huelle > .cs-inhalt { flex: 1; min-width: 0; }
}