/* ============================================================
   muveup Facelift: Layout und App-Shell
   Topbar, Hauptkarte mit Sidebar, rechte Spalte, Footer, Bottom-Nav, Panel-Stapel und Bottom Sheet.
   Desktop ab 901 px nach Figma (1440 × 900), Mobile bis 900 px (GAPS.md Punkt 3).
   ============================================================ */

body.mu-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
}

.mu-skip {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: calc(var(--z-topbar) + 1);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: var(--fs-body);
}

.mu-skip:focus-visible {
  top: var(--sp-2);
}

/* Wartungshinweis über der Kopfzeile (js/platform-maintenance.js): kräftig, damit die weiße Uhr der iPhone-Statusleiste darauf lesbar bleibt */
.mu-maint-bar {
  padding: calc(var(--sp-2) + var(--safe-top)) var(--page-gutter-mobile) var(--sp-2);
  background: var(--color-accent-hover);
  color: var(--color-text-on-brand);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-base);
  text-align: center;
}

/* Team-Modus (G1, js/config.js): gleicher Streifen in Lila mit Knopf zum Entfernen */
.mu-maint-bar--team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding-block: calc(var(--sp-1) + var(--safe-top)) var(--sp-1);
  background: var(--color-primary-hover);
  color: var(--color-text-on-brand);
}

.mu-maint-bar--team .mu-maint-bar__label {
  font-weight: var(--fw-semibold);
}

.mu-maint-bar + .mu-skip + .mu-topbar,
.mu-maint-bar ~ .mu-topbar { padding-top: 0; height: var(--topbar-h); }

/* ================= Topbar ================= */
/* Benachrichtigungen und Kontomenü hängen in der Kopfzeile: Solange eines offen ist, liegt sie über Panels und ihren Labels, unter Dialogen und Toasts */
.mu-topbar:has([aria-expanded="true"]) { z-index: var(--z-topbar-open); }

.mu-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: calc(var(--topbar-h) + var(--safe-top));
  padding: var(--safe-top) calc(var(--sp-6) + var(--safe-right)) 0 calc(var(--sp-6) + var(--safe-left));
  background: var(--color-primary);
  color: var(--color-text-on-brand);
  box-shadow: var(--sh-bar);
}

.mu-topbar__logo {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-on-brand);
  font-size: 28px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.mu-topbar__logo img {
  display: block;
  height: 26px;
  width: auto;
}

.mu-topbar__logo:focus-visible {
  box-shadow: 0 0 0 2px var(--color-text-on-brand);
}

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

.mu-topbar__link {
  color: var(--color-text-on-brand);
  font-size: var(--fs-body-lg);
  text-decoration: none;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-pill);
}

.mu-topbar__icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-round);
  color: var(--color-text-on-brand);
}

/* Eine Unterstreichung für alles in der Kopfzeile, für jede Rolle und abgemeldet:
   zeichnet sich von links nach rechts und zieht sich wieder zurück, nichts verschiebt sich */
:is(.mu-topbar__logo, .mu-topbar__link, .mu-topbar__icon-btn, .mu-topbar__lang) { position: relative; }
:is(.mu-topbar__logo, .mu-topbar__link, .mu-topbar__icon-btn, .mu-topbar__lang)::after {
  content: '';
  position: absolute;
  left: var(--topbar-line-inset, var(--sp-2));
  right: var(--topbar-line-inset, var(--sp-2));
  bottom: 0;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--color-text-on-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms var(--ease-out);
  pointer-events: none;
}
.mu-topbar__logo { --topbar-line-inset: 0px; }
.mu-topbar__icon-btn:not(.mu-topbar__logout) { --topbar-line-inset: 7px; }
:is(.mu-topbar__logo, .mu-topbar__link, .mu-topbar__icon-btn, .mu-topbar__lang):focus-visible::after,
.mu-topbar__icon-btn[aria-expanded="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  :is(.mu-topbar__logo, .mu-topbar__link, .mu-topbar__icon-btn, .mu-topbar__lang):hover::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.mu-topbar__logo, .mu-topbar__link, .mu-topbar__icon-btn, .mu-topbar__lang)::after { transition: none; }
}

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

.mu-topbar__badge {
  position: absolute;
  top: 2px;
  right: 0;
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  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;
  box-shadow: 0 0 0 2px var(--color-primary);
}

.mu-topbar__offline {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 2px var(--sp-4);
  background: var(--color-text);
  color: var(--color-text-on-brand);
  font-size: var(--fs-micro);
  text-align: center;
  animation: mu-fade-in var(--dur-fast) var(--ease-out) both;
}

/* Mausklick in der Kopfzeile: kein Rahmen. Der Ring kommt nur bei Tastaturbedienung (:focus-visible) */
.mu-topbar :focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.mu-topbar__icon-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--color-text-on-brand);
  border-radius: var(--r-round);
}

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

/* logout: das Wort ganz rechts wie im Figma, die Fläche ragt in den Rand, das Wort steht bündig. Mobil im Hamburger */
.mu-topbar__logout {
  width: auto;
  margin-right: calc(-1 * var(--sp-2));
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-body-lg);
  white-space: nowrap;
}

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

/* ================= Seite und Raster ================= */
.mu-page {
  flex: 1 0 auto;
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: 59px var(--page-gutter) var(--sp-8);
}

