/* venocix-Redesign (07.11.2026): Startseite, /kvm-server, Webhosting und Kopfleiste C. Stile der abgenommenen Mockups 1:1. Grundlage vnx-home.css (Stand HEAD), Kopfleiste C aus vnx-layout.css, danach die Mockup-Ergänzungen. */
/* =====================================================================
 * venocix: Startseite (Lagom-2-Seitenvariante core/pages/homepage/venocix).
 *
 * Übernommen aus dem Mockup „Neue Funktionen“ (site/home-neu.css, Startseite B):
 * Designsprache des Kundencenter-Kits, flach, einfarbige Flächen, 1-px-Rand, keine Verläufe
 * und keine Leucht-Schatten, Grün nur als Akzent. Token --vnx-* aus venocix-portal.css.
 * Angepasst: Token hängen am Wrapper .h-body (nicht am body), Mockup-Rahmen (Hinweisleiste,
 * Kopf- und Fußleiste, Toast) entfernt, Aktions-Banner und Bewertungskarten ergänzt.
 * ===================================================================== */
.h-body {
	--page-bg: #f5f6f8;
	--h-lime: #a3d133;
	--h-lime-h: #b4dd55;
	--h-on-lime: #17200b;
	--h-card: #ffffff;
	--h-band: #ffffff;
	--h-line: #e2e5ea;
	--h-line-2: #eff0f2;
	--h-soft: #f5f6f8;
	--h-seg: #eef0f2;
	--h-unb-bg: #ffe98a; --h-unb-fg: #2e2600; --h-unb-line: #9a7a00;
	font-family: var(--vnx-font);
	font-size: 15px;
	line-height: 1.55;
	color: var(--vnx-text);
	background: var(--page-bg);
}
.darkmode .h-body {
	--page-bg: #1e1e1e;
	--h-card: #242424;
	--h-band: #191919;
	--h-line: #333333;
	--h-line-2: #2b2b2b;
	--h-soft: #2a2a2a;
	--h-seg: #1c1c1c;
	--h-unb-bg: #5b4c00; --h-unb-fg: #fff3b8; --h-unb-line: #e2c440;
}
.h-body * { box-sizing: border-box; }
:where(.h-body) :where(h1, h2, h3, h4, p, ul, figure) { margin: 0; }
:where(.h-body) :where(ul) { padding: 0; list-style: none; }
:where(.h-body) :where(a) { color: inherit; text-decoration: none; }
.h-body :focus-visible { outline: 2px solid var(--h-lime); outline-offset: 2px; }
.h-body svg.i { width: 18px; height: 18px; }
.h-wrap { max-width: 1200px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.unb { background: var(--h-unb-bg); color: var(--h-unb-fg); border-bottom: 1px dashed var(--h-unb-line); padding: 0 3px; cursor: help; }



/* Knöpfe */
.h-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--h-line); background: var(--h-card); color: var(--vnx-text); font: 500 14px/1.2 var(--vnx-font); cursor: pointer; white-space: nowrap; }
.h-btn svg.i { width: 16px; height: 16px; }
.h-btn:hover { border-color: var(--vnx-text-muted); }
.h-btn-pri { background: var(--h-lime); border-color: var(--h-lime); color: var(--h-on-lime); }
.h-btn-pri:hover { background: var(--h-lime-h); border-color: var(--h-lime-h); }
.h-btn-sec { background: transparent; }
.h-btn-sm { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.h-btn-lg { min-height: 46px; padding: 11px 20px; font-size: 15px; }

/* Marken */
.h-badge { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 4px; background: var(--h-lime); color: var(--h-on-lime); font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; line-height: 1.3; white-space: nowrap; }
.h-tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 4px; background: var(--h-lime); color: var(--h-on-lime); font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; line-height: 1.5; vertical-align: middle; }

/* Abschnitte */
.h-sec { padding: 72px 0; border-top: 1px solid var(--h-line); }
.h-sec h2 { font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -.2px; text-wrap: balance; }
.h-lead { margin-top: 10px; max-width: 46em; color: var(--vnx-text-secondary); font-size: 16px; }
.h-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--vnx-accent-text); }
.h-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--h-lime); }
.h-card { background: var(--h-card); border: 1px solid var(--h-line); border-radius: 8px; }

/* Hero A */
.h-hero { padding: 64px 0 72px; background: var(--h-band); }
.h-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.h-hero h1 { margin: 18px 0 16px; font-size: 54px; line-height: 1.05; font-weight: 700; letter-spacing: -.8px; text-wrap: balance; }
.h-hero-sub { font-size: 17px; line-height: 1.6; color: var(--vnx-text-secondary); max-width: 34em; }
.h-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.h-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; font-size: 14px; color: var(--vnx-text-secondary); }
.h-facts li { display: flex; align-items: center; gap: 8px; }
.h-facts svg.i { width: 16px; height: 16px; color: var(--vnx-text-muted); }
.h-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 22px; font-size: 12px; color: var(--vnx-text-muted); }
.h-pay span { margin-right: 4px; }
.h-pay i { font-style: normal; padding: 3px 8px; border: 1px solid var(--h-line); border-radius: 4px; color: var(--vnx-text-secondary); }
.h-hero-shot figcaption { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--vnx-text-muted); }
.h-shot { border: 1px solid var(--h-line); border-radius: 8px; overflow: hidden; background: var(--h-soft); }
.h-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }

/* Hero B */
.h-hero-b h1 { margin-top: 28px; }
.h-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border: 1px solid var(--h-lime); border-radius: 8px; background: var(--h-card); font-size: 14px; color: var(--vnx-text); }
.h-strip > span:not(.h-badge) { flex: 1 1 260px; }
.h-label { margin: 28px 0 10px; font-size: 13px; font-weight: 500; color: var(--vnx-text-muted); }
.h-goals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.h-goal { position: relative; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--h-line); border-radius: 8px; background: var(--h-card); color: var(--vnx-text); font-family: inherit; cursor: pointer; min-width: 0; }
.h-goal:hover { border-color: var(--vnx-text-muted); }
.h-goal[aria-pressed="true"] { border-color: var(--h-lime); box-shadow: inset 0 0 0 1px var(--h-lime); }
.h-goal[aria-pressed="true"] .h-pic { background: var(--h-lime); color: var(--h-on-lime); border-color: var(--h-lime); }
.h-goal .h-pic { margin-bottom: 8px; }
.h-goal .h-tag { position: absolute; top: 14px; right: 14px; }
.h-goal b { font-size: 15px; }
.h-goal small { font-size: 13px; color: var(--vnx-text-muted); line-height: 1.4; }
.h-goal-out { margin-top: 14px; }
.h-goal-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.h-goal-panel.is-one { grid-template-columns: minmax(0, 1fr); }
.h-goal-panel[hidden] { display: none; }

/* Neu-Abschnitt */
.h-neu { background: var(--page-bg); }
.h-incl { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 15px; font-weight: 500; color: var(--vnx-text); }
.h-incl svg.i { color: var(--vnx-accent-text); }
.h-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; align-items: start; }
.h-feat, .h-ki { display: flex; flex-direction: column; gap: 8px; padding: 22px; min-width: 0; }
.h-feat-k { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--vnx-accent-text); }
.h-feat-k .h-tag { margin-left: auto; }
.h-feat h3, .h-ki h3 { font-size: 20px; line-height: 1.25; font-weight: 700; }
.h-feat p, .h-ki p { font-size: 14px; color: var(--vnx-text-secondary); }
.h-feat .d-box, .h-ki .d-box { margin-top: 10px; }
.h-sub { margin: 40px 0 14px; font-size: 20px; font-weight: 700; }
.h-more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.h-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; padding: 6px; }
.h-list li { display: flex; gap: 12px; padding: 14px; }
.h-list svg.i { color: var(--vnx-accent-text); margin-top: 2px; }
.h-list b { display: block; font-size: 14px; }
.h-list span { display: block; font-size: 13px; color: var(--vnx-text-muted); }
.h-neu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 22px; font-size: 14px; color: var(--vnx-text-muted); }

