Dialog siteframe

<div class="on-frame" style="display:flex;justify-content:center;padding:24px 16px"><div style="width:100%;max-width:320px;background:var(--oc-semantic-color-background-frame);border:1px solid var(--oc-semantic-color-stroke-divider);color:var(--oc-semantic-color-text-default)"><div style="padding:16px;display:flex;justify-content:flex-start"><img src="/otto-logo.svg" alt="OTTO" style="display:block;height:22px;width:auto"></div><div style="background:var(--oc-semantic-color-background-canvas)"><div style="display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px;padding:8px 8px 8px 16px;min-height:56px"><span></span><p class="oc-headline-100" style="text-align:left">Headline</p><oc-icon-button-v3 variant="transparent" icon="close" oc-aria-label="Schließen"></oc-icon-button-v3></div><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:160px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">PLACEHOLDER</div><div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px"><oc-button-v1 variant="secondary">Zurück</oc-button-v1><oc-button-v1 variant="primary">Weiter</oc-button-v1></div><div style="height:96px"></div></div><div style="background:var(--oc-semantic-color-background-frame);padding:16px 16px 24px;text-align:center;color:var(--oc-semantic-color-text-secondary);font:12px/1.7 OTTOSans,sans-serif"><p><a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Cookie-Einstellungen</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">AGB</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Datenschutz</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Impressum</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Information zur Barrierefreiheit</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Produktsicherheitsrückrufe</a></p><p style="font-size:10px;line-height:14px;margin-top:8px">Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten</p></div></div></div>

<div class="on-frame" style="display:flex;flex-wrap:wrap;justify-content:center;gap:48px;padding:32px 16px"><div style="width:280px;max-width:100%;border:2px solid var(--oc-semantic-color-stroke-divider);border-radius:40px;overflow:hidden;background:var(--oc-semantic-color-background-canvas);display:flex;flex-direction:column;min-height:560px;color:var(--oc-semantic-color-text-default)"><div style="display:flex;justify-content:space-between;align-items:center;padding:16px 28px 8px;font:700 14px/18px OTTOSans,sans-serif"><span>9:41</span><span style="display:flex;gap:6px;align-items:center"><oc-icon-v1 type="wifi" style="width:16px;height:16px"></oc-icon-v1><span style="width:22px;height:11px;border-radius:3px;background:var(--oc-semantic-color-text-default)"></span></span></div><div style="display:flex;align-items:center;gap:4px;padding:0 12px 0 4px"><oc-icon-button-v3 variant="transparent" icon="arrow-left" oc-aria-label="Zurück"></oc-icon-button-v3><div style="flex:1"><oc-search-field-v1><input type="search" placeholder="Wonach suchst du?" spellcheck="false" aria-label="Suche"></oc-search-field-v1></div></div><div style="display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px;padding:8px 8px 8px 16px;min-height:56px"><span></span><p class="oc-headline-100" style="text-align:left">Headline</p><oc-icon-button-v3 variant="transparent" icon="close" oc-aria-label="Schließen"></oc-icon-button-v3></div><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:250px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">PLACEHOLDER</div><div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px"><oc-button-v1 variant="secondary">Zurück</oc-button-v1><oc-button-v1 variant="primary">Weiter</oc-button-v1></div><div style="display:flex;justify-content:space-around;padding:10px 8px 12px;border-top:1px solid var(--oc-semantic-color-stroke-divider);margin-top:auto"><oc-icon-v1 type="home" style="--color:var(--oc-semantic-color-text-brand)"></oc-icon-v1><oc-icon-v1 type="burger"></oc-icon-v1><oc-icon-v1 type="basket"></oc-icon-v1><oc-icon-v1 type="wishlist"></oc-icon-v1><oc-icon-v1 type="person"></oc-icon-v1></div><div style="margin:auto auto 8px;width:110px;height:4px;border-radius:2px;background:var(--oc-semantic-color-text-default)"></div></div><div style="width:280px;max-width:100%;border:2px solid var(--oc-semantic-color-stroke-divider);border-radius:40px;overflow:hidden;background:var(--oc-semantic-color-background-canvas);display:flex;flex-direction:column;min-height:560px;color:var(--oc-semantic-color-text-default)"><div style="display:flex;justify-content:space-between;align-items:center;padding:16px 28px 8px;font:700 14px/18px OTTOSans,sans-serif"><span>9:41</span><span style="display:flex;gap:6px;align-items:center"><oc-icon-v1 type="wifi" style="width:16px;height:16px"></oc-icon-v1><span style="width:22px;height:11px;border-radius:3px;background:var(--oc-semantic-color-text-default)"></span></span></div><div style="display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px;padding:8px;min-height:56px"><oc-icon-button-v3 variant="transparent" icon="arrow-left" oc-aria-label="Zurück"></oc-icon-button-v3><p class="oc-headline-100" style="text-align:left">Headline</p><oc-icon-button-v3 variant="transparent" icon="close" oc-aria-label="Schließen"></oc-icon-button-v3></div><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:330px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">PLACEHOLDER</div><div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px"><oc-button-v1 variant="secondary">Zurück</oc-button-v1><oc-button-v1 variant="primary">Weiter</oc-button-v1></div><div style="margin:auto auto 8px;width:110px;height:4px;border-radius:2px;background:var(--oc-semantic-color-text-default)"></div></div></div>

