/* RAC – sichere Smartphone-Arbeitsflächen ohne seitliches Verschieben. */
html,body{width:100%;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
main,.view,.panel,.form-grid,.button-row,.creative-card,.photo-free-editor,.photo-free-workspace,.photo-stage-column,.book-dtp-shell,.book-dtp-workspace,.studio-workspace,.studio-stage{min-width:0;max-width:100%}

@media(max-width:820px){
  /* Allgemein: Ein zu breiter Inhalt darf niemals die ganze PWA seitlich ziehen. */
  body>*:not(dialog),main>*{max-inline-size:100%}
  .view.active{overflow-x:hidden}
  .panel,.summary-card,.photo-free-editor{max-inline-size:100%}

  /* Comic-Layout: Die dunklen Außenränder bleiben als vertikale Scrollflächen frei. */
  .studio-stage{padding-left:18px!important;padding-right:18px!important;overflow-y:auto!important;overflow-x:hidden!important;touch-action:pan-y!important;overscroll-behavior-y:contain}
  .studio-paper-wrap{width:calc(100% - 24px)!important;max-width:430px!important;margin-inline:auto!important}
  .studio-paper-wrap.editing{width:calc(100% - 24px)!important;max-width:700px!important}
  .studio-paper-wrap #canvasViewport{max-width:100%!important}
  #layoutEditor .canvas-viewport{width:calc(100% - 28px)!important;margin-inline:auto!important;touch-action:pan-y;overscroll-behavior:contain}

  /* Fotobuch: 14 px Griffzone links und rechts; Werkzeuge folgen direkt darunter. */
  .photo-free-editor{margin-inline:0!important;padding-inline:8px!important;overflow-x:hidden}
  .photo-free-workspace{overflow:visible!important}
  .photo-stage-column{padding-inline:2px;touch-action:pan-y}
  .photo-free-stage{width:calc(100% - 28px)!important;max-width:680px!important;margin-inline:auto!important}
  .photo-free-tools{position:static!important;max-width:100%;margin-top:12px}
  .writer-cover-workspace{overflow-x:hidden}
  .writer-cover-stage{width:calc(100% - 28px)!important;max-width:min(650px,58dvh)!important;margin-inline:auto!important}

  /* Buchsatz: Die Seite wird kleiner, die Außenfläche scrollt; Steuerung bleibt sichtbar. */
  .book-dtp-dialog{overflow:hidden}
  .book-dtp-shell{display:block!important;height:100dvh!important;padding:7px 7px calc(72px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
  .book-dtp-head,.book-dtp-rail,.book-dtp-workspace{margin-bottom:7px}
  .book-dtp-workspace{display:block!important;overflow:visible!important}
  .book-dtp-canvas-wrap{height:auto!important;min-height:58dvh!important;padding:6px 18px 18px!important;overflow:visible!important;touch-action:pan-y!important}
  .dtp-mode-edit .book-dtp-page,.dtp-mode-view .book-dtp-page{align-self:auto!important;justify-self:auto!important;width:calc(100% - 28px)!important;height:auto!important;max-width:620px!important;max-height:none!important;margin:0 auto!important}
  .dtp-mode-edit .book-dtp-page{touch-action:none!important}
  .dtp-mode-view .book-dtp-page{touch-action:pan-x pan-y!important}
  .book-dtp-tools{position:fixed!important;left:7px!important;right:7px!important;bottom:calc(60px + env(safe-area-inset-bottom))!important;max-width:calc(100vw - 14px)!important}
  .book-dtp-mobile-bar{position:fixed!important;left:0;right:0;bottom:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr))!important;height:auto!important;padding:5px 7px calc(5px + env(safe-area-inset-bottom))!important}
  .book-dtp-mobile-bar button{min-width:0!important;max-width:100%!important;white-space:normal!important}
}

@media(max-width:520px){
  .book-dtp-shell{padding-bottom:calc(124px + env(safe-area-inset-bottom))!important}
  .book-dtp-tools{bottom:calc(112px + env(safe-area-inset-bottom))!important}
}

@media(max-width:390px){
  .studio-stage{padding-left:14px!important;padding-right:14px!important}
  .studio-paper-wrap,.studio-paper-wrap.editing{width:calc(100% - 18px)!important}
  .photo-free-stage,.writer-cover-stage{width:calc(100% - 22px)!important}
  .book-dtp-canvas-wrap{padding-inline:14px!important}
  .dtp-mode-edit .book-dtp-page,.dtp-mode-view .book-dtp-page{width:calc(100% - 20px)!important}
}