/* ============================================================
   muveup Facelift: Komponenten
   Buttons, Eingaben, Chips, Tags, Karten, Kacheln, Tabs, Listen, Avatare, Bildrahmen, Leerzustände.
   Nur Tokens aus css/tokens.css. Präfix mu- trennt vom Alt-CSS.
   ============================================================ */

/* ================= Buttons ================= */
.mu-btn {
  --btn-bg: var(--color-primary);
  --btn-bg-hover: var(--color-primary-hover);
  --btn-fg: var(--color-text-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  padding: 0 var(--sp-5);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.mu-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

@media (hover: hover) {
  .mu-btn:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--btn-bg-hover);
  }
}

.mu-btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: scale(var(--press-scale));
}

.mu-btn:focus-visible {
  box-shadow: var(--focus-ring);
  border-radius: var(--r-pill);
}

.mu-btn:disabled,
.mu-btn[aria-disabled="true"] {
  --btn-bg: var(--color-disabled);
  --btn-bg-hover: var(--color-disabled);
  --btn-fg: var(--color-text-on-brand);
  cursor: not-allowed;
}

.mu-btn--lg {
  min-height: var(--control-h-lg);
  min-width: 180px;
  padding: 0 var(--sp-6);
  font-size: var(--fs-body-lg);
}

.mu-btn--sm {
  min-width: 92px;
}

.mu-btn--block {
  display: flex;
  width: 100%;
}

.mu-btn--accent {
  --btn-bg: var(--color-accent);
  --btn-bg-hover: var(--color-accent-hover);
  font-weight: var(--fw-medium);
}

.mu-btn--secondary {
  --btn-bg: var(--color-surface);
  --btn-bg-hover: var(--color-surface-muted);
  --btn-fg: var(--color-text-muted);
  font-weight: var(--fw-regular);
}

.mu-btn--outline {
  --btn-bg: var(--color-surface);
  --btn-bg-hover: var(--c-purple-10);
  --btn-fg: var(--color-primary);
  box-shadow: inset 0 0 0 var(--bw) var(--color-primary);
}

.mu-btn--danger {
  --btn-bg: var(--color-danger);
  --btn-bg-hover: var(--c-danger-hover);
}

.mu-btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-fg: var(--color-text-muted);
  min-height: auto;
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
}

@media (hover: hover) {
  .mu-btn--ghost:hover:not(:disabled) {
    text-decoration: underline;
  }
}

/* Zurückhaltende Gefahr-Aktion (Löschen in Listen) */
.mu-btn--ghost.mu-btn--danger {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-fg: var(--color-danger-text);
}

.mu-btn--link {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-fg: var(--color-primary);
  min-height: auto;
  padding: 0;
  font-weight: var(--fw-medium);
}

@media (hover: hover) {
  .mu-btn--link:hover:not(:disabled) {
    text-decoration: underline;
  }
}

/* Laden: js/button-loading-utils.js setzt .muveup-btn-loading plus Ring und Text */
.mu-btn.muveup-btn-loading {
  position: relative;
  min-width: var(--muveup-btn-min-width, auto);
  min-height: var(--muveup-btn-min-height, var(--control-h));
  pointer-events: none;
  transform: none;
}

.mu-btn .muveup-btn-loading-ring {
  width: 14px;
  height: 14px;
  border-radius: var(--r-round);
  border: 2px solid rgb(var(--c-white-rgb) / 0.35);
  border-top-color: currentColor;
  animation: mu-spin 0.8s linear infinite;
  flex: none;
}

.mu-btn .muveup-btn-loading-face {
  display: inline-block;
}

.mu-btn--secondary .muveup-btn-loading-ring,
.mu-btn--outline .muveup-btn-loading-ring {
  border-color: var(--c-purple-20);
  border-top-color: var(--color-primary);
}

/* Nachbar-Buttons, solange einer lädt */
.muveup-btn-loading-peer {
  pointer-events: none;
  opacity: 0.4;
  cursor: not-allowed;
}

/* Spinner für Buttons ohne Utility */
.mu-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: var(--r-round);
  border: 2px solid rgb(var(--c-white-rgb) / 0.35);
  border-top-color: currentColor;
  animation: mu-spin 0.8s linear infinite;
}

/* ================= Icon-Knöpfe ================= */
.mu-icon-btn {
  --ib-bg: var(--color-accent);
  --ib-fg: var(--color-text-on-brand);
  display: inline-grid;
  place-items: center;
  width: var(--icon-btn);
  height: var(--icon-btn);
  flex: none;
  border-radius: var(--r-round);
  background: var(--ib-bg);
  color: var(--ib-fg);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.mu-icon-btn svg {
  width: 20px;
  height: 20px;
}

.mu-icon-btn:active:not(:disabled) {
  transform: scale(var(--press-scale-sm));
}

.mu-icon-btn:focus-visible {
  border-radius: var(--r-round);
}

.mu-icon-btn:disabled {
  --ib-bg: var(--color-disabled);
}

.mu-icon-btn--primary { --ib-bg: var(--color-primary); }
.mu-icon-btn--light { --ib-bg: var(--color-surface); --ib-fg: var(--color-accent); }
.mu-icon-btn--plain { --ib-bg: transparent; --ib-fg: var(--color-text); }
@media (hover: hover) {
  .mu-icon-btn--plain:hover { --ib-bg: var(--color-surface-muted); }
}
.mu-icon-btn--danger { --ib-fg: var(--color-danger-text); }
.mu-icon-btn--sm { width: 30px; height: 30px; }
.mu-icon-btn--sm svg { width: 16px; height: 16px; }
.mu-icon-btn--xs { width: 18px; height: 18px; --ib-bg: var(--color-border-strong); }
.mu-icon-btn--xs svg { width: 12px; height: 12px; }

/* Schließen: 40 px Kreis lila mit weißem × */
.mu-close {
  display: inline-grid;
  place-items: center;
  width: var(--icon-btn);
  height: var(--icon-btn);
  flex: none;
  border-radius: var(--r-round);
  background: var(--color-primary);
  color: var(--color-text-on-brand);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.mu-close::before {
  content: '';
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (hover: hover) {
  .mu-close:hover { background: var(--color-primary-hover); }
}
.mu-close:active { transform: scale(var(--press-scale-sm)); }
.mu-close:focus-visible { border-radius: var(--r-round); }
.mu-close--sm { width: 32px; height: 32px; }
.mu-close--sm::before { width: 13px; height: 13px; }

/* ================= Formulare ================= */
.mu-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.mu-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  color: var(--color-text);
}

.mu-label svg {
  width: 14px;
  height: 14px;
  color: var(--color-text-strong);
  flex: none;
}

.mu-label__req {
  color: var(--color-danger-text);
  margin-left: 2px;
}

/* Sternchen bleibt am letzten Wort (F24t Punkt 136): Wortverbinder vor dem Zeichen, kein Umbruch dazwischen */
.mu-label__req::before { content: "\2060"; }

.mu-hint {
  font-size: var(--fs-small);
  color: var(--color-text-subtle);
}

/* Pillen als Ganzes klickbar, etwa bisherige Angaben zum Ändern (F24t Punkt 91) */
.mu-chips[role="button"] { cursor: pointer; border-radius: var(--r-sm); }
.mu-chips[role="button"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Medien ganz statt zugeschnitten (F24t Punkt 103, js/ui/media-fit.js): Bild oder Video mit contain, dahinter eine weich
   verschwommene, abgedunkelte Kopie. Die Kachel braucht position und overflow hidden, isolation hält die Kopie hinter dem Inhalt */
/* Keine eigene Fläche: bis das Bild da ist, bleibt die helle Fläche der Kachel stehen wie bei jedem Skelett */
.mu-media-fit { isolation: isolate; }
.mu-media-fit > .mu-media-fit__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: blur(16px) brightness(0.55); transform: scale(1.15); pointer-events: none; }
.mu-media-fit > .mu-media-fit__bg[hidden] { display: none; }
.mu-media-fit.mu-media-fit > img:not(.mu-media-fit__bg),
.mu-media-fit.mu-media-fit > video:not(.mu-media-fit__bg) { object-fit: contain; object-position: center; }

.mu-input,
.mu-select,
.mu-textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--sp-3);
  border: var(--bw) solid transparent;
  border-radius: var(--r-sm);
  background: var(--color-surface-input);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  appearance: none;
  -webkit-appearance: none;
}

.mu-input--soft,
.mu-textarea {
  background: var(--color-surface-soft);
}

.mu-input--center {
  text-align: center;
}

.mu-textarea {
  min-height: 120px;
  padding: var(--sp-3);
  border-radius: var(--r-sm-lg);
  line-height: var(--lh-message);
  resize: vertical;
}

@media (hover: hover) {
  .mu-input:hover:not(:disabled),
  .mu-select:hover:not(:disabled),
  .mu-textarea:hover:not(:disabled) {
    border-color: var(--color-border);
  }
}

/* Felder auf grauen Flächen sind weiß, sonst sind sie nicht als Feld erkennbar (Figma kennt beides, F24a) */
:is(.mu-accordion__item, .mu-on-grey) :is(.mu-input, .mu-select, .mu-textarea):not(:disabled) {
  background-color: var(--color-surface);
}

.mu-input:focus-visible,
.mu-select:focus-visible,
.mu-textarea:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px var(--c-purple-20);
  border-radius: var(--r-sm);
}

.mu-textarea:focus-visible {
  border-radius: var(--r-sm-lg);
}

.mu-input:disabled,
.mu-select:disabled,
.mu-textarea:disabled {
  border-color: transparent;
  background-color: var(--color-surface-muted);
  color: var(--color-text-placeholder);
  cursor: not-allowed;
}

.mu-select {
  padding-right: var(--sp-8);
  border-radius: var(--r-xs);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text) 50%),
    linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px;
  cursor: pointer;
}

/* Suche: weiß, Kontur, Lupe links */
.mu-search {
  position: relative;
  display: flex;
  align-items: center;
}

.mu-search::before {
  content: '';
  position: absolute;
  left: var(--sp-3);
  width: 14px;
  height: 14px;
  background: var(--color-text-subtle);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

.mu-search .mu-input {
  padding-left: calc(var(--sp-3) + 22px);
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  border-radius: var(--r-xs);
}

/* Checkbox und Radio */
.mu-check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body);
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
}

.mu-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  border: var(--bw-select) solid var(--color-accent);
  border-radius: 3px;
  background: var(--color-surface);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.mu-check input[type="radio"] {
  border-radius: var(--r-round);
}

.mu-check input:checked {
  background: var(--color-accent);
}

.mu-check input:checked::after {
  content: '';
  width: 9px;
  height: 9px;
  background: var(--color-text-on-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mu-check input[type="radio"]:checked::after {
  -webkit-mask: none;
  mask: none;
  border-radius: var(--r-round);
  width: 6px;
  height: 6px;
}

.mu-check input:focus-visible {
  box-shadow: var(--focus-ring);
}

/* Kästchen mit mehrzeiligem Text (Einwilligung): oben ausgerichtet, Text in Schriftfarbe, Zusatz darunter als .mu-hint */
.mu-check--top {
  display: flex;
  align-items: flex-start;
  color: var(--color-text);
}
.mu-check--top input { margin-top: 3px; }
.mu-check--top .mu-hint { display: block; margin-top: var(--sp-1); }

/* Aufklappbarer Hinweis: <details class="mu-details"><summary>Frage</summary>Text</details> */
.mu-details > summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}
.mu-details > summary::-webkit-details-marker { display: none; }
.mu-details > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }
.mu-details > :not(summary) { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--color-text-muted); }

/* Schalter */
.mu-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  font-size: var(--fs-body);
}

.mu-switch input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 36px;
  height: 20px;
  margin: 0;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--color-border-strong);
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out);
}

.mu-switch input::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--r-round);
  background: var(--color-surface);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-base) var(--ease-spring);
}

.mu-switch input:checked {
  background: var(--color-primary);
}

.mu-switch input:checked::after {
  transform: translateX(16px);
}

.mu-switch input:focus-visible {
  box-shadow: var(--focus-ring);
}

/* Fehlerzustand (GAPS.md Punkt 8) */
.mu-field.is-invalid .mu-input,
.mu-field.is-invalid .mu-select,
.mu-field.is-invalid .mu-textarea,
.mu-input[aria-invalid="true"],
.mu-textarea[aria-invalid="true"],
.mu-select[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.mu-field__error {
  display: none;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--color-danger-text);
}

.mu-field__error::before {
  content: '';
  width: 12px;
  height: 12px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3l10 18H2z' stroke-linejoin='round'/%3E%3Cpath d='M12 10v5M12 18h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3l10 18H2z' stroke-linejoin='round'/%3E%3Cpath d='M12 10v5M12 18h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mu-field.is-invalid .mu-field__error {
  display: inline-flex;
}
/* Fester Hinweis außerhalb eines Formulars, etwa ein Widerspruch in der Gage im Team-Panel (F24t Punkt 159) */
.mu-field__error--static { display: flex; margin-top: 2px; }

@media (max-width: 900px) {
  .mu-input,
  .mu-select,
  .mu-textarea {
    font-size: var(--fs-input-mobile);
    min-height: 40px;
  }
}

/* ================= Chips (Einzel- und Mehrfachwahl) ================= */
.mu-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* Formulare zum Antippen: Chips mindestens so hoch wie die Mindest-Tippfläche */
.mu-chips--tap .mu-chip { min-height: var(--tap-min); }

.mu-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-width: 92px;
  min-height: var(--control-h);
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--color-bg);
  color: var(--color-text-subtle);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  /* Anzeige-Pillen (.mu-chip--static) sind nicht klickbar und färben sich nicht (F24s, Symbol „Setliste vorhanden“ liegt darin) */
  .mu-chip:hover:not(:disabled, .is-selected, .mu-chip--static, [aria-pressed="true"], [aria-checked="true"]) {
    background: var(--color-border);
    color: var(--color-text-muted);
  }
}

.mu-chip:active:not(:disabled) {
  transform: scale(var(--press-scale));
}

.mu-chip:focus-visible {
  border-radius: var(--r-pill);
}

/* Auswahlfarbe aus --chip-on: orange als Grundwert, lila in Assistenten, lila Panels und Profilformularen (.mu-tone-primary), bei Veranstaltenden immer orange wie im Figma */
.mu-chip.is-selected,
.mu-chip[aria-pressed="true"],
.mu-chip[aria-checked="true"] {
  background: var(--chip-on, var(--color-accent));
  color: var(--color-text-on-brand);
}

:is(.mu-wizard, .mu-panel--primary, .mu-tone-primary) {
  --chip-on: var(--color-primary);
}

:is([data-app-role="organizer"], [data-chip-tone="accent"]) :is(.mu-wizard, .mu-panel--primary, .mu-tone-primary) {
  --chip-on: var(--color-accent);
}

/* Buchungsassistenz: jede Auswahl lila, auch bei Veranstaltenden (F24r Punkt 53), auch die gewählten Einträge einer Liste wie Equipment (F24t Punkt 101) */
.mu-panel[data-chip-tone="primary"] { --chip-on: var(--color-primary); }
.mu-panel[data-chip-tone="primary"] .mu-picked__item:not([class*="--genre-"], [class*="--venue-"]) { background: var(--chip-on); }

.mu-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Zusammenfassung, nicht klickbar */
.mu-chip--static {
  cursor: default;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (hover: hover) {
  .mu-chip--static:hover {
    background: var(--color-bg);
    color: var(--color-text-subtle);
  }
}

.mu-chip--static:active {
  transform: none;
}

/* Reine Anzeige wie im Figma (Lokal-Typen im Profil): Fläche --c-bg, Text --c-ink-faint, keine Farbe je Typ */
.mu-chip--quiet {
  background: var(--color-bg);
  color: var(--color-text-placeholder);
}

@media (hover: hover) {
  .mu-chip.mu-chip--quiet:hover:not(:disabled) {
    background: var(--color-bg);
    color: var(--color-text-placeholder);
  }
}

/* Zusammenfassung mit oranger Kontur und Symbol (Musikprofil, „Dein Vibe“) */
.mu-chip--outline {
  gap: var(--sp-2);
  border: var(--bw) solid var(--color-accent);
  background: var(--color-surface);
  color: var(--color-text);
}

@media (hover: hover) {
  .mu-chip--outline:hover {
    gap: var(--sp-2);
    border: var(--bw) solid var(--color-accent);
    background: var(--color-surface);
    color: var(--color-text);
  }
}


.mu-chip svg {
  width: 14px;
  height: 14px;
  color: var(--color-text-strong);
}

/* Antwortraster: dieselbe Frage sieht überall gleich aus (Stimmung, Besetzung, Bundesländer, Tage, Gage). Gleich breite Pillen, Spalten nach Platz, höchstens fünf.
   --2 bis --4 legen die Spalten fest. Klickbares div mit Kästchen: data-mu-chip-check, js/ui/wizard.js ergänzt die Tastatur */
.mu-chips--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: var(--sp-3);
  max-width: 560px;
}

.mu-chips--grid.mu-chips--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mu-chips--grid.mu-chips--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mu-chips--grid.mu-chips--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mu-chips--grid .mu-chip {
  min-width: 0;
  padding: var(--sp-1);
  font-size: var(--fs-small);
  line-height: var(--lh-tight);
  text-align: center;
  white-space: normal;
}

/* Genre als farbiger Tag: anwesend heißt gewählt, Antippen nimmt ihn weg */
/* Genre-Farben (F24r Punkt 57): Chips, gewählte Genres und Tags lesen dieselbe Farbe je Genre, weiße Schrift.
   Veranstaltungstypen (F24t Punkt 107) nutzen denselben Mechanismus mit eigenen Tönen: die Klasse --venue-<typ> setzt --genre-bg */
:is(.mu-chip, .mu-picked__item, .mu-tag):is([class*="--genre-"], [class*="--venue-"]) { background: var(--genre-bg, var(--color-primary)); color: var(--color-text-on-brand); }
@media (hover: hover) {
  .mu-chip:is([class*="mu-chip--genre-"], [class*="mu-chip--venue-"]):hover:not(:disabled) { background: var(--genre-bg, var(--color-primary)); color: var(--color-text-on-brand); opacity: 0.85; }
  .mu-chip--static:is([class*="mu-chip--genre-"], [class*="mu-chip--venue-"]):hover { opacity: 1; }
}
.mu-chip--venue-cafe, .mu-picked__item--venue-cafe, .mu-tag--venue-cafe { --genre-bg: var(--venue-cafe); }
.mu-chip--venue-bar, .mu-picked__item--venue-bar, .mu-tag--venue-bar { --genre-bg: var(--venue-bar); }
.mu-chip--venue-club, .mu-picked__item--venue-club, .mu-tag--venue-club { --genre-bg: var(--venue-club); }
.mu-chip--venue-disco, .mu-picked__item--venue-disco, .mu-tag--venue-disco { --genre-bg: var(--venue-disco); }
.mu-chip--venue-restaurant, .mu-picked__item--venue-restaurant, .mu-tag--venue-restaurant { --genre-bg: var(--venue-restaurant); }
.mu-chip--venue-hotel, .mu-picked__item--venue-hotel, .mu-tag--venue-hotel { --genre-bg: var(--venue-hotel); }
.mu-chip--venue-theater, .mu-picked__item--venue-theater, .mu-tag--venue-theater { --genre-bg: var(--venue-theater); }
.mu-chip--venue-konzerthalle, .mu-picked__item--venue-konzerthalle, .mu-tag--venue-konzerthalle { --genre-bg: var(--venue-konzerthalle); }
.mu-chip--venue-festival, .mu-picked__item--venue-festival, .mu-tag--venue-festival { --genre-bg: var(--venue-festival); }
.mu-chip--venue-openair, .mu-picked__item--venue-openair, .mu-tag--venue-openair { --genre-bg: var(--venue-openair); }
.mu-chip--venue-galerie, .mu-picked__item--venue-galerie, .mu-tag--venue-galerie { --genre-bg: var(--venue-galerie); }
.mu-chip--venue-pub, .mu-picked__item--venue-pub, .mu-tag--venue-pub { --genre-bg: var(--venue-pub); }
.mu-chip--venue-lounge, .mu-picked__item--venue-lounge, .mu-tag--venue-lounge { --genre-bg: var(--venue-lounge); }
.mu-chip--venue-eventlocation, .mu-picked__item--venue-eventlocation, .mu-tag--venue-eventlocation { --genre-bg: var(--venue-eventlocation); }
.mu-chip--venue-kulturzentrum, .mu-picked__item--venue-kulturzentrum, .mu-tag--venue-kulturzentrum { --genre-bg: var(--venue-kulturzentrum); }
.mu-chip--venue-biergarten, .mu-picked__item--venue-biergarten, .mu-tag--venue-biergarten { --genre-bg: var(--venue-biergarten); }
.mu-chip--venue-kleinkunstbuehne, .mu-picked__item--venue-kleinkunstbuehne, .mu-tag--venue-kleinkunstbuehne { --genre-bg: var(--venue-kleinkunstbuehne); }
.mu-chip--venue-heuriger, .mu-picked__item--venue-heuriger, .mu-tag--venue-heuriger { --genre-bg: var(--venue-heuriger); }
.mu-chip--venue-gasthaus, .mu-picked__item--venue-gasthaus, .mu-tag--venue-gasthaus { --genre-bg: var(--venue-gasthaus); }
.mu-chip--venue-imbissstand, .mu-picked__item--venue-imbissstand, .mu-tag--venue-imbissstand { --genre-bg: var(--venue-imbissstand); }
.mu-chip--venue-markt, .mu-picked__item--venue-markt, .mu-tag--venue-markt { --genre-bg: var(--venue-markt); }
.mu-chip--venue-eissalon, .mu-picked__item--venue-eissalon, .mu-tag--venue-eissalon { --genre-bg: var(--venue-eissalon); }
.mu-chip--venue-brauerei, .mu-picked__item--venue-brauerei, .mu-tag--venue-brauerei { --genre-bg: var(--venue-brauerei); }
.mu-chip--venue-weinschenke, .mu-picked__item--venue-weinschenke, .mu-tag--venue-weinschenke { --genre-bg: var(--venue-weinschenke); }
.mu-chip--venue-schanigarten, .mu-picked__item--venue-schanigarten, .mu-tag--venue-schanigarten { --genre-bg: var(--venue-schanigarten); }
.mu-chip--venue-sonstige, .mu-picked__item--venue-sonstige, .mu-tag--venue-sonstige { --genre-bg: var(--venue-sonstige); }
.mu-chip--genre-rock, .mu-picked__item--genre-rock, .mu-tag--genre-rock { --genre-bg: var(--genre-rock); }
.mu-chip--genre-jazz, .mu-picked__item--genre-jazz, .mu-tag--genre-jazz { --genre-bg: var(--genre-jazz); }
.mu-chip--genre-pop, .mu-picked__item--genre-pop, .mu-tag--genre-pop { --genre-bg: var(--genre-pop); }
.mu-chip--genre-electronic, .mu-picked__item--genre-electronic, .mu-tag--genre-electronic { --genre-bg: var(--genre-electronic); }
.mu-chip--genre-folk, .mu-picked__item--genre-folk, .mu-tag--genre-folk { --genre-bg: var(--genre-folk); }
.mu-chip--genre-hiphop, .mu-picked__item--genre-hiphop, .mu-tag--genre-hiphop { --genre-bg: var(--genre-hiphop); }
.mu-chip--genre-klassik, .mu-picked__item--genre-klassik, .mu-tag--genre-klassik { --genre-bg: var(--genre-klassik); }
.mu-chip--genre-blues, .mu-picked__item--genre-blues, .mu-tag--genre-blues { --genre-bg: var(--genre-blues); }
.mu-chip--genre-metal, .mu-picked__item--genre-metal, .mu-tag--genre-metal { --genre-bg: var(--genre-metal); }
.mu-chip--genre-reggae, .mu-picked__item--genre-reggae, .mu-tag--genre-reggae { --genre-bg: var(--genre-reggae); }
.mu-chip--genre-indie, .mu-picked__item--genre-indie, .mu-tag--genre-indie { --genre-bg: var(--genre-indie); }
.mu-chip--genre-punk, .mu-picked__item--genre-punk, .mu-tag--genre-punk { --genre-bg: var(--genre-punk); }
.mu-chip--genre-soul, .mu-picked__item--genre-soul, .mu-tag--genre-soul { --genre-bg: var(--genre-soul); }
.mu-chip--genre-country, .mu-picked__item--genre-country, .mu-tag--genre-country { --genre-bg: var(--genre-country); }
.mu-chip--genre-funk, .mu-picked__item--genre-funk, .mu-tag--genre-funk { --genre-bg: var(--genre-funk); }
.mu-chip--genre-rnb, .mu-picked__item--genre-rnb, .mu-tag--genre-rnb { --genre-bg: var(--genre-rnb); }
.mu-chip--genre-latin, .mu-picked__item--genre-latin, .mu-tag--genre-latin { --genre-bg: var(--genre-latin); }
.mu-chip--genre-gospel, .mu-picked__item--genre-gospel, .mu-tag--genre-gospel { --genre-bg: var(--genre-gospel); }
.mu-chip--genre-disco, .mu-picked__item--genre-disco, .mu-tag--genre-disco { --genre-bg: var(--genre-disco); }
.mu-chip--genre-house, .mu-picked__item--genre-house, .mu-tag--genre-house { --genre-bg: var(--genre-house); }
.mu-chip--genre-techno, .mu-picked__item--genre-techno, .mu-tag--genre-techno { --genre-bg: var(--genre-techno); }
.mu-chip--genre-trance, .mu-picked__item--genre-trance, .mu-tag--genre-trance { --genre-bg: var(--genre-trance); }
.mu-chip--genre-dubstep, .mu-picked__item--genre-dubstep, .mu-tag--genre-dubstep { --genre-bg: var(--genre-dubstep); }
.mu-chip--genre-ambient, .mu-picked__item--genre-ambient, .mu-tag--genre-ambient { --genre-bg: var(--genre-ambient); }
.mu-chip--genre-schlager, .mu-picked__item--genre-schlager, .mu-tag--genre-schlager { --genre-bg: var(--genre-schlager); }
.mu-chip--genre-volksmusik, .mu-picked__item--genre-volksmusik, .mu-tag--genre-volksmusik { --genre-bg: var(--genre-volksmusik); }
.mu-chip--genre-austropop, .mu-picked__item--genre-austropop, .mu-tag--genre-austropop { --genre-bg: var(--genre-austropop); }
.mu-chip--genre-wienerlied, .mu-picked__item--genre-wienerlied, .mu-tag--genre-wienerlied { --genre-bg: var(--genre-wienerlied); }
.mu-chip--genre-alpenrock, .mu-picked__item--genre-alpenrock, .mu-tag--genre-alpenrock { --genre-bg: var(--genre-alpenrock); }
.mu-chip--genre-kabarett, .mu-picked__item--genre-kabarett, .mu-tag--genre-kabarett { --genre-bg: var(--genre-kabarett); }
.mu-chip--genre-weltmusik, .mu-picked__item--genre-weltmusik, .mu-tag--genre-weltmusik { --genre-bg: var(--genre-weltmusik); }
.mu-chip--genre-singersongwriter, .mu-picked__item--genre-singersongwriter, .mu-tag--genre-singersongwriter { --genre-bg: var(--genre-singersongwriter); }
.mu-chip--genre-liedermacher, .mu-picked__item--genre-liedermacher, .mu-tag--genre-liedermacher { --genre-bg: var(--genre-liedermacher); }
.mu-chip--genre-alternative, .mu-picked__item--genre-alternative, .mu-tag--genre-alternative { --genre-bg: var(--genre-alternative); }
.mu-chip--genre-sonstige, .mu-picked__item--genre-sonstige, .mu-tag--genre-sonstige { --genre-bg: var(--genre-sonstige); }
.mu-chip--genre-r1, .mu-picked__item--genre-r1, .mu-tag--genre-r1 { --genre-bg: var(--genre-r1); }
.mu-chip--genre-r2, .mu-picked__item--genre-r2, .mu-tag--genre-r2 { --genre-bg: var(--genre-r2); }
.mu-chip--genre-r3, .mu-picked__item--genre-r3, .mu-tag--genre-r3 { --genre-bg: var(--genre-r3); }
.mu-chip--genre-r4, .mu-picked__item--genre-r4, .mu-tag--genre-r4 { --genre-bg: var(--genre-r4); }
.mu-chip--genre-r5, .mu-picked__item--genre-r5, .mu-tag--genre-r5 { --genre-bg: var(--genre-r5); }
.mu-chip--genre-r6, .mu-picked__item--genre-r6, .mu-tag--genre-r6 { --genre-bg: var(--genre-r6); }
.mu-chip--genre-r7, .mu-picked__item--genre-r7, .mu-tag--genre-r7 { --genre-bg: var(--genre-r7); }
.mu-chip--genre-r8, .mu-picked__item--genre-r8, .mu-tag--genre-r8 { --genre-bg: var(--genre-r8); }
.mu-chip--genre-r9, .mu-picked__item--genre-r9, .mu-tag--genre-r9 { --genre-bg: var(--genre-r9); }
.mu-chip--genre-r10, .mu-picked__item--genre-r10, .mu-tag--genre-r10 { --genre-bg: var(--genre-r10); }
.mu-chip--genre-r11, .mu-picked__item--genre-r11, .mu-tag--genre-r11 { --genre-bg: var(--genre-r11); }
.mu-chip--genre-r12, .mu-picked__item--genre-r12, .mu-tag--genre-r12 { --genre-bg: var(--genre-r12); }

