:root {
    --ink: #0d2530;
    --navy: #0d2c37;
    --deep: #071b23;
    --mint: #69e2c2;
    --aqua: #9cefe0;
    --ice: #edf8f7;
    --white: #fff;
    --line: #d9e9e8;
    --muted: #62747b;
    --radius: 24px;
    --shadow: 0 25px 70px rgba(5,37,48,.14)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Inter,"Segoe UI",Arial,sans-serif;
    color: var(--ink);
    background: #fff;
    overflow-x: hidden
}

a {
    color: inherit
}

.shell {
    width: min(1180px,calc(100% - 44px));
    margin: auto
}

.skip {
    position: fixed;
    left: -999px;
    top: 10px;
    z-index: 999
}

    .skip:focus {
        left: 10px;
        background: #fff;
        padding: 10px
    }

.ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    background: radial-gradient(circle at 92% 10%,rgba(105,226,194,.11),transparent 27%),radial-gradient(circle at 8% 75%,rgba(50,153,171,.08),transparent 25%)
}

.topline {
    background: var(--deep);
    color: #b8d0d5;
    font-size: 12px
}

    .topline .shell {
        height: 34px;
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .topline a {
        text-decoration: none;
        margin-left: 20px
    }

.header {
    height: 88px;
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(15,67,78,.09);
    transition: .3s
}

    .header.scrolled {
        height: 74px;
        box-shadow: 0 10px 35px rgba(8,39,49,.08)
    }

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 30px
}

.brand img {
    width: 238px;
    display: block
}

.header nav {
    display: flex;
    gap: 26px;
    margin-left: auto
}

    .header nav a {
        text-decoration: none;
        font-size: 14px;
        font-weight: 650;
        position: relative
    }

        .header nav a:after {
            content: "";
            position: absolute;
            left: 0;
            right: 100%;
            bottom: -9px;
            height: 2px;
            background: var(--mint);
            transition: .3s
        }

        .header nav a:hover:after {
            right: 0
        }

.header-cta, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 750;
    transition: .3s
}

.header-cta {
    background: var(--ink);
    color: #fff;
    padding: 13px 20px
}

.btn {
    padding: 15px 23px
}

    .btn.primary {
        background: var(--mint);
        color: #092830;
        box-shadow: 0 12px 30px rgba(105,226,194,.25)
    }

    .btn.dark {
        background: var(--ink);
        color: #fff
    }

    .btn.ghost {
        border: 1px solid rgba(255,255,255,.3);
        color: #fff
    }

    .btn:hover, .header-cta:hover {
        transform: translateY(-2px)
    }

.nav-toggle {
    display: none;
    background: none;
    border: 0
}

.hero {
    min-height: 720px;
    background: linear-gradient(135deg,#071d25,#103d48 58%,#155969);
    color: #fff;
    position: relative;
    overflow: hidden
}

    .hero:before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
        background-size: 48px 48px;
        mask-image: linear-gradient(to right,#000,transparent)
    }

.hero-grid {
    min-height: 720px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 65px;
    position: relative
}

.eyebrow {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .22em;
    font-weight: 750;
    color: #2f817b
}

    .eyebrow.light {
        color: var(--aqua)
    }

h1, h2, h3 {
    letter-spacing: -.035em
}

h1 {
    font-size: clamp(52px,6vw,86px);
    line-height: .98;
    margin: 22px 0
}

    h1 span {
        color: var(--mint)
    }

.hero-copy p {
    font-size: 19px;
    line-height: 1.7;
    color: #c7dadd;
    max-width: 650px
}

.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 32px
}

.hero-proof {
    display: flex;
    gap: 25px;
    margin-top: 45px;
    font-size: 12px;
    color: #a7c4c8
}

    .hero-proof b {
        display: block;
        font-size: 23px;
        color: #fff;
        margin-bottom: 5px
    }

.vision-stage {
    position: relative;
    min-height: 500px;
    perspective: 1100px
}

.cockpit {
    position: absolute;
    inset: 50px 0 35px 20px;
    background: #f8fcfc;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 45px 100px rgba(0,0,0,.35);
    transform: rotateY(-7deg) rotateX(3deg);
    transition: .3s
}

.cockpit-bar {
    height: 45px;
    background: #0b2832;
    color: #c3dbde;
    display: flex;
    align-items: center;
    padding: 0 17px;
    font-size: 10px;
    letter-spacing: .12em
}

    .cockpit-bar i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #69e2c2;
        margin-right: 7px
    }

.cockpit-body {
    display: grid;
    grid-template-columns: 58px 1fr;
    height: calc(100% - 45px)
}

.cockpit-nav {
    background: #123942;
    padding: 20px 13px
}

    .cockpit-nav span {
        display: block;
        height: 28px;
        border-radius: 8px;
        background: rgba(255,255,255,.08);
        margin-bottom: 10px
    }

.cockpit-main {
    padding: 23px;
    color: #173842
}

.dashboard-head {
    display: flex;
    justify-content: space-between;
    align-items: center
}

    .dashboard-head strong {
        font-size: 22px
    }

    .dashboard-head span {
        font-size: 10px;
        background: #e1f5f1;
        padding: 8px 10px;
        border-radius: 999px
    }

.kpis {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin: 18px 0
}

    .kpis article {
        background: #fff;
        border: 1px solid #e2eded;
        border-radius: 14px;
        padding: 14px
    }

    .kpis small {
        display: block;
        color: #7c9095;
        font-size: 9px
    }

    .kpis b {
        font-size: 24px
    }

.cockpit-panels {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 10px
}

.panel {
    background: #fff;
    border: 1px solid #e2eded;
    border-radius: 14px;
    padding: 15px;
    min-height: 142px
}

.bars {
    display: flex;
    gap: 6px;
    height: 82px;
    align-items: end;
    margin-top: 14px
}

    .bars i {
        flex: 1;
        background: linear-gradient(#69e2c2,#2e8281);
        border-radius: 5px 5px 2px 2px
    }

        .bars i:nth-child(1) {
            height: 35%
        }

        .bars i:nth-child(2) {
            height: 54%
        }

        .bars i:nth-child(3) {
            height: 46%
        }

        .bars i:nth-child(4) {
            height: 72%
        }

        .bars i:nth-child(5) {
            height: 64%
        }

        .bars i:nth-child(6) {
            height: 88%
        }

        .bars i:nth-child(7) {
            height: 94%
        }

.task {
    font-size: 10px
}

    .task p {
        display: flex;
        gap: 7px;
        border-bottom: 1px solid #edf2f2;
        padding: 8px 0
    }

    .task i {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #dff5ef
    }

.float-card {
    position: absolute;
    background: rgba(11,42,51,.88);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 15px;
    color: #fff;
    padding: 14px 17px;
    box-shadow: 0 18px 40px rgba(0,0,0,.25);
    animation: float 5s ease-in-out infinite
}

    .float-card small {
        display: block;
        color: #9cefe0;
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: .16em
    }

    .float-card.a {
        right: -30px;
        top: 35px
    }

    .float-card.b {
        left: -15px;
        bottom: 18px;
        animation-delay: -2s
    }

@keyframes float {
    50% {
        transform: translateY(-9px)
    }
}

.section {
    padding: 105px 0
}

    .section.soft {
        background: var(--ice)
    }

    .section.dark {
        background: var(--deep);
        color: #fff
    }

.heading {
    max-width: 760px;
    margin-bottom: 50px
}

    .heading.split {
        display: grid;
        grid-template-columns: 1fr .65fr;
        gap: 60px;
        max-width: none;
        align-items: end
    }

    .heading h2 {
        font-size: clamp(38px,4.2vw,60px);
        line-height: 1.05;
        margin: 13px 0
    }

    .heading p {
        line-height: 1.7;
        color: var(--muted)
    }

.dark .heading p {
    color: #afc4c7
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.module {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    min-height: 310px;
    position: relative;
    overflow: hidden;
    background: #fff;
    transition: .35s
}

    .module:after {
        content: "";
        position: absolute;
        width: 140px;
        height: 140px;
        border: 1px solid #cfe4e1;
        border-radius: 50%;
        right: -65px;
        bottom: -65px;
        transition: .4s
    }

    .module:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow)
    }

        .module:hover:after {
            transform: scale(1.35)
        }

    .module b {
        font: 700 11px/1 monospace;
        color: #3c8e87
    }

    .module h3 {
        font-size: 27px;
        margin: 55px 0 15px
    }

    .module p {
        line-height: 1.7;
        color: var(--muted)
    }

.workflow {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0;
    counter-reset: step
}

    .workflow article {
        padding: 30px;
        border-left: 1px solid rgba(255,255,255,.12);
        min-height: 270px
    }

        .workflow article:first-child {
            border-left: 0
        }

    .workflow b {
        font-size: 11px;
        color: var(--mint)
    }

    .workflow h3 {
        font-size: 25px;
        margin-top: 80px
    }

    .workflow p {
        color: #afc6ca;
        line-height: 1.6
    }

.page-hero {
    padding: 110px 0 95px;
    background: linear-gradient(135deg,#081e26,#124550);
    color: #fff;
    position: relative;
    overflow: hidden
}

    .page-hero:after {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        border: 1px solid rgba(105,226,194,.22);
        border-radius: 50%;
        right: -180px;
        top: -250px;
        box-shadow: 0 0 0 60px rgba(105,226,194,.035),0 0 0 120px rgba(105,226,194,.025)
    }

    .page-hero .shell {
        position: relative;
        z-index: 2
    }

    .page-hero h1 {
        max-width: 900px
    }

    .page-hero p {
        font-size: 18px;
        line-height: 1.7;
        max-width: 750px;
        color: #bad1d4
    }

.feature-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 70px;
    align-items: start
}

.sticky-copy {
    position: sticky;
    top: 125px
}

.feature-list {
    display: grid;
    gap: 15px
}

    .feature-list article {
        padding: 28px;
        border-radius: 20px;
        background: #fff;
        border: 1px solid var(--line);
        display: grid;
        grid-template-columns: 55px 1fr;
        gap: 18px
    }

    .feature-list strong {
        width: 50px;
        height: 50px;
        border-radius: 15px;
        background: #def5ef;
        display: grid;
        place-items: center;
        color: #226d68
    }

    .feature-list h3 {
        margin: 2px 0 8px
    }

    .feature-list p {
        margin: 0;
        color: var(--muted);
        line-height: 1.65
    }

.solution-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px
}

.solution {
    border-radius: 28px;
    padding: 38px;
    min-height: 410px;
    color: #fff;
    position: relative;
    overflow: hidden
}

    .solution:after {
        content: "";
        position: absolute;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.2);
        right: -80px;
        bottom: -80px
    }

    .solution h2 {
        font-size: 40px;
        margin-top: 85px
    }

    .solution p {
        max-width: 520px;
        line-height: 1.7;
        color: rgba(255,255,255,.8)
    }

    .solution.one {
        background: linear-gradient(145deg,#123b45,#1b6a70)
    }

    .solution.two {
        background: linear-gradient(145deg,#173553,#297a8d)
    }

    .solution.three {
        background: linear-gradient(145deg,#33492f,#678056)
    }

    .solution.four {
        background: linear-gradient(145deg,#3d2f55,#705f92)
    }

.package-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.package {
    border: 1px solid var(--line);
    border-radius: 27px;
    padding: 34px;
    background: #fff;
    position: relative
}

    .package.featured {
        background: var(--navy);
        color: #fff;
        transform: translateY(-15px);
        box-shadow: var(--shadow)
    }

    .package small {
        text-transform: uppercase;
        letter-spacing: .18em;
        font-size: 10px
    }

    .package h2 {
        font-size: 34px
    }

    .package ul {
        list-style: none;
        padding: 0;
        margin: 25px 0
    }

    .package li {
        padding: 10px 0;
        border-bottom: 1px solid rgba(130,160,165,.22)
    }

        .package li:before {
            content: "✓";
            color: var(--mint);
            margin-right: 9px
        }

.knowledge-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr .8fr;
    gap: 18px
}

.knowledge-card {
    border-radius: 24px;
    padding: 32px;
    background: #fff;
    border: 1px solid var(--line);
    min-height: 280px
}

    .knowledge-card:first-child {
        grid-row: span 2;
        min-height: 580px;
        background: linear-gradient(145deg,#0f3440,#1b5a64);
        color: #fff
    }

    .knowledge-card h3 {
        font-size: 28px;
        margin-top: 70px
    }

    .knowledge-card:first-child h3 {
        font-size: 46px;
        margin-top: 220px
    }

    .knowledge-card p {
        line-height: 1.7;
        color: var(--muted)
    }

    .knowledge-card:first-child p {
        color: #bdd2d5
    }

.contact-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 60px
}

.contact-card {
    background: var(--ice);
    border-radius: 26px;
    padding: 35px
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px
}

.field {
    display: flex;
    flex-direction: column;
    gap: 7px
}

    .field.full {
        grid-column: 1/-1
    }

    .field label {
        font-size: 12px;
        font-weight: 700
    }

    .field input, .field textarea, .field select {
        width: 100%;
        padding: 14px;
        border: 1px solid #ccdfdf;
        border-radius: 12px;
        font: inherit;
        background: #fff
    }

    .field textarea {
        min-height: 140px;
        resize: vertical
    }

.notice {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6
}

.reveal {
    opacity: 0;
    transform: translateY(25px);
    transition: .7s
}

    .reveal.visible {
        opacity: 1;
        transform: none
    }

footer {
    background: #071b23;
    color: #d0e0e2;
    padding-top: 70px
}

.footer-call {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 55px;
    border-bottom: 1px solid rgba(255,255,255,.1)
}

    .footer-call h2 {
        font-size: 38px;
        max-width: 670px;
        margin: 7px 0
    }

    .footer-call small {
        color: var(--mint);
        text-transform: uppercase;
        letter-spacing: .18em
    }

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3,1fr);
    gap: 45px;
    padding: 55px 0
}

.footer-logo {
    width: 230px;
    filter: brightness(0) invert(1)
}

.footer-grid h3 {
    font-size: 14px
}

.footer-grid a, .footer-grid p {
    display: block;
    text-decoration: none;
    color: #9eb7bb;
    font-size: 13px;
    line-height: 1.8
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    padding: 22px 0;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 12px;
    color: #86a4a9
}

    .footer-bottom a {
        text-decoration: none;
        margin-left: 20px
    }

.nav-toggle {
    width: 42px;
    height: 42px
}

    .nav-toggle i {
        display: block;
        width: 23px;
        height: 2px;
        background: var(--ink);
        margin: 5px auto
    }

@media(max-width:980px) {
    .header nav {
        position: fixed;
        top: 122px;
        left: 20px;
        right: 20px;
        background: #fff;
        padding: 25px;
        border-radius: 20px;
        box-shadow: var(--shadow);
        display: none;
        flex-direction: column
    }

        .header nav.open {
            display: flex
        }

    .nav-toggle {
        display: block;
        margin-left: auto
    }

    .header-cta {
        display: none
    }

    .hero-grid, .heading.split, .feature-layout, .contact-grid {
        grid-template-columns: 1fr
    }

    .hero-grid {
        padding: 70px 0
    }

    .vision-stage {
        min-height: 480px
    }

    .module-grid, .package-grid {
        grid-template-columns: 1fr 1fr
    }

    .workflow {
        grid-template-columns: 1fr 1fr
    }

    .knowledge-grid {
        grid-template-columns: 1fr 1fr
    }

    .knowledge-card:first-child {
        grid-row: auto;
        grid-column: 1/-1;
        min-height: 400px
    }

        .knowledge-card:first-child h3 {
            margin-top: 120px
        }

    .sticky-copy {
        position: static
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:650px) {
    .shell {
        width: min(100% - 28px,1180px)
    }

    .topline div div {
        display: none
    }

    .brand img {
        width: 190px
    }

    .header {
        height: 76px
    }

        .header nav {
            top: 112px
        }

    .hero, .hero-grid {
        min-height: auto
    }

    .hero-grid {
        padding: 70px 0 40px
    }

    .vision-stage {
        min-height: 350px;
        transform: scale(.82);
        margin: -35px
    }

    .cockpit {
        inset: 20px -55px 20px -25px
    }

    .float-card.a {
        right: -10px
    }

    .section {
        padding: 75px 0
    }

    .module-grid, .package-grid, .solution-grid, .workflow, .knowledge-grid, .form-grid {
        grid-template-columns: 1fr
    }

        .workflow article {
            border-left: 0;
            border-top: 1px solid rgba(255,255,255,.12)
        }

    .package.featured {
        transform: none
    }

    .knowledge-card:first-child {
        grid-column: auto
    }

    .footer-call, .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px
    }

    .footer-grid {
        grid-template-columns: 1fr
    }

    .footer-bottom a {
        margin: 0 18px 0 0
    }
}


/* ========================================================================== DATSIS PORTAL V6 */
:root {
    --dv-deep: #071b24;
    --dv-navy: #0b3440;
    --dv-teal: #0f6f73;
    --dv-mint: #77e4c3;
    --dv-ice: #edf8f6;
    --dv-text: #102d37;
    --dv-muted: #677d84;
    --dv-line: #d8e7e5;
    --dv-white: #fff;
    --dv-shadow: 0 24px 70px rgba(7,39,49,.16)
}

.dv-body {
    background: #f7fbfa;
    color: var(--dv-text);
    padding-left: 250px;
    min-height: 100vh
}

.dv-family {
    height: 32px;
    position: fixed;
    z-index: 120;
    top: 0;
    left: 250px;
    right: 0;
    background: #06171e;
    color: #91aeb3;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 28px;
    font-size: 11px;
    letter-spacing: .06em
}

    .dv-family span {
        color: #fff;
        font-weight: 700;
        margin-right: auto;
        text-transform: uppercase
    }

    .dv-family a {
        text-decoration: none
    }

.dv-rail {
    position: fixed;
    z-index: 130;
    inset: 0 auto 0 0;
    width: 250px;
    background: linear-gradient(180deg,#0a2f3a,#061a22);
    color: #d5e7e8;
    padding: 27px 18px 22px;
    display: flex;
    flex-direction: column;
    box-shadow: 18px 0 50px rgba(4,27,35,.12)
}

.dv-brand {
    display: block;
    padding: 2px 10px 32px
}

    .dv-brand img {
        display: block;
        width: 205px;
        filter: brightness(0) invert(1)
    }

.dv-nav {
    display: flex;
    flex-direction: column;
    gap: 7px
}

    .dv-nav a {
        display: grid;
        grid-template-columns: 28px 1fr auto;
        align-items: center;
        min-height: 48px;
        padding: 0 13px;
        color: #b9cfd2;
        text-decoration: none;
        border-radius: 13px;
        font-size: 13px;
        font-weight: 650;
        transition: .25s
    }

        .dv-nav a:hover, .dv-nav a.active {
            background: rgba(119,228,195,.12);
            color: #fff;
            transform: translateX(3px)
        }

    .dv-nav i {
        font-style: normal;
        color: var(--dv-mint);
        font-size: 16px
    }

    .dv-nav b {
        display: grid;
        place-items: center;
        width: 21px;
        height: 21px;
        border-radius: 50%;
        background: #ff786a;
        color: #fff;
        font-size: 10px
    }

.dv-rail-bottom {
    margin-top: auto;
    display: grid;
    gap: 10px
}

.dv-cart-button, .dv-login-button {
    border: 0;
    border-radius: 13px;
    min-height: 47px;
    padding: 0 14px;
    font: inherit;
    font-weight: 750;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer
}

.dv-cart-button {
    background: rgba(255,255,255,.08);
    color: #d7e9ea
}

    .dv-cart-button b {
        background: var(--dv-mint);
        color: #082830;
        border-radius: 999px;
        min-width: 23px;
        height: 23px;
        display: grid;
        place-items: center
    }

.dv-login-button {
    background: var(--dv-mint);
    color: #092b33
}

.dv-page {
    min-height: 100vh;
    padding-top: 32px
}

.dv-topbar {
    height: 67px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--dv-line);
    position: sticky;
    top: 32px;
    z-index: 80
}

    .dv-topbar > div {
        display: flex;
        align-items: center;
        gap: 10px
    }

    .dv-topbar small {
        color: var(--dv-muted)
    }

.dv-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #41d3a5;
    box-shadow: 0 0 0 7px rgba(65,211,165,.12);
    animation: dvPulse 2s infinite
}

