/* ===================================================
   muveup.music – Gemeinsame Mobile-Styles
   Eingebunden in alle HTML-Seiten via <link>
   =================================================== */

/* Push-Einstellungen: nur in installierter PWA (body.is-app-mode) */
body:not(.is-app-mode) .pwa-only-push-ui {
  display: none !important;
}

/* PWA: Main-Inhalt erst nach Shell/Auth einblenden (Header + Bottom-Nav bleiben sichtbar) */
body.muveup-content-pending main,
body.muveup-content-pending [data-muveup-app-content],
body.muveup-content-pending #main-container,
body.muveup-content-pending .main-container,
body.muveup-content-pending .container,
body.muveup-content-pending #container {
  visibility: hidden;
}

body.map-access-pending [data-muveup-app-content],
body.map-access-pending #main-container {
  visibility: hidden;
}

/* Aktiver Reiter auch auf Desktop (Wizard-Seiten ohne eigene Header-CSS). */
header .top-nav > a.nav-link.active:not(.muveup-hamburger-logout),
header .top-nav a.nav-link.active:not(.muveup-hamburger-logout) {
  color: #E28600;
  font-weight: 600;
}

/* Kopfzeilen-Navigation: Seitentitel klein schreiben */
header .top-nav .nav-link,
header .top-nav .muveup-profile-nav-trigger--nav,
header .top-nav .muveup-master-werkstatt-nav .muveup-profile-nav-trigger--nav,
header .top-nav .muveup-profile-nav-trigger.nav-link,
header .top-nav .muveup-hamburger-logout,
header .top-nav .muveup-hamburger-push-settings,
header .top-nav .muveup-hamburger-guest-link,
header .top-nav .muveup-lang-toggle {
  text-transform: lowercase;
}