/* Chip mit verstecktem Kästchen (label.mu-chip > input): Fokus und Wahl kommen vom Kästchen */
.mu-chip:has(> input:focus-visible) {
  box-shadow: var(--focus-ring);
}

.mu-chip:has(> input:checked) {
  background: var(--chip-on, var(--color-accent));
  color: var(--color-text-on-brand);
}

.mu-field.is-invalid .mapboxgl-ctrl-geocoder {
  box-shadow: 0 0 0 1px var(--color-danger);
}

/* Mapbox-Adresssuche im Feld-Stil: in Assistenten, Fragenlisten und überall mit .mu-geocoder um den Container */
:is(.mu-wizard, .mu-questions, .mu-geocoder) .mapboxgl-ctrl-geocoder {
  width: 100%;
  max-width: none;
  min-width: 0;
  border-radius: var(--r-sm);
  background: var(--color-surface-input);
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
}

:is(.mu-wizard, .mu-questions, .mu-geocoder) .mapboxgl-ctrl-geocoder input[type="text"] {
  height: 34px;
  padding: 0 var(--sp-8) 0 calc(var(--sp-3) + 22px);
  color: var(--color-text);
  font-size: var(--fs-body);
}

:is(.mu-wizard, .mu-questions, .mu-geocoder) .mapboxgl-ctrl-geocoder--icon-search {
  top: 8px;
  left: var(--sp-2);
  width: 18px;
  height: 18px;
  fill: var(--color-text-subtle);
}

:is(.mu-wizard, .mu-questions, .mu-geocoder) .mapboxgl-ctrl-geocoder--button {
  top: 4px;
  background: transparent;
}

:is(.mu-wizard, .mu-questions, .mu-geocoder) .mapboxgl-ctrl-geocoder .suggestions {
  z-index: var(--z-popover);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  font-size: var(--fs-body);
}

:is(.mu-wizard, .mu-questions, .mu-geocoder) .mapboxgl-ctrl-geocoder:focus-within {
  box-shadow: 0 0 0 3px var(--c-purple-20);
}

@media (max-width: 900px) {
  :is(.mu-wizard, .mu-questions, .mu-geocoder) .mapboxgl-ctrl-geocoder input[type="text"] {
    height: 40px;
    font-size: var(--fs-input-mobile);
  }
}

.mu-chip.is-unavailable,
.mu-chip.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.mu-chip--sm {
  min-width: 0;
  min-height: 28px;
  padding: 0 var(--sp-3);
  color: var(--color-text-muted);
}

.mu-chip__badge {
  font-size: var(--fs-micro);
  opacity: 0.85;
}

@media (max-width: 900px) {
  .mu-chips--grid .mu-chip,
  .mu-chip--sm { min-height: var(--tap-min); }
  .mu-panel__body .mu-chip:not(.mu-chip--static) { min-height: var(--tap-min); }
}

/* Gewählte Einträge mit Entfernen (Genres, Typen, Instrumente, Locations) */
.mu-picked {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.mu-picked:empty {
  display: none;
}

.mu-picked:not(:empty) + .mu-suggest {
  margin-top: var(--sp-2);
}

.mu-picked__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 28px;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--color-accent);
  color: var(--color-text-on-brand);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}


.mu-picked__item[role="button"] { cursor: pointer; }
.mu-picked__item[role="button"]:not([class*="--genre-"], [class*="--venue-"]) { background: var(--color-primary); }

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

.mu-picked__remove {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  color: inherit;
  border-radius: var(--r-round);
  background: rgb(var(--c-white-rgb) / 0.25);
  cursor: pointer;
}

/* Tippfläche mobil größer als das Symbol */
.mu-picked__remove::after {
  content: '';
  position: absolute;
  inset: calc((18px - var(--tap-min)) / 2);
}

.mu-picked__remove::before {
  content: '';
  width: 9px;
  height: 9px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (hover: hover) {
  .mu-picked__remove:hover {
    background: rgb(var(--c-white-rgb) / 0.45);
  }
}

/* Eingabe mit Vorschlagsliste: .mu-suggest um das Feld, .mu-suggest__menu direkt darunter, .is-open zeigt die Liste */
.mu-suggest {
  position: relative;
}

.mu-suggest__count {
  flex: none;
  white-space: nowrap;
  font-size: var(--fs-micro);
  color: var(--color-text-subtle);
}

.mu-suggest__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: var(--z-popover);
  display: none;
  max-height: 232px;
  overflow-y: auto;
  padding: var(--sp-1);
  border-radius: var(--r-md);
  background: var(--color-surface);
  box-shadow: var(--sh-3);
}

.mu-suggest__menu.is-open {
  display: block;
}

.mu-suggest__item {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  cursor: pointer;
}

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

/* Genre-Badge in der Liste: reine Anzeige, der Eintrag bekommt Hover und Klick */
.mu-suggest__item .mu-chip { pointer-events: none; cursor: inherit; }

.mu-suggest__item.is-active {
  background: var(--c-purple-10);
  color: var(--color-primary);
}

.mu-suggest__item[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/* ================= Tags, Pills, Badges ================= */
.mu-tag {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--color-primary);
  color: var(--color-text-on-brand);
  font-size: var(--fs-tag);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  white-space: nowrap;
}

.mu-tag--jazz { background: var(--color-tag-jazz); }
.mu-tag--indie { background: var(--color-tag-indie); }
.mu-tag--songwriter { background: var(--color-tag-songwriter); }
.mu-tag--accent { background: var(--color-accent); }
.mu-tag--muted { background: var(--color-bg); color: var(--color-text-muted); }

.mu-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.mu-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--color-primary);
  color: var(--color-text-on-brand);
  font-size: var(--fs-body);
  white-space: nowrap;
}

.mu-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--color-accent);
  color: var(--color-text-on-brand);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.mu-badge--danger { background: var(--color-danger); }
.mu-badge--primary { background: var(--color-primary); }

/* App-Badge über der Ecke (F24t Punkte 148, 150): größer, ragt halb über die Ecke, weißer Ring zur Abgrenzung.
   Der Träger braucht position: relative und darf nicht abschneiden */
.mu-badge--corner {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: var(--z-raised);
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: var(--fs-small);
  box-shadow: 0 0 0 2px var(--color-surface);
}

/* Status-Punkt und Legende */
.mu-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-micro);
  color: var(--color-text-muted);
}

.mu-status::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: var(--r-round);
  background: var(--status-color, var(--color-border-strong));
  flex: none;
}

.mu-status--fixed, .mu-legend__item--fixed { --status-color: var(--c-success); }
.mu-status--request, .mu-legend__item--request { --status-color: var(--color-accent); }
.mu-status--tender, .mu-legend__item--tender { --status-color: var(--color-primary); }
.mu-status--draft, .mu-legend__item--draft { --status-color: var(--color-border-strong); }
.mu-status--danger, .mu-legend__item--danger { --status-color: var(--color-danger); }

.mu-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-micro);
  color: var(--color-text-muted);
}

.mu-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Kleines Quadrat in der Farbe des Kalendereintrags, in allen Rollen */
.mu-legend__item::before {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--legend-color, var(--color-border));
}

.mu-legend__item--fixed { --legend-color: var(--color-cal-fixed); }
.mu-legend__item--request { --legend-color: var(--color-cal-request); }
.mu-legend__item--tender { --legend-color: var(--color-cal-tender); }
.mu-legend__item--draft { --legend-color: var(--color-cal-draft); }
.mu-legend__item--danger { --legend-color: var(--color-danger); }

/* Termine als Punkte statt Flächen (kompakter Kalender, Handy): dieselbe Form, Farbe der Punkte */
.mu-legend--dots .mu-legend__item { --legend-color: var(--status-color); }

/* ================= Karten ================= */
.mu-card {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  min-width: 0;
}

.mu-card--raised { box-shadow: var(--sh-1); }
.mu-card--warm { background: var(--color-surface-warm); }
.mu-card--flush { padding: 0; overflow: hidden; }
.mu-card--compact { padding: var(--sp-4); }

.mu-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.mu-card__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}

.mu-card__more {
  font-size: var(--fs-micro);
  color: var(--color-text-subtle);
  text-decoration: none;
}

@media (hover: hover) {
  .mu-card__more:hover {
    color: var(--color-primary);
    text-decoration: underline;
  }
}

a.mu-card,
button.mu-card {
  display: block;
  color: inherit;
  text-decoration: none;
  text-align: left;
  width: 100%;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  a.mu-card:hover,
  button.mu-card:hover {
    box-shadow: var(--sh-3);
    transform: translateY(-2px);
  }

  /* Profilkarten der Einladung heben sich deutlich ab (F24t Punkt 144): etwas höher, leicht größer, weicher Schatten.
     Platz dafür hält der Innenabstand der Bühne frei, nichts wird abgeschnitten */
  a.mu-events-cta__item:hover .mu-artist-card {
    box-shadow: 0 18px 32px -14px rgb(var(--c-black-rgb) / 0.7);
    transform: translateY(-4px) scale(1.04);
  }
}

/* Kachel (To-do) */
.mu-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-height: 105px;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--color-surface-muted);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  a.mu-tile:hover,
  button.mu-tile:hover {
    background: var(--color-border);
  }
}

a.mu-tile:active,
button.mu-tile:active {
  transform: scale(var(--press-scale-lg));
}

button.mu-tile {
  align-items: flex-start;
  padding-block: var(--sp-2);
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.mu-tile .mu-tile__value { margin-top: var(--sp-2); }
.mu-tile__value .mu-skel { width: 28px; height: 1.2em; }

.mu-badge--corner[hidden] { display: none; }

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

.mu-tile__icon svg { width: 18px; height: 18px; }
.mu-tile__icon--primary { background: var(--color-primary); }
.mu-tile__value { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: 1.2; }
.mu-tile__label { font-size: var(--fs-body-lg); }

.mu-tile__arrow {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-4);
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--r-round);
  background: var(--color-border-strong);
  color: var(--color-text-on-brand);
}

.mu-tile__arrow svg { width: 11px; height: 11px; }

/* Mobil sind die Kacheln schmal: ein langes Wort darf nicht in den Pfeil laufen */
@media (max-width: 900px) {
  .mu-tile:has(> .mu-tile__arrow) { padding-inline: var(--sp-4) var(--sp-3); }
  .mu-tile:has(> .mu-tile__arrow) .mu-tile__label { font-size: var(--fs-body); }
  .mu-tile__arrow { right: var(--sp-3); }
}

/* Kennzahl: gleiche Kachel, Beschriftung oben, Wert groß in Lila (ersetzt stats-kpi-card, kein eigener Baustein nötig) */
.mu-tile--kpi {
  min-height: 0;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
}

.mu-tile--kpi .mu-tile__label {
  order: -1;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.mu-tile--kpi .mu-tile__value {
  font-size: var(--fs-h1);
  color: var(--color-primary);
}

.mu-tile__sub {
  font-size: var(--fs-small);
  color: var(--color-text-subtle);
}

.mu-tile__sub--up { color: var(--color-success-text); }
.mu-tile__sub--down { color: var(--color-danger-text); }

.mu-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--sp-3);
}

/* Optionskarte (Wegauswahl) */
.mu-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: var(--bw) solid var(--color-surface-muted);
  border-radius: var(--r-md);
  background: var(--color-surface-soft);
  color: var(--color-text);
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .mu-option:hover { border-color: var(--color-border-strong); }
}
.mu-option:active:not(:disabled, [aria-disabled="true"]) { transform: scale(var(--press-scale-lg)); }
.mu-option:focus-visible { border-radius: var(--r-md); }

.mu-option.is-selected,
.mu-option[aria-checked="true"],
.mu-option[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-surface);
}

.mu-options.has-selection .mu-option:not(.is-selected):not([aria-checked="true"]):not([aria-pressed="true"]) {
  opacity: 0.4;
}

.mu-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}

/* Kachel mit Icon (Frames onboarding 06 und 07, ersetzt selection-card): Text unten, gewählt lila */
.mu-option--tile {
  justify-content: flex-end;
  min-height: 100px;
  padding: var(--sp-4);
  border-color: transparent;
  background: var(--color-surface-input);
  font-size: var(--fs-body);
}

@media (hover: hover) {
  .mu-option--tile:hover {
    border-color: var(--color-border-strong);
  }
}

.mu-option--tile.is-selected,
.mu-option--tile[aria-checked="true"],
.mu-option--tile[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-on-brand);
}

/* Kacheln in der Auswahlfarbe der Chips (--chip-on): orange in der Direktanfrage, lila in der Buchungsassistenz (F24t Punkt 109) */
.mu-options--chip-tone .mu-option--tile:is(.is-selected, [aria-pressed="true"], [aria-checked="true"]) {
  border-color: var(--chip-on, var(--color-accent));
  background: var(--chip-on, var(--color-accent));
}
.mu-options--chip-tone .mu-option--tile:is(.is-selected, [aria-pressed="true"], [aria-checked="true"]) .mu-option__icon { color: var(--color-text-on-brand); }

.mu-option--tile:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mu-options--tiles {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3);
}

.mu-options--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mu-options--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 600px) {
  .mu-options--3 { grid-template-columns: minmax(0, 1fr); }
  .mu-options--3 .mu-option--tile { min-height: 64px; }
  .mu-options--2:not(.mu-options--tiles) { grid-template-columns: minmax(0, 1fr); }
}

/* Kachel nur mit Text, mittig (Registrierung, Frames 03 und 06) */
.mu-option--center {
  align-items: center;
  justify-content: center;
  color: var(--color-text-subtle);
  text-align: center;
}

.mu-option.is-unavailable {
  opacity: 0.4;
  cursor: not-allowed;
}

.mu-option__icon {
  width: 22px;
  height: 22px;
  margin-bottom: auto;
}

.mu-option--tile .mu-option__icon {
  align-self: flex-end;
  width: 40px;
  height: 40px;
  color: var(--color-text-placeholder);
}

.mu-option--tile .mu-option__icon svg { width: 100%; height: 100%; }

.mu-option--tile.is-selected .mu-option__icon,
.mu-option--tile[aria-pressed="true"] .mu-option__icon { color: rgb(var(--c-black-rgb) / 0.25); }

.mu-option__label {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  line-height: var(--lh-tight);
}

/* Auftrittsart: gleich hohe Kacheln, Icon, Titel und „?“ stehen immer an derselben Stelle, auch gewählt und zweizeilig */
.mu-options--dirs { grid-auto-rows: 1fr; }

.mu-options--dirs .mu-option--tile { display: grid; grid-template-rows: 40px minmax(2.6em, auto); gap: var(--sp-2); justify-content: stretch; }

.mu-options--dirs .mu-option__icon { margin: 0; justify-self: end; }

.mu-options--dirs .mu-option__label { align-items: flex-start; }

.mu-options--dirs .mu-option__label .mu-tooltip { position: absolute; top: var(--sp-3); left: var(--sp-3); }

.mu-options--dirs .mu-option--tile.is-selected .mu-option__icon,
.mu-options--dirs .mu-option--tile.is-selected .mu-option__icon svg,
.mu-options--dirs .mu-option--tile[aria-pressed="true"] .mu-option__icon,
.mu-options--dirs .mu-option--tile[aria-pressed="true"] .mu-option__icon svg,
.mu-options--dirs .mu-option--tile.is-selected .mu-tooltip__icon { color: var(--color-text-on-brand); }

/* Equipment (F24r Punkt 61): Liste der Location mit „Nichts davon“ darunter */
.mu-equip-venue { display: grid; gap: var(--sp-3); }

.mu-option__title { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: 1.3; }
.mu-option__text { font-size: var(--fs-small); color: var(--color-text-muted); }
.mu-option--tile.is-selected .mu-option__text,
.mu-option--tile[aria-pressed="true"] .mu-option__text,
.mu-option--tile[aria-checked="true"] .mu-option__text { color: inherit; }
.mu-option__list { font-size: var(--fs-small); color: var(--color-text-muted); border-top: var(--bw) solid var(--color-border); padding-top: var(--sp-2); display: grid; gap: var(--sp-1); }
.mu-option__list b { color: var(--color-text); font-weight: var(--fw-bold); }

/* Promo-Karte */
.mu-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 213px;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--color-accent);
  color: var(--color-text-on-brand);
  text-decoration: none;
  isolation: isolate;
}

.mu-promo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.mu-promo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--g-fade-orange);
  z-index: -1;
}

.mu-promo__title { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: 1.4; max-width: 75%; }
.mu-promo__kicker { position: absolute; right: var(--sp-6); bottom: calc(var(--sp-6) + 48px); font-size: var(--fs-micro); }
.mu-promo .mu-icon-btn { position: absolute; right: var(--sp-6); bottom: var(--sp-6); }

/* Klangkreis (js/ui/soundring.js): Ring aus feinen Balken in Lila und Orange, atmet wie eine Audiowelle und dreht sich langsam (F24i).
   .is-playing läuft lebhafter (Hörprobe), .is-gathering zieht die Balken zu einem ruhigen Kreis zusammen. Der weiße Teller trägt ihn auch auf Orange */
.mu-soundring {
  --soundring-beat: 2600ms;
  --soundring-turn: 36s;
  --soundring-step: -90ms;
  display: block;
  width: min(240px, 100%);
  aspect-ratio: 1;
}

.mu-soundring--sm { width: 160px; }
/* Mittig über einem Hinweis, etwa beim Login während der Baustelle (F24t Punkt 202) */
.mu-soundring--center { margin: 0 auto var(--sp-3); }
.mu-soundring__svg { display: block; width: 100%; height: 100%; }
.mu-soundring__plate { fill: var(--color-surface); }

.mu-soundring__bars {
  transform-origin: 0 0;
  animation: mu-soundring-turn var(--soundring-turn) linear infinite;
}

.mu-soundring__bar {
  --high: calc(0.55 + 0.45 * var(--amp));
  --low: calc(0.28 + 0.2 * var(--amp));
  fill: var(--c-purple);
  fill: color-mix(in srgb, var(--c-orange) calc(var(--mix) * 100%), var(--c-purple));
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(var(--low));
  animation: mu-soundring-breathe var(--soundring-beat) var(--ease-in-out) calc(var(--i) * var(--soundring-step)) infinite;
}

.mu-soundring.is-playing {
  --soundring-beat: 760ms;
  --soundring-turn: 14s;
}

.mu-soundring.is-playing .mu-soundring__bar {
  --high: calc(0.7 + 0.3 * var(--amp));
  --low: calc(0.16 + 0.14 * var(--amp));
}

.mu-soundring.is-gathering .mu-soundring__bar {
  animation: mu-soundring-gather 1200ms var(--ease-out) calc(var(--i) * 18ms) both;
}

.mu-soundring.is-gathering .mu-soundring__bars {
  animation: mu-soundring-calm 3200ms var(--ease-in-out) 1900ms infinite;
}

@keyframes mu-soundring-turn { to { transform: rotate(360deg); } }
@keyframes mu-soundring-breathe {
  0%, 100% { transform: scaleY(var(--low)); }
  50% { transform: scaleY(var(--high)); }
}
@keyframes mu-soundring-gather {
  from { transform: scaleY(var(--high)); }
  to { transform: scaleY(0.14); }
}
@keyframes mu-soundring-calm { 50% { transform: scale(1.04); } }

@media (prefers-reduced-motion: reduce) {
  .mu-soundring__bars,
  .mu-soundring.is-gathering .mu-soundring__bars { animation: none; }
  .mu-soundring__bar,
  .mu-soundring.is-playing .mu-soundring__bar { animation: none; transform: scaleY(calc(0.4 + 0.5 * var(--amp))); }
  .mu-soundring.is-gathering .mu-soundring__bar { animation: none; transform: scaleY(0.14); }
}

/* Event-Zeile */
.mu-event-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: var(--bw) solid var(--color-surface-muted);
  color: var(--color-text);
  text-decoration: none;
}

.mu-event-row:last-child { border-bottom: 0; }
@media (hover: hover) {
  a.mu-event-row:hover .mu-event-row__title { color: var(--color-primary); }
}

