/* ============================================================
   muveup Facelift: Overlays
   Dialog, Toast, Menü/Popover, Benachrichtigungen (js/notification-center.js),
   Support-Widget (js/support-widget.js), Sprachumschalter (js/i18n.js),
   Seitenübergang (js/pwa-nav-transition.js), Pull-to-Refresh (js/pull-to-refresh.js), Splash (js/pwa-splash.js).
   Markup der bestehenden Skripte bleibt, nur das Styling ist neu.
   ============================================================ */

/* ================= Dialog (js/ui/dialog.js) ================= */
.mu-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: grid;
  place-items: center;
  padding: calc(var(--sp-4) + var(--safe-top)) var(--sp-4) calc(var(--sp-4) + var(--safe-bottom));
  background: var(--color-overlay);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mu-dialog-backdrop.is-open {
  opacity: 1;
}

.mu-dialog {
  --dialog-accent: var(--color-primary);
  position: relative;
  width: min(var(--dialog-w), 100%);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  box-shadow: var(--sh-3);
  color: var(--color-text);
  text-align: left;
  transform: scale(0.94) translateY(8px);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-pop), opacity var(--dur-base) var(--ease-out);
  outline: none;
}

.mu-dialog-backdrop.is-open .mu-dialog,
.mu-dialog-host.active .mu-dialog {
  transform: none;
  opacity: 1;
}

/* Ausgang kurz und ohne Überschwingen (MOTION M4) */
.mu-dialog-backdrop:not(.is-open, .active) {
  transition-duration: var(--dur-fast);
}

.mu-dialog-backdrop:not(.is-open, .active) .mu-dialog {
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-out);
}

/* Klangkreis als Speichern-Anzeige (F24t Punkt 140, js/ui/save-ring.js): Ring, Titel und ein Satz, mittig */
.mu-save-ring__box {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  text-align: center;
}

.mu-save-ring__box .mu-soundring { margin-bottom: var(--sp-2); }
.mu-save-ring__text { color: var(--color-text-muted); }

/* Feste Dialoge im Seiten-Markup: geöffnet per .active, Eingang über @starting-style, Ausgang über display */
.mu-dialog-host {
  display: none;
  transition: opacity var(--dur-fast) var(--ease-out), display var(--dur-fast) allow-discrete;
}

.mu-dialog-host.active {
  display: grid;
  opacity: 1;
  transition-duration: var(--dur-base);
}

@starting-style {
  .mu-dialog-host.active {
    opacity: 0;
  }

  .mu-dialog-host.active .mu-dialog {
    transform: scale(0.94) translateY(8px);
    opacity: 0;
  }
}

.mu-dialog--wide { width: min(560px, 100%); }
/* Langer Inhalt (Antwort auf eine Direktanfrage): Dialog scrollt in sich, statt über den Bildschirm zu wachsen */
.mu-dialog--scroll { max-height: calc(100dvh - 2 * var(--sp-6)); overflow-y: auto; overscroll-behavior: contain; }
.mu-dialog > .mu-spinner { margin-bottom: var(--sp-4); }
.mu-dialog--success { --dialog-accent: var(--color-success); }
.mu-dialog--error,
.mu-dialog--danger { --dialog-accent: var(--color-danger); }
.mu-dialog--warning,
.mu-dialog--orange { --dialog-accent: var(--color-accent); }

.mu-dialog__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
}

.mu-dialog__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-round);
  background: var(--dialog-accent);
  color: var(--color-text-on-brand);
}

.mu-dialog__icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
}

.mu-dialog__title {
  padding-right: var(--sp-8);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: var(--color-text);
}

.mu-dialog__body {
  margin-top: var(--sp-3);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.mu-dialog__body p + p {
  margin-top: var(--sp-2);
}

.mu-dialog__body > * + * {
  margin-top: var(--sp-3);
}

/* Nachricht des Teams im Dialog: Zeilenumbrüche bleiben, eigene Fläche */
.mu-dialog__note {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--color-surface-soft);
  color: var(--color-text);
  white-space: pre-line;
  text-align: left;
}

/* Formularfelder im Dialog, z. B. Gage und Nachricht zu einem Angebot */
.mu-dialog__form { text-align: left; }

/* Auswahl im Dialog, z. B. Grund einer Meldung */
.mu-dialog__choices {
  display: grid;
  gap: var(--sp-2);
}

.mu-dialog__choices label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--color-text);
}

.mu-dialog__field {
  margin-top: var(--sp-4);
}

.mu-dialog__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}

.mu-dialog__actions--single .mu-btn {
  min-width: 120px;
}

.mu-dialog__actions--stacked {
  flex-direction: column;
  align-items: stretch;
}

/* Mehrstufiger Dialog behält seine größte Höhe (Setlisten: Songs und Angaben), Knöpfe bleiben unten.
   Das Skript setzt --mu-dialog-min-h beim Schrittwechsel. */
