/* n'guard Threat Intelligence: gemeinsames Stylesheet. Alle Regeln unter .ng-ti gescoped. */ .ng-ti, .ng-ti *{box-sizing:border-box;margin:0;padding:0;border:0;list-style:none;background:none;text-decoration:none;-webkit-font-smoothing:antialiased} .ng-ti{ --dbg:#050910; --dbg2:#081020; --lbg:#F5F8FC; --lcard:#FFFFFF; --lline:#DCE6F2; --line:#15223A; --line2:#1F3355; --brand:#1395D8; --glow:#3FC1FF; --deepblue:#0B5E8C; --dtext:#EAF2FB; --dsec:#9AB0C9; --dmut:#5F7590; --ltext:#0D1B2E; --lsec:#4E617A; --lmut:#7C8DA3; --alert:#FF4D5E; --ok:#2ED573; --warn:#F5A524; --orange:#FF7850; --f:"Inter",system-ui,sans-serif; --m:"JetBrains Mono",ui-monospace,monospace; display:block;font-family:var(--f);background:var(--dbg);color:var(--dtext);line-height:1.65;font-size:16px;overflow-x:hidden; } .ng-ti h1,.ng-ti h2,.ng-ti h3,.ng-ti h4{font-weight:680;line-height:1.15;letter-spacing:-0.02em;color:inherit} .ng-ti a{color:inherit} .ng-ti button{font:inherit;color:inherit;background:none;cursor:pointer} .ng-ti :focus-visible{outline:2px solid var(--glow);outline-offset:2px} .ng-ti [hidden]{display:none !important} .ng-ti .wrap{max-width:1180px;margin:0 auto;padding:0 28px} .ng-ti .eyebrow{font-size:12.5px;font-weight:500;color:var(--glow);display:inline-flex;align-items:center;gap:9px} .ng-ti .eyebrow::before{content:"";width:24px;height:1px;background:var(--brand)} .ng-ti .light .eyebrow{color:var(--deepblue)} .ng-ti section.pad{padding:72px 0} .ng-ti .light{background:var(--lbg);color:var(--ltext)} .ng-ti .dark{background:var(--dbg);color:var(--dtext)} .ng-ti .sec-head{max-width:680px;margin-bottom:34px} .ng-ti .sec-head h2{font-size:clamp(24px,2.6vw,32px);margin-top:14px} .ng-ti .sec-head p{margin-top:12px;font-size:15px} .ng-ti .light .sec-head p{color:var(--lsec)} .ng-ti .dark .sec-head p{color:var(--dsec)} .ng-ti .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:500;font-size:14.5px;padding:13px 24px;border-radius:11px;border:1px solid transparent;cursor:pointer;transition:all .2s;text-decoration:none} .ng-ti .btn-primary{background:var(--brand);color:#04121C} .ng-ti .btn-primary:hover{background:var(--glow)} .ng-ti .btn-primary:disabled{opacity:.6;cursor:progress} .ng-ti .btn-ghost{background:transparent;color:var(--dtext);border:1px solid var(--line2)} .ng-ti .btn-ghost:hover{border-color:var(--glow);color:var(--glow)} .ng-ti .light .btn-ghost{color:var(--ltext);border-color:#C4D4E6} .ng-ti .light .btn-ghost:hover{color:var(--deepblue);border-color:var(--brand)} /* Abschlusskarte ist immer dunkel, auch in hellen Sektionen */ .ng-ti .finalcard .btn-ghost{color:var(--dtext);border-color:var(--line2)} .ng-ti .finalcard .btn-ghost:hover{color:var(--glow);border-color:var(--glow)} .ng-ti .btn-sm{padding:8px 14px;font-size:12.5px;border-radius:9px} .ng-ti .mono{font-family:var(--m)} /* Werkzeugleiste */ .ng-ti .toolnav{border-bottom:1px solid var(--line);background:var(--dbg2)} .ng-ti .toolnav .wrap{display:flex;align-items:center;gap:6px;overflow-x:auto;padding-top:10px;padding-bottom:10px;scrollbar-width:none} .ng-ti .toolnav .wrap::-webkit-scrollbar{display:none} .ng-ti .toolnav .tnl{font-size:11px;font-weight:600;color:var(--dmut);white-space:nowrap;margin-right:8px;letter-spacing:.02em} .ng-ti .toolnav a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:13px;font-weight:500;color:var(--dsec);padding:7px 13px;border-radius:99px;border:1px solid transparent;transition:all .15s} .ng-ti .toolnav a:hover{color:#fff;border-color:var(--line2)} .ng-ti .toolnav a.on{color:var(--glow);background:rgba(63,193,255,.08);border-color:rgba(63,193,255,.3)} .ng-ti .toolnav a .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7} .ng-ti .toolnav .free{margin-left:auto;font-family:var(--m);font-size:10.5px;color:var(--dmut);white-space:nowrap} /* Hero */ .ng-ti .chero{position:relative;overflow:hidden;padding:96px 0 60px;text-align:center} .ng-ti .chero .hbg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(760px 460px at 50% 0%, rgba(19,149,216,.16), transparent 62%);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)} .ng-ti .chero .wrap{position:relative;z-index:2;max-width:820px} .ng-ti .chero h1{font-size:clamp(30px,3.8vw,46px)} .ng-ti .chero p.lead{margin:16px auto 0;font-size:15.5px;color:var(--dsec);max-width:620px} .ng-ti .poweredby{margin-top:26px;font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dmut)} .ng-ti .stamp{margin-top:8px;font-size:11.5px;color:var(--dmut)} .ng-ti .herostats{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;margin-top:30px} .ng-ti .herostats div{text-align:center} .ng-ti .herostats b{display:block;font-family:var(--m);font-size:26px;font-weight:700;color:#fff;line-height:1} .ng-ti .herostats span{display:block;font-size:11.5px;color:var(--dsec);margin-top:6px} .ng-ti .herostats b.up{color:var(--alert)} .ng-ti .herostats b.down{color:var(--ok)} /* Eingabe (IOC) */ .ng-ti .scanform{display:flex;gap:10px;max-width:680px;margin:30px auto 0;padding:8px;background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:16px;transition:border-color .2s,box-shadow .2s} .ng-ti .scanform:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(19,149,216,.15)} .ng-ti .scanform input{flex:1;min-width:0;font-family:var(--m);font-size:14.5px;color:#fff;padding:12px 14px;border-radius:10px} .ng-ti .scanform input::placeholder{color:var(--dmut);font-family:var(--f)} .ng-ti .scanform input:focus{outline:none} .ng-ti .scanform .btn{flex:none;padding:12px 22px} .ng-ti .formerr{margin-top:10px;font-size:12.5px;color:var(--alert);min-height:18px} .ng-ti .examples{margin-top:12px;font-size:12px;color:var(--dmut);display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center} .ng-ti .examples button{font-family:var(--m);font-size:11.5px;color:var(--dsec);border:1px solid var(--line2);border-radius:99px;padding:4px 10px} .ng-ti .examples button:hover{color:var(--glow);border-color:var(--glow)} .ng-ti .typechip{display:inline-flex;align-items:center;gap:6px;font-family:var(--m);font-size:11px;color:var(--glow);background:rgba(63,193,255,.08);border:1px solid rgba(63,193,255,.3);border-radius:99px;padding:3px 10px} @media(max-width:600px){.ng-ti .scanform{flex-direction:column}.ng-ti .scanform .btn{width:100%}} /* Steuerleiste (Land, Zeitraum) */ .ng-ti .controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:22px} .ng-ti .seg{display:inline-flex;background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:11px;padding:4px;gap:2px} .ng-ti .light .seg{background:#fff;border-color:var(--lline)} .ng-ti .seg button{font-size:12.5px;font-weight:500;padding:7px 13px;border-radius:8px;color:var(--dsec);transition:all .15s} .ng-ti .light .seg button{color:var(--lsec)} .ng-ti .seg button.on{background:var(--brand);color:#04121C} .ng-ti .seg button:hover:not(.on){color:var(--glow)} .ng-ti .light .seg button:hover:not(.on){color:var(--deepblue)} .ng-ti .controls .hint{font-size:12px;color:var(--dmut);margin-left:auto} .ng-ti .light .controls .hint{color:var(--lmut)} .ng-ti select.sel{font:inherit;font-size:13px;padding:9px 12px;border-radius:10px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--dtext);cursor:pointer} .ng-ti .light select.sel{background:#fff;border-color:var(--lline);color:var(--ltext)} /* KPI-Kacheln */ .ng-ti .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .ng-ti .kpi{background:var(--lcard);border:1px solid var(--lline);border-radius:14px;padding:20px 20px} .ng-ti .dark .kpi{background:rgba(255,255,255,.03);border-color:var(--line2)} .ng-ti .kpi .kl{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--lmut);margin-bottom:8px} .ng-ti .dark .kpi .kl{color:var(--dmut)} .ng-ti .kpi .kv{font-family:var(--m);font-size:26px;font-weight:700;color:var(--ltext);line-height:1.1} .ng-ti .dark .kpi .kv{color:#fff} .ng-ti .kpi .kt{display:inline-block;font-size:12px;font-weight:600;margin-left:8px} .ng-ti .kpi .kt.up{color:var(--alert)} .ng-ti .kpi .kt.down{color:var(--ok)} .ng-ti .kpi .kt.flat{color:var(--lmut)} .ng-ti .kpi .ks{font-size:11.5px;color:var(--lmut);margin-top:6px} .ng-ti .dark .kpi .ks{color:var(--dmut)} @media(max-width:900px){.ng-ti .kpis{grid-template-columns:1fr 1fr}} /* Panels und Karten */ .ng-ti .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .ng-ti .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .ng-ti .grid32{display:grid;grid-template-columns:3fr 2fr;gap:18px} .ng-ti .panel{background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:16px;padding:24px 26px} .ng-ti .light .panel{background:var(--lcard);border-color:var(--lline)} .ng-ti .panel h3{font-size:15px;color:#fff;margin-bottom:4px} .ng-ti .light .panel h3{color:var(--ltext)} .ng-ti .panel .sub{font-size:12px;color:var(--dmut);margin-bottom:16px} .ng-ti .light .panel .sub{color:var(--lmut)} .ng-ti .panel .ph{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap} .ng-ti .panel .ph .btn-sm{margin-bottom:6px} @media(max-width:900px){.ng-ti .grid2,.ng-ti .grid3,.ng-ti .grid32{grid-template-columns:1fr}} /* Rangliste */ .ng-ti .rank{display:flex;flex-direction:column;gap:6px} .ng-ti .rank .ri{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);cursor:default} .ng-ti .light .rank .ri{border-color:var(--lline)} .ng-ti .rank .ri:last-child{border-bottom:none} .ng-ti .rank .ri.clickable{cursor:pointer} .ng-ti .rank .ri.clickable:hover .rn{color:var(--glow)} .ng-ti .light .rank .ri.clickable:hover .rn{color:var(--deepblue)} .ng-ti .rank .rno{font-family:var(--m);font-size:11.5px;color:var(--dmut)} .ng-ti .rank .rn{font-size:13.5px;font-weight:600;color:var(--dtext);display:flex;align-items:center;gap:8px;min-width:0} .ng-ti .light .rank .rn{color:var(--ltext)} .ng-ti .rank .rn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ng-ti .rank .rbar{height:5px;border-radius:99px;background:var(--brand);opacity:.85;margin-top:5px;transition:width .8s cubic-bezier(.4,0,.2,1)} .ng-ti .rank .rv{font-family:var(--m);font-size:12.5px;color:var(--dsec);white-space:nowrap} .ng-ti .light .rank .rv{color:var(--lsec)} .ng-ti .rank .rv small{color:var(--dmut);font-size:10.5px;margin-left:4px} .ng-ti .rank .rn .live{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 3px rgba(46,213,115,.15)} .ng-ti .rank .rn .live.off{background:var(--dmut);box-shadow:none} /* Tabelle */ .ng-ti .tbl{width:100%;border-collapse:collapse;font-size:12.5px} .ng-ti .tbl th{text-align:left;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--dmut);font-weight:600;padding:0 8px 8px 0;border-bottom:1px solid var(--line)} .ng-ti .light .tbl th{color:var(--lmut);border-color:var(--lline)} .ng-ti .tbl td{padding:9px 8px 9px 0;border-bottom:1px solid var(--line);color:var(--dsec);vertical-align:top} .ng-ti .light .tbl td{color:var(--lsec);border-color:var(--lline)} .ng-ti .tbl tr:last-child td{border-bottom:none} .ng-ti .tbl td.mono{font-family:var(--m);font-size:11.5px;color:var(--dtext);white-space:nowrap} .ng-ti .light .tbl td.mono{color:var(--ltext)} .ng-ti .tbl td.strong{color:var(--dtext);font-weight:600} .ng-ti .light .tbl td.strong{color:var(--ltext)} .ng-ti .tblwrap{overflow-x:auto} .ng-ti .grp{display:inline-block;font-family:var(--m);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--alert);background:rgba(255,77,94,.1);border:1px solid rgba(255,77,94,.3);border-radius:99px;padding:2px 9px;cursor:pointer} .ng-ti .grp:hover{background:rgba(255,77,94,.2)} .ng-ti .tag{display:inline-block;font-size:10.5px;font-weight:600;border-radius:99px;padding:2px 9px;border:1px solid transparent} .ng-ti .tag.ok{color:#178A47;background:rgba(46,213,115,.14)} .ng-ti .tag.info{color:var(--deepblue);background:rgba(19,149,216,.12)} .ng-ti .tag.low{color:#3F6E96;background:rgba(143,185,216,.25)} .ng-ti .tag.medium{color:#9A6600;background:rgba(245,165,36,.18)} .ng-ti .tag.high{color:#B83A22;background:rgba(255,120,80,.16)} .ng-ti .tag.critical{color:#B4142A;background:rgba(255,77,94,.16)} .ng-ti .dark .tag.ok{color:#7ee6a4} .ng-ti .dark .tag.info{color:var(--glow)} .ng-ti .dark .tag.low{color:#8FB9D8} .ng-ti .dark .tag.medium{color:var(--warn)} .ng-ti .dark .tag.high{color:var(--orange)} .ng-ti .dark .tag.critical{color:var(--alert)} .ng-ti .filterrow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px} .ng-ti .filterrow input{font:inherit;font-size:13px;padding:8px 12px;border-radius:9px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--dtext);min-width:200px} .ng-ti .light .filterrow input{background:#fff;border-color:var(--lline);color:var(--ltext)} .ng-ti .filterrow input:focus{outline:none;border-color:var(--brand)} .ng-ti .emptynote{font-size:12.5px;color:var(--dmut);line-height:1.6;padding:12px 0} .ng-ti .loading{font-size:12.5px;color:var(--dmut);padding:20px 0;text-align:center} .ng-ti .skeleton{border-radius:10px;background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.09) 37%,rgba(255,255,255,.04) 63%);background-size:400% 100%;animation:ngtiShimmer 1.6s ease-in-out infinite} .ng-ti .light .skeleton{background:linear-gradient(90deg,#EDF2F8 25%,#F8FBFD 37%,#EDF2F8 63%);background-size:400% 100%} @keyframes ngtiShimmer{0%{background-position:100% 0}100%{background-position:0 0}} /* Charts */ .ng-ti .chart{width:100%;height:auto;display:block} .ng-ti .chart .grid{stroke:var(--line);stroke-width:1} .ng-ti .light .chart .grid{stroke:#E3EBF4} .ng-ti .chart .ylab,.ng-ti .chart .xlab{font-family:var(--m);font-size:9.5px;fill:var(--dmut)} .ng-ti .light .chart .ylab,.ng-ti .light .chart .xlab{fill:#9AA9BC} .ng-ti .chart .line{fill:none;stroke:var(--glow);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .ng-ti .light .chart .line{stroke:var(--deepblue)} .ng-ti .chart .line.b{stroke:var(--orange)} .ng-ti .chart .area{fill:url(#ngtiAreaGrad);opacity:.9} .ng-ti .chart .bar{fill:var(--brand);opacity:.9;transition:height .7s cubic-bezier(.4,0,.2,1),y .7s cubic-bezier(.4,0,.2,1)} .ng-ti .chart .bar.dim{fill:var(--line2)} .ng-ti .light .chart .bar.dim{fill:#C4D4E6} .ng-ti .chart .bar.hi{fill:var(--glow)} .ng-ti .light .chart .bar.hi{fill:var(--deepblue)} .ng-ti .chart .dot{fill:var(--glow)} .ng-ti .light .chart .dot{fill:var(--deepblue)} .ng-ti .chart .bval{font-family:var(--m);font-size:9.5px;fill:var(--dsec)} .ng-ti .light .chart .bval{fill:var(--lsec)} .ng-ti .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--dsec);margin-top:10px} .ng-ti .light .legend{color:var(--lsec)} .ng-ti .legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px} .ng-ti .donutwrap{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center} .ng-ti .donutwrap svg{width:150px;height:150px} .ng-ti .donutwrap .dl{display:flex;flex-direction:column;gap:7px} .ng-ti .donutwrap .dl div{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--dsec)} .ng-ti .light .donutwrap .dl div{color:var(--lsec)} .ng-ti .donutwrap .dl b{font-family:var(--m);font-weight:600;color:var(--dtext)} .ng-ti .light .donutwrap .dl b{color:var(--ltext)} .ng-ti .donutwrap .dl i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:8px;vertical-align:-1px} @media(max-width:520px){.ng-ti .donutwrap{grid-template-columns:1fr}.ng-ti .donutwrap svg{margin:0 auto}} @media(prefers-reduced-motion:reduce){.ng-ti .chart .bar,.ng-ti .rank .rbar{transition:none}.ng-ti .skeleton{animation:none}} /* IOC-Ergebnis */ .ng-ti .verdict{display:grid;grid-template-columns:200px 1fr;gap:34px;align-items:center;background:var(--lcard);border:1px solid var(--lline);border-radius:18px;padding:30px 34px} .ng-ti .verdict .ring{width:180px;height:180px;position:relative;margin:0 auto} .ng-ti .verdict .ring svg{width:100%;height:100%;transform:rotate(-90deg)} .ng-ti .verdict .ring .track{fill:none;stroke:#E6EDF5;stroke-width:12} .ng-ti .verdict .ring .arc{fill:none;stroke:var(--brand);stroke-width:12;stroke-linecap:round;stroke-dasharray:339.29;stroke-dashoffset:339.29;transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1),stroke .4s} .ng-ti .verdict .ring .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .ng-ti .verdict .ring .num b{font-family:var(--m);font-size:46px;font-weight:700;line-height:1;color:var(--ltext)} .ng-ti .verdict .ring .num span{font-size:11px;color:var(--lmut);margin-top:6px} .ng-ti .verdict h2{font-size:clamp(20px,2.2vw,28px);color:var(--ltext);word-break:break-all} .ng-ti .verdict h2 code{font-family:var(--m);font-weight:600;color:var(--deepblue);font-size:.85em} .ng-ti .verdict p{margin-top:10px;font-size:14.5px;color:var(--lsec);max-width:60ch} .ng-ti .verdict .vl{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:99px;margin-bottom:12px} .ng-ti .verdict .vl::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor} .ng-ti .verdict .vl.ok{color:#178A47;background:rgba(46,213,115,.14)} .ng-ti .verdict .vl.info{color:var(--deepblue);background:rgba(19,149,216,.12)} .ng-ti .verdict .vl.medium{color:#9A6600;background:rgba(245,165,36,.16)} .ng-ti .verdict .vl.high{color:#B83A22;background:rgba(255,120,80,.14)} .ng-ti .verdict .vl.critical{color:#B4142A;background:rgba(255,77,94,.14)} .ng-ti .verdict .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .ng-ti .facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px} .ng-ti .facts div{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--lline);font-size:13px} .ng-ti .facts div:last-child,.ng-ti .facts div:nth-last-child(2):nth-child(odd){border-bottom:none} .ng-ti .facts span{color:var(--lmut)} .ng-ti .facts b{color:var(--ltext);font-weight:500;word-break:break-word} .ng-ti .facts b.mono{font-family:var(--m);font-size:12px} .ng-ti .sigs{display:flex;flex-direction:column;gap:10px} .ng-ti .sig{display:grid;grid-template-columns:10px 1fr auto;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--lline)} .ng-ti .sig:last-child{border-bottom:none} .ng-ti .sig i{width:10px;height:10px;border-radius:50%;margin-top:6px;background:#C4D4E6} .ng-ti .sig.ok i{background:var(--ok)}.ng-ti .sig.low i{background:#8FB9D8}.ng-ti .sig.medium i{background:var(--warn)}.ng-ti .sig.high i{background:var(--orange)}.ng-ti .sig.critical i{background:var(--alert)} .ng-ti .sig b{display:block;font-size:13.5px;color:var(--ltext);font-weight:600} .ng-ti .sig small{display:block;font-size:12.3px;color:var(--lsec);margin-top:3px;line-height:1.55} .ng-ti .sig .src{font-family:var(--m);font-size:10.5px;color:var(--lmut);white-space:nowrap;margin-top:4px} .ng-ti .cvedesc{font-size:14px;color:var(--lsec);line-height:1.7;max-width:80ch} .ng-ti .refs{display:flex;flex-direction:column;gap:6px;font-size:12.5px} .ng-ti .refs a{color:var(--deepblue);text-decoration:underline;word-break:break-all} .ng-ti .products{display:flex;gap:6px;flex-wrap:wrap} .ng-ti .products span{font-size:11.5px;color:var(--lsec);border:1px solid var(--lline);border-radius:99px;padding:3px 10px} @media(max-width:900px){.ng-ti .verdict{grid-template-columns:1fr;text-align:center;padding:26px 22px}.ng-ti .verdict .acts{justify-content:center}.ng-ti .facts{grid-template-columns:1fr}.ng-ti .facts div{grid-template-columns:120px 1fr}} /* Empfehlungskarten */ .ng-ti .recogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .ng-ti .reco{background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:16px;padding:24px 26px;display:flex;flex-direction:column} .ng-ti .reco.primary{border-color:var(--brand);background:linear-gradient(180deg,rgba(19,149,216,.10),rgba(19,149,216,.02))} .ng-ti .reco .rtag{font-size:11.5px;color:var(--glow);font-weight:500;margin-bottom:10px} .ng-ti .reco h4{font-size:16px;color:#fff;margin-bottom:8px} .ng-ti .reco p{font-size:13px;color:var(--dsec);line-height:1.65;flex:1} .ng-ti .reco .rwhy{font-size:12.5px;color:var(--dtext);background:rgba(255,255,255,.04);border-left:2px solid var(--brand);padding:8px 12px;margin:14px 0 16px;line-height:1.55} .ng-ti .reco .btn{align-self:flex-start} @media(max-width:900px){.ng-ti .recogrid{grid-template-columns:1fr}} /* Erklärtext, FAQ, Abschluss */ .ng-ti .prose{max-width:760px} .ng-ti .prose p{font-size:15px;line-height:1.75;margin-top:14px} .ng-ti .light .prose p{color:var(--lsec)} .ng-ti .dark .prose p{color:var(--dsec)} .ng-ti .prose p:first-of-type{margin-top:0} .ng-ti .limitbox{margin-top:26px;background:rgba(245,165,36,.09);border:1px solid rgba(245,165,36,.4);border-radius:12px;padding:16px 20px;max-width:760px} .ng-ti .limitbox b{color:#8A5A00} .ng-ti .dark .limitbox b{color:var(--warn)} .ng-ti .limitbox p{font-size:13px;line-height:1.65;margin-top:4px} .ng-ti .light .limitbox p{color:var(--lsec)} .ng-ti .dark .limitbox p{color:var(--dsec)} .ng-ti .faq{max-width:820px} .ng-ti .faq details{border-bottom:1px solid var(--line)} .ng-ti .light .faq details{border-color:var(--lline)} .ng-ti .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;font-size:15.5px;font-weight:600;color:#fff} .ng-ti .light .faq summary{color:var(--ltext)} .ng-ti .faq summary::-webkit-details-marker{display:none} .ng-ti .faq summary::after{content:"+";font-family:var(--m);font-size:20px;color:var(--glow);flex:none;transition:transform .25s} .ng-ti .light .faq summary::after{color:var(--deepblue)} .ng-ti .faq details[open] summary::after{transform:rotate(45deg)} .ng-ti .faq .fa{padding:0 0 20px;font-size:14px;line-height:1.7;max-width:70ch;color:var(--dsec)} .ng-ti .light .faq .fa{color:var(--lsec)} .ng-ti .finalcard{background:linear-gradient(165deg,#081428,#050910 65%);border-radius:20px;padding:44px 40px;text-align:center;position:relative;overflow:hidden} .ng-ti .finalcard::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(560px 320px at 50% 0%, rgba(63,193,255,.16), transparent 68%)} .ng-ti .finalcard>*{position:relative;z-index:1} .ng-ti .finalcard h2{color:#fff;font-size:clamp(22px,2.4vw,30px)} .ng-ti .finalcard p{margin:12px auto 22px;color:var(--dsec);max-width:520px;font-size:14px} .ng-ti .finalcard .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .ng-ti .srcline{margin-top:14px;font-size:11px;color:var(--dmut);border-top:1px solid var(--line);padding-top:12px;line-height:1.6} .ng-ti .light .srcline{color:var(--lmut);border-color:var(--lline)} /* Modal */ .ng-ti .overlay{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(3,7,14,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .ng-ti .overlay.show{display:flex} .ng-ti .dialog{position:relative;width:100%;max-width:860px;max-height:88vh;overflow-y:auto;background:linear-gradient(155deg,#0b1830,var(--dbg) 65%);border:1px solid var(--line2);border-radius:22px;padding:40px 42px;color:var(--dtext)} .ng-ti .dialog .close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--line2);color:var(--dsec);display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;z-index:5} .ng-ti .dialog .close:hover{color:#fff;border-color:var(--glow)} .ng-ti .dialog h3{color:#fff;font-size:24px;margin-bottom:6px} .ng-ti .dialog .dsub{font-size:13px;color:var(--dsec);margin-bottom:18px} .ng-ti .dialog .desc{font-size:13.5px;color:var(--dsec);line-height:1.7;margin-bottom:18px;max-width:72ch} .ng-ti .dialog .kpis{margin-bottom:18px} .ng-ti .dialog .kpi{padding:14px 16px} .ng-ti .dialog .kpi .kv{font-size:22px} .ng-ti .dialog .grid2{margin-bottom:18px} .ng-ti .dialog h4{font-size:13px;color:#fff;margin-bottom:10px} @media(max-width:860px){.ng-ti .dialog{padding:30px 22px}} /* Report */ .ng-ti .report{background:var(--lcard);border:1px solid var(--lline);border-radius:18px;padding:40px 44px;color:var(--ltext)} .ng-ti .report .rhead{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap;border-bottom:2px solid var(--brand);padding-bottom:20px;margin-bottom:26px} .ng-ti .report .rhead h2{font-size:clamp(22px,2.6vw,32px)} .ng-ti .report .rhead .rmeta{font-size:12px;color:var(--lmut);margin-top:6px} .ng-ti .report .rbrand{text-align:right;font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lmut)} .ng-ti .report .rbrand b{display:block;font-family:var(--f);font-size:16px;letter-spacing:0;text-transform:none;color:var(--ltext);font-weight:680} .ng-ti .report h3{font-size:16px;margin:30px 0 12px;padding-top:22px;border-top:1px solid var(--lline)} .ng-ti .report h3:first-of-type{border-top:none;padding-top:0;margin-top:0} .ng-ti .report .narr p{font-size:14px;color:var(--lsec);line-height:1.75;margin-top:10px} .ng-ti .report .kpis{margin:0 0 6px} .ng-ti .report .tbl th{color:var(--lmut);border-color:var(--lline)} .ng-ti .report .tbl td{color:var(--lsec);border-color:var(--lline)} .ng-ti .report .actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px} .ng-ti .report .recolist{display:grid;grid-template-columns:1fr 1fr;gap:12px} .ng-ti .report .recolist div{border:1px solid var(--lline);border-radius:12px;padding:14px 16px;font-size:13px;color:var(--lsec);line-height:1.6} .ng-ti .report .recolist b{display:block;color:var(--ltext);margin-bottom:4px} .ng-ti .report .rfoot{margin-top:30px;padding-top:16px;border-top:1px solid var(--lline);font-size:11.5px;color:var(--lmut);line-height:1.6} .ng-ti .repcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .ng-ti .repcard{background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:14px;padding:18px 20px;text-align:left;transition:border-color .2s} .ng-ti .repcard:hover{border-color:var(--glow)} .ng-ti .repcard .rt{font-size:11px;color:var(--dmut);font-family:var(--m)} .ng-ti .repcard h4{font-size:15px;color:#fff;margin:6px 0 10px} .ng-ti .repcard .rc{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--dsec)} .ng-ti .repcard .rc b{font-family:var(--m);color:#fff;font-weight:600} @media(max-width:900px){.ng-ti .repcards{grid-template-columns:1fr 1fr}.ng-ti .report{padding:26px 22px}.ng-ti .report .recolist{grid-template-columns:1fr}} @media(max-width:560px){.ng-ti .repcards{grid-template-columns:1fr}} @media print{ body *{visibility:hidden} .ng-ti .report,.ng-ti .report *{visibility:visible} .ng-ti .report{position:absolute;left:0;top:0;width:100%;border:none;border-radius:0;padding:0;box-shadow:none} .ng-ti .report .actions,.ng-ti .report .noprint{display:none !important} .ng-ti .report .kpi{border:1px solid #ccc} .ng-ti .report h3{break-after:avoid} .ng-ti .report .tbl tr{break-inside:avoid} } /* ========================================================================== App-Rahmen: festes Seitenmenü links, Inhaltsspalte rechts. Die Werkzeuge sollen sich wie eine Anwendung anfühlen, nicht wie Unterseiten. --ng-ti-top kann gesetzt werden, falls über der App noch ein fixierter Website-Header steht (Beispiel: --ng-ti-top:64px). ========================================================================== */ .ng-ti.ng-app{--ng-ti-top:0px;--ng-side-w:266px;--ng-side-wc:72px;display:grid;grid-template-columns:var(--ng-side-w) minmax(0,1fr);background:var(--dbg);min-height:100vh} .ng-ti.ng-app.ng-collapsed{--ng-side-w:var(--ng-side-wc)} .ng-ti .ng-side{position:sticky;top:var(--ng-ti-top);align-self:start;height:calc(100vh - var(--ng-ti-top));display:flex;flex-direction:column;background:var(--dbg2);border-right:1px solid var(--line);overflow:hidden;z-index:20;transition:width .22s} .ng-ti .ng-side-head{display:flex;align-items:center;gap:10px;padding:20px 18px 16px;border-bottom:1px solid var(--line);flex:none;min-height:78px} .ng-ti .ng-side-logo{display:inline-flex;align-items:center;min-width:0} .ng-ti .ng-side-logo img{height:38px;width:auto;display:block;filter:drop-shadow(0 0 14px rgba(19,149,216,.35))} .ng-ti .ng-side-mark{display:none;flex:none} .ng-ti .ng-side-mark img{width:34px;height:34px;display:block;border-radius:9px;box-shadow:0 0 16px rgba(19,149,216,.28)} .ng-ti .ng-side-toggle{margin-left:auto;width:34px;height:34px;flex:none;border-radius:9px;border:1px solid var(--line2);color:var(--dsec);display:flex;align-items:center;justify-content:center;transition:all .18s} .ng-ti .ng-side-toggle:hover{color:var(--glow);border-color:var(--glow)} .ng-ti .ng-side-toggle svg{width:15px;height:15px;transition:transform .22s} .ng-ti.ng-collapsed .ng-side-toggle svg{transform:rotate(180deg)} .ng-ti.ng-collapsed .ng-side-logo img{display:none} .ng-ti.ng-collapsed .ng-side-mark{display:block} .ng-ti.ng-collapsed .ng-side-head{padding:20px 0 16px;justify-content:center;flex-direction:column;gap:12px} .ng-ti.ng-collapsed .ng-side-toggle{margin-left:0} .ng-ti .ng-side-scroll{flex:1;overflow-y:auto;padding:16px 12px;scrollbar-width:thin} .ng-ti .ng-side-scroll::-webkit-scrollbar{width:6px} .ng-ti .ng-side-scroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px} .ng-ti .ng-side-lbl{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:640;letter-spacing:.1em;text-transform:uppercase;color:var(--dmut);padding:16px 12px 8px} .ng-ti .ng-side-lbl i{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none} .ng-ti .ng-side-lbl.ops i{background:var(--ok)} .ng-ti.ng-collapsed .ng-side-lbl{justify-content:center;padding:16px 0 8px;font-size:0} .ng-ti.ng-collapsed .ng-side-lbl i{width:16px;height:2px;border-radius:2px} .ng-ti .ng-side-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--dsec);border:1px solid transparent;transition:all .16s;position:relative;white-space:nowrap} .ng-ti .ng-side-link:hover{color:#fff;background:rgba(255,255,255,.04)} .ng-ti .ng-side-link.on{color:var(--glow);background:rgba(63,193,255,.09);border-color:rgba(63,193,255,.28)} .ng-ti .ng-side-link svg{width:18px;height:18px;flex:none;stroke-width:1.6} .ng-ti .ng-side-link .tx{overflow:hidden;text-overflow:ellipsis} .ng-ti .ng-side-link .new{margin-left:auto;font-family:var(--m);font-size:9.5px;letter-spacing:.06em;color:var(--brand);background:rgba(19,149,216,.14);border-radius:99px;padding:2px 7px} .ng-ti.ng-collapsed .ng-side-link{justify-content:center;padding:11px 0} .ng-ti.ng-collapsed .ng-side-link .tx,.ng-ti.ng-collapsed .ng-side-link .new{display:none} .ng-ti .ng-side-foot{flex:none;border-top:1px solid var(--line);padding:14px 12px;display:flex;flex-direction:column;gap:8px} .ng-ti .ng-side-foot .ng-cta{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:#04121C;font-size:13px;font-weight:600;padding:10px 12px;border-radius:10px;transition:background .18s} .ng-ti .ng-side-foot .ng-cta:hover{background:var(--glow)} .ng-ti .ng-side-foot .ng-back{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;font-size:12.5px;color:var(--dmut);border:1px solid var(--line2);transition:all .18s} .ng-ti .ng-side-foot .ng-back:hover{color:var(--glow);border-color:var(--glow)} .ng-ti .ng-side-foot svg{width:15px;height:15px;flex:none} .ng-ti.ng-collapsed .ng-side-foot span{display:none} .ng-ti.ng-collapsed .ng-side-foot .ng-cta,.ng-ti.ng-collapsed .ng-side-foot .ng-back{padding:10px 0;justify-content:center} .ng-ti .ng-main{min-width:0;background:var(--dbg)} .ng-ti .ng-appbar{display:none} /* Mobil: Menü als Schublade, oben eine App-Leiste */ @media(max-width:1000px){ .ng-ti.ng-app{grid-template-columns:1fr} .ng-ti .ng-appbar{display:flex;align-items:center;gap:12px;position:sticky;top:var(--ng-ti-top);z-index:30;background:rgba(5,9,16,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:11px 18px} .ng-ti .ng-appbar img{height:32px;width:auto;filter:drop-shadow(0 0 12px rgba(19,149,216,.35))} .ng-ti .ng-appbar .ng-burger{width:40px;height:40px;flex:none;border:1px solid var(--line2);border-radius:10px;position:relative} .ng-ti .ng-appbar .ng-burger i{position:absolute;left:10px;right:10px;height:2px;background:var(--dtext);transition:all .22s} .ng-ti .ng-appbar .ng-burger i:nth-child(1){top:13px} .ng-ti .ng-appbar .ng-burger i:nth-child(2){top:19px} .ng-ti .ng-appbar .ng-burger i:nth-child(3){top:25px} .ng-ti .ng-appbar .ng-now{margin-left:auto;font-size:12px;color:var(--dsec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ng-ti .ng-side{position:fixed;top:0;bottom:0;left:0;height:100vh;width:288px;transform:translateX(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);z-index:100000;border-right:1px solid var(--line2)} .ng-ti.ng-drawer .ng-side{transform:translateX(0)} .ng-ti .ng-scrim{position:fixed;inset:0;background:rgba(3,7,14,.7);z-index:99999;opacity:0;pointer-events:none;transition:opacity .26s} .ng-ti.ng-drawer .ng-scrim{opacity:1;pointer-events:auto} .ng-ti.ng-collapsed{--ng-side-w:266px} .ng-ti.ng-collapsed .ng-side-link{justify-content:flex-start;padding:10px 12px} .ng-ti.ng-collapsed .ng-side-link .tx,.ng-ti.ng-collapsed .ng-side-link .new{display:inline} .ng-ti.ng-collapsed .ng-side-logo img{display:block} .ng-ti.ng-collapsed .ng-side-mark{display:none} .ng-ti.ng-collapsed .ng-side-head{flex-direction:row;padding:20px 18px 16px} .ng-ti.ng-collapsed .ng-side-lbl{justify-content:flex-start;padding:16px 12px 8px;font-size:10.5px} .ng-ti.ng-collapsed .ng-side-foot span{display:inline} .ng-ti .ng-side-toggle{display:none} } @media(min-width:1001px){.ng-ti .ng-scrim{display:none}} /* Globus im Hero */ .ng-ti .ng-globe{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 76%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 76%,transparent 100%)} .ng-ti .chero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(52% 40% at 50% 42%,rgba(5,9,16,.88) 0%,rgba(5,9,16,.5) 48%,rgba(5,9,16,0) 80%),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px);background-size:auto,30px 30px,30px 30px} .ng-ti .chero{position:relative;overflow:hidden} .ng-ti .chero>.wrap{position:relative;z-index:2} .ng-ti .ng-liverow{display:block;margin-bottom:16px} .ng-ti .ng-live{display:inline-flex;align-items:center;gap:9px;font-size:12px;color:var(--dsec);background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:99px;padding:5px 14px} .ng-ti .ng-live b{color:#fff;font-weight:600} .ng-ti .ng-live i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:ngtiPulse 2s infinite} .ng-ti .ng-live .sep{width:1px;height:12px;background:var(--line2)} @keyframes ngtiPulse{0%,100%{box-shadow:0 0 0 0 rgba(46,213,115,.5)}50%{box-shadow:0 0 0 6px rgba(46,213,115,0)}} @media(prefers-reduced-motion:reduce){.ng-ti .ng-live i{animation:none}} /* Übersichtsseite: Hauptwerkzeug und Modulraster */ .ng-ti .ng-feat{display:grid;grid-template-columns:1fr 1.15fr;background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:20px;overflow:hidden} .ng-ti .ng-feat-l{padding:32px 34px;border-right:1px solid var(--line)} .ng-ti .ng-feat-r{padding:22px 24px;background:rgba(3,7,14,.4)} .ng-ti .ng-feat-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px} .ng-ti .ng-feat-ico{width:52px;height:52px;border-radius:14px;background:rgba(19,149,216,.12);border:1px solid rgba(19,149,216,.3);display:flex;align-items:center;justify-content:center;color:var(--glow)} .ng-ti .ng-feat-ico svg{width:26px;height:26px} .ng-ti .ng-feat-tag{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--glow);background:rgba(63,193,255,.1);border:1px solid rgba(63,193,255,.3);border-radius:99px;padding:4px 11px} .ng-ti .ng-feat h3{font-size:22px;color:#fff;margin-bottom:10px} .ng-ti .ng-feat p{font-size:13.5px;color:var(--dsec);line-height:1.7} .ng-ti .ng-feat-list{margin-top:16px;display:flex;flex-direction:column;gap:8px} .ng-ti .ng-feat-list li{display:flex;gap:9px;font-size:12.8px;color:var(--dsec)} .ng-ti .ng-feat-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);flex:none;margin-top:8px} .ng-ti .ng-feat-form{grid-column:1 / -1;display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding:14px 18px;background:rgba(3,7,14,.35)} .ng-ti .ng-feat-form .ng-prompt{font-family:var(--m);font-size:14px;color:var(--dmut);flex:none;padding-left:6px} .ng-ti .ng-feat-form input{flex:1;min-width:0;font-family:var(--m);font-size:14.5px;color:#fff;padding:11px 6px} .ng-ti .ng-feat-form input::placeholder{color:var(--dmut)} .ng-ti .ng-feat-form input:focus{outline:none} .ng-ti .ng-feat-form .btn{flex:none;padding:11px 20px} .ng-ti .ng-feed-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px} .ng-ti .ng-feed-t{display:flex;align-items:center;gap:8px;font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dsec)} .ng-ti .ng-feed-t i{width:7px;height:7px;border-radius:50%;background:var(--alert);animation:ngtiPulseRed 1.8s infinite} @keyframes ngtiPulseRed{0%,100%{box-shadow:0 0 0 0 rgba(255,77,94,.5)}50%{box-shadow:0 0 0 6px rgba(255,77,94,0)}} .ng-ti .ng-feed-n{font-family:var(--m);font-size:10.5px;color:var(--dmut)} .ng-ti .ng-feed{display:flex;flex-direction:column;gap:6px} .ng-ti .ng-feed .fr{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:8px 12px;border-radius:9px;background:rgba(255,77,94,.06);border:1px solid rgba(255,77,94,.16)} .ng-ti .ng-feed .fr .fv{font-family:var(--m);font-size:12px;color:#FFC3C9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ng-ti .ng-feed .fr .fg{font-family:var(--m);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--alert);white-space:nowrap} .ng-ti .ng-feed .fr .ft{font-family:var(--m);font-size:10.5px;color:var(--dmut);white-space:nowrap} .ng-ti .ng-feed .fr.q1{background:rgba(245,165,36,.06);border-color:rgba(245,165,36,.18)} .ng-ti .ng-feed .fr.q1 .fv{color:#F7D9A5}.ng-ti .ng-feed .fr.q1 .fg{color:var(--warn)} .ng-ti .ng-feed .fr.q2{background:rgba(19,149,216,.06);border-color:rgba(19,149,216,.18)} .ng-ti .ng-feed .fr.q2 .fv{color:#BFE3F8}.ng-ti .ng-feed .fr.q2 .fg{color:var(--glow)} @media(max-width:980px){ .ng-ti .ng-feat{grid-template-columns:1fr} .ng-ti .ng-feat-l{border-right:0;border-bottom:1px solid var(--line)} .ng-ti .ng-feat-form{flex-wrap:wrap} .ng-ti .ng-feat-form input{min-width:140px} } .ng-ti .ng-modules{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .ng-ti .ng-mod{display:flex;flex-direction:column;background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:16px;padding:24px 26px;transition:border-color .2s,transform .2s,background .2s} .ng-ti .ng-mod:hover{border-color:var(--brand);background:rgba(19,149,216,.06);transform:translateY(-2px)} .ng-ti .ng-mod-ico{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--glow);margin-bottom:16px} .ng-ti .ng-mod-ico svg{width:21px;height:21px} .ng-ti .ng-mod h4{font-size:16px;color:#fff;margin-bottom:8px} .ng-ti .ng-mod p{font-size:13px;color:var(--dsec);line-height:1.65;flex:1} .ng-ti .ng-mod-kpi{margin-top:16px;font-family:var(--m);font-size:11px;color:var(--dmut);border-top:1px solid var(--line);padding-top:12px} .ng-ti .ng-mod-kpi b{color:var(--glow);font-weight:600} .ng-ti .ng-mod-alt{background:transparent} @media(max-width:1100px){.ng-ti .ng-modules{grid-template-columns:1fr 1fr}} @media(max-width:700px){.ng-ti .ng-modules{grid-template-columns:1fr}} /* ========================================================================== App-Modus: durchgehend dunkel und kompakt. Die hellen Sektionen bleiben im Markup, bekommen hier aber dunkle Werte für dieselben Farbvariablen. Dadurch reicht ein Block statt hunderter Einzelregeln. Der Dark Web Check hat eigene, per ID gescopte Styles, deshalb steht er jeweils als zweiter Selektor daneben. ========================================================================== */ .ng-ti.ng-app .light, .ng-ti.ng-app #ng-dwc .light{ --lbg:#070C15; --lcard:#0C1626; --lline:#17243B; --ltext:#EAF2FB; --lsec:#9AB0C9; --lmut:#5F7590; background:var(--lbg);color:var(--ltext) } .ng-ti.ng-app #ng-dwc{background:var(--dbg)} /* Kompaktere Abstände: die Seite ist ein Werkzeug, kein Prospekt */ .ng-ti.ng-app section.pad, .ng-ti.ng-app #ng-dwc section.pad{padding:52px 0} .ng-ti.ng-app .chero, .ng-ti.ng-app #ng-dwc .chero{padding:60px 0 44px} .ng-ti.ng-app .chero h1, .ng-ti.ng-app #ng-dwc .chero h1{font-size:clamp(27px,3vw,40px)} .ng-ti.ng-app .chero p.lead, .ng-ti.ng-app #ng-dwc .chero p.lead{font-size:14.5px;max-width:60ch} .ng-ti.ng-app .sec-head, .ng-ti.ng-app #ng-dwc .sec-head{margin-bottom:26px} .ng-ti.ng-app .sec-head h2, .ng-ti.ng-app #ng-dwc .sec-head h2{font-size:clamp(20px,2.1vw,26px)} .ng-ti.ng-app .wrap, .ng-ti.ng-app #ng-dwc .wrap{padding:0 34px} /* Restliche helle Festwerte nachziehen */ .ng-ti.ng-app .light .btn-ghost, .ng-ti.ng-app #ng-dwc .light .btn-ghost{color:var(--dtext);border-color:var(--line2)} .ng-ti.ng-app .light .btn-ghost:hover, .ng-ti.ng-app #ng-dwc .light .btn-ghost:hover{color:var(--glow);border-color:var(--glow)} .ng-ti.ng-app .light .seg, .ng-ti.ng-app .light select.sel, .ng-ti.ng-app .light .filterrow input{background:rgba(255,255,255,.04);border-color:var(--line2);color:var(--dtext)} .ng-ti.ng-app .light .seg button{color:var(--dsec)} .ng-ti.ng-app .light .seg button.on{background:var(--brand);color:#04121C} .ng-ti.ng-app .light .seg button:hover:not(.on){color:var(--glow)} .ng-ti.ng-app .light .chart .grid{stroke:#17243B} .ng-ti.ng-app .light .chart .ylab,.ng-ti.ng-app .light .chart .xlab{fill:#5F7590} .ng-ti.ng-app .light .chart .line{stroke:var(--glow)} .ng-ti.ng-app .light .chart .dot{fill:var(--glow)} .ng-ti.ng-app .light .chart .bar.dim{fill:#1F3355} .ng-ti.ng-app .light .chart .bar.hi{fill:var(--glow)} .ng-ti.ng-app .light .chart .bval{fill:var(--dsec)} .ng-ti.ng-app .verdict .ring .track, .ng-ti.ng-app #ng-dwc .scorewrap .track{stroke:#17243B} .ng-ti.ng-app .verdict .vl.ok,.ng-ti.ng-app #ng-dwc .g-ok{color:#7EE6A4;background:rgba(46,213,115,.12)} .ng-ti.ng-app .verdict .vl.info{color:var(--glow);background:rgba(19,149,216,.12)} .ng-ti.ng-app .verdict .vl.medium,.ng-ti.ng-app #ng-dwc .g-mid{color:var(--warn);background:rgba(245,165,36,.13)} .ng-ti.ng-app .verdict .vl.high,.ng-ti.ng-app #ng-dwc .g-high{color:var(--orange);background:rgba(255,120,80,.13)} .ng-ti.ng-app .verdict .vl.critical,.ng-ti.ng-app #ng-dwc .g-crit{color:var(--alert);background:rgba(255,77,94,.13)} .ng-ti.ng-app .light .tag.ok{color:#7EE6A4;background:rgba(46,213,115,.12)} .ng-ti.ng-app .light .tag.info{color:var(--glow);background:rgba(19,149,216,.12)} .ng-ti.ng-app .light .tag.low{color:#8FB9D8;background:rgba(143,185,216,.12)} .ng-ti.ng-app .light .tag.medium{color:var(--warn);background:rgba(245,165,36,.13)} .ng-ti.ng-app .light .tag.high{color:var(--orange);background:rgba(255,120,80,.13)} .ng-ti.ng-app .light .tag.critical{color:var(--alert);background:rgba(255,77,94,.13)} .ng-ti.ng-app .light .limitbox b, .ng-ti.ng-app #ng-dwc .light .limitbox b{color:var(--warn)} .ng-ti.ng-app #ng-dwc .cat li::before{background:#2A3B57} .ng-ti.ng-app #ng-dwc .cat .cb.bad{color:var(--alert)} .ng-ti.ng-app #ng-dwc .rel:hover{border-color:var(--brand)} .ng-ti.ng-app #ng-dwc .resulthead h2 code, .ng-ti.ng-app .verdict h2 code{color:var(--glow)} .ng-ti.ng-app .light .refs a, .ng-ti.ng-app .report .actions .btn-ghost{color:var(--glow)} .ng-ti.ng-app .light .sig .src,.ng-ti.ng-app .light .facts span{color:var(--dmut)} .ng-ti.ng-app .light .rank .rbar{opacity:.9} .ng-ti.ng-app .report{background:var(--lcard);border-color:var(--lline)} .ng-ti.ng-app .report .recolist div{border-color:var(--lline)} .ng-ti.ng-app .products span{border-color:var(--lline);color:var(--dsec)} /* Symbole zuverlässig darstellen, unabhängig vom Theme der Website */ .ng-ti svg{display:block;overflow:visible} .ng-ti .ng-side svg,.ng-ti .ng-appbar svg,.ng-ti .ng-mod-ico svg,.ng-ti .ng-feat-ico svg{fill:none;stroke:currentColor} .ng-ti .ng-side svg *,.ng-ti .ng-mod-ico svg *,.ng-ti .ng-feat-ico svg *{fill:none;stroke:currentColor;vector-effect:non-scaling-stroke} /* Seitenmenü fest positioniert: position:sticky versagt, sobald ein Elternelement des Themes overflow versteckt. Die Werte für left und width setzt das Skript aus der Breite des App-Containers. */ @media(min-width:1001px){ .ng-ti.ng-app{display:block} .ng-ti.ng-app .ng-side{position:fixed;top:var(--ng-ti-top);left:var(--ng-side-left,0px);bottom:0;height:calc(100vh - var(--ng-ti-top));width:var(--ng-side-w);align-self:auto;transition:width .22s} .ng-ti.ng-app .ng-main{margin-left:var(--ng-side-w);transition:margin-left .22s} } /* Erklärende Abschnitte gebündelt hinter einem Aufklapper. Der Text bleibt im Dokument, tritt aber hinter das Werkzeug zurück. Jede Regel steht zweimal: einmal für die Werkzeuge, einmal mit #ng-dwc, weil der Dark Web Check einen eigenen, per ID gescopten Reset mitbringt, der Klassenregeln sonst aussticht. Hintergrund und Rahmen sind überall ausdrücklich gesetzt, damit Button-Regeln des Themes nicht durchschlagen. */ .ng-ti .ng-docwrap, #ng-dwc .ng-docwrap{border-top:1px solid var(--line);background:var(--dbg);padding:14px 0} .ng-ti .ng-docwrap .ng-doctoggle, #ng-dwc .ng-docwrap .ng-doctoggle{ display:flex;align-items:center;gap:14px;width:calc(100% - 68px);max-width:1180px;margin:0 auto; padding:15px 20px;border:1px solid var(--line2);border-radius:14px; background:rgba(255,255,255,.03);cursor:pointer; font-family:var(--f);font-size:14px;font-weight:600;color:var(--dtext);text-align:left; transition:border-color .18s,background .18s,color .18s } .ng-ti .ng-docwrap .ng-doctoggle:hover, #ng-dwc .ng-docwrap .ng-doctoggle:hover{background:rgba(255,255,255,.055);border-color:var(--line2);color:#fff} .ng-ti .ng-docwrap .ng-doctoggle:focus-visible, #ng-dwc .ng-docwrap .ng-doctoggle:focus-visible{outline:2px solid var(--glow);outline-offset:2px} .ng-ti .ng-docwrap .ng-doctoggle .dt-ico, #ng-dwc .ng-docwrap .ng-doctoggle .dt-ico{ width:30px;height:30px;flex:none;border-radius:9px;border:1px solid var(--line2); background:rgba(19,149,216,.10);display:flex;align-items:center;justify-content:center;color:var(--glow); transition:background .18s,border-color .18s } .ng-ti .ng-docwrap .ng-doctoggle:hover .dt-ico, #ng-dwc .ng-docwrap .ng-doctoggle:hover .dt-ico{background:rgba(19,149,216,.2);border-color:var(--brand)} .ng-ti .ng-docwrap .ng-doctoggle .dt-ico svg, #ng-dwc .ng-docwrap .ng-doctoggle .dt-ico svg{width:15px;height:15px;stroke:currentColor;fill:none;transition:transform .25s} .ng-ti .ng-docwrap.on .ng-doctoggle .dt-ico svg, #ng-dwc .ng-docwrap.on .ng-doctoggle .dt-ico svg{transform:rotate(180deg)} .ng-ti .ng-docwrap .ng-doctoggle .dt-sub, #ng-dwc .ng-docwrap .ng-doctoggle .dt-sub{margin-left:auto;font-weight:400;font-size:12px;color:var(--dmut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%} .ng-ti .ng-docbody, #ng-dwc .ng-docbody{display:none} .ng-ti .ng-docwrap.on .ng-docbody, #ng-dwc .ng-docwrap.on .ng-docbody{display:block} .ng-ti .ng-docwrap.on .ng-docbody section.pad:first-child, #ng-dwc .ng-docwrap.on .ng-docbody section.pad:first-child{padding-top:26px} @media(max-width:1000px){ .ng-ti .ng-docwrap .ng-doctoggle, #ng-dwc .ng-docwrap .ng-doctoggle{width:calc(100% - 44px);padding:14px 16px} .ng-ti .ng-docwrap .ng-doctoggle .dt-sub, #ng-dwc .ng-docwrap .ng-doctoggle .dt-sub{display:none} } /* Zweispaltiger Hero mit Globus (Ransomware Intelligence) */ .ng-ti .chero.ng-hero-split{text-align:left;padding:44px 0 34px} .ng-ti .ng-hs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:24px;align-items:center} .ng-ti .ng-hs-txt .eyebrow{margin-top:2px} .ng-ti .chero.ng-hero-split h1{font-size:clamp(26px,2.9vw,40px);margin-top:12px} .ng-ti .chero.ng-hero-split p.lead{margin:14px 0 0;max-width:52ch} .ng-ti .ng-livebar{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px;padding:14px 18px;background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:14px} .ng-ti .ng-livebar div{display:flex;align-items:baseline;gap:7px} .ng-ti .ng-livebar b{font-family:var(--m);font-size:19px;font-weight:700;color:#fff;line-height:1} .ng-ti .ng-livebar b.hot{color:var(--alert)} .ng-ti .ng-livebar span{font-size:11.5px;color:var(--dsec)} .ng-ti .ng-hs-globe{position:relative;aspect-ratio:1;min-height:440px;margin:-40px -90px -40px 0} .ng-ti .ng-globe-strike{position:absolute;inset:0;width:100%;height:100%; -webkit-mask-image:radial-gradient(circle at 50% 46%,#000 58%,transparent 74%); mask-image:radial-gradient(circle at 50% 46%,#000 58%,transparent 74%)} .ng-ti .ng-globe-cap{position:absolute;left:0;right:90px;bottom:18px;text-align:center;font-family:var(--m);font-size:10.5px;letter-spacing:.06em;color:var(--dmut);pointer-events:none} .ng-ti .ng-globe-cap b{color:var(--alert);font-weight:700} @media(max-width:1100px){ .ng-ti .ng-hs{grid-template-columns:1fr;gap:22px} .ng-ti .ng-hs-globe{max-width:460px;margin:0 auto;width:100%;min-height:320px} } /* Karte beim Überfahren eines Einschlags */ .ng-ti .ng-globe-strike{pointer-events:auto;touch-action:manipulation} .ng-ti .ng-globe-tip{position:absolute;z-index:5;pointer-events:none;transform:translate(-50%,-100%); min-width:170px;max-width:280px;padding:10px 12px;border-radius:12px; background:rgba(8,16,32,.97);border:1px solid var(--line2);box-shadow:0 18px 40px rgba(3,7,14,.55); opacity:0;transition:opacity .14s} .ng-ti .ng-globe-tip.on{opacity:1} .ng-ti .ng-globe-tip .gt-v{display:block;font-size:13px;font-weight:600;color:#fff;line-height:1.35;word-break:break-word} .ng-ti .ng-globe-tip .gt-m{display:block;font-size:11.5px;color:var(--dsec);margin-top:2px} .ng-ti .ng-globe-tip .gt-b{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)} .ng-ti .ng-globe-tip .gt-g{font-family:var(--m);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--alert);background:rgba(255,77,94,.1);border:1px solid rgba(255,77,94,.3);border-radius:99px;padding:2px 8px} .ng-ti .ng-globe-tip .gt-d{font-family:var(--m);font-size:10.5px;color:var(--dmut)} /* ========================================================================== Runde und quadratische Bedienelemente absichern. Themes setzen für