/* Desktop: kein leerer Pending-Screen (oranger Body ohne Inhalt) */
@media (min-width: 901px) {
  body.muveup-content-pending main,
  body.muveup-content-pending [data-muveup-app-content],
  body.muveup-content-pending #main-container,
  body.muveup-content-pending .main-container,
  body.muveup-content-pending .container,
  body.muveup-content-pending #container {
    visibility: visible;
  }

  header {
    flex-wrap: nowrap;
    justify-content: flex-start !important;
    gap: 20px;
  }

  header:has(> .muveup-header-actions) {
    justify-content: flex-start !important;
  }

  header > .muveup-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    flex-wrap: nowrap;
    min-width: 0;
    justify-content: flex-end;
  }

  header:has(> .muveup-header-actions) > .muveup-notif--wrap,
  header:has(> .muveup-header-actions) > .muveup-profile-nav-dropdown--header,
  header:has(> .muveup-header-actions) > .burger-menu,
  header:has(> .muveup-header-actions) > .header-icons {
    display: none !important;
  }

  header > .muveup-header-actions > .muveup-notif--wrap,
  header > .muveup-header-actions > .header-icons {
    display: inline-flex !important;
    align-items: center;
    margin-left: 0 !important;
  }

  header > .muveup-header-actions > .muveup-profile-nav-dropdown--header {
    display: none !important;
  }

  header .top-nav > .muveup-profile-nav-dropdown--header {
    display: inline-flex !important;
    flex-shrink: 0;
  }

  header > .muveup-header-actions > .burger-menu {
    display: contents;
  }

  header > .muveup-header-actions > .burger-menu > .top-nav {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    flex-shrink: 0;
    min-width: max-content;
    margin-left: 0 !important;
  }

  header .top-nav > a.nav-link,
  header .top-nav > .muveup-profile-nav-dropdown--header,
  header .top-nav > .muveup-master-werkstatt-nav {
    flex-shrink: 0;
  }

  header .top-nav > .muveup-profile-nav-dropdown--header {
    width: auto !important;
    max-width: min(220px, 28vw);
    flex-grow: 0;
  }

  header .top-nav .muveup-master-werkstatt-nav .muveup-profile-nav-trigger--nav {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
  }

  header .top-nav .muveup-master-werkstatt-nav.is-active .muveup-profile-nav-trigger--nav,
  header .top-nav .muveup-master-werkstatt-nav .muveup-profile-nav-trigger--nav.active {
    font-weight: 600;
  }

  .muveup-header-actions__slot--notif,
  header > .muveup-header-actions > .muveup-notif--wrap {
    flex-shrink: 0;
    width: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .muveup-header-actions__slot--profile {
    flex-shrink: 1;
    max-width: min(220px, 28vw);
    min-height: 1.35em;
  }

  .muveup-header-actions__cached-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    color: #88589F;
    text-transform: lowercase;
    max-width: min(220px, 28vw);
  }

  .muveup-header-actions__cached-label::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #88589F;
    flex-shrink: 0;
    opacity: 0.85;
  }

  .muveup-header-actions__cached-label-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .muveup-header-actions__slot[hidden] {
    display: none !important;
  }

  header .burger-menu {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    justify-content: flex-end;
  }

  header .muveup-notif--wrap,
  header .header-icons {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
  }

  header > .muveup-notif--wrap,
  header > .burger-menu,
  header > .header-icons {
    margin-left: auto;
  }

  header .logo {
    flex-shrink: 0;
  }

  header .muveup-notif {
    flex-shrink: 0;
  }

  header .muveup-profile-nav-dropdown--header {
    flex-shrink: 0;
  }

  header .top-nav > .dashboard-top-nav-calendar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0 !important;
  }

  header .top-nav > .close-icon {
    display: none !important;
    width: 0 !important;
    flex: 0 0 0 !important;
  }

  header .top-nav > .muveup-top-nav-chrome--desktop-hidden {
    display: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    flex: 0 0 0 !important;
  }

  header .top-nav > .muveup-profile-nav-dropdown--mobile-panel {
    display: none !important;
  }

  /* Header-Nav: Mobile-Slide-Panel und injizierte Links zurücksetzen */
  .top-nav {
    position: static !important;
    top: auto !important;
    right: auto !important;
    height: auto !important;
    width: auto !important;
    flex-shrink: 0;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 0 !important;
    transform: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    gap: 20px;
  }

  header .top-nav {
    display: inline-flex !important;
  }

  .top-nav.active {
    transform: none !important;
  }

  .burger-icon {
    display: none !important;
  }

  .close-icon {
    display: none !important;
  }

  .menu-overlay,
  .menu-overlay.active {
    display: none !important;
  }

  .muveup-mobile-browser-nav,
  .top-nav [data-muveup-mobile-nav] {
    display: none !important;
  }
}