.mu-dialog--keep-h {
  display: flex;
  flex-direction: column;
  min-height: min(var(--mu-dialog-min-h, 0px), calc(100dvh - 2 * var(--sp-4)));
}

.mu-dialog--keep-h > .mu-dialog__body {
  flex: 1 1 auto;
}

/* Messhilfe für .mu-dialog--keep-h: gleiche Breite wie der Dialog, nie sichtbar */
.mu-dialog-measure {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: inherit;
  visibility: hidden;
  pointer-events: none;
}

/* Besonderer Moment (Fixieren): mittig, größeres Symbol, Bewegung über .mu-moment in motion.css */
.mu-dialog--moment {
  text-align: center;
}

.mu-dialog--moment .mu-dialog__icon {
  width: 56px;
  height: 56px;
  margin-inline: auto;
}

.mu-dialog--moment .mu-dialog__icon svg {
  width: 28px;
  height: 28px;
}

.mu-dialog--moment .mu-dialog__title {
  padding-inline: var(--sp-8);
}

.mu-dialog--moment .mu-dialog__actions {
  justify-content: center;
}

/* Mobil: Bottom Sheet wie die Panels */
@media (max-width: 900px) {
  .mu-dialog-backdrop {
    place-items: end stretch;
    padding: var(--safe-top) 0 var(--keyboard-inset, 0px);
    overflow: hidden;
  }

  .mu-dialog {
    width: 100%;
    max-height: calc(100dvh - var(--safe-top) - var(--sp-6) - var(--keyboard-inset, 0px));
    padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + var(--safe-bottom));
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: var(--sh-sheet);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(100%);
    opacity: 1;
    transition: transform var(--dur-slow) var(--ease-spring);
  }

  .mu-dialog--wide { width: 100%; }

  .mu-dialog-backdrop:not(.is-open, .active) .mu-dialog {
    transition-duration: var(--dur-base);
  }

  @starting-style {
    .mu-dialog-host.active .mu-dialog {
      transform: translateY(100%);
      opacity: 1;
    }
  }

  .mu-dialog__actions .mu-btn {
    flex: 1 1 0;
    min-height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mu-dialog {
    transform: none;
  }

  @starting-style {
    .mu-dialog-host.active .mu-dialog {
      transform: none;
      opacity: 0;
    }
  }
}

/* Suche mit Trefferliste im Dialog, z. B. Namenssuche bekannter Musiker:innen */
.mu-pick { display: grid; gap: var(--sp-3); text-align: left; }
.mu-pick-list__list { display: grid; gap: var(--sp-1); max-height: 280px; overflow-y: auto; }
.mu-pick-list__empty { margin: 0; padding: var(--sp-3) 0; color: var(--color-text-subtle); font-size: var(--fs-small); font-style: italic; text-align: center; }

.mu-pick-list__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--color-text);
  text-decoration: none;
}

@media (hover: hover) {
  .mu-pick-list__row:hover { background: var(--color-surface-soft); }
}
.mu-pick-list__row[role="button"] { cursor: pointer; }
button.mu-pick-list__row { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
/* Gewählte Zeile (Einzelwahl, z. B. Musikschaffende im Event-Formular) */
.mu-pick-list__row[aria-pressed="true"] {
  background: var(--c-purple-10);
  box-shadow: inset 0 0 0 var(--bw) var(--color-primary);
}
.mu-pick-list__name { font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-pick-list__go { color: var(--color-accent-text); font-size: var(--fs-small); font-weight: var(--fw-medium); }
/* Zeile mit eigenem Hauptknopf und Menü (Favoritenlisten, js/master-favorite-lists-picker.js) */
.mu-pick-list__main { min-height: var(--tap-min); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mu-pick-list__row svg { width: 14px; height: 14px; vertical-align: middle; }
/* Menü, das frei über Dialogen steht (Lage per JS: top, left) */
.mu-menu.mu-menu--floating { position: fixed; right: auto; z-index: calc(var(--z-dialog) + 1); }

/* Für welches Event? (js/direct-offer-packages.js): laufende Events und „Neues Event“ als Zeilen */
.mu-event-choice__lead { margin: 0; }
.mu-event-choice__list { max-height: min(360px, 50dvh); }
.mu-event-choice__row { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 var(--bw) var(--color-border); }
.mu-event-choice__row--fresh { box-shadow: inset 0 0 0 var(--bw) var(--color-border-strong); }
.mu-event-choice__row.is-blocked { opacity: 0.6; }
.mu-event-choice__icon svg { width: 18px; height: 18px; }
.mu-event-choice__text { display: grid; gap: 2px; min-width: 0; }
.mu-event-choice__meta { font-size: var(--fs-micro); color: var(--color-text-subtle); }
.mu-event-choice__arrow { color: var(--color-text-subtle); }
.mu-event-choice__arrow svg { width: 12px; height: 12px; }
.mu-event-choice__notice { margin: 0; }

/* ================= Toast (js/ui/toast.js) ================= */
.mu-toast-region {
  position: fixed;
  top: calc(var(--topbar-h) + var(--safe-top) + var(--sp-3));
  left: 50%;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  width: min(480px, calc(100vw - 2 * var(--sp-4)));
  transform: translateX(-50%);
  pointer-events: none;
}

.mu-toast {
  --toast-accent: var(--color-primary);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 100%;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--color-surface);
  box-shadow: var(--sh-3);
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: 1.4;
  pointer-events: auto;
  transform: translateY(-16px) scale(0.98);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-pop), opacity var(--dur-base) var(--ease-out);
}

.mu-toast.is-visible {
  transform: none;
  opacity: 1;
}

.mu-toast.is-leaving {
  transform: translateY(-8px);
  opacity: 0;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-out);
}

