/* —— Grid-Container für Cards —— */
.cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* immer 3 Spalten */
  gap: 20px;                             /* Abstand zwischen den Cards */
  padding: 20px;                         /* optional: Innenabstand */
  box-sizing: border-box;
}

/* —— Mobile: 1 Card pro Reihe —— */
@media (max-width: 600px) {
  .cards-container {
    grid-template-columns: 1fr;          /* nur 1 Spalte unter 600px */
  }
}

/* —— Card-Styles (Abstände vom Grid regeln lassen) —— */
.card {
  margin: 0;                             /* Grid kümmert sich um den Abstand */
}

body{background: linear-gradient(135deg,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 50%,rgba(209,209,209,1) 50%,rgba(254,254,254,1) 100%) center/cover no-repeat;min-height:100vh}
.card{width:360px;background:#fff;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,.1);transition:.3s;font-family:'Segoe UI',sans-serif;margin:20px auto;overflow:hidden;position:relative;cursor:pointer}
.card:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,.15)}
.badge{position:absolute;top:10px;right:10px;background: linear-gradient(to right, rgb(189, 225, 115) 0%, rgb(150, 188, 51) 50%, rgb(122, 156, 40) 100%);;color:#fff;padding:5px 10px;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,.2);z-index:10}
.tilt{overflow:hidden}
.img{height:200px;overflow:hidden}
.img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .img img{transform:scale(1.05)}
.info{padding:20px}
.cat{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#71717A;margin-bottom:5px}
.title{font-size:18px;font-weight:700;color:#18181B;margin:0 0 10px;letter-spacing:-.5px}
.desc{font-size:13px;color:#52525B;line-height:1.4;margin-bottom:12px}
.feats{display:flex;gap:6px;margin-bottom:15px}
.feat{font-size:10px;background:#F4F4F5;color:#71717A;padding:3px 8px;border-radius:10px;font-weight:500}
.bottom{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.price{display:flex;flex-direction:column}
.old{font-size:13px;text-decoration:line-through;color:#A1A1AA;margin-bottom:2px}
.new{font-size:20px;font-weight:700;color:#18181B}
.btn{background:linear-gradient(45deg,#004166,#004166);color:#fff;border:none;border-radius:10px;padding:8px 15px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:.3s;box-shadow:0 3px 10px rgba(0,0,0,.1)}
.btn:hover{background:linear-gradient(45deg,#27272A,#3F3F46);transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,.15)}
.btn:before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:.5s}
.btn:hover:before{left:100%}
.icon{transition:transform .3s}
.btn:hover .icon{transform:rotate(-10deg) scale(1.1)}
.meta{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #F4F4F5;padding-top:12px}
.rating{display:flex;align-items:center;gap:2px}
.rcount{margin-left:6px;font-size:11px;color:#71717A}
.stock{font-size:11px;font-weight:600;color:#22C55E}
@media (max-width:400px){.card{width:90%}.title{font-size:16px}.img{height:180px}.bottom{flex-direction:column;align-items:flex-start;gap:10px}.price{margin-bottom:5px}.btn{width:100%;justify-content:center}}

/* Bild-Container in der Card */
.card .img {
  position: relative;
  width: 100%;
  height: 0;
  /* hier die gewünschte Höhe über Seitenverhältnis: z. B. 16:9 = 9/16·100 = 56.25% */
  padding-top: 56.25%;
  overflow: hidden;
}

/* Bild selbst */
.card .img img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}


/*Features*/
.feat--black {
  background-color: black;
  color: #ffffff;
}

.feat--blue {
  background-color: blue;
  color: #ffffff;
}

.feat--red {
  background-color: red;
  color: #ffffff;
}


/*Versand*/


/* Lieferzeit-Text in Orange */
.deliver-medium {
  color: orange;
  font-weight: 500;
}