/* Webhosting-Seite (webhosting.tpl, vnx_webhosting.php), Redesign vom 07.11.2026. Bausteine aus vnx-site.css.
   Die Paketkarten sind dieselben wie auf den Store-Seiten (vnx-store.css, Branch feature/redesign-store), hier unter
   .w-page, damit beide Branches unabhängig bleiben. Nach dem Merge beider Branches können die Kartenregeln in eine
   gemeinsame Datei wandern. Dazu Domain-Suche, Plesk-Funktionen und Vertrauen. Farbregel: Knöpfe h-btn-sec,
   Grün nur als dünne Kante beim empfohlenen Paket. */
.w-page .s-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap;margin-bottom:28px}
.w-page .s-top .h-lead{margin-top:6px}
.w-page .s-facts{margin-top:22px}
.w-page .s-note{margin-top:14px}
.w-page .s-leer{padding:24px}

/* Raster: bis fünf Karten nebeneinander */
.w-page .s-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.w-page .s-n1{grid-template-columns:minmax(0,420px)}
.w-page .s-n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.w-page .s-n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.w-page .s-n5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1359px){.w-page .s-n5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1060px){.w-page .s-n4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.w-page .s-n3,.w-page .s-n4,.w-page .s-n5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.w-page .s-grid,.w-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.w-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.w-page .s-card.is-featured{box-shadow:inset 0 2px 0 var(--h-lime);transform:translateY(-4px)}
.vnx-home.w-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.w-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.w-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.w-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.w-page .s-card,.w-page .s-seg-ind{transition:none}.vnx-home.w-page .s-card,.vnx-home.w-page .s-card:hover,.vnx-home.w-page .s-card.is-featured,.vnx-home.w-page .s-card.is-featured:hover{transform:none}}
.w-page .s-card[hidden]{display:none!important}

.w-page .s-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-height:36px}
.w-page .s-head .h-pic svg.i{width:18px;height:18px;stroke-width:1.5;color:var(--vnx-text)}
.w-page .s-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
/* Badge in der Form von h-tag, aber neutral */
.w-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}
.w-page .s-tag.s-disc{color:var(--vnx-text);font-variant-numeric:tabular-nums}
.w-page .s-tag[hidden]{display:none}
.w-page .s-card h3{margin-top:14px;font-size:22px;line-height:1.2}

/* Merkmale: Funktionsliste der Startseite, Wert fett */
.w-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. */
.w-page .s-feat li{min-width:0;white-space:nowrap}
.w-page .s-feat span{white-space:nowrap}

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

/* Laufzeit: Segment wie im Konfigurator (vnx-seg), mit gleitendem Indikator */
.w-page .s-seg{position:relative;display:inline-flex;border:1px solid var(--h-line);border-radius:8px;background:var(--h-card);overflow:hidden}
.w-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}
.w-page .s-seg button:last-child{border-right:0}
.w-page .s-seg button:hover{color:var(--vnx-text)}
.w-page .s-seg button[aria-pressed="true"]{color:var(--vnx-text);font-weight:600}
.w-page .s-seg button:focus-visible{outline:2px solid var(--vnx-text);outline-offset:-3px}
.w-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){.w-page .s-seg{display:flex;width:100%}.w-page .s-seg button{flex:1;padding:10px 6px}}

/* Paket „Individuell“: Preiszeile „auf Anfrage“ in Höhe der übrigen Preise */
.w-page .w-anfrage{font-size:30px;line-height:1.1;font-weight:700;color:var(--vnx-text)}

/* Domain-Suche: große Suchzeile, darunter beliebte Endungen als Kacheln (klickbar, setzen die Endung) */
.w-page .w-dom{padding:28px}
.w-page .w-dom-f{display:flex;gap:10px;margin-top:18px}
.w-page .w-dom-f input{flex:1;min-width:0;height:56px;padding:0 18px;border:1px solid var(--h-line);border-radius:8px;background:var(--h-soft);color:var(--vnx-text);font:inherit;font-size:18px}
.w-page .w-dom-f input:focus{outline:2px solid var(--vnx-text);outline-offset:1px;background:var(--h-card)}
.w-page .w-dom-f .h-btn{height:56px;padding:0 26px;font-size:16px}
.w-page .w-tlds{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.w-page .w-tld{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:1px solid var(--h-line);border-radius:8px;background:var(--h-card);color:var(--vnx-text);font:inherit;text-align:left;cursor:pointer;transition:border-color .18s ease,transform .18s ease}
.w-page .w-tld:hover{border-color:var(--vnx-text-muted);transform:translateY(-2px)}
.w-page .w-tld:focus-visible{outline:2px solid var(--vnx-text);outline-offset:2px}
.w-page .w-tld b{font-size:20px;line-height:1.2}
.w-page .w-tld small{font-size:13px;color:var(--vnx-text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.w-page .w-dom-l{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;font-size:14px}

/* Plesk-Funktionen: Kacheln mit Icon wie die Funktionsliste der Startseite */
.w-page .w-pl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.w-page .w-pl .h-card{padding:22px}
.w-page .w-pl h3{margin-top:14px;font-size:18px;line-height:1.3;font-weight:700}
.w-page .w-pl p{margin-top:6px;font-size:14px;color:var(--vnx-text-secondary)}
.w-page .w-pl .h-pic svg.i,.w-page .s-head .h-pic svg.i{width:18px;height:18px;stroke-width:1.5;color:var(--vnx-text)}

/* Vertrauen */
.w-page .w-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:28px}
.w-page .w-trust b{display:block;margin-top:12px;font-size:16px}
.w-page .w-trust p{margin-top:4px;font-size:14px;color:var(--vnx-text-secondary)}

@media (max-width:1060px){.w-page .w-tlds{grid-template-columns:repeat(3,minmax(0,1fr))}.w-page .w-trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.w-page .w-pl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.w-page .w-dom{padding:20px}.w-page .w-dom-f{flex-direction:column}.w-page .w-dom-f .h-btn{width:100%}.w-page .w-tlds{grid-template-columns:repeat(2,minmax(0,1fr))}.w-page .w-pl,.w-page .w-trust{grid-template-columns:1fr}}