.mu-date-tile {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-xs);
  background: var(--color-surface-muted);
  line-height: 1;
}

.mu-date-tile__month { font-size: var(--fs-micro); font-weight: var(--fw-bold); text-transform: uppercase; }
.mu-date-tile__day { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.mu-event-row__title { font-size: var(--fs-small); font-weight: var(--fw-bold); }
.mu-event-row__meta { font-size: var(--fs-small); color: var(--color-text-muted); }

.mu-event-row__chevron {
  width: 16px;
  height: 16px;
  color: var(--color-text-subtle);
}

/* Musikerkarte (Grundform, Details ab Session 4) */
/* Ein Format überall (F24g): feste Breite und Höhe, das Foto nimmt den Rest. Lange Namen und viele Tags sprengen es nicht */
.mu-artist-card {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  width: var(--artist-card-w);
  height: var(--artist-card-h);
  max-width: 100%;
  border-radius: var(--r-xl);
  background: var(--c-ink);
  color: var(--color-text-on-brand);
  overflow: hidden;
  /* Eigener Stapelkontext: Tags und Pillen mit z-index bleiben in der Karte und ragen nie über feste Leisten (F24r Punkt 68) */
  isolation: isolate;
}

.mu-artist-card__media {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  background: var(--c-ink);
}

.mu-artist-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.mu-artist-card__media::after {
  content: '';
  position: absolute;
  inset: 40% 0 0;
  background: var(--g-card-fade);
  pointer-events: none;
}

.mu-artist-card__fee { position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: var(--z-raised); }
.mu-artist-card__tags { position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-3); z-index: var(--z-raised); display: grid; gap: var(--sp-1); justify-items: start; }
.mu-artist-card__tags > * { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mu-artist-card__tags > :nth-child(n + 4) { display: none; }
.mu-artist-card__body { flex: none; display: flex; align-items: center; gap: var(--sp-3); height: var(--artist-card-body-h); padding: 0 var(--sp-4); border-top: var(--bw) solid rgb(var(--c-white-rgb) / 0.52); }
.mu-artist-card__name { font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); }
.mu-artist-card__sub { overflow: hidden; font-size: var(--fs-small); opacity: 0.85; text-overflow: ellipsis; white-space: nowrap; }
.mu-artist-card__actions { flex: none; display: flex; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-4); }
.mu-artist-card__actions .mu-btn { flex: 1; }

/* Antwortpaar unter einer Hörkarte (Frames onboarding 04, 05): grau und lila, Kartenbreite */
.mu-answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  width: 266px;
  max-width: 100%;
}

.mu-answer {
  min-height: 60px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  background: var(--color-surface-input);
  color: var(--color-text-subtle);
  font-size: var(--fs-body);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .mu-answer:hover { background: var(--color-border); }
}
.mu-answer:active { transform: scale(var(--press-scale)); }
.mu-answer--like { background: var(--color-primary); color: var(--color-text-on-brand); font-weight: var(--fw-medium); }
@media (hover: hover) {
  .mu-answer--like:hover { background: var(--color-primary-hover); }
}

/* ================= Tabs ================= */
.mu-tabs {
  display: flex;
  gap: var(--sp-6);
  border-bottom: var(--bw) solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.mu-tabs::-webkit-scrollbar { display: none; }

/* Wandernder Strich aus js/ui/motion.js. Ohne Skript bleibt der Strich je Reiter */
.mu-tabs { position: relative; }

.mu-tabs__ink {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: var(--bw-tab);
  background: var(--color-primary);
  transform-origin: left;
  transform: translateX(var(--ink-x, 0)) scaleX(var(--ink-w, 0));
  pointer-events: none;
}

.mu-tabs__ink.is-ready { transition: transform var(--dur-base) var(--ease-spring); }
.mu-tabs.has-ink .mu-tab::after { display: none; }

.mu-tab {
  position: relative;
  padding: var(--sp-2) var(--sp-1);
  font-size: var(--fs-body-lg);
  color: var(--color-text-subtle);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.mu-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--bw-tab);
  border-radius: 2px 2px 0 0;
  background: var(--color-primary);
  transform: scaleX(0);
  transition: transform var(--dur-base) var(--ease-spring);
}

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

.mu-tab.is-active,
.mu-tab[aria-selected="true"] {
  color: var(--color-text);
}

.mu-tab.is-active::after,
.mu-tab[aria-selected="true"]::after {
  transform: scaleX(1);
}

.mu-tab__count {
  margin-left: var(--sp-1);
  color: var(--color-text-subtle);
}

/* ================= Auf- und Zuklappen (design/MOTION.md M8) =================
   Inhalt hängt im Zwischen-Element: .mu-collapse > div > Inhalt. Geschlossen zusätzlich inert setzen. */
.mu-collapse {
  display: grid;
  flex-shrink: 0; /* in Flex-Spalten mit fester Höhe sonst auf 0 gedrückt, der Inhalt zählt wegen min-height: 0 nicht */
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}

/* relative: Auch absolut gesetzte Kinder (versteckte Eingaben, Menüs) bleiben im Zugeklappten, sonst verlängern sie die Seite */
.mu-collapse > * {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.mu-collapse.is-closed {
  grid-template-rows: 0fr;
}

.mu-collapse > * > * {
  transition: opacity var(--dur-fast) var(--ease-out);
}

.mu-collapse.is-closed > * > * {
  opacity: 0;
}

/* ================= Listen ================= */
.mu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mu-list__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: var(--bw) solid var(--color-surface-muted);
}

.mu-list__item:last-child { border-bottom: 0; }

/* ================= Sets (Setlisten): Karte je Set mit Titel, Angaben, Richtungen und Songs =================
   Anzeige (js/artist-sets.js) und Liste im Editor (js/artist-sets-editor.js). */
.mu-sets {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mu-set {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--color-surface-soft);
}

.mu-set.is-featured { border-color: var(--color-accent); box-shadow: 0 0 0 var(--bw) var(--color-accent); }

.mu-set__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* Kachel und Text nebeneinander, wie die Event-Zeile */
.mu-set__lead {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-width: 0;
}

.mu-set__tile { flex: none; background: var(--color-surface); }
.mu-set__tile .mu-date-tile__month { text-transform: none; }

/* Zahl der Sets und Anlegen über der Liste */
.mu-sets-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.mu-set__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.mu-set__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.mu-set__meta {
  font-size: var(--fs-small);
  color: var(--color-text-subtle);
}

.mu-set__actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-1);
}

@media (max-width: 600px) {
  .mu-set__head { flex-direction: column; align-items: stretch; }
  .mu-set__actions { justify-content: flex-end; }
}

/* Songliste mit Nummer, Interpret und Titel, Abzeichen am Ende */
.mu-songs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mu-songs__item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: var(--bw) solid var(--color-surface-muted);
  font-size: var(--fs-body);
}

.mu-songs__item:last-child { border-bottom: 0; }
.mu-songs + .mu-songs { border-top: var(--bw) solid var(--color-surface-muted); }

.mu-songs__num {
  flex: none;
  min-width: 2ch;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-subtle);
}

.mu-songs__main {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.mu-songs__composer { color: var(--color-text-subtle); }

/* Lange Vorschau im Dialog (Import) scrollt in sich */
.mu-songs--scroll {
  max-height: min(280px, 40dvh);
  overflow-y: auto;
}

/* ================= Schrittpunkte: kurzer Fortschritt in Dialogen mit zwei bis vier Schritten ================= */
.mu-dots {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.mu-dots__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--color-border-strong);
  transition: width var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.mu-dots__dot.is-done { background: var(--color-primary); }
.mu-dots__dot[aria-current="step"] { width: 20px; background: var(--color-accent); }

/* Zusammenfassungszeile (Symbol, Wert, ändern) */
.mu-summary {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--sp-3);
}

.mu-summary__title {
  font-size: var(--fs-body-lg);
  color: var(--color-text-subtle);
  text-align: center;
}

.mu-summary__row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
}

.mu-summary__row svg { width: 14px; height: 14px; color: var(--color-text-strong); }

/* Fortschritt */
.mu-progress {
  height: var(--bw-progress);
  border-radius: var(--r-pill);
  background: var(--color-surface-muted);
  overflow: hidden;
}

.mu-progress__bar {
  height: 100%;
  width: var(--progress, 0%);
  border-radius: inherit;
  background: var(--color-accent);
  transition: width var(--dur-slow) var(--ease-spring);
}

/* ================= Avatare und Bildrahmen ================= */
.mu-avatar {
  --avatar-size: 40px;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  flex: none;
  border-radius: var(--avatar-radius);
  background: var(--color-primary);
  color: var(--color-text-on-brand);
  font-size: calc(var(--avatar-size) * 0.38);
  font-weight: var(--fw-medium);
  line-height: 1;
  overflow: hidden;
  text-transform: uppercase;
}

.mu-avatar img {
  border-radius: inherit;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mu-avatar--xs { --avatar-size: 30px; background: var(--c-placeholder); color: var(--color-text); }
.mu-avatar--sm { --avatar-size: 32px; }
.mu-avatar--lg { --avatar-size: 56px; }
.mu-avatar--xl { --avatar-size: 96px; }
.mu-avatar--muted { background: var(--c-placeholder); color: var(--color-text); }

.mu-frame {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-muted);
  border-radius: var(--r-md);
  aspect-ratio: var(--frame-ratio, 16 / 9);
}

.mu-frame > img,
.mu-frame > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mu-frame--square { --frame-ratio: 1 / 1; }
.mu-frame--promo { --frame-ratio: 2 / 1; border-radius: var(--r-lg); }
.mu-frame--header { --frame-ratio: 3 / 1; border-radius: var(--r-lg) var(--r-lg) 0 0; }

.mu-frame__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-text-subtle);
}

.mu-frame__fallback svg { width: 40px; height: 40px; }

/* ================= Faktenliste (Symbol im Kreis, Beschriftung, Wert) ================= */
.mu-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4) var(--sp-5);
}

.mu-facts__item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
}

.mu-facts__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-round);
  background: var(--color-surface-muted);
  color: var(--color-primary);
}

.mu-facts__icon svg { width: 15px; height: 15px; }
.mu-facts__body { display: grid; gap: var(--sp-1); min-width: 0; }
.mu-facts__label { font-size: var(--fs-micro); color: var(--color-text-subtle); }
.mu-facts__value { font-size: var(--fs-body); color: var(--color-text); overflow-wrap: anywhere; }
.mu-facts__value .mu-chips { margin-top: var(--sp-1); }

/* ================= Leerzustand ================= */
.mu-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
}

.mu-empty__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-round);
  background: var(--color-primary);
  color: var(--color-text-on-brand);
}

.mu-empty__icon svg { width: 26px; height: 26px; }
.mu-empty__icon--sm { width: 30px; height: 30px; }
.mu-empty__icon--sm svg { width: 16px; height: 16px; }
.mu-empty__title { font-size: var(--fs-h2); font-weight: var(--fw-medium); }

.mu-empty__text {
  font-size: var(--fs-body-lg);
  font-style: italic;
  color: var(--color-text-subtle);
  max-width: 42ch;
}

/* ================= Hinweisbox (inline) ================= */
/* Termine einer Serie untereinander (F24t Punkt 174): Datum, Stand, „Musiker zuweisen“, darunter die Suche */
.mu-slot-list { display: grid; margin: 0; padding: 0; list-style: none; }
.mu-slot-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) 0; border-bottom: var(--bw) solid var(--color-surface-muted); }
.mu-slot-row:last-child { border-bottom: 0; }
.mu-slot-row__date { flex: 0 0 9.5em; font-weight: var(--fw-medium); }
.mu-slot-row__status { flex: 1 1 auto; min-width: 0; justify-content: flex-start; white-space: normal; }
.mu-slot-row > .mu-btn { flex: none; margin-left: auto; }
.mu-slot-row__pick { flex: 1 1 100%; display: grid; gap: var(--sp-2); padding: var(--sp-2) 0 var(--sp-1); }
.mu-slot-row__pick[hidden] { display: none; }

/* Vorschau des eigenen Profils (F24t Punkt 169): Streifen oben, Schließen rechts */
.mu-preview-bar { align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.mu-preview-bar .mu-btn { flex: none; }

.mu-note {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-purple-10);
  color: var(--color-text);
  font-size: var(--fs-body);
}

.mu-note--accent { background: var(--c-orange-10); }

/* Stand eines Vorgangs in Worten: was gerade ist, wer dran ist, was als Nächstes kommt (Team, F24o) */
.mu-stand {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--color-surface-soft);
}
.mu-stand__state { margin: 0; font-size: var(--fs-body-lg); font-weight: var(--fw-medium); color: var(--color-text); }
.mu-stand__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); margin: 0; }
.mu-stand__facts dt { font-size: var(--fs-small); color: var(--color-text-muted); }
.mu-stand__facts dd { margin: 0; font-size: var(--fs-body); color: var(--color-text); }
.mu-note--danger { background: var(--color-surface); box-shadow: inset 0 0 0 var(--bw) var(--color-danger); color: var(--color-danger-text); }

/* Erklärung zur gewählten Kachel, unter der Kachelreihe (Figma Technikcheck) */
.mu-option-note {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--c-surface-3);
  color: var(--c-ink-subtle);
  font-size: var(--fs-body);
  font-style: italic;
  line-height: var(--lh-base);
  text-align: center;
}

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

/* ================= Einbettungen und Hilfsklassen aus geteilten Skripten (Session 11) ================= */
/* Medien-Einbettung füllt den Rahmen (SoundCloud, Spotify, Vorschau-Bilder) */
.mu-embed-fill { display: block; width: 100%; height: 100%; border: 0; }
.mu-embed-fill--cover { object-fit: cover; }
.mu-embed-contain { max-width: 100%; max-height: 100%; }
.mu-embed-center { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.spotify-embed { display: block; width: 100%; height: var(--spotify-h, 352px); border: 0; border-radius: var(--r-sm-lg); }

/* Aufzählung in Dialogen (PWA-Installation, Profil-Aktualität) */
.mu-dialog-list { margin: var(--sp-3) 0 0; padding-left: 1.25rem; text-align: left; line-height: var(--lh-base); }
.mu-dialog-list li + li { margin-top: var(--sp-1); }

/* Kurze Ladefehler und Leertexte in Listen */
.mu-inline-empty { padding: var(--sp-3); font-size: var(--fs-small); color: var(--color-text-subtle); }

/* Medienrahmen mit Coverbild aus den Daten (--cover-url) */
.mu-cover-bg { background-image: var(--cover-url); background-size: cover; background-position: center; }

/* Fristleiste Gigangebot (js/gig-offer-shared.js) */
.go-deadline { display: flex; flex-direction: column; gap: var(--sp-2); }
.go-deadline-copy { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); color: var(--color-text-muted); }
.go-deadline-copy svg { width: 16px; height: 16px; flex-shrink: 0; }
.go-deadline-track,
.go-deadline-mini { position: relative; display: block; height: 6px; border-radius: var(--r-pill); background: var(--color-surface-muted); overflow: hidden; }
.go-deadline-mini { width: 48px; height: 4px; }
.go-deadline-fill,
.go-deadline-mini-fill { display: block; height: 100%; width: var(--pct, 0%); border-radius: inherit; background: var(--color-primary); transition: width var(--dur-base) var(--ease-out); }
.go-deadline--urgent .go-deadline-fill,
.go-deadline-mini--urgent .go-deadline-mini-fill { background: var(--color-accent); }
.go-deadline--urgent .go-deadline-copy { color: var(--color-accent-text); }

/* Wartungshinweis auf der Login-Seite (js/platform-maintenance.js) */
.maintenance-login-notice { margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--c-orange-10); color: var(--color-accent-text); font-size: var(--fs-body-lg); line-height: var(--lh-base); }

/* Termin-Badge in Ausschreibungen (js/tender-display-i18n.js) */
.badge-when { display: block; margin-bottom: var(--sp-1); font-weight: var(--fw-bold); color: var(--color-primary); }
.badge-sub { line-height: 1.4; }

/* ================= Medien-Upload-Kachel (create-event, edit-event, edit-profile-*, media-wizard) ================= */
.carousel-item .upload-container,
.upload-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: var(--r-sm-lg);
  background: var(--color-surface-muted);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .upload-container:hover { transform: scale(1.04); box-shadow: var(--sh-1); }
}
.upload-container.required { border: 2px dashed var(--color-primary); }
.upload-container.optional { border: 2px dashed var(--color-border-strong); }
.upload-container.has-preview { border-style: solid; border-color: transparent; }
.upload-container.active { box-shadow: 0 0 0 3px var(--color-accent); }
.upload-container .content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--color-text-subtle); }
.upload-container.has-preview .content { visibility: hidden; pointer-events: none; }
.upload-icon { width: 24px; height: 24px; stroke: currentColor; }
/* Leere Vorschau: die ganze Fläche ist der Weg zum ersten Upload (edit-profile-organizers) */
.mu-upload-hint { position: absolute; inset: 0; width: 100%; padding: 0 var(--sp-4) var(--sp-20); border: 0; background: none; color: var(--color-text-muted); font: inherit; text-align: center; cursor: pointer; }
@media (hover: hover) {
  .mu-upload-hint:hover { color: var(--color-primary); }
}
.upload-container .file-upload { position: absolute; inset: 0; }
.upload-container .file-upload input[type="file"] { display: none; }
.upload-container .preview-wrapper { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.upload-container img,
.upload-container video,
.upload-container .preview-wrapper img,
.upload-container .preview-wrapper video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.upload-container.video::after,
.media-play-badge {
  content: '▶';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--c-white);
  font-size: var(--fs-h3);
  text-shadow: 0 0 6px rgb(var(--c-black-rgb) / 0.6);
  pointer-events: none;
}
.remove-media {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-round);
  background: var(--color-danger);
  color: var(--c-white);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  line-height: 1;
  cursor: pointer;
}
.remove-media::after { content: '×'; }
.upload-container.has-preview > .remove-media { display: flex; }
@media (hover: hover) {
  .remove-media:hover { background: var(--c-danger-hover); }
}

/* Push-Einstellungen (js/pwa-push.js, in Einstellungen und als Dialog) */
.pwa-push-help { margin: 0 0 var(--sp-3); font-size: var(--fs-body-lg); color: var(--color-text-muted); }
.pwa-push-toggle { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-semibold); cursor: pointer; }
.pwa-push-settings .change-button,
[id^="pwaPushSettingsGroup"] .change-button { margin-top: var(--sp-2); }
.pwa-push-status { margin-top: var(--sp-2); font-size: var(--fs-body-lg); color: var(--color-text-muted); }
.pwa-push-note { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--color-text-subtle); }

/* Angebot der Musikschaffenden (js/tender-artist-offer.js) */
.artist-offer-label { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); }
.artist-offer-fee-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.artist-offer-fee-input { flex: 1; }
.artist-offer-currency { flex-shrink: 0; font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--color-text); }
.artist-offer-note { width: 100%; resize: vertical; }
.artist-offer-box { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--color-success); border-radius: var(--r-xs); background: rgb(var(--c-genre-jazz-rgb) / 0.12); color: var(--color-text); font-size: var(--fs-small); line-height: var(--lh-base); text-align: left; }
.artist-offer-box--lg { margin-top: 0; padding: var(--sp-3) var(--sp-4); border-left-width: 4px; font-size: var(--fs-body-lg); }
.artist-offer-box-gap { margin-top: var(--sp-2); }
.artist-offer-date { margin: var(--sp-3) 0 0; font-size: var(--fs-small); color: var(--color-text-muted); text-align: left; }

/* ================= Kalender: Tagesfenster (MuveupCalendar.day, Bedienung in js/ui/tooltip.js) =================
   Fest im Fenster: Kein Kasten schneidet es ab, und solange es zu ist, macht es nichts scrollbar. */
.mini-calendar-day-wrap { position: relative; }
.mini-calendar-day-wrap:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; border-radius: var(--r-xs); }
.mu-cal-pop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-popover);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: min(296px, calc(100vw - 2 * var(--sp-4)));
  max-height: min(440px, calc(100dvh - 2 * var(--sp-4)));
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--color-surface);
  box-shadow: var(--sh-3);
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
/* Maus kommt ohne Lücke vom Tag ins Fenster */
.mu-cal-pop::before { content: ''; position: absolute; inset: calc(-1 * var(--sp-2)) 0; z-index: -1; }
.mini-calendar-day-wrap.is-open .mu-cal-pop { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.mu-cal-pop__date { flex: none; margin: 0; font-size: var(--fs-body-lg); font-weight: var(--fw-medium); }
.mu-cal-pop__list { display: grid; gap: var(--sp-3); min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.mu-cal-pop__item { display: grid; gap: var(--sp-1); }
.mu-cal-pop__item + .mu-cal-pop__item { padding-top: var(--sp-3); border-top: var(--bw) solid var(--color-surface-muted); }
.mu-cal-pop__title { margin: 0; font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.mu-cal-pop__meta { display: grid; gap: 2px; margin: 0; font-size: var(--fs-small); }
.mu-cal-pop__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-2); }
.mu-cal-pop__row dt { color: var(--color-text-subtle); }
.mu-cal-pop__row dd { margin: 0; overflow-wrap: anywhere; }
.mu-cal-pop__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.mu-cal-pop__actions .mu-btn { min-width: 0; min-height: 30px; padding: 0 var(--sp-4); font-size: var(--fs-small); }

/* ================= „Zugriff verweigert“ aus Bestands-Seiten (nur sichtbar mit .active) ================= */
.access-denied { position: fixed; inset: 0; z-index: var(--z-dialog); display: none; align-items: center; justify-content: center; padding: var(--sp-4); background: var(--color-overlay); }
.access-denied.active { display: flex; }
.access-denied-content { width: min(var(--dialog-w), 100%); padding: var(--sp-6); border-radius: var(--r-lg); background: var(--color-surface); box-shadow: var(--sh-3); text-align: center; }
.access-denied-content h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-h2); font-weight: var(--fw-medium); color: var(--color-primary); }
.access-denied-content p { margin: 0 0 var(--sp-5); color: var(--color-text-muted); line-height: var(--lh-base); }
.access-denied-content button { min-height: var(--control-h-lg); padding: 0 var(--sp-6); border: 0; border-radius: var(--r-pill); background: var(--color-primary); color: var(--color-text-on-brand); font: inherit; font-weight: var(--fw-medium); cursor: pointer; }

/* ================= Validierungs-Hinweis der Bestands-Formulare =================
   Unsichtbar bis das Skript ihn per style.display oder .is-visible einblendet (früher artist-wizard.css). */
.validation-hint { display: none; margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--color-danger-text); }
.validation-hint.is-visible,
.validation-hint.visible { display: block; }

/* ================= Fragen und Info-Hinweise der Bestands-Formulare =================
   DESIGN.md: Frage über dem Feld 15 Regular --color-text, Stern direkt an der Frage.
   Der Hilfetext (.info-tooltip) liegt im Info-Kreis und erscheint bei Hover oder Fokus. */
:where(.form-group, .input-group) > label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  color: var(--color-text);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
}

:where(.info-icon) {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--r-round);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  font-style: normal;
  line-height: 1;
  cursor: help;
}

:where(.info-icon)::before { content: 'i'; }
:where(.info-icon):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Tooltip-Text bleibt im Markup, angezeigt wird er als Blase .mu-tip */
.info-icon > .info-tooltip,
.mu-tooltip__text { display: none; }

/* ================= Kalender-Baustein (js/ui/calendar.js), Dashboard und Buchungsassistent ================= */
.mu-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: var(--bw) solid var(--color-surface-muted);
  border-left: var(--bw) solid var(--color-surface-muted);
}

.mu-cal__wd {
  padding: var(--sp-2) var(--sp-1);
  border-right: var(--bw) solid var(--color-surface-muted);
  border-bottom: var(--bw) solid var(--color-surface-muted);
  font-size: var(--fs-micro);
  font-weight: var(--fw-regular);
  color: var(--color-text-subtle);
  text-align: center;
}

.mu-cal__wd-short { display: none; }

.mu-cal__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-1);
  min-height: 79px;
  padding: var(--sp-1) var(--sp-1) var(--sp-2);
  border: 0;
  border-right: var(--bw) solid var(--color-surface-muted);
  border-bottom: var(--bw) solid var(--color-surface-muted);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: left;
}

button.mu-cal__cell { cursor: pointer; }
@media (hover: hover) {
  /* Gewählte Tage behalten beim Darüberfahren ihre Farbe, nur das Minus erscheint (F24t Punkt 128) */
  button.mu-cal__cell:not(.is-selected, .is-picked, .is-flow-pick):hover { background: var(--color-surface-soft); }
}

.mu-cal__num {
  align-self: flex-end;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--sp-1);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  line-height: 1;
}

.mu-cal__cell.is-other .mu-cal__num,
.mu-cal__cell.is-off .mu-cal__num { color: var(--color-text-placeholder); }