/* Demo-Karten (Beispielansichten) */
.d-box { margin-top: 10px; border: 1px solid var(--h-line); border-radius: 8px; background: var(--h-seg); overflow: hidden; font-size: 13px; }
.d-head { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--h-line-2); font-size: 12px; font-weight: 500; color: var(--vnx-text-muted); }
.d-ex { font-weight: 400; }
.d-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--h-line-2); }
.d-row.is-risk .d-svc small { color: var(--vnx-warning); }
.d-row.is-closed .d-svc b { color: var(--vnx-text-muted); text-decoration: line-through; }
.d-svc { min-width: 0; flex: 1 1 150px; }
.d-svc b { display: block; font-size: 13px; }
.d-svc small { display: block; font-size: 12px; color: var(--vnx-text-muted); }
.d-seg { display: inline-flex; border: 1px solid var(--h-line); border-radius: 6px; overflow: hidden; background: var(--h-card); }
.d-seg button { border: 0; background: none; font: 500 12px/1.2 var(--vnx-font); color: var(--vnx-text-secondary); padding: 6px 8px; cursor: pointer; white-space: nowrap; }
.d-seg button + button { border-left: 1px solid var(--h-line); }
.d-seg button[aria-pressed="true"] { background: var(--vnx-primary); color: #fff; }
.d-seg button[data-seg="block"][aria-pressed="true"] { background: var(--vnx-text-secondary); color: var(--h-card); }
.d-foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12px; color: var(--vnx-text-secondary); }
.d-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.d-dot.ok { background: var(--h-lime); } .d-dot.warn { background: var(--vnx-warning); }
.d-vpn { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-bottom: 1px solid var(--h-line-2); }
.d-vpn b { display: block; font-size: 14px; }
.d-vpn small { display: block; font-size: 12px; color: var(--vnx-text-muted); }
.d-switch { position: relative; flex: none; width: 44px; height: 24px; border-radius: 12px; border: 0; background: var(--h-line); cursor: pointer; }
.d-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.d-switch[aria-checked="true"] { background: var(--vnx-primary); }
.d-switch[aria-checked="true"]::after { left: 23px; }
.d-list div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--h-line-2); }
.d-list div:last-child { border-bottom: 0; }
.d-list span { color: var(--vnx-text-muted); }
.d-list b { font-weight: 500; text-align: right; }
.d-net { display: flex; align-items: center; gap: 8px; padding: 16px 12px; }
.d-node { flex: 1; min-width: 0; padding: 10px; border: 1px solid var(--h-line); border-radius: 6px; background: var(--h-card); }
.d-node b { display: block; font-size: 13px; }
.d-node small { display: block; font-size: 12px; color: var(--vnx-text-muted); }
.d-node code { display: block; margin-top: 4px; font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--vnx-text-secondary); }
.d-link { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.d-link span { width: 100%; height: 0; border-top: 2px dashed var(--vnx-accent-text); }
.d-link small { font-size: 11px; color: var(--vnx-accent-text); }
.d-chat { padding-bottom: 6px; }
.d-msg { max-width: 82%; margin: 8px 12px; padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 1.45; }
.d-msg small { display: block; font-size: 11px; color: var(--vnx-text-muted); margin-bottom: 2px; }
.d-msg.me { margin-left: auto; background: var(--h-card); border: 1px solid var(--h-line); }
.d-msg.ai { background: var(--h-soft); border: 1px solid var(--h-line-2); }
.darkmode .d-msg.ai { background: #303030; }

/* Produkte */
.h-prods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.h-prod { display: flex; flex-direction: column; gap: 14px; padding: 20px; min-width: 0; }
.h-prod-h { display: flex; align-items: center; gap: 12px; }
.h-prod-h h3 { font-size: 17px; font-weight: 700; line-height: 1.25; }
.h-prod-h small { font-size: 13px; color: var(--vnx-text-muted); }
.h-pic { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--h-line); border-radius: 8px; background: var(--h-soft); color: var(--vnx-text); }
.h-checks { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--vnx-text-secondary); }
.h-checks li { display: flex; gap: 8px; }
.h-checks svg.i, .h-row-f svg.i { width: 15px; height: 15px; margin-top: 3px; color: var(--vnx-text-muted); }
.h-checks b, .h-row-f b { color: var(--vnx-text); font-weight: 700; }
.h-pnew { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--vnx-text); }
.h-prod-f { margin-top: auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.h-price small { display: block; font-size: 12px; color: var(--vnx-text-muted); }
.h-price b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.h-price > span { font-size: 13px; color: var(--vnx-text-muted); }
.h-prod.is-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: start; gap: 14px 24px; }
.h-prod.is-wide .h-prod-f { align-self: center; }
.h-prod.is-wide .h-pnew { grid-column: 2; }
.h-prod.is-wide .h-prod-f { grid-row: 1 / span 2; grid-column: 3; flex-direction: column; align-items: flex-end; }
.h-domain { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 16px; }
.h-domain-l { display: flex; align-items: center; gap: 10px; }
.h-domain input { flex: 1 1 220px; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--h-line); border-radius: 8px; background: var(--h-soft); color: var(--vnx-text); font: 14px var(--vnx-font); }

/* Vertrauen */
.h-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 28px; }
.h-trust svg.i { width: 22px; height: 22px; color: var(--vnx-text-muted); margin-bottom: 12px; }
.h-trust b { display: block; font-size: 16px; margin-bottom: 6px; }
.h-trust p { font-size: 14px; color: var(--vnx-text-secondary); }
.h-trustbar { border-top: 1px solid var(--h-line); border-bottom: 1px solid var(--h-line); background: var(--h-band); }
.h-trustbar-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.h-trustbar-in > div { display: flex; gap: 12px; padding: 20px 18px; border-left: 1px solid var(--h-line); }
.h-trustbar-in > div:first-child { border-left: 0; padding-left: 0; }
.h-trustbar svg.i { width: 20px; height: 20px; color: var(--vnx-text-muted); flex: none; }
.h-trustbar b { display: block; font-size: 14px; }
.h-trustbar small { display: block; font-size: 13px; color: var(--vnx-text-muted); }

/* Produktliste (B) */
.h-rows { margin-top: 28px; overflow: hidden; }
.h-row { display: grid; grid-template-columns: 36px minmax(0, 1.1fr) minmax(0, 1.6fr) auto auto; gap: 18px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--h-line-2); }
.h-row:first-child { border-top: 0; }
.h-row-n b { font-size: 15px; margin-right: 6px; }
.h-row-n small { display: block; font-size: 13px; color: var(--vnx-text-muted); }
.h-row-f { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--vnx-text-secondary); }
.h-row-f li { display: flex; gap: 6px; }
.h-row .h-price { text-align: right; }
.h-row .h-price b { font-size: 20px; }

