.app-nav {
  position: fixed;
  top: 1rem;
  right: 1rem;                 /* oben rechts */
  z-index: 999;
  display: flex;
  flex-direction: row-reverse; /* Button rechts, Liste links */
  align-items: flex-start;
  gap: .5rem;
  font-size: .85rem;
}

/* Runder Button */
.app-nav-toggle {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,.25);
  background: rgba(37,99,235,.08);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--primary);
}
.app-nav-toggle:hover { background: rgba(37,99,235,.15); }
.app-nav-toggle svg { width: 20px; height: 20px; }

/* Liste ist standardmäßig VERSTECKT */
.app-nav-list {
  display: none;               /* wichtig */
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  padding: .4rem 0;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  min-width: 180px;
  margin-right: .5rem;
  transform-origin: top right;
}
.app-nav.open .app-nav-list {  /* wird per JS geöffnet */
  display: block;
}

.app-nav-list li { list-style: none; }
.app-nav-list a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .8rem;
  text-decoration: none;
  color: #111827;
  border-left: 3px solid transparent;
}
.app-nav-list a:hover {
  background: rgba(37,99,235,.06);
  border-left-color: rgba(37,99,235,1);
}
.app-nav-list a svg { width: 16px; height: 16px; color: #1f2937; }

.app-nav-list a.is-active {
  background: rgba(37,99,235,.08);
  border-left-color: rgba(37,99,235,1);
  font-weight: 600;
}

@media (max-width: 720px) {
  .app-nav { top: .5rem; right: .5rem; }
  .app-nav-list { min-width: 160px; }
}
/* Menü-Button an Seitenhintergrund anpassen (keine weiße Kachel) */
.app-nav-toggle{
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Falls der Button in einer weißen Karte steckt: */
.app-nav { background: transparent; }

/* Kleine Buttons */
.btn-sm{
  padding: 6px 10px;
  font-size: .9rem;
  border-radius: 10px;
}

/* E-Mail-Feld ohne Symbol: Platz links entfernen */
.field .field-icon { display:none; }
.field input[type="email"],
.field input[type="password"]{ padding-left:12px; }

/* Kollaps fix: sichtbaren Zustand erzwingen */
/* Neu: kein display:none mehr – wir steuern nur die Höhe */
.collapsible-content{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .35s ease, opacity .25s ease;
  will-change: max-height, opacity;
}
.collapsible-content.open{
  /* max-height wird per JS auf die tatsächliche Höhe gesetzt */
  opacity: 1;
}


.collapsible-header{
  cursor:pointer; user-select:none; font-weight:500; margin-bottom:6px;
}
.collapsible-header::after{
  content:"▼"; font-size:.8em; margin-left:6px; transition: transform .3s ease;
}
.collapsible-header.open::after{ transform: rotate(-180deg); }