.mu-page--narrow {
  max-width: calc(520px + 2 * var(--page-gutter));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mu-page--reading {
  max-width: calc(720px + 2 * var(--page-gutter));
}

.mu-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aside-w);
  gap: var(--sp-5);
  align-items: start;
}

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

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

/* Hauptkarte: Reiter oben links, Sidebar darunter, Inhalt rechts */
.mu-main-card {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: 63px minmax(0, 1fr);
  grid-template-areas:
    "tab body"
    "side body";
  min-height: 681px;
  border-radius: var(--r-lg);
  background: var(--color-surface);
  overflow: hidden;
}

.mu-main-card--plain {
  display: block;
  min-height: 0;
  padding: var(--sp-6);
}

.mu-main-card__tab {
  grid-area: tab;
  display: flex;
  align-items: center;
  padding: 0 var(--sp-3) 0 var(--sp-5);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mu-main-card__body {
  grid-area: body;
  min-width: 0;
  padding: var(--sp-6) var(--sp-10) var(--sp-6) 53px;
}

/* ================= Sidebar ================= */
.mu-sidebar {
  grid-area: side;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--sp-4) 0 var(--sp-3);
  background: var(--color-accent);
  color: var(--color-text-on-brand);
}

.mu-app--master .mu-sidebar {
  background: var(--color-primary);
}

.mu-app--master .mu-sidebar__nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

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

/* Team mit offener Werkstatt: alle Einträge passen ohne Abschneiden, auch bei 1366 × 768 */
.mu-app--master .mu-sidebar__nav:has(.mu-sidebar__group-toggle[aria-expanded="true"]) {
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
}

.mu-sidebar__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: var(--sp-2) var(--sp-3);
  color: var(--color-text-on-brand);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

button.mu-sidebar__link {
  width: 100%;
}

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

.mu-sidebar__link:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-text-on-brand);
  border-radius: 0;
}

/* Aktiver Eintrag: weiße Lasche, die in die Inhaltsfläche übergeht */
.mu-sidebar__link.is-active,
.mu-sidebar__link[aria-current="page"] {
  margin-left: var(--sp-2);
  border-radius: var(--r-md) 0 0 var(--r-md);
  background: var(--color-surface);
  color: var(--color-text);
}

/* Nach innen gerundete Ecken über und unter der Lasche, damit sie in die Fläche übergeht (Danie 2026-11-07) */
.mu-sidebar__link.is-active::before,
.mu-sidebar__link.is-active::after,
.mu-sidebar__link[aria-current="page"]::before,
.mu-sidebar__link[aria-current="page"]::after {
  content: '';
  position: absolute;
  right: 0;
  width: var(--r-md);
  height: var(--r-md);
  pointer-events: none;
}

.mu-sidebar__link.is-active::before,
.mu-sidebar__link[aria-current="page"]::before {
  bottom: 100%;
  background: radial-gradient(circle at 0 0, transparent calc(var(--r-md) - 0.5px), var(--color-surface) var(--r-md));
}

.mu-sidebar__link.is-active::after,
.mu-sidebar__link[aria-current="page"]::after {
  top: 100%;
  background: radial-gradient(circle at 0 100%, transparent calc(var(--r-md) - 0.5px), var(--color-surface) var(--r-md));
}

.mu-sidebar__badge {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-3);
}

/* Aufklappbare Gruppe (Werkstatt beim Master) */
.mu-sidebar__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.mu-sidebar__group-toggle {
  gap: var(--sp-2);
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.mu-sidebar__group.is-current > .mu-sidebar__group-toggle {
  background: rgb(var(--c-white-rgb) / 0.14);
}

.mu-sidebar__chevron {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}

.mu-sidebar__group-toggle[aria-expanded="true"] .mu-sidebar__chevron {
  transform: translateY(2px) rotate(-135deg);
}

.mu-sidebar__sub-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.mu-sidebar__sublink {
  min-height: 44px;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.mu-app--master .mu-sidebar__nav:has(.mu-sidebar__group-toggle[aria-expanded="true"]) .mu-sidebar__link {
  min-height: 44px;
}

.mu-app--master .mu-sidebar__nav:has(.mu-sidebar__group-toggle[aria-expanded="true"]) .mu-sidebar__sublink {
  min-height: 36px;
}

.mu-sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: auto var(--sp-1) 0;
  padding: var(--sp-2) var(--sp-1);
  min-width: 0;
  border-radius: var(--r-sm-lg);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.mu-sidebar__user[aria-current="page"] {
  background: rgb(var(--c-white-rgb) / 0.16);
}

.mu-sidebar__user:focus-visible {
  box-shadow: 0 0 0 2px var(--color-text-on-brand);
}

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

.mu-sidebar__user .mu-avatar {
  --avatar-size: 40px;
}

.mu-app--master .mu-sidebar__user .mu-avatar {
  background: var(--color-surface);
  color: var(--color-primary);
}

.mu-sidebar__user-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: var(--fs-micro);
  line-height: 1.35;
  color: var(--color-text);
}

.mu-app--master .mu-sidebar__user-text {
  color: var(--color-text-on-brand);
}

.mu-sidebar__user-name {
  font-weight: var(--fw-bold);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mu-sidebar__user-mail {
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ================= Footer ================= */
.mu-footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--footer-h);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-footer);
  color: var(--color-text-on-brand);
  font-size: var(--fs-body);
  text-align: center;
}

.mu-footer a {
  color: var(--color-text-on-brand);
}

@media (hover: hover) {
  .mu-footer a:hover {
    color: var(--c-orange-300);
  }
}