.mu-toast--success { --toast-accent: var(--color-success); }
.mu-toast--error { --toast-accent: var(--color-danger); }
.mu-toast--warning { --toast-accent: var(--color-accent); }

.mu-toast__icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: var(--r-round);
  background: var(--toast-accent);
  color: var(--color-text-on-brand);
}

.mu-toast__icon svg {
  width: 14px;
  height: 14px;
}

.mu-toast__text {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: var(--sp-1);
}

.mu-toast__action {
  flex: none;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-pill);
  color: var(--color-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

@media (hover: hover) {
  .mu-toast__action:hover {
    background: var(--c-purple-10);
  }
}

.mu-toast__close {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: var(--r-round);
  color: var(--color-text-subtle);
}

@media (hover: hover) {
  .mu-toast__close:hover {
    background: var(--color-surface-muted);
    color: var(--color-text);
  }
}

.mu-toast__close svg {
  width: 12px;
  height: 12px;
}

@media (max-width: 900px) {
  .mu-toast-region {
    top: calc(var(--topbar-h-mobile) + var(--safe-top) + var(--sp-2));
  }

  .mu-toast {
    width: 100%;
    border-radius: var(--r-md);
  }
}

/* ================= Menü / Popover ================= */
.mu-popover-anchor {
  position: relative;
}

.mu-menu {
  position: absolute;
  top: calc(100% + var(--sp-2));
  right: 0;
  z-index: var(--z-popover);
  min-width: 240px;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  background: var(--color-surface);
  box-shadow: var(--sh-3);
  color: var(--color-text);
  transform-origin: top right;
  transform: scale(0.96) translateY(-4px);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}

.mu-menu.is-open {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-fast) var(--ease-out), visibility 0s;
}

.mu-menu__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-1);
  border-bottom: var(--bw) solid var(--color-surface-muted);
  min-width: 0;
}

.mu-menu__head-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.mu-menu__head-name {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mu-menu__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 40px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm-lg);
  color: var(--color-text);
  font-size: var(--fs-body-lg);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.mu-menu__lang {
  margin-left: auto;
  color: var(--color-text-subtle);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.mu-menu__lang .is-active {
  color: var(--color-primary);
}

.mu-menu__item:focus-visible {
  background: var(--color-surface-muted);
  box-shadow: none;
}

@media (hover: hover) {
  .mu-menu__item:hover {
    background: var(--color-surface-muted);
    box-shadow: none;
  }
}

.mu-menu__item svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-subtle);
  flex: none;
}

.mu-menu__item--danger {
  color: var(--color-danger-text);
}

.mu-menu__item--danger svg {
  color: currentColor;
}

.mu-menu__sep {
  height: 1px;
  margin: var(--sp-1) var(--sp-2);
  background: var(--color-surface-muted);
}

.mu-menu__item[aria-current="page"] {
  background: var(--c-purple-10);
  color: var(--color-primary);
}

.mu-menu__item-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: var(--sp-1) 0;
  line-height: var(--lh-base);
}

.mu-menu__item-sub {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.mu-menu__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  color: var(--color-primary);
}

.mu-menu__mark svg {
  color: currentColor;
}

/* Im Seitenkopf: klappt nach unten an der Knopfkante auf, auch mobil nicht am Fensterrand */
.mu-menu--inline {
  right: auto;
  left: 0;
  transform-origin: top left;
}

/* Über der Bottom-Nav: öffnet nach oben */
.mu-menu--up {
  top: auto;
  bottom: calc(100% + var(--sp-2));
  transform-origin: bottom right;
}

/* In Karten: schmal, damit es in der Karte bleibt (Optionen an der Musikerkarte) */
.mu-menu--compact {
  min-width: 160px;
}

