/*!
 * ShockWatch Auswahlhilfe – Stylesheet
 * Plugin: tci_shockwatch_selector  |  Transport Control International GmbH
 *
 * Wird ueber info.xml (<CSS>) eingebunden. Alles ist unter .sw-selector
 * gekapselt und kollidiert nicht mit NOVA.
 * Die Schrift wird vom Shop geerbt (font-family:inherit).
 */
/* ===================== Tokens ===================== */
.sw-selector{
  --ink:#10141b;
  --ink-2:#5b6472;
  --ink-3:#98a1af;
  --line:#e6e9ef;
  --tint:#f6f7f9;
  --tint-2:#eceff4;
  --white:#fff;

  /* Shop-Blau (meta theme-color): ausschliesslich fuer Interaktion/Fokus */
  --brand:#637cb6;
  --brand-600:#51679b;
  --brand-050:#eef2fa;
  --ring:rgba(99,124,182,.3);

  --accent:#e6e9ef;              /* Labelfarbe, per JS gesetzt */

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem;
  --r:12px; --r-sm:10px; --pill:999px;
  --shadow:0 1px 2px rgba(16,20,27,.04),0 10px 30px -14px rgba(16,20,27,.22);
  --octa:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);

  box-sizing:border-box;
  max-width:100%;
  overflow-x:clip;
  font-family:inherit;
  font-size:1rem;
  line-height:1.5;
  color:var(--ink);
  container-type:inline-size;
}
.sw-selector *,.sw-selector *::before,.sw-selector *::after{box-sizing:inherit;}
.sw-selector p,.sw-selector h2,.sw-selector h3,.sw-selector dl,.sw-selector dd,.sw-selector ul{margin:0;padding:0;}
.sw-selector ul{list-style:none;}
.sw-selector [hidden]{display:none!important;}
.sw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ===================== Kopf ===================== */
.sw-kicker{font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.sw-title{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;letter-spacing:-.025em;line-height:1.15;margin-top:var(--s2);}
.sw-lead{max-width:56ch;font-size:.9375rem;color:var(--ink-2);margin-top:var(--s2);}
.sw-head{margin-bottom:var(--s5);}

/* ===================== Eingabe ===================== */
.sw-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);max-width:34rem;}
@container (max-width:520px){.sw-controls{grid-template-columns:minmax(0,1fr);}}
@media (max-width:560px){.sw-controls{grid-template-columns:minmax(0,1fr);}}

.sw-lab{display:block;font-size:.8125rem;font-weight:600;color:var(--ink-2);margin-bottom:var(--s2);}
.sw-wrap{
  display:flex;align-items:center;background:var(--white);
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .15s,box-shadow .15s;
}
.sw-wrap:hover{border-color:var(--ink-3);}
.sw-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--ring);}
.sw-wrap.is-bad{border-color:#c8465a;box-shadow:0 0 0 4px rgba(200,70,90,.22);}

.sw-input{
  flex:1;min-width:0;border:0;background:transparent;
  font-family:inherit;font-size:1.375rem;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--ink);padding:var(--s3) var(--s3);
}
.sw-input:focus{outline:0;}
.sw-input::placeholder{color:var(--ink-3);font-weight:500;}
.sw-suffix{flex:none;padding-right:var(--s3);font-size:.875rem;font-weight:600;color:var(--ink-3);}

