/* PeakNode Cockpit - Gestaltungsschicht ueber dem Theme (Entwurf A). Laeuft im hellen und dunklen Modus ueber die Theme-Variablen.
   Das linke Menue (app-sidebar) bleibt unveraendert: es wird vom Custom-CSS des Betreibers gestaltet. */

body.app { font-variant-numeric: tabular-nums; }
body.app .app-content .container { max-width: 1400px; }

/* Typografie */
body.app h1.h4, body.app h1.h3 { font-weight: 700; letter-spacing: -.01em; }
body.app .pn-sub { font-size: .82rem; color: var(--gray-600); margin-top: .15rem; }

/* Karten */
body.app .card { border: 1px solid var(--gray-200); border-radius: 14px; box-shadow: none; }
body.app .card .card { border-radius: 12px; }
body.app .card-body { padding: 1.25rem 1.35rem; }
body.app .card h2.h6 { font-size: .85rem; font-weight: 600; }
body.app .table-custom-container { border-radius: 14px; border-color: var(--gray-200); }
body.app .table-custom thead th { font-size: .74rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--gray-600); padding: .8rem 1rem; }
body.app .table-custom td { padding: .9rem 1rem; }
body.app .badge { font-weight: 600; letter-spacing: 0; padding: .32em .55em; border-radius: 6px; }
body.app .progress { background: var(--gray-100); }
body.app .btn { border-radius: 10px; font-weight: 600; }
body.app .btn-light { border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-800); }
body.app .btn-light:hover { background: var(--gray-100); }
body.app .form-control, body.app .custom-select, body.app .input-group-text { border-radius: 10px; border-color: var(--gray-200); }
body.app .alert { border-radius: 12px; }
body.app .dropdown-menu { border-radius: 12px; border-color: var(--gray-200); }