.mu-cal__cell.is-today .mu-cal__num {
  background: var(--color-accent);
  color: var(--color-text-on-brand);
}

/* Gewählter Tag: lila Fläche (F2), mit „+ Event erstellen“ */
.mu-cal__cell.is-selected,
.mu-cal__cell.is-picked {
  background: var(--color-primary);
  color: var(--color-text-on-brand);
  border-radius: var(--r-xs);
}

.mu-cal__cell.is-selected .mu-cal__num,
.mu-cal__cell.is-picked .mu-cal__num { color: var(--color-text-on-brand); font-weight: var(--fw-bold); }

/* Tage der Direktanfrage in der Auswahlfarbe der Pillen, orange wie die Legende (F24t Punkt 115). Die Buchungsassistenz bleibt lila */
.mu-cal__cell.is-flow-pick { background: var(--chip-on, var(--color-accent)); }
.mu-cal__cell.is-flow-pick.mu-cal__cell--remove::after { color: var(--chip-on, var(--color-accent)); }

.mu-cal__add {
  margin: auto 0;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  text-align: center;
}

/* Weitere Termine als neutrale Pille mit Punkten (F24t Punkt 167) */
.mu-cal__more {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  align-self: flex-start;
  max-width: 100%;
  padding: 1px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  white-space: nowrap;
}

/* Im großen Kalender oben links neben der Tageszahl: braucht keine eigene Zeile, auch in niedrigen Zellen ganz sichtbar */
.mu-cal:not(.mu-cal--mini) .mu-cal__cell > .mu-cal__more { position: absolute; top: var(--sp-1); left: var(--sp-1); max-width: calc(100% - 28px); }

.mu-cal__more-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--r-round);
  background: var(--status-color, var(--color-border-strong));
}

/* Termin-Kästen bleiben immer in ihrer Zelle (F24t Punkt 168): höchstens so breit wie die Zelle, Text mit Auslassung */
.mu-cal__cell,
.mini-calendar-day-wrap { min-width: 0; }

.mu-cal-chip {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  max-width: 100%;
  padding: var(--sp-1) var(--sp-1);
  border-radius: var(--r-xs);
  background: var(--chip-bg, var(--color-cal-request));
  color: var(--color-text);
  font-size: var(--fs-micro);
  line-height: 1.25;
}

.mu-cal-chip__title { font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-cal-chip__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-cal-chip--fixed { --chip-bg: var(--color-cal-fixed); }
.mu-cal-chip--request { --chip-bg: var(--color-cal-request); }
.mu-cal-chip--tender { --chip-bg: var(--color-cal-tender); }
.mu-cal-chip--draft { --chip-bg: var(--color-cal-draft); }
.mu-cal-chip--danger { --chip-bg: var(--color-cal-tender); box-shadow: inset 3px 0 0 var(--color-danger); }
/* Zwei Termine: zwei gleiche kompakte Kästen untereinander, nur der Titel (F24t Punkt 167b) */
.mu-cal-chip--compact { padding-block: 2px; }
.mu-cal__more--narrow { display: none; }

@media (max-width: 900px) {
  .mu-cal__wd-long { display: none; }
  .mu-cal__wd-short { display: inline; }
  .mu-cal__cell { min-height: 48px; }
  .mu-cal-chip { padding: 2px; }
  .mu-cal-chip__meta { display: none; }
  /* Hier passt nur ein Kasten: einer und „+n“ für den Rest */
  .mu-cal-chip--second,
  .mu-cal__more--wide { display: none; }
  .mu-cal__more--narrow { display: inline-flex; }
}

/* Monatswechsel gleitet (design/MOTION.md M6). Der Rahmen schneidet nur, solange es läuft, sonst bliebe das Tages-Popover hängen */
.mu-cal.slide-next { animation: mu-slide-in-right var(--dur-base) var(--ease-out) both; }
.mu-cal.slide-prev { animation: mu-slide-in-left var(--dur-base) var(--ease-out) both; }
:has(> .mu-cal.slide-next),
:has(> .mu-cal.slide-prev) { overflow: clip; }

/* Kompakte Form für die rechte Spalte (Musiker, Master): Raster ohne Linien,
   Tageszahl mittig, heute oranger Kreis, Termine als Punkte in den Farben der Status-Punkte */
.mu-cal--mini {
  gap: 2px;
  border: 0;
}
.mu-cal--mini .mu-cal__wd {
  padding: var(--sp-1) 0;
  border: 0;
}
.mu-cal--mini .mu-cal__wd-long { display: none; }
.mu-cal--mini .mu-cal__wd-short { display: inline; }
.mu-cal--mini .mini-calendar-day-wrap { display: flex; }
.mu-cal--mini .mu-cal__cell {
  flex: 1;
  align-items: center;
  gap: 2px;
  min-height: 40px;
  padding: 2px;
  border: 0;
  border-radius: var(--r-xs);
}
.mu-cal--mini .mini-calendar-day-wrap .mu-cal__cell { cursor: pointer; }
.mu-cal--mini .mini-calendar-day-wrap:hover .mu-cal__cell { background: var(--color-surface-soft); }
.mu-cal--mini .mu-cal__num {
  align-self: center;
  min-width: 24px;
  height: 24px;
  font-size: var(--fs-small);
}
.mu-cal--mini .mu-cal__cell.is-past:not(.is-today) .mu-cal__num { color: var(--color-text-placeholder); }
.mu-cal__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 6px;
}
.mu-cal__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--r-round);
  background: var(--status-color, var(--color-border-strong));
}
.mu-cal__dots-more { font-size: var(--fs-micro); line-height: 1; color: var(--color-text-muted); }
.mu-cal__cell.is-other .mu-cal__dots,
.mu-cal--mini .mu-cal__cell.is-past:not(.is-today) .mu-cal__dots { opacity: 0.5; }

/* Musikerkarte, kompakt (Mein Musikprofil): Anfragen oben rechts, Fuß mit Avatar, Name und „zum Profil“ */
/* Testkonto und echtes Profil (F24t Punkt 158): ruhig, nicht anklickbar, Hinweis als Tooltip */
.mu-artist-card__ask[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.mu-artist-card__ask {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: var(--z-raised);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--color-accent);
  color: var(--color-text-on-brand);
  font-size: var(--fs-body);
  text-decoration: none;
}
@media (hover: hover) {
  .mu-artist-card__ask:hover { background: var(--color-accent-hover); }
}
.mu-artist-card__who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mu-artist-card__who .mu-artist-card__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-artist-card__link { flex: none; align-self: center; color: inherit; font-size: var(--fs-small); text-decoration: underline; white-space: nowrap; }
.mu-artist-card .mu-avatar { position: relative; overflow: hidden; flex: none; }
.mu-artist-card .mu-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mu-artist-card .mu-tag { font-size: var(--fs-tag); }

/* Musikerkarte mit Knopfpaar und Hinweisen darunter (Frames suggestions-organizers--empfehlungen, --abweichend) */
.mu-artist-item { display: flex; flex: none; flex-direction: column; gap: var(--sp-4); width: var(--artist-card-w); max-width: 100%; }
.mu-artist-item__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.mu-artist-item__actions .mu-btn { width: 100%; min-width: 0; }
.mu-artist-item__note { margin: 0; color: var(--color-text-muted); font-size: var(--fs-micro); text-align: center; }
.mu-artist-item .master-team-note { margin: 0; }
.mu-artist-item.is-asked .mu-artist-card { opacity: 0.72; }
.mu-artist-card__fee.mu-pill,
.mu-artist-card__fee .mu-pill { min-height: 32px; padding: 0 var(--sp-4); }
/* Pille öffnet die Erklärung zur Gage, die Karte schneidet ab, deshalb klappt der Text in die Karte */
.mu-tooltip.mu-artist-card__fee { position: absolute; }
/* Setliste vorhanden: kleines Symbol in der Pille, Erklärung im Tooltip (F24r Punkt 73) */
.mu-setlist-mark { display: inline-flex; margin-left: var(--sp-1); }
.mu-setlist-mark__btn.mu-tooltip__icon { width: 18px; height: 18px; padding: 0; border: 0; background: none; color: currentColor; }
.mu-setlist-mark__btn.mu-tooltip__icon::after { inset: calc((18px - var(--tap-min)) / 2); }
.mu-setlist-mark__btn svg,
.mu-setlist-mark > svg { width: 16px; height: 16px; }
/* Musikprofil: oben rechts steht „Anfragen“, die Gage rückt nach links (F24r Punkt 66) */
.mu-artist-card:has(.mu-artist-card__ask, .mu-artist-card__cta) .mu-artist-card__fee { top: var(--sp-3); right: auto; left: var(--sp-3); }
/* Aktionen in der Karte statt Knopfzeile darunter (F24t Punkt 164): oben rechts über Hörprobe und Tippzonen */
button.mu-artist-card__ask { border: 0; font: inherit; font-size: var(--fs-body); cursor: pointer; }
.mu-artist-card__ask,
.mu-artist-card__cta { z-index: calc(var(--z-raised) + 1); }
.mu-artist-card__cta { position: absolute; top: var(--sp-3); right: var(--sp-3); display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); }
.mu-artist-card__cta .mu-btn { min-height: 32px; }
.mu-tooltip__icon.mu-tooltip__icon--pill { width: auto; height: auto; border: 0; border-radius: var(--r-pill); background: var(--color-primary); color: var(--color-text-on-brand); font-size: var(--fs-small); font-weight: var(--fw-medium); white-space: nowrap; }
.mu-tooltip__icon.mu-tooltip__icon--pill::after { inset: 0; }
.mu-artist-card__status { position: absolute; top: var(--sp-4); left: var(--sp-4); z-index: var(--z-raised); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: var(--color-surface); color: var(--color-text); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.mu-artist-card__fee ~ .mu-artist-card__status { top: calc(var(--sp-4) + 40px); }
.mu-artist-card__body > .mu-popover-anchor { flex: none; }
.mu-artist-card__more { --ib-fg: var(--color-text-on-brand); }
@media (hover: hover) {
  .mu-artist-card__more:hover { --ib-bg: rgb(var(--c-white-rgb) / 0.14); }
}
.mu-artist-card__more svg { width: 18px; height: 18px; }
a.mu-artist-card__name { color: inherit; text-decoration: none; }
@media (hover: hover) {
  a.mu-artist-card__name:hover { text-decoration: underline; }
}

/* Reihe von Musikerkarten im Karussell: passen alle Karten, stehen sie verteilt wie im Figma */
.mu-carousel--artists .mu-carousel__track { gap: var(--sp-8); padding: var(--sp-1) var(--sp-1) var(--sp-3); scroll-padding-inline: var(--sp-1); }
.mu-carousel--artists:not(.can-prev):not(.can-next) .mu-carousel__track { justify-content: space-evenly; }

/* ================= Event-Detail nach Figma (Dashboard rechte Spalte und Vorgangsseiten, js/gig-offer-shared.js) ================= */
.go-dhead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
  border-bottom: var(--bw) solid var(--color-border);
}

.mu-date-tile--lg { width: 46px; height: 46px; }
.go-dhead__text { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; column-gap: var(--sp-3); min-width: 0; }
.go-dhead__kind { flex-basis: 100%; font-size: var(--fs-small); color: var(--color-text-subtle); }
.go-dhead__title { max-width: 100%; margin: 0; font-size: var(--fs-h1); font-weight: var(--fw-medium); color: var(--color-text); line-height: 1.25; overflow-wrap: break-word; }
.go-dhead__sub { flex-basis: 100%; margin: var(--sp-1) 0 0; font-size: var(--fs-micro); color: var(--color-text-subtle); }
.go-dhead__status { margin-bottom: var(--sp-1); }

/* ================= Bewerbungen (Frames buchungsassistent 11 bis 14, js/organizer-applicants.js) =================
   Fotos in der rechten Spalte, Fenster mit Event-Daten links und Karten auf Lila, Prüfschritt. */
.mu-applicants-preview { margin-top: 0; }
.mu-applicants-preview__lead { margin: 0 0 var(--sp-3); color: var(--color-primary); font-weight: var(--fw-medium); line-height: 1.35; }
.mu-applicants-preview__photos { display: flex; justify-content: center; gap: var(--sp-1); overflow: hidden; padding: var(--sp-5) 0; border-radius: var(--r-xl); background: var(--c-purple-100); }
.mu-applicants-preview__photo { position: relative; display: grid; flex: none; width: 176px; aspect-ratio: 1 / 1; place-items: center; overflow: hidden; border-radius: var(--r-lg); background: var(--c-ink); color: var(--color-text-on-brand); font-size: var(--fs-h2); }
.mu-applicants-preview__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.mu-applicants-photo__letter { font-weight: var(--fw-medium); }

.mu-applicants-cta { display: inline-flex; align-items: center; gap: var(--sp-3); padding: 0; border: 0; background: none; color: var(--color-primary); font-size: var(--fs-body); line-height: 1.3; text-align: right; cursor: pointer; }
.mu-applicants-cta__text { max-width: 96px; }
.mu-applicants-cta__dot { display: grid; flex: none; width: 37px; height: 37px; place-items: center; border-radius: var(--r-round); background: var(--color-primary); color: var(--color-text-on-brand); transition: transform var(--dur-fast) var(--ease-out); }
.mu-applicants-cta__dot svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .mu-applicants-cta:hover .mu-applicants-cta__dot { transform: translateX(2px); }
}
.mu-applicants-cta.is-new { color: var(--color-danger); }
.mu-applicants-cta.is-new .mu-applicants-cta__dot { background: var(--color-danger); }

.mu-applicants-chosen { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); }
.mu-applicants-chosen__name { font-size: var(--fs-h3); font-weight: var(--fw-medium); }
.mu-applicants-chosen .mu-artist-card__link { color: var(--color-text); }
.mu-applicants-chosen__photo { position: relative; overflow: hidden; flex: none; }
.mu-applicants-chosen__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.mu-panel--applicants .mu-panel__title { display: none; }
.mu-panel--applicants .mu-panel__head { position: absolute; top: 0; right: 0; z-index: var(--z-raised); padding: var(--sp-4); }
.mu-panel--applicants.is-applicants-list .mu-panel__body { display: flex; padding: 0; overflow: hidden; }
.mu-panel--applicants.is-applicants-list .mu-panel__foot { display: grid; grid-template-columns: var(--applicants-event-w) minmax(0, 1fr); gap: 0; padding: 0; }
.mu-panel--applicants.is-applicants-fix .mu-panel__body { padding-top: var(--sp-6); padding-bottom: 0; }
.mu-panel--applicants .go-dhead { padding-right: var(--sp-8); }
.mu-panel--applicants .mu-field + .mu-field { margin-top: var(--sp-3); }

.mu-applicants { display: grid; grid-template-columns: var(--applicants-event-w) minmax(0, 1fr); width: 100%; min-height: 0; }
.mu-applicants__event { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-6) var(--sp-6) var(--sp-3); }
.mu-applicants__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden auto; padding: var(--sp-8) 0 var(--sp-3) var(--sp-6); border-left: var(--bw) solid var(--color-primary); border-top-right-radius: var(--r-lg); background: var(--c-purple-100); }
.mu-applicants__title { max-width: 400px; margin: 0; padding-right: var(--sp-8); font-size: var(--fs-h1); font-weight: var(--fw-medium); line-height: 1.25; text-wrap: balance; }
.mu-applicants__places { margin: var(--sp-2) 0 0; color: var(--color-text-subtle); font-size: var(--fs-body-lg); font-weight: var(--fw-medium); }
.mu-applicants__carousel { --applicants-inset: calc(var(--sp-20) + var(--sp-10)); margin-top: var(--sp-3); margin-left: calc(-1 * var(--sp-6)); }
.mu-applicants__carousel .mu-carousel__bar { margin-left: var(--applicants-inset); }
.mu-applicants__carousel .mu-carousel__track { gap: var(--sp-6); padding: var(--sp-1) var(--applicants-inset) var(--sp-2); scroll-padding-inline: var(--applicants-inset); }
.mu-applicants__carousel .mu-carousel__track { --fade: 96px; }
.mu-applicants__carousel.can-prev .mu-carousel__track { -webkit-mask-image: linear-gradient(90deg, rgb(var(--c-black-rgb) / 0.3) 0%, rgb(var(--c-black-rgb)) var(--fade)); mask-image: linear-gradient(90deg, rgb(var(--c-black-rgb) / 0.3) 0%, rgb(var(--c-black-rgb)) var(--fade)); }
.mu-applicants__carousel.can-prev.can-next .mu-carousel__track { -webkit-mask-image: linear-gradient(90deg, rgb(var(--c-black-rgb) / 0.3) 0%, rgb(var(--c-black-rgb)) var(--fade), rgb(var(--c-black-rgb)) calc(100% - var(--fade)), rgb(var(--c-black-rgb) / 0.3) 100%); mask-image: linear-gradient(90deg, rgb(var(--c-black-rgb) / 0.3) 0%, rgb(var(--c-black-rgb)) var(--fade), rgb(var(--c-black-rgb)) calc(100% - var(--fade)), rgb(var(--c-black-rgb) / 0.3) 100%); }

.mu-applicant { display: flex; flex-direction: column; gap: var(--sp-4); width: var(--artist-card-w); }
.mu-artist-card--playable { box-shadow: var(--sh-3); }
.mu-artist-card--playable .media-container { position: absolute; inset: 0; z-index: var(--z-raised); background: none; }
.mu-artist-card--playable .media-container--still { pointer-events: none; }
.mu-artist-card--playable .media-slot-stack,
.mu-artist-card--playable .media-slot { position: absolute; inset: 0; }
.mu-artist-card--playable .media-slot > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }
.mu-artist-card--playable .media-container.active .media-slot > * { opacity: 1; }
.mu-artist-card--playable .media-slot .sound-bars-wrap { display: none; }
.mu-artist-card--playable .media-slot:not(.media-slot--active) { display: none; }
.mu-artist-card--playable .media-progress { position: absolute; top: var(--sp-2); left: var(--sp-3); right: var(--sp-3); z-index: var(--z-raised); display: flex; gap: var(--sp-1); pointer-events: none; }
.mu-artist-card--playable .media-progress span { flex: 1; height: 2px; border-radius: 1px; background: rgb(var(--c-white-rgb) / 0.35); }
.mu-artist-card--playable .media-progress span.active { background: var(--color-text-on-brand); }
.mu-artist-card--playable .media-zone { position: absolute; top: 0; bottom: 0; z-index: var(--z-raised); width: 25%; padding: 0; border: 0; background: none; cursor: pointer; }
.mu-artist-card--playable .media-zone--prev { left: 0; }
.mu-artist-card--playable .media-zone--next { right: 0; }
/* Eingebettete Player (Spotify, SoundCloud, YouTube) bringen eigene Bedienung mit: Die Tippflächen schrumpfen zu kleinen
   Pfeilen am Rand, damit sie nichts verdecken. Spotify und SoundCloud nehmen Klicks selbst an, YouTube läuft ohne eigene Bedienung über die Karte (F24r) */
.mu-artist-card--playable .media-container:is(.is-spotify, .is-soundcloud).active .media-slot > * { pointer-events: auto; }
.mu-artist-card--playable .media-container:is(.is-spotify, .is-soundcloud, .is-youtube).active .media-zone {
  top: 50%;
  bottom: auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: var(--r-round);
  background: rgb(var(--c-black-rgb) / 0.45);
  color: var(--color-text-on-brand);
}
.mu-artist-card--playable .media-container:is(.is-spotify, .is-soundcloud, .is-youtube).active .media-zone--prev { left: var(--sp-1); }
.mu-artist-card--playable .media-container:is(.is-spotify, .is-soundcloud, .is-youtube).active .media-zone--next { right: var(--sp-1); }
.mu-artist-card--playable .media-container:is(.is-spotify, .is-soundcloud, .is-youtube).active .media-zone::before {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.mu-artist-card--playable .media-container:is(.is-spotify, .is-soundcloud, .is-youtube).active .media-zone--next::before { transform: translateX(-2px) rotate(45deg); }
.mu-artist-card--playable .media-container:is(.is-spotify, .is-soundcloud, .is-youtube).active .media-zone--prev::before { transform: translateX(2px) rotate(-135deg); }
/* Orange Play/Pause: Karten und jede Großansicht mit .mu-media-play (F24t Punkt 171, MuveupArtistMedia.bindOverlay) */
:is(.mu-artist-card--playable, .mu-media-play) .media-play-overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
:is(.mu-artist-card--playable, .mu-media-play) .media-play-overlay[hidden] { display: none; }
:is(.mu-artist-card--playable, .mu-media-play) .media-play-toggle { display: grid; width: 64px; height: 64px; padding: 0; border: 0; background: none; color: var(--color-accent); place-items: center; cursor: pointer; pointer-events: auto; }
:is(.mu-artist-card--playable, .mu-media-play) .media-play-icon { width: 56px; height: 56px; }
:is(.mu-artist-card--playable, .mu-media-play) .media-play-icon--pause,
:is(.mu-artist-card--playable, .mu-media-play) .media-play-toggle--playing .media-play-icon--play { display: none; }
:is(.mu-artist-card--playable, .mu-media-play) .media-play-toggle--playing .media-play-icon--pause { display: block; }
/* Läuft das Video, tritt der Knopf zurück und kommt beim Zeigen wieder */
.mu-media-play .media-play-toggle--playing { opacity: 0; transition: opacity var(--dur-fast) ease; }
.mu-media-play:hover .media-play-toggle--playing,
.mu-media-play .media-play-toggle--playing:focus-visible { opacity: 1; }
@media (hover: none) { .mu-media-play .media-play-toggle--playing { opacity: 0.85; } }
/* Nur unser Play: iOS zeichnet in Videos ohne Bedienleiste sonst einen eigenen grauen Play-Kreis (F24t Punkt 187) */
:is(.mu-media-play, .mu-upload, .mu-artist-card) video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
:is(.mu-media-play, .mu-upload, .mu-artist-card) video::-webkit-media-controls { display: none !important; }
:is(.mu-media-play, .mu-upload, .mu-artist-card) video::-webkit-media-controls-overlay-play-button { display: none !important; }
/* Schlanke Fortschrittsleiste statt der Leiste des Browsers */
.mu-media-play__progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 3px; background: rgb(var(--c-black-rgb) / 0.25); pointer-events: none; }
.mu-media-play__progress[hidden] { display: none; }
.mu-media-play__progress > span { display: block; width: 0; height: 100%; background: var(--color-accent); }
.mu-applicant__photo { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-h1); }
.mu-applicant__photo img { position: absolute; inset: 0; }
.mu-artist-card--playable .mu-artist-card__tags { pointer-events: none; }
.mu-artist-card--playable .mu-artist-card__body { margin: 0 var(--sp-4); padding: 0; }
.mu-artist-card--playable .mu-avatar { --avatar-size: 32px; background: var(--c-placeholder); color: var(--color-text); }
.mu-applicant .mu-btn--secondary,
.mu-artist-item .mu-btn--secondary { border-color: transparent; background: var(--color-surface); color: var(--color-text-subtle); }
.mu-applicant__note { font-size: var(--fs-small); }
.mu-applicant__note summary { color: var(--color-primary); cursor: pointer; }
.mu-applicant__note p { margin: var(--sp-1) 0 0; white-space: pre-line; overflow-wrap: anywhere; }

.mu-applicant-none { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-6); width: 266px; aspect-ratio: 266 / 366; padding: var(--sp-6) var(--sp-5) var(--sp-6); border-radius: var(--r-xl); background: linear-gradient(180deg, var(--color-primary) 30%, var(--c-ink) 72%); color: var(--color-text-on-brand); box-shadow: var(--sh-3); }
.mu-applicant-none__title { margin: 0; color: inherit; font-size: var(--fs-h1); font-weight: var(--fw-medium); line-height: 1.25; }
.mu-applicant-none__link { padding: 0; border: 0; background: none; color: inherit; font-size: var(--fs-small); text-align: center; text-decoration: underline; }
button.mu-applicant-none__link { cursor: pointer; }

.mu-applicants__foot-side { padding: var(--sp-3) var(--sp-6) var(--sp-5); }
.mu-applicants__foot-main { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5) var(--sp-5) var(--sp-5); border-left: var(--bw) solid var(--color-primary); border-bottom-right-radius: var(--r-lg); background: var(--c-purple-100); }
.mu-applicants__foot-main .mu-applicants__collapse { color: var(--color-primary); }
.mu-applicants__note { min-height: 53px; }
.mu-applicants__when { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); margin-block: var(--sp-3); }
.mu-panel--applicants .mu-applicants__when .mu-field + .mu-field { margin-top: 0; }
.mu-applicants-chosen .mu-avatar { --avatar-size: 40px; }
.mu-applicants__consent { align-items: flex-start; margin-top: var(--sp-4); }
.mu-applicants__error { min-height: 1.4em; margin: var(--sp-2) 0 0; color: var(--color-danger-text); font-size: var(--fs-small); }