/* === TABLET / MOBILE BREAKPOINT: 900px === */
@media (max-width: 900px) {

  /* --- Body: Orangenen Hintergrund auf Mobil entfernen --- */
  /* --- Body: Inhalt oben statt zentriert; kein horizontales Wischen --- */
  body {
    background-color: #FFFFFF !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow-x: hidden !important;
  }

  /* --- Header: Kompakt + Safe-Area (viewport-fit=cover) --- */
  header {
    padding: max(10px, env(safe-area-inset-top, 0px)) 15px 10px 15px !important;
  }
  .logo {
    font-size: 24px !important;
  }

  /* --- Mobile Header: Logo links, Glocke + Burger rechts (Master, Artist, Organizer) --- */
  body[data-bottom-nav="master"] header,
  body[data-bottom-nav="artist"] header,
  body[data-bottom-nav="organizer"] header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  body[data-bottom-nav="master"] .logo,
  body[data-bottom-nav="artist"] .logo,
  body[data-bottom-nav="organizer"] .logo {
    text-align: left !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  body[data-bottom-nav="master"] .header-icons,
  body[data-bottom-nav="artist"] header > .muveup-header-actions,
  body[data-bottom-nav="organizer"] header > .muveup-header-actions {
    position: static !important;
    width: auto !important;
    margin-left: auto !important;
  }
  body[data-bottom-nav="artist"] header > .muveup-header-actions > .muveup-notif--wrap,
  body[data-bottom-nav="organizer"] header > .muveup-header-actions > .muveup-notif--wrap {
    display: contents;
  }
  /* .burger-menu darf keinen eigenen Positionierungs-Kontext bilden, sonst landet der
     absolute .burger-icon nicht relativ zur <header>, sondern relativ zur 0-breiten
     .burger-menu und sitzt 15 px weiter innen (Bug: dashboard/map vs. search/discovery). */
  body[data-bottom-nav="master"] .burger-menu,
  body[data-bottom-nav="artist"] .burger-menu,
  body[data-bottom-nav="organizer"] .burger-menu,
  body[data-bottom-nav="community-member"] .burger-menu {
    position: static !important;
  }
  body[data-bottom-nav="master"] .burger-icon,
  body[data-bottom-nav="artist"] .burger-icon,
  body[data-bottom-nav="organizer"] .burger-icon,
  body[data-bottom-nav="community-member"] .burger-icon {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1001 !important;
  }
  body[data-bottom-nav="master"] .burger-icon.active span:nth-child(1),
  body[data-bottom-nav="artist"] .burger-icon.active span:nth-child(1),
  body[data-bottom-nav="organizer"] .burger-icon.active span:nth-child(1),
  body[data-bottom-nav="community-member"] .burger-icon.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
  }
  body[data-bottom-nav="master"] .burger-icon.active span:nth-child(3),
  body[data-bottom-nav="artist"] .burger-icon.active span:nth-child(3),
  body[data-bottom-nav="organizer"] .burger-icon.active span:nth-child(3),
  body[data-bottom-nav="community-member"] .burger-icon.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px) !important;
  }

  /* Sobald Glocke im DOM: Burger sofort wie bei gesetztem data-bottom-nav positionieren
     (profile-artists startet mit data-bottom-nav="public" bis Auth fertig ist). */
  header:has(.muveup-notif) .burger-menu {
    position: static !important;
  }
  header:has(.muveup-notif) .burger-icon {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1001 !important;
  }
  header:has(.muveup-notif) .burger-icon.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
  }
  header:has(.muveup-notif) .burger-icon.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px) !important;
  }
  header:has(.muveup-notif) > .muveup-header-actions > .muveup-notif--wrap {
    display: contents;
  }

  /* --- Burger-Menu: Anzeigen --- */
  .burger-icon {
    display: flex !important;
  }
  /* F15b: Menü als Popover unter dem Burger wie das Gastmenü der App (.mu-menu in css/overlays.css) */
  .top-nav {
    position: fixed !important;
    top: calc(var(--maintenance-banner-height, 0px) + var(--topbar-h-mobile) + var(--safe-top) + var(--sp-1)) !important;
    right: var(--sp-4) !important;
    height: auto !important;
    width: auto !important;
    min-width: 240px !important;
    background: var(--color-surface) !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: var(--sp-2) !important;
    border-radius: var(--r-md);
    transform-origin: top right;
    transform: scale(0.96) translateY(-4px) !important;
    opacity: 0;
    visibility: hidden;
    box-shadow: var(--sh-3) !important;
    z-index: 1000 !important;
    transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast) !important;
  }
  .top-nav.active {
    transform: none !important;
    opacity: 1;
    visibility: visible;
    transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-fast) var(--ease-out), visibility 0s !important;
  }
  /* Sichtbarkeit regelt css/landing-shell/bottom-nav.css (abgemeldet nur die eingefügten Gast-Links) */
  .nav-link {
    min-height: 40px;
    padding: var(--sp-2) var(--sp-3) !important;
    border-radius: var(--r-sm-lg);
    color: var(--color-text) !important;
    font-size: var(--fs-body-lg) !important;
    line-height: var(--lh-base) !important;
    transition: background-color var(--dur-fast) var(--ease-out);
  }
  .nav-link:hover,
  .nav-link:focus-visible { background: var(--color-surface-muted); }
  @media (prefers-reduced-motion: reduce) {
    .top-nav { transform: none !important; }
  }

  header .top-nav a.nav-link.active:not(.muveup-hamburger-logout) {
    color: #E28600;
    font-weight: 600;
  }

  /* Hamburger-Panel: einheitlicher Rhythmus nur via gap (keine Item-Margins) */
  header .top-nav {
    gap: 0 !important;
  }

  header .top-nav .nav-link,
  header .top-nav > .muveup-lang-toggle,
  header .top-nav > .muveup-profile-nav-dropdown--mobile-panel,
  header .top-nav > .muveup-profile-nav-dropdown--nav-picker,
  header .top-nav > .muveup-master-werkstatt-nav,
  header .top-nav .muveup-mobile-browser-nav > .muveup-profile-nav-dropdown--nav-picker,
  header .top-nav .muveup-mobile-browser-nav > .muveup-master-werkstatt-nav,
  header .top-nav > .muveup-hamburger-logout,
  header .top-nav > .muveup-hamburger-push-settings,
  header .top-nav > .muveup-hamburger-guest-link,
  header .top-nav > .muveup-hamburger-master-link,
  header .top-nav > .muveup-hamburger-legal,
  header .top-nav > .muveup-mobile-browser-nav {
    margin: 0 !important;
  }

  header .top-nav > .muveup-lang-toggle {
    display: inline-flex !important;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--sp-3);
    font-size: var(--fs-body-lg) !important;
    line-height: var(--lh-base) !important;
    align-self: stretch;
  }

  header .top-nav > .muveup-profile-nav-dropdown--mobile-panel,
  header .top-nav > .muveup-profile-nav-dropdown--nav-picker,
  header .top-nav > .muveup-master-werkstatt-nav {
    display: block;
    position: relative;
    width: 100%;
    margin: 0 !important;
    padding: 0;
    line-height: 1.35 !important;
  }

  header .top-nav .muveup-profile-nav-dropdown--mobile-panel .muveup-profile-nav-trigger--nav,
  header .top-nav .muveup-profile-nav-dropdown--nav-picker .muveup-profile-nav-trigger--nav,
  header .top-nav .muveup-master-werkstatt-nav .muveup-profile-nav-trigger--nav {
    margin: 0 !important;
    padding: 0;
    min-height: 0;
    line-height: 1.35 !important;
    font-size: 18px !important;
  }

  header .top-nav .muveup-profile-nav-dropdown--mobile-panel .muveup-profile-nav-menu[hidden],
  header .top-nav .muveup-profile-nav-dropdown--nav-picker .muveup-profile-nav-menu[hidden],
  header .top-nav .muveup-master-werkstatt-nav .muveup-profile-nav-menu[hidden] {
    display: none !important;
  }

  /* Popover: der Burger wird zum X und schließt, ein eigenes X im Menü entfällt */
  .close-icon {
    display: none !important;
  }

  .top-nav .close-icon {
    position: absolute !important;
    top: max(12px, calc(env(safe-area-inset-top, 0px) + 8px)) !important;
    right: max(12px, calc(env(safe-area-inset-right, 0px) + 4px)) !important;
    left: auto !important;
    font-size: 40px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1101 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    color: var(--c-purple) !important;
  }
  header .top-nav > .close-icon { display: none !important; }

  .menu-overlay {
    z-index: 999 !important;
  }

  .menu-overlay.active {
    display: block !important;
  }

  /* --- Dashboard-Hamburger mit Kalender (oben, scrollbar) --- */
  .top-nav:has(.dashboard-top-nav-calendar) {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 64px 18px 24px 18px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    /* Mehr Breite für Kalender + größeres Tag-Detail-Popover */
    width: min(320px, 92vw) !important;
  }

  .dashboard-top-nav-calendar {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 16px !important;
    margin-bottom: 0 !important;
    border-top: none !important;
    border-bottom: 1px solid #e5e5e5 !important;
    flex-shrink: 0 !important;
  }

  .dashboard-top-nav-calendar-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #666 !important;
    margin-bottom: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }

  .dashboard-top-nav-calendar-inner {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
  }

  /* --- Container: Edge-to-edge auf Mobil (Abstand = Header + Fortschrittsbalken) --- */
  .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 50px !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* --- Dashboard: "Starte dein Live-Event"-Button volle Breite, etwas tiefer --- */
  .dashboard-header {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
  }
  .dashboard-header-actions {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .dashboard-header-actions .create-event-button-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin-top: 12px !important;
  }
  .dashboard-header-actions .create-event-button {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* --- Wizard-Card & Wizard-Wrapper: Edge-to-edge auf Mobil --- */
  .wizard-wrapper {
    padding: calc(env(safe-area-inset-top, 0px) + 54px) 0 0 0 !important;
    background-color: #FFFFFF !important;
  }

  /* --- Media-Wizard-Artists: Fortschritts-Leiste mit etwas Abstand unter dem Inhalt --- */
  .wizard-media-progress {
    margin-top: 8px !important;
  }
  .wizard-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* --- Fortschrittsbalken: Unter Header inkl. Safe-Area (PWA viewport-fit=cover) --- */
  .progress-container {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 46px) !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    height: 4px !important;
  }

  /* --- Footer: Nicht fixed, immer am Seitenende; alle Links sichtbar (kein Abschneiden) --- */
  footer {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    padding: 16px !important;
    font-size: 11px !important;
    margin-top: auto !important;
    overflow: visible !important;
  }
  footer p {
    overflow: visible !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  /* --- Einheitliche Buttons --- */
  .btn {
    font-size: 15px !important;
    padding: 12px 28px !important;
  }
  .btn-nav {
    font-size: 14px !important;
    padding: 10px 20px !important;
  }
  .action-button,
  .btn-action {
    font-size: 13px !important;
    padding: 10px 14px !important;
  }
  .popup-button {
    font-size: 15px !important;
    padding: 12px 24px !important;
  }

  /* --- Edit-Profile-Artists: Upload-Popup „Medium hinzufügen“ auf Mobil kleiner --- */
  #mediaChoicePopup .modal-content {
    max-width: 92vw !important;
    width: 92vw !important;
    padding: 16px 14px !important;
    margin: 10px !important;
  }
  #mediaChoicePopup .modal-icon-container {
    margin-bottom: 8px !important;
  }
  #mediaChoicePopup .modal-content h2 {
    font-size: 18px !important;
    margin-bottom: 6px !important;
  }
  #mediaChoicePopup .modal-content > p {
    font-size: 13px !important;
    margin-bottom: 12px !important;
  }
  #mediaChoicePopup .drop-area {
    min-height: 80px !important;
    padding: 12px !important;
  }
  #mediaChoicePopup .drop-area-content h3 {
    font-size: 14px !important;
  }
  #mediaChoicePopup .drop-area-content p {
    font-size: 12px !important;
  }
  #mediaChoicePopup .sample-source-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  #mediaChoicePopup .sample-source-card {
    padding: 10px 8px !important;
    min-height: 64px !important;
  }
  #mediaChoicePopup .sample-source-card .source-icon svg {
    width: 24px !important;
    height: 24px !important;
  }
  #mediaChoicePopup .sample-source-card .source-label {
    font-size: 11px !important;
  }
  #mediaChoicePopup .media-choice-dynamic-tip {
    font-size: 13px !important;
    margin-bottom: 10px !important;
  }
  #mediaChoicePopup .form-group {
    margin-top: 10px !important;
  }
  #mediaChoicePopup .form-group label {
    font-size: 13px !important;
  }
  #mediaChoicePopup .form-group input {
    font-size: 14px !important;
    padding: 8px 10px !important;
  }
  #mediaChoicePopup .change-button {
    font-size: 13px !important;
    padding: 8px 14px !important;
    margin-top: 8px !important;
  }
  #mediaChoicePopup .popup-button {
    margin-top: 14px !important;
  }

  /* --- Wizard: Footer fix über Bottom-Nav (PWA + Mobile Browser) --- */
  .wizard-footer {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    z-index: 1099;
    flex-shrink: 0;
    padding: 15px max(20px, env(safe-area-inset-right, 0px)) max(15px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
  }

  body.has-bottom-nav .wizard-footer {
    bottom: var(--muveup-bottom-nav-offset, calc(64px + env(safe-area-inset-bottom, 0px)));
    /* Nav trägt Safe-Area bereits; kein Extra-Padding unten am Footer */
    padding-bottom: 15px;
  }

  .wizard-card > .step-container {
    flex-grow: 0 !important;
  }

  /* Nur Footer-Höhe: Nav-Offset steckt schon in footer.bottom / body-padding */
  body.has-bottom-nav .wizard-card > .step-container {
    padding-bottom: 80px !important;
  }

  body:not(.has-bottom-nav) .wizard-card > .step-container {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.has-bottom-nav .wizard-main {
    padding-bottom: 120px !important;
  }

  /* --- Profil: Daten und Einstellungen (Wizard-Typografie, Mobile + PWA) --- */
  #accessDataCategory label {
    font-size: 14px !important;
    padding-left: 10px;
  }

  #accessDataCategory input[type="text"],
  #accessDataCategory input[type="email"],
  #accessDataCategory input[type="password"] {
    font-size: 16px !important;
    padding: 12px !important;
  }

  #accessDataCategory .change-button {
    font-size: 15px !important;
    padding: 12px 24px !important;
  }

  #accessDataCategory .delete-button {
    font-size: 16px !important;
    padding: 12px 20px !important;
  }

  #accessDataCategory .change-message {
    font-size: 14px !important;
  }

  #accessDataCategory .status-badge-profile {
    font-size: 14px !important;
  }

  #accessDataCategory .info-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 13px !important;
    flex-shrink: 0;
  }

  body.has-bottom-nav #accessDataCategory .category-content {
    padding-bottom: calc(8px + var(--muveup-bottom-nav-offset, 0px));
  }
}

