.kslp{--kslp-red:#E30512;--kslp-ink:#292929;--kslp-muted:#67645f;--kslp-warm:#F7F5F1;--kslp-line:#DEDAD3;max-width:1120px;margin:2rem auto 0;color:var(--kslp-ink)}
.kslp *{box-sizing:border-box}
.kslp__intro{display:flex;justify-content:flex-start;align-items:end;gap:20px;margin-bottom:14px}
.kslp__eyebrow{margin:0;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:700;color:var(--kslp-red)}
.kslp__stage{position:relative;overflow:hidden;border-radius:22px;background:#e9e7e1;box-shadow:0 10px 32px rgba(0,0,0,.06)}
.kslp__image{display:block;width:100%;height:auto}

/* Unsichtbare Hit-Fläche; der rote Kreis selbst erscheint erst bei Hover/Preview/Lock. */
.kslp__marker{position:absolute;z-index:3;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:54px;height:54px;border:0;border-radius:50%;background:transparent;color:#fff;display:grid;place-items:center;font:inherit;cursor:pointer;padding:0;outline:0;-webkit-tap-highlight-color:transparent}
.kslp__marker span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--kslp-red);font-size:.86rem;font-weight:800;line-height:1;opacity:0;transform:scale(.72);box-shadow:0 5px 16px rgba(0,0,0,.2);transition:opacity .15s ease,transform .15s ease,box-shadow .15s ease}
.kslp__marker:hover span,.kslp__marker:focus-visible span,.kslp__marker.is-preview span,.kslp__marker.is-active span{opacity:1;transform:scale(1)}
.kslp__marker:focus-visible span{box-shadow:0 0 0 3px rgba(255,255,255,.95),0 5px 18px rgba(0,0,0,.24)}
.kslp__marker.is-active span{transform:scale(1.08);box-shadow:0 0 0 3px rgba(255,255,255,.92),0 6px 20px rgba(0,0,0,.25)}

.kslp__controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px 18px;margin:17px 0 13px;padding-top:2px}
.kslp__choice{appearance:none;border:0;border-bottom:1px solid var(--kslp-line);background:transparent;color:var(--kslp-ink);min-height:47px;padding:7px 2px;display:flex;align-items:center;gap:9px;text-align:left;font:inherit;font-size:.9rem;cursor:pointer;transition:border-color .15s ease,color .15s ease}
.kslp__choice:hover,.kslp__choice:focus-visible,.kslp__choice.is-preview{border-color:var(--kslp-red);color:var(--kslp-red);outline:none}
.kslp__choice.is-active{border-color:var(--kslp-red);color:var(--kslp-red);font-weight:700}
.kslp__number{width:27px;height:27px;border:1px solid #bdb8b0;border-radius:50%;display:inline-grid;place-items:center;background:transparent;color:var(--kslp-muted);font-weight:800;font-size:.8rem;flex:0 0 auto;transition:background .15s ease,border-color .15s ease,color .15s ease}
.kslp__choice:hover .kslp__number,.kslp__choice:focus-visible .kslp__number,.kslp__choice.is-preview .kslp__number,.kslp__choice.is-active .kslp__number{background:var(--kslp-red);border-color:var(--kslp-red);color:#fff}

.kslp__detail{min-height:142px}
.kslp:not(.has-selection) .kslp__detail{display:none}
.kslp__detail-placeholder{border:1px solid var(--kslp-line);background:#fff;border-radius:18px;padding:22px 24px;color:var(--kslp-muted);min-height:86px;display:flex;align-items:center}
.kslp__detail-placeholder[hidden]{display:none}
.kslp__detail-item{border:1px solid var(--kslp-line);background:var(--kslp-warm);border-radius:18px;padding:22px 24px;display:grid;grid-template-columns:46px minmax(0,1fr);gap:17px;align-items:start}
.kslp__detail-item[hidden]{display:none}
.kslp__detail-number{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--kslp-red);color:#fff;font-weight:800;font-size:1.05rem}
.kslp__detail h3{margin:0 0 .45rem;font-size:clamp(1.25rem,2vw,1.55rem)}
.kslp__detail p{margin:.25rem 0 .8rem;color:#55514c;line-height:1.55}
.kslp__link{color:var(--kslp-red);font-weight:700;text-decoration:none}
.kslp__link:hover{text-decoration:underline}

@media(max-width:820px){.kslp__controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .kslp{margin-top:1.25rem}
  .kslp__intro{display:block}
  .kslp__stage{border-radius:15px}
  .kslp__marker{width:48px;height:48px}
  .kslp__marker span{width:34px;height:34px;font-size:.78rem}
  .kslp__controls{grid-template-columns:1fr;gap:0}
  .kslp__choice{min-height:43px;font-size:.86rem}
  .kslp__detail-item{grid-template-columns:38px minmax(0,1fr);padding:18px;gap:13px}
  .kslp__detail-number{width:36px;height:36px}
  .kslp__detail-placeholder{padding:18px;min-height:72px}
}
@media(hover:none),(pointer:coarse){
  /* Auf Touch-Geräten bleiben Marker zunächst unsichtbar und erscheinen nach Tippen. */
  .kslp__marker:hover span{opacity:0;transform:scale(.72)}
  .kslp__marker.is-preview span,.kslp__marker.is-active span,.kslp__marker:focus-visible span{opacity:1;transform:scale(1)}
  .kslp__marker.is-active span{transform:scale(1.08)}
}
@media(prefers-reduced-motion:reduce){.kslp__marker span,.kslp__choice,.kslp__number{transition:none}}