/* =====================================================================
 * venocix-portal.css — gemeinsame Design-Ebene fuer das Kundenportal.
 *
 * Portiert das `vps-*`-Designsystem aus
 *   modules/servers/hosterapi/templates/venocix/includes.tpl
 * als markenneutrale Token (`--vnx-*`) + `vnx-*`-Komponenten in das
 * Lagom-Theme. Dadurch sehen Portalseiten und VPS-Verwaltung identisch aus.
 *
 * Grundsaetze:
 *  - Komponenten sind auf `.vnx` gescoped (wie `.vps`) -> keine Kollision
 *    mit Bootstrap/Lagom/DataTables/Swiper.
 *  - Token liegen global auf :root und werden unter body.darkmode ueber-
 *    schrieben (Portal laeuft faktisch immer im Darkmode).
 *  - Keine Abhaengigkeit von Modul-Dateien; selbstenthaltend.
 *  - Werte 1:1 aus includes.tpl (Markenfarbe #a3d133).
 *  - Ruhige Optik (Vorgabe 2026-10-26): einfarbige Flaechen, keine Verlaeufe,
 *    keine farbigen/Leucht-Schatten, keine Deko-Animationen; Statusfarben matt;
 *    Text-Farben auf WCAG AA (>= 4.5:1) abgestimmt.
 * ===================================================================== */

/* ═══════════════ TOKENS ═══════════════ */
:root {
    --vnx-bg: #ffffff;
    --vnx-bg-subtle: #f5f6f8;
    --vnx-bg-hover: #eef0f2;
    --vnx-bg-input: #f5f6f8;
    --vnx-border: #e2e5ea;
    --vnx-border-subtle: #eff0f2;
    --vnx-text: #2d3436;
    --vnx-text-secondary: #555d65;
    --vnx-text-muted: #6b7178;
    --vnx-text-faint: #8d9298;
    --vnx-shimmer-a: rgba(0,0,0,0.04);
    --vnx-shimmer-b: rgba(0,0,0,0.08);
    --vnx-spinner-track: #e2e5ea;
    --vnx-accent: #a3d133;
    --vnx-accent-text: #4f7a10;
    --vnx-accent-dark: #4f7a10;
    --vnx-danger: #c0392b;
    --vnx-danger-dark: #a93226;
    --vnx-warning: #b35c00;
    --vnx-info: #1f6fb2;
    --vnx-primary: #4f7a10;
    --vnx-primary-hover: #456b0e;
    --vnx-shadow: 0 1px 2px rgba(0,0,0,0.06);
    --vnx-bg-solid: #ffffff;
    --vnx-font: 'Roboto', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --vnx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* Typografie-Skala, identisch mit --vps-* in includes.tpl (VPS-Verwaltung):
       6 Größen, 3 Gewichte, 2 Zeilenhöhen, 1 Sperrung. */
    --vnx-fs-xs: 11px;    /* Mikro: Badges in Kacheln, Achsen */
    --vnx-fs-sm: 12px;    /* Hilfetext, Meta, Overline, Badge, kleine Knöpfe */
    --vnx-fs-base: 13px;  /* UI-Text: Knöpfe, Labels, Tabellen, Listen */
    --vnx-fs-md: 14px;    /* Fließtext, Werte, Eingaben, Kartenüberschrift */
    --vnx-fs-lg: 17px;    /* Seiten-, Hero- und Dialogtitel */
    --vnx-fs-xl: 22px;    /* Kennzahlen */
    --vnx-fw-regular: 400;
    --vnx-fw-medium: 500;
    --vnx-fw-bold: 700;
    --vnx-lh-tight: 1.25; /* Titel, Kennzahlen, Knöpfe, Badges */
    --vnx-lh-base: 1.5;   /* alles andere */
    --vnx-ls-caps: 0.4px; /* Großbuchstaben */
}
body.darkmode {
    --vnx-bg: rgba(255,255,255,0.03);
    --vnx-bg-subtle: rgba(255,255,255,0.04);
    --vnx-bg-hover: rgba(255,255,255,0.08);
    --vnx-bg-input: rgba(255,255,255,0.06);
    --vnx-border: rgba(255,255,255,0.08);
    --vnx-border-subtle: rgba(255,255,255,0.04);
    --vnx-text: #eee;
    --vnx-text-secondary: #ccc;
    --vnx-text-muted: #999;
    --vnx-text-faint: #888;
    --vnx-shimmer-a: rgba(255,255,255,0.04);
    --vnx-shimmer-b: rgba(255,255,255,0.08);
    --vnx-spinner-track: rgba(255,255,255,0.08);
    --vnx-accent-text: #a3d133;
    --vnx-accent-dark: #8cb82b;
    --vnx-danger: #f07467;
    --vnx-danger-dark: #e74c3c;
    --vnx-warning: #f0a050;
    --vnx-info: #6cb4ec;
    --vnx-primary: #557f12;
    --vnx-primary-hover: #4a7310;
    --vnx-shadow: none;
    --vnx-bg-solid: #1f2226;
}

/* ═══════════════ SCOPE ═══════════════ */
.vnx { font-family: var(--vnx-font); color: var(--vnx-text); font-size: var(--vnx-fs-md); line-height: var(--vnx-lh-base); }
.vnx *, .vnx *::before, .vnx *::after { box-sizing: border-box; }

/* ═══════════════ GRID ═══════════════ */
.vnx-grid-2, .vnx-grid-3, .vnx-grid-4 { display:grid; gap:16px; margin-bottom:16px; }
.vnx-grid-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.vnx-grid-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.vnx-grid-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }

/* ═══════════════ CARDS ═══════════════ */
.vnx-card { background:var(--vnx-bg); border:1px solid var(--vnx-border); border-radius:10px; overflow:hidden; margin-bottom:16px; min-width:0; }
.vnx-grid-2 > .vnx-card, .vnx-grid-3 > .vnx-card, .vnx-grid-4 > .vnx-card { margin-bottom:0; }
.vnx-card-header > .vnx-card-tools, .vnx-card-header > span:last-child:not(:first-child) { margin-left:auto; }
.vnx-card-header { display:flex; align-items:center; justify-content:flex-start; gap:10px; flex-wrap:wrap; padding:14px 20px; font-weight:var(--vnx-fw-bold); font-size:var(--vnx-fs-md); color:var(--vnx-text-secondary); text-transform:uppercase; letter-spacing:var(--vnx-ls-caps); border-bottom:1px solid var(--vnx-border-subtle); line-height:var(--vnx-lh-tight); }
.vnx-card-header > span > i, .vnx-card-header > i { color:var(--vnx-text-muted); margin-right:8px; }
.vnx-card-tools { display:flex; align-items:center; gap:6px; text-transform:none; letter-spacing:0; font-weight:var(--vnx-fw-medium); }
.vnx-card-body { padding:4px 0; }
.vnx-card-body.vnx-padded { padding:16px 20px; }

