.online-shop,.online-shop *{box-sizing:border-box}
.online-shop{color:#062855;background:#f5f8fb}
.online-shop__inner{padding-top:16px;padding-bottom:58px}
.online-breadcrumb{display:flex;gap:9px;margin-bottom:14px;color:#60758b;font-size:13px}
.online-breadcrumb a{color:inherit;text-decoration:none}
.online-hero{padding:31px 35px;border:1px solid #ccdae6;border-top:4px solid #a47827;background:#fff}
.online-hero>p,.online-heading small,.online-filter>div small{display:block;margin:0 0 7px;color:#a47827;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.online-hero h1{margin:0 0 8px;font-size:clamp(30px,4vw,44px)}
.online-hero>span{color:#506b83;line-height:1.5}
.online-hero form{display:grid;grid-template-columns:1fr auto;max-width:850px;margin-top:22px}
.online-hero input{min-width:0;padding:13px 15px;border:1px solid #aebfd0;font:inherit}
.online-hero button,.online-filter button{border:0;padding:0 23px;color:#fff;background:#062f61;font-weight:800}
.online-section{padding-block:43px}
.online-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}
.online-heading h2,.online-filter h2,.online-results-head h2{margin:0;font-size:27px}
.online-heading>a{color:#062855;font-weight:800}
.online-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.online-groups>a{display:flex;min-height:78px;flex-direction:column;justify-content:center;padding:15px 18px;border:1px solid #cedae5;border-top:3px solid #a47827;color:#062855;background:#fff;text-decoration:none}
.online-groups strong,.online-groups span{display:block}
.online-groups span{margin-top:5px;color:#60758b;font-size:11px}
.online-filter{padding:23px;border:1px solid #c5d4e0;background:#eaf2f8}
.online-filter>div{margin-bottom:16px}
.online-filter form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:10px;align-items:end}
.online-filter label>span{display:block;margin-bottom:6px;font-size:11px;font-weight:800}
.online-filter select{width:100%;height:45px;padding:0 11px;border:1px solid #aabccc;color:#062855;background:#fff;font:inherit}
.online-filter form>a{align-self:center;color:#315777;font-size:12px;font-weight:700}
.online-results-head{display:flex;align-items:center;justify-content:space-between;padding:34px 0 16px}
.online-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.online-product{display:flex;min-width:0;flex-direction:column;border:1px solid #d0dce6;background:#fff}
.online-product__top{min-height:137px;padding:20px}
.online-product h3{margin:0 0 13px;font-size:17px;line-height:1.32}
.online-product h3 a{color:#062855;text-decoration:none}
.online-product__top>span{display:inline-block;padding:5px 9px;border-radius:15px;color:#fff;background:#062f61;font-size:10px;font-weight:800}
.online-product__top>span.is-remanufactured{color:#fff;background:#062855}
.online-product__top>span.is-overhauled{color:#d6aa3f;background:#111;box-shadow:0 0 0 2px rgba(166,124,46,.22)}
.online-product__top>span.is-repair{color:#fff;background:#a47827}
.online-product__top>span.is-used{color:#fff;background:#68717c}
.online-product__top>span.is-new{color:#fff;background:#276749}
.online-product__top>span.is-like-new{color:#fff;background:#287c78}
.online-product__top>span.is-defective{color:#fff;background:#9b2c2c}
.online-product__top>span.is-other{color:#fff;background:#53677b}
.online-product__models{min-height:72px;padding:0 20px 13px}
.online-product__models small{color:#60758b}
.online-product__models p{margin:5px 0 0;font-size:11px;line-height:1.4}
.online-product__image{display:grid;flex:0 0 230px;height:230px;min-height:0;overflow:hidden;place-items:center;background:#f0f3fa}
.online-product__image img{display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;padding:18px}
.online-product__image>span{font-size:34px;font-weight:900}
.online-product__meta{position:relative;z-index:1;display:flex;flex:1;min-height:142px;flex-direction:column;padding:18px 20px;background:#fff}
.online-product__meta p{margin:0 0 7px;color:#4f6c86;font-size:11px;overflow-wrap:anywhere}
.online-product__meta>div{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-top:auto;padding-top:17px}
.online-product__meta>div>strong{font-size:18px}
.online-product__meta a{color:#062855;font-weight:800;text-decoration:none}
.online-empty{padding:30px;border:1px solid #d0dce6;background:#fff}
.online-pagination{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:25px}
.online-pagination>a:last-child{text-align:right}
.online-pagination a,.online-pagination strong{display:inline-grid;min-width:38px;height:38px;place-items:center;border:1px solid #c6d4e0;color:#062855;background:#fff;text-decoration:none}
.online-pagination strong{color:#fff;background:#062f61}
.online-pagination>div{display:flex;gap:5px}
.online-pagination>div{grid-column:2;grid-row:1}
.online-pagination__prev{grid-column:1;grid-row:1;justify-self:start}
.online-pagination__next{grid-column:3;grid-row:1;justify-self:end}
@media(max-width:1050px){.online-groups{grid-template-columns:repeat(2,1fr)}
.online-filter form{grid-template-columns:repeat(2,1fr)}
.online-filter form>a{grid-column:1/-1;justify-self:end}
.online-products{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){.online-hero{padding:25px 19px}
.online-hero form{grid-template-columns:1fr}
.online-hero button{min-height:45px}
.online-heading{align-items:flex-start;flex-direction:column}
.online-groups,.online-filter form,.online-products{grid-template-columns:1fr}
.online-filter{padding:19px 14px}
.online-filter form>a{justify-self:start}
.online-product__top{min-height:auto}
.online-product__models{min-height:auto}
.online-product__image{flex-basis:210px;height:210px}
.online-product__meta{min-height:auto}
.online-pagination{grid-template-columns:1fr auto}
.online-pagination>div{grid-column:1/-1;grid-row:1;justify-content:center;margin-bottom:9px}
.online-pagination>a:last-child{text-align:right}
}
@media(max-width:650px){
.online-pagination>div{grid-column:1/-1;grid-row:1}
.online-pagination__prev{grid-column:1;grid-row:2}
.online-pagination__next{grid-column:2;grid-row:2}
}


/* German SPOB shop landing and model finder - 2026-10-16 */
.online-hero{padding:27px 34px;background:#f8fbff}
.online-hero h1{font-size:clamp(26px,3vw,38px);max-width:1000px;line-height:1.15}
.online-hero h2{margin:16px 0 5px;font-size:16px;color:#062855}
.online-specialties{color:#506b83;line-height:1.55;font-size:14px}
.online-hero .online-focus{margin:17px 0 0;padding-top:10px;border-top:1px solid #a47827;color:#506b83;font-size:13px;font-weight:400;letter-spacing:normal;text-transform:none}
.online-promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:12px 0}
.online-promises>div{display:grid;grid-template-columns:38px 1fr;column-gap:12px;align-content:start;padding:18px;border:1px solid #d7e1ea;background:#eaf2f8}
.online-promises b{grid-row:span 2;font-size:27px;line-height:1;color:#a47827}
.online-promises strong{font-size:14px}
.online-promises span{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin-top:4px;color:#526d86;font-size:12px;line-height:1.5}
.online-models{margin-top:16px;padding:20px 19px;border:1px solid #cedde9;background:#eff6fb;scroll-margin-top:15px}
.online-models .online-heading{margin:0 0 15px}
.online-models .online-heading p{margin:6px 0 0;color:#536f87;font-size:13px}
.online-models .online-heading h2{font-size:23px}
.online-carousel-wrap{display:flex;align-items:center;gap:8px;min-width:0}
.online-carousel{display:flex;min-width:0;flex:1;gap:9px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth;padding:4px 2px 10px}
.online-carousel::-webkit-scrollbar{display:none}
.online-carousel-arrow{flex:0 0 36px;width:36px;height:42px;border:1px solid #b4c7d8;border-radius:6px;background:#fff;color:#062855;cursor:pointer;font-size:31px;line-height:1}
.online-model-card{flex:0 0 calc((100% - 45px)/6);min-width:130px;scroll-snap-align:start;display:flex;align-items:center;flex-direction:column;padding:10px 7px;border:1px solid #d4e0e9;border-radius:5px;background:#fff;color:#062855;text-decoration:none;text-align:center}
.online-model-card.is-selected,.online-model-card:hover{border-color:#a47827;box-shadow:0 0 0 1px #a47827}
.online-model-card img{width:100%;height:78px;object-fit:contain}
.online-model-card strong{font-size:13px;text-transform:uppercase}
.online-model-card span{margin-top:3px;font-size:11px;color:#566c82;line-height:1.3}
.online-all-models{margin-top:6px;text-align:center}
.online-all-models>summary{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:39px;padding:7px 15px;border:1px solid #bb9b60;border-radius:6px;background:#fff;font-size:13px;font-weight:700;cursor:pointer;list-style:none}
.online-all-models>summary::-webkit-details-marker{display:none}
.online-all-models[open]>summary span{transform:rotate(180deg)}
.online-all-models-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:15px;text-align:center}
.online-all-models-grid a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px;border:1px solid #d7e2e9;background:#fff;color:#062855;text-decoration:none;font-size:12px}
.online-all-models-grid img{width:100%;height:75px;object-fit:contain}
.online-vehicle-choice{margin-top:18px;padding:16px;border:1px solid #c8d9e5;background:#fff;text-align:left}
.online-vehicle-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.online-vehicle-head h3{margin:0 0 13px;font-size:23px}
.online-vehicle-head>a{color:#062855;font-size:24px;text-decoration:none}
.online-body{margin:10px 0;border:1px solid #d7e1ea;border-radius:5px;overflow:hidden}
.online-body>summary{padding:14px 16px;background:#f8fbff;font-size:16px;font-weight:750;cursor:pointer}
.online-sales-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:12px}
.online-sale{min-width:0;border:1px solid #d7e1ea;border-radius:5px;background:#f5f8fb}
.online-sale[open]{grid-column:1/-1;border-color:#b69b65;background:#fff}
.online-sale>summary{padding:12px 14px;font-size:16px;font-weight:800;cursor:pointer}
.online-variants{display:grid;gap:2px;padding:0 9px 9px}
.online-variant{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:12px;border:1px solid #e0e7ed}
.online-variant>strong{font-size:13px}
.online-variant-facts{display:flex;gap:9px;flex-wrap:wrap;color:#536b83;font-size:12px}
.online-variant>a{display:inline-flex;align-items:center;padding:9px 12px;background:#062f61;color:#fff;text-decoration:none;font-size:12px;font-weight:700}
.online-section{padding-block:25px}
.online-groups>a{min-height:62px;transition:background .15s}
.online-groups>a:hover,.online-groups>a.is-selected{background:#e5eff9;border-color:#a47827}
.online-filter{scroll-margin-top:15px;margin-bottom:8px}
.online-state-filters{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0}
.online-state-filters>a{border:1px solid #b9c9d7;border-radius:20px;padding:9px 13px;background:#fff;color:#062855;font-weight:650;font-size:13px;text-decoration:none}
.online-state-filters>a.is-active{outline:2px solid #a47827;outline-offset:1px}
.online-state-filters>a.is-remanufactured{border-left:5px solid #062855}
.online-state-filters>a.is-overhauled{border-left:5px solid #c09739}
.online-state-filters>a.is-used{border-left:5px solid #68717c}
.online-state-filters>a.is-new{border-left:5px solid #276749}
.online-state-filters>a.is-like-new{border-left:5px solid #287c78}
.online-state-filters>a.is-defective{border-left:5px solid #9b2c2c}
.online-filter-summary{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.online-filter-summary a{display:inline-flex;align-items:center;padding:6px 9px;border:1px solid #d1dce6;background:white;color:#062855;text-decoration:none;font-size:12px}
.online-filter-summary a.online-clear{margin-left:auto;background:transparent;border:0;text-decoration:underline}
@media(max-width:1050px){.online-model-card{flex-basis:calc((100% - 27px)/4)}.online-all-models-grid{grid-template-columns:repeat(4,1fr)}.online-sales-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.online-hero{padding:22px 18px}.online-hero h1{font-size:27px}.online-promises{grid-template-columns:1fr;gap:6px}.online-promises>div{padding:12px}.online-models{padding:15px 9px}.online-models .online-heading h2{font-size:20px}.online-carousel-arrow{flex-basis:26px;width:26px;font-size:25px}.online-model-card{flex:0 0 70%;max-width:215px}.online-model-card img{height:100px}.online-all-models-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.online-sales-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.online-vehicle-choice{padding:10px}.online-variant{display:block}.online-variant-facts{margin:8px 0}.online-variant>a{margin-top:10px}.online-groups{grid-template-columns:repeat(2,minmax(0,1fr))}.online-groups>a{min-height:55px;padding:12px}.online-state-filters>a{font-size:12px}}
@media(max-width:360px){.online-sales-grid{grid-template-columns:1fr}.online-model-card{flex-basis:82%}}

/* Model navigation remains compact even with an active car selection. */
.online-carousel{scroll-padding-inline:2px}
.online-model-card.is-selected{border:2px solid #a47827;padding:9px 6px}
.online-all-models:not([open]) .online-all-models-grid{display:none}
.online-vehicle-choice{margin-top:12px}
.online-all-models-grid a:hover{border-color:#a47827;background:#f7fafc}
@media(max-width:650px){.online-vehicle-choice{margin-top:10px;padding:12px}.online-models{overflow:hidden}}

/* Selected Mercedes: compact detail summary directly below the persistent carousel. */
#shop-selection{scroll-margin-top:12px}
.online-selected-vehicle{margin-top:13px;padding:17px 19px;border:1px solid #d4e1eb;border-left:4px solid #a47827;background:#fff;text-align:left}
.online-selected-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.online-selected-top small{display:block;margin-bottom:5px;color:#9b772f;font-weight:800;font-size:11px;letter-spacing:.075em;text-transform:uppercase}
.online-selected-top h3{margin:0;color:#062855;font-size:clamp(18px,2vw,23px);line-height:1.3}
.online-selected-top p{margin:5px 0 0;color:#506b83;font-size:13px}
.online-change-vehicle{flex-shrink:0;border:1px solid #b7c8d7;border-radius:5px;padding:10px 12px;color:#062855;background:#f7fafc;text-decoration:none;font-size:12px;font-weight:800}
.online-vehicle-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 20px;margin:15px 0 0;padding-top:14px;border-top:1px solid #e2e9ef}
.online-vehicle-specs>div{min-width:0}.online-vehicle-specs dt{color:#60758b;font-size:11px}.online-vehicle-specs dd{margin:4px 0 0;color:#062855;font-size:13px;font-weight:700;overflow-wrap:anywhere}
.online-change-panel{margin:0;background:#fff;border:0;text-align:left;scroll-margin-top:15px}
.online-change-panel>summary{list-style:none;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.online-change-panel>summary:focus-visible{position:static;width:auto;height:auto;clip-path:none;padding:10px}
.online-change-panel[open]{padding:0 0 14px}
.online-change-panel .online-vehicle-choice{margin-top:0;border-top:0}
.online-selected-vehicle+.online-change-panel:not([open]){height:0}
@media(max-width:750px){.online-vehicle-specs{grid-template-columns:repeat(2,minmax(0,1fr))}.online-selected-top{flex-direction:column;gap:11px}.online-change-vehicle{align-self:flex-start}}
@media(max-width:420px){.online-vehicle-specs{grid-template-columns:1fr 1fr;column-gap:10px}.online-selected-vehicle{padding:13px}.online-vehicle-specs dd{font-size:12px}}

/* 2026-10-22: kompakter Shop-Einstieg; ONLINESHOP ist die Hauptueberschrift */
.online-shop .online-hero{padding:20px 28px 17px}
.online-shop .online-hero h1{font-size:clamp(28px,3vw,36px);line-height:1.12;margin:0 0 6px;max-width:none}
.online-shop .online-hero .online-hero__subtitle{margin:0 0 8px;color:#173b65;font-size:clamp(16px,1.6vw,21px);line-height:1.28;font-weight:750;letter-spacing:normal;text-transform:none}
.online-shop .online-hero>span{display:block;font-size:14px;line-height:1.45}
.online-shop .online-hero__special{margin-top:10px;color:#506b83;font-size:13px;line-height:1.45}
.online-shop .online-hero__special strong{color:#062855}
.online-shop .online-hero .online-focus{margin-top:10px;padding-top:8px;font-size:12px;line-height:1.4}
@media(max-width:650px){
 .online-shop .online-hero{padding:17px 16px 15px}
 .online-shop .online-hero h1{font-size:29px}
 .online-shop .online-hero .online-hero__subtitle{font-size:17px}
 .online-shop .online-hero>span{font-size:13px}
}