@media (max-width: 900px) {
  .mu-menu:not(.mu-menu--inline):not(.mu-menu--up) {
    position: fixed;
    top: calc(var(--topbar-h-mobile) + var(--safe-top) + var(--sp-2));
    right: var(--sp-3);
    left: auto;
    width: min(320px, calc(100vw - 2 * var(--sp-3)));
  }

  .mu-menu--inline {
    width: min(320px, calc(100vw - 2 * var(--sp-5)));
  }
}

/* Profilwechsel im Seitenkopf (js/ui/profile-picker.js) */
.mu-profile-pick {
  width: max-content;
  max-width: min(360px, 70vw);
  margin: var(--sp-1) 0 0 calc(-1 * var(--sp-2));
}

.mu-profile-pick__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  max-width: 100%;
  min-height: var(--tap-min);
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm-lg);
  color: var(--color-accent);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.mu-profile-pick__btn[aria-expanded="true"] {
  background: var(--color-surface-muted);
}

@media (hover: hover) {
  .mu-profile-pick__btn:hover {
    background: var(--color-surface-muted);
  }
}

.mu-profile-pick__btn svg {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.mu-profile-pick__btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.mu-profile-pick__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ================= Sprachumschalter (.muveup-lang-toggle aus js/i18n.js) ================= */
.mu-topbar .muveup-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 30px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  color: rgb(var(--c-white-rgb) / 0.6);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease-out);
}

/* Am Handy steht die Sprache im Menü, angemeldet wie abgemeldet */
@media (max-width: 900px) {
  .mu-topbar--account .muveup-lang-toggle,
  .mu-topbar--guest .muveup-lang-toggle {
    display: none;
  }
}

/* Klicken zeigt keinen Rahmen und keine Fläche, nur die Schrift wird heller. Tastatur: Ring über :focus-visible */
@media (max-width: 350px) {
  .mu-topbar .muveup-lang-toggle {
    padding: 0 var(--sp-1);
  }
}

@media (hover: hover) {
  .mu-topbar .muveup-lang-toggle:hover {
    color: var(--color-text-on-brand);
  }
}

.mu-topbar .muveup-lang-toggle:focus-visible {
  box-shadow: 0 0 0 2px var(--color-text-on-brand);
  border-radius: var(--r-pill);
}

.mu-topbar .muveup-lang-toggle [data-part].is-active {
  color: var(--color-text-on-brand);
}

.mu-topbar .muveup-lang-toggle__sep {
  opacity: 0.5;
}

/* ================= Benachrichtigungen: Popover, mobil Inhalt des Bottom Sheets (js/notification-center.js) ================= */
.mu-notif-pop {
  position: absolute;
  top: calc(100% + var(--sp-2));
  right: calc(-1 * var(--sp-2));
  z-index: var(--z-popover);
  display: flex;
  flex-direction: column;
  width: 400px;
  max-height: min(560px, calc(100dvh - var(--topbar-h) - var(--sp-8)));
  border-radius: var(--r-lg);
  background: var(--color-surface);
  box-shadow: var(--sh-3);
  color: var(--color-text);
  overflow: hidden;
  transform-origin: top right;
  transform: scale(0.96) translateY(-4px);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}

.mu-notif-pop.is-open {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-fast) var(--ease-out), visibility 0s;
}

.mu-notif-pop:focus {
  outline: none;
  box-shadow: var(--sh-3);
}

.mu-notif-pop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);
  border-bottom: var(--bw) solid var(--color-surface-muted);
}

.mu-notif-pop__title {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
}

.mu-notif-pop__actions {
  display: flex;
  gap: var(--sp-1);
}

.mu-notif-pop__actions .mu-btn {
  gap: var(--sp-1);
  padding: 0 var(--sp-2);
}

.mu-notif-pop__actions svg {
  width: 16px;
  height: 16px;
}

.mu-notif-pop__list {
  flex: 1;
  min-height: 120px;
  padding: var(--sp-2);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mu-notif-pop__state {
  padding: var(--sp-6) var(--sp-4);
}

.mu-notif-pop__foot {
  padding: var(--sp-2) var(--sp-5);
  border-top: var(--bw) solid var(--color-surface-muted);
  font-size: var(--fs-micro);
  color: var(--color-text-subtle);
  text-align: center;
}

.mu-panel .mu-notif-pop {
  position: static;
  width: auto;
  max-height: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: none;
}

.mu-panel .mu-notif-pop__title {
  display: none;
}

.mu-panel .mu-notif-pop__head {
  justify-content: flex-end;
  padding: 0 0 var(--sp-2);
  border-bottom: 0;
}

.mu-panel .mu-notif-pop__list {
  padding: 0;
  overflow: visible;
}

.mu-panel .mu-notif-pop__foot {
  padding: var(--sp-3) 0 0;
  border-top: 0;
}

/* ================= Support-Knopf (js/support-widget.js), der Dialog ist MuveupDialog =================
   Steht im Fluss direkt vor dem Footer und kann ihn deshalb nie überdecken. Ab 1200 px liegt rechts
   genug Rand, dort läuft er mit (sticky). Darunter steht er fest über dem Footer und verdeckt beim
   Scrollen keinen Inhalt. Mit Sidebar oder Bottom-Nav entfällt er, Hilfe steht dort in der Navigation. */
.mu-support-dock {
  display: flex;
  justify-content: flex-end;
  padding: 0 calc(var(--sp-4) + var(--safe-right)) var(--sp-3);
  pointer-events: none;
}

.mu-support-fab {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-round);
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--sh-3);
  pointer-events: auto;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .mu-support-fab:hover {
    background: var(--c-purple-100);
  }
}