/* === MEDIUM: 768px – Upload-Popup „Medium hinzufügen“ kompakter + Wizard Step0 === */
@media (max-width: 768px) {
  /* Edit-Profile-Artists: Upload-Popup noch kleiner */
  #mediaChoicePopup .modal-content {
    max-width: 95vw !important;
    width: 95vw !important;
    padding: 14px 12px !important;
  }
  #mediaChoicePopup .modal-content h2 {
    font-size: 17px !important;
  }
  #mediaChoicePopup .drop-area {
    min-height: 72px !important;
    padding: 10px !important;
  }
  #mediaChoicePopup .drop-area-content h3 {
    font-size: 13px !important;
  }
  #mediaChoicePopup .drop-area-content .upload-icon-large {
    width: 28px !important;
    height: 28px !important;
  }

  /* Wizard Registrierung: Zurück-Button mit Abstand, Layout zentriert lassen */
  #step0 {
    padding-top: 72px !important;
    box-sizing: border-box;
  }
  #step0 .wizard-back-link {
    top: 24px !important;
    left: 16px !important;
  }
  #step0 h2,
  #step0 .subtitle,
  #step0 .wizard-role-badge {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Wizard Registrierung: Button "Jetzt loslegen!" volle Breite */
  .record-animation-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 160px !important;
    padding: 0 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    box-sizing: border-box;
  }
  .record-animation-container--compact {
    margin-top: 110px !important;
  }
  #step0 #startWizardBtn,
  #step0 #startBtn {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* === SMALL MOBILE: 480px === */