.dv-top-actions {
    gap: 23px !important
}

    .dv-top-actions a {
        text-decoration: none;
        font-size: 13px;
        font-weight: 700
    }

.dv-top-login {
    background: var(--dv-deep);
    color: #fff;
    padding: 10px 16px;
    border-radius: 999px
}

.dv-dashboard-hero {
    min-height: 700px;
    padding: 85px clamp(30px,5vw,80px) 70px;
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 65px;
    align-items: center;
    background: radial-gradient(circle at 80% 5%,rgba(119,228,195,.22),transparent 26%),linear-gradient(135deg,#f8fcfb 0%,#eaf6f4 100%);
    position: relative;
    overflow: hidden
}

    .dv-dashboard-hero:before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(10,66,76,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(10,66,76,.05) 1px,transparent 1px);
        background-size: 50px 50px;
        mask-image: linear-gradient(to right,transparent,#000)
    }

.dv-hero-copy, .dv-portal-window {
    position: relative
}

.dv-kicker, .dv-section-head > span, .dv-shop-copy > span, .dv-simple-hero > span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2em;
    color: var(--dv-teal);
    text-transform: uppercase
}

.dv-hero-copy h1 {
    font-size: clamp(45px,5vw,75px);
    line-height: 1.02;
    margin: 18px 0 24px
}

    .dv-hero-copy h1 em {
        font-style: normal;
        color: var(--dv-teal)
    }

.dv-hero-copy > p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--dv-muted);
    max-width: 620px
}

.dv-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 30px
}

.dv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    border: 0;
    font: inherit;
    cursor: pointer
}

.dv-btn-primary {
    background: var(--dv-deep);
    color: #fff;
    box-shadow: 0 14px 34px rgba(7,39,49,.22)
}

.dv-btn-outline {
    border: 1px solid #abcac7;
    color: var(--dv-text);
    background: rgba(255,255,255,.55)
}

.dv-btn-light {
    background: #fff;
    color: var(--dv-deep)
}

.dv-trust {
    display: flex;
    gap: 28px;
    margin-top: 42px;
    color: var(--dv-muted);
    font-size: 12px
}

    .dv-trust b {
        display: block;
        color: var(--dv-text);
        font-size: 24px
    }

.dv-portal-window {
    background: #f8fbfb;
    border: 1px solid rgba(13,71,81,.14);
    border-radius: 25px;
    box-shadow: 0 42px 90px rgba(7,37,47,.25);
    overflow: visible;
    transform: perspective(1000px) rotateY(-4deg);
    transition: .25s
}

.dv-window-bar {
    height: 43px;
    background: #0a2f39;
    border-radius: 24px 24px 0 0;
    display: flex;
    align-items: center;
    padding: 0 15px;
    gap: 7px;
    color: #b7d0d3
}

    .dv-window-bar span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #668b91
    }

        .dv-window-bar span:first-child {
            background: #77e4c3
        }

    .dv-window-bar small {
        margin-left: 10px;
        font-size: 9px;
        letter-spacing: .12em
    }

.dv-window-layout {
    height: 440px;
    display: grid;
    grid-template-columns: 54px 1fr
}

    .dv-window-layout > nav {
        background: #103b45;
        padding: 22px 11px
    }

        .dv-window-layout > nav i {
            display: block;
            height: 30px;
            border-radius: 8px;
            background: rgba(255,255,255,.08);
            margin-bottom: 12px
        }

.dv-window-main {
    padding: 25px
}

.dv-window-title {
    display: flex;
    justify-content: space-between;
    align-items: center
}

    .dv-window-title small {
        display: block;
        color: #809297
    }

    .dv-window-title strong {
        font-size: 21px
    }

    .dv-window-title > span {
        font-size: 9px;
        background: #ddf6ef;
        color: #187b69;
        padding: 7px 10px;
        border-radius: 999px
    }

.dv-kpi-row {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin: 21px 0
}

    .dv-kpi-row article, .dv-window-panels article {
        background: #fff;
        border: 1px solid #e0ebea;
        border-radius: 14px;
        padding: 14px
    }

    .dv-kpi-row small {
        display: block;
        color: #87999d;
        font-size: 9px
    }

    .dv-kpi-row b {
        font-size: 27px
    }

    .dv-kpi-row em {
        display: block;
        font-style: normal;
        color: #48a78e;
        font-size: 9px;
        margin-top: 3px
    }

.dv-window-panels {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 11px
}

.dv-chart > div small, .dv-feed > small {
    display: block;
    color: #84979b;
    font-size: 9px
}

.dv-chart > div b {
    font-size: 12px
}

.dv-chart > span {
    height: 120px;
    display: flex;
    align-items: end;
    gap: 8px;
    margin-top: 15px
}

    .dv-chart > span i {
        height: var(--h);
        flex: 1;
        background: linear-gradient(#74e4c3,#167b77);
        border-radius: 5px 5px 2px 2px
    }

.dv-feed p {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: 7px;
    align-items: center;
    font-size: 9px;
    padding: 9px 0;
    margin: 0;
    border-bottom: 1px solid #edf2f1
}

    .dv-feed p i {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #d8f5ed
    }

    .dv-feed p b {
        color: #73898e
    }

.dv-float {
    position: absolute;
    background: rgba(7,36,45,.9);
    backdrop-filter: blur(13px);
    color: #fff;
    border: 1px solid rgba(255,255,255,.14);
    padding: 13px 16px;
    border-radius: 13px;
    box-shadow: 0 15px 35px rgba(0,0,0,.2);
    animation: dvFloat 5s ease-in-out infinite
}

    .dv-float small {
        display: block;
        color: var(--dv-mint);
        font-size: 8px;
        letter-spacing: .13em
    }

.dv-float-a {
    top: 65px;
    right: -35px
}

.dv-float-b {
    bottom: 35px;
    left: -30px;
    animation-delay: -2.3s
}

.dv-live-news {
    margin: 0 clamp(30px,5vw,80px);
    transform: translateY(-18px);
    background: #fff;
    border: 1px solid var(--dv-line);
    border-radius: 20px;
    box-shadow: var(--dv-shadow);
    position: relative;
    z-index: 5
}

.dv-news-head {
    height: 58px;
    padding: 0 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--dv-line)
}

    .dv-news-head span {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .18em
    }

    .dv-news-head i {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #ff786a;
        border-radius: 50%;
        margin-right: 8px;
        box-shadow: 0 0 0 6px rgba(255,120,106,.1)
    }

    .dv-news-head a {
        text-decoration: none;
        font-size: 12px;
        font-weight: 750;
        color: var(--dv-teal)
    }

.dv-news-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr)
}

    .dv-news-grid a {
        padding: 27px;
        text-decoration: none;
        border-right: 1px solid var(--dv-line);
        transition: .25s
    }

        .dv-news-grid a:last-child {
            border-right: 0
        }

        .dv-news-grid a:hover {
            background: var(--dv-ice);
            transform: translateY(-3px)
        }

    .dv-news-grid small, .dv-products article > span, .dv-news-page article small {
        color: var(--dv-teal);
        font-size: 9px;
        font-weight: 850;
        letter-spacing: .16em
    }

    .dv-news-grid h3 {
        font-size: 20px;
        margin: 10px 0
    }

    .dv-news-grid p {
        color: var(--dv-muted);
        line-height: 1.55;
        font-size: 13px
    }

    .dv-news-grid b {
        font-size: 11px
    }

.dv-section {
    padding: 100px clamp(30px,5vw,80px)
}

.dv-section-head {
    max-width: 760px;
    margin-bottom: 45px
}

    .dv-section-head h2, .dv-shop-copy h2, .dv-simple-hero h1 {
        font-size: clamp(38px,4vw,58px);
        line-height: 1.06;
        margin: 14px 0
    }

    .dv-section-head p, .dv-shop-copy p, .dv-simple-hero p {
        color: var(--dv-muted);
        font-size: 16px;
        line-height: 1.7
    }

.dv-module-bento {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px
}

    .dv-module-bento article {
        background: #fff;
        border: 1px solid var(--dv-line);
        border-radius: 20px;
        padding: 27px;
        min-height: 230px;
        position: relative;
        overflow: hidden;
        transition: .3s
    }

        .dv-module-bento article:hover {
            transform: translateY(-6px);
            box-shadow: var(--dv-shadow)
        }

        .dv-module-bento article > span {
            font-family: monospace;
            color: #45a88f
        }

    .dv-module-bento h3 {
        font-size: 24px;
        margin-top: 55px
    }

    .dv-module-bento p {
        color: var(--dv-muted);
        line-height: 1.6
    }

.dv-module-large {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 475px !important;
    background: linear-gradient(145deg,#0a303b,#0f6570) !important;
    color: #fff
}

    .dv-module-large p {
        color: #bcd2d5
    }

.dv-mini-docs {
    position: absolute;
    right: 30px;
    bottom: 28px;
    width: 55%;
    height: 150px
}

    .dv-mini-docs i {
        position: absolute;
        width: 80%;
        height: 90px;
        border-radius: 12px;
        background: #fff;
        right: 0;
        bottom: 0;
        box-shadow: 0 15px 40px rgba(0,0,0,.18)
    }

        .dv-mini-docs i:nth-child(2) {
            right: 28px;
            bottom: 24px;
            background: #dff6ef
        }

        .dv-mini-docs i:nth-child(3) {
            right: 55px;
            bottom: 48px;
            background: #77e4c3
        }

.dv-shop-teaser {
    margin: 20px clamp(30px,5vw,80px) 90px;
    padding: 55px;
    border-radius: 28px;
    background: linear-gradient(135deg,#08242d,#0e5c66);
    color: #fff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    overflow: hidden;
    position: relative
}

.dv-shop-copy > span {
    color: var(--dv-mint)
}

.dv-shop-copy p {
    color: #bdd0d3
}

.dv-shop-stack {
    height: 380px;
    position: relative
}

    .dv-shop-stack article {
        position: absolute;
        width: 72%;
        right: 0;
        background: #fff;
        color: var(--dv-text);
        padding: 22px;
        border-radius: 18px;
        box-shadow: 0 18px 50px rgba(0,0,0,.22);
        transform: rotate(-2deg)
    }

        .dv-shop-stack article:nth-child(2) {
            right: 55px;
            top: 105px;
            transform: rotate(3deg)
        }

        .dv-shop-stack article:nth-child(3) {
            right: 5px;
            top: 210px;
            transform: rotate(-1deg)
        }

    .dv-shop-stack small {
        font-size: 9px;
        color: var(--dv-teal);
        letter-spacing: .15em
    }

    .dv-shop-stack h3 {
        margin: 7px 0
    }

.dv-simple-hero {
    padding: 90px clamp(30px,5vw,80px);
    background: linear-gradient(135deg,#eaf7f4,#fff)
}

    .dv-simple-hero p {
        max-width: 720px
    }

.dv-news-page {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px
}

    .dv-news-page article {
        background: #fff;
        border: 1px solid var(--dv-line);
        border-radius: 22px;
        padding: 34px
    }

        .dv-news-page article h2 {
            font-size: 28px
        }

        .dv-news-page article p {
            color: var(--dv-muted);
            line-height: 1.7
        }

        .dv-news-page article > a:not(.dv-btn) {
            color: var(--dv-teal);
            font-weight: 800;
            text-decoration: none
        }

.dv-news-feature {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg,#0b3440,#0f6f73) !important;
    color: #fff !important
}

    .dv-news-feature p {
        color: #c7d9db !important
    }

.dv-news-icon {
    font-size: 90px;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,.2))
}

.dv-shop-filter {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 25px
}

    .dv-shop-filter button {
        border: 1px solid var(--dv-line);
        background: #fff;
        border-radius: 999px;
        padding: 10px 17px;
        font: inherit;
        font-size: 12px;
        font-weight: 750
    }

        .dv-shop-filter button.active {
            background: var(--dv-deep);
            color: #fff
        }

.dv-products {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

    .dv-products article {
        background: #fff;
        border: 1px solid var(--dv-line);
        border-radius: 22px;
        padding: 28px;
        display: flex;
        flex-direction: column;
        min-height: 410px
    }

        .dv-products article.featured {
            background: linear-gradient(145deg,#0a3440,#0e6570);
            color: #fff;
            transform: translateY(-10px)
        }

    .dv-products h2 {
        font-size: 27px
    }

    .dv-products p {
        line-height: 1.65;
        color: var(--dv-muted)
    }

    .dv-products .featured p {
        color: #c2d8da
    }

    .dv-products ul {
        padding-left: 19px;
        line-height: 2;
        color: var(--dv-muted)
    }

    .dv-products .featured ul {
        color: #c2d8da
    }

    .dv-products article > div {
        margin-top: auto;
        border-top: 1px solid var(--dv-line);
        padding-top: 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px
    }

    .dv-products .featured article > div {
        border-color: rgba(255,255,255,.18)
    }

    .dv-products button {
        border: 0;
        border-radius: 10px;
        background: var(--dv-mint);
        color: #092a32;
        padding: 11px 14px;
        font-weight: 850;
        cursor: pointer
    }

.dv-login-page {
    min-height: calc(100vh - 100px);
    display: grid;
    grid-template-columns: 1fr 430px;
    gap: 80px;
    align-items: center;
    padding: 80px clamp(30px,8vw,140px);
    background: linear-gradient(135deg,#071b24 0%,#0b414c 55%,#e9f7f3 55%)
}

.dv-login-info {
    color: #fff
}

    .dv-login-info > span {
        color: var(--dv-mint);
        font-size: 11px;
        font-weight: 850;
        letter-spacing: .18em
    }

    .dv-login-info h1 {
        font-size: 65px;
        margin: 18px 0
    }

    .dv-login-info p {
        color: #bad0d3;
        font-size: 18px;
        line-height: 1.7;
        max-width: 620px
    }

    .dv-login-info > div {
        display: flex;
        gap: 12px;
        margin-top: 17px
    }

        .dv-login-info > div b {
            color: var(--dv-mint)
        }

.dv-login-card {
    background: #fff;
    border-radius: 25px;
    padding: 36px;
    box-shadow: var(--dv-shadow);
    display: grid;
    gap: 17px
}

    .dv-login-card > img {
        width: 230px;
        margin-bottom: 13px
    }

    .dv-login-card label {
        display: grid;
        gap: 7px;
        font-size: 12px;
        font-weight: 750
    }

    .dv-login-card input[type=text], .dv-login-card input[type=password] {
        padding: 14px;
        border: 1px solid var(--dv-line);
        border-radius: 11px;
        font: inherit
    }

.dv-login-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px
}

    .dv-login-row label {
        display: flex;
        align-items: center;
        grid-template-columns: auto 1fr
    }

.dv-login-card small {
    color: var(--dv-muted);
    line-height: 1.5
}

.dv-footer {
    background: #061820;
    color: #a9c1c4;
    padding: 38px clamp(30px,5vw,80px);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center
}

    .dv-footer img {
        width: 220px;
        filter: brightness(0) invert(1)
    }

    .dv-footer p {
        max-width: 550px;
        line-height: 1.6;
        font-size: 12px
    }

    .dv-footer > div:nth-child(2) {
        display: flex;
        gap: 20px
    }

    .dv-footer a {
        color: #c9dadc;
        text-decoration: none;
        font-size: 12px
    }

    .dv-footer > span {
        grid-column: 1/-1;
        border-top: 1px solid rgba(255,255,255,.09);
        padding-top: 18px;
        font-size: 10px
    }

.dv-cart {
    position: fixed;
    z-index: 300;
    inset: 0;
    display: none
}

    .dv-cart.open {
        display: block
    }

.dv-cart-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2,16,21,.62);
    border: 0;
    width: 100%
}

.dv-cart aside {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(430px,92vw);
    background: #fff;
    padding: 28px;
    display: flex;
    flex-direction: column;
    box-shadow: -20px 0 60px rgba(0,0,0,.2)
}

.dv-cart-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    border-bottom: 1px solid var(--dv-line);
    padding-bottom: 17px
}

    .dv-cart-head small {
        color: var(--dv-teal);
        letter-spacing: .15em
    }

    .dv-cart-head h2 {
        margin: 5px 0
    }

    .dv-cart-head button {
        border: 0;
        background: #eef5f4;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        font-size: 22px
    }

.dv-cart-items {
    display: grid;
    gap: 10px;
    padding: 20px 0;
    overflow: auto
}

.dv-cart-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    background: #f2f8f7;
    padding: 14px;
    border-radius: 12px
}

    .dv-cart-item button {
        border: 0;
        background: none;
        color: #b54d45;
        cursor: pointer
    }

.dv-empty {
    color: var(--dv-muted)
}

.dv-cart-footer {
    margin-top: auto;
    display: grid;
    gap: 10px
}

    .dv-cart-footer small {
        color: var(--dv-muted)
    }

.dv-rise {
    opacity: 0;
    transform: translateY(26px);
    transition: .7s
}

    .dv-rise.is-visible {
        opacity: 1;
        transform: none
    }

.dv-mobile-toggle {
    display: none
}

.dv-body .page-hero, .dv-body .section {
    margin: 0
}

.dv-body .shell {
    width: min(1100px,calc(100% - 50px))
}

@keyframes dvPulse {
    50% {
        box-shadow: 0 0 0 12px rgba(65,211,165,0)
    }
}

@keyframes dvFloat {
    50% {
        transform: translateY(-9px)
    }
}

