/* =========================================================
   EHRL ROTAX SHOP – EXPLOSIONSZEICHNUNGEN V1.5
   Kompakt / Groß / vollständig minimiert
   CSP-sichere SVG-Hotspots
   ========================================================= */

.exploded-section{
  background:#fff;
  padding-top:30px!important;
  padding-bottom:28px!important;
}

.exploded-panel{
  margin:0;
  border:1px solid #d7e2ee;
  border-radius:18px;
  background:#fff;
  box-shadow:0 14px 40px rgba(16,45,82,.08);
  overflow:hidden;
}

.exploded-panel-summary{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:16px 20px;
  background:linear-gradient(180deg,#fff 0%,#f7faff 100%);
}

.exploded-panel:not(.is-minimized) .exploded-panel-summary{
  border-bottom:1px solid #e2ebf4;
}

.exploded-summary-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#eaf3ff;
  color:#176ee8;
}

.exploded-summary-icon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.exploded-summary-copy{
  min-width:0;
  display:grid;
  gap:3px;
}

.exploded-summary-eyebrow{
  color:#176ee8;
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.10em;
}

.exploded-summary-copy strong{
  color:#07182d;
  font-size:1.08rem;
  line-height:1.25;
}

.exploded-summary-copy small{
  color:#687a90;
  line-height:1.35;
}

.exploded-summary-meta{
  display:flex;
  align-items:center;
  gap:12px;
  color:#66788e;
  font-size:.8rem;
  font-weight:750;
}

.exploded-summary-actions{
  display:flex;
  align-items:center;
  gap:7px;
}

.exploded-action-button,
.exploded-expand-link{
  border:0;
  border-radius:9px;
  background:#176ee8;
  color:#fff;
  font:inherit;
  font-weight:850;
  cursor:pointer;
  white-space:nowrap;
}

.exploded-action-button{
  padding:9px 13px;
}

.exploded-action-button--secondary{
  background:#eef4fb;
  color:#174e91;
  border:1px solid #cbdced;
}

.exploded-expand-link{
  padding:7px 11px;
  font-size:.78rem;
}

.exploded-action-button:not(.exploded-action-button--secondary):hover,
.exploded-expand-link:hover{
  background:#0d4ea8;
}

.exploded-action-button--secondary:hover{
  background:#ddeaf7;
}

.exploded-panel-body{
  display:block;
}

.exploded-panel.is-minimized .exploded-panel-body{
  display:none;
}

.exploded-panel-content{
  padding:14px;
}

.exploded-intro{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  margin-bottom:16px;
}

