/**
 * Produktreihe und Detailbloecke.
 *
 * Ordnung wie auf schafwolldecke.de: oben die Karten zum Vergleichen, unten
 * die Tiefe. Anders als dort steht der Preis mit auf der Karte, weil die
 * Spanne hier von 7 bis 199 Euro reicht und ohne ihn nicht zu entscheiden ist.
 */

.reihe-kopf{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  align-items:baseline;justify-content:space-between;margin-bottom:var(--s4);
}
.reihe-kopf .kicker{margin:0}
.reihe-kopf .stand{
  font-family:var(--display);font-size:.75rem;font-weight:600;
  color:var(--grau-text);margin:0;
}

/* Die Reihe ist ein ul und steht in .prose. Ohne diese Ausnahme greift die
   generische Regel .prose ul mit max-width:62ch und padding-left, und die
   Karten quetschen sich auf Textbreite zusammen. Spezifitaet schlaegt hier
   Reihenfolge, deshalb .prose davor. */
.prose .reihe,.prose .proscons ul{max-width:none;padding-left:0}
.reihe{
  list-style:none;margin:0 0 var(--s5);padding:0;
  display:grid;gap:var(--s3);grid-template-columns:1fr;
}
@media(min-width:560px){.reihe{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.reihe{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}}

.karte{
  position:relative;display:flex;flex-direction:column;
  background:var(--leinen-hell);border:1px solid var(--linie);border-radius:20px;
  padding:var(--s4) var(--s3) var(--s3);
  transition:transform .3s var(--spur),box-shadow .3s;
}
.karte:hover{transform:translateY(-3px);box-shadow:0 18px 38px -30px rgba(24,35,56,.6)}
.karte-stark{border-color:var(--blatt);box-shadow:inset 0 0 0 1px rgba(95,132,56,.35)}

.fahne{
  position:absolute;top:-11px;left:var(--s3);
  font-family:var(--display);font-size:.6875rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--blatt);color:#fff;padding:5px 12px;border-radius:999px;
  max-width:calc(100% - var(--s4));
}
.fahne-leise{background:var(--sand);color:var(--nacht)}

.karte-bild{
  display:flex;align-items:center;justify-content:center;
  background:#fff;border-radius:14px;padding:var(--s2);margin-bottom:var(--s3);
  aspect-ratio:1;
}
.karte-bild img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

.karte .marke,.detail .marke{
  font-family:var(--display);font-size:.6875rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--grau-text);margin:0 0 4px;
}
.karte h3{font-size:1rem;line-height:1.25;margin:0 0 var(--s2)}
.karte .preis{
  font-family:var(--display);font-weight:800;font-size:1.25rem;
  letter-spacing:-.02em;margin:0 0 var(--s3);color:var(--nacht);
}

.karte-fuss{margin-top:auto;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.karte-fuss .knopf{
  width:100%;text-align:center;padding:12px 18px;font-size:.9375rem;
  background:#ffd814;color:var(--nacht);
}
.karte-fuss .knopf:hover{background:#f5c800;color:var(--nacht)}
.zumdetail{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--display);font-size:.8125rem;font-weight:600;
  color:var(--grau-text);text-decoration:none;
}
.zumdetail:hover{color:var(--nacht)}
.zumdetail svg{width:13px;height:13px;flex:none}

.detail{
  border-top:1px solid var(--linie);padding-top:var(--s5);margin-top:var(--s5);
  scroll-margin-top:var(--s4);
}
.detail:first-of-type{border-top:0}
.detail-satz{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:760px){.detail-satz{grid-template-columns:200px minmax(0,1fr);gap:var(--s5)}}
.detail-bild{
  display:flex;align-items:flex-start;justify-content:center;
  background:#fff;border:1px solid var(--linie);border-radius:16px;padding:var(--s2);
}
.detail-bild img{max-width:100%;height:auto}
.detail h3{font-size:clamp(1.25rem,1.1rem + .7vw,1.5rem);margin:0 0 var(--s3)}

.proscons{display:grid;gap:var(--s3) var(--s5);grid-template-columns:1fr;margin:var(--s4) 0}
@media(min-width:620px){.proscons{grid-template-columns:1fr 1fr}}
.pc-kopf{
  font-family:var(--display);font-size:.6875rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 var(--s2);
}
.pc-pro{color:var(--blatt-text)}
.pc-con{color:#9C4A22}
.proscons ul{list-style:none;margin:0;padding:0;font-size:.9375em}
.proscons li{position:relative;padding-left:1.35em;margin-bottom:.5em;line-height:1.55}
.proscons li::before{
  position:absolute;left:0;top:0;font-family:var(--display);font-weight:700;
}
.pc-pro+ul li::before{content:"+";color:var(--blatt-text)}
.pc-con+ul li::before{content:"!";color:#9C4A22}

.stimmen{
  background:var(--sand);border-radius:14px;padding:var(--s3);
  font-size:.9375em;margin:var(--s4) 0 0;
}
.detail-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin:var(--s4) 0 0}
.preis-klein{font-family:var(--display);font-weight:700;color:var(--grau-text);font-size:.9375rem}
.detail-fuss .knopf{background:#ffd814;color:var(--nacht);padding:12px 24px;font-size:.9375rem}
.detail-fuss .knopf:hover{background:#f5c800;color:var(--nacht)}