/* =====================================================================
 * venocix-Schicht für Lagom 2, Style „default“. Lädt includes/hooks/vnx_lagom2_theme.php über
 * ClientAreaHeadOutput nach Lagoms CSS, mit dem Änderungsdatum der Datei als Version.
 * (Früher core/styles/default/assets/css/theme-custom.css: Lagom hängt dort nur Lagom-Version und
 * Cache-Key aus der DB an, Änderungen kamen nach einem Deploy erst nach Erneuern des Keys an.)
 *
 * Gestaltung nach dem Mockup „Neue Funktionen“ (Kundencenter-Kit, Kopfleiste C):
 * flach, einfarbige Flächen, 1-px-Rand, keine Verläufe und keine Leucht-Schatten,
 * Grün #a3d133 nur als Akzent. Der Darkmode ist erzwungen (RS Themes: Force Dark Mode),
 * deshalb gelten die Werte unter html.lagom-dark-mode. Die Werte stammen aus
 * kit-frame.css und home-neu.css des Mockups und aus den --vnx-*-Token in
 * templates/lagom2/assets/css/venocix-portal.css.
 *
 * Nur Lagom-Variablen und schmale Regeln. Keine Lagom-Datei wird geändert.
 * ===================================================================== */

html.lagom-dark-mode {
    /* Grautöne: Text hell auf dunklen Flächen */
    --dark-mode-gray-base:       #cccccc; /* Fließtext */
    --dark-mode-gray-darker:     #eeeeee; /* Überschriften */
    --dark-mode-gray-lighter:    #999999; /* gedämpft */
    --dark-mode-gray-lighter-2:  #888888;
    --dark-mode-gray-lighter-3:  #333333; /* Linien */
    --dark-mode-gray-lighter-4:  #2b2b2b;
    --dark-mode-gray-faded:      #2a2a2a; /* weiche Fläche, Kopf von Blöcken */
    --dark-mode-gray-gradient-start: #1e1e1e;
    --dark-mode-gray-gradient-end:   #1e1e1e;

    /* Markenfarbe: Grün statt Lagom-Blau */
    --dark-mode-brand-primary:           #a3d133;
    --dark-mode-brand-primary-lighter:   #b4dd55;
    --dark-mode-brand-primary-lighter-2: #3b4a1f;
    --dark-mode-brand-primary-lighter-3: #2e3a19;
    --dark-mode-brand-primary-lighter-4: #263013;
    --dark-mode-brand-primary-darker:    #8cb82b;
    --dark-mode-brand-primary-gradient-start: #a3d133;
    --dark-mode-brand-primary-gradient-end:   #a3d133;

    /* Zweitfarbe neutral statt dunklem Grün #557f12 (Entscheidung Tim 07.11.2026) */
    --dark-mode-brand-secondary:           #3a3d40;
    --dark-mode-brand-secondary-lighter:   #55595e;
    --dark-mode-brand-secondary-lighter-2: #2f3235;
    --dark-mode-brand-secondary-lighter-3: #2a2d30;
    --dark-mode-brand-secondary-darker:    #46494d;
    --dark-mode-brand-secondary-gradient-start: #3a3d40;
    --dark-mode-brand-secondary-gradient-end:   #3a3d40;

    --dark-mode-brand-info:         #6cb4ec;
    --dark-mode-brand-info-lighter: #8fc6f1;
    --dark-mode-brand-info-lighter-2: #2f3a44; /* Info-Flächen neutral statt Lagom-Blau */
    --dark-mode-brand-info-lighter-3: #262c32;
    --dark-mode-brand-info-lighter-4: #22272b;
    --dark-mode-brand-info-darker:  #3d8fd0;

    /* Flächen (Mockup: Seite #1e1e1e, Leiste #161616, Karte #242424, Linie #333) */
    --dark-mode-body-bg:      #1e1e1e;
    --body-bg:                #1e1e1e;
    --ui-block-bg:            #242424;
    --ui-block-border-color:  #333333;
    --ui-block-header-bg:     #2a2a2a;
    --ui-block-shadow:        none;
    --ui-block-shadow-lg:     none;
    --ui-block-shadow-xlg:    none;
    --dropdown-bg:            #242424;
    --dropdown-collapse-bg:   #1c1c1c;
    --tile-bg-color:          #242424;
    --panel-bg:               #242424;
    --modal-backdrop-bg:      rgba(0, 0, 0, .6);

    /* Kopf- und Fußleiste */
    --app-nav-top-bg:            #161616;
    --app-nav-navbar-bg:         #161616;
    --app-nav-top-border-bottom: 1px solid #333333;
    --mob-app-nav-header-bg:     #161616;
    --main-footer-bg:            #161616;

    /* Knöpfe: dunkle Schrift auf Grün (Mockup: --h-on-lime) */
    --btn-primary-color:       #17200b;
    --btn-primary-hover-color: #17200b;

    /* Verläufe von Bannern und Kopfbereichen flach halten */
    --main-header-banner-bg: #191919;
}