@media (max-width: 480px) {

  /* --- Container: Weniger Padding --- */
  .container {
    padding: 20px 16px !important;
  }

  /* --- Header: kompakter, Safe-Area für PWA behalten --- */
  header {
    padding: max(8px, env(safe-area-inset-top, 0px)) 12px 8px 12px !important;
    min-height: 0 !important;
  }
  .logo {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }
  .progress-container {
    top: calc(env(safe-area-inset-top, 0px) + 42px) !important;
  }
  .container {
    margin-top: calc(env(safe-area-inset-top, 0px) + 46px) !important;
  }
  .wizard-wrapper {
    padding-top: calc(env(safe-area-inset-top, 0px) + 50px) !important;
  }
  /* Abstand oben in Step0: genug Platz, damit Zurück-Button nicht in die Überschrift ragt */
  #step0 {
    padding-top: 80px !important;
  }
  #step0 .wizard-back-link {
    top: 28px !important;
  }

  /* --- Kleinere Ueberschriften (nur in Containern, nicht Hero etc.) --- */
  .container h1,
  .wizard-card h1 {
    font-size: 26px !important;
  }

  /* --- Footer: Noch kompakter; alle Links vollständig sichtbar --- */
  footer {
    padding: 14px 12px !important;
    font-size: 10px !important;
    overflow: visible !important;
  }
  footer p {
    overflow: visible !important;
    white-space: normal !important;
  }

  /* Profil: Daten und Einstellungen – keine weitere Verkleinerung unter Wizard-Minimum */
  #accessDataCategory label {
    font-size: 14px !important;
    padding-left: 10px;
  }

  #accessDataCategory input[type="text"],
  #accessDataCategory input[type="email"],
  #accessDataCategory input[type="password"] {
    font-size: 16px !important;
    padding: 12px !important;
  }

  #accessDataCategory .change-button {
    font-size: 15px !important;
    padding: 12px 24px !important;
  }

  #accessDataCategory .delete-button {
    font-size: 16px !important;
    padding: 12px 20px !important;
  }

  #accessDataCategory .change-message {
    font-size: 14px !important;
  }

  #accessDataCategory .status-badge-profile {
    font-size: 14px !important;
  }

  #accessDataCategory .info-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 13px !important;
  }

}

