/* Store-Seiten im Redesign (Seitenvariante products/venocix, vnx_store.php). Aufbau der Karten wie auf Live,
   Optik aus den Bausteinen von vnx-site.css: h-card + m-kvm (Karten der Startseite), h-pic (Icon-Kachel),
   h-checks + svg.i (Funktionsliste), m-kvm-f (Preiszeile), h-btn. Hier nur Ergänzungen mit denselben Tokens
   (--h-line, --h-soft, --h-card, --h-lime, --vnx-text*): Hover, Badge, Rabatt, Segment mit gleitendem Indikator.
   Farbregel: Knöpfe einheitlich h-btn-sec wie auf der Dedicated-Seite (Tim); Grün nur als dünne Kante oben beim
   empfohlenen Paket (is_featured).
   Keine Verläufe, keine Glas-Effekte; hell und dunkel über die Tokens. */
.s-page .s-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap;margin-bottom:28px}
.s-page .s-top .h-lead{margin-top:6px}
.s-page .s-facts{margin-top:22px}
.s-page .s-note{margin-top:14px}
.s-page .s-leer{padding:24px}

/* Raster: bis fünf Karten nebeneinander */
.s-page .s-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.s-page .s-n1{grid-template-columns:minmax(0,420px)}
.s-page .s-n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.s-page .s-n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.s-page .s-n5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1359px){.s-page .s-n5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1060px){.s-page .s-n4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.s-page .s-n3,.s-page .s-n4,.s-page .s-n5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.s-page .s-grid,.s-page .s-n1{grid-template-columns:1fr}}

/* Karte: m-kvm der Startseite; Kante oben neutral, beim empfohlenen Paket grün. Hover hebt leicht an. */
.vnx-home.s-page .s-card{box-shadow:inset 0 2px 0 var(--h-line);padding:22px 20px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.vnx-home.s-page .s-card.is-featured{box-shadow:inset 0 2px 0 var(--h-lime);transform:translateY(-4px)}
.vnx-home.s-page .s-card:hover{transform:translateY(-3px);border-color:var(--vnx-text-muted);box-shadow:inset 0 2px 0 var(--h-line),0 10px 24px -14px rgba(0,0,0,.35)}
.vnx-home.s-page .s-card.is-featured:hover{transform:translateY(-6px);box-shadow:inset 0 2px 0 var(--h-lime),0 10px 24px -14px rgba(0,0,0,.35)}
html.lagom-dark-mode .vnx-home.s-page .s-card:hover{box-shadow:inset 0 2px 0 var(--h-line),0 12px 28px -14px rgba(0,0,0,.8)}
html.lagom-dark-mode .vnx-home.s-page .s-card.is-featured:hover{box-shadow:inset 0 2px 0 var(--h-lime),0 12px 28px -14px rgba(0,0,0,.8)}
@media (prefers-reduced-motion:reduce){.vnx-home.s-page .s-card,.s-page .s-seg-ind{transition:none}.vnx-home.s-page .s-card,.vnx-home.s-page .s-card:hover,.vnx-home.s-page .s-card.is-featured,.vnx-home.s-page .s-card.is-featured:hover{transform:none}}
.s-page .s-card[hidden]{display:none!important}

.s-page .s-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-height:36px}
.s-page .s-head .h-pic svg.i{width:18px;height:18px;stroke-width:1.5;color:var(--vnx-text)}
.s-page .s-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
/* Badge in der Form von h-tag, aber neutral */
.s-page .s-tag{display:inline-flex;align-items:center;padding:1px 7px;border:1px solid var(--h-line);border-radius:4px;background:var(--h-soft);color:var(--vnx-text-secondary);font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;line-height:1.5;white-space:nowrap}
.s-page .s-tag.s-disc{color:var(--vnx-text);font-variant-numeric:tabular-nums}
.s-page .s-tag[hidden]{display:none}
.s-page .s-card h3{margin-top:14px;font-size:22px;line-height:1.2}

/* Merkmale: Funktionsliste der Startseite, Wert fett */
.s-page .s-feat{list-style:none;margin:16px 0 0;padding:0;gap:9px;font-size:14px;line-height:1.4}
/* Jedes Merkmal einzeilig (Tim): kurze Anzeigeform aus vnx_store_short_feature(), kein Umbruch, keine Ellipse.
   Das Raster bricht lieber auf weniger Spalten um als die Merkmale. */
.s-page .s-feat li{min-width:0;white-space:nowrap}
.s-page .s-feat span{white-space:nowrap}

/* Preis und Knopf */
.s-page .s-foot{flex-direction:column;align-items:stretch!important;gap:14px}
.s-page .s-foot p{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
.s-page .s-pm{font-size:30px;line-height:1.1;font-weight:700;color:var(--vnx-text)}
.s-page .s-oldl{flex-basis:100%;min-height:1.35em;line-height:1.35}
.s-page .s-old{font-size:14px;color:var(--vnx-text-muted);font-variant-numeric:tabular-nums}
.s-page .s-foot .m-tax{flex-basis:100%;margin-top:2px}
.s-page .s-total{flex-basis:100%;min-height:1.3em}
.s-page .s-buy{width:100%;justify-content:center;text-align:center}

/* Laufzeit: Segment wie im Konfigurator (vnx-seg), mit gleitendem Indikator */
.s-page .s-seg{position:relative;display:inline-flex;border:1px solid var(--h-line);border-radius:8px;background:var(--h-card);overflow:hidden}
.s-page .s-seg button{position:relative;z-index:1;min-height:44px;padding:10px 18px;border:0;border-right:1px solid var(--h-line);background:transparent;color:var(--vnx-text-secondary);font:inherit;font-size:15px;line-height:1.2;cursor:pointer;white-space:nowrap;transition:color .18s ease}
.s-page .s-seg button:last-child{border-right:0}
.s-page .s-seg button:hover{color:var(--vnx-text)}
.s-page .s-seg button[aria-pressed="true"]{color:var(--vnx-text);font-weight:600}
.s-page .s-seg button:focus-visible{outline:2px solid var(--vnx-text);outline-offset:-3px}
.s-page .s-seg-ind{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--h-soft);box-shadow:inset 0 0 0 1px var(--vnx-text);border-radius:7px;transition:transform .22s ease,width .22s ease;pointer-events:none}
@media (max-width:600px){.s-page .s-seg{display:flex;width:100%}.s-page .s-seg button{flex:1;padding:10px 6px}}