@media(max-width:1100px) {
    .dv-body {
        padding-left: 0
    }

    .dv-family {
        left: 0
    }

    .dv-rail {
        transform: translateX(-105%);
        transition: .3s;
        top: 32px
    }

        .dv-rail.open {
            transform: none
        }

    .dv-mobile-toggle {
        display: block;
        position: fixed;
        z-index: 150;
        left: 18px;
        top: 44px;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 12px;
        background: #0a303a
    }

        .dv-mobile-toggle span {
            display: block;
            width: 22px;
            height: 2px;
            background: #fff;
            margin: 5px auto
        }

    .dv-topbar {
        padding-left: 80px
    }

    .dv-dashboard-hero {
        grid-template-columns: 1fr;
        padding-top: 60px
    }

    .dv-portal-window {
        max-width: 720px
    }

    .dv-module-bento {
        grid-template-columns: repeat(2,1fr)
    }

    .dv-products {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:720px) {
    .dv-family a {
        display: none
    }

    .dv-family {
        padding-left: 78px
    }

    .dv-top-actions a:not(.dv-top-login), .dv-topbar small {
        display: none
    }

    .dv-dashboard-hero {
        padding: 60px 18px 45px
    }

    .dv-hero-copy h1 {
        font-size: 43px
    }

    .dv-trust {
        gap: 14px
    }

    .dv-portal-window {
        transform: none
    }

    .dv-window-layout {
        height: 370px;
        grid-template-columns: 40px 1fr
    }

    .dv-window-main {
        padding: 14px
    }

    .dv-kpi-row {
        gap: 5px
    }

        .dv-kpi-row article {
            padding: 9px
        }

        .dv-kpi-row b {
            font-size: 20px
        }

    .dv-window-panels {
        grid-template-columns: 1fr
    }

    .dv-feed {
        display: none
    }

    .dv-float {
        display: none
    }

    .dv-live-news {
        margin: 0 14px
    }

    .dv-news-grid {
        grid-template-columns: 1fr
    }

        .dv-news-grid a {
            border-right: 0;
            border-bottom: 1px solid var(--dv-line)
        }

    .dv-section {
        padding: 70px 18px
    }

    .dv-module-bento, .dv-products, .dv-news-page {
        grid-template-columns: 1fr
    }

    .dv-module-large {
        grid-column: auto;
        grid-row: auto;
        min-height: 350px !important
    }

    .dv-shop-teaser {
        margin: 10px 14px 70px;
        padding: 35px 22px;
        grid-template-columns: 1fr
    }

    .dv-shop-stack {
        height: 330px
    }

        .dv-shop-stack article {
            width: 90%
        }

    .dv-news-feature {
        grid-column: auto
    }

    .dv-news-icon {
        display: none
    }

    .dv-login-page {
        grid-template-columns: 1fr;
        padding: 55px 18px;
        background: linear-gradient(180deg,#071b24 0 52%,#e9f7f3 52%)
    }

    .dv-login-info h1 {
        font-size: 46px
    }

    .dv-footer {
        grid-template-columns: 1fr
    }

        .dv-footer > div:nth-child(2) {
            flex-wrap: wrap
        }

    .dv-products article.featured {
        transform: none
    }
}

/* ==========================================================
   DATSIS VISION – HORIZONTALES PORTAL-LAYOUT
   Stabile Neufassung ohne seitliche Navigation
   ========================================================== */
.dv-topmenu-layout {
    padding-left: 0 !important;
    background: #f7fbfa;
}

    .dv-topmenu-layout .dv-family,
    .dv-topmenu-layout .dv-rail,
    .dv-topmenu-layout .dv-topbar,
    .dv-topmenu-layout .dv-mobile-toggle {
        display: none !important;
    }

    .dv-topmenu-layout .dv-page {
        min-height: 100vh;
        padding-top: 0 !important;
    }

.dv-site-header {
    position: sticky;
    top: 0;
    z-index: 180;
    width: 100%;
    background: rgba(255,255,255,.95);
    border-bottom: 1px solid rgba(9,56,68,.10);
    box-shadow: 0 9px 34px rgba(3,35,44,.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

    .dv-site-header.is-scrolled {
        box-shadow: 0 15px 45px rgba(3,35,44,.12);
    }

.dv-header-shell {
    width: min(1420px,calc(100% - 48px));
    margin: 0 auto;
}

.dv-familybar {
    height: 31px;
    color: #a9c3c6;
    background: #061920;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

    .dv-familybar .dv-header-shell {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }

    .dv-familybar span {
        color: #fff;
        font-weight: 850;
    }

    .dv-familybar nav {
        display: flex;
        align-items: center;
        gap: 22px;
    }

    .dv-familybar a {
        color: #a9c3c6;
        text-decoration: none;
        transition: color .2s ease;
    }

        .dv-familybar a:hover {
            color: #fff;
        }

.dv-mainnav-wrap {
    background: linear-gradient(180deg,rgba(255,255,255,.99),rgba(250,254,253,.96));
}

.dv-mainnav-row {
    min-height: 84px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.dv-top-brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    text-decoration: none;
}

    .dv-top-brand img {
        display: block;
        width: 215px;
        height: auto;
    }

.dv-primary-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-left: auto;
}

    .dv-primary-nav a {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 42px;
        padding: 0 12px;
        border-radius: 12px;
        color: #23424a;
        text-decoration: none;
        font-size: 13px;
        font-weight: 760;
        white-space: nowrap;
        transition: background .22s ease,color .22s ease,transform .22s ease;
    }

        .dv-primary-nav a:hover,
        .dv-primary-nav a.active {
            color: #07333e;
            background: #e9f7f3;
            transform: translateY(-1px);
        }

        .dv-primary-nav a:after {
            content: "";
            position: absolute;
            left: 13px;
            right: 13px;
            bottom: 3px;
            height: 2px;
            border-radius: 999px;
            background: #42cfa8;
            transform: scaleX(0);
            transform-origin: center;
            transition: transform .22s ease;
        }

        .dv-primary-nav a:hover:after,
        .dv-primary-nav a.active:after {
            transform: scaleX(1);
        }

        .dv-primary-nav a b {
            display: grid;
            place-items: center;
            width: 19px;
            height: 19px;
            margin-left: 6px;
            border-radius: 50%;
            background: #ff7669;
            color: #fff;
            font-size: 9px;
            line-height: 1;
        }

.dv-header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
}

.dv-system-state {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-right: 8px;
    color: #668087;
    font-size: 10px;
   /* font-weight: 750;*/
    white-space: nowrap;
}

    .dv-system-state i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #3fd09f;
        box-shadow: 0 0 0 6px rgba(63,208,159,.12);
        animation: dvPulse 2s infinite;
    }

.dv-header-cart {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid #d7e9e6;
    border-radius: 13px;
    color: #173942;
    background: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: .22s ease;
}

    .dv-header-cart:hover {
        border-color: #94dccc;
        background: #f1faf7;
        transform: translateY(-1px);
    }

    .dv-header-cart b {
        display: grid;
        place-items: center;
        min-width: 22px;
        height: 22px;
        padding: 0 5px;
        border-radius: 999px;
        background: #dff7f0;
        color: #08725e;
        font-size: 10px;
    }

.dv-header-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 17px;
    border-radius: 13px;
    background: linear-gradient(135deg,#0b3440,#0f5963);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
/*    font-weight: 850;
*/    white-space: nowrap;
    box-shadow: 0 10px 25px rgba(7,51,63,.17);
    transition: .22s ease;
}

    .dv-header-login:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 30px rgba(7,51,63,.24);
    }

    .dv-header-login span {
        color: #7de4c5;
        font-size: 15px;
    }

.dv-nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #0b3440;
    cursor: pointer;
}

    .dv-nav-toggle span {
        display: block;
        width: 21px;
        height: 2px;
        margin: 5px auto;
        border-radius: 2px;
        background: #fff;
        transition: transform .2s ease,opacity .2s ease;
    }

    .dv-nav-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg)
    }

    .dv-nav-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0
    }

    .dv-nav-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg)
    }

/* Breitere, ruhigere Portalwirkung unterhalb des neuen Menüs */
.dv-topmenu-layout .dv-dashboard-hero {
    padding-top: 78px;
}

.dv-topmenu-layout .dv-simple-hero {
    padding-top: 82px;
}

.dv-topmenu-layout .page-hero {
    padding-top: 95px;
}

.dv-topmenu-layout .dv-footer {
    padding-left: max(30px,calc((100vw - 1420px)/2));
    padding-right: max(30px,calc((100vw - 1420px)/2));
}

    .dv-topmenu-layout .dv-footer > div:nth-child(2) {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

@media(max-width:1320px) {
    .dv-header-shell {
        width: min(1220px,calc(100% - 36px))
    }

    .dv-mainnav-row {
        gap: 18px
    }

    .dv-top-brand img {
        width: 195px
    }

    .dv-primary-nav a {
        padding: 0 8px;
        font-size: 12px
    }

    .dv-system-state {
        display: none
    }
}

@media(max-width:1050px) {
    .dv-mainnav-row {
        position: relative;
        min-height: 76px
    }

    .dv-top-brand img {
        width: 190px
    }

    .dv-nav-toggle {
        display: block;
        margin-left: auto;
        order: 2
    }

    .dv-header-actions {
        order: 3
    }

    .dv-primary-nav {
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        right: 0;
        z-index: 20;
        display: none;
        margin: 0;
        padding: 14px;
        border: 1px solid #dbeae8;
        border-radius: 0 0 18px 18px;
        background: rgba(255,255,255,.99);
        box-shadow: 0 24px 50px rgba(4,35,43,.16);
    }

        .dv-primary-nav.open {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 7px;
        }

        .dv-primary-nav a {
            justify-content: center;
            min-height: 48px;
            background: #f4faf8;
        }

    .dv-topmenu-layout .dv-dashboard-hero {
        padding-top: 60px
    }
}

@media(max-width:720px) {
    .dv-header-shell {
        width: calc(100% - 26px)
    }

    .dv-familybar {
        height: 28px
    }

        .dv-familybar nav {
            display: none
        }

        .dv-familybar .dv-header-shell {
            justify-content: center
        }

    .dv-mainnav-row {
        min-height: 70px;
        gap: 8px
    }

    .dv-top-brand img {
        width: 166px
    }

    .dv-header-cart {
        width: 42px;
        padding: 0;
        justify-content: center
    }

        .dv-header-cart span {
            display: none
        }

    .dv-header-login {
        min-height: 42px;
        padding: 0 12px;
        font-size: 0
    }

        .dv-header-login:before {
            content: "Login";
            font-size: 11px
        }

        .dv-header-login span {
            display: none
        }

    .dv-nav-toggle {
        width: 42px;
        height: 42px
    }

    .dv-primary-nav.open {
        grid-template-columns: 1fr 1fr;
        padding: 10px
    }

    .dv-primary-nav a {
        font-size: 11px;
        padding: 0 6px
    }

    .dv-topmenu-layout .dv-dashboard-hero {
        padding-top: 50px
    }

    .dv-topmenu-layout .dv-simple-hero {
        padding-top: 62px
    }

    .dv-topmenu-layout .page-hero {
        padding-top: 75px
    }
}

@media(max-width:430px) {
    .dv-top-brand img {
        width: 148px
    }

    .dv-mainnav-row {
        gap: 6px
    }

    .dv-header-cart {
        display: none
    }

    .dv-primary-nav.open {
        grid-template-columns: 1fr
    }
}

/* Mobile Feinschliff für lange deutsche Begriffe und Portal-Cockpit */
@media(max-width:520px) {
    .dv-topmenu-layout .dv-hero-copy h1 {
        font-size: 36px !important;
        line-height: 1.03;
        overflow-wrap: anywhere;
        hyphens: auto;
    }

    .dv-topmenu-layout .dv-hero-copy > p {
        font-size: 16px;
    }

    .dv-topmenu-layout .dv-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

        .dv-topmenu-layout .dv-actions .dv-btn {
            width: 100%;
            padding-left: 14px;
            padding-right: 14px;
        }

    .dv-topmenu-layout .dv-trust {
        display: grid;
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 10px;
    }

    .dv-topmenu-layout .dv-portal-window {
        width: 100%;
        transform: none !important;
        overflow: hidden;
    }

    .dv-topmenu-layout .dv-window-layout {
        grid-template-columns: 40px minmax(0,1fr);
    }

    .dv-topmenu-layout .dv-window-main {
        min-width: 0;
        padding: 14px 10px;
    }

    .dv-topmenu-layout .dv-window-title strong {
        font-size: 17px;
    }

    .dv-topmenu-layout .dv-kpi-row {
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 5px;
    }

        .dv-topmenu-layout .dv-kpi-row article {
            min-width: 0;
            padding: 8px 6px;
        }

        .dv-topmenu-layout .dv-kpi-row small,
        .dv-topmenu-layout .dv-kpi-row em {
            font-size: 7px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .dv-topmenu-layout .dv-kpi-row b {
            font-size: 19px;
        }

    .dv-topmenu-layout .dv-window-panels {
        grid-template-columns: 1fr;
    }

    .dv-topmenu-layout .dv-feed {
        display: none;
    }
}

@media(max-width:520px) {
    .dv-topmenu-layout .dv-hero-copy h1 {
        overflow-wrap: normal;
        word-break: normal;
        hyphens: auto;
    }
}


/* =========================================================
   V7 – Startseiten-Login mit Sicherheits-Wow-Effekt
   ========================================================= */
.dv-login-hero {
    min-height: 790px;
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(130deg,#06181f 0%,#0b3440 49%,#105b65 100%);
    isolation: isolate
}

.dv-login-grid-bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-image: linear-gradient(rgba(156,239,224,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(156,239,224,.055) 1px,transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(90deg,#000 0%,rgba(0,0,0,.9) 58%,transparent 100%)
}

.dv-login-hero:after {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -290px;
    height: 440px;
    background: #fff;
    border-radius: 50% 50% 0 0/30% 30% 0 0;
    z-index: -1
}

.dv-login-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    opacity: .75;
    z-index: -2;
    animation: dvGlowDrift 9s ease-in-out infinite alternate
}

.dv-login-glow-a {
    width: 520px;
    height: 520px;
    right: -170px;
    top: -180px;
    background: radial-gradient(circle,rgba(105,226,194,.28),transparent 68%)
}

.dv-login-glow-b {
    width: 380px;
    height: 380px;
    left: 18%;
    bottom: -210px;
    background: radial-gradient(circle,rgba(96,184,213,.18),transparent 70%);
    animation-delay: -4s
}

.dv-login-hero-grid {
    min-height: 790px;
    display: grid;
    grid-template-columns: minmax(0,.92fr) minmax(520px,1.08fr);
    align-items: center;
    gap: 70px;
    padding-top: 45px;
    padding-bottom: 95px;
    position: relative
}

.dv-login-intro {
    position: relative;
    z-index: 4
}

    .dv-login-intro .dv-kicker {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: #9cefe0;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .21em
    }

        .dv-login-intro .dv-kicker:before {
            content: "";
            width: 35px;
            height: 1px;
            background: #69e2c2
        }

    .dv-login-intro h1 {
        font-size: clamp(56px,6.2vw,92px);
        line-height: .93;
        margin: 22px 0 28px;
        max-width: 690px
    }

        .dv-login-intro h1 em {
            font-style: normal;
            color: #69e2c2;
            text-shadow: 0 0 42px rgba(105,226,194,.22)
        }

    .dv-login-intro > p {
        font-size: 18px;
        line-height: 1.7;
        color: #c7dadd;
        max-width: 650px
    }

.dv-login-benefits {
    display: grid;
    gap: 9px;
    margin: 32px 0
}

    .dv-login-benefits article {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 11px 15px;
        border: 1px solid rgba(255,255,255,.09);
        background: rgba(255,255,255,.045);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        max-width: 510px;
        transition: .3s
    }

        .dv-login-benefits article:hover {
            transform: translateX(8px);
            background: rgba(255,255,255,.075)
        }

    .dv-login-benefits i {
        font-style: normal;
        color: #69e2c2;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .13em
    }

    .dv-login-benefits b, .dv-login-benefits small {
        display: block
    }

    .dv-login-benefits b {
        font-size: 11pt;
        font-weight:normal
    }

    .dv-login-benefits small {
        font-size: 10px;
        color: #a9c4c9;
        margin-top: 3px
    }

.dv-login-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap
}

.dv-text-link {
    color: #d9f6f0;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800
}

    .dv-text-link span {
        color: #69e2c2;
        margin-left: 5px
    }

.dv-login-intro .dv-btn-outline {
    border-color: rgba(255,255,255,.26);
    color: #fff
}

.dv-login-stage {
    min-height: 620px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1300px
}

.dv-security-orbit {
    position: absolute;
    width: 570px;
    height: 570px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    opacity: .72;
    pointer-events: none
}

.dv-orbit-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(105,226,194,.23);
    animation: dvOrbitSpin 20s linear infinite
}

    .dv-orbit-ring:before, .dv-orbit-ring:after {
        content: "";
        position: absolute;
        border-radius: 50%;
        background: #69e2c2;
        box-shadow: 0 0 16px #69e2c2
    }

    .dv-orbit-ring:before {
        width: 7px;
        height: 7px;
        left: 48%;
        top: -4px
    }

    .dv-orbit-ring:after {
        width: 5px;
        height: 5px;
        right: 7%;
        bottom: 23%
    }

    .dv-orbit-ring.ring-two {
        inset: 63px;
        animation-direction: reverse;
        animation-duration: 15s;
        border-style: dashed
    }

    .dv-orbit-ring.ring-three {
        inset: 132px;
        animation-duration: 11s;
        border-color: rgba(255,255,255,.18)
    }

.dv-security-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 96px;
    height: 96px;
    transform: translate(-50%,-50%);
    border-radius: 28px;
    background: linear-gradient(145deg,#69e2c2,#209fa0);
    box-shadow: 0 0 0 12px rgba(105,226,194,.08),0 20px 55px rgba(0,0,0,.26);
    display: grid;
    place-content: center;
    text-align: center;
    color: #07313b;
    animation: dvCorePulse 3s ease-in-out infinite
}

    .dv-security-core span {
        font-size: 24px;
        font-weight: 950;
        letter-spacing: -.04em
    }

    .dv-security-core small {
        font-size: 7px;
        font-weight: 950;
        letter-spacing: .2em
    }

.dv-orbit-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 18px #69e2c2
}

    .dv-orbit-dot.dot-one {
        top: 9%;
        left: 18%;
        animation: dvDotFloat 4s ease-in-out infinite
    }

    .dv-orbit-dot.dot-two {
        right: 2%;
        top: 45%;
        animation: dvDotFloat 5s ease-in-out -1s infinite
    }

    .dv-orbit-dot.dot-three {
        bottom: 5%;
        left: 41%;
        animation: dvDotFloat 4.5s ease-in-out -2s infinite
    }

.dv-home-login {
    width: min(455px,92%);
    position: relative;
    z-index: 4;
    background: rgba(250,255,255,.96);
    color: #0d2530;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 30px;
    padding: 30px;
    box-shadow: 0 38px 95px rgba(0,0,0,.34),inset 0 1px 0 #fff;
    backdrop-filter: blur(22px);
    transform: rotateY(-3deg) rotateX(1deg);
    transition: transform .35s,box-shadow .35s
}

    .dv-home-login:hover {
        transform: rotateY(0) rotateX(0) translateY(-5px);
        box-shadow: 0 46px 110px rgba(0,0,0,.38)
    }

    .dv-home-login:before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: 30px;
        padding: 1px;
        background: linear-gradient(135deg,rgba(105,226,194,.9),transparent 34%,rgba(255,255,255,.85));
        mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
        mask-composite: exclude;
        pointer-events: none
    }

    .dv-home-login header {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        align-items: flex-start;
        margin-bottom: 20px
    }

        .dv-home-login header small {
            color: #238c85;
            font-size: 8px;
            font-weight: 950;
            letter-spacing: .17em
        }

    .dv-home-login h2 {
        font-size: 30px;
        margin: 5px 0 0;
        letter-spacing: -.04em
    }

.dv-live-state {
    white-space: nowrap;
    font-size: 9pt;
/*    font-weight: 900;
*/    color: #22756f;
    background: #e5faf4;
    border-radius: 999px;
    padding: 8px 10px
}

    .dv-live-state i {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #27c985;
        margin-right: 5px;
        box-shadow: 0 0 0 4px rgba(39,201,133,.12);
        animation: dvLivePulse 1.8s infinite
    }

.dv-login-role {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #eaf4f3;
    padding: 4px;
    border-radius: 13px;
    margin-bottom: 18px
}

    .dv-login-role button {
        border: 0;
        background: transparent;
        border-radius: 10px;
        padding: 10px 8px;
        color: #687a80;
        font: inherit;
        font-size: 10px;
        font-weight: 850;
        cursor: pointer
    }

        .dv-login-role button.active {
            background: #fff;
            color: #0d2c37;
            box-shadow: 0 6px 18px rgba(13,44,55,.09)
        }

.dv-field {
    display: grid;
    gap: 7px;
    margin-top: 14px
}

    .dv-field > span:first-child {
        font-size: 10px;
        font-weight: 850;
        color: #344e56
    }

.dv-input-wrap {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    border: 1px solid #d9e9e8;
    background: #fff;
    border-radius: 13px;
    overflow: hidden;
    transition: .25s
}

    .dv-input-wrap:focus-within {
        border-color: #45cdb3;
        box-shadow: 0 0 0 4px rgba(69,205,179,.12)
    }

    .dv-input-wrap > i {
        font-style: normal;
        text-align: center;
        color: #299c91;
        font-size: 11px
    }

    .dv-input-wrap input {
        min-width: 0;
        border: 0;
        outline: 0;
        padding: 14px 8px;
        font: inherit;
        font-size: 12px;
        color: #0d2530
    }

    .dv-input-wrap button {
        border: 0;
        background: transparent;
        color: #348d86;
        padding: 0 12px;
        font-size: 9px;
        font-weight: 850;
        cursor: pointer
    }

