.nav-mobile-wrapper {
  z-index: 100;

  position: fixed;
  left: var(--space-2);
  right: var(--space-2);
  bottom: var(--space-2);

  background-color: var(--glass-bg);
  color: var(--color-title);

  border-style: solid;
  border-width: 1px;
  border-radius: var(--radius-2xl);
  border-color: var(--glass-border-color);
  backdrop-filter: var(--glass-blur);

  box-shadow: var(--shadow-std);

  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-1);

  white-space: nowrap;

  overflow: hidden;
  transition: var(--transition-std);
}

.nav-mobile-noise-overlay {
  position: absolute;
  opacity: var(--noise-opacity);
  background-image: var(--noise-bg-img);
  background-repeat: repeat;
  pointer-events: none;
}

.nav-mobile-expanded {
  z-index: 30;
  display: flex;
  flex-direction: row;
  align-items: end;
  justify-content: space-between;
  padding-top: var(--space-4);
  transition: var(--transition-std);
}

.nav-mobile-logo-buffer {
  width: 4.5rem;
}

.nav-mobile-links {
  z-index: 30;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  transition: var(--transition-std);
}

.nav-mobile-links a {
  text-decoration: none;
  transition: var(--transition-std);
  font-weight: var(--font-weight-xl);
}

.nav-mobile-settings {
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: end;
  padding: var(--space-4) var(--space-4) 0;
  justify-content: right;
  gap: var(--space-4);
  transition: var(--transition-std);
}

.nav-mobile-row {
  z-index: 30;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  transition: var(--transition-std);
  max-height: 4.5rem;
}

.nav-mobile-logo-wrapper {
  padding: var(--space-4);
}

.nav-mobile-logo-link img {
  z-index: 30;
  transition: var(--transition-std);
  display: block;
  height: 2.5rem;
  width: 2.5rem;
}

.nav-mobile-logo-link:hover img {
  transform: scale(1.05);
}

/* =========================
/* burger button
   * ========================= */
.nav-mobile-burger-wrapper {
  padding: 1rem;
}
/* Button-Basis */
/* Button-Basis */
.nav-mobile-burger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.burger-line {
  position: absolute;
  left: 50%;
  width: 1.25rem;
  height: 2px;
  background-color: currentColor;
  transform-origin: center;
  transform: translateX(-50%);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* 0: Closed = horizontaler Burger */
.burger-top.stateClosed {
  transform: translate(-50%, -6px) rotate(0deg);
}

.burger-mid.stateClosed {
  transform: translate(-50%, 0) rotate(0deg);
  opacity: 1;
}

.burger-bot.stateClosed {
  transform: translate(-50%, 6px) rotate(0deg);
}

/* 1: Full = X (oben/unten kreuzen, Mitte weg) */
.burger-top.stateFull {
  transform: translate(-50%, 0) rotate(45deg);
}

.burger-mid.stateFull {
  transform: translate(-50%, 0) rotate(0deg);
  opacity: 0;
}

.burger-bot.stateFull {
  transform: translate(-50%, 0) rotate(-45deg);
}

/* 2: Row = aufrechter Burger (vertikal) */
/* -90deg statt +90deg, damit der Weg zurück nach 0deg im Uhrzeigersinn ist */
.burger-top.stateRow {
  transform: translate(calc(-50% - 6px), -50%) rotate(-90deg);
}

.burger-mid.stateRow {
  transform: translate(-50%, -50%) rotate(-90deg);
  opacity: 1;
}

.burger-bot.stateRow {
  transform: translate(calc(-50% + 6px), -50%) rotate(-90deg);
}

/* Default */
.nav-mobile-wrapper .nav-mobile-expanded { display: none; }
.nav-mobile-wrapper .nav-mobile-row { display: flex; }

/* State 0: nur Row */
.nav-mobile--state0 .nav-mobile-expanded { display: none; }
.nav-mobile--state0 .nav-mobile-row { display: flex; }

/* State 1: Expanded + Row */
.nav-mobile--state1 .nav-mobile-expanded { display: flex; }
.nav-mobile--state1 .nav-mobile-row { display: flex; }


/* =========================
/* nav mobile label
   * ========================= */

.nav-mobile-current {
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2);
  pointer-events: none; /* ✅ ganz wichtig */
  user-select: none;
}

#nav-mobile-current-label {
  font-weight: var(--font-weight-xl);
  opacity: 0.9;
  max-width: 14rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}