/* =====================================================================
 * venocix-portal.css — gemeinsame Design-Ebene fuer das Kundenportal.
 *
 * Portiert das `vps-*`-Designsystem der VPS-Verwaltung
 * 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: #1f2328; /* Hell: Grün nur als Fläche (Entscheidung Tim 07.11.2026) */
    --vnx-accent-dark: #4f7a10;
    --vnx-danger: #c0392b;
    --vnx-danger-dark: #a93226;
    --vnx-warning: #b35c00;
    --vnx-info: #1f6fb2;
    --vnx-primary: #a3d133;
    --vnx-primary-hover: #b4dd55;
    --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: #a3d133;
    --vnx-primary-hover: #b4dd55;
    --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:#000; }
.vnx-btn-primary:hover, .vnx-btn-primary:focus { background:var(--vnx-primary-hover); border-color:var(--vnx-primary-hover); color:#000; }
.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; }

/* ═══════════════ 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; }
/* „Neue PIN erzeugen“ in der Support-Seitenleiste: 14 px, mobil 44 px Trefferfläche (Nachttest-Nachprüfung) */
.btn[data-vnx-supportpin-neu] { font-size:var(--vnx-fs-md); }
@media (max-width: 767px) { .btn[data-vnx-supportpin-neu] { min-height:44px; } }

/* 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:#000; }
.vnx-ticketinfo-aktionen .btn-success:hover, .vnx-ticketinfo-aktionen .btn-success:focus { background:var(--vnx-primary-hover); border-color:var(--vnx-primary-hover); color:#000; }
/* 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 { animation:none; }
    .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:#000; }
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:#000; }
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:#000; }
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:#000; }
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:#000; }
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:#000; }
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); }

/* ═══════════════ VSERVER: REITER „APPS“ (vnx-apps.js, Präfix vapps-) ═══════════════
   Ruhig und flach: keine Verläufe, keine Leucht-Schatten, kein Glas; Grün nur als Akzent (aktiver Filter, Status „Läuft“,
   Primärknopf). Farben und Typo über die --vps-*-Token aus includes.tpl (hell und dunkel). Mobil (≤ 600 px) einspaltig. */
.vapps { display:block; margin-top:16px; min-width:0; }
.vapps .vapps-card { margin-bottom:16px; }
.vapps-loading-in, .vapps-run { display:flex; align-items:center; gap:10px; padding:18px 20px; color:var(--vps-text-muted); font-size:var(--vps-fs-base); }
.vapps-dlg .vapps-run { padding:12px 0; }
.vapps-pad { padding:16px 20px; }
.vapps-pad-s { margin:0; padding:4px 0; }
.vapps-muted { color:var(--vps-text-muted); }
.vapps .vapps-alert, .vapps-dlg .vapps-alert { margin:12px 0 0; }
.vapps-pad > .vapps-alert { margin:0 0 12px; }
.vapps-error { color:var(--vps-danger); font-size:var(--vps-fs-sm); margin-top:6px; }
.vapps-error:empty { display:none; }
.vapps-back { display:inline-flex; align-items:center; gap:6px; margin:0 0 10px; font-size:var(--vps-fs-base); color:var(--vps-text-secondary); text-decoration:none; }
.vapps-back:hover { color:var(--vps-text); text-decoration:none; }
.vapps-link { border:0; background:none; padding:0; color:var(--vps-accent-text); font-size:var(--vps-fs-base); font-weight:var(--vps-fw-medium); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.vapps-link:hover { text-decoration:underline; }

/* Kopf */
.vapps-head { display:flex; align-items:center; gap:14px; padding:18px 20px; flex-wrap:wrap; }
.vapps-head-icon { width:40px; height:40px; flex:0 0 40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--vps-bg-subtle); border:1px solid var(--vps-border); color:var(--vps-text-secondary); }
.vapps-head-text { flex:1 1 260px; min-width:0; }
.vapps-title { margin:0; font-size:var(--vps-fs-lg); font-weight:var(--vps-fw-bold); line-height:var(--vps-lh-tight); color:var(--vps-text); }
.vapps-sub { margin:2px 0 0; font-size:var(--vps-fs-base); color:var(--vps-text-muted); line-height:var(--vps-lh-base); }
.vapps-head-right { flex:0 1 auto; margin-left:auto; display:flex; gap:8px; }
.vapps-search { position:relative; display:block; width:280px; max-width:100%; margin:0; }
.vapps-search i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--vps-text-muted); font-size:13px; pointer-events:none; }
.vapps-search input { width:100%; height:38px; padding:8px 12px 8px 34px; border-radius:8px; border:1px solid var(--vps-border); background:var(--vps-bg-input); color:var(--vps-text); font-size:var(--vps-fs-md); }
.vapps-search input:focus, .vapps-input:focus { outline:none; border-color:var(--vps-accent); box-shadow:0 0 0 3px rgba(163,209,51,0.2); }
.vapps-facts { list-style:none; margin:0; padding:10px 20px; display:flex; flex-wrap:wrap; gap:6px 24px; background:var(--vps-bg-subtle); border-top:1px solid var(--vps-border-subtle); font-size:var(--vps-fs-base); color:var(--vps-text-muted); }
.vapps-facts strong { color:var(--vps-text); font-weight:var(--vps-fw-medium); margin-left:4px; }
.vapps-filter { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 20px; border-top:1px solid var(--vps-border-subtle); }
.vapps-filter:empty { display:none; }
.vapps-seg button { padding:5px 14px; }
.vapps-chips { display:flex; flex-wrap:wrap; gap:6px; }
.vapps-chip { border:1px solid var(--vps-border); background:var(--vps-bg); color:var(--vps-text-secondary); border-radius:999px; padding:4px 12px; font-size:var(--vps-fs-sm); font-weight:var(--vps-fw-medium); cursor:pointer; line-height:var(--vps-lh-tight); }
.vapps-chip:hover { background:var(--vps-bg-hover); color:var(--vps-text); }
.vapps-chip.is-on { border-color:var(--vps-accent-text); color:var(--vps-accent-text); background:var(--vps-bg); }