.dv-login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin: 15px 0;
    font-size: 9px;
    color: #60767c
}

    .dv-login-options label {
        display: flex;
        align-items: center;
        gap: 6px
    }

    .dv-login-options a {
        color: #238c85;
        text-decoration: none
    }

.dv-login-submit {
    width: 100%;
    border: 0;
    border-radius: 14px;
    padding: 15px 17px;
    background: linear-gradient(135deg,#0d2c37,#145d67);
    color: #fff;
    font: inherit;
    font-size: 10pt;
/*    font-weight: 900;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(13,44,55,.22);
    transition: .3s
}

    .dv-login-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 19px 38px rgba(13,44,55,.27)
    }

    .dv-login-submit i {
        font-style: normal;
        color: #69e2c2;
        font-size: 18px
    }

    .dv-login-submit.loading span:after {
        content: " …"
    }

.dv-login-feedback {
    min-height: 17px;
    margin: 8px 0 0;
    text-align: center;
    font-size: 9px;
    font-weight: 750
}

    .dv-login-feedback.error {
        color: #bb4c4c
    }

    .dv-login-feedback.success {
        color: #168b65
    }

.dv-home-login footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #e3eeed;
    margin-top: 12px;
    padding-top: 13px;
    font-size: 8pt;
    color: #73868c
}

    .dv-home-login footer > span:first-child i {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #42caa1;
        margin-right: 4px
    }

    .dv-home-login footer a {
        color: #238c85;
        text-decoration: none;
        font-size:8pt
       /* font-weight: 850*/
    }

.dv-status-card {
    position: absolute;
    z-index: 5;
    width: 155px;
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(7,35,43,.78);
    backdrop-filter: blur(14px);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,.23);
    animation: dvCardFloat 5s ease-in-out infinite
}

    .dv-status-card small, .dv-status-card b, .dv-status-card span {
        display: block
    }

    .dv-status-card small {
        font-size: 7px;
        color: #69e2c2;
        font-weight: 950;
        letter-spacing: .13em
    }

    .dv-status-card b {
        font-size: 11pt;
        margin: 5px 0 3px;
        font-weight:normal
    }

    .dv-status-card span {
        font-size: 8px;
        color: #a8c4c9
    }

.dv-status-card-a {
    left: -5px;
    top: 115px
}

.dv-status-card-b {
    right: -12px;
    top: 175px;
    animation-delay: -1.5s
}

.dv-status-card-c {
    right: 15px;
    bottom: 95px;
    animation-delay: -3s
}

.dv-scan-line {
    position: absolute;
    z-index: 3;
    left: 13%;
    right: 8%;
    height: 1px;
    top: 15%;
    background: linear-gradient(90deg,transparent,#69e2c2,transparent);
    box-shadow: 0 0 18px #69e2c2;
    animation: dvScan 5s ease-in-out infinite;
    opacity: .55
}

.dv-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    gap: 7px;
    text-decoration: none;
    color: #9ac0c4;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .16em;
    z-index: 6
}

    .dv-scroll-cue span {
        width: 23px;
        height: 37px;
        border: 1px solid rgba(255,255,255,.3);
        border-radius: 999px;
        position: relative
    }

        .dv-scroll-cue span:after {
            content: "";
            position: absolute;
            width: 3px;
            height: 7px;
            border-radius: 3px;
            background: #69e2c2;
            left: 9px;
            top: 7px;
            animation: dvScrollDot 1.8s infinite
        }

@keyframes dvGlowDrift {
    to {
        transform: translate3d(40px,25px,0) scale(1.12)
    }
}

@keyframes dvOrbitSpin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes dvCorePulse {
    50% {
        transform: translate(-50%,-50%) scale(1.06);
        box-shadow: 0 0 0 19px rgba(105,226,194,.035),0 20px 65px rgba(0,0,0,.3)
    }
}

@keyframes dvDotFloat {
    50% {
        transform: translateY(-14px);
        opacity: .55
    }
}

@keyframes dvLivePulse {
    50% {
        box-shadow: 0 0 0 8px rgba(39,201,133,0)
    }
}

@keyframes dvCardFloat {
    50% {
        transform: translateY(-10px)
    }
}

@keyframes dvScan {
    0%,100% {
        top: 13%;
        opacity: 0
    }

    20% {
        opacity: .7
    }

    80% {
        opacity: .7
    }

    50% {
        top: 83%
    }
}

@keyframes dvScrollDot {
    0% {
        transform: translateY(0);
        opacity: 0
    }

    30% {
        opacity: 1
    }

    100% {
        transform: translateY(15px);
        opacity: 0
    }
}

@media(max-width:1120px) {
    .dv-login-hero-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        padding-top: 90px
    }

    .dv-login-intro {
        text-align: center
    }

        .dv-login-intro > p, .dv-login-benefits article {
            margin-left: auto;
            margin-right: auto
        }

    .dv-login-actions {
        justify-content: center
    }

    .dv-login-stage {
        min-height: 650px
    }

    .dv-login-hero {
        min-height: 1420px
    }

        .dv-login-hero:after {
            bottom: -330px
        }

    .dv-scroll-cue {
        display: none
    }
}

@media(max-width:680px) {
    .dv-login-hero {
        min-height: 1240px
    }

    .dv-login-hero-grid {
        padding-top: 60px;
        padding-bottom: 70px
    }

    .dv-login-intro h1 {
        font-size: 52px
    }

    .dv-login-intro > p {
        font-size: 15px
    }

    .dv-login-benefits {
        display: none
    }

    .dv-login-stage {
        min-height: 585px;
        margin: 0 -12px
    }

    .dv-security-orbit {
        width: 480px;
        height: 480px;
        opacity: .45
    }

    .dv-home-login {
        width: calc(100% - 20px);
        padding: 22px;
        border-radius: 23px;
        transform: none
    }

        .dv-home-login:hover {
            transform: translateY(-3px)
        }

        .dv-home-login header {
            display: block
        }

    .dv-live-state {
        display: inline-flex;
        margin-top: 10px
    }

    .dv-home-login h2 {
        font-size: 27px
    }

    .dv-status-card {
        display: none
    }

    .dv-home-login footer {
        flex-direction: column
    }

    .dv-login-options {
        font-size: 8px
    }

    .dv-login-intro .dv-kicker {
        font-size: 8px
    }

    .dv-login-actions {
        gap: 12px
    }

    .dv-scan-line {
        display: none
    }
}

@media(prefers-reduced-motion:reduce) {
    .dv-login-glow, .dv-orbit-ring, .dv-security-core, .dv-orbit-dot, .dv-live-state i, .dv-status-card, .dv-scan-line, .dv-scroll-cue span:after {
        animation: none !important
    }

    .dv-home-login, .dv-login-benefits article {
        transition: none !important
    }
}


/* ==========================================================
   DATSIS VISION BUSINESS SUITE V8
   Mehrstufige Portalnavigation und operative Module
   ========================================================== */
:root {
    --bs-deep: #061c24;
    --bs-deep2: #0a303a;
    --bs-teal: #0f5963;
    --bs-mint: #48d7b1;
    --bs-mint2: #8cebd5;
    --bs-blue: #4388e7;
    --bs-violet: #8b6ee8;
    --bs-amber: #f2b453;
    --bs-red: #e65e61;
    --bs-surface: #f3f8f7;
    --bs-card: #fff;
    --bs-border: #dce9e7;
    --bs-text: #11313a;
    --bs-muted: #6b8086;
    --bs-shadow: 0 24px 70px rgba(7,43,53,.13)
}

.bs-body {
    padding: 0 !important;
    background: var(--bs-surface);
    color: var(--bs-text)
}

    .bs-body .dv-site-header, .bs-body .dv-family, .bs-body .dv-rail, .bs-body .dv-topbar, .bs-body .dv-mobile-toggle {
        display: none !important
    }

.bs-topbar {
    height: 78px;
    position: fixed;
    top: 0;
    z-index: 210;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 28px;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid rgba(6,50,61,.09);
    box-shadow: 0 8px 30px rgba(5,43,52,.07);
    backdrop-filter: blur(18px)
}

.bs-menu-button {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 92px;
    height: 46px;
    padding: 0 12px;
    border: 1px solid var(--bs-border);
    border-radius: 13px;
    background: #fff;
    cursor: pointer;
    color: var(--bs-text);
    transition: .25s
}

    .bs-menu-button:hover {
        background: #eaf7f4;
        transform: translateY(-1px)
    }

    .bs-menu-button span {
        display: block;
        width: 3px;
        height: 22px;
        border-radius: 4px;
        background: var(--bs-teal);
        transform-origin: center
    }

        .bs-menu-button span:nth-child(2) {
            height: 15px
        }

        .bs-menu-button span:nth-child(3) {
            height: 9px
        }

    .bs-menu-button b {
        margin-left: 5px;
        font-size: 12px
    }

.bs-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none
}

    .bs-brand img {
        width: 186px;
        display: block
    }

    .bs-brand > span {
        padding-left: 14px;
        border-left: 1px solid var(--bs-border);
        font-size: 11px; /*font-weight:800;*/
        line-height: 1.4;
        color: #3a5961
    }

    .bs-brand small {
        display: block;
        color: var(--bs-teal);
        font-size: 8px;
        letter-spacing: .17em
    }

.bs-quicklinks {
    display: flex;
    gap: 5px;
    margin-left: auto
}

    .bs-quicklinks a {
        padding: 10px 12px;
        border-radius: 10px;
        text-decoration: none;
        font-size: 12px;
        font-weight: 650
    }

        .bs-quicklinks a:hover {
            background: #e9f6f3
        }

    .bs-quicklinks b {
        display: inline-grid;
        place-items: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--bs-red);
        color: #fff;
        font-size: 9px
    }

.bs-top-actions {
    display: flex;
    align-items: center;
    gap: 9px
}

.bs-search, .bs-cart-button {
    height: 40px;
    border: 1px solid var(--bs-border);
    border-radius: 11px;
    background: #fff;
    color: var(--bs-text);
    font: inherit;
    font-size: 11px;
    font-weight: 650;
    cursor: pointer
}

.bs-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 9px
}

    .bs-search span {
        font-size: 20px
    }

    .bs-search em {
        font-style: normal
    }

    .bs-search kbd {
        padding: 4px 6px;
        border-radius: 5px;
        background: #edf3f2;
        color: #70858a;
        font-size: 8px
    }

.bs-live {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #668087;
    font-size: 10px;
    font-weight: 700
}

    .bs-live i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #3fd09f;
        box-shadow: 0 0 0 6px rgba(63,208,159,.12);
        animation: bsPulse 2s infinite
    }

.bs-cart-button {
    padding: 0 12px
}

    .bs-cart-button b {
        display: inline-grid;
        place-items: center;
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: var(--bs-deep2);
        color: #fff;
        font-size: 9px
    }

.bs-user {
    display: flex;
    align-items: center;
    gap: 8px; /*padding:5px 11px 5px 5px;*/
    border-radius: 12px;
    background: var(--bs-deep2);
    color: #fff;
    text-decoration: none;
    font-size: 10px;
    font-weight: 750
}

    .bs-user span {
        display: grid;
       /* place-items: center;*/ /*width:31px;height:31px;*/
        border-radius: 9px;
        background: linear-gradient(135deg,var(--bs-mint),#1aa889);
        color: #073238
    }

    .bs-user em {
        font-style: normal
    }

.bs-page {
    min-height: 100vh
}

.bs-shell {
    width: min(1420px,calc(100% - 56px));
    margin: 0 auto
}

.bs-footer {
    padding: 42px max(28px,calc((100% - 1420px)/2));
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 25px;
    background: var(--bs-deep);
    color: #a9c3c8
}

    .bs-footer img {
        width: 150px;
        filter: brightness(0) invert(1)
    }

    .bs-footer p {
        max-width: 540px;
        font-size: 12px
    }

    .bs-footer nav {
        display: flex;
        gap: 18px;
        align-items: center
    }

    .bs-footer a {
        color: #d4e4e6;
        text-decoration: none;
        font-size: 11px
    }

    .bs-footer small {
        grid-column: 1/-1;
    /*    border-top: 1px solid rgba(255,255,255,.1);*/
        padding-top: 18px
    }
/* Navigation */
.bs-navigation {
    position: fixed;
    z-index: 400;
    inset: 0;
    pointer-events: none;
    visibility: hidden
}

    .bs-navigation.open {
        pointer-events: auto;
        visibility: visible
    }

.bs-nav-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(2,16,22,.68);
    opacity: 0;
    transition: .3s;
    cursor: default
}

.bs-navigation.open .bs-nav-backdrop {
    opacity: 1
}

.bs-nav-rail, .bs-nav-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    transform: translateX(-105%);
    transition: transform .36s cubic-bezier(.2,.75,.2,1);
    box-shadow: 20px 0 60px rgba(0,0,0,.16)
}

.bs-navigation.open .bs-nav-rail {
    transform: translateX(0)
}

.bs-nav-rail {
    left: 0;
    width: 78px;
    z-index: 4;
    padding: 18px 8px;
    background: #04171e;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px
}

    .bs-nav-rail a, .bs-nav-rail button {
        height: 61px;
        border: 0;
        border-radius: 13px;
        background: transparent;
        color: #91adb2;
        text-decoration: none;
        display: grid;
        place-items: center;
        font: inherit;
        cursor: pointer;
        transition: .2s
    }

        .bs-nav-rail a:hover, .bs-nav-rail button:hover, .bs-nav-rail button.active {
            background: #0e3540;
            color: #fff
        }

    .bs-nav-rail span {
        display: grid;
        place-items: center;
        width: 31px;
        height: 31px;
        border-radius: 9px;
        background: #0c2c35;
        color: var(--bs-mint);
        font-size: 10px;
        font-weight: 850
    }

    .bs-nav-rail small {
        font-size: 8px
    }

.bs-rail-close {
    margin-bottom: 12px !important;
    font-size: 26px !important;
    color: #fff !important
}

.bs-nav-panel {
    left: 78px;
    width: 290px;
    z-index: 3;
    padding: 28px 18px 20px;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow-y: auto
}

.bs-navigation.open .bs-nav-level1 {
    transform: translateX(0)
}

.bs-nav-level2 {
    left: 368px;
    background: #eaf5f2;
    z-index: 2
}

.bs-nav-level3 {
    left: 658px;
    background: #dcece9;
    z-index: 1
}

    .bs-nav-level2.active, .bs-nav-level3.active {
        transform: translateX(0)
    }

.bs-nav-panel header {
    padding: 20px 8px 10px;
    border-bottom: 1px solid rgba(9,63,73,.11);
    display: flex;
    gap: 11px;
    align-items: flex-start
}

    .bs-nav-panel header > div {
        min-width: 0
    }

    .bs-nav-panel header button {
        flex: 0 0 auto;
        width: 35px;
        height: 35px;
        border: 0;
        border-radius: 10px;
        background: rgba(8,53,63,.08);
        color: var(--bs-text);
        font-size: 22px;
        cursor: pointer
    }

    .bs-nav-panel header small {
        display: block;
        color: var(--bs-teal);
        font-size: 9px;
        letter-spacing: .17em;
        font-weight: 850
    }

    .bs-nav-panel header h2 {
        margin: 6px 0 4px;
        font-size: 15pt;
        font-weight: normal
    }

    .bs-nav-panel header p {
        margin: 0;
        color: var(--bs-muted);
        font-size: 11px;
        line-height: 1.5
    }

.bs-nav-list {
    display: grid;
    gap: 7px;
    padding: 17px 0
}

    .bs-nav-list > a, .bs-nav-list > button {
        width: 100%;
        min-height: 65px;
        padding: 9px;
        border: 0;
        border-radius: 14px;
        background: transparent;
        color: var(--bs-text);
        display: grid;
        grid-template-columns: 43px 1fr auto;
        align-items: center;
        gap: 10px;
        text-align: left;
        text-decoration: none;
        font: inherit;
        cursor: pointer;
        transition: .22s
    }

        .bs-nav-list > a:hover, .bs-nav-list > button:hover, .bs-nav-list > button.active {
            background: #fff;
            box-shadow: 0 10px 30px rgba(6,53,62,.09);
            transform: translateX(3px)
        }

.bs-nav-level1 .bs-nav-list > a:hover, .bs-nav-level1 .bs-nav-list > button:hover {
    background: #edf7f5
}

.bs-nav-icon {
    display: grid !important;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #dff3ee;
    color: #176b68;
    font-size: 10px;
/*    font-weight: 900
*/}

.bs-nav-list b {
    display: block;
    font-size: 12pt;
    font-weight: normal
}

.bs-nav-list small {
    display: block;
    margin-top: 3px;
    color: var(--bs-muted);
    font-size: 9pt
}

.bs-nav-list i {
    font-style: normal;
    font-size: 22px;
    color: #6d898e
}

.bs-nav-panel > footer {
    margin-top: auto;
    padding: 14px 8px 0;
    border-top: 1px solid rgba(9,63,73,.11);
    display: grid;
    gap: 7px;
    font-size: 9pt;
    color: var(--bs-muted)
}

    .bs-nav-panel > footer span {
        display: flex;
        align-items: center;
        gap: 6px
    }

    .bs-nav-panel > footer i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--bs-mint)
    }
/* command palette */
.bs-command {
    position: fixed;
    z-index: 500;
    inset: 0;
    display: none;
    place-items: start center;
    padding-top: 13vh
}

    .bs-command.open {
        display: grid
    }

    .bs-command > button {
        position: absolute;
        inset: 0;
        border: 0;
        background: rgba(2,14,20,.72)
    }

    .bs-command > section {
        position: relative;
        width: min(680px,calc(100% - 30px));
        border-radius: 22px;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 40px 120px rgba(0,0,0,.36)
    }

    .bs-command header {
        height: 70px;
        padding: 0 18px;
        display: flex;
        align-items: center;
        gap: 12px;
        border-bottom: 1px solid var(--bs-border)
    }

        .bs-command header span {
            font-size: 29px
        }

    .bs-command input {
        flex: 1;
        border: 0;
        outline: 0;
        font: inherit;
        font-size: 16px
    }

    .bs-command kbd {
        padding: 6px 8px;
        border-radius: 7px;
        background: #eef4f3;
        font-size: 9px
    }

    .bs-command [data-bs-command-results] {
        padding: 10px;
        max-height: 400px;
        overflow: auto
    }

        .bs-command [data-bs-command-results] a {
            display: flex;
            justify-content: space-between;
            padding: 14px;
            border-radius: 11px;
            text-decoration: none;
            font-size: 12px
        }

            .bs-command [data-bs-command-results] a:hover {
                background: #edf7f5
            }

    .bs-command footer {
        padding: 12px 20px;
        background: #f4f8f7;
        color: var(--bs-muted);
        font-size: 9px
    }
/* shared */
.bs-kicker {
    display: inline-block;
    color: var(--bs-mint);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .19em
}

.bs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    text-decoration: none;
    font: inherit;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
    transition: .25s
}

    .bs-btn:hover {
        transform: translateY(-2px)
    }

    .bs-btn.primary {
        background: var(--bs-mint);
        color: #062e37;
        box-shadow: 0 12px 30px rgba(72,215,177,.22)
    }

    .bs-btn.dark {
        background: var(--bs-deep2);
        color: #fff
    }

    .bs-btn.glass {
        border: 1px solid rgba(255,255,255,.25);
        background: rgba(255,255,255,.07);
        color: #fff
    }

.bs-section {
    padding: 70px 0
}

.bs-card {
    background: #fff;
    border: 1px solid var(--bs-border);
    border-radius: 22px;
    box-shadow: 0 10px 35px rgba(11,55,64,.05)
}

    .bs-card > header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px
    }

        .bs-card > header small {
            color: var(--bs-teal);
            font-size: 9px;
            font-weight: 850;
            letter-spacing: .14em
        }

        .bs-card > header h2 {
            margin: 5px 0;
            font-size: 24px
        }

        .bs-card > header a, .bs-card > header button {
            border: 0;
            background: none;
            color: var(--bs-teal);
            font: inherit;
            font-size: 10px;
            font-weight: 800;
            text-decoration: none;
            cursor: pointer
        }