/* ================= Seitenkopf der Dashboards ================= */
.mu-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.mu-page-head__text h1 {
  margin: 0;
  color: var(--color-primary);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

.mu-page-head__text h1 em { font-style: italic; }
.mu-page-head__profile { display: inline-flex; margin-top: var(--sp-2); }
/* Knöpfe rechts im Kopf, etwa „Vorschau“ und „Zu meinem Musikprofil“ (F24t Punkt 169) */
.mu-page-head__actions { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }
.mu-page-head__profile[hidden] { display: none; }

/* Kopf, solange im Kalender Termine gewählt werden */
.mu-pick-head {
  display: flex;
  flex: 1;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  min-width: 0;
}

.mu-page-head__text .mu-pick-head__count { color: var(--color-text); font-size: var(--fs-display); white-space: nowrap; }
.mu-pick-head__count span { color: var(--color-primary); }

.mu-pick-head__tip {
  align-self: center;
  max-width: 260px;
  margin: 0;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--color-surface-muted);
  color: var(--color-text-subtle);
  font-size: var(--fs-small);
  text-align: center;
}

@media (max-width: 900px) {
  .mu-pick-head__tip { display: none; }
}

.mu-page-head__text p {
  margin: var(--sp-1) 0 0;
  color: var(--color-text-subtle);
  font-size: var(--fs-body-lg);
}

.mu-page-head--slots { align-items: flex-end; }

/* ================= Kalenderkopf: Monat, Pfeile, Heute, Suche =================
   Monat mittig über dem Raster, links und rechts runde, gut treffbare Pfeile (F24t Punkt 155). „Heute“ links, Suche
   rechts, beide nehmen dem Monat keinen Platz in der Mitte weg. Ein Baustein für alle Kalender */
.mu-cal-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}

.mu-cal-bar > * { grid-row: 1; grid-column: 1; justify-self: start; }
.mu-cal-bar > .mu-cal-bar__month { grid-column: 2; justify-self: center; }
.mu-cal-bar > .mu-search { grid-column: 3; justify-self: end; }

.mu-cal-bar__month {
  display: flex;
  align-items: center;
  min-height: 40px;
  gap: var(--sp-3);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
}

/* Monatsname gleich breit, damit die Pfeile beim Blättern nicht springen */
.mu-cal-bar__month > :not(.mu-cal-bar__nav) { min-width: 9.5em; text-align: center; }

.mu-cal-bar__nav {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--color-surface-muted);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.mu-cal-bar__nav svg { width: 12px; height: 12px; }
@media (hover: hover) {
  .mu-cal-bar__nav:hover { background: var(--color-border); }
}
.mu-cal-bar__nav:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Handy: Monat mit Pfeilen allein in der ersten Zeile, Heute und Suche darunter; Pfeile mit 44 px Trefferfläche */
@media (max-width: 900px) {
  .mu-cal-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mu-cal-bar > * { grid-row: 2; }
  .mu-cal-bar > .mu-cal-bar__month { grid-row: 1; grid-column: 1 / -1; }
  .mu-cal-bar > .mu-search { grid-column: 2; }
  .mu-cal-bar__nav { width: 44px; height: 44px; }
}

.mu-cal-bar__today--deco { display: inline-grid; place-items: center; }

.mu-cal-bar__today {
  min-width: 85px;
  height: 30px;
  padding: 0 var(--sp-4);
  border: var(--bw) solid var(--color-border);
  border-radius: var(--r-xs);
  background: var(--color-surface);
  color: var(--color-text-subtle);
  font: inherit;
  font-size: var(--fs-body);
  cursor: pointer;
}

@media (hover: hover) {
  .mu-cal-bar__today:hover { color: var(--color-text); border-color: var(--color-border-strong); }
}

.mu-cal-bar .mu-search { width: 172px; max-width: 100%; }
/* Wie „Heute“ daneben und im Figma: feine Kontur, Platzhalter mittig */
.mu-cal-bar .mu-search .mu-input { height: 30px; border-color: var(--color-border); }
.mu-cal-bar .mu-search .mu-input::placeholder { text-align: center; }
.mu-cal-legend { margin-top: var(--sp-4); }
.mu-cal-skel { height: 480px; }
/* Kalender-Skelett (js/ui/calendar.js): Tage außerhalb des Monats mit blasserem Balken (F24t Punkt 145) */
.mu-cal__cell.is-other > .mu-skel--text { opacity: 0.45; }

/* Rahmen des Monatsrasters im Dashboard: Tag mit Einträgen öffnet ein Popover */
/* Kompakter Monat, bevor das Skelett steht: gleiche Höhe, nichts darunter springt */
.mu-cal-frame > :empty:not(.mu-cal--steady) { min-height: 289px; }
.mu-cal-frame .mini-calendar-day-wrap { display: flex; }
.mu-cal-frame .mini-calendar-day-wrap > .mu-cal__cell { flex: 1; min-width: 0; }
.mu-cal-frame .mu-cal__cell.is-free { cursor: pointer; }
@media (hover: hover) {
  .mu-cal-frame .mu-cal__cell.is-free:not(.is-selected, .is-picked, .is-flow-pick):hover { background: var(--color-surface-soft); }
}

/* Ein freier Tag zeigt ein Plus, ein gewählter ein Minus: mit der Maus beim Darüberfahren,
   auf allen wählbaren Tagen zugleich, wenn jemand auf das Plus beim Datum tippt (.is-inviting am Raster) */
.mu-cal__cell--add:not(.is-selected, .is-flow-pick, .is-picked)::after,
.mu-cal__cell--remove::after {
    content: '+';
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-text-on-brand);
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-medium);
    line-height: 1;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    pointer-events: none;
}
.mu-cal__cell--remove::after {
    content: '\2212';
    background: var(--color-surface);
    color: var(--color-primary);
}
@media (hover: hover) and (pointer: fine) {
  .mu-cal__cell--add:not(.is-selected):hover::after,
  .mu-cal__cell--remove:hover::after {
    opacity: 1;
    transform: none;
  }
}
/* Ohne Maus steht das Minus auf gewählten Tagen immer da */
@media (hover: none) {
  .mu-cal__cell--remove::after {
    opacity: 1;
    transform: none;
  }
}
/* Kurz aufpoppen, ohne Rahmen um den Kalender (F24t Punkt 86, Danie). Eine Dauer für CSS und JS:
   MuveupCalendar.inviteMs() liest --cal-invite und nimmt die Klasse danach wieder weg */
:root { --cal-invite: 800ms; }
.is-inviting .mu-cal__cell--add:not(.is-selected, .is-flow-pick, .is-picked)::after {
  animation: mu-cal-plus-pop var(--cal-invite) var(--ease-out) 1;
}
@keyframes mu-cal-plus-pop {
  0% { opacity: 0; transform: scale(0.5); }
  20%, 70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .mu-cal__cell--add:not(.is-selected, .is-flow-pick, .is-picked)::after,
  .mu-cal__cell--remove::after {
    transform: none;
    transition: none;
  }
  .is-inviting .mu-cal__cell--add:not(.is-selected, .is-flow-pick, .is-picked)::after { animation: none; opacity: 1; }
}

/* Gleiche Höhe für fünf und sechs Wochen: Der Monatswechsel springt nicht (MOTION M6) */
@media (min-width: 901px) {
  .mu-cal--steady {
    min-height: 478px;
    grid-template-rows: auto;
    grid-auto-rows: minmax(0, 1fr);
  }

  /* So hoch wie eine Woche mit Eintrag: Skelett und gefüllter Monat sind gleich groß */
  .mu-cal--steady .mu-cal__cell { min-height: 74px; }

  /* Kalender als Hauptinhalt: nimmt die freie Höhe der Karte, schrumpft bis alle sechs Wochen lesbar bleiben.
     Erst darunter scrollt die Karte, und das bündig mit ihrem Rand */
  .mu-cal-page { display: flex; flex-direction: column; min-height: 100%; }
  .mu-cal-page > .mu-cal-frame { display: flex; flex: 1 1 384px; flex-direction: column; min-height: 384px; }
  .mu-cal-page > .mu-cal-frame > .mu-cal--steady { flex: 1; min-height: 0; }
  .mu-cal-page > .mu-cal-frame > .mu-cal--steady .mu-cal__cell { min-height: 0; }
  .mu-cal-page > .mu-cal-legend { flex: none; }
}

/* Mobil der ganze Monat, Einträge als Punkte wie im kompakten Kalender. Ein Tipp öffnet das Tagesfenster */
@media (max-width: 900px) {
  .mu-cal-frame { position: relative; }
  .mu-cal-frame .mu-cal__cell { min-height: 48px; }
  .mu-cal--steady {
    min-height: 324px;
    grid-template-rows: auto;
    grid-auto-rows: minmax(0, 1fr);
  }
  .mu-cal-bar__nav { position: relative; }
  .mu-cal-bar__nav::after { content: ''; position: absolute; inset: calc((20px - var(--tap-min)) / 2); }
  .mu-cal-frame > .mu-cal:not(.mu-cal--mini) .mu-cal__cell {
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    align-content: flex-start;
    gap: 3px;
  }
  .mu-cal-frame > .mu-cal:not(.mu-cal--mini) .mu-cal__num { margin-inline: calc(50% - 10px); }
  .mu-cal-frame .mu-cal-chip {
    flex: none;
    width: 6px;
    height: 6px;
    padding: 0;
    border-radius: var(--r-round);
    background: var(--status-color, var(--color-border-strong));
    box-shadow: none;
  }
  .mu-cal-frame .mu-cal-chip > * { display: none; }
  .mu-cal-frame .mu-cal__more { align-self: center; line-height: 1; }
  /* Handy: Einträge sind Punkte, „+n“ steht schlicht darunter wie bisher (F24t Punkt 167) */
  .mu-cal-frame .mu-cal__cell > .mu-cal__more { position: static; max-width: 100%; padding: 0; background: none; }
  .mu-cal-frame .mu-cal__more-dot { display: none; }
  .mu-cal-legend .mu-legend__item { --legend-color: var(--status-color); }
}

/* ================= Rechte Spalte der Dashboards: To-dos, Event-Liste ================= */
.mu-card--lead .mu-card__title,
.mu-card--events .mu-card__title { font-size: var(--fs-h1); font-weight: var(--fw-medium); }

/* Einladung, solange es keine Events gibt (F24r Punkte 49 und 55): Die ganze Karte zeigt das Bild aus dem Onboarding,
   abgedunkelt für helle Schrift. Darauf gleiten die normalen Profilkarten, halten jeweils, dann kommt die nächste */
.mu-events-cta__heading { display: none; }
.mu-card--events.has-cta {
  overflow: hidden;
  background: linear-gradient(rgb(var(--c-black-rgb) / 0.62), rgb(var(--c-black-rgb) / 0.78)), url('/images/onboarding-welcome.webp') center / cover;
  color: var(--color-text-on-brand);
}
.mu-card--events.has-cta :is(#dashEventTabs, #dashShowAll, #dashEventHead, .mu-card__title-default) { display: none; }
.mu-card--events.has-cta .mu-events-cta__heading { display: inline; }
.mu-card--events.has-cta .mu-card__title { color: var(--color-text-on-brand); font-size: var(--fs-h3); line-height: 1.3; }
.mu-events-cta {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  min-height: 0;
}
.mu-events-cta[hidden] { display: none; }
.mu-card--events.has-cta > .mu-events-cta { flex: 1 1 0; }
.mu-events-cta__viewport {
  container-type: size;
  flex: 1 1 auto;
  align-self: stretch;
  /* Bei wenig Höhe werden die Karten kleiner, damit Text und Knopf darunter immer ganz in der Karte stehen (F24t Punkt 144).
     Innenabstand oben und unten: Raum für die angehobene Karte beim Darüberfahren */
  min-height: 170px;
  max-height: 354px;
  padding-block: var(--sp-3);
  margin-inline: calc(-1 * var(--sp-6));
  overflow: hidden;
  /* Angeschnittene Nachbarn blenden zum Rand weich aus (F24r Punkt 65), das Bild der Karte scheint durch */
  --cta-fade: linear-gradient(90deg, transparent, rgb(var(--c-black-rgb)) 18%, rgb(var(--c-black-rgb)) 82%, transparent);
  -webkit-mask-image: var(--cta-fade);
  mask-image: var(--cta-fade);
}
.mu-events-cta__viewport.is-empty { display: none; }
/* Kartengröße aus der Höhe des Fensters (cqh gilt erst unterhalb des Containers) */
.mu-events-cta__track {
  --artist-card-h: clamp(146px, 100cqh, 330px);
  --artist-card-w: calc(var(--artist-card-h) * 0.727);
  display: flex; gap: var(--sp-4); height: 100%; will-change: transform; }
.mu-events-cta__track.is-sliding { transition: transform 700ms var(--ease-out); }
.mu-events-cta__item { flex: none; color: inherit; text-decoration: none; }
.mu-events-cta__item .mu-artist-card { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.mu-events-cta__item:focus-visible { outline: none; }
.mu-events-cta__item:focus-visible .mu-artist-card { box-shadow: var(--focus-ring); }
.mu-events-cta__skel { flex: none; width: var(--artist-card-w); height: 100%; }
/* Profile blenden weich über das Skelett ein (F24r Punkt 76) */
.mu-events-cta__track.is-entering > * { animation: mu-fade-in var(--dur-slow) var(--ease-out) both; }
.mu-events-cta__text { margin: 0; font-size: var(--fs-body); line-height: 1.4; }
@media (prefers-reduced-motion: reduce) {
  .mu-events-cta__track.is-sliding { transition: none; }
}
/* Handy: flacher, die Karten etwas kleiner, der Kalender bleibt oben */
@media (max-width: 900px) {
  .mu-events-cta__viewport { flex: none; height: 240px; min-height: 0; }
}


/* Kacheln ragen wie im Figma (190 breit) über den Karten-Innenrand */
.mu-tiles--bleed {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-inline: calc(-1 * var(--sp-3));
}

.mu-tabs--dense { gap: var(--sp-5); }
/* Sechs Reiter passen bei 426 px nur enger, mehr Text scrollt die Leiste (design/FLOWS.md) */
.mu-tabs--dense:has(#dashTabSeries:not([hidden])) { gap: var(--sp-3); }
.mu-tabs--dense .mu-tab { padding-inline: 0; font-size: var(--fs-body-lg); }
.mu-tabs--dense .mu-tab__count { color: var(--color-text-placeholder); font-weight: var(--fw-regular); }

.mu-event-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 104px 12px;
  gap: var(--sp-3);
  padding: var(--sp-4) 0 var(--sp-1);
  font-size: var(--fs-micro);
  color: var(--color-text-subtle);
}

.mu-event-head span:first-child { text-align: center; }
.mu-event-head[hidden] { display: none; }

.mu-event-list { display: block; }
.mu-event-list[hidden] { display: none; }

@media (max-width: 900px) {
  .mu-event-list > .mu-event-row[data-mu-skel] { min-height: 74px; }
}

.mu-event-row--table {
  grid-template-columns: 46px minmax(0, 1fr) 104px 12px;
  padding: var(--sp-2) 0;
  border-bottom: 0;
}

.mu-event-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mu-event-row__body .mu-event-row__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-event-row--table .mu-status { line-height: 1.3; }
/* Zeile mit offener Aktion: Knopf statt Pfeil, der Status rückt als dritte Zeile unter Titel und Person, damit beides lesbar bleibt (F24t Punkt 150) */
.mu-event-row:has(> .mu-event-row__act) { grid-template-columns: 46px minmax(0, 1fr) auto; }
.mu-event-row__body > .mu-status { margin-top: 2px; font-size: var(--fs-small); }
.mu-event-row__act { flex: none; white-space: nowrap; }
.mu-event-row--table .mu-event-row__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-date-tile--empty { color: var(--color-text-subtle); font-weight: var(--fw-bold); }

.mu-empty--events {
  padding: var(--sp-6) 0;
  text-align: center;
  color: var(--color-text-placeholder);
  font-style: italic;
}

/* Spalte tauscht: das Detail ersetzt To-dos und Liste (Dashboards der Veranstaltenden und Musikschaffenden) */
@media (min-width: 901px) {
  .mu-shell.mu-shell--stretch { align-items: stretch; }
  /* Die Spalte ist so hoch wie die Hauptkarte, die Liste gibt Platz ab, die Promo-Karte bleibt ganz sichtbar (F24r) */
  .mu-aside--swap > .mu-card--lead { flex: none; }
  .mu-card--events { display: flex; flex-direction: column; flex: 1 1 0; min-height: 170px; }
  .mu-card--events > :not(.mu-event-list) { flex: none; }
  .mu-card--events .mu-event-list { flex: 1 1 0; height: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .mu-aside--swap > .mu-promo { flex: 0 1 213px; min-height: 130px; }
  .mu-aside--swap.is-detail .mu-detail { height: 100%; }
}

.mu-aside--swap.is-detail > :not(.mu-detail) { display: none; }
.mu-detail__foot > span:empty { display: none; }

/* Das Detail gleitet herein, Schließen bleibt sofort (MOTION M3) */
.mu-aside--swap > .mu-detail:not([hidden]) { animation: mu-slide-in-right var(--dur-slow) var(--ease-spring) both; }

@media (prefers-reduced-motion: reduce) {
  .mu-aside--swap > .mu-detail:not([hidden]) { animation-name: mu-fade-in; }
}

/* Offene Bewertungen über dem Kalender (js/pending-event-reviews.js) */
.mu-reviews {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--color-surface-warm);
}

.mu-reviews[hidden] { display: none; }
.mu-reviews__title { margin: 0 0 var(--sp-1); color: var(--color-primary); font-weight: var(--fw-semibold); }

.mu-reviews__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}

.mu-reviews__row + .mu-reviews__row { border-top: var(--bw) solid var(--color-border); }
.mu-reviews__info { flex: 1 1 auto; min-width: 0; color: var(--color-text-muted); }

/* Hinweis unter einer auslaufenden Serie */
.mu-event-extend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0 0 var(--sp-2) calc(46px + var(--sp-3));
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* ================= Wegauswahl „+ Event erstellen“ (Frames dashboard-organizers--wegwahl-*) ================= */
.mu-way {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--sp-3);
  scroll-margin-top: var(--sp-20);
}

.mu-way[hidden],
.mu-way__step[hidden] { display: none; }

.mu-way__title {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  text-wrap: balance;
}

.mu-way__options { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.mu-way__option { gap: var(--sp-1); min-height: 0; padding: var(--sp-4) var(--sp-5) var(--sp-4) 66px; }
.mu-way__option .mu-option__title { font-size: var(--fs-h3); line-height: 1.25; text-wrap: balance; }

/* Graue Texte nicht kleiner als der Fließtext, auf dem iPad sonst kaum lesbar (F24t Punkt 195) */
.mu-way__option .mu-option__text,
.mu-way__option .mu-option__list > span > span { font-size: var(--fs-body); color: var(--color-text-subtle); line-height: 1.5; }

.mu-way__option .mu-option__list { gap: var(--sp-2); margin-top: var(--sp-2); padding-top: var(--sp-3); }
.mu-way__option .mu-option__list > span { display: flex; flex-direction: column; gap: 2px; }
.mu-way__option .mu-option__list b { font-size: var(--fs-small); font-weight: var(--fw-medium); }

/* Rahmen in der Farbe des Ablaufs: Direktanfrage orange, Buchungsassistenz lila */
.mu-way__option--assist[aria-checked="true"] { border-color: var(--color-primary); }

/* Zusammenfassung in Kästen wie im Figma (Direktanfrage, Frame 56:4906): Titel orange, „ändern“ rechts, Zeilen Icon, Frage, Wert */
.mu-recap-boxes { display: grid; gap: var(--sp-3); }
.mu-recap-box { padding: var(--sp-3) var(--sp-4) var(--sp-4); border-radius: var(--r-md); background: var(--color-bg); }
.mu-recap-box__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: var(--bw) solid var(--color-border);
}
.mu-recap-box__title { margin: 0; color: var(--color-accent); font-size: var(--fs-body); font-weight: var(--fw-medium); }
.mu-panel--primary .mu-recap-box__title { color: var(--color-primary); }
.mu-recap-box__edit { padding: 0; border: 0; background: none; color: var(--color-text-subtle); font: inherit; font-size: var(--fs-small); cursor: pointer; }
@media (hover: hover) {
  .mu-recap-box__edit:hover { color: var(--color-text); text-decoration: underline; }
}
.mu-recap-box__row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) minmax(0, auto);
  align-items: start;
  column-gap: var(--sp-2);
  padding: var(--sp-1) 0;
  font-size: var(--fs-body);
}
.mu-recap-box__icon { display: inline-flex; color: var(--color-text-strong); }
.mu-recap-box__icon svg { width: 14px; height: 14px; margin-top: 2px; }
.mu-recap-box__value { color: var(--color-text-subtle); text-align: right; overflow-wrap: anywhere; }
/* Terminliste über einen Jahreswechsel: je Jahr eine Zeile mit kleiner Jahreszahl */
.mu-recap-box__year { display: block; }
.mu-recap-box__year + .mu-recap-box__year { margin-top: var(--sp-1); }
.mu-recap-box__year-label { color: var(--color-text-muted); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.mu-recap-box__note { grid-column: 2 / -1; margin-top: var(--sp-1); color: var(--color-text-subtle); font-size: var(--fs-small); overflow-wrap: anywhere; }
/* Eigener Inhalt im Kasten: Nachricht der Veranstaltenden, Verhandlung (Giganfrage, F24t Punkt 178) */
.mu-recap-box__text { margin: 0; color: var(--color-text); font-size: var(--fs-body); white-space: pre-line; overflow-wrap: anywhere; }

/* Giganfrage der Musikschaffenden (F24t Punkt 178): Streifen „Auf einen Blick“, darunter die Kästen in zwei Spalten */
.mu-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); margin: var(--sp-3) 0; }
.mu-glance__cell { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding: var(--sp-3); border-radius: var(--r-md); background: var(--color-bg); }
.mu-glance__label { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--color-accent); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.mu-glance__label svg { flex: none; width: 14px; height: 14px; }
.mu-glance__value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); color: var(--color-text-strong); font-size: var(--fs-body-lg); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.mu-glance__cell--fee .mu-glance__value { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.mu-glance__sub { color: var(--color-text-subtle); font-size: var(--fs-small); overflow-wrap: anywhere; }
.mu-recap-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); align-items: start; }
.mu-recap-cols--one { grid-template-columns: minmax(0, 1fr); }
/* Nur Leiste ohne Knöpfe (z. B. fixiert): kein leerer Fuß */
.mu-panel__foot:has(> .mu-gig-actions:empty) { display: none; }
.mu-gig-actions { margin-left: auto; }
/* Hauptaktion rechts außen wie in den Panels der Veranstaltenden */
.mu-gig-actions .mu-detail__actions { display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: flex-start; gap: var(--sp-2); margin: 0; }
/* Kopf der Giganfrage sitzt in der Kopfzeile des Panels neben dem × */
.mu-panel__head > .go-dhead { flex: 1; min-width: 0; margin: 0; }
/* Schmal (Terminwahl) oder mobil: Streifen 2 × 2, Kästen untereinander */
.mu-panel--aside .mu-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mu-panel--aside .mu-recap-cols { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
  .mu-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mu-recap-cols { grid-template-columns: minmax(0, 1fr); }
}

/* Terminwahl einer Serie im Kalender (F24t Punkt 177): angefragte Tage in der Farbe der Giganfrage, gewählt orange mit Minus */
.mu-cal__cell.is-gig-offer { background: var(--color-cal-request); cursor: pointer; }
/* Beim Darüberfahren behalten die Tage ihre Farbe, nur Plus oder Minus erscheint (wie F24t Punkt 128) */
.mu-cal--mini.is-gig-picking .mu-cal__cell.is-gig-offer.mu-cal__cell--add { background: var(--color-cal-request); }
.mu-cal--mini.is-gig-picking .mu-cal__cell.is-flow-pick.is-picked { background: var(--chip-on, var(--color-accent)); }
.is-gig-picking .mu-cal-pop { display: none; }

/* Bekannte Musikschaffende buchen (F24h) */
.mu-known-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--color-bg);
  text-align: center;
}
.mu-known-card .mu-avatar { overflow: hidden; }
.mu-known-card .mu-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mu-known-card__name { margin: 0; color: var(--color-text-strong); font-size: var(--fs-lg); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.mu-known-card__meta { margin: 0; color: var(--color-text-subtle); font-size: var(--fs-small); }
.mu-known-box { width: 100%; text-align: left; }
.mu-known-box .mu-recap-box__row { grid-template-columns: auto minmax(0, 1fr); }
.mu-known-share { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-3); }
.mu-known-link { margin-top: var(--sp-2); overflow-wrap: anywhere; user-select: all; }
.mu-panel .mu-step .mu-input[type="date"] { width: 212px; max-width: 100%; }

