/* ============================================================
 * Moturo · R7 Design Energy · styles.css
 * Version: 2026-05-02
 * Loaded by Plenty via {% GetCSSFile() %} in htmlStructure.
 * System fonts only. No external resources.
 * ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font:15px/1.55 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#101013;background:#eceef1;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

:root{
  --ink:#0c0c10;--ink2:#16161c;--line-d:#2a2a32;
  --paper:#fff;--soft:#f5f1e8;--line:#e3e6eb;
  --mute:#6a6a72;--red:#EF0033;
  --display:800 1em "Impact","Haettenschweiler","Arial Narrow Bold","Oswald",sans-serif;
  --display-i:italic 800 1em "Impact","Haettenschweiler","Arial Narrow Bold","Oswald",sans-serif;
  --mono:ui-monospace,Consolas,monospace;
}

.canvas{background:#eceef1;padding:18px 12px 28px}
.island{max-width:1200px;margin:0 auto;background:#fff;border:1px solid #dcdfe4;border-radius:10px;box-shadow:0 1px 0 rgba(0,0,0,.02),0 8px 24px rgba(15,18,30,.06);overflow:hidden}

.bridge{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;background:#fff;border-bottom:1px solid var(--line)}
.bridge img{height:30px;width:auto}
.bridge__meta{font:600 11px/1.3 -apple-system,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);text-align:right}
.bridge__meta b{color:var(--ink);font-weight:700}
.bridge__meta span{display:block;margin-top:3px;font-weight:500;font-size:11.5px;letter-spacing:.04em;text-transform:none;color:var(--mute)}

.subbar{display:flex;flex-wrap:wrap;gap:8px 18px;padding:9px 18px;border-bottom:1px solid var(--line);background:#fafbfc;font-size:12px;color:var(--mute);list-style:none}
.subbar li{display:flex;align-items:center;gap:6px}
.subbar .dot{width:6px;height:6px;background:var(--red);border-radius:50%}

.tape{background:var(--ink);color:#fff;padding:10px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font:700 10.5px/1 -apple-system,sans-serif;letter-spacing:.32em;text-transform:uppercase;border-top:3px solid var(--red);border-bottom:1px solid var(--red)}
.tape .stripes{display:inline-flex;gap:3px;flex:none}
.tape .stripes b{display:inline-block;width:6px;height:16px;background:var(--red);transform:skewX(-22deg)}
.tape .sep{color:var(--red);letter-spacing:0;font-size:14px;font-weight:900}

.hero{background:var(--ink);color:#fff;padding:34px 18px 38px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;left:0;top:0;height:6px;width:48%;background:var(--red)}
.hero::after{content:"";position:absolute;right:-100px;top:-80px;width:400px;height:400px;border-radius:50%;background:radial-gradient(closest-side,rgba(239,0,51,.16),transparent 70%);pointer-events:none}
.hero__grid{display:grid;gap:22px;grid-template-columns:1fr;max-width:1164px;margin:0 auto;position:relative;z-index:1}

.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:6px 11px;background:transparent;color:#fff;border:1px solid var(--red);font:700 10.5px/1 -apple-system,sans-serif;letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px}
.eyebrow::before{content:"";width:6px;height:6px;background:var(--red);display:inline-block}

.sash{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;font:var(--display);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#fff}
.sash .bar{display:inline-block;width:30px;height:2px;background:var(--red)}
.sash em{font-style:italic;color:var(--red)}

.hero h1{font:var(--display-i);font-size:46px;line-height:.94;letter-spacing:-.005em;margin-bottom:14px;color:#fff} /* R8F: removed text-transform:lowercase to preserve $ListingTitle casing */
.hero .lede{font-size:15.5px;max-width:50ch;color:#cfcfd4;margin-bottom:18px}

.btnrow{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:13px 18px;font:700 12px/1 -apple-system,sans-serif;letter-spacing:.18em;text-transform:uppercase;background:var(--red);color:#fff;border:2px solid var(--red)}
.btn--w{background:transparent;color:#fff;border-color:#fff}

.notice{margin-top:16px;padding:12px 14px;background:var(--ink2);border-left:4px solid var(--red);font-size:13px;color:#dcdce0}
.notice b{font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--red);display:block;margin-bottom:4px}

/* ---------- Galerie · Radio-Pattern (Plenty-Loop 1..15) ---------- */
.gallery{position:relative}
.gallery__main{background:var(--soft);border:1px solid var(--line-d);aspect-ratio:4/3;position:relative;overflow:hidden}
.gallery__stamp{position:absolute;right:10px;top:10px;border:2px solid var(--red);color:var(--red);background:rgba(255,255,255,.92);font:700 10px/1 -apple-system,sans-serif;letter-spacing:.2em;text-transform:uppercase;padding:6px 9px;transform:rotate(4deg);z-index:2}

.gallery input[type="radio"]{position:absolute;opacity:0;pointer-events:none;width:0;height:0}

.slot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .18s ease}
.slot img{max-width:100%;max-height:100%;object-fit:contain}

.gallery #r1:checked ~ .gallery__main #s1,
.gallery #r2:checked ~ .gallery__main #s2,
.gallery #r3:checked ~ .gallery__main #s3,
.gallery #r4:checked ~ .gallery__main #s4,
.gallery #r5:checked ~ .gallery__main #s5,
.gallery #r6:checked ~ .gallery__main #s6,
.gallery #r7:checked ~ .gallery__main #s7,
.gallery #r8:checked ~ .gallery__main #s8,
.gallery #r9:checked ~ .gallery__main #s9,
.gallery #r10:checked ~ .gallery__main #s10,
.gallery #r11:checked ~ .gallery__main #s11,
.gallery #r12:checked ~ .gallery__main #s12,
.gallery #r13:checked ~ .gallery__main #s13,
.gallery #r14:checked ~ .gallery__main #s14,
.gallery #r15:checked ~ .gallery__main #s15{opacity:1;z-index:2}

.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:8px}
.thumbs label{display:block;aspect-ratio:1/1;background:var(--ink2);border:1px solid var(--line-d);padding:5px;position:relative;cursor:pointer}
.thumbs label img{width:100%;height:100%;object-fit:contain;background:var(--soft)}
.thumbs label::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}