.bs-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 850;
    white-space: nowrap
}

    .bs-status.approved {
        background: #dff4eb;
        color: #177251
    }

    .bs-status.open {
        background: #e4f0ff;
        color: #2467a8
    }

    .bs-status.waiting {
        background: #fff0d6;
        color: #95631c
    }

    .bs-status.danger {
        background: #ffe3e3;
        color: #b63e46
    }

.bs-responsive-table {
    overflow: auto
}

.bs-table-card {
    padding: 25px;
    margin-top: 22px
}

    .bs-table-card > header {
        margin-bottom: 18px
    }

    .bs-table-card table {
        width: 100%;
        border-collapse: collapse;
        min-width: 760px
    }

    .bs-table-card th {
        text-align: left;
        padding: 11px 12px;
        border-bottom: 1px solid var(--bs-border);
        color: #71858a;
        font-size: 9px;
        letter-spacing: .1em
    }

    .bs-table-card td {
        padding: 15px 12px;
        border-bottom: 1px solid #edf3f2;
        font-size: 11px
    }

.bs-table-actions {
    display: flex;
    gap: 8px
}

    .bs-table-actions input, .bs-table-card header > input {
        min-width: 220px;
        padding: 10px 12px;
        border: 1px solid var(--bs-border);
        border-radius: 10px
    }

    .bs-table-actions button, .bs-table-card header > button {
        padding: 10px 13px !important;
        border-radius: 10px !important;
        background: #edf5f3 !important
    }
/* hero dashboard */
.bs-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,#041820,#0c3a46 58%,#11646a);
    color: #fff
}

    .bs-hero:before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
        background-size: 44px 44px;
        mask-image: linear-gradient(to right,#000,transparent 75%)
    }

.bs-hero-grid {
    min-height: 530px;
    display: grid;
    grid-template-columns: 1fr .95fr;
    align-items: center;
    gap: 70px;
    position: relative
}

.bs-hero h1 {
    font-size: clamp(50px,5.5vw,82px);
    line-height: 1;
    margin: 18px 0
}

    .bs-hero h1 span {
        color: var(--bs-mint)
    }

.bs-hero p {
    max-width: 620px;
    color: #bcd2d6;
    font-size: 17px;
    line-height: 1.7
}

.bs-hero-actions {
    display: flex;
    gap: 10px;
    margin-top: 28px
}

.bs-live-orbit {
    position: relative;
    width: 460px;
    height: 420px;
    margin: auto
}

.bs-orbit-core {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: 180px;
    height: 180px;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    display: grid;
    place-items: center;
    align-content: center;
    background: radial-gradient(circle at 35% 30%,#185868,#071f29 67%);
    border: 1px solid rgba(122,237,212,.45);
    box-shadow: 0 0 80px rgba(72,215,177,.18)
}

    .bs-orbit-core small {
        font-size: 9px;
        letter-spacing: .16em;
        color: #9ee8da
    }

    .bs-orbit-core strong {
        font-size: 52px
    }

    .bs-orbit-core span {
        font-size: 10px;
        color: #9bbbc0
    }

.bs-live-orbit > i {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(96,226,199,.25);
    border-radius: 50%;
    transform: translate(-50%,-50%);
    animation: bsSpin 18s linear infinite
}

.bs-live-orbit .o1 {
    width: 260px;
    height: 260px
}

.bs-live-orbit .o2 {
    width: 350px;
    height: 350px;
    animation-direction: reverse;
    animation-duration: 24s
}

.bs-live-orbit .o3 {
    width: 420px;
    height: 420px;
    animation-duration: 30s
}

.bs-live-orbit > i:before {
    content: "";
    position: absolute;
    left: 50%;
    top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bs-mint);
    box-shadow: 0 0 18px var(--bs-mint)
}

.bs-live-orbit article {
    position: absolute;
    z-index: 4;
    width: 145px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 14px;
    background: rgba(6,29,38,.78);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 35px rgba(0,0,0,.22);
    animation: bsFloat 5s ease-in-out infinite
}

    .bs-live-orbit article b {
        font-size: 25px;
        color: var(--bs-mint)
    }

    .bs-live-orbit article span {
        display: block;
        color: #c2d5d8;
        font-size: 9px
    }

.bs-live-orbit .c1 {
    left: 0;
    top: 70px
}

.bs-live-orbit .c2 {
    right: -5px;
    top: 145px;
    animation-delay: -2s
}

.bs-live-orbit .c3 {
    left: 45px;
    bottom: 25px;
    animation-delay: -3s
}

.bs-dashboard-section {
    margin-top: -35px;
    position: relative;
    z-index: 3
}

.bs-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px
}

    .bs-kpi-grid.compact {
        margin-bottom: 22px
    }

.bs-kpi-card {
    position: relative;
    overflow: hidden;
    min-height: 145px;
    padding: 22px;
    border: 1px solid var(--bs-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(7,47,56,.06)
}

    .bs-kpi-card:after {
        content: "";
        position: absolute;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        right: -50px;
        top: -55px;
        background: var(--accent,#48d7b1);
        opacity: .1
    }

    .bs-kpi-card.mint {
        --accent: var(--bs-mint)
    }

    .bs-kpi-card.blue {
        --accent: var(--bs-blue)
    }

    .bs-kpi-card.violet {
        --accent: var(--bs-violet)
    }

    .bs-kpi-card.amber {
        --accent: var(--bs-amber)
    }

    .bs-kpi-card span {
        display: block;
        color: #778b90;
        font-size: 9px;
        font-weight: 850;
        letter-spacing: .13em
    }

    .bs-kpi-card b {
        display: block;
        margin: 10px 0 2px;
        font-size: 34px
    }

    .bs-kpi-card small {
        color: var(--bs-muted);
        font-size: 10px
    }

    .bs-kpi-card > i {
        position: absolute;
        left: 22px;
        right: 22px;
        bottom: 15px;
        height: 4px;
        border-radius: 8px;
        background: #e8efee
    }

        .bs-kpi-card > i:after {
            content: "";
            display: block;
            width: var(--p);
            height: 100%;
            border-radius: inherit;
            background: var(--accent)
        }

.bs-dashboard-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 18px;
    margin-top: 18px
}

.bs-focus-card, .bs-risk-mini, .bs-time-mini, .bs-news-mini {
    padding: 24px
}

.bs-task-list {
    display: grid;
    margin-top: 13px
}

    .bs-task-list label {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 12px;
        padding: 14px 0;
        border-top: 1px solid #edf3f2
    }

    .bs-task-list input {
        width: 18px;
        height: 18px
    }

    .bs-task-list b {
        font-size: 11px
    }

    .bs-task-list small {
        display: block;
        margin-top: 4px;
        color: var(--bs-muted);
        font-size: 9px
    }

    .bs-task-list em {
        padding: 5px 8px;
        border-radius: 7px;
        font-style: normal;
        font-size: 8px;
        font-weight: 850
    }

        .bs-task-list em.high {
            background: #ffe2e2;
            color: #b83d43
        }

        .bs-task-list em.medium {
            background: #fff0d9;
            color: #93611f
        }

        .bs-task-list em.low {
            background: #e4f3ef;
            color: #35776b
        }

.bs-mini-matrix {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 3px;
    aspect-ratio: 1.65;
    margin: 17px 0
}

    .bs-mini-matrix i {
        border-radius: 4px
    }

.bs-risk-mini footer {
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    color: var(--bs-muted)
}

    .bs-risk-mini footer i {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin-right: 4px
    }

.bs-risk-mini .green {
    background: #55c78b
}

.bs-risk-mini .yellow {
    background: #f2c65a
}

.bs-risk-mini .red {
    background: #df555b
}

.bs-week-chart {
    height: 160px;
    display: flex;
    align-items: end;
    gap: 10px;
    padding-top: 18px
}

    .bs-week-chart i {
        position: relative;
        flex: 1;
        height: var(--h);
        border-radius: 8px 8px 3px 3px;
        background: linear-gradient(var(--bs-mint),#249c8a);
        animation: bsGrow .8s ease both
    }

    .bs-week-chart small {
        position: absolute;
        left: 50%;
        bottom: -19px;
        transform: translateX(-50%);
        font-style: normal;
        color: var(--bs-muted);
        font-size: 8px
    }

.bs-time-mini p {
    margin-top: 28px;
    color: var(--bs-muted);
    font-size: 10px
}

    .bs-time-mini p b {
        font-size: 18px;
        color: var(--bs-text)
    }

.bs-news-mini > a {
    display: grid;
    grid-template-columns: 68px 1fr auto;
    gap: 10px;
    padding: 13px 0;
    border-top: 1px solid #edf3f2;
    text-decoration: none;
    font-size: 10px
}

    .bs-news-mini > a span {
        color: var(--bs-teal);
        font-size: 8px;
        font-weight: 850
    }

    .bs-news-mini > a small {
        color: var(--bs-muted);
        font-size: 8px
    }
/* pagehead */
.bs-pagehead {
    position: relative;
    overflow: hidden;
    padding: 67px 0;
    background: linear-gradient(135deg,#071e27,#0d4853);
    color: #fff
}

    .bs-pagehead:after {
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        border: 1px solid rgba(72,215,177,.22);
        border-radius: 50%;
        right: -100px;
        top: -230px;
        box-shadow: 0 0 0 65px rgba(72,215,177,.035),0 0 0 130px rgba(72,215,177,.025)
    }

    .bs-pagehead.internal {
        background: linear-gradient(135deg,#18243e,#354875)
    }

    .bs-pagehead.subscription {
        background: linear-gradient(135deg,#271f46,#594b8c)
    }

    .bs-pagehead.risk, .bs-pagehead.risk-matrix, .bs-pagehead.dsfa {
        background: linear-gradient(135deg,#281d2b,#703f4e)
    }

    .bs-pagehead.shop {
        background: linear-gradient(135deg,#142136,#1d5870)
    }

    .bs-pagehead .bs-shell {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: space-between;
        align-items: end;
        gap: 40px
    }

    .bs-pagehead h1 {
        margin: 10px 0;
        font-size: clamp(43px,5vw,68px)
    }

    .bs-pagehead p {
        max-width: 760px;
        margin: 0;
        color: #bed2d5;
        line-height: 1.65
    }

.bs-pagehead-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}
/* time */
.bs-time-layout {
    display: grid;
    grid-template-columns: 430px 1fr;
    gap: 18px
}

.bs-timer-card {
    position: relative;
    overflow: hidden;
    padding: 34px;
    border-radius: 24px;
    background: linear-gradient(145deg,#061c25,#0c4651);
    color: #fff;
    box-shadow: var(--bs-shadow)
}

.bs-timer-glow {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    right: -100px;
    top: -120px;
    background: rgba(72,215,177,.12);
    box-shadow: 0 0 80px rgba(72,215,177,.18)
}

.bs-timer-card > small {
    color: var(--bs-mint);
    font-size: 9px;
    letter-spacing: .16em
}

.bs-timer-card > strong {
    display: block;
    margin: 22px 0;
    font: 700 54px/1.1 Consolas,monospace;
    letter-spacing: .04em
}

.bs-timer-card label {
    display: grid;
    gap: 6px;
    margin-top: 11px;
    font-size: 9px;
    color: #a8c3c7
}

.bs-timer-card select, .bs-timer-card input {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    color: #fff;
    font: inherit
}

.bs-timer-card option {
    color: #111
}

.bs-timer-card button {
    width: 100%;
    margin-top: 17px;
    padding: 14px;
    border: 0;
    border-radius: 11px;
    background: var(--bs-mint);
    color: #07333b;
    font-weight: 900;
    cursor: pointer
}

.bs-timer-card.running button {
    background: #ff7b75
}

.bs-timer-card p {
    margin-bottom: 0;
    color: #a9c5c8;
    font-size: 9px;
    text-align: center
}

.bs-time-summary {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15px
}

    .bs-time-summary article {
        padding: 26px;
        border: 1px solid var(--bs-border);
        border-radius: 20px;
        background: #fff
    }

    .bs-time-summary span {
        font-size: 9px;
        font-weight: 850;
        letter-spacing: .13em;
        color: var(--bs-teal)
    }

    .bs-time-summary b {
        display: block;
        margin: 16px 0 5px;
        font-size: 31px
    }

    .bs-time-summary small {
        color: var(--bs-muted);
        font-size: 10px
    }
/* projects */
.bs-project-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0
}

.bs-segment {
    display: flex;
    padding: 4px;
    border-radius: 12px;
    background: #e7efee
}

    .bs-segment button {
        padding: 9px 13px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        font: inherit;
        font-size: 10px;
        font-weight: 800
    }

        .bs-segment button.active {
            background: #fff;
            box-shadow: 0 5px 15px rgba(8,48,58,.08)
        }

.bs-project-toolbar input {
    min-width: 260px;
    padding: 11px 13px;
    border: 1px solid var(--bs-border);
    border-radius: 11px
}

.bs-project-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px
}

.bs-project-card {
    padding: 24px;
    border: 1px solid var(--bs-border);
    border-radius: 20px;
    background: #fff;
    transition: .25s
}

    .bs-project-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--bs-shadow)
    }

    .bs-project-card header {
        display: flex;
        justify-content: space-between
    }

.bs-project-color {
    width: 43px;
    height: 7px;
    border-radius: 10px
}

    .bs-project-color.teal {
        background: var(--bs-mint)
    }

    .bs-project-color.blue {
        background: var(--bs-blue)
    }

    .bs-project-color.red {
        background: var(--bs-red)
    }

.bs-project-card header em {
    font-style: normal;
    font-size: 11px;
    font-weight: 850
}

.bs-project-card > small {
    display: block;
    margin-top: 25px;
    color: var(--bs-teal);
    font-size: 8px;
    letter-spacing: .12em
}

.bs-project-card h2 {
    font-size: 23px
}

.bs-project-card p {
    min-height: 48px;
    color: var(--bs-muted);
    font-size: 10px;
    line-height: 1.6
}

.bs-progress {
    height: 6px;
    border-radius: 9px;
    background: #edf2f1
}

    .bs-progress i {
        display: block;
        width: var(--p);
        height: 100%;
        border-radius: inherit;
        background: var(--bs-mint)
    }

.bs-project-card footer {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    color: var(--bs-muted);
    font-size: 9px
}

.bs-kanban {
    padding: 24px;
    margin-top: 20px
}

.bs-kanban-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 11px;
    margin-top: 17px
}

    .bs-kanban-grid > section {
        padding: 12px;
        border-radius: 14px;
        background: #f0f5f4;
        min-height: 260px
    }

.bs-kanban h3 {
    display: flex;
    justify-content: space-between;
    margin: 4px 3px 12px;
    font-size: 11px
}

    .bs-kanban h3 b {
        display: grid;
        place-items: center;
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: #d9e7e4;
        font-size: 8px
    }

.bs-kanban article {
    margin-bottom: 9px;
    padding: 13px;
    border: 1px solid var(--bs-border);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(9,49,58,.04)
}

    .bs-kanban article > span {
        font-size: 7px;
        font-weight: 900;
        color: #a56d1d
    }

        .bs-kanban article > span.high {
            color: #c64249
        }

    .bs-kanban article > b {
        display: block;
        margin: 8px 0;
        font-size: 10px;
        line-height: 1.4
    }

    .bs-kanban article small {
        color: var(--bs-muted);
        font-size: 8px
    }

    .bs-kanban article.done {
        opacity: .6
    }
/* tickets */
.bs-ticket-layout {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 18px
}

.bs-ticket-filters {
    padding: 18px;
    border: 1px solid var(--bs-border);
    border-radius: 18px;
    background: #fff;
    align-self: start;
    display: grid;
    gap: 5px
}

    .bs-ticket-filters > small {
        margin: 8px 8px;
        color: var(--bs-teal);
        font-size: 8px;
        font-weight: 900;
        letter-spacing: .13em
    }

    .bs-ticket-filters button {
        display: flex;
        justify-content: space-between;
        padding: 11px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        font: inherit;
        font-size: 10px;
        cursor: pointer
    }

        .bs-ticket-filters button.active, .bs-ticket-filters button:hover {
            background: #eaf6f3
        }

    .bs-ticket-filters b {
        font-size: 9px
    }

        .bs-ticket-filters b.danger {
            color: var(--bs-red)
        }

    .bs-ticket-filters hr {
        width: 100%;
        border: 0;
        border-top: 1px solid var(--bs-border)
    }

    .bs-ticket-filters label {
        padding: 7px;
        font-size: 10px
    }

.bs-ticket-main {
    min-width: 0
}

.bs-ticket-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px
}

    .bs-ticket-toolbar input {
        flex: 1
    }

    .bs-ticket-toolbar input, .bs-ticket-toolbar select {
        padding: 12px;
        border: 1px solid var(--bs-border);
        border-radius: 11px;
        background: #fff
    }

.bs-ticket-list {
    display: grid;
    gap: 9px
}

    .bs-ticket-list article {
        display: grid;
        grid-template-columns: 6px 1fr auto;
        gap: 15px;
        align-items: center;
        padding: 20px;
        border: 1px solid var(--bs-border);
        border-radius: 16px;
        background: #fff;
        transition: .2s
    }

        .bs-ticket-list article:hover {
            transform: translateX(4px);
            box-shadow: 0 12px 35px rgba(5,43,52,.08)
        }

.bs-ticket-priority {
    align-self: stretch;
    border-radius: 10px;
    background: #81bea9
}

    .bs-ticket-priority.critical {
        background: var(--bs-red)
    }

    .bs-ticket-priority.high {
        background: var(--bs-amber)
    }

.bs-ticket-list small {
    color: var(--bs-muted);
    font-size: 8px
}

.bs-ticket-list h2 {
    margin: 6px 0;
    font-size: 15px
}

.bs-ticket-list p {
    margin: 0;
    color: var(--bs-muted);
    font-size: 9px
}

.bs-ticket-list footer {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 10px;
    font-size: 8px;
    color: var(--bs-muted)
}

.bs-ticket-list > article > button {
    padding: 9px 12px;
    border: 1px solid var(--bs-border);
    border-radius: 9px;
    background: #fff;
    font-size: 9px;
    font-weight: 800
}

.bs-internal-categories {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
    margin-bottom: 20px
}

    .bs-internal-categories article {
        position: relative;
        overflow: hidden;
        min-height: 205px;
        padding: 23px;
        border-radius: 19px;
        background: #fff;
        border: 1px solid var(--bs-border)
    }

        .bs-internal-categories article > span {
            display: grid;
            place-items: center;
            width: 49px;
            height: 49px;
            border-radius: 15px;
            background: #e8ecf7;
            color: #354875;
            font-weight: 900
        }

    .bs-internal-categories h2 {
        margin: 25px 0 8px;
        font-size: 19px
    }

    .bs-internal-categories p {
        color: var(--bs-muted);
        font-size: 9px;
        line-height: 1.6
    }

    .bs-internal-categories b {
        position: absolute;
        right: 18px;
        top: 18px;
        color: #53678c;
        font-size: 9px
    }
/* subscription */
.bs-subscription-hero {
    display: grid;
    grid-template-columns: 1fr 310px;
    gap: 20px;
    padding: 32px;
    border-radius: 25px;
    background: linear-gradient(135deg,#201b3b,#534781);
    color: #fff;
    box-shadow: var(--bs-shadow)
}

    .bs-subscription-hero small {
        color: #d8cdfb;
        font-size: 8px;
        letter-spacing: .15em
    }

    .bs-subscription-hero h2 {
        font-size: 32px
    }

    .bs-subscription-hero p {
        color: #cfc9e7
    }

.bs-license-bar {
    height: 8px;
    max-width: 600px;
    border-radius: 9px;
    background: rgba(255,255,255,.13)
}

    .bs-license-bar i {
        display: block;
        width: var(--p);
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg,var(--bs-mint),#90efd6)
    }

.bs-subscription-hero > div > span {
    display: block;
    margin-top: 8px;
    color: #cfc9e7;
    font-size: 9px
}

.bs-subscription-hero > aside {
    padding: 22px;
    border-radius: 17px;
    background: rgba(255,255,255,.09);
    display: grid;
    align-content: center
}

.bs-subscription-hero aside b {
    font-size: 27px;
    margin: 10px 0
}

.bs-subscription-hero aside span {
    font-size: 9px;
    color: #d7d1ea
}

.bs-subscription-hero aside button {
    margin-top: 17px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 9px;
    background: transparent;
    color: #fff
}

.bs-sub-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
    margin-top: 20px
}

.bs-sub-card {
    min-height: 380px;
    padding: 25px;
    border: 1px solid var(--bs-border);
    border-radius: 21px;
    background: #fff;
    display: flex;
    flex-direction: column
}

    .bs-sub-card header {
        display: flex;
        justify-content: space-between
    }

        .bs-sub-card header span {
            font-size: 9px;
            font-weight: 900;
            color: #584c8d
        }

        .bs-sub-card header em {
            padding: 5px 8px;
            border-radius: 999px;
            background: #dff4eb;
            color: #207250;
            font-style: normal;
            font-size: 8px
        }

    .bs-sub-card h2 {
        margin-top: 35px;
        font-size: 24px
    }

    .bs-sub-card p {
        color: var(--bs-muted);
        font-size: 10px;
        line-height: 1.6
    }

    .bs-sub-card ul {
        padding-left: 18px;
        color: var(--bs-muted);
        font-size: 10px;
        line-height: 2
    }

    .bs-sub-card footer {
        margin-top: auto;
        display: flex;
        justify-content: space-between;
        align-items: end;
        padding-top: 15px;
        border-top: 1px solid var(--bs-border)
    }

        .bs-sub-card footer > b {
            font-size: 21px
        }

        .bs-sub-card footer small {
            font-size: 8px
        }

        .bs-sub-card footer button {
            padding: 9px 11px;
            border: 0;
            border-radius: 9px;
            background: #eeeaf9;
            color: #564a88;
            font-weight: 800
        }

    .bs-sub-card.add {
        display: grid;
        place-items: center;
        align-content: center;
        text-align: center;
        border-style: dashed;
        background: #f7f5fb
    }

        .bs-sub-card.add > span {
            display: grid;
            place-items: center;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: #e9e3f7;
            color: #594b8c;
            font-size: 35px
        }

        .bs-sub-card.add a {
            color: #594b8c;
            font-size: 10px;
            font-weight: 850
        }
/* risk + matrix */
.bs-risk-overview {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 12px
}

    .bs-risk-overview article {
        padding: 19px;
        border: 1px solid var(--bs-border);
        border-radius: 16px;
        background: #fff;
        border-top: 4px solid #86a5a8
    }

        .bs-risk-overview article.danger {
            border-top-color: var(--bs-red)
        }

        .bs-risk-overview article.warning {
            border-top-color: var(--bs-amber)
        }

        .bs-risk-overview article.success {
            border-top-color: #54c586
        }

    .bs-risk-overview span {
        font-size: 8px;
        font-weight: 850;
        letter-spacing: .12em
    }

    .bs-risk-overview b {
        display: block;
        margin: 10px 0;
        font-size: 31px
    }

    .bs-risk-overview small {
        color: var(--bs-muted);
        font-size: 8px
    }

.bs-risk-layout {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 17px;
    margin-top: 18px
}

.bs-risk-map, .bs-top-risks {
    padding: 24px
}

.bs-risk-chart {
    display: grid;
    grid-template-columns: 85px 1fr;
    grid-template-rows: 1fr 30px;
    gap: 8px;
    margin-top: 18px
}

.bs-risk-axis.y {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: right;
    color: var(--bs-muted);
    font-size: 7px
}

.bs-risk-axis.x {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    color: var(--bs-muted);
    font-size: 7px
}

.bs-matrix-large {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(5,1fr);
    gap: 3px;
    aspect-ratio: 1.7
}

    .bs-matrix-large i {
        border-radius: 5px
    }

.bs-top-risks > a {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 10px;
    padding: 13px 0;
    border-top: 1px solid var(--bs-border);
    text-decoration: none
}

.bs-top-risks .score {
    display: grid;
    place-items: center;
    width: 41px;
    height: 41px;
    border-radius: 12px;
    color: #fff;
    font-style: normal;
    font-weight: 900
}

.score.red {
    background: var(--bs-red)
}

.score.orange {
    background: #eb8f43
}

.score.yellow {
    background: #e2b74b
}

.bs-top-risks b {
    font-size: 10px
}

.bs-top-risks small {
    display: block;
    margin-top: 4px;
    color: var(--bs-muted);
    font-size: 8px
}

.bs-risk-pill {
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 8px;
    font-weight: 850
}

    .bs-risk-pill.high {
        background: #ffe0e1;
        color: #b93c44
    }

    .bs-risk-pill.medium {
        background: #fff0d8;
        color: #97631c
    }

    .bs-risk-pill.low {
        background: #ddf3e8;
        color: #267052
    }

.bs-matrix-workspace {
    display: grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap: 17px
}

.bs-matrix-card, .bs-risk-editor {
    padding: 25px
}

.bs-legend {
    display: flex;
    gap: 5px;
    flex-wrap: wrap
}

    .bs-legend span {
        padding: 5px 7px;
        border-radius: 7px;
        font-size: 7px;
        font-weight: 850
    }

    .bs-legend .low {
        background: #55c986
    }

    .bs-legend .moderate {
        background: #b5d65b
    }

    .bs-legend .elevated {
        background: #f0cd52
    }

    .bs-legend .high {
        background: #ed9145
    }

    .bs-legend .critical {
        background: #dc555b;
        color: #fff
    }

.bs-matrix-wrap {
    display: grid;
    grid-template-columns: 28px 92px 1fr;
    grid-template-rows: 1fr 34px 28px;
    gap: 7px;
    margin-top: 23px
}

.bs-y-title {
    grid-row: 1;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    align-self: center;
    font-size: 8px;
    color: var(--bs-muted)
}

.bs-matrix-y-labels {
    display: grid;
    grid-template-rows: repeat(5,1fr);
    align-items: center;
    text-align: right;
    font-size: 8px;
    color: var(--bs-muted)
}

.bs-matrix-25 {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(5,1fr);
    gap: 5px;
    aspect-ratio: 1.25
}

.bs-matrix-cell {
    position: relative;
    border: 0;
    border-radius: 9px;
    color: #13313a;
    cursor: pointer;
    transition: .18s
}

    .bs-matrix-cell:hover, .bs-matrix-cell.selected {
        transform: scale(1.06);
        z-index: 2;
        box-shadow: 0 8px 22px rgba(0,0,0,.18);
        outline: 3px solid #fff
    }

    .bs-matrix-cell.low {
        background: #5dcc8a
    }

    .bs-matrix-cell.moderate {
        background: #afd45a
    }

    .bs-matrix-cell.elevated {
        background: #f1ce52
    }

    .bs-matrix-cell.high {
        background: #ed9145
    }

    .bs-matrix-cell.critical {
        background: #df555c;
        color: #fff
    }

    .bs-matrix-cell b {
        font-size: 17px
    }

    .bs-matrix-cell small {
        display: block;
        font-size: 7px;
        opacity: .7
    }

.bs-matrix-x-labels {
    grid-column: 3;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    text-align: center;
    font-size: 7px;
    color: var(--bs-muted)
}

.bs-x-title {
    grid-column: 3;
    text-align: center;
    font-size: 8px;
    color: var(--bs-muted)
}

.bs-risk-editor {
    align-self: start;
    position: sticky;
    top: 95px
}

    .bs-risk-editor > small {
        color: #704151;
        font-size: 8px;
        font-weight: 900;
        letter-spacing: .14em
    }

    .bs-risk-editor h2 {
        font-size: 25px
    }

    .bs-risk-editor label {
        display: grid;
        gap: 6px;
        margin-top: 13px;
        font-size: 9px;
        font-weight: 750
    }

    .bs-risk-editor input[type=text], .bs-risk-editor select {
        width: 100%;
        padding: 11px;
        border: 1px solid var(--bs-border);
        border-radius: 10px;
        background: #fff
    }

.bs-form-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 9px
}