/* ═══════════════ ROWS ═══════════════ */
.vnx-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; border-bottom:1px solid var(--vnx-border-subtle); }
.vnx-row:last-child { border-bottom:none; }
.vnx-label { color:var(--vnx-text-muted); font-size:var(--vnx-fs-base); flex-shrink:0; min-width:120px; }
.vnx-label i { margin-right:6px; color:var(--vnx-text-faint); width:14px; text-align:center; }
.vnx-value { color:var(--vnx-text); font-weight:var(--vnx-fw-medium); font-size:var(--vnx-fs-md); text-align:right; min-width:0; overflow-wrap:anywhere; }
.vnx-mono { font-family:var(--vnx-mono); font-size:var(--vnx-fs-sm); }
.vnx-muted { color:var(--vnx-text-muted); }

/* ═══════════════ SKELETON / SPINNER ═══════════════ */
.vnx-shimmer { display:inline-block; min-width:120px; height:18px; background:var(--vnx-shimmer-b); border-radius:4px; }
.vnx-spinner { display:inline-block; width:32px; height:32px; border:3px solid var(--vnx-spinner-track); border-top-color:var(--vnx-accent); border-radius:50%; animation:vnx-spin 0.9s linear infinite; }
.vnx-spinner-sm { width:16px; height:16px; border-width:2px; vertical-align:middle; }
.vnx-spinner-lg { width:80px; height:80px; }
@keyframes vnx-spin { to { transform:rotate(360deg); } }
@keyframes vnx-fadeIn { from { opacity:0; } to { opacity:1; } }

/* ═══════════════ STATES ═══════════════ */
.vnx-error { padding:28px 20px; text-align:center; color:var(--vnx-danger); }
.vnx-empty { padding:40px 20px; text-align:center; color:var(--vnx-text-muted); }
.vnx-empty i, .vnx-error i { margin-right:6px; }
.vnx-empty-icon { font-size:40px; color:var(--vnx-text-faint); margin-bottom:14px; }
.vnx-empty h3 { color:var(--vnx-text); margin:0 0 8px; font-size:var(--vnx-fs-md); font-weight:var(--vnx-fw-bold); line-height:var(--vnx-lh-tight); }
.vnx-empty p { max-width:460px; margin:0 auto 20px; }