.mu-support-fab:active {
  transform: scale(var(--press-scale));
}

.mu-support-fab svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

@media (min-width: 1200px) {
  .mu-support-dock {
    position: sticky;
    bottom: calc(var(--sp-5) + var(--safe-bottom));
    z-index: calc(var(--z-topbar) - 1);
    align-items: flex-end;
    height: 0;
    padding: 0 calc(var(--sp-5) + var(--safe-right)) 0 0;
  }
}

@media (min-width: 901px) {
  .mu-app.has-mu-sidebar .mu-support-dock {
    display: none;
  }
}

@media (max-width: 900px) {
  .mu-app.has-mu-bottom-nav .mu-support-dock {
    display: none;
  }
}

/* ================= Cookie-Fenster (js/cookie-consent.js) auf App-Seiten: .mu-dialog mit Klangkreis ================= */
.mu-cookie__plate {
  width: 64px;
  height: 64px;
  background: none;
}

.mu-cookie__plate svg { width: 100%; height: 100%; }
.mu-cookie__options { margin-top: var(--sp-4); text-align: left; }

/* ================= Pull-to-Refresh (js/pull-to-refresh.js) ================= */
@media (max-width: 900px) {
  html.muveup-ptr-enabled:has(body.mu-app),
  html.muveup-ptr-enabled body.mu-app {
    overscroll-behavior-y: contain;
  }

  html.muveup-ptr-pulling .mu-app .muveup-ptr-content,
  .mu-app .muveup-ptr-content.muveup-ptr-anim {
    will-change: transform;
  }

  .mu-app .muveup-ptr-content.muveup-ptr-anim {
    transition: transform var(--dur-slow) var(--ease-spring);
  }
}

.mu-app .muveup-ptr {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--muveup-header-height, var(--topbar-h-mobile));
  z-index: calc(var(--z-topbar) - 1);
  display: flex;
  justify-content: center;
  padding-top: var(--sp-3);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}

.mu-app .muveup-ptr.is-visible,
.mu-app .muveup-ptr.is-refreshing {
  opacity: 1;
  transform: none;
}

.mu-app .muveup-ptr__spinner {
  width: 36px;
  height: 36px;
  border-radius: var(--r-round);
  border: 3px solid var(--c-purple-20);
  border-top-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: var(--sh-3);
  transition: transform 80ms linear;
}

.mu-app .muveup-ptr.is-pulling .muveup-ptr__spinner {
  transform: rotate(var(--muveup-ptr-rotate, 0deg));
}

.mu-app .muveup-ptr.is-refreshing .muveup-ptr__spinner {
  transition: none;
  animation: mu-spin 0.85s linear infinite;
}

@keyframes mu-spin {
  to { transform: rotate(360deg); }
}

/* ================= Splash (js/pwa-splash.js) =================
   Läuft nur auf pwa-start.html und login.html. Die Zeiten hängen an den Konstanten in js/pwa-splash.js:
   Einstieg 0.4s (SPLASH_INTRO_MS), ein Herzschlag 0.75s (HEARTBEAT_CYCLE_MS), Welle bis 0.75s nach dem Ausgang (EXIT_REVEAL_MS), Ausblenden 0.18s (EXIT_FADE_MS).
   Farben: Lila-Fläche, oranger Punkt, die Welle wird hell, darauf die Wortmarke in Lila. */
html.muveup-pwa-splash-active #loginForm {
  visibility: hidden;
  pointer-events: none;
}

html.muveup-pwa-splash-active,
html.muveup-pwa-splash-active body {
  background: var(--c-purple);
}

html.muveup-pwa-splash-exiting,
html.muveup-pwa-splash-exiting body {
  background: var(--color-bg);
  transition: background-color 0.45s ease;
}

#muveup-pwa-splash {
  --splash-dot-hero-size: min(68vw, 280px);
  --splash-dot-logo-size: 0.30em;
  --splash-dot-nudge-y-hero: 0.06em;
  --splash-dot-nudge-y-logo: 0.14em;
  --splash-word-nudge-x: 0.1em;
  --splash-word-nudge-y: -0.1em;
  --splash-dot-color: var(--c-orange);
  --splash-dot-glow: var(--c-orange-rgb);
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-purple);
  overflow: hidden;
  pointer-events: none;
}