<div class="on-frame" style="display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:48px;padding:0 16px 32px"><div><div style="width:300px;border:1px solid var(--oc-semantic-color-stroke-divider);border-top:0;background:var(--oc-semantic-color-background-frame);color:var(--oc-semantic-color-text-secondary);font-size:13px;line-height:20px"><div style="background:var(--oc-semantic-color-background-canvas);padding:24px 16px 12px;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 45%);mask-image:linear-gradient(to bottom,transparent,#000 45%)"><p style="display:flex;gap:12px;align-items:center;padding:6px 0"><oc-icon-v1 type="check" style="width:16px;height:16px;--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Kostenlose Rücksendung</p><p style="display:flex;gap:12px;align-items:center;padding:6px 0"><oc-icon-v1 type="check" style="width:16px;height:16px;--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Einfache Ratenzahlung**</p><p style="display:flex;gap:12px;align-items:center;padding:6px 0"><oc-icon-v1 type="check" style="width:16px;height:16px;--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Ratenschutz-Versicherung**</p></div><div style="background:var(--oc-semantic-color-background-canvas);display:flex;justify-content:center;gap:16px;padding:16px;border-top:4px solid var(--oc-semantic-color-background-frame)"><img src="/assets-static/icons/pl_logo_pinterest.svg" alt="Pinterest" style="height:24px;width:24px;opacity:.45"><img src="/assets-static/icons/pl_logo_facebook.svg" alt="Facebook" style="height:24px;width:24px;opacity:.45"><img src="/assets-static/icons/pl_logo_youtube.svg" alt="Youtube" style="height:24px;width:24px;opacity:.45"><img src="/assets-static/icons/pl_logo_instagram.svg" alt="Instagram" style="height:24px;width:24px;opacity:.45"></div><div style="padding:16px;text-align:center"><p><a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Cookie-Einstellungen</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">AGB</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Datenschutz</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Impressum</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Information zur Barrierefreiheit</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Produktsicherheitsrückrufe</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Lob &amp; Kritik</a></p><p style="margin-top:12px">Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten</p><p style="margin-top:12px">* Bonität vorausgesetzt, ** Bonität vorausgesetzt, gegen Aufpreis</p><img src="/assets-static/icons/pl_logo_slogan.svg" alt="OTTO … find ich gut" style="display:block;height:36px;width:auto;margin:20px auto 8px;opacity:.5"></div></div><p style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;text-align:center;margin-top:16px">Web footer</p></div><div><div style="width:300px;border:1px solid var(--oc-semantic-color-stroke-divider);border-top:0;background:var(--oc-semantic-color-background-frame)"><div style="background:var(--oc-semantic-color-background-canvas);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 45%);mask-image:linear-gradient(to bottom,transparent,#000 45%)"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:80px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em"></div><div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px"><oc-button-v1 variant="secondary">Zurück</oc-button-v1><oc-button-v1 variant="primary">Weiter</oc-button-v1></div><div style="height:150px"></div></div><div style="background:var(--oc-semantic-color-background-frame);padding:16px 16px 24px;text-align:center;color:var(--oc-semantic-color-text-secondary);font:12px/1.7 OTTOSans,sans-serif"><p><a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Cookie-Einstellungen</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">AGB</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Datenschutz</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Impressum</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Information zur Barrierefreiheit</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Produktsicherheitsrückrufe</a></p><p style="font-size:10px;line-height:14px;margin-top:8px">Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten</p></div></div><p style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;text-align:center;margin-top:16px">Dialog siteframe footer</p></div></div>

<div class="on-frame" style="display:flex;flex-wrap:wrap;gap:40px;padding:24px 16px;align-items:flex-start">
<div style="flex:1 1 240px;max-width:300px"><div style="display:grid;justify-items:center;margin-bottom:8px"><span style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px">fill-parent</span><span style="display:block;width:100%;height:12px;background:linear-gradient(#f06,#f06) center/100% 1.5px no-repeat;position:relative"></span></div><div style="width:100%;max-width:300px;background:var(--oc-semantic-color-background-frame);border:1px solid var(--oc-semantic-color-stroke-divider);color:var(--oc-semantic-color-text-default)"><div style="padding:16px;display:flex;justify-content:flex-start"><img src="/otto-logo.svg" alt="OTTO" style="display:block;height:22px;width:auto"></div><div style="background:var(--oc-semantic-color-background-canvas)"><div style="display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px;padding:8px;min-height:56px"><oc-icon-button-v3 variant="transparent" icon="arrow-left" oc-aria-label="Zurück"></oc-icon-button-v3><p class="oc-headline-100" style="text-align:left">Headline</p><oc-icon-button-v3 variant="transparent" icon="close" oc-aria-label="Schließen"></oc-icon-button-v3></div><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:160px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">PLACEHOLDER</div><div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px"><oc-button-v1 variant="secondary">Zurück</oc-button-v1><oc-button-v1 variant="primary">Weiter</oc-button-v1></div><div style="height:120px"></div></div><div style="background:var(--oc-semantic-color-background-frame);padding:16px 16px 24px;text-align:center;color:var(--oc-semantic-color-text-secondary);font:12px/1.7 OTTOSans,sans-serif"><p><a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Cookie-Einstellungen</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">AGB</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Datenschutz</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Impressum</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Information zur Barrierefreiheit</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Produktsicherheitsrückrufe</a></p><p style="font-size:10px;line-height:14px;margin-top:8px">Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten</p></div></div><p style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;line-height:22px;text-align:center;margin-top:16px"><b>Breakpoint S</b><br>Logo left-aligned</p></div>
<div style="flex:2 1 300px"><div style="display:grid;justify-items:center;margin-bottom:8px"><span style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px">fill-parent</span><span style="display:block;width:100%;height:12px;background:linear-gradient(#f06,#f06) center/100% 1.5px no-repeat;position:relative"></span></div><div style="width:100%;max-width:none;background:var(--oc-semantic-color-background-frame);border:1px solid var(--oc-semantic-color-stroke-divider);color:var(--oc-semantic-color-text-default)"><div style="padding:16px;display:flex;justify-content:center"><img src="/otto-logo.svg" alt="OTTO" style="display:block;height:22px;width:auto"></div><div style="background:var(--oc-semantic-color-background-canvas);max-width:80%;margin:0 auto"><div style="display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:4px;padding:8px;min-height:56px"><oc-icon-button-v3 variant="transparent" icon="arrow-left" oc-aria-label="Zurück"></oc-icon-button-v3><p class="oc-headline-100" style="text-align:center">Headline</p><oc-icon-button-v3 variant="transparent" icon="close" oc-aria-label="Schließen"></oc-icon-button-v3></div><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:160px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">PLACEHOLDER</div><div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px"><oc-button-v1 variant="secondary">Zurück</oc-button-v1><oc-button-v1 variant="primary">Weiter</oc-button-v1></div><div style="height:120px"></div></div><div style="background:var(--oc-semantic-color-background-frame);padding:16px 16px 24px;text-align:center;color:var(--oc-semantic-color-text-secondary);font:12px/1.7 OTTOSans,sans-serif"><p><a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Cookie-Einstellungen</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">AGB</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Datenschutz</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Impressum</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Information zur Barrierefreiheit</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Produktsicherheitsrückrufe</a></p><p style="font-size:10px;line-height:14px;margin-top:8px">Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten</p></div></div><p style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;line-height:22px;text-align:center;margin-top:16px"><b>Breakpoint &gt;S</b><br>Logo centered</p></div>