:root{
  /* Du nutzt unten var(--accent-color3), daher muss die Variable so heißen */
  --accent-color3: #fff;

  --side-btn-h: 52px;
  --side-btn-w-collapsed: 56px; /* sichtbar im eingeklappten Zustand */
  --side-btn-w-expanded: 220px; /* reale Buttonbreite (Icon+Text) */

  --side-gap: 10px;
  --side-shadow: 0 10px 30px rgba(0,0,0,0.25);

  /* wie weit der Button "versteckt" ist (rechts raus), so dass nur das Icon bleibt */
  --side-slide-offset: calc(var(--side-btn-w-expanded) - var(--side-btn-w-collapsed));

  /* Basisfarbe der Buttons */
  --side-btn-bg: rgba(201, 68, 27, 1);
  --side-btn-bg-hover: rgba(201, 68, 27, 0.85);
}

/* Container: immer nur Icon-Breite, rechts fix, vertikal zentriert */
.side-actions{
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;

  width: var(--side-btn-w-collapsed);

  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Buttons an rechter Kante ausrichten */
  gap: var(--side-gap);

  margin: 0;
  padding: 0;

  overflow: visible; /* wichtig: Buttons dürfen nach links rausstehen */
}

/* Jeder Button ist immer "expanded" breit, wird aber nach rechts rausgeschoben */
.side-action{
  position: relative;
  display: flex;
  align-items: center;

  height: var(--side-btn-h);
  width: var(--side-btn-w-expanded);

  background-color: var(--side-btn-bg);
  color: #fff;
  text-decoration: none;

  border: 1px solid rgba(255,255,255,0.12); /* kein border-radius */
  box-shadow: var(--side-shadow);

  overflow: hidden;

  /* Eingeklappt: nach rechts verschieben, so dass nur Icon sichtbar bleibt */
  transform: translateX(var(--side-slide-offset));
  transition:
    transform 240ms ease,
    background-color 240ms ease,
    border-color 240ms ease;
}

/* Icon-Bereich bleibt sichtbar */
.side-action__icon{
  width: var(--side-btn-w-collapsed);
  min-width: var(--side-btn-w-collapsed);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
  line-height: 1;
}

/* Label im eingeklappten Zustand ausblenden */
.side-action__label{
  white-space: nowrap;

  opacity: 0;
  transform: translateX(8px);
  transition: opacity 180ms ease, transform 180ms ease;

  color: #fff;
  padding-right: 14px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* Nur das aktuell aktive Element fährt rein */
.side-action:hover,
.side-action:focus-visible,
.side-action.is-open{
  transform: translateX(0);
  background-color: var(--side-btn-bg-hover);
  border-color: rgba(255,255,255,0.18);
}

/* Label nur beim aktiven Element einblenden */
.side-action:hover .side-action__label,
.side-action:focus-visible .side-action__label,
.side-action.is-open .side-action__label{
  opacity: 1;
  transform: translateX(0);
}

/* Akzentleiste links (optional), nur wenn offen */
.side-action::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;

  width: 0;
  background: var(--accent-color3);
  transition: width 240ms ease;
  pointer-events: none;
}

.side-action:hover::before,
.side-action:focus-visible::before,
.side-action.is-open::before{
  width: 3px;
}

/* Tastatur-Fokus sichtbar */
.side-action:focus-visible{
  outline: 3px solid rgba(255, 255, 255, 0.45);
  outline-offset: 2px;
}