/* Bewertungen, Kontakt, Footer */
.h-rev { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.h-skel { padding: 22px; display: flex; flex-direction: column; gap: 10px; min-height: 140px; }
.h-skel i { display: block; height: 10px; border-radius: 4px; background: var(--h-soft); }
.h-skel i:nth-child(1) { width: 40%; } .h-skel i:nth-child(2) { width: 90%; } .h-skel i:nth-child(3) { width: 70%; }
.h-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.h-cts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.h-ct { display: flex; gap: 12px; padding: 16px; }
.h-ct svg.i { color: var(--vnx-text-muted); margin-top: 2px; }
.h-ct b { display: block; font-size: 15px; }
.h-ct small { display: block; font-size: 13px; color: var(--vnx-text-muted); }
.h-ct:hover { border-color: var(--vnx-text-muted); }


/* Mittel */
@media (max-width: 1080px) {
	.h-feats { grid-template-columns: minmax(0, 1fr); }
	.h-feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto auto 1fr; column-gap: 24px; }
	.h-feat .d-box { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
	.h-goals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.h-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.h-row { grid-template-columns: 36px minmax(0, 1fr) auto auto; }
	.h-row-f { display: none; }
}
/* Handy */
@media (max-width: 760px) {
	.h-wrap { padding-left: 16px; padding-right: 16px; }
	.h-hero { padding: 36px 0 44px; }
	.h-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.h-hero h1 { font-size: 36px; letter-spacing: -.4px; }
	.h-hero-sub { font-size: 16px; }
	.h-cta { flex-direction: column; }
	.h-cta .h-btn { width: 100%; }
	.h-badge { white-space: normal; }
	.h-sec { padding: 48px 0; }
	.h-sec h2 { font-size: 26px; }
	.h-feat { display: flex; }
	.h-feat .d-box { margin-top: 10px; }
	.h-more { grid-template-columns: minmax(0, 1fr); }
	.h-list { grid-template-columns: minmax(0, 1fr); }
	.h-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.h-goal { padding: 14px; }
	.h-goal-panel, .h-goal-panel.is-one { grid-template-columns: minmax(0, 1fr); }
	.h-prod.is-wide { display: flex; }
	.h-prod.is-wide .h-prod-f { flex-direction: row; align-items: flex-end; }
	.h-prods { grid-template-columns: minmax(0, 1fr); }
	.h-prod-f .h-btn { width: 100%; }
	.h-domain .h-btn { width: 100%; }
	.h-trust { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.h-trustbar-in { grid-template-columns: minmax(0, 1fr); }
	.h-trustbar-in > div { border-left: 0; border-top: 1px solid var(--h-line); padding-left: 0; }
	.h-trustbar-in > div:first-child { border-top: 0; }
	.h-row { grid-template-columns: 36px minmax(0, 1fr) auto; row-gap: 10px; padding: 14px 16px; }
	.h-row .h-btn { grid-column: 2 / span 2; justify-self: start; }
	.h-rev { grid-template-columns: minmax(0, 1fr); }
	.h-rev .h-skel:nth-child(n+2) { display: none; }
	.h-contact { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.h-cts { grid-template-columns: minmax(0, 1fr); }
	.d-seg button { padding: 6px 7px; }
}
@media (prefers-reduced-motion: reduce) { .d-switch::after { transition: none; } }

/* ---------- Ergänzungen für das Theme ---------- */

/* Lagom setzt Abstände und Typografie für den Inhaltsbereich; die Startseite nutzt die volle Breite. */
.vnx-home { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.vnx-home h1, .vnx-home h2, .vnx-home h3, .vnx-home h4 { color: var(--vnx-text); font-family: var(--vnx-font); }
.vnx-home a.h-btn:hover, .vnx-home a.h-card:hover { text-decoration: none; }
.vnx-home a.h-btn-pri, .vnx-home a.h-btn-pri:hover, .vnx-home a.h-btn-pri:focus { color: var(--h-on-lime); }
.vnx-home a.h-btn:not(.h-btn-pri), .vnx-home a.h-btn:not(.h-btn-pri):hover, .vnx-home a.h-card, .vnx-home a.h-card:hover { color: var(--vnx-text); }
.vnx-home .h-checks a { color: var(--vnx-accent-text); }

/* Aktions-Banner (site_promobanner), sitzt über dem Hero, solange eine Aktion läuft */
.h-promo { background: var(--h-card); border-bottom: 1px solid var(--h-line); }
.h-promo-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 12px; padding-bottom: 12px; font-size: 14px; }
.h-promo-t { flex: 1 1 320px; min-width: 0; }
.h-promo-t b { margin-right: 8px; }
.h-promo-t span { color: var(--vnx-text-secondary); }
.h-promo small { color: var(--vnx-text-muted); font-size: 12px; }

/* Bewertungen */
.h-revcard { display: flex; flex-direction: column; gap: 10px; padding: 20px; color: var(--vnx-text); }
.h-revcard:hover { border-color: var(--vnx-text-muted); }
.h-revcard p { font-size: 14px; color: var(--vnx-text-secondary); }
.h-revcard small { font-size: 13px; color: var(--vnx-text-muted); }
.h-stars { display: flex; gap: 2px; color: var(--h-lime); }
.h-stars svg.i { width: 16px; height: 16px; fill: currentColor; }

/* Icons ohne kit-frame.css */
.vnx-home svg.i { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; display: block; }
.vnx-home .h-btn svg.i { display: inline-block; }

/* Lagom gibt Überschriften Außenabstände; im Mockup steuern die Komponenten den Abstand selbst. */
.vnx-home :where(h2, h3, h4):not(.h-sub) { margin: 0; }

/* =====================================================================
 * vnx-layout.css — neues Seitengerüst des Kundencenters (Welle 0):
 * Kopfleiste C (.vnx-top-*), Handy-Blatt (.vnx-sheet-*), Avatar-Menü
 * (.vnx-acc-*), Rahmen (.vnx-frame) und Fuß (.vnx-foot).
 *
 * Wirkt nur auf Seiten im neuen Gerüst (body.vnx-shell bzw. die eigenen
 * Klassen); Seiten im bisherigen Layout bleiben unberührt.
 * Farben nur über --vnx-*-Token (alle in venocix-portal.css); ruhig und flach,
 * Grün nur am aktiven Punkt, am Knopf „Bestellen“ und am Hinweis-Punkt.
 * Kopfleiste wechselt unter 900 px in die Handy-Variante.
 * ===================================================================== */

/* Rahmen-Token (--vnx-page-bg, --vnx-bar-bg, --vnx-pop-shadow) stehen bei den übrigen Token in venocix-portal.css. */

/* Seitenhintergrund im neuen Gerüst (darkmode.css setzt .darkmode mit !important) */
body.vnx-shell { background: var(--vnx-page-bg); margin: 0; padding: 0; }
body.darkmode.vnx-shell { background-color: var(--vnx-page-bg) !important; }
html.vnx-sheet-open, html.vnx-sheet-open body { overflow: hidden; }

.vnx-top, .vnx-sheet, .vnx-foot, .vnx-frame-note { font-family: var(--vnx-font); -webkit-font-smoothing: antialiased; }
.vnx-top *, .vnx-top *::before, .vnx-top *::after,
.vnx-sheet *, .vnx-sheet *::before, .vnx-sheet *::after,
.vnx-foot *, .vnx-frame-note * { box-sizing: border-box; }
.vnx-top [hidden], .vnx-sheet[hidden] { display: none !important; }

svg.vnx-i { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; display: block; }

/* ═══════════════ KOPFLEISTE ═══════════════ */
.vnx-top { position: relative; z-index: 1000; flex-shrink: 0; width: 100%; display: flex; align-items: center; gap: 6px; height: 64px; padding: 0 28px; background: var(--vnx-bar-bg); border-bottom: 1px solid var(--vnx-border); box-sizing: border-box; font-size: var(--vnx-fs-md); line-height: var(--vnx-lh-tight); color: var(--vnx-text); }
.vnx-top a, .vnx-top a:hover, .vnx-top a:focus { text-decoration: none; }
.vnx-top button { font-family: inherit; margin: 0; -webkit-appearance: none; appearance: none; }
.vnx-top :focus-visible { outline: 2px solid var(--vnx-text-muted); outline-offset: 2px; }

.vnx-top-logo { display: flex; align-items: center; flex-shrink: 0; margin-right: 18px; }
.vnx-top-logo img { display: block; height: 26px; width: auto; }
.vnx-top-logo .vnx-top-logo-d { display: none; }
body.darkmode .vnx-top-logo .vnx-top-logo-l { display: none; }
body.darkmode .vnx-top-logo .vnx-top-logo-d { display: block; }

.vnx-top-nav { display: flex; align-items: stretch; align-self: stretch; min-width: 0; }
.vnx-top-ni { position: relative; display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 14px; border: 0; background: none; cursor: pointer; font-size: var(--vnx-fs-md); font-weight: var(--vnx-fw-medium); line-height: 1; color: var(--vnx-text-secondary); white-space: nowrap; }
.vnx-top a.vnx-top-ni { color: var(--vnx-text-secondary); }
.vnx-top a.vnx-top-ni:hover, .vnx-top-ni:hover, .vnx-top-ni[aria-expanded="true"] { color: var(--vnx-text); }
.vnx-top a.vnx-top-ni.is-active, .vnx-top-ni.is-active { color: var(--vnx-text); }
.vnx-top-ni.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--vnx-accent); }
.vnx-top-ni:focus-visible { outline-offset: -2px; }
.vnx-top-car { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; opacity: 0.7; }
[aria-expanded="true"] > .vnx-top-car { transform: rotate(180deg); }

.vnx-top-sp { flex: 1; }
.vnx-top-vsep { width: 1px; height: 22px; margin: 0 6px; background: var(--vnx-border); flex-shrink: 0; }

/* Aufklapp-Behälter: volle Leistenhöhe, damit alle Panels gleich hoch ansetzen */
.vnx-top-dd { position: relative; display: flex; align-items: center; align-self: stretch; flex-shrink: 0; }
.vnx-top-order .vnx-btn { gap: 6px; }
.vnx-top-order .vnx-btn svg.vnx-i { width: 14px; height: 14px; }
.vnx-top-order .vnx-btn .vnx-top-car { opacity: 0.85; }

.vnx-top-ico { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; flex-shrink: 0; color: var(--vnx-text-secondary); }
.vnx-top a.vnx-top-ico { color: var(--vnx-text-secondary); }
.vnx-top .vnx-top-ico:hover, .vnx-top .vnx-top-ico[aria-expanded="true"] { background: var(--vnx-bg-hover); color: var(--vnx-text); }
.vnx-top-dot { position: absolute; top: 8px; right: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--vnx-accent); }
.vnx-top-count { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--vnx-text); color: var(--vnx-bg-solid); font-size: var(--vnx-fs-xs); font-weight: var(--vnx-fw-bold); line-height: 16px; text-align: center; }