/* Desktop: kompakter Kopf und Kacheln, die Wegauswahl passt ohne Scrollen in die Spalte (F24r Punkt 77) */
@media (min-width: 901px) {
  .mu-way__title { margin-bottom: var(--sp-2); font-size: var(--fs-h2); }
  .mu-way__option { padding: var(--sp-3) var(--sp-4) var(--sp-3) 62px; }
  .mu-way__option .mu-option__list { gap: var(--sp-1); margin-top: var(--sp-1); padding-top: var(--sp-2); }
  .mu-way__option .mu-option__list > span { gap: 0; }
}

/* Niedrige Fenster: alles dichter, damit beide Wege ganz in die Spalte passen */
@media (min-width: 901px) and (max-height: 820px) {
  .mu-way { gap: var(--sp-2); }
  .mu-way__title { font-size: var(--fs-h3); }
  .mu-way__options { gap: var(--sp-2); }
  .mu-way__option { padding: var(--sp-3) var(--sp-4) var(--sp-3) 58px; }
  .mu-way__option .mu-option__title { font-size: var(--fs-body-lg); }
  .mu-way__option .mu-option__list { gap: var(--sp-1); margin-top: var(--sp-1); padding-top: var(--sp-2); }
}

/* Je Weg Text, „mehr anzeigen“ und ein Knopf (Figma wegwahl-buttons). Aufgeklappt wie die erste Fassung:
   die Unterwege untereinander als Raster, nicht als Zeile (F24t Punkt 93) */
.mu-way__more,
.mu-way__cta { display: none; }
.mu-way.is-compact .mu-way__option .mu-option__list { display: none; }
.mu-way.is-compact .mu-way__option.is-open .mu-option__list { display: grid; }
.mu-way.is-compact .mu-way__option { cursor: default; }
.mu-way.is-compact .mu-way__more {
  display: inline;
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.mu-way.is-compact .mu-way__cta { display: inline-flex; align-self: flex-end; margin-top: var(--sp-2); }
.mu-way.is-compact .mu-way__step[data-way-step="1"]:not([hidden]) ~ .mu-way__foot .mu-way__next { visibility: hidden; }
@media (hover: hover) {
  .mu-way.is-compact .mu-way__more:hover { color: var(--color-primary-hover); text-decoration: underline; }
}

.mu-way__icon {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-round);
  background: var(--color-accent);
  color: var(--color-text-on-brand);
}

.mu-way__icon svg { width: 18px; height: 18px; }
.mu-way__icon--primary { background: var(--color-primary); }

.mu-way__foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
}

.mu-way__back {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-subtle);
  font: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
}

@media (hover: hover) {
  .mu-way__back:hover { color: var(--color-text); }
}
.mu-way__back--block { display: inline-block; margin-bottom: var(--sp-3); }

.mu-way__hint {
  margin: 0;
  font-size: var(--fs-micro);
  text-align: center;
}

.mu-way__write {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  cursor: pointer;
}

@media (hover: hover) {
  .mu-way__write:hover { text-decoration: underline; }
}

.mu-way__next {
  width: 40px;
  height: 40px;
  background: var(--color-accent);
  color: var(--color-text-on-brand);
}

.mu-way__next svg { width: 20px; height: 20px; }
.mu-way__next--assist { background: var(--color-primary); }
.mu-way__next:disabled { background: var(--color-border-strong); cursor: default; }

/* ================= Event-Detail in der rechten Spalte (Frames buchungsassistent 09, 10) ================= */
.mu-detail { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: var(--sp-4); }
.mu-detail[hidden] { display: none; }
.mu-detail__body { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: var(--sp-2); }
.mu-detail__acc { margin-bottom: var(--sp-5); }
.mu-detail__empty { margin: var(--sp-10) 0; color: var(--color-text-placeholder); font-style: italic; text-align: center; }
.mu-detail__sub { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-body-lg); font-weight: var(--fw-medium); }
.mu-detail__people { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }

.mu-detail__person {
  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-detail__person:hover { background: var(--color-surface-soft); }
}
.mu-detail__who { display: flex; flex-direction: column; min-width: 0; }
.mu-detail__name { font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-detail__meta { font-size: var(--fs-micro); color: var(--color-text-subtle); }
.mu-detail__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
/* Schließen oben rechts wie bei den Panels (F24t Punkt 166, ersetzt Zurück aus 149): runder lila Knopf, der Kopf des
   Inhalts hält rechts Platz dafür */
.mu-detail__close { position: absolute; top: var(--sp-5); right: var(--sp-5); z-index: var(--z-raised); }
.mu-detail__body > :first-child { padding-right: calc(var(--icon-btn) + var(--sp-3)); }
/* Hauptaktionen fest unten rechts (F24t Punkt 172), Löschen links */
.mu-detail__main { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); margin-left: auto; }
/* Unten nur Löschen links und die Hauptaktion rechts; ohne beides keine leere Leiste (F24t Punkt 151) */
.mu-detail__foot:not(:has(> :not(:empty))) { display: none; }
.mu-detail__foot .mu-request__close { margin-top: 0; }
.mu-detail__foot .mu-btn[hidden] { display: none; }

/* Detail der Musikschaffenden (F13, js/artist-dash-detail.js, js/direct-offer-detail.js): Hinweis, Antworten, eigenes Angebot */
.mu-detail__note { margin-bottom: var(--sp-4); }
.mu-detail__team { flex-direction: column; gap: var(--sp-1); }
.mu-detail__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.mu-detail__actions--end { justify-content: flex-end; margin: var(--sp-5) 0 0; }
.mu-detail__respond { margin-top: var(--sp-5); }
.mu-detail__respond .mu-detail__actions { margin: 0; }
.mu-detail__lead { margin: 0 0 var(--sp-3); color: var(--color-text-muted); }
.mu-detail__offer { margin-top: var(--sp-2); }

/* Ausschreibung im Detail (F12c, js/tender-detail.js): Abschnitte untereinander, Löschen klein am Ende */
.mu-tender-detail__section { margin-top: var(--sp-6); }
.mu-tender-detail > .mu-note { margin-top: 0; }
.mu-tender-detail .mu-hint { margin: 0 0 var(--sp-3); }
.mu-tender-detail__more { margin-top: var(--sp-6); }

/* Event im Detail (F12c, js/event-panel.js): Bestätigen und Ablehnen oben, Printmedien unter den Angaben */
.mu-event-panel { display: grid; }
.mu-event-panel__confirm { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.mu-event-panel__confirm p { margin: 0; }
.mu-event-panel__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mu-event-panel__poster { margin-bottom: var(--sp-4); }

/* ================= Karte einer Direktanfrage (F12, js/request-card.js) ================= */
.mu-request { display: grid; gap: var(--sp-3); }
.mu-request__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.mu-request__head .mu-detail__sub { margin: 0; }
.mu-request__count { font-size: var(--fs-small); color: var(--color-text-subtle); white-space: nowrap; }
.mu-request__people { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.mu-request__person { border-radius: var(--r-sm); box-shadow: inset 0 0 0 var(--bw) var(--color-border); }
.mu-request__person.is-decide { box-shadow: inset 0 0 0 var(--bw) var(--color-accent); }

.mu-request__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--sp-2);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) {
  .mu-request__row:hover:not(:disabled) { background: var(--color-surface-soft); }
}
.mu-request__row:disabled { cursor: default; }
.mu-request__row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Zeile ohne Aktion, etwa eigene Anfragen im Bewerbungs-Fenster einer Serie (F12b) */
.mu-request__row.mu-request__row--static { cursor: default; }
@media (hover: hover) {
  .mu-request__row.mu-request__row--static:hover { background: none; }
}
.mu-applicants-asked { display: grid; gap: var(--sp-2); margin-block: var(--sp-4); }
.mu-request__who { display: flex; flex-direction: column; min-width: 0; }
.mu-request__name { font-weight: var(--fw-medium); }
.mu-request__meta { font-size: var(--fs-micro); color: var(--color-text-subtle); }
.mu-request__body { display: grid; gap: var(--sp-3); padding: 0 var(--sp-3) var(--sp-3); font-size: var(--fs-body); }
.mu-request__text { margin: 0; color: var(--color-text-muted); }
.mu-request__label { margin: 0 0 var(--sp-2); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.mu-request__terms { display: grid; gap: var(--sp-1); margin: 0; }
.mu-request__terms div { display: flex; justify-content: space-between; gap: var(--sp-3); }
.mu-request__terms dt { color: var(--color-text-subtle); }
.mu-request__terms dd { margin: 0; font-weight: var(--fw-medium); }
.mu-request__consent { display: grid; gap: var(--sp-2); }
.mu-request__consent .mu-hint { margin: 0; }
.mu-request__btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* Fehler halten Platz, damit die Knöpfe nicht springen */
.mu-request__error { min-height: 1lh; margin: 0; color: var(--color-danger-text); font-size: var(--fs-small); }
.mu-request__error:empty { min-height: 0; }
.mu-request__person.is-decide .mu-request__error:empty { min-height: 1lh; }
.mu-request__done summary { padding: var(--sp-2) 0; color: var(--color-text-subtle); font-size: var(--fs-small); cursor: pointer; }
.mu-request__done .mu-request__people { margin-top: var(--sp-2); }

.mu-request__next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--color-surface-muted);
  font-size: var(--fs-small);
}

.mu-request__foot .mu-hint { margin: 0; }
/* Löschen (F24t Punkt 151): klarer, ruhiger Textknopf in Gefahr-Farbe mit Papierkorb, Rückfrage wie bisher */
.mu-request__close { justify-self: start; display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); color: var(--color-danger-text); }
.mu-request__close::before {
  content: '';
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mu-request__dialog { display: grid; gap: var(--sp-3); text-align: left; }
.mu-request__dialog p { margin: 0; }

/* Panel „Weitere Person anfragen“, Ersatz in Reihenfolge */
.mu-request-add { display: grid; gap: var(--sp-5); }
.mu-request-add .mu-step { margin: 0; }
.mu-request-add .mu-pick-list__list { max-height: none; }
.mu-request-add__list { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }

.mu-request-add__picked {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--color-surface-muted);
}

.mu-request-add__pos { font-weight: var(--fw-medium); color: var(--color-text-subtle); }
.mu-request-add__fee { font-size: var(--fs-small); }

@media (max-width: 900px) {
  .mu-tiles--bleed { margin-inline: 0; }
  .mu-page-head { flex-direction: column; }
  .mu-cal-bar .mu-search { margin-left: 0; max-width: none; width: 100%; }
}

/* ================= Akkordeon (Frames buchungsassistent 09 bis 12, edit-profile-organizers--panel-*) =================
   Kopf 30 px, Text lila, Linie nur offen. Auf- und Zuklappen über .mu-collapse, Verhalten in js/ui/accordion.js. */
.mu-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.mu-accordion__item {
  position: relative;
  border-radius: var(--r-md);
  background: var(--color-surface-muted);
}

.mu-accordion__item.is-open { background: var(--color-surface-soft); }

/* „ändern“ im offenen Kopf, statt des Pfeils (Frame 13) */
.mu-accordion__edit {
  position: absolute;
  top: 0;
  right: var(--sp-5);
  display: none;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-subtle);
  font: inherit;
  font-size: var(--fs-micro);
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover) {
  .mu-accordion__edit:hover { color: var(--color-text); text-decoration: underline; }
}
.mu-accordion__item.is-open > .mu-accordion__edit { display: block; }
.mu-accordion__item.is-open:has(> .mu-accordion__edit) .mu-accordion__chevron { visibility: hidden; }

.mu-accordion__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 30px;
  padding: var(--sp-1) var(--sp-5);
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  text-align: left;
  cursor: pointer;
}

.mu-accordion__head:focus-visible {
  box-shadow: var(--focus-ring);
}

.mu-accordion__head:disabled {
  color: var(--color-text-placeholder);
  cursor: not-allowed;
}

@media (hover: hover) {
  .mu-accordion__head:hover:not(:disabled) {
    color: var(--color-primary-hover);
  }
}

/* Filterleisten: Zeilen mit Trennlinie statt Fläche */
.mu-accordion__head--rule {
  padding: var(--sp-3) var(--sp-1) var(--sp-3) 0;
  border-bottom: var(--bw) solid var(--color-border);
  border-radius: 0;
  font-size: var(--fs-body-lg);
}

.mu-accordion__title {
  flex: 1;
  min-width: 0;
}

.mu-accordion__sum {
  flex: none;
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

.mu-accordion__chevron {
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--color-text-subtle);
  border-bottom: 2px solid var(--color-text-subtle);
  transform: rotate(-45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}

.mu-accordion__head[aria-expanded="true"] .mu-accordion__chevron {
  transform: translateY(-2px) rotate(45deg);
}

.mu-accordion__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0 var(--sp-5);
  padding: var(--sp-2) 0 var(--sp-4);
  border-top: var(--bw) solid var(--color-border-strong);
}

/* Zeile: Symbol, Frage, Wert rechts in Lila */
.mu-accordion__rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mu-accordion__row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: var(--sp-4);
  min-height: 28px;
  font-size: var(--fs-body);
  color: var(--color-text);
}

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

.mu-accordion__value {
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  text-align: right;
}

.mu-accordion__value small {
  display: block;
  color: var(--color-text-subtle);
  font-weight: var(--fw-regular);
}

.mu-accordion__note {
  font-size: var(--fs-body);
  color: var(--color-text-placeholder);
}

.mu-accordion__foot {
  align-self: flex-end;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-micro);
  color: var(--color-text-placeholder);
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover) {
  .mu-accordion__foot:hover { color: var(--color-text); text-decoration: underline; }
}

@media (max-width: 900px) {
  .mu-accordion__head {
    min-height: var(--tap-min);
  }
}

/* ================= Schritt: eine Frage im Panel (Frames onboarding-organizers--panel-*, buchungsassistent 02 bis 06) =================
   .mu-steps stapelt die Fragen. Zustände: .is-pending (noch nicht dran, zusätzlich inert setzen), .is-invalid.
   Chips und Felder beginnen unter dem Symbol, wie im Figma. */
.mu-steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.mu-step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.mu-step.is-pending {
  opacity: 0.2;
  pointer-events: none;
}

.mu-step__label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  line-height: 1.3;
  color: var(--color-text);
}

.mu-step__row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.mu-input--time { width: 110px; flex: none; }
/* Kurzfeld (Figma Eventname, Gage): schmal, Text mittig */
.mu-input--short { width: 212px; max-width: 100%; flex: none; }
.mu-step.is-invalid .mu-input { border-color: var(--color-danger); }

/* Brief-Vorschau (Direktanfrage, Nachricht): Text wie er verschickt wird, eingesetzte Angaben in Akzentfarbe */
.mu-letter {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm-lg);
  background: var(--color-surface-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-message);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.mu-letter span { color: var(--color-accent-text); }

.mu-step__icon {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--color-text-strong);
}

.mu-step__hint {
  font-size: var(--fs-small);
  color: var(--color-text-subtle);
}

.mu-step__error {
  display: none;
  font-size: var(--fs-small);
  color: var(--color-danger-text);
}

.mu-step.is-invalid .mu-step__label {
  color: var(--color-danger-text);
}

.mu-step.is-invalid .mu-step__error {
  display: block;
}

/* ================= Fehlerkarte (aus go-error-*): Symbol, Titel, Satz, ein Knopf =================
   Bereich konnte nicht laden oder Vorgang fehlt. Daten leer ist .mu-empty, kurze Rückmeldung ein Toast.
   Aus dem Skelett heraus: MuveupSkeleton.fail(el, opts). */
.mu-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
}

.mu-error__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-round);
  background: var(--color-surface-muted);
  color: var(--color-danger-text);
}

.mu-error__icon svg {
  width: 26px;
  height: 26px;
}

.mu-error__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.mu-error__text {
  max-width: 42ch;
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
}

/* Kompakt für Listen und schmale Spalten */
.mu-error--compact {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--sp-3);
  padding: var(--sp-3);
  text-align: left;
}

.mu-error--compact .mu-error__icon {
  grid-row: span 2;
  width: 30px;
  height: 30px;
}

.mu-error--compact .mu-error__icon svg {
  width: 18px;
  height: 18px;
}

.mu-error--compact .mu-error__title {
  font-size: var(--fs-body);
}

.mu-error--compact .mu-error__text {
  font-size: var(--fs-small);
}

.mu-error--compact .mu-btn {
  grid-column: 2;
  justify-self: start;
  margin-top: var(--sp-2);
}

/* ================= Karussell (Frames edit-profile-organizers--musikprofil, buchungsassistent 12) =================
   Linie unter dem Titel zeigt die Position, Karten schneiden rechts an und blassen aus.
   Pfeile nur mit Maus, am Touchscreen wischt man. Verhalten in js/ui/carousel.js. */
.mu-carousel {
  min-width: 0;
}

.mu-carousel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.mu-carousel__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}

/* Kleiner Titel, etwa in der schmalen rechten Spalte */
.mu-carousel--sm .mu-carousel__title {
  font-size: var(--fs-body-lg);
}

.mu-carousel__nav {
  display: flex;
  flex: none;
  gap: var(--sp-2);
}

.mu-carousel__nav .mu-icon-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.mu-carousel:not(.can-prev):not(.can-next) .mu-carousel__nav,
/* Ohne .mu-carousel (Medienreihe der Profile): die Linie bleibt, der Balken steht kurz am Anfang */
[data-mu-carousel]:not(.mu-carousel):not(.can-prev):not(.can-next) .mu-carousel__thumb {
  width: 28%;
  transform: none;
}

.mu-carousel:not(.can-prev):not(.can-next) .mu-carousel__bar {
  visibility: hidden;
}

.mu-carousel__bar {
  position: relative;
  height: var(--bw);
  margin-bottom: var(--sp-5);
  background: var(--color-border);
}

.mu-carousel__thumb {
  position: absolute;
  top: calc(-1 * var(--bw));
  left: 0;
  width: var(--carousel-thumb, 33%);
  height: 2px;
  background: var(--color-primary);
  transform: translateX(var(--carousel-x, 0%));
}

.mu-carousel__track {
  --fade: 120px;
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.mu-carousel__track::-webkit-scrollbar {
  display: none;
}

.mu-carousel__track:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.mu-carousel__track > * {
  flex: none;
  scroll-snap-align: start;
}

.mu-carousel.can-next .mu-carousel__track {
  -webkit-mask-image: linear-gradient(90deg, rgb(var(--c-black-rgb)) calc(100% - var(--fade)), rgb(var(--c-black-rgb) / 0.3) 100%);
  mask-image: linear-gradient(90deg, rgb(var(--c-black-rgb)) calc(100% - var(--fade)), rgb(var(--c-black-rgb) / 0.3) 100%);
}

/* Medien: kleinere Rahmen, enger */
.mu-carousel--media .mu-carousel__track {
  gap: var(--sp-3);
}

.mu-carousel--media .mu-carousel__track > * {
  width: 200px;
}

@media (hover: none) {
  .mu-carousel__nav {
    display: none;
  }
}

@media (max-width: 900px) {
  .mu-carousel__track {
    --fade: 48px;
  }
}

/* ================= Upload-Kachel (Frame edit-profile-organizers--musikprofil, ersetzt upload-container) =================
   Das Eingabefeld liegt unsichtbar über der Kachel: Klick, Tastatur und Ablegen laufen nativ.
   Zustände: .is-required, .is-optional, .has-preview, .is-dragging, .is-loading, .is-error, .is-disabled.
   Beim Hochladen kein Spinner, sondern Schimmer. Verhalten in js/ui/upload.js. */
.mu-upload {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  width: 80px;
  height: 80px;
  border-radius: var(--r-md);
  background: var(--color-surface-muted);
  color: var(--color-text-subtle);
  transition: box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.mu-upload--light {
  width: 68px;
  height: 68px;
  background: var(--color-surface);
  box-shadow: var(--sh-1);
}

.mu-upload--wide {
  width: 100%;
  height: auto;
  min-height: 132px;
  padding: var(--sp-5);
  text-align: center;
}

.mu-upload__input {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  width: 100%;
  height: 100%;
  border-radius: inherit;
  opacity: 0;
  cursor: pointer;
}

.mu-upload__add {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

.mu-upload__add svg {
  width: 100%;
  height: 100%;
}

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

.mu-upload__hint {
  font-size: var(--fs-micro);
  color: var(--color-text-subtle);
}

.mu-upload__preview {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.mu-upload__badge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid var(--color-accent);
  transform: translate(-40%, -50%);
  pointer-events: none;
}

.mu-upload__remove {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: calc(var(--z-raised) + 1);
  display: none;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--r-round);
  background: var(--color-primary);
  color: var(--color-text-on-brand);
  cursor: pointer;
}

.mu-upload__remove::before {
  content: '';
  position: absolute;
  inset: calc((24px - var(--tap-min)) / 2);
}

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

.mu-upload.has-preview .mu-upload__remove {
  display: grid;
}

.mu-upload.has-preview .mu-upload__add,
.mu-upload.has-preview .mu-upload__text,
.mu-upload.has-preview .mu-upload__hint {
  visibility: hidden;
}

.mu-upload.is-required {
  box-shadow: inset 0 0 0 var(--bw-select) var(--color-primary);
}

.mu-upload.is-optional {
  box-shadow: inset 0 0 0 var(--bw-select) var(--color-border-strong);
}

.mu-upload.is-dragging {
  box-shadow: inset 0 0 0 var(--bw-select) var(--color-accent);
  background: var(--c-orange-10);
}

.mu-upload.is-error {
  box-shadow: inset 0 0 0 var(--bw-select) var(--color-danger);
}

.mu-upload.is-disabled {
  opacity: 0.4;
}

.mu-upload.is-disabled .mu-upload__input {
  cursor: not-allowed;
}

.mu-upload:focus-within,
.mu-upload:focus-visible {
  box-shadow: var(--focus-ring);
}

/* Vorschau als Hülle (Bild, Video-Standbild, Einbettung): Inhalt füllt die Kachel */
div.mu-upload__preview { overflow: hidden; }
div.mu-upload__preview > img,
div.mu-upload__preview > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gerade in der großen Vorschau gezeigt */
.mu-upload.is-active { box-shadow: 0 0 0 var(--bw-select) var(--color-accent); }

/* Video: Abspiel-Dreieck wie .mu-upload__badge */
.mu-upload.is-video::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid var(--color-accent);
  transform: translate(-40%, -50%);
  pointer-events: none;
}

/* Audio: Profilbild abgedunkelt mit Noten-Symbol */
.mu-upload__audio {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  overflow: hidden;
  background: var(--color-surface-muted);
}

.mu-upload__audio-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5);
}

.mu-upload__audio-icon {
  position: relative;
  display: grid;
  color: var(--color-text-on-brand);
}

.mu-upload__audio-icon svg { width: 24px; height: 24px; }

/* Ohne Bild (Link ohne Vorschaubild, schon gespeichertes Medium): helle Fläche, Symbol lila */
.mu-upload__audio--plain .mu-upload__audio-icon { color: var(--color-primary); }

.mu-upload.is-loading {
  overflow: hidden;
}

.mu-upload.is-loading .mu-upload__input {
  pointer-events: none;
}

.mu-upload.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--g-skeleton-sweep);
  transform: translateX(-100%);
  animation: mu-sweep var(--dur-sweep) var(--ease-in-out) infinite;
}

@media (hover: hover) {
  .mu-upload:hover:not(.is-disabled) {
    box-shadow: var(--sh-1);
  }
}

/* Bühne: große Kachel im Assistenten, Ablegen und Vorschau in einem (Medien-Assistent).
   Mit Vorschau ist der Inhalt bedienbar (Video, Einbettung), neu wählen geht über Entfernen. */
.mu-upload--stage {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 240px;
  padding: var(--sp-5);
  text-align: center;
}

.mu-upload--square {
  align-self: center;
  width: min(100%, 240px);
  aspect-ratio: 1;
}

/* Im kleinen Quadrat weniger Innenrand, damit Text und Formate auch bei 144 px ruhig umbrechen (F24t Punkt 135) */
.mu-upload--stage.mu-upload--square { padding: var(--sp-3); }

.mu-upload--stage .mu-upload__remove {
  top: var(--sp-2);
  right: var(--sp-2);
}

.mu-upload--stage.has-preview .mu-upload__input {
  display: none;
}

.mu-upload--stage div.mu-upload__preview {
  display: grid;
  place-items: center;
}

/* Ohne Rand aus .mu-media-fit schwarz hinterlegt, mit ihm scheint die verschwommene Kopie durch (F24t Punkt 135) */
.mu-upload--stage div.mu-upload__preview > video {
  object-fit: contain;
}

