/* drawer: Schublade von links (Menü) und von rechts (Konto), dahinter eine
   Abdunkelung. Übernommen aus der Vorlage. Die Linkliste darin ist .nav. */
.drawer__scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--color-scrim);
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms ease;
}

.drawer__scrim[data-open="true"] { opacity: 1; }

.drawer__scrim[data-open="false"] { pointer-events: none; visibility: hidden; }

.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 31;
  display: flex;
  flex-direction: column;
  width: var(--drawer-width);
  max-width: 100%;
  background: var(--color-surface);
  border-inline-end: var(--border-width) solid var(--color-border);
  box-shadow: var(--shadow-lg);
  transform: translateX(-100%);
  transition: transform 200ms ease;
}

.drawer[data-open="true"] { transform: translateX(0); }

.drawer[data-open="false"] { visibility: hidden; transition: transform 200ms ease, visibility 0s 200ms; }

.drawer--end {
  inset-inline-start: auto;
  inset-inline-end: 0;
  border-inline-end: none;
  border-inline-start: var(--border-width) solid var(--color-border);
  transform: translateX(100%);
}

.drawer--end[data-open="true"] { transform: translateX(0); }

.drawer__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--header-height);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
}

.drawer__title {
  margin: 0;
  margin-right: auto;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

.drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-3);
}

.drawer__foot {
  flex: none;
  padding: var(--space-3);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  border-top: var(--border-width) solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Wer angemeldet ist und in welchem Haushalt gearbeitet wird. Steht als
   Erstes in der Schublade, über der Navigation — dort fällt es beim
   Öffnen ins Auge, ohne im Weg zu stehen.

   Keine Beschriftung davor: Wer seine eigene Adresse liest, weiß, dass
   er angemeldet ist, und wer den Namen des Haushalts liest, erkennt
   ihn — oder merkt, dass er im falschen sitzt. Beide Angaben stehen
   untereinander, weil eine Adresse keine Trennstellen hat. */
.drawer__identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  min-width: 0;
  margin: 0 0 var(--space-3);
  padding: 0 var(--space-3) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
}

.drawer__account {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}

.drawer__household {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* nav: die Linkliste in der Schublade */
.nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-base);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover) {
  .nav__link:hover { background: var(--color-surface-muted); text-decoration: none; }
}

.nav__link:active { background: var(--color-surface-muted); text-decoration: none; }

.nav__link:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: calc(var(--focus-offset) * -1); }

.nav__link--active { background: var(--color-primary-soft); color: var(--color-primary); font-weight: var(--weight-medium); }

.nav__text { min-width: 0; }