/* Mond/Sonne in beiden Umschaltern (Kopfleiste und Handy-Blatt) */
.vnx-top-sun { display: none; }
body.darkmode .vnx-top-moon { display: none; }
body.darkmode .vnx-top-sun { display: block; }

.vnx-top-ava { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 4px; padding: 0; border: 1px solid var(--vnx-border); border-radius: 50%; background: var(--vnx-bg-subtle); cursor: pointer; font-size: var(--vnx-fs-xs); font-weight: var(--vnx-fw-bold); line-height: 1; color: var(--vnx-text); overflow: hidden; white-space: nowrap; }
.vnx-top-ava:hover, .vnx-top-ava[aria-expanded="true"] { border-color: var(--vnx-text-muted); background: var(--vnx-bg-hover); }
.vnx-top-ava.is-active { border-color: var(--vnx-accent); }
.vnx-top .vnx-top-login { margin-left: 4px; }
.vnx-top-login svg.vnx-i { width: 14px; height: 14px; }
.vnx-top-burger { display: none; }
.vnx-top-burger .vnx-top-burger-x { display: none; }
.vnx-top-burger[aria-expanded="true"] .vnx-top-burger-o { display: none; }
.vnx-top-burger[aria-expanded="true"] .vnx-top-burger-x { display: block; }

/* ═══════════════ AUFKLAPP-PANELS ═══════════════ */
.vnx-top-panel { position: absolute; top: calc(100% - 6px); left: 0; z-index: 1010; min-width: 240px; max-width: calc(100vw - 24px); border: 1px solid var(--vnx-border); border-radius: 10px; background: var(--vnx-bg-solid); box-shadow: var(--vnx-pop-shadow); overflow: hidden; font-size: var(--vnx-fs-md); line-height: var(--vnx-lh-tight); text-align: left; color: var(--vnx-text); }
.vnx-top-panel-r { left: auto; right: 0; }
.vnx-top-panel-wide { width: 340px; }
.vnx-top-panel-acc { width: 288px; }
.vnx-top-panel-h { padding: 12px 16px; border-bottom: 1px solid var(--vnx-border-subtle); font-size: var(--vnx-fs-sm); font-weight: var(--vnx-fw-bold); color: var(--vnx-text-muted); }
.vnx-top-g { padding: 6px; border-bottom: 1px solid var(--vnx-border-subtle); }
.vnx-top-g:last-child { border-bottom: 0; }
.vnx-top .vnx-top-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--vnx-text-secondary); white-space: nowrap; }
.vnx-top .vnx-top-item:hover, .vnx-top .vnx-top-item:focus { background: var(--vnx-bg-hover); color: var(--vnx-text); }
.vnx-top-item:focus-visible { outline-offset: -2px; }
.vnx-top-item svg.vnx-i { margin-left: auto; width: 13px; height: 13px; color: var(--vnx-text-faint); }
.vnx-top .vnx-top-alert { align-items: flex-start; white-space: normal; line-height: var(--vnx-lh-base); font-size: var(--vnx-fs-base); }
.vnx-top-alert svg.vnx-i { margin: 2px 0 0; width: 16px; height: 16px; }
.vnx-top-alert.is-danger svg.vnx-i { color: var(--vnx-danger); }
.vnx-top-alert.is-warning svg.vnx-i { color: var(--vnx-warning); }
.vnx-top-alert.is-info svg.vnx-i { color: var(--vnx-info); }
.vnx-top-alert.is-ok svg.vnx-i { color: var(--vnx-accent-text); }
.vnx-top-empty { padding: 18px 10px; text-align: center; font-size: var(--vnx-fs-base); color: var(--vnx-text-muted); }

/* ═══════════════ AVATAR-MENÜ ═══════════════ */
.vnx-acc-h { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--vnx-border-subtle); }
.vnx-acc-av { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--vnx-border); border-radius: 50%; background: var(--vnx-bg-subtle); font-size: var(--vnx-fs-base); font-weight: var(--vnx-fw-bold); color: var(--vnx-text); overflow: hidden; }
.vnx-acc-who { min-width: 0; flex: 1; }
.vnx-acc-who b, .vnx-acc-who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vnx-acc-who b { font-size: var(--vnx-fs-md); font-weight: var(--vnx-fw-bold); line-height: var(--vnx-lh-base); color: var(--vnx-text); }
.vnx-acc-who small { font-size: var(--vnx-fs-sm); line-height: var(--vnx-lh-base); color: var(--vnx-text-muted); }
.vnx-acc-bal { display: flex; align-items: center; gap: 8px; margin: 10px 12px 4px; padding: 9px 12px; border: 1px solid var(--vnx-border-subtle); border-radius: 8px; background: var(--vnx-bg-subtle); font-size: var(--vnx-fs-base); color: var(--vnx-text-muted); }
.vnx-acc-bal b { color: var(--vnx-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vnx-acc-sp { flex: 1; }
.vnx-top .vnx-acc-bal a { color: var(--vnx-accent-text); font-weight: var(--vnx-fw-medium); }
.vnx-top .vnx-acc-bal a:hover { text-decoration: underline; }
.vnx-acc-g { padding: 6px; border-bottom: 1px solid var(--vnx-border-subtle); }
.vnx-acc-g:last-child { border-bottom: 0; }
.vnx-top .vnx-acc-i { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--vnx-text-secondary); }
.vnx-top .vnx-acc-i:hover, .vnx-top .vnx-acc-i:focus { background: var(--vnx-bg-hover); color: var(--vnx-text); }
.vnx-top .vnx-acc-i.is-active { color: var(--vnx-text); font-weight: var(--vnx-fw-medium); }
.vnx-acc-i:focus-visible { outline-offset: -2px; }
.vnx-acc-i svg.vnx-i { color: var(--vnx-text-muted); }

/* ═══════════════ RAHMEN UND FUSS ═══════════════ */
/* body ist im Theme eine Flex-Spalte (min-height 100vh): Rahmen füllt die Höhe, Fuß bleibt unten */
.vnx-frame { display: block; box-sizing: border-box; width: 100%; max-width: 1200px; flex: 1 0 auto; margin: 0 auto; padding: 28px 28px 48px; }
.vnx-frame-note { box-sizing: border-box; width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px 28px 0; }
.vnx-frame-note .vnx-alert { align-items: center; margin-bottom: 0; }
.vnx-verify > svg.vnx-i { width: 18px; height: 18px; }
.vnx-alert-success.vnx-verify > svg.vnx-i { color: var(--vnx-accent-text); }
.vnx-alert-warning.vnx-verify > svg.vnx-i { color: var(--vnx-warning); }
.vnx-alert-danger.vnx-verify > svg.vnx-i { color: var(--vnx-danger); }
.vnx-verify-x { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; color: var(--vnx-text-muted); }
.vnx-verify-x:hover { background: var(--vnx-bg-hover); color: var(--vnx-text); }

.vnx-foot { box-sizing: border-box; width: 100%; flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; max-width: 1200px; margin: 0 auto; padding: 18px 28px 28px; border-top: 1px solid var(--vnx-border); font-size: var(--vnx-fs-sm); line-height: var(--vnx-lh-base); color: var(--vnx-text-muted); }
.vnx-foot-sp { flex: 1; }
.vnx-foot a, .vnx-foot a:focus { color: var(--vnx-text-muted); text-decoration: none; }
.vnx-foot a:hover { color: var(--vnx-text); text-decoration: none; }
.vnx-foot a:focus-visible { outline: 2px solid var(--vnx-text-muted); outline-offset: 2px; }

/* ═══════════════ HANDY-BLATT ═══════════════ */
.vnx-sheet { position: fixed; top: 56px; left: 0; right: 0; bottom: 0; z-index: 999; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--vnx-bar-bg); color: var(--vnx-text); }
/* Schließen-Knopf im Blatt: nur für Screenreader und Tastatur (das X in der Kopfleiste schließt für alle anderen);
   sichtbar nur bei Tastaturfokus, dann oben rechts im Blatt */