.mu-upload--stage div.mu-upload__preview:not(.mu-media-fit) > video {
  background: var(--c-ink);
}

/* Medien-Assistent ohne Scrollen (F24t Punkt 135): Alle Bühnen sind quadratisch (Danie: alle Medien), mittig wie die Kachelreihe.
   Das Quadrat gibt nach, wenn die Karte niedriger wird (Desktop und Handy): voll 240 px, höchstens bis 144 px */
.mu-wizard__step > .mu-upload--stage {
  flex: 0 1 240px;
  min-height: 144px;
  aspect-ratio: auto;
}

.mu-wizard__step > .mu-upload--stage.mu-upload--square {
  width: auto;
  aspect-ratio: 1;
}

/* Handy (F24t Punkt 185): Die Seite scrollt (Punkt 183), die Bühne richtet sich nach der Höhe des Bildschirms. Abgezogen wird,
   was sonst noch sichtbar sein soll: Kopf, Fortschritt, Titel, Medienleiste, Weiter, untere Navigation und Leiste „Team-Modus“.
   Nie breiter als die Karte, nie unter 144 px; passt es dann nicht, scrollt die Seite */
@media (max-width: 900px) {
  .mu-wizard__step > .mu-upload--stage {
    flex: none;
    height: clamp(144px, calc(100dvh - 410px - var(--stage-nav, 0px) - var(--stage-bar, 0px)), 240px);
    min-height: 0;
    max-width: 100%;
  }

  body.has-mu-bottom-nav { --stage-nav: calc(var(--bottom-nav-h) + var(--safe-bottom)); }
  body:has(> .mu-maint-bar) { --stage-bar: 40px; }
}

/* Mit Vorschau eines Links verschwindet das Linkfeld wie die Dateiwahl, neu wählen geht über Entfernen */
.mu-wizard__step:has(> .mu-upload--stage.has-preview) > [data-mw-panel] {
  display: none;
}

.mu-upload__preview > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Audio auf der Bühne: Profilbild abgedunkelt, Wiedergabe unten */
.mu-upload__preview > audio {
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: var(--z-raised);
  width: calc(100% - 2 * var(--sp-3));
}

/* Statuszeile in der Kachel, etwa beim Umwandeln eines Videos (mit .is-loading) */
.mu-upload__status {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.mu-upload__status[hidden] { display: none; }

/* ================= Zuschneiden: Inhalt für MuveupDialog (size: 'wide'), Bild per Cropper.js =================
   .mu-crop--round zeigt den runden Ausschnitt für Profilbilder. */
.mu-crop {
  height: min(400px, 60dvh);
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--color-surface-muted);
}

.mu-crop img {
  display: block;
  max-width: 100%;
}

.mu-crop .cropper-view-box {
  outline-color: var(--color-primary);
}

.mu-crop .cropper-line,
.mu-crop .cropper-point {
  background-color: var(--color-primary);
}

.mu-crop--round .cropper-view-box,
.mu-crop--round .cropper-face {
  border-radius: var(--r-round);
}

.mu-crop__hint {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--color-text-subtle);
  text-align: center;
}

/* ================= Segment-Schalter (Frame buchungsassistent 02, ersetzt slot-seg und muveup-segment) =================
   Einzelwahl aus zwei bis fünf kurzen Werten. Zustand am Knopf: aria-checked, aria-pressed, aria-selected oder .is-active.
   Mehrere Reiter mit eigenem Inhalt bleiben .mu-tabs. */
.mu-segment {
  display: inline-flex;
  align-self: flex-start;
  max-width: 100%;
  padding: 2px;
  border: var(--bw) solid var(--color-primary);
  border-radius: var(--r-pill);
  background: var(--color-surface);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.mu-segment::-webkit-scrollbar {
  display: none;
}

.mu-segment--block {
  display: flex;
  align-self: stretch;
}

.mu-segment--block .mu-segment__btn {
  flex: 1;
}

.mu-segment__btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 26px;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--color-text-subtle);
  font: inherit;
  font-size: var(--fs-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.mu-segment__btn[aria-checked="true"],
.mu-segment__btn[aria-pressed="true"],
.mu-segment__btn[aria-selected="true"],
.mu-segment__btn.is-active {
  background: var(--color-primary);
  color: var(--color-text-on-brand);
}

.mu-segment__btn:focus-visible {
  box-shadow: inset 0 0 0 var(--bw-select) var(--color-focus);
}

.mu-segment__btn:disabled {
  color: var(--color-border-strong);
  cursor: not-allowed;
}

.mu-segment__count {
  font-size: var(--fs-micro);
  opacity: 0.8;
}

.mu-segment--accent {
  border-color: var(--color-accent);
}

.mu-segment--accent .mu-segment__btn[aria-checked="true"],
.mu-segment--accent .mu-segment__btn[aria-pressed="true"],
.mu-segment--accent .mu-segment__btn[aria-selected="true"],
.mu-segment--accent .mu-segment__btn.is-active {
  background: var(--color-accent);
}

@media (hover: hover) {
  .mu-segment__btn:hover:not(:disabled):not([aria-checked="true"]):not([aria-pressed="true"]):not([aria-selected="true"]):not(.is-active) {
    color: var(--color-text);
  }
}

@media (max-width: 900px) {
  .mu-segment__btn {
    min-height: 34px;
  }
}

/* ================= Filter: Gruppe mit Chips, Checkboxen, Zurücksetzen (ersetzt filter-*, checkbox-item, mfb-*) =================
   Keine Figma-Vorlage, abgeleitet aus Chip und Checkbox. --bar ist die einzeilige Leiste über Listen. */
.mu-filter {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--color-surface-soft);
}

.mu-filter__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.mu-filter__title {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.mu-filter__reset {
  margin-left: auto;
}

.mu-filter__reset[hidden] {
  display: none;
}

.mu-filter__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.mu-filter__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

.mu-filter__checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--sp-2);
}

.mu-filter--bar {
  flex-direction: row;
  align-items: center;
  padding: 0;
  background: none;
}

/* Nur die Chips scrollen, Zurücksetzen bleibt sichtbar */
.mu-filter--bar .mu-chips {
  flex: 1;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.mu-filter--bar .mu-chips::-webkit-scrollbar {
  display: none;
}

.mu-filter--bar .mu-chip {
  flex: none;
}

.mu-filter--bar .mu-filter__reset {
  flex: none;
}

/* ================= Tooltip: Info-Symbol mit Text (Frame onboarding 06, ersetzt info-icon) =================
   Maus: Hover. Tastatur: Fokus. Touch: Tippen, verhalten in js/ui/tooltip.js. Der Text bleibt im Bildschirm. */
.mu-tooltip {
  position: relative;
  display: inline-flex;
  flex: none;
  vertical-align: middle;
}

.mu-tooltip__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: var(--bw) solid currentColor;
  border-radius: var(--r-round);
  background: none;
  color: var(--color-text-subtle);
  font-family: inherit;
  font-size: 10px;
  font-style: normal;
  font-weight: var(--fw-medium);
  line-height: 1;
  cursor: help;
}

/* Trefferfläche 40 px, das Symbol bleibt klein */
.mu-tooltip__icon::after {
  content: '';
  position: absolute;
  inset: calc((14px - var(--tap-min)) / 2);
}

.mu-tooltip__icon:focus-visible {
  box-shadow: var(--focus-ring);
}

/* Blase aller Tooltips, js/ui/tooltip.js setzt die Lage */
.mu-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-toast);
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm-lg);
  background: var(--color-text);
  color: var(--color-text-on-brand);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  text-align: left;
  white-space: normal;
  box-shadow: var(--sh-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
  pointer-events: none;
}

.mu-tip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.mu-tip strong { font-weight: var(--fw-semibold); }
.mu-tip p { margin: 0 0 var(--sp-2); }
.mu-tip p:last-child { margin-bottom: 0; }

/* ================= Tabelle (keine Figma-Vorlage, ersetzt die fünf table-Stellen und Master-Listen) =================
   Bis 900 px wird jede Zeile zur Karte: td bekommt data-label, .mu-table__primary ist der Zeilentitel. */
.mu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
  color: var(--color-text);
}

.mu-table th {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: var(--bw) solid var(--color-border-strong);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text-subtle);
  text-align: left;
  white-space: nowrap;
}

.mu-table td {
  padding: var(--sp-3);
  border-bottom: var(--bw) solid var(--color-border);
  vertical-align: middle;
}

.mu-table tbody tr:last-child td {
  border-bottom: 0;
}

.mu-table .is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mu-table__primary {
  font-weight: var(--fw-medium);
}

.mu-table td.mu-table__actions {
  text-align: right;
  white-space: nowrap;
}

.mu-table tr.is-selected td {
  background: var(--c-purple-10);
}

.mu-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.mu-table__sort::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--color-border-strong);
  border-bottom: 2px solid var(--color-border-strong);
  transform: translateY(-1px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}

[aria-sort] > .mu-table__sort {
  color: var(--color-text);
}

[aria-sort] > .mu-table__sort::after {
  border-color: var(--color-primary);
}

[aria-sort="ascending"] > .mu-table__sort::after {
  transform: translateY(2px) rotate(-135deg);
}

@media (hover: hover) {
  .mu-table tbody tr:hover td {
    background: var(--color-surface-soft);
  }

  .mu-table tbody tr.is-selected:hover td {
    background: var(--c-purple-10);
  }
}

@media (max-width: 900px) {
  .mu-table,
  .mu-table tbody,
  .mu-table tr,
  .mu-table td {
    display: block;
  }

  .mu-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .mu-table tr {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    background: var(--color-surface-muted);
  }

  .mu-table tr + tr {
    margin-top: var(--sp-2);
  }

  .mu-table tr.is-selected {
    background: var(--c-purple-10);
  }

  .mu-table tr.is-selected td {
    background: none;
  }

  .mu-table td {
    display: grid;
    grid-template-columns: minmax(96px, 40%) minmax(0, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-1) 0;
    border-bottom: 0;
    background: none;
  }

  .mu-table td::before {
    content: attr(data-label);
    font-size: var(--fs-small);
    color: var(--color-text-subtle);
  }

  .mu-table .is-num {
    text-align: left;
  }

  .mu-table td.mu-table__primary {
    display: block;
    padding-bottom: var(--sp-2);
    font-size: var(--fs-body-lg);
  }

  .mu-table td.mu-table__primary::before,
  .mu-table td.mu-table__actions::before {
    content: none;
  }

  .mu-table td.mu-table__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding-top: var(--sp-2);
  }
}

/* ================= Benachrichtigung: eine Zeile =================
   Titel, Text und Zeit stehen getrennt, Link ohne Unterstreichung, Aktionen als Icon-Knopf.
   .mu-notif--static: Vorgang gelöscht, kein Sprung. */
.mu-notifs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mu-notif {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-1);
  border-radius: var(--r-sm-lg);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.mu-notif__link {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-3);
  border-radius: inherit;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

.mu-notif__link:focus-visible {
  box-shadow: var(--focus-ring);
}

.mu-notif__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-round);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

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

.mu-notif__icon--primary { background: var(--color-primary); color: var(--color-text-on-brand); }
.mu-notif__icon--accent { background: var(--color-accent); color: var(--color-text-on-brand); }
.mu-notif__icon--success { background: var(--color-success); color: var(--color-text-on-brand); }
.mu-notif__icon--danger { background: var(--color-danger); color: var(--color-text-on-brand); }

.mu-notif__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mu-notif__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.mu-notif__text {
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.mu-notif__meta {
  margin-top: 2px;
  font-size: var(--fs-micro);
  color: var(--color-text-subtle);
}

.mu-notif__action {
  flex: none;
  margin: var(--sp-2) var(--sp-2) 0 0;
}

.mu-notif.is-unread {
  background: var(--c-purple-10);
}

.mu-notif.is-unread .mu-notif__title {
  font-weight: var(--fw-bold);
}

.mu-notif.is-unread .mu-notif__icon::after {
  content: '';
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  width: 8px;
  height: 8px;
  border: var(--bw) solid var(--color-surface);
  border-radius: var(--r-round);
  background: var(--color-danger);
}

.mu-notif--static .mu-notif__title,
.mu-notif--static .mu-notif__text {
  color: var(--color-text-subtle);
}

@media (hover: hover) {
  .mu-notif:not(.mu-notif--static):hover {
    background: var(--color-surface-soft);
  }

  .mu-notif.is-unread:not(.mu-notif--static):hover {
    background: var(--c-purple-20);
  }
}

/* ================= Bewertung: Sterne (ersetzt rate-*, Einbau in F15) =================
   Anzeige: .mu-rating__stars mit --rating (0 bis 5, auch halbe Werte) als style-Variable.
   Eingabe: .mu-rating--input mit Radios in umgekehrter Reihenfolge, 5 zuerst, damit CSS die Sterne davor füllt. */
.mu-rating {
  --rating-size: 18px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.mu-rating--sm { --rating-size: 14px; }
.mu-rating--lg { --rating-size: 26px; }

.mu-rating__stars {
  display: block;
  flex: none;
  width: calc(var(--rating-size) * 5);
  height: var(--rating-size);
  background: linear-gradient(90deg, var(--color-accent) calc(var(--rating, 0) / 5 * 100%), var(--color-border) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 16.8l-6.1 3.3 1.4-6.8L2.2 9.6l6.9-.8z'/%3E%3C/svg%3E") left / var(--rating-size) repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 16.8l-6.1 3.3 1.4-6.8L2.2 9.6l6.9-.8z'/%3E%3C/svg%3E") left / var(--rating-size) repeat-x;
}

.mu-rating__value {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.mu-rating__count {
  font-size: var(--fs-small);
  color: var(--color-text-subtle);
}

.mu-rating--input {
  --rating-size: 26px;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.mu-rating--input input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.mu-rating--input label {
  position: relative;
  display: block;
  width: var(--tap-min);
  height: var(--tap-min);
  cursor: pointer;
}

.mu-rating--input label::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-border);
  transition: background-color var(--dur-fast) var(--ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 16.8l-6.1 3.3 1.4-6.8L2.2 9.6l6.9-.8z'/%3E%3C/svg%3E") center / var(--rating-size) no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 16.8l-6.1 3.3 1.4-6.8L2.2 9.6l6.9-.8z'/%3E%3C/svg%3E") center / var(--rating-size) no-repeat;
}

.mu-rating--input input:checked ~ label::before {
  background: var(--color-accent);
}

.mu-rating--input input:focus-visible + label {
  border-radius: var(--r-sm);
  box-shadow: var(--focus-ring);
}

.mu-rating--input input:disabled ~ label {
  cursor: not-allowed;
  opacity: 0.5;
}

@media (hover: hover) {
  .mu-rating--input:not(:disabled) label:hover::before,
  .mu-rating--input:not(:disabled) label:hover ~ label::before {
    background: var(--c-orange-300);
  }
}

/* ================= Rollenkarte (choose-role), Stepper und Assistent (js/ui/wizard.js), aus css/pages/auth.css ================= */
.mu-role-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-2);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  box-shadow: var(--sh-1);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}

.mu-role-card > * { transition: opacity var(--dur-base) var(--ease-out); }

.mu-role-card:focus-visible {
  box-shadow: var(--focus-ring);
}

/* Nicht gewählte Karte: weiß, Inhalt blass, Pfeil grau */
.mu-role-card:not(.is-active) > * { opacity: 0.35; }
.mu-role-card:not(.is-active) .mu-icon-btn { background: var(--color-surface-muted); color: var(--color-text-on-brand); }
.mu-role-card.is-active { box-shadow: var(--sh-3); }

.mu-role-card__media {
  position: relative;
  aspect-ratio: 410 / 344;
  border-radius: calc(var(--r-lg) - var(--sp-2));
  overflow: hidden;
  background: var(--color-surface-muted);
}

.mu-role-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.mu-role-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
}

.mu-role-card__name {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: 1.2;
}

.mu-role-card__text {
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--color-text);
}

.mu-role-card .mu-icon-btn {
  width: 48px;
  height: 48px;
  pointer-events: none;
}

@media (hover: hover) and (min-width: 901px) {
  .mu-role-card.is-active:hover {
    transform: translateY(-4px);
  }

  .mu-role-card.is-active:hover .mu-role-card__media img {
    transform: scale(1.04);
  }
}

/* ================= Stepper (unter der Topbar) ================= */
.mu-stepper {
  position: sticky;
  top: var(--sticky-top);
  z-index: var(--z-sticky);
  background: var(--color-accent);
}

.mu-stepper[hidden] {
  display: none;
}

.mu-stepper__bar {
  height: 5px;
  background: var(--c-ink);
}

.mu-stepper__fill {
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--color-surface) 0%, var(--color-success) 100%);
  transition: width var(--dur-slow) var(--ease-spring);
}

.mu-stepper__labels {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-2) var(--page-gutter) 0;
  list-style: none;
}

.mu-stepper__label {
  color: rgb(var(--c-black-rgb) / 0.45);
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out);
}

.mu-stepper__label.is-done {
  color: rgb(var(--c-black-rgb) / 0.6);
}

.mu-stepper__label.is-active {
  color: var(--color-text-strong);
  font-weight: var(--fw-medium);
}

.mu-stepper__mobile {
  display: none;
}

/* ================= Assistent ================= */
/* Hinweisbox mit Glühbirne (Gage) */
.mu-wizard__tip {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-orange-10);
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--color-text);
}

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

.mu-wizard__tip p + p {
  margin-top: var(--sp-1);
}

.mu-wizard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  /* Ein Maß für alle Schritte und alle Assistenten, in niedrigen Fenstern kleiner. Längere Schritte scrollen innen (F24i) */
  --wizard-pad-x: var(--sp-8);
  flex: 0 1 var(--wizard-card-h);
  min-height: var(--wizard-card-min-h);
  overflow: clip;
  padding: var(--sp-8) var(--wizard-pad-x) var(--sp-6);
  box-shadow: var(--sh-1);
}

/* Die Scrollleiste liegt am Kartenrand, der Inhalt bleibt in jedem Schritt gleich breit */
.mu-wizard__step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  flex: 1 1 0;
  min-height: 0;
  margin-inline: calc(-1 * var(--wizard-pad-x));
  padding: var(--sp-1) calc(var(--wizard-pad-x) - var(--scrollbar-size)) var(--sp-1) var(--wizard-pad-x);
  overflow: hidden auto;
  scrollbar-gutter: stable;
}

.mu-wizard__step > * {
  flex-shrink: 0;
}

/* Niedrige Fenster (F24t Punkt 111): ein Fenster mit 1917 × 940 oder 1440 × 900 lässt der Seite nur rund 780 px.
   Etwas weniger Luft über dem Titel, zwischen den Zeilen und in den Kacheln, damit kein Schritt knapp scrollt */
@media (min-width: 901px) and (max-height: 860px) {
  .mu-wizard { padding-top: var(--sp-6); }
  .mu-wizard__step { gap: var(--sp-4); }
  .mu-wizard .mu-options--dirs .mu-option--tile { padding-block: var(--sp-3); }
}

.mu-wizard__step[hidden] {
  display: none;
}

.mu-wizard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.mu-wizard__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--color-text);
  /* Bricht ein Titel um, dann in zwei ruhige Zeilen statt einem letzten Wort allein (F24t Punkt 136) */
  text-wrap: balance;
}

/* Der Fokus wandert beim Schrittwechsel per Skript hierher, ein Rahmen um die Überschrift hilft niemandem */
.mu-wizard__title:focus,
.mu-wizard__title:focus-visible { outline: none; box-shadow: none; }

.mu-wizard__title em {
  color: var(--color-accent-text);
}

.mu-wizard__req,
.mu-wizard__count {
  flex: none;
  font-size: var(--fs-micro);
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.mu-wizard__badge {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--color-surface-soft);
  color: var(--color-primary);
  font-size: var(--fs-micro);
  font-weight: 600;
}

.mu-wizard__lead {
  margin-top: calc(-1 * var(--sp-2));
  font-size: var(--fs-body);
  color: var(--color-text-muted);
}

.mu-wizard__fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.mu-wizard__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-6);
}

.mu-wizard__grid > .mu-field--full {
  grid-column: 1 / -1;
}

.mu-wizard .mu-label {
  font-size: var(--fs-body-lg);
}

.mu-wizard .mu-input,
.mu-wizard .mu-select,
.mu-wizard .mu-textarea {
  min-height: 34px;
}

.mu-wizard .mu-textarea {
  min-height: 96px;
}

/* Mobil Tippfläche statt der dichten Desktop-Höhe */
@media (max-width: 900px) {
  .mu-wizard .mu-input,
  .mu-wizard .mu-select,
  .mu-wizard__back {
    min-height: var(--tap-min);
  }
}

.mu-wizard__hint {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--color-surface-soft);
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--color-text-subtle);
  text-align: center;
}

.mu-wizard__counter {
  font-size: var(--fs-micro);
  color: var(--color-text-subtle);
  text-align: right;
}

.mu-wizard__sub {
  font-size: var(--fs-body-lg);
  color: var(--color-text);
}

.mu-wizard__error {
  display: block;
  flex: none;
  max-height: calc(var(--wizard-error-h) - var(--sp-5));
  margin-top: auto;
  overflow-y: auto;
}

.mu-wizard__error:not([hidden]) + .mu-wizard__foot {
  margin-top: 0;
}

/* Mehrere Fehler laufen als Zeile, die Felder sind schon markiert. So passt die Meldung in den gehaltenen Platz */
.mu-wizard__error ul {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mu-wizard__error li {
  display: inline;
}

.mu-wizard__error li + li::before {
  content: ', ';
}

.mu-wizard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-3);
}

.mu-wizard__back {
  font-size: var(--fs-small);
  color: var(--color-text-subtle);
  padding: var(--sp-2) 0;
}

@media (hover: hover) {
  .mu-wizard__back:hover {
    color: var(--color-text);
    text-decoration: underline;
  }
}

.mu-wizard__back[hidden],
.mu-wizard__skip[hidden] {
  display: none;
}

.mu-wizard__foot-end {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
}

/* Überspringen ist ein stiller Textlink links neben Zurück, rechts steht allein der Weiter-Knopf (F24t Punkt 199).
   Die Gruppe rechts löst sich dafür auf, ihre Knöpfe ordnen sich in die Fußzeile ein */
.mu-wizard__foot > .mu-wizard__foot-end { display: contents; }
.mu-wizard__foot .mu-wizard__skip {
  order: 1;
  min-height: 0;
  height: auto;
  margin-right: auto;
  padding: var(--sp-2) 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--color-text-subtle);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
}
.mu-wizard__back:not([hidden]) + .mu-wizard__foot-end > .mu-wizard__skip { margin-left: var(--sp-3); }
.mu-wizard__foot > .mu-wizard__foot-end > :not(.mu-wizard__skip) { order: 2; }
.mu-wizard__foot > .mu-wizard__foot-end > .mu-wizard__next { margin-left: auto; }

@media (hover: hover) {
  .mu-wizard__foot .mu-wizard__skip:hover {
    background: none;
    color: var(--color-text);
    text-decoration: underline;
  }
}

@media (max-width: 900px) {
  .mu-wizard__foot .mu-wizard__skip { min-height: var(--tap-min); }
}

/* Runder Weiter-Pfeil, auf der letzten Folie Text-Button */
.mu-wizard__next {
  width: 46px;
  height: 46px;
  min-height: 46px;
  min-width: 46px;
  padding: 0;
  border-radius: var(--r-round);
}

.mu-wizard__next svg {
  width: 22px;
  height: 22px;
}

.mu-wizard__next .mu-wizard__next-label {
  display: none;
}

.mu-wizard__next.is-finish {
  width: auto;
  padding: 0 var(--sp-6);
  border-radius: var(--r-pill);
}

.mu-wizard__next.is-finish .mu-wizard__next-label {
  display: inline;
}

.mu-wizard__next.is-finish svg {
  display: none;
}

.mu-wizard__next.muveup-btn-loading {
  border-radius: var(--r-pill);
}

/* Zusammenfassung vor dem Absenden */
.mu-wizard__summary {
  display: grid;
  gap: 0;
  border-radius: var(--r-md);
  background: var(--color-surface-soft);
  padding: var(--sp-2) var(--sp-4);
}

.mu-wizard__summary h2 {
  font-size: var(--fs-body-lg);
  font-weight: 600;
  margin: var(--sp-2) 0 var(--sp-1);
}

.mu-wizard__summary ul {
  margin: 0 0 var(--sp-2);
  padding-left: 1.2em;
}

.mu-wizard__summary-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.4fr) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: var(--bw) solid var(--color-border);
  font-size: var(--fs-body);
}

.mu-wizard__summary-row:last-child {
  border-bottom: 0;
}

.mu-wizard__summary-label {
  color: var(--color-text-subtle);
}

