/* DriveSolution – USP / Vorteile: Border-only-Karten, Hover-to-fill (Polestar/Porsche-Manier)
   Abstände in em (Projektvorgabe). */

.ds-usp-grid{display:grid;gap:1.125em}
.ds-usp-grid--2{grid-template-columns:repeat(2,1fr)}
.ds-usp-grid--3{grid-template-columns:repeat(3,1fr)}
.ds-usp-grid--4{grid-template-columns:repeat(4,1fr)}

.ds-usp{position:relative;padding:2.375em 2.125em;border:1px solid var(--ds-border);border-radius:var(--ds-r);
  background:transparent;overflow:hidden;
  transition:background .3s ease,border-color .3s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.ds-usp:hover{background:#111114;border-color:var(--ds-accent);transform:translateY(-5px)}

.ds-usp__ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:1.375em;
  border:1px solid var(--ds-border-2);border-radius:12px;color:#fff;transition:color .3s ease,border-color .3s ease}
.ds-usp__ico .ds-ico{width:24px;height:24px}
.ds-usp:hover .ds-usp__ico{color:var(--ds-accent);border-color:var(--ds-accent)}

.ds-usp__kicker{display:block;font-family:"Archivo",sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ds-accent);margin-bottom:.85em}
.ds-usp__title{font-family:"Archivo",sans-serif;font-weight:800;text-transform:uppercase;font-size:1.35rem;
  line-height:1.06;letter-spacing:-.01em;margin-bottom:.7em}
.ds-usp__text{color:var(--ds-muted);font-size:1rem;line-height:1.6}

/* Rote L-Winkel-Ecke, erscheint nur beim Hover (Telemetrie-Detail). */
.ds-usp__corner{position:absolute;top:.875em;right:.875em;width:14px;height:14px;
  border-top:2px solid var(--ds-accent);border-right:2px solid var(--ds-accent);
  opacity:0;transform:translate(-4px,4px);transition:opacity .3s ease,transform .3s ease}
.ds-usp:hover .ds-usp__corner{opacity:1;transform:none}

@media(max-width:980px){
  .ds-usp-grid--3,.ds-usp-grid--4{grid-template-columns:repeat(2,1fr)}
  .ds-usp{padding:2em 1.75em}
}
@media(max-width:600px){
  .ds-usp-grid--2,.ds-usp-grid--3,.ds-usp-grid--4{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .ds-usp,.ds-usp:hover{transform:none}
}