/* Cockpit-Band: Gesamtlage + Kennzahlen */
.pn-band { background: #0f1620; color: #fff; border-radius: 16px; padding: 1.3rem 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-bottom: 1.5rem; }
[data-theme-style="dark"] .pn-band { background: #141c27; border: 1px solid #22304a; }
.pn-band-status { flex: 1 1 320px; min-width: 0; display: flex; align-items: center; gap: 1rem; }
.pn-band-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 1.3rem; }
.pn-band-icon.ok { background: rgba(94,194,105,.16); color: #6bd37a; }
.pn-band-icon.warning { background: rgba(255,193,7,.16); color: #ffd04d; }
.pn-band-icon.critical { background: rgba(220,53,69,.18); color: #ff8080; }
.pn-band-icon.paused, .pn-band-icon.pending { background: rgba(255,255,255,.08); color: #aab6c5; }
.pn-band-actions { margin-left: auto; flex: 0 0 auto; }
.pn-band-actions .btn { color: #fff; }
.pn-band-status { flex: 1 1 100%; }
.pn-band-kpis { flex: 1 1 100%; }
.pn-band-slots { flex: 1 1 100%; margin-top: .2rem; }
.pn-band-slots .pn-slots { height: 18px; }
.pn-band-slots .pn-slots i.none { background: rgba(255,255,255,.12); }
.pn-band-slots-label { display: flex; justify-content: space-between; font-size: .72rem; color: #aab6c5; margin-top: .35rem; }
.pn-band-headline { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: #fff; }
.pn-band-sub { font-size: .82rem; color: #aab6c5; margin-top: .2rem; }
.pn-band-sub a { color: #d6dde6; text-decoration: underline; }
.pn-band-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem; }
.pn-kpi { display: flex; flex-direction: column; gap: .1rem; padding: .65rem .85rem; border-radius: 12px; background: rgba(255,255,255,.06); color: inherit; text-decoration: none; }
.pn-kpi:hover { background: rgba(255,255,255,.1); color: inherit; text-decoration: none; }
.pn-kpi b { font-size: 1.35rem; font-weight: 700; color: #fff; line-height: 1.15; overflow-wrap: anywhere; }
.pn-kpi span { font-size: .74rem; color: #aab6c5; line-height: 1.25; }
.pn-kpi i { font-style: normal; font-size: .74rem; font-weight: 500; white-space: normal; line-height: 1.3; }
.pn-kpi i.ok { color: #6bd37a; } .pn-kpi i.warning { color: #ffd04d; } .pn-kpi i.critical { color: #ff8080; } .pn-kpi i.muted { color: #8a96a6; }

/* Verfuegbarkeitsleiste: ein Feld je 30 Minuten, 48 Felder = 24 Stunden */
.pn-slots { display: grid; grid-template-columns: repeat(48, minmax(0, 1fr)); gap: 2px; height: 16px; min-width: 190px; }
.pn-slots i { display: block; border-radius: 2px; background: var(--gray-200); }
.pn-slots i.ok { background: var(--success); }
.pn-slots i.bad { background: var(--danger); }
.pn-slots i.mixed { background: #ffc107; }
.pn-slots i.none { background: var(--gray-200); }
.pn-slots-sm { height: 12px; min-width: 150px; gap: 1.5px; }
.pn-slots-legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .74rem; color: var(--gray-600); }
.pn-slots-legend span { white-space: nowrap; }
@media (max-width: 767.98px) { .pn-slots-days { grid-template-columns: repeat(30, minmax(0, 1fr)) !important; } .pn-slots-days i:nth-child(-n+60) { display: none; } }
.pn-slots-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }

/* Listen-Raster (Knoten, GPUs), Werte oben ausgerichtet */
.pn-row { display: grid; gap: .9rem; align-items: start; padding: .85rem 0; border-top: 1px solid var(--gray-100); line-height: 1.5; }
.pn-row-head { font-size: .74rem; color: var(--gray-600); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; border-top: 0; padding-top: 0; padding-bottom: .3rem; }
.pn-row .progress { height: 5px; margin-top: .35rem; }
.pn-value { font-weight: 600; white-space: nowrap; display: block; line-height: 1.5; }
.pn-muted { font-size: .78rem; color: var(--gray-600); }
.pn-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .4rem; vertical-align: middle; }

/* Aufgabenliste */
.pn-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.pn-todo { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--gray-100); color: inherit; text-decoration: none; }
.pn-todo:first-child { border-top: 0; padding-top: 0; }
.pn-todo:hover { color: inherit; text-decoration: none; }
.pn-todo-icon { width: 2.1rem; height: 2.1rem; border-radius: .65rem; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pn-todo-icon.critical { background: rgba(220,53,69,.12); color: #c9303e; }
.pn-todo-icon.warning { background: rgba(255,193,7,.18); color: #9a6b00; }
.pn-todo-icon.info { background: var(--gray-100); color: var(--gray-600); }
.pn-todo-action { font-size: .78rem; font-weight: 600; white-space: nowrap; padding: .4rem .7rem; border-radius: 8px; border: 1px solid var(--gray-200); color: var(--gray-800); }
.pn-ok-box { display: flex; align-items: center; gap: .6rem; padding: .75rem .9rem; border-radius: 10px; background: rgba(94,194,105,.12); color: #1f6b3d; font-size: .85rem; }
[data-theme-style="dark"] .pn-ok-box { color: #8fd9a0; }

/* Ereignisliste */
.pn-event { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem 0; border-top: 1px solid var(--gray-100); font-size: .82rem; color: inherit; text-decoration: none; }
.pn-event:first-child { border-top: 0; padding-top: 0; }
.pn-event:hover { color: inherit; text-decoration: none; }
.pn-event .pn-dot { margin-top: .35rem; flex: 0 0 auto; }
.pn-event time { margin-left: auto; color: var(--gray-500); white-space: nowrap; font-size: .76rem; padding-left: .6rem; }

/* Detailseiten: dunkler Kopf wie das Band */
body.app .card.bg-blue-900 { background: #0f1620 !important; border-radius: 16px; }
body.app[data-theme-style="dark"] .card.bg-blue-900 { background: #141c27 !important; }

@media (max-width: 1199.98px) { .pn-band-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px) {
    .pn-row { grid-template-columns: 1fr 1fr !important; }   /* Listenraster mit Inline-Spalten auf dem Handy zweispaltig */
    .pn-row > div:first-child, .pn-row > .pn-slots { grid-column: 1 / -1; }
    .pn-row-head { display: none; }
    .pn-band { padding: 1.1rem 1.2rem; }
    .pn-band-kpis { grid-template-columns: repeat(2, 1fr); }
    .pn-slots { min-width: 0; }
}

/* Bereichskarten auf dem Dashboard: eine Karte je Feature */
.pn-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .9rem; }
.pn-feature { display: flex; flex-direction: column; gap: .45rem; padding: .95rem 1.05rem; border: 1px solid var(--gray-200); border-radius: 14px; background: var(--white); color: inherit; text-decoration: none; min-height: 9.5rem; transition: border-color .15s, box-shadow .15s; }
.pn-feature:hover { color: inherit; text-decoration: none; border-color: var(--gray-400); box-shadow: 0 4px 14px rgba(15,22,32,.06); }
.pn-feature-head { display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: var(--gray-700); min-width: 0; }
.pn-feature-head i.fas { color: var(--gray-500); }
.pn-feature-headline { font-size: .95rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pn-feature-kpis { display: flex; justify-content: space-between; gap: .6rem; margin-top: .1rem; }
.pn-feature-kpi { min-width: 0; flex: 0 1 auto; }
.pn-feature-kpi b { display: block; font-size: .98rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.pn-feature-kpi span { display: block; font-size: .68rem; color: var(--gray-600); line-height: 1.2; }
.pn-feature-kpi.critical b { color: var(--danger); } .pn-feature-kpi.warning b { color: #b07a00; }
.pn-feature-foot { margin-top: auto; font-size: .78rem; font-weight: 600; color: var(--primary); }
.pn-feature-sub { font-size: .8rem; color: var(--gray-600); }
.pn-feature.unused { border-style: dashed; background: var(--gray-50); }
.pn-feature.unused .pn-feature-headline { color: var(--gray-600); font-weight: 500; }
body[data-theme-style="dark"] .pn-feature.unused { background: transparent; }

/* Mini-Grafiken in den Bereichskarten */
.pn-viz { margin: .1rem 0 .15rem; }
.pn-viz svg { display: block; width: 100%; height: 34px; }
.pn-viz-label { display: flex; justify-content: space-between; font-size: .66rem; color: var(--gray-500); margin-top: .15rem; }
.pn-viz-bar { display: grid; grid-template-columns: 3.6rem 1fr 2.6rem; align-items: center; gap: .5rem; font-size: .72rem; color: var(--gray-600); margin-bottom: .25rem; }
.pn-viz-bar .progress { height: 6px; margin: 0; }
.pn-viz-bar b { text-align: right; color: var(--gray-800); font-size: .74rem; }

/* Abschnittslabel innerhalb von Karten (PeakNode Guard) */
.pn-sect { display: flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-600); }
.pn-sect i { color: var(--gray-500); }

/* =====================================================================================================================
   NodeGuard
   ===================================================================================================================== */
/* ---------- Seite ohne Abo ---------- */
.ng-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #c9d0d8; }
.ng-dot { width: 8px; height: 8px; border-radius: 50%; background: #c9d0d8; animation: ng-pulse 2.4s infinite; }
@keyframes ng-pulse { 0% { box-shadow: 0 0 0 0 rgba(201,208,216,.5); } 70% { box-shadow: 0 0 0 9px rgba(201,208,216,0); } 100% { box-shadow: 0 0 0 0 rgba(201,208,216,0); } }
.ng-h1 { font-size: clamp(1.6rem, 3.2vw, 2.45rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; color: #fff; margin: .9rem 0 .9rem; }
.ng-h1 span { color: #c9d0d8; font-weight: 400; }
.ng-lead { font-size: .98rem; line-height: 1.55; color: #b9c4d2; max-width: 34rem; margin-bottom: 1.4rem; }
.ng-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; }
.ng-btn { background: #fff; border: 0; color: #000; font-weight: 700; padding: .7rem 1.25rem; border-radius: 10px; box-shadow: 0 10px 26px -12px rgba(255,255,255,.55); white-space: nowrap; }
.ng-btn:hover, .ng-btn:focus { background: #c9d0d8; color: #000; }
.ng-cta-price { font-size: .82rem; color: var(--gray-600); }
.ng-cta-price strong { font-size: 1.05rem; color: var(--gray-900); }
.ng-cta-dark .ng-cta-price { color: #aab6c5; }
.ng-cta-dark .ng-cta-price strong { color: #fff; }

.ng-hero3 { position: relative; overflow: hidden; text-align: center; padding: 3rem 2rem 2.6rem; border-radius: 20px; color: #fff; margin-bottom: 1.25rem; background: radial-gradient(560px 340px at 50% 0, rgba(201,208,216,.16), transparent 65%), #0b0f15; }
.ng-hero3 .ng-lead { margin-left: auto; margin-right: auto; max-width: 40rem; }
.ng-hero3 .ng-cta { justify-content: center; }
.ng-emblem { position: relative; width: 84px; height: 84px; margin: 0 auto 1.3rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; font-size: 2rem; }
.ng-emblem span { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(201,208,216,.45); animation: ng-ring 3s ease-out infinite; }
.ng-emblem span + span { animation-delay: 1.5s; }
@keyframes ng-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(2.3); opacity: 0; } }

.ng-story { background: var(--white); border: 1px solid var(--gray-200); border-radius: 18px; overflow: hidden; margin-bottom: 1.25rem; }
.ng-story-head, .ng-story-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .55fr) minmax(0, 1.35fr); }
.ng-story-col { padding: .8rem 1.1rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-700); }
.ng-story-col.ng-story-off { color: var(--gray-600); background: var(--gray-100); }
.ng-story-col.ng-story-on { color: #2f9e44; background: rgba(47,158,68,.1); }
.ng-story-col em { font-style: normal; font-size: .6rem; padding: .1rem .4rem; border-radius: 4px; background: rgba(47,158,68,.16); margin-left: .4rem; }
.ng-story-row { border-top: 1px solid var(--gray-200); font-size: .85rem; }
.ng-story-time { padding: .9rem 1.1rem; border-left: 3px solid var(--gray-900); color: var(--gray-900); font-weight: 600; }
.ng-story-cell { padding: .9rem 1.1rem; }
.ng-story-cell.ng-story-off { color: var(--gray-600); background: rgba(127,127,127,.04); }
.ng-story-cell.ng-story-on { color: var(--gray-900); background: rgba(47,158,68,.05); font-weight: 500; }
.ng-story-note { padding: .7rem 1.1rem; border-top: 1px solid var(--gray-200); font-size: .74rem; color: var(--gray-600); }
.ng-sev { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .18rem .45rem; border-radius: 4px; background: rgba(255,193,7,.2); color: #8a6100; white-space: nowrap; margin-right: .3rem; }
.ng-sev-critical { background: rgba(220,53,69,.14); color: #c0392b; }
[data-theme-style="dark"] .ng-sev { color: #ffd04d; } [data-theme-style="dark"] .ng-sev-critical { color: #ff8080; }

.ng-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 1200px) { .ng-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* acht Bereiche: 4 + 4 */
.ng-tile { background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px; padding: 1.1rem; }
.ng-tile-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--gray-900); margin-bottom: .7rem; }
.ng-tile-title { font-weight: 700; font-size: .92rem; margin-bottom: .3rem; color: var(--gray-900); }
.ng-tile p { font-size: .78rem; line-height: 1.5; color: var(--gray-600); margin: 0; }
.ng-closer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; padding: 1.6rem 1.9rem; border-radius: 18px; color: #fff; background: radial-gradient(700px 300px at 100% 0, rgba(201,208,216,.14), transparent 60%), #0b0f15; margin-top: 1.25rem; }
.ng-closer-title { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.ng-closer-sub { font-size: .85rem; color: #b9c4d2; margin-top: .25rem; max-width: 38rem; }

/* ---------- Dashboard: gemeinsame Bausteine ---------- */
.ngd-ok { --s: #2f9e44; --s-bg: rgba(47,158,68,.10); --s-text: #1f7a35; }
.ngd-info { --s: #3b76d9; --s-bg: rgba(59,118,217,.10); --s-text: #2c5fb8; }
.ngd-warning { --s: #e39a0b; --s-bg: rgba(245,166,35,.15); --s-text: #96650a; }
.ngd-critical { --s: #e5484d; --s-bg: rgba(229,72,77,.11); --s-text: #c0392b; }
.ngd-none, .ngd-pending { --s: #9aa5b4; --s-bg: rgba(127,137,150,.12); --s-text: var(--gray-600); }
[data-theme-style="dark"] .ngd-ok { --s-text: #7fd694; } [data-theme-style="dark"] .ngd-info { --s-text: #8db4f2; }
[data-theme-style="dark"] .ngd-warning { --s-text: #ffd04d; } [data-theme-style="dark"] .ngd-critical { --s-text: #ff8f8f; }

.ngd-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--s); flex: 0 0 auto; }
.ngd-critical > .ngd-dot, .ngd-dot.ngd-critical { box-shadow: 0 0 0 4px var(--s-bg); }
.ngd-tag { display: inline-flex; align-items: center; font-size: .68rem; font-weight: 700; letter-spacing: .03em; padding: .2rem .55rem; border-radius: 999px; background: var(--s-bg); color: var(--s-text); white-space: nowrap; }
.ngd-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: var(--gray-900); color: var(--white); font-size: .72rem; font-weight: 700; }

body.app .ngd-card { border-radius: 18px; }
body.app .ngd-card > .card-body { padding: 1.35rem 1.5rem; }
.ngd-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; }
.ngd-card-head h2 { font-size: .95rem; font-weight: 700; margin: 0; color: var(--gray-900); display: flex; align-items: center; gap: .45rem; }
.ngd-card-head h2 i { color: var(--gray-500); font-size: .85rem; }
.ngd-card-head .ngl-legend { margin-left: auto; }

/* Verlauf */
.ngl { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; align-items: center; height: 30px; min-width: 0; }
.ngl i { display: block; height: 60%; border-radius: 4px; background: #37b257; opacity: .9; transition: transform .12s ease, opacity .12s ease; }
.ngl i:hover { transform: scaleY(1.25); opacity: 1; }
.ngl i.none { height: 4px; border-radius: 2px; background: var(--gray-300); opacity: 1; }
.ngl i.warning { height: 86%; background: #f2a81d; opacity: 1; }
.ngl i.critical { height: 100%; background: #e5484d; opacity: 1; box-shadow: 0 0 0 2px rgba(229,72,77,.18); }
.ngl-dark i { background: #3fc267; }
.ngl-dark i.none { background: rgba(255,255,255,.16); }
.ngl-dark i.warning { background: #ffc233; }
.ngl-dark i.critical { background: #ff5f64; box-shadow: 0 0 10px rgba(255,95,100,.55); }
.ngl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; font-size: .72rem; color: var(--gray-600); }
.ngl-legend span { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.ngl-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: #37b257; }
.ngl-legend i.none { height: 4px; background: var(--gray-300); } .ngl-legend i.warning { background: #f2a81d; } .ngl-legend i.critical { background: #e5484d; }
.ngl-legend .ngl-legend-help i { width: auto; height: auto; background: none; color: var(--gray-500); }
.ngl-legend-dark { color: #9fb0c3; }
.ngl-legend-dark i.none { background: rgba(255,255,255,.25); }
.ngl-legend-dark .ngl-legend-help i { color: #9fb0c3; }
.ngd-range { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--gray-100); border: 1px solid var(--gray-200); }
.ngd-range a { padding: .22rem .75rem; border-radius: 999px; font-size: .74rem; font-weight: 600; color: var(--gray-600); text-decoration: none; white-space: nowrap; }
.ngd-range a.active { background: var(--white); color: var(--gray-900); box-shadow: 0 1px 3px rgba(15,22,32,.12); }
.ngd-range-dark { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); }
.ngd-range-dark a { color: #9fb0c3; }
.ngd-range-dark a.active { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; }

/* Hinweise */
.ngd-calm { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-radius: 14px; background: rgba(47,158,68,.08); }
.ngd-calm-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(47,158,68,.16); color: #2f9e44; flex: 0 0 auto; }
.ngd-calm strong { display: block; color: var(--gray-900); font-size: .92rem; }
.ngd-calm span { font-size: .8rem; color: var(--gray-600); }
.ngd-finding { display: flex; align-items: flex-start; gap: .85rem; padding: .85rem .95rem; border-radius: 14px; background: var(--s-bg); margin-bottom: .55rem; }
.ngd-finding:last-child { margin-bottom: 0; }
.ngd-finding-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--white); color: var(--s); flex: 0 0 auto; font-size: .85rem; }
.ngd-finding-body { flex: 1 1 auto; min-width: 0; }
.ngd-finding-text { font-size: .85rem; line-height: 1.45; color: var(--gray-900); overflow-wrap: anywhere; }
.ngd-finding-meta { display: flex; flex-wrap: wrap; gap: .15rem .9rem; font-size: .72rem; color: var(--gray-600); margin-top: .3rem; }
.ngd-finding-meta a { color: var(--gray-700); font-weight: 600; }
.ngd-finding .ngd-tag { background: var(--white); margin-top: .1rem; }

.ngd-more { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; font-size: .78rem; font-weight: 600; color: var(--gray-700); text-decoration: none; }
.ngd-more:hover { color: var(--gray-900); text-decoration: none; }
.ngd-more i { transition: transform .15s ease; }
.ngd-more:not(.collapsed) i { transform: rotate(180deg); }
.ngd-details { margin-top: 1rem; padding-top: 1.1rem; border-top: 1px dashed var(--gray-300); }
.ngd-table thead th { border-top: 0; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-600); }
.ngd-foot { margin-top: 1.5rem; padding: 1rem 1.2rem; border-radius: 14px; background: rgba(127,137,150,.07); font-size: .74rem; line-height: 1.5; color: var(--gray-600); }
.ngd-foot p { margin: 0 0 .35rem; } .ngd-foot p:last-child { margin: 0; }
.ngd-foot p:first-child { color: var(--gray-700); font-weight: 600; }

/* ---------- Leitstand ---------- */
.ngd2-hero { position: relative; overflow: hidden; padding: 1.7rem 1.9rem 1.5rem; border-radius: 22px; color: #fff; margin-bottom: 1.5rem; background: radial-gradient(700px 320px at 100% -10%, var(--glow, rgba(63,194,103,.2)), transparent 62%), #0b1119; }
.ngd2-hero.ngd-ok { --glow: rgba(63,194,103,.20); } .ngd2-hero.ngd-warning { --glow: rgba(255,194,51,.20); } .ngd2-hero.ngd-critical { --glow: rgba(229,72,77,.30); } .ngd2-hero.ngd-pending { --glow: rgba(127,137,150,.2); }
[data-theme-style="dark"] .ngd2-hero { border: 1px solid #22304a; }
.ngd2-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.ngd2-status { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.ngd2-icon { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: 0 0 auto; background: rgba(63,194,103,.16); color: #6bd37a; }
.ngd2-hero.ngd-warning .ngd2-icon { background: rgba(255,193,7,.16); color: #ffd04d; }
.ngd2-hero.ngd-critical .ngd2-icon { background: rgba(229,72,77,.2); color: #ff8f8f; }
.ngd2-hero.ngd-pending .ngd2-icon { background: rgba(255,255,255,.08); color: #aab6c5; }
.ngd2-status h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 800; letter-spacing: -.015em; margin: 0; color: #fff; line-height: 1.2; }
.ngd2-status p { margin: .2rem 0 0; font-size: .82rem; color: #aab6c5; }
.ngd2-kpis { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .6rem; margin-top: 1.4rem; }   /* acht Bereiche: eine Reihe erst ab 1600 px, sonst 4 + 4 */
@media (max-width: 1599.98px) { .ngd2-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .ngd2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } .ngd2-axis > div { flex-wrap: wrap; gap: .3rem .8rem; } .ngd2-axis .ngl-legend { order: 3; flex-basis: 100%; } .ngd2-line.ngd2-axis { grid-template-columns: minmax(0, 1fr); } .ngd2-line.ngd2-axis > span:first-child { display: none; } .ngd2-axis .ngl-legend span { white-space: normal; } }
.ngd2-kpi { padding: .85rem 1rem; border-radius: 14px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.06); min-width: 0; --s-text: #6bd37a; }
.ngd2-kpi.ngd-ok { --s: #3fc267; --s-text: #6bd37a; } .ngd2-kpi.ngd-info { --s: #6ea3f5; --s-text: #8db4f2; } .ngd2-kpi.ngd-warning { --s: #ffc233; --s-text: #ffd04d; } .ngd2-kpi.ngd-critical { --s: #ff5f64; --s-text: #ff8f8f; } .ngd2-kpi.ngd-none { --s: #6c7a8c; --s-text: #8a96a6; }
.ngd2-kpi.ngd-critical { border-color: rgba(255,95,100,.45); background: rgba(229,72,77,.12); }
.ngd2-kpi.ngd-warning { border-color: rgba(255,194,51,.3); }
.ngd2-kpi-label { font-size: .74rem; font-weight: 600; color: #c9d3df; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ngd2-kpi-label i { color: #8a96a6; }
.ngd2-kpi b { display: block; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-top: .4rem; color: #fff; }
.ngd2-kpi span { display: block; font-size: .72rem; color: #9fb0c3; line-height: 1.3; min-height: 1.9rem; }
.ngd2-kpi em { display: flex; align-items: center; gap: .4rem; font-style: normal; font-size: .72rem; font-weight: 700; color: var(--s-text); margin-top: .3rem; }
.ngd2-lines { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.08); }
.ngd2-line { display: grid; grid-template-columns: minmax(120px, 230px) minmax(0, 1fr); gap: 1rem; align-items: center; padding: .3rem 0; }
.ngd2-line-name { display: flex; align-items: center; gap: .55rem; font-size: .84rem; font-weight: 600; color: #e6ebf2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ngd2-line-name .ngd-dot.ngd-ok { --s: #3fc267; } .ngd2-line-name .ngd-dot.ngd-info { --s: #3fc267; } .ngd2-line-name .ngd-dot.ngd-warning { --s: #ffc233; } .ngd2-line-name .ngd-dot.ngd-critical { --s: #ff5f64; --s-bg: rgba(255,95,100,.25); } .ngd2-line-name .ngd-dot.ngd-none { --s: #6c7a8c; }
.ngd2-axis > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .7rem; color: #8a96a6; }
.ngd-tabs { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 999px; background: var(--gray-100); border: 1px solid var(--gray-200); list-style: none; margin: 0 0 1.1rem; }
.ngd-tabs a { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .9rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--gray-600); text-decoration: none; }
.ngd-tabs a span { font-size: .68rem; padding: .05rem .4rem; border-radius: 999px; background: var(--gray-200); color: var(--gray-700); }
.ngd-tabs a.active { background: var(--white); color: var(--gray-900); box-shadow: 0 1px 3px rgba(15,22,32,.12); }
.ngd2-node { padding: .9rem 0; border-bottom: 1px solid var(--gray-200); }
.ngd2-node:first-child { padding-top: 0; } .ngd2-node:last-child { border-bottom: 0; padding-bottom: 0; }
.ngd2-node-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; }
.ngd2-node-head a { font-size: .9rem; font-weight: 700; color: var(--gray-900); }
.ngd2-node-head a i { color: var(--gray-500); margin-right: .2rem; }
.ngd2-node-head > div { display: flex; gap: .3rem; }
.ngd2-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ngd2-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .6rem; border-radius: 9px; font-size: .78rem; font-weight: 700; background: var(--s-bg); color: var(--s-text); }
.ngd2-chip.ngd-ok { background: rgba(127,137,150,.09); color: var(--gray-700); }
.ngd2-chips .ngd-more { margin: 0 0 0 auto; }
/* Schwachstellen-Tabelle in den Server-Einzelheiten */
.ngv-table td, .ngv-table th { vertical-align: middle; }
.ngv-table .ngv-sum { display: block; max-width: min(360px, 70vw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .75; font-size: .92em; }
.ngv-band { display: inline-block; min-width: 2.6em; text-align: center; border-radius: 6px; padding: 0 .4em; font-weight: 700; font-size: .9em; background: rgba(127,137,150,.12); }
.ngv-band-critical { background: rgba(220,53,69,.14); color: #c0392b; } .ngv-band-high { background: rgba(255,170,0,.16); color: #a35e00; } .ngv-band-medium { background: rgba(110,163,245,.16); color: #2c5fb3; }
[data-theme-style="dark"] .ngv-band-critical { color: #ff8080; } [data-theme-style="dark"] .ngv-band-high { color: #ffd04d; } [data-theme-style="dark"] .ngv-band-medium { color: #8fb6ff; }

/* ---------- schmale Bildschirme ---------- */
@media (max-width: 1199.98px) {
    .ng-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .ng-tiles { grid-template-columns: minmax(0, 1fr); }
    .ng-hero3 { padding: 2.2rem 1.2rem 1.8rem; }
    .ng-story-head { display: none; }
    .ng-story-row { grid-template-columns: minmax(0, 1fr); }
    .ng-story-cell.ng-story-off { display: none; }
    .ng-closer { padding: 1.3rem 1.2rem; }
    .ngd2-hero { padding: 1.3rem 1.1rem; }
    .ngl { gap: 2px; }
    .ngl.ngl-56 { gap: 1px; }
    .ngd-card-head .ngl-legend { margin-left: 0; }
    .ngd2-chips .ngd-more { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .ng-dot, .ng-emblem span { animation: none !important; } }

/* NodeGuard-Dashboard: Feinschliff */
.ngd-count-soft { background: rgba(59,118,217,.14); color: #2c5fb8; }
.ngd-finding-text { text-wrap: pretty; }

/* NodeGuard ohne Abo: Beispielbilder des Dashboards */
.ng-shots { margin-bottom: 1.25rem; padding: 1.5rem 1.6rem 0; border-radius: 18px; background: var(--white); border: 1px solid var(--gray-200); overflow: hidden; }
.ng-shots-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.2rem; }
.ng-shots-head h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.015em; margin: 0 0 .3rem; color: var(--gray-900); }
.ng-shots-head p { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--gray-600); max-width: 46rem; }
.ng-shots-head .ngd-tabs { margin: 0; }
.ng-shot { position: relative; margin: 0; border-radius: 16px 16px 0 0; border: 1px solid var(--gray-200); border-bottom: 0; overflow: hidden; box-shadow: 0 24px 60px -30px rgba(15,22,32,.45); max-height: 640px;
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
.ng-shot img { display: block; width: 100%; height: auto; }
.ng-shot .ng-shot-dark { display: none; }
[data-theme-style="dark"] .ng-shot .ng-shot-light { display: none; }
[data-theme-style="dark"] .ng-shot .ng-shot-dark { display: block; }
.ng-shot-badge { position: absolute; top: 14px; right: 14px; z-index: 1; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; background: #0f1620; color: #fff; box-shadow: 0 4px 14px rgba(15,22,32,.35); }
[data-theme-style="dark"] .ng-shot-badge { background: #fff; color: #0f1620; }
@media (max-width: 767.98px) { .ng-shots { padding: 1.1rem 1rem 0; } .ng-shot { max-height: 360px; } }

/* NodeGuard im Menue: schimmert dunkelrot (kritisch) oder dunkelgelb (Verdacht/Warnung), solange ein Hinweis offen ist */
/* Ruhiges, nahtloses Schimmern: ein weicher heller Bereich wandert langsam durch den Knopf. Der Verlauf beginnt und endet mit
   derselben Farbe und wird genau um eine Musterbreite verschoben, deshalb gibt es beim Neustart keinen sichtbaren Sprung. */
.app-sidebar-links > li.ng-menu > a, [data-theme-style="dark"] .app-sidebar-links > li.ng-menu > a { position: relative; color: #fff; background-size: 200% 100%; background-repeat: repeat-x; animation: ng-menu-shimmer 9s linear infinite; }
.app-sidebar-links > li.ng-menu > a i { color: #fff; opacity: .95; }
.app-sidebar-links > li.ng-menu > a:hover { color: #fff; filter: brightness(1.12); }
@keyframes ng-menu-shimmer { from { background-position: 0% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .app-sidebar-links > li.ng-menu > a { animation: none; background-position: 50% 0; } }

/* NodeGuard-Zeichen: Rahmen und Knoten in der Textfarbe, Verbindungen in der Farbe von „Node“ aus dem PeakNode-Logo */
.ng-mark { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; flex: 0 0 auto; }
.ng-mark .ng-mark-line { stroke: #362f27; }
[data-theme-style="dark"] .ng-mark .ng-mark-line, .app-sidebar .ng-mark .ng-mark-line, .ng-hero3 .ng-mark .ng-mark-line { stroke: #c9d0d8; }
.ng-mark-menu { width: 1.15em; height: 1.15em; vertical-align: -.2em; }
.app-sidebar-links > li.ng-menu > a .ng-mark .ng-mark-line { stroke: #fff; opacity: .8; }
.ng-title { display: flex; align-items: center; gap: .5rem; }
.ng-title span { font-weight: 400; letter-spacing: -.02em; } .ng-title strong { font-weight: 800; }
.ng-mark-title { width: 1.45em; height: 1.45em; color: #000; }
[data-theme-style="dark"] .ng-mark-title { color: #fff; }
.ng-mark-emblem { width: 46px; height: 46px; color: #fff; }
/* Schimmern auch auf der NodeGuard-Seite selbst (aktiver Menuepunkt) */
.app-sidebar-links > li.ng-menu-critical > a, .app-sidebar-links > li.ng-menu-critical.active > a { background-color: #5c1317 !important; background-image: linear-gradient(90deg, #5c1317 0%, #6a171c 25%, #8f2329 50%, #6a171c 75%, #5c1317 100%) !important; box-shadow: 0 0 0 1px rgba(229,72,77,.4), 0 6px 18px -10px rgba(229,72,77,.6); }
.app-sidebar-links > li.ng-menu-warning > a, .app-sidebar-links > li.ng-menu-warning.active > a { background-color: #574000 !important; background-image: linear-gradient(90deg, #574000 0%, #634a00 25%, #866600 50%, #634a00 75%, #574000 100%) !important; box-shadow: 0 0 0 1px rgba(227,154,11,.4), 0 6px 18px -10px rgba(227,154,11,.5); }

/* Seite ohne Abo im dunklen Modus: Kopf und Abschluss leicht absetzen */
[data-theme-style="dark"] .ng-hero3, [data-theme-style="dark"] .ng-closer { border: 1px solid #22304a; }
.ng-mark-btn { width: 1.15em; height: 1.15em; vertical-align: -.22em; }
.ng-btn .ng-mark .ng-mark-line { stroke: #362f27 !important; }

/* Letzte Werte eines Servers, der nicht mehr meldet: sichtbar, aber zurueckgenommen */
.pn-stale .pn-gpu-value, .pn-stale .pn-fleet-value, .pn-stale .progress, .pn-stale .pn-fleet-sub.text-warning { opacity: .4; }

/* ---------- Dashboard „Puls“ ---------- */
/* Eigene Akzentfarbe: die Theme-Farbe --primary kann je Installation grau oder schwarz sein, die Kurve waere dann farblos */
.pnp, .pnp-card { --pnp-blue: #0b7cc0; } [data-theme-style="dark"] .pnp, [data-theme-style="dark"] .pnp-card { --pnp-blue: #2aa3e6; }
.pnp, .pnp-card, .pnp-guard { border-radius: 18px; font-variant-numeric: tabular-nums; }
.pnp { --pnp-tone: 55,178,87; display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 26px; padding: 24px 26px; background-image: radial-gradient(600px 300px at 0 0, rgba(var(--pnp-tone), .11), transparent 70%); animation: pnp-in .5s ease both; }
.pnp-s-warning { --pnp-tone: 242,168,29; } .pnp-s-critical { --pnp-tone: 229,72,77; }
.pnp-plain { grid-template-columns: minmax(0, 1fr); }
.pnp-left { min-width: 0; }
.pnp-lbl { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gray-600); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pnp-live { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--pnp-tone)); flex: 0 0 auto; position: relative; }
.pnp-live::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pnp-ping 2.4s ease-out infinite; }
.pnp h2 { font-size: 28px; font-weight: 800; letter-spacing: -.03em; margin: 12px 0 0; line-height: 1.15; }
.pnp-left > p { margin: 4px 0 18px; color: var(--gray-600); font-size: 13.5px; }
.pnp-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.pnp-numbers > div { font-size: 11px; color: var(--gray-600); font-weight: 600; min-width: 0; }
.pnp-n { display: block; white-space: nowrap; }
.pnp-n b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--gray-900); }
.pnp-n i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--gray-900); margin-left: 3px; }
.pnp-right { min-width: 0; }
.pnp-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 8px; }
.pnp-legend { font-size: 11px; color: var(--gray-600); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pnp-legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; margin-left: 8px; }
.pnp-lg-a { background: var(--pnp-blue); } .pnp-lg-b { background: repeating-linear-gradient(90deg, var(--gray-600) 0 4px, transparent 4px 8px); } .pnp-lg-e { background: #f2a81d; }
.pnp-chart { position: relative; height: 230px; cursor: crosshair; }
.pnp-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pnp-grid line { stroke: var(--gray-200); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pnp-line-a { fill: none; stroke: var(--pnp-blue); stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pnp-dots-a circle { fill: var(--pnp-blue); }
.pnp-line-b { fill: none; stroke: var(--gray-800); stroke-width: 1.6; stroke-dasharray: 4 4; opacity: .6; vector-effect: non-scaling-stroke; }
.pnp-mark { stroke: #f2a81d; stroke-width: 1.5; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; } .pnp-mark-critical { stroke: #e5484d; }
.pnp-reveal { transform-origin: 0 0; animation: pnp-reveal 1.4s cubic-bezier(.3,.7,.2,1) both; }
.pnp-now { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--pnp-blue); box-shadow: 0 0 0 2px var(--white); opacity: 0; animation: pnp-fade .4s ease 1.3s forwards; }
.pnp-now::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--pnp-blue); animation: pnp-ping 2.4s ease-out 1.6s infinite; }
.pnp-scale { position: absolute; left: 4px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 0 13px; font-size: 10px; color: var(--gray-500); pointer-events: none; }
.pnp-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--gray-500); pointer-events: none; }
.pnp-tip { position: absolute; top: 6px; transform: translateX(10px); background: #0b0f15; color: #fff; border-radius: 9px; padding: 7px 10px; font-size: 11.5px; line-height: 1.5; white-space: nowrap; pointer-events: none; z-index: 2; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.pnp-tip strong { display: block; } .pnp-tip-left { transform: translateX(calc(-100% - 10px)); }
.pnp-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--gray-500); margin-top: 6px; }
.pnp-last-event { font-size: 11.5px; font-weight: 600; margin-top: 8px; color: #96650a; } .pnp-ev-critical { color: #c0392b; }
.pnp-last-event a { color: inherit; text-decoration: underline; font-weight: 500; }
.pnp-chart-empty { height: 230px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--gray-600); font-size: 13px; border: 1px dashed var(--gray-300); border-radius: 12px; padding: 16px; }

.pnp-gauges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .pnp-gauges-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pnp-card { padding: 20px 22px; animation: pnp-in .5s ease both; }
.pnp-gauges > :nth-child(2) { animation-delay: .06s; } .pnp-gauges > :nth-child(3) { animation-delay: .12s; } .pnp-gauges > :nth-child(4) { animation-delay: .18s; }
a.pnp-link { color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } a.pnp-link:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15,23,42,.08); color: inherit; }
.pnp-gauge { text-align: center; }
.pnp-gauge svg { width: 100%; max-width: 190px; display: block; margin: 0 auto; }
.pnp-track { fill: none; stroke: rgba(127,137,150,.18); stroke-width: 11; stroke-linecap: round; }
.pnp-arc { fill: none; stroke: var(--pnp-c, var(--pnp-blue)); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--pnp-p)); animation: pnp-arc 1.1s cubic-bezier(.3,.7,.2,1) both; }
.pnp-ok { --pnp-c: #37b257; } .pnp-warning { --pnp-c: #f2a81d; } .pnp-critical { --pnp-c: #e5484d; } .pnp-dark { --pnp-c: var(--gray-900); }
.pnp-gv { margin-top: -50px; line-height: 1; white-space: nowrap; }
.pnp-gv b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; } .pnp-gv i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--gray-600); margin-left: 3px; }
.pnp-gl { font-size: 13px; font-weight: 700; margin-top: 16px; } .pnp-gs { font-size: 11.5px; color: var(--gray-600); margin-top: 2px; }

.pnp-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; } .pnp-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pnp-row > :nth-child(2) { animation-delay: .08s; } .pnp-row > :nth-child(3) { animation-delay: .16s; }
.pnp-h { font-size: 15px; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; } .pnp-h a { color: inherit; }
.pnp-tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pnp-tag-ok { background: rgba(47,158,68,.12); color: #1f7a35; } .pnp-tag-warning { background: rgba(245,166,35,.17); color: #96650a; } .pnp-tag-critical { background: rgba(229,72,77,.12); color: #c0392b; } .pnp-tag-info { background: rgba(59,118,217,.11); color: #2c5fb8; }
.pnp-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; background: #c5ccd6; }
.pnp-dot-ok { background: #37b257; } .pnp-dot-warning { background: #f2a81d; } .pnp-dot-critical { background: #e5484d; } .pnp-dot-info { background: #3b76d9; }
.pnp-ur { display: grid; grid-template-columns: 9px minmax(0, 1fr) 36% 66px; gap: 9px; align-items: center; font-size: 12.5px; padding: 6px 0; color: inherit; text-decoration: none; }
.pnp-ur:hover { color: inherit; text-decoration: none; } .pnp-ur:hover b { text-decoration: underline; }
.pnp-ur b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pnp-ur > span:last-child { font-size: 11px; color: var(--gray-600); white-space: nowrap; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.pnp-ur .pn-slots { min-width: 0; width: 100%; gap: 1px; height: 16px; }
.pnp-ur .pn-slots i { transform-origin: 50% 100%; animation: pnp-bar .5s ease both; animation-delay: calc(var(--i, 0) * 8ms); }
.pnp-more { font-size: 11.5px; color: var(--gray-600); margin-top: 10px; }
.pnp-calm { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: rgba(47,158,68,.08); font-size: 13px; }
.pnp-todo { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; margin-bottom: 8px; color: inherit; text-decoration: none; background: rgba(59,118,217,.09); transition: transform .15s ease; }
.pnp-todo:hover { color: inherit; text-decoration: none; transform: translateX(3px); }
.pnp-todo-warning { background: rgba(245,166,35,.13); } .pnp-todo-critical { background: rgba(229,72,77,.1); }
.pnp-todo b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.4; } .pnp-todo span span { font-size: 11.5px; color: var(--gray-600); }
.pnp-todo-icon { width: 32px; height: 32px; border-radius: 9px; background: var(--white); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #2c5fb8; }
.pnp-todo-warning .pnp-todo-icon { color: #b97a08; } .pnp-todo-critical .pnp-todo-icon { color: #c0392b; }

.pnp-guard { --ng-line: #c9d0d8; display: block; padding: 20px 22px; color: #fff; text-decoration: none; background: radial-gradient(520px 260px at 100% 0, rgba(63,194,103,.14), transparent 62%), #0b0f15; animation: pnp-in .5s ease both; transition: transform .15s ease, box-shadow .15s ease; }
.pnp-guard:hover { color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(11,15,21,.28); }
.pnp-guard-warning { background: radial-gradient(520px 260px at 100% 0, rgba(255,194,51,.17), transparent 62%), #0b0f15; } .pnp-guard-critical { background: radial-gradient(520px 260px at 100% 0, rgba(255,95,100,.2), transparent 62%), #0b0f15; }
.pnp-guard-none, .pnp-guard-info { background: radial-gradient(520px 260px at 100% 0, rgba(201,208,216,.1), transparent 62%), #0b0f15; }
.pnp-guard-head { display: flex; align-items: center; gap: 9px; font-size: 17px; letter-spacing: -.02em; color: #c9d0d8; } .pnp-guard-head strong { color: #fff; font-weight: 800; }
.pnp-guard-head .pnp-tag { margin-left: auto; background: rgba(63,194,103,.16); color: #7fd694; }
.pnp-guard-head .pnp-gtag-warning { background: rgba(255,194,51,.16); color: #ffd04d; } .pnp-guard-head .pnp-gtag-critical { background: rgba(255,95,100,.18); color: #ff8f8f; } .pnp-guard-head .pnp-gtag-none, .pnp-guard-head .pnp-gtag-info { background: rgba(255,255,255,.1); color: #c9d0d8; }
.pnp-guard-mark { width: 1.3em; height: 1.3em; color: #fff; }
.pnp-guard h3 { font-size: 19px; font-weight: 800; letter-spacing: -.015em; margin: 14px 0 4px; color: #fff; }
.pnp-guard p { margin: 0 0 14px; font-size: 12.5px; color: #aab6c5; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pnp-guard-areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.pnp-guard-areas div { position: relative; background: rgba(255,255,255,.06); border-radius: 10px; padding: 9px 3px 7px; font-size: 9.5px; color: #9fb0c3; line-height: 1.25; min-width: 0; text-align: center; }
.pnp-guard-areas b { display: block; color: #fff; font-size: 16px; font-weight: 800; } .pnp-guard-areas span:last-child { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pnp-guard-areas .pnp-dot { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; background: rgba(255,255,255,.25); }
.pnp-guard-areas .pnp-dot-ok { background: #3fc267; } .pnp-guard-areas .pnp-dot-warning { background: #ffc233; } .pnp-guard-areas .pnp-dot-critical { background: #ff5f64; } .pnp-guard-areas .pnp-dot-info { background: #6ea3f5; }
.pnp-guard .ngl { height: 22px; gap: 2px; } .pnp-guard .ngl i { transform-origin: 50% 50%; animation: pnp-bar .5s ease both; }
.pnp-guard-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: #8a96a6; margin-top: 4px; }
.pnp-guard-btn { display: inline-block; margin-top: 14px; background: #fff; color: #000; font-weight: 700; font-size: 13px; padding: 9px 15px; border-radius: 10px; }

.pnp-todo-wrap { position: relative; margin-bottom: 8px; } .pnp-todo-wrap .pnp-todo { margin-bottom: 0; } .pnp-todo-mutable { padding-right: 48px; }
.pnp-mute { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); margin: 0; }
.pnp-mute button { width: 30px; height: 30px; border-radius: 9px; border: 0; background: transparent; color: var(--gray-600); opacity: .55; transition: opacity .15s ease, background .15s ease; }
.pnp-mute button:hover, .pnp-mute button:focus-visible { opacity: 1; background: var(--white); }
.pnp-muted { margin-top: 12px; font-size: 12px; color: var(--gray-600); } .pnp-muted summary { cursor: pointer; font-weight: 600; } .pnp-muted p { margin: 8px 0 0; font-size: 11.5px; }
.pnp-muted-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--gray-200); } .pnp-muted-row a { color: inherit; flex: 1 1 auto; } .pnp-muted-row a span:last-child { font-size: 11px; }
[data-theme-style="dark"] .pnp-mute button:hover { background: rgba(255,255,255,.1); } [data-theme-style="dark"] .pnp-muted-row { border-color: #22304a; }

@keyframes pnp-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pnp-ping { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
@keyframes pnp-reveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pnp-fade { to { opacity: 1; } }
@keyframes pnp-arc { from { stroke-dashoffset: 100; } }
@keyframes pnp-bar { from { transform: scaleY(.2); opacity: 0; } }

[data-theme-style="dark"] .pnp, [data-theme-style="dark"] .pnp-card { background-color: #141c27; border-color: #22304a; }
[data-theme-style="dark"] .pnp-n b, [data-theme-style="dark"] .pnp-n i { color: #fff; }
[data-theme-style="dark"] .pnp-grid line { stroke: rgba(255,255,255,.08); }
[data-theme-style="dark"] .pnp-line-b { stroke: #c9d0d8; } [data-theme-style="dark"] .pnp-dark { --pnp-c: #e6ebf2; }
[data-theme-style="dark"] .pnp-now { box-shadow: 0 0 0 2px #141c27; }
[data-theme-style="dark"] .pnp-tip { background: #fff; color: #0b0f15; }
[data-theme-style="dark"] .pnp-tag-ok { color: #7fd694; } [data-theme-style="dark"] .pnp-tag-warning, [data-theme-style="dark"] .pnp-last-event { color: #ffd04d; } [data-theme-style="dark"] .pnp-tag-critical, [data-theme-style="dark"] .pnp-ev-critical { color: #ff8f8f; } [data-theme-style="dark"] .pnp-tag-info { color: #8db4f2; }
[data-theme-style="dark"] .pnp-todo-icon { background: rgba(255,255,255,.08); color: #8db4f2; } [data-theme-style="dark"] .pnp-todo-warning .pnp-todo-icon { color: #ffd04d; } [data-theme-style="dark"] .pnp-todo-critical .pnp-todo-icon { color: #ff8f8f; }
[data-theme-style="dark"] .pnp-guard { background-color: #05080c; box-shadow: 0 0 0 1px #22304a; }

@media (max-width: 1199.98px) { .pnp { grid-template-columns: minmax(0, 1fr); } .pnp-numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pnp-row, .pnp-row-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) { .pnp { padding: 18px 16px; } .pnp h2 { font-size: 23px; } .pnp-numbers, .pnp-gauges, .pnp-gauges-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pnp-gauges { gap: 12px; } .pnp-card { padding: 16px; } .pnp-chart, .pnp-chart-empty { height: 180px; } .pnp-gv b { font-size: 24px; } .pnp-gv { margin-top: -42px; } }
@media (prefers-reduced-motion: reduce) { .pnp, .pnp-card, .pnp-guard, .pnp-reveal, .pnp-arc, .pnp-now, .pnp-live::after, .pnp-now::after, .pnp-ur .pn-slots i, .pnp-guard .ngl i { animation: none !important; } .pnp-now { opacity: 1; } }

/* ---------- NodeGuard Anomalieerkennung: Uebersicht (Dashboard und NodeGuard-Seite) ---------- */
.nga-head { display: flex; justify-content: space-between; align-items: flex-end; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.nga-title { font-weight: 700; font-size: .95rem; } .nga-sub { font-size: .78rem; color: var(--gray-600); margin-top: .1rem; }
.nga-legend { display: flex; gap: .9rem; font-size: .74rem; color: var(--gray-600); flex-wrap: wrap; }
.nga-legend i { display: inline-block; vertical-align: middle; margin-right: .3rem; }
.nga-lg-band { width: 14px; height: 9px; border-radius: 2px; background: rgba(11,124,192,.18); } .nga-lg-line { width: 14px; height: 2px; background: #0b7cc0; } .nga-lg-dot { width: 9px; height: 9px; border-radius: 50%; background: #f2a81d; }
.nga-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.nga-compact .nga-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.nga-node { display: block; padding: .6rem .7rem .5rem; border-radius: 12px; border: 1px solid var(--gray-200); color: inherit; text-decoration: none; background: var(--white); transition: transform .15s ease, box-shadow .15s ease; }
.nga-node:hover { color: inherit; text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15,23,42,.08); }
.nga-node-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.nga-node-name { font-weight: 600; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nga-node-metric { flex: 0 0 auto; margin-left: auto; font-size: .62rem; font-weight: 700; letter-spacing: .04em; color: var(--gray-500); border: 1px solid var(--gray-300); border-radius: 4px; padding: 0 .3rem; line-height: 1.3; }
.nga-chip { font-size: .68rem; font-weight: 700; padding: .12rem .45rem; border-radius: 999px; white-space: nowrap; background: rgba(47,158,68,.12); color: #1f7a35; }
.nga-learning .nga-chip { background: rgba(59,118,217,.11); color: #2c5fb8; } .nga-stale .nga-chip, .nga-nodata .nga-chip { background: rgba(127,137,150,.13); color: var(--gray-600); } .nga-stale .nga-line { stroke: var(--gray-400); } .nga-stale .nga-now { fill: var(--gray-400); } .nga-warning .nga-chip { background: rgba(245,166,35,.17); color: #96650a; }
.nga-node > svg { width: 100%; height: 64px; display: block; overflow: visible; }
.nga-compact .nga-node > svg { height: 46px; }
.nga-grid-line { stroke: var(--gray-200); stroke-width: 1; vector-effect: non-scaling-stroke; }
.nga-band { fill: rgba(11,124,192,.14); } .nga-median { fill: none; stroke: rgba(11,124,192,.45); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.nga-line { fill: none; stroke: #0b7cc0; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .nga-line-dot { fill: #0b7cc0; }
.nga-now { fill: #0b7cc0; stroke: var(--white); stroke-width: 2; } .nga-now-warning { fill: #f2a81d; }
.nga-warning .nga-line { stroke: #d9931a; } .nga-learning .nga-line { stroke: var(--gray-500); } .nga-learning .nga-now { fill: var(--gray-500); }
.nga-axis { display: flex; justify-content: space-between; font-size: .66rem; color: var(--gray-500); margin-top: .2rem; }
.nga-scale { font-size: .62rem; color: var(--gray-500); text-align: right; margin-top: .1rem; } .nga-dark .nga-scale { color: #8a96a6; }
.nga-active { margin-top: .5rem; font-size: .76rem; color: #96650a; } .nga-active b { font-weight: 700; } .nga-active span { color: var(--gray-600); }
.nga-empty { font-size: .85rem; color: var(--gray-600); margin: 0; }
.pnp-mark-small { width: 1.1em; height: 1.1em; vertical-align: -.15em; }
[data-theme-style="dark"] .nga-node, .nga-dark .nga-node { background: #0f1620; border-color: #22304a; } [data-theme-style="dark"] .nga-now, .nga-dark .nga-now { stroke: #0f1620; }
[data-theme-style="dark"] .nga-lg-band, [data-theme-style="dark"] .nga-band, .nga-dark .nga-lg-band, .nga-dark .nga-band { background: rgba(42,163,230,.22); fill: rgba(42,163,230,.22); }
[data-theme-style="dark"] .nga-line, [data-theme-style="dark"] .nga-lg-line, .nga-dark .nga-line, .nga-dark .nga-lg-line { stroke: #2aa3e6; background: #2aa3e6; } [data-theme-style="dark"] .nga-now, [data-theme-style="dark"] .nga-line-dot, .nga-dark .nga-now, .nga-dark .nga-line-dot { fill: #2aa3e6; }
[data-theme-style="dark"] .nga-warning .nga-line, .nga-dark .nga-warning .nga-line { stroke: #f2a81d; } [data-theme-style="dark"] .nga-now-warning, [data-theme-style="dark"] .nga-warning .nga-line-dot, .nga-dark .nga-now-warning, .nga-dark .nga-warning .nga-line-dot { fill: #ffd04d; }
[data-theme-style="dark"] .nga-stale .nga-line, .nga-dark .nga-stale .nga-line { stroke: #55657a; } [data-theme-style="dark"] .nga-stale .nga-now, .nga-dark .nga-stale .nga-now { fill: #55657a; }
[data-theme-style="dark"] .nga-chip, .nga-dark .nga-chip { background: rgba(63,194,103,.16); color: #7fd694; } [data-theme-style="dark"] .nga-learning .nga-chip, .nga-dark .nga-learning .nga-chip { background: rgba(59,118,217,.22); color: #8db4f2; } [data-theme-style="dark"] .nga-warning .nga-chip, .nga-dark .nga-warning .nga-chip { background: rgba(255,194,51,.16); color: #ffd04d; } [data-theme-style="dark"] .nga-stale .nga-chip, [data-theme-style="dark"] .nga-nodata .nga-chip, .nga-dark .nga-stale .nga-chip, .nga-dark .nga-nodata .nga-chip { background: rgba(255,255,255,.08); color: #aab6c5; } [data-theme-style="dark"] .nga-active, .nga-dark .nga-active { color: #ffd04d; }
.nga-dark .nga-sub, .nga-dark .nga-legend, .nga-dark .nga-axis, .nga-dark .nga-active span, .nga-dark .nga-empty { color: #8a96a6; } .nga-dark .nga-node-name { color: #fff; } .nga-dark .nga-node-metric { color: #aab6c5; border-color: #2c3a4f; } .nga-dark .nga-grid-line { stroke: rgba(255,255,255,.08); } .nga-dark .nga-median { stroke: rgba(201,208,216,.45); } .nga-dark .nga-node:hover { box-shadow: 0 10px 26px rgba(0,0,0,.45); }
.pnp-card-guard { background: radial-gradient(520px 260px at 100% 0, rgba(63,194,103,.1), transparent 62%), #0b0f15; border-color: #1c2531; color: #fff; } .pnp-card-guard .pnp-h a { color: #fff; } .pnp-card-guard .pnp-tag-ok { background: rgba(63,194,103,.16); color: #7fd694; } .pnp-card-guard .pnp-tag-warning { background: rgba(255,194,51,.16); color: #ffd04d; } .pnp-card-guard .pnp-tag-info { background: rgba(59,118,217,.22); color: #8db4f2; }
@media (max-width: 1199.98px) { .nga-compact .nga-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .nga-grid, .nga-compact .nga-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .nga-grid, .nga-compact .nga-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Veranschaulichung der Anomalieerkennung (Startseite, NodeGuard-Verkaufsseite) ---------- */
.ng-anomaly { margin: 2.5rem 0 1.5rem; padding: 2rem 2rem 1.8rem; border-radius: 22px; background: #0b0f15; color: #fff; }
.ng-anomaly h2 { color: #fff; font-size: 1.6rem; letter-spacing: -.02em; line-height: 1.2; margin: .6rem 0 .7rem; } .ng-anomaly > .row > div > p { color: #aab6c5; line-height: 1.6; }
.ng-anomaly-points { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .7rem; } .ng-anomaly-points li { display: flex; gap: .8rem; align-items: flex-start; }
.ng-anomaly-points li > i { box-sizing: border-box; width: 2.1rem; height: 2.1rem; padding: .6rem; border-radius: .6rem; background: rgba(255,255,255,.08); color: #fff; flex: 0 0 auto; }
.ng-anomaly-points strong { display: block; font-size: .95rem; color: #fff; line-height: 1.3; } .ng-anomaly-points span { display: block; font-size: .84rem; color: #9fb0c3; line-height: 1.45; }
.ng-anomaly-note { font-size: .78rem; color: #7f8ea3; margin: 0; }
@media (max-width: 767.98px) { .ng-anomaly { padding: 1.4rem 1.1rem; } }