/* ═══════════════ BUTTONS ═══════════════ */
.vnx-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 16px; border-radius:8px; border:1px solid var(--vnx-border); background:var(--vnx-bg-subtle); color:var(--vnx-text-secondary); font-size:var(--vnx-fs-base); font-weight:var(--vnx-fw-medium); line-height:var(--vnx-lh-tight); cursor:pointer; text-decoration:none; transition:background-color 0.15s, border-color 0.15s, color 0.15s; white-space:nowrap; }
.vnx-btn:hover, .vnx-btn:focus { background:var(--vnx-bg-hover); color:var(--vnx-text); text-decoration:none; }
.vnx-btn:focus-visible { outline:2px solid var(--vnx-accent); outline-offset:2px; }
.vnx-btn:disabled, .vnx-btn.disabled { opacity:0.55; cursor:not-allowed; }
.vnx-btn-primary { background:var(--vnx-primary); border-color:var(--vnx-primary); color:#fff; }
.vnx-btn-primary:hover, .vnx-btn-primary:focus { background:var(--vnx-primary-hover); border-color:var(--vnx-primary-hover); color:#fff; }
.vnx-btn-danger { background:rgba(231,76,60,0.08); border-color:rgba(231,76,60,0.3); color:var(--vnx-danger); }
.vnx-btn-danger:hover { background:rgba(231,76,60,0.14); color:var(--vnx-danger); }
.vnx-btn-warning { background:rgba(230,126,34,0.08); border-color:rgba(230,126,34,0.3); color:var(--vnx-warning); }
.vnx-btn-warning:hover { background:rgba(230,126,34,0.14); color:var(--vnx-warning); }
.vnx-btn-block { display:flex; width:100%; }
.vnx-btn-sm { padding:5px 10px; font-size:var(--vnx-fs-sm); border-radius:6px; }
.vnx-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0; border-radius:6px; border:1px solid var(--vnx-border); background:var(--vnx-bg-input); color:var(--vnx-text-muted); cursor:pointer; transition:background-color 0.15s, color 0.15s; font-size:13px; text-decoration:none; }
.vnx-icon-btn:hover, .vnx-icon-btn:focus { background:var(--vnx-bg-hover); color:var(--vnx-text); }
.vnx-back-link { display:inline-flex; align-items:center; gap:6px; margin-bottom:14px; font-size:var(--vnx-fs-base); font-weight:var(--vnx-fw-medium); color:var(--vnx-text-muted); text-decoration:none; }
.vnx-back-link:hover { color:var(--vnx-accent-text); text-decoration:none; }

/* ═══════════════ BADGES / DOTS ═══════════════ */
.vnx-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:var(--vnx-fs-sm); font-weight:var(--vnx-fw-medium); background:var(--vnx-bg-subtle); border:1px solid var(--vnx-border); color:var(--vnx-text-secondary); white-space:nowrap; line-height:var(--vnx-lh-tight); }
.vnx-badge-success { background:rgba(163,209,51,0.07); border-color:rgba(163,209,51,0.22); color:var(--vnx-accent-text); }
.vnx-badge-warning { background:rgba(230,126,34,0.07); border-color:rgba(230,126,34,0.22); color:var(--vnx-warning); }
.vnx-badge-danger  { background:rgba(231,76,60,0.07); border-color:rgba(231,76,60,0.22); color:var(--vnx-danger); }
.vnx-badge-info    { background:rgba(52,152,219,0.07); border-color:rgba(52,152,219,0.22); color:var(--vnx-info); }
.vnx-badge-muted   { color:var(--vnx-text-muted); }
.vnx-dot { width:8px; height:8px; border-radius:50%; background:#9aa0a6; flex-shrink:0; display:inline-block; }
.vnx-dot-online  { background:#7fae1f; }
.vnx-dot-offline { background:#a93226; }
.vnx-dot-warning { background:#d9731b; }
.vnx-dot-error   { background:#d64535; }
.vnx-dot-loading { background:#9aa0a6; }

/* ═══════════════ TABLE ═══════════════ */
.vnx-table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.vnx-table { width:100%; border-collapse:collapse; font-size:var(--vnx-fs-base); }
.vnx-table th { text-align:left; padding:10px 20px; font-size:var(--vnx-fs-sm); font-weight:var(--vnx-fw-bold); text-transform:uppercase; letter-spacing:var(--vnx-ls-caps); color:var(--vnx-text-muted); border-bottom:1px solid var(--vnx-border); white-space:nowrap; line-height:var(--vnx-lh-tight); }
.vnx-table td { padding:11px 20px; color:var(--vnx-text); border-bottom:1px solid var(--vnx-border-subtle); vertical-align:middle; }
.vnx-table tr:last-child td { border-bottom:none; }
.vnx-table tr:hover td { background:var(--vnx-bg-subtle); }
.vnx-table .vnx-actions-cell { text-align:right; white-space:nowrap; }

/* ═══════════════ FORMS ═══════════════ */
.vnx-form-row { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.vnx-form-row label { font-size:var(--vnx-fs-sm); font-weight:var(--vnx-fw-bold); color:var(--vnx-text-muted); text-transform:uppercase; letter-spacing:var(--vnx-ls-caps); margin:0; line-height:var(--vnx-lh-tight); }
.vnx-input, .vnx-select { width:100%; background:var(--vnx-bg-input); border:1px solid var(--vnx-border); color:var(--vnx-text); padding:8px 12px; border-radius:7px; font-size:var(--vnx-fs-md); outline:none; transition:border-color 0.15s, box-shadow 0.15s; line-height:var(--vnx-lh-base); }
.vnx-input:focus, .vnx-select:focus { border-color:var(--vnx-accent); box-shadow:0 0 0 2px rgba(163,209,51,0.18); }
.vnx-input-icon { position:relative; }
.vnx-input-icon > i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--vnx-text-faint); font-size:13px; pointer-events:none; }
.vnx-input-icon > .vnx-input { padding-left:34px; }

/* ═══════════════ ALERTS ═══════════════ */
.vnx-alert { display:flex; gap:10px; align-items:flex-start; padding:14px 18px; border-radius:10px; border:1px solid var(--vnx-border); background:var(--vnx-bg-subtle); color:var(--vnx-text); font-size:var(--vnx-fs-md); margin-bottom:16px; }
.vnx-alert > i { margin-top:3px; font-size:16px; }
.vnx-alert-danger  { background:rgba(231,76,60,0.1); border-color:rgba(231,76,60,0.3); }
.vnx-alert-danger > i { color:var(--vnx-danger); }
.vnx-alert-info    { background:rgba(52,152,219,0.08); border-color:rgba(52,152,219,0.28); }
.vnx-alert-info > i { color:var(--vnx-info); }
.vnx-alert-warning { background:rgba(230,126,34,0.1); border-color:rgba(230,126,34,0.3); }
.vnx-alert-warning > i { color:var(--vnx-warning); }
.vnx-alert-success { background:rgba(163,209,51,0.1); border-color:rgba(163,209,51,0.3); }
.vnx-alert-success > i { color:var(--vnx-accent-text); }
.vnx-alert-body { flex:1; min-width:0; }
.vnx-alert-body strong { display:block; margin-bottom:2px; }
.vnx-alert-actions { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; align-items:center; }
.vnx-hint { display:block; margin-top:4px; color:var(--vnx-text-muted); font-size:var(--vnx-fs-sm); font-weight:var(--vnx-fw-regular); }

/* ═══════════════ PROGRESS ═══════════════ */
.vnx-progress { width:100%; height:6px; background:var(--vnx-spinner-track); border-radius:3px; overflow:hidden; }
.vnx-progress-bar { height:100%; width:0; background:#8cb82b; border-radius:3px; transition:width 0.15s ease; }

/* ═══════════════ STATUS HEADER ═══════════════ */
.vnx-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:16px 20px; background:var(--vnx-bg-subtle); border:1px solid var(--vnx-border); border-radius:10px; margin-bottom:16px; }
.vnx-header-left { display:flex; align-items:center; gap:14px; flex-wrap:wrap; min-width:0; }
.vnx-header-right { display:flex; gap:8px; flex-wrap:wrap; }
.vnx-title { font-weight:var(--vnx-fw-bold); font-size:var(--vnx-fs-lg); color:var(--vnx-text); display:inline-flex; align-items:center; gap:8px; min-width:0; overflow-wrap:anywhere; line-height:var(--vnx-lh-tight); }
.vnx-meta { color:var(--vnx-text-muted); font-size:var(--vnx-fs-base); }
.vnx-meta i { margin-right:4px; }

/* ═══════════════ STATS ═══════════════ */
.vnx-stat { display:block; background:var(--vnx-bg); border:1px solid var(--vnx-border); border-radius:10px; padding:16px; text-align:center; min-width:0; text-decoration:none; color:inherit; transition:border-color 0.15s; }
a.vnx-stat:hover { text-decoration:none; color:inherit; border-color:var(--vnx-text-faint); }
.vnx-stat-icon { font-size:20px; color:var(--vnx-text-muted); margin-bottom:8px; }
.vnx-stat-value { font-size:var(--vnx-fs-xl); font-weight:var(--vnx-fw-bold); color:var(--vnx-text); line-height:var(--vnx-lh-tight); min-height:28px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.vnx-stat-label { font-size:var(--vnx-fs-sm); font-weight:var(--vnx-fw-bold); text-transform:uppercase; letter-spacing:var(--vnx-ls-caps); color:var(--vnx-text-muted); margin-top:4px; line-height:var(--vnx-lh-tight); }
.vnx-stat-sub { font-size:var(--vnx-fs-sm); color:var(--vnx-text-faint); margin-top:2px; }

/* ═══════════════ BILLING ═══════════════ */
.vnx-billing-grid { display:flex; align-items:stretch; flex-wrap:wrap; }
.vnx-billing-item { flex:1 1 140px; display:flex; flex-direction:column; align-items:center; text-align:center; padding:22px 16px 18px; gap:4px; min-width:0; }
.vnx-billing-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:8px; background:var(--vnx-bg-subtle); border:1px solid var(--vnx-border); color:var(--vnx-text-secondary); }
.vnx-billing-label { font-size:var(--vnx-fs-sm); font-weight:var(--vnx-fw-bold); text-transform:uppercase; letter-spacing:var(--vnx-ls-caps); color:var(--vnx-text-muted); line-height:var(--vnx-lh-tight); }
.vnx-billing-value { font-size:var(--vnx-fs-xl); font-weight:var(--vnx-fw-bold); color:var(--vnx-text); line-height:var(--vnx-lh-tight); margin-top:2px; font-variant-numeric:tabular-nums; }

/* ═══════════════ QUICK ACTIONS ═══════════════ */
.vnx-quick-actions { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
.vnx-quick-action { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:18px 12px; border:1px solid var(--vnx-border); border-radius:10px; background:var(--vnx-bg); color:var(--vnx-text-secondary); text-decoration:none; font-size:var(--vnx-fs-base); font-weight:var(--vnx-fw-medium); transition:border-color 0.15s, color 0.15s; }
.vnx-quick-action:hover, .vnx-quick-action:focus { text-decoration:none; color:var(--vnx-text); border-color:var(--vnx-text-faint); }
.vnx-quick-action i { font-size:22px; color:var(--vnx-text-secondary); }

/* ═══════════════ SERVICE CARD (Produktuebersicht/Dashboard) ═══════════════ */
.vnx-service { display:flex; flex-direction:column; gap:14px; padding:18px 20px; }
.vnx-service-top { display:flex; align-items:flex-start; gap:12px; }
.vnx-service-title { font-size:var(--vnx-fs-md); font-weight:var(--vnx-fw-bold); color:var(--vnx-text); display:flex; align-items:center; gap:8px; min-width:0; overflow-wrap:anywhere; line-height:var(--vnx-lh-tight); }
.vnx-service-sub { font-size:var(--vnx-fs-sm); color:var(--vnx-text-muted); margin-top:2px; }
.vnx-service-meta { display:flex; flex-wrap:wrap; gap:6px 18px; }
.vnx-service-meta .vnx-row { flex:1 1 180px; padding:0; border:none; justify-content:flex-start; gap:8px; }
.vnx-service-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:4px; }
.vnx-service-actions .vnx-btn-primary, .vnx-service-actions .vnx-renew-btn { flex:1 1 auto; }
.vnx-service-icon { width:46px; height:46px; flex-shrink:0; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; background:var(--vnx-bg-subtle); border:1px solid var(--vnx-border); color:var(--vnx-text-secondary); }
.vnx-service-card .change_comment { color:var(--vnx-accent-text); border-bottom:1px dashed var(--vnx-border); text-decoration:none; cursor:pointer; }

/* ═══════════════ PAGE HELPERS ═══════════════ */
.vnx-section-title { font-size:var(--vnx-fs-md); font-weight:var(--vnx-fw-bold); text-transform:uppercase; letter-spacing:var(--vnx-ls-caps); color:var(--vnx-text-muted); margin:0 0 12px; display:flex; align-items:center; gap:8px; line-height:var(--vnx-lh-tight); }
.vnx-section-title .vnx-section-link { margin-left:auto; font-size:var(--vnx-fs-sm); font-weight:var(--vnx-fw-medium); text-transform:none; letter-spacing:0; color:var(--vnx-accent-text); text-decoration:none; }
.vnx-section { margin-bottom:28px; }
.vnx-toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.vnx-toolbar .vnx-input-icon { flex:1 1 220px; min-width:0; }
.vnx-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ═══════════════ TOAST ═══════════════ */
.vnx-toast-container { position:fixed; right:16px; bottom:16px; z-index:10050; display:flex; flex-direction:column; gap:8px; max-width:calc(100vw - 32px); }
.vnx-toast { display:flex; align-items:center; gap:10px; min-width:240px; max-width:380px; padding:12px 16px; border-radius:10px; background:#1c1e20; border:1px solid rgba(255,255,255,0.08); color:#eee; font-size:var(--vnx-fs-base); box-shadow:0 1px 2px rgba(0,0,0,0.18); border-left:3px solid #888; animation:vnx-fadeIn 0.15s ease; font-weight:var(--vnx-fw-medium); line-height:var(--vnx-lh-base); }
.vnx-toast i { font-size:16px; }
.vnx-toast-success { border-left-color:#a3d133; } .vnx-toast-success i { color:#a3d133; }
.vnx-toast-error   { border-left-color:#e74c3c; } .vnx-toast-error i { color:#e74c3c; }
.vnx-toast-warning { border-left-color:#e67e22; } .vnx-toast-warning i { color:#e67e22; }
.vnx-toast-info    { border-left-color:#3498db; } .vnx-toast-info i { color:#3498db; }

/* ═══════════════ ONBOARDING-TOUR ═══════════════ */
.vnx-tour-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:10060; animation:vnx-fadeIn 0.15s ease; }
.vnx-tour-spotlight { position:fixed; z-index:10061; border-radius:10px; box-shadow:0 0 0 9999px rgba(0,0,0,0.55); outline:2px solid var(--vnx-accent); outline-offset:0; transition:top 0.15s ease, left 0.15s ease, width 0.15s ease, height 0.15s ease; pointer-events:none; }
.vnx-tour-overlay + .vnx-tour-spotlight { } /* Spotlight schneidet das Overlay via grossem Box-Shadow aus */
.vnx-tour-popover { position:fixed; z-index:10062; width:340px; max-width:calc(100vw - 24px); background:#1c1e20; border:1px solid rgba(255,255,255,0.1); border-radius:10px; box-shadow:0 1px 2px rgba(0,0,0,0.18); padding:18px 20px; color:#eee; font-family:var(--vnx-font); animation:vnx-fadeIn 0.15s ease; }
.vnx-tour-popover.vnx-tour-centered { top:50%; left:50%; transform:translate(-50%,-50%); }
.vnx-tour-progress { font-size:var(--vnx-fs-sm); font-weight:var(--vnx-fw-medium); color:#a0a5ab; margin-bottom:6px; }
.vnx-tour-title { margin:0 0 8px; font-size:var(--vnx-fs-lg); font-weight:var(--vnx-fw-bold); color:#fff; line-height:var(--vnx-lh-tight); }
.vnx-tour-text { font-size:var(--vnx-fs-md); line-height:var(--vnx-lh-base); color:#cfd2d6; margin-bottom:16px; }
.vnx-tour-actions { display:flex; align-items:center; gap:8px; }

/* Spotlight muss ueber dem Overlay klickbar durchlassen: Overlay fuellt NICHT
   den Spotlight-Bereich, da der Spotlight selbst das Overlay per Box-Shadow
   darstellt. Daher Overlay transparent lassen, wenn ein Spotlight aktiv ist. */
.vnx-tour-overlay.vnx-tour-has-spot { background:transparent; }

/* ═══════════════ SEITENKONTEXT (Ersatz für die Seitenleiste) ═══════════════
   includes/seitenkontext.tpl, oberhalb des Seiteninhalts. Die Seitenleiste ist im
   Kundenbereich abgeschaltet (includes/hooks/kundenbereich_layout.php). */

/* Bereichsnavigation: Dienst-/Domain-Verwaltung, Kundenkonto, Neuigkeiten-Archiv */
.vnx-seitennav { display:flex; flex-wrap:wrap; align-items:center; gap:6px 0; padding:6px; margin-bottom:20px; background:var(--vnx-bg-subtle); border:1px solid var(--vnx-border); border-radius:10px; }
.vnx-seitennav-gruppe { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; min-width:0; padding:0 6px; }
.vnx-seitennav-gruppe + .vnx-seitennav-gruppe { margin-left:auto; border-left:1px solid var(--vnx-border); padding-left:12px; }
.vnx-seitennav-titel { font-size:var(--vnx-fs-xs); font-weight:var(--vnx-fw-bold); text-transform:uppercase; letter-spacing:var(--vnx-ls-caps); color:var(--vnx-text-muted); line-height:var(--vnx-lh-tight); white-space:nowrap; padding:0 4px; }
.vnx-seitennav-links { display:flex; flex-wrap:wrap; gap:2px; min-width:0; }
.vnx .vnx-seitennav-link { display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border-radius:7px; font-size:var(--vnx-fs-base); font-weight:var(--vnx-fw-medium); line-height:var(--vnx-lh-tight); color:var(--vnx-text-muted); text-decoration:none; white-space:nowrap; transition:background-color .15s, color .15s; }
.vnx .vnx-seitennav-link:hover, .vnx .vnx-seitennav-link:focus { background:var(--vnx-bg-hover); color:var(--vnx-text); text-decoration:none; }
.vnx .vnx-seitennav-link:focus-visible { outline:2px solid var(--vnx-accent); outline-offset:1px; }
.vnx .vnx-seitennav-link.active { background:var(--vnx-bg-solid); color:var(--vnx-accent-text); box-shadow:var(--vnx-shadow); }
.vnx .vnx-seitennav-link.disabled { opacity:.55; pointer-events:none; }
.vnx-seitennav-link > i { font-size:12px; width:14px; text-align:center; color:inherit; }
.vnx-seitennav-link .status { font-size:inherit; color:inherit; }
.vnx-seitennav-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; padding:1px 6px; border-radius:999px; background:var(--vnx-bg-hover); color:var(--vnx-text-secondary); font-size:var(--vnx-fs-xs); font-weight:var(--vnx-fw-bold); line-height:var(--vnx-lh-tight); }
.vnx-seitennav-text { display:inline-flex; align-items:center; padding:8px 10px; font-size:var(--vnx-fs-base); color:var(--vnx-text-secondary); }
.vnx-seitennav-text strong { color:var(--vnx-text); font-weight:var(--vnx-fw-bold); }

/* Kontextzeile: eine Information + optionale Aktion (Support-PIN, offene Rechnungen) */
.vnx-kontextzeile { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; padding:12px 16px; margin-bottom:20px; background:var(--vnx-bg-subtle); border:1px solid var(--vnx-border); border-radius:10px; font-size:var(--vnx-fs-base); color:var(--vnx-text-secondary); line-height:var(--vnx-lh-base); }
.vnx-kontextzeile-titel { display:inline-flex; align-items:center; gap:8px; font-weight:var(--vnx-fw-medium); color:var(--vnx-text); }
.vnx-kontextzeile-titel > i { color:var(--vnx-text-muted); }
.vnx-kontextzeile-wert { font-size:var(--vnx-fs-md); font-weight:var(--vnx-fw-bold); color:var(--vnx-text); font-variant-numeric:tabular-nums; }
.vnx-kontextzeile-hinweis { color:var(--vnx-text-muted); font-size:var(--vnx-fs-sm); }
.vnx .vnx-kontextzeile-aktion { margin-left:auto; }
.vnx-supportpin-wert, .vnx-supportpin-wert * { display:inline; margin:0; padding:0; font-family:var(--vnx-mono); font-size:var(--vnx-fs-md); font-weight:var(--vnx-fw-bold); color:var(--vnx-text); letter-spacing:1px; line-height:var(--vnx-lh-tight); background:none; border:0; }

/* Kennzahlen-Karte: Guthaben, Affiliate-Provision, Sammelzahlung */
.vnx-kennzahlen { display:flex; flex-wrap:wrap; align-items:stretch; margin-bottom:20px; }
.vnx-kennzahl { flex:1 1 160px; display:flex; flex-direction:column; justify-content:flex-start; gap:4px; min-width:0; padding:16px 20px; border-right:1px solid var(--vnx-border-subtle); }
.vnx-kennzahl:last-of-type { border-right:0; }
.vnx-kennzahl-label { font-size:var(--vnx-fs-sm); font-weight:var(--vnx-fw-bold); text-transform:uppercase; letter-spacing:var(--vnx-ls-caps); color:var(--vnx-text-muted); line-height:var(--vnx-lh-tight); margin:0; }
.vnx-kennzahl-wert { font-size:var(--vnx-fs-md); font-weight:var(--vnx-fw-medium); color:var(--vnx-text); font-variant-numeric:tabular-nums; line-height:var(--vnx-lh-tight); overflow-wrap:anywhere; }
.vnx-kennzahl-wert-gross { font-size:var(--vnx-fs-xl); font-weight:var(--vnx-fw-bold); }
/* Labels oben bündig (gleiche Grundlinie, auch neben der größeren ersten Kennzahl); nur die Aktion sitzt mittig. */
.vnx-kennzahl-aktion { flex:0 0 auto; align-items:flex-end; justify-content:center; }
.vnx-kennzahlen-hinweis { flex:1 1 100%; display:flex; align-items:flex-start; gap:8px; margin:0; padding:12px 20px; border-top:1px solid var(--vnx-border-subtle); font-size:var(--vnx-fs-sm); color:var(--vnx-text-muted); line-height:var(--vnx-lh-base); }
.vnx-kennzahlen-hinweis > i { margin-top:3px; }
.vnx-kennzahlen-hinweis-erfolg > i { color:var(--vnx-accent-text); }
.vnx-masspay { display:flex; flex-wrap:wrap; align-items:stretch; margin-top:20px; }
.vnx-masspay-zahlart { flex:2 1 240px; }
.vnx-masspay-zahlart .form-control { margin:0; }

/* Ticket ansehen: Ticket-Informationen (+ CC-Empfänger im Original-Markup) */
.vnx-ticketkopf { display:grid; grid-template-columns:minmax(0, 1fr); gap:16px; margin-bottom:20px; }
.vnx-ticketkopf-zweispaltig { grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); }
.vnx-ticketkopf > .vnx-card { margin-bottom:0; }
.vnx-ticketinfo-betreff { display:flex; align-items:center; flex-wrap:wrap; gap:6px 16px; padding:14px 20px; border-bottom:1px solid var(--vnx-border-subtle); font-size:var(--vnx-fs-md); font-weight:var(--vnx-fw-bold); color:var(--vnx-text); line-height:var(--vnx-lh-tight); }
.vnx-ticketinfo-betreff .truncate { min-width:0; overflow-wrap:anywhere; }
/* Status-Text in Textfarbe statt Lagoms #7c8088 (3,96:1 hell / 4,48:1 dunkel); Farbe trägt der Punkt. */
.vnx-ticketinfo-betreff .status { font-size:var(--vnx-fs-base); font-weight:var(--vnx-fw-medium); color:var(--vnx-text-secondary); }
.vnx-ticketinfo-felder { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px 20px; padding:14px 20px; }
.vnx-ticketinfo-feld { min-width:0; font-size:var(--vnx-fs-md); font-weight:var(--vnx-fw-medium); color:var(--vnx-text); line-height:var(--vnx-lh-base); }
.vnx-ticketinfo-feld .title { display:block; font-size:var(--vnx-fs-sm); font-weight:var(--vnx-fw-bold); text-transform:uppercase; letter-spacing:var(--vnx-ls-caps); color:var(--vnx-text-muted); line-height:var(--vnx-lh-tight); margin-bottom:4px; }
.vnx-ticketinfo-feld .pull-right { float:none !important; display:block; }
.vnx-ticketinfo-aktionen { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; padding:0 20px 16px; }
.vnx-ticketinfo-aktionen [class*="col-"] { float:none; width:auto; padding:0; }
.vnx-ticketinfo-aktionen .btn-block { display:inline-flex; width:auto; }
/* WHMCS-Knopffarben (#7cab05 mit Weiß: 2,73:1) auf AA-Primärgrün (hell 5,09:1, dunkel 4,74:1). */
.vnx-ticketinfo-aktionen .btn-success { background:var(--vnx-primary); border-color:var(--vnx-primary); color:#fff; }
.vnx-ticketinfo-aktionen .btn-success:hover, .vnx-ticketinfo-aktionen .btn-success:focus { background:var(--vnx-primary-hover); border-color:var(--vnx-primary-hover); color:#fff; }
/* Erledigtes Ticket: Status als Text statt deaktiviertem Knopf „Erledigt“ (dunkel 1,73:1). */
.vnx-ticketinfo-aktionen-erledigt .col-button-right { display:none; }
.vnx-ticketinfo-erledigt { display:inline-flex; align-items:center; gap:6px; margin-right:auto; font-size:var(--vnx-fs-base); font-weight:var(--vnx-fw-medium); color:var(--vnx-text-secondary); line-height:var(--vnx-lh-tight); }
.vnx-ticketinfo-erledigt > i { color:var(--vnx-text-muted); }
.vnx-ticketkopf-cc .panel { margin-bottom:0; }
.vnx-ticketkopf-cc .panel-minimise { display:none; }

/* Hauptnavigation hell: Lagom setzt den aktiven/geöffneten Eintrag auf #a3d133 vor Weiß (1,79:1)
   und den aktiven Dropdown-Eintrag auf #7cab05 vor #ebf4fd (2,46:1). Dunkelmodus bleibt unverändert. */
body:not(.darkmode) .navbar-main .navbar-nav > li.active > a,
body:not(.darkmode) .navbar-main .navbar-nav > li.active > a:focus,
body:not(.darkmode) .navbar-main .navbar-nav > li.active > a:hover,
body:not(.darkmode) .navbar-main .navbar-nav > li.open > a,
body:not(.darkmode) .navbar-main .navbar-nav > li.open > a:focus,
body:not(.darkmode) .navbar-main .navbar-nav > li.open > a:hover,
body:not(.darkmode) .navbar-main .navbar-nav > li > a:focus,
body:not(.darkmode) .navbar-main .navbar-nav > li > a:hover,
body:not(.darkmode) .navbar-main .navbar-nav > li.active > a > b,
body:not(.darkmode) .navbar-main .navbar-nav > li.active > a > i,
body:not(.darkmode) .navbar-main .navbar-nav > li.open > a > b,
body:not(.darkmode) .navbar-main .navbar-nav > li.open > a > i,
body:not(.darkmode) .navbar-main .navbar-nav > li > a:focus > b,
body:not(.darkmode) .navbar-main .navbar-nav > li > a:focus > i,
body:not(.darkmode) .navbar-main .navbar-nav > li > a:hover > b,
body:not(.darkmode) .navbar-main .navbar-nav > li > a:hover > i { color:var(--vnx-accent-text); }
/* .navbar-nav + li: schlägt auch Lagoms Mobil-Regel (Weiß auf #a3d133, 1,79:1). */
body:not(.darkmode) .navbar-main .navbar-nav .dropdown-menu > li.active > a,
body:not(.darkmode) .navbar-main .navbar-nav .dropdown-menu > li.active > a:focus,
body:not(.darkmode) .navbar-main .navbar-nav .dropdown-menu > li.active > a:hover { background-color:var(--vnx-bg-subtle); color:var(--vnx-accent-text); }
body:not(.darkmode) .navbar-main .navbar-nav .dropdown-menu > li.active > a > i { color:var(--vnx-accent-text); }

@media (max-width: 991px) {
    .vnx-ticketkopf-zweispaltig { grid-template-columns:minmax(0, 1fr); }
}
@media (max-width: 767px) {
    /* Bereichsnavigation am Handy: je Gruppe eine waagerecht wischbare Zeile statt 4–5 umbrochener
       Zeilen (gleiches Muster wie die VPS-Tab-Leiste). Keine sichtbare Scrollleiste; ein schmaler
       Ausblender am Rand zeigt, dass weitere Einträge folgen (Klassen setzt das Skript in seitenkontext.tpl). */
    .vnx-seitennav { display:block; }
    .vnx-seitennav-gruppe, .vnx-seitennav-gruppe + .vnx-seitennav-gruppe { position:relative; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-left:0; border-left:0; padding:0 2px; }
    .vnx-seitennav-gruppe::-webkit-scrollbar { display:none; }
    .vnx-seitennav-gruppe + .vnx-seitennav-gruppe { border-top:1px solid var(--vnx-border); margin-top:6px; padding-top:6px; }
    .vnx-seitennav-titel { flex:0 0 auto; padding:0 6px 0 4px; }
    .vnx-seitennav-links { flex-wrap:nowrap; }
    .vnx-seitennav-gruppe.vnx-mehr-rechts { -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent); }
    .vnx-seitennav-gruppe.vnx-mehr-links { -webkit-mask-image:linear-gradient(to right, transparent, #000 28px); mask-image:linear-gradient(to right, transparent, #000 28px); }
    .vnx-seitennav-gruppe.vnx-mehr-links.vnx-mehr-rechts { -webkit-mask-image:linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
    .vnx .vnx-kontextzeile-aktion { margin-left:0; }
    .vnx-kennzahl { flex-basis:100%; border-right:0; border-bottom:1px solid var(--vnx-border-subtle); padding:12px 16px; }
    .vnx-kennzahl-aktion { align-items:stretch; }
    .vnx-kennzahl-aktion .vnx-btn { width:100%; }
    .vnx-kennzahlen-hinweis { padding:12px 16px; }
    .vnx-ticketinfo-betreff, .vnx-ticketinfo-felder { padding-left:16px; padding-right:16px; }
    .vnx-ticketinfo-aktionen { justify-content:stretch; padding:0 16px 16px; }
}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 991px) {
    .vnx-grid-3, .vnx-grid-4 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .vnx-grid-2, .vnx-grid-3 { grid-template-columns:minmax(0, 1fr); }
    .vnx-header { flex-direction:column; align-items:flex-start; }
    .vnx-header-right { width:100%; }
    .vnx-card-header { padding:12px 16px; }
    .vnx-row, .vnx-table th, .vnx-table td { padding-left:16px; padding-right:16px; }
}
@media (prefers-reduced-motion: reduce) {
    .vnx-toast, .vnx-tour-overlay, .vnx-tour-popover { animation:none; }
    .vnx-tour-spotlight, .vnx-progress-bar { transition:none; }
}
@media (max-width: 420px) {
    .vnx-grid-4 { grid-template-columns:minmax(0, 1fr); }
    .vnx-stat-value { font-size:var(--vnx-fs-lg); }
}

/* ═══════════════ WARENKORB (standard_cart) ═══════════════
 * Die Bestellstrecke nutzt WHMCS' standard_cart (templates/orderforms/standard_cart, unverändert).
 * Dessen Flächen sind fest hell (#fff/#f8f8f8/#e8e8e8), im Darkmode erbt der Text aber Weiß
 * (darkmode.css: .darkmode .app-main { color:#fff }) -> Preise, Beschreibungen und Summen waren
 * weiß auf weiß (1:1). Im Darkmode bekommen die Flächen die Ebenen aus darkmode.css
 * (Seite #111, Karte #1E1E1E, Kopf/Eingabe #262626/#2D2D2D, Rand #2D2D2D); Text Weiß bzw.
 * #b5b5b5 (8,1:1 auf #1E1E1E). Knöpfe in beiden Modi auf AA-Primärgrün (#7cab05 mit Weiß: 2,73:1). */
/* „body“ davor: standard_cart/css/all.min.css lädt nach dieser Datei und nutzt dieselben Selektoren. */
body #order-standard_cart .btn-success, body #order-standard_cart .btn-primary,
body #order-standard_cart .panel-addon .panel-add { background-color:var(--vnx-primary); border-color:var(--vnx-primary); color:#fff; }
body #order-standard_cart .btn-success:hover, body #order-standard_cart .btn-success:focus,
body #order-standard_cart .btn-primary:hover, body #order-standard_cart .btn-primary:focus,
body #order-standard_cart .panel-addon .panel-add:hover { background-color:var(--vnx-primary-hover); border-color:var(--vnx-primary-hover); color:#fff; }
body #order-standard_cart .products .product header .qty { color:#6b7178; }
body #order-standard_cart .panel-addon-selected { border-color:var(--vnx-primary); }
body #order-standard_cart .panel-addon-selected .panel-price { background-color:var(--vnx-primary); color:#fff; }
body #order-standard_cart .panel-addon-selected .panel-add { background-color:#f2dede; color:#a94442; }
/* Lagom färbt .order-summary .subtotal weiß und aktive Tabs #7cab05 (2,57:1 auf #f8f8f8). */
body #order-standard_cart .order-summary .subtotal { color:inherit; }
body #order-standard_cart .view-cart-tabs .nav-tabs > li.active > a { color:var(--vnx-accent-text); }

body.darkmode #order-standard_cart { color:#fff; }
body.darkmode #order-standard_cart label,
body.darkmode #order-standard_cart .cc-input-container .existing-cc-grid { color:#d0d0d0; }
body.darkmode #order-standard_cart .field-help-text,
body.darkmode #order-standard_cart .text-muted,
body.darkmode #order-standard_cart .order-summary .recurring-charges { color:#b5b5b5; }

/* Produktliste */
body.darkmode #order-standard_cart .products .product { background:#1e1e1e; border-color:#2d2d2d; color:#e6e6e6; }
body.darkmode #order-standard_cart .products .product header { background:#262626; border-bottom:1px solid #2d2d2d; }
body.darkmode #order-standard_cart .products .product header span { color:#fff; }
body.darkmode #order-standard_cart .products .product header .qty { color:#b5b5b5; }
body.darkmode #order-standard_cart .products .product .product-desc,
body.darkmode #order-standard_cart .products .product .product-desc li { color:#e6e6e6; }
body.darkmode #order-standard_cart .products .product .product-pricing { color:#b5b5b5; }
body.darkmode #order-standard_cart .products .product .product-pricing .price { color:#fff; }
body.darkmode #order-standard_cart .categories-collapsed { background-color:#1e1e1e; }
body.darkmode #order-standard_cart .categories-collapsed select { color:#fff; background-color:#1e1e1e; }

/* Abschnittstrenner, Infozeilen, Formularfelder */
body.darkmode #order-standard_cart .sub-heading { border-top-color:#2d2d2d; }
body.darkmode #order-standard_cart .sub-heading span,
body.darkmode #order-standard_cart .sub-heading-borderless span { color:#e6e6e6; background-color:#111; }
body.darkmode #order-standard_cart .product-info { background-color:#1e1e1e; border-color:#2d2d2d; color:#e6e6e6; }
body.darkmode #order-standard_cart .field { background-color:#2d2d2d; border-color:#3a3a3a; color:#fff; }
body.darkmode #order-standard_cart .field[disabled], body.darkmode #order-standard_cart .field[readonly],
body.darkmode #order-standard_cart .form-control[disabled], body.darkmode #order-standard_cart .form-control[readonly] { background-color:#262626 !important; color:#d0d0d0 !important; }
body.darkmode #order-standard_cart .field-icon i { color:#b5b5b5; }

/* Zusatzleistungen (Konfiguration) */
body.darkmode #order-standard_cart .panel-addon { background-color:#1e1e1e; border-color:#2d2d2d; }
body.darkmode #order-standard_cart .panel-addon .panel-body label { color:#fff; }
body.darkmode #order-standard_cart .panel-addon .panel-price { background-color:#262626; color:#e6e6e6; }
body.darkmode #order-standard_cart .panel-addon-selected { border-color:var(--vnx-primary); }
body.darkmode #order-standard_cart .panel-addon-selected .panel-price { background-color:var(--vnx-primary); color:#fff; }
body.darkmode #order-standard_cart .panel-addon-selected .panel-add { background-color:#3a2220; color:#f07467; }

/* Bestellübersicht (Konfiguration, Warenkorb, Kasse) */
body.darkmode #order-standard_cart .order-summary { background-color:#1e1e1e; border:1px solid #2d2d2d; }
body.darkmode #order-standard_cart .order-summary h2 { color:#fff; background-color:#262626; border-bottom:1px solid #2d2d2d; border-radius:4px 4px 0 0; }
body.darkmode #order-standard_cart .summary-container { background-color:#1e1e1e; color:#e6e6e6; }
body.darkmode #order-standard_cart .order-summary .summary-totals,
body.darkmode #order-standard_cart .order-summary .subtotal,
body.darkmode #order-standard_cart .order-summary .bordered-totals { border-color:#3a3a3a; }
body.darkmode #order-standard_cart .order-summary .loader { color:#b5b5b5; }
body.darkmode #order-standard_cart .order-summary .btn-continue-shopping { color:#e6e6e6; }

/* Warenkorb-Ansicht */
body.darkmode #order-standard_cart .view-cart-items .item { background-color:#1e1e1e; color:#e6e6e6; border-color:#2d2d2d; }
body.darkmode #order-standard_cart .view-cart-items .item:nth-child(even) { background-color:#232323; }
body.darkmode #order-standard_cart .view-cart-items .item-domain { color:#6cb4ec; }
body.darkmode #order-standard_cart .view-cart-empty { color:#e6e6e6; }
body.darkmode #order-standard_cart .btn-remove-from-cart { color:#b5b5b5; }
body.darkmode #order-standard_cart .btn-remove-from-cart:hover { color:#f07467; }
body.darkmode #order-standard_cart .view-cart-tabs .nav-tabs { border-bottom-color:#2d2d2d; }
body.darkmode #order-standard_cart .view-cart-tabs .nav-tabs > li > a { color:#d0d0d0; }
body.darkmode #order-standard_cart .view-cart-tabs .nav-tabs > li.active > a,
body.darkmode #order-standard_cart .view-cart-tabs .nav-tabs > li.active > a:hover,
body.darkmode #order-standard_cart .view-cart-tabs .nav-tabs > li.active > a:focus { background-color:#1e1e1e; color:#fff; border-color:#2d2d2d #2d2d2d transparent; }
body.darkmode #order-standard_cart .view-cart-tabs .tab-content { background-color:#1e1e1e; color:#e6e6e6; }
body.darkmode #order-standard_cart .view-cart-tabs .tab-content .btn:not(.btn-primary):not(.btn-success) { background-color:#2d2d2d; border-color:#3a3a3a; color:#fff; }
body.darkmode #order-standard_cart .view-cart-promotion-code { background-color:#1e1e1e; border-color:#3a3a3a; color:#e6e6e6; }
body.darkmode #order-standard_cart .view-cart-gateway-checkout { background-color:#1e1e1e; color:#e6e6e6; }

/* Kasse: Guthaben, Kreditkarte */
body.darkmode #order-standard_cart .apply-credit-container { background-color:#1e1e1e; color:#e6e6e6; }
body.darkmode #order-standard_cart .cc-input-container { background-color:#1e1e1e; border-color:#2d2d2d; color:#e6e6e6; }

/* Domains: Auswahl, Transfer, Prüfung */
body.darkmode #order-standard_cart .domain-selection-options .option { background-color:#1e1e1e; color:#e6e6e6; }
body.darkmode #order-standard_cart .domain-selection-options .option-selected { background-color:#262626; }
body.darkmode #order-standard_cart .domain-checker-unavailable,
body.darkmode #order-standard_cart .domain-checker-invalid { color:#f07467; }
body.darkmode #order-standard_cart .transfer-eligible { background-color:#1f2614; border-color:#2f3d1a; color:#a3d133; }
body.darkmode #order-standard_cart .transfer-not-eligible { background-color:#1e1e1e; color:#b5b5b5; }
body.darkmode #order-standard_cart .default-captcha { background-color:#1e1e1e; border-color:#2d2d2d; color:#b5b5b5; box-shadow:none; }
body.darkmode #order-standard_cart .mc-promo .body { background-color:#1e1e1e; border-top-color:#2d2d2d; color:#e6e6e6; }

/* Domainsuche: TLD-Filter (Lagom: #7cab05 auf #e6e8ec = 2,23:1), Preistabellen-Kopf (#7c8088 = 4,21:1),
   Aktionsmarken und gelbe Knöpfe (Weiß auf Hellgrün/Gelb < 2:1) */
body #order-standard_cart a.label.label-default { color:#2d3436; }
body #order-standard_cart a.label.label-success { background-color:var(--vnx-primary); color:#fff; }
body #order-standard_cart .tld-sale-group-new, body #order-standard_cart .tld-sale-group-sale,
body #order-standard_cart .btn-warning, body #order-standard_cart .btn-warning:hover, body #order-standard_cart .btn-warning:focus { color:#111; }
body.darkmode #order-standard_cart a.label.label-default { background-color:#262626; color:#e6e6e6; }
body.darkmode #order-standard_cart a.label.label-success { background-color:var(--vnx-primary); color:#fff; }
body.darkmode #order-standard_cart .domain-pricing .tld-pricing-header { color:#b5b5b5; }

/* ═══════════════ SEITENTITEL KUNDENCENTER ═══════════════
   Lagom-Seitentitel (34 px) auf die Typo-Skala wie Dienste-Seite und Dashboard:
   17 px, fett; Untertitel 12 px darunter, ruhiger Abstand zum Inhalt. */
.main-header .main-header-top h1,
.main-header .header-lined h1 { margin:0; font-size:var(--vnx-fs-lg); font-weight:var(--vnx-fw-bold); line-height:var(--vnx-lh-tight); letter-spacing:0; color:var(--vnx-text); }
.main-header .main-header-top { min-height:0; margin-bottom:4px; }
.main-header .main-header-top .search-group { margin-left:auto; }
.main-header .text-lighter.text-small { font-size:var(--vnx-fs-sm); padding-top:0; color:var(--vnx-text-muted); }
.main-header .breadcrumb { margin:0 0 6px; padding:0; font-size:var(--vnx-fs-sm); }