/* Master: Logo ohne Kreis auf Schwarz */
#muveup-pwa-splash.is-master-brand {
  --splash-dot-color: transparent;
  --splash-dot-glow: var(--c-black-rgb);
  --splash-master-logo-scale: 1;
}

#muveup-pwa-splash.is-master-brand:not(.is-exiting) .muveup-pwa-splash-dot {
  box-shadow: none !important;
}

.muveup-pwa-splash-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(28px, 8vw, 42px);
  line-height: 1;
}

#muveup-pwa-splash:not(.is-exiting) .muveup-pwa-splash-brand {
  position: relative;
  width: var(--splash-dot-hero-size);
  height: var(--splash-dot-hero-size);
}

.muveup-pwa-splash-word {
  color: var(--c-purple);
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  will-change: transform, opacity, max-width, filter;
}

.muveup-pwa-splash-word--left,
.muveup-pwa-splash-word--right {
  white-space: nowrap;
}

#muveup-pwa-splash:not(.is-exiting) .muveup-pwa-splash-word {
  visibility: hidden;
  width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

#muveup-pwa-splash:not(.is-pulse-complete):not(.is-exiting) .muveup-pwa-splash-word {
  animation: muveupWordTeaser 0.75s ease-in-out 0.4s 1;
}

.muveup-pwa-splash-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--splash-dot-hero-size);
  height: var(--splash-dot-hero-size);
  border-radius: 50%;
  background: var(--splash-dot-color);
  transform-origin: center center;
  will-change: transform, opacity, width, height, filter, box-shadow;
}

.muveup-pwa-splash-dot-letter {
  color: var(--c-white);
  font-family: inherit;
  font-weight: 600;
  font-size: calc(var(--splash-dot-hero-size) * 0.38);
  line-height: 1;
  transform: translateY(-0.03em);
  user-select: none;
  pointer-events: none;
  opacity: 0;
}

#muveup-pwa-splash:not(.is-exiting) .muveup-pwa-splash-dot-letter {
  animation: muveupDotLetterIntro 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#muveup-pwa-splash.is-exiting .muveup-pwa-splash-dot-letter {
  opacity: 0;
  visibility: hidden;
  animation: none;
}

/* Nur Master-Profil: Logo-PNG ohne Kreis (nicht das weiße „m“) */
#muveup-pwa-splash.is-master-brand .muveup-pwa-splash-dot-logo {
  width: calc(var(--splash-dot-hero-size) * var(--splash-master-logo-scale));
  height: calc(var(--splash-dot-hero-size) * var(--splash-master-logo-scale));
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  opacity: 0;
}

#muveup-pwa-splash.is-master-brand:not(.is-exiting) .muveup-pwa-splash-dot-logo {
  animation: muveupDotLetterIntro 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#muveup-pwa-splash.is-exiting .muveup-pwa-splash-dot-logo {
  opacity: 0;
  visibility: hidden;
  animation: none;
}

#muveup-pwa-splash:not(.is-exiting) .muveup-pwa-splash-dot {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--splash-dot-nudge-y-hero));
  margin: 0;
  animation:
    muveupDotIntro 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    muveupHeartbeat 0.75s ease-in-out 0.4s infinite;
}

#muveup-pwa-splash.is-pulse-complete:not(.is-exiting) .muveup-pwa-splash-dot {
  animation: none;
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 0 48px rgb(var(--splash-dot-glow) / 0.35);
}

#muveup-pwa-splash.is-exiting.is-master-brand .muveup-pwa-splash-dot {
  background: var(--c-orange);
  --splash-dot-glow: var(--c-orange-rgb);
}

/* Impulswelle Schwarz auf Weiß aus der Punktmitte: weiche weiße Fläche, oranger Schimmer am Kamm, leises Echo */
#muveup-pwa-splash.is-exiting {
  animation: muveupSplashBgWhite 0.01s linear 0.72s forwards;
}

#muveup-pwa-splash.is-exiting::before,
#muveup-pwa-splash.is-exiting::after,
#muveup-pwa-splash.is-exiting .muveup-pwa-splash-ripple {
  content: '';
  position: absolute;
  z-index: 0;
  /* Dort, wo der Punkt pulsiert hat */
  left: 50%;
  top: calc(50% + var(--splash-dot-nudge-y-hero));
  /* Groß genug, dass auch die weiche Kante über die entfernteste Ecke kommt, aber nicht größer, sonst rast sie durchs Bild */
  width: 190vmax;
  height: 190vmax;
  margin: -95vmax 0 0 -95vmax;
  border-radius: 50%;
  transform: scale(0);
  will-change: transform, opacity;
  pointer-events: none;
}

