/* Only the demo controls and hard safety labels live here. The visible app itself
   is rendered by the copied PlakatPlan application and its original CSS. */
.topbar__beta { min-width: 3.25rem; }
.demo-exit {
  color: white;
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .1);
  text-decoration: none;
}
.demo-exit:hover { background: rgba(255, 255, 255, .18); }
.demo-exit > span:first-child { font-size: 1rem; line-height: 1; }
.demo-view-toggle {
  color: white;
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .1);
}
.demo-view-toggle:hover { background: rgba(255, 255, 255, .18); }
.demo-view-toggle > span:first-child { font-size: 1.05rem; line-height: 1; }

/* Paco-/Systemhinweise brauchen die gesamte obere Fläche und dürfen nicht von
   den zusätzlichen Demo-Steuerelementen überlagert werden. */
body.has-toast:not(.toast-in-modal) .demo-view-toggle,
body.has-toast:not(.toast-in-modal) .demo-exit {
  display: none !important;
}

body.demo-mobile-preview-open {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
.demo-mobile-preview-shell {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  overflow: hidden;
  overscroll-behavior: none;
  background: #000;
}
.demo-phone-frame {
  position: relative;
  width: min(421px, calc(100vw - 24px));
  height: min(880px, calc(100dvh - 24px));
  padding: 13px;
  overflow: hidden;
  border: 2px solid #303338;
  border-radius: 50px;
  background: #08090b;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .74), inset 0 0 0 2px #15171a, inset 0 0 0 5px #030405;
}
.demo-mobile-preview-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 37px;
  background: var(--paper);
}

html.demo-mobile-preview-frame,
html.demo-mobile-preview-frame body { min-height: 100%; overscroll-behavior: contain; }
html.demo-mobile-preview-frame body { overflow-x: hidden; }
html.demo-mobile-preview-frame .demo-view-toggle { display: inline-flex; }

.demo-isolation-feedback {
  position: fixed;
  z-index: 5000;
  left: 50%;
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  width: min(calc(100% - 2rem), 520px);
  padding: .8rem 1rem;
  transform: translateX(-50%);
  border-radius: 12px;
  background: var(--tanne-dark);
  color: white;
  text-align: center;
  box-shadow: var(--shadow-hover);
}

/* Demo-Schranke: Paco bleibt in der isolierten Produktdemo vollständig deaktiviert. */
body .paco-context-button,
body .paco-help-overlay,
body .paco-guide,
body .plaki-onboarding,
body .toast__paco,
body [data-action="toggle-paco-help"],
body [data-profile-device-section="paco-help"] {
  display: none !important;
}

body .modal__head:has(.modal-feedback) .modal__close::after {
  display: none !important;
}

body .modal__head:has(.modal-feedback) .modal__close > .icon {
  visibility: visible !important;
}

body.has-toast:not(.toast-in-modal) .avatar {
  border-color: rgba(255, 255, 255, .65) !important;
  background: var(--sonne) !important;
  animation: none !important;
}

body.has-toast:not(.toast-in-modal) .avatar__image {
  content: normal !important;
}

@media (max-width: 760px) {
  /* Die Produkt-CSS kappt horizontales Überlaufen. Im schmalen Demo-Dokument
     würde dieser Überlauf-Container jedoch position: sticky der Topbar lösen. */
  html,
  body,
  #app { overflow-x: visible; }
  html:not(.demo-mobile-preview-frame) .demo-view-toggle { display: none !important; }
  .demo-exit { width: 40px; min-width: 40px; padding: .45rem; }
  .demo-exit > span:last-child { display: none; }
  html.demo-mobile-preview-frame .demo-view-toggle { width: 40px; min-width: 40px; padding: .45rem; }
  html.demo-mobile-preview-frame .demo-view-toggle > span:last-child { display: none; }
}