/* Master: Werkstatt-Dropdown (karte + entdecken) */
.muveup-master-werkstatt-nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.muveup-master-werkstatt-nav .muveup-profile-nav-trigger--nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  color: #88589F;
  cursor: pointer;
  text-transform: lowercase;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s ease;
}

.muveup-master-werkstatt-nav.is-open .muveup-profile-nav-trigger--nav,
.muveup-master-werkstatt-nav.is-active .muveup-profile-nav-trigger--nav,
.muveup-master-werkstatt-nav .muveup-profile-nav-trigger--nav.active {
  color: #E28600;
  font-weight: 600;
}

@media (min-width: 901px) {
  .muveup-master-werkstatt-nav .muveup-profile-nav-trigger--nav:hover {
    color: #E28600;
    font-weight: 600;
  }
}

.muveup-master-werkstatt-nav .muveup-profile-nav-chevron {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-top: 1px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  opacity: 0.85;
}

.muveup-master-werkstatt-nav.is-open .muveup-profile-nav-chevron {
  transform: rotate(180deg);
}

.muveup-master-werkstatt-nav .muveup-profile-nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  min-width: 160px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 6px;
  background: #fff;
  border: 1px solid #ece8f2;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 1200;
  box-sizing: border-box;
}

.muveup-master-werkstatt-nav__menu .nav-link {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.35;
  color: #88589F;
  text-decoration: none;
  text-transform: lowercase;
  box-sizing: border-box;
}