#muveup-pwa-splash.is-exiting::before {
  /* Innen reines Weiß, breite weiche Kante über Warmweiß ins Transparente */
  background: radial-gradient(
    circle closest-side,
    var(--color-bg) 0%,
    var(--color-bg) 78%,
    var(--c-cream) 88%,
    rgb(var(--c-cream-rgb) / 0.55) 94%,
    rgb(var(--c-cream-rgb) / 0) 100%
  );
  animation: muveupWave 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}

#muveup-pwa-splash.is-exiting::after {
  /* Warmer oranger Schimmer genau auf der weichen Kante, kein harter Ring */
  background: radial-gradient(
    circle closest-side,
    rgb(var(--c-orange-glow-rgb) / 0) 80%,
    rgb(var(--c-orange-glow-rgb) / 0.32) 91%,
    rgb(var(--c-orange-glow-rgb) / 0.16) 96%,
    rgb(var(--c-orange-glow-rgb) / 0) 100%
  );
  animation:
    muveupWave 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards,
    muveupWaveRingFade 0.65s linear 0.1s forwards;
}

.muveup-pwa-splash-ripple {
  display: none;
}

/* Echo läuft hinter dem Kamm über das Weiß, daher ein sehr heller Grauton */
#muveup-pwa-splash.is-exiting .muveup-pwa-splash-ripple {
  display: block;
  background: radial-gradient(
    circle closest-side,
    rgb(var(--c-black-rgb) / 0) 90%,
    rgb(var(--c-black-rgb) / 0.04) 97%,
    rgb(var(--c-black-rgb) / 0) 100%
  );
  animation:
    muveupWaveRing 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.18s forwards,
    muveupWaveRingFade 0.65s linear 0.18s forwards;
}

#muveup-pwa-splash.is-exiting.is-exiting-fade {
  opacity: 0;
  transition: opacity 0.18s ease-out;
}

#muveup-pwa-splash.is-exiting .muveup-pwa-splash-brand {
  width: auto;
  height: auto;
}

#muveup-pwa-splash.is-exiting .muveup-pwa-splash-dot {
  position: static;
  left: auto;
  top: auto;
  margin-top: var(--splash-dot-nudge-y-logo);
  animation: muveupDotSettle 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Master pulsiert nur mit dem Logo: kein großer oranger Kreis beim Exit, der Punkt erscheint direkt klein in der Wortmarke */
#muveup-pwa-splash.is-exiting.is-master-brand .muveup-pwa-splash-dot {
  width: var(--splash-dot-logo-size);
  height: var(--splash-dot-logo-size);
  box-shadow: none;
  opacity: 0;
  animation: muveupDotLetterIntro 0.3s ease-out 0.28s forwards;
}

#muveup-pwa-splash.is-exiting .muveup-pwa-splash-word {
  visibility: visible;
  animation: none;
}

#muveup-pwa-splash.is-exiting .muveup-pwa-splash-word--left {
  max-width: none;
  overflow: visible;
  animation: muveupWordRevealLeft 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.28s forwards;
}

#muveup-pwa-splash.is-exiting .muveup-pwa-splash-word--right {
  max-width: none;
  overflow: visible;
  animation: muveupWordRevealRight 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.32s forwards;
}

@keyframes muveupWave {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

/* Nur zwei Keyframes, sonst wirkt die Easing-Kurve je Abschnitt und der Ring läuft der Fläche davon */
@keyframes muveupWaveRing {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1.04);
  }
}

@keyframes muveupWaveRingFade {
  0%,
  55% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes muveupSplashBgWhite {
  to {
    background: var(--color-bg);
  }
}

@keyframes muveupDotLetterIntro {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes muveupDotIntro {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    filter: brightness(1.15);
    box-shadow: 0 0 0 rgb(var(--splash-dot-glow) / 0);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1);
    box-shadow: 0 0 48px rgb(var(--splash-dot-glow) / 0.35);
  }
}

@keyframes muveupHeartbeat {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1);
    box-shadow: 0 0 48px rgb(var(--splash-dot-glow) / 0.35);
  }
  12% {
    transform: translate(-50%, -50%) scale(1.22);
    filter: brightness(1.08);
    box-shadow: 0 0 64px rgb(var(--splash-dot-glow) / 0.5);
  }
  24% {
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1);
    box-shadow: 0 0 48px rgb(var(--splash-dot-glow) / 0.35);
  }
  36% {
    transform: translate(-50%, -50%) scale(1.1);
    filter: brightness(1.04);
    box-shadow: 0 0 56px rgb(var(--splash-dot-glow) / 0.42);
  }
  48% {
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1);
    box-shadow: 0 0 48px rgb(var(--splash-dot-glow) / 0.35);
  }
}