.vnx-sheet-top { height: 0; }
.vnx-sheet .vnx-sheet-x { position: absolute; transition: none; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; background: none; cursor: pointer; color: var(--vnx-text-secondary); }
.vnx-sheet .vnx-sheet-x:focus-visible { top: 6px; right: 6px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; overflow: visible; clip: auto; border-radius: 6px; background: var(--vnx-bg-hover); color: var(--vnx-text); outline: 2px solid var(--vnx-text-muted); outline-offset: -2px; }
.vnx-sheet-in { padding: 8px 16px 32px; }
.vnx-sheet-g { padding: 8px 0; border-bottom: 1px solid var(--vnx-border-subtle); }
.vnx-sheet-g:last-child { border-bottom: 0; }
.vnx-sheet-h { padding: 10px 0 4px; font-size: var(--vnx-fs-sm); font-weight: var(--vnx-fw-bold); letter-spacing: var(--vnx-ls-caps); text-transform: uppercase; color: var(--vnx-text-muted); }
.vnx-sheet .vnx-sheet-i { display: flex; align-items: center; gap: 10px; width: calc(100% + 20px); min-height: 44px; margin: 0 -10px; padding: 0 10px; border: 0; border-radius: 6px; background: none; cursor: pointer; font-family: inherit; font-size: var(--vnx-fs-md); line-height: var(--vnx-lh-tight); text-align: left; text-decoration: none; color: var(--vnx-text-secondary); }
/* Hinterlegung nur bei Tastaturfokus bzw. echter Maus – beim Antippen (Fokus nach dem Öffnen) bleibt der Eintrag ruhig */
.vnx-sheet .vnx-sheet-i:focus-visible { background: var(--vnx-bg-hover); color: var(--vnx-text); }
@media (hover: hover) {
    .vnx-sheet .vnx-sheet-i:hover { background: var(--vnx-bg-hover); color: var(--vnx-text); text-decoration: none; }
}
.vnx-sheet .vnx-sheet-i.is-active { color: var(--vnx-text); font-weight: var(--vnx-fw-bold); border-radius: 0 6px 6px 0; box-shadow: inset 3px 0 0 var(--vnx-accent); }
.vnx-sheet-i:focus-visible { outline: 2px solid var(--vnx-text-muted); outline-offset: -2px; }
.vnx-sheet-i > svg.vnx-i { color: var(--vnx-text-faint); }
.vnx-sheet-i > span + svg.vnx-i { margin-left: auto; width: 14px; height: 14px; }
.vnx-sheet-mode-l { display: none; }
body.darkmode .vnx-sheet-mode-d { display: none; }
body.darkmode .vnx-sheet-mode-l { display: inline; }

/* ═══════════════ SCHMALER DESKTOP ═══════════════ */
@media (max-width: 1099px) {
    .vnx-top { padding: 0 20px; }
    .vnx-top-logo { margin-right: 8px; }
    .vnx-top-ni { padding: 0 10px; }
    .vnx-top-ni.is-active::after { left: 10px; right: 10px; }
}
@media (min-width: 900px) {
    .vnx-sheet { display: none !important; }
}

/* ═══════════════ HANDY (unter 900 px) ═══════════════ */
@media (max-width: 899px) {
    .vnx-top { position: sticky; top: 0; height: 56px; padding: 0 12px 0 16px; gap: 0; }
    .vnx-top-nav, .vnx-top-order, .vnx-top-vsep, .vnx-top > .vnx-top-mode { display: none; }
    .vnx-top-logo { margin-right: 8px; min-height: 44px; }
    .vnx-top-logo img { height: 22px; }
    .vnx-top-ico { width: 44px; height: 44px; }
    .vnx-top-burger { display: flex; }
    .vnx-top-dot { top: 12px; right: 13px; }
    .vnx-top-count { top: 6px; right: 4px; }
    /* Avatar: 44 px Trefferfläche, Kreis bleibt 30 px (Rand über box-shadow-freie Hintergrund-Ebene) */
    .vnx-top-ava { width: 44px; height: 44px; margin-left: 0; border: 0; background: none; position: relative; }
    .vnx-top-ava::before { content: ""; position: absolute; top: 7px; left: 7px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--vnx-border); background: var(--vnx-bg-subtle); box-sizing: border-box; z-index: -1; }
    .vnx-top-ava { z-index: 0; }
    .vnx-top-ava:hover, .vnx-top-ava[aria-expanded="true"] { background: none; }
    .vnx-top-ava:hover::before, .vnx-top-ava[aria-expanded="true"]::before { border-color: var(--vnx-text-muted); background: var(--vnx-bg-hover); }
    .vnx-top-ava.is-active::before { border-color: var(--vnx-accent); }
    .vnx-top .vnx-top-login { min-height: 44px; margin: 0 2px 0 4px; }

    .vnx-top-dd { position: static; }
    .vnx-top-panel, .vnx-top-panel-wide, .vnx-top-panel-acc { position: fixed; top: 52px; left: 12px; right: 12px; width: auto; min-width: 0; max-width: none; max-height: calc(100vh - 64px); overflow-y: auto; }
    .vnx-top .vnx-top-item, .vnx-top .vnx-acc-i { min-height: 44px; }
    .vnx-top .vnx-acc-bal a { padding: 13px 0; margin: -13px 0; }

    .vnx-frame { padding: 20px 16px 36px; }
    .vnx-frame-note { padding: 16px 16px 0; }
    .vnx-frame-note .vnx-alert { flex-wrap: wrap; }
    .vnx-verify-x { width: 44px; height: 44px; margin: -10px -10px -10px auto; }
    .vnx-foot { padding: 8px 16px 20px; gap: 0 18px; }
    .vnx-foot a { display: inline-flex; align-items: center; min-height: 44px; }
}