.bs-risk-result {
    margin: 16px 0;
    padding: 18px;
    border-radius: 15px;
    text-align: center;
    background: #ffe6d5;
    color: #a44d24
}

    .bs-risk-result.critical {
        background: #ffe0e1;
        color: #a8323a
    }

    .bs-risk-result.high {
        background: #ffe6d5;
        color: #a44d24
    }

    .bs-risk-result.elevated {
        background: #fff2c6;
        color: #876412
    }

    .bs-risk-result.moderate {
        background: #edf5ce;
        color: #577622
    }

    .bs-risk-result.low {
        background: #dcf4e7;
        color: #216c4b
    }

    .bs-risk-result span {
        display: block;
        font-size: 8px;
        letter-spacing: .14em
    }

    .bs-risk-result b {
        display: block;
        font-size: 44px
    }

    .bs-risk-result strong {
        display: block
    }

    .bs-risk-result small {
        font-size: 8px
    }

.bs-risk-editor > .bs-btn {
    width: 100%;
    margin-top: 18px
}

.bs-risk-editor > p {
    font-size: 9px;
    color: #277052;
    text-align: center
}
/* DSFA */
.bs-dsfa-status {
    display: flex;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--bs-border);
    border-radius: 18px;
    background: #fff
}

    .bs-dsfa-status article {
        flex: 0 0 145px;
        display: grid;
        grid-template-columns: 36px 1fr;
        column-gap: 9px;
        align-items: center
    }

        .bs-dsfa-status article > span {
            grid-row: 1/3;
            display: grid;
            place-items: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #edf2f1;
            color: #74898e;
            font-weight: 900
        }

        .bs-dsfa-status article.active > span {
            background: #dff4eb;
            color: #227252
        }

        .bs-dsfa-status article.current > span {
            background: #704151;
            color: #fff;
            box-shadow: 0 0 0 7px rgba(112,65,81,.12)
        }

    .bs-dsfa-status b {
        font-size: 9px
    }

    .bs-dsfa-status small {
        font-size: 7px;
        color: var(--bs-muted)
    }

    .bs-dsfa-status > i {
        flex: 1;
        height: 2px;
        background: #e3ecea
    }

.bs-dsfa-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 17px;
    margin-top: 18px
}

.bs-dsfa-main, .bs-dsfa-side {
    padding: 25px
}

.bs-dsfa-score {
    display: grid;
    grid-template-columns: 170px 1fr;
    align-items: center;
    gap: 25px;
    margin: 20px 0;
    padding: 20px;
    border-radius: 15px;
    background: #f8eeee
}

    .bs-dsfa-score span {
        display: block;
        font-size: 8px;
        color: #704151
    }

    .bs-dsfa-score b {
        display: block;
        font-size: 28px
    }

    .bs-dsfa-score strong {
        font-size: 9px
    }

    .bs-dsfa-score i {
        height: 9px;
        border-radius: 9px;
        background: #eadbdc
    }

        .bs-dsfa-score i:after {
            content: "";
            display: block;
            width: var(--p);
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg,#e9bc52,#d6555c)
        }

.bs-checklist label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px;
    padding: 14px 0;
    border-top: 1px solid var(--bs-border)
}

.bs-checklist input {
    width: 18px;
    height: 18px
}

.bs-checklist b {
    font-size: 10px
}

.bs-checklist small {
    display: block;
    margin-top: 4px;
    color: var(--bs-muted);
    font-size: 8px
}

.bs-checklist label.done {
    opacity: .68
}

.bs-dsfa-main footer {
    margin-top: 20px
}

.bs-dsfa-side > small {
    color: #704151;
    font-size: 8px;
    font-weight: 900
}

.bs-dsfa-side h2 {
    font-size: 23px
}

.bs-dsfa-criteria {
    display: grid
}

    .bs-dsfa-criteria label {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 11px 0;
        border-bottom: 1px solid var(--bs-border);
        font-size: 9px
    }

.bs-dsfa-side > a {
    display: block;
    margin-top: 22px;
    color: #704151;
    font-size: 10px;
    font-weight: 850
}
/* shop */
.bs-shop-tabs {
    display: flex;
    gap: 7px;
    margin-bottom: 20px
}

    .bs-shop-tabs button {
        padding: 10px 14px;
        border: 1px solid var(--bs-border);
        border-radius: 999px;
        background: #fff;
        font: inherit;
        font-size: 9px;
        font-weight: 850
    }

        .bs-shop-tabs button.active {
            background: var(--bs-deep2);
            color: #fff
        }

.bs-market-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px
}

.bs-market-card {
    min-height: 485px;
    padding: 25px;
    border: 1px solid var(--bs-border);
    border-radius: 22px;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: .25s
}

    .bs-market-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--bs-shadow)
    }

    .bs-market-card.featured {
        background: linear-gradient(145deg,#07222c,#0e5962);
        color: #fff
    }

    .bs-market-card header {
        display: flex;
        justify-content: space-between;
        font-size: 8px;
        font-weight: 900
    }

        .bs-market-card header em {
            font-style: normal;
            color: var(--bs-teal)
        }

    .bs-market-card.featured header em {
        color: var(--bs-mint)
    }

.bs-product-symbol {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    margin: 30px 0 15px;
    border-radius: 25px;
    background: #e3f5f1;
    color: var(--bs-teal);
    font-size: 34px;
    font-weight: 900
}

.featured .bs-product-symbol {
    background: rgba(255,255,255,.1);
    color: var(--bs-mint)
}

.risk-symbol {
    position: relative
}

    .risk-symbol i {
        position: absolute;
        inset: 15px;
        border-radius: 7px;
        background: linear-gradient(135deg,#59c888 0 33%,#f0ca51 33% 66%,#dc565d 66%)
    }

    .risk-symbol b {
        position: relative;
        color: #fff;
        text-shadow: 0 1px 4px rgba(0,0,0,.4)
    }

.bs-market-card h2 {
    font-size: 25px
}

.bs-market-card p {
    color: var(--bs-muted);
    font-size: 10px;
    line-height: 1.65
}

.bs-market-card.featured p {
    color: #bdd2d5
}

.bs-market-card ul {
    padding-left: 18px;
    color: var(--bs-muted);
    font-size: 10px;
    line-height: 2
}

.bs-market-card.featured ul {
    color: #bdd2d5
}

.bs-market-card footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--bs-border);
    display: flex;
    justify-content: space-between;
    align-items: end
}

.bs-market-card.featured footer {
    border-color: rgba(255,255,255,.12)
}

.bs-market-card footer > b {
    font-size: 18px
}

.bs-market-card footer small {
    font-size: 7px
}

.bs-market-card footer button {
    padding: 10px 12px;
    border: 0;
    border-radius: 9px;
    background: var(--bs-mint);
    color: #073039;
    font-weight: 850;
    cursor: pointer
}
/* modal */
.bs-modal {
    position: fixed;
    z-index: 600;
    inset: 0;
    display: none;
    place-items: center
}

    .bs-modal.open {
        display: grid
    }

    .bs-modal > button {
        position: absolute;
        inset: 0;
        border: 0;
        background: rgba(2,16,22,.68)
    }

    .bs-modal > section {
        position: relative;
        width: min(520px,calc(100% - 28px));
        padding: 26px;
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 35px 100px rgba(0,0,0,.3);
        display: grid;
        gap: 13px
    }

    .bs-modal header {
        display: flex;
        justify-content: space-between
    }

        .bs-modal header small {
            color: var(--bs-teal);
            font-size: 8px
        }

        .bs-modal header h2 {
            margin: 4px 0
        }

        .bs-modal header button {
            width: 35px;
            height: 35px;
            border: 0;
            border-radius: 50%;
            font-size: 22px
        }

    .bs-modal label {
        display: grid;
        gap: 6px;
        font-size: 9px;
        font-weight: 750
    }

    .bs-modal input, .bs-modal select, .bs-modal textarea {
        padding: 11px;
        border: 1px solid var(--bs-border);
        border-radius: 10px;
        font: inherit
    }

@keyframes bsPulse {
    50% {
        box-shadow: 0 0 0 12px rgba(63,208,159,0)
    }
}

@keyframes bsSpin {
    to {
        transform: translate(-50%,-50%) rotate(360deg)
    }
}

@keyframes bsFloat {
    50% {
        transform: translateY(-9px)
    }
}

@keyframes bsGrow {
    from {
        height: 0
    }
}