/* Abschnitte, Listen */
.vapps-sec-head { padding:16px 20px 10px; }
.vapps-h3 { margin:0; font-size:var(--vps-fs-md); font-weight:var(--vps-fw-bold); color:var(--vps-text); line-height:var(--vps-lh-tight); }
.vapps-h4 { margin:0 0 10px; font-size:var(--vps-fs-base); font-weight:var(--vps-fw-bold); color:var(--vps-text); text-transform:uppercase; letter-spacing:var(--vps-ls-caps); }
.vapps-sec-head .vapps-sub { margin-top:2px; }
.vapps-pop { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-bottom:16px; }
.vapps-pop .vapps-card { margin-bottom:0; }
.vapps-items { list-style:none; margin:0; padding:0 12px 12px; display:grid; grid-template-columns:minmax(0,1fr); gap:6px; }
.vapps-items-2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.vapps-item { display:flex; align-items:center; gap:12px; padding:10px; border:1px solid var(--vps-border-subtle); border-radius:10px; background:var(--vps-bg); min-width:0; }
.vapps-item.is-off { background:var(--vps-bg-subtle); }
.vapps-item.is-off .vapps-logo img { opacity:.55; filter:grayscale(1); }
.vapps-item.is-off .vapps-item-name { color:var(--vps-text-secondary); }
.vapps-item-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.vapps-item-name { font-size:var(--vps-fs-md); font-weight:var(--vps-fw-bold); color:var(--vps-text); line-height:var(--vps-lh-tight); }
.vapps-item-sum { font-size:var(--vps-fs-sm); color:var(--vps-text-muted); line-height:var(--vps-lh-base); }
.vapps-item-ram { white-space:nowrap; }
.vapps-why { font-size:var(--vps-fs-sm); color:var(--vps-sec-warn); }
.vapps-item-act { flex:0 0 auto; }
.vapps-soon { display:inline-block; padding:3px 10px; border-radius:999px; border:1px solid var(--vps-border); font-size:var(--vps-fs-sm); color:var(--vps-text-muted); white-space:nowrap; }
.vapps-tiles { list-style:none; margin:0; padding:0 20px 20px; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; }
.vapps-tile { position:relative; display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:14px; border:1px solid var(--vps-border-subtle); border-radius:10px; background:var(--vps-bg); }
.vapps-tile.is-off { background:var(--vps-bg-subtle); }
.vapps-tile.is-off .vapps-logo img { opacity:.55; filter:grayscale(1); }
.vapps-tile.is-off .vapps-tile-name { color:var(--vps-text-secondary); }
.vapps-tile-rank { position:absolute; top:10px; right:12px; font-size:var(--vps-fs-sm); color:var(--vps-text-muted); line-height:1; font-variant-numeric:tabular-nums; }
.vapps-tile .vapps-logo { margin-bottom:12px; }
.vapps-tile-name { max-width:100%; font-size:var(--vps-fs-md); font-weight:var(--vps-fw-bold); color:var(--vps-text); line-height:var(--vps-lh-tight); overflow-wrap:anywhere; }
.vapps-tile-sum { margin-top:3px; max-width:100%; font-size:var(--vps-fs-sm); color:var(--vps-text-muted); line-height:var(--vps-lh-base); overflow-wrap:anywhere; }
.vapps-tile-foot { margin-top:auto; padding-top:14px; width:100%; display:flex; flex-direction:column; gap:8px; }
.vapps-tile-ram { font-size:var(--vps-fs-sm); color:var(--vps-text-muted); line-height:var(--vps-lh-base); }
.vapps-tile-ram .fas, .vapps-tile .vapps-why .fas { margin-right:3px; }
.vapps-tile .vapps-why { line-height:var(--vps-lh-base); }
.vapps-tile-act { display:block; width:100%; }
.vapps-tile-act .vps-btn { width:100%; justify-content:center; text-align:center; white-space:normal; }
.vapps-tile-act .vapps-soon { display:block; text-align:center; padding:6px 10px; border-radius:8px; border-color:transparent; background:var(--vps-bg-subtle); }
.vapps-tile.is-off .vapps-tile-act .vapps-soon { background:var(--vps-bg); }
.vapps-tile-act .vapps-tile-up { color:var(--vps-accent-text); }
.vapps-cat { display:grid; grid-template-columns:220px minmax(0,1fr); gap:12px; padding:14px 20px 4px 8px; border-top:1px solid var(--vps-border-subtle); }
.vapps-cat .vapps-items { padding:0 0 10px; }
.vapps-cat-name { display:flex; gap:10px; align-items:flex-start; padding:10px 0 0 12px; }
.vapps-cat-name i { width:18px; margin-top:3px; color:var(--vps-text-muted); text-align:center; }
.vapps-cat-name strong { display:block; font-size:var(--vps-fs-md); color:var(--vps-text); line-height:var(--vps-lh-tight); }
.vapps-cat-name span { font-size:var(--vps-fs-sm); color:var(--vps-text-muted); }
.vapps-empty { padding:28px 20px; text-align:center; color:var(--vps-text-muted); }
.vapps-empty i { font-size:20px; margin-bottom:8px; }
.vapps-empty p { margin:0; }
.vapps-foot { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 16px; padding:2px 4px 8px; font-size:var(--vps-fs-sm); color:var(--vps-text-muted); }