/* Einheiten-Umschalter sitzt im Feld – die Einheitsanzeige ist der Schalter */
.sw-toggle{display:inline-flex;flex:none;gap:2px;padding:2px;margin-right:var(--s1);background:var(--tint-2);border-radius:var(--pill);}
.sw-tin{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.sw-tlab{
  display:inline-flex;align-items:center;margin:0;min-height:2rem;padding:0 var(--s3);
  font-size:.75rem;font-weight:700;line-height:1;color:var(--ink-2);
  border-radius:var(--pill);cursor:pointer;user-select:none;
  transition:background .15s,color .15s,box-shadow .15s;
}
.sw-tlab:hover{color:var(--ink);}
.sw-tin:checked + .sw-tlab{background:var(--white);color:var(--ink);box-shadow:0 1px 3px rgba(16,20,27,.16);}
.sw-tin:focus-visible + .sw-tlab{outline:2px solid var(--brand);outline-offset:1px;}

/* Maßrechner */
.sw-helper{margin-top:var(--s3);max-width:34rem;}
.sw-helper-sum{
  display:inline-flex;align-items:center;gap:var(--s2);cursor:pointer;list-style:none;
  font-size:.8125rem;font-weight:600;color:var(--brand-600);padding:var(--s1) 0;
}
.sw-helper-sum::-webkit-details-marker{display:none;}
.sw-helper-sum::before{content:"+";display:inline-flex;justify-content:center;width:1.125rem;height:1.125rem;
  border-radius:50%;background:var(--brand-050);font-weight:700;line-height:1.125rem;}
.sw-helper[open] .sw-helper-sum::before{content:"–";}
.sw-helper-sum:hover{color:var(--ink);}
.sw-helper-sum:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px;}
.sw-dims{display:flex;align-items:flex-end;gap:var(--s2);margin-top:var(--s3);}
.sw-dim{flex:1;min-width:0;}
.sw-dim-lab{display:block;font-size:.6875rem;color:var(--ink-2);margin-bottom:var(--s1);}
.sw-input--sm{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--white);
  font-size:.9375rem;font-weight:600;padding:var(--s2);
}
.sw-input--sm:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--ring);}
.sw-times{color:var(--ink-3);padding-bottom:var(--s3);font-size:.75rem;}
.sw-dim-out{font-size:.75rem;color:var(--ink-2);margin-top:var(--s2);font-variant-numeric:tabular-nums;}

/* ===================== Ergebnis ===================== */
.sw-result{display:flex;margin-top:var(--s5);}

.sw-state{
  flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s3);text-align:center;padding:var(--s6) var(--s5);
  background:var(--tint);border-radius:var(--r);
}
.sw-state-head{font-size:.9375rem;font-weight:700;}
.sw-state-txt{font-size:.875rem;color:var(--ink-2);max-width:40ch;}
.sw-state--info{align-items:flex-start;text-align:left;gap:var(--s2);
  background:var(--brand-050);box-shadow:inset 3px 0 0 var(--brand);}
.sw-octa{width:2.75rem;height:2.75rem;background:var(--tint-2);clip-path:var(--octa);}

.sw-card{flex:1 1 auto;min-width:0;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;}
.sw-card-top{display:flex;gap:var(--s4);padding:var(--s4);align-items:flex-start;}
@container (max-width:460px){.sw-card-top{flex-direction:column;gap:var(--s3);}}
@media (max-width:520px){.sw-card-top{flex-direction:column;gap:var(--s3);}}

.sw-media{flex:0 0 7rem;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:var(--s1);}
@container (max-width:460px){.sw-media{flex:none;width:6rem;}}
@media (max-width:520px){.sw-media{flex:none;width:6rem;}}
.sw-img{display:block;width:100%;height:auto;}

.sw-info{flex:1;min-width:0;}
.sw-model{font-size:clamp(1.375rem,2.8vw,1.75rem);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-top:var(--s1);}
.sw-meta{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  font-size:.875rem;font-weight:600;color:var(--ink-2);margin-top:var(--s2);font-variant-numeric:tabular-nums;}
.sw-dotsep{display:inline-block;flex:none;width:3px;height:3px;border-radius:50%;background:var(--ink-3);}
.sw-echo{font-size:.8125rem;color:var(--ink-3);margin-top:var(--s1);font-variant-numeric:tabular-nums;}

.sw-cta{
  display:inline-block;margin-top:var(--s4);padding:var(--s3) var(--s5);
  background:var(--ink);color:var(--white);text-decoration:none;
  font-family:inherit;font-size:.9375rem;font-weight:600;line-height:1;
  border:1px solid var(--ink);border-radius:var(--pill);
  transition:background .15s,border-color .15s;
}
.sw-cta:hover{background:var(--brand-600);border-color:var(--brand-600);color:var(--white);text-decoration:none;}
.sw-cta:focus-visible{outline:0;box-shadow:0 0 0 4px var(--ring);}
.sw-ghost{display:inline-block;margin-top:var(--s2);padding:var(--s2) var(--s4);
  background:transparent;border:1.5px solid var(--brand);border-radius:var(--pill);
  color:var(--brand-600);font-size:.875rem;font-weight:600;text-decoration:none;}
.sw-ghost:hover{background:var(--brand);color:var(--white);text-decoration:none;}
.sw-ghost:focus-visible{outline:0;box-shadow:0 0 0 4px var(--ring);}

