/**
 * Produktreihe und Detailbloecke.
 *
 * Uebernommen von gaensedaunendecke.de, Farbnamen angeglichen: 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.
 */

/* Auf der Startseite steht ueber der Reihe eine h2, damit die Gliederung
   nicht von h1 auf die h3 der Karten springt. Sie soll dort nicht lauter
   sein als die Abschnitte darunter, deshalb dieselbe Stufe wie eine
   normale Abschnittsueberschrift, nur mit engerem Abstand zur Reihe. */
.reihe-titel{margin:0 0 var(--s3)}

.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))}}

/* Eine einzelne Karte bleibt so breit wie eine von dreien. Sonst streckt
   auto-fit sie ueber die ganze Spalte, und weil .karte-bild ein Quadrat
   ist, waechst der Bildkasten auf mehrere hundert Pixel Hoehe mit. */
.reihe.reihe-einzeln{grid-template-columns:minmax(0,340px);justify-content:start}

.karte{
  position:relative;display:flex;flex-direction:column;
  background:var(--papier);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(35,48,59,.6)}
.karte-stark{border-color:var(--terra);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(--terra);color:#fff;padding:5px 12px;border-radius:999px;
  max-width:calc(100% - var(--s4));
}
.fahne-leise{background:var(--creme);color:var(--anthrazit)}

/* Der Bildkasten muss bei allen Karten exakt gleich hoch sein, sonst stehen
   Titel und Preis nicht auf einer Linie und der Vergleich wird muehsam.
   aspect-ratio allein reicht dafuer nicht: Ein Flex-Kind zieht seine
   Mindesthoehe aus dem Inhalt, ein hochformatiges Produktbild dehnt den
   Kasten also trotzdem. min-height:0 nimmt ihm das. */
.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;min-height:0;overflow:hidden;
}
.karte-bild img{
  max-width:100%;max-height:100%;min-height:0;
  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(--anthrazit);
}

.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(--anthrazit);
}
.karte-fuss .knopf:hover{background:#f5c800;color:var(--anthrazit)}
.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(--anthrazit)}
.zumdetail svg{width:13px;height:13px;flex:none}

/* Die ganze Besprechung steht auf Weiss, nicht nur das Bild. Amazon-Bilder
   haben fast immer weissen Grund: Ein eigener weisser Kasten mitten auf der
   Leinenflaeche wirkt wie ein Loch, und weil er sich ueber die volle Zeilenhoehe
   zieht, klafft unter dem Bild eine leere Flaeche. Weisse Karte plus feine
   Linie loest beides. */
.detail{
  background:#fff;border:1px solid var(--linie);border-radius:18px;
  padding:clamp(var(--s3),3vw,var(--s5));
  margin-top:var(--s3);scroll-margin-top:var(--s4);
  transition:border-color .35s var(--spur),box-shadow .35s var(--spur);
}
.detail:first-of-type{margin-top:0}
.detail:hover{border-color:var(--sand);box-shadow:0 14px 38px -26px rgba(35,48,59,.55)}

.detail-satz{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:760px){
  .detail-satz{grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:var(--s5)}
  /* Jede zweite Besprechung spiegelt die Seite. Bei vier Produkten
     untereinander bricht das die Spalte auf, ohne dass etwas springt. */
  .detail:nth-of-type(even) .detail-satz{grid-template-columns:minmax(0,1fr) minmax(0,240px)}
  .detail:nth-of-type(even) .detail-bild{order:2}
}

/* align-self:start haelt den Bildkasten oben, statt ihn auf die Hoehe des
   Textes zu strecken. aspect-ratio gibt ihm ein festes Format. */
.detail-bild{
  background:#fff;border-radius:12px;overflow:hidden;
  aspect-ratio:1;display:grid;place-items:center;align-self:start;
}
.detail-bild img{
  width:100%;height:100%;object-fit:contain;
  transition:transform .55s var(--spur);
}
.detail-bild a{display:block;width:100%;height:100%}
.detail:hover .detail-bild img{transform:scale(1.05)}
@media(prefers-reduced-motion:reduce){
  .detail-bild img{transition:none}
  .detail:hover .detail-bild img{transform:none}
}
.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(--terra-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(--terra-text)}
.pc-con+ul li::before{content:"!";color:#9C4A22}

.stimmen{
  background:var(--creme);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(--anthrazit);padding:12px 24px;font-size:.9375rem}
.detail-fuss .knopf:hover{background:#f5c800;color:var(--anthrazit)}