/* Compact help remains in the input column as its contents change. */
.bestell-video-help{display:flex;justify-content:flex-start;flex-wrap:wrap;margin:16px 0 0}
.bestell-video-help__button{display:inline-flex;align-items:center;justify-content:center;gap:9px;box-sizing:border-box;width:100%;max-width:100%;min-height:44px;padding:10px 16px;border:1px solid #005766;border-radius:8px;background:#005766;color:#fff;font:700 15px/1.3 Arial,sans-serif;cursor:pointer;touch-action:manipulation}
.bestell-video-help__button:hover{background:#007a86;border-color:#007a86}
.bestell-video-help__button svg{width:21px;height:21px;flex:none;fill:currentColor}
.bestell-video-help__button:focus-visible,.designer-help-video :focus-visible{outline:3px solid #e7a500;outline-offset:3px}
html.designer-help-video-open{overflow:hidden}
.designer-help-video{box-sizing:border-box;width:min(820px,calc(100% - 32px));max-width:none;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:16px;border:1px solid #91b8bb;border-radius:14px;background:#fffaf0;color:#004f5c;overflow:auto;box-shadow:0 16px 65px #001e2b55}
.designer-help-video::backdrop{background:#001e2bcc}
.designer-help-video__heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.designer-help-video__heading h2{margin:0;font:700 19px/1.3 Arial,sans-serif}
.designer-help-video__close{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #91b8bb;border-radius:8px;background:#fff;color:#005766;font:28px/1 Arial,sans-serif;cursor:pointer}
.designer-help-video video{display:block;box-sizing:border-box;width:100%;height:auto;max-height:calc(100vh - 126px);max-height:calc(100dvh - 126px);aspect-ratio:1312/1080;object-fit:contain;background:#111;border-radius:6px}
.designer-help-video__error{margin:12px 0 0;font-size:14px;line-height:1.4}
@media(max-width:600px){.designer-help-video{width:calc(100% - 16px);padding:10px}.designer-help-video__heading h2{font-size:17px}}

/* Portrait tutorials follow the same breakpoint as the mobile designer. */
.designer-help-video--portrait{width:min(430px,calc(100% - 16px),calc((100dvh - 126px)*var(--help-video-ratio,0.461374) + 22px));padding:10px}
.designer-help-video--portrait .designer-help-video__heading h2{font-size:16px}

.bestell-video-help--preview{display:none}
@media(max-width:740px){.bestell-video-help--preview{display:flex;order:100;width:100%;margin-top:16px}}
@media(max-width:740px){.bestell-video-help--preview{margin-bottom:12px}}