.shopware-draft,.shopware-page { --commerce-dark:#101013; background:#fff; color:var(--ink); font-family:var(--font-body); }
.shopware-draft *,.shopware-page * { box-sizing:border-box; }
:is(.shopware-draft,.shopware-page) :is(h1,h2,h3) { font-family:var(--font-head); letter-spacing:-.035em; font-weight:600; }
.commerce-wrap { max-width:1240px; padding:0 36px; margin:auto; }
.commerce-top { position:fixed; inset:0 0 auto; z-index:100; border-bottom:1px solid rgba(255,255,255,.1); transition:background .2s; }
.commerce-top-inner { display:flex; align-items:center; justify-content:space-between; height:80px; gap:24px; }
.commerce-logo img { width:132px; height:auto; filter:brightness(0) invert(1); display:block; }
.commerce-top nav { display:flex; gap:28px; }
.commerce-top nav a { color:#d6d5d9; text-decoration:none; font-size:14px; }
.commerce-top.is-scrolled { background:rgba(16,16,19,.96); backdrop-filter:blur(16px); }
.commerce-button { display:inline-flex; justify-content:center; align-items:center; gap:14px; padding:17px 23px; border:1px solid transparent; border-radius:10px; background:var(--red); color:#fff; font:600 14px/1.4 var(--font-body); text-decoration:none; cursor:pointer; transition:background .2s,transform .2s; }
.commerce-button:hover { background:var(--red-600); transform:translateY(-2px); }
.commerce-button-small { font-size:13px; padding:11px 17px; }
.commerce-button-dark { background:var(--commerce-dark); }
.commerce-button-dark:hover { background:#34343a; }
:is(.shopware-draft,.shopware-page) :is(a,button,summary):focus-visible { outline:3px solid #ff8b83; outline-offset:5px; }
:is(.shopware-draft,.shopware-page) section[id] { scroll-margin-top:100px; }
.commerce-hero { background:var(--commerce-dark); color:white; padding:154px 0 78px; overflow:hidden; position:relative; isolation:isolate; }
.commerce-hero:before { content:''; position:absolute; z-index:-1; inset:0; background:radial-gradient(ellipse at 92% 15%,rgba(226,35,26,.15),transparent 48%),linear-gradient(90deg,transparent 49.85%,rgba(255,255,255,.045) 50%,transparent 50.15%); }
.commerce-hero-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:62px; }
.commerce-eyebrow { font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--red); line-height:1.7; margin-bottom:20px; }
.commerce-hero .commerce-eyebrow { display:flex; align-items:center; gap:9px; color:#e8e5e4; letter-spacing:.06em; }
.commerce-dot { width:6px; height:6px; flex-shrink:0; border-radius:50%; background:var(--red); }
.commerce-hero h1 { font-size:clamp(42px,4.6vw,66px); line-height:1.06; color:#fff; margin:0 0 25px; }
.commerce-hero h1 > span:last-child { display:block; color:#ff6c61; }
.commerce-intro { color:#c3c1c6; font-size:16px; line-height:1.8; max-width:500px; }
.commerce-actions { display:flex; flex-wrap:wrap; align-items:center; gap:19px; margin-top:28px; }
.commerce-text-link { font-size:13px; color:#eeecef; text-decoration:none; line-height:1.6; }
.commerce-text-link span { margin-left:8px; }
.commerce-trust { display:flex; flex-wrap:wrap; gap:10px 18px; list-style:none; margin:29px 0 0; padding:0; color:#a8a6ae; font-size:11px; line-height:1.6; }
.commerce-trust li:before { content:'✓'; color:#ff6c61; margin-right:7px; }
.commerce-visual { position:relative; padding:18px 0 0; }
.commerce-window { border:1px solid #424047; border-radius:14px; overflow:hidden; box-shadow:0 28px 70px rgba(0,0,0,.35); transform:perspective(1300px) rotateY(-5deg) rotateX(1deg); }
.commerce-window-bar { display:flex; align-items:center; gap:12px; padding:13px 14px; background:#26252b; font-size:10px; color:#bfbdc5; }
.commerce-window-dots { color:#66636d; font-size:9px; white-space:nowrap; }
.commerce-live { margin-left:auto; color:#bee0cc; font-size:9px; white-space:nowrap; }
.commerce-window img { display:block; width:100%; height:360px; object-fit:cover; object-position:top; }
.commerce-system-card { position:relative; margin:-28px 22px 0 -16px; z-index:1; border:1px solid #44414a; border-radius:12px; background:#222127; padding:19px 20px; box-shadow:0 18px 35px rgba(0,0,0,.3); }
.commerce-card-label { display:block; color:#a4a1ab; font-size:10px; letter-spacing:.07em; text-transform:uppercase; margin-bottom:15px; }
.commerce-system-card div { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12px; }
.commerce-system-card div>span { color:#b9b6c0; }.commerce-system-card b { color:#ff6c61; }.commerce-system-card strong { font-family:var(--font-head); font-size:17px; color:#fff; white-space:nowrap; }
.commerce-visual-caption { margin:18px 0 0; font-size:10px; color:#929098; line-height:1.7; }
.commerce-specialisms { border-bottom:1px solid var(--line); background:#faf9f6; }
.commerce-specialisms .commerce-wrap { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding-top:24px; padding-bottom:24px; }
.commerce-specialisms span { color:var(--muted); font-size:11px; }.commerce-specialisms a { font:500 13px var(--font-head); color:var(--ink); text-decoration:none; }.commerce-specialisms b { color:var(--red); font-size:10px; margin-right:10px; }
.commerce-section { padding:94px 0; }.commerce-section-head { margin-bottom:40px; max-width:720px; }.commerce-section h2 { font-size:clamp(31px,3.4vw,45px); line-height:1.13; margin:0 0 18px; }.commerce-section-head>p:last-child { font-size:15px; line-height:1.8; color:var(--muted); }
.commerce-service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.commerce-service { border:1px solid var(--line); border-radius:14px; padding:28px 25px; background:#fff; }.commerce-number { color:var(--muted); font-size:10px; letter-spacing:.06em; text-transform:uppercase; }.commerce-service-icon { margin:27px 0; display:grid; place-items:center; width:46px; height:46px; border-radius:10px; background:var(--red-soft); color:var(--red); font:500 25px var(--font-head); }.commerce-service h3 { font-size:24px; line-height:1.25; margin-bottom:15px; }.commerce-service p { font-size:14px; line-height:1.8; color:var(--muted); }.commerce-service ul,.commerce-entry ul { list-style:none; padding:21px 0 0; margin-top:21px; border-top:1px solid var(--line); display:grid; gap:12px; font-size:12px; line-height:1.7; }.commerce-service li:before,.commerce-entry li:before { content:'↗'; color:var(--red); margin-right:10px; }.commerce-scope-note { margin-top:23px; font-size:12px; line-height:1.8; color:var(--muted); }
.commerce-proof { background:#f5f3ee; }.commerce-proof-grid { display:grid; grid-template-columns:1fr 1fr; gap:76px; align-items:center; }.commerce-proof-image { position:relative; padding:20px; border-radius:18px; background:#e6e3dc; }.commerce-proof-image img { width:100%; height:350px; object-fit:cover; object-position:top; display:block; border-radius:8px; box-shadow:0 12px 25px rgba(0,0,0,.08); }.commerce-proof-image>span { position:absolute; bottom:35px; right:6px; background:var(--commerce-dark); padding:10px 16px; color:white; font-size:10px; border-radius:6px; }.commerce-proof-copy>p:not(.commerce-eyebrow) { font-size:14px; line-height:1.8; color:var(--muted); }.commerce-proof dl { margin-top:25px; font-size:12px; }.commerce-proof dl>div { display:flex; gap:20px; justify-content:space-between; border-bottom:1px solid #dedbd3; padding:13px 0; }.commerce-proof dt { color:var(--muted); }.commerce-proof dd { margin:0; text-align:right; font-weight:500; }.commerce-link-dark { font-size:13px; font-weight:600; color:var(--ink); text-underline-offset:4px; }.commerce-proof-copy p.commerce-proof-note { margin-top:19px; font-size:10px; }
.commerce-entry-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }.commerce-entry { display:flex; flex-direction:column; align-items:flex-start; padding:36px; border:1px solid var(--line); border-radius:16px; }.commerce-entry-featured { background:#f8f6f2; border-color:#d6d0c4; }.commerce-tag { font-size:10px; color:#a3221b; font-weight:600; background:var(--red-soft); border-radius:5px; padding:6px 9px; }.commerce-tag-muted { color:var(--muted); background:var(--bg-2); }.commerce-entry h3 { font-size:27px; margin:21px 0 14px; }.commerce-entry p { font-size:14px; line-height:1.8; color:var(--muted); }.commerce-entry ul { width:100%; margin:22px 0 27px; }.commerce-entry .commerce-button,.commerce-entry>.commerce-link-dark { margin-top:auto; }.commerce-entry small { margin-top:18px; color:var(--muted); font-size:10px; line-height:1.8; }
.commerce-process { background:#faf9f6; }.commerce-process ol { display:grid; grid-template-columns:repeat(4,1fr); list-style:none; padding:0; gap:28px; }.commerce-process li { border-top:1px solid #dcd8cf; padding-top:19px; }.commerce-process li>span { color:var(--red); font:500 28px var(--font-head); }.commerce-process h3 { font-size:17px; margin:20px 0 12px; letter-spacing:-.02em; }.commerce-process li>p { font-size:13px; color:var(--muted); line-height:1.8; }
.commerce-contact { background:var(--commerce-dark); color:#fff; }.commerce-contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:85px; align-items:start; }.commerce-contact h2 { color:#fff; }.commerce-contact .commerce-eyebrow { color:#ff6c61; }.commerce-contact-intro { font-size:15px; line-height:1.8; color:#bbb8c2; max-width:420px; }.commerce-contact-person { display:flex; align-items:center; gap:17px; margin:36px 0; }.commerce-person-mark { display:grid; place-items:center; width:52px; height:52px; background:#2e2c33; border:1px solid #48444e; border-radius:12px; color:#fff; font:600 27px var(--font-head); }.commerce-contact-person strong,.commerce-contact-person div>span,.commerce-contact-person a { display:block; }.commerce-contact-person strong { font-size:15px; }.commerce-contact-person div>span { font-size:11px; color:#aaa7b1; margin:5px 0; }.commerce-contact-person a { font-size:12px; color:#f0edf2; text-decoration:none; }.commerce-pricing { max-width:380px; border-top:1px solid #38353d; padding-top:23px; font-size:13px; color:#bbb8c2; line-height:1.8; }.commerce-phone { display:inline-block; margin-top:26px; color:#fff; font-size:12px; text-underline-offset:5px; }
.commerce-form-card { background:#fff; border-radius:17px; padding:30px; color:var(--ink); }.commerce-form-card h3 { font-size:23px; line-height:1.3; margin-bottom:10px; }.commerce-form-card form>p { font-size:12px; color:var(--muted); line-height:1.8; }.commerce-intent { border:0; padding:0; margin:23px 0; }.commerce-intent legend { font-size:12px; font-weight:600; margin-bottom:12px; }.commerce-intent label { display:inline-flex; align-items:center; gap:7px; font-size:11px; margin:0 15px 8px 0; }.commerce-intent input { accent-color:var(--red); }.commerce-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.commerce-field-full { grid-column:1/-1; }.commerce-form-grid label { display:block; margin-bottom:7px; font-size:11px; font-weight:600; }.commerce-form-grid label span { font-weight:400; }.commerce-form-grid input,.commerce-form-grid textarea { display:block; width:100%; border:1px solid var(--line-2); border-radius:7px; padding:11px 12px; font:13px/1.5 var(--font-body); color:var(--ink); background:#fff; }.commerce-form-grid textarea { resize:vertical; }.commerce-form-grid input:focus,.commerce-form-grid textarea:focus { outline:2px solid var(--red); outline-offset:2px; }.commerce-form-card form>.commerce-button { width:100%; margin-top:22px; }.commerce-form-card p.commerce-form-draft { border-radius:6px; background:#f5f3ee; color:#59545e; padding:9px 11px; margin-top:13px; font-size:10px; }.commerce-form-card p.commerce-form-privacy { margin-top:13px; font-size:10px; }.commerce-form-privacy a { color:inherit; }.commerce-demo-result { padding:40px 0; }.commerce-demo-result>span { color:var(--red); font-size:38px; display:block; margin-bottom:20px; }.commerce-demo-result p { font-size:14px; line-height:1.8; color:var(--muted); margin:20px 0; }.commerce-demo-result:focus { outline:2px solid var(--red); outline-offset:5px; }
.commerce-faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 42px; }.commerce-faq details { border-bottom:1px solid var(--line); padding:21px 0; }.commerce-faq summary { cursor:pointer; font-size:14px; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:15px; line-height:1.6; }.commerce-faq summary::-webkit-details-marker { display:none; }.commerce-faq summary:after { content:'+'; color:var(--red); font-size:19px; }.commerce-faq details[open] summary:after { content:'−'; }.commerce-faq details p { font-size:13px; color:var(--muted); line-height:1.8; margin-top:17px; }
.commerce-footer { background:#f5f3ee; border-top:1px solid var(--line); padding:30px 0; }.commerce-footer>.commerce-wrap { display:flex; align-items:center; justify-content:space-between; gap:25px; flex-wrap:wrap; }.commerce-footer-brand { font:600 20px var(--font-head); color:var(--ink); text-decoration:none; }.commerce-footer-brand span { display:block; color:var(--muted); font:10px var(--font-body); margin-top:7px; }.commerce-footer .foot-legal { display:flex; flex-wrap:wrap; gap:13px; font-size:10px; color:var(--muted); }.commerce-footer .foot-legal a { color:inherit; }.commerce-footer .cc-settings { color:var(--muted); font-size:10px; }
@media(max-width:1000px) { .commerce-top nav { gap:18px; }.commerce-hero-grid { gap:32px; }.commerce-hero h1 { font-size:48px; }.commerce-window img { height:310px; }.commerce-window-bar { gap:8px; font-size:9px; }.commerce-live { display:none; }.commerce-system-card { margin-left:0; margin-right:0; }.commerce-proof-grid { gap:35px; }.commerce-contact-grid { gap:40px; }.commerce-service { padding:24px 20px; }.commerce-service h3 { font-size:21px; } }
@media(max-width:760px) { .commerce-wrap { padding:0 22px; }.commerce-top-inner { height:68px; gap:15px; }.commerce-top nav { display:none; }.commerce-logo img { width:116px; }.commerce-button-small { font-size:11px; padding:10px 12px; gap:8px; }.commerce-hero { padding:116px 0 54px; }.commerce-hero-grid,.commerce-proof-grid,.commerce-contact-grid { grid-template-columns:1fr; gap:42px; }.commerce-hero h1 { font-size:clamp(39px,8vw,55px); }.commerce-intro { font-size:15px; }.commerce-hero .commerce-eyebrow { font-size:10px; }.commerce-hero .commerce-actions { flex-direction:column; align-items:stretch; gap:19px; }.commerce-hero .commerce-text-link { text-align:center; }.commerce-visual { max-width:560px; width:100%; margin:auto; padding-top:0; }.commerce-window { transform:none; }.commerce-window img { height:300px; }.commerce-system-card div { font-size:10px; gap:8px; }.commerce-system-card strong { font-size:15px; }.commerce-specialisms .commerce-wrap { gap:14px 22px; padding-top:20px; padding-bottom:20px; }.commerce-specialisms span { width:100%; }.commerce-specialisms a { font-size:11px; }.commerce-specialisms b { margin-right:5px; }.commerce-section { padding:64px 0; }.commerce-section-head { margin-bottom:30px; }.commerce-service-grid { grid-template-columns:1fr; gap:16px; }.commerce-service-icon { margin:20px 0; }.commerce-service h3 br { display:none; }.commerce-service h3 { font-size:23px; }.commerce-entry-grid { grid-template-columns:1fr; }.commerce-entry { padding:27px; }.commerce-process ol { grid-template-columns:1fr 1fr; gap:28px 22px; }.commerce-proof-image img { height:280px; }.commerce-proof dl>div { gap:15px; }.commerce-faq-grid { grid-template-columns:1fr; }.commerce-form-card { padding:25px 22px; }.commerce-footer .foot-legal { line-height:1.8; } }
@media(max-width:380px) { .commerce-wrap { padding:0 18px; }.commerce-logo img { width:105px; }.commerce-top-inner { gap:10px; }.commerce-button-small { font-size:10px; }.commerce-form-grid { grid-template-columns:1fr; }.commerce-process ol { grid-template-columns:1fr; }.commerce-hero h1 { font-size:38px; }.commerce-hero .commerce-eyebrow { font-size:9px; }.commerce-system-card { padding:16px 12px; }.commerce-system-card strong { font-size:13px; }.commerce-system-card div { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { .commerce-top,.commerce-button { transition:none; }.commerce-button:hover { transform:none; } }
.commerce-service-link { color:inherit; text-decoration:none; }.commerce-service-link:hover { text-decoration:underline; }
.commerce-form-error { background:var(--red-soft); color:#a5221c; font-size:12px; padding:12px 14px; margin-top:16px; border-radius:7px; line-height:1.7; }
.commerce-form-card form>p.commerce-form-note { margin-top:13px; font-size:11px; }
.commerce-honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.commerce-form-card button:disabled { opacity:.65; cursor:wait; transform:none; }
.commerce-proof-copy dd span { display:inline; }
.shopware-page .commerce-contact-person div>span { display:block; }
.shopware-page .commerce-form-grid label>span { font-weight:600; }
.shopware-page #shopUrlHint { font-weight:400; }
.commerce-form-grid .commerce-callback { margin:4px 0; border:1px solid var(--line); padding:15px; border-radius:9px; background:#faf9f6; scroll-margin-top:100px; }
.commerce-callback legend { font-size:11px; font-weight:600; padding:0 5px; }
.commerce-form-grid .commerce-callback-toggle { display:flex; align-items:center; gap:9px; margin:0; cursor:pointer; }
.commerce-callback-toggle input { width:16px; height:16px; flex-shrink:0; padding:0; accent-color:var(--red); }
.commerce-callback-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:17px; }
.commerce-callback-fields[hidden] { display:none; }
.commerce-callback-fields p { color:var(--muted); font-size:11px; line-height:1.7; }
@media(max-width:760px) { .commerce-callback-fields { grid-template-columns:1fr; } }