/* Logos */
.vapps-logo { width:40px; height:40px; flex:0 0 40px; display:flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--vps-border); background:#fff; overflow:hidden; }
.vapps-logo img { width:26px; height:26px; object-fit:contain; }
.vapps-logo-icon { background:var(--vps-bg-subtle); color:var(--vps-text-secondary); font-size:16px; }
.vapps-logo-lg { width:56px; height:56px; flex-basis:56px; border-radius:12px; }
.vapps-logo-lg img { width:36px; height:36px; }
.vapps-logo-lg.vapps-logo-icon { font-size:22px; }
.darkmode .vapps-logo:not(.vapps-logo-icon) { background:#f4f5f6; border-color:rgba(255,255,255,0.12); }

/* Status */
.vapps-status { display:inline-flex; align-items:center; gap:6px; font-size:var(--vps-fs-base); font-weight:var(--vps-fw-medium); color:var(--vps-text-secondary); white-space:nowrap; }
.vapps-status-ok { color:var(--vps-accent-text); }
.vapps-status-error { color:var(--vps-danger); }
.vapps-dot { width:8px; height:8px; border-radius:50%; background:var(--vps-text-faint); display:inline-block; }
.vapps-dot-ok { background:var(--vps-accent); }
.vapps-dot-error { background:var(--vps-danger); }
.vapps-dot-off { background:var(--vps-text-faint); }
.vapps-type { display:inline-block; padding:1px 7px; border-radius:6px; border:1px solid var(--vps-border); font-size:var(--vps-fs-xs); font-weight:var(--vps-fw-medium); color:var(--vps-text-muted); line-height:1.5; }

/* Ressourcen */
.vapps-res { padding:14px 20px 16px; border-top:1px solid var(--vps-border-subtle); }
.vapps-res-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap:18px 28px; }
.vapps-res-m { min-width:0; }
.vapps-res-cap { margin-top:6px; font-size:var(--vps-fs-sm); color:var(--vps-text-muted); }
.vapps-res-top { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; font-size:var(--vps-fs-base); }
.vapps-res-label { font-weight:var(--vps-fw-bold); color:var(--vps-text); }
.vapps-res-total { color:var(--vps-text-muted); }
.vapps-bar { display:flex; height:10px; border-radius:6px; overflow:hidden; background:var(--vps-bg-subtle); border:1px solid var(--vps-border-subtle); }
.vapps-bar span { display:block; height:100%; }
.vapps-bar-system, .vapps-key-system { background:#8a939c; }
.vapps-bar-apps, .vapps-key-apps { background:var(--vps-accent); }
.vapps-bar-games, .vapps-key-games { background:#4f7a10; }
.vapps-bar-free, .vapps-key-free { background:transparent; }
.vapps-key-free { border:1px solid var(--vps-border); }
.vapps-legend { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 20px; font-size:var(--vps-fs-sm); color:var(--vps-text-muted); }
.vapps-legend li { display:inline-flex; align-items:center; gap:6px; }
.vapps-legend strong { color:var(--vps-text); font-weight:var(--vps-fw-medium); }
.vapps-key { width:10px; height:10px; border-radius:3px; display:inline-block; }
.darkmode .vapps-bar-games, .darkmode .vapps-key-games { background:#6d9a2a; }
.darkmode .vapps-bar-system, .darkmode .vapps-key-system { background:#6b7178; }

/* Installiert */
.vapps-rows { list-style:none; margin:0; padding:0; }
.vapps-row { display:grid; grid-template-columns:40px minmax(0,1fr) 140px auto; align-items:center; gap:14px; padding:12px 20px; border-top:1px solid var(--vps-border-subtle); }
.vapps-row-main { min-width:0; }
.vapps-row-name { display:flex; align-items:center; gap:8px; font-size:var(--vps-fs-md); font-weight:var(--vps-fw-bold); color:var(--vps-text); line-height:var(--vps-lh-tight); flex-wrap:wrap; }
.vapps-row-meta { display:flex; flex-wrap:wrap; gap:2px 14px; margin-top:3px; font-size:var(--vps-fs-sm); color:var(--vps-text-muted); min-width:0; }
.vapps-addr, .vapps-addr-plain { color:var(--vps-text-secondary); overflow-wrap:anywhere; }
.vapps-addr-tls { color:var(--vps-text-muted); font-size:var(--vps-fs-sm); white-space:normal; }
.vapps-addr-tls.is-failed { color:var(--vps-sec-warn); }
a.vapps-addr { text-decoration:underline; text-decoration-color:var(--vps-border); text-underline-offset:2px; }
a.vapps-addr:hover { color:var(--vps-text); }
.vapps-row-act { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.vapps-row-legacy .vapps-row-name { color:var(--vps-text-secondary); }

/* Voraussetzungen */
.vapps-pre { padding:16px 20px 18px; border-top:1px solid var(--vps-border-subtle); }
.vapps-pre-t { display:flex; gap:12px; align-items:flex-start; }
.vapps-pre-t > i { margin-top:3px; color:var(--vps-text-muted); }
.vapps-pre-t strong { color:var(--vps-text); }
.vapps-pre-t p { margin:4px 0 0; color:var(--vps-text-secondary); font-size:var(--vps-fs-md); max-width:680px; }
.vapps-pre-run { display:flex; align-items:center; gap:8px; margin:12px 0 0 28px; font-size:var(--vps-fs-base); color:var(--vps-text-secondary); }
.vapps-pre .vapps-error { margin-left:28px; }
.vapps-pre-act { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0 28px; }

/* Verwaltung */
.vapps-mhead { display:flex; gap:16px; align-items:flex-start; padding:18px 20px 14px; flex-wrap:wrap; }
.vapps-mhead-text { flex:1 1 280px; min-width:0; }
.vapps-mtitle { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.vapps-meta { display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:6px; font-size:var(--vps-fs-base); color:var(--vps-text-muted); }
.vapps-meta-item { display:inline-flex; align-items:center; gap:6px; min-width:0; }
.vapps-meta-item i { color:var(--vps-text-faint); }
.vapps-mhead-act { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.vapps-menu-wrap { position:relative; display:inline-block; }
.vapps-more { padding-left:12px; padding-right:12px; }
.vapps-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:230px; padding:6px; border-radius:10px; border:1px solid var(--vps-border); background:var(--vps-bg-solid); box-shadow:0 4px 12px rgba(0,0,0,0.08); }
.darkmode .vapps-menu { box-shadow:none; }
.vapps-menu[hidden] { display:none; }
.vapps-menu-item { display:flex; gap:10px; align-items:flex-start; width:100%; padding:8px 10px; border:0; border-radius:8px; background:none; text-align:left; cursor:pointer; color:var(--vps-danger); }
.vapps-menu-item:hover { background:var(--vps-bg-hover); }
.vapps-menu-item i { margin-top:3px; }
.vapps-menu-item strong { display:block; font-size:var(--vps-fs-base); }
.vapps-menu-item small { display:block; font-size:var(--vps-fs-sm); color:var(--vps-text-muted); }
.vapps-menu-item:disabled { opacity:.5; cursor:not-allowed; }
.vapps-login-note { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 20px 12px; padding:10px 14px; border-radius:10px; border:1px solid var(--vps-border); background:var(--vps-bg-subtle); font-size:var(--vps-fs-base); color:var(--vps-text); }
.vapps-login-note i { color:var(--vps-text-muted); }
.vapps-login-note span { flex:1 1 200px; }
.vapps-inline-job { margin:0 20px 14px; padding:12px 14px; border-radius:10px; border:1px solid var(--vps-border); background:var(--vps-bg-subtle); }
.vapps-inline-head { margin-bottom:6px; font-size:var(--vps-fs-base); color:var(--vps-text); }
.vapps-subnav { display:flex; gap:4px 22px; padding:0 20px; border-bottom:1px solid var(--vps-border); overflow-x:auto; scrollbar-width:none; }
.vapps-subnav::-webkit-scrollbar { display:none; }
.vapps-subnav a { display:inline-flex; align-items:center; gap:6px; padding:10px 0; margin-bottom:-1px; border-bottom:2px solid transparent; color:var(--vps-text-secondary); font-size:var(--vps-fs-base); font-weight:var(--vps-fw-medium); text-decoration:none; white-space:nowrap; }
.vapps-subnav a:hover { color:var(--vps-text); text-decoration:none; }
.vapps-subnav a.is-on { color:var(--vps-accent-text); border-bottom-color:var(--vps-accent-text); }
.vapps-count { display:inline-flex; min-width:18px; height:18px; padding:0 5px; align-items:center; justify-content:center; border-radius:9px; border:1px solid var(--vps-border); font-size:var(--vps-fs-xs); color:var(--vps-text-secondary); }
.vapps-panel { padding:4px 20px 18px; }
.vapps-sub-sec { padding:14px 0 4px; }
.vapps-sub-sec + .vapps-sub-sec { border-top:1px solid var(--vps-border-subtle); }
.vapps-stats { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.vapps-stat { display:flex; flex-direction:column; gap:4px; padding:12px 14px; border:1px solid var(--vps-border-subtle); border-radius:10px; }
.vapps-stat-l { font-size:var(--vps-fs-sm); color:var(--vps-text-muted); }
.vapps-stat-v { font-size:var(--vps-fs-md); font-weight:var(--vps-fw-medium); color:var(--vps-text); }
.vapps-meter { display:block; height:6px; border-radius:4px; background:var(--vps-bg-subtle); border:1px solid var(--vps-border-subtle); overflow:hidden; margin-top:2px; }
.vapps-meter span { display:block; height:100%; background:var(--vps-accent); }
.vapps-meter-lg { height:8px; margin:6px 0 10px; }
.vapps-kv { list-style:none; margin:0; padding:0; max-width:640px; }
.vapps-kv li { display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-top:1px solid var(--vps-border-subtle); font-size:var(--vps-fs-base); }
.vapps-kv li:first-child { border-top:0; }
.vapps-kv li > span:first-child { color:var(--vps-text-muted); }
.vapps-kv li > span:last-child { color:var(--vps-text); text-align:right; min-width:0; overflow-wrap:anywhere; }
.vapps-update { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; padding:14px; border-radius:10px; border:1px solid var(--vps-border); }
.vapps-update p { margin:4px 0 0; }
.vapps-update-act { display:flex; flex-wrap:wrap; gap:8px; }
.vapps-warn-text { color:var(--vps-sec-warn); font-size:var(--vps-fs-sm); }
.vapps-access { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:12px; }
.vapps-access p { margin:0; font-size:var(--vps-fs-sm); }
.vapps-pw-row { max-width:640px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; }
.vapps-pw-row p { margin:0; font-size:var(--vps-fs-sm); }
.vapps-log-bar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; font-size:var(--vps-fs-sm); }
.vapps-log { height:340px; overflow:auto; padding:10px 12px; border-radius:8px; border:1px solid var(--vps-border); background:var(--vps-bg-subtle); font-family:var(--vps-font-mono); font-size:var(--vps-fs-sm); line-height:1.55; color:var(--vps-text); }
.vapps-log-line { white-space:pre-wrap; overflow-wrap:anywhere; }
.vapps-log-empty { color:var(--vps-text-muted); }

/* Formulare */
.vapps-form { max-width:640px; }
.vapps-field { margin-bottom:12px; }
.vapps-label { display:block; margin:0 0 6px; font-size:var(--vps-fs-base); font-weight:var(--vps-fw-bold); color:var(--vps-text); line-height:var(--vps-lh-tight); }
.vapps-opt { font-weight:var(--vps-fw-regular); color:var(--vps-text-muted); }
.vapps-input { width:100%; height:40px; padding:8px 12px; border-radius:8px; border:1px solid var(--vps-border); background:var(--vps-bg-input); color:var(--vps-text); font-size:var(--vps-fs-md); }
select.vapps-input option { background:var(--vps-bg-solid); color:var(--vps-text); }
.vapps-input.is-invalid { border-color:var(--vps-danger); }
.vapps-field-err { margin-top:4px; font-size:var(--vps-fs-sm); color:var(--vps-danger); }
.vapps-field-err:empty { display:none; }
.vapps-form-foot { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; margin-top:6px; padding-top:12px; border-top:1px solid var(--vps-border-subtle); font-size:var(--vps-fs-sm); }
.vapps-check { display:flex; align-items:flex-start; gap:10px; margin:0 0 8px; font-size:var(--vps-fs-md); font-weight:var(--vps-fw-regular); color:var(--vps-text); cursor:pointer; line-height:var(--vps-lh-base); }
.vapps-check[hidden] { display:none; }
.vapps-check input { margin:3px 0 0; width:16px; height:16px; flex:0 0 16px; accent-color:var(--vps-primary); }
.vapps-radios { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.vapps-radio { display:flex; gap:10px; align-items:flex-start; margin:0; padding:10px 12px; border:1px solid var(--vps-border); border-radius:10px; cursor:pointer; font-weight:var(--vps-fw-regular); }
.vapps-radio:has(input:checked) { border-color:var(--vps-accent-text); }
.vapps-radio.is-disabled { cursor:not-allowed; background:var(--vps-bg-subtle); }
.vapps-radio input { margin:3px 0 0; accent-color:var(--vps-primary); }
.vapps-radio strong { display:block; font-size:var(--vps-fs-md); color:var(--vps-text); line-height:var(--vps-lh-tight); }
.vapps-radio small { display:block; margin-top:2px; font-size:var(--vps-fs-sm); color:var(--vps-text-muted); line-height:var(--vps-lh-base); }
.vapps-radio.is-disabled strong { color:var(--vps-text-muted); }
.vapps-radio small a { color:var(--vps-accent-text); }

/* Dialog */
.vapps-dlg { position:relative; width:min(620px, 100%); max-height:calc(100vh - 32px); display:flex; flex-direction:column; background:var(--vps-bg-solid); color:var(--vps-text); border:1px solid var(--vps-border); border-radius:14px; overflow:hidden; }
.vapps-dlg-head { display:flex; align-items:center; gap:14px; padding:16px 20px; border-bottom:1px solid var(--vps-border-subtle); }
.vapps-dlg-logo:empty { display:none; }
.vapps-dlg-ht { flex:1 1 auto; min-width:0; }
.vapps-dlg-title { margin:0; font-size:var(--vps-fs-lg); font-weight:var(--vps-fw-bold); line-height:var(--vps-lh-tight); color:var(--vps-text); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.vapps-dlg-sub { margin:3px 0 0; font-size:var(--vps-fs-base); color:var(--vps-text-muted); overflow-wrap:anywhere; }
.vapps-dlg-sub:empty { display:none; }
.vapps-title-st { font-size:var(--vps-fs-base); }
.vapps-dlg-body { padding:16px 20px; overflow:auto; flex:1 1 auto; }
.vapps-dlg-foot { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; padding:12px 20px; border-top:1px solid var(--vps-border-subtle); background:var(--vps-bg-subtle); }
.vapps-dlg-foot .vps-btn { min-height:38px; }
.vapps-dlg :focus-visible { outline:2px solid var(--vps-accent); outline-offset:2px; }
.vapps-dsec { margin-bottom:16px; }
.vapps-addr-in { display:flex; align-items:stretch; max-width:100%; }
.vapps-addr-in .vapps-input { flex:1 1 140px; min-width:0; border-top-right-radius:0; border-bottom-right-radius:0; }
.vapps-addr-in .vapps-input:focus-visible { outline-offset:-2px; }
.vapps-addr-in .vapps-input:only-child, .vapps-addr-in .vapps-input:has(+ .vapps-suffix[hidden]) { border-radius:8px; }
.vapps-suffix[hidden], .vapps-hint[hidden] { display:none; }
.vapps-suffix { display:flex; align-items:center; padding:0 12px; border:1px solid var(--vps-border); border-left:0; border-radius:0 8px 8px 0; background:var(--vps-bg-subtle); color:var(--vps-text-secondary); font-size:var(--vps-fs-md); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60%; }
.vapps-name-st { min-height:20px; margin-top:6px; font-size:var(--vps-fs-sm); color:var(--vps-text-muted); display:flex; align-items:center; gap:6px; }
.vapps-name-st.is-ok { color:var(--vps-accent-text); font-weight:var(--vps-fw-medium); }
.vapps-name-st.is-bad { color:var(--vps-danger); }
.vapps-hint { margin:4px 0 0; font-size:var(--vps-fs-sm); color:var(--vps-text-muted); }
/* Fließtext statt Flex: Links und Text bleiben in einer Zeile umbrochen; das Symbol steht links daneben. */
.vapps-note { display:block; position:relative; margin:10px 0 0; padding:9px 12px 9px 34px; border-radius:8px; background:var(--vps-bg-subtle); border:1px solid var(--vps-border-subtle); font-size:var(--vps-fs-base); color:var(--vps-text-secondary); }
.vapps-note > i { position:absolute; left:12px; top:12px; width:14px; text-align:center; color:var(--vps-text-muted); }
.vapps-box { padding:14px 16px; border-radius:10px; background:var(--vps-bg-subtle); border:1px solid var(--vps-border-subtle); }
.vapps-box-t { display:block; margin-bottom:8px; font-size:var(--vps-fs-base); font-weight:var(--vps-fw-bold); color:var(--vps-text); }
.vapps-box-list { list-style:none; margin:0; padding:0; font-size:var(--vps-fs-base); color:var(--vps-text-secondary); }
.vapps-box-list li { display:flex; gap:10px; align-items:baseline; padding:3px 0; }
.vapps-box-list li[hidden] { display:none; }
.vapps-box-list i { width:14px; text-align:center; color:var(--vps-text-muted); }
.vapps-box-res { display:flex; flex-wrap:wrap; gap:4px 20px; margin-top:10px; padding-top:10px; border-top:1px solid var(--vps-border); font-size:var(--vps-fs-sm); color:var(--vps-text-muted); }
.vapps-box-res strong { color:var(--vps-text); }
.vapps-found { margin-top:4px; padding:14px 16px; border-radius:10px; border:1px solid var(--vps-border); }
.vapps-found .vapps-hint { margin:0 0 10px; }
.vapps-check-req span::after { content:" *"; color:var(--vps-text-muted); }
.vapps-agent-note { margin:12px 0 0; font-size:var(--vps-fs-sm); color:var(--vps-text-muted); }
.vapps-stages { list-style:none; margin:0; padding:0; }
.vapps-stage { display:flex; align-items:center; gap:12px; padding:7px 0; font-size:var(--vps-fs-md); color:var(--vps-text); }
.vapps-stage-mark { width:22px; height:22px; flex:0 0 22px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--vps-border); font-size:11px; color:var(--vps-text-secondary); }
.vapps-stage.is-done .vapps-stage-mark { background:var(--vps-bg-subtle); color:var(--vps-accent-text); }
.vapps-stage.is-failed .vapps-stage-mark { color:var(--vps-danger); border-color:var(--vps-danger); }
.vapps-stage.is-pending { color:var(--vps-text-muted); }
.vapps-stage.is-running .vapps-stage-l { font-weight:var(--vps-fw-medium); }
.vapps-stage-l { flex:1 1 auto; }
.vapps-stage-s { font-size:var(--vps-fs-sm); color:var(--vps-text-muted); }
.vapps-prog-top { display:flex; justify-content:space-between; font-size:var(--vps-fs-sm); color:var(--vps-text-muted); }
.vapps-creds { border:1px solid var(--vps-border); border-radius:10px; }
.vapps-cred { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:10px 14px; border-top:1px solid var(--vps-border-subtle); }
.vapps-cred:first-child { border-top:0; }
.vapps-cred-l { flex:0 0 110px; font-size:var(--vps-fs-base); color:var(--vps-text-muted); }
.vapps-cred-v { flex:1 1 160px; min-width:0; font-size:var(--vps-fs-md); color:var(--vps-text); overflow-wrap:anywhere; }
.vapps-cred-v a { color:var(--vps-text); text-decoration:underline; text-underline-offset:2px; }
.vapps-mono { font-family:var(--vps-font-mono); }
.vapps-cred-btns { display:flex; gap:6px; }
.vapps-once { display:flex; gap:10px; align-items:flex-start; margin-top:12px; padding:10px 14px; border-radius:10px; border:1px solid var(--vps-border); background:var(--vps-sec-warn-bg); font-size:var(--vps-fs-base); color:var(--vps-text); }
.vapps-once i { margin-top:3px; color:var(--vps-sec-warn); }
.vapps-once strong { color:var(--vps-sec-warn); }
.vapps-remove .vapps-radios { grid-template-columns:minmax(0,1fr); }
/* Im Entfernen-Dialog (VPS.modal) gilt sonst .vps-modal-field input (Breite 100 %, Polster, Rahmen) auch für die Optionsfelder. */
.vps-modal-field.vapps-remove .vapps-radio input[type="radio"] { width:16px; height:16px; flex:0 0 16px; padding:0; border:0; border-radius:50%; background:none; box-shadow:none; }
.vapps-confirm-name { margin-top:12px; }
.vapps-confirm-name[hidden] { display:none; }
.vapps-req-form input, .vapps-req-form textarea, .vapps-legacy-form input { width:100%; padding:9px 12px; font-size:var(--vps-fs-md); border-radius:8px; border:1px solid var(--vps-border); background:var(--vps-bg-input); color:var(--vps-text); }
.vapps-req-form textarea { resize:vertical; min-height:80px; }
.vapps-req-count { margin-top:4px; font-size:var(--vps-fs-sm); color:var(--vps-text-muted); text-align:right; }
.vapps-req-count.is-ok { color:var(--vps-accent-text); }

@media (max-width: 1199px) {
    .vapps-tiles { grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (max-width: 991px) {
    .vapps-tiles { grid-template-columns:repeat(3, minmax(0,1fr)); }
    .vapps-items-2 { grid-template-columns:minmax(0,1fr); }
    .vapps-cat { grid-template-columns:minmax(0,1fr); padding:12px 12px 4px; gap:4px; }
    .vapps-cat-name { padding:0 0 4px 8px; }
    .vapps-row { grid-template-columns:40px minmax(0,1fr) auto; }
    .vapps-row-act { grid-column:2 / -1; justify-content:flex-start; }
}
@media (max-width: 767px) {
    .vapps-tiles { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .vapps-stats { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 600px) {
    .vapps-head, .vapps-mhead { padding:14px 14px 12px; }
    .vapps-head-right { margin-left:0; width:100%; }
    .vapps-search { width:100%; }
    .vapps-facts, .vapps-filter, .vapps-res, .vapps-pre { padding-left:14px; padding-right:14px; }
    .vapps-sec-head { padding:14px 14px 8px; }
    .vapps-items { padding:0 8px 8px; }
    .vapps-tiles { padding:0 10px 10px; gap:8px; }
    .vapps-tile { padding:12px 10px 10px; }
    .vapps-tile .vapps-logo { width:36px; height:36px; flex-basis:36px; margin-bottom:10px; }
    .vapps-tile-act .vps-btn-sm { padding:6px 6px; }
    .vapps-item { gap:10px; padding:10px 8px 10px 10px; }
    .vapps-item .vapps-logo { width:36px; height:36px; flex-basis:36px; }
    .vapps-item-act .vps-btn-sm { padding:5px 8px; }
    .vapps-row { grid-template-columns:40px minmax(0,1fr); padding:12px 14px; gap:10px 12px; }
    .vapps-row-status { grid-column:2; }
    .vapps-row-act { grid-column:1 / -1; }
    .vapps-pre-act, .vapps-pre-run, .vapps-pre .vapps-error { margin-left:0; }
    .vapps-mhead-act { width:100%; }
    .vapps-mhead-act .vps-btn { flex:1 1 auto; }
    .vapps-menu-wrap { flex:0 0 auto; }
    .vapps-subnav, .vapps-panel { padding-left:14px; padding-right:14px; }
    .vapps-login-note, .vapps-inline-job { margin-left:14px; margin-right:14px; }
    .vapps-radios { grid-template-columns:minmax(0,1fr); }
    .vapps-dlg-head, .vapps-dlg-body { padding-left:16px; padding-right:16px; }
    .vapps-dlg-foot { padding:12px 16px; flex-direction:column-reverse; }
    .vapps-dlg-foot .vps-btn { width:100%; min-height:44px; }
    .vapps-cred-l { flex-basis:100%; }
    .vapps-foot { flex-direction:column; align-items:flex-start; padding:2px 2px 8px; }
}
@media (max-width: 480px) {
    .vapps-layer .vapps-dlg { max-height:calc(100vh - 24px); border-radius:14px; }
}
/* Das Theme blendet native Häkchen/Optionsfelder aus; im Apps-Reiter sichtbar und ruhig. */
.vapps-check input[type="checkbox"], .vapps-radio input[type="radio"], .vapps-field-bool input[type="checkbox"] { -webkit-appearance:auto; appearance:auto; position:static; opacity:1; visibility:visible; display:inline-block; pointer-events:auto; }
.vapps-job-err { margin:0 20px 12px; }
.vapps-job-err .vapps-alert { margin:0; }
.vapps-addr-in .vapps-input:focus { box-shadow:none; position:relative; z-index:1; }
@media (max-width: 600px) { .vapps-job-err { margin:0 14px 12px; } }

/* ─── Apps, Phase 2: Hinweise, Dateien/Datenbank, Konsole, Verbindungsdaten, Aufteilung (ruhig, flach, Grün nur als Akzent) ─── */
.vapps-notice { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px 10px; margin:0 20px 12px; padding:10px 14px; border-radius:10px; border:1px solid var(--vps-border); background:var(--vps-sec-warn-bg); font-size:var(--vps-fs-base); color:var(--vps-text); line-height:var(--vps-lh-base); }
.vapps-notice > i.fas { color:var(--vps-sec-warn); }
.vapps-notice > span { min-width:0; }
.vapps-row-note { grid-column:2 / -1; display:flex; gap:8px; align-items:flex-start; margin-top:-4px; font-size:var(--vps-fs-sm); color:var(--vps-sec-warn); line-height:var(--vps-lh-base); }
.vapps-row-note i.fas { margin-top:3px; color:var(--vps-sec-warn); }
.vapps-tools { display:flex; flex-wrap:wrap; gap:8px; }
.vapps-tools + .vapps-hint { margin-top:8px; }
/* Konsole */
.vapps-con-bar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 12px; margin-bottom:6px; min-height:30px; }
.vapps-con-state { display:inline-flex; align-items:center; gap:8px; font-size:var(--vps-fs-base); font-weight:var(--vps-fw-medium); color:var(--vps-text-secondary); }
.vapps-con-state.is-ok { color:var(--vps-accent-text); }
.vapps-con-state.is-warn, .vapps-con-state.is-warn i.fas { color:var(--vps-sec-warn); }
.vapps-con-act { display:flex; gap:8px; }
.vapps-con-act:empty { display:none; }
.vapps-con-hint { display:flex; gap:6px; align-items:baseline; margin:0 0 10px; }
.vapps-con-msg:empty { display:none; }
.vapps-con-msg { margin-bottom:10px; }
.vapps-con-msg .vapps-note { margin:0 0 8px; }
.vapps-con-msg .vapps-note a { color:var(--vps-accent-text); }
.vapps .vapps-con-msg .vapps-alert { margin:0 0 8px; }
.vapps-con-empty { height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px; border-radius:8px; border:1px solid var(--vps-border); background:var(--vps-bg-subtle); color:var(--vps-text-muted); text-align:center; font-size:var(--vps-fs-base); }
.vapps-con-empty p { margin:0; max-width:460px; font-size:var(--vps-fs-md); line-height:var(--vps-lh-base); color:var(--vps-text-muted); }
.vapps-con-ico { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; border:1px solid var(--vps-border); background:var(--vps-bg); color:var(--vps-text-secondary); }
.vapps-con-ico.is-warn, .vapps-con-ico.is-warn i.fas { color:var(--vps-sec-warn); }
.vapps-term { height:420px; padding:8px 4px 8px 10px; border-radius:8px; border:1px solid var(--vps-border); background:#1c1f23; overflow:hidden; }
.vapps-term-in { height:100%; }
.vapps-term .xterm { height:100%; }
.vapps-term .xterm .xterm-viewport { background-color:#1c1f23 !important; }
.vapps-term .xterm-helper-textarea { position:absolute !important; opacity:0 !important; }
.darkmode .vapps-term { border-color:rgba(255,255,255,0.10); }
/* Dialoge */
.vapps-dlg-lead { margin:0 0 12px; font-size:var(--vps-fs-md); line-height:var(--vps-lh-base); color:var(--vps-text-secondary); }
.vapps-session-facts { padding:12px 14px; border-radius:10px; border:1px solid var(--vps-border-subtle); background:var(--vps-bg-subtle); }
.vapps-dlg .vapps-note a { color:var(--vps-accent-text); }
.vapps-cred-set + .vapps-cred-set { margin-top:14px; }
.vapps-cred-t { margin:0 0 6px; font-size:var(--vps-fs-base); font-weight:var(--vps-fw-bold); color:var(--vps-text); }
.vapps-al-row { margin-bottom:6px; }
.vapps-al-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.vapps-al-top .vapps-label { margin:0; }
.vapps-al-val { font-size:var(--vps-fs-md); font-weight:var(--vps-fw-medium); color:var(--vps-text); white-space:nowrap; }
.vapps-range { display:block; width:100%; margin:10px 0 4px; accent-color:var(--vps-primary); -webkit-appearance:auto; appearance:auto; height:auto; padding:0; border:0; background:none; box-shadow:none; }
.vapps-range:focus-visible { outline:2px solid var(--vps-accent); outline-offset:3px; }
/* Fokus beim Öffnen liegt auf der Überschrift (für Screenreader), ohne Rahmen. */
.vapps-dlg .vapps-dlg-title:focus, .vapps-dlg .vapps-dlg-title:focus-visible { outline:none; }
.vapps-al-scale { display:flex; justify-content:space-between; font-size:var(--vps-fs-sm); color:var(--vps-text-muted); }
.vapps-al-row + .vapps-hint, .vapps-al-need { margin:0 0 16px; }
.vapps-al-need.is-warn { color:var(--vps-sec-warn); }
.vapps-dlg .vapps-box-res { margin:4px 0 0; padding-top:0; border-top:0; }
.vapps-box-res strong { white-space:nowrap; }
/* Dunkel: Das Theme färbt jedes p weiß (.darkmode p; darkmode.css lädt auf Prod erst mit der Navigation, also nach dieser Datei).
   Nur die Absätze des Reiters, deren eigene Farbe dadurch verloren ginge, bekommen sie zurück – alle anderen p bleiben beim Theme. */
.darkmode .vapps p.vapps-muted, .darkmode .vapps p.vapps-hint, .darkmode .vapps p.vapps-sub, .darkmode .vapps-empty p, .darkmode .vapps-con-empty p,
.darkmode .vapps-layer p.vapps-muted, .darkmode .vapps-layer p.vapps-hint, .darkmode .vapps-layer p.vapps-dlg-sub, .darkmode .vapps-layer p.vapps-agent-note { color:var(--vps-text-muted); }
.darkmode .vapps p.vapps-note, .darkmode .vapps-layer p.vapps-note, .darkmode .vapps-pre-t p, .darkmode .vapps-layer p.vapps-dlg-lead { color:var(--vps-text-secondary); }
/* … und färbt .fas weiß: Symbole in Hinweisen bleiben gedämpft. */
.darkmode .vapps .vapps-note > i, .darkmode .vapps-layer .vapps-note > i, .darkmode .vapps .vapps-hint > i, .darkmode .vapps-layer .vapps-hint > i,
.darkmode .vapps-layer .vapps-agent-note > i, .darkmode .vapps-layer .vapps-box-list i { color:var(--vps-text-muted); }
.darkmode .vapps p.vapps-warn-text { color:var(--vps-sec-warn); }
/* Kacheln „Beliebt“ dunkel: RAM-Symbol gedämpft, Grund-Symbol in Warnfarbe, nicht passende Kachel sichtbar abgesetzt. */
.darkmode .vapps .vapps-tile-ram > i { color:var(--vps-text-muted); }
.darkmode .vapps .vapps-tile .vapps-why > i { color:var(--vps-sec-warn); }
.darkmode .vapps .vapps-tile-up > i { color:inherit; }
.darkmode .vapps .vapps-tile.is-off { background:rgba(0,0,0,0.22); }
.darkmode .vapps-range { color-scheme:dark; accent-color:var(--vps-accent-text); }
.vapps p.vapps-pad-s { font-size:var(--vps-fs-md); }
@media (max-width: 600px) {
    .vapps-notice { margin-left:14px; margin-right:14px; grid-template-columns:auto minmax(0,1fr); align-items:start; }
    .vapps-notice > i.fas { margin-top:3px; }
    .vapps-notice > .vps-btn { grid-column:2; justify-self:start; }
    .vapps-row-note { grid-column:1 / -1; margin-top:0; }
    .vapps-tools .vps-btn { flex:1 1 auto; }
    .vapps-term { height:340px; padding-left:6px; }
    .vapps-con-empty { height:170px; }
}