.m-vat{display:block;margin-top:2px;font-size:11px;color:var(--vnx-text-muted)}
.m-tp{margin-top:14px;font-size:14px;color:var(--vnx-text-secondary)}
.m-stars{color:#00b67a;letter-spacing:1px}
.vnx-home .h-hero h1{font-size:52px;letter-spacing:-.8px;max-width:14em}
.h-goal .m-gp{margin-top:auto;padding-top:10px;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--vnx-text)}
.h-goal[aria-pressed="true"] .m-gp{color:var(--h-lime)}
.m-band{background:var(--h-band)}
.m-pp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:48px;align-items:start}
.m-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:x}
.m-flow li{border-top:2px solid var(--h-lime);padding-top:16px}
.m-flow b{font-size:14px;color:var(--h-lime)}.m-flow h3{margin-top:6px;font-size:18px;font-weight:700}.m-flow p{margin-top:6px;font-size:14px;color:var(--vnx-text-secondary)}
.m-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:56px;align-items:center;margin-top:64px}
.m-row.is-r{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr)}.m-row.is-r .m-row-t{order:2}
.m-k{font-size:14px;font-weight:700;color:var(--h-lime)}.m-row h3{margin-top:6px;font-size:28px;line-height:1.2;font-weight:700}.m-row-t>p:last-child{margin-top:12px;font-size:16px;color:var(--vnx-text-secondary)}
.m-v{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--h-line)}
.m-more{margin-top:48px}
.m-who{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.m-who-p{margin-top:14px;font-size:17px;line-height:1.6;color:var(--vnx-text-secondary);max-width:32em}
.m-who-l{margin-top:14px;display:flex;gap:20px;font-size:14px}
.m-tpbig{margin-top:32px;display:flex;align-items:center;gap:16px}.m-tpbig b{font-size:56px;line-height:1}.m-tpbig small{display:block;font-size:13px;color:var(--vnx-text-muted)}
.m-dl{margin:0}.m-dl div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--h-line);font-size:15px}
.m-dl dt{font-weight:400;color:var(--vnx-text-muted)}.m-dl dd{margin:0;text-align:right;font-weight:600}
.m-faqw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px}
.m-faq details{border-bottom:1px solid var(--h-line);padding:16px 0}.m-faq summary{font-weight:600;font-size:16px;cursor:pointer}.m-faq details p{margin-top:8px;font-size:15px;color:var(--vnx-text-secondary)}
@media (max-width:900px){.m-pp,.m-who,.m-faqw,.m-row,.m-row.is-r{grid-template-columns:1fr;gap:24px}.m-row.is-r .m-row-t{order:0}.m-flow{grid-template-columns:1fr}.vnx-home .h-hero h1{font-size:34px}.m-row{margin-top:40px}}


.m-hero{padding:72px 0 56px}
.m-hero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.vnx-home .m-hero h1{font-size:54px;line-height:1.05;letter-spacing:-1px;font-weight:700;text-wrap:balance}
.m-hero-sub{margin-top:18px;font-size:18px;line-height:1.55;color:var(--vnx-text-secondary);max-width:34em}
.m-anchor{margin-top:26px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.m-anchor b{font-size:40px;line-height:1;color:var(--h-lime);font-variant-numeric:tabular-nums}.m-anchor span{color:var(--vnx-text-muted);font-size:15px}
.m-ctas{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}.m-ctas .h-btn{padding:12px 20px;font-size:15px}
.m-term{background:#0d0f0a;border:1px solid var(--h-line);border-radius:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;overflow:hidden}
.m-term-h{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--h-line);color:var(--vnx-text-muted);font-size:12px}.m-term-h i{width:9px;height:9px;border-radius:50%;background:#3a3a3a}.m-term-h span{margin-left:8px}
.m-term ol{list-style:none;margin:0;padding:18px 18px 22px}
.m-term li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;color:#c9cfbf;opacity:0;animation:mIn .35s ease-out forwards;animation-delay:calc(var(--d)*.45s + .3s)}
.m-term li span::before{content:"✓ ";color:var(--h-lime)}.m-term em{font-style:normal;color:#6b7262}
.m-term li.is-ok{margin-top:6px;padding-top:12px;border-top:1px dashed #333;color:var(--h-lime);font-weight:700}
@keyframes mIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.m-term li{animation:none;opacity:1}}
.m-kvms{padding:0 0 72px}
.m-kvm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.m-kvm{padding:26px;display:flex;flex-direction:column}.m-kvm h3{font-size:24px;font-weight:700}.m-kvm-d{margin-top:6px;font-size:14px;color:var(--vnx-text-secondary);min-height:3em}
.m-kvm dl{margin:16px 0 0}.m-kvm dl div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--h-line);font-size:14px}.m-kvm dt{font-weight:400;color:var(--vnx-text-muted)}.m-kvm dd{margin:0;font-weight:600;text-align:right}
.m-kvm-f{margin-top:auto;padding-top:20px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}.m-kvm-f p{margin:0}.m-kvm-f b{font-size:30px;font-variant-numeric:tabular-nums}.m-kvm-f small{color:var(--vnx-text-muted);font-size:12px}
.m-kvm-all{margin-top:16px;font-size:14px;color:var(--vnx-text-muted)}
.m-side{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--h-line)}
.m-side li+li{border-left:1px solid var(--h-line)}.m-side a{display:flex;flex-direction:column;gap:2px;padding:16px 18px;color:var(--vnx-text)!important;text-decoration:none!important}.m-side li:first-child a{padding-left:0}
.m-side a:hover b{color:var(--h-lime)}.m-side span{font-size:13px;color:var(--vnx-text-muted)}.m-side em{font-style:normal;font-weight:700;margin-top:4px}
@media (max-width:900px){.m-hero-in,.m-kvm-grid{grid-template-columns:1fr}.vnx-home .m-hero h1{font-size:34px}.m-side{grid-template-columns:1fr 1fr}.m-side li+li{border-left:0}.m-side li:nth-child(even){border-left:1px solid var(--h-line)}.m-side a{padding-left:16px!important}.m-side li:nth-child(odd) a{padding-left:0!important}.m-hero{padding:40px 0}}


.m-kc{margin-top:56px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:48px;align-items:center}
.m-kc h3{font-size:22px;font-weight:700}.m-kc-l{margin:14px 0 0}.m-kc-l div{padding:12px 0;border-top:1px solid var(--h-line)}.m-kc-l dt{font-weight:700;color:var(--h-lime)}.m-kc-l dd{margin:2px 0 0;font-size:14px;color:var(--vnx-text-secondary)}
.m-kc .m-more{margin-top:20px}
.m-head{max-width:46em}
.m-locs{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.m-loc{padding:28px}.m-loc h3{margin-top:4px;font-size:30px;font-weight:700}.m-loc dl{margin:16px 0 0}.m-loc dl div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--h-line);font-size:14px}.m-loc dt{font-weight:400;color:var(--vnx-text-muted)}.m-loc dd{margin:0;font-weight:600}
.m-offer{margin-top:16px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 0;border-top:1px solid var(--h-line);font-size:15px}
.m-offer-a{display:flex;align-items:center;gap:12px}.m-offer-a span{color:var(--vnx-text-muted);font-size:14px}
.m-prodsec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.m-prodsec .m-anchor b{font-size:34px}
.m-dom{margin-top:28px;max-width:440px}.m-dom label{display:block;font-size:14px;color:var(--vnx-text-muted);margin-bottom:8px}.m-dom div{display:flex;gap:8px}.m-dom input{flex:1;min-width:0;padding:10px 12px;border-radius:6px;border:1px solid var(--h-line);background:var(--h-card);color:var(--vnx-text)}

.m-hero-in{grid-template-columns:1fr!important}.vnx-home .m-hero h1{font-size:64px!important;max-width:15em}.m-hero{padding:80px 0 48px!important}
@media (max-width:900px){.vnx-home .m-hero h1{font-size:36px!important}.m-kc,.m-locs,.m-prodsec{grid-template-columns:1fr;gap:24px}}

.m-anchor b,.h-goal[aria-pressed="true"] .m-gp{color:var(--vnx-text)!important}.m-k,.m-kc-l dt,.m-flow b{color:var(--vnx-text-muted)!important}.m-flow li{border-top-color:var(--h-line)!important}