/* ================= Bottom-Nav (nur Mobile) ================= */
.mu-bottom-nav {
  display: none;
}

/* ================= Panel-Stapel (Desktop) und Bottom Sheet (Mobile) ================= */
/* Oberkante der Ebene = Unterkante der Kopfzeile, gemessen in js/ui/panel-stack.js (F24t Punkt 141): so zählen die Leiste
   „Team-Modus“ und der Wartungsstreifen mit, ohne ihre Höhe hier zu kennen */
.mu-panel-layer {
  position: fixed;
  inset: var(--panel-layer-top, calc(var(--topbar-h) + var(--safe-top))) 0 0 0;
  z-index: var(--z-panel);
  pointer-events: none;
}

.mu-panel-layer__backdrop {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}

/* Unschärfe nur auf dem Seitengerüst, Footer und Seitenrand bleiben scharf. Werte aus syncBounds in js/ui/panel-stack.js */
.mu-panel-layer__backdrop::before {
  content: '';
  position: absolute;
  top: var(--panel-top, 0px);
  right: var(--panel-right, 0px);
  bottom: var(--panel-bottom, 0px);
  left: 0;
  background: var(--color-backdrop-tint);
  -webkit-backdrop-filter: var(--blur-backdrop);
  backdrop-filter: var(--blur-backdrop);
}

.mu-panel-layer.is-open .mu-panel-layer__backdrop {
  opacity: 1;
  pointer-events: auto;
}

.mu-panel__peek { display: none; }

.mu-panel {
  --panel-w: var(--panel-w-md);
  --panel-peek-h: var(--bottom-nav-h);
  position: absolute;
  top: var(--panel-top, 59px);
  right: var(--panel-right, max(var(--page-gutter), calc((100vw - var(--content-max)) / 2)));
  bottom: var(--panel-bottom, var(--sp-8));
  width: min(var(--panel-w), calc(100vw - 2 * var(--page-gutter)));
  display: flex;
  flex-direction: column;
  border: var(--bw) solid var(--color-accent);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  box-shadow: var(--sh-panel);
  pointer-events: auto;
  transform: translateX(calc(100% + var(--page-gutter) + 40px));
  opacity: 0;
  transition:
    transform var(--dur-slow) var(--ease-spring),
    width var(--dur-slow) var(--ease-spring),
    opacity var(--dur-base) var(--ease-out);
  will-change: transform;
  outline: none;
}

.mu-panel.is-open {
  transform: translateX(0);
  opacity: 1;
}

/* Eingang federt, Ausgang kurz und ohne Überschwingen (MOTION M3) */
.mu-panel:not(.is-open) {
  transition-duration: var(--dur-base), var(--dur-base), var(--dur-fast);
  transition-timing-function: var(--ease-out);
}

/* Liegt schon an seinem Platz (Assistent aus der Wegauswahl): nur Deckkraft. Kein Größerwerden, sonst sitzen Ober- und
   Unterkante beim Einblenden einige Pixel innerhalb der Hauptkarte (F24t Punkt 108) */
.mu-panel--in-place,
.mu-panel--in-place.is-open { transform: none; }

.mu-panel.is-behind {
  transform: translateX(calc(-1 * var(--sp-6) * var(--panel-depth, 1)));
  pointer-events: none;
}

/* Hinteres Panel abtönen statt filter: nur opacity animieren */
.mu-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-backdrop-tint);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

.mu-panel.is-behind::after {
  opacity: 1;
}

.mu-panel--sm { --panel-w: var(--panel-w-sm); }
.mu-panel--md { --panel-w: var(--panel-w-md); }
.mu-panel--lg { --panel-w: var(--panel-w-lg); }
.mu-panel--xl { --panel-w: var(--panel-w-xl); }
/* Breite der rechten Spalte, je Zusammenfassungsspalte breiter (Figma Buchungsassistenz) */
.mu-panel--aside { --panel-w: calc(var(--aside-w) + var(--panel-sum-cols, 0) * var(--panel-sum-w)); }
/* Ganzes Seitengerüst, Sidebar eingeschlossen (Bewerbungen, Figma buchungsassistent 12), Maß aus js/ui/panel-stack.js */
.mu-panel--shell { --panel-w: var(--panel-shell-w, var(--panel-w-xl)); }
/* Scrollbar in der Farbe des Rahmens: Orange wie die Direktanfrage, Lila wie die Buchungsassistenz */
.mu-panel:not(.mu-panel--plain) { --scrollbar-rgb: var(--c-orange-rgb); }
.mu-panel--primary:not(.mu-panel--plain) { --scrollbar-rgb: var(--c-purple-rgb); }
.mu-panel--primary { border-color: var(--color-primary); }
.mu-panel--primary .mu-panel__label { color: var(--color-primary); }
.mu-panel-layer:has(> .mu-panel--sharp.is-open:not(.is-behind)) .mu-panel-layer__backdrop { opacity: 0; pointer-events: none; }

.mu-panel.has-summary > .mu-panel__head,
.mu-panel.has-summary > .mu-panel__body,
.mu-panel.has-summary > .mu-panel__foot { margin-left: calc(var(--panel-sum-cols) * var(--panel-sum-w)); }

/* Linke Spalte mit eigenem Inhalt (handle.setSide, Figma Direktanfrage Nachricht): warm, Trennlinie in Akzentfarbe.
   „zurück“ steht unten links in ihr, Hinweis und Knöpfe in der rechten Spalte */