.gallery #r1:checked ~ .thumbs label[for="r1"]::after,
.gallery #r2:checked ~ .thumbs label[for="r2"]::after,
.gallery #r3:checked ~ .thumbs label[for="r3"]::after,
.gallery #r4:checked ~ .thumbs label[for="r4"]::after,
.gallery #r5:checked ~ .thumbs label[for="r5"]::after,
.gallery #r6:checked ~ .thumbs label[for="r6"]::after,
.gallery #r7:checked ~ .thumbs label[for="r7"]::after,
.gallery #r8:checked ~ .thumbs label[for="r8"]::after,
.gallery #r9:checked ~ .thumbs label[for="r9"]::after,
.gallery #r10:checked ~ .thumbs label[for="r10"]::after,
.gallery #r11:checked ~ .thumbs label[for="r11"]::after,
.gallery #r12:checked ~ .thumbs label[for="r12"]::after,
.gallery #r13:checked ~ .thumbs label[for="r13"]::after,
.gallery #r14:checked ~ .thumbs label[for="r14"]::after,
.gallery #r15:checked ~ .thumbs label[for="r15"]::after{background:var(--red)}

.gallery--single .gallery__main{aspect-ratio:4/3}
.gallery--single .slot{opacity:1}

/* ---------- Sektionen ---------- */
.sec{padding:34px 18px;background:var(--paper)}
.sec--ink{background:var(--ink);color:#fff}
.sec--soft{background:var(--soft)}
.sec__in{max-width:1164px;margin:0 auto}
.sec__head{display:flex;align-items:flex-end;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.sec__num{font:var(--display-i);font-size:60px;line-height:.85;color:var(--red);letter-spacing:-.02em}
.sec__t{font:var(--display-i);font-size:30px;line-height:.95;text-transform:lowercase;color:var(--ink)}
.sec--ink .sec__t{color:#fff}
.sec__hr{flex:1;height:3px;background:var(--ink);align-self:flex-end;margin-bottom:8px}
.sec--ink .sec__hr{background:var(--red)}

.prose{max-width:62ch}
.prose p+p{margin-top:1em}
.sec--ink .prose{color:#dadadf}

.spec{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff;border:2px solid var(--ink);margin-bottom:14px}
.spec th,.spec td{padding:11px 14px;border-bottom:1px solid #e6e0d2;text-align:left;vertical-align:top}
.spec th{width:42%;font:700 11px/1 -apple-system,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.spec td{font-family:var(--mono);color:var(--ink)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}

.spec-wrap{margin-bottom:16px;background:#fff;border:2px solid var(--ink)}
.data-head{background:#fff;padding:13px 16px;border-bottom:1px solid #e6e0d2;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.data-head h3{font:var(--display-i);font-size:24px;line-height:1;text-transform:lowercase;color:var(--ink)}
.pill--light{font:700 10px/1 -apple-system,sans-serif;letter-spacing:.18em;text-transform:uppercase;background:var(--red);color:#fff;padding:5px 9px}
.spec-wrap .spec{border:0;margin:0}
.fit-extra-note{margin-top:12px;padding:12px 14px;background:#fff;border-left:4px solid var(--red);font-size:13px;color:var(--ink)}

/* Plenty technicalData currently contains the vehicle compatibility table.
   It arrives as #kompTable > table#collapse, so we style that native output
   instead of expecting synthetic <article> rows. */
.fit-data{background:#fff}
.fit-data--scroll{max-height:380px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--red) #f5f1e8}
.fit-data--scroll::-webkit-scrollbar{width:8px}
.fit-data--scroll::-webkit-scrollbar-thumb{background:var(--red)}
.fit-data--scroll::-webkit-scrollbar-track{background:#f5f1e8}
.fit-data #kompTable{width:100%;margin:0;padding:0}
.fit-data table{width:100%;border-collapse:collapse;background:#fff;font-size:13.5px}
.fit-data thead th{padding:12px 16px;text-align:left;background:#f5f1e8;color:var(--ink);font:700 11px/1.2 -apple-system,sans-serif;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid #e6e0d2}
.fit-data td{padding:11px 16px;border-bottom:1px solid #e6e0d2;color:var(--ink);vertical-align:top;position:relative}
.fit-data td::before{content:"";display:inline-block;width:6px;height:18px;background:var(--red);transform:skewY(-18deg);margin-right:10px;vertical-align:-4px}
.fit-data tr:nth-child(even) td{background:#fff}
.fit-data tr:nth-child(odd) td{background:#fbf8ef}
.fit-data a{color:var(--ink);text-decoration:none;pointer-events:none}


/* ---------- Fitment · drei Cases ---------- */
.fit-wrap{background:#fff;border:2px solid var(--ink)}
.fit-head{background:var(--ink);color:#fff;padding:14px 18px;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.fit-head h3{font:var(--display-i);font-size:24px;line-height:1;text-transform:lowercase;color:#fff}
.fit-head .pill{font:700 10px/1 -apple-system,sans-serif;letter-spacing:.18em;text-transform:uppercase;background:var(--red);color:#fff;padding:5px 9px}

.fit{display:grid;gap:0}
.fit article{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:13px 16px;border-bottom:1px solid #e6e0d2;position:relative}
.fit article:last-child{border-bottom:0}
.fit__tag{width:28px;height:42px;flex:none;position:relative}
.fit__tag::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--red);transform:skewY(-18deg);transform-origin:top left}
.fit__tag::after{content:"";position:absolute;left:8px;top:8px;width:6px;height:26px;background:var(--ink);transform:skewY(-18deg);transform-origin:top left}
.fit .mfg{font:700 11px/1 -apple-system,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:3px}
.fit .mdl{font-size:13.5px;color:var(--ink)}
.fit .yr{font-family:var(--mono);font-size:12px;color:#7a7a82;white-space:nowrap}

.fit--scroll{max-height:360px;overflow-y:auto;position:relative;background:linear-gradient(#fff,#fff) top/100% 24px no-repeat,linear-gradient(#fff,#fff) bottom/100% 24px no-repeat,radial-gradient(at top,rgba(12,12,16,.18),transparent 70%) top/100% 18px no-repeat,radial-gradient(at bottom,rgba(12,12,16,.18),transparent 70%) bottom/100% 18px no-repeat,#fff}
.fit--scroll{scrollbar-width:thin;scrollbar-color:var(--red) #f5f1e8}
.fit--scroll::-webkit-scrollbar{width:8px}
.fit--scroll::-webkit-scrollbar-thumb{background:var(--red)}
.fit--scroll::-webkit-scrollbar-track{background:#f5f1e8}
.fit-scrollnote{padding:8px 16px;background:#f5f1e8;border-top:1px solid #e6e0d2;font:600 11px/1.4 -apple-system,sans-serif;letter-spacing:.04em;color:#6a6a72}

.fit-index{padding:12px 16px;display:flex;flex-wrap:wrap;gap:6px;background:#f5f1e8;border-bottom:1px solid #e6e0d2}
.fit-index a{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 6px;background:#fff;border:1px solid var(--ink);font:700 11px/1 -apple-system,sans-serif;letter-spacing:.04em;color:var(--ink)}
.fit-index a:hover{background:var(--red);color:#fff;border-color:var(--red)}
.fit-group{border-bottom:1px solid #e6e0d2}
.fit-group:last-child{border-bottom:0}
.fit-group > summary{list-style:none;cursor:pointer;padding:13px 16px;display:flex;justify-content:space-between;align-items:center;background:#fff;font:var(--display-i);font-size:18px;text-transform:lowercase;color:var(--ink)}
.fit-group > summary::-webkit-details-marker{display:none}
.fit-group > summary::after{content:"+";font:var(--display);font-size:22px;color:var(--red);margin-left:12px}
.fit-group[open] > summary{background:var(--ink);color:#fff}
.fit-group[open] > summary::after{content:"–"}
.fit-group[open] > summary{border-bottom:1px solid var(--red)}

/* ---------- Trust ---------- */
.trust{display:grid;gap:0;grid-template-columns:1fr;border:2px solid var(--red);background:var(--ink)}
.trust article{background:var(--ink);color:#fff;padding:16px;border-bottom:1px solid var(--line-d)}
.trust article:last-child{border-bottom:0}
.trust h5{font:var(--display-i);font-size:22px;line-height:1;text-transform:lowercase;color:var(--red);margin-bottom:4px}
.trust p{font-size:13px;color:#cfcfd4}

/* ---------- Footer ---------- */
.foot{background:#000;color:#bdbdc4;padding:30px 18px 22px}
.foot__in{max-width:1164px;margin:0 auto}
.foot__row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.foot__row img{height:32px;width:auto;display:block}
.foot__claim{font:var(--display-i);font-size:22px;line-height:1;text-transform:lowercase;color:#fff;margin-left:auto}
.foot hr{border:0;border-top:1px solid #1a1a1e;margin:18px 0 12px}
.foot__legal{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:11.5px;color:#7d7d86;letter-spacing:.04em}
.foot__legal b{color:#dcdce0;font-weight:600}

@media (min-width:560px){
  .trust{grid-template-columns:repeat(3,1fr)}
  .trust article{border-bottom:0;border-right:1px solid var(--line-d)}
  .trust article:last-child{border-right:0}
}
@media (min-width:900px){
  .canvas{padding:24px 16px 36px}
  .hero__grid{grid-template-columns:1.1fr 1fr;align-items:center;gap:34px}
  .hero h1{font-size:74px}
  .sec__num{font-size:96px}
  .sec__t{font-size:46px}
  .foot__claim{font-size:34px}
}

/* ============================================================
 * R8F overrides · Moturo eBay template iteration
 * Stacked on top of R7 base; only declared rules below change.
 * ============================================================ */

/* --- A. Brand rail
 * Two-cell layout: ink left with logo + red wedge transition, white right
 * with right-aligned meta. No content crosses the boundary. */
.bridge{display:grid !important;grid-template-columns:360px 1fr;align-items:stretch;
        padding:0 !important;background:#fff;border-bottom:1px solid var(--line);
        min-height:124px;gap:0;overflow:hidden}
.bridge > img{display:none}
.bridge__brand{background:var(--ink);display:flex;align-items:center;
               padding:0 34px 0 42px;position:relative;flex:none;
               min-width:360px;min-height:124px}
.bridge__brand::after{content:"";position:absolute;right:-54px;top:0;bottom:0;
                      width:92px;background:var(--red);transform:skewX(-18deg);
                      transform-origin:top right}
.bridge__brand img{height:74px;width:auto;position:relative;z-index:1}
.bridge__meta{display:flex;flex-direction:column;justify-content:center;
              align-items:flex-end;text-align:right;
              padding:18px 24px 18px 84px;background:#fff}
.bridge__meta b{display:block;color:var(--ink);
                font:800 11.5px/1.2 -apple-system,"Segoe UI",sans-serif;
                letter-spacing:.16em;text-transform:uppercase;margin-bottom:4px}
.bridge__meta span{display:block;font:600 12px/1.3 -apple-system,sans-serif;
                   letter-spacing:.04em;text-transform:none;color:#65656d}

/* --- A.bis. Sub-bar text (replace carrier-specific ref with neutral shipping text) */
.subbar li:last-child{font-size:0}
.subbar li:last-child::after{content:"Versand · DE/EU";font-size:12px}

/* --- B. Hero title
 * Preserve exact ListingTitle casing. Replace lowercase Impact display
 * with a readable display sans-serif, controlled width, responsive clamp. */
.hero h1{font:850 clamp(28px,3.4vw,46px)/1.08
         -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
         font-style:normal !important;
         text-transform:none !important;
         letter-spacing:-.018em;max-width:30ch;
         margin-bottom:14px;color:#fff}
.hero .lede{max-width:54ch}

/* --- C. Gallery badge above image, robust stacking */
.gallery__main{isolation:isolate}
.gallery__stamp{z-index:30 !important;pointer-events:none;
                box-shadow:0 4px 12px rgba(0,0,0,.18)}
.slot{z-index:1}
.gallery #r1:checked ~ .gallery__main #s1,
.gallery #r2:checked ~ .gallery__main #s2,
.gallery #r3:checked ~ .gallery__main #s3,
.gallery #r4:checked ~ .gallery__main #s4,
.gallery #r5:checked ~ .gallery__main #s5,
.gallery #r6:checked ~ .gallery__main #s6,
.gallery #r7:checked ~ .gallery__main #s7,
.gallery #r8:checked ~ .gallery__main #s8,
.gallery #r9:checked ~ .gallery__main #s9,
.gallery #r10:checked ~ .gallery__main #s10,
.gallery #r11:checked ~ .gallery__main #s11,
.gallery #r12:checked ~ .gallery__main #s12,
.gallery #r13:checked ~ .gallery__main #s13,
.gallery #r14:checked ~ .gallery__main #s14,
.gallery #r15:checked ~ .gallery__main #s15{z-index:2}

/* --- F. Vehicle fitment markers (R7 idea: red slanted bar + black mark)
 * Use absolute pseudos with padding-left so the markers never push text
 * out of the cell or hang outside the column. */
.fit-data td{padding-left:36px;position:relative}
.fit-data td::before{content:"";position:absolute;left:14px;top:11px;
                     width:6px;height:18px;background:var(--red);
                     transform:skewY(-18deg);margin:0;display:block;
                     vertical-align:baseline}
.fit-data td::after{content:"";position:absolute;left:23px;top:14px;
                    width:5px;height:14px;background:var(--ink);
                    transform:skewY(-18deg)}

/* --- D. Description prose · shared typography fixes
 * Headings, bold, lists with bullets that stay inside the column
 * and do not hang outside the text. */
.prose h2{font:800 22px/1.2 -apple-system,"Segoe UI",sans-serif;
          color:#fff;margin:0 0 12px;letter-spacing:-.005em}
.prose h3{font:800 14px/1.25 -apple-system,"Segoe UI",sans-serif;
          color:var(--red);margin:1.4em 0 .55em;
          letter-spacing:.08em;text-transform:uppercase}
.prose h3::before{content:"";display:inline-block;width:18px;height:2px;
                  background:var(--red);vertical-align:middle;margin-right:10px}
.prose p{margin:0;font-size:14.5px;line-height:1.65;color:#dadadf}
.prose p + p{margin-top:.8em}
.prose strong{color:#fff;font-weight:700}
.prose ul,.prose ol{margin:.55em 0 .9em;padding-left:1.3em;list-style:none}
.prose ul li,.prose ol li{position:relative;padding:.18em 0 .18em 0;
                          font-size:14.5px;line-height:1.55;color:#dadadf}
.prose ul li::before{content:"";position:absolute;left:-1.05em;top:.7em;
                     width:8px;height:2px;background:var(--red);
                     transform:skewX(-18deg)}
.prose ol{counter-reset:moturo-step;padding-left:1.6em}
.prose ol li{counter-increment:moturo-step}
.prose ol li::before{content:counter(moturo-step);position:absolute;left:-1.6em;
                     top:0;width:1.2em;height:1.2em;font:700 11px/1.2em -apple-system,sans-serif;
                     color:var(--red);text-align:center}
.prose br{display:block;content:"";margin-top:.2em}

/* Light-prose variant (for variants that put description on a paper panel) */
.prose--light h2{color:var(--ink)}
.prose--light p,.prose--light li{color:#27272d}
.prose--light strong{color:var(--ink)}

/* --- E. Footer text variants (R7 footer structure preserved) */
.foot__legal span:nth-child(1){font-size:0}
.foot__legal span:nth-child(1)::after{
  content:"Verkauf durch Motokay · offizieller Moturo-Fachhändler";font-size:11.5px}
.foot__legal span:nth-child(1) b{display:none}
.foot__legal span:nth-child(2){font-size:0}
.foot__legal span:nth-child(2)::after{
  content:"Marke Moturo · Performance Brand";font-size:11.5px}
.foot__legal span:nth-child(2) b{display:none}



/* --- F. Asset-free Moturo logo
 * eBay cannot resolve local package paths like assets/logo_*.png. This CSS logo
 * keeps the template self-contained and visible in the header + footer. */
.moturo-logo{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;line-height:1}
.moturo-logo__mark{width:58px;height:42px;display:inline-block;position:relative;flex:none;
                   background:linear-gradient(135deg,transparent 0 18%,var(--red) 18% 58%,transparent 58% 100%);
                   transform:skewX(-10deg)}
.moturo-logo__mark::before,.moturo-logo__mark::after{content:"";position:absolute;background:#fff;transform:skewX(-18deg)}
.moturo-logo__mark::before{left:13px;top:9px;width:10px;height:24px}
.moturo-logo__mark::after{left:30px;top:9px;width:10px;height:24px}
.moturo-logo__word{font:900 italic 30px/1 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
                   letter-spacing:-.06em;text-transform:lowercase;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.bridge__brand .moturo-logo{position:relative;z-index:1}
.foot__row .moturo-logo{margin-right:4px}
.foot__row .moturo-logo__mark{width:42px;height:30px}
.foot__row .moturo-logo__mark::before{left:9px;top:7px;width:7px;height:17px}
.foot__row .moturo-logo__mark::after{left:22px;top:7px;width:7px;height:17px}
.foot__row .moturo-logo__word{font-size:24px}

/* --- G. Universalartikel formatting
 * Plenty renders universal compatibility as plain text instead of the usual
 * vehicle table. Style that text case and hide the scroll hint only there. */
.fit-data:not(:has(table)){padding:15px 18px 15px 42px;max-height:none;overflow:visible;
                           font:700 14px/1.35 -apple-system,"Segoe UI",sans-serif;
                           letter-spacing:.04em;color:var(--ink);position:relative;background:#fff}
.fit-data:not(:has(table))::before{content:"";position:absolute;left:18px;top:17px;width:7px;height:20px;
                                    background:var(--red);transform:skewY(-18deg)}
.fit-data:not(:has(table)) + .fit-scrollnote{display:none}
.fit-data:has(table) + .fit-scrollnote{display:block}

/* --- Mobile adjustments for new brand rail and title */
@media (max-width:899px){
  .bridge{grid-template-columns:1fr;min-height:0}
  .bridge__brand{justify-content:center;padding:14px 18px;min-width:0;min-height:92px}
  .bridge__brand::after{display:none}
  .bridge__brand img{height:56px}
  .bridge__meta{align-items:center;text-align:center;
                padding:12px 18px 14px}
  .hero h1{max-width:100%;font-size:clamp(26px,7vw,36px)}
  .hero .lede{max-width:100%}
}

/* F1 · Editorial article description
 * One column, controlled max-width centered. Eyebrow + lead paragraph
 * styled as an opening. Subtle frame so the text never floats in empty
 * black space — instead reads as a deliberately-set article. */
.desc-editorial{max-width:780px;margin:0 auto;position:relative;
                background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 80%);
                border-left:3px solid var(--red);
                padding:30px 30px 28px 36px}
.desc-editorial::before{content:"essay · 01";position:absolute;left:36px;top:-10px;
                        background:var(--red);color:#fff;
                        font:800 10px/1 -apple-system,sans-serif;
                        letter-spacing:.22em;text-transform:uppercase;
                        padding:5px 10px}
.desc-editorial > h2{font:850 28px/1.15 -apple-system,"Segoe UI",sans-serif;
                     color:#fff;letter-spacing:-.012em;
                     margin:8px 0 18px;max-width:24ch}
.desc-editorial > p:first-of-type{font-size:17px;line-height:1.6;color:#f3f3f6;
                                  margin-bottom:18px;max-width:62ch}
.desc-editorial > p:first-of-type strong{color:#fff}
.desc-editorial > p{max-width:64ch}
.desc-editorial ul,.desc-editorial ol{max-width:62ch}
.desc-editorial h3{margin-top:1.7em}
@media (min-width:900px){
  .desc-editorial{padding:34px 44px 30px 50px}
}

/* ============================================================
 * R8F Hotfix 2026-05-03 15:02
 * Stable SVG logo + Universalartikel row. Vehicle output is not restyled here.
 * ============================================================ */
.bridge__brand{padding-left:20px!important;padding-right:34px!important}
.bridge__brand .moturo-logo-svg{display:block!important;width:260px!important;max-width:260px!important;height:auto!important;position:relative;z-index:2}
.foot__row .moturo-logo-svg{display:block!important;width:170px!important;max-width:170px!important;height:auto!important;flex:none}
.fit-scrollnote{display:none!important}
.fit-wrap .fit-data.fit-data--scroll > p,
.fit-wrap .fit-data.fit-data--scroll > p:first-child:last-child{display:block!important;position:relative!important;margin:0!important;width:100%!important;padding:12px 16px 12px 55px!important;background:#fbf8ef!important;border:0!important;border-bottom:1px solid #e6e0d2!important;color:#0c0c10!important;font:400 13.5px/1.35 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;letter-spacing:0!important;text-align:left!important;vertical-align:middle!important;}
.fit-wrap .fit-data.fit-data--scroll > p::before{content:""!important;position:absolute!important;left:21px!important;top:13px!important;width:8px!important;height:28px!important;background:#EF0033!important;transform:skewY(-18deg)!important;margin:0!important;display:block!important;}
.fit-wrap .fit-data.fit-data--scroll > p::after{content:""!important;position:absolute!important;left:34px!important;top:17px!important;width:6px!important;height:20px!important;background:#0c0c10!important;transform:skewY(-18deg)!important;margin:0!important;display:block!important;}

/* ============================================================
 * R8F Hotfix 2026-05-03 21:02
 * Empty fitment cells: hide the red/black marker pair when Plenty outputs
 * an actually empty <td></td>. Keeps markers for real model/year/power/ccm
 * values, removes orphan slashes from missing Leistung/Baujahr/Hubraum cells.
 * ============================================================ */
.fit-data td:empty{padding-left:16px!important}
.fit-data td:empty::before,
.fit-data td:empty::after{content:none!important;display:none!important;background:transparent!important;width:0!important;height:0!important;margin:0!important}