.exploded-intro .eyebrow{margin:0 0 5px}
.exploded-intro h3{margin:0 0 8px;color:#07182d;font-size:1.2rem}
.exploded-intro p{max-width:760px;margin:0;color:#54677d;line-height:1.6}
.exploded-source{max-width:330px;color:#7a899a;text-align:right;line-height:1.4}

.exploded-image-wrap{
  border:1px solid #e0e8f1;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}

.exploded-image-stage{
  width:min(100%,980px);
  margin:0 auto;
  padding:12px;
  background:#fff;
  transition:width .2s ease;
}

.exploded-canvas{
  position:relative;
  width:100%;
  line-height:0;
}

.exploded-canvas>img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  margin:0 auto;
}

.exploded-svg-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  z-index:5;
}

.exploded-svg-link{cursor:pointer;outline:none}
.exploded-svg-hit{fill:transparent;pointer-events:all}

.exploded-svg-marker{
  fill:#176ee8;
  stroke:#fff;
  stroke-width:3;
  filter:drop-shadow(0 3px 5px rgba(8,35,75,.35));
  transition:fill .15s ease;
}

.exploded-svg-number{
  fill:#fff;
  font-family:Arial,Helvetica,sans-serif;
  font-weight:900;
  text-anchor:middle;
  dominant-baseline:central;
  pointer-events:none;
  user-select:none;
}

.exploded-svg-link:hover .exploded-svg-marker,
.exploded-svg-link:focus .exploded-svg-marker{
  fill:#0d4ea8;
  stroke:#d9eaff;
  stroke-width:4;
}

.exploded-svg-link.is-unavailable{cursor:help}
.exploded-svg-link.is-unavailable .exploded-svg-marker{fill:#8997a8}

/* Kompaktansicht */
.exploded-panel:not(.is-expanded):not(.is-minimized) .exploded-intro{
  display:none;
}

.exploded-panel:not(.is-expanded):not(.is-minimized) .exploded-image-stage{
  width:min(100%,260px);
  padding:8px;
}

.exploded-panel:not(.is-expanded):not(.is-minimized) .exploded-image-wrap{
  width:max-content;
  max-width:100%;
  margin:0 auto;
}

.exploded-panel:not(.is-expanded):not(.is-minimized) .exploded-parts-list{
  display:none;
}

.exploded-compact-hint{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:8px;
  color:#718197;
  font-size:.78rem;
}

/* Großansicht */
.exploded-panel.is-expanded .exploded-image-stage{
  width:min(100%,980px);
  padding:12px;
}

.exploded-panel.is-expanded .exploded-image-wrap{
  width:auto;
  max-width:none;
  margin:0;
}

.exploded-panel.is-expanded .exploded-intro{
  display:flex;
}

.exploded-panel.is-expanded .exploded-parts-list{
  display:block;
}

.exploded-panel.is-expanded .exploded-compact-hint{
  display:none;
}

/* vollständig minimiert */
.exploded-panel.is-minimized{
  box-shadow:0 6px 20px rgba(16,45,82,.06);
}

.exploded-panel.is-minimized .exploded-panel-summary{
  padding-top:11px;
  padding-bottom:11px;
}

.exploded-panel.is-minimized .exploded-summary-icon{
  width:36px;
  height:36px;
}

.exploded-panel.is-minimized .exploded-summary-copy small{
  color:#176ee8;
  font-weight:700;
}

.exploded-panel.is-minimized [data-exploded-minimize]{
  display:none;
}

/* Minimiert: nur Titel + Button zum erneuten Anzeigen */
.exploded-panel.is-minimized .exploded-summary-icon,
.exploded-panel.is-minimized .exploded-summary-eyebrow,
.exploded-panel.is-minimized .exploded-summary-copy small,
.exploded-panel.is-minimized .exploded-summary-meta > span:first-child{
  display:none;
}

.exploded-panel.is-minimized .exploded-panel-summary{
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
}

.exploded-panel.is-minimized .exploded-summary-copy{
  display:block;
}

.exploded-panel.is-minimized .exploded-summary-meta{
  margin-left:auto;
}

.exploded-parts-list{
  margin-top:14px;
  border:1px solid #e0e8f1;
  border-radius:12px;
  background:#f7faff;
  overflow:hidden;
}

.exploded-parts-list>summary{
  cursor:pointer;
  padding:14px 16px;
  font-weight:850;
  color:#174e91;
}

.exploded-parts-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:0 14px 14px;
}

.exploded-part-link{
  display:grid;
  gap:3px;
  border:1px solid #d9e4ef;
  border-radius:12px;
  padding:11px 12px;
  background:#fff;
  color:#07182d;
  text-decoration:none;
}

.exploded-part-link:hover{
  border-color:#83b4ee;
  box-shadow:0 5px 16px rgba(22,86,157,.08);
}

.exploded-part-link strong{color:#1769c2;font-size:.78rem}
.exploded-part-link span{font-weight:750}
.exploded-part-link small{color:#6f8094}
.exploded-part-link em{color:#1769c2;font-size:.78rem;font-style:normal;font-weight:800}
.exploded-part-link.is-unavailable{opacity:.72}

.product-card.is-exploded-target{
  outline:3px solid #2d7ff9;
  outline-offset:4px;
  box-shadow:0 0 0 8px rgba(45,127,249,.12),0 18px 45px rgba(15,56,108,.18);
  animation:explodedPulse 1.1s ease 2;
}

@keyframes explodedPulse{
  50%{transform:translateY(-3px)}
}

@media(max-width:850px){
  .exploded-panel-summary{
    grid-template-columns:42px minmax(0,1fr);
    padding:13px 14px;
  }

  .exploded-summary-icon{width:38px;height:38px}

  .exploded-summary-meta{
    grid-column:1 / -1;
    justify-content:flex-end;
  }

  .exploded-panel-content{padding:10px}
  .exploded-intro{flex-direction:column;gap:10px}
  .exploded-source{max-width:none;text-align:left}
  .exploded-parts-grid{grid-template-columns:1fr 1fr}

  .exploded-panel:not(.is-expanded):not(.is-minimized) .exploded-image-stage{
    width:min(100%,230px);
  }
}

@media(max-width:520px){
  .exploded-section{
    padding-top:20px!important;
    padding-bottom:20px!important;
  }

  .exploded-panel-summary{
    grid-template-columns:34px minmax(0,1fr);
    gap:9px;
    padding:11px 12px;
  }

  .exploded-summary-icon{
    width:32px;
    height:32px;
  }

  .exploded-summary-copy strong{font-size:.94rem}
  .exploded-summary-copy small{font-size:.72rem}

  .exploded-summary-meta{
    grid-column:1 / -1;
    justify-content:flex-end;
    margin-top:2px;
  }

  .exploded-summary-actions{
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .exploded-action-button{
    padding:7px 9px;
    font-size:.75rem;
  }

  .exploded-panel-content{padding:7px}
  .exploded-intro h3{font-size:1.05rem}
  .exploded-intro p{font-size:.9rem}
  .exploded-parts-grid{grid-template-columns:1fr}

  .exploded-panel:not(.is-expanded):not(.is-minimized) .exploded-image-stage{
    width:min(100%,205px);
  }

  .exploded-compact-hint{
    flex-direction:column;
    gap:5px;
  }
}


/* =========================================================
   V1.6 – Klick auf kleine Zeichnung = vergrößern
   ========================================================= */

.exploded-panel:not(.is-expanded):not(.is-minimized) .exploded-image-wrap {
  cursor: zoom-in;
}

/* Die Hotspots behalten ihren eigenen Zeiger. */
.exploded-panel:not(.is-expanded):not(.is-minimized) .exploded-svg-link {
  cursor: pointer;
}

/* In der Großansicht kein Zoom-Cursor mehr auf der Bildfläche. */
.exploded-panel.is-expanded .exploded-image-wrap {
  cursor: default;
}

/* =========================================================
   V2 - mehrere Artikelvarianten pro Positionsnummer
   ========================================================= */

.exploded-part-position{
  display:grid;
  gap:8px;
  align-content:start;
  border:1px solid #d9e4ef;
  border-radius:12px;
  padding:11px 12px;
  background:#fff;
}

.exploded-part-position>strong{
  color:#1769c2;
  font-size:.78rem;
}

.exploded-part-variant{
  display:grid;
  gap:3px;
  width:100%;
  border:1px solid #e0e7ef;
  border-radius:9px;
  padding:9px 10px;
  background:#f8fbff;
  color:#07182d;
  text-align:left;
  font:inherit;
  cursor:pointer;
}

.exploded-part-variant:hover:not(:disabled),
.exploded-part-variant:focus-visible:not(:disabled){
  border-color:#83b4ee;
  background:#eef6ff;
  outline:none;
  box-shadow:0 4px 12px rgba(22,86,157,.08);
}

.exploded-part-variant span{
  font-weight:750;
  line-height:1.3;
}

.exploded-part-variant small{
  color:#6f8094;
}

.exploded-part-variant em{
  color:#1769c2;
  font-size:.76rem;
  font-style:normal;
  font-weight:750;
  line-height:1.35;
}

.exploded-part-variant.is-unavailable,
.exploded-part-variant:disabled{
  cursor:not-allowed;
  opacity:.62;
  background:#f5f6f8;
}

.exploded-variant-dialog{
  width:min(680px,calc(100vw - 32px));
  max-height:min(760px,calc(100vh - 32px));
  padding:0;
  border:0;
  border-radius:18px;
  background:transparent;
  color:#07182d;
  box-shadow:0 30px 90px rgba(4,22,44,.30);
}

.exploded-variant-dialog::backdrop{
  background:rgba(5,18,34,.58);
  backdrop-filter:blur(2px);
}

.exploded-variant-dialog-card{
  overflow:hidden;
  border:1px solid #d6e2ee;
  border-radius:18px;
  background:#fff;
}

.exploded-variant-dialog-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:17px 18px;
  border-bottom:1px solid #e2ebf4;
  background:#f7faff;
}

.exploded-variant-dialog-head>div{
  display:grid;
  gap:3px;
}

.exploded-variant-dialog-head span{
  color:#176ee8;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.exploded-variant-dialog-head strong{
  color:#07182d;
  font-size:1.08rem;
}

.exploded-dialog-close{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid #cbdced;
  border-radius:999px;
  background:#fff;
  color:#174e91;
  font-size:1.45rem;
  line-height:1;
  cursor:pointer;
}

.exploded-dialog-close:hover,
.exploded-dialog-close:focus-visible{
  background:#eaf3ff;
  outline:none;
}

.exploded-variant-dialog-copy{
  margin:0;
  padding:14px 18px 4px;
  color:#61748a;
  line-height:1.5;
}

.exploded-variant-dialog-list{
  display:grid;
  gap:9px;
  max-height:520px;
  overflow:auto;
  padding:12px 18px 18px;
}

.exploded-dialog-variant{
  display:grid;
  gap:4px;
  width:100%;
  padding:12px 13px;
  border:1px solid #d8e4ef;
  border-radius:11px;
  background:#fff;
  color:#07182d;
  text-align:left;
  font:inherit;
  cursor:pointer;
}

.exploded-dialog-variant:hover:not(:disabled),
.exploded-dialog-variant:focus-visible:not(:disabled){
  border-color:#2d7ff9;
  background:#f1f7ff;
  outline:none;
  box-shadow:0 5px 16px rgba(22,86,157,.10);
}

.exploded-dialog-variant strong{
  font-size:.92rem;
}

.exploded-dialog-variant small{
  color:#667a91;
}

.exploded-dialog-variant em{
  color:#1769c2;
  font-size:.78rem;
  font-style:normal;
  font-weight:750;
  line-height:1.4;
}

.exploded-dialog-variant.is-unavailable,
.exploded-dialog-variant:disabled{
  cursor:not-allowed;
  opacity:.6;
  background:#f4f6f8;
}

@media(max-width:520px){
  .exploded-variant-dialog{
    width:calc(100vw - 18px);
    max-height:calc(100vh - 18px);
  }

  .exploded-variant-dialog-head{
    padding:13px 14px;
  }

  .exploded-variant-dialog-copy{
    padding:12px 14px 2px;
    font-size:.86rem;
  }

  .exploded-variant-dialog-list{
    max-height:62vh;
    padding:10px 14px 14px;
  }
}