.mu-panel { --panel-side-w: var(--aside-w); }
.mu-panel.has-side > .mu-panel__head,
.mu-panel.has-side > .mu-panel__body { margin-left: var(--panel-side-w); }
.mu-panel.has-side > .mu-panel__foot { position: relative; z-index: 1; }
.mu-panel.has-side > .mu-panel__foot > :last-child { flex: 0 0 calc(100% + var(--sp-5) - var(--panel-side-w) - var(--sp-6)); justify-content: space-between; }
.mu-panel__side {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  width: var(--panel-side-w);
  padding: var(--sp-5) var(--sp-6) var(--sp-10);
  overflow: auto;
  border-right: var(--bw) solid var(--color-accent);
  border-radius: calc(var(--r-lg) - var(--bw)) 0 0 calc(var(--r-lg) - var(--bw));
  background: var(--color-surface-warm);
}
.mu-panel__side-title { align-self: stretch; margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-medium); line-height: 1.35; }
.mu-panel__side-card { width: 266px; max-width: 100%; margin-top: auto; }
.mu-panel__side-link { width: 266px; max-width: 100%; }
.mu-panel__side-note { margin: 0 0 auto; color: var(--color-text-muted); font-size: var(--fs-micro); text-align: center; }
.mu-panel__foot-note { flex: 1; min-width: 0; margin: 0; color: var(--color-danger); font-size: var(--fs-body); }

.mu-panel__summary {
  position: absolute;
  top: var(--sp-5);
  bottom: var(--sp-5);
  left: 0;
  display: grid;
  grid-template-columns: repeat(var(--panel-sum-cols, 1), var(--panel-sum-w));
}

.mu-panel__sum-col { min-width: 0; padding: var(--sp-6) var(--sp-4) 0; border-right: var(--bw) solid var(--color-surface-muted); overflow: hidden; }
.mu-panel__sum-title { margin: 0 0 var(--sp-5); font-size: var(--fs-body-lg); font-weight: var(--fw-regular); color: var(--color-text-subtle); text-align: center; }
.mu-panel__sum-list { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.mu-panel__sum-row { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: var(--sp-3); }
.mu-panel__sum-icon { display: grid; place-items: center; width: 18px; height: 18px; color: var(--color-text); }
.mu-panel__sum-icon svg { width: 16px; height: 16px; }
.mu-panel__sum-pill { overflow: hidden; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill); background: var(--color-surface-muted); color: var(--color-text-subtle); font-size: var(--fs-body); text-align: center; text-overflow: ellipsis; white-space: nowrap; }

.mu-panel--warm { background: var(--color-surface-warm); }
.mu-panel--plain { border-color: var(--color-surface); }
.mu-panel--accent:not(.mu-panel--plain) {
  --scrollbar-rgb: var(--c-white-rgb);
  --scrollbar-alpha: 0.4;
  --scrollbar-alpha-hover: 0.7;
}
.mu-panel--accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-brand);
}
.mu-panel--accent .mu-panel__title,
.mu-panel--accent .mu-panel__back,
.mu-panel--accent .mu-panel__label {
  color: var(--color-text-on-brand);
}
.mu-panel--accent .mu-close {
  background: var(--color-primary);
  color: var(--color-text-on-brand);
}

/* Label über dem Panel, mittig zwischen Kopfzeile und Oberkante des Panels (F24t Punkt 122). Ohne eigene Fläche
   (F24t Punkt 141, Danie): Platz dafür hält die Seite immer frei (--page-pad-top), es überlappt nichts */
.mu-panel__label {
  position: absolute;
  top: calc(0px - var(--panel-top, 0px));
  right: 0;
  bottom: calc(100% + var(--bw));
  left: 0;
  display: flex;
  align-items: center;
  /* Etwas mehr Luft zur kräftigen Kopfzeile als zum Panel: der Text steht 2 px unter der Mitte */
  padding: var(--sp-1) var(--sp-5) 0;
  line-height: 1;
  color: var(--color-accent-text);
  /* Schrift wächst mit dem Abstand zur Kopfzeile: 12 px im engen Fenster, 15 px ab gut 40 px Platz (F24t Punkt 122) */
  font-size: clamp(var(--fs-small), calc(var(--panel-top, 64px) * 0.37), var(--fs-body-lg));
  font-weight: var(--fw-medium);
}

/* Wenig Platz über der Hauptkarte (niedrige Fenster): Label kleiner statt das Panel nach unten zu schieben (F24t Punkt 108) */
.mu-panel-layer.is-label-tight .mu-panel__label { padding-top: 0; font-size: var(--fs-small); }

.mu-panel__grip {
  display: none;
}

.mu-panel__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6) var(--sp-3);
}

.mu-panel__title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: 1.35;
}

/* Kleine Zeile über dem Titel: Art des Vorgangs (Zusammenfassung der Buchungsassistenz) */
.mu-panel__eyebrow {
  display: block;
  color: var(--color-text-subtle);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
}

.mu-panel__step {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: var(--color-border-strong);
  white-space: nowrap;
}

.mu-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--sp-2) var(--sp-6) var(--sp-5);
}

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

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

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

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

/* Mehrspaltige Panels (Zusammenfassung | Schritt) */
.mu-panel-cols {
  display: flex;
  min-height: 100%;
}

.mu-panel-cols > * {
  padding: 0 var(--sp-5);
  border-left: var(--bw) solid var(--color-border);
}