.muveup-master-werkstatt-nav__menu .nav-link.active {
  color: #E28600;
  font-weight: 600;
  background: #f8f5fc;
}

@media (min-width: 901px) {
  .muveup-master-werkstatt-nav__menu .nav-link:hover {
    color: #E28600;
    font-weight: 600;
    background: #f8f5fc;
  }
}

@media (max-width: 900px) {
  header .top-nav .muveup-master-werkstatt-nav .muveup-profile-nav-trigger--nav {
    font-size: 18px !important;
  }

  header .top-nav .muveup-master-werkstatt-nav .muveup-profile-nav-menu {
    position: static;
    inset: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0 0 0 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    z-index: auto;
  }

  .muveup-master-werkstatt-nav__menu .nav-link {
    font-size: 18px;
    padding: 8px 0 0;
    background: transparent;
  }

  .muveup-master-werkstatt-nav__menu .nav-link:first-child {
    padding-top: 10px;
  }

  .muveup-master-werkstatt-nav:not(.is-open):not(.is-active) .muveup-profile-nav-trigger--nav:hover:not(.active) {
    color: #88589F;
    font-weight: 400;
  }

  .muveup-master-werkstatt-nav__menu .nav-link:hover:not(.active) {
    color: #88589F;
    font-weight: 400;
    background: transparent;
  }
}

/* Lange URLs / ununterbrochene Nutzertexte in Beschreibungs-Containern */
.profile-description,
.description-text,
.detail-description,
.description-section {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}