.m-hero-in2{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);gap:56px;align-items:center}
.m-proof{list-style:none;margin:36px 0 0;padding:0;display:flex;gap:36px;flex-wrap:wrap}
.m-proof li{display:flex;flex-direction:column;gap:2px}.m-proof b{font-size:20px}.m-proof li>span{font-size:13px;color:var(--vnx-text-muted)}
.m-cfg{padding:26px}.m-cfg h2{font-size:18px!important;font-weight:700;margin-bottom:8px}
.m-sl{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 12px;margin:14px 0 0;font-weight:400}
.m-sl span{font-size:14px;color:var(--vnx-text-secondary)}.m-sl output{font-weight:700;font-variant-numeric:tabular-nums}
.m-sl input{grid-column:1/-1;width:100%;accent-color:var(--h-lime)}
.m-cfg-p{margin-top:20px;padding-top:16px;border-top:1px solid var(--h-line);display:flex;align-items:center;gap:14px}
.m-cfg-p b{font-size:36px;font-variant-numeric:tabular-nums;line-height:1}.m-cfg-p span{font-size:12px;line-height:1.45;color:var(--vnx-text-muted)}
.m-cfg-b{width:100%;margin-top:18px;justify-content:center}
.m-kvms{padding:72px 0!important}
.m-kvm-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.m-tog{display:inline-flex;border:1px solid var(--h-line);border-radius:6px;overflow:hidden}.m-tog button{background:none;border:0;padding:7px 14px;font:inherit;font-size:13px;color:var(--vnx-text-muted);cursor:pointer}
.m-tog button[aria-pressed="true"]{background:var(--h-soft);color:var(--vnx-text);font-weight:600}
.m-tog button:focus-visible,.m-sl input:focus-visible{outline:2px solid var(--h-lime);outline-offset:2px}
.m-kvm-f p{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}.m-nosetup{flex-basis:100%;margin-top:2px}
.m-foot{border-top:1px solid var(--h-line);padding:56px 0 40px;background:var(--h-band)}
.m-foot-g{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}.m-foot-g div{display:flex;flex-direction:column;gap:8px}.m-foot-g b{margin-bottom:4px}
.m-foot-g a{color:var(--vnx-text-secondary)!important;font-size:14px}.m-foot-g a.m-must{color:var(--vnx-text)!important;font-weight:600}
.m-foot-n{margin-top:36px;font-size:13px;color:var(--vnx-text-muted)}
.main-footer{display:none}
@media (max-width:900px){.m-hero-in2{grid-template-columns:1fr}.m-foot-g{grid-template-columns:1fr 1fr}}