.mu-panel-cols > *:first-child {
  border-left: 0;
  padding-left: 0;
}

.mu-panel-cols--accent > * {
  border-left-color: var(--color-accent);
}

/* Zusammenfassung behält ihre Breite, das Panel wächst mit jedem Schritt nach links (Figma) */
.mu-panel-cols__summary {
  flex: none;
  box-sizing: content-box;
  width: var(--panel-sum-w);
}

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

/* ================= Mobile (bis 900 px) ================= */
@media (max-width: 900px) {
  .mu-topbar {
    height: calc(var(--topbar-h-mobile) + var(--safe-top));
    padding-left: calc(var(--sp-4) + var(--safe-left));
    padding-right: calc(var(--sp-3) + var(--safe-right));
  }

  /* Mit Wartungs- oder Team-Leiste trägt die Leiste den Abstand zur Statusleiste, die Kopfzeile hat die Mobilhöhe (F24t Punkt 184) */
  .mu-maint-bar ~ .mu-topbar { height: var(--topbar-h-mobile); }

  .mu-topbar__logo {
    font-size: 22px;
  }

  .mu-topbar__actions {
    gap: var(--sp-1);
  }

  /* Angemeldet rechts nur Glocke und Hamburger: logout steht im Hamburger, Sprache ebenso (css/overlays.css) */
  .mu-topbar--account .mu-topbar__logout {
    display: none;
  }

  .mu-topbar__burger {
    width: 44px;
    height: 44px;
  }

  .mu-topbar .mu-topbar__icon-btn {
    width: 44px;
    height: 44px;
  }

  .mu-page {
    padding: var(--sp-4) var(--page-gutter-mobile) var(--sp-6);
  }

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

  /* Schwebender Knopf: die Seite reserviert unten seinen Platz, nichts bleibt verdeckt */
  body.mu-app.has-mu-bottom-nav:has(> .mu-fab) .mu-page {
    padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + var(--fab-h) + var(--sp-3) + var(--sp-6));
  }

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

  .mu-main-card {
    display: block;
    min-height: 0;
    overflow: visible;
    /* Breite Inhalte schneiden wie am Desktop statt die Seite zu verbreitern, Schatten und Fokusringe reichen in den Seitenrand */
    overflow-x: clip;
    overflow-clip-margin: var(--page-gutter-mobile);
  }

  .mu-main-card__tab {
    padding: 0;
    font-size: var(--fs-h3);
  }

  .mu-main-card__body {
    padding: var(--sp-4) 0 0;
  }

  .mu-sidebar {
    display: none;
  }

  .mu-card {
    padding: var(--sp-5);
  }

  /* Mobil weiß und in voller Breite (FLOWS Entscheidung 25): Die Seite ist die Fläche.
     Flach wird nur, was die Seite gliedert: Hauptkarte und Karten direkt unter .mu-page, .mu-shell oder .mu-aside.
     Alles Tiefere bleibt Karte (To-do-Kachel, Musikerkarte, Hinweis, Eintrag), auf Seitenebene hält .mu-card--keep eine Karte. */
  body.mu-app {
    background: var(--color-surface);
  }

  .mu-main-card,
  .mu-main-card--plain,
  .mu-page > .mu-card:not(.mu-card--keep, .mu-card--warm),
  .mu-shell > .mu-card:not(.mu-card--keep, .mu-card--warm),
  .mu-aside > .mu-card:not(.mu-card--keep, .mu-card--warm) {
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .mu-card--keep {
    background: var(--color-surface-soft);
  }

  /* Abschnitte trennt eine dünne Linie. Die rechte Spalte folgt mobil auf die Hauptkarte, darum auch ihr erster Abschnitt. */
  .mu-shell {
    gap: var(--sp-5);
  }

  .mu-aside {
    gap: var(--sp-5);
  }

  .mu-page > .mu-card:not(.mu-card--keep, .mu-card--warm) ~ .mu-card:not(.mu-card--keep, .mu-card--warm),
  .mu-shell > .mu-card:not(.mu-card--keep, .mu-card--warm) ~ .mu-card:not(.mu-card--keep, .mu-card--warm),
  .mu-aside > .mu-card:not(.mu-card--keep, .mu-card--warm) {
    padding-top: var(--sp-5);
    border-top: var(--bw) solid var(--color-border);
  }

  .mu-aside:first-child > .mu-card:first-child {
    padding-top: 0;
    border-top: 0;
  }

  /* Footer in der App nur auf öffentlichen Seiten (GAPS.md Punkt 10) */
  body.mu-app:not(.mu-app--public) .mu-footer {
    display: none;
  }

  .mu-footer {
    font-size: var(--fs-small);
    padding-bottom: calc(var(--sp-3) + var(--safe-bottom));
  }

  .mu-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-bottom-nav);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    height: calc(var(--bottom-nav-h) + var(--safe-bottom));
    padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
    background: var(--color-surface);
    box-shadow: 0 -1px 0 var(--color-border), 0 -4px 16px rgb(var(--c-black-rgb) / 0.06);
  }

  .mu-bottom-nav:empty {
    display: none;
  }

  /* F21c: Bei offener Tastatur (js/ui/panel-stack.js setzt die Klasse) springen feste Leisten sonst über die Tastatur */
  html.mu-keyboard-open .mu-bottom-nav,
  html.mu-keyboard-open .mu-fab {
    visibility: hidden;
  }

  .mu-bottom-nav__item {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    color: var(--color-text-subtle);
    font-size: var(--fs-micro);
    font-weight: var(--fw-medium);
    text-decoration: none;
    -webkit-user-select: none;
    user-select: none;
    transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }

  .mu-bottom-nav__item:active {
    transform: scale(var(--press-scale-sm));
  }

  .mu-bottom-nav__item:focus-visible {
    box-shadow: inset 0 0 0 2px var(--color-focus);
    border-radius: var(--r-md);
  }

  .mu-bottom-nav__icon svg {
    width: 24px;
    height: 24px;
  }

  .mu-bottom-nav__slot {
    position: relative;
    flex: 1 1 0;
    display: flex;
    min-width: 0;
  }

  .mu-bottom-nav__slot .mu-bottom-nav__item {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--fs-micro);
    font-weight: var(--fw-medium);
  }

  .mu-bottom-nav__item.is-active,
  .mu-bottom-nav__item[aria-current="page"],
  .mu-bottom-nav__item.is-navigating {
    color: var(--color-accent);
  }

  .mu-app--master .mu-bottom-nav__item.is-active,
  .mu-app--master .mu-bottom-nav__item[aria-current="page"] {
    color: var(--color-primary);
  }

  .mu-bottom-nav__item.is-active::before,
  .mu-bottom-nav__item[aria-current="page"]::before {
    content: '';
    position: absolute;
    top: 0;
    width: 28px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: currentColor;
  }

  .mu-bottom-nav__badge {
    position: absolute;
    top: 8px;
    left: calc(50% + 6px);
  }

  /* Bottom Sheet */
  .mu-panel-layer {
    inset: 0;
  }

  .mu-panel-layer__backdrop {
    background: var(--color-overlay);
  }

  .mu-panel-layer__backdrop::before {
    display: none;
  }

  .mu-panel__summary { display: none; }
  /* Linke Spalte wird zur Zeile unter dem Kopf: nur der Hinweis, Karte und Titel entfallen */
  .mu-panel.has-side > .mu-panel__head,
  .mu-panel.has-side > .mu-panel__body { margin-left: 0; }
  .mu-panel.has-side > .mu-panel__foot > :last-child { flex: 1 1 auto; }
  .mu-panel__side {
    position: static;
    flex: none;
    width: auto;
    padding: 0 var(--sp-5) var(--sp-2);
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .mu-panel__side-title,
  .mu-panel__side-card { display: none; }
  .mu-panel__side-note { margin: 0; text-align: left; }
  .mu-panel.has-summary > .mu-panel__head,
  .mu-panel.has-summary > .mu-panel__body,
  .mu-panel.has-summary > .mu-panel__foot { margin-left: 0; }

  .mu-panel,
  .mu-panel--sm,
  .mu-panel--md,
  .mu-panel--lg,
  .mu-panel--xl,
  .mu-panel--aside,
  .mu-panel--shell {
    top: auto;
    right: 0;
    left: 0;
    bottom: var(--keyboard-inset, 0px);
    width: 100%;
    max-height: calc(100dvh - var(--safe-top) - var(--sp-6) - var(--keyboard-inset, 0px));
    min-height: min(40dvh, calc(100dvh - var(--safe-top) - var(--sp-6) - var(--keyboard-inset, 0px)));
    border: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: var(--sh-sheet);
    padding-bottom: var(--safe-bottom);
    transform: translateY(100%);
    opacity: 1;
  }

  .mu-panel.is-open {
    transform: translateY(var(--sheet-drag, 0px));
  }

  .mu-panel.is-dragging {
    transition: none;
  }

  /* Sheet als Leiste (handle.setPeek): Inhalt bleibt erhalten, die Seite dahinter ist bedienbar.
     Schon während der Fahrt nach unten gehen Tipps durch das Sheet, nur die Leiste nimmt sie an. */
  .mu-panel.is-peek { pointer-events: none; }

  .mu-panel.is-peek .mu-panel__peek { pointer-events: auto; }

  .mu-panel.is-peek.is-open {
    transform: translateY(calc(100% - var(--panel-peek-h) - var(--safe-bottom)));
    transition-duration: var(--dur-base), var(--dur-base), var(--dur-fast);
    transition-timing-function: var(--ease-out);
  }

  .mu-panel.is-peek .mu-panel__peek {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    height: var(--panel-peek-h);
    padding-inline: var(--sp-4);
    border-radius: inherit;
    background: var(--color-surface);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--color-text);
  }

  .mu-panel-layer:has(> .mu-panel.is-peek) .mu-panel-layer__backdrop {
    opacity: 0;
    pointer-events: none;
  }

  .mu-panel.is-behind {
    transform: translateY(calc(-1 * var(--sp-3))) scale(0.96);
  }

  /* Mehrstufige Panels (setStep) springen nicht: feste Höhe über alle Schritte, nur der Inhalt scrollt */
  .mu-panel--full,
  .mu-panel--steps {
    height: calc(100dvh - var(--safe-top) - var(--sp-6) - var(--keyboard-inset, 0px));
  }

  .mu-panel__grip {
    display: block;
    flex: none;
    width: 100%;
    padding: var(--sp-2) 0 var(--sp-1);
    cursor: grab;
    touch-action: none;
  }

  .mu-panel__grip::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto;
    border-radius: var(--r-pill);
    background: var(--color-border);
  }

  .mu-panel__label {
    position: static;
    display: block;
    padding: 0 var(--sp-5);
    background: none;
    font-size: var(--fs-small);
    line-height: inherit;
  }

  /* Panel ohne Überschrift: X steht neben dem Label, keine leere Kopfzeile */
  .mu-panel__head:has(> .mu-panel__title:empty) {
    padding: 0;
  }

  .mu-panel__head:has(> .mu-panel__title:empty) .mu-panel__close {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-4);
    z-index: 1;
  }

  .mu-panel__head {
    padding: var(--sp-1) var(--sp-5) var(--sp-3);
    touch-action: none;
  }

  .mu-panel__title {
    font-size: var(--fs-h3);
  }

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

  .mu-panel__body {
    padding: var(--sp-1) var(--sp-5) var(--sp-4);
  }

  .mu-panel__foot {
    padding: var(--sp-3) var(--sp-5) var(--sp-4);
    border-top: var(--bw) solid var(--color-surface-muted);
  }

  /* Mehrspaltig wird einspaltig, Zusammenfassung als Chip-Leiste oben */
  .mu-panel-cols {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .mu-panel-cols > * {
    padding: 0;
    border-left: 0;
  }

  .mu-panel-cols__summary {
    display: flex;
    box-sizing: border-box;
    width: auto;
    gap: var(--sp-2);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: var(--sp-1);
  }

  .mu-panel-cols__summary .mu-summary__title {
    display: none;
  }

  .mu-panel-cols__summary .mu-summary__row {
    display: contents;
  }

  .mu-panel-cols__summary .mu-summary__row svg {
    display: none;
  }
}