@keyframes muveupWordTeaser {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 0.12;
  }
}

@keyframes muveupDotSettle {
  from {
    width: var(--splash-dot-hero-size);
    height: var(--splash-dot-hero-size);
    transform: none;
    box-shadow: 0 0 48px rgb(var(--splash-dot-glow) / 0.35);
    filter: brightness(1);
  }
  to {
    width: var(--splash-dot-logo-size);
    height: var(--splash-dot-logo-size);
    transform: none;
    box-shadow: none;
    filter: brightness(1);
  }
}

@keyframes muveupWordRevealLeft {
  from {
    opacity: 0;
    transform: translateX(-12%) scale(0.94);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translate(calc(-1 * var(--splash-word-nudge-x)), var(--splash-word-nudge-y)) scale(1);
    filter: blur(0);
  }
}

@keyframes muveupWordRevealRight {
  from {
    opacity: 0;
    transform: translateX(12%) scale(0.94);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translate(var(--splash-word-nudge-x), var(--splash-word-nudge-y)) scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #muveup-pwa-splash {
    background: var(--color-bg);
    transition: none;
  }

  html.muveup-pwa-splash-active,
  html.muveup-pwa-splash-active body {
    background: var(--color-bg);
  }

  #muveup-pwa-splash:not(.is-pulse-complete):not(.is-exiting) .muveup-pwa-splash-word {
    animation: none;
  }

  #muveup-pwa-splash:not(.is-exiting) .muveup-pwa-splash-brand {
    width: auto;
    height: auto;
  }

  #muveup-pwa-splash:not(.is-exiting) .muveup-pwa-splash-word {
    visibility: visible;
    width: auto;
  }

  .muveup-pwa-splash-dot {
    position: static;
    width: var(--splash-dot-logo-size);
    height: var(--splash-dot-logo-size);
    margin-top: var(--splash-dot-nudge-y-logo);
    transform: none;
    animation: none;
    box-shadow: none;
    filter: none;
  }

  .muveup-pwa-splash-dot-letter {
    display: none;
  }

  .muveup-pwa-splash-dot-logo {
    display: none;
  }

  #muveup-pwa-splash.is-master-brand .muveup-pwa-splash-dot {
    background: var(--c-orange);
  }

  .muveup-pwa-splash-word {
    opacity: 1;
    max-width: none;
    overflow: visible;
    filter: none;
  }

  .muveup-pwa-splash-word--left {
    transform: translate(calc(-1 * var(--splash-word-nudge-x)), var(--splash-word-nudge-y));
  }

  .muveup-pwa-splash-word--right {
    transform: translate(var(--splash-word-nudge-x), var(--splash-word-nudge-y));
  }

  #muveup-pwa-splash.is-exiting .muveup-pwa-splash-dot {
    width: var(--splash-dot-logo-size);
    height: var(--splash-dot-logo-size);
    animation: none;
    box-shadow: none;
  }

  #muveup-pwa-splash.is-exiting .muveup-pwa-splash-word--left,
  #muveup-pwa-splash.is-exiting .muveup-pwa-splash-word--right {
    animation: none;
    opacity: 1;
    filter: none;
  }

  #muveup-pwa-splash.is-exiting {
    animation: none;
    transition: opacity 0.2s ease-out;
  }

  #muveup-pwa-splash.is-exiting::before,
  #muveup-pwa-splash.is-exiting::after {
    content: none;
    animation: none;
  }

  #muveup-pwa-splash.is-exiting .muveup-pwa-splash-ripple {
    display: none;
  }

  #muveup-pwa-splash.is-exiting.is-master-brand .muveup-pwa-splash-dot {
    opacity: 1;
    animation: none;
  }
}

/* ================= Alt-Knopf .popup-button (noch außerhalb von Dialogen) ================= */
:where(.popup-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h, 40px);
  padding: 0 var(--sp-5);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--color-primary);
  color: var(--color-text-on-brand);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
:where(.popup-button):active { transform: scale(var(--press-scale, 0.97)); }
:where(.popup-button):disabled { opacity: 0.6; cursor: progress; }
:where(.popup-button.btn-secondary) { background: var(--color-surface-muted); color: var(--color-text); }
:where(.popup-button.btn-orange) { background: var(--color-accent); color: var(--color-text-on-brand); }
:where(.popup-button.btn-danger) { background: var(--color-danger); color: var(--color-text-on-brand); }

/* ================= Hinweis „als App“ (js/pwa-install-hint.js) ================= */
.pwa-install-short-steps {
  background: var(--c-cream);
  border-radius: var(--r-sm-lg);
  padding: 10px 12px;
  margin-bottom: 16px;
  color: var(--c-ink);
  font-size: var(--fs-body-lg);
  line-height: 1.6;
}

.pwa-install-inline-icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.25em;
  color: var(--c-orange);
}