/* drx_opc: Produkt-Reihe — ruhige PSD-Karten: Bild gross, Name, Preis, Grundpreis, Warenkorb-Kreis. */
.drx-preihe {
    --drx-green: rgb(64, 86, 29);
    --drx-green-soft: rgb(233, 241, 222);
    --drx-ink: #2f3327;
    /* drx: boxed wie PSD — Content-Spalte ~77%, zentriert */
    max-width: 1240px;
    /* drx: engeres Raster (PSD hat wenig Weissraum um die Reihen); padding vertikal 0 killt
       NOVA-Basis `main section { padding: 4rem 0 }`, sonst doppelter Abstand. */
    margin: clamp(1.25rem, 2.5vw, 2rem) auto;
    padding: 0 1rem;
}
.drx-preihe-head {
    font-size: clamp(1.3rem, 2.2vw, 1.9rem);
    font-weight: 400;
    color: var(--drx-ink);
    margin: 0 0 clamp(1rem, 2.5vw, 2rem);
}
.drx-preihe-grid { display: grid; gap: clamp(.5rem, 1.2vw, 1rem); }
.drx-preihe-grid--3 { grid-template-columns: repeat(3, 1fr); }
.drx-preihe-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* drx: Angebote-Variante (3 Produkte + Beratungs-Box): Box breiter wie PSD */
.drx-preihe-grid--4:has(.drx-preihe-box) { grid-template-columns: repeat(3, 1fr) 1.35fr; }
/* drx: Angebote-Kacheln exakt so hoch wie die Kontakt-Box daneben — Bild fuellt die volle
   (per Grid gestreckte) Kartenhoehe, statt 7px kuerzer durch quadratisches Bild + Card-Padding. */
.drx-preihe-grid:has(.drx-preihe-box) .drx-preihe-card { padding-bottom: 0; }
.drx-preihe-grid:has(.drx-preihe-box) .drx-preihe-imglink { height: 100%; }
.drx-preihe-grid:has(.drx-preihe-box) .drx-preihe-img { height: 100%; aspect-ratio: auto; object-fit: cover; }
.drx-preihe-grid--5 { grid-template-columns: repeat(5, 1fr); }
.drx-preihe-grid--6 { grid-template-columns: repeat(6, 1fr); }
.drx-preihe-card { position: relative; text-align: center; padding-bottom: .4rem; }
.drx-preihe-imglink { display: block; }
.drx-preihe-img {
    width: 100%;
    /* drx: Produktbilder sind quadratisch (600x600, heller Grund #ebefef). Quadratische Box statt
       4/5-Portrait -> kein verschenkter Weissraum ober-/unterhalb. Abgerundete Ecken (Grund gleich
       gefuellt, damit die Rundung sauber greift, egal ob das Bild quadratisch ist). */
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #ebefef;
    border-radius: 16px;
    transition: transform .25s ease;
}
.drx-preihe-card:hover .drx-preihe-img { transform: translateY(-4px); }
/* drx: NOVA gibt Headings ein padding:10px rundum -> hier 0, sonst kuenstliche Luecke Bild->Name->Preis */
.drx-preihe-name { font-size: .95rem; font-weight: 700; margin: .3rem 0 .15rem; padding: 0; line-height: 1.25; }
.drx-preihe-name a { color: var(--drx-ink); }
.drx-preihe-name a:hover { color: var(--drx-green); text-decoration: none; }
.drx-preihe-price { color: var(--drx-ink); font-size: .95rem; }
.drx-preihe-base { color: #8a8f80; font-size: .78rem; margin-top: .1rem; }
.drx-preihe-box {
    background: #d6e3c0;
    border-radius: 26px;
    padding: clamp(1.2rem, 2vw, 1.8rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
}
.drx-preihe-box-text { color: var(--drx-ink); font-size: clamp(.95rem, 1.2vw, 1.1rem); line-height: 1.45; }
.drx-preihe-box-btn {
    align-self: flex-start;
    background: var(--drx-green);
    color: #fff;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .78rem;
    padding: .85em 1.9em;
}
.drx-preihe-box-btn:hover { color: #fff; filter: brightness(1.12); text-decoration: none; }
.drx-preihe-empty { color: #999; }

@media (max-width: 991px) {
    .drx-preihe-grid--4, .drx-preihe-grid--5, .drx-preihe-grid--6 { grid-template-columns: repeat(3, 1fr); }
    .drx-preihe-box { grid-column: 1 / -1; }
    /* drx: Angebote mobil — 3 Produkte fuellen die volle Breite (statt leere 4. Spalte durch die
       Desktop-:has-Regel), Beratungs-Box darunter ueber 1/-1 volle Breite */
    .drx-preihe-grid--4:has(.drx-preihe-box) { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .drx-preihe-grid--3, .drx-preihe-grid--4, .drx-preihe-grid--5, .drx-preihe-grid--6 { grid-template-columns: repeat(2, 1fr); }
}