/* Rundungen wie im Mockup: Karten und Knöpfe 8 px */
:root {
    --border-radius-base: 8px;
    --border-radius-lg:   8px;
    --border-radius-xlg:  14px;
}

/* Dashboard (Seitenvariante clientareahome/venocix): Die Begrüßung ist die Überschrift wie im Mockup
   „kundenbereich-neu“, Lagoms Seitenkopf mit „Mein Dashboard“ und Brotkrumen entfällt. */
body.page-clientareahome .main-header { display: none; }

/* Verlängerung auf der Dienst-Detailseite (assets/js/vnx-renew.js, Addon autorenewals) */
.vnx-renew { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ui-block-border-color); }
.vnx-renew-h { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--text-heading-color); }
.vnx-renew-switch { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; margin: 0 0 12px; cursor: pointer; font-weight: 500; }
.vnx-renew-switch input { width: 18px; height: 18px; accent-color: #a3d133; margin: 0; }
.vnx-renew-switch small { grid-column: 2; font-weight: 400; color: var(--text-body-color); }
.vnx-renew-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vnx-renew-note { margin: 12px 0 0; font-size: 13px; color: var(--text-body-color); }

/* Rechnung (viewinvoice.tpl): Lagoms Titelzeile bricht nicht um. Bei langer Rechnungsnummer lief das
   Status-Label in die Spalte daneben. Label darf in die nächste Zeile, wird nie gestaucht. */
.invoice-title { flex-wrap: wrap; align-items: center; row-gap: 8px; overflow-wrap: anywhere; }
.invoice-title .label { flex-shrink: 0; }

/* Bezahlseite mit PayPal Payments: Das Modul färbt den Hinweis nach der Freigabe fest grün
   (payment.css, color: green), auf dunklem Grund kaum lesbar. Hier als Hinweiskasten; der
   Bezahlen-Knopf wird danach hervorgehoben (Klasse aus assets/js/vnx-invoice-payment.js). */
.paypal_ppcpv-payment-form .approval-instructions,
#paypal_ppcpv_input_container .approval-instructions {
    margin-top: 12px;
    padding: 12px 16px;
    border: 1px solid rgba(163, 209, 51, .35);
    border-radius: 8px;
    background: rgba(163, 209, 51, .1);
    color: var(--text-heading-color);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
}
.btn-checkout.vnx-pay-ready {
    outline: 2px solid var(--text-heading-color);
    outline-offset: 3px;
}

/* Logo je Anzeigemodus (includes/common/overwrites/logo.tpl gibt beide aus) */
.logo .vnx-logo-dunkel { display: none; }
html.lagom-dark-mode .logo .vnx-logo-hell { display: none; }
html.lagom-dark-mode .logo .vnx-logo-dunkel { display: inline-block; }

