/* =====================================================================
 * venocix: Cashback-Hinweise und CPU-Auswahl im Lagom-2-Orderform (assets/js/vnx-orderform.js).
 * Flach wie das Mockup „Neue Funktionen“: 1-px-Rand, Grün nur als Akzent.
 * ===================================================================== */

.vnx-cb-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--ui-block-divider-color, #d8dde3); border-radius: 8px; background: var(--ui-block-bg, #242424); color: var(--text-heading-color, #eee); font-family: var(--vnx-font, inherit); }
/* Grau statt Grün (Farbregel: Grün nur für die Hauptaktion, UXA-18 aus dem Nacht-E2E). */
.vnx-cb-banner svg { flex: none; color: var(--text-body-color, #ccc); }
.vnx-cb-banner b { display: block; font-size: 15px; }
.vnx-cb-banner span { display: block; font-size: 14px; line-height: 1.5; color: var(--text-body-color, #ccc); }

.vnx-cb-label { display: inline-flex; align-items: center; margin-top: 8px; padding: 2px 8px; border-radius: 4px; background: #a3d133; color: #17200b; font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.cart-item-title .vnx-cb-label { margin-left: 0; }

.vnx-cpu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; }
.vnx-cpu-opt { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--ui-block-border-color, #333); border-radius: 8px; background: var(--ui-block-bg, #242424); color: var(--text-body-color, #ccc); text-decoration: none; }
.vnx-cpu-opt:hover, .vnx-cpu-opt:focus { border-color: #8a8f96; color: var(--text-body-color, #ccc); text-decoration: none; }
.vnx-cpu-opt.is-active { border-color: #a3d133; box-shadow: inset 0 0 0 1px #a3d133; }
.vnx-cpu-opt b { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--text-heading-color, #eee); }
.vnx-cpu-opt span { font-size: 13px; }
.vnx-cpu-opt ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.vnx-cpu-new { padding: 1px 7px; border-radius: 4px; background: #a3d133; color: #17200b; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }

@media (max-width: 575px) {
    .vnx-cpu { grid-template-columns: minmax(0, 1fr); }
}

/* Betriebssystem zweistufig: Familie (Kachel) → Version (Knopf). Wie 7.10 (configureproduct.tpl). */
.vnx-os [hidden] { display: none !important; }
.vnx-os-step { margin: 0 0 8px; font-size: 12px; color: var(--text-body-color, #999); }
.vnx-os-families { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
@media (min-width: 768px) { .vnx-os-families { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.vnx-os-fam { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; padding: 14px 6px 12px; border: 1px solid var(--ui-block-border-color, #333); border-radius: 8px; background: var(--ui-block-bg, #242424); color: var(--text-heading-color, #eee); text-align: center; cursor: pointer; box-shadow: none; transition: border-color .15s, background-color .15s; }
.vnx-os-fam:hover { border-color: #8a8f96; }
.vnx-os-fam img { width: 40px; height: 40px; display: block; }
.vnx-os-fam-name { font-size: 13px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.vnx-os-fam-meta { font-size: 12px; line-height: 1.25; color: var(--text-body-color, #999); }
.vnx-os-fam.is-active, .vnx-os-chip.is-active { border-color: #a3d133; box-shadow: inset 0 0 0 1px #a3d133; }
.vnx-os-fam.is-locked, .vnx-os-chip.is-locked { opacity: .45; cursor: not-allowed; }
.vnx-os-fam.is-locked:hover { border-color: var(--ui-block-border-color, #333); }
.vnx-os-versions { display: flex; flex-wrap: wrap; gap: 8px; }
.vnx-os-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 14px; border: 1px solid var(--ui-block-border-color, #333); border-radius: 8px; background: var(--ui-block-bg, #242424); color: var(--text-heading-color, #eee); font-size: 13px; cursor: pointer; box-shadow: none; transition: border-color .15s; }
.vnx-os-chip:hover { border-color: #8a8f96; }
.vnx-os-fam:focus, .vnx-os-chip:focus { outline: none; }
.vnx-os-fam:focus-visible, .vnx-os-chip:focus-visible { outline: 2px solid #a3d133; outline-offset: 2px; }
.vnx-os-badge { padding: 1px 6px; border: 1px solid var(--ui-block-border-color, #333); border-radius: 4px; font-size: 11px; line-height: 16px; color: #a3d133; }
.vnx-os-badge.is-eol { color: var(--text-body-color, #999); }
.vnx-os-lang { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-body-color, #999); }
.vnx-os-lang svg { display: block; width: 16px; height: 11px; border: 1px solid var(--ui-block-border-color, #333); border-radius: 2px; }
.vnx-os-chip.is-locked .vnx-os-lang svg { filter: grayscale(1); }
.vnx-os-chip-price { font-size: 12px; color: var(--text-body-color, #999); }

/* =====================================================================
 * Konfigurator im Redesign (body.vnx-kfg, gesetzt von vnx-orderform.js bei cfg.kfg), Mockup „Konfigurieren“
 * vom 07.11.2026. Farbregel: Grün nur am Hauptknopf (schwarze Schrift), sonst Grautöne. Dunkel zuerst.
 * ===================================================================== */
body.vnx-kfg { --k-card: #ffffff; --k-line: #e2e5ea; --k-soft: #f0f2f4; --k-text: #1f2328; --k-muted: #5b636b; --k-sub: #3d444b; --k-track: #d9dde2; }
body.vnx-kfg.darkmode, html.lagom-dark-mode body.vnx-kfg { --k-card: #242424; --k-line: #333333; --k-soft: #2c2c2c; --k-text: #eeeeee; --k-muted: #9a9a9a; --k-sub: #cccccc; --k-track: #3a3a3a; }

/* Kopf */
.vnx-kfg .main-header { padding-bottom: 8px; }
.vnx-kfg .main-header-title { margin: 0; font-size: 32px; line-height: 1.2; font-weight: 700; color: var(--k-text); }
.vnx-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 15px; color: var(--k-muted); }
.vnx-steps li { display: inline-flex; align-items: center; gap: 8px; }
.vnx-steps li + li::before { content: ""; width: 24px; height: 1px; margin-right: 6px; background: var(--k-line); }
.vnx-steps-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--k-line); border-radius: 50%; font-size: 12px; font-weight: 600; }
.vnx-steps .is-done { color: var(--k-sub); }
.vnx-steps .is-done .vnx-steps-n { border-color: var(--k-muted); }
.vnx-steps .is-current { color: var(--k-text); font-weight: 600; }
.vnx-steps .is-current .vnx-steps-n { background: var(--k-text); border-color: var(--k-text); color: var(--k-card); }
.vnx-kfg-lead { max-width: 36em; margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--k-sub); }

/* Karte mit den Optionen: Lagoms Abschnitte als Zeilen, Reihenfolge per order (Laufzeit, dann Standort unten) */
.vnx-kfg .product-config-info { display: none; }
/* Basis-Ansicht (feste Pakete, Webhosting): Produktname und Beschreibung bleiben, sie ersetzen dort die Regler. */
.vnx-kfg.vnx-kfg-basis .product-config-info { display: block; }
/* Lagoms Abschnittsüberschriften („Weitere Angaben“, „Ihre Konfiguration“) fett wie auf den Venocix-Seiten (Gesamttest P2, Niedrig 12). */
.vnx-kfg .section-title, .vnx-kfg .panel-summary .panel-title { font-weight: 600; }
.vnx-kfg-card { display: flex; flex-direction: column; margin-top: 8px; border: 1px solid var(--k-line); border-radius: 8px; background: var(--k-card); overflow: hidden; }
.vnx-kfg-card > #productConfigurableOptions { display: contents; }
.vnx-kfg-card .section.vnx-kfg-row { order: 0; margin: 0; padding: 22px 24px; border-top: 1px solid var(--k-line); }
.vnx-kfg-card .section.vnx-kfg-cpu { order: -2; border-top: 0 !important; }
.vnx-kfg-card .section.vnx-kfg-cycles { order: -1; } /* Laufzeit direkt unter dem Prozessor: Lagom lädt beim Wechsel die Optionen neu, das soll vor den Reglern passieren. */
.vnx-kfg-card .section.vnx-kfg-loc { order: 2; }
.vnx-kfg-card .section.vnx-kfg-row:first-child { border-top: 0; }
.vnx-kfg-row .section-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 14px; padding: 0; }
.vnx-kfg-row .section-title { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--k-text); }
.vnx-kfg-hint { font-size: 14px; color: var(--k-muted); }
.vnx-kfg-cpu { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
.vnx-kfg-cpu .section-title { margin: 0; }

/* Regler: Kopfzeile mit Wert und Aufpreis rechts, Griff 24 px */
.vnx-kfg-slider { position: relative; }
.vnx-kfg-slider .section-header { margin-bottom: 4px; padding-right: 220px; }
.vnx-kfg-val { position: absolute; top: 18px; right: 24px; display: flex; align-items: baseline; gap: 18px; }
.vnx-kfg-val output { font-size: 22px; font-weight: 700; color: var(--k-text); font-variant-numeric: tabular-nums; }
.vnx-kfg-add { min-width: 64px; text-align: right; font-size: 14px; color: var(--k-muted); font-variant-numeric: tabular-nums; }
.vnx-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 10px 0 0; padding: 0; background: transparent; cursor: pointer; --p: 0%; }
.vnx-range:focus { outline: none; }
.vnx-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--k-sub) 0, var(--k-sub) var(--p), var(--k-track) var(--p), var(--k-track) 100%); }
.vnx-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--k-track); }
.vnx-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--k-sub); }
.vnx-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border: 2px solid var(--k-text); border-radius: 50%; background: var(--k-card); }
.vnx-range::-moz-range-thumb { width: 22px; height: 22px; border: 2px solid var(--k-text); border-radius: 50%; background: var(--k-card); }
.vnx-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--k-card), 0 0 0 5px var(--k-text); }
.vnx-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--k-card), 0 0 0 5px var(--k-text); }
.vnx-range-marks { position: relative; height: 18px; margin: 6px 13px 0; font-size: 12px; color: var(--k-muted); }
.vnx-range-marks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }

/* Segmentknöpfe (IPv4, Laufzeit, Prozessor, weitere Auswahl) */
.vnx-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--k-line); border-radius: 8px; overflow: hidden; }
.vnx-seg-b { display: inline-flex; align-items: center; gap: 0; white-space: pre; min-height: 44px; padding: 10px 18px; border: 0; border-right: 1px solid var(--k-line); background: transparent; color: var(--k-sub); font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; }
.vnx-seg-b:last-child { border-right: 0; }
.vnx-seg-b:hover, .vnx-seg-b:focus { color: var(--k-text); text-decoration: none; }
.vnx-seg-b:focus-visible { outline: 2px solid var(--k-text); outline-offset: -3px; }
.vnx-seg-b.is-active { background: var(--k-soft); color: var(--k-text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--k-text); }
.vnx-seg-x { font-weight: 400; color: var(--k-muted); }
.vnx-kfg-static { margin: 0; font-size: 15px; color: var(--k-text); }

/* Betriebssystem in der Karte: Kacheln ohne Grün, Auswahl mit hellem Rand */
.vnx-kfg .vnx-os-fam, .vnx-kfg .vnx-os-chip { background: transparent; border-color: var(--k-line); color: var(--k-text); }
.vnx-kfg .vnx-os-fam.is-active, .vnx-kfg .vnx-os-chip.is-active { border-color: var(--k-text); box-shadow: inset 0 0 0 1px var(--k-text); background: var(--k-soft); }
.vnx-kfg .vnx-os-fam:focus-visible, .vnx-kfg .vnx-os-chip:focus-visible { outline-color: var(--k-text); }
.vnx-kfg .vnx-os-badge { color: var(--k-sub); }
.vnx-kfg .vnx-os-families { margin-bottom: 14px; }

/* Zusammenfassung: ruhige Karte statt grüner Fläche, ein grüner Knopf mit schwarzer Schrift */
.vnx-kfg .panel-summary.panel-summary-primary { background: var(--k-card) !important; border: 1px solid var(--k-line) !important; border-radius: 8px; color: var(--k-text) !important; box-shadow: none !important; }
.vnx-kfg .panel-summary-primary .panel-heading { padding: 18px 22px; border-bottom: 1px solid var(--k-line); background: transparent !important; }
.vnx-kfg .panel-summary-primary .panel-title { margin: 0; font-size: 17px; font-weight: 600; color: var(--k-text) !important; }
.vnx-kfg .panel-summary-primary .panel-body, .vnx-kfg .panel-summary-primary .panel-footer { padding: 6px 22px 18px; background: transparent !important; border: 0; color: var(--k-text) !important; }
.vnx-kfg .panel-summary-primary .summary-content > .summary-item, .vnx-kfg .panel-summary-primary .summary-item-tax { display: none !important; }
.vnx-kfg .panel-summary-primary .summary-list { margin: 0; padding: 0; background: transparent !important; border: 0; }
.vnx-kfg .panel-summary-primary .summary-list .list-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--k-line); font-size: 15px; color: var(--k-sub) !important; background: transparent !important; }
.vnx-kfg .panel-summary-primary .summary-list .item-optionname, .vnx-kfg .panel-summary-primary .summary-list .item-value { color: var(--k-text) !important; font-weight: 600; }
.vnx-kfg .panel-summary-primary .item-value-free { display: none; }
/* Lagoms Hover-Preis (.summary-list.hoverable) liegt per transform rechts außerhalb der Liste und ragt unsichtbar über
   die Seite (bei 768 px bis x≈1096). Die Aufpreise stehen an den Reglern, summary() liest den Text trotzdem (textContent). */
.vnx-kfg .panel-summary-primary .summary-list .item-value { display: none !important; }
/* Lange Werte (Standort „…, Frankfurt am Main“) umbrechen statt mit Ellipse abschneiden (UXA-17). */
.vnx-kfg .panel-summary-primary .summary-list .item-name, .vnx-kfg .panel-summary-primary .summary-list .item-optionname { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; min-width: 0; }
.vnx-kfg .panel-summary-primary .price { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.vnx-kfg .panel-summary-primary .price-total { display: none !important; }
/* Beschriftung und Hinweis kommen aus vnx-orderform.js als CSS-Variablen an #orderSummary (siehe summary()). */
.vnx-kfg .panel-summary-primary .price::before { content: var(--vnx-total, ""); font-size: 15px; color: var(--k-sub); }
.vnx-kfg .panel-summary-primary .price::after { content: var(--vnx-note, ""); flex: 0 0 100%; margin: 2px 0 14px; font-size: 13px; color: var(--k-muted); }
.vnx-kfg .panel-summary-primary .price-amount-total { font-size: 32px; font-weight: 700; color: var(--k-text) !important; }
.vnx-kfg .btn-checkout, .vnx-kfg .btn-checkout:hover, .vnx-kfg .btn-checkout:focus { background: #a3d133 !important; border-color: #a3d133 !important; color: #000 !important; box-shadow: none !important; font-weight: 600; }
.vnx-kfg .btn-checkout:hover { background: #b4dd55 !important; border-color: #b4dd55 !important; }
.vnx-kfg .btn-checkout .ls { display: none; }
/* Knopftext „In den Warenkorb“ statt „Fortsetzen“ per CSS: Lagoms Text bleibt im DOM, Lagoms Neurendern kollidiert nicht. */
.vnx-kfg #btnCompleteProductConfig > span, .vnx-kfg #btnCompleteProductConfigMob > span { font-size: 0; }
.vnx-kfg #btnCompleteProductConfig > span::after, .vnx-kfg #btnCompleteProductConfigMob > span::after { content: "In den Warenkorb"; font-size: 16px; }
.vnx-kfg .btn-checkout:focus-visible { outline: 2px solid var(--k-text); outline-offset: 2px; }

/* Handy */
@media (max-width: 767px) {
    .vnx-kfg .main-header-title { font-size: 26px; }
    .vnx-steps li + li::before { width: 12px; }
    .vnx-kfg-card .section.vnx-kfg-row { padding: 18px 16px; }
    .vnx-kfg-slider .section-header { padding-right: 0; }
    .vnx-kfg-val { position: static; justify-content: space-between; margin-top: 2px; }
    .vnx-seg { display: flex; width: 100%; }
    .vnx-seg-b { flex: 1 1 auto; justify-content: center; padding: 10px 12px; }
}
/* Lagom-Farben im Redesign übersteuern: Namen in der Zusammenfassung, Links als Segmentknöpfe, Knopftext schwarz. */
.vnx-kfg .panel-summary-primary .summary-list .item-name { color: var(--k-sub) !important; }
.vnx-kfg a.vnx-seg-b, .vnx-kfg a.vnx-seg-b:hover, .vnx-kfg a.vnx-seg-b:focus { color: var(--k-sub); }
.vnx-kfg a.vnx-seg-b.is-active { color: var(--k-text); }
.vnx-kfg #btnCompleteProductConfig > span::after, .vnx-kfg #btnCompleteProductConfigMob > span::after { color: #000; font-weight: 600; }