@media(max-width:1180px) {
    .bs-quicklinks, .bs-live, .bs-search em, .bs-search kbd {
        display: none
    }

    .bs-brand > span {
        display: none
    }

    .bs-top-actions {
        margin-left: auto
    }

    .bs-dashboard-grid {
        grid-template-columns: 1fr
    }

    .bs-project-grid, .bs-market-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .bs-risk-overview {
        grid-template-columns: repeat(3,1fr)
    }

    .bs-internal-categories {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:900px) {
    .bs-topbar {
        padding: 0 14px
    }

    .bs-menu-button {
        width: 49px
    }

        .bs-menu-button b {
            display: none
        }

    .bs-brand img {
        width: 160px
    }

    .bs-cart-button {
        font-size: 0
    }

        .bs-cart-button b {
            font-size: 9px
        }

    .bs-user em {
        display: none
    }

    .bs-shell {
        width: min(100% - 28px,1420px)
    }

    .bs-hero-grid {
        grid-template-columns: 1fr;
        padding: 65px 0
    }

    .bs-live-orbit {
        display: none
    }

    .bs-kpi-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .bs-time-layout, .bs-risk-layout, .bs-matrix-workspace, .bs-dsfa-grid, .bs-subscription-hero {
        grid-template-columns: 1fr
    }

    .bs-ticket-layout {
        grid-template-columns: 1fr
    }

    .bs-ticket-filters {
        grid-template-columns: repeat(4,1fr)
    }

        .bs-ticket-filters > small, .bs-ticket-filters hr, .bs-ticket-filters label {
            display: none
        }

    .bs-kanban-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .bs-risk-editor {
        position: static
    }

    .bs-dsfa-status {
        overflow: auto
    }

    .bs-nav-level3 {
        left: 368px
    }

    .bs-navigation.level3 .bs-nav-level2.active {
        transform: translateX(-290px);
        opacity: .2;
        pointer-events: none
    }

    .bs-footer {
        grid-template-columns: 1fr
    }

        .bs-footer nav {
            flex-wrap: wrap
        }

        .bs-footer small {
            grid-column: auto
        }
}

@media(max-width:620px) {
    .bs-topbar {
        height: 68px;
        gap: 9px
    }

    .bs-brand img {
        width: 130px
    }

    .bs-search, .bs-user {
        display: none
    }

    .bs-hero-grid {
        min-height: 470px
    }

    .bs-hero h1 {
        font-size: 44px
    }

    .bs-hero-actions {
        flex-direction: column;
        align-items: stretch
    }

    .bs-dashboard-section {
        margin-top: 0
    }

    .bs-kpi-grid, .bs-time-summary, .bs-project-grid, .bs-market-grid, .bs-sub-grid, .bs-internal-categories {
        grid-template-columns: 1fr
    }

    .bs-pagehead {
        padding: 48px 0
    }

        .bs-pagehead .bs-shell {
            display: block
        }

    .bs-pagehead-actions {
        margin-top: 20px
    }

    .bs-ticket-filters {
        grid-template-columns: repeat(2,1fr)
    }

    .bs-ticket-list article {
        grid-template-columns: 5px 1fr
    }

    .bs-ticket-list > article > button {
        display: none
    }

    .bs-ticket-list footer {
        flex-wrap: wrap
    }

    .bs-kanban-grid {
        grid-template-columns: 1fr
    }

    .bs-risk-overview {
        grid-template-columns: repeat(2,1fr)
    }

    .bs-matrix-card {
        padding: 13px
    }

        .bs-matrix-card > header {
            display: block
        }

    .bs-legend {
        margin-top: 10px
    }

    .bs-matrix-wrap {
        grid-template-columns: 20px 64px 1fr
    }

    .bs-matrix-cell b {
        font-size: 12px
    }

    .bs-matrix-cell small {
        display: none
    }

    .bs-dsfa-status {
        padding: 12px
    }

        .bs-dsfa-status article {
            flex-basis: 110px
        }

    .bs-nav-rail {
        width: 62px
    }

    .bs-nav-panel {
        left: 62px;
        width: calc(100vw - 62px)
    }

    .bs-nav-level2, .bs-nav-level3 {
        left: 62px
    }

    .bs-navigation.level2 .bs-nav-level1, .bs-navigation.level3 .bs-nav-level1 {
        transform: translateX(-100%)
    }

    .bs-navigation.level3 .bs-nav-level2.active {
        transform: translateX(-100%);
        opacity: 1
    }

    .bs-nav-level2.active, .bs-nav-level3.active {
        z-index: 5
    }

    .bs-form-grid {
        grid-template-columns: 1fr
    }

    .bs-shop-tabs {
        overflow: auto
    }

    .bs-market-card {
        min-height: 430px
    }

    .bs-footer {
        padding: 35px 18px
    }

    .bs-table-card {
        padding: 15px
    }
}

/* ==========================================================
   DATSIS VISION PORTAL V9 – LOGIN & GESCHÜTZTER ARBEITSBEREICH
   ========================================================== */
.portal-login-body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background: #061b22;
    color: #efffff;
    font-family: Inter,"Segoe UI",Arial,sans-serif;
    position: relative
}

    .portal-login-body:before {
        content: "";
        position: fixed;
        inset: 0;
        background: radial-gradient(circle at 12% 15%,rgba(35,219,184,.13),transparent 34%),radial-gradient(circle at 88% 22%,rgba(70,145,171,.18),transparent 32%),linear-gradient(135deg,#06171d,#092932 56%,#0b1d25);
        z-index: -3
    }

.portal-login-grid {
    position: fixed;
    inset: 0;
    z-index: -2;
    opacity: .2;
    background-image: linear-gradient(rgba(138,245,224,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(138,245,224,.12) 1px,transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom,black,transparent 85%)
}

.portal-login-glow {
    position: fixed;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .22;
    z-index: -1;
    animation: portalGlow 9s ease-in-out infinite alternate
}

.login-glow-one {
    left: -170px;
    top: 25%;
    background: #25d7b5
}

.login-glow-two {
    right: -160px;
    top: -100px;
    background: #397ea0;
    animation-delay: -4s
}

@keyframes portalGlow {
    to {
        transform: translate3d(35px,-25px,0) scale(1.12)
    }
}

.portal-login-shell {
    width: min(1440px,calc(100% - 48px));
    min-height: 100vh;
    margin: auto;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(520px,.95fr);
    gap: 64px;
    align-items: center;
    padding: 48px 0;
    box-sizing: border-box
}

.portal-login-story {
    max-width: 700px
}

.portal-login-logo {
    display: inline-flex;
    margin-bottom: 56px
}

    .portal-login-logo img {
        width: 235px;
        max-height: 70px;
        filter: brightness(0) invert(1)
    }

.portal-login-kicker {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: #84ead6;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em
}

    .portal-login-kicker i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #36e0bb;
        box-shadow: 0 0 0 7px rgba(54,224,187,.12)
    }

.portal-login-story h1 {
    font-size: clamp(48px,6vw,84px);
    line-height: .98;
    letter-spacing: -.055em;
    margin: 25px 0 28px;
    max-width: 850px
}

    .portal-login-story h1 em {
        font-style: normal;
        color: #75e8d2;
        font-weight: 400
    }

.portal-login-story > p {
    font-size: 19px;
    line-height: 1.75;
    color: #acc8ce;
    max-width: 680px
}

.portal-login-features {
    display: grid;
    gap: 12px;
    margin-top: 38px
}

    .portal-login-features article {
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 15px 18px;
        border: 1px solid rgba(151,237,220,.12);
        background: rgba(7,35,43,.46);
        backdrop-filter: blur(12px);
        border-radius: 16px;
        max-width: 580px;
        transition: .3s
    }

        .portal-login-features article:hover {
            border-color: rgba(75,229,199,.36);
            transform: translateX(8px)
        }

        .portal-login-features article > span {
            display: grid;
            place-items: center;
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: rgba(62,222,193,.12);
            color: #5ee3c9;
            font-size: 12px;
            font-weight: 900
        }

    .portal-login-features b, .portal-login-features small {
        display: block
    }

    .portal-login-features b {
        font-size: 15px
    }

    .portal-login-features small {
        color: #89aab1;
        margin-top: 4px
    }

.portal-login-stage {
    --login-x: 0px;
    --login-y: 0px;
    position: relative;
    min-height: 720px;
    display: grid;
    place-items: center;
    isolation: isolate
}

.portal-login-card {
    position: relative;
    width: min(460px,calc(100% - 40px));
    padding: 34px;
    border-radius: 28px;
    background: linear-gradient(160deg,rgba(255,255,255,.98),rgba(235,249,247,.96));
    color: #0e3038;
    box-shadow: 0 38px 100px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.35);
    z-index: 5;
    transform: translate(var(--login-x),var(--login-y));
    transition: transform .15s ease
}

    .portal-login-card:before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(135deg,rgba(255,255,255,.8),rgba(36,213,180,.45),transparent);
        -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        pointer-events: none
    }

    .portal-login-card header {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        align-items: flex-start
    }

        .portal-login-card header small {
            font-weight: 900;
            letter-spacing: .16em;
            color: #269980
        }

        .portal-login-card header h2 {
            font-size: 30px;
            margin: 6px 0 0;
            letter-spacing: -.035em
        }

        .portal-login-card header > span {
            white-space: nowrap;
            font-size: 12px;
            font-weight: 800;
            color: #28715f;
            background: #dff8f0;
            padding: 8px 11px;
            border-radius: 99px
        }

            .portal-login-card header > span i {
                display: inline-block;
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: #26c08f;
                margin-right: 6px;
                box-shadow: 0 0 0 5px rgba(38,192,143,.13)
            }

    .portal-login-card > p {
        color: #668087;
        line-height: 1.6;
        margin: 20px 0 24px
    }

    .portal-login-card > label {
        display: block;
        margin-top: 16px
    }

        .portal-login-card > label > span {
            display: block;
            font-size: 13px;
            font-weight: 800;
            margin-bottom: 8px
        }

        .portal-login-card > label > div {
            display: flex;
            align-items: center;
            height: 54px;
            background: #f6fbfa;
            border: 1px solid #cee1de;
            border-radius: 14px;
            transition: .2s
        }

            .portal-login-card > label > div:focus-within {
                border-color: #26b99c;
                box-shadow: 0 0 0 4px rgba(38,185,156,.1)
            }

            .portal-login-card > label > div > i {
                width: 48px;
                text-align: center;
                color: #2aa58d;
                font-style: normal
            }

    .portal-login-card input[type=text], .portal-login-card input[type=password] {
        min-width: 0;
        flex: 1;
        height: 100%;
        border: 0;
        outline: 0;
        background: transparent;
      /*  font: inherit;*/
        color: #0f333b
    }

.portal-password-toggle {
    border: 0;
    background: none;
    color: #16816d;
    font-weight: 800;
    padding: 0 15px;
    cursor: pointer
}

.portal-login-options {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    font-size: 12px;
    margin: 16px 0 20px;
    color: #5a747a
}

    .portal-login-options label {
        display: flex;
        align-items: center;
        gap: 7px
    }

    .portal-login-options a {
        color: #187966;
        text-decoration: none;
        font-weight: 700
    }

.portal-login-submit {
    width: 100%;
    height: 56px;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(135deg,#0e5664,#14a88c);
    color: white;
    font: 800 15px inherit;
    box-shadow: 0 18px 35px rgba(9,104,93,.25);
    cursor: pointer;
    transition: .25s
}

    .portal-login-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 22px 44px rgba(9,104,93,.32)
    }

.portal-login-error {
    display: block;
    color: #b32e42;
    font-size: 13px;
    font-weight: 700;
    margin-top: 14px;
    min-height: 18px
}

.portal-login-card footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #dae8e5;
    color: #688086;
    font-size: 11px
}

    .portal-login-card footer i {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #24bf8e;
        margin-right: 5px
    }

.portal-orbit {
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    opacity: .8;
    z-index: 0;
    transform: translate(calc(var(--login-x) * -.6),calc(var(--login-y) * -.6))
}

.orbit-ring {
    position: absolute;
    border-radius: 50%;
    inset: 8%;
    border: 1px solid rgba(92,231,205,.25);
    animation: portalSpin 24s linear infinite
}

.orbit-two {
    inset: 20%;
    border-style: dashed;
    animation-direction: reverse;
    animation-duration: 18s
}

.orbit-three {
    inset: 32%;
    border-color: rgba(255,255,255,.15);
    animation-duration: 12s
}

.orbit-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 110px;
    height: 110px;
    transform: translate(-50%,-50%);
    display: grid;
    place-content: center;
    text-align: center;
    border-radius: 50%;
    background: #0e4854;
    border: 1px solid rgba(94,239,211,.35);
    box-shadow: 0 0 60px rgba(54,220,188,.25)
}

    .orbit-core b {
        font-size: 28px
    }

    .orbit-core small {
        font-size: 9px;
        letter-spacing: .18em;
        color: #74e4cf
    }

.orbit-dot {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #4ce0c3;
    box-shadow: 0 0 20px #4ce0c3
}

.orbit-dot-one {
    top: 10%;
    left: 48%;
    animation: portalFloat 4s ease-in-out infinite
}

.orbit-dot-two {
    right: 10%;
    top: 55%;
    animation: portalFloat 5s ease-in-out infinite -2s
}

.orbit-dot-three {
    left: 16%;
    bottom: 18%;
    animation: portalFloat 6s ease-in-out infinite -3s
}

@keyframes portalSpin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes portalFloat {
    50% {
        transform: translateY(-16px)
    }
}

.portal-float-card {
    position: absolute;
    z-index: 8;
    padding: 14px 17px;
    border: 1px solid rgba(130,237,218,.25);
    border-radius: 15px;
    background: rgba(7,33,41,.88);
    box-shadow: 0 18px 40px rgba(0,0,0,.3);
    backdrop-filter: blur(15px);
    animation: portalCardFloat 5s ease-in-out infinite
}

    .portal-float-card small, .portal-float-card b, .portal-float-card span {
        display: block
    }

    .portal-float-card small {
        font-size: 9px;
        letter-spacing: .16em;
        color: #62d9c2
    }

    .portal-float-card b {
        font-size: 14px;
        margin: 4px 0
    }

    .portal-float-card span {
        font-size: 11px;
        color: #88aeb5
    }

.float-roadmap {
    right: -10px;
    top: 105px
}

.float-risk {
    left: -34px;
    bottom: 160px;
    animation-delay: -2s
}

.float-docs {
    right: 15px;
    bottom: 70px;
    animation-delay: -3.4s
}

@keyframes portalCardFloat {
    50% {
        transform: translateY(-10px)
    }
}

.portal-scan {
    position: absolute;
    z-index: 4;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg,transparent,#52e3c5,transparent);
    box-shadow: 0 0 15px #52e3c5;
    animation: portalScan 5s ease-in-out infinite
}

@keyframes portalScan {
    0%,100% {
        top: 20%;
        opacity: 0
    }

    15%,85% {
        opacity: 1
    }

    50% {
        top: 80%
    }
}

/* Portal-internal additions */
.bs-user {
    display: flex !important;
    align-items: center;
    gap: 9px
}

    .bs-user small {
        display: block;
        color: #72888d;
        font-size: 10px
    }

.bs-logout {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    padding: 9px 12px !important;
    background: #153c45 !important;
    color: #fff !important;
    text-decoration: none;
    font-size: 12px;
    /*font-weight: 800*/
}

.portal-page-heading {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: flex-end;
    margin-bottom: 24px
}

    .portal-page-heading > div > span {
        font-size: 11px;
        letter-spacing: .16em;
        font-weight: 900;
        color: #2c9782
    }

    .portal-page-heading h1 {
        margin: 7px 0 5px;
        font-size: clamp(30px,4vw,48px);
        letter-spacing: -.04em;
        color: #15383f
    }

    .portal-page-heading p {
        margin: 0;
        color: #70848a;
        max-width: 760px;
        line-height: 1.6
    }

.portal-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.portal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 11px;
    border: 1px solid #cbdedb;
    background: #fff;
    color: #23454c;
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer
}

    .portal-button.primary {
        background: #1f776d;
        color: #fff;
        border-color: #1f776d
    }

    .portal-button.soft {
        background: #e8f5f2;
        color: #1d7064;
        border-color: #d4ebe6
    }

.portal-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px;
    margin-bottom: 18px
}

.portal-kpi {
    padding: 20px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e1ecea;
    box-shadow: 0 10px 28px rgba(36,71,79,.06)
}

    .portal-kpi small {
        display: block;
        color: #788c91;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .08em
    }

    .portal-kpi b {
        display: block;
        font-size: 30px;
        color: #173e45;
        margin: 7px 0 4px
    }

    .portal-kpi span {
        font-size: 12px;
        color: #38806f
    }

    .portal-kpi.danger span {
        color: #bb4450
    }

    .portal-kpi.warn span {
        color: #a56b13
    }

.portal-grid {
    display: grid;
    grid-template-columns: repeat(12,minmax(0,1fr));
    gap: 16px
}

.portal-card {
    grid-column: span 4;
    background: #fff;
    border: 1px solid #e1ecea;
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 12px 32px rgba(35,71,79,.06)
}

    .portal-card.span-8 {
        grid-column: span 8
    }

    .portal-card.span-6 {
        grid-column: span 6
    }

    .portal-card.span-12 {
        grid-column: span 12
    }

    .portal-card header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 18px
    }

        .portal-card header small {
            display: block;
            color: #2b9481;
            font-weight: 900;
            font-size: 10px;
            letter-spacing: .14em
        }

    .portal-card h2 {
        margin: 5px 0 0;
        font-size: 20px;
        color: #173b42
    }

    .portal-card header a {
        color: #277d6f;
        text-decoration: none;
        font-weight: 800;
        font-size: 12px
    }

    .portal-card > p {
        color: #70848a;
        line-height: 1.6
    }

.portal-table {
    width: 100%;
    border-collapse: collapse
}

    .portal-table th {
        text-align: left;
        font-size: 10px;
        letter-spacing: .1em;
        color: #7b9095;
        padding: 10px;
        border-bottom: 1px solid #e1ecea
    }

    .portal-table td {
        padding: 13px 10px;
        border-bottom: 1px solid #edf3f2;
        color: #304f55;
        font-size: 13px
    }

    .portal-table tr:last-child td {
        border-bottom: 0
    }

    .portal-table b {
        color: #173b42
    }

.portal-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 99px;
    background: #e3f5ef;
    color: #277761;
    font-size: 10px;
    font-weight: 900
}

    .portal-badge.warn {
        background: #fff2d9;
        color: #946619
    }

    .portal-badge.danger {
        background: #fde4e5;
        color: #aa3d47
    }

    .portal-badge.close {
        background: #a9ec8f;
        color: #3b983d
    }

    .portal-badge.info {
        background: #e4eef8;
        color: #356b9c
    }

.portal-list {
    display: grid;
    gap: 10px
}

    .portal-list article, .portal-list a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border-radius: 13px;
        background: #f7fbfa;
        text-decoration: none;
        color: #2d5056;
        border: 1px solid transparent
    }

        .portal-list article:hover, .portal-list a:hover {
            border-color: #cee6e1
        }

    .portal-list i {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: #def3ee;
        color: #207c6b;
        font-style: normal;
        font-size: 11px;
        font-weight: 900
    }

    .portal-list span {
        min-width: 0;
        flex: 1
    }

    .portal-list b, .portal-list small {
        display: block
    }

    .portal-list b {
        font-size: 13px
    }

    .portal-list small {
        font-size: 11px;
        color: #829499;
        margin-top: 3px
    }

    .portal-list em {
        font-style: normal;
        color: #698086;
        font-size: 11px
    }