/* ---- Empfindlichkeitsskala: ersetzt die Legende ---- */
.sw-scale{border-top:1px solid var(--line);background:var(--tint);padding:var(--s4) var(--s4) var(--s3);}
.sw-band{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;}
.sw-seg{position:relative;padding-top:var(--s3);}
.sw-seg-mark{
  position:absolute;top:0;left:50%;width:.5rem;height:.5rem;background:var(--ink);
  clip-path:var(--octa);transform:translate(-50%,-2px) scale(0);opacity:0;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .22s;
}
.sw-seg-bar{display:block;height:.625rem;border-radius:3px;background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(16,20,27,.16);transition:box-shadow .2s,transform .2s;}
.sw-seg-lab{display:block;text-align:center;font-size:.625rem;font-weight:700;color:var(--ink-3);
  margin-top:var(--s2);font-variant-numeric:tabular-nums;transition:color .2s;}
.sw-seg.is-on .sw-seg-bar{transform:scaleY(1.4);
  box-shadow:inset 0 0 0 1px rgba(16,20,27,.16),0 0 0 2px var(--tint),0 0 0 3.5px var(--ink);}
.sw-seg.is-on .sw-seg-lab{color:var(--ink);}
.sw-seg.is-on .sw-seg-mark{transform:translate(-50%,0) scale(1);opacity:1;}

/* ===================== Beleg / Matrix ===================== */
.sw-proof{margin-top:var(--s5);border-top:1px solid var(--line);padding-top:var(--s4);}
.sw-proof-sum{display:flex;align-items:center;gap:var(--s2);cursor:pointer;list-style:none;}
.sw-proof-sum::-webkit-details-marker{display:none;}
.sw-proof-sum::after{content:"";width:.5rem;height:.5rem;border-right:2px solid var(--ink-3);
  border-bottom:2px solid var(--ink-3);transform:rotate(45deg);margin-left:auto;transition:transform .2s;}
.sw-proof-det[open] .sw-proof-sum::after{transform:rotate(-135deg);}
.sw-proof-sum:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px;}
.sw-proof-title{font-size:.9375rem;font-weight:700;}
.sw-proof-hint{font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);background:var(--tint);border-radius:var(--pill);padding:2px var(--s2);}

.sw-scroll{min-width:0;max-width:100%;overflow-x:auto;contain:paint;margin-top:var(--s4);
  -webkit-overflow-scrolling:touch;}
.sw-matrix{border-collapse:separate;border-spacing:2px;width:100%;min-width:34rem;}
.sw-matrix th,.sw-matrix td{padding:0;}
.sw-mx-corner{background:transparent;}
.sw-mx-ch,.sw-mx-rh{font-size:.6875rem;font-weight:600;color:var(--ink-2);background:var(--tint);
  border-radius:6px;padding:var(--s2) var(--s1);white-space:nowrap;
  font-variant-numeric:tabular-nums;transition:background .15s,color .15s;}
.sw-mx-ch{vertical-align:bottom;}
.sw-mx-rh{text-align:right;padding-right:var(--s2);width:1%;
  position:sticky;left:0;z-index:1;}
.sw-mx-ch.is-on,.sw-mx-rh.is-on{background:var(--ink);color:var(--white);}
.sw-mx-cell{background:var(--tint);border-radius:6px;height:2rem;text-align:center;
  vertical-align:middle;transition:background .15s;}
/* Kombination, fuer die die Tabelle keinen Indikator vorsieht */
.sw-mx-cell.is-none{background:transparent;box-shadow:inset 0 0 0 1px var(--line);}
.sw-mx-cell.is-none.is-path{background:var(--tint);}
.sw-mx-cell.is-none.is-hit{background:var(--tint-2);box-shadow:inset 0 0 0 1.5px var(--ink-3);}
.sw-mx-cell.is-path{background:var(--tint-2);}
.sw-mx-cell.is-hit{background:var(--tint-2);}
.sw-dot{display:inline-block;width:.875rem;height:.875rem;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(16,20,27,.14);transition:transform .15s,box-shadow .15s;}
.sw-mx-cell.is-hit .sw-dot{transform:scale(1.4);
  box-shadow:inset 0 0 0 1px rgba(16,20,27,.14),0 0 0 2px var(--tint-2),0 0 0 3.5px var(--ink);}

@media (prefers-reduced-motion:reduce){
  .sw-selector *,.sw-selector *::before,.sw-selector *::after{transition:none!important;animation:none!important;}
  .sw-mx-cell.is-hit .sw-dot{transform:none;}
  .sw-seg.is-on .sw-seg-mark{transform:translate(-50%,0) scale(1);}
}