:root{--vnx-sec:#d8dde3;--vnx-sec-h:#eef0f3}.vnx-home .h-btn-pri,.vnx-home a.h-btn-pri,.vnx-home a.h-btn-pri:hover{background:#a3d133!important;border-color:#a3d133!important;color:#000!important}.vnx-home .h-btn-pri:hover{background:#b4dd55!important;border-color:#b4dd55!important}.vnx-home .h-btn-sec,.vnx-home a.h-btn-sec,.vnx-home a.h-btn-sec:hover{background:var(--vnx-sec)!important;border-color:var(--vnx-sec)!important;color:#000!important}.vnx-home .h-btn-sec:hover{background:var(--vnx-sec-h)!important;border-color:var(--vnx-sec-h)!important}.vnx-home p a:not(.h-btn),.vnx-home dd a,.vnx-home li span a,.vnx-home .m-note a,.vnx-home .m-crumb a:hover{color:var(--vnx-sec)!important;text-decoration:underline!important;text-underline-offset:3px}.vnx-home .m-k{color:var(--vnx-sec)!important}.vnx-top .vnx-btn-primary{background:#a3d133!important;border-color:#a3d133!important;color:#000!important}.vnx-top .vnx-top-login{color:var(--vnx-sec)!important;border-color:var(--vnx-sec)!important}

:root{--vnx-page-bg:#f5f6f8;--vnx-bar-bg:#fff;--vnx-pop-shadow:0 4px 12px rgba(0,0,0,.08)}
body.darkmode{--vnx-page-bg:#1e1e1e;--vnx-bar-bg:#161616;--vnx-pop-shadow:none}
.vnx-top{max-width:none} .vnx-top-in{}
@media (min-width:1200px){.vnx-top{padding:0 max(28px,calc((100% - 1200px)/2 + 28px))}}


/* Footer-Überschriften lesbar */
.m-foot b{color:var(--vnx-text)!important}
/* Aktiver Menüpunkt grau statt grün, Kopfleiste: Anmelden als einziger Lime-Knopf */
.vnx-top-ni.is-active::after{background:var(--vnx-text)!important}
.vnx-top .vnx-top-login{background:#a3d133!important;border-color:#a3d133!important;color:#000!important}
/* Fokus: dunkel Lime, hell fast schwarz (3:1) */
.h-body :focus-visible,.vnx-top :focus-visible{outline:2px solid #a3d133!important;outline-offset:2px}
html:not(.lagom-dark-mode) .h-body :focus-visible,html:not(.lagom-dark-mode) .vnx-top :focus-visible{outline-color:#1f2328!important}
/* Links in Kleingedrucktem, auch dunkel */
.vnx-home small a{color:var(--vnx-sec)!important;text-decoration:underline!important;text-underline-offset:3px}
html:not(.lagom-dark-mode) .vnx-home small a{color:#1f2328!important}
/* Zweitknöpfe im Hellmodus mit deutlicherem Rand */
html:not(.lagom-dark-mode) .vnx-home .h-btn-sec{border-color:#b9c0c7!important}
/* Kartenfuß: Knopf immer unter dem Preis */
.m-kvm-f{flex-direction:column;align-items:flex-start!important}
/* Preise nie umbrechen */
.m-tab td b,.m-kvm-f b,.m-anchor b,.m-cfg-p b{white-space:nowrap}
/* Schmale Abschnitte statt leerer rechter Hälfte */
.m-narrow{max-width:760px}
/* Regler: 24-px-Griff, ruhige Spur, in beiden Modi */
.m-sl input[type=range]{-webkit-appearance:none;appearance:none;height:24px;background:transparent;margin:6px 0 0;cursor:pointer}
.m-sl input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,#a3d133 var(--p,0%),var(--h-line) var(--p,0%))}
.m-sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:#a3d133;border:3px solid var(--h-card)}
.m-sl input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--h-line)}
.m-sl input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:#a3d133}
.m-sl input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#a3d133;border:3px solid var(--h-card)}
.m-steps-b{display:flex;flex-wrap:wrap;gap:6px;grid-column:1/-1;margin-top:6px}
.m-steps-b button{min-width:44px;height:44px;padding:0 10px;white-space:nowrap;border:1px solid var(--h-line);border-radius:6px;background:transparent;color:var(--vnx-text);font:inherit;cursor:pointer}
/* Videos: Ausschnitt ohne App-Fuß, Pause-Knopf */
.m-vw{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--h-line)}
.m-vw .m-v{border:0;border-radius:0;width:100%;height:auto;display:block;margin-bottom:-6%}
.m-vp{position:absolute;right:10px;bottom:10px;padding:6px 12px;border-radius:6px;border:0;background:rgba(0,0,0,.72);color:#fff;font:inherit;font-size:13px;cursor:pointer}
/* Funktionen: festes Raster, Text links, Video rechts */
.m-row,.m-row.is-r{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr)!important}
.m-row.is-r .m-row-t{order:0!important}
.m-row h3{font-size:22px!important}
/* RAM-Richtwerte */
.m-rich{margin-top:14px;font-size:13px;color:var(--vnx-text-muted)}
/* Tabellen auf dem Handy als Blöcke */
@media (max-width:640px){
 .m-tw{border:0;overflow:visible}
 .m-tab thead{display:none}
 .m-tab,.m-tab tbody,.m-tab tr,.m-tab td{display:block;width:100%}
 .m-tab tr{border:1px solid var(--h-line);border-radius:8px;margin-bottom:10px;padding:12px 14px}
 .m-tab td{border:0!important;padding:3px 0!important;text-align:left!important;display:flex;justify-content:space-between;gap:12px}
 .m-tab td[data-l]::before{content:attr(data-l);color:var(--vnx-text-muted);font-weight:400}
 .m-tab td:first-child{font-size:17px}
 .m-tab td.r .h-btn{width:100%;justify-content:center;margin-top:8px}
 .m-cmp tr{padding:10px 14px}.m-cmp td:first-child{font-weight:700!important;color:var(--vnx-text)!important}
 .m-row,.m-row.is-r{grid-template-columns:1fr!important}
}
@media (prefers-reduced-motion:reduce){.m-vw .m-vp{display:none}}


.m-apps{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.m-apps li{display:flex;flex-direction:column;gap:2px;padding:14px;border:1px solid var(--h-line);border-radius:8px}
.m-apps img{width:32px;height:32px;margin-bottom:8px}
.m-apps b{font-size:14px}.m-apps span{font-size:12px;color:var(--vnx-text-muted)}
@media (max-width:900px){.m-apps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.m-apps{grid-template-columns:repeat(2,minmax(0,1fr))}}


.m-phero{padding:56px 0 48px!important;border-bottom:1px solid var(--h-line)}
.m-crumb{font-size:13px;color:var(--vnx-text-muted);margin-bottom:14px}.m-crumb a{color:var(--vnx-text-muted)!important}
.vnx-home .m-phero h1{font-size:48px;line-height:1.08;letter-spacing:-.8px;font-weight:700}
.m-jump{margin-top:28px;display:flex;gap:8px;flex-wrap:wrap}.m-jump a{padding:8px 14px;border:1px solid var(--h-line);border-radius:6px;font-size:14px;color:var(--vnx-text)!important;text-decoration:none!important}.m-jump a:hover{border-color:var(--vnx-text-muted)}
.m-tw{margin-top:24px;overflow-x:auto;border:1px solid var(--h-line);border-radius:8px}
.m-tab{width:100%;border-collapse:collapse;font-size:15px}.m-tab th{font-size:13px;font-weight:500;color:var(--vnx-text-muted);text-align:left;padding:12px 18px;border-bottom:1px solid var(--h-line);background:var(--h-band)}
.m-tab td{padding:14px 18px;border-bottom:1px solid var(--h-line);font-variant-numeric:tabular-nums}.m-tab tr:last-child td{border-bottom:0}.m-tab .r{text-align:right}.m-tab td b{font-size:17px}
.m-tab td:first-child{font-weight:700}.m-tab .h-btn-sm{padding:6px 14px}
.m-note{margin-top:12px;font-size:13px;color:var(--vnx-text-muted)}
.m-cmp th:not(:first-child),.m-cmp td:not(:first-child){text-align:left}.m-cmp td:first-child{font-weight:400;color:var(--vnx-text-muted)}.m-cmp thead th{font-size:16px;font-weight:700;color:var(--vnx-text)}
.m-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);gap:56px;align-items:start}
.m-shots{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.m-shots img{width:100%;height:auto;border-radius:8px;border:1px solid var(--h-line);display:block}
.m-shots figcaption{margin-top:8px;font-size:13px;color:var(--vnx-text-muted)}
.m-pk{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.m-ph{font-size:13px;color:#e2c440}
@media (max-width:900px){.m-split,.m-pk,.m-shots{grid-template-columns:1fr}.vnx-home .m-phero h1{font-size:34px}}

/* Hellmodus: Sekundärfarbe auf hellem Grund lesbar halten (Links fast schwarz, Labels grau, Zweitknöpfe mit Rand) */
html:not(.lagom-dark-mode) .vnx-home .h-btn-sec,html:not(.lagom-dark-mode) .vnx-home a.h-btn-sec{background:#e9ecef!important;border-color:#b9c0c7!important;color:#000!important}
html:not(.lagom-dark-mode) .vnx-home .h-btn-sec:hover{background:#dfe3e7!important}
html:not(.lagom-dark-mode) .vnx-home p a:not(.h-btn),html:not(.lagom-dark-mode) .vnx-home dd a,html:not(.lagom-dark-mode) .vnx-home li span a,html:not(.lagom-dark-mode) .vnx-home .m-note a,html:not(.lagom-dark-mode) .vnx-home .m-crumb a{color:#1f2328!important}
html:not(.lagom-dark-mode) .vnx-home .m-k{color:#5b636b!important}
/* Seiten mit Kopfleiste C: Lagom-Fuß aus (eigener Fuß .m-foot) */
body.vnx-kopf-c .main-footer{display:none}

/* ===== CI-Akzent Variante A (Entscheidung Tim 07.11.2026): Grün #a3d133 nach fester Liste =====
   1 Hauptaktion · 2 aktiver Menüpunkt · 3 Icons/Marken in Merkmal-Listen · 4 Fokus · 5 Badges · 6 Akzentlinie an Karten.
   Nie weiße Schrift auf Grün; Grün als Textfarbe nur im Dunkelmodus. */
.vnx-top .vnx-top-ni.is-active::after{background:#a3d133!important;height:3px}
html.lagom-dark-mode .vnx-top .vnx-top-ni.is-active{color:#a3d133!important}
/* 3: Merkmal-Listen und Feature-Blöcke */
.vnx-home .m-kc-l dt,.vnx-home .m-row h3{position:relative;padding-left:16px}
.vnx-home .m-kc-l dt::before,.vnx-home .m-row h3::before{content:"";position:absolute;left:0;top:.45em;width:8px;height:8px;border-radius:2px;background:#a3d133}
html.lagom-dark-mode .vnx-home .m-kc-l dt,html.lagom-dark-mode .vnx-home .m-k{color:#a3d133!important}
.vnx-home .m-flow li{border-top-color:#a3d133!important}
.vnx-home .m-flow b{display:inline-grid!important;place-items:center;width:26px;height:26px;border-radius:50%;background:#a3d133;color:#000!important;font-size:13px}
html.lagom-dark-mode .vnx-home .m-dl dt::before{content:none}
/* 5: Badges */
.vnx-home .h-tag,.vnx-home .m-badge{background:#a3d133!important;color:#000!important}
/* 6: Akzentlinie an der Kartenoberkante */
.vnx-home .m-kvm,.vnx-home .m-cfg,.vnx-home .m-loc,.vnx-home .m-pk>article{box-shadow:inset 0 3px 0 #a3d133}

/* Handy-Blatt: Gruppenüberschrift als Link (KVM-Server) sieht aus wie die übrigen Überschriften */
.vnx-sheet a.vnx-sheet-h-link{display:block;color:inherit;text-decoration:none}
.vnx-sheet a.vnx-sheet-h-link:hover{text-decoration:underline}

/* Startseite: „Server mieten ohne Abo“ ab Desktop in einer Zeile (Tim 07.11.2026). Bei 48 px braucht die Zeile
   knapp 500 px, die linke Hero-Spalte ist ab 1100 px rund 590 px breit. Darunter bricht sie wie bisher um.
   Nur .vnx-start: Andere Seiten mit .vnx-home und .m-hero-in2 (Reseller) haben längere Überschriften. */
@media (min-width:1100px){.vnx-start .m-hero-in2 h1{font-size:48px!important;max-width:none;white-space:nowrap;text-wrap:nowrap}}

/* Startseite „In jedem KVM-Server enthalten“: Das Video füllt ab zwei Spalten die volle Höhe neben der Liste
   (Tim 07.11.2026). Die Liste bestimmt die Höhe, das Video liegt absolut im Rahmen und wird oben links
   angeschnitten (cover), damit die Bedienelemente der Aufnahme sichtbar bleiben. Einspaltig (≤ 900 px) bleibt
   es in natürlicher Höhe. Ohne JS (Video nicht in .m-vw) streckt sich das Video selbst. */
@media (min-width:901px){
.m-kc{align-items:stretch}
.m-kc>.m-vw{min-height:280px}
.m-kc>.m-vw .m-v{position:absolute;inset:0;width:100%;height:100%;margin:0;object-fit:cover;object-position:top left}
.m-kc>video.m-v{height:100%;object-fit:cover;object-position:top left}
}

/* Startseite „Prepaid heißt: kein Abo“: Überschrift und Lead oben, die drei Schritte darunter über die volle
   Breite (Tim 07.11.2026). Neben dem Text war jede Spalte nur rund 190 px breit, „Verlängern oder auslaufen“
   brach um. Einspaltig (≤ 900 px) bleibt alles untereinander. */
@media (min-width:901px){.m-pp{grid-template-columns:minmax(0,1fr);gap:32px}.m-pp>div:first-child{max-width:720px}}

/* Lagom setzt unter 992 px für seinen eigenen Handy-Kopf body{padding-top:74px!important}. Den Kopf ersetzt
   die Venocix-Kopfleiste (#vnx-top, sticky), das Polster blieb als leerer Streifen stehen (Nachttest B-2).
   body.vnx-kopf-c setzt kopfleiste.tpl direkt nach <body>; :has() greift auch ohne JS. */
@media (max-width:991.98px){
body.vnx-kopf-c{padding-top:0!important}
}
@media (max-width:991.98px){
body:has(#vnx-top){padding-top:0!important}
}

/* Mini-Konfigurator: Schnellwahl zeigt den gewählten Wert an (aria-pressed, gesetzt in vnx-site.js) */
.m-steps-b button[aria-pressed="true"]{border-color:var(--vnx-text);font-weight:700}