.portal-progress {
    height: 9px;
    background: #e7efee;
    border-radius: 99px;
    overflow: hidden
}

    .portal-progress i {
        display: block;
        height: 100%;
        width: var(--p);
        background: linear-gradient(90deg,#2ac09e,#187568);
        border-radius: inherit
    }

.portal-roadmap {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px
}

    .portal-roadmap article {
        position: relative;
        padding: 15px 12px;
        background: #f7faf9;
        border-radius: 13px;
        border: 1px solid #e3eeec
    }

        .portal-roadmap article:after {
            content: "";
            position: absolute;
            right: -11px;
            top: 29px;
            width: 12px;
            height: 2px;
            background: #d4e2df
        }

        .portal-roadmap article:last-child:after {
            display: none
        }

    .portal-roadmap b, .portal-roadmap small, .portal-roadmap span {
        display: block
    }

    .portal-roadmap b {
        font-size: 12px;
        color: #22464d
    }

    .portal-roadmap small {
        color: #7f9398;
        font-size: 10px;
        margin: 5px 0 10px
    }

    .portal-roadmap span {
        font-size: 11px;
        font-weight: 900;
        color: #23816e
    }

.portal-note {
    width: 100%;
    min-height: 150px;
    resize: vertical;
    border: 1px solid #d6e5e2;
    border-radius: 14px;
    padding: 15px;
    box-sizing: border-box;
    background: #fffdf3;
    font: 14px/1.6 inherit;
    color: #40545a;
    outline: 0
}

    .portal-note:focus {
        border-color: #38a88f;
        box-shadow: 0 0 0 4px rgba(56,168,143,.1)
    }

.portal-note-status {
    font-size: 11px;
    color: #748b90;
    margin-top: 8px
}

.portal-split {
    display: grid;
    grid-template-columns: minmax(250px,.75fr) minmax(0,1.5fr);
    gap: 16px
}

.portal-side-list {
    background: #fff;
    border: 1px solid #e1ecea;
    border-radius: 18px;
    padding: 14px
}

    .portal-side-list button {
        width: 100%;
        display: flex;
        align-items: center;
        text-align: left;
        border: 0;
        background: transparent;
        padding: 12px;
        border-radius: 11px;
        cursor: pointer;
        color: #35535a
    }

        .portal-side-list button.active, .portal-side-list button:hover {
            background: #e9f6f2;
            color: #176e60
        }

    .portal-side-list b, .portal-side-list small {
        display: block
    }

    .portal-side-list small {
        color: #84969a;
        margin-top: 3px
    }

.portal-detail {
    background: #fff;
    border: 1px solid #e1ecea;
    border-radius: 18px;
    padding: 22px
}

.portal-map {
    position: relative;
    min-height: 330px;
    border-radius: 18px;
    background: linear-gradient(135deg,#e8f3ef,#f7faf9);
    overflow: hidden;
    border: 1px solid #dcebe8
}

    .portal-map:before {
        content: "";
        position: absolute;
        inset: 15%;
        background: linear-gradient(130deg,transparent 12%,rgba(49,139,119,.12) 13% 15%,transparent 16% 40%,rgba(49,139,119,.12) 41% 43%,transparent 44%),linear-gradient(35deg,transparent 20%,rgba(49,139,119,.1) 21% 23%,transparent 24% 63%,rgba(49,139,119,.1) 64% 66%,transparent 67%);
        border: 18px solid rgba(60,145,126,.12);
        border-radius: 45% 35% 52% 41%;
        transform: rotate(-8deg)
    }

.portal-pin {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50% 50% 50% 0;
    background: #177968;
    transform: rotate(-45deg);
    box-shadow: 0 8px 18px rgba(21,100,88,.25)
}

    .portal-pin:after {
        content: "";
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #fff;
        left: 5px;
        top: 5px
    }

    .portal-pin span {
        position: absolute;
        left: 23px;
        top: -2px;
        transform: rotate(45deg);
        background: #fff;
        padding: 5px 8px;
        border-radius: 8px;
        box-shadow: 0 8px 18px rgba(35,70,78,.12);
        font-size: 10px;
        font-weight: 800;
        color: #21464d;
        white-space: nowrap
    }

.pin-one {
    left: 30%;
    top: 58%
}

.pin-two {
    left: 45%;
    top: 39%
}

.pin-three {
    left: 57%;
    top: 53%
}

.pin-four {
    left: 68%;
    top: 29%
}

.portal-folder-tree {
    display: grid;
    gap: 7px
}

    .portal-folder-tree div {
        padding: 10px 12px;
        border-radius: 10px;
        background: #f7faf9;
        color: #37565d;
        font-size: 13px
    }

        .portal-folder-tree div:before {
            content: "▸";
            margin-right: 8px;
            color: #2b977f
        }

    .portal-folder-tree .depth-1 {
        margin-left: 18px
    }

    .portal-folder-tree .depth-2 {
        margin-left: 36px;
        background: #edf6f3
    }

.portal-chart {
    display: flex;
    align-items: end;
    gap: 10px;
    height: 190px;
    padding-top: 20px
}

    .portal-chart i {
        position: relative;
        flex: 1;
        height: var(--h);
        min-height: 14px;
        background: linear-gradient(to top,#1e7468,#50c2a8);
        border-radius: 8px 8px 3px 3px
    }

        .portal-chart i small {
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            font-style: normal;
            color: #73898e;
            font-size: 10px
        }

        .portal-chart i b {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translate(-50%,-6px);
            font-style: normal;
            font-size: 10px;
            color: #2b565c
        }

.portal-kanban {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px
}

    .portal-kanban > section {
        background: #f5f9f8;
        border-radius: 15px;
        padding: 12px
    }

    .portal-kanban h3 {
        font-size: 12px;
        margin: 0 0 12px;
        color: #527076
    }

    .portal-kanban article {
        background: #fff;
        border: 1px solid #e0ebe9;
        border-radius: 11px;
        padding: 12px;
        margin-top: 8px;
        box-shadow: 0 7px 16px rgba(30,65,72,.05)
    }

        .portal-kanban article b, .portal-kanban article small {
            display: block
        }

        .portal-kanban article b {
            font-size: 12px
        }

        .portal-kanban article small {
            font-size: 10px;
            color: #839599;
            margin-top: 6px
        }

.portal-empty-state {
    text-align: center;
    padding: 45px 20px;
    color: #70858a
}

    .portal-empty-state i {
        display: grid;
        place-items: center;
        width: 62px;
        height: 62px;
        border-radius: 20px;
        margin: 0 auto 15px;
        background: #e2f4ef;
        color: #247e6e;
        font-style: normal;
        font-size: 22px
    }

    .portal-empty-state h3 {
        color: #21464d;
        margin: 0 0 8px
    }

.portal-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px
}

.portal-field {
    display: grid;
    gap: 7px
}

    .portal-field.full {
        grid-column: 1/-1
    }

    .portal-field span {
        font-size: 11px;
        font-weight: 900;
        color: #5d747a
    }

    .portal-field input, .portal-field select, .portal-field textarea {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #d4e3e0;
        border-radius: 11px;
        padding: 12px;
        background: #fbfdfd;
        font: inherit;
        color: #294b52;
        outline: 0
    }

    .portal-field textarea {
        min-height: 100px
    }

        .portal-field input:focus, .portal-field select:focus, .portal-field textarea:focus {
            border-color: #34a68e;
            box-shadow: 0 0 0 3px rgba(52,166,142,.09)
        }

.portal-heat-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 6px
}

.portal-heat-cell {
    aspect-ratio: 1;
    border: 0;
    border-radius: 11px;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    transition: .2s;
    position: relative
}

    .portal-heat-cell:hover, .portal-heat-cell.selected {
        transform: scale(1.06);
        box-shadow: 0 8px 18px rgba(25,66,73,.22);
        z-index: 2
    }

    .portal-heat-cell.low {
        background: #48ad79
    }

    .portal-heat-cell.medium {
        background: #9cbd45
    }

    .portal-heat-cell.elevated {
        background: #d8b63a
    }

    .portal-heat-cell.high {
        background: #df8840
    }

    .portal-heat-cell.critical {
        background: #cc4c56
    }

.portal-risk-legend {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px
}

    .portal-risk-legend span {
        padding: 5px 8px;
        border-radius: 99px;
        font-size: 10px;
        color: white
    }

.portal-risk-result {
    min-height: 180px;
    display: grid;
    place-content: center;
    text-align: center;
    border-radius: 18px;
    background: #eef5f3
}

    .portal-risk-result b {
        font-size: 52px;
        color: #173f46
    }

    .portal-risk-result strong {
        font-size: 18px;
        color: #35796b
    }

    .portal-risk-result span, .portal-risk-result small {
        color: #789095
    }

    .portal-risk-result small {
        max-width: 280px;
        line-height: 1.5;
        margin-top: 8px
    }

.portal-subscription {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid #dfeae8;
    background: #fff
}

    .portal-subscription h3 {
        margin: 0 0 6px;
        color: #1b444b
    }

    .portal-subscription p {
        margin: 0;
        color: #73888d;
        font-size: 12px
    }

    .portal-subscription aside {
        text-align: right
    }

        .portal-subscription aside b, .portal-subscription aside small {
            display: block
        }

        .portal-subscription aside b {
            color: #237a69
        }

.portal-product-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px
}

.portal-product {
    position: relative;
    padding: 22px;
    background: #fff;
    border: 1px solid #e1ecea;
    border-radius: 18px;
    overflow: hidden
}

    .portal-product:before {
        content: "";
        position: absolute;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        right: -45px;
        top: -55px;
        background: rgba(46,184,155,.12)
    }

    .portal-product > span {
        font-size: 10px;
        color: #2d9580;
        font-weight: 900;
        letter-spacing: .13em
    }

    .portal-product h3 {
        margin: 10px 0;
        color: #1b4148
    }

    .portal-product p {
        color: #73878c;
        line-height: 1.5;
        font-size: 13px
    }

    .portal-product footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 18px
    }

        .portal-product footer b {
            font-size: 18px;
            color: #1d5d54
        }

        .portal-product footer button {
            border: 0;
            background: #1d7569;
            color: #fff;
            border-radius: 10px;
            padding: 9px 12px;
            font-weight: 800;
            cursor: pointer
        }

@media(max-width:1100px) {
    .portal-login-shell {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 35px 0
    }

    .portal-login-story {
        text-align: center;
        margin: auto
    }

    .portal-login-logo {
        margin-bottom: 30px
    }

    .portal-login-features {
        max-width: 620px;
        margin: 30px auto 0;
        text-align: left
    }

    .portal-login-stage {
        min-height: 690px
    }

    .portal-kpi-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .portal-card, .portal-card.span-8, .portal-card.span-6 {
        grid-column: span 12
    }

    .portal-roadmap {
        grid-template-columns: repeat(3,1fr)
    }

    .portal-split {
        grid-template-columns: 1fr
    }

    .portal-product-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:700px) {
    .portal-login-shell {
        width: min(100% - 28px,620px)
    }

    .portal-login-story h1 {
        font-size: 48px
    }

    .portal-login-logo img {
        width: 190px
    }

    .portal-login-stage {
        min-height: 640px
    }

    .portal-orbit {
        width: 480px;
        height: 480px
    }

    .portal-login-card {
        width: calc(100% - 12px);
        padding: 25px
    }

    .portal-float-card {
        display: none
    }

    .portal-login-card footer {
        display: grid
    }

    .portal-kpi-grid {
        grid-template-columns: 1fr
    }

    .portal-page-heading {
        align-items: flex-start;
        display: grid
    }

    .portal-roadmap {
        grid-template-columns: repeat(2,1fr)
    }

        .portal-roadmap article:after {
            display: none
        }

    .portal-form-grid {
        grid-template-columns: 1fr
    }

    .portal-field.full {
        grid-column: auto
    }

    .portal-kanban {
        grid-template-columns: 1fr
    }

    .portal-product-grid {
        grid-template-columns: 1fr
    }

    .portal-table {
        min-width: 720px
    }

    .portal-table-wrap {
        overflow: auto
    }

    .portal-subscription {
        grid-template-columns: 1fr
    }

        .portal-subscription aside {
            text-align: left
        }
}

@media(prefers-reduced-motion:reduce) {
    .portal-login-glow, .orbit-ring, .orbit-dot, .portal-float-card, .portal-scan {
        animation: none !important
    }

    .portal-login-stage {
        --login-x: 0 !important;
        --login-y: 0 !important
    }
}

/* Login finishing fixes */
.portal-login-card footer {
    background: transparent !important;
    color: #688086 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important
}

@media(max-width:700px) {
    .portal-login-body {
        max-width: 100vw;
        overflow-x: hidden
    }

    .portal-login-shell, .portal-login-story, .portal-login-stage, .portal-login-card {
        min-width: 0;
        max-width: 100%
    }

        .portal-login-story > p {
            overflow-wrap: anywhere
        }

    .portal-login-kicker {
        white-space: normal;
        font-size: 10px;
        letter-spacing: .11em;
        justify-content: center
    }

    .portal-orbit {
        width: min(420px,100vw);
        height: min(420px,100vw);
        left: 50%;
        transform: translateX(-50%)
    }

    .portal-login-card {
        width: 100%
    }
}

/* MVC V10 – dauerhaft angeheftetes Portalmenü */
@media (min-width: 1101px) {
    body.bs-body {
        padding-left: 396px;
        transition: padding-left .35s ease;
    }

        body.bs-body.portal-nav-collapsed {
            padding-left: 76px;
        }

    .bs-navigation.portal-pinned {
        position: fixed;
        inset: 76px auto 0 0;
        display: flex;
        z-index: 1300;
        width: auto;
        transform: none !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        background: transparent;
    }

        .bs-navigation.portal-pinned .bs-nav-backdrop {
            display: none;
        }

        .bs-navigation.portal-pinned .bs-nav-rail {
            position: relative;
            inset: auto;
            width: 76px;
            flex: 0 0 76px;
            height: 100%;
        }

        .bs-navigation.portal-pinned .bs-nav-level1 {
            position: relative;
            inset: auto;
            transform: none;
            width: 320px;
            flex: 0 0 320px;
            height: 100%;
            display: flex;
        }

        .bs-navigation.portal-pinned .bs-nav-level2, .bs-navigation.portal-pinned .bs-nav-level3 {
            position: relative;
            inset: auto;
            width: 320px;
            flex: 0 0 320px;
            height: 100%;
            transform: translateX(-16px);
            opacity: 0;
            pointer-events: none;
            display: none;
        }

        .bs-navigation.portal-pinned.level2 .bs-nav-level2.active, .bs-navigation.portal-pinned.level3 .bs-nav-level2.active, .bs-navigation.portal-pinned.level3 .bs-nav-level3.active {
            display: flex;
            transform: translateX(0);
            opacity: 1;
            pointer-events: auto;
        }

        .bs-navigation.portal-pinned.level2 ~ * {
        }

    body.bs-body.portal-nav-level2 {
        padding-left: 716px;
    }

    body.bs-body.portal-nav-level3 {
        padding-left: 1036px;
    }

    .bs-navigation.portal-pinned.collapsed .bs-nav-panel {
        display: none !important;
    }

    .bs-navigation.portal-pinned.collapsed {
        width: 76px;
    }

        .bs-navigation.portal-pinned.collapsed .bs-nav-rail small {
            opacity: 0;
            width: 0;
            overflow: hidden;
        }

    .bs-topbar {
        left: 0;
        right: 0;
    }

    .bs-menu-button .bs-menu-state {
        display: block;
        font-size: 9px;
        opacity: .7;
        font-weight: 500;
    }
}

@media (max-width: 1100px) {
    .bs-menu-button .bs-menu-state {
        display: none;
    }
}

/* Login-Card ohne Schleier / bessere Lesbarkeit */

.portal-login-card {
    background: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 28px 80px rgba(20, 35, 45, .22) !important;
}

    /* Falls ein Glas-Overlay über ::before / ::after gelegt wird */
    .portal-login-card::before,
    .portal-login-card::after {
        display: none !important;
    }

    /* Text kräftiger und besser lesbar */
    .portal-login-card,
    .portal-login-card p,
    .portal-login-card label,
    .portal-login-card span,
    .portal-login-card small {
        color: #1c3039 !important;
    }

        /* Überschrift klarer */
        .portal-login-card h2 {
            color: #1c3039 !important;
        }

        /* Labels besser sichtbar */
        .portal-login-card label > span {
            color: #2C4754 !important;
            font-weight: 900 !important;
        }

        /* Eingabefelder ohne Transparenz */
        .portal-login-card label div {
            background: #ffffff !important;
            border: 1px solid rgba(44, 71, 84, .18) !important;
            box-shadow: 0 8px 22px rgba(29, 53, 64, .08) !important;
        }

        /* Input-Textelder ohne Transparenz */
        .portal-login-card label div {
            background: #ffffff !important;
            border: 1px solid rgba(44, 71, 84, .18) !important;
            box-shadow: 0 8px 22px rgba(29, 53, 64, .08) !important;
        }

        /* Input-Text kräftiger */
        .portal-login-card input {
            color: #1c3039 !important;
            background: transparent !important;
           /* font-weight: 700 !important;*/
        }

            .portal-login-card input::placeholder {
                color: #7a8b92 !important;
                opacity: 1 !important;
            }

/* Anzeigen-Button besser lesbar */
.portal-password-toggle {
    color: #2C4754 !important;
    font-weight: 900 !important;
}

/* Demo-Hinweis unten klarer */
.portal-login-card footer {
   /* background: #f3f8fa !important;
    border: 1px solid rgba(44, 71, 84, .12) !important;*/
    color: #1c3039 !important;
}

.bs-customer-switcher {
    position: relative;
    min-width: 240px;
}

.bs-customer-trigger {
    width: 100%;
    min-height: 54px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    color: #ffffff;
    background: rgba(255,255,255,.08);
    cursor: pointer;
    text-align: left;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

    .bs-customer-trigger:hover {
        background: rgba(255,255,255,.13);
        border-color: rgba(255,255,255,.28);
    }

.bs-user-title {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(135deg, #5F7A86, #9FB6C0);
    font-size: .78rem;
    font-weight: 900;
}

.bs-customer-trigger em {
    min-width: 0;
    display: grid;
    gap: 2px;
    font-style: normal;
    color: #ffffff;
    font-size:10pt;
    /*font-weight: 800;*/
    line-height: 1.1;
}

.bs-customer-trigger small {
    display: block;
    /*max-width: 180px;*/
    overflow: hidden;
    color: rgba(255,255,255,.66);
    font-size: .72rem;
    font-weight: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs-customer-caret {
    color: rgba(255,255,255,.72);
    font-size: 1rem;
    transition: transform .2s ease;
}

.bs-customer-switcher.is-open .bs-customer-caret {
    transform: rotate(180deg);
}

.bs-customer-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 9999;
    width: min(380px, calc(100vw - 24px));
    max-height: 430px;
    display: none;
    overflow: hidden;
    border: 1px solid rgba(44,71,84,.16);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 26px 70px rgba(12,24,38,.24);
}

.bs-customer-switcher.is-open .bs-customer-dropdown {
    display: block;
}

.bs-customer-search {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px;
    border-bottom: 1px solid rgba(44,71,84,.12);
    background: #ffffff;
}

    .bs-customer-search span {
        color: #5F7A86;
        font-size: 1.05rem;
        font-weight: 900;
    }

    .bs-customer-search input {
        width: 100%;
        min-height: 40px;
        border: 1px solid rgba(44,71,84,.14);
        border-radius: 12px;
        padding: 0 12px;
        outline: none;
        color: #1c3039;
        background: #f7fbfc;
        font-weight: 700;
    }

        .bs-customer-search input:focus {
            border-color: #7F98A3;
            box-shadow: 0 0 0 4px rgba(127,152,163,.16);
        }

.bs-customer-list {
    max-height: 360px;
    overflow: auto;
    padding: 8px;
}

.bs-customer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 10px 8px calc(10px + (var(--customer-level) * 18px));
    border-radius: 13px;
    color: #1c3039;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}

    .bs-customer-item:hover {
        background: #f0f6f8;
        transform: translateX(2px);
    }

.bs-customer-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, #5F7A86, #9FB6C0);
    box-shadow: 0 0 0 4px rgba(95,122,134,.12);
}

.bs-customer-name {
    overflow: hidden;
    font-size: .88rem;
    font-weight: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs-customer-empty {
    padding: 18px 12px;
    color: #708089;
    font-size: .86rem;
    font-weight: 800;
    text-align: center;
}

@media (max-width: 760px) {
    .bs-customer-switcher {
        width: 100%;
        min-width: 0;
    }

    .bs-customer-dropdown {
        right: auto;
        left: 0;
        width: 100%;
    }

    .bs-customer-trigger small {
        max-width: calc(100vw - 170px);
    }
}

.portal-chart.portal-chart-calm {
    position: relative;
    min-height: 285px;
    display: flex;
    align-items: flex-end;
    gap: 18px;
    padding: 30px 22px 46px;
    border: 1px solid rgba(44, 71, 84, .10);
    border-radius: 24px;
    background: linear-gradient(to top, rgba(44, 71, 84, .055) 1px, transparent 1px), linear-gradient(135deg, #ffffff 0%, #f7fbfc 58%, #eef6f8 100%);
    background-size: 100% 54px, auto;
    overflow: hidden;
}

    .portal-chart.portal-chart-calm::before {
        content: "";
        position: absolute;
        left: 22px;
        right: 22px;
        bottom: 46px;
        height: 1px;
        background: rgba(44, 71, 84, .14);
    }

    .portal-chart.portal-chart-calm i {
        position: relative;
        z-index: 2;
        flex: 1;
        min-width: 58px;
        height: var(--h);
        min-height: 36px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        /*    border-radius: 18px 18px 10px 10px;
    background:
        linear-gradient(180deg, #7fa58f 0%, #557b6a 48%, #2C4754 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        0 14px 26px rgba(44, 71, 84, .16);*/
        font-style: normal;
        transition: transform .18s ease, box-shadow .18s ease;
    }

        .portal-chart.portal-chart-calm i:hover {
            transform: translateY(-3px);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 20px 34px rgba(44, 71, 84, .22);
        }

        .portal-chart.portal-chart-calm i b {
            margin-top: 10px;
            padding: 4px 8px;
            border-radius: 999px;
            color: #ffffff;
            background: rgba(28, 48, 57, .20);
            font-size: .82rem;
            font-weight: 900;
            line-height: 1;
        }

        .portal-chart.portal-chart-calm i small {
            position: absolute;
            left: 50%;
            bottom: -29px;
            transform: translateX(-50%);
            color: #2C4754;
            font-size: .74rem;
            font-weight: 900;
            text-align: center;
            white-space: nowrap;
        }

@media (max-width: 900px) {
    .portal-chart.portal-chart-calm {
        gap: 10px;
        padding-left: 12px;
        padding-right: 12px;
    }

        .portal-chart.portal-chart-calm i {
            min-width: 44px;
            border-radius: 14px 14px 9px 9px;
        }

            .portal-chart.portal-chart-calm i b {
                font-size: .72rem;
                padding: 4px 6px;
            }

            .portal-chart.portal-chart-calm i small {
                font-size: .66rem;
            }
}