/* MotionStudios shared shop CSS. Maintained canonical file; legacy selectors are compatibility adapters. */
/* VdG compatible layouts */
/* VSM15 design vocabulary, isolated for VdG JTL article fragments.
   Existing content and images are retained, without introducing V20 content. */
.vdg-shop{--ink:#17212b;--muted:#536170;--line:#d4dde4;--orange:#c45100;--orange-dark:#914000;--blue:#155a83;display:flow-root;clear:both;width:100%;min-width:0;margin:0;padding:18px 0;background:#eef2f5;color:var(--ink);font:16px/1.6 Arial,Helvetica,sans-serif;text-align:left;text-rendering:optimizeLegibility}
.vdg-shop *,.vdg-shop *::before,.vdg-shop *::after{box-sizing:border-box}
.vdg-shop .vdg-page{width:min(1220px,calc(100% - 32px));margin:0 auto}
.vdg-shop h1,.vdg-shop h2,.vdg-shop h3{font-family:inherit;line-height:1.18;font-weight:700;color:var(--ink);letter-spacing:-.025em;text-transform:none;margin:0 0 20px}
.vdg-shop h1{font-size:clamp(32px,4vw,51.2px)}


.vdg-shop p{font:inherit;margin:0 0 19px}
.vdg-shop ul{font:inherit;padding-left:24px;margin:0 0 22px}
.vdg-shop li{margin:0 0 8px;font:inherit}
.vdg-shop img{display:block;width:100%;max-width:100%;height:auto;margin:0;border:0}
.vdg-shop a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;overflow-wrap:anywhere}
.vdg-shop a:hover{color:var(--orange-dark)}
.vdg-shop a:focus-visible,.vdg-shop button:focus-visible,.vdg-shop [tabindex]:focus-visible{outline:3px solid #e96d0b;outline-offset:4px}
.vdg-shop .vdg-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);grid-template-areas:'copy media' 'note note';gap:24px 38px;}
.vdg-shop .vdg-hero-copy{grid-area:copy;min-width:0}
.vdg-shop .vdg-hero h1{font-size:clamp(30px,3.1vw,40px)}
.vdg-shop .vdg-hero-copy>p{font-size:15.68px;line-height:1.52;color:#354654}
.vdg-shop .vdg-hero-copy .vdg-claim{color:#a64700;font-size:23px;line-height:1.3;font-weight:700;margin:16px 0}
.vdg-shop .vdg-hero-media{grid-area:media;align-self:center;min-width:0}
.vdg-shop .vdg-hero-media img{border-radius:18px;border:1px solid #b9cad5;box-shadow:0 18px 38px #1c364629}
.vdg-shop .vdg-hero-note{grid-area:note;padding:18px 20px;border-radius:12px;background:#f0f7ebeb;color:#31422e;font-size:15px}
.vdg-shop .vdg-section{margin-top:38px;padding:clamp(26px,3.7vw,42px);border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 12px 30px #1828340d}
.vdg-shop .vdg-page>.vdg-section:first-child{margin-top:0}
.vdg-shop .vdg-section-head{margin-bottom:24px}
.vdg-shop .vdg-section-pair{border:0;padding:0;background:none;box-shadow:none}
.vdg-shop .vdg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:start}
.vdg-shop .vdg-card{min-width:0;overflow:hidden;background:#fff;border:1px solid var(--line);}

.vdg-shop .vdg-card p{color:var(--muted)}
.vdg-shop .vdg-flow{display:flow-root}
.vdg-shop .vdg-flow+.vdg-flow{margin-top:24px}
.vdg-shop .vdg-flow>.vdg-grid{margin:25px 0}
.vdg-shop .vdg-flow>img,.vdg-shop .vdg-card>img{border-radius:12px;margin:0 0 22px}
.vdg-shop .vdg-flow>h2{margin-bottom:24px}
.vdg-shop .vdg-section .vdg-flow:last-child>:last-child,.vdg-shop .vdg-card>:last-child,.vdg-shop .vdg-hero-note .vdg-flow>:last-child{margin-bottom:0}
.vdg-shop .vdg-card>p:has(+img){margin-bottom:15px}
.vdg-shop .vdg-card>img+p,.vdg-shop .vdg-video+p{margin-top:21px}
.vdg-shop .vdg-flow>a:has(img){display:block;margin:0 0 20px}
.vdg-shop .vdg-flow>a:has(img[src$="/vdg_doku.jpg"]){max-width:240px;float:left;margin:0 26px 20px 0}
.vdg-shop .vdg-short{background:linear-gradient(135deg,#fffaf5,#f0f6fa)}
.vdg-shop .vdg-short h2{font-size:27px}
.vdg-shop .vdg-short p:last-child{margin-bottom:0}
.vdg-shop .u-cta h3{font-size:30px}
.vdg-shop .u-cta-links{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}
.vdg-shop .u-cta-links a{display:inline-flex;align-items:center;min-height:46px;border:1px solid #b9cbd7;padding:10px 16px;border-radius:9px;background:#f1f7fa;font-size:15px;font-weight:700;line-height:1.4;text-decoration:none}
.vdg-shop .u-cta-links a:hover{background:#e6f0f7}
.vdg-shop .u-cta-links:first-of-type a:first-child{background:var(--orange);border-color:var(--orange);color:#fff}
.vdg-shop hr{border:0;border-top:1px solid var(--line);margin:25px 0}
.vdg-shop .vdg-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.vdg-shop .vdg-gallery-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;margin:0;background:#fff;box-shadow:0 11px 28px #16233012}
.vdg-shop .vdg-gallery-card>a{display:block}
.vdg-shop .vdg-gallery-card>a>img{aspect-ratio:16/9;object-fit:contain;background:#edf2f5}
.vdg-shop .vdg-video{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;border:1px solid var(--line);border-radius:13px;background:#18242c;margin-bottom:20px}
.vdg-shop .vdg-video-trigger{display:block;position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;font:inherit}
.vdg-shop .vdg-video-trigger img{width:100%;height:100%;object-fit:contain}
.vdg-shop .vdg-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vdg-shop .vdg-play{display:flex;align-items:center;justify-content:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;background:#c45100ed;color:#fff;border:2px solid #ffffffcf;font-size:28px;padding-left:4px;box-shadow:0 5px 20px #0007;pointer-events:none}
.vdg-shop .vdg-video-trigger:hover .vdg-play{background:#9f4200}
.vdg-shop .vdg-gallery .vdg-video{margin:0;border:0;border-radius:0}
.vdg-shop .vdg-comparison{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line)}
.vdg-shop .vdg-comparison-layer{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--position)) 0 0)}
.vdg-shop .vdg-comparison-layer img{width:100%;height:100%;object-fit:contain}
.vdg-shop .vdg-comparison .pixelated{image-rendering:pixelated}
.vdg-shop .vdg-comparison-line{position:absolute;top:0;bottom:0;left:var(--position);width:3px;transform:translateX(-50%);background:#fff;box-shadow:0 0 5px #0008;pointer-events:none}
.vdg-shop .vdg-comparison-line::after{content:'\21d4 ';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:var(--orange);border:2px solid white;color:white;font:bold 28px Arial;box-shadow:0 4px 14px #0005}
.vdg-shop .vdg-comparison-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:2}
.vdg-shop .vdg-comparison:has(input:focus-visible){outline:3px solid var(--orange);outline-offset:4px}
.vdg-shop .vdg-table-scroll{overflow:auto;border:1px solid var(--line);border-radius:15px;margin-top:24px}
.vdg-shop .vdg-data-table{width:100%;min-width:680px;border-collapse:collapse;margin:0;font:15px/1.5 Arial,Helvetica,sans-serif}
.vdg-shop .vdg-data-table td,.vdg-shop .vdg-data-table th{border:0;border-bottom:1px solid var(--line);padding:12px 15px;text-align:left;font-size:inherit;line-height:inherit;vertical-align:top}
.vdg-shop .vdg-data-table th{background:#154a69;color:#fff}
.vdg-shop .vdg-data-table tr:nth-child(2n){background:#f0f6f9}
.vdg-shop .vdg-data-table td:not(:first-child){text-align:center}
@media(max-width:850px){.vdg-shop .vdg-hero{grid-template-columns:1fr;grid-template-areas:'copy' 'media' 'note'}.vdg-shop .vdg-grid{grid-template-columns:1fr}.vdg-shop .vdg-hero-media{max-width:660px;width:100%;justify-self:center}}
@media(max-width:560px){.vdg-shop{padding:12px 0}.vdg-shop .vdg-page{width:calc(100% - 20px)}.vdg-shop .vdg-hero,.vdg-shop .vdg-section:not(.vdg-section-pair){padding:24px 18px;border-radius:15px}.vdg-shop .vdg-gallery{grid-template-columns:1fr;gap:20px}.vdg-shop .vdg-section{margin-top:24px}.vdg-shop .u-cta-links{flex-direction:column}.vdg-shop .u-cta-links a{width:100%}.vdg-shop .vdg-flow>a:has(img[src$="/vdg_doku.jpg"]){float:none;max-width:200px;margin:0 0 20px}.vdg-shop h1{font-size:32px}.vdg-shop .vdg-play{width:55px;height:55px;font-size:23px}}

/* Feature comparison: row labels are not column headers. */
.vdg-shop .vdg-data-table th[scope="row"]{background:transparent;color:var(--ink);font-weight:400;width:58%}

/* Edition comparison: classes are independent of translated cell text. */
.vdg-shop .vdg-data-table td.vdg-value-yes{background:#eef7ed;color:#305b32}
.vdg-shop .vdg-data-table td.vdg-value-no{background:#fbeeee;color:#803e3e}
.vdg-shop .vdg-data-table td.vdg-value-upgrade{background:#eaf3fa;color:#155a83;font-weight:700}

/* Edition choices above and below the comparison table. */
.vdg-shop .vdg-edition-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:28px 0}
.vdg-shop .vdg-edition-card{display:flex;flex-direction:column;min-width:0;padding:22px;border:1px solid var(--line);border-radius:16px;background:#f8fbfd;text-align:center}
.vdg-shop .vdg-product-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;max-width:220px;aspect-ratio:4/5;margin:0 auto 20px;padding:20px;border:1px dashed #a7bac8;border-radius:10px;background:linear-gradient(145deg,#edf4f8,#fff8ef);color:var(--blue)}
.vdg-shop .vdg-product-placeholder b{display:block;font-size:48px;line-height:1.1}
.vdg-shop .vdg-product-placeholder strong{font-size:22px}
.vdg-shop .vdg-product-placeholder small{color:var(--muted);font-size:12px}
.vdg-shop .vdg-edition-card h3{font-size:20px;line-height:1.3;margin:0 0 12px}
.vdg-shop .vdg-edition-card p{font-size:15px;color:var(--muted);margin:0 0 20px}
.vdg-shop .vdg-edition-link{display:block;margin-top:auto;padding:10px 12px;border-radius:8px;background:var(--orange);color:#fff;text-decoration:none;font-weight:700}
.vdg-shop .vdg-edition-link:hover{background:var(--orange-dark);color:#fff}
@media(max-width:700px){.vdg-shop .vdg-edition-grid{grid-template-columns:1fr}.vdg-shop .vdg-product-placeholder{max-width:180px}}

.vdg-shop .vdg-edition-card .vdg-edition-tagline{color:var(--blue);font-weight:700;line-height:1.4;margin-bottom:14px}

.vdg-shop .vdg-product-image{display:flex;align-items:center;justify-content:center;width:100%;max-width:220px;aspect-ratio:4/5;margin:0 auto 20px}
.vdg-shop .vdg-product-image img{width:100%;height:100%;object-fit:contain}
@media(max-width:700px){.vdg-shop .vdg-product-image{max-width:180px}}

/* A restrained recommendation and a trial option for the German comparison. */
.vdg-shop .vdg-edition-card.vdg-edition-recommended{border:2px solid #6d99b4;background:#f0f7fb;box-shadow:0 5px 18px #155a8312}
.vdg-shop .vdg-edition-card .vdg-edition-recommendation{margin:0 0 14px;padding:7px 10px;border-radius:6px;background:#dcecf5;color:#155a83;font-size:13px;font-weight:700;line-height:1.4}
.vdg-shop .vdg-comparison-demo{padding:22px 24px;margin:8px 0 24px;border:1px solid var(--line);border-radius:12px;background:#f4f8fb;text-align:center}
.vdg-shop .vdg-comparison-demo p{margin:0 0 14px}
.vdg-shop .vdg-comparison-demo a{display:inline-block;padding:10px 18px;border:1px solid #9ab6c8;border-radius:8px;background:#fff;font-weight:700;text-decoration:none}
.vdg-shop .vdg-comparison-demo a:hover{background:#e6f0f7}

.vdg-shop .vdg-delivery-info{margin-top:28px}
.vdg-shop .vdg-delivery-bluray{border:1px solid #dfb5b5;border-left:5px solid #a51f26;border-radius:10px;background:#fff3f3;padding:22px;margin:20px 0}
.vdg-shop .vdg-delivery-bluray h3,.vdg-shop .vdg-delivery-bluray p{color:#a51f26}
.vdg-shop .vdg-delivery-bluray p:last-child{margin-bottom:0}
.vdg-shop .vdg-delivery-download{border:1px solid var(--line);border-radius:10px;background:#f4f8fb;padding:22px;margin:20px 0}
.vdg-shop .vdg-delivery-download p{margin-bottom:0}

.vdg-shop .vdg-delivery-download p+p{margin-top:14px}

/* Keep words intact; wrap inside a word only to prevent overflow.
   Scoped to the product fragments to override shop theme typography. */
:is(.vdg-shop,.vsm-shop-root,.vsm15-extra-page,.vsm15-short,.vdg-category),
:is(.vdg-shop,.vsm-shop-root,.vsm15-extra-page,.vsm15-short,.vdg-category) *{
 -webkit-hyphens:none!important;
 -ms-hyphens:none!important;
 hyphens:none!important;
 word-break:normal!important;
 overflow-wrap:break-word!important;
 word-wrap:break-word!important;
}


/* Route animation feature components */
/* Additive V20 news. Existing stage-one content and styling stay unchanged. */
.vdg-shop .vdg-news-video{margin-bottom:0}
.vdg-shop .vdg-news-video video{display:block;width:100%;height:100%;object-fit:contain;background:#18242c}
.vdg-shop .vdg-news-video-error{position:absolute;inset:auto 0 0;margin:0;padding:14px;background:#fff;color:#17212b;font-size:14px}
.vdg-shop .vdg-news{margin-top:38px;scroll-margin-top:20px}
.vdg-shop .vdg-news-intro{padding:32px 38px;border:1px solid #cfdae2;border-left:6px solid var(--orange);border-radius:18px;background:linear-gradient(120deg,#fff8f0,#f2f8fc);box-shadow:0 12px 30px #1828340d}
.vdg-shop .vdg-news-kicker{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--blue);margin-bottom:12px}
.vdg-shop .vdg-news-badge{display:inline-block;vertical-align:middle;background:var(--orange);color:#fff;font:700 13px/1 Arial,Helvetica,sans-serif;letter-spacing:.03em;padding:7px 10px;border-radius:6px;margin:0 10px 5px 0}
.vdg-shop .vdg-news-intro h2{font-size:clamp(28px,3vw,36px);margin-bottom:16px}
.vdg-shop .vdg-news-intro>p:last-of-type{font-size:14px;color:var(--muted);margin-bottom:0}
.vdg-shop .vdg-news-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.vdg-shop .vdg-news-nav a{display:inline-flex;align-items:center;min-height:42px;padding:8px 14px;border:1px solid #b7cbd8;border-radius:8px;background:#fff;text-decoration:none;font-size:14px;font-weight:700}
.vdg-shop .vdg-news-nav a:hover{background:#e6f0f7}
.vdg-shop .vdg-news-lead{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:30px;align-items:center;margin-top:26px;padding:30px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 11px 28px #16233012;scroll-margin-top:20px}
.vdg-shop .vdg-news-lead h2{font-size:28px;line-height:1.24}
.vdg-shop .vdg-news-lead p,.vdg-shop .vdg-news-card p{color:var(--muted)}
.vdg-shop .vdg-news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:26px}
.vdg-shop .vdg-news-card{min-width:0;display:flex;flex-direction:column;padding:27px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 11px 28px #16233012;scroll-margin-top:20px}
.vdg-shop .vdg-news-card h2{font-size:25px;line-height:1.24}
.vdg-shop .vdg-news-card .vdg-news-media{margin-top:auto;padding-top:4px}
.vdg-shop .vdg-news-benefit{font-weight:700;color:var(--blue)!important}
.vdg-shop .vdg-news-note{font-size:13px;line-height:1.5;color:var(--muted);margin:12px 0 0}
.vdg-shop .vdg-news-media{min-width:0;margin:0}
.vdg-shop .vdg-news-media figcaption{color:var(--muted);font-size:13px;line-height:1.5;margin-top:10px}
.vdg-shop .vdg-news-placeholder{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;width:100%;max-width:100%;min-width:0;aspect-ratio:16/9;min-height:220px;overflow:hidden;border:1px solid #bdccd6;border-radius:13px;background:linear-gradient(145deg,#edf3f7,#dce8ef);text-align:center;padding:28px 22px}
.vdg-shop .vdg-news-placeholder--video{background:linear-gradient(135deg,#143a50,#1c526e);border-color:#173d54;color:#fff}
.vdg-shop .vdg-news-placeholder svg{width:56px;height:56px;flex-shrink:0;color:#53748b}
.vdg-shop .vdg-news-placeholder--video svg{color:#fff}
.vdg-shop .vdg-news-placeholder-type{position:absolute;top:14px;left:14px;font-size:12px;line-height:1.2;font-weight:700;border-radius:5px;background:#fff;color:#263f50;padding:6px 8px}
.vdg-shop .vdg-news-placeholder-title{display:block;max-width:360px;font-size:17px;font-weight:700;line-height:1.35}
.vdg-shop .vdg-news-placeholder-caption{font-size:12px;color:#d2e2ed}
.vdg-shop .vdg-news-placeholder--image .vdg-news-placeholder-caption{color:#526b7c}
.vdg-shop .vdg-news-comparison{display:block;padding:0;background:#d8e7f0}
.vdg-shop .vdg-news-compare-side{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:flex-end;padding:18px;background:linear-gradient(135deg,#edf3f7,#d8e7f0)}
.vdg-shop .vdg-news-compare-side--left{justify-content:flex-start;background:linear-gradient(135deg,#f5efe6,#ded9cf)}
.vdg-shop .vdg-news-compare-side span{font-size:12px;line-height:1.3;font-weight:700;max-width:43%;text-align:inherit;padding:7px 8px;background:#ffffffeb;border-radius:5px;color:#314859}
.vdg-shop .vdg-news-compare-caption{position:absolute;bottom:19px;left:10px;right:10px;display:flex;flex-direction:column;gap:5px;align-items:center;color:#3d5261;pointer-events:none}
.vdg-shop .vdg-news-compare-caption strong{font-size:15px;line-height:1.3}
.vdg-shop .vdg-news-compare-caption span{font-size:12px}
.vdg-shop .vdg-news-comparison .vdg-comparison-layer{z-index:1}
.vdg-shop .vdg-news-comparison .vdg-comparison-line,.vdg-shop .vdg-news-compare-caption{z-index:2}
.vdg-shop .vdg-news-comparison .vdg-comparison-range{z-index:3}
.vdg-shop .vdg-news-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:26px}
.vdg-shop .vdg-news-detail{padding:24px 27px;border:1px solid var(--line);border-radius:15px;background:#f8fbfd}
.vdg-shop .vdg-news-detail h2{font-size:21px;line-height:1.3;margin-bottom:14px}
.vdg-shop .vdg-news-detail p{font-size:15px;color:var(--muted);margin:0}
.vdg-shop .vdg-news-tail{display:flex;align-items:center;gap:20px;margin:34px 0 0;color:var(--blue);font-size:15px;font-weight:700;scroll-margin-top:20px}
.vdg-shop .vdg-news-tail::before,.vdg-shop .vdg-news-tail::after{content:'';height:1px;background:var(--line);flex:1}
@media(max-width:850px){.vdg-shop .vdg-news-lead{grid-template-columns:1fr}.vdg-shop .vdg-news-grid,.vdg-shop .vdg-news-details{grid-template-columns:1fr}.vdg-shop .vdg-news-placeholder{min-height:220px}.vdg-shop .vdg-news-card .vdg-news-media{margin-top:0}}
@media(max-width:560px){.vdg-shop .vdg-news{margin-top:24px}.vdg-shop .vdg-news-intro{padding:24px 18px}.vdg-shop .vdg-news-lead,.vdg-shop .vdg-news-card{padding:22px 18px}.vdg-shop .vdg-news-lead{gap:18px}.vdg-shop .vdg-news-lead h2{font-size:25px}.vdg-shop .vdg-news-placeholder{aspect-ratio:auto;min-height:230px;padding:48px 18px 20px}.vdg-shop .vdg-news-placeholder svg{width:44px;height:44px}.vdg-shop .vdg-news-placeholder-title{font-size:15px}.vdg-shop .vdg-news-placeholder-type{top:10px;left:10px}.vdg-shop .vdg-news-comparison{padding:0}.vdg-shop .vdg-news-compare-side{padding:12px}.vdg-shop .vdg-news-details{gap:16px}.vdg-shop .vdg-news-detail{padding:22px 18px}.vdg-shop .vdg-news-nav{gap:8px}.vdg-shop .vdg-news-nav a{font-size:13px;padding:8px 10px}}

.vdg-shop .vdg-news-wide{min-width:0;margin-top:26px;padding:30px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 11px 28px #16233012;scroll-margin-top:20px}
.vdg-shop .vdg-news-wide h2{font-size:28px;line-height:1.24}
.vdg-shop .vdg-news-wide p{color:var(--muted)}
.vdg-shop .vdg-news-wide .vdg-news-media{margin-top:24px}
@media(max-width:560px){.vdg-shop .vdg-news-wide{padding:22px 18px}.vdg-shop .vdg-news-wide h2{font-size:25px}}

.vdg-shop .vdg-news-detail--wide{grid-column:1/-1}

.vdg-shop .vdg-news-state{position:absolute;bottom:16px;z-index:1;max-width:calc(50% - 28px);padding:8px 12px;border-radius:6px;background:#17212be6;color:#fff;font-size:14px;font-weight:700;line-height:1.35;pointer-events:none}
.vdg-shop .vdg-news-state--left{left:16px;text-align:left}
.vdg-shop .vdg-news-state--right{right:16px;text-align:right}
@media(max-width:560px){.vdg-shop .vdg-news-state{bottom:8px;max-width:calc(50% - 16px);padding:6px 8px;font-size:11px}.vdg-shop .vdg-news-state--left{left:8px}.vdg-shop .vdg-news-state--right{right:8px}}

.vdg-shop .vdg-news-video-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media(max-width:560px){.vdg-shop .vdg-news-video-comparison{grid-template-columns:1fr}}

/* Map page compatible layouts */
body.vsm-study {
  margin: 0;
  background: #eef2f5;
  color: #17212b;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

.vsm-study *,
.vsm-study *::before,
.vsm-study *::after {
  box-sizing: border-box;
}

.vsm-study img {
  display: block;
  max-width: 100%;
}

.vsm-study a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.vsm-study a:focus-visible {
  outline: 3px solid #e96d0b;
  outline-offset: 4px;
}

.vsm-study .skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #ffffff;
  color: #17212b;
  transform: translateY(-150%);
}

.vsm-study .skip-link:focus {
  transform: translateY(0);
}

.vsm-study .study-bar {
  width: min(1220px, calc(100% - 32px));
  margin: 16px auto 0;
  padding: 12px 16px;
  border: 1px solid #cbd5dd;
  border-radius: 12px;
  background: #ffffff;
  color: #475563;
  font-size: 13.76px;
  line-height: 1.45;
}

.vsm-study .study-bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
}

.vsm-study .study-label {
  color: #914000;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.vsm-study .study-switch {
  font-weight: 800;
}

.vsm-study .page {
  --orange: #d26008;
  --orange-dark: #914000;
  --orange-soft: #fff1e5;
  --blue: #155a83;
  --blue-dark: #0f3d59;
  --blue-soft: #eaf4f9;
  --ink: #17212b;
  --muted: #536170;
  --line: #d4dde4;
  --surface: #f5f7f9;
  --white: #ffffff;
  --dark: #161b20;
  width: min(1220px, calc(100% - 32px));
  margin: 18px auto 0;
  overflow: hidden;
}

.vsm-study .page h1,
.vsm-study .page h2,
.vsm-study .page h3,
.vsm-study .page h4,
.vsm-study .page p,
.vsm-study .page ul,
.vsm-study .page figure {
  margin-top: 0;
}

.vsm-study .page h1,
.vsm-study .page h2,
.vsm-study .page h3,
.vsm-study .page h4 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.18;
}

.vsm-study .page h1 {
  margin-bottom: 16px;
  font-size: clamp(37.6px, 5.4vw, 68px);
  letter-spacing: -0.045em;
}





.vsm-study .page h4 {
  margin-bottom: 8px;
  font-size: 16.8px;
}

.vsm-study .page p {
  margin-bottom: 18px;
}

.vsm-study .eyebrow {
  display: inline-block;
  margin-bottom: 13px;
  color: var(--orange-dark);
  font-size: 13.12px;
  font-weight: 800;
  letter-spacing: 0.115em;
  text-transform: uppercase;
}

.vsm-study .lead {
  max-width: 62ch;
  color: #344250;
  font-size: 17.28px;
  font-weight: 400;
}

.vsm-study .section-head {
  max-width: 820px;
  margin-bottom: 34px;
}

.vsm-study .section-head p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 16.8px;
}

.vsm-study .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0;
}

.vsm-study .button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border: 2px solid transparent;
  border-radius: 8px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.vsm-study .button-primary {
  background: var(--orange);
  color: #ffffff;
}

.vsm-study .button-primary:hover {
  background: #e87318;
}

.vsm-study .button-secondary {
  border-color: #7c8a96;
  background: transparent;
  color: inherit;
}

.vsm-study .button-secondary:hover {
  border-color: currentColor;
}

.vsm-study .hero-facts,
.vsm-study .check-list,
.vsm-study .capability-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vsm-study .hero-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 22px;
}

.vsm-study .hero-facts li,
.vsm-study .check-list li,
.vsm-study .capability-list li {
  position: relative;
  padding-left: 28px;
}

.vsm-study .hero-facts li {
  font-weight: 700;
}

.vsm-study .hero-facts li::before,
.vsm-study .check-list li::before {
  position: absolute;
  left: 0;
  color: #93c83e;
  content: "\2713";
  font-weight: 900;
}

.vsm-study .capability-list li::before {
  position: absolute;
  top: 0.08em;
  left: 0;
  color: var(--orange);
  content: "\25C6";
  font-size: 0.7em;
}

.vsm-study .hero-note {
  margin: 26px 0 0;
  padding: 15px 17px;
  border-left: 5px solid #9bcf46;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 15.36px;
}

.vsm-study .hero-note p {
  margin: 0;
}

.vsm-study .hero-note a {
  color: #ffd09d;
  font-weight: 800;
}

.vsm-study .visual {
  min-width: 0;
  margin: 0;
}

.vsm-study .media-stage {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1b242b;
}

.vsm-study .media-stage::before {
  content: none;
  background-image: none;
}

.vsm-study .media-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vsm-study .media-stage.cover img {
  object-fit: cover;
}

.vsm-study .visual figcaption {
  padding: 11px 14px;
  background: #ffffff;
  color: #586675;
  font-size: 13.12px;
  line-height: 1.45;
}

.vsm-study .jumpnav {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 24px 0 64px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
}

.vsm-study .jumpnav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid #cbd5dd;
  border-radius: 999px;
  color: #263441;
  font-weight: 700;
  text-decoration: none;
}

.vsm-study .jumpnav a:hover {
  border-color: var(--orange);
  color: var(--orange-dark);
}

.vsm-study .section,
.vsm-study .pro-section,
.vsm-study .companion,
.vsm-study .related,
.vsm-study .closing {
  scroll-margin-top: 18px;
}

.vsm-study .section {
  margin-bottom: 92px;
}

.vsm-study .feature-row {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  gap: clamp(34px, 5vw, 66px);
  align-items: center;
}

.vsm-study .feature-row.reverse {
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
}

.vsm-study .feature-row.reverse .feature-copy {
  grid-column: 2;
  grid-row: 1;
}

.vsm-study .feature-row.reverse .visual,
.vsm-study .feature-row.reverse .comparison-media {
  grid-column: 1;
  grid-row: 1;
}

.vsm-study .feature-copy p:last-child,
.vsm-study .feature-copy ul:last-child {
  margin-bottom: 0;
}

.vsm-study .capability-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin-top: 24px;
}

.vsm-study .pro-section {
  margin-bottom: 92px;
  padding: clamp(34px, 5.2vw, 64px);
  background: var(--dark);
  color: #eef2f5;
}

.vsm-study .pro-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(380px, 1.16fr);
  gap: clamp(32px, 5vw, 62px);
  align-items: center;
}

.vsm-study .pro-section h2,
.vsm-study .pro-section h3 {
  color: #ffffff;
}

.vsm-study .pro-section p {
  color: #dce3e8;
}

.vsm-study .pro-section .eyebrow {
  color: #ffbd7e;
}

.vsm-study .pro-section .visual {
  border: 1px solid #46515b;
}

.vsm-study .pro-section .visual figcaption {
  background: #242b31;
  color: #dce3e8;
}

.vsm-study .pro-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin-top: 30px;
}

.vsm-study .pro-benefits article {
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
}

.vsm-study .pro-benefits p {
  margin-bottom: 0;
  font-size: 15.04px;
}

.vsm-study .result-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.vsm-study .result-card {
  overflow: hidden;
  background: #ffffff;
}

.vsm-study .result-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.vsm-study .result-copy {
  padding: 20px;
}

.vsm-study .result-copy h3 {
  font-size: 16.96px;
}

.vsm-study .result-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 14.56px;
  line-height: 1.5;
}

.vsm-study .workflow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.vsm-study .workflow-card {
  overflow: hidden;
  background: #ffffff;
}

.vsm-study .workflow-copy {
  padding: 26px;
}

.vsm-study .step {
  display: inline-grid;
  width: 42px;
  height: 42px;
  margin-bottom: 15px;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #ffffff;
  font-weight: 900;
}

.vsm-study .workflow-copy p {
  margin-bottom: 0;
  color: var(--muted);
}

.vsm-study .preset-band {
  margin-bottom: 52px;
}

.vsm-study .preset-band .feature-copy {
  margin-bottom: 24px;
}

.vsm-study .preset-band .media-stage {
  aspect-ratio: 1050 / 336;
}

.vsm-study .comparison-block {
  margin-bottom: 54px;
}

.vsm-study .comparison-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.vsm-study .comparison-media .visual {
  overflow: hidden;
}

.vsm-study .comparison-media figcaption {
  text-align: center;
}

.vsm-study .detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.vsm-study .detail-card {
  overflow: hidden;
  background: #ffffff;
}

.vsm-study .detail-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.vsm-study .detail-copy {
  padding: 18px;
}

.vsm-study .detail-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 14.4px;
  line-height: 1.5;
}

.vsm-study .companion {
  margin-bottom: 92px;
  padding: clamp(34px, 5vw, 62px);
  background: linear-gradient(135deg, #123f5c, #0b283b);
  color: #eef6fa;
}

.vsm-study .companion h2,
.vsm-study .companion h3 {
  color: #ffffff;
}

.vsm-study .companion .eyebrow {
  color: #a9d9f4;
}

.vsm-study .companion .section-head p,
.vsm-study .companion p {
  color: #e4f0f6;
}

.vsm-study .companion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.vsm-study .companion-card {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

.vsm-study .companion-copy {
  padding: 25px;
}

.vsm-study .companion-copy p:last-child {
  margin-bottom: 0;
}

.vsm-study .companion-copy a {
  color: #ffd09d;
  font-weight: 800;
}

.vsm-study .notice {
  margin-top: 18px;
  padding: 13px 15px;
  border-left: 4px solid #ffb86e;
  background: rgba(0, 0, 0, 0.18);
  font-size: 14.4px;
}

.vsm-study .related {
  margin-bottom: 82px;
}

.vsm-study .related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.vsm-study .related-card {
  display: flex;
  min-height: 220px;
  flex-direction: column;
  padding: 25px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink);
  text-decoration: none;
}

.vsm-study .related-card span {
  margin-bottom: 8px;
  color: var(--orange-dark);
  font-size: 12.48px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.vsm-study .related-card strong {
  margin-bottom: 10px;
  font-size: 20.48px;
}

.vsm-study .related-card small {
  color: var(--muted);
  font-size: 15.04px;
  line-height: 1.55;
}

.vsm-study .related-card b {
  margin-top: auto;
  padding-top: 20px;
  color: var(--blue);
}

.vsm-study .related-card:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
}

.vsm-study .closing {
  margin-bottom: 40px;
  padding: clamp(36px, 6vw, 70px);
  background: linear-gradient(135deg, #fff0e2, #ecf6fb);
  text-align: center;
}

.vsm-study .closing p {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
  color: #3f4d59;
}

.vsm-study .closing p:last-child {
  margin-bottom: 0;
  color: var(--orange-dark);
  font-weight: 800;
}

.vsm-study .study-footer {
  width: min(1220px, calc(100% - 32px));
  margin: 0 auto;
  padding: 0 0 34px;
  color: #5c6975;
  font-size: 13.12px;
  text-align: center;
}

/* Variante A: aktueller, gerahmter MotionStudios-Aufbau */
.vsm-current .page {
  overflow: visible;
}

.vsm-current .hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
  grid-template-areas:
    "copy media"
    "facts facts"
    "note note";
  gap: clamp(34px, 5vw, 62px);
  align-items: start;
  padding: clamp(36px, 5.4vw, 66px);
  overflow: hidden;
  border: 1px solid #3d4853;
  border-radius: 28px;
  background:
    radial-gradient(circle at 15% 12%, rgba(210, 96, 8, 0.31), transparent 31%),
    linear-gradient(135deg, #111920, #1d2b36 58%, #11181e);
  color: #f1f4f6;
}

.vsm-current .hero h1 {
  color: #ffffff;
  font-size: clamp(37.6px, 4.6vw, 58.4px);
}

.vsm-current .hero-copy {
  grid-area: copy;
}

.vsm-current .hero .eyebrow {
  padding: 7px 13px;
  border: 1px solid rgba(255, 195, 137, 0.5);
  border-radius: 999px;
  background: rgba(210, 96, 8, 0.24);
  color: #ffd09d;
}

.vsm-current .hero .hero-claim {
  margin-bottom: 24px;
  color: #ffbd7e;
  font-size: clamp(19.52px, 2.2vw, 24.8px);
  font-weight: 800;
  line-height: 1.35;
}

.vsm-current .hero .lead,
.vsm-current .hero-facts {
  color: #edf2f5;
}

.vsm-current .hero-visual {
  grid-area: media;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.38);
}

.vsm-current .hero-visual figcaption {
  background: #252d34;
  color: #dde5ea;
}

.vsm-current .button-secondary {
  border-color: rgba(255, 255, 255, 0.58);
  color: #ffffff;
}

.vsm-current .hero > .hero-facts {
  grid-area: facts;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.vsm-current .hero > .hero-note {
  grid-area: note;
  margin-top: -18px;
}

.vsm-current .pro-section,
.vsm-current .companion,
.vsm-current .closing,
.vsm-current .surface-panel {
  border-radius: 26px;
}

.vsm-current .pro-section {
  box-shadow: 0 20px 44px rgba(22, 31, 39, 0.16);
}

.vsm-current .pro-benefits article,
.vsm-current .result-card,
.vsm-current .workflow-card,
.vsm-current .detail-card,
.vsm-current .companion-card,
.vsm-current .related-card {
  border-radius: 17px;
}

.vsm-current .surface-panel {
  padding: clamp(30px, 4.8vw, 54px);
  border: 1px solid var(--line);
  background: #f8fafb;
}

.vsm-current .surface-panel .visual,
.vsm-current .result-card,
.vsm-current .workflow-card,
.vsm-current .detail-card {
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(25, 42, 55, 0.08);
}

.vsm-current .preset-band {
  padding: clamp(28px, 4.5vw, 48px);
  border: 1px solid #e0c5ad;
  border-radius: 24px;
  background: #fff7ef;
}

.vsm-current .comparison-block {
  padding: clamp(28px, 4.5vw, 48px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #ffffff;
}

.vsm-current .comparison-media .visual {
  border: 1px solid var(--line);
  border-radius: 14px;
}

.vsm-current .related-card {
  box-shadow: 0 10px 26px rgba(22, 35, 48, 0.07);
  transition: transform 160ms ease, border-color 160ms ease;
}

@media (max-width: 1050px) {

  .vsm-study .feature-row.reverse .feature-copy,
  .vsm-study .feature-row.reverse .visual,
  .vsm-study .feature-row.reverse .comparison-media {
    grid-column: 1;
  }

  .vsm-study .feature-row.reverse .feature-copy {
    grid-row: 1;
  }

  .vsm-study .feature-row.reverse .visual,
  .vsm-study .feature-row.reverse .comparison-media {
    grid-row: 2;
  }

  .vsm-study .hero-copy,
  .vsm-study .feature-copy,
  .vsm-study .section-head {
    max-width: 760px;
  }

  .vsm-study .pro-layout .visual {
    width: min(760px, 100%);
  }

  .vsm-study .result-grid,
  .vsm-study .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.vsm-study {
    font-size: 17px;
  }

  .vsm-study .study-bar,
  .vsm-study .page,
  .vsm-study .study-footer {
    width: min(100% - 20px, 1220px);
  }

  .vsm-study .study-bar-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .vsm-current .hero {
    border-radius: 20px;
  }

  .vsm-study .page h1 {
    font-size: clamp(33.6px, 13vw, 50.4px);
  }

  .vsm-study .hero-facts,
  .vsm-study .capability-list,
  .vsm-study .pro-benefits,
  .vsm-study .result-grid,
  .vsm-study .workflow-grid,
  .vsm-study .detail-grid,
  .vsm-study .companion-grid,
  .vsm-study .related-grid,
  .vsm-study .comparison-media {
    grid-template-columns: 1fr;
  }

  .vsm-study .jumpnav {
    margin-bottom: 54px;
  }

  .vsm-study .section,
  .vsm-study .pro-section,
  .vsm-study .companion,
  .vsm-study .related {
    margin-bottom: 64px;
  }

  .vsm-study .pro-section,
  .vsm-study .companion,
  .vsm-study .closing,
  .vsm-current .surface-panel,
  .vsm-current .preset-band,
  .vsm-current .comparison-block {
    padding: 28px 22px;
  }

  .vsm-current .pro-section,
  .vsm-current .companion,
  .vsm-current .closing,
  .vsm-current .surface-panel,
  .vsm-current .preset-band,
  .vsm-current .comparison-block {
    border-radius: 18px;
  }

  .vsm-study .preset-band .media-stage {
    aspect-ratio: 16 / 9;
  }

  .vsm-study .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vsm-study .related-card {
    transition: none;
  }
}

/* Map feature components */
/* Layout der vollst\e4 ndigen Produktseite von Vasco StreetMaps 15 Ultimate Pro. */

/*
 * JTL-Shop bindet die Artikelbeschreibung als HTML-Fragment ein und \fc bernimmt
 * dabei kein eigenes body-Element. Dieser innere Stamm h\e4 lt deshalb alle
 * Namensr\e4 ume, Grundfarben und Schriftwerte direkt an der Produktbeschreibung.
 * Die Schriftgr\f6 \df en sind au\df erdem in Pixeln hinterlegt, damit die Bootstrap-3-
 * Grundgr\f6 \df e von JTL-Shop 4 die Darstellung nicht ungewollt verkleinert.
 */
.vsm-shop-root {
  display: flow-root;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 1px 0 18px;
  clear: both;
  background: #eef2f5;
  color: #17212b;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  text-align: left;
  text-rendering: optimizeLegibility;
}

.vsm-current .page-complete {
  padding-bottom: 1px;
}

/* Kompakter Einstieg: Text links, Bild und Kernaussagen rechts, Hinweis \fc ber die volle Breite. */
.vsm-current .page-complete .hero{
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.92fr);
  grid-template-areas:
    "copy media"
    "note note";
  gap: 18px clamp(28px, 3.4vw, 44px);
  
  border-color: #cbd9e2;
  
  color: var(--ink);
  
}

.vsm-current .page-complete .hero-copy {
  grid-area: copy;
  max-width: none;
}

.vsm-current .page-complete .hero h1 {
  margin-bottom: 12px;
  color: var(--ink);
  font-size: clamp(35.2px, 4vw, 51.2px);
}

/* Die Pro-Kennzeichnung bleibt sichtbar, erscheint aber nicht mehr als runde Plakette. */
.vsm-current .page-complete .hero .eyebrow {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--orange-dark);
}

.vsm-current .page-complete .hero .hero-claim {
  margin-bottom: 16px;
  color: #a64700;
}

.vsm-current .page-complete .hero .lead {
  margin-bottom: 0;
  color: #354654;
  font-size: 15.68px;
  line-height: 1.52;
}

.vsm-current .page-complete .hero-actions {
  gap: 10px;
  margin: 20px 0 0;
}

.vsm-current .page-complete .button {
  min-height: 46px;
  padding: 9px 17px;
}

.vsm-current .page-complete .hero .button-secondary {
  border-color: #71828f;
  background: rgba(255, 255, 255, 0.66);
  color: #263845;
}

.vsm-current .page-complete .hero .button-primary {
  background: #c45100;
  color: #ffffff;
}

.vsm-current .page-complete .hero .button-primary:hover {
  background: #a94400;
}

.vsm-current .page-complete .hero a:focus-visible {
  outline-color: #0f5f85;
}

.vsm-current .page-complete .hero .button-secondary:hover {
  border-color: var(--blue-dark);
  background: #ffffff;
}

.vsm-current .page-complete .hero-note {
  grid-area: note;
  width: 100%;
  margin-top: 0;
  padding: 12px 14px;
  background: rgba(240, 247, 235, 0.92);
  color: #31422e;
  font-size: 14.4px;
}

.vsm-current .page-complete .hero-note a {
  color: var(--orange-dark);
}

.vsm-current .page-complete .hero-note a:hover {
  color: #6b3000;
}

.vsm-current .hero-media-stack {
  grid-area: media;
  display: grid;
  min-width: 0;
  gap: 17px;
  align-content: start;
}

.vsm-current .hero-media-stack .hero-visual {
  grid-area: auto;
  border-color: #b9cad5;
  box-shadow: 0 18px 38px rgba(28, 54, 70, 0.16);
}

.vsm-current .page-complete .hero-visual figcaption {
  background: rgba(255, 255, 255, 0.96);
  color: #475866;
}

.vsm-current .hero-media-stack .hero-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 18px;
  padding-top: 17px;
  border-top: 1px solid #c8d7df;
  color: #2d414f;
  font-size: 14.4px;
  line-height: 1.42;
}

.vsm-current .hero-media-stack .hero-facts li::before {
  color: #568614;
}

/* Auch der Pro-Einstieg bleibt als kompakte, ausgewogene Zweispalte erhalten. */
.vsm-current .page-complete .pro-section {
  margin-top: 64px;
  margin-bottom: 64px;
  padding: clamp(30px, 3.8vw, 44px);
  border: 1px solid #3d4953;
  background:
    radial-gradient(circle at 90% 8%, rgba(210, 96, 8, 0.25), transparent 33%),
    linear-gradient(135deg, #141a20, #202d37 64%, #151d23);
}

.vsm-current .page-complete .pro-layout {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.95fr);
  gap: clamp(26px, 3.2vw, 40px);
  align-items: start;
}

.vsm-current .page-complete .pro-section h2 {
  margin-bottom: 14px;
}

.vsm-current .page-complete .pro-section p {
  margin-bottom: 14px;
}

.vsm-current .page-complete .pro-layout .visual {
  width: 100%;
}

.vsm-current .pro-media-stack {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.vsm-current .page-complete .pro-benefits {
  gap: 9px;
  margin-top: 0;
}

.vsm-current .page-complete .pro-benefits article {
  padding: 13px 14px;
}

.vsm-current .page-complete .pro-benefits h3 {
  margin-bottom: 5px;
  font-size: 15.04px;
}

.vsm-current .page-complete .pro-benefits p {
  font-size: 13.44px;
  line-height: 1.4;
}

.vsm-current .legacy-section {
  margin-bottom: 88px;
  scroll-margin-top: 92px;
}

/* Grundverst\e4 ndnis vor den Neuerungen: klare Erkl\e4 rung links, Einsatzm\f6 glichkeiten rechts. */
.vsm-current .product-definition {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(380px, 1.08fr);
  gap: clamp(30px, 4vw, 50px);
  align-items: center;
}

.vsm-current .product-definition-copy > :last-child {
  margin-bottom: 0;
}

.vsm-current .product-definition-copy strong {
  color: var(--orange-dark);
}

.vsm-current .product-definition-visual {
  width: 100%;
}

.vsm-current .product-definition-visual .media-stage {
  aspect-ratio: 16 / 9;
}

.vsm-current .product-definition-visual .media-stage img {
  object-position: center top;
}

.vsm-current .product-definition-options {
  grid-column: 1 / -1;
  padding: 24px 25px;
  border: 1px solid #d2dee5;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.9);
}

.vsm-current .product-definition-options h3 {
  margin-bottom: 14px;
}

.vsm-current .product-definition-options .capability-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px 24px;
  margin-top: 0;
  font-size: 14.72px;
  line-height: 1.48;
}

/* Die vier 16:9-Beispiele ersetzen die \e4 ltere quadratische Nice-Maps-Galerie. */
.vsm-current .results-showcase .result-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.vsm-current .results-showcase .result-card > img {
  display: block;
  width: 100%;
  height: auto;
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.vsm-current .results-showcase .result-copy {
  flex: 1;
}

/* Bildgef\fc hrter Vier-Schritte-Ablauf mit sehr kurzen Erl\e4 uterungen. */
.vsm-current .workflow-overview .workflow-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
}

.vsm-current .workflow-overview .workflow-copy {
  width: 100%;
  flex: 1;
  padding: 21px 22px 23px;
}

.vsm-current .workflow-overview .workflow-copy h3 {
  font-size: 18.4px;
}

.vsm-current .workflow-overview .workflow-media {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #1b242b;
}

.vsm-current .workflow-overview .workflow-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.vsm-current .workflow-overview .workflow-media--cover img {
  object-fit: cover;
}

.vsm-current .workflow-overview .workflow-media .step {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  width: 38px;
  height: 38px;
  margin: 0;
  box-shadow: 0 4px 12px rgba(12, 31, 43, 0.25);
}

/* Heller Kombinationsblock: Vasco da Gama und SatMapPro. */
.vsm-current .vdg-companion-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(30px, 4vw, 42px);
  align-items: center;
}

.vsm-current .vdg-companion-copy {
  min-width: 0;
}

.vsm-current .vdg-companion-copy > :last-child,
.vsm-current .vdg-satmap-copy > :last-child {
  margin-bottom: 0;
}

.vsm-current .vdg-companion-copy .eyebrow {
  color: var(--orange-dark);
}

.vsm-current .vdg-primary-link a,
.vsm-current .vdg-satmap-copy a {
  color: var(--orange-dark);
  font-weight: 800;
}

.vsm-current .vdg-satmap-card {
  min-width: 0;
  overflow: hidden;
  padding: 26px;
  border: 1px solid #d8cabb;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 28px rgba(20, 38, 52, 0.09);
}

.vsm-current .vdg-satmap-card .media-stage {
  aspect-ratio: 1060 / 640;
  margin-bottom: 22px;
  overflow: hidden;
  border: 1px solid #cbd8df;
  border-radius: 12px;
}

.vsm-current .vdg-satmap-copy {
  padding: 0;
}

.vsm-current .vdg-satmap-copy h3 {
  margin-bottom: 10px;
}

.vsm-current .vdg-satmap-copy p {
  margin-bottom: 13px;
  color: var(--muted);
  font-size: 14.72px;
  line-height: 1.5;
}

.vsm-current .vdg-satmap-note {
  padding: 12px 14px;
  border-left: 4px solid #9bcf46;
  border-radius: 8px;
  background: #f0f7eb;
  color: #31422e !important;
}

.vsm-current .vdg-wide-visual {
  width: 100%;
  margin-top: clamp(36px, 4.5vw, 50px);
}

.vsm-current .vdg-wide-visual .media-stage {
  aspect-ratio: 2170 / 1219;
}

.vsm-current .legacy-section-head {
  max-width: none;
  margin-bottom: 32px;
}

.vsm-current .legacy-section-head > :last-child {
  margin-bottom: 0;
}

.vsm-current .legacy-section-head p {
  max-width: 830px;
  color: var(--muted);
  font-size: 16.64px;
}

.vsm-current .page-complete .section-head {
  max-width: none;
}

.vsm-current .page-complete .section-head > p {
  max-width: 830px;
}

.vsm-current .legacy-panel{
  
  border: 1px solid var(--line);
  
  background: #ffffff;
  
}

.vsm-current .legacy-panel-soft {
  background: linear-gradient(135deg, #f7fafb, #ffffff);
}

.vsm-current .legacy-panel-warm {
  border-color: #e3c8b0;
  background: linear-gradient(135deg, #fff5eb, #ffffff);
}

.vsm-current .legacy-dark {
  border-color: #3e4953;
  background:
    radial-gradient(circle at 88% 8%, rgba(210, 96, 8, 0.2), transparent 34%),
    #161b20;
  color: #e9eef2;
}

.vsm-current .legacy-dark h2,
.vsm-current .legacy-dark h3,
.vsm-current .legacy-dark h4 {
  color: #ffffff;
}

.vsm-current .legacy-dark p,
.vsm-current .legacy-dark li {
  color: #dce4e9;
}

.vsm-current .legacy-dark .eyebrow {
  color: #ffbd7e;
}

.vsm-current .legacy-dark .visual {
  border-color: #44505a;
}

.vsm-current .legacy-dark .visual figcaption {
  background: #252c33;
  color: #dde5e9;
}

.vsm-current .legacy-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
  gap: clamp(34px, 5vw, 62px);
  align-items: center;
}

.vsm-current .legacy-split--media-left {
  grid-template-columns: minmax(380px, 1.1fr) minmax(0, 0.9fr);
}

.vsm-current .legacy-split--media-left .legacy-copy {
  grid-column: 2;
  grid-row: 1;
}

.vsm-current .legacy-split--media-left .visual {
  grid-column: 1;
  grid-row: 1;
}

.vsm-current .legacy-copy > :last-child {
  margin-bottom: 0;
}

.vsm-current .legacy-copy strong {
  color: var(--orange-dark);
}

.vsm-current .legacy-dark .legacy-copy strong {
  color: #ffd09d;
}

.vsm-current .legacy-status {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  margin-bottom: 13px;
  padding: 4px 11px;
  border: 1px solid #e0af84;
  border-radius: 999px;
  background: var(--orange-soft);
  color: var(--orange-dark);
  font-size: 12.16px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.vsm-current .legacy-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.vsm-current .legacy-card-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vsm-current .legacy-card{
  overflow: hidden;
  border: 1px solid var(--line);
  
  background: #ffffff;
  
}

.vsm-current .legacy-card .media-stage {
  border-bottom: 1px solid var(--line);
}



.vsm-current .legacy-card-copy > :last-child {
  margin-bottom: 0;
}

.vsm-current .legacy-card-copy p {
  color: var(--muted);
}



.vsm-current .legacy-feature-image {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(20, 38, 52, 0.1);
}

.vsm-current .edition-comparison {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(24, 40, 52, 0.07);
}

.vsm-current #editionsvergleich .legacy-section-head {
  max-width: none;
  margin-bottom: 20px;
}

@media (min-width: 1100px) {
  .vsm-current #vergleich-title {
    white-space: nowrap;
  }
}

.vsm-current #editionsvergleich .legacy-section-head p {
  font-size: 15.36px;
}

.vsm-current .ultimate-upgrade-section .legacy-section-head p {
  max-width: none;
}

/* Drei gleichwertige Bildkarten vermeiden Leerraum und erkl\e4 ren den Nutzen auf einen Blick. */
.vsm-current .strengths-overview-head {
  max-width: none;
  margin-bottom: 28px;
}

.vsm-current #staerken-title {
  font-size: clamp(28px, 3.15vw, 39.2px);
}

.vsm-current .strengths-overview-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.vsm-current .strengths-overview-copy p {
  margin: 0;
}

.vsm-current .strengths-benefit-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.vsm-current .strengths-benefit-card {
  flex: 1 1 290px;
  max-width: 360px;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(24, 40, 52, 0.09);
}

.vsm-current .strengths-benefit-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.vsm-current .strengths-benefit-card figcaption {
  display: grid;
  gap: 3px;
  padding: 15px 17px 16px;
  color: var(--muted);
  font-size: 14.08px;
  line-height: 1.4;
}

.vsm-current .strengths-benefit-card figcaption strong {
  color: var(--ink);
  font-size: 16px;
}

/* Die echten Neuerungen von Version 15 bilden einen klar erkennbaren, zusammengeh\f6 rigen Bereich. */
.vsm-current .v15-new-frame {
  margin-bottom: 52px;
  padding: clamp(30px, 4.8vw, 54px);
  border: 2px solid #e2ad7d;
  border-radius: 28px;
  background:
    radial-gradient(circle at 94% 4%, rgba(210, 96, 8, 0.1), transparent 27%),
    linear-gradient(145deg, #fff3e6, #fffaf5 40%, #f7fafb);
  box-shadow: 0 15px 38px rgba(34, 48, 58, 0.09);
  scroll-margin-top: 92px;
}

.vsm-current .v15-new-frame-head {
  margin-bottom: 26px;
}

.vsm-current .v15-new-frame-head p {
  max-width: 900px;
}

.vsm-current .v15-new-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.vsm-current .v15-new-overview article {
  min-width: 0;
  padding: 17px 18px;
  border: 1px solid #e2d1c1;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 7px 18px rgba(62, 43, 25, 0.05);
}

.vsm-current .v15-new-overview strong,
.vsm-current .v15-new-overview span {
  display: block;
}

.vsm-current .v15-new-overview strong {
  margin-bottom: 5px;
  color: var(--ink);
  font-size: 16px;
}

.vsm-current .v15-new-overview span {
  color: var(--muted);
  font-size: 14.08px;
  line-height: 1.45;
}

.vsm-current .v15-new-feature {
  margin-top: clamp(34px, 4vw, 48px);
  padding-top: clamp(32px, 4vw, 46px);
  border-top: 1px solid #e4cdb7;
}

.vsm-current .v15-new-feature.legacy-split {
  align-items: center;
}

.vsm-current .v15-new-feature h3 {
  font-size: clamp(24.8px, 2.5vw, 32px);
}

.vsm-current .v15-new-feature .legacy-feature-image .media-stage {
  aspect-ratio: 16 / 9;
}

.vsm-current .v15-checklist {
  display: grid;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.vsm-current .v15-checklist li {
  position: relative;
  padding-left: 27px;
  color: #34434e;
  line-height: 1.48;
}

.vsm-current .v15-checklist li::before {
  position: absolute;
  left: 0;
  color: #6fae16;
  content: "\2713";
  font-weight: 900;
}

.vsm-current .v15-manual {
  padding: clamp(27px, 4vw, 42px);
  border: 1px solid #c8dce7;
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 8%, rgba(35, 126, 172, 0.12), transparent 32%),
    linear-gradient(135deg, #edf7fb, #ffffff 62%, #fff7ef);
  color: var(--ink);
  box-shadow: 0 11px 27px rgba(27, 57, 74, 0.08);
}

.vsm-current .v15-manual h3 {
  color: var(--ink);
}

.vsm-current .v15-manual > p {
  max-width: 1000px;
  color: var(--muted);
}

.vsm-current .v15-manual-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.vsm-current .v15-manual-benefits article {
  padding: 17px 18px;
  border: 1px solid #d4e1e8;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.88);
  text-align: center;
}

.vsm-current .v15-manual-benefits strong,
.vsm-current .v15-manual-benefits span {
  display: block;
}

.vsm-current .v15-manual-benefits strong {
  margin-bottom: 5px;
  color: var(--orange-dark);
  font-size: 34px;
  line-height: 1.05;
}

.vsm-current .v15-manual-benefits span {
  color: var(--muted);
  font-size: 14.08px;
  line-height: 1.45;
}

.vsm-current .v15-note {
  padding: 13px 15px;
  border-left: 5px solid #9bcf46;
  border-radius: 8px;
  background: #f0f7eb;
  color: #31422e;
}

.vsm-current .v15-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.vsm-current .v15-benefit-grid article {
  padding: 20px 21px;
  border: 1px solid #e1d2c3;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.87);
}

.vsm-current .v15-benefit-grid h4 {
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 16.64px;
}

.vsm-current .v15-benefit-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 14.72px;
  line-height: 1.5;
}

.vsm-current .v15-new-intro {
  max-width: 850px;
  color: var(--muted);
}

.vsm-current .edition-head,
.vsm-current .edition-row {
  display: grid;
  grid-template-columns: minmax(145px, 0.78fr) minmax(0, 1fr) minmax(0, 1.18fr);
}

.vsm-current .edition-head {
  background: #20303c;
  color: #ffffff;
  font-size: 14.4px;
  font-weight: 800;
}

.vsm-current .edition-head > div,
.vsm-current .edition-row > * {
  min-width: 0;
  padding: 10px 13px;
  overflow-wrap: break-word;
}

.vsm-current .edition-head > div + div,
.vsm-current .edition-row > * + * {
  border-left: 1px solid var(--line);
}

.vsm-current .edition-row + .edition-row {
  border-top: 1px solid var(--line);
}

.vsm-current .edition-row h3 {
  margin: 0;
  font-size: 13.92px;
  line-height: 1.38;
}

.vsm-current .edition-cell {
  color: #485765;
  font-size: 13.44px;
  line-height: 1.4;
}

.vsm-current .edition-row > .edition-cell:not(.edition-cell--pro) {
  background: #e7f0fa;
  color: #354f63;
}

.vsm-current .edition-cell--pro {
  background: #edf8e8;
  color: #263a23;
}

.vsm-current .edition-cell-label {
  display: none;
  margin-bottom: 4px;
  color: var(--orange-dark);
  font-size: 11.84px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vsm-current .legacy-highlight {
  margin-top: 18px;
  padding: 13px 16px;
  border-left: 5px solid #9bcf46;
  border-radius: 8px;
  background: #f0f7eb;
}

.vsm-current .legacy-highlight p {
  margin: 0;
  color: #31422e;
}

.vsm-current .technical-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vsm-current .technical-list li {
  padding: 16px 18px;
  border: 1px solid #d6e0e7;
  border-radius: 13px;
  background: #f7f9fa;
}

.vsm-current .technical-list strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
}

.vsm-current .technical-list span {
  display: block;
  color: var(--muted);
  font-size: 14.88px;
}

.vsm-current .technical-optimizations {
  margin-bottom: 64px;
  padding: clamp(28px, 3.8vw, 42px);
}

.vsm-current .technical-optimizations .legacy-section-head {
  max-width: none;
  margin: 0 0 22px;
  text-align: left;
}

.vsm-current .technical-feature-image {
  width: 100%;
  max-width: none;
  margin: 0 auto 24px;
}

.vsm-current .technical-feature-image .media-stage {
  aspect-ratio: 21 / 9;
}

.vsm-current .technical-feature-image figcaption {
  text-align: center;
}

.vsm-current .wide-visual {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(20, 38, 52, 0.09);
}

.vsm-current .wide-visual .media-stage--panorama {
  aspect-ratio: 1050 / 336;
}

.vsm-current .nice-map-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.vsm-current .nice-map {
  max-width: 300px;
  min-width: 0;
  flex: 1 1 260px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(20, 38, 52, 0.08);
}

.vsm-current .nice-map img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.vsm-current .nice-map figcaption {
  padding: 12px 15px;
  color: var(--muted);
  font-size: 15.36px;
  text-align: center;
}

.vsm-current .triptych {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.vsm-current .triptych figure {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #ffffff;
}

.vsm-current .triptych img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.vsm-current .triptych figcaption {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13.44px;
  text-align: center;
}

.vsm-current .before-after {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #bac7d0;
  border-radius: 17px;
  background: #1d252c;
  box-shadow: 0 16px 38px rgba(19, 35, 48, 0.13);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
}

.vsm-current .before-after > img,
.vsm-current .before-after-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.vsm-current .before-after-layer {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--position, 50%)) 0 0);
}

.vsm-current .before-after-line {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: var(--position, 50%);
  width: 4px;
  background: rgba(0, 0, 0, 0.52);
  transform: translateX(-2px);
  pointer-events: none;
}

.vsm-current .before-after-line::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 1px solid #00a6e6;
  border-radius: 50%;
  background: linear-gradient(#66d4ff, #00b8ff 62%, #009edb);
  color: #ffffff;
  content: "\2194";
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
}

.vsm-current .comparison-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.vsm-current .before-after-range {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.vsm-current .before-after:focus-within {
  outline: 4px solid rgba(0, 184, 255, 0.34);
  outline-offset: 3px;
}

.vsm-current .legacy-note-box {
  padding: clamp(28px, 4.5vw, 48px);
  border: 2px solid #d9a066;
  border-radius: 22px;
  background: #fff7ed;
}

.vsm-current .legacy-note-box h2 {
  color: #913800;
}

.vsm-current .legacy-note-box .delivery-warning {
  margin: 22px 0 0;
  padding: 16px 18px;
  border-radius: 10px;
  background: #8f1e12;
  color: #ffffff;
  font-weight: 800;
}

.vsm-current .legacy-note-box .delivery-warning strong {
  color: #ffffff;
}

.vsm-current .section-divider {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 8px 0 52px;
  color: var(--orange-dark);
  font-size: 12.48px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vsm-current .section-divider::before,
.vsm-current .section-divider::after {
  height: 1px;
  flex: 1;
  background: #d8e0e6;
  content: "";
}

@media (max-width: 1050px) {
  .vsm-current .product-definition {
    grid-template-columns: 1fr;
  }

  .vsm-current .vdg-companion-grid {
    grid-template-columns: 1fr;
  }

  .vsm-current .product-definition-options .capability-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vsm-current .v15-new-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vsm-current .legacy-split,
  .vsm-current .legacy-split--media-left {
    grid-template-columns: 1fr;
  }

  .vsm-current .legacy-split--media-left .legacy-copy,
  .vsm-current .legacy-split--media-left .visual {
    grid-column: 1;
  }

  .vsm-current .legacy-split--media-left .legacy-copy {
    grid-row: 1;
  }

  .vsm-current .legacy-split--media-left .visual {
    grid-row: 2;
  }

  .vsm-current .legacy-card-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vsm-current .pro-media-stack .pro-benefits {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .vsm-current .technical-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .vsm-current .hero-media-stack .hero-facts {
    grid-template-columns: 1fr;
  }

  .vsm-current .nice-map {
    max-width: min(100%, 360px);
    flex-basis: 100%;
  }

  .vsm-current .strengths-overview-copy {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .vsm-current .strengths-benefit-card {
    max-width: min(100%, 420px);
    flex-basis: 100%;
  }

}

@media (max-width: 760px) {
  .vsm-current .page-complete .hero,
  .vsm-current .page-complete .pro-layout {
    grid-template-columns: 1fr;
  }

  .vsm-current .page-complete .hero{
    grid-template-areas:
      "copy"
      "media"
      "note";
    gap: 26px;
    
  }

  .vsm-current .hero-media-stack,
  .vsm-current .page-complete .pro-layout .visual {
    width: min(680px, 100%);
    margin-inline: auto;
  }

  .vsm-current .page-complete .pro-section {
    padding: 28px 22px;
  }

  .vsm-current .legacy-section {
    margin-bottom: 64px;
  }

  .vsm-current .legacy-panel,
  .vsm-current .legacy-note-box {
    padding: 27px 21px;
    border-radius: 18px;
  }

  .vsm-current .v15-new-frame {
    padding: 27px 21px;
    border-radius: 20px;
  }

  .vsm-current .v15-new-overview,
  .vsm-current .v15-manual-benefits,
  .vsm-current .v15-benefit-grid,
  .vsm-current .product-definition-options .capability-list {
    grid-template-columns: 1fr;
  }

  .vsm-current .vdg-satmap-card {
    padding: 19px;
  }

  .vsm-current .legacy-card-grid,
  .vsm-current .legacy-card-grid--three,
  .vsm-current .nice-map-grid,
  .vsm-current .triptych {
    grid-template-columns: 1fr;
  }

  .vsm-current .edition-head {
    display: none;
  }

  .vsm-current .edition-row {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .vsm-current .edition-row + .edition-row {
    border-top: 8px solid #eef2f5;
  }

  .vsm-current .edition-row > * {
    padding: 8px 0;
  }

  .vsm-current .edition-row > * + * {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .vsm-current .edition-row h3 {
    font-size: 16px;
  }

  .vsm-current .edition-row > .edition-cell:not(.edition-cell--pro) {
    margin: 0 -14px;
    padding: 12px 14px;
  }

  .vsm-current .edition-cell--pro {
    margin: 0 -14px -14px;
    padding: 12px 14px;
  }

  .vsm-current .edition-cell-label {
    display: block;
  }

  .vsm-current .wide-visual .media-stage--panorama {
    aspect-ratio: 16 / 9;
  }

  .vsm-current .section-divider {
    margin-bottom: 36px;
  }
}

/* Gallery and requirements components */
/* Gemeinsamer, vollstaendig gekapselter Stil fuer die JTL-Karteireiter von Vasco StreetMaps 15. */
.vsm15-extra-page,
.vsm15-extra-page *,
.vsm15-extra-page *::before,
.vsm15-extra-page *::after {
  box-sizing: border-box;
}

.vsm15-extra-page {
  --vsm15-extra-ink: #17212b;
  --vsm15-extra-muted: #536170;
  --vsm15-extra-line: #d4dde4;
  --vsm15-extra-orange: #c45100;
  --vsm15-extra-orange-dark: #8f3b00;
  --vsm15-extra-blue: #155a83;
  --vsm15-extra-blue-soft: #eaf4f9;
  --vsm15-extra-surface: #eef2f5;
  --vsm15-extra-white: #ffffff;
  display: flow-root;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: clamp(16px, 2.7vw, 28px);
  clear: both;
  background: var(--vsm15-extra-surface);
  color: var(--vsm15-extra-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  text-align: left;
  text-rendering: optimizeLegibility;
}

.vsm15-extra-page img {
  display: block;
  max-width: 100%;
}

.vsm15-extra-page a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.vsm15-extra-page a:focus,
.vsm15-extra-page a:focus-visible {
  outline: 3px solid #e96d0b;
  outline-offset: 3px;
}

.vsm15-extra-page h2,
.vsm15-extra-page h3,
.vsm15-extra-page p,
.vsm15-extra-page ul,
.vsm15-extra-page figure {
  margin-top: 0;
}

.vsm15-extra-page h2,
.vsm15-extra-page h3 {
  color: var(--vsm15-extra-ink);
  font-weight: 700;
  line-height: 1.18;
}

.vsm15-extra-page h2 {
  margin-bottom: 13px;
  font-size: clamp(27px, 3.5vw, 38px);
  letter-spacing: -0.025em;
}

.vsm15-extra-page h3 {
  margin-bottom: 8px;
  font-size: 19px;
}

.vsm15-extra-page p {
  margin-bottom: 16px;
}

.vsm15-extra-shell {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.vsm15-extra-intro {
  margin-bottom: 28px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid #cbd9e2;
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 5%, rgba(196, 81, 0, 0.11), transparent 34%),
    linear-gradient(135deg, #fffaf5 0%, #f4f9fc 62%, #e9f3f7 100%);
  box-shadow: 0 15px 34px rgba(31, 55, 70, 0.1);
}

.vsm15-extra-kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--vsm15-extra-orange-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.vsm15-extra-intro > :last-child,
.vsm15-extra-copy > :last-child,
.vsm15-extra-notice > :last-child,
.vsm15-extra-spec-card > :last-child {
  margin-bottom: 0;
}

.vsm15-extra-lead {
  max-width: 72ch;
  color: #3e5060;
  font-size: 17px;
}

.vsm15-extra-section {
  margin-top: 30px;
}

.vsm15-extra-section-head {
  margin-bottom: 18px;
}

.vsm15-extra-section-head p {
  max-width: 74ch;
  margin-bottom: 0;
  color: var(--vsm15-extra-muted);
}

.vsm15-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.vsm15-video-card {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--vsm15-extra-line);
  border-radius: 18px;
  background: var(--vsm15-extra-white);
  box-shadow: 0 11px 26px rgba(25, 45, 58, 0.09);
}

.vsm15-video-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(270px, 0.78fr);
  align-items: stretch;
}

.vsm15-video-media {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  background: #17232c;
  text-decoration: none;
}

.vsm15-video-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.vsm15-video-card--featured .vsm15-video-media img {
  min-height: 100%;
}

.vsm15-video-play {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 8px 13px;
  border-radius: 8px;
  background: rgba(196, 81, 0, 0.95);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.23);
}

.vsm15-video-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  padding: 20px;
}

.vsm15-video-card--featured .vsm15-video-copy {
  justify-content: center;
  padding: clamp(22px, 3vw, 34px);
}

.vsm15-video-meta {
  margin-bottom: 8px;
  color: var(--vsm15-extra-orange-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.035em;
}

.vsm15-video-copy p {
  color: var(--vsm15-extra-muted);
}

.vsm15-video-text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  align-self: flex-start;
  margin-top: auto;
  color: var(--vsm15-extra-blue);
  font-weight: 800;
}

.vsm15-video-text-link:hover {
  color: var(--vsm15-extra-orange-dark);
}

.vsm15-extra-notice {
  margin-top: 24px;
  padding: 17px 19px;
  border-left: 5px solid #86b938;
  border-radius: 10px;
  background: #f0f7eb;
  color: #354831;
}

.vsm15-gallery-group + .vsm15-gallery-group {
  margin-top: 38px;
}

.vsm15-gallery-group-title {
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #cedae2;
}

.vsm15-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.vsm15-gallery-card {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--vsm15-extra-line);
  border-radius: 16px;
  background: var(--vsm15-extra-white);
  box-shadow: 0 9px 22px rgba(25, 45, 58, 0.08);
}

.vsm15-gallery-image-link {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #dfe8ed;
}

.vsm15-gallery-image-link img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

.vsm15-gallery-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 15px 16px 17px;
}

.vsm15-gallery-copy h3 {
  margin-bottom: 9px;
  font-size: 17px;
}

.vsm15-gallery-meta {
  margin-bottom: 11px;
  color: var(--vsm15-extra-muted);
  font-size: 14px;
  line-height: 1.45;
}

.vsm15-gallery-open {
  min-height: 40px;
  margin-top: auto;
  color: var(--vsm15-extra-blue);
  font-size: 14px;
  font-weight: 800;
}

.vsm15-gallery-open:hover {
  color: var(--vsm15-extra-orange-dark);
}

.vsm15-system-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.vsm15-extra-spec-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--vsm15-extra-line);
  border-radius: 15px;
  background: var(--vsm15-extra-white);
  box-shadow: 0 8px 20px rgba(25, 45, 58, 0.07);
}

.vsm15-extra-spec-label {
  display: block;
  margin-bottom: 7px;
  color: var(--vsm15-extra-orange-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vsm15-extra-spec-card h3 {
  margin-bottom: 8px;
}

.vsm15-extra-spec-card p {
  color: var(--vsm15-extra-muted);
}

.vsm15-system-delivery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
  padding: clamp(21px, 3vw, 28px);
  border: 1px solid #efc59f;
  border-radius: 18px;
  background: #fff7ef;
}

.vsm15-system-delivery > h2,
.vsm15-system-delivery > p {
  grid-column: 1 / -1;
}

.vsm15-system-delivery > p {
  margin-bottom: 2px;
  color: #5b4a3e;
}

.vsm15-system-option {
  padding: 18px;
  border: 1px solid #edd5bf;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.82);
}

.vsm15-system-option h3 {
  color: #773300;
}

.vsm15-system-option p {
  margin-bottom: 0;
  color: #55483f;
}

.vsm15-system-warning {
  margin-top: 24px;
  padding: 17px 19px;
  border-left: 5px solid #ad281b;
  border-radius: 10px;
  background: #fff0ed;
  color: #5d241d;
}

.vsm15-system-warning strong {
  color: #8f1f14;
}

@media (max-width: 880px) {
  .vsm15-video-card--featured {
    grid-template-columns: 1fr;
  }

  .vsm15-video-card--featured .vsm15-video-media img {
    min-height: 0;
  }

  .vsm15-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .vsm15-video-grid,
  .vsm15-gallery-grid,
  .vsm15-system-grid,
  .vsm15-system-delivery {
    grid-template-columns: 1fr;
  }

  .vsm15-system-delivery > h2,
  .vsm15-system-delivery > p {
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  .vsm15-extra-page {
    padding: 12px;
    font-size: 16px;
  }

  .vsm15-extra-intro {
    padding: 21px 18px;
    border-radius: 16px;
  }

  .vsm15-video-copy,
  .vsm15-video-card--featured .vsm15-video-copy,
  .vsm15-extra-spec-card {
    padding: 17px;
  }
}

/* REUSABLE COURSE COMPONENTS. No product selectors: any .vdg-shop can use
   .lk-stats, .lk-chapters, .lk-player-grid and .lk-video.
   Shared hero/gallery/typography rules below remain authoritative. */


.vdg-shop .lk-eyebrow{font-size:13px!important;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:#91501c;margin-bottom:16px}

.vdg-shop .lk-new{font-size:14px!important;color:#155a83!important;font-weight:700;margin-top:18px}
.vdg-shop .lk-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;background:#fff9f2;border:1px solid #e9d9c9;padding:19px 10px;text-align:center;color:#17212b}
.vdg-shop .lk-stats div{font-weight:700;font-size:18px;line-height:1.4;padding:4px 8px;border-right:1px solid #e9d9c9}
.vdg-shop .lk-stats div:last-child{border-right:0}
.vdg-shop .lk-intro-pair{margin-top:30px;gap:36px}
.vdg-shop .lk-intro-pair h3{font-size:23px}
.vdg-shop .lk-languages{color:#155a83;font-size:15px;font-weight:700}
.vdg-shop .lk-chapters{border-top:1px solid var(--line);margin-top:26px;padding-top:22px}
/* Shared disclosure control for course chapters and product package lists.
   Padding overrides existing inline spacing without changing HTML.
   Independent of shop resets of native markers. */
:is(.vdg-shop,.vsm-shop-root,.vsm15-extra-page) details > summary{display:flex;align-items:center;gap:14px;position:relative;cursor:pointer;list-style:none;font-size:21px;font-weight:700;color:var(--ms-blue);padding:14px 18px!important;line-height:1.4;border:1px solid var(--ms-line);border-radius:10px;background:#f1f7fa;user-select:none}
:is(.vdg-shop,.vsm-shop-root,.vsm15-extra-page) details > summary::marker{content:""}
:is(.vdg-shop,.vsm-shop-root,.vsm15-extra-page) details > summary::-webkit-details-marker{display:none}
:is(.vdg-shop,.vsm-shop-root,.vsm15-extra-page) details > summary::before{content:"";display:block;position:static;flex:0 0 10px;width:10px;height:10px;box-sizing:border-box;border:0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;background:none;transform:rotate(-45deg);margin:0 3px 0 0;opacity:1;visibility:visible}
:is(.vdg-shop,.vsm-shop-root,.vsm15-extra-page) details[open] > summary::before{transform:rotate(45deg)}
:is(.vdg-shop,.vsm-shop-root,.vsm15-extra-page) details > summary:hover{background:#e6f0f7;border-color:#8faebe}
:is(.vdg-shop,.vsm-shop-root,.vsm15-extra-page) details[open] > summary{background:#e6f0f7}

:is(.vdg-shop,.vsm-shop-root,.vsm15-extra-page) details > summary:focus-visible{outline:3px solid #c45100;outline-offset:5px}
.vdg-shop .lk-chapters ol{list-style:none;padding:0;margin:20px 0 0;counter-reset:chapter -1}
.vdg-shop .lk-chapters li{counter-increment:chapter;display:grid;grid-template-columns:32px 1fr auto;gap:12px;padding:13px 0;margin:0;border-top:1px solid #e4e9ed;align-items:baseline}
.vdg-shop .lk-chapters li::before{content:counter(chapter,decimal-leading-zero);color:#a64700;font-weight:700}
.vdg-shop .lk-chapters small{color:#536170;font-size:13px;white-space:nowrap}



.vdg-shop .lk-shot-meta{font-size:12px;font-weight:700;color:#a64700;letter-spacing:.04em;margin:0 0 10px}
.vdg-shop .lk-note{font-size:13px;color:#536170;margin-top:-5px;margin-bottom:25px}


.vdg-shop .lk-player{background:linear-gradient(135deg,#f4f8fb,#fff)}
.vdg-shop .lk-player-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:30px}
.vdg-shop .lk-player-grid h3{font-size:20px;margin:12px 0 9px}
.vdg-shop .lk-player-grid p{font-size:15px;color:#536170;margin:0}
.vdg-shop .lk-step{display:inline-grid;place-items:center;min-width:37px;height:37px;border-radius:50%;background:#fce9d9;color:#914000;font-weight:700;font-size:14px}
.vdg-shop .lk-end{background:linear-gradient(125deg,#fff5e9,#edf5fa)}
.vdg-shop .lk-end p{max-width:800px}
.vdg-shop [id]{scroll-margin-top:25px}
@media(max-width:850px){.vdg-shop .lk-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.vdg-shop .lk-stats div:nth-child(2){border-right:0}.vdg-shop .lk-player-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.vdg-shop .lk-stats div{font-size:15px}.vdg-shop .lk-player-grid{grid-template-columns:1fr;gap:24px}.vdg-shop .lk-chapters li{grid-template-columns:26px 1fr;gap:8px}.vdg-shop .lk-chapters small{grid-column:2}}
@media(prefers-reduced-motion:no-preference){.vdg-shop .u-cta-links a{transition:background .15s ease}}

.vdg-shop .lk-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#0b2038;border-radius:14px;margin:28px 0 16px}.vdg-shop .lk-video-topics{font-size:14px;color:#536170}.vdg-shop .lk-video{scroll-margin-top:24px}

/* SHARED DESIGN CONTRACT: edit these values/components, not legacy aliases above. */
:root{--ms-ink:#17212b;--ms-muted:#536170;--ms-line:#d4dde4;--ms-accent:#c45100;--ms-blue:#155a83;--ms-surface:#eef2f5;--ms-font:Arial,Helvetica,sans-serif;--ms-body:16px;--ms-h1:clamp(28px,3vw,40px);--ms-h2:clamp(26px,2.7vw,34px);--ms-h3:21px;--ms-card-title:24px;--ms-card-pad:27px;--ms-button-size:15px;--ms-button-pad:10px 16px;--ms-button-radius:9px;--ms-media-radius:14px;--ms-leading:1.55;--ms-radius:18px;--ms-gap:26px;--ms-pad:clamp(22px,3vw,32px);--ms-shadow:0 10px 26px #1828340d;--ms-hero-bg:radial-gradient(circle at 14% 10%,#d2600821,transparent 34%),linear-gradient(135deg,#fffaf5 0%,#f3f8fa 56%,#e7f1f6 100%)}
:is(.vdg-shop,.vsm-shop-root,.vsm15-extra-page){font-family:var(--ms-font);font-size:var(--ms-body);line-height:var(--ms-leading);color:var(--ms-ink);background:var(--ms-surface);--ink:var(--ms-ink);--muted:var(--ms-muted);--line:var(--ms-line);--orange:var(--ms-accent);--blue:var(--ms-blue)}
:is(.vdg-shop,.vsm-shop-root,.vsm15-extra-page) *{hyphens:none;-webkit-hyphens:none;word-break:normal;overflow-wrap:break-word}
.vsm-shop-root .page{--orange:var(--ms-accent);--ink:var(--ms-ink);--muted:var(--ms-muted);--line:var(--ms-line);--blue:var(--ms-blue)}
:is(.vdg-shop .vdg-page,.vsm-shop-root .page){width:min(1220px,calc(100% - 32px));margin:0 auto}
.vsm-shop-root{padding:18px 0}
.vsm15-extra-page{padding:18px 16px}
.vsm15-extra-page .vsm15-extra-shell{max-width:1220px}
.vdg-shop .vdg-hero,.vsm-shop-root.vsm-current .page-complete .hero,.vsm15-extra-page .vsm15-extra-intro{padding:var(--ms-pad);border:1px solid var(--ms-line);border-radius:var(--ms-radius);background:var(--ms-hero-bg);box-shadow:var(--ms-shadow);color:var(--ms-ink)}
.vdg-shop .vdg-hero h1,.vsm-shop-root.vsm-current .page-complete .hero h1{font-size:var(--ms-h1);line-height:1.2;letter-spacing:-.025em;color:var(--ms-ink);margin-bottom:18px}
.vdg-shop .vdg-hero-copy>p,.vsm-shop-root.vsm-current .page-complete .hero .lead{font-size:var(--ms-body);line-height:var(--ms-leading);color:#354654}
.vdg-shop .vdg-hero-copy .vdg-claim,.vsm-shop-root.vsm-current .page-complete .hero .hero-claim{font-size:clamp(19px,2vw,23px);line-height:1.3;color:#a64700}
.vdg-shop h2,.vsm-shop-root.vsm-study .page h2,.vsm15-extra-page h2{font-size:var(--ms-h2);line-height:1.22;letter-spacing:-.025em;margin-bottom:18px}
.vdg-shop h3,.vsm-shop-root.vsm-study .page h3,.vsm15-extra-page h3{font-size:var(--ms-h3);line-height:1.25;margin-bottom:10px}
.vdg-shop p,.vsm-shop-root.vsm-study .page p,.vsm15-extra-page p{margin-bottom:16px}
.vdg-shop .vdg-section:not(.vdg-section-pair),.vsm-shop-root.vsm-current .legacy-panel,.vsm15-extra-page .vsm15-extra-spec-card{padding:var(--ms-pad);border-radius:var(--ms-radius);box-shadow:var(--ms-shadow)}
.vdg-shop .vdg-card,.vdg-shop .vdg-news-card,.vdg-shop .vdg-news-lead,.vsm-shop-root.vsm-current .legacy-card{border-radius:var(--ms-radius);box-shadow:var(--ms-shadow)}
.vdg-shop .vdg-card h2,.vdg-shop .vdg-news-card h2,.vdg-shop .vdg-news-lead h2,.vsm-shop-root.vsm-current .legacy-card-copy h3{font-size:var(--ms-card-title);line-height:1.25}
.vdg-shop .vdg-grid,.vdg-shop .vdg-news-grid,.vsm-shop-root.vsm-current .legacy-card-grid{gap:var(--ms-gap)}
.vsm-shop-root.vsm-current .legacy-section,.vsm-shop-root.vsm-study .section{margin-bottom:38px}
.vdg-shop .vdg-hero-note,.vsm-shop-root.vsm-current .page-complete .hero-note{padding:16px 18px;border-radius:12px;background:#f0f7ebeb;color:#31422e;font-size:15px}
.vdg-shop .vdg-hero-note p,.vsm-shop-root.vsm-current .page-complete .hero-note p{margin-bottom:0}
@media(max-width:850px){.vsm-shop-root.vsm-current .page-complete .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:'copy' 'media' 'facts' 'note'}}
@media(max-width:560px){:root{--ms-card-pad:22px 18px;--ms-pad:20px 16px;--ms-gap:20px;--ms-radius:14px}.vdg-shop .vdg-hero,.vdg-shop .vdg-section:not(.vdg-section-pair),.vsm-shop-root.vsm-current .page-complete .hero{padding:var(--ms-pad)}:is(.vdg-shop .vdg-page,.vsm-shop-root .page){width:calc(100% - 20px)}.vsm15-extra-page{padding:12px 10px}}


/* Existing HTML class names are aliases for the same component rules.
   Layout-only differences (e.g. image outside a card's copy) stay above. */
.vdg-shop .vdg-card,.vdg-shop .vdg-news-card,.vdg-shop .vdg-news-lead,.vsm-shop-root.vsm-current .legacy-card-copy{padding:var(--ms-card-pad)}
.vdg-shop .vdg-page,.vsm-shop-root.vsm-study .page{font-family:var(--ms-font);font-size:var(--ms-body);line-height:var(--ms-leading)}
.vsm-shop-root.vsm-current .page-complete .section-head>p{font-size:var(--ms-body);line-height:var(--ms-leading)}
.vdg-shop .u-cta-links a,.vsm-shop-root.vsm-current .page-complete .button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:var(--ms-button-pad);border:1px solid #b9cbd7;border-radius:var(--ms-button-radius);font-family:var(--ms-font);font-size:var(--ms-button-size);font-weight:700;line-height:1.4;text-decoration:none}
.vdg-shop .u-cta-links a,.vsm-shop-root.vsm-current .page-complete .button-secondary{background:#f1f7fa;color:var(--ms-blue)}
.vdg-shop .u-cta-links a:hover,.vsm-shop-root.vsm-current .page-complete .button-secondary:hover{background:#e6f0f7;color:var(--ms-blue)}
.vdg-shop .u-cta-links:first-of-type a:first-child,.vsm-shop-root.vsm-current .page-complete .button-primary{background:var(--ms-accent);border-color:var(--ms-accent);color:#fff}
.vdg-shop .vdg-video,.vdg-shop .lk-video video,.vdg-shop .ms-video-placeholder,.vsm-shop-root.vsm-current .video-frame{border-radius:var(--ms-media-radius)}

/* MotionStudios shared shop components. Canonical source: Homepage/media/css.
   Phase 1: product summaries. Legacy class aliases allow gradual migration.
   All rules are scoped: the surrounding shop and full descriptions are unaffected. */
:is(.vsm15-short,.vdg-shop .vdg-page .vdg-section.vdg-short,.vdg-category .vdg-category-intro),:is(.vsm15-short,.vdg-shop .vdg-page .vdg-section.vdg-short,.vdg-category .vdg-category-intro) *{box-sizing:border-box;hyphens:none;-webkit-hyphens:none;word-break:normal;overflow-wrap:break-word}
.vdg-shop:has(> .vdg-page > .vdg-short){display:flow-root;clear:both;width:100%;min-width:0;margin:0;padding:0;background:transparent}
.vdg-shop:has(> .vdg-page > .vdg-short) > .vdg-page{width:100%;margin:0;padding:0}
:is(.vsm15-short,.vdg-shop .vdg-page .vdg-section.vdg-short,.vdg-category .vdg-category-intro){width:100%;margin:0 0 18px;padding:18px 20px;border:1px solid #d5e0e7;border-left:5px solid #c45100;border-radius:12px;background:linear-gradient(135deg,#fffaf5 0%,#f3f9fc 100%);color:#253542;font:var(--ms-body)/1.5 var(--ms-font);text-align:left;box-shadow:0 7px 18px #1b303e14}
:is(.vsm15-short,.vdg-shop .vdg-page .vdg-section.vdg-short,.vdg-category .vdg-category-intro) h2{margin:0 0 10px;color:#172531;font:700 22px/1.25 var(--ms-font);text-transform:none;letter-spacing:normal}
:is(.vsm15-short,.vdg-shop .vdg-page .vdg-section.vdg-short,.vdg-category .vdg-category-intro) p{margin:0 0 12px;color:#344957;font:inherit;text-align:left}
:is(.vsm15-short,.vdg-shop .vdg-page .vdg-section.vdg-short,.vdg-category .vdg-category-intro) p:last-child{margin-bottom:0}
:is(.vsm15-short,.vdg-shop .vdg-page .vdg-section.vdg-short,.vdg-category .vdg-category-intro) strong{color:#8c3d00;font-weight:700}
:is(.vsm15-short,.vdg-shop .vdg-page .vdg-section.vdg-short,.vdg-category .vdg-category-intro) ul{display:grid;gap:8px;margin:14px 0;padding:0;list-style:none}
:is(.vsm15-short,.vdg-shop .vdg-page .vdg-section.vdg-short,.vdg-category .vdg-category-intro) li{position:relative;margin:0;padding:0 0 0 18px}
:is(.vsm15-short,.vdg-shop .vdg-page .vdg-section.vdg-short,.vdg-category .vdg-category-intro) li::before{content:"";position:absolute;top:.62em;left:1px;width:7px;height:7px;border-radius:50%;background:#c45100}
:is(.vsm15-short,.vdg-shop .vdg-page .vdg-section.vdg-short,.vdg-category .vdg-category-intro) .vsm15-short-pro{margin:0;padding-top:12px;border-top:1px solid #d7e1e7}
:is(.vsm15-short,.vdg-shop .vdg-page .vdg-section.vdg-short,.vdg-category .vdg-category-intro) a{color:#155a83;text-decoration:underline;text-underline-offset:3px}
:is(.vsm15-short,.vdg-shop .vdg-page .vdg-section.vdg-short,.vdg-category .vdg-category-intro) a:focus-visible{outline:3px solid #c45100;outline-offset:3px}
.vdg-shop .vdg-page .vdg-short .vdg-upgrade-eligibility{padding:12px 14px!important;margin:14px 0 0!important;border:1px solid #cbd9e2;border-radius:10px!important;background:#eef6fa}
.vdg-shop .vdg-page .vdg-short .vdg-upgrade-eligibility p{font-size:15px;line-height:1.4}
.vdg-shop .vdg-page .vdg-short .vdg-upgrade-eligibility strong{color:#253542}
.vdg-shop .vdg-page .vdg-short .vdg-upgrade-eligibility p:first-child{margin-bottom:6px!important}
.vdg-shop .vdg-page .vdg-short .vdg-upgrade-eligibility p:nth-child(3){margin:10px 0 5px!important}
@media(max-width:640px){:is(.vsm15-short,.vdg-shop .vdg-page .vdg-section.vdg-short,.vdg-category .vdg-category-intro){padding:16px;border-radius:10px}:is(.vsm15-short,.vdg-shop .vdg-page .vdg-section.vdg-short,.vdg-category .vdg-category-intro) h2{font-size:20px}.vdg-shop .vdg-page .vdg-short .vdg-upgrade-eligibility{padding:10px 12px!important}}

/* Category introductions share the compact product-info component above. */
.vdg-category{display:flow-root;clear:both;min-width:0;margin:0;padding:0;text-align:left}
.vdg-category .vdg-category-intro .vdg-category-guide{font-size:14px}
.vdg-category .vdg-category-intro a:hover{color:#914000}

/* Shared placeholder for course previews awaiting their final video. */
.vdg-shop .ms-video-placeholder{display:grid;place-items:center;aspect-ratio:16/9;width:100%;padding:24px;border-radius:14px;background:linear-gradient(135deg,#163e52,#20556e);color:#fff;text-align:center;font-size:20px;font-weight:700;margin:28px 0 16px}