/* Audit B1: Flächen in CI-Grün #a3d133 tragen schwarze Schrift (weiß hätte nur 1,79:1) */
.panel-summary-primary, .panel-summary-primary *, .panel-sidebar-primary, .panel-sidebar-primary *,
.product-icon, .product-icon * { --primary-block-text-color: #000; }
.panel-summary-primary, .panel-sidebar-primary, .product-icon { color: #000 !important; }
.panel-summary-primary :is(h1, h2, h3, h4, h5, h6, p, span, label, a, small, b, strong, .price, .price-amount),
.panel-sidebar-primary :is(h1, h2, h3, h4, h5, h6, p, span, label, a, small, b, strong),
.product-icon :is(i, svg, span) { color: #000 !important; fill: #000; }

/* ===== CI-Akzent Variante A (Entscheidung Tim 07.11.2026), gemeinsam für Lagom-Seiten, Kundencenter und Bestellstrecke =====
   Hellmodus: Lagom-Blau durch CI-Grün ersetzen; Text und Links bleiben dunkel (Grün als Text nur im Dunkelmodus). */
html:not(.lagom-dark-mode) {
    --brand-primary:                #a3d133;
    --brand-primary-lighter:        #b4dd55;
    --brand-primary-lighter-2:      #dcefb0;
    --brand-primary-lighter-3:      #eef7d9;
    --brand-primary-lighter-4:      #f6fbec;
    --brand-primary-darker:         #8cb82b;
    --brand-primary-gradient-start: #a3d133;
    --brand-primary-gradient-end:   #a3d133;
    --text-primary-color:           #1f2328;
    --link-color:                   #1f2328;
    --link-hover-color:             #000000;
    --btn-primary-color:            #000000;
    --btn-primary-hover-color:      #000000;
}
/* 2: aktiver Menüpunkt im Lagom-Menü (Unterstrich in beiden Modi, Text grün nur dunkel) */
.app-nav .navbar-nav > li.active > a, .app-nav .navbar-nav > li.active > .dropdown-toggle { box-shadow: inset 0 -3px 0 #a3d133; }
html.lagom-dark-mode .app-nav .navbar-nav > li.active > a { color: #a3d133; }
/* 4: Fokus */
html.lagom-dark-mode :is(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):not(#ccm-widget *):focus-visible { outline: 2px solid #a3d133; outline-offset: 2px; }
html:not(.lagom-dark-mode) :is(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):not(#ccm-widget *):focus-visible { outline: 2px solid #1f2328; outline-offset: 2px; }
/* 5: Badges „Empfohlen“ u. ä. */
.label-primary, .badge-primary, .label.label-primary, .package-featured .label { background: #a3d133 !important; color: #000 !important; }
/* 1: Hauptknöpfe in beiden Modi mit schwarzer Schrift */
.btn-primary, .btn-primary:hover, .btn-primary:focus { color: #000 !important; }
/* Login/Registrierung: ruhiger Seitengrund statt Lagom-Farbfläche (hell sonst Blau, dunkel sonst Dunkelgrün) */
.page-login-primary .main-body, .page-login-secondary .main-body { background: var(--body-bg) !important; }
.page-login-primary .main-body-bottom-illustration > div:before, .page-login-secondary .main-body-bottom-illustration > div:before { background: none !important; }

/* Audit NB2 (07.11.2026): Bestellknopf in der grünen Zusammenfassung. Die B1-Regel färbt sonst auch die Knopfschrift
   schwarz auf dunklem Knopf (1,66:1). Dunkel: weiße Schrift auf dem dunklen Knopf. Hell: blasse Grün-Flächen mit dunkler Schrift. */
html.lagom-dark-mode .panel-summary-primary .btn-checkout,
html.lagom-dark-mode .panel-summary-primary .btn-checkout * { color: #fff !important; }
html:not(.lagom-dark-mode) :is(.btn-primary-faded, .badge-primary-faded),
html:not(.lagom-dark-mode) .btn-primary-faded * { color: #1f2328 !important; }
/* Audit NB4: Grün als Text nur im Dunkelmodus; nie Weiß auf Grün */
html:not(.lagom-dark-mode) :is(.breadcrumb > li.active, .list-group-item-heading, .pagination .page-link, .menu-item.active .menu-item-content) { color: #1f2328 !important; }
.product-icon .product-name, .product-icon .product-name * { color: #000 !important; }
.panel-summary-primary .list-item.faded, .panel-summary-primary .list-item.faded * { color: rgba(0, 0, 0, .72) !important; }

/* NS2 (07.11.2026): Lagom-Blau (Zweitfarbe #0944ce) im Hellmodus raus – FAQ-Suchbox, Gutschein-Box, 404-Verlauf,
   Regler-Blase. Zweitfarbe hell = Graphit #1f2328 mit weißer Schrift (15,8:1), blasse Stufen neutral grau. */
html:not(.lagom-dark-mode) {
    --brand-secondary:                #1f2328;
    --brand-secondary-lighter:        #3a3f45;
    --brand-secondary-lighter-2:      #e9ecef;
    --brand-secondary-lighter-3:      #f1f3f5;
    --brand-secondary-lighter-4:      #f7f8f9;
    --brand-secondary-darker:         #111417;
    --brand-secondary-gradient-start: #1f2328;
    --brand-secondary-gradient-end:   #1f2328;
}
/* S1: Fokus auf allen Seiten sichtbar, auch wo Lagom outline:0 setzt (Formulare, Login, Checkout, Kopfleiste) */
/* nur bedienbare Elemente; Cookie-Banner (CCM19, bekommt den Fokus programmatisch) ausgenommen */
html.lagom-dark-mode :is(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):not(#ccm-widget *):focus-visible { outline: 2px solid #a3d133 !important; outline-offset: 2px !important; }
html:not(.lagom-dark-mode) :is(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):not(#ccm-widget *):focus-visible { outline: 2px solid #1f2328 !important; outline-offset: 2px !important; }
/* Konfigurator: Beschreibung der CPU-Kacheln grau statt Linkfarbe (dunkel sonst ganz grün) */
.vnx-cpu-opt, .vnx-cpu-opt :is(span, ul, li) { color: var(--text-body-color, #ccc) !important; }
.vnx-cpu-opt b { color: var(--text-heading-color, #eee) !important; }
.vnx-cpu-opt .vnx-cpu-new { color: #000 !important; }

/* Grüne Knöpfe im Kundencenter: Schrift und Icon immer schwarz, auch wo die Linkfarbe im Dunkelmodus (Grün) durchschlägt
   (z. B. „Jetzt bezahlen“ auf dem Dashboard, a.vnx-btn-primary). */
.vnx-btn-primary, .vnx-btn-primary:hover, .vnx-btn-primary:focus, .vnx-btn-primary :is(i, svg, span, b),
.vps-btn-primary, .vps-btn-primary:hover, .vps-btn-primary:focus, .vps-btn-primary :is(i, svg, span, b) { color: #000 !important; }
.vnx-btn-primary svg, .vps-btn-primary svg { stroke: currentColor; }