.mu-wizard__summary-value {
  color: var(--color-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mu-wizard__summary-edit {
  font-size: var(--fs-micro);
  color: var(--color-primary);
}

@media (hover: hover) {
  .mu-wizard__summary-edit:hover {
    text-decoration: underline;
  }
}

/* Abschlussfolie im Assistenten */
.mu-wizard__done {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mu-wizard__done .mu-wizard__title {
  text-align: center;
}

.mu-wizard__done p {
  max-width: 40ch;
  font-size: var(--fs-body);
  line-height: var(--lh-message);
}

.mu-wizard__done .mu-auth-check {
  animation: mu-pop-in var(--dur-slow) var(--ease-spring) both;
}

.mu-wizard__done-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

/* Aufzählung auf der Startfolie, Haken in Akzentfarbe */
.mu-wizard__checklist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-body);
  color: var(--color-text);
}

.mu-wizard__checklist li {
  position: relative;
  padding-left: var(--sp-6);
}

.mu-wizard__checklist li::before {
  content: '';
  position: absolute;
  left: var(--sp-1);
  top: 0.35em;
  width: 10px;
  height: 6px;
  border-left: var(--bw-select) solid var(--color-accent-text);
  border-bottom: var(--bw-select) solid var(--color-accent-text);
  transform: rotate(-45deg);
}

/* Medienleiste: ein Platz je Schritt, belegte und der aktuelle Platz sind antippbar */
.mu-wizard__media {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: var(--bw) solid var(--color-border);
}

.mu-wizard__media[hidden] { display: none; }

.mu-wizard__media-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  min-width: 0;
  min-height: var(--tap-min);
  border-radius: var(--r-md);
  cursor: pointer;
}

.mu-wizard__media-item[aria-disabled="true"] { cursor: default; }

.mu-wizard__media-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.mu-wizard__media-item .mu-upload {
  width: 56px;
  height: 56px;
}

.mu-wizard__media-item .mu-upload__text {
  font-weight: var(--fw-medium);
}

.mu-wizard__media-item .mu-upload.has-preview .mu-upload__text { visibility: hidden; }

.mu-wizard__media-item[aria-current="step"] .mu-upload { box-shadow: 0 0 0 var(--bw-select) var(--color-accent); }

.mu-wizard__media-label {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--fs-micro);
  color: var(--color-text-subtle);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mu-wizard__media-item[aria-current="step"] .mu-wizard__media-label {
  color: var(--color-text);
  font-weight: var(--fw-medium);
}

/* Niedrige Fenster im Medien-Assistenten (F24t Punkt 135, wie Punkt 111): etwas weniger Luft in Karte, Tipp und Medienleiste.
   Die Höhe der Leiste „Team-Modus“ steckt schon im Fluss der Seite, die Karte wird mit ihr niedriger. Grenze 920 statt 860,
   sonst scrollt Schritt 2 mit Fehlerzeile oder gespeicherter Hörprobe zwischen 861 und 910 px knapp */
@media (min-width: 901px) and (max-height: 920px) {
  .mu-wizard:has(> .mu-wizard__media) {
    gap: var(--sp-4);
    padding-top: var(--sp-6);
    padding-bottom: var(--sp-5);
  }

  .mu-wizard:has(> .mu-wizard__media) > .mu-wizard__step { gap: var(--sp-4); }
  .mu-wizard:has(> .mu-wizard__media) .mu-wizard__head + * { margin-top: var(--sp-2); }
  .mu-wizard__media { padding-top: var(--sp-3); }
  .mu-wizard__media-item .mu-upload { width: 48px; height: 48px; }
  .mu-wizard:has(> .mu-wizard__media) .mu-wizard__tip { padding-block: var(--sp-2); }
}

@media (max-width: 900px) {
  .mu-wizard__media-item .mu-upload {
    width: 48px;
    height: 48px;
  }
}

.mu-wizard__done-hints {
  width: 100%;
  max-width: 40ch;
  text-align: left;
  background: var(--color-surface-soft);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin: var(--sp-3) 0;
}

.mu-wizard__done-hints p {
  font-weight: 600;
  margin: 0 0 var(--sp-2);
}

.mu-wizard__done-hints ul {
  margin: 0 0 var(--sp-3);
  padding-left: 1.2em;
}

/* Ganze Karte während des Absendens */
.mu-wizard.is-busy .mu-wizard__step {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

.mu-wizard [hidden] {
  display: none !important;
}

/* Figma Registrierung: Stepper-Beschriftung größer, mehr Luft unter der Überschrift (REVIEW A5, A7) */
.mu-stepper__label { font-size: var(--fs-body-lg); }
.mu-wizard__head + * { margin-top: var(--sp-4); }

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

  /* Mit Wartungs- oder Team-Leiste hat die klebende Kopfzeile keinen Statusleisten-Abstand: Der Fortschritt schließt
     direkt an, sonst scheint der Titel beim Scrollen durch eine Lücke (F24t Punkt 184) */
  body:has(> .mu-maint-bar) .mu-stepper { top: var(--topbar-h-mobile); }

  .mu-stepper__labels {
    display: none;
  }

  .mu-stepper__mobile {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--page-gutter-mobile) 0;
    font-size: var(--fs-small);
    color: rgb(var(--c-black-rgb) / 0.6);
  }

  .mu-stepper__mobile b {
    color: var(--color-text-strong);
    font-weight: var(--fw-medium);
  }

  /* .mu-card kommt mobil aus layout.css, das nach dieser Datei lädt */
  .mu-card.mu-wizard {
    --wizard-pad-x: var(--sp-5);
    padding: var(--sp-6) var(--wizard-pad-x) var(--sp-5);
    /* Seitlich bleibt der Schiebe-Übergang in der Karte, nach unten wächst sie mit (F24t Punkt 183) */
    overflow: visible;
    overflow-x: clip;
  }

  /* Ältere Safari kennen overflow: clip nicht: Dann schob der einschiebende Schritt die Seite nach rechts (F24t Punkt 185) */
  @supports not (overflow: clip) {
    .mu-card.mu-wizard { contain: paint; }
  }

  /* Mobil scrollt die Seite, nicht der Schritt (F24t Punkt 183): nichts wird abgeschnitten, die Wischgeste ist die gewohnte */
  .mu-wizard__step {
    flex: 1 0 auto;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  /* Zurück, Überspringen und Weiter bleiben unten ganz sichtbar, auch wenn der Schritt länger ist als der Bildschirm */
  .mu-wizard__foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-inline: calc(-1 * var(--wizard-pad-x));
    padding: var(--sp-3) var(--wizard-pad-x) calc(var(--sp-3) + var(--safe-bottom));
    background: var(--color-surface);
  }

  /* Weicher Übergang über dem Fuß: Inhalt, der darunter weiterläuft, sieht nicht abgeschnitten aus */
  .mu-wizard__foot::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: var(--sp-3);
    background: linear-gradient(to top, var(--color-surface), transparent);
    pointer-events: none;
  }

  body.has-mu-bottom-nav .mu-wizard__foot {
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
    padding-bottom: var(--sp-3);
  }

  .mu-wizard__title {
    font-size: var(--fs-h2);
  }

  .mu-wizard__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mu-role-card__media {
    aspect-ratio: 2 / 1;
  }

  .mu-wizard__summary-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mu-wizard__summary-label {
    grid-column: 1 / -1;
  }
}

/* ================= Lauftext für lange Namen (js/ui/marquee.js) =================
   Einzeilig, nicht laufend mit „…“. Nur Namen in Zeilen, Menüs und Köpfen: nicht in Fließtext, Formularfeldern, Knöpfen, Master-Tabellen. */
@property --marquee-fade-start {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --marquee-fade-end {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.mu-marquee {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mu-marquee.is-running {
  text-overflow: clip;
  -webkit-mask-image: linear-gradient(to right, transparent, rgb(var(--c-black-rgb)) var(--marquee-fade-start), rgb(var(--c-black-rgb)) calc(100% - var(--marquee-fade-end)), transparent);
  mask-image: linear-gradient(to right, transparent, rgb(var(--c-black-rgb)) var(--marquee-fade-start), rgb(var(--c-black-rgb)) calc(100% - var(--marquee-fade-end)), transparent);
}

.mu-marquee.is-running > .mu-marquee__text {
  display: inline-block;
  will-change: transform;
}

/* ================= Weiche Kante an Scrollbereichen (F24t Punkt 84) =================
   Inhalt läuft an der Kante eines scrollenden Bereichs sanft aus, statt hart abzureißen. Eine Kante erscheint nur,
   solange in diese Richtung wirklich etwas weiterläuft: Die Maske steckt in einer scroll-getriebenen Animation des
   Bereichs selbst (oben aus am Anfang, unten aus am Ende). Scrollt nichts (Timeline inaktiv) oder kennt der Browser
   das nicht, gibt es keine Maske, die Fokusringe, Schatten oder feste Fenster abschneiden könnte.
   Ein Baustein: .mu-scroll-fade (senkrecht) oder .mu-scroll-fade--x (waagerecht) im Markup, feste Scrollbereiche
   stehen unten in den beiden Listen. Stellschrauben am Bereich: --scroll-fade (Breite der Kante),
   --scroll-fade-min (Deckkraft ganz am Rand, 0 = ausgeblendet), --scroll-fade-inset (Abstand oben, etwa eine Linie).
   Nicht für Kästen mit eigenem Rahmen, Hintergrund oder Schatten (Dialoge, Menüs, Segmente): Die Maske träfe auch die. */
:root {
  --scroll-fade: var(--sp-6);
  --scroll-fade-min: 0;
  --scroll-fade-inset: 0px;
}

@supports (animation-timeline: scroll()) {
  .mu-scroll-fade,
  .mu-panel__body,
  .mu-detail__body,
  .mu-accordion__body,
  .mu-pick-list__list,
  .mu-cal-pop__list,
  .mu-applicants__event,
  .mu-event-list,
  .mu-notif-pop__list,
  .mu-songs--scroll {
    --mu-edge-dir: to bottom;
    animation: mu-edge linear both;
    animation-timeline: scroll(self block);
  }

  .mu-scroll-fade--x,
  .mu-carousel__track,
  .mu-tabs,
  .mu-filter--bar .mu-chips,
  .mu-epa-track {
    --mu-edge-dir: to right;
    animation: mu-edge linear both;
    animation-timeline: scroll(self inline);
  }

  /* Linie unter dem Kopf bleibt stehen, die Kante beginnt darunter */
  .mu-accordion__body { --scroll-fade-inset: var(--bw); }
  /* Karussells behalten Breite und Deckkraft ihrer bisherigen Kante (can-next), jetzt an beiden Seiten */
  .mu-carousel__track { --scroll-fade: var(--fade); --scroll-fade-min: 0.3; }
}

/* Am Anfang nur die hintere Kante, dazwischen beide, am Ende nur die vordere. Masken wechseln ohne Übergang,
   die Schritte liegen deshalb bei 0,1 % und 99,9 % des Scrollwegs */
@keyframes mu-edge {
  0% {
    -webkit-mask-image: linear-gradient(var(--mu-edge-dir), rgb(var(--c-black-rgb)) calc(100% - var(--scroll-fade)), rgb(var(--c-black-rgb) / var(--scroll-fade-min)) 100%);
    mask-image: linear-gradient(var(--mu-edge-dir), rgb(var(--c-black-rgb)) calc(100% - var(--scroll-fade)), rgb(var(--c-black-rgb) / var(--scroll-fade-min)) 100%);
  }
  0.1%, 99.9% {
    -webkit-mask-image: linear-gradient(var(--mu-edge-dir), rgb(var(--c-black-rgb)) 0 var(--scroll-fade-inset), rgb(var(--c-black-rgb) / var(--scroll-fade-min)) var(--scroll-fade-inset), rgb(var(--c-black-rgb)) calc(var(--scroll-fade-inset) + var(--scroll-fade)), rgb(var(--c-black-rgb)) calc(100% - var(--scroll-fade)), rgb(var(--c-black-rgb) / var(--scroll-fade-min)) 100%);
    mask-image: linear-gradient(var(--mu-edge-dir), rgb(var(--c-black-rgb)) 0 var(--scroll-fade-inset), rgb(var(--c-black-rgb) / var(--scroll-fade-min)) var(--scroll-fade-inset), rgb(var(--c-black-rgb)) calc(var(--scroll-fade-inset) + var(--scroll-fade)), rgb(var(--c-black-rgb)) calc(100% - var(--scroll-fade)), rgb(var(--c-black-rgb) / var(--scroll-fade-min)) 100%);
  }
  100% {
    -webkit-mask-image: linear-gradient(var(--mu-edge-dir), rgb(var(--c-black-rgb)) 0 var(--scroll-fade-inset), rgb(var(--c-black-rgb) / var(--scroll-fade-min)) var(--scroll-fade-inset), rgb(var(--c-black-rgb)) calc(var(--scroll-fade-inset) + var(--scroll-fade)));
    mask-image: linear-gradient(var(--mu-edge-dir), rgb(var(--c-black-rgb)) 0 var(--scroll-fade-inset), rgb(var(--c-black-rgb) / var(--scroll-fade-min)) var(--scroll-fade-inset), rgb(var(--c-black-rgb)) calc(var(--scroll-fade-inset) + var(--scroll-fade)));
  }
}

/* Skelett mit gemerkter Endgröße (js/ui/skeleton.js) */
[data-mu-skel-hold] {
  min-height: var(--skel-hold);
}

/* ================= Schwebender Knopf =================
   Bis 900 px, höchstens einer je Seite, nur für die wichtigste Aktion. Steht direkt im body hinter .mu-page.
   Nur mit Bottom-Nav (dort entfällt das Support-Widget), nie in Panels, Assistenten oder auf öffentlichen Seiten.
   Icon allein: .mu-fab--icon mit aria-label. data-mu-fab-for="Selektor" klickt den vorhandenen Knopf (js/ui/app-shell.js),
   der vorhandene Knopf entfällt mobil im Seiten-CSS. Bei offenem Panel, Sheet oder Dialog und bei offener Tastatur weg. */
.mu-fab {
  position: fixed;
  right: calc(var(--page-gutter-mobile) + var(--safe-right));
  bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + var(--sp-3));
  z-index: var(--z-fab);
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-width: max(var(--fab-h), var(--tap-min));
  height: var(--fab-h);
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--color-primary);
  color: var(--color-text-on-brand);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  box-shadow: var(--sh-3);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

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

.mu-fab svg {
  flex: none;
  width: 20px;
  height: 20px;
}

.mu-fab--icon {
  width: var(--fab-h);
  padding: 0;
}

@media (max-width: 900px) {
  body.has-mu-bottom-nav > .mu-fab {
    display: inline-flex;
  }

  body.has-mu-bottom-nav > .mu-fab[hidden] {
    display: none;
  }

  html.mu-scroll-locked body > .mu-fab,
  body:has(.mu-panel-layer.is-open, .mu-dialog-backdrop.is-open, .mu-dialog-host.active) > .mu-fab,
  body:has(input:focus, textarea:focus, select:focus) > .mu-fab {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.9);
  }
}

/* ================= Serienfarben: Zeile, Karte und Termin einer Terminserie =================
   Setzt --sc, der Index kommt aus MuveupSlotData.colorIndex. */
.mu-sc-0 { --sc: var(--c-purple); }
.mu-sc-1 { --sc: var(--c-orange); }
.mu-sc-2 { --sc: rgb(var(--c-genre-blues-rgb)); }
.mu-sc-3 { --sc: rgb(var(--c-genre-pop-rgb)); }
.mu-sc-4 { --sc: var(--c-blue); }
.mu-date-tile--series { background: var(--sc); color: var(--color-text-on-brand); }
.mu-date-tile--series svg { width: 20px; height: 20px; }

/* Bewerbungen mobil: Karten zuerst, Event-Daten darunter, Fuß bleibt stehen */
@media (max-width: 900px) {
  .mu-panel--applicants.is-applicants-list .mu-panel__body { display: block; overflow-y: auto; }
  .mu-panel--applicants.is-applicants-list .mu-panel__foot { display: block; }
  .mu-applicants { display: flex; flex-direction: column; }
  .mu-applicants__main { order: -1; overflow: visible; padding: var(--sp-6) 0 var(--sp-4) var(--page-gutter-mobile); border: 0; border-radius: 0; }
  .mu-applicants__event { overflow: visible; padding: var(--sp-5) var(--page-gutter-mobile); }
  .mu-applicants__title { font-size: var(--fs-h2); }
  .mu-applicants__carousel { --applicants-inset: 0px; margin-left: 0; }
  .mu-applicants__carousel .mu-carousel__track { padding-right: var(--page-gutter-mobile); }
  .mu-applicants__foot-side { display: none; }
  .mu-applicants__foot-main { padding: var(--sp-3) var(--page-gutter-mobile); border: 0; border-radius: 0; }
}

/* Klangkreis, während die Vorschläge der Direktanfrage entstehen */
.mu-finding {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  min-height: 100%;
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
}
.mu-finding__title { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-medium); line-height: 1.35; }
.mu-finding__text { margin: 0; max-width: 46ch; font-size: var(--fs-body); }
.mu-reco__skel { height: var(--artist-card-h); border-radius: var(--r-xl); }

/* Empfehlungen im Panel, zwei Reihen übereinander mit Punkten rechts (Figma Direktanfrage 12) */
.mu-panel--reco .mu-panel__head { flex: none; }
/* Bündig an der Seitenleiste, nichts von der Hauptkarte bleibt daneben stehen. Die Karten geben Höhe ab, die Knöpfe und ein Streifen der nächsten Reihe bleiben sichtbar */
@media (min-width: 901px) {
  .mu-app.has-mu-sidebar .mu-panel.mu-panel--reco { width: calc(100% - var(--panel-side, var(--sidebar-w)) - var(--panel-right, 0px)); }
  .mu-panel--reco .mu-panel__body { container-type: size; }
  /* Karten so hoch, dass unten Foto-Oberkante und Überschrift der zweiten Reihe sichtbar bleiben (F24t Punkt 96) */
  /* Hochformat wie überall (F24t Punkt 164): Breite folgt der Höhe, lieber kleiner als flach. Ohne Knopfzeile und ohne
     „Verfeinert nach …“ bekommen die Karten deren Höhe */
  .mu-panel--reco .mu-reco {
    --reco-peek: 152px;
    --artist-card-h: clamp(230px, calc(100cqh - var(--sp-4) - var(--reco-peek)), 366px);
    --artist-card-w: calc(var(--artist-card-h) * 0.727);
  }
}
/* Der lange Titel der zweiten Reihe bricht unterhalb dieser Breite um: Platz dafür halten, sonst springt die Reihe beim Scrollen */
@media (min-width: 901px) and (max-width: 1439px) {
  .mu-panel--reco .mu-panel__head { min-height: calc(var(--fs-h2) * 1.35 * 2 + var(--sp-5) + var(--sp-3)); }
}
/* Einrasten am Innenabstand: sonst rollt die fertige Reihe um diesen Abstand höher als das Skelett (F24t Punkt 95) */
.mu-panel--reco .mu-panel__body { position: relative; scroll-snap-type: y proximity; scroll-padding-top: var(--sp-2); scrollbar-width: none; }
.mu-reco { position: relative; min-height: 100%; }
.mu-reco__dots { position: sticky; top: calc(50% - var(--sp-4)); z-index: calc(var(--z-raised) + 1); display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); height: 0; }
.mu-reco__dot { flex: none; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--color-border-strong); cursor: pointer; }
.mu-reco__dot.is-on { background: var(--color-text); }
.mu-reco__row { padding-bottom: var(--sp-6); scroll-snap-align: start; transition: filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.mu-reco__title { display: none; margin: 0 0 var(--sp-5); font-size: var(--fs-h2); font-weight: var(--fw-medium); line-height: 1.35; }
.mu-reco__cards { display: flex; justify-content: space-evenly; gap: var(--sp-8); }
.mu-reco__cards.mu-carousel { display: block; }
.mu-reco__foot { margin: var(--sp-5) 0 0; font-size: var(--fs-body); text-align: center; }
.mu-reco .mu-artist-item__actions .mu-btn { text-decoration: none; }
@media (min-width: 901px) {
  .mu-reco__row { padding-bottom: var(--sp-4); }
  .mu-reco__row:not(.is-active) { filter: var(--blur-soft); opacity: 0.6; cursor: pointer; }
  .mu-reco__row + .mu-reco__row { margin-top: calc(-1 * var(--sp-2)); }
  /* Die Überschrift der zweiten Reihe lädt zum Weiterscrollen ein, aktiv steht sie im Kopf des Panels */
  .mu-reco__title { display: block; margin: 0 0 var(--sp-3); font-size: var(--fs-h3); }
  .mu-reco__row.is-active .mu-reco__title { visibility: hidden; }
}
@media (max-width: 900px) {
  .mu-reco__dots { display: none; }
  .mu-reco__title { display: block; }
  .mu-panel--reco .mu-panel__head { min-height: 0; }
  .mu-panel--reco .mu-panel__body { scroll-snap-type: none; }
}

.mu-occasions { margin-top: var(--sp-3); }


/* Wachsende Zusammenfassung neben einem schmalen Formular-Panel (F11b, js/ui/recap.js).
   Steht in der Hauptkarte links vom Panel der Größe aside, mobil über dem Sheet. */
.mu-recap {
  display: grid;
  align-content: start;
  gap: var(--sp-6);
  max-width: calc(100% - var(--aside-w) - var(--sp-6));
  padding-top: var(--sp-2);
}

.mu-recap__head { display: grid; gap: var(--sp-2); }
.mu-recap__head .mu-text-muted { max-width: 46ch; }

.mu-recap__groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--panel-sum-w), 1fr));
  gap: var(--sp-6) var(--sp-5);
}

.mu-recap__group { display: grid; align-content: start; gap: var(--sp-3); }

.mu-recap__title {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  color: var(--color-text-subtle);
}

.mu-recap__list {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mu-recap__row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: var(--sp-2);
}

.mu-recap__row svg { width: 14px; height: 14px; color: var(--color-text-strong); }
.mu-recap__row .mu-chip { max-width: 100%; white-space: normal; text-align: left; }

.mu-recap__empty {
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--color-text-placeholder);
}

@media (max-width: 900px) {
  .mu-recap { max-width: none; gap: var(--sp-4); }
  .mu-recap__groups { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ================= Zustände über alle Bausteine (F21b, design/MOTION.md M9) =================
   Hover steht bei jedem Baustein unter @media (hover: hover), damit er am Handy nicht kleben bleibt.
   Druck wirkt sofort und federt langsamer zurück. Fokus nutzt überall --focus-ring. */
:is(.mu-btn, .mu-icon-btn, .mu-close, .mu-chip, .mu-tile, .mu-option, .mu-answer, .mu-fab):active {
  transition-duration: var(--dur-press);
}

/* Deaktiviert: blass, kein Druck, Zeiger sagt es */
.mu-icon-btn:disabled,
.mu-close:disabled {
  cursor: not-allowed;
}

.mu-chip[aria-disabled="true"],
.mu-option:disabled,
.mu-option[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.mu-check:has(input:disabled),
.mu-switch:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

.mu-check input:disabled,
.mu-switch input:disabled {
  cursor: not-allowed;
}

/* Fehler am Feld: roter Rand auch im Fokus, Meldung blendet ruhig ein und bleibt, bis man das Feld ändert */
.mu-field.is-invalid :is(.mu-input, .mu-select, .mu-textarea):focus-visible,
:is(.mu-input, .mu-select, .mu-textarea)[aria-invalid="true"]:focus-visible {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--c-danger-20);
}

.mu-field.is-invalid .mu-field__error,
.mu-note--danger:not([hidden]) {
  animation: mu-fade-in var(--dur-base) var(--ease-out) both;
}

/* Bilder blenden nach dem Laden ein (js/ui/motion.js setzt html.mu-img-fade und img.is-loaded).
   Ohne Skript bleibt alles sichtbar, Bilder aus dem Cache stehen sofort. */
html.mu-img-fade :is(.mu-avatar, .mu-frame, .mu-artist-card__media) img {
  transition: opacity var(--dur-base) var(--ease-out);
}

html.mu-img-fade :is(.mu-avatar, .mu-frame, .mu-artist-card__media) img:not(.is-loaded) {
  opacity: 0;
}

/* ================= Ausklappen (js/ui/more.js) ================= */
.mu-more { max-height: var(--more-h); overflow: hidden; -webkit-mask-image: linear-gradient(var(--c-black) 72%, transparent); mask-image: linear-gradient(var(--c-black) 72%, transparent); }
.mu-more-toggle { padding: 0; border: 0; background: none; color: var(--color-text-subtle); font: inherit; font-size: var(--fs-micro); cursor: pointer; white-space: nowrap; }
@media (hover: hover) {
  .mu-more-toggle:hover { color: var(--color-primary); }
}