@media (max-width: 480px) {
  .mu-topbar__logo {
    font-size: 20px;
  }

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

/* Doppelte Titel mobil (REVIEW Punkt 8): Bis 900 px steht der Seitentitel schon im Reiter .mu-main-card__tab.
   Überschrift im Inhalt mit gleichem Text bekommt .mu-page-title: mobil nur noch für Screenreader, Desktop unverändert.
   Ohne Reiter, etwa bei .mu-main-card--plain, bleibt sie sichtbar. */
@media (max-width: 900px) {
  .mu-main-card:has(> .mu-main-card__tab:not(:empty)) .mu-page-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Seitenkopf nur mit diesem Titel (z. B. Einstellungen): mobil ohne eigenen Abstand, sonst bliebe eine Lücke (F23) */
  .mu-main-card:has(> .mu-main-card__tab:not(:empty)) .mu-page-head:has(> .mu-page-head__text > .mu-page-title:only-child):not(:has(> :nth-child(2))) {
    margin-bottom: 0;
  }
}

/* Seite ist ein Sidebar-Ziel: der aktive Eintrag sitzt als Reiter an seiner Stelle in der Sidebar,
   der obere Reiter entfällt am Desktop und die Sidebar reicht bis oben. Mobil bleibt er als Seitentitel. */
@media (min-width: 901px) {
  .mu-main-card--tab-in-side .mu-main-card__tab {
    display: none;
  }

  .mu-main-card--tab-in-side .mu-sidebar {
    grid-row: 1 / -1;
  }
}

/* ================= Desktop: die Seite passt ins Fenster (F24c) =================
   Kein Scrollen der ganzen Seite: Kopfzeile und Fußzeile bleiben stehen, Hauptkarte und rechte Spalte scrollen innen.
   Gilt für alle Seiten mit Seitenleiste und die Anmeldeseiten. Ausnahmen mit Grund in design/FLOWS.md. Mobil unverändert. */
@media (min-width: 901px) {
  /* Das Dokument selbst kann nicht scrollen, auch nicht per scrollIntoView */
  html:has(> body.mu-app:is(.has-mu-sidebar, .mu-page-full)),
  html:has(> body.mu-app > .mu-page.mu-auth-page--card),
  html:has(> body.mu-app > .mu-page.mu-auth-page--wizard),
  html:has(> body.mu-app > .mu-page.mu-auth-page--roles) {
    overflow: hidden;
  }

  body.mu-app:is(.has-mu-sidebar, .mu-page-full),
  body.mu-app:has(> .mu-page.mu-auth-page--card, > .mu-page.mu-auth-page--wizard, > .mu-page.mu-auth-page--roles) {
    position: relative;
    height: 100dvh;
    min-height: 0;
    overflow: clip;
    --sticky-top: 0px;
    /* Mindestens 40 px über der Hauptkarte: dort steht beim offenen Panel sein Label, die Karte springt beim Öffnen nicht (F24t Punkt 141) */
    --page-pad-top: clamp(var(--sp-8), calc((100dvh - 720px) * 0.33), 59px);
    --page-pad-bottom: clamp(var(--sp-4), calc((100dvh - 720px) * 0.18), var(--sp-8));
  }

  body.mu-app:is(.has-mu-sidebar, .mu-page-full) > .mu-page {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-block: var(--page-pad-top) var(--page-pad-bottom);
  }

  /* Anmeldeseiten haben keine Hauptkarte: dort scrollt die Seitenfläche selbst, die Fußzeile bleibt stehen */
  body.mu-app:not(.has-mu-sidebar) > .mu-page.mu-auth-page--card,
  body.mu-app:not(.has-mu-sidebar) > .mu-page.mu-auth-page--wizard,
  body.mu-app:not(.has-mu-sidebar) > .mu-page.mu-auth-page--roles {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
  }

  body.mu-app:is(.has-mu-sidebar, .mu-page-full) .mu-shell {
    flex: 1 1 0;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }

  body.mu-app:is(.has-mu-sidebar, .mu-page-full) .mu-main-card {
    min-height: 0;
  }

  body.mu-app:is(.has-mu-sidebar, .mu-page-full) .mu-main-card__body {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding-right: calc(var(--sp-10) - var(--scrollbar-size));
  }

  body.mu-app.has-mu-sidebar .mu-aside {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Die Spalte selbst zeigt keine Leiste, sie läge außen neben den Karten. Gescrollt wird innen in der Karte (F24r) */
  body.mu-app.has-mu-sidebar .mu-aside {
    scrollbar-width: none;
    scrollbar-gutter: auto;
  }
  body.mu-app.has-mu-sidebar .mu-aside::-webkit-scrollbar { display: none; }
  body.mu-app.has-mu-sidebar .mu-aside--swap > .mu-way:not([hidden]),
  body.mu-app.has-mu-sidebar .mu-aside--swap > .mu-detail:not([hidden]) {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden auto;
  }

  /* Leisten bleiben innerhalb der runden Kartenecken */
  .mu-main-card__body::-webkit-scrollbar-track,
  .mu-aside > .mu-card::-webkit-scrollbar-track,
  .mu-panel__body::-webkit-scrollbar-track,
  .mu-onb__body::-webkit-scrollbar-track {
    margin-block: var(--r-lg);
  }

  body.mu-app.has-mu-sidebar .mu-sidebar {
    overflow-x: hidden;
    overflow-y: auto;
    --scrollbar-rgb: var(--c-white-rgb);
    --scrollbar-alpha: 0.4;
    --scrollbar-alpha-hover: 0.7;
  }
}

/* Seitenwechsel (js/ui/vt-nav.js): Sidebar, Reiter und Inhalt werden als eigene Bilder gezeichnet, ohne das
   Abschneiden durch .mu-main-card. Deshalb tragen sie die Kartenecken selbst, sonst ist die Ecke kurz eckig (F24a) */
@media (min-width: 901px) {
  .mu-main-card .mu-sidebar { border-bottom-left-radius: var(--r-lg); }
  .mu-main-card--tab-in-side .mu-sidebar { border-top-left-radius: var(--r-lg); }
  .mu-main-card .mu-main-card__tab { border-top-left-radius: var(--r-lg); }
  .mu-main-card .mu-main-card__body { border-top-right-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); }
}

/* Panels lassen die Sidebar scharf und frei, das Panel beginnt rechts davon (REVIEW O3, Figma Direktanfrage 13) */
@media (min-width: 901px) {
  .mu-app.has-mu-sidebar .mu-panel-layer__backdrop {
    left: var(--panel-side, calc(max(var(--page-gutter), (100vw - var(--content-max)) / 2) + var(--sidebar-w)));
  }
  .mu-panel-layer__backdrop {
    bottom: var(--panel-floor, 0px);
  }
  .mu-panel-layer__backdrop::before {
    bottom: calc(var(--panel-bottom, 0px) - var(--panel-floor, 0px));
  }
  .mu-app.has-mu-sidebar .mu-panel {
    width: min(var(--panel-w), calc(100vw - 2 * max(var(--page-gutter), (100vw - var(--content-max)) / 2) - var(--sidebar-w) - var(--sp-5)));
  }
  .mu-app.has-mu-sidebar .mu-panel--shell {
    width: var(--panel-w);
  }
}

/* Sehr schmale Handys: Sprache und Burger der Abgemeldeten passen nur mit kleinerer Wortmarke neben das Logo */
@media (max-width: 350px) {
  .mu-topbar {
    gap: var(--sp-2);
  }

  .mu-topbar__logo {
    font-size: 17px;
  }

  .mu-topbar__actions {
    gap: 0;
  }
}

/* Burger nur am Handy: am Desktop stehen die Ziele in Kopfzeile und Seitenleiste */
.mu-topbar__burger {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--r-round);
  background: transparent;
  color: var(--color-text-on-brand);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.mu-topbar__burger svg { width: 26px; height: 26px; }
.mu-topbar__burger[aria-expanded="true"] { background: rgb(var(--c-white-rgb) / 0.16); }
.mu-topbar__burger:focus-visible { box-shadow: 0 0 0 2px var(--color-text-on-brand); }

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

/* Abgemeldet wie die Startseite: am Desktop registrieren, Sprache, login, mobil das Menü, geöffnet wird der Burger zum X (F24r) */
.mu-topbar__burger svg + svg { display: none; }
.mu-topbar__burger[aria-expanded="true"] svg:has(+ svg) { display: none; }
.mu-topbar__burger[aria-expanded="true"] svg + svg { display: block; }
.mu-menu--guest { min-width: 224px; }
.mu-menu--guest .mu-menu__lang { margin-left: 0; }
.mu-topbar--guest .mu-topbar__burger[aria-expanded="true"] { background: transparent; }
.mu-menu--guest .mu-menu__item { text-transform: lowercase; }
.mu-menu--guest .mu-menu__item--keepcase { text-transform: none; }

@media (min-width: 901px) {
  .mu-topbar [data-mu-user-menu] { display: none; }
  .mu-menu__only-mobile { display: none; }
}

@media (max-width: 900px) {
  .mu-topbar--guest .mu-topbar__guest { display: none; }
  .mu-menu--guest.mu-menu:not(.mu-menu--inline):not(.mu